react-resizable-panels 0.0.32 → 0.0.34

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

@@ -139,9 +139,9 @@ function $6ff1a22b27cc039d$var$getSerializationKey(panels) {
         return order ? `${order}:${minSize}` : `${minSize}`;
     }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
-function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) {
+function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId, storage) {
     try {
-        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
         if (serialized) {
             const parsed = JSON.parse(serialized);
             if (typeof parsed === "object" && parsed != null) return parsed;
@@ -149,20 +149,20 @@ function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) {
     } catch (error) {}
     return null;
 }
-function $6ff1a22b27cc039d$export$9c80c6617f0386da(autoSaveId, panels) {
-    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId);
+function $6ff1a22b27cc039d$export$9c80c6617f0386da(autoSaveId, panels, storage) {
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId, storage);
     if (state) {
         const key = $6ff1a22b27cc039d$var$getSerializationKey(panels);
         return state[key] || null;
     }
     return null;
 }
-function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panels, sizes) {
+function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
     const key = $6ff1a22b27cc039d$var$getSerializationKey(panels);
-    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
     state[key] = sizes;
     try {
-        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
     } catch (error) {
         console.error(error);
     }
@@ -173,10 +173,14 @@ const $fc25b75732bfda27$export$d6d3992f3becc879 = 10;
 
 
 
-function $f30c804b5fe6cc1a$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse) {
-    if (delta === 0) return prevSizes;
+function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
+    const { sizes: initialSizes  } = initialDragState || {};
+    // If we're resizing by mouse or touch, use the initial sizes as a base.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const baseSizes = initialSizes || prevSizes;
+    if (delta === 0) return baseSizes;
     const panelsArray = $f30c804b5fe6cc1a$export$a861c0ad45885494(panels);
-    const nextSizes = prevSizes.concat();
+    const nextSizes = baseSizes.concat();
     let deltaApplied = 0;
     // A resizing panel affects the panels before or after it.
     //
@@ -190,25 +194,29 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(panels, idBefore, idAfter, de
         const pivotId = delta < 0 ? idAfter : idBefore;
         const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
         const panel = panelsArray[index];
-        const prevSize = prevSizes[index];
-        const nextSize = $f30c804b5fe6cc1a$var$safeResizePanel(panel, Math.abs(delta), prevSize);
-        if (prevSize === nextSize) return prevSizes;
+        const baseSize = baseSizes[index];
+        const nextSize = $f30c804b5fe6cc1a$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
+        if (baseSize === nextSize) // If there's no room for the pivot panel to grow, we can ignore this drag update.
+        return baseSizes;
         else {
-            if (nextSize === 0 && prevSize > 0) panelSizeBeforeCollapse.set(pivotId, prevSize);
-            delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(pivotId, baseSize);
+            delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
         }
     }
     let pivotId1 = delta < 0 ? idBefore : idAfter;
     let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
     while(true){
         const panel1 = panelsArray[index1];
-        const prevSize1 = prevSizes[index1];
-        const nextSize1 = $f30c804b5fe6cc1a$var$safeResizePanel(panel1, 0 - Math.abs(delta), prevSize1);
-        if (prevSize1 !== nextSize1) {
-            if (nextSize1 === 0 && prevSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, prevSize1);
-            deltaApplied += prevSize1 - nextSize1;
+        const baseSize1 = baseSizes[index1];
+        const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+        const nextSize1 = $f30c804b5fe6cc1a$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
+        if (baseSize1 !== nextSize1) {
+            if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
+            deltaApplied += baseSize1 - nextSize1;
             nextSizes[index1] = nextSize1;
-            if (deltaApplied.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) >= delta.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) break;
+            if (deltaApplied.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)), undefined, {
+                numeric: true
+            }) >= 0) break;
         }
         if (delta < 0) {
             if (--index1 < 0) break;
@@ -218,22 +226,24 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(panels, idBefore, idAfter, de
     }
     // If we were unable to resize any of the panels panels, return the previous state.
     // This will essentially bailout and ignore the "mousemove" event.
-    if (deltaApplied === 0) return prevSizes;
+    if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId1 = delta < 0 ? idAfter : idBefore;
     index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
-    nextSizes[index1] = prevSizes[index1] + deltaApplied;
+    nextSizes[index1] = baseSizes[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 { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index];
             const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
             if (onResize) onResize(nextSize);
-            if (onCollapse) {
-                if (prevSize === 0 && nextSize !== 0) onCollapse(false);
+            if (collapsible && onCollapse) {
+                // Falsy check handles both previous size of 0
+                // and initial size of undefined (when mounting)
+                if (!prevSize && nextSize !== 0) onCollapse(false);
                 else if (prevSize !== 0 && nextSize === 0) onCollapse(true);
             }
         }
@@ -305,13 +315,19 @@ function $f30c804b5fe6cc1a$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 function $f30c804b5fe6cc1a$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
 }
-function $f30c804b5fe6cc1a$var$safeResizePanel(panel, delta, prevSize) {
+function $f30c804b5fe6cc1a$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
     if (panel.collapsible) {
         if (prevSize > 0) {
             if (nextSizeUnsafe <= 0) return 0;
         } else {
-            if (nextSizeUnsafe < panel.minSize) return 0;
+            const isKeyboardEvent = event?.type?.startsWith("key");
+            if (!isKeyboardEvent) {
+                // Keyboard events should expand a collapsed panel to the min size,
+                // but mouse events should wait until the panel has reached its min size
+                // to avoid a visual flickering when dragging between collapsed and min size.
+                if (nextSizeUnsafe < panel.minSize) return 0;
+            }
         }
     }
     const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
@@ -319,7 +335,7 @@ function $f30c804b5fe6cc1a$var$safeResizePanel(panel, delta, prevSize) {
 }
 
 
-function $96f6397ae645d178$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0) {
+function $96f6397ae645d178$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
     const isHorizontal = direction === "horizontal";
     let pointerOffset = 0;
     if ($96f6397ae645d178$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
@@ -328,11 +344,15 @@ function $96f6397ae645d178$export$ec391ce65b083ed4(event, handleId, direction, i
         pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
     } else return 0;
     const handleElement = (0, $f30c804b5fe6cc1a$export$2e27d3a347680388)(handleId);
-    const rect = handleElement.getBoundingClientRect();
+    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
     const elementOffset = isHorizontal ? rect.left : rect.top;
     return pointerOffset - elementOffset - initialOffset;
 }
-function $96f6397ae645d178$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, sizes, initialOffset) {
+function $96f6397ae645d178$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
+    const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes  } = initialDragState || {};
+    // If we're resizing by mouse or touch, use the initial sizes as a base.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const baseSizes = initialSizes || prevSizes;
     if ($96f6397ae645d178$export$e7bf60a870f429b0(event)) {
         const isHorizontal = direction === "horizontal";
         const groupElement = (0, $f30c804b5fe6cc1a$export$5e67632cf3550a9c)(groupId);
@@ -370,11 +390,11 @@ function $96f6397ae645d178$export$354b17c0684607ed(event, groupId, handleId, pan
         const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
         const targetPanel = panelsArray[targetPanelIndex];
         if (targetPanel.collapsible) {
-            const prevSize = sizes[targetPanelIndex];
-            if (prevSize === 0 || prevSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
+            const baseSize = baseSizes[targetPanelIndex];
+            if (baseSize === 0 || baseSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
         }
         return movement;
-    } else return $96f6397ae645d178$export$ec391ce65b083ed4(event, handleId, direction, initialOffset);
+    } else return $96f6397ae645d178$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
 }
 function $96f6397ae645d178$export$e7bf60a870f429b0(event) {
     return event.type === "keydown";
@@ -436,7 +456,7 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
                                     let delta = 0;
                                     if (size.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
-                                    const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current);
+                                    const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
                                 }
                             }
@@ -551,12 +571,32 @@ function $480430d8582e6616$export$2e2bcd8739ae039(callback, durationMs = 10) {
 }
 
 
+function $f5f5dfb280167863$export$b141efd0b0fb9174(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) return false;
+    for(let index = 0; index < arrayA.length; index++){
+        if (arrayA[index] !== arrayB[index]) return false;
+    }
+    return true;
+}
+
+
 // 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"  }) {
