react-resizable-panels 0.0.55 → 0.0.57

package/src/PanelGroupContext.ts

@@ -0,0 +1,33 @@
+import { PanelData } from "./Panel";
+import { MixedSizes } from "./types";
+import { CSSProperties, createContext } from "./vendor/react";
+
+export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;
+
+export type DragState = {
+  dragHandleId: string;
+  dragHandleRect: DOMRect;
+  initialCursorPosition: number;
+  initialLayout: number[];
+};
+
+export const PanelGroupContext = createContext<{
+  collapsePanel: (panelData: PanelData) => void;
+  direction: "horizontal" | "vertical";
+  dragState: DragState | null;
+  expandPanel: (panelData: PanelData) => void;
+  getPanelSize: (panelData: PanelData) => MixedSizes;
+  getPanelStyle: (panelData: PanelData) => CSSProperties;
+  groupId: string;
+  isPanelCollapsed: (panelData: PanelData) => boolean;
+  isPanelExpanded: (panelData: PanelData) => boolean;
+  registerPanel: (panelData: PanelData) => void;
+  registerResizeHandle: (dragHandleId: string) => ResizeHandler;
+  resizePanel: (panelData: PanelData, mixedSizes: Partial<MixedSizes>) => void;
+  startDragging: (dragHandleId: string, event: ResizeEvent) => void;
+  stopDragging: () => void;
+  unregisterPanel: (panelData: PanelData) => void;
+} | null>(null);
+
+PanelGroupContext.displayName = "PanelGroupContext";

package/src/PanelResizeHandle.ts

