react-resizable-panels 2.0.17 → 2.0.19

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.19
+
+- Add optional `minSize` override param to panel `expand` imperative API
+
+## 2.0.18
+
+- Inline object `hitAreaMargins` will not trigger re-initialization logic unless inner values change (#342)
+
 ## 2.0.17
 
 - Prevent pointer events handled by resize handles from triggering elements behind/underneath (#338)

package/dist/declarations/src/Panel.d.ts

@@ -23,7 +23,7 @@ export type PanelData = {
 };
 export type ImperativePanelHandle = {
     collapse: () => void;
-    expand: () => void;
+    expand: (minSize?: number) => void;
     getId(): string;
     getSize(): number;
     isCollapsed: () => boolean;

package/dist/react-resizable-panels.browser.cjs.js

@@ -157,8 +157,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1722,7 +1722,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1735,9 +1735,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2208,6 +2209,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2247,8 +2249,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2298,12 +2304,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -163,8 +163,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1828,7 +1828,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1841,9 +1841,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2314,6 +2315,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2353,8 +2355,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2404,12 +2410,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.browser.development.esm.js

@@ -139,8 +139,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1804,7 +1804,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1817,9 +1817,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2290,6 +2291,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2329,8 +2331,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2380,12 +2386,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.browser.esm.js

@@ -133,8 +133,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1698,7 +1698,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1711,9 +1711,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2184,6 +2185,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2223,8 +2225,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2274,12 +2280,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

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

@@ -159,8 +159,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1724,7 +1724,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1737,9 +1737,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2210,6 +2211,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2249,8 +2251,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2300,12 +2306,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.development.cjs.js

@@ -170,8 +170,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1835,7 +1835,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1848,9 +1848,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2321,6 +2322,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2360,8 +2362,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2411,12 +2417,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.development.esm.js

@@ -146,8 +146,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1811,7 +1811,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1824,9 +1824,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2297,6 +2298,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2336,8 +2338,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2387,12 +2393,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.development.node.cjs.js

@@ -132,8 +132,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1659,7 +1659,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1672,9 +1672,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2089,6 +2090,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2125,8 +2127,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2176,12 +2182,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.development.node.esm.js

@@ -108,8 +108,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1635,7 +1635,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1648,9 +1648,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2065,6 +2066,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2101,8 +2103,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2152,12 +2158,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

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

@@ -135,8 +135,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1700,7 +1700,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1713,9 +1713,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -2186,6 +2187,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2225,8 +2227,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2276,12 +2282,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.node.cjs.js

@@ -121,8 +121,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1558,7 +1558,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1571,9 +1571,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -1988,6 +1989,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2024,8 +2026,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2075,12 +2081,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/dist/react-resizable-panels.node.esm.js

@@ -97,8 +97,8 @@ function PanelWithForwardedRef({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
-    expand: () => {
-      expandPanel(panelDataRef.current);
+    expand: minSize => {
+      expandPanel(panelDataRef.current, minSize);
     },
     getId() {
       return panelId;
@@ -1534,7 +1534,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
+  const expandPanel = useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1547,9 +1547,10 @@ function PanelGroupWithForwardedRef({
       const {
         collapsedSize = 0,
         panelSize = 0,
-        minSize = 0,
+        minSize: minSizeFromProps = 0,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
       if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
@@ -1964,6 +1965,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2000,8 +2002,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2051,12 +2057,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.test.tsx

@@ -193,6 +193,111 @@ describe("PanelGroup", () => {
         expect(leftPanelRef.current?.isCollapsed()).toBe(false);
         expect(leftPanelRef.current?.isExpanded()).toBe(true);
       });
+
+      describe("when a panel is mounted in a collapsed state", () => {
+        beforeEach(() => {
+          act(() => {
+            root.unmount();
+          });
+        });
+
+        it("should expand to the panel's minSize", () => {
+          const panelRef = createRef<ImperativePanelHandle>();
+
+          root = createRoot(container);
+
+          function renderPanelGroup() {
+            act(() => {
+              root.render(
+                <PanelGroup direction="horizontal">
+                  <Panel
+                    collapsible
+                    defaultSize={0}
+                    minSize={5}
+                    ref={panelRef}
+                  />
+                  <PanelResizeHandle />
+                  <Panel />
+                </PanelGroup>
+              );
+            });
+          }
+
+          // Re-render and confirmed collapsed by default
+          renderPanelGroup();
+          act(() => {
+            panelRef.current?.collapse();
+          });
+          expect(panelRef.current?.getSize()).toEqual(0);
+
+          // Toggling a panel should expand to the minSize (since there's no previous size to restore to)
+          act(() => {
+            panelRef.current?.expand();
+          });
+          expect(panelRef.current?.getSize()).toEqual(5);
+
+          // Collapse again
+          act(() => {
+            panelRef.current?.collapse();
+          });
+          expect(panelRef.current?.getSize()).toEqual(0);
+
+          // Toggling the panel should expand to the minSize override if one is specified
+          // Note this only works because the previous non-collapsed size is less than the minSize override
+          act(() => {
+            panelRef.current?.expand(15);
+          });
+          expect(panelRef.current?.getSize()).toEqual(15);
+        });
+
+        it("should support the (optional) default size", () => {
+          const panelRef = createRef<ImperativePanelHandle>();
+
+          root = createRoot(container);
+
+          function renderPanelGroup() {
+            act(() => {
+              root.render(
+                <PanelGroup autoSaveId="test" direction="horizontal">
+                  <Panel
+                    collapsible
+                    defaultSize={0}
+                    minSize={0}
+                    ref={panelRef}
+                  />
+                  <PanelResizeHandle />
+                  <Panel />
+                </PanelGroup>
+              );
+            });
+          }
+
+          // Re-render and confirmed collapsed by default
+          renderPanelGroup();
+          act(() => {
+            panelRef.current?.collapse();
+          });
+          expect(panelRef.current?.getSize()).toEqual(0);
+
+          // In this case, toggling the panel to expanded will not change its size
+          act(() => {
+            panelRef.current?.expand();
+          });
+          expect(panelRef.current?.getSize()).toEqual(0);
+
+          // But we can override the toggle behavior by passing an explicit min size
+          act(() => {
+            panelRef.current?.expand(10);
+          });
+          expect(panelRef.current?.getSize()).toEqual(10);
+
+          // Toggling an already-expanded panel should not do anything even if we pass a default size
+          act(() => {
+            panelRef.current?.expand(15);
+          });
+          expect(panelRef.current?.getSize()).toEqual(10);
+        });
+      });
     });
 
     describe("resize", () => {

package/src/Panel.ts

@@ -46,7 +46,7 @@ export type PanelData = {
 
 export type ImperativePanelHandle = {
   collapse: () => void;
-  expand: () => void;
+  expand: (minSize?: number) => void;
   getId(): string;
   getSize(): number;
   isCollapsed: () => boolean;
@@ -200,8 +200,8 @@ export function PanelWithForwardedRef({
       collapse: () => {
         collapsePanel(panelDataRef.current);
       },
-      expand: () => {
-        expandPanel(panelDataRef.current);
+      expand: (minSize?: number) => {
+        expandPanel(panelDataRef.current, minSize);
       },
       getId() {
         return panelId;

package/src/PanelGroup.ts

@@ -386,65 +386,72 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback((panelData: PanelData) => {
-    const { onLayout } = committedValuesRef.current;
-    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+  const expandPanel = useCallback(
+    (panelData: PanelData, minSizeOverride?: number) => {
+      const { onLayout } = committedValuesRef.current;
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map(
-        (panelData) => panelData.constraints
-      );
+      if (panelData.constraints.collapsible) {
+        const panelConstraintsArray = panelDataArray.map(
+          (panelData) => panelData.constraints
+        );
 
-      const {
-        collapsedSize = 0,
-        panelSize = 0,
-        minSize = 0,
-        pivotIndices,
-      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+        const {
+          collapsedSize = 0,
+          panelSize = 0,
+          minSize: minSizeFromProps = 0,
+          pivotIndices,
+        } = panelDataHelper(panelDataArray, panelData, prevLayout);
 
-      if (fuzzyNumbersEqual(panelSize, collapsedSize)) {
-        // Restore this panel to the size it was before it was collapsed, if possible.
-        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(
-          panelData.id
-        );
+        const minSize = minSizeOverride ?? minSizeFromProps;
 
-        const baseSize =
-          prevPanelSize != null && prevPanelSize >= minSize
-            ? prevPanelSize
-            : minSize;
+        if (fuzzyNumbersEqual(panelSize, collapsedSize)) {
+          // Restore this panel to the size it was before it was collapsed, if possible.
+          const prevPanelSize = panelSizeBeforeCollapseRef.current.get(
+            panelData.id
+          );
 
-        const isLastPanel =
-          findPanelDataIndex(panelDataArray, panelData) ===
-          panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+          const baseSize =
+            prevPanelSize != null && prevPanelSize >= minSize
+              ? prevPanelSize
+              : minSize;
+
+          const isLastPanel =
+            findPanelDataIndex(panelDataArray, panelData) ===
+            panelDataArray.length - 1;
+          const delta = isLastPanel
+            ? panelSize - baseSize
+            : baseSize - panelSize;
+
+          const nextLayout = adjustLayoutByDelta({
+            delta,
+            initialLayout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices,
+            prevLayout,
+            trigger: "imperative-api",
+          });
 
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          initialLayout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          prevLayout,
-          trigger: "imperative-api",
-        });
+          if (!compareLayouts(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
 
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
+            eagerValuesRef.current.layout = nextLayout;
 
-          eagerValuesRef.current.layout = nextLayout;
+            if (onLayout) {
+              onLayout(nextLayout);
+            }
 
-          if (onLayout) {
-            onLayout(nextLayout);
+            callPanelCallbacks(
+              panelDataArray,
+              nextLayout,
+              panelIdToLastNotifiedSizeMapRef.current
+            );
           }
-
-          callPanelCallbacks(
-            panelDataArray,
-            nextLayout,
-            panelIdToLastNotifiedSizeMapRef.current
-          );
         }
       }
-    }
-  }, []);
+    },
+    []
+  );
 
   // External APIs are safe to memoize via committed values ref
   const getPanelSize = useCallback((panelData: PanelData) => {

package/src/PanelGroupContext.ts

@@ -16,7 +16,7 @@ export type TPanelGroupContext = {
   collapsePanel: (panelData: PanelData) => void;
   direction: "horizontal" | "vertical";
   dragState: DragState | null;
-  expandPanel: (panelData: PanelData) => void;
+  expandPanel: (panelData: PanelData, minSizeOverride?: number) => void;
   getPanelSize: (panelData: PanelData) => number;
   getPanelStyle: (
     panelData: PanelData,

package/src/PanelResizeHandle.ts

@@ -110,6 +110,11 @@ export function PanelResizeHandle({
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
 
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = hitAreaMargins?.coarse ?? 15;
+  const fineHitAreaMargins = hitAreaMargins?.fine ?? 5;
+
   useEffect(() => {
     if (disabled || resizeHandler == null) {
       return;
@@ -168,17 +173,16 @@ export function PanelResizeHandle({
       element,
       direction,
       {
-        // Coarse inputs (e.g. finger/touch)
-        coarse: hitAreaMargins?.coarse ?? 15,
-        // Fine inputs (e.g. mouse)
-        fine: hitAreaMargins?.fine ?? 5,
+        coarse: coarseHitAreaMargins,
+        fine: fineHitAreaMargins,
       },
       setResizeHandlerState
     );
   }, [
+    coarseHitAreaMargins,
     direction,
     disabled,
-    hitAreaMargins,
+    fineHitAreaMargins,
     registerResizeHandleWithParentGroup,
     resizeHandleId,
     resizeHandler,