react-simplikit 0.0.50 → 0.0.52

package/dist/hooks/useDebounce/useDebounce.cjs

@@ -0,0 +1,66 @@
+"use client";
+const require_debounce = require("./debounce.cjs");
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useDebounce/useDebounce.ts
+/**
+* @description
+* `useDebounce` is a React hook that returns a debounced version of the provided callback function.
+* It helps optimize event handling by delaying function execution and grouping multiple calls into one.
+*
+* @template {(...args: any[]) => unknown} F - The type of the callback function.
+* @param {F} callback - The function to debounce.
+* @param {number} wait - The number of milliseconds to delay the function execution.
+* @param {DebounceOptions} [options] - Configuration options for debounce behavior.
+* @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
+* @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
+*
+* @returns {F & { cancel: () => void }} A debounced function that delays invoking the callback.
+*   It also includes a `cancel` method to cancel any pending debounced execution.
+*
+* @example
+* function SearchInput() {
+*   const [query, setQuery] = useState('');
+*
+*   const debouncedSearch = useDebounce((value: string) => {
+*     // Actual API call
+*     searchAPI(value);
+*   }, 300);
+*
+*   return (
+*     <input
+*       value={query}
+*       onChange={e => {
+*         setQuery(e.target.value);
+*         debouncedSearch(e.target.value);
+*       }}
+*       placeholder="Enter search term"
+*     />
+*   );
+* }
+*/
+function useDebounce(callback, wait, options = {}) {
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const { leading = false, trailing = true } = options;
+	const edges = (0, react.useMemo)(() => {
+		const _edges = [];
+		if (leading) _edges.push("leading");
+		if (trailing) _edges.push("trailing");
+		return _edges;
+	}, [leading, trailing]);
+	const debounced = (0, react.useMemo)(() => {
+		return require_debounce.debounce(preservedCallback, wait, { edges });
+	}, [
+		preservedCallback,
+		wait,
+		edges
+	]);
+	(0, react.useEffect)(function cancelDebouncedOnUnmount() {
+		return () => {
+			debounced.cancel();
+		};
+	}, [debounced]);
+	return debounced;
+}
+//#endregion
+exports.useDebounce = useDebounce;

package/{esm/hooks/useDebounce/index.d.ts → dist/hooks/useDebounce/useDebounce.d.cts}

@@ -1,11 +1,9 @@
-type DebouncedFunction<F extends (...args: any[]) => void> = {
-    (...args: Parameters<F>): void;
-    cancel: () => void;
-};
 
+import { DebouncedFunction } from "./debounce.cjs";
+//#region src/hooks/useDebounce/useDebounce.d.ts
 type DebounceOptions = {
-    leading?: boolean;
-    trailing?: boolean;
+  leading?: boolean;
+  trailing?: boolean;
 };
 /**
  * @description
@@ -44,5 +42,5 @@ type DebounceOptions = {
  * }
  */
 declare function useDebounce<F extends (...args: any[]) => unknown>(callback: F, wait: number, options?: DebounceOptions): DebouncedFunction<F>;
-
-export { useDebounce };
+//#endregion
+export { useDebounce };

package/dist/hooks/useDebounce/{index.d.cts → useDebounce.d.mts}

@@ -1,11 +1,9 @@
-type DebouncedFunction<F extends (...args: any[]) => void> = {
-    (...args: Parameters<F>): void;
-    cancel: () => void;
-};
 
+import { DebouncedFunction } from "./debounce.mjs";
+//#region src/hooks/useDebounce/useDebounce.d.ts
 type DebounceOptions = {
-    leading?: boolean;
-    trailing?: boolean;
+  leading?: boolean;
+  trailing?: boolean;
 };
 /**
  * @description
@@ -44,5 +42,5 @@ type DebounceOptions = {
  * }
  */
 declare function useDebounce<F extends (...args: any[]) => unknown>(callback: F, wait: number, options?: DebounceOptions): DebouncedFunction<F>;
-
-export { useDebounce };
+//#endregion
+export { useDebounce };

package/dist/hooks/useDebounce/useDebounce.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { debounce } from "./debounce.mjs";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useEffect, useMemo } from "react";
+//#region src/hooks/useDebounce/useDebounce.ts
+/**
+* @description
+* `useDebounce` is a React hook that returns a debounced version of the provided callback function.
+* It helps optimize event handling by delaying function execution and grouping multiple calls into one.
+*
+* @template {(...args: any[]) => unknown} F - The type of the callback function.
+* @param {F} callback - The function to debounce.
+* @param {number} wait - The number of milliseconds to delay the function execution.
+* @param {DebounceOptions} [options] - Configuration options for debounce behavior.
+* @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
+* @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
+*
+* @returns {F & { cancel: () => void }} A debounced function that delays invoking the callback.
+*   It also includes a `cancel` method to cancel any pending debounced execution.
+*
+* @example
+* function SearchInput() {
+*   const [query, setQuery] = useState('');
+*
+*   const debouncedSearch = useDebounce((value: string) => {
+*     // Actual API call
+*     searchAPI(value);
+*   }, 300);
+*
+*   return (
+*     <input
+*       value={query}
+*       onChange={e => {
+*         setQuery(e.target.value);
+*         debouncedSearch(e.target.value);
+*       }}
+*       placeholder="Enter search term"
+*     />
+*   );
+* }
+*/
+function useDebounce(callback, wait, options = {}) {
+	const preservedCallback = usePreservedCallback(callback);
+	const { leading = false, trailing = true } = options;
+	const edges = useMemo(() => {
+		const _edges = [];
+		if (leading) _edges.push("leading");
+		if (trailing) _edges.push("trailing");
+		return _edges;
+	}, [leading, trailing]);
+	const debounced = useMemo(() => {
+		return debounce(preservedCallback, wait, { edges });
+	}, [
+		preservedCallback,
+		wait,
+		edges
+	]);
+	useEffect(function cancelDebouncedOnUnmount() {
+		return () => {
+			debounced.cancel();
+		};
+	}, [debounced]);
+	return debounced;
+}
+//#endregion
+export { useDebounce };

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs

@@ -0,0 +1,62 @@
+"use client";
+const require_debounce = require("../useDebounce/debounce.cjs");
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+/**
+* @description
+* `useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
+* It helps optimize event handling by delaying function execution and grouping multiple calls into one.
+*
+* Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
+*
+* @param {Object} options - The options object.
+* @param {Function} options.onChange - The callback function to debounce.
+* @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
+* @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
+* @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
+*
+* @returns {Function} A debounced function that delays invoking the callback.
+*
+* @example
+* function SearchInput() {
+*   const [query, setQuery] = useState('');
+*   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
+*   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+* }
+*/
+function useDebouncedCallback({ onChange, timeThreshold, leading = false, trailing = true }) {
+	const handleChange = require_usePreservedCallback.usePreservedCallback(onChange);
+	const ref = (0, react.useRef)({
+		value: false,
+		clearPreviousDebounce: () => {}
+	});
+	(0, react.useEffect)(function clearDebouncedOnUnmount() {
+		const current = ref.current;
+		return () => {
+			current.clearPreviousDebounce();
+		};
+	}, []);
+	const edges = (0, react.useMemo)(() => {
+		const _edges = [];
+		if (leading) _edges.push("leading");
+		if (trailing) _edges.push("trailing");
+		return _edges;
+	}, [leading, trailing]);
+	return (0, react.useCallback)((nextValue) => {
+		if (nextValue === ref.current.value) return;
+		const debounced = require_debounce.debounce(() => {
+			handleChange(nextValue);
+			ref.current.value = nextValue;
+		}, timeThreshold, { edges });
+		ref.current.clearPreviousDebounce();
+		debounced();
+		ref.current.clearPreviousDebounce = debounced.cancel;
+	}, [
+		handleChange,
+		timeThreshold,
+		edges
+	]);
+}
+//#endregion
+exports.useDebouncedCallback = useDebouncedCallback;

