react-resizable-panels 0.0.56 → 0.0.57

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

@@ -61,7 +61,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({
@@ -196,9 +196,9 @@ function PanelWithForwardedRef({
     },
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-id": panelId ,
     "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
   });
 }
@@ -226,6 +226,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);
   }
@@ -300,6 +310,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];
@@ -356,7 +376,6 @@ function adjustLayoutByDelta({
     } = panelConstraints[pivotIndex];
     const {
       collapsedSizePercentage,
-      maxSizePercentage,
       minSizePercentage
     } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
     const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
@@ -518,6 +537,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;
@@ -527,14 +547,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;
@@ -560,7 +580,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) {
@@ -569,7 +589,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;
   }
@@ -621,11 +641,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];
 }
 
@@ -713,11 +734,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;
@@ -922,10 +944,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();
@@ -1091,8 +1114,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;
 }
@@ -1385,6 +1409,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,
@@ -1670,7 +1698,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,
@@ -1690,7 +1718,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"
@@ -1833,9 +1861,8 @@ function PanelGroupWithForwardedRef({
     },
     // CSS selectors
     "data-panel-group": "",
-    // e2e test attributes
-    "data-panel-group-direction": direction ,
-    "data-panel-group-id": groupId 
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId
   }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
@@ -1947,7 +1974,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(() => {
@@ -2011,13 +2038,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 => {
@@ -2047,7 +2067,14 @@ function PanelResizeHandle({
       ...style,
       ...styleFromProps
     },
-    tabIndex: 0
+    tabIndex: 0,
+    // 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";

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

@@ -37,7 +37,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({
@@ -172,9 +172,9 @@ function PanelWithForwardedRef({
     },
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-id": panelId ,
     "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
   });
 }
@@ -202,6 +202,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);
   }
@@ -276,6 +286,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];
@@ -332,7 +352,6 @@ function adjustLayoutByDelta({
     } = panelConstraints[pivotIndex];
     const {
       collapsedSizePercentage,
-      maxSizePercentage,
       minSizePercentage
     } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
     const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
@@ -494,6 +513,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;
@@ -503,14 +523,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;
@@ -536,7 +556,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) {
@@ -545,7 +565,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;
   }
@@ -597,11 +617,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];
 }
 
@@ -689,11 +710,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;
@@ -898,10 +920,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();
@@ -1067,8 +1090,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;
 }
@@ -1361,6 +1385,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,
@@ -1646,7 +1674,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,
@@ -1666,7 +1694,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"
@@ -1809,9 +1837,8 @@ function PanelGroupWithForwardedRef({
     },
     // CSS selectors
     "data-panel-group": "",
-    // e2e test attributes
-    "data-panel-group-direction": direction ,
-    "data-panel-group-id": groupId 
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId
   }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
@@ -1923,7 +1950,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(() => {
@@ -1987,13 +2014,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 => {
@@ -2023,7 +2043,14 @@ function PanelResizeHandle({
       ...style,
       ...styleFromProps
     },
-    tabIndex: 0
+    tabIndex: 0,
+    // 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";

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

@@ -57,7 +57,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({
@@ -164,9 +164,9 @@ function PanelWithForwardedRef({
     },
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-id": panelId ,
     "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
   });
 }
@@ -194,6 +194,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);
   }
@@ -268,6 +278,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];
@@ -324,7 +344,6 @@ function adjustLayoutByDelta({
     } = panelConstraints[pivotIndex];
     const {
       collapsedSizePercentage,
-      maxSizePercentage,
       minSizePercentage
     } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
     const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
@@ -480,7 +499,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) {
@@ -489,7 +508,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;
   }
@@ -541,11 +560,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];
 }
 
@@ -592,11 +612,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;
@@ -763,10 +784,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();
@@ -1403,7 +1425,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,
@@ -1423,7 +1445,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"
@@ -1566,9 +1588,8 @@ function PanelGroupWithForwardedRef({
     },
     // CSS selectors
     "data-panel-group": "",
-    // e2e test attributes
-    "data-panel-group-direction": direction ,
-    "data-panel-group-id": groupId 
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId
   }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
@@ -1680,7 +1701,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(() => {
@@ -1744,13 +1765,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 => {
@@ -1780,7 +1794,14 @@ function PanelResizeHandle({
       ...style,
       ...styleFromProps
     },
-    tabIndex: 0
+    tabIndex: 0,
+    // 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";