@reactuses/core 2.2.9 → 3.0.1

package/dist/index.cjs

@@ -2974,18 +2974,19 @@ function getTargetElement(target, defaultElement) {
   return targetElement;
 }
 function useLatestElement(target, defaultElement) {
-  const ref = React.useRef(getTargetElement(target, defaultElement));
+  const [latestElement, setLatestElement] = React.useState(
+    getTargetElement(target, defaultElement)
+  );
   React.useEffect(() => {
-    ref.current = getTargetElement(target, defaultElement);
-  });
-  return ref;
+    setLatestElement(getTargetElement(target, defaultElement));
+  }, [target, defaultElement]);
+  return latestElement;
 }
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElementRef = useLatestElement(element, defaultWindow);
+  const targetElement = useLatestElement(element, defaultWindow);
   useDeepCompareEffect(() => {
-    const targetElement = targetElementRef.current;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
@@ -2997,7 +2998,7 @@ function useEventListener(eventName, handler, element, options) {
       }
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, targetElementRef.current, options, savedHandler]);
+  }, [eventName, targetElement, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -3149,13 +3150,13 @@ function useMutationObserver(callback, target, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
-    observerRef.current.observe(element.current, options);
+    observerRef.current.observe(element, options);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -3411,34 +3412,95 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
   return state;
 }
 
-function useMediaDevices() {
+function useSupported(callback, sync = false) {
+  const [supported, setSupported] = React.useState(false);
+  const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
+  effect(() => {
+    setSupported(Boolean(callback()));
+  }, []);
+  return supported;
+}
+
+var __async$4 = (__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 useMediaDevices(options = {}) {
+  const { requestPermissions, constraints = { audio: true, video: true } } = options;
   const [state, setState] = React.useState({ devices: [] });
+  const isSupported = useSupported(
+    () => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices
+  );
+  const permissionGranted = React.useRef(false);
+  const stream = React.useRef(null);
+  const onChange = React.useCallback(() => {
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      if (stream.current) {
+        stream.current.getTracks().forEach((t) => t.stop());
+        stream.current = null;
+      }
+      setState({
+        devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+          deviceId,
+          groupId,
+          kind,
+          label
+        }))
+      });
+    }).catch(noop);
+  }, []);
+  const ensurePermissions = React.useCallback(() => __async$4(this, null, function* () {
+    if (!isSupported) {
+      return false;
+    }
+    if (permissionGranted.current) {
+      return true;
+    }
+    const permissionStatus = yield navigator.permissions.query({
+      name: "camera"
+    });
+    if (permissionStatus.state !== "granted") {
+      stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
+      onChange();
+      permissionGranted.current = true;
+    } else {
+      permissionGranted.current = false;
+    }
+    return permissionGranted.current;
+  }), [onChange, isSupported, constraints]);
   React.useEffect(() => {
-    let mounted = true;
-    const onChange = () => {
-      navigator.mediaDevices.enumerateDevices().then((devices) => {
-        if (mounted) {
-          setState({
-            devices: devices.map(({ deviceId, groupId, kind, label }) => ({
-              deviceId,
-              groupId,
-              kind,
-              label
-            }))
-          });
-        }
-      }).catch(noop);
-    };
+    if (!isSupported) {
+      return;
+    }
+    if (requestPermissions) {
+      ensurePermissions();
+    }
     on(navigator.mediaDevices, "devicechange", onChange);
     onChange();
     return () => {
-      mounted = false;
       off(navigator.mediaDevices, "devicechange", onChange);
     };
-  }, []);
-  return state;
+  }, [onChange, isSupported, requestPermissions, ensurePermissions]);
+  return [state, ensurePermissions];
 }