package/{esm/hooks/useDebouncedCallback/index.d.ts → dist/hooks/useDebouncedCallback/useDebouncedCallback.d.cts}

@@ -1,6 +1,8 @@
+
+//#region src/hooks/useDebouncedCallback/useDebouncedCallback.d.ts
 type DebounceOptions = {
-    leading?: boolean;
-    trailing?: boolean;
+  leading?: boolean;
+  trailing?: boolean;
 };
 /**
  * @description
@@ -24,9 +26,9 @@ type DebounceOptions = {
  *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
  * }
  */
-declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing, }: DebounceOptions & {
-    onChange: (newValue: boolean) => void;
-    timeThreshold: number;
+declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
+  onChange: (newValue: boolean) => void;
+  timeThreshold: number;
 }): (nextValue: boolean) => void;
-
-export { useDebouncedCallback };
+//#endregion
+export { useDebouncedCallback };

package/dist/hooks/useDebouncedCallback/{index.d.cts → useDebouncedCallback.d.mts}

@@ -1,6 +1,8 @@
+
+//#region src/hooks/useDebouncedCallback/useDebouncedCallback.d.ts
 type DebounceOptions = {
-    leading?: boolean;
-    trailing?: boolean;
+  leading?: boolean;
+  trailing?: boolean;
 };
 /**
  * @description
@@ -24,9 +26,9 @@ type DebounceOptions = {
  *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
  * }
  */
-declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing, }: DebounceOptions & {
-    onChange: (newValue: boolean) => void;
-    timeThreshold: number;
+declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
+  onChange: (newValue: boolean) => void;
+  timeThreshold: number;
 }): (nextValue: boolean) => void;
-
-export { useDebouncedCallback };
+//#endregion
+export { useDebouncedCallback };

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { debounce } from "../useDebounce/debounce.mjs";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+/**
+* @description
+* `useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
+* It helps optimize event handling by delaying function execution and grouping multiple calls into one.
+*
+* Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
+*
+* @param {Object} options - The options object.
+* @param {Function} options.onChange - The callback function to debounce.
+* @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
+* @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
+* @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
+*
+* @returns {Function} A debounced function that delays invoking the callback.
+*
+* @example
+* function SearchInput() {
+*   const [query, setQuery] = useState('');
+*   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
+*   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+* }
+*/
+function useDebouncedCallback({ onChange, timeThreshold, leading = false, trailing = true }) {
+	const handleChange = usePreservedCallback(onChange);
+	const ref = useRef({
+		value: false,
+		clearPreviousDebounce: () => {}
+	});
+	useEffect(function clearDebouncedOnUnmount() {
+		const current = ref.current;
+		return () => {
+			current.clearPreviousDebounce();
+		};
+	}, []);
+	const edges = useMemo(() => {
+		const _edges = [];
+		if (leading) _edges.push("leading");
+		if (trailing) _edges.push("trailing");
+		return _edges;
+	}, [leading, trailing]);
+	return useCallback((nextValue) => {
+		if (nextValue === ref.current.value) return;
+		const debounced = debounce(() => {
+			handleChange(nextValue);
+			ref.current.value = nextValue;
+		}, timeThreshold, { edges });
+		ref.current.clearPreviousDebounce();
+		debounced();
+		ref.current.clearPreviousDebounce = debounced.cancel;
+	}, [
+		handleChange,
+		timeThreshold,
+		edges
+	]);
+}
+//#endregion
+export { useDebouncedCallback };

package/dist/hooks/useDoubleClick/index.d.cts

@@ -1,46 +1,3 @@
-import { MouseEvent } from 'react';
 
