react-resizable-panels 1.0.7 → 1.0.9

package/src/PanelGroup.ts

@@ -1,6 +1,11 @@
 import { isDevelopment } from "#is-development";
-import { PanelData } from "./Panel";
-import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
+import { PanelConstraints, PanelData } from "./Panel";
+import {
+  DragState,
+  PanelGroupContext,
+  ResizeEvent,
+  TPanelGroupContext,
+} from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
@@ -31,7 +36,7 @@ import {
   ForwardedRef,
   HTMLAttributes,
   PropsWithChildren,
-  ReactNode,
+  ReactElement,
   createElement,
   forwardRef,
   useCallback,
@@ -103,9 +108,9 @@ function PanelGroupWithForwardedRef({
   ...rest
 }: PanelGroupProps & {
   forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
-}): ReactNode {
+}): ReactElement {
   const groupId = useUniqueId(idFromProps);
-
+  const panelGroupElementRef = useRef<HTMLDivElement | null>(null);
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
 
@@ -207,6 +212,7 @@ function PanelGroupWithForwardedRef({
     layout,
     panelDataArray: eagerValuesRef.current.panelDataArray,
     setLayout,
+    panelGroupElement: panelGroupElementRef.current,
   });
 
   useEffect(() => {
@@ -561,7 +567,10 @@ function PanelGroupWithForwardedRef({
   const registerResizeHandle = useCallback((dragHandleId: string) => {
     return function resizeHandler(event: ResizeEvent) {
       event.preventDefault();
-
+      const panelGroupElement = panelGroupElementRef.current;
+      if (!panelGroupElement) {
+        return () => null;
+      }
       const {
         direction,
         dragState,
@@ -573,14 +582,19 @@ function PanelGroupWithForwardedRef({
 
       const { initialLayout } = dragState ?? {};
 
-      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
+      const pivotIndices = determinePivotIndices(
+        groupId,
+        dragHandleId,
+        panelGroupElement
+      );
 
       let delta = calculateDeltaPercentage(
         event,
         dragHandleId,
         direction,
         dragState,
-        keyboardResizeBy
+        keyboardResizeBy,
+        panelGroupElement
       );
       if (delta === 0) {
         return;
@@ -705,12 +719,60 @@ function PanelGroupWithForwardedRef({
     []
   );
 
+  const reevaluatePanelConstraints = useCallback(
+    (panelData: PanelData, prevConstraints: PanelConstraints) => {
+      const { layout, panelDataArray } = eagerValuesRef.current;
+
+      const {
+        collapsedSize: prevCollapsedSize = 0,
+        collapsible: prevCollapsible,
+        defaultSize: prevDefaultSize,
+        maxSize: prevMaxSize = 100,
+        minSize: prevMinSize = 0,
+      } = prevConstraints;
+
+      const {
+        collapsedSize: nextCollapsedSize = 0,
+        collapsible: nextCollapsible,
+        defaultSize: nextDefaultSize,
+        maxSize: nextMaxSize = 100,
+        minSize: nextMinSize = 0,
+      } = panelData.constraints;
+
+      const { panelSize: prevPanelSize } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        layout
+      );
+      assert(prevPanelSize != null);
+
+      if (
+        prevCollapsible &&
+        nextCollapsible &&
+        prevCollapsedSize !== nextCollapsedSize &&
+        prevPanelSize === prevCollapsedSize
+      ) {
+        resizePanel(panelData, nextCollapsedSize);
+      } else if (prevPanelSize < nextMinSize) {
+        resizePanel(panelData, nextMinSize);
+      } else if (prevPanelSize > nextMaxSize) {
+        resizePanel(panelData, nextMaxSize);
+      }
+    },
+    [resizePanel]
+  );
+
   const startDragging = useCallback(
     (dragHandleId: string, event: ResizeEvent) => {
       const { direction } = committedValuesRef.current;
       const { layout } = eagerValuesRef.current;
-
-      const handleElement = getResizeHandleElement(dragHandleId);
+      if (!panelGroupElementRef.current) {
+        return;
+      }
+      const handleElement = getResizeHandleElement(
+        dragHandleId,
+        panelGroupElementRef.current
+      );
       assert(handleElement);
 
       const initialCursorPosition = getResizeEventCursorPosition(
@@ -751,23 +813,26 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   const context = useMemo(
-    () => ({
-      collapsePanel,
-      direction,
-      dragState,
-      expandPanel,
-      getPanelSize,
-      getPanelStyle,
-      groupId,
-      isPanelCollapsed,
-      isPanelExpanded,
-      registerPanel,
-      registerResizeHandle,
-      resizePanel,
-      startDragging,
-      stopDragging,
-      unregisterPanel,
-    }),
+    () =>
+      ({
+        collapsePanel,
+        direction,
+        dragState,
+        expandPanel,
+        getPanelSize,
+        getPanelStyle,
+        groupId,
+        isPanelCollapsed,
+        isPanelExpanded,
+        reevaluatePanelConstraints,
+        registerPanel,
+        registerResizeHandle,
+        resizePanel,
+        startDragging,
+        stopDragging,
+        unregisterPanel,
+        panelGroupElement: panelGroupElementRef.current,
+      }) satisfies TPanelGroupContext,
     [
       collapsePanel,
       dragState,
@@ -778,6 +843,7 @@ function PanelGroupWithForwardedRef({
       groupId,
       isPanelCollapsed,
       isPanelExpanded,
+      reevaluatePanelConstraints,
       registerPanel,
       registerResizeHandle,
       resizePanel,
@@ -800,14 +866,13 @@ function PanelGroupWithForwardedRef({
     { value: context },
     createElement(Type, {
       ...rest,
-
       children,
       className: classNameFromProps,
       style: {
         ...style,
         ...styleFromProps,
       },
-
+      ref: panelGroupElementRef,
       // CSS selectors
       "data-panel-group": "",
       "data-panel-group-direction": direction,
@@ -838,12 +903,7 @@ function panelDataHelper(
   panelData: PanelData,
   layout: number[]
 ) {
-  const panelConstraintsArray = panelDataArray.map(
-    (panelData) => panelData.constraints
-  );
-
   const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const panelConstraints = panelConstraintsArray[panelIndex];
 
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel
@@ -853,7 +913,7 @@ function panelDataHelper(
   const panelSize = layout[panelIndex];
 
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
     pivotIndices,
   };

package/src/PanelGroupContext.ts

@@ -1,4 +1,4 @@
-import { PanelData } from "./Panel";
+import { PanelConstraints, PanelData } from "./Panel";
 import { CSSProperties, createContext } from "./vendor/react";
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
@@ -11,7 +11,7 @@ export type DragState = {
   initialLayout: number[];
 };
 
-export const PanelGroupContext = createContext<{
+export type TPanelGroupContext = {
   collapsePanel: (panelData: PanelData) => void;
   direction: "horizontal" | "vertical";
   dragState: DragState | null;
@@ -24,12 +24,18 @@ export const PanelGroupContext = createContext<{
   groupId: string;
   isPanelCollapsed: (panelData: PanelData) => boolean;
   isPanelExpanded: (panelData: PanelData) => boolean;
+  reevaluatePanelConstraints: (
+    panelData: PanelData,
+    prevConstraints: PanelConstraints
+  ) => void;
   registerPanel: (panelData: PanelData) => void;
   registerResizeHandle: (dragHandleId: string) => ResizeHandler;
   resizePanel: (panelData: PanelData, size: number) => void;
   startDragging: (dragHandleId: string, event: ResizeEvent) => void;
   stopDragging: () => void;
   unregisterPanel: (panelData: PanelData) => void;
-} | null>(null);
+  panelGroupElement: ParentNode | null;
+};
+export const PanelGroupContext = createContext<TPanelGroupContext | null>(null);
 
 PanelGroupContext.displayName = "PanelGroupContext";

package/src/PanelResizeHandle.test.tsx

@@ -7,12 +7,12 @@ import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
   let root: Root;
+  let container: HTMLElement;
 
   beforeEach(() => {
     // @ts-expect-error
     global.IS_REACT_ACT_ENVIRONMENT = true;
-
-    const container = document.createElement("div");
+    container = document.createElement("div");
     document.body.appendChild(container);
 
     expectedWarnings = [];
@@ -59,7 +59,7 @@ describe("PanelResizeHandle", () => {
       );
     });
 
-    const element = getResizeHandleElement("handle");
+    const element = getResizeHandleElement("handle", container);
     assert(element);
     expect(element.tabIndex).toBe(123);
     expect(element.getAttribute("data-test-name")).toBe("foo");

package/src/PanelResizeHandle.ts

@@ -4,8 +4,8 @@ import {
   CSSProperties,
   HTMLAttributes,
   PropsWithChildren,
+  ReactElement,
   MouseEvent as ReactMouseEvent,
-  ReactNode,
   TouchEvent,
   useCallback,
   useContext,
@@ -49,7 +49,7 @@ export function PanelResizeHandle({
   tabIndex = 0,
   tagName: Type = "div",
   ...rest
-}: PanelResizeHandleProps): ReactNode {
+}: PanelResizeHandleProps): ReactElement {
   const elementRef = useRef<HTMLElement>(null);
 
   // Use a ref to guard against users passing inline props
@@ -74,6 +74,7 @@ export function PanelResizeHandle({
     registerResizeHandle,
     startDragging,
     stopDragging,
+    panelGroupElement,
   } = panelGroupContext;
 
   const resizeHandleId = useUniqueId(idFromProps);
@@ -151,6 +152,7 @@ export function PanelResizeHandle({
     disabled,
     handleId: resizeHandleId,
     resizeHandler,
+    panelGroupElement,
   });
 
   const style: CSSProperties = {

package/src/hooks/useWindowSplitterBehavior.ts

@@ -11,17 +11,19 @@ export function useWindowSplitterResizeHandlerBehavior({
   disabled,
   handleId,
   resizeHandler,
+  panelGroupElement,
 }: {
   disabled: boolean;
   handleId: string;
   resizeHandler: ResizeHandler | null;
+  panelGroupElement: ParentNode | null;
 }): void {
   useEffect(() => {
-    if (disabled || resizeHandler == null) {
+    if (disabled || resizeHandler == null || panelGroupElement == null) {
       return;
     }
 
-    const handleElement = getResizeHandleElement(handleId);
+    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
     if (handleElement == null) {
       return;
     }
@@ -49,8 +51,15 @@ export function useWindowSplitterResizeHandlerBehavior({
           const groupId = handleElement.getAttribute("data-panel-group-id");
           assert(groupId);
 
-          const handles = getResizeHandleElementsForGroup(groupId);
-          const index = getResizeHandleElementIndex(groupId, handleId);
+          const handles = getResizeHandleElementsForGroup(
+            groupId,
+            panelGroupElement
+          );
+          const index = getResizeHandleElementIndex(
+            groupId,
+            handleId,
+            panelGroupElement
+          );
 
           assert(index !== null);
 
@@ -74,5 +83,5 @@ export function useWindowSplitterResizeHandlerBehavior({
     return () => {
       handleElement.removeEventListener("keydown", onKeyDown);
     };
-  }, [disabled, handleId, resizeHandler]);
+  }, [panelGroupElement, disabled, handleId, resizeHandler]);
 }

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -20,6 +20,7 @@ export function useWindowSplitterPanelGroupBehavior({
   groupId,
   layout,
   panelDataArray,
+  panelGroupElement,
   setLayout,
 }: {
   committedValuesRef: RefObject<{
@@ -31,6 +32,7 @@ export function useWindowSplitterPanelGroupBehavior({
   groupId: string;
   layout: number[];
   panelDataArray: PanelData[];
+  panelGroupElement: ParentNode | null;
   setLayout: (sizes: number[]) => void;
 }): void {
   const devWarningsRef = useRef<{
@@ -40,7 +42,13 @@ export function useWindowSplitterPanelGroupBehavior({
   });
 
   useIsomorphicLayoutEffect(() => {
-    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
+    if (!panelGroupElement) {
+      return;
+    }
+    const resizeHandleElements = getResizeHandleElementsForGroup(
+      groupId,
+      panelGroupElement
+    );
 
     for (let index = 0; index < panelDataArray.length - 1; index++) {
       const { valueMax, valueMin, valueNow } = calculateAriaValues({
@@ -90,18 +98,20 @@ export function useWindowSplitterPanelGroupBehavior({
         resizeHandleElement.removeAttribute("aria-valuenow");
       });
     };
-  }, [groupId, layout, panelDataArray]);
+  }, [groupId, layout, panelDataArray, panelGroupElement]);
 
   useEffect(() => {
+    if (!panelGroupElement) {
+      return;
+    }
     const eagerValues = eagerValuesRef.current;
     assert(eagerValues);
 
     const { panelDataArray } = eagerValues;
-
-    const groupElement = getPanelGroupElement(groupId);
+    const groupElement = getPanelGroupElement(groupId, panelGroupElement);
     assert(groupElement != null, `No group found for id "${groupId}"`);
 
-    const handles = getResizeHandleElementsForGroup(groupId);
+    const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
     assert(handles);
 
     const cleanupFunctions = handles.map((handle) => {
@@ -111,7 +121,8 @@ export function useWindowSplitterPanelGroupBehavior({
       const [idBefore, idAfter] = getResizeHandlePanelIds(
         groupId,
         handleId,
-        panelDataArray
+        panelDataArray,
+        panelGroupElement
       );
       if (idBefore == null || idAfter == null) {
         return () => {};
@@ -150,7 +161,11 @@ export function useWindowSplitterPanelGroupBehavior({
                   panelConstraints: panelDataArray.map(
                     (panelData) => panelData.constraints
                   ),
-                  pivotIndices: determinePivotIndices(groupId, handleId),
+                  pivotIndices: determinePivotIndices(
+                    groupId,
+                    handleId,
+                    panelGroupElement
+                  ),
                   trigger: "keyboard",
                 });
                 if (layout !== nextLayout) {
@@ -174,6 +189,7 @@ export function useWindowSplitterPanelGroupBehavior({
       cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
     };
   }, [
+    panelGroupElement,
     committedValuesRef,
     eagerValuesRef,
     groupId,

package/src/index.ts

@@ -2,8 +2,6 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 import { assert } from "./utils/assert";
-import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
-import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
@@ -53,8 +51,6 @@ export {
   assert,
 
   // DOM helpers
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,

package/src/utils/calculateDeltaPercentage.ts

@@ -9,7 +9,8 @@ export function calculateDeltaPercentage(
   dragHandleId: string,
   direction: Direction,
   initialDragState: DragState | null,
-  keyboardResizeBy: number | null
+  keyboardResizeBy: number | null,
+  panelGroupElement: HTMLElement
 ): number {
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
@@ -55,7 +56,8 @@ export function calculateDeltaPercentage(
       event,
       dragHandleId,
       direction,
-      initialDragState
+      initialDragState,
+      panelGroupElement
     );
   }
 }

package/src/utils/calculateDragOffsetPercentage.ts

@@ -9,11 +9,12 @@ export function calculateDragOffsetPercentage(
   event: ResizeEvent,
   dragHandleId: string,
   direction: Direction,
-  initialDragState: DragState
+  initialDragState: DragState,
+  panelGroupElement: HTMLElement
 ): number {
   const isHorizontal = direction === "horizontal";
 
-  const handleElement = getResizeHandleElement(dragHandleId);
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
   assert(handleElement);
 
   const groupId = handleElement.getAttribute("data-panel-group-id");
@@ -23,7 +24,7 @@ export function calculateDragOffsetPercentage(
 
   const cursorPosition = getResizeEventCursorPosition(direction, event);
 
-  const groupElement = getPanelGroupElement(groupId);
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
   assert(groupElement);
 
   const groupRect = groupElement.getBoundingClientRect();

package/src/utils/determinePivotIndices.ts

@@ -2,9 +2,14 @@ import { getResizeHandleElementIndex } from "../utils/dom/getResizeHandleElement
 
 export function determinePivotIndices(
   groupId: string,
-  dragHandleId: string
+  dragHandleId: string,
+  panelGroupElement: ParentNode
 ): [indexBefore: number, indexAfter: number] {
-  const index = getResizeHandleElementIndex(groupId, dragHandleId);
+  const index = getResizeHandleElementIndex(
+    groupId,
+    dragHandleId,
+    panelGroupElement
+  );
 
   return index != null ? [index, index + 1] : [-1, -1];
 }

package/src/utils/dom/getPanelElement.ts

@@ -1,5 +1,8 @@
-export function getPanelElement(id: string): HTMLElement | null {
-  const element = document.querySelector(`[data-panel-id="${id}"]`);
+export function getPanelElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document
+): HTMLElement | null {
+  const element = scope.querySelector(`[data-panel-id="${id}"]`);
   if (element) {
     return element as HTMLElement;
   }

package/src/utils/dom/getPanelElementsForGroup.ts

@@ -1,5 +1,8 @@
-export function getPanelElementsForGroup(groupId: string): HTMLElement[] {
+export function getPanelElementsForGroup(
+  groupId: string,
+  scope: ParentNode | HTMLElement = document
+): HTMLElement[] {
   return Array.from(
-    document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`)
+    scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`)
   );
 }

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,5 +1,17 @@
-export function getPanelGroupElement(id: string): HTMLElement | null {
-  const element = document.querySelector(
+export function getPanelGroupElement(
+  id: string,
+  rootElement: ParentNode | HTMLElement = document
+): HTMLElement | null {
+  //If the root element is the PanelGroup
+  if (
+    rootElement instanceof HTMLElement &&
+    (rootElement as HTMLElement)?.dataset?.panelGroupId == id
+  ) {
+    return rootElement as HTMLElement;
+  }
+
+  //Else query children
+  const element = rootElement.querySelector(
     `[data-panel-group][data-panel-group-id="${id}"]`
   );
   if (element) {

package/src/utils/dom/getResizeHandleElement.ts

@@ -1,7 +1,8 @@
-export function getResizeHandleElement(id: string): HTMLElement | null {
-  const element = document.querySelector(
-    `[data-panel-resize-handle-id="${id}"]`
-  );
+export function getResizeHandleElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document
+): HTMLElement | null {
+  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element as HTMLElement;
   }

package/src/utils/dom/getResizeHandleElementIndex.ts

@@ -2,9 +2,10 @@ import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGro
 
 export function getResizeHandleElementIndex(
   groupId: string,
-  id: string
+  id: string,
+  scope: ParentNode | HTMLElement = document
 ): number | null {
-  const handles = getResizeHandleElementsForGroup(groupId);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(
     (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
   );

package/src/utils/dom/getResizeHandleElementsForGroup.ts

@@ -1,8 +1,9 @@
 export function getResizeHandleElementsForGroup(
-  groupId: string
+  groupId: string,
+  scope: ParentNode | HTMLElement = document
 ): HTMLElement[] {
   return Array.from(
-    document.querySelectorAll(
+    scope.querySelectorAll(
       `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
     )
   );

package/src/utils/dom/getResizeHandlePanelIds.ts

@@ -5,10 +5,11 @@ import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGro
 export function getResizeHandlePanelIds(
   groupId: string,
   handleId: string,
-  panelsArray: PanelData[]
+  panelsArray: PanelData[],
+  scope: ParentNode | HTMLElement = document
 ): [idBefore: string | null, idAfter: string | null] {
-  const handle = getResizeHandleElement(handleId);
-  const handles = getResizeHandleElementsForGroup(groupId);
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handle ? handles.indexOf(handle) : -1;
 
   const idBefore: string | null = panelsArray[index]?.id ?? null;