@ringcentral/spring-base 1.8.0 → 1.9.0

package/hooks.js

@@ -2,13 +2,14 @@ import { unstable_useEventCallback, unstable_ownerDocument, unstable_Timeout, un
 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 uniqueId from 'lodash/uniqueId';
+import { useButton as useButton$1 } from '@mui/base/useButton';
+import { c as combineProps, a as ariaHideOutside, g as getRefElement, l as logInDev, o as ownerWindow } from './chunks/twMerge.js';
 import './config.js';
 import 'lodash/omit';
 import 'lodash/pick';
+import 'lodash/isPlainObject';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import throttle from 'lodash/throttle';
@@ -39,18 +40,29 @@ const isNativeButton = (el) => {
             ['button', 'submit', 'reset'].includes(el?.type)) ||
         (tag === 'A' && el?.href));
 };
-const useActive = ({ onKeyDown, onKeyUp, onClick, disabled = false, } = {}) => {
+const useActive = ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled = false, } = {}) => {
     const [active, setActive] = useState(false);
+    const { document: targetDocument = document } = useWindowContext();
     useEffect(() => {
         if (disabled)
             setActive(false);
     }, [disabled]);
     if (disabled) {
         return {
-            activeHandlers: { onKeyDown, onKeyUp, onClick },
+            activeHandlers: { onKeyDown, onKeyUp, onMouseDown, onClick },
             active: false,
         };
     }
+    const handleMouseDown = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        setActive(true);
+        targetDocument.addEventListener('mouseup', () => {
+            setActive(false);
+        }, { once: true });
+    };
     const handleKeyDown = (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented) {
@@ -84,7 +96,12 @@ const useActive = ({ onKeyDown, onKeyUp, onClick, disabled = false, } = {}) => {
         }
     };
     return {
-        activeHandlers: { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick },
+        activeHandlers: {
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            onMouseDown: handleMouseDown,
+            onClick,
+        },
         active,
     };
 };
@@ -155,6 +172,23 @@ const useAnnouncer = (id) => {
     }, []);
 };
 
+function useButton(parameters) {
+    const muiButtonResult = useButton$1(parameters);
+    const { active: customActive, activeHandlers } = useActive({
+        disabled: parameters.disabled,
+    });
+    const originalGetRootProps = muiButtonResult.getRootProps;
+    const getRootProps = (externalProps) => {
+        const mergedProps = combineProps(externalProps, activeHandlers);
+        return originalGetRootProps(mergedProps);
+    };
+    return {
+        ...muiButtonResult,
+        active: customActive,
+        getRootProps,
+    };
+}
+
 const useAriaHideOutside = (props = {}) => {
     const { enable = true } = props;
     const { externalWindow, document } = useWindowContext();
@@ -1473,4 +1507,14 @@ const useBodyScrollLock = (isLocked, targetElement, options = {}) => {
     ]);
 };
 
-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 };
+const useVirtuosoExternalWindow = () => {
+    const { externalWindow } = useWindowContext();
+    if (externalWindow && externalWindow !== globalThis.window) {
+        return {
+            externalWindow,
+        };
+    }
+    return undefined;
+};
+
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, 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, useVirtuosoExternalWindow, visuallyHiddenStyles };

package/index.js

@@ -1,14 +1,15 @@
 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 { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, 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, useVirtuosoExternalWindow, 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 '@mui/base/useButton';
 import 'lodash/omit';
 import 'lodash/pick';
+import 'lodash/isPlainObject';
 import 'lodash/debounce';
 import 'lodash/noop';
 import 'lodash/throttle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-base",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "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/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useA11yKeyEvent';
 export * from './useActive';
 export * from './useAnnouncer';
+export * from './useButton';
 export * from './useAriaHideOutside';
 export * from './useAudio';
 export * from './useChange';
@@ -41,3 +42,4 @@ export * from './useTimeout';
 export * from './useTouchMouseEvent';
 export * from './useFontLoaded';
 export * from './useBodyScrollLock';
+export * from './useVirtuosoExternalWindow';

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

@@ -1,14 +1,16 @@
-import { EventHandler, KeyboardEventHandler, SyntheticEvent } from 'react';
+import { EventHandler, KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from 'react';
 export declare type UseActiveOptions = {
     onKeyDown?: KeyboardEventHandler;
     onKeyUp?: KeyboardEventHandler;
+    onMouseDown?: MouseEventHandler;
     onClick?: EventHandler<SyntheticEvent>;
     disabled?: boolean;
 };
-export declare const useActive: ({ onKeyDown, onKeyUp, onClick, disabled, }?: 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;
     };
     active: boolean;

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

@@ -0,0 +1 @@
+export { useButton } from './useButton';

package/src/hooks/useButton/useButton.d.ts

@@ -0,0 +1,2 @@
+import { UseButtonParameters, UseButtonReturnValue } from '@mui/base/useButton';
+export declare function useButton(parameters: UseButtonParameters): UseButtonReturnValue;

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

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

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

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

package/src/typings/ComponentTypes.d.ts

@@ -7,15 +7,15 @@ export declare type GroupedMotionProps<P = {}> = Pick<MotionProps, Extract<keyof
 export declare type ClassesProp<K extends string> = {
     classes?: Partial<Record<K | 'root' | GlobalStateClassesKey, string>>;
 };
-export declare type PropsWithRoot<P, R extends ElementType, O extends string = ''> = P & Omit<ComponentPropsWithRef<R>, keyof P | O>;
-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> : P & {
+export declare type PropsWithRoot<P, R extends ElementType, O extends string = '', E = HTMLDataAttribute> = P & Omit<ComponentPropsWithRef<R>, keyof P | O> & 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 & {
     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> = B & {
+export declare type OverridableProps<B, T extends ElementType, E = HTMLDataAttribute> = B & {
     component?: T;
-} & Omit<ComponentPropsWithRef<T>, keyof B>;
+} & Omit<ComponentPropsWithRef<T>, keyof B> & E;
 export declare type RefFromProps<P> = P extends {
     ref?: LegacyRef<infer R> | undefined;
 } ? R : never;