react-resizable-panels 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.0.9
+
+- DOM util methods scope param defaults to `document` (#262)
+- Updating a `Panel`'s pixel constraints will trigger revalidation of the `Panel`'s size (#266)
+
+## 1.0.8
+
+- Update component signature to declare `ReactElement` return type (rather than `ReactNode`) (#256)
+- Update `Panel` dev warning to avoid warning when `defaultSize === collapsedSize` for collapsible panels (#257)
+- Support shadow dom by removing direct references to / dependencies on the root `document` (#204)
+
 ## 1.0.7
 
 - Narrow `tagName` prop to only allow `HTMLElement` names (rather than the broader `Element` type) (#251)

package/README.md

@@ -52,21 +52,22 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 ### `Panel`
 
-| prop            | type                            | description                                                                                   |
-| :-------------- | :------------------------------ | :-------------------------------------------------------------------------------------------- |
-| `children`      | `ReactNode`                     | Arbitrary React element(s)                                                                    |
-| `className`     | `?string`                       | Class name to attach to root element                                                          |
-| `collapsedSize` | `?number=0`                     | Panel should collapse to this size                                                            |
-| `collapsible`   | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`                                       |
-| `defaultSize`   | `?number`                       | Initial size of panel (numeric value between 1-100)                                           |
-| `id`            | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided                       |
-| `maxSize`       | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
-| `minSize`       | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
-| `onCollapse`    | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state        |
-| `onResize`      | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
-| `order`         | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels           |
-| `style`         | `?CSSProperties`                | CSS style to attach to root element                                                           |
-| `tagName`       | `?string = "div"`               | HTML element tag name for root element                                                        |
+| prop            | type                      | description                                                                                   |
+| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`               | Arbitrary React element(s)                                                                    |
+| `className`     | `?string`                 | Class name to attach to root element                                                          |
+| `collapsedSize` | `?number=0`               | Panel should collapse to this size                                                            |
+| `collapsible`   | `?boolean=false`          | Panel should collapse when resized beyond its `minSize`                                       |
+| `defaultSize`   | `?number`                 | Initial size of panel (numeric value between 1-100)                                           |
+| `id`            | `?string`                 | Panel id (unique within group); falls back to `useId` when not provided                       |
+| `maxSize`       | `?number = 100`           | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
+| `minSize`       | `?number = 10`            | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
+| `onCollapse`    | `?() => void`             | Called when panel is collapsed                                                                |
+| `onExpande`     | `?() => void`             | Called when panel is expanded                                                                 |
+| `onResize`      | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
+| `order`         | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels           |
+| `style`         | `?CSSProperties`          | CSS style to attach to root element                                                           |
+| `tagName`       | `?string = "div"`         | HTML element tag name for root element                                                        |
 
 <sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
 

package/dist/declarations/src/Panel.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
+import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (size: number, prevSize: number | undefined) => void;
@@ -47,7 +47,7 @@ export type PanelProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"
 }>;
 export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSize, collapsible, defaultSize, forwardedRef, id: idFromProps, maxSize, minSize, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, ...rest }: PanelProps & {
     forwardedRef: ForwardedRef<ImperativePanelHandle>;
-}): ReactNode;
+}): ReactElement;
 export declare namespace PanelWithForwardedRef {
     var displayName: string;
 }
@@ -66,5 +66,5 @@ export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLA
     style?: object | undefined;
     tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: ReactNode;
+    children?: import("react").ReactNode;
 } & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist/declarations/src/PanelGroup.d.ts

@@ -1,5 +1,5 @@
 import { Direction } from "./types.js";
-import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
     getLayout: () => number[];
@@ -32,5 +32,5 @@ export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<
     style?: CSSProperties | undefined;
     tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: ReactNode;
+    children?: import("react").ReactNode;
 } & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
     className?: string;
@@ -9,7 +9,7 @@ export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNam
     tabIndex?: number;
     tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactNode;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

package/dist/declarations/src/index.d.ts

@@ -2,8 +2,6 @@ import { Panel } from "./Panel.js";
 import { PanelGroup } from "./PanelGroup.js";
 import { PanelResizeHandle } from "./PanelResizeHandle.js";
 import { assert } from "./utils/assert.js";
-import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels.js";
-import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels.js";
 import { getPanelElement } from "./utils/dom/getPanelElement.js";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement.js";
@@ -14,4 +12,4 @@ import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds.js"
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

package/dist/declarations/src/utils/dom/getPanelElement.d.ts

@@ -1 +1 @@
-export declare function getPanelElement(id: string): HTMLElement | null;
+export declare function getPanelElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getPanelElementsForGroup.d.ts

@@ -1 +1 @@
-export declare function getPanelElementsForGroup(groupId: string): HTMLElement[];
+export declare function getPanelElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

package/dist/declarations/src/utils/dom/getPanelGroupElement.d.ts

@@ -1 +1 @@
-export declare function getPanelGroupElement(id: string): HTMLElement | null;
+export declare function getPanelGroupElement(id: string, rootElement?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElement.d.ts

@@ -1 +1 @@
-export declare function getResizeHandleElement(id: string): HTMLElement | null;
+export declare function getResizeHandleElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementIndex.d.ts

@@ -1 +1 @@
-export declare function getResizeHandleElementIndex(groupId: string, id: string): number | null;
+export declare function getResizeHandleElementIndex(groupId: string, id: string, scope?: ParentNode | HTMLElement): number | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementsForGroup.d.ts

@@ -1 +1 @@
-export declare function getResizeHandleElementsForGroup(groupId: string): HTMLElement[];
+export declare function getResizeHandleElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

package/dist/declarations/src/utils/dom/getResizeHandlePanelIds.d.ts

@@ -1,2 +1,2 @@
 import { PanelData } from "../../Panel.js";
-export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[]): [idBefore: string | null, idAfter: string | null];
+export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[], scope?: ParentNode | HTMLElement): [idBefore: string | null, idAfter: string | null];

package/dist/declarations/src/vendor/react.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent } from "react";
+import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent } from "react";
 declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
 declare const useId: () => string;
 export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
-export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent, };
+export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent, };

package/dist/react-resizable-panels.browser.cjs.js

@@ -91,6 +91,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -121,6 +122,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -132,6 +136,12 @@ function PanelWithForwardedRef({
     constraints.defaultSize = defaultSize;
     constraints.maxSize = maxSize;
     constraints.minSize = minSize;
+
+    // If constraints have changed, we should revisit panel sizes.
+    // This is uncommon but may happen if people are trying to implement pixel based constraints.
+    if (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) {
+      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
+    }
   });
   useIsomorphicLayoutEffect(() => {
     const panelData = panelDataRef.current;
@@ -519,41 +529,48 @@ function calculateAriaValues({
   };
 }
 
-function getResizeHandleElementsForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+function getResizeHandleElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 
-function getResizeHandleElementIndex(groupId, id) {
-  const handles = getResizeHandleElementsForGroup(groupId);
+function getResizeHandleElementIndex(groupId, id, scope = document) {
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
   return index !== null && index !== void 0 ? index : null;
 }
 
-function determinePivotIndices(groupId, dragHandleId) {
-  const index = getResizeHandleElementIndex(groupId, dragHandleId);
+function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement);
   return index != null ? [index, index + 1] : [-1, -1];
 }
 
-function getPanelGroupElement(id) {
-  const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
+function getPanelGroupElement(id, rootElement = document) {
+  var _dataset;
+  //If the root element is the PanelGroup
+  if (rootElement instanceof HTMLElement && (rootElement === null || rootElement === void 0 ? void 0 : (_dataset = rootElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.panelGroupId) == id) {
+    return rootElement;
+  }
+
+  //Else query children
+  const element = rootElement.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getResizeHandleElement(id) {
-  const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+function getResizeHandleElement(id, scope = document) {
+  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
   var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
-  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 = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
   const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
@@ -568,13 +585,17 @@ function useWindowSplitterPanelGroupBehavior({
   groupId,
   layout,
   panelDataArray,
+  panelGroupElement,
   setLayout
 }) {
   useRef({
     didWarnAboutMissingResizeHandle: false
   });
   useIsomorphicLayoutEffect(() => {
-    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
+    if (!panelGroupElement) {
+      return;
+    }
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
     for (let index = 0; index < panelDataArray.length - 1; index++) {
       const {
         valueMax,
@@ -603,21 +624,24 @@ 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 => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
       assert(handleId);
-      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
         return () => {};
       }
@@ -644,7 +668,7 @@ function useWindowSplitterPanelGroupBehavior({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
                     layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
-                    pivotIndices: determinePivotIndices(groupId, handleId),
+                    pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
                     trigger: "keyboard"
                   });
                   if (layout !== nextLayout) {
@@ -664,7 +688,7 @@ function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
     };
-  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
+  }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
 function areEqual(arrayA, arrayB) {
@@ -702,9 +726,9 @@ function getResizeEventCursorPosition(direction, event) {
   }
 }
 
-function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
   const isHorizontal = direction === "horizontal";
-  const handleElement = getResizeHandleElement(dragHandleId);
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
   assert(handleElement);
   const groupId = handleElement.getAttribute("data-panel-group-id");
   assert(groupId);
@@ -712,7 +736,7 @@ function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDr
     initialCursorPosition
   } = initialDragState;
   const cursorPosition = getResizeEventCursorPosition(direction, event);
-  const groupElement = getPanelGroupElement(groupId);
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
   assert(groupElement);
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
@@ -722,7 +746,7 @@ function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDr
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
     let delta = 0;
@@ -759,7 +783,7 @@ function calculateDeltaPercentage(event, dragHandleId, direction, initialDragSta
     if (initialDragState == null) {
       return 0;
     }
-    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
+    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement);
   }
 }
 
@@ -1111,6 +1135,7 @@ function PanelGroupWithForwardedRef({
   ...rest
 }) {
   const groupId = useUniqueId(idFromProps);
+  const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
@@ -1179,7 +1204,8 @@ function PanelGroupWithForwardedRef({
     groupId,
     layout,
     panelDataArray: eagerValuesRef.current.panelDataArray,
-    setLayout
+    setLayout,
+    panelGroupElement: panelGroupElementRef.current
   });
   useEffect(() => {
     const {
@@ -1422,6 +1448,10 @@ function PanelGroupWithForwardedRef({
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
+      const panelGroupElement = panelGroupElementRef.current;
+      if (!panelGroupElement) {
+        return () => null;
+      }
       const {
         direction,
         dragState,
@@ -1436,8 +1466,8 @@ function PanelGroupWithForwardedRef({
       const {
         initialLayout
       } = dragState !== null && dragState !== void 0 ? dragState : {};
-      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
-      let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy);
+      const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
       if (delta === 0) {
         return;
       }
@@ -1525,6 +1555,37 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    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, event) => {
     const {
       direction
@@ -1532,7 +1593,10 @@ function PanelGroupWithForwardedRef({
     const {
       layout
     } = eagerValuesRef.current;
-    const handleElement = getResizeHandleElement(dragHandleId);
+    if (!panelGroupElementRef.current) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
     assert(handleElement);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
@@ -1572,13 +1636,15 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
     startDragging,
     stopDragging,
-    unregisterPanel
-  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
+    unregisterPanel,
+    panelGroupElement: panelGroupElementRef.current
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
   const style = {
     display: "flex",
     flexDirection: direction === "horizontal" ? "row" : "column",
@@ -1596,6 +1662,7 @@ function PanelGroupWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -1612,14 +1679,12 @@ function findPanelDataIndex(panelDataArray, panelData) {
   return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
 }
 function panelDataHelper(panelDataArray, panelData, layout) {
-  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 ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   const panelSize = layout[panelIndex];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
     pivotIndices
   };
@@ -1630,13 +1695,14 @@ function panelDataHelper(panelDataArray, panelData, layout) {
 function useWindowSplitterResizeHandlerBehavior({
   disabled,
   handleId,
-  resizeHandler
+  resizeHandler,
+  panelGroupElement
 }) {
   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;
     }
@@ -1661,8 +1727,8 @@ function useWindowSplitterResizeHandlerBehavior({
             event.preventDefault();
             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);
             const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
             const nextHandle = handles[nextIndex];
@@ -1675,7 +1741,7 @@ function useWindowSplitterResizeHandlerBehavior({
     return () => {
       handleElement.removeEventListener("keydown", onKeyDown);
     };
-  }, [disabled, handleId, resizeHandler]);
+  }, [panelGroupElement, disabled, handleId, resizeHandler]);
 }
 
 function PanelResizeHandle({
@@ -1708,7 +1774,8 @@ function PanelResizeHandle({
     groupId,
     registerResizeHandle,
     startDragging,
-    stopDragging
+    stopDragging,
+    panelGroupElement
   } = panelGroupContext;
   const resizeHandleId = useUniqueId(idFromProps);
   const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
@@ -1767,7 +1834,8 @@ function PanelResizeHandle({
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,
-    resizeHandler
+    resizeHandler,
+    panelGroupElement
   });
   const style = {
     cursor: getCursorStyle(direction),
@@ -1823,60 +1891,22 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-function calculateAvailablePanelSizeInPixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
-  if (direction === "horizontal") {
-    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetWidth;
-    }, 0);
-  } else {
-    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetHeight;
-    }, 0);
-  }
-}
-
-function getAvailableGroupSizePixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
-  if (direction === "horizontal") {
-    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetWidth;
-    }, 0);
-  } else {
-    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetHeight;
-    }, 0);
-  }
-}
-
-function getPanelElement(id) {
-  const element = document.querySelector(`[data-panel-id="${id}"]`);
+function getPanelElement(id, scope = document) {
+  const element = scope.querySelector(`[data-panel-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getPanelElementsForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+function getPanelElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;

package/dist/react-resizable-panels.browser.cjs.mjs

@@ -3,8 +3,6 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,