@ringcentral/spring-ui 1.7.0 → 1.8.0

package/TableRow.js

@@ -22,7 +22,6 @@ const TableRow = forwardRef((inProps, ref) => {
         rootRef: ref,
     });
     const rootProps = getRootProps();
-    // Determine the appropriate role
     const role = roleProp ?? (TableRowRoot !== defaultComponent ? 'row' : undefined);
     return (jsx(TableRowRoot, { className: cls('root', variant, {
             hoverable,

package/Tabs.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useState, useMemo, useRef, Children, isValidElement,
 import { useTab, useTabsList, TabsListProvider } from '@mui/base';
 import { useClasses, combineClasses, getTitle, useFontLoaded, useWindowContext, logInDev, usePrevious, useEventCallback, useOnReRender, useForkRef } from '@ringcentral/spring-base';
 import { OverflowMd, CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
+import { useMode, motionTransition, useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { B as Badge } from './chunks/Badge.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import { M as Menu } from './chunks/Menu.js';
@@ -15,7 +16,6 @@ import { M as MenuList } from './chunks/MenuList.js';
 import { T as Tooltip } from './chunks/Tooltip.js';
 import { u as useTabsContext, T as TabsContext } from './chunks/TabsContext.js';
 import { animate, useMotionValue, motion } from 'framer-motion';
-import { motionTransition, useThemeProps } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
 import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
 import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
@@ -49,20 +49,19 @@ const TabMenuItem = forwardRef((props, ref) => {
         ...rest,
         rootRef: ref,
     });
-    return (
-    // @ts-ignore
-    jsx(MenuItemComponent, { ...props, ...getRootProps(), onKeyDown: onKeyDown, children: jsx(MenuItemText, { children: label }) }));
+    return (jsx(MenuItemComponent, { ...props, ...getRootProps(), onKeyDown: onKeyDown, children: jsx(MenuItemText, { children: label }) }));
 });
 const TabMoreMenu = forwardRef((props, ref) => {
     const { classes, className, menuItems, TooltipProps, BadgeProps, ButtonProps, MenuProps, MenuItemComponent, ...rest } = props;
     const [anchor, setAnchor] = useState(null);
+    const { mode } = useMode();
     const cls = useClasses('tab-more-menu', classes, className);
     const { pill } = useTabsContext();
     const iconButtonProps = useMemo(() => (pill
         ? {
             shape: 'circular',
             variant: 'outlined',
-            size: 'large',
+            size: mode === 'compact' ? 'medium' : 'large',
             background: true,
         }
         : {
@@ -70,7 +69,7 @@ const TabMoreMenu = forwardRef((props, ref) => {
             variant: 'contained',
             size: 'small',
             background: false,
-        }), [pill]);
+        }), [pill, mode]);
     let iconButtonClasses = {
         root: cls('button'),
     };
@@ -104,6 +103,7 @@ TabMoreMenu.displayName = 'SuiTabMoreMenu';
 
 const TabScrollButton = forwardRef((props, ref) => {
     const { classes, className, ButtonProps, direction = 'left', onClick, ...rest } = props;
+    const { mode } = useMode();
     const cls = useClasses('tab-scroll-button', classes, className);
     const iconButtonClasses = useMemo(() => {
         let combinedClasses = {
@@ -115,13 +115,15 @@ const TabScrollButton = forwardRef((props, ref) => {
         return combinedClasses;
     }, [ButtonProps?.classes, cls]);
     const icon = direction === 'left' ? CaretLeftMd : CaretRightMd;
+    const iconButtonSize = useMemo(() => {
+        return mode === 'compact' ? 'medium' : 'large';
+    }, [mode]);
     return (jsx("div", { className: cls('root', {
             start: direction === 'left',
-        }), ref: ref, ...rest, children: jsx(IconButton, { "aria-hidden": "true", role: "presentation", tabIndex: -1, component: "div", color: "secondary", symbol: icon, shape: "circular", variant: "outlined", size: "large", background: true, onClick: onClick, ...ButtonProps, classes: iconButtonClasses }) }));
+        }), ref: ref, ...rest, children: jsx(IconButton, { "aria-hidden": "true", role: "presentation", tabIndex: -1, component: "div", color: "secondary", symbol: icon, shape: "circular", variant: "outlined", size: iconButtonSize, background: true, onClick: onClick, ...ButtonProps, classes: iconButtonClasses }) }));
 });
 TabScrollButton.displayName = 'SuiTabScrollButton';
 
-/* eslint-disable sonarjs/cognitive-complexity */
 function useComputedTabs(props) {
     const { variant, value, children, pill, pillGap, onGroupInfoUpdate, floatingUnderlineLeftMotionValue, floatingUnderlineWidthMotionValue, tabListRef, scrollerRef, moreRef, } = props;
     const fontsLoaded = useFontLoaded(variant === 'moreMenu');
@@ -129,15 +131,12 @@ function useComputedTabs(props) {
     const { externalWindow } = useWindowContext();
     const ResizeObserverClass = (externalWindow || window).ResizeObserver;
     const [moreMenuItems, setMoreMenuItems] = useState([]);
-    // Render the more button initially to get the offsetWidth to compute
     const [showMore, setShowMore] = useState(variant === 'moreMenu');
     const moreBtnWidth = useRef(0);
     const switchToMoreMenu = useRef(variant === 'moreMenu');
-    // Store a ref to visibleTabs and hiddenTabs for data comparison
     const visibleTabsRef = useRef();
     const hiddenTabsRef = useRef();
     const shouldUpdate = useRef(false);
-    // Cache children info to reduce render times when computing more menu
     const tabsChildrenCache = useRef();
     const { tabsInstanceId } = useInternalTabsContext();
     const processedChildren = useMemo(() => {
@@ -157,7 +156,6 @@ function useComputedTabs(props) {
                     });
                 }
                 const childValue = child.props.value === undefined ? childIndex : child.props.value;
-                // Only clone element when necessary: no user-provided id
                 let finalChild = child;
                 if (child.props.id === undefined) {
                     if (process.env.NODE_ENV !== 'production') {
@@ -197,10 +195,8 @@ function useComputedTabs(props) {
     }, [visibleTabs]);
     const prevChildren = usePrevious(() => children);
     const cacheTabsChildren = useEventCallback(() => {
-        // If this is a full update clear the cache
         if (shouldUpdate.current === 'full')
             tabsChildrenCache.current = new Map();
-        // We can't cache if the tabListRef is not available
         if (!tabListRef.current?.children || !tabsChildrenCache.current)
             return;
         const tabsChildren = tabListRef.current?.children;
@@ -209,7 +205,6 @@ function useComputedTabs(props) {
             if (!child || !childElement)
                 return;
             tabsChildrenCache.current?.set(childValue, {
-                // @ts-ignore
                 child,
                 element: childElement,
                 width: childElement.offsetWidth,
@@ -222,10 +217,6 @@ function useComputedTabs(props) {
             return undefined;
         let selectedIndex = -1;
         if (variant === 'moreMenu' && visibleTabsRef.current) {
-            /**
-             * When the variant is `moreMenu`, visibleTabs may have a different
-             * order than processed children as some tabs are hidden in the more menu.
-             */
             selectedIndex = Array.from(visibleTabsRef.current).findIndex(([key]) => {
                 return key === value;
             });
@@ -244,19 +235,17 @@ function useComputedTabs(props) {
                 ].join('\n'),
             });
         }
-        // provide the first tab as default selected tab when value is invalid
         return selectedTabElement || children[0];
     });
-    // main logic for computing whether show more menu when variant is 'moreMenu'
     const computeMoreMenuWithCache = useEventCallback(() => {
         if (variant !== 'moreMenu' || !tabsChildrenCache.current)
             return;
-        const width = scrollerRef.current?.offsetWidth || 0; // Includes padding
+        const width = scrollerRef.current?.offsetWidth || 0;
         const visibleWidth = width +
             pillGap -
-            (tabListRef.current ? getHorizontalPadding(tabListRef.current) : 0); // Excludes padding
+            (tabListRef.current ? getHorizontalPadding(tabListRef.current) : 0);
         const selectedItemWidth = (value !== null && tabsChildrenCache.current.get(value)?.width) || 0;
-        const spaceForMoreBtn = moreBtnWidth.current + pillGap; // more button needs left margin
+        const spaceForMoreBtn = moreBtnWidth.current + pillGap;
         let consumedWidth = spaceForMoreBtn;
         let isSelectedItemVisible = false;
         let noWidthForUnselectedTab = false;
@@ -267,70 +256,50 @@ function useComputedTabs(props) {
             const [key, itemInfo] = cache[i];
             const { child, width: itemWidth } = itemInfo;
             const width = itemWidth + pillGap;
-            /**
-             * If there's not enough space to accommodate an unselected tab and
-             * the tab isn't selected we'll hide it, aka put it in the more menu.
-             */
             if (noWidthForUnselectedTab && key !== value) {
                 hiddenItems.set(key, child);
                 continue;
             }
             if (isSelectedItemVisible) {
-                // Check if this is the last tab in the list
                 if (cache.length === i + 1) {
-                    // Check if there is enough space to accommodate the tab without the more button
                     if (visibleWidth >= consumedWidth - spaceForMoreBtn + width) {
-                        // There's enough space available, show the last tab
                         visibleItems.set(key, child);
                     }
                     else {
-                        // There's not enough space available, put the last item inside more menu
                         hiddenItems.set(key, child);
                     }
                 }
                 else {
-                    // The current item is not the last tab in the list
-                    // Check if there is enough space to accommodate this tab
                     if (visibleWidth >= consumedWidth + width) {
                         consumedWidth += width;
-                        // There's enough space available, show this tab in the list
                         visibleItems.set(key, child);
                     }
                     else {
-                        // There's not enoguh space available put the tab inside the more menu (hide it)
                         hiddenItems.set(key, child);
                         noWidthForUnselectedTab = true;
                     }
                 }
                 continue;
             }
-            // The selected tab is not visible yet. Check if the current tab is selected
             if (key === value) {
-                // Show the selected tab, it should never be inside the more menu
                 visibleItems.set(key, child);
-                // Check if the current tab is not the last one in the list, if it isn't we need to account for its width
                 if (cache.length !== i + 1)
                     consumedWidth += width;
                 isSelectedItemVisible = true;
                 continue;
             }
-            // The current tab is not selected. Check if there is enough space for the current tab, the selected tab and more button
             if (visibleWidth >= consumedWidth + width + selectedItemWidth) {
                 consumedWidth += width;
                 visibleItems.set(key, child);
                 continue;
             }
-            // There's not enough space available. Check if current tab immediately precedes the last selected tab
             const isSecondToLast = cache.length - 1 === i + 1;
-            // Check if there is enough space for the current tab and the last selected tab without the more button
             const hasSpaceForLast2Items = visibleWidth >=
                 consumedWidth - spaceForMoreBtn + width + selectedItemWidth;
             if (isSecondToLast && hasSpaceForLast2Items) {
-                // If it's second to last and has enough space, show the tab
                 visibleItems.set(key, child);
             }
             else {
-                // Otherwise hide the tab and put it in the more menu
                 hiddenItems.set(key, child);
                 noWidthForUnselectedTab = true;
             }
@@ -344,7 +313,6 @@ function useComputedTabs(props) {
         else {
             setShowMore(false);
         }
-        // @ts-ignore
         const newVisibleTabs = new Map();
         let childIndex = 0;
         for (const [childValue, child] of visibleItems.entries()) {
@@ -353,10 +321,8 @@ function useComputedTabs(props) {
         }
         setVisibleTabs(newVisibleTabs);
         shouldUpdate.current = false;
-        // Check if visibleTabs or hiddenTabs has changed
         if (!isEqual([...(visibleTabsRef.current?.keys() || [])], [...visibleItems.keys()]) ||
             !isEqual([...(hiddenTabsRef.current?.keys() || [])], [...hiddenItems.keys()])) {
-            // If it has changed, invoke onGroupInfoUpdate with the updated group data
             onGroupInfoUpdate?.([...visibleItems.keys()], [...hiddenItems.keys()]);
         }
         visibleTabsRef.current = visibleItems;
@@ -376,15 +342,12 @@ function useComputedTabs(props) {
             floatingUnderlineLeftMotionValue.set(targetLeft);
             return;
         }
-        // Only animate if either value has changed
         if (currentWidth !== targetWidth || currentLeft !== targetLeft) {
             const transition = motionTransition['spring-01-fast'];
             animate(floatingUnderlineWidthMotionValue, targetWidth, transition);
             animate(floatingUnderlineLeftMotionValue, targetLeft, transition);
         }
     });
-    // variant 'moreMenu', check if cache need to be updated when visibleTabs changed
-    // also need to update the cache when fonts are loaded after the initial mount
     useEffect(() => {
         if (variant !== 'moreMenu')
             return;
@@ -393,13 +356,11 @@ function useComputedTabs(props) {
         }
         if (tabsChildrenCache.current) {
             if (!shouldUpdate.current) {
-                // Check if the rendered visibleTabs have a different width than the cached tabs
                 for (const [childValue, { childIndex: index, child },] of visibleTabs.entries()) {
                     if (shouldUpdate.current || !child)
                         continue;
                     const cachedWidth = tabsChildrenCache.current?.get(childValue)?.width;
                     const childElement = tabListRef.current?.children[index];
-                    // If the cached width is different, we should perform a partial update
                     if (cachedWidth !== childElement.offsetWidth) {
                         shouldUpdate.current = 'partial';
                     }
@@ -410,7 +371,6 @@ function useComputedTabs(props) {
                 computeMoreMenuWithCache();
             }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visibleTabs, fontsLoaded]);
     useEffect(() => {
         if (prevChildren && children !== prevChildren) {
@@ -418,20 +378,15 @@ function useComputedTabs(props) {
             shouldUpdate.current = 'full';
         }
     }, [children, prevChildren, processedChildren]);
-    // initial cache for variant 'moreMenu', used for computing more menu
     useLayoutEffect(() => {
         if (switchToMoreMenu.current && tabListRef.current?.children) {
             switchToMoreMenu.current = false;
-            // initial cache of tabsChildrenCache
             tabsChildrenCache.current = new Map();
             cacheTabsChildren();
-            // initial cache of moreBtnWidth
             moreBtnWidth.current = moreRef.current?.offsetWidth || 0;
             computeMoreMenuWithCache();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [showMore]);
-    // handle switch variant situation
     useOnReRender(() => {
         if (variant !== 'moreMenu') {
             setShowMore(false);
@@ -441,41 +396,25 @@ function useComputedTabs(props) {
             switchToMoreMenu.current = true;
             setShowMore(true);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant]);
-    // Check if we need to update the cache and update the more menu when any tab child is resized
     useEffect(() => {
         if (variant !== 'moreMenu')
             return;
         let initialObservation = true;
         const handleResize = throttle((entries) => {
             if (initialObservation) {
-                /**
-                 * We handle the computation of the more menu after the initial mount,
-                 * or we re-compute when the `showMore` prop has updated. There's
-                 * no need to compute here.
-                 */
                 initialObservation = false;
                 return;
             }
             if (entries) {
-                // Partially update the cache before computing the more menu
                 cacheTabsChildren();
                 if (moreRef.current)
                     moreBtnWidth.current = moreRef.current.offsetWidth;
             }
             computeMoreMenuWithCache();
-            /**
-             * For variants other than moreMenu, we compute the floating underline using a dedicated
-             * ResizeObserver for the selected tab. When we're on the moreMenu we already have a resize
-             * observer for the tabList, so we don't need to create a dedicated one for the selected tab,
-             * then we compute the floating underline as part of the resize event we otherwise use for
-             * the more menu.
-             */
             computeFloatingUnderline(true);
         }, 200);
         let resizeObserver;
-        // Check if ResizeObserver is supported in this environment
         if (typeof ResizeObserverClass !== 'undefined') {
             resizeObserver = new ResizeObserverClass(handleResize);
             if (scrollerRef.current)
@@ -483,10 +422,8 @@ function useComputedTabs(props) {
             if (tabListRef && tabListRef.current) {
                 const tabsChildren = tabListRef.current.children;
                 Array.from(tabsChildren).forEach((child, index) => {
-                    // The last child when the pill prop is enabled is the underline element, no need to observe it
                     if (pill && index === tabsChildren.length - 1)
                         return;
-                    // When the pill props is disabled, the last 2 children are the underline and floating underline elements, no need to observe them
                     if (!pill && index >= tabsChildren.length - 2)
                         return;
                     resizeObserver?.observe(child);
@@ -497,30 +434,19 @@ function useComputedTabs(props) {
             handleResize.cancel();
             resizeObserver?.disconnect();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant, pill, ResizeObserverClass]);
     useEffect(() => {
-        // The ResizeObserver for the moreMenu automatically handles floating underline computation
         if (variant === 'moreMenu')
             return;
         let initialObservation = true;
         const handleSelectedTabResize = throttle(() => {
             if (initialObservation) {
-                /**
-                 * We handle the initial computation of the floating underline in the
-                 * Tabs component after the value has changed, we don't need to compute
-                 * it here again. This also allows us to distinguish between when the
-                 * selected tab is resized and when the user selects a different tab,
-                 * meaning we can apply an instant transition during resizing, but use
-                 * a spring transition when switching tabs.
-                 */
                 initialObservation = false;
                 return;
             }
             computeFloatingUnderline(true);
         }, 16);
         let selectedTabResizeObserver;
-        // Check if ResizeObserver is supported in this environment
         if (typeof ResizeObserverClass !== 'undefined') {
             selectedTabResizeObserver = new ResizeObserverClass(handleSelectedTabResize);
             const selectedTabElement = getSelectedTabElement();
@@ -532,24 +458,19 @@ function useComputedTabs(props) {
             handleSelectedTabResize.cancel();
             selectedTabResizeObserver?.disconnect();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant, value, ResizeObserverClass]);
     const prevVariant = usePrevious(() => variant);
     useEffect(() => {
-        // If only the variant is changed, we need to update the floating underline without animation
         if (prevVariant !== variant) {
             computeFloatingUnderline(true);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant]);
     useEffect(() => {
         if (variant === 'moreMenu' &&
             value !== null &&
             hiddenTabsRef.current?.has(value)) {
-            // Re-compute when a hidden tab (i.e. tab in the more menu) is selected
             computeMoreMenuWithCache();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     return {
         visibleTabsChildren,
@@ -569,9 +490,6 @@ function getHorizontalPadding(element) {
 }
 
 const THRESHOLD_FOR_SUB_PIXEL_CALCULATION = 0.5;
-/**
- * This `useTabsScroller` hook manages the state and behavior of scroll buttons at both ends of the tab list (start and end) when the tab list exceeds the visible container width
- */
 const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButtonStartProps, ScrollButtonEndProps, }) => {
     const [displayStartScroll, setDisplayStartScroll] = useState(false);
     const [displayEndScroll, setDisplayEndScroll] = useState(false);
@@ -588,10 +506,8 @@ const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButton
             setDisplayStartScroll(scrollLeft > 0);
             setDisplayEndScroll(maxScrollLeft - scrollLeft > THRESHOLD_FOR_SUB_PIXEL_CALCULATION);
         }, 100);
-        // add scroll event listener
         const currentTabsRef = scrollerRef.current;
         currentTabsRef?.addEventListener('scroll', checkScroll);
-        // ResizeObserver for tabs list
         let resizeObserver;
         if (typeof ResizeObserverClass !== 'undefined') {
             resizeObserver = new ResizeObserverClass(checkScroll);
@@ -599,11 +515,10 @@ const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButton
                 resizeObserver.observe(currentTabsRef);
             }
         }
-        checkScroll(); // Initial check
+        checkScroll();
         return () => {
             currentTabsRef?.removeEventListener('scroll', checkScroll);
             checkScroll.cancel();
-            // Disconnect the ResizeObserver on cleanup
             resizeObserver?.disconnect();
         };
     }, [enable, scrollerRef, ResizeObserverClass]);
@@ -651,12 +566,12 @@ const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButton
     ]);
 };
 
-var Tabs$1 = {"sui-tabs-root":"sui-tabs-root","sui-tabs-scroller":"sui-tabs-scroller","sui-tabs-scrollable":"sui-tabs-scrollable","sui-tab":"sui-tab","sui-tabs-tab-list":"sui-tabs-tab-list","sui-tabs-underline":"sui-tabs-underline","sui-tabs-indicator":"sui-tabs-indicator","sui-tabs-compact":"sui-tabs-compact","sui-tabs-pill":"sui-tabs-pill","sui-tab-more-menu-root":"sui-tab-more-menu-root","sui-tab-more-menu-button":"sui-tab-more-menu-button","sui-tabs-scroll-left":"sui-tabs-scroll-left","sui-tabs-scroll-right":"sui-tabs-scroll-right","sui-tabs-scroll-both":"sui-tabs-scroll-both","sui-tabs-floating-underline":"sui-tabs-floating-underline","sui-tab-more-menu-badge-root":"sui-tab-more-menu-badge-root","sui-badge-dot":"sui-badge-dot","sui-badge-content":"sui-badge-content","sui-tab-more-menu-pill-badge":"sui-tab-more-menu-pill-badge","sui-tab-scroll-button-root":"sui-tab-scroll-button-root","sui-tab-scroll-button-start":"sui-tab-scroll-button-start"};
+var Tabs$1 = {"sui-tabs-root":"sui-tabs-root","sui-tabs-large":"sui-tabs-large","sui-tabs-scroller":"sui-tabs-scroller","sui-tabs-scrollable":"sui-tabs-scrollable","sui-tab":"sui-tab","sui-tabs-tab-list":"sui-tabs-tab-list","sui-tabs-underline":"sui-tabs-underline","sui-tabs-indicator":"sui-tabs-indicator","sui-tabs-compact":"sui-tabs-compact","sui-tabs-pill":"sui-tabs-pill","sui-tab-more-menu-root":"sui-tab-more-menu-root","sui-tab-more-menu-button":"sui-tab-more-menu-button","sui-tabs-scroll-left":"sui-tabs-scroll-left","sui-tabs-scroll-right":"sui-tabs-scroll-right","sui-tabs-scroll-both":"sui-tabs-scroll-both","sui-tabs-floating-underline":"sui-tabs-floating-underline","sui-tab-more-menu-badge-root":"sui-tab-more-menu-badge-root","sui-badge-dot":"sui-badge-dot","sui-badge-content":"sui-badge-content","sui-tab-more-menu-pill-badge":"sui-tab-more-menu-pill-badge","sui-tab-scroll-button-root":"sui-tab-scroll-button-root","sui-tab-scroll-button-start":"sui-tab-scroll-button-start","sui-compact":"sui-compact"};
 
 const DEFAULT_PILL_GAP = 4;
 const Tabs = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Tabs' });
-    const { classes, className, children, onBlur, onFocus, variant = 'standard', onGroupInfoUpdate, MoreMenuProps, pill, pillGap: pillGapProp = DEFAULT_PILL_GAP, color = 'default', ScrollButtonStartProps, ScrollButtonEndProps, enableScrollButtons = true, ...rest } = props;
+    const { classes, className, children, onBlur, onFocus, variant = 'standard', onGroupInfoUpdate, MoreMenuProps, pill, pillGap: pillGapProp = DEFAULT_PILL_GAP, color = 'default', size = 'medium', ScrollButtonStartProps, ScrollButtonEndProps, enableScrollButtons = true, ...rest } = props;
     const pillGap = pill ? pillGapProp : 0;
     const tabsRef = useRef(null);
     const scrollerRef = useRef(null);
@@ -669,7 +584,7 @@ const Tabs = forwardRef((inProps, ref) => {
     const floatingUnderlineOpacityMotionValue = useMotionValue(1);
     const floatingUnderlineTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
     const prefersReducedMotion = usePrefersReducedMotion();
-    const cls = useClasses('tabs', classes, className);
+    const cls = useClassesWithMode('tabs', classes, className);
     const { onGroupInfoUpdate: groupInfoUpdateHandler, ...restProps } = props;
     const { getRootProps, contextValue, selectedValue: value, } = useTabsList({
         ...restProps,
@@ -692,7 +607,6 @@ const Tabs = forwardRef((inProps, ref) => {
         let tabsMeta;
         if (tabsNode) {
             const rect = tabsNode.getBoundingClientRect();
-            // create a new object with ClientRect class props + scrollLeft
             tabsMeta = {
                 clientWidth: tabsNode.clientWidth,
                 scrollLeft: tabsNode.scrollLeft,
@@ -710,7 +624,6 @@ const Tabs = forwardRef((inProps, ref) => {
             if (tab) {
                 const rect = tab.getBoundingClientRect();
                 tabMeta = {
-                    // Use offsetWidth/offsetHeight to negate any transforms that might be applied
                     height: tab.offsetHeight,
                     width: tab.offsetWidth,
                     x: rect.x,
@@ -736,7 +649,6 @@ const Tabs = forwardRef((inProps, ref) => {
             return;
         }
         if (transitionType === null || prefersReducedMotion) {
-            // if transitionType is null or prefersReducedMotion, set the scroll value without animation
             scrollerRef.current[scrollStart] = to;
             return;
         }
@@ -755,11 +667,9 @@ const Tabs = forwardRef((inProps, ref) => {
         if (!tabMeta || !tabsMeta) {
             return;
         }
-        // Check if the left side of the tab is out of view
         if (tabMeta[start] < tabsMeta[start]) {
             const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
             scroll(nextScrollStart, noAnimation ? null : undefined);
-            // Check if the right side of the tab is out of view
         }
         else if (tabMeta[end] > tabsMeta[end]) {
             const nextScrollStart = tabsMeta[scrollStart] + Math.abs(tabMeta[end] - tabsMeta[end]);
@@ -779,16 +689,8 @@ const Tabs = forwardRef((inProps, ref) => {
     useEffect(() => {
         const noAnimationWhenFirstRender = floatingUnderlineWidthMotionValue.get() === 0;
         if (variant !== 'moreMenu') {
-            /**
-             * Invoke scrollSelectedIntoView when visibleTabsChildren has been updated or the selected
-             * tab has changed. It will be updated when the variant is switched from `moreMenu`
-             * to another value. If the variant is `moreMenu`, `visibleTabsChildren` will also be
-             * updated when resized.
-             */
             scrollSelectedIntoView(noAnimationWhenFirstRender);
         }
-        // If the visibleTabsChildren has been updated but selected tab has not changed,
-        // we don't need to animate the floating underline
         const noAnimationWhenNoValueChange = prevVisibleTabsChildren.current !== visibleTabsChildren &&
             prevValueAfterChildrenUpdate.current === value;
         if (prevVisibleTabsChildren.current !== visibleTabsChildren) {
@@ -796,16 +698,16 @@ const Tabs = forwardRef((inProps, ref) => {
             prevValueAfterChildrenUpdate.current = value;
         }
         computeFloatingUnderline(noAnimationWhenFirstRender || noAnimationWhenNoValueChange);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visibleTabsChildren, value]);
     const tabsContextValue = useMemo(() => ({
         pill,
         pillGap,
         color,
+        size,
         setFloatingUnderlineVisibility: (isVisible) => {
             floatingUnderlineOpacityMotionValue.set(isVisible ? 1 : 0);
         },
-    }), [floatingUnderlineOpacityMotionValue, pill, pillGap, color]);
+    }), [floatingUnderlineOpacityMotionValue, pill, pillGap, color, size]);
     if (!processedChildren.size) {
         return null;
     }
@@ -816,7 +718,7 @@ const Tabs = forwardRef((inProps, ref) => {
                     'scroll-left': !!scrollButtonStart,
                     'scroll-right': !!scrollButtonEnd,
                     'scroll-both': !!(scrollButtonStart && scrollButtonEnd),
-                }), ...rest, ...getRootProps(), children: [scrollButtonStart, jsx("div", { className: cls('scroller'), ref: scrollerRef, children: jsxs("div", { className: cls('tab-list'), ref: tabListRef, children: [visibleTabsChildren, showMore && (jsx(TabMoreMenu, { menuItems: moreMenuItems, ...MoreMenuProps, ref: tabMoreMenuRef })), jsx("div", { className: cls('underline') }), !pill && (jsx(motion.div, { style: {
+                }, size), ...rest, ...getRootProps(), children: [scrollButtonStart, jsx("div", { className: cls('scroller'), ref: scrollerRef, children: jsxs("div", { className: cls('tab-list'), ref: tabListRef, children: [visibleTabsChildren, showMore && (jsx(TabMoreMenu, { menuItems: moreMenuItems, ...MoreMenuProps, ref: tabMoreMenuRef })), jsx("div", { className: cls('underline') }), !pill && (jsx(motion.div, { style: {
                                         left: floatingUnderlineLeftMotionValue,
                                         width: floatingUnderlineWidthMotionValue,
                                         opacity: floatingUnderlineOpacityMotionValue,

package/Text.js

@@ -25,14 +25,12 @@ const Text = forwardRef((inProps, ref) => {
     const [isShowTitle, setIsShowTitle] = useState(false);
     const innerRef = useRef(null);
     const textRef = useForkRef(innerRef, ref);
-    // * here put hook in if else, titleWhenOverflow not change any more
     if (titleWhenOverflow) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useOverflow(innerRef, (state) => setIsShowTitle(state));
     }
     const cls = useClasses('text', {}, className);
-    const title = isShowTitle || useTooltip // * if useTooltip always keep title pass into
-        ? // * if user pass title, use title first
+    const title = isShowTitle || useTooltip
+        ?
             _title ?? (isString(children) ? children : undefined)
         : undefined;
     const showTooltip = Boolean(useTooltip) && isShowTitle && !!title && !!children;