react-resizable-panels 0.0.56 → 0.0.58

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.0.58
+
+- Change group layout to more thoroughly distribute resize delta to support more flexible group size configurations.
+- Add data attribute support to `Panel`, `PanelGroup`, and `PanelResizeHandle`.
+- Update API documentation to reflect changed imperative API method names.
+- `PanelOnResize` TypeScript def updated to reflect that previous size param is `undefined` the first time it is called.
+
+## 0.0.57
+
+- [#207](https://github.com/bvaughn/react-resizable-panels/pull/207): Fix DEV conditional error that broke data attributes (and selectors).
+
 ## 0.0.56
 
 Support a mix of percentage and pixel based units at the `Panel` level:

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

@@ -1,8 +1,8 @@
-import { MixedSizes } from "./types.js";
+import { DataAttributes, MixedSizes } from "./types.js";
 import { ElementType, ForwardedRef, PropsWithChildren } from "./vendor/react.js";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
-export type PanelOnResize = (mixedSizes: MixedSizes, prevMixedSizes: MixedSizes) => void;
+export type PanelOnResize = (mixedSizes: MixedSizes, prevMixedSizes: MixedSizes | undefined) => void;
 export type PanelCallbacks = {
     onCollapse?: PanelOnCollapse;
     onExpand?: PanelOnExpand;
@@ -31,6 +31,8 @@ export type ImperativePanelHandle = {
     expand: () => void;
     getId(): string;
     getSize(): MixedSizes;
+    isCollapsed: () => boolean;
+    isExpanded: () => boolean;
     resize: (size: Partial<MixedSizes>) => void;
 };
 export type PanelProps = PropsWithChildren<{
@@ -38,6 +40,7 @@ export type PanelProps = PropsWithChildren<{
     collapsedSizePercentage?: number | undefined;
     collapsedSizePixels?: number | undefined;
     collapsible?: boolean | undefined;
+    dataAttributes?: DataAttributes;
     defaultSizePercentage?: number | undefined;
     defaultSizePixels?: number | undefined;
     id?: string;
@@ -52,7 +55,7 @@ export type PanelProps = PropsWithChildren<{
     style?: object;
     tagName?: ElementType;
 }>;
-export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSizePercentage, collapsedSizePixels, collapsible, defaultSizePercentage, defaultSizePixels, forwardedRef, id: idFromProps, maxSizePercentage, maxSizePixels, minSizePercentage, minSizePixels, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps & {
+export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSizePercentage, collapsedSizePixels, collapsible, dataAttributes, defaultSizePercentage, defaultSizePixels, forwardedRef, id: idFromProps, maxSizePercentage, maxSizePixels, minSizePercentage, minSizePixels, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps & {
     forwardedRef: ForwardedRef<ImperativePanelHandle>;
 }): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace PanelWithForwardedRef {
@@ -63,6 +66,7 @@ export declare const Panel: import("react").ForwardRefExoticComponent<{
     collapsedSizePercentage?: number | undefined;
     collapsedSizePixels?: number | undefined;
     collapsible?: boolean | undefined;
+    dataAttributes?: DataAttributes | undefined;
     defaultSizePercentage?: number | undefined;
     defaultSizePixels?: number | undefined;
     id?: string | undefined;

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

@@ -1,4 +1,4 @@
-import { Direction, MixedSizes } from "./types.js";
+import { DataAttributes, Direction, MixedSizes } from "./types.js";
 import { CSSProperties, ElementType, PropsWithChildren } from "./vendor/react.js";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
@@ -13,6 +13,7 @@ export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
 export type PanelGroupProps = PropsWithChildren<{
     autoSaveId?: string;
     className?: string;
+    dataAttributes?: DataAttributes;
     direction: Direction;
     id?: string | null;
     keyboardResizeByPercentage?: number | null;
@@ -25,6 +26,7 @@ export type PanelGroupProps = PropsWithChildren<{
 export declare const PanelGroup: import("react").ForwardRefExoticComponent<{
     autoSaveId?: string | undefined;
     className?: string | undefined;
+    dataAttributes?: DataAttributes | undefined;
     direction: Direction;
     id?: string | null | undefined;
     keyboardResizeByPercentage?: number | null | undefined;

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

@@ -1,15 +1,17 @@
 import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
+import { DataAttributes } from "./types.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;
+    dataAttributes?: DataAttributes;
     disabled?: boolean;
     id?: string | null;
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
     tagName?: ElementType;
 };
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, dataAttributes, disabled, id: idFromProps, onDragging, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

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

@@ -5,3 +5,6 @@ export type MixedSizes = {
 };
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;
+export type DataAttributes = {
+    [attribute: string]: string | number | boolean | undefined;
+};

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

@@ -59,7 +59,7 @@ function useUniqueId(idFromParams = null) {
   if (idRef.current === null) {
     idRef.current = "" + counter++;
   }
-  return idFromParams ?? idRef.current;
+  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
 }
 
 function PanelWithForwardedRef({
@@ -68,6 +68,7 @@ function PanelWithForwardedRef({
   collapsedSizePercentage,
   collapsedSizePixels,
   collapsible,
+  dataAttributes,
   defaultSizePercentage,
   defaultSizePixels,
   forwardedRef,
@@ -181,11 +182,12 @@ function PanelWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ...dataAttributes,
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": undefined,
-    "data-panel-id": undefined,
     "data-panel-size": undefined
   });
 }
@@ -213,6 +215,16 @@ function convertPixelConstraintsToPercentages(panelConstraints, groupSizePixels)
     minSizePercentage = 0,
     minSizePixels
   } = panelConstraints;
+  const hasPixelConstraints = collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null;
+  if (hasPixelConstraints && groupSizePixels <= 0) {
+    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
+    return {
+      collapsedSizePercentage: 0,
+      defaultSizePercentage,
+      maxSizePercentage: 0,
+      minSizePercentage: 0
+    };
+  }
   if (collapsedSizePixels != null) {
     collapsedSizePercentage = convertPixelsToPercentage(collapsedSizePixels, groupSizePixels);
   }
@@ -287,6 +299,16 @@ function resizePanel({
   panelIndex,
   size
 }) {
+  const hasPixelConstraints = panelConstraints.some(({
+    collapsedSizePixels,
+    defaultSizePixels,
+    minSizePixels,
+    maxSizePixels
+  }) => collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null);
+  if (hasPixelConstraints && groupSizePixels <= 0) {
+    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
+    return 0;
+  }
   let {
     collapsible
   } = panelConstraints[panelIndex];
@@ -298,7 +320,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;
       }
@@ -325,61 +353,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,
-      maxSizePercentage,
-      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,
@@ -401,13 +491,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({
@@ -447,29 +542,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;
 }
 
@@ -505,6 +592,7 @@ function calculateAriaValues({
 
   // A panel's effective min/max sizes also need to account for other panel's sizes.
   panelsArray.forEach((panelData, index) => {
+    var _getPercentageSizeFro, _getPercentageSizeFro2;
     const {
       constraints
     } = panelData;
@@ -514,14 +602,14 @@ function calculateAriaValues({
       minSizePercentage,
       minSizePixels
     } = constraints;
-    const minSize = getPercentageSizeFromMixedSizes({
+    const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
       sizePercentage: minSizePercentage,
       sizePixels: minSizePixels
-    }, groupSizePixels) ?? 0;
-    const maxSize = getPercentageSizeFromMixedSizes({
+    }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
+    const maxSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
       sizePercentage: maxSizePercentage,
       sizePixels: maxSizePixels
-    }, groupSizePixels) ?? 100;
+    }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 100;
     if (index === pivotIndices[0]) {
       currentMinSize = minSize;
       currentMaxSize = maxSize;
@@ -547,7 +635,7 @@ function getResizeHandleElementsForGroup(groupId) {
 function getResizeHandleElementIndex(groupId, id) {
   const handles = getResizeHandleElementsForGroup(groupId);
   const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
-  return index ?? null;
+  return index !== null && index !== void 0 ? index : null;
 }
 
 function determinePivotIndices(groupId, dragHandleId) {
@@ -556,7 +644,7 @@ function determinePivotIndices(groupId, dragHandleId) {
 }
 
 function getPanelGroupElement(id) {
-  const element = document.querySelector(`[data-panel-group-id="${id}"]`);
+  const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
   if (element) {
     return element;
   }
@@ -608,11 +696,12 @@ function getResizeHandleElement(id) {
 }
 
 function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
+  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
   const handle = getResizeHandleElement(handleId);
   const handles = getResizeHandleElementsForGroup(groupId);
   const index = handle ? handles.indexOf(handle) : -1;
-  const idBefore = panelsArray[index]?.id ?? null;
-  const idAfter = panelsArray[index + 1]?.id ?? null;
+  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
+  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
   return [idBefore, idAfter];
 }
 
@@ -690,11 +779,12 @@ function useWindowSplitterPanelGroupBehavior({
                 const panelData = panelDataArray[index];
                 const size = layout[index];
                 if (size != null) {
+                  var _getPercentageSizeFro;
                   const groupSizePixels = getAvailableGroupSizePixels(groupId);
-                  const minSize = getPercentageSizeFromMixedSizes({
+                  const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
                     sizePercentage: panelData.constraints.minSizePercentage,
                     sizePixels: panelData.constraints.minSizePixels
-                  }, groupSizePixels) ?? 0;
+                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
                   let delta = 0;
                   if (size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)) {
                     delta = direction === "horizontal" ? width : height;
@@ -899,10 +989,11 @@ function callPanelCallbacks(groupId, panelsArray, layout, panelIdToLastNotifiedM
         onResize(mixedSizes, lastNotifiedMixedSizes);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        const collapsedSize = getPercentageSizeFromMixedSizes({
+        var _getPercentageSizeFro;
+        const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
           sizePercentage: constraints.collapsedSizePercentage,
           sizePixels: constraints.collapsedSizePixels
-        }, groupSizePixels) ?? 0;
+        }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
         const size = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
         if (onExpand && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage === collapsedSize) && size !== collapsedSize) {
           onExpand();
@@ -1068,8 +1159,9 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
 function loadPanelLayout(autoSaveId, panels, storage) {
   const state = loadSerializedPanelGroupState(autoSaveId, storage);
   if (state) {
+    var _state$key;
     const key = getSerializationKey(panels);
-    return state[key] ?? null;
+    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
   }
   return null;
 }
@@ -1161,6 +1253,7 @@ function PanelGroupWithForwardedRef({
   autoSaveId,
   children,
   className: classNameFromProps = "",
+  dataAttributes,
   direction,
   forwardedRef,
   id: idFromProps,
@@ -1285,6 +1378,10 @@ function PanelGroupWithForwardedRef({
       unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
     }
     const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    if (groupSizePixels <= 0) {
+      // Wait until the group has rendered a non-zero size before computing layout.
+      return;
+    }
     if (unsafeLayout == null) {
       unsafeLayout = calculateUnsafeDefaultLayout({
         groupSizePixels,
@@ -1528,7 +1625,7 @@ function PanelGroupWithForwardedRef({
       } = committedValuesRef.current;
       const {
         initialLayout
-      } = dragState ?? {};
+      } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId);
       let delta = calculateDeltaPercentage(event, groupId, dragHandleId, direction, dragState, {
         percentage: keyboardResizeByPercentage,
@@ -1548,7 +1645,7 @@ function PanelGroupWithForwardedRef({
       const nextLayout = adjustLayoutByDelta({
         delta,
         groupSizePixels,
-        layout: initialLayout ?? prevLayout,
+        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
         trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
@@ -1689,11 +1786,11 @@ function PanelGroupWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ...dataAttributes,
     // CSS selectors
     "data-panel-group": "",
-    // e2e test attributes
-    "data-panel-group-direction": undefined,
-    "data-panel-group-id": undefined
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId
   }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
@@ -1777,6 +1874,7 @@ function useWindowSplitterResizeHandlerBehavior({
 function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
+  dataAttributes,
   disabled = false,
   id: idFromProps = null,
   onDragging,
@@ -1805,7 +1903,7 @@ function PanelResizeHandle({
     stopDragging
   } = panelGroupContext;
   const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = dragState?.dragHandleId === resizeHandleId;
+  const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
   const stopDraggingAndBlur = useCallback(() => {
@@ -1869,13 +1967,6 @@ function PanelResizeHandle({
   return createElement(Type, {
     children,
     className: classNameFromProps,
-    // CSS selectors
-    "data-resize-handle": "",
-    "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     onMouseDown: event => {
@@ -1905,7 +1996,15 @@ function PanelResizeHandle({
       ...style,
       ...styleFromProps
     },
-    tabIndex: 0
+    tabIndex: 0,
+    ...dataAttributes,
+    // CSS selectors
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId,
+    "data-resize-handle": "",
+    "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+    "data-panel-resize-handle-enabled": !disabled,
+    "data-panel-resize-handle-id": resizeHandleId
   });
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";