@reactuses/core 1.0.6-beta.1 → 1.0.7

package/index.cjs

@@ -13,7 +13,7 @@ function usePrevious(state) {
   return ref.current;
 }
 
-var __async$1 = (__this, __arguments, generator) => {
+var __async$2 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -36,7 +36,7 @@ var __async$1 = (__this, __arguments, generator) => {
 function useMarkdown(filepath) {
   const [content, setContent] = react.useState("");
   react.useEffect(() => {
-    const getContent = () => __async$1(this, null, function* () {
+    const getContent = () => __async$2(this, null, function* () {
       const data = yield (yield fetch(filepath)).text();
       setContent(data);
     });
@@ -231,47 +231,29 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
-const getInitialState = (query, defaultState) => {
-  if (isBrowser) {
-    return window.matchMedia(query).matches;
-  }
-  if (defaultState !== void 0) {
-    return defaultState;
-  }
-  if (process.env.NODE_ENV !== "production") {
-    console.warn(
-      "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
-    );
-  }
-  return false;
-};
-function useMediaQuery(query, defaultState) {
-  const [state, setState] = react.useState(getInitialState(query, defaultState));
-  react.useEffect(() => {
-    let mounted = true;
-    const mql = window.matchMedia(query);
-    const onChange = () => {
-      if (!mounted) {
-        return;
-      }
-      setState(!!mql.matches);
-    };
-    if ("addEventListener" in mql) {
-      mql.addEventListener("change", onChange);
-    } else {
-      mql.addListener(onChange);
-    }
-    setState(mql.matches);
-    return () => {
-      mounted = false;
-      if ("removeEventListener" in mql) {
-        mql.removeEventListener("change", onChange);
-      } else {
-        mql.removeListener(onChange);
+function useMediaQuery(query, serverFallback) {
+  const getServerSnapshot = serverFallback !== void 0 ? () => serverFallback : void 0;
+  const [getSnapshot, subscribe] = react.useMemo(() => {
+    const mediaQueryList = window.matchMedia(query);
+    return [
+      () => mediaQueryList.matches,
+      (notify) => {
+        try {
+          mediaQueryList.addEventListener("change", notify);
+        } catch (e) {
+          mediaQueryList.addListener(notify);
+        }
+        return () => {
+          try {
+            mediaQueryList.removeEventListener("change", notify);
+          } catch (e) {
+            mediaQueryList.removeListener(notify);
+          }
+        };
       }
-    };
+    ];
   }, [query]);
-  return state;
+  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
 function usePreferredDark(defaultState) {
@@ -1787,7 +1769,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
+var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -1818,7 +1800,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   }));
   const di = state[3][direction];
   useUpdateEffect(() => {
-    const fn = () => __async(this, null, function* () {
+    const fn = () => __async$1(this, null, function* () {
       var _a2, _b2;
       const element = getTargetElement(target);
       const previous = {
@@ -2362,9 +2344,85 @@ function useWindowScroll() {
   return state;
 }
 
+var __async = (__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 useClipBorad() {
+  const [text, setText] = react.useState("");
+  const updateText = react.useCallback(() => {
+    window.navigator.clipboard.readText().then((value) => {
+      setText(value);
+    });
+  }, []);
+  useEventListener("copy", updateText);
+  useEventListener("cut", updateText);
+  const copy = react.useCallback((txt) => __async(this, null, function* () {
+    setText(txt);
+    yield window.navigator.clipboard.writeText(txt);
+  }), []);
+  return [text, copy];
+}
+
+function useClickOutSide(target, handler) {
+  const savedHandler = useLatest(handler);
+  const listener = (event) => {
+    const element = getTargetElement(target);
+    if (!element) {
+      return;
+    }
+    const elements = event.composedPath();
+    if (element === event.target || elements.includes(element)) {
+      return;
+    }
+    savedHandler.current(event);
+  };
+  useEventListener("mousedown", listener, window, {
+    passive: true
+  });
+  useEventListener("touchstart", listener, window, {
+    passive: true
+  });
+}
+
+function useCycleList(list, i = 0) {
+  const [index, setIndex] = react.useState(i);
+  const set = (i2) => {
+    const length = list.length;
+    const nextIndex = ((index + i2) % length + length) % length;
+    setIndex(nextIndex);
+  };
+  const next = (i2 = 1) => {
+    set(i2);
+  };
+  const prev = (i2 = 1) => {
+    set(-i2);
+  };
+  return [list[index], next, prev];
+}
+
 exports.useActiveElement = useActiveElement;
+exports.useClickOutside = useClickOutSide;
+exports.useClipboard = useClipBorad;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
+exports.useCycleList = useCycleList;
 exports.useDarkMode = useDarkMode;
 exports.useDebounce = useDebounce;
 exports.useDebounceFn = useDebounceFn;

package/index.d.ts

@@ -92,7 +92,7 @@ interface UseDarkOptions<T> {
 }
 declare function useDarkMode<T extends string | "light" | "dark">(options?: UseDarkOptions<T>): readonly [T | null, react.Dispatch<react.SetStateAction<T | null>>];
 
-declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
+declare function useMediaQuery(query: string, serverFallback?: boolean): boolean;
 
 declare function usePreferredDark(defaultState?: boolean): boolean;
 
@@ -702,4 +702,14 @@ interface State {
 }
 declare function useWindowScroll(): State;
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, 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$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare function useClipBorad(): readonly [
+    string,
+    (txt: string) => Promise<void>
+];
+
+declare type EventType = MouseEvent | TouchEvent;
+declare function useClickOutSide(target: BasicTarget, handler: (evt: EventType) => void): void;
+
+declare function useCycleList<T>(list: T[], i?: number): readonly [T, (i?: number) => void, (i?: number) => void];
+
+export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, 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$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useLayoutEffect, useCallback, useReducer, useMemo } from 'react';
+import { useRef, useEffect, useState, useLayoutEffect, useCallback, useReducer, useMemo, useSyncExternalStore } from 'react';
 import { throttle, debounce, isEqual } from 'lodash';
 
 function usePrevious(state) {
@@ -9,7 +9,7 @@ function usePrevious(state) {
   return ref.current;
 }
 
-var __async$1 = (__this, __arguments, generator) => {
+var __async$2 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -32,7 +32,7 @@ var __async$1 = (__this, __arguments, generator) => {
 function useMarkdown(filepath) {
   const [content, setContent] = useState("");
   useEffect(() => {
-    const getContent = () => __async$1(this, null, function* () {
+    const getContent = () => __async$2(this, null, function* () {
       const data = yield (yield fetch(filepath)).text();
       setContent(data);
     });
@@ -227,47 +227,29 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
-const getInitialState = (query, defaultState) => {
-  if (isBrowser) {
-    return window.matchMedia(query).matches;
-  }
-  if (defaultState !== void 0) {
-    return defaultState;
-  }
-  if (process.env.NODE_ENV !== "production") {
-    console.warn(
-      "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
-    );
-  }
-  return false;
-};
-function useMediaQuery(query, defaultState) {
-  const [state, setState] = useState(getInitialState(query, defaultState));
-  useEffect(() => {
-    let mounted = true;
-    const mql = window.matchMedia(query);
-    const onChange = () => {
-      if (!mounted) {
-        return;
-      }
-      setState(!!mql.matches);
-    };
-    if ("addEventListener" in mql) {
-      mql.addEventListener("change", onChange);
-    } else {
-      mql.addListener(onChange);
-    }
-    setState(mql.matches);
-    return () => {
-      mounted = false;
-      if ("removeEventListener" in mql) {
-        mql.removeEventListener("change", onChange);
-      } else {
-        mql.removeListener(onChange);
+function useMediaQuery(query, serverFallback) {
+  const getServerSnapshot = serverFallback !== void 0 ? () => serverFallback : void 0;
+  const [getSnapshot, subscribe] = useMemo(() => {
+    const mediaQueryList = window.matchMedia(query);
+    return [
+      () => mediaQueryList.matches,
+      (notify) => {
+        try {
+          mediaQueryList.addEventListener("change", notify);
+        } catch (e) {
+          mediaQueryList.addListener(notify);
+        }
+        return () => {
+          try {
+            mediaQueryList.removeEventListener("change", notify);
+          } catch (e) {
+            mediaQueryList.removeListener(notify);
+          }
+        };
       }
-    };
+    ];
   }, [query]);
-  return state;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
 function usePreferredDark(defaultState) {
@@ -1783,7 +1765,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
+var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -1814,7 +1796,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
   }));
   const di = state[3][direction];
   useUpdateEffect(() => {
-    const fn = () => __async(this, null, function* () {
+    const fn = () => __async$1(this, null, function* () {
       var _a2, _b2;
       const element = getTargetElement(target);
       const previous = {
@@ -2358,4 +2340,77 @@ function useWindowScroll() {
   return state;
 }
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, 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 };
+var __async = (__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 useClipBorad() {
+  const [text, setText] = useState("");
+  const updateText = useCallback(() => {
+    window.navigator.clipboard.readText().then((value) => {
+      setText(value);
+    });
+  }, []);
+  useEventListener("copy", updateText);
+  useEventListener("cut", updateText);
+  const copy = useCallback((txt) => __async(this, null, function* () {
+    setText(txt);
+    yield window.navigator.clipboard.writeText(txt);
+  }), []);
+  return [text, copy];
+}
+
+function useClickOutSide(target, handler) {
+  const savedHandler = useLatest(handler);
+  const listener = (event) => {
+    const element = getTargetElement(target);
+    if (!element) {
+      return;
+    }
+    const elements = event.composedPath();
+    if (element === event.target || elements.includes(element)) {
+      return;
+    }
+    savedHandler.current(event);
+  };
+  useEventListener("mousedown", listener, window, {
+    passive: true
+  });
+  useEventListener("touchstart", listener, window, {
+    passive: true
+  });
+}
+
+function useCycleList(list, i = 0) {
+  const [index, setIndex] = useState(i);
+  const set = (i2) => {
+    const length = list.length;
+    const nextIndex = ((index + i2) % length + length) % length;
+    setIndex(nextIndex);
+  };
+  const next = (i2 = 1) => {
+    set(i2);
+  };
+  const prev = (i2 = 1) => {
+    set(-i2);
+  };
+  return [list[index], next, prev];
+}
+
+export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "1.0.6-beta.1",
+  "version": "1.0.7",
   "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts",