@ringcentral/spring-ui 1.12.0 → 1.13.0

package/Select.js

@@ -1,44 +1,387 @@
-export { S as Select, u as useSelect } from './chunks/Select.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/ExpandCollapseCaret.js';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getGrow.js';
-import './chunks/hasContent.js';
-import '@mui/utils';
-import './chunks/useHelperTextId.js';
-import 'clsx';
-import './chunks/Menu.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-import './chunks/useMenuItemSelect.js';
-import '@ringcentral/spring-icon';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedMenuItem.js';
-import './VirtualizedList.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-import './chunks/composeEventHandlers.js';
-import './ListNavigation.js';
-import './chunks/MenuList.js';
-import './chunks/Squircle.js';
-import './chunks/VirtualizedMenu.js';
-
-var Select = {"sui-select-chevron":"sui-select-chevron","sui-select-placeholder":"sui-select-placeholder","sui-select-value":"sui-select-value","sui-select-error":"sui-select-error","sui-select-selector":"sui-select-selector","sui-select-menu":"sui-select-menu","sui-select-native-input":"sui-select-native-input","sui-select-content":"sui-select-content","sui-select-outlined-selector-xlarge":"sui-select-outlined-selector-xlarge","sui-select-contained-selector-xlarge":"sui-select-contained-selector-xlarge","sui-select-outlined-selector-large":"sui-select-outlined-selector-large","sui-select-contained-selector-large":"sui-select-contained-selector-large","sui-select-outlined-selector-medium":"sui-select-outlined-selector-medium","sui-select-contained-selector-medium":"sui-select-contained-selector-medium","sui-select-outlined-selector":"sui-select-outlined-selector","sui-select-contained-selector":"sui-select-contained-selector","sui-expanded":"sui-expanded","sui-select-standard-selector":"sui-select-standard-selector","sui-select-root":"sui-select-root","sui-disabled":"sui-disabled"};
-
-export { Select as selectStyle };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { combineClasses, combineProps, getTitle, useClasses, useControlled, useEventCallback, useId } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { getGrow } from "./chunks/4476.js";
+import { useHelperTextId, FormField as FormField_FormField } from "./FormField.js";
+import { Menu as Menu_Menu, MenuContext } from "./Menu.js";
+import { MenuItemSelectContext, useMenuItemSelect } from "./MenuItem.js";
+import { MenuList as MenuList_MenuList } from "./MenuList.js";
+import "./Squircle.js";
+import { VirtualizedMenu as VirtualizedMenu_VirtualizedMenu } from "./VirtualizedMenu.js";
+import { hasContent } from "./chunks/5047.js";
+import { usePrefersReducedMotion, ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Select = ({"sui-select-chevron":"sui-select-chevron","sui-select-placeholder":"sui-select-placeholder","sui-select-value":"sui-select-value","sui-select-error":"sui-select-error","sui-select-selector":"sui-select-selector","sui-select-menu":"sui-select-menu","sui-select-native-input":"sui-select-native-input","sui-select-content":"sui-select-content","sui-select-outlined-selector-xlarge":"sui-select-outlined-selector-xlarge","sui-select-contained-selector-xlarge":"sui-select-contained-selector-xlarge","sui-select-outlined-selector-large":"sui-select-outlined-selector-large","sui-select-contained-selector-large":"sui-select-contained-selector-large","sui-select-outlined-selector-medium":"sui-select-outlined-selector-medium","sui-select-contained-selector-medium":"sui-select-contained-selector-medium","sui-select-outlined-selector":"sui-select-outlined-selector","sui-select-contained-selector":"sui-select-contained-selector","sui-expanded":"sui-expanded","sui-select-standard-selector":"sui-select-standard-selector","sui-select-root":"sui-select-root","sui-disabled":"sui-disabled"});
+
+
+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') {
+                    // prevent scroll
+                    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_Select = /*#__PURE__*/ 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(()=>{
+        // close menu when disabled
+        if (disabled) {
+            handleOpen(false);
+        }
+    }, [
+        disabled,
+        handleOpen
+    ]);
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiSelect',
+        state: 'value'
+    });
+    const handleInputChange = useEventCallback((e)=>{
+        // TODO(next-major): Remove the legacy second onChange argument.
+        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)) {
+                // For multiple selection, focus on the last selected item
+                const lastSelectedItem = value.at(-1);
+                return lastSelectedItem ? data.indexOf(lastSelectedItem) : -1;
+            }
+            return data.findIndex((v)=>v === value);
+        }
+        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 obj[prop];
+                        }
+                    });
+                }
+            });
+            inputRef.current?.dispatchEvent(event);
+        }
+    });
+    const { getButtonProps, getListboxProps } = useSelect({
+        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,
+        onClose: handleClose,
+        selectMode
+    });
+    const virtualizedMenuContextValue = useMemo(()=>({
+            close: handleClose,
+            autoFocus: true
+        }), [
+        handleClose
+    ]);
+    const selectorProps = getButtonProps(combineProps({
+        onMouseDown: (event)=>{
+            if (disabled || event.button !== 0) return;
+            event.preventDefault();
+            event.currentTarget.focus();
+        }
+    }, selectorPropsProp));
+    const selectedValue = value !== null || displayEmpty ? renderValue(value) : null;
+    const valueId = `${id}-value`;
+    const labelId = `${id}-label`;
+    let menu = null;
+    const baseMenuClasses = {
+        paper: cls('menu')
+    };
+    const basePopperProps = {
+        matchAnchorWidth: true
+    };
+    const popperProps = combineProps(basePopperProps, !virtualize ? MenuProps?.PopperProps : virtualizedMenuPropsProp?.PopperProps);
+    const menuClasses = popperProps.matchAnchorWidth ? combineClasses(baseMenuClasses, {
+        paper: 'min-w-0'
+    }) : baseMenuClasses;
+    const onExitComplete = ()=>{
+        setDidMenuExit(true);
+    };
+    const baseMenuProps = {
+        onExitComplete,
+        placement: DEFAULT_PLACEMENT,
+        open,
+        anchorEl,
+        PopperProps: basePopperProps,
+        classes: menuClasses,
+        onClose: handleClose
+    };
+    if (!virtualize) {
+        menu = /*#__PURE__*/ jsx(Menu_Menu, {
+            ...baseMenuProps,
+            ...MenuProps,
+            PopperProps: popperProps,
+            classes: combineClasses(menuClasses, MenuProps?.classes),
+            motionProps: getYAxisGrowMotion({
+                placement: MenuProps?.placement,
+                prefersReducedMotion: prefersReducedMotion
+            }),
+            children: /*#__PURE__*/ jsx(MenuList_MenuList, {
+                value: value,
+                onChange: handleMenuListChange,
+                widget: "select",
+                selectMode: selectMode,
+                ...getListboxProps(),
+                children: children
+            })
+        });
+    } else {
+        menu = /*#__PURE__*/ jsx(MenuContext.Provider, {
+            value: virtualizedMenuContextValue,
+            children: /*#__PURE__*/ jsx(MenuItemSelectContext.Provider, {
+                value: virtualizedContextValue,
+                children: /*#__PURE__*/ jsx(VirtualizedMenu_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 /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(FormField_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: {
+                    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: [
+                    /*#__PURE__*/ jsxs("button", {
+                        className: cls('selector', `${variant}-selector`, `${variant}-selector-${size}`, {
+                            expanded: open
+                        }),
+                        disabled: disabled,
+                        "aria-labelledby": label ? `${labelId} ${valueId}` : valueId,
+                        "aria-describedby": helperTextId,
+                        ...selectorProps,
+                        id: id,
+                        type: "button",
+                        children: [
+                            hasContent(selectedValue) ? /*#__PURE__*/ jsx("span", {
+                                id: valueId,
+                                "aria-live": "polite",
+                                className: cls('value'),
+                                title: getTitle(selectedValue),
+                                children: selectedValue
+                            }) : /*#__PURE__*/ jsx("span", {
+                                id: valueId,
+                                className: cls('placeholder'),
+                                title: getTitle(placeholder),
+                                children: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(Squircle_Squircle, {
+                                className: cls('chevron'),
+                                interactive: false,
+                                children: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                                    size: 'small',
+                                    expanded: open
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ 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_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 selectStyle, Select_Select as Select, useSelect };