react-resizable-panels 2.1.6 → 2.1.8

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

@@ -1,32 +1,12 @@
 import * as React from 'react';
-
-// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
-
-// eslint-disable-next-line no-restricted-imports
-
-const {
-  createElement,
-  createContext,
-  createRef,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} = React;
-
-// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React[`useId${Math.random()}`.slice(0, 5)];
+import { createContext, useRef, forwardRef, createElement, useContext, useImperativeHandle, useState, useCallback, useEffect, useMemo } from 'react';
 
 // 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";
 
+const useId = React["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
 function useUniqueId(idFromParams = null) {
@@ -132,7 +112,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
@@ -282,8 +262,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * Determine which of two nodes appears in front of the other —
  * if `a` is in front, returns 1, otherwise returns -1
- * @param {HTMLElement} a
- * @param {HTMLElement} b
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -321,7 +301,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -329,7 +309,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -354,7 +334,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -365,7 +345,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -527,7 +507,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -617,7 +597,9 @@ function updateListeners() {
       body
     } = ownerDocument;
     body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerdown", handlePointerDown, {
+      capture: true
+    });
     body.removeEventListener("pointerleave", handlePointerMove);
     body.removeEventListener("pointermove", handlePointerMove);
   });
@@ -2117,8 +2099,11 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2129,10 +2114,16 @@ function PanelResizeHandle({
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
-    onDragging
+    onClick,
+    onDragging,
+    onPointerDown,
+    onPointerUp
   });
   useEffect(() => {
+    callbacksRef.current.onClick = onClick;
     callbacksRef.current.onDragging = onDragging;
+    callbacksRef.current.onPointerDown = onPointerDown;
+    callbacksRef.current.onPointerUp = onPointerUp;
   });
   const panelGroupContext = useContext(PanelGroupContext);
   if (panelGroupContext === null) {
@@ -2172,20 +2163,22 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element, "Element ref not attached");
+    let didMove = false;
     const setResizeHandlerState = (action, isActive, event) => {
       if (isActive) {
         switch (action) {
           case "down":
             {
               setState("drag");
+              didMove = false;
               assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
-                onDragging
+                onDragging,
+                onPointerDown
               } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(true);
-              }
+              onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
+              onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
               break;
             }
           case "move":
@@ -2193,6 +2186,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2205,10 +2199,14 @@ function PanelResizeHandle({
               setState("hover");
               stopDragging();
               const {
-                onDragging
+                onClick,
+                onDragging,
+                onPointerUp
               } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(false);
+              onDragging === null || onDragging === void 0 ? void 0 : onDragging(false);
+              onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp();
+              if (!didMove) {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
               }
               break;
             }

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

@@ -1,37 +1,16 @@
 import * as React from 'react';
+import { createContext, useLayoutEffect, useRef, forwardRef, createElement, useContext, useImperativeHandle, useState, useCallback, useEffect, useMemo } from 'react';
 
 const isBrowser = typeof window !== "undefined";
 
-// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
-
-// eslint-disable-next-line no-restricted-imports
-
-const {
-  createElement,
-  createContext,
-  createRef,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} = React;
-
-// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React[`useId${Math.random()}`.slice(0, 5)];
-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";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
+const useId = React["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
 function useUniqueId(idFromParams = null) {
@@ -159,7 +138,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
@@ -309,8 +288,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * Determine which of two nodes appears in front of the other —
  * if `a` is in front, returns 1, otherwise returns -1
- * @param {HTMLElement} a
- * @param {HTMLElement} b
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -348,7 +327,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -356,7 +335,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -381,7 +360,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -392,7 +371,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -554,7 +533,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -644,7 +623,9 @@ function updateListeners() {
       body
     } = ownerDocument;
     body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerdown", handlePointerDown, {
+      capture: true
+    });
     body.removeEventListener("pointerleave", handlePointerMove);
     body.removeEventListener("pointermove", handlePointerMove);
   });
@@ -2238,8 +2219,11 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2250,10 +2234,16 @@ function PanelResizeHandle({
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
-    onDragging
+    onClick,
+    onDragging,
+    onPointerDown,
+    onPointerUp
   });
   useEffect(() => {
+    callbacksRef.current.onClick = onClick;
     callbacksRef.current.onDragging = onDragging;
+    callbacksRef.current.onPointerDown = onPointerDown;
+    callbacksRef.current.onPointerUp = onPointerUp;
   });
   const panelGroupContext = useContext(PanelGroupContext);
   if (panelGroupContext === null) {
@@ -2296,20 +2286,22 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element, "Element ref not attached");
+    let didMove = false;
     const setResizeHandlerState = (action, isActive, event) => {
       if (isActive) {
         switch (action) {
           case "down":
             {
               setState("drag");
+              didMove = false;
               assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
-                onDragging
+                onDragging,
+                onPointerDown
               } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(true);
-              }
+              onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
+              onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
               break;
             }
           case "move":
@@ -2317,6 +2309,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2329,10 +2322,14 @@ function PanelResizeHandle({
               setState("hover");
               stopDragging();
               const {
-                onDragging
+                onClick,
+                onDragging,
+                onPointerUp
               } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(false);
+              onDragging === null || onDragging === void 0 ? void 0 : onDragging(false);
+              onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp();
+              if (!didMove) {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
               }
               break;
             }