@reactuses/core 2.0.2 → 2.2.1

package/dist/index.cjs

@@ -116,38 +116,41 @@ const StorageSerializers = {
   }
 };
 function useStorage(key, defaults, getStorage, options = {}) {
-  var _a;
+  const defaultOnError = React.useCallback((e) => {
+    console.error(e);
+  }, []);
   let storage;
-  const {
-    onError = (e) => {
-      console.error(e);
-    }
-  } = options;
-  const data = defaults;
+  const { onError = defaultOnError, ignoreDefaults = true } = options;
   try {
     storage = getStorage();
   } catch (err) {
-    console.error(err);
+    onError(err);
   }
   const type = guessSerializerType(defaults);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = useEvent(() => {
-    try {
-      const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw !== void 0 && raw !== null) {
-        return serializer.read(raw);
-      } else {
-        storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-        return data;
-      }
-    } catch (e) {
-      onError(e);
-    }
-  });
+  const serializer = React.useMemo(
+    () => {
+      var _a;
+      return (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    },
+    [options.serializer, type]
+  );
   const [state, setState] = React.useState(defaults);
   React.useEffect(() => {
+    const getStoredValue = () => {
+      try {
+        const raw = storage == null ? void 0 : storage.getItem(key);
+        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+          return serializer.read(raw);
+        } else {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
+          return defaults;
+        }
+      } catch (e) {
+        onError(e);
+      }
+    };
     setState(getStoredValue());
-  }, [getStoredValue, key]);
+  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -261,7 +264,9 @@ function useDarkMode(options = {}) {
   } = options;
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage);
+  const [dark, setDark] = useStorage(storageKey, value, storage, {
+    ignoreDefaults: false
+  });
   const wrappedSetDark = React.useCallback(
     (latestDark) => {
       const element = window == null ? void 0 : window.document.querySelector(selector);
@@ -501,6 +506,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 +559,21 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElement = getTargetElement(element, defaultWindow);
+  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 +717,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 +1013,7 @@ function useMediaDevices() {
   }, []);
   return state;
 }
-const useMediaDevicesMock = () => ({});
+const useMediaDevicesMock = () => ({ devices: [] });
 var useMediaDevices$1 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -1499,23 +1515,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 +1571,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 +1598,14 @@ function useDropZone(target, onDrop) {
       counter.current += 1;
       setOver(true);
     },
-    element
+    target
   );
   useEventListener(
     "dragover",
     (event) => {
       event.preventDefault();
     },
-    element
+    target
   );
   useEventListener(
     "dragleave",
@@ -1601,7 +1616,7 @@ function useDropZone(target, onDrop) {
         setOver(false);
       }
     },
-    element
+    target
   );
   useEventListener(
     "drop",
@@ -1613,7 +1628,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;
 }
@@ -1793,25 +1808,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 opts = latestOptions.current;
     const fn = () => __async$2(this, null, function* () {
-      var _a2, _b2;
+      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 +1865,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 +1881,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 +1916,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 +1933,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 +2144,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) {
@@ -2623,11 +2644,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 +2656,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 +2708,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 +2721,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,7 +2730,7 @@ const useSticky = ({
     return () => {
       scrollParent.removeEventListener("scroll", scrollHandler);
     };
-  }, [axis, element, scrollHandler, scrollParent]);
+  }, [axis, element, scrollElement, scrollHandler]);
   return [isSticky, setSticky];
 };
 

package/dist/index.d.ts

