react-resizable-panels 0.0.54 → 0.0.56

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

@@ -9,6 +9,7 @@ const isBrowser = typeof window !== "undefined";
 const {
   createElement,
   createContext,
+  createRef,
   forwardRef,
   useCallback,
   useContext,
@@ -23,6 +24,9 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
 
+const PanelGroupContext = createContext(null);
+PanelGroupContext.displayName = "PanelGroupContext";
+
 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
@@ -33,123 +37,145 @@ function useUniqueId(idFromParams = null) {
   if (idRef.current === null) {
     idRef.current = "" + counter++;
   }
-  return idRef.current;
+  return idFromParams ?? idRef.current;
 }
 
-const PanelGroupContext = createContext(null);
-PanelGroupContext.displayName = "PanelGroupContext";
-
 function PanelWithForwardedRef({
-  children = null,
+  children,
   className: classNameFromProps = "",
-  collapsedSize = 0,
-  collapsible = false,
-  defaultSize = null,
+  collapsedSizePercentage,
+  collapsedSizePixels,
+  collapsible,
+  defaultSizePercentage,
+  defaultSizePixels,
   forwardedRef,
-  id: idFromProps = null,
-  maxSize = 100,
-  minSize = 10,
-  onCollapse = null,
-  onResize = null,
-  order = null,
-  style: styleFromProps = {},
+  id: idFromProps,
+  maxSizePercentage,
+  maxSizePixels,
+  minSizePercentage,
+  minSizePixels,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  style: styleFromProps,
   tagName: Type = "div"
 }) {
   const context = useContext(PanelGroupContext);
   if (context === null) {
     throw Error(`Panel components must be rendered within a PanelGroup container`);
   }
-  const panelId = useUniqueId(idFromProps);
   const {
     collapsePanel,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
+    isPanelCollapsed,
     registerPanel,
     resizePanel,
     unregisterPanel
   } = context;
-
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef({
-    onCollapse,
-    onResize
+  const panelId = useUniqueId(idFromProps);
+  const panelDataRef = useRef({
+    callbacks: {
+      onCollapse,
+      onExpand,
+      onResize
+    },
+    constraints: {
+      collapsedSizePercentage,
+      collapsedSizePixels,
+      collapsible,
+      defaultSizePercentage,
+      defaultSizePixels,
+      maxSizePercentage,
+      maxSizePixels,
+      minSizePercentage,
+      minSizePixels
+    },
+    id: panelId,
+    idIsFromProps: idFromProps !== undefined,
+    order
   });
-  useEffect(() => {
-    callbacksRef.current.onCollapse = onCollapse;
-    callbacksRef.current.onResize = onResize;
+  const devWarningsRef = useRef({
+    didLogMissingDefaultSizeWarning: false
   });
 
-  // 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;
+  // Normally we wouldn't log a warning during render,
+  // but effects don't run on the server, so we can't do it there
+  {
+    if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
+      if (!isBrowser && defaultSizePercentage == null && defaultSizePixels == null) {
+        devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
+        console.warn(`WARNING: Panel defaultSizePercentage or defaultSizePixels prop recommended to avoid layout shift after server rendering`);
       }
     }
   }
-  const style = getPanelStyle(panelId, defaultSize);
-  const committedValuesRef = useRef({
-    size: parseSizeFromStyle(style)
-  });
-  const panelDataRef = useRef({
-    callbacksRef,
-    collapsedSize,
-    collapsible,
-    defaultSize,
-    id: panelId,
-    idWasAutoGenerated: idFromProps == null,
-    maxSize,
-    minSize,
-    order
-  });
   useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.size = parseSizeFromStyle(style);
-    panelDataRef.current.callbacksRef = callbacksRef;
-    panelDataRef.current.collapsedSize = collapsedSize;
-    panelDataRef.current.collapsible = collapsible;
-    panelDataRef.current.defaultSize = defaultSize;
+    const {
+      callbacks,
+      constraints
+    } = panelDataRef.current;
     panelDataRef.current.id = panelId;
-    panelDataRef.current.idWasAutoGenerated = idFromProps == null;
-    panelDataRef.current.maxSize = maxSize;
-    panelDataRef.current.minSize = minSize;
+    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
+    callbacks.onCollapse = onCollapse;
+    callbacks.onExpand = onExpand;
+    callbacks.onResize = onResize;
+    constraints.collapsedSizePercentage = collapsedSizePercentage;
+    constraints.collapsedSizePixels = collapsedSizePixels;
+    constraints.collapsible = collapsible;
+    constraints.defaultSizePercentage = defaultSizePercentage;
+    constraints.defaultSizePixels = defaultSizePixels;
+    constraints.maxSizePercentage = maxSizePercentage;
+    constraints.maxSizePixels = maxSizePixels;
+    constraints.minSizePercentage = minSizePercentage;
+    constraints.minSizePixels = minSizePixels;
   });
   useIsomorphicLayoutEffect(() => {
-    registerPanel(panelId, panelDataRef);
+    const panelData = panelDataRef.current;
+    registerPanel(panelData);
     return () => {
-      unregisterPanel(panelId);
+      unregisterPanel(panelData);
     };
   }, [order, panelId, registerPanel, unregisterPanel]);
   useImperativeHandle(forwardedRef, () => ({
-    collapse: () => collapsePanel(panelId),
-    expand: () => expandPanel(panelId),
-    getCollapsed() {
-      return committedValuesRef.current.size === 0;
+    collapse: () => {
+      collapsePanel(panelDataRef.current);
+    },
+    expand: () => {
+      expandPanel(panelDataRef.current);
+    },
+    getId() {
+      return panelId;
     },
     getSize() {
-      return committedValuesRef.current.size;
+      return getPanelSize(panelDataRef.current);
+    },
+    isCollapsed() {
+      return isPanelCollapsed(panelDataRef.current);
     },
-    resize: percentage => resizePanel(panelId, percentage)
-  }), [collapsePanel, expandPanel, panelId, resizePanel]);
+    isExpanded() {
+      return !isPanelCollapsed(panelDataRef.current);
+    },
+    resize: mixedSizes => {
+      resizePanel(panelDataRef.current, mixedSizes);
+    }
+  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
+  const style = getPanelStyle(panelDataRef.current);
   return createElement(Type, {
     children,
     className: classNameFromProps,
-    "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
-    "data-panel-id": panelId,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1),
-    id: `data-panel-id-${panelId}`,
     style: {
       ...style,
       ...styleFromProps
-    }
+    },
+    // CSS selectors
+    "data-panel": "",
+    // e2e test attributes
+    "data-panel-collapsible": collapsible || undefined ,
+    "data-panel-id": panelId ,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -159,33 +185,133 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
-// HACK
-function parseSizeFromStyle(style) {
+const PRECISION = 10;
+
+function convertPixelsToPercentage(pixels, groupSizePixels) {
+  return pixels / groupSizePixels * 100;
+}
+
+function convertPixelConstraintsToPercentages(panelConstraints, groupSizePixels) {
+  let {
+    collapsedSizePercentage = 0,
+    collapsedSizePixels,
+    defaultSizePercentage,
+    defaultSizePixels,
+    maxSizePercentage = 100,
+    maxSizePixels,
+    minSizePercentage = 0,
+    minSizePixels
+  } = panelConstraints;
+  if (collapsedSizePixels != null) {
+    collapsedSizePercentage = convertPixelsToPercentage(collapsedSizePixels, groupSizePixels);
+  }
+  if (defaultSizePixels != null) {
+    defaultSizePercentage = convertPixelsToPercentage(defaultSizePixels, groupSizePixels);
+  }
+  if (minSizePixels != null) {
+    minSizePercentage = convertPixelsToPercentage(minSizePixels, groupSizePixels);
+  }
+  if (maxSizePixels != null) {
+    maxSizePercentage = convertPixelsToPercentage(maxSizePixels, groupSizePixels);
+  }
+  return {
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage,
+    minSizePercentage
+  };
+}
+
+function computePercentagePanelConstraints(panelConstraintsArray, panelIndex, groupSizePixels) {
+  // All panel constraints, excluding the current one
+  let totalMinConstraints = 0;
+  let totalMaxConstraints = 0;
+  for (let index = 0; index < panelConstraintsArray.length; index++) {
+    if (index !== panelIndex) {
+      const {
+        collapsible
+      } = panelConstraintsArray[index];
+      const {
+        collapsedSizePercentage,
+        maxSizePercentage,
+        minSizePercentage
+      } = convertPixelConstraintsToPercentages(panelConstraintsArray[index], groupSizePixels);
+      totalMaxConstraints += maxSizePercentage;
+      totalMinConstraints += collapsible ? collapsedSizePercentage : minSizePercentage;
+    }
+  }
   const {
-    flexGrow
-  } = style;
-  if (typeof flexGrow === "string") {
-    return parseFloat(flexGrow);
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage,
+    minSizePercentage
+  } = convertPixelConstraintsToPercentages(panelConstraintsArray[panelIndex], groupSizePixels);
+  return {
+    collapsedSizePercentage,
+    defaultSizePercentage,
+    maxSizePercentage: panelConstraintsArray.length > 1 ? Math.min(maxSizePercentage, 100 - totalMinConstraints) : maxSizePercentage,
+    minSizePercentage: panelConstraintsArray.length > 1 ? Math.max(minSizePercentage, 100 - totalMaxConstraints) : minSizePercentage
+  };
+}
+
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  actual = parseFloat(actual.toFixed(fractionDigits));
+  expected = parseFloat(expected.toFixed(fractionDigits));
+  const delta = actual - expected;
+  if (delta === 0) {
+    return 0;
   } else {
-    return flexGrow;
+    return delta > 0 ? 1 : -1;
   }
 }
 
-const PRECISION = 10;
+function fuzzyNumbersEqual(actual, expected, fractionDigits) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
 
-function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
+// Panel size must be in percentages; pixel values should be pre-converted
+function resizePanel({
+  groupSizePixels,
+  panelConstraints,
+  panelIndex,
+  size
+}) {
+  let {
+    collapsible
+  } = panelConstraints[panelIndex];
   const {
-    sizes: initialSizes
-  } = initialDragState || {};
+    collapsedSizePercentage,
+    maxSizePercentage,
+    minSizePercentage
+  } = computePercentagePanelConstraints(panelConstraints, panelIndex, groupSizePixels);
+  if (minSizePercentage != null) {
+    if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
+      if (collapsible) {
+        size = collapsedSizePercentage;
+      } else {
+        size = minSizePercentage;
+      }
+    }
+  }
+  if (maxSizePercentage != null) {
+    size = Math.min(maxSizePercentage, size);
+  }
+  return size;
+}
 
-  // 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;
+// All units must be in percentages; pixel values should be pre-converted
+function adjustLayoutByDelta({
+  delta,
+  groupSizePixels,
+  layout: prevLayout,
+  panelConstraints,
+  pivotIndices,
+  trigger
+}) {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return prevLayout;
   }
-  const panelsArray = panelsMapToSortedArray(panels);
-  const nextSizes = baseSizes.concat();
+  const nextLayout = [...prevLayout];
   let deltaApplied = 0;
 
   // A resizing panel affects the panels before or after it.
@@ -196,268 +322,360 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   // A positive delta means the panel immediately before the resizer should "expand".
   // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
 
-  // Max-bounds check the panel being expanded first.
+  // First, check the panel we're pivoting around;
+  // We should only expand or contract by as much as its constraints allow
   {
-    const pivotId = delta < 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);
-    if (baseSize === nextSize) {
-      // If there's no room for the pivot panel to grow, we can ignore this drag update.
-      return baseSizes;
-    } else {
-      if (nextSize === 0 && baseSize > 0) {
-        panelSizeBeforeCollapse.set(pivotId, baseSize);
+    const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+    const initialSize = nextLayout[pivotIndex];
+    const {
+      collapsible
+    } = panelConstraints[pivotIndex];
+    const {
+      collapsedSizePercentage,
+      maxSizePercentage,
+      minSizePercentage
+    } = computePercentagePanelConstraints(panelConstraints, pivotIndex, groupSizePixels);
+    const isCollapsed = collapsible && fuzzyNumbersEqual(initialSize, collapsedSizePercentage);
+    let unsafeSize = initialSize + Math.abs(delta);
+    if (isCollapsed) {
+      switch (trigger) {
+        case "keyboard":
+          if (minSizePercentage > unsafeSize) {
+            unsafeSize = minSizePercentage;
+          }
       }
-      delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
     }
-  }
-  let pivotId = delta < 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);
-    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, {
-        numeric: true
-      }) >= 0) {
-        break;
-      }
+    const safeSize = resizePanel({
+      groupSizePixels,
+      panelConstraints,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
+    if (fuzzyNumbersEqual(initialSize, safeSize)) {
+      // If there's no room for the pivot panel to grow, we should ignore this change
+      return nextLayout;
+    } else {
+      delta = delta < 0 ? initialSize - safeSize : safeSize - initialSize;
     }
-    if (delta < 0) {
-      if (--index < 0) {
-        break;
+  }
+
+  // Delta added to a panel needs to be subtracted from other panels
+  // within the constraints that those panels allow
+  {
+    const pivotIndex = delta < 0 ? pivotIndices[0] : pivotIndices[1];
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraints.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+      const prevSize = prevLayout[index];
+      const unsafeSize = prevSize - deltaRemaining;
+      let safeSize = resizePanel({
+        groupSizePixels,
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+        nextLayout[index] = safeSize;
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+          numeric: true
+        }) >= 0) {
+          break;
+        }
       }
-    } else {
-      if (++index >= panelsArray.length) {
-        break;
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
       }
     }
   }
 
   // If we were unable to resize any of the panels panels, return the previous state.
