diff --git a/src/jsx.d.ts b/src/jsx.d.ts index f90939e6f2..8e7f9db1f1 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -20,6 +20,28 @@ type Defaultize = 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 extends { defaultProps: infer Defaults; @@ -508,6 +530,10 @@ export namespace JSXInternal { Target, TouchEvent >; + export type TargetedToggleEvent = TargetedEvent< + Target, + ToggleEvent + >; export type TargetedTransitionEvent = TargetedEvent; export type TargetedUIEvent = TargetedEvent< @@ -536,6 +562,9 @@ export namespace JSXInternal { export type DragEventHandler = EventHandler< TargetedDragEvent >; + export type ToggleEventHandler = EventHandler< + TargetedToggleEvent + >; export type FocusEventHandler = EventHandler< TargetedFocusEvent >; @@ -597,7 +626,7 @@ export namespace JSXInternal { onCompositionUpdateCapture?: CompositionEventHandler | undefined; // Details Events - onToggle?: GenericEventHandler | undefined; + onToggle?: ToggleEventHandler | undefined; // Dialog Events onClose?: GenericEventHandler | 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 =
; 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(); createElement('div', { ref: ref }, 'hi'); @@ -375,13 +379,17 @@ const onBeforeInput = (e: h.JSX.TargetedInputEvent) => {}; createElement('input', { onBeforeInput: onBeforeInput }); h('input', { onBeforeInput: onBeforeInput }); +// Should accept onSubmit const onSubmit = (e: h.JSX.TargetedSubmitEvent) => {};
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) => {}; + ({ 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('input', { onClick: e => e.currentTarget.capture });