@ringcentral/spring-base 1.7.0

package/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/index.js

@@ -0,0 +1,16 @@
+export { configure, rcConfiguration } from './config.js';
+export { RcResponsiveContext, WindowContext, breakpointList, getMatchDetail, useResponsiveContext, useWindowContext } from './contexts.js';
+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 } from './hooks.js';
+export { unstable_ownerDocument as ownerDocument, unstable_useControlled as useControlled } from '@mui/utils';
+export { a11yKeyboard, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isSuiElement, isUrl, isWebKit154, omit, outerSize, pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, useClasses } from './utils.js';
+export { a as ariaHideOutside, b as combineClasses, c as combineProps, g as getRefElement, i as isRef, l as logInDev, o as ownerWindow, t as twMerge } from './chunks/twMerge.js';
+import 'react';
+import 'lodash/uniqueId';
+import 'lodash/isPlainObject';
+import 'lodash/omit';
+import 'lodash/pick';
+import 'lodash/debounce';
+import 'lodash/noop';
+import 'lodash/throttle';
+import 'body-scroll-lock';
+import 'tailwind-merge';

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ringcentral/spring-base",
+  "version": "1.7.0",
+  "author": "RingCentral",
+  "description": "Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/utils": "^6.0.2",
+    "@types/lodash": "^4.14.182",
+    "body-scroll-lock": "4.0.0-beta.0",
+    "clsx": "^1.2.1",
+    "framer-motion": "^6.5.1",
+    "lodash": "^4.17.21",
+    "tailwind-merge": "^2.5.4",
+    "type-fest": "^2.12.2"
+  },
+  "peerDependencies": {
+    "@types/react": ">=17.0.3",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/config.d.ts

@@ -0,0 +1,40 @@
+declare type WarningFunctionType = ((
+/** warning message */
+message: string, 
+/** addition options with that warning */
+options?: {
+    level: 'warn' | 'error';
+}) => void) | undefined;
+interface RcConfigurationType {
+    /** is ignore all warning show from spring */
+    WARNING_IGNORE: boolean;
+    WARNING_FUNCTION: WarningFunctionType;
+}
+/**
+ * config global setting
+ *
+ * ```ts
+ * configure({
+ *   warning: false
+ * })
+ * ```
+ * ## WARNING related method and  only work in `development mode`
+ *
+ * `WARNING_IGNORE`:  only work in `development mode`
+ * `WARNING_FUNCTION` only work in `development mode`
+ */
+declare let rcConfiguration: RcConfigurationType;
+declare type RcConfigure = {
+    /** is show warning message in development */
+    warning?: boolean;
+    /** custom warning callback */
+    warningFunction?: WarningFunctionType;
+};
+/**
+ * set config with Spring
+ *
+ * ## WARNING method only work in `development mode`
+ */
+export declare const configure: (options: RcConfigure) => void;
+export { rcConfiguration };
+export type { WarningFunctionType };

package/src/contexts/ResponsiveContext/ResponsiveContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MatchedBreakpoint } from './types';
+declare type RcResponsiveContextValue = MatchedBreakpoint | undefined;
+declare const RcResponsiveContext: import("react").Context<RcResponsiveContextValue>;
+declare const useResponsiveContext: () => RcResponsiveContextValue;
+export { RcResponsiveContext, useResponsiveContext };
+export type { RcResponsiveContextValue };

package/src/contexts/ResponsiveContext/breakpointList.d.ts

@@ -0,0 +1,3 @@
+import { Breakpoint } from './types';
+/** small to large */
+export declare const breakpointList: Breakpoint[];

package/src/contexts/ResponsiveContext/getMatchDetail.d.ts

@@ -0,0 +1,2 @@
+import { BreakpointMatchDetail, MatchedBreakpoint } from './types';
+export declare const getMatchDetail: (breakpoint: MatchedBreakpoint) => BreakpointMatchDetail;

package/src/contexts/ResponsiveContext/index.d.ts

@@ -0,0 +1,4 @@
+export * from './breakpointList';
+export * from './getMatchDetail';
+export * from './ResponsiveContext';
+export * from './types';

