@ringcentral/spring-ui 1.11.2 → 1.13.0

package/chunks/MenuList.js

@@ -1,46 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useLayoutEffect } from 'react';
-import { useClasses, useForkRef, useWindowContext } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { L as List } from './List.js';
-import { u as useMenuContext } from './Menu.js';
-import { c as useMenuItemSelect, e as MenuListContext, a as MenuItemSelectContext } from './useMenuItemSelect.js';
-import 'tabbable';
-import './useListNavigation.js';
-import '../VirtualizedList.js';
-
-const MenuList = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'MenuList' });
-    const { classes, className, children, widget, selectMode = 'single', nowrap, value: valueProp, onChange, autoFocus: autoFocusProp, ...rest } = props;
-    const menuContext = useMenuContext();
-    const autoFocus = Boolean(autoFocusProp || menuContext?.autoFocus);
-    const cls = useClasses('menu-list', classes, className);
-    const menuListContextValue = useMemo(() => ({
-        nowrap,
-    }), [nowrap]);
-    const { contextValue } = useMenuItemSelect({
-        widget,
-        selectMode,
-        value: valueProp,
-        onChange,
-        autoFocus,
-    });
-    const actions = useRef(null);
-    const listRef = useRef(null);
-    const handleListRef = useForkRef(listRef, ref);
-    const { document } = useWindowContext();
-    useLayoutEffect(() => {
-        if (autoFocus &&
-            !listRef.current?.contains(document?.activeElement ?? null)) {
-            actions.current?.focus();
-        }
-    }, [autoFocus]);
-    const listRole = widget === 'select' ? 'listbox' : 'menu';
-    const listboxProps = widget === 'select'
-        ? { 'aria-multiselectable': selectMode === 'multiple' }
-        : {};
-    return (jsx(List, { className: cls('root'), role: listRole, ...listboxProps, ...rest, ref: handleListRef, actions: actions, children: jsx(MenuListContext.Provider, { value: menuListContextValue, children: jsx(MenuItemSelectContext.Provider, { value: contextValue, children: children }) }) }));
-});
-MenuList.displayName = 'SuiMenuList';
-
-export { MenuList as M };

package/chunks/Modal.js

