react-resizable-panels 2.0.18 → 2.0.20

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.0.20
+
+- Reset global cursor if an active resize handle is unmounted (#313)
+- Resize handle supports (optional) `onFocus` or `onBlur` props (#370)
+
+## 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)

package/README.md

@@ -223,4 +223,7 @@ export function ClientComponent({
 }
 ```
 
+> [!NOTE]
+> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.
+
 A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).

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/declarations/src/PanelResizeHandle.d.ts

@@ -1,18 +1,20 @@
-import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 import { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
-export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
+export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onBlur" | "onFocus"> & PropsWithChildren<{
     className?: string;
     disabled?: boolean;
     hitAreaMargins?: PointerHitAreaMargins;
     id?: string | null;
+    onBlur?: () => void;
     onDragging?: PanelResizeHandleOnDragging;
+    onFocus?: () => void;
     style?: CSSProperties;
     tabIndex?: number;
     tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onBlur, onDragging, onFocus, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

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

@@ -14,4 +14,5 @@ import { intersects } from "./utils/rects/intersects.js";
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };
+import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

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;
@@ -454,6 +454,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1722,7 +1732,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 +1745,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);
@@ -2202,7 +2213,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2322,8 +2335,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -460,6 +460,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1828,7 +1838,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 +1851,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);
@@ -2308,7 +2319,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2428,8 +2441,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -436,6 +436,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1804,7 +1814,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 +1827,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);
@@ -2284,7 +2295,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2404,8 +2417,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -430,6 +430,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1698,7 +1708,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 +1721,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);
@@ -2178,7 +2189,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2298,8 +2311,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -456,6 +456,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1724,7 +1734,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 +1747,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);
@@ -2204,7 +2215,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2324,8 +2337,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -467,6 +467,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1835,7 +1845,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 +1858,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);
@@ -2315,7 +2326,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2435,8 +2448,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -443,6 +443,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1811,7 +1821,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 +1834,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);
@@ -2291,7 +2302,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2411,8 +2424,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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;
@@ -429,6 +429,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -1659,7 +1669,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 +1682,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);
@@ -2083,7 +2094,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2200,8 +2213,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {