@auth0/quantum-product 2.10.8 → 2.12.0

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 {};

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

@@ -0,0 +1,93 @@
+"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.useTabListKeyboard = void 0;
+var React = __importStar(require("react"));
+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,
+    };
+};
+exports.useTabListKeyboard = useTabListKeyboard;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IOverflowState } from '../tab-list-utils';
+interface IUseTabListOverflowProps {
+    children?: React.ReactNode;
+    maxVisibleTabs: number;
+    moreLabel: string;
+    getOverflowCountLabel: (overflowCount: number) => string;
+}
+export declare const useTabListOverflow: ({ children, maxVisibleTabs, moreLabel, getOverflowCountLabel, }: IUseTabListOverflowProps) => {
+    value: any;
+    onChange: ((value: any) => void) | undefined;
+    baseVisibleTabCount: number;
+    minimumVisibleTabCount: number;
+    defaultTabOrder: unknown[];
+    visibleChildren: React.ReactNode[];
+    overflowChildren: React.ReactNode[];
+    hasOverflow: boolean;
+    overflowCountLabel: string;
+    isSelectedValueVisible: boolean;
+    isSelectedValueInOverflow: boolean;
+    handleChange: (_evt: React.SyntheticEvent, newValue: unknown) => void;
+    setOverflowState: React.Dispatch<React.SetStateAction<IOverflowState>>;
+    promoteTabValue: (tabValue: unknown) => void;
+};
+export {};