react-resizable-panels 2.0.15 → 2.0.17

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

@@ -49,6 +49,8 @@ const {
 const useId = React__namespace["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// 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";
 
@@ -274,27 +276,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,
@@ -486,6 +487,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -634,15 +636,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) {
@@ -652,29 +651,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);
         }
       });
     }
@@ -2062,7 +2055,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.development.esm.js

@@ -25,6 +25,8 @@ const {
 const useId = React["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// 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";
 
@@ -250,27 +252,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,
@@ -462,6 +463,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -610,15 +612,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) {
@@ -628,29 +627,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);
         }
       });
     }
@@ -2038,7 +2031,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.development.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";
 
@@ -236,27 +238,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,
@@ -448,6 +449,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -596,15 +598,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) {
@@ -614,29 +613,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);
         }
       });
     }
@@ -1830,7 +1823,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.development.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";
 
@@ -212,27 +214,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,
@@ -424,6 +425,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -572,15 +574,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) {
@@ -590,29 +589,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);
         }
       });
     }
@@ -1806,7 +1799,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.esm.js

@@ -25,6 +25,8 @@ const {
 const useId = React["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// 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";
 
@@ -239,27 +241,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,
@@ -451,6 +452,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -599,15 +601,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) {
@@ -617,29 +616,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);
         }
       });
     }
@@ -1927,7 +1920,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.