Update dependency react-resizable-panels to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
react-resizable-panels (source)	3.0.6 → 4.14.5

---

Release Notes

bvaughn/react-resizable-panels (react-resizable-panels)

v4.14.5

Compare Source

• Group, Panel, Separator, Grid, and Cell only render an explicit id (or data-testid) as data-testid - #​766
• Empty string id prop is now treated the same as an undefined value and falls back to useId - #​766
• Panel with an id of 0 is now properly treated as an explicit id value - #​766

v4.14.4

Compare Source

• Fix pointer events in one document affecting groups mounted in another (e.g. a popup window). The resize cursor is now only shown in the document that contains the active group. - #​762
• Fix an error thrown by an onLayoutChange, onLayoutChanged, or onResize callback leaving a drag stuck in the active state or preventing other groups from being updated. The error is now re-thrown once all groups have been updated. - #​763

v4.14.3

Compare Source

• Fix drags interrupted by "pointercancel", "lostpointercapture", or the window losing focus (e.g. Alt/Cmd+Tab) staying active until the next pointer event. The drag now ends and commits the current layout. - #​761

v4.14.2

Compare Source

• Fix constraints derived from stale panel and separator order by re-sorting them first. - #​759

v4.14.1

Compare Source

• Fix constraints applied because of a Group size change (e.g. a pixel-based minSize when the window is small) permanently altering the layout. The requested layout is now restored once the constraint no longer applies. - #​720
  • Add a requestedLayout attribute to the onLayoutChanged meta. useDefaultLayout and useDefaultGridLayout persist this value instead of the constrained layout.

v4.14.0

Compare Source

• Add 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.
• Add useDefaultGridLayout, useGridRef, and useGridCallbackRef hooks.

v4.13.3

Compare Source

• Fix a Separator behind a modal <dialog> being draggable. - #​755

v4.13.2

Compare Source

• Fix Separator retaining focus after a drag. - #​751
• Fix Panel order in environments like jsdom with invalid offset values. - #​753

v4.13.1

Compare Source

• Bug fixes: - #​750
  • Fix reordered layout keys mapping to the wrong constraints by matching layout values to panel IDs.
  • Fix an edge case "Matching panels not found" error by preserving keyboard mappings for disabled separators.
  • Fix the default layout being ignored when an initially hidden group becomes visible.
  • Calculate the available group size once per hit-testing pass instead of once per hit region.
  • Fix onLayoutChanged not firing when pressing elsewhere on the page or resizing another group.

v4.13.0

Compare Source

• Add a customizable resize preview mode. - #​746
• Add a configurable collapse threshold to Panel. - #​749

v4.12.4

Compare Source

• Fix capturing the pointer for a detached Separator. - #​743
• Fix Separator ARIA values to use the correct panel indices. - #​741

v4.12.3

Compare Source

