@auth0/quantum-product 2.10.8 → 2.12.0

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

@@ -0,0 +1,186 @@
+"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;
+    };
+})();
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabListOverflow = void 0;
+var React = __importStar(require("react"));
+var tabs_context_1 = require("../../tabs-context");
+var tab_list_utils_1 = require("../tab-list-utils");
+var useTabListOverflow = function (_a) {
+    var children = _a.children, maxVisibleTabs = _a.maxVisibleTabs, moreLabel = _a.moreLabel, getOverflowCountLabel = _a.getOverflowCountLabel;
+    var _b = (0, tabs_context_1.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 (!(0, tab_list_utils_1.isTabChild)(child) || child.props.value !== undefined) {
+                return child;
+            }
+            return React.cloneElement(child, { value: (0, tab_list_utils_1.getResolvedChildValue)(child, index) });
+        });
+    }, [allChildren]);
+    var defaultTabOrder = React.useMemo(function () { return resolvedChildren.map(function (child, index) { return (0, tab_list_utils_1.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 (0, tab_list_utils_1.createOverflowState)({
+            baseVisibleTabCount: baseVisibleTabCount,
+            moreLabel: moreLabel,
+            defaultTabOrder: defaultTabOrder,
+        });
+    }), 2), overflowState = _c[0], setOverflowState = _c[1];
+    var shouldResetOverflowState = overflowState.baselineVisibleTabCount !== baseVisibleTabCount ||
+        overflowState.baselineMoreLabel !== moreLabel ||
+        !(0, tab_list_utils_1.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((0, tab_list_utils_1.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 (0, tab_list_utils_1.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 (0, tab_list_utils_1.isTabChild)(child) && child.props.value === value; }); }, [value, visibleChildren]);
+    var isSelectedValueInOverflow = React.useMemo(function () { return overflowChildren.some(function (child) { return (0, tab_list_utils_1.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 (0, tab_list_utils_1.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((0, tab_list_utils_1.createOverflowState)({
+            baseVisibleTabCount: baseVisibleTabCount,
+            moreLabel: moreLabel,
+            defaultTabOrder: defaultTabOrder,
+            orderedTabValues: nextOrderedChildren.map(function (orderedChild, index) { return (0, tab_list_utils_1.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,
+    };
+};
+exports.useTabListOverflow = useTabListOverflow;

package/tabs/tabs-overrides.d.ts

@@ -1,3 +1,3 @@
-import type { TabsProps, TabsClassKey } from '@mui/material/Tabs';
+import type { TabsClassKey, TabsProps } from '@mui/material/Tabs';
 import type { ComponentOverrideCreator } from '../theme/create-component-overrides';
 export declare const createMuiTabsOverrides: ComponentOverrideCreator<TabsProps, TabsClassKey>;

package/tabs/tabs-overrides.js

@@ -2,21 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMuiTabsOverrides = void 0;
 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/tabs/tabs.js

@@ -37,23 +37,17 @@ exports.Tabs = void 0;
 var React = __importStar(require("react"));
 var tabs_context_1 = require("./tabs-context");
 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,
@@ -61,9 +55,7 @@ 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(tabs_context_1.TabsContext.Provider, { value: ctxValue }, children);
 };
 exports.Tabs = Tabs;