react-resizable-panels 2.0.3 → 2.0.5

package/dist/react-resizable-panels.node.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
 
@@ -235,6 +236,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;
@@ -273,12 +282,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
   };
 }
 function handlePointerDown(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
   recalculateIntersectingHandles({
+    target,
     x,
     y
   });
@@ -293,29 +306,32 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
+  if (!isPointerDown) {
+    const {
+      target
+    } = event;
 
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+    // 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
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
 }
 function handlePointerUp(event) {
+  const {
+    target
+  } = event;
   const {
     x,
     y
@@ -325,33 +341,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);
     }
   });
@@ -443,15 +498,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -1804,6 +1852,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -1819,38 +1873,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            const {
-              onDragging
-            } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(true);
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
             }
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            const {
-              onDragging
-            } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(false);
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
             }
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
@@ -1907,4 +1970,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -66,6 +66,9 @@
     "test:watch": "jest --config=jest.config.js --watch",
     "watch": "parcel watch --port=2345"
   },
+  "dependencies": {
+    "stacking-order": "^1"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",

package/src/Panel.test.tsx

@@ -5,6 +5,7 @@ import { assert } from "./utils/assert";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
@@ -675,6 +676,68 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel", "");
+      verifyAttribute(leftElement, "data-panel-id", "left-panel");
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(leftElement, "data-panel-collapsible", null);
+
+      verifyAttribute(rightElement, "data-panel", "");
+      verifyAttribute(rightElement, "data-panel-id", "right-panel");
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+      verifyAttribute(rightElement, "data-panel-collapsible", "true");
+    });
+
+    it("should update the data-panel-size attribute when the panel resizes", () => {
+      const leftPanelRef = createRef<ImperativePanelHandle>();
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" ref={leftPanelRef} />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+
+      act(() => {
+        leftPanelRef.current?.resize(30);
+      });
+
+      verifyAttribute(leftElement, "data-panel-size", "30.0");
+      verifyAttribute(rightElement, "data-panel-size", "70.0");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

package/src/PanelGroup.test.tsx

@@ -13,7 +13,10 @@ import {
 } from ".";
 import { assert } from "./utils/assert";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
-import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
+import {
+  mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
+} from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
 describe("PanelGroup", () => {
@@ -256,6 +259,23 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group"></PanelGroup>
+        );
+      });
+
+      const element = getPanelGroupElement("test-group", container);
+      assert(element);
+
+      verifyAttribute(element, "data-panel-group", "");
+      verifyAttribute(element, "data-panel-group-direction", "horizontal");
+      verifyAttribute(element, "data-panel-group-id", "test-group");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

package/src/PanelResizeHandle.test.tsx

@@ -1,9 +1,14 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
+import type { PanelResizeHandleProps } from "react-resizable-panels";
 import { Panel, PanelGroup, PanelResizeHandle } from ".";
 import { assert } from "./utils/assert";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
-import { dispatchPointerEvent } from "./utils/test-utils";
+import {
+  dispatchPointerEvent,
+  mockBoundingClientRect,
+  verifyAttribute,
+} from "./utils/test-utils";
 
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
@@ -67,47 +72,201 @@ describe("PanelResizeHandle", () => {
     expect(element.title).toBe("bar");
   });
 
+  function setupMockedGroup({
+    leftProps = {},
+    rightProps = {},
+  }: {
+    leftProps?: Partial<PanelResizeHandleProps>;
+    rightProps?: Partial<PanelResizeHandleProps>;
+  } = {}) {
+    act(() => {
+      root.render(
+        <PanelGroup direction="horizontal" id="test-group">
+          <Panel />
+          <PanelResizeHandle id="handle-left" tabIndex={1} {...leftProps} />
+          <Panel />
+          <PanelResizeHandle id="handle-right" tabIndex={2} {...rightProps} />
+          <Panel />
+        </PanelGroup>
+      );
+    });
+
+    const leftElement = getResizeHandleElement("handle-left", container);
+    const rightElement = getResizeHandleElement("handle-right", container);
+
+    assert(leftElement);
+    assert(rightElement);
+
+    // JSDom doesn't properly handle bounding rects
+    mockBoundingClientRect(leftElement, {
+      x: 50,
+      y: 0,
+      height: 50,
+      width: 2,
+    });
+    mockBoundingClientRect(rightElement, {
+      x: 100,
+      y: 0,
+      height: 50,
+      width: 2,
+    });
+
+    return {
+      leftElement,
+      rightElement,
+    };
+  }
+
   describe("callbacks", () => {
     describe("onDragging", () => {
-      it("should fire when dragging starts/stops", async () => {
+      it("should fire when dragging starts/stops", () => {
         const onDragging = jest.fn();
 
-        act(() => {
-          root.render(
-            <PanelGroup direction="horizontal">
-              <Panel />
-              <PanelResizeHandle
-                id="handle"
-                onDragging={onDragging}
-                tabIndex={123}
-                title="bar"
-              />
-              <Panel />
-            </PanelGroup>
-          );
+        const { leftElement } = setupMockedGroup({
+          leftProps: { onDragging },
         });
 
-        const handleElement = container.querySelector(
-          '[data-panel-resize-handle-id="handle"]'
-        ) as HTMLElement;
-
         act(() => {
-          dispatchPointerEvent("mouseover", handleElement);
+          dispatchPointerEvent("mousemove", leftElement);
         });
         expect(onDragging).not.toHaveBeenCalled();
 
         act(() => {
-          dispatchPointerEvent("mousedown", handleElement);
+          dispatchPointerEvent("mousedown", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(1);
         expect(onDragging).toHaveBeenCalledWith(true);
 
         act(() => {
-          dispatchPointerEvent("mouseup", handleElement);
+          dispatchPointerEvent("mouseup", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(2);
         expect(onDragging).toHaveBeenCalledWith(false);
       });
+
+      it("should only fire for the handle that has been dragged", () => {
+        const onDraggingLeft = jest.fn();
+        const onDraggingRight = jest.fn();
+
+        const { leftElement } = setupMockedGroup({
+          leftProps: { onDragging: onDraggingLeft },
+          rightProps: { onDragging: onDraggingRight },
+        });
+
+        act(() => {
+          dispatchPointerEvent("mousemove", leftElement);
+        });
+        expect(onDraggingLeft).not.toHaveBeenCalled();
+        expect(onDraggingRight).not.toHaveBeenCalled();
+
+        act(() => {
+          dispatchPointerEvent("mousedown", leftElement);
+        });
+        expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+        expect(onDraggingLeft).toHaveBeenCalledWith(true);
+        expect(onDraggingRight).not.toHaveBeenCalled();
+
+        act(() => {
+          dispatchPointerEvent("mouseup", leftElement);
+        });
+        expect(onDraggingLeft).toHaveBeenCalledTimes(2);
+        expect(onDraggingLeft).toHaveBeenCalledWith(false);
+        expect(onDraggingRight).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-resize-handle", "");
+      verifyAttribute(leftElement, "data-panel-group-direction", "horizontal");
+      verifyAttribute(leftElement, "data-panel-resize-handle-enabled", "true");
+      verifyAttribute(
+        leftElement,
+        "data-panel-resize-handle-id",
+        "handle-left"
+      );
+
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-resize-handle", "");
+      verifyAttribute(rightElement, "data-panel-group-direction", "horizontal");
+      verifyAttribute(rightElement, "data-panel-resize-handle-enabled", "true");
+      verifyAttribute(
+        rightElement,
+        "data-panel-resize-handle-id",
+        "handle-right"
+      );
+    });
+
+    it("should update data-resize-handle-active and data-resize-handle-state when dragging starts/stops", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousemove", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousedown", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousemove", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mouseup", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousemove", rightElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(rightElement, "data-resize-handle-state", "hover");
+    });
+
+    it("should update data-resize-handle-active when focused", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+
+      act(() => {
+        leftElement.focus();
+      });
+      expect(document.activeElement).toBe(leftElement);
+      verifyAttribute(leftElement, "data-resize-handle-active", "keyboard");
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+
+      act(() => {
+        leftElement.blur();
+      });
+      expect(document.activeElement).not.toBe(leftElement);
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
     });
   });
 });