@ringcentral/spring-ui 1.7.0 → 1.9.0

package/MenuHeader.js

@@ -1,16 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { M as MenuDivider } from './chunks/MenuDivider.js';
 import './chunks/Divider.js';
+import '@ringcentral/spring-base';
 
-var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end"};
+var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end","sui-compact":"sui-compact"};
 
 const MenuHeader = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuHeader' });
     const { classes, className, children, start, end, divider = true, ...rest } = props;
-    const cls = useClasses('menu-header', classes, className);
+    const cls = useClassesWithMode('menu-header', classes, className);
     return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [start && jsx("div", { className: cls('start'), children: start }), end && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
 });
 MenuHeader.displayName = 'SuiMenuHeader';

package/MenuItem.js

@@ -27,6 +27,6 @@ import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
 
-var MenuItem = {"sui-menu-item-container":"sui-menu-item-container","sui-menu-item-select-indicator":"sui-menu-item-select-indicator","sui-menu-item-select-dot":"sui-menu-item-select-dot","sui-menu-item-root":"sui-menu-item-root","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-spruno":"sui-spruno","sui-list-item-text":"sui-list-item-text","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-active":"sui-active","sui-menu-item-nowrap":"sui-menu-item-nowrap","sui-menu-item-text":"sui-menu-item-text","sui-menu-item-selectable":"sui-menu-item-selectable","sui-menu-item-highlighted":"sui-menu-item-highlighted"};
+var MenuItem = {"sui-menu-item-container":"sui-menu-item-container","sui-menu-item-select-indicator":"sui-menu-item-select-indicator","sui-menu-item-select-dot":"sui-menu-item-select-dot","sui-menu-item-root":"sui-menu-item-root","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-spruno":"sui-spruno","sui-list-item-text":"sui-list-item-text","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-active":"sui-active","sui-menu-item-nowrap":"sui-menu-item-nowrap","sui-menu-item-text":"sui-menu-item-text","sui-menu-item-selectable":"sui-menu-item-selectable","sui-menu-item-highlighted":"sui-menu-item-highlighted","sui-compact":"sui-compact","sui-menu-item":"sui-menu-item"};
 
 export { MenuItem as menuItemStyle };

package/MenuItemText.js

@@ -4,6 +4,6 @@ import 'react';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 
-var MenuItemText = {"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text"};
+var MenuItemText = {"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text","sui-compact":"sui-compact"};
 
 export { MenuItemText as menuItemTextStyle };

package/Modal.js

@@ -11,6 +11,6 @@ import './chunks/getFade.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 
-var Modal = {"sui-modal-root":"sui-modal-root"};
+var Modal = {"sui-modal-root":"sui-modal-root","sui-modal-non-blocking":"sui-modal-non-blocking","sui-backdrop-root":"sui-backdrop-root"};
 
 export { Modal as modalStyles };

package/PageHeader.js

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 
-var PageHeader$1 = {"sui-page-header-root":"sui-page-header-root","sui-page-header-left-root":"sui-page-header-left-root","sui-page-header-right-root":"sui-page-header-right-root","sui-page-header-center-root":"sui-page-header-center-root","sui-page-header-title-root":"sui-page-header-title-root","sui-page-header-integrated":"sui-page-header-integrated","sui-page-header-detached":"sui-page-header-detached"};
+var PageHeader$1 = {"sui-page-header-root":"sui-page-header-root","sui-page-header-left-root":"sui-page-header-left-root","sui-page-header-right-root":"sui-page-header-right-root","sui-page-header-center-root":"sui-page-header-center-root","sui-page-header-title-root":"sui-page-header-title-root","sui-page-header-integrated":"sui-page-header-integrated","sui-page-header-detached":"sui-page-header-detached","sui-compact":"sui-compact"};
 
 const PageHeader = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'PageHeader' });
     const { classes, className, children, variant = 'integrated', ...rest } = props;