-type UseDoubleClickProps<E extends HTMLElement> = {
-    delay?: number;
-    click?: (event: MouseEvent<E>) => void;
-    doubleClick: (event: MouseEvent<E>) => void;
-};
-/**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
- * @description
- * `useDoubleClick` is a React hook that differentiates between single and double click events.
- * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
- *
- * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
- * @param {Object} props - Configuration options for click handling.
- * @param {number} [props.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
- * @param {(event: MouseEvent<E>) => void} [props.click] - The callback function to be executed on a single click.
- * @param {(event: MouseEvent<E>) => void} props.doubleClick - The callback function to be executed on a double click. Required.
- *
- * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
- *
- * @example
- * function GalleryCard() {
- *   const [selected, setSelected] = useState(false);
- *
- *   const handleClick = () => setSelected((prev) => !prev);
- *   const handleDoubleClick = () => alert('Zoom in!');
- *
- *   const handleEvent = useDoubleClick({
- *     click: handleClick,
- *     doubleClick: handleDoubleClick,
- *   });
- *
- *   return (
- *     <div onClick={handleEvent}>
- *       {selected ? 'Selected' : 'Not selected'}
- *     </div>
- *   );
- * }
- */
-declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
-
-export { useDoubleClick };
+import { useDoubleClick } from "./useDoubleClick.cjs";
+export { useDoubleClick };

package/dist/hooks/useDoubleClick/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useDoubleClick } from "./useDoubleClick.mjs";
+export { useDoubleClick };

package/dist/hooks/useDoubleClick/useDoubleClick.cjs

