From e7246bcc298af75cb0e2fb439e8fea5aae83347d Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Wed, 27 Apr 2022 19:33:03 +0200
Subject: [PATCH] refactor: use change event type

---
 .changeset/four-rules-pretend.md                         | 6 ++++++
 .../src/FormControlLabel/FormControlLabelContext.ts      | 7 ++-----
 .../src/FormControlLabel/FormControlLabelProps.tsx       | 9 +++------
 packages/material/src/internal/SwitchBase.tsx            | 4 ++--
 packages/material/src/internal/SwitchBaseProps.ts        | 9 +++------
 packages/types/src/events.ts                             | 6 +++++-
 6 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/four-rules-pretend.md

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<HTMLInputElement, MouseEvent>,
-    checked: boolean
-  ) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>, 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<HTMLElement, MouseEvent>} event The event source of the callback.
+     * @param {ChangeEvent<HTMLElement>} event The event source of the callback.
      * You can pull out the new checked state by accessing `event.target.checked` (boolean).
      */
-    onChange?: (
-      event: EventParam<HTMLElement, MouseEvent>,
-      checked: boolean
-    ) => void;
+    onChange?: (event: ChangeEvent<HTMLElement>, 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<P = {}, D extends ElementType = "div"> {
     /**
      * Callback fired when the state is changed.
      *
-     * @param {EventParam<HTMLInputElement, MouseEvent>} event The event source of the callback.
+     * @param {ChangeEvent<HTMLInputElement>} 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<HTMLInputElement, MouseEvent>,
-      checked: boolean
-    ) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, 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<T = HTMLElement, E extends Event = Event> = E & {
 
 type EH<T, E extends Event> = JSX.EventHandler<T, E>;
 
+export type ChangeEvent<T = Element> = EventParam<T, Event> & {
+  target: EventTarget & T;
+};
+
 export type AnimationEventHandler<T = Element> = EH<T, AnimationEvent>;
 export type ChangeEventHandler<T = Element, V = string> = (
-  event: Parameters<EH<T, KeyboardEvent>>[0],
+  event: ChangeEvent<T>,
   value: V
 ) => void;
 export type ClipboardEventHandler<T = Element> = EH<T, ClipboardEvent>;