@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5

package/TabBar.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -61,12 +61,12 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ ne,
-        default: () => /* reexport */ Ie
+        Tab: () => /* reexport */ re,
+        default: () => /* reexport */ ke
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
     var i =  e.n(a);
@@ -96,80 +96,80 @@
     const p = require("@splunk/react-icons/DotsThreeVertical");
     var m =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const y = require("@splunk/react-ui/Dropdown");
-    var g =  e.n(y);
+    const g = require("@splunk/react-ui/Dropdown");
+    var y =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
     const h = require("@splunk/react-ui/Popover");
     var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const C = require("@splunk/react-ui/ScreenReaderContent");
-    var w =  e.n(C);
+    var O =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const O = require("@splunk/ui-utils/i18n");
+    const w = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const k = require("@splunk/ui-utils/id");
+    const x = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const x = require("@splunk/react-ui/Clickable");
-    var I =  e.n(x);
+    const k = require("@splunk/react-ui/Clickable");
+    var I =  e.n(k);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var j = (0, c.css)([ "color:", ";" ], d.variables.contentColorActive);
-    var P = "2px";
+    var P = (0, c.css)([ "color:", ";" ], d.variables.contentColorActive);
+    var j = "2px";
     var T = (0, d.pickVariant)("$layout", {
-        horizontal: (0, c.css)([ "background:", ";height:", ";" ], d.variables.contentColorAccentWeak, P),
-        vertical: (0, c.css)([ "background:", ";width:", ";" ], d.variables.contentColorAccentWeak, P)
+        horizontal: (0, c.css)([ "background:", ";height:", ";" ], d.variables.contentColorAccentWeak, j),
+        vertical: (0, c.css)([ "background:", ";width:", ";" ], d.variables.contentColorAccentWeak, j)
     });
     var $ = function e(t) {
-        var r = t.$hasIcon, n = t.$hasMenu, a = t.$iconPosition;
-        if (a === "above" && r && n) {
-            return (0, c.css)([ "grid-template-areas:'icon icon' 'label menu' 'gutter gutter' 'underline underline';grid-template-columns:1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], d.variables.spacingXSmall);
+        var n = t.$hasIcon, r = t.$hasMenu, a = t.$iconPosition;
+        if (a === "above" && n && r) {
+            return (0, c.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space label menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], d.variables.spacingXSmall, d.variables.spacingXSmall);
         }
-        if (a === "above" && r) {
+        if (a === "above" && n) {
             return (0, c.css)([ "grid-template-areas:'icon' 'label' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], d.variables.spacingXSmall);
         }
-        if (a === "left" && r && n) {
-            return (0, c.css)([ "grid-template-areas:'icon label menu' 'underline underline underline';grid-template-columns:16px 1fr min-content;" ]);
+        if (a === "left" && n && r) {
+            return (0, c.css)([ "grid-template-areas:'menu-counter-neg-space icon label menu' 'underline underline underline underline';grid-template-columns:", " 16px 1fr min-content;" ], d.variables.spacingXSmall);
         }
-        if (a === "left" && r) {
+        if (a === "left" && n) {
             return (0, c.css)([ "grid-template-areas:'icon label' 'underline underline';grid-template-columns:16px 1fr;" ]);
         }
-        if (n) {
-            return (0, c.css)([ "grid-template-areas:'label menu' 'underline underline';grid-template-columns:minmax(auto,min-content) min-content;" ]);
+        if (r) {
+            return (0, c.css)([ "grid-template-areas:'menu-counter-neg-space label menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], d.variables.spacingXSmall);
         }
         return (0, c.css)([ "grid-template-areas:'label' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
     };
     var E = function e(t) {
-        var r = t.$hasIcon, n = t.$iconPosition;
-        if (n === "above" && r) {
-            return (0, c.css)([ "grid-template-areas:'icon gutter underline' 'label gutter underline';grid-template-columns:1fr ", " ", ";" ], d.variables.spacingXSmall, P);
+        var n = t.$hasIcon, r = t.$iconPosition;
+        if (r === "above" && n) {
+            return (0, c.css)([ "grid-template-areas:'icon gutter underline' 'label gutter underline';grid-template-columns:1fr ", " ", ";" ], d.variables.spacingXSmall, j);
         }
-        if (n === "left" && r) {
-            return (0, c.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:16px 1fr ", " ", ";" ], d.variables.spacingXSmall, P);
+        if (r === "left" && n) {
+            return (0, c.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:16px 1fr ", " ", ";" ], d.variables.spacingXSmall, j);
         }
-        return (0, c.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], d.variables.spacingXSmall, P);
+        return (0, c.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], d.variables.spacingXSmall, j);
     };
     var M = s()(I()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
     })([ "color:", ";column-gap:", ";display:grid;justify-content:center;min-height:", ";position:relative;", " ", " &::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[aria-selected='true']{cursor:default;color:", ";font-weight:", ";}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";color:", ";}" ], d.variables.contentColorDefault, d.variables.spacingXSmall, d.variables.inputHeight, (function(e) {
-        var t = e.$tabWidth;
-        return t && (0, c.css)([ "width:", "px;" ], t);
+        var t = e.$maxTabWidth;
+        return t && (0, c.css)([ "max-width:", "px;" ], t);
     }), (function(e) {
-        var t = e.$hasIcon, r = e.$hasMenu, n = e.$iconPosition, a = e.$layout;
+        var t = e.$hasIcon, n = e.$hasMenu, r = e.$iconPosition, a = e.$layout;
         if (a === "vertical") {
             return E({
                 $hasIcon: t,
-                $iconPosition: n
+                $iconPosition: r
             });
         }
         return $({
             $hasIcon: t,
-            $hasMenu: r,
-            $iconPosition: n
+            $hasMenu: n,
+            $iconPosition: r
         });
     }), d.variables.fontWeightBold, (0, d.pickVariant)("$layout", {
         horizontal: (0, c.css)([ "margin-bottom:1px;" ]),
         vertical: (0, c.css)([ "align-items:center;right:1px;" ])
-    }), d.variables.contentColorActive, d.variables.fontWeightBold, d.variables.fontWeightSemiBold, j, j, d.variables.focusShadow, d.variables.contentColorActive);
+    }), d.variables.contentColorActive, d.variables.fontWeightBold, d.variables.fontWeightSemiBold, P, P, d.variables.focusShadow, d.variables.contentColorActive);
     var A = s().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
@@ -178,8 +178,8 @@
         horizontal: (0, c.css)([ "bottom:-1px;height:0;width:100%;transition:height 0.2s;" ]),
         vertical: (0, c.css)([ "width:1px;height:100%;right:-1px;transition:width 0.2s;" ])
     }), d.variables.contentColorAccent, (0, d.pickVariant)("$layout", {
-        horizontal: (0, c.css)([ "height:", ";" ], P),
-        vertical: (0, c.css)([ "width:", ";" ], P)
+        horizontal: (0, c.css)([ "height:", ";" ], j),
+        vertical: (0, c.css)([ "width:", ";" ], j)
     }), /* sc-sel */ M, T, T);
     var z = s().span.withConfig({
         displayName: "TabStyles__StyledMenu",
@@ -211,22 +211,22 @@
         componentId: "sc-1ry8mzj-6"
     })([ "padding:8px;font-size:", ";" ], d.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var N = function e() {
+    var W = function e() {
         return undefined;
     };
-    var W =  (0, r.createContext)({
+    var X =  (0, n.createContext)({
         isMenuOpen: false,
-        onMenuOpen: N,
-        onMenuClose: N,
-        registerTab: N
+        onMenuOpen: W,
+        onMenuClose: W,
+        registerTab: W
     });
-    W.displayName = "TabBar";
-    /* harmony default export */    const V = W;
+    X.displayName = "TabBar";
+    /* harmony default export */    const N = X;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var X = function e(t, r) {
-        if (t > r) {
-            return "".concat(r, "+");
+    var V = function e(t, n) {
+        if (t > n) {
+            return "".concat(n, "+");
         }
         return t;
     };
@@ -253,9 +253,9 @@
     function F() {
         return F = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                var n = arguments[t];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
@@ -270,32 +270,32 @@
     function U(e, t) {
         if (e) {
             if ("string" == typeof e) return H(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? H(e, t) : void 0;
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? H(e, t) : void 0;
         }
     }
     function H(e, t) {
         (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
         }
-        return n;
+        return r;
     }
     function Y(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, a, i, o, l = [], u = !0, c = !1;
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, a, i, o, l = [], u = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
+                if (i = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
                     u = !1;
-                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                } else for (;!(u = (r = i.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
                 c = !0, a = e;
             } finally {
                 try {
-                    if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
+                    if (!u && null != n["return"] && (o = n["return"](), Object(o) !== o)) return;
                 } finally {
                     if (c) throw a;
                 }
@@ -308,25 +308,25 @@
     }
     function J(e, t) {
         if (null == e) return {};
-        var r, n, a = Q(e, t);
+        var n, r, a = Q(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                n = i[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
         return a;
     }
     function Q(e, t) {
         if (null == e) return {};
-        var r = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (t.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
     var Z = {
         ariaControls: i().string,
@@ -358,137 +358,138 @@
         tension: 400
     };
     var te = [ "offScreen", "escapeKey" ];
-    var re = function e(t) {
-        var a = t.ariaControls, i = t.count, o = t.disabled, l = t.elementRef, u = t.icon, c = t.label, s = t.maxCount, d = t.tabId, f = t.to, v = t.tooltip, p = t.menu, y = t.index, h = J(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
+    var ne = function e(t) {
+        var a = t.ariaControls, i = t.count, o = t.disabled, l = t.elementRef, u = t.icon, c = t.label, s = t.maxCount, d = t.tabId, f = t.to, v = t.tooltip, p = t.menu, g = t.index, h = J(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
         // @docs-props-type TabPropsBase
-                var C = (0, r.useState)(false), x = K(C, 2), I = x[0], j = x[1];
-        var P = (0, r.useState)(null), T = K(P, 2), $ = T[0], E = T[1];
-        var N = (0, r.useContext)(V), W = N.activeTabId, L = N.disabled, U = N.focusedTabId, H = N.iconPosition, Y = H === void 0 ? "above" : H, G = N.isMenuOpen, Q = N.layout, Z = Q === void 0 ? "horizontal" : Q, re = N.onClick, ne = N.onFocus, ae = N.onMenuOpen, ie = N.onMenuClose, oe = N.registerTab, le = N.width;
-        var ue = (0, r.useState)((0, k.createDOMID)("aria-id")), ce = K(ue, 1), se = ce[0];
-        var de = (0, r.useState)((0, k.createDOMID)("menu-description")), fe = K(de, 1), ve = fe[0];
-        var be = (0, r.useState)((0, k.createDOMID)("popover")), pe = K(be, 1), me = pe[0];
-        var ye = (0, r.useMemo)((function() {
-            return d || (0, k.createGUID)();
+                var C = (0, n.useState)(false), k = K(C, 2), I = k[0], P = k[1];
+        var j = (0, n.useState)(null), T = K(j, 2), $ = T[0], E = T[1];
+        var W = (0, n.useContext)(N), X = W.activeTabId, L = W.disabled, U = W.focusedTabId, H = W.iconPosition, Y = H === void 0 ? "above" : H, G = W.isMenuOpen, Q = W.layout, Z = Q === void 0 ? "horizontal" : Q, ne = W.maxTabWidth, re = W.onClick, ae = W.onFocus, ie = W.onMenuOpen, oe = W.onMenuClose, le = W.registerTab;
+        var ue = (0, n.useState)((0, x.createDOMID)("aria-id")), ce = K(ue, 1), se = ce[0];
+        var de = (0, n.useState)((0, x.createDOMID)("menu-description")), fe = K(de, 1), ve = fe[0];
+        var be = (0, n.useState)((0, x.createDOMID)("popover")), pe = K(be, 1), me = pe[0];
+        var ge = (0, n.useMemo)((function() {
+            return d || (0, x.createGUID)();
         }), [ d ]);
-        var ge = L || o ? "disabled" : false;
+        var ye = L || o ? "disabled" : false;
         var he = c ? c.toString() : "";
         var Se = i === 0 || i ? "".concat(i === null || i === void 0 ? void 0 : i.toString()) : "";
-        var Ce = W === ye;
+        var Ce = X === ge;
         // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
-                var we = (0, r.useMemo)((function() {
+                var Oe = (0, n.useMemo)((function() {
             // SUI-6877: if the label isn't a string, don't attempt to do this since it'll just be wrong
             return c && typeof c === "string" ? "".concat(he, "    ").concat(Se) : "";
         }), [ Se, c, he ]);
-        var Oe = (0, r.useCallback)((function() {
+        var we = (0, n.useCallback)((function() {
             $ === null || $ === void 0 ? void 0 : $.focus();
         }), [ $ ]);
-        var ke = (0, r.useCallback)((function(e) {
+        var xe = (0, n.useCallback)((function(e) {
             E(e);
             B(l, e);
             // Register with index, assert index is defined as it's injected by TabBar
-                        oe({
-                tabId: ye,
+                        le({
+                tabId: ge,
                 element: e,
-                index: y
+                index: g
             });
-        }), [ l, oe, ye, y ]);
-        var xe = (0, r.useCallback)((function() {
-            j(true);
+        }), [ l, le, ge, g ]);
+        var ke = (0, n.useCallback)((function() {
+            P(true);
         }), []);
-        var Ie = (0, r.useCallback)((function() {
-            j(false);
+        var Ie = (0, n.useCallback)((function() {
+            P(false);
         }), []);
-        var je = (0, r.useCallback)((function(e) {
+        var Pe = (0, n.useCallback)((function(e) {
             // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
             // while preventing the "to" prop from incorrectly triggering <Clickable>'s providedOnClick on the active tab
             if (!Ce) {
                 re === null || re === void 0 ? void 0 : re(e, {
-                    tabId: ye
+                    tabId: ge
                 });
             }
             if (f == null || f != null && Ce) {
                 e.preventDefault();
             }
-        }), [ Ce, re, ye, f ]);
-        var Pe = (0, r.useCallback)((function(e) {
-            xe();
-            ne === null || ne === void 0 ? void 0 : ne(e, {
-                tabId: ye
+        }), [ Ce, re, ge, f ]);
+        var je = (0, n.useCallback)((function(e) {
+            ke();
+            ae === null || ae === void 0 ? void 0 : ae(e, {
+                tabId: ge
             });
-        }), [ xe, ne, ye ]);
-        var Te = (0, r.useCallback)((function() {
-            Oe();
-        }), [ Oe ]);
-        var $e = (0, r.useCallback)((function() {
+        }), [ ke, ae, ge ]);
+        var Te = (0, n.useCallback)((function() {
+            we();
+        }), [ we ]);
+        var $e = (0, n.useCallback)((function() {
             Ie();
         }), [ Ie ]);
-        var Ee = (0, r.useCallback)((function(e) {
+        var Ee = (0, n.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
-            ae(ye);
-        }), [ ae, ye ]);
-        var Me = U === ye && G && !!p;
-        var Ae =  n().createElement(z, {
+            ie(ge);
+        }), [ ie, ge ]);
+        var Me = U === ge && G && !!p;
+        var Ae =  r().createElement(z, {
             $active: Ce,
             "data-test": "menu-toggle",
             tabIndex: -1,
             onFocus: Te
-        },  n().createElement(m(), null));
+        },  r().createElement(m(), null));
         var ze = function e(t) {
             
-            return n().createElement(n().Fragment, null, t,  n().createElement(g(), {
+            return r().createElement(r().Fragment, null, t,  r().createElement(y(), {
                 toggle: Ae,
                 align: "center",
                 onRequestOpen: Ee,
-                onRequestClose: ie,
+                onRequestClose: oe,
                 open: Me
             }, p));
         };
-        var _e =  n().createElement(D, {
+        var _e =  r().createElement(D, {
             "data-test": "label",
             $iconPosition: Y
-        }, c, !p && (i === 0 || i) &&  n().createElement(n().Fragment, null,  n().createElement(w(), null, " "),  n().createElement(R, {
+        }, c, !p && (i === 0 || i) &&  r().createElement(r().Fragment, null,  r().createElement(O(), null, " "),  r().createElement(R, {
             "data-test": "count",
-            disabled: !!ge
-        }, s ? X(i, s) : i)), !!p &&  n().createElement(w(), {
+            disabled: !!ye
+        }, s ? V(i, s) : i)), !!p &&  r().createElement(O(), {
             "aria-hidden": true,
             id: ve
-        }, (0, O._)("Press Shift + F10 to open the tab’s menu")));
+        }, (0, w._)("Press Shift + F10 to open the tab’s menu")));
         
         // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
         // eslint-disable-next-line
         // @ts-ignore-next-line
-        return n().createElement(M, F({
+        return r().createElement(M, F({
             $hasIcon: !!u,
             $hasMenu: !!p,
             $iconPosition: Y,
             $layout: Z,
-            $tabWidth: le,
+            $maxTabWidth: ne,
             "aria-controls": a,
             "aria-selected": Ce,
             "aria-labelledby": se,
             "aria-describedby": p ? ve : undefined,
             "aria-haspopup": Me,
             "data-test": "tab",
-            "data-test-tab-id": ye,
+            "data-test-tab-id": ge,
             "data-test-popover-id": v ? me : undefined,
-            "data-title": we,
-            disabled: ge,
-            elementRef: ke,
-            onClick: je,
-            onFocus: Pe,
-            onMouseEnter: xe,
+            "data-title": Oe,
+            "data-test-disabled": ye || undefined,
+            disabled: ye,
+            elementRef: xe,
+            onClick: Pe,
+            onFocus: je,
+            onMouseEnter: ke,
             onBlur: $e,
             onMouseLeave: Ie,
             role: "tab",
             tabIndex: Ce ? undefined : -1,
             to: f,
-            id: ye
-        }, b()(h, "elementRef")), u &&  n().createElement(_, {
+            id: ge
+        }, b()(h, "elementRef")), u &&  r().createElement(_, {
             $iconPosition: Y
-        }, u), p && Z === "horizontal" ? ze(_e) : _e,  n().createElement(A, {
+        }, u), p && Z === "horizontal" ? ze(_e) : _e,  r().createElement(A, {
             $layout: Z
-        }), !o && v &&  n().createElement(S(), {
+        }), !o && v &&  r().createElement(S(), {
             role: "tooltip",
             anchor: $,
             animationConfig: ee,
@@ -498,14 +499,14 @@
             id: me,
             open: !!$ && I,
             align: "center"
-        },  n().createElement(q, null, v)), v &&  n().createElement(w(), {
+        },  r().createElement(q, null, v)), v &&  r().createElement(O(), {
             "aria-hidden": "true",
             id: se
         }, v));
     };
-    re.propTypes = Z;
-    re.as = "Tab";
-    /* harmony default export */    const ne = re;
+    ne.propTypes = Z;
+    ne.as = "Tab";
+    /* harmony default export */    const re = ne;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
     function ae(e, t) {
@@ -513,18 +514,18 @@
             return e && e.id === t;
         }));
     }
-    function ie(e, t, r) {
-        for (var n = 0; n < e.length; n += 1) {
-            var a = (n + r) % e.length;
+    function ie(e, t, n) {
+        for (var r = 0; r < e.length; r += 1) {
+            var a = (r + n) % e.length;
             if (e[a].disabled !== true) {
                 return e[a];
             }
         }
         return e[t];
     }
-    function oe(e, t, r) {
-        for (var n = e.length; n > 0; n -= 1) {
-            var a = (n + r) % e.length;
+    function oe(e, t, n) {
+        for (var r = e.length; r > 0; r -= 1) {
+            var a = (r + n) % e.length;
             if (e[a].disabled !== true) {
                 return e[a];
             }
@@ -543,9 +544,9 @@
     function ue() {
         return ue = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                var n = arguments[t];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
@@ -553,54 +554,54 @@
     }
     function ce(e, t) {
         if (null == e) return {};
-        var r, n, a = se(e, t);
+        var n, r, a = se(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                n = i[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
         return a;
     }
     function se(e, t) {
         if (null == e) return {};
-        var r = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (t.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
     function de(e, t) {
-        var r = Object.keys(e);
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            t && (r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            }))), n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
     function fe(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? de(Object(r), !0).forEach((function(t) {
-                ve(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : de(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            var n = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? de(Object(n), !0).forEach((function(t) {
+                ve(e, t, n[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : de(Object(n)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
         return e;
     }
-    function ve(e, t, r) {
+    function ve(e, t, n) {
         return (t = be(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = r, e;
+        }) : e[t] = n, e;
     }
     function be(e) {
         var t = pe(e, "string");
@@ -608,49 +609,49 @@
     }
     function pe(e, t) {
         if ("object" != le(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != le(n)) return n;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var r = n.call(e, t || "default");
+            if ("object" != le(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     function me(e, t) {
-        return Ce(e) || Se(e, t) || ge(e, t) || ye();
+        return Ce(e) || Se(e, t) || ye(e, t) || ge();
     }
-    function ye() {
+    function ge() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function ge(e, t) {
+    function ye(e, t) {
         if (e) {
             if ("string" == typeof e) return he(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? he(e, t) : void 0;
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? he(e, t) : void 0;
         }
     }
     function he(e, t) {
         (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
         }
-        return n;
+        return r;
     }
     function Se(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, a, i, o, l = [], u = !0, c = !1;
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, a, i, o, l = [], u = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
+                if (i = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
                     u = !1;
-                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                } else for (;!(u = (r = i.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
                 c = !0, a = e;
             } finally {
                 try {
-                    if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
+                    if (!u && null != n["return"] && (o = n["return"](), Object(o) !== o)) return;
                 } finally {
                     if (c) throw a;
                 }
@@ -661,7 +662,6 @@
     function Ce(e) {
         if (Array.isArray(e)) return e;
     }
-    var we = 50;
     /** @public */
     /** @public */    var Oe = {
         autoActivate: i().bool,
@@ -672,215 +672,220 @@
         elementRef: i().oneOfType([ i().func, i().object ]),
         iconPosition: i().oneOf([ "above", "left" ]),
         layout: i().oneOf([ "horizontal", "vertical" ]),
-        onChange: i().func,
-        tabWidth: i().number
+        maxTabWidth: i().number,
+        onChange: i().func
     };
-    var ke = function e(t) {
+    var we = function e(t) {
         return Array.from(t.entries()).sort((function(e, t) {
-            var r = me(e, 2), n = r[1].index;
+            var n = me(e, 2), r = n[1].index;
             var a = me(t, 2), i = a[1].index;
-            return n - i;
+            return r - i;
         })).map((function(e) {
-            var t = me(e, 2), r = t[0], n = t[1];
+            var t = me(e, 2), n = t[0], r = t[1];
             return fe({
-                id: r
-            }, n);
+                id: n
+            }, r);
         }));
     };
     function xe(e) {
-        var t = e.activeTabId, a = e.autoActivate, i = e.children, l = e.disabled, c = l === void 0 ? false : l, s = e.elementRef, d = e.iconPosition, v = d === void 0 ? "left" : d, b = e.layout, p = b === void 0 ? "horizontal" : b, m = e.onChange, y = e.tabWidth, g = ce(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "onChange", "tabWidth" ]);
+        var t;
+        var a = e.activeTabId, i = e.autoActivate, l = e.children, c = e.disabled, s = c === void 0 ? false : c, d = e.elementRef, v = e.iconPosition, b = v === void 0 ? "left" : v, p = e.layout, m = p === void 0 ? "horizontal" : p, g = e.maxTabWidth, y = e.onChange, h = ce(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "maxTabWidth", "onChange" ]);
         // @docs-props-type TabBarPropsBase
-                var h = (0, r.useState)(false), S = me(h, 2), C = S[0], w = S[1];
-        var O = (0, r.useState)(t), k = me(O, 2), x = k[0], I = k[1];
+        // eslint-disable-next-line prefer-rest-params
+                var S = (t = arguments[0]) === null || t === void 0 ? void 0 : t.iconPosition;
+        (0, n.useEffect)((function() {
+            if (false) {}
+        }), [ S ]);
+        var C = (0, n.useState)(false), O = me(C, 2), w = O[0], x = O[1];
+        var k = (0, n.useState)(a), I = me(k, 2), P = I[0], j = I[1];
  // need to keep track of the focused tab id in a ref to avoid re-generating registerTab
         // because every time `registerTab` changes, it calls `ref` on all tabs
-                var j = (0, r.useRef)(t);
-        j.current = x;
+                var T = (0, n.useRef)(a);
+        T.current = P;
         // If the tab that was focused is removed, we need to keep track of what index it was last at
-                var P = (0, r.useRef)();
-        var T = (0, r.useRef)(null);
+                var $ = (0, n.useRef)();
+        var E = (0, n.useRef)(null);
         // map of tabId to tab element and index
-                var $ = (0, r.useRef)();
-        if (!$.current) {
-            $.current = new Map;
+                var M = (0, n.useRef)();
+        if (!M.current) {
+            M.current = new Map;
         }
-        var E = p === "vertical" ? "down" : "right";
-        var M = p === "vertical" ? "up" : "left";
-        var A = y && y > we ? y : null;
+        var A = m === "vertical" ? "down" : "right";
+        var z = m === "vertical" ? "up" : "left";
         // focus the tab belonging to the given tabId
-                var z = (0, r.useCallback)((function(e) {
+                var _ = (0, n.useCallback)((function(e) {
             var t;
             if (!e) {
                 return;
             }
-            var r = (t = $.current) === null || t === void 0 ? void 0 : t.get(e);
-            if (!r) {
-                var n = ke($.current);
-                var a = n[0];
+            var n = (t = M.current) === null || t === void 0 ? void 0 : t.get(e);
+            if (!n) {
+                var r = we(M.current);
+                var a = r[0];
                 if (a) {
                     var i;
-                    I(a.id);
+                    j(a.id);
                     (i = a.element) === null || i === void 0 ? void 0 : i.focus();
                 }
                 return;
             }
-            I(e);
-            r.element.focus();
+            j(e);
+            n.element.focus();
         }), []);
-        var _ = (0, r.useCallback)((function(e) {
-            var t = e.tabId, r = e.element, n = e.index;
-            if (r) {
+        var D = (0, n.useCallback)((function(e) {
+            var t = e.tabId, n = e.element, r = e.index;
+            if (n) {
                 var a;
-                (a = $.current) === null || a === void 0 ? void 0 : a.set(t, {
-                    element: r,
-                    index: n
+                (a = M.current) === null || a === void 0 ? void 0 : a.set(t, {
+                    element: n,
+                    index: r
                 });
             } else {
                 var i;
-                (i = $.current) === null || i === void 0 ? void 0 : i["delete"](t);
+                (i = M.current) === null || i === void 0 ? void 0 : i["delete"](t);
                 // if the tab being removed is the focused tab, keep track of its last known index
-                                if (j.current === t) {
-                    P.current = n;
+                                if (T.current === t) {
+                    $.current = r;
                 }
             }
         }), []);
-        var D = (0, r.useCallback)((function(e) {
-            T.current = e;
-            B(s, e);
-        }), [ s, T ]);
+        var R = (0, n.useCallback)((function(e) {
+            E.current = e;
+            B(d, e);
+        }), [ d, E ]);
         // callback to handle focus event sent from a Tab
-                var R = (0, r.useCallback)((function(e, r) {
-            var n = r.tabId;
-            if (document.activeElement === e.target && x === n) {
+                var q = (0, n.useCallback)((function(e, t) {
+            var n = t.tabId;
+            if (document.activeElement === e.target && P === n) {
                 // tab already focused, no need to continue
                 return;
             }
-            z(n);
-            if (a && t !== n) {
-                m === null || m === void 0 ? void 0 : m(e, {
+            _(n);
+            if (i && a !== n) {
+                y === null || y === void 0 ? void 0 : y(e, {
                     selectedTabId: n
                 });
             }
-        }), [ t, a, x, z, m ]);
-        var q = (0, r.useCallback)((function(e, t) {
-            var r = t.tabId;
-            z(r);
-            m === null || m === void 0 ? void 0 : m(e, {
-                selectedTabId: r
+        }), [ a, i, P, _, y ]);
+        var W = (0, n.useCallback)((function(e, t) {
+            var n = t.tabId;
+            _(n);
+            y === null || y === void 0 ? void 0 : y(e, {
+                selectedTabId: n
             });
-        }), [ z, m ]);
-        var N = (0, r.useCallback)((function(e) {
+        }), [ _, y ]);
+        var X = (0, n.useCallback)((function(e) {
             // if command key on Mac was pressed ignore
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = ke($.current);
-            var r = x ? t.findIndex((function(e) {
-                return e.id === x;
+            var t = we(M.current);
+            var n = P ? t.findIndex((function(e) {
+                return e.id === P;
             })) : -1;
-            var n = t.map((function(e) {
+            var r = t.map((function(e) {
                 return e.element;
             }));
-            var a = r === -1 ? 0 : r;
+            var a = n === -1 ? 0 : n;
             var i = (0, o.keycode)(e.nativeEvent);
             var l;
-            if (i === E) {
-                l = ie(n, a, a + 1);
-            } else if (i === M) {
-                l = oe(n, a, a - 1);
+            if (i === A) {
+                l = ie(r, a, a + 1);
+            } else if (i === z) {
+                l = oe(r, a, a - 1);
             } else if (i === "home") {
-                l = ie(n, a, 0);
+                l = ie(r, a, 0);
             } else if (i === "end") {
-                l = oe(n, a, n.length - 1);
-            } else if (p === "horizontal" && e.shiftKey && i === "f10") {
-                w((function(e) {
+                l = oe(r, a, r.length - 1);
+            } else if (m === "horizontal" && e.shiftKey && i === "f10") {
+                x((function(e) {
                     if (e) {
-                        var t = n[a];
+                        var t = r[a];
                         t === null || t === void 0 ? void 0 : t.focus();
                     }
                     return !e;
                 }));
-            } else if (p === "horizontal" && i === "down") {
-                w(true);
+            } else if (m === "horizontal" && i === "down") {
+                x(true);
             }
             if (l) {
-                z(l.id);
+                _(l.id);
                 e.preventDefault();
             }
-        }), [ x, z, p, E, M ]);
-        var W = (0, r.useCallback)((function(e) {
-            z(e);
+        }), [ P, _, m, A, z ]);
+        var V = (0, n.useCallback)((function(e) {
+            _(e);
  // in case they clicked on a menu of tab they were not even focused on yet
-                        w(true);
-        }), [ z ]);
-        var X = (0, r.useCallback)((function(e) {
+                        x(true);
+        }), [ _ ]);
+        var F = (0, n.useCallback)((function(e) {
             var t = e.event;
             // prevent content clicks/enter key from changing the active tab
                         t === null || t === void 0 ? void 0 : t.stopPropagation();
-            w(false);
+            x(false);
         }), []);
-        var F = (0, r.useMemo)((function() {
+        var K = (0, n.useMemo)((function() {
             return {
-                disabled: c,
-                focusedTabId: x,
-                iconPosition: v,
-                layout: p,
-                onClick: q,
-                onFocus: R,
-                width: A,
-                onMenuOpen: W,
-                onMenuClose: X,
-                isMenuOpen: C,
-                registerTab: _,
-                activeTabId: t
+                disabled: s,
+                focusedTabId: P,
+                iconPosition: b,
+                layout: m,
+                maxTabWidth: g,
+                onClick: W,
+                onFocus: q,
+                onMenuOpen: V,
+                onMenuClose: F,
+                isMenuOpen: w,
+                registerTab: D,
+                activeTabId: a
             };
-        }), [ c, x, v, p, q, R, A, W, X, C, _, t ]);
-        var K = (0, r.useMemo)((function() {
-            return r.Children.toArray(i).filter(r.isValidElement).map((function(e, t) {
+        }), [ s, P, b, m, W, q, g, V, F, w, D, a ]);
+        var L = (0, n.useMemo)((function() {
+            return n.Children.toArray(l).filter(n.isValidElement).map((function(e, t) {
                 if (e.type.as === "Tab") {
                     
-                    return (0, r.cloneElement)(e, {
+                    return (0, n.cloneElement)(e, {
                         index: t
                     });
                 }
                 return e;
             }));
-        }), [ i ]);
-        var L = u()(K);
-        (0, r.useEffect)((function() {
+        }), [ l ]);
+        var U = u()(L);
+        (0, n.useEffect)((function() {
             // if the focused tab is removed, focus the next tab
-            if (L !== K) {
+            if (U !== L) {
                 var e;
-                var t = ke($.current);
+                var t = we(M.current);
                 if (t.find((function(e) {
-                    return e.id === j.current;
+                    return e.id === T.current;
                 }))) {
                     // focused tab is still present
                     return;
                 }
-                var r = Math.min((e = P.current) !== null && e !== void 0 ? e : 0, t.length - 1);
-                var n = t[r];
-                if (n) {
-                    z(n.id);
+                var n = Math.min((e = $.current) !== null && e !== void 0 ? e : 0, t.length - 1);
+                var r = t[n];
+                if (r) {
+                    _(r.id);
                 }
             }
-        }), [ K, z, L ]);
+        }), [ L, _, U ]);
         
-        return n().createElement(f, ue({
-            "data-tab-layout": p,
-            "data-test-active-tab-id": t,
+        return r().createElement(f, ue({
+            "data-tab-layout": m,
+            "data-test-active-tab-id": a,
             "data-test": "tab-bar",
             role: "tablist",
-            ref: D,
-            $layout: p,
-            onKeyDown: N
-        }, g),  n().createElement(V.Provider, {
-            value: F
-        }, K));
+            ref: R,
+            $layout: m,
+            onKeyDown: X
+        }, h),  r().createElement(N.Provider, {
+            value: K
+        }, L));
     }
     xe.propTypes = Oe;
-    xe.Tab = ne;
-    /* harmony default export */    const Ie = xe;
+    xe.Tab = re;
+    /* harmony default export */    const ke = xe;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();