react-resizable-panels 2.0.4 → 2.0.6

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { compare } from 'stacking-order';
 
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
@@ -21,11 +22,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -270,6 +272,14 @@ function getInputType() {
   }
 }
 
+function intersects(rectOne, rectTwo, strict) {
+  if (strict) {
+    return rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y;
+  } else {
+    return rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
+  }
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -308,12 +318,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -329,10 +343,15 @@ function handlePointerMove(event) {
     y
   } = getResizeEventCoordinates(event);
   if (!isPointerDown) {
+    const {
+      target
+    } = event;
+
     // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
     // at that point, the handles may not move with the pointer (depending on constraints)
     // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
+      target,
       x,
       y
     });
@@ -346,6 +365,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -355,33 +377,72 @@ function handlePointerUp(event) {
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
+  updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
-  updateResizeHandlerStates("up", event);
   updateCursor();
   updateListeners();
 }
 function recalculateIntersectingHandles({
+  target,
   x,
   y
 }) {
   intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
   registeredResizeHandlers.forEach(data => {
     const {
-      element,
+      element: dragHandleElement,
       hitAreaMargins
     } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
     const {
       bottom,
       left,
       right,
       top
-    } = element.getBoundingClientRect();
+    } = dragHandleRect;
     const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
-    const intersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
-    if (intersects) {
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (eventIntersects) {
+      // TRICKY
+      // We listen for pointers events at the root in order to support hit area margins
+      // (determining when the pointer is close enough to an element to be considered a "hit")
+      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
+      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
+      // and the element that was actually clicked/touched
+      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      // 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
+      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
+        //
+        // It's not enough to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, true)) {
+            didIntersect = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (didIntersect) {
+          return;
+        }
+      }
       intersectingHandles.push(data);
     }
   });
@@ -2014,7 +2075,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {
@@ -2129,4 +2190,21 @@ function getPanelElementsForGroup(groupId, scope = document) {
   return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };
+function getIntersectingRectangle(rectOne, rectTwo, strict) {
+  if (!intersects(rectOne, rectTwo, strict)) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  return {
+    x: Math.max(rectOne.x, rectTwo.x),
+    y: Math.max(rectOne.y, rectTwo.y),
+    width: Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) - Math.max(rectOne.x, rectTwo.x),
+    height: Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) - Math.max(rectOne.y, rectTwo.y)
+  };
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects };

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var stackingOrder = require('stacking-order');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -47,11 +48,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -296,6 +298,14 @@ function getInputType() {
   }
 }
 
+function intersects(rectOne, rectTwo, strict) {
+  if (strict) {
+    return rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y;
+  } else {
+    return rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
+  }
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -334,12 +344,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -355,10 +369,15 @@ function handlePointerMove(event) {
     y
   } = getResizeEventCoordinates(event);
   if (!isPointerDown) {
+    const {
+      target
+    } = event;
+
     // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
     // at that point, the handles may not move with the pointer (depending on constraints)
     // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
+      target,
       x,
       y
     });
@@ -372,6 +391,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -381,33 +403,72 @@ function handlePointerUp(event) {
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
+  updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
-  updateResizeHandlerStates("up", event);
   updateCursor();
   updateListeners();
 }
 function recalculateIntersectingHandles({
+  target,
   x,
   y
 }) {
   intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
   registeredResizeHandlers.forEach(data => {
     const {
-      element,
+      element: dragHandleElement,
       hitAreaMargins
     } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
     const {
       bottom,
       left,
       right,
       top
-    } = element.getBoundingClientRect();
+    } = dragHandleRect;
     const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
-    const intersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
-    if (intersects) {
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (eventIntersects) {
+      // TRICKY
+      // We listen for pointers events at the root in order to support hit area margins
+      // (determining when the pointer is close enough to an element to be considered a "hit")
+      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
+      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
+      // and the element that was actually clicked/touched
+      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      // 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) {
+        // 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
+        //
+        // It's not enough to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, true)) {
+            didIntersect = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (didIntersect) {
+          return;
+        }
+      }
       intersectingHandles.push(data);
     }
   });
@@ -2040,7 +2101,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {
@@ -2155,10 +2216,28 @@ function getPanelElementsForGroup(groupId, scope = document) {
   return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
+function getIntersectingRectangle(rectOne, rectTwo, strict) {
+  if (!intersects(rectOne, rectTwo, strict)) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  return {
+    x: Math.max(rectOne.x, rectTwo.x),
+    y: Math.max(rectOne.y, rectTwo.y),
+    width: Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) - Math.max(rectOne.x, rectTwo.x),
+    height: Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) - Math.max(rectOne.y, rectTwo.y)
+  };
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;
@@ -2166,3 +2245,4 @@ exports.getResizeHandleElement = getResizeHandleElement;
 exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
+exports.intersects = intersects;

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

@@ -3,11 +3,13 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,
   getResizeHandleElement,
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
-  getResizeHandlePanelIds
+  getResizeHandlePanelIds,
+  intersects
 } from "./react-resizable-panels.cjs.js";

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var stackingOrder = require('stacking-order');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -47,11 +48,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -307,6 +309,14 @@ function getInputType() {
   }
 }
 
+function intersects(rectOne, rectTwo, strict) {
+  if (strict) {
+    return rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y;
+  } else {
+    return rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
+  }
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -345,12 +355,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -366,10 +380,15 @@ function handlePointerMove(event) {
     y
   } = getResizeEventCoordinates(event);
   if (!isPointerDown) {
+    const {
+      target
+    } = event;
+
     // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
     // at that point, the handles may not move with the pointer (depending on constraints)
     // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
+      target,
       x,
       y
     });
@@ -383,6 +402,9 @@ function handlePointerMove(event) {
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -392,33 +414,72 @@ function handlePointerUp(event) {
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
+  updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
-  updateResizeHandlerStates("up", event);
   updateCursor();
   updateListeners();
 }
 function recalculateIntersectingHandles({
+  target,
   x,
   y
 }) {
   intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
   registeredResizeHandlers.forEach(data => {
     const {
-      element,
+      element: dragHandleElement,
       hitAreaMargins
     } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
     const {
       bottom,
       left,
       right,
       top
-    } = element.getBoundingClientRect();
+    } = dragHandleRect;
     const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
-    const intersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
-    if (intersects) {
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (eventIntersects) {
+      // TRICKY
+      // We listen for pointers events at the root in order to support hit area margins
+      // (determining when the pointer is close enough to an element to be considered a "hit")
+      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
+      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
+      // and the element that was actually clicked/touched
+      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      // 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) {
+        // 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
+        //
+        // It's not enough to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, true)) {
+            didIntersect = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (didIntersect) {
+          return;
+        }
+      }
       intersectingHandles.push(data);
     }
   });
@@ -2151,7 +2212,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {
@@ -2266,10 +2327,28 @@ function getPanelElementsForGroup(groupId, scope = document) {
   return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
+function getIntersectingRectangle(rectOne, rectTwo, strict) {
+  if (!intersects(rectOne, rectTwo, strict)) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  return {
+    x: Math.max(rectOne.x, rectTwo.x),
+    y: Math.max(rectOne.y, rectTwo.y),
+    width: Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) - Math.max(rectOne.x, rectTwo.x),
+    height: Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) - Math.max(rectOne.y, rectTwo.y)
+  };
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.getIntersectingRectangle = getIntersectingRectangle;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;
@@ -2277,3 +2356,4 @@ exports.getResizeHandleElement = getResizeHandleElement;
 exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
 exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
 exports.getResizeHandlePanelIds = getResizeHandlePanelIds;
+exports.intersects = intersects;

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

@@ -3,11 +3,13 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
+  getIntersectingRectangle,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,
   getResizeHandleElement,
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
-  getResizeHandlePanelIds
+  getResizeHandlePanelIds,
+  intersects
 } from "./react-resizable-panels.development.cjs.js";