@ringcentral/spring-base 1.9.3 → 1.11.1

package/hooks.js

@@ -1,7 +1,7 @@
 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 { useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useWindowContext, useResponsiveContext, getMatchDetail } from './contexts.js';
 import uniqueId from 'lodash/uniqueId';
 import { useButton as useButton$1 } from '@mui/base/useButton';
@@ -41,10 +41,13 @@ const isNativeButton = (el) => {
 };
 const useActive = ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled = false, } = {}) => {
     const [active, setActive] = useState(false);
+    const activeTargetRef = useRef(null);
     const { document: targetDocument = document } = useWindowContext();
     useEffect(() => {
-        if (disabled)
+        if (disabled) {
             setActive(false);
+            activeTargetRef.current = null;
+        }
     }, [disabled]);
     if (disabled) {
         return {
@@ -63,16 +66,19 @@ const useActive = ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled = false,
         }, { once: true });
     };
     const handleKeyDown = (event) => {
+        const isSpaceKey = event.key === ' ';
         onKeyDown?.(event);
         if (event.defaultPrevented) {
+            if (isSpaceKey) {
+                activeTargetRef.current = null;
+            }
             return;
         }
-        if (event.target === event.currentTarget &&
-            !isNativeButton(event.target) &&
-            event.key === ' ') {
-            event.preventDefault();
-        }
-        if (event.target === event.currentTarget && event.key === ' ') {
+        if (event.target === event.currentTarget && isSpaceKey) {
+            activeTargetRef.current = event.currentTarget;
+            if (!isNativeButton(event.target)) {
+                event.preventDefault();
+            }
             setActive(true);
         }
         if (event.target === event.currentTarget &&
@@ -83,13 +89,19 @@ const useActive = ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled = false,
         }
     };
     const handleKeyUp = (event) => {
+        const isSpaceKey = event.key === ' ';
         if (event.target === event.currentTarget) {
             setActive(false);
         }
         onKeyUp?.(event);
-        if (event.target === event.currentTarget &&
+        const hadMatchingSpaceKeyDown = activeTargetRef.current === event.currentTarget;
+        if (isSpaceKey) {
+            activeTargetRef.current = null;
+        }
+        if (hadMatchingSpaceKeyDown &&
+            event.target === event.currentTarget &&
             !isNativeButton(event.target) &&
-            event.key === ' ' &&
+            isSpaceKey &&
             !event.defaultPrevented) {
             onClick?.(event);
         }
@@ -140,19 +152,36 @@ const visuallyHiddenStyles = `
 `;
 const useAnnouncer = (id) => {
     const _id = useId(id ? `rc-announcer-${id}` : 'rc-announcer', !id);
+    const { document: targetDocument, externalWindow, globalThis: contextGlobal, } = useWindowContext();
+    const win = externalWindow ?? contextGlobal;
     const ref = useRef(null);
+    const lastMessageRef = useRef();
+    const pendingTimerRef = useRef(null);
+    const clearPendingTimer = useCallback(() => {
+        pendingTimerRef.current?.();
+        pendingTimerRef.current = null;
+    }, []);
     useEffect(() => {
-        const el = document.createElement('div');
+        const currentDocument = targetDocument ??
+            (typeof contextGlobal.document !== 'undefined'
+                ? contextGlobal.document
+                : undefined);
+        if (!currentDocument?.body) {
+            return undefined;
+        }
+        const el = currentDocument.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('data-live-announcer', 'true');
         el.setAttribute('style', visuallyHiddenStyles);
-        document.body.appendChild(el);
+        currentDocument.body.appendChild(el);
         return () => {
-            setTimeout(() => {
-                const body = document.body;
+            clearPendingTimer();
+            win.setTimeout(() => {
+                const body = currentDocument.body;
                 if (body.contains(el)) {
                     body.removeChild(el);
                 }
@@ -161,14 +190,37 @@ const useAnnouncer = (id) => {
                 }
             });
         };
-    }, [_id]);
+    }, [_id, targetDocument, contextGlobal, win, clearPendingTimer]);
     return useCallback((message) => {
         const el = ref.current;
-        if (el && message) {
-            el.setAttribute('aria-hidden', 'false');
+        if (!el)
+            return;
+        clearPendingTimer();
+        if (!message) {
+            el.textContent = '';
+            lastMessageRef.current = undefined;
+            return;
+        }
+        if (lastMessageRef.current !== message) {
             el.textContent = message;
+            lastMessageRef.current = message;
+            return;
         }
-    }, []);
+        el.textContent = '\u200B';
+        const timerId = win.setTimeout(() => {
+            if (el && ref.current === el) {
+                el.textContent = message;
+                lastMessageRef.current = message;
+            }
+            if (pendingTimerRef.current === cancelTimer) {
+                pendingTimerRef.current = null;
+            }
+        }, 100);
+        const cancelTimer = () => {
+            win.clearTimeout(timerId);
+        };
+        pendingTimerRef.current = cancelTimer;
+    }, [clearPendingTimer, win]);
 };
 
 function useButton(parameters) {
@@ -486,6 +538,18 @@ 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 globalFocusListenerRef = useRef(null);
+    const containerRef = useRef(null);
+    const ownerDocumentRef = useRef(null);
+    const removeGlobalFocusListener = useCallback(() => {
+        if (globalFocusListenerRef.current) {
+            ownerDocumentRef.current?.removeEventListener('focus', globalFocusListenerRef.current, true);
+            globalFocusListenerRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return removeGlobalFocusListener;
+    }, [removeGlobalFocusListener]);
     const handleBlur = (event) => {
         handleBlurVisible(event);
         if (isFocusVisibleRef.current === false) {
@@ -495,6 +559,11 @@ const useFocusVisible = ({ onFocusVisible, onFocus, onBlur, within = false, } =
                 setFocusVisibleWithin(false);
             }
         }
+        if (within &&
+            globalFocusListenerRef.current &&
+            !event.currentTarget.contains(event.relatedTarget)) {
+            removeGlobalFocusListener();
+        }
         onBlur?.(event);
     };
     const handleFocus = (event) => {
@@ -524,6 +593,25 @@ const useFocusVisible = ({ onFocusVisible, onFocus, onBlur, within = false, } =
         if (isFocusVisibleRef.current === true) {
             updateState();
             onFocusVisible?.(event);
+            if (within) {
+                removeGlobalFocusListener();
+                containerRef.current = event.currentTarget;
+                ownerDocumentRef.current = event.currentTarget.ownerDocument;
+                const ownerDoc = ownerDocumentRef.current;
+                const listener = (e) => {
+                    if (e.target && !containerRef.current?.contains(e.target)) {
+                        setFocusVisibleWithin(false);
+                        ownerDoc.removeEventListener('focus', listener, true);
+                        globalFocusListenerRef.current = null;
+                    }
+                };
+                globalFocusListenerRef.current = listener;
+                ownerDoc.addEventListener('focus', listener, true);
+            }
+        }
+        else if (within) {
+            setFocusVisibleWithin(false);
+            removeGlobalFocusListener();
         }
         onFocus?.(event);
     };
@@ -646,8 +734,8 @@ function getListenerOverloadOption(args) {
     }
     else {
         const { startImmediately, customKey, target, ...restOptions } = {
-            ...(args[0] || {}),
-            ...(args[1] || {}),
+            ...args[0],
+            ...args[1],
         };
         options = restOptions;
         config = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-base",
-  "version": "1.9.3",
+  "version": "1.11.1",
   "author": "RingCentral",
   "description": "Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications",
   "main": "./index.js",

package/src/config.d.ts

@@ -1,4 +1,4 @@
-declare type WarningFunctionType = ((message: string, options?: {
+type WarningFunctionType = ((message: string, options?: {
     level: 'warn' | 'error';
 }) => void) | undefined;
 interface RcConfigurationType {
@@ -6,7 +6,7 @@ interface RcConfigurationType {
     WARNING_FUNCTION: WarningFunctionType;
 }
 declare let rcConfiguration: RcConfigurationType;
-declare type RcConfigure = {
+type RcConfigure = {
     warning?: boolean;
     warningFunction?: WarningFunctionType;
 };

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

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

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

@@ -1,13 +1,13 @@
-export declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-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 = {
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MatchedBreakpoint = Breakpoint | null;
+export type GTBreakpoint = 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg' | 'gt-xl';
+export type LTBreakpoint = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl';
+export type FullBreakpoint = GTBreakpoint | LTBreakpoint | Breakpoint;
+export type BreakpointMatchMap = Partial<Record<'gtXS' | 'gtSM' | 'gtMD' | 'gtLG' | 'gtXL' | 'ltSM' | 'ltMD' | 'ltLG' | 'ltXL' | FullBreakpoint, true>>;
+export type BreakpointMatchDetail = {
     matchBP: MatchedBreakpoint;
     gtMatchGroup: GTBreakpoint[];
     ltMatchGroup: LTBreakpoint[];
     matchMap: BreakpointMatchMap;
 };
-export declare type BreakpointMatchGroups = Pick<BreakpointMatchDetail, 'gtMatchGroup' | 'ltMatchGroup'>;
+export type BreakpointMatchGroups = Pick<BreakpointMatchDetail, 'gtMatchGroup' | 'ltMatchGroup'>;

package/src/contexts/WindowContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type WindowContextValue = {
+type WindowContextValue = {
     globalThis: typeof globalThis;
     externalWindow?: Window & typeof globalThis;
     document?: Document;

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

@@ -1,6 +1,6 @@
-export declare type useA11yKeyEventOptions = {
+export type useA11yKeyEventOptions = {
     onlyOnFocus?: boolean;
     preventDefault?: boolean;
     checkKeys?: string[];
 };
-export declare const useA11yKeyEvent: (fn?: ((e: any) => void) | undefined, { onlyOnFocus, preventDefault, checkKeys, }?: useA11yKeyEventOptions) => (event: React.KeyboardEvent<HTMLElement>) => void;
+export declare const useA11yKeyEvent: (fn?: (e: any) => void, { onlyOnFocus, preventDefault, checkKeys, }?: useA11yKeyEventOptions) => (event: React.KeyboardEvent<HTMLElement>) => void;

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

@@ -1,5 +1,5 @@
 import { EventHandler, KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from 'react';
-export declare type UseActiveOptions = {
+export type UseActiveOptions = {
     onKeyDown?: KeyboardEventHandler;
     onKeyUp?: KeyboardEventHandler;
     onMouseDown?: MouseEventHandler;
@@ -8,10 +8,10 @@ export declare type UseActiveOptions = {
 };
 export declare const useActive: ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled, }?: UseActiveOptions) => {
     activeHandlers: {
-        onKeyDown: KeyboardEventHandler<Element> | undefined;
-        onKeyUp: KeyboardEventHandler<Element> | undefined;
-        onMouseDown: MouseEventHandler<Element> | undefined;
-        onClick: ((event: SyntheticEvent<Element, Event>) => void) | undefined;
+        onKeyDown: KeyboardEventHandler | undefined;
+        onKeyUp: KeyboardEventHandler | undefined;
+        onMouseDown: MouseEventHandler | undefined;
+        onClick: EventHandler<SyntheticEvent<Element, Event>> | undefined;
     };
     active: boolean;
 };

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

@@ -1,2 +1,2 @@
 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";
-export declare const useAnnouncer: (id?: string | undefined) => (message?: string | undefined) => void;
+export declare const useAnnouncer: (id?: string) => (message?: string) => void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type UseAriaHideOutsideProps = {
+export type UseAriaHideOutsideProps = {
     enable?: boolean;
 };
 export declare const useAriaHideOutside: (props?: UseAriaHideOutsideProps) => {

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

@@ -1 +1 @@
-export declare const useAudio: (init?: ((audio: HTMLAudioElement) => void) | undefined) => HTMLAudioElement;
+export declare const useAudio: (init?: (audio: HTMLAudioElement) => void) => HTMLAudioElement;

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

@@ -1,4 +1,4 @@
-declare type Win = Window & typeof globalThis;
+type Win = Window & typeof globalThis;
 export interface ScrollLockOptions {
     reserveScrollBarGap?: boolean;
     allowTouchMove?: (el: Element) => boolean;

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

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare type UseBodyScrollLockTarget = HTMLElement | RefObject<HTMLElement | null> | null | undefined;
+export type UseBodyScrollLockTarget = HTMLElement | RefObject<HTMLElement | null> | null | undefined;
 export interface UseBodyScrollLockOptions {
     disabled?: boolean;
     reserveScrollBarGap?: boolean;

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

@@ -1,10 +1,10 @@
-import { SyntheticEvent } from 'react';
-export declare type useClickAwayProps = {
+import { RefCallback, SyntheticEvent } from 'react';
+export type useClickAwayProps = {
     disableReactTree?: boolean;
     isEnabled?: boolean;
 };
 export declare const useClickAway: (onClickAway: (event: MouseEvent | TouchEvent) => void, props?: useClickAwayProps) => {
-    clickAwayRef: (instance: Element | null) => void;
+    clickAwayRef: RefCallback<Element>;
     clickAwayHandler: {
         onClick: (e: SyntheticEvent) => void;
         onTouchEnd: (e: SyntheticEvent) => void;

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

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

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

@@ -1,9 +1,9 @@
 import { RefOrElementOrCallback } from '../../utils';
-export declare type UseEventListenerAction = {
+export type UseEventListenerAction = {
     listen: () => void;
     remove: () => void;
 };
-export declare type UseEventListenerConfig = {
+export type UseEventListenerConfig = {
     startImmediately?: boolean;
 };
 export declare function useEventListener<T = Event>(target: RefOrElementOrCallback<EventTarget> | EventTarget | null | undefined, key: string, callback: (event: T) => void, options?: AddEventListenerOptions & UseEventListenerConfig): {

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

@@ -1,5 +1,5 @@
 import { FocusEventHandler, FocusEvent, Ref } from 'react';
-export declare type UseFocusVisibleOptions = {
+export type UseFocusVisibleOptions = {
     onFocusVisible?: FocusEventHandler;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;

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

@@ -4,11 +4,11 @@ export declare const globalListenerEventMap: Map<string, {
     exec: (e: any) => void;
     listeners: Set<(e: any) => void>;
 }>;
-export declare type CreateGlobalListenerConfig = {
+export type CreateGlobalListenerConfig = {
     customKey?: string;
     target?: RefOrElementOrCallback | EventTarget;
 };
-export declare const createGlobalListener: <T extends SyntheticEvent<Element, Event>>(key: string, listener: (event?: T | undefined) => void, options?: boolean | AddEventListenerOptions | undefined, { customKey, target: targetProp, }?: CreateGlobalListenerConfig) => {
+export declare const createGlobalListener: <T extends SyntheticEvent<Element, Event>>(key: string, listener: (event?: T) => void, options?: AddEventListenerOptions | boolean, { customKey, target: targetProp, }?: CreateGlobalListenerConfig) => {
     listen: () => void;
     remove: () => void;
     readonly state: {

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

@@ -1,7 +1,7 @@
 import { SyntheticEvent } from 'react';
 import { createGlobalListener, CreateGlobalListenerConfig } from './createGlobalListener';
-declare type GlobalListener = ReturnType<typeof createGlobalListener>;
-export declare type UseGlobalListenerConfig = CreateGlobalListenerConfig & {
+type GlobalListener = ReturnType<typeof createGlobalListener>;
+export type UseGlobalListenerConfig = CreateGlobalListenerConfig & {
     startImmediately?: boolean;
 };
 export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, config?: UseGlobalListenerConfig): GlobalListener;

package/src/hooks/useHover/useHover.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, MouseEventHandler } from 'react';
-export declare type UseHoverOptions<E = HTMLElement> = {
+export type UseHoverOptions<E = HTMLElement> = {
     onMouseEnter?: MouseEventHandler<E>;
     onMouseLeave?: MouseEventHandler<E>;
     disabled?: boolean;
@@ -7,8 +7,8 @@ export declare type UseHoverOptions<E = HTMLElement> = {
 };
 export declare const useHover: <E = HTMLElement>({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled, disableReactTree, }?: UseHoverOptions<E>) => {
     hoverHandlers: {
-        onMouseEnter: (event: MouseEvent<E, globalThis.MouseEvent>) => void;
-        onMouseLeave: (event: MouseEvent<E, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<E>) => void;
+        onMouseLeave: (event: MouseEvent<E>) => void;
     };
     hover: boolean;
 };

package/src/hooks/useHover/useHoverDirty.d.ts

@@ -1,5 +1,5 @@
 import { RefOrElementOrCallback } from '../../utils';
-export declare type UseHoverDirtyOptions = {
+export type UseHoverDirtyOptions = {
     target: RefOrElementOrCallback | EventTarget | null | undefined;
     disabled?: boolean;
 };

package/src/hooks/useImgLoaded/useImgLoaded.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps } from 'react';
-declare type UseImgLoadedProps = {
+type UseImgLoadedProps = {
     src?: string;
     srcSet?: string;
     crossOrigin?: ComponentProps<'img'>['crossOrigin'];
     referrerPolicy?: ComponentProps<'img'>['referrerPolicy'];
 };
-declare type LoadedState = false | 'loaded' | 'error';
+type LoadedState = false | 'loaded' | 'error';
 export declare const useImgLoaded: ({ crossOrigin, referrerPolicy, src, srcSet, }: UseImgLoadedProps) => LoadedState;
 export {};

package/src/hooks/useKeyDownOnce/useKeyDownOnce.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare type UseKeyDownOnce<T> = {
+export type UseKeyDownOnce<T> = {
     onKeyUp?: (e: React.KeyboardEvent<T>) => void;
     onKeyDown?: (e: React.KeyboardEvent<T>) => void;
 };
 export declare const useKeyDownOnce: <T>(includeKeys: string[], { onKeyDown, onKeyUp }: UseKeyDownOnce<T>) => {
-    onKeyDown: (e: import("react").KeyboardEvent<T>) => void;
-    onKeyUp: (e: import("react").KeyboardEvent<T>) => void;
+    onKeyDown: (e: React.KeyboardEvent<T>) => void;
+    onKeyUp: (e: React.KeyboardEvent<T>) => void;
 };

package/src/hooks/useKeyboardMoveFocus/moveIndexInTwoDimension.d.ts

@@ -1,4 +1,4 @@
-export declare type MoveIndexInTwoDimensionalOptions = {
+export type MoveIndexInTwoDimensionalOptions = {
     currIndex: number;
     columns: number;
     total: number;

package/src/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MoveIndexInTwoDimensionalOptions } from './moveIndexInTwoDimension';
-export declare type UseKeyboardMoveFocusParams<T> = {
+export type UseKeyboardMoveFocusParams<T> = {
     focusedIndexRef: React.MutableRefObject<number>;
     onFocusedIndexChange: (event: React.KeyboardEvent<HTMLElement>, index: number) => void;
     options: T[];

package/src/hooks/useKeyboardMoveFocus/useOnlyOneFocusable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type UseOnlyOneFocusableParams = {
+export type UseOnlyOneFocusableParams = {
     focusedIndexRef: React.MutableRefObject<number>;
     containerRef: React.RefObject<HTMLElement>;
 };
@@ -7,5 +7,5 @@ export declare const useOnlyOneFocusable: ({ focusedIndexRef, containerRef, }: U
     moveFocusedId: string;
     focusIndex: (toIndex: number) => void;
     setIndexTabIndex: (toIndex: number) => void;
-    getItemProps: (index: number, options?: Omit<import("react").HTMLAttributes<HTMLElement>, "children"> | undefined) => Omit<import("react").HTMLAttributes<HTMLElement>, "children">;
+    getItemProps: (index: number, options?: Omit<React.HTMLAttributes<HTMLElement>, 'children'>) => Omit<import("react").HTMLAttributes<HTMLElement>, "children">;
 };

package/src/hooks/useLongPress/useLongPress.d.ts

@@ -6,12 +6,12 @@ export interface UseLongPressOptions {
     delay?: number;
     externalWindow?: Window;
 }
-export declare type UseLongPressEventReason = 'keyboard' | 'click' | 'tap';
-export declare type UseLongPressOutput<T> = {
+export type UseLongPressEventReason = 'keyboard' | 'click' | 'tap';
+export type UseLongPressOutput<T> = {
     onTap?: (e: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T> | React.KeyboardEvent<T>, reason: UseLongPressEventReason) => void;
     onPress?: (e: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T> | React.KeyboardEvent<T>, reason: UseLongPressEventReason) => void;
 };
-export declare type UseLongPressInput<T> = {
+export type UseLongPressInput<T> = {
     onKeyUp?: (e: React.KeyboardEvent<T>) => void;
     onKeyDown?: (e: React.KeyboardEvent<T>) => void;
 } & UseTouchMouseEvent<T>;

package/src/hooks/useOnLayoutReRender/useOnLayoutReRender.d.ts

@@ -1,2 +1,2 @@
 import { DependencyList } from 'react';
-export declare const useOnLayoutReRender: (cb: () => any, deps?: DependencyList | undefined) => void;
+export declare const useOnLayoutReRender: (cb: () => any, deps?: DependencyList) => void;

package/src/hooks/useOnReRender/useOnReRender.d.ts

@@ -1,2 +1,2 @@
 import { DependencyList } from 'react';
-export declare const useOnReRender: (cb: () => any, deps?: DependencyList | undefined) => void;
+export declare const useOnReRender: (cb: () => any, deps?: DependencyList) => void;

package/src/hooks/useRefState/useRefState.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const useRefState: <T>(value: T, customUpdate?: (() => void) | undefined) => readonly [import("react").MutableRefObject<T>, (toValue: T, isUpdate?: any) => void];
+export declare const useRefState: <T>(value: T, customUpdate?: () => void) => readonly [import("react").MutableRefObject<T>, (toValue: T, isUpdate?: any) => void];

package/src/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -1,6 +1,6 @@
 import { type DebounceSettings, type ThrottleSettings } from 'lodash';
 import { RefOrElementOrCallback } from '../../utils';
-export declare type PerformanceOptions = {
+export type PerformanceOptions = {
     mode?: 'debounce' | 'throttle' | 'none';
     time?: number;
     ignoreFireWhenObserve?: boolean;

package/src/hooks/useResponsiveMatch/useResponsiveMatch.d.ts

@@ -1,3 +1,3 @@
 import { BreakpointMatchMap, MatchedBreakpoint } from '../../contexts';
-declare const useResponsiveMatch: (defaultBreakpoint?: MatchedBreakpoint | undefined) => BreakpointMatchMap;
+declare const useResponsiveMatch: (defaultBreakpoint?: MatchedBreakpoint) => BreakpointMatchMap;
 export { useResponsiveMatch };

package/src/hooks/useRetry/useRetry.d.ts

@@ -1,4 +1,4 @@
-export declare type UseRetryOptions = {
+export type UseRetryOptions = {
     retryTimes: number;
     intervalTime: number;
     onStart?: () => void;
@@ -6,7 +6,7 @@ export declare type UseRetryOptions = {
     onComplete?: (times?: number) => void;
     onCancel?: () => void;
 };
-export declare const useRetry: <T extends (...args: any[]) => boolean | Promise<boolean>>(cb: T, options?: UseRetryOptions | undefined) => {
+export declare const useRetry: <T extends (...args: any[]) => boolean | Promise<boolean>>(cb: T, options?: UseRetryOptions) => {
     retry: (...args: Parameters<T>) => Promise<void>;
     cancel: () => void;
 };

package/src/hooks/useThrottle/useThrottle.d.ts

@@ -1,2 +1,2 @@
 import type { ThrottleSettings } from 'lodash';
-export declare const useThrottle: <F extends (...args: any[]) => any>(fn: F, throttleTime?: number, options?: ThrottleSettings | undefined) => import("lodash").DebouncedFunc<F>;
+export declare const useThrottle: <F extends (...args: any[]) => any>(fn: F, throttleTime?: number, options?: ThrottleSettings) => import("lodash").DebouncedFunc<F>;

package/src/hooks/useVirtuosoExternalWindow/useVirtuosoExternalWindow.d.ts

@@ -1,4 +1,4 @@
-declare type ExternalWindowProps = {
+type ExternalWindowProps = {
     externalWindow: Window & typeof globalThis;
 };
 export declare const useVirtuosoExternalWindow: () => ExternalWindowProps | undefined;

package/src/typings/BaseColor.d.ts

@@ -1,4 +1,4 @@
-declare type DefaultBaseColor = {
+type DefaultBaseColor = {
     primary: any;
     secondary: any;
     inherit: any;
@@ -9,5 +9,5 @@ declare type DefaultBaseColor = {
     action: any;
     neutral: any;
 };
-export declare type BaseColor<T extends keyof DefaultBaseColor = 'primary' | 'secondary'> = keyof Pick<DefaultBaseColor, T>;
+export type BaseColor<T extends keyof DefaultBaseColor = 'primary' | 'secondary'> = keyof Pick<DefaultBaseColor, T>;
 export {};

package/src/typings/BaseSize.d.ts

@@ -1,4 +1,4 @@
-declare type BaseSizes = {
+type BaseSizes = {
     xxxsmall: any;
     xxsmall: any;
     xsmall: any;
@@ -10,6 +10,6 @@ declare type BaseSizes = {
     xxlarge: any;
     xxxlarge: any;
 };
-export declare type BaseSizeKey = keyof BaseSizes;
-export declare type BaseSize<T extends BaseSizeKey = 'small' | 'medium' | 'large'> = keyof Pick<BaseSizes, T>;
+export type BaseSizeKey = keyof BaseSizes;
+export type BaseSize<T extends BaseSizeKey = 'small' | 'medium' | 'large'> = keyof Pick<BaseSizes, T>;
 export {};

package/src/typings/ComponentTypes.d.ts

@@ -1,25 +1,25 @@
 import type { MotionProps } from 'framer-motion';
 import type { ComponentPropsWithRef, ElementType, HTMLAttributes, LegacyRef } from 'react';
 import type { GlobalStateClassesKey } from '../utils/classes/globalStateClasses';
-export declare type GroupedMotionProps<P = {}> = Pick<MotionProps, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & Omit<P, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & {
+export type GroupedMotionProps<P = {}> = Pick<MotionProps, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & Omit<P, Extract<keyof HTMLAttributes<Element>, keyof MotionProps>> & {
     motionProps?: MotionProps | null;
 };
-export declare type ClassesProp<K extends string> = {
+export type ClassesProp<K extends string> = {
     classes?: Partial<Record<K | 'root' | GlobalStateClassesKey, string>>;
 };
-export declare type PropsWithRoot<P, R extends ElementType, O extends string = '', E = HTMLDataAttribute> = P & Omit<ComponentPropsWithRef<R>, keyof P | O> & E;
-export declare type SlotProps<R extends ElementType, O extends keyof ComponentPropsWithRef<R> = never, E = HTMLDataAttribute> = Omit<ComponentPropsWithRef<R>, O | 'className'> & E;
-export declare type StandardProps<P, C extends string, R extends ElementType | void = void, O extends string = '', ExtendAttributes = HTMLDataAttribute> = ClassesProp<C> & (R extends ElementType ? PropsWithRoot<P, R, 'classes' | O, ExtendAttributes> : P & {
+export type PropsWithRoot<P, R extends ElementType, O extends string = '', E = HTMLDataAttribute> = P & Omit<ComponentPropsWithRef<R>, keyof P | O> & E;
+export type SlotProps<R extends ElementType, O extends keyof ComponentPropsWithRef<R> = never, E = HTMLDataAttribute> = Omit<ComponentPropsWithRef<R>, O | 'className'> & E;
+export type StandardProps<P, C extends string, R extends ElementType | void = void, O extends string = '', ExtendAttributes = HTMLDataAttribute> = ClassesProp<C> & (R extends ElementType ? PropsWithRoot<P, R, 'classes' | O, ExtendAttributes> : P & {
     className?: string;
 }) & ExtendAttributes;
-export declare type WithClassesProps<P, C extends string> = P & ClassesProp<C>;
-export declare type BaseOverridableProps<P, C extends string> = WithClassesProps<P, C>;
-export declare type OverridableProps<B, T extends ElementType, E = HTMLDataAttribute> = B & {
+export type WithClassesProps<P, C extends string> = P & ClassesProp<C>;
+export type BaseOverridableProps<P, C extends string> = WithClassesProps<P, C>;
+export type OverridableProps<B, T extends ElementType, E = HTMLDataAttribute> = B & {
     component?: T;
 } & Omit<ComponentPropsWithRef<T>, keyof B> & E;
-export declare type RefFromProps<P> = P extends {
+export type RefFromProps<P> = P extends {
     ref?: LegacyRef<infer R> | undefined;
 } ? R : never;
-export declare type HTMLDataAttribute = {
+export type HTMLDataAttribute = {
     [key: `data-${string}`]: unknown;
 };

package/src/typings/ExtractValue.d.ts

@@ -1,2 +1,2 @@
-export declare type ExtractArray<T> = T extends ReadonlyArray<infer U> ? U : never;
-export declare type ExtractRecord<T extends Record<string, unknown>> = T[keyof T];
+export type ExtractArray<T> = T extends ReadonlyArray<infer U> ? U : never;
+export type ExtractRecord<T extends Record<string, unknown>> = T[keyof T];

package/src/typings/OverridableTypes.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-export declare type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
 export interface OverridableComponent<M extends OverridableTypeMap> {
     <C extends React.ElementType>(props: {
         component: C;
@@ -7,9 +7,9 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
     (props: DefaultComponentProps<M>): JSX.Element | null;
     displayName?: string;
 }
-export declare type OverrideProps<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>);
-export declare type DefaultComponentProps<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
-export declare type BaseProps<M extends OverridableTypeMap> = M['props'];
+export type OverrideProps<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>);
+export type DefaultComponentProps<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+export type BaseProps<M extends OverridableTypeMap> = M['props'];
 export interface OverridableTypeMap {
     props: {};
     defaultComponent: React.ElementType;

package/src/typings/UnionOmit.d.ts

@@ -1,3 +1,3 @@
-export declare type UnionPick<T extends string, K extends T> = keyof Pick<Record<T, any>, K>;
-export declare type UnionOmit<T extends string, K extends T> = keyof Omit<Record<T, any>, K>;
-export declare type LiteralUnion<T> = T | (string & Record<never, never>);
+export type UnionPick<T extends string, K extends T> = keyof Pick<Record<T, any>, K>;
+export type UnionOmit<T extends string, K extends T> = keyof Omit<Record<T, any>, K>;
+export type LiteralUnion<T> = T | (string & Record<never, never>);

package/src/typings/UnitMap.d.ts

@@ -1,13 +1,13 @@
-export declare type UnitMap<T extends string | number | symbol, K = any> = {
+export type UnitMap<T extends string | number | symbol, K = any> = {
     [key in T]: K;
 };
-export declare type ClassesMap<T extends {
+export type ClassesMap<T extends {
     classes?: any;
 } | undefined, K = any> = Partial<UnitMap<Classes<T>, K>>;
-declare type ClassesReturn<T extends {
+type ClassesReturn<T extends {
     classes?: any;
 } | undefined> = keyof NonNullable<NonNullable<T>['classes']>;
-export declare type Classes<T extends {
+export type Classes<T extends {
     classes?: any;
 } | undefined> = ClassesReturn<T>;
 export {};

package/src/utils/classes/globalStateClasses.d.ts

@@ -11,4 +11,4 @@ export declare const globalStateClasses: {
     selected: string;
     dragged: string;
 };
-export declare type GlobalStateClassesKey = keyof typeof globalStateClasses;
+export type GlobalStateClassesKey = keyof typeof globalStateClasses;

package/src/utils/classes/useClasses.d.ts

@@ -1,6 +1,6 @@
 import type { CamelCase } from 'type-fest';
 import { GlobalStateClassesKey } from './globalStateClasses';
-export declare type Cls<T extends {
+export type Cls<T extends {
     name: string;
     classes: string;
 }> = (...classValues: Array<T['classes'] | GlobalStateClassesKey | {
@@ -9,4 +9,4 @@ export declare type Cls<T extends {
 export declare const useClasses: <T extends {
     name: string;
     classes: string;
-}>(prefix: T["name"], inputClasses?: Partial<Record<"disabled" | "active" | "checked" | "completed" | "expanded" | "focused" | "focusVisible" | "focusVisibleWithin" | "required" | "selected" | "dragged" | CamelCase<T["classes"]>, string>> | undefined, className?: string | undefined) => Cls<T>;
+}>(prefix: T['name'], inputClasses?: Partial<Record<CamelCase<T['classes'] | GlobalStateClassesKey>, string>>, className?: string) => Cls<T>;

package/src/utils/combineProps.d.ts

@@ -1,2 +1,2 @@
-export declare const combineProps: <T>(baseProps: T, newProps: T | Partial<T>, coverPropKeys?: (keyof T)[] | undefined) => NonNullable<T>;
+export declare const combineProps: <T>(baseProps: T, newProps: T | Partial<T>, coverPropKeys?: (keyof T)[]) => NonNullable<T>;
 export declare const combineClasses: <T>(baseClasses: T, newClasses: T | Partial<T>) => NonNullable<T>;

package/src/utils/devlog.d.ts

@@ -1,4 +1,4 @@
-export declare type DevlogArgs = {
+export type DevlogArgs = {
     condition?: boolean;
     scope: string;
     message: string;

package/src/utils/getRefElement.d.ts

@@ -1,3 +1,3 @@
 import { MutableRefObject, RefObject } from 'react';
-export declare type RefOrElementOrCallback<T = HTMLElement> = RefObject<T> | (() => T) | T;
+export type RefOrElementOrCallback<T = HTMLElement> = RefObject<T> | (() => T) | T;
 export declare const getRefElement: <T>(ref: T) => T extends () => infer R ? R : T extends RefObject<infer C> | MutableRefObject<infer C> ? C : T;

package/src/utils/removeClassName.d.ts

@@ -1,5 +1,5 @@
 import { RefOrElementOrCallback } from './getRefElement';
-declare type RemoveClassNameOptions = {
+type RemoveClassNameOptions = {
     scanChildren?: boolean;
     fullMatch?: boolean;
 };

package/src/utils/runKeyHandler.d.ts

@@ -1,4 +1,4 @@
 import { KeyboardEvent } from 'react';
-declare type KeyHandlers = Record<KeyboardEvent['key'], () => void>;
+type KeyHandlers = Record<KeyboardEvent['key'], () => void>;
 export declare const runKeyHandler: (e: KeyboardEvent<unknown>, keyHandlers: KeyHandlers) => void;
 export {};