@ringcentral/spring-ui 1.7.0

package/README.md

@@ -0,0 +1,76 @@
+# @ringcentral/spring-ui
+
+Production-ready React component library built with Tailwind CSS.
+
+## Installation
+
+Using yarn:
+
+```bash
+yarn add @ringcentral/spring-ui
+```
+
+Using npm:
+
+```bash
+npm i @ringcentral/spring-ui
+```
+
+Note: @ringcentral/spring-theme and @ringcentral/spring-base are included and re-exported by `@ringcentral/spring-ui`.
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { Button, ThemeProvider, suiLight } from '@ringcentral/spring-ui';
+
+export default function App() {
+  return (
+    <ThemeProvider theme={suiLight}>
+      <Button variant="contained">Hello Spring</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## Prerequisite
+
+Make sure Tailwind CSS is installed and configured with PostCSS in your project.
+
+postcss.config.js:
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+Global CSS (e.g., src/index.css or styles/globals.css):
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+
+## Tailwind Setup
+
+Add the Spring Tailwind plugin in your tailwind.config.js and include Spring UI in content scanning. See the `@ringcentral/spring-theme` README for full options.
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    'node_modules/@ringcentral/spring-ui/**/*.js',
+  ],
+  plugins: [require('@ringcentral/spring-theme/tailwind')],
+};
+```
+
+## License
+
+MIT
+

package/Radio.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useSwitch } from '@mui/base';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useFormLabel } from './chunks/FormLabel.js';
+import { u as useRadioGroup } from './chunks/RadioGroup.context.js';
+
+var Radio$1 = {"sui-radio-root":"sui-radio-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-radio-input":"sui-radio-input","sui-radio-dot":"sui-radio-dot","sui-checked":"sui-checked"};
+
+const Radio = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Radio' });
+    const { name = '', classes, inputRef, rootProps, inputProps, className: rootClass, ...rest } = props;
+    const cls = useClasses('radio', classes, rootClass);
+    const { disabled, id, value } = useFormLabel({
+        value: rest.value,
+        id: inputProps?.id,
+        disabled: rest.disabled,
+    });
+    const { focusVisible, getInputProps, checked } = useSwitch(rest);
+    const { onChange, ...inputRest } = getInputProps({
+        role: undefined,
+        ...inputProps,
+    });
+    const context = useRadioGroup({ name, value, checked, onChange });
+    return (jsxs("div", { ...rootProps, ref: ref, className: cls('root', {
+            disabled,
+            focusVisible,
+            checked: context.checked,
+        }), children: [jsx("span", { className: cls('dot') }), jsx("input", { ...inputRest, ...context, id: id, type: "radio", ref: inputRef, value: value, className: cls('input') })] }));
+});
+Radio.displayName = 'SuiRadio';
+
+export { Radio, Radio$1 as radioStyle };

package/RadioGroup.js

@@ -0,0 +1,29 @@
+import { R as RadioGroupContext, c as callbacksInSeries } from './chunks/RadioGroup.context.js';
+export { u as useRadioGroup } from './chunks/RadioGroup.context.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useControlled, useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var RadioGroup$1 = {"sui-radio-group-root":"sui-radio-group-root","sui-radio-group-row":"sui-radio-group-row"};
+
+const RadioGroup = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'RadioGroup' });
+    const { row, classes, className, children, value: controlled, name, defaultValue, onChange, ...rest } = props;
+    const [value, setValue] = useControlled({
+        name,
+        controlled,
+        default: defaultValue,
+    });
+    const radioGroupContext = useMemo(() => {
+        const handleChange = callbacksInSeries(onChange, (e) => {
+            setValue(e.target.value);
+        });
+        return { name, value, onChange: handleChange };
+    }, [name, value, setValue, onChange]);
+    const cls = useClasses('radio-group', classes, className);
+    return (jsx("div", { ...rest, ref: ref, role: "radiogroup", className: cls('root', { row }), children: jsx(RadioGroupContext.Provider, { value: radioGroupContext, children: children }) }));
+});
+RadioGroup.displayName = 'SuiRadioGroup';
+
+export { RadioGroup, RadioGroupContext, callbacksInSeries, RadioGroup$1 as radioGroupStyle };

package/Rating.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, cloneElement, useState, useRef, useMemo } from 'react';
+import clamp from 'lodash/clamp';
+import { useId, useClasses, useControlled, useIsFocusVisible, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { S as Squircle } from './chunks/Squircle.js';
+import { StarFilledMd, StarMd } from '@ringcentral/spring-icon';
+import { I as Icon } from './chunks/Icon.js';
+
+function getDecimalPrecision(num) {
+    const decimalPart = num.toString().split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToPrecision(value, precision) {
+    if (value === null) {
+        return value;
+    }
+    const nearest = Math.round(value / precision) * precision;
+    return Number(nearest.toFixed(getDecimalPrecision(precision)));
+}
+const defaultIcon = jsx(Icon, { symbol: StarFilledMd, size: "large" });
+const defaultEmptyIcon = jsx(Icon, { symbol: StarMd, size: "large" });
+function defaultLabelText(value) {
+    return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
+}
+
+const RatingItem = forwardRef((inProps, ref) => {
+    const { classes, disabled, emptyIcon = defaultEmptyIcon, getLabelText = defaultLabelText, icon = defaultIcon, IconContainerComponent = 'div', size = 'large', focus, highlightSelectedOnly, hover, isActive, focusVisible, itemValue, name, onBlur, onChange, onClick, onFocus, readOnly, ratingValue, className, ratingValueRounded, style, } = inProps;
+    const isFilled = highlightSelectedOnly
+        ? itemValue === ratingValue
+        : ratingValue && itemValue <= ratingValue;
+    const isFocused = itemValue <= focus;
+    const isChecked = itemValue === ratingValueRounded;
+    const id = useId();
+    const cls = useClasses('rating', classes, className);
+    const renderedIcon = emptyIcon && !isFilled ? emptyIcon : icon;
+    const container = (jsx("div", { className: cls('icon', {
+            'icon-empty': !isFilled,
+            'icon-filled': !!isFilled,
+            'icon-focus': isFocused,
+            'icon-active': isActive,
+        }), children: size
+            ? cloneElement(renderedIcon, {
+                size,
+            })
+            : renderedIcon }));
+    if (readOnly) {
+        return (jsx("span", { style: style, className: cls('read-only'), children: jsx(IconContainerComponent, { className: cls('label-container'), children: container }) }));
+    }
+    return (jsxs(Fragment, { children: [jsxs("label", { ref: ref, htmlFor: id, className: cls('label', {
+                    disabled,
+                    focusVisible,
+                }), style: style, children: [jsxs(IconContainerComponent, { className: cls('label-container'), children: [jsx(Squircle, { classes: {
+                                    content: cls('squircle-content'),
+                                }, interactive: true, focusVisible: isActive && focusVisible, className: cls('squircle', {
+                                    'icon-hover': Math.ceil(hover) === itemValue,
+                                }) }), container] }), jsx("span", { className: cls('visually-hidden'), children: getLabelText(itemValue) })] }), jsx("input", { className: cls('visually-hidden'), onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, disabled: disabled, value: itemValue, id: id, type: "radio", name: name, checked: isChecked })] }));
+});
+RatingItem.displayName = 'SuiRatingItem';
+
+var Rating$1 = {"sui-rating-root":"sui-rating-root","sui-disabled":"sui-disabled","sui-rating-icon-empty":"sui-rating-icon-empty","sui-rating-squircle":"sui-rating-squircle","sui-rating-squircle-content":"sui-rating-squircle-content","sui-rating-icon-hover":"sui-rating-icon-hover","sui-active":"sui-active","sui-rating-read-only":"sui-rating-read-only","sui-rating-decimal":"sui-rating-decimal","sui-rating-label":"sui-rating-label","sui-rating-label-container":"sui-rating-label-container","sui-rating-label-empty-value":"sui-rating-label-empty-value","sui-rating-empty-value-focused":"sui-rating-empty-value-focused","sui-rating-visually-hidden":"sui-rating-visually-hidden","sui-rating-icon":"sui-rating-icon","sui-rating-icon-filled":"sui-rating-icon-filled"};
+
+const Rating = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ name: 'Rating', props: inProps });
+    const { className, classes, defaultValue = null, disabled = false, emptyLabelText = 'Empty', highlightSelectedOnly = false, icon, max = 5, name: nameProp, onChange, onChangeActive, onMouseLeave, onMouseMove, precision = 1, readOnly = false, emptyIcon, getLabelText = defaultLabelText, IconContainerComponent, value: valueProp, size, ...rest } = props;
+    const name = useId(nameProp);
+    const [valueDerived, setValueState] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiRating',
+    });
+    const valueRounded = roundValueToPrecision(valueDerived, precision);
+    const [{ hover, focus }, setState] = useState({
+        hover: -1,
+        focus: -1,
+    });
+    let value = valueRounded;
+    if (hover !== -1) {
+        value = hover;
+    }
+    if (focus !== -1) {
+        value = focus;
+    }
+    const { isFocusVisibleRef, onBlur: handleBlurVisible, onFocus: handleFocusVisible, ref: focusVisibleRef, } = useIsFocusVisible();
+    const [focusVisible, setFocusVisible] = useState(false);
+    const rootRef = useRef();
+    const handleRef = useForkRef(focusVisibleRef, rootRef, ref);
+    const handleMouseMove = (event) => {
+        if (onMouseMove) {
+            onMouseMove(event);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const rootNode = rootRef.current;
+        const { right, left, width: containerWidth, } = rootNode.getBoundingClientRect();
+        let percent;
+        {
+            percent = (event.clientX - left) / containerWidth;
+        }
+        let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
+        newHover = clamp(newHover, precision, max);
+        setState((prev) => prev.hover === newHover && prev.focus === newHover
+            ? prev
+            : {
+                hover: newHover,
+                focus: newHover,
+            });
+        setFocusVisible(false);
+        if (onChangeActive && hover !== newHover) {
+            onChangeActive(event, newHover);
+        }
+    };
+    const handleMouseLeave = (event) => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+        const newHover = -1;
+        setState({
+            hover: newHover,
+            focus: newHover,
+        });
+        if (onChangeActive && hover !== newHover) {
+            onChangeActive(event, newHover);
+        }
+    };
+    const handleChange = (event) => {
+        let newValue = event.target.value === '' ? null : parseFloat(event.target.value);
+        // Give mouse priority over keyboard
+        // Fix https://github.com/mui/material-ui/issues/22827
+        if (hover !== -1) {
+            newValue = hover;
+        }
+        setValueState(newValue);
+        if (onChange) {
+            onChange(event, newValue);
+        }
+    };
+    const handleClear = (event) => {
+        // Ignore keyboard events
+        // https://github.com/facebook/react/issues/7407
+        if (event.clientX === 0 && event.clientY === 0) {
+            return;
+        }
+        setState({
+            hover: -1,
+            focus: -1,
+        });
+        setValueState(null);
+        if (onChange &&
+            parseFloat(event.target.value) === valueRounded) {
+            onChange(event, null);
+        }
+    };
+    const handleFocus = (event) => {
+        handleFocusVisible(event);
+        if (isFocusVisibleRef.current === true) {
+            setFocusVisible(true);
+        }
+        const newFocus = parseFloat(event.target.value);
+        setState((prev) => ({
+            hover: prev.hover,
+            focus: newFocus,
+        }));
+    };
+    const handleBlur = (event) => {
+        if (hover !== -1) {
+            return;
+        }
+        handleBlurVisible(event);
+        if (isFocusVisibleRef.current === false) {
+            setFocusVisible(false);
+        }
+        const newFocus = -1;
+        setState((prev) => ({
+            hover: prev.hover,
+            focus: newFocus,
+        }));
+    };
+    const [emptyValueFocused, setEmptyValueFocused] = useState(false);
+    const cls = useClasses('rating', classes, className);
+    const ratingValues = useMemo(() => Array.from(new Array(max)), [max]);
+    return (jsxs("div", { ref: handleRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cls('root', {
+            'read-only': readOnly,
+            disabled,
+        }), role: readOnly ? 'img' : undefined, "aria-label": readOnly ? getLabelText(value) : undefined, ...rest, children: [ratingValues.map((_, index) => {
+                const itemValue = index + 1;
+                const ratingItemProps = {
+                    classes,
+                    disabled,
+                    emptyIcon,
+                    focus,
+                    highlightSelectedOnly,
+                    hover,
+                    icon,
+                    name,
+                    ratingValue: value,
+                    ratingValueRounded: valueRounded,
+                    readOnly,
+                    size,
+                    focusVisible,
+                    getLabelText,
+                    IconContainerComponent,
+                    onBlur: handleBlur,
+                    onChange: handleChange,
+                    onClick: handleClear,
+                    onFocus: handleFocus,
+                };
+                const isActive = itemValue === Math.ceil(value) &&
+                    (hover !== -1 || focus !== -1);
+                if (precision < 1) {
+                    const items = Array.from(new Array(1 / precision));
+                    return (jsx("div", { className: cls('decimal', {
+                            'icon-active': isActive,
+                            focusVisible,
+                        }), children: items.map(($, indexDecimal) => {
+                            const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
+                            return (jsx(RatingItem, { ...ratingItemProps, isActive: isActive && Math.ceil(focus) === itemDecimalValue, itemValue: itemDecimalValue, style: items.length - 1 === indexDecimal
+                                    ? undefined
+                                    : {
+                                        width: itemDecimalValue === value
+                                            ? `${(indexDecimal + 1) * precision * 100}%`
+                                            : '0%',
+                                        overflow: 'hidden',
+                                        position: 'absolute',
+                                        zIndex: 1,
+                                    } }, itemDecimalValue));
+                        }) }, itemValue));
+                }
+                return (jsx(RatingItem, { ...ratingItemProps, isActive: isActive, itemValue: itemValue }, itemValue));
+            }), !readOnly && !disabled && (jsxs("label", { className: cls('label', 'label-empty-value', {
+                    'empty-value-focused': emptyValueFocused,
+                }), children: [jsx("input", { className: cls('visually-hidden'), value: "", id: `${name}-empty`, type: "radio", name: name, checked: valueRounded == null, onFocus: () => setEmptyValueFocused(true), onBlur: () => setEmptyValueFocused(false), onChange: handleChange }), jsx("span", { className: cls('visually-hidden'), children: emptyLabelText })] }))] }));
+});
+Rating.displayName = 'SuiRating';
+
+export { Rating, RatingItem, defaultEmptyIcon, defaultIcon, defaultLabelText, Rating$1 as ratingStyle, roundValueToPrecision };

package/Select.js

@@ -0,0 +1,40 @@
+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/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/useNestedMenuItem.js';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+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 };

package/SingleFilter.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses, useControlled } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { M as Menu } from './chunks/Menu.js';
+import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import 'tabbable';
+import './chunks/useListNavigation.js';
+import './VirtualizedList.js';
+import { M as MenuItemText } from './chunks/MenuItemText.js';
+import { M as MenuList } from './chunks/MenuList.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'clsx';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import './chunks/getGrow.js';
+import '@ringcentral/spring-icon';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+
+var FilterButton$1 = {"sui-filter-button-root":"sui-filter-button-root","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled"};
+
+const FilterButton = forwardRef((props, ref) => {
+    const { classes, title, className, children, onClick, value = children, selected, disabled, ...rest } = props;
+    const cls = useClasses('filter-button', classes, className);
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        rootRef: ref,
+    });
+    const handleClick = (event) => {
+        if (onClick) {
+            onClick(event, value);
+        }
+    };
+    return (jsx("button", { className: cls('root', {
+            disabled,
+            focusVisible,
+            selected,
+        }), title: title || children, value: value, "aria-current": selected, ...rest, ...getRootProps(), onClick: handleClick, children: children.toUpperCase() }));
+});
+FilterButton.displayName = 'SuiFilterButton';
+
+var SingleFilter$1 = {"sui-single-filter-root":"sui-single-filter-root","sui-single-filter-more":"sui-single-filter-more"};
+
+const SingleFilter = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SingleFilter' });
+    const { classes, className, children, defaultValue, value: valueProp, defaultData, data: dataProp, onSelect, onDataChange, visibleCount = 2, MoreButtonProps, ...rest } = props;
+    const [anchor, setAnchor] = useState(null);
+    const cls = useClasses('single-filter', classes, className);
+    const [currentValue, setCurrentValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiSingleFilter',
+        state: 'value',
+    });
+    const [data, setData] = useControlled({
+        controlled: dataProp,
+        default: defaultData,
+        name: 'SuiSingleFilter',
+        state: 'data',
+    });
+    const buttonsData = data.slice(0, visibleCount);
+    const menuItemsData = data.slice(visibleCount);
+    const closeMenu = () => setAnchor(null);
+    const filterButtonClickHandler = (value) => {
+        setCurrentValue(value);
+        onSelect && onSelect(value);
+    };
+    const menuItemClickHandler = (value, index) => {
+        closeMenu();
+        setCurrentValue(value);
+        onSelect && onSelect(value);
+    };
+    const updateFilterItemsOrder = (menuIndex) => {
+        const lastVisibleItem = buttonsData.slice(-1);
+        const selectedItem = menuItemsData.slice(menuIndex, menuIndex + 1);
+        const newData = [
+            ...buttonsData.slice(0, buttonsData.length - 1),
+            ...selectedItem,
+            ...lastVisibleItem,
+            ...menuItemsData.slice(0, menuIndex),
+            ...menuItemsData.slice(menuIndex + 1),
+        ].filter((item) => item !== undefined);
+        setData(newData);
+        onDataChange && onDataChange(newData);
+    };
+    useEffect(() => {
+        const menuIndex = menuItemsData.findIndex(({ value }) => value === currentValue);
+        if (menuIndex >= 0) {
+            updateFilterItemsOrder(menuIndex);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentValue, data, visibleCount]);
+    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [buttonsData.map(({ label, value, ...rest }) => {
+                return (jsx(FilterButton, { value: value, selected: currentValue === value, onClick: () => {
+                        filterButtonClickHandler(value || label);
+                    }, ...rest, children: label }, value || label));
+            }), menuItemsData.length > 0 && (jsxs(Fragment, { children: [jsx(IconButton, { shape: 'squircle', variant: "contained", size: "small", color: 'secondary', background: false, className: cls('more'), onClick: (e) => {
+                            setAnchor((pre) => {
+                                if (pre)
+                                    return null;
+                                return e.currentTarget;
+                            });
+                        }, "aria-expanded": Boolean(anchor), ...MoreButtonProps, children: jsx(ExpandCollapseCaret, { orientation: "vertical", expanded: Boolean(anchor) }) }), jsx(Menu, { open: Boolean(anchor), anchorEl: anchor, onClose: closeMenu, children: jsx(MenuList, { children: menuItemsData.map(({ label, value, ...rest }, index) => {
+                                return (jsx(MenuItem, { onClick: () => {
+                                        menuItemClickHandler(value || label);
+                                    }, ...rest, children: jsx(MenuItemText, { children: label }) }, value || label));
+                            }) }) })] }))] }));
+});
+SingleFilter.displayName = 'SuiSingleFilter';
+
+export { FilterButton, SingleFilter, FilterButton$1 as filterButtonStyle, SingleFilter$1 as singleFilterStyle };

package/Skeleton.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { S as Squircle } from './chunks/Squircle.js';
+
+var Skeleton$1 = {"sui-skeleton-circular":"sui-skeleton-circular","sui-skeleton-squircle":"sui-skeleton-squircle","sui-skeleton-rectangular":"sui-skeleton-rectangular","sui-skeleton-text":"sui-skeleton-text"};
+
+const Skeleton = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Skeleton' });
+    const { classes, className, children, variant, ...rest } = props;
+    const cls = useClasses('skeleton', classes, className);
+    const SkeletonShape = variant === 'squircle' ? Squircle : 'div';
+    const squircleProps = {};
+    if (variant === 'squircle') {
+        squircleProps.interactive = false;
+    }
+    return (jsx(SkeletonShape, { className: cls('root', variant), ...rest, ...squircleProps, ref: ref, children: variant === 'text' ? jsx("span", { children: '\u00A0' }) : null }));
+});
+Skeleton.displayName = 'SuiSkeleton';
+
+var SkeletonContainer$1 = {"sui-skeleton-container-root":"sui-skeleton-container-root","skeleton-wave":"skeleton-wave"};
+
+const SkeletonContainer = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SkeletonContainer' });
+    const { component: SkeletonContainerRoot = 'div', classes, className, children, ...rest } = props;
+    const cls = useClasses('skeleton-container', classes, className);
+    return (jsx(SkeletonContainerRoot, { className: cls('root'), ...rest, ref: ref, children: children }));
+});
+SkeletonContainer.displayName = 'SuiSkeletonContainer';
+
+export { Skeleton, SkeletonContainer, SkeletonContainer$1 as skeletonContainerStyle, Skeleton$1 as skeletonStyle };