Update use-debounced-callback.ts to add a flush method to the returne…

…d callback as well as give an option to simply flush on unmount

packages/@mantine/hooks/src/use-debounced-callback/use-debounced-callback.ts

@@ -1,19 +1,36 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useCallbackRef } from '../use-callback-ref/use-callback-ref';
 
-export function useDebouncedCallback<T extends (...args: any[]) => any>(
+export function useDebounceCallback<T extends (...args: any[]) => any>(
   callback: T,
-  delay: number
+  options: number | { delay: number; flushOnUnmount?: boolean },
 ) {
+  const delay = typeof options === 'number' ? options : options.delay;
+  const flushOnUnmount = typeof options === 'number' ? false : options.flushOnUnmount;
   const handleCallback = useCallbackRef(callback);
   const debounceTimerRef = useRef(0);
-  useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
 
-  return useCallback(
+  const lastCallback: ((...args: Parameters<T>) => void) & {
+    flush?: () => void;
+  } = useCallback(
     (...args: Parameters<T>) => {
       window.clearTimeout(debounceTimerRef.current);
-      debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
+      const flush = () => handleCallback(...args);
+      lastCallback.flush = flush;
+      debounceTimerRef.current = window.setTimeout(flush, delay);
     },
-    [handleCallback, delay]
+    [handleCallback, delay],
   );
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(debounceTimerRef.current);
+      if (flushOnUnmount) {
+        lastCallback.flush?.();
+      }
+    },
+    [lastCallback, flushOnUnmount],
+  );
+
+  return lastCallback;
 }