package/src/contexts/ResponsiveContext/types.d.ts

@@ -0,0 +1,24 @@
+export declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * null is no match, it means small than XS
+ */
+export declare type MatchedBreakpoint = Breakpoint | null;
+export declare type GTBreakpoint = 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg' | 'gt-xl';
+export declare type LTBreakpoint = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl';
+export declare type FullBreakpoint = GTBreakpoint | LTBreakpoint | Breakpoint;
+export declare type BreakpointMatchMap = Partial<Record<'gtXS' | 'gtSM' | 'gtMD' | 'gtLG' | 'gtXL' | 'ltSM' | 'ltMD' | 'ltLG' | 'ltXL' | FullBreakpoint, true>>;
+export declare type BreakpointMatchDetail = {
+    matchBP: MatchedBreakpoint;
+    /**
+     * large to small
+     * example: [gtSM, gtXS]
+     */
+    gtMatchGroup: GTBreakpoint[];
+    /**
+     * small to large
+     * example: [ltSM, ltLG]
+     */
+    ltMatchGroup: LTBreakpoint[];
+    matchMap: BreakpointMatchMap;
+};
+export declare type BreakpointMatchGroups = Pick<BreakpointMatchDetail, 'gtMatchGroup' | 'ltMatchGroup'>;

package/src/contexts/WindowContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type WindowContextValue = {
+    globalThis: typeof globalThis;
+    externalWindow?: Window & typeof globalThis;
+    document?: Document;
+};
+declare const WindowContext: import("react").Context<WindowContextValue>;
+declare const useWindowContext: () => WindowContextValue;
+export { WindowContext, useWindowContext };

package/src/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WindowContext';
+export * from './ResponsiveContext';

package/src/hooks/index.d.ts

@@ -0,0 +1,43 @@
+export * from './useA11yKeyEvent';
+export * from './useActive';
+export * from './useAnnouncer';
+export * from './useAriaHideOutside';
+export * from './useAudio';
+export * from './useChange';
+export * from './useClickAway';
+export * from './useControlled';
+export * from './useDebounce';
+export * from './useEventCallback';
+export * from './useEventListener';
+export * from './useEver';
+export * from './useFocusVisible';
+export * from './useForceUpdate';
+export * from './useForkRef';
+export * from './useGlobalListener';
+export * from './useHiddenTabindex';
+export * from './useHover';
+export * from './useId';
+export * from './useImgLoaded';
+export * from './useInterval';
+export * from './useIsFocusVisible';
+export * from './useKeyDownOnce';
+export * from './useKeyboardMoveFocus';
+export * from './useLongPress';
+export * from './useMountState';
+export * from './useOnLayoutReRender';
+export * from './useOnReRender';
+export * from './useOverflow';
+export * from './usePrevious';
+export * from './useRefState';
+export * from './useResizeObserver';
+export * from './useResponsiveMatch';
+export * from './useResultRef';
+export * from './useRetry';
+export * from './useSleep';
+export * from './useTabOut';
+export * from './useThrottle';
+export * from './useTestRunnerDetection';
+export * from './useTimeout';
+export * from './useTouchMouseEvent';
+export * from './useFontLoaded';
+export * from './useBodyScrollLock';

package/src/hooks/useA11yKeyEvent/index.d.ts

@@ -0,0 +1 @@
+export * from './useA11yKeyEvent';

package/src/hooks/useA11yKeyEvent/useA11yKeyEvent.d.ts

@@ -0,0 +1,23 @@
+export declare type useA11yKeyEventOptions = {
+    /**
+     * that event should only trigger from target element, ignore all `propagation` events
+     */
+    onlyOnFocus?: boolean;
+    /**
+     * is that need preventDefault when trigger `callBack`,
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * check point for `event.key`
+     *
+     * @default ['Enter', ' ']
+     */
+    checkKeys?: string[];
+};
+/**
+ * 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`
+ */
+export declare const useA11yKeyEvent: (fn?: ((e: any) => void) | undefined, { onlyOnFocus, preventDefault, checkKeys, }?: useA11yKeyEventOptions) => (event: React.KeyboardEvent<HTMLElement>) => void;

