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

package/TabBar.js

@@ -61,127 +61,170 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ Z,
-        default: () => /* reexport */ pe
+        Tab: () => /* reexport */ ne,
+        default: () => /* reexport */ Ie
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var o =  e.n(a);
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const i = require("@splunk/ui-utils/keyboard");
+    const o = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const l = require("@splunk/react-ui/usePrevious");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var c =  e.n(l);
+    const c = require("styled-components");
+    var s =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const u = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var s = c().div.withConfig({
+    var f = s().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 ", ";}", ";" ], 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;}" ])
+    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], d.mixins.reset("flex"), d.variables.neutral300, (0, 
+    d.pickVariant)("$layout", {
+        horizontal: (0, c.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], d.variables.spacingXLarge),
+        vertical: (0, c.css)([ "display:inline-flex;flex-direction:column;row-gap:", ";&::before{border-right-width:1px;}" ], d.variables.spacingXLarge)
     }));
     // CONCATENATED MODULE: external "lodash/omit"
-    const d = require("lodash/omit");
-    var f =  e.n(d);
-    // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
-    const v = require("@splunk/react-icons/DotsThreeVertical");
+    const v = require("lodash/omit");
     var b =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
+    const p = require("@splunk/react-icons/DotsThreeVertical");
+    var m =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const p = require("@splunk/react-ui/Dropdown");
-    var y =  e.n(p);
+    const y = require("@splunk/react-ui/Dropdown");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const m = require("@splunk/react-ui/Popover");
-    var h =  e.n(m);
+    const h = require("@splunk/react-ui/Popover");
+    var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const g = require("@splunk/react-ui/ScreenReaderContent");
-    var C =  e.n(g);
+    const C = require("@splunk/react-ui/ScreenReaderContent");
+    var w =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const S = require("@splunk/ui-utils/i18n");
+    const O = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const w = require("@splunk/ui-utils/id");
+    const k = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const k = require("@splunk/react-ui/Clickable");
-    var x =  e.n(k);
+    const x = require("@splunk/react-ui/Clickable");
+    var I =  e.n(x);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    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 j = (0, c.css)([ "color:", ";" ], d.variables.contentColorActive);
+    var P = "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)
     });
-    var T = c()(x()).withConfig({
+    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);
+        }
+        if (a === "above" && r) {
+            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" && r) {
+            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;" ]);
+        }
+        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);
+        }
+        if (n === "left" && r) {
+            return (0, c.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:16px 1fr ", " ", ";" ], d.variables.spacingXSmall, P);
+        }
+        return (0, c.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], d.variables.spacingXSmall, P);
+    };
+    var M = s()(I()).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;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({
+    })([ "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);
+    }), (function(e) {
+        var t = e.$hasIcon, r = e.$hasMenu, n = e.$iconPosition, a = e.$layout;
+        if (a === "vertical") {
+            return E({
+                $hasIcon: t,
+                $iconPosition: n
+            });
+        }
+        return $({
+            $hasIcon: t,
+            $hasMenu: r,
+            $iconPosition: n
+        });
+    }), 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);
+    var A = s().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
-    })([ "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({
+    })([ "grid-area:underline;position:absolute;", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]):not([aria-selected='true']) > &&{", ";}[aria-selected='false'][aria-haspopup='true'] > &&{", "}" ], (0, 
+    d.pickVariant)("$layout", {
+        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)
+    }), /* sc-sel */ M, T, T);
+    var z = s().span.withConfig({
         displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
-    })([ "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;" ])
-    }), u.variables.interactiveColorOverlayHover, u.variables.interactiveColorBorderHover, u.variables.hoverShadow, /* sc-sel */ T, /* sc-sel */ T, /* sc-sel */ T);
-    var M = c().span.withConfig({
+    })([ "display:inline-block;grid-area:menu;margin-left:4px;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{background-color:", ";border-color:", ";}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], d.variables.borderRadius, (0, 
+    d.pickVariant)("$active", {
+        false: (0, c.css)([ "visibility:hidden;" ])
+    }), d.variables.interactiveColorOverlayHover, d.variables.interactiveColorBorderHover, /* sc-sel */ M, /* sc-sel */ M, /* sc-sel */ M);
+    var _ = s().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "", "" ], (0, u.pickVariant)("$iconPosition", {
-        above: (0, l.css)([ "display:block;" ]),
-        left: (0, l.css)([ "padding-right:", ";> svg{transform:translateY(-1px);}" ], u.variables.spacingSmall)
+    })([ "grid-area:icon;", "" ], (0, d.pickVariant)("$iconPosition", {
+        above: (0, c.css)([ "display:flex;justify-content:center;" ]),
+        left: (0, c.css)([ "> svg{transform:translateY(-1px);}" ])
     }));