• Guard CSSStyleSheet construction to avoid throwing in unsupported environments. - (leo-yang-qiong - #​730)
• Fix the equality check for derived Panel constraints. - #​736
• Fix orphaned groups in a "pointerup" edge case. - (waterWang - #​732)

v4.12.2

Compare Source

• Update inline documentation to clarify size units. - #​726

v4.12.1

Compare Source

• Fix a context menu event (right click) occurring while a pointer resize is active. - #​723

v4.12.0

Compare Source

• Pass meta info to the onLayoutChanged callback indicating whether the resize was triggered by direct user input (keyboard or mouse). - #​716
• Add an onlySaveAfterUserInteractions option to the useDefaultLayout hook to only save layouts when directly triggered by user interactions.

v4.11.2

Compare Source

• Fix rem-based sizes to be calculated relative to the owner document (not body). - #​719

v4.11.1

Compare Source

• Fix an edge case SSR bug for panels with defaultSize={0}. - #​715

v4.11.0

Compare Source

• Support the :focus-visible pseudo-class for Separator. - #​712
• Fix edge cases when collapsing the last panel. - #​703
• Improve legacy browser support for global stylesheets. - #​711

v4.10.0

Compare Source

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

v4.9.0

Compare Source

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

v4.8.0

Compare Source

• Automatically migrate legacy layouts in the useDefaultLayout hook to the version 4 format. See issue #​605 for details on how this works. - #​699

v4.7.6

Compare Source

• Replace Panel aria-disabled attribute with data-disabled. - #​698

v4.7.5

Compare Source

• Improve server rendering support for the defaultSize prop. - #​696

v4.7.4

Compare Source

• Fix an edge case bug with pointer event capture. - #​689

v4.7.3

Compare Source

• Support non-percentage sizes in the imperative Panel API. - #​690

v4.7.2

Compare Source

• Don't scroll the separator when setting focus. - #​683

v4.7.1

Compare Source

• Change default overflow styles to support shadows. - #​678

v4.7.0

Compare Source

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

v4.6.5

Compare Source

• Check for undefined adoptedStyleSheets (to better support environments like jsdom). - #​670
• Fix the in-memory layout cache not being updated when a group is resized by double-clicking on a separator. - #​671

v4.6.4

Compare Source

• Fix resize actions sometimes "jumping" on touch devices. - #​664, #​665

v4.6.3

Compare Source

• Fix the project logo not displaying in the README in Firefox.

v4.6.2

Compare Source

• Guard Group against layouts with mis-ordered Panel id keys. - #​660

v4.6.1

Compare Source

• Imperative Panel and Group APIs ignore disabled status when resizing panels. This is an explicit override of the disabled state and is required to support conditionally disabled groups. - #​658
• Don't set a cursor: not-allowed style on Separator if the parent Group has cursors disabled. - #​658

v4.6.0

Compare Source

• Allow Panel and Separator components to be disabled. - #​657

v4.5.9

Compare Source

• Replace useForceUpdate with useSyncExternalStore to avoid swallowing "click" events in certain cases. - #​649
• Fix imperative Group method setLayout not persisting the layout to the in-memory cache. - #​654
• Re-enable the collapsible panel fix after fixing another reported issue. - #​652

v4.5.8

Compare Source

• Disable the change to collapsible panel behavior that was originally made in #​635 due to another reported regression. - #​651

v4.5.7

Compare Source

• Re-enable the collapsible Panel change from 4.5.3 that was disabled in 4.5.6. - #​646
• Fix Separator hover state not being reset on Document "pointerout". - #​648

v4.5.6

Compare Source

• Disable the change to collapsible panel behavior that was originally made in #​635. - #​644

v4.5.5

Compare Source

• Remove the aria-orientation attribute from the root Group element, as this was invalid according to the ARIA spec. For more information see the discussion on issue #​640. - #​641
• Fix a collapsible Panel regression introduced in 4.5.3. - #​642

v4.5.4

Compare Source

• Avoid unnecessary Panel re-renders in response to mouse-hover state. - #​638

v4.5.3

Compare Source

• Expand pre-collapsed panels if dragged past the halfway point for more consistent collapse/expand behavior. - #​635
• Fix a potential CSS overflow bug by setting Panel max-width and max-height to 100%. - #​631

v4.5.2

Compare Source

• Decrease the default hit target size for Separator and Panel edges, and make it configurable via a new Group prop. - #​626

v4.5.1

Compare Source

• Fix cursors in Safari by falling back to alternate CSS cursor styles: - #​624

Safari	Chrome, Firefox
grab	move
col-resize	ew-resize
row-resize	ns-resize

v4.5.0

Compare Source

• 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.) - #​616
• Reset a Panel to its default size when its associated Separator is double-clicked (see video below). Double-clicking has no effect on panels without default sizes. - #​615, #​620
• Fix sizing of panels within vertical groups in Safari. - #​622
• Fix adoptedStyleSheets being overridden. - #​618

Demo of double-clicking on a separator:

dbl-click.mov

v4.4.2

Compare Source

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

v4.4.1

Compare Source

• Fix collapsible Panel not treating defaultSize={0} as collapsed on mount. - #​600

v4.4.0

Compare Source

• Add onLayoutChanged prop to Group. - #​599

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 @deprecated tag).

v4.3.3

Compare Source

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

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

v4.3.2

Compare Source

• Move the 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.

v4.3.1

Compare Source

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

v4.3.0

Compare Source

• Set default width, height, and overflow styles on Group (these can be overridden using the style prop). - #​583
• Only call event.preventDefault for drag interactions with the primary button. - #​582
• 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.

v4.2.2

Compare Source

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

v4.2.1

Compare Source

• Add displayName property to Group, Panel, and Separator components for better debugging experience. - 2a6b03f
• Handle newly registered Panel and Separator components during Group mount so that user code can safely call imperative APIs earlier. - #​577

v4.2.0

Compare Source

• Add prevPanelSize param to onResize callback to help simplify collapse/expand detection. - #​573

v4.1.1

