@ringcentral/spring-ui 1.7.0 → 1.8.0

package/TimePicker.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useState, useMemo } from 'react';
-import { useFocusVisible, useForkRef, combineProps, runKeyHandler, useEventCallback, useClasses } from '@ringcentral/spring-base';
+import { useFocusVisible, useForkRef, combineProps, runKeyHandler, useEventCallback } from '@ringcentral/spring-base';
 import { CaretUpMd, CaretDownMd, RecentMd } from '@ringcentral/spring-icon';
 import { I as Icon } from './chunks/Icon.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import clsx from 'clsx';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { P as PickerTextField } from './chunks/PickerTextField.js';
 import '@mui/base';
 import './chunks/Squircle.js';
@@ -66,7 +66,6 @@ const parseNumberToString = (value, isTwelveHourSystem) => {
     const count = parseNumber(value, isTwelveHourSystem);
     return pad(count);
 };
-/** add miss zero */
 const pad = (num, size = 2) => {
     let s = `${num}`;
     while (s.length < size) {
@@ -74,12 +73,6 @@ const pad = (num, size = 2) => {
     }
     return s;
 };
-/**
- * get formatted time hh:mm
- * @param option `{hour, min, period}`
- * @param isTwelveHourSystem boolean
- * @returns `hh:mm AM` or `hh:mm PM` or `hh:mm`
- */
 const getFormattedTime = ({ hour, minute, period }, isTwelveHourSystem) => {
     const formattedHour = parseNumberToString(hour, isTwelveHourSystem);
     const formattedMinute = parseNumberToString(minute);
@@ -106,15 +99,9 @@ const twelveHourSystemSource = buildConsecutiveNumberToArray(0, 11);
 const twentyFourHourSystemSource = buildConsecutiveNumberToArray(0, 23);
 const minuteSource = [0, 15, 30, 45];
 const lastMinute = 45;
-/**
- * hour and minute timestamp
- */
 const getTimestampFromDate = (date) => {
     return date.getHours() * ONE_HOUR + date.getMinutes() * ONE_MINUTE;
 };
-/**
- * hour and minute number
- */
 const getHourAndMinute = (times) => {
     if (times === null) {
         return {
@@ -129,23 +116,12 @@ const getHourAndMinute = (times) => {
         minute: Math.floor(minute / ONE_MINUTE),
     };
 };
-/**
- * get timestamp from date or timestamp
- *
- * if nowTime is number, it must be hour and minute timestamp
- */
 function getTimestamp(nowTime) {
     return nowTime instanceof Date ? getTimestampFromDate(nowTime) : nowTime;
 }
-/**
- * hour and min object to timestamp
- */
 const getTimestampFromHourAndMin = (option) => {
     return option.hour * ONE_HOUR + option.minute * ONE_MINUTE;
 };
-/**
- * get period, `PM` or `AM`
- */
 function getPeriod(currHour) {
     return currHour >= HALF_DAY_HOURS ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
 }
@@ -157,8 +133,6 @@ const getRecoupHour = (currHour, period) => {
             }
             break;
         case TIME_SYSTEM_TEXT.AM:
-            // FIXME
-            // eslint-disable-next-line sonarjs/no-collapsible-if
             if (currHour < HALF_DAY_HOURS) {
                 if (currHour >= HALF_DAY_HOURS) {
                     return -HALF_DAY_HOURS;
@@ -174,9 +148,6 @@ const getDateBeginning = () => {
     date.setHours(0, 0, 0, 0);
     return date;
 };
-/**
- * get target time boundary, what time is nearest time with that timeGap
- */
 class TimeBoundary {
     _hour = undefined;
     value;
@@ -217,7 +188,6 @@ class TimeBoundary {
         let hour = time.getHours();
         let minute = time.getMinutes();
         const partCount = Math.ceil(minute / this.timeGap);
-        // when time is the latest or more, add one hour
         if (partCount >= HOUR_MINUTES / this.timeGap) {
             hour++;
             minute = 0;
@@ -254,9 +224,6 @@ const getRangeBoundary = ({ min, max, gap = TIME_GAP, }) => {
     };
 };
 
-/**
- * get range from current hour
- */
 function getNumberPickerBoundary(currentHour, { range, isTwelveHourSystem }) {
     const currentIsPM = currentHour >= HALF_DAY_HOURS;
     let maxHour = range.max.hour ?? 23;
@@ -306,7 +273,6 @@ const NumberPicker = forwardRef((props, ref) => {
         if (autoFocus) {
             pickerRef.current?.focus();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const index = Math.floor(value / step);
     const isFirst = index === 0;
@@ -416,7 +382,6 @@ const PickerView = (props) => {
             onChange(resultValue);
         }
     };
-    // get boundary must use current show value
     const boundary = useMemo(() => {
         const originHour = value.hour +
             (isTwelveHourSystem && value.period === TIME_SYSTEM_TEXT.PM ? 12 : 0);
@@ -425,7 +390,6 @@ const PickerView = (props) => {
             isTwelveHourSystem,
         });
     }, [range, value, isTwelveHourSystem]);
-    // reset pickerValue if pickerValue is out of range
     useLayoutEffect(() => {
         const { hour, minute, period } = value;
         if (hour > boundary.hour.max || minute > boundary.minute.max) {
@@ -442,17 +406,13 @@ const PickerView = (props) => {
                 period,
             }, true);
         }
-        // ignore `handleChange`
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [boundary, value]);
     const isHourView = selectionShowType === 'hour';
     const { getHourPickerAriaLabel, getMinutePickerAriaLabel, getPeriodToggleAriaLabel, } = screenReaderProps;
     const toggleTextDisabled = useMemo(() => {
         return Boolean(range.min.hour &&
-            // * min is pm time
             (range.min.hour >= HALF_DAY_HOURS ||
                 (range.max.hour &&
-                    // * min and max in same AM period
                     range.min.hour < HALF_DAY_HOURS &&
                     range.max.hour < HALF_DAY_HOURS)));
     }, [range.max.hour, range.min.hour]);
@@ -484,7 +444,7 @@ const PickerView = (props) => {
         }, "data-sui-picker-selection-view": selectionShowType }));
 };
 
-var TimePicker$1 = {"sui-time-picker-picker-root":"sui-time-picker-picker-root","sui-time-picker-time-button":"sui-time-picker-time-button","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-time-picker-number-picker":"sui-time-picker-number-picker","sui-time-picker-picker-view":"sui-time-picker-picker-view","sui-time-picker-main-view":"sui-time-picker-main-view","sui-time-picker-twelve-hour":"sui-time-picker-twelve-hour","sui-time-picker-minute-selection-view":"sui-time-picker-minute-selection-view","sui-time-picker-hour-selection-view":"sui-time-picker-hour-selection-view"};
+var TimePicker$1 = {"sui-time-picker-picker-root":"sui-time-picker-picker-root","sui-time-picker-time-button":"sui-time-picker-time-button","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-time-picker-number-picker":"sui-time-picker-number-picker","sui-time-picker-picker-view":"sui-time-picker-picker-view","sui-time-picker-main-view":"sui-time-picker-main-view","sui-time-picker-twelve-hour":"sui-time-picker-twelve-hour","sui-time-picker-minute-selection-view":"sui-time-picker-minute-selection-view","sui-time-picker-hour-selection-view":"sui-time-picker-hour-selection-view","sui-compact":"sui-compact"};
 
 const TimePicker = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'TimePicker' });
@@ -493,7 +453,7 @@ const TimePicker = forwardRef((inProps, ref) => {
         getMinutePickerAriaLabel: (minute) => `Minute: ${minute}, use up and down arrow keys to change minutes time by 15 minutes`,
         getPeriodToggleAriaLabel: (period) => `${period}, use up or down arrow keys to switch between AM or PM`,
     }, className, ...rest } = props;
-    const cls = useClasses('time-picker', classes, className);
+    const cls = useClassesWithMode('time-picker', classes, className, ['main-view', 'hour-selection-view', 'minute-selection-view']);
     const actionRef = useRef(null);
     const [selectionShowType, setSelectionType] = useState('none');
     const pickerValue = value ?? defaultPickerValue;
@@ -525,7 +485,6 @@ const TimePicker = forwardRef((inProps, ref) => {
             update(toValue);
         }
         else {
-            // * when time is zero emit null
             update(toValue ? getTimestamp(toValue) : null);
         }
     });
@@ -564,7 +523,6 @@ const TimePicker = forwardRef((inProps, ref) => {
         }
         handleChange(time);
     };
-    // reset value if value is out of range
     useLayoutEffect(() => {
         if (textFieldTimestamp === null)
             return;
@@ -587,6 +545,9 @@ const TimePicker = forwardRef((inProps, ref) => {
                 onExitComplete: () => {
                     setSelectionType('none');
                 },
+                PopperProps: {
+                    offset: 4,
+                },
             }, PopoverProps), endIconSymbol: RecentMd, clearBtn: clearBtn, ...rest, children: jsx(PickerView, { isTwelveHourSystem: isTwelveHourSystem, onChange: updateTime, afterDraftConfirm: () => {
                     actionRef.current?.close();
                 }, defaultValue: {

package/VirtualizedList.js

@@ -12,9 +12,7 @@ const useVirtualizedItemPropsContext = () => useContext(VirtualizedItemPropsCont
 
 const VirtuosoList = forwardRef((props, ref) => {
     const { children: childrenProp, context, style, ...rest } = props;
-    const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-     } = context;
+    const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey, } = context;
     const handleListRef = useForkRef(listRef, ref);
     let rangeStart = null;
     let rangeEnd = null;
@@ -33,7 +31,6 @@ const VirtuosoList = forwardRef((props, ref) => {
         children = [
             ...(rangeStart !== null
                 ? keepInvisibleItems
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     .filter((itemIndex) => itemIndex < rangeStart)
                     .map((itemIndex) => {
                     const itemData = data ? data[itemIndex] : itemIndex;
@@ -47,7 +44,6 @@ const VirtuosoList = forwardRef((props, ref) => {
             ...childrenProp,
             ...(rangeEnd !== null
                 ? keepInvisibleItems
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     .filter((itemIndex) => itemIndex > rangeEnd)
                     .map((itemIndex) => {
                     const itemData = data ? data[itemIndex] : itemIndex;
@@ -63,9 +59,7 @@ const VirtuosoList = forwardRef((props, ref) => {
     return (jsx(List, { ...ListProps, ...rest, actions: listActions, style: {
             ...ListProps?.style,
             ...style,
-            // optimize list scrolling
             ...(isScrolling ? { pointerEvents: 'none' } : undefined),
-            // for prop `keepInvisibleItems`
             position: 'relative',
         }, preventContainerScroll: false, ref: handleListRef, searchAndFocusItemHandler: searchAndFocusItemHandler, children: children }));
 });
@@ -96,17 +90,10 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         return index <= endIndex && index >= startIndex;
     };
     const focusItemByIndex = (index) => {
-        /**
-         * If the component isn't ready, we need to defer the focus action until the component is ready.
-         * This is necessary if a parent component is waiting for some height calculation of the list to
-         * be performed before it actually renders the list. If we didn't do this the component would not
-         * know where to scroll to/would scroll to an incorrect position as it has not yet fully rendered.
-         */
         if (!isReady) {
             new Promise((resolve) => {
                 initialFocusItemByIndexPromiseRef.current = resolve;
             }).then(() => {
-                // Wrap in rAF to ensure height has truly settled before focusing
                 requestAnimationFrame(() => focusByIndexAction(index));
             });
         }
@@ -173,7 +160,6 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         if (direction === 'up') {
             do {
                 if (pointer - 1 < firstItemIndex) {
-                    // disabled focus loop when infinite is true
                     if (infinite) {
                         pointer = startIndex;
                     }
@@ -193,7 +179,6 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         else {
             do {
                 if (pointer + 1 > lastItemIndex) {
-                    // disabled focus loop when infinite is true
                     if (infinite) {
                         pointer = startIndex;
                     }
@@ -234,7 +219,6 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         focusByIndex: focusByIndexAction,
     }), [focusByIndexAction]);
     useEffect(() => {
-        // Execute the initial focus item by index promise when the list is ready
         if (isReady) {
             initialFocusItemByIndexPromiseRef.current?.();
         }
@@ -252,25 +236,13 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         computeItemKey: computeItemKey,
     };
     const { externalWindow } = useWindowContext();
-    /**
-     * The 'externalWindow' prop exists only in the forked version of Virtuoso.
-     *
-     * Passing 'externalWindow' to the original Virtuoso component will result in a React error.
-     *
-     * If 'externalWindow' is present in the context, it indicates that the user is using the forked version.
-     *
-     * Therefore, we only pass 'externalWindow' to Virtuoso when it exists and is not the same as the global window, ensuring compatibility.
-     */
     const externalProps = externalWindow &&
-        // window is not the same as the global window, we need to pass the externalWindow to Virtuoso for fork virtuoso
         externalWindow !== (window || globalThis.window)
         ? {
             externalWindow,
         }
         : undefined;
-    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalProps, ref: handleVirtuosoRef, 
-        // pre-render, make scroll smooth when move focus
-        increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
+    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalProps, ref: handleVirtuosoRef, increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
             listRangeRef.current = range;
             const itemRenderedPromise = itemRenderedPromiseRef.current;
             if (itemRenderedPromise) {

package/chunks/Alert.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, isValidElement } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
+import { forwardRef, useMemo, isValidElement } from 'react';
 import { Xmd, InfoMd, AlertMd, SuccessMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode, useMode } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
 import { I as Icon } from './Icon.js';
 import { I as IconButton } from './IconButtonLabel.js';
@@ -17,9 +16,11 @@ const DEFAULT_ICON_MAP = {
 const Alert = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Alert' });
     const { action, classes, className, component: AlertRoot = 'div', closeText = 'close', children, icon: iconProp, startSlot, onClose, severity = 'info', CloseButtonProps, ...rest } = props;
-    const cls = useClasses('alert', classes, className);
+    const cls = useClassesWithMode('alert', classes, className);
+    const { mode } = useMode();
+    const iconSize = useMemo(() => (mode === 'compact' ? 'small' : 'medium'), [mode]);
     const renderIcon = (icon, severity) => {
-        return (jsx("div", { className: cls('icon', `${severity}-icon`), children: isValidElement(icon) ? (icon) : (jsx(Icon, { size: "medium", symbol: icon })) }));
+        return (jsx("div", { className: cls('icon', `${severity}-icon`), children: isValidElement(icon) ? (icon) : (jsx(Icon, { size: iconSize, symbol: icon })) }));
     };
     let startSlotContent = null;
     if (startSlot) {
@@ -31,7 +32,7 @@ const Alert = forwardRef((inProps, ref) => {
     }
     let closeSlot = null;
     if (onClose) {
-        closeSlot = (jsx(IconButton, { symbol: Xmd, variant: "icon", shape: 'squircle', color: 'secondary', size: "small", background: false, title: closeText, "aria-label": closeText, onClick: onClose, ...CloseButtonProps, className: clsx(cls('close'), CloseButtonProps?.className) }));
+        closeSlot = (jsx(IconButton, { symbol: Xmd, variant: "icon", shape: 'squircle', color: 'secondary', size: iconSize, background: false, title: closeText, "aria-label": closeText, onClick: onClose, ...CloseButtonProps, className: clsx(cls('close'), CloseButtonProps?.className) }));
     }
     let actionSlot = null;
     if (action) {
@@ -40,7 +41,7 @@ const Alert = forwardRef((inProps, ref) => {
     return (jsxs(AlertRoot, { ...rest, ref: ref, className: cls('root', severity), children: [startSlotContent, jsxs("div", { className: cls('body'), children: [jsx("div", { className: cls('content'), role: "alert", children: children }), actionSlot] }), closeSlot] }));
 });
 const AlertTitle = ({ className, classes, ...rest }) => {
-    const cls = useClasses('alert-title', classes, className);
+    const cls = useClassesWithMode('alert-title', classes, className);
     return jsx("div", { className: cls('root'), ...rest });
 };
 

package/chunks/BottomNavigationItem.js

@@ -15,7 +15,6 @@ const BottomNavigationItem = forwardRef((inProps, ref) => {
     const { classes, symbol, activatedSymbol, count, value: valueProp, activated: activatedProp, expanded: expandedProp, onClick, BadgeProps = {}, TooltipProps = {}, ButtonProps = {}, label, className, } = props;
     const cls = useClasses('bottom-navigation-item', classes, className);
     const { value: selectedValue, expanded: isExpanded, onSelected, animationComplete, } = useBottomNavigationContext() || {};
-    // close tooltip temporarily during animation
     const tooltipOpenProps = useTooltipForceHide(animationComplete === false);
     const selected = selectedValue === valueProp;
     const activated = activatedProp !== undefined ? activatedProp : selected;

package/chunks/Button.js

@@ -47,7 +47,6 @@ const Button = withTooltip(forwardRef((inProps, ref) => {
     const ButtonRoot = component;
     const isTextContent = typeof children === 'string';
     const title = (() => {
-        // * if title is not provided and children is string, use children as title
         if (titleProp === undefined && isTextContent) {
             return children;
         }

package/chunks/Chip.js

@@ -11,18 +11,14 @@ const Chip = forwardRef((inProps, ref) => {
     const { component: ChipRoot = 'div', classes, className, children, label, startSlot, size = 'large', clickable: clickableProp, truncate = true, color = 'default', DeleteIconProps = {}, disabled, onClick, onDelete, onKeyDown, onKeyUp, ...rest } = props;
     const cls = useClasses('chip', classes, className);
     const handleDeleteIconClick = (event) => {
-        // Stop the event from bubbling up to the `Chip`
         event.stopPropagation();
         if (onDelete) {
             onDelete(event);
         }
     };
     const handleKeyDown = (event) => {
-        // Ignore events from children of `Chip`.
         if (event.currentTarget === event.target &&
             isDeleteKeyboardEvent(event)) {
-            // Will be handled in keyUp, otherwise some browsers
-            // might init navigation
             event.preventDefault();
         }
         if (onKeyDown) {
@@ -30,7 +26,6 @@ const Chip = forwardRef((inProps, ref) => {
         }
     };
     const handleKeyUp = (event) => {
-        // Ignore events from children of `Chip`.
         if (event.currentTarget === event.target &&
             onDelete &&
             isDeleteKeyboardEvent(event)) {

package/chunks/Drawer.js

@@ -9,38 +9,9 @@ import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
 import { g as getSlideIn } from './getSlideIn.js';
 import { M as Modal } from './Modal.js';
 
-/**
- * Drawer Component - Base drawer without gesture support
- *
- * A clean, lightweight drawer component that provides basic modal/slide functionality.
- * For gesture support, use SwipeableDrawer which builds on top of this component.
- *
- * @example
- * ```tsx
- * // Simple navigation drawer
- * <Drawer
- *   open={open}
- *   onClose={onClose}
- *   anchor="left"
- *   variant="temporary"
- * >
- *   <Navigation />
- * </Drawer>
- *
- * // Bottom sheet without gestures
- * <Drawer
- *   open={open}
- *   onClose={onClose}
- *   anchor="bottom"
- * >
- *   <Content />
- * </Drawer>
- * ```
- */
 const Drawer = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Drawer' });
-    const { anchor = 'left', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', // eslint-disable-line @typescript-eslint/no-unused-vars
-    blocking = true, measurementRefs, headerProps, ...rest } = props;
+    const { anchor = 'left', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', blocking = true, measurementRefs, headerProps, ...rest } = props;
     const headerRef = measurementRefs?.header;
     const footerRef = measurementRefs?.footer;
     const contentRef = measurementRefs?.content;

package/chunks/ListItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
-import { useClasses, useFocusVisible, useActive, useHover, combineProps, useForkRef } from '@ringcentral/spring-base';
-import { motionTransition, useThemeProps } from '@ringcentral/spring-theme';
+import { useFocusVisible, useActive, useHover, combineProps, useForkRef } from '@ringcentral/spring-base';
+import { motionTransition, useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { D as Divider } from './Divider.js';
 import { useItemNavigation } from '../ListNavigation.js';
 import { useVirtualizedItemPropsContext } from '../VirtualizedList.js';
@@ -34,7 +34,7 @@ const HoverActions = (props) => {
 const ListItem = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'ListItem' });
     const { classes, className, children, hoverActions, size = 'small', tabIndex = -1, role = 'listitem', divider = true, onClick, clickable = Boolean(onClick), hoverable = true, focused = false, highlighted = false, autoFocus, selected, dragged, alwaysShowHoverActions = false, instantHoverActions = false, style: styleProp, ...rest } = props;
-    const cls = useClasses('list-item', classes, className);
+    const cls = useClassesWithMode('list-item', classes, className);
     const { itemRef, keyboardNavHandlers } = useItemNavigation() ?? {};
     const virtualizedItemProps = useVirtualizedItemPropsContext();
     const { focusVisible, focusVisibleWithin, focusVisibleRef, focusVisibleHandlers, } = useFocusVisible({ ...props, within: true });
@@ -44,8 +44,6 @@ const ListItem = forwardRef((inProps, ref) => {
     });
     const { hover, hoverHandlers } = useHover({
         ...props,
-        // useHover only used for hover actions,
-        // so disabled when no hover actions or always show
         disabled: !hoverable || !hoverActions,
     });
     const enhancedEventHandlers = (() => {
@@ -64,7 +62,6 @@ const ListItem = forwardRef((inProps, ref) => {
         if (autoFocus) {
             itemRef?.current?.focus();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const isShowHoverAction = hover || focusVisibleWithin || alwaysShowHoverActions;
     return (jsxs("div", { className: cls('root', size, {

package/chunks/Menu.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext, forwardRef, useMemo } from 'react';
-import { useClasses, useEventCallback } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useEventCallback } from '@ringcentral/spring-base';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { a as useNestedParentMenu, N as NestedMenuContext } from './useNestedParentMenu.js';
 import { P as Popover } from './Popover.js';
 
@@ -13,7 +13,7 @@ const useMenuContext = () => {
 const Menu = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Menu' });
     const { classes, children, open = false, onClose, autoFocus = true, className, PopperProps, ...rest } = props;
-    const cls = useClasses('menu', classes, className);
+    const cls = useClassesWithMode('menu', classes, className);
     const padding = PopperProps?.padding;
     const popperPadding = typeof padding === 'object'
         ? {

package/chunks/MenuDivider.js

@@ -1,13 +1,12 @@
 import { 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 { D as Divider } from './Divider.js';
 
 const MenuDivider = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuDivider' });
     const { classes, className, ...rest } = props;
-    const cls = useClasses('menu-divider', classes, className);
+    const cls = useClassesWithMode('menu-divider', classes, className);
     return jsx(Divider, { className: cls('root'), ...rest, ref: ref });
 });
 MenuDivider.displayName = 'SuiMenuDivider';

package/chunks/MenuItemText.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useClasses, getTitle } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { getTitle } from '@ringcentral/spring-base';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 
 const MenuItemText = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItemText' });
     const { classes, className, primary, primaryText, infoText, info, children, ...rest } = props;
-    const cls = useClasses('menu-item-text', classes, className);
+    const cls = useClassesWithMode('menu-item-text', classes, className);
     const primaryContent = primary ?? primaryText ?? children;
     const secondaryContent = info ?? infoText;
     return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text'), title: getTitle(primaryContent), children: primaryContent }), secondaryContent && (jsx("span", { className: cls('info-text'), title: getTitle(secondaryContent), children: secondaryContent }))] }));

package/chunks/MenuList.js

@@ -31,13 +31,10 @@ const MenuList = forwardRef((inProps, ref) => {
     const { document } = useWindowContext();
     useEffect(() => {
         if (autoFocus &&
-            // ensure item can auto focus correctly
             !listRef.current?.contains(document?.activeElement ?? null)) {
             actions.current?.focus();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    // Use appropriate role and ARIA attributes based on widget type
     const listRole = widget === 'select' ? 'listbox' : 'menu';
     const listboxProps = widget === 'select'
         ? { 'aria-multiselectable': selectMode === 'multiple' }

package/chunks/PickerTextField.js

@@ -57,7 +57,6 @@ const PickerTextField = forwardRef((props, ref) => {
                     ...inputProps,
                 }, ...rest, readOnly: true, onClear: (e) => {
                     onClear?.(e);
-                    // prevent open popover
                     e.stopPropagation();
                 } }), jsx(Popover, { bordered: true, open: open, anchorEl: anchorRef.current, onClose: (...args) => {
                     handleOpen(false);

package/chunks/Popover.js

@@ -37,11 +37,6 @@ const Popover = forwardRef((inProps, ref) => {
                 const popperPaperProps = {
                     className: cls('paper', { bordered, shadow }),
                 };
-                /**
-                 * If no transform origin is set, determine the transform origin using
-                 * the computed placement. This ensures the transition used for the
-                 * grow animation is always faithful to where the Popover is positioned.
-                 */
                 if (!transformOrigin) {
                     popperPaperProps.style = {
                         ...popperPaperProps.style,

package/chunks/Select.js

@@ -26,7 +26,6 @@ const useSelect = (props) => {
             },
             onKeyDown: (e) => {
                 if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                    // prevent scroll
                     e.preventDefault();
                     handleOpen(true);
                 }
@@ -86,7 +85,6 @@ const Select = forwardRef((inProps, ref) => {
         }
     });
     useEffect(() => {
-        // close menu when disabled
         if (disabled) {
             handleOpen(false);
         }
@@ -108,7 +106,6 @@ const Select = forwardRef((inProps, ref) => {
             if (getSelectedIndex)
                 return getSelectedIndex(value);
             if (Array.isArray(value)) {
-                // For multiple selection, focus on the last selected item
                 const lastSelectedItem = value.at(-1);
                 return lastSelectedItem ? data.indexOf(lastSelectedItem) : -1;
             }
@@ -117,45 +114,17 @@ const Select = forwardRef((inProps, ref) => {
         return true;
     });
     const handleMenuListChange = useEventCallback((newValue) => {
-        // for uncontrolled mode
         setValue(newValue);
         if (inputRef.current) {
-            /**
-             * Programatically trigger the onChange event of the native input element.
-             * Doing this means we can avoid cloning another event to mimic the ChangeEvent.
-             */
-            /**
-             * Set the value property of the input element, avoiding React's overridden setter.
-             * This will cause the input element to update its value and fire the onChange event,
-             * `handleInputChange` will then call onChange
-             */
             Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set?.call(inputRef.current, newValue);
             const event = new Event('input', { bubbles: true });
-            /**
-             * When `selectMode` is `multiple`, the default `event.target.value` type is `string`,
-             * but it should actually be `string[]`. Since browsers do not natively support this,
-             * we need to override the `value` property to ensure it correctly reflects an array.
-             *
-             * Why do we need `Object.defineProperty` to override `event.target.value`?
-             * - The `target` property of an event object is read-only, so we cannot modify it directly.
-             * - `Object.defineProperty` allows us to override `event.target`, but it requires returning
-             *   an object from the getter.
-             * - To dynamically override only the `value` property while preserving all other properties
-             *   and methods of the input element, we use a `Proxy`.
-             *
-             * How does this approach help?
-             * - Ensures `event.target.value` correctly returns a `string[]` instead of a `string`.
-             * - Keeps the event object behaving as expected when accessed by event handlers.
-             * - Preserves other native properties (`name`, `id`, `type`, etc.) and methods
-             *   (`focus()`, `blur()`, etc.), preventing potential "Illegal Invocation" errors.
-             */
             Object.defineProperty(event, 'target', {
                 configurable: true,
                 get: () => {
                     return new Proxy(inputRef.current, {
                         get(obj, prop) {
                             if (prop === 'value') {
-                                return newValue; // override 'value'
+                                return newValue;
                             }
                             return obj[prop];
                         },
@@ -169,10 +138,6 @@ const Select = forwardRef((inProps, ref) => {
         open,
         handleOpen,
     });
-    /**
-     * The non-virtualized Menu/MenuList components have the necessary contexts
-     * baked in. For the virtualized Menu, we need to provide the context values.
-     */
     const { contextValue: virtualizedContextValue } = useMenuItemSelect({
         value,
         onChange: handleMenuListChange,
@@ -224,9 +189,7 @@ const Select = forwardRef((inProps, ref) => {
                         prefersReducedMotion: prefersReducedMotion,
                     }), children: children }) }) }));
     }
-    return (jsxs(Fragment, { children: [jsxs(FormField, { disabled: disabled, required: required, variant: variant, error: error, 
-                // Make sure the focus style doesn't disappear when the Menu is in its close transition
-                focused: open || (!open && !didMenuExit), htmlFor: id, label: label, labelProps: {
+    return (jsxs(Fragment, { children: [jsxs(FormField, { disabled: disabled, required: required, variant: variant, error: error, focused: open || (!open && !didMenuExit), htmlFor: id, label: label, labelProps: {
                     id: labelId,
                 }, ref: ref, contentRef: formFieldContentRef, helperText: helperText, FormHelperTextProps: { id: helperTextId, ...FormHelperTextProps }, className: cls('root', { error }), classes: {
                     outlined: cls('outlined'),