react-resizable-panels 2.0.22 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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)
+
 ## 2.0.22
 
 - Force eager layout re-calculation after panel added/removed (#375)

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

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -45,8 +45,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -45,8 +45,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -21,8 +21,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -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;}`;
@@ -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

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -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;}`;
@@ -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

@@ -21,8 +21,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -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;}`;
@@ -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

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -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;}`;
@@ -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

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -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;}`;
@@ -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.22",
+  "version": "2.1.0",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

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);
   }
 

package/src/vendor/react.ts

@@ -36,8 +36,10 @@ const {
   useState,
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = (React as any)["useId".toString()] as () => string;
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = (React as any)[
+  `useId${Math.random()}`.slice(0, 5)
+] as () => string;
 
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;