@@ -1,3 +1,4 @@
+import useUniqueId from "./hooks/useUniqueId";
 import {
   createElement,
   CSSProperties,
@@ -11,17 +12,17 @@ import {
   useRef,
   useState,
 } from "./vendor/react";
-import useUniqueId from "./hooks/useUniqueId";
 
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
-import { PanelGroupContext } from "./PanelContexts";
-import type {
-  ResizeHandler,
+import {
+  PanelGroupContext,
   ResizeEvent,
-  PanelResizeHandleOnDragging,
-} from "./types";
+  ResizeHandler,
+} from "./PanelGroupContext";
 import { getCursorStyle } from "./utils/cursor";
 
+export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
+
 export type PanelResizeHandleProps = {
   children?: ReactNode;
   className?: string;
@@ -59,8 +60,8 @@ export function PanelResizeHandle({
   }
 
   const {
-    activeHandleId,
     direction,
+    dragState,
     groupId,
     registerResizeHandle,
     startDragging,
@@ -68,7 +69,7 @@ export function PanelResizeHandle({
   } = panelGroupContext;
 
   const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = activeHandleId === resizeHandleId;
+  const isDragging = dragState?.dragHandleId === resizeHandleId;
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -150,15 +151,6 @@ export function PanelResizeHandle({
   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: ReactMouseEvent) => {
@@ -187,6 +179,18 @@ export function PanelResizeHandle({
       ...styleFromProps,
     },
     tabIndex: 0,
+
+    // CSS selectors
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId,
+    "data-resize-handle": "",
+    "data-resize-handle-active": isDragging
+      ? "pointer"
+      : isFocused
+      ? "keyboard"
+      : undefined,
+    "data-panel-resize-handle-enabled": !disabled,
+    "data-panel-resize-handle-id": resizeHandleId,
   });
 }
 

package/src/hooks/useUniqueId.ts

@@ -15,5 +15,5 @@ export default function useUniqueId(
     idRef.current = "" + counter++;
   }
 
-  return idRef.current;
+  return idFromParams ?? idRef.current;
 }

package/src/hooks/useWindowSplitterBehavior.ts

@@ -1,169 +1,12 @@
-import { RefObject, useEffect } from "../vendor/react";
-import { PRECISION } from "../constants";
-
-import { CommittedValues, PanelDataMap } from "../PanelGroup";
 import { ResizeHandler } from "../types";
-import {
-  adjustByDelta,
-  getPanel,
-  getPanelGroup,
-  getResizeHandle,
-  getResizeHandleIndex,
-  getResizeHandlePanelIds,
-  getResizeHandles,
-  getResizeHandlesForGroup,
-  getFlexGrow,
-  panelsMapToSortedArray,
-} from "../utils/group";
 import { assert } from "../utils/assert";
+import { getResizeHandleElement } from "../utils/dom/getResizeHandleElement";
+import { getResizeHandleElementIndex } from "../utils/dom/getResizeHandleElementIndex";
+import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
+import { useEffect } from "../vendor/react";
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
-export function useWindowSplitterPanelGroupBehavior({
-  committedValuesRef,
-  groupId,
-  panels,
-  setSizes,
-  sizes,
-  panelSizeBeforeCollapse,
-}: {
-  committedValuesRef: RefObject<CommittedValues>;
-  groupId: string;
-  panels: PanelDataMap;
-  setSizes: (sizes: number[]) => void;
-  sizes: number[];
-  panelSizeBeforeCollapse: RefObject<Map<string, number>>;
-}): void {
-  useEffect(() => {
-    const { direction, panels } = committedValuesRef.current!;
-
-    const groupElement = getPanelGroup(groupId);
-    assert(groupElement != null, `No group found for id "${groupId}"`);
-
-    const { height, width } = groupElement.getBoundingClientRect();
-
-    const handles = getResizeHandlesForGroup(groupId);
-    const cleanupFunctions = handles.map((handle) => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id")!;
-      const panelsArray = panelsMapToSortedArray(panels);
-
-      const [idBefore, idAfter] = getResizeHandlePanelIds(
-        groupId,
-        handleId,
-        panelsArray
-      );
-      if (idBefore == null || idAfter == null) {
-        return () => {};
-      }
-
-      let currentMinSize = 0;
-      let currentMaxSize = 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) => {
-        const { id, maxSize, minSize } = panelData.current;
-        if (id === idBefore) {
-          currentMinSize = minSize;
-          currentMaxSize = maxSize != null ? maxSize : 100;
-        } else {
-          totalMinSize += minSize;
-          totalMaxSize += maxSize != null ? maxSize : 100;
-        }
-      });
-
-      const ariaValueMax = Math.min(currentMaxSize, 100 - totalMinSize);
-      const ariaValueMin = Math.max(
-        currentMinSize,
-        (panelsArray.length - 1) * 100 - totalMaxSize
-      );
-
-      const flexGrow = getFlexGrow(panels, idBefore, sizes);
-
-      handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
-      handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
-      handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
-
-      const onKeyDown = (event: KeyboardEvent) => {
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        switch (event.key) {
-          case "Enter": {
-            event.preventDefault();
-
-            const index = panelsArray.findIndex(
-              (panel) => panel.current.id === idBefore
-            );
-            if (index >= 0) {
-              const panelData = panelsArray[index];
-              const size = sizes[index];
-              if (size != null) {
-                let delta = 0;
-                if (
-                  size.toPrecision(PRECISION) <=
-                  panelData.current.minSize.toPrecision(PRECISION)
-                ) {
-                  delta = direction === "horizontal" ? width : height;
-                } else {
-                  delta = -(direction === "horizontal" ? width : height);
-                }
-
-                const nextSizes = adjustByDelta(
-                  event,
-                  committedValuesRef.current!,
-                  idBefore,
-                  idAfter,
-                  delta,
-                  sizes,
-                  panelSizeBeforeCollapse.current!,
-                  null
-                );
-                if (sizes !== nextSizes) {
-                  setSizes(nextSizes);
-                }
-              }
-            }
-            break;
-          }
-        }
-      };
-
-      handle.addEventListener("keydown", onKeyDown);
-
-      const panelBefore = getPanel(idBefore);
-      if (panelBefore != null) {
-        handle.setAttribute("aria-controls", panelBefore.id);
-      }
-
-      return () => {
-        handle.removeAttribute("aria-valuemax");
-        handle.removeAttribute("aria-valuemin");
-        handle.removeAttribute("aria-valuenow");
-
-        handle.removeEventListener("keydown", onKeyDown);
-
-        if (panelBefore != null) {
-          handle.removeAttribute("aria-controls");
-        }
-      };
-    });
-
-    return () => {
-      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
-    };
-  }, [
-    committedValuesRef,
-    groupId,
-    panels,
-    panelSizeBeforeCollapse,
-    setSizes,
-    sizes,
-  ]);
-}
-
 export function useWindowSplitterResizeHandlerBehavior({
   disabled,
   handleId,
@@ -178,7 +21,7 @@ export function useWindowSplitterResizeHandlerBehavior({
       return;
     }
 
-    const handleElement = getResizeHandle(handleId);
+    const handleElement = getResizeHandleElement(handleId);
     if (handleElement == null) {
       return;
     }
@@ -203,8 +46,10 @@ export function useWindowSplitterResizeHandlerBehavior({
         case "F6": {
           event.preventDefault();
 
-          const handles = getResizeHandles();
-          const index = getResizeHandleIndex(handleId);
+          const groupId = handleElement.getAttribute("data-panel-group-id")!;
+
+          const handles = getResizeHandleElementsForGroup(groupId);
+          const index = getResizeHandleElementIndex(groupId, handleId);
 
           assert(index !== null);
 

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -0,0 +1,185 @@
+import { isDevelopment } from "#is-development";
+import { PanelData } from "../Panel";
+import { PRECISION } from "../constants";
+import { Direction } from "../types";
+import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
+import { assert } from "../utils/assert";
+import { calculateAriaValues } from "../utils/calculateAriaValues";
+import { determinePivotIndices } from "../utils/determinePivotIndices";
+import { calculateAvailablePanelSizeInPixels } from "../utils/dom/calculateAvailablePanelSizeInPixels";
+import { getAvailableGroupSizePixels } from "../utils/dom/getAvailableGroupSizePixels";
+import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
+import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
+import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
+import { getPercentageSizeFromMixedSizes } from "../utils/getPercentageSizeFromMixedSizes";
+import { RefObject, useEffect, useRef } from "../vendor/react";
+import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
+
+// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+
+export function useWindowSplitterPanelGroupBehavior({
+  committedValuesRef,
+  groupId,
+  layout,
+  panelDataArray,
+  setLayout,
+}: {
+  committedValuesRef: RefObject<{
+    direction: Direction;
+    panelDataArray: PanelData[];
+  }>;
+  groupId: string;
+  layout: number[];
+  panelDataArray: PanelData[];
+  setLayout: (sizes: number[]) => void;
+}): void {
+  const devWarningsRef = useRef<{
+    didWarnAboutMissingResizeHandle: boolean;
+  }>({
+    didWarnAboutMissingResizeHandle: false,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
+
+    for (let index = 0; index < panelDataArray.length - 1; index++) {
+      const { valueMax, valueMin, valueNow } = calculateAriaValues({
+        groupSizePixels,
+        layout,
+        panelsArray: panelDataArray,
+        pivotIndices: [index, index + 1],
+      });
+
+      const resizeHandleElement = resizeHandleElements[index];
+      if (resizeHandleElement == null) {
+        if (isDevelopment) {
+          const { didWarnAboutMissingResizeHandle } = devWarningsRef.current;
+
+          if (!didWarnAboutMissingResizeHandle) {
+            devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
+
+            console.warn(
+              `WARNING: Missing resize handle for PanelGroup "${groupId}"`
+            );
+          }
+        }
+      } else {
+        resizeHandleElement.setAttribute(
+          "aria-controls",
+          panelDataArray[index].id
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuemax",
+          "" + Math.round(valueMax)
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuemin",
+          "" + Math.round(valueMin)
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuenow",
+          "" + Math.round(valueNow)
+        );
+      }
+    }
+
+    return () => {
+      resizeHandleElements.forEach((resizeHandleElement, index) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    };
+  }, [groupId, layout, panelDataArray]);
+
+  useEffect(() => {
+    const { direction, panelDataArray } = committedValuesRef.current!;
+
+    const groupElement = getPanelGroupElement(groupId);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
+
+    const { height, width } = groupElement.getBoundingClientRect();
+
+    const handles = getResizeHandleElementsForGroup(groupId);
+    const cleanupFunctions = handles.map((handle) => {
+      const handleId = handle.getAttribute("data-panel-resize-handle-id")!;
+
+      const [idBefore, idAfter] = getResizeHandlePanelIds(
+        groupId,
+        handleId,
+        panelDataArray
+      );
+      if (idBefore == null || idAfter == null) {
+        return () => {};
+      }
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        switch (event.key) {
+          case "Enter": {
+            event.preventDefault();
+
+            const index = panelDataArray.findIndex(
+              (panelData) => panelData.id === idBefore
+            );
+            if (index >= 0) {
+              const panelData = panelDataArray[index];
+              const size = layout[index];
+              if (size != null) {
+                const groupSizePixels = getAvailableGroupSizePixels(groupId);
+
+                const minSize =
+                  getPercentageSizeFromMixedSizes(
+                    {
+                      sizePercentage: panelData.constraints.minSizePercentage,
+                      sizePixels: panelData.constraints.minSizePixels,
+                    },
+                    groupSizePixels
+                  ) ?? 0;
+
+                let delta = 0;
+                if (
+                  size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)
+                ) {
+                  delta = direction === "horizontal" ? width : height;
+                } else {
+                  delta = -(direction === "horizontal" ? width : height);
+                }
+
+                const nextLayout = adjustLayoutByDelta({
+                  delta,
+                  groupSizePixels,
+                  layout,
+                  panelConstraints: panelDataArray.map(
+                    (panelData) => panelData.constraints
+                  ),
+                  pivotIndices: determinePivotIndices(groupId, handleId),
+                  trigger: "keyboard",
+                });
+                if (layout !== nextLayout) {
+                  setLayout(nextLayout);
+                }
+              }
+            }
+            break;
+          }
+        }
+      };
+
+      handle.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        handle.removeEventListener("keydown", onKeyDown);
+      };
+    });
+
+    return () => {
+      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
+    };
+  }, [committedValuesRef, groupId, layout, panelDataArray, setLayout]);
+}

package/src/index.ts

@@ -2,38 +2,43 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 
-import type { ImperativePanelHandle, PanelProps } from "./Panel";
-import type { ImperativePanelGroupHandle, PanelGroupProps } from "./PanelGroup";
-import type { PanelResizeHandleProps } from "./PanelResizeHandle";
-import { getAvailableGroupSizePixels } from "./utils/group";
+import type { MixedSizes } from "./types";
+
 import type {
-  PanelGroupOnLayout,
-  PanelGroupStorage,
+  ImperativePanelHandle,
   PanelOnCollapse,
+  PanelOnExpand,
   PanelOnResize,
+  PanelProps,
+} from "./Panel";
+import type {
+  ImperativePanelGroupHandle,
+  PanelGroupOnLayout,
+  PanelGroupProps,
+  PanelGroupStorage,
+} from "./PanelGroup";
+import type {
   PanelResizeHandleOnDragging,
-  Units,
-} from "./types";
+  PanelResizeHandleProps,
+} from "./PanelResizeHandle";
 
 export {
   // TypeScript types
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
-  PanelOnCollapse,
-  PanelOnResize,
+  MixedSizes,
   PanelGroupOnLayout,
   PanelGroupProps,
   PanelGroupStorage,
+  PanelOnCollapse,
+  PanelOnExpand,
+  PanelOnResize,
   PanelProps,
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
-  Units,
 
   // React components
   Panel,
   PanelGroup,
   PanelResizeHandle,
-
-  // Utility methods
-  getAvailableGroupSizePixels,
 };

package/src/types.ts

@@ -1,35 +1,8 @@
-import { RefObject } from "./vendor/react";
-
 export type Direction = "horizontal" | "vertical";
-export type Units = "percentages" | "pixels";
-
-export type PanelGroupStorage = {
-  getItem(name: string): string | null;
-  setItem(name: string, value: string): void;
-};
-
-export type PanelGroupOnLayout = (sizes: number[]) => void;
-export type PanelOnCollapse = (collapsed: boolean) => void;
-export type PanelOnResize = (size: number, prevSize: number) => void;
-export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-
-export type PanelCallbackRef = RefObject<{
-  onCollapse: PanelOnCollapse | null;
-  onResize: PanelOnResize | null;
-}>;
 
-export type PanelData = {
-  current: {
-    callbacksRef: PanelCallbackRef;
-    collapsedSize: number;
-    collapsible: boolean;
-    defaultSize: number | null;
-    id: string;
-    idWasAutoGenerated: boolean;
-    maxSize: number | null;
-    minSize: number;
-    order: number | null;
-  };
+export type MixedSizes = {
+  sizePercentage: number;
+  sizePixels: number;
 };
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;