react-resizable-panels 0.0.28 → 0.0.30

package/dist/react-resizable-panels.module.js

@@ -1,8 +1,9 @@
-import {useContext as $fpI56$useContext, useRef as $fpI56$useRef, useEffect as $fpI56$useEffect, createElement as $fpI56$createElement, useLayoutEffect as $fpI56$useLayoutEffect, useId as $fpI56$useId, createContext as $fpI56$createContext, useState as $fpI56$useState, useCallback as $fpI56$useCallback, useMemo as $fpI56$useMemo} from "react";
+import {useContext as $fpI56$useContext, useImperativeHandle as $fpI56$useImperativeHandle, useRef as $fpI56$useRef, useEffect as $fpI56$useEffect, createElement as $fpI56$createElement, forwardRef as $fpI56$forwardRef, useLayoutEffect as $fpI56$useLayoutEffect, useId as $fpI56$useId, createContext as $fpI56$createContext, useState as $fpI56$useState, useCallback as $fpI56$useCallback, useMemo as $fpI56$useMemo} from "react";
 
 
 
-const $23fa594419c83ea6$var$useIsomorphicLayoutEffect = typeof window !== "undefined" ? (0, $fpI56$useLayoutEffect) : (0, $fpI56$useEffect);
+const $23fa594419c83ea6$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+const $23fa594419c83ea6$var$useIsomorphicLayoutEffect = $23fa594419c83ea6$var$canUseEffectHooks ? (0, $fpI56$useLayoutEffect) : ()=>{};
 var $23fa594419c83ea6$export$2e2bcd8739ae039 = $23fa594419c83ea6$var$useIsomorphicLayoutEffect;
 
 
@@ -24,9 +25,21 @@ const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null
 $f922724f4bad4884$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
 
 
-function $b6b4d0cd2eaa6b70$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 $b6b4d0cd2eaa6b70$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, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
+    const panelId = (0, $968185313205dcfa$export$2e2bcd8739ae039)(idFromProps);
+    const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel  } = context;
+    (0, $fpI56$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, $fpI56$useRef)({
         onCollapse: onCollapse,
@@ -46,8 +59,6 @@ function $b6b4d0cd2eaa6b70$export$2e2bcd8739ae039({ children: children = null ,
             defaultSize = minSize;
         }
     }
-    const panelId = (0, $968185313205dcfa$export$2e2bcd8739ae039)(idFromProps);
-    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
     (0, $23fa594419c83ea6$export$2e2bcd8739ae039)(()=>{
         const panel = {
             callbacksRef: callbacksRef,
@@ -87,10 +98,15 @@ function $b6b4d0cd2eaa6b70$export$2e2bcd8739ae039({ children: children = null ,
         }
     });
 }
+const $b6b4d0cd2eaa6b70$export$2ddb90ad54e5f587 = (0, $fpI56$forwardRef)((props, ref)=>(0, $fpI56$createElement)($b6b4d0cd2eaa6b70$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
-$b6b4d0cd2eaa6b70$export$2e2bcd8739ae039.displayName = "Panel";
+$b6b4d0cd2eaa6b70$var$PanelWithForwardedRef.displayName = "Panel";
+$b6b4d0cd2eaa6b70$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
 
 
 
@@ -187,6 +203,38 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(panels, idBefore, idAfter, de
     nextSizes[index1] = prevSizes[index1] + deltaApplied;
     return nextSizes;
 }
+function $f30c804b5fe6cc1a$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 $f30c804b5fe6cc1a$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 $f30c804b5fe6cc1a$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $f30c804b5fe6cc1a$export$a861c0ad45885494(panels);
@@ -465,13 +513,36 @@ function $60180881129f5dc3$export$d395b5dfd066a659(state) {
 }
 
 
-function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $480430d8582e6616$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 $eb1c4d3cf38334c2$var$savePanelGroupLayoutDebounced = (0, $480430d8582e6616$export$2e2bcd8739ae039)((0, $6ff1a22b27cc039d$export$af183b313c61be4f), 100);
+function $eb1c4d3cf38334c2$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, $968185313205dcfa$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $fpI56$useState)(null);
     const [panels, setPanels] = (0, $fpI56$useState)(new Map());
+    // Use a ref to guard against users passing inline props
+    const callbacksRef = (0, $fpI56$useRef)({
+        onLayout: onLayout
+    });
+    (0, $fpI56$useEffect)(()=>{
+        callbacksRef.current.onLayout = onLayout;
+    });
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $fpI56$useState)([]);
     const dragOffsetRef = (0, $fpI56$useRef)(0);
+    // Used to support imperative collapse/expand API.
+    const panelSizeBeforeCollapse = (0, $fpI56$useRef)(new Map());
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
     const committedValuesRef = (0, $fpI56$useRef)({
         direction: direction,
@@ -490,6 +561,16 @@ function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         setSizes: setSizes,
         sizes: sizes
     });
+    // Notify external code when sizes have changed.
+    (0, $fpI56$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)!
@@ -535,7 +616,7 @@ function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
-            (0, $6ff1a22b27cc039d$export$af183b313c61be4f)(autoSaveId, panelsArray, sizes);
+            $eb1c4d3cf38334c2$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes);
         }
     }, [
         autoSaveId,
@@ -560,9 +641,13 @@ function $eb1c4d3cf38334c2$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
     ]);
