react-resizable-panels 0.0.22 → 0.0.24

package/src/{PanelResizeHandle.tsx → PanelResizeHandle.ts}

@@ -1,4 +1,5 @@
 import {
+  createElement,
   CSSProperties,
   ElementType,
   MouseEvent,
@@ -16,6 +17,15 @@ import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitte
 import { PanelGroupContext } from "./PanelContexts";
 import type { ResizeHandler, ResizeEvent } from "./types";
 
+export type PanelResizeHandleProps = {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  id?: string | null;
+  style?: CSSProperties;
+  tagName?: ElementType;
+};
+
 export default function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
@@ -23,14 +33,7 @@ export default function PanelResizeHandle({
   id: idFromProps = null,
   style: styleFromProps = {},
   tagName: Type = "div",
-}: {
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  id?: string | null;
-  style?: CSSProperties;
-  tagName?: ElementType;
-}) {
+}: PanelResizeHandleProps) {
   const divElementRef = useRef<HTMLDivElement>(null);
 
   const panelGroupContext = useContext(PanelGroupContext);
@@ -89,19 +92,19 @@ export default function PanelResizeHandle({
     };
 
     document.body.addEventListener("contextmenu", stopDraggingAndBlur);
-    document.body.addEventListener("mouseleave", stopDraggingAndBlur);
     document.body.addEventListener("mousemove", onMove);
     document.body.addEventListener("touchmove", onMove);
-    document.body.addEventListener("mouseup", stopDraggingAndBlur);
+    window.addEventListener("mouseup", stopDraggingAndBlur);
+    window.addEventListener("touchend", stopDraggingAndBlur);
 
     return () => {
       document.body.style.cursor = "";
 
       document.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-      document.body.removeEventListener("mouseleave", stopDraggingAndBlur);
       document.body.removeEventListener("mousemove", onMove);
       document.body.removeEventListener("touchmove", onMove);
-      document.body.removeEventListener("mouseup", stopDraggingAndBlur);
+      window.removeEventListener("mouseup", stopDraggingAndBlur);
+      window.removeEventListener("touchend", stopDraggingAndBlur);
     };
   }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
 
@@ -117,38 +120,35 @@ export default function PanelResizeHandle({
     userSelect: "none",
   };
 
-  return (
-    <Type
-      className={classNameFromProps}
-      data-resize-handle-active={
-        isDragging ? "pointer" : isFocused ? "keyboard" : undefined
-      }
-      data-panel-group-direction={direction}
-      data-panel-group-id={groupId}
-      data-panel-resize-handle-enabled={!disabled}
-      data-panel-resize-handle-id={resizeHandleId}
-      onBlur={() => setIsFocused(false)}
-      onFocus={() => setIsFocused(true)}
-      onMouseDown={(event: MouseEvent) =>
-        startDragging(resizeHandleId, event.nativeEvent)
-      }
-      onMouseUp={stopDraggingAndBlur}
-      onTouchCancel={stopDraggingAndBlur}
-      onTouchEnd={stopDraggingAndBlur}
-      onTouchStart={(event: TouchEvent) =>
-        startDragging(resizeHandleId, event.nativeEvent)
-      }
-      ref={divElementRef}
-      role="separator"
-      style={{
-        ...style,
-        ...styleFromProps,
-      }}
-      tabIndex={0}
-    >
-      {children}
-    </Type>
-  );
+  return createElement(Type, {
+    children,
+    className: classNameFromProps,
+    "data-resize-handle-active": isDragging
+      ? "pointer"
+      : isFocused
+      ? "keyboard"
+      : undefined,
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId,
+    "data-panel-resize-handle-enabled": !disabled,
+    "data-panel-resize-handle-id": resizeHandleId,
+    onBlur: () => setIsFocused(false),
+    onFocus: () => setIsFocused(true),
+    onMouseDown: (event: MouseEvent) =>
+      startDragging(resizeHandleId, event.nativeEvent),
+    onMouseUp: stopDraggingAndBlur,
+    onTouchCancel: stopDraggingAndBlur,
+    onTouchEnd: stopDraggingAndBlur,
+    onTouchStart: (event: TouchEvent) =>
+      startDragging(resizeHandleId, event.nativeEvent),
+    ref: divElementRef,
+    role: "separator",
+    style: {
+      ...style,
+      ...styleFromProps,
+    },
+    tabIndex: 0,
+  });
 }
 
 // Workaround for Parcel scope hoisting (which renames objects/functions).

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;
+}