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

package/src/PanelGroup.ts

@@ -4,35 +4,31 @@ import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
-import { DataAttributes, Direction, MixedSizes } from "./types";
+import { Direction } from "./types";
 import { adjustLayoutByDelta } from "./utils/adjustLayoutByDelta";
 import { areEqual } from "./utils/arrays";
+import { assert } from "./utils/assert";
 import { calculateDeltaPercentage } from "./utils/calculateDeltaPercentage";
 import { calculateUnsafeDefaultLayout } from "./utils/calculateUnsafeDefaultLayout";
 import { callPanelCallbacks } from "./utils/callPanelCallbacks";
 import { compareLayouts } from "./utils/compareLayouts";
 import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
-import { computePercentagePanelConstraints } from "./utils/computePercentagePanelConstraints";
-import { convertPercentageToPixels } from "./utils/convertPercentageToPixels";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
-import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
-import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
-import { getPercentageSizeFromMixedSizes } from "./utils/getPercentageSizeFromMixedSizes";
 import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
-import { shouldMonitorPixelBasedConstraints } from "./utils/shouldMonitorPixelBasedConstraints";
 import { validatePanelConstraints } from "./utils/validatePanelConstraints";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
 import {
   CSSProperties,
   ElementType,
   ForwardedRef,
+  HTMLAttributes,
   PropsWithChildren,
   createElement,
   forwardRef,
@@ -48,8 +44,8 @@ const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
 
 export type ImperativePanelGroupHandle = {
   getId: () => string;
-  getLayout: () => MixedSizes[];
-  setLayout: (layout: Partial<MixedSizes>[]) => void;
+  getLayout: () => number[];
+  setLayout: (layout: number[]) => void;
 };
 
 export type PanelGroupStorage = {
@@ -57,7 +53,7 @@ export type PanelGroupStorage = {
   setItem(name: string, value: string): void;
 };
 
-export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
+export type PanelGroupOnLayout = (layout: number[]) => void;
 
 const defaultStorage: PanelGroupStorage = {
   getItem: (name: string) => {
@@ -70,19 +66,18 @@ const defaultStorage: PanelGroupStorage = {
   },
 };
 
-export type PanelGroupProps = PropsWithChildren<{
-  autoSaveId?: string | null;
-  className?: string;
-  dataAttributes?: DataAttributes;
-  direction: Direction;
-  id?: string | null;
-  keyboardResizeByPercentage?: number | null;
-  keyboardResizeByPixels?: number | null;
-  onLayout?: PanelGroupOnLayout | null;
-  storage?: PanelGroupStorage;
-  style?: CSSProperties;
-  tagName?: ElementType;
-}>;
+export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
+  PropsWithChildren<{
+    autoSaveId?: string | null;
+    className?: string;
+    direction: Direction;
+    id?: string | null;
+    keyboardResizeBy?: number | null;
+    onLayout?: PanelGroupOnLayout | null;
+    storage?: PanelGroupStorage;
+    style?: CSSProperties;
+    tagName?: ElementType;
+  }>;
 
 const debounceMap: {
   [key: string]: typeof savePanelGroupLayout;
@@ -92,16 +87,15 @@ 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",
+  ...rest
 }: PanelGroupProps & {
   forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
 }) {
@@ -110,9 +104,7 @@ function PanelGroupWithForwardedRef({
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
 
-  const panelIdToLastNotifiedMixedSizesMapRef = useRef<
-    Record<string, MixedSizes>
-  >({});
+  const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
   const prevDeltaRef = useRef<number>(0);
 
@@ -121,8 +113,7 @@ function PanelGroupWithForwardedRef({
     direction: Direction;
     dragState: DragState | null;
     id: string;
-    keyboardResizeByPercentage: number | null;
-    keyboardResizeByPixels: number | null;
+    keyboardResizeBy: number | null;
     onLayout: PanelGroupOnLayout | null;
     storage: PanelGroupStorage;
   }>({
@@ -130,8 +121,7 @@ function PanelGroupWithForwardedRef({
     direction,
     dragState,
     id: groupId,
-    keyboardResizeByPercentage,
-    keyboardResizeByPixels,
+    keyboardResizeBy,
     onLayout,
     storage,
   });
@@ -159,34 +149,15 @@ function PanelGroupWithForwardedRef({
     () => ({
       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: Partial<MixedSizes>[]) => {
-        const { id: groupId, onLayout } = committedValuesRef.current;
+      setLayout: (unsafeLayout: number[]) => {
+        const { 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
@@ -199,22 +170,13 @@ function PanelGroupWithForwardedRef({
           eagerValuesRef.current.layout = safeLayout;
 
           if (onLayout) {
-            onLayout(
-              safeLayout.map((sizePercentage) => ({
-                sizePercentage,
-                sizePixels: convertPercentageToPixels(
-                  sizePercentage,
-                  groupSizePixels
-                ),
-              }))
-            );
+            onLayout(safeLayout);
           }
 
           callPanelCallbacks(
-            groupId,
             panelDataArray,
             safeLayout,
-            panelIdToLastNotifiedMixedSizesMapRef.current
+            panelIdToLastNotifiedSizeMapRef.current
           );
         }
       },
@@ -229,9 +191,6 @@ 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({
@@ -252,77 +211,21 @@ function PanelGroupWithForwardedRef({
         return;
       }
 
+      let debouncedSave = debounceMap[autoSaveId];
+
       // Limit the frequency of localStorage updates.
-      if (!debounceMap[autoSaveId]) {
-        debounceMap[autoSaveId] = debounce(
+      if (debouncedSave == null) {
+        debouncedSave = debounce(
           savePanelGroupLayout,
           LOCAL_STORAGE_DEBOUNCE_INTERVAL
         );
-      }
-      debounceMap[autoSaveId](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)!);
+        debounceMap[autoSaveId] = debouncedSave;
+      }
 
-      return () => {
-        resizeObserver.disconnect();
-      };
+      debouncedSave(autoSaveId, panelDataArray, layout, storage);
     }
-  }, [groupId]);
+  }, [autoSaveId, layout, storage]);
 
   // DEV warnings
   useEffect(() => {
@@ -362,17 +265,17 @@ function PanelGroupWithForwardedRef({
           (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,
           });
 
@@ -387,177 +290,139 @@ function PanelGroupWithForwardedRef({
   });
 
   // External APIs are safe to memoize via committed values ref
-  const collapsePanel = useCallback(
-    (panelData: PanelData) => {
-      const { onLayout } = committedValuesRef.current;
-      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+  const collapsePanel = useCallback((panelData: PanelData) => {
+    const { onLayout } = committedValuesRef.current;
+    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
-      if (panelData.constraints.collapsible) {
-        const panelConstraintsArray = panelDataArray.map(
-          (panelData) => panelData.constraints
-        );
+    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 {
+        collapsedSize = 0,
+        panelSize,
+        pivotIndices,
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
 
-          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",
-          });
+      assert(panelSize != null);
 
-          if (!compareLayouts(prevLayout, nextLayout)) {
-            setLayout(nextLayout);
+      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, panelSize);
 
-            eagerValuesRef.current.layout = nextLayout;
+        const isLastPanel =
+          findPanelDataIndex(panelDataArray, panelData) ===
+          panelDataArray.length - 1;
+        const delta = isLastPanel
+          ? panelSize - collapsedSize
+          : collapsedSize - panelSize;
 
-            if (onLayout) {
-              onLayout(
-                nextLayout.map((sizePercentage) => ({
-                  sizePercentage,
-                  sizePixels: convertPercentageToPixels(
-                    sizePercentage,
-                    groupSizePixels
-                  ),
-                }))
-              );
-            }
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api",
+        });
 
-            callPanelCallbacks(
-              groupId,
-              panelDataArray,
-              nextLayout,
-              panelIdToLastNotifiedMixedSizesMapRef.current
-            );
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+
+          eagerValuesRef.current.layout = nextLayout;
+
+          if (onLayout) {
+            onLayout(nextLayout);
           }
+
+          callPanelCallbacks(
+            panelDataArray,
+            nextLayout,
+            panelIdToLastNotifiedSizeMapRef.current
+          );
         }
       }
-    },
-    [groupId]
-  );
+    }
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(
-    (panelData: PanelData) => {
-      const { onLayout } = committedValuesRef.current;
-      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+  const expandPanel = useCallback((panelData: PanelData) => {
+    const { onLayout } = committedValuesRef.current;
+    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
-      if (panelData.constraints.collapsible) {
-        const panelConstraintsArray = panelDataArray.map(
-          (panelData) => panelData.constraints
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map(
+        (panelData) => panelData.constraints
+      );
+
+      const {
+        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 prevPanelSize = panelSizeBeforeCollapseRef.current.get(
+          panelData.id
         );
 
-        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
-              ? 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",
-          });
+        const baseSize =
+          prevPanelSize != null && prevPanelSize >= minSize
+            ? prevPanelSize
+            : minSize;
 
-          if (!compareLayouts(prevLayout, nextLayout)) {
-            setLayout(nextLayout);
+        const isLastPanel =
+          findPanelDataIndex(panelDataArray, panelData) ===
+          panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
 
-            eagerValuesRef.current.layout = nextLayout;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api",
+        });
 
-            if (onLayout) {
-              onLayout(
-                nextLayout.map((sizePercentage) => ({
-                  sizePercentage,
-                  sizePixels: convertPercentageToPixels(
-                    sizePercentage,
-                    groupSizePixels
-                  ),
-                }))
-              );
-            }
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
 
-            callPanelCallbacks(
-              groupId,
-              panelDataArray,
-              nextLayout,
-              panelIdToLastNotifiedMixedSizesMapRef.current
-            );
+          eagerValuesRef.current.layout = nextLayout;
+
+          if (onLayout) {
+            onLayout(nextLayout);
           }
+
+          callPanelCallbacks(
+            panelDataArray,
+            nextLayout,
+            panelIdToLastNotifiedSizeMapRef.current
+          );
         }
       }
-    },
-    [groupId]
-  );
+    }
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const getPanelSize = useCallback(
-    (panelData: PanelData) => {
-      const { layout, panelDataArray } = eagerValuesRef.current;
+  const getPanelSize = useCallback((panelData: PanelData) => {
+    const { layout, panelDataArray } = eagerValuesRef.current;
 
-      const { panelSizePercentage, panelSizePixels } = panelDataHelper(
-        groupId,
-        panelDataArray,
-        panelData,
-        layout
-      );
+    const { panelSize } = panelDataHelper(panelDataArray, panelData, layout);
 
-      return {
-        sizePercentage: panelSizePercentage,
-        sizePixels: panelSizePixels,
-      };
-    },
-    [groupId]
-  );
+    assert(panelSize != null);
+
+    return panelSize;
+  }, []);
 
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(
     (panelData: PanelData) => {
       const { panelDataArray } = eagerValuesRef.current;
 
-      const panelIndex = panelDataArray.indexOf(panelData);
+      const panelIndex = findPanelDataIndex(panelDataArray, panelData);
 
       return computePanelFlexBoxStyle({
         dragState,
@@ -570,32 +435,32 @@ function PanelGroupWithForwardedRef({
   );
 
   // External APIs are safe to memoize via committed values ref
-  const isPanelCollapsed = useCallback(
-    (panelData: PanelData) => {
-      const { layout, panelDataArray } = eagerValuesRef.current;
+  const isPanelCollapsed = useCallback((panelData: PanelData) => {
+    const { layout, panelDataArray } = eagerValuesRef.current;
 
-      const { collapsedSizePercentage, collapsible, panelSizePercentage } =
-        panelDataHelper(groupId, panelDataArray, panelData, layout);
+    const { collapsedSize, collapsible, panelSize } = panelDataHelper(
+      panelDataArray,
+      panelData,
+      layout
+    );
 
-      return (
-        collapsible === true && panelSizePercentage === collapsedSizePercentage
-      );
-    },
-    [groupId]
-  );
+    return collapsible === true && panelSize === collapsedSize;
+  }, []);
 
   // External APIs are safe to memoize via committed values ref
-  const isPanelExpanded = useCallback(
-    (panelData: PanelData) => {
-      const { layout, panelDataArray } = eagerValuesRef.current;
+  const isPanelExpanded = useCallback((panelData: PanelData) => {
+    const { layout, panelDataArray } = eagerValuesRef.current;
 
-      const { collapsedSizePercentage, collapsible, panelSizePercentage } =
-        panelDataHelper(groupId, panelDataArray, panelData, layout);
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize,
+    } = panelDataHelper(panelDataArray, panelData, layout);
 
-      return !collapsible || panelSizePercentage > collapsedSizePercentage;
-    },
-    [groupId]
-  );
+    assert(panelSize != null);
+
+    return !collapsible || panelSize > collapsedSize;
+  }, []);
 
   const registerPanel = useCallback((panelData: PanelData) => {
     const {
@@ -606,6 +471,19 @@ function PanelGroupWithForwardedRef({
     } = committedValuesRef.current;
     const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
+    // HACK
+    // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
+    // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      if (panelData.idIsFromProps) {
+        console.warn(`Panel with id "${panelData.id}" registered twice`);
+      } else {
+        console.warn(`Panel registered twice`);
+      }
+      return;
+    }
+
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -635,21 +513,8 @@ function PanelGroupWithForwardedRef({
       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,
       });
     }
@@ -657,7 +522,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
@@ -673,22 +537,13 @@ function PanelGroupWithForwardedRef({
 
     if (!areEqual(prevLayout, nextLayout)) {
       if (onLayout) {
-        onLayout(
-          nextLayout.map((sizePercentage) => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(
-              sizePercentage,
-              groupSizePixels
-            ),
-          }))
-        );
+        onLayout(nextLayout);
       }
 
       callPanelCallbacks(
-        groupId,
         panelDataArray,
         nextLayout,
-        panelIdToLastNotifiedMixedSizesMapRef.current
+        panelIdToLastNotifiedSizeMapRef.current
       );
     }
   }, []);
@@ -701,8 +556,7 @@ function PanelGroupWithForwardedRef({
         direction,
         dragState,
         id: groupId,
-        keyboardResizeByPercentage,
-        keyboardResizeByPixels,
+        keyboardResizeBy,
         onLayout,
       } = committedValuesRef.current;
       const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
@@ -713,14 +567,10 @@ function PanelGroupWithForwardedRef({
 
       let delta = calculateDeltaPercentage(
         event,
-        groupId,
         dragHandleId,
         direction,
-        dragState!,
-        {
-          percentage: keyboardResizeByPercentage,
-          pixels: keyboardResizeByPixels,
-        }
+        dragState,
+        keyboardResizeBy
       );
       if (delta === 0) {
         return;
@@ -732,14 +582,12 @@ function PanelGroupWithForwardedRef({
         delta = -delta;
       }
 
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       const panelConstraints = panelDataArray.map(
         (panelData) => panelData.constraints
       );
 
       const nextLayout = adjustLayoutByDelta({
         delta,
-        groupSizePixels,
         layout: initialLayout ?? prevLayout,
         panelConstraints,
         pivotIndices,
@@ -782,22 +630,13 @@ function PanelGroupWithForwardedRef({
         eagerValuesRef.current.layout = nextLayout;
 
         if (onLayout) {
-          onLayout(
-            nextLayout.map((sizePercentage) => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(
-                sizePercentage,
-                groupSizePixels
-              ),
-            }))
-          );
+          onLayout(nextLayout);
         }
 
         callPanelCallbacks(
-          groupId,
           panelDataArray,
           nextLayout,
-          panelIdToLastNotifiedMixedSizesMapRef.current
+          panelIdToLastNotifiedSizeMapRef.current
         );
       }
     };
@@ -805,7 +644,7 @@ function PanelGroupWithForwardedRef({
 
   // External APIs are safe to memoize via committed values ref
   const resizePanel = useCallback(
-    (panelData: PanelData, mixedSizes: Partial<MixedSizes>) => {
+    (panelData: PanelData, unsafePanelSize: number) => {
       const { onLayout } = committedValuesRef.current;
 
       const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
@@ -814,23 +653,23 @@ function PanelGroupWithForwardedRef({
         (panelData) => panelData.constraints
       );
 
-      const { groupSizePixels, panelSizePercentage, pivotIndices } =
-        panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+      const { panelSize, pivotIndices } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        prevLayout
+      );
 
-      const sizePercentage = getPercentageSizeFromMixedSizes(
-        mixedSizes,
-        groupSizePixels
-      )!;
+      assert(panelSize != null);
 
       const isLastPanel =
-        panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        findPanelDataIndex(panelDataArray, panelData) ===
+        panelDataArray.length - 1;
       const delta = isLastPanel
-        ? panelSizePercentage - sizePercentage
-        : sizePercentage - panelSizePercentage;
+        ? panelSize - unsafePanelSize
+        : unsafePanelSize - panelSize;
 
       const nextLayout = adjustLayoutByDelta({
         delta,
-        groupSizePixels,
         layout: prevLayout,
         panelConstraints: panelConstraintsArray,
         pivotIndices,
@@ -843,26 +682,17 @@ function PanelGroupWithForwardedRef({
         eagerValuesRef.current.layout = nextLayout;
 
         if (onLayout) {
-          onLayout(
-            nextLayout.map((sizePercentage) => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(
-                sizePercentage,
-                groupSizePixels
-              ),
-            }))
-          );
+          onLayout(nextLayout);
         }
 
         callPanelCallbacks(
-          groupId,
           panelDataArray,
           nextLayout,
-          panelIdToLastNotifiedMixedSizesMapRef.current
+          panelIdToLastNotifiedSizeMapRef.current
         );
       }
     },
-    [groupId]
+    []
   );
 
   const startDragging = useCallback(
@@ -870,7 +700,8 @@ function PanelGroupWithForwardedRef({
       const { direction } = committedValuesRef.current;
       const { layout } = eagerValuesRef.current;
 
-      const handleElement = getResizeHandleElement(dragHandleId)!;
+      const handleElement = getResizeHandleElement(dragHandleId);
+      assert(handleElement);
 
       const initialCursorPosition = getResizeEventCursorPosition(
         direction,
@@ -900,10 +731,10 @@ function PanelGroupWithForwardedRef({
     timeout: null,
   });
   const unregisterPanel = useCallback((panelData: PanelData) => {
-    const { id: groupId, onLayout } = committedValuesRef.current;
+    const { onLayout } = committedValuesRef.current;
     const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
-    const index = panelDataArray.indexOf(panelData);
+    const index = findPanelDataIndex(panelDataArray, panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
       unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
@@ -918,7 +749,8 @@ function PanelGroupWithForwardedRef({
     // We can't check the DOM to detect this because Panel elements have not yet been removed.
     unregisterPanelRef.current.timeout = setTimeout(() => {
       const { pendingPanelIds } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedMixedSizesMapRef.current;
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -926,18 +758,18 @@ function PanelGroupWithForwardedRef({
       pendingPanelIds.forEach((panelId) => {
         pendingPanelIds.delete(panelId);
 
-        if (panelDataArray.find(({ id }) => id === panelId) == null) {
+        if (panelDataArray.find(({ id }) => id === panelId) != null) {
           unmountDueToStrictMode = true;
-
+        } else {
           // TRICKY
           // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
           // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
           // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-          delete map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
 
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
 
@@ -946,17 +778,13 @@ function PanelGroupWithForwardedRef({
         return;
       }
 
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-
       let unsafeLayout: number[] = 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
@@ -969,22 +797,13 @@ function PanelGroupWithForwardedRef({
         eagerValuesRef.current.layout = nextLayout;
 
         if (onLayout) {
-          onLayout(
-            nextLayout.map((sizePercentage) => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(
-                sizePercentage,
-                groupSizePixels
-              ),
-            }))
-          );
+          onLayout(nextLayout);
         }
 
         callPanelCallbacks(
-          groupId,
           panelDataArray,
           nextLayout,
-          panelIdToLastNotifiedMixedSizesMapRef.current
+          panelIdToLastNotifiedSizeMapRef.current
         );
       }
     }, 0);
@@ -1039,6 +858,8 @@ function PanelGroupWithForwardedRef({
     PanelGroupContext.Provider,
     { value: context },
     createElement(Type, {
+      ...rest,
+
       children,
       className: classNameFromProps,
       style: {
@@ -1046,8 +867,6 @@ function PanelGroupWithForwardedRef({
         ...styleFromProps,
       },
 
-      ...dataAttributes,
-
       // CSS selectors
       "data-panel-group": "",
       "data-panel-group-direction": direction,
@@ -1066,8 +885,14 @@ export const PanelGroup = forwardRef<
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
 
+function findPanelDataIndex(panelDataArray: PanelData[], panelData: PanelData) {
+  return panelDataArray.findIndex(
+    (prevPanelData) =>
+      prevPanelData === panelData || prevPanelData.id === panelData.id
+  );
+}
+
 function panelDataHelper(
-  groupId: string,
   panelDataArray: PanelData[],
   panelData: PanelData,
   layout: number[]
@@ -1076,34 +901,19 @@ function panelDataHelper(
     (panelData) => panelData.constraints
   );
 
-  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelIndex = findPanelDataIndex(panelDataArray, 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,
   };
 }