react-resizable-panels 2.1.7 → 2.1.8

package/dist/react-resizable-panels.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) {
@@ -121,7 +101,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps
@@ -606,7 +586,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);
   });
@@ -2016,8 +1998,11 @@ function PanelResizeHandle({
   hitAreaMargins,
   id: idFromProps,
   onBlur,
+  onClick,
   onDragging,
   onFocus,
+  onPointerDown,
+  onPointerUp,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2028,10 +2013,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) {
@@ -2071,20 +2062,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":
@@ -2092,6 +2085,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2104,10 +2098,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -79,7 +79,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "eslint": "^8.37.0",
-    "eslint-plugin-no-restricted-imports": "^0.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/dist/declarations/src/vendor/react.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent } from "react";
-declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
-declare const useId: () => string;
-declare const useLayoutEffect_do_not_use_directly: typeof React.useLayoutEffect;
-export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect_do_not_use_directly, useMemo, useRef, useState, };
-export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent, };