react-resizable-panels 2.1.7 → 2.1.8

package/README.md

@@ -175,6 +175,10 @@ This likely means that you haven't applied any CSS to style the resize handles.
 <PanelResizeHandle className="w-2 bg-blue-800" />
 ```
 
+### Can panel sizes be persistent?
+
+Yes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.
+
 ### How can I use persistent layouts with SSR?
 
 By default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:

package/dist/declarations/src/Panel.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
+import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactElement } from "react";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (size: number, prevSize: number | undefined) => void;

package/dist/declarations/src/PanelGroup.d.ts

@@ -1,5 +1,5 @@
 import { Direction } from "./types.js";
-import { CSSProperties, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren } from "react";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
     getLayout: () => number[];

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,20 +1,23 @@
 import { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
-import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "react";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
-export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onBlur" | "onFocus"> & PropsWithChildren<{
+export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onBlur" | "onClick" | "onFocus" | "onPointerDown" | "onPointerUp"> & PropsWithChildren<{
     className?: string;
     disabled?: boolean;
     hitAreaMargins?: PointerHitAreaMargins;
     id?: string | null;
     onBlur?: () => void;
+    onClick?: () => void;
     onDragging?: PanelResizeHandleOnDragging;
     onFocus?: () => void;
+    onPointerDown?: () => void;
+    onPointerUp?: () => void;
     style?: CSSProperties;
     tabIndex?: number;
     tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onBlur, onDragging, onFocus, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onBlur, onClick, onDragging, onFocus, onPointerDown, onPointerUp, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

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

@@ -24,41 +24,19 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(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__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 = useLayoutEffect_do_not_use_directly ;
+const useIsomorphicLayoutEffect = 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++;
   }
@@ -83,7 +61,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`);
   }
@@ -100,7 +78,7 @@ function PanelWithForwardedRef({
     unregisterPanel
   } = context;
   const panelId = useUniqueId(idFromProps);
-  const panelDataRef = useRef({
+  const panelDataRef = React.useRef({
     callbacks: {
       onCollapse,
       onExpand,
@@ -117,7 +95,7 @@ function PanelWithForwardedRef({
     idIsFromProps: idFromProps !== undefined,
     order
   });
-  useRef({
+  React.useRef({
     didLogMissingDefaultSizeWarning: false
   });
   useIsomorphicLayoutEffect(() => {
@@ -153,7 +131,7 @@ function PanelWithForwardedRef({
       unregisterPanel(panelData);
     };
   }, [order, panelId, registerPanel, unregisterPanel]);
-  useImperativeHandle(forwardedRef, () => ({
+  React.useImperativeHandle(forwardedRef, () => ({
     collapse: () => {
       collapsePanel(panelDataRef.current);
     },
@@ -177,11 +155,11 @@ 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
@@ -194,7 +172,7 @@ function PanelWithForwardedRef({
     "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
-const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
+const Panel = React.forwardRef((props, ref) => React.createElement(PanelWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
@@ -666,7 +644,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);
   });
@@ -714,8 +694,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) {
@@ -1128,7 +1108,7 @@ function useWindowSplitterPanelGroupBehavior({
   panelGroupElement,
   setLayout
 }) {
-  useRef({
+  React.useRef({
     didWarnAboutMissingResizeHandle: false
   });
   useIsomorphicLayoutEffect(() => {
@@ -1165,7 +1145,7 @@ function useWindowSplitterPanelGroupBehavior({
       });
     };
   }, [groupId, layout, panelDataArray, panelGroupElement]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (!panelGroupElement) {
       return;
     }
@@ -1624,14 +1604,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,
@@ -1640,17 +1620,17 @@ function PanelGroupWithForwardedRef({
     onLayout,
     storage
   });
-  const eagerValuesRef = useRef({
+  const eagerValuesRef = React.useRef({
     layout,
     panelDataArray: [],
     panelDataArrayChanged: false
   });
-  useRef({
+  React.useRef({
     didLogIdAndOrderWarning: false,
     didLogPanelConstraintsWarning: false,
     prevPanelIds: []
   });
-  useImperativeHandle(forwardedRef, () => ({
+  React.useImperativeHandle(forwardedRef, () => ({
     getId: () => committedValuesRef.current.id,
     getLayout: () => {
       const {
@@ -1697,7 +1677,7 @@ function PanelGroupWithForwardedRef({
     setLayout,
     panelGroupElement: panelGroupElementRef.current
   });
-  useEffect(() => {
+  React.useEffect(() => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
@@ -1724,11 +1704,11 @@ function PanelGroupWithForwardedRef({
   }, [autoSaveId, layout, storage]);
 
   // DEV warnings
-  useEffect(() => {
+  React.useEffect(() => {
   });
 
   // External APIs are safe to memoize via committed values ref
-  const collapsePanel = useCallback(panelData => {
+  const collapsePanel = React.useCallback(panelData => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1771,7 +1751,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;
@@ -1815,7 +1795,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
@@ -1828,7 +1808,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;
@@ -1843,7 +1823,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
@@ -1858,7 +1838,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
@@ -1871,7 +1851,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;
@@ -1948,7 +1928,7 @@ function PanelGroupWithForwardedRef({
       eagerValues.layout = [];
     };
   }, []);
-  const registerResizeHandle = useCallback(dragHandleId => {
+  const registerResizeHandle = React.useCallback(dragHandleId => {
     let isRTL = false;
     const panelGroupElement = panelGroupElementRef.current;
     if (panelGroupElement) {
@@ -2027,7 +2007,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;
@@ -2060,7 +2040,7 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
-  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+  const reevaluatePanelConstraints = React.useCallback((panelData, prevConstraints) => {
     const {
       layout,
       panelDataArray
@@ -2094,7 +2074,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;
@@ -2114,10 +2094,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;
@@ -2134,7 +2114,7 @@ function PanelGroupWithForwardedRef({
       forceUpdate();
     }
   }, [forceUpdate]);
-  const context = useMemo(() => ({
+  const context = React.useMemo(() => ({
     collapsePanel,
     direction,
     dragState,
@@ -2160,9 +2140,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,
@@ -2178,7 +2158,7 @@ function PanelGroupWithForwardedRef({
     "data-panel-group-id": groupId
   }));
 }
-const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
+const PanelGroup = React.forwardRef((props, ref) => React.createElement(PanelGroupWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
@@ -2207,7 +2187,7 @@ function useWindowSplitterResizeHandlerBehavior({
   resizeHandler,
   panelGroupElement
 }) {
-  useEffect(() => {
+  React.useEffect(() => {
     if (disabled || resizeHandler == null || panelGroupElement == null) {
       return;
     }
@@ -2260,24 +2240,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`);
   }
@@ -2290,16 +2279,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 {
@@ -2312,26 +2301,28 @@ 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");
+              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":
@@ -2339,6 +2330,7 @@ function PanelResizeHandle({
               const {
                 state
               } = committedValuesRef.current;
+              didMove = true;
               if (state !== "drag") {
                 setState("hover");
               }
@@ -2351,10 +2343,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;
             }
@@ -2378,7 +2374,7 @@ function PanelResizeHandle({
     touchAction: "none",
     userSelect: "none"
   };
-  return createElement(Type, {
+  return React.createElement(Type, {
     ...rest,
     children,
     className: classNameFromProps,