-    const cls = useClasses('page-header', classes, className);
-    return (jsx("header", { className: cls('root', variant), ...rest, ref: ref, children: children }));
+    const cls = useClassesWithMode('page-header', classes, className);
+    return (jsx("header", { className: cls('root', {
+            [variant]: true,
+        }), ...rest, ref: ref, children: children }));
 });
 PageHeader.displayName = 'SuiPageHeader';
 const PageHeaderLeft = forwardRef((inProps, ref) => {

package/Popper.js

@@ -110,7 +110,6 @@ const Popper = forwardRef((inProps, ref) => {
     const fixedX = Math.round(Number(x ?? 0) * dpr) / dpr;
     const fixedY = Math.round(Number(y ?? 0) * dpr) / dpr;
     return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
-                    /* prevent arrow overflow when content too small */
                     ...(arrowHeight
                         ? { minWidth: (arrowHeight + arrowPadding) * 2 }
                         : undefined),

package/Rating.js

@@ -89,7 +89,6 @@ const Rating = forwardRef((inProps, ref) => {
         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;
@@ -124,8 +123,6 @@ const Rating = forwardRef((inProps, ref) => {
     };
     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;
         }
@@ -135,8 +132,6 @@ const Rating = forwardRef((inProps, ref) => {
         }
     };
     const handleClear = (event) => {
-        // Ignore keyboard events
-        // https://github.com/facebook/react/issues/7407
         if (event.clientX === 0 && event.clientY === 0) {
             return;
         }

package/SingleFilter.js

@@ -107,7 +107,6 @@ const SingleFilter = forwardRef((inProps, ref) => {
         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: () => {

package/Slider.js

@@ -28,13 +28,11 @@ const SliderThumb = (props) => {
     const percent = valueToPercent(value, min, max);
     const style = axisProps[axis].offset(percent);
     const scaledValue = scale(value);
-    // Format value label for tooltip display
     const valueLabel = typeof valueLabelFormat === 'function'
         ? valueLabelFormat(scaledValue)
         : typeof valueLabelFormat === 'string'
             ? valueLabelFormat
             : scaledValue;
-    // Calculate aria-valuetext
     const ariaValueText = getAriaValueText
         ? getAriaValueText(scaledValue)
         : typeof valueLabelFormat === 'function' ||
@@ -47,7 +45,7 @@ const SliderThumb = (props) => {
                     (valueLabelDisplay === 'auto' && (hover || focusVisible || dragging)), title: valueLabel, ...combineProps({
                     placement: orientation === 'vertical' ? 'left' : 'top',
                     className: cls('value-label', {
-                        'show-on-hover-only': valueLabelDisplay === 'auto', // kept for backward compatibility
+                        'show-on-hover-only': valueLabelDisplay === 'auto',
                     }),
                     classes: {
                         paper: cls('value-label-paper'),
@@ -103,7 +101,6 @@ const InnerSlider = (inProps, ref) => {
                                 (typeof mark.label === 'string' ? (jsx("span", { className: cls('mark-label'), children: mark.label })) : (mark.label))] }, `${mark.value}`));
                 }) }))] }));
 };
-// forwardRef doesn't handle generic types well, so we need to cast through an intermediate variable
 const Slider = forwardRef(InnerSlider);
 Slider.displayName = 'SuiSlider';
 

package/Snackbar.js

@@ -25,11 +25,6 @@ const WRAPPER_ID = 'sui-snackbar-wrapper';
 const useSnackbarWrapper = (className) => {
     const { document } = useWindowContext();
     const { scopeProps } = useTheme();
-    /**
-     * We must memoize the container otherwise other components that
-     * are a child of the wrapper which are conditionally rendered
-     * can throw a "Cannot update a component while rendering a different component" error.
-     */
     return useMemo(() => {
         const container = document?.getElementById(WRAPPER_ID) ?? document?.createElement('div');
         if (container) {
@@ -37,19 +32,11 @@ const useSnackbarWrapper = (className) => {
                 class: className,
                 id: WRAPPER_ID,
             }).forEach(([key, value]) => container.setAttribute(key, value));
-            // create one more div wrapper to wrap the container
             if (document) {
                 const wrapper = document.createElement('div');
-                // Apply the scope props directly to the wrapper
                 Object.entries({
                     ...scopeProps,
                 }).forEach(([key, value]) => {
-                    /**
-                     * Map the key to an attribute. scopeProps is set on a ReactElement so
-                     * setting a key like className will automatically be set to class,
-                     * but as we're mutating the DOM element directly we need to manually
-                     * map the key name to the DOM attribute name.
-                     */
                     let attribute = key;
                     if (attribute === 'className') {
                         attribute = 'class';
@@ -61,7 +48,6 @@ const useSnackbarWrapper = (className) => {
             }
         }
         return container;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [className, scopeProps]);
 };
 

package/SortableListItem.js

@@ -32,7 +32,6 @@ const SortableListItem = forwardRef((props, ref) => {
     const handleRef = useForkRef(ref, setNodeRef, setActivatorNodeRef);
     return (jsx(ListItem, { ...combineProps(combineProps(rest, {
             onKeyDown: (e) => {
-                // prevent trigger keyboard navigation
                 if (isSorting &&
                     ['End', 'Home', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
                     e.preventDefault();

package/SplitButton.js

@@ -121,9 +121,7 @@ const SplitButton = withTooltip(forwardRef((inProps, ref) => {
                     children: actionButtonContent,
                     onClick: childProps.onClick,
                     classes: {
-                        root: clsx(cls('action-button-root'), 
-                        // Reduces the padding when only an icon is provided
-                        actionButtonCls(hasIconChild && 'has-start-slot', hasIconChild && 'has-end-slot')),
+                        root: clsx(cls('action-button-root'), actionButtonCls(hasIconChild && 'has-start-slot', hasIconChild && 'has-end-slot')),
                     },
                 }, actionButtonPropsProp);
                 if (process.env.NODE_ENV !== 'production' &&

package/StatusIndicator.js

@@ -6,6 +6,6 @@ import '@ringcentral/spring-theme';
 import './chunks/Icon.js';
 import 'react';
 
-var StatusIndicator = {"sui-status-indicator-root":"sui-status-indicator-root","sui-status-indicator-large":"sui-status-indicator-large","sui-status-indicator-medium":"sui-status-indicator-medium","sui-status-indicator-dnd":"sui-status-indicator-dnd","sui-status-indicator-busy":"sui-status-indicator-busy","sui-status-indicator-available":"sui-status-indicator-available","sui-status-indicator-unavailable":"sui-status-indicator-unavailable"};
+var StatusIndicator = {"sui-status-indicator-root":"sui-status-indicator-root","sui-status-indicator-large":"sui-status-indicator-large","sui-status-indicator-medium":"sui-status-indicator-medium","sui-status-indicator-small":"sui-status-indicator-small","sui-icon":"sui-icon","sui-status-indicator-dnd":"sui-status-indicator-dnd","sui-status-indicator-busy":"sui-status-indicator-busy","sui-status-indicator-available":"sui-status-indicator-available","sui-status-indicator-unavailable":"sui-status-indicator-unavailable"};
 
 export { StatusIndicator as statusIndicatorStyle };

package/StepButton.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, cloneElement } from 'react';
-import { useButton } from '@mui/base';
-import { useClasses, isSuiElement, combineProps } from '@ringcentral/spring-base';
+import { useClasses, useButton, isSuiElement, combineProps } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { b as useStepperContext, u as useStepContext } from './chunks/StepperContext.js';
 import { S as StepLabel } from './chunks/StepLabel.js';
@@ -34,7 +33,7 @@ const StepButton = forwardRef((inProps, ref) => {
             active,
             highlighted: activeStep && variant === 'outlined',
             'hide-connector': !connector,
-        }), ...getRootProps(), ...rest, ref: ref, children: child }));
+        }), ...getRootProps(rest), ref: ref, children: child }));
 });
 StepButton.displayName = 'SuiStepButton';
 

package/StepContent.js

@@ -16,9 +16,7 @@ const StepContent = forwardRef((inProps, ref) => {
     const cls = useClasses('step-content', classes, className);
     const { orientation } = useStepperContext();
     const { disabled, active, last, expanded: expandedProp, connector, id, } = useStepContext();
-    const expandedTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const collapsedTransition = useMotionSafeTransition(motionTransition['spring-01-slow']);
-    const collapsedHeightTransition = useMotionSafeTransition(motionTransition['haste-01-slow']);
+    const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
     if (process.env.NODE_ENV !== 'production' && orientation !== 'vertical') {
         logInDev({
             scope: 'AvatarGroup',
@@ -31,16 +29,13 @@ const StepContent = forwardRef((inProps, ref) => {
     const keepAlive = keepMounted && isEverShown;
     const motionVariants = {
         expanded: {
-            transition: expandedTransition,
+            transition,
             opacity: 1,
             height: 'auto',
             paddingTop: 12,
         },
         collapsed: {
-            transition: {
-                ...collapsedTransition,
-                height: collapsedHeightTransition,
-            },
+            transition,
             opacity: 0,
             height: 0,
             paddingTop: 0,

package/SubMenu.js

@@ -82,7 +82,6 @@ const SubMenu = forwardRef((inProps, ref) => {
     const shouldKeepMenu = (() => {
         if (!open)
             return false;
-        // Check `menuMounted` to ensure the state of menu is correct
         if (open && !menuMounted)
             return true;
         let shouldKeepMenu = false;
@@ -123,13 +122,10 @@ const SubMenu = forwardRef((inProps, ref) => {
                     }
                 }, ...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);
-                    // eslint-disable-next-line @typescript-eslint/no-empty-function
                     return () => { };
                 }, onKeyDown: (e) => {
                     if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
-                        // make sure target is real dom child
                         e.currentTarget.contains(e.target)) {
-                        // If Escape key is pressed, stop propagation to prevent parent menus from closing
                         if (e.key === 'Escape') {
                             e.stopPropagation();
                         }