@@ -1,212 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useCallback, useLayoutEffect, forwardRef, useState, useEffect } from 'react';
-import { useAriaHideOutside, useForkRef, useClasses, useEventCallback, useBodyScrollLock, useWindowContext } from '@ringcentral/spring-base';
-import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
-import { FocusTrap, Portal } from '@mui/base';
-import { motion } from 'framer-motion';
-import './Icon.js';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import { g as getFade } from './getFade.js';
-import { u as useFocusTrapStack } from './useFocusTrapStack.js';
-import { B as Backdrop } from './Backdrop.js';
-
-const ModalContext = createContext(null);
-const useModalContext = () => useContext(ModalContext);
-
-const createOverlayBranchRegistry = () => {
-    const branchRefCounts = new Map();
-    const listeners = new Set();
-    const notify = (node, isRegistered) => {
-        for (const listener of [...listeners]) {
-            listener(node, isRegistered);
-        }
-    };
-    return {
-        getBranches: () => new Set(branchRefCounts.keys()),
-        register: (node) => {
-            const currentCount = branchRefCounts.get(node) ?? 0;
-            branchRefCounts.set(node, currentCount + 1);
-            if (currentCount === 0) {
-                notify(node, true);
-            }
-            let isCleanedUp = false;
-            return () => {
-                if (isCleanedUp) {
-                    return;
-                }
-                isCleanedUp = true;
-                const currentCount = branchRefCounts.get(node);
-                if (!currentCount) {
-                    return;
-                }
-                if (currentCount > 1) {
-                    branchRefCounts.set(node, currentCount - 1);
-                    return;
-                }
-                branchRefCounts.delete(node);
-                notify(node, false);
-            };
-        },
-        subscribe: (listener) => {
-            listeners.add(listener);
-            return () => {
-                listeners.delete(listener);
-            };
-        },
-    };
-};
-const useOverlayBranchRegistry = () => {
-    const registryRef = useRef();
-    if (!registryRef.current) {
-        registryRef.current = createOverlayBranchRegistry();
-    }
-    return registryRef.current;
-};
-
-const useOverlayBranch = ({ active, registry, }) => {
-    const nodeRef = useRef(null);
-    const registrationRef = useRef(null);
-    const syncRegistration = useCallback((node) => {
-        const registration = registrationRef.current;
-        const shouldKeepRegistration = registration &&
-            active &&
-            registration.node === node &&
-            registration.registry === registry;
-        if (shouldKeepRegistration) {
-            return;
-        }
-        registration?.unregister();
-        registrationRef.current = null;
-        if (active && node && registry) {
-            registrationRef.current = {
-                node,
-                registry,
-                unregister: registry.register(node),
-            };
-        }
-    }, [active, registry]);
-    const setBranchRef = useCallback((node) => {
-        nodeRef.current = node;
-        syncRegistration(node);
-    }, [syncRegistration]);
-    useLayoutEffect(() => {
-        syncRegistration(nodeRef.current);
-    }, [syncRegistration]);
-    useLayoutEffect(() => () => {
-        registrationRef.current?.unregister();
-        registrationRef.current = null;
-    }, []);
-    return setBranchRef;
-};
-const useOverlayBranchConsumer = (registry, listener) => {
-    useLayoutEffect(() => {
-        const unsubscribe = registry.subscribe(listener);
-        for (const node of registry.getBranches()) {
-            listener(node, true);
-        }
-        return () => {
-            unsubscribe();
-            for (const node of registry.getBranches()) {
-                listener(node, false);
-            }
-        };
-    }, [listener, registry]);
-};
-
-const InnerModal = forwardRef((props, ref) => {
-    const { hideBackdrop: hideBackdropProp, children, motionProps, disableBackdropClick: disableBackdropClickProp, onBackdropClick, disableEscapeKeyDown: disableEscapeKeyDownProp, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, shouldUseInert: shouldUseInertProp, ...rest } = props;
-    const parentModalContext = useModalContext();
-    const ownOverlayBranchRegistry = useOverlayBranchRegistry();
-    const shouldUseInert = shouldUseInertProp ?? parentModalContext?.shouldUseInert ?? false;
-    const hideBackdrop = hideBackdropProp ?? !blocking;
-    const disableBackdropClick = disableBackdropClickProp ?? !blocking;
-    const disableEscapeKeyDown = disableEscapeKeyDownProp ?? !blocking;
-    const { ariaHideOutsideRef, ariaHideEnabled, setAriaHideOutsideTarget } = useAriaHideOutside({
-        enable: blocking && open,
-        shouldUseInert,
-    });
-    useOverlayBranchConsumer(ownOverlayBranchRegistry, setAriaHideOutsideTarget);
-    const parentOverlayBranchRegistry = parentModalContext?.overlayBranchRegistry;
-    const overlayBranchRegistry = ariaHideEnabled
-        ? ownOverlayBranchRegistry
-        : parentOverlayBranchRegistry;
-    const isOverlayBranch = !blocking && open && parentOverlayBranchRegistry != null;
-    const ariaHideEnabledForChildren = ariaHideEnabled || parentModalContext?.ariaHideEnabled === true;
-    const overlayBranchRef = useOverlayBranch({
-        active: isOverlayBranch,
-        registry: parentOverlayBranchRegistry,
-    });
-    const handleRef = useForkRef(ref, ariaHideOutsideRef, overlayBranchRef);
-    const cls = useClasses('modal', classes, className);
-    const { onClick: externalOnClick, ...restBackdropProps } = backdropProps || {};
-    const handleBackdropClick = useEventCallback((event) => {
-        if (disableBackdropClick)
-            return;
-        if (event.target !== event.currentTarget) {
-            return;
-        }
-        externalOnClick?.(event);
-        onBackdropClick?.(event);
-        onClose?.(event, 'backdropClick');
-    });
-    return (jsx(ModalContext.Provider, { value: {
-            ariaHideEnabled: ariaHideEnabledForChildren,
-            overlayBranchRegistry,
-            shouldUseInert,
-        }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root', { 'non-blocking': !blocking }), onKeyDown: (e) => {
-                onKeyDown?.(e);
-                if (!disableEscapeKeyDown &&
-                    e.key === 'Escape' &&
-                    (isEnabled?.() ?? true)) {
-                    onEscapeKeyDown?.(e);
-                    onClose?.(e, 'escapeKeyDown');
-                }
-            }, ref: handleRef, children: [jsx(Backdrop, { ...restBackdropProps, isTransparent: hideBackdrop, onClick: handleBackdropClick }), jsx(FocusTrap, { open: open, isEnabled: isEnabled, disableAutoFocus: disableAutoFocus || !blocking, disableEnforceFocus: disableEnforceFocus || !blocking, disableRestoreFocus: disableRestoreFocus || !blocking, children: children })] }) }));
-});
-InnerModal.displayName = 'SuiInnerModal';
-
-const Modal = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Modal' });
-    const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock: disableScrollLockProp, blocking = true, shouldUseInert: themeFallbackShouldUseInert, ...rest } = props;
-    const parentModalContext = useModalContext();
-    const shouldUseInert = inProps.shouldUseInert ??
-        parentModalContext?.shouldUseInert ??
-        themeFallbackShouldUseInert ??
-        false;
-    const disableScrollLock = disableScrollLockProp ?? !blocking;
-    const [shouldRender, setShouldRender] = useState(open);
-    const [modalElement, setModalElement] = useState(null);
-    const handleRef = useForkRef(setModalElement, ref);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const { isEnabled } = useFocusTrapStack({ open });
-    useBodyScrollLock(open, modalElement, {
-        disabled: disableScrollLock,
-    });
-    useEffect(() => {
-        if (open) {
-            setShouldRender(true);
-        }
-        else {
-            if (disableBackdropAnimation) {
-                setShouldRender(false);
-            }
-        }
-    }, [open, disableBackdropAnimation]);
-    const { document } = useWindowContext();
-    const container = containerProp ?? document?.body;
-    const { scopeProps } = useTheme();
-    const onAnimationComplete = (e) => {
-        motionProps?.onAnimationComplete?.(e);
-        if (!open) {
-            onExitComplete?.();
-            setShouldRender(false);
-        }
-    };
-    return shouldRender ? (jsx(Portal, { disablePortal: disablePortal, container: container, children: jsx("div", { ...scopeProps, children: jsx(InnerModal, { ...rest, ref: handleRef, open: open, blocking: blocking, shouldUseInert: shouldUseInert, isEnabled: isEnabled, motionProps: {
-                    ...(motionProps ?? getFade({ prefersReducedMotion, toggle: open })),
-                    onAnimationComplete,
-                }, children: children }) }) })) : null;
-});
-Modal.displayName = 'SuiModal';
-
-export { InnerModal as I, Modal as M, ModalContext as a, useModalContext as u };

