@auth0/quantum-product 2.10.8 → 2.12.0

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,
+    };
+};

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/label/label.d.ts

@@ -7,9 +7,9 @@ export interface ILabelComponentProps {
     /**
      * Availability of the feature. Displays as a label after the title.
      */
-    productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
+    productReleaseStage?: 'developerPreview' | 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
     /**
-     * If true will abbreviate the "Early Access" label to "Early"
+     * If true will abbreviate the "Early Access" label to "Early" and the "Developer Preview" label to "Preview"
      * @default true
      */
     productReleaseStageAbbr?: boolean;

package/label/label.js

@@ -71,6 +71,12 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
             labelProps.color = 'primary';
             break;
+        case 'developerPreview':
+            labelProps.color = 'primary';
+            productReleaseStageAbbr
+                ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Preview')
+                : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Developer Preview');
+            break;
         case 'beta':
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
             labelProps.color = 'primary';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.10.8",
+  "version": "2.12.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/page/page-header/page-header.d.ts

@@ -22,6 +22,6 @@ export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<I
     fullWidth?: boolean;
     compact?: boolean;
     startActions?: React.ReactNode;
-    productReleaseStage?: 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
+    productReleaseStage?: 'developerPreview' | 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
 }
 export declare const PageHeader: React.ForwardRefExoticComponent<IPageHeaderProps & React.RefAttributes<HTMLDivElement>>;