react-resizable-panels 1.0.9 → 2.0.0

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

@@ -139,6 +139,322 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
+let currentCursorStyle = null;
+let styleElement = null;
+function getCursorStyle(state, constraintFlags) {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+    if (horizontalMin) {
+      if (verticalMin) {
+        return "se-resize";
+      } else if (verticalMax) {
+        return "ne-resize";
+      } else {
+        return "e-resize";
+      }
+    } else if (horizontalMax) {
+      if (verticalMin) {
+        return "sw-resize";
+      } else if (verticalMax) {
+        return "nw-resize";
+      } else {
+        return "w-resize";
+      }
+    } else if (verticalMin) {
+      return "s-resize";
+    } else if (verticalMax) {
+      return "n-resize";
+    }
+  }
+  switch (state) {
+    case "horizontal":
+      return "ew-resize";
+    case "intersection":
+      return "move";
+    case "vertical":
+      return "ns-resize";
+  }
+}
+function resetGlobalCursorStyle() {
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
+    currentCursorStyle = null;
+    styleElement = null;
+  }
+}
+function setGlobalCursorStyle(state, constraintFlags) {
+  const style = getCursorStyle(state, constraintFlags);
+  if (currentCursorStyle === style) {
+    return;
+  }
+  currentCursorStyle = style;
+  if (styleElement === null) {
+    styleElement = document.createElement("style");
+    document.head.appendChild(styleElement);
+  }
+  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+}
+
+function isKeyDown(event) {
+  return event.type === "keydown";
+}
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
+}
+function isTouchEvent(event) {
+  return event.type.startsWith("touch");
+}
+
+function getResizeEventCoordinates(event) {
+  if (isMouseEvent(event)) {
+    return {
+      x: event.pageX,
+      y: event.pageY
+    };
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0];
+    if (touch && touch.pageX && touch.pageY) {
+      return {
+        x: touch.pageX,
+        y: touch.pageY
+      };
+    }
+  }
+  return {
+    x: Infinity,
+    y: Infinity
+  };
+}
+
+function getInputType() {
+  if (typeof matchMedia === "function") {
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+  }
+}
+
+const EXCEEDED_HORIZONTAL_MIN = 0b0001;
+const EXCEEDED_HORIZONTAL_MAX = 0b0010;
+const EXCEEDED_VERTICAL_MIN = 0b0100;
+const EXCEEDED_VERTICAL_MAX = 0b1000;
+const isCoarsePointer = getInputType() === "coarse";
+let intersectingHandles = [];
+let isPointerDown = false;
+let ownerDocumentCounts = new Map();
+let panelConstraintFlags = new Map();
+const registeredResizeHandlers = new Set();
+function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins, setResizeHandlerState) {
+  var _ownerDocumentCounts$;
+  const {
+    ownerDocument
+  } = element;
+  const data = {
+    direction,
+    element,
+    hitAreaMargins,
+    setResizeHandlerState
+  };
+  const count = (_ownerDocumentCounts$ = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$ !== void 0 ? _ownerDocumentCounts$ : 0;
+  ownerDocumentCounts.set(ownerDocument, count + 1);
+  registeredResizeHandlers.add(data);
+  updateListeners();
+  return function unregisterResizeHandle() {
+    var _ownerDocumentCounts$2;
+    panelConstraintFlags.delete(resizeHandleId);
+    registeredResizeHandlers.delete(data);
+    const count = (_ownerDocumentCounts$2 = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$2 !== void 0 ? _ownerDocumentCounts$2 : 1;
+    ownerDocumentCounts.set(ownerDocument, count - 1);
+    updateListeners();
+    if (count === 1) {
+      ownerDocumentCounts.delete(ownerDocument);
+    }
+  };
+}
+function handlePointerDown(event) {
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  isPointerDown = true;
+  updateResizeHandlerStates("down", event);
+  recalculateIntersectingHandles({
+    x,
+    y
+  });
+  updateListeners();
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+}
+function handlePointerMove(event) {
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  if (isPointerDown) {
+    intersectingHandles.forEach(data => {
+      const {
+        setResizeHandlerState
+      } = data;
+      setResizeHandlerState("move", "drag", event);
+    });
+
+    // Update cursor based on return value(s) from active handles
+    updateCursor();
+  } else {
+    recalculateIntersectingHandles({
+      x,
+      y
+    });
+    updateResizeHandlerStates("move", event);
+    updateCursor();
+  }
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+}
+function handlePointerUp(event) {
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  panelConstraintFlags.clear();
+  isPointerDown = false;
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+  recalculateIntersectingHandles({
+    x,
+    y
+  });
+  updateResizeHandlerStates("up", event);
+  updateCursor();
+  updateListeners();
+}
+function recalculateIntersectingHandles({
+  x,
+  y
+}) {
+  intersectingHandles.splice(0);
+  registeredResizeHandlers.forEach(data => {
+    const {
+      element,
+      hitAreaMargins
+    } = data;
+    const {
+      bottom,
+      left,
+      right,
+      top
+    } = element.getBoundingClientRect();
+    const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
+    const intersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (intersects) {
+      intersectingHandles.push(data);
+    }
+  });
+}
+function reportConstraintsViolation(resizeHandleId, flag) {
+  panelConstraintFlags.set(resizeHandleId, flag);
+}
+function updateCursor() {
+  let intersectsHorizontal = false;
+  let intersectsVertical = false;
+  intersectingHandles.forEach(data => {
+    const {
+      direction
+    } = data;
+    if (direction === "horizontal") {
+      intersectsHorizontal = true;
+    } else {
+      intersectsVertical = true;
+    }
+  });
+  let constraintFlags = 0;
+  panelConstraintFlags.forEach(flag => {
+    constraintFlags |= flag;
+  });
+  if (intersectsHorizontal && intersectsVertical) {
+    setGlobalCursorStyle("intersection", constraintFlags);
+  } else if (intersectsHorizontal) {
+    setGlobalCursorStyle("horizontal", constraintFlags);
+  } else if (intersectsVertical) {
+    setGlobalCursorStyle("vertical", constraintFlags);
+  } else {
+    resetGlobalCursorStyle();
+  }
+}
+function updateListeners() {
+  ownerDocumentCounts.forEach((_, ownerDocument) => {
+    const {
+      body
+    } = ownerDocument;
+    body.removeEventListener("contextmenu", handlePointerUp);
+    body.removeEventListener("mousedown", handlePointerDown);
+    body.removeEventListener("mouseleave", handlePointerMove);
+    body.removeEventListener("mousemove", handlePointerMove);
+    body.removeEventListener("touchmove", handlePointerMove);
+    body.removeEventListener("touchstart", handlePointerDown);
+  });
+  window.removeEventListener("mouseup", handlePointerUp);
+  window.removeEventListener("touchcancel", handlePointerUp);
+  window.removeEventListener("touchend", handlePointerUp);
+  if (registerResizeHandle.length > 0) {
+    if (isPointerDown) {
+      if (intersectingHandles.length > 0) {
+        ownerDocumentCounts.forEach((count, ownerDocument) => {
+          const {
+            body
+          } = ownerDocument;
+          if (count > 0) {
+            body.addEventListener("contextmenu", handlePointerUp);
+            body.addEventListener("mouseleave", handlePointerMove);
+            body.addEventListener("mousemove", handlePointerMove);
+            body.addEventListener("touchmove", handlePointerMove, {
+              passive: false
+            });
+          }
+        });
+      }
+      window.addEventListener("mouseup", handlePointerUp);
+      window.addEventListener("touchcancel", handlePointerUp);
+      window.addEventListener("touchend", handlePointerUp);
+    } else {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const {
+          body
+        } = ownerDocument;
+        if (count > 0) {
+          body.addEventListener("mousedown", handlePointerDown);
+          body.addEventListener("mousemove", handlePointerMove);
+          body.addEventListener("touchmove", handlePointerMove, {
+            passive: false
+          });
+          body.addEventListener("touchstart", handlePointerDown);
+        }
+      });
+    }
+  }
+}
+function updateResizeHandlerStates(action, event) {
+  registeredResizeHandlers.forEach(data => {
+    const {
+      setResizeHandlerState
+    } = data;
+    if (intersectingHandles.includes(data)) {
+      if (isPointerDown) {
+        setResizeHandlerState(action, "drag", event);
+      } else {
+        setResizeHandlerState(action, "hover", event);
+      }
+    } else {
+      setResizeHandlerState(action, "inactive", event);
+    }
+  });
+}
+
 function assert(expectedCondition, message = "Assertion failed!") {
   if (!expectedCondition) {
     console.error(message);
@@ -571,27 +887,13 @@ function areEqual(arrayA, arrayB) {
   return true;
 }
 
-function isKeyDown(event) {
-  return event.type === "keydown";
-}
-function isMouseEvent(event) {
-  return event.type.startsWith("mouse");
-}
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
-
 function getResizeEventCursorPosition(direction, event) {
   const isHorizontal = direction === "horizontal";
-  if (isMouseEvent(event)) {
-    return isHorizontal ? event.clientX : event.clientY;
-  } else if (isTouchEvent(event)) {
-    const firstTouch = event.touches[0];
-    assert(firstTouch);
-    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-  } else {
-    throw Error(`Unsupported event type "${event.type}"`);
-  }
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  return isHorizontal ? x : y;
 }
 
 function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
@@ -740,44 +1042,6 @@ function computePanelFlexBoxStyle({
   };
 }
 
-let currentState = null;
-let element = null;
-function getCursorStyle(state) {
-  switch (state) {
-    case "horizontal":
-      return "ew-resize";
-    case "horizontal-max":
-      return "w-resize";
-    case "horizontal-min":
-      return "e-resize";
-    case "vertical":
-      return "ns-resize";
-    case "vertical-max":
-      return "n-resize";
-    case "vertical-min":
-      return "s-resize";
-  }
-}
-function resetGlobalCursorStyle() {
-  if (element !== null) {
-    document.head.removeChild(element);
-    currentState = null;
-    element = null;
-  }
-}
-function setGlobalCursorStyle(state) {
-  if (currentState === state) {
-    return;
-  }
-  currentState = state;
-  const style = getCursorStyle(state);
-  if (element === null) {
-    element = document.createElement("style");
-    document.head.appendChild(element);
-  }
-  element.innerHTML = `*{cursor: ${style}!important;}`;
-}
-
 function debounce(callback, durationMs = 10) {
   let timeoutId = null;
   let callable = (...args) => {
@@ -1261,18 +1525,15 @@ function PanelGroupWithForwardedRef({
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
           if (!layoutChanged) {
-            // If the pointer has moved too far to resize the panel any further,
-            // update the cursor style for a visual clue.
+            // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
-
             if (isHorizontal) {
-              setGlobalCursorStyle(delta < 0 ? "horizontal-min" : "horizontal-max");
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX);
             } else {
-              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
+              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX);
             }
           } else {
-            // Reset the cursor style to the the normal resize cursor.
-            setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
+            reportConstraintsViolation(dragHandleId, 0);
           }
         }
       }
@@ -1327,15 +1588,11 @@ function PanelGroupWithForwardedRef({
     } = eagerValuesRef.current;
     const {
       collapsedSize: prevCollapsedSize = 0,
-      collapsible: prevCollapsible,
-      defaultSize: prevDefaultSize,
-      maxSize: prevMaxSize = 100,
-      minSize: prevMinSize = 0
+      collapsible: prevCollapsible
     } = prevConstraints;
     const {
       collapsedSize: nextCollapsedSize = 0,
       collapsible: nextCollapsible,
-      defaultSize: nextDefaultSize,
       maxSize: nextMaxSize = 100,
       minSize: nextMinSize = 0
     } = panelData.constraints;
@@ -1343,8 +1600,10 @@ function PanelGroupWithForwardedRef({
       panelSize: prevPanelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
     assert(prevPanelSize != null);
-    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
-      resizePanel(panelData, nextCollapsedSize);
+    if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+      if (prevCollapsedSize !== nextCollapsedSize) {
+        resizePanel(panelData, nextCollapsedSize);
+      }
     } else if (prevPanelSize < nextMinSize) {
       resizePanel(panelData, nextMinSize);
     } else if (prevPanelSize > nextMaxSize) {
@@ -1372,7 +1631,6 @@ function PanelGroupWithForwardedRef({
     });
   }, []);
   const stopDragging = useCallback(() => {
-    resetGlobalCursorStyle();
     setDragState(null);
   }, []);
   const unregisterPanel = useCallback(panelData => {
@@ -1513,6 +1771,7 @@ function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
   disabled = false,
+  hitAreaMargins,
   id: idFromProps,
   onDragging,
   style: styleFromProps = {},
@@ -1535,67 +1794,60 @@ function PanelResizeHandle({
   }
   const {
     direction,
-    dragState,
     groupId,
-    registerResizeHandle,
+    registerResizeHandle: registerResizeHandleWithParentGroup,
     startDragging,
     stopDragging,
     panelGroupElement
   } = panelGroupContext;
   const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
+  const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
-  const stopDraggingAndBlur = useCallback(() => {
-    // Clicking on the drag handle shouldn't leave it focused;
-    // That would cause the PanelGroup to think it was still active.
-    const element = elementRef.current;
-    assert(element);
-    element.blur();
-    stopDragging();
-    const {
-      onDragging
-    } = callbacksRef.current;
-    if (onDragging) {
-      onDragging(false);
-    }
-  }, [stopDragging]);
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
     } else {
-      const resizeHandler = registerResizeHandle(resizeHandleId);
+      const resizeHandler = registerResizeHandleWithParentGroup(resizeHandleId);
       setResizeHandler(() => resizeHandler);
     }
-  }, [disabled, resizeHandleId, registerResizeHandle]);
+  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
   useEffect(() => {
-    if (disabled || resizeHandler == null || !isDragging) {
+    var _hitAreaMargins$coars, _hitAreaMargins$fine;
+    if (disabled || resizeHandler == null) {
       return;
     }
-    const onMove = event => {
-      resizeHandler(event);
-    };
-    const onMouseLeave = event => {
-      resizeHandler(event);
-    };
     const element = elementRef.current;
     assert(element);
-    const targetDocument = element.ownerDocument;
-    targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
-    targetDocument.body.addEventListener("mousemove", onMove);
-    targetDocument.body.addEventListener("touchmove", onMove);
-    targetDocument.body.addEventListener("mouseleave", onMouseLeave);
-    window.addEventListener("mouseup", stopDraggingAndBlur);
-    window.addEventListener("touchend", stopDraggingAndBlur);
-    return () => {
-      targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-      targetDocument.body.removeEventListener("mousemove", onMove);
-      targetDocument.body.removeEventListener("touchmove", onMove);
-      targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
-      window.removeEventListener("mouseup", stopDraggingAndBlur);
-      window.removeEventListener("touchend", stopDraggingAndBlur);
+    const setResizeHandlerState = (action, state, event) => {
+      setState(state);
+      switch (action) {
+        case "down":
+          {
+            startDragging(resizeHandleId, event);
+            break;
+          }
+        case "up":
+          {
+            stopDragging();
+            break;
+          }
+      }
+      switch (state) {
+        case "drag":
+          {
+            resizeHandler(event);
+            break;
+          }
+      }
     };
-  }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
+    return registerResizeHandle(resizeHandleId, element, direction, {
+      // Coarse inputs (e.g. finger/touch)
+      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
+      // Fine inputs (e.g. mouse)
+      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+    }, setResizeHandlerState);
+  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,
@@ -1603,7 +1855,6 @@ function PanelResizeHandle({
     panelGroupElement
   });
   const style = {
-    cursor: getCursorStyle(direction),
     touchAction: "none",
     userSelect: "none"
   };
@@ -1613,31 +1864,6 @@ function PanelResizeHandle({
     className: classNameFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
-    onMouseDown: event => {
-      startDragging(resizeHandleId, event.nativeEvent);
-      const callbacks = callbacksRef.current;
-      assert(callbacks);
-      const {
-        onDragging
-      } = callbacks;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
-    onMouseUp: stopDraggingAndBlur,
-    onTouchCancel: stopDraggingAndBlur,
-    onTouchEnd: stopDraggingAndBlur,
-    onTouchStart: event => {
-      startDragging(resizeHandleId, event.nativeEvent);
-      const callbacks = callbacksRef.current;
-      assert(callbacks);
-      const {
-        onDragging
-      } = callbacks;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
     ref: elementRef,
     role: "separator",
     style: {
@@ -1649,7 +1875,8 @@ function PanelResizeHandle({
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,
     "data-resize-handle": "",
-    "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+    "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
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.9",
+  "version": "2.0.0",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.test.tsx

@@ -319,6 +319,58 @@ describe("PanelGroup", () => {
       expect(rightElement.getAttribute("data-panel-size")).toBe("5.0");
     });
 
+    it("it should not expand a collapsed panel if other constraints change", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel
+              id="left"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel
+              id="right"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+          </PanelGroup>
+        );
+      });
+
+      let leftElement = getPanelElement("left", container);
+      let middleElement = getPanelElement("middle", container);
+      let rightElement = getPanelElement("right", container);
+      assert(leftElement);
+      assert(middleElement);
+      assert(rightElement);
+      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" collapsedSize={10} collapsible minSize={20} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" collapsedSize={10} collapsible minSize={20} />
+          </PanelGroup>
+        );
+      });
+
+      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+    });
+
     it("should resize a panel if the minSize prop changes", () => {
       act(() => {
         root.render(