Compare Source

• Update TS types to better reflect that Separator attributes role and tabIndex cannot be overridden using props. - #​571

v4.1.0

Compare Source

• Support saving and restoring multiple Panel layouts in the useDefaultLayout hook. - #​567
• Fix race in useGroupRef and usePanelRef hooks. - #​568

v4.0.16

Compare Source

• Fix Panel expand() API not restoring the pre-collapse size. - #​563
• Add guard for unexpected defaultView value seemingly returned by some dev environments. - #​564

v4.0.15

Compare Source

• Ignore defaultLayout when keys don't match Panel ids. - #​556

v4.0.14

Compare Source

• Allow resizable panels to be rendered into a different Window (e.g. popup or frame) by accessing globals through element.ownerDocument.defaultView. - #​555

v4.0.13

Compare Source

• Deprecate the useDefaultLayout groupId param in favor of id to avoid confusion (there is no actual requirement for the Group to have a matching id).

v4.0.12

Compare Source

• Debounce useDefaultLayout calls to storage.setItem by 150ms. - #​552

// To opt out of this change
useDefaultLayout({
  debounceSaveMs: 0,
  groupId: "test-group-id",
  storage: localStorage,
})

[!NOTE]
Some may consider this a breaking change, considering the default value is 150ms rather than 0ms. I think in practice this should only impact unit tests which can be easily fixed by overriding the default (as shown above) or by using fake timers.

Changes like this are often judgement calls, but I think on balance it's better to correct my initial oversight of not debouncing this by default.

v4.0.11

Compare Source

• Fix an edge case bug with panel constraints not being properly invalidated after resize. - 8604491

v4.0.10

Compare Source

• Expand fixed-size element support. - #​551

v4.0.9

Compare Source

• Fix clicks on higher z-index elements (e.g. modals) triggering separators behind them. - #​542
• Don't re-mount Group when defaultLayout or disableCursor props change. - #​547
• Gracefully handle Panel id changes. - #​548
• Improve DevX when Group is within a hidden DOM subtree; defer layout-change events. - #​549

v4.0.8

Compare Source

• Don't set invalid layouts when Group is hidden or has a width/height of 0. - #​541
• Gracefully handle invalid defaultLayout value. - 40d4356

v4.0.7

Compare Source

• Reset pointer-events styles after "pointerup" event. - f07bf00

v4.0.6

Compare Source

• Account for Flex gap when calculating pointer-move delta %. - 0796644

v4.0.5

Compare Source

• Update docs to make size and layout formats clearer. - #​535

v4.0.4

Compare Source

• Focus Separator on "pointerdown". - #​534
• Improve iOS/Safari resize UX. - e08fe42

v4.0.3

Compare Source

• Fix TS type for defaultLayout value returned from useDefaultLayout.

v4.0.2

Compare Source

• Export GroupImperativeHandle and PanelImperativeHandle types.

v4.0.1

Compare Source

• Fix Panel expand() API not restoring the pre-collapse size. - #​563
• Add guard for unexpected defaultView value seemingly returned by some dev environments. - #​564

v4.0.0

Compare Source

Version 4 of react-resizable-panels offers more flexible size constraints, supporting units as pixels, percentages, REMs/EMs, and more. Support for server-rendering (including Server Components) has also been expanded.

Migrating from version 3 to 4

Refer to the docs for a complete list of props and API methods. Below are some examples of migrating from version 3 to 4, but first a couple of potential questions:

Q: Why'd you rename <component> or <prop>?

A: The most likely reason is that I think the new name more closely aligns with web standards like WAI-ARIA and CSS. For example, the PanelResizeHandle component was renamed to Separator to better align with the ARIA "separator" role and the direction prop was renamed to orientation to better align with the ARIA orientation attribute .

Q: Why'd you remove support for <feature>?

A: Probably because it wasn't used widely enough to justify the complexity required to maintain it. If it turns out that I'm mistaken, features can always be (re)added but it's more difficult to remove them.

Q: Were the onCollapse and onExpand event handlers removed?

A: Yes. Use the onResize event handler instead:

onResize={(nextSize, id, prevSize) => {
  if (prevSize !== undefined) {
    const wasCollapsed = prevSize.asPercentage !== 0;
    const isCollapsed = nextSize.asPercentage === 0;
    if (isCollapsed !== wasCollapsed) {
      // Panel was collapsed or expanded
    }
  }
}}

Basic usage example

// Version 3

import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";

