npm - react-resizable-panels - Versions diffs - 2.0.8 → 2.0.10 - Mend

react-resizable-panels 2.0.8 → 2.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/CHANGELOG.md +9 -0
package/dist/declarations/src/utils/assert.d.ts +1 -1
package/dist/react-resizable-panels.browser.cjs.js +158 -53
package/dist/react-resizable-panels.browser.development.cjs.js +160 -55
package/dist/react-resizable-panels.browser.development.esm.js +159 -54
package/dist/react-resizable-panels.browser.esm.js +157 -52
package/dist/react-resizable-panels.cjs.js +158 -53
package/dist/react-resizable-panels.development.cjs.js +160 -55
package/dist/react-resizable-panels.development.esm.js +159 -54
package/dist/react-resizable-panels.development.node.cjs.js +156 -51
package/dist/react-resizable-panels.development.node.esm.js +155 -50
package/dist/react-resizable-panels.esm.js +157 -52
package/dist/react-resizable-panels.node.cjs.js +154 -49
package/dist/react-resizable-panels.node.esm.js +153 -48
package/package.json +1 -4
package/src/Panel.test.tsx +23 -23
package/src/PanelGroup.test.tsx +32 -3
package/src/PanelGroup.ts +25 -7
package/src/PanelResizeHandle.test.tsx +3 -3
package/src/PanelResizeHandle.ts +1 -1
package/src/PanelResizeHandleRegistry.ts +2 -2
package/src/hooks/useWindowSplitterBehavior.ts +5 -2
package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +5 -5
package/src/utils/adjustLayoutByDelta.ts +47 -20
package/src/utils/assert.ts +1 -1
package/src/utils/calculateAriaValues.ts +1 -1
package/src/utils/calculateDragOffsetPercentage.ts +6 -3
package/src/utils/calculateUnsafeDefaultLayout.ts +2 -2
package/src/utils/callPanelCallbacks.ts +1 -1
package/src/utils/resizePanel.ts +4 -1
package/src/utils/test-utils.ts +1 -1
package/src/utils/validatePanelConstraints.ts +4 -1
package/src/utils/validatePanelGroupLayout.ts +3 -3
package/src/vendor/stacking-order.ts +133 -0

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
-var stackingOrder = require('stacking-order');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -310,6 +309,114 @@ function intersects(rectOne, rectTwo, strict) {
   }
 }