@@ -0,0 +1,64 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useDoubleClick/useDoubleClick.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useDoubleClick` is a React hook that differentiates between single and double click events.
+* It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+*
+* @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+* @param {Object} props - Configuration options for click handling.
+* @param {number} [props.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+* @param {(event: MouseEvent<E>) => void} [props.click] - The callback function to be executed on a single click.
+* @param {(event: MouseEvent<E>) => void} props.doubleClick - The callback function to be executed on a double click. Required.
+*
+* @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+*
+* @example
+* function GalleryCard() {
+*   const [selected, setSelected] = useState(false);
+*
+*   const handleClick = () => setSelected((prev) => !prev);
+*   const handleDoubleClick = () => alert('Zoom in!');
+*
+*   const handleEvent = useDoubleClick({
+*     click: handleClick,
+*     doubleClick: handleDoubleClick,
+*   });
+*
+*   return (
+*     <div onClick={handleEvent}>
+*       {selected ? 'Selected' : 'Not selected'}
+*     </div>
+*   );
+* }
+*/
+function useDoubleClick({ delay = 250, click, doubleClick }) {
+	const clickTimeout = (0, react.useRef)(null);
+	const clearClickTimeout = require_usePreservedCallback.usePreservedCallback(() => {
+		if (clickTimeout.current != null) {
+			window.clearTimeout(clickTimeout.current);
+			clickTimeout.current = null;
+		}
+	});
+	(0, react.useEffect)(() => () => clearClickTimeout(), [clearClickTimeout]);
+	return (0, react.useCallback)((event) => {
+		clearClickTimeout();
+		if (click && event.detail === 1) clickTimeout.current = window.setTimeout(() => {
+			click(event);
+		}, delay);
+		if (event.detail === 2) doubleClick(event);
+	}, [
+		click,
+		doubleClick,
+		delay,
+		clearClickTimeout
+	]);
+}
+//#endregion
+exports.useDoubleClick = useDoubleClick;

package/{esm/hooks/useDoubleClick/index.d.ts → dist/hooks/useDoubleClick/useDoubleClick.d.cts}

@@ -1,9 +1,10 @@
-import { MouseEvent } from 'react';
 
+import { MouseEvent } from "react";
+//#region src/hooks/useDoubleClick/useDoubleClick.d.ts
 type UseDoubleClickProps<E extends HTMLElement> = {
-    delay?: number;
-    click?: (event: MouseEvent<E>) => void;
-    doubleClick: (event: MouseEvent<E>) => void;
+  delay?: number;
+  click?: (event: MouseEvent<E>) => void;
+  doubleClick: (event: MouseEvent<E>) => void;
 };
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
@@ -41,6 +42,6 @@ type UseDoubleClickProps<E extends HTMLElement> = {
  *   );
  * }
  */
-declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
-
-export { useDoubleClick };
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+//#endregion
+export { useDoubleClick };

package/dist/hooks/useDoubleClick/useDoubleClick.d.mts

@@ -0,0 +1,47 @@
+
+import { MouseEvent } from "react";
+//#region src/hooks/useDoubleClick/useDoubleClick.d.ts
+type UseDoubleClickProps<E extends HTMLElement> = {
+  delay?: number;
+  click?: (event: MouseEvent<E>) => void;
+  doubleClick: (event: MouseEvent<E>) => void;
+};
+/**
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
+ * This hook will be removed in a future major version.
+ *
+ * @description
+ * `useDoubleClick` is a React hook that differentiates between single and double click events.
+ * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+ *
+ * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+ * @param {Object} props - Configuration options for click handling.
+ * @param {number} [props.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [props.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} props.doubleClick - The callback function to be executed on a double click. Required.
+ *
+ * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+ *
+ * @example
+ * function GalleryCard() {
+ *   const [selected, setSelected] = useState(false);
+ *
+ *   const handleClick = () => setSelected((prev) => !prev);
+ *   const handleDoubleClick = () => alert('Zoom in!');
+ *
+ *   const handleEvent = useDoubleClick({
+ *     click: handleClick,
+ *     doubleClick: handleDoubleClick,
+ *   });
+ *
+ *   return (
+ *     <div onClick={handleEvent}>
+ *       {selected ? 'Selected' : 'Not selected'}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+//#endregion
+export { useDoubleClick };

package/dist/hooks/useDoubleClick/useDoubleClick.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/useDoubleClick/useDoubleClick.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useDoubleClick` is a React hook that differentiates between single and double click events.
+* It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+*
+* @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+* @param {Object} props - Configuration options for click handling.
+* @param {number} [props.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+* @param {(event: MouseEvent<E>) => void} [props.click] - The callback function to be executed on a single click.
+* @param {(event: MouseEvent<E>) => void} props.doubleClick - The callback function to be executed on a double click. Required.
+*
+* @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+*
+* @example
+* function GalleryCard() {
+*   const [selected, setSelected] = useState(false);
+*
+*   const handleClick = () => setSelected((prev) => !prev);
+*   const handleDoubleClick = () => alert('Zoom in!');
+*
+*   const handleEvent = useDoubleClick({
+*     click: handleClick,
+*     doubleClick: handleDoubleClick,
+*   });
+*
+*   return (
+*     <div onClick={handleEvent}>
+*       {selected ? 'Selected' : 'Not selected'}
+*     </div>
+*   );
+* }
+*/
+function useDoubleClick({ delay = 250, click, doubleClick }) {
+	const clickTimeout = useRef(null);
+	const clearClickTimeout = usePreservedCallback(() => {
+		if (clickTimeout.current != null) {
+			window.clearTimeout(clickTimeout.current);
+			clickTimeout.current = null;
+		}
+	});
+	useEffect(() => () => clearClickTimeout(), [clearClickTimeout]);
+	return useCallback((event) => {
+		clearClickTimeout();
+		if (click && event.detail === 1) clickTimeout.current = window.setTimeout(() => {
+			click(event);
+		}, delay);
+		if (event.detail === 2) doubleClick(event);
+	}, [
+		click,
+		doubleClick,
+		delay,
+		clearClickTimeout
+	]);
+}
+//#endregion
+export { useDoubleClick };