@ringcentral/spring-ui 1.11.2 → 1.13.0

package/SingleFilter.js

@@ -1,69 +1,84 @@
-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/useAnimationFrame.js';
-import './chunks/useNestedMenuItem.js';
-import './ListNavigation.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import './chunks/hasContent.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) => {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { useButton } from "@mui/base";
+import { useClasses, useControlled } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { Menu as Menu_Menu } from "./Menu.js";
+import { MenuItem as MenuItem_MenuItem } from "./MenuItem.js";
+import { MenuItemText as MenuItemText_MenuItemText } from "./MenuItemText.js";
+import { MenuList as MenuList_MenuList } from "./MenuList.js";
+import { ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var FilterButton = ({"sui-filter-button-root":"sui-filter-button-root","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled"});
+
+
+
+
+
+const FilterButton_FilterButton = /*#__PURE__*/ 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,
+        rootRef: ref
     });
-    const handleClick = (event) => {
+    const handleClick = (event)=>{
         if (onClick) {
             onClick(event, value);
         }
     };
-    return (jsx("button", { className: cls('root', {
+    return /*#__PURE__*/ jsx("button", {
+        className: cls('root', {
             disabled,
             focusVisible,
-            selected,
-        }), title: title || children, value: value, "aria-current": selected, ...rest, ...getRootProps(), onClick: handleClick, children: children.toUpperCase() }));
+            selected
+        }),
+        title: title || children,
+        value: value,
+        "aria-current": selected,
+        ...rest,
+        ...getRootProps(),
+        onClick: handleClick,
+        children: children.toUpperCase()
+    });
 });
-FilterButton.displayName = 'SuiFilterButton';
+FilterButton_FilterButton.displayName = 'SuiFilterButton';
+
+
+
+
+
+
+
+
+
 
-var SingleFilter$1 = {"sui-single-filter-root":"sui-single-filter-root","sui-single-filter-more":"sui-single-filter-more"};
+// extracted by css-extract-rspack-plugin
+/* export default */ var SingleFilter = ({"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 SingleFilter_SingleFilter = /*#__PURE__*/ 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);
@@ -71,27 +86,27 @@ const SingleFilter = forwardRef((inProps, ref) => {
         controlled: valueProp,
         default: defaultValue,
         name: 'SuiSingleFilter',
-        state: 'value',
+        state: 'value'
     });
     const [data, setData] = useControlled({
         controlled: dataProp,
         default: defaultData,
         name: 'SuiSingleFilter',
-        state: 'data',
+        state: 'data'
     });
     const buttonsData = data.slice(0, visibleCount);
     const menuItemsData = data.slice(visibleCount);
-    const closeMenu = () => setAnchor(null);
-    const filterButtonClickHandler = (value) => {
+    const closeMenu = ()=>setAnchor(null);
+    const filterButtonClickHandler = (value)=>{
         setCurrentValue(value);
         onSelect && onSelect(value);
     };
-    const menuItemClickHandler = (value, index) => {
+    const menuItemClickHandler = (value, index)=>{
         closeMenu();
         setCurrentValue(value);
         onSelect && onSelect(value);
     };
-    const updateFilterItemsOrder = (menuIndex) => {
+    const updateFilterItemsOrder = (menuIndex)=>{
         const lastVisibleItem = buttonsData.slice(-1);
         const selectedItem = menuItemsData.slice(menuIndex, menuIndex + 1);
         const newData = [
@@ -99,33 +114,89 @@ const SingleFilter = forwardRef((inProps, ref) => {
             ...selectedItem,
             ...lastVisibleItem,
             ...menuItemsData.slice(0, menuIndex),
-            ...menuItemsData.slice(menuIndex + 1),
-        ].filter((item) => item !== undefined);
+            ...menuItemsData.slice(menuIndex + 1)
+        ].filter((item)=>item !== undefined);
         setData(newData);
         onDataChange && onDataChange(newData);
     };
-    useEffect(() => {
-        const menuIndex = menuItemsData.findIndex(({ value }) => value === currentValue);
+    useEffect(()=>{
+        const menuIndex = menuItemsData.findIndex(({ value })=>value === currentValue);
         if (menuIndex >= 0) {
             updateFilterItemsOrder(menuIndex);
         }
-    }, [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: () => {
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        currentValue,
+        data,
+        visibleCount
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            buttonsData.map(({ label, value, ...rest })=>{
+                return /*#__PURE__*/ jsx(FilterButton_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;
+                    },
+                    ...rest,
+                    children: label
+                }, value || label);
+            }),
+            menuItemsData.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(IconButton_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));
-                            }) }) })] }))] }));
+                        },
+                        "aria-expanded": Boolean(anchor),
+                        ...MoreButtonProps,
+                        children: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                            orientation: "vertical",
+                            expanded: Boolean(anchor)
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu_Menu, {
+                        open: Boolean(anchor),
+                        anchorEl: anchor,
+                        onClose: closeMenu,
+                        children: /*#__PURE__*/ jsx(MenuList_MenuList, {
+                            children: menuItemsData.map(({ label, value, ...rest }, index)=>{
+                                return /*#__PURE__*/ jsx(MenuItem_MenuItem, {
+                                    onClick: ()=>{
+                                        menuItemClickHandler(value || label, index);
+                                    },
+                                    ...rest,
+                                    children: /*#__PURE__*/ jsx(MenuItemText_MenuItemText, {
+                                        children: label
+                                    })
+                                }, value || label);
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 });
-SingleFilter.displayName = 'SuiSingleFilter';
+SingleFilter_SingleFilter.displayName = 'SuiSingleFilter';
+
+
+
+
+
+
 
-export { FilterButton, SingleFilter, FilterButton$1 as filterButtonStyle, SingleFilter$1 as singleFilterStyle };
+export { FilterButton as filterButtonStyle, FilterButton_FilterButton as FilterButton, SingleFilter as singleFilterStyle, SingleFilter_SingleFilter as SingleFilter };

package/Skeleton.js

@@ -1,32 +1,83 @@
-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';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import "./Squircle.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.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' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Skeleton = ({"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_Skeleton = /*#__PURE__*/ 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 SkeletonShape = variant === 'squircle' ? 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 }));
+    return /*#__PURE__*/ jsx(SkeletonShape, {
+        className: cls('root', variant),
+        ...rest,
+        ...squircleProps,
+        ref: ref,
+        children: variant === 'text' ? /*#__PURE__*/ jsx("span", {
+            children: '\u00A0'
+        }) : null
+    });
 });
-Skeleton.displayName = 'SuiSkeleton';
+Skeleton_Skeleton.displayName = 'SuiSkeleton';
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var SkeletonContainer = ({"sui-skeleton-container-root":"sui-skeleton-container-root","skeleton-wave":"skeleton-wave"});
 
-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 SkeletonContainer_SkeletonContainer = /*#__PURE__*/ 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 }));
+    return /*#__PURE__*/ jsx(SkeletonContainerRoot, {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-SkeletonContainer.displayName = 'SuiSkeletonContainer';
+SkeletonContainer_SkeletonContainer.displayName = 'SuiSkeletonContainer';
+
+
+
+
+
+
+
+
+
+
+
 
-export { Skeleton, SkeletonContainer, SkeletonContainer$1 as skeletonContainerStyle, Skeleton$1 as skeletonStyle };
+export { Skeleton as skeletonStyle, SkeletonContainer as skeletonContainerStyle, SkeletonContainer_SkeletonContainer as SkeletonContainer, Skeleton_Skeleton as Skeleton };