@ringcentral/spring-base 1.7.0

package/hooks.js

@@ -0,0 +1,2101 @@
+import { unstable_useEventCallback, unstable_ownerDocument, unstable_Timeout, unstable_useForkRef } from '@mui/utils';
+export { unstable_useControlled as useControlled } from '@mui/utils';
+import * as React from 'react';
+import { useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import uniqueId from 'lodash/uniqueId';
+import { useWindowContext, useResponsiveContext, getMatchDetail } from './contexts.js';
+import { a as ariaHideOutside, g as getRefElement, l as logInDev, c as combineProps, o as ownerWindow } from './chunks/twMerge.js';
+import 'lodash/isPlainObject';
+import './config.js';
+import 'lodash/omit';
+import 'lodash/pick';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+import throttle from 'lodash/throttle';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import 'tailwind-merge';
+
+// this file template replace material-ui/core/utils method
+// when upgrade mui that will not need assign type anymore
+const useEventCallback = (func) => {
+    return unstable_useEventCallback(func);
+};
+
+const defaultCheckKeys = ['Enter', ' '];
+/**
+ * bind event with a11y keyboard, `space`, `enter`, only trigger when key includes in `checkKeys`
+ *
+ * that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
+ */
+const useA11yKeyEvent = (fn, { onlyOnFocus, preventDefault = true, checkKeys = defaultCheckKeys, } = {}) => {
+    return useEventCallback((event) => {
+        if (!fn || (onlyOnFocus && event.target !== event.currentTarget))
+            return;
+        if (checkKeys.includes(event.key)) {
+            if (preventDefault)
+                event.preventDefault();
+            fn(event);
+        }
+    });
+};
+
+// base https://github.com/mui/material-ui/blob/master/packages/mui-base/src/useButton/useButton.ts
+const isNativeButton = (el) => {
+    const tag = el.tagName;
+    return (tag === 'BUTTON' ||
+        (tag === 'INPUT' &&
+            ['button', 'submit', 'reset'].includes(el?.type)) ||
+        (tag === 'A' && el?.href));
+};
+/**
+ * bind event with a11y keyboard, `space`. help not native button to implement `:active`
+ *
+ * that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
+ */
+const useActive = ({ onKeyDown, onKeyUp, onClick, disabled = false, } = {}) => {
+    const [active, setActive] = useState(false);
+    useEffect(() => {
+        if (disabled)
+            setActive(false);
+    }, [disabled]);
+    if (disabled) {
+        return {
+            activeHandlers: { onKeyDown, onKeyUp, onClick },
+            active: false,
+        };
+    }
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.target === event.currentTarget &&
+            !isNativeButton(event.target) &&
+            event.key === ' ') {
+            event.preventDefault();
+        }
+        if (event.target === event.currentTarget && event.key === ' ') {
+            setActive(true);
+        }
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget &&
+            !isNativeButton(event.target) &&
+            event.key === 'Enter') {
+            onClick?.(event);
+            event.preventDefault();
+        }
+    };
+    const handleKeyUp = (event) => {
+        // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+        // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+        if (event.target === event.currentTarget) {
+            setActive(false);
+        }
+        onKeyUp?.(event);
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget &&
+            !isNativeButton(event.target) &&
+            event.key === ' ' &&
+            !event.defaultPrevented) {
+            onClick?.(event);
+        }
+    };
+    return {
+        activeHandlers: { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick },
+        active,
+    };
+};
+
+/**
+ * provide a ref for only calculate `cb` once
+ * prevent `useRef(getValue())`, that `getValue` calculate every re-render
+ *
+ * @param cb that get method of get this ref init value, only calculate once
+ * @returns same as `useRef` result
+ *
+ */
+function useResultRef(cb) {
+    const renderRef = useRef(0);
+    const ref = useRef();
+    if (renderRef.current === 0) {
+        ref.current = cb();
+        renderRef.current = 1;
+    }
+    return ref;
+}
+
+const DEFAULT_PREFIX = 'spring-id-';
+/**
+ * Generates a unique ID.
+ *
+ * @param id - Default component id or prefix id.
+ * @param prefixMode Whether enable prefix the ID with.
+ * @returns unique ID
+ * @example
+ * useId() => 'spring-id-xxxx'
+ * useId('') => 'spring-id-xxxx'
+ * useId(null) => 'spring-id-xxxx'
+ * useId(undefined) => 'spring-id-xxxx'
+ * useId('nameId') => 'nameId'
+ * useId('nameId', true) => 'nameId-xxxx'
+ */
+function useId(id, prefixMode) {
+    const { current: resultId } = useResultRef(() => {
+        if (id) {
+            if (prefixMode) {
+                return uniqueId(`${id}-`);
+            }
+            return id;
+        }
+        return uniqueId(DEFAULT_PREFIX);
+    });
+    return resultId;
+}
+
+const visuallyHiddenStyles = `
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+/**
+ * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
+ */
+const useAnnouncer = (id) => {
+    const _id = useId(id ? `rc-announcer-${id}` : 'rc-announcer', !id);
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = document.createElement('div');
+        ref.current = el;
+        el.id = _id;
+        el.setAttribute('aria-live', 'assertive');
+        el.setAttribute('aria-atomic', 'true');
+        el.setAttribute('aria-hidden', 'false');
+        el.setAttribute('style', visuallyHiddenStyles);
+        document.body.appendChild(el);
+        return () => {
+            setTimeout(() => {
+                const body = document.body;
+                if (body.contains(el)) {
+                    body.removeChild(el);
+                }
+                if (el === ref.current) {
+                    ref.current = null;
+                }
+            });
+        };
+    }, [_id]);
+    /** announce method, call with message that want let reader speak */
+    return useCallback((message) => {
+        const el = ref.current;
+        if (el && message) {
+            el.setAttribute('aria-hidden', 'false');
+            el.textContent = message;
+        }
+    }, []);
+};
+
+const useAriaHideOutside = (props = {}) => {
+    const { enable = true } = props;
+    const { externalWindow, document } = useWindowContext();
+    const ariaHideOutsideRef = useRef(null);
+    useEffect(() => {
+        if (enable && ariaHideOutsideRef.current) {
+            return ariaHideOutside([ariaHideOutsideRef.current], document?.body);
+        }
+        return undefined;
+    }, [enable, externalWindow, document?.body]);
+    return {
+        ariaHideOutsideRef: ariaHideOutsideRef,
+        /**
+         * Whether the `aria-hidden` attribute is being applied to outside elements.
+         * When true, elements outside the ref are hidden from screen readers.
+         */
+        ariaHideEnabled: enable,
+    };
+};
+
+/**
+ * get Browser `Audio` instance, and auto destroy when component be destroyed.
+ *
+ *
+ * @param init a callback when you init that audio
+ *
+ * @example
+ *
+ * ```ts
+ * const audio = useAudio((instance) => {
+ *   instance.src = 'https://your.audio'
+ * });
+ *
+ * const click = () => audio.play();
+ *
+ * click();
+ * ```
+ * @see stories {@link https://develop-rcui-int.fiji.gliprc.com/?path=/story/%F0%9F%94%A7-foundation-hooks-useaudio--simple-announcer 🔧-foundation-hooks-useaudio--simple-announcer}
+ * @see {@link https://chromium-review.googlesource.com/c/chromium/src/+/2816118}
+ */
+const useAudio = (init) => {
+    const audioRef = useResultRef(() => {
+        const audio = new Audio();
+        init?.(audio);
+        return audio;
+    });
+    useEffect(() => {
+        return () => {
+            audioRef.current.srcObject = null;
+            // just for remove ref, confirm browser GC work correctly
+            audioRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return audioRef.current;
+};
+
+/**
+ * get previous render value
+ * @param cb that get method of target value
+ * @param isDefault if set `true`, the first time will get value from `cb`
+ * @returns previous value get from `cb`
+ */
+function usePrevious(cb, isDefault) {
+    const ref = useRef(isDefault ? cb() : undefined);
+    useEffect(() => {
+        ref.current = cb();
+    });
+    return ref.current;
+}
+
+/**
+ * get value when prev listen value change
+ * @param cb that method you want calculate to get value
+ * @param listenCb prev compare listener value
+ */
+const useChange = (cb, listenCb) => {
+    const countRef = useRef(0);
+    const valueRef = useRef();
+    const prev = usePrevious(listenCb);
+    const curr = listenCb();
+    if (countRef.current === 0 || prev !== curr) {
+        countRef.current = 1;
+        valueRef.current = cb(prev, curr);
+    }
+    return valueRef.current;
+};
+/**
+ * get value when prev deps one of array value change
+ * @param cb that method you want calculate to get value
+ * @param deps prev compare value array
+ */
+const useDepsChange = (cb, deps) => {
+    const countRef = useRef(0);
+    const valueRef = useRef();
+    const prev = usePrevious(() => deps, true);
+    const curr = deps;
+    if (countRef.current === 0 ||
+        curr.some((dep, index) => dep !== prev[index])) {
+        countRef.current = 1;
+        valueRef.current = cb(prev, curr);
+    }
+    return valueRef.current;
+};
+
+// base https://github.com/mui/material-ui/blob/master/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
+function clickedRootScrollbar(event, doc) {
+    return (doc.documentElement.clientWidth < event.clientX ||
+        doc.documentElement.clientHeight < event.clientY);
+}
+/**
+ * @deprecated Use `ClickAwayListener` from `@mui/base` instead.
+ *
+ * @param onClickAway Callback fired when a "click away" event is detected.
+ */
+const useClickAway = (onClickAway, props = {}) => {
+    const { disableReactTree = false, isEnabled = true } = props;
+    const movedRef = useRef(false);
+    const activatedRef = useRef(false);
+    const syntheticEventRef = useRef(false);
+    const [target, setTarget] = useState();
+    // This hook is usually triggered after target appears
+    // so we need to trigger re-render component in ref callback to make sure useEffect can get target correctly
+    const clickAwayRef = useEventCallback((e) => {
+        setTarget(e);
+    });
+    const shouldActive = Boolean(target);
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        if (shouldActive) {
+            // Ensure that this component is not "activated" synchronously.
+            // https://github.com/facebook/react/issues/20074
+            const timer = setTimeout(() => {
+                activatedRef.current = true;
+            }, 0);
+            return () => {
+                clearTimeout(timer);
+                activatedRef.current = false;
+            };
+        }
+        return undefined;
+    }, [isEnabled, shouldActive]);
+    // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+    const handleClickAway = useEventCallback((event) => {
+        // Given developers can stop the propagation of the synthetic event,
+        // we can only be confident with a positive value.
+        const insideReactTree = syntheticEventRef.current;
+        syntheticEventRef.current = false;
+        const doc = unstable_ownerDocument(target);
+        // 1. IE11 support, which trigger the handleClickAway even after the unbind
+        // 2. The child might render null.
+        // 3. Behave like a blur listener.
+        if (!activatedRef.current ||
+            !target ||
+            ('clientX' in event && clickedRootScrollbar(event, doc))) {
+            return;
+        }
+        // Do not act if user performed touchmove
+        if (movedRef.current) {
+            movedRef.current = false;
+            return;
+        }
+        let insideDOM;
+        // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+        if (event.composedPath) {
+            insideDOM = event.composedPath().indexOf(target) > -1;
+        }
+        else {
+            insideDOM =
+                !doc.documentElement.contains(
+                // @ts-expect-error returns `false` as intended when not dispatched from a Node
+                event.target) ||
+                    target.contains(
+                    // @ts-expect-error returns `false` as intended when not dispatched from a Node
+                    event.target);
+        }
+        if (!insideDOM && (disableReactTree || !insideReactTree)) {
+            onClickAway(event);
+        }
+    });
+    // Keep track of mouse/touch events that bubbled up through the portal.
+    const handleSynthetic = (e) => {
+        syntheticEventRef.current = true;
+    };
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        if (target) {
+            const doc = unstable_ownerDocument(target);
+            const handleTouchMove = () => {
+                movedRef.current = true;
+            };
+            doc.addEventListener('touchend', handleClickAway);
+            doc.addEventListener('touchmove', handleTouchMove);
+            doc.addEventListener('click', handleClickAway);
+            return () => {
+                doc.removeEventListener('touchend', handleClickAway);
+                doc.removeEventListener('touchmove', handleTouchMove);
+                doc.removeEventListener('click', handleClickAway);
+            };
+        }
+        return undefined;
+    }, [handleClickAway, isEnabled, target]);
+    return {
+        clickAwayRef,
+        clickAwayHandler: {
+            onClick: handleSynthetic,
+            onTouchEnd: handleSynthetic,
+        },
+    };
+};
+
+/**
+ * provide a debounce method for debounce method
+ * @param fn method for debounce
+ * @param debounceTime debounce timeout value, default is  `200`ms
+ * @param options debounce setting, default is  `{trailing: true, leading: flase}`, detail see lodash
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useDebounce = (fn, debounceTime = 200, options) => {
+    const memoFn = useEventCallback(fn);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debounceFn = useCallback(debounce(memoFn, debounceTime, options), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => debounceFn.cancel(), []);
+    return debounceFn;
+};
+
+/**
+ * bind event when component mount and auto remove event when destroy.
+ * can remove listener by call returned function or pass empty 'target'.
+ *
+ * @param target
+ * listener will be removed when target is changed to null,
+ * or rebinding to new element when `ref.current` change
+ * @returns a method object
+ * - listen() listen listener again, if that have listener, that will not listen again
+ * - remove() remove listener
+ * @example
+ * ```ts
+ * useEventListener(window, 'keyup', () => console.log('window key up'))
+ * ```
+ */
+function useEventListener(target, key, callback, options) {
+    const { startImmediately = true, ...addEventListenerOptions } = options ?? {};
+    const listener = useEventCallback(callback);
+    const cancelRef = useRef(noop);
+    const bindRef = useRef(noop);
+    useEffect(() => {
+        if (!target)
+            return;
+        const currentElm = getRefElement(target);
+        if (!currentElm) {
+            return cancelRef.current;
+        }
+        bindRef.current = () => currentElm.addEventListener(key, listener, addEventListenerOptions);
+        cancelRef.current = () => currentElm.removeEventListener(key, listener, addEventListenerOptions);
+        if (startImmediately) {
+            bindRef.current();
+        }
+        return cancelRef.current;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [target]);
+    return {
+        listen: () => bindRef.current(),
+        remove: () => cancelRef.current(),
+    };
+}
+
+const defaultEverTargetValue = (value) => !!value;
+/**
+ * that value ever to be `you want value`
+ * Return true when the value ever to be `you want value` once.
+ *
+ * @example
+ * ```ts
+ * // once that isOpen is true, that result will always be `true`
+ * const isEverOpen = useEver(isOpen);
+ *
+ * const isEverToBe2 = useEver(count, (val) => val === 2);
+ * ```
+ */
+const useEver = (
+/** to be checked value */
+value, 
+/**
+ * value ever to be callback, default when value to be exited.
+ *
+ * @default (value) => !!value
+ */
+targetValue = defaultEverTargetValue) => {
+    const result = useRef(false);
+    if (!result.current) {
+        result.current = targetValue(value);
+    }
+    return result.current;
+};
+
+/* eslint-disable sonarjs/no-collapsible-if */
+/* eslint-disable sonarjs/prefer-single-boolean-return */
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new unstable_Timeout();
+const inputTypesWhitelist = {
+    text: true,
+    search: true,
+    url: true,
+    tel: true,
+    email: true,
+    password: true,
+    number: true,
+    date: true,
+    month: true,
+    week: true,
+    time: true,
+    datetime: true,
+    'datetime-local': true,
+};
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+    const { type, tagName } = node;
+    if (tagName === 'INPUT' &&
+        inputTypesWhitelist[type] &&
+        !node.readOnly) {
+        return true;
+    }
+    if (tagName === 'TEXTAREA' && !node.readOnly) {
+        return true;
+    }
+    if (node.isContentEditable) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+    if (event.metaKey || event.altKey || event.ctrlKey) {
+        return;
+    }
+    hadKeyboardEvent = true;
+}
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+    hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+    if (this.visibilityState === 'hidden') {
+        // If the tab becomes active again, the browser will handle calling focus
+        // on the element (Safari actually calls it twice).
+        // If this tab change caused a blur on an element with focus-visible,
+        // re-apply the class when the user switches back to the tab.
+        if (hadFocusVisibleRecently) {
+            hadKeyboardEvent = true;
+        }
+    }
+}
+function prepare(doc) {
+    doc.addEventListener('keydown', handleKeyDown, true);
+    doc.addEventListener('mousedown', handlePointerDown, true);
+    doc.addEventListener('pointerdown', handlePointerDown, true);
+    doc.addEventListener('touchstart', handlePointerDown, true);
+    doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function teardown(doc) {
+    doc.removeEventListener('keydown', handleKeyDown, true);
+    doc.removeEventListener('mousedown', handlePointerDown, true);
+    doc.removeEventListener('pointerdown', handlePointerDown, true);
+    doc.removeEventListener('touchstart', handlePointerDown, true);
+    doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+    const { target } = event;
+    try {
+        return target.matches(':focus-visible');
+    }
+    catch (error) {
+        // Browsers not implementing :focus-visible will throw a SyntaxError.
+        // We use our own heuristic for those browsers.
+        // Rethrow might be better if it's not the expected error but do we really
+        // want to crash if focus-visible malfunctioned?
+    }
+    // No need for validFocusTarget check. The user does that by attaching it to
+    // focusable events only.
+    return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+function useIsFocusVisible() {
+    const ref = React.useCallback((node) => {
+        if (node != null) {
+            prepare(node.ownerDocument);
+        }
+    }, []);
+    const isFocusVisibleRef = React.useRef(false);
+    /**
+     * Should be called if a blur event is fired
+     */
+    function handleBlurVisible() {
+        // checking against potential state variable does not suffice if we focus and blur synchronously.
+        // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+        // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+        // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+        // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+        if (isFocusVisibleRef.current) {
+            // To detect a tab/window switch, we look for a blur event followed
+            // rapidly by a visibility change.
+            // If we don't see a visibility change within 100ms, it's probably a
+            // regular focus change.
+            hadFocusVisibleRecently = true;
+            hadFocusVisibleRecentlyTimeout.start(100, () => {
+                hadFocusVisibleRecently = false;
+            });
+            isFocusVisibleRef.current = false;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Should be called if a blur event is fired
+     */
+    function handleFocusVisible(event) {
+        if (isFocusVisible(event)) {
+            isFocusVisibleRef.current = true;
+            return true;
+        }
+        return false;
+    }
+    return {
+        isFocusVisibleRef,
+        onFocus: handleFocusVisible,
+        onBlur: handleBlurVisible,
+        ref,
+    };
+}
+
+/**
+ * bind event with a11y keyboard, `space`, `enter`, only trigger when key includes in `checkKeys`
+ *
+ * that will auto preventDefault by default, if you don't want that, set `false` with `preventDefault`
+ */
+const useFocusVisible = ({ onFocusVisible, onFocus, onBlur, within = false, } = {}) => {
+    const { isFocusVisibleRef, onFocus: handleFocusVisible, onBlur: handleBlurVisible, ref: focusVisibleRef, } = useIsFocusVisible();
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [focusVisibleWithin, setFocusVisibleWithin] = useState(false);
+    const handleBlur = (event) => {
+        handleBlurVisible(event);
+        if (isFocusVisibleRef.current === false) {
+            setFocusVisible(false);
+            /**
+             * when focus element by press `tab`, will trigger focus event in next event loop
+             *
+             * if current target is containing related target and we don't check whether it is containing related target,
+             * `FocusVisibleWithin` will be false before `focus` trigger,
+             * then `FocusVisibleWithin` will be true after `focus` trigger
+             *
+             * And if current target is containing related target, `FocusVisibleWithin` will never be false
+             */
+            if (within &&
+                !event.currentTarget.contains(event.relatedTarget)) {
+                setFocusVisibleWithin(false);
+            }
+        }
+        onBlur?.(event);
+    };
+    const handleFocus = (event) => {
+        let updateState;
+        if (within) {
+            if (event.target === event.currentTarget) {
+                updateState = () => {
+                    setFocusVisibleWithin(true);
+                    setFocusVisible(true);
+                };
+            }
+            else {
+                updateState = () => {
+                    setFocusVisibleWithin(true);
+                };
+            }
+        }
+        else if (event.target === event.currentTarget) {
+            updateState = () => {
+                setFocusVisible(true);
+            };
+        }
+        else {
+            return;
+        }
+        handleFocusVisible(event);
+        if (isFocusVisibleRef.current === true) {
+            updateState();
+            onFocusVisible?.(event);
+        }
+        onFocus?.(event);
+    };
+    return {
+        focusVisibleHandlers: {
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        focusVisibleRef: focusVisibleRef,
+        focusVisible,
+        focusVisibleWithin,
+    };
+};
+
+/**
+ * a method for trigger force update
+ * @returns force update method
+ */
+function useForceUpdate() {
+    const [, dispatch] = useState(Object.create(null));
+    return useEventCallback(() => {
+        dispatch(Object.create(null));
+    });
+}
+
+/**
+ * That method will give you ability fork same value `ref object` or `method`
+ * Example:
+ * ```ts
+ * const refA = useRef();
+ * const refB = useRef();
+ *
+ * const ref = useForkRef(refA, refB)
+ *
+ * useEffect(() => {
+ *   console.log(refA); // get that current div dom
+ *   console.log(refB); // also get that current div dom
+ * },[])
+ *
+ * return <div ref={ref} />
+ * ```
+ */
+const useForkRef = unstable_useForkRef;
+
+const globalListenerEventMap = new Map();
+/**
+ * create globalListener handler for share one listener event
+ *
+ * @example
+ * ```ts
+ * const globalListener = createGlobalListener('focus', () => { console.log('focus') });
+ * const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
+ * globalListener.listen();
+ * globalListener2.listen();
+ *
+ * => // that will only create an event listener on window, but every callback will get emit value when event triggered
+ * ```
+ */
+const createGlobalListener = (key, listener, options, { customKey = key, target: targetProp = window, } = {}) => {
+    let listening = false;
+    const getMapValue = () => globalListenerEventMap.get(customKey);
+    const addListener = () => {
+        if (listening)
+            return;
+        const savedEvent = getMapValue();
+        if (!savedEvent?.exec) {
+            const exec = (e) => {
+                const event = getMapValue();
+                event?.listeners.forEach((c) => c(e));
+            };
+            globalListenerEventMap.set(customKey, {
+                exec,
+                listeners: new Set([listener]),
+            });
+            const target = getRefElement(targetProp);
+            target?.addEventListener(key, exec, options);
+        }
+        else {
+            savedEvent.listeners.add(listener);
+        }
+        listening = true;
+    };
+    const removeListener = () => {
+        if (!listening)
+            return;
+        listening = false;
+        const _savedEvent = getMapValue();
+        if (!_savedEvent)
+            return;
+        const { listeners } = _savedEvent;
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            const target = getRefElement(targetProp);
+            target?.removeEventListener(key, _savedEvent.exec, options);
+            globalListenerEventMap.delete(customKey);
+        }
+    };
+    return {
+        listen: () => addListener(),
+        /**
+         * remove listener
+         */
+        remove: () => removeListener(),
+        /**
+         * current listener state
+         */
+        get state() {
+            return {
+                /**
+                 * current listener state count
+                 */
+                get count() {
+                    return getMapValue()?.listeners.size || 0;
+                },
+                /**
+                 * is that be listening
+                 */
+                listening,
+            };
+        },
+    };
+};
+
+/**
+ * bind global event, when you bind same key event,
+ * that will reuse one event listener and trigger both callback once that listener be triggered.
+ *
+ * also you can control listener with method `listen` and `remove`
+ * and get listener `state` for check listener count number and current listing state.
+ *
+ * config:
+ * - `target`: custom binding event target, default is `window`
+ * - `customKey`: custom key for determining different event group, default is same as `key`
+ * - `startImmediately`: start listener immediately, default is `true`
+ *
+ * * `key`, `options` only work when set first time, never change after first render
+ *
+ * @example
+ * ```ts
+ * useGlobalListener('keyup', () => console.log('window key up1'))
+ *
+ * useGlobalListener('keyup', () => console.log('window key up2'))
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), { passive: false }, {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
+ *
+ * => // that will only create an event listener on `window`, but every callback will get emit value when event triggered
+ * ```
+ */
+function useGlobalListener(key, listener, ...args) {
+    const { options, config } = getListenerOverloadOption(args);
+    const { customKey = key, target: targetProp = window, startImmediately = true, } = config || {};
+    const _listener = useEventCallback(listener);
+    const { current: globalListener } = useRef(createGlobalListener(key, _listener, options, {
+        customKey,
+        target: targetProp,
+    }));
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            if (customKey === key) {
+                if (Object.keys(options).length > 0) {
+                    logInDev({
+                        scope: 'useGlobalListener',
+                        message: 'when have set options, suggest you also bind customKey, otherwise, it may use previous listener without same options',
+                    });
+                }
+                const target = getRefElement(targetProp);
+                if (!('document' in target && 'screen' in target)) {
+                    logInDev({
+                        scope: 'useGlobalListener',
+                        message: 'When you custom binding event target, you must custom key for determining different event group',
+                        level: 'error',
+                    });
+                }
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
+    useEffect(() => {
+        if (startImmediately) {
+            globalListener.listen();
+        }
+        return globalListener.remove;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return globalListener;
+}
+function getListenerOverloadOption(args) {
+    let options;
+    let config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        const { startImmediately, customKey, target, ...restOptions } = {
+            ...(args[0] || {}),
+            ...(args[1] || {}),
+        };
+        options = restOptions;
+        config = {
+            startImmediately,
+            customKey,
+            target,
+        };
+    }
+    return { options, config };
+}
+
+/**
+ * group hidden logic, when binding events element focus,
+ * that hiddenRef will auto be `tabindex={-1}` *
+ */
+const useHiddenTabindex = (target) => {
+    const handleFocus = useEventCallback(() => {
+        const hiddenElm = getRefElement(target);
+        if (hiddenElm && hiddenElm.tabIndex === 0) {
+            hiddenElm.tabIndex = -1;
+        }
+    });
+    const handleBlur = useEventCallback(() => {
+        const hiddenElm = getRefElement(target);
+        if (hiddenElm && hiddenElm.tabIndex === -1) {
+            hiddenElm.tabIndex = 0;
+        }
+    });
+    return {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+    };
+};
+
+const useHover = ({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled = false, disableReactTree = true, } = {}) => {
+    const [hover, setHover] = useState(false);
+    const hoverRef = useRef(false);
+    useEffect(() => {
+        if (disabled) {
+            setHover(false);
+        }
+        else if (!disabled && hoverRef.current) {
+            setHover(true);
+        }
+    }, [disabled]);
+    const updateHoverState = (hover, event) => {
+        if (disableReactTree &&
+            !event.currentTarget.contains(event.target)) {
+            return;
+        }
+        if (!disabled)
+            setHover(hover);
+        hoverRef.current = hover;
+    };
+    const onMouseEnter = (event) => {
+        handleMouseEnter?.(event);
+        updateHoverState(true, event);
+    };
+    const onMouseLeave = (event) => {
+        handleMouseLeave?.(event);
+        updateHoverState(false, event);
+    };
+    return {
+        hoverHandlers: { onMouseEnter, onMouseLeave },
+        hover,
+    };
+};
+
+const useHoverDirty = ({ target, disabled = false, }) => {
+    const [hover, setHover] = useState(false);
+    useEffect(() => {
+        if (disabled || !target)
+            setHover(false);
+    }, [disabled, target]);
+    useEventListener(target, 'mouseenter', () => {
+        if (disabled)
+            return;
+        setHover(true);
+    });
+    useEventListener(target, 'mouseleave', () => {
+        if (disabled)
+            return;
+        setHover(false);
+    });
+    return {
+        hover,
+    };
+};
+
+/**
+ * get load state of an image by passing src or srcSet
+ * - false: not load yet
+ * - 'loaded': successfully loaded
+ * - 'error': fail to load
+ *
+ * @example
+ * ```ts
+ * const loaded = useImgLoaded({
+ *   src,
+ *   srcSet,
+ * });
+ * ```
+ */
+const useImgLoaded = ({ crossOrigin, referrerPolicy, src, srcSet, }) => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        if (!src && !srcSet) {
+            return undefined;
+        }
+        setLoaded(false);
+        let active = true;
+        const image = new Image();
+        image.onload = () => {
+            if (!active) {
+                return;
+            }
+            setLoaded('loaded');
+        };
+        image.onerror = () => {
+            if (!active) {
+                return;
+            }
+            setLoaded('error');
+        };
+        crossOrigin && (image.crossOrigin = crossOrigin);
+        referrerPolicy && (image.referrerPolicy = referrerPolicy);
+        if (src) {
+            image.src = src;
+        }
+        if (srcSet) {
+            image.srcset = srcSet;
+        }
+        return () => {
+            active = false;
+        };
+    }, [crossOrigin, referrerPolicy, src, srcSet]);
+    return loaded;
+};
+
+/**
+ * controllable interval, provide easy way to control interval
+ *
+ * - cancel: cancel current interval
+ * - pause: pause current interval
+ * - play: play current interval
+ * - getRunning: return current interval running state
+ *
+ *  @example
+ * ```ts
+ * const { cancel, play, pause } = useInterval(() => {
+ *    console.log('interval be triggered');
+ * }, 1000)
+ *
+ * // get current run times
+ * useInterval((times) => {
+ *    console.log('current times start from 1', times);
+ * }, 2000)
+ *
+ * // not start interval immediately
+ * useInterval((times) => {
+ *    console.log('current times start from 1', times);
+ * }, 2000, false)
+ * ```
+ */
+const useInterval = (
+/** callback with times, times start from 1 */
+callback, 
+/** what delay time of that interval */
+delay = 0, 
+/** is that start interval immediately */
+startImmediately = true) => {
+    const intervalRef = useRef();
+    const countRef = useRef(0);
+    const getRunning = useEventCallback(() => !!intervalRef.current);
+    const savedCallback = useEventCallback((times) => {
+        callback(times);
+    });
+    const pause = useCallback(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = undefined;
+        }
+    }, []);
+    const cancel = useCallback(() => {
+        pause();
+        countRef.current = 0;
+    }, [pause]);
+    const play = useCallback(() => {
+        const isRunning = getRunning();
+        if (isRunning)
+            return;
+        intervalRef.current = setInterval(() => {
+            countRef.current++;
+            savedCallback(countRef.current);
+        }, delay);
+    }, [delay, getRunning, savedCallback]);
+    useEffect(() => {
+        if (startImmediately) {
+            play();
+        }
+        return () => cancel();
+    }, [cancel, play, startImmediately]);
+    return {
+        /**
+         * cancel current interval
+         */
+        cancel,
+        /**
+         * pause current interval
+         */
+        pause,
+        /**
+         * play current interval
+         */
+        play,
+        /**
+         * return current interval running state
+         */
+        getRunning,
+    };
+};
+
+/**
+ * Provide user trigger `onKeyDown` only one time when hold press on key.
+ * @param includeKeys that check include keys
+ * @param methods trigger when first keydown or keyup
+ * @returns
+ */
+const useKeyDownOnce = (includeKeys, { onKeyDown, onKeyUp }) => {
+    const isKeyDownMapRef = useRef({});
+    const handleKeyDown = useEventCallback((e) => {
+        if (includeKeys.includes(e.key)) {
+            if (!isKeyDownMapRef.current[e.key]) {
+                onKeyDown?.(e);
+            }
+            else {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            isKeyDownMapRef.current[e.key] = true;
+        }
+        else {
+            onKeyDown?.(e);
+        }
+    });
+    const handleKeyUp = useEventCallback((e) => {
+        if (includeKeys.includes(e.key)) {
+            isKeyDownMapRef.current[e.key] = false;
+        }
+        onKeyUp?.(e);
+    });
+    return {
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+    };
+};
+
+/**
+ * that can move index in column array
+ */
+function moveIndexInTwoDimension(direction, options) {
+    const { currIndex, columns, total, infinite } = options;
+    // start index never small than 0
+    // const index = Math.max(currIndex, 0);
+    const lastIndex = total - 1;
+    const isInOrder = infinite === 'order';
+    const fillTotal = Math.ceil(total / columns) * columns;
+    let resultIndex;
+    switch (direction) {
+        case 'ArrowUp': {
+            const toIndex = (Math.max(currIndex, 0) - columns + fillTotal) % fillTotal;
+            resultIndex = infinite ? toIndex : Math.min(toIndex, currIndex);
+            break;
+        }
+        case 'ArrowRight': {
+            if (isInOrder) {
+                const tmp = currIndex + 1;
+                resultIndex = tmp > lastIndex ? 0 : tmp;
+                break;
+            }
+            const toIndex = Math.floor(currIndex / columns) * columns + ((currIndex + 1) % columns);
+            resultIndex = infinite ? toIndex : Math.max(toIndex, currIndex);
+            break;
+        }
+        case 'ArrowDown': {
+            const toIndex = (currIndex + columns) % fillTotal;
+            resultIndex = infinite ? toIndex : Math.max(toIndex, currIndex);
+            break;
+        }
+        case 'ArrowLeft': {
+            if (isInOrder) {
+                const tmp = currIndex - 1;
+                resultIndex = tmp < 0 ? lastIndex : tmp;
+                break;
+            }
+            const toIndex = Math.floor(currIndex / columns) * columns +
+                ((currIndex - 1 + columns) % columns);
+            resultIndex = infinite ? toIndex : Math.min(toIndex, currIndex);
+            break;
+        }
+        case 'Home':
+            resultIndex = 0;
+            break;
+        case 'End':
+            resultIndex = lastIndex;
+            break;
+        default:
+            resultIndex = currIndex;
+    }
+    if (!infinite && resultIndex >= total) {
+        return currIndex;
+    }
+    // * when that bigger then sourceTotal, mean that touch end line
+    // * move to current full latest and move again.
+    if (resultIndex >= total) {
+        if (direction === 'ArrowRight') {
+            resultIndex = fillTotal - 1;
+        }
+        return moveIndexInTwoDimension(direction, {
+            ...options,
+            currIndex: resultIndex,
+        });
+    }
+    return resultIndex;
+}
+
+/**
+ * use keyboard move index in two dimensional
+ */
+const useKeyboardMoveFocus = ({ infinite, options = [], focusedIndexRef, onFocusedIndexChange, getOptionDisabled, getOptionSearchText, columns = 1, endSearchDebounceTime = 500, }) => {
+    const total = options.length;
+    const searchText = useRef('');
+    const debounceEndSearch = useDebounce(() => (searchText.current = ''), endSearchDebounceTime);
+    const searchTextAndFocus = (event) => {
+        const key = event.key;
+        if (!getOptionSearchText || key.length !== 1)
+            return;
+        debounceEndSearch();
+        searchText.current += key.toLowerCase();
+        const matchedIndex = options.findIndex((option) => {
+            const text = getOptionSearchText(option);
+            return Boolean(!getOptionDisabled?.(option) &&
+                text &&
+                text.toLowerCase().startsWith(searchText.current));
+        });
+        if (matchedIndex > -1) {
+            onFocusedIndexChange(event, matchedIndex);
+        }
+    };
+    const onKeyFocusedIndexHandle = (event) => {
+        let currIndex = focusedIndexRef.current;
+        const key = event.key;
+        let findDirection;
+        if (total === 0)
+            return;
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const toIndex = findDirection
+                ? findDirection === 'next'
+                    ? currIndex + 1
+                    : currIndex - 1
+                : moveIndexInTwoDimension(key, {
+                    currIndex,
+                    columns,
+                    total,
+                    infinite,
+                });
+            if (toIndex === currIndex) {
+                searchTextAndFocus(event);
+                break;
+            }
+            if (!getOptionDisabled?.(options[toIndex])) {
+                if (toIndex !== focusedIndexRef.current) {
+                    onFocusedIndexChange(event, toIndex);
+                }
+                break;
+            }
+            // * mean that item is disabled, use same direction find next
+            else {
+                // * find toIndex is same as current, mean that already find all
+                if (focusedIndexRef.current !== -1 &&
+                    toIndex === Math.max(focusedIndexRef.current, 0)) {
+                    break;
+                }
+                // * if no item is focused currently and toIndex is already the last item checked,
+                // * it means no item in the list is focusable
+                if (focusedIndexRef.current === -1) {
+                    // from bottom to top and the first item in the list is not focusable
+                    if ((Math.abs(currIndex - toIndex) !== 1 || currIndex > toIndex) &&
+                        toIndex === 0) {
+                        break;
+                    }
+                    // from top to bottom and the last item in the list is not focusable
+                    if (Math.abs(currIndex - toIndex) === 1 &&
+                        currIndex < toIndex &&
+                        toIndex === total - 1) {
+                        break;
+                    }
+                }
+                currIndex = toIndex;
+                // * if that is Hom or End, find use increase or decrease
+                if (key === 'Home') {
+                    findDirection = 'next';
+                }
+                else if (key === 'End') {
+                    findDirection = 'prev';
+                }
+            }
+        }
+    };
+    const getPrevFocusableOption = useCallback((index = focusedIndexRef.current, 
+    /** is that infinite search */
+    isInfinite = true) => {
+        for (let i = index; i >= 0; i--) {
+            if (!getOptionDisabled?.(options[i])) {
+                return i;
+            }
+        }
+        if (isInfinite) {
+            // loop find
+            for (let i = total - 1; i > index; i--) {
+                if (!getOptionDisabled?.(options[i])) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    }, [focusedIndexRef, getOptionDisabled, options, total]);
+    const getNextFocusableOption = useCallback((index = focusedIndexRef.current, 
+    /** is that infinite search */
+    isInfinite = true) => {
+        for (let i = index; i < total; i++) {
+            if (!getOptionDisabled?.(options[i])) {
+                return i;
+            }
+        }
+        if (isInfinite) {
+            // loop find
+            for (let i = 0; i < index; i++) {
+                if (!getOptionDisabled?.(options[i])) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    }, [focusedIndexRef, getOptionDisabled, options, total]);
+    return {
+        /**
+         * Get previous focusable option(include current index).
+         */
+        getPrevFocusableOption,
+        /**
+         * Get next focusable option(include current index).
+         */
+        getNextFocusableOption,
+        /**
+         * Use to handle keyboard event.
+         */
+        onKeyFocusedIndexHandle,
+    };
+};
+
+const MOVE_ATTR_KEY = 'data-move-focused';
+/**
+ * when focus in container below element with binding `getItemProps`,
+ * that will only have one element can be focusable.
+ */
+const useOnlyOneFocusable = ({ focusedIndexRef, containerRef, }) => {
+    const moveFocusedId = useId(MOVE_ATTR_KEY, true);
+    const getIndexElm = (toIndex) => containerRef.current?.querySelector(`[${moveFocusedId}="${toIndex}"]`);
+    const setIndexTabIndex = (toIndex) => {
+        const toElm = getIndexElm(toIndex);
+        if (toElm) {
+            const prevElm = containerRef.current?.querySelector(`[${moveFocusedId}][tabindex="0"]`);
+            prevElm?.setAttribute('tabindex', '-1');
+            toElm.setAttribute('tabindex', '0');
+        }
+    };
+    const focusIndex = (toIndex) => {
+        const toElm = getIndexElm(toIndex);
+        toElm?.focus();
+    };
+    return {
+        moveFocusedId,
+        focusIndex,
+        setIndexTabIndex,
+        getItemProps: (index, options) => {
+            return combineProps({
+                [moveFocusedId]: index,
+                tabIndex: index === focusedIndexRef.current ? 0 : -1,
+                onFocus: () => {
+                    focusedIndexRef.current = index;
+                    setIndexTabIndex(index);
+                },
+            }, options);
+        },
+    };
+};
+
+/**
+ * Provide a utils for switch trigger touch event or mouse event between different device
+ *
+ * - Trigger `touch` event in `touch support` device
+ *   - onTouchStart
+ *   - onTouchEnd
+ * - Trigger `mouse` event in `non touch support` device
+ *   - onMouseDown
+ *   - onMouseUp
+ *
+ * ### Once that is touch support device, that mouse event will never can be trigger
+ * https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+ *
+ * Event order:
+ * - touchstart
+ * - Zero or more touchmove events, depending on movement of the finger(s)
+ * - touchend
+ * - mousemove
+ * - mousedown
+ * - mouseup
+ * - click
+ */
+const useTouchMouseEvent = ({ onMouseDown: onMouseDownArg, onMouseUp: onMouseUpArg, onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, }, { actionRef } = {}) => {
+    const stopMouseEventRef = useRef(false);
+    const onTouchStart = useEventCallback((e) => {
+        stopMouseEventRef.current = true;
+        onTouchStartArg?.(e);
+    });
+    function checkInside(elm) {
+        const hostElement = getRefElement(actionRef);
+        if (hostElement) {
+            return !!(elm && isElmEqualOrContain(elm, hostElement));
+        }
+        return false;
+    }
+    const onTouchEnd = useEventCallback((e) => {
+        let isInside;
+        if (actionRef && e.touches.length < 2 && e.changedTouches.length < 2) {
+            const touch = e.touches[0] || e.changedTouches[0];
+            const elm = unstable_ownerDocument(e.currentTarget).elementFromPoint(touch.pageX, touch.pageY);
+            isInside = !!elm && checkInside(elm);
+        }
+        onTouchEndArg?.(e, isInside);
+    });
+    const onMouseDown = useEventCallback((e) => {
+        if (stopMouseEventRef.current) {
+            return;
+        }
+        onMouseDownArg?.(e);
+    });
+    const onMouseUp = useEventCallback((e) => {
+        let isInside;
+        if (stopMouseEventRef.current)
+            return;
+        if (actionRef) {
+            const elm = e.target;
+            isInside = !!elm && checkInside(elm);
+        }
+        onMouseUpArg?.(e, isInside);
+    });
+    return {
+        onTouchStart,
+        onTouchEnd,
+        onMouseDown,
+        onMouseUp,
+    };
+};
+/**
+ * check is element equal or contains target element
+ */
+const isElmEqualOrContain = (sourceTarget, containTarget) => {
+    const elm = getRefElement(sourceTarget);
+    const target = getRefElement(containTarget);
+    return elm && target && (target === elm || target.contains(elm));
+};
+
+const isTouchEvent = (ev) => {
+    return 'touches' in ev;
+};
+/**
+ * Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
+ *
+ * - Trigger `onTap` when user action leave small than delay time.
+ * - Trigger `onPress` when action time is long than delay time.
+ *
+ * @default UseLongPressOptions { delay = 300 }
+ */
+const useLongPress = ({ onTap, onPress }, { onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, onMouseDown, onKeyDown, onKeyUp, onMouseUp: onMouseUpArg, } = {}, { isPreventDefault = true, delay = 300, externalWindow = window, } = {}) => {
+    const isEmittedRef = useRef(false);
+    const isA11yDownRef = useRef(false);
+    const actionRef = useRef(null);
+    const reasonRef = useRef('click');
+    const emitLongPress = useDebounce((e) => {
+        // * only when have onPress set have emit
+        if (onPress) {
+            onPress(e, reasonRef.current);
+            isEmittedRef.current = true;
+        }
+    }, delay);
+    const end = (e, isInside) => {
+        // ! mouse up only trigger when up on element, so we host that in document
+        globalMouseUpListener.remove();
+        if (!isEmittedRef.current && isInside) {
+            onTap?.(e, reasonRef.current);
+        }
+        reasonRef.current = 'click';
+        isEmittedRef.current = false;
+        emitLongPress.cancel();
+    };
+    const start = (e) => {
+        // ! mouse up only trigger when up on element, so we host that in document
+        globalMouseUpListener.listen();
+        const isTouch = e.type === 'touchstart';
+        if (isTouch) {
+            reasonRef.current = 'tap';
+        }
+        emitLongPress(e);
+    };
+    const { onMouseUp, onTouchEnd, onTouchStart, ...events } = useTouchMouseEvent({
+        onTouchStart: (e) => {
+            // prevent long touch leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onTouchStartArg?.(e);
+            start(e);
+        },
+        onTouchEnd: (e, isInside) => {
+            // prevent leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onTouchEndArg?.(e, isInside);
+            end(e, isInside);
+        },
+        onMouseDown: (e) => {
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onMouseDown?.(e);
+            start(e);
+        },
+        onMouseUp: (e, isInside) => {
+            // prevent leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onMouseUpArg?.(e);
+            end(e, isInside);
+        },
+    }, { actionRef });
+    // use event listener for make event `passive` work in safari
+    useEventListener(actionRef, 'touchstart', onTouchStart, {
+        passive: false,
+    });
+    // use event listener for make event `passive` work in safari
+    useEventListener(actionRef, 'touchend', onTouchEnd, {
+        passive: false,
+    });
+    const globalMouseUpListener = useGlobalListener('mouseup', onMouseUp, {
+        target: externalWindow,
+        startImmediately: false,
+    });
+    const handleDeleteKeyDown = useA11yKeyEvent((e) => {
+        reasonRef.current = 'keyboard';
+        // * keydown when hold will trigger many time, show when current is a11y down, not trigger again
+        if (!isA11yDownRef.current) {
+            emitLongPress(e);
+        }
+        isA11yDownRef.current = true;
+    }, { preventDefault: false });
+    const handleKeyDown = useEventCallback((e) => {
+        onKeyDown?.(e);
+        handleDeleteKeyDown(e);
+    });
+    const handleKeyUp = useEventCallback((e) => {
+        onKeyUp?.(e);
+        if (isA11yDownRef.current)
+            end(e, true);
+        isA11yDownRef.current = false;
+    });
+    return {
+        ref: actionRef,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        ...events,
+    };
+};
+
+/**
+ * get that component mounted state `ref`
+ *
+ * @example
+ *
+ * ```ts
+    const isMountedRef = useMountState();
+
+    if (isMountedRef.current) {
+      console.log('component mounted');
+    }
+ *
+ * ```
+ */
+const useMountState = () => {
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    return isMountedRef;
+};
+
+/**
+ * only trigger when re-render (in useLayoutEffect), not trigger on component first render
+ */
+const useOnLayoutReRender = (cb, deps) => {
+    const count = useRef(0);
+    const method = useEventCallback(cb);
+    useLayoutEffect(() => {
+        if (count.current === 0) {
+            count.current = 1;
+            return () => {
+                //
+            };
+        }
+        return method();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};
+
+/**
+ * only trigger when re-render, not trigger on component first render
+ */
+const useOnReRender = (cb, deps) => {
+    const count = useRef(0);
+    const method = useEventCallback(cb);
+    useEffect(() => {
+        if (count.current === 0) {
+            count.current = 1;
+            return () => {
+                //
+            };
+        }
+        return method();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};
+
+/**
+ * get resize event with auto disconnect when layout destroy.
+ * bring with debounce for event not too many
+ * @param ref that ref for element
+ * @param callback callback when element resize
+ * @param performance options that improve performance
+ */
+const useResizeObserver = (
+/** target element ref */
+target, 
+/** trigger when `ResizeObserver` emit */
+callback, 
+/** performance options, `mode`, `time`, `ignoreFireWhenObserve` */
+performance = {}) => {
+    const { mode = 'debounce', time: performanceTime = 200, ignoreFireWhenObserve, options, } = performance;
+    const countRef = useRef(0);
+    const cb = useEventCallback((...args) => {
+        if (ignoreFireWhenObserve && countRef.current === 0) {
+            countRef.current = 1;
+            return;
+        }
+        return callback(...args);
+    });
+    const el = getRefElement(target);
+    const currentWindow = el ? ownerWindow(el) : window;
+    const observerRef = useResultRef(() => {
+        let resizeCallback;
+        if (mode === 'debounce') {
+            resizeCallback = debounce(cb, performanceTime, options);
+        }
+        else if (mode === 'throttle') {
+            resizeCallback = throttle(cb, performanceTime, options);
+        }
+        else {
+            resizeCallback = cb;
+        }
+        return new currentWindow.ResizeObserver(resizeCallback);
+    });
+    useLayoutEffect(() => {
+        if (!currentWindow?.ResizeObserver) {
+            return;
+        }
+        const el = getRefElement(target);
+        const observer = observerRef.current;
+        if (!el) {
+            throw new Error('please check element exist before bind resize observer');
+        }
+        observer.observe(el);
+        return () => {
+            observer.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [el]);
+    return observerRef.current;
+};
+
+/**
+ * trigger when overflow state change
+ */
+const useOverflow = (
+/** target element ref */
+target, 
+/** trigger when `ResizeObserver` emit */
+cb, 
+/**
+ * performance options, `mode`, `time`, `ignoreFireWhenObserve`
+ *
+ * @default { mode: 'throttle' time: 200 }
+ */
+performance = {
+    mode: 'throttle',
+    time: 200,
+}) => {
+    // * not have default value for that can trigger change first time.
+    const showRef = useRef();
+    return useResizeObserver(target, () => {
+        const element = getRefElement(target);
+        if (!element)
+            return;
+        const { scrollWidth, clientWidth, scrollHeight, clientHeight } = element;
+        const show = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (showRef.current === show)
+            return;
+        // only emit when state change
+        showRef.current = show;
+        cb(show, {
+            scrollWidth,
+            clientWidth,
+            scrollHeight,
+            clientHeight,
+        });
+    }, performance);
+};
+
+/**
+ * Returns a stateful like state with Ref, and a function to update it current value.
+ * can trigger update value without re-render
+ *
+ * @param value init value
+ * @param customUpdate you can custom you update method, or just set your `forceUpdate` to reuse same instance
+ * @returns an array with [ref, update]
+ *
+ * @example
+ * ```ts
+ * const [inputRef, updateInput] = useRefState(123);
+ *
+ * if(needReRender){
+ *   updateInput(456); // trigger re-render
+ * } else {
+ *   updateInput(456, false); // not trigger re-render
+ * }
+ * ```
+ */
+const useRefState = (value, customUpdate) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const forceUpdate = customUpdate ?? useForceUpdate();
+    const innerValueRef = useRef(value);
+    /**
+     * update ref value, set isUpdate to `false` will not trigger re-render
+     */
+    const setInnerValue = useEventCallback((toValue, 
+    /**
+     * is re-render
+     * @default true
+     */
+    isUpdate = true) => {
+        innerValueRef.current = toValue;
+        if (isUpdate) {
+            forceUpdate();
+        }
+    });
+    return [innerValueRef, setInnerValue];
+};
+
+/**
+ * get all matched breakpoints
+ * @param defaultBreakpoint use defaultBreakpoint when Responsive init (will pass undefined)
+ */
+const useResponsiveMatch = (defaultBreakpoint) => {
+    const _breakpoint = useResponsiveContext();
+    const breakpoint = _breakpoint === undefined ? defaultBreakpoint : _breakpoint;
+    if (breakpoint === undefined)
+        return {};
+    const matchDetail = getMatchDetail(breakpoint);
+    return matchDetail.matchMap;
+};
+
+/**
+ * cancelable sleep method.
+ *
+ * - sleep: a promise sleep
+ * - cancel: cancel that sleep event
+ * - getSleeping: get current sleeping state
+ */
+const useSleep = () => {
+    const timeoutIdRef = useRef();
+    const rejectRef = useRef();
+    const sleepingRef = useRef(false);
+    const clearCurrTimeout = () => {
+        const id = timeoutIdRef.current;
+        sleepingRef.current = false;
+        if (id !== undefined)
+            clearTimeout(id);
+    };
+    const sleep = (time) => new Promise((resolve, reject) => {
+        clearCurrTimeout();
+        sleepingRef.current = true;
+        rejectRef.current = reject;
+        timeoutIdRef.current = setTimeout(() => {
+            sleepingRef.current = false;
+            resolve();
+        }, time);
+    });
+    const cancel = () => {
+        clearCurrTimeout();
+        rejectRef.current?.();
+    };
+    useEffect(() => {
+        return () => {
+            clearCurrTimeout();
+        };
+    }, []);
+    return {
+        /**
+         * sleep method, that will be cancelable with `cancel`,
+         * and when trigger many time that will always clear previous sleep
+         */
+        sleep,
+        /**
+         * cancel current sleep timer
+         */
+        cancel,
+        /**
+         * return is current is sleeping
+         */
+        getSleeping: () => sleepingRef.current,
+    };
+};
+
+/* eslint-disable no-await-in-loop */
+/**
+ * retry times when exec callback fail
+ *
+ * * `retry`: that will auto add `times` end of your call back
+ * * `cancel`: cancel that retry event, that only cancel inner interval promise, **if you need cancel your `cb` promise, you should handle by yourself.**
+ */
+const useRetry = (
+/**
+ * exec callback, when you want to end that retry, return `true` with your callback
+ */
+cb, 
+/** retry options */
+options) => {
+    const { sleep, cancel: cancelSleep } = useSleep();
+    const isCancelRef = useRef(true);
+    const complete = () => {
+        isCancelRef.current = true;
+        options?.onComplete?.();
+    };
+    const cancel = () => {
+        if (!isCancelRef.current) {
+            // * when outside cancel
+            options?.onCancel?.();
+            complete();
+        }
+        cancelSleep();
+    };
+    const retry = async (...args) => {
+        cancel();
+        isCancelRef.current = false;
+        options?.onStart?.();
+        // * when exec success, just return directly.
+        if (await cb(...args)) {
+            if (!isCancelRef.current) {
+                options?.onSuccess?.();
+                complete();
+            }
+            return;
+        }
+        if (!options)
+            return;
+        const { retryTimes, intervalTime, onSuccess } = options;
+        for (let i = 0; i < retryTimes; i++) {
+            if (isCancelRef.current) {
+                return;
+            }
+            try {
+                await sleep(intervalTime);
+            }
+            catch (error) {
+                return;
+            }
+            if (await cb(...args, i)) {
+                if (!isCancelRef.current) {
+                    onSuccess?.();
+                    complete();
+                }
+                return;
+            }
+        }
+        complete();
+    };
+    return {
+        /**
+         * retry method, that will be cancelable with `cancel`,
+         * and when trigger many time that will always clear previous retry
+         */
+        retry,
+        /**
+         * cancel current retry
+         */
+        cancel,
+    };
+};
+
+/**
+ * @param onTabOut Callback fired when a "tab out" event is detected.
+ */
+const useTabOut = (onTabOut) => {
+    const lastKeyDownIsTabRef = useRef(false);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Tab') {
+            lastKeyDownIsTabRef.current = true;
+        }
+    };
+    const handleKeyUp = (e) => {
+        lastKeyDownIsTabRef.current = false;
+    };
+    const handleBlur = (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget) &&
+            lastKeyDownIsTabRef.current) {
+            onTabOut(e);
+        }
+    };
+    return {
+        tabOutHandler: {
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            onBlur: handleBlur,
+        },
+    };
+};
+
+/**
+ * provide a throttle method for throttle method
+ * @param fn method for throttle
+ * @param throttleTime throttle timeout value, default is  `200`ms
+ * @param options throttle setting, default is  `{trailing: true, leading: true}`, detail see lodash
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useThrottle = (fn, throttleTime = 200, options) => {
+    const memoFn = useEventCallback(fn);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const throttleFn = useCallback(throttle(memoFn, throttleTime, options), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => throttleFn.cancel(), []);
+    return throttleFn;
+};
+
+/**
+ * Internal hook to detect if the component is running in a test runner environment
+ * Used by Storybook stories to disable network requests and animations during testing
+ * @returns {boolean} true if running in test runner (headless browser), false otherwise
+ * @internal
+ */
+const useTestRunnerDetection = () => {
+    return useMemo(() => {
+        return (typeof window !== 'undefined' &&
+            (window.navigator?.webdriver || window.chrome?.webdriver));
+    }, []);
+};
+
+function useTimeout(callback, delay) {
+    const savedCallback = useRef(callback);
+    savedCallback.current = callback;
+    // Set up the timeout.
+    useEffect(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (!delay && delay !== 0) {
+            return;
+        }
+        const id = setTimeout(() => savedCallback.current(), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+}
+
+/**
+ * Check if Font Loading API is available in the current environment
+ * @returns boolean indicating if document.fonts.ready is available
+ */
+const isFontLoadingAPIAvailable = () => {
+    return (typeof document !== 'undefined' &&
+        document.fonts &&
+        typeof document.fonts.ready === 'object' &&
+        typeof document.fonts.ready.then === 'function');
+};
+/**
+ * Hook to detect when fonts are loaded
+ *
+ * This hook provides graceful degradation:
+ * - When Font Loading API is not available (older browsers, SSR, test environments),
+ *   it assumes fonts are loaded to prevent blocking UI
+ * - When disabled, it immediately returns true without listening to font events
+ * - When enabled and API is available, it listens for font loading completion
+ *
+ * @param enabled - Whether to listen for font loading events (default: true)
+ * @returns boolean indicating whether fonts are loaded
+ */
+const useFontLoaded = (enabled = true) => {
+    const [loaded, setLoaded] = useState(() => !enabled || !isFontLoadingAPIAvailable());
+    useEffect(() => {
+        if (!enabled || !isFontLoadingAPIAvailable()) {
+            return;
+        }
+        let cancelled = false;
+        document.fonts.ready.then(() => {
+            if (!cancelled) {
+                setLoaded(true);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [enabled]);
+    return loaded;
+};
+
+/**
+ * Hook to lock body scroll while allowing scroll on target element
+ * Uses body-scroll-lock library for cross-platform compatibility
+ *
+ * @param isLocked - Whether scroll should be locked
+ * @param targetElement - Element that should remain scrollable (optional)
+ * @param options - Configuration options
+ */
+const useBodyScrollLock = (isLocked, targetElement, options = {}) => {
+    const { disabled = false, reserveScrollBarGap = true, allowTouchMove, } = options;
+    const { document } = useWindowContext();
+    useEffect(() => {
+        if (disabled || !document?.body)
+            return;
+        const element = targetElement || document.body;
+        if (isLocked) {
+            disableBodyScroll(element, {
+                reserveScrollBarGap,
+                allowTouchMove,
+            });
+        }
+        return () => {
+            if (isLocked) {
+                enableBodyScroll(element);
+            }
+        };
+    }, [
+        isLocked,
+        targetElement,
+        disabled,
+        reserveScrollBarGap,
+        allowTouchMove,
+        document,
+    ]);
+};
+
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, visuallyHiddenStyles };