@auth0/quantum-product 2.10.7 → 2.11.0

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionIndicator = exports.OverflowLabel = exports.OverflowLabelContainer = exports.OverflowButtonWrapper = exports.TabListContainer = exports.tabListComponentName = void 0;
+var styled_1 = require("../../styled");
+exports.tabListComponentName = 'QuantumTabList';
+exports.TabListContainer = (0, styled_1.styled)('div', {
+    name: exports.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',
+    });
+});
+exports.OverflowButtonWrapper = (0, styled_1.styled)('div', {
+    name: exports.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),
+    });
+});
+exports.OverflowLabelContainer = (0, styled_1.styled)('span', {
+    name: exports.tabListComponentName,
+    slot: 'OverflowLabelContainer',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    });
+});
+exports.OverflowLabel = (0, styled_1.styled)('span', {
+    name: exports.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)';
+exports.SelectionIndicator = (0, styled_1.styled)('span', {
+    name: exports.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/tabs/tab-list/tab-list-utils.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export type TabChildProps = {
+    component?: React.ElementType;
+    disabled?: boolean;
+    href?: string;
+    label?: React.ReactNode;
+    onClick?: (event: React.MouseEvent) => void;
+    value?: unknown;
+    analyticsId?: string;
+    [key: string]: unknown;
+};
+export type TabChild = React.ReactElement<TabChildProps>;
+export interface IOverflowState {
+    overflowCompensation: number;
+    orderedTabValues?: unknown[];
+    baselineVisibleTabCount: number;
+    baselineMoreLabel: string;
+    baselineTabOrder: unknown[];
+}
+export declare const isTabChild: (child: React.ReactNode) => child is TabChild;
+export declare const getResolvedChildValue: (child: TabChild, index: number) => unknown;
+export declare const getChildOrderValue: (child: React.ReactNode, index: number) => unknown;
+export declare const areValueArraysEqual: (left: unknown[], right: unknown[]) => boolean;
+interface ICreateOverflowStateProps {
+    baseVisibleTabCount: number;
+    moreLabel: string;
+    defaultTabOrder: unknown[];
+    overflowCompensation?: number;
+    orderedTabValues?: unknown[];
+}
+export declare const createOverflowState: ({ baseVisibleTabCount, moreLabel, defaultTabOrder, overflowCompensation, orderedTabValues, }: ICreateOverflowStateProps) => IOverflowState;
+export {};

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

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOverflowState = exports.areValueArraysEqual = exports.getChildOrderValue = exports.getResolvedChildValue = exports.isTabChild = void 0;
+var React = __importStar(require("react"));
+var isTabChild = function (child) { return React.isValidElement(child); };
+exports.isTabChild = isTabChild;
+var getResolvedChildValue = function (child, index) { var _a; return (_a = child.props.value) !== null && _a !== void 0 ? _a : index; };
+exports.getResolvedChildValue = getResolvedChildValue;
+var getChildOrderValue = function (child, index) {
+    var _a, _b;
+    if ((0, exports.isTabChild)(child)) {
+        return (_b = (_a = child.props.value) !== null && _a !== void 0 ? _a : child.key) !== null && _b !== void 0 ? _b : index;
+    }
+    return index;
+};
+exports.getChildOrderValue = getChildOrderValue;
+// 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; };
+var areValueArraysEqual = function (left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every(function (value, index) { return areTabValuesEqual(value, right[index]); });
+};
+exports.areValueArraysEqual = areValueArraysEqual;
+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,
+    });
+};
+exports.createOverflowState = createOverflowState;

package/tabs/tab-list/tab-list.d.ts

@@ -1,4 +1,11 @@
 import * as React from 'react';
 import { TabsProps } from '@mui/material/Tabs';
-export type ITabListProps = Omit<TabsProps, 'onChange' | 'value'>;
-export declare const TabList: React.FC<ITabListProps>;
+export interface ITabListProps extends Omit<TabsProps, 'onChange' | 'value'> {
+    /** Maximum number of tabs to show before collapsing into an overflow menu. @default Infinity */
+    maxVisibleTabs?: number;
+    /** Label for the overflow menu trigger button. @default "More" */
+    moreLabel?: string;
+    /** Accessible label generator for the overflow menu trigger button count. */
+    getOverflowCountLabel?: (overflowCount: number) => string;
+}
+export declare const TabList: React.ForwardRefExoticComponent<Omit<ITabListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -43,6 +43,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -50,15 +61,104 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
 var React = __importStar(require("react"));
 var Tabs_1 = __importDefault(require("@mui/material/Tabs"));
