@ringcentral/spring-ui 1.7.0

package/chunks/VirtualizedMenu.js

@@ -0,0 +1,216 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import { P as Popover } from './Popover.js';
+import { VirtualizedList } from '../VirtualizedList.js';
+
+const VirtualizedMenuContext = createContext(null);
+const useVirtualizedMenuContext = () => useContext(VirtualizedMenuContext);
+
+const VirtualizedMenuList = (props) => {
+    const { children, actions: actionsProp, initialFocus: initialFocusProps, totalListHeightChanged: totalListHeightChangedProp, ...rest } = props;
+    const actions = useRef(null);
+    const handleListActions = useForkRef(actions, actionsProp);
+    const listRef = useRef(null);
+    useEffect(() => {
+        const initialFocus = typeof initialFocusProps === 'function'
+            ? initialFocusProps()
+            : initialFocusProps;
+        if (initialFocus === true) {
+            actions.current?.focus();
+        }
+        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 }));
+};
+
+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 [waitForHeightCompute, setWaitForHeightCompute] = useState(true);
+    const [menuHeight, setMenuHeight] = useState(0);
+    const [deferPendingVirtualizedListActions, setDeferPendingVirtualizedListActions,] = useState(true);
+    const computedListHeight = useRef(-1);
+    const availableHeight = useRef(-1);
+    const cls = useClasses('virtualized-menu', classes, className);
+    const padding = PopperProps?.padding;
+    const popperPadding = typeof padding === 'object'
+        ? {
+            top: padding.top ?? 16,
+            right: padding.right ?? 16,
+            bottom: padding.bottom ?? 16,
+            left: padding.left ?? 16,
+        }
+        : padding ?? 16;
+    const popperActions = useRef(null);
+    const handlePopperActions = useForkRef(popperActions, popperActionsProp);
+    const menuContextValue = useMemo(() => {
+        return { open };
+    }, [open]);
+    const updateMenuHeight = useEventCallback(() => {
+        let computedMenuHeight = computedListHeight.current;
+        if (computedMenuHeight > availableHeight.current) {
+            computedMenuHeight = availableHeight.current;
+        }
+        if (maxHeight !== undefined && computedMenuHeight > maxHeight) {
+            computedMenuHeight = maxHeight;
+        }
+        setMenuHeight(computedMenuHeight);
+    });
+    const updatePopoverHeight = useEventCallback(() => {
+        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);
+                });
+            });
+        }
+    });
+    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;
+        }
+        availableHeight.current = value;
+        updateMenuHeight();
+        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';
+            }
+        }
+    }, [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,
+                            },
+                            totalListHeightChanged: handleTotalListHeightChanged,
+                            onKeyDown: (e) => {
+                                if (e.key === 'Tab') {
+                                    e.preventDefault();
+                                    onClose?.();
+                                }
+                            },
+                        }), 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/VisuallyHidden.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+
+const VisuallyHidden = forwardRef((props, ref) => {
+    const { classes, className, children, ...rest } = props;
+    const cls = useClasses('visually-hidden', classes, className);
+    return (jsx("span", { className: cls('root'), ...rest, ref: ref, children: children }));
+});
+VisuallyHidden.displayName = 'SuiVisuallyHidden';
+
+export { VisuallyHidden as V };

package/chunks/getFade.js

@@ -0,0 +1,23 @@
+import { motionTransition } from '@ringcentral/spring-theme';
+
+const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, } = {}) => ({
+    initial: 'hidden',
+    animate: toggle ? 'show' : 'hidden',
+    exit: 'hidden',
+    variants: {
+        show: {
+            opacity: 1,
+            transition: prefersReducedMotion
+                ? motionTransition.instant
+                : toggleOnTransition || motionTransition['haste-01-fast'],
+        },
+        hidden: {
+            opacity: 0,
+            transition: prefersReducedMotion
+                ? motionTransition.instant
+                : toggleOffTransition || motionTransition['haste-01-slow'],
+        },
+    },
+});
+
+export { getFade as g };

package/chunks/getGrow.js

@@ -0,0 +1,70 @@
+import { motionTransition } from '@ringcentral/spring-theme';
+
+const getGrow = ({ toggle = true, direction = 'both', prefersReducedMotion = false, toggleOffTransition, toggleOnTransition, transformOrigin, } = {}) => {
+    const directionStr = direction === 'both' ? '' : direction.toUpperCase();
+    return {
+        style: {
+            transformOrigin: transformOriginToString(transformOrigin),
+        },
+        initial: 'invisible',
+        animate: toggle ? 'visible' : 'invisible',
+        exit: 'invisible',
+        variants: {
+            invisible: {
+                transform: `scale${directionStr}(0.618)`,
+                opacity: 0,
+                ...(!prefersReducedMotion &&
+                    toggleOffTransition && { transition: toggleOffTransition }),
+            },
+            visible: {
+                transform: `scale${directionStr}(1)`,
+                opacity: 1,
+                ...(!prefersReducedMotion &&
+                    toggleOnTransition && { transition: toggleOnTransition }),
+            },
+        },
+        transition: prefersReducedMotion
+            ? motionTransition.instant
+            : motionTransition['spring-01-fast'],
+    };
+};
+const transformOriginToString = (transformOrigin) => {
+    if (!transformOrigin)
+        return undefined;
+    return `${typeof transformOrigin.vertical === 'number'
+        ? transformOrigin.vertical + 'px'
+        : transformOrigin.vertical} ${typeof transformOrigin.horizontal === 'number'
+        ? transformOrigin.horizontal + 'px'
+        : transformOrigin.horizontal}`;
+};
+const alignmentToHorizontalTransformOrigin = {
+    start: 'left',
+    end: 'right',
+};
+const alignmentToVerticalTransformOrigin = {
+    start: 'top',
+    end: 'bottom',
+};
+const getTransformOriginStringForPlacement = (params) => {
+    const { placement } = params;
+    const [base, alignment] = placement.split('-');
+    if (base === 'top' || base === 'bottom') {
+        return transformOriginToString({
+            vertical: base === 'top' ? 'bottom' : 'top',
+            horizontal: !alignment
+                ? 'center'
+                : alignmentToHorizontalTransformOrigin[alignment],
+        });
+    }
+    else if (base === 'left' || base === 'right') {
+        return transformOriginToString({
+            vertical: !alignment
+                ? 'center'
+                : alignmentToVerticalTransformOrigin[alignment],
+            horizontal: base === 'left' ? 'right' : 'left',
+        });
+    }
+    return undefined;
+};
+
+export { getTransformOriginStringForPlacement as a, getGrow as g };

package/chunks/getSlideIn.js

@@ -0,0 +1,30 @@
+import { motionTransition } from '@ringcentral/spring-theme';
+
+const horizontal = ['right', 'left'];
+const plus = ['right', 'bottom'];
+const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, } = {}) => {
+    const axis = horizontal.includes(from) ? 'x' : 'y';
+    const invisibleValue = plus.includes(from) ? '100%' : '-100%';
+    return {
+        initial: 'invisible',
+        animate: toggle ? 'visible' : 'invisible',
+        exit: 'invisible',
+        variants: {
+            visible: {
+                [axis]: 0,
+                ...(!prefersReducedMotion &&
+                    toggleOnTransition && { transition: toggleOnTransition }),
+            },
+            invisible: {
+                [axis]: invisibleValue,
+                ...(!prefersReducedMotion &&
+                    toggleOffTransition && { transition: toggleOffTransition }),
+            },
+        },
+        transition: prefersReducedMotion
+            ? motionTransition.instant
+            : motionTransition['spring-01-fast'],
+    };
+};
+
+export { getSlideIn as g };

package/chunks/useFocusTrapStack.js

@@ -0,0 +1,44 @@
+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();
+    useEffect(() => {
+        if (open) {
+            const stack = getFocusTrapStack(globalThis);
+            stack.push(id);
+        }
+        return () => {
+            const stack = getFocusTrapStack(globalThis);
+            const index = stack.indexOf(id);
+            if (index >= 0) {
+                stack.splice(index, 1);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const isEnabled = useEventCallback(() => {
+        const stack = getFocusTrapStack(globalThis);
+        return stack.at(-1) === id;
+    });
+    return {
+        isEnabled,
+    };
+};
+
+export { useFocusTrapStack as u };

package/chunks/useHelperTextId.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const FormField = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'FormField' });
+    const { classes, className, children, htmlFor, label, labelProps, helperText, required, disabled, error, variant = 'standard', size = 'xlarge', contentRef, contentProps, focused, FormHelperTextProps, ...rest } = props;
+    const cls = useClasses('form-field', classes, className);
+    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [label && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), helperText && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
+});
+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`;
+};
+
+export { FormField as F, useHelperTextId as u };

package/chunks/useListNavigation.js

@@ -0,0 +1,211 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEventCallback } from '@ringcentral/spring-base';
+import { createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
+
+const ListNavigationContext = createContext(null);
+const useListNavigationContext = () => useContext(ListNavigationContext);
+
+const useListNavigation = (props) => {
+    const { preventContainerScroll = true, searchAndFocusItemHandler: searchAndFocusItemHandlerProp = defaultSearchAndFocusItem, actions, } = props;
+    const currentFocusedItemRef = useRef(null);
+    const listRef = useRef(null);
+    const sentinelArrowNavRef = useRef(null);
+    const sentinelTabBoundaryRef = useRef(null);
+    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) => {
+            currentFocusedItemRef.current = el;
+        },
+    }), []);
+    const focusFirstItem = useEventCallback(() => {
+        const { focused } = searchAndFocusItemHandler('first');
+        if (!focused) {
+            focusList();
+        }
+    });
+    useImperativeHandle(actions, () => ({
+        focus: focusFirstItem,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const sentinelFocusHandler = (e) => {
+        if (e.target === e.currentTarget) {
+            const skipEnforceFocus = skipEnforceFocusRef.current;
+            if (skipEnforceFocus) {
+                skipEnforceFocusRef.current = false;
+                return;
+            }
+            focusFirstItem();
+        }
+    };
+    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,
+        });
+    };
+    const listKeyDownHandler = (e) => {
+        const focusedItem = currentFocusedItemRef.current;
+        const key = e.key;
+        if (focusedItem) {
+            const searchElementOption = {
+                ArrowDown: {
+                    baseElement: focusedItem,
+                    direction: 'down',
+                },
+                ArrowUp: {
+                    baseElement: focusedItem,
+                    direction: 'up',
+                },
+                Home: 'first',
+                End: 'last',
+            }[key];
+            if (searchElementOption) {
+                const { focused, isAfterBaseElement } = searchAndFocusItemHandler(searchElementOption);
+                if (!focused) {
+                    focusList();
+                }
+                if (!isAfterBaseElement || preventContainerScroll) {
+                    e.preventDefault();
+                }
+            }
+        }
+        else {
+            // cover case about all item are disabled
+            if (e.target === e.currentTarget && key === 'Tab' && !e.shiftKey) {
+                focusTabBoundary();
+            }
+        }
+    };
+    const getListProps = (otherHandler) => {
+        const { onKeyDown, onFocus } = otherHandler;
+        const handleKeyDown = (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented) {
+                return;
+            }
+            listKeyDownHandler(e);
+        };
+        const handleFocus = (e) => {
+            sentinelFocusHandler(e);
+            onFocus?.(e);
+        };
+        return {
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+        };
+    };
+    const renderItems = (items) => {
+        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 { renderItems, renderTabBoundary, getListProps, listRef };
+};
+const isUnfocusable = (el) => el.matches('.sui-disabled, :disabled, hr, [role="separator"], [disabled]');
+const defaultSearchAndFocusItem = (searchElementOption, helperElements) => {
+    const { list, sentinelEnd } = helperElements;
+    const getFirstItem = () => {
+        const firstItem = list.firstElementChild;
+        if (firstItem === sentinelEnd) {
+            throw Error('SPRING [useListNavigation]: must have child element');
+        }
+        return firstItem;
+    };
+    const getLastItem = () => {
+        const lastItem = sentinelEnd.previousElementSibling;
+        if (!lastItem) {
+            throw Error('SPRING [useListNavigation]: must have child element');
+        }
+        return lastItem;
+    };
+    let direction;
+    let startElement;
+    if (typeof searchElementOption === 'string') {
+        if (searchElementOption === 'first') {
+            startElement = getFirstItem();
+            direction = 'down';
+        }
+        else {
+            startElement = getLastItem();
+            direction = 'up';
+        }
+        if (!isUnfocusable(startElement)) {
+            startElement.focus();
+            return { focused: true };
+        }
+    }
+    else {
+        startElement = searchElementOption.baseElement;
+        direction = searchElementOption.direction;
+    }
+    let pointer = startElement;
+    let isAfterBaseElement = true;
+    if (direction === 'up') {
+        do {
+            if (!pointer.previousElementSibling) {
+                pointer = getLastItem();
+                isAfterBaseElement = false;
+            }
+            else {
+                pointer = pointer.previousElementSibling;
+            }
+            if (!isUnfocusable(pointer)) {
+                break;
+            }
+        } while (pointer !== startElement);
+    }
+    else {
+        do {
+            if (pointer.nextElementSibling === sentinelEnd) {
+                pointer = getFirstItem();
+                isAfterBaseElement = false;
+            }
+            else {
+                pointer = pointer.nextElementSibling;
+            }
+            if (!isUnfocusable(pointer)) {
+                break;
+            }
+        } while (pointer !== startElement);
+    }
+    if (isUnfocusable(pointer)) {
+        return { focused: false };
+    }
+    pointer.focus();
+    return typeof searchElementOption === 'string'
+        ? { focused: true }
+        : { focused: true, isAfterBaseElement };
+};
+
+export { ListNavigationContext as L, useListNavigation as a, useListNavigationContext as u };