react-resizable-panels 0.0.43 → 0.0.45

package/src/PanelGroup.ts

@@ -45,6 +45,7 @@ import {
   panelsMapToSortedArray,
 } from "./utils/group";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+import { isServerRendering } from "./utils/ssr";
 
 const debounceMap: {
   [key: string]: (
@@ -260,12 +261,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;
         }
       });
 
@@ -281,11 +282,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;
         })
       );
     }
@@ -309,16 +310,22 @@ function PanelGroupWithForwardedRef({
   }, [autoSaveId, panels, sizes, storage]);
 
   const getPanelStyle = useCallback(
-    (id: string): CSSProperties => {
+    (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 (isServerRendering() && defaultSize == null) {
+          console.warn(
+            `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
+          );
+        }
+
         return {
-          flexBasis: "auto",
-          flexGrow: 1,
+          flexBasis: 0,
+          flexGrow: defaultSize != null ? defaultSize : undefined,
           flexShrink: 1,
 
           // Without this, Panel sizes may be unintentionally overridden by their content.
@@ -347,14 +354,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;
     });
@@ -382,7 +389,7 @@ function PanelGroupWithForwardedRef({
           return;
         }
 
-        const movement = getMovement(
+        let movement = getMovement(
           event,
           groupId,
           handleId,
@@ -398,6 +405,12 @@ function PanelGroupWithForwardedRef({
         const groupElement = getPanelGroup(groupId)!;
         const rect = groupElement.getBoundingClientRect();
         const isHorizontal = direction === "horizontal";
+
+        // Support RTL layouts
+        if (document.dir === "rtl" && isHorizontal) {
+          movement = -movement;
+        }
+
         const size = isHorizontal ? rect.width : rect.height;
         const delta = (movement / size) * 100;
 
@@ -473,7 +486,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;
     }
 
@@ -527,7 +540,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+      panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -591,10 +604,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/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))

package/src/utils/ssr.ts

@@ -0,0 +1,7 @@
+export function isServerRendering(): boolean {
+  try {
+    return typeof window === undefined;
+  } catch (error) {}
+
+  return true;
+}