@reactuses/core 1.0.7 → 1.1.1

package/{index.cjs → dist/index.cjs}

@@ -13,38 +13,6 @@ function usePrevious(state) {
   return ref.current;
 }
 
-var __async$2 = (__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 useMarkdown(filepath) {
-  const [content, setContent] = react.useState("");
-  react.useEffect(() => {
-    const getContent = () => __async$2(this, null, function* () {
-      const data = yield (yield fetch(filepath)).text();
-      setContent(data);
-    });
-    getContent();
-  }, [filepath]);
-  return content;
-}
-
 function useLatest(value) {
   const ref = react.useRef(value);
   react.useEffect(() => {
@@ -161,7 +129,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
   const getStoredValue = () => {
     try {
       const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw) {
+      if (raw !== void 0 && raw !== null) {
         return serializer.read(raw);
       } else {
         storage == null ? void 0 : storage.setItem(key, serializer.write(data));
@@ -231,29 +199,47 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
-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);
-          }
-        };
+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(
+      "`useMediaQuery` 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);
+      }
+    };
   }, [query]);
-  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return state;
 }
 
 function usePreferredDark(defaultState) {
@@ -268,7 +254,7 @@ function useDarkMode(options = {}) {
     storageKey = "reactuses-color-scheme",
     storage = () => isBrowser ? localStorage : void 0
   } = options;
-  const prefersDarkMode = usePreferredDark();
+  const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
   const [dark, setDark] = useStorage(storageKey, value, storage);
   react.useEffect(() => {
@@ -488,6 +474,7 @@ function off(obj, ...args) {
     );
   }
 }
+const defaultWindow = isBrowser ? window : void 0;
 
 function getTargetElement(target, defaultElement) {
   if (!isBrowser) {
@@ -1533,15 +1520,15 @@ function usePageLeave() {
     const from = event.relatedTarget || event.toElement;
     setIsLeft(!from);
   };
-  useEventListener("mouseout", handler, window, { passive: true });
-  useEventListener("mouseleave", handler, document, { passive: true });
-  useEventListener("mouseenter", handler, document, { passive: true });
+  useEventListener("mouseout", handler, () => window, { passive: true });
+  useEventListener("mouseleave", handler, () => document, { passive: true });
+  useEventListener("mouseenter", handler, () => document, { passive: true });
   return isLeft;
 }
 
 function useDocumentVisibility() {
   const [visible, setVisible] = react.useState(() => {
-    if (!document) {
+    if (typeof document === "undefined") {
       return "visible";
     } else {
       return document.visibilityState;
@@ -1552,7 +1539,7 @@ function useDocumentVisibility() {
     () => {
       setVisible(document.visibilityState);
     },
-    document
+    () => document
   );
   return visible;
 }
@@ -1647,7 +1634,7 @@ function useFileDialog(options = {}) {
   const [files, setFiles] = react.useState(null);
   const inputRef = react.useRef();
   const initFn = react.useCallback(() => {
-    if (!document) {
+    if (typeof document === "undefined") {
       return void 0;
     }
     const input = document.createElement("input");
@@ -1865,8 +1852,8 @@ function useMousePressed(target, options = {}) {
     setSourceType(null);
   }, []);
   useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
-  useEventListener("mouseleave", onReleased, window, { passive: true });
-  useEventListener("mouseup", onReleased, window, { passive: true });
+  useEventListener("mouseleave", onReleased, () => window, { passive: true });
+  useEventListener("mouseup", onReleased, () => window, { passive: true });
   useMount(() => {
     const element = getTargetElement(target);
     if (drag) {
@@ -2102,8 +2089,8 @@ function useVirtualList(list = [], options) {
 }
 
 function usePreferredColorScheme(defaultState) {
-  const isLight = useMediaQuery("(prefers-color-scheme: light)");
-  const isDark = useMediaQuery("(prefers-color-scheme: dark)");
+  const isLight = useMediaQuery("(prefers-color-scheme: light)", false);
+  const isDark = useMediaQuery("(prefers-color-scheme: dark)", false);
   if (!isBrowser && defaultState) {
     return defaultState;
   }
@@ -2111,9 +2098,9 @@ function usePreferredColorScheme(defaultState) {
 }
 
 function usePreferredContrast(defaultState) {
-  const isMore = useMediaQuery("(prefers-contrast: more)");
-  const isLess = useMediaQuery("(prefers-contrast: less)");
-  const isCustom = useMediaQuery("(prefers-contrast: custom)");
+  const isMore = useMediaQuery("(prefexrs-contrast: more)", false);
+  const isLess = useMediaQuery("(prefers-contrast: less)", false);
+  const isCustom = useMediaQuery("(prefers-contrast: custom)", false);
   if (!isBrowser && defaultState) {
     return defaultState;
   }
@@ -2125,14 +2112,17 @@ function useActiveElement() {
   const listener = react.useCallback(() => {
     setActive(window == null ? void 0 : window.document.activeElement);
   }, []);
-  useEventListener("blur", listener, window, true);
-  useEventListener("focus", listener, window, true);
+  useEventListener("blur", listener, () => window, true);
+  useEventListener("focus", listener, () => window, true);
   return active;
 }
 
 function useDraggable(target, options = {}) {
   var _a, _b;
-  const draggingElement = getTargetElement(options.draggingElement, window);
+  const draggingElement = getTargetElement(
+    options.draggingElement,
+    defaultWindow
+  );
   const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
   const [position, setPositon] = react.useState(
     (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
@@ -2294,7 +2284,7 @@ function useElementVisibility(target, options = {}) {
 
 function useWindowsFocus() {
   const [focused, setFocused] = react.useState(() => {
-    if (!window) {
+    if (!isBrowser) {
       return false;
     }
     return window.document.hasFocus();
@@ -2393,10 +2383,10 @@ function useClickOutSide(target, handler) {
     }
     savedHandler.current(event);
   };
-  useEventListener("mousedown", listener, window, {
+  useEventListener("mousedown", listener, () => window, {
     passive: true
   });
-  useEventListener("touchstart", listener, window, {
+  useEventListener("touchstart", listener, () => window, {
     passive: true
   });
 }
@@ -2451,7 +2441,6 @@ exports.useKeyModifier = useKeyModifier;
 exports.useLatest = useLatest;
 exports.useLocalStorage = useLocalStorage;
 exports.useLongPress = useLongPress;
-exports.useMarkdown = useMarkdown;
 exports.useMediaDevices = useMediaDevices$1;
 exports.useMediaQuery = useMediaQuery;
 exports.useMount = useMount;

package/{index.d.ts → dist/index.d.ts}

@@ -1,12 +1,10 @@
 import * as react from 'react';
-import { useEffect, useLayoutEffect, Dispatch, SetStateAction, MutableRefObject, DependencyList, EffectCallback, RefObject, CSSProperties } from 'react';
+import { MutableRefObject, useEffect, useLayoutEffect, Dispatch, SetStateAction, DependencyList, EffectCallback, RefObject, CSSProperties } from 'react';
 import * as lodash from 'lodash';
 
 declare function usePrevious<T>(state: T): T | undefined;
 
-declare function useMarkdown(filepath: string): string;
-
-declare function useLatest<T>(value: T): React.MutableRefObject<T>;
+declare function useLatest<T>(value: T): MutableRefObject<T>;
 
 declare function useFirstMountState(): boolean;
 
@@ -43,9 +41,9 @@ declare function useSessionStorage(key: string, defaults: boolean, options?: Use
 declare function useSessionStorage<T>(key: string, defaults: T, options?: UseStorageOptions<T>): readonly [T | null, Dispatch<SetStateAction<T | null>>];
 declare function useSessionStorage<T = unknown>(key: string, defaults: null, options?: UseStorageOptions<T>): readonly [T | null, Dispatch<SetStateAction<T | null>>];
 
-declare type Fn = (this: any, ...args: any[]) => any;
-declare type Stoppable = [boolean, Fn, Fn];
-declare type PointerType = "mouse" | "touch" | "pen";
+type Fn = (this: any, ...args: any[]) => any;
+type Stoppable = [boolean, Fn, Fn];
+type PointerType = "mouse" | "touch" | "pen";
 interface Position {
     x: number;
     y: number;
@@ -92,7 +90,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, serverFallback?: boolean): boolean;
+declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
 
 declare function usePreferredDark(defaultState?: boolean): boolean;
 
@@ -153,11 +151,11 @@ declare function useTimeout(ms?: number, options?: UseTimeoutFnOptions): Stoppab
 
 declare function useMountedState(): () => boolean;
 
-declare type TargetValue<T> = T | undefined | null;
-declare type TargetType = HTMLElement | Element | Window | Document | EventTarget;
-declare type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
+type TargetValue<T> = T | undefined | null;
+type TargetType = HTMLElement | Element | Window | Document | EventTarget;
+type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
 
-declare type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
+type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
 declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
 declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
 declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
@@ -167,7 +165,7 @@ declare function useEventListener(eventName: string, handler: (...p: any) => voi
 
 declare function useCounter(initialValue?: number | (() => number), max?: number | null, min?: number | null): readonly [number, (newState: number | ((prev: number) => number) | (() => number)) => void, (delta?: number) => void, (delta?: number) => void, () => void];
 
-declare type RafLoopReturns = readonly [() => void, () => void, () => boolean];
+type RafLoopReturns = readonly [() => void, () => void, () => boolean];
 declare function useRafFn(callback: FrameRequestCallback, initiallyActive?: boolean): RafLoopReturns;
 
 interface IDisposable {
@@ -182,7 +180,7 @@ declare function useFavicon(href: string, baseUrl?: string, rel?: string): void;
 
 declare function useMutationObserver(callback: MutationCallback, target: BasicTarget, options?: MutationObserverInit): () => void;
 
-declare type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
+type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
 declare function useCustomCompareEffect<TDeps extends DependencyList>(effect: EffectCallback, deps: TDeps, depsEqual: DepsEqualFnType<TDeps>): void;
 
 declare function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void;
@@ -224,12 +222,12 @@ interface UseScriptTagOptions {
      */
     attrs?: Record<string, string>;
 }
-declare type Status = "idle" | "loading" | "ready" | "error";
+type Status = "idle" | "loading" | "ready" | "error";
 declare function useScriptTag(src: string, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): readonly [HTMLScriptElement | null, Status, (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>, () => void];
 
-declare type IState = PermissionState | "";
-declare type DescriptorNamePolyfill = "accelerometer" | "accessibility-events" | "ambient-light-sensor" | "background-sync" | "camera" | "clipboard-read" | "clipboard-write" | "gyroscope" | "magnetometer" | "microphone" | "notifications" | "payment-handler" | "persistent-storage" | "push" | "speaker";
-declare type GeneralPermissionDescriptor = PermissionDescriptor | {
+type IState = PermissionState | "";
+type DescriptorNamePolyfill = "accelerometer" | "accessibility-events" | "ambient-light-sensor" | "background-sync" | "camera" | "clipboard-read" | "clipboard-write" | "gyroscope" | "magnetometer" | "microphone" | "notifications" | "payment-handler" | "persistent-storage" | "push" | "speaker";
+type GeneralPermissionDescriptor = PermissionDescriptor | {
     name: DescriptorNamePolyfill;
 };
 declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor["name"]): IState;
@@ -252,7 +250,7 @@ declare function useIdle(ms?: number, initialState?: boolean, events?: (keyof Wi
 
 declare const _default$1: () => {};
 
-declare type UseTextDirectionValue = "ltr" | "rtl" | "auto";
+type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
     /**
      * CSS Selector for the target element applying to
@@ -495,7 +493,7 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
 }
 declare function useInfiniteScroll(target: BasicTarget<HTMLElement | SVGElement | Window | Document>, onLoadMore: (state: ReturnType<typeof useScroll>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
-declare type KeyModifier = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Symbol" | "SymbolLock";
+type KeyModifier = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Symbol" | "SymbolLock";
 interface UseModifierOptions {
     /**
      * Event names that will prompt update to modifier states
@@ -512,8 +510,8 @@ interface UseModifierOptions {
 }
 declare function useKeyModifier(modifier: KeyModifier, options?: UseModifierOptions): boolean;
 
-declare type IHookStateInitialSetter<S> = () => S;
-declare type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
+type IHookStateInitialSetter<S> = () => S;
+type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
 
 interface MousePressedOptions {
     /**
@@ -535,7 +533,7 @@ interface MousePressedOptions {
      */
     initialValue?: IHookStateInitAction<boolean>;
 }
-declare type MouseSourceType = "mouse" | "touch" | null;
+type MouseSourceType = "mouse" | "touch" | null;
 declare function useMousePressed(target?: BasicTarget, options?: MousePressedOptions): readonly [boolean, MouseSourceType];
 
 declare function useScrollLock(target: BasicTarget<HTMLElement | SVGElement | Window | Document>, initialState?: boolean): readonly [boolean, (flag: boolean) => void];
@@ -582,10 +580,10 @@ interface UseVirtualListReturn<T> {
 }
 declare function useVirtualList<T = any>(list: T[] | undefined, options: UseVirtualListOptions): UseVirtualListReturn<T>;
 
-declare type ColorScheme = "dark" | "light" | "no-preference";
+type ColorScheme = "dark" | "light" | "no-preference";
 declare function usePreferredColorScheme(defaultState?: ColorScheme): ColorScheme;
 
-declare type Contrast = "more" | "less" | "custom" | "no-preference";
+type Contrast = "more" | "less" | "custom" | "no-preference";
 declare function usePreferredContrast(defaultState?: Contrast): Contrast;
 
 declare function useActiveElement<T extends Element>(): T | null;
@@ -707,9 +705,9 @@ declare function useClipBorad(): readonly [
     (txt: string) => Promise<void>
 ];
 
-declare type EventType = MouseEvent | TouchEvent;
+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 };
+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, _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 → dist/index.mjs}

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useLayoutEffect, useCallback, useReducer, useMemo, useSyncExternalStore } from 'react';
+import { useRef, useEffect, useLayoutEffect, useCallback, useState, useReducer, useMemo } from 'react';
 import { throttle, debounce, isEqual } from 'lodash';
 
 function usePrevious(state) {
@@ -9,38 +9,6 @@ function usePrevious(state) {
   return ref.current;
 }
 
-var __async$2 = (__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 useMarkdown(filepath) {
-  const [content, setContent] = useState("");
-  useEffect(() => {
-    const getContent = () => __async$2(this, null, function* () {
-      const data = yield (yield fetch(filepath)).text();
-      setContent(data);
-    });
-    getContent();
-  }, [filepath]);
-  return content;
-}
-
 function useLatest(value) {
   const ref = useRef(value);
   useEffect(() => {
@@ -157,7 +125,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
   const getStoredValue = () => {
     try {
       const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw) {
+      if (raw !== void 0 && raw !== null) {
         return serializer.read(raw);
       } else {
         storage == null ? void 0 : storage.setItem(key, serializer.write(data));
@@ -227,29 +195,47 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
-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);
-          }
-        };
+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(
+      "`useMediaQuery` 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);
+      }
+    };
   }, [query]);
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return state;
 }
 
 function usePreferredDark(defaultState) {
@@ -264,7 +250,7 @@ function useDarkMode(options = {}) {
     storageKey = "reactuses-color-scheme",
     storage = () => isBrowser ? localStorage : void 0
   } = options;
-  const prefersDarkMode = usePreferredDark();
+  const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
   const [dark, setDark] = useStorage(storageKey, value, storage);
   useEffect(() => {
@@ -484,6 +470,7 @@ function off(obj, ...args) {
     );
   }
 }
+const defaultWindow = isBrowser ? window : void 0;
 
 function getTargetElement(target, defaultElement) {
   if (!isBrowser) {
@@ -1529,15 +1516,15 @@ function usePageLeave() {
     const from = event.relatedTarget || event.toElement;
     setIsLeft(!from);
   };
-  useEventListener("mouseout", handler, window, { passive: true });
-  useEventListener("mouseleave", handler, document, { passive: true });
-  useEventListener("mouseenter", handler, document, { passive: true });
+  useEventListener("mouseout", handler, () => window, { passive: true });
+  useEventListener("mouseleave", handler, () => document, { passive: true });
+  useEventListener("mouseenter", handler, () => document, { passive: true });
   return isLeft;
 }
 
 function useDocumentVisibility() {
   const [visible, setVisible] = useState(() => {
-    if (!document) {
+    if (typeof document === "undefined") {
       return "visible";
     } else {
       return document.visibilityState;
@@ -1548,7 +1535,7 @@ function useDocumentVisibility() {
     () => {
       setVisible(document.visibilityState);
     },
-    document
+    () => document
   );
   return visible;
 }
@@ -1643,7 +1630,7 @@ function useFileDialog(options = {}) {
   const [files, setFiles] = useState(null);
   const inputRef = useRef();
   const initFn = useCallback(() => {
-    if (!document) {
+    if (typeof document === "undefined") {
       return void 0;
     }
     const input = document.createElement("input");
@@ -1861,8 +1848,8 @@ function useMousePressed(target, options = {}) {
     setSourceType(null);
   }, []);
   useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
-  useEventListener("mouseleave", onReleased, window, { passive: true });
-  useEventListener("mouseup", onReleased, window, { passive: true });
+  useEventListener("mouseleave", onReleased, () => window, { passive: true });
+  useEventListener("mouseup", onReleased, () => window, { passive: true });
   useMount(() => {
     const element = getTargetElement(target);
     if (drag) {
@@ -2098,8 +2085,8 @@ function useVirtualList(list = [], options) {
 }
 
 function usePreferredColorScheme(defaultState) {
-  const isLight = useMediaQuery("(prefers-color-scheme: light)");
-  const isDark = useMediaQuery("(prefers-color-scheme: dark)");
+  const isLight = useMediaQuery("(prefers-color-scheme: light)", false);
+  const isDark = useMediaQuery("(prefers-color-scheme: dark)", false);
   if (!isBrowser && defaultState) {
     return defaultState;
   }
@@ -2107,9 +2094,9 @@ function usePreferredColorScheme(defaultState) {
 }
 
 function usePreferredContrast(defaultState) {
-  const isMore = useMediaQuery("(prefers-contrast: more)");
-  const isLess = useMediaQuery("(prefers-contrast: less)");
-  const isCustom = useMediaQuery("(prefers-contrast: custom)");
+  const isMore = useMediaQuery("(prefexrs-contrast: more)", false);
+  const isLess = useMediaQuery("(prefers-contrast: less)", false);
+  const isCustom = useMediaQuery("(prefers-contrast: custom)", false);
   if (!isBrowser && defaultState) {
     return defaultState;
   }
@@ -2121,14 +2108,17 @@ function useActiveElement() {
   const listener = useCallback(() => {
     setActive(window == null ? void 0 : window.document.activeElement);
   }, []);
-  useEventListener("blur", listener, window, true);
-  useEventListener("focus", listener, window, true);
+  useEventListener("blur", listener, () => window, true);
+  useEventListener("focus", listener, () => window, true);
   return active;
 }
 
 function useDraggable(target, options = {}) {
   var _a, _b;
-  const draggingElement = getTargetElement(options.draggingElement, window);
+  const draggingElement = getTargetElement(
+    options.draggingElement,
+    defaultWindow
+  );
   const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
   const [position, setPositon] = useState(
     (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
@@ -2290,7 +2280,7 @@ function useElementVisibility(target, options = {}) {
 
 function useWindowsFocus() {
   const [focused, setFocused] = useState(() => {
-    if (!window) {
+    if (!isBrowser) {
       return false;
     }
     return window.document.hasFocus();
@@ -2389,10 +2379,10 @@ function useClickOutSide(target, handler) {
     }
     savedHandler.current(event);
   };
-  useEventListener("mousedown", listener, window, {
+  useEventListener("mousedown", listener, () => window, {
     passive: true
   });
-  useEventListener("touchstart", listener, window, {
+  useEventListener("touchstart", listener, () => window, {
     passive: true
   });
 }
@@ -2413,4 +2403,4 @@ function useCycleList(list, i = 0) {
   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 };
+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, 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,9 +1,15 @@
 {
   "name": "@reactuses/core",
-  "version": "1.0.7",
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
+  "version": "1.1.1",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
   "sideEffects": false,
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
@@ -15,21 +21,59 @@
   "bugs": {
     "url": "https://github.com/childrentime/reactuse/issues"
   },
+  "scripts": {
+    "lint": "eslint \"{hooks,tests}/**/*.{ts,tsx}\"",
+    "build": "esno scripts/build.ts",
+    "build:rollup": "cross-env NODE_OPTIONS=\"--max-old-space-size=6144\" rollup -c",
+    "publish:ci": "esno scripts/publish.ts",
+    "release:prepare": "bump",
+    "release": "esno scripts/release.ts",
+    "test": "jest",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@testing-library/react": "^13.4.0",
+    "lodash": "^4.17.21",
+    "screenfull": "^5.0.0"
+  },
   "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@jsdevtools/version-bump-prompt": "^6.1.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.184",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
+    "babel-jest": "^29.0.2",
+    "consola": "^2.15.3",
+    "cross-env": "^7.0.3",
+    "esbuild-register": "^3.4.1",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.5",
-    "eslint-plugin-react-hooks": "^4.6.0"
-  },
-  "scripts": {
-    "lint": "eslint \"{hooks,tests}/**/*.{ts,tsx}\""
-  },
-  "dependencies": {
-    "lodash": "^4.17.21",
-    "screenfull": "^5.0.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "esno": "^0.16.3",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^10.1.0",
+    "jest": "^29.0.2",
+    "jest-environment-jsdom": "^29.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.79.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-esbuild": "^4.10.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.2"
   },
   "keywords": [
     "react",