fix: Incorrect onToggle event type (#4615)

* fix: Incorrect onToggle event type

* refactor: Backport ToggleEvent

Author: rschristian

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;
@@ -508,6 +530,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 +562,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 +626,7 @@ export namespace JSXInternal {
 		onCompositionUpdateCapture?: CompositionEventHandler<Target> | undefined;
 
 		// Details Events
-		onToggle?: GenericEventHandler<Target> | undefined;
+		onToggle?: ToggleEventHandler<Target> | undefined;
 
 		// Dialog Events
 		onClose?: GenericEventHandler<Target> | undefined;

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 });