Skip to content

chore(ui): upgrade react-resizable-panels to v4#501

Draft
ilyabo wants to merge 2 commits intomainfrom
codex/update-react-resizable-panels-package
Draft

chore(ui): upgrade react-resizable-panels to v4#501
ilyabo wants to merge 2 commits intomainfrom
codex/update-react-resizable-panels-package

Conversation

@ilyabo
Copy link
Copy Markdown
Collaborator

@ilyabo ilyabo commented Mar 27, 2026

Motivation

  • Bring @sqlrooms/ui up to the latest react-resizable-panels (v4) and align the wrapper with the v4 API and shadcn v4 guidance to avoid runtime/type errors and keep the public wrapper stable for consumers.
  • Preserve existing usage in the repo by mapping the old direction prop and numeric size semantics to the new v4 primitives and prop shapes.

Description

  • Bumped react-resizable-panels dependency in packages/ui/package.json from ^3.0.6 to ^4.7.6 and updated the lockfile.
  • Reworked packages/ui/src/components/resizable.tsx to use v4 primitives: Group, Panel, and Separator instead of the old PanelGroup / PanelResizeHandle names.
  • Added a small compatibility layer that maps legacy direction to v4 orientation and converts numeric size props (defaultSize, minSize, maxSize, collapsedSize) to percent strings so existing callsites continue to behave.
  • Replaced orientation styling hooks from the old data-[panel-group-direction=vertical] attribute to aria-orientation selectors to match v4 semantics.

Testing

  • Ran pnpm build before changes which surfaced v4 API/type errors in the UI wrapper (expected failure), and then ran pnpm build after the wrapper update which completed successfully.
  • Verified pnpm view react-resizable-panels version to confirm the target release (4.7.6).
  • Pre-commit hooks (lint and prettier formatting) ran automatically during the commit and passed.

Codex Task

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 27, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4910aa39-e96e-4bc9-8b73-e394bde75d97

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/update-react-resizable-panels-package

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant