react-resizable-panels 1.0.6 → 1.0.8

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

@@ -2,9 +2,9 @@ import useUniqueId from "./hooks/useUniqueId";
 import {
   createElement,
   CSSProperties,
-  ElementType,
   HTMLAttributes,
   PropsWithChildren,
+  ReactElement,
   MouseEvent as ReactMouseEvent,
   TouchEvent,
   useCallback,
@@ -25,7 +25,10 @@ import { getCursorStyle } from "./utils/cursor";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
-export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> &
+export type PanelResizeHandleProps = Omit<
+  HTMLAttributes<keyof HTMLElementTagNameMap>,
+  "id"
+> &
   PropsWithChildren<{
     className?: string;
     disabled?: boolean;
@@ -33,7 +36,7 @@ export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> &
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
     tabIndex?: number;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 export function PanelResizeHandle({
@@ -46,8 +49,8 @@ export function PanelResizeHandle({
   tabIndex = 0,
   tagName: Type = "div",
   ...rest
-}: PanelResizeHandleProps) {
-  const divElementRef = useRef<HTMLDivElement>(null);
+}: PanelResizeHandleProps): ReactElement {
+  const elementRef = useRef<HTMLElement>(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef<{
@@ -71,6 +74,7 @@ export function PanelResizeHandle({
     registerResizeHandle,
     startDragging,
     stopDragging,
+    panelGroupElement,
   } = panelGroupContext;
 
   const resizeHandleId = useUniqueId(idFromProps);
@@ -85,9 +89,9 @@ export function PanelResizeHandle({
   const stopDraggingAndBlur = useCallback(() => {
     // Clicking on the drag handle shouldn't leave it focused;
     // That would cause the PanelGroup to think it was still active.
-    const divElement = divElementRef.current;
-    assert(divElement);
-    divElement.blur();
+    const element = elementRef.current;
+    assert(element);
+    element.blur();
 
     stopDragging();
 
@@ -119,10 +123,10 @@ export function PanelResizeHandle({
       resizeHandler(event);
     };
 
-    const divElement = divElementRef.current;
-    assert(divElement);
+    const element = elementRef.current;
+    assert(element);
 
-    const targetDocument = divElement.ownerDocument;
+    const targetDocument = element.ownerDocument;
 
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
@@ -148,6 +152,7 @@ export function PanelResizeHandle({
     disabled,
     handleId: resizeHandleId,
     resizeHandler,
+    panelGroupElement,
   });
 
   const style: CSSProperties = {
@@ -186,7 +191,7 @@ export function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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);
 
@@ -62,7 +71,7 @@ export function useWindowSplitterResizeHandlerBehavior({
             ? index + 1
             : 0;
 
-          const nextHandle = handles[nextIndex] as HTMLDivElement;
+          const nextHandle = handles[nextIndex] as HTMLElement;
           nextHandle.focus();
 
           break;
@@ -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/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/calculateAvailablePanelSizeInPixels.ts

@@ -1,8 +1,10 @@
 import { getPanelGroupElement } from "./getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
 
-export function calculateAvailablePanelSizeInPixels(groupId: string): number {
-  const panelGroupElement = getPanelGroupElement(groupId);
+export function calculateAvailablePanelSizeInPixels(
+  groupId: string,
+  panelGroupElement: HTMLElement
+): number {
   if (panelGroupElement == null) {
     return NaN;
   }
@@ -10,7 +12,10 @@ export function calculateAvailablePanelSizeInPixels(groupId: string): number {
   const direction = panelGroupElement.getAttribute(
     "data-panel-group-direction"
   );
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  const resizeHandles = getResizeHandleElementsForGroup(
+    groupId,
+    panelGroupElement
+  );
   if (direction === "horizontal") {
     return (
       panelGroupElement.offsetWidth -

package/src/utils/dom/getAvailableGroupSizePixels.ts

@@ -1,16 +1,17 @@
 import { getPanelGroupElement } from "./getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
 
-export function getAvailableGroupSizePixels(groupId: string): number {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-
+export function getAvailableGroupSizePixels(
+  groupId: string,
+  panelGroupElement: HTMLElement
+): number {
   const direction = panelGroupElement.getAttribute(
     "data-panel-group-direction"
   );
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  const resizeHandles = getResizeHandleElementsForGroup(
+    groupId,
+    panelGroupElement
+  );
   if (direction === "horizontal") {
     return (
       panelGroupElement.offsetWidth -

package/src/utils/dom/getPanelElement.ts

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

package/src/utils/dom/getPanelElementsForGroup.ts

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

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,9 +1,21 @@
-export function getPanelGroupElement(id: string): HTMLDivElement | null {
-  const element = document.querySelector(
+export function getPanelGroupElement(
+  id: string,
+  rootElement: ParentNode | HTMLElement
+): 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) {
-    return element as HTMLDivElement;
+    return element as HTMLElement;
   }
   return null;
 }

package/src/utils/dom/getResizeHandleElement.ts

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

package/src/utils/dom/getResizeHandleElementIndex.ts

@@ -2,9 +2,10 @@ import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGro
 
 export function getResizeHandleElementIndex(
   groupId: string,
-  id: string
+  id: string,
+  panelGroupElement: ParentNode
 ): number | null {
-  const handles = getResizeHandleElementsForGroup(groupId);
+  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
   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
-): HTMLDivElement[] {
+  groupId: string,
+  panelGroupElement: ParentNode
+): HTMLElement[] {
   return Array.from(
-    document.querySelectorAll(
+    panelGroupElement.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[],
+  panelGroupElement: ParentNode
 ): [idBefore: string | null, idAfter: string | null] {
-  const handle = getResizeHandleElement(handleId);
-  const handles = getResizeHandleElementsForGroup(groupId);
+  const handle = getResizeHandleElement(handleId, panelGroupElement);
+  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
   const index = handle ? handles.indexOf(handle) : -1;
 
   const idBefore: string | null = panelsArray[index]?.id ?? null;

package/src/utils/validatePanelConstraints.test.ts

@@ -69,6 +69,51 @@ describe("validatePanelConstraints", () => {
       });
     }, "default size should not be less than min size");
 
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        panelConstraints: [
+          {
+            collapsedSize: 5,
+            collapsible: true,
+            defaultSize: 5,
+            minSize: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    });
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        panelConstraints: [
+          {
+            collapsedSize: 7,
+            collapsible: true,
+            defaultSize: 5,
+            minSize: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be less than min size");
+
+    verifyExpectedWarnings(() => {
+      validatePanelConstraints({
+        panelConstraints: [
+          {
+            collapsedSize: 5,
+            collapsible: false,
+            defaultSize: 5,
+            minSize: 10,
+          },
+        ],
+        panelIndex: 0,
+        panelId: "test",
+      });
+    }, "default size should not be less than min size");
+
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
         panelConstraints: [

package/src/utils/validatePanelConstraints.ts

@@ -19,6 +19,7 @@ export function validatePanelConstraints({
 
     const {
       collapsedSize = 0,
+      collapsible = false,
       defaultSize,
       maxSize = 100,
       minSize = 0,
@@ -33,7 +34,10 @@ export function validatePanelConstraints({
     if (defaultSize != null) {
       if (defaultSize < 0) {
         warnings.push("default size should not be less than 0");
-      } else if (defaultSize < minSize) {
+      } else if (
+        defaultSize < minSize &&
+        (!collapsible || defaultSize !== collapsedSize)
+      ) {
         warnings.push("default size should not be less than min size");
       }
 

package/src/vendor/react.ts

@@ -15,6 +15,7 @@ import type {
   HTMLAttributes,
   MouseEvent,
   PropsWithChildren,
+  ReactElement,
   ReactNode,
   RefObject,
   TouchEvent,
@@ -61,6 +62,7 @@ export type {
   HTMLAttributes,
   MouseEvent,
   PropsWithChildren,
+  ReactElement,
   ReactNode,
   RefObject,
   TouchEvent,