@reactuses/core 2.0.1 → 2.2.0

package/dist/index.cjs

@@ -501,6 +501,13 @@ function getTargetElement(target, defaultElement) {
   }
   return targetElement;
 }
+function useLatestElement(target, defaultElement) {
+  const ref = React.useRef(getTargetElement(target, defaultElement));
+  React.useEffect(() => {
+    ref.current = getTargetElement(target, defaultElement);
+  }, [defaultElement, target]);
+  return ref;
+}
 
 const isPrimitive$1 = (val) => val !== Object(val);
 function useCustomCompareEffect(effect, deps, depsEqual) {
@@ -547,17 +554,21 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElement = getTargetElement(element, window);
+  const targetElementRef = useLatestElement(element, defaultWindow);
   useDeepCompareEffect(() => {
+    const targetElement = targetElementRef.current;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
     const eventListener = (event) => savedHandler.current(event);
     on(targetElement, eventName, eventListener, options);
     return () => {
+      if (!(targetElement && targetElement.removeEventListener)) {
+        return;
+      }
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, targetElement, options, savedHandler]);
+  }, [eventName, targetElementRef.current, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -701,20 +712,20 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
 function useMutationObserver(callback, target, options = {}) {
   const callbackRef = useLatest(callback);
   const observerRef = React.useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
-    observerRef.current.observe(element, options);
+    observerRef.current.observe(element.current, options);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
@@ -997,7 +1008,7 @@ function useMediaDevices() {
   }, []);
   return state;
 }
-const useMediaDevicesMock = () => ({});
+const useMediaDevicesMock = () => ({ devices: [] });
 var useMediaDevices$1 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -1499,23 +1510,23 @@ function useOrientation(initialState = defaultState) {
 function useIntersectionObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new IntersectionObserver(
       savedCallback.current,
       options
     );
-    observerRef.current.observe(element);
+    observerRef.current.observe(element.current);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
@@ -1555,27 +1566,26 @@ function useDocumentVisibility() {
 function useResizeObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
-    observerRef.current.observe(element, options);
+    observerRef.current.observe(element.current, options);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
 function useDropZone(target, onDrop) {
   const [over, setOver] = React.useState(false);
   const counter = React.useRef(0);
-  const element = getTargetElement(target);
   useEventListener(
     "dragenter",
     (event) => {
@@ -1583,14 +1593,14 @@ function useDropZone(target, onDrop) {
       counter.current += 1;
       setOver(true);
     },
-    element
+    target
   );
   useEventListener(
     "dragover",
     (event) => {
       event.preventDefault();
     },
-    element
+    target
   );
   useEventListener(
     "dragleave",
@@ -1601,7 +1611,7 @@ function useDropZone(target, onDrop) {
         setOver(false);
       }
     },
-    element
+    target
   );
   useEventListener(
     "drop",
@@ -1613,7 +1623,7 @@ function useDropZone(target, onDrop) {
       const files = Array.from((_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
       onDrop == null ? void 0 : onDrop(files.length === 0 ? null : files);
     },
-    element
+    target
   );
   return over;
 }
@@ -1764,7 +1774,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async$1 = (__this, __arguments, generator) => {
+var __async$2 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -1793,25 +1803,27 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
+  const latestOptions = useLatest(options);
   const di = state[3][direction];
   useUpdateEffect(() => {
-    const fn = () => __async$1(this, null, function* () {
-      var _a2, _b2;
+    const opts = latestOptions.current;
+    const fn = () => __async$2(this, null, function* () {
+      var _a2, _b2, _c, _d;
       const previous = {
-        height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
-        width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
+        height: (_b2 = (_a2 = element.current) == null ? void 0 : _a2.scrollHeight) != null ? _b2 : 0,
+        width: (_d = (_c = element.current) == null ? void 0 : _c.scrollWidth) != null ? _d : 0
       };
       yield savedLoadMore.current(state);
-      if (options.preserveScrollPosition && element) {
-        element.scrollTo({
-          top: element.scrollHeight - previous.height,
-          left: element.scrollWidth - previous.width
+      if (opts.preserveScrollPosition && element.current) {
+        element.current.scrollTo({
+          top: element.current.scrollHeight - previous.height,
+          left: element.current.scrollWidth - previous.width
         });
       }
     });
     fn();
-  }, [di, options.preserveScrollPosition, element]);
+  }, [di]);
 }
 
 const defaultEvents = [
@@ -1848,7 +1860,7 @@ function useMousePressed(target, options = {}) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = React.useState(initialValue);
   const [sourceType, setSourceType] = React.useState(null);
-  const element = getTargetElement(target);
+  const elementRef = useLatestElement(target);
   const onPressed = React.useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -1864,6 +1876,7 @@ function useMousePressed(target, options = {}) {
   useEventListener("mouseleave", onReleased, () => window, { passive: true });
   useEventListener("mouseup", onReleased, () => window, { passive: true });
   React.useEffect(() => {
+    const element = elementRef.current;
     if (drag) {
       element == null ? void 0 : element.addEventListener("dragstart", onPressed("mouse"), {
         passive: true
@@ -1898,7 +1911,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  }, [drag, onPressed, onReleased, element, touch]);
+  }, [drag, onPressed, onReleased, touch, elementRef.current]);
   return [pressed, sourceType];
 }
 
@@ -1915,32 +1928,34 @@ function preventDefault(rawEvent) {
 function useScrollLock(target, initialState = false) {
   const [locked, setLocked] = React.useState(initialState);
   const initialOverflowRef = React.useRef("scroll");
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   React.useEffect(() => {
-    if (element) {
-      initialOverflowRef.current = element.style.overflow;
+    if (element.current) {
+      initialOverflowRef.current = element.current.style.overflow;
       if (locked) {
-        element.style.overflow = "hidden";
+        element.current.style.overflow = "hidden";
       }
     }
-  }, [locked, element]);
+  }, [locked, element.current]);
   const lock = useEvent(() => {
-    if (!element || locked) {
+    if (!element.current || locked) {
       return;
     }
     if (isIOS) {
-      element.addEventListener("touchmove", preventDefault, { passive: false });
+      element.current.addEventListener("touchmove", preventDefault, {
+        passive: false
+      });
     }
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    if (!element || !locked) {
+    if (!element.current || !locked) {
       return;
     }
     if (isIOS) {
-      element.removeEventListener("touchmove", preventDefault);
+      element.current.removeEventListener("touchmove", preventDefault);
     }
-    element.style.overflow = initialOverflowRef.current;
+    element.current.style.overflow = initialOverflowRef.current;
     setLocked(false);
   });
   const set = useEvent((flag) => {
@@ -2124,14 +2139,15 @@ function useActiveElement() {
 
 function useDraggable(target, options = {}) {
   var _a, _b;
-  const draggingElement = getTargetElement(
-    options.draggingElement,
-    defaultWindow
-  );
-  const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
+  const draggingElement = options.draggingElement;
+  const draggingHandle = (_a = options.handle) != null ? _a : target;
   const [position, setPositon] = React.useState(
     (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
   );
+  React.useEffect(() => {
+    var _a2;
+    setPositon((_a2 = options.initialValue) != null ? _a2 : { x: 0, y: 0 });
+  }, [options.initialValue]);
   const [pressedDelta, setPressedDelta] = React.useState();
   const filterEvent = (e) => {
     if (options.pointerTypes) {
@@ -2339,7 +2355,7 @@ function useWindowScroll() {
   return state;
 }
 
-var __async = (__this, __arguments, generator) => {
+var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -2368,7 +2384,7 @@ function useClipBorad() {
   }, []);
   useEventListener("copy", updateText);
   useEventListener("cut", updateText);
-  const copy = React.useCallback((txt) => __async(this, null, function* () {
+  const copy = React.useCallback((txt) => __async$1(this, null, function* () {
     setText(txt);
     yield window.navigator.clipboard.writeText(txt);
   }), []);
@@ -2623,11 +2639,11 @@ function useScrollIntoView({
       cancelAnimationFrame(frameID.current);
     }
   };
+  const element = useLatestElement(targetElement);
   const scrollIntoView = useEvent(
     ({ alignment = "start" } = {}) => {
       var _a;
-      const element = getTargetElement(targetElement);
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
       shouldStop.current = false;
       if (frameID.current) {
         cancel();
@@ -2635,7 +2651,7 @@ function useScrollIntoView({
       const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
       const change = getRelativePosition({
         parent,
-        target: element,
+        target: element.current,
         axis,
         alignment,
         offset,
@@ -2687,13 +2703,12 @@ const useSticky = ({
   nav = 0
 }) => {
   const [isSticky, setSticky] = React.useState(false);
-  const element = getTargetElement(targetElement);
-  const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+  const element = useLatestElement(targetElement);
   const { run: scrollHandler } = useThrottleFn(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
-    const rect = element.getBoundingClientRect();
+    const rect = element.current.getBoundingClientRect();
     if (axis === "y") {
       setSticky((rect == null ? void 0 : rect.top) <= nav);
     } else {
@@ -2701,7 +2716,8 @@ const useSticky = ({
     }
   }, 50);
   React.useEffect(() => {
-    if (!element || !scrollParent) {
+    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
+    if (!element.current || !scrollParent) {
       return;
     }
     scrollParent.addEventListener("scroll", scrollHandler);
@@ -2709,11 +2725,48 @@ const useSticky = ({
     return () => {
       scrollParent.removeEventListener("scroll", scrollHandler);
     };
-  }, [axis, element, scrollHandler, scrollParent]);
+  }, [axis, element, scrollElement, scrollHandler]);
   return [isSticky, setSticky];
 };
 
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useAsyncEffect(effect, cleanup = noop, deps) {
+  const mounted = useMountedState();
+  React.useEffect(() => {
+    const execute = () => __async(this, null, function* () {
+      if (!mounted()) {
+        return;
+      }
+      yield effect();
+    });
+    execute();
+    return () => {
+      cleanup();
+    };
+  }, deps);
+}
+
 exports.useActiveElement = useActiveElement;
+exports.useAsyncEffect = useAsyncEffect;
 exports.useClickOutside = useClickOutSide;
 exports.useClipboard = useClipBorad;
 exports.useControlled = useControlled;

package/dist/index.d.ts

@@ -275,7 +275,15 @@ declare function useObjectUrl(object: Blob | MediaSource | undefined): string |
 
 declare function useIdle(ms?: number, initialState?: boolean, events?: (keyof WindowEventMap)[]): boolean;
 
-declare const _default$3: () => {};
+declare function useMediaDevices(): {
+    devices: {
+        deviceId: string;
+        groupId: string;
+        kind: MediaDeviceKind;
+        label: string;
+    }[];
+};
+declare const _default$3: typeof useMediaDevices;
 
 type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
@@ -416,7 +424,7 @@ declare function useDocumentVisibility(): DocumentVisibilityState;
 
 declare function useResizeObserver(target: BasicTarget, callback: ResizeObserverCallback, options?: ResizeObserverOptions): () => void;
 
-declare function useDropZone(target: BasicTarget<HTMLElement>, onDrop?: (files: File[] | null) => void): boolean;
+declare function useDropZone(target: BasicTarget<EventTarget>, onDrop?: (files: File[] | null) => void): boolean;
 
 interface UseFileDialogOptions {
     /**
@@ -518,7 +526,7 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      */
     preserveScrollPosition?: boolean;
 }
-declare function useInfiniteScroll(target: BasicTarget<HTMLElement | SVGElement | Window | Document>, onLoadMore: (state: ReturnType<typeof useScroll>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(target: BasicTarget<HTMLElement | SVGElement>, onLoadMore: (state: ReturnType<typeof useScroll>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 type KeyModifier = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Symbol" | "SymbolLock";
 interface UseModifierOptions {
@@ -563,7 +571,7 @@ interface MousePressedOptions {
 type MouseSourceType = "mouse" | "touch" | null;
 declare function useMousePressed(target?: BasicTarget, options?: MousePressedOptions): readonly [boolean, MouseSourceType];
 
-declare function useScrollLock(target: BasicTarget<HTMLElement | SVGElement | Window | Document>, initialState?: boolean): readonly [boolean, (flag: boolean) => void];
+declare function useScrollLock(target: BasicTarget<HTMLElement>, initialState?: boolean): readonly [boolean, (flag: boolean) => void];
 
 declare function useElementSize(target: BasicTarget, options?: ResizeObserverOptions): readonly [number, number];
 
@@ -792,4 +800,6 @@ declare const useSticky: ({ targetElement, scrollElement, axis, nav, }: UseStick
     react__default.Dispatch<react__default.SetStateAction<boolean>>
 ];
 
-export { ColorScheme, Contrast, CursorState, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, _default$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare function useAsyncEffect<T extends void>(effect: () => Promise<T> | T, cleanup?: typeof effect, deps?: DependencyList): void;
+
+export { ColorScheme, Contrast, CursorState, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, _default$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -493,6 +493,13 @@ function getTargetElement(target, defaultElement) {
   }
   return targetElement;
 }
+function useLatestElement(target, defaultElement) {
+  const ref = useRef(getTargetElement(target, defaultElement));
+  useEffect(() => {
+    ref.current = getTargetElement(target, defaultElement);
+  }, [defaultElement, target]);
+  return ref;
+}
 
 const isPrimitive$1 = (val) => val !== Object(val);
 function useCustomCompareEffect(effect, deps, depsEqual) {
@@ -539,17 +546,21 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElement = getTargetElement(element, window);
+  const targetElementRef = useLatestElement(element, defaultWindow);
   useDeepCompareEffect(() => {
+    const targetElement = targetElementRef.current;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
     const eventListener = (event) => savedHandler.current(event);
     on(targetElement, eventName, eventListener, options);
     return () => {
+      if (!(targetElement && targetElement.removeEventListener)) {
+        return;
+      }
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, targetElement, options, savedHandler]);
+  }, [eventName, targetElementRef.current, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -693,20 +704,20 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
 function useMutationObserver(callback, target, options = {}) {
   const callbackRef = useLatest(callback);
   const observerRef = useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
-    observerRef.current.observe(element, options);
+    observerRef.current.observe(element.current, options);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
@@ -989,7 +1000,7 @@ function useMediaDevices() {
   }, []);
   return state;
 }
-const useMediaDevicesMock = () => ({});
+const useMediaDevicesMock = () => ({ devices: [] });
 var useMediaDevices$1 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -1491,23 +1502,23 @@ function useOrientation(initialState = defaultState) {
 function useIntersectionObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new IntersectionObserver(
       savedCallback.current,
       options
     );
-    observerRef.current.observe(element);
+    observerRef.current.observe(element.current);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
@@ -1547,27 +1558,26 @@ function useDocumentVisibility() {
 function useResizeObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
-    observerRef.current.observe(element, options);
+    observerRef.current.observe(element.current, options);
     return stop;
-  }, [options, element]);
+  }, [options, element.current]);
   return stop;
 }
 
 function useDropZone(target, onDrop) {
   const [over, setOver] = useState(false);
   const counter = useRef(0);
-  const element = getTargetElement(target);
   useEventListener(
     "dragenter",
     (event) => {
@@ -1575,14 +1585,14 @@ function useDropZone(target, onDrop) {
       counter.current += 1;
       setOver(true);
     },
-    element
+    target
   );
   useEventListener(
     "dragover",
     (event) => {
       event.preventDefault();
     },
-    element
+    target
   );
   useEventListener(
     "dragleave",
@@ -1593,7 +1603,7 @@ function useDropZone(target, onDrop) {
         setOver(false);
       }
     },
-    element
+    target
   );
   useEventListener(
     "drop",
@@ -1605,7 +1615,7 @@ function useDropZone(target, onDrop) {
       const files = Array.from((_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
       onDrop == null ? void 0 : onDrop(files.length === 0 ? null : files);
     },
-    element
+    target
   );
   return over;
 }
@@ -1756,7 +1766,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async$1 = (__this, __arguments, generator) => {
+var __async$2 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -1785,25 +1795,27 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
+  const latestOptions = useLatest(options);
   const di = state[3][direction];
   useUpdateEffect(() => {
-    const fn = () => __async$1(this, null, function* () {
-      var _a2, _b2;
+    const opts = latestOptions.current;
+    const fn = () => __async$2(this, null, function* () {
+      var _a2, _b2, _c, _d;
       const previous = {
-        height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
-        width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
+        height: (_b2 = (_a2 = element.current) == null ? void 0 : _a2.scrollHeight) != null ? _b2 : 0,
+        width: (_d = (_c = element.current) == null ? void 0 : _c.scrollWidth) != null ? _d : 0
       };
       yield savedLoadMore.current(state);
-      if (options.preserveScrollPosition && element) {
-        element.scrollTo({
-          top: element.scrollHeight - previous.height,
-          left: element.scrollWidth - previous.width
+      if (opts.preserveScrollPosition && element.current) {
+        element.current.scrollTo({
+          top: element.current.scrollHeight - previous.height,
+          left: element.current.scrollWidth - previous.width
         });
       }
     });
     fn();
-  }, [di, options.preserveScrollPosition, element]);
+  }, [di]);
 }
 
 const defaultEvents = [
@@ -1840,7 +1852,7 @@ function useMousePressed(target, options = {}) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = useState(initialValue);
   const [sourceType, setSourceType] = useState(null);
-  const element = getTargetElement(target);
+  const elementRef = useLatestElement(target);
   const onPressed = useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -1856,6 +1868,7 @@ function useMousePressed(target, options = {}) {
   useEventListener("mouseleave", onReleased, () => window, { passive: true });
   useEventListener("mouseup", onReleased, () => window, { passive: true });
   useEffect(() => {
+    const element = elementRef.current;
     if (drag) {
       element == null ? void 0 : element.addEventListener("dragstart", onPressed("mouse"), {
         passive: true
@@ -1890,7 +1903,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  }, [drag, onPressed, onReleased, element, touch]);
+  }, [drag, onPressed, onReleased, touch, elementRef.current]);
   return [pressed, sourceType];
 }
 
@@ -1907,32 +1920,34 @@ function preventDefault(rawEvent) {
 function useScrollLock(target, initialState = false) {
   const [locked, setLocked] = useState(initialState);
   const initialOverflowRef = useRef("scroll");
-  const element = getTargetElement(target);
+  const element = useLatestElement(target);
   useEffect(() => {
-    if (element) {
-      initialOverflowRef.current = element.style.overflow;
+    if (element.current) {
+      initialOverflowRef.current = element.current.style.overflow;
       if (locked) {
-        element.style.overflow = "hidden";
+        element.current.style.overflow = "hidden";
       }
     }
-  }, [locked, element]);
+  }, [locked, element.current]);
   const lock = useEvent(() => {
-    if (!element || locked) {
+    if (!element.current || locked) {
       return;
     }
     if (isIOS) {
-      element.addEventListener("touchmove", preventDefault, { passive: false });
+      element.current.addEventListener("touchmove", preventDefault, {
+        passive: false
+      });
     }
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    if (!element || !locked) {
+    if (!element.current || !locked) {
       return;
     }
     if (isIOS) {
-      element.removeEventListener("touchmove", preventDefault);
+      element.current.removeEventListener("touchmove", preventDefault);
     }
-    element.style.overflow = initialOverflowRef.current;
+    element.current.style.overflow = initialOverflowRef.current;
     setLocked(false);
   });
   const set = useEvent((flag) => {
@@ -2116,14 +2131,15 @@ function useActiveElement() {
 
 function useDraggable(target, options = {}) {
   var _a, _b;
-  const draggingElement = getTargetElement(
-    options.draggingElement,
-    defaultWindow
-  );
-  const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
+  const draggingElement = options.draggingElement;
+  const draggingHandle = (_a = options.handle) != null ? _a : target;
   const [position, setPositon] = useState(
     (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
   );
+  useEffect(() => {
+    var _a2;
+    setPositon((_a2 = options.initialValue) != null ? _a2 : { x: 0, y: 0 });
+  }, [options.initialValue]);
   const [pressedDelta, setPressedDelta] = useState();
   const filterEvent = (e) => {
     if (options.pointerTypes) {
@@ -2331,7 +2347,7 @@ function useWindowScroll() {
   return state;
 }
 
-var __async = (__this, __arguments, generator) => {
+var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -2360,7 +2376,7 @@ function useClipBorad() {
   }, []);
   useEventListener("copy", updateText);
   useEventListener("cut", updateText);
-  const copy = useCallback((txt) => __async(this, null, function* () {
+  const copy = useCallback((txt) => __async$1(this, null, function* () {
     setText(txt);
     yield window.navigator.clipboard.writeText(txt);
   }), []);
@@ -2615,11 +2631,11 @@ function useScrollIntoView({
       cancelAnimationFrame(frameID.current);
     }
   };
+  const element = useLatestElement(targetElement);
   const scrollIntoView = useEvent(
     ({ alignment = "start" } = {}) => {
       var _a;
-      const element = getTargetElement(targetElement);
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
       shouldStop.current = false;
       if (frameID.current) {
         cancel();
@@ -2627,7 +2643,7 @@ function useScrollIntoView({
       const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
       const change = getRelativePosition({
         parent,
-        target: element,
+        target: element.current,
         axis,
         alignment,
         offset,
@@ -2679,13 +2695,12 @@ const useSticky = ({
   nav = 0
 }) => {
   const [isSticky, setSticky] = useState(false);
-  const element = getTargetElement(targetElement);
-  const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+  const element = useLatestElement(targetElement);
   const { run: scrollHandler } = useThrottleFn(() => {
-    if (!element) {
+    if (!element.current) {
       return;
     }
-    const rect = element.getBoundingClientRect();
+    const rect = element.current.getBoundingClientRect();
     if (axis === "y") {
       setSticky((rect == null ? void 0 : rect.top) <= nav);
     } else {
@@ -2693,7 +2708,8 @@ const useSticky = ({
     }
   }, 50);
   useEffect(() => {
-    if (!element || !scrollParent) {
+    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
+    if (!element.current || !scrollParent) {
       return;
     }
     scrollParent.addEventListener("scroll", scrollHandler);
@@ -2701,8 +2717,44 @@ const useSticky = ({
     return () => {
       scrollParent.removeEventListener("scroll", scrollHandler);
     };
-  }, [axis, element, scrollHandler, scrollParent]);
+  }, [axis, element, scrollElement, scrollHandler]);
   return [isSticky, setSticky];
 };
 
-export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useAsyncEffect(effect, cleanup = noop, deps) {
+  const mounted = useMountedState();
+  useEffect(() => {
+    const execute = () => __async(this, null, function* () {
+      if (!mounted()) {
+        return;
+      }
+      yield effect();
+    });
+    execute();
+    return () => {
+      cleanup();
+    };
+  }, deps);
+}
+
+export { useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",