react-resizable-panels 2.0.23 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.1.1
+
+- Fix `onDragging` regression (#391)
+- Fix cursor icon behavior in nested panels (#390)
+
+## 2.1.0
+
+- Add opt-in support for setting the [`"nonce"` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) for the global cursor style (#386)
+- Support disabling global cursor styles (#387)
+
 ## 2.0.23
 
 - Improve obfuscation for `React.useId` references (#382)

package/README.md

@@ -227,3 +227,19 @@ export function ClientComponent({
 > 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).
+
+#### How can I set the [CSP `"nonce"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute?
+
+```js
+import { setNonce } from "react-resizable-panels";
+
+setNonce("your-nonce-value-here");
+```
+
+#### How can I disable global cursor styles?
+
+```js
+import { disableGlobalCursorStyles } from "react-resizable-panels";
+
+disableGlobalCursorStyles();
+```

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

@@ -2,6 +2,8 @@ import { Panel } from "./Panel.js";
 import { PanelGroup } from "./PanelGroup.js";
 import { PanelResizeHandle } from "./PanelResizeHandle.js";
 import { assert } from "./utils/assert.js";
+import { setNonce } from "./utils/csp.js";
+import { enableGlobalCursorStyles, disableGlobalCursorStyles } 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";
@@ -15,4 +17,4 @@ 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, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };
+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, enableGlobalCursorStyles, disableGlobalCursorStyles, setNonce, };

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

@@ -0,0 +1,2 @@
+export declare function getNonce(): string | null;
+export declare function setNonce(value: string | null): void;

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

@@ -0,0 +1,7 @@
+type CursorState = "horizontal" | "intersection" | "vertical";
+export declare function disableGlobalCursorStyles(): void;
+export declare function enableGlobalCursorStyles(): void;
+export declare function getCursorStyle(state: CursorState, constraintFlags: number): string;
+export declare function resetGlobalCursorStyle(): void;
+export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number): void;
+export {};

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

@@ -201,8 +201,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -248,6 +263,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -255,6 +273,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -495,7 +517,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1970,7 +1992,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2407,6 +2429,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2416,3 +2440,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.browser.cjs.js";

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

@@ -207,8 +207,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -254,6 +269,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -261,6 +279,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -501,7 +523,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -2076,7 +2098,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2513,6 +2535,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2522,3 +2546,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.browser.development.cjs.js";

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

@@ -183,8 +183,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -230,6 +245,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -237,6 +255,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -477,7 +499,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -2052,7 +2074,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2485,4 +2507,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

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

@@ -177,8 +177,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -224,6 +239,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -231,6 +249,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -471,7 +493,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1946,7 +1968,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2379,4 +2401,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

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

@@ -203,8 +203,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -250,6 +265,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -257,6 +275,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -497,7 +519,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1972,7 +1994,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2409,6 +2431,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2418,3 +2442,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.cjs.js";

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

@@ -214,8 +214,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -261,6 +276,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -268,6 +286,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -508,7 +530,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -2083,7 +2105,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2520,6 +2542,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2529,3 +2553,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.development.cjs.js";

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

@@ -190,8 +190,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -237,6 +252,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -244,6 +262,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -484,7 +506,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -2059,7 +2081,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2492,4 +2514,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

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

@@ -176,8 +176,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -223,6 +238,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -230,6 +248,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -470,7 +492,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1851,7 +1873,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2285,6 +2307,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2294,3 +2318,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.development.node.cjs.js";

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

@@ -152,8 +152,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -199,6 +214,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -206,6 +224,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -446,7 +468,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1827,7 +1849,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2257,4 +2279,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

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

@@ -179,8 +179,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -226,6 +241,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -233,6 +251,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -473,7 +495,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1948,7 +1970,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2381,4 +2403,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

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

@@ -165,8 +165,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -212,6 +227,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -219,6 +237,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -459,7 +481,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1750,7 +1772,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2184,6 +2206,8 @@ exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.disableGlobalCursorStyles = disableGlobalCursorStyles;
+exports.enableGlobalCursorStyles = enableGlobalCursorStyles;
 exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
@@ -2193,3 +2217,4 @@ exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
 exports.intersects = intersects;
+exports.setNonce = setNonce;

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

@@ -3,6 +3,8 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
   getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
@@ -11,5 +13,6 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
-  intersects
+  intersects,
+  setNonce
 } from "./react-resizable-panels.node.cjs.js";

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

@@ -141,8 +141,23 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let nonce;
+function getNonce() {
+  return nonce;
+}
+function setNonce(value) {
+  nonce = value;
+}
+
 let currentCursorStyle = null;
+let enabled = true;
 let styleElement = null;
+function disableGlobalCursorStyles() {
+  enabled = false;
+}
+function enableGlobalCursorStyles() {
+  enabled = true;
+}
 function getCursorStyle(state, constraintFlags) {
   if (constraintFlags) {
     const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
@@ -188,6 +203,9 @@ function resetGlobalCursorStyle() {
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  if (!enabled) {
+    return;
+  }
   const style = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle === style) {
     return;
@@ -195,6 +213,10 @@ function setGlobalCursorStyle(state, constraintFlags) {
   currentCursorStyle = style;
   if (styleElement === null) {
     styleElement = document.createElement("style");
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
     document.head.appendChild(styleElement);
   }
   styleElement.innerHTML = `*{cursor: ${style}!important;}`;
@@ -435,7 +457,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1726,7 +1748,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {
@@ -2156,4 +2178,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };
+export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };

package/package.json

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

package/src/PanelGroup.ts

@@ -676,7 +676,7 @@ function PanelGroupWithForwardedRef({
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
 
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/src/PanelResizeHandle.test.tsx

@@ -336,13 +336,32 @@ describe("PanelResizeHandle", () => {
     expect(onDraggingLeft).toHaveBeenCalledWith(true);
 
     expect(cursorUtils.resetGlobalCursorStyle).not.toHaveBeenCalled();
-    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalled();
+
+    onDraggingLeft.mockReset();
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+    expect(onDraggingLeft).not.toHaveBeenCalled();
+
+    act(() => {
+      dispatchPointerEvent("pointerup", leftElement);
+    });
+    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+    expect(onDraggingLeft).toHaveBeenCalledWith(false);
+
+    onDraggingLeft.mockReset();
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+    expect(onDraggingLeft).not.toHaveBeenCalled();
 
     act(() => {
       root.unmount();
     });
 
     expect(cursorUtils.resetGlobalCursorStyle).toHaveBeenCalled();
-    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
   });
 });

package/src/PanelResizeHandleRegistry.ts

@@ -109,7 +109,7 @@ function handlePointerMove(event: PointerEvent) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
 
     updateResizeHandlerStates("up", event);

package/src/index.ts

@@ -2,6 +2,11 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 import { assert } from "./utils/assert";
+import { setNonce } from "./utils/csp";
+import {
+  enableGlobalCursorStyles,
+  disableGlobalCursorStyles,
+} from "./utils/cursor";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
@@ -64,4 +69,9 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
+
+  // Styles and CSP (see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
+  enableGlobalCursorStyles,
+  disableGlobalCursorStyles,
+  setNonce,
 };

package/src/utils/csp.ts

@@ -0,0 +1,9 @@
+let nonce: string | null;
+
+export function getNonce(): string | null {
+  return nonce;
+}
+
+export function setNonce(value: string | null) {
+  nonce = value;
+}

package/src/utils/cursor.ts

@@ -4,12 +4,22 @@ import {
   EXCEEDED_VERTICAL_MAX,
   EXCEEDED_VERTICAL_MIN,
 } from "../PanelResizeHandleRegistry";
+import { getNonce } from "./csp";
 
 type CursorState = "horizontal" | "intersection" | "vertical";
 
 let currentCursorStyle: string | null = null;
+let enabled: boolean = true;
 let styleElement: HTMLStyleElement | null = null;
 
+export function disableGlobalCursorStyles() {
+  enabled = false;
+}
+
+export function enableGlobalCursorStyles() {
+  enabled = true;
+}
+
 export function getCursorStyle(
   state: CursorState,
   constraintFlags: number
@@ -66,6 +76,10 @@ export function setGlobalCursorStyle(
   state: CursorState,
   constraintFlags: number
 ) {
+  if (!enabled) {
+    return;
+  }
+
   const style = getCursorStyle(state, constraintFlags);
 
   if (currentCursorStyle === style) {
@@ -77,6 +91,11 @@ export function setGlobalCursorStyle(
   if (styleElement === null) {
     styleElement = document.createElement("style");
 
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
+
     document.head.appendChild(styleElement);
   }