package/chunks/Overlap.js

@@ -1,25 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-function isKeyPosition(position) {
-    return typeof position === 'string';
-}
-const Overlap = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Overlap' });
-    const { classes, floater, position, children, className, showFloaterOnHoverOnly = false, component: OverlapRoot = 'div', ...rest } = props;
-    const cls = useClasses('overlap', classes, className);
-    let widget = null;
-    if (floater) {
-        const style = !isKeyPosition(position) ? position : undefined;
-        const classes = cls('floater', isKeyPosition(position) && position);
-        widget = jsx("div", { style: style, className: classes, children: floater });
-    }
-    return (jsxs(OverlapRoot, { ...rest, ref: ref, className: cls('root', {
-            'show-floater-on-hover-only': showFloaterOnHoverOnly,
-        }), children: [children, widget] }));
-});
-Overlap.displayName = 'SuiOverlap';
-
-export { Overlap as O };

package/chunks/PickerTextField.js

@@ -1,85 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useImperativeHandle, useMemo } from 'react';
-import { useId, useClasses, useForkRef, useA11yKeyEvent, useEventCallback, combineClasses } from '@ringcentral/spring-base';
-import { I as Icon } from './Icon.js';
-import { P as Popover } from './Popover.js';
-import { u as useHelperTextId } from './useHelperTextId.js';
-import { T as TextField } from './TextField.js';
-import { V as VisuallyHidden } from './VisuallyHidden.js';
-
-const PICKER_DISPLAY_NAME = 'SuiPickerTextField';
-const PickerTextField = forwardRef((props, ref) => {
-    const { disabled, value, defaultValue, onClear, action, inputProps = {}, announcementText, PopoverProps, children, endIconSymbol, clearText, clearBtn, ClearButtonProps, onKeyDown, onClick, onClose, classes, textInputClasses, className, id: idProp, ...rest } = props;
-    const generatedId = useId(PICKER_DISPLAY_NAME, true);
-    const idForInput = idProp ?? inputProps.id ?? generatedId;
-    const [open, setOpen] = useState(false);
-    const [isPopoverExited, setIsPopoverExited] = useState(!open);
-    const cls = useClasses('picker-text-field', classes, className);
-    const anchorRef = useRef(null);
-    const handleRef = useForkRef(ref, anchorRef);
-    const idForHelperText = useHelperTextId({
-        helperText: rest.helperText,
-        id: idForInput,
-        FormHelperTextProps: rest.FormHelperTextProps,
-    });
-    const idForInstruction = announcementText
-        ? `${idForInput}-instruction`
-        : undefined;
-    const ariaDescribedBy = Array.from(new Set([inputProps['aria-describedby'], idForHelperText, idForInstruction]
-        .filter(Boolean)
-        .flatMap((value) => `${value}`.split(/\s+/).filter(Boolean)))).join(' ');
-    const handleA11yKeydown = useA11yKeyEvent(() => {
-        handleOpen(true);
-    });
-    const handleOpen = useEventCallback((open) => {
-        if (disabled && open) {
-            return;
-        }
-        if (open) {
-            setIsPopoverExited(false);
-        }
-        setOpen(open);
-    });
-    useImperativeHandle(action, () => ({
-        close: () => {
-            handleOpen(false);
-        },
-    }), [handleOpen]);
-    const toClasses = useMemo(() => combineClasses(textInputClasses, {
-        formFieldContent: cls('form-field-content', {
-            'has-value': Boolean(value),
-        }),
-        root: cls('root', {
-            'has-value': Boolean(value),
-        }),
-        input: cls('input'),
-    }), [cls, textInputClasses, value]);
-    return (jsxs(Fragment, { children: [jsx(TextField, { classes: toClasses, value: value, defaultValue: defaultValue, endAdornment: endIconSymbol && (jsx(Icon, { className: cls('end-icon'), symbol: endIconSymbol })), id: idForInput, ref: handleRef, focused: open || (!open && !isPopoverExited), disabled: disabled, clearBtn: clearBtn, clearText: clearText, ClearButtonProps: ClearButtonProps, onClick: (e) => {
-                    handleOpen(true);
-                    onClick?.(e);
-                }, onKeyDown: (e) => {
-                    if (disabled)
-                        return;
-                    handleA11yKeydown(e);
-                    onKeyDown?.(e);
-                }, inputProps: {
-                    'aria-haspopup': true,
-                    ...inputProps,
-                    'aria-describedby': ariaDescribedBy || undefined,
-                }, ...rest, readOnly: true, onClear: (e) => {
-                    onClear?.(e);
-                    e.stopPropagation();
-                } }), jsx(Popover, { bordered: true, open: open, anchorEl: anchorRef.current, onClose: (...args) => {
-                    handleOpen(false);
-                    onClose?.(...args);
-                }, placement: "bottom-start", transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                }, ...PopoverProps, onExitComplete: () => {
-                    PopoverProps?.onExitComplete?.();
-                    setIsPopoverExited(true);
-                }, children: children }), idForInstruction && (jsx(VisuallyHidden, { id: idForInstruction, children: announcementText }))] }));
-});
-PickerTextField.displayName = PICKER_DISPLAY_NAME;
-
-export { PickerTextField as P };

