@reactuses/core 1.1.5 → 2.0.1

package/dist/index.cjs

@@ -131,7 +131,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
   }
   const type = guessSerializerType(defaults);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = () => {
+  const getStoredValue = useEvent(() => {
     try {
       const raw = storage == null ? void 0 : storage.getItem(key);
       if (raw !== void 0 && raw !== null) {
@@ -143,11 +143,11 @@ function useStorage(key, defaults, getStorage, options = {}) {
     } catch (e) {
       onError(e);
     }
-  };
-  const [state, setState] = React.useState(() => getStoredValue());
-  useUpdateEffect(() => {
+  });
+  const [state, setState] = React.useState(defaults);
+  React.useEffect(() => {
     setState(getStoredValue());
-  }, [key]);
+  }, [getStoredValue, key]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -205,12 +205,12 @@ function useInterval(callback, delay, options) {
 }
 
 const getInitialState = (query, defaultState) => {
-  if (isBrowser) {
-    return window.matchMedia(query).matches;
-  }
   if (defaultState !== void 0) {
     return defaultState;
   }
+  if (isBrowser) {
+    return window.matchMedia(query).matches;
+  }
   if (process.env.NODE_ENV !== "production") {
     console.warn(
       "`useMediaQuery` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
@@ -262,21 +262,24 @@ function useDarkMode(options = {}) {
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
   const [dark, setDark] = useStorage(storageKey, value, storage);
-  React.useEffect(() => {
-    const element = window == null ? void 0 : window.document.querySelector(selector);
-    if (!element) {
-      return;
-    }
-    if (attribute === "class") {
-      dark && element.classList.add(dark);
-    } else {
-      dark && element.setAttribute(attribute, dark);
-    }
-    return () => {
-      dark && (element == null ? void 0 : element.classList.remove(dark));
-    };
-  }, [attribute, dark, selector]);
-  return [dark, setDark];
+  const wrappedSetDark = React.useCallback(
+    (latestDark) => {
+      const element = window == null ? void 0 : window.document.querySelector(selector);
+      if (!element) {
+        return;
+      }
+      if (attribute === "class") {
+        latestDark && element.classList.add(latestDark);
+        dark && element.classList.remove(dark);
+      } else {
+        latestDark && element.setAttribute(attribute, latestDark);
+        dark && element.removeAttribute(attribute);
+      }
+      setDark(latestDark);
+    },
+    [attribute, dark, selector, setDark]
+  );
+  return [dark, wrappedSetDark];
 }
 
 function useMount(fn) {
@@ -544,8 +547,8 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
+  const targetElement = getTargetElement(element, window);
   useDeepCompareEffect(() => {
-    const targetElement = getTargetElement(element, window);
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
@@ -554,7 +557,7 @@ function useEventListener(eventName, handler, element, options) {
     return () => {
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, element, options, savedHandler]);
+  }, [eventName, targetElement, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -698,20 +701,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 stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
     observerRef.current.observe(element, options);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1496,13 +1499,13 @@ function useOrientation(initialState = defaultState) {
 function useIntersectionObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
+  const element = getTargetElement(target);
   const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
@@ -1512,7 +1515,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     );
     observerRef.current.observe(element);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1552,20 +1555,20 @@ function useDocumentVisibility() {
 function useResizeObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
+  const element = getTargetElement(target);
   const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
     observerRef.current.observe(element, options);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1790,11 +1793,11 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
+  const element = getTargetElement(target);
   const di = state[3][direction];
   useUpdateEffect(() => {
     const fn = () => __async$1(this, null, function* () {
       var _a2, _b2;
-      const element = getTargetElement(target);
       const previous = {
         height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
         width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
@@ -1808,7 +1811,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       }
     });
     fn();
-  }, [di, options.preserveScrollPosition]);
+  }, [di, options.preserveScrollPosition, element]);
 }
 
 const defaultEvents = [
@@ -1845,6 +1848,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 onPressed = React.useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -1859,8 +1863,7 @@ function useMousePressed(target, options = {}) {
   useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
   useEventListener("mouseleave", onReleased, () => window, { passive: true });
   useEventListener("mouseup", onReleased, () => window, { passive: true });
-  useMount(() => {
-    const element = getTargetElement(target);
+  React.useEffect(() => {
     if (drag) {
       element == null ? void 0 : element.addEventListener("dragstart", onPressed("mouse"), {
         passive: true
@@ -1895,7 +1898,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  });
+  }, [drag, onPressed, onReleased, element, touch]);
   return [pressed, sourceType];
 }
 
@@ -1912,28 +1915,25 @@ function preventDefault(rawEvent) {
 function useScrollLock(target, initialState = false) {
   const [locked, setLocked] = React.useState(initialState);
   const initialOverflowRef = React.useRef("scroll");
-  useMount(() => {
-    const element = getTargetElement(target);
+  const element = getTargetElement(target);
+  React.useEffect(() => {
     if (element) {
       initialOverflowRef.current = element.style.overflow;
       if (locked) {
         element.style.overflow = "hidden";
       }
     }
-  });
+  }, [locked, element]);
   const lock = useEvent(() => {
-    const element = getTargetElement(target);
     if (!element || locked) {
       return;
     }
     if (isIOS) {
       element.addEventListener("touchmove", preventDefault, { passive: false });
     }
-    element.style.overflow = "hidden";
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    const element = getTargetElement(target);
     if (!element || !locked) {
       return;
     }
@@ -2480,6 +2480,239 @@ var useOnceEffect = createOnceEffect(React.useEffect);
 
 var useOnceLayoutEffect = createOnceEffect(React.useLayoutEffect);
 
+function useReducedMotion(defaultState) {
+  return useMediaQuery("(prefers-reduced-motion: reduce)", defaultState);
+}
+
+const setScrollParam = ({
+  axis,
+  parent,
+  distance
+}) => {
+  if (!parent && typeof document === "undefined") {
+    return;
+  }
+  const method = axis === "y" ? "scrollTop" : "scrollLeft";
+  if (parent) {
+    parent[method] = distance;
+  } else {
+    const { body, documentElement } = document;
+    body[method] = distance;
+    documentElement[method] = distance;
+  }
+};
+const isScrollElement = (axis, node) => {
+  if (!node) {
+    return false;
+  }
+  const AXIS = axis === "x" ? "X" : "Y";
+  return getComputedStyle(node)[`overflow${AXIS}`] === "auto" || getComputedStyle(node)[`overflow${AXIS}`] === "scroll";
+};
+const cache = /* @__PURE__ */ new Map();
+const getScrollParent = (axis, node) => {
+  if (!node || !node.parentElement) {
+    return null;
+  }
+  if (cache.has(node)) {
+    return cache.get(node) || null;
+  }
+  let parent = node.parentElement;
+  while (parent && !isScrollElement(axis, parent)) {
+    parent = parent.parentElement;
+  }
+  if (parent) {
+    cache.set(node, parent);
+  }
+  return parent;
+};
+const getScrollStart = ({
+  axis,
+  parent
+}) => {
+  if (!parent && typeof document === "undefined") {
+    return 0;
+  }
+  const method = axis === "y" ? "scrollTop" : "scrollLeft";
+  if (parent) {
+    return parent[method];
+  }
+  const { body, documentElement } = document;
+  return body[method] + documentElement[method];
+};
+
+const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+const getRelativePosition = ({
+  axis,
+  target,
+  parent,
+  alignment,
+  offset,
+  isList
+}) => {
+  if (!target || !parent && typeof document === "undefined") {
+    return 0;
+  }
+  const isCustomParent = !!parent;
+  const parentElement = parent || document.body;
+  const parentPosition = parentElement.getBoundingClientRect();
+  const targetPosition = target.getBoundingClientRect();
+  const getDiff = (property) => targetPosition[property] - parentPosition[property];
+  if (axis === "y") {
+    const diff = getDiff("top");
+    if (diff === 0) {
+      return 0;
+    }
+    if (alignment === "start") {
+      const distance = diff - offset;
+      const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;
+    if (alignment === "end") {
+      const distance = diff + offset - parentHeight + targetPosition.height;
+      const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    if (alignment === "center") {
+      return diff - parentHeight / 2 + targetPosition.height / 2;
+    }
+    return 0;
+  }
+  if (axis === "x") {
+    const diff = getDiff("left");
+    if (diff === 0) {
+      return 0;
+    }
+    if (alignment === "start") {
+      const distance = diff - offset;
+      const shouldScroll = distance <= targetPosition.width || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;
+    if (alignment === "end") {
+      const distance = diff + offset - parentWidth + targetPosition.width;
+      const shouldScroll = distance >= -targetPosition.width || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    if (alignment === "center") {
+      return diff - parentWidth / 2 + targetPosition.width / 2;
+    }
+    return 0;
+  }
+  return 0;
+};
+
+function useScrollIntoView({
+  duration = 1250,
+  axis = "y",
+  onScrollFinish,
+  easing = easeInOutQuad,
+  offset = 0,
+  cancelable = true,
+  isList = false,
+  targetElement,
+  scrollElement
+}) {
+  const frameID = React.useRef(0);
+  const startTime = React.useRef(0);
+  const shouldStop = React.useRef(false);
+  const reducedMotion = useReducedMotion(false);
+  const cancel = () => {
+    if (frameID.current) {
+      cancelAnimationFrame(frameID.current);
+    }
+  };
+  const scrollIntoView = useEvent(
+    ({ alignment = "start" } = {}) => {
+      var _a;
+      const element = getTargetElement(targetElement);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+      shouldStop.current = false;
+      if (frameID.current) {
+        cancel();
+      }
+      const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
+      const change = getRelativePosition({
+        parent,
+        target: element,
+        axis,
+        alignment,
+        offset,
+        isList
+      }) - (parent ? 0 : start);
+      const animateScroll = () => {
+        if (startTime.current === 0) {
+          startTime.current = performance.now();
+        }
+        const now = performance.now();
+        const elapsed = now - startTime.current;
+        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
+        const distance = start + change * easing(t);
+        setScrollParam({
+          parent,
+          axis,
+          distance
+        });
+        if (!shouldStop.current && t < 1) {
+          frameID.current = requestAnimationFrame(animateScroll);
+        } else {
+          typeof onScrollFinish === "function" && onScrollFinish();
+          startTime.current = 0;
+          frameID.current = 0;
+          cancel();
+        }
+      };
+      animateScroll();
+    }
+  );
+  const handleStop = () => {
+    if (cancelable) {
+      shouldStop.current = true;
+    }
+  };
+  useEventListener("wheel", handleStop, null, { passive: true });
+  useEventListener("touchmove", handleStop, null, { passive: true });
+  React.useEffect(() => cancel, []);
+  return {
+    scrollIntoView,
+    cancel
+  };
+}
+
+const useSticky = ({
+  targetElement,
+  scrollElement,
+  axis = "y",
+  nav = 0
+}) => {
+  const [isSticky, setSticky] = React.useState(false);
+  const element = getTargetElement(targetElement);
+  const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+  const { run: scrollHandler } = useThrottleFn(() => {
+    if (!element) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    if (axis === "y") {
+      setSticky((rect == null ? void 0 : rect.top) <= nav);
+    } else {
+      setSticky((rect == null ? void 0 : rect.left) <= nav);
+    }
+  }, 50);
+  React.useEffect(() => {
+    if (!element || !scrollParent) {
+      return;
+    }
+    scrollParent.addEventListener("scroll", scrollHandler);
+    scrollHandler();
+    return () => {
+      scrollParent.removeEventListener("scroll", scrollHandler);
+    };
+  }, [axis, element, scrollHandler, scrollParent]);
+  return [isSticky, setSticky];
+};
+
 exports.useActiveElement = useActiveElement;
 exports.useClickOutside = useClickOutSide;
 exports.useClipboard = useClipBorad;
@@ -2537,11 +2770,14 @@ exports.usePreferredDark = usePreferredDark;
 exports.usePrevious = usePrevious;
 exports.useRafFn = useRafFn;
 exports.useRafState = useRafState;
+exports.useReducedMotion = useReducedMotion;
 exports.useResizeObserver = useResizeObserver;
 exports.useScriptTag = useScriptTag;
 exports.useScroll = useScroll;
+exports.useScrollIntoView = useScrollIntoView;
 exports.useScrollLock = useScrollLock;
 exports.useSessionStorage = useSessionStorage;
+exports.useSticky = useSticky;
 exports.useTextDirection = useTextDirection;
 exports.useThrottle = useThrottle;
 exports.useThrottleFn = useThrottleFn;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { MutableRefObject, useEffect, useLayoutEffect, Dispatch, SetStateAction, DependencyList, EffectCallback, RefObject, CSSProperties } from 'react';
+import react__default, { MutableRefObject, useEffect, useLayoutEffect, Dispatch, SetStateAction, DependencyList, EffectCallback, RefObject, CSSProperties } from 'react';
 import * as lodash from 'lodash';
 
 declare function usePrevious<T>(state: T): T | undefined;
@@ -74,7 +74,8 @@ interface UseDarkOptions<T> {
      */
     attribute?: string;
     /**
-     * The initial value write the target element
+     * The initial value write the target element, defaultValue follow system prefer color
+     * must be set in SSR
      * @default 'light | dark'
      */
     initialValue?: T;
@@ -91,7 +92,7 @@ interface UseDarkOptions<T> {
      */
     storage?: () => Storage;
 }
-declare function useDarkMode<T extends string | "light" | "dark">(options?: UseDarkOptions<T>): readonly [T | null, react.Dispatch<react.SetStateAction<T | null>>];
+declare function useDarkMode<T extends string | "light" | "dark">(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
 
 declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
 
@@ -749,4 +750,46 @@ declare const _default$1: typeof useEffect | typeof react.useLayoutEffect;
 
 declare const _default: typeof react.useEffect | typeof useLayoutEffect;
 
-export { ColorScheme, Contrast, CursorState, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, 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, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare function useReducedMotion(defaultState?: boolean): boolean;
+
+interface ScrollIntoViewAnimation {
+    /** target element alignment relatively to parent based on current axis */
+    alignment?: "start" | "end" | "center";
+}
+interface ScrollIntoViewParams {
+    /** callback fired after scroll */
+    onScrollFinish?: () => void;
+    /** duration of scroll in milliseconds */
+    duration?: number;
+    /** axis of scroll */
+    axis?: "x" | "y";
+    /** custom mathematical easing function */
+    easing?: (t: number) => number;
+    /** additional distance between nearest edge and element */
+    offset?: number;
+    /** indicator if animation may be interrupted by user scrolling */
+    cancelable?: boolean;
+    /** prevents content jumping in scrolling lists with multiple targets */
+    isList?: boolean;
+    targetElement: BasicTarget<HTMLElement>;
+    scrollElement?: BasicTarget<HTMLElement>;
+}
+declare function useScrollIntoView({ duration, axis, onScrollFinish, easing, offset, cancelable, isList, targetElement, scrollElement, }: ScrollIntoViewParams): {
+    scrollIntoView: ({ alignment }?: ScrollIntoViewAnimation) => void;
+    cancel: () => void;
+};
+
+interface UseStickyParams {
+    targetElement: BasicTarget<HTMLElement>;
+    scrollElement?: BasicTarget<HTMLElement>;
+    /** axis of scroll */
+    axis?: "x" | "y";
+    /** cover height or width */
+    nav: number;
+}
+declare const useSticky: ({ targetElement, scrollElement, axis, nav, }: UseStickyParams) => [
+    boolean,
+    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 };

package/dist/index.mjs

@@ -123,7 +123,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
   }
   const type = guessSerializerType(defaults);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = () => {
+  const getStoredValue = useEvent(() => {
     try {
       const raw = storage == null ? void 0 : storage.getItem(key);
       if (raw !== void 0 && raw !== null) {
@@ -135,11 +135,11 @@ function useStorage(key, defaults, getStorage, options = {}) {
     } catch (e) {
       onError(e);
     }
-  };
-  const [state, setState] = useState(() => getStoredValue());
-  useUpdateEffect(() => {
+  });
+  const [state, setState] = useState(defaults);
+  useEffect(() => {
     setState(getStoredValue());
-  }, [key]);
+  }, [getStoredValue, key]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -197,12 +197,12 @@ function useInterval(callback, delay, options) {
 }
 
 const getInitialState = (query, defaultState) => {
-  if (isBrowser) {
-    return window.matchMedia(query).matches;
-  }
   if (defaultState !== void 0) {
     return defaultState;
   }
+  if (isBrowser) {
+    return window.matchMedia(query).matches;
+  }
   if (process.env.NODE_ENV !== "production") {
     console.warn(
       "`useMediaQuery` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
@@ -254,21 +254,24 @@ function useDarkMode(options = {}) {
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
   const [dark, setDark] = useStorage(storageKey, value, storage);
-  useEffect(() => {
-    const element = window == null ? void 0 : window.document.querySelector(selector);
-    if (!element) {
-      return;
-    }
-    if (attribute === "class") {
-      dark && element.classList.add(dark);
-    } else {
-      dark && element.setAttribute(attribute, dark);
-    }
-    return () => {
-      dark && (element == null ? void 0 : element.classList.remove(dark));
-    };
-  }, [attribute, dark, selector]);
-  return [dark, setDark];
+  const wrappedSetDark = useCallback(
+    (latestDark) => {
+      const element = window == null ? void 0 : window.document.querySelector(selector);
+      if (!element) {
+        return;
+      }
+      if (attribute === "class") {
+        latestDark && element.classList.add(latestDark);
+        dark && element.classList.remove(dark);
+      } else {
+        latestDark && element.setAttribute(attribute, latestDark);
+        dark && element.removeAttribute(attribute);
+      }
+      setDark(latestDark);
+    },
+    [attribute, dark, selector, setDark]
+  );
+  return [dark, wrappedSetDark];
 }
 
 function useMount(fn) {
@@ -536,8 +539,8 @@ function useDeepCompareEffect(effect, deps) {
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
+  const targetElement = getTargetElement(element, window);
   useDeepCompareEffect(() => {
-    const targetElement = getTargetElement(element, window);
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
@@ -546,7 +549,7 @@ function useEventListener(eventName, handler, element, options) {
     return () => {
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, element, options, savedHandler]);
+  }, [eventName, targetElement, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -690,20 +693,20 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
 function useMutationObserver(callback, target, options = {}) {
   const callbackRef = useLatest(callback);
   const observerRef = useRef();
+  const element = getTargetElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
     observerRef.current.observe(element, options);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1488,13 +1491,13 @@ function useOrientation(initialState = defaultState) {
 function useIntersectionObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
+  const element = getTargetElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
@@ -1504,7 +1507,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     );
     observerRef.current.observe(element);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1544,20 +1547,20 @@ function useDocumentVisibility() {
 function useResizeObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
+  const element = getTargetElement(target);
   const stop = useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
   }, []);
   useDeepCompareEffect(() => {
-    const element = getTargetElement(target);
     if (!element) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
     observerRef.current.observe(element, options);
     return stop;
-  }, [options]);
+  }, [options, element]);
   return stop;
 }
 
@@ -1782,11 +1785,11 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
+  const element = getTargetElement(target);
   const di = state[3][direction];
   useUpdateEffect(() => {
     const fn = () => __async$1(this, null, function* () {
       var _a2, _b2;
-      const element = getTargetElement(target);
       const previous = {
         height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
         width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
@@ -1800,7 +1803,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       }
     });
     fn();
-  }, [di, options.preserveScrollPosition]);
+  }, [di, options.preserveScrollPosition, element]);
 }
 
 const defaultEvents = [
@@ -1837,6 +1840,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 onPressed = useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -1851,8 +1855,7 @@ function useMousePressed(target, options = {}) {
   useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
   useEventListener("mouseleave", onReleased, () => window, { passive: true });
   useEventListener("mouseup", onReleased, () => window, { passive: true });
-  useMount(() => {
-    const element = getTargetElement(target);
+  useEffect(() => {
     if (drag) {
       element == null ? void 0 : element.addEventListener("dragstart", onPressed("mouse"), {
         passive: true
@@ -1887,7 +1890,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  });
+  }, [drag, onPressed, onReleased, element, touch]);
   return [pressed, sourceType];
 }
 
@@ -1904,28 +1907,25 @@ function preventDefault(rawEvent) {
 function useScrollLock(target, initialState = false) {
   const [locked, setLocked] = useState(initialState);
   const initialOverflowRef = useRef("scroll");
-  useMount(() => {
-    const element = getTargetElement(target);
+  const element = getTargetElement(target);
+  useEffect(() => {
     if (element) {
       initialOverflowRef.current = element.style.overflow;
       if (locked) {
         element.style.overflow = "hidden";
       }
     }
-  });
+  }, [locked, element]);
   const lock = useEvent(() => {
-    const element = getTargetElement(target);
     if (!element || locked) {
       return;
     }
     if (isIOS) {
       element.addEventListener("touchmove", preventDefault, { passive: false });
     }
-    element.style.overflow = "hidden";
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    const element = getTargetElement(target);
     if (!element || !locked) {
       return;
     }
@@ -2472,4 +2472,237 @@ var useOnceEffect = createOnceEffect(useEffect);
 
 var useOnceLayoutEffect = createOnceEffect(useLayoutEffect);
 
-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, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+function useReducedMotion(defaultState) {
+  return useMediaQuery("(prefers-reduced-motion: reduce)", defaultState);
+}
+
+const setScrollParam = ({
+  axis,
+  parent,
+  distance
+}) => {
+  if (!parent && typeof document === "undefined") {
+    return;
+  }
+  const method = axis === "y" ? "scrollTop" : "scrollLeft";
+  if (parent) {
+    parent[method] = distance;
+  } else {
+    const { body, documentElement } = document;
+    body[method] = distance;
+    documentElement[method] = distance;
+  }
+};
+const isScrollElement = (axis, node) => {
+  if (!node) {
+    return false;
+  }
+  const AXIS = axis === "x" ? "X" : "Y";
+  return getComputedStyle(node)[`overflow${AXIS}`] === "auto" || getComputedStyle(node)[`overflow${AXIS}`] === "scroll";
+};
+const cache = /* @__PURE__ */ new Map();
+const getScrollParent = (axis, node) => {
+  if (!node || !node.parentElement) {
+    return null;
+  }
+  if (cache.has(node)) {
+    return cache.get(node) || null;
+  }
+  let parent = node.parentElement;
+  while (parent && !isScrollElement(axis, parent)) {
+    parent = parent.parentElement;
+  }
+  if (parent) {
+    cache.set(node, parent);
+  }
+  return parent;
+};
+const getScrollStart = ({
+  axis,
+  parent
+}) => {
+  if (!parent && typeof document === "undefined") {
+    return 0;
+  }
+  const method = axis === "y" ? "scrollTop" : "scrollLeft";
+  if (parent) {
+    return parent[method];
+  }
+  const { body, documentElement } = document;
+  return body[method] + documentElement[method];
+};
+
+const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+const getRelativePosition = ({
+  axis,
+  target,
+  parent,
+  alignment,
+  offset,
+  isList
+}) => {
+  if (!target || !parent && typeof document === "undefined") {
+    return 0;
+  }
+  const isCustomParent = !!parent;
+  const parentElement = parent || document.body;
+  const parentPosition = parentElement.getBoundingClientRect();
+  const targetPosition = target.getBoundingClientRect();
+  const getDiff = (property) => targetPosition[property] - parentPosition[property];
+  if (axis === "y") {
+    const diff = getDiff("top");
+    if (diff === 0) {
+      return 0;
+    }
+    if (alignment === "start") {
+      const distance = diff - offset;
+      const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;
+    if (alignment === "end") {
+      const distance = diff + offset - parentHeight + targetPosition.height;
+      const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    if (alignment === "center") {
+      return diff - parentHeight / 2 + targetPosition.height / 2;
+    }
+    return 0;
+  }
+  if (axis === "x") {
+    const diff = getDiff("left");
+    if (diff === 0) {
+      return 0;
+    }
+    if (alignment === "start") {
+      const distance = diff - offset;
+      const shouldScroll = distance <= targetPosition.width || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;
+    if (alignment === "end") {
+      const distance = diff + offset - parentWidth + targetPosition.width;
+      const shouldScroll = distance >= -targetPosition.width || !isList;
+      return shouldScroll ? distance : 0;
+    }
+    if (alignment === "center") {
+      return diff - parentWidth / 2 + targetPosition.width / 2;
+    }
+    return 0;
+  }
+  return 0;
+};
+
+function useScrollIntoView({
+  duration = 1250,
+  axis = "y",
+  onScrollFinish,
+  easing = easeInOutQuad,
+  offset = 0,
+  cancelable = true,
+  isList = false,
+  targetElement,
+  scrollElement
+}) {
+  const frameID = useRef(0);
+  const startTime = useRef(0);
+  const shouldStop = useRef(false);
+  const reducedMotion = useReducedMotion(false);
+  const cancel = () => {
+    if (frameID.current) {
+      cancelAnimationFrame(frameID.current);
+    }
+  };
+  const scrollIntoView = useEvent(
+    ({ alignment = "start" } = {}) => {
+      var _a;
+      const element = getTargetElement(targetElement);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+      shouldStop.current = false;
+      if (frameID.current) {
+        cancel();
+      }
+      const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
+      const change = getRelativePosition({
+        parent,
+        target: element,
+        axis,
+        alignment,
+        offset,
+        isList
+      }) - (parent ? 0 : start);
+      const animateScroll = () => {
+        if (startTime.current === 0) {
+          startTime.current = performance.now();
+        }
+        const now = performance.now();
+        const elapsed = now - startTime.current;
+        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
+        const distance = start + change * easing(t);
+        setScrollParam({
+          parent,
+          axis,
+          distance
+        });
+        if (!shouldStop.current && t < 1) {
+          frameID.current = requestAnimationFrame(animateScroll);
+        } else {
+          typeof onScrollFinish === "function" && onScrollFinish();
+          startTime.current = 0;
+          frameID.current = 0;
+          cancel();
+        }
+      };
+      animateScroll();
+    }
+  );
+  const handleStop = () => {
+    if (cancelable) {
+      shouldStop.current = true;
+    }
+  };
+  useEventListener("wheel", handleStop, null, { passive: true });
+  useEventListener("touchmove", handleStop, null, { passive: true });
+  useEffect(() => cancel, []);
+  return {
+    scrollIntoView,
+    cancel
+  };
+}
+
+const useSticky = ({
+  targetElement,
+  scrollElement,
+  axis = "y",
+  nav = 0
+}) => {
+  const [isSticky, setSticky] = useState(false);
+  const element = getTargetElement(targetElement);
+  const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+  const { run: scrollHandler } = useThrottleFn(() => {
+    if (!element) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    if (axis === "y") {
+      setSticky((rect == null ? void 0 : rect.top) <= nav);
+    } else {
+      setSticky((rect == null ? void 0 : rect.left) <= nav);
+    }
+  }, 50);
+  useEffect(() => {
+    if (!element || !scrollParent) {
+      return;
+    }
+    scrollParent.addEventListener("scroll", scrollHandler);
+    scrollHandler();
+    return () => {
+      scrollParent.removeEventListener("scroll", scrollHandler);
+    };
+  }, [axis, element, scrollHandler, scrollParent]);
+  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 };

package/package.json

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