@jbpark/use-hooks 2.11.0 → 4.0.0

package/dist/hooks/use-scroll-to-elements.mjs

@@ -1,37 +1,62 @@
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/hooks/use-scroll-to-elements.ts
-const useScrollToElements = (options) => {
-	const elementRefs = useRef([]);
-	const optionsRef = useRef(options);
+const resolveContainer = (container) => {
+	if (!container) return null;
+	return "current" in container ? container.current : container;
+};
+const useScrollToElements = (defaultOptions) => {
+	const elementsRef = useRef(/* @__PURE__ */ new Map());
+	const registerCallbacksRef = useRef(/* @__PURE__ */ new Map());
+	const defaultOptionsRef = useRef(defaultOptions);
 	useEffect(() => {
-		optionsRef.current = options;
+		defaultOptionsRef.current = defaultOptions;
 	});
-	const scrollToElement = useCallback((index) => {
-		const element = elementRefs.current[index];
-		if (!element) return;
-		const { offset, ...scrollIntoViewOptions } = optionsRef.current ?? {};
-		if (offset != null) {
-			const top = element.getBoundingClientRect().top + window.scrollY - offset;
-			window.scrollTo({
-				top,
-				behavior: scrollIntoViewOptions.behavior || "smooth"
-			});
-			return;
-		}
-		element.scrollIntoView({
-			behavior: "smooth",
-			block: "start",
-			inline: "start",
-			...scrollIntoViewOptions
-		});
-	}, []);
 	return {
-		elementRefs,
-		setElementRef: useCallback((element, index) => {
-			elementRefs.current[index] = element;
+		register: useCallback((key) => {
+			let callback = registerCallbacksRef.current.get(key);
+			if (!callback) {
+				callback = (node) => {
+					if (node) elementsRef.current.set(key, node);
+					else elementsRef.current.delete(key);
+				};
+				registerCallbacksRef.current.set(key, callback);
+			}
+			return callback;
 		}, []),
-		scrollToElement
+		scrollTo: useCallback((key, options) => {
+			const element = elementsRef.current.get(key);
+			if (!element) return;
+			const { offset, container, ...scrollIntoViewOptions } = {
+				...defaultOptionsRef.current,
+				...options
+			};
+			if (offset != null) {
+				const containerElement = resolveContainer(container ?? null);
+				if (containerElement) {
+					const containerRect = containerElement.getBoundingClientRect();
+					const elementRect = element.getBoundingClientRect();
+					const top = containerElement.scrollTop + (elementRect.top - containerRect.top) - offset;
+					containerElement.scrollTo({
+						top,
+						behavior: scrollIntoViewOptions.behavior || "smooth"
+					});
+					return;
+				}
+				const top = element.getBoundingClientRect().top + window.scrollY - offset;
+				window.scrollTo({
+					top,
+					behavior: scrollIntoViewOptions.behavior || "smooth"
+				});
+				return;
+			}
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "start",
+				inline: "start",
+				...scrollIntoViewOptions
+			});
+		}, [])
 	};
 };
 

package/dist/hooks/use-scroll-to-elements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-to-elements.mjs","names":[],"sources":["../../src/hooks/use-scroll-to-elements.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface Options extends ScrollIntoViewOptions {\n  offset?: number;\n}\n\nconst useScrollToElements = (options?: Options) => {\n  const elementRefs = useRef<(HTMLElement | null)[]>([]);\n  // `options` is almost always an inline object literal at the call site,\n  // so depending on it directly would recreate `scrollToElement` on every\n  // render — read the latest value from a ref instead.\n  const optionsRef = useRef(options);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  });\n\n  const scrollToElement = useCallback((index: number) => {\n    const element = elementRefs.current[index];\n\n    if (!element) {\n      return;\n    }\n\n    const { offset, ...scrollIntoViewOptions } = optionsRef.current ?? {};\n\n    // With an offset, `scrollIntoView` and `scrollTo` would both animate\n    // the same scroll, fighting each other and settling in the wrong\n    // place — use `scrollTo` alone, computed from the element's position\n    // before any scrolling starts (not after `scrollIntoView`, where the\n    // rect would reflect a mid-animation position).\n    if (offset != null) {\n      const top = element.getBoundingClientRect().top + window.scrollY - offset;\n\n      window.scrollTo({\n        top,\n        behavior: scrollIntoViewOptions.behavior || 'smooth',\n      });\n      return;\n    }\n\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'start',\n      inline: 'start',\n      ...scrollIntoViewOptions,\n    });\n  }, []);\n\n  const setElementRef = useCallback(\n    (element: HTMLElement | null, index: number) => {\n      elementRefs.current[index] = element;\n    },\n    [],\n  );\n\n  return { elementRefs, setElementRef, scrollToElement };\n};\n\nexport default useScrollToElements;\n"],"mappings":";;;AAMA,MAAM,uBAAuB,YAAsB;CACjD,MAAM,cAAc,OAA+B,EAAE,CAAC;CAItD,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,kBAAkB,aAAa,UAAkB;EACrD,MAAM,UAAU,YAAY,QAAQ;AAEpC,MAAI,CAAC,QACH;EAGF,MAAM,EAAE,QAAQ,GAAG,0BAA0B,WAAW,WAAW,EAAE;AAOrE,MAAI,UAAU,MAAM;GAClB,MAAM,MAAM,QAAQ,uBAAuB,CAAC,MAAM,OAAO,UAAU;AAEnE,UAAO,SAAS;IACd;IACA,UAAU,sBAAsB,YAAY;IAC7C,CAAC;AACF;;AAGF,UAAQ,eAAe;GACrB,UAAU;GACV,OAAO;GACP,QAAQ;GACR,GAAG;GACJ,CAAC;IACD,EAAE,CAAC;AASN,QAAO;EAAE;EAAa,eAPA,aACnB,SAA6B,UAAkB;AAC9C,eAAY,QAAQ,SAAS;KAE/B,EAAE,CACH;EAEoC;EAAiB"}
+{"version":3,"file":"use-scroll-to-elements.mjs","names":[],"sources":["../../src/hooks/use-scroll-to-elements.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\ntype ElementKey = string;\n\ntype ScrollContainer = HTMLElement | RefObject<HTMLElement | null> | null;\n\ninterface Options extends ScrollIntoViewOptions {\n  offset?: number;\n  // Element to scroll instead of `window` when `offset` is set — e.g. a\n  // modal's own scrollable body. `scrollIntoView` (the no-offset path)\n  // already finds its nearest scrollable ancestor on its own and doesn't\n  // need this.\n  container?: ScrollContainer;\n}\n\nconst resolveContainer = (container: ScrollContainer): HTMLElement | null => {\n  if (!container) {\n    return null;\n  }\n  return 'current' in container ? container.current : container;\n};\n\nconst useScrollToElements = (defaultOptions?: Options) => {\n  const elementsRef = useRef(new Map<ElementKey, HTMLElement>());\n  const registerCallbacksRef = useRef(\n    new Map<ElementKey, (node: HTMLElement | null) => void>(),\n  );\n\n  // `defaultOptions` is almost always an inline object literal at the call\n  // site, so depending on it directly would recreate `scrollTo` on every\n  // render — read the latest value from a ref instead.\n  const defaultOptionsRef = useRef(defaultOptions);\n\n  useEffect(() => {\n    defaultOptionsRef.current = defaultOptions;\n  });\n\n  // Returns a stable callback per key so React doesn't detach/reattach the\n  // ref (and thrash the Map) on every render — only a genuine unmount\n  // (node === null) removes the entry.\n  const register = useCallback((key: ElementKey) => {\n    let callback = registerCallbacksRef.current.get(key);\n\n    if (!callback) {\n      callback = (node: HTMLElement | null) => {\n        if (node) {\n          elementsRef.current.set(key, node);\n        } else {\n          elementsRef.current.delete(key);\n        }\n      };\n      registerCallbacksRef.current.set(key, callback);\n    }\n\n    return callback;\n  }, []);\n\n  const scrollTo = useCallback((key: ElementKey, options?: Options) => {\n    const element = elementsRef.current.get(key);\n\n    if (!element) {\n      return;\n    }\n\n    const { offset, container, ...scrollIntoViewOptions } = {\n      ...defaultOptionsRef.current,\n      ...options,\n    };\n\n    // With an offset, `scrollIntoView` and `scrollTo` would both animate\n    // the same scroll, fighting each other and settling in the wrong\n    // place — use `scrollTo` alone, computed from the element's position\n    // before any scrolling starts (not after `scrollIntoView`, where the\n    // rect would reflect a mid-animation position).\n    if (offset != null) {\n      const containerElement = resolveContainer(container ?? null);\n\n      if (containerElement) {\n        const containerRect = containerElement.getBoundingClientRect();\n        const elementRect = element.getBoundingClientRect();\n        const top =\n          containerElement.scrollTop +\n          (elementRect.top - containerRect.top) -\n          offset;\n\n        containerElement.scrollTo({\n          top,\n          behavior: scrollIntoViewOptions.behavior || 'smooth',\n        });\n        return;\n      }\n\n      const top = element.getBoundingClientRect().top + window.scrollY - offset;\n\n      window.scrollTo({\n        top,\n        behavior: scrollIntoViewOptions.behavior || 'smooth',\n      });\n      return;\n    }\n\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'start',\n      inline: 'start',\n      ...scrollIntoViewOptions,\n    });\n  }, []);\n\n  return { register, scrollTo };\n};\n\nexport default useScrollToElements;\n"],"mappings":";;;AAeA,MAAM,oBAAoB,cAAmD;AAC3E,KAAI,CAAC,UACH,QAAO;AAET,QAAO,aAAa,YAAY,UAAU,UAAU;;AAGtD,MAAM,uBAAuB,mBAA6B;CACxD,MAAM,cAAc,uBAAO,IAAI,KAA8B,CAAC;CAC9D,MAAM,uBAAuB,uBAC3B,IAAI,KAAqD,CAC1D;CAKD,MAAM,oBAAoB,OAAO,eAAe;AAEhD,iBAAgB;AACd,oBAAkB,UAAU;GAC5B;AA0EF,QAAO;EAAE,UArEQ,aAAa,QAAoB;GAChD,IAAI,WAAW,qBAAqB,QAAQ,IAAI,IAAI;AAEpD,OAAI,CAAC,UAAU;AACb,gBAAY,SAA6B;AACvC,SAAI,KACF,aAAY,QAAQ,IAAI,KAAK,KAAK;SAElC,aAAY,QAAQ,OAAO,IAAI;;AAGnC,yBAAqB,QAAQ,IAAI,KAAK,SAAS;;AAGjD,UAAO;KACN,EAAE,CAAC;EAsDa,UApDF,aAAa,KAAiB,YAAsB;GACnE,MAAM,UAAU,YAAY,QAAQ,IAAI,IAAI;AAE5C,OAAI,CAAC,QACH;GAGF,MAAM,EAAE,QAAQ,WAAW,GAAG,0BAA0B;IACtD,GAAG,kBAAkB;IACrB,GAAG;IACJ;AAOD,OAAI,UAAU,MAAM;IAClB,MAAM,mBAAmB,iBAAiB,aAAa,KAAK;AAE5D,QAAI,kBAAkB;KACpB,MAAM,gBAAgB,iBAAiB,uBAAuB;KAC9D,MAAM,cAAc,QAAQ,uBAAuB;KACnD,MAAM,MACJ,iBAAiB,aAChB,YAAY,MAAM,cAAc,OACjC;AAEF,sBAAiB,SAAS;MACxB;MACA,UAAU,sBAAsB,YAAY;MAC7C,CAAC;AACF;;IAGF,MAAM,MAAM,QAAQ,uBAAuB,CAAC,MAAM,OAAO,UAAU;AAEnE,WAAO,SAAS;KACd;KACA,UAAU,sBAAsB,YAAY;KAC7C,CAAC;AACF;;AAGF,WAAQ,eAAe;IACrB,UAAU;IACV,OAAO;IACP,QAAQ;IACR,GAAG;IACJ,CAAC;KACD,EAAE,CAAC;EAEuB"}

package/dist/hooks/use-throttled-callback.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/use-throttled-callback.d.ts
+interface Options {
+  leading?: boolean;
+  trailing?: boolean;
+}
+declare const useThrottledCallback: <Args extends unknown[]>(callback: (...args: Args) => void, delay?: number, {
+  leading,
+  trailing
+}?: Options) => (...args: Args) => void;
+//#endregion
+export { useThrottledCallback };
+//# sourceMappingURL=use-throttled-callback.d.mts.map

package/dist/hooks/use-throttled-callback.mjs

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-throttled-callback.ts
+const useThrottledCallback = (callback, delay = 100, { leading = true, trailing = true } = {}) => {
+	const callbackRef = useRef(callback);
+	const delayRef = useRef(delay);
+	const leadingRef = useRef(leading);
+	const trailingRef = useRef(trailing);
+	useEffect(() => {
+		callbackRef.current = callback;
+		delayRef.current = delay;
+		leadingRef.current = leading;
+		trailingRef.current = trailing;
+	});
+	const lastExecutedRef = useRef(null);
+	const timeoutRef = useRef(null);
+	const lastArgsRef = useRef(null);
+	const stableThrottledCallback = useRef(null);
+	if (!stableThrottledCallback.current) {
+		const invoke = () => {
+			lastExecutedRef.current = Date.now();
+			timeoutRef.current = null;
+			if (lastArgsRef.current) callbackRef.current(...lastArgsRef.current);
+		};
+		stableThrottledCallback.current = (...args) => {
+			lastArgsRef.current = args;
+			const now = Date.now();
+			const elapsed = lastExecutedRef.current === null ? Infinity : now - lastExecutedRef.current;
+			if (elapsed >= delayRef.current) {
+				if (timeoutRef.current) {
+					clearTimeout(timeoutRef.current);
+					timeoutRef.current = null;
+				}
+				if (leadingRef.current) invoke();
+				else {
+					lastExecutedRef.current = now;
+					if (trailingRef.current) timeoutRef.current = setTimeout(invoke, delayRef.current);
+				}
+				return;
+			}
+			if (trailingRef.current && !timeoutRef.current) timeoutRef.current = setTimeout(invoke, delayRef.current - elapsed);
+		};
+	}
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return stableThrottledCallback.current;
+};
+
+//#endregion
+export { useThrottledCallback as default };
+//# sourceMappingURL=use-throttled-callback.mjs.map

package/dist/hooks/use-throttled-callback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttled-callback.mjs","names":[],"sources":["../../src/hooks/use-throttled-callback.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface Options {\n  leading?: boolean;\n  trailing?: boolean;\n}\n\n// Invokes `callback` at most once per `delay`ms, regardless of how often\n// the returned function is called — the callback-shaped counterpart to\n// useThrottle (which throttles a value). `leading` fires on the first call\n// of a burst immediately; `trailing` schedules one more call (with\n// whatever args arrived last) at the end of the window if calls kept\n// coming. Both default to true, matching useThrottle's fixed behavior.\nconst useThrottledCallback = <Args extends unknown[]>(\n  callback: (...args: Args) => void,\n  delay = 100,\n  { leading = true, trailing = true }: Options = {},\n) => {\n  const callbackRef = useRef(callback);\n  const delayRef = useRef(delay);\n  const leadingRef = useRef(leading);\n  const trailingRef = useRef(trailing);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n    leadingRef.current = leading;\n    trailingRef.current = trailing;\n  });\n\n  const lastExecutedRef = useRef<number | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastArgsRef = useRef<Args | null>(null);\n\n  const stableThrottledCallback = useRef<((...args: Args) => void) | null>(\n    null,\n  );\n\n  if (!stableThrottledCallback.current) {\n    const invoke = () => {\n      lastExecutedRef.current = Date.now();\n      timeoutRef.current = null;\n\n      if (lastArgsRef.current) {\n        callbackRef.current(...lastArgsRef.current);\n      }\n    };\n\n    stableThrottledCallback.current = (...args: Args) => {\n      lastArgsRef.current = args;\n\n      const now = Date.now();\n      const elapsed =\n        lastExecutedRef.current === null\n          ? Infinity\n          : now - lastExecutedRef.current;\n\n      if (elapsed >= delayRef.current) {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n          timeoutRef.current = null;\n        }\n\n        if (leadingRef.current) {\n          invoke();\n        } else {\n          lastExecutedRef.current = now;\n\n          if (trailingRef.current) {\n            timeoutRef.current = setTimeout(invoke, delayRef.current);\n          }\n        }\n        return;\n      }\n\n      if (trailingRef.current && !timeoutRef.current) {\n        timeoutRef.current = setTimeout(invoke, delayRef.current - elapsed);\n      }\n    };\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return stableThrottledCallback.current;\n};\n\nexport default useThrottledCallback;\n"],"mappings":";;;AAaA,MAAM,wBACJ,UACA,QAAQ,KACR,EAAE,UAAU,MAAM,WAAW,SAAkB,EAAE,KAC9C;CACH,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,cAAY,UAAU;AACtB,WAAS,UAAU;AACnB,aAAW,UAAU;AACrB,cAAY,UAAU;GACtB;CAEF,MAAM,kBAAkB,OAAsB,KAAK;CACnD,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,cAAc,OAAoB,KAAK;CAE7C,MAAM,0BAA0B,OAC9B,KACD;AAED,KAAI,CAAC,wBAAwB,SAAS;EACpC,MAAM,eAAe;AACnB,mBAAgB,UAAU,KAAK,KAAK;AACpC,cAAW,UAAU;AAErB,OAAI,YAAY,QACd,aAAY,QAAQ,GAAG,YAAY,QAAQ;;AAI/C,0BAAwB,WAAW,GAAG,SAAe;AACnD,eAAY,UAAU;GAEtB,MAAM,MAAM,KAAK,KAAK;GACtB,MAAM,UACJ,gBAAgB,YAAY,OACxB,WACA,MAAM,gBAAgB;AAE5B,OAAI,WAAW,SAAS,SAAS;AAC/B,QAAI,WAAW,SAAS;AACtB,kBAAa,WAAW,QAAQ;AAChC,gBAAW,UAAU;;AAGvB,QAAI,WAAW,QACb,SAAQ;SACH;AACL,qBAAgB,UAAU;AAE1B,SAAI,YAAY,QACd,YAAW,UAAU,WAAW,QAAQ,SAAS,QAAQ;;AAG7D;;AAGF,OAAI,YAAY,WAAW,CAAC,WAAW,QACrC,YAAW,UAAU,WAAW,QAAQ,SAAS,UAAU,QAAQ;;;AAKzE,iBAAgB;AACd,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,EAAE,CAAC;AAEN,QAAO,wBAAwB"}

package/dist/hooks/use-throttled-value.d.mts

@@ -0,0 +1,9 @@
+//#region src/hooks/use-throttled-value.d.ts
+interface Options {
+  leading?: boolean;
+  trailing?: boolean;
+}
+declare const useThrottledValue: <T>(value: T, delay?: number, options?: Options) => T;
+//#endregion
+export { useThrottledValue };
+//# sourceMappingURL=use-throttled-value.d.mts.map

package/dist/hooks/use-throttled-value.mjs

@@ -0,0 +1,16 @@
+import useThrottledCallback from "./use-throttled-callback.mjs";
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-throttled-value.ts
+const useThrottledValue = (value, delay = 100, options = {}) => {
+	const [throttledValue, setThrottledValue] = useState(value);
+	const throttledSetValue = useThrottledCallback(setThrottledValue, delay, options);
+	useEffect(() => {
+		throttledSetValue(value);
+	}, [value, throttledSetValue]);
+	return throttledValue;
+};
+
+//#endregion
+export { useThrottledValue as default };
+//# sourceMappingURL=use-throttled-value.mjs.map

package/dist/hooks/use-throttled-value.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttled-value.mjs","names":[],"sources":["../../src/hooks/use-throttled-value.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport useThrottledCallback from './use-throttled-callback';\n\ninterface Options {\n  leading?: boolean;\n  trailing?: boolean;\n}\n\nconst useThrottledValue = <T>(\n  value: T,\n  delay = 100,\n  options: Options = {},\n): T => {\n  const [throttledValue, setThrottledValue] = useState(value);\n\n  const throttledSetValue = useThrottledCallback(\n    setThrottledValue,\n    delay,\n    options,\n  );\n\n  useEffect(() => {\n    throttledSetValue(value);\n    // `throttledSetValue`'s identity is stable for the lifetime of the\n    // component (see useThrottledCallback), so listing it here doesn't\n    // cause any extra re-runs beyond `value` actually changing.\n  }, [value, throttledSetValue]);\n\n  return throttledValue;\n};\n\nexport default useThrottledValue;\n"],"mappings":";;;;AASA,MAAM,qBACJ,OACA,QAAQ,KACR,UAAmB,EAAE,KACf;CACN,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAE3D,MAAM,oBAAoB,qBACxB,mBACA,OACA,QACD;AAED,iBAAgB;AACd,oBAAkB,MAAM;IAIvB,CAAC,OAAO,kBAAkB,CAAC;AAE9B,QAAO"}

package/dist/hooks/use-timeout.d.mts

@@ -0,0 +1,8 @@
+//#region src/hooks/use-timeout.d.ts
+declare const useTimeout: (callback: () => void, delay: number | null) => {
+  reset: () => void;
+  clear: () => void;
+};
+//#endregion
+export { useTimeout };
+//# sourceMappingURL=use-timeout.d.mts.map

package/dist/hooks/use-timeout.mjs

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/hooks/use-timeout.ts
+const useTimeout = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	const delayRef = useRef(delay);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		callbackRef.current = callback;
+		delayRef.current = delay;
+	});
+	const clear = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	const reset = useCallback(() => {
+		clear();
+		if (delayRef.current === null) return;
+		timeoutRef.current = setTimeout(() => {
+			timeoutRef.current = null;
+			callbackRef.current();
+		}, delayRef.current);
+	}, [clear]);
+	useEffect(() => {
+		reset();
+		return clear;
+	}, [delay]);
+	return {
+		reset,
+		clear
+	};
+};
+
+//#endregion
+export { useTimeout as default };
+//# sourceMappingURL=use-timeout.mjs.map

package/dist/hooks/use-timeout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-timeout.mjs","names":[],"sources":["../../src/hooks/use-timeout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\n// `delay === null` means inactive (no timer scheduled) — `0` is a valid,\n// distinct delay, same rule useRecursiveTimeout uses. A bare `if (!delay)`\n// guard (as opposed to `if (delay === null)`) is the classic bug this\n// hook exists to avoid: it silently no-ops for a delay of 0 too.\nconst useTimeout = (callback: () => void, delay: number | null) => {\n  const callbackRef = useRef(callback);\n  const delayRef = useRef(delay);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n  });\n\n  const clear = useCallback(() => {\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  // Restarts the timer from now, using whatever `delay` is current —\n  // e.g. a toast's auto-dismiss timer that should start over each time\n  // the user hovers away from it.\n  const reset = useCallback(() => {\n    clear();\n\n    if (delayRef.current === null) {\n      return;\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      timeoutRef.current = null;\n      callbackRef.current();\n    }, delayRef.current);\n  }, [clear]);\n\n  useEffect(() => {\n    reset();\n    return clear;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [delay]);\n\n  return { reset, clear };\n};\n\nexport default useTimeout;\n"],"mappings":";;;AAMA,MAAM,cAAc,UAAsB,UAAyB;CACjE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,cAAY,UAAU;AACtB,WAAS,UAAU;GACnB;CAEF,MAAM,QAAQ,kBAAkB;AAC9B,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAKN,MAAM,QAAQ,kBAAkB;AAC9B,SAAO;AAEP,MAAI,SAAS,YAAY,KACvB;AAGF,aAAW,UAAU,iBAAiB;AACpC,cAAW,UAAU;AACrB,eAAY,SAAS;KACpB,SAAS,QAAQ;IACnB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,SAAO;AACP,SAAO;IAEN,CAAC,MAAM,CAAC;AAEX,QAAO;EAAE;EAAO;EAAO"}

package/dist/hooks/use-toggle.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-toggle.d.ts
+declare const useToggle: (initial?: boolean) => [boolean, () => void, (value: boolean) => void];
+//#endregion
+export { useToggle };
+//# sourceMappingURL=use-toggle.d.mts.map

package/dist/hooks/use-toggle.mjs

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+//#region src/hooks/use-toggle.ts
+const useToggle = (initial = false) => {
+	const [value, setValue] = useState(initial);
+	return [
+		value,
+		useCallback(() => {
+			setValue((prev) => !prev);
+		}, []),
+		setValue
+	];
+};
+
+//#endregion
+export { useToggle as default };
+//# sourceMappingURL=use-toggle.mjs.map

package/dist/hooks/use-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toggle.mjs","names":[],"sources":["../../src/hooks/use-toggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nconst useToggle = (\n  initial = false,\n): [boolean, () => void, (value: boolean) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const toggle = useCallback(() => {\n    setValue(prev => !prev);\n  }, []);\n\n  return [value, toggle, setValue];\n};\n\nexport default useToggle;\n"],"mappings":";;;AAEA,MAAM,aACJ,UAAU,UAC0C;CACpD,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;AAM3C,QAAO;EAAC;EAJO,kBAAkB;AAC/B,aAAS,SAAQ,CAAC,KAAK;KACtB,EAAE,CAAC;EAEiB;EAAS"}

package/dist/index.d.mts

@@ -1,21 +1,32 @@
-import { useDebounce } from "./hooks/use-debounce.mjs";
+import { useDebouncedCallback } from "./hooks/use-debounced-callback.mjs";
+import { useDebouncedValue } from "./hooks/use-debounced-value.mjs";
 import { useBodyScrollLock } from "./hooks/use-body-scroll-lock.mjs";
 import { useClickOutside } from "./hooks/use-click-outside.mjs";
 import { useControllableState } from "./hooks/use-controllable-state.mjs";
 import { useElementPosition } from "./hooks/use-element-position.mjs";
 import { useElementScroll } from "./hooks/use-element-scroll.mjs";
+import { useEventListener } from "./hooks/use-event-listener.mjs";
+import { useFileDrop } from "./hooks/use-file-drop.mjs";
 import { useFileToDataUrl } from "./hooks/use-file-to-data-url.mjs";
 import { useHistoryState } from "./hooks/use-history-state.mjs";
 import { useIntersectionObserver } from "./hooks/use-intersection-observer.mjs";
+import { useInterval } from "./hooks/use-interval.mjs";
 import { useResponsiveSize } from "./hooks/use-responsive-size.mjs";
 import { useImage } from "./hooks/use-image.mjs";
+import { useKeyPress } from "./hooks/use-key-press.mjs";
 import { useLocalStorage } from "./hooks/use-local-storage.mjs";
+import { useMergedRef } from "./hooks/use-merged-ref.mjs";
 import { useMultiSelect } from "./hooks/use-multi-select.mjs";
+import { useMutationObserver } from "./hooks/use-mutation-observer.mjs";
+import { usePrevious } from "./hooks/use-previous.mjs";
 import { useRecursiveTimeout } from "./hooks/use-recursive-timeout.mjs";
+import { useResizeObserver } from "./hooks/use-resize-observer.mjs";
 import { useScrollToElements } from "./hooks/use-scroll-to-elements.mjs";
-import { useThrottle } from "./hooks/use-throttle.mjs";
-import { useTimeline } from "./hooks/use-timeline.mjs";
+import { useThrottledValue } from "./hooks/use-throttled-value.mjs";
+import { useThrottledCallback } from "./hooks/use-throttled-callback.mjs";
+import { useTimeout } from "./hooks/use-timeout.mjs";
+import { useToggle } from "./hooks/use-toggle.mjs";
 import { useWindowScroll } from "./hooks/use-window-scroll.mjs";
 import { useViewport } from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
-export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebouncedCallback as useDebounce, useDebouncedCallback, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottledValue as useThrottle, useThrottledCallback, useThrottledValue, useTimeout, useToggle, useViewport, useWindowScroll };

package/dist/index.mjs

@@ -1,22 +1,33 @@
-import useDebounce from "./hooks/use-debounce.mjs";
+import useDebouncedCallback from "./hooks/use-debounced-callback.mjs";
+import useDebouncedValue from "./hooks/use-debounced-value.mjs";
 import useBodyScrollLock from "./hooks/use-body-scroll-lock.mjs";
 import useClickOutside from "./hooks/use-click-outside.mjs";
 import useControllableState from "./hooks/use-controllable-state.mjs";
 import useElementPosition from "./hooks/use-element-position.mjs";
 import useElementScroll from "./hooks/use-element-scroll.mjs";
+import useEventListener from "./hooks/use-event-listener.mjs";
+import useFileDrop from "./hooks/use-file-drop.mjs";
 import useFileToDataUrl from "./hooks/use-file-to-data-url.mjs";
 import useHistoryState from "./hooks/use-history-state.mjs";
 import useIntersectionObserver from "./hooks/use-intersection-observer.mjs";
+import useInterval from "./hooks/use-interval.mjs";
 import useResponsiveSize from "./hooks/use-responsive-size.mjs";
 import useImage from "./hooks/use-image.mjs";
+import useKeyPress from "./hooks/use-key-press.mjs";
 import useLocalStorage from "./hooks/use-local-storage.mjs";
+import useMergedRef from "./hooks/use-merged-ref.mjs";
 import useMultiSelect from "./hooks/use-multi-select.mjs";
+import useMutationObserver from "./hooks/use-mutation-observer.mjs";
+import usePrevious from "./hooks/use-previous.mjs";
 import useRecursiveTimeout from "./hooks/use-recursive-timeout.mjs";
+import useResizeObserver from "./hooks/use-resize-observer.mjs";
 import useScrollToElements from "./hooks/use-scroll-to-elements.mjs";
-import useThrottle from "./hooks/use-throttle.mjs";
-import useTimeline from "./hooks/use-timeline.mjs";
+import useThrottledCallback from "./hooks/use-throttled-callback.mjs";
+import useThrottledValue from "./hooks/use-throttled-value.mjs";
+import useTimeout from "./hooks/use-timeout.mjs";
+import useToggle from "./hooks/use-toggle.mjs";
 import useWindowScroll from "./hooks/use-window-scroll.mjs";
 import useViewport from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
 
-export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebouncedCallback as useDebounce, useDebouncedCallback, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottledValue as useThrottle, useThrottledCallback, useThrottledValue, useTimeout, useToggle, useViewport, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.11.0",
+  "version": "4.0.0",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",

package/dist/hooks/use-debounce.d.mts

@@ -1,14 +0,0 @@
-//#region src/hooks/use-debounce.d.ts
-interface Options {
-  delay?: number;
-  autoInvoke?: boolean;
-  leading?: boolean;
-}
-declare const useDebounce: (callback: () => unknown, {
-  delay,
-  autoInvoke,
-  leading
-}: Options, deps?: React.DependencyList) => () => void;
-//#endregion
-export { useDebounce };
-//# sourceMappingURL=use-debounce.d.mts.map

package/dist/hooks/use-debounce.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-debounce.mjs","names":[],"sources":["../../src/hooks/use-debounce.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface Options {\n  delay?: number;\n  autoInvoke?: boolean;\n  leading?: boolean;\n}\n\n// Auto-invokes `callback` (debounced by `delay`ms) whenever `deps` change,\n// and also returns a stable debounced version of `callback` for manual use.\n// `callback` intentionally takes no arguments — the deps-triggered\n// auto-invoke has no natural argument to supply, so an arg-taking callback\n// here was a latent type hole (it was always invoked with zero args\n// regardless of what the callback's own signature claimed).\nconst useDebounce = (\n  callback: () => unknown,\n  { delay = 100, autoInvoke = true, leading = true }: Options,\n  deps: React.DependencyList = [],\n) => {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const callbackRef = useRef(callback);\n  // Read the latest `delay` when the timeout actually fires, instead of\n  // baking in whatever `delay` was on the render that created the stable\n  // debounced function (which otherwise never updates again).\n  const delayRef = useRef(delay);\n  const prevDeps = useRef<React.DependencyList | undefined>(undefined);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n  });\n\n  const stableDebouncedCallback = useRef<(() => void) | null>(null);\n\n  if (!stableDebouncedCallback.current) {\n    stableDebouncedCallback.current = () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      timeoutRef.current = setTimeout(() => {\n        callbackRef.current();\n      }, delayRef.current);\n    };\n  }\n\n  useEffect(() => {\n    const depsChanged =\n      prevDeps.current === undefined ||\n      prevDeps.current.length !== deps.length ||\n      prevDeps.current.some((dep, i) => dep !== deps[i]);\n\n    if (depsChanged && timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    if (autoInvoke && depsChanged) {\n      const isFirstRender = prevDeps.current === undefined;\n\n      // `leading` makes the \"first invocation fires immediately, without\n      // waiting `delay`ms\" behavior explicit and opt-out-able, instead of\n      // an unconditional special case baked into the first render.\n      if (isFirstRender && leading) {\n        callbackRef.current();\n      } else {\n        stableDebouncedCallback.current?.();\n      }\n    }\n\n    prevDeps.current = deps;\n  });\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return stableDebouncedCallback.current;\n};\n\nexport default useDebounce;\n"],"mappings":";;;AAcA,MAAM,eACJ,UACA,EAAE,QAAQ,KAAK,aAAa,MAAM,UAAU,QAC5C,OAA6B,EAAE,KAC5B;CACH,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,cAAc,OAAO,SAAS;CAIpC,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,WAAW,OAAyC,OAAU;AAEpE,iBAAgB;AACd,cAAY,UAAU;AACtB,WAAS,UAAU;GACnB;CAEF,MAAM,0BAA0B,OAA4B,KAAK;AAEjE,KAAI,CAAC,wBAAwB,QAC3B,yBAAwB,gBAAgB;AACtC,MAAI,WAAW,QACb,cAAa,WAAW,QAAQ;AAGlC,aAAW,UAAU,iBAAiB;AACpC,eAAY,SAAS;KACpB,SAAS,QAAQ;;AAIxB,iBAAgB;EACd,MAAM,cACJ,SAAS,YAAY,UACrB,SAAS,QAAQ,WAAW,KAAK,UACjC,SAAS,QAAQ,MAAM,KAAK,MAAM,QAAQ,KAAK,GAAG;AAEpD,MAAI,eAAe,WAAW,QAC5B,cAAa,WAAW,QAAQ;AAGlC,MAAI,cAAc,YAMhB,KALsB,SAAS,YAAY,UAKtB,QACnB,aAAY,SAAS;MAErB,yBAAwB,WAAW;AAIvC,WAAS,UAAU;GACnB;AAEF,iBAAgB;AACd,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,EAAE,CAAC;AAEN,QAAO,wBAAwB"}

package/dist/hooks/use-throttle.d.mts

@@ -1,5 +0,0 @@
-//#region src/hooks/use-throttle.d.ts
-declare const useThrottle: <T>(value: T, delay?: number) => T;
-//#endregion
-export { useThrottle };
-//# sourceMappingURL=use-throttle.d.mts.map

package/dist/hooks/use-throttle.mjs

@@ -1,42 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-//#region src/hooks/use-throttle.ts
-const useThrottle = (value, delay = 100) => {
-	const [throttledValue, setThrottledValue] = useState(value);
-	const lastExecutedRef = useRef(0);
-	const timeoutRef = useRef(null);
-	const latestValueRef = useRef(value);
-	useEffect(() => {
-		latestValueRef.current = value;
-	}, [value]);
-	useEffect(() => {
-		const now = Date.now();
-		const elapsed = now - lastExecutedRef.current;
-		if (elapsed >= delay) {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-			lastExecutedRef.current = now;
-			setThrottledValue(latestValueRef.current);
-			return;
-		}
-		const remaining = delay - elapsed;
-		if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		timeoutRef.current = setTimeout(() => {
-			lastExecutedRef.current = Date.now();
-			setThrottledValue(latestValueRef.current);
-		}, remaining);
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, [value, delay]);
-	return throttledValue;
-};
-
-//#endregion
-export { useThrottle as default };
-//# sourceMappingURL=use-throttle.mjs.map

package/dist/hooks/use-throttle.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-throttle.mjs","names":[],"sources":["../../src/hooks/use-throttle.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useThrottle = <T>(value: T, delay = 100): T => {\n  const [throttledValue, setThrottledValue] = useState(value);\n  const lastExecutedRef = useRef(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const latestValueRef = useRef(value);\n\n  useEffect(() => {\n    latestValueRef.current = value;\n  }, [value]);\n\n  useEffect(() => {\n    const now = Date.now();\n    const elapsed = now - lastExecutedRef.current;\n\n    if (elapsed >= delay) {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n\n      lastExecutedRef.current = now;\n      setThrottledValue(latestValueRef.current);\n      return;\n    }\n\n    const remaining = delay - elapsed;\n\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      lastExecutedRef.current = Date.now();\n      setThrottledValue(latestValueRef.current);\n    }, remaining);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n    };\n  }, [value, delay]);\n\n  return throttledValue;\n};\n\nexport default useThrottle;\n"],"mappings":";;;AAEA,MAAM,eAAkB,OAAU,QAAQ,QAAW;CACnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,kBAAkB,OAAO,EAAE;CACjC,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,MAAM,KAAK,KAAK;EACtB,MAAM,UAAU,MAAM,gBAAgB;AAEtC,MAAI,WAAW,OAAO;AACpB,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;AAGvB,mBAAgB,UAAU;AAC1B,qBAAkB,eAAe,QAAQ;AACzC;;EAGF,MAAM,YAAY,QAAQ;AAE1B,MAAI,WAAW,QACb,cAAa,WAAW,QAAQ;AAGlC,aAAW,UAAU,iBAAiB;AACpC,mBAAgB,UAAU,KAAK,KAAK;AACpC,qBAAkB,eAAe,QAAQ;KACxC,UAAU;AAEb,eAAa;AACX,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;;IAGxB,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}

package/dist/hooks/use-timeline.d.mts

@@ -1,50 +0,0 @@
-import * as react from "react";
-
-//#region src/hooks/use-timeline.d.ts
-interface TimelineStep {
-  scale?: number;
-  rotate?: {
-    x?: number;
-    y?: number;
-    z?: number;
-  };
-  position?: {
-    x?: number;
-    y?: number;
-  };
-  top?: number;
-  left?: number;
-  width?: number;
-  height?: number;
-  zIndex?: number;
-  filter?: string;
-  backgroundColor?: string;
-  opacity?: number;
-  selector: string;
-  transition: Transition;
-}
-interface Transition {
-  duration: number;
-  ease?: string;
-  delay?: number;
-  easeX?: string;
-  easeY?: string;
-}
-interface Options {
-  steps?: TimelineStep[];
-  loading?: boolean;
-  immediate?: boolean;
-  loop?: boolean;
-}
-declare const useTimeline: ({
-  steps,
-  loading,
-  immediate,
-  loop
-}: Options) => {
-  ref: react.RefObject<HTMLDivElement | null>;
-  completed: boolean;
-};
-//#endregion
-export { useTimeline };
-//# sourceMappingURL=use-timeline.d.mts.map