react-resizable-panels 3.0.3 → 3.0.6

package/README.md

@@ -80,7 +80,6 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |
 | `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).               |
 | `isExpanded(): boolean`  | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).       |
-| `getSize(): number`      | Returns the most recently committed size of the panel as a percentage (`1 - 100`). |
 | `resize(size: number)`   | Resize panel to the specified _percentage_ (`1 - 100`).                            |
 
 ### `PanelResizeHandle`
@@ -124,7 +123,7 @@ The `Panel` API doesn't _require_ `id` and `order` props because they aren't nec
 </PanelGroup>
 ```
 
-### Can a attach a ref to the DOM elements?
+### Can I attach a ref to the DOM elements?
 
 No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
 
@@ -247,3 +246,15 @@ import { disableGlobalCursorStyles } from "react-resizable-panels";
 
 disableGlobalCursorStyles();
 ```
+
+#### How can I override the global cursor styles?
+
+```js
+import { customizeGlobalCursorStyles, type CustomCursorStyleConfig } from "react-resizable-panels";
+
+function customCursor({ isPointerDown }: CustomCursorStyleConfig) {
+  return isPointerDown ? "grabbing" : "grab";
+}
+
+customizeGlobalCursorStyles(customCursor);
+```

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

@@ -5,7 +5,7 @@ import { DATA_ATTRIBUTES } from "./constants.js";
 import { usePanelGroupContext } from "./hooks/usePanelGroupContext.js";
 import { assert } from "./utils/assert.js";
 import { setNonce } from "./utils/csp.js";
-import { disableGlobalCursorStyles, enableGlobalCursorStyles } from "./utils/cursor.js";
+import { customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles } from "./utils/cursor.js";
 import { getPanelElement } from "./utils/dom/getPanelElement.js";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement.js";
@@ -19,4 +19,5 @@ import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResi
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
 import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, usePanelGroupContext, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, enableGlobalCursorStyles, disableGlobalCursorStyles, setNonce, DATA_ATTRIBUTES, };
+import type { CustomCursorStyleConfig } from "./utils/cursor.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, usePanelGroupContext, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, setNonce, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, CustomCursorStyleConfig, DATA_ATTRIBUTES, };

package/dist/declarations/src/utils/cursor.d.ts

@@ -1,7 +1,18 @@
 type CursorState = "horizontal" | "intersection" | "vertical";
+export type CustomCursorStyleConfig = {
+    exceedsHorizontalMaximum: boolean;
+    exceedsHorizontalMinimum: boolean;
+    exceedsVerticalMaximum: boolean;
+    exceedsVerticalMinimum: boolean;
+    intersectsHorizontalDragHandle: boolean;
+    intersectsVerticalDragHandle: boolean;
+    isPointerDown: boolean;
+};
+type GetCustomCursorStyleFunction = (config: CustomCursorStyleConfig) => string;
+export declare function customizeGlobalCursorStyles(callback: GetCustomCursorStyleFunction | null): void;
 export declare function disableGlobalCursorStyles(): void;
 export declare function enableGlobalCursorStyles(): void;
-export declare function getCursorStyle(state: CursorState, constraintFlags: number): string;
+export declare function getCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): string;
 export declare function resetGlobalCursorStyle(): void;
-export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number): void;
+export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): void;
 export {};

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

@@ -188,20 +188,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -241,12 +256,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -493,6 +508,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -507,7 +525,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -650,11 +670,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -939,7 +959,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1437,12 +1457,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2569,4 +2589,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

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

@@ -182,20 +182,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -235,12 +250,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -487,6 +502,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -501,7 +519,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -644,11 +664,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -933,7 +953,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1421,12 +1441,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2463,4 +2483,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

package/dist/react-resizable-panels.development.edge-light.js

@@ -158,20 +158,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -211,12 +226,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -463,6 +478,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -477,7 +495,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -620,11 +640,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -909,7 +929,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1283,12 +1303,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2342,4 +2362,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

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

@@ -195,20 +195,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -248,12 +263,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -500,6 +515,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -514,7 +532,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -657,11 +677,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -946,7 +966,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1444,12 +1464,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2576,4 +2596,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

package/dist/react-resizable-panels.edge-light.js

@@ -147,20 +147,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -200,12 +215,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -452,6 +467,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -466,7 +484,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -609,11 +629,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -898,7 +918,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1272,12 +1292,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2241,4 +2261,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

package/dist/react-resizable-panels.js

@@ -184,20 +184,35 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let getCustomCursorStyleFunction = null;
 let prevRuleIndex = -1;
 let styleElement = null;
+function customizeGlobalCursorStyles(callback) {
+  getCustomCursorStyleFunction = callback;
+}
 function disableGlobalCursorStyles() {
   enabled = false;
 }
 function enableGlobalCursorStyles() {
   enabled = true;
 }
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin) {
       if (verticalMin) {
         return "se-resize";
@@ -237,12 +252,12 @@ function resetGlobalCursorStyle() {
     prevRuleIndex = -1;
   }
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
-  const style = getCursorStyle(state, constraintFlags);
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
   if (currentCursorStyle === style) {
     return;
   }
@@ -489,6 +504,9 @@ function handlePointerDown(event) {
   updateListeners();
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
     event.preventDefault();
     if (!isWithinResizeHandle(target)) {
       event.stopImmediatePropagation();
@@ -503,7 +521,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -646,11 +666,11 @@ function updateCursor() {
     constraintFlags |= flag;
   });
   if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
+    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
   } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
   } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
   } else {
     resetGlobalCursorStyle();
   }
@@ -935,7 +955,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1423,12 +1443,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,
@@ -2465,4 +2485,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "type": "module",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
@@ -51,6 +51,15 @@
     }
   },
   "types": "dist/react-resizable-panels.d.ts",
+  "scripts": {
+    "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
+    "clear:builds": "rm -rf ./packages/*/dist",
+    "clear:node_modules": "rm -rf ./node_modules",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test:browser": "vitest",
+    "test:node": "vitest -c vitest.node.config.ts",
+    "watch": "parcel watch --port=2345"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
@@ -68,14 +77,5 @@
   },
   "browserslist": [
     "Chrome 79"
-  ],
-  "scripts": {
-    "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
-    "clear:builds": "rm -rf ./packages/*/dist",
-    "clear:node_modules": "rm -rf ./node_modules",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test:browser": "vitest",
-    "test:node": "vitest -c vitest.node.config.ts",
-    "watch": "parcel watch --port=2345"
-  }
-}
+  ]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Brian Vaughn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.