feat: narrow tagName type

This was too wide, allowing for non-HTML element tags like `svg`, which cause runtime errors. Closes #251
bvaughn · Dec 30, 2023 · 5fe1e84 · 5fe1e84
1 parent 7c9ebcc
commit 5fe1e84
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
@@ -54,7 +54,7 @@ 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 +68,7 @@ export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 export function PanelWithForwardedRef({

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -68,7 +68,7 @@ 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 +78,7 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
     onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 const debounceMap: {

diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -25,15 +25,15 @@ 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;
     id?: string | null;
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
     tabIndex?: number;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 export function PanelResizeHandle({