- Fix P1: Separator aria-orientation is perpendicular to group orientation
in v4 (horizontal group → vertical separator). Flip CSS selectors from
aria-[orientation=vertical] to aria-[orientation=horizontal] for the
vertical-group case.
- Fix P1: Implement autoSaveId via useDefaultLayout hook. v4 removed
autoSaveId as a Group prop; it now requires useDefaultLayout({ id,
storage }) which returns defaultLayout + onLayoutChanged. Added a
separate component to handle the hook call.
- Fix P2: Add missing props (disabled) to ResizablePanelGroupProps and
ResizablePanelProps that were previously available via passthrough.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Upgrade react-resizable-panels from ^3.0.3 to ^4.1.0 (resolves to 4.7.6)
to fix a known race condition in useGroupRef/usePanelRef hooks that caused
intermittent "No group found for id" errors during SSR hydration with
React 19's useId().
Define owned prop types for ResizablePanelGroup, ResizablePanel, and
ResizableHandle instead of re-exporting the dependency's types. This
ensures future dependency upgrades don't leak breaking changes to
consumers.
Key changes:
- Own prop types for all three components (no dependency type leakage)
- Accept both `direction` and `orientation` on ResizablePanelGroup
- Adapt v4 onResize callback (PanelSize → number) for backwards compat
- Update CSS selectors: data-[panel-group-direction] → aria-[orientation]
- Update story file to use orientation prop
- Bump version to 4.2.0 (non-breaking for consumers)
Ref: https://github.com/bvaughn/react-resizable-panels/issues/204
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ButtonGroup container with horizontal/vertical orientation
- ButtonGroupItem with shared variant/size context from parent
- Position-aware border-radius for connected button styling
- Supports individual variant/size overrides per item
- Full test coverage with 14 passing tests
Co-authored-by: Terry Zhao <zhaotai5541@gmail.com>