@auth0/quantum-product 2.10.8 → 2.11.0

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

@@ -0,0 +1,149 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { useTabsContext } from '../../tabs-context';
+import { areValueArraysEqual, createOverflowState, getChildOrderValue, getResolvedChildValue, isTabChild, } from '../tab-list-utils';
+export var useTabListOverflow = function (_a) {
+    var children = _a.children, maxVisibleTabs = _a.maxVisibleTabs, moreLabel = _a.moreLabel, getOverflowCountLabel = _a.getOverflowCountLabel;
+    var _b = useTabsContext(), onChange = _b.onChange, value = _b.value;
+    var allChildren = React.useMemo(function () { return React.Children.toArray(children); }, [children]);
+    var resolvedChildren = React.useMemo(function () {
+        return allChildren.map(function (child, index) {
+            if (!isTabChild(child) || child.props.value !== undefined) {
+                return child;
+            }
+            return React.cloneElement(child, { value: getResolvedChildValue(child, index) });
+        });
+    }, [allChildren]);
+    var defaultTabOrder = React.useMemo(function () { return resolvedChildren.map(function (child, index) { return getChildOrderValue(child, index); }); }, [resolvedChildren]);
+    var childByOrderValue = React.useMemo(function () {
+        return new Map(defaultTabOrder.map(function (orderValue, index) { return [orderValue, resolvedChildren[index]]; }));
+    }, [defaultTabOrder, resolvedChildren]);
+    var baseVisibleTabCount = React.useMemo(function () {
+        var normalizedMaxVisibleTabs = Number.isFinite(maxVisibleTabs) && maxVisibleTabs > 0 ? maxVisibleTabs : resolvedChildren.length;
+        return Math.min(resolvedChildren.length, normalizedMaxVisibleTabs);
+    }, [resolvedChildren.length, maxVisibleTabs]);
+    var _c = __read(React.useState(function () {
+        return createOverflowState({
+            baseVisibleTabCount: baseVisibleTabCount,
+            moreLabel: moreLabel,
+            defaultTabOrder: defaultTabOrder,
+        });
+    }), 2), overflowState = _c[0], setOverflowState = _c[1];
+    var shouldResetOverflowState = overflowState.baselineVisibleTabCount !== baseVisibleTabCount ||
+        overflowState.baselineMoreLabel !== moreLabel ||
+        !areValueArraysEqual(overflowState.baselineTabOrder, defaultTabOrder);
+    var hasValidOrderedTabValues = overflowState.orderedTabValues !== undefined &&
+        overflowState.orderedTabValues.length === defaultTabOrder.length &&
+        overflowState.orderedTabValues.every(function (orderValue) { return childByOrderValue.has(orderValue); });
+    var overflowCompensation = shouldResetOverflowState ? 0 : overflowState.overflowCompensation;
+    var orderedTabValues = shouldResetOverflowState || !hasValidOrderedTabValues ? undefined : overflowState.orderedTabValues;
+    var minimumVisibleTabCount = baseVisibleTabCount > 0 ? 1 : 0;
+    var visibleTabCount = Math.max(minimumVisibleTabCount, baseVisibleTabCount - overflowCompensation);
+    var orderedChildren = React.useMemo(function () {
+        if (!orderedTabValues || orderedTabValues.length !== resolvedChildren.length) {
+            return resolvedChildren;
+        }
+        var mappedChildren = orderedTabValues.map(function (orderValue) { return childByOrderValue.get(orderValue); });
+        if (mappedChildren.some(function (child) { return child === undefined; })) {
+            return resolvedChildren;
+        }
+        return mappedChildren;
+    }, [childByOrderValue, orderedTabValues, resolvedChildren]);
+    var resetOverflowState = React.useCallback(function () {
+        setOverflowState(createOverflowState({
+            baseVisibleTabCount: baseVisibleTabCount,
+            moreLabel: moreLabel,
+            defaultTabOrder: defaultTabOrder,
+        }));
+    }, [baseVisibleTabCount, defaultTabOrder, moreLabel]);
+    var handleChange = React.useCallback(function (_evt, newValue) {
+        if (orderedTabValues !== undefined) {
+            resetOverflowState();
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+    }, [onChange, orderedTabValues, resetOverflowState]);
+    var _d = React.useMemo(function () {
+        var shouldOverflow = orderedChildren.length > visibleTabCount;
+        if (!shouldOverflow) {
+            return {
+                visibleChildren: orderedChildren,
+                overflowChildren: [],
+            };
+        }
+        var visible = orderedChildren.slice(0, visibleTabCount);
+        var selectedChild = orderedChildren.find(function (child) { return isTabChild(child) && child.props.value === value; });
+        if (selectedChild && !visible.includes(selectedChild) && visibleTabCount > 0) {
+            visible = __spreadArray(__spreadArray([], __read(visible.slice(0, Math.max(visibleTabCount - 1, 0))), false), [selectedChild], false);
+        }
+        var visibleSet = new Set(visible);
+        var overflow = orderedChildren.filter(function (child) { return !visibleSet.has(child); });
+        return {
+            visibleChildren: visible,
+            overflowChildren: overflow,
+        };
+    }, [orderedChildren, value, visibleTabCount]), visibleChildren = _d.visibleChildren, overflowChildren = _d.overflowChildren;
+    var hasOverflow = overflowChildren.length > 0;
+    var overflowCountLabel = React.useMemo(function () { return getOverflowCountLabel(overflowChildren.length); }, [getOverflowCountLabel, overflowChildren.length]);
+    var isSelectedValueVisible = React.useMemo(function () { return visibleChildren.some(function (child) { return isTabChild(child) && child.props.value === value; }); }, [value, visibleChildren]);
+    var isSelectedValueInOverflow = React.useMemo(function () { return overflowChildren.some(function (child) { return isTabChild(child) && child.props.value === value; }); }, [overflowChildren, value]);
+    var promoteTabValue = React.useCallback(function (tabValue) {
+        var _a;
+        var nextOrderedChildren = __spreadArray([], __read(orderedChildren), false);
+        var lastVisibleIndex = baseVisibleTabCount - 1;
+        var selectedIndex = nextOrderedChildren.findIndex(function (orderedChild) { return isTabChild(orderedChild) && orderedChild.props.value === tabValue; });
+        if (selectedIndex !== -1 && lastVisibleIndex >= 0 && selectedIndex !== lastVisibleIndex) {
+            _a = __read([
+                nextOrderedChildren[selectedIndex],
+                nextOrderedChildren[lastVisibleIndex],
+            ], 2), nextOrderedChildren[lastVisibleIndex] = _a[0], nextOrderedChildren[selectedIndex] = _a[1];
+        }
+        setOverflowState(createOverflowState({
+            baseVisibleTabCount: baseVisibleTabCount,
+            moreLabel: moreLabel,
+            defaultTabOrder: defaultTabOrder,
+            orderedTabValues: nextOrderedChildren.map(function (orderedChild, index) { return getChildOrderValue(orderedChild, index); }),
+        }));
+    }, [baseVisibleTabCount, defaultTabOrder, moreLabel, orderedChildren]);
+    return {
+        value: value,
+        onChange: onChange,
+        baseVisibleTabCount: baseVisibleTabCount,
+        minimumVisibleTabCount: minimumVisibleTabCount,
+        defaultTabOrder: defaultTabOrder,
+        visibleChildren: visibleChildren,
+        overflowChildren: overflowChildren,
+        hasOverflow: hasOverflow,
+        overflowCountLabel: overflowCountLabel,
+        isSelectedValueVisible: isSelectedValueVisible,
+        isSelectedValueInOverflow: isSelectedValueInOverflow,
+        handleChange: handleChange,
+        setOverflowState: setOverflowState,
+        promoteTabValue: promoteTabValue,
+    };
+};

package/esm/tabs/tabs-overrides.js

@@ -1,19 +1,18 @@
 export var createMuiTabsOverrides = function (_a) {
-    var tokens = _a.tokens;
+    var spacing = _a.spacing;
     return {
         defaultProps: {
             indicatorColor: 'primary',
             textColor: 'primary',
         },
         styleOverrides: {
-            indicator: {
-                backgroundColor: tokens.color_border_selected,
+            root: {
+                minHeight: 'unset',
             },
             flexContainer: {
-                display: 'block',
-            },
-            scroller: {
-                borderBottom: "1px solid ".concat(tokens.color_border_default),
+                display: 'flex',
+                gap: spacing(0.5),
+                paddingBottom: spacing(1),
             },
         },
     };

package/esm/tabs/tabs.js

@@ -1,23 +1,17 @@
 import * as React from 'react';
 import { TabsContext } from './tabs-context';
 export var Tabs = function (_a) {
-    var baseId = _a.baseId, fullWidth = _a.fullWidth, onChange = _a.onChange, selectedValue = _a.value, isLazy = _a.isLazy, children = _a.children;
-    var getTabPanelId = function (value) { return "".concat(baseId, "-tabpanel-").concat(value); };
-    var getTabId = function (value) { return "".concat(baseId, "-tab-").concat(value); };
-    var getTabProps = function (value) {
-        return {
-            id: getTabId(value),
-            'aria-controls': getTabPanelId(value),
-        };
-    };
-    var getTabPanelProps = function (value) {
-        return {
-            role: 'tabpanel',
-            hidden: selectedValue !== value,
-            id: getTabPanelId(value),
-            'aria-labelledby': getTabId(value),
-        };
-    };
+    var baseId = _a.baseId, fullWidth = _a.fullWidth, onChange = _a.onChange, selectedValue = _a.value, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, children = _a.children;
+    var getTabProps = React.useCallback(function (value) { return ({
+        id: "".concat(baseId, "-tab-").concat(value),
+        'aria-controls': "".concat(baseId, "-tabpanel-").concat(value),
+    }); }, [baseId]);
+    var getTabPanelProps = React.useCallback(function (value) { return ({
+        role: 'tabpanel',
+        hidden: selectedValue !== value,
+        id: "".concat(baseId, "-tabpanel-").concat(value),
+        'aria-labelledby': "".concat(baseId, "-tab-").concat(value),
+    }); }, [baseId, selectedValue]);
     var ctxValue = React.useMemo(function () { return ({
         onChange: onChange,
         getTabProps: getTabProps,
@@ -25,8 +19,6 @@ export var Tabs = function (_a) {
         value: selectedValue,
         isLazy: isLazy,
         fullWidth: fullWidth,
-    }); }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedValue, baseId, onChange, isLazy, fullWidth]);
+    }); }, [selectedValue, onChange, isLazy, fullWidth, getTabProps, getTabPanelProps]);
     return React.createElement(TabsContext.Provider, { value: ctxValue }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.10.8",
+  "version": "2.11.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -38,5 +38,10 @@
     "verify": "yarn tsc --noEmit",
     "test": "jest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/auth0/quantum-product.git",
+    "directory": "packages/quantum-product"
+  },
   "module": "./esm/index.js"
 }

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

