fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance by snuziale · Pull Request #174 · UiPath/apollo-ui

snuziale · 2026-02-06T01:05:51Z

Summary

Upgrade react-resizable-panels from ^3.0.6 to ^4.7.3
Migrate all usages to v4 API: PanelGroup → Group, PanelResizeHandle → Separator, direction → orientation
Update size props from bare numbers (v3 treated as percentages) to explicit percentage strings (v4
treats numbers as pixels)
Re-export PanelImperativeHandle type from the resizable wrapper so consumers don't need to import from
react-resizable-panels directly
Map v4 data attributes for hover/active/vertical styling (data-[separator=hover|active],
aria-[orientation=horizontal])

Breaking changes

This is a breaking change for consumers of ResizablePanelGroup, ResizablePanel, and ResizableHandle:

  ┌──────────────────────────────────┬──────────────────────────────────────────────────────┐
  │           v3 (before)            │                      v4 (after)                      │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ direction="horizontal"           │ orientation="horizontal"                             │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ defaultSize={50} (percentage)    │ defaultSize="50%" (numbers are now pixels)           │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ ref={panelRef}                   │ panelRef={panelRef}                                  │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ onResize={(size: number) => ...} │ onResize={(size: { asPercentage, inPixels }) => ...} │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ onCollapse / onExpand            │ Removed — use onResize                               │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ autoSaveId                       │ Removed — use useDefaultLayout hook                  │
  └──────────────────────────────────┴──────────────────────────────────────────────────────┘

Test plan

All 12 existing resizable unit tests pass
TypeScript compiles with no errors
Visually verify hover/active highlight on handles
Visually verify horizontal separator renders correctly in vertical (top/bottom) layouts
Visually verify grip icon rotates for vertical layouts
Check Storybook stories render correctly (Horizontal, Vertical, ThreePanels, Nested, WithHandleVariant)
Verify FlowEditorLayout bottom panel resize + switcher positioning still works

github-actions · 2026-02-06T01:06:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Mar 17, 2026, 05:43:00 PM
apollo-landing	🟢 Ready	Preview, Logs	Mar 17, 2026, 05:40:39 PM
apollo-ui-react	🟢 Ready	Preview, Logs	Mar 17, 2026, 05:42:23 PM
apollo-vertex	🟢 Ready	Preview, Logs	Mar 17, 2026, 05:41:58 PM
apollo-wind	🟢 Ready	Preview, Logs	Mar 17, 2026, 05:41:24 PM

Copilot

Pull request overview

This pull request upgrades the react-resizable-panels dependency from v3.0.6 to v4.6.0, which introduces several breaking API changes. The upgrade affects the resizable panel components used throughout the Apollo Wind design system.

Changes:

Upgraded react-resizable-panels to v4.6.0 and migrated all API usages (direction → orientation, numeric sizes → percentage strings, ref → panelRef, data attributes changes)
Updated the resizable component wrapper to use v4 imports (Group, Panel, Separator) and re-export PanelImperativeHandle type
Updated all tests, stories, and example files to use the new v4 API

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-lock.yaml	Updated dependency resolution for react-resizable-panels v4.6.0 and related transitive dependencies
packages/apollo-wind/package.json	Updated react-resizable-panels dependency version from ^3.0.6 to ^4.6.0
packages/apollo-wind/src/components/ui/resizable.tsx	Migrated to v4 API: imported Group/Panel/Separator, updated data attributes in styles, re-exported PanelImperativeHandle type
packages/apollo-wind/src/components/ui/resizable.test.tsx	Updated all tests to use v4 API (orientation prop, percentage strings, data-separator attribute) and removed accessibility test workaround
packages/apollo-wind/src/components/ui/resizable.stories.tsx	Updated all stories to use orientation prop and percentage string sizes
packages/apollo-wind/src/examples/form-builder-example.tsx	Updated to use orientation="horizontal" and percentage string sizes
packages/apollo-wind/src/examples/flow-editor-layout-example.tsx	Updated to use v4 API including orientation prop, panelRef, and getSize().asPercentage

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2026-02-06T01:10:11Z

-    {...props}
-  />
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof Group>) => (
+  <Group className={cn('flex h-full w-full', className)} {...props} />


The ResizablePanelGroup wrapper removed the flex-direction styling that was present in v3 (data-[panel-group-direction=vertical]:flex-col). In v4, the Group component may not automatically apply flex-col for vertical orientation. This should be replaced with aria-[orientation=vertical]:flex-col to ensure vertical panel groups render correctly with a column layout instead of defaulting to row layout.

Suggested change

<Group className={cn('flex h-full w-full', className)} {...props} />

<Group className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)} {...props} />

CalinaCristian

we can mark the commit with ! and semantic release should do a major bump, if it's breaking

