react-resizable-panels 0.0.27 → 0.0.29

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.
+
 ## 0.0.27
 * [#4](https://github.com/bvaughn/react-resizable-panels/issues/4): Add `collapsible` and `onCollapse` props to `Panel` to support auto-collapsing panels that resize beyond their `minSize` value (similar to VS Code's panel UX).
 

package/README.md

@@ -48,6 +48,14 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `style`       | `?CSSProperties`                | Optional CSS style to attach to root element
 | `tagName`     | `?string = "div"`               | Optional 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
 | :------------ | :---------------- | :---

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

@@ -15,7 +15,7 @@ type PanelData = {
     order: number | null;
 };
 type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
-type PanelProps = {
+export type PanelProps = {
     children?: ReactNode;
     className?: string;
     collapsible?: boolean;
@@ -29,8 +29,13 @@ 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;
@@ -41,16 +46,19 @@ type PanelGroupProps = {
 };
 export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, 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":";ACEA,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;;;;;;;;;;IAsSjB;AC5UD,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/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,"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,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"}

package/dist/react-resizable-panels.js

@@ -4,9 +4,15 @@ 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$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;
+
 
 
 let $6d548a0d130941e3$var$counter = 0;
@@ -26,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,
@@ -48,9 +66,7 @@ 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, $b2QPe$react.useLayoutEffect)(()=>{
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
         const panel = {
             callbacksRef: callbacksRef,
             collapsible: collapsible,
@@ -89,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)";
 
 
 
@@ -189,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);
@@ -319,6 +372,8 @@ function $f5af57c8e042a4ad$export$c4dfce035d43d1e0(event) {
 
 
 
+
+
 function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes  }) {
     (0, $b2QPe$react.useEffect)(()=>{
         const { direction: direction , panels: panels  } = committedValuesRef.current;
@@ -428,7 +483,6 @@ function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 }
 
 
-
 let $102aa6bc0f99b2b3$var$currentState = null;
 let $102aa6bc0f99b2b3$var$element = null;
 function $102aa6bc0f99b2b3$export$fa35f3322c52262f(state) {
@@ -466,20 +520,22 @@ 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 $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = 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());
     // 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,
         panels: panels,
         sizes: sizes
     });
-    (0, $b2QPe$react.useLayoutEffect)(()=>{
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
         committedValuesRef.current.direction = direction;
         committedValuesRef.current.panels = panels;
         committedValuesRef.current.sizes = sizes;
@@ -494,7 +550,7 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     // 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)!
-    (0, $b2QPe$react.useLayoutEffect)(()=>{
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
         const sizes = committedValuesRef.current.sizes;
         if (sizes.length === panels.size) // Only compute (or restore) default sizes once per panel configuration.
         return;
@@ -545,15 +601,29 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     ]);
     const getPanelStyle = (0, $b2QPe$react.useCallback)((id)=>{
         const { panels: panels  } = committedValuesRef.current;
+        // Before mounting, Panels will not yet have registered themselves.
+        // This includes server rendering.
+        // At this point the best we can do is render everything with the same size.
+        if (panels.size === 0) return {
+            flexBasis: "auto",
+            flexGrow: 1,
+            flexShrink: 1,
+            // Without this, Panel sizes may be unintentionally overridden by their content.
+            overflow: "hidden"
+        };
         const flexGrow = (0, $d520236daad9c5d5$export$6f43503e166de6fb)(panels, id, sizes);
         return {
             flexBasis: 0,
             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
     ]);
@@ -590,17 +660,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);
             }
         };
@@ -616,13 +676,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);
@@ -634,11 +762,14 @@ function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             unregisterPanel: unregisterPanel
         }), [
         activeHandleId,
+        collapsePanel,
         direction,
+        expandPanel,
         getPanelStyle,
         groupId,
         registerPanel,
         registerResizeHandle,
+        resizePanel,
         unregisterPanel
     ]);
     const style = {
@@ -665,7 +796,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";
 
 
 
@@ -673,7 +804,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`);
@@ -763,7 +894,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";