@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Tabs.js

@@ -1,87 +1,92 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useMemo, useRef, Children, isValidElement, cloneElement, useEffect, useLayoutEffect, useCallback } from 'react';
-import { useTab, useTabsList, TabsListProvider } from '@mui/base';
-import { useClasses, combineClasses, getTitle, combineProps, 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';
-import { M as MenuItem } from './chunks/useMenuItemSelect.js';
-import 'tabbable';
-import './chunks/useListNavigation.js';
-import './VirtualizedList.js';
-import { M as MenuItemText } from './chunks/MenuItemText.js';
-import { M as MenuList } from './chunks/MenuList.js';
-import { 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 './chunks/Icon.js';
-import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
-import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
-import isEqual from 'lodash/isEqual';
-import throttle from 'lodash/throttle';
-import { useInternalTabsContext, generateTabStableIds } from './TabContext.js';
-import 'lodash/isNumber';
-import 'lodash/kebabCase';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import './chunks/getGrow.js';
-import './chunks/Modal.js';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedMenuItem.js';
-import './ListNavigation.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import './chunks/hasContent.js';
-import 'clsx';
-
-const TabMenuItem = forwardRef((props, ref) => {
-    const { label, component: MenuItemComponent = MenuItem, onKeyDown } = props;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react, { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { TabsListProvider, useTab, useTabsList } from "@mui/base";
+import { combineClasses, combineProps, getTitle, logInDev, useClasses, useEventCallback, useFontLoaded, useForkRef, useOnReRender, usePrevious, useWindowContext } from "@ringcentral/spring-base";
+import { CaretLeftMd, CaretRightMd, OverflowMd } from "@ringcentral/spring-icon";
+import { motionTransition, useClassesWithMode, useMode, useThemeProps } from "@ringcentral/spring-theme";
+import { animate, motion, useMotionValue } from "framer-motion";
+import isEqual from "lodash/isEqual";
+import throttle from "lodash/throttle";
+import { Badge as Badge_Badge } from "./Badge.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { Menu as Menu_Menu } from "./Menu.js";
+import { MenuItem as MenuItem_MenuItem } from "./MenuItem.js";
+import { MenuItemText as MenuItemText_MenuItemText } from "./MenuItemText.js";
+import { MenuList as MenuList_MenuList } from "./MenuList.js";
+import "./Tooltip.js";
+import { TabsContext, useTabsContext } from "./chunks/8809.js";
+import "./chunks/4476.js";
+import { useInternalTabsContext, generateTabStableIds } from "./TabContext.js";
+import { Tooltip } from "./chunks/4535.js";
+import { useMotionSafeTransition, usePrefersReducedMotion } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const TabMenuItem = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, component: MenuItemComponent = MenuItem_MenuItem, onKeyDown } = props;
     const { onChange, ...rest } = props;
     const { getRootProps } = useTab({
         ...rest,
-        rootRef: ref,
+        rootRef: ref
     });
-    return (jsx(MenuItemComponent, { ...props, ...getRootProps(), onKeyDown: onKeyDown, children: jsx(MenuItemText, { children: label }) }));
+    return(// @ts-ignore
+    /*#__PURE__*/ jsx(MenuItemComponent, {
+        ...props,
+        ...getRootProps(),
+        onKeyDown: onKeyDown,
+        children: /*#__PURE__*/ jsx(MenuItemText_MenuItemText, {
+            children: label
+        })
+    }));
 });
-const TabMoreMenu = forwardRef((props, ref) => {
+const TabMoreMenu = /*#__PURE__*/ 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
-        ? {
+    const iconButtonProps = useMemo(()=>pill ? {
             shape: 'circular',
             variant: 'outlined',
             size: mode === 'compact' ? 'medium' : 'large',
-            background: true,
-        }
-        : {
+            background: true
+        } : {
             shape: 'squircle',
             variant: 'contained',
             size: 'small',
-            background: false,
-        }), [pill, mode]);
+            background: false
+        }, [
+        pill,
+        mode
+    ]);
     let iconButtonClasses = {
-        root: cls('button'),
+        root: cls('button')
     };
     if (ButtonProps?.classes) {
         iconButtonClasses = combineClasses(iconButtonClasses, ButtonProps.classes);
     }
     let badgeClasses = {
         root: cls('badge-root', {
-            'pill-badge': pill,
-        }),
+            'pill-badge': pill
+        })
     };
     if (BadgeProps?.classes) {
         badgeClasses = combineClasses(badgeClasses, BadgeProps.classes);
@@ -90,73 +95,173 @@ const TabMoreMenu = forwardRef((props, ref) => {
         color: 'secondary',
         variant: pill ? 'outlined' : 'contained',
         ...BadgeProps,
-        classes: badgeClasses,
+        classes: badgeClasses
     };
-    const handleClose = (event, reason) => {
+    const handleClose = (event, reason)=>{
         setAnchor(null);
     };
-    const iconButton = (jsx(IconButton, { color: 'secondary', symbol: OverflowMd, ...iconButtonProps, onClick: (e) => {
-            setAnchor((prev) => (prev ? null : e.currentTarget));
-        }, "aria-expanded": Boolean(anchor), "aria-label": getTitle(TooltipProps?.title), ...ButtonProps, classes: iconButtonClasses }));
-    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ref: ref, ...rest, children: [TooltipProps ? (jsx(Tooltip, { ...TooltipProps, children: iconButton })) : (iconButton), Number(BadgeProps?.count) > 0 ? jsx(Badge, { ...badgeProps }) : null] }), jsx(Menu, { open: Boolean(anchor), anchorEl: anchor, ...combineProps({ onClose: handleClose }, MenuProps), children: jsx(MenuList, { children: menuItems.map(({ ref, ...props }, index) => (jsx(TabMenuItem, { ...props, ref: ref, component: MenuItemComponent }, props.value || `TabMenuItem-${index}`))) }) })] }));
+    const iconButton = /*#__PURE__*/ jsx(IconButton_IconButton, {
+        color: 'secondary',
+        symbol: OverflowMd,
+        ...iconButtonProps,
+        onClick: (e)=>{
+            setAnchor((prev)=>prev ? null : e.currentTarget);
+        },
+        "aria-expanded": Boolean(anchor),
+        "aria-label": getTitle(TooltipProps?.title),
+        ...ButtonProps,
+        classes: iconButtonClasses
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: cls('root'),
+                ref: ref,
+                ...rest,
+                children: [
+                    TooltipProps ? /*#__PURE__*/ jsx(Tooltip, {
+                        ...TooltipProps,
+                        children: iconButton
+                    }) : iconButton,
+                    Number(BadgeProps?.count) > 0 ? /*#__PURE__*/ jsx(Badge_Badge, {
+                        ...badgeProps
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(Menu_Menu, {
+                open: Boolean(anchor),
+                anchorEl: anchor,
+                ...combineProps({
+                    onClose: handleClose
+                }, MenuProps),
+                children: /*#__PURE__*/ jsx(MenuList_MenuList, {
+                    children: menuItems.map(({ ref, ...props }, index)=>/*#__PURE__*/ jsx(TabMenuItem, {
+                            ...props,
+                            ref: ref,
+                            component: MenuItemComponent
+                        }, props.value || `TabMenuItem-${index}`))
+                })
+            })
+        ]
+    });
 });
 TabMoreMenu.displayName = 'SuiTabMoreMenu';
 
