@ringcentral/spring-ui 1.7.0

package/Tabs.js

@@ -0,0 +1,827 @@
+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, useFontLoaded, useWindowContext, logInDev, usePrevious, useEventCallback, useOnReRender, useForkRef } from '@ringcentral/spring-base';
+import { OverflowMd, CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
+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 { 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';
+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/useNestedMenuItem.js';
+import './ListNavigation.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import 'clsx';
+
+const TabMenuItem = forwardRef((props, ref) => {
+    const { label, component: MenuItemComponent = MenuItem, onKeyDown } = props;
+    const { onChange, ...rest } = props;
+    const { getRootProps } = useTab({
+        ...rest,
+        rootRef: ref,
+    });
+    return (
+    // @ts-ignore
+    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 cls = useClasses('tab-more-menu', classes, className);
+    const { pill } = useTabsContext();
+    const iconButtonProps = useMemo(() => (pill
+        ? {
+            shape: 'circular',
+            variant: 'outlined',
+            size: 'large',
+            background: true,
+        }
+        : {
+            shape: 'squircle',
+            variant: 'contained',
+            size: 'small',
+            background: false,
+        }), [pill]);
+    let iconButtonClasses = {
+        root: cls('button'),
+    };
+    if (ButtonProps?.classes) {
+        iconButtonClasses = combineClasses(iconButtonClasses, ButtonProps.classes);
+    }
+    let badgeClasses = {
+        root: cls('badge-root', {
+            'pill-badge': pill,
+        }),
+    };
+    if (BadgeProps?.classes) {
+        badgeClasses = combineClasses(badgeClasses, BadgeProps.classes);
+    }
+    const badgeProps = {
+        color: 'secondary',
+        variant: pill ? 'outlined' : 'contained',
+        ...BadgeProps,
+        classes: badgeClasses,
+    };
+    const handleClose = (event, reason) => {
+        setAnchor(null);
+        MenuProps?.onClose?.(event, reason);
+    };
+    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, onClose: handleClose, children: jsx(MenuList, { children: menuItems.map(({ ref, ...props }, index) => (jsx(TabMenuItem, { ...props, ref: ref, component: MenuItemComponent }, props.value || `TabMenuItem-${index}`))) }) })] }));
+});
+TabMoreMenu.displayName = 'SuiTabMoreMenu';
+
+const TabScrollButton = forwardRef((props, ref) => {
+    const { classes, className, ButtonProps, direction = 'left', onClick, ...rest } = props;
+    const cls = useClasses('tab-scroll-button', classes, className);
+    const iconButtonClasses = useMemo(() => {
+        let combinedClasses = {
+            root: cls('button'),
+        };
+        if (ButtonProps?.classes) {
+            combinedClasses = combineClasses(combinedClasses, ButtonProps.classes);
+        }
+        return combinedClasses;
+    }, [ButtonProps?.classes, cls]);
+    const icon = direction === 'left' ? CaretLeftMd : CaretRightMd;
+    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 }) }));
+});
+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');
+    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(() => {
+        let childIndex = 0;
+        const visibleTabs = new Map();
+        Children.forEach(children, (child) => {
+            if (isValidElement(child)) {
+                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'),
+                    });
+                }
+                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') {
+                        logInDev({
+                            scope: 'Tabs',
+                            level: 'warn',
+                            message: [
+                                `Tab component missing recommended 'id' prop.`,
+                                `Tab value: "${childValue}"`,
+                                `Tab label: "${child.props.label || 'No label'}"`,
+                                '',
+                                'To fix this warning, add a unique id prop to the Tab component:',
+                                `<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'),
+                        });
+                    }
+                    const { tabId } = generateTabStableIds(tabsInstanceId, childValue);
+                    finalChild = cloneElement(child, {
+                        ...child.props,
+                        id: tabId,
+                    });
+                }
+                visibleTabs.set(childValue, { childIndex, child: finalChild });
+                childIndex += 1;
+            }
+        });
+        return visibleTabs;
+    }, [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 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()) {
+            const childElement = tabsChildren[childIndex];
+            if (!child || !childElement)
+                return;
+            tabsChildrenCache.current?.set(childValue, {
+                // @ts-ignore
+                child,
+                element: childElement,
+                width: childElement.offsetWidth,
+            });
+        }
+    });
+    const getSelectedTabElement = useEventCallback(() => {
+        const children = tabListRef.current?.children;
+        if (!children || children.length === 0 || value === null)
+            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;
+            });
+        }
+        else {
+            selectedIndex = visibleTabs.get(value)?.childIndex;
+        }
+        const selectedTabElement = children[selectedIndex];
+        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'),
+            });
+        }
+        // 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 visibleWidth = width +
+            pillGap -
+            (tabListRef.current ? getHorizontalPadding(tabListRef.current) : 0); // Excludes padding
+        const selectedItemWidth = (value !== null && tabsChildrenCache.current.get(value)?.width) || 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++) {
+            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;
+            }
+        }
+        if (hiddenItems.size) {
+            setShowMore(true);
+            setMoreMenuItems(Array.from(hiddenItems.entries()).map(([childValue, child]) => {
+                return { ...child.props, value: childValue, ref: child.ref };
+            }));
+        }
+        else {
+            setShowMore(false);
+        }
+        // @ts-ignore
+        const newVisibleTabs = new Map();
+        let childIndex = 0;
+        for (const [childValue, child] of visibleItems.entries()) {
+            newVisibleTabs.set(childValue, { childIndex, child });
+            childIndex++;
+        }
+        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;
+        hiddenTabsRef.current = hiddenItems;
+    });
+    const computeFloatingUnderline = useEventCallback((withoutAnimation = false) => {
+        const selectedTabElement = getSelectedTabElement();
+        if (!selectedTabElement)
+            return;
+        const currentWidth = floatingUnderlineWidthMotionValue.get();
+        const currentLeft = floatingUnderlineLeftMotionValue.get();
+        const targetWidth = selectedTabElement.offsetWidth;
+        const targetLeft = selectedTabElement.offsetLeft;
+        const updateWithoutAnimation = withoutAnimation || prefersReducedMotion;
+        if (updateWithoutAnimation) {
+            floatingUnderlineWidthMotionValue.set(targetWidth);
+            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;
+        if (moreRef.current) {
+            moreBtnWidth.current = moreRef.current.offsetWidth;
+        }
+        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';
+                    }
+                }
+            }
+            if (shouldUpdate.current) {
+                cacheTabsChildren();
+                computeMoreMenuWithCache();
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleTabs, fontsLoaded]);
+    useEffect(() => {
+        if (prevChildren && children !== prevChildren) {
+            setVisibleTabs(processedChildren);
+            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);
+            setVisibleTabs(processedChildren);
+        }
+        else {
+            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)
+                resizeObserver.observe(scrollerRef.current);
+            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);
+                });
+            }
+        }
+        return () => {
+            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();
+            if (selectedTabElement) {
+                selectedTabResizeObserver.observe(selectedTabElement);
+            }
+        }
+        return () => {
+            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,
+        showMore,
+        moreMenuItems,
+        processedChildren,
+        getSelectedTabElement,
+        computeMoreMenuWithCache,
+        computeFloatingUnderline,
+    };
+}
+function getHorizontalPadding(element) {
+    const style = getComputedStyle(element);
+    const paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10);
+    const paddingRight = parseInt(style.getPropertyValue('padding-right'), 10);
+    return paddingLeft + paddingRight;
+}
+
+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);
+    const { externalWindow } = useWindowContext();
+    const ResizeObserverClass = (externalWindow || window).ResizeObserver;
+    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);
+            if (currentTabsRef) {
+                resizeObserver.observe(currentTabsRef);
+            }
+        }
+        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;
+        scroll(scrollValue, 'neutral-01-slow');
+    }, [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) {
+            const tab = children[i];
+            if (totalSize + tab.clientWidth > containerSize) {
+                if (i === 0) {
+                    totalSize = containerSize;
+                }
+                break;
+            }
+            totalSize += tab.clientWidth;
+        }
+        return totalSize;
+    }, [scrollerRef, tabListRef]);
+    const handleStartScrollClick = useCallback(() => {
+        moveTabsScroll(-getScrollSize());
+    }, [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,
+    }), [
+        enable,
+        displayStartScroll,
+        handleStartScrollClick,
+        ScrollButtonStartProps,
+        displayEndScroll,
+        handleEndScrollClick,
+        ScrollButtonEndProps,
+    ]);
+};
+
+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"};
+
+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 pillGap = pill ? pillGapProp : 0;
+    const tabsRef = useRef(null);
+    const scrollerRef = useRef(null);
+    const tabListRef = useRef(null);
+    const rootRef = useForkRef(tabsRef, ref);
+    const moreRef = useRef(null);
+    const tabMoreMenuRef = useForkRef(MoreMenuProps?.ref, moreRef);
+    const floatingUnderlineWidthMotionValue = useMotionValue(0);
+    const floatingUnderlineLeftMotionValue = useMotionValue(0);
+    const floatingUnderlineOpacityMotionValue = useMotionValue(1);
+    const floatingUnderlineTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const cls = useClasses('tabs', classes, className);
+    const { onGroupInfoUpdate: groupInfoUpdateHandler, ...restProps } = props;
+    const { getRootProps, contextValue, selectedValue: value, } = useTabsList({
+        ...restProps,
+        rootRef,
+    });
+    const { processedChildren, visibleTabsChildren, showMore, moreMenuItems, getSelectedTabElement, computeFloatingUnderline, } = useComputedTabs({
+        variant,
+        value,
+        children,
+        pillGap,
+        onGroupInfoUpdate,
+        floatingUnderlineLeftMotionValue,
+        floatingUnderlineWidthMotionValue,
+        tabListRef,
+        scrollerRef,
+        moreRef,
+    });
+    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,
+                scrollTop: tabsNode.scrollTop,
+                scrollWidth: tabsNode.scrollWidth,
+                top: rect.top,
+                bottom: rect.bottom,
+                left: rect.left,
+                right: rect.right,
+            };
+        }
+        let tabMeta;
+        if (tabsNode && value !== null) {
+            const tab = getSelectedTabElement();
+            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,
+                    y: rect.y,
+                    top: rect.top,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                    left: rect.left,
+                };
+            }
+        }
+        return { tabsMeta, tabMeta };
+    });
+    const scrollStart = 'scrollLeft';
+    const start = 'left';
+    const end = 'right';
+    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;
+                scrollerRef.current[scrollStart] = value;
+            },
+        });
+    };
+    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);
+            // 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);
+        }
+    });
+    const { scrollButtonStart, scrollButtonEnd } = useTabsScroller({
+        enable: !!pill && variant === 'scrollable' && enableScrollButtons,
+        scrollerRef,
+        tabListRef,
+        scroll,
+        ScrollButtonStartProps,
+        ScrollButtonEndProps,
+    });
+    const prevValueAfterChildrenUpdate = useRef(value);
+    const prevVisibleTabsChildren = useRef(visibleTabsChildren);
+    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) {
+            prevVisibleTabsChildren.current = visibleTabsChildren;
+            prevValueAfterChildrenUpdate.current = value;
+        }
+        computeFloatingUnderline(noAnimationWhenFirstRender || noAnimationWhenNoValueChange);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleTabsChildren, value]);
+    const tabsContextValue = useMemo(() => ({
+        pill,
+        pillGap,
+        color,
+        setFloatingUnderlineVisibility: (isVisible) => {
+            floatingUnderlineOpacityMotionValue.set(isVisible ? 1 : 0);
+        },
+    }), [floatingUnderlineOpacityMotionValue, pill, pillGap, color]);
+    if (!processedChildren.size) {
+        return null;
+    }
+    return (jsx(TabsListProvider, { value: contextValue, children: jsx(TabsContext.Provider, { value: tabsContextValue, children: jsxs("div", { className: cls('root', {
+                    pill,
+                    scrollable: variant === 'scrollable',
+                    compact: variant === 'moreMenu',
+                    '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: {
+                                        left: floatingUnderlineLeftMotionValue,
+                                        width: floatingUnderlineWidthMotionValue,
+                                        opacity: floatingUnderlineOpacityMotionValue,
+                                    }, transition: floatingUnderlineTransition, className: cls('floating-underline') }))] }) }), scrollButtonEnd] }) }) }));
+});
+Tabs.displayName = 'SuiTabs';
+
+export { TabMoreMenu, TabScrollButton, Tabs, TabsContext, Tabs$1 as tabsStyle, useComputedTabs, useTabsContext, useTabsScroller };