@auth0/quantum-product 2.10.8 → 2.11.0

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -70,7 +70,7 @@ var classes_1 = require("../../styles/classes");
 var Root = (0, styled_1.styled)(menu_1.MenuItem, { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'Root' })(function (_a) {
     var _b, _c, _d, _e;
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: 6, transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(4), height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(0.5), transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
             duration: theme.transitions.duration.shortest,
         }), '&:active,&:hover': {
             color: theme.tokens.color_fg_link_subtle_hover,
@@ -97,6 +97,7 @@ var Root = (0, styled_1.styled)(menu_1.MenuItem, { name: dropdown_menu_list_item
             opacity: 1,
             color: theme.tokens.color_fg_disabled,
         } }), (ownerState.size === 'large' && {
+        minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(5),
         padding: theme.spacing(0.75, 1.5),
     })), (ownerState.color === 'danger' && (_b = {
             color: theme.tokens.color_fg_link_danger

package/dropdown-menu/dropdown-menu.js

@@ -76,7 +76,7 @@ var Root = (0, styled_1.styled)(popover_1.Popover, { name: dropdown_menu_classes
         },
         _b["& .".concat(dropdown_menu_classes_1.dropdownMenuClasses.paper)] = __assign({ 
             // taken from MUI's menu component
-            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: 8, border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: theme.spacing(1.25), border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
             padding: theme.spacing(1.5),
             minWidth: theme.typography.pxToRem(260),
         })),

package/esm/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -31,7 +31,7 @@ import { useMergedClasses } from '../../styles/classes';
 var Root = styled(MenuItem, { name: dropdownMenuListItemComponentName, slot: 'Root' })(function (_a) {
     var _b, _c, _d, _e;
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: 6, transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(4), height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(0.5), transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
             duration: theme.transitions.duration.shortest,
         }), '&:active,&:hover': {
             color: theme.tokens.color_fg_link_subtle_hover,
@@ -58,6 +58,7 @@ var Root = styled(MenuItem, { name: dropdownMenuListItemComponentName, slot: 'Ro
             opacity: 1,
             color: theme.tokens.color_fg_disabled,
         } }), (ownerState.size === 'large' && {
+        minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(5),
         padding: theme.spacing(0.75, 1.5),
     })), (ownerState.color === 'danger' && (_b = {
             color: theme.tokens.color_fg_link_danger

package/esm/dropdown-menu/dropdown-menu.js

@@ -37,7 +37,7 @@ var Root = styled(Popover, { name: dropdownMenuComponentName, slot: 'Root' })(fu
         },
         _b["& .".concat(dropdownMenuClasses.paper)] = __assign({ 
             // taken from MUI's menu component
-            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: 8, border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: theme.spacing(1.25), border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
             padding: theme.spacing(1.5),
             minWidth: theme.typography.pxToRem(260),
         })),

package/esm/tabs/tab/tab-override.js

@@ -15,10 +15,18 @@ export var createMuiTabOverrides = function (_a) {
         ],
         styleOverrides: {
             root: (_b = {
-                    paddingLeft: spacing(0.5),
-                    paddingRight: spacing(0.5),
-                    margin: spacing(0, 1.5),
-                    minWidth: 'unset'
+                    position: 'relative',
+                    zIndex: 1,
+                    padding: spacing(0.75),
+                    marginRight: 0,
+                    height: spacing(4),
+                    minHeight: spacing(4),
+                    minWidth: 'unset',
+                    transition: 'background-color 0.25s cubic-bezier(0, 0, 0.2, 1)',
+                    '@media (prefers-reduced-motion: reduce)': {
+                        transition: 'none',
+                    },
+                    borderRadius: spacing(0.5)
                 },
                 _b[breakpoints.up('sm')] = {
                     minWidth: 'unset',
@@ -28,17 +36,20 @@ export var createMuiTabOverrides = function (_a) {
                 },
                 _b),
             textColorPrimary: (_c = {},
+                _c["&.".concat(tabClasses.disabled)] = {
+                    color: tokens.color_fg_disabled,
+                },
                 _c["&.".concat(tabClasses.selected)] = {
-                    color: tokens.color_fg_selected,
+                    color: tokens.color_fg_bold,
                 },
                 _c['&:hover'] = {
-                    color: tokens.color_fg_selected,
+                    color: tokens.color_fg_bold,
                 },
                 _c['&:focus-visible'] = {
                     boxShadow: "0 0 0 2px ".concat(tokens.color_border_focus, " inset"),
                 },
                 _c.color = tokens.color_fg_link_subtle,
-                _c.fontWeight = typography.fontWeightRegular,
+                _c.fontWeight = typography.fontWeightSemibold,
                 _c),
         },
     };

package/esm/tabs/tab-list/tab-list-overrides.js

@@ -0,0 +1,94 @@
+import { styled } from '../../styled';
+export var tabListComponentName = 'QuantumTabList';
+export var TabListContainer = styled('div', {
+    name: tabListComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        isolation: 'isolate',
+        borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
+        overflow: 'hidden',
+    });
+});
+export var OverflowButtonWrapper = styled('div', {
+    name: tabListComponentName,
+    slot: 'OverflowButtonWrapper',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: theme.spacing(0.5),
+        flexShrink: 0,
+        height: theme.spacing(3.5),
+        marginBottom: theme.spacing(1),
+    });
+});
+export var OverflowLabelContainer = styled('span', {
+    name: tabListComponentName,
+    slot: 'OverflowLabelContainer',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    });
+});
+export var OverflowLabel = styled('span', {
+    name: tabListComponentName,
+    slot: 'OverflowLabel',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.spacing(1),
+        fontSize: theme.typography.pxToRem(14),
+        fontWeight: theme.typography.fontWeightSemibold,
+        color: theme.tokens.color_fg_default,
+    });
+});
+var TIMING_FUNCTION = 'cubic-bezier(0.19, 1, 0.22, 1)';
+export var SelectionIndicator = styled('span', {
+    name: tabListComponentName,
+    slot: 'SelectionIndicator',
+    shouldForwardProp: function (prop) { return !['ownerState'].includes(String(prop)); },
+})(function (_a) {
+    var theme = _a.theme, _b = _a.ownerState, leftOffset = _b.leftOffset, indicatorWidth = _b.indicatorWidth, isVisible = _b.isVisible;
+    return ({
+        position: 'absolute',
+        top: 0,
+        bottom: theme.spacing(1),
+        left: 0,
+        width: indicatorWidth,
+        borderRadius: theme.spacing(0.5),
+        backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
+        pointerEvents: 'none',
+        zIndex: 0,
+        opacity: isVisible ? 1 : 0,
+        transform: "translate3d(".concat(leftOffset, "px, 0, 0)"),
+        willChange: 'transform, width, opacity',
+        transition: "transform ".concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION, ", width ").concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION, ", opacity ").concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION),
+        '@media (prefers-reduced-motion: reduce)': {
+            transition: 'none',
+        },
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            display: 'block',
+            bottom: theme.spacing(-1),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            height: theme.spacing(0.25),
+            width: "calc(100% - ".concat(theme.spacing(2), ")"),
+            backgroundColor: theme.tokens.color_bg_brand_primary,
+        },
+    });
+});

package/esm/tabs/tab-list/tab-list-utils.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export var isTabChild = function (child) { return React.isValidElement(child); };
+export var getResolvedChildValue = function (child, index) { var _a; return (_a = child.props.value) !== null && _a !== void 0 ? _a : index; };
+export var getChildOrderValue = function (child, index) {
+    var _a, _b;
+    if (isTabChild(child)) {
+        return (_b = (_a = child.props.value) !== null && _a !== void 0 ? _a : child.key) !== null && _b !== void 0 ? _b : index;
+    }
+    return index;
+};
+// Tab selection uses identity equality for object values elsewhere in the tabs stack,
+// so overflow ordering should follow the same semantics.
+var areTabValuesEqual = function (left, right) { return left === right; };
+export var areValueArraysEqual = function (left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every(function (value, index) { return areTabValuesEqual(value, right[index]); });
+};
+export var createOverflowState = function (_a) {
+    var baseVisibleTabCount = _a.baseVisibleTabCount, moreLabel = _a.moreLabel, defaultTabOrder = _a.defaultTabOrder, _b = _a.overflowCompensation, overflowCompensation = _b === void 0 ? 0 : _b, orderedTabValues = _a.orderedTabValues;
+    return ({
+        overflowCompensation: overflowCompensation,
+        orderedTabValues: orderedTabValues,
+        baselineVisibleTabCount: baseVisibleTabCount,
+        baselineMoreLabel: moreLabel,
+        baselineTabOrder: defaultTabOrder,
+    });
+};

