react-resizable-panels 2.1.8 → 3.0.0

package/dist/{react-resizable-panels.node.esm.js → react-resizable-panels.node.js}

@@ -6,6 +6,22 @@ import { createContext, useRef, forwardRef, createElement, useContext, useImpera
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
+const DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandle: "data-resize-handle",
+  resizeHandleActive: "data-resize-handle-active",
+  resizeHandleEnabled: "data-panel-resize-handle-enabled",
+  resizeHandleId: "data-panel-resize-handle-id",
+  resizeHandleState: "data-resize-handle-state"
+};
+const PRECISION = 10;
+
 const useId = React["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -107,11 +123,11 @@ function PanelWithForwardedRef({
       ...styleFromProps
     },
     // CSS selectors
-    "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
-    "data-panel-group-id": groupId,
-    "data-panel-id": panelId,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.panel]: "",
+    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || undefined,
+    [DATA_ATTRIBUTES.panelId]: panelId,
+    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -131,6 +147,7 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let prevRuleIndex = -1;
 let styleElement = null;
 function disableGlobalCursorStyles() {
   enabled = false;
@@ -180,9 +197,11 @@ function resetGlobalCursorStyle() {
     document.head.removeChild(styleElement);
     currentCursorStyle = null;
     styleElement = null;
+    prevRuleIndex = -1;
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
@@ -199,7 +218,11 @@ function setGlobalCursorStyle(state, constraintFlags) {
     }
     document.head.appendChild(styleElement);
   }
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+  if (prevRuleIndex >= 0) {
+    var _styleElement$sheet;
+    (_styleElement$sheet = styleElement.sheet) === null || _styleElement$sheet === void 0 ? void 0 : _styleElement$sheet.removeRule(prevRuleIndex);
+  }
+  prevRuleIndex = (_styleElement$sheet$i = (_styleElement$sheet2 = styleElement.sheet) === null || _styleElement$sheet2 === void 0 ? void 0 : _styleElement$sheet2.insertRule(`*{cursor: ${style} !important;}`)) !== null && _styleElement$sheet$i !== void 0 ? _styleElement$sheet$i : -1;
 }
 
 function isKeyDown(event) {
@@ -430,7 +453,9 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
-    event.stopPropagation();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
   }
 }
 function handlePointerMove(event) {
@@ -479,6 +504,9 @@ function handlePointerUp(event) {
   isPointerDown = false;
   if (intersectingHandles.length > 0) {
     event.preventDefault();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
   }
   updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
@@ -489,6 +517,16 @@ function handlePointerUp(event) {
   updateCursor();
   updateListeners();
 }
+function isWithinResizeHandle(element) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
 function recalculateIntersectingHandles({
   target,
   x,
@@ -580,49 +618,47 @@ function updateCursor() {
     resetGlobalCursorStyle();
   }
 }
+let listenersAbortController = new AbortController();
 function updateListeners() {
-  ownerDocumentCounts.forEach((_, ownerDocument) => {
-    const {
-      body
-    } = ownerDocument;
-    body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown, {
-      capture: true
-    });
-    body.removeEventListener("pointerleave", handlePointerMove);
-    body.removeEventListener("pointermove", handlePointerMove);
-  });
-  window.removeEventListener("pointerup", handlePointerUp);
-  window.removeEventListener("pointercancel", handlePointerUp);
-  if (registeredResizeHandlers.size > 0) {
-    if (isPointerDown) {
-      if (intersectingHandles.length > 0) {
-        ownerDocumentCounts.forEach((count, ownerDocument) => {
-          const {
-            body
-          } = ownerDocument;
-          if (count > 0) {
-            body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("pointerleave", handlePointerMove);
-            body.addEventListener("pointermove", handlePointerMove);
-          }
-        });
-      }
-      window.addEventListener("pointerup", handlePointerUp);
-      window.addEventListener("pointercancel", handlePointerUp);
-    } else {
+  listenersAbortController.abort();
+  listenersAbortController = new AbortController();
+  const options = {
+    capture: true,
+    signal: listenersAbortController.signal
+  };
+  if (!registeredResizeHandlers.size) {
+    return;
+  }
+  if (isPointerDown) {
+    if (intersectingHandles.length > 0) {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const {
           body
         } = ownerDocument;
         if (count > 0) {
-          body.addEventListener("pointerdown", handlePointerDown, {
-            capture: true
-          });
-          body.addEventListener("pointermove", handlePointerMove);
+          body.addEventListener("contextmenu", handlePointerUp, options);
+          body.addEventListener("pointerleave", handlePointerMove, options);
+          body.addEventListener("pointermove", handlePointerMove, options);
         }
       });
     }
+    ownerDocumentCounts.forEach((_, ownerDocument) => {
+      const {
+        body
+      } = ownerDocument;
+      body.addEventListener("pointerup", handlePointerUp, options);
+      body.addEventListener("pointercancel", handlePointerUp, options);
+    });
+  } else {
+    ownerDocumentCounts.forEach((count, ownerDocument) => {
+      const {
+        body
+      } = ownerDocument;
+      if (count > 0) {
+        body.addEventListener("pointerdown", handlePointerDown, options);
+        body.addEventListener("pointermove", handlePointerMove, options);
+      }
+    });
   }
 }
 function updateResizeHandlerStates(action, event) {
@@ -647,8 +683,6 @@ function assert(expectedCondition, message) {
   }
 }
 
-const PRECISION = 10;
-
 function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
   if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
     return 0;
@@ -953,12 +987,12 @@ function adjustLayoutByDelta({
 }
 
 function getResizeHandleElementsForGroup(groupId, scope = document) {
-  return Array.from(scope.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+  return Array.from(scope.querySelectorAll(`[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`));
 }
 
 function getResizeHandleElementIndex(groupId, id, scope = document) {
   const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
+  const index = handles.findIndex(handle => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === id);
   return index !== null && index !== void 0 ? index : null;
 }
 
@@ -983,7 +1017,7 @@ function getPanelGroupElement(id, rootElement = document) {
 }
 
 function getResizeHandleElement(id, scope = document) {
-  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id}"]`);
   if (element) {
     return element;
   }
@@ -1028,7 +1062,7 @@ function useWindowSplitterPanelGroupBehavior({
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
     assert(handles, `No resize handles found for group id "${groupId}"`);
     const cleanupFunctions = handles.map(handle => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
       assert(handleId, `Resize handle element has no handle id attribute`);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
@@ -1106,7 +1140,7 @@ function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDr
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
   assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
-  const groupId = handleElement.getAttribute("data-panel-group-id");
+  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
   assert(groupId, `Resize handle element has no group id attribute`);
   let {
     initialCursorPosition
@@ -1911,9 +1945,9 @@ function PanelGroupWithForwardedRef({
       ...styleFromProps
     },
     // CSS selectors
-    "data-panel-group": "",
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId
+    [DATA_ATTRIBUTES.group]: "",
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId
   }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
@@ -1972,7 +2006,7 @@ function useWindowSplitterResizeHandlerBehavior({
         case "F6":
           {
             event.preventDefault();
-            const groupId = handleElement.getAttribute("data-panel-group-id");
+            const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
             assert(groupId, `No group element found for id "${groupId}"`);
             const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
             const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
@@ -2064,54 +2098,54 @@ function PanelResizeHandle({
     assert(element, "Element ref not attached");
     let didMove = false;
     const setResizeHandlerState = (action, isActive, event) => {
-      if (isActive) {
-        switch (action) {
-          case "down":
-            {
-              setState("drag");
-              didMove = false;
-              assert(event, 'Expected event to be defined for "down" action');
-              startDragging(resizeHandleId, event);
-              const {
-                onDragging,
-                onPointerDown
-              } = callbacksRef.current;
-              onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
-              onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
-              break;
-            }
-          case "move":
-            {
-              const {
-                state
-              } = committedValuesRef.current;
-              didMove = true;
-              if (state !== "drag") {
-                setState("hover");
-              }
-              assert(event, 'Expected event to be defined for "move" action');
-              resizeHandler(event);
-              break;
-            }
-          case "up":
-            {
+      if (!isActive) {
+        setState("inactive");
+        return;
+      }
+      switch (action) {
+        case "down":
+          {
+            setState("drag");
+            didMove = false;
+            assert(event, 'Expected event to be defined for "down" action');
+            startDragging(resizeHandleId, event);
+            const {
+              onDragging,
+              onPointerDown
+            } = callbacksRef.current;
+            onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
+            break;
+          }
+        case "move":
+          {
+            const {
+              state
+            } = committedValuesRef.current;
+            didMove = true;
+            if (state !== "drag") {
               setState("hover");
-              stopDragging();
-              const {
-                onClick,
-                onDragging,
-                onPointerUp
-              } = callbacksRef.current;
-              onDragging === null || onDragging === void 0 ? void 0 : onDragging(false);
-              onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp();
-              if (!didMove) {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-              }
-              break;
             }
-        }
-      } else {
-        setState("inactive");
+            assert(event, 'Expected event to be defined for "move" action');
+            resizeHandler(event);
+            break;
+          }
+        case "up":
+          {
+            setState("hover");
+            stopDragging();
+            const {
+              onClick,
+              onDragging,
+              onPointerUp
+            } = callbacksRef.current;
+            onDragging === null || onDragging === void 0 ? void 0 : onDragging(false);
+            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp();
+            if (!didMove) {
+              onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+            break;
+          }
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
@@ -2150,17 +2184,25 @@ function PanelResizeHandle({
     },
     tabIndex,
     // CSS selectors
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-resize-handle": "",
-    "data-resize-handle-active": state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
-    "data-resize-handle-state": state,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.resizeHandle]: "",
+    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
+    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
+    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleState]: state
   });
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
+function usePanelGroupContext() {
+  const context = useContext(PanelGroupContext);
+  return {
+    direction: context === null || context === void 0 ? void 0 : context.direction,
+    groupId: context === null || context === void 0 ? void 0 : context.groupId
+  };
+}
+
 function getPanelElement(id, scope = document) {
   const element = scope.querySelector(`[data-panel-id="${id}"]`);
   if (element) {
@@ -2190,4 +2232,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce };
+export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.8",
+  "version": "3.0.0",
+  "type": "module",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -9,8 +10,6 @@
     "url": "git+https://github.com/bvaughn/react-resizable-panels.git"
   },
   "source": "src/index.ts",
-  "main": "dist/react-resizable-panels.cjs.js",
-  "module": "dist/react-resizable-panels.esm.js",
   "files": [
     "dist",
     "package.json",
@@ -19,38 +18,15 @@
   ],
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/react-resizable-panels.cjs.mjs",
-        "default": "./dist/react-resizable-panels.cjs.js"
-      },
+      "types": "./dist/react-resizable-panels.js",
       "development": {
-        "browser": {
-          "module": "./dist/react-resizable-panels.browser.development.esm.js",
-          "import": "./dist/react-resizable-panels.browser.development.cjs.mjs",
-          "default": "./dist/react-resizable-panels.browser.development.cjs.js"
-        },
-        "node": {
-          "module": "./dist/react-resizable-panels.development.node.esm.js",
-          "import": "./dist/react-resizable-panels.development.node.cjs.mjs",
-          "default": "./dist/react-resizable-panels.development.node.cjs.js"
-        },
-        "module": "./dist/react-resizable-panels.development.esm.js",
-        "import": "./dist/react-resizable-panels.development.cjs.mjs",
-        "default": "./dist/react-resizable-panels.development.cjs.js"
-      },
-      "browser": {
-        "module": "./dist/react-resizable-panels.browser.esm.js",
-        "import": "./dist/react-resizable-panels.browser.cjs.mjs",
-        "default": "./dist/react-resizable-panels.browser.cjs.js"
-      },
-      "node": {
-        "module": "./dist/react-resizable-panels.node.esm.js",
-        "import": "./dist/react-resizable-panels.node.cjs.mjs",
-        "default": "./dist/react-resizable-panels.node.cjs.js"
+        "browser": "./dist/react-resizable-panels.browser.development.js",
+        "node": "./dist/react-resizable-panels.development.node.js",
+        "default": "./dist/react-resizable-panels.development.js"
       },
-      "module": "./dist/react-resizable-panels.esm.js",
-      "import": "./dist/react-resizable-panels.cjs.mjs",
-      "default": "./dist/react-resizable-panels.cjs.js"
+      "browser": "./dist/react-resizable-panels.browser.js",
+      "node": "./dist/react-resizable-panels.node.js",
+      "default": "./dist/react-resizable-panels.js"
     },
     "./package.json": "./package.json"
   },
@@ -66,24 +42,17 @@
     }
   },
   "types": "dist/react-resizable-panels.cjs.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": "jest --config=jest.config.js",
-    "test:watch": "jest --config=jest.config.js --watch",
-    "watch": "parcel watch --port=2345"
-  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@vitest/ui": "^3.1.2",
     "eslint": "^8.37.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
     "react": "experimental",
-    "react-dom": "experimental"
+    "react-dom": "experimental",
+    "save-dev": "0.0.1-security",
+    "vitest": "^3.1.2"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -91,5 +60,14 @@
   },
   "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"
+  }
+}