react-resizable-panels 0.0.28 → 0.0.30

package/CHANGELOG.md

@@ -1,4 +1,14 @@
 # Changelog
+
+## 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.
+* [#57](https://github.com/bvaughn/react-resizable-panels/pull/57): Improve server rendering check to include `window.document`. This more closely matches React's own check and avoids false positives for environments that alias `window` to some global object.
+
 ## 0.0.28
 * [#53](https://github.com/bvaughn/react-resizable-panels/issues/53): Avoid `useLayoutEffect` warning when server rendering. Render panels with default style of `flex: 1 1 auto` during initial render.
 

package/README.md

@@ -26,34 +26,42 @@ 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.
+| `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 = {
@@ -15,7 +16,7 @@ type PanelData = {
     order: number | null;
 };
 type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
-type PanelProps = {
+export type PanelProps = {
     children?: ReactNode;
     className?: string;
     collapsible?: boolean;
@@ -29,28 +30,37 @@ type PanelProps = {
     style?: CSSProperties;
     tagName?: ElementType;
 };
-export function Panel({ children, className: classNameFromProps, collapsible, defaultSize, id: idFromProps, maxSize, minSize, onCollapse, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-type PanelGroupProps = {
+export type ImperativePanelHandle = {
+    collapse: () => void;
+    expand: () => void;
+    resize: (percentage: number) => void;
+};
+export const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<ImperativePanelHandle>>;
+export type PanelGroupProps = {
     autoSaveId?: string;
     children?: ReactNode;
     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";
+    expandPanel: (id: string) => void;
     getPanelStyle: (id: string) => CSSProperties;
     groupId: string;
     registerPanel: (id: string, panel: PanelData) => void;
     registerResizeHandle: (id: string) => import("types").ResizeHandler;
+    resizePanel: (id: string, percentage: number) => void;
     startDragging: (id: string, event: ResizeEvent) => void;
     stopDragging: () => void;
     unregisterPanel: (id: string) => void;
 }>>;
-type PanelResizeHandleProps = {
+export type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;

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;AELlE,kBAAyB;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,sBAA8B,EAC5B,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,WAAmB,EACnB,WAAkB,EAClB,EAAE,EAAE,WAAkB,EACtB,OAAa,EACb,OAAY,EACZ,UAAiB,EACjB,QAAe,EACf,KAAY,EACZ,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,UAAU,0FAqFZ;AOxFD,uBAA8B;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,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,SAAS,EACT,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,eAAe;;;;;;;;;;IAoTjB;AC1VD,8BAAqC;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,kCAA0C,EACxC,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\nexport { Panel, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":";AEEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,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;AEHlE,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;AQpHF,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,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,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,QAAe,EACf,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,eAAe;;;;;;;;;;;;;IA6cjB;AC3fD,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/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

@@ -4,12 +4,13 @@ function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "Panel", () => $4b51bd7b90b9da8b$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelGroup", () => $19bf0050f73d236b$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelResizeHandle", () => $01377e07790cf46f$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "Panel", () => $4b51bd7b90b9da8b$export$2ddb90ad54e5f587);
+$parcel$export(module.exports, "PanelGroup", () => $19bf0050f73d236b$export$1d05749f6f573bb);
+$parcel$export(module.exports, "PanelResizeHandle", () => $01377e07790cf46f$export$8829ecf6b6b15484);
 
 
-const $967abed3d1bd1fe9$var$useIsomorphicLayoutEffect = typeof window !== "undefined" ? (0, $b2QPe$react.useLayoutEffect) : (0, $b2QPe$react.useEffect);
+const $967abed3d1bd1fe9$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+const $967abed3d1bd1fe9$var$useIsomorphicLayoutEffect = $967abed3d1bd1fe9$var$canUseEffectHooks ? (0, $b2QPe$react.useLayoutEffect) : ()=>{};
 var $967abed3d1bd1fe9$export$2e2bcd8739ae039 = $967abed3d1bd1fe9$var$useIsomorphicLayoutEffect;
 
 
@@ -31,9 +32,21 @@ const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext
 $3251d17c1c3bce6c$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
 
 
-function $4b51bd7b90b9da8b$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , collapsible: collapsible = false , defaultSize: defaultSize = null , id: idFromProps = null , maxSize: maxSize = 100 , minSize: minSize = 10 , onCollapse: onCollapse = null , onResize: onResize = null , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null , className: classNameFromProps = "" , collapsible: collapsible = false , defaultSize: defaultSize = null , forwardedRef: forwardedRef , id: idFromProps = null , maxSize: maxSize = 100 , minSize: minSize = 10 , onCollapse: onCollapse = null , onResize: onResize = null , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     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,
@@ -53,8 +66,6 @@ function $4b51bd7b90b9da8b$export$2e2bcd8739ae039({ children: children = null ,
             defaultSize = minSize;
         }
     }
-    const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
-    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
     (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
         const panel = {
             callbacksRef: callbacksRef,
@@ -94,10 +105,15 @@ function $4b51bd7b90b9da8b$export$2e2bcd8739ae039({ children: children = null ,
         }
     });
 }
+const $4b51bd7b90b9da8b$export$2ddb90ad54e5f587 = (0, $b2QPe$react.forwardRef)((props, ref)=>(0, $b2QPe$react.createElement)($4b51bd7b90b9da8b$var$PanelWithForwardedRef, {
+        ...props,
+        forwardedRef: ref
+    }));
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$4b51bd7b90b9da8b$export$2e2bcd8739ae039.displayName = "Panel";
+$4b51bd7b90b9da8b$var$PanelWithForwardedRef.displayName = "Panel";
+$4b51bd7b90b9da8b$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
 
 
 
@@ -194,6 +210,38 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
     nextSizes[index1] = prevSizes[index1] + deltaApplied;
     return nextSizes;
 }
+function $d520236daad9c5d5$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
+    nextSizes.forEach((nextSize, index)=>{
+        const prevSize = prevSizes[index];
+        if (prevSize !== nextSize) {
+            const { callbacksRef: callbacksRef  } = panelsArray[index];
+            const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
+            if (onResize) onResize(nextSize);
+            if (onCollapse) {
+                if (prevSize === 0 && nextSize !== 0) onCollapse(false);
+                else if (prevSize !== 0 && nextSize === 0) onCollapse(true);
+            }
+        }
+    });
+}
+function $d520236daad9c5d5$export$5a5b0c1d38c23c3b(id, panelsArray) {
+    if (panelsArray.length < 2) return [
+        null,
+        null
+    ];
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    if (index < 0) return [
+        null,
+        null
+    ];
+    const isLastPanel = index === panelsArray.length - 1;
+    const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
+    const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+    return [
+        idBefore,
+        idAfter
+    ];
+}
 function $d520236daad9c5d5$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
@@ -472,13 +520,36 @@ function $102aa6bc0f99b2b3$export$d395b5dfd066a659(state) {
 }
 
 
-function $19bf0050f73d236b$export$2e2bcd8739ae039({ 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);
+    // Used to support imperative collapse/expand API.
+    const panelSizeBeforeCollapse = (0, $b2QPe$react.useRef)(new Map());
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
     const committedValuesRef = (0, $b2QPe$react.useRef)({
         direction: direction,
@@ -497,6 +568,16 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         setSizes: setSizes,
         sizes: sizes
     });
+    // 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)!
@@ -542,7 +623,7 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ 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,
@@ -567,9 +648,13 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             flexGrow: flexGrow,
             flexShrink: 1,
             // Without this, Panel sizes may be unintentionally overridden by their content.
-            overflow: "hidden"
+            overflow: "hidden",
+            // Disable pointer events inside of a panel during resize.
+            // This avoid edge cases like nested iframes.
+            pointerEvents: activeHandleId !== null ? "none" : undefined
         };
     }, [
+        activeHandleId,
         direction,
         sizes
     ]);
@@ -606,17 +691,7 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
                 // Reset the cursor style to the the normal resize cursor.
                 (0, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
                 // If resize change handlers have been declared, this is the time to call them.
-                nextSizes.forEach((nextSize, index)=>{
-                    const prevSize = prevSizes[index];
-                    if (prevSize !== nextSize) {
-                        const { onCollapse: onCollapse , onResize: onResize  } = panelsArray[index].callbacksRef.current;
-                        if (onResize) onResize(nextSize);
-                        if (onCollapse) {
-                            if (prevSize === 0 && nextSize !== 0) onCollapse(false);
-                            else if (prevSize !== 0 && nextSize === 0) onCollapse(true);
-                        }
-                    }
-                });
+                (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
                 setSizes(nextSizes);
             }
         };
@@ -632,13 +707,81 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
+    const collapsePanel = (0, $b2QPe$react.useCallback)((id)=>{
+        const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
+        const panel = panels.get(id);
+        if (panel == null || !panel.collapsible) return;
+        const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
+        const index = panelsArray.indexOf(panel);
+        if (index < 0) return;
+        const currentSize = prevSizes[index];
+        if (currentSize === 0) // Panel is already collapsed.
+        return;
+        panelSizeBeforeCollapse.current.set(id, currentSize);
+        const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$5a5b0c1d38c23c3b)(id, panelsArray);
+        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);
+        if (prevSizes !== nextSizes) {
+            // If resize change handlers have been declared, this is the time to call them.
+            (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
+    const expandPanel = (0, $b2QPe$react.useCallback)((id)=>{
+        const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
+        const panel = panels.get(id);
+        if (panel == null) return;
+        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+        if (!sizeBeforeCollapse) return;
+        const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
+        const index = panelsArray.indexOf(panel);
+        if (index < 0) return;
+        const currentSize = prevSizes[index];
+        if (currentSize !== 0) // Panel is already expanded.
+        return;
+        const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$5a5b0c1d38c23c3b)(id, panelsArray);
+        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);
+        if (prevSizes !== nextSizes) {
+            // If resize change handlers have been declared, this is the time to call them.
+            (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
+    const resizePanel = (0, $b2QPe$react.useCallback)((id, nextSize)=>{
+        const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
+        const panel = panels.get(id);
+        if (panel == null) return;
+        const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
+        const index = panelsArray.indexOf(panel);
+        if (index < 0) return;
+        const currentSize = prevSizes[index];
+        if (currentSize === nextSize) return;
+        const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$5a5b0c1d38c23c3b)(id, panelsArray);
+        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);
+        if (prevSizes !== nextSizes) {
+            // If resize change handlers have been declared, this is the time to call them.
+            (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
     const context = (0, $b2QPe$react.useMemo)(()=>({
             activeHandleId: activeHandleId,
+            collapsePanel: collapsePanel,
             direction: direction,
+            expandPanel: expandPanel,
             getPanelStyle: getPanelStyle,
             groupId: groupId,
             registerPanel: registerPanel,
             registerResizeHandle: registerResizeHandle,
+            resizePanel: resizePanel,
             startDragging: (id, event)=>{
                 setActiveHandleId(id);
                 dragOffsetRef.current = (0, $f5af57c8e042a4ad$export$ec391ce65b083ed4)(event, id, direction);
@@ -650,11 +793,14 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             unregisterPanel: unregisterPanel
         }), [
         activeHandleId,
+        collapsePanel,
         direction,
+        expandPanel,
         getPanelStyle,
         groupId,
         registerPanel,
         registerResizeHandle,
+        resizePanel,
         unregisterPanel
     ]);
     const style = {
@@ -681,7 +827,7 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$19bf0050f73d236b$export$2e2bcd8739ae039.displayName = "PanelGroup";
+$19bf0050f73d236b$export$1d05749f6f573bb.displayName = "PanelGroup";
 
 
 
@@ -689,7 +835,7 @@ $19bf0050f73d236b$export$2e2bcd8739ae039.displayName = "PanelGroup";
 
 
 
-function $01377e07790cf46f$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $01377e07790cf46f$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $b2QPe$react.useRef)(null);
     const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
@@ -779,7 +925,7 @@ function $01377e07790cf46f$export$2e2bcd8739ae039({ children: children = null ,
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$01377e07790cf46f$export$2e2bcd8739ae039.displayName = "PanelResizeHandle";
+$01377e07790cf46f$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";