react-resizable-panels

• New Grid, Cell, and Gridline components for resizable two-dimensional layouts:
  • Columns and rows support the same size constraints as Panels (e.g. min/max size, collapsible)
  • Cells can span multiple columns and/or rows
  • Dragging where column and row boundaries intersect resizes both axes
  • Gridlines (optional, like Separators) can span a subset of tracks to avoid spanning cells
• New useDefaultGridLayout, useGridRef, and useGridCallbackRef hooks

• 755: Bugfix: Separator behind a modal <dialog> can no longer be dragged

• 751: Separator no longer retains focus after a drag
• 753: Fix Panel order in environments like JSDom with invalid offset values

• 750: Bug fixes:
  • Match layout values to panel IDs so reordered keys map to the correct constraints
  • Preserve keyboard mappings for disabled separators; fixes edge case “Matching panels not found” error
  • Respect default layout when an initially hidden group becomes visible
  • Calculate available group size once per hit-testing pass instead of once per hit region
  • Ensure onLayoutChanged still fires when pressing elsewhere on the page or resizing another group

• 746: Customizable resize preview mode
• 749: Panels support configurable collapse threshold

• 743: Don't capture pointer for a detached Separator
• 741: Separator ARIA values use proper panel indices

• 730: Guard CSSStyleSheet construction to avoid throwing in unsupported environments (@leo-yang-qiong)
• 736: Bugfix: Derived Panel constraints equality check
• 732: Bugfix: Prevent orphaned groups in "pointerup" edge case (@waterWang)

• 726: Updated inline documentation to clarify size units.

• 723: Bug fix for context menu event (right click) occurring while pointer-resize is active

• 716): Meta info available to onLayoutChanged callback signalling whether resize event was triggered by direct user input (keyboard or mouse)
• useDefaultLayout hook supports onlySaveAfterUserInteractions option to only save layouts when directly triggered by user interactions.

• 719): Bug fix: Calculate rem-based sizes relative to owner document (not body)

• 715): Edge case SSR bug fix for panels with defaultSize={0}

• 712: Separator supports :focus-visible pseudo-class
• 703: Fix: edge case scenarios when collapsing the last panel
• 711: Improve legacy browser support wrt global stylesheets

• 705: Add data-separator="focus" state for Separator elements for more consistent custom CSS styles.

• 702: Add disableDoubleClick prop to Separator to enable turning off the double-click size reset behavior.

• 699: useDefaultLayout hook automatically migrates legacy layouts to version 4 format; see issue 605 or PR 699 for details on how this works.

• 698: Replace Panel aria-disabled attribute with data-disabled

• 696: Improved server rendering support for defaultSize prop

• 689: Fix edge case bug with pointer event capture

• 690: Imperative Panel API supports non-percentage sizes

• 683: Don't scroll separator when setting focus

• 678: Change default overflow styles to support shadows

• 677: Add groupResizeBehavior prop to Panel, enabling panels to retain their current size (pixels) size when the parent Group is resized.

• 670: Check for undefined adoptedStyleSheets (to better support environments like jsdom)
• 671: Bug-fix: Update in-memory layout cache when group is resized by double-clicking on a separator

• 664, 665: Resize actions sometimes "jump" on touch devices

• Fixed a problem with project logo not displaying correctly in the README for the Firefox browser.

• 660: Group guards against layouts with mis-ordered Panel id keys

• 658: Imperative Panel and Group APIs ignored disabled status when resizing panels; this is an explicit override of the disabled state and is required to support conditionally disabled groups.
• 658: Separator component does not set a cursor: not-allowed style if the parent Group has cursors disabled.

• 657: Allow Panel and Separator components to be disabled

• 649: Optimization: Replace useForceUpdate with useSyncExternalStore to avoid side effect of swallowing "click" events in certain cases
• 654: Bugfix Imperative Group method setLayout persists layout to in-memory cache
• 652: Re-enable collapsible panel bugfix after fixing another reported issue

• 651: Disabled the change to collapsible panel behavior that was originally made in 635 due to another reported regression

• 646: Re-enable the collapsible Panel from 4.5.3 that was disabled in 4.5.6
• 648: Bugfix: Reset Separator hover-state on Document "pointerout"

• 644: Disabled the change to collapsible panel behavior that was originally made in 635.

• 641: Removed aria-orientation role from root Group element as this was invalid according to the ARIA spec; (for more information see the discussion on issue #640)
• 642: Bugfix: Fix collapsible Panel regression introduced in 4.5.3

• 638: Panel avoids unnecessary re-renders in response to mouse-hover state.

• 635: Expand pre-collapsed panels if drug past the halfway point for more consistent collapse/expand behavior.
• 631: Bugfix: Panels set max-width and max-height to 100% to fix potential CSS overflow bug.

• 626: Decrease default hit target size for Separator and Panel edges; make configurable via a new Group prop.

• 624: Bugfix: Fallback to alternate CSS cursor styles for Safari

• 616: Replace Separator and Panel edge hit-area padding with a minimum size threshold based on Apple's user interface guidelines. Separators that are large enough will no longer be padded; separators that are too small (or panels without separators) will more or less function like before. This should not have much of a user-facing impact other than an increase in the click target area. (Previously I was not padding enough, as per Apple's guidelines.)
• 615, 620: Double-clicking on a Separator resets its associated Panel to its default-size (see video below); double-click will have no impact on panels without default sizes
• 622: Bugfix: Panels within vertical groups are now properly sized in Safari
• 618: Bugfix: Don't override adoptedStyleSheets

Demo of double-clicking on a separator:

https://github.com/user-attachments/assets/f19f6c5e-d290-455e-9bad-20e5038c3508

• 610: Fix calculated cursor style when "pointermove" event is has low-precision/rounded clientX and clientY values

• 600: Bugfix: Collapsible Panel should treat defaultSize={0} as collapsed on mount

• 599: Add new onLayoutChanged prop to Group.

For layout changes caused by pointer events, this method is not called until the pointer has been released. This callback should be used if you're doing something like saving a layout as it is called less frequently than the previous approach.

The useDefaultLayout hook has also been updated to use this callback (though it will continue to support the old callback as well, with a @deprecation tag).

• 595: Don't call event.preventDefault() on "pointerup" unless a handle was actively dragged

[!NOTE] This change also fixes a text selection bug that impacted Windows users (#574)

• Moved flex-grow Panel style to an inline value instead of a CSS variable defined on the parent Group to improve rendering performance. (This significantly reduces the negative impact from forced-reflow)

• 588: Replace "unset" styles with safer override values
• 589: Use capture phase for "pointerdown" and "pointerup" events; this is necessary for compatibility with certain UI libraries like Blueprint JS
• 590: Read Panel pixel size using offsetWidth/offsetHeight rather than inlineSize to avoid an edgecase bug with ResizeObserver

• 583: Group component now sets default width, height, and overflow styles; (both can be overridden using the style property)
• 582: Drag interactions only call event.preventDefault for the primary button
• Refine TS types for useGroupRef and usePanelRef to include | null to increase compatibility with older React versions
• Update TSDoc comments for Panel and Separator components

• useDefaultLayout hook initializes storage param to localStorage if undefined.
• Fix ambiguous type for Panel prop onResize that impacted certain TypeScript versions.