react-resizable-panels 0.0.42 → 0.0.44

package/src/PanelGroup.ts

@@ -13,21 +13,27 @@ 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,
-  ResizeEvent,
   PanelGroupStorage,
+  ResizeEvent,
 } from "./types";
-import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+import { areEqual } from "./utils/arrays";
+import { assert } from "./utils/assert";
 import {
   getDragOffset,
   getMovement,
   isMouseEvent,
   isTouchEvent,
 } from "./utils/coordinates";
+import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
+import debounce from "./utils/debounce";
 import {
   adjustByDelta,
   callPanelCallbacks,
@@ -38,16 +44,16 @@ import {
   getResizeHandlePanelIds,
   panelsMapToSortedArray,
 } from "./utils/group";
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
-import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
-import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
-import debounce from "./utils/debounce";
-import { areEqual } from "./utils/arrays";
-import { assert } from "./utils/assert";
+import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 
-// Limit the frequency of localStorage updates.
-const savePanelGroupLayoutDebounced = debounce(savePanelGroupLayout, 100);
+const debounceMap: {
+  [key: string]: (
+    autoSaveId: string,
+    panels: PanelData[],
+    sizes: number[],
+    storage: PanelGroupStorage
+  ) => void;
+} = {};
 
 function throwServerError() {
   throw new Error('PanelGroup "storage" prop required for server rendering.');
@@ -103,6 +109,7 @@ export type PanelGroupProps = {
 };
 
 export type ImperativePanelGroupHandle = {
+  getLayout: () => number[];
   setLayout: (panelSizes: number[]) => void;
 };
 
@@ -157,6 +164,10 @@ function PanelGroupWithForwardedRef({
   useImperativeHandle(
     forwardedRef,
     () => ({
+      getLayout: () => {
+        const { sizes } = committedValuesRef.current;
+        return sizes;
+      },
       setLayout: (sizes: number[]) => {
         const total = sizes.reduce(
           (accumulated, current) => accumulated + current,
@@ -249,12 +260,12 @@ function PanelGroupWithForwardedRef({
       // For now, these logic edge cases are left to the user to handle via props.
 
       panelsArray.forEach((panel) => {
-        totalMinSize += panel.minSize;
+        totalMinSize += panel.current.minSize;
 
-        if (panel.defaultSize === null) {
+        if (panel.current.defaultSize === null) {
           panelsWithNullDefaultSize++;
         } else {
-          totalDefaultSize += panel.defaultSize;
+          totalDefaultSize += panel.current.defaultSize;
         }
       });
 
@@ -270,11 +281,11 @@ function PanelGroupWithForwardedRef({
 
       setSizes(
         panelsArray.map((panel) => {
-          if (panel.defaultSize === null) {
+          if (panel.current.defaultSize === null) {
             return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
           }
 
-          return panel.defaultSize;
+          return panel.current.defaultSize;
         })
       );
     }
@@ -289,7 +300,11 @@ function PanelGroupWithForwardedRef({
 
       const panelsArray = panelsMapToSortedArray(panels);
 
-      savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
+      // Limit the frequency of localStorage updates.
+      if (!debounceMap[autoSaveId]) {
+        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, 100);
+      }
+      debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
   }, [autoSaveId, panels, sizes, storage]);
 
@@ -332,14 +347,14 @@ function PanelGroupWithForwardedRef({
     [activeHandleId, disablePointerEventsDuringResize, sizes]
   );
 
-  const registerPanel = useCallback((id: string, panel: PanelData) => {
+  const registerPanel = useCallback((id: string, panelRef: PanelData) => {
     setPanels((prevPanels) => {
       if (prevPanels.has(id)) {
         return prevPanels;
       }
 
       const nextPanels = new Map(prevPanels);
-      nextPanels.set(id, panel);
+      nextPanels.set(id, panelRef);
 
       return nextPanels;
     });
@@ -458,7 +473,7 @@ function PanelGroupWithForwardedRef({
     const { panels, sizes: prevSizes } = committedValuesRef.current;
 
     const panel = panels.get(id);
-    if (panel == null || !panel.collapsible) {
+    if (panel == null || !panel.current.collapsible) {
       return;
     }
 
@@ -512,7 +527,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+      panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -576,10 +591,13 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
-    if (panel.collapsible && nextSize === 0) {
+    if (panel.current.collapsible && nextSize === 0) {
       // This is a valid resize state.
     } else {
-      nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
+      nextSize = Math.min(
+        panel.current.maxSize,
+        Math.max(panel.current.minSize, nextSize)
+      );
     }
 
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);

package/src/hooks/useWindowSplitterBehavior.ts

@@ -61,12 +61,12 @@ export function useWindowSplitterPanelGroupBehavior({
 
       // A panel's effective min/max sizes also need to account for other panel's sizes.
       panelsArray.forEach((panelData) => {
-        if (panelData.id === idBefore) {
-          maxSize = panelData.maxSize;
-          minSize = panelData.minSize;
+        if (panelData.current.id === idBefore) {
+          maxSize = panelData.current.maxSize;
+          minSize = panelData.current.minSize;
         } else {
-          totalMinSize += panelData.minSize;
-          totalMaxSize += panelData.maxSize;
+          totalMinSize += panelData.current.minSize;
+          totalMaxSize += panelData.current.maxSize;
         }
       });
 
@@ -92,7 +92,7 @@ export function useWindowSplitterPanelGroupBehavior({
             event.preventDefault();
 
             const index = panelsArray.findIndex(
-              (panel) => panel.id === idBefore
+              (panel) => panel.current.id === idBefore
             );
             if (index >= 0) {
               const panelData = panelsArray[index];
@@ -101,7 +101,7 @@ export function useWindowSplitterPanelGroupBehavior({
                 let delta = 0;
                 if (
                   size.toPrecision(PRECISION) <=
-                  panelData.minSize.toPrecision(PRECISION)
+                  panelData.current.minSize.toPrecision(PRECISION)
                 ) {
                   delta = direction === "horizontal" ? width : height;
                 } else {

package/src/index.ts

@@ -8,14 +8,14 @@ import type { PanelResizeHandleProps } from "./PanelResizeHandle";
 import type { PanelGroupStorage } from "./types";
 
 export {
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-
   // TypeScript types
+  ImperativePanelGroupHandle,
   ImperativePanelHandle,
+  Panel,
+  PanelGroup,
   PanelGroupProps,
   PanelGroupStorage,
   PanelProps,
+  PanelResizeHandle,
   PanelResizeHandleProps,
 };

package/src/types.ts

@@ -12,17 +12,21 @@ export type PanelOnCollapse = (collapsed: boolean) => void;
 export type PanelOnResize = (size: number) => void;
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
+export type PanelCallbackRef = RefObject<{
+  onCollapse: PanelOnCollapse | null;
+  onResize: PanelOnResize | null;
+}>;
+
 export type PanelData = {
-  callbacksRef: RefObject<{
-    onCollapse: PanelOnCollapse | null;
-    onResize: PanelOnResize | null;
-  }>;
-  collapsible: boolean;
-  defaultSize: number | null;
-  id: string;
-  maxSize: number;
-  minSize: number;
-  order: number | null;
+  current: {
+    callbacksRef: PanelCallbackRef;
+    collapsible: boolean;
+    defaultSize: number | null;
+    id: string;
+    maxSize: number;
+    minSize: number;
+    order: number | null;
+  };
 };
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;

package/src/utils/coordinates.ts

@@ -107,20 +107,20 @@ export function getMovement(
     );
     const targetPanelId = movement < 0 ? idBefore : idAfter;
     const targetPanelIndex = panelsArray.findIndex(
-      (panel) => panel.id === targetPanelId
+      (panel) => panel.current.id === targetPanelId
     );
     const targetPanel = panelsArray[targetPanelIndex];
-    if (targetPanel.collapsible) {
+    if (targetPanel.current.collapsible) {
       const baseSize = baseSizes[targetPanelIndex];
       if (
         baseSize === 0 ||
         baseSize.toPrecision(PRECISION) ===
-          targetPanel.minSize.toPrecision(PRECISION)
+          targetPanel.current.minSize.toPrecision(PRECISION)
       ) {
         movement =
           movement < 0
-            ? -targetPanel.minSize * groupSizeInPixels
-            : targetPanel.minSize * groupSizeInPixels;
+            ? -targetPanel.current.minSize * groupSizeInPixels
+            : targetPanel.current.minSize * groupSizeInPixels;
       }
     }
 

package/src/utils/group.ts

@@ -1,5 +1,5 @@
-import { PRECISION } from "../constants";
 import { InitialDragState } from "../PanelGroup";
+import { PRECISION } from "../constants";
 import { PanelData, ResizeEvent } from "../types";
 
 export function adjustByDelta(
@@ -39,7 +39,9 @@ export function adjustByDelta(
   // Max-bounds check the panel being expanded first.
   {
     const pivotId = delta < 0 ? idAfter : idBefore;
-    const index = panelsArray.findIndex((panel) => panel.id === pivotId);
+    const index = panelsArray.findIndex(
+      (panel) => panel.current.id === pivotId
+    );
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
 
@@ -57,7 +59,7 @@ export function adjustByDelta(
   }
 
   let pivotId = delta < 0 ? idBefore : idAfter;
-  let index = panelsArray.findIndex((panel) => panel.id === pivotId);
+  let index = panelsArray.findIndex((panel) => panel.current.id === pivotId);
   while (true) {
     const panel = panelsArray[index];
     const baseSize = baseSizes[index];
@@ -72,7 +74,7 @@ export function adjustByDelta(
     );
     if (baseSize !== nextSize) {
       if (nextSize === 0 && baseSize > 0) {
-        panelSizeBeforeCollapse.set(panel.id, baseSize);
+        panelSizeBeforeCollapse.set(panel.current.id, baseSize);
       }
 
       deltaApplied += baseSize - nextSize;
@@ -109,7 +111,7 @@ export function adjustByDelta(
 
   // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
   pivotId = delta < 0 ? idAfter : idBefore;
-  index = panelsArray.findIndex((panel) => panel.id === pivotId);
+  index = panelsArray.findIndex((panel) => panel.current.id === pivotId);
   nextSizes[index] = baseSizes[index] + deltaApplied;
 
   return nextSizes;
@@ -123,7 +125,7 @@ export function callPanelCallbacks(
   nextSizes.forEach((nextSize, index) => {
     const prevSize = prevSizes[index];
     if (prevSize !== nextSize) {
-      const { callbacksRef, collapsible } = panelsArray[index];
+      const { callbacksRef, collapsible } = panelsArray[index].current;
       const { onCollapse, onResize } = callbacksRef.current!;
 
       if (onResize) {
@@ -151,14 +153,14 @@ export function getBeforeAndAfterIds(
     return [null, null];
   }
 
-  const index = panelsArray.findIndex((panel) => panel.id === id);
+  const index = panelsArray.findIndex((panel) => panel.current.id === id);
   if (index < 0) {
     return [null, null];
   }
 
   const isLastPanel = index === panelsArray.length - 1;
-  const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
-  const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+  const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
+  const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
 
   return [idBefore, idAfter];
 }
@@ -176,7 +178,7 @@ export function getFlexGrow(
 
   const panelsArray = panelsMapToSortedArray(panels);
 
-  const index = panelsArray.findIndex((panel) => panel.id === id);
+  const index = panelsArray.findIndex((panel) => panel.current.id === id);
   const size = sizes[index];
   if (size == null) {
     return "0";
@@ -240,8 +242,8 @@ export function getResizeHandlePanelIds(
   const handles = getResizeHandlesForGroup(groupId);
   const index = handle ? handles.indexOf(handle) : -1;
 
-  const idBefore: string | null = panelsArray[index]?.id ?? null;
-  const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
+  const idBefore: string | null = panelsArray[index]?.current?.id ?? null;
+  const idAfter: string | null = panelsArray[index + 1]?.current?.id ?? null;
 
   return [idBefore, idAfter];
 }
@@ -250,8 +252,8 @@ export function panelsMapToSortedArray(
   panels: Map<string, PanelData>
 ): PanelData[] {
   return Array.from(panels.values()).sort((panelA, panelB) => {
-    const orderA = panelA.order;
-    const orderB = panelB.order;
+    const orderA = panelA.current.order;
+    const orderB = panelB.current.order;
     if (orderA == null && orderB == null) {
       return 0;
     } else if (orderA == null) {
@@ -272,7 +274,7 @@ function safeResizePanel(
 ): number {
   const nextSizeUnsafe = prevSize + delta;
 
-  if (panel.collapsible) {
+  if (panel.current.collapsible) {
     if (prevSize > 0) {
       if (nextSizeUnsafe <= 0) {
         return 0;
@@ -283,7 +285,7 @@ function safeResizePanel(
         // Keyboard events should expand a collapsed panel to the min size,
         // but mouse events should wait until the panel has reached its min size
         // to avoid a visual flickering when dragging between collapsed and min size.
-        if (nextSizeUnsafe < panel.minSize) {
+        if (nextSizeUnsafe < panel.current.minSize) {
           return 0;
         }
       }
@@ -291,8 +293,8 @@ function safeResizePanel(
   }
 
   const nextSize = Math.min(
-    panel.maxSize,
-    Math.max(panel.minSize, nextSizeUnsafe)
+    panel.current.maxSize,
+    Math.max(panel.current.minSize, nextSizeUnsafe)
   );
 
   return nextSize;

package/src/utils/serialization.ts

@@ -9,7 +9,7 @@ type SerializedPanelGroupState = { [panelIds: string]: number[] };
 function getSerializationKey(panels: PanelData[]): string {
   return panels
     .map((panel) => {
-      const { minSize, order } = panel;
+      const { minSize, order } = panel.current;
       return order ? `${order}:${minSize}` : `${minSize}`;
     })
     .sort((a, b) => a.localeCompare(b))