react-resizable-panels 1.0.7 → 1.0.8

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,5 +1,8 @@
-export function getPanelElement(id: string): HTMLElement | 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 HTMLElement;
   }

package/src/utils/dom/getPanelElementsForGroup.ts

@@ -1,5 +1,10 @@
-export function getPanelElementsForGroup(groupId: string): HTMLElement[] {
+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,5 +1,17 @@
-export function getPanelGroupElement(id: string): HTMLElement | 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) {

package/src/utils/dom/getResizeHandleElement.ts

@@ -1,5 +1,8 @@
-export function getResizeHandleElement(id: string): HTMLElement | 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) {

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
+  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,