@reactuses/core 1.1.3 → 1.1.4

package/dist/index.cjs

@@ -2,27 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var React = require('react');
 var lodash = require('lodash');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 function usePrevious(state) {
-  const ref = react.useRef();
-  react.useEffect(() => {
+  const ref = React.useRef();
+  React.useEffect(() => {
     ref.current = state;
   });
   return ref.current;
 }
 
 function useLatest(value) {
-  const ref = react.useRef(value);
-  react.useEffect(() => {
+  const ref = React.useRef(value);
+  React.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref;
 }
 
 function useFirstMountState() {
-  const isFirst = react.useRef(true);
+  const isFirst = React.useRef(true);
   if (isFirst.current) {
     isFirst.current = false;
     return true;
@@ -39,9 +43,9 @@ const createUpdateEffect = (hook) => (effect, deps) => {
   }, deps);
 };
 
-var useUpdateEffect = createUpdateEffect(react.useEffect);
+var useUpdateEffect = createUpdateEffect(React.useEffect);
 
-var useUpdateLayoutEffect = createUpdateEffect(react.useLayoutEffect);
+var useUpdateLayoutEffect = createUpdateEffect(React.useLayoutEffect);
 
 var _a;
 const isFunction = (val) => typeof val === "function";
@@ -51,12 +55,13 @@ const isNavigator = typeof navigator !== "undefined";
 const noop = () => {
 };
 const isIOS = isBrowser && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+!React__default["default"].useId;
 
 function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
 
-const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
 function useEvent(fn) {
   if (isDev) {
@@ -66,11 +71,11 @@ function useEvent(fn) {
       );
     }
   }
-  const handlerRef = react.useRef(fn);
+  const handlerRef = React.useRef(fn);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = fn;
   }, [fn]);
-  return react.useCallback((...args) => {
+  return React.useCallback((...args) => {
     const fn2 = handlerRef.current;
     return fn2(...args);
   }, []);
@@ -139,7 +144,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
       onError(e);
     }
   };
-  const [state, setState] = react.useState(() => getStoredValue());
+  const [state, setState] = React.useState(() => getStoredValue());
   useUpdateEffect(() => {
     setState(getStoredValue());
   }, [key]);
@@ -181,13 +186,13 @@ function useSessionStorage(key, defaults, options = {}) {
 
 const toggleReducer = (state, nextValue) => typeof nextValue === "boolean" ? nextValue : !state;
 function useToggle(initialValue) {
-  return react.useReducer(toggleReducer, initialValue);
+  return React.useReducer(toggleReducer, initialValue);
 }
 
 function useInterval(callback, delay, options) {
   const immediate = options == null ? void 0 : options.immediate;
   const savedCallback = useLatest(callback);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (immediate) {
       savedCallback.current();
     }
@@ -214,8 +219,8 @@ const getInitialState = (query, defaultState) => {
   return false;
 };
 function useMediaQuery(query, defaultState) {
-  const [state, setState] = react.useState(getInitialState(query, defaultState));
-  react.useEffect(() => {
+  const [state, setState] = React.useState(getInitialState(query, defaultState));
+  React.useEffect(() => {
     let mounted = true;
     const mql = window.matchMedia(query);
     const onChange = () => {
@@ -257,7 +262,7 @@ function useDarkMode(options = {}) {
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
   const [dark, setDark] = useStorage(storageKey, value, storage);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const element = window == null ? void 0 : window.document.querySelector(selector);
     if (!element) {
       return;
@@ -282,7 +287,7 @@ function useMount(fn) {
       );
     }
   }
-  react.useEffect(() => {
+  React.useEffect(() => {
     fn == null ? void 0 : fn();
   }, []);
 }
@@ -296,7 +301,7 @@ function useUnmount(fn) {
     }
   }
   const fnRef = useLatest(fn);
-  react.useEffect(
+  React.useEffect(
     () => () => {
       fnRef.current();
     },
@@ -313,7 +318,7 @@ function useThrottleFn(fn, wait, options) {
     }
   }
   const fnRef = useLatest(fn);
-  const throttled = react.useMemo(
+  const throttled = React.useMemo(
     () => lodash.throttle(
       (...args) => {
         return fnRef.current(...args);
@@ -334,7 +339,7 @@ function useThrottleFn(fn, wait, options) {
 }
 
 function useThrottle(value, wait, options) {
-  const [throttled, setThrottled] = react.useState(value);
+  const [throttled, setThrottled] = React.useState(value);
   const { run } = useThrottleFn(
     () => {
       setThrottled(value);
@@ -342,7 +347,7 @@ function useThrottle(value, wait, options) {
     wait,
     options
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     run();
   }, [run, value]);
   return throttled;
@@ -357,7 +362,7 @@ function useDebounceFn(fn, wait, options) {
     }
   }
   const fnRef = useLatest(fn);
-  const debounced = react.useMemo(
+  const debounced = React.useMemo(
     () => lodash.debounce(
       (...args) => {
         return fnRef.current(...args);
@@ -378,7 +383,7 @@ function useDebounceFn(fn, wait, options) {
 }
 
 function useDebounce(value, wait, options) {
-  const [debounced, setDebounced] = react.useState(value);
+  const [debounced, setDebounced] = React.useState(value);
   const { run } = useDebounceFn(
     () => {
       setDebounced(value);
@@ -386,16 +391,16 @@ function useDebounce(value, wait, options) {
     wait,
     options
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     run();
   }, [run, value]);
   return debounced;
 }
 
 function useRafState(initialState) {
-  const frame = react.useRef(0);
-  const [state, setState] = react.useState(initialState);
-  const setRafState = react.useCallback((value) => {
+  const frame = React.useRef(0);
+  const [state, setState] = React.useState(initialState);
+  const setRafState = React.useCallback((value) => {
     cancelAnimationFrame(frame.current);
     frame.current = requestAnimationFrame(() => {
       setState(value);
@@ -409,15 +414,15 @@ function useRafState(initialState) {
 
 const updateReducer = (num) => (num + 1) % 1e6;
 function useUpdate() {
-  const [, update] = react.useReducer(updateReducer, 0);
+  const [, update] = React.useReducer(updateReducer, 0);
   return update;
 }
 
 function useTimeoutFn(cb, interval, options = {}) {
   const { immediate = true } = options;
-  const [pending, setPending] = react.useState(false);
+  const [pending, setPending] = React.useState(false);
   const savedCallback = useLatest(cb);
-  const timer = react.useRef();
+  const timer = React.useRef();
   const stop = useEvent(() => {
     setPending(false);
     if (timer.current) {
@@ -434,7 +439,7 @@ function useTimeoutFn(cb, interval, options = {}) {
     }, interval);
     setPending(true);
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (immediate) {
       start();
     }
@@ -449,9 +454,9 @@ function useTimeout(ms = 0, options = {}) {
 }
 
 function useMountedState() {
-  const mountedRef = react.useRef(false);
-  const get = react.useCallback(() => mountedRef.current, []);
-  react.useEffect(() => {
+  const mountedRef = React.useRef(false);
+  const get = React.useCallback(() => mountedRef.current, []);
+  React.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -513,11 +518,11 @@ function useCustomCompareEffect(effect, deps, depsEqual) {
       );
     }
   }
-  const ref = react.useRef(void 0);
+  const ref = React.useRef(void 0);
   if (!ref.current || !depsEqual(deps, ref.current)) {
     ref.current = deps;
   }
-  react.useEffect(effect, ref.current);
+  React.useEffect(effect, ref.current);
 }
 
 const isPrimitive = (val) => val !== Object(val);
@@ -570,7 +575,7 @@ function useCounter(initialValue = 0, max = null, min = null) {
     }
     return init;
   };
-  const [value, setValue] = react.useState(initFunc);
+  const [value, setValue] = React.useState(initFunc);
   const set = useEvent(
     (newState) => {
       setValue((v) => {
@@ -598,10 +603,10 @@ function useCounter(initialValue = 0, max = null, min = null) {
 }
 
 function useRafFn(callback, initiallyActive = true) {
-  const raf = react.useRef(null);
-  const rafActivity = react.useRef(false);
+  const raf = React.useRef(null);
+  const rafActivity = React.useRef(false);
   const rafCallback = useLatest(callback);
-  const step = react.useCallback(
+  const step = React.useCallback(
     (time) => {
       if (rafActivity.current) {
         rafCallback.current(time);
@@ -610,7 +615,7 @@ function useRafFn(callback, initiallyActive = true) {
     },
     [rafCallback]
   );
-  const result = react.useMemo(
+  const result = React.useMemo(
     () => [
       () => {
         if (rafActivity.current) {
@@ -628,7 +633,7 @@ function useRafFn(callback, initiallyActive = true) {
     ],
     [step]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (initiallyActive) {
       result[1]();
     }
@@ -638,8 +643,8 @@ function useRafFn(callback, initiallyActive = true) {
 }
 
 function useEventEmitter() {
-  const listeners = react.useRef([]);
-  const _event = react.useRef((listener) => {
+  const listeners = React.useRef([]);
+  const _event = React.useRef((listener) => {
     listeners.current.push(listener);
     const disposable = {
       dispose: () => {
@@ -655,7 +660,7 @@ function useEventEmitter() {
     };
     return disposable;
   });
-  const _disposed = react.useRef(false);
+  const _disposed = React.useRef(false);
   const fire = (arg1, arg2) => {
     const queue = [];
     for (let i = 0; i < listeners.current.length; i++) {
@@ -675,7 +680,7 @@ function useEventEmitter() {
 }
 
 function useFavicon(href, baseUrl = "", rel = "icon") {
-  react.useEffect(() => {
+  React.useEffect(() => {
     const url = `${baseUrl}${href}`;
     const element = document.head.querySelectorAll(
       `link[rel*="${rel}"]`
@@ -692,8 +697,8 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
 
 function useMutationObserver(callback, target, options = {}) {
   const callbackRef = useLatest(callback);
-  const observerRef = react.useRef();
-  const stop = react.useCallback(() => {
+  const observerRef = React.useRef();
+  const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
@@ -711,7 +716,7 @@ function useMutationObserver(callback, target, options = {}) {
 }
 
 function useTitle(title) {
-  react.useEffect(() => {
+  React.useEffect(() => {
     document.title = title;
   }, [title]);
 }
@@ -728,9 +733,9 @@ function useScriptTag(src, onLoaded = noop, options = {}) {
     defer,
     attrs = {}
   } = options;
-  const scriptTag = react.useRef(null);
-  const _promise = react.useRef(null);
-  const [status, setStatus] = react.useState(src ? "loading" : "idle");
+  const scriptTag = React.useRef(null);
+  const _promise = React.useRef(null);
+  const [status, setStatus] = React.useState(src ? "loading" : "idle");
   const loadScript = (waitForScriptLoad) => new Promise((resolve, reject) => {
     const resolveWithElement = (el2) => {
       scriptTag.current = el2;
@@ -831,8 +836,8 @@ function useScriptTag(src, onLoaded = noop, options = {}) {
 }
 
 function usePermission(permissionDesc) {
-  const [state, setState] = react.useState("");
-  react.useEffect(() => {
+  const [state, setState] = React.useState("");
+  React.useEffect(() => {
     const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
     let mounted = true;
     let permissionStatus = null;
@@ -871,9 +876,9 @@ const preventDefault$1 = (ev) => {
   }
 };
 function useLongPress(callback, { isPreventDefault = true, delay = 300 } = {}) {
-  const timeout = react.useRef();
-  const target = react.useRef();
-  const start = react.useCallback(
+  const timeout = React.useRef();
+  const target = React.useRef();
+  const start = React.useCallback(
     (event) => {
       if (isPreventDefault && event.target) {
         on(event.target, "touchend", preventDefault$1, { passive: false });
@@ -883,7 +888,7 @@ function useLongPress(callback, { isPreventDefault = true, delay = 300 } = {}) {
     },
     [callback, delay, isPreventDefault]
   );
-  const clear = react.useCallback(() => {
+  const clear = React.useCallback(() => {
     timeout.current && clearTimeout(timeout.current);
     if (isPreventDefault && target.current) {
       off(target.current, "touchend", preventDefault$1);
@@ -899,8 +904,8 @@ function useLongPress(callback, { isPreventDefault = true, delay = 300 } = {}) {
 }
 
 function useObjectUrl(object) {
-  const [url, setUrl] = react.useState();
-  react.useEffect(() => {
+  const [url, setUrl] = React.useState();
+  React.useEffect(() => {
     if (object) {
       setUrl(URL.createObjectURL(object));
     }
@@ -923,8 +928,8 @@ const defaultEvents$1 = [
 ];
 const oneMinute = 6e4;
 function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1) {
-  const [state, setState] = react.useState(initialState);
-  react.useEffect(() => {
+  const [state, setState] = React.useState(initialState);
+  React.useEffect(() => {
     let mounted = true;
     let timeout;
     let localState = state;
@@ -963,8 +968,8 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
 }
 
 function useMediaDevices() {
-  const [state, setState] = react.useState({ devices: [] });
-  react.useEffect(() => {
+  const [state, setState] = React.useState({ devices: [] });
+  React.useEffect(() => {
     let mounted = true;
     const onChange = () => {
       navigator.mediaDevices.enumerateDevices().then((devices) => {
@@ -1002,7 +1007,7 @@ function useTextDirection(options = {}) {
       return initialValue;
     }
   };
-  const [value, setValue] = react.useState(getValue());
+  const [value, setValue] = React.useState(getValue());
   const set = (value2) => {
     var _a, _b;
     if (!isBrowser) {
@@ -1071,10 +1076,10 @@ function useMouse(target) {
 
 function useFps(options) {
   var _a;
-  const [fps, setFps] = react.useState(0);
+  const [fps, setFps] = React.useState(0);
   const every = (_a = options == null ? void 0 : options.every) != null ? _a : 10;
-  const last = react.useRef(performance.now());
-  const ticks = react.useRef(0);
+  const last = React.useRef(performance.now());
+  const ticks = React.useRef(0);
   useRafFn(() => {
     ticks.current += 1;
     if (ticks.current >= every) {
@@ -1105,20 +1110,20 @@ function useGeolocation(options = {}) {
     maximumAge = 3e4,
     timeout = 27e3
   } = options;
-  const [coordinates, setCoordinates] = react.useState(initCoord);
-  const [locatedAt, setLocatedAt] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const updatePosition = react.useCallback((position) => {
+  const [coordinates, setCoordinates] = React.useState(initCoord);
+  const [locatedAt, setLocatedAt] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const updatePosition = React.useCallback((position) => {
     setCoordinates(position.coords);
     setLocatedAt(position.timestamp);
     setError(null);
   }, []);
-  const updateError = react.useCallback((err) => {
+  const updateError = React.useCallback((err) => {
     setCoordinates(initCoord);
     setLocatedAt(null);
     setError(err);
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     navigator.geolocation.getCurrentPosition(updatePosition, updateError);
     const watchId = navigator.geolocation.watchPosition(
       updatePosition,
@@ -1337,7 +1342,7 @@ function useFullscreen(target, options) {
   const { onExit, onEnter } = options || {};
   const onExitRef = useLatest(onExit);
   const onEnterRef = useLatest(onEnter);
-  const [state, setState] = react.useState(false);
+  const [state, setState] = React.useState(false);
   const onChange = () => {
     var _a, _b;
     if (screenfull.isEnabled) {
@@ -1411,8 +1416,8 @@ function getConnectionState(previousState) {
   };
 }
 function useNetwork() {
-  const [state, setState] = react.useState(getConnectionState);
-  react.useEffect(() => {
+  const [state, setState] = React.useState(getConnectionState);
+  React.useEffect(() => {
     const handleStateChange = () => {
       setState(getConnectionState);
     };
@@ -1442,8 +1447,8 @@ const defaultState = {
   type: "landscape-primary"
 };
 function useOrientation(initialState = defaultState) {
-  const [state, setState] = react.useState(initialState);
-  react.useEffect(() => {
+  const [state, setState] = React.useState(initialState);
+  React.useEffect(() => {
     const screen = window.screen;
     let mounted = true;
     const onChange = () => {
@@ -1490,8 +1495,8 @@ function useOrientation(initialState = defaultState) {
 
 function useIntersectionObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
-  const observerRef = react.useRef();
-  const stop = react.useCallback(() => {
+  const observerRef = React.useRef();
+  const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
@@ -1512,7 +1517,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function usePageLeave() {
-  const [isLeft, setIsLeft] = react.useState(false);
+  const [isLeft, setIsLeft] = React.useState(false);
   const handler = (event) => {
     if (!window)
       return;
@@ -1527,7 +1532,7 @@ function usePageLeave() {
 }
 
 function useDocumentVisibility() {
-  const [visible, setVisible] = react.useState(() => {
+  const [visible, setVisible] = React.useState(() => {
     if (typeof document === "undefined") {
       return "visible";
     } else {
@@ -1546,8 +1551,8 @@ function useDocumentVisibility() {
 
 function useResizeObserver(target, callback, options = {}) {
   const savedCallback = useLatest(callback);
-  const observerRef = react.useRef();
-  const stop = react.useCallback(() => {
+  const observerRef = React.useRef();
+  const stop = React.useCallback(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
@@ -1565,8 +1570,8 @@ function useResizeObserver(target, callback, options = {}) {
 }
 
 function useDropZone(target, onDrop) {
-  const [over, setOver] = react.useState(false);
-  const counter = react.useRef(0);
+  const [over, setOver] = React.useState(false);
+  const counter = React.useRef(0);
   const element = getTargetElement(target);
   useEventListener(
     "dragenter",
@@ -1631,9 +1636,9 @@ const DEFAULT_OPTIONS = {
   accept: "*"
 };
 function useFileDialog(options = {}) {
-  const [files, setFiles] = react.useState(null);
-  const inputRef = react.useRef();
-  const initFn = react.useCallback(() => {
+  const [files, setFiles] = React.useState(null);
+  const inputRef = React.useRef();
+  const initFn = React.useCallback(() => {
     if (typeof document === "undefined") {
       return void 0;
     }
@@ -1683,16 +1688,16 @@ function useScroll(target, options = {}) {
       passive: true
     }
   } = options;
-  const [x, setX] = react.useState(0);
-  const [y, setY] = react.useState(0);
-  const [isScrolling, setIsScrolling] = react.useState(false);
-  const [arrivedState, setArrivedState] = react.useState({
+  const [x, setX] = React.useState(0);
+  const [y, setY] = React.useState(0);
+  const [isScrolling, setIsScrolling] = React.useState(false);
+  const [arrivedState, setArrivedState] = React.useState({
     left: true,
     right: false,
     top: true,
     bottom: false
   });
-  const [directions, setDirections] = react.useState({
+  const [directions, setDirections] = React.useState({
     left: false,
     right: false,
     top: false,
@@ -1814,7 +1819,7 @@ const defaultEvents = [
 ];
 function useKeyModifier(modifier, options = {}) {
   const { events = defaultEvents, initial = false } = options;
-  const [state, setState] = react.useState(initial);
+  const [state, setState] = React.useState(initial);
   useMount(() => {
     events.forEach((listenEvent) => {
       on(document, listenEvent, (evt) => {
@@ -1838,16 +1843,16 @@ function useKeyModifier(modifier, options = {}) {
 
 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 onPressed = react.useCallback(
+  const [pressed, setPressed] = React.useState(initialValue);
+  const [sourceType, setSourceType] = React.useState(null);
+  const onPressed = React.useCallback(
     (srcType) => () => {
       setPressed(true);
       setSourceType(srcType);
     },
     []
   );
-  const onReleased = react.useCallback(() => {
+  const onReleased = React.useCallback(() => {
     setPressed(false);
     setSourceType(null);
   }, []);
@@ -1905,8 +1910,8 @@ function preventDefault(rawEvent) {
   return false;
 }
 function useScrollLock(target, initialState = false) {
-  const [locked, setLocked] = react.useState(initialState);
-  const initialOverflowRef = react.useRef("scroll");
+  const [locked, setLocked] = React.useState(initialState);
+  const initialOverflowRef = React.useRef("scroll");
   useMount(() => {
     const element = getTargetElement(target);
     if (element) {
@@ -1950,8 +1955,8 @@ function useScrollLock(target, initialState = false) {
 
 function useElementSize(target, options = {}) {
   const { box = "content-box" } = options;
-  const [width, setWidth] = react.useState(0);
-  const [height, setHeight] = react.useState(0);
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
   useResizeObserver(
     target,
     ([entry]) => {
@@ -1970,12 +1975,12 @@ function useElementSize(target, options = {}) {
 }
 
 function useVirtualList(list = [], options) {
-  const containerRef = react.useRef(null);
+  const containerRef = React.useRef(null);
   const [width, height] = useElementSize(containerRef);
-  const [currentList, setCurrentList] = react.useState([]);
+  const [currentList, setCurrentList] = React.useState([]);
   const { itemHeight, overscan = 5, containerHeight = 300 } = options;
-  const state = react.useRef({ start: 0, end: 10 });
-  const getViewCapacity = react.useCallback(
+  const state = React.useRef({ start: 0, end: 10 });
+  const getViewCapacity = React.useCallback(
     (containerHeight2) => {
       if (typeof itemHeight === "number") {
         return Math.ceil(containerHeight2 / itemHeight);
@@ -1995,7 +2000,7 @@ function useVirtualList(list = [], options) {
     },
     [itemHeight, list]
   );
-  const getOffset = react.useCallback(
+  const getOffset = React.useCallback(
     (scrollTop) => {
       if (typeof itemHeight === "number")
         return Math.floor(scrollTop / itemHeight) + 1;
@@ -2032,16 +2037,16 @@ function useVirtualList(list = [], options) {
       );
     }
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     calculateRange();
   }, [width, height, list, calculateRange]);
-  const totalHeight = react.useMemo(() => {
+  const totalHeight = React.useMemo(() => {
     if (typeof itemHeight === "number") {
       return list.length * itemHeight;
     }
     return list.reduce((sum, _, index) => sum + itemHeight(index), 0);
   }, [itemHeight, list]);
-  const getDistanceTop = react.useCallback(
+  const getDistanceTop = React.useCallback(
     (index) => {
       if (typeof itemHeight === "number") {
         const height3 = index * itemHeight;
@@ -2058,11 +2063,11 @@ function useVirtualList(list = [], options) {
       calculateRange();
     }
   });
-  const offsetTop = react.useMemo(
+  const offsetTop = React.useMemo(
     () => getDistanceTop(state.current.start),
     [getDistanceTop]
   );
-  const wrapperProps = react.useMemo(() => {
+  const wrapperProps = React.useMemo(() => {
     return {
       style: {
         width: "100%",
@@ -2071,7 +2076,7 @@ function useVirtualList(list = [], options) {
       }
     };
   }, [offsetTop, totalHeight]);
-  const containerStyle = react.useMemo(() => {
+  const containerStyle = React.useMemo(() => {
     return { overflowY: "auto", height: containerHeight };
   }, [containerHeight]);
   return {
@@ -2108,8 +2113,8 @@ function usePreferredContrast(defaultState) {
 }
 
 function useActiveElement() {
-  const [active, setActive] = react.useState(null);
-  const listener = react.useCallback(() => {
+  const [active, setActive] = React.useState(null);
+  const listener = React.useCallback(() => {
     setActive(window == null ? void 0 : window.document.activeElement);
   }, []);
   useEventListener("blur", listener, () => window, true);
@@ -2124,10 +2129,10 @@ function useDraggable(target, options = {}) {
     defaultWindow
   );
   const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
-  const [position, setPositon] = react.useState(
+  const [position, setPositon] = React.useState(
     (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
   );
-  const [pressedDelta, setPressedDelta] = react.useState();
+  const [pressedDelta, setPressedDelta] = React.useState();
   const filterEvent = (e) => {
     if (options.pointerTypes) {
       return options.pointerTypes.includes(e.pointerType);
@@ -2202,14 +2207,14 @@ function useElementBounding(target, options = {}) {
     windowScroll = true,
     immediate = true
   } = options;
-  const [height, setHeight] = react.useState(0);
-  const [bottom, setBottom] = react.useState(0);
-  const [left, setLeft] = react.useState(0);
-  const [right, setRight] = react.useState(0);
-  const [top, setTop] = react.useState(0);
-  const [width, setWidth] = react.useState(0);
-  const [x, setX] = react.useState(0);
-  const [y, setY] = react.useState(0);
+  const [height, setHeight] = React.useState(0);
+  const [bottom, setBottom] = React.useState(0);
+  const [left, setLeft] = React.useState(0);
+  const [right, setRight] = React.useState(0);
+  const [top, setTop] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
+  const [x, setX] = React.useState(0);
+  const [y, setY] = React.useState(0);
   const update = useEvent(() => {
     const element = getTargetElement(target);
     if (!element) {
@@ -2236,12 +2241,12 @@ function useElementBounding(target, options = {}) {
     setY(rect.y);
   });
   useResizeObserver(target, update);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (immediate) {
       update();
     }
   }, [immediate, update]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (windowScroll) {
       window.addEventListener("scroll", update, { passive: true });
     }
@@ -2271,8 +2276,8 @@ function useElementBounding(target, options = {}) {
 }
 
 function useElementVisibility(target, options = {}) {
-  const [visible, setVisible] = react.useState(false);
-  const callback = react.useCallback((entries) => {
+  const [visible, setVisible] = React.useState(false);
+  const callback = React.useCallback((entries) => {
     const rect = entries[0].boundingClientRect;
     setVisible(
       rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0
@@ -2283,7 +2288,7 @@ function useElementVisibility(target, options = {}) {
 }
 
 function useWindowsFocus() {
-  const [focused, setFocused] = react.useState(() => {
+  const [focused, setFocused] = React.useState(() => {
     if (!isBrowser) {
       return false;
     }
@@ -2299,7 +2304,7 @@ function useWindowsFocus() {
 }
 
 function useWindowSize() {
-  const [windowSize, setWindowSize] = react.useState({
+  const [windowSize, setWindowSize] = React.useState({
     width: 0,
     height: 0
   });
@@ -2355,15 +2360,15 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 function useClipBorad() {
-  const [text, setText] = react.useState("");
-  const updateText = react.useCallback(() => {
+  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* () {
+  const copy = React.useCallback((txt) => __async(this, null, function* () {
     setText(txt);
     yield window.navigator.clipboard.writeText(txt);
   }), []);
@@ -2392,7 +2397,7 @@ function useClickOutSide(target, handler) {
 }
 
 function useCycleList(list, i = 0) {
-  const [index, setIndex] = react.useState(i);
+  const [index, setIndex] = React.useState(i);
   const set = (i2) => {
     const length = list.length;
     const nextIndex = ((index + i2) % length + length) % length;
@@ -2408,7 +2413,7 @@ function useCycleList(list, i = 0) {
 }
 
 function useFocus(target, initialValue = false) {
-  const [focus, innerSetFocus] = react.useState(initialValue);
+  const [focus, innerSetFocus] = React.useState(initialValue);
   useEventListener("focus", () => innerSetFocus(true), target);
   useEventListener("blur", () => innerSetFocus(false), target);
   useMount(() => {
@@ -2433,10 +2438,10 @@ function useControlled({
   defaultValue: defaultProp,
   state = "value"
 }) {
-  const { current: isControlled } = react.useRef(controlled !== void 0);
-  const [valueState, setValue] = react.useState(defaultProp);
+  const { current: isControlled } = React.useRef(controlled !== void 0);
+  const [valueState, setValue] = React.useState(defaultProp);
   const value = isControlled ? controlled : valueState;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isControlled !== (controlled !== void 0)) {
       console.error(
         [
@@ -2449,7 +2454,7 @@ function useControlled({
       );
     }
   }, [state, controlled]);
-  const setValueIfUncontrolled = react.useCallback((newValue) => {
+  const setValueIfUncontrolled = React.useCallback((newValue) => {
     if (!isControlled) {
       setValue(newValue);
     }
@@ -2457,6 +2462,24 @@ function useControlled({
   return [value, setValueIfUncontrolled];
 }
 
+const record = /* @__PURE__ */ new WeakSet();
+const createOnceEffect = (hook) => (effect, deps) => {
+  const onceWrapper = () => {
+    const shouldStart = !record.has(effect);
+    if (shouldStart) {
+      record.add(effect);
+      effect();
+    }
+  };
+  hook(() => {
+    onceWrapper();
+  }, deps);
+};
+
+var useOnceEffect = createOnceEffect(React.useEffect);
+
+var useOnceLayoutEffect = createOnceEffect(React.useLayoutEffect);
+
 exports.useActiveElement = useActiveElement;
 exports.useClickOutside = useClickOutSide;
 exports.useClipboard = useClipBorad;
@@ -2502,6 +2525,8 @@ exports.useMousePressed = useMousePressed;
 exports.useMutationObserver = useMutationObserver;
 exports.useNetwork = useNetwork;
 exports.useObjectUrl = useObjectUrl;
+exports.useOnceEffect = useOnceEffect;
+exports.useOnceLayoutEffect = useOnceLayoutEffect;
 exports.useOnline = useOnline;
 exports.useOrientation = useOrientation;
 exports.usePageLeave = usePageLeave;

package/dist/index.d.ts

@@ -8,9 +8,9 @@ declare function useLatest<T>(value: T): MutableRefObject<T>;
 
 declare function useFirstMountState(): boolean;
 
-declare const _default$3: typeof useEffect | typeof react.useLayoutEffect;
+declare const _default$5: typeof useEffect | typeof react.useLayoutEffect;
 
-declare const _default$2: typeof react.useEffect | typeof useLayoutEffect;
+declare const _default$4: typeof react.useEffect | typeof useLayoutEffect;
 
 interface Serializer<T> {
     read(raw: string): T;
@@ -49,6 +49,9 @@ interface Position {
     y: number;
 }
 
+/**
+ * keep function reference immutable
+ */
 declare function useEvent<T extends Fn>(fn: T): T;
 
 declare function useToggle(initialValue: boolean): [boolean, (nextValue?: any) => void];
@@ -248,7 +251,7 @@ declare function useObjectUrl(object: Blob | MediaSource | undefined): string |
 
 declare function useIdle(ms?: number, initialState?: boolean, events?: (keyof WindowEventMap)[]): boolean;
 
-declare const _default$1: () => {};
+declare const _default$3: () => {};
 
 type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
@@ -290,7 +293,7 @@ interface UseFpsOptions {
      */
     every?: number;
 }
-declare const _default: (options?: UseFpsOptions | undefined) => number;
+declare const _default$2: (options?: UseFpsOptions | undefined) => number;
 
 declare function useGeolocation(options?: Partial<PositionOptions>): {
     readonly coordinates: GeolocationCoordinates;
@@ -719,4 +722,8 @@ interface IProps<T> {
 }
 declare function useControlled<T = string>({ controlled, defaultValue, state, }: IProps<T>): readonly [T, (newValue: T) => void];
 
-export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, _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 };
+declare const _default$1: typeof useEffect | typeof react.useLayoutEffect;
+
+declare const _default: typeof react.useEffect | typeof useLayoutEffect;
+
+export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, 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, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useLayoutEffect, useCallback, useState, useReducer, useMemo } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useState, useReducer, useMemo } from 'react';
 import { throttle, debounce, isEqual } from 'lodash';
 
 function usePrevious(state) {
@@ -47,6 +47,7 @@ const isNavigator = typeof navigator !== "undefined";
 const noop = () => {
 };
 const isIOS = isBrowser && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+!React.useId;
 
 function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
@@ -2453,4 +2454,22 @@ function useControlled({
   return [value, setValueIfUncontrolled];
 }
 
-export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, 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 };
+const record = /* @__PURE__ */ new WeakSet();
+const createOnceEffect = (hook) => (effect, deps) => {
+  const onceWrapper = () => {
+    const shouldStart = !record.has(effect);
+    if (shouldStart) {
+      record.add(effect);
+      effect();
+    }
+  };
+  hook(() => {
+    onceWrapper();
+  }, deps);
+};
+
+var useOnceEffect = createOnceEffect(useEffect);
+
+var useOnceLayoutEffect = createOnceEffect(useLayoutEffect);
+
+export { useActiveElement, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, 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, useOnceEffect, useOnceLayoutEffect, 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.1.3",
+  "version": "1.1.4",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",