react-resizable-panels 0.0.63 → 1.0.0-rc.2

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

@@ -67,24 +67,20 @@ function useUniqueId(idFromParams = null) {
 function PanelWithForwardedRef({
   children,
   className: classNameFromProps = "",
-  collapsedSizePercentage,
-  collapsedSizePixels,
+  collapsedSize,
   collapsible,
-  dataAttributes,
-  defaultSizePercentage,
-  defaultSizePixels,
+  defaultSize,
   forwardedRef,
   id: idFromProps,
-  maxSizePercentage,
-  maxSizePixels,
-  minSizePercentage,
-  minSizePixels,
+  maxSize,
+  minSize,
   onCollapse,
   onExpand,
   onResize,
   order,
   style: styleFromProps,
-  tagName: Type = "div"
+  tagName: Type = "div",
+  ...rest
 }) {
   const context = useContext(PanelGroupContext);
   if (context === null) {
@@ -109,15 +105,11 @@ function PanelWithForwardedRef({
       onResize
     },
     constraints: {
-      collapsedSizePercentage,
-      collapsedSizePixels,
+      collapsedSize,
       collapsible,
-      defaultSizePercentage,
-      defaultSizePixels,
-      maxSizePercentage,
-      maxSizePixels,
-      minSizePercentage,
-      minSizePixels
+      defaultSize,
+      maxSize,
+      minSize
     },
     id: panelId,
     idIsFromProps: idFromProps !== undefined,
@@ -131,9 +123,9 @@ function PanelWithForwardedRef({
   // 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) {
+      if (!isBrowser && defaultSize == null) {
         devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
-        console.warn(`WARNING: Panel defaultSizePercentage or defaultSizePixels prop recommended to avoid layout shift after server rendering`);
+        console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
       }
     }
   }
@@ -148,15 +140,11 @@ function PanelWithForwardedRef({
     callbacks.onCollapse = onCollapse;
     callbacks.onExpand = onExpand;
     callbacks.onResize = onResize;
-    constraints.collapsedSizePercentage = collapsedSizePercentage;
-    constraints.collapsedSizePixels = collapsedSizePixels;
+    constraints.collapsedSize = collapsedSize;
     constraints.collapsible = collapsible;
-    constraints.defaultSizePercentage = defaultSizePercentage;
-    constraints.defaultSizePixels = defaultSizePixels;
-    constraints.maxSizePercentage = maxSizePercentage;
-    constraints.maxSizePixels = maxSizePixels;
-    constraints.minSizePercentage = minSizePercentage;
-    constraints.minSizePixels = minSizePixels;
+    constraints.defaultSize = defaultSize;
+    constraints.maxSize = maxSize;
+    constraints.minSize = minSize;
   });
   useIsomorphicLayoutEffect(() => {
     const panelData = panelDataRef.current;
@@ -184,19 +172,19 @@ function PanelWithForwardedRef({
     isExpanded() {
       return !isPanelCollapsed(panelDataRef.current);
     },
-    resize: mixedSizes => {
-      resizePanel(panelDataRef.current, mixedSizes);
+    resize: size => {
+      resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
   const style = getPanelStyle(panelDataRef.current);
   return createElement(Type, {
+    ...rest,
     children,
     className: classNameFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
-    ...dataAttributes,
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,
@@ -213,81 +201,11 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
-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;
-  const hasPixelConstraints = collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null;
-  if (hasPixelConstraints && groupSizePixels <= 0) {
-    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
-    return {
-      collapsedSizePercentage: 0,
-      defaultSizePercentage,
-      maxSizePercentage: 0,
-      minSizePercentage: 0
-    };
-  }
-  if (collapsedSizePixels != null) {
-    collapsedSizePercentage = convertPixelsToPercentage(collapsedSizePixels, groupSizePixels);
-  }
-  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;
-    }
+function assert(expectedCondition, message = "Assertion failed!") {
+  if (!expectedCondition) {
+    console.error(message);
+    throw Error(message);
   }
-  const {
-    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
-  };
 }
 
 const PRECISION = 10;
@@ -309,56 +227,41 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
 
 // Panel size must be in percentages; pixel values should be pre-converted
 function resizePanel({
-  groupSizePixels,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   panelIndex,
   size
 }) {
-  const hasPixelConstraints = panelConstraints.some(({
-    collapsedSizePixels,
-    defaultSizePixels,
-    minSizePixels,
-    maxSizePixels
-  }) => collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null);
-  if (hasPixelConstraints && groupSizePixels <= 0) {
-    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
-    return 0;
-  }
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null);
   let {
-    collapsible
-  } = panelConstraints[panelIndex];
-  const {
-    collapsedSizePercentage,
-    maxSizePercentage,
-    minSizePercentage
-  } = computePercentagePanelConstraints(panelConstraints, panelIndex, groupSizePixels);
-  if (minSizePercentage != null) {
-    if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
-      if (collapsible) {
-        // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-        const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
-        if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
-          size = collapsedSizePercentage;
-        } else {
-          size = minSizePercentage;
-        }
+    collapsedSize = 0,
+    collapsible,
+    maxSize = 100,
+    minSize = 0
+  } = panelConstraints;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
       } else {
-        size = minSizePercentage;
+        size = minSize;
       }
+    } else {
+      size = minSize;
     }
   }
-  if (maxSizePercentage != null) {
-    size = Math.min(maxSizePercentage, size);
-  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
   return size;
 }
 
 // All units must be in percentages; pixel values should be pre-converted
 function adjustLayoutByDelta({
   delta,
-  groupSizePixels,
   layout: prevLayout,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   pivotIndices,
   trigger
 }) {
@@ -366,6 +269,9 @@ function adjustLayoutByDelta({
     return prevLayout;
   }
   const nextLayout = [...prevLayout];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null);
+  assert(secondPivotIndex != null);
   let deltaApplied = 0;
 
   //const DEBUG = [];
@@ -389,18 +295,23 @@ function adjustLayoutByDelta({
     if (trigger === "keyboard") {
       {
         // Check if we should expand a collapsed panel
-        const index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-        const constraints = panelConstraints[index];
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
+        if (panelConstraints.collapsible) {
           const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
           const {
-            collapsedSizePercentage,
-            minSizePercentage
-          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
-          if (fuzzyNumbersEqual(prevSize, collapsedSizePercentage)) {
-            const localDelta = minSizePercentage - prevSize;
+            collapsedSize = 0,
+            minSize = 0
+          } = panelConstraints;
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
@@ -413,18 +324,26 @@ function adjustLayoutByDelta({
 
       {
         // Check if we should collapse a panel at its minimum size
-        const index = delta < 0 ? pivotIndices[0] : pivotIndices[1];
-        const constraints = panelConstraints[index];
+        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+        const {
+          collapsible
+        } = panelConstraints;
+
         //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
+        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        if (collapsible) {
           const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
           const {
-            collapsedSizePercentage,
-            minSizePercentage
-          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
-          if (fuzzyNumbersEqual(prevSize, minSizePercentage)) {
-            const localDelta = prevSize - collapsedSizePercentage;
+            collapsedSize = 0,
+            minSize = 0
+          } = panelConstraints;
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
@@ -446,15 +365,15 @@ function adjustLayoutByDelta({
     // as an expanding panel might change from collapsed to min size.
 
     const increment = delta < 0 ? 1 : -1;
-    let index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
+      assert(prevSize != null);
       const maxSafeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
+        panelConstraints: panelConstraintsArray,
         panelIndex: index,
         size: 100
       });
@@ -463,7 +382,7 @@ function adjustLayoutByDelta({
 
       maxAvailableDelta += delta;
       index += increment;
-      if (index < 0 || index >= panelConstraints.length) {
+      if (index < 0 || index >= panelConstraintsArray.length) {
         break;
       }
     }
@@ -478,15 +397,15 @@ function adjustLayoutByDelta({
   {
     // 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];
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
     let index = pivotIndex;
-    while (index >= 0 && index < panelConstraints.length) {
+    while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
       const prevSize = prevLayout[index];
+      assert(prevSize != null);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
+        panelConstraints: panelConstraintsArray,
         panelIndex: index,
         size: unsafeSize
       });
@@ -518,11 +437,12 @@ function adjustLayoutByDelta({
   }
   {
     // Now distribute the applied delta to the panels in the other direction
-    const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-    const unsafeSize = prevLayout[pivotIndex] + deltaApplied;
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize = prevLayout[pivotIndex];
+    assert(prevSize != null);
+    const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
+      panelConstraints: panelConstraintsArray,
       panelIndex: pivotIndex,
       size: unsafeSize
     });
@@ -533,14 +453,14 @@ function adjustLayoutByDelta({
     // 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];
+      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
       let index = pivotIndex;
-      while (index >= 0 && index < panelConstraints.length) {
+      while (index >= 0 && index < panelConstraintsArray.length) {
         const prevSize = nextLayout[index];
+        assert(prevSize != null);
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({
-          groupSizePixels,
-          panelConstraints,
+          panelConstraints: panelConstraintsArray,
           panelIndex: index,
           size: unsafeSize
         });
@@ -564,9 +484,7 @@ function adjustLayoutByDelta({
   //DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  deltaApplied = 100 - totalSize;
   //DEBUG.push(`total size: ${totalSize}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
   //console.log(DEBUG.join("\n"));
 
   if (!fuzzyNumbersEqual(totalSize, 100)) {
@@ -575,27 +493,7 @@ function adjustLayoutByDelta({
   return nextLayout;
 }
 
-function assert(expectedCondition, message = "Assertion failed!") {
-  if (!expectedCondition) {
-    console.error(message);
-    throw Error(message);
-  }
-}
-
-function getPercentageSizeFromMixedSizes({
-  sizePercentage,
-  sizePixels
-}, groupSizePixels) {
-  if (sizePercentage != null) {
-    return sizePercentage;
-  } else if (sizePixels != null) {
-    return convertPixelsToPercentage(sizePixels, groupSizePixels);
-  }
-  return undefined;
-}
-
 function calculateAriaValues({
-  groupSizePixels,
   layout,
   panelsArray,
   pivotIndices
@@ -604,28 +502,19 @@ function calculateAriaValues({
   let currentMaxSize = 100;
   let totalMinSize = 0;
   let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null);
 
   // A panel's effective min/max sizes also need to account for other panel's sizes.
   panelsArray.forEach((panelData, index) => {
-    var _getPercentageSizeFro, _getPercentageSizeFro2;
     const {
       constraints
     } = panelData;
     const {
-      maxSizePercentage,
-      maxSizePixels,
-      minSizePercentage,
-      minSizePixels
+      maxSize = 100,
+      minSize = 0
     } = constraints;
-    const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-      sizePercentage: minSizePercentage,
-      sizePixels: minSizePixels
-    }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-    const maxSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
-      sizePercentage: maxSizePercentage,
-      sizePixels: maxSizePixels
-    }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 100;
-    if (index === pivotIndices[0]) {
+    if (index === firstIndex) {
       currentMinSize = minSize;
       currentMaxSize = maxSize;
     } else {
@@ -635,7 +524,7 @@ function calculateAriaValues({
   });
   const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
   const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
-  const valueNow = layout[pivotIndices[0]];
+  const valueNow = layout[firstIndex];
   return {
     valueMax,
     valueMin,
@@ -666,42 +555,6 @@ function getPanelGroupElement(id) {
   return null;
 }
 
-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) {
@@ -734,7 +587,6 @@ function useWindowSplitterPanelGroupBehavior({
     didWarnAboutMissingResizeHandle: false
   });
   useIsomorphicLayoutEffect(() => {
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
     const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
     for (let index = 0; index < panelDataArray.length - 1; index++) {
       const {
@@ -742,7 +594,6 @@ function useWindowSplitterPanelGroupBehavior({
         valueMin,
         valueNow
       } = calculateAriaValues({
-        groupSizePixels,
         layout,
         panelsArray: panelDataArray,
         pivotIndices: [index, index + 1]
@@ -759,10 +610,12 @@ function useWindowSplitterPanelGroupBehavior({
           }
         }
       } else {
-        resizeHandleElement.setAttribute("aria-controls", panelDataArray[index].id);
+        const panelData = panelDataArray[index];
+        assert(panelData);
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
         resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
         resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
-        resizeHandleElement.setAttribute("aria-valuenow", "" + Math.round(valueNow));
+        resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
       }
     }
     return () => {
@@ -775,14 +628,18 @@ function useWindowSplitterPanelGroupBehavior({
     };
   }, [groupId, layout, panelDataArray]);
   useEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    assert(eagerValues);
     const {
       panelDataArray
-    } = eagerValuesRef.current;
+    } = eagerValues;
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
     const handles = getResizeHandleElementsForGroup(groupId);
+    assert(handles);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      assert(handleId);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
       if (idBefore == null || idAfter == null) {
         return () => {};
@@ -798,21 +655,16 @@ function useWindowSplitterPanelGroupBehavior({
               const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
               if (index >= 0) {
                 const panelData = panelDataArray[index];
+                assert(panelData);
                 const size = layout[index];
-                if (size != null && panelData.constraints.collapsible) {
-                  var _getPercentageSizeFro, _getPercentageSizeFro2;
-                  const groupSizePixels = getAvailableGroupSizePixels(groupId);
-                  const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-                    sizePercentage: panelData.constraints.collapsedSizePercentage,
-                    sizePixels: panelData.constraints.collapsedSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-                  const minSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
-                    sizePercentage: panelData.constraints.minSizePercentage,
-                    sizePixels: panelData.constraints.minSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 0;
+                const {
+                  collapsedSize = 0,
+                  collapsible,
+                  minSize = 0
+                } = panelData.constraints;
+                if (size != null && collapsible) {
                   const nextLayout = adjustLayoutByDelta({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    groupSizePixels,
                     layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
                     pivotIndices: determinePivotIndices(groupId, handleId),
@@ -866,6 +718,7 @@ function getResizeEventCursorPosition(direction, event) {
     return isHorizontal ? event.clientX : event.clientY;
   } else if (isTouchEvent(event)) {
     const firstTouch = event.touches[0];
+    assert(firstTouch);
     return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
   } else {
     throw Error(`Unsupported event type "${event.type}"`);
@@ -875,12 +728,15 @@ function getResizeEventCursorPosition(direction, event) {
 function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId);
+  assert(handleElement);
   const groupId = handleElement.getAttribute("data-panel-group-id");
+  assert(groupId);
   let {
     initialCursorPosition
   } = initialDragState;
   const cursorPosition = getResizeEventCursorPosition(direction, event);
   const groupElement = getPanelGroupElement(groupId);
+  assert(groupElement);
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
   const offsetPixels = cursorPosition - initialCursorPosition;
@@ -889,19 +745,14 @@ function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDr
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-function calculateDeltaPercentage(event, groupId, dragHandleId, direction, initialDragState, keyboardResizeByOptions) {
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
-    const groupElement = getPanelGroupElement(groupId);
-    const rect = groupElement.getBoundingClientRect();
-    const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
     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 if (keyboardResizeBy != null) {
+      delta = keyboardResizeBy;
     } else {
       delta = 10;
     }
@@ -928,37 +779,43 @@ function calculateDeltaPercentage(event, groupId, dragHandleId, direction, initi
     }
     return movement;
   } else {
+    if (initialDragState == null) {
+      return 0;
+    }
     return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
   }
 }
 
 function calculateUnsafeDefaultLayout({
-  groupSizePixels,
   panelDataArray
 }) {
   const layout = Array(panelDataArray.length);
-  const panelDataConstraints = panelDataArray.map(panelData => panelData.constraints);
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
   let numPanelsWithSizes = 0;
   let remainingSize = 100;
 
   // Distribute default sizes first
   for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
     const {
-      defaultSizePercentage
-    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
-    if (defaultSizePercentage != null) {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
       numPanelsWithSizes++;
-      layout[index] = defaultSizePercentage;
-      remainingSize -= defaultSizePercentage;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
     }
   }
 
   // Remaining size should be distributed evenly between panels without default sizes
   for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
     const {
-      defaultSizePercentage
-    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
-    if (defaultSizePercentage != null) {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
       continue;
     }
     const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
@@ -970,54 +827,36 @@ function calculateUnsafeDefaultLayout({
   return layout;
 }
 
-function convertPercentageToPixels(percentage, groupSizePixels) {
-  return percentage / 100 * groupSizePixels;
-}
-
 // Layout should be pre-converted into percentages
-function callPanelCallbacks(groupId, panelsArray, layout, panelIdToLastNotifiedMixedSizesMap) {
-  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-  layout.forEach((sizePercentage, index) => {
+function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+  layout.forEach((size, 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;
-    }
+    assert(panelData);
     const {
       callbacks,
       constraints,
       id: panelId
     } = panelData;
     const {
+      collapsedSize = 0,
       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 lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
       const {
         onCollapse,
         onExpand,
         onResize
       } = callbacks;
       if (onResize) {
-        onResize(mixedSizes, lastNotifiedMixedSizes);
+        onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        var _getPercentageSizeFro;
-        const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-          sizePercentage: constraints.collapsedSizePercentage,
-          sizePixels: constraints.collapsedSizePixels
-        }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-        const size = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
-        if (onExpand && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
           onCollapse();
         }
       }
@@ -1200,74 +1039,39 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-function shouldMonitorPixelBasedConstraints(constraints) {
-  return constraints.some(constraints => {
-    return constraints.collapsedSizePixels !== undefined || constraints.maxSizePixels !== undefined || constraints.minSizePixels !== undefined;
-  });
-}
-
 function validatePanelConstraints({
-  groupSizePixels,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   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 panelConstraints = panelConstraintsArray[panelIndex];
+    assert(panelConstraints);
+    const {
+      collapsedSize = 0,
+      defaultSize,
+      maxSize = 100,
+      minSize = 0
+    } = panelConstraints;
+    if (minSize > maxSize) {
+      warnings.push(`min size (${minSize}%) should not be greater than max size (${maxSize}%)`);
     }
-    {
-      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 (defaultSize != null) {
+      if (defaultSize < 0) {
+        warnings.push("default size should not be less than 0");
+      } else if (defaultSize < minSize) {
+        warnings.push("default size should not be less than min size");
       }
-      if (collapsedSizePercentage > minSizePercentage) {
-        warnings.push("collapsed size should not be greater than min size");
+      if (defaultSize > 100) {
+        warnings.push("default size should not be greater than 100");
+      } else if (defaultSize > maxSize) {
+        warnings.push("default size should not be greater than max size");
       }
     }
+    if (collapsedSize > minSize) {
+      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")}`);
@@ -1279,20 +1083,26 @@ function validatePanelConstraints({
 
 // All units must be in percentages; pixel values should be pre-converted
 function validatePanelGroupLayout({
-  groupSizePixels,
   layout: prevLayout,
   panelConstraints
 }) {
   const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
 
   // 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)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 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(", ")}`);
+      console.warn(`WARNING: Invalid layout total size: ${nextLayout.map(size => `${size}%`).join(", ")}. Layout normalization will be applied.`);
+    }
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      assert(unsafeSize != null);
+      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+      nextLayout[index] = safeSize;
     }
   }
   let remainingSize = 0;
@@ -1300,8 +1110,8 @@ function validatePanelGroupLayout({
   // First pass: Validate the proposed layout given each panel's constraints
   for (let index = 0; index < panelConstraints.length; index++) {
     const unsafeSize = nextLayout[index];
+    assert(unsafeSize != null);
     const safeSize = resizePanel({
-      groupSizePixels,
       panelConstraints,
       panelIndex: index,
       size: unsafeSize
@@ -1317,9 +1127,9 @@ function validatePanelGroupLayout({
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const prevSize = nextLayout[index];
+      assert(prevSize != null);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
-        groupSizePixels,
         panelConstraints,
         panelIndex: index,
         size: unsafeSize
@@ -1354,21 +1164,20 @@ function PanelGroupWithForwardedRef({
   autoSaveId = null,
   children,
   className: classNameFromProps = "",
-  dataAttributes,
   direction,
   forwardedRef,
-  id: idFromProps,
+  id: idFromProps = null,
   onLayout = null,
-  keyboardResizeByPercentage = null,
-  keyboardResizeByPixels = null,
+  keyboardResizeBy = null,
   storage = defaultStorage,
   style: styleFromProps,
-  tagName: Type = "div"
+  tagName: Type = "div",
+  ...rest
 }) {
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
   const committedValuesRef = useRef({
@@ -1376,8 +1185,7 @@ function PanelGroupWithForwardedRef({
     direction,
     dragState,
     id: groupId,
-    keyboardResizeByPercentage,
-    keyboardResizeByPixels,
+    keyboardResizeBy,
     onLayout,
     storage
   });
@@ -1393,33 +1201,20 @@ function PanelGroupWithForwardedRef({
   useImperativeHandle(forwardedRef, () => ({
     getId: () => committedValuesRef.current.id,
     getLayout: () => {
-      const {
-        id: groupId
-      } = committedValuesRef.current;
       const {
         layout
       } = eagerValuesRef.current;
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      return layout.map(sizePercentage => {
-        return {
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        };
-      });
+      return layout;
     },
-    setLayout: mixedSizes => {
+    setLayout: unsafeLayout => {
       const {
-        id: groupId,
         onLayout
       } = committedValuesRef.current;
       const {
         layout: prevLayout,
         panelDataArray
       } = eagerValuesRef.current;
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      const unsafeLayout = mixedSizes.map(mixedSize => getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels));
       const safeLayout = validatePanelGroupLayout({
-        groupSizePixels,
         layout: unsafeLayout,
         panelConstraints: panelDataArray.map(panelData => panelData.constraints)
       });
@@ -1427,12 +1222,9 @@ function PanelGroupWithForwardedRef({
         setLayout(safeLayout);
         eagerValuesRef.current.layout = safeLayout;
         if (onLayout) {
-          onLayout(safeLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
+          onLayout(safeLayout);
         }
-        callPanelCallbacks(groupId, panelDataArray, safeLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
       }
     }
   }), []);
@@ -1443,11 +1235,7 @@ function PanelGroupWithForwardedRef({
     committedValuesRef.current.id = groupId;
     committedValuesRef.current.onLayout = onLayout;
     committedValuesRef.current.storage = storage;
-
-    // panelDataArray and layout are updated in-sync with scheduled state updates.
-    // TODO [217] Move these values into a separate ref
   });
-
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
     eagerValuesRef,
@@ -1466,57 +1254,16 @@ function PanelGroupWithForwardedRef({
       if (layout.length === 0 || layout.length !== panelDataArray.length) {
         return;
       }
+      let debouncedSave = debounceMap[autoSaveId];
 
       // Limit the frequency of localStorage updates.
-      if (!debounceMap[autoSaveId]) {
-        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+      if (debouncedSave == null) {
+        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debounceMap[autoSaveId] = debouncedSave;
       }
-      debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
+      debouncedSave(autoSaveId, panelDataArray, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
-  useIsomorphicLayoutEffect(() => {
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    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 resizeObserver = new ResizeObserver(() => {
-        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-        const {
-          onLayout
-        } = committedValuesRef.current;
-        const nextLayout = validatePanelGroupLayout({
-          groupSizePixels,
-          layout: prevLayout,
-          panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-        });
-        if (!areEqual(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
-          }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
-        }
-      });
-      resizeObserver.observe(getPanelGroupElement(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId]);
 
   // DEV warnings
   useEffect(() => {
@@ -1547,12 +1294,12 @@ function PanelGroupWithForwardedRef({
       }
       if (!didLogPanelConstraintsWarning) {
         const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
-        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
         for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
+          const panelData = panelDataArray[panelIndex];
+          assert(panelData);
           const isValid = validatePanelConstraints({
-            groupSizePixels,
             panelConstraints,
-            panelId: panelDataArray[panelIndex].id,
+            panelId: panelData.id,
             panelIndex
           });
           if (!isValid) {
@@ -1576,20 +1323,19 @@ function PanelGroupWithForwardedRef({
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
-        collapsedSizePercentage,
-        panelSizePercentage,
-        pivotIndices,
-        groupSizePixels
-      } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
-      if (panelSizePercentage !== collapsedSizePercentage) {
+        collapsedSize = 0,
+        panelSize,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      assert(panelSize != null);
+      if (panelSize !== collapsedSize) {
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
-        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSizePercentage);
+        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
         const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSizePercentage - collapsedSizePercentage : collapsedSizePercentage - panelSizePercentage;
+        const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          groupSizePixels,
           layout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
@@ -1599,16 +1345,13 @@ function PanelGroupWithForwardedRef({
           setLayout(nextLayout);
           eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
+            onLayout(nextLayout);
           }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
         }
       }
     }
-  }, [groupId]);
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
   const expandPanel = useCallback(panelData => {
@@ -1622,21 +1365,19 @@ function PanelGroupWithForwardedRef({
     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) {
+        collapsedSize = 0,
+        panelSize,
+        minSize = 0,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      if (panelSize === collapsedSize) {
         // 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 ? prevPanelSizePercentage : minSizePercentage;
+        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
         const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSizePercentage - baseSizePercentage : baseSizePercentage - panelSizePercentage;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          groupSizePixels,
           layout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
@@ -1646,16 +1387,13 @@ function PanelGroupWithForwardedRef({
           setLayout(nextLayout);
           eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
+            onLayout(nextLayout);
           }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
         }
       }
     }
-  }, [groupId]);
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
   const getPanelSize = useCallback(panelData => {
@@ -1664,14 +1402,11 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      panelSizePercentage,
-      panelSizePixels
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return {
-      sizePercentage: panelSizePercentage,
-      sizePixels: panelSizePixels
-    };
-  }, [groupId]);
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(panelSize != null);
+    return panelSize;
+  }, []);
 
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(panelData => {
@@ -1694,12 +1429,12 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSizePercentage,
+      collapsedSize,
       collapsible,
-      panelSizePercentage
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return collapsible === true && panelSizePercentage === collapsedSizePercentage;
-  }, [groupId]);
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    return collapsible === true && panelSize === collapsedSize;
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
   const isPanelExpanded = useCallback(panelData => {
@@ -1708,12 +1443,13 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSizePercentage,
+      collapsedSize = 0,
       collapsible,
-      panelSizePercentage
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return !collapsible || panelSizePercentage > collapsedSizePercentage;
-  }, [groupId]);
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(panelSize != null);
+    return !collapsible || panelSize > collapsedSize;
+  }, []);
   const registerPanel = useCallback(panelData => {
     const {
       autoSaveId,
@@ -1753,18 +1489,8 @@ function PanelGroupWithForwardedRef({
     if (autoSaveId) {
       unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
     }
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-    if (groupSizePixels <= 0) {
-      if (shouldMonitorPixelBasedConstraints(panelDataArray.map(({
-        constraints
-      }) => constraints))) {
-        // Wait until the group has rendered a non-zero size before computing layout.
-        return;
-      }
-    }
     if (unsafeLayout == null) {
       unsafeLayout = calculateUnsafeDefaultLayout({
-        groupSizePixels,
         panelDataArray
       });
     }
@@ -1772,7 +1498,6 @@ function PanelGroupWithForwardedRef({
     // 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 nextLayout = validatePanelGroupLayout({
-      groupSizePixels,
       layout: unsafeLayout,
       panelConstraints: panelDataArray.map(panelData => panelData.constraints)
     });
@@ -1784,12 +1509,9 @@ function PanelGroupWithForwardedRef({
     eagerValuesRef.current.layout = nextLayout;
     if (!areEqual(prevLayout, nextLayout)) {
       if (onLayout) {
-        onLayout(nextLayout.map(sizePercentage => ({
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        })));
+        onLayout(nextLayout);
       }
-      callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
@@ -1799,8 +1521,7 @@ function PanelGroupWithForwardedRef({
         direction,
         dragState,
         id: groupId,
-        keyboardResizeByPercentage,
-        keyboardResizeByPixels,
+        keyboardResizeBy,
         onLayout
       } = committedValuesRef.current;
       const {
@@ -1811,10 +1532,7 @@ function PanelGroupWithForwardedRef({
         initialLayout
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId);
-      let delta = calculateDeltaPercentage(event, groupId, dragHandleId, direction, dragState, {
-        percentage: keyboardResizeByPercentage,
-        pixels: keyboardResizeByPixels
-      });
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy);
       if (delta === 0) {
         return;
       }
@@ -1824,11 +1542,9 @@ function PanelGroupWithForwardedRef({
       if (document.dir === "rtl" && isHorizontal) {
         delta = -delta;
       }
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
       const nextLayout = adjustLayoutByDelta({
         delta,
-        groupSizePixels,
         layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
@@ -1864,18 +1580,15 @@ function PanelGroupWithForwardedRef({
         setLayout(nextLayout);
         eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
-          onLayout(nextLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
+          onLayout(nextLayout);
         }
-        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
       }
     };
   }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const resizePanel = useCallback((panelData, mixedSizes) => {
+  const resizePanel = useCallback((panelData, unsafePanelSize) => {
     const {
       onLayout
     } = committedValuesRef.current;
@@ -1885,16 +1598,14 @@ function PanelGroupWithForwardedRef({
     } = eagerValuesRef.current;
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
-      groupSizePixels,
-      panelSizePercentage,
+      panelSize,
       pivotIndices
-    } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
-    const sizePercentage = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
+    } = panelDataHelper(panelDataArray, panelData, prevLayout);
+    assert(panelSize != null);
     const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-    const delta = isLastPanel ? panelSizePercentage - sizePercentage : sizePercentage - panelSizePercentage;
+    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
-      groupSizePixels,
       layout: prevLayout,
       panelConstraints: panelConstraintsArray,
       pivotIndices,
@@ -1904,14 +1615,11 @@ function PanelGroupWithForwardedRef({
       setLayout(nextLayout);
       eagerValuesRef.current.layout = nextLayout;
       if (onLayout) {
-        onLayout(nextLayout.map(sizePercentage => ({
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        })));
+        onLayout(nextLayout);
       }
-      callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
-  }, [groupId]);
+  }, []);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -1920,6 +1628,7 @@ function PanelGroupWithForwardedRef({
       layout
     } = eagerValuesRef.current;
     const handleElement = getResizeHandleElement(dragHandleId);
+    assert(handleElement);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
       dragHandleId,
@@ -1938,7 +1647,6 @@ function PanelGroupWithForwardedRef({
   });
   const unregisterPanel = useCallback(panelData => {
     const {
-      id: groupId,
       onLayout
     } = committedValuesRef.current;
     const {
@@ -1961,7 +1669,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedMixedSizesMapRef.current;
+      const map = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1970,7 +1678,7 @@ function PanelGroupWithForwardedRef({
         pendingPanelIds.delete(panelId);
         if (panelDataArray.find(({
           id
-        }) => id === panelId) == null) {
+        }) => id === panelId) != null) {
           unmountDueToStrictMode = true;
 
           // TRICKY
@@ -1987,16 +1695,13 @@ function PanelGroupWithForwardedRef({
         // The group is unmounting; skip layout calculation.
         return;
       }
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       let 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 nextLayout = validatePanelGroupLayout({
-        groupSizePixels,
         layout: unsafeLayout,
         panelConstraints: panelDataArray.map(panelData => panelData.constraints)
       });
@@ -2004,12 +1709,9 @@ function PanelGroupWithForwardedRef({
         setLayout(nextLayout);
         eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
-          onLayout(nextLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
+          onLayout(nextLayout);
         }
-        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
       }
     }, 0);
   }, []);
@@ -2040,13 +1742,13 @@ function PanelGroupWithForwardedRef({
   return createElement(PanelGroupContext.Provider, {
     value: context
   }, createElement(Type, {
+    ...rest,
     children,
     className: classNameFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
-    ...dataAttributes,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2059,22 +1761,16 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
-function panelDataHelper(groupId, panelDataArray, panelData, layout) {
+function panelDataHelper(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);
+  const panelSize = layout[panelIndex];
   return {
-    ...percentagePanelConstraints,
-    collapsible: panelConstraints.collapsible,
-    panelSizePercentage,
-    panelSizePixels,
-    groupSizePixels,
+    ...panelConstraints,
+    panelSize,
     pivotIndices
   };
 }
@@ -2114,6 +1810,7 @@ function useWindowSplitterResizeHandlerBehavior({
           {
             event.preventDefault();
             const groupId = handleElement.getAttribute("data-panel-group-id");
+            assert(groupId);
             const handles = getResizeHandleElementsForGroup(groupId);
             const index = getResizeHandleElementIndex(groupId, handleId);
             assert(index !== null);
@@ -2134,12 +1831,13 @@ function useWindowSplitterResizeHandlerBehavior({
 function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
-  dataAttributes,
   disabled = false,
-  id: idFromProps = null,
+  id: idFromProps,
   onDragging,
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tabIndex = 0,
+  tagName: Type = "div",
+  ...rest
 }) {
   const divElementRef = useRef(null);
 
@@ -2169,8 +1867,9 @@ function PanelResizeHandle({
   const stopDraggingAndBlur = useCallback(() => {
     // Clicking on the drag handle shouldn't leave it focused;
     // That would cause the PanelGroup to think it was still active.
-    const div = divElementRef.current;
-    div.blur();
+    const divElement = divElementRef.current;
+    assert(divElement);
+    divElement.blur();
     stopDragging();
     const {
       onDragging
@@ -2198,6 +1897,7 @@ function PanelResizeHandle({
       resizeHandler(event);
     };
     const divElement = divElementRef.current;
+    assert(divElement);
     const targetDocument = divElement.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
@@ -2225,15 +1925,18 @@ function PanelResizeHandle({
     userSelect: "none"
   };
   return createElement(Type, {
+    ...rest,
     children,
     className: classNameFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     onMouseDown: event => {
       startDragging(resizeHandleId, event.nativeEvent);
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
       const {
         onDragging
-      } = callbacksRef.current;
+      } = callbacks;
       if (onDragging) {
         onDragging(true);
       }
@@ -2243,9 +1946,11 @@ function PanelResizeHandle({
     onTouchEnd: stopDraggingAndBlur,
     onTouchStart: event => {
       startDragging(resizeHandleId, event.nativeEvent);
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
       const {
         onDragging
-      } = callbacksRef.current;
+      } = callbacks;
       if (onDragging) {
         onDragging(true);
       }
@@ -2256,8 +1961,7 @@ function PanelResizeHandle({
       ...style,
       ...styleFromProps
     },
-    tabIndex: 0,
-    ...dataAttributes,
+    tabIndex,
     // CSS selectors
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,
@@ -2272,3 +1976,4 @@ PanelResizeHandle.displayName = "PanelResizeHandle";
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
+exports.assert = assert;