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.3.1					Diff

---

Release Notes

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

v4.3.1

Compare Source

• 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

v4.3.0

Compare Source

• 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

v4.2.2

Compare Source

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

v4.2.1

Compare Source

• 2a6b03f: Add displayName property to Group, Panel, and Separator components for better debugging experience.
• 577: Group handles newly registered Panels + Separators during mount so that user code can safely call imperative APIs earlier

v4.2.0

Compare Source

• 573: Add prevPanelSize param to onResize callback to help simplify collapse/expand detection.

v4.1.1

Compare Source

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

v4.1.0

Compare Source

• 567: useDefaultLayout hook supports saving and restoring multiple Panel layouts
• 568: Fix race in useGroupRef and usePanelRef hooks

v4.0.16

Compare Source

• 563: Panel expand() API should restore pre-collapse size
• 564: Add guard for unexpected defaultView value seemingly returned by some dev environments

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 becomes conflicted, 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/2252341609

Status: Passed
Duration: 5 minutes

Job summaries

storybook:build

Storybook available at https://code0-tech.gitlab.io/-/development/pictor/-/jobs/12651395713/artifacts/storybook-static/index.html