package/esm/tabs/tab-list/tab-list.js

@@ -9,16 +9,117 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
 import MuiTabs from '@mui/material/Tabs';
-import { useTabsContext } from '../tabs-context';
-export var TabList = function (props) {
-    var _a = useTabsContext(), onChange = _a.onChange, value = _a.value;
-    var handleChange = function (_evt, newValue) {
-        // onChange could be optional in react-router applications
-        if (onChange) {
-            onChange(newValue);
-        }
-    };
-    return (React.createElement(MuiTabs, __assign({}, props, { onChange: onChange ? handleChange : undefined, value: value }), props.children));
+import { Label } from '../../label';
+import { Button } from '../../button';
+import { DropdownMenu } from '../../dropdown-menu/dropdown-menu';
+import { DropdownMenuList } from '../../dropdown-menu/dropdown-menu-list';
+import { DropdownMenuListItem } from '../../dropdown-menu/dropdown-menu-list-item';
+import { useDropdownMenuState } from '../../dropdown-menu/dropdown-menu-state';
+import { useId } from '../../utils/use-id';
+import { ChevronDown } from '@auth0/quantum-icons';
+import useForkRef from '@mui/utils/useForkRef';
+import { OverflowButtonWrapper, OverflowLabel, OverflowLabelContainer, SelectionIndicator, TabListContainer, } from './tab-list-overrides';
+import { isTabChild } from './tab-list-utils';
+import { useTabListIndicator } from './use-tab-list-indicator/index';
+import { useTabListKeyboard } from './use-tab-list-keyboard/index';
+import { useTabListOverflow } from './use-tab-list-overflow/index';
+var defaultGetOverflowCountLabel = function (overflowCount) {
+    return "".concat(overflowCount, " more tab").concat(overflowCount === 1 ? '' : 's');
 };
+export var TabList = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.maxVisibleTabs, maxVisibleTabs = _c === void 0 ? Infinity : _c, _d = _a.moreLabel, moreLabel = _d === void 0 ? 'More' : _d, _e = _a.getOverflowCountLabel, getOverflowCountLabel = _e === void 0 ? defaultGetOverflowCountLabel : _e, props = __rest(_a, ["maxVisibleTabs", "moreLabel", "getOverflowCountLabel"]);
+    var overflowMenuId = useId();
+    var _f = useDropdownMenuState({ baseId: "tab-overflow-menu-".concat(overflowMenuId) }), triggerProps = _f.triggerProps, menuProps = _f.menuProps;
+    var containerRef = React.useRef(null);
+    var handleRef = useForkRef(ref, containerRef);
+    var overflowRef = React.useRef(null);
+    var overflowButtonRef = React.useRef(null);
+    var _g = useTabListOverflow({
+        children: props.children,
+        maxVisibleTabs: maxVisibleTabs,
+        moreLabel: moreLabel,
+        getOverflowCountLabel: getOverflowCountLabel,
+    }), value = _g.value, onChange = _g.onChange, baseVisibleTabCount = _g.baseVisibleTabCount, minimumVisibleTabCount = _g.minimumVisibleTabCount, defaultTabOrder = _g.defaultTabOrder, visibleChildren = _g.visibleChildren, overflowChildren = _g.overflowChildren, hasOverflow = _g.hasOverflow, overflowCountLabel = _g.overflowCountLabel, isSelectedValueVisible = _g.isSelectedValueVisible, isSelectedValueInOverflow = _g.isSelectedValueInOverflow, handleChange = _g.handleChange, setOverflowState = _g.setOverflowState, promoteTabValue = _g.promoteTabValue;
+    var _h = useTabListKeyboard({
+        containerRef: containerRef,
+        overflowButtonRef: overflowButtonRef,
+        hasOverflow: hasOverflow,
+        menuId: menuProps.id,
+        menuOpen: menuProps.open,
+    }), handleTabsKeyDown = _h.handleTabsKeyDown, handleOverflowKeyDown = _h.handleOverflowKeyDown;
+    var indicatorState = useTabListIndicator({
+        containerRef: containerRef,
+        overflowRef: overflowRef,
+        overflowButtonRef: overflowButtonRef,
+        baseVisibleTabCount: baseVisibleTabCount,
+        minimumVisibleTabCount: minimumVisibleTabCount,
+        moreLabel: moreLabel,
+        defaultTabOrder: defaultTabOrder,
+        hasOverflow: hasOverflow,
+        visibleChildren: visibleChildren,
+        overflowChildrenLength: overflowChildren.length,
+        isSelectedValueInOverflow: isSelectedValueInOverflow,
+        value: value,
+        setOverflowState: setOverflowState,
+    }).indicatorState;
+    return (React.createElement(TabListContainer, { ref: handleRef },
+        React.createElement(SelectionIndicator, { className: (_b = props.classes) === null || _b === void 0 ? void 0 : _b.indicator, ownerState: {
+                leftOffset: indicatorState.leftOffset,
+                indicatorWidth: indicatorState.indicatorWidth,
+                isVisible: indicatorState.isVisible,
+            } }),
+        React.createElement(MuiTabs, __assign({}, props, { TabIndicatorProps: { style: { display: 'none' } }, onChange: onChange ? handleChange : undefined, onKeyDown: handleTabsKeyDown, value: isSelectedValueVisible ? value : false }), visibleChildren),
+        hasOverflow && (React.createElement(OverflowButtonWrapper, { ref: overflowRef },
+            React.createElement(Button, __assign({}, triggerProps, { ref: overflowButtonRef, "aria-controls": menuProps.open ? triggerProps['aria-controls'] : undefined, "aria-label": overflowCountLabel, "data-selected": isSelectedValueInOverflow ? 'true' : undefined, onKeyDown: handleOverflowKeyDown, label: React.createElement(OverflowLabelContainer, null,
+                    React.createElement(OverflowLabel, null,
+                        moreLabel,
+                        React.createElement(Label, { color: "default" }, overflowChildren.length)),
+                    React.createElement(ChevronDown, { size: 16, color: "currentColor" })), size: "small", variant: "link", sx: function (theme) { return ({
+                    padding: theme.spacing(0.65, 1),
+                    transition: 'none',
+                    '&:hover': { background: 'transparent' },
+                    '&:hover *': {
+                        color: theme.tokens.color_fg_bold,
+                    },
+                    '&:focus': { outline: 'none' },
+                    '&:focus-visible': {
+                        boxShadow: "0 0 0 2px ".concat(theme.tokens.color_border_focus, " inset"),
+                        transition: 'none',
+                    },
+                }); } })),
+            React.createElement(DropdownMenu, __assign({}, menuProps),
+                React.createElement(DropdownMenuList, null, overflowChildren.map(function (child) {
+                    if (!isTabChild(child))
+                        return null;
+                    var _a = child.props, label = _a.label, tabValue = _a.value, disabled = _a.disabled, tabOnClick = _a.onClick, _icon = _a.icon, _iconPosition = _a.iconPosition, _labelIcon = _a.labelIcon, _productReleaseStage = _a.productReleaseStage, _sx = _a.sx, _textColor = _a.textColor, _wrapped = _a.wrapped, overflowItemProps = __rest(_a, ["label", "value", "disabled", "onClick", "icon", "iconPosition", "labelIcon", "productReleaseStage", "sx", "textColor", "wrapped"]);
+                    var isSelected = tabValue === value;
+                    return (React.createElement(DropdownMenuListItem, __assign({ key: String(tabValue), title: label, selected: isSelected, disabled: disabled }, overflowItemProps, { onClick: function (event) {
+                            if (disabled)
+                                return;
+                            if (tabOnClick) {
+                                tabOnClick(event);
+                            }
+                            promoteTabValue(tabValue);
+                            if (onChange) {
+                                onChange(tabValue);
+                            }
+                            if (menuProps.onClose) {
+                                menuProps.onClose({}, 'itemSelect');
+                            }
+                        } })));
+                })))))));
+});