<PanelGroup direction="horizontal">
  <Panel defaultSize={30} minSize={20}>left</Panel>
  <PanelResizeHandle />
  <Panel defaultSize={30} minSize={20}>right</Panel>
</PanelGroup>

// Version 4

import { Group, Panel, Separator } from "react-resizable-panels";

<Group orientation="horizontal">
  <Panel defaultSize="30%" minSize="20%">left</Panel>
  <Separator />
  <Panel defaultSize="30%" minSize="20%">right</Panel>
</Group>

Persistent layouts using localStorage

// Version 3

import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";

<PanelGroup autoSaveId="unique-group-id" direction="horizontal">
  <Panel>left</Panel>
  <PanelResizeHandle />
  <Panel>right</Panel>
</PanelGroup>

// Version 4

import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";

const { defaultLayout, onLayoutChange } = useDefaultLayout({
  groupId: "unique-group-id",
  storage: localStorage
});

<Group defaultLayout={defaultLayout} onLayoutChange={onLayoutChange}>
  <Panel>left</Panel>
  <Separator />
  <Panel>right</Panel>
</Group>

[!NOTE]
Refer to the docs for examples of persistent layouts with server rendering and server components.

Conditional panels

// Version 3

import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";

<PanelGroup autoSaveId="unique-group-id" direction="horizontal">
   {showLeftPanel && (
     <>
       <Panel id="left" order={1}>left</Panel>
       <PanelResizeHandle />
     </>
   )}
   <Panel id="center" order={2}>center</Panel>
   {showRightPanel && (
     <>
       <PanelResizeHandle />
       <Panel id="right" order={3}>right</Panel>
     </>
   )}
</PanelGroup>

// Version 4

import { Group, Panel, Separator } from "react-resizable-panels";

<Group>
  {showLeftPanel && (
    <>
      <Panel id="left">left</Panel>
      <Separator />
    </>
  )}
  <Panel id="center">center</Panel>
  {showRightPanel && (
    <>
      <Separator />
      <Panel id="right">right</Panel>
    </>
  )}
</Group>

Imperative APIs

// Version 3

import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
import type { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";

const panelRef = useRef<ImperativePanelHandle>(null);
const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);

<PanelGroup direction="horizontal" ref={panelGroupRef}>
  <Panel ref={panelRef}>left</Panel>
  <PanelResizeHandle />
  <Panel>right</Panel>
</PanelGroup>

// Version 4

import { Group, Panel, Separator, useGroupRef, usePanelRef } from "react-resizable-panels";

const groupRef = useGroupRef();
const panelRef = usePanelRef();

<Group groupRef={groupRef} orientation="horizontal">
  <Panel panelRef={panelRef}>left</Panel>
  <Separator />
  <Panel>right</Panel>
</Group>

Disabling custom cursors

// Version 3

import { disableGlobalCursorStyles } from "react-resizable-panels";

disableGlobalCursorStyles();

// Version 4

import { Group, Panel, Separator } from "react-resizable-panels";

<Group disableCursor />

3.0.6

• Fix a Firefox bug that caused resizing to be interrupted unexpectedly. - #​517

3.0.5

• Fix a size precision regression from 2.0.17. - #​512

3.0.4

• Support custom cursors. - #​503

3.0.3

• Fix compatibility with Cloudflare Workers. - #​492

3.0.2

• Add a fallback for the HTMLElement type to better support portal edge cases.

3.0.1

• Improve support for Cloudflare Workers and Vercel Functions. - #​479
• Fix package.json#types reference. - #​480

---

Configuration

📅 Schedule: (UTC)

• Branch creation
  • Between 12:00 AM and 03:59 AM, only on Monday (* 0-3 * * 1)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.42%. Comparing base (07be574) to head (dd4f8e6).

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #9469       +/-   ##
===========================================
+ Coverage   69.15%   83.42%   +14.26%     
===========================================
  Files         637      638        +1     
  Lines       38505    38537       +32     
  Branches     3466     3407       -59     
===========================================
+ Hits        26630    32150     +5520     
+ Misses      11481     6236     -5245     
+ Partials      394      151      -243     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[netlify]

✅ Deploy Preview for treeherder ready!

Name	Link
🔨 Latest commit	98bff24
🔍 Latest deploy log	https://app.netlify.com/projects/treeherder/deploys/6ad79cbda9b06ab930d63f38
😎 Deploy Preview	https://deploy-preview-9469--treeherder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.