-    var z = c().div.withConfig({
-        displayName: "TabStyles__StyledLabelAndMenuContainer",
-        componentId: "sc-1ry8mzj-4"
-    })([ "display:flex;align-items:center;justify-content:center;gap:8px;" ]);
-    var P = c().div.withConfig({
+    var D = s().div.withConfig({
         displayName: "TabStyles__StyledLabel",
-        componentId: "sc-1ry8mzj-5"
-    })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
-    u.pick)({
-        comfortable: "16px 0",
-        compact: "10px 0"
+        componentId: "sc-1ry8mzj-4"
+    })([ "grid-area:label;min-width:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", "" ], (function(e) {
+        var t = e.$iconPosition;
+        return t === "above" && (0, c.css)([ "text-align:center;" ]);
     }));
-    var _ = c().span.withConfig({
+    var R = s().span.withConfig({
         displayName: "TabStyles__StyledCount",
-        componentId: "sc-1ry8mzj-6"
-    })([ "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({
+        componentId: "sc-1ry8mzj-5"
+    })([ "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:", ";}" ], d.variables.neutral100, d.variables.contentColorDefault, d.variables.fontSizeSmall, d.variables.contentColorDisabled);
+    var q = s().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
-        componentId: "sc-1ry8mzj-7"
-    })([ "padding:8px;font-size:", ";" ], u.variables.fontSizeSmall);
+        componentId: "sc-1ry8mzj-6"
+    })([ "padding:8px;font-size:", ";" ], d.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var R = function e() {
+    var N = function e() {
         return undefined;
     };
-    var q =  (0, r.createContext)({
-        focusedTabId: null,
+    var W =  (0, r.createContext)({
         isMenuOpen: false,
-        onMenuOpen: R,
-        onMenuClose: R
+        onMenuOpen: N,
+        onMenuClose: N,
+        registerTab: N
     });
-    q.displayName = "TabBar";
-    /* harmony default export */    const D = q;
+    W.displayName = "TabBar";
+    /* harmony default export */    const V = W;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var $ = function e(t, r) {
+    var X = function e(t, r) {
         if (t > r) {
             return "".concat(r, "+");
         }
@@ -207,8 +250,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function N() {
-        return N = Object.assign ? Object.assign.bind() : function(e) {
+    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) {
@@ -216,15 +259,15 @@
                 }
             }
             return e;
-        }, N.apply(null, arguments);
+        }, F.apply(null, arguments);
     }
-    function V(e, t) {
-        return K(e) || L(e, t) || W(e, t) || F();
+    function K(e, t) {
+        return G(e) || Y(e, t) || U(e, t) || L();
     }
-    function F() {
+    function L() {
         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) {
+    function U(e, t) {
         if (e) {
             if ("string" == typeof e) return H(e, t);
             var r = {}.toString.call(e).slice(8, -1);
@@ -238,43 +281,43 @@
         }
         return n;
     }
-    function L(e, t) {
+    function Y(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;
+            var n, a, i, o, l = [], u = !0, c = !1;
             try {
-                if (o = (r = r.call(e)).next, 0 === t) {
+                if (i = (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) {
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
-                u = !0, a = e;
+                c = !0, a = e;
             } finally {
                 try {
-                    if (!c && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
+                    if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
                 } finally {
-                    if (u) throw a;
+                    if (c) throw a;
                 }
             }
             return l;
         }
     }
-    function K(e) {
+    function G(e) {
         if (Array.isArray(e)) return e;
     }
-    function U(e, t) {
+    function J(e, t) {
         if (null == e) return {};
-        var r, n, a = X(e, t);
+        var r, n, a = Q(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) && (a[r] = e[r]);
+            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]);
             }
         }
         return a;
     }
-    function X(e, t) {
+    function Q(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -285,181 +328,192 @@
         }
         return r;
     }
-    var Y = {
-        /** @private. Is the tab active. */
-        active: o().bool,
-        ariaControls: o().string,
-        count: o().number,
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        icon: o().node,
-        id: o().string,
-        label: o().oneOfType([ o().string, o().element ]),
+    var Z = {
+        ariaControls: i().string,
+        count: i().number,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        icon: i().node,
+        id: i().string,
+        label: i().oneOfType([ i().string, i().element ]),
         /** @private Maximum count number in tab label */
-        maxCount: o().number,
-        tabId: o().string,
-        to: o().string,
-        tooltip: o().node,
+        maxCount: i().number,
+        tabId: i().string,
+        to: i().string,
+        tooltip: i().node,
         /**
    * @private
    * Accepts a Menu component that is rendered for that Tab.
    * Is not compatible with `count`.
    * The `menu` prop is only supported in horizontal layout due to both design constraints as well as keyboard support.
    */
-        menu: o().node
+        menu: i().node,
+        /**
+   * @private
+   * Internal prop injected by TabBar to track order.
+   */
+        index: i().number
     };
-    var G = {
+    var ee = {
         tension: 400
     };
-    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" ]);
+    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" ]);
         // @docs-props-type TabPropsBase
-                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()) : "";
+                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)();
+        }), [ d ]);
+        var ge = 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;
         // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
-                var ye = (0, r.useMemo)((function() {
+                var we = (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);
+            return c && typeof c === "string" ? "".concat(he, "    ").concat(Se) : "";
+        }), [ Se, c, he ]);
+        var Oe = (0, r.useCallback)((function() {
+            $ === null || $ === void 0 ? void 0 : $.focus();
+        }), [ $ ]);
+        var ke = (0, r.useCallback)((function(e) {
+            E(e);
+            B(l, e);
+            // Register with index, assert index is defined as it's injected by TabBar
+                        oe({
+                tabId: ye,
+                element: e,
+                index: y
+            });
+        }), [ l, oe, ye, y ]);
+        var xe = (0, r.useCallback)((function() {
+            j(true);
         }), []);
-        var Ce = (0, r.useCallback)((function() {
-            R(false);
+        var Ie = (0, r.useCallback)((function() {
+            j(false);
         }), []);
-        var Se = (0, r.useCallback)((function(e) {
+        var je = (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) {
+            if (!Ce) {
                 re === null || re === void 0 ? void 0 : re(e, {
-                    tabId: se
+                    tabId: ye
                 });
             }
-            if (p == null || p != null && a) {
+            if (f == null || f != null && Ce) {
                 e.preventDefault();
             }
-        }), [ a, re, se, p ]);
-        var we = (0, r.useCallback)((function(e) {
-            ge();
+        }), [ Ce, re, ye, f ]);
+        var Pe = (0, r.useCallback)((function(e) {
+            xe();
             ne === null || ne === void 0 ? void 0 : ne(e, {
-                tabId: se
+                tabId: ye
             });
-        }), [ 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) {
+        }), [ xe, ne, ye ]);
+        var Te = (0, r.useCallback)((function() {
+            Oe();
+        }), [ Oe ]);
+        var $e = (0, r.useCallback)((function() {
+            Ie();
+        }), [ Ie ]);
+        var Ee = (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,
+            ae(ye);
+        }), [ ae, ye ]);
+        var Me = U === ye && G && !!p;
+        var Ae =  n().createElement(z, {
+            $active: Ce,
             "data-test": "menu-toggle",
             tabIndex: -1,
-            onFocus: ke
-        },  n().createElement(b(), null));
-        var je = function e(t) {
+            onFocus: Te
+        },  n().createElement(m(), null));
+        var ze = function e(t) {
             
-            return n().createElement(z, null, t,  n().createElement(y(), {
-                toggle: Te,
+            return n().createElement(n().Fragment, null, t,  n().createElement(g(), {
+                toggle: Ae,
                 align: "center",
-                onRequestOpen: Oe,
-                onRequestClose: oe,
-                open: Ie
-            }, g));
+                onRequestOpen: Ee,
+                onRequestClose: ie,
+                open: Me
+            }, p));
         };
-        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(_, {
+        var _e =  n().createElement(D, {
+            "data-test": "label",
+            $iconPosition: Y
+        }, c, !p && (i === 0 || i) &&  n().createElement(n().Fragment, null,  n().createElement(w(), null, " "),  n().createElement(R, {
             "data-test": "count",
-            disabled: !!fe
-        }, d ? $(i, d) : i)), !!g &&  n().createElement(C(), {
+            disabled: !!ge
+        }, s ? X(i, s) : i)), !!p &&  n().createElement(w(), {
             "aria-hidden": true,
-            id: ce
-        }, (0, S._)("Press Shift + F10 to open the tab’s menu")));
+            id: ve
+        }, (0, O._)("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,
+        return n().createElement(M, F({
+            $hasIcon: !!u,
+            $hasMenu: !!p,
+            $iconPosition: Y,
+            $layout: Z,
+            $tabWidth: le,
+            "aria-controls": a,
+            "aria-selected": Ce,
+            "aria-labelledby": se,
+            "aria-describedby": p ? ve : undefined,
+            "aria-haspopup": Me,
             "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,
+            "data-test-tab-id": ye,
+            "data-test-popover-id": v ? me : undefined,
+            "data-title": we,
+            disabled: ge,
+            elementRef: ke,
+            onClick: je,
+            onFocus: Pe,
+            onMouseEnter: xe,
+            onBlur: $e,
+            onMouseLeave: Ie,
             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(), {
+            tabIndex: Ce ? undefined : -1,
+            to: f,
+            id: ye
+        }, b()(h, "elementRef")), u &&  n().createElement(_, {
+            $iconPosition: Y
+        }, u), p && Z === "horizontal" ? ze(_e) : _e,  n().createElement(A, {
+            $layout: Z
+        }), !o && v &&  n().createElement(S(), {
             role: "tooltip",
-            anchor: W,
-            animationConfig: G,
+            anchor: $,
+            animationConfig: ee,
             appearance: "inverted",
-            closeReasons: J,
-            defaultPlacement: ee === "vertical" ? "right" : "above",
-            id: ue,
-            open: !!W && I,
+            closeReasons: te,
+            defaultPlacement: Z === "vertical" ? "right" : "above",
+            id: me,
+            open: !!$ && I,
             align: "center"
-        },  n().createElement(A, null, m)), m &&  n().createElement(C(), {
+        },  n().createElement(q, null, v)), v &&  n().createElement(w(), {
             "aria-hidden": "true",
-            id: le
-        }, m));
+            id: se
+        }, v));
     };
-    Q.propTypes = Y;
-    /* harmony default export */    const Z = Q;
+    re.propTypes = Z;
+    re.as = "Tab";
+    /* harmony default export */    const ne = re;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function ee(e, t) {
+    function ae(e, t) {
         return e.find((function(e) {
             return e && e.id === t;
         }));
     }
-    function te(e, t, r) {
+    function ie(e, t, r) {
         for (var n = 0; n < e.length; n += 1) {
             var a = (n + r) % e.length;
             if (e[a].disabled !== true) {
@@ -468,7 +522,7 @@
         }
         return e[t];
     }
-    function re(e, t, r) {
+    function oe(e, t, r) {
         for (var n = e.length; n > 0; n -= 1) {
             var a = (n + r) % e.length;
             if (e[a].disabled !== true) {
@@ -478,8 +532,16 @@
         return e[t];
     }
     // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-    function ne() {
-        return ne = Object.assign ? Object.assign.bind() : function(e) {
+    function le(e) {
+        "@babel/helpers - typeof";
+        return le = "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;
+        }, le(e);
+    }
+    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) {
@@ -487,273 +549,338 @@
                 }
             }
             return e;
-        }, ne.apply(null, arguments);
+        }, ue.apply(null, arguments);
     }
-    function ae(e, t) {
-        return ue(e) || ce(e, t) || ie(e, t) || oe();
+    function ce(e, t) {
+        if (null == e) return {};
+        var r, n, 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]);
+            }
+        }
+        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];
+            }
+        }
+        return r;
+    }
+    function de(e, t) {
+        var r = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            t && (n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            }))), r.push.apply(r, n);
+        }
+        return r;
+    }
+    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));
+            }));
+        }
+        return e;
+    }
+    function ve(e, t, r) {
+        return (t = be(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[t] = r, e;
+    }
+    function be(e) {
+        var t = pe(e, "string");
+        return "symbol" == le(t) ? t : t + "";
+    }
+    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;
+            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();
     }
-    function oe() {
+    function ye() {
         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 ie(e, t) {
+    function ge(e, t) {
         if (e) {
-            if ("string" == typeof e) return le(e, t);
+            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) ? le(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) ? he(e, t) : void 0;
         }
     }
-    function le(e, t) {
+    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];
         }
         return n;
     }
-    function ce(e, t) {
+    function Se(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;
+            var n, a, i, o, l = [], u = !0, c = !1;
             try {
-                if (o = (r = r.call(e)).next, 0 === t) {
+                if (i = (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) {
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
-                u = !0, a = e;
+                c = !0, a = e;
             } finally {
                 try {
-                    if (!c && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
+                    if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
                 } finally {
-                    if (u) throw a;
+                    if (c) throw a;
                 }
             }
             return l;
         }
     }
-    function ue(e) {
+    function Ce(e) {
         if (Array.isArray(e)) return e;
     }
-    function se(e, t) {
-        if (null == e) return {};
-        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) && (a[r] = e[r]);
-            }
-        }
-        return a;
-    }
-    function de(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];
-            }
-        }
-        return r;
-    }
-    var fe = 50;
+    var we = 50;
     /** @public */
