Update dependency react-resizable-panels to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence	Diffend
react-resizable-panels (source)	^3.0.3 -> ^3.0.3 || ^4.0.0					Diff
react-resizable-panels (source)	^3.0.6 -> ^4.0.15					Diff

---

Release Notes

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

v4.0.15

Compare Source

• 556: Ignore defaultLayout when keys don't match Panel ids

v4.0.14

Compare Source

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

v4.0.13

Compare Source

• useDefaultLayout: Deprecated 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

• 552: useDefaultLayout now debounces calls to storage.setItem by 150ms

// 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

• 8604491: Fix edge case bug with panel constraints not being properly invalidated after resize

v4.0.10

Compare Source

• #​551: Expand fixed-size element support

v4.0.9

Compare Source

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

v4.0.8

Compare Source

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

v4.0.7

Compare Source

• f07bf00: Reset pointer-event styles after "pointerup" event

v4.0.6

Compare Source

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

v4.0.5

Compare Source

• #​535: Updated docs to make size and layout formats clearer

v4.0.4

Compare Source

• #​534: Set focus on Separator on "pointerdown"
• e08fe42: Improve iOS/Safari resize UX

v4.0.3

Compare Source

• Fixed TS type for defaultLayout value returned from useDefaultLayout

v4.0.2

Compare Source

• Export GroupImperativeHandle and PanelImperativeHandle types.

v4.0.1

Compare Source

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

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={(size) => {
  // Either this
  const isCollapsed = size === collapsedSize;

  // Or this:
  panelRef.isCollapsed();
}}

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 />

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

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

---

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

---

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

[github-actions]

GitLab Pipeline Action

General information

Link to pipeline: https://gitlab.com/code0-tech/development/pictor/-/pipelines/2228680439

Status: Failed
Duration: 2 minutes