@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/TabBar.js

@@ -61,241 +61,127 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ ce,
-        default: () => /* reexport */ Ce
+        Tab: () => /* reexport */ Z,
+        default: () => /* reexport */ pe
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const a = require("@splunk/ui-utils/keyboard");
+    const i = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var s =  e.n(l);
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const c = require("@splunk/themes");
+    const u = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var u = s().div.withConfig({
+    var s = c().div.withConfig({
         displayName: "TabBarStyles__Styled",
         componentId: "sc-1t85fen-0"
-    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], c.mixins.reset("flex"), (0, 
-    c.pick)({
-        enterprise: c.variables.borderLightColor,
-        prisma: c.variables.neutral200
-    }), (0, c.pickVariant)("$layout", {
-        horizontal: {
-            prisma: (0, c.pickVariant)("$withUnderline", {
-                /* context appearance is only supported for Prisma */
-                true: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
-            }),
-            enterprise: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
-        },
+    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], u.mixins.reset("flex"), u.variables.neutral300, (0, 
+    u.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], u.variables.spacingXXLarge),
         vertical: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ])
     }));
     // CONCATENATED MODULE: external "lodash/omit"
-    const p = require("lodash/omit");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const f = require("@splunk/ui-utils/i18n");
+    const d = require("lodash/omit");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
     const v = require("@splunk/react-icons/DotsThreeVertical");
     var b =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const h = require("@splunk/react-ui/Dropdown");
-    var y =  e.n(h);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/MoreVertical"
-    const m = require("@splunk/react-icons/enterprise/MoreVertical");
-    var g =  e.n(m);
+    const p = require("@splunk/react-ui/Dropdown");
+    var y =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const x = require("@splunk/react-ui/Popover");
-    var k =  e.n(x);
+    const m = require("@splunk/react-ui/Popover");
+    var h =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const w = require("@splunk/react-ui/ScreenReaderContent");
-    var S =  e.n(w);
+    const g = require("@splunk/react-ui/ScreenReaderContent");
+    var C =  e.n(g);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const S = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const C = require("@splunk/ui-utils/id");
+    const w = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const O = require("@splunk/react-ui/Clickable");
-    var T =  e.n(O);
+    const k = require("@splunk/react-ui/Clickable");
+    var x =  e.n(k);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var I = (0, c.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
-    });
-    var j = (0, c.pickVariant)("$layout", {
-        horizontal: {
-            enterprise: (0, l.css)([ "height:3px;" ])
-        },
-        vertical: {
-            enterprise: (0, l.css)([ "width:3px;" ])
-        }
+    var O = (0, l.css)([ "color:", ";" ], u.variables.contentColorActive);
+    var I = (0, u.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "background:", ";height:1px;" ], u.variables.interactiveColorBorderHover),
+        vertical: (0, l.css)([ "background:", ";width:1px;" ], u.variables.interactiveColorBorderHover)
     });
