react-resizable-panels 0.0.54 → 0.0.55

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

@@ -45,8 +45,8 @@ function PanelWithForwardedRef({
   defaultSize = null,
   forwardedRef,
   id: idFromProps = null,
-  maxSize = 100,
-  minSize = 10,
+  maxSize = null,
+  minSize,
   onCollapse = null,
   onResize = null,
   order = null,
@@ -61,11 +61,22 @@ function PanelWithForwardedRef({
   const {
     collapsePanel,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
     registerPanel,
     resizePanel,
+    units,
     unregisterPanel
   } = context;
+  if (minSize == null) {
+    if (units === "percentages") {
+      // Mimics legacy default value for percentage based panel groups
+      minSize = 10;
+    } else {
+      // There is no meaningful minimum pixel default we can provide
+      minSize = 0;
+    }
+  }
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -76,22 +87,6 @@ function PanelWithForwardedRef({
     callbacksRef.current.onCollapse = onCollapse;
     callbacksRef.current.onResize = onResize;
   });
-
-  // Basic props validation
-  if (minSize < 0 || minSize > 100) {
-    throw Error(`Panel minSize must be between 0 and 100, but was ${minSize}`);
-  } else if (maxSize < 0 || maxSize > 100) {
-    throw Error(`Panel maxSize must be between 0 and 100, but was ${maxSize}`);
-  } else {
-    if (defaultSize !== null) {
-      if (defaultSize < 0 || defaultSize > 100) {
-        throw Error(`Panel defaultSize must be between 0 and 100, but was ${defaultSize}`);
-      } else if (minSize > defaultSize && !collapsible) {
-        console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
-        defaultSize = minSize;
-      }
-    }
-  }
   const style = getPanelStyle(panelId, defaultSize);
   const committedValuesRef = useRef({
     size: parseSizeFromStyle(style)
@@ -131,11 +126,14 @@ function PanelWithForwardedRef({
     getCollapsed() {
       return committedValuesRef.current.size === 0;
     },
-    getSize() {
-      return committedValuesRef.current.size;
+    getId() {
+      return panelId;
     },
-    resize: percentage => resizePanel(panelId, percentage)
-  }), [collapsePanel, expandPanel, panelId, resizePanel]);
+    getSize(units) {
+      return getPanelSize(panelId, units);
+    },
+    resize: (percentage, units) => resizePanel(panelId, percentage, units)
+  }), [collapsePanel, expandPanel, getPanelSize, panelId, resizePanel]);
   return createElement(Type, {
     children,
     className: classNameFromProps,
@@ -171,7 +169,13 @@ function parseSizeFromStyle(style) {
 
 const PRECISION = 10;
 
-function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
+function adjustByDelta(event, committedValues, idBefore, idAfter, deltaPixels, prevSizes, panelSizeBeforeCollapse, initialDragState) {
+  const {
+    id: groupId,
+    panels,
+    units
+  } = committedValues;
+  const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
   const {
     sizes: initialSizes
   } = initialDragState || {};
@@ -179,9 +183,6 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   // If we're resizing by mouse or touch, use the initial sizes as a base.
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const baseSizes = initialSizes || prevSizes;
-  if (delta === 0) {
-    return baseSizes;
-  }
   const panelsArray = panelsMapToSortedArray(panels);
   const nextSizes = baseSizes.concat();
   let deltaApplied = 0;
@@ -196,11 +197,11 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 
   // Max-bounds check the panel being expanded first.
   {
-    const pivotId = delta < 0 ? idAfter : idBefore;
+    const pivotId = deltaPixels < 0 ? idAfter : idBefore;
     const index = panelsArray.findIndex(panel => panel.current.id === pivotId);
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
-    const nextSize = safeResizePanel(panel, Math.abs(delta), baseSize, event);
+    const nextSize = safeResizePanel(units, groupSizePixels, panel, baseSize, baseSize + Math.abs(deltaPixels), event);
     if (baseSize === nextSize) {
       // If there's no room for the pivot panel to grow, we can ignore this drag update.
       return baseSizes;
@@ -208,29 +209,29 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
       if (nextSize === 0 && baseSize > 0) {
         panelSizeBeforeCollapse.set(pivotId, baseSize);
       }
-      delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
+      deltaPixels = deltaPixels < 0 ? baseSize - nextSize : nextSize - baseSize;
     }
   }
-  let pivotId = delta < 0 ? idBefore : idAfter;
+  let pivotId = deltaPixels < 0 ? idBefore : idAfter;
   let index = panelsArray.findIndex(panel => panel.current.id === pivotId);
   while (true) {
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
-    const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-    const nextSize = safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
+    const deltaRemaining = Math.abs(deltaPixels) - Math.abs(deltaApplied);
+    const nextSize = safeResizePanel(units, groupSizePixels, panel, baseSize, baseSize - deltaRemaining, event);
     if (baseSize !== nextSize) {
       if (nextSize === 0 && baseSize > 0) {
         panelSizeBeforeCollapse.set(panel.current.id, baseSize);
       }
       deltaApplied += baseSize - nextSize;
       nextSizes[index] = nextSize;
-      if (deltaApplied.toPrecision(PRECISION).localeCompare(Math.abs(delta).toPrecision(PRECISION), undefined, {
+      if (deltaApplied.toPrecision(PRECISION).localeCompare(Math.abs(deltaPixels).toPrecision(PRECISION), undefined, {
         numeric: true
       }) >= 0) {
         break;
       }
     }
-    if (delta < 0) {
+    if (deltaPixels < 0) {
       if (--index < 0) {
         break;
       }
@@ -248,7 +249,7 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   }
 
   // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-  pivotId = delta < 0 ? idAfter : idBefore;
+  pivotId = deltaPixels < 0 ? idAfter : idBefore;
   index = panelsArray.findIndex(panel => panel.current.id === pivotId);
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
@@ -287,6 +288,89 @@ function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
     }
   });
 }
+function calculateDefaultLayout({
+  groupId,
+  panels,
+  units
+}) {
+  const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
+  const panelsArray = panelsMapToSortedArray(panels);
+  const sizes = Array(panelsArray.length);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Assigning default sizes requires a couple of passes:
+  // First, all panels with defaultSize should be set as-is
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    const {
+      defaultSize
+    } = panel.current;
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      sizes[index] = units === "pixels" ? defaultSize / groupSizePixels * 100 : defaultSize;
+      remainingSize -= sizes[index];
+    }
+  }
+
+  // Remaining total size should be distributed evenly between panels
+  // This may require two passes, depending on min/max constraints
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    let {
+      defaultSize,
+      id,
+      maxSize,
+      minSize
+    } = panel.current;
+    if (defaultSize != null) {
+      continue;
+    }
+    if (units === "pixels") {
+      minSize = minSize / groupSizePixels * 100;
+      if (maxSize != null) {
+        maxSize = maxSize / groupSizePixels * 100;
+      }
+    }
+    const remainingPanels = panelsArray.length - numPanelsWithSizes;
+    const size = Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, remainingSize / remainingPanels));
+    sizes[index] = size;
+    numPanelsWithSizes++;
+    remainingSize -= size;
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (remainingSize !== 0) {
+    for (let index = 0; index < panelsArray.length; index++) {
+      const panel = panelsArray[index];
+      let {
+        maxSize,
+        minSize
+      } = panel.current;
+      if (units === "pixels") {
+        minSize = minSize / groupSizePixels * 100;
+        if (maxSize != null) {
+          maxSize = maxSize / groupSizePixels * 100;
+        }
+      }
+      const size = Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, sizes[index] + remainingSize));
+      if (size !== sizes[index]) {
+        remainingSize -= size - sizes[index];
+        sizes[index] = size;
+
+        // Fuzzy comparison to account for imprecise floating point math
+        if (Math.abs(remainingSize).toFixed(3) === "0.000") {
+          break;
+        }
+      }
+    }
+  }
+
+  // Finally, if there is still left-over size, log an error
+  if (Math.abs(remainingSize).toFixed(3) !== "0.000") ;
+  return sizes;
+}
 function getBeforeAndAfterIds(id, panelsArray) {
   if (panelsArray.length < 2) {
     return [null, null];
@@ -300,6 +384,23 @@ function getBeforeAndAfterIds(id, panelsArray) {
   const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
   return [idBefore, idAfter];
 }
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroup(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandlesForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
 
 // This method returns a number between 1 and 100 representing
 // the % of the group's overall space this panel should occupy.
@@ -370,18 +471,24 @@ function panelsMapToSortedArray(panels) {
     }
   });
 }
-function safeResizePanel(panel, delta, prevSize, event) {
-  const nextSizeUnsafe = prevSize + delta;
-  const {
+function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {
+  let {
     collapsedSize,
     collapsible,
     maxSize,
     minSize
   } = panel.current;
+  if (units === "pixels") {
+    collapsedSize = collapsedSize / groupSizePixels * 100;
+    if (maxSize != null) {
+      maxSize = maxSize / groupSizePixels * 100;
+    }
+    minSize = minSize / groupSizePixels * 100;
+  }
   if (collapsible) {
     if (prevSize > collapsedSize) {
       // Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
-      if (nextSizeUnsafe <= minSize / 2 + collapsedSize) {
+      if (nextSize <= minSize / 2 + collapsedSize) {
         return collapsedSize;
       }
     } else {
@@ -390,14 +497,97 @@ function safeResizePanel(panel, delta, prevSize, event) {
         // Keyboard events should expand a collapsed panel to the min size,
         // but mouse events should wait until the panel has reached its min size
         // to avoid a visual flickering when dragging between collapsed and min size.
-        if (nextSizeUnsafe < minSize) {
+        if (nextSize < minSize) {
           return collapsedSize;
         }
       }
     }
   }
-  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
-  return nextSize;
+  return Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, nextSize));
+}
+function validatePanelProps(units, panelData) {
+  const {
+    collapsible,
+    defaultSize,
+    maxSize,
+    minSize
+  } = panelData.current;
+
+  // Basic props validation
+  if (minSize < 0 || units === "percentages" && minSize > 100) {
+    panelData.current.minSize = 0;
+  }
+  if (maxSize != null) {
+    if (maxSize < 0 || units === "percentages" && maxSize > 100) {
+      panelData.current.maxSize = null;
+    }
+  }
+  if (defaultSize !== null) {
+    if (defaultSize < 0 || units === "percentages" && defaultSize > 100) {
+      panelData.current.defaultSize = null;
+    } else if (defaultSize < minSize && !collapsible) {
+      panelData.current.defaultSize = minSize;
+    } else if (maxSize != null && defaultSize > maxSize) {
+      panelData.current.defaultSize = maxSize;
+    }
+  }
+}
+function validatePanelGroupLayout({
+  groupId,
+  panels,
+  nextSizes,
+  prevSizes,
+  units
+}) {
+  // Clone because this method modifies
+  nextSizes = [...nextSizes];
+  const panelsArray = panelsMapToSortedArray(panels);
+  const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
+  let remainingSize = 0;
+
+  // First, check all of the proposed sizes against the min/max constraints
+  for (let index = 0; index < panelsArray.length; index++) {
+    const panel = panelsArray[index];
+    const prevSize = prevSizes[index];
+    const nextSize = nextSizes[index];
+    const safeNextSize = safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize);
+    if (nextSize != safeNextSize) {
+      remainingSize += nextSize - safeNextSize;
+      nextSizes[index] = safeNextSize;
+    }
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (remainingSize.toFixed(3) !== "0.000") {
+    for (let index = 0; index < panelsArray.length; index++) {
+      const panel = panelsArray[index];
+      let {
+        maxSize,
+        minSize
+      } = panel.current;
+      if (units === "pixels") {
+        minSize = minSize / groupSizePixels * 100;
+        if (maxSize != null) {
+          maxSize = maxSize / groupSizePixels * 100;
+        }
+      }
+      const size = Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, nextSizes[index] + remainingSize));
+      if (size !== nextSizes[index]) {
+        remainingSize -= size - nextSizes[index];
+        nextSizes[index] = size;
+
+        // Fuzzy comparison to account for imprecise floating point math
+        if (Math.abs(remainingSize).toFixed(3) === "0.000") {
+          break;
+        }
+      }
+    }
+  }
+
+  // If we still have remainder, the requested layout wasn't valid and we should warn about it
+  if (remainingSize.toFixed(3) !== "0.000") ;
+  return nextSizes;
 }
 
 function assert(expectedCondition, message = "Assertion failed!") {
@@ -423,6 +613,7 @@ function useWindowSplitterPanelGroupBehavior({
       panels
     } = committedValuesRef.current;
     const groupElement = getPanelGroup(groupId);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
     const {
       height,
       width
@@ -435,23 +626,28 @@ function useWindowSplitterPanelGroupBehavior({
       if (idBefore == null || idAfter == null) {
         return () => {};
       }
-      let minSize = 0;
-      let maxSize = 100;
+      let currentMinSize = 0;
+      let currentMaxSize = 100;
       let totalMinSize = 0;
       let totalMaxSize = 0;
 
       // A panel's effective min/max sizes also need to account for other panel's sizes.
       panelsArray.forEach(panelData => {
-        if (panelData.current.id === idBefore) {
-          maxSize = panelData.current.maxSize;
-          minSize = panelData.current.minSize;
+        const {
+          id,
+          maxSize,
+          minSize
+        } = panelData.current;
+        if (id === idBefore) {
+          currentMinSize = minSize;
+          currentMaxSize = maxSize != null ? maxSize : 100;
         } else {
-          totalMinSize += panelData.current.minSize;
-          totalMaxSize += panelData.current.maxSize;
+          totalMinSize += minSize;
+          totalMaxSize += maxSize != null ? maxSize : 100;
         }
       });
-      const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
-      const ariaValueMin = Math.max(minSize, (panelsArray.length - 1) * 100 - totalMaxSize);
+      const ariaValueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+      const ariaValueMin = Math.max(currentMinSize, (panelsArray.length - 1) * 100 - totalMaxSize);
       const flexGrow = getFlexGrow(panels, idBefore, sizes);
       handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
       handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
@@ -475,7 +671,7 @@ function useWindowSplitterPanelGroupBehavior({
                   } else {
                     delta = -(direction === "horizontal" ? width : height);
                   }
-                  const nextSizes = adjustByDelta(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
+                  const nextSizes = adjustByDelta(event, committedValuesRef.current, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                   if (sizes !== nextSizes) {
                     setSizes(nextSizes);
                   }
@@ -790,9 +986,6 @@ const defaultStorage = {
 // * dragHandleRect, sizes:
 //   When resizing is done via mouse/touch event– some initial state is stored
 //   so that any panels that contract will also expand if drag direction is reversed.
-// TODO
-// Within an active drag, remember original positions to refine more easily on expand.
-// Look at what the Chrome devtools Sources does.
 function PanelGroupWithForwardedRef({
   autoSaveId,
   children = null,
@@ -804,7 +997,8 @@ function PanelGroupWithForwardedRef({
   onLayout,
   storage = defaultStorage,
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  units = "percentages"
 }) {
   const groupId = useUniqueId(idFromProps);
   const [activeHandleId, setActiveHandleId] = useState(null);
@@ -817,6 +1011,7 @@ function PanelGroupWithForwardedRef({
   useRef({
     didLogDefaultSizeWarning: false,
     didLogIdAndOrderWarning: false,
+    didLogInvalidLayoutWarning: false,
     prevPanelIds: []
   });
 
@@ -839,32 +1034,58 @@ function PanelGroupWithForwardedRef({
   // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef({
     direction,
+    id: groupId,
     panels,
-    sizes
+    sizes,
+    units
   });
   useImperativeHandle(forwardedRef, () => ({
-    getLayout: () => {
+    getId: () => groupId,
+    getLayout: unitsFromParams => {
       const {
-        sizes
+        sizes,
+        units: unitsFromProps
       } = committedValuesRef.current;
-      return sizes;
+      const units = unitsFromParams ?? unitsFromProps;
+      if (units === "pixels") {
+        const groupSizePixels = getAvailableGroupSizePixels(groupId);
+        return sizes.map(size => size / 100 * groupSizePixels);
+      } else {
+        return sizes;
+      }
     },
-    setLayout: sizes => {
-      const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
-      assert(total === 100, "Panel sizes must add up to 100%");
+    setLayout: (sizes, unitsFromParams) => {
       const {
-        panels
+        id: groupId,
+        panels,
+        sizes: prevSizes,
+        units
       } = committedValuesRef.current;
+      if ((unitsFromParams || units) === "pixels") {
+        const groupSizePixels = getAvailableGroupSizePixels(groupId);
+        sizes = sizes.map(size => size / groupSizePixels * 100);
+      }
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       const panelsArray = panelsMapToSortedArray(panels);
-      setSizes(sizes);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      const nextSizes = validatePanelGroupLayout({
+        groupId,
+        panels,
+        nextSizes: sizes,
+        prevSizes,
+        units
+      });
+      if (!areEqual(prevSizes, nextSizes)) {
+        setSizes(nextSizes);
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
+      }
     }
-  }), []);
+  }), [groupId]);
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
+    committedValuesRef.current.id = groupId;
     committedValuesRef.current.panels = panels;
     committedValuesRef.current.sizes = sizes;
+    committedValuesRef.current.units = units;
   });
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
@@ -906,7 +1127,11 @@ function PanelGroupWithForwardedRef({
   // Compute the initial sizes based on default weights.
   // This assumes that panels register during initial mount (no conditional rendering)!
   useIsomorphicLayoutEffect(() => {
-    const sizes = committedValuesRef.current.sizes;
+    const {
+      id: groupId,
+      sizes,
+      units
+    } = committedValuesRef.current;
     if (sizes.length === panels.size) {
       // Only compute (or restore) default sizes once per panel configuration.
       return;
@@ -920,39 +1145,23 @@ function PanelGroupWithForwardedRef({
       defaultSizes = loadPanelLayout(autoSaveId, panelsArray, storage);
     }
     if (defaultSizes != null) {
-      setSizes(defaultSizes);
+      // Validate saved sizes in case something has changed since last render
+      // e.g. for pixel groups, this could be the size of the window
+      const validatedSizes = validatePanelGroupLayout({
+        groupId,
+        panels,
+        nextSizes: defaultSizes,
+        prevSizes: defaultSizes,
+        units
+      });
+      setSizes(validatedSizes);
     } else {
-      const panelsArray = panelsMapToSortedArray(panels);
-      let panelsWithNullDefaultSize = 0;
-      let totalDefaultSize = 0;
-      let totalMinSize = 0;
-
-      // TODO
-      // Implicit default size calculations below do not account for inferred min/max size values.
-      // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
-      // For now, these logic edge cases are left to the user to handle via props.
-
-      panelsArray.forEach(panel => {
-        totalMinSize += panel.current.minSize;
-        if (panel.current.defaultSize === null) {
-          panelsWithNullDefaultSize++;
-        } else {
-          totalDefaultSize += panel.current.defaultSize;
-        }
+      const sizes = calculateDefaultLayout({
+        groupId,
+        panels,
+        units
       });
-      if (totalDefaultSize > 100) {
-        throw new Error(`Default panel sizes cannot exceed 100%`);
-      } else if (panelsArray.length > 1 && panelsWithNullDefaultSize === 0 && totalDefaultSize !== 100) {
-        throw new Error(`Invalid default sizes specified for panels`);
-      } else if (totalMinSize > 100) {
-        throw new Error(`Minimum panel sizes cannot exceed 100%`);
-      }
-      setSizes(panelsArray.map(panel => {
-        if (panel.current.defaultSize === null) {
-          return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
-        }
-        return panel.current.defaultSize;
-      }));
+      setSizes(sizes);
     }
   }, [autoSaveId, panels, storage]);
   useEffect(() => {
@@ -970,6 +1179,48 @@ function PanelGroupWithForwardedRef({
       debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
   }, [autoSaveId, panels, sizes, storage]);
+  useIsomorphicLayoutEffect(() => {
+    // Pixel panel constraints need to be reassessed after a group resize
+    // We can avoid the ResizeObserver overhead for relative layouts
+    if (units === "pixels") {
+      const resizeObserver = new ResizeObserver(() => {
+        const {
+          panels,
+          sizes: prevSizes
+        } = committedValuesRef.current;
+        const nextSizes = validatePanelGroupLayout({
+          groupId,
+          panels,
+          nextSizes: prevSizes,
+          prevSizes,
+          units
+        });
+        if (!areEqual(prevSizes, nextSizes)) {
+          setSizes(nextSizes);
+        }
+      });
+      resizeObserver.observe(getPanelGroup(groupId));
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [groupId, units]);
+  const getPanelSize = useCallback((id, unitsFromParams) => {
+    const {
+      panels,
+      units: unitsFromProps
+    } = committedValuesRef.current;
+    const panelsArray = panelsMapToSortedArray(panels);
+    const index = panelsArray.findIndex(panel => panel.current.id === id);
+    const size = sizes[index];
+    const units = unitsFromParams ?? unitsFromProps;
+    if (units === "pixels") {
+      const groupSizePixels = getAvailableGroupSizePixels(groupId);
+      return size / 100 * groupSizePixels;
+    } else {
+      return size;
+    }
+  }, [groupId, sizes]);
   const getPanelStyle = useCallback((id, defaultSize) => {
     const {
       panels
@@ -1000,6 +1251,10 @@ function PanelGroupWithForwardedRef({
     };
   }, [activeHandleId, disablePointerEventsDuringResize, sizes]);
   const registerPanel = useCallback((id, panelRef) => {
+    const {
+      units
+    } = committedValuesRef.current;
+    validatePanelProps(units, panelRef);
     setPanels(prevPanels => {
       if (prevPanels.has(id)) {
         return prevPanels;
@@ -1036,7 +1291,10 @@ function PanelGroupWithForwardedRef({
       }
       const size = isHorizontal ? rect.width : rect.height;
       const delta = movement / size * 100;
-      const nextSizes = adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
+
+      // If a validateLayout method has been provided
+      // it's important to use it before updating the mouse cursor
+      const nextSizes = adjustByDelta(event, committedValuesRef.current, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
       const sizesChanged = !areEqual(prevSizes, nextSizes);
 
       // Don't update cursor for resizes triggered by keyboard interactions.
@@ -1063,6 +1321,8 @@ function PanelGroupWithForwardedRef({
       }
       if (sizesChanged) {
         const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
+        // It's okay to bypass in this case because we already validated above
         setSizes(nextSizes);
 
         // If resize change handlers have been declared, this is the time to call them.
@@ -1116,7 +1376,7 @@ function PanelGroupWithForwardedRef({
     }
     const isLastPanel = index === panelsArray.length - 1;
     const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
-    const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
+    const nextSizes = adjustByDelta(null, committedValuesRef.current, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
@@ -1159,7 +1419,7 @@ function PanelGroupWithForwardedRef({
     }
     const isLastPanel = index === panelsArray.length - 1;
     const delta = isLastPanel ? collapsedSize - sizeBeforeCollapse : sizeBeforeCollapse;
-    const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
+    const nextSizes = adjustByDelta(null, committedValuesRef.current, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
@@ -1169,21 +1429,34 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
-  const resizePanel = useCallback((id, nextSize) => {
+  const resizePanel = useCallback((id, nextSize, unitsFromParams) => {
     const {
+      id: groupId,
       panels,
-      sizes: prevSizes
+      sizes: prevSizes,
+      units
     } = committedValuesRef.current;
+    if ((unitsFromParams || units) === "pixels") {
+      const groupSizePixels = getAvailableGroupSizePixels(groupId);
+      nextSize = nextSize / groupSizePixels * 100;
+    }
     const panel = panels.get(id);
     if (panel == null) {
       return;
     }
-    const {
+    let {
       collapsedSize,
       collapsible,
       maxSize,
       minSize
     } = panel.current;
+    if (units === "pixels") {
+      const groupSizePixels = getAvailableGroupSizePixels(groupId);
+      minSize = minSize / groupSizePixels * 100;
+      if (maxSize != null) {
+        maxSize = maxSize / groupSizePixels * 100;
+      }
+    }
     const panelsArray = panelsMapToSortedArray(panels);
     const index = panelsArray.indexOf(panel);
     if (index < 0) {
@@ -1194,7 +1467,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     if (collapsible && nextSize === collapsedSize) ; else {
-      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
+      nextSize = Math.min(maxSize != null ? maxSize : 100, Math.max(minSize, nextSize));
     }
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
     if (idBefore == null || idAfter == null) {
@@ -1202,7 +1475,7 @@ function PanelGroupWithForwardedRef({
     }
     const isLastPanel = index === panelsArray.length - 1;
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
-    const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
+    const nextSizes = adjustByDelta(null, committedValuesRef.current, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
@@ -1217,6 +1490,7 @@ function PanelGroupWithForwardedRef({
     collapsePanel,
     direction,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
     groupId,
     registerPanel,
@@ -1238,8 +1512,9 @@ function PanelGroupWithForwardedRef({
       setActiveHandleId(null);
       initialDragStateRef.current = null;
     },
+    units,
     unregisterPanel
-  }), [activeHandleId, collapsePanel, direction, expandPanel, getPanelStyle, groupId, registerPanel, registerResizeHandle, resizePanel, unregisterPanel]);
+  }), [activeHandleId, collapsePanel, direction, expandPanel, getPanelSize, getPanelStyle, groupId, registerPanel, registerResizeHandle, resizePanel, units, unregisterPanel]);
   const style = {
     display: "flex",
     flexDirection: direction === "horizontal" ? "row" : "column",
@@ -1254,6 +1529,7 @@ function PanelGroupWithForwardedRef({
       "data-panel-group": "",
       "data-panel-group-direction": direction,
       "data-panel-group-id": groupId,
+      "data-panel-group-units": units,
       style: {
         ...style,
         ...styleFromProps
@@ -1403,4 +1679,4 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelGroup, PanelResizeHandle, getAvailableGroupSizePixels };