react-resizable-panels 0.0.55 → 0.0.56

package/src/PanelGroup.ts

@@ -1,12 +1,40 @@
-import { isBrowser } from "#is-browser";
 import { isDevelopment } from "#is-development";
+import { PanelData } from "./Panel";
+import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
+import useUniqueId from "./hooks/useUniqueId";
+import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
+import { Direction, MixedSizes } from "./types";
+import { adjustLayoutByDelta } from "./utils/adjustLayoutByDelta";
+import { areEqual } from "./utils/arrays";
+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 { 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 {
-  createElement,
   CSSProperties,
   ElementType,
   ForwardedRef,
+  PropsWithChildren,
+  createElement,
   forwardRef,
-  ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -15,76 +43,20 @@ import {
   useState,
 } from "./vendor/react";
 
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
-import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
-import { PanelGroupContext } from "./PanelContexts";
-import {
-  Direction,
-  PanelData,
-  PanelGroupOnLayout,
-  PanelGroupStorage,
-  ResizeEvent,
-  Units,
-} from "./types";
-import { areEqual } from "./utils/arrays";
-import {
-  getDragOffset,
-  getMovement,
-  isMouseEvent,
-  isTouchEvent,
-} from "./utils/coordinates";
-import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
-import debounce from "./utils/debounce";
-import {
-  adjustByDelta,
-  calculateDefaultLayout,
-  callPanelCallbacks,
-  getAvailableGroupSizePixels,
-  getBeforeAndAfterIds,
-  getFlexGrow,
-  getPanelGroup,
-  getResizeHandle,
-  getResizeHandlePanelIds,
-  panelsMapToSortedArray,
-  validatePanelGroupLayout,
-  validatePanelProps,
-} from "./utils/group";
-import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
 
-const debounceMap: {
-  [key: string]: (
-    autoSaveId: string,
-    panels: PanelData[],
-    sizes: number[],
-    storage: PanelGroupStorage
-  ) => void;
-} = {};
+export type ImperativePanelGroupHandle = {
+  getId: () => string;
+  getLayout: () => MixedSizes[];
+  setLayout: (layout: Partial<MixedSizes>[]) => void;
+};
 
-// PanelGroup might be rendering in a server-side environment where localStorage is not available
-// or on a browser with cookies/storage disabled.
-// In either case, this function avoids accessing localStorage until needed,
-// and avoids throwing user-visible errors.
-function initializeDefaultStorage(storageObject: PanelGroupStorage) {
-  try {
-    if (typeof localStorage !== "undefined") {
-      // Bypass this check for future calls
-      storageObject.getItem = (name: string) => {
-        return localStorage.getItem(name);
-      };
-      storageObject.setItem = (name: string, value: string) => {
-        localStorage.setItem(name, value);
-      };
-    } else {
-      throw new Error("localStorage not supported in this environment");
-    }
-  } catch (error) {
-    console.error(error);
+export type PanelGroupStorage = {
+  getItem(name: string): string | null;
+  setItem(name: string, value: string): void;
+};
 
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
-  }
-}
+export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
 
 const defaultStorage: PanelGroupStorage = {
   getItem: (name: string) => {
@@ -97,271 +69,315 @@ const defaultStorage: PanelGroupStorage = {
   },
 };
 
-export type CommittedValues = {
-  direction: Direction;
-  id: string;
-  panels: Map<string, PanelData>;
-  sizes: number[];
-  units: Units;
-};
-
-export type PanelDataMap = Map<string, PanelData>;
-
-// Initial drag state serves a few purposes:
-// * dragOffset:
-//   Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
-//   This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
-// * dragHandleRect, sizes:
-//   When resizing is done via mouse/touch event– some initial state is stored
-//   so that any panels that contract will also expand if drag direction is reversed.
-export type InitialDragState = {
-  dragHandleRect: DOMRect;
-  dragOffset: number;
-  sizes: number[];
-};
-
-export type PanelGroupProps = {
+export type PanelGroupProps = PropsWithChildren<{
   autoSaveId?: string;
-  children?: ReactNode;
   className?: string;
   direction: Direction;
-  disablePointerEventsDuringResize?: boolean;
   id?: string | null;
-  onLayout?: PanelGroupOnLayout;
+  keyboardResizeByPercentage?: number | null;
+  keyboardResizeByPixels?: number | null;
+  onLayout?: PanelGroupOnLayout | null;
   storage?: PanelGroupStorage;
   style?: CSSProperties;
   tagName?: ElementType;
-  units?: Units;
-};
+}>;
 
-export type ImperativePanelGroupHandle = {
-  getId: () => string;
-  getLayout: (units?: Units) => number[];
-  setLayout: (panelSizes: number[], units?: Units) => void;
-};
+const debounceMap: {
+  [key: string]: typeof savePanelGroupLayout;
+} = {};
 
 function PanelGroupWithForwardedRef({
   autoSaveId,
-  children = null,
+  children,
   className: classNameFromProps = "",
   direction,
-  disablePointerEventsDuringResize = false,
   forwardedRef,
-  id: idFromProps = null,
-  onLayout,
+  id: idFromProps,
+  onLayout = null,
+  keyboardResizeByPercentage = null,
+  keyboardResizeByPixels = null,
   storage = defaultStorage,
-  style: styleFromProps = {},
+  style: styleFromProps,
   tagName: Type = "div",
-  units = "percentages",
 }: PanelGroupProps & {
   forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
 }) {
   const groupId = useUniqueId(idFromProps);
 
-  const [activeHandleId, setActiveHandleId] = useState<string | null>(null);
-  const [panels, setPanels] = useState<PanelDataMap>(new Map());
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [layout, setLayout] = useState<number[]>([]);
+  const [panelDataArray, setPanelDataArray] = useState<PanelData[]>([]);
+
+  const panelIdToLastNotifiedMixedSizesMapRef = useRef<
+    Record<string, MixedSizes>
+  >({});
+  const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
+  const prevDeltaRef = useRef<number>(0);
 
-  // When resizing is done via mouse/touch event–
-  // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
-  // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
-  const initialDragStateRef = useRef<InitialDragState | null>(null);
+  const committedValuesRef = useRef<{
+    direction: Direction;
+    dragState: DragState | null;
+    id: string;
+    keyboardResizeByPercentage: number | null;
+    keyboardResizeByPixels: number | null;
+    layout: number[];
+    onLayout: PanelGroupOnLayout | null;
+    panelDataArray: PanelData[];
+  }>({
+    direction,
+    dragState,
+    id: groupId,
+    keyboardResizeByPercentage,
+    keyboardResizeByPixels,
+    layout,
+    onLayout,
+    panelDataArray,
+  });
 
   const devWarningsRef = useRef<{
-    didLogDefaultSizeWarning: boolean;
     didLogIdAndOrderWarning: boolean;
-    didLogInvalidLayoutWarning: boolean;
+    didLogPanelConstraintsWarning: boolean;
     prevPanelIds: string[];
   }>({
-    didLogDefaultSizeWarning: false,
     didLogIdAndOrderWarning: false,
-    didLogInvalidLayoutWarning: false,
+    didLogPanelConstraintsWarning: false,
     prevPanelIds: [],
   });
 
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef<{
-    onLayout: PanelGroupOnLayout | undefined;
-  }>({ onLayout });
-  useEffect(() => {
-    callbacksRef.current.onLayout = onLayout;
-  });
-
-  const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
-
-  // 0-1 values representing the relative size of each panel.
-  const [sizes, setSizes] = useState<number[]>([]);
-
-  // Used to support imperative collapse/expand API.
-  const panelSizeBeforeCollapse = useRef<Map<string, number>>(new Map());
-
-  const prevDeltaRef = useRef<number>(0);
-
-  // Store committed values to avoid unnecessarily re-running memoization/effects functions.
-  const committedValuesRef = useRef<CommittedValues>({
-    direction,
-    id: groupId,
-    panels,
-    sizes,
-    units,
-  });
-
   useImperativeHandle(
     forwardedRef,
     () => ({
-      getId: () => groupId,
-      getLayout: (unitsFromParams?: Units) => {
-        const { sizes, units: unitsFromProps } = committedValuesRef.current;
-
-        const units = unitsFromParams ?? unitsFromProps;
-        if (units === "pixels") {
-          const groupSizePixels = getAvailableGroupSizePixels(groupId);
-          return sizes.map((size) => (size / 100) * groupSizePixels);
-        } else {
-          return sizes;
-        }
+      getId: () => committedValuesRef.current.id,
+      getLayout: () => {
+        const { id: groupId, layout } = committedValuesRef.current;
+
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+
+        return layout.map((sizePercentage) => {
+          return {
+            sizePercentage,
+            sizePixels: convertPercentageToPixels(
+              sizePercentage,
+              groupSizePixels
+            ),
+          };
+        });
       },
-      setLayout: (sizes: number[], unitsFromParams?: Units) => {
+      setLayout: (mixedSizes: Partial<MixedSizes>[]) => {
         const {
           id: groupId,
-          panels,
-          sizes: prevSizes,
-          units,
+          layout: prevLayout,
+          onLayout,
+          panelDataArray,
         } = committedValuesRef.current;
 
-        if ((unitsFromParams || units) === "pixels") {
-          const groupSizePixels = getAvailableGroupSizePixels(groupId);
-          sizes = sizes.map((size) => (size / groupSizePixels) * 100);
-        }
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
-        const panelIdToLastNotifiedSizeMap =
-          panelIdToLastNotifiedSizeMapRef.current;
-        const panelsArray = panelsMapToSortedArray(panels);
+        const unsafeLayout = mixedSizes.map(
+          (mixedSize) =>
+            getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels)!
+        );
 
-        const nextSizes = validatePanelGroupLayout({
-          groupId,
-          panels,
-          nextSizes: sizes,
-          prevSizes,
-          units,
+        const safeLayout = validatePanelGroupLayout({
+          groupSizePixels,
+          layout: unsafeLayout,
+          panelConstraints: panelDataArray.map(
+            (panelData) => panelData.constraints
+          ),
         });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
+
+        if (!areEqual(prevLayout, safeLayout)) {
+          setLayout(safeLayout);
+
+          if (onLayout) {
+            onLayout(
+              safeLayout.map((sizePercentage) => ({
+                sizePercentage,
+                sizePixels: convertPercentageToPixels(
+                  sizePercentage,
+                  groupSizePixels
+                ),
+              }))
+            );
+          }
 
           callPanelCallbacks(
-            panelsArray,
-            nextSizes,
-            panelIdToLastNotifiedSizeMap
+            groupId,
+            panelDataArray,
+            safeLayout,
+            panelIdToLastNotifiedMixedSizesMapRef.current
           );
         }
       },
     }),
-    [groupId]
+    []
   );
 
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
+    committedValuesRef.current.dragState = dragState;
     committedValuesRef.current.id = groupId;
-    committedValuesRef.current.panels = panels;
-    committedValuesRef.current.sizes = sizes;
-    committedValuesRef.current.units = units;
+    committedValuesRef.current.layout = layout;
+    committedValuesRef.current.onLayout = onLayout;
+    committedValuesRef.current.panelDataArray = panelDataArray;
   });
 
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
     groupId,
-    panels,
-    setSizes,
-    sizes,
-    panelSizeBeforeCollapse,
+    layout,
+    panelDataArray,
+    setLayout,
   });
 
-  // Notify external code when sizes have changed.
   useEffect(() => {
-    const { onLayout } = callbacksRef.current!;
-    const { panels, sizes } = committedValuesRef.current;
-
-    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
-    if (sizes.length > 0) {
-      if (onLayout) {
-        onLayout(sizes);
+    // If this panel has been configured to persist sizing information, save sizes to local storage.
+    if (autoSaveId) {
+      if (layout.length === 0 || layout.length !== panelDataArray.length) {
+        return;
       }
 
-      const panelIdToLastNotifiedSizeMap =
-        panelIdToLastNotifiedSizeMapRef.current;
-
-      // When possible, we notify before the next render so that rendering work can be batched together.
-      // Some cases are difficult to detect though,
-      // for example– panels that are conditionally rendered can affect the size of neighboring panels.
-      // In this case, the best we can do is notify on commit.
-      // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      // Limit the frequency of localStorage updates.
+      if (!debounceMap[autoSaveId]) {
+        debounceMap[autoSaveId] = debounce(
+          savePanelGroupLayout,
+          LOCAL_STORAGE_DEBOUNCE_INTERVAL
+        );
+      }
+      debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
     }
-  }, [sizes]);
+  }, [autoSaveId, layout, panelDataArray, storage]);
 
   // Once all panels have registered themselves,
   // Compute the initial sizes based on default weights.
   // This assumes that panels register during initial mount (no conditional rendering)!
   useIsomorphicLayoutEffect(() => {
-    const { id: groupId, sizes, units } = committedValuesRef.current;
-    if (sizes.length === panels.size) {
-      // Only compute (or restore) default sizes once per panel configuration.
+    const { id: groupId, layout, onLayout } = committedValuesRef.current;
+    if (layout.length === panelDataArray.length) {
+      // Only compute (or restore) default layout once per panel configuration.
       return;
     }
 
     // If this panel has been configured to persist sizing information,
     // default size should be restored from local storage if possible.
-    let defaultSizes: number[] | null = null;
+    let unsafeLayout: number[] | null = null;
     if (autoSaveId) {
-      const panelsArray = panelsMapToSortedArray(panels);
-      defaultSizes = loadPanelLayout(autoSaveId, panelsArray, storage);
+      unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
     }
 
-    if (defaultSizes != null) {
-      // Validate saved sizes in case something has changed since last render
-      // e.g. for pixel groups, this could be the size of the window
-      const validatedSizes = validatePanelGroupLayout({
-        groupId,
-        panels,
-        nextSizes: defaultSizes,
-        prevSizes: defaultSizes,
-        units,
-      });
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
-      setSizes(validatedSizes);
-    } else {
-      const sizes = calculateDefaultLayout({
-        groupId,
-        panels,
-        units,
+    if (unsafeLayout == null) {
+      unsafeLayout = calculateUnsafeDefaultLayout({
+        groupSizePixels,
+        panelDataArray,
       });
+    }
 
-      setSizes(sizes);
+    // Validate even saved layouts in case something has changed since last render
+    // e.g. for pixel groups, this could be the size of the window
+    const validatedLayout = validatePanelGroupLayout({
+      groupSizePixels,
+      layout: unsafeLayout,
+      panelConstraints: panelDataArray.map(
+        (panelData) => panelData.constraints
+      ),
+    });
+
+    if (!areEqual(layout, validatedLayout)) {
+      setLayout(validatedLayout);
     }
-  }, [autoSaveId, panels, storage]);
 
-  useEffect(() => {
-    // If this panel has been configured to persist sizing information, save sizes to local storage.
-    if (autoSaveId) {
-      if (sizes.length === 0 || sizes.length !== panels.size) {
-        return;
-      }
+    if (onLayout) {
+      onLayout(
+        validatedLayout.map((sizePercentage) => ({
+          sizePercentage,
+          sizePixels: convertPercentageToPixels(
+            sizePercentage,
+            groupSizePixels
+          ),
+        }))
+      );
+    }
 
-      const panelsArray = panelsMapToSortedArray(panels);
+    callPanelCallbacks(
+      groupId,
+      panelDataArray,
+      validatedLayout,
+      panelIdToLastNotifiedMixedSizesMapRef.current
+    );
+  }, [autoSaveId, layout, panelDataArray, storage]);
 
-      // Limit the frequency of localStorage updates.
-      if (!debounceMap[autoSaveId]) {
-        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, 100);
-      }
-      debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
+  useIsomorphicLayoutEffect(() => {
+    const constraints = panelDataArray.map(({ constraints }) => constraints);
+    if (!shouldMonitorPixelBasedConstraints(constraints)) {
+      // Avoid the overhead of ResizeObserver if no pixel constraints require monitoring
+      return;
     }
 
+    if (typeof ResizeObserver === "undefined") {
+      console.warn(
+        `WARNING: Pixel based constraints require ResizeObserver but it is not supported by the current browser.`
+      );
+    } else {
+      const resizeObserver = new ResizeObserver(() => {
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+
+        const { layout: prevLayout, onLayout } = committedValuesRef.current;
+
+        const nextLayout = validatePanelGroupLayout({
+          groupSizePixels,
+          layout: prevLayout,
+          panelConstraints: panelDataArray.map(
+            (panelData) => panelData.constraints
+          ),
+        });
+
+        if (!areEqual(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+
+          if (onLayout) {
+            onLayout(
+              nextLayout.map((sizePercentage) => ({
+                sizePercentage,
+                sizePixels: convertPercentageToPixels(
+                  sizePercentage,
+                  groupSizePixels
+                ),
+              }))
+            );
+          }
+
+          callPanelCallbacks(
+            groupId,
+            panelDataArray,
+            nextLayout,
+            panelIdToLastNotifiedMixedSizesMapRef.current
+          );
+        }
+      });
+
+      resizeObserver.observe(getPanelGroupElement(groupId)!);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [groupId, panelDataArray]);
+
+  // DEV warnings
+  useEffect(() => {
     if (isDevelopment) {
-      const { didLogIdAndOrderWarning, prevPanelIds } = devWarningsRef.current;
+      const {
+        didLogIdAndOrderWarning,
+        didLogPanelConstraintsWarning,
+        prevPanelIds,
+      } = devWarningsRef.current;
+
       if (!didLogIdAndOrderWarning) {
-        const { panels } = committedValuesRef.current;
+        const { panelDataArray } = committedValuesRef.current;
 
-        const panelIds = Array.from(panels.keys());
+        const panelIds = panelDataArray.map(({ id }) => id);
 
         devWarningsRef.current.prevPanelIds = panelIds;
 
@@ -369,9 +385,8 @@ function PanelGroupWithForwardedRef({
           prevPanelIds.length > 0 && !areEqual(prevPanelIds, panelIds);
         if (panelsHaveChanged) {
           if (
-            Array.from(panels.values()).find(
-              (panel) =>
-                panel.current.idWasAutoGenerated || panel.current.order == null
+            panelDataArray.find(
+              ({ idIsFromProps, order }) => !idIsFromProps || order == null
             )
           ) {
             devWarningsRef.current.didLogIdAndOrderWarning = true;
@@ -382,512 +397,509 @@ function PanelGroupWithForwardedRef({
           }
         }
       }
-    }
-  }, [autoSaveId, panels, sizes, storage]);
 
-  useIsomorphicLayoutEffect(() => {
-    // Pixel panel constraints need to be reassessed after a group resize
-    // We can avoid the ResizeObserver overhead for relative layouts
-    if (units === "pixels") {
-      const resizeObserver = new ResizeObserver(() => {
-        const { panels, sizes: prevSizes } = committedValuesRef.current;
+      if (!didLogPanelConstraintsWarning) {
+        const panelConstraints = panelDataArray.map(
+          (panelData) => panelData.constraints
+        );
 
-        const nextSizes = validatePanelGroupLayout({
-          groupId,
-          panels,
-          nextSizes: prevSizes,
-          prevSizes,
-          units,
-        });
-        if (!areEqual(prevSizes, nextSizes)) {
-          setSizes(nextSizes);
-        }
-      });
+        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
-      resizeObserver.observe(getPanelGroup(groupId)!);
+        for (
+          let panelIndex = 0;
+          panelIndex < panelConstraints.length;
+          panelIndex++
+        ) {
+          const isValid = validatePanelConstraints({
+            groupSizePixels,
+            panelConstraints,
+            panelId: panelDataArray[panelIndex].id,
+            panelIndex,
+          });
 
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [groupId, units]);
+          if (!isValid) {
+            devWarningsRef.current.didLogPanelConstraintsWarning = true;
 
-  const getPanelSize = useCallback(
-    (id: string, unitsFromParams?: Units) => {
-      const { panels, units: unitsFromProps } = committedValuesRef.current;
+            break;
+          }
+        }
+      }
+    }
+  });
 
-      const panelsArray = panelsMapToSortedArray(panels);
+  // External APIs are safe to memoize via committed values ref
+  const collapsePanel = useCallback(
+    (panelData: PanelData) => {
+      const {
+        layout: prevLayout,
+        onLayout,
+        panelDataArray,
+      } = committedValuesRef.current;
 
-      const index = panelsArray.findIndex((panel) => panel.current.id === id);
-      const size = sizes[index];
+      if (panelData.constraints.collapsible) {
+        const panelConstraintsArray = panelDataArray.map(
+          (panelData) => panelData.constraints
+        );
 
-      const units = unitsFromParams ?? unitsFromProps;
-      if (units === "pixels") {
-        const groupSizePixels = getAvailableGroupSizePixels(groupId);
-        return (size / 100) * groupSizePixels;
-      } else {
-        return size;
-      }
-    },
-    [groupId, sizes]
-  );
+        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 getPanelStyle = useCallback(
-    (id: string, defaultSize: number | null): CSSProperties => {
-      const { panels } = committedValuesRef.current;
-
-      // Before mounting, Panels will not yet have registered themselves.
-      // This includes server rendering.
-      // At this point the best we can do is render everything with the same size.
-      if (panels.size === 0) {
-        if (isDevelopment) {
-          if (!devWarningsRef.current.didLogDefaultSizeWarning) {
-            if (!isBrowser && defaultSize == null) {
-              devWarningsRef.current.didLogDefaultSizeWarning = true;
-              console.warn(
-                `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
+          const isLastPanel =
+            panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+          const delta = isLastPanel
+            ? panelSizePercentage - collapsedSizePercentage
+            : collapsedSizePercentage - panelSizePercentage;
+
+          const nextLayout = adjustLayoutByDelta({
+            delta,
+            groupSizePixels,
+            layout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices,
+            trigger: "imperative-api",
+          });
+
+          if (!compareLayouts(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
+
+            if (onLayout) {
+              onLayout(
+                nextLayout.map((sizePercentage) => ({
+                  sizePercentage,
+                  sizePixels: convertPercentageToPixels(
+                    sizePercentage,
+                    groupSizePixels
+                  ),
+                }))
               );
             }
+
+            callPanelCallbacks(
+              groupId,
+              panelDataArray,
+              nextLayout,
+              panelIdToLastNotifiedMixedSizesMapRef.current
+            );
           }
         }
-
-        return {
-          flexBasis: 0,
-          flexGrow: defaultSize != null ? defaultSize : undefined,
-          flexShrink: 1,
-
-          // Without this, Panel sizes may be unintentionally overridden by their content.
-          overflow: "hidden",
-        };
       }
-
-      const flexGrow = getFlexGrow(panels, id, sizes);
-
-      return {
-        flexBasis: 0,
-        flexGrow,
-        flexShrink: 1,
-
-        // Without this, Panel sizes may be unintentionally overridden by their content.
-        overflow: "hidden",
-
-        // Disable pointer events inside of a panel during resize.
-        // This avoid edge cases like nested iframes.
-        pointerEvents:
-          disablePointerEventsDuringResize && activeHandleId !== null
-            ? "none"
-            : undefined,
-      };
     },
-    [activeHandleId, disablePointerEventsDuringResize, sizes]
+    [groupId]
   );
 
-  const registerPanel = useCallback((id: string, panelRef: PanelData) => {
-    const { units } = committedValuesRef.current;
-
-    validatePanelProps(units, panelRef);
-
-    setPanels((prevPanels) => {
-      if (prevPanels.has(id)) {
-        return prevPanels;
-      }
-
-      const nextPanels = new Map(prevPanels);
-      nextPanels.set(id, panelRef);
-
-      return nextPanels;
-    });
-  }, []);
-
-  const registerResizeHandle = useCallback(
-    (handleId: string) => {
-      const resizeHandler = (event: ResizeEvent) => {
-        event.preventDefault();
-
-        const {
-          direction,
-          panels,
-          sizes: prevSizes,
-        } = committedValuesRef.current;
-
-        const panelsArray = panelsMapToSortedArray(panels);
-
-        const [idBefore, idAfter] = getResizeHandlePanelIds(
-          groupId,
-          handleId,
-          panelsArray
-        );
-        if (idBefore == null || idAfter == null) {
-          return;
-        }
-
-        let movement = getMovement(
-          event,
-          groupId,
-          handleId,
-          panelsArray,
-          direction,
-          prevSizes,
-          initialDragStateRef.current
-        );
-        if (movement === 0) {
-          return;
-        }
-
-        const groupElement = getPanelGroup(groupId)!;
-        const rect = groupElement.getBoundingClientRect();
-        const isHorizontal = direction === "horizontal";
-
-        // Support RTL layouts
-        if (document.dir === "rtl" && isHorizontal) {
-          movement = -movement;
-        }
+  // External APIs are safe to memoize via committed values ref
+  const expandPanel = useCallback(
+    (panelData: PanelData) => {
+      const {
+        layout: prevLayout,
+        onLayout,
+        panelDataArray,
+      } = committedValuesRef.current;
 
-        const size = isHorizontal ? rect.width : rect.height;
-        const delta = (movement / size) * 100;
-
-        // If a validateLayout method has been provided
-        // it's important to use it before updating the mouse cursor
-        const nextSizes = adjustByDelta(
-          event,
-          committedValuesRef.current,
-          idBefore,
-          idAfter,
-          delta,
-          prevSizes,
-          panelSizeBeforeCollapse.current,
-          initialDragStateRef.current
+      if (panelData.constraints.collapsible) {
+        const panelConstraintsArray = panelDataArray.map(
+          (panelData) => panelData.constraints
         );
 
-        const sizesChanged = !areEqual(prevSizes, nextSizes);
-
-        // Don't update cursor for resizes triggered by keyboard interactions.
-        if (isMouseEvent(event) || isTouchEvent(event)) {
-          // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
-          // In this case, Panel sizes might not change–
-          // but updating cursor in this scenario would cause a flicker.
-          if (prevDeltaRef.current != delta) {
-            if (!sizesChanged) {
-              // If the pointer has moved too far to resize the panel any further,
-              // update the cursor style for a visual clue.
-              // This mimics VS Code behavior.
-
-              if (isHorizontal) {
-                setGlobalCursorStyle(
-                  movement < 0 ? "horizontal-min" : "horizontal-max"
-                );
-              } else {
-                setGlobalCursorStyle(
-                  movement < 0 ? "vertical-min" : "vertical-max"
-                );
-              }
-            } else {
-              // Reset the cursor style to the the normal resize cursor.
-              setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
+        const {
+          collapsedSizePercentage,
+          panelSizePercentage,
+          minSizePercentage,
+          pivotIndices,
+          groupSizePixels,
+        } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+
+        if (panelSizePercentage === collapsedSizePercentage) {
+          // Restore this panel to the size it was before it was collapsed, if possible.
+          const prevPanelSizePercentage =
+            panelSizeBeforeCollapseRef.current.get(panelData.id);
+
+          const baseSizePercentage =
+            prevPanelSizePercentage != null
+              ? prevPanelSizePercentage
+              : minSizePercentage;
+
+          const isLastPanel =
+            panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+          const delta = isLastPanel
+            ? panelSizePercentage - baseSizePercentage
+            : baseSizePercentage - panelSizePercentage;
+
+          const nextLayout = adjustLayoutByDelta({
+            delta,
+            groupSizePixels,
+            layout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices,
+            trigger: "imperative-api",
+          });
+
+          if (!compareLayouts(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
+
+            if (onLayout) {
+              onLayout(
+                nextLayout.map((sizePercentage) => ({
+                  sizePercentage,
+                  sizePixels: convertPercentageToPixels(
+                    sizePercentage,
+                    groupSizePixels
+                  ),
+                }))
+              );
             }
+
+            callPanelCallbacks(
+              groupId,
+              panelDataArray,
+              nextLayout,
+              panelIdToLastNotifiedMixedSizesMapRef.current
+            );
           }
         }
+      }
+    },
+    [groupId]
+  );
 
-        if (sizesChanged) {
-          const panelIdToLastNotifiedSizeMap =
-            panelIdToLastNotifiedSizeMapRef.current;
-
-          // It's okay to bypass in this case because we already validated above
-          setSizes(nextSizes);
+  // External APIs are safe to memoize via committed values ref
+  const getPanelSize = useCallback(
+    (panelData: PanelData) => {
+      const { layout, panelDataArray } = committedValuesRef.current;
 
-          // If resize change handlers have been declared, this is the time to call them.
-          // Trigger user callbacks after updating state, so that user code can override the sizes.
-          callPanelCallbacks(
-            panelsArray,
-            nextSizes,
-            panelIdToLastNotifiedSizeMap
-          );
-        }
+      const { panelSizePercentage, panelSizePixels } = panelDataHelper(
+        groupId,
+        panelDataArray,
+        panelData,
+        layout
+      );
 
-        prevDeltaRef.current = delta;
+      return {
+        sizePercentage: panelSizePercentage,
+        sizePixels: panelSizePixels,
       };
-
-      return resizeHandler;
     },
     [groupId]
   );
 
-  const unregisterPanel = useCallback((id: string) => {
-    setPanels((prevPanels) => {
-      if (!prevPanels.has(id)) {
-        return prevPanels;
-      }
-
-      const nextPanels = new Map(prevPanels);
-      nextPanels.delete(id);
-
-      return nextPanels;
-    });
-  }, []);
-
-  const collapsePanel = useCallback((id: string) => {
-    const { panels, sizes: prevSizes } = committedValuesRef.current;
-
-    const panel = panels.get(id);
-    if (panel == null) {
-      return;
-    }
-
-    const { collapsedSize, collapsible } = panel.current;
-    if (!collapsible) {
-      return;
-    }
-
-    const panelsArray = panelsMapToSortedArray(panels);
+  // This API should never read from committedValuesRef
+  const getPanelStyle = useCallback(
+    (panelData: PanelData) => {
+      const panelIndex = panelDataArray.indexOf(panelData);
+
+      return computePanelFlexBoxStyle({
+        dragState,
+        layout,
+        panelData: panelDataArray,
+        panelIndex,
+      });
+    },
+    [dragState, layout, panelDataArray]
+  );
 
-    const index = panelsArray.indexOf(panel);
-    if (index < 0) {
-      return;
-    }
+  // External APIs are safe to memoize via committed values ref
+  const isPanelCollapsed = useCallback(
+    (panelData: PanelData) => {
+      const { layout, panelDataArray } = committedValuesRef.current;
 
-    const currentSize = prevSizes[index];
-    if (currentSize === collapsedSize) {
-      // Panel is already collapsed.
-      return;
-    }
+      const { collapsedSizePercentage, collapsible, panelSizePercentage } =
+        panelDataHelper(groupId, panelDataArray, panelData, layout);
 
-    panelSizeBeforeCollapse.current.set(id, currentSize);
+      return (
+        collapsible === true && panelSizePercentage === collapsedSizePercentage
+      );
+    },
+    [groupId]
+  );
 
-    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-    if (idBefore == null || idAfter == null) {
-      return;
-    }
+  // External APIs are safe to memoize via committed values ref
+  const isPanelExpanded = useCallback(
+    (panelData: PanelData) => {
+      const { layout, panelDataArray } = committedValuesRef.current;
 
-    const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
-
-    const nextSizes = adjustByDelta(
-      null,
-      committedValuesRef.current,
-      idBefore,
-      idAfter,
-      delta,
-      prevSizes,
-      panelSizeBeforeCollapse.current,
-      null
-    );
-    if (prevSizes !== nextSizes) {
-      const panelIdToLastNotifiedSizeMap =
-        panelIdToLastNotifiedSizeMapRef.current;
+      const { collapsedSizePercentage, collapsible, panelSizePercentage } =
+        panelDataHelper(groupId, panelDataArray, panelData, layout);
 
-      setSizes(nextSizes);
+      return !collapsible || panelSizePercentage > collapsedSizePercentage;
+    },
+    [groupId]
+  );
 
-      // If resize change handlers have been declared, this is the time to call them.
-      // Trigger user callbacks after updating state, so that user code can override the sizes.
-      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-    }
+  const registerPanel = useCallback((panelData: PanelData) => {
+    setPanelDataArray((prevPanelDataArray) => {
+      const nextPanelDataArray = [...prevPanelDataArray, panelData];
+      return nextPanelDataArray.sort((panelA, panelB) => {
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null) {
+          return 0;
+        } else if (orderA == null) {
+          return -1;
+        } else if (orderB == null) {
+          return 1;
+        } else {
+          return orderA - orderB;
+        }
+      });
+    });
   }, []);
 
-  const expandPanel = useCallback((id: string) => {
-    const { panels, sizes: prevSizes } = committedValuesRef.current;
-
-    const panel = panels.get(id);
-    if (panel == null) {
-      return;
-    }
-
-    const { collapsedSize, minSize } = panel.current;
-
-    const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || minSize;
-    if (!sizeBeforeCollapse) {
-      return;
-    }
-
-    const panelsArray = panelsMapToSortedArray(panels);
-
-    const index = panelsArray.indexOf(panel);
-    if (index < 0) {
-      return;
-    }
-
-    const currentSize = prevSizes[index];
-    if (currentSize !== collapsedSize) {
-      // Panel is already expanded.
-      return;
-    }
-
-    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-    if (idBefore == null || idAfter == null) {
-      return;
-    }
-
-    const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel
-      ? collapsedSize - sizeBeforeCollapse
-      : sizeBeforeCollapse;
-
-    const nextSizes = adjustByDelta(
-      null,
-      committedValuesRef.current,
-      idBefore,
-      idAfter,
-      delta,
-      prevSizes,
-      panelSizeBeforeCollapse.current,
-      null
-    );
-    if (prevSizes !== nextSizes) {
-      const panelIdToLastNotifiedSizeMap =
-        panelIdToLastNotifiedSizeMapRef.current;
-
-      setSizes(nextSizes);
+  const registerResizeHandle = useCallback((dragHandleId: string) => {
+    return function resizeHandler(event: ResizeEvent) {
+      event.preventDefault();
 
-      // If resize change handlers have been declared, this is the time to call them.
-      // Trigger user callbacks after updating state, so that user code can override the sizes.
-      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-    }
-  }, []);
-
-  const resizePanel = useCallback(
-    (id: string, nextSize: number, unitsFromParams?: Units) => {
       const {
+        direction,
+        dragState,
         id: groupId,
-        panels,
-        sizes: prevSizes,
-        units,
+        keyboardResizeByPercentage,
+        keyboardResizeByPixels,
+        onLayout,
+        panelDataArray,
+        layout: prevLayout,
       } = committedValuesRef.current;
 
-      if ((unitsFromParams || units) === "pixels") {
-        const groupSizePixels = getAvailableGroupSizePixels(groupId);
-        nextSize = (nextSize / groupSizePixels) * 100;
-      }
+      const { initialLayout } = dragState ?? {};
 
-      const panel = panels.get(id);
-      if (panel == null) {
-        return;
-      }
-
-      let { collapsedSize, collapsible, maxSize, minSize } = panel.current;
+      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
 
-      if (units === "pixels") {
-        const groupSizePixels = getAvailableGroupSizePixels(groupId);
-        minSize = (minSize / groupSizePixels) * 100;
-        if (maxSize != null) {
-          maxSize = (maxSize / groupSizePixels) * 100;
+      let delta = calculateDeltaPercentage(
+        event,
+        groupId,
+        dragHandleId,
+        direction,
+        dragState!,
+        {
+          percentage: keyboardResizeByPercentage,
+          pixels: keyboardResizeByPixels,
         }
-      }
-
-      const panelsArray = panelsMapToSortedArray(panels);
-
-      const index = panelsArray.indexOf(panel);
-      if (index < 0) {
+      );
+      if (delta === 0) {
         return;
       }
 
-      const currentSize = prevSizes[index];
-      if (currentSize === nextSize) {
-        return;
+      // Support RTL layouts
+      const isHorizontal = direction === "horizontal";
+      if (document.dir === "rtl" && isHorizontal) {
+        delta = -delta;
       }
 
-      if (collapsible && nextSize === collapsedSize) {
-        // This is a valid resize state.
-      } else {
-        const unsafeNextSize = nextSize;
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+      const panelConstraints = panelDataArray.map(
+        (panelData) => panelData.constraints
+      );
 
-        nextSize = Math.min(
-          maxSize != null ? maxSize : 100,
-          Math.max(minSize, nextSize)
-        );
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        groupSizePixels,
+        layout: initialLayout ?? prevLayout,
+        panelConstraints,
+        pivotIndices,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch",
+      });
 
-        if (isDevelopment) {
-          if (unsafeNextSize !== nextSize) {
-            console.error(
-              `Invalid size (${unsafeNextSize}) specified for Panel "${panel.current.id}" given the panel's min/max size constraints`
-            );
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+
+      // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+      // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
+      if (isMouseEvent(event) || isTouchEvent(event)) {
+        // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+        // In this case, Panel sizes might not change–
+        // but updating cursor in this scenario would cause a flicker.
+        if (prevDeltaRef.current != delta) {
+          prevDeltaRef.current = delta;
+
+          if (!layoutChanged) {
+            // If the pointer has moved too far to resize the panel any further,
+            // update the cursor style for a visual clue.
+            // This mimics VS Code behavior.
+
+            if (isHorizontal) {
+              setGlobalCursorStyle(
+                delta < 0 ? "horizontal-min" : "horizontal-max"
+              );
+            } else {
+              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
+            }
+          } else {
+            // Reset the cursor style to the the normal resize cursor.
+            setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
           }
         }
       }
 
-      const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
-      if (idBefore == null || idAfter == null) {
-        return;
+      if (layoutChanged) {
+        setLayout(nextLayout);
+
+        if (onLayout) {
+          onLayout(
+            nextLayout.map((sizePercentage) => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(
+                sizePercentage,
+                groupSizePixels
+              ),
+            }))
+          );
+        }
+
+        callPanelCallbacks(
+          groupId,
+          panelDataArray,
+          nextLayout,
+          panelIdToLastNotifiedMixedSizesMapRef.current
+        );
       }
+    };
+  }, []);
 
-      const isLastPanel = index === panelsArray.length - 1;
+  // External APIs are safe to memoize via committed values ref
+  const resizePanel = useCallback(
+    (panelData: PanelData, mixedSizes: Partial<MixedSizes>) => {
+      const {
+        layout: prevLayout,
+        onLayout,
+        panelDataArray,
+      } = committedValuesRef.current;
+
+      const panelConstraintsArray = panelDataArray.map(
+        (panelData) => panelData.constraints
+      );
+
+      const { groupSizePixels, panelSizePercentage, pivotIndices } =
+        panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
+
+      const sizePercentage = getPercentageSizeFromMixedSizes(
+        mixedSizes,
+        groupSizePixels
+      )!;
+
+      const isLastPanel =
+        panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
       const delta = isLastPanel
-        ? currentSize - nextSize
-        : nextSize - currentSize;
-
-      const nextSizes = adjustByDelta(
-        null,
-        committedValuesRef.current,
-        idBefore,
-        idAfter,
+        ? panelSizePercentage - sizePercentage
+        : sizePercentage - panelSizePercentage;
+
+      const nextLayout = adjustLayoutByDelta({
         delta,
-        prevSizes,
-        panelSizeBeforeCollapse.current,
-        null
-      );
-      if (prevSizes !== nextSizes) {
-        const panelIdToLastNotifiedSizeMap =
-          panelIdToLastNotifiedSizeMapRef.current;
+        groupSizePixels,
+        layout: prevLayout,
+        panelConstraints: panelConstraintsArray,
+        pivotIndices,
+        trigger: "imperative-api",
+      });
 
-        setSizes(nextSizes);
+      if (!compareLayouts(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
+
+        if (onLayout) {
+          onLayout(
+            nextLayout.map((sizePercentage) => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(
+                sizePercentage,
+                groupSizePixels
+              ),
+            }))
+          );
+        }
 
-        // If resize change handlers have been declared, this is the time to call them.
-        // Trigger user callbacks after updating state, so that user code can override the sizes.
         callPanelCallbacks(
-          panelsArray,
-          nextSizes,
-          panelIdToLastNotifiedSizeMap
+          groupId,
+          panelDataArray,
+          nextLayout,
+          panelIdToLastNotifiedMixedSizesMapRef.current
         );
       }
     },
+    [groupId]
+  );
+
+  const startDragging = useCallback(
+    (dragHandleId: string, event: ResizeEvent) => {
+      const { direction, layout } = committedValuesRef.current;
+
+      const handleElement = getResizeHandleElement(dragHandleId)!;
+
+      const initialCursorPosition = getResizeEventCursorPosition(
+        direction,
+        event
+      );
+
+      setDragState({
+        dragHandleId,
+        dragHandleRect: handleElement.getBoundingClientRect(),
+        initialCursorPosition,
+        initialLayout: layout,
+      });
+    },
     []
   );
 
+  const stopDragging = useCallback(() => {
+    resetGlobalCursorStyle();
+    setDragState(null);
+  }, []);
+
+  const unregisterPanel = useCallback((panelData: PanelData) => {
+    delete panelIdToLastNotifiedMixedSizesMapRef.current[panelData.id];
+
+    setPanelDataArray((panelDataArray) => {
+      const index = panelDataArray.indexOf(panelData);
+      if (index >= 0) {
+        panelDataArray = [...panelDataArray];
+        panelDataArray.splice(index, 1);
+      }
+
+      return panelDataArray;
+    });
+  }, []);
+
   const context = useMemo(
     () => ({
-      activeHandleId,
       collapsePanel,
       direction,
+      dragState,
       expandPanel,
       getPanelSize,
       getPanelStyle,
       groupId,
+      isPanelCollapsed,
+      isPanelExpanded,
       registerPanel,
       registerResizeHandle,
       resizePanel,
-      startDragging: (id: string, event: ResizeEvent) => {
-        setActiveHandleId(id);
-
-        if (isMouseEvent(event) || isTouchEvent(event)) {
-          const handleElement = getResizeHandle(id)!;
-
-          initialDragStateRef.current = {
-            dragHandleRect: handleElement.getBoundingClientRect(),
-            dragOffset: getDragOffset(event, id, direction),
-            sizes: committedValuesRef.current.sizes,
-          };
-        }
-      },
-      stopDragging: () => {
-        resetGlobalCursorStyle();
-        setActiveHandleId(null);
-
-        initialDragStateRef.current = null;
-      },
-      units,
+      startDragging,
+      stopDragging,
       unregisterPanel,
     }),
     [
-      activeHandleId,
       collapsePanel,
+      dragState,
       direction,
       expandPanel,
       getPanelSize,
       getPanelStyle,
       groupId,
+      isPanelCollapsed,
+      isPanelExpanded,
       registerPanel,
       registerResizeHandle,
       resizePanel,
-      units,
+      startDragging,
+      stopDragging,
       unregisterPanel,
     ]
   );
@@ -900,18 +912,25 @@ function PanelGroupWithForwardedRef({
     width: "100%",
   };
 
-  return createElement(PanelGroupContext.Provider, {
-    children: createElement(Type, {
+  return createElement(
+    PanelGroupContext.Provider,
+    { value: context },
+    createElement(Type, {
       children,
       className: classNameFromProps,
+      style: {
+        ...style,
+        ...styleFromProps,
+      },
+
+      // CSS selectors
       "data-panel-group": "",
-      "data-panel-group-direction": direction,
-      "data-panel-group-id": groupId,
-      "data-panel-group-units": units,
-      style: { ...style, ...styleFromProps },
-    }),
-    value: context,
-  });
+
+      // e2e test attributes
+      "data-panel-group-direction": isDevelopment ? direction : undefined,
+      "data-panel-group-id": isDevelopment ? groupId : undefined,
+    })
+  );
 }
 
 export const PanelGroup = forwardRef<
@@ -923,3 +942,45 @@ export const PanelGroup = forwardRef<
 
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+
+function panelDataHelper(
+  groupId: string,
+  panelDataArray: PanelData[],
+  panelData: PanelData,
+  layout: number[]
+) {
+  const panelConstraintsArray = panelDataArray.map(
+    (panelData) => panelData.constraints
+  );
+
+  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelConstraints = panelConstraintsArray[panelIndex];
+
+  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+
+  const percentagePanelConstraints = computePercentagePanelConstraints(
+    panelConstraintsArray,
+    panelIndex,
+    groupSizePixels
+  );
+
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel
+    ? [panelIndex - 1, panelIndex]
+    : [panelIndex, panelIndex + 1];
+
+  const panelSizePercentage = layout[panelIndex];
+  const panelSizePixels = convertPercentageToPixels(
+    panelSizePercentage,
+    groupSizePixels
+  );
+
+  return {
+    ...percentagePanelConstraints,
+    collapsible: panelConstraints.collapsible,
+    panelSizePercentage,
+    panelSizePixels,
+    groupSizePixels,
+    pivotIndices,
+  };
+}