-    /** @public */    var ve = {
-        autoActivate: o().bool,
-        activeTabId: o().string,
-        children: o().node,
+    /** @public */    var Oe = {
+        autoActivate: i().bool,
+        activeTabId: i().string,
+        children: i().node,
         /** @private */
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        iconPosition: o().oneOf([ "above", "left" ]),
-        layout: o().oneOf([ "horizontal", "vertical" ]),
-        onChange: o().func,
-        tabWidth: o().number
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        iconPosition: i().oneOf([ "above", "left" ]),
+        layout: i().oneOf([ "horizontal", "vertical" ]),
+        onChange: i().func,
+        tabWidth: i().number
     };
-    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" ]);
+    var ke = function e(t) {
+        return Array.from(t.entries()).sort((function(e, t) {
+            var r = me(e, 2), n = r[1].index;
+            var a = me(t, 2), i = a[1].index;
+            return n - i;
+        })).map((function(e) {
+            var t = me(e, 2), r = t[0], n = t[1];
+            return fe({
+                id: r
+            }, n);
+        }));
+    };
+    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" ]);
         // @docs-props-type TabBarPropsBase
-                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
+                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];
+ // 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;
+        // 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);
+        // map of tabId to tab element and index
+                var $ = (0, r.useRef)();
+        if (!$.current) {
+            $.current = new Map;
+        }
+        var E = p === "vertical" ? "down" : "right";
+        var M = p === "vertical" ? "up" : "left";
+        var A = y && y > we ? y : null;
+        // focus the tab belonging to the given tabId
+                var z = (0, r.useCallback)((function(e) {
+            var t;
+            if (!e) {
                 return;
             }
-            _(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
+            var r = (t = $.current) === null || t === void 0 ? void 0 : t.get(e);
+            if (!r) {
+                var n = ke($.current);
+                var a = n[0];
+                if (a) {
+                    var i;
+                    I(a.id);
+                    (i = a.element) === null || i === void 0 ? void 0 : i.focus();
+                }
                 return;
             }
+            I(e);
+            r.element.focus();
+        }), []);
+        var _ = (0, r.useCallback)((function(e) {
+            var t = e.tabId, r = e.element, n = e.index;
+            if (r) {
+                var a;
+                (a = $.current) === null || a === void 0 ? void 0 : a.set(t, {
+                    element: r,
+                    index: n
+                });
+            } else {
+                var i;
+                (i = $.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;
+                }
+            }
+        }), []);
+        var D = (0, r.useCallback)((function(e) {
+            T.current = e;
+            B(s, e);
+        }), [ s, T ]);
+        // callback to handle focus event sent from a Tab
+                var R = (0, r.useCallback)((function(e, r) {
             var n = r.tabId;
-            if (n != null) {
-                E(n);
+            if (document.activeElement === e.target && x === n) {
+                // tab already focused, no need to continue
+                return;
             }
+            z(n);
             if (a && t !== n) {
-                p === null || p === void 0 ? void 0 : p(e, {
+                m === null || m === void 0 ? void 0 : m(e, {
                     selectedTabId: n
                 });
             }
-        }), [ t, a, p ]);
-        var L = (0, r.useCallback)((function(e, t) {
+        }), [ t, a, x, z, m ]);
+        var q = (0, r.useCallback)((function(e, t) {
             var r = t.tabId;
-            E(r);
-            p === null || p === void 0 ? void 0 : p(e, {
+            z(r);
+            m === null || m === void 0 ? void 0 : m(e, {
                 selectedTabId: r
             });
-        }), [ 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 e.type === "string" || e.type.name !== Z.name) {
-                    return e;
-                }
-                var a = {
-                    active: t === e.props.tabId,
-                    elementRef: function e(t) {
-                        R.current[n] = t;
-                    },
-                    id: e.props.tabId
-                };
-                
-                return (0, r.cloneElement)(e, a);
-            }));
-        }), [ t, o ]);
-        var U = (0, r.useCallback)((function(e) {
+        }), [ z, m ]);
+        var N = (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 === q) {
-                r = te(R.current, x, x + 1);
-            } else if (t === $) {
-                r = re(R.current, x, x - 1);
-            } else if (t === "home") {
-                r = te(R.current, x, 0);
-            } else if (t === "end") {
-                r = re(R.current, x, R.current.length - 1);
-            } else if (b === "horizontal" && e.shiftKey && t === "f10") {
-                S((function(e) {
+            var t = ke($.current);
+            var r = x ? t.findIndex((function(e) {
+                return e.id === x;
+            })) : -1;
+            var n = t.map((function(e) {
+                return e.element;
+            }));
+            var a = r === -1 ? 0 : r;
+            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);
+            } else if (i === "home") {
+                l = ie(n, a, 0);
+            } else if (i === "end") {
+                l = oe(n, a, n.length - 1);
+            } else if (p === "horizontal" && e.shiftKey && i === "f10") {
+                w((function(e) {
                     if (e) {
-                        // if we're closing, we want to shift focus to the tab
-                        var t = R.current[x];
+                        var t = n[a];
                         t === null || t === void 0 ? void 0 : t.focus();
                     }
                     return !e;
                 }));
-            } else if (b === "horizontal" && t === "down") {
-                S(true);
+            } else if (p === "horizontal" && i === "down") {
+                w(true);
             }
-            if (r) {
-                E(r.id);
+            if (l) {
+                z(l.id);
                 e.preventDefault();
             }
-        }), [ x, b, q, $ ]);
-        var X = (0, r.useCallback)((function(e) {
-            E(e);
+        }), [ x, z, p, E, M ]);
+        var W = (0, r.useCallback)((function(e) {
+            z(e);
  // in case they clicked on a menu of tab they were not even focused on yet
-                        S(true);
-        }), []);
-        var Y = (0, r.useCallback)((function(e) {
+                        w(true);
+        }), [ z ]);
+        var X = (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);
+            w(false);
         }), []);
-        var G = (0, r.useMemo)((function() {
+        var F = (0, r.useMemo)((function() {
             return {
                 disabled: c,
-                focusedTabId: j,
-                iconPosition: f,
-                layout: b,
-                onClick: L,
-                onFocus: H,
-                width: N,
-                onMenuOpen: X,
-                onMenuClose: Y,
-                isMenuOpen: C
+                focusedTabId: x,
+                iconPosition: v,
+                layout: p,
+                onClick: q,
+                onFocus: R,
+                width: A,
+                onMenuOpen: W,
+                onMenuClose: X,
+                isMenuOpen: C,
+                registerTab: _,
+                activeTabId: t
             };
-        }), [ 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;
+        }), [ 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) {
+                if (e.type.as === "Tab") {
+                    
+                    return (0, r.cloneElement)(e, {
+                        index: t
+                    });
                 }
-                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 e;
+            }));
+        }), [ i ]);
+        var L = u()(K);
+        (0, r.useEffect)((function() {
+            // if the focused tab is removed, focus the next tab
+            if (L !== K) {
+                var e;
+                var t = ke($.current);
+                if (t.find((function(e) {
+                    return e.id === j.current;
+                }))) {
+                    // focused tab is still present
                     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);
+                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);
                 }
             }
-        }));
+        }), [ K, z, L ]);
         
-        return n().createElement(s, ne({
-            "data-tab-layout": b,
+        return n().createElement(f, ue({
+            "data-tab-layout": p,
             "data-test-active-tab-id": t,
             "data-test": "tab-bar",
             role: "tablist",
-            ref: W,
-            $layout: b,
-            onBlur: V,
-            onFocus: F,
-            onKeyDown: U
-        }, m),  n().createElement(D.Provider, {
-            value: G
+            ref: D,
+            $layout: p,
+            onKeyDown: N
+        }, g),  n().createElement(V.Provider, {
+            value: F
         }, K));
     }
-    be.propTypes = ve;
-    be.Tab = Z;
-    /* harmony default export */    const pe = be;
+    xe.propTypes = Oe;
+    xe.Tab = ne;
+    /* harmony default export */    const Ie = xe;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();