From 98308a172276dfc3bed3ecd031390d954bc9515c Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Thu, 19 Dec 2024 13:06:19 -0600
Subject: [PATCH 1/2] fix: Incorrect onToggle event type

---
 src/jsx.d.ts       |  9 ++++++++-
 test/ts/preact.tsx | 12 ++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index f90939e6f2..f710d17f00 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -508,6 +508,10 @@ export namespace JSXInternal {
 		Target,
 		TouchEvent
 	>;
+	export type TargetedToggleEvent<Target extends EventTarget> = TargetedEvent<
+		Target,
+		ToggleEvent
+	>;
 	export type TargetedTransitionEvent<Target extends EventTarget> =
 		TargetedEvent<Target, TransitionEvent>;
 	export type TargetedUIEvent<Target extends EventTarget> = TargetedEvent<
@@ -536,6 +540,9 @@ export namespace JSXInternal {
 	export type DragEventHandler<Target extends EventTarget> = EventHandler<
 		TargetedDragEvent<Target>
 	>;
+	export type ToggleEventHandler<Target extends EventTarget> = EventHandler<
+		TargetedToggleEvent<Target>
+	>;
 	export type FocusEventHandler<Target extends EventTarget> = EventHandler<
 		TargetedFocusEvent<Target>
 	>;
@@ -597,7 +604,7 @@ export namespace JSXInternal {
 		onCompositionUpdateCapture?: CompositionEventHandler<Target> | undefined;
 
 		// Details Events
-		onToggle?: GenericEventHandler<Target> | undefined;
+		onToggle?: ToggleEventHandler<Target> | undefined;
 
 		// Dialog Events
 		onClose?: GenericEventHandler<Target> | undefined;
diff --git a/test/ts/preact.tsx b/test/ts/preact.tsx
index 0272fc3bef..632e11a29d 100644
--- a/test/ts/preact.tsx
+++ b/test/ts/preact.tsx
@@ -351,6 +351,10 @@ const acceptsStringAsLength = <div style={{ marginTop: '20px' }} />;
 
 const ReturnNull: FunctionalComponent = () => null;
 
+// Should accept arbitrary properties outside of JSX.HTMLAttributes
+h('option', { x: 'foo' });
+createElement('option', { value: 'foo' });
+
 // Refs should work on elements
 const ref = createRef<HTMLDivElement>();
 createElement('div', { ref: ref }, 'hi');
@@ -375,13 +379,17 @@ const onBeforeInput = (e: h.JSX.TargetedInputEvent<HTMLInputElement>) => {};
 createElement('input', { onBeforeInput: onBeforeInput });
 h('input', { onBeforeInput: onBeforeInput });
 
+// Should accept onSubmit
 const onSubmit = (e: h.JSX.TargetedSubmitEvent<HTMLFormElement>) => {};
 <form onSubmit={e => e.currentTarget.elements} />;
 createElement('form', { onSubmit: onSubmit });
 h('form', { onSubmit: onSubmit });
 
-h('option', { value: 'foo' });
-createElement('option', { value: 'foo' });
+// Should accept onToggle
+const onToggle = (e: h.JSX.TargetedToggleEvent<HTMLDetailsElement>) => {};
+<dialog onToggle={(e) => ({ newState: e.newState, oldState: e.oldState }) } />;
+createElement('dialog', { onToggle: onToggle });
+h('dialog', { onToggle: onToggle });
 
 // Should default to correct event target element for the attribute interface
 h<JSX.InputHTMLAttributes>('input', { onClick: e => e.currentTarget.capture });

From a463c9a93db878b83acbf7e9ea8f8e73dbc2c6e4 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Thu, 19 Dec 2024 16:07:34 -0600
Subject: [PATCH 2/2] refactor: Backport ToggleEvent

---
 src/jsx.d.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index f710d17f00..8e7f9db1f1 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -20,6 +20,28 @@ type Defaultize<Props, Defaults> =
 
 type Booleanish = boolean | 'true' | 'false';
 
+// Remove when bumping TS minimum to >5.2
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+interface ToggleEvent extends Event {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+    readonly newState: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+    readonly oldState: string;
+}
+
+declare var ToggleEvent: {
+    prototype: ToggleEvent;
+    new(type: string, eventInitDict?: ToggleEventInit): ToggleEvent;
+};
+
+interface ToggleEventInit extends EventInit {
+    newState?: string;
+    oldState?: string;
+}
+
+// End TS >5.2
+
 export namespace JSXInternal {
 	export type LibraryManagedAttributes<Component, Props> = Component extends {
 		defaultProps: infer Defaults;