From 19f096063c5219d2fc0ab655d1588a4f69d34c29 Mon Sep 17 00:00:00 2001
From: linardsblk <47926386+linardsblk@users.noreply.github.com>
Date: Tue, 18 Oct 2022 17:18:28 +0300
Subject: [PATCH] [@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               |  4 ++--
 .../src/use-timeout/use-timeout.test.ts           | 15 +++++++++++++++
 src/mantine-hooks/src/use-timeout/use-timeout.ts  |  6 +++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/src/docs/hooks/use-timeout.mdx b/docs/src/docs/hooks/use-timeout.mdx
index 3d9bfd43c04..82cecf1c26e 100644
--- a/docs/src/docs/hooks/use-timeout.mdx
+++ b/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;
 };
 ```
diff --git a/src/mantine-hooks/src/use-timeout/use-timeout.test.ts b/src/mantine-hooks/src/use-timeout/use-timeout.test.ts
index 2acc7a87869..2e6d76c091b 100644
--- a/src/mantine-hooks/src/use-timeout/use-timeout.test.ts
+++ b/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]);
+  });
 });
diff --git a/src/mantine-hooks/src/use-timeout/use-timeout.ts b/src/mantine-hooks/src/use-timeout/use-timeout.ts
index c5266c09ad7..79578520a69 100644
--- a/src/mantine-hooks/src/use-timeout/use-timeout.ts
+++ b/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);
     }