@mantine/hooks 9.0.1 → 9.1.0

package/cjs/index.cjs

@@ -85,10 +85,15 @@ const require_use_selection = require("./use-selection/use-selection.cjs");
 const require_use_floating_window = require("./use-floating-window/use-floating-window.cjs");
 const require_use_collapse = require("./use-collapse/use-collapse.cjs");
 const require_use_horizontal_collapse = require("./use-collapse/use-horizontal-collapse.cjs");
+const require_use_mask = require("./use-mask/use-mask.cjs");
+const require_use_roving_index = require("./use-roving-index/use-roving-index.cjs");
 exports.assignRef = require_use_merged_ref.assignRef;
 exports.clamp = require_clamp.clamp;
 exports.clampUseMovePosition = require_use_move.clampUseMovePosition;
+exports.formatMask = require_use_mask.formatMask;
+exports.generatePattern = require_use_mask.generatePattern;
 exports.getHotkeyHandler = require_parse_hotkey.getHotkeyHandler;
+exports.isMaskComplete = require_use_mask.isMaskComplete;
 exports.lowerFirst = require_lower_first.lowerFirst;
 exports.mergeRefs = require_use_merged_ref.mergeRefs;
 exports.normalizeRadialValue = require_use_radial_move.normalizeRadialValue;
@@ -97,6 +102,7 @@ exports.range = require_range.range;
 exports.readLocalStorageValue = require_use_local_storage.readLocalStorageValue;
 exports.readSessionStorageValue = require_use_session_storage.readSessionStorageValue;
 exports.shallowEqual = require_shallow_equal.shallowEqual;
+exports.unformatMask = require_use_mask.unformatMask;
 exports.upperFirst = require_upper_first.upperFirst;
 exports.useCallbackRef = require_use_callback_ref.useCallbackRef;
 exports.useClickOutside = require_use_click_outside.useClickOutside;
@@ -142,6 +148,7 @@ exports.useLocalStorage = require_use_local_storage.useLocalStorage;
 exports.useLogger = require_use_logger.useLogger;
 exports.useLongPress = require_use_long_press.useLongPress;
 exports.useMap = require_use_map.useMap;
+exports.useMask = require_use_mask.useMask;
 exports.useMediaQuery = require_use_media_query.useMediaQuery;
 exports.useMergedRef = require_use_merged_ref.useMergedRef;
 exports.useMounted = require_use_mounted.useMounted;
@@ -160,6 +167,7 @@ exports.useQueue = require_use_queue.useQueue;
 exports.useRadialMove = require_use_radial_move.useRadialMove;
 exports.useReducedMotion = require_use_reduced_motion.useReducedMotion;
 exports.useResizeObserver = require_use_resize_observer.useResizeObserver;
+exports.useRovingIndex = require_use_roving_index.useRovingIndex;
 exports.useScrollDirection = require_use_scroll_direction.useScrollDirection;
 exports.useScrollIntoView = require_use_scroll_into_view.useScrollIntoView;
 exports.useScrollSpy = require_use_scroll_spy.useScrollSpy;

package/cjs/use-click-outside/use-click-outside.cjs

@@ -2,22 +2,25 @@
 let react = require("react");
 //#region packages/@mantine/hooks/src/use-click-outside/use-click-outside.ts
 const DEFAULT_EVENTS = ["mousedown", "touchstart"];
-function useClickOutside(callback, events, nodes) {
+function useClickOutside(callback, events, nodes, enabled = true) {
 	const ref = (0, react.useRef)(null);
 	const eventsList = events || DEFAULT_EVENTS;
 	const listener = (0, react.useEffectEvent)((event) => {
 		const { target } = event ?? {};
-		if (Array.isArray(nodes)) {
-			const shouldIgnore = !document.body.contains(target) && target?.tagName !== "HTML";
-			nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && callback(event);
-		} else if (ref.current && !ref.current.contains(target)) callback(event);
+		if (!document.body.contains(target) && target?.tagName !== "HTML") return;
+		const path = event.composedPath();
+		if (Array.isArray(nodes)) nodes.every((node) => !!node && !path.includes(node)) && callback(event);
+		else if (ref.current && !path.includes(ref.current)) callback(event);
 	});
+	const eventsKey = eventsList.join(",");
 	(0, react.useEffect)(() => {
-		eventsList.forEach((fn) => document.addEventListener(fn, listener));
+		if (!enabled) return;
+		const events = eventsKey.split(",");
+		events.forEach((fn) => document.addEventListener(fn, listener));
 		return () => {
-			eventsList.forEach((fn) => document.removeEventListener(fn, listener));
+			events.forEach((fn) => document.removeEventListener(fn, listener));
 		};
-	}, []);
+	}, [eventsKey, enabled]);
 	return ref;
 }
 //#endregion

package/cjs/use-click-outside/use-click-outside.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-click-outside.cjs","names":[],"sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\ntype EventType = MouseEvent | TouchEvent;\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  callback: (event: EventType) => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[]\n) {\n  const ref = useRef<T>(null);\n  const eventsList = events || DEFAULT_EVENTS;\n\n  const listener = useEffectEvent((event: Event) => {\n    const { target } = event ?? {};\n    if (Array.isArray(nodes)) {\n      const shouldIgnore =\n        !document.body.contains(target as Node) && (target as Element)?.tagName !== 'HTML';\n      const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n      shouldTrigger && !shouldIgnore && callback(event as EventType);\n    } else if (ref.current && !ref.current.contains(target as Node)) {\n      callback(event as EventType);\n    }\n  });\n\n  useEffect(() => {\n    eventsList.forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      eventsList.forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, []);\n\n  return ref;\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB,CAAC,aAAa,aAAa;AAElD,SAAgB,gBACd,UACA,QACA,OACA;CACA,MAAM,OAAA,GAAA,MAAA,QAAgB,KAAK;CAC3B,MAAM,aAAa,UAAU;CAE7B,MAAM,YAAA,GAAA,MAAA,iBAA2B,UAAiB;EAChD,MAAM,EAAE,WAAW,SAAS,EAAE;AAC9B,MAAI,MAAM,QAAQ,MAAM,EAAE;GACxB,MAAM,eACJ,CAAC,SAAS,KAAK,SAAS,OAAe,IAAK,QAAoB,YAAY;AACxD,SAAM,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAM,cAAc,CAAC,SAAS,KAAK,CAAC,IAC1E,CAAC,gBAAgB,SAAS,MAAmB;aACrD,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,OAAe,CAC7D,UAAS,MAAmB;GAE9B;AAEF,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,SAAS,OAAO,SAAS,iBAAiB,IAAI,SAAS,CAAC;AAEnE,eAAa;AACX,cAAW,SAAS,OAAO,SAAS,oBAAoB,IAAI,SAAS,CAAC;;IAEvE,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"use-click-outside.cjs","names":[],"sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\ntype EventType = MouseEvent | TouchEvent;\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  callback: (event: EventType) => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n  enabled: boolean = true\n) {\n  const ref = useRef<T>(null);\n  const eventsList = events || DEFAULT_EVENTS;\n\n  const listener = useEffectEvent((event: Event) => {\n    const { target } = event ?? {};\n    const shouldIgnore =\n      !document.body.contains(target as Node) && (target as Element)?.tagName !== 'HTML';\n\n    if (shouldIgnore) {\n      return;\n    }\n\n    const path = event.composedPath();\n\n    if (Array.isArray(nodes)) {\n      const shouldTrigger = nodes.every((node) => !!node && !path.includes(node));\n      shouldTrigger && callback(event as EventType);\n    } else if (ref.current && !path.includes(ref.current)) {\n      callback(event as EventType);\n    }\n  });\n\n  const eventsKey = eventsList.join(',');\n\n  useEffect(() => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    const events = eventsKey.split(',');\n    events.forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      events.forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, [eventsKey, enabled]);\n\n  return ref;\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB,CAAC,aAAa,aAAa;AAElD,SAAgB,gBACd,UACA,QACA,OACA,UAAmB,MACnB;CACA,MAAM,OAAA,GAAA,MAAA,QAAgB,KAAK;CAC3B,MAAM,aAAa,UAAU;CAE7B,MAAM,YAAA,GAAA,MAAA,iBAA2B,UAAiB;EAChD,MAAM,EAAE,WAAW,SAAS,EAAE;AAI9B,MAFE,CAAC,SAAS,KAAK,SAAS,OAAe,IAAK,QAAoB,YAAY,OAG5E;EAGF,MAAM,OAAO,MAAM,cAAc;AAEjC,MAAI,MAAM,QAAQ,MAAM,CACA,OAAM,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,SAAS,KAAK,CAAC,IAC1D,SAAS,MAAmB;WACpC,IAAI,WAAW,CAAC,KAAK,SAAS,IAAI,QAAQ,CACnD,UAAS,MAAmB;GAE9B;CAEF,MAAM,YAAY,WAAW,KAAK,IAAI;AAEtC,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,SAAS,UAAU,MAAM,IAAI;AACnC,SAAO,SAAS,OAAO,SAAS,iBAAiB,IAAI,SAAS,CAAC;AAE/D,eAAa;AACX,UAAO,SAAS,OAAO,SAAS,oBAAoB,IAAI,SAAS,CAAC;;IAEnE,CAAC,WAAW,QAAQ,CAAC;AAExB,QAAO"}

package/cjs/use-clipboard/use-clipboard.cjs

@@ -1,23 +1,30 @@
 "use client";
 let react = require("react");
 //#region packages/@mantine/hooks/src/use-clipboard/use-clipboard.ts
-function useClipboard(options = { timeout: 2e3 }) {
+function useClipboard(options = {}) {
+	const timeout = options.timeout ?? 2e3;
 	const [error, setError] = (0, react.useState)(null);
 	const [copied, setCopied] = (0, react.useState)(false);
-	const [copyTimeout, setCopyTimeout] = (0, react.useState)(null);
+	const timeoutRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		window.clearTimeout(timeoutRef.current);
+	}, []);
 	const handleCopyResult = (value) => {
-		window.clearTimeout(copyTimeout);
-		setCopyTimeout(window.setTimeout(() => setCopied(false), options.timeout));
+		window.clearTimeout(timeoutRef.current);
+		timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
 		setCopied(value);
 	};
 	const copy = (value) => {
-		if ("clipboard" in navigator) navigator.clipboard.writeText(value).then(() => handleCopyResult(true)).catch((err) => setError(err));
+		if ("clipboard" in navigator) navigator.clipboard.writeText(value).then(() => {
+			setError(null);
+			handleCopyResult(true);
+		}).catch((err) => setError(err));
 		else setError(/* @__PURE__ */ new Error("useClipboard: navigator.clipboard is not supported"));
 	};
 	const reset = () => {
 		setCopied(false);
 		setError(null);
-		window.clearTimeout(copyTimeout);
+		window.clearTimeout(timeoutRef.current);
 	};
 	return {
 		copy,

package/cjs/use-clipboard/use-clipboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-clipboard.cjs","names":[],"sources":["../../src/use-clipboard/use-clipboard.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface UseClipboardInput {\n  /** Time in ms after which the copied state will reset, `2000` by default */\n  timeout?: number;\n}\n\nexport interface UseClipboardReturnValue {\n  /** Function to copy value to clipboard */\n  copy: (value: any) => void;\n\n  /** Function to reset copied state and error */\n  reset: () => void;\n\n  /** Error if copying failed */\n  error: Error | null;\n\n  /** Boolean indicating if the value was copied successfully */\n  copied: boolean;\n}\n\nexport function useClipboard(\n  options: UseClipboardInput = { timeout: 2000 }\n): UseClipboardReturnValue {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState(false);\n  const [copyTimeout, setCopyTimeout] = useState<number | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    window.clearTimeout(copyTimeout!);\n    setCopyTimeout(window.setTimeout(() => setCopied(false), options.timeout));\n    setCopied(value);\n  };\n\n  const copy = (value: any) => {\n    if ('clipboard' in navigator) {\n      navigator.clipboard\n        .writeText(value)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error('useClipboard: navigator.clipboard is not supported'));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    window.clearTimeout(copyTimeout!);\n  };\n\n  return { copy, reset, error, copied };\n}\n\nexport namespace useClipboard {\n  export type Input = UseClipboardInput;\n  export type ReturnValue = UseClipboardReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,aACd,UAA6B,EAAE,SAAS,KAAM,EACrB;CACzB,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAmC,KAAK;CACtD,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,MAAM;CAC3C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA0C,KAAK;CAEnE,MAAM,oBAAoB,UAAmB;AAC3C,SAAO,aAAa,YAAa;AACjC,iBAAe,OAAO,iBAAiB,UAAU,MAAM,EAAE,QAAQ,QAAQ,CAAC;AAC1E,YAAU,MAAM;;CAGlB,MAAM,QAAQ,UAAe;AAC3B,MAAI,eAAe,UACjB,WAAU,UACP,UAAU,MAAM,CAChB,WAAW,iBAAiB,KAAK,CAAC,CAClC,OAAO,QAAQ,SAAS,IAAI,CAAC;MAEhC,0BAAS,IAAI,MAAM,qDAAqD,CAAC;;CAI7E,MAAM,cAAc;AAClB,YAAU,MAAM;AAChB,WAAS,KAAK;AACd,SAAO,aAAa,YAAa;;AAGnC,QAAO;EAAE;EAAM;EAAO;EAAO;EAAQ"}
+{"version":3,"file":"use-clipboard.cjs","names":[],"sources":["../../src/use-clipboard/use-clipboard.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UseClipboardInput {\n  /** Time in ms after which the copied state will reset, `2000` by default */\n  timeout?: number;\n}\n\nexport interface UseClipboardReturnValue {\n  /** Function to copy value to clipboard */\n  copy: (value: any) => void;\n\n  /** Function to reset copied state and error */\n  reset: () => void;\n\n  /** Error if copying failed */\n  error: Error | null;\n\n  /** Boolean indicating if the value was copied successfully */\n  copied: boolean;\n}\n\nexport function useClipboard(options: UseClipboardInput = {}): UseClipboardReturnValue {\n  const timeout = options.timeout ?? 2000;\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(timeoutRef.current!);\n    },\n    []\n  );\n\n  const handleCopyResult = (value: boolean) => {\n    window.clearTimeout(timeoutRef.current!);\n    timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);\n    setCopied(value);\n  };\n\n  const copy = (value: any) => {\n    if ('clipboard' in navigator) {\n      navigator.clipboard\n        .writeText(value)\n        .then(() => {\n          setError(null);\n          handleCopyResult(true);\n        })\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error('useClipboard: navigator.clipboard is not supported'));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    window.clearTimeout(timeoutRef.current!);\n  };\n\n  return { copy, reset, error, copied };\n}\n\nexport namespace useClipboard {\n  export type Input = UseClipboardInput;\n  export type ReturnValue = UseClipboardReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,aAAa,UAA6B,EAAE,EAA2B;CACrF,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAmC,KAAK;CACtD,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,MAAM;CAC3C,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;AAE9C,EAAA,GAAA,MAAA,uBACc;AACV,SAAO,aAAa,WAAW,QAAS;IAE1C,EAAE,CACH;CAED,MAAM,oBAAoB,UAAmB;AAC3C,SAAO,aAAa,WAAW,QAAS;AACxC,aAAW,UAAU,OAAO,iBAAiB,UAAU,MAAM,EAAE,QAAQ;AACvE,YAAU,MAAM;;CAGlB,MAAM,QAAQ,UAAe;AAC3B,MAAI,eAAe,UACjB,WAAU,UACP,UAAU,MAAM,CAChB,WAAW;AACV,YAAS,KAAK;AACd,oBAAiB,KAAK;IACtB,CACD,OAAO,QAAQ,SAAS,IAAI,CAAC;MAEhC,0BAAS,IAAI,MAAM,qDAAqD,CAAC;;CAI7E,MAAM,cAAc;AAClB,YAAU,MAAM;AAChB,WAAS,KAAK;AACd,SAAO,aAAa,WAAW,QAAS;;AAG1C,QAAO;EAAE;EAAM;EAAO;EAAO;EAAQ"}

package/cjs/use-collapse/use-collapse.cjs

@@ -32,7 +32,7 @@ function useCollapse({ transitionDuration, transitionTimingFunction = "ease", on
 		}));
 	};
 	const getTransitionStyles = (height) => {
-		const duration = transitionDuration || getAutoHeightDuration(height);
+		const duration = transitionDuration ?? getAutoHeightDuration(height);
 		return { transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}` };
 	};
 	require_use_did_update.useDidUpdate(() => {

package/cjs/use-collapse/use-collapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-collapse.cjs","names":["mergeRefs"],"sources":["../../src/use-collapse/use-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoHeightDuration(height: number | string) {\n  if (!height || typeof height === 'string') {\n    return 0;\n  }\n  const constant = height / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollHeight : 'auto';\n}\n\nexport interface UseCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content height */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseCollapseReturnValue {\n  /** Current transition state */\n  state: UseCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (input?: GetCollapsePropsInput) => GetCollapsePropsReturnValue;\n}\n\nexport function useCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseCollapseInput): UseCollapseReturnValue {\n  const collapsedStyles = {\n    height: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (height: number | string) => {\n    const duration = transitionDuration || getAutoHeightDuration(height);\n    return {\n      transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const height = getElementHeight(elementRef);\n          mergeStyles({ ...getTransitionStyles(height), height });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const height = getElementHeight(elementRef);\n        mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n        window.requestAnimationFrame(() => mergeStyles({ height: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'height') {\n      return;\n    }\n\n    if (expanded) {\n      const height = getElementHeight(elementRef);\n\n      if (height === styles.height) {\n        setStyles({});\n      } else {\n        mergeStyles({ height });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.height === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useCollapse {\n  export type Input = UseCollapseInput;\n  export type ReturnValue = UseCollapseReturnValue;\n  export type State = UseCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,sBAAsB,QAAyB;AACtD,KAAI,CAAC,UAAU,OAAO,WAAW,SAC/B,QAAO;CAET,MAAM,WAAW,SAAS;AAC1B,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,iBAAiB,YAAiD;AAChF,QAAO,WAAW,UAAU,WAAW,QAAQ,eAAe;;AA8ChE,SAAgB,YAAY,EAC1B,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC2C;CAC3C,MAAM,kBAAkB;EACtB,QAAQ;EACR,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,0BAAA,GAAA,MAAA,sBAA8C,qBAAqB,CAAC;CAE1E,MAAM,cAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,QAAQ,iBAAA,GAAA,MAAA,UAAwC,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAuC,WAAW,YAAY,SAAS;CACrF,MAAM,aAAa,cAAmD;AACpE,GAAA,GAAA,UAAA,iBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,WAA4B;EACvD,MAAM,WAAW,sBAAsB,sBAAsB,OAAO;AACpE,SAAO,EACL,YAAY,UAAU,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACxF;;AAGH,wBAAA,mBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAU,SAAS;IAAS,UAAU;IAAU,CAAC;AAC3E,UAAO,4BAA4B;IACjC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,gBAAY;KAAE,GAAG,oBAAoB,OAAO;KAAE;KAAQ,CAAC;KACvD;IACF;MAEF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,eAAY;IAAE,GAAG,oBAAoB,OAAO;IAAE,YAAY;IAAU;IAAQ,CAAC;AAC7E,UAAO,4BAA4B,YAAY;IAAE,QAAQ;IAAG,UAAU;IAAU,CAAC,CAAC;IAClF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,SAChE;AAGF,MAAI,UAAU;GACZ,MAAM,SAAS,iBAAiB,WAAW;AAE3C,OAAI,WAAW,OAAO,OACpB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,QAAQ,CAAC;AAGzB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,WAAW,GAAG;AAC9B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAKA,uBAAAA,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}
+{"version":3,"file":"use-collapse.cjs","names":["mergeRefs"],"sources":["../../src/use-collapse/use-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoHeightDuration(height: number | string) {\n  if (!height || typeof height === 'string') {\n    return 0;\n  }\n  const constant = height / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollHeight : 'auto';\n}\n\nexport interface UseCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content height */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseCollapseReturnValue {\n  /** Current transition state */\n  state: UseCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (input?: GetCollapsePropsInput) => GetCollapsePropsReturnValue;\n}\n\nexport function useCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseCollapseInput): UseCollapseReturnValue {\n  const collapsedStyles = {\n    height: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (height: number | string) => {\n    const duration = transitionDuration ?? getAutoHeightDuration(height);\n    return {\n      transition: `height ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const height = getElementHeight(elementRef);\n          mergeStyles({ ...getTransitionStyles(height), height });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const height = getElementHeight(elementRef);\n        mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n        window.requestAnimationFrame(() => mergeStyles({ height: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'height') {\n      return;\n    }\n\n    if (expanded) {\n      const height = getElementHeight(elementRef);\n\n      if (height === styles.height) {\n        setStyles({});\n      } else {\n        mergeStyles({ height });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.height === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useCollapse {\n  export type Input = UseCollapseInput;\n  export type ReturnValue = UseCollapseReturnValue;\n  export type State = UseCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,sBAAsB,QAAyB;AACtD,KAAI,CAAC,UAAU,OAAO,WAAW,SAC/B,QAAO;CAET,MAAM,WAAW,SAAS;AAC1B,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,iBAAiB,YAAiD;AAChF,QAAO,WAAW,UAAU,WAAW,QAAQ,eAAe;;AA8ChE,SAAgB,YAAY,EAC1B,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC2C;CAC3C,MAAM,kBAAkB;EACtB,QAAQ;EACR,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,0BAAA,GAAA,MAAA,sBAA8C,qBAAqB,CAAC;CAE1E,MAAM,cAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,QAAQ,iBAAA,GAAA,MAAA,UAAwC,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAuC,WAAW,YAAY,SAAS;CACrF,MAAM,aAAa,cAAmD;AACpE,GAAA,GAAA,UAAA,iBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,WAA4B;EACvD,MAAM,WAAW,sBAAsB,sBAAsB,OAAO;AACpE,SAAO,EACL,YAAY,UAAU,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACxF;;AAGH,wBAAA,mBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAU,SAAS;IAAS,UAAU;IAAU,CAAC;AAC3E,UAAO,4BAA4B;IACjC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,gBAAY;KAAE,GAAG,oBAAoB,OAAO;KAAE;KAAQ,CAAC;KACvD;IACF;MAEF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,SAAS,iBAAiB,WAAW;AAC3C,eAAY;IAAE,GAAG,oBAAoB,OAAO;IAAE,YAAY;IAAU;IAAQ,CAAC;AAC7E,UAAO,4BAA4B,YAAY;IAAE,QAAQ;IAAG,UAAU;IAAU,CAAC,CAAC;IAClF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,SAChE;AAGF,MAAI,UAAU;GACZ,MAAM,SAAS,iBAAiB,WAAW;AAE3C,OAAI,WAAW,OAAO,OACpB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,QAAQ,CAAC;AAGzB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,WAAW,GAAG;AAC9B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAKA,uBAAAA,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}

package/cjs/use-collapse/use-horizontal-collapse.cjs

@@ -18,6 +18,7 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 		overflow: "hidden",
 		...keepMounted ? {} : { display: "none" }
 	};
+	const onTransitionStartEvent = (0, react.useEffectEvent)(() => onTransitionStart?.());
 	const elementRef = (0, react.useRef)(null);
 	const [styles, setStylesRaw] = (0, react.useState)(expanded ? {} : collapsedStyles);
 	const [state, setState] = (0, react.useState)(expanded ? "entered" : "exited");
@@ -31,11 +32,11 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 		}));
 	};
 	const getTransitionStyles = (width) => {
-		const duration = transitionDuration || getAutoWidthDuration(width);
+		const duration = transitionDuration ?? getAutoWidthDuration(width);
 		return { transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}` };
 	};
 	require_use_did_update.useDidUpdate(() => {
-		if (transitionDuration !== 0) onTransitionStart?.();
+		if (transitionDuration !== 0) onTransitionStartEvent();
 		if (expanded) window.requestAnimationFrame(() => {
 			(0, react_dom.flushSync)(() => setState("entering"));
 			mergeStyles({
@@ -64,7 +65,7 @@ function useHorizontalCollapse({ transitionDuration, transitionTimingFunction =
 				overflow: "hidden"
 			}));
 		});
-	}, [expanded, onTransitionStart]);
+	}, [expanded]);
 	const handleTransitionEnd = (event) => {
 		if (event.target !== elementRef.current || event.propertyName !== "width") return;
 		if (expanded) {

package/cjs/use-collapse/use-horizontal-collapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-horizontal-collapse.cjs","names":["mergeRefs"],"sources":["../../src/use-collapse/use-horizontal-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoWidthDuration(width: number | string) {\n  if (!width || typeof width === 'string') {\n    return 0;\n  }\n  const constant = width / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementWidth(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollWidth : 'auto';\n}\n\nexport interface UseHorizontalCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content width */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetHorizontalCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetHorizontalCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseHorizontalCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseHorizontalCollapseReturnValue {\n  /** Current transition state */\n  state: UseHorizontalCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (\n    input?: GetHorizontalCollapsePropsInput\n  ) => GetHorizontalCollapsePropsReturnValue;\n}\n\nexport function useHorizontalCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseHorizontalCollapseInput): UseHorizontalCollapseReturnValue {\n  const collapsedStyles = {\n    width: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseHorizontalCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (width: number | string) => {\n    const duration = transitionDuration || getAutoWidthDuration(width);\n    return {\n      transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStart?.();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'width', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const width = getElementWidth(elementRef);\n          mergeStyles({ ...getTransitionStyles(width), width });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const width = getElementWidth(elementRef);\n        mergeStyles({ ...getTransitionStyles(width), willChange: 'width', width });\n        window.requestAnimationFrame(() => mergeStyles({ width: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded, onTransitionStart]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'width') {\n      return;\n    }\n\n    if (expanded) {\n      const width = getElementWidth(elementRef);\n\n      if (width === styles.width) {\n        setStyles({});\n      } else {\n        mergeStyles({ width });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.width === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n"],"mappings":";;;;;;AAKA,SAAS,qBAAqB,OAAwB;AACpD,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;CAET,MAAM,WAAW,QAAQ;AACzB,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,gBAAgB,YAAiD;AAC/E,QAAO,WAAW,UAAU,WAAW,QAAQ,cAAc;;AAgD/D,SAAgB,sBAAsB,EACpC,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC+D;CAC/D,MAAM,kBAAkB;EACtB,OAAO;EACP,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,cAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,QAAQ,iBAAA,GAAA,MAAA,UAAwC,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAiD,WAAW,YAAY,SAAS;CAC/F,MAAM,aAAa,cAAmD;AACpE,GAAA,GAAA,UAAA,iBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,UAA2B;EACtD,MAAM,WAAW,sBAAsB,qBAAqB,MAAM;AAClE,SAAO,EACL,YAAY,SAAS,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACvF;;AAGH,wBAAA,mBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,sBAAqB;AAGvB,MAAI,SACF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAS,SAAS;IAAS,UAAU;IAAU,CAAC;AAC1E,UAAO,4BAA4B;IACjC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,gBAAY;KAAE,GAAG,oBAAoB,MAAM;KAAE;KAAO,CAAC;KACrD;IACF;MAEF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,eAAY;IAAE,GAAG,oBAAoB,MAAM;IAAE,YAAY;IAAS;IAAO,CAAC;AAC1E,UAAO,4BAA4B,YAAY;IAAE,OAAO;IAAG,UAAU;IAAU,CAAC,CAAC;IACjF;IAEH,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,QAChE;AAGF,MAAI,UAAU;GACZ,MAAM,QAAQ,gBAAgB,WAAW;AAEzC,OAAI,UAAU,OAAO,MACnB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,OAAO,CAAC;AAGxB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,UAAU,GAAG;AAC7B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAKA,uBAAAA,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}
+{"version":3,"file":"use-horizontal-collapse.cjs","names":["mergeRefs"],"sources":["../../src/use-collapse/use-horizontal-collapse.ts"],"sourcesContent":["import React, { CSSProperties, useEffectEvent, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\nimport { mergeRefs } from '../use-merged-ref/use-merged-ref';\n\nfunction getAutoWidthDuration(width: number | string) {\n  if (!width || typeof width === 'string') {\n    return 0;\n  }\n  const constant = width / 36;\n  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementWidth(elementRef: React.RefObject<HTMLElement | null>) {\n  return elementRef.current ? elementRef.current.scrollWidth : 'auto';\n}\n\nexport interface UseHorizontalCollapseInput {\n  /** Expanded state  */\n  expanded: boolean;\n\n  /** Transition duration in milliseconds, by default calculated based on content width */\n  transitionDuration?: number;\n\n  /** Transition timing function, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Called when transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */\n  keepMounted?: boolean;\n}\n\ninterface GetHorizontalCollapsePropsInput {\n  style?: CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface GetHorizontalCollapsePropsReturnValue {\n  'aria-hidden': boolean;\n  inert: boolean;\n  ref: React.RefCallback<HTMLDivElement>;\n  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;\n  style: React.CSSProperties;\n}\n\nexport type UseHorizontalCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';\n\nexport interface UseHorizontalCollapseReturnValue {\n  /** Current transition state */\n  state: UseHorizontalCollapseState;\n\n  /** Props to pass down to the collapsible element */\n  getCollapseProps: (\n    input?: GetHorizontalCollapsePropsInput\n  ) => GetHorizontalCollapsePropsReturnValue;\n}\n\nexport function useHorizontalCollapse({\n  transitionDuration,\n  transitionTimingFunction = 'ease',\n  onTransitionEnd,\n  onTransitionStart,\n  expanded,\n  keepMounted,\n}: UseHorizontalCollapseInput): UseHorizontalCollapseReturnValue {\n  const collapsedStyles = {\n    width: 0,\n    overflow: 'hidden',\n    ...(keepMounted ? {} : { display: 'none' }),\n  };\n\n  const onTransitionStartEvent = useEffectEvent(() => onTransitionStart?.());\n\n  const elementRef = useRef<HTMLElement>(null);\n  const [styles, setStylesRaw] = useState<CSSProperties>(expanded ? {} : collapsedStyles);\n  const [state, setState] = useState<UseHorizontalCollapseState>(expanded ? 'entered' : 'exited');\n  const setStyles = (newStyles: React.SetStateAction<CSSProperties>) => {\n    flushSync(() => setStylesRaw(newStyles));\n  };\n\n  const mergeStyles = (newStyles: CSSProperties) => {\n    setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n  };\n\n  const getTransitionStyles = (width: number | string) => {\n    const duration = transitionDuration ?? getAutoWidthDuration(width);\n    return {\n      transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}`,\n    };\n  };\n\n  useDidUpdate(() => {\n    const shouldTransition = transitionDuration !== 0;\n\n    if (shouldTransition) {\n      onTransitionStartEvent();\n    }\n\n    if (expanded) {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('entering'));\n        mergeStyles({ willChange: 'width', display: 'block', overflow: 'hidden' });\n        window.requestAnimationFrame(() => {\n          const width = getElementWidth(elementRef);\n          mergeStyles({ ...getTransitionStyles(width), width });\n        });\n      });\n    } else {\n      window.requestAnimationFrame(() => {\n        flushSync(() => setState('exiting'));\n        const width = getElementWidth(elementRef);\n        mergeStyles({ ...getTransitionStyles(width), willChange: 'width', width });\n        window.requestAnimationFrame(() => mergeStyles({ width: 0, overflow: 'hidden' }));\n      });\n    }\n  }, [expanded]);\n\n  const handleTransitionEnd = (event: React.TransitionEvent): void => {\n    if (event.target !== elementRef.current || event.propertyName !== 'width') {\n      return;\n    }\n\n    if (expanded) {\n      const width = getElementWidth(elementRef);\n\n      if (width === styles.width) {\n        setStyles({});\n      } else {\n        mergeStyles({ width });\n      }\n\n      setState('entered');\n      onTransitionEnd?.();\n    } else if (styles.width === 0) {\n      setStyles(collapsedStyles);\n      setState('exited');\n      onTransitionEnd?.();\n    }\n  };\n\n  return {\n    state,\n    getCollapseProps: (input) => ({\n      'aria-hidden': !expanded,\n      inert: !expanded,\n      ref: mergeRefs(elementRef, input?.ref),\n      onTransitionEnd: handleTransitionEnd,\n      style: { boxSizing: 'border-box', ...input?.style, ...styles },\n    }),\n  };\n}\n\nexport namespace useHorizontalCollapse {\n  export type Input = UseHorizontalCollapseInput;\n  export type ReturnValue = UseHorizontalCollapseReturnValue;\n  export type State = UseHorizontalCollapseState;\n}\n"],"mappings":";;;;;;AAKA,SAAS,qBAAqB,OAAwB;AACpD,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;CAET,MAAM,WAAW,QAAQ;AACzB,QAAO,KAAK,OAAO,IAAI,KAAK,YAAY,MAAO,WAAW,KAAK,GAAG;;AAGpE,SAAgB,gBAAgB,YAAiD;AAC/E,QAAO,WAAW,UAAU,WAAW,QAAQ,cAAc;;AAgD/D,SAAgB,sBAAsB,EACpC,oBACA,2BAA2B,QAC3B,iBACA,mBACA,UACA,eAC+D;CAC/D,MAAM,kBAAkB;EACtB,OAAO;EACP,UAAU;EACV,GAAI,cAAc,EAAE,GAAG,EAAE,SAAS,QAAQ;EAC3C;CAED,MAAM,0BAAA,GAAA,MAAA,sBAA8C,qBAAqB,CAAC;CAE1E,MAAM,cAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,QAAQ,iBAAA,GAAA,MAAA,UAAwC,WAAW,EAAE,GAAG,gBAAgB;CACvF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAiD,WAAW,YAAY,SAAS;CAC/F,MAAM,aAAa,cAAmD;AACpE,GAAA,GAAA,UAAA,iBAAgB,aAAa,UAAU,CAAC;;CAG1C,MAAM,eAAe,cAA6B;AAChD,aAAW,eAAe;GAAE,GAAG;GAAW,GAAG;GAAW,EAAE;;CAG5D,MAAM,uBAAuB,UAA2B;EACtD,MAAM,WAAW,sBAAsB,qBAAqB,MAAM;AAClE,SAAO,EACL,YAAY,SAAS,SAAS,KAAK,yBAAyB,YAAY,SAAS,KAAK,4BACvF;;AAGH,wBAAA,mBAAmB;AAGjB,MAFyB,uBAAuB,EAG9C,yBAAwB;AAG1B,MAAI,SACF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,WAAW,CAAC;AACrC,eAAY;IAAE,YAAY;IAAS,SAAS;IAAS,UAAU;IAAU,CAAC;AAC1E,UAAO,4BAA4B;IACjC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,gBAAY;KAAE,GAAG,oBAAoB,MAAM;KAAE;KAAO,CAAC;KACrD;IACF;MAEF,QAAO,4BAA4B;AACjC,IAAA,GAAA,UAAA,iBAAgB,SAAS,UAAU,CAAC;GACpC,MAAM,QAAQ,gBAAgB,WAAW;AACzC,eAAY;IAAE,GAAG,oBAAoB,MAAM;IAAE,YAAY;IAAS;IAAO,CAAC;AAC1E,UAAO,4BAA4B,YAAY;IAAE,OAAO;IAAG,UAAU;IAAU,CAAC,CAAC;IACjF;IAEH,CAAC,SAAS,CAAC;CAEd,MAAM,uBAAuB,UAAuC;AAClE,MAAI,MAAM,WAAW,WAAW,WAAW,MAAM,iBAAiB,QAChE;AAGF,MAAI,UAAU;GACZ,MAAM,QAAQ,gBAAgB,WAAW;AAEzC,OAAI,UAAU,OAAO,MACnB,WAAU,EAAE,CAAC;OAEb,aAAY,EAAE,OAAO,CAAC;AAGxB,YAAS,UAAU;AACnB,sBAAmB;aACV,OAAO,UAAU,GAAG;AAC7B,aAAU,gBAAgB;AAC1B,YAAS,SAAS;AAClB,sBAAmB;;;AAIvB,QAAO;EACL;EACA,mBAAmB,WAAW;GAC5B,eAAe,CAAC;GAChB,OAAO,CAAC;GACR,KAAKA,uBAAAA,UAAU,YAAY,OAAO,IAAI;GACtC,iBAAiB;GACjB,OAAO;IAAE,WAAW;IAAc,GAAG,OAAO;IAAO,GAAG;IAAQ;GAC/D;EACF"}

package/cjs/use-counter/use-counter.cjs

@@ -7,14 +7,23 @@ const DEFAULT_OPTIONS = {
 	max: Infinity
 };
 function useCounter(initialValue = 0, options) {
-	const { min, max } = {
+	const { min, max, step: _step = 1 } = {
 		...DEFAULT_OPTIONS,
 		...options
 	};
+	const step = Math.abs(_step);
 	const [count, setCount] = (0, react.useState)(require_clamp.clamp(initialValue, min, max));
 	return [count, {
-		increment: (0, react.useCallback)(() => setCount((current) => require_clamp.clamp(current + 1, min, max)), [min, max]),
-		decrement: (0, react.useCallback)(() => setCount((current) => require_clamp.clamp(current - 1, min, max)), [min, max]),
+		increment: (0, react.useCallback)(() => setCount((current) => require_clamp.clamp(current + step, min, max)), [
+			min,
+			max,
+			step
+		]),
+		decrement: (0, react.useCallback)(() => setCount((current) => require_clamp.clamp(current - step, min, max)), [
+			min,
+			max,
+			step
+		]),
 		set: (0, react.useCallback)((value) => setCount(require_clamp.clamp(value, min, max)), [min, max]),
 		reset: (0, react.useCallback)(() => setCount(require_clamp.clamp(initialValue, min, max)), [
 			initialValue,

package/cjs/use-counter/use-counter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-counter.cjs","names":["clamp"],"sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n  min: -Infinity,\n  max: Infinity,\n};\n\nexport interface UseCounterOptions {\n  min?: number;\n  max?: number;\n}\n\nexport interface UseCounterHandlers {\n  increment: () => void;\n  decrement: () => void;\n  set: (value: number) => void;\n  reset: () => void;\n}\n\nexport type UseCounterReturnValue = [number, UseCounterHandlers];\n\nexport function useCounter(initialValue = 0, options?: UseCounterOptions): UseCounterReturnValue {\n  const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n  const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n  const increment = useCallback(\n    () => setCount((current) => clamp(current + 1, min, max)),\n    [min, max]\n  );\n\n  const decrement = useCallback(\n    () => setCount((current) => clamp(current - 1, min, max)),\n    [min, max]\n  );\n\n  const set = useCallback((value: number) => setCount(clamp(value, min, max)), [min, max]);\n\n  const reset = useCallback(\n    () => setCount(clamp(initialValue, min, max)),\n    [initialValue, min, max]\n  );\n\n  return [count, { increment, decrement, set, reset }];\n}\n\nexport namespace useCounter {\n  export type Options = UseCounterOptions;\n  export type Handlers = UseCounterHandlers;\n  export type ReturnValue = UseCounterReturnValue;\n}\n"],"mappings":";;;;AAGA,MAAM,kBAAkB;CACtB,KAAK;CACL,KAAK;CACN;AAgBD,SAAgB,WAAW,eAAe,GAAG,SAAoD;CAC/F,MAAM,EAAE,KAAK,QAAQ;EAAE,GAAG;EAAiB,GAAG;EAAS;CACvD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAA6BA,cAAAA,MAAM,cAAc,KAAK,IAAI,CAAC;AAmBzE,QAAO,CAAC,OAAO;EAAE,YAAA,GAAA,MAAA,mBAhBT,UAAU,YAAYA,cAAAA,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,EACzD,CAAC,KAAK,IAAI,CACX;EAc2B,YAAA,GAAA,MAAA,mBAXpB,UAAU,YAAYA,cAAAA,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,EACzD,CAAC,KAAK,IAAI,CACX;EASsC,MAAA,GAAA,MAAA,cAPd,UAAkB,SAASA,cAAAA,MAAM,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;EAO5C,QAAA,GAAA,MAAA,mBAJpC,SAASA,cAAAA,MAAM,cAAc,KAAK,IAAI,CAAC,EAC7C;GAAC;GAAc;GAAK;GAAI,CACzB;EAEkD,CAAC"}
+{"version":3,"file":"use-counter.cjs","names":["clamp"],"sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n  min: -Infinity,\n  max: Infinity,\n};\n\nexport interface UseCounterOptions {\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\nexport interface UseCounterHandlers {\n  increment: () => void;\n  decrement: () => void;\n  set: (value: number) => void;\n  reset: () => void;\n}\n\nexport type UseCounterReturnValue = [number, UseCounterHandlers];\n\nexport function useCounter(initialValue = 0, options?: UseCounterOptions): UseCounterReturnValue {\n  const { min, max, step: _step = 1 } = { ...DEFAULT_OPTIONS, ...options };\n  const step = Math.abs(_step);\n  const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n  const increment = useCallback(\n    () => setCount((current) => clamp(current + step, min, max)),\n    [min, max, step]\n  );\n\n  const decrement = useCallback(\n    () => setCount((current) => clamp(current - step, min, max)),\n    [min, max, step]\n  );\n\n  const set = useCallback((value: number) => setCount(clamp(value, min, max)), [min, max]);\n\n  const reset = useCallback(\n    () => setCount(clamp(initialValue, min, max)),\n    [initialValue, min, max]\n  );\n\n  return [count, { increment, decrement, set, reset }];\n}\n\nexport namespace useCounter {\n  export type Options = UseCounterOptions;\n  export type Handlers = UseCounterHandlers;\n  export type ReturnValue = UseCounterReturnValue;\n}\n"],"mappings":";;;;AAGA,MAAM,kBAAkB;CACtB,KAAK;CACL,KAAK;CACN;AAiBD,SAAgB,WAAW,eAAe,GAAG,SAAoD;CAC/F,MAAM,EAAE,KAAK,KAAK,MAAM,QAAQ,MAAM;EAAE,GAAG;EAAiB,GAAG;EAAS;CACxE,MAAM,OAAO,KAAK,IAAI,MAAM;CAC5B,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAA6BA,cAAAA,MAAM,cAAc,KAAK,IAAI,CAAC;AAmBzE,QAAO,CAAC,OAAO;EAAE,YAAA,GAAA,MAAA,mBAhBT,UAAU,YAAYA,cAAAA,MAAM,UAAU,MAAM,KAAK,IAAI,CAAC,EAC5D;GAAC;GAAK;GAAK;GAAK,CACjB;EAc2B,YAAA,GAAA,MAAA,mBAXpB,UAAU,YAAYA,cAAAA,MAAM,UAAU,MAAM,KAAK,IAAI,CAAC,EAC5D;GAAC;GAAK;GAAK;GAAK,CACjB;EASsC,MAAA,GAAA,MAAA,cAPd,UAAkB,SAASA,cAAAA,MAAM,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;EAO5C,QAAA,GAAA,MAAA,mBAJpC,SAASA,cAAAA,MAAM,cAAc,KAAK,IAAI,CAAC,EAC7C;GAAC;GAAc;GAAK;GAAI,CACzB;EAEkD,CAAC"}

package/cjs/use-debounced-callback/use-debounced-callback.cjs

@@ -3,22 +3,38 @@ const require_use_callback_ref = require("../utils/use-callback-ref/use-callback
 let react = require("react");
 //#region packages/@mantine/hooks/src/use-debounced-callback/use-debounced-callback.ts
 function useDebouncedCallback(callback, options) {
-	const { delay, flushOnUnmount, leading } = typeof options === "number" ? {
+	const { delay, flushOnUnmount, leading, maxWait } = typeof options === "number" ? {
 		delay: options,
 		flushOnUnmount: false,
-		leading: false
+		leading: false,
+		maxWait: void 0
 	} : options;
 	const handleCallback = require_use_callback_ref.useCallbackRef(callback);
 	const debounceTimerRef = (0, react.useRef)(0);
+	const maxWaitTimerRef = (0, react.useRef)(0);
+	const latestArgsRef = (0, react.useRef)(null);
 	const lastCallback = (0, react.useMemo)(() => {
 		const currentCallback = Object.assign((...args) => {
 			window.clearTimeout(debounceTimerRef.current);
+			latestArgsRef.current = args;
 			const isFirstCall = currentCallback._isFirstCall;
 			currentCallback._isFirstCall = false;
 			function clearTimeoutAndLeadingRef() {
 				window.clearTimeout(debounceTimerRef.current);
+				window.clearTimeout(maxWaitTimerRef.current);
 				debounceTimerRef.current = 0;
+				maxWaitTimerRef.current = 0;
 				currentCallback._isFirstCall = true;
+				currentCallback._hasPendingCallback = false;
+			}
+			function startMaxWaitTimer() {
+				if (maxWait !== void 0 && maxWaitTimerRef.current === 0) maxWaitTimerRef.current = window.setTimeout(() => {
+					if (debounceTimerRef.current !== 0) {
+						const latestArgs = latestArgsRef.current;
+						clearTimeoutAndLeadingRef();
+						handleCallback(...latestArgs);
+					}
+				}, maxWait);
 			}
 			if (leading && isFirstCall) {
 				handleCallback(...args);
@@ -37,9 +53,11 @@ function useDebouncedCallback(callback, options) {
 				currentCallback.flush = flush;
 				currentCallback.cancel = cancel;
 				debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+				startMaxWaitTimer();
 				return;
 			}
 			if (leading && !isFirstCall) {
+				currentCallback._hasPendingCallback = true;
 				const flush = () => {
 					if (debounceTimerRef.current !== 0) {
 						clearTimeoutAndLeadingRef();
@@ -55,8 +73,10 @@ function useDebouncedCallback(callback, options) {
 					clearTimeoutAndLeadingRef();
 				};
 				debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+				startMaxWaitTimer();
 				return;
 			}
+			currentCallback._hasPendingCallback = true;
 			const flush = () => {
 				if (debounceTimerRef.current !== 0) {
 					clearTimeoutAndLeadingRef();
@@ -69,16 +89,20 @@ function useDebouncedCallback(callback, options) {
 			currentCallback.flush = flush;
 			currentCallback.cancel = cancel;
 			debounceTimerRef.current = window.setTimeout(flush, delay);
+			startMaxWaitTimer();
 		}, {
 			flush: () => {},
 			cancel: () => {},
-			_isFirstCall: true
+			isPending: () => currentCallback._hasPendingCallback,
+			_isFirstCall: true,
+			_hasPendingCallback: false
 		});
 		return currentCallback;
 	}, [
 		handleCallback,
 		delay,
-		leading
+		leading,
+		maxWait
 	]);
 	(0, react.useEffect)(() => () => {
 		if (flushOnUnmount) lastCallback.flush();

package/cjs/use-debounced-callback/use-debounced-callback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounced-callback.cjs","names":["useCallbackRef"],"sources":["../../src/use-debounced-callback/use-debounced-callback.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useCallbackRef } from '../utils';\n\nexport interface UseDebouncedCallbackOptions {\n  delay: number;\n  flushOnUnmount?: boolean;\n  leading?: boolean;\n}\n\nexport type UseDebouncedCallbackReturnValue<T extends (...args: any[]) => any> = ((\n  ...args: Parameters<T>\n) => void) & { flush: () => void; cancel: () => void };\n\nexport function useDebouncedCallback<T extends (...args: any[]) => any>(\n  callback: T,\n  options: number | UseDebouncedCallbackOptions\n) {\n  const { delay, flushOnUnmount, leading } =\n    typeof options === 'number'\n      ? { delay: options, flushOnUnmount: false, leading: false }\n      : options;\n\n  const handleCallback = useCallbackRef(callback);\n  const debounceTimerRef = useRef(0);\n\n  const lastCallback = useMemo(() => {\n    const currentCallback = Object.assign(\n      (...args: Parameters<T>) => {\n        window.clearTimeout(debounceTimerRef.current);\n\n        const isFirstCall = currentCallback._isFirstCall;\n        currentCallback._isFirstCall = false;\n\n        function clearTimeoutAndLeadingRef() {\n          window.clearTimeout(debounceTimerRef.current);\n          debounceTimerRef.current = 0;\n          currentCallback._isFirstCall = true;\n        }\n\n        if (leading && isFirstCall) {\n          handleCallback(...args);\n\n          const resetLeadingState = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          const flush = () => {\n            if (debounceTimerRef.current !== 0) {\n              clearTimeoutAndLeadingRef();\n              handleCallback(...args);\n            }\n          };\n\n          const cancel = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          currentCallback.flush = flush;\n          currentCallback.cancel = cancel;\n          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);\n          return;\n        }\n\n        if (leading && !isFirstCall) {\n          const flush = () => {\n            if (debounceTimerRef.current !== 0) {\n              clearTimeoutAndLeadingRef();\n              handleCallback(...args);\n            }\n          };\n\n          const cancel = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          currentCallback.flush = flush;\n          currentCallback.cancel = cancel;\n\n          const resetLeadingState = () => {\n            clearTimeoutAndLeadingRef();\n          };\n          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);\n          return;\n        }\n\n        const flush = () => {\n          if (debounceTimerRef.current !== 0) {\n            clearTimeoutAndLeadingRef();\n            handleCallback(...args);\n          }\n        };\n\n        const cancel = () => {\n          clearTimeoutAndLeadingRef();\n        };\n\n        currentCallback.flush = flush;\n        currentCallback.cancel = cancel;\n        debounceTimerRef.current = window.setTimeout(flush, delay);\n      },\n      {\n        flush: () => {},\n        cancel: () => {},\n        _isFirstCall: true,\n      }\n    );\n    return currentCallback;\n  }, [handleCallback, delay, leading]);\n\n  useEffect(\n    () => () => {\n      if (flushOnUnmount) {\n        lastCallback.flush();\n      } else {\n        lastCallback.cancel();\n      }\n    },\n    [lastCallback, flushOnUnmount]\n  );\n\n  return lastCallback;\n}\n\nexport namespace useDebouncedCallback {\n  export type Options = UseDebouncedCallbackOptions;\n  export type ReturnValue<T extends (...args: any[]) => any> = UseDebouncedCallbackReturnValue<T>;\n}\n"],"mappings":";;;;AAaA,SAAgB,qBACd,UACA,SACA;CACA,MAAM,EAAE,OAAO,gBAAgB,YAC7B,OAAO,YAAY,WACf;EAAE,OAAO;EAAS,gBAAgB;EAAO,SAAS;EAAO,GACzD;CAEN,MAAM,iBAAiBA,yBAAAA,eAAe,SAAS;CAC/C,MAAM,oBAAA,GAAA,MAAA,QAA0B,EAAE;CAElC,MAAM,gBAAA,GAAA,MAAA,eAA6B;EACjC,MAAM,kBAAkB,OAAO,QAC5B,GAAG,SAAwB;AAC1B,UAAO,aAAa,iBAAiB,QAAQ;GAE7C,MAAM,cAAc,gBAAgB;AACpC,mBAAgB,eAAe;GAE/B,SAAS,4BAA4B;AACnC,WAAO,aAAa,iBAAiB,QAAQ;AAC7C,qBAAiB,UAAU;AAC3B,oBAAgB,eAAe;;AAGjC,OAAI,WAAW,aAAa;AAC1B,mBAAe,GAAG,KAAK;IAEvB,MAAM,0BAA0B;AAC9B,gCAA2B;;IAG7B,MAAM,cAAc;AAClB,SAAI,iBAAiB,YAAY,GAAG;AAClC,iCAA2B;AAC3B,qBAAe,GAAG,KAAK;;;IAI3B,MAAM,eAAe;AACnB,gCAA2B;;AAG7B,oBAAgB,QAAQ;AACxB,oBAAgB,SAAS;AACzB,qBAAiB,UAAU,OAAO,WAAW,mBAAmB,MAAM;AACtE;;AAGF,OAAI,WAAW,CAAC,aAAa;IAC3B,MAAM,cAAc;AAClB,SAAI,iBAAiB,YAAY,GAAG;AAClC,iCAA2B;AAC3B,qBAAe,GAAG,KAAK;;;IAI3B,MAAM,eAAe;AACnB,gCAA2B;;AAG7B,oBAAgB,QAAQ;AACxB,oBAAgB,SAAS;IAEzB,MAAM,0BAA0B;AAC9B,gCAA2B;;AAE7B,qBAAiB,UAAU,OAAO,WAAW,mBAAmB,MAAM;AACtE;;GAGF,MAAM,cAAc;AAClB,QAAI,iBAAiB,YAAY,GAAG;AAClC,gCAA2B;AAC3B,oBAAe,GAAG,KAAK;;;GAI3B,MAAM,eAAe;AACnB,+BAA2B;;AAG7B,mBAAgB,QAAQ;AACxB,mBAAgB,SAAS;AACzB,oBAAiB,UAAU,OAAO,WAAW,OAAO,MAAM;KAE5D;GACE,aAAa;GACb,cAAc;GACd,cAAc;GACf,CACF;AACD,SAAO;IACN;EAAC;EAAgB;EAAO;EAAQ,CAAC;AAEpC,EAAA,GAAA,MAAA,uBACc;AACV,MAAI,eACF,cAAa,OAAO;MAEpB,cAAa,QAAQ;IAGzB,CAAC,cAAc,eAAe,CAC/B;AAED,QAAO"}
+{"version":3,"file":"use-debounced-callback.cjs","names":["useCallbackRef"],"sources":["../../src/use-debounced-callback/use-debounced-callback.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useCallbackRef } from '../utils';\n\nexport interface UseDebouncedCallbackOptions {\n  delay: number;\n  flushOnUnmount?: boolean;\n  leading?: boolean;\n  maxWait?: number;\n}\n\nexport type UseDebouncedCallbackReturnValue<T extends (...args: any[]) => any> = ((\n  ...args: Parameters<T>\n) => void) & { flush: () => void; cancel: () => void; isPending: () => boolean };\n\nexport function useDebouncedCallback<T extends (...args: any[]) => any>(\n  callback: T,\n  options: number | UseDebouncedCallbackOptions\n) {\n  const { delay, flushOnUnmount, leading, maxWait } =\n    typeof options === 'number'\n      ? {\n          delay: options,\n          flushOnUnmount: false,\n          leading: false,\n          maxWait: undefined as number | undefined,\n        }\n      : options;\n\n  const handleCallback = useCallbackRef(callback);\n  const debounceTimerRef = useRef(0);\n  const maxWaitTimerRef = useRef(0);\n  const latestArgsRef = useRef<Parameters<T> | null>(null);\n\n  const lastCallback = useMemo(() => {\n    const currentCallback = Object.assign(\n      (...args: Parameters<T>) => {\n        window.clearTimeout(debounceTimerRef.current);\n        latestArgsRef.current = args;\n\n        const isFirstCall = currentCallback._isFirstCall;\n        currentCallback._isFirstCall = false;\n\n        function clearTimeoutAndLeadingRef() {\n          window.clearTimeout(debounceTimerRef.current);\n          window.clearTimeout(maxWaitTimerRef.current);\n          debounceTimerRef.current = 0;\n          maxWaitTimerRef.current = 0;\n          currentCallback._isFirstCall = true;\n          currentCallback._hasPendingCallback = false;\n        }\n\n        function startMaxWaitTimer() {\n          if (maxWait !== undefined && maxWaitTimerRef.current === 0) {\n            maxWaitTimerRef.current = window.setTimeout(() => {\n              if (debounceTimerRef.current !== 0) {\n                const latestArgs = latestArgsRef.current!;\n                clearTimeoutAndLeadingRef();\n                handleCallback(...latestArgs);\n              }\n            }, maxWait);\n          }\n        }\n\n        if (leading && isFirstCall) {\n          handleCallback(...args);\n\n          const resetLeadingState = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          const flush = () => {\n            if (debounceTimerRef.current !== 0) {\n              clearTimeoutAndLeadingRef();\n              handleCallback(...args);\n            }\n          };\n\n          const cancel = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          currentCallback.flush = flush;\n          currentCallback.cancel = cancel;\n          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);\n          startMaxWaitTimer();\n          return;\n        }\n\n        if (leading && !isFirstCall) {\n          currentCallback._hasPendingCallback = true;\n          const flush = () => {\n            if (debounceTimerRef.current !== 0) {\n              clearTimeoutAndLeadingRef();\n              handleCallback(...args);\n            }\n          };\n\n          const cancel = () => {\n            clearTimeoutAndLeadingRef();\n          };\n\n          currentCallback.flush = flush;\n          currentCallback.cancel = cancel;\n\n          const resetLeadingState = () => {\n            clearTimeoutAndLeadingRef();\n          };\n          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);\n          startMaxWaitTimer();\n          return;\n        }\n\n        currentCallback._hasPendingCallback = true;\n\n        const flush = () => {\n          if (debounceTimerRef.current !== 0) {\n            clearTimeoutAndLeadingRef();\n            handleCallback(...args);\n          }\n        };\n\n        const cancel = () => {\n          clearTimeoutAndLeadingRef();\n        };\n\n        currentCallback.flush = flush;\n        currentCallback.cancel = cancel;\n        debounceTimerRef.current = window.setTimeout(flush, delay);\n        startMaxWaitTimer();\n      },\n      {\n        flush: () => {},\n        cancel: () => {},\n        isPending: () => currentCallback._hasPendingCallback,\n        _isFirstCall: true,\n        _hasPendingCallback: false,\n      }\n    );\n    return currentCallback;\n  }, [handleCallback, delay, leading, maxWait]);\n\n  useEffect(\n    () => () => {\n      if (flushOnUnmount) {\n        lastCallback.flush();\n      } else {\n        lastCallback.cancel();\n      }\n    },\n    [lastCallback, flushOnUnmount]\n  );\n\n  return lastCallback;\n}\n\nexport namespace useDebouncedCallback {\n  export type Options = UseDebouncedCallbackOptions;\n  export type ReturnValue<T extends (...args: any[]) => any> = UseDebouncedCallbackReturnValue<T>;\n}\n"],"mappings":";;;;AAcA,SAAgB,qBACd,UACA,SACA;CACA,MAAM,EAAE,OAAO,gBAAgB,SAAS,YACtC,OAAO,YAAY,WACf;EACE,OAAO;EACP,gBAAgB;EAChB,SAAS;EACT,SAAS,KAAA;EACV,GACD;CAEN,MAAM,iBAAiBA,yBAAAA,eAAe,SAAS;CAC/C,MAAM,oBAAA,GAAA,MAAA,QAA0B,EAAE;CAClC,MAAM,mBAAA,GAAA,MAAA,QAAyB,EAAE;CACjC,MAAM,iBAAA,GAAA,MAAA,QAA6C,KAAK;CAExD,MAAM,gBAAA,GAAA,MAAA,eAA6B;EACjC,MAAM,kBAAkB,OAAO,QAC5B,GAAG,SAAwB;AAC1B,UAAO,aAAa,iBAAiB,QAAQ;AAC7C,iBAAc,UAAU;GAExB,MAAM,cAAc,gBAAgB;AACpC,mBAAgB,eAAe;GAE/B,SAAS,4BAA4B;AACnC,WAAO,aAAa,iBAAiB,QAAQ;AAC7C,WAAO,aAAa,gBAAgB,QAAQ;AAC5C,qBAAiB,UAAU;AAC3B,oBAAgB,UAAU;AAC1B,oBAAgB,eAAe;AAC/B,oBAAgB,sBAAsB;;GAGxC,SAAS,oBAAoB;AAC3B,QAAI,YAAY,KAAA,KAAa,gBAAgB,YAAY,EACvD,iBAAgB,UAAU,OAAO,iBAAiB;AAChD,SAAI,iBAAiB,YAAY,GAAG;MAClC,MAAM,aAAa,cAAc;AACjC,iCAA2B;AAC3B,qBAAe,GAAG,WAAW;;OAE9B,QAAQ;;AAIf,OAAI,WAAW,aAAa;AAC1B,mBAAe,GAAG,KAAK;IAEvB,MAAM,0BAA0B;AAC9B,gCAA2B;;IAG7B,MAAM,cAAc;AAClB,SAAI,iBAAiB,YAAY,GAAG;AAClC,iCAA2B;AAC3B,qBAAe,GAAG,KAAK;;;IAI3B,MAAM,eAAe;AACnB,gCAA2B;;AAG7B,oBAAgB,QAAQ;AACxB,oBAAgB,SAAS;AACzB,qBAAiB,UAAU,OAAO,WAAW,mBAAmB,MAAM;AACtE,uBAAmB;AACnB;;AAGF,OAAI,WAAW,CAAC,aAAa;AAC3B,oBAAgB,sBAAsB;IACtC,MAAM,cAAc;AAClB,SAAI,iBAAiB,YAAY,GAAG;AAClC,iCAA2B;AAC3B,qBAAe,GAAG,KAAK;;;IAI3B,MAAM,eAAe;AACnB,gCAA2B;;AAG7B,oBAAgB,QAAQ;AACxB,oBAAgB,SAAS;IAEzB,MAAM,0BAA0B;AAC9B,gCAA2B;;AAE7B,qBAAiB,UAAU,OAAO,WAAW,mBAAmB,MAAM;AACtE,uBAAmB;AACnB;;AAGF,mBAAgB,sBAAsB;GAEtC,MAAM,cAAc;AAClB,QAAI,iBAAiB,YAAY,GAAG;AAClC,gCAA2B;AAC3B,oBAAe,GAAG,KAAK;;;GAI3B,MAAM,eAAe;AACnB,+BAA2B;;AAG7B,mBAAgB,QAAQ;AACxB,mBAAgB,SAAS;AACzB,oBAAiB,UAAU,OAAO,WAAW,OAAO,MAAM;AAC1D,sBAAmB;KAErB;GACE,aAAa;GACb,cAAc;GACd,iBAAiB,gBAAgB;GACjC,cAAc;GACd,qBAAqB;GACtB,CACF;AACD,SAAO;IACN;EAAC;EAAgB;EAAO;EAAS;EAAQ,CAAC;AAE7C,EAAA,GAAA,MAAA,uBACc;AACV,MAAI,eACF,cAAa,OAAO;MAEpB,cAAa,QAAQ;IAGzB,CAAC,cAAc,eAAe,CAC/B;AAED,QAAO"}

package/cjs/use-debounced-state/use-debounced-state.cjs

@@ -15,7 +15,7 @@ function useDebouncedState(defaultValue, wait, options = { leading: false }) {
 			setValue(newValue);
 		}, wait);
 		leadingRef.current = false;
-	}, [options.leading])];
+	}, [options.leading, wait])];
 }
 //#endregion
 exports.useDebouncedState = useDebouncedState;

package/cjs/use-debounced-state/use-debounced-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounced-state.cjs","names":[],"sources":["../../src/use-debounced-state/use-debounced-state.ts"],"sourcesContent":["import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseDebouncedStateOptions {\n  leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [T, (newValue: SetStateAction<T>) => void];\n\nexport function useDebouncedState<T = any>(\n  defaultValue: T,\n  wait: number,\n  options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n  const [value, setValue] = useState(defaultValue);\n  const timeoutRef = useRef<number | null>(null);\n  const leadingRef = useRef(true);\n\n  const clearTimeout = () => window.clearTimeout(timeoutRef.current!);\n  useEffect(() => clearTimeout, []);\n\n  const debouncedSetValue = useCallback(\n    (newValue: SetStateAction<T>) => {\n      clearTimeout();\n      if (leadingRef.current && options.leading) {\n        setValue(newValue);\n      } else {\n        timeoutRef.current = window.setTimeout(() => {\n          leadingRef.current = true;\n          setValue(newValue);\n        }, wait);\n      }\n      leadingRef.current = false;\n    },\n    [options.leading]\n  );\n\n  return [value, debouncedSetValue] as const;\n}\n\nexport namespace useDebouncedState {\n  export type Options = UseDebouncedStateOptions;\n  export type ReturnValue<T> = UseDebouncedStateReturnValue<T>;\n}\n"],"mappings":";;;AAQA,SAAgB,kBACd,cACA,MACA,UAAoC,EAAE,SAAS,OAAO,EACrB;CACjC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,aAAa;CAChD,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAC9C,MAAM,cAAA,GAAA,MAAA,QAAoB,KAAK;CAE/B,MAAM,qBAAqB,OAAO,aAAa,WAAW,QAAS;AACnE,EAAA,GAAA,MAAA,iBAAgB,cAAc,EAAE,CAAC;AAkBjC,QAAO,CAAC,QAAA,GAAA,MAAA,cAfL,aAAgC;AAC/B,gBAAc;AACd,MAAI,WAAW,WAAW,QAAQ,QAChC,UAAS,SAAS;MAElB,YAAW,UAAU,OAAO,iBAAiB;AAC3C,cAAW,UAAU;AACrB,YAAS,SAAS;KACjB,KAAK;AAEV,aAAW,UAAU;IAEvB,CAAC,QAAQ,QAAQ,CAClB,CAEgC"}
+{"version":3,"file":"use-debounced-state.cjs","names":[],"sources":["../../src/use-debounced-state/use-debounced-state.ts"],"sourcesContent":["import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseDebouncedStateOptions {\n  leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [T, (newValue: SetStateAction<T>) => void];\n\nexport function useDebouncedState<T = any>(\n  defaultValue: T,\n  wait: number,\n  options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n  const [value, setValue] = useState(defaultValue);\n  const timeoutRef = useRef<number | null>(null);\n  const leadingRef = useRef(true);\n\n  const clearTimeout = () => window.clearTimeout(timeoutRef.current!);\n  useEffect(() => clearTimeout, []);\n\n  const debouncedSetValue = useCallback(\n    (newValue: SetStateAction<T>) => {\n      clearTimeout();\n      if (leadingRef.current && options.leading) {\n        setValue(newValue);\n      } else {\n        timeoutRef.current = window.setTimeout(() => {\n          leadingRef.current = true;\n          setValue(newValue);\n        }, wait);\n      }\n      leadingRef.current = false;\n    },\n    [options.leading, wait]\n  );\n\n  return [value, debouncedSetValue] as const;\n}\n\nexport namespace useDebouncedState {\n  export type Options = UseDebouncedStateOptions;\n  export type ReturnValue<T> = UseDebouncedStateReturnValue<T>;\n}\n"],"mappings":";;;AAQA,SAAgB,kBACd,cACA,MACA,UAAoC,EAAE,SAAS,OAAO,EACrB;CACjC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,aAAa;CAChD,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAC9C,MAAM,cAAA,GAAA,MAAA,QAAoB,KAAK;CAE/B,MAAM,qBAAqB,OAAO,aAAa,WAAW,QAAS;AACnE,EAAA,GAAA,MAAA,iBAAgB,cAAc,EAAE,CAAC;AAkBjC,QAAO,CAAC,QAAA,GAAA,MAAA,cAfL,aAAgC;AAC/B,gBAAc;AACd,MAAI,WAAW,WAAW,QAAQ,QAChC,UAAS,SAAS;MAElB,YAAW,UAAU,OAAO,iBAAiB;AAC3C,cAAW,UAAU;AACrB,YAAS,SAAS;KACjB,KAAK;AAEV,aAAW,UAAU;IAEvB,CAAC,QAAQ,SAAS,KAAK,CACxB,CAEgC"}

package/cjs/use-debounced-value/use-debounced-value.cjs

@@ -6,7 +6,20 @@ function useDebouncedValue(value, wait, options = { leading: false }) {
 	const mountedRef = (0, react.useRef)(false);
 	const timeoutRef = (0, react.useRef)(null);
 	const cooldownRef = (0, react.useRef)(false);
-	const cancel = (0, react.useCallback)(() => window.clearTimeout(timeoutRef.current), []);
+	const latestValueRef = (0, react.useRef)(value);
+	latestValueRef.current = value;
+	const cancel = (0, react.useCallback)(() => {
+		window.clearTimeout(timeoutRef.current);
+		timeoutRef.current = null;
+		cooldownRef.current = false;
+	}, []);
+	const flush = (0, react.useCallback)(() => {
+		if (timeoutRef.current) {
+			cancel();
+			cooldownRef.current = false;
+			setValue(latestValueRef.current);
+		}
+	}, []);
 	(0, react.useEffect)(() => {
 		if (mountedRef.current) if (!cooldownRef.current && options.leading) {
 			cooldownRef.current = true;
@@ -27,7 +40,14 @@ function useDebouncedValue(value, wait, options = { leading: false }) {
 		mountedRef.current = true;
 		return cancel;
 	}, []);
-	return [_value, cancel];
+	return [
+		_value,
+		cancel,
+		{
+			cancel,
+			flush
+		}
+	];
 }
 //#endregion
 exports.useDebouncedValue = useDebouncedValue;

package/cjs/use-debounced-value/use-debounced-value.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounced-value.cjs","names":[],"sources":["../../src/use-debounced-value/use-debounced-value.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseDebouncedValueOptions {\n  leading?: boolean;\n}\n\nexport type UseDebouncedValueReturnValue<T> = [T, () => void];\n\nexport function useDebouncedValue<T = any>(\n  value: T,\n  wait: number,\n  options: UseDebouncedValueOptions = { leading: false }\n): UseDebouncedValueReturnValue<T> {\n  const [_value, setValue] = useState(value);\n  const mountedRef = useRef(false);\n  const timeoutRef = useRef<number | null>(null);\n  const cooldownRef = useRef(false);\n\n  const cancel = useCallback(() => window.clearTimeout(timeoutRef.current!), []);\n\n  useEffect(() => {\n    if (mountedRef.current) {\n      if (!cooldownRef.current && options.leading) {\n        cooldownRef.current = true;\n        setValue(value);\n      } else {\n        cancel();\n        timeoutRef.current = window.setTimeout(() => {\n          cooldownRef.current = false;\n          setValue(value);\n        }, wait);\n      }\n    }\n  }, [value, options.leading, wait]);\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return cancel;\n  }, []);\n\n  return [_value, cancel];\n}\n\nexport namespace useDebouncedValue {\n  export type Options = UseDebouncedValueOptions;\n  export type ReturnValue<T> = UseDebouncedValueReturnValue<T>;\n}\n"],"mappings":";;;AAQA,SAAgB,kBACd,OACA,MACA,UAAoC,EAAE,SAAS,OAAO,EACrB;CACjC,MAAM,CAAC,QAAQ,aAAA,GAAA,MAAA,UAAqB,MAAM;CAC1C,MAAM,cAAA,GAAA,MAAA,QAAoB,MAAM;CAChC,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAC9C,MAAM,eAAA,GAAA,MAAA,QAAqB,MAAM;CAEjC,MAAM,UAAA,GAAA,MAAA,mBAA2B,OAAO,aAAa,WAAW,QAAS,EAAE,EAAE,CAAC;AAE9E,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WAAW,QACb,KAAI,CAAC,YAAY,WAAW,QAAQ,SAAS;AAC3C,eAAY,UAAU;AACtB,YAAS,MAAM;SACV;AACL,WAAQ;AACR,cAAW,UAAU,OAAO,iBAAiB;AAC3C,gBAAY,UAAU;AACtB,aAAS,MAAM;MACd,KAAK;;IAGX;EAAC;EAAO,QAAQ;EAAS;EAAK,CAAC;AAElC,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,UAAU;AACrB,SAAO;IACN,EAAE,CAAC;AAEN,QAAO,CAAC,QAAQ,OAAO"}
+{"version":3,"file":"use-debounced-value.cjs","names":[],"sources":["../../src/use-debounced-value/use-debounced-value.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseDebouncedValueOptions {\n  leading?: boolean;\n}\n\nexport interface UseDebouncedValueHandlers {\n  cancel: () => void;\n  flush: () => void;\n}\n\nexport type UseDebouncedValueReturnValue<T> = [T, () => void, UseDebouncedValueHandlers];\n\nexport function useDebouncedValue<T = any>(\n  value: T,\n  wait: number,\n  options: UseDebouncedValueOptions = { leading: false }\n): UseDebouncedValueReturnValue<T> {\n  const [_value, setValue] = useState(value);\n  const mountedRef = useRef(false);\n  const timeoutRef = useRef<number | null>(null);\n  const cooldownRef = useRef(false);\n\n  const latestValueRef = useRef(value);\n  latestValueRef.current = value;\n\n  const cancel = useCallback(() => {\n    window.clearTimeout(timeoutRef.current!);\n    timeoutRef.current = null;\n    cooldownRef.current = false;\n  }, []);\n\n  const flush = useCallback(() => {\n    if (timeoutRef.current) {\n      cancel();\n      cooldownRef.current = false;\n      setValue(latestValueRef.current);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (mountedRef.current) {\n      if (!cooldownRef.current && options.leading) {\n        cooldownRef.current = true;\n        setValue(value);\n      } else {\n        cancel();\n        timeoutRef.current = window.setTimeout(() => {\n          cooldownRef.current = false;\n          setValue(value);\n        }, wait);\n      }\n    }\n  }, [value, options.leading, wait]);\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return cancel;\n  }, []);\n\n  return [_value, cancel, { cancel, flush }];\n}\n\nexport namespace useDebouncedValue {\n  export type Handlers = UseDebouncedValueHandlers;\n  export type Options = UseDebouncedValueOptions;\n  export type ReturnValue<T> = UseDebouncedValueReturnValue<T>;\n}\n"],"mappings":";;;AAaA,SAAgB,kBACd,OACA,MACA,UAAoC,EAAE,SAAS,OAAO,EACrB;CACjC,MAAM,CAAC,QAAQ,aAAA,GAAA,MAAA,UAAqB,MAAM;CAC1C,MAAM,cAAA,GAAA,MAAA,QAAoB,MAAM;CAChC,MAAM,cAAA,GAAA,MAAA,QAAmC,KAAK;CAC9C,MAAM,eAAA,GAAA,MAAA,QAAqB,MAAM;CAEjC,MAAM,kBAAA,GAAA,MAAA,QAAwB,MAAM;AACpC,gBAAe,UAAU;CAEzB,MAAM,UAAA,GAAA,MAAA,mBAA2B;AAC/B,SAAO,aAAa,WAAW,QAAS;AACxC,aAAW,UAAU;AACrB,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,SAAA,GAAA,MAAA,mBAA0B;AAC9B,MAAI,WAAW,SAAS;AACtB,WAAQ;AACR,eAAY,UAAU;AACtB,YAAS,eAAe,QAAQ;;IAEjC,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WAAW,QACb,KAAI,CAAC,YAAY,WAAW,QAAQ,SAAS;AAC3C,eAAY,UAAU;AACtB,YAAS,MAAM;SACV;AACL,WAAQ;AACR,cAAW,UAAU,OAAO,iBAAiB;AAC3C,gBAAY,UAAU;AACtB,aAAS,MAAM;MACd,KAAK;;IAGX;EAAC;EAAO,QAAQ;EAAS;EAAK,CAAC;AAElC,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,UAAU;AACrB,SAAO;IACN,EAAE,CAAC;AAEN,QAAO;EAAC;EAAQ;EAAQ;GAAE;GAAQ;GAAO;EAAC"}

package/cjs/use-event-listener/use-event-listener.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-event-listener.cjs","names":[],"sources":["../../src/use-event-listener/use-event-listener.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = any>(\n  type: K,\n  listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions\n): React.RefCallback<T | null> {\n  const previousListener = useRef<Function | null>(null);\n  const previousNode = useRef<T | null>(null);\n\n  const callbackRef: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      if (!node) {\n        return;\n      }\n\n      if (previousNode.current && previousListener.current) {\n        previousNode.current.removeEventListener(type, previousListener.current as any, options);\n      }\n\n      node.addEventListener(type, listener as any, options);\n      previousNode.current = node;\n      previousListener.current = listener;\n    },\n    [type, listener, options]\n  );\n\n  useEffect(\n    () => () => {\n      if (previousNode.current && previousListener.current) {\n        previousNode.current.removeEventListener(type, previousListener.current as any, options);\n      }\n    },\n    [type, options]\n  );\n\n  return callbackRef;\n}\n"],"mappings":";;;AAEA,SAAgB,iBACd,MACA,UACA,SAC6B;CAC7B,MAAM,oBAAA,GAAA,MAAA,QAA2C,KAAK;CACtD,MAAM,gBAAA,GAAA,MAAA,QAAgC,KAAK;CAE3C,MAAM,eAAA,GAAA,MAAA,cACH,SAAS;AACR,MAAI,CAAC,KACH;AAGF,MAAI,aAAa,WAAW,iBAAiB,QAC3C,cAAa,QAAQ,oBAAoB,MAAM,iBAAiB,SAAgB,QAAQ;AAG1F,OAAK,iBAAiB,MAAM,UAAiB,QAAQ;AACrD,eAAa,UAAU;AACvB,mBAAiB,UAAU;IAE7B;EAAC;EAAM;EAAU;EAAQ,CAC1B;AAED,EAAA,GAAA,MAAA,uBACc;AACV,MAAI,aAAa,WAAW,iBAAiB,QAC3C,cAAa,QAAQ,oBAAoB,MAAM,iBAAiB,SAAgB,QAAQ;IAG5F,CAAC,MAAM,QAAQ,CAChB;AAED,QAAO"}
+{"version":3,"file":"use-event-listener.cjs","names":[],"sources":["../../src/use-event-listener/use-event-listener.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = any>(\n  type: K,\n  listener: (this: T, ev: HTMLElementEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions\n): React.RefCallback<T | null> {\n  const previousListener = useRef<Function | null>(null);\n  const previousNode = useRef<T | null>(null);\n\n  const callbackRef: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      if (!node) {\n        return;\n      }\n\n      if (previousNode.current && previousListener.current) {\n        previousNode.current.removeEventListener(type, previousListener.current as any, options);\n      }\n\n      node.addEventListener(type, listener as any, options);\n      previousNode.current = node;\n      previousListener.current = listener;\n    },\n    [type, listener, options]\n  );\n\n  useEffect(\n    () => () => {\n      if (previousNode.current && previousListener.current) {\n        previousNode.current.removeEventListener(type, previousListener.current as any, options);\n      }\n    },\n    [type, options]\n  );\n\n  return callbackRef;\n}\n"],"mappings":";;;AAEA,SAAgB,iBACd,MACA,UACA,SAC6B;CAC7B,MAAM,oBAAA,GAAA,MAAA,QAA2C,KAAK;CACtD,MAAM,gBAAA,GAAA,MAAA,QAAgC,KAAK;CAE3C,MAAM,eAAA,GAAA,MAAA,cACH,SAAS;AACR,MAAI,CAAC,KACH;AAGF,MAAI,aAAa,WAAW,iBAAiB,QAC3C,cAAa,QAAQ,oBAAoB,MAAM,iBAAiB,SAAgB,QAAQ;AAG1F,OAAK,iBAAiB,MAAM,UAAiB,QAAQ;AACrD,eAAa,UAAU;AACvB,mBAAiB,UAAU;IAE7B;EAAC;EAAM;EAAU;EAAQ,CAC1B;AAED,EAAA,GAAA,MAAA,uBACc;AACV,MAAI,aAAa,WAAW,iBAAiB,QAC3C,cAAa,QAAQ,oBAAoB,MAAM,iBAAiB,SAAgB,QAAQ;IAG5F,CAAC,MAAM,QAAQ,CAChB;AAED,QAAO"}

package/cjs/use-favicon/use-favicon.cjs

@@ -20,7 +20,9 @@ function useFavicon(url) {
 			document.querySelector("head").appendChild(element);
 		}
 		const splittedUrl = url.split(".");
-		link.current.setAttribute("type", MIME_TYPES[splittedUrl[splittedUrl.length - 1].toLowerCase()]);
+		const mimeType = MIME_TYPES[splittedUrl[splittedUrl.length - 1].toLowerCase()];
+		if (mimeType) link.current.setAttribute("type", mimeType);
+		else link.current.removeAttribute("type");
 		link.current.setAttribute("href", url);
 	}, [url]);
 }