+// Forked from NPM stacking-order@2.0.0
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+function compare(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b)
+  };
+  let common_ancestor;
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+/** @param {HTMLElement} node */
+function is_flex_item(node) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+/** @param {HTMLElement} node */
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node, "Missing node");
+    if (creates_stacking_context(node)) return node;
+  }
+  return null;
+}
+/** @param {HTMLElement} node */
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+/** @param {HTMLElement} node */
+function get_parent(node) {
+  var _node$parentNode;
+  // @ts-ignore
+  return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
+}
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -451,7 +558,7 @@ function recalculateIntersectingHandles({
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM
-      stackingOrder.compare(targetElement, dragHandleElement) > 0) {
+      compare(targetElement, dragHandleElement) > 0) {
         // If the target is above the drag handle, then we also need to confirm they overlap
         // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
         //
@@ -522,7 +629,7 @@ function updateListeners() {
   window.removeEventListener("mouseup", handlePointerUp);
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {
@@ -569,7 +676,7 @@ function updateResizeHandlerStates(action, event) {
   });
 }
-function assert(expectedCondition, message = "Assertion failed!") {
+function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
     throw Error(message);
@@ -600,7 +707,7 @@ function resizePanel({
   size
 }) {
   const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(panelConstraints != null);
+  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
   let {
     collapsedSize = 0,
     collapsible,
@@ -638,8 +745,8 @@ function adjustLayoutByDelta({
   }
   const nextLayout = [...prevLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-  assert(firstPivotIndex != null);
-  assert(secondPivotIndex != null);
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
   let deltaApplied = 0;
   //const DEBUG = [];
@@ -665,19 +772,18 @@ function adjustLayoutByDelta({
         // Check if we should expand a collapsed panel
         const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `Panel constraints not found for index ${index}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (panelConstraints.collapsible) {
+        if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -694,22 +800,18 @@ function adjustLayoutByDelta({
         // Check if we should collapse a panel at its minimum size
         const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `No panel constraints found for index ${index}`);
         const {
-          collapsible
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
         } = panelConstraints;
         //DEBUG.push(`edge case check 2: ${index}`);
         //DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -739,7 +841,7 @@ function adjustLayoutByDelta({
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
         panelIndex: index,
@@ -770,7 +872,7 @@ function adjustLayoutByDelta({
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -807,7 +909,7 @@ function adjustLayoutByDelta({
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
     const prevSize = prevLayout[pivotIndex];
-    assert(prevSize != null);
+    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
       panelConstraints: panelConstraintsArray,
@@ -825,7 +927,7 @@ function adjustLayoutByDelta({
       let index = pivotIndex;
       while (index >= 0 && index < panelConstraintsArray.length) {
         const prevSize = nextLayout[index];
-        assert(prevSize != null);
+        assert(prevSize != null, `Previous layout not found for panel index ${index}`);
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({
           panelConstraints: panelConstraintsArray,
@@ -871,7 +973,7 @@ function calculateAriaValues({
   let totalMinSize = 0;
   let totalMaxSize = 0;
   const firstIndex = pivotIndices[0];
-  assert(firstIndex != null);
+  assert(firstIndex != null, "No pivot index found");
   // A panel's effective min/max sizes also need to account for other panel's sizes.
   panelsArray.forEach((panelData, index) => {
@@ -990,7 +1092,7 @@ function useWindowSplitterPanelGroupBehavior({
         }
       } else {
         const panelData = panelDataArray[index];
-        assert(panelData);
+        assert(panelData, `No panel data found for index "${index}"`);
         resizeHandleElement.setAttribute("aria-controls", panelData.id);
         resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
         resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
@@ -1011,17 +1113,17 @@ function useWindowSplitterPanelGroupBehavior({
       return;
     }
     const eagerValues = eagerValuesRef.current;
-    assert(eagerValues);
+    assert(eagerValues, `Eager values not found`);
     const {
       panelDataArray
     } = eagerValues;
     const groupElement = getPanelGroupElement(groupId, panelGroupElement);
     assert(groupElement != null, `No group found for id "${groupId}"`);
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles);
+    assert(handles, `No resize handles found for group id "${groupId}"`);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      assert(handleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
         return () => {};
@@ -1037,7 +1139,7 @@ function useWindowSplitterPanelGroupBehavior({
               const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
               if (index >= 0) {
                 const panelData = panelDataArray[index];
-                assert(panelData);
+                assert(panelData, `No panel data found for index ${index}`);
                 const size = layout[index];
                 const {
                   collapsedSize = 0,
@@ -1096,15 +1198,15 @@ function getResizeEventCursorPosition(direction, event) {
 function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
-  assert(handleElement);
+  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
   const groupId = handleElement.getAttribute("data-panel-group-id");
-  assert(groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
   let {
     initialCursorPosition
   } = initialDragState;
   const cursorPosition = getResizeEventCursorPosition(direction, event);
   const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-  assert(groupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
   const offsetPixels = cursorPosition - initialCursorPosition;
@@ -1165,7 +1267,7 @@ function calculateUnsafeDefaultLayout({
   // Distribute default sizes first
   for (let index = 0; index < panelDataArray.length; index++) {
     const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
     const {
       defaultSize
     } = panelConstraints;
@@ -1179,7 +1281,7 @@ function calculateUnsafeDefaultLayout({
   // Remaining size should be distributed evenly between panels without default sizes
   for (let index = 0; index < panelDataArray.length; index++) {
     const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
     const {
       defaultSize
     } = panelConstraints;
@@ -1199,7 +1301,7 @@ function calculateUnsafeDefaultLayout({
 function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
   layout.forEach((size, index) => {
     const panelData = panelsArray[index];
-    assert(panelData);
+    assert(panelData, `Panel data not found for index ${index}`);
     const {
       callbacks,
       constraints,
@@ -1383,7 +1485,7 @@ function validatePanelConstraints({
   {
     const warnings = [];
     const panelConstraints = panelConstraintsArray[panelIndex];
-    assert(panelConstraints);
+    assert(panelConstraints, `No panel constraints found for index ${panelIndex}`);
     const {
       collapsedSize = 0,
       collapsible = false,
@@ -1437,7 +1539,7 @@ function validatePanelGroupLayout({
     }
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null);
+      assert(unsafeSize != null, `No layout data found for index ${index}`);
       const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
       nextLayout[index] = safeSize;
     }
@@ -1447,7 +1549,7 @@ function validatePanelGroupLayout({
   // First pass: Validate the proposed layout given each panel's constraints
   for (let index = 0; index < panelConstraints.length; index++) {
     const unsafeSize = nextLayout[index];
-    assert(unsafeSize != null);
+    assert(unsafeSize != null, `No layout data found for index ${index}`);
     const safeSize = resizePanel({
       panelConstraints,
       panelIndex: index,
@@ -1464,7 +1566,7 @@ function validatePanelGroupLayout({
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const prevSize = nextLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `No layout data found for index ${index}`);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
         panelConstraints,
@@ -1641,7 +1743,7 @@ function PanelGroupWithForwardedRef({
         const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
         for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
           const panelData = panelDataArray[panelIndex];
-          assert(panelData);
+          assert(panelData, `Panel data not found for index ${panelIndex}`);
           const isValid = validatePanelConstraints({
             panelConstraints,
             panelId: panelData.id,
@@ -1672,7 +1774,7 @@ function PanelGroupWithForwardedRef({
         panelSize,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      assert(panelSize != null);
+      assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
       if (panelSize !== collapsedSize) {
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
@@ -1749,7 +1851,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return panelSize;
   }, []);
@@ -1793,7 +1895,7 @@ function PanelGroupWithForwardedRef({
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return !collapsible || panelSize > collapsedSize;
   }, []);
   const registerPanel = useCallback(panelData => {
@@ -1960,7 +2062,7 @@ function PanelGroupWithForwardedRef({
       panelSize,
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
@@ -1997,7 +2099,10 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize: prevPanelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(prevPanelSize != null);
+    if (prevPanelSize == null) {
+      // It's possible that the panels in this group have changed since the last render
+      return;
+    }
     if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
       if (prevCollapsedSize !== nextCollapsedSize) {
         resizePanel(panelData, nextCollapsedSize);
@@ -2019,7 +2124,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
-    assert(handleElement);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
       dragHandleId,
@@ -2148,10 +2253,10 @@ function useWindowSplitterResizeHandlerBehavior({
           {
             event.preventDefault();
             const groupId = handleElement.getAttribute("data-panel-group-id");
-            assert(groupId);
+            assert(groupId, `No group element found for id "${groupId}"`);
             const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
             const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
-            assert(index !== null);
+            assert(index !== null, `No resize element found for id "${handleId}"`);
             const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
             const nextHandle = handles[nextIndex];
             nextHandle.focus();
@@ -2223,7 +2328,7 @@ function PanelResizeHandle({
       return;
     }
     const element = elementRef.current;
-    assert(element);
+    assert(element, "Element ref not attached");
     const setResizeHandlerState = (action, isActive, event) => {
       if (isActive) {
         switch (action) {