-var tabs_context_1 = require("../tabs-context");
-var TabList = function (props) {
-    var _a = (0, tabs_context_1.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(Tabs_1.default, __assign({}, props, { onChange: onChange ? handleChange : undefined, value: value }), props.children));
+var label_1 = require("../../label");
+var button_1 = require("../../button");
+var dropdown_menu_1 = require("../../dropdown-menu/dropdown-menu");
+var dropdown_menu_list_1 = require("../../dropdown-menu/dropdown-menu-list");
+var dropdown_menu_list_item_1 = require("../../dropdown-menu/dropdown-menu-list-item");
+var dropdown_menu_state_1 = require("../../dropdown-menu/dropdown-menu-state");
+var use_id_1 = require("../../utils/use-id");
+var quantum_icons_1 = require("@auth0/quantum-icons");
+var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
+var tab_list_overrides_1 = require("./tab-list-overrides");
+var tab_list_utils_1 = require("./tab-list-utils");
+var index_1 = require("./use-tab-list-indicator/index");
+var index_2 = require("./use-tab-list-keyboard/index");
+var index_3 = require("./use-tab-list-overflow/index");
+var defaultGetOverflowCountLabel = function (overflowCount) {
+    return "".concat(overflowCount, " more tab").concat(overflowCount === 1 ? '' : 's');
 };
-exports.TabList = TabList;
+exports.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 = (0, use_id_1.useId)();
+    var _f = (0, dropdown_menu_state_1.useDropdownMenuState)({ baseId: "tab-overflow-menu-".concat(overflowMenuId) }), triggerProps = _f.triggerProps, menuProps = _f.menuProps;
+    var containerRef = React.useRef(null);
+    var handleRef = (0, useForkRef_1.default)(ref, containerRef);
+    var overflowRef = React.useRef(null);
+    var overflowButtonRef = React.useRef(null);
+    var _g = (0, index_3.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 = (0, index_2.useTabListKeyboard)({
+        containerRef: containerRef,
+        overflowButtonRef: overflowButtonRef,
+        hasOverflow: hasOverflow,
+        menuId: menuProps.id,
+        menuOpen: menuProps.open,
+    }), handleTabsKeyDown = _h.handleTabsKeyDown, handleOverflowKeyDown = _h.handleOverflowKeyDown;
+    var indicatorState = (0, index_1.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(tab_list_overrides_1.TabListContainer, { ref: handleRef },
+        React.createElement(tab_list_overrides_1.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(Tabs_1.default, __assign({}, props, { TabIndicatorProps: { style: { display: 'none' } }, onChange: onChange ? handleChange : undefined, onKeyDown: handleTabsKeyDown, value: isSelectedValueVisible ? value : false }), visibleChildren),
+        hasOverflow && (React.createElement(tab_list_overrides_1.OverflowButtonWrapper, { ref: overflowRef },
+            React.createElement(button_1.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(tab_list_overrides_1.OverflowLabelContainer, null,
+                    React.createElement(tab_list_overrides_1.OverflowLabel, null,
+                        moreLabel,
+                        React.createElement(label_1.Label, { color: "default" }, overflowChildren.length)),
+                    React.createElement(quantum_icons_1.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(dropdown_menu_1.DropdownMenu, __assign({}, menuProps),
+                React.createElement(dropdown_menu_list_1.DropdownMenuList, null, overflowChildren.map(function (child) {
+                    if (!(0, tab_list_utils_1.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(dropdown_menu_list_item_1.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/tabs/tab-list/use-tab-list-indicator/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IOverflowState } from '../tab-list-utils';
+interface IIndicatorState {
+    leftOffset: number;
+    indicatorWidth: number;
+    isVisible: boolean;
+}
+interface IUseTabListIndicatorProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+    overflowRef: React.RefObject<HTMLDivElement>;
+    overflowButtonRef: React.RefObject<HTMLButtonElement>;
+    baseVisibleTabCount: number;
+    minimumVisibleTabCount: number;
+    moreLabel: string;
+    defaultTabOrder: unknown[];
+    hasOverflow: boolean;
+    visibleChildren: React.ReactNode[];
+    overflowChildrenLength: number;
+    isSelectedValueInOverflow: boolean;
+    value: unknown;
+    setOverflowState: React.Dispatch<React.SetStateAction<IOverflowState>>;
+}
+export declare const useTabListIndicator: ({ containerRef, overflowRef, overflowButtonRef, baseVisibleTabCount, minimumVisibleTabCount, moreLabel, defaultTabOrder, hasOverflow, visibleChildren, overflowChildrenLength, isSelectedValueInOverflow, value, setOverflowState, }: IUseTabListIndicatorProps) => {
+    indicatorState: IIndicatorState;
+};
+export {};

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

@@ -0,0 +1,226 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabListIndicator = void 0;
+var React = __importStar(require("react"));
+var tab_list_utils_1 = require("../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;
+};
+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 (0, tab_list_utils_1.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 };
+};
+exports.useTabListIndicator = useTabListIndicator;

package/tabs/tab-list/use-tab-list-keyboard/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IUseTabListKeyboardProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+    overflowButtonRef: React.RefObject<HTMLButtonElement>;
+    hasOverflow: boolean;
+    menuId?: string;
+    menuOpen: boolean;
+}
+export declare const useTabListKeyboard: ({ containerRef, overflowButtonRef, hasOverflow, menuId, menuOpen, }: IUseTabListKeyboardProps) => {
+    handleTabsKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleOverflowKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+export {};