@@ -27,6 +27,10 @@ interface UseStorageOptions<T> {
      * Default log error to `console.error`
      */
     onError?: (error: unknown) => void;
+    /**
+     * ignore default value when storage has value
+     */
+    ignoreDefaults?: boolean;
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -74,8 +78,7 @@ interface UseDarkOptions<T> {
      */
     attribute?: string;
     /**
-     * The initial value write the target element, defaultValue follow system prefer color
-     * must be set in SSR
+     * The initial classname value write the target element, Otherwise, it will follow the system by default
      * @default 'light | dark'
      */
     initialValue?: T;
@@ -92,7 +95,7 @@ interface UseDarkOptions<T> {
      */
     storage?: () => Storage;
 }
-declare function useDarkMode<T extends string | "light" | "dark">(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
+declare function useDarkMode<T extends string>(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
 
 declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
 
@@ -275,7 +278,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 +427,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 +529,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 +574,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];
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useLayoutEffect, useCallback, useState, useReducer, useMemo } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useMemo, useState, useReducer } from 'react';
 import { throttle, debounce, isEqual } from 'lodash';
 
 function usePrevious(state) {
@@ -108,38 +108,41 @@ const StorageSerializers = {
   }
 };
 function useStorage(key, defaults, getStorage, options = {}) {
-  var _a;
+  const defaultOnError = useCallback((e) => {
+    console.error(e);
+  }, []);
   let storage;
-  const {
-    onError = (e) => {
-      console.error(e);
-    }
-  } = options;
-  const data = defaults;
+  const { onError = defaultOnError, ignoreDefaults = true } = options;
   try {
     storage = getStorage();
   } catch (err) {
-    console.error(err);
+    onError(err);
   }
   const type = guessSerializerType(defaults);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = useEvent(() => {
-    try {
-      const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw !== void 0 && raw !== null) {
-        return serializer.read(raw);
-      } else {
-        storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-        return data;
-      }
-    } catch (e) {
-      onError(e);
-    }
-  });
+  const serializer = useMemo(
+    () => {
+      var _a;
+      return (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    },
+    [options.serializer, type]
+  );
   const [state, setState] = useState(defaults);
   useEffect(() => {
+    const getStoredValue = () => {
+      try {
+        const raw = storage == null ? void 0 : storage.getItem(key);
+        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+          return serializer.read(raw);
+        } else {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
+          return defaults;
+        }
+      } catch (e) {
+        onError(e);
+      }
+    };
     setState(getStoredValue());
-  }, [getStoredValue, key]);
+  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -253,7 +256,9 @@ function useDarkMode(options = {}) {
   } = options;
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage);
+  const [dark, setDark] = useStorage(storageKey, value, storage, {
+    ignoreDefaults: false
+  });
   const wrappedSetDark = useCallback(
     (latestDark) => {
       const element = window == null ? void 0 : window.document.querySelector(selector);
@@ -493,6 +498,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 +551,21 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElement = getTargetElement(element, defaultWindow);
+  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 +709,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 +1005,7 @@ function useMediaDevices() {
   }, []);
   return state;
 }
-const useMediaDevicesMock = () => ({});
+const useMediaDevicesMock = () => ({ devices: [] });
 var useMediaDevices$1 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -1491,23 +1507,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 +1563,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 +1590,14 @@ function useDropZone(target, onDrop) {
       counter.current += 1;
       setOver(true);
     },
-    element
+    target
   );
   useEventListener(
     "dragover",
     (event) => {
       event.preventDefault();
     },
-    element
+    target
   );
   useEventListener(
     "dragleave",
@@ -1593,7 +1608,7 @@ function useDropZone(target, onDrop) {
         setOver(false);
       }
     },
-    element
+    target
   );
   useEventListener(
     "drop",
@@ -1605,7 +1620,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;
 }
@@ -1785,25 +1800,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 opts = latestOptions.current;
     const fn = () => __async$2(this, null, function* () {
-      var _a2, _b2;
+      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 +1857,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 +1873,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 +1908,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 +1925,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 +2136,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) {
@@ -2615,11 +2636,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 +2648,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 +2700,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 +2713,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,7 +2722,7 @@ const useSticky = ({
     return () => {
       scrollParent.removeEventListener("scroll", scrollHandler);
     };
-  }, [axis, element, scrollHandler, scrollParent]);
+  }, [axis, element, scrollElement, scrollHandler]);
   return [isSticky, setSticky];
 };
 

package/package.json

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