react-resizable-panels 2.1.7 → 2.1.9

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

@@ -26,41 +26,35 @@ var React__namespace = /*#__PURE__*/_interopNamespace(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__namespace;
-
-// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace[`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);
+const PanelGroupContext = React.createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
+const DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandle: "data-resize-handle",
+  resizeHandleActive: "data-resize-handle-active",
+  resizeHandleEnabled: "data-panel-resize-handle-enabled",
+  resizeHandleId: "data-panel-resize-handle-id",
+  resizeHandleState: "data-resize-handle-state"
+};
+const PRECISION = 10;
+
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : () => {};
 
+const useId = React__namespace["useId".toString()];
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
 function useUniqueId(idFromParams = null) {
   const idFromUseId = wrappedUseId();
-  const idRef = useRef(idFromParams || idFromUseId || null);
+  const idRef = React.useRef(idFromParams || idFromUseId || null);
   if (idRef.current === null) {
     idRef.current = "" + counter++;
   }
@@ -85,7 +79,7 @@ function PanelWithForwardedRef({
   tagName: Type = "div",
   ...rest
 }) {
-  const context = useContext(PanelGroupContext);
+  const context = React.useContext(PanelGroupContext);
   if (context === null) {
     throw Error(`Panel components must be rendered within a PanelGroup container`);
   }
@@ -102,7 +96,7 @@ function PanelWithForwardedRef({
     unregisterPanel
   } = context;
   const panelId = useUniqueId(idFromProps);
-  const panelDataRef = useRef({
+  const panelDataRef = React.useRef({
     callbacks: {
       onCollapse,
       onExpand,
@@ -119,7 +113,7 @@ function PanelWithForwardedRef({
     idIsFromProps: idFromProps !== undefined,
     order
   });
-  const devWarningsRef = useRef({
+  const devWarningsRef = React.useRef({
     didLogMissingDefaultSizeWarning: false
   });
 
@@ -166,7 +160,7 @@ function PanelWithForwardedRef({
       unregisterPanel(panelData);
     };
   }, [order, panelId, registerPanel, unregisterPanel]);
-  useImperativeHandle(forwardedRef, () => ({
+  React.useImperativeHandle(forwardedRef, () => ({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
@@ -190,24 +184,24 @@ function PanelWithForwardedRef({
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
   const style = getPanelStyle(panelDataRef.current, defaultSize);
-  return createElement(Type, {
+  return React.createElement(Type, {
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
-    "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
-    "data-panel-group-id": groupId,
-    "data-panel-id": panelId,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.panel]: "",
+    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || undefined,
+    [DATA_ATTRIBUTES.panelId]: panelId,
+    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
-const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
+const Panel = React.forwardRef((props, ref) => React.createElement(PanelWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
@@ -224,6 +218,7 @@ function setNonce(value) {
 
 let currentCursorStyle = null;
 let enabled = true;
+let prevRuleIndex = -1;
 let styleElement = null;
 function disableGlobalCursorStyles() {
   enabled = false;
@@ -273,9 +268,11 @@ function resetGlobalCursorStyle() {
     document.head.removeChild(styleElement);
     currentCursorStyle = null;
     styleElement = null;
+    prevRuleIndex = -1;
   }
 }
 function setGlobalCursorStyle(state, constraintFlags) {
+  var _styleElement$sheet$i, _styleElement$sheet2;
   if (!enabled) {
     return;
   }
@@ -292,7 +289,11 @@ function setGlobalCursorStyle(state, constraintFlags) {
     }
     document.head.appendChild(styleElement);
   }
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+  if (prevRuleIndex >= 0) {
+    var _styleElement$sheet;
+    (_styleElement$sheet = styleElement.sheet) === null || _styleElement$sheet === void 0 ? void 0 : _styleElement$sheet.removeRule(prevRuleIndex);
+  }
+  prevRuleIndex = (_styleElement$sheet$i = (_styleElement$sheet2 = styleElement.sheet) === null || _styleElement$sheet2 === void 0 ? void 0 : _styleElement$sheet2.insertRule(`*{cursor: ${style} !important;}`)) !== null && _styleElement$sheet$i !== void 0 ? _styleElement$sheet$i : -1;
 }
 
 function isKeyDown(event) {
@@ -523,7 +524,9 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
-    event.stopPropagation();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
   }
 }
 function handlePointerMove(event) {
@@ -572,6 +575,9 @@ function handlePointerUp(event) {
   isPointerDown = false;
   if (intersectingHandles.length > 0) {
     event.preventDefault();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
   }
   updateResizeHandlerStates("up", event);
   recalculateIntersectingHandles({
@@ -582,6 +588,16 @@ function handlePointerUp(event) {
   updateCursor();
   updateListeners();
 }
+function isWithinResizeHandle(element) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
 function recalculateIntersectingHandles({
   target,
   x,
@@ -673,47 +689,42 @@ function updateCursor() {
     resetGlobalCursorStyle();
   }
 }
+let listenersAbortController = new AbortController();
 function updateListeners() {
-  ownerDocumentCounts.forEach((_, ownerDocument) => {
-    const {
-      body
-    } = ownerDocument;
-    body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown);
-    body.removeEventListener("pointerleave", handlePointerMove);
-    body.removeEventListener("pointermove", handlePointerMove);
-  });
-  window.removeEventListener("pointerup", handlePointerUp);
-  window.removeEventListener("pointercancel", handlePointerUp);
-  if (registeredResizeHandlers.size > 0) {
-    if (isPointerDown) {
-      if (intersectingHandles.length > 0) {
-        ownerDocumentCounts.forEach((count, ownerDocument) => {
-          const {
-            body
-          } = ownerDocument;
-          if (count > 0) {
-            body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("pointerleave", handlePointerMove);
-            body.addEventListener("pointermove", handlePointerMove);
-          }
-        });
-      }
-      window.addEventListener("pointerup", handlePointerUp);
-      window.addEventListener("pointercancel", handlePointerUp);
-    } else {
+  listenersAbortController.abort();
+  listenersAbortController = new AbortController();
+  const options = {
+    capture: true,
+    signal: listenersAbortController.signal
+  };
+  if (!registeredResizeHandlers.size) {
+    return;
+  }
+  if (isPointerDown) {
+    if (intersectingHandles.length > 0) {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const {
           body
         } = ownerDocument;
         if (count > 0) {
-          body.addEventListener("pointerdown", handlePointerDown, {
-            capture: true
-          });
-          body.addEventListener("pointermove", handlePointerMove);
+          body.addEventListener("contextmenu", handlePointerUp, options);
+          body.addEventListener("pointerleave", handlePointerMove, options);
+          body.addEventListener("pointermove", handlePointerMove, options);
         }
       });
     }
+    window.addEventListener("pointerup", handlePointerUp, options);
+    window.addEventListener("pointercancel", handlePointerUp, options);
+  } else {
+    ownerDocumentCounts.forEach((count, ownerDocument) => {
+      const {
+        body
+      } = ownerDocument;
+      if (count > 0) {
+        body.addEventListener("pointerdown", handlePointerDown, options);
+        body.addEventListener("pointermove", handlePointerMove, options);
+      }
+    });
   }
 }
 function updateResizeHandlerStates(action, event) {
@@ -727,8 +738,8 @@ function updateResizeHandlerStates(action, event) {
 }
 
 function useForceUpdate() {
-  const [_, setCount] = useState(0);
-  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+  const [_, setCount] = React.useState(0);
+  return React.useCallback(() => setCount(prevCount => prevCount + 1), []);
 }
 
 function assert(expectedCondition, message) {
@@ -738,8 +749,6 @@ function assert(expectedCondition, message) {
   }
 }
 
-const PRECISION = 10;
-
 function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
   if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
     return 0;
@@ -1083,12 +1092,12 @@ function calculateAriaValues({
 }
 
 function getResizeHandleElementsForGroup(groupId, scope = document) {
-  return Array.from(scope.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+  return Array.from(scope.querySelectorAll(`[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`));
 }
 
 function getResizeHandleElementIndex(groupId, id, scope = document) {
   const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
+  const index = handles.findIndex(handle => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === id);
   return index !== null && index !== void 0 ? index : null;
 }
 
@@ -1113,7 +1122,7 @@ function getPanelGroupElement(id, rootElement = document) {
 }
 
 function getResizeHandleElement(id, scope = document) {
-  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id}"]`);
   if (element) {
     return element;
   }
@@ -1141,7 +1150,7 @@ function useWindowSplitterPanelGroupBehavior({
   panelGroupElement,
   setLayout
 }) {
-  const devWarningsRef = useRef({
+  const devWarningsRef = React.useRef({
     didWarnAboutMissingResizeHandle: false
   });
   useIsomorphicLayoutEffect(() => {
@@ -1188,7 +1197,7 @@ function useWindowSplitterPanelGroupBehavior({
       });
     };
   }, [groupId, layout, panelDataArray, panelGroupElement]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (!panelGroupElement) {
       return;
     }
@@ -1202,7 +1211,7 @@ function useWindowSplitterPanelGroupBehavior({
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
     assert(handles, `No resize handles found for group id "${groupId}"`);
     const cleanupFunctions = handles.map(handle => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
       assert(handleId, `Resize handle element has no handle id attribute`);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
@@ -1280,7 +1289,7 @@ function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDr
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
   assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
-  const groupId = handleElement.getAttribute("data-panel-group-id");
+  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
   assert(groupId, `Resize handle element has no group id attribute`);
   let {
     initialCursorPosition
@@ -1695,14 +1704,14 @@ function PanelGroupWithForwardedRef({
   ...rest
 }) {
   const groupId = useUniqueId(idFromProps);
-  const panelGroupElementRef = useRef(null);
-  const [dragState, setDragState] = useState(null);
-  const [layout, setLayout] = useState([]);
+  const panelGroupElementRef = React.useRef(null);
+  const [dragState, setDragState] = React.useState(null);
+  const [layout, setLayout] = React.useState([]);
   const forceUpdate = useForceUpdate();
-  const panelIdToLastNotifiedSizeMapRef = useRef({});
-  const panelSizeBeforeCollapseRef = useRef(new Map());
-  const prevDeltaRef = useRef(0);
-  const committedValuesRef = useRef({
+  const panelIdToLastNotifiedSizeMapRef = React.useRef({});
+  const panelSizeBeforeCollapseRef = React.useRef(new Map());
+  const prevDeltaRef = React.useRef(0);
+  const committedValuesRef = React.useRef({
     autoSaveId,
     direction,
     dragState,
@@ -1711,17 +1720,17 @@ function PanelGroupWithForwardedRef({
     onLayout,
     storage
   });
-  const eagerValuesRef = useRef({
+  const eagerValuesRef = React.useRef({
     layout,
     panelDataArray: [],
     panelDataArrayChanged: false
   });
-  const devWarningsRef = useRef({
+  const devWarningsRef = React.useRef({
     didLogIdAndOrderWarning: false,
     didLogPanelConstraintsWarning: false,
     prevPanelIds: []
   });
-  useImperativeHandle(forwardedRef, () => ({
+  React.useImperativeHandle(forwardedRef, () => ({
     getId: () => committedValuesRef.current.id,
     getLayout: () => {
       const {
@@ -1768,7 +1777,7 @@ function PanelGroupWithForwardedRef({
     setLayout,
     panelGroupElement: panelGroupElementRef.current
   });
-  useEffect(() => {
+  React.useEffect(() => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
@@ -1795,7 +1804,7 @@ function PanelGroupWithForwardedRef({
   }, [autoSaveId, layout, storage]);
 
   // DEV warnings
-  useEffect(() => {
+  React.useEffect(() => {
     {
       const {
         panelDataArray
@@ -1841,7 +1850,7 @@ function PanelGroupWithForwardedRef({
   });
 
   // External APIs are safe to memoize via committed values ref
-  const collapsePanel = useCallback(panelData => {
+  const collapsePanel = React.useCallback(panelData => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1884,7 +1893,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback((panelData, minSizeOverride) => {
+  const expandPanel = React.useCallback((panelData, minSizeOverride) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1928,7 +1937,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const getPanelSize = useCallback(panelData => {
+  const getPanelSize = React.useCallback(panelData => {
     const {
       layout,
       panelDataArray
@@ -1941,7 +1950,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback((panelData, defaultSize) => {
+  const getPanelStyle = React.useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
@@ -1956,7 +1965,7 @@ function PanelGroupWithForwardedRef({
   }, [dragState, layout]);
 
   // External APIs are safe to memoize via committed values ref
-  const isPanelCollapsed = useCallback(panelData => {
+  const isPanelCollapsed = React.useCallback(panelData => {
     const {
       layout,
       panelDataArray
@@ -1971,7 +1980,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const isPanelExpanded = useCallback(panelData => {
+  const isPanelExpanded = React.useCallback(panelData => {
     const {
       layout,
       panelDataArray
@@ -1984,7 +1993,7 @@ function PanelGroupWithForwardedRef({
     assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
   }, []);
-  const registerPanel = useCallback(panelData => {
+  const registerPanel = React.useCallback(panelData => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
@@ -2061,7 +2070,7 @@ function PanelGroupWithForwardedRef({
       eagerValues.layout = [];
     };
   }, []);
-  const registerResizeHandle = useCallback(dragHandleId => {
+  const registerResizeHandle = React.useCallback(dragHandleId => {
     let isRTL = false;
     const panelGroupElement = panelGroupElementRef.current;
     if (panelGroupElement) {
@@ -2140,7 +2149,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const resizePanel = useCallback((panelData, unsafePanelSize) => {
+  const resizePanel = React.useCallback((panelData, unsafePanelSize) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -2173,7 +2182,7 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
-  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+  const reevaluatePanelConstraints = React.useCallback((panelData, prevConstraints) => {
     const {
       layout,
       panelDataArray
@@ -2207,7 +2216,7 @@ function PanelGroupWithForwardedRef({
   }, [resizePanel]);
 
   // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
-  const startDragging = useCallback((dragHandleId, event) => {
+  const startDragging = React.useCallback((dragHandleId, event) => {
     const {
       direction
     } = committedValuesRef.current;
@@ -2227,10 +2236,10 @@ function PanelGroupWithForwardedRef({
       initialLayout: layout
     });
   }, []);
-  const stopDragging = useCallback(() => {
+  const stopDragging = React.useCallback(() => {
     setDragState(null);
   }, []);
-  const unregisterPanel = useCallback(panelData => {
+  const unregisterPanel = React.useCallback(panelData => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
@@ -2247,7 +2256,7 @@ function PanelGroupWithForwardedRef({
       forceUpdate();
     }
   }, [forceUpdate]);
-  const context = useMemo(() => ({
+  const context = React.useMemo(() => ({
     collapsePanel,
     direction,
     dragState,
@@ -2273,9 +2282,9 @@ function PanelGroupWithForwardedRef({
     overflow: "hidden",
     width: "100%"
   };
-  return createElement(PanelGroupContext.Provider, {
+  return React.createElement(PanelGroupContext.Provider, {
     value: context
-  }, createElement(Type, {
+  }, React.createElement(Type, {
     ...rest,
     children,
     className: classNameFromProps,
@@ -2286,12 +2295,12 @@ function PanelGroupWithForwardedRef({
       ...styleFromProps
     },
     // CSS selectors
-    "data-panel-group": "",
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId
+    [DATA_ATTRIBUTES.group]: "",
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId
   }));
 }
-const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
+const PanelGroup = React.forwardRef((props, ref) => React.createElement(PanelGroupWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
@@ -2320,7 +2329,7 @@ function useWindowSplitterResizeHandlerBehavior({
   resizeHandler,
   panelGroupElement
 }) {
-  useEffect(() => {
+  React.useEffect(() => {
     if (disabled || resizeHandler == null || panelGroupElement == null) {
       return;
     }
@@ -2347,7 +2356,7 @@ function useWindowSplitterResizeHandlerBehavior({
         case "F6":
           {
             event.preventDefault();
-            const groupId = handleElement.getAttribute("data-panel-group-id");
+            const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
             assert(groupId, `No group element found for id "${groupId}"`);
             const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
             const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
@@ -2373,24 +2382,33 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
   ...rest
 }) {
   var _hitAreaMargins$coars, _hitAreaMargins$fine;
-  const elementRef = useRef(null);
+  const elementRef = React.useRef(null);
 
   // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef({
-    onDragging
+  const callbacksRef = React.useRef({
+    onClick,
+    onDragging,
+    onPointerDown,
+    onPointerUp
   });
-  useEffect(() => {
+  React.useEffect(() => {
+    callbacksRef.current.onClick = onClick;
     callbacksRef.current.onDragging = onDragging;
+    callbacksRef.current.onPointerDown = onPointerDown;
+    callbacksRef.current.onPointerUp = onPointerUp;
   });
-  const panelGroupContext = useContext(PanelGroupContext);
+  const panelGroupContext = React.useContext(PanelGroupContext);
   if (panelGroupContext === null) {
     throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
   }
@@ -2403,16 +2421,16 @@ function PanelResizeHandle({
     panelGroupElement
   } = panelGroupContext;
   const resizeHandleId = useUniqueId(idFromProps);
-  const [state, setState] = useState("inactive");
-  const [isFocused, setIsFocused] = useState(false);
-  const [resizeHandler, setResizeHandler] = useState(null);
-  const committedValuesRef = useRef({
+  const [state, setState] = React.useState("inactive");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [resizeHandler, setResizeHandler] = React.useState(null);
+  const committedValuesRef = React.useRef({
     state
   });
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
-  useEffect(() => {
+  React.useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
     } else {
@@ -2425,55 +2443,62 @@ function PanelResizeHandle({
   // so that inline object values won't trigger re-renders
   const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
   const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
-  useEffect(() => {
+  React.useEffect(() => {
     if (disabled || resizeHandler == null) {
       return;
     }
     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");
-              assert(event, 'Expected event to be defined for "down" action');
-              startDragging(resizeHandleId, event);
-              const {
-                onDragging
-              } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(true);
-              }
-              break;
-            }
-          case "move":
-            {
-              const {
-                state
-              } = committedValuesRef.current;
-              if (state !== "drag") {
-                setState("hover");
-              }
-              assert(event, 'Expected event to be defined for "move" action');
-              resizeHandler(event);
-              break;
-            }
-          case "up":
-            {
+      if (!isActive) {
+        setState("inactive");
+        return;
+      }
+      switch (action) {
+        case "down":
+          {
+            setState("drag");
+            didMove = false;
+            assert(event, 'Expected event to be defined for "down" action');
+            startDragging(resizeHandleId, event);
+            const {
+              onDragging,
+              onPointerDown
+            } = callbacksRef.current;
+            onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
+            break;
+          }
+        case "move":
+          {
+            const {
+              state
+            } = committedValuesRef.current;
+            didMove = true;
+            if (state !== "drag") {
               setState("hover");
-              stopDragging();
-              const {
-                onDragging
-              } = callbacksRef.current;
-              if (onDragging) {
-                onDragging(false);
-              }
-              break;
             }
-        }
-      } else {
-        setState("inactive");
+            assert(event, 'Expected event to be defined for "move" action');
+            resizeHandler(event);
+            break;
+          }
+        case "up":
+          {
+            setState("hover");
+            stopDragging();
+            const {
+              onClick,
+              onDragging,
+              onPointerUp
+            } = callbacksRef.current;
+            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;
+          }
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
@@ -2491,7 +2516,7 @@ function PanelResizeHandle({
     touchAction: "none",
     userSelect: "none"
   };
-  return createElement(Type, {
+  return React.createElement(Type, {
     ...rest,
     children,
     className: classNameFromProps,
@@ -2512,13 +2537,13 @@ function PanelResizeHandle({
     },
     tabIndex,
     // CSS selectors
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-resize-handle": "",
-    "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
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.resizeHandle]: "",
+    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
+    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
+    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleState]: state
   });
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
@@ -2552,6 +2577,7 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
   };
 }
 
+exports.DATA_ATTRIBUTES = DATA_ATTRIBUTES;
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;