package/chunks/Popover.js

@@ -1,53 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { size } from '@floating-ui/react-dom';
-import { useClasses, useForkRef, combineProps } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import 'framer-motion';
-import './Icon.js';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import { g as getGrow, a as getTransformOriginStringForPlacement } from './getGrow.js';
-import { M as Modal } from './Modal.js';
-import { Popper } from '../Popper.js';
-import { P as PopperPaper } from './PopperPaper.js';
-
-const Popover = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Popover' });
-    const { classes, className, children, PopperProps, variant = 'standard', bordered = false, shadow = true, transformOrigin, motionProps: motionPropsProp, popperRef, placement, anchorEl, actions, onAvailableHeightChange, PopperPaperProps: popperPaperPropsProp, ...rest } = props;
-    const cls = useClasses('popover', classes, className);
-    const paperContentRef = useRef(null);
-    const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(Modal, { ...rest, className: cls('root', 'popper'), ref: ref, motionProps: null, hideBackdrop: true, children: jsx(Popper, { arrowHeight: variant === 'standard' ? 0 : 10, arrowPadding: 12, offset: variant === 'standard' ? 2 : 4, ...combineProps({
-                middlewares: [
-                    size({
-                        padding: PopperProps?.padding,
-                        apply({ availableHeight, availableWidth, }) {
-                            onAvailableHeightChange?.(availableHeight);
-                            if (paperContentRef.current) {
-                                paperContentRef.current.style.maxHeight = `${availableHeight}px`;
-                                paperContentRef.current.style.maxWidth = `${availableWidth}px`;
-                            }
-                        },
-                    }),
-                ],
-            }, PopperProps), className: cls('popper'), disablePortal: true, tabIndex: -1, ref: popperRef, placement: placement, anchorEl: anchorEl, actions: actions, children: ({ arrowStyle, arrowRef, placement: computedPlacement }) => {
-                const motionProps = motionPropsProp ??
-                    getGrow({ transformOrigin, prefersReducedMotion });
-                const popperPaperProps = {
-                    className: cls('paper', { bordered, shadow }),
-                };
-                if (!transformOrigin) {
-                    popperPaperProps.style = {
-                        ...popperPaperProps.style,
-                        transformOrigin: getTransformOriginStringForPlacement({
-                            placement: computedPlacement,
-                        }),
-                    };
-                }
-                return (jsx(PopperPaper, { contentRef: handlePaperContentRef, arrowRef: arrowRef, arrowStyle: arrowStyle, ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp), children: children }));
-            } }) }));
-});
-Popover.displayName = 'SuiPopover';
-
-export { Popover as P };

