diff --git a/.changeset/four-rules-pretend.md b/.changeset/four-rules-pretend.md new file mode 100644 index 000000000..d6d56500a --- /dev/null +++ b/.changeset/four-rules-pretend.md @@ -0,0 +1,6 @@ +--- +"@suid/material": patch +"@suid/types": patch +--- + +Use change event type diff --git a/packages/material/src/FormControlLabel/FormControlLabelContext.ts b/packages/material/src/FormControlLabel/FormControlLabelContext.ts index d7cabc372..6a49251d0 100644 --- a/packages/material/src/FormControlLabel/FormControlLabelContext.ts +++ b/packages/material/src/FormControlLabel/FormControlLabelContext.ts @@ -1,14 +1,11 @@ import { RefProp } from "@suid/system/createRef"; -import { EventParam } from "@suid/types"; +import { ChangeEvent } from "@suid/types"; import { createContext } from "solid-js"; export interface FormControlLabelState { checked?: boolean; name?: string; - onChange?: ( - event: EventParam, - checked: boolean - ) => void; + onChange?: (event: ChangeEvent, checked: boolean) => void; value?: any; inputRef?: RefProp; disabled?: boolean; diff --git a/packages/material/src/FormControlLabel/FormControlLabelProps.tsx b/packages/material/src/FormControlLabel/FormControlLabelProps.tsx index b6b08b711..46d4ffa3b 100644 --- a/packages/material/src/FormControlLabel/FormControlLabelProps.tsx +++ b/packages/material/src/FormControlLabel/FormControlLabelProps.tsx @@ -3,7 +3,7 @@ import { TypographyProps } from "../Typography"; import { FormControlLabelClasses } from "./formControlLabelClasses"; import { SxProps } from "@suid/system"; import { RefProp } from "@suid/system/createRef"; -import { ElementType, EventParam, OverrideProps } from "@suid/types"; +import { ChangeEvent, ElementType, OverrideProps } from "@suid/types"; import { JSXElement } from "solid-js"; export interface FormControlLabelTypeMap< @@ -62,13 +62,10 @@ export interface FormControlLabelTypeMap< /** * Callback fired when the state is changed. * - * @param {EventParam} event The event source of the callback. + * @param {ChangeEvent} event The event source of the callback. * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ - onChange?: ( - event: EventParam, - checked: boolean - ) => void; + onChange?: (event: ChangeEvent, checked: boolean) => void; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material/src/internal/SwitchBase.tsx b/packages/material/src/internal/SwitchBase.tsx index 52f32ff54..1fb17c6c6 100644 --- a/packages/material/src/internal/SwitchBase.tsx +++ b/packages/material/src/internal/SwitchBase.tsx @@ -191,9 +191,9 @@ const SwitchBase = $.component(function SwitchBase({ if (typeof props.onChange === "function") { // TODO v6: remove the second argument. - props.onChange(event, newChecked); + props.onChange(event as any, newChecked); } else { - formControlLabel?.onChange?.(event, newChecked); + formControlLabel?.onChange?.(event as any, newChecked); } if (typeof otherProps.onClick === "function") diff --git a/packages/material/src/internal/SwitchBaseProps.ts b/packages/material/src/internal/SwitchBaseProps.ts index 68381da10..b1409e49a 100644 --- a/packages/material/src/internal/SwitchBaseProps.ts +++ b/packages/material/src/internal/SwitchBaseProps.ts @@ -1,6 +1,6 @@ import { OverrideProps } from "../OverridableComponent"; import { SwitchBaseClasses } from "./switchBaseClasses"; -import { ElementType, EventParam, Ref } from "@suid/types"; +import { ElementType, Ref, ChangeEvent } from "@suid/types"; import { JSX, JSXElement } from "solid-js"; export interface SwitchBasePropsVariantOverrides {} @@ -61,14 +61,11 @@ export interface SwitchBaseTypeMap

{ /** * Callback fired when the state is changed. * - * @param {EventParam} event The event source of the callback. + * @param {ChangeEvent} event The event source of the callback. * You can pull out the new value by accessing `event.target.value` (string). * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ - onChange?: ( - event: EventParam, - checked: boolean - ) => void; + onChange?: (event: ChangeEvent, checked: boolean) => void; readOnly?: boolean; /** * If `true`, the `input` element is required. diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts index e2a749b84..970d990ac 100644 --- a/packages/types/src/events.ts +++ b/packages/types/src/events.ts @@ -7,9 +7,13 @@ export type EventParam = E & { type EH = JSX.EventHandler; +export type ChangeEvent = EventParam & { + target: EventTarget & T; +}; + export type AnimationEventHandler = EH; export type ChangeEventHandler = ( - event: Parameters>[0], + event: ChangeEvent, value: V ) => void; export type ClipboardEventHandler = EH;