fix(frontend): Generalize the event type for all event modifiers

src/lib/types/event-modifiers.ts

@@ -1,12 +1,16 @@
-export type OnEventParam<T extends EventTarget = EventTarget> = MouseEvent & {
+export type OnEventParam<
+  E extends Event = Event,
+  T extends EventTarget = EventTarget,
+> = E & {
   currentTarget: EventTarget & T;
 };
 
-export type OnEventCallback<T extends EventTarget = EventTarget> = (
-  $event: OnEventParam<T>,
-) => void | Promise<void>;
+export type OnEventCallback<
+  E extends Event = Event,
+  T extends EventTarget = EventTarget,
+> = ($event: OnEventParam<E, T>) => void | Promise<void>;
 
-export type OptionalOnEventCallback<T extends EventTarget = EventTarget> =
-  | OnEventCallback<T>
-  | null
-  | undefined;
+export type OptionalOnEventCallback<
+  E extends Event = Event,
+  T extends EventTarget = EventTarget,
+> = OnEventCallback<E, T> | null | undefined;

src/lib/utils/event-modifiers.utils.ts

@@ -9,36 +9,36 @@ import type {
   OnEventParam,
   OptionalOnEventCallback,
 } from "$lib/types/event-modifiers";
-import type { MouseEventHandler } from "svelte/elements";
+import type { EventHandler } from "svelte/elements";
 
 /**
  * A wrapper function to stop event propagation of a mouse event before executing a callback function.
  *
- * @param {OptionalOnEventCallback<T extends EventTarget>} fn - The function to be executed after stopping the event propagation. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only stop the propagation of the event.
+ * @param {OptionalOnEventCallback<E extends Event = Event, T extends EventTarget = EventTarget>} fn - The function to be executed after stopping the event propagation. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only stop the propagation of the event.
  *
- * @returns {MouseEventHandler<T extends EventTarget>} - A function that takes an event and stop its propagation, before executing the provided function.
+ * @returns {EventHandler<E extends Event = Event, T extends EventTarget = EventTarget>} - A function that takes an event and stop its propagation, before executing the provided function.
  */
 export const stopPropagation =
-  <T extends EventTarget>(
-    fn: OptionalOnEventCallback<T>,
-  ): MouseEventHandler<T> =>
-  async ($event: OnEventParam<T>) => {
+  <E extends Event = Event, T extends EventTarget = EventTarget>(
+    fn: OptionalOnEventCallback<E, T>,
+  ): EventHandler<E, T> =>
+  async ($event: OnEventParam<E, T>) => {
     $event?.stopPropagation();
     await fn?.($event);
   };
 
 /**
  * A wrapper function to prevent the default action of a mouse event before executing a callback function.
  *
- * @param {OptionalOnEventCallback<T extends EventTarget>} fn - The function to be executed after preventing the default action. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only prevent the default action.
+ * @param {OptionalOnEventCallback<E extends Event = Event, T extends EventTarget = EventTarget>} fn - The function to be executed after preventing the default action. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only prevent the default action.
  *
- * @returns {MouseEventHandler<T extends EventTarget>} - A function that takes an event and prevents its default action, before executing the provided function.
+ * @returns {EventHandler<E extends Event = Event, T extends EventTarget = EventTarget>} - A function that takes an event and prevents its default action, before executing the provided function.
  */
 export const preventDefault =
-  <T extends EventTarget>(
-    fn: OptionalOnEventCallback<T>,
-  ): MouseEventHandler<T> =>
-  async ($event: OnEventParam<T>) => {
+  <E extends Event = Event, T extends EventTarget = EventTarget>(
+    fn: OptionalOnEventCallback<E, T>,
+  ): EventHandler<E, T> =>
+  async ($event: OnEventParam<E, T>) => {
     $event?.preventDefault();
     await fn?.($event);
   };

src/routes/(page)/utility-functions/+page.md

@@ -13,35 +13,35 @@ A collection of handy JavaScript/TypeScript utility functions you can use alongs
 
 A wrapper function to stop event propagation of a mouse event before executing a callback function.
 
-| Function          | Type                                                                              |
-| ----------------- | --------------------------------------------------------------------------------- |
-| `stopPropagation` | `<T extends EventTarget>(fn: OptionalOnEventCallback<T>) => MouseEventHandler<T>` |
+| Function          | Type                                                                                                                      |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `stopPropagation` | `<E extends Event = Event, T extends EventTarget = EventTarget>(fn: OptionalOnEventCallback<E, T>) => EventHandler<E, T>` |
 
 Parameters:
 
-- `fn`: - The function to be executed after stopping the event propagation. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only stop the propagation of the event.
+- `Event`: , T extends EventTarget = EventTarget>} fn - The function to be executed after stopping the event propagation. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only stop the propagation of the event.
 
 Returns:
 
-- A function that takes an event and stop its propagation, before executing the provided function.
+Event, T extends EventTarget = EventTarget>} - A function that takes an event and stop its propagation, before executing the provided function.
 
 [Source](https://github.com/dfinity/gix-components/tree/main/src/lib/utils/event-modifiers.utils.ts#L21)
 
 ### preventDefault
 
 A wrapper function to prevent the default action of a mouse event before executing a callback function.
 
-| Function         | Type                                                                              |
-| ---------------- | --------------------------------------------------------------------------------- |
-| `preventDefault` | `<T extends EventTarget>(fn: OptionalOnEventCallback<T>) => MouseEventHandler<T>` |
+| Function         | Type                                                                                                                      |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `preventDefault` | `<E extends Event = Event, T extends EventTarget = EventTarget>(fn: OptionalOnEventCallback<E, T>) => EventHandler<E, T>` |
 
 Parameters:
 
-- `fn`: - The function to be executed after preventing the default action. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only prevent the default action.
+- `Event`: , T extends EventTarget = EventTarget>} fn - The function to be executed after preventing the default action. It can be a synchronous or asynchronous function, or null or undefined to skip the execution of the callback function and only prevent the default action.
 
 Returns:
 
-- A function that takes an event and prevents its default action, before executing the provided function.
+Event, T extends EventTarget = EventTarget>} - A function that takes an event and prevents its default action, before executing the provided function.
 
 [Source](https://github.com/dfinity/gix-components/tree/main/src/lib/utils/event-modifiers.utils.ts#L37)
 

src/tests/lib/utils/event-modifiers.utils.spec.ts

@@ -41,7 +41,6 @@ describe("event-modifiers-utils", () => {
     it("should handle nullish events", async () => {
       const handler = stopPropagation(callbackMock);
 
-      // @ts-expect-error Testing this on purpose
       await handler(undefined);
 
       expect(callbackMock).toHaveBeenCalledExactlyOnceWith(undefined);
@@ -131,7 +130,6 @@ describe("event-modifiers-utils", () => {
     it("should handle nullish events", async () => {
       const handler = preventDefault(callbackMock);
 
-      // @ts-expect-error Testing this on purpose
       await handler(undefined);
 
       expect(callbackMock).toHaveBeenCalledExactlyOnceWith(undefined);