react-resizable-panels 0.0.54 → 0.0.55

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

@@ -43,8 +43,8 @@ function PanelWithForwardedRef({
   defaultSize = null,
   forwardedRef,
   id: idFromProps = null,
-  maxSize = 100,
-  minSize = 10,
+  maxSize = null,
+  minSize,
   onCollapse = null,
   onResize = null,
   order = null,
@@ -59,11 +59,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({
@@ -74,22 +85,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)
@@ -111,11 +106,14 @@ function PanelWithForwardedRef({
     getCollapsed() {
       return committedValuesRef.current.size === 0;
     },
-    getSize() {
-      return committedValuesRef.current.size;
+    getId() {
+      return panelId;
+    },
+    getSize(units) {
+      return getPanelSize(panelId, units);
     },
-    resize: percentage => resizePanel(panelId, percentage)
-  }), [collapsePanel, expandPanel, panelId, resizePanel]);
+    resize: (percentage, units) => resizePanel(panelId, percentage, units)
+  }), [collapsePanel, expandPanel, getPanelSize, panelId, resizePanel]);
   return createElement(Type, {
     children,
     className: classNameFromProps,
@@ -151,7 +149,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 || {};
@@ -159,9 +163,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;
@@ -176,11 +177,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;
@@ -188,29 +189,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;
       }
@@ -228,7 +229,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;
@@ -280,6 +281,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.
@@ -350,18 +368,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 {
@@ -370,14 +394,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!") {
@@ -403,6 +510,7 @@ function useWindowSplitterPanelGroupBehavior({
       panels
     } = committedValuesRef.current;
     const groupElement = getPanelGroup(groupId);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
     const {
       height,
       width
@@ -415,23 +523,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));
@@ -455,7 +568,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);
                   }
@@ -762,9 +875,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,
@@ -776,7 +886,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);
@@ -789,6 +900,7 @@ function PanelGroupWithForwardedRef({
   useRef({
     didLogDefaultSizeWarning: false,
     didLogIdAndOrderWarning: false,
+    didLogInvalidLayoutWarning: false,
     prevPanelIds: []
   });
 
@@ -811,28 +923,52 @@ 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]);
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
     groupId,
@@ -883,6 +1019,22 @@ function PanelGroupWithForwardedRef({
       debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
   }, [autoSaveId, panels, sizes, storage]);
+  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
@@ -913,6 +1065,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;
@@ -949,7 +1105,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.
@@ -976,6 +1135,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.
@@ -1029,7 +1190,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);
@@ -1072,7 +1233,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);
@@ -1082,21 +1243,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) {
@@ -1107,7 +1281,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) {
@@ -1115,7 +1289,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);
@@ -1130,6 +1304,7 @@ function PanelGroupWithForwardedRef({
     collapsePanel,
     direction,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
     groupId,
     registerPanel,
@@ -1151,8 +1326,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",
@@ -1167,6 +1343,7 @@ function PanelGroupWithForwardedRef({
       "data-panel-group": "",
       "data-panel-group-direction": direction,
       "data-panel-group-id": groupId,
+      "data-panel-group-units": units,
       style: {
         ...style,
         ...styleFromProps
@@ -1316,4 +1493,4 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelGroup, PanelResizeHandle, getAvailableGroupSizePixels };

package/package.json

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