react-resizable-panels 0.0.43 → 0.0.44

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/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))