react-resizable-panels 0.0.57 → 0.0.59

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

@@ -42,6 +42,7 @@ function PanelWithForwardedRef({
   collapsedSizePercentage,
   collapsedSizePixels,
   collapsible,
+  dataAttributes,
   defaultSizePercentage,
   defaultSizePixels,
   forwardedRef,
@@ -127,6 +128,7 @@ function PanelWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ...dataAttributes,
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,
@@ -142,8 +144,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
-const PRECISION = 10;
-
 function convertPixelsToPercentage(pixels, groupSizePixels) {
   return pixels / groupSizePixels * 100;
 }
@@ -221,6 +221,8 @@ function computePercentagePanelConstraints(panelConstraintsArray, panelIndex, gr
   };
 }
 
+const PRECISION = 10;
+
 function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
   actual = parseFloat(actual.toFixed(fractionDigits));
   expected = parseFloat(expected.toFixed(fractionDigits));
@@ -264,7 +266,13 @@ function resizePanel({
   if (minSizePercentage != null) {
     if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
       if (collapsible) {
-        size = collapsedSizePercentage;
+        // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+        const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
+        if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+          size = collapsedSizePercentage;
+        } else {
+          size = minSizePercentage;
+        }
       } else {
         size = minSizePercentage;
       }
@@ -291,60 +299,123 @@ function adjustLayoutByDelta({
   const nextLayout = [...prevLayout];
   let deltaApplied = 0;
 
+  //const DEBUG = [];
+  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
+  //DEBUG.push(`  delta: ${delta}`);
+  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+  //DEBUG.push(`  trigger: ${trigger}`);
+  //DEBUG.push("");
+
   // A resizing panel affects the panels before or after it.
   //
-  // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
   // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
   //
-  // A positive delta means the panel immediately before the resizer should "expand".
-  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+  // A positive delta means the panel(s) immediately before the resize handle should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
 
-  // First, check the panel we're pivoting around;
-  // We should only expand or contract by as much as its constraints allow
   {
-    const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-    const initialSize = nextLayout[pivotIndex];
-    const {
-      collapsible
-    } = panelConstraints[pivotIndex];
-    const {
-      collapsedSizePercentage,
-      minSizePercentage
-    } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
-    const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
-    let unsafeSize = initialSize + Math.abs(delta);
-    if (isCollapsed) {
-      switch (trigger) {
-        case "keyboard":
-          if (minSizePercentage > unsafeSize) {
-            unsafeSize = minSizePercentage;
+    // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
+    // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
+    if (trigger === "keyboard") {
+      {
+        // Check if we should expand a collapsed panel
+        const index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+        const constraints = panelConstraints[index];
+        //DEBUG.push(`edge case check 1: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        if (constraints.collapsible) {
+          const prevSize = prevLayout[index];
+          const {
+            collapsedSizePercentage,
+            minSizePercentage
+          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
+          if (fuzzyNumbersEqual(prevSize, collapsedSizePercentage)) {
+            const localDelta = minSizePercentage - prevSize;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
+            }
           }
+        }
+      }
+
+      {
+        // Check if we should collapse a panel at its minimum size
+        const index = delta < 0 ? pivotIndices[0] : pivotIndices[1];
+        const constraints = panelConstraints[index];
+        //DEBUG.push(`edge case check 2: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        if (constraints.collapsible) {
+          const prevSize = prevLayout[index];
+          const {
+            collapsedSizePercentage,
+            minSizePercentage
+          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
+          if (fuzzyNumbersEqual(prevSize, minSizePercentage)) {
+            const localDelta = prevSize - collapsedSizePercentage;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
+            }
+          }
+        }
       }
     }
-    const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
-      panelIndex: pivotIndex,
-      size: unsafeSize
-    });
-    if (fuzzyNumbersEqual(initialSize, safeSize)) {
-      // If there's no room for the pivot panel to grow, we should ignore this change
-      return nextLayout;
-    } else {
-      delta = delta < 0 ? initialSize - safeSize : safeSize - initialSize;
+    //DEBUG.push("");
+  }
+
+  {
+    // Pre-calculate max available delta in the opposite direction of our pivot.
+    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+    // If this amount is less than the requested delta, adjust the requested delta.
+    // If this amount is greater than the requested delta, that's useful information too–
+    // as an expanding panel might change from collapsed to min size.
+
+    const increment = delta < 0 ? 1 : -1;
+    let index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+    let maxAvailableDelta = 0;
+
+    //DEBUG.push("pre calc...");
+    while (true) {
+      const prevSize = prevLayout[index];
+      const maxSafeSize = resizePanel({
+        groupSizePixels,
+        panelConstraints,
+        panelIndex: index,
+        size: 100
+      });
+      const delta = maxSafeSize - prevSize;
+      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+
+      maxAvailableDelta += delta;
+      index += increment;
+      if (index < 0 || index >= panelConstraints.length) {
+        break;
+      }
     }
+
+    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+    //DEBUG.push(`  -> adjusted delta: ${delta}`);
+    //DEBUG.push("");
   }
 
-  // Delta added to a panel needs to be subtracted from other panels
-  // within the constraints that those panels allow
   {
+    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
     const pivotIndex = delta < 0 ? pivotIndices[0] : pivotIndices[1];
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraints.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
       const prevSize = prevLayout[index];
       const unsafeSize = prevSize - deltaRemaining;
-      let safeSize = resizePanel({
+      const safeSize = resizePanel({
         groupSizePixels,
         panelConstraints,
         panelIndex: index,
@@ -366,13 +437,18 @@ function adjustLayoutByDelta({
       }
     }
   }
+  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
 
   // If we were unable to resize any of the panels panels, return the previous state.
   // This will essentially bailout and ignore e.g. drags past a panel's boundaries
   if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    //console.log(DEBUG.join("\n"));
     return prevLayout;
   }
   {
+    // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
     const unsafeSize = prevLayout[pivotIndex] + deltaApplied;
     const safeSize = resizePanel({
@@ -412,29 +488,21 @@ function adjustLayoutByDelta({
           index++;
         }
       }
-
-      // If we can't redistribute, this layout is invalid;
-      // There may be an incremental layout that is valid though
-      if (!fuzzyNumbersEqual(deltaRemaining, 0)) {
-        try {
-          return adjustLayoutByDelta({
-            delta: delta < 0 ? delta + 1 : delta - 1,
-            groupSizePixels,
-            layout: prevLayout,
-            panelConstraints,
-            pivotIndices,
-            trigger
-          });
-        } catch (error) {
-          if (error instanceof RangeError) {
-            console.error(`Could not apply delta ${delta} to layout`);
-            return prevLayout;
-          }
-        } finally {
-        }
-      }
     }
   }
+  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
+
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+  deltaApplied = 100 - totalSize;
+  //DEBUG.push(`total size: ${totalSize}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //console.log(DEBUG.join("\n"));
+
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
+  }
   return nextLayout;
 }
 
@@ -548,15 +616,10 @@ function useWindowSplitterPanelGroupBehavior({
   });
   useEffect(() => {
     const {
-      direction,
       panelDataArray
     } = committedValuesRef.current;
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
-    const {
-      height,
-      width
-    } = groupElement.getBoundingClientRect();
     const handles = getResizeHandleElementsForGroup(groupId);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
@@ -576,21 +639,19 @@ function useWindowSplitterPanelGroupBehavior({
               if (index >= 0) {
                 const panelData = panelDataArray[index];
                 const size = layout[index];
-                if (size != null) {
-                  var _getPercentageSizeFro;
+                if (size != null && panelData.constraints.collapsible) {
+                  var _getPercentageSizeFro, _getPercentageSizeFro2;
                   const groupSizePixels = getAvailableGroupSizePixels(groupId);
-                  const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
+                  const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
+                    sizePercentage: panelData.constraints.collapsedSizePercentage,
+                    sizePixels: panelData.constraints.collapsedSizePixels
+                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
+                  const minSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
                     sizePercentage: panelData.constraints.minSizePercentage,
                     sizePixels: panelData.constraints.minSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-                  let delta = 0;
-                  if (size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)) {
-                    delta = direction === "horizontal" ? width : height;
-                  } else {
-                    delta = -(direction === "horizontal" ? width : height);
-                  }
+                  }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 0;
                   const nextLayout = adjustLayoutByDelta({
-                    delta,
+                    delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
                     groupSizePixels,
                     layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
@@ -998,6 +1059,7 @@ function PanelGroupWithForwardedRef({
   autoSaveId,
   children,
   className: classNameFromProps = "",
+  dataAttributes,
   direction,
   forwardedRef,
   id: idFromProps,
@@ -1015,6 +1077,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1104,6 +1167,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "collapse"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1147,6 +1221,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "expand"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1342,6 +1427,18 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        mixedSizes,
+        type: "resize"
+      }]);
+      return;
+    }
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1432,6 +1529,7 @@ function PanelGroupWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ...dataAttributes,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -1519,6 +1617,7 @@ function useWindowSplitterResizeHandlerBehavior({
 function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
+  dataAttributes,
   disabled = false,
   id: idFromProps = null,
   onDragging,
@@ -1641,6 +1740,7 @@ function PanelResizeHandle({
       ...styleFromProps
     },
     tabIndex: 0,
+    ...dataAttributes,
     // CSS selectors
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.ts

@@ -3,7 +3,7 @@ import { isDevelopment } from "#is-development";
 import { PanelGroupContext } from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
-import { MixedSizes } from "./types";
+import { DataAttributes, MixedSizes } from "./types";
 import {
   ElementType,
   ForwardedRef,
@@ -19,7 +19,7 @@ export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (
   mixedSizes: MixedSizes,
-  prevMixedSizes: MixedSizes
+  prevMixedSizes: MixedSizes | undefined
 ) => void;
 
 export type PanelCallbacks = {
@@ -53,6 +53,8 @@ export type ImperativePanelHandle = {
   expand: () => void;
   getId(): string;
   getSize(): MixedSizes;
+  isCollapsed: () => boolean;
+  isExpanded: () => boolean;
   resize: (size: Partial<MixedSizes>) => void;
 };
 
@@ -61,6 +63,7 @@ export type PanelProps = PropsWithChildren<{
   collapsedSizePercentage?: number | undefined;
   collapsedSizePixels?: number | undefined;
   collapsible?: boolean | undefined;
+  dataAttributes?: DataAttributes;
   defaultSizePercentage?: number | undefined;
   defaultSizePixels?: number | undefined;
   id?: string;
@@ -82,6 +85,7 @@ export function PanelWithForwardedRef({
   collapsedSizePercentage,
   collapsedSizePixels,
   collapsible,
+  dataAttributes,
   defaultSizePercentage,
   defaultSizePixels,
   forwardedRef,
@@ -241,6 +245,8 @@ export function PanelWithForwardedRef({
       ...styleFromProps,
     },
 
+    ...dataAttributes,
+
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,

package/src/PanelGroup.ts

@@ -4,7 +4,7 @@ import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
-import { Direction, MixedSizes } from "./types";
+import { DataAttributes, Direction, MixedSizes } from "./types";
 import { adjustLayoutByDelta } from "./utils/adjustLayoutByDelta";
 import { areEqual } from "./utils/arrays";
 import { calculateDeltaPercentage } from "./utils/calculateDeltaPercentage";
@@ -72,6 +72,7 @@ const defaultStorage: PanelGroupStorage = {
 export type PanelGroupProps = PropsWithChildren<{
   autoSaveId?: string;
   className?: string;
+  dataAttributes?: DataAttributes;
   direction: Direction;
   id?: string | null;
   keyboardResizeByPercentage?: number | null;
@@ -82,6 +83,12 @@ export type PanelGroupProps = PropsWithChildren<{
   tagName?: ElementType;
 }>;
 
+type ImperativeApiQueue = {
+  type: "collapse" | "expand" | "resize";
+  mixedSizes?: Partial<MixedSizes>;
+  panelData: PanelData;
+};
+
 const debounceMap: {
   [key: string]: typeof savePanelGroupLayout;
 } = {};
@@ -90,6 +97,7 @@ function PanelGroupWithForwardedRef({
   autoSaveId,
   children,
   className: classNameFromProps = "",
+  dataAttributes,
   direction,
   forwardedRef,
   id: idFromProps,
@@ -114,6 +122,10 @@ function PanelGroupWithForwardedRef({
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
   const prevDeltaRef = useRef<number>(0);
 
+  const [imperativeApiQueue, setImperativeApiQueue] = useState<
+    ImperativeApiQueue[]
+  >([]);
+
   const committedValuesRef = useRef<{
     direction: Direction;
     dragState: DragState | null;
@@ -267,8 +279,14 @@ function PanelGroupWithForwardedRef({
 
     const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
     if (groupSizePixels <= 0) {
-      // Wait until the group has rendered a non-zero size before computing layout.
-      return;
+      if (
+        shouldMonitorPixelBasedConstraints(
+          panelDataArray.map(({ constraints }) => constraints)
+        )
+      ) {
+        // Wait until the group has rendered a non-zero size before computing layout.
+        return;
+      }
     }
 
     if (unsafeLayout == null) {
@@ -440,6 +458,18 @@ function PanelGroupWithForwardedRef({
         panelDataArray,
       } = committedValuesRef.current;
 
+      // See issues/211
+      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
+        setImperativeApiQueue((prev) => [
+          ...prev,
+          {
+            panelData,
+            type: "collapse",
+          },
+        ]);
+        return;
+      }
+
       if (panelData.constraints.collapsible) {
         const panelConstraintsArray = panelDataArray.map(
           (panelData) => panelData.constraints
@@ -512,6 +542,18 @@ function PanelGroupWithForwardedRef({
         panelDataArray,
       } = committedValuesRef.current;
 
+      // See issues/211
+      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
+        setImperativeApiQueue((prev) => [
+          ...prev,
+          {
+            panelData,
+            type: "expand",
+          },
+        ]);
+        return;
+      }
+
       if (panelData.constraints.collapsible) {
         const panelConstraintsArray = panelDataArray.map(
           (panelData) => panelData.constraints
@@ -778,6 +820,19 @@ function PanelGroupWithForwardedRef({
         panelDataArray,
       } = committedValuesRef.current;
 
+      // See issues/211
+      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
+        setImperativeApiQueue((prev) => [
+          ...prev,
+          {
+            panelData,
+            mixedSizes,
+            type: "resize",
+          },
+        ]);
+        return;
+      }
+
       const panelConstraintsArray = panelDataArray.map(
         (panelData) => panelData.constraints
       );
@@ -871,6 +926,35 @@ function PanelGroupWithForwardedRef({
     });
   }, []);
 
+  // Handle imperative API calls that were made before panels were registered
+  useIsomorphicLayoutEffect(() => {
+    const queue = imperativeApiQueue;
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      switch (current.type) {
+        case "collapse": {
+          collapsePanel(current.panelData);
+          break;
+        }
+        case "expand": {
+          expandPanel(current.panelData);
+          break;
+        }
+        case "resize": {
+          resizePanel(current.panelData, current.mixedSizes!);
+          break;
+        }
+      }
+    }
+  }, [
+    collapsePanel,
+    expandPanel,
+    imperativeApiQueue,
+    layout,
+    panelDataArray,
+    resizePanel,
+  ]);
+
   const context = useMemo(
     () => ({
       collapsePanel,
@@ -927,6 +1011,8 @@ function PanelGroupWithForwardedRef({
         ...styleFromProps,
       },
 
+      ...dataAttributes,
+
       // CSS selectors
       "data-panel-group": "",
       "data-panel-group-direction": direction,

package/src/PanelResizeHandle.ts

@@ -20,12 +20,14 @@ import {
   ResizeHandler,
 } from "./PanelGroupContext";
 import { getCursorStyle } from "./utils/cursor";
+import { DataAttributes } from "./types";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
 export type PanelResizeHandleProps = {
   children?: ReactNode;
   className?: string;
+  dataAttributes?: DataAttributes;
   disabled?: boolean;
   id?: string | null;
   onDragging?: PanelResizeHandleOnDragging;
@@ -36,6 +38,7 @@ export type PanelResizeHandleProps = {
 export function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
+  dataAttributes,
   disabled = false,
   id: idFromProps = null,
   onDragging,
@@ -180,6 +183,8 @@ export function PanelResizeHandle({
     },
     tabIndex: 0,
 
+    ...dataAttributes,
+
     // CSS selectors
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,