+function $eb1c4d3cf38334c2$var$throwServerError() {
+    throw new Error('PanelGroup "storage" prop required for server rendering.');
+}
+const $eb1c4d3cf38334c2$var$defaultStorage = {
+    getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $eb1c4d3cf38334c2$var$throwServerError,
+    setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $eb1c4d3cf38334c2$var$throwServerError
+};
+function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $eb1c4d3cf38334c2$var$defaultStorage , 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());
+    // When resizing is done via mouse/touch event–
+    // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const initialDragStateRef = (0, $fpI56$useRef)(null);
     // Use a ref to guard against users passing inline props
     const callbacksRef = (0, $fpI56$useRef)({
         onLayout: onLayout
@@ -566,11 +606,9 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     });
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $fpI56$useState)([]);
-    // Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
-    // This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
-    const dragOffsetRef = (0, $fpI56$useRef)(0);
     // Used to support imperative collapse/expand API.
     const panelSizeBeforeCollapse = (0, $fpI56$useRef)(new Map());
+    const prevDeltaRef = (0, $fpI56$useRef)(0);
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
     const committedValuesRef = (0, $fpI56$useRef)({
         direction: direction,
@@ -627,7 +665,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         let defaultSizes = undefined;
         if (autoSaveId) {
             const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
-            defaultSizes = (0, $6ff1a22b27cc039d$export$9c80c6617f0386da)(autoSaveId, panelsArray);
+            defaultSizes = (0, $6ff1a22b27cc039d$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
         }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
@@ -660,7 +698,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
-            $eb1c4d3cf38334c2$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes);
+            $eb1c4d3cf38334c2$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
         }
     }, [
         autoSaveId,
@@ -710,27 +748,37 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $f30c804b5fe6cc1a$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const movement = (0, $96f6397ae645d178$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, dragOffsetRef.current);
+            const movement = (0, $96f6397ae645d178$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
             if (movement === 0) return;
             const groupElement = (0, $f30c804b5fe6cc1a$export$5e67632cf3550a9c)(groupId);
             const rect = groupElement.getBoundingClientRect();
             const isHorizontal = direction === "horizontal";
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
-            const nextSizes = (0, $f30c804b5fe6cc1a$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.
-                // This mimics VS Code behavior.
-                if (isHorizontal) (0, $60180881129f5dc3$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
-                else (0, $60180881129f5dc3$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
-            } else {
-                // Reset the cursor style to the the normal resize cursor.
-                (0, $60180881129f5dc3$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
+            const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
+            const sizesChanged = !(0, $f5f5dfb280167863$export$b141efd0b0fb9174)(prevSizes, nextSizes);
+            // Don't update cursor for resizes triggered by keyboard interactions.
+            if ((0, $96f6397ae645d178$export$764db16956f554f8)(event) || (0, $96f6397ae645d178$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+            // In this case, Panel sizes might not change–
+            // but updating cursor in this scenario would cause a flicker.
+            {
+                if (prevDeltaRef.current != delta) {
+                    if (!sizesChanged) {
+                        // If the pointer has moved too far to resize the panel any further,
+                        // update the cursor style for a visual clue.
+                        // This mimics VS Code behavior.
+                        if (isHorizontal) (0, $60180881129f5dc3$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
+                        else (0, $60180881129f5dc3$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
+                    } else // Reset the cursor style to the the normal resize cursor.
+                    (0, $60180881129f5dc3$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
+                }
+            }
+            if (sizesChanged) {
                 // If resize change handlers have been declared, this is the time to call them.
                 (0, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
                 setSizes(nextSizes);
             }
+            prevDeltaRef.current = delta;
         };
         return resizeHandler;
     }, [
@@ -759,7 +807,7 @@ function $eb1c4d3cf38334c2$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, $f30c804b5fe6cc1a$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -782,7 +830,7 @@ function $eb1c4d3cf38334c2$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, $f30c804b5fe6cc1a$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -798,11 +846,13 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (index < 0) return;
         const currentSize = prevSizes[index];
         if (currentSize === nextSize) return;
+        if (panel.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
         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, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $f30c804b5fe6cc1a$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -821,11 +871,19 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             resizePanel: resizePanel,
             startDragging: (id, event)=>{
                 setActiveHandleId(id);
-                dragOffsetRef.current = (0, $96f6397ae645d178$export$ec391ce65b083ed4)(event, id, direction);
+                if ((0, $96f6397ae645d178$export$764db16956f554f8)(event) || (0, $96f6397ae645d178$export$c4dfce035d43d1e0)(event)) {
+                    const handleElement = (0, $f30c804b5fe6cc1a$export$2e27d3a347680388)(id);
+                    initialDragStateRef.current = {
+                        dragHandleRect: handleElement.getBoundingClientRect(),
+                        dragOffset: (0, $96f6397ae645d178$export$ec391ce65b083ed4)(event, id, direction),
+                        sizes: committedValuesRef.current.sizes
+                    };
+                }
             },
             stopDragging: ()=>{
                 (0, $60180881129f5dc3$export$b61932ee18f96e08)();
                 setActiveHandleId(null);
+                initialDragStateRef.current = null;
             },
             unregisterPanel: unregisterPanel
         }), [
@@ -851,6 +909,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         children: (0, $fpI56$createElement)(Type, {
             children: children,
             className: classNameFromProps,
+            "data-panel-group": "",
             "data-panel-group-direction": direction,
             "data-panel-group-id": groupId,
             style: {