@reactuses/core 2.2.9 → 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;
 }
 
@@ -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;
 }
 
@@ -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);

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;
 }
 
@@ -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;
 }
 
@@ -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);

package/package.json

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