react-resizable-panels 1.0.5 → 1.0.7

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

@@ -1566,7 +1566,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1594,9 +1594,9 @@ 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();
     const {
       onDragging
@@ -1623,9 +1623,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1682,7 +1682,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -1700,4 +1700,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+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}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

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

@@ -1667,7 +1667,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1695,9 +1695,9 @@ 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();
     const {
       onDragging
@@ -1724,9 +1724,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1783,7 +1783,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -1801,4 +1801,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+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}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

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

@@ -1490,7 +1490,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1518,9 +1518,9 @@ 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();
     const {
       onDragging
@@ -1547,9 +1547,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1606,7 +1606,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -1624,7 +1624,64 @@ 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}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.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;
+exports.getResizeHandleElement = getResizeHandleElement;
+exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
+exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
+exports.getResizeHandlePanelIds = getResizeHandlePanelIds;

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

@@ -2,5 +2,14 @@ export {
   Panel,
   PanelGroup,
   PanelResizeHandle,
-  assert
+  assert,
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds
 } from "./react-resizable-panels.node.cjs.js";

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

@@ -1466,7 +1466,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1494,9 +1494,9 @@ 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();
     const {
       onDragging
@@ -1523,9 +1523,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1582,7 +1582,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -1600,4 +1600,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+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}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.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.5",
+  "version": "1.0.7",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.ts

@@ -4,10 +4,10 @@ import { PanelGroupContext } from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import {
-  ElementType,
   ForwardedRef,
   HTMLAttributes,
   PropsWithChildren,
+  ReactNode,
   createElement,
   forwardRef,
   useContext,
@@ -54,7 +54,10 @@ export type ImperativePanelHandle = {
   resize: (size: number) => void;
 };
 
-export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
+export type PanelProps = Omit<
+  HTMLAttributes<keyof HTMLElementTagNameMap>,
+  "id" | "onResize"
+> &
   PropsWithChildren<{
     className?: string;
     collapsedSize?: number | undefined;
@@ -68,7 +71,7 @@ export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 export function PanelWithForwardedRef({
@@ -90,7 +93,7 @@ export function PanelWithForwardedRef({
   ...rest
 }: PanelProps & {
   forwardedRef: ForwardedRef<ImperativePanelHandle>;
-}) {
+}): ReactNode {
   const context = useContext(PanelGroupContext);
   if (context === null) {
     throw Error(

package/src/PanelGroup.ts

@@ -28,10 +28,10 @@ import { validatePanelConstraints } from "./utils/validatePanelConstraints";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
 import {
   CSSProperties,
-  ElementType,
   ForwardedRef,
   HTMLAttributes,
   PropsWithChildren,
+  ReactNode,
   createElement,
   forwardRef,
   useCallback,
@@ -68,7 +68,10 @@ const defaultStorage: PanelGroupStorage = {
   },
 };
 
-export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
+export type PanelGroupProps = Omit<
+  HTMLAttributes<keyof HTMLElementTagNameMap>,
+  "id"
+> &
   PropsWithChildren<{
     autoSaveId?: string | null;
     className?: string;
@@ -78,7 +81,7 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
     onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 const debounceMap: {
@@ -100,7 +103,7 @@ function PanelGroupWithForwardedRef({
   ...rest
 }: PanelGroupProps & {
   forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
-}) {
+}): ReactNode {
   const groupId = useUniqueId(idFromProps);
 
   const [dragState, setDragState] = useState<DragState | null>(null);

package/src/PanelResizeHandle.ts

@@ -2,10 +2,10 @@ import useUniqueId from "./hooks/useUniqueId";
 import {
   createElement,
   CSSProperties,
-  ElementType,
   HTMLAttributes,
   PropsWithChildren,
   MouseEvent as ReactMouseEvent,
+  ReactNode,
   TouchEvent,
   useCallback,
   useContext,
@@ -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): ReactNode {
+  const elementRef = useRef<HTMLElement>(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef<{
@@ -85,9 +88,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 +122,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);
@@ -186,7 +189,7 @@ export function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

package/src/hooks/useWindowSplitterBehavior.ts

@@ -62,7 +62,7 @@ export function useWindowSplitterResizeHandlerBehavior({
             ? index + 1
             : 0;
 
-          const nextHandle = handles[nextIndex] as HTMLDivElement;
+          const nextHandle = handles[nextIndex] as HTMLElement;
           nextHandle.focus();
 
           break;

package/src/index.ts

@@ -2,6 +2,15 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 import { assert } from "./utils/assert";
+import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
+import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels";
+import { getPanelElement } from "./utils/dom/getPanelElement";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
+import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex";
+import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup";
+import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds";
 
 import type {
   ImperativePanelHandle,
@@ -35,11 +44,22 @@ export {
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
 
-  // Utiltiy methods
-  assert,
-
   // React components
   Panel,
   PanelGroup,
   PanelResizeHandle,
+
+  // Utility methods
+  assert,
+
+  // DOM helpers
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds,
 };

package/src/utils/dom/getPanelElement.ts

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

package/src/utils/dom/getPanelElementsForGroup.ts

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

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,9 +1,9 @@
-export function getPanelGroupElement(id: string): HTMLDivElement | null {
+export function getPanelGroupElement(id: string): HTMLElement | null {
   const element = document.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,9 @@
-export function getResizeHandleElement(id: string): HTMLDivElement | null {
+export function getResizeHandleElement(id: string): HTMLElement | null {
   const element = document.querySelector(
     `[data-panel-resize-handle-id="${id}"]`
   );
   if (element) {
-    return element as HTMLDivElement;
+    return element as HTMLElement;
   }
   return null;
 }