@@ -599,17 +684,7 @@ function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
                 // Reset the cursor style to the the normal resize cursor.
                 (0, $60180881129f5dc3$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, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
                 setSizes(nextSizes);
             }
         };
@@ -625,13 +700,81 @@ function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
+    const collapsePanel = (0, $fpI56$useCallback)((id)=>{
+        const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
+        const panel = panels.get(id);
+        if (panel == null || !panel.collapsible) return;
+        const panelsArray = (0, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
+    const expandPanel = (0, $fpI56$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
+    const resizePanel = (0, $fpI56$useCallback)((id, nextSize)=>{
+        const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
+        const panel = panels.get(id);
+        if (panel == null) return;
+        const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
+        const index = panelsArray.indexOf(panel);
+        if (index < 0) return;
+        const currentSize = prevSizes[index];
+        if (currentSize === nextSize) return;
+        const [idBefore, idAfter] = (0, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$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, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
+            setSizes(nextSizes);
+        }
+    }, []);
     const context = (0, $fpI56$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, $96f6397ae645d178$export$ec391ce65b083ed4)(event, id, direction);
@@ -643,11 +786,14 @@ function $eb1c4d3cf38334c2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             unregisterPanel: unregisterPanel
         }), [
         activeHandleId,
+        collapsePanel,
         direction,
+        expandPanel,
         getPanelStyle,
         groupId,
         registerPanel,
         registerResizeHandle,
+        resizePanel,
         unregisterPanel
     ]);
     const style = {
@@ -674,7 +820,7 @@ function $eb1c4d3cf38334c2$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
-$eb1c4d3cf38334c2$export$2e2bcd8739ae039.displayName = "PanelGroup";
+$eb1c4d3cf38334c2$export$1d05749f6f573bb.displayName = "PanelGroup";
 
 
 
@@ -682,7 +828,7 @@ $eb1c4d3cf38334c2$export$2e2bcd8739ae039.displayName = "PanelGroup";
 
 
 
-function $91e657179112cfb0$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $fpI56$useRef)(null);
     const panelGroupContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
@@ -772,10 +918,10 @@ function $91e657179112cfb0$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
-$91e657179112cfb0$export$2e2bcd8739ae039.displayName = "PanelResizeHandle";
+$91e657179112cfb0$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
 
 
 
 
-export {$b6b4d0cd2eaa6b70$export$2e2bcd8739ae039 as Panel, $eb1c4d3cf38334c2$export$2e2bcd8739ae039 as PanelGroup, $91e657179112cfb0$export$2e2bcd8739ae039 as PanelResizeHandle};
+export {$b6b4d0cd2eaa6b70$export$2ddb90ad54e5f587 as Panel, $eb1c4d3cf38334c2$export$1d05749f6f573bb as PanelGroup, $91e657179112cfb0$export$8829ecf6b6b15484 as PanelResizeHandle};
 //# sourceMappingURL=react-resizable-panels.module.js.map