-const TabScrollButton = forwardRef((props, ref) => {
+
+
+
+
+
+
+
+
+
+
+
+
+const TabScrollButton = /*#__PURE__*/ 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(() => {
+    const iconButtonClasses = useMemo(()=>{
         let combinedClasses = {
-            root: cls('button'),
+            root: cls('button')
         };
         if (ButtonProps?.classes) {
             combinedClasses = combineClasses(combinedClasses, ButtonProps.classes);
         }
         return combinedClasses;
-    }, [ButtonProps?.classes, cls]);
+    }, [
+        ButtonProps?.classes,
+        cls
+    ]);
     const icon = direction === 'left' ? CaretLeftMd : CaretRightMd;
-    const iconButtonSize = useMemo(() => {
+    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: iconButtonSize, background: true, onClick: onClick, ...ButtonProps, classes: iconButtonClasses }) }));
+    }, [
+        mode
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root', {
+            start: direction === 'left'
+        }),
+        ref: ref,
+        ...rest,
+        children: /*#__PURE__*/ jsx(IconButton_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';
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* oxlint-disable sonarjs/cognitive-complexity */ 
+
+
+
+
+
+
+
 function useComputedTabs(props) {
-    const { variant, value, children, pill, pillGap, onGroupInfoUpdate, floatingUnderlineLeftMotionValue, floatingUnderlineWidthMotionValue, tabListRef, scrollerRef, moreRef, } = props;
+    const { variant, value, children, pill, pillGap, onGroupInfoUpdate, floatingUnderlineLeftMotionValue, floatingUnderlineWidthMotionValue, tabListRef, scrollerRef, moreRef } = props;
     const fontsLoaded = useFontLoaded(variant === 'moreMenu');
     const prefersReducedMotion = usePrefersReducedMotion();
     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(() => {
+    const processedChildren = useMemo(()=>{
         let childIndex = 0;
         const visibleTabs = new Map();
-        Children.forEach(children, (child) => {
+        Children.forEach(children, (child)=>{
             if (isValidElement(child)) {
-                if (process.env.NODE_ENV !== 'production' &&
-                    child.type === React.Fragment) {
+                if (process.env.NODE_ENV !== 'production' && child.type === react.Fragment) {
                     logInDev({
                         scope: 'Tabs',
                         level: 'error',
                         message: [
                             "The Tabs component doesn't accept a Fragment as a child.",
-                            'Consider providing an array instead.',
-                        ].join('\n'),
+                            'Consider providing an array instead.'
+                        ].join('\n')
                     });
                 }
                 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') {
@@ -172,167 +277,214 @@ function useComputedTabs(props) {
                                 `<Tab id="unique-tab-id" label="Your label" />`,
                                 '',
                                 'Unique ids are required for accessibility and correct tab-panel linking.',
-                                'If no id is provided, each Tab element will be cloned to provide its auto-generated id, which may have a performance cost.',
-                            ].join('\n'),
+                                'If no id is provided, each Tab element will be cloned to provide its auto-generated id, which may have a performance cost.'
+                            ].join('\n')
                         });
                     }
                     const { tabId } = generateTabStableIds(tabsInstanceId, childValue);
                     finalChild = cloneElement(child, {
                         ...child.props,
-                        id: tabId,
+                        id: tabId
                     });
                 }
-                visibleTabs.set(childValue, { childIndex, child: finalChild });
+                visibleTabs.set(childValue, {
+                    childIndex,
+                    child: finalChild
+                });
                 childIndex += 1;
             }
         });
         return visibleTabs;
-    }, [children, tabsInstanceId]);
+    }, [
+        children,
+        tabsInstanceId
+    ]);
     const [visibleTabs, setVisibleTabs] = useState(processedChildren);