-const useMediaDevicesMock = () => ({ devices: [] });
+const useMediaDevicesMock = () => [{ devices: [] }, () => {
+}];
 var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -3939,16 +4001,16 @@ function useIntersectionObserver(target, callback, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new IntersectionObserver(
       savedCallback.current,
       options
     );
-    observerRef.current.observe(element.current);
+    observerRef.current.observe(element);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -3995,13 +4057,13 @@ function useResizeObserver(target, callback, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
-    observerRef.current.observe(element.current, options);
+    observerRef.current.observe(element, options);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -4231,16 +4293,16 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   useUpdateEffect(() => {
     const opts = latestOptions.current;
     const fn = () => __async$3(this, null, function* () {
-      var _a2, _b2, _c, _d;
+      var _a2, _b2;
       const previous = {
-        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
+        height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
+        width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
       };
       yield savedLoadMore.current(state);
-      if (opts.preserveScrollPosition && element.current) {
-        element.current.scrollTo({
-          top: element.current.scrollHeight - previous.height,
-          left: element.current.scrollWidth - previous.width
+      if (opts.preserveScrollPosition && element) {
+        element.scrollTo({
+          top: element.scrollHeight - previous.height,
+          left: element.scrollWidth - previous.width
         });
       }
     });
@@ -4282,7 +4344,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 elementRef = useLatestElement(target);
+  const element = useLatestElement(target);
   const onPressed = React.useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -4298,7 +4360,6 @@ 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
@@ -4333,7 +4394,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  }, [drag, onPressed, onReleased, touch, elementRef.current]);
+  }, [drag, onPressed, onReleased, touch, element]);
   return [pressed, sourceType];
 }
 
@@ -4352,32 +4413,32 @@ function useScrollLock(target, initialState = false) {
   const initialOverflowRef = React.useRef("scroll");
   const element = useLatestElement(target);
   React.useEffect(() => {
-    if (element.current) {
-      initialOverflowRef.current = element.current.style.overflow;
+    if (element) {
+      initialOverflowRef.current = element.style.overflow;
       if (locked) {
-        element.current.style.overflow = "hidden";
+        element.style.overflow = "hidden";
       }
     }
-  }, [locked, element.current]);
+  }, [locked, element]);
   const lock = useEvent(() => {
-    if (!element.current || locked) {
+    if (!element || locked) {
       return;
     }
     if (isIOS) {
-      element.current.addEventListener("touchmove", preventDefault, {
+      element.addEventListener("touchmove", preventDefault, {
         passive: false
       });
     }
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    if (!element.current || !locked) {
+    if (!element || !locked) {
       return;
     }
     if (isIOS) {
-      element.current.removeEventListener("touchmove", preventDefault);
+      element.removeEventListener("touchmove", preventDefault);
     }
-    element.current.style.overflow = initialOverflowRef.current;
+    element.style.overflow = initialOverflowRef.current;
     setLocked(false);
   });
   const set = useEvent((flag) => {
@@ -4817,11 +4878,11 @@ function useClickOutSide(target, handler) {
   const savedHandler = useLatest(handler);
   const element = useLatestElement(target);
   const listener = (event) => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     const elements = event.composedPath();
-    if (element.current === event.target || elements.includes(element.current)) {
+    if (element === event.target || elements.includes(element)) {
       return;
     }
     savedHandler.current(event);
@@ -5066,7 +5127,7 @@ function useScrollIntoView({
   const scrollIntoView = useEvent(
     ({ alignment = "start" } = {}) => {
       var _a;
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
       shouldStop.current = false;
       if (frameID.current) {
         cancel();
@@ -5074,7 +5135,7 @@ function useScrollIntoView({
       const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
       const change = getRelativePosition({
         parent,
-        target: element.current,
+        target: element,
         axis,
         alignment,
         offset,
@@ -5128,10 +5189,10 @@ const useSticky = ({
   const [isSticky, setSticky] = React.useState(false);
   const element = useLatestElement(targetElement);
   const { run: scrollHandler } = useThrottleFn(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
-    const rect = element.current.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
     if (axis === "y") {
       setSticky((rect == null ? void 0 : rect.top) <= nav);
     } else {
@@ -5139,8 +5200,8 @@ const useSticky = ({
     }
   }, 50);
   React.useEffect(() => {
-    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
-    if (!element.current || !scrollParent) {
+    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+    if (!element || !scrollParent) {
       return;
     }
     scrollParent.addEventListener("scroll", scrollHandler);
@@ -5222,15 +5283,6 @@ const useCountDown = (time, format = getHMSTime, callback) => {
   return [hour, minute, secoud];
 };
 
-function useSupported(callback, sync = false) {
-  const [supported, setSupported] = React.useState(false);
-  const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
-  effect(() => {
-    setSupported(Boolean(callback()));
-  }, []);
-  return supported;
-}
-
 function useTextSelection() {
   const [selection, setSelection] = React.useState(null);
   const forceUpdate = useUpdate();

package/dist/index.d.ts

@@ -287,15 +287,32 @@ declare function useObjectUrl(object: Blob | MediaSource | undefined): string |
 
 declare function useIdle(ms?: number, initialState?: boolean, events?: (keyof WindowEventMap)[]): boolean;
 
-declare function useMediaDevices(): {
+interface UseMediaDeviceOptions {
+    /**
+     * Request for permissions immediately if it's not granted,
+     * otherwise label and deviceIds could be empty
+     *
+     * @default false
+     */
+    requestPermissions?: boolean;
+    /**
+     * Request for types of media permissions
+     *
+     * @default { audio: true, video: true }
+     */
+    constraints?: MediaStreamConstraints;
+}
+declare function useMediaDevices(options?: UseMediaDeviceOptions): readonly [{
     devices: {
         deviceId: string;
         groupId: string;
         kind: MediaDeviceKind;
         label: string;
     }[];
-};
-declare const _default$3: typeof useMediaDevices;
+}, () => Promise<boolean>];
+declare const _default$3: typeof useMediaDevices | (() => ((() => void) | {
+    devices: never[];
+})[]);
 
 type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
@@ -852,4 +869,4 @@ declare function useSetState<T extends Record<string, any>>(initialState: T): re
 type UseMeasureRect = Omit<DOMRectReadOnly, "toJSON">;
 declare function useMeasure(target: BasicTarget, options?: ResizeObserverOptions): readonly [UseMeasureRect, () => void];
 
-export { ColorScheme, Contrast, CookieOptions, CookieState, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, _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, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+export { ColorScheme, Contrast, CookieOptions, CookieState, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseMediaDeviceOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, _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, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -2966,18 +2966,19 @@ function getTargetElement(target, defaultElement) {
   return targetElement;
 }
 function useLatestElement(target, defaultElement) {
-  const ref = useRef(getTargetElement(target, defaultElement));
+  const [latestElement, setLatestElement] = useState(
+    getTargetElement(target, defaultElement)
+  );
   useEffect(() => {
-    ref.current = getTargetElement(target, defaultElement);
-  });
-  return ref;
+    setLatestElement(getTargetElement(target, defaultElement));
+  }, [target, defaultElement]);
+  return latestElement;
 }
 
 function useEventListener(eventName, handler, element, options) {
   const savedHandler = useLatest(handler);
-  const targetElementRef = useLatestElement(element, defaultWindow);
+  const targetElement = useLatestElement(element, defaultWindow);
   useDeepCompareEffect(() => {
-    const targetElement = targetElementRef.current;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
@@ -2989,7 +2990,7 @@ function useEventListener(eventName, handler, element, options) {
       }
       off(targetElement, eventName, eventListener);
     };
-  }, [eventName, targetElementRef.current, options, savedHandler]);
+  }, [eventName, targetElement, options, savedHandler]);
 }
 
 function useCounter(initialValue = 0, max = null, min = null) {
@@ -3141,13 +3142,13 @@ function useMutationObserver(callback, target, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new MutationObserver(callbackRef.current);
-    observerRef.current.observe(element.current, options);
+    observerRef.current.observe(element, options);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -3403,34 +3404,95 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
   return state;
 }
 
-function useMediaDevices() {
+function useSupported(callback, sync = false) {
+  const [supported, setSupported] = useState(false);
+  const effect = sync ? useIsomorphicLayoutEffect : useEffect;
+  effect(() => {
+    setSupported(Boolean(callback()));
+  }, []);
+  return supported;
+}
+
+var __async$4 = (__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 useMediaDevices(options = {}) {
+  const { requestPermissions, constraints = { audio: true, video: true } } = options;
   const [state, setState] = useState({ devices: [] });
+  const isSupported = useSupported(
+    () => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices
+  );
+  const permissionGranted = useRef(false);
+  const stream = useRef(null);
+  const onChange = useCallback(() => {
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      if (stream.current) {
+        stream.current.getTracks().forEach((t) => t.stop());
+        stream.current = null;
+      }
+      setState({
+        devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+          deviceId,
+          groupId,
+          kind,
+          label
+        }))
+      });
+    }).catch(noop);
+  }, []);
+  const ensurePermissions = useCallback(() => __async$4(this, null, function* () {
+    if (!isSupported) {
+      return false;
+    }
+    if (permissionGranted.current) {
+      return true;
+    }
+    const permissionStatus = yield navigator.permissions.query({
+      name: "camera"
+    });
+    if (permissionStatus.state !== "granted") {
+      stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
+      onChange();
+      permissionGranted.current = true;
+    } else {
+      permissionGranted.current = false;
+    }
+    return permissionGranted.current;
+  }), [onChange, isSupported, constraints]);
   useEffect(() => {
-    let mounted = true;
-    const onChange = () => {
-      navigator.mediaDevices.enumerateDevices().then((devices) => {
-        if (mounted) {
-          setState({
-            devices: devices.map(({ deviceId, groupId, kind, label }) => ({
-              deviceId,
-              groupId,
-              kind,
-              label
-            }))
-          });
-        }
-      }).catch(noop);
-    };
+    if (!isSupported) {
+      return;
+    }
+    if (requestPermissions) {
+      ensurePermissions();
+    }
     on(navigator.mediaDevices, "devicechange", onChange);
     onChange();
     return () => {
-      mounted = false;
       off(navigator.mediaDevices, "devicechange", onChange);
     };
-  }, []);
-  return state;
+  }, [onChange, isSupported, requestPermissions, ensurePermissions]);
+  return [state, ensurePermissions];
 }
-const useMediaDevicesMock = () => ({ devices: [] });
+const useMediaDevicesMock = () => [{ devices: [] }, () => {
+}];
 var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -3931,16 +3993,16 @@ function useIntersectionObserver(target, callback, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new IntersectionObserver(
       savedCallback.current,
       options
     );
-    observerRef.current.observe(element.current);
+    observerRef.current.observe(element);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -3987,13 +4049,13 @@ function useResizeObserver(target, callback, options = {}) {
     }
   }, []);
   useDeepCompareEffect(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     observerRef.current = new ResizeObserver(savedCallback.current);
-    observerRef.current.observe(element.current, options);
+    observerRef.current.observe(element, options);
     return stop;
-  }, [options, element.current]);
+  }, [options, element]);
   return stop;
 }
 
@@ -4223,16 +4285,16 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   useUpdateEffect(() => {
     const opts = latestOptions.current;
     const fn = () => __async$3(this, null, function* () {
-      var _a2, _b2, _c, _d;
+      var _a2, _b2;
       const previous = {
-        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
+        height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
+        width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
       };
       yield savedLoadMore.current(state);
-      if (opts.preserveScrollPosition && element.current) {
-        element.current.scrollTo({
-          top: element.current.scrollHeight - previous.height,
-          left: element.current.scrollWidth - previous.width
+      if (opts.preserveScrollPosition && element) {
+        element.scrollTo({
+          top: element.scrollHeight - previous.height,
+          left: element.scrollWidth - previous.width
         });
       }
     });
@@ -4274,7 +4336,7 @@ function useMousePressed(target, options = {}) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = useState(initialValue);
   const [sourceType, setSourceType] = useState(null);
-  const elementRef = useLatestElement(target);
+  const element = useLatestElement(target);
   const onPressed = useCallback(
     (srcType) => () => {
       setPressed(true);
@@ -4290,7 +4352,6 @@ 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
@@ -4325,7 +4386,7 @@ function useMousePressed(target, options = {}) {
         element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
       }
     };
-  }, [drag, onPressed, onReleased, touch, elementRef.current]);
+  }, [drag, onPressed, onReleased, touch, element]);
   return [pressed, sourceType];
 }
 
@@ -4344,32 +4405,32 @@ function useScrollLock(target, initialState = false) {
   const initialOverflowRef = useRef("scroll");
   const element = useLatestElement(target);
   useEffect(() => {
-    if (element.current) {
-      initialOverflowRef.current = element.current.style.overflow;
+    if (element) {
+      initialOverflowRef.current = element.style.overflow;
       if (locked) {
-        element.current.style.overflow = "hidden";
+        element.style.overflow = "hidden";
       }
     }
-  }, [locked, element.current]);
+  }, [locked, element]);
   const lock = useEvent(() => {
-    if (!element.current || locked) {
+    if (!element || locked) {
       return;
     }
     if (isIOS) {
-      element.current.addEventListener("touchmove", preventDefault, {
+      element.addEventListener("touchmove", preventDefault, {
         passive: false
       });
     }
     setLocked(true);
   });
   const unlock = useEvent(() => {
-    if (!element.current || !locked) {
+    if (!element || !locked) {
       return;
     }
     if (isIOS) {
-      element.current.removeEventListener("touchmove", preventDefault);
+      element.removeEventListener("touchmove", preventDefault);
     }
-    element.current.style.overflow = initialOverflowRef.current;
+    element.style.overflow = initialOverflowRef.current;
     setLocked(false);
   });
   const set = useEvent((flag) => {
@@ -4809,11 +4870,11 @@ function useClickOutSide(target, handler) {
   const savedHandler = useLatest(handler);
   const element = useLatestElement(target);
   const listener = (event) => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
     const elements = event.composedPath();
-    if (element.current === event.target || elements.includes(element.current)) {
+    if (element === event.target || elements.includes(element)) {
       return;
     }
     savedHandler.current(event);
@@ -5058,7 +5119,7 @@ function useScrollIntoView({
   const scrollIntoView = useEvent(
     ({ alignment = "start" } = {}) => {
       var _a;
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
+      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
       shouldStop.current = false;
       if (frameID.current) {
         cancel();
@@ -5066,7 +5127,7 @@ function useScrollIntoView({
       const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
       const change = getRelativePosition({
         parent,
-        target: element.current,
+        target: element,
         axis,
         alignment,
         offset,
@@ -5120,10 +5181,10 @@ const useSticky = ({
   const [isSticky, setSticky] = useState(false);
   const element = useLatestElement(targetElement);
   const { run: scrollHandler } = useThrottleFn(() => {
-    if (!element.current) {
+    if (!element) {
       return;
     }
-    const rect = element.current.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
     if (axis === "y") {
       setSticky((rect == null ? void 0 : rect.top) <= nav);
     } else {
@@ -5131,8 +5192,8 @@ const useSticky = ({
     }
   }, 50);
   useEffect(() => {
-    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element.current);
-    if (!element.current || !scrollParent) {
+    const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+    if (!element || !scrollParent) {
       return;
     }
     scrollParent.addEventListener("scroll", scrollHandler);
@@ -5214,15 +5275,6 @@ const useCountDown = (time, format = getHMSTime, callback) => {
   return [hour, minute, secoud];
 };
 
-function useSupported(callback, sync = false) {
-  const [supported, setSupported] = useState(false);
-  const effect = sync ? useIsomorphicLayoutEffect : useEffect;
-  effect(() => {
-    setSupported(Boolean(callback()));
-  }, []);
-  return supported;
-}
-
 function useTextSelection() {
   const [selection, setSelection] = useState(null);
   const forceUpdate = useUpdate();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "2.2.9",
+  "version": "3.0.1",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {