@ringcentral/spring-ui 1.7.0 → 1.9.0

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'),

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useState, useMemo, useEffect } from 'react';
 import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
@@ -14,7 +14,11 @@ const VirtualizedMenuList = (props) => {
     const actions = useRef(null);
     const handleListActions = useForkRef(actions, actionsProp);
     const listRef = useRef(null);
-    useEffect(() => {
+    const virtualizedMenuContext = useVirtualizedMenuContext();
+    useLayoutEffect(() => {
+        if (!virtualizedMenuContext?.open) {
+            return;
+        }
         const initialFocus = typeof initialFocusProps === 'function'
             ? initialFocusProps()
             : initialFocusProps;
@@ -24,21 +28,21 @@ 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
+    }, [virtualizedMenuContext?.open]);
     return (jsx(VirtualizedList, { actions: handleListActions, ...rest, ListProps: combineProps({
             role: 'menu',
         }, rest.ListProps), ref: listRef, totalListHeightChanged: totalListHeightChangedProp, children: children }));
 };
 
+const MENU_VERTICAL_PADDING = 8;
 const VirtualizedMenu = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'VirtualizedMenu' });
     const { classes, className, children, open, onClose, data, totalCount, isItemDisabled, VirtualizedListProps, popperActions: popperActionsProp, initialFocus = true, maxHeight, PopperProps, ...rest } = props;
     const popperPaperContentRef = useRef(null);
     const paperContentContainerRef = useRef(null);
-    const waitForListHeightComputeCallsCount = useRef(0);
+    const hasItemsRenderedRef = useRef(false);
     const [waitForHeightCompute, setWaitForHeightCompute] = useState(true);
-    const [menuHeight, setMenuHeight] = useState(0);
+    const [menuHeight, setMenuHeight] = useState(MENU_VERTICAL_PADDING * 2);
     const [deferPendingVirtualizedListActions, setDeferPendingVirtualizedListActions,] = useState(true);
     const computedListHeight = useRef(-1);
     const availableHeight = useRef(-1);
@@ -71,66 +75,25 @@ 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;
+        if (!hasItemsRenderedRef.current) {
             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.
-         */
+        const adjustedHeight = listHeight + MENU_VERTICAL_PADDING * 2
+            ;
+        computedListHeight.current = adjustedHeight;
         if (paperContentContainerRef.current) {
-            paperContentContainerRef.current.style.height = `${listHeight}px`;
+            paperContentContainerRef.current.style.height = `${adjustedHeight}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,11 +101,7 @@ 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) {
+        if (computedListHeight.current === -1 || !hasItemsRenderedRef.current) {
             return;
         }
         availableHeight.current = value;
@@ -150,34 +109,21 @@ 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;
+            hasItemsRenderedRef.current = false;
         }
-        /**
-         * 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 (computedListHeight.current !== -1) {
+                updateMenuHeight();
+                setWaitForHeightCompute(false);
+                setDeferPendingVirtualizedListActions(false);
+                popperActions.current?.update();
+            }
+            else {
+                setMenuHeight(MENU_VERTICAL_PADDING * 2);
+                setWaitForHeightCompute(true);
+                setDeferPendingVirtualizedListActions(true);
+            }
             if (popperPaperContentRef.current) {
                 popperPaperContentRef.current.style.maxHeight = 'none';
             }
@@ -185,21 +131,24 @@ 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, {
-                            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,
-                            },
+        }, 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, {
+                            ListProps: combineProps(VirtualizedListProps?.ListProps, {
+                                className: cls('list'),
+                                style: {
+                                    ['--sui-virtualized-menu-vertical-padding']: `${MENU_VERTICAL_PADDING}px`,
+                                },
+                            }),
                             totalListHeightChanged: handleTotalListHeightChanged,
+                            itemsRendered: (items) => {
+                                if (totalCount === 0 ||
+                                    (totalCount === undefined &&
+                                        data !== undefined &&
+                                        data.length === 0) ||
+                                    (items && items.length > 0)) {
+                                    hasItemsRenderedRef.current = true;
+                                }
+                                VirtualizedListProps?.itemsRendered?.(items);
+                            },
                             onKeyDown: (e) => {
                                 if (e.key === 'Tab') {
                                     e.preventDefault();
@@ -208,9 +157,6 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
                             },
                         }), children: children }) }) }) }) }));
 });
-function VirtualizedListVerticalPadding() {
-    return jsx("div", { className: "h-2" });
-}
 VirtualizedMenu.displayName = 'SuiVirtualizedMenu';
 
 export { VirtualizedMenuContext as V, VirtualizedMenu as a, VirtualizedMenuList as b, useVirtualizedMenuContext as u };

package/chunks/getFade.js

@@ -16,6 +16,10 @@ const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransiti
             transition: prefersReducedMotion
                 ? motionTransition.instant
                 : toggleOffTransition || motionTransition['haste-01-slow'],
+            pointerEvents: 'none',
+            transitionEnd: {
+                pointerEvents: undefined,
+            },
         },
     },
 });

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,16 +113,16 @@ 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 };
 };
 const isUnfocusable = (el) => el.matches('.sui-disabled, :disabled, hr, [role="separator"], [disabled]');
 const defaultSearchAndFocusItem = (searchElementOption, helperElements) => {
     const { list, sentinelEnd } = helperElements;
+    if (list.firstElementChild === sentinelEnd) {
+        return { focused: false };
+    }
     const getFirstItem = () => {
         const firstItem = list.firstElementChild;
         if (firstItem === sentinelEnd) {