package/src/hooks/useActive/index.d.ts

@@ -0,0 +1 @@
+export * from './useActive';

package/src/hooks/useActive/useActive.d.ts

@@ -0,0 +1,23 @@
+import { EventHandler, KeyboardEventHandler, SyntheticEvent } from 'react';
+export declare type UseActiveOptions = {
+    onKeyDown?: KeyboardEventHandler;
+    onKeyUp?: KeyboardEventHandler;
+    /**
+     * will receive keyboard event
+     */
+    onClick?: EventHandler<SyntheticEvent>;
+    disabled?: boolean;
+};
+/**
+ * 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`
+ */
+export declare const useActive: ({ onKeyDown, onKeyUp, onClick, disabled, }?: UseActiveOptions) => {
+    activeHandlers: {
+        onKeyDown: KeyboardEventHandler<Element> | undefined;
+        onKeyUp: KeyboardEventHandler<Element> | undefined;
+        onClick: ((event: SyntheticEvent<Element, Event>) => void) | undefined;
+    };
+    active: boolean;
+};

package/src/hooks/useAnnouncer/index.d.ts

@@ -0,0 +1 @@
+export * from './useAnnouncer';

package/src/hooks/useAnnouncer/useAnnouncer.d.ts

@@ -0,0 +1,12 @@
+export declare const visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
+/**
+ * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
+ */
+export declare const useAnnouncer: (id?: string | undefined) => (message?: string | undefined) => void;

package/src/hooks/useAriaHideOutside/index.d.ts

@@ -0,0 +1 @@
+export * from './useAriaHideOutside';

package/src/hooks/useAriaHideOutside/useAriaHideOutside.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type UseAriaHideOutsideProps = {
+    enable?: boolean;
+};
+export declare const useAriaHideOutside: (props?: UseAriaHideOutsideProps) => {
+    ariaHideOutsideRef: import("react").RefObject<HTMLElement>;
+    /**
+     * Whether the `aria-hidden` attribute is being applied to outside elements.
+     * When true, elements outside the ref are hidden from screen readers.
+     */
+    ariaHideEnabled: boolean;
+};

package/src/hooks/useAudio/index.d.ts

@@ -0,0 +1 @@
+export * from './useAudio';

package/src/hooks/useAudio/useAudio.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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}
+ */
+export declare const useAudio: (init?: ((audio: HTMLAudioElement) => void) | undefined) => HTMLAudioElement;

package/src/hooks/useBodyScrollLock/index.d.ts

@@ -0,0 +1 @@
+export * from './useBodyScrollLock';

package/src/hooks/useBodyScrollLock/useBodyScrollLock.d.ts

@@ -0,0 +1,25 @@
+export interface UseBodyScrollLockOptions {
+    /**
+     * If true, disables the scroll lock
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Reserve scrollbar gap to prevent layout shift
+     * @default true
+     */
+    reserveScrollBarGap?: boolean;
+    /**
+     * Allow touch move on specific elements
+     */
+    allowTouchMove?: (el: Element) => boolean;
+}
+/**
+ * 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
+ */
+export declare const useBodyScrollLock: (isLocked: boolean, targetElement?: HTMLElement | null | undefined, options?: UseBodyScrollLockOptions) => void;

package/src/hooks/useChange/index.d.ts

@@ -0,0 +1 @@
+export * from './useChange';

package/src/hooks/useChange/useChange.d.ts

@@ -0,0 +1,12 @@
+/**
+ * get value when prev listen value change
+ * @param cb that method you want calculate to get value
+ * @param listenCb prev compare listener value
+ */
+export declare const useChange: <T, K>(cb: (prevValue: K | undefined, nextValue: K) => T, listenCb: () => K) => T;
+/**
+ * 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
+ */
+export declare const useDepsChange: <T, K extends any[]>(cb: (prevValue: K | undefined, nextValue: K) => T, deps: K) => T;

package/src/hooks/useClickAway/index.d.ts

