react-resizable-panels 1.0.7 → 1.0.8

package/dist/react-resizable-panels.node.esm.js

@@ -430,41 +430,48 @@ function adjustLayoutByDelta({
   return nextLayout;
 }
 
-function getResizeHandleElementsForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+function getResizeHandleElementsForGroup(groupId, panelGroupElement) {
+  return Array.from(panelGroupElement.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 
-function getResizeHandleElementIndex(groupId, id) {
-  const handles = getResizeHandleElementsForGroup(groupId);
+function getResizeHandleElementIndex(groupId, id, panelGroupElement) {
+  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
   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) {
+  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, panelGroupElement) {
+  const element = panelGroupElement.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, panelGroupElement) {
   var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
-  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 = (_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;
@@ -479,25 +486,29 @@ function useWindowSplitterPanelGroupBehavior({
   groupId,
   layout,
   panelDataArray,
+  panelGroupElement,
   setLayout
 }) {
   useRef({
     didWarnAboutMissingResizeHandle: false
   });
   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 () => {};
       }
@@ -524,7 +535,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) {
@@ -544,7 +555,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) {
@@ -582,9 +593,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);
@@ -592,7 +603,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;
@@ -602,7 +613,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;
@@ -639,7 +650,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);
   }
 }
 
@@ -944,6 +955,7 @@ function PanelGroupWithForwardedRef({
   ...rest
 }) {
   const groupId = useUniqueId(idFromProps);
+  const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
@@ -1004,7 +1016,8 @@ function PanelGroupWithForwardedRef({
     groupId,
     layout,
     panelDataArray: eagerValuesRef.current.panelDataArray,
-    setLayout
+    setLayout,
+    panelGroupElement: panelGroupElementRef.current
   });
   useEffect(() => {
     const {
@@ -1199,6 +1212,10 @@ function PanelGroupWithForwardedRef({
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
+      const panelGroupElement = panelGroupElementRef.current;
+      if (!panelGroupElement) {
+        return () => null;
+      }
       const {
         direction,
         dragState,
@@ -1213,8 +1230,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;
       }
@@ -1309,7 +1326,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({
@@ -1354,7 +1374,8 @@ function PanelGroupWithForwardedRef({
     resizePanel,
     startDragging,
     stopDragging,
-    unregisterPanel
+    unregisterPanel,
+    panelGroupElement: panelGroupElementRef.current
   }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
   const style = {
     display: "flex",
@@ -1373,6 +1394,7 @@ function PanelGroupWithForwardedRef({
       ...style,
       ...styleFromProps
     },
+    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -1407,13 +1429,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;
     }
@@ -1438,8 +1461,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];
@@ -1452,7 +1475,7 @@ function useWindowSplitterResizeHandlerBehavior({
     return () => {
       handleElement.removeEventListener("keydown", onKeyDown);
     };
-  }, [disabled, handleId, resizeHandler]);
+  }, [panelGroupElement, disabled, handleId, resizeHandler]);
 }
 
 function PanelResizeHandle({
@@ -1485,7 +1508,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;
@@ -1544,7 +1568,8 @@ function PanelResizeHandle({
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,
-    resizeHandler
+    resizeHandler,
+    panelGroupElement
   });
   const style = {
     cursor: getCursorStyle(direction),
@@ -1600,13 +1625,12 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-function calculateAvailablePanelSizeInPixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
+function calculateAvailablePanelSizeInPixels(groupId, panelGroupElement) {
   if (panelGroupElement == null) {
     return NaN;
   }
   const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  const resizeHandles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
   if (direction === "horizontal") {
     return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
       return accumulated + handle.offsetWidth;
@@ -1618,13 +1642,9 @@ function calculateAvailablePanelSizeInPixels(groupId) {
   }
 }
 
-function getAvailableGroupSizePixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
+function getAvailableGroupSizePixels(groupId, panelGroupElement) {
   const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  const resizeHandles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
   if (direction === "horizontal") {
     return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
       return accumulated + handle.offsetWidth;
@@ -1636,16 +1656,16 @@ function getAvailableGroupSizePixels(groupId) {
   }
 }
 
-function getPanelElement(id) {
-  const element = document.querySelector(`[data-panel-id="${id}"]`);
+function getPanelElement(id, panelGroupElement) {
+  const element = panelGroupElement.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, panelGroupElement) {
+  return Array.from(panelGroupElement.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
 export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.test.tsx

@@ -12,6 +12,7 @@ import { createRef } from "./vendor/react";
 describe("PanelGroup", () => {
   let expectedWarnings: string[] = [];
   let root: Root;
+  let container: HTMLElement;
   let uninstallMockOffsetWidthAndHeight: () => void;
 
   function expectWarning(expectedMessage: string) {
@@ -24,7 +25,7 @@ describe("PanelGroup", () => {
 
     uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
 
-    const container = document.createElement("div");
+    container = document.createElement("div");
     document.body.appendChild(container);
 
     expectedWarnings = [];
@@ -258,7 +259,7 @@ describe("PanelGroup", () => {
       );
     });
 
-    const element = getPanelElement("panel");
+    const element = getPanelElement("panel", container);
     assert(element);
     expect(element.tabIndex).toBe(123);
     expect(element.getAttribute("data-test-name")).toBe("foo");

package/src/Panel.ts

@@ -7,7 +7,7 @@ import {
   ForwardedRef,
   HTMLAttributes,
   PropsWithChildren,
-  ReactNode,
+  ReactElement,
   createElement,
   forwardRef,
   useContext,
@@ -93,7 +93,7 @@ export function PanelWithForwardedRef({
   ...rest
 }: PanelProps & {
   forwardedRef: ForwardedRef<ImperativePanelHandle>;
-}): ReactNode {
+}): ReactElement {
   const context = useContext(PanelGroupContext);
   if (context === null) {
     throw Error(

package/src/PanelGroup.test.tsx

@@ -15,6 +15,7 @@ import { createRef } from "./vendor/react";
 describe("PanelGroup", () => {
   let expectedWarnings: string[] = [];
   let root: Root;
+  let container: HTMLElement;
   let uninstallMockOffsetWidthAndHeight: () => void;
 
   function expectWarning(expectedMessage: string) {
@@ -28,7 +29,7 @@ describe("PanelGroup", () => {
     // JSDom doesn't support element sizes
     uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
 
-    const container = document.createElement("div");
+    container = document.createElement("div");
     document.body.appendChild(container);
 
     expectedWarnings = [];
@@ -124,7 +125,7 @@ describe("PanelGroup", () => {
       );
     });
 
-    const element = getPanelGroupElement("group");
+    const element = getPanelGroupElement("group", container);
     assert(element);
     expect(element.tabIndex).toBe(123);
     expect(element.getAttribute("data-test-name")).toBe("foo");

package/src/PanelGroup.ts

@@ -1,6 +1,11 @@
 import { isDevelopment } from "#is-development";
 import { PanelData } from "./Panel";
-import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
+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;
@@ -709,8 +723,13 @@ function PanelGroupWithForwardedRef({
     (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 +770,25 @@ 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,
+        registerPanel,
+        registerResizeHandle,
+        resizePanel,
+        startDragging,
+        stopDragging,
+        unregisterPanel,
+        panelGroupElement: panelGroupElementRef.current,
+      }) satisfies TPanelGroupContext,
     [
       collapsePanel,
       dragState,
@@ -800,14 +821,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,

package/src/PanelGroupContext.ts

@@ -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;
@@ -30,6 +30,8 @@ export const PanelGroupContext = createContext<{
   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]);
 }