@reactuses/core 2.2.8 → 3.0.0

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;
 }
 
@@ -3878,11 +3879,11 @@ function useOnline() {
   return online;
 }
 
-const defaultState = {
+const defaultState$1 = {
   angle: 0,
   type: "landscape-primary"
 };
-function useOrientation(initialState = defaultState) {
+function useOrientation(initialState = defaultState$1) {
   const [state, setState] = React.useState(initialState);
   React.useEffect(() => {
     const screen = window.screen;
@@ -3939,16 +3940,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 +3996,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;
 }
 
@@ -4050,19 +4051,19 @@ function useDropZone(target, onDrop) {
   return over;
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -4090,7 +4091,7 @@ function useFileDialog(options = {}) {
     if (!inputRef.current) {
       return;
     }
-    const _options = __spreadValues$1(__spreadValues$1(__spreadValues$1({}, DEFAULT_OPTIONS), options), localOptions);
+    const _options = __spreadValues$2(__spreadValues$2(__spreadValues$2({}, DEFAULT_OPTIONS), options), localOptions);
     inputRef.current.multiple = _options.multiple;
     inputRef.current.accept = _options.accept;
     inputRef.current.capture = _options.capture;
@@ -4177,21 +4178,21 @@ function useScroll(target, options = {}) {
   return [x, y, isScrolling, arrivedState, directions];
 }
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -4220,8 +4221,8 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   var _a, _b;
   const savedLoadMore = useLatest(onLoadMore);
   const direction = (_a = options.direction) != null ? _a : "bottom";
-  const state = useScroll(target, __spreadProps(__spreadValues({}, options), {
-    offset: __spreadValues({
+  const state = useScroll(target, __spreadProps(__spreadValues$1({}, options), {
+    offset: __spreadValues$1({
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
@@ -4231,16 +4232,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 +4283,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 +4299,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 +4333,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 +4352,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 +4817,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 +5066,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 +5074,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 +5128,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 +5139,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);
@@ -5417,17 +5417,17 @@ function init (converter, defaultAttributes) {
 
 var api = init(defaultConverter, { path: '/' });
 
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5511,6 +5511,56 @@ function useDoubleClick({
   useEventListener("touchend", handleTouchEnd, element, { passive: false });
 }
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function useSetState(initialState) {
+  const [state, _setState] = React.useState(initialState);
+  const setState = React.useCallback(
+    (statePartial) => _setState((current) => __spreadValues(__spreadValues({}, current), typeof statePartial === "function" ? statePartial(current) : statePartial)),
+    []
+  );
+  return [state, setState];
+}
+
+const defaultState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure(target, options = {}) {
+  const [rect, setRect] = React.useState(defaultState);
+  const stop = useResizeObserver(
+    target,
+    (entries) => {
+      if (entries[0]) {
+        const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+        setRect({ x, y, width, height, top, left, bottom, right });
+      }
+    },
+    options
+  );
+  return [rect, stop];
+}
+
 exports.getHMSTime = getHMSTime;
 exports.useActiveElement = useActiveElement;
 exports.useAsyncEffect = useAsyncEffect;
@@ -5553,6 +5603,7 @@ exports.useKeyModifier = useKeyModifier;
 exports.useLatest = useLatest;
 exports.useLocalStorage = useLocalStorage;
 exports.useLongPress = useLongPress;
+exports.useMeasure = useMeasure;
 exports.useMediaDevices = index$3;
 exports.useMediaQuery = useMediaQuery;
 exports.useMount = useMount;
@@ -5581,6 +5632,7 @@ exports.useScroll = useScroll;
 exports.useScrollIntoView = useScrollIntoView;
 exports.useScrollLock = useScrollLock;
 exports.useSessionStorage = useSessionStorage;
+exports.useSetState = useSetState;
 exports.useSticky = useSticky;
 exports.useSupported = useSupported;
 exports.useTextDirection = useTextDirection;

package/dist/index.d.ts

@@ -847,4 +847,9 @@ declare function useDoubleClick({ target, latency, onSingleClick, onDoubleClick,
     onDoubleClick?: (e?: MouseEvent | TouchEvent) => void;
 }): 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, 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, _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, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare function useSetState<T extends Record<string, any>>(initialState: T): readonly [T, (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) => void];
+
+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 };

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;
 }
 
@@ -3870,11 +3871,11 @@ function useOnline() {
   return online;
 }
 
-const defaultState = {
+const defaultState$1 = {
   angle: 0,
   type: "landscape-primary"
 };
-function useOrientation(initialState = defaultState) {
+function useOrientation(initialState = defaultState$1) {
   const [state, setState] = useState(initialState);
   useEffect(() => {
     const screen = window.screen;
@@ -3931,16 +3932,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 +3988,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;
 }
 
@@ -4042,19 +4043,19 @@ function useDropZone(target, onDrop) {
   return over;
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -4082,7 +4083,7 @@ function useFileDialog(options = {}) {
     if (!inputRef.current) {
       return;
     }
-    const _options = __spreadValues$1(__spreadValues$1(__spreadValues$1({}, DEFAULT_OPTIONS), options), localOptions);
+    const _options = __spreadValues$2(__spreadValues$2(__spreadValues$2({}, DEFAULT_OPTIONS), options), localOptions);
     inputRef.current.multiple = _options.multiple;
     inputRef.current.accept = _options.accept;
     inputRef.current.capture = _options.capture;
@@ -4169,21 +4170,21 @@ function useScroll(target, options = {}) {
   return [x, y, isScrolling, arrivedState, directions];
 }
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -4212,8 +4213,8 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   var _a, _b;
   const savedLoadMore = useLatest(onLoadMore);
   const direction = (_a = options.direction) != null ? _a : "bottom";
-  const state = useScroll(target, __spreadProps(__spreadValues({}, options), {
-    offset: __spreadValues({
+  const state = useScroll(target, __spreadProps(__spreadValues$1({}, options), {
+    offset: __spreadValues$1({
       [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   }));
@@ -4223,16 +4224,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 +4275,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 +4291,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 +4325,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 +4344,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 +4809,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 +5058,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 +5066,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 +5120,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 +5131,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);
@@ -5409,17 +5409,17 @@ function init (converter, defaultAttributes) {
 
 var api = init(defaultConverter, { path: '/' });
 
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5503,4 +5503,54 @@ function useDoubleClick({
   useEventListener("touchend", handleTouchEnd, element, { passive: false });
 }
 
-export { 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, index$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, index$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function useSetState(initialState) {
+  const [state, _setState] = useState(initialState);
+  const setState = useCallback(
+    (statePartial) => _setState((current) => __spreadValues(__spreadValues({}, current), typeof statePartial === "function" ? statePartial(current) : statePartial)),
+    []
+  );
+  return [state, setState];
+}
+
+const defaultState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure(target, options = {}) {
+  const [rect, setRect] = useState(defaultState);
+  const stop = useResizeObserver(
+    target,
+    (entries) => {
+      if (entries[0]) {
+        const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+        setRect({ x, y, width, height, top, left, bottom, right });
+      }
+    },
+    options
+  );
+  return [rect, stop];
+}
+
+export { 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, index$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, index$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index 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, useUpdateEffect, index$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/package.json

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