react-resizable-panels 0.0.56 → 0.0.57

package/dist/react-resizable-panels.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({
@@ -153,9 +153,9 @@ function PanelWithForwardedRef({
     },
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": undefined,
-    "data-panel-id": undefined,
     "data-panel-size": undefined
   });
 }
@@ -183,6 +183,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);
   }
@@ -257,6 +267,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];
@@ -313,7 +333,6 @@ function adjustLayoutByDelta({
     } = panelConstraints[pivotIndex];
     const {
       collapsedSizePercentage,
-      maxSizePercentage,
       minSizePercentage
     } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
     const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
@@ -469,7 +488,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) {
@@ -478,7 +497,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;
   }
@@ -530,11 +549,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];
 }
 
@@ -581,11 +601,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;
@@ -752,10 +773,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();
@@ -1273,7 +1295,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,
@@ -1293,7 +1315,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"
@@ -1436,9 +1458,8 @@ function PanelGroupWithForwardedRef({
     },
     // 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, {
@@ -1550,7 +1571,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(() => {
@@ -1614,13 +1635,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 => {
@@ -1650,7 +1664,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.node.esm.js

@@ -33,7 +33,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({
@@ -129,9 +129,9 @@ function PanelWithForwardedRef({
     },
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
     // e2e test attributes
     "data-panel-collapsible": undefined,
-    "data-panel-id": undefined,
     "data-panel-size": undefined
   });
 }
@@ -159,6 +159,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);
   }
@@ -233,6 +243,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];
@@ -289,7 +309,6 @@ function adjustLayoutByDelta({
     } = panelConstraints[pivotIndex];
     const {
       collapsedSizePercentage,
-      maxSizePercentage,
       minSizePercentage
     } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
     const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
@@ -445,7 +464,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) {
@@ -454,7 +473,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;
   }
@@ -506,11 +525,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];
 }
 
@@ -557,11 +577,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;
@@ -728,10 +749,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();
@@ -1249,7 +1271,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,
@@ -1269,7 +1291,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"
@@ -1412,9 +1434,8 @@ function PanelGroupWithForwardedRef({
     },
     // 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, {
@@ -1526,7 +1547,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(() => {
@@ -1590,13 +1611,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 => {
@@ -1626,7 +1640,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -67,6 +67,8 @@
     "watch": "parcel watch --port=2345"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "eslint": "^8.37.0",
     "eslint-plugin-no-restricted-imports": "^0.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",

package/src/Panel.ts

@@ -243,12 +243,12 @@ export function PanelWithForwardedRef({
 
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
 
     // e2e test attributes
     "data-panel-collapsible": isDevelopment
       ? collapsible || undefined
       : undefined,
-    "data-panel-id": isDevelopment ? panelId : undefined,
     "data-panel-size": isDevelopment
       ? parseFloat("" + style.flexGrow).toFixed(1)
       : undefined,

package/src/PanelGroup.ts

@@ -266,6 +266,10 @@ function PanelGroupWithForwardedRef({
     }
 
     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({
@@ -925,10 +929,8 @@ function PanelGroupWithForwardedRef({
 
       // CSS selectors
       "data-panel-group": "",
-
-      // e2e test attributes
-      "data-panel-group-direction": isDevelopment ? direction : undefined,
-      "data-panel-group-id": isDevelopment ? groupId : undefined,
+      "data-panel-group-direction": direction,
+      "data-panel-group-id": groupId,
     })
   );
 }

package/src/PanelResizeHandle.ts

@@ -151,19 +151,6 @@ export 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: ReactMouseEvent) => {
@@ -192,6 +179,18 @@ export function PanelResizeHandle({
       ...styleFromProps,
     },
     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,
   });
 }
 

package/src/utils/adjustLayoutByDelta.ts

@@ -44,7 +44,7 @@ export function adjustLayoutByDelta({
     const initialSize = nextLayout[pivotIndex]!;
 
     const { collapsible } = panelConstraints[pivotIndex]!;
-    const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
+    const { collapsedSizePercentage, minSizePercentage } =
       computePercentagePanelConstraints(
         panelConstraints,
         pivotIndex,

package/src/utils/computePercentagePanelConstraints.test.ts

@@ -68,4 +68,31 @@ describe("computePercentagePanelConstraints", () => {
 }
 `);
   });
+
+  it("should compute reasonable percentage based constraints from pixels if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      computePercentagePanelConstraints(
+        [
+          {
+            minSizePixels: 25,
+            maxSizePixels: 100,
+          },
+        ],
+
+        0,
+        -100
+      )
+    ).toMatchInlineSnapshot(`
+{
+  "collapsedSizePercentage": 0,
+  "defaultSizePercentage": undefined,
+  "maxSizePercentage": 0,
+  "minSizePercentage": 0,
+}
+`);
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
 });

package/src/utils/convertPixelConstraintsToPercentages.test.ts

@@ -0,0 +1,47 @@
+import { convertPixelConstraintsToPercentages } from "./convertPixelConstraintsToPercentages";
+
+describe("convertPixelConstraintsToPercentages", () => {
+  it("should respect percentage panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      convertPixelConstraintsToPercentages(
+        {
+          minSizePercentage: 25,
+          defaultSizePercentage: 50,
+          maxSizePercentage: 75,
+        },
+        -100
+      )
+    ).toEqual({
+      collapsedSizePercentage: 0,
+      defaultSizePercentage: 50,
+      maxSizePercentage: 75,
+      minSizePercentage: 25,
+    });
+
+    expect(console.warn).toHaveBeenCalledTimes(0);
+  });
+
+  // Edge case test (issues/206)
+  it("should ignore pixel panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      convertPixelConstraintsToPercentages(
+        {
+          minSizePixels: 25,
+          maxSizePixels: 75,
+        },
+        -100
+      )
+    ).toEqual({
+      collapsedSizePercentage: 0,
+      defaultSizePercentage: undefined,
+      maxSizePercentage: 0,
+      minSizePercentage: 0,
+    });
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/convertPixelConstraintsToPercentages.ts

@@ -21,6 +21,23 @@ export function convertPixelConstraintsToPercentages(
     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,

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,5 +1,7 @@
 export function getPanelGroupElement(id: string): HTMLDivElement | null {
-  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 as HTMLDivElement;
   }

package/src/utils/resizePanel.test.ts

@@ -0,0 +1,45 @@
+import { resizePanel } from "./resizePanel";
+
+describe("resizePanel", () => {
+  // Edge case test (issues/206)
+  fit("should respect percentage panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      resizePanel({
+        groupSizePixels: -100,
+        panelConstraints: [
+          {
+            minSizePercentage: 25,
+            maxSizePercentage: 75,
+          },
+        ],
+        panelIndex: 0,
+        size: 50,
+      })
+    ).toBe(50);
+
+    expect(console.warn).toHaveBeenCalledTimes(0);
+  });
+
+  // Edge case test (issues/206)
+  it("should handle pixel panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      resizePanel({
+        groupSizePixels: -100,
+        panelConstraints: [
+          {
+            minSizePixels: 25,
+            maxSizePixels: 75,
+          },
+        ],
+        panelIndex: 0,
+        size: 50,
+      })
+    ).toBe(0);
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/resizePanel.ts

@@ -14,6 +14,25 @@ export function resizePanel({
   panelIndex: number;
   size: number;
 }) {
+  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]!;
 
   const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =