react-resizable-panels 2.0.15 → 2.0.17

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

@@ -46,6 +46,8 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
 
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
@@ -225,27 +227,26 @@ function setGlobalCursorStyle(state, constraintFlags) {
 function isKeyDown(event) {
   return event.type === "keydown";
 }
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
 function isMouseEvent(event) {
   return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
 
 function getResizeEventCoordinates(event) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-    }
   }
   return {
     x: Infinity,
@@ -437,6 +438,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -585,15 +587,12 @@ function updateListeners() {
       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);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
@@ -603,29 +602,23 @@ function updateListeners() {
           } = ownerDocument;
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", 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("pointerdown", handlePointerDown, {
+            capture: true
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }
@@ -1729,7 +1722,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.

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

@@ -22,6 +22,8 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
 
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
@@ -201,27 +203,26 @@ function setGlobalCursorStyle(state, constraintFlags) {
 function isKeyDown(event) {
   return event.type === "keydown";
 }
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
 function isMouseEvent(event) {
   return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
 
 function getResizeEventCoordinates(event) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-    }
   }
   return {
     x: Infinity,
@@ -413,6 +414,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -561,15 +563,12 @@ function updateListeners() {
       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);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
@@ -579,29 +578,23 @@ function updateListeners() {
           } = ownerDocument;
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", 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("pointerdown", handlePointerDown, {
+            capture: true
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }
@@ -1705,7 +1698,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.

package/package.json

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

package/src/PanelGroup.ts

@@ -28,7 +28,7 @@ import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
 import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
-import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
+import { isKeyDown, isMouseEvent, isPointerEvent } from "./utils/events";
 import { getResizeEventCursorPosition } from "./utils/events/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
 import {
@@ -658,7 +658,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.

package/src/PanelGroupContext.ts

@@ -1,7 +1,8 @@
 import { PanelConstraints, PanelData } from "./Panel";
 import { CSSProperties, createContext } from "./vendor/react";
 
-export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+export type ResizeEvent = KeyboardEvent | PointerEvent | MouseEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;
 
 export type DragState = {

package/src/PanelResizeHandle.test.tsx

@@ -127,18 +127,18 @@ describe("PanelResizeHandle", () => {
         });
 
         act(() => {
-          dispatchPointerEvent("mousemove", leftElement);
+          dispatchPointerEvent("pointermove", leftElement);
         });
         expect(onDragging).not.toHaveBeenCalled();
 
         act(() => {
-          dispatchPointerEvent("mousedown", leftElement);
+          dispatchPointerEvent("pointerdown", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(1);
         expect(onDragging).toHaveBeenCalledWith(true);
 
         act(() => {
-          dispatchPointerEvent("mouseup", leftElement);
+          dispatchPointerEvent("pointerup", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(2);
         expect(onDragging).toHaveBeenCalledWith(false);
@@ -154,20 +154,20 @@ describe("PanelResizeHandle", () => {
         });
 
         act(() => {
-          dispatchPointerEvent("mousemove", leftElement);
+          dispatchPointerEvent("pointermove", leftElement);
         });
         expect(onDraggingLeft).not.toHaveBeenCalled();
         expect(onDraggingRight).not.toHaveBeenCalled();
 
         act(() => {
-          dispatchPointerEvent("mousedown", leftElement);
+          dispatchPointerEvent("pointerdown", leftElement);
         });
         expect(onDraggingLeft).toHaveBeenCalledTimes(1);
         expect(onDraggingLeft).toHaveBeenCalledWith(true);
         expect(onDraggingRight).not.toHaveBeenCalled();
 
         act(() => {
-          dispatchPointerEvent("mouseup", leftElement);
+          dispatchPointerEvent("pointerup", leftElement);
         });
         expect(onDraggingLeft).toHaveBeenCalledTimes(2);
         expect(onDraggingLeft).toHaveBeenCalledWith(false);
@@ -209,7 +209,7 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
       act(() => {
-        dispatchPointerEvent("mousemove", leftElement);
+        dispatchPointerEvent("pointermove", leftElement);
       });
       verifyAttribute(leftElement, "data-resize-handle-active", null);
       verifyAttribute(rightElement, "data-resize-handle-active", null);
@@ -217,7 +217,7 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
       act(() => {
-        dispatchPointerEvent("mousedown", leftElement);
+        dispatchPointerEvent("pointerdown", leftElement);
       });
       verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
       verifyAttribute(rightElement, "data-resize-handle-active", null);
@@ -225,7 +225,7 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
       act(() => {
-        dispatchPointerEvent("mousemove", leftElement);
+        dispatchPointerEvent("pointermove", leftElement);
       });
       verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
       verifyAttribute(rightElement, "data-resize-handle-active", null);
@@ -233,7 +233,7 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
       act(() => {
-        dispatchPointerEvent("mouseup", leftElement);
+        dispatchPointerEvent("pointerup", leftElement);
       });
       verifyAttribute(leftElement, "data-resize-handle-active", null);
       verifyAttribute(rightElement, "data-resize-handle-active", null);
@@ -241,7 +241,7 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
       act(() => {
-        dispatchPointerEvent("mousemove", rightElement);
+        dispatchPointerEvent("pointermove", rightElement);
       });
       verifyAttribute(leftElement, "data-resize-handle-active", null);
       verifyAttribute(rightElement, "data-resize-handle-active", null);

package/src/PanelResizeHandleRegistry.ts

@@ -89,6 +89,7 @@ function handlePointerDown(event: ResizeEvent) {
     updateResizeHandlerStates("down", event);
 
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 
@@ -258,16 +259,13 @@ function updateListeners() {
     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);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
 
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
 
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
@@ -277,29 +275,23 @@ function updateListeners() {
 
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false,
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
 
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", 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("pointerdown", handlePointerDown, {
+            capture: true,
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }

package/src/types.ts

@@ -1,4 +1,5 @@
 export type Direction = "horizontal" | "vertical";
 
-export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+export type ResizeEvent = KeyboardEvent | PointerEvent | MouseEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;

package/src/utils/events/getResizeEventCoordinates.ts

@@ -1,20 +1,19 @@
 import { ResizeEvent } from "../../types";
-import { isMouseEvent, isTouchEvent } from ".";
+import { isMouseEvent, isPointerEvent } from ".";
 
 export function getResizeEventCoordinates(event: ResizeEvent) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY,
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY,
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY,
-      };
-    }
   }
 
   return {

package/src/utils/events/index.ts

@@ -4,10 +4,10 @@ export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
   return event.type === "keydown";
 }
 
-export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
-  return event.type.startsWith("mouse");
+export function isPointerEvent(event: ResizeEvent): event is PointerEvent {
+  return event.type.startsWith("pointer");
 }
 
-export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
-  return event.type.startsWith("touch");
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+  return event.type.startsWith("mouse");
 }

package/src/utils/test-utils.ts

@@ -24,6 +24,9 @@ export function dispatchPointerEvent(type: string, target: HTMLElement) {
         return clientY;
       },
     },
+    isPrimary: {
+      value: true,
+    },
   });
 
   target.dispatchEvent(event);