-    var P = s()(T()).withConfig({
+    var T = c()(x()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
-    })([ "flex:0 1 auto;display:flow-root;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";&::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";", "}" ], (0, 
-    c.pick)({
-        enterprise: "24px",
-        prisma: "20px"
-    }), c.variables.contentColorDefault, c.variables.fontWeightBold, (0, c.pickVariant)("$layout", {
-        horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, c.pick)({
-            enterprise: (0, c.pickVariant)("$hasMenu", {
-                true: "3px 4px 3px 16px",
-                false: "3px 20px"
-            }),
-            prisma: {
-                comfortable: (0, c.pickVariant)("$hasMenu", {
-                    true: "0px 8px 0px 16px",
-                    false: "0px 20px"
-                }),
-                compact: (0, c.pickVariant)("$hasMenu", {
-                    true: "0px 8px 0px 12px",
-                    false: "0 16px"
-                })
-            }
-        })),
-        vertical: {
-            enterprise: (0, l.css)([ "width:100%;text-align:left;right:1px;padding:10px 20px;", "" ], (function(e) {
-                var t = e.$icon;
-                return t && (0, l.css)([ "text-align:center;" ]);
-            })),
-            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, c.pick)({
-                comfortable: "0 20px",
-                compact: "0 16px"
-            }))
-        }
-    }), (0, c.pick)({
-        enterprise: (0, l.css)([ "font-weight:", ";" ], c.variables.fontWeightBold),
-        prisma: (0, l.css)([ "color:", ";font-weight:", ";" ], c.variables.contentColorActive, c.variables.fontWeightBold)
-    }), (0, c.pick)({
-        enterprise: "normal",
-        prisma: c.variables.fontWeightSemiBold
-    }), I, I, c.variables.focusShadowInset, (0, c.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
-    }));
-    var z = s().div.withConfig({
+    })([ "flex:0 1 auto;display:flow-root;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";&::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:", ";}" ], u.variables.lineHeight, u.variables.contentColorDefault, u.variables.fontWeightBold, (0, 
+    u.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "margin-bottom:1px;" ]),
+        vertical: (0, l.css)([ "width:100%;right:1px;padding:0 ", ";" ], u.variables.spacingLarge)
+    }), u.variables.contentColorActive, u.variables.fontWeightBold, u.variables.fontWeightSemiBold, O, O, u.variables.focusShadowInset, u.variables.contentColorActive);
+    var j = c().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
-    })([ "position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}[aria-selected='false'][aria-haspopup='true'] > &&{", "}" ], (0, 
-    c.pick)({
-        enterprise: (0, l.css)([ "background:", ";" ], c.variables.borderLightColor)
-    }), (0, c.pickVariant)("$layout", {
-        horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;" ], (0, 
-        c.pick)({
-            enterprise: "calc(100% - 20px * 2)",
-            prisma: {
-                comfortable: "calc(100% - 20px * 2)",
-                compact: "calc(100% - 16px * 2)"
-            }
-        }), (0, c.pick)({
-            enterprise: (0, l.css)([ "bottom:-1px;" ])
-        })),
-        vertical: {
-            enterprise: (0, l.css)([ "width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;" ]),
-            prisma: (0, l.css)([ "width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;" ])
-        }
-    }), (0, c.pick)({
-        enterprise: c.variables.accentColor,
-        prisma: c.variables.contentColorActive
-    }), (0, c.pickVariant)("$layout", {
-        horizontal: {
-            enterprise: (0, l.css)([ "height:3px;" ]),
-            prisma: (0, c.pickVariant)("$withUnderline", {
-                // context appearance is only supported for Prisma
-                true: (0, l.css)([ "height:1px;" ])
-            })
-        },
-        vertical: {
-            enterprise: (0, l.css)([ "width:3px;" ]),
-            prisma: (0, l.css)([ "width:1px;" ])
-        }
-    }), /* sc-sel */ P, j, j);
-    var E = s().span.withConfig({
+    })([ "position:absolute;", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]):not([aria-selected='true']) > &&{", ";}[aria-selected='false'][aria-haspopup='true'] > &&{", "}" ], (0, 
+    u.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:100%;transition:height 0.2s;" ]),
+        vertical: (0, l.css)([ "width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;" ])
+    }), u.variables.interactiveColorAccent, (0, u.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "height:1px;" ]),
+        vertical: (0, l.css)([ "width:1px;" ])
+    }), /* sc-sel */ T, I, I);
+    var E = c().span.withConfig({
         displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
-    })([ "display:inline-block;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{", "}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], c.variables.borderRadius, (0, 
-    c.pickVariant)("$active", {
+    })([ "display:inline-block;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{background-color:", ";border-color:", ";box-shadow:", ";}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], u.variables.borderRadius, (0, 
+    u.pickVariant)("$active", {
         false: (0, l.css)([ "visibility:hidden;" ])
-    }), (0, c.pick)({
-        enterprise: (0, l.css)([ "color:", ";background-color:", ";border-color:", ";" ], (0, 
-        c.pick)({
-            light: c.variables.linkColor,
-            dark: c.variables.white
-        }), c.variables.backgroundColorHover, (0, c.pick)({
-            light: c.variables.gray60,
-            dark: c.variables.borderColor
-        })),
-        prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], c.variables.interactiveColorOverlayHover, c.variables.interactiveColorBorderHover, c.variables.hoverShadow)
-    }), /* sc-sel */ P, /* sc-sel */ P, /* sc-sel */ P);
-    var M = s().span.withConfig({
+    }), u.variables.interactiveColorOverlayHover, u.variables.interactiveColorBorderHover, u.variables.hoverShadow, /* sc-sel */ T, /* sc-sel */ T, /* sc-sel */ T);
+    var M = c().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "", " ", ";" ], (0, c.pickVariant)("$iconPosition", {
-        above: (0, l.css)([ "display:block;text-align:center;" ]),
-        left: (0, l.css)([ "text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
-        c.pick)({
-            enterprise: "0.4em",
-            prisma: "8px"
-        }))
-    }), (0, c.pickVariant)("$iconSize", {
-        inline: (0, l.css)([ "", "" ], (0, c.pick)({
-            prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
-        })),
-        small: (0, l.css)([ "font-size:24px;height:24px;padding:4px 0;" ]),
-        large: (0, l.css)([ "font-size:48px;height:48px;padding:8px 0 0;" ])
+    })([ "", "" ], (0, u.pickVariant)("$iconPosition", {
+        above: (0, l.css)([ "display:block;" ]),
+        left: (0, l.css)([ "padding-right:", ";> svg{transform:translateY(-1px);}" ], u.variables.spacingSmall)
     }));
-    var _ = s().div.withConfig({
+    var z = c().div.withConfig({
         displayName: "TabStyles__StyledLabelAndMenuContainer",
         componentId: "sc-1ry8mzj-4"
     })([ "display:flex;align-items:center;justify-content:center;gap:8px;" ]);
-    var $ = s().div.withConfig({
+    var P = c().div.withConfig({
         displayName: "TabStyles__StyledLabel",
         componentId: "sc-1ry8mzj-5"
     })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
-    c.pick)({
-        enterprise: "0",
-        prisma: {
-            comfortable: "16px 0",
-            compact: "10px 0"
-        }
+    u.pick)({
+        comfortable: "16px 0",
+        compact: "10px 0"
     }));
-    var D = s().span.withConfig({
+    var _ = c().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-6"
-    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], c.variables.contentColorDefault, (0, 
-    c.pick)({
-        enterprise: "inherit",
-        prisma: "10px"
-    }), (0, c.pick)({
-        enterprise: "0.4em 0.3em",
-        prisma: "0.4em 0.6em"
-    }), (0, c.pick)({
-        enterprise: "0",
-        prisma: "0.3em"
-    }), (0, c.pick)({
-        enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
-        prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
-    }), c.variables.contentColorDisabled);
-    var R = s().div.withConfig({
+    })([ "background:", ";border-radius:18px;color:", ";display:inline-block;font-size:", ";line-height:10px;margin-inline-start:0.3em;padding:0.4em 0.6em;&[disabled]{color:", ";}" ], u.variables.neutral100, u.variables.contentColorDefault, u.variables.fontSizeSmall, u.variables.contentColorDisabled);
+    var A = c().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
-    })([ "padding:8px;font-size:", ";" ], c.variables.fontSizeSmall);
+    })([ "padding:8px;font-size:", ";" ], u.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var q = function e() {
+    var R = function e() {
         return undefined;
     };
-    var V =  (0, r.createContext)({
-        onMenuOpen: q,
-        onMenuClose: q,
-        isMenuOpen: false
+    var q =  (0, r.createContext)({
+        focusedTabId: null,
+        isMenuOpen: false,
+        onMenuOpen: R,
+        onMenuClose: R
     });
-    V.displayName = "TabBar";
-    /* harmony default export */    const A = V;
+    q.displayName = "TabBar";
+    /* harmony default export */    const D = q;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var K = function e(t, r) {
+    var $ = function e(t, r) {
         if (t > r) {
             return "".concat(r, "+");
         }
@@ -321,16 +207,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function N(e) {
-        "@babel/helpers - typeof";
-        return N = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-            return typeof e;
-        } : function(e) {
-            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, N(e);
-    }
-    function F() {
-        return F = Object.assign ? Object.assign.bind() : function(e) {
+    function N() {
+        return N = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -338,20 +216,65 @@
                 }
             }
             return e;
-        }, F.apply(null, arguments);
+        }, N.apply(null, arguments);
+    }
+    function V(e, t) {
+        return K(e) || L(e, t) || W(e, t) || F();
+    }
+    function F() {
+        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 W(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;
+        }
+    }
+    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];
+        }
+        return n;
+    }
+    function L(e, t) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var n, a, o, i, l = [], c = !0, u = !1;
+            try {
+                if (o = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
+                    c = !1;
+                } else for (;!(c = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); c = !0) {
+                }
+            } catch (e) {
+                u = !0, a = e;
+            } finally {
+                try {
+                    if (!c && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
+                } finally {
+                    if (u) throw a;
+                }
+            }
+            return l;
+        }
+    }
+    function K(e) {
+        if (Array.isArray(e)) return e;
     }
     function U(e, t) {
         if (null == e) return {};
-        var r, n, i = W(e, t);
+        var r, n, a = X(e, t);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function W(e, t) {
+    function X(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -362,94 +285,7 @@
         }
         return r;
     }
-    function L(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function H(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, ne(n.key), n);
-        }
-    }
-    function Y(e, t, r) {
-        return t && H(e.prototype, t), r && H(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function G(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && J(e, t);
-    }
-    function J(e, t) {
-        return J = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, J(e, t);
-    }
-    function Q(e) {
-        var t = ee();
-        return function() {
-            var r, n = te(e);
-            if (t) {
-                var i = te(this).constructor;
-                r = Reflect.construct(n, arguments, i);
-            } else r = n.apply(this, arguments);
-            return X(this, r);
-        };
-    }
-    function X(e, t) {
-        if (t && ("object" == N(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return Z(e);
-    }
-    function Z(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function ee() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (ee = function t() {
-            return !!e;
-        })();
-    }
-    function te(e) {
-        return te = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, te(e);
-    }
-    function re(e, t, r) {
-        return (t = ne(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
-    }
-    function ne(e) {
-        var t = ie(e, "string");
-        return "symbol" == N(t) ? t : t + "";
-    }
-    function ie(e, t) {
-        if ("object" != N(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != N(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === t ? String : Number)(e);
-    }
-    var oe = {
+    var Y = {
         /** @private. Is the tab active. */
         active: o().bool,
         ariaControls: o().string,
@@ -461,11 +297,7 @@
         label: o().oneOfType([ o().string, o().element ]),
         /** @private Maximum count number in tab label */
         maxCount: o().number,
-        /** @private */
-        splunkTheme: o().object,
         tabId: o().string,
-        /** @private. The internal key of the tab */
-        tabKey: o().number,
         to: o().string,
         tooltip: o().node,
         /**
@@ -476,225 +308,178 @@
    */
         menu: o().node
     };
-    var ae = {
-        active: false
+    var G = {
+        tension: 400
     };
-    var le =  function(e) {
-        G(r, e);
-        var t = Q(r);
+    var J = [ "offScreen", "escapeKey" ];
+    var Q = function e(t) {
+        var a = t.active, o = t.ariaControls, i = t.count, l = t.disabled, c = t.elementRef, u = t.icon, s = t.label, d = t.maxCount, v = t.tabId, p = t.to, m = t.tooltip, g = t.menu, k = U(t, [ "active", "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu" ]);
         // @docs-props-type TabPropsBase
-                function r(e) {
-            var n;
-            L(this, r);
-            n = t.call(this, e);
-            re(Z(n), "popoverId", void 0);
-            re(Z(n), "ariaId", void 0);
-            re(Z(n), "menuDescription", void 0);
-            re(Z(n), "handleMount", (function(e) {
-                n.setState({
-                    anchor: e
-                });
-                B(n.props.elementRef, e);
-            }));
-            re(Z(n), "handleTooltipOpen", (function() {
-                n.setState({
-                    open: true
-                });
-            }));
-            re(Z(n), "handleTooltipClose", (function() {
-                n.setState({
-                    open: false
-                });
-            }));
-            re(Z(n), "handleClick", (function(e) {
-                var t = n.props, r = t.active, i = t.tabId, o = t.tabKey, a = t.to;
-                var l = n.context.onClick;
- // 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 (!r) {
-                    l === null || l === void 0 ? void 0 : l(e, {
-                        tabId: i,
-                        tabKey: o
-                    });
-                }
-                if (a == null || a != null && r) {
-                    e.preventDefault();
-                }
-            }));
-            re(Z(n), "handleFocus", (function(e) {
-                n.handleTooltipOpen();
-                var t = n.props, r = t.tabId, i = t.tabKey;
-                var o = n.context.onFocus;
-                o === null || o === void 0 ? void 0 : o(e, {
-                    tabId: r,
-                    tabKey: i
+                var x = (0, r.useState)(false), O = V(x, 2), I = O[0], R = O[1];
+        var q = (0, r.useState)(null), F = V(q, 2), W = F[0], H = F[1];
+        var L = (0, r.useContext)(D), K = L.disabled, X = L.focusedTabId, Y = L.iconPosition, Q = Y === void 0 ? "above" : Y, Z = L.layout, ee = Z === void 0 ? "horizontal" : Z, te = L.width, re = L.onClick, ne = L.onFocus, ae = L.onMenuOpen, oe = L.onMenuClose, ie = L.isMenuOpen;
+        var le = (0, w.createDOMID)("aria-id");
+        var ce = (0, w.createDOMID)("menu-description");
+        var ue = (0, w.createDOMID)("popover");
+        var se = (0, r.useMemo)((function() {
+            return v || (0, w.createGUID)();
+        }), [ v ]);
+        var de = k.style;
+        var fe = K || l ? "disabled" : false;
+        var ve = te ? {
+            width: te
+        } : de;
+        var be = s ? s.toString() : "";
+        var pe = i === 0 || i ? "".concat(i === null || i === void 0 ? void 0 : i.toString()) : "";
+        // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
+                var ye = (0, r.useMemo)((function() {
+            // SUI-6877: if the label isn't a string, don't attempt to do this since it'll just be wrong
+            return s && typeof s === "string" ? "".concat(be, "    ").concat(pe) : "";
+        }), [ pe, s, be ]);
+        var me = (0, r.useCallback)((function() {
+            W === null || W === void 0 ? void 0 : W.focus();
+        }), [ W ]);
+        var he = (0, r.useCallback)((function(e) {
+            H(e);
+            B(c, e);
+        }), [ c ]);
+        var ge = (0, r.useCallback)((function() {
+            R(true);
+        }), []);
+        var Ce = (0, r.useCallback)((function() {
+            R(false);
+        }), []);
+        var Se = (0, r.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 (!a) {
+                re === null || re === void 0 ? void 0 : re(e, {
+                    tabId: se
                 });
-            }));
-            re(Z(n), "handleFocusMenuToggle", (function() {
-                n.focus();
-            }));
-            re(Z(n), "handleBlur", (function() {
-                n.handleTooltipClose();
-            }));
-            n.popoverId = (0, C.createDOMID)("popover");
-            n.ariaId = (0, C.createDOMID)("aria-id");
-            n.menuDescription = (0, C.createDOMID)("menu-description");
-            n.state = {
-                open: false,
-                anchor: null
-            };
-            return n;
-        }
-        Y(r, [ {
-            key: "focus",
-            value: function e() {
-                var t;
-                (t = this.state.anchor) === null || t === void 0 ? void 0 : t.focus();
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.props, r = t.active, i = t.ariaControls, o = t.count, a = t.disabled, l = t.icon, s = t.label, c = t.tabId, u = t.maxCount, p = t.splunkTheme, v = t.to, h = t.tooltip, m = t.menu, x = t.tabKey, w = U(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip", "menu", "tabKey" ]);
-                var C = this.state, O = C.anchor, T = C.open;
-                var I = this.context, j = I.appearance, q = I.disabled, V = I.iconPosition, A = V === void 0 ? "above" : V, B = I.iconSize, N = I.layout, W = N === void 0 ? "horizontal" : N, L = I.width, H = I.onMenuOpen, Y = I.onMenuClose, G = I.isMenuOpen, J = I.focusedTabKey;
-                var Q = w.style;
-                var X = q || a || false;
-                var Z = L ? {
-                    width: L
-                } : Q;
-                var ee = p.isEnterprise;
-                var te = "";
-                // SUI-6877: if the label isn't a string, don't attempt to do this since it'll just be wrong
-                                if (s && typeof s === "string") {
-                    var re = s ? s.toString() : "";
-                    var ne = o === 0 || o ? "".concat(o === null || o === void 0 ? void 0 : o.toString()) : "";
-                    // titleValue is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
-                                        if (ee) {
-                        // countValue needs unicode space for width to not change after it's clicked.
-                        var ie = ne ? "(".concat(ne, ")  ") : "";
-                        te = "".concat(re, " ").concat(ie);
-                    } else {
-                        te = "".concat(re, "    ").concat(ne);
-                    }
-                }
-                var oe = J === x && G && !!m;
-                var ae =  n().createElement(E, {
-                    $active: r,
-                    "data-test": "menu-toggle",
-                    tabIndex: -1,
-                    onFocus: this.handleFocusMenuToggle
-                }, ee ?  n().createElement(g(), {
-                    size: 1.1
-                }) :  n().createElement(b(), null));
-                var le = function e(t) {
-                    // if there is no menu, or if we are not in horizontal, do not render menu container
-                    if (!m || W !== "horizontal") {
-                        return t;
-                    }
-                    
-                    return n().createElement(_, null, t,  n().createElement(y(), {
-                        toggle: ae,
-                        align: "center",
-                        onRequestOpen: H,
-                        onRequestClose: Y,
-                        open: oe
-                    }, m));
-                };
-                
-                // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
-                // eslint-disable-next-line
-                // @ts-ignore-next-line
-                return n().createElement(P, F({
-                    "aria-controls": i,
-                    "aria-selected": r,
-                    "aria-labelledby": this.ariaId,
-                    "aria-describedby": m ? this.menuDescription : undefined,
-                    "aria-haspopup": oe,
-                    "data-test": "tab",
-                    "data-test-tab-id": c,
-                    "data-test-popover-id": h ? this.popoverId : undefined,
-                    $layout: W,
-                    $icon: l && B !== "inline" ? true : undefined,
-                    disabled: X,
-                    style: Z,
-                    elementRef: this.handleMount,
-                    "data-title": te
-                }, d()(w, "elementRef"), {
-                    onClick: this.handleClick,
-                    onFocus: this.handleFocus,
-                    onMouseEnter: this.handleTooltipOpen,
-                    onBlur: this.handleBlur,
-                    onMouseLeave: this.handleTooltipClose,
-                    role: "tab",
-                    tabIndex: r ? undefined : -1,
-                    to: v,
-                    $hasMenu: !!m
-                }), le( n().createElement($, {
-                    "data-test": "label",
-                    $withUnderline: j === "navigation"
-                }, l &&  n().createElement(M, {
-                    $iconPosition: A,
-                    $iconSize: B
-                }, l), s, !m && (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
-                    "data-test": "count",
-                    disabled: X
-                }, u ? K(o, u) : o)), !!m &&  n().createElement(S(), {
-                    "aria-hidden": true,
-                    id: this.menuDescription
-                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(z, {
-                    $layout: W,
-                    $withUnderline: j === "navigation"
-                }), !a && h &&  n().createElement(k(), {
-                    role: "tooltip",
-                    anchor: O,
-                    animationConfig: {
-                        tension: 400
-                    },
-                    appearance: "inverted",
-                    closeReasons: [ "offScreen", "escapeKey" ],
-                    defaultPlacement: W === "vertical" ? "right" : "above",
-                    id: this.popoverId,
-                    open: !!O && T,
-                    align: "center"
-                },  n().createElement(R, null, h)), h &&  n().createElement(S(), {
-                    "aria-hidden": "true",
-                    id: this.ariaId
-                }, h));
+            if (p == null || p != null && a) {
+                e.preventDefault();
             }
-        } ]);
-        return r;
-    }(r.Component);
-    re(le, "propTypes", oe);
-    re(le, "defaultProps", ae);
-    re(le, "contextType", A);
-    var se = (0, c.withSplunkTheme)(le);
-    se.propTypes = le.propTypes;
-    /* harmony default export */    const ce = se;
+        }), [ a, re, se, p ]);
+        var we = (0, r.useCallback)((function(e) {
+            ge();
+            ne === null || ne === void 0 ? void 0 : ne(e, {
+                tabId: se
+            });
+        }), [ ge, ne, se ]);
+        var ke = (0, r.useCallback)((function() {
+            me();
+        }), [ me ]);
+        var xe = (0, r.useCallback)((function() {
+            Ce();
+        }), [ Ce ]);
+        var Oe = (0, r.useCallback)((function(e) {
+            // prevent clicking on the menu icon from changing the active tab
+            e.stopPropagation();
+            ae(se);
+        }), [ ae, se ]);
+        var Ie = X === se && ie && !!g;
+        var Te =  n().createElement(E, {
+            $active: a,
+            "data-test": "menu-toggle",
+            tabIndex: -1,
+            onFocus: ke
+        },  n().createElement(b(), null));
+        var je = function e(t) {
+            
+            return n().createElement(z, null, t,  n().createElement(y(), {
+                toggle: Te,
+                align: "center",
+                onRequestOpen: Oe,
+                onRequestClose: oe,
+                open: Ie
+            }, g));
+        };
+        var Ee =  n().createElement(P, {
+            "data-test": "label"
+        }, u &&  n().createElement(M, {
+            $iconPosition: Q
+        }, u), s, !g && (i === 0 || i) &&  n().createElement(n().Fragment, null,  n().createElement(C(), null, " "),  n().createElement(_, {
+            "data-test": "count",
+            disabled: !!fe
+        }, d ? $(i, d) : i)), !!g &&  n().createElement(C(), {
+            "aria-hidden": true,
+            id: ce
+        }, (0, S._)("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(T, N({
+            "aria-controls": o,
+            "aria-selected": a,
+            "aria-labelledby": le,
+            "aria-describedby": g ? ce : undefined,
+            "aria-haspopup": Ie,
+            "data-test": "tab",
+            "data-test-tab-id": se,
+            "data-test-popover-id": m ? ue : undefined,
+            "data-title": ye,
+            $layout: ee,
+            disabled: fe,
+            style: ve,
+            elementRef: he,
+            onClick: Se,
+            onFocus: we,
+            onMouseEnter: ge,
+            onBlur: xe,
+            onMouseLeave: Ce,
+            role: "tab",
+            tabIndex: a ? undefined : -1,
+            to: p,
+            $hasMenu: !!g
+        }, f()(k, "elementRef")), g && ee === "horizontal" ? je(Ee) : Ee,  n().createElement(j, {
+            $layout: ee
+        }), !l && m &&  n().createElement(h(), {
+            role: "tooltip",
+            anchor: W,
+            animationConfig: G,
+            appearance: "inverted",
+            closeReasons: J,
+            defaultPlacement: ee === "vertical" ? "right" : "above",
+            id: ue,
+            open: !!W && I,
+            align: "center"
+        },  n().createElement(A, null, m)), m &&  n().createElement(C(), {
+            "aria-hidden": "true",
+            id: le
+        }, m));
+    };
+    Q.propTypes = Y;
+    /* harmony default export */    const Z = Q;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function ue(e, t, r) {
+    function ee(e, t) {
+        return e.find((function(e) {
+            return e && e.id === t;
+        }));
+    }
+    function te(e, t, r) {
         for (var n = 0; n < e.length; n += 1) {
-            var i;
-            var o = (n + r) % e.length;
-            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[o];
+            var a = (n + r) % e.length;
+            if (e[a].disabled !== true) {
+                return e[a];
             }
         }
         return e[t];
     }
-    function pe(e, t, r) {
+    function re(e, t, r) {
         for (var n = e.length; n > 0; n -= 1) {
-            var i;
-            var o = (n + r) % e.length;
-            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[o];
+            var a = (n + r) % e.length;
+            if (e[a].disabled !== true) {
+                return e[a];
             }
         }
         return e[t];
     }
     // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-    function de() {
-        return de = Object.assign ? Object.assign.bind() : function(e) {
+    function ne() {
+        return ne = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -702,65 +487,65 @@
                 }
             }
             return e;
-        }, de.apply(null, arguments);
+        }, ne.apply(null, arguments);
     }
-    function fe(e, t) {
-        return me(e) || ye(e, t) || be(e, t) || ve();
+    function ae(e, t) {
+        return ue(e) || ce(e, t) || ie(e, t) || oe();
     }
-    function ve() {
+    function oe() {
         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 be(e, t) {
+    function ie(e, t) {
         if (e) {
-            if ("string" == typeof e) return he(e, t);
+            if ("string" == typeof e) return le(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;
+            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) ? le(e, t) : void 0;
         }
     }
-    function he(e, t) {
+    function le(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var r = 0, n = Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function ye(e, t) {
+    function ce(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var n, i, o, a, l = [], s = !0, c = !1;
+            var n, a, o, i, l = [], c = !0, u = !1;
             try {
                 if (o = (r = r.call(e)).next, 0 === t) {
                     if (Object(r) !== r) return;
-                    s = !1;
-                } else for (;!(s = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); s = !0) {
+                    c = !1;
+                } else for (;!(c = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); c = !0) {
                 }
             } catch (e) {
-                c = !0, i = e;
+                u = !0, a = e;
             } finally {
                 try {
-                    if (!s && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!c && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                 } finally {
-                    if (c) throw i;
+                    if (u) throw a;
                 }
             }
             return l;
         }
     }
-    function me(e) {
+    function ue(e) {
         if (Array.isArray(e)) return e;
     }
-    function ge(e, t) {
+    function se(e, t) {
         if (null == e) return {};
-        var r, n, i = xe(e, t);
+        var r, n, a = de(e, t);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function xe(e, t) {
+    function de(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -771,169 +556,204 @@
         }
         return r;
     }
-    var ke = 50;
+    var fe = 50;
     /** @public */
-    /** @public */    var we = {
+    /** @public */    var ve = {
         autoActivate: o().bool,
         activeTabId: o().string,
-        appearance: o().oneOf([ "navigation", "context" ]),
         children: o().node,
         /** @private */
         disabled: o().bool,
         elementRef: o().oneOfType([ o().func, o().object ]),
         iconPosition: o().oneOf([ "above", "left" ]),
-        iconSize: o().oneOf([ "inline", "small", "large" ]),
         layout: o().oneOf([ "horizontal", "vertical" ]),
         onChange: o().func,
         tabWidth: o().number
     };
-    function Se(e) {
-        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, s = e.children, c = e.disabled, p = c === void 0 ? false : c, d = e.elementRef, f = e.iconPosition, v = e.iconSize, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = ge(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconPosition", "iconSize", "layout", "onChange", "tabWidth" ]);
+    function be(e) {
+        var t = e.activeTabId, a = e.autoActivate, o = e.children, l = e.disabled, c = l === void 0 ? false : l, u = e.elementRef, d = e.iconPosition, f = d === void 0 ? "left" : d, v = e.layout, b = v === void 0 ? "horizontal" : v, p = e.onChange, y = e.tabWidth, m = se(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
-                var x = (0, r.useState)(false), k = fe(x, 2), w = k[0], S = k[1];
-        var C = (0, r.useState)(0), O = fe(C, 2), T = O[0], I = O[1];
-        var j = (0, r.useRef)(T);
-        j.current = T;
-        var P = (0, r.useRef)("");
-        var z = (0, r.useRef)([]);
-        var E = h === "vertical" ? "down" : "right";
-        var M = h === "vertical" ? "up" : "left";
-        if (false) {}
-        var _ = f;
-        var $;
-        if (false) {}
-        if (_ == null) {
-            $ = v;
-            if (v != null) {
-                _ = v === "inline" ? "left" : "above";
-            } else {
-                _ = "left";
+                var h = (0, r.useState)(false), g = ae(h, 2), C = g[0], S = g[1];
+        var w = (0, r.useState)(0), k = ae(w, 2), x = k[0], O = k[1];
+        var I = (0, r.useState)(null), T = ae(I, 2), j = T[0], E = T[1];
+        var M = (0, r.useState)(false), z = ae(M, 2), P = z[0], _ = z[1];
+ // Tracked via state b/c only individual tabs really get focus but we need to know at some points if they intend to be in the TabBar overall
+                var A = (0, r.useRef)(null);
+        var R = (0, r.useRef)([]);
+ // ref and not state to prevent unnecessary re-renders on each child Tab mount/reorder
+                var q = b === "vertical" ? "down" : "right";
+        var $ = b === "vertical" ? "up" : "left";
+        var N = y && y > fe ? y : null;
+        var V = (0, r.useCallback)((function(e) {
+            var r = e.relatedTarget && A.current && A.current.contains(e.relatedTarget);
+ // intentionally checks any children, not just tabElements to account non-tab children passed in that need to be tabbed to
+                        if (r || C) {
+                // if the target we are "losing focus to" is child of the TabBar or we know a Tab's Menu is open then we don't consider this TabBar as having lost focus
+                return;
             }
-        } else if (false) {}
-        var D = (0, r.useCallback)((function(e, t) {
-            var r = t.tabKey, n = t.tabId;
-            if (r != null) {
-                I(r);
+            _(false);
+            E(t || null);
+ // when we re-focus it should always be back at the activeTab if it was set
+                }), [ t, C ]);
+        var F = (0, r.useCallback)((function() {
+            _(true);
+        }), []);
+        var W = (0, r.useCallback)((function(e) {
+            A.current = e;
+            B(u, e);
+        }), [ u, A ]);
+        var H = (0, r.useCallback)((function(e, r) {
+            if (document.activeElement === e.target) {
+                // tab already focused, no need to continue
+                return;
             }
+            var n = r.tabId;
             if (n != null) {
-                P.current = n;
+                E(n);
             }
-            if (i) {
-                y === null || y === void 0 ? void 0 : y(e, {
+            if (a && t !== n) {
+                p === null || p === void 0 ? void 0 : p(e, {
                     selectedTabId: n
                 });
             }
-        }), [ i, y ]);
-        var R = (0, r.useCallback)((function(e, t) {
-            y === null || y === void 0 ? void 0 : y(e, {
-                selectedTabId: t.tabId
+        }), [ t, a, p ]);
+        var L = (0, r.useCallback)((function(e, t) {
+            var r = t.tabId;
+            E(r);
+            p === null || p === void 0 ? void 0 : p(e, {
+                selectedTabId: r
             });
-        }), [ y ]);
-        var q = (0, r.useMemo)((function() {
-            var e = 0;
-            // reset tabRefs since children are changed
-                        z.current = [];
-            return r.Children.toArray(s).filter(r.isValidElement).map((function(i) {
+        }), [ p ]);
+        var K = (0, r.useMemo)((function() {
+            return r.Children.toArray(o).filter(r.isValidElement).map((function(e, n) {
                 // <TabBar> allows non-<Tab> children, pass them through without any modification
-                if (typeof i.type === "string" || i.type.name !== ce.name) {
-                    return i;
+                if (typeof e.type === "string" || e.type.name !== Z.name) {
+                    return e;
                 }
-                var o =  n().createRef();
-                z.current.push(o);
                 var a = {
-                    active: t === i.props.tabId,
-                    tabKey: e,
-                    ref: o
+                    active: t === e.props.tabId,
+                    elementRef: function e(t) {
+                        R.current[n] = t;
+                    },
+                    id: e.props.tabId
                 };
-                e += 1;
                 
-                return (0, r.cloneElement)(i, a);
-            }));
-        }), [ t, s ]);
-        (0, r.useEffect)((function() {
-            q.forEach((function(e, t) {
-                // if the focused tab has changed order in the tab bar,
-                //   then we want to update the focusedTabKey to the new position of the focused tab
-                if (P.current != null && P.current === e.props.tabId && j.current !== t) {
-                    I(t);
-                }
+                return (0, r.cloneElement)(e, a);
             }));
-        }), [ q ]);
-        var V = m && m > ke ? m : null;
-        var K = (0, r.useCallback)((function(e) {
-            var t = (0, a.keycode)(e.nativeEvent);
+        }), [ t, o ]);
+        var U = (0, r.useCallback)((function(e) {
+            // if command key on Mac was pressed ignore
+            if (e.nativeEvent.metaKey) {
+                return;
+            }
+            var t = (0, i.keycode)(e.nativeEvent);
             var r;
-            if (t === E) {
-                r = ue(z.current, T, T + 1);
-            } else if (t === M) {
-                r = pe(z.current, T, T - 1);
+            if (t === q) {
+                r = te(R.current, x, x + 1);
+            } else if (t === $) {
+                r = re(R.current, x, x - 1);
             } else if (t === "home") {
-                r = ue(z.current, T, 0);
+                r = te(R.current, x, 0);
             } else if (t === "end") {
-                r = pe(z.current, T, z.current.length - 1);
-            } else if (h === "horizontal" && e.shiftKey && t === "f10") {
+                r = re(R.current, x, R.current.length - 1);
+            } else if (b === "horizontal" && e.shiftKey && t === "f10") {
                 S((function(e) {
                     if (e) {
-                        var t;
                         // if we're closing, we want to shift focus to the tab
-                                                var r = z.current[T];
-                        r === null || r === void 0 ? void 0 : (t = r.current) === null || t === void 0 ? void 0 : t.focus();
+                        var t = R.current[x];
+                        t === null || t === void 0 ? void 0 : t.focus();
                     }
                     return !e;
                 }));
-            } else if (h === "horizontal" && t === "down") {
+            } else if (b === "horizontal" && t === "down") {
                 S(true);
             }
-            if (r != null) {
-                var n;
-                (n = r.current) === null || n === void 0 ? void 0 : n.focus();
+            if (r) {
+                E(r.id);
                 e.preventDefault();
             }
-        }), [ T, h, E, M ]);
-        var B = (0, r.useCallback)((function(e) {
-            // prevent clicking on the menu icon from changing the active tab
-            e.stopPropagation();
-            S(true);
+        }), [ x, b, q, $ ]);
+        var X = (0, r.useCallback)((function(e) {
+            E(e);
+ // in case they clicked on a menu of tab they were not even focused on yet
+                        S(true);
         }), []);
-        var N = (0, r.useCallback)((function(e) {
+        var Y = (0, r.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();
             S(false);
         }), []);
-        var F = (0, r.useMemo)((function() {
+        var G = (0, r.useMemo)((function() {
             return {
-                appearance: l,
-                disabled: p,
-                iconPosition: _,
-                iconSize: $,
-                layout: h,
-                onClick: R,
-                onFocus: D,
-                width: V,
-                onMenuOpen: B,
-                onMenuClose: N,
-                isMenuOpen: w,
-                focusedTabKey: T
+                disabled: c,
+                focusedTabId: j,
+                iconPosition: f,
+                layout: b,
+                onClick: L,
+                onFocus: H,
+                width: N,
+                onMenuOpen: X,
+                onMenuClose: Y,
+                isMenuOpen: C
             };
-        }), [ l, p, T, _, $, w, h, N, B, R, D, V ]);
+        }), [ c, j, f, C, b, Y, X, L, H, N ]);
+        (0, r.useEffect)((function() {
+            // Purpose: Keep focusedTabIndex in sync as focusedTabId changes
+            var e = 0;
+            var t = j ? ee(R.current, j) : null;
+            if (t) {
+                e = R.current.indexOf(t);
+            }
+            O(e);
+        }), [ j ]);
+        (0, r.useEffect)((function() {
+            // Purpose: On mount we need to sync the focusedTab state to reality
+            // b/c we don't know which tab they may start out as being the active.
+            if (t) {
+                var e = ee(R.current, t);
+                if (!e) {
+                    return;
+                }
+                E(t);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally want empty dep array to run only once after first render
+                }), []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally want this to be after every render. As far as I can tell infinite loop impossible b/c state set func only fires if tab that should be focused is not so after first time it would be back in sync and not fire again.
+                (0, r.useEffect)((function() {
+            // Purpose: Keep focus in sync (after every render) with tabs being shuffled between renders
+            // & handles when TabBar first gets focus scenario too.
+            if (j) {
+                var e = ee(R.current, j);
+                if (!e) {
+                    return;
+                }
+                if (P && document.activeElement !== e) {
+                    e.focus();
+                    // make sure focused index is in sync too - this has to be done here manually vs the other focusedTabId useEffect since it would've already fired
+                                        var t = R.current.indexOf(e);
+                    O(t);
+                }
+            }
+        }));
         
-        return n().createElement(u, de({
-            "data-tab-layout": h,
+        return n().createElement(s, ne({
+            "data-tab-layout": b,
             "data-test-active-tab-id": t,
             "data-test": "tab-bar",
             role: "tablist",
-            ref: d,
-            $layout: h,
-            $withUnderline: l === "navigation",
-            onKeyDown: K
-        }, g),  n().createElement(A.Provider, {
-            value: F
-        }, q));
+            ref: W,
+            $layout: b,
+            onBlur: V,
+            onFocus: F,
+            onKeyDown: U
+        }, m),  n().createElement(D.Provider, {
+            value: G
+        }, K));
     }
-    Se.propTypes = we;
-    Se.Tab = ce;
-    /* harmony default export */    const Ce = Se;
+    be.propTypes = ve;
+    be.Tab = Z;
+    /* harmony default export */    const pe = be;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();