react-resizable-panels 2.0.18 → 2.0.20

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;
@@ -405,6 +405,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) {
@@ -1635,7 +1645,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 +1658,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);
@@ -2059,7 +2070,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2176,8 +2189,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.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;
@@ -432,6 +432,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) {
@@ -1700,7 +1710,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 +1723,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);
@@ -2180,7 +2191,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2300,8 +2313,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.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;
@@ -418,6 +418,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) {
@@ -1558,7 +1568,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 +1581,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);
@@ -1982,7 +1993,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2099,8 +2112,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.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;
@@ -394,6 +394,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) {
@@ -1534,7 +1544,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 +1557,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);
@@ -1958,7 +1969,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2075,8 +2088,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "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.test.tsx

@@ -1,8 +1,13 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import type { PanelResizeHandleProps } from "react-resizable-panels";
-import { Panel, PanelGroup, PanelResizeHandle } from ".";
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+  type PanelResizeHandleProps,
+} from ".";
 import { assert } from "./utils/assert";
+import * as cursorUtils from "./utils/cursor";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import {
   dispatchPointerEvent,
@@ -10,6 +15,12 @@ import {
   verifyAttribute,
 } from "./utils/test-utils";
 
+jest.mock("./utils/cursor", () => ({
+  getCursorStyle: jest.fn(),
+  resetGlobalCursorStyle: jest.fn(),
+  setGlobalCursorStyle: jest.fn(),
+}));
+
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
   let root: Root;
@@ -305,4 +316,33 @@ describe("PanelResizeHandle", () => {
       expect(element?.getAttribute("id")).toBeNull();
     });
   });
+
+  it("resets the global cursor style on unmount", () => {
+    const onDraggingLeft = jest.fn();
+
+    const { leftElement } = setupMockedGroup({
+      leftProps: { onDragging: onDraggingLeft },
+      rightProps: {},
+    });
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+
+    act(() => {
+      dispatchPointerEvent("pointerdown", leftElement);
+    });
+    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+    expect(onDraggingLeft).toHaveBeenCalledWith(true);
+
+    expect(cursorUtils.resetGlobalCursorStyle).not.toHaveBeenCalled();
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      root.unmount();
+    });
+
+    expect(cursorUtils.resetGlobalCursorStyle).toHaveBeenCalled();
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+  });
 });