@ringcentral/spring-ui 1.9.1 → 1.9.3

package/Button.js

@@ -6,9 +6,9 @@ import '@mui/base';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 import './chunks/CircularProgressIndicator.js';
-import 'framer-motion';
 import './chunks/Icon.js';
 import './chunks/Tooltip.js';
+import 'framer-motion';
 import './chunks/usePrefersReducedMotion.js';
 import './chunks/getFade.js';
 import './Popper.js';

package/CircularProgressIndicator.js

@@ -2,10 +2,9 @@ export { C as CircularProgressIndicator } from './chunks/CircularProgressIndicat
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import 'framer-motion';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 
-var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
+var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-rotate":"sui-circular-progress-indicator-rotate","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-pulse":"sui-circular-progress-indicator-pulse","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
 
 export { CircularProgressIndicator as circularProgressIndicatorStyle };

package/NestedMenuContext.js

@@ -8,7 +8,7 @@ const useNestedChildMenu = (props) => {
     const { open, closeMenu, id } = props;
     const context = useNestedMenuContext();
     const { registOpenedSubMenu } = context ?? {};
-    const closeMenuMemo = useEventCallback(() => closeMenu());
+    const closeMenuMemo = useEventCallback((options) => closeMenu(options));
     useEffect(() => {
         if (open) {
             return registOpenedSubMenu?.({

package/SubMenu.js

@@ -6,7 +6,7 @@ import { Popper } from './Popper.js';
 import { CaretRightMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { I as Icon } from './chunks/Icon.js';
-import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import { S as SubMenuTriggerNestedIdContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './chunks/Menu.js';
@@ -49,7 +49,9 @@ const SubMenu = forwardRef((inProps, ref) => {
     const itemRef = useRef(null);
     const handleRef = useForkRef(itemRef, ref);
     const open = Boolean(anchor);
-    const closeSubMenu = () => {
+    const restoreFocusOnCloseRef = useRef(false);
+    const closeSubMenu = (options) => {
+        restoreFocusOnCloseRef.current = options?.restoreFocus === true;
         setAnchor(null);
     };
     const { hover: anchorHover, hoverHandlers: anchorHoverHandlers } = useHover({
@@ -74,38 +76,28 @@ const SubMenu = forwardRef((inProps, ref) => {
     useNestedMenuItem({ hovered: anchorHover, id });
     useNestedChildMenu({
         open,
-        closeMenu: () => {
-            closeSubMenu();
-        },
+        closeMenu: (options) => closeSubMenu(options),
         id,
     });
     const shouldKeepMenu = (() => {
         if (!open)
             return false;
-        if (open && !menuMounted)
+        if (!menuMounted)
             return true;
-        let shouldKeepMenu = false;
-        if (focusVisibleWithin) {
-            shouldKeepMenu = true;
-        }
-        if ((!menuHover && menuHoverEverRef.current) ||
-            (!anchorHover && anchorHoverEverRef.current)) {
-            shouldKeepMenu = false;
-        }
-        if (menuHover || anchorHover) {
-            shouldKeepMenu = true;
-        }
-        return shouldKeepMenu;
+        if (focusVisibleWithin)
+            return true;
+        return menuHover || anchorHover;
     })();
     useEffect(() => {
         if (!shouldKeepMenu) {
             closeSubMenu();
         }
-        return undefined;
     }, [shouldKeepMenu]);
     useOnLayoutReRender(() => {
+        const restoreFocus = restoreFocusOnCloseRef.current;
         if (!open) {
-            itemRef.current?.focus();
+            restoreFocus && itemRef.current?.focus();
+            restoreFocusOnCloseRef.current = false;
         }
     }, [open]);
     useEffect(() => {
@@ -115,21 +107,19 @@ const SubMenu = forwardRef((inProps, ref) => {
             anchorHoverEverRef.current = false;
         }
     }, [open]);
-    return (jsxs(Fragment, { children: [jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
-                    onKeyDownProp?.(e);
-                    if (e.key === 'ArrowRight') {
-                        setAnchor(e.currentTarget);
-                    }
-                }, ...anchorHoverHandlers, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }), open && (jsx(PopperMenu, { anchorEl: anchor, placement: "right-start", offset: -4, whileElementsMounted: () => {
+    return (jsxs(Fragment, { children: [jsx(SubMenuTriggerNestedIdContext.Provider, { value: id, children: jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
+                        onKeyDownProp?.(e);
+                        if (e.key === 'ArrowRight') {
+                            setAnchor(e.currentTarget);
+                        }
+                    }, ...anchorHoverHandlers, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }) }), open && (jsx(PopperMenu, { anchorEl: anchor, placement: "right-start", offset: -4, whileElementsMounted: () => {
                     setMenuMounted(true);
                     return () => { };
                 }, onKeyDown: (e) => {
                     if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
                         e.currentTarget.contains(e.target)) {
-                        if (e.key === 'Escape') {
-                            e.stopPropagation();
-                        }
-                        closeSubMenu();
+                        e.stopPropagation();
+                        closeSubMenu({ restoreFocus: true });
                     }
                 }, ...menuHoverHandlers, ...focusVisibleHandlers, children: children }))] }));
 });

package/chunks/CircularProgressIndicator.js

@@ -1,22 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { MotionConfig, motion } from 'framer-motion';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 
-const indeterminateTransition = {
-    type: 'tween',
-    duration: 1,
-    ease: 'easeInOut',
-};
-const radialGradientScaleMultiplier = {
-    xlarge: [2.7, 3],
-    large: [3, 3.5],
-    medium: [2.7, 3],
-    small: [3.5, 3],
-    xsmall: [3.5, 3],
-};
 const CircularProgressIndicator = forwardRef((inProps, ref) => {
     const props = useThemeProps({
         props: inProps,
@@ -27,22 +14,7 @@ const CircularProgressIndicator = forwardRef((inProps, ref) => {
     const progressBarProps = progressBarPropsProp || {};
     let content = null;
     if (variant === 'indeterminate') {
-        const [scale, scaleMultiplier] = radialGradientScaleMultiplier[size];
-        content = (jsx(MotionConfig, { reducedMotion: "never", children: jsx(motion.span, { className: cls('outer-circle', `${variant}-outer-circle`), animate: {
-                    rotate: 360,
-                    transition: {
-                        repeat: Infinity,
-                        ...indeterminateTransition,
-                    },
-                }, children: jsx(motion.span, { className: cls('inner-circle', `${variant}-inner-circle`), animate: {
-                        scale: [scale, scale * scaleMultiplier, scale],
-                        opacity: [0.5, 1, 0.5],
-                        transition: {
-                            repeat: Infinity,
-                            repeatType: 'loop',
-                            ...indeterminateTransition,
-                        },
-                    } }) }) }));
+        content = (jsx("span", { className: cls('outer-circle', `${variant}-outer-circle`), children: jsx("span", { className: cls('inner-circle', `${variant}-inner-circle`) }) }));
     }
     else if (variant === 'determinate') {
         if (value === undefined) {

package/chunks/Popover.js

@@ -18,7 +18,7 @@ const Popover = forwardRef((inProps, ref) => {
     const paperContentRef = useRef(null);
     const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
     const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(Modal, { disableScrollLock: true, ...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({
+    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,

package/chunks/useMenuItemSelect.js

@@ -15,6 +15,8 @@ const MenuListContext = createContext({
 });
 const useMenuListContext = () => useContext(MenuListContext);
 
+const SubMenuTriggerNestedIdContext = createContext(null);
+
 const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
@@ -128,7 +130,9 @@ const MenuItem = forwardRef((inProps, ref) => {
     const selectMode = selectContextValue
         ? selectContextValue.selectMode
         : 'single';
-    const id = useId();
+    const subMenuTriggerNestedId = useContext(SubMenuTriggerNestedIdContext);
+    const generatedId = useId();
+    const id = subMenuTriggerNestedId ?? generatedId;
     const { hover, hoverHandlers } = useHover({ onMouseEnter, onMouseLeave });
     useNestedMenuItem({ hovered: hover, id });
     useLayoutEffect(() => {
@@ -236,4 +240,4 @@ const useMenuItemSelect = (props) => {
     };
 };
 
-export { Action as A, MenuItem as M, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, useMenuItemSelectContext as u };
+export { Action as A, MenuItem as M, SubMenuTriggerNestedIdContext as S, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, useMenuItemSelectContext as u };

package/index.css

@@ -752,43 +752,71 @@
   display: none;
 }
 
-.sui-circular-progress-indicator-root {
-
-    display: flex;
-
-    flex-direction: column;
-
-    align-items: center;
+@keyframes sui-circular-progress-indicator-rotate {
+  from {
+    transform: rotate(0deg);
+  }
 
-    justify-content: center;
+  to {
+    transform: rotate(360deg);
+  }
+}
 
-    overflow: hidden;
+@keyframes sui-circular-progress-indicator-pulse {
+  0% {
+    transform: scale(var(--sui-circular-progress-indicator-pulse-start-scale));
+    opacity: 0.5;
+  }
 
-    will-change: transform;
+  50% {
+    transform: scale(var(--sui-circular-progress-indicator-pulse-end-scale));
+    opacity: 1;
+  }
 
-    border-radius: var(--sui-border-radius-full);
+  100% {
+    transform: scale(var(--sui-circular-progress-indicator-pulse-start-scale));
+    opacity: 0.5;
+  }
+}
 
-    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
+.sui-circular-progress-indicator-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  will-change: transform;
+  border-radius: var(--sui-border-radius-full);
+  --sui-focus-ring-border-radius: var(--sui-border-radius-full);
 
     width: var(--sui-circular-progress-indicator-size);
     height: var(--sui-circular-progress-indicator-size);
 }
-  .sui-circular-progress-indicator-xlarge {
+
+.sui-circular-progress-indicator-xlarge {
     --sui-circular-progress-indicator-size: var(--sui-spacing-14);
   }
-  .sui-circular-progress-indicator-large {
+
+.sui-circular-progress-indicator-large {
     --sui-circular-progress-indicator-size: var(--sui-spacing-10);
   }
-  .sui-circular-progress-indicator-medium {
+
+.sui-circular-progress-indicator-medium {
     --sui-circular-progress-indicator-size: var(--sui-spacing-6);
   }
-  .sui-circular-progress-indicator-small {
+
+.sui-circular-progress-indicator-small {
     --sui-circular-progress-indicator-size: var(--sui-spacing-4);
   }
-  .sui-circular-progress-indicator-xsmall {
+
+.sui-circular-progress-indicator-xsmall {
     --sui-circular-progress-indicator-size: var(--sui-spacing-3);
   }
-  .sui-circular-progress-indicator-indeterminate {
+
+.sui-circular-progress-indicator-indeterminate {
+    --sui-circular-progress-indicator-animation-duration: 1s;
+    --sui-circular-progress-indicator-animation-easing: ease-in-out;
+
     background-color: var(--sui-circular-progress-indicator-track-bg);
 
     /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -799,24 +827,25 @@
         var(--sui-circular-progress-indicator-gradient-stop)
     );
   }
-  .sui-circular-progress-indicator-indeterminate-outer-circle {
 
-    display: block;
-
-    border-radius: var(--sui-border-radius-full);
-
-    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
+.sui-circular-progress-indicator-indeterminate-outer-circle {
+  display: block;
+  border-radius: var(--sui-border-radius-full);
+  --sui-focus-ring-border-radius: var(--sui-border-radius-full);
 
       width: calc(var(--sui-circular-progress-indicator-size) / 4);
       height: calc(var(--sui-circular-progress-indicator-size) + 4px);
+      animation: sui-circular-progress-indicator-rotate
+        var(--sui-circular-progress-indicator-animation-duration)
+        var(--sui-circular-progress-indicator-animation-easing) infinite;
+      transform-origin: center center;
+      will-change: transform;
 }
-  .sui-circular-progress-indicator-indeterminate-inner-circle {
-
-    display: block;
 
-    border-radius: var(--sui-border-radius-full);
-
-    --sui-focus-ring-border-radius: var(--sui-border-radius-full);
+.sui-circular-progress-indicator-indeterminate-inner-circle {
+  display: block;
+  border-radius: var(--sui-border-radius-full);
+  --sui-focus-ring-border-radius: var(--sui-border-radius-full);
 
       width: calc(var(--sui-circular-progress-indicator-size) / 4);
       height: calc(var(--sui-circular-progress-indicator-size) / 4);
@@ -826,9 +855,17 @@
         var(--sui-circular-progress-indicator-gradient-end-color)
       );
       clip-path: inset(0 50% 0 0);
+      animation: sui-circular-progress-indicator-pulse
+        var(--sui-circular-progress-indicator-animation-duration)
+        var(--sui-circular-progress-indicator-animation-easing) infinite;
+      transform-origin: center center;
+      will-change: transform, opacity;
 }
-  .sui-circular-progress-indicator-indeterminate-xlarge {
+
+.sui-circular-progress-indicator-indeterminate-xlarge {
       --sui-circular-progress-indicator-gradient-size: 4px;
+      --sui-circular-progress-indicator-pulse-start-scale: 2.7;
+      --sui-circular-progress-indicator-pulse-end-scale: 8.1;
       --sui-circular-progress-indicator-gradient-start: calc(
         var(--sui-circular-progress-indicator-size) / 3
       );
@@ -836,8 +873,11 @@
         var(--sui-circular-progress-indicator-size) / 2.92
       );
     }
-  .sui-circular-progress-indicator-indeterminate-large {
+
+.sui-circular-progress-indicator-indeterminate-large {
       --sui-circular-progress-indicator-gradient-size: 3px;
+      --sui-circular-progress-indicator-pulse-start-scale: 3;
+      --sui-circular-progress-indicator-pulse-end-scale: 10.5;
       --sui-circular-progress-indicator-gradient-start: calc(
         var(--sui-circular-progress-indicator-size) / 3
       );
@@ -845,8 +885,11 @@
         var(--sui-circular-progress-indicator-size) / 2.82
       );
     }
-  .sui-circular-progress-indicator-indeterminate-medium {
+
+.sui-circular-progress-indicator-indeterminate-medium {
       --sui-circular-progress-indicator-gradient-size: 2px;
+      --sui-circular-progress-indicator-pulse-start-scale: 2.7;
+      --sui-circular-progress-indicator-pulse-end-scale: 8.1;
       --sui-circular-progress-indicator-gradient-start: calc(
         var(--sui-circular-progress-indicator-size) / 3
       );
@@ -854,8 +897,11 @@
         var(--sui-circular-progress-indicator-size) / 2.72
       );
     }
-  .sui-circular-progress-indicator-indeterminate-small {
+
+.sui-circular-progress-indicator-indeterminate-small {
       --sui-circular-progress-indicator-gradient-size: 1px;
+      --sui-circular-progress-indicator-pulse-start-scale: 3.5;
+      --sui-circular-progress-indicator-pulse-end-scale: 10.5;
       --sui-circular-progress-indicator-gradient-start: calc(
         var(--sui-circular-progress-indicator-size) / 3
       );
@@ -863,8 +909,11 @@
         var(--sui-circular-progress-indicator-size) / 2.72
       );
     }
-  .sui-circular-progress-indicator-indeterminate-xsmall {
+
+.sui-circular-progress-indicator-indeterminate-xsmall {
       --sui-circular-progress-indicator-gradient-size: 1px;
+      --sui-circular-progress-indicator-pulse-start-scale: 3.5;
+      --sui-circular-progress-indicator-pulse-end-scale: 10.5;
       --sui-circular-progress-indicator-gradient-start: calc(
         var(--sui-circular-progress-indicator-size) / 3
       );
@@ -872,7 +921,8 @@
         var(--sui-circular-progress-indicator-size) / 2.72
       );
     }
-  .sui-circular-progress-indicator-indeterminate-primary {
+
+.sui-circular-progress-indicator-indeterminate-primary {
       --sui-circular-progress-indicator-gradient-start-color: var(
         --sui-colors-primary-f
       );
@@ -881,7 +931,8 @@
       );
       --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
     }
-  .sui-circular-progress-indicator-indeterminate-neutral {
+
+.sui-circular-progress-indicator-indeterminate-neutral {
       --sui-circular-progress-indicator-gradient-start-color: var(
         --sui-colors-neutral-static-w0
       );
@@ -892,7 +943,8 @@
         --sui-colors-neutral-b4-t50
       );
     }
-  .sui-circular-progress-indicator-indeterminate-danger {
+
+.sui-circular-progress-indicator-indeterminate-danger {
       --sui-circular-progress-indicator-gradient-start-color: var(
         --sui-colors-danger-f
       );
@@ -901,7 +953,8 @@
       );
       --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
     }
-  .sui-circular-progress-indicator-indeterminate-warning {
+
+.sui-circular-progress-indicator-indeterminate-warning {
       --sui-circular-progress-indicator-gradient-start-color: var(
         --sui-colors-warning-f
       );
@@ -910,7 +963,8 @@
       );
       --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
     }
-  .sui-circular-progress-indicator-indeterminate-success {
+
+.sui-circular-progress-indicator-indeterminate-success {
       --sui-circular-progress-indicator-gradient-start-color: var(
         --sui-colors-success-f
       );
@@ -919,22 +973,28 @@
       );
       --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
     }
-  .sui-circular-progress-indicator-determinate-progress-circle {
+
+.sui-circular-progress-indicator-determinate-progress-circle {
       stroke: var(--sui-circular-progress-indicator-bg);
     }
-  .sui-circular-progress-indicator-determinate-primary {
+
+.sui-circular-progress-indicator-determinate-primary {
       --sui-circular-progress-indicator-bg: var(--sui-colors-primary-f);
     }
-  .sui-circular-progress-indicator-determinate-neutral {
+
+.sui-circular-progress-indicator-determinate-neutral {
       --sui-circular-progress-indicator-bg: var(--sui-colors-neutral-w0);
     }
-  .sui-circular-progress-indicator-determinate-danger {
+
+.sui-circular-progress-indicator-determinate-danger {
       --sui-circular-progress-indicator-bg: var(--sui-colors-danger-f);
     }
-  .sui-circular-progress-indicator-determinate-warning {
+
+.sui-circular-progress-indicator-determinate-warning {
       --sui-circular-progress-indicator-bg: var(--sui-colors-warning-f);
     }
-  .sui-circular-progress-indicator-determinate-success {
+
+.sui-circular-progress-indicator-determinate-success {
       --sui-circular-progress-indicator-bg: var(--sui-colors-success-f);
     }
 

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ringcentral/spring-ui",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "author": "RingCentral",
   "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
   "main": "./index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
+  "style": "./index.css",
   "dependencies": {
     "@date-io/dayjs": "^3.0.0",
     "@dnd-kit/core": "^6.1.0",
@@ -14,9 +15,9 @@
     "@floating-ui/react-dom": "2.1.1",
     "@juggle/resize-observer": "3.4.0",
     "@mui/base": "5.0.0-beta.40",
-    "@ringcentral/spring-base": "^1.9.1",
-    "@ringcentral/spring-icon": "^1.9.1",
-    "@ringcentral/spring-theme": "^1.9.1",
+    "@ringcentral/spring-base": "^1.9.3",
+    "@ringcentral/spring-icon": "^1.9.3",
+    "@ringcentral/spring-theme": "^1.9.3",
     "@types/lodash": "^4.14.182",
     "@use-gesture/react": "10.3.1",
     "clsx": "^1.2.1",

package/src/NestedMenuContext/NestedMenuContext.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+export declare type CloseSubMenuOptions = {
+    restoreFocus?: boolean;
+};
 export declare type SubMenuItemSymbol = {
     anchorId: string;
-    closeSubMenu: () => void;
+    closeSubMenu: (options?: CloseSubMenuOptions) => void;
 };
 export declare type NestedMenuContextValue = {
     registHoveredItem: (menuItemId: string) => void;

package/src/NestedMenuContext/SubMenuTriggerNestedIdContext.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SubMenuTriggerNestedIdContext: import("react").Context<string | null>;

package/src/NestedMenuContext/useNestedChildMenu.d.ts

@@ -1,6 +1,7 @@
+import { CloseSubMenuOptions } from './NestedMenuContext';
 export declare type UseNestedChildMenuProps = {
     open: boolean;
     id: string;
-    closeMenu: () => void;
+    closeMenu: (options?: CloseSubMenuOptions) => void;
 };
 export declare const useNestedChildMenu: (props: UseNestedChildMenuProps) => void;