-    const visibleTabsChildren = useMemo(() => {
-        return Array.from(visibleTabs.entries()).map(([childValue, { child }]) => {
-            return { ...child, props: { ...child.props, value: childValue } };
-        });
-    }, [visibleTabs]);
-    const prevChildren = usePrevious(() => children);
-    const cacheTabsChildren = useEventCallback(() => {
-        if (shouldUpdate.current === 'full')
-            tabsChildrenCache.current = new Map();
-        if (!tabListRef.current?.children || !tabsChildrenCache.current)
-            return;
+    const visibleTabsChildren = useMemo(()=>{
+        // Remapping Map → array makes these list children; React requires a key.
+        return Array.from(visibleTabs.entries()).map(([childValue, { child }])=>({
+                ...child,
+                key: child.key ?? childValue,
+                props: {
+                    ...child.props,
+                    value: childValue
+                }
+            }));
+    }, [
+        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;
-        for (const [childValue, { childIndex, child }] of visibleTabs.entries()) {
+        for (const [childValue, { childIndex, child }] of visibleTabs.entries()){
             const childElement = tabsChildren[childIndex];
-            if (!child || !childElement)
-                return;
+            if (!child || !childElement) return;
             tabsChildrenCache.current?.set(childValue, {
+                // @ts-ignore
                 child,
                 element: childElement,
-                width: childElement.offsetWidth,
+                width: childElement.offsetWidth
             });
         }
     });
-    const getSelectedTabElement = useEventCallback(() => {
+    const getSelectedTabElement = useEventCallback(()=>{
         const children = tabListRef.current?.children;
-        if (!children || children.length === 0 || value === null)
-            return undefined;
+        if (!children || children.length === 0 || value === null) return undefined;
         let selectedIndex = -1;
         if (variant === 'moreMenu' && visibleTabsRef.current) {
-            selectedIndex = Array.from(visibleTabsRef.current).findIndex(([key]) => {
+            /**
+       * 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;
             });
-        }
-        else {
+        } else {
             selectedIndex = visibleTabs.get(value)?.childIndex;
         }
         const selectedTabElement = children[selectedIndex];
-        if (process.env.NODE_ENV !== 'production' &&
-            selectedTabElement === undefined) {
+        if (process.env.NODE_ENV !== 'production' && selectedTabElement === undefined) {
             logInDev({
                 scope: 'Tabs',
                 message: [
                     `The \`value\` provided to the Tabs component is invalid.`,
-                    `None of the Tabs' children match with "${value}".`,
-                ].join('\n'),
+                    `None of the Tabs' children match with "${value}".`
+                ].join('\n')
             });
         }
+        // provide the first tab as default selected tab when value is invalid
         return selectedTabElement || children[0];
     });
-    const computeMoreMenuWithCache = useEventCallback(() => {
-        if (variant !== 'moreMenu' || !tabsChildrenCache.current)
-            return;
-        const width = scrollerRef.current?.offsetWidth || 0;
-        const visibleWidth = width +
-            pillGap -
-            (tabListRef.current ? getHorizontalPadding(tabListRef.current) : 0);
-        const selectedItemWidth = (value !== null && tabsChildrenCache.current.get(value)?.width) || 0;
-        const spaceForMoreBtn = moreBtnWidth.current + pillGap;
+    // 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 visibleWidth = width + pillGap - (tabListRef.current ? getHorizontalPadding(tabListRef.current) : 0); // Excludes padding
+        // The reserved slot must include the gap, like every other tab slot below,
+        // otherwise the more button loses its left margin at the overflow threshold
+        const selectedItemWidth = value !== null ? (tabsChildrenCache.current.get(value)?.width ?? 0) + pillGap : 0;
+        const spaceForMoreBtn = moreBtnWidth.current + pillGap; // more button needs left margin
         let consumedWidth = spaceForMoreBtn;
         let isSelectedItemVisible = false;
         let noWidthForUnselectedTab = false;
         const visibleItems = new Map();
         const hiddenItems = new Map();
         const cache = Array.from(tabsChildrenCache.current);
-        for (let i = 0; i < cache.length; i++) {
+        for(let i = 0; i < cache.length; i++){
             const [key, itemInfo] = cache[i];
             const { child, width: itemWidth } = itemInfo;
             const width = itemWidth + pillGap;
-            if (noWidthForUnselectedTab && key !== value) {
+            /**
+       * 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 {
+                    } else {
+                        // There's not enough space available, put the last item inside more menu
                         hiddenItems.set(key, child);
                     }
-                }
-                else {
+                } 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 {
+                    } 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);
-                if (cache.length !== i + 1)
-                    consumedWidth += width;
+                // 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;
-            const hasSpaceForLast2Items = visibleWidth >=
-                consumedWidth - spaceForMoreBtn + width + selectedItemWidth;
+            // 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 {
+            } else {
+                // Otherwise hide the tab and put it in the more menu
                 hiddenItems.set(key, child);
                 noWidthForUnselectedTab = true;
             }
         }
         if (hiddenItems.size) {
             setShowMore(true);
-            setMoreMenuItems(Array.from(hiddenItems.entries()).map(([childValue, child]) => {
-                return { ...child.props, value: childValue, ref: child.ref };
+            setMoreMenuItems(Array.from(hiddenItems.entries()).map(([childValue, child])=>{
+                return {
+                    ...child.props,
+                    value: childValue,
+                    ref: child.ref
+                };
             }));
-        }
-        else {
+        } else {
             setShowMore(false);
         }
+        // @ts-ignore
         const newVisibleTabs = new Map();
         let childIndex = 0;
-        for (const [childValue, child] of visibleItems.entries()) {
-            newVisibleTabs.set(childValue, { childIndex, child });
+        for (const [childValue, child] of visibleItems.entries()){
+            newVisibleTabs.set(childValue, {
+                childIndex,
+                child
+            });
             childIndex++;
         }
         setVisibleTabs(newVisibleTabs);
         shouldUpdate.current = false;
-        if (!isEqual([...(visibleTabsRef.current?.keys() || [])], [...visibleItems.keys()]) ||
-            !isEqual([...(hiddenTabsRef.current?.keys() || [])], [...hiddenItems.keys()])) {
-            onGroupInfoUpdate?.([...visibleItems.keys()], [...hiddenItems.keys()]);
+        // 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;
         hiddenTabsRef.current = hiddenItems;
     });
-    const computeFloatingUnderline = useEventCallback((withoutAnimation = false) => {
+    const computeFloatingUnderline = useEventCallback((withoutAnimation = false)=>{
         const selectedTabElement = getSelectedTabElement();
-        if (!selectedTabElement)
-            return;
+        if (!selectedTabElement) return;
         const currentWidth = floatingUnderlineWidthMotionValue.get();
         const currentLeft = floatingUnderlineLeftMotionValue.get();
         const targetWidth = selectedTabElement.offsetWidth;
@@ -343,25 +495,28 @@ 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'];
+            const transition = motionTransition["spring-01-fast"];
             animate(floatingUnderlineWidthMotionValue, targetWidth, transition);
             animate(floatingUnderlineLeftMotionValue, targetLeft, transition);
         }
     });
-    useEffect(() => {
-        if (variant !== 'moreMenu')
-            return;
+    // 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;
         if (moreRef.current) {
             moreBtnWidth.current = moreRef.current.offsetWidth;
         }
         if (tabsChildrenCache.current) {
             if (!shouldUpdate.current) {
-                for (const [childValue, { childIndex: index, child },] of visibleTabs.entries()) {
-                    if (shouldUpdate.current || !child)
-                        continue;
+                // 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';
                     }
@@ -372,82 +527,122 @@ function useComputedTabs(props) {
                 computeMoreMenuWithCache();
             }
         }
-    }, [visibleTabs, fontsLoaded]);
-    useEffect(() => {
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        visibleTabs,
+        fontsLoaded
+    ]);
+    useEffect(()=>{
         if (prevChildren && children !== prevChildren) {
             setVisibleTabs(processedChildren);
             shouldUpdate.current = 'full';
         }
-    }, [children, prevChildren, processedChildren]);
-    useLayoutEffect(() => {
+    }, [
+        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();
         }
-    }, [showMore]);
-    useOnReRender(() => {
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        showMore
+    ]);
+    // handle switch variant situation
+    useOnReRender(()=>{
         if (variant !== 'moreMenu') {
             setShowMore(false);
             setVisibleTabs(processedChildren);
-        }
-        else {
+        } else {
             switchToMoreMenu.current = true;
             setShowMore(true);
         }
-    }, [variant]);
-    useEffect(() => {
-        if (variant !== 'moreMenu')
-            return;
+    // oxlint-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) => {
+        const handleResize = throttle((entries)=>{
             if (initialObservation) {
-                initialObservation = false;
+                /**
+         * 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;
+                if (moreRef.current) moreBtnWidth.current = moreRef.current.offsetWidth;
             }
             computeMoreMenuWithCache();
-            computeFloatingUnderline(true);
+            /**
+       * 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)
-                resizeObserver.observe(scrollerRef.current);
+            if (scrollerRef.current) resizeObserver.observe(scrollerRef.current);
             if (tabListRef && tabListRef.current) {
                 const tabsChildren = tabListRef.current.children;
-                Array.from(tabsChildren).forEach((child, index) => {
-                    if (pill && index === tabsChildren.length - 1)
-                        return;
-                    if (!pill && index >= tabsChildren.length - 2)
-                        return;
+                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);
                 });
             }
         }
-        return () => {
+        return ()=>{
             handleResize.cancel();
             resizeObserver?.disconnect();
         };
-    }, [variant, pill, ResizeObserverClass]);
-    useEffect(() => {
-        if (variant === 'moreMenu')
-            return;
+    // oxlint-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(() => {
+        const handleSelectedTabResize = throttle(()=>{
             if (initialObservation) {
-                initialObservation = false;
+                /**
+         * 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();
@@ -455,24 +650,35 @@ function useComputedTabs(props) {
                 selectedTabResizeObserver.observe(selectedTabElement);
             }
         }
-        return () => {
+        return ()=>{
             handleSelectedTabResize.cancel();
             selectedTabResizeObserver?.disconnect();
         };
-    }, [variant, value, ResizeObserverClass]);
-    const prevVariant = usePrevious(() => variant);
-    useEffect(() => {
+    // oxlint-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);
         }
-    }, [variant]);
-    useEffect(() => {
-        if (variant === 'moreMenu' &&
-            value !== null &&
-            hiddenTabsRef.current?.has(value)) {
+    // oxlint-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();
         }
-    }, [value]);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        value
+    ]);
     return {
         visibleTabsChildren,
         showMore,
@@ -480,7 +686,7 @@ function useComputedTabs(props) {
         processedChildren,
         getSelectedTabElement,
         computeMoreMenuWithCache,
-        computeFloatingUnderline,
+        computeFloatingUnderline
     };
 }
 function getHorizontalPadding(element) {
@@ -490,25 +696,36 @@ function getHorizontalPadding(element) {
     return paddingLeft + paddingRight;
 }
 
+
+
+
+
+
+
+
+
+
 const THRESHOLD_FOR_SUB_PIXEL_CALCULATION = 0.5;
-const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButtonStartProps, ScrollButtonEndProps, }) => {
+/**
+ * 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);
     const { externalWindow } = useWindowContext();
     const ResizeObserverClass = (externalWindow || window).ResizeObserver;
-    useLayoutEffect(() => {
-        if (!enable)
-            return;
-        const checkScroll = throttle(() => {
-            if (!scrollerRef.current)
-                return;
+    useLayoutEffect(()=>{
+        if (!enable) return;
+        const checkScroll = throttle(()=>{
+            if (!scrollerRef.current) return;
             const { scrollLeft, scrollWidth, clientWidth } = scrollerRef.current;
             const maxScrollLeft = scrollWidth - clientWidth;
             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);
@@ -516,26 +733,31 @@ const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButton
                 resizeObserver.observe(currentTabsRef);
             }
         }
-        checkScroll();
-        return () => {
+        checkScroll(); // Initial check
+        return ()=>{
             currentTabsRef?.removeEventListener('scroll', checkScroll);
             checkScroll.cancel();
+            // Disconnect the ResizeObserver on cleanup
             resizeObserver?.disconnect();
         };
-    }, [enable, scrollerRef, ResizeObserverClass]);
-    const moveTabsScroll = useCallback((delta) => {
-        const scrollValue = scrollerRef.current
-            ? scrollerRef.current.scrollLeft + delta * 1
-            : 0;
+    }, [
+        enable,
+        scrollerRef,
+        ResizeObserverClass
+    ]);
+    const moveTabsScroll = useCallback((delta)=>{
+        const scrollValue = scrollerRef.current ? scrollerRef.current.scrollLeft + delta * 1 : 0;
         scroll(scrollValue, 'neutral-01-slow');
-    }, [scroll, scrollerRef]);
-    const getScrollSize = useCallback(() => {
-        if (!scrollerRef.current || !tabListRef.current)
-            return 0;
+    }, [
+        scroll,
+        scrollerRef
+    ]);
+    const getScrollSize = useCallback(()=>{
+        if (!scrollerRef.current || !tabListRef.current) return 0;
         const containerSize = scrollerRef.current.clientWidth;
         let totalSize = 0;
         const children = Array.from(tabListRef.current.children);
-        for (let i = 0; i < children.length; i += 1) {
+        for(let i = 0; i < children.length; i += 1){
             const tab = children[i];
             if (totalSize + tab.clientWidth > containerSize) {
                 if (i === 0) {
@@ -546,33 +768,65 @@ const useTabsScroller = ({ enable, scrollerRef, tabListRef, scroll, ScrollButton
             totalSize += tab.clientWidth;
         }
         return totalSize;
-    }, [scrollerRef, tabListRef]);
-    const handleStartScrollClick = useCallback(() => {
+    }, [
+        scrollerRef,
+        tabListRef
+    ]);
+    const handleStartScrollClick = useCallback(()=>{
         moveTabsScroll(-getScrollSize());
-    }, [moveTabsScroll, getScrollSize]);
-    const handleEndScrollClick = useCallback(() => {
+    }, [
+        moveTabsScroll,
+        getScrollSize
+    ]);
+    const handleEndScrollClick = useCallback(()=>{
         moveTabsScroll(getScrollSize());
-    }, [moveTabsScroll, getScrollSize]);
-    return useMemo(() => ({
-        scrollButtonStart: enable && displayStartScroll ? (jsx(TabScrollButton, { direction: 'left', onClick: handleStartScrollClick, ButtonProps: ScrollButtonStartProps })) : null,
-        scrollButtonEnd: enable && displayEndScroll ? (jsx(TabScrollButton, { direction: 'right', onClick: handleEndScrollClick, ButtonProps: ScrollButtonEndProps })) : null,
-    }), [
+    }, [
+        moveTabsScroll,
+        getScrollSize
+    ]);
+    return useMemo(()=>({
+            scrollButtonStart: enable && displayStartScroll ? /*#__PURE__*/ jsx(TabScrollButton, {
+                direction: 'left',
+                onClick: handleStartScrollClick,
+                ButtonProps: ScrollButtonStartProps
+            }) : null,
+            scrollButtonEnd: enable && displayEndScroll ? /*#__PURE__*/ jsx(TabScrollButton, {
+                direction: 'right',
+                onClick: handleEndScrollClick,
+                ButtonProps: ScrollButtonEndProps
+            }) : null
+        }), [
         enable,
         displayStartScroll,
         handleStartScrollClick,
         ScrollButtonStartProps,
         displayEndScroll,
         handleEndScrollClick,
-        ScrollButtonEndProps,
+        ScrollButtonEndProps
     ]);
 };
 
-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"};
+// extracted by css-extract-rspack-plugin
+/* export default */ var Tabs = ({"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', size = 'medium', ScrollButtonStartProps, ScrollButtonEndProps, enableScrollButtons = true, ...rest } = props;
+const Tabs_Tabs = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Tabs'
+    });
+    const { classes, className, children, 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);
@@ -583,15 +837,15 @@ const Tabs = forwardRef((inProps, ref) => {
     const floatingUnderlineWidthMotionValue = useMotionValue(0);
     const floatingUnderlineLeftMotionValue = useMotionValue(0);
     const floatingUnderlineOpacityMotionValue = useMotionValue(1);
-    const floatingUnderlineTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const floatingUnderlineTransition = useMotionSafeTransition(motionTransition["spring-01-fast"]);
     const prefersReducedMotion = usePrefersReducedMotion();
     const cls = useClassesWithMode('tabs', classes, className);
     const { onGroupInfoUpdate: groupInfoUpdateHandler, ...restProps } = props;
-    const { getRootProps, contextValue, selectedValue: value, } = useTabsList({
+    const { getRootProps, contextValue, selectedValue: value } = useTabsList({
         ...restProps,
-        rootRef,
+        rootRef
     });
-    const { processedChildren, visibleTabsChildren, showMore, moreMenuItems, getSelectedTabElement, computeFloatingUnderline, } = useComputedTabs({
+    const { processedChildren, visibleTabsChildren, showMore, moreMenuItems, getSelectedTabElement, computeFloatingUnderline } = useComputedTabs({
         variant,
         value,
         children,
@@ -601,13 +855,14 @@ const Tabs = forwardRef((inProps, ref) => {
         floatingUnderlineWidthMotionValue,
         tabListRef,
         scrollerRef,
-        moreRef,
+        moreRef
     });
-    const getTabsMeta = useEventCallback(() => {
+    const getTabsMeta = useEventCallback(()=>{
         const tabsNode = scrollerRef.current;
         let tabsMeta;
         if (tabsNode) {
             const rect = tabsNode.getBoundingClientRect();
+            // create a new object with ClientRect class props + scrollLeft
             tabsMeta = {
                 clientWidth: tabsNode.clientWidth,
                 scrollLeft: tabsNode.scrollLeft,
@@ -616,7 +871,7 @@ const Tabs = forwardRef((inProps, ref) => {
                 top: rect.top,
                 bottom: rect.bottom,
                 left: rect.left,
-                right: rect.right,
+                right: rect.right
             };
         }
         let tabMeta;
@@ -625,6 +880,7 @@ 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,
@@ -632,47 +888,50 @@ const Tabs = forwardRef((inProps, ref) => {
                     top: rect.top,
                     right: rect.right,
                     bottom: rect.bottom,
-                    left: rect.left,
+                    left: rect.left
                 };
             }
         }
-        return { tabsMeta, tabMeta };
+        return {
+            tabsMeta,
+            tabMeta
+        };
     });
     const scrollStart = 'scrollLeft';
     const start = 'left';
     const end = 'right';
-    const scroll = (scrollValue, transitionType) => {
-        if (!scrollerRef.current)
-            return;
+    const scroll = (scrollValue, transitionType)=>{
+        if (!scrollerRef.current) return;
         const from = scrollerRef.current[scrollStart];
         const to = Number(Number.parseFloat(scrollValue.toString()).toFixed(2));
         if (from.toFixed(2) === to.toFixed(2)) {
             return;
         }
         if (transitionType === null || prefersReducedMotion) {
+            // if transitionType is null or prefersReducedMotion, set the scroll value without animation
             scrollerRef.current[scrollStart] = to;
             return;
         }
         const transition = motionTransition[transitionType ? transitionType : 'haste-01-fast'];
         animate(from, to, {
             ...transition,
-            onUpdate: (value) => {
-                if (!scrollerRef.current)
-                    return;
+            onUpdate: (value)=>{
+                if (!scrollerRef.current) return;
                 scrollerRef.current[scrollStart] = value;
-            },
+            }
         });
     };
-    const scrollSelectedIntoView = useEventCallback((noAnimation) => {
+    const scrollSelectedIntoView = useEventCallback((noAnimation)=>{
         const { tabsMeta, tabMeta } = getTabsMeta();
         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);
-        }
-        else if (tabMeta[end] > tabsMeta[end]) {
+        // 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]);
             scroll(nextScrollStart, noAnimation ? null : undefined);
         }
@@ -683,48 +942,114 @@ const Tabs = forwardRef((inProps, ref) => {
         tabListRef,
         scroll,
         ScrollButtonStartProps,
-        ScrollButtonEndProps,
+        ScrollButtonEndProps
     });
     const prevValueAfterChildrenUpdate = useRef(value);
     const prevVisibleTabsChildren = useRef(visibleTabsChildren);
-    useEffect(() => {
+    useEffect(()=>{
         const noAnimationWhenFirstRender = floatingUnderlineWidthMotionValue.get() === 0;
         if (variant !== 'moreMenu') {
-            scrollSelectedIntoView(noAnimationWhenFirstRender);
+            /**
+         * 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);
         }
-        const noAnimationWhenNoValueChange = prevVisibleTabsChildren.current !== visibleTabsChildren &&
-            prevValueAfterChildrenUpdate.current === value;
+        // 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) {
             prevVisibleTabsChildren.current = visibleTabsChildren;
             prevValueAfterChildrenUpdate.current = value;
         }
         computeFloatingUnderline(noAnimationWhenFirstRender || noAnimationWhenNoValueChange);
-    }, [visibleTabsChildren, value]);
-    const tabsContextValue = useMemo(() => ({
+    // oxlint-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,
-        size,
-        setFloatingUnderlineVisibility: (isVisible) => {
-            floatingUnderlineOpacityMotionValue.set(isVisible ? 1 : 0);
-        },
-    }), [floatingUnderlineOpacityMotionValue, pill, pillGap, color, size]);
+        size
+    ]);
     if (!processedChildren.size) {
         return null;
     }
-    return (jsx(TabsListProvider, { value: contextValue, children: jsx(TabsContext.Provider, { value: tabsContextValue, children: jsxs("div", { className: cls('root', {
+    return /*#__PURE__*/ jsx(TabsListProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(TabsContext.Provider, {
+            value: tabsContextValue,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: cls('root', {
                     pill,
                     scrollable: variant === 'scrollable',
                     compact: variant === 'moreMenu',
                     'scroll-left': !!scrollButtonStart,
                     'scroll-right': !!scrollButtonEnd,
-                    'scroll-both': !!(scrollButtonStart && scrollButtonEnd),
-                }, 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: {
+                    'scroll-both': !!(scrollButtonStart && scrollButtonEnd)
+                }, size),
+                ...getRootProps(rest),
+                children: [
+                    scrollButtonStart,
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('scroller'),
+                        ref: scrollerRef,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: cls('tab-list'),
+                            ref: tabListRef,
+                            children: [
+                                visibleTabsChildren,
+                                showMore && /*#__PURE__*/ jsx(TabMoreMenu, {
+                                    menuItems: moreMenuItems,
+                                    ...MoreMenuProps,
+                                    ref: tabMoreMenuRef
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: cls('underline')
+                                }),
+                                !pill && /*#__PURE__*/ jsx(motion.div, {
+                                    style: {
                                         left: floatingUnderlineLeftMotionValue,
                                         width: floatingUnderlineWidthMotionValue,
-                                        opacity: floatingUnderlineOpacityMotionValue,
-                                    }, transition: floatingUnderlineTransition, className: cls('floating-underline') }))] }) }), scrollButtonEnd] }) }) }));
+                                        opacity: floatingUnderlineOpacityMotionValue
+                                    },
+                                    transition: floatingUnderlineTransition,
+                                    className: cls('floating-underline')
+                                })
+                            ]
+                        })
+                    }),
+                    scrollButtonEnd
+                ]
+            })
+        })
+    });
 });
-Tabs.displayName = 'SuiTabs';
+Tabs_Tabs.displayName = 'SuiTabs';
+
+
+
+
+
+
+
+
+
+
+
+
 
-export { TabMoreMenu, TabScrollButton, Tabs, TabsContext, Tabs$1 as tabsStyle, useComputedTabs, useTabsContext, useTabsScroller };
+export { TabMoreMenu, TabScrollButton, Tabs as tabsStyle, Tabs_Tabs as Tabs, useComputedTabs, useTabsScroller };
+export { TabsContext, useTabsContext } from "./chunks/8809.js";