@ringcentral/spring-ui 1.7.0 → 1.8.0

package/Avatar.js

@@ -21,6 +21,15 @@ const IconSizeMap = {
     xsmall: 'xsmall',
     xxsmall: 'xsmall',
 };
+const StatusIndicatorSizeMap = {
+    xxlarge: 'large',
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'medium',
+    small: 'small',
+    xsmall: undefined,
+    xxsmall: undefined,
+};
 const Avatar = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Avatar' });
     const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, ...rest } = props;
@@ -65,6 +74,7 @@ const Avatar = forwardRef((inProps, ref) => {
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
     const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const interactive = clickable && !disabled;
     const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
     let AvatarShape = component ?? 'div';
     if (variant === 'squircle') {
@@ -73,32 +83,36 @@ const Avatar = forwardRef((inProps, ref) => {
     else if (clickable) {
         AvatarShape = 'button';
     }
+    const isButtonElement = AvatarShape === 'button' || component === 'button';
     const shapeProps = variant === 'squircle'
         ? {
             component,
-            focusVisible: focusVisible && clickable,
+            focusVisible: focusVisible && interactive,
             fillShape,
-            interactive: clickable,
+            interactive,
         }
         : {};
-    const ariaProps = component === 'button'
+    const ariaProps = isButtonElement
         ? {
             disabled,
         }
-        : {
-            'aria-disabled': disabled,
-        };
-    const nonInteractiveShapeProps = {
-        tabIndex: -1,
-    };
-    const indicatorSize = variant === 'circle' && size === 'xxlarge' ? 'large' : 'medium';
+        : clickable && disabled
+            ? {
+                'aria-disabled': true,
+            }
+            : {};
+    const nonInteractiveShapeProps = !isButtonElement && clickable && disabled
+        ? {
+            tabIndex: -1,
+        }
+        : {};
     return (jsx(Overlap, { position: {
             bottom: '-1px',
             right: '-1px',
-        }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: indicatorSize, ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
+        }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: StatusIndicatorSizeMap[size], ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
             root: cls('root', size, { disabled }),
-            floater: cls('indicator', clickable && 'clickable-indicator'),
-        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, clickable && 'clickable-shape', clickable && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...(!clickable ? nonInteractiveShapeProps : {}), ...rest, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', clickable && 'clickable-hover-tint', clickable && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && clickable && (jsx(Squircle, { interactive: false, className: cls('hover-tint', clickable && 'clickable-hover-tint', clickable && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+            floater: cls('indicator', interactive && 'clickable-indicator'),
+        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
 });
 Avatar.displayName = 'SuiAvatar';
 

package/BottomNavigation.js

@@ -49,8 +49,6 @@ const BottomNavigation = forwardRef((inProps, ref) => {
         name: 'SuiBottomNavigation',
         state: 'value',
     });
-    // TODO: setData will be used when dnd is implemented
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [data, setData] = useControlled({
         controlled: dataProp,
         default: defaultData,
@@ -72,7 +70,6 @@ const BottomNavigation = forwardRef((inProps, ref) => {
     const [expanded, setExpanded] = useState(false);
     const [animationComplete, setAnimationComplete] = useState();
     const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleClose = (e, reason) => {
         if (!expanded)
             return;

package/Checkbox.js

@@ -20,7 +20,6 @@ const Checkbox = forwardRef((inProps, ref) => {
         disabled: disabledProp,
         id: inputProps?.id,
     });
-    // TODO: wait useCheckBox ready, see https://github.com/mui/material-ui/issues/27170
     const { getInputProps, checked, focusVisible } = useSwitch({
         ...rest,
         disabled,
@@ -34,7 +33,6 @@ const Checkbox = forwardRef((inProps, ref) => {
         if (autoFocus) {
             inputRef.current?.focus();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
         if (inputRef.current) {

package/DatePicker.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useEventCallback, useWindowContext, runKeyHandler, useClasses, useControlled } from '@ringcentral/spring-base';
+import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useEventCallback, useWindowContext, runKeyHandler, useControlled } from '@ringcentral/spring-base';
 import { createContext, useContext, useRef, forwardRef, useMemo, useLayoutEffect, createElement, useState, useCallback, useEffect } from 'react';
 import { B as Button } from './chunks/Button.js';
 import { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
@@ -7,7 +7,7 @@ import { useDateUtilsContext, DateUtilsProvider } from './DateUtilsContext.js';
 import { CaretLeftMd, CaretRightMd, CalendarMd } from '@ringcentral/spring-icon';
 import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
 import 'framer-motion';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import { V as VisuallyHidden } from './chunks/VisuallyHidden.js';
@@ -127,7 +127,6 @@ const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture,
             backward = utils.addDays(backward, -1);
         }
     }
-    // fallback to today if no enabled days
     return utils.date();
 };
 
@@ -220,7 +219,6 @@ const Years = forwardRef((props, ref) => {
     useLayoutEffect(() => {
         const index = years.findIndex((x) => utils.getYearText(x) === currentYear);
         focusIndex(index);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const cls = useDatePickerClasses();
     return (jsx("div", { role: "presentation", className: cls('years-panel'), ref: combineRef, onKeyDown: handleKeyDown, children: years.map((year, index) => {
@@ -362,12 +360,10 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
     useLayoutEffect(() => {
         if (viewChange)
             return;
-        // same month anchor switch
         if (sameMonthDate) {
             focusDayElement();
             return;
         }
-        // different month anchor switch and not switch by header action
         const activeEl = document?.activeElement;
         if (activeEl &&
             !activeEl.hasAttribute('data-sui-picker-next-month') &&
@@ -381,7 +377,6 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
         }
         return undefined;
     });
-    // when view change and current is day also focusDay again
     useLayoutEffect(() => {
         if (previousView && view === 'day' && viewChange) {
             focusDayElement();
@@ -394,14 +389,14 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
 });
 Calendar.displayName = 'RcCalendar';
 
-var DatePicker$1 = {"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button"};
+var DatePicker$1 = {"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button","sui-compact":"sui-compact"};
 
 const defaultMinDate = new Date('1900-01-01');
 const defaultMaxDate = new Date('2100-01-01');
 const DEFAULT_FORMAT = 'MM/DD/YYYY';
 const InnerDatePicker = (props) => {
     const { innerRef, value, onChange, formatString = DEFAULT_FORMAT, todayButtonText = 'Today', min: minDate = null, max: maxDate = null, disableFuture, disablePast, loadingIndicator, onMonthChange, renderDay, disabled, shouldDisableDate: shouldDisableDateProp, onClose, onClear, classes, PopoverProps, screenReaderProps, clearBtn = true, label = 'Date', className, ...rest } = props;
-    const cls = useClasses('date-picker', classes, className);
+    const cls = useClassesWithMode('date-picker', classes, className, ['calendar']);
     const utils = useDateUtilsContext();
     const [controlledValue, setControlledValue] = useControlled({
         controlled: value,
@@ -444,7 +439,6 @@ const InnerDatePicker = (props) => {
     const handleChange = (toDate, fromUserSelect) => {
         actionRef.current?.close();
         setControlledValue(toDate);
-        // save inner change value
         emitValueRef.current = toDate;
         onChange?.(toDate, fromUserSelect);
     };
@@ -453,9 +447,7 @@ const InnerDatePicker = (props) => {
         handleChange(newDay, fromUserSelect);
     });
     useEffect(() => {
-        if (
-        // only when inner value change need check again is that value is valid
-        dayjsValue &&
+        if (dayjsValue &&
             value !== emitValueRef.current &&
             shouldDisableDate(dayjsValue)) {
             const closestEnabledDate = getClosestEnabledDate(dayjsValue);

package/DateUtilsContext.js

@@ -8,7 +8,6 @@ const DateUtilsProvider = (props) => {
     const utils = useMemo(() => {
         const dateUtils = new DateUtils({ locale });
         const customUtils = {
-            // displaying methods
             getCalendarHeaderText: (date) => {
                 return dateUtils.formatByString(date, 'MMMM YYYY');
             },

package/Dialer.js

@@ -53,7 +53,6 @@ DialDelete.displayName = 'SuiDialDelete';
 var DialPadButton$1 = {"sui-dial-pad-button-root":"sui-dial-pad-button-root","sui-icon":"sui-icon","sui-dial-pad-button-medium":"sui-dial-pad-button-medium","sui-dial-pad-button-large":"sui-dial-pad-button-large","sui-dial-pad-button-label-container":"sui-dial-pad-button-label-container"};
 
 const emptyFunction = () => {
-    //
 };
 const DialPadButton = (props) => {
     const { value, classes, longPressValue, longPressDelay = 1000, onKeyEffect = emptyFunction, className, iconSize = 'medium', size = 'xxlarge', label, ...rest } = props;
@@ -98,14 +97,8 @@ const ACCEPTABLE_KEYS = [
     DIALER_PAD_PLUS,
 ];
 
-/**
- * Provide you can get event apply on trigger events area
- * @param options onKeyDown, onKeyUp that you also want apply on target
- * @returns  onKeyDown, onKeyUp, control
- */
 const useDialKeyboard = ({ onKeyDown: onKeyDownArg, onKeyUp: onKeyUpArg, } = {}) => {
     const control = useRef(null);
-    // we need `onKeyup` & `onKeydown` to get called in same amount, but also make sure of the performance.
     const keyBufferRef = useRef([]);
     const onKeyDown = useEventCallback((e) => {
         onKeyDownArg?.(e);
@@ -133,12 +126,6 @@ const useDialKeyboard = ({ onKeyDown: onKeyDownArg, onKeyUp: onKeyUpArg, } = {})
     return { onKeyDown, onKeyUp, control };
 };
 
-/**
- * Custom hook that handles playing audio for key presses in a dial pad.
- *
- * @param audioOption - The audio options for configuring the hook.
- * @returns A function that plays the audio for a given key.
- */
 const useKeyAudio = ({ sounds, processor }) => {
     const audio = useAudio();
     const lastPlayRef = useRef();
@@ -147,9 +134,6 @@ const useKeyAudio = ({ sounds, processor }) => {
     }, [audio, processor]);
     const play = async (src) => {
         const lastPlay = lastPlayRef.current;
-        /* https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
-         * prevent play request interrupted
-         */
         if (lastPlay)
             await lastPlay;
         audio.currentTime = 0;
@@ -205,9 +189,7 @@ const DialPad = forwardRef((inProps, ref) => {
         if (typeof muted !== 'undefined')
             audio.muted = muted;
         if (typeof audio['setSinkId'] === 'function')
-            audio['setSinkId'](
-            // when pass undefined, use '' to remove sinkId to default
-            sinkId || '');
+            audio['setSinkId'](sinkId || '');
     }, [muted, sinkId, volume]);
     const play = useKeyAudio({
         sounds,
@@ -217,7 +199,6 @@ const DialPad = forwardRef((inProps, ref) => {
         const key = value === DIALER_PAD_PLUS ? '0' : value;
         const keyButtonElm = containerRef.current?.querySelector(`[${dialButtonKey}="${key}"]`);
         if (keyButtonElm) {
-            // * to keep color when quick trigger insert key or click very quick
             const oldTimer = keyTimerMapRef.current[key];
             if (oldTimer)
                 clearTimeout(oldTimer);
@@ -239,7 +220,6 @@ const DialPad = forwardRef((inProps, ref) => {
             handleChange(value, 'customKeyboard');
             const toIndex = ACCEPTABLE_KEYS.findIndex((x) => x === value);
             focusedIndexRef.current = toIndex;
-            // * mean that current focus on that dialPad, move focus to dialPad container
             if (externalWindow &&
                 externalWindow.document.activeElement?.getAttribute(dialButtonKey) !==
                     null) {
@@ -255,7 +235,6 @@ const DialPad = forwardRef((inProps, ref) => {
     useImperativeHandle(control, () => ({ handleKeyboardEffect }), [
         handleKeyboardEffect,
     ]);
-    // * clean when unmount
     useEffect(() => () => {
         for (const timer of Object.values(keyTimerMapRef.current)) {
             clearTimeout(timer);
@@ -309,18 +288,10 @@ var DialerPadSoundsMPEG = {
     '*': 'data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU5LjI3LjEwMAAAAAAAAAAAAAAA//tAwAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAAHAAAIjQBqampqampqampqampqaoODg4ODg4ODg4ODg4ODmJiYmJiYmJiYmJiYmJi8vLy8vLy8vLy8vLy8vLzn5+fn5+fn5+fn5+fn5/Pz8/Pz8/Pz8/Pz8/Pz//////////////////8AAAAATGF2YzU5LjM3AAAAAAAAAAAAAAAAJAPpAAAAAAAACI0Bco0qAAAAAAD/+8DEAAAHUDswdYeAIn6XJPc9wAABTcADPPPPPPcBqBltEADyMjLVmEZjCgvDwR8JGS9nveG/jxKAgCAIAmD/BA5wff4IAgCYPg+fggCGkAAAAACNNeb6B0JAAABFAwCgHoyVQHqxUAWMCACUxFSkzAtAwMJY9t+jDUGBMMkVozBiejUqLUNYYts2SCKjWDHtOCgkAA8yI4zGoDMtNIyGAjDIFAQkgYWAqykhi/M97U2WNpAiw0M3oKXdTfCmbySkf+N1lAUhX2iz78//jc5Ty+MQ5Vmo0/1Xn///+Hdczz7TTMZhmt2r0QQMxEelTqrwAAAB8MIAANJlMEA0ABI4wDQBzBhAgMA0CASAuCoHBg5g9GLWz4cQDn5lzDkmLQQKbRUdhuPlmGNiN4ByB4gbci4FEeBYOh7oYiE7OISkGEJTVE1MSZDaS6l+s9Lht////+o9//rQ8AABtwH9dJGURkmEhVcZFsYBiZNIcVcYE0AqmD/hJhoiYaaYSOAgmCBA7BhX6HkYd8EbGBSgXJtauddHGJEwcvjwA27yS93IhL8P7utb/9f/6/5bWcq09f////kq33FAAAWwAACXSFPMmo95TgoAx4IiYPlULDsZMJ44Ch8FCw4uSxuOAobhUEcoJRI6z6CZq6+kUk97ryAAAAANvwJc9ZIAKts8Ecpj1gyAsEk3Bg6gYmNoOgfjxT5jzBeGDqOSYuflpkTD6mAQEEaAJHJmhhosHKKFzQYVRMncOPYkSwgQP0yn+PAqaAAAAACf+GAAIzLlNQEKdkyI46pI1xM2aI3+QwUA+zD7X4Oc2CEw8RZjDFFjNfCUM4LRUzD+CaMGQIYwZxQxUIswCACkV2AQHQGBGBCRAFg4CRqc5cXZYhtubyYORz3ok2DgAnuAAJZn//j4f/EegAAAD/0ZbYxYAMFFxQuFAkxBMOijDQ4ELkBu7eYIoC8GGSkr5tnJmkYbKEwmBf/7UMT1gUzcoxu96oAhcowjPa/tFCiCBkSTdEZhaHVGC5AVJgIQE4YG8EDmAbAXpgJIAsVB0il8pFAgJrMWfNTAaVCroACEPK0iyZhRC7IGDTIbQBbpyFp4g1tujaEpy3rEMSZyKsvuWP+val8xet+2Nv34xvU8eirp2t5Ya////3/f/////nzFT/3qxhhrD+1GjrH9aKrks7qOK9Pt+xOT76eVAAAAKPesAAw0R2jBmIPMCgBgwvQ5jHKHzMB88siNEMF4O8mAPMGYQcxey/j/+0DE8QBHLD8zzHMooT+Ho32fbRXP6uHPMRfczORGDNuOWO3PHg2EyczI+DmMHIAcwcAhDEJBQHgPBAMcKILAakaaYDHHhSyACfOIAQGHOaBsCEY0DAcu4pfAWLY4OAFl0WBkkGNAkVxwIERHvyocgJX6FyTAMLRzzNNLZEIwNCflBOg486toyUvdoqMrCuluVVoU4q6ntGAfKTYbSFIaNKLqNmD6iqstJfrmkz7NPZWmzKns1P/7cMT8gE3UixnteOnq7Zzh9b/lHNmU3Rg+NTdIeSDYbEpINhoZSS1KWxLRTtiXksbIr30NVld9tVSkAAAALu9MNY1xBAqdRYNQM1KCHWAIWIHkhgbMmYf9m7cFmfBLcRtARCJSdLWoNlk8IVzKJsMkS5kVHAkFRonJS00IfgTEMDSFA1qqEmO35wVYuOxcinJNykpMCHiEAWif/wAAPzlgrWG2IADSlUANmCBjHUKAoLR9pF26s4wC/M1bwiVt9ZCBCteQCMMay1D6Sl2Cs7GcAWUNvbJ5fKJOcISw5G1mkP09QdVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUz/+4DE+YBeXQ0T72UxqWuR472cJH1BTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7EMT+AMd4dR3jZGXoToUgIAfglVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//sQxNYDwAAB/gAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=',
 };
 
-// ! alway new Regex for regex will have index issue
-// https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/RegExp
-/**
- * return regex with only allow dialPad value `1234567890*+#-`
- */
 function getDialPadValueOnlyRegex() {
     return /[1234567890*+#]+/g;
 }
 
-/**
- * bind with ref, let input can always focus at end of latest character
- */
 const useFixedEndSelection = () => {
     const ref = useRef(null);
     const keypadModeFixedAtLatest = useEventCallback(() => {
@@ -361,9 +332,7 @@ const useFixedEndSelection = () => {
 
 const DialTextField = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'DialTextField' });
-    const { value, onChange, onEmit, onKeyDown, onKeyUp, inputRef: inputRefProp, inputProps: inputPropsProp, keypadMode, onlyAllowKeypadValue = keypadMode, externalWindow = window, 
-    // textVariant = 'headline1',
-    ...rest } = props;
+    const { value, onChange, onEmit, onKeyDown, onKeyUp, inputRef: inputRefProp, inputProps: inputPropsProp, keypadMode, onlyAllowKeypadValue = keypadMode, externalWindow = window, ...rest } = props;
     const dialerContext = useDialerContext();
     const playAudio = (key) => {
         dialerContext.dialPadActionRef?.current?.playAudio(key);
@@ -378,25 +347,16 @@ const DialTextField = forwardRef((inProps, ref) => {
         const elm = inputRef.current;
         const isInputFocus = isFocus ?? externalWindow.document.activeElement === elm;
         if (reason !== 'click' && !isInputFocus) {
-            // ! both keydown and touch, only when focus need re-focus
             isNotTriggerRefocusRef.current = true;
         }
     });
-    /**
-     * outside clear via this method, with check current input state
-     */
     useImperativeHandle(dialerContext.onClearRef, () => (e, reason) => {
-        // * when clear from keyboard,
-        // * must need re-focus, so not check,
         if (reason !== 'keyboard') {
             checkNotReFocus(reason);
         }
         scrollToPositionRef.current = 0;
         onChange?.('');
     }, [checkNotReFocus, onChange]);
-    /**
-     * outside delete value via this method, with check current input state
-     */
     useImperativeHandle(dialerContext.onDeleteRef, () => (e, reason) => {
         const elm = inputRef.current;
         if (elm && value?.length) {
@@ -420,8 +380,6 @@ const DialTextField = forwardRef((inProps, ref) => {
                 toValue = value.slice(0, -1);
             }
             if (toValue !== undefined) {
-                // * when delete from keyboard and value to be empty,
-                // * must need re-focus, so not check,
                 if (!(reason === 'keyboard' && toValue === '')) {
                     checkNotReFocus(reason);
                 }
@@ -430,16 +388,12 @@ const DialTextField = forwardRef((inProps, ref) => {
             }
         }
     }, [checkNotReFocus, externalWindow, inputRef, onChange, value]);
-    /**
-     * outside change value via this method, with check current input state
-     */
     useImperativeHandle(dialerContext.onInsertRef, () => (addValue, reason) => {
         const elm = inputRef.current;
         if (elm) {
             const isFocus = externalWindow.document.activeElement === elm;
             let toPosition;
             let toValue;
-            // * when keypadMode also add value at latest
             if (!isFocus || keypadMode) {
                 toValue = value + addValue;
                 toPosition = toValue.length;
@@ -499,7 +453,6 @@ const DialTextField = forwardRef((inProps, ref) => {
     const { sleep } = useSleep();
     const handleChange = useEventCallback((e) => {
         const currValue = e.target.value;
-        // * handle copy paste
         if (onlyAllowKeypadValue) {
             const filterValue = (currValue.match(getDialPadValueOnlyRegex()) || []).join('');
             if (filterValue === value)
@@ -551,7 +504,6 @@ const DialTextField = forwardRef((inProps, ref) => {
         onKeyDown: events.onKeyDown,
         onKeyUp: events.onKeyUp,
         maxLength,
-        // in dialer not need autoComplete
         autoComplete: 'off',
     }, inputPropsProp), [
         keypadMode,

package/Dialog.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import kebabCase from 'lodash/kebabCase';
-import { useClasses, useEventCallback } from '@ringcentral/spring-base';
+import { useEventCallback, useClasses } from '@ringcentral/spring-base';
 import { Xsm } from '@ringcentral/spring-icon';
-import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode, motionTransition } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
 import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
 import { g as getSlideIn } from './chunks/getSlideIn.js';
@@ -22,12 +22,12 @@ import './chunks/PopperPaper.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 
-var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen"};
+var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
 
 const Dialog = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Dialog' });
     const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, ...rest } = props;
-    const cls = useClasses('dialog', classes, className);
+    const cls = useClassesWithMode('dialog', classes, className);
     const toSize = useMemo(() => kebabCase(size), [size]);
     const isFullHeight = size === 'fullHeight';
     const slideInProps = getSlideIn({

package/Dropdown.js

@@ -53,11 +53,8 @@ const Dropdown = forwardRef((inProps, ref) => {
     }, []);
     const cls = useClasses('dropdown', classes, className);
     const handleOpen = useEventCallback((isOpen) => {
-        // prevent trigger onOpenChange when open state is not change
         if (open !== isOpen) {
-            // for uncontrolled mode
             setOpen(isOpen);
-            // for controlled mode
             onOpenChange?.(isOpen);
         }
     });
@@ -71,9 +68,7 @@ const Dropdown = forwardRef((inProps, ref) => {
         state: 'value',
     });
     const handleMenuListChange = useEventCallback((newValue) => {
-        // for uncontrolled mode
         setValue(newValue);
-        // for controlled mode
         onChangeProp?.(newValue);
         handleOpen(false);
     });
@@ -89,7 +84,6 @@ const Dropdown = forwardRef((inProps, ref) => {
         },
         onKeyDown: (e) => {
             if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                // prevent scroll
                 e.preventDefault();
                 handleOpen(true);
             }
@@ -98,7 +92,6 @@ const Dropdown = forwardRef((inProps, ref) => {
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(buttonProps);
     const handleButtonRef = useForkRef(buttonRef, focusVisibleRef);
     useEffect(() => {
-        // close menu when disabled
         if (disabled) {
             handleOpen(false);
         }

package/FocusTrap.js

@@ -4,38 +4,6 @@ import { useImperativeHandle } from 'react';
 import { u as useFocusTrapStack } from './chunks/useFocusTrapStack.js';
 import '@ringcentral/spring-base';
 
-/**
- * Utility component that locks focus inside the component.
- *
- * @deprecated This component is deprecated. Use `useFocusTrapStack` hook directly with MUI's FocusTrap instead.
- *
- * @example
- * ```tsx
- * import { FocusTrap } from '@mui/base';
- * import { useFocusTrapStack } from '@ringcentral/spring-ui';
- *
- * function MyModal({ open, children }) {
- *   // Call useFocusTrapStack where the `open` prop changes first (typically in Modal/Dialog)
- *   // This prevents race conditions between stack registration and autofocus behavior
- *   const { isEnabled } = useFocusTrapStack({ open });
- *
- *   return open ? (
- *     <Portal>
- *       <div className="modal-backdrop">
- *         <FocusTrap
- *           open={open}
- *           isEnabled={isEnabled}
- *         >
- *           <div className="modal-content" tabIndex={-1}>
- *             {children}
- *           </div>
- *         </FocusTrap>
- *       </div>
- *     </Portal>
- *   ) : null;
- * }
- * ```
- */
 const FocusTrap = (props) => {
     const { open, children, action, ...rest } = props;
     const { isEnabled } = useFocusTrapStack({ open });

package/InlineEditable.js

@@ -55,7 +55,6 @@ const InlineEditable = forwardRef((inProps, ref) => {
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
         const { key, shiftKey } = e;
-        // Enter + Shift in textarea creates a new line
         if (!isEditing || (multiline && key === 'Enter' && shiftKey)) {
             return;
         }
@@ -80,12 +79,9 @@ const InlineEditable = forwardRef((inProps, ref) => {
     const { document } = useWindowContext();
     useEffect(() => {
         if (previousIsEditing && !isEditing && inputRef.current) {
-            // * enter/esc should blur the input (tab does this automatically)
             document?.activeElement === inputRef.current && inputRef.current.blur();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isEditing, previousIsEditing]);
-    // close tooltip temporarily during editing
     const tooltipOpenProps = useTooltipForceHide(isEditing);
     const slot = multiline ? 'textarea' : 'input';
     const editableContent = (jsx(Component, { className: cls(slot, `${variant}-${slot}`, { disabled }), value: value, autoComplete: "off", placeholder: placeholder, ref: handleRef, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, "aria-label": TooltipProps?.['title'], ...rest, children: children }));

package/Link.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 
-var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-visible","sui-link-none":"sui-link-none","sui-link-hover":"sui-link-hover","sui-link-always":"sui-link-always","sui-link":"sui-link","sui-link-primary":"sui-link-primary","sui-link-secondary":"sui-link-secondary"};
+var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-visible","sui-link-none":"sui-link-none","sui-link-hover":"sui-link-hover","sui-link-always":"sui-link-always","sui-link":"sui-link","sui-link-primary":"sui-link-primary","sui-link-secondary":"sui-link-secondary","sui-link-inverted":"sui-link-inverted"};
 
 const Link = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Link' });

package/ListItem.js

@@ -17,6 +17,6 @@ import './chunks/usePrefersReducedMotion.js';
 import './chunks/SlideIn.js';
 import './chunks/getSlideIn.js';
 
-var ListItem = {"sui-list-item-root":"sui-list-item-root","sui-list-item-content":"sui-list-item-content","sui-list-item-text":"sui-list-item-text","sui-list-item-divider":"sui-list-item-divider","sui-list-item-container":"sui-list-item-container","sui-list-item-hover-actions":"sui-list-item-hover-actions","sui-list-item-small":"sui-list-item-small","sui-list-item-large":"sui-list-item-large","sui-list-item-auto":"sui-list-item-auto","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-list-item-hoverable":"sui-list-item-hoverable","sui-focus-visible-within":"sui-focus-visible-within","sui-list-item-clickable":"sui-list-item-clickable","sui-selected":"sui-selected","sui-list-item-highlighted":"sui-list-item-highlighted","sui-dragged":"sui-dragged","sui-active":"sui-active"};
+var ListItem = {"sui-list-item-root":"sui-list-item-root","sui-list-item-content":"sui-list-item-content","sui-list-item-text":"sui-list-item-text","sui-list-item-divider":"sui-list-item-divider","sui-list-item-container":"sui-list-item-container","sui-list-item-hover-actions":"sui-list-item-hover-actions","sui-list-item-small":"sui-list-item-small","sui-list-item-large":"sui-list-item-large","sui-list-item-auto":"sui-list-item-auto","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-list-item-hoverable":"sui-list-item-hoverable","sui-focus-visible-within":"sui-focus-visible-within","sui-list-item-clickable":"sui-list-item-clickable","sui-selected":"sui-selected","sui-list-item-highlighted":"sui-list-item-highlighted","sui-dragged":"sui-dragged","sui-active":"sui-active","sui-compact":"sui-compact"};
 
 export { ListItem as listItemStyle };

package/ListNavigation.js

@@ -5,7 +5,6 @@ import { tabbable } from 'tabbable';
 import 'react/jsx-runtime';
 import '@ringcentral/spring-base';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 const useItemNavigation = () => {
     const itemRef = useRef(null);
     const navContextValue = useListNavigationContext();
@@ -13,10 +12,7 @@ const useItemNavigation = () => {
         return {
             keyboardNavHandlers: {
                 onKeyDown: (e) => {
-                    // There some problems if `itemRef.current` is null.
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     const itemEl = itemRef.current;
-                    // All tabbable element in item. No include item self.
                     const allTabbable = tabbable(itemEl);
                     const { key, shiftKey, target, currentTarget } = e;
                     if (key === 'Tab') {
@@ -25,9 +21,7 @@ const useItemNavigation = () => {
                                 navContextValue.onShiftTab();
                             }
                             else if (allTabbable.at(0) === target) {
-                                // prevent default focus logic
                                 e.preventDefault();
-                                // focus item manual, because tabindex of item is -1
                                 itemEl.focus();
                             }
                         }

package/Menu.js

@@ -18,6 +18,6 @@ import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
 
-var Menu = {"sui-menu-paper":"sui-menu-paper"};
+var Menu = {"sui-menu-paper":"sui-menu-paper","sui-menu-root":"sui-menu-root","sui-compact":"sui-compact"};
 
 export { Menu as menuStyle };

package/MenuDivider.js

@@ -1,10 +1,10 @@
 export { M as MenuDivider } from './chunks/MenuDivider.js';
 import 'react/jsx-runtime';
 import 'react';
-import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 import './chunks/Divider.js';
+import '@ringcentral/spring-base';
 
-var MenuDivider = {"sui-menu-divider-root":"sui-menu-divider-root"};
+var MenuDivider = {"sui-menu-divider-root":"sui-menu-divider-root","sui-compact":"sui-compact"};
 
 export { MenuDivider as menuDividerStyle };

package/MenuFooter.js

@@ -1,16 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { M as MenuDivider } from './chunks/MenuDivider.js';
 import './chunks/Divider.js';
+import '@ringcentral/spring-base';
 
-var MenuFooter$1 = {"sui-menu-footer-root":"sui-menu-footer-root"};
+var MenuFooter$1 = {"sui-menu-footer-root":"sui-menu-footer-root","sui-compact":"sui-compact"};
 
 const MenuFooter = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuFooter' });
     const { classes, className, children, divider = true, ...rest } = props;
-    const cls = useClasses('menu-footer', classes, className);
+    const cls = useClassesWithMode('menu-footer', classes, className);
     return (jsxs(Fragment, { children: [divider && jsx(MenuDivider, {}), jsx("div", { className: cls('root'), ...rest, ref: ref, children: children })] }));
 });
 MenuFooter.displayName = 'SuiMenuFooter';

package/MenuHeader.js

@@ -1,16 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { M as MenuDivider } from './chunks/MenuDivider.js';
 import './chunks/Divider.js';
+import '@ringcentral/spring-base';
 
-var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end"};
+var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end","sui-compact":"sui-compact"};
 
 const MenuHeader = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuHeader' });
     const { classes, className, children, start, end, divider = true, ...rest } = props;
-    const cls = useClasses('menu-header', classes, className);
+    const cls = useClassesWithMode('menu-header', classes, className);
     return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [start && jsx("div", { className: cls('start'), children: start }), end && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
 });
 MenuHeader.displayName = 'SuiMenuHeader';