[@mantine/hooks] use-timeout: Add parameters for callback function (#…

…2721)

* [@mantine/hooks] use-timout: Add  parameters for callback function

* [docs] use-timeout: Update docs with callback function parameters

* [@mantine/hooks] use-timeout: Callback parameter changed to multiple parameters

* [docs] use-timeout: Callback function with multiple parameters

* [@mantine/hooks] use-timeout: Fix tests

docs/src/docs/hooks/use-timeout.mdx

@@ -38,13 +38,13 @@ Return object:
 
 ```tsx
 function useTimeout(
-  callback: () => void,
+  callback: (...callbackParams: any[]) => void,
   delay: number,
   options?: {
     autoInvoke: boolean;
   }
 ): {
-  start: () => void;
+  start: (...callbackParams: any[]) => void;
   clear: () => void;
 };
 ```

src/mantine-hooks/src/use-timeout/use-timeout.test.ts

@@ -88,4 +88,19 @@ describe('@mantine/hooks/use-timeout', () => {
     expect(setTimeout).toHaveBeenCalled();
     expect(clearTimeout).toHaveBeenCalled();
   });
+
+  it('start function passes parameters to callback', () => {
+    const { timeout, advanceTimerToNextTick } = setupTimer(10);
+    const hook = renderHook(() => useTimeout(callback, timeout));
+
+    const MOCK_CALLBACK_VALUE = 'MOCK_CALLBACK_VALUE';
+    act(() => {
+      hook.result.current.start(MOCK_CALLBACK_VALUE);
+    });
+
+    advanceTimerToNextTick();
+
+    expect(setTimeout).toHaveBeenCalled();
+    expect(callback).toBeCalledWith([MOCK_CALLBACK_VALUE]);
+  });
 });

src/mantine-hooks/src/use-timeout/use-timeout.ts

@@ -1,16 +1,16 @@
 import { useRef, useEffect } from 'react';
 
 export function useTimeout(
-  fn: () => void,
+  callback: (...callbackParams: any[]) => void,
   delay: number,
   options: { autoInvoke: boolean } = { autoInvoke: false }
 ) {
   const timeoutRef = useRef<number>(null);
 
-  const start = () => {
+  const start = (...callbackParams: any[]) => {
     if (!timeoutRef.current) {
       timeoutRef.current = window.setTimeout(() => {
-        fn();
+        callback(callbackParams);
         timeoutRef.current = null;
       }, delay);
     }