react-resizable-panels 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.7
+
+- Narrow `tagName` prop to only allow `HTMLElement` names (rather than the broader `Element` type) (#251)
+
 ## 1.0.6
 
 - Export internal DOM helper methods.

package/README.md

@@ -46,7 +46,9 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 `PanelGroup` components also expose an imperative API for manual resizing:
 | method | description
 | :-------------------------------- | :---
-| `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
+| `getId(): string` | Gets the panel group's ID.
+| `getLayout(): number[]` | Gets the panel group's current _layout_ (`[1 - 100, ...]`).
+| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`).
 
 ### `Panel`
 
@@ -73,9 +75,12 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | :--------------------------- | :---
 | `collapse()` | If panel is `collapsible`, collapse it fully.
 | `expand()` | If panel is currently _collapsed_, expand it to its most recent size.
-| `getCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `getId(): string` | Gets the ID of the panel.
+| `getSize(): number` | Gets the current size of the panel as a percentage (`1 - 100`).
+| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `isExpanded(): boolean` | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).
 | `getSize(): number` | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
-| `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
+| `resize(size: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
 
 ### `PanelResizeHandle`
 
@@ -178,6 +183,15 @@ No. Pixel-based constraints [added significant complexity](https://github.com/bv
 No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
 
 ```tsx
+import {
+  getPanelElement,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
+
 export function Example() {
   const refs = useRef();
 
@@ -185,19 +199,21 @@ export function Example() {
     const groupElement = getPanelGroupElement("group");
     const leftPanelElement = getPanelElement("left-panel");
     const rightPanelElement = getPanelElement("right-panel");
+    const resizeHandleElement = getResizeHandleElement("resize-handle");
 
     // If you want to, you can store them in a ref to pass around
     refs.current = {
       groupElement,
       leftPanelElement,
       rightPanelElement,
+      resizeHandleElement,
     };
   }, []);
 
   return (
     <PanelGroup direction="horizontal" id="group">
       <Panel id="left-panel">{/* ... */}</Panel>
-      <PanelResizeHandle />
+      <PanelResizeHandle id="resize-handle" />
       <Panel id="right-panel">{/* ... */}</Panel>
     </PanelGroup>
   );

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

@@ -1,4 +1,4 @@
-import { ElementType, ForwardedRef, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (size: number, prevSize: number | undefined) => void;
@@ -30,7 +30,7 @@ export type ImperativePanelHandle = {
     isExpanded: () => boolean;
     resize: (size: number) => void;
 };
-export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & PropsWithChildren<{
+export type PanelProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & PropsWithChildren<{
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -43,15 +43,15 @@ export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
 }>;
 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>;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): ReactNode;
 export declare namespace PanelWithForwardedRef {
     var displayName: string;
 }
-export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & {
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -64,7 +64,7 @@ export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLA
     onResize?: PanelOnResize | undefined;
     order?: number | undefined;
     style?: object | undefined;
-    tagName?: ElementType | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<ImperativePanelHandle>>;

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

@@ -1,5 +1,5 @@
 import { Direction } from "./types.js";
-import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
     getLayout: () => number[];
@@ -10,7 +10,7 @@ export type PanelGroupStorage = {
     setItem(name: string, value: string): void;
 };
 export type PanelGroupOnLayout = (layout: number[]) => void;
-export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWithChildren<{
+export type PanelGroupProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
     autoSaveId?: string | null;
     className?: string;
     direction: Direction;
@@ -19,9 +19,9 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWit
     onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id"> & {
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
     autoSaveId?: string | null | undefined;
     className?: string | undefined;
     direction: Direction;
@@ -30,7 +30,7 @@ export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<
     onLayout?: PanelGroupOnLayout | null | undefined;
     storage?: PanelGroupStorage | undefined;
     style?: CSSProperties | undefined;
-    tagName?: ElementType | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<ImperativePanelGroupHandle>>;

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

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

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

@@ -1 +1 @@
-export declare function getPanelElement(id: string): HTMLDivElement | null;
+export declare function getPanelElement(id: string): HTMLElement | null;

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

@@ -1 +1 @@
-export declare function getPanelElementsForGroup(groupId: string): HTMLDivElement[];
+export declare function getPanelElementsForGroup(groupId: string): HTMLElement[];

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

@@ -1 +1 @@
-export declare function getPanelGroupElement(id: string): HTMLDivElement | null;
+export declare function getPanelGroupElement(id: string): HTMLElement | null;

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

@@ -1 +1 @@
-export declare function getResizeHandleElement(id: string): HTMLDivElement | null;
+export declare function getResizeHandleElement(id: string): HTMLElement | null;

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

@@ -1 +1 @@
-export declare function getResizeHandleElementsForGroup(groupId: string): HTMLDivElement[];
+export declare function getResizeHandleElementsForGroup(groupId: string): HTMLElement[];

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

@@ -1689,7 +1689,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({
@@ -1717,9 +1717,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
@@ -1746,9 +1746,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);
@@ -1805,7 +1805,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1794,7 +1794,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({
@@ -1822,9 +1822,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
@@ -1851,9 +1851,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);
@@ -1910,7 +1910,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1770,7 +1770,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({
@@ -1798,9 +1798,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
@@ -1827,9 +1827,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);
@@ -1886,7 +1886,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1665,7 +1665,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({
@@ -1693,9 +1693,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
@@ -1722,9 +1722,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);
@@ -1781,7 +1781,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1691,7 +1691,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({
@@ -1719,9 +1719,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
@@ -1748,9 +1748,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);
@@ -1807,7 +1807,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1801,7 +1801,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({
@@ -1829,9 +1829,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
@@ -1858,9 +1858,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);
@@ -1917,7 +1917,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1777,7 +1777,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({
@@ -1805,9 +1805,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
@@ -1834,9 +1834,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);
@@ -1893,7 +1893,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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

@@ -1590,7 +1590,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({
@@ -1618,9 +1618,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
@@ -1647,9 +1647,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);
@@ -1706,7 +1706,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,

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,

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,

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,

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.6",
+  "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/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;
 }

package/src/utils/dom/getResizeHandleElementsForGroup.ts

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