@@ -0,0 +1 @@
+export * from './useClickAway';

package/src/hooks/useClickAway/useClickAway.d.ts

@@ -0,0 +1,22 @@
+import { SyntheticEvent } from 'react';
+export declare type useClickAwayProps = {
+    /**
+     * If `true`, the React tree is ignored and only the DOM tree is considered.
+     * This prop changes how portaled elements are handled.
+     * @default false
+     */
+    disableReactTree?: boolean;
+    isEnabled?: boolean;
+};
+/**
+ * @deprecated Use `ClickAwayListener` from `@mui/base` instead.
+ *
+ * @param onClickAway Callback fired when a "click away" event is detected.
+ */
+export declare const useClickAway: (onClickAway: (event: MouseEvent | TouchEvent) => void, props?: useClickAwayProps) => {
+    clickAwayRef: (instance: Element | null) => void;
+    clickAwayHandler: {
+        onClick: (e: SyntheticEvent) => void;
+        onTouchEnd: (e: SyntheticEvent) => void;
+    };
+};

package/src/hooks/useControlled/index.d.ts

@@ -0,0 +1 @@
+export * from './useControlled';

package/src/hooks/useControlled/useControlled.d.ts

@@ -0,0 +1 @@
+export { unstable_useControlled as useControlled } from '@mui/utils';

package/src/hooks/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export * from './useDebounce';

package/src/hooks/useDebounce/useDebounce.d.ts

@@ -0,0 +1,8 @@
+import type { DebounceSettings } from 'lodash';
+/**
+ * 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
+ */
+export declare const useDebounce: <F extends (...args: any[]) => any>(fn: F, debounceTime?: number, options?: DebounceSettings | undefined) => import("lodash").DebouncedFunc<F>;

package/src/hooks/useEventCallback/index.d.ts

@@ -0,0 +1 @@
+export * from './useEventCallback';

package/src/hooks/useEventCallback/useEventCallback.d.ts

@@ -0,0 +1 @@
+export declare const useEventCallback: <T extends (...args: any[]) => any>(func: T) => T;

package/src/hooks/useEventListener/index.d.ts

@@ -0,0 +1 @@
+export * from './useEventListener';

package/src/hooks/useEventListener/useEventListener.d.ts

@@ -0,0 +1,32 @@
+import { RefOrElementOrCallback } from '../../utils';
+export declare type UseEventListenerAction = {
+    listen: () => void;
+    remove: () => void;
+};
+export declare type UseEventListenerConfig = {
+    /**
+     * start listening when component mounted
+     *
+     * @default true
+     */
+    startImmediately?: boolean;
+};
+/**
+ * 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'))
+ * ```
+ */
+export declare function useEventListener<T = Event>(target: RefOrElementOrCallback<EventTarget> | EventTarget | null | undefined, key: string, callback: (event: T) => void, options?: AddEventListenerOptions & UseEventListenerConfig): {
+    listen: () => void;
+    remove: () => void;
+};

package/src/hooks/useEver/index.d.ts

@@ -0,0 +1 @@
+export * from './useEver';

package/src/hooks/useEver/useEver.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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);
+ * ```
+ */
+export declare const useEver: <T>(value: T, targetValue?: (value: T) => boolean) => boolean;

package/src/hooks/useFocusVisible/index.d.ts

@@ -0,0 +1 @@
+export * from './useFocusVisible';

package/src/hooks/useFocusVisible/useFocusVisible.d.ts

@@ -0,0 +1,22 @@
+import { FocusEventHandler, FocusEvent, Ref } from 'react';
+export declare type UseFocusVisibleOptions = {
+    /** invoke when focusVisiable or focusVisibleWithin is true */
+    onFocusVisible?: FocusEventHandler;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    within?: boolean;
+};
+/**
+ * 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`
+ */
+export declare const useFocusVisible: ({ onFocusVisible, onFocus, onBlur, within, }?: UseFocusVisibleOptions) => {
+    focusVisibleHandlers: {
+        onBlur: (event: FocusEvent) => void;
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+    };
+    focusVisibleRef: Ref<any>;
+    focusVisible: boolean;
+    focusVisibleWithin: boolean;
+};