package/cjs/use-favicon/use-favicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-favicon.cjs","names":[],"sources":["../../src/use-favicon/use-favicon.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nconst MIME_TYPES: Record<string, string> = {\n  ico: 'image/x-icon',\n  png: 'image/png',\n  svg: 'image/svg+xml',\n  gif: 'image/gif',\n};\n\nexport function useFavicon(url: string) {\n  const link = useRef<HTMLLinkElement>(null);\n\n  useIsomorphicEffect(() => {\n    if (!url) {\n      return;\n    }\n\n    if (!link.current) {\n      const existingElements = document.querySelectorAll<HTMLLinkElement>('link[rel*=\"icon\"]');\n      existingElements.forEach((element) => document.head.removeChild(element));\n\n      const element = document.createElement('link');\n      element.rel = 'shortcut icon';\n      link.current = element;\n      document.querySelector('head')!.appendChild(element);\n    }\n\n    const splittedUrl = url.split('.');\n    link.current.setAttribute(\n      'type',\n      MIME_TYPES[splittedUrl[splittedUrl.length - 1].toLowerCase()]\n    );\n    link.current.setAttribute('href', url);\n  }, [url]);\n}\n"],"mappings":";;;;AAGA,MAAM,aAAqC;CACzC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAED,SAAgB,WAAW,KAAa;CACtC,MAAM,QAAA,GAAA,MAAA,QAA+B,KAAK;AAE1C,+BAAA,0BAA0B;AACxB,MAAI,CAAC,IACH;AAGF,MAAI,CAAC,KAAK,SAAS;AACQ,YAAS,iBAAkC,sBAAoB,CACvE,SAAS,YAAY,SAAS,KAAK,YAAY,QAAQ,CAAC;GAEzE,MAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,WAAQ,MAAM;AACd,QAAK,UAAU;AACf,YAAS,cAAc,OAAO,CAAE,YAAY,QAAQ;;EAGtD,MAAM,cAAc,IAAI,MAAM,IAAI;AAClC,OAAK,QAAQ,aACX,QACA,WAAW,YAAY,YAAY,SAAS,GAAG,aAAa,EAC7D;AACD,OAAK,QAAQ,aAAa,QAAQ,IAAI;IACrC,CAAC,IAAI,CAAC"}
+{"version":3,"file":"use-favicon.cjs","names":[],"sources":["../../src/use-favicon/use-favicon.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nconst MIME_TYPES: Record<string, string> = {\n  ico: 'image/x-icon',\n  png: 'image/png',\n  svg: 'image/svg+xml',\n  gif: 'image/gif',\n};\n\nexport function useFavicon(url: string) {\n  const link = useRef<HTMLLinkElement>(null);\n\n  useIsomorphicEffect(() => {\n    if (!url) {\n      return;\n    }\n\n    if (!link.current) {\n      const existingElements = document.querySelectorAll<HTMLLinkElement>('link[rel*=\"icon\"]');\n      existingElements.forEach((element) => document.head.removeChild(element));\n\n      const element = document.createElement('link');\n      element.rel = 'shortcut icon';\n      link.current = element;\n      document.querySelector('head')!.appendChild(element);\n    }\n\n    const splittedUrl = url.split('.');\n    const extension = splittedUrl[splittedUrl.length - 1].toLowerCase();\n    const mimeType = MIME_TYPES[extension];\n\n    if (mimeType) {\n      link.current.setAttribute('type', mimeType);\n    } else {\n      link.current.removeAttribute('type');\n    }\n\n    link.current.setAttribute('href', url);\n  }, [url]);\n}\n"],"mappings":";;;;AAGA,MAAM,aAAqC;CACzC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAED,SAAgB,WAAW,KAAa;CACtC,MAAM,QAAA,GAAA,MAAA,QAA+B,KAAK;AAE1C,+BAAA,0BAA0B;AACxB,MAAI,CAAC,IACH;AAGF,MAAI,CAAC,KAAK,SAAS;AACQ,YAAS,iBAAkC,sBAAoB,CACvE,SAAS,YAAY,SAAS,KAAK,YAAY,QAAQ,CAAC;GAEzE,MAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,WAAQ,MAAM;AACd,QAAK,UAAU;AACf,YAAS,cAAc,OAAO,CAAE,YAAY,QAAQ;;EAGtD,MAAM,cAAc,IAAI,MAAM,IAAI;EAElC,MAAM,WAAW,WADC,YAAY,YAAY,SAAS,GAAG,aAAa;AAGnE,MAAI,SACF,MAAK,QAAQ,aAAa,QAAQ,SAAS;MAE3C,MAAK,QAAQ,gBAAgB,OAAO;AAGtC,OAAK,QAAQ,aAAa,QAAQ,IAAI;IACrC,CAAC,IAAI,CAAC"}