@@ -1,3 +1,3 @@
-import { TabProps, TabClassKey } from '@mui/material/Tab';
+import { TabClassKey, TabProps } from '@mui/material/Tab';
 import type { ComponentOverrideCreator } from '../../theme/create-component-overrides';
 export declare const createMuiTabOverrides: ComponentOverrideCreator<TabProps, TabClassKey>;

package/tabs/tab/tab-override.js

@@ -18,10 +18,18 @@ 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',
@@ -31,17 +39,20 @@ var createMuiTabOverrides = function (_a) {
                 },
                 _b),
             textColorPrimary: (_c = {},
+                _c["&.".concat(Tab_1.tabClasses.disabled)] = {
+                    color: tokens.color_fg_disabled,
+                },
                 _c["&.".concat(Tab_1.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/tabs/tab-list/tab-list-overrides.d.ts

@@ -0,0 +1,12 @@
+import { IStyledOwnerStateProps } from '../../styled';
+export declare const tabListComponentName = "QuantumTabList";
+export declare const TabListContainer: import("styled-components").StyledComponent<"div", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowButtonWrapper: import("styled-components").StyledComponent<"div", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowLabelContainer: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowLabel: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export interface ISelectionIndicatorOwnerState {
+    leftOffset: number;
+    indicatorWidth: number;
+    isVisible: boolean;
+}
+export declare const SelectionIndicator: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme> & IStyledOwnerStateProps<ISelectionIndicatorOwnerState>, never>;

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