package/src/hooks/useFontLoaded/index.d.ts

@@ -0,0 +1 @@
+export * from './useFontLoaded';

package/src/hooks/useFontLoaded/useFontLoaded.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+export declare const useFontLoaded: (enabled?: boolean) => boolean;

package/src/hooks/useForceUpdate/index.d.ts

@@ -0,0 +1 @@
+export * from './useForceUpdate';

package/src/hooks/useForceUpdate/useForceUpdate.d.ts

@@ -0,0 +1,5 @@
+/**
+ * a method for trigger force update
+ * @returns force update method
+ */
+export declare function useForceUpdate(): () => void;

package/src/hooks/useForkRef/index.d.ts

@@ -0,0 +1 @@
+export * from './useForkRef';

package/src/hooks/useForkRef/useForkRef.d.ts

@@ -0,0 +1,19 @@
+import { unstable_useForkRef as MuiUseForkRef } from '@mui/utils';
+/**
+ * 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} />
+ * ```
+ */
+export declare const useForkRef: typeof MuiUseForkRef;

package/src/hooks/useGlobalListener/createGlobalListener.d.ts

@@ -0,0 +1,55 @@
+import { SyntheticEvent } from 'react';
+import { RefOrElementOrCallback } from '../../utils';
+export declare const globalListenerEventMap: Map<string, {
+    /**
+     * listener exec method
+     */
+    exec: (e: any) => void;
+    /**
+     * all listener
+     */
+    listeners: Set<(e: any) => void>;
+}>;
+export declare type CreateGlobalListenerConfig = {
+    /**
+     * custom key for determining different event group, default is same as `key`
+     */
+    customKey?: string;
+    /**
+     * custom binding event target, default is `window`
+     */
+    target?: RefOrElementOrCallback | EventTarget;
+};
+/**
+ * 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
+ * ```
+ */
+export declare const createGlobalListener: <T extends SyntheticEvent<Element, Event>>(key: string, listener: (event?: T | undefined) => void, options?: boolean | AddEventListenerOptions | undefined, { customKey, target: targetProp, }?: CreateGlobalListenerConfig) => {
+    listen: () => void;
+    /**
+     * remove listener
+     */
+    remove: () => void;
+    /**
+     * current listener state
+     */
+    readonly state: {
+        /**
+         * current listener state count
+         */
+        readonly count: number;
+        /**
+         * is that be listening
+         */
+        listening: boolean;
+    };
+};

package/src/hooks/useGlobalListener/index.d.ts

@@ -0,0 +1,2 @@
+export * from './createGlobalListener';
+export * from './useGlobalListener';

package/src/hooks/useGlobalListener/useGlobalListener.d.ts

@@ -0,0 +1,14 @@
+import { SyntheticEvent } from 'react';
+import { createGlobalListener, CreateGlobalListenerConfig } from './createGlobalListener';
+declare type GlobalListener = ReturnType<typeof createGlobalListener>;
+export declare type UseGlobalListenerConfig = CreateGlobalListenerConfig & {
+    /**
+     * start listening when component mounted
+     *
+     * @default true
+     */
+    startImmediately?: boolean;
+};
+export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, config?: UseGlobalListenerConfig): GlobalListener;
+export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, options?: AddEventListenerOptions | boolean, config?: UseGlobalListenerConfig): GlobalListener;
+export {};

package/src/hooks/useHiddenTabindex/index.d.ts

@@ -0,0 +1 @@
+export * from './useHiddenTabindex';

package/src/hooks/useHiddenTabindex/useHiddenTabindex.d.ts

@@ -0,0 +1,9 @@
+import { RefOrElementOrCallback } from '../../utils';
+/**
+ * group hidden logic, when binding events element focus,
+ * that hiddenRef will auto be `tabindex={-1}` *
+ */
+export declare const useHiddenTabindex: <T extends HTMLElement>(target: RefOrElementOrCallback<T>) => {
+    onFocus: () => void;
+    onBlur: () => void;
+};