package/cjs/use-fetch/use-fetch.cjs

@@ -11,9 +11,12 @@ function useFetch(url, { autoInvoke = true, ...options } = {}) {
 		controller.current = new AbortController();
 		setLoading(true);
 		return fetch(url, {
-			signal: controller.current.signal,
-			...options
-		}).then((res) => res.json()).then((res) => {
+			...options,
+			signal: controller.current.signal
+		}).then((res) => {
+			if (!res.ok) throw new Error(`Request failed with status ${res.status}`);
+			return res.json();
+		}).then((res) => {
 			setData(res);
 			setLoading(false);
 			return res;
@@ -22,7 +25,7 @@ function useFetch(url, { autoInvoke = true, ...options } = {}) {
 			if (err.name !== "AbortError") setError(err);
 			return err;
 		});
-	}, [url]);
+	}, [url, JSON.stringify(options)]);
 	const abort = (0, react.useCallback)(() => {
 		if (controller.current) controller.current?.abort("");
 	}, []);

package/cjs/use-fetch/use-fetch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-fetch.cjs","names":[],"sources":["../../src/use-fetch/use-fetch.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseFetchOptions extends RequestInit {\n  autoInvoke?: boolean;\n}\n\nexport interface UseFetchReturnValue<T> {\n  data: T | null;\n  loading: boolean;\n  error: Error | null;\n  refetch: () => Promise<any>;\n  abort: () => void;\n}\n\nexport function useFetch<T>(\n  url: string,\n  { autoInvoke = true, ...options }: UseFetchOptions = {}\n): UseFetchReturnValue<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n  const controller = useRef<AbortController | null>(null);\n\n  const refetch = useCallback(() => {\n    if (controller.current) {\n      controller.current.abort();\n    }\n\n    controller.current = new AbortController();\n\n    setLoading(true);\n\n    return fetch(url, { signal: controller.current.signal, ...options })\n      .then((res) => res.json())\n      .then((res) => {\n        setData(res);\n        setLoading(false);\n        return res as T;\n      })\n      .catch((err) => {\n        setLoading(false);\n\n        if (err.name !== 'AbortError') {\n          setError(err);\n        }\n\n        return err;\n      });\n  }, [url]);\n\n  const abort = useCallback(() => {\n    if (controller.current) {\n      controller.current?.abort('');\n    }\n  }, []);\n\n  useEffect(() => {\n    if (autoInvoke) {\n      refetch();\n    }\n\n    return () => {\n      if (controller.current) {\n        controller.current.abort('');\n      }\n    };\n  }, [refetch, autoInvoke]);\n\n  return { data, loading, error, refetch, abort };\n}\n\nexport namespace useFetch {\n  export type Options = UseFetchOptions;\n  export type ReturnValue<T> = UseFetchReturnValue<T>;\n}\n"],"mappings":";;;AAcA,SAAgB,SACd,KACA,EAAE,aAAa,MAAM,GAAG,YAA6B,EAAE,EAC/B;CACxB,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAA8B,KAAK;CAChD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAmC,KAAK;CACtD,MAAM,cAAA,GAAA,MAAA,QAA4C,KAAK;CAEvD,MAAM,WAAA,GAAA,MAAA,mBAA4B;AAChC,MAAI,WAAW,QACb,YAAW,QAAQ,OAAO;AAG5B,aAAW,UAAU,IAAI,iBAAiB;AAE1C,aAAW,KAAK;AAEhB,SAAO,MAAM,KAAK;GAAE,QAAQ,WAAW,QAAQ;GAAQ,GAAG;GAAS,CAAC,CACjE,MAAM,QAAQ,IAAI,MAAM,CAAC,CACzB,MAAM,QAAQ;AACb,WAAQ,IAAI;AACZ,cAAW,MAAM;AACjB,UAAO;IACP,CACD,OAAO,QAAQ;AACd,cAAW,MAAM;AAEjB,OAAI,IAAI,SAAS,aACf,UAAS,IAAI;AAGf,UAAO;IACP;IACH,CAAC,IAAI,CAAC;CAET,MAAM,SAAA,GAAA,MAAA,mBAA0B;AAC9B,MAAI,WAAW,QACb,YAAW,SAAS,MAAM,GAAG;IAE9B,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WACF,UAAS;AAGX,eAAa;AACX,OAAI,WAAW,QACb,YAAW,QAAQ,MAAM,GAAG;;IAG/B,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAO;EAAE;EAAM;EAAS;EAAO;EAAS;EAAO"}
+{"version":3,"file":"use-fetch.cjs","names":[],"sources":["../../src/use-fetch/use-fetch.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseFetchOptions extends RequestInit {\n  autoInvoke?: boolean;\n}\n\nexport interface UseFetchReturnValue<T> {\n  data: T | null;\n  loading: boolean;\n  error: Error | null;\n  refetch: () => Promise<any>;\n  abort: () => void;\n}\n\nexport function useFetch<T>(\n  url: string,\n  { autoInvoke = true, ...options }: UseFetchOptions = {}\n): UseFetchReturnValue<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n  const controller = useRef<AbortController | null>(null);\n\n  const refetch = useCallback(() => {\n    if (controller.current) {\n      controller.current.abort();\n    }\n\n    controller.current = new AbortController();\n\n    setLoading(true);\n\n    return fetch(url, { ...options, signal: controller.current.signal })\n      .then((res) => {\n        if (!res.ok) {\n          throw new Error(`Request failed with status ${res.status}`);\n        }\n        return res.json();\n      })\n      .then((res) => {\n        setData(res);\n        setLoading(false);\n        return res as T;\n      })\n      .catch((err) => {\n        setLoading(false);\n\n        if (err.name !== 'AbortError') {\n          setError(err);\n        }\n\n        return err;\n      });\n  }, [url, JSON.stringify(options)]);\n\n  const abort = useCallback(() => {\n    if (controller.current) {\n      controller.current?.abort('');\n    }\n  }, []);\n\n  useEffect(() => {\n    if (autoInvoke) {\n      refetch();\n    }\n\n    return () => {\n      if (controller.current) {\n        controller.current.abort('');\n      }\n    };\n  }, [refetch, autoInvoke]);\n\n  return { data, loading, error, refetch, abort };\n}\n\nexport namespace useFetch {\n  export type Options = UseFetchOptions;\n  export type ReturnValue<T> = UseFetchReturnValue<T>;\n}\n"],"mappings":";;;AAcA,SAAgB,SACd,KACA,EAAE,aAAa,MAAM,GAAG,YAA6B,EAAE,EAC/B;CACxB,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAA8B,KAAK;CAChD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAmC,KAAK;CACtD,MAAM,cAAA,GAAA,MAAA,QAA4C,KAAK;CAEvD,MAAM,WAAA,GAAA,MAAA,mBAA4B;AAChC,MAAI,WAAW,QACb,YAAW,QAAQ,OAAO;AAG5B,aAAW,UAAU,IAAI,iBAAiB;AAE1C,aAAW,KAAK;AAEhB,SAAO,MAAM,KAAK;GAAE,GAAG;GAAS,QAAQ,WAAW,QAAQ;GAAQ,CAAC,CACjE,MAAM,QAAQ;AACb,OAAI,CAAC,IAAI,GACP,OAAM,IAAI,MAAM,8BAA8B,IAAI,SAAS;AAE7D,UAAO,IAAI,MAAM;IACjB,CACD,MAAM,QAAQ;AACb,WAAQ,IAAI;AACZ,cAAW,MAAM;AACjB,UAAO;IACP,CACD,OAAO,QAAQ;AACd,cAAW,MAAM;AAEjB,OAAI,IAAI,SAAS,aACf,UAAS,IAAI;AAGf,UAAO;IACP;IACH,CAAC,KAAK,KAAK,UAAU,QAAQ,CAAC,CAAC;CAElC,MAAM,SAAA,GAAA,MAAA,mBAA0B;AAC9B,MAAI,WAAW,QACb,YAAW,SAAS,MAAM,GAAG;IAE9B,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WACF,UAAS;AAGX,eAAa;AACX,OAAI,WAAW,QACb,YAAW,QAAQ,MAAM,GAAG;;IAG/B,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAO;EAAE;EAAM;EAAS;EAAO;EAAS;EAAO"}

package/cjs/use-file-dialog/use-file-dialog.cjs

@@ -43,6 +43,7 @@ function useFileDialog(input = {}) {
 		inputRef.current = createInput(options);
 		if (inputRef.current) {
 			inputRef.current.addEventListener("change", handleChange, { once: true });
+			if (options.onCancel) inputRef.current.addEventListener("cancel", options.onCancel, { once: true });
 			document.body.appendChild(inputRef.current);
 		}
 	}, [options, handleChange]);