@jbpark/use-hooks 2.10.0 → 3.0.0

package/dist/hooks/index.d.mts

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

package/dist/hooks/index.mjs

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

package/dist/hooks/use-click-outside.d.mts

@@ -1,7 +1,14 @@
-import * as react from "react";
+import { RefObject } from "react";
 
 //#region src/hooks/use-click-outside.d.ts
-declare const useClickOutside: <T extends HTMLElement = HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean) => react.RefObject<T | null>;
+type ClickOutsideRef = RefObject<HTMLElement | null> | null | undefined;
+type ClickOutsideEvent = PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;
+interface Options {
+  enabled?: boolean;
+  events?: ('pointerdown' | 'mousedown' | 'touchstart')[];
+  escape?: boolean;
+}
+declare const useClickOutside: (refs: ClickOutsideRef | ClickOutsideRef[], handler: (event: ClickOutsideEvent) => void, options?: Options) => void;
 //#endregion
 export { useClickOutside };
 //# sourceMappingURL=use-click-outside.d.mts.map

package/dist/hooks/use-click-outside.mjs

@@ -1,27 +1,43 @@
 import { useEffect, useRef } from "react";
 
 //#region src/hooks/use-click-outside.ts
-const useClickOutside = (handler, enabled = true) => {
-	const ref = useRef(null);
+const useClickOutside = (refs, handler, options = {}) => {
+	const { enabled = true, events = ["pointerdown"], escape = true } = options;
 	const handlerRef = useRef(handler);
 	useEffect(() => {
 		handlerRef.current = handler;
 	});
+	const refList = Array.isArray(refs) ? refs : [refs];
+	const refListRef = useRef(refList);
+	useEffect(() => {
+		refListRef.current = refList;
+	});
 	useEffect(() => {
 		if (!enabled || typeof document === "undefined") return;
-		const listener = (event) => {
-			const el = ref.current;
-			if (!el || el.contains(event.target)) return;
+		const isInside = (target) => refListRef.current.some((ref) => ref?.current?.contains(target));
+		const onPointerEvent = (event) => {
+			const target = event.target;
+			if (!target || isInside(target)) return;
 			handlerRef.current(event);
 		};
-		document.addEventListener("mousedown", listener);
-		document.addEventListener("touchstart", listener);
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") handlerRef.current(event);
+		};
+		events.forEach((eventName) => {
+			document.addEventListener(eventName, onPointerEvent);
+		});
+		if (escape) document.addEventListener("keydown", onKeyDown);
 		return () => {
-			document.removeEventListener("mousedown", listener);
-			document.removeEventListener("touchstart", listener);
+			events.forEach((eventName) => {
+				document.removeEventListener(eventName, onPointerEvent);
+			});
+			if (escape) document.removeEventListener("keydown", onKeyDown);
 		};
-	}, [enabled]);
-	return ref;
+	}, [
+		enabled,
+		escape,
+		events.join(",")
+	]);
 };
 
 //#endregion

package/dist/hooks/use-click-outside.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/hooks/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst useClickOutside = <T extends HTMLElement = HTMLElement>(\n  handler: (event: MouseEvent | TouchEvent) => void,\n  enabled = true,\n) => {\n  const ref = useRef<T>(null);\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') {\n      return;\n    }\n\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const el = ref.current;\n      if (!el || el.contains(event.target as Node)) {\n        return;\n      }\n      handlerRef.current(event);\n    };\n\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [enabled]);\n\n  return ref;\n};\n\nexport default useClickOutside;\n"],"mappings":";;;AAEA,MAAM,mBACJ,SACA,UAAU,SACP;CACH,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;AAEF,iBAAgB;AACd,MAAI,CAAC,WAAW,OAAO,aAAa,YAClC;EAGF,MAAM,YAAY,UAAmC;GACnD,MAAM,KAAK,IAAI;AACf,OAAI,CAAC,MAAM,GAAG,SAAS,MAAM,OAAe,CAC1C;AAEF,cAAW,QAAQ,MAAM;;AAG3B,WAAS,iBAAiB,aAAa,SAAS;AAChD,WAAS,iBAAiB,cAAc,SAAS;AAEjD,eAAa;AACX,YAAS,oBAAoB,aAAa,SAAS;AACnD,YAAS,oBAAoB,cAAc,SAAS;;IAErD,CAAC,QAAQ,CAAC;AAEb,QAAO"}
+{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/hooks/use-click-outside.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype ClickOutsideRef = RefObject<HTMLElement | null> | null | undefined;\n\ntype ClickOutsideEvent = PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;\n\ninterface Options {\n  enabled?: boolean;\n  events?: ('pointerdown' | 'mousedown' | 'touchstart')[];\n  escape?: boolean;\n}\n\n// Takes the \"inside\" ref(s) as an argument instead of creating and\n// returning one — lets a caller pass multiple exclusion targets (e.g. a\n// dropdown's trigger button *and* its portaled panel, which live in\n// different DOM subtrees) instead of only ever watching one element.\nconst useClickOutside = (\n  refs: ClickOutsideRef | ClickOutsideRef[],\n  handler: (event: ClickOutsideEvent) => void,\n  options: Options = {},\n) => {\n  const { enabled = true, events = ['pointerdown'], escape = true } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  const refList = Array.isArray(refs) ? refs : [refs];\n  // `refs` is almost always an inline array literal at the call site, so\n  // depending on it directly would tear down/rebuild the listeners on\n  // every render — read the latest value from a ref instead.\n  const refListRef = useRef(refList);\n\n  useEffect(() => {\n    refListRef.current = refList;\n  });\n\n  const eventsKey = events.join(',');\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') {\n      return;\n    }\n\n    const isInside = (target: Node) =>\n      refListRef.current.some(ref => ref?.current?.contains(target));\n\n    const onPointerEvent = (event: Event) => {\n      const target = event.target as Node | null;\n\n      if (!target || isInside(target)) {\n        return;\n      }\n\n      handlerRef.current(event as ClickOutsideEvent);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handlerRef.current(event);\n      }\n    };\n\n    events.forEach(eventName => {\n      document.addEventListener(eventName, onPointerEvent);\n    });\n\n    if (escape) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n\n    return () => {\n      events.forEach(eventName => {\n        document.removeEventListener(eventName, onPointerEvent);\n      });\n\n      if (escape) {\n        document.removeEventListener('keydown', onKeyDown);\n      }\n    };\n    // `events` is covered by `eventsKey` below instead of the array\n    // itself, which (like `refs`) is usually a fresh literal every render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, escape, eventsKey]);\n};\n\nexport default useClickOutside;\n"],"mappings":";;;AAgBA,MAAM,mBACJ,MACA,SACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,UAAU,MAAM,SAAS,CAAC,cAAc,EAAE,SAAS,SAAS;CAEpE,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,UAAU,MAAM,QAAQ,KAAK,GAAG,OAAO,CAAC,KAAK;CAInD,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;AAIF,iBAAgB;AACd,MAAI,CAAC,WAAW,OAAO,aAAa,YAClC;EAGF,MAAM,YAAY,WAChB,WAAW,QAAQ,MAAK,QAAO,KAAK,SAAS,SAAS,OAAO,CAAC;EAEhE,MAAM,kBAAkB,UAAiB;GACvC,MAAM,SAAS,MAAM;AAErB,OAAI,CAAC,UAAU,SAAS,OAAO,CAC7B;AAGF,cAAW,QAAQ,MAA2B;;EAGhD,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,YAAW,QAAQ,MAAM;;AAI7B,SAAO,SAAQ,cAAa;AAC1B,YAAS,iBAAiB,WAAW,eAAe;IACpD;AAEF,MAAI,OACF,UAAS,iBAAiB,WAAW,UAAU;AAGjD,eAAa;AACX,UAAO,SAAQ,cAAa;AAC1B,aAAS,oBAAoB,WAAW,eAAe;KACvD;AAEF,OAAI,OACF,UAAS,oBAAoB,WAAW,UAAU;;IAMrD;EAAC;EAAS;EA9CK,OAAO,KAAK,IAAI;EA8CH,CAAC"}

package/dist/hooks/use-controllable-state.d.mts

@@ -4,11 +4,10 @@ interface UseControllableStateProps<T> {
   defaultValue?: T;
   onChange?: (value: T) => void;
 }
-declare const useControllableState: <T>({
-  value,
-  defaultValue,
-  onChange
-}: UseControllableStateProps<T>) => [T, (next: T) => void];
+declare function useControllableState<T>(props: UseControllableStateProps<T> & {
+  defaultValue: T;
+}): [T, (next: T) => void];
+declare function useControllableState<T>(props: UseControllableStateProps<T>): [T | undefined, (next: T) => void];
 //#endregion
 export { useControllableState };
 //# sourceMappingURL=use-controllable-state.d.mts.map

package/dist/hooks/use-controllable-state.mjs

@@ -1,14 +1,20 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-controllable-state.ts
-const useControllableState = ({ value, defaultValue, onChange }) => {
+function useControllableState({ value, defaultValue, onChange }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const isControlled = value !== void 0;
-	return [isControlled ? value : uncontrolledValue, useCallback((next) => {
+	const currentValue = isControlled ? value : uncontrolledValue;
+	const wasControlledRef = useRef(isControlled);
+	useEffect(() => {
+		if (!(globalThis.process?.env?.NODE_ENV === "production") && wasControlledRef.current !== isControlled) console.warn(`useControllableState is changing from ${wasControlledRef.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. A component should not switch between controlled and uncontrolled — decide on one and stick with it (e.g. by always passing a non-undefined \`value\`, or never passing one).`);
+		wasControlledRef.current = isControlled;
+	}, [isControlled]);
+	return [currentValue, useCallback((next) => {
 		if (!isControlled) setUncontrolledValue(next);
 		onChange?.(next);
 	}, [isControlled, onChange])];
-};
+}
 
 //#endregion
 export { useControllableState as default };

package/dist/hooks/use-controllable-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable-state.mjs","names":[],"sources":["../../src/hooks/use-controllable-state.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\ninterface UseControllableStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n}\n\n// Backs a controlled/uncontrolled prop pair (`value`/`defaultValue`/\n// `onChange`) with one hook: falls back to internal state whenever `value`\n// is `undefined`, and always calls `onChange` regardless of which mode is\n// active, so callers don't have to branch on it themselves.\nconst useControllableState = <T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateProps<T>): [T, (next: T) => void] => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = (isControlled ? value : uncontrolledValue) as T;\n\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  return [currentValue, setValue];\n};\n\nexport default useControllableState;\n"],"mappings":";;;AAYA,MAAM,wBAA2B,EAC/B,OACA,cACA,eAC0D;CAC1D,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,eAAe,UAAU;AAa/B,QAAO,CAZe,eAAe,QAAQ,mBAE5B,aACd,SAAY;AACX,MAAI,CAAC,aACH,sBAAqB,KAAK;AAE5B,aAAW,KAAK;IAElB,CAAC,cAAc,SAAS,CACzB,CAE8B"}
+{"version":3,"file":"use-controllable-state.mjs","names":[],"sources":["../../src/hooks/use-controllable-state.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseControllableStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n}\n\n// Backs a controlled/uncontrolled prop pair (`value`/`defaultValue`/\n// `onChange`) with one hook: falls back to internal state whenever `value`\n// is `undefined`, and always calls `onChange` regardless of which mode is\n// active, so callers don't have to branch on it themselves.\n//\n// `value === undefined` is what marks a render as uncontrolled, so it can't\n// also be used as a real, controlled value of `undefined` — that's an\n// inherent limitation of this \"sentinel\" style of controlled-state\n// detection (shared by most hooks of this shape, including Radix's own),\n// not something fixable without a different API (e.g. an explicit\n// `controlled` boolean prop instead of inferring it from `value`).\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T> & { defaultValue: T },\n): [T, (next: T) => void];\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T>,\n): [T | undefined, (next: T) => void];\nfunction useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const wasControlledRef = useRef(isControlled);\n\n  useEffect(() => {\n    // Read `process.env.NODE_ENV` through `globalThis` rather than the\n    // bare `process` global — this hook ships as plain ESM and can end up\n    // somewhere with no bundler define for it (or no `process` at all, and\n    // no @types/node in scope to even name it), where referencing it\n    // directly would fail instead of just missing a warning.\n    const nodeEnv = (\n      globalThis as { process?: { env?: { NODE_ENV?: string } } }\n    ).process?.env?.NODE_ENV;\n    const isProduction = nodeEnv === 'production';\n\n    if (!isProduction && wasControlledRef.current !== isControlled) {\n      console.warn(\n        `useControllableState is changing from ${\n          wasControlledRef.current ? 'controlled' : 'uncontrolled'\n        } to ${\n          isControlled ? 'controlled' : 'uncontrolled'\n        }. A component should not switch between controlled and uncontrolled — decide on one and stick with it (e.g. by always passing a non-undefined \\`value\\`, or never passing one).`,\n      );\n    }\n    wasControlledRef.current = isControlled;\n  }, [isControlled]);\n\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  return [currentValue, setValue];\n}\n\nexport default useControllableState;\n"],"mappings":";;;AAyBA,SAAS,qBAAwB,EAC/B,OACA,cACA,YAC+B;CAC/B,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,eAAe,UAAU;CAC/B,MAAM,eAAe,eAAe,QAAQ;CAE5C,MAAM,mBAAmB,OAAO,aAAa;AAE7C,iBAAgB;AAWd,MAAI,EAJF,WACA,SAAS,KAAK,aACiB,iBAEZ,iBAAiB,YAAY,aAChD,SAAQ,KACN,yCACE,iBAAiB,UAAU,eAAe,eAC3C,MACC,eAAe,eAAe,eAC/B,iLACF;AAEH,mBAAiB,UAAU;IAC1B,CAAC,aAAa,CAAC;AAYlB,QAAO,CAAC,cAVS,aACd,SAAY;AACX,MAAI,CAAC,aACH,sBAAqB,KAAK;AAE5B,aAAW,KAAK;IAElB,CAAC,cAAc,SAAS,CACzB,CAE8B"}

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

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

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

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-debounced-value.ts
+const useDebouncedValue = (value, delay = 100) => {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		timeoutRef.current = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [value, delay]);
+	return debouncedValue;
+};
+
+//#endregion
+export { useDebouncedValue as default };
+//# sourceMappingURL=use-debounced-value.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-value.mjs","names":[],"sources":["../../src/hooks/use-debounced-value.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n// The value-shaped counterpart to useDebounce (which is callback-shaped),\n// symmetric with useThrottle's `(value, delay) => value` signature. The\n// common \"just give me the debounced value\" case otherwise needs two\n// pieces of state and an effect built on useDebounce by hand.\nconst useDebouncedValue = <T>(value: T, delay = 100): T => {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    timeoutRef.current = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport default useDebouncedValue;\n"],"mappings":";;;AAMA,MAAM,qBAAwB,OAAU,QAAQ,QAAW;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,aAAW,UAAU,iBAAiB;AACpC,qBAAkB,MAAM;KACvB,MAAM;AAET,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}

package/dist/hooks/use-element-position.mjs

@@ -1,27 +1,56 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-element-position.ts
+const rectsEqual = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height && a.top === b.top && a.left === b.left;
+};
 const useElementPosition = (elementRef) => {
 	const [rect, setRect] = useState(null);
+	const rectRef = useRef(null);
 	useEffect(() => {
 		const getElement = (ref) => {
 			if (typeof ref === "string") return document.querySelector(ref);
 			return ref.current;
 		};
-		const updateRect = () => {
-			const element = getElement(elementRef);
-			if (element) setRect(element.getBoundingClientRect());
-			else setRect(null);
+		let rafId;
+		let currentElement = null;
+		const commitRect = (next) => {
+			if (rectsEqual(rectRef.current, next)) return;
+			rectRef.current = next;
+			setRect(next);
 		};
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateRect()) : void 0;
+		function updateRect() {
+			const element = getElement(elementRef);
+			if (element !== currentElement) {
+				if (currentElement) resizeObserver?.unobserve(currentElement);
+				if (element) resizeObserver?.observe(element);
+				currentElement = element;
+			}
+			commitRect(element ? element.getBoundingClientRect() : null);
+		}
 		const onUpdate = () => {
-			requestAnimationFrame(updateRect);
+			rafId = requestAnimationFrame(updateRect);
 		};
 		updateRect();
-		window.addEventListener("scroll", onUpdate, { passive: true });
+		window.addEventListener("scroll", onUpdate, {
+			passive: true,
+			capture: true
+		});
 		window.addEventListener("resize", onUpdate, { passive: true });
+		const mutationObserver = typeof elementRef === "string" && typeof MutationObserver !== "undefined" ? new MutationObserver(onUpdate) : void 0;
+		mutationObserver?.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
 		return () => {
-			window.removeEventListener("scroll", onUpdate);
+			if (rafId !== void 0) cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", onUpdate, { capture: true });
 			window.removeEventListener("resize", onUpdate);
+			resizeObserver?.disconnect();
+			mutationObserver?.disconnect();
 		};
 	}, [elementRef]);
 	return rect;

package/dist/hooks/use-element-position.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-element-position.mjs","names":[],"sources":["../../src/hooks/use-element-position.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ntype ElementReference<T> = string | RefObject<T>;\n\nconst useElementPosition = <T>(elementRef: ElementReference<T>) => {\n  const [rect, setRect] = useState<DOMRect | null>(null);\n\n  useEffect(() => {\n    const getElement = (ref: ElementReference<T>): T | null => {\n      if (typeof ref === 'string') {\n        return document.querySelector(ref) as T;\n      }\n      return ref.current;\n    };\n\n    const updateRect = () => {\n      const element = getElement(elementRef) as HTMLElement | null;\n      if (element) {\n        setRect(element.getBoundingClientRect());\n      } else {\n        setRect(null);\n      }\n    };\n\n    const onUpdate = () => {\n      requestAnimationFrame(updateRect);\n    };\n\n    updateRect();\n\n    window.addEventListener('scroll', onUpdate, { passive: true });\n    window.addEventListener('resize', onUpdate, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', onUpdate);\n      window.removeEventListener('resize', onUpdate);\n    };\n  }, [elementRef]);\n\n  return rect;\n};\n\nexport default useElementPosition;\n"],"mappings":";;;AAIA,MAAM,sBAAyB,eAAoC;CACjE,MAAM,CAAC,MAAM,WAAW,SAAyB,KAAK;AAEtD,iBAAgB;EACd,MAAM,cAAc,QAAuC;AACzD,OAAI,OAAO,QAAQ,SACjB,QAAO,SAAS,cAAc,IAAI;AAEpC,UAAO,IAAI;;EAGb,MAAM,mBAAmB;GACvB,MAAM,UAAU,WAAW,WAAW;AACtC,OAAI,QACF,SAAQ,QAAQ,uBAAuB,CAAC;OAExC,SAAQ,KAAK;;EAIjB,MAAM,iBAAiB;AACrB,yBAAsB,WAAW;;AAGnC,cAAY;AAEZ,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAC9D,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAE9D,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,UAAU,SAAS;;IAE/C,CAAC,WAAW,CAAC;AAEhB,QAAO"}
+{"version":3,"file":"use-element-position.mjs","names":[],"sources":["../../src/hooks/use-element-position.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from 'react';\n\ntype ElementReference<T> = string | RefObject<T>;\n\nconst rectsEqual = (a: DOMRect | null, b: DOMRect | null) => {\n  if (a === b) {\n    return true;\n  }\n  if (!a || !b) {\n    return false;\n  }\n  return (\n    a.x === b.x &&\n    a.y === b.y &&\n    a.width === b.width &&\n    a.height === b.height &&\n    a.top === b.top &&\n    a.left === b.left\n  );\n};\n\nconst useElementPosition = <T>(elementRef: ElementReference<T>) => {\n  const [rect, setRect] = useState<DOMRect | null>(null);\n  const rectRef = useRef<DOMRect | null>(null);\n\n  useEffect(() => {\n    const getElement = (ref: ElementReference<T>): T | null => {\n      if (typeof ref === 'string') {\n        return document.querySelector(ref) as T | null;\n      }\n      return ref.current;\n    };\n\n    let rafId: number | undefined;\n    let currentElement: HTMLElement | null = null;\n\n    const commitRect = (next: DOMRect | null) => {\n      if (rectsEqual(rectRef.current, next)) {\n        return;\n      }\n      rectRef.current = next;\n      setRect(next);\n    };\n\n    // ResizeObserver only fires for the observed element's own size/layout\n    // changes, so it's kept pointed at whichever element is actually\n    // current — which can change under a string selector, or if the DOM\n    // node behind a ref gets swapped out.\n    const resizeObserver =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(() => updateRect())\n        : undefined;\n\n    function updateRect() {\n      const element = getElement(elementRef) as HTMLElement | null;\n\n      if (element !== currentElement) {\n        if (currentElement) {\n          resizeObserver?.unobserve(currentElement);\n        }\n        if (element) {\n          resizeObserver?.observe(element);\n        }\n        currentElement = element;\n      }\n\n      commitRect(element ? element.getBoundingClientRect() : null);\n    }\n\n    const onUpdate = () => {\n      rafId = requestAnimationFrame(updateRect);\n    };\n\n    updateRect();\n\n    // `capture: true` also catches scroll events from scrollable ancestor\n    // containers, which don't bubble and so wouldn't otherwise reach a\n    // listener on `window`.\n    window.addEventListener('scroll', onUpdate, {\n      passive: true,\n      capture: true,\n    });\n    window.addEventListener('resize', onUpdate, { passive: true });\n\n    // A string selector's target may not exist yet when this effect first\n    // runs — watch the DOM for it instead of leaving `rect` permanently\n    // null once it does mount.\n    const mutationObserver =\n      typeof elementRef === 'string' && typeof MutationObserver !== 'undefined'\n        ? new MutationObserver(onUpdate)\n        : undefined;\n    mutationObserver?.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (rafId !== undefined) {\n        cancelAnimationFrame(rafId);\n      }\n      window.removeEventListener('scroll', onUpdate, { capture: true });\n      window.removeEventListener('resize', onUpdate);\n      resizeObserver?.disconnect();\n      mutationObserver?.disconnect();\n    };\n  }, [elementRef]);\n\n  return rect;\n};\n\nexport default useElementPosition;\n"],"mappings":";;;AAIA,MAAM,cAAc,GAAmB,MAAsB;AAC3D,KAAI,MAAM,EACR,QAAO;AAET,KAAI,CAAC,KAAK,CAAC,EACT,QAAO;AAET,QACE,EAAE,MAAM,EAAE,KACV,EAAE,MAAM,EAAE,KACV,EAAE,UAAU,EAAE,SACd,EAAE,WAAW,EAAE,UACf,EAAE,QAAQ,EAAE,OACZ,EAAE,SAAS,EAAE;;AAIjB,MAAM,sBAAyB,eAAoC;CACjE,MAAM,CAAC,MAAM,WAAW,SAAyB,KAAK;CACtD,MAAM,UAAU,OAAuB,KAAK;AAE5C,iBAAgB;EACd,MAAM,cAAc,QAAuC;AACzD,OAAI,OAAO,QAAQ,SACjB,QAAO,SAAS,cAAc,IAAI;AAEpC,UAAO,IAAI;;EAGb,IAAI;EACJ,IAAI,iBAAqC;EAEzC,MAAM,cAAc,SAAyB;AAC3C,OAAI,WAAW,QAAQ,SAAS,KAAK,CACnC;AAEF,WAAQ,UAAU;AAClB,WAAQ,KAAK;;EAOf,MAAM,iBACJ,OAAO,mBAAmB,cACtB,IAAI,qBAAqB,YAAY,CAAC,GACtC;EAEN,SAAS,aAAa;GACpB,MAAM,UAAU,WAAW,WAAW;AAEtC,OAAI,YAAY,gBAAgB;AAC9B,QAAI,eACF,iBAAgB,UAAU,eAAe;AAE3C,QAAI,QACF,iBAAgB,QAAQ,QAAQ;AAElC,qBAAiB;;AAGnB,cAAW,UAAU,QAAQ,uBAAuB,GAAG,KAAK;;EAG9D,MAAM,iBAAiB;AACrB,WAAQ,sBAAsB,WAAW;;AAG3C,cAAY;AAKZ,SAAO,iBAAiB,UAAU,UAAU;GAC1C,SAAS;GACT,SAAS;GACV,CAAC;AACF,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;EAK9D,MAAM,mBACJ,OAAO,eAAe,YAAY,OAAO,qBAAqB,cAC1D,IAAI,iBAAiB,SAAS,GAC9B;AACN,oBAAkB,QAAQ,SAAS,MAAM;GACvC,WAAW;GACX,SAAS;GACV,CAAC;AAEF,eAAa;AACX,OAAI,UAAU,OACZ,sBAAqB,MAAM;AAE7B,UAAO,oBAAoB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AACjE,UAAO,oBAAoB,UAAU,SAAS;AAC9C,mBAAgB,YAAY;AAC5B,qBAAkB,YAAY;;IAE/B,CAAC,WAAW,CAAC;AAEhB,QAAO"}

package/dist/hooks/use-element-scroll.d.mts

@@ -1,5 +1,10 @@
 //#region src/hooks/use-element-scroll.d.ts
-declare const useElementScroll: () => {
+interface Options {
+  threshold?: number;
+}
+declare const useElementScroll: ({
+  threshold
+}?: Options) => {
   element: HTMLElement | null;
   setRef: (el: HTMLElement | null) => void;
   scrollY: number;

package/dist/hooks/use-element-scroll.mjs

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-element-scroll.ts
-const useElementScroll = () => {
+const scrollPositionEqual = (a, b) => a.scrollY === b.scrollY && a.scrollPercentage === b.scrollPercentage && a.isAtTop === b.isAtTop && a.isAtBottom === b.isAtBottom && a.scrollableHeight === b.scrollableHeight && a.clientHeight === b.clientHeight && a.scrollHeight === b.scrollHeight;
+const useElementScroll = ({ threshold = 1 } = {}) => {
 	const [element, setElement] = useState(null);
 	const [scrollPosition, setScrollPosition] = useState({
 		scrollY: 0,
@@ -12,16 +13,22 @@ const useElementScroll = () => {
 		clientHeight: 0,
 		scrollHeight: 0
 	});
+	const scrollPositionRef = useRef(scrollPosition);
 	const setRef = useCallback((el) => {
 		setElement(el);
 	}, []);
 	useEffect(() => {
 		if (!element) return;
+		const commit = (next) => {
+			if (scrollPositionEqual(scrollPositionRef.current, next)) return;
+			scrollPositionRef.current = next;
+			setScrollPosition(next);
+		};
 		const updateScrollPosition = () => {
 			const { scrollTop, scrollHeight, clientHeight } = element;
 			const scrollableHeight = scrollHeight - clientHeight;
 			if (scrollableHeight <= 0) {
-				setScrollPosition({
+				commit({
 					scrollY: 0,
 					scrollPercentage: 0,
 					isAtTop: true,
@@ -32,11 +39,11 @@ const useElementScroll = () => {
 				});
 				return;
 			}
-			setScrollPosition({
+			commit({
 				scrollY: scrollTop,
 				scrollPercentage: Math.min(100, Math.max(0, scrollTop / scrollableHeight * 100)),
 				isAtTop: scrollTop <= 0,
-				isAtBottom: scrollTop >= scrollableHeight - 1,
+				isAtBottom: scrollTop >= scrollableHeight - threshold,
 				scrollableHeight,
 				clientHeight,
 				scrollHeight
@@ -50,12 +57,27 @@ const useElementScroll = () => {
 		const resizeObserver = new ResizeObserver(() => {
 			updateScrollPosition();
 		});
-		resizeObserver.observe(element);
+		const observeChildren = () => {
+			resizeObserver.observe(element);
+			Array.from(element.children).forEach((child) => {
+				resizeObserver.observe(child);
+			});
+		};
+		observeChildren();
+		const mutationObserver = new MutationObserver(() => {
+			observeChildren();
+			updateScrollPosition();
+		});
+		mutationObserver.observe(element, {
+			childList: true,
+			subtree: true
+		});
 		return () => {
 			element.removeEventListener("scroll", onScroll);
-			resizeObserver.unobserve(element);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
 		};
-	}, [element]);
+	}, [element, threshold]);
 	return {
 		...scrollPosition,
 		element,

package/dist/hooks/use-element-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-element-scroll.mjs","names":[],"sources":["../../src/hooks/use-element-scroll.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ninterface ScrollPosition {\n  scrollY: number;\n  scrollPercentage: number;\n  isAtTop: boolean;\n  isAtBottom: boolean;\n  scrollableHeight: number;\n  clientHeight: number;\n  scrollHeight: number;\n}\n\nconst useElementScroll = () => {\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    scrollY: 0,\n    scrollPercentage: 0,\n    isAtTop: true,\n    isAtBottom: false,\n    scrollableHeight: 0,\n    clientHeight: 0,\n    scrollHeight: 0,\n  });\n\n  const setRef = useCallback((el: HTMLElement | null) => {\n    setElement(el);\n  }, []);\n\n  useEffect(() => {\n    if (!element) {\n      return;\n    }\n\n    const updateScrollPosition = () => {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      const scrollableHeight = scrollHeight - clientHeight;\n\n      if (scrollableHeight <= 0) {\n        setScrollPosition({\n          scrollY: 0,\n          scrollPercentage: 0,\n          isAtTop: true,\n          isAtBottom: true,\n          scrollableHeight: 0,\n          clientHeight,\n          scrollHeight,\n        });\n        return;\n      }\n\n      const percentage = Math.min(\n        100,\n        Math.max(0, (scrollTop / scrollableHeight) * 100),\n      );\n\n      setScrollPosition({\n        scrollY: scrollTop,\n        scrollPercentage: percentage,\n        isAtTop: scrollTop <= 0,\n        isAtBottom: scrollTop >= scrollableHeight - 1,\n        scrollableHeight,\n        clientHeight,\n        scrollHeight,\n      });\n    };\n\n    updateScrollPosition();\n\n    const onScroll = () => {\n      updateScrollPosition();\n    };\n\n    element.addEventListener('scroll', onScroll, { passive: true });\n\n    const resizeObserver = new ResizeObserver(() => {\n      updateScrollPosition();\n    });\n\n    resizeObserver.observe(element);\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      resizeObserver.unobserve(element);\n    };\n  }, [element]);\n\n  return { ...scrollPosition, element, setRef };\n};\n\nexport default useElementScroll;\n"],"mappings":";;;AAYA,MAAM,yBAAyB;CAC7B,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAK;CAChE,MAAM,CAAC,gBAAgB,qBAAqB,SAAyB;EACnE,SAAS;EACT,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,kBAAkB;EAClB,cAAc;EACd,cAAc;EACf,CAAC;CAEF,MAAM,SAAS,aAAa,OAA2B;AACrD,aAAW,GAAG;IACb,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,6BAA6B;GACjC,MAAM,EAAE,WAAW,cAAc,iBAAiB;GAClD,MAAM,mBAAmB,eAAe;AAExC,OAAI,oBAAoB,GAAG;AACzB,sBAAkB;KAChB,SAAS;KACT,kBAAkB;KAClB,SAAS;KACT,YAAY;KACZ,kBAAkB;KAClB;KACA;KACD,CAAC;AACF;;AAQF,qBAAkB;IAChB,SAAS;IACT,kBAPiB,KAAK,IACtB,KACA,KAAK,IAAI,GAAI,YAAY,mBAAoB,IAAI,CAClD;IAKC,SAAS,aAAa;IACtB,YAAY,aAAa,mBAAmB;IAC5C;IACA;IACA;IACD,CAAC;;AAGJ,wBAAsB;EAEtB,MAAM,iBAAiB;AACrB,yBAAsB;;AAGxB,UAAQ,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;EAE/D,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,yBAAsB;IACtB;AAEF,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,SAAS;AAC/C,kBAAe,UAAU,QAAQ;;IAElC,CAAC,QAAQ,CAAC;AAEb,QAAO;EAAE,GAAG;EAAgB;EAAS;EAAQ"}
+{"version":3,"file":"use-element-scroll.mjs","names":[],"sources":["../../src/hooks/use-element-scroll.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollPosition {\n  scrollY: number;\n  scrollPercentage: number;\n  isAtTop: boolean;\n  isAtBottom: boolean;\n  scrollableHeight: number;\n  clientHeight: number;\n  scrollHeight: number;\n}\n\nconst scrollPositionEqual = (a: ScrollPosition, b: ScrollPosition) =>\n  a.scrollY === b.scrollY &&\n  a.scrollPercentage === b.scrollPercentage &&\n  a.isAtTop === b.isAtTop &&\n  a.isAtBottom === b.isAtBottom &&\n  a.scrollableHeight === b.scrollableHeight &&\n  a.clientHeight === b.clientHeight &&\n  a.scrollHeight === b.scrollHeight;\n\ninterface Options {\n  // How close to the bottom (in px) still counts as \"at bottom\". Matches\n  // the previous hardcoded value by default.\n  threshold?: number;\n}\n\nconst useElementScroll = ({ threshold = 1 }: Options = {}) => {\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    scrollY: 0,\n    scrollPercentage: 0,\n    isAtTop: true,\n    isAtBottom: false,\n    scrollableHeight: 0,\n    clientHeight: 0,\n    scrollHeight: 0,\n  });\n  const scrollPositionRef = useRef(scrollPosition);\n\n  const setRef = useCallback((el: HTMLElement | null) => {\n    setElement(el);\n  }, []);\n\n  useEffect(() => {\n    if (!element) {\n      return;\n    }\n\n    const commit = (next: ScrollPosition) => {\n      if (scrollPositionEqual(scrollPositionRef.current, next)) {\n        return;\n      }\n      scrollPositionRef.current = next;\n      setScrollPosition(next);\n    };\n\n    const updateScrollPosition = () => {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      const scrollableHeight = scrollHeight - clientHeight;\n\n      if (scrollableHeight <= 0) {\n        commit({\n          scrollY: 0,\n          scrollPercentage: 0,\n          isAtTop: true,\n          isAtBottom: true,\n          scrollableHeight: 0,\n          clientHeight,\n          scrollHeight,\n        });\n        return;\n      }\n\n      const percentage = Math.min(\n        100,\n        Math.max(0, (scrollTop / scrollableHeight) * 100),\n      );\n\n      commit({\n        scrollY: scrollTop,\n        scrollPercentage: percentage,\n        isAtTop: scrollTop <= 0,\n        isAtBottom: scrollTop >= scrollableHeight - threshold,\n        scrollableHeight,\n        clientHeight,\n        scrollHeight,\n      });\n    };\n\n    updateScrollPosition();\n\n    const onScroll = () => {\n      updateScrollPosition();\n    };\n\n    element.addEventListener('scroll', onScroll, { passive: true });\n\n    const resizeObserver = new ResizeObserver(() => {\n      updateScrollPosition();\n    });\n\n    // Observing only the container misses content that grows/shrinks\n    // `scrollHeight` without resizing the container's own box (a list\n    // gaining items, an image finishing its load) — also watch every\n    // child so their own size changes are caught.\n    const observeChildren = () => {\n      resizeObserver.observe(element);\n      Array.from(element.children).forEach(child => {\n        resizeObserver.observe(child);\n      });\n    };\n\n    observeChildren();\n\n    // Catches children being added/removed (re-syncs which elements the\n    // ResizeObserver above watches, and recalculates immediately) —\n    // ResizeObserver alone doesn't see brand new children until this runs.\n    const mutationObserver = new MutationObserver(() => {\n      observeChildren();\n      updateScrollPosition();\n    });\n    mutationObserver.observe(element, { childList: true, subtree: true });\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [element, threshold]);\n\n  return { ...scrollPosition, element, setRef };\n};\n\nexport default useElementScroll;\n"],"mappings":";;;AAYA,MAAM,uBAAuB,GAAmB,MAC9C,EAAE,YAAY,EAAE,WAChB,EAAE,qBAAqB,EAAE,oBACzB,EAAE,YAAY,EAAE,WAChB,EAAE,eAAe,EAAE,cACnB,EAAE,qBAAqB,EAAE,oBACzB,EAAE,iBAAiB,EAAE,gBACrB,EAAE,iBAAiB,EAAE;AAQvB,MAAM,oBAAoB,EAAE,YAAY,MAAe,EAAE,KAAK;CAC5D,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAK;CAChE,MAAM,CAAC,gBAAgB,qBAAqB,SAAyB;EACnE,SAAS;EACT,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,kBAAkB;EAClB,cAAc;EACd,cAAc;EACf,CAAC;CACF,MAAM,oBAAoB,OAAO,eAAe;CAEhD,MAAM,SAAS,aAAa,OAA2B;AACrD,aAAW,GAAG;IACb,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,UAAU,SAAyB;AACvC,OAAI,oBAAoB,kBAAkB,SAAS,KAAK,CACtD;AAEF,qBAAkB,UAAU;AAC5B,qBAAkB,KAAK;;EAGzB,MAAM,6BAA6B;GACjC,MAAM,EAAE,WAAW,cAAc,iBAAiB;GAClD,MAAM,mBAAmB,eAAe;AAExC,OAAI,oBAAoB,GAAG;AACzB,WAAO;KACL,SAAS;KACT,kBAAkB;KAClB,SAAS;KACT,YAAY;KACZ,kBAAkB;KAClB;KACA;KACD,CAAC;AACF;;AAQF,UAAO;IACL,SAAS;IACT,kBAPiB,KAAK,IACtB,KACA,KAAK,IAAI,GAAI,YAAY,mBAAoB,IAAI,CAClD;IAKC,SAAS,aAAa;IACtB,YAAY,aAAa,mBAAmB;IAC5C;IACA;IACA;IACD,CAAC;;AAGJ,wBAAsB;EAEtB,MAAM,iBAAiB;AACrB,yBAAsB;;AAGxB,UAAQ,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;EAE/D,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,yBAAsB;IACtB;EAMF,MAAM,wBAAwB;AAC5B,kBAAe,QAAQ,QAAQ;AAC/B,SAAM,KAAK,QAAQ,SAAS,CAAC,SAAQ,UAAS;AAC5C,mBAAe,QAAQ,MAAM;KAC7B;;AAGJ,mBAAiB;EAKjB,MAAM,mBAAmB,IAAI,uBAAuB;AAClD,oBAAiB;AACjB,yBAAsB;IACtB;AACF,mBAAiB,QAAQ,SAAS;GAAE,WAAW;GAAM,SAAS;GAAM,CAAC;AAErE,eAAa;AACX,WAAQ,oBAAoB,UAAU,SAAS;AAC/C,kBAAe,YAAY;AAC3B,oBAAiB,YAAY;;IAE9B,CAAC,SAAS,UAAU,CAAC;AAExB,QAAO;EAAE,GAAG;EAAgB;EAAS;EAAQ"}

package/dist/hooks/use-event-listener.d.mts

@@ -0,0 +1,21 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-event-listener.d.ts
+interface Options {
+  capture?: boolean;
+  passive?: boolean;
+  once?: boolean;
+  enabled?: boolean;
+}
+declare function useEventListener<K extends keyof WindowEventMap>(type: K, handler: (event: WindowEventMap[K]) => void, options?: Options & {
+  target?: Window | null;
+}): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(type: K, handler: (event: DocumentEventMap[K]) => void, options: Options & {
+  target: Document | RefObject<Document | null>;
+}): void;
+declare function useEventListener<T extends HTMLElement, K extends keyof HTMLElementEventMap>(type: K, handler: (event: HTMLElementEventMap[K]) => void, options: Options & {
+  target: RefObject<T | null>;
+}): void;
+//#endregion
+export { useEventListener };
+//# sourceMappingURL=use-event-listener.d.mts.map

package/dist/hooks/use-event-listener.mjs

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-event-listener.ts
+function useEventListener(type, handler, options = {}) {
+	const { target, capture, passive, once, enabled = true } = options;
+	const handlerRef = useRef(handler);
+	useEffect(() => {
+		handlerRef.current = handler;
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		const resolvedTarget = target && "current" in target ? target.current : target ?? (typeof window === "undefined" ? null : window);
+		if (!resolvedTarget) return;
+		const listener = (event) => {
+			handlerRef.current(event);
+		};
+		resolvedTarget.addEventListener(type, listener, {
+			capture,
+			passive,
+			once
+		});
+		return () => {
+			resolvedTarget.removeEventListener(type, listener, { capture });
+		};
+	}, [
+		type,
+		target,
+		capture,
+		passive,
+		once,
+		enabled
+	]);
+}
+
+//#endregion
+export { useEventListener as default };
+//# sourceMappingURL=use-event-listener.mjs.map

package/dist/hooks/use-event-listener.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-event-listener.mjs","names":[],"sources":["../../src/hooks/use-event-listener.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ninterface Options {\n  capture?: boolean;\n  passive?: boolean;\n  once?: boolean;\n  enabled?: boolean;\n}\n\ntype EventListenerTarget = EventTarget | RefObject<EventTarget | null> | null;\n\nfunction useEventListener<K extends keyof WindowEventMap>(\n  type: K,\n  handler: (event: WindowEventMap[K]) => void,\n  options?: Options & { target?: Window | null },\n): void;\nfunction useEventListener<K extends keyof DocumentEventMap>(\n  type: K,\n  handler: (event: DocumentEventMap[K]) => void,\n  options: Options & { target: Document | RefObject<Document | null> },\n): void;\nfunction useEventListener<\n  T extends HTMLElement,\n  K extends keyof HTMLElementEventMap,\n>(\n  type: K,\n  handler: (event: HTMLElementEventMap[K]) => void,\n  options: Options & { target: RefObject<T | null> },\n): void;\n\n// Resolves `target` (default `window`, or a raw EventTarget, or a\n// RefObject pointing at one) and (de)registers `type` on it — the pair of\n// addEventListener/removeEventListener calls duplicated across ui-kit\n// (marquee item) and live-editor (error handlers). `handler` is read\n// through a ref so a fresh function every render doesn't tear down and\n// re-add the listener.\nfunction useEventListener(\n  type: string,\n  handler: (event: Event) => void,\n  options: Options & { target?: EventListenerTarget } = {},\n) {\n  const { target, capture, passive, once, enabled = true } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    const resolvedTarget =\n      target && 'current' in target\n        ? target.current\n        : (target ?? (typeof window === 'undefined' ? null : window));\n\n    if (!resolvedTarget) {\n      return;\n    }\n\n    const listener = (event: Event) => {\n      handlerRef.current(event);\n    };\n\n    resolvedTarget.addEventListener(type, listener, { capture, passive, once });\n\n    return () => {\n      resolvedTarget.removeEventListener(type, listener, { capture });\n    };\n  }, [type, target, capture, passive, once, enabled]);\n}\n\nexport default useEventListener;\n"],"mappings":";;;AAoCA,SAAS,iBACP,MACA,SACA,UAAsD,EAAE,EACxD;CACA,MAAM,EAAE,QAAQ,SAAS,SAAS,MAAM,UAAU,SAAS;CAE3D,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;AAEF,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,iBACJ,UAAU,aAAa,SACnB,OAAO,UACN,WAAW,OAAO,WAAW,cAAc,OAAO;AAEzD,MAAI,CAAC,eACH;EAGF,MAAM,YAAY,UAAiB;AACjC,cAAW,QAAQ,MAAM;;AAG3B,iBAAe,iBAAiB,MAAM,UAAU;GAAE;GAAS;GAAS;GAAM,CAAC;AAE3E,eAAa;AACX,kBAAe,oBAAoB,MAAM,UAAU,EAAE,SAAS,CAAC;;IAEhE;EAAC;EAAM;EAAQ;EAAS;EAAS;EAAM;EAAQ,CAAC"}

package/dist/hooks/use-file-drop.d.mts

@@ -0,0 +1,14 @@
+//#region src/hooks/use-file-drop.d.ts
+interface Options {
+  onDrop?: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+}
+declare const useFileDrop: <T extends HTMLElement = HTMLElement>(options?: Options) => {
+  dropRef: (node: T | null) => void;
+  isDragging: boolean;
+};
+//#endregion
+export { useFileDrop };
+//# sourceMappingURL=use-file-drop.d.mts.map

package/dist/hooks/use-file-drop.mjs

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-file-drop.ts
+const matchesAccept = (file, accept) => {
+	if (!accept) return true;
+	const patterns = accept.split(",").map((pattern) => pattern.trim()).filter(Boolean);
+	if (patterns.length === 0) return true;
+	return patterns.some((pattern) => {
+		if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+		if (pattern.endsWith("/*")) return file.type.startsWith(pattern.slice(0, -1));
+		return file.type === pattern;
+	});
+};
+const useFileDrop = (options = {}) => {
+	const { onDrop, accept, multiple = true, disabled = false } = options;
+	const [isDragging, setIsDragging] = useState(false);
+	const dragCounterRef = useRef(0);
+	const onDropRef = useRef(onDrop);
+	const acceptRef = useRef(accept);
+	const multipleRef = useRef(multiple);
+	const disabledRef = useRef(disabled);
+	useEffect(() => {
+		onDropRef.current = onDrop;
+		acceptRef.current = accept;
+		multipleRef.current = multiple;
+		disabledRef.current = disabled;
+	});
+	useEffect(() => {
+		if (disabled) {
+			dragCounterRef.current = 0;
+			setIsDragging(false);
+		}
+	}, [disabled]);
+	const cleanupRef = useRef(null);
+	return {
+		dropRef: useCallback((node) => {
+			cleanupRef.current?.();
+			cleanupRef.current = null;
+			if (!node) return;
+			const onDragEnter = (event) => {
+				if (disabledRef.current) return;
+				event.preventDefault();
+				dragCounterRef.current += 1;
+				if (dragCounterRef.current === 1) setIsDragging(true);
+			};
+			const onDragLeave = (event) => {
+				if (disabledRef.current) return;
+				event.preventDefault();
+				dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+				if (dragCounterRef.current === 0) setIsDragging(false);
+			};
+			const onDragOver = (event) => {
+				if (disabledRef.current) return;
+				event.preventDefault();
+			};
+			const onDrop = (event) => {
+				if (disabledRef.current) return;
+				event.preventDefault();
+				dragCounterRef.current = 0;
+				setIsDragging(false);
+				const fileList = event.dataTransfer?.files;
+				if (!fileList || fileList.length === 0) return;
+				let files = Array.from(fileList).filter((file) => matchesAccept(file, acceptRef.current));
+				if (!multipleRef.current) files = files.slice(0, 1);
+				if (files.length > 0) onDropRef.current?.(files);
+			};
+			node.addEventListener("dragenter", onDragEnter);
+			node.addEventListener("dragleave", onDragLeave);
+			node.addEventListener("dragover", onDragOver);
+			node.addEventListener("drop", onDrop);
+			cleanupRef.current = () => {
+				node.removeEventListener("dragenter", onDragEnter);
+				node.removeEventListener("dragleave", onDragLeave);
+				node.removeEventListener("dragover", onDragOver);
+				node.removeEventListener("drop", onDrop);
+				dragCounterRef.current = 0;
+			};
+		}, []),
+		isDragging
+	};
+};
+
+//#endregion
+export { useFileDrop as default };
+//# sourceMappingURL=use-file-drop.mjs.map