react-resizable-panels 0.0.29 → 0.0.31

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.0.31
+* [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
+* [#67](https://github.com/bvaughn/react-resizable-panels/issues/67), [#72](https://github.com/bvaughn/react-resizable-panels/issues/72): Removed nullish coalescing operator (`??`) because it caused problems with default create-react-app configuration.
+* Fix edge case when expanding a panel via imperative API that was collapsed by user drag
+
+## 0.0.30
+* [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
+* Added `onLayout` prop to `PanelGroup` to be called when group layout changes. Note that some form of debouncing is recommended before processing these values (e.g. saving to a database).
+
 ## 0.0.29
 * [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
 * [#64](https://github.com/bvaughn/react-resizable-panels/pull/64): Disable `pointer-events` inside of `Panel`s during resize. This avoid edge cases like nested iframes.

package/README.md

@@ -26,42 +26,44 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | :----------- | :-------------------------- | :---
 | `autoSaveId` | `?string`                   | Unique id used to auto-save group arrangement via `localStorage`
 | `children`   | `ReactNode`                 | Arbitrary React element(s)
-| `className`  | `?string`                   | Optional class name to attach to root element
+| `className`  | `?string`                   | Class name to attach to root element
 | `direction`  | `"horizontal" \| "vertical"` | Group orientation
-| `id`         | `?string`                   | Optional group id; falls back to `useId` when not provided
-| `style`      | `?CSSProperties`            | Optional CSS style to attach to root element
-| `tagName`    | `?string = "div"`           | Optional HTML element tag name for root element
+| `id`         | `?string`                   | Group id; falls back to `useId` when not provided
+| `onLayout`  | `?(sizes: number[]) => void` | Called when group layout changes
+| `style`      | `?CSSProperties`            | CSS style to attach to root element
+| `tagName`    | `?string = "div"`           | HTML element tag name for root element
 
 ### `Panel`
 | prop          | type                            | description
 | :------------ | :------------------------------ | :---
 | `children`    | `ReactNode`                     | Arbitrary React element(s)
-| `className`   | `?string`                       | Optional class name to attach to root element
+| `className`   | `?string`                       | Class name to attach to root element
 | `collapsible` | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`
 | `defaultSize` | `?number`                       | Initial size of panel (numeric value between 1-100)
-| `id`          | `?string`                       | Optional panel id (unique within group); falls back to `useId` when not provided
+| `id`          | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided
 | `maxSize`     | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
 | `minSize`     | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
-| `onCollapse`  | `?(collapsed: boolean) => void` | Optional function to be called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
-| `onResize`    | `?(size: number) => void`       | Optional function to be called when panel is resized; `size` parameter is a numeric value between 1-100
+| `onCollapse`  | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
+| `onResize`    | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100
 | `order`       | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels
-| `style`       | `?CSSProperties`                | Optional CSS style to attach to root element
-| `tagName`     | `?string = "div"`               | Optional HTML element tag name for root element
+| `style`       | `?CSSProperties`                | CSS style to attach to root element
+| `tagName`     | `?string = "div"`               | HTML element tag name for root element
 
 `Panel` components also expose an imperative API for manual resizing:
 | method                       | description
 | :--------------------------- | :---
-| `collapse`                   | If panel is `collapsible`, collapse it fully.
-| `expand`                     | If panel is currently _collapsed_, expand it to its most recent size.
+| `collapse()`                 | If panel is `collapsible`, collapse it fully.
+| `expand()`                   | If panel is currently _collapsed_, expand it to its most recent size.
+| `getCollapsed(): boolean`    | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `getSize(): number`          | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
 | `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
 
-
 ### `PanelResizeHandle`
 | prop          | type              | description
 | :------------ | :---------------- | :---
 | `children`    | `?ReactNode`      | Custom drag UI; can be any arbitrary React element(s)
-| `className`   | `?string`         | Optional class name to attach to root element
+| `className`   | `?string`         | Class name to attach to root element
 | `disabled`    | `?boolean`        | Disable drag handle
-| `id`          | `?string`         | Optional resize handle id (unique within group); falls back to `useId` when not provided
-| `style`       | `?CSSProperties`  | Optional CSS style to attach to root element
-| `tagName`     | `?string = "div"` | Optional HTML element tag name for root element
+| `id`          | `?string`         | Resize handle id (unique within group); falls back to `useId` when not provided
+| `style`       | `?CSSProperties`  | CSS style to attach to root element
+| `tagName`     | `?string = "div"` | HTML element tag name for root element

package/dist/react-resizable-panels.d.ts

@@ -1,5 +1,6 @@
 import { RefObject, CSSProperties, ElementType, ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
+type PanelGroupOnLayout = (sizes: number[]) => void;
 type PanelOnCollapse = (collapsed: boolean) => void;
 type PanelOnResize = (size: number) => void;
 type PanelData = {
@@ -32,6 +33,8 @@ export type PanelProps = {
 export type ImperativePanelHandle = {
     collapse: () => void;
     expand: () => void;
+    getCollapsed(): boolean;
+    getSize(): number;
     resize: (percentage: number) => void;
 };
 export const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<ImperativePanelHandle>>;
@@ -41,10 +44,11 @@ export type PanelGroupProps = {
     className?: string;
     direction: Direction;
     id?: string | null;
+    onLayout?: PanelGroupOnLayout;
     style?: CSSProperties;
     tagName?: ElementType;
 };
-export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
+export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, onLayout, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
     activeHandleId: string;
     collapsePanel: (id: string) => void;
     direction: "horizontal" | "vertical";

package/dist/react-resizable-panels.d.ts.map

@@ -1 +1 @@
-{"mappings":";AEEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAEnD,iBAAwB;IACtB,YAAY,EAAE,UAAU;QACtB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;QACnC,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;KAChC,CAAC,CAAC;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,mBAA0B,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;AEFlE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AA0HF,OAAO,MAAM,mHAGZ,CAAC;AOxHF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,2BAA2B,EACzB,UAAU,EACV,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,SAAS,EACT,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,eAAe;;;;;;;;;;;;;IA2bjB;ACneD,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FA+GxB","sources":["packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":"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","sources":["packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js

@@ -37,16 +37,6 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel  } = context;
-    (0, $b2QPe$react.useImperativeHandle)(forwardedRef, ()=>({
-            collapse: ()=>collapsePanel(panelId),
-            expand: ()=>expandPanel(panelId),
-            resize: (percentage)=>resizePanel(panelId, percentage)
-        }), [
-        collapsePanel,
-        expandPanel,
-        panelId,
-        resizePanel
-    ]);
     // Use a ref to guard against users passing inline props
     const callbacksRef = (0, $b2QPe$react.useRef)({
         onCollapse: onCollapse,
@@ -91,6 +81,28 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
         unregisterPanel
     ]);
     const style = getPanelStyle(panelId);
+    const committedValuesRef = (0, $b2QPe$react.useRef)({
+        size: $4b51bd7b90b9da8b$var$parseSizeFromStyle(style)
+    });
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
+        committedValuesRef.current.size = $4b51bd7b90b9da8b$var$parseSizeFromStyle(style);
+    });
+    (0, $b2QPe$react.useImperativeHandle)(forwardedRef, ()=>({
+            collapse: ()=>collapsePanel(panelId),
+            expand: ()=>expandPanel(panelId),
+            getCollapsed () {
+                return committedValuesRef.current.size === 0;
+            },
+            getSize () {
+                return committedValuesRef.current.size;
+            },
+            resize: (percentage)=>resizePanel(panelId, percentage)
+        }), [
+        collapsePanel,
+        expandPanel,
+        panelId,
+        resizePanel
+    ]);
     return (0, $b2QPe$react.createElement)(Type, {
         children: children,
         className: classNameFromProps,
@@ -114,6 +126,12 @@ const $4b51bd7b90b9da8b$export$2ddb90ad54e5f587 = (0, $b2QPe$react.forwardRef)((
 // See github.com/parcel-bundler/parcel/issues/8724
 $4b51bd7b90b9da8b$var$PanelWithForwardedRef.displayName = "Panel";
 $4b51bd7b90b9da8b$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
+// HACK
+function $4b51bd7b90b9da8b$var$parseSizeFromStyle(style) {
+    const { flexGrow: flexGrow  } = style;
+    if (typeof flexGrow === "string") return parseFloat(flexGrow);
+    else return flexGrow;
+}
 
 
 
@@ -142,7 +160,7 @@ function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panels) {
     const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId);
     if (state) {
         const key = $e045b0dd313f33c7$var$getSerializationKey(panels);
-        return state[key] ?? null;
+        return state[key] || null;
     }
     return null;
 }
@@ -162,7 +180,7 @@ const $3237bc4a138172cd$export$d6d3992f3becc879 = 10;
 
 
 
-function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes) {
+function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse) {
     if (delta === 0) return prevSizes;
     const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
     const nextSizes = prevSizes.concat();
@@ -182,7 +200,10 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
         const prevSize = prevSizes[index];
         const nextSize = $d520236daad9c5d5$var$safeResizePanel(panel, Math.abs(delta), prevSize);
         if (prevSize === nextSize) return prevSizes;
-        else delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+        else {
+            if (nextSize === 0 && prevSize > 0) panelSizeBeforeCollapse.set(pivotId, prevSize);
+            delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+        }
     }
     let pivotId1 = delta < 0 ? idBefore : idAfter;
     let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
@@ -191,6 +212,7 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
         const prevSize1 = prevSizes[index1];
         const nextSize1 = $d520236daad9c5d5$var$safeResizePanel(panel1, 0 - Math.abs(delta), prevSize1);
         if (prevSize1 !== nextSize1) {
+            if (nextSize1 === 0 && prevSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, prevSize1);
             deltaApplied += prevSize1 - nextSize1;
             nextSizes[index1] = nextSize1;
             if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) >= delta.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) break;
@@ -268,7 +290,7 @@ function $d520236daad9c5d5$export$2e27d3a347680388(id) {
 function $d520236daad9c5d5$export$96a40be80fb6c3c8(id) {
     const handles = $d520236daad9c5d5$export$8d0cd3c32ddc045e();
     const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
-    return index ?? null;
+    return index || null;
 }
 function $d520236daad9c5d5$export$8d0cd3c32ddc045e() {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
@@ -280,8 +302,8 @@ function $d520236daad9c5d5$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
     const handle = $d520236daad9c5d5$export$2e27d3a347680388(handleId);
     const handles = $d520236daad9c5d5$export$ae14931f0a0256a3(groupId);
     const index = handles.indexOf(handle);
-    const idBefore = panelsArray[index]?.id ?? null;
-    const idAfter = panelsArray[index + 1]?.id ?? null;
+    const idBefore = panelsArray[index]?.id || null;
+    const idAfter = panelsArray[index + 1]?.id || null;
     return [
         idBefore,
         idAfter
@@ -374,7 +396,7 @@ function $f5af57c8e042a4ad$export$c4dfce035d43d1e0(event) {
 
 
 
-function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes  }) {
+function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse  }) {
     (0, $b2QPe$react.useEffect)(()=>{
         const { direction: direction , panels: panels  } = committedValuesRef.current;
         const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
@@ -417,7 +439,7 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
                                     let delta = 0;
                                     if (size.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
-                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes);
+                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
                                 }
                             }
@@ -520,10 +542,31 @@ function $102aa6bc0f99b2b3$export$d395b5dfd066a659(state) {
 }
 
 
-function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $0f7a23424493ebd6$export$2e2bcd8739ae039(callback, durationMs = 10) {
+    let timeoutId = null;
+    let callable = (...args)=>{
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(()=>{
+            callback(...args);
+        }, durationMs);
+    };
+    return callable;
+}
+
+
+// Limit the frequency of localStorage updates.
+const $19bf0050f73d236b$var$savePanelGroupLayoutDebounced = (0, $0f7a23424493ebd6$export$2e2bcd8739ae039)((0, $e045b0dd313f33c7$export$af183b313c61be4f), 100);
+function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
+    // Use a ref to guard against users passing inline props
+    const callbacksRef = (0, $b2QPe$react.useRef)({
+        onLayout: onLayout
+    });
+    (0, $b2QPe$react.useEffect)(()=>{
+        callbacksRef.current.onLayout = onLayout;
+    });
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
     const dragOffsetRef = (0, $b2QPe$react.useRef)(0);
@@ -545,8 +588,19 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         groupId: groupId,
         panels: panels,
         setSizes: setSizes,
-        sizes: sizes
+        sizes: sizes,
+        panelSizeBeforeCollapse: panelSizeBeforeCollapse
     });
+    // Notify external code when sizes have changed.
+    (0, $b2QPe$react.useEffect)(()=>{
+        const { onLayout: onLayout  } = callbacksRef.current;
+        if (onLayout) {
+            const { sizes: sizes  } = committedValuesRef.current;
+            onLayout(sizes);
+        }
+    }, [
+        sizes
+    ]);
     // Once all panels have registered themselves,
     // Compute the initial sizes based on default weights.
     // This assumes that panels register during initial mount (no conditional rendering)!
@@ -592,7 +646,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
-            (0, $e045b0dd313f33c7$export$af183b313c61be4f)(autoSaveId, panelsArray, sizes);
+            $19bf0050f73d236b$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes);
         }
     }, [
         autoSaveId,
@@ -649,7 +703,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             const isHorizontal = direction === "horizontal";
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
-            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
             if (prevSizes === nextSizes) {
                 // If the pointer has moved too far to resize the panel any further,
                 // update the cursor style for a visual clue.
@@ -691,7 +745,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize : 0 - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -714,7 +768,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -734,7 +788,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);