CalinaCristian · 2026-02-09T22:49:51Z

Current Stack

main
- fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance #174 fix/wind-update-dep ← THIS PR

Managed with stacked-prs

github-actions · 2026-03-18T00:25:41Z

Dependency Review

The following issues were found:

✅ 0 vulnerable package(s)
✅ 0 package(s) with incompatible licenses
✅ 0 package(s) with invalid SPDX license definitions
⚠️ 2 package(s) with unknown licenses.

See the Details below.

License Issues

apps/apollo-vertex/package.json

Package	Version	License	Issue Type
react-resizable-panels	^4.7.3	Null	Unknown License

packages/apollo-wind/package.json

Package	Version	License	Issue Type
react-resizable-panels	^4.7.3	Null	Unknown License

Allowed Licenses:
AFL-1.1, AFL-1.2, AFL-2.0, AFL-2.1, AMPAS, APAFML, Adobe-2006, Afmparse, ADSL, AMDPLPA, ANTLR-PD, Apache-1.0, Apache-1.1, Apache-2.0, AML, Artistic-1.0, Artistic-1.0-Perl, Artistic-1.0-cl8, Artistic-2.0, AAL, Bahyph, Barr, Beerware, BSL-1.0, Borceux, BSD-1-Clause, BSD-2-Clause, BSD-2-Clause-FreeBSD, BSD-2-Clause-NetBSD, BSD-3-Clause, BSD-3-Clause-Clear, BSD-3-Clause-No-Nuclear-License-2014, BSD-3-Clause-No-Nuclear-Warranty, BSD-4-Clause, BSD-Source-Code, BSD-3-Clause-Attribution, 0BSD, BSD-2-Clause-Patent, BSD-4-Clause-UC, bzip2-1.0.5, bzip2-1.0.6, CECILL-B, ClArtistic, MIT-CMU, CNRI-Jython, CNRI-Python, CNRI-Python-GPL-Compatible, Condor-1.1, CC0-1.0, Crossword, CrystalStacker, Cube, curl, diffmark, WTFPL, DOC, DSDP, ECL-1.0, ECL-2.0, eGenix, EFL-1.0, EFL-2.0, MIT-advertising, MIT-enna, Entessa, Fair, MIT-feh, FTL, Giftware, HPND, IBM-pibs, ICU, ImageMagick, IJG, Info-ZIP, Intel, ISC, JasPer-2.0, LPPL-1.3c, BSD-3-Clause-LBNL, Leptonica, Libpng, libtiff, Linux-OpenIB, LPL-1.02, LPL-1.0, MTLL, MS-PL, MirOS, MITNFA, MIT, MIT-0, mpich2, Multics, Mup, NASA-1.3, Naumen, NBPL-1.0, Net-SNMP, NetCDF, Newsletr, NLPL, NRL, NTP, OGTSL, OLDAP-2.2.2, OLDAP-1.1, OLDAP-1.2, OLDAP-1.3, OLDAP-1.4, OLDAP-2.0, OLDAP-2.0.1, OLDAP-2.1, OLDAP-2.2, OLDAP-2.2.1, OLDAP-2.3, OLDAP-2.4, OLDAP-2.5, OLDAP-2.6, OLDAP-2.7, OLDAP-2.8, OML, OpenSSL, PHP-3.0, PHP-3.01, Plexus, PostgreSQL, psutils, Python-2.0, Qhull, Rdisc, RSA-MD, Ruby, Saxpath, SWL, SGI-B-2.0, Spencer-86, Spencer-94, Spencer-99, SMLNJ, TCL, TCP-wrappers, TU-Berlin-1.0, TU-Berlin-2.0, Unlicense, Unicode-DFS-2015, Unicode-DFS-2016, UPL-1.0, NCSA, VSL-1.0, W3C-20150513, W3C-19980720, W3C, Wsuipa, Xnet, X11, Xerox, XFree86-1.1, xinetd, xpp, Zed, Zend-2.0, Zlib, zlib-acknowledgement, ZPL-1.1, ZPL-2.0, ZPL-2.1, BlueOak-1.0.0, BSD-2-Clause-Views, JSON

OpenSSF Scorecard

Package	Version	Score	Details
npm/react-resizable-panels	^4.7.3	Unknown	Unknown
npm/react-resizable-panels	^4.7.3	Unknown	Unknown
npm/react-resizable-panels	4.7.3	Unknown	Unknown

Scanned Files

apps/apollo-vertex/package.json
packages/apollo-wind/package.json
pnpm-lock.yaml

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

apps/apollo-vertex/registry.json:801