-  // This will essentially bailout and ignore the "mousemove" event.
-  if (deltaApplied === 0) {
-    return baseSizes;
+  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+  if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    return prevLayout;
   }
+  {
+    const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+    const unsafeSize = prevLayout[pivotIndex] + deltaApplied;
+    const safeSize = resizePanel({
+      groupSizePixels,
+      panelConstraints,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
 
-  // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-  pivotId = delta < 0 ? idAfter : idBefore;
-  index = panelsArray.findIndex(panel => panel.current.id === pivotId);
-  nextSizes[index] = baseSizes[index] + deltaApplied;
-  return nextSizes;
-}
-function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
-  sizes.forEach((size, index) => {
-    const panelRef = panelsArray[index];
-    if (!panelRef) {
-      // Handle initial mount (when panels are registered too late to be in the panels array)
-      // The subsequent render+effects will handle the resize notification
-      return;
-    }
-    const {
-      callbacksRef,
-      collapsedSize,
-      collapsible,
-      id
-    } = panelRef.current;
-    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
-    if (lastNotifiedSize !== size) {
-      panelIdToLastNotifiedSizeMap[id] = size;
-      const {
-        onCollapse,
-        onResize
-      } = callbacksRef.current;
-      if (onResize) {
-        onResize(size, lastNotifiedSize);
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    nextLayout[pivotIndex] = safeSize;
+
+    // Edge case where expanding or contracting one panel caused another one to change collapsed state
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+      const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+      let index = pivotIndex;
+      while (index >= 0 && index < panelConstraints.length) {
+        const prevSize = nextLayout[index];
+        const unsafeSize = prevSize + deltaRemaining;
+        const safeSize = resizePanel({
+          groupSizePixels,
+          panelConstraints,
+          panelIndex: index,
+          size: unsafeSize
+        });
+        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+          deltaRemaining -= safeSize - prevSize;
+          nextLayout[index] = safeSize;
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+        if (delta > 0) {
+          index--;
+        } else {
+          index++;
+        }
       }
-      if (collapsible && onCollapse) {
-        if ((lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
-          onCollapse(false);
-        } else if (lastNotifiedSize !== collapsedSize && size === collapsedSize) {
-          onCollapse(true);
+
+      // If we can't redistribute, this layout is invalid;
+      // There may be an incremental layout that is valid though
+      if (!fuzzyNumbersEqual(deltaRemaining, 0)) {
+        try {
+          return adjustLayoutByDelta({
+            delta: delta < 0 ? delta + 1 : delta - 1,
+            groupSizePixels,
+            layout: prevLayout,
+            panelConstraints,
+            pivotIndices,
+            trigger
+          });
+        } catch (error) {
+          if (error instanceof RangeError) {
+            console.error(`Could not apply delta ${delta} to layout`);
+            return prevLayout;
+          }
+        } finally {
         }
       }
     }
-  });
-}
-function getBeforeAndAfterIds(id, panelsArray) {
-  if (panelsArray.length < 2) {
-    return [null, null];
   }
-  const index = panelsArray.findIndex(panel => panel.current.id === id);
-  if (index < 0) {
-    return [null, null];
-  }
-  const isLastPanel = index === panelsArray.length - 1;
-  const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
-  const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
-  return [idBefore, idAfter];
+  return nextLayout;
 }
 
-// This method returns a number between 1 and 100 representing
-// the % of the group's overall space this panel should occupy.
-function getFlexGrow(panels, id, sizes) {
-  if (panels.size === 1) {
-    return "100";
-  }
-  const panelsArray = panelsMapToSortedArray(panels);
-  const index = panelsArray.findIndex(panel => panel.current.id === id);
-  const size = sizes[index];
-  if (size == null) {
-    return "0";
+function assert(expectedCondition, message = "Assertion failed!") {
+  if (!expectedCondition) {
+    console.error(message);
+    throw Error(message);
   }
-  return size.toPrecision(PRECISION);
 }
-function getPanel(id) {
-  const element = document.querySelector(`[data-panel-id="${id}"]`);
-  if (element) {
-    return element;
+
+function getPercentageSizeFromMixedSizes({
+  sizePercentage,
+  sizePixels
+}, groupSizePixels) {
+  if (sizePercentage != null) {
+    return sizePercentage;
+  } else if (sizePixels != null) {
+    return convertPixelsToPercentage(sizePixels, groupSizePixels);
   }
-  return null;
+  return undefined;
+}
+
+function calculateAriaValues({
+  groupSizePixels,
+  layout,
+  panelsArray,
+  pivotIndices
+}) {
+  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, index) => {
+    const {
+      constraints
+    } = panelData;
+    const {
+      maxSizePercentage,
+      maxSizePixels,
+      minSizePercentage,
+      minSizePixels
+    } = constraints;
+    const minSize = getPercentageSizeFromMixedSizes({
+      sizePercentage: minSizePercentage,
+      sizePixels: minSizePixels
+    }, groupSizePixels) ?? 0;
+    const maxSize = getPercentageSizeFromMixedSizes({
+      sizePercentage: maxSizePercentage,
+      sizePixels: maxSizePixels
+    }, groupSizePixels) ?? 100;
+    if (index === pivotIndices[0]) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = layout[pivotIndices[0]];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+
+function getResizeHandleElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${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;
+}
+
+function determinePivotIndices(groupId, dragHandleId) {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId);
+  return index != null ? [index, index + 1] : [-1, -1];
 }
-function getPanelGroup(id) {
+
+function getPanelGroupElement(id) {
   const element = document.querySelector(`[data-panel-group-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
-function getResizeHandle(id) {
+
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(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);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(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);
+  }
+}
+
+function getResizeHandleElement(id) {
   const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
-function getResizeHandleIndex(id) {
-  const handles = getResizeHandles();
-  const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
-  return index ?? null;
-}
-function getResizeHandles() {
-  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
-}
-function getResizeHandlesForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
-}
+
 function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
-  const handle = getResizeHandle(handleId);
-  const handles = getResizeHandlesForGroup(groupId);
+  const handle = getResizeHandleElement(handleId);
+  const handles = getResizeHandleElementsForGroup(groupId);
   const index = handle ? handles.indexOf(handle) : -1;
-  const idBefore = panelsArray[index]?.current?.id ?? null;
-  const idAfter = panelsArray[index + 1]?.current?.id ?? null;
+  const idBefore = panelsArray[index]?.id ?? null;
+  const idAfter = panelsArray[index + 1]?.id ?? null;
   return [idBefore, idAfter];
 }
-function panelsMapToSortedArray(panels) {
-  return Array.from(panels.values()).sort((panelA, panelB) => {
-    const orderA = panelA.current.order;
-    const orderB = panelB.current.order;
-    if (orderA == null && orderB == null) {
-      return 0;
-    } else if (orderA == null) {
-      return -1;
-    } else if (orderB == null) {
-      return 1;
-    } else {
-      return orderA - orderB;
-    }
-  });
-}
-function safeResizePanel(panel, delta, prevSize, event) {
-  const nextSizeUnsafe = prevSize + delta;
-  const {
-    collapsedSize,
-    collapsible,
-    maxSize,
-    minSize
-  } = panel.current;
-  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) {
-        return collapsedSize;
-      }
-    } else {
-      const isKeyboardEvent = event?.type?.startsWith("key");
-      if (!isKeyboardEvent) {
-        // 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) {
-          return collapsedSize;
-        }
-      }
-    }
-  }
-  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
-  return nextSize;
-}
-
-function assert(expectedCondition, message = "Assertion failed!") {
-  if (!expectedCondition) {
-    console.error(message);
-    throw Error(message);
-  }
-}
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
 function useWindowSplitterPanelGroupBehavior({
   committedValuesRef,
   groupId,
-  panels,
-  setSizes,
-  sizes,
-  panelSizeBeforeCollapse
+  layout,
+  panelDataArray,
+  setLayout
 }) {
+  const devWarningsRef = useRef({
+    didWarnAboutMissingResizeHandle: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
+    for (let index = 0; index < panelDataArray.length - 1; index++) {
+      const {
+        valueMax,
+        valueMin,
+        valueNow
+      } = calculateAriaValues({
+        groupSizePixels,
+        layout,
+        panelsArray: panelDataArray,
+        pivotIndices: [index, index + 1]
+      });
+      const resizeHandleElement = resizeHandleElements[index];
+      if (resizeHandleElement == null) {
+        {
+          const {
+            didWarnAboutMissingResizeHandle
+          } = devWarningsRef.current;
+          if (!didWarnAboutMissingResizeHandle) {
+            devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
+            console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
+          }
+        }
+      } else {
+        resizeHandleElement.setAttribute("aria-controls", panelDataArray[index].id);
+        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
+        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
+        resizeHandleElement.setAttribute("aria-valuenow", "" + Math.round(valueNow));
+      }
+    }
+    return () => {
+      resizeHandleElements.forEach((resizeHandleElement, index) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    };
+  }, [groupId, layout, panelDataArray]);
   useEffect(() => {
     const {
       direction,
-      panels
+      panelDataArray
     } = committedValuesRef.current;
-    const groupElement = getPanelGroup(groupId);
+    const groupElement = getPanelGroupElement(groupId);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
     const {
       height,
       width
     } = groupElement.getBoundingClientRect();
-    const handles = getResizeHandlesForGroup(groupId);
+    const handles = getResizeHandleElementsForGroup(groupId);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      const panelsArray = panelsMapToSortedArray(panels);
-      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelsArray);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
       if (idBefore == null || idAfter == null) {
         return () => {};
       }
-      let minSize = 0;
-      let maxSize = 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;
-        } else {
-          totalMinSize += panelData.current.minSize;
-          totalMaxSize += panelData.current.maxSize;
-        }
-      });
-      const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
-      const ariaValueMin = Math.max(minSize, (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));
-      handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
       const onKeyDown = event => {
         if (event.defaultPrevented) {
           return;
@@ -466,20 +684,32 @@ function useWindowSplitterPanelGroupBehavior({
           case "Enter":
             {
               event.preventDefault();
-              const index = panelsArray.findIndex(panel => panel.current.id === idBefore);
+              const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
               if (index >= 0) {
-                const panelData = panelsArray[index];
-                const size = sizes[index];
+                const panelData = panelDataArray[index];
+                const size = layout[index];
                 if (size != null) {
+                  const groupSizePixels = getAvailableGroupSizePixels(groupId);
+                  const minSize = getPercentageSizeFromMixedSizes({
+                    sizePercentage: panelData.constraints.minSizePercentage,
+                    sizePixels: panelData.constraints.minSizePixels
+                  }, groupSizePixels) ?? 0;
                   let delta = 0;
-                  if (size.toPrecision(PRECISION) <= panelData.current.minSize.toPrecision(PRECISION)) {
+                  if (size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)) {
                     delta = direction === "horizontal" ? width : height;
                   } else {
                     delta = -(direction === "horizontal" ? width : height);
                   }
-                  const nextSizes = adjustByDelta(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
-                  if (sizes !== nextSizes) {
-                    setSizes(nextSizes);
+                  const nextLayout = adjustLayoutByDelta({
+                    delta,
+                    groupSizePixels,
+                    layout,
+                    panelConstraints: panelDataArray.map(panelData => panelData.constraints),
+                    pivotIndices: determinePivotIndices(groupId, handleId),
+                    trigger: "keyboard"
+                  });
+                  if (layout !== nextLayout) {
+                    setLayout(nextLayout);
                   }
                 }
               }
@@ -488,72 +718,14 @@ function useWindowSplitterPanelGroupBehavior({
         }
       };
       handle.addEventListener("keydown", onKeyDown);
-      const panelBefore = getPanel(idBefore);
-      if (panelBefore != null) {
-        handle.setAttribute("aria-controls", panelBefore.id);
-      }
       return () => {
-        handle.removeAttribute("aria-valuemax");
-        handle.removeAttribute("aria-valuemin");
-        handle.removeAttribute("aria-valuenow");
         handle.removeEventListener("keydown", onKeyDown);
-        if (panelBefore != null) {
-          handle.removeAttribute("aria-controls");
-        }
       };
     });
     return () => {
       cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
     };
-  }, [committedValuesRef, groupId, panels, panelSizeBeforeCollapse, setSizes, sizes]);
-}
-function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler
-}) {
-  useEffect(() => {
-    if (disabled || resizeHandler == null) {
-      return;
-    }
-    const handleElement = getResizeHandle(handleId);
-    if (handleElement == null) {
-      return;
-    }
-    const onKeyDown = event => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "End":
-        case "Home":
-          {
-            event.preventDefault();
-            resizeHandler(event);
-            break;
-          }
-        case "F6":
-          {
-            event.preventDefault();
-            const handles = getResizeHandles();
-            const index = getResizeHandleIndex(handleId);
-            assert(index !== null);
-            const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
-            const nextHandle = handles[nextIndex];
-            nextHandle.focus();
-            break;
-          }
-      }
-    };
-    handleElement.addEventListener("keydown", onKeyDown);
-    return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
-    };
-  }, [disabled, handleId, resizeHandler]);
+  }, [committedValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
 function areEqual(arrayA, arrayB) {
@@ -568,41 +740,61 @@ function areEqual(arrayA, arrayB) {
   return true;
 }
 
-function getDragOffset(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
+function isKeyDown(event) {
+  return event.type === "keydown";
+}
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
+}
+function isTouchEvent(event) {
+  return event.type.startsWith("touch");
+}
+
+function getResizeEventCursorPosition(direction, event) {
   const isHorizontal = direction === "horizontal";
-  let pointerOffset = 0;
   if (isMouseEvent(event)) {
-    pointerOffset = isHorizontal ? event.clientX : event.clientY;
+    return isHorizontal ? event.clientX : event.clientY;
   } else if (isTouchEvent(event)) {
     const firstTouch = event.touches[0];
-    pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
   } else {
-    return 0;
+    throw Error(`Unsupported event type "${event.type}"`);
   }
-  const handleElement = getResizeHandle(handleId);
-  const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
-  const elementOffset = isHorizontal ? rect.left : rect.top;
-  return pointerOffset - elementOffset - initialOffset;
 }
 
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-function getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
-  const {
-    dragOffset = 0,
-    dragHandleRect,
-    sizes: initialSizes
-  } = initialDragState || {};
-
-  // 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;
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
+  const isHorizontal = direction === "horizontal";
+  const handleElement = getResizeHandleElement(dragHandleId);
+  const groupId = handleElement.getAttribute("data-panel-group-id");
+  let {
+    initialCursorPosition
+  } = initialDragState;
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+  const groupElement = getPanelGroupElement(groupId);
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+  return offsetPercentage;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+function calculateDeltaPercentage(event, groupId, dragHandleId, direction, initialDragState, keyboardResizeByOptions) {
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
-    const groupElement = getPanelGroup(groupId);
+    const groupElement = getPanelGroupElement(groupId);
     const rect = groupElement.getBoundingClientRect();
     const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
-    const denominator = event.shiftKey ? 10 : 100;
-    const delta = groupSizeInPixels / denominator;
+    let delta = 0;
+    if (event.shiftKey) {
+      delta = 100;
+    } else if (keyboardResizeByOptions.percentage != null) {
+      delta = keyboardResizeByOptions.percentage;
+    } else if (keyboardResizeByOptions.pixels != null) {
+      delta = keyboardResizeByOptions.pixels / groupSizeInPixels;
+    } else {
+      delta = 10;
+    }
     let movement = 0;
     switch (event.key) {
       case "ArrowDown":
@@ -618,40 +810,152 @@ function getMovement(event, groupId, handleId, panelsArray, direction, prevSizes
         movement = isHorizontal ? 0 : -delta;
         break;
       case "End":
-        movement = groupSizeInPixels;
+        movement = 100;
         break;
       case "Home":
-        movement = -groupSizeInPixels;
+        movement = -100;
         break;
     }
-
-    // If the Panel being resized is collapsible,
-    // we need to special case resizing around the minSize boundary.
-    // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
-    // If expanding from collapsed, they should snap back to their minSize.
-    const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelsArray);
-    const targetPanelId = movement < 0 ? idBefore : idAfter;
-    const targetPanelIndex = panelsArray.findIndex(panel => panel.current.id === targetPanelId);
-    const targetPanel = panelsArray[targetPanelIndex];
-    if (targetPanel.current.collapsible) {
-      const baseSize = baseSizes[targetPanelIndex];
-      if (baseSize === 0 || baseSize.toPrecision(PRECISION) === targetPanel.current.minSize.toPrecision(PRECISION)) {
-        movement = movement < 0 ? -targetPanel.current.minSize * groupSizeInPixels : targetPanel.current.minSize * groupSizeInPixels;
-      }
-    }
     return movement;
   } else {
-    return getDragOffset(event, handleId, direction, dragOffset, dragHandleRect);
+    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
   }
 }
-function isKeyDown(event) {
-  return event.type === "keydown";
+
+function calculateUnsafeDefaultLayout({
+  groupSizePixels,
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelDataConstraints = panelDataArray.map(panelData => panelData.constraints);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const {
+      defaultSizePercentage
+    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
+    if (defaultSizePercentage != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSizePercentage;
+      remainingSize -= defaultSizePercentage;
+    }
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const {
+      defaultSizePercentage
+    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
+    if (defaultSizePercentage != null) {
+      continue;
+    }
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+  return layout;
 }
-function isMouseEvent(event) {
-  return event.type.startsWith("mouse");
+
+function convertPercentageToPixels(percentage, groupSizePixels) {
+  return percentage / 100 * groupSizePixels;
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
+
+// Layout should be pre-converted into percentages
+function callPanelCallbacks(groupId, panelsArray, layout, panelIdToLastNotifiedMixedSizesMap) {
+  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+  layout.forEach((sizePercentage, index) => {
+    const panelData = panelsArray[index];
+    if (!panelData) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
+    const {
+      callbacks,
+      constraints,
+      id: panelId
+    } = panelData;
+    const {
+      collapsible
+    } = constraints;
+    const mixedSizes = {
+      sizePercentage,
+      sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+    };
+    const lastNotifiedMixedSizes = panelIdToLastNotifiedMixedSizesMap[panelId];
+    if (lastNotifiedMixedSizes == null || mixedSizes.sizePercentage !== lastNotifiedMixedSizes.sizePercentage || mixedSizes.sizePixels !== lastNotifiedMixedSizes.sizePixels) {
+      panelIdToLastNotifiedMixedSizesMap[panelId] = mixedSizes;
+      const {
+        onCollapse,
+        onExpand,
+        onResize
+      } = callbacks;
+      if (onResize) {
+        onResize(mixedSizes, lastNotifiedMixedSizes);
+      }
+      if (collapsible && (onCollapse || onExpand)) {
+        const collapsedSize = getPercentageSizeFromMixedSizes({
+          sizePercentage: constraints.collapsedSizePercentage,
+          sizePixels: constraints.collapsedSizePixels
+        }, groupSizePixels) ?? 0;
+        const size = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
+        if (onExpand && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage === collapsedSize) && size !== collapsedSize) {
+          onExpand();
+        }
+        if (onCollapse && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage !== collapsedSize) && size === collapsedSize) {
+          onCollapse();
+        }
+      }
+    }
+  });
+}
+
+function compareLayouts(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index = 0; index < a.length; index++) {
+      if (a[index] != b[index]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+// This method returns a number between 1 and 100 representing
+
+// the % of the group's overall space this panel should occupy.
+function computePanelFlexBoxStyle({
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3
+}) {
+  const size = layout[panelIndex];
+  let flexGrow;
+  if (panelData.length === 1) {
+    flexGrow = "100";
+  } else if (size == null) {
+    flexGrow = "0";
+  } else {
+    flexGrow = size.toPrecision(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    // Without this, Panel sizes may be unintentionally overridden by their content
+    overflow: "hidden",
+    // Disable pointer events inside of a panel during resize
+    // This avoid edge cases like nested iframes
+    pointerEvents: dragState !== null ? "none" : undefined
+  };
 }
 
 let currentState = null;
@@ -705,17 +1009,47 @@ function debounce(callback, durationMs = 10) {
   return callable;
 }
 
+// PanelGroup might be rendering in a server-side environment where localStorage is not available
+// or on a browser with cookies/storage disabled.
+// In either case, this function avoids accessing localStorage until needed,
+// and avoids throwing user-visible errors.
+function initializeDefaultStorage(storageObject) {
+  try {
+    if (typeof localStorage !== "undefined") {
+      // Bypass this check for future calls
+      storageObject.getItem = name => {
+        return localStorage.getItem(name);
+      };
+      storageObject.setItem = (name, value) => {
+        localStorage.setItem(name, value);
+      };
+    } else {
+      throw new Error("localStorage not supported in this environment");
+    }
+  } catch (error) {
+    console.error(error);
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {};
+  }
+}
+
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
-// Using an attribute like minSize instead should work well enough.
+// Using the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function getSerializationKey(panels) {
   return panels.map(panel => {
     const {
-      minSize,
+      constraints,
+      id,
+      idIsFromProps,
       order
-    } = panel.current;
-    return order ? `${order}:${minSize}` : `${minSize}`;
+    } = panel;
+    if (idIsFromProps) {
+      return id;
+    } else {
+      return `${order}:${JSON.stringify(constraints)}`;
+    }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
@@ -749,31 +1083,145 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-const debounceMap = {};
+function shouldMonitorPixelBasedConstraints(constraints) {
+  return constraints.some(constraints => {
+    return constraints.collapsedSizePixels !== undefined || constraints.maxSizePixels !== undefined || constraints.minSizePixels !== undefined;
+  });
+}
 
-// PanelGroup might be rendering in a server-side environment where localStorage is not available
-// or on a browser with cookies/storage disabled.
-// In either case, this function avoids accessing localStorage until needed,
-// and avoids throwing user-visible errors.
-function initializeDefaultStorage(storageObject) {
-  try {
-    if (typeof localStorage !== "undefined") {
-      // Bypass this check for future calls
-      storageObject.getItem = name => {
-        return localStorage.getItem(name);
-      };
-      storageObject.setItem = (name, value) => {
-        localStorage.setItem(name, value);
-      };
-    } else {
-      throw new Error("localStorage not supported in this environment");
+function validatePanelConstraints({
+  groupSizePixels,
+  panelConstraints,
+  panelId,
+  panelIndex
+}) {
+  {
+    const warnings = [];
+    {
+      const {
+        collapsedSizePercentage,
+        collapsedSizePixels,
+        defaultSizePercentage,
+        defaultSizePixels,
+        maxSizePercentage,
+        maxSizePixels,
+        minSizePercentage,
+        minSizePixels
+      } = panelConstraints[panelIndex];
+      const conflictingUnits = [];
+      if (collapsedSizePercentage != null && collapsedSizePixels != null) {
+        conflictingUnits.push("collapsed size");
+      }
+      if (defaultSizePercentage != null && defaultSizePixels != null) {
+        conflictingUnits.push("default size");
+      }
+      if (maxSizePercentage != null && maxSizePixels != null) {
+        conflictingUnits.push("max size");
+      }
+      if (minSizePercentage != null && minSizePixels != null) {
+        conflictingUnits.push("min size");
+      }
+      if (conflictingUnits.length > 0) {
+        warnings.push(`should not specify both percentage and pixel units for: ${conflictingUnits.join(", ")}`);
+      }
+    }
+    {
+      const {
+        collapsedSizePercentage,
+        defaultSizePercentage,
+        maxSizePercentage,
+        minSizePercentage
+      } = computePercentagePanelConstraints(panelConstraints, panelIndex, groupSizePixels);
+      if (minSizePercentage > maxSizePercentage) {
+        warnings.push(`min size (${minSizePercentage}%) should not be greater than max size (${maxSizePercentage}%)`);
+      }
+      if (defaultSizePercentage != null) {
+        if (defaultSizePercentage < 0) {
+          warnings.push("default size should not be less than 0");
+        } else if (defaultSizePercentage < minSizePercentage) {
+          warnings.push("default size should not be less than min size");
+        }
+        if (defaultSizePercentage > 100) {
+          warnings.push("default size should not be greater than 100");
+        } else if (defaultSizePercentage > maxSizePercentage) {
+          warnings.push("default size should not be greater than max size");
+        }
+      }
+      if (collapsedSizePercentage > minSizePercentage) {
+        warnings.push("collapsed size should not be greater than min size");
+      }
+    }
+    if (warnings.length > 0) {
+      const name = panelId != null ? `Panel "${panelId}"` : "Panel";
+      console.warn(`${name} has an invalid configuration:\n\n${warnings.join("\n")}`);
+      return false;
     }
-  } catch (error) {
-    console.error(error);
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
   }
+  return true;
 }
+
+// All units must be in percentages; pixel values should be pre-converted
+function validatePanelGroupLayout({
+  groupSizePixels,
+  layout: prevLayout,
+  panelConstraints
+}) {
+  const nextLayout = [...prevLayout];
+
+  // Validate layout expectations
+  if (nextLayout.length !== panelConstraints.length) {
+    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
+  } else if (!fuzzyNumbersEqual(nextLayout.reduce((accumulated, current) => accumulated + current, 0), 100)) {
+    // This is not ideal so we should warn about it, but it may be recoverable in some cases
+    // (especially if the amount is small)
+    {
+      console.warn(`WARNING: Invalid layout total size: ${nextLayout.map(size => `${size}%`).join(", ")}`);
+    }
+  }
+  let remainingSize = 0;
+
+  // First pass: Validate the proposed layout given each panel's constraints
+  for (let index = 0; index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index];
+    const safeSize = resizePanel({
+      groupSizePixels,
+      panelConstraints,
+      panelIndex: index,
+      size: unsafeSize
+    });
+    if (unsafeSize != safeSize) {
+      remainingSize += unsafeSize - safeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+
+  // 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 (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const prevSize = nextLayout[index];
+      const unsafeSize = prevSize + remainingSize;
+      const safeSize = resizePanel({
+        groupSizePixels,
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize;
+        nextLayout[index] = safeSize;
+
+        // Once we've used up the remainder, bail
+        if (fuzzyNumbersEqual(remainingSize, 0)) {
+          break;
+        }
+      }
+    }
+  }
+  return nextLayout;
+}
+
+const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
 const defaultStorage = {
   getItem: name => {
     initializeDefaultStorage(defaultStorage);
@@ -784,306 +1232,464 @@ const defaultStorage = {
     defaultStorage.setItem(name, value);
   }
 };
-
-// Initial drag state serves a few purposes:
-// * dragOffset:
-//   Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
-//   This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
-// * 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.
+const debounceMap = {};
 function PanelGroupWithForwardedRef({
   autoSaveId,
-  children = null,
+  children,
   className: classNameFromProps = "",
   direction,
-  disablePointerEventsDuringResize = false,
   forwardedRef,
-  id: idFromProps = null,
-  onLayout,
+  id: idFromProps,
+  onLayout = null,
+  keyboardResizeByPercentage = null,
+  keyboardResizeByPixels = null,
   storage = defaultStorage,
-  style: styleFromProps = {},
+  style: styleFromProps,
   tagName: Type = "div"
 }) {
   const groupId = useUniqueId(idFromProps);
-  const [activeHandleId, setActiveHandleId] = useState(null);
-  const [panels, setPanels] = useState(new Map());
-
-  // When resizing is done via mouse/touch event–
-  // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
-  // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
-  const initialDragStateRef = useRef(null);
-  const devWarningsRef = useRef({
-    didLogDefaultSizeWarning: false,
-    didLogIdAndOrderWarning: false,
-    prevPanelIds: []
-  });
-
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef({
-    onLayout
-  });
-  useEffect(() => {
-    callbacksRef.current.onLayout = onLayout;
-  });
-  const panelIdToLastNotifiedSizeMapRef = useRef({});
-
-  // 0-1 values representing the relative size of each panel.
-  const [sizes, setSizes] = useState([]);
-
-  // Used to support imperative collapse/expand API.
-  const panelSizeBeforeCollapse = useRef(new Map());
+  const [dragState, setDragState] = useState(null);
+  const [layout, setLayout] = useState([]);
+  const [panelDataArray, setPanelDataArray] = useState([]);
+  const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
+  const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
-
-  // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef({
     direction,
-    panels,
-    sizes
+    dragState,
+    id: groupId,
+    keyboardResizeByPercentage,
+    keyboardResizeByPixels,
+    layout,
+    onLayout,
+    panelDataArray
+  });
+  const devWarningsRef = useRef({
+    didLogIdAndOrderWarning: false,
+    didLogPanelConstraintsWarning: false,
+    prevPanelIds: []
   });
   useImperativeHandle(forwardedRef, () => ({
+    getId: () => committedValuesRef.current.id,
     getLayout: () => {
       const {
-        sizes
+        id: groupId,
+        layout
       } = committedValuesRef.current;
-      return sizes;
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+      return layout.map(sizePercentage => {
+        return {
+          sizePercentage,
+          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+        };
+      });
     },
-    setLayout: sizes => {
-      const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
-      assert(total === 100, "Panel sizes must add up to 100%");
+    setLayout: mixedSizes => {
       const {
-        panels
+        id: groupId,
+        layout: prevLayout,
+        onLayout,
+        panelDataArray
       } = committedValuesRef.current;
-      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-      const panelsArray = panelsMapToSortedArray(panels);
-      setSizes(sizes);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+      const unsafeLayout = mixedSizes.map(mixedSize => getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels));
+      const safeLayout = validatePanelGroupLayout({
+        groupSizePixels,
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, safeLayout)) {
+        setLayout(safeLayout);
+        if (onLayout) {
+          onLayout(safeLayout.map(sizePercentage => ({
+            sizePercentage,
+            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+          })));
+        }
+        callPanelCallbacks(groupId, panelDataArray, safeLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+      }
     }
   }), []);
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
-    committedValuesRef.current.panels = panels;
-    committedValuesRef.current.sizes = sizes;
+    committedValuesRef.current.dragState = dragState;
+    committedValuesRef.current.id = groupId;
+    committedValuesRef.current.layout = layout;
+    committedValuesRef.current.onLayout = onLayout;
+    committedValuesRef.current.panelDataArray = panelDataArray;
   });
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
     groupId,
-    panels,
-    setSizes,
-    sizes,
-    panelSizeBeforeCollapse
+    layout,
+    panelDataArray,
+    setLayout
   });
-
-  // Notify external code when sizes have changed.
   useEffect(() => {
-    const {
-      onLayout
-    } = callbacksRef.current;
-    const {
-      panels,
-      sizes
-    } = committedValuesRef.current;
+    // If this panel has been configured to persist sizing information, save sizes to local storage.
+    if (autoSaveId) {
+      if (layout.length === 0 || layout.length !== panelDataArray.length) {
+        return;
+      }
 
-    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
-    if (sizes.length > 0) {
-      if (onLayout) {
-        onLayout(sizes);
+      // Limit the frequency of localStorage updates.
+      if (!debounceMap[autoSaveId]) {
+        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
       }
-      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-
-      // When possible, we notify before the next render so that rendering work can be batched together.
-      // Some cases are difficult to detect though,
-      // for example– panels that are conditionally rendered can affect the size of neighboring panels.
-      // In this case, the best we can do is notify on commit.
-      // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
     }
-  }, [sizes]);
+  }, [autoSaveId, layout, panelDataArray, storage]);
 
   // Once all panels have registered themselves,
   // 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;
-    if (sizes.length === panels.size) {
-      // Only compute (or restore) default sizes once per panel configuration.
+    const {
+      id: groupId,
+      layout,
+      onLayout
+    } = committedValuesRef.current;
+    if (layout.length === panelDataArray.length) {
+      // Only compute (or restore) default layout once per panel configuration.
       return;
     }
 
     // If this panel has been configured to persist sizing information,
     // default size should be restored from local storage if possible.
-    let defaultSizes = null;
+    let unsafeLayout = null;
     if (autoSaveId) {
-      const panelsArray = panelsMapToSortedArray(panels);
-      defaultSizes = loadPanelLayout(autoSaveId, panelsArray, storage);
+      unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+    }
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    if (unsafeLayout == null) {
+      unsafeLayout = calculateUnsafeDefaultLayout({
+        groupSizePixels,
+        panelDataArray
+      });
+    }
+
+    // Validate even saved layouts in case something has changed since last render
+    // e.g. for pixel groups, this could be the size of the window
+    const validatedLayout = validatePanelGroupLayout({
+      groupSizePixels,
+      layout: unsafeLayout,
+      panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+    });
+    if (!areEqual(layout, validatedLayout)) {
+      setLayout(validatedLayout);
     }
-    if (defaultSizes != null) {
-      setSizes(defaultSizes);
+    if (onLayout) {
+      onLayout(validatedLayout.map(sizePercentage => ({
+        sizePercentage,
+        sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+      })));
+    }
+    callPanelCallbacks(groupId, panelDataArray, validatedLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+  }, [autoSaveId, layout, panelDataArray, storage]);
+  useIsomorphicLayoutEffect(() => {
+    const constraints = panelDataArray.map(({
+      constraints
+    }) => constraints);
+    if (!shouldMonitorPixelBasedConstraints(constraints)) {
+      // Avoid the overhead of ResizeObserver if no pixel constraints require monitoring
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      console.warn(`WARNING: Pixel based constraints require ResizeObserver but it is not supported by the current browser.`);
     } 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 resizeObserver = new ResizeObserver(() => {
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+        const {
+          layout: prevLayout,
+          onLayout
+        } = committedValuesRef.current;
+        const nextLayout = validatePanelGroupLayout({
+          groupSizePixels,
+          layout: prevLayout,
+          panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+        });
+        if (!areEqual(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          if (onLayout) {
+            onLayout(nextLayout.map(sizePercentage => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+            })));
+          }
+          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
         }
       });
-      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;
-      }));
+      resizeObserver.observe(getPanelGroupElement(groupId));
+      return () => {
+        resizeObserver.disconnect();
+      };
     }
-  }, [autoSaveId, panels, storage]);
-  useEffect(() => {
-    // If this panel has been configured to persist sizing information, save sizes to local storage.
-    if (autoSaveId) {
-      if (sizes.length === 0 || sizes.length !== panels.size) {
-        return;
-      }
-      const panelsArray = panelsMapToSortedArray(panels);
+  }, [groupId, panelDataArray]);
 
-      // Limit the frequency of localStorage updates.
-      if (!debounceMap[autoSaveId]) {
-        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, 100);
-      }
-      debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
-    }
+  // DEV warnings
+  useEffect(() => {
     {
       const {
         didLogIdAndOrderWarning,
+        didLogPanelConstraintsWarning,
         prevPanelIds
       } = devWarningsRef.current;
       if (!didLogIdAndOrderWarning) {
         const {
-          panels
+          panelDataArray
         } = committedValuesRef.current;
-        const panelIds = Array.from(panels.keys());
+        const panelIds = panelDataArray.map(({
+          id
+        }) => id);
         devWarningsRef.current.prevPanelIds = panelIds;
         const panelsHaveChanged = prevPanelIds.length > 0 && !areEqual(prevPanelIds, panelIds);
         if (panelsHaveChanged) {
-          if (Array.from(panels.values()).find(panel => panel.current.idWasAutoGenerated || panel.current.order == null)) {
+          if (panelDataArray.find(({
+            idIsFromProps,
+            order
+          }) => !idIsFromProps || order == null)) {
             devWarningsRef.current.didLogIdAndOrderWarning = true;
             console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
           }
         }
       }
+      if (!didLogPanelConstraintsWarning) {
+        const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+        for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
+          const isValid = validatePanelConstraints({
+            groupSizePixels,
+            panelConstraints,
+            panelId: panelDataArray[panelIndex].id,
+            panelIndex
+          });
+          if (!isValid) {
+            devWarningsRef.current.didLogPanelConstraintsWarning = true;
+            break;
+          }
+        }
+      }
     }
-  }, [autoSaveId, panels, sizes, storage]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  });
+
+  // External APIs are safe to memoize via committed values ref
+  const collapsePanel = useCallback(panelData => {
     const {
-      panels
+      layout: prevLayout,
+      onLayout,
+      panelDataArray
     } = committedValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+      const {
+        collapsedSizePercentage,
+        panelSizePercentage,
+        pivotIndices,
+        groupSizePixels
+      } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+      if (panelSizePercentage !== collapsedSizePercentage) {
+        // Store size before collapse;
+        // This is the size that gets restored if the expand() API is used.
+        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSizePercentage);
+        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSizePercentage - collapsedSizePercentage : collapsedSizePercentage - panelSizePercentage;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          groupSizePixels,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          if (onLayout) {
+            onLayout(nextLayout.map(sizePercentage => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+            })));
+          }
+          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        }
+      }
+    }
+  }, [groupId]);
 
-    // Before mounting, Panels will not yet have registered themselves.
-    // This includes server rendering.
-    // At this point the best we can do is render everything with the same size.
-    if (panels.size === 0) {
-      {
-        if (!devWarningsRef.current.didLogDefaultSizeWarning) {
-          if (!isBrowser && defaultSize == null) {
-            devWarningsRef.current.didLogDefaultSizeWarning = true;
-            console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+  // External APIs are safe to memoize via committed values ref
+  const expandPanel = useCallback(panelData => {
+    const {
+      layout: prevLayout,
+      onLayout,
+      panelDataArray
+    } = committedValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+      const {
+        collapsedSizePercentage,
+        panelSizePercentage,
+        minSizePercentage,
+        pivotIndices,
+        groupSizePixels
+      } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+      if (panelSizePercentage === collapsedSizePercentage) {
+        // Restore this panel to the size it was before it was collapsed, if possible.
+        const prevPanelSizePercentage = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSizePercentage = prevPanelSizePercentage != null ? prevPanelSizePercentage : minSizePercentage;
+        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSizePercentage - baseSizePercentage : baseSizePercentage - panelSizePercentage;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          groupSizePixels,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          if (onLayout) {
+            onLayout(nextLayout.map(sizePercentage => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+            })));
           }
+          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
         }
       }
-      return {
-        flexBasis: 0,
-        flexGrow: defaultSize != null ? defaultSize : undefined,
-        flexShrink: 1,
-        // Without this, Panel sizes may be unintentionally overridden by their content.
-        overflow: "hidden"
-      };
     }
-    const flexGrow = getFlexGrow(panels, id, sizes);
+  }, [groupId]);
+
+  // External APIs are safe to memoize via committed values ref
+  const getPanelSize = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = committedValuesRef.current;
+    const {
+      panelSizePercentage,
+      panelSizePixels
+    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
     return {
-      flexBasis: 0,
-      flexGrow,
-      flexShrink: 1,
-      // Without this, Panel sizes may be unintentionally overridden by their content.
-      overflow: "hidden",
-      // Disable pointer events inside of a panel during resize.
-      // This avoid edge cases like nested iframes.
-      pointerEvents: disablePointerEventsDuringResize && activeHandleId !== null ? "none" : undefined
+      sizePercentage: panelSizePercentage,
+      sizePixels: panelSizePixels
     };
-  }, [activeHandleId, disablePointerEventsDuringResize, sizes]);
-  const registerPanel = useCallback((id, panelRef) => {
-    setPanels(prevPanels => {
-      if (prevPanels.has(id)) {
-        return prevPanels;
-      }
-      const nextPanels = new Map(prevPanels);
-      nextPanels.set(id, panelRef);
-      return nextPanels;
+  }, [groupId]);
+
+  // This API should never read from committedValuesRef
+  const getPanelStyle = useCallback(panelData => {
+    const panelIndex = panelDataArray.indexOf(panelData);
+    return computePanelFlexBoxStyle({
+      dragState,
+      layout,
+      panelData: panelDataArray,
+      panelIndex
+    });
+  }, [dragState, layout, panelDataArray]);
+
+  // External APIs are safe to memoize via committed values ref
+  const isPanelCollapsed = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = committedValuesRef.current;
+    const {
+      collapsedSizePercentage,
+      collapsible,
+      panelSizePercentage
+    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
+    return collapsible === true && panelSizePercentage === collapsedSizePercentage;
+  }, [groupId]);
+
+  // External APIs are safe to memoize via committed values ref
+  const isPanelExpanded = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = committedValuesRef.current;
+    const {
+      collapsedSizePercentage,
+      collapsible,
+      panelSizePercentage
+    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
+    return !collapsible || panelSizePercentage > collapsedSizePercentage;
+  }, [groupId]);
+  const registerPanel = useCallback(panelData => {
+    setPanelDataArray(prevPanelDataArray => {
+      const nextPanelDataArray = [...prevPanelDataArray, panelData];
+      return nextPanelDataArray.sort((panelA, panelB) => {
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null) {
+          return 0;
+        } else if (orderA == null) {
+          return -1;
+        } else if (orderB == null) {
+          return 1;
+        } else {
+          return orderA - orderB;
+        }
+      });
     });
   }, []);
-  const registerResizeHandle = useCallback(handleId => {
-    const resizeHandler = event => {
+  const registerResizeHandle = useCallback(dragHandleId => {
+    return function resizeHandler(event) {
       event.preventDefault();
       const {
         direction,
-        panels,
-        sizes: prevSizes
+        dragState,
+        id: groupId,
+        keyboardResizeByPercentage,
+        keyboardResizeByPixels,
+        onLayout,
+        panelDataArray,
+        layout: prevLayout
       } = committedValuesRef.current;
-      const panelsArray = panelsMapToSortedArray(panels);
-      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelsArray);
-      if (idBefore == null || idAfter == null) {
-        return;
-      }
-      let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
-      if (movement === 0) {
+      const {
+        initialLayout
+      } = dragState ?? {};
+      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
+      let delta = calculateDeltaPercentage(event, groupId, dragHandleId, direction, dragState, {
+        percentage: keyboardResizeByPercentage,
+        pixels: keyboardResizeByPixels
+      });
+      if (delta === 0) {
         return;
       }
-      const groupElement = getPanelGroup(groupId);
-      const rect = groupElement.getBoundingClientRect();
-      const isHorizontal = direction === "horizontal";
 
       // Support RTL layouts
+      const isHorizontal = direction === "horizontal";
       if (document.dir === "rtl" && isHorizontal) {
-        movement = -movement;
+        delta = -delta;
       }
-      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);
-      const sizesChanged = !areEqual(prevSizes, nextSizes);
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+      const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        groupSizePixels,
+        layout: initialLayout ?? prevLayout,
+        panelConstraints,
+        pivotIndices,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      });
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
 
-      // Don't update cursor for resizes triggered by keyboard interactions.
+      // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+      // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
       if (isMouseEvent(event) || isTouchEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
-          if (!sizesChanged) {
+          prevDeltaRef.current = delta;
+          if (!layoutChanged) {
             // If the pointer has moved too far to resize the panel any further,
             // update the cursor style for a visual clue.
             // This mimics VS Code behavior.
 
             if (isHorizontal) {
-              setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
+              setGlobalCursorStyle(delta < 0 ? "horizontal-min" : "horizontal-max");
             } else {
-              setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
+              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
             }
           } else {
             // Reset the cursor style to the the normal resize cursor.
@@ -1091,185 +1697,100 @@ function PanelGroupWithForwardedRef({
           }
         }
       }
-      if (sizesChanged) {
-        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-        setSizes(nextSizes);
-
-        // If resize change handlers have been declared, this is the time to call them.
-        // Trigger user callbacks after updating state, so that user code can override the sizes.
-        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
+      if (layoutChanged) {
+        setLayout(nextLayout);
+        if (onLayout) {
+          onLayout(nextLayout.map(sizePercentage => ({
+            sizePercentage,
+            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+          })));
+        }
+        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
       }
-      prevDeltaRef.current = delta;
     };
-    return resizeHandler;
-  }, [groupId]);
-  const unregisterPanel = useCallback(id => {
-    setPanels(prevPanels => {
-      if (!prevPanels.has(id)) {
-        return prevPanels;
-      }
-      const nextPanels = new Map(prevPanels);
-      nextPanels.delete(id);
-      return nextPanels;
-    });
   }, []);
-  const collapsePanel = useCallback(id => {
+
+  // External APIs are safe to memoize via committed values ref
+  const resizePanel = useCallback((panelData, mixedSizes) => {
     const {
-      panels,
-      sizes: prevSizes
+      layout: prevLayout,
+      onLayout,
+      panelDataArray
     } = committedValuesRef.current;
-    const panel = panels.get(id);
-    if (panel == null) {
-      return;
-    }
+    const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
-      collapsedSize,
-      collapsible
-    } = panel.current;
-    if (!collapsible) {
-      return;
-    }
-    const panelsArray = panelsMapToSortedArray(panels);
-    const index = panelsArray.indexOf(panel);
-    if (index < 0) {
-      return;
-    }
-    const currentSize = prevSizes[index];
-    if (currentSize === collapsedSize) {
-      // Panel is already collapsed.
-      return;
-    }
-    panelSizeBeforeCollapse.current.set(id, currentSize);
-    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-    if (idBefore == null || idAfter == null) {
-      return;
-    }
-    const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
-    const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
-    if (prevSizes !== nextSizes) {
-      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-      setSizes(nextSizes);
-
-      // If resize change handlers have been declared, this is the time to call them.
-      // Trigger user callbacks after updating state, so that user code can override the sizes.
-      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
+      groupSizePixels,
+      panelSizePercentage,
+      pivotIndices
+    } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+    const sizePercentage = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
+    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+    const delta = isLastPanel ? panelSizePercentage - sizePercentage : sizePercentage - panelSizePercentage;
+    const nextLayout = adjustLayoutByDelta({
+      delta,
+      groupSizePixels,
+      layout: prevLayout,
+      panelConstraints: panelConstraintsArray,
+      pivotIndices,
+      trigger: "imperative-api"
+    });
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      if (onLayout) {
+        onLayout(nextLayout.map(sizePercentage => ({
+          sizePercentage,
+          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+        })));
+      }
+      callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
     }
-  }, []);
-  const expandPanel = useCallback(id => {
+  }, [groupId]);
+  const startDragging = useCallback((dragHandleId, event) => {
     const {
-      panels,
-      sizes: prevSizes
+      direction,
+      layout
     } = committedValuesRef.current;
-    const panel = panels.get(id);
-    if (panel == null) {
-      return;
-    }
-    const {
-      collapsedSize,
-      minSize
-    } = panel.current;
-    const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || minSize;
-    if (!sizeBeforeCollapse) {
-      return;
-    }
-    const panelsArray = panelsMapToSortedArray(panels);
-    const index = panelsArray.indexOf(panel);
-    if (index < 0) {
-      return;
-    }
-    const currentSize = prevSizes[index];
-    if (currentSize !== collapsedSize) {
-      // Panel is already expanded.
-      return;
-    }
-    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-    if (idBefore == null || idAfter == null) {
-      return;
-    }
-    const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? collapsedSize - sizeBeforeCollapse : sizeBeforeCollapse;
-    const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
-    if (prevSizes !== nextSizes) {
-      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-      setSizes(nextSizes);
-
-      // If resize change handlers have been declared, this is the time to call them.
-      // Trigger user callbacks after updating state, so that user code can override the sizes.
-      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-    }
+    const handleElement = getResizeHandleElement(dragHandleId);
+    const initialCursorPosition = getResizeEventCursorPosition(direction, event);
+    setDragState({
+      dragHandleId,
+      dragHandleRect: handleElement.getBoundingClientRect(),
+      initialCursorPosition,
+      initialLayout: layout
+    });
   }, []);
-  const resizePanel = useCallback((id, nextSize) => {
-    const {
-      panels,
-      sizes: prevSizes
-    } = committedValuesRef.current;
-    const panel = panels.get(id);
-    if (panel == null) {
-      return;
-    }
-    const {
-      collapsedSize,
-      collapsible,
-      maxSize,
-      minSize
-    } = panel.current;
-    const panelsArray = panelsMapToSortedArray(panels);
-    const index = panelsArray.indexOf(panel);
-    if (index < 0) {
-      return;
-    }
-    const currentSize = prevSizes[index];
-    if (currentSize === nextSize) {
-      return;
-    }
-    if (collapsible && nextSize === collapsedSize) ; else {
-      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
-    }
-    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-    if (idBefore == null || idAfter == null) {
-      return;
-    }
-    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);
-    if (prevSizes !== nextSizes) {
-      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-      setSizes(nextSizes);
-
-      // If resize change handlers have been declared, this is the time to call them.
-      // Trigger user callbacks after updating state, so that user code can override the sizes.
-      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-    }
+  const stopDragging = useCallback(() => {
+    resetGlobalCursorStyle();
+    setDragState(null);
+  }, []);
+  const unregisterPanel = useCallback(panelData => {
+    delete panelIdToLastNotifiedMixedSizesMapRef.current[panelData.id];
+    setPanelDataArray(panelDataArray => {
+      const index = panelDataArray.indexOf(panelData);
+      if (index >= 0) {
+        panelDataArray = [...panelDataArray];
+        panelDataArray.splice(index, 1);
+      }
+      return panelDataArray;
+    });
   }, []);
   const context = useMemo(() => ({
-    activeHandleId,
     collapsePanel,
     direction,
+    dragState,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
     groupId,
+    isPanelCollapsed,
+    isPanelExpanded,
     registerPanel,
     registerResizeHandle,
     resizePanel,
-    startDragging: (id, event) => {
-      setActiveHandleId(id);
-      if (isMouseEvent(event) || isTouchEvent(event)) {
-        const handleElement = getResizeHandle(id);
-        initialDragStateRef.current = {
-          dragHandleRect: handleElement.getBoundingClientRect(),
-          dragOffset: getDragOffset(event, id, direction),
-          sizes: committedValuesRef.current.sizes
-        };
-      }
-    },
-    stopDragging: () => {
-      resetGlobalCursorStyle();
-      setActiveHandleId(null);
-      initialDragStateRef.current = null;
-    },
+    startDragging,
+    stopDragging,
     unregisterPanel
-  }), [activeHandleId, collapsePanel, direction, expandPanel, getPanelStyle, groupId, registerPanel, registerResizeHandle, resizePanel, unregisterPanel]);
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
   const style = {
     display: "flex",
     flexDirection: direction === "horizontal" ? "row" : "column",
@@ -1278,19 +1799,20 @@ function PanelGroupWithForwardedRef({
     width: "100%"
   };
   return createElement(PanelGroupContext.Provider, {
-    children: createElement(Type, {
-      children,
-      className: classNameFromProps,
-      "data-panel-group": "",
-      "data-panel-group-direction": direction,
-      "data-panel-group-id": groupId,
-      style: {
-        ...style,
-        ...styleFromProps
-      }
-    }),
     value: context
-  });
+  }, createElement(Type, {
+    children,
+    className: classNameFromProps,
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    // CSS selectors
+    "data-panel-group": "",
+    // e2e test attributes
+    "data-panel-group-direction": direction ,
+    "data-panel-group-id": groupId 
+  }));
 }
 const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
   ...props,
@@ -1298,6 +1820,77 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+function panelDataHelper(groupId, panelDataArray, panelData, layout) {
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+  const percentagePanelConstraints = computePercentagePanelConstraints(panelConstraintsArray, panelIndex, groupSizePixels);
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+  const panelSizePercentage = layout[panelIndex];
+  const panelSizePixels = convertPercentageToPixels(panelSizePercentage, groupSizePixels);
+  return {
+    ...percentagePanelConstraints,
+    collapsible: panelConstraints.collapsible,
+    panelSizePercentage,
+    panelSizePixels,
+    groupSizePixels,
+    pivotIndices
+  };
+}
+
+// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+
+function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler
+}) {
+  useEffect(() => {
+    if (disabled || resizeHandler == null) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(handleId);
+    if (handleElement == null) {
+      return;
+    }
+    const onKeyDown = event => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "End":
+        case "Home":
+          {
+            event.preventDefault();
+            resizeHandler(event);
+            break;
+          }
+        case "F6":
+          {
+            event.preventDefault();
+            const groupId = handleElement.getAttribute("data-panel-group-id");
+            const handles = getResizeHandleElementsForGroup(groupId);
+            const index = getResizeHandleElementIndex(groupId, handleId);
+            assert(index !== null);
+            const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+            const nextHandle = handles[nextIndex];
+            nextHandle.focus();
+            break;
+          }
+      }
+    };
+    handleElement.addEventListener("keydown", onKeyDown);
+    return () => {
+      handleElement.removeEventListener("keydown", onKeyDown);
+    };
+  }, [disabled, handleId, resizeHandler]);
+}
 
 function PanelResizeHandle({
   children = null,
@@ -1322,15 +1915,15 @@ function PanelResizeHandle({
     throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
   }
   const {
-    activeHandleId,
     direction,
+    dragState,
     groupId,
     registerResizeHandle,
     startDragging,
     stopDragging
   } = panelGroupContext;
   const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = activeHandleId === resizeHandleId;
+  const isDragging = dragState?.dragHandleId === resizeHandleId;
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
   const stopDraggingAndBlur = useCallback(() => {
@@ -1394,6 +1987,8 @@ 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,