package/esm/tabs/tab-list/use-tab-list-indicator/index.js

@@ -0,0 +1,189 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from 'react';
+import { createOverflowState } from '../tab-list-utils';
+var RESIZE_SETTLE_DELAY = 120;
+var HIDDEN_INDICATOR_STATE = { leftOffset: 0, indicatorWidth: 0, isVisible: false };
+var getHiddenIndicatorState = function (currentValue) {
+    if (currentValue.isVisible === HIDDEN_INDICATOR_STATE.isVisible &&
+        currentValue.leftOffset === HIDDEN_INDICATOR_STATE.leftOffset &&
+        currentValue.indicatorWidth === HIDDEN_INDICATOR_STATE.indicatorWidth) {
+        return currentValue;
+    }
+    return HIDDEN_INDICATOR_STATE;
+};
+export var useTabListIndicator = function (_a) {
+    var containerRef = _a.containerRef, overflowRef = _a.overflowRef, overflowButtonRef = _a.overflowButtonRef, baseVisibleTabCount = _a.baseVisibleTabCount, minimumVisibleTabCount = _a.minimumVisibleTabCount, moreLabel = _a.moreLabel, defaultTabOrder = _a.defaultTabOrder, hasOverflow = _a.hasOverflow, visibleChildren = _a.visibleChildren, overflowChildrenLength = _a.overflowChildrenLength, isSelectedValueInOverflow = _a.isSelectedValueInOverflow, value = _a.value, setOverflowState = _a.setOverflowState;
+    var _b = __read(React.useState(0), 2), measurementVersion = _b[0], setMeasurementVersion = _b[1];
+    var _c = __read(React.useState(HIDDEN_INDICATOR_STATE), 2), indicatorState = _c[0], setIndicatorState = _c[1];
+    var resizeResetTimeoutRef = React.useRef();
+    var previousContainerWidthRef = React.useRef(null);
+    var clearResizeResetTimeout = React.useCallback(function () {
+        if (resizeResetTimeoutRef.current === undefined) {
+            return;
+        }
+        window.clearTimeout(resizeResetTimeoutRef.current);
+        resizeResetTimeoutRef.current = undefined;
+    }, []);
+    React.useLayoutEffect(function () {
+        if (!hasOverflow || !containerRef.current || !overflowRef.current) {
+            return;
+        }
+        var visibleTabs = containerRef.current.querySelectorAll('[role="tab"]');
+        var firstVisibleTab = visibleTabs[0];
+        var lastVisibleTab = visibleTabs[visibleTabs.length - 1];
+        if (!firstVisibleTab || !lastVisibleTab) {
+            return;
+        }
+        var containerRect = containerRef.current.getBoundingClientRect();
+        var firstVisibleTabRect = firstVisibleTab.getBoundingClientRect();
+        var lastVisibleTabRect = lastVisibleTab.getBoundingClientRect();
+        var overflowRect = overflowRef.current.getBoundingClientRect();
+        if (containerRect.width === 0 ||
+            firstVisibleTabRect.width === 0 ||
+            lastVisibleTabRect.width === 0 ||
+            overflowRect.width === 0) {
+            return;
+        }
+        var isClippedAtStart = firstVisibleTabRect.left < containerRect.left;
+        var overlapsOverflowTrigger = lastVisibleTabRect.right >= overflowRect.left;
+        if (isClippedAtStart || overlapsOverflowTrigger) {
+            setOverflowState(function (currentValue) {
+                var nextOverflowCompensation = Math.min(currentValue.overflowCompensation + 1, baseVisibleTabCount - minimumVisibleTabCount);
+                if (nextOverflowCompensation === currentValue.overflowCompensation) {
+                    return currentValue;
+                }
+                return __assign(__assign({}, currentValue), { overflowCompensation: nextOverflowCompensation, baselineVisibleTabCount: baseVisibleTabCount, baselineMoreLabel: moreLabel, baselineTabOrder: defaultTabOrder });
+            });
+        }
+    }, [
+        baseVisibleTabCount,
+        containerRef,
+        defaultTabOrder,
+        measurementVersion,
+        minimumVisibleTabCount,
+        moreLabel,
+        hasOverflow,
+        overflowChildrenLength,
+        overflowRef,
+        setOverflowState,
+        visibleChildren,
+    ]);
+    React.useLayoutEffect(function () {
+        if (!containerRef.current) {
+            setIndicatorState(getHiddenIndicatorState);
+            return;
+        }
+        var selectedVisibleTab = containerRef.current.querySelector('[role="tab"][aria-selected="true"]');
+        var indicatorTarget = selectedVisibleTab || (isSelectedValueInOverflow ? overflowButtonRef.current : null);
+        if (!indicatorTarget) {
+            setIndicatorState(getHiddenIndicatorState);
+            return;
+        }
+        var containerRect = containerRef.current.getBoundingClientRect();
+        var targetRect = indicatorTarget.getBoundingClientRect();
+        if (containerRect.width === 0 || targetRect.width === 0) {
+            setIndicatorState(getHiddenIndicatorState);
+            return;
+        }
+        var nextIndicatorState = {
+            leftOffset: targetRect.left - containerRect.left,
+            indicatorWidth: targetRect.width,
+            isVisible: true,
+        };
+        setIndicatorState(function (currentValue) {
+            if (currentValue.isVisible === nextIndicatorState.isVisible &&
+                currentValue.leftOffset === nextIndicatorState.leftOffset &&
+                currentValue.indicatorWidth === nextIndicatorState.indicatorWidth) {
+                return currentValue;
+            }
+            return nextIndicatorState;
+        });
+    }, [
+        containerRef,
+        isSelectedValueInOverflow,
+        measurementVersion,
+        overflowButtonRef,
+        overflowChildrenLength,
+        value,
+        visibleChildren,
+    ]);
+    React.useLayoutEffect(function () {
+        if (!containerRef.current || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        previousContainerWidthRef.current = containerRef.current.getBoundingClientRect().width;
+        var observer = new ResizeObserver(function () {
+            var _a, _b;
+            var nextContainerWidth = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+            var previousContainerWidth = previousContainerWidthRef.current;
+            var isExpanding = previousContainerWidth !== null && nextContainerWidth > previousContainerWidth;
+            previousContainerWidthRef.current = nextContainerWidth;
+            if (isExpanding) {
+                clearResizeResetTimeout();
+                resizeResetTimeoutRef.current = window.setTimeout(function () {
+                    setOverflowState(function (currentValue) {
+                        if (currentValue.overflowCompensation === 0) {
+                            return currentValue;
+                        }
+                        return createOverflowState({
+                            baseVisibleTabCount: baseVisibleTabCount,
+                            moreLabel: moreLabel,
+                            defaultTabOrder: defaultTabOrder,
+                            overflowCompensation: 0,
+                            orderedTabValues: currentValue.orderedTabValues,
+                        });
+                    });
+                    setMeasurementVersion(function (currentValue) { return currentValue + 1; });
+                    resizeResetTimeoutRef.current = undefined;
+                }, RESIZE_SETTLE_DELAY);
+            }
+            else {
+                clearResizeResetTimeout();
+            }
+            setMeasurementVersion(function (currentValue) { return currentValue + 1; });
+        });
+        observer.observe(containerRef.current);
+        if (overflowRef.current) {
+            observer.observe(overflowRef.current);
+        }
+        return function () {
+            clearResizeResetTimeout();
+            observer.disconnect();
+        };
+    }, [
+        baseVisibleTabCount,
+        clearResizeResetTimeout,
+        containerRef,
+        defaultTabOrder,
+        moreLabel,
+        overflowRef,
+        setOverflowState,
+    ]);
+    return { indicatorState: indicatorState };
+};

package/esm/tabs/tab-list/use-tab-list-keyboard/index.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export var useTabListKeyboard = function (_a) {
+    var containerRef = _a.containerRef, overflowButtonRef = _a.overflowButtonRef, hasOverflow = _a.hasOverflow, menuId = _a.menuId, menuOpen = _a.menuOpen;
+    var shouldFocusOverflowMenuRef = React.useRef(false);
+    var focusLastVisibleTab = React.useCallback(function () {
+        var _a;
+        var visibleTabs = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tab"]');
+        var lastVisibleTab = visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs[visibleTabs.length - 1];
+        lastVisibleTab === null || lastVisibleTab === void 0 ? void 0 : lastVisibleTab.focus();
+    }, [containerRef]);
+    var handleTabsKeyDown = React.useCallback(function (event) {
+        var _a;
+        if (!hasOverflow || !overflowButtonRef.current || event.key !== 'ArrowRight') {
+            return;
+        }
+        var visibleTabs = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tab"]');
+        var lastVisibleTab = visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs[visibleTabs.length - 1];
+        if (lastVisibleTab && event.target === lastVisibleTab) {
+            event.preventDefault();
+            overflowButtonRef.current.focus();
+        }
+    }, [containerRef, hasOverflow, overflowButtonRef]);
+    var handleOverflowKeyDown = React.useCallback(function (event) {
+        if ((event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') && !menuOpen) {
+            shouldFocusOverflowMenuRef.current = true;
+        }
+        if (event.key !== 'ArrowLeft') {
+            return;
+        }
+        event.preventDefault();
+        focusLastVisibleTab();
+    }, [focusLastVisibleTab, menuOpen]);
+    React.useEffect(function () {
+        if (!menuOpen || !shouldFocusOverflowMenuRef.current) {
+            return;
+        }
+        var focusOverflowMenuItem = function () {
+            var overflowMenu = document.getElementById(menuId !== null && menuId !== void 0 ? menuId : '');
+            if (!overflowMenu) {
+                return;
+            }
+            var nextFocusedItem = overflowMenu.querySelector('[role="menuitem"][aria-selected="true"]:not([aria-disabled="true"])') || overflowMenu.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+            if (!nextFocusedItem) {
+                return;
+            }
+            nextFocusedItem.focus();
+            shouldFocusOverflowMenuRef.current = false;
+        };
+        var frameId = window.requestAnimationFrame(focusOverflowMenuItem);
+        return function () { return window.cancelAnimationFrame(frameId); };
+    }, [menuId, menuOpen]);
+    return {
+        handleTabsKeyDown: handleTabsKeyDown,
+        handleOverflowKeyDown: handleOverflowKeyDown,
+    };
+};