react-resizable-panels 2.1.6 → 2.1.8

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

@@ -1,35 +1,14 @@
 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)];
-const useLayoutEffect_do_not_use_directly = useLayoutEffect;
+import { createContext, useLayoutEffect, 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 useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
+const useIsomorphicLayoutEffect = useLayoutEffect ;
 
+const useId = React["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
 function useUniqueId(idFromParams = null) {
@@ -163,7 +142,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
@@ -313,8 +292,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");
@@ -352,7 +331,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
@@ -360,7 +339,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);
 
@@ -385,7 +364,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--) {
@@ -396,7 +375,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;
 }
@@ -558,7 +537,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 => {
@@ -648,7 +627,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);
   });
@@ -2342,8 +2323,11 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2354,10 +2338,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) {
@@ -2400,20 +2390,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":
@@ -2421,6 +2413,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2433,10 +2426,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.browser.esm.js

@@ -1,35 +1,14 @@
 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)];
-const useLayoutEffect_do_not_use_directly = useLayoutEffect;
+import { createContext, useLayoutEffect, 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 useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
+const useIsomorphicLayoutEffect = useLayoutEffect ;
 
+const useId = React["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
 function useUniqueId(idFromParams = null) {
@@ -157,7 +136,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
@@ -307,8 +286,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");
@@ -346,7 +325,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
@@ -354,7 +333,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);
 
@@ -379,7 +358,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--) {
@@ -390,7 +369,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;
 }
@@ -552,7 +531,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 => {
@@ -642,7 +621,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);
   });
@@ -2236,8 +2217,11 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2248,10 +2232,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) {
@@ -2294,20 +2284,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":
@@ -2315,6 +2307,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2327,10 +2320,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;
             }