registry/resizable/resizable.tsx in apollo-vertex still uses the v3 API (ResizablePrimitive.PanelGroup/PanelResizeHandle and direction), but this entry bumps the registry dependency to react-resizable-panels@^4.7.3 where the API/props changed. This will break the registry component at build/runtime; please migrate apps/apollo-vertex/registry/resizable/resizable.tsx to the v4 API (e.g. Group/Separator + orientation, and update numeric sizes to percentage strings where applicable) or keep the dependency pinned to v3 for this registry item.

      "name": "resizable",
      "type": "registry:ui",
      "title": "Resizable",
      "description": "Accessible resizable panel groups and layouts.",
      "dependencies": ["react-resizable-panels@^4.7.3"],
      "files": [
        {
          "path": "registry/resizable/resizable.tsx",
          "type": "registry:ui"

You can also share your feedback on Copilot code review. Take the survey.

Migrate resizable component wrapper and all usages to v4 API: - PanelGroup → Group, PanelResizeHandle → Separator, direction → orientation - Size props from numbers to percentage strings (v4 treats numbers as pixels) - Update data attributes for hover/active/vertical styling - Re-export PanelImperativeHandle type BREAKING CHANGE: consumers must update direction→orientation, numeric sizes→string percentages

Migrate registry resizable component and docs page to v4 API: - PanelGroup → Group, PanelResizeHandle → Separator, direction → orientation - Size props from numbers to percentage strings - Update data attributes for vertical styling - Bump dependency in package.json and registry.json

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

You can also share your feedback on Copilot code review. Take the survey.

Copilot AI review requested due to automatic review settings February 6, 2026 01:05

Copilot started reviewing on behalf of snuziale February 6, 2026 01:06 View session

Copilot AI reviewed Feb 6, 2026

View reviewed changes

CalinaCristian approved these changes Feb 6, 2026

View reviewed changes

CalinaCristian added dev-packages Adds dev package publishing on pushes to this PR and removed dev-packages Adds dev package publishing on pushes to this PR labels Feb 13, 2026

CalinaCristian force-pushed the fix/wind-update-dep branch from 5588fe5 to 8b36b06 Compare March 18, 2026 00:25

Copilot AI review requested due to automatic review settings March 18, 2026 00:29

CalinaCristian force-pushed the fix/wind-update-dep branch from 8b36b06 to 3f199c3 Compare March 18, 2026 00:29

CalinaCristian requested review from 0xr3ngar, alincadariu, angeloaltamiranom, frankkluijtmans and ruudandriessen as code owners March 18, 2026 00:29

KokoMilev enabled auto-merge (rebase) March 18, 2026 00:30

Copilot started reviewing on behalf of CalinaCristian March 18, 2026 00:30 View session

CalinaCristian force-pushed the fix/wind-update-dep branch from 3f199c3 to b3b6dab Compare March 18, 2026 00:31

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Comment thread packages/apollo-wind/package.json

Comment thread packages/apollo-wind/src/components/ui/resizable.test.tsx Outdated

CalinaCristian force-pushed the fix/wind-update-dep branch from b3b6dab to 8915fa2 Compare March 18, 2026 00:34

Copilot AI review requested due to automatic review settings March 18, 2026 00:37

CalinaCristian force-pushed the fix/wind-update-dep branch from 8915fa2 to c34fb00 Compare March 18, 2026 00:37

Copilot started reviewing on behalf of CalinaCristian March 18, 2026 00:38 View session

CalinaCristian added 2 commits March 17, 2026 17:38

CalinaCristian force-pushed the fix/wind-update-dep branch from c34fb00 to 5424652 Compare March 18, 2026 00:39

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/resizable.tsx

KokoMilev merged commit b604466 into main Mar 18, 2026
37 of 41 checks passed

KokoMilev deleted the fix/wind-update-dep branch March 18, 2026 00:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance#174

fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance#174
KokoMilev merged 2 commits intomainfrom
fix/wind-update-dep

snuziale commented Feb 6, 2026 •

edited by CalinaCristian

Loading

Uh oh!

github-actions Bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 6, 2026

Uh oh!

CalinaCristian left a comment

Uh oh!

CalinaCristian commented Feb 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<Group className={cn('flex h-full w-full', className)} {...props} />
	<Group className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)} {...props} />

Conversation

snuziale commented Feb 6, 2026 • edited by CalinaCristian Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking changes

Test plan

Uh oh!

github-actions Bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

CalinaCristian left a comment

Choose a reason for hiding this comment

Uh oh!

CalinaCristian commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Stack

Uh oh!

github-actions Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency Review

License Issues

apps/apollo-vertex/package.json

packages/apollo-wind/package.json

OpenSSF Scorecard

Scanned Files

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snuziale commented Feb 6, 2026 •

edited by CalinaCristian

Loading

github-actions Bot commented Feb 6, 2026 •

edited

Loading

CalinaCristian commented Feb 9, 2026 •

edited

Loading

github-actions Bot commented Mar 18, 2026 •

edited

Loading