@ringcentral/spring-ui 1.7.0 → 1.8.0

package/chunks/Squircle.js

@@ -7,17 +7,10 @@ const SQUIRCLE_PATH = 'M 0.5 0 C 0.879 0 1 0.121 1 0.5 C 1 0.879 0.879 1 0.5 1 C
 const Squircle = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Squircle' });
     const { component = 'div', focusVisible, active, children: childrenProp, className, classes, interactive = true, fillShape: fillShapeProp = false, ...rest } = props;
-    /**
-     * If the children passed to this component have a conditionally rendered
-     * element, using toArray will ensure that any falsy children are removed.
-     * Otherwise fillShape will always be false even if only 1 truthy child
-     * is passed to this component.
-     */
     const children = React.Children.toArray(childrenProp);
     const firstChild = children[0];
     const fillShape = fillShapeProp &&
         firstChild &&
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         isValidElement(firstChild);
     const cls = useClasses('squircle', classes, className);
     const clipId = useId('sui-squircle-clip', true);

package/chunks/StatusIndicator.js

@@ -7,6 +7,7 @@ import { I as Icon } from './Icon.js';
 const IconSizeMap = {
     large: 'small',
     medium: 'xsmall',
+    small: 'xsmall',
 };
 const StatusIndicator = (inProps) => {
     const props = useThemeProps({ props: inProps, name: 'StatusIndicator' });

package/chunks/StepIcon.js

@@ -5,9 +5,7 @@ import { AlertFilledMd, AlertMd, CheckBoldMd, CheckMd } from '@ringcentral/sprin
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { I as Icon } from './Icon.js';
 
-const StepIcon = forwardRef(
-// @ts-ignore
-(inProps, ref) => {
+const StepIcon = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'StepIcon' });
     const { classes, className, children, active = false, completed = false, error = false, disabled = false, variant = 'contained', icon, symbol, ...rest } = props;
     const cls = useClasses('step-icon', classes, className);

package/chunks/StepperContext.js

@@ -1,13 +1,6 @@
 import { createContext, useContext } from 'react';
 
-/**
- * Provides information about the current step in Stepper.
- */
 const StepContext = createContext({});
-/**
- * Returns the current StepContext or an empty object if no StepContext
- * has been defined in the component tree.
- */
 const useStepContext = () => useContext(StepContext);
 
 const StepperContext = createContext({});

package/chunks/Tooltip.js

@@ -10,15 +10,6 @@ import { g as getFade } from './getFade.js';
 import { Popper } from '../Popper.js';
 import { P as PopperPaper } from './PopperPaper.js';
 
-/**
- * Accessibility naming strategy:
- * - Default (label mode): `title` is treated as an accessible label
- *   - string `title` → `aria-label`
- *   - React element `title` → `aria-labelledby` while the tooltip is open
- * - Description mode (`describeChild = true`): `title` is treated as an accessible description
- *   - when closed → native `title` attribute
- *   - when open   → `aria-describedby` pointing to the tooltip id
- */
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
 const ARIA_LABELLEDBY = 'aria-labelledby';
@@ -47,49 +38,33 @@ function computeTooltipA11y({ title, describeChild, triggerWhenDisabled, open, t
         });
     }
     if (describeChild) {
-        // Description mode: tooltip acts as an accessible description
-        // When closed: add title attribute (unless user provided their own)
-        // When open: swap to aria-describedby
         if (!hasAriaDescribedBy) {
             if (!hasUserTitle) {
-                // Only set tooltip title if user hasn't provided one
                 nameOrDescProps.title =
                     !open && titleIsString ? title : null;
             }
             else if (open) {
-                // If user provided a title and tooltip is open, remove native title to prevent duplicate
                 nameOrDescProps.title = null;
             }
             nameOrDescProps[ARIA_DESCRIBEDBY] = open ? tooltipId : null;
         }
     }
     else {
-        // Label mode (default): tooltip acts as an accessible label
-        // Use aria-label for strings, aria-labelledby for React elements
         if (titleIsString && !hasAriaLabel) {
             nameOrDescProps[ARIA_LABEL] = title;
-            // For string titles, Tooltip fully owns the label; always remove native title
             nameOrDescProps.title = null;
         }
         else if (!titleIsString && !hasAriaLabelledBy && title) {
-            // Only set aria-labelledby if title is truthy (React element exists)
             nameOrDescProps[ARIA_LABELLEDBY] = open ? tooltipId : null;
-            // Only remove native title when tooltip is open to prevent duplicate tooltips.
-            // When closed, leave existing title as a fallback accessible name.
             if (open) {
                 nameOrDescProps.title = null;
             }
         }
         else if (open) {
-            // Tooltip is open but we're not providing a label (e.g. child already has aria-label);
-            // still remove native title to avoid double tooltips.
             nameOrDescProps.title = null;
         }
     }
     if (triggerWhenDisabled) {
-        // When open and child does not already have aria-describedby: use tooltip id,
-        // and always remove native title on the disabled control to avoid double tooltips.
-        // When closed and title is a string: use native title as a fallback for SR on disabled.
         if (open) {
             if (!hasAriaDescribedBy) {
                 disabledOverrides[ARIA_DESCRIBEDBY] = tooltipId;
@@ -149,15 +124,10 @@ const TooltipTrigger = (props, ref) => {
         onOpenStateChange?.(e, false);
     };
     useEventListener(anchorRef, 'mouseenter', (e) => {
-        // Ensures touch devices do not trigger the tooltip, mouseleave will never be fired and the tooltip will be stuck open
         if (didInitiateWithTouch.current) {
-            // Immediately reset the flag, touchstart will fire again on the next tap and will set the flag back to true
             didInitiateWithTouch.current = false;
             return;
         }
-        // Remove the title ahead of time from the trigger.
-        // We don't want to wait for the next render commit.
-        // We would risk displaying two tooltips at the same time (native + this one).
         if (anchorRef.current) {
             anchorRef.current.removeAttribute('title');
         }
@@ -174,22 +144,17 @@ const TooltipTrigger = (props, ref) => {
     useEventListener(anchorRef, 'focus', (e) => {
         if (disableFocusListener)
             return;
-        // handleFocusVisible only support react event type, but it only need target event
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         handleFocusVisible(e);
         if (isFocusVisibleRef.current === true) {
             handleOpen(e);
         }
     });
     useEventListener(anchorRef, 'blur', (e) => {
-        // handleBlurVisible only support react event type, but this param is useless
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         handleBlurVisible(e);
         if (isFocusVisibleRef.current === false) {
             handleClose(e);
         }
     });
-    // Handle Escape key to close tooltip
     useEventListener(open ? document : null, 'keydown', (e) => {
         if (e.key === 'Escape') {
             handleClose(e);
@@ -241,7 +206,6 @@ const Tooltip = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Tooltip' });
     const { children, open: openProp, delay, onOpenStateChange, title, disableFocusListener, disableBackdropAnimation, triggerWhenDisabled, triggerWrapperProps, PopperProps, describeChild = false, ...rest } = props;
     const renderTooltip = (open, getAnchorEl, tooltipId) => {
-        // hides '', null/undefined, false, NaN)
         const effectiveOpen = open && !(!title && title !== 0);
         const content = effectiveOpen ? (jsx(TooltipView, { disableInteractions: openProp === undefined, ...rest, PopperProps: { ...PopperProps, id: tooltipId }, anchorEl: getAnchorEl, ref: ref, children: title })) : null;
         return disableBackdropAnimation ? (jsx(Fragment, { children: content })) : (jsx(AnimatePresence, { children: content }));

package/chunks/VirtualizedMenu.js

@@ -24,8 +24,7 @@ const VirtualizedMenuList = (props) => {
         else if (typeof initialFocus === 'number') {
             actions.current?.focusByIndex(initialFocus);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // only excute effect when menu list mounted
+    }, []);
     return (jsx(VirtualizedList, { actions: handleListActions, ...rest, ListProps: combineProps({
             role: 'menu',
         }, rest.ListProps), ref: listRef, totalListHeightChanged: totalListHeightChangedProp, children: children }));
@@ -71,66 +70,24 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         if (!popperPaperContentRef.current)
             return;
         popperPaperContentRef.current.style.maxHeight = `${availableHeight.current}px`;
-        /**
-         * Reset the paper content container height to `auto`, otherwise the virtuoso scroller
-         * will start misbehaving. We only need to set the height of the container during the
-         * initial list height computation to ensure the Popover places it appropriately.
-         */
         if (paperContentContainerRef.current) {
             paperContentContainerRef.current.style.height = `auto`;
         }
     });
     const handleTotalListHeightChanged = useEventCallback((listHeight) => {
-        /**
-         * As the VirtualizedList has components (Header/Footer used for vertical padding), the
-         * first 2 calls to `totalListHeightChanged` after triggering the Menu to open will have
-         * only computed the height of those components and not the full list. The next calls
-         * will include the actual list height. We ignore this call to prevent the menu from
-         * flickering between positions/performing any other unnecessary computations. We also
-         * need to know the entire list height to be able to choose the correct placement.
-         *
-         * If we didn't do this, we'd compute the available height prematurely based on an
-         * incorrect initial placement, and the height parameter in further calls to
-         * `handleTotalListHeightChanged` would be the adjusted height of the popover for
-         * the available space in the viewport and not the actual height of the list. For
-         * example, if the user set the `placement` prop to `top` but had a very long list
-         * which could not fit above the anchor element, the menu could initially  appear
-         * above the input despite the fact its best placement is below. The user would
-         * then see this placement change when re-opening the menu or scrolling, where the
-         * Popover would auto-update the position and then choose the correct placement.
-         */
         if (waitForListHeightComputeCallsCount.current < 2) {
             waitForListHeightComputeCallsCount.current += 1;
             return;
         }
         computedListHeight.current = listHeight;
-        /**
-         * Set the height of the paper content container to the height of the list. This is
-         * necessary to ensure the Popover determines the correct amount of space needed for
-         * the list. If we set the height directly on the list element it would cause an
-         * expensive rerender and if we didn't do either the computed available height
-         * for the Popover would not be correct.
-         */
         if (paperContentContainerRef.current) {
             paperContentContainerRef.current.style.height = `${listHeight}px`;
         }
-        // Update the Menu height now we've correctly computed the list height
         updateMenuHeight();
-        // Update the Popper position after the list height has been computed
         popperActions.current?.update();
-        // No need to wait for the height compute once we have the list height
         if (waitForHeightCompute) {
-            /**
-             * Perform all pending actions once we know the list height has settled. This is necessary
-             * as those pending actions expect the list to have fully rendered before they can be ran.
-             */
             requestAnimationFrame(() => {
                 setDeferPendingVirtualizedListActions(false);
-                /**
-                 * Wait for the next repaint to ensure the pending actions have been completed and the height
-                 * has been computed and painted. If we didn't do this, the menu could flicker if the initial
-                 * scroll position was set to a value that would cause the list to scroll down.
-                 */
                 requestAnimationFrame(() => {
                     setWaitForHeightCompute(false);
                 });
@@ -138,10 +95,6 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         }
     });
     const handleAvailableHeightChange = useEventCallback((value) => {
-        /**
-         * If we haven't yet computed the height of the virtualized list, we need to ignore
-         * the available height as the value will be for when the list has not yet fully rendered.
-         */
         if (computedListHeight.current === -1) {
             return;
         }
@@ -150,34 +103,14 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         updatePopoverHeight();
     });
     useEffect(() => {
-        /**
-         * Reset the computed values when the Menu is closed, we'll recompute them when it's reopened
-         */
         if (!open) {
             waitForListHeightComputeCallsCount.current = 0;
             computedListHeight.current = -1;
             availableHeight.current = -1;
         }
-        /**
-         * Hide the menu immediately after being triggered to open to allow time to compute the rendered
-         * list height. We need to do this to avoid a potential flicker when the menu first renders, as
-         * the virtualized list may not have rendered yet, but its adorning components may have. This may
-         * cause the menu to have a different initial placement than it would have after the list has
-         * rendered, for example if the user has chosen a preferred `top` placement but the menu cannot
-         * actually fit within the space above the anchor element.
-         *
-         * This is only necessary for the initial render. After the menu has found its correct placement,
-         * we can rely on the Popover to auto-update its placement and size as needed in response to list
-         * height changes/window resize events.
-         *
-         * In the `handleTotalListHeightChanged` callback we then reset this flag once we know the total list
-         * has actually rendered, so the first place the user sees the menu is in its correct position after
-         * all other height computation has been performed.
-         */
         if (open) {
             setWaitForHeightCompute(true);
             setDeferPendingVirtualizedListActions(true);
-            // Reset the max height of the popper paper content to ensure the list is not constrained
             if (popperPaperContentRef.current) {
                 popperPaperContentRef.current.style.maxHeight = 'none';
             }
@@ -185,17 +118,8 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     }, [open]);
     return (jsx(Popover, { bordered: true, PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, className: clsx(cls('root'), waitForHeightCompute && 'opacity-0'), PopperPaperProps: {
             contentRef: popperPaperContentRef,
-        }, onClose: onClose, onAvailableHeightChange: handleAvailableHeightChange, ref: ref, 
-        // disable animation. The Grow animation will cause vl height calculate incorrectly
-        motionProps: { variants: undefined }, actions: handlePopperActions, children: jsx("div", { className: cls('paper'), children: jsx("div", { ref: paperContentContainerRef, className: cls('paper-content-container'), children: jsx(VirtualizedMenuContext.Provider, { value: menuContextValue, children: jsx(VirtualizedMenuList, { data: data, totalCount: totalCount, isReady: !deferPendingVirtualizedListActions, isItemDisabled: isItemDisabled, initialFocus: initialFocus, style: { height: menuHeight }, ...combineProps(VirtualizedListProps, {
+        }, onClose: onClose, onAvailableHeightChange: handleAvailableHeightChange, ref: ref, motionProps: { variants: undefined }, actions: handlePopperActions, children: jsx("div", { className: cls('paper'), children: jsx("div", { ref: paperContentContainerRef, className: cls('paper-content-container'), children: jsx(VirtualizedMenuContext.Provider, { value: menuContextValue, children: jsx(VirtualizedMenuList, { data: data, totalCount: totalCount, isReady: !deferPendingVirtualizedListActions, isItemDisabled: isItemDisabled, initialFocus: initialFocus, style: { height: menuHeight }, ...combineProps(VirtualizedListProps, {
                             components: {
-                                /**
-                                 * Use Header/Footer components to add padding to the top and bottom of the
-                                 * list. We need to do this as Virtuoso doesn't support padding on the list
-                                 * due to how it uses padding/margin to simulate scrolling. Passing a List
-                                 * wrapper component also doesn't work as the list height computation
-                                 * doesn't account for the padding around the wrapper element.
-                                 */
                                 Header: VirtualizedListVerticalPadding,
                                 Footer: VirtualizedListVerticalPadding,
                             },

package/chunks/getFade.js

@@ -10,12 +10,14 @@ const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransiti
             transition: prefersReducedMotion
                 ? motionTransition.instant
                 : toggleOnTransition || motionTransition['haste-01-fast'],
+            pointerEvents: 'auto',
         },
         hidden: {
             opacity: 0,
             transition: prefersReducedMotion
                 ? motionTransition.instant
                 : toggleOffTransition || motionTransition['haste-01-slow'],
+            pointerEvents: 'none',
         },
     },
 });

package/chunks/useFocusTrapStack.js

@@ -2,19 +2,12 @@ import { useEffect } from 'react';
 import { useWindowContext, useId, useEventCallback } from '@ringcentral/spring-base';
 
 const FOCUS_TRAP_STACK = '__SUI_FOCUS_TRAP_STACK__';
-// use global to ensure the work in the same window
 const getFocusTrapStack = (global) => {
-    // @ts-ignore
     if (!global[FOCUS_TRAP_STACK]) {
-        // @ts-ignore
         global[FOCUS_TRAP_STACK] = [];
     }
-    // @ts-ignore
     return global[FOCUS_TRAP_STACK];
 };
-/**
- * Hook to manage focus trap stack for proper layering and focus management
- */
 const useFocusTrapStack = ({ open, }) => {
     const { globalThis } = useWindowContext();
     const id = useId();
@@ -30,7 +23,6 @@ const useFocusTrapStack = ({ open, }) => {
                 stack.splice(index, 1);
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     const isEnabled = useEventCallback(() => {
         const stack = getFocusTrapStack(globalThis);

package/chunks/useHelperTextId.js

@@ -12,34 +12,10 @@ const FormField = forwardRef((inProps, ref) => {
 });
 FormField.displayName = 'SuiFormField';
 
-/**
- * Hook to generate consistent helper text IDs for form field accessibility
- *
- * Follows the pattern: `${id}-helper-text`
- *
- * @param options Configuration options
- * @returns Generated helper text ID or undefined if no helper text
- *
- * @example
- * ```tsx
- * const Select = ({ helperText, FormHelperTextProps, ...props }) => {
- *   const id = useId(idProp);
- *   const helperTextId = useHelperTextId({ helperText, id, FormHelperTextProps });
- *
- *   return (
- *     <FormField FormHelperTextProps={{ id: helperTextId, ...FormHelperTextProps }}>
- *       <button aria-describedby={helperTextId}>
- *     </FormField>
- *   );
- * };
- * ```
- */
 const useHelperTextId = ({ helperText, id, FormHelperTextProps, }) => {
-    // Only generate ID if helper text exists
     if (!helperText) {
         return undefined;
     }
-    // Use existing ID if provided, otherwise generate standard pattern
     return FormHelperTextProps?.id || `${id}-helper-text`;
 };
 

package/chunks/useListNavigation.js

@@ -14,26 +14,19 @@ const useListNavigation = (props) => {
     const skipEnforceFocusRef = useRef(false);
     const focusList = () => {
         skipEnforceFocusRef.current = true;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         listRef.current.focus();
     };
     const focusTabBoundary = () => {
         skipEnforceFocusRef.current = true;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         sentinelTabBoundaryRef.current.focus();
     };
     const itemActions = useMemo(() => ({
-        // Prevent cache invalidation
-        // eslint-disable-next-line sonarjs/no-identical-functions
         onTab: () => {
             skipEnforceFocusRef.current = true;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             sentinelTabBoundaryRef.current.focus();
         },
-        // eslint-disable-next-line sonarjs/no-identical-functions
         onShiftTab: () => {
             skipEnforceFocusRef.current = true;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             listRef.current.focus();
         },
         updateFocusedItem: (el) => {
@@ -48,9 +41,7 @@ const useListNavigation = (props) => {
     });
     useImperativeHandle(actions, () => ({
         focus: focusFirstItem,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    }), []);
     const sentinelFocusHandler = (e) => {
         if (e.target === e.currentTarget) {
             const skipEnforceFocus = skipEnforceFocusRef.current;
@@ -63,9 +54,7 @@ const useListNavigation = (props) => {
     };
     const searchAndFocusItemHandler = (searchElementOption) => {
         return searchAndFocusItemHandlerProp(searchElementOption, {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             sentinelEnd: sentinelArrowNavRef.current,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             list: listRef.current,
         });
     };
@@ -96,7 +85,6 @@ const useListNavigation = (props) => {
             }
         }
         else {
-            // cover case about all item are disabled
             if (e.target === e.currentTarget && key === 'Tab' && !e.shiftKey) {
                 focusTabBoundary();
             }
@@ -125,10 +113,7 @@ const useListNavigation = (props) => {
         return (jsxs(ListNavigationContext.Provider, { value: itemActions, children: [items, jsx("div", { "aria-hidden": "true", ref: sentinelArrowNavRef })] }));
     };
     const renderTabBoundary = () => {
-        return (jsx("div", { 
-            // make sentinel end always render in scroller viewport center to
-            // prevent scroll when focus to sentinel end
-            style: { position: 'fixed', bottom: '50%' }, ref: sentinelTabBoundaryRef, tabIndex: 0, onFocus: sentinelFocusHandler }));
+        return (jsx("div", { style: { position: 'fixed', bottom: '50%' }, ref: sentinelTabBoundaryRef, tabIndex: 0, onFocus: sentinelFocusHandler }));
     };
     return { renderItems, renderTabBoundary, getListProps, listRef };
 };

package/chunks/useMenuItemSelect.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, forwardRef, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useFocusVisible, useActive, useForkRef, useClasses, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
+import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
 import { CheckBoldMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { I as Icon } from './Icon.js';
 import './useNestedParentMenu.js';
 import { u as useNestedMenuItem } from './useNestedMenuItem.js';
@@ -15,9 +15,7 @@ const MenuListContext = createContext({
 });
 const useMenuListContext = () => useContext(MenuListContext);
 
-const MenuItemSelectContext = 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-createContext(null);
+const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
 const useMenuItem = (props) => {
@@ -47,7 +45,6 @@ const useMenuItem = (props) => {
         },
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const getRootProps = (otherProps) => {
         return {
             role: 'menuitem',
@@ -66,9 +63,7 @@ const useVirtualizedMenuItem = (props) => {
     const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, autoClose, ref } = props;
     const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
     const vlItemProps = useVirtualizedItemPropsContext();
-    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusVisible({
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
         onFocus: (e) => {
             keyboardNavHandlers?.onFocus(e);
             onFocus?.(e);
@@ -92,7 +87,6 @@ const useVirtualizedMenuItem = (props) => {
         },
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const getRootProps = (otherProps) => {
         return {
             role: 'menuitem',
@@ -110,7 +104,7 @@ const useVirtualizedMenuItem = (props) => {
 const MenuItem = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItem' });
     const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
-    const cls = useClasses('menu-item', classes, className);
+    const cls = useClassesWithMode('menu-item', classes, className);
     const vlItemProps = useVirtualizedItemPropsContext();
     const isInVlRef = useRef(Boolean(vlItemProps));
     const useMenuItemHook = (() => {
@@ -141,9 +135,7 @@ const MenuItem = forwardRef((inProps, ref) => {
         if (autoFocus) {
             itemRef.current?.focus();
             requestAnimationFrame(() => {
-                if (
-                // jsdom doesn't support scrollIntoView, this avoids users needing to bring their own mock
-                process.env.NODE_ENV === 'test' &&
+                if (process.env.NODE_ENV === 'test' &&
                     typeof itemRef.current?.scrollIntoView !== 'function') {
                     return;
                 }
@@ -153,7 +145,6 @@ const MenuItem = forwardRef((inProps, ref) => {
                 });
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsx("div", { className: cls('root', {
             selectable,
@@ -194,9 +185,6 @@ const useMenuItemSelect = (props) => {
             autoFocus = value[0] === itemValue;
         }
         const menuItemRole = selectMode === 'single' ? 'menuitemradio' : 'menuitemcheckbox';
-        // Use appropriate ARIA attributes based on widget type and role:
-        // - For listbox/option pattern: use aria-selected
-        // - For menu with selectable items: use menuitemradio/menuitemcheckbox with aria-checked
         const ariaProps = widget === 'menu'
             ? { 'aria-checked': selected }
             : { 'aria-selected': selected };
@@ -210,7 +198,6 @@ const useMenuItemSelect = (props) => {
     const handleSelect = useEventCallback((itemValue) => {
         let action = Action.SELECT;
         if (isSingleMode) {
-            // User clicked on an already selected item
             if (value === itemValue) {
                 onClose?.();
             }

package/chunks/useMotionSafeTransition.js

@@ -1,10 +1,6 @@
 import { motionTransition } from '@ringcentral/spring-theme';
 import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
 
-/**
- * A hook that returns an instant transition if the user has reduced motion enabled.
- * If reduced motion is not enabled, returns the given motion transition.
- */
 const useMotionSafeTransition = (transition) => {
     const prefersReducedMotion = usePrefersReducedMotion();
     return prefersReducedMotion ? motionTransition.instant : transition;

package/chunks/useNestedParentMenu.js

@@ -34,12 +34,10 @@ const useNestedParentMenu = (props) => {
     }, []);
     useEffect(() => {
         const symbol = openedSubMenuSymbolRef.current;
-        // symbol existed means subMenu exited
         if (symbol && hoveredItemId && hoveredItemId !== symbol.anchorId) {
             symbol.closeSubMenu();
         }
     }, [hoveredItemId]);
-    // Ensure that all menus can be visually closed at the same time
     useLayoutEffect(() => {
         if (!open) {
             openedSubMenuSymbolRef.current?.closeSubMenu();

package/chunks/usePrefersReducedMotion.js

@@ -2,14 +2,9 @@ import { useGlobalListener } from '@ringcentral/spring-base';
 import { MotionConfigContext } from 'framer-motion';
 import { useState, useContext } from 'react';
 
-/**
- * in all component that uses this hook, we always use same instance of MediaQueryList
- * so we can cache the instance here
- */
 let instance;
 const getPrefersReducedMotionMediaQuery = () => {
     if (!instance ||
-        // in test environment, we need to reassign the instance to the window object
         process.env.NODE_ENV === 'test') {
         instance = window?.matchMedia?.('(prefers-reduced-motion)');
     }
@@ -25,11 +20,6 @@ const usePrefersReducedMotion = () => {
         target: mediaQuery,
         customKey: 'prefers-reduced-motion',
     });
-    /**
-     * As we're determining the reduced motion state ourselves after the initial mount,
-     * we need to check the MotionConfigContext to see how the prefers-reduced-motion
-     * state should be handled.
-     */
     if (context.reducedMotion === 'always') {
         return true;
     }

package/chunks/useTooltipForceHide.js

@@ -1,9 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-/**
- * store tooltip open state when forceHide is true and set tooltip open to false
- * restore open state once forceHide changed to false
- */
 const useTooltipForceHide = (forceHide) => {
     const [open, setOpen] = useState(false);
     const openStateStore = useRef();

package/chunks/useTrayNavigate.js

@@ -43,7 +43,6 @@ const useTray = (parameters) => {
             return;
         }
         if (handledValue === null) {
-            // return to previous TrayPanel when value is false
             handledValue = stack[stack.length - 2];
         }
         containerRef.current?.focus();