package/chunks/PopperPaper.js

@@ -1,15 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { motion } from 'framer-motion';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-const PopperPaper = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'PopperPaper' });
-    const { classes, className, children, arrowRef, arrowStyle, contentRef, ...rest } = props;
-    const cls = useClasses('popper-paper', classes, className);
-    return (jsxs(motion.div, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { ref: contentRef, className: cls('content'), children: children }), jsx("div", { className: cls('arrow'), ref: arrowRef, style: arrowStyle })] }));
-});
-PopperPaper.displayName = 'SuiPopperPaper';
-
-export { PopperPaper as P };

package/chunks/Select.js

@@ -1,220 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
-import { combineProps, useControlled, useClasses, useId, useEventCallback, combineClasses, getTitle } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { E as ExpandCollapseCaret } from './ExpandCollapseCaret.js';
-import 'framer-motion';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import { g as getGrow } from './getGrow.js';
-import './Icon.js';
-import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
-import { M as Menu, a as MenuContext } from './Menu.js';
-import { c as useMenuItemSelect, a as MenuItemSelectContext } from './useMenuItemSelect.js';
-import 'tabbable';
-import './useListNavigation.js';
-import '../VirtualizedList.js';
-import { M as MenuList } from './MenuList.js';
-import { S as Squircle } from './Squircle.js';
-import { a as VirtualizedMenu } from './VirtualizedMenu.js';
-
-const useSelect = (props) => {
-    const { open, handleOpen } = props;
-    const getButtonProps = (otherHandlers = {}) => {
-        const eventHandlers = combineProps({
-            onClick: () => {
-                handleOpen(!open);
-            },
-            onKeyDown: (e) => {
-                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    handleOpen(true);
-                }
-            },
-        }, otherHandlers);
-        return {
-            'aria-expanded': open,
-            'aria-haspopup': 'listbox',
-            ...eventHandlers,
-        };
-    };
-    const getListboxProps = () => ({
-        role: 'listbox',
-    });
-    return {
-        getButtonProps,
-        getListboxProps,
-    };
-};
-
-const DEFAULT_PLACEMENT = 'bottom';
-const Select = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Select' });
-    const { classes, className, children, name, id: idProp, value: valueProp, selectMode = 'single', defaultValue = selectMode === 'multiple' ? [] : null, onChange: onChangeProp, renderValue = (value) => Array.isArray(value) ? value.join(', ') : String(value), label, helperText, disabled, required, error, displayEmpty, placeholder, open: openProp, defaultOpen, onOpen, onClose, selectorProps: selectorPropsProp, MenuProps, variant = 'standard', inputProps, size = 'xlarge', virtualize = false, VirtualizedMenuProps: virtualizedMenuPropsProp, data, getSelectedIndex, FormHelperTextProps, ...rest } = props;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [open, setOpen] = useControlled({
-        controlled: openProp,
-        default: defaultOpen,
-        name: 'SuiSelect',
-        state: 'open',
-    });
-    const [didMenuExit, setDidMenuExit] = useState(!open);
-    const inputRef = useRef(null);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const cls = useClasses('select', classes, className);
-    const id = useId(idProp);
-    const helperTextId = useHelperTextId({
-        helperText,
-        id,
-        FormHelperTextProps,
-    });
-    const formFieldContentRef = useRef(null);
-    useEffect(() => {
-        setAnchorEl(formFieldContentRef.current);
-    }, []);
-    const handleOpen = useEventCallback((newOpen) => {
-        if (disabled && newOpen)
-            return;
-        if (newOpen)
-            setDidMenuExit(false);
-        setOpen(newOpen);
-        if (newOpen) {
-            onOpen?.();
-        }
-        else {
-            onClose?.();
-        }
-    });
-    useEffect(() => {
-        if (disabled) {
-            handleOpen(false);
-        }
-    }, [disabled, handleOpen]);
-    const [value, setValue] = useControlled({
-        controlled: valueProp,
-        default: defaultValue,
-        name: 'SuiSelect',
-        state: 'value',
-    });
-    const handleInputChange = useEventCallback((e) => {
-        onChangeProp?.(e, inputRef.current);
-    });
-    const handleClose = useEventCallback(() => {
-        handleOpen(false);
-    });
-    const handleInitialFocus = useEventCallback(() => {
-        if (data && value !== null) {
-            if (getSelectedIndex)
-                return getSelectedIndex(value);
-            if (Array.isArray(value)) {
-                const lastSelectedItem = value.at(-1);
-                return lastSelectedItem ? data.indexOf(lastSelectedItem) : -1;
-            }
-            return data.findIndex((v) => v === value);
-        }
-        return true;
-    });
-    const handleMenuListChange = useEventCallback((newValue) => {
-        setValue(newValue);
-        if (inputRef.current) {
-            Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set?.call(inputRef.current, newValue);
-            const event = new Event('input', { bubbles: true });
-            Object.defineProperty(event, 'target', {
-                configurable: true,
-                get: () => {
-                    return new Proxy(inputRef.current, {
-                        get(obj, prop) {
-                            if (prop === 'value') {
-                                return newValue;
-                            }
-                            return obj[prop];
-                        },
-                    });
-                },
-            });
-            inputRef.current?.dispatchEvent(event);
-        }
-    });
-    const { getButtonProps, getListboxProps } = useSelect({
-        open,
-        handleOpen,
-    });
-    const { contextValue: virtualizedContextValue } = useMenuItemSelect({
-        value,
-        onChange: handleMenuListChange,
-        onClose: handleClose,
-        selectMode,
-    });
-    const virtualizedMenuContextValue = useMemo(() => ({
-        close: handleClose,
-        autoFocus: true,
-    }), [handleClose]);
-    const selectorProps = getButtonProps(selectorPropsProp);
-    const selectedValue = value !== null || displayEmpty ? renderValue(value) : null;
-    const valueId = `${id}-value`;
-    const labelId = `${id}-label`;
-    let menu = null;
-    const baseMenuProps = {
-        onExitComplete: () => {
-            setDidMenuExit(true);
-        },
-        placement: DEFAULT_PLACEMENT,
-        open,
-        anchorEl,
-        PopperProps: {
-            offset: 4,
-            matchAnchorWidth: true,
-        },
-        classes: {
-            paper: cls('menu'),
-        },
-        onClose: handleClose,
-    };
-    const popperProps = combineProps(baseMenuProps.PopperProps, !virtualize
-        ? MenuProps?.PopperProps
-        : virtualizedMenuPropsProp?.PopperProps);
-    if (popperProps.matchAnchorWidth) {
-        baseMenuProps.classes = combineClasses(baseMenuProps.classes, {
-            paper: 'min-w-0',
-        });
-    }
-    if (!virtualize) {
-        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, PopperProps: popperProps, classes: combineClasses(baseMenuProps.classes, MenuProps?.classes), motionProps: getYAxisGrowMotion({
-                placement: MenuProps?.placement,
-                prefersReducedMotion: prefersReducedMotion,
-            }), children: jsx(MenuList, { value: value, onChange: handleMenuListChange, nowrap: false, widget: "select", selectMode: selectMode, ...getListboxProps(), children: children }) }));
-    }
-    else {
-        menu = (jsx(MenuContext.Provider, { value: virtualizedMenuContextValue, children: jsx(MenuItemSelectContext.Provider, { value: virtualizedContextValue, children: jsx(VirtualizedMenu, { ...baseMenuProps, ...virtualizedMenuPropsProp, PopperProps: popperProps, classes: combineClasses(baseMenuProps.classes, virtualizedMenuPropsProp?.classes), initialFocus: handleInitialFocus, data: data, motionProps: getYAxisGrowMotion({
-                        placement: virtualizedMenuPropsProp?.placement,
-                        prefersReducedMotion: prefersReducedMotion,
-                    }), children: children }) }) }));
-    }
-    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'),
-                    standard: cls('standard'),
-                    contained: cls('contained'),
-                    content: cls('content'),
-                }, size: size, ...rest, children: [jsxs("button", { className: cls('selector', `${variant}-selector`, `${variant}-selector-${size}`, {
-                            expanded: open,
-                        }), type: 'button', disabled: disabled, "aria-labelledby": label ? `${labelId} ${valueId}` : valueId, "aria-describedby": helperTextId, ...selectorProps, id: id, children: [selectedValue ? (jsx("span", { id: valueId, "aria-live": "polite", className: cls('value'), title: getTitle(selectedValue), children: selectedValue })) : (jsx("span", { id: valueId, className: cls('placeholder'), title: getTitle(placeholder), children: placeholder })), jsx(Squircle, { className: cls('chevron'), interactive: false, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] }), jsx("input", { ref: inputRef, name: name, value: `${value}`, disabled: disabled, className: cls('native-input'), tabIndex: -1, "aria-hidden": true, "aria-invalid": error, onChange: handleInputChange, ...inputProps })] }), anchorEl && menu] }));
-});
-Select.displayName = 'SuiSelect';
-function getYAxisGrowMotion(params) {
-    const { placement = DEFAULT_PLACEMENT, ...rest } = params;
-    let verticalTransformOrigin = 'top';
-    if (placement === 'top') {
-        verticalTransformOrigin = 'bottom';
-    }
-    return getGrow({
-        ...rest,
-        direction: 'y',
-        transformOrigin: {
-            vertical: verticalTransformOrigin,
-            horizontal: 'center',
-        },
-    });
-}
-
-export { Select as S, useSelect as u };