@ringcentral/spring-ui 1.9.3 → 1.11.1

package/NestedMenuContext.js

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 export { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
 
 const useNestedChildMenu = (props) => {
-    const { open, closeMenu, id } = props;
+    const { open, closeMenu, getAnchorElement, id } = props;
     const context = useNestedMenuContext();
     const { registOpenedSubMenu } = context ?? {};
     const closeMenuMemo = useEventCallback((options) => closeMenu(options));
@@ -13,11 +13,12 @@ const useNestedChildMenu = (props) => {
         if (open) {
             return registOpenedSubMenu?.({
                 anchorId: id,
+                getAnchorElement,
                 closeSubMenu: closeMenuMemo,
             });
         }
         return undefined;
-    }, [closeMenuMemo, id, open, registOpenedSubMenu]);
+    }, [closeMenuMemo, getAnchorElement, id, open, registOpenedSubMenu]);
 };
 
 export { useNestedChildMenu, useNestedMenuContext };

package/Option.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useMenuItemSelectContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
+import { u as useMenuItemSelectContext, M as MenuItem, g as composeEventHandlers } from './chunks/useMenuItemSelect.js';
 import '@ringcentral/spring-base';
 import 'tabbable';
 import './chunks/useListNavigation.js';
@@ -36,10 +36,10 @@ const Option = forwardRef((inProps, ref) => {
     }
     const { handleSelect, getMenuItemProps } = selectContextValue;
     const autoClose = autoCloseProp ?? selectContextValue.selectMode === 'single';
-    return (jsx(MenuItem, { ...getMenuItemProps(value), ...rest, onClick: (e) => {
-            onClickProp?.(e);
-            handleSelect(value);
-        }, ref: ref, autoClose: autoClose, children: children }));
+    const onClick = composeEventHandlers(onClickProp, () => {
+        handleSelect(value);
+    });
+    return (jsx(MenuItem, { ...getMenuItemProps(value), ...rest, onClick: onClick, ref: ref, autoClose: autoClose, children: children }));
 });
 Option.displayName = 'SuiOption';
 

package/PickerTextField.js

@@ -16,12 +16,12 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
+import './chunks/useHelperTextId.js';
+import 'clsx';
 import './chunks/TextField.js';
 import '@ringcentral/spring-icon';
 import './chunks/ShowHideEye.js';
 import './chunks/useMotionSafeTransition.js';
-import './chunks/useHelperTextId.js';
-import 'clsx';
 import './chunks/IconButtonLabel.js';
 import './chunks/Squircle.js';
 import './chunks/withTooltip.js';

package/Popper.js

@@ -17,7 +17,7 @@ const getArrowSide = (placement) => ({
     right: 'left',
     bottom: 'top',
     left: 'right',
-}[placement.split('-')[0]]);
+})[placement.split('-')[0]];
 const Popper = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Popper' });
     const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, container: containerProp, disablePortal, ...rest } = props;

package/Snackbar.js

@@ -3,7 +3,7 @@ import { useTheme, useThemeProps } from '@ringcentral/spring-theme';
 import { useMemo, forwardRef, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { Portal } from '@mui/base';
-import { A as Alert } from './chunks/Alert.js';
+import { a as Alert } from './chunks/Alert.js';
 import '@ringcentral/spring-icon';
 import 'clsx';
 import './chunks/Icon.js';
@@ -78,18 +78,20 @@ const Snackbar = forwardRef((inProps, ref) => {
     const content = useMemo(() => {
         if (!children)
             return null;
-        const isSnackbarContent = isValidElement(children) && children.type === SnackbarContent;
+        const isSnackbarContent = isValidElement(children) &&
+            children.type === SnackbarContent;
         if (!isSnackbarContent) {
             return (jsx(SnackbarContent, { ...rest, classes: classes, className: className, ref: ref, onClose: closeButton ? onClose : undefined, children: children }));
         }
+        const childProps = children.props;
         return cloneElement(children, {
             ...rest,
             classes,
             className,
-            ...(children.props || {}),
+            ...childProps,
             ref,
-            onClose: 'onClose' in children.props
-                ? children.props.onClose
+            onClose: 'onClose' in childProps
+                ? childProps.onClose
                 : closeButton
                     ? onClose
                     : undefined,

package/SortableListDndContext.js

@@ -1,4 +1,4 @@
-import { useDndContext, KeyboardCode, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from '@dnd-kit/core';
+import { useDndContext, KeyboardCode, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { ownerDocument } from '@ringcentral/spring-base';
 import { useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -38,9 +38,9 @@ const SortableListDndContext = (inProps) => {
         props: inProps,
         name: 'SortableListDndContext',
     });
-    const { children, ...rest } = props;
+    const { children, collisionDetection = closestCenter, ...rest } = props;
     const sensors = useSensors(useSensor(PointerSensor, pointerSensorOpts), useSensor(KeyboardSensor, keyboardSensorOpts));
-    return (jsxs(DndContext, { sensors: sensors, ...rest, children: [jsx(DndKeyboardBlocker, {}), children] }));
+    return (jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, ...rest, children: [jsx(DndKeyboardBlocker, {}), children] }));
 };
 SortableListDndContext.displayName = 'SortableListDndContext';
 

package/SortableListItem.js

@@ -1,13 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useForkRef, combineProps } from '@ringcentral/spring-base';
+import { useForkRef, combineProps, useWindowContext } from '@ringcentral/spring-base';
 import { forwardRef } from 'react';
-import '@ringcentral/spring-theme';
+import { useTheme } from '@ringcentral/spring-theme';
 import 'framer-motion';
 import './chunks/Icon.js';
 import { L as ListItem } from './chunks/ListItem.js';
 import { useDndContext, DragOverlay } from '@dnd-kit/core';
+import { Portal } from '@mui/base';
 import './chunks/Divider.js';
 import './ListNavigation.js';
 import './chunks/useListNavigation.js';
@@ -52,16 +53,27 @@ const SortableListItem = forwardRef((props, ref) => {
 });
 SortableListItem.displayName = 'SuiSortableListItem';
 
+const overlayVisualOnlyProps = {
+    'aria-hidden': true,
+    inert: '',
+};
+const SORTABLE_LIST_ITEM_OVERLAY_Z_INDEX = 1500;
 const SortableListItemOverlay = forwardRef((props, ref) => {
     const { children, OverlayProps, ...rest } = props;
+    const { style: overlayStyle, zIndex: overlayZIndex, ...overlayProps } = OverlayProps ?? {};
     const { active, activatorEvent } = useDndContext();
-    return (jsx(DragOverlay, { ...OverlayProps, style: {
-            pointerEvents: activatorEvent instanceof PointerEvent &&
-                activatorEvent.pointerType === 'mouse'
-                ? 'none'
-                : 'auto',
-            touchAction: 'none',
-        }, children: active && (jsx(ListItem, { ...rest, ref: ref, dragged: true, tabIndex: undefined, children: typeof children === 'function' ? children(active.id) : children })) }));
+    const { document } = useWindowContext();
+    const { scopeProps } = useTheme();
+    const isMousePointerActivator = activatorEvent != null &&
+        'pointerType' in activatorEvent &&
+        activatorEvent.pointerType === 'mouse';
+    return (jsx(Portal, { container: document?.body, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx(DragOverlay, { ...overlayProps, zIndex: overlayZIndex ?? SORTABLE_LIST_ITEM_OVERLAY_Z_INDEX, style: {
+                    ...overlayStyle,
+                    pointerEvents: isMousePointerActivator ? 'none' : 'auto',
+                    touchAction: 'none',
+                }, children: active && (jsx(ListItem, { ...rest, ref: ref, dragged: true, ...overlayVisualOnlyProps, tabIndex: undefined, children: typeof children === 'function'
+                        ? children(active.id)
+                        : children })) }) }) }));
 });
 SortableListItemOverlay.displayName = 'SortableListItemOverlay';
 

package/SplitButton.js

@@ -66,7 +66,7 @@ const SplitButton = withTooltip(forwardRef((inProps, ref) => {
         setOpen(newOpen);
     });
     const { getButtonProps, getListboxProps } = useSelect({
-        open: false,
+        open,
         handleOpen,
     });
     const handleMenuClose = useEventCallback(() => {

package/SubMenu.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { useClasses, useForkRef, useHover, useFocusVisible, useId, useOnLayoutReRender } from '@ringcentral/spring-base';
+import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
+import { useClasses, useWindowContext, useForkRef, useId, useFocusVisible, useEventCallback } from '@ringcentral/spring-base';
 import { a as useNestedParentMenu, N as NestedMenuContext } from './chunks/useNestedParentMenu.js';
 import { Popper } from './Popper.js';
 import { CaretRightMd } from '@ringcentral/spring-icon';
@@ -9,7 +9,7 @@ import { I as Icon } from './chunks/Icon.js';
 import { S as SubMenuTriggerNestedIdContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
 import 'tabbable';
 import './chunks/useListNavigation.js';
-import './chunks/Menu.js';
+import { b as useMenuOverlayGroupContext } from './chunks/Menu.js';
 import './VirtualizedList.js';
 import { useNestedChildMenu } from './NestedMenuContext.js';
 import { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
@@ -32,96 +32,237 @@ import './chunks/List.js';
 var PopperMenu$1 = {"sui-popper-menu-root":"sui-popper-menu-root","sui-popper-menu-paper":"sui-popper-menu-paper"};
 
 const PopperMenu = forwardRef((props, ref) => {
-    const { classes, children, actions, className, ...rest } = props;
+    const { classes, children, actions, className, onClickCapture, onPointerMove, ...rest } = props;
     const cls = useClasses('popper-menu', classes, className);
-    const { contextValue } = useNestedParentMenu({
+    const { contentClickHandlers, contentPointerHandlers, contextValue } = useNestedParentMenu({
         open: true,
     });
-    return (jsx(Popper, { className: cls('root'), ...rest, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }));
+    return (jsx(Popper, { className: cls('root'), ...rest, onClickCapture: (event) => {
+            onClickCapture?.(event);
+            contentClickHandlers.onClickCapture(event);
+        }, onPointerMove: (event) => {
+            onPointerMove?.(event);
+            contentPointerHandlers.onPointerMove(event);
+        }, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }));
 });
 PopperMenu.displayName = 'SuiPopperMenu';
 
+const useSubMenuInteractionState = ({ open, focusVisibleWithin, isPointerGraceActive, clearPointerGrace, }) => {
+    const [hasEnteredMenuContent, setHasEnteredMenuContent] = useState(false);
+    const [isPointerInsideTrigger, setIsPointerInsideTrigger] = useState(false);
+    const resetInteractionState = useCallback(() => {
+        setHasEnteredMenuContent(false);
+        setIsPointerInsideTrigger(false);
+    }, []);
+    const markTriggerPointerMoved = useCallback(() => {
+        setIsPointerInsideTrigger(true);
+        setHasEnteredMenuContent(false);
+    }, []);
+    const markTriggerPointerLeft = useCallback(() => {
+        setIsPointerInsideTrigger(false);
+        setHasEnteredMenuContent(false);
+    }, []);
+    const markMenuContentEntered = useCallback(() => {
+        setHasEnteredMenuContent(true);
+        clearPointerGrace();
+    }, [clearPointerGrace]);
+    const shouldKeepSubMenuOpen = isPointerInsideTrigger ||
+        hasEnteredMenuContent ||
+        focusVisibleWithin ||
+        isPointerGraceActive;
+    useEffect(() => {
+        if (!open) {
+            resetInteractionState();
+        }
+    }, [open, resetInteractionState]);
+    return {
+        markTriggerPointerLeft,
+        markTriggerPointerMoved,
+        markMenuContentEntered,
+        resetInteractionState,
+        shouldKeepSubMenuOpen,
+    };
+};
+
+const POINTER_GRACE_TIMEOUT = 300;
+const POINTER_GRACE_BLEED = 5;
+const getSubMenuSide = (anchorRect, menuRect) => {
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const menuCenterX = menuRect.left + menuRect.width / 2;
+    return menuCenterX >= anchorCenterX ? 'right' : 'left';
+};
+const getPointerGraceIntent = (event, menuRect, side) => {
+    const bleed = side === 'right' ? -POINTER_GRACE_BLEED : POINTER_GRACE_BLEED;
+    const contentNearEdge = menuRect[side === 'right' ? 'left' : 'right'];
+    const contentFarEdge = menuRect[side === 'right' ? 'right' : 'left'];
+    return {
+        area: [
+            { x: event.clientX + bleed, y: event.clientY },
+            { x: contentNearEdge, y: menuRect.top },
+            { x: contentFarEdge, y: menuRect.top },
+            { x: contentFarEdge, y: menuRect.bottom },
+            { x: contentNearEdge, y: menuRect.bottom },
+        ],
+        side,
+    };
+};
+const useSubMenuPointerGrace = (props) => {
+    const { isPointerMovingToSubMenu, onPointerGraceIntentChange } = props;
+    const { externalWindow, globalThis: contextGlobal } = useWindowContext();
+    const contextWindow = externalWindow ?? contextGlobal;
+    const [isPointerGraceActive, setIsPointerGraceActive] = useState(false);
+    const timerRef = useRef();
+    const clearPointerGrace = useCallback(() => {
+        contextWindow.clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+        setIsPointerGraceActive(false);
+        onPointerGraceIntentChange?.(null);
+    }, [contextWindow, onPointerGraceIntentChange]);
+    const startPointerGrace = useCallback((event, anchorElement, menuElement) => {
+        if (!anchorElement || !menuElement) {
+            clearPointerGrace();
+            return;
+        }
+        const menuRect = menuElement.getBoundingClientRect();
+        if (menuRect.width === 0 || menuRect.height === 0) {
+            clearPointerGrace();
+            return;
+        }
+        const side = getSubMenuSide(anchorElement.getBoundingClientRect(), menuRect);
+        const intent = getPointerGraceIntent(event, menuRect, side);
+        const shouldActivateGrace = isPointerMovingToSubMenu?.(event, intent) ?? true;
+        contextWindow.clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+        if (!shouldActivateGrace) {
+            clearPointerGrace();
+            return;
+        }
+        onPointerGraceIntentChange?.(intent);
+        setIsPointerGraceActive(true);
+        timerRef.current = contextWindow.setTimeout(clearPointerGrace, POINTER_GRACE_TIMEOUT);
+    }, [
+        clearPointerGrace,
+        contextWindow,
+        isPointerMovingToSubMenu,
+        onPointerGraceIntentChange,
+    ]);
+    useEffect(() => {
+        return clearPointerGrace;
+    }, [clearPointerGrace]);
+    return {
+        isPointerGraceActive,
+        clearPointerGrace,
+        startPointerGrace,
+    };
+};
+
+const isSubMenuNavigationOpenEvent = (event) => ['ArrowRight'].includes(event.key);
+const isSubMenuKeyboardActivationEvent = (event) => (event.type === 'keydown' && event.key === 'Enter') ||
+    (event.type === 'keyup' && event.key === ' ');
 const SubMenu = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'SubMenu' });
-    const { classes, children, itemContent, onKeyDown: onKeyDownProp, ...rest } = props;
-    const [menuMounted, setMenuMounted] = useState(false);
+    const { classes, children, itemContent, onClick: onClickProp, onKeyDown: onKeyDownProp, onPointerLeave: onPointerLeaveProp, onPointerMove: onPointerMoveProp, disabled, ...rest } = props;
     const [anchor, setAnchor] = useState(null);
     const itemRef = useRef(null);
     const handleRef = useForkRef(itemRef, ref);
+    const menuRef = useRef(null);
     const open = Boolean(anchor);
-    const restoreFocusOnCloseRef = useRef(false);
-    const closeSubMenu = (options) => {
-        restoreFocusOnCloseRef.current = options?.restoreFocus === true;
-        setAnchor(null);
-    };
-    const { hover: anchorHover, hoverHandlers: anchorHoverHandlers } = useHover({
-        disableReactTree: false,
-        onMouseEnter: (e) => {
-            setAnchor(e.currentTarget);
-        },
+    const id = useId();
+    const { isPointerMovingToSubMenu, onPointerGraceIntentChange } = useNestedMenuItem({ id });
+    const { isPointerGraceActive, clearPointerGrace, startPointerGrace } = useSubMenuPointerGrace({
+        isPointerMovingToSubMenu,
+        onPointerGraceIntentChange,
     });
-    const anchorHoverEverRef = useRef(false);
-    if (anchorHoverEverRef.current !== true) {
-        anchorHoverEverRef.current = anchorHover;
-    }
-    const { hover: menuHover, hoverHandlers: menuHoverHandlers } = useHover();
-    const menuHoverEverRef = useRef(false);
-    if (menuHoverEverRef.current !== true) {
-        menuHoverEverRef.current = menuHover;
-    }
     const { focusVisibleWithin, focusVisibleHandlers } = useFocusVisible({
         within: true,
     });
-    const id = useId();
-    useNestedMenuItem({ hovered: anchorHover, id });
+    const { markTriggerPointerLeft, markTriggerPointerMoved, markMenuContentEntered, resetInteractionState, shouldKeepSubMenuOpen, } = useSubMenuInteractionState({
+        open,
+        focusVisibleWithin,
+        isPointerGraceActive,
+        clearPointerGrace,
+    });
+    const closeSubMenu = useEventCallback((options) => {
+        if (options?.restoreFocus) {
+            itemRef.current?.focus();
+        }
+        clearPointerGrace();
+        resetInteractionState();
+        setAnchor(null);
+    });
+    const overlayGroupContext = useMenuOverlayGroupContext();
+    const overlayContainer = overlayGroupContext?.container;
+    const handleTriggerPointerMove = (event) => {
+        onPointerMoveProp?.(event);
+        if (event.pointerType !== 'mouse' || event.defaultPrevented || disabled) {
+            return;
+        }
+        if (open) {
+            markTriggerPointerMoved();
+            return;
+        }
+        markTriggerPointerMoved();
+        clearPointerGrace();
+        setAnchor(event.currentTarget);
+    };
+    const handleTriggerPointerLeave = (event) => {
+        onPointerLeaveProp?.(event);
+        if (event.pointerType === 'mouse') {
+            markTriggerPointerLeft();
+            startPointerGrace(event, itemRef.current, menuRef.current);
+        }
+    };
+    const openSubMenuFromTrigger = (trigger) => {
+        markMenuContentEntered();
+        setAnchor(trigger);
+    };
+    const getAnchorElement = useCallback(() => itemRef.current, []);
     useNestedChildMenu({
         open,
-        closeMenu: (options) => closeSubMenu(options),
+        closeMenu: closeSubMenu,
+        getAnchorElement,
         id,
     });
-    const shouldKeepMenu = (() => {
-        if (!open)
-            return false;
-        if (!menuMounted)
-            return true;
-        if (focusVisibleWithin)
-            return true;
-        return menuHover || anchorHover;
-    })();
     useEffect(() => {
-        if (!shouldKeepMenu) {
+        if (!open)
+            return;
+        if (!shouldKeepSubMenuOpen) {
             closeSubMenu();
         }
-    }, [shouldKeepMenu]);
-    useOnLayoutReRender(() => {
-        const restoreFocus = restoreFocusOnCloseRef.current;
-        if (!open) {
-            restoreFocus && itemRef.current?.focus();
-            restoreFocusOnCloseRef.current = false;
-        }
-    }, [open]);
-    useEffect(() => {
-        if (!open) {
-            setMenuMounted(false);
-            menuHoverEverRef.current = false;
-            anchorHoverEverRef.current = false;
-        }
-    }, [open]);
-    return (jsxs(Fragment, { children: [jsx(SubMenuTriggerNestedIdContext.Provider, { value: id, children: jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
+    }, [closeSubMenu, open, shouldKeepSubMenuOpen]);
+    return (jsxs(Fragment, { children: [jsx(SubMenuTriggerNestedIdContext.Provider, { value: id, children: jsxs(MenuItem, { "aria-haspopup": "menu", ...rest, "aria-expanded": open, autoClose: false, disabled: disabled, onKeyDown: (e) => {
+                        if (disabled) {
+                            return;
+                        }
                         onKeyDownProp?.(e);
-                        if (e.key === 'ArrowRight') {
-                            setAnchor(e.currentTarget);
+                        if (e.defaultPrevented) {
+                            return;
                         }
-                    }, ...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 (isSubMenuNavigationOpenEvent(e)) {
+                            openSubMenuFromTrigger(e.currentTarget);
+                        }
+                    }, onClick: (e) => {
+                        if (disabled) {
+                            return;
+                        }
+                        onClickProp?.(e);
+                        if (e.defaultPrevented) {
+                            return;
+                        }
+                        if (isSubMenuKeyboardActivationEvent(e)) {
+                            openSubMenuFromTrigger(e.currentTarget);
+                        }
+                    }, onPointerMove: handleTriggerPointerMove, onPointerLeave: handleTriggerPointerLeave, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }) }), open && (jsx(PopperMenu, { anchorEl: anchor, container: overlayContainer ?? undefined, disablePortal: overlayContainer ? false : undefined, placement: "right-start", offset: -4, ref: menuRef, onKeyDown: (e) => {
                     if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
                         e.currentTarget.contains(e.target)) {
                         e.stopPropagation();
                         closeSubMenu({ restoreFocus: true });
                     }
-                }, ...menuHoverHandlers, ...focusVisibleHandlers, children: children }))] }));
+                }, onPointerMove: (event) => {
+                    if (event.pointerType === 'mouse') {
+                        markMenuContentEntered();
+                    }
+                }, ...focusVisibleHandlers, children: children }))] }));
 });
 SubMenu.displayName = 'SuiSubMenu';
 

package/SwipeableDrawer.js

@@ -392,15 +392,7 @@ function useDrawerGestures(options) {
         heightRef.current = safeInitial;
         animationRef.current = animate(heightMotionValue, safeInitial, SPRING_CONFIG);
         didInitRef.current = true;
-    }, [
-        open,
-        ready,
-        isContentPresent,
-        defaultSnap,
-        minSnap,
-        heightMotionValue,
-        lastSnapRef.current,
-    ]);
+    }, [open, ready, isContentPresent, defaultSnap, minSnap, heightMotionValue]);
     useLayoutEffect(() => {
         if (!open || !ready || !isContentPresent)
             return;

package/Switch.js

@@ -1,18 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useLayoutEffect } from 'react';
 import { useSwitch } from '@mui/base';
-import { useClasses, useForkRef } from '@ringcentral/spring-base';
+import { useClasses, useForkRef, combineProps } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { u as useFormLabel } from './chunks/FormLabel.js';
+import { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
+import 'clsx';
 
 var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-focus-visible","sui-switch-track":"sui-switch-track","sui-switch-dot":"sui-switch-dot","sui-switch-input":"sui-switch-input","sui-checked":"sui-checked"};
 
 const Switch = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Switch' });
-    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, loading = false, loadingProps, ...rest } = props;
     const cls = useClasses('switch', classes, className);
+    const isDisabled = loading ? true : disabledProp;
     const { disabled, id } = useFormLabel({
-        disabled: disabledProp,
+        disabled: isDisabled,
         id: inputPropsProp?.id,
     });
     const { getInputProps, focusVisible, checked } = useSwitch({
@@ -25,7 +28,10 @@ const Switch = forwardRef((inProps, ref) => {
         onFocusVisible,
         required,
     });
-    const inputProps = getInputProps({ role: undefined, ...inputPropsProp });
+    const inputProps = getInputProps({
+        role: 'switch',
+        ...inputPropsProp,
+    });
     const inputRef = useRef();
     const forkRef = useForkRef(inputRefProp, inputProps.ref, inputRef);
     useLayoutEffect(() => {
@@ -33,7 +39,11 @@ const Switch = forwardRef((inProps, ref) => {
             inputRef.current?.focus();
         }
     }, []);
-    return (jsxs("span", { ...rootProps, ...rest, className: cls('root', { focusVisible }), ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
+    return (jsxs("span", { ...rootProps, ...rest, className: cls('root', { focusVisible }), ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot'), children: loading && (jsx(CircularProgressIndicator, { ...combineProps({
+                        variant: 'indeterminate',
+                        size: 'small',
+                        color: 'primary',
+                    }, loadingProps) })) })] }));
 });
 Switch.displayName = 'SuiSwitch';
 

package/TablePagination.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses, useEventCallback, combineProps } from '@ringcentral/spring-base';
+import { combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { forwardRef } from 'react';
@@ -40,13 +40,17 @@ import './chunks/useHelperTextId.js';
 import './chunks/MenuList.js';
 import './chunks/VirtualizedMenu.js';
 
-var TablePagination$1 = {"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-rows-per-page-controls":"sui-table-pagination-rows-per-page-controls","sui-table-pagination-rows-per-page-label":"sui-table-pagination-rows-per-page-label","sui-table-pagination-current-page-controls":"sui-table-pagination-current-page-controls","sui-table-pagination-range-container":"sui-table-pagination-range-container"};
+var TablePagination$1 = {"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-selector":"sui-table-pagination-selector","sui-table-pagination-rows-per-page-controls":"sui-table-pagination-rows-per-page-controls","sui-table-pagination-rows-per-page-label":"sui-table-pagination-rows-per-page-label","sui-table-pagination-current-page-controls":"sui-table-pagination-current-page-controls","sui-table-pagination-range-container":"sui-table-pagination-range-container"};
 
 const TablePagination = forwardRef((inProps, ref) => {
-    const { classes, className, component: Root = 'td', colSpan = 1000, page, variant = 'range', count = -1, rowsPerPage = 10, rowsPerPageLabel = 'Rows per page', rowsPerPageOptions = [10, 25, 50, 100], onRowsPerPageChange, rangeSeparatorLabel = 'of', previousPageButtonProps, nextPageButtonProps, onPageChange, ...rest } = useThemeProps({
+    const { classes, className, component: Root = 'td', colSpan = 1000, page, variant = 'range', count = -1, rowsPerPage = 10, rowsPerPageLabel = 'Rows per page', rowsPerPageOptions = [10, 25, 50, 100], onRowsPerPageChange, rangeSeparatorLabel = 'of', previousPageButtonProps, nextPageButtonProps, selectorProps, MenuProps, onPageChange, ...rest } = useThemeProps({
         props: inProps,
         name: 'TablePagination',
     });
+    const mergedSelectMenuProps = combineProps({
+        PopperProps: { matchAnchorWidth: false },
+        classes: { paper: 'min-w-16' },
+    }, MenuProps);
     const rootProps = {
         ...rest,
     };
@@ -89,25 +93,11 @@ const TablePagination = forwardRef((inProps, ref) => {
         onRowsPerPageChange?.(e, child);
     });
     return (jsx(Root, { className: cls('root'), ...rootProps, ref: ref, children: jsxs("div", { className: cls('content'), children: [variant === 'page-size' && (jsxs("div", { className: cls('rows-per-page-controls'), children: [jsx("span", { className: cls('rows-per-page-label'), children: rowsPerPageLabel }), jsx(Select, { value: rowsPerPage, variant: "outlined", size: "medium", classes: {
-                                selector: 'min-w-16',
-                            }, MenuProps: {
-                                PopperProps: {
-                                    matchAnchorWidth: false,
-                                },
-                                classes: {
-                                    paper: 'min-w-16',
-                                },
-                            }, onChange: handleRowsPerPageChange, children: rowsPerPageOptions?.map((option) => (jsx(Option, { value: option, children: jsx(MenuItemText, { children: option }) }, option))) })] })), jsxs("div", { className: cls('range-container'), children: [variant === 'select-page' && (jsx(Select, { value: page, variant: "outlined", size: "medium", classes: {
+                                selector: cls('selector'),
+                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, onChange: handleRowsPerPageChange, children: rowsPerPageOptions?.map((option) => (jsx(Option, { value: option, children: jsx(MenuItemText, { children: option }) }, option))) })] })), jsxs("div", { className: cls('range-container'), children: [variant === 'select-page' && (jsx(Select, { value: page, variant: "outlined", size: "medium", classes: {
                                 content: 'mr-0.5',
-                                selector: 'min-w-16',
-                            }, MenuProps: {
-                                PopperProps: {
-                                    matchAnchorWidth: false,
-                                },
-                                classes: {
-                                    paper: 'min-w-16',
-                                },
-                            }, renderValue: (value) => value + 1, onChange: handleSelectPageChange, children: Array(totalPages)
+                                selector: cls('selector'),
+                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, renderValue: (value) => value + 1, onChange: handleSelectPageChange, children: Array(totalPages)
                                 .fill(totalPages)
                                 .map((_, i) => (jsx(Option, { value: i, children: jsx(MenuItemText, { children: i + 1 }) }, i))) })), showRowRange && jsx("span", { children: `${startOfRange}-${endOfRange}` }), jsx("span", { children: rangeSeparatorLabel }), jsx("span", { children: total })] }), jsxs("div", { className: cls('current-page-controls'), children: [jsx(IconButton, { shape: "squircle", color: "secondary", variant: "contained", size: "small", symbol: CaretLeftMd, background: false, disabled: !hasPreviousPage, ...combineProps({
                                 onClick: handlePreviousPageButtonClick,

package/TableRow.js

@@ -13,7 +13,7 @@ const TableRow = forwardRef((inProps, ref) => {
     const cls = useClasses('table-row', classes, className);
     const tablelvl2 = useTablelvl2Context();
     const variant = (tablelvl2 && tablelvl2.variant) || 'body';
-    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const clickable = clickableProp !== false && rest.onClick ? true : (clickableProp ?? false);
     const { getRootProps, focusVisible, active } = useButton({
         ...props,
         disabled: !clickable,