react-resizable-panels 0.0.22 → 0.0.23

package/src/hooks/useWindowSplitterBehavior.ts

@@ -51,15 +51,27 @@ export function useWindowSplitterPanelGroupBehavior({
         return () => {};
       }
 
-      const ariaValueMax = panelsArray.reduce((difference, panel) => {
-        if (panel.id !== idBefore) {
-          return difference - panel.minSize;
+      let minSize = 0;
+      let maxSize = 100;
+      let totalMinSize = 0;
+      let totalMaxSize = 0;
+
+      // 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;
+        } else {
+          totalMinSize += panelData.minSize;
+          totalMaxSize += panelData.maxSize;
         }
-        return difference;
-      }, 100);
+      });
 
-      const ariaValueMin =
-        panelsArray.find((panel) => panel.id == idBefore)?.minSize ?? 0;
+      const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
+      const ariaValueMin = Math.max(
+        minSize,
+        (panelsArray.length - 1) * 100 - totalMaxSize
+      );
 
       const flexGrow = getFlexGrow(panels, idBefore, sizes);
 

package/src/types.ts

@@ -1,9 +1,15 @@
+import { RefObject } from "react";
+
 export type Direction = "horizontal" | "vertical";
 
+export type PanelOnResize = (size: number) => void;
+
 export type PanelData = {
   defaultSize: number;
   id: string;
+  maxSize: number;
   minSize: number;
+  onResizeRef: RefObject<PanelOnResize | null>;
   order: number | null;
 };
 

package/src/utils/coordinates.ts

@@ -64,17 +64,9 @@ export function getMovement(
       case "ArrowUp":
         return isHorizontal ? 0 : -delta;
       case "End":
-        if (isHorizontal) {
-          return size;
-        } else {
-          return size;
-        }
+        return size;
       case "Home":
-        if (isHorizontal) {
-          return -size;
-        } else {
-          return -size;
-        }
+        return -size;
     }
   } else {
     return getDragOffset(event, handleId, direction, initialOffset);

package/src/utils/group.ts

@@ -25,12 +25,29 @@ export function adjustByDelta(
   //
   // A positive delta means the panel immediately before the resizer should "expand".
   // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+
+  // Max-bounds check the panel being expanded first.
+  {
+    const pivotId = delta < 0 ? idAfter : idBefore;
+    const index = panelsArray.findIndex((panel) => panel.id === pivotId);
+    const panel = panelsArray[index];
+    const prevSize = prevSizes[index];
+
+    const nextSize = safeResizePanel(panel, Math.abs(delta), prevSize);
+    if (prevSize === nextSize) {
+      return prevSizes;
+    } else {
+      delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+    }
+  }
+
   let pivotId = delta < 0 ? idBefore : idAfter;
   let index = panelsArray.findIndex((panel) => panel.id === pivotId);
   while (true) {
     const panel = panelsArray[index];
     const prevSize = prevSizes[index];
-    const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
+
+    const nextSize = safeResizePanel(panel, 0 - Math.abs(delta), prevSize);
     if (prevSize !== nextSize) {
       deltaApplied += prevSize - nextSize;
 
@@ -154,3 +171,16 @@ export function panelsMapToSortedArray(
 ): PanelData[] {
   return Array.from(panels.values()).sort((a, b) => a.order - b.order);
 }
+
+function safeResizePanel(
+  panel: PanelData,
+  delta: number,
+  prevSize: number
+): number {
+  const nextSizeUnsafe = prevSize + delta;
+  const nextSize = Math.min(
+    panel.maxSize,
+    Math.max(panel.minSize, nextSizeUnsafe)
+  );
+  return nextSize;
+}