diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts index 7670989a1..372abe324 100644 --- a/packages/react-resizable-panels/src/Panel.ts +++ b/packages/react-resizable-panels/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, "id" | "onResize"> & +export type PanelProps = Omit< + HTMLAttributes, + "id" | "onResize" +> & PropsWithChildren<{ className?: string; collapsedSize?: number | undefined; @@ -68,7 +71,7 @@ export type PanelProps = Omit, "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; -}) { +}): ReactNode { const context = useContext(PanelGroupContext); if (context === null) { throw Error( diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts index 07ff9e23f..29d774e39 100644 --- a/packages/react-resizable-panels/src/PanelGroup.ts +++ b/packages/react-resizable-panels/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, "id"> & +export type PanelGroupProps = Omit< + HTMLAttributes, + "id" +> & PropsWithChildren<{ autoSaveId?: string | null; className?: string; @@ -78,7 +81,7 @@ export type PanelGroupProps = Omit, "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; -}) { +}): ReactNode { const groupId = useUniqueId(idFromProps); const [dragState, setDragState] = useState(null); diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts index b2942c01e..3e9597a61 100644 --- a/packages/react-resizable-panels/src/PanelResizeHandle.ts +++ b/packages/react-resizable-panels/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, "id"> & +export type PanelResizeHandleProps = Omit< + HTMLAttributes, + "id" +> & PropsWithChildren<{ className?: string; disabled?: boolean; @@ -33,7 +36,7 @@ export type PanelResizeHandleProps = Omit, "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(null); +}: PanelResizeHandleProps): ReactNode { + const elementRef = useRef(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, diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts index 1d040ea1d..e2e1b80fb 100644 --- a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts +++ b/packages/react-resizable-panels/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; diff --git a/packages/react-resizable-panels/src/utils/dom/getPanelElement.ts b/packages/react-resizable-panels/src/utils/dom/getPanelElement.ts index f29df5efd..86087a8cd 100644 --- a/packages/react-resizable-panels/src/utils/dom/getPanelElement.ts +++ b/packages/react-resizable-panels/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; } diff --git a/packages/react-resizable-panels/src/utils/dom/getPanelElementsForGroup.ts b/packages/react-resizable-panels/src/utils/dom/getPanelElementsForGroup.ts index 941a41244..b266cd352 100644 --- a/packages/react-resizable-panels/src/utils/dom/getPanelElementsForGroup.ts +++ b/packages/react-resizable-panels/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}"]`) ); diff --git a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts b/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts index 876e4e8b3..5ea518712 100644 --- a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts +++ b/packages/react-resizable-panels/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; } diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts index de7292cb8..a37d70ba0 100644 --- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts +++ b/packages/react-resizable-panels/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; } diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts index 24ba1c492..97fa04ad3 100644 --- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts +++ b/packages/react-resizable-panels/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}"]`