From 5fe1e840f11c9f4b731a0a2eceec564f07b0e491 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 31 Dec 2023 09:48:02 +1100
Subject: [PATCH] feat: narrow `tagName` type

This was too wide, allowing for non-HTML element tags like `svg`, which cause runtime errors.

Closes #251
---
 packages/react-resizable-panels/src/Panel.ts             | 4 ++--
 packages/react-resizable-panels/src/PanelGroup.ts        | 4 ++--
 packages/react-resizable-panels/src/PanelResizeHandle.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
index 7670989a1..322780c07 100644
--- 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
index 07ff9e23f..f88455f1c 100644
--- 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
index 3df4ce492..b1f960734 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.ts
+++ b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -25,7 +25,7 @@ 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 +33,7 @@ export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> &
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
     tabIndex?: number;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
   }>;
 
 export function PanelResizeHandle({