@splunk/react-ui 4.27.0 → 4.28.1

package/TabBar.js

@@ -61,33 +61,33 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ Y,
-        default: () => /* reexport */ re
+        Tab: () => /* reexport */ le,
+        default: () => /* reexport */ we
     });
     // 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);
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const a = require("@splunk/ui-utils/keyboard");
+    const o = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var c =  e.n(l);
+    var s =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var p = c().div.withConfig({
+    var u = 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 ", ";}", ";" ], s.mixins.reset("flex"), (0, 
-    s.pick)({
-        enterprise: s.variables.borderLightColor,
-        prisma: s.variables.neutral200
-    }), (0, s.pickVariant)("$layout", {
+    })([ "", " 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, s.pickVariant)("$withUnderline", {
+            prisma: (0, c.pickVariant)("$withUnderline", {
                 /* context appearance is only supported for Prisma */
                 true: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
             }),
@@ -95,31 +95,65 @@
         },
         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");
+    // 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);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const u = require("@splunk/react-ui/Popover");
-    var d =  e.n(u);
+    const x = require("@splunk/react-ui/Popover");
+    var k =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const f = require("@splunk/react-ui/ScreenReaderContent");
-    var v =  e.n(f);
+    const w = require("@splunk/react-ui/ScreenReaderContent");
+    var C =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const b = require("@splunk/ui-utils/id");
+    const S = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const h = require("@splunk/react-ui/Clickable");
-    var y =  e.n(h);
+    const O = require("@splunk/react-ui/Clickable");
+    var T =  e.n(O);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var m = c()(y()).withConfig({
+    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 z = s()(T()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
-    })([ "flex:0 1 auto;display:block;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]){", "}}&:focus{box-shadow:", ";", "}" ], (0, 
-    s.pick)({
+    })([ "flex:0 1 auto;display:block;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"
-    }), s.variables.contentColorDefault, s.variables.fontWeightBold, (0, s.pickVariant)("$layout", {
-        horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, s.pick)({
-            enterprise: "3px 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 20px",
-                compact: "0 16px"
+                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: {
@@ -127,50 +161,48 @@
                 var t = e.$icon;
                 return t && (0, l.css)([ "text-align:center;" ]);
             })),
-            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, s.pick)({
+            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, c.pick)({
                 comfortable: "0 20px",
                 compact: "0 16px"
             }))
         }
-    }), (0, s.pick)({
-        enterprise: (0, l.css)([ "font-weight:", ";" ], s.variables.fontWeightBold),
-        prisma: (0, l.css)([ "color:", ";font-weight:", ";" ], s.variables.contentColorActive, s.variables.fontWeightBold)
-    }), (0, s.pick)({
+    }), (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: s.variables.fontWeightSemiBold
-    }), (0, s.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
-    }), s.variables.focusShadowInset, (0, s.pick)({
-        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
+        prisma: c.variables.fontWeightSemiBold
+    }), I, I, c.variables.focusShadowInset, (0, c.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], c.variables.contentColorActive)
     }));
-    var g = c().div.withConfig({
+    var M = s().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
-    })([ "position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}" ], (0, 
-    s.pick)({
-        enterprise: (0, l.css)([ "background:", ";" ], s.variables.borderLightColor)
-    }), (0, s.pickVariant)("$layout", {
+    })([ "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, 
-        s.pick)({
+        c.pick)({
             enterprise: (0, l.css)([ "calc(100% - 20px * 2)" ]),
             prisma: {
                 comfortable: (0, l.css)([ "calc(100% - 20px * 2)" ]),
                 compact: (0, l.css)([ "calc(100% - 16px * 2)" ])
             }
-        }), (0, s.pick)({
+        }), (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, s.pick)({
-        enterprise: s.variables.accentColor,
-        prisma: s.variables.contentColorActive
-    }), (0, s.pickVariant)("$layout", {
+    }), (0, c.pick)({
+        enterprise: c.variables.accentColor,
+        prisma: c.variables.contentColorActive
+    }), (0, c.pickVariant)("$layout", {
         horizontal: {
             enterprise: (0, l.css)([ "height:3px;" ]),
-            prisma: (0, s.pickVariant)("$withUnderline", {
+            prisma: (0, c.pickVariant)("$withUnderline", {
                 // context appearance is only supported for Prisma
                 true: (0, l.css)([ "height:1px;" ])
             })
@@ -179,67 +211,88 @@
             enterprise: (0, l.css)([ "width:3px;" ]),
             prisma: (0, l.css)([ "width:1px;" ])
         }
-    }), m, (0, s.pickVariant)("$layout", {
-        horizontal: {
-            enterprise: (0, l.css)([ "height:3px;" ])
-        },
-        vertical: {
-            enterprise: (0, l.css)([ "width:3px;" ])
-        }
-    }));
-    var x = c().span.withConfig({
-        displayName: "TabStyles__StyledIcon",
+    }), z, j, j);
+    var _ = s().span.withConfig({
+        displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
-    })([ "", ";" ], (0, s.pickVariant)("$iconSize", {
+    })([ "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", {
+        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)
+    }), z, z, z);
+    var E = s().span.withConfig({
+        displayName: "TabStyles__StyledIcon",
+        componentId: "sc-1ry8mzj-3"
+    })([ "", ";" ], (0, c.pickVariant)("$iconSize", {
         inline: (0, l.css)([ "", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
-        s.pick)({
+        c.pick)({
             prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
-        }), (0, s.pick)({
+        }), (0, c.pick)({
             enterprise: "0.4em",
             prisma: "8px"
         })),
         small: (0, l.css)([ "font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;" ]),
         large: (0, l.css)([ "font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;" ])
     }));
-    var k = c().div.withConfig({
+    var P = s().div.withConfig({
+        displayName: "TabStyles__StyledLabelAndMenuContainer",
+        componentId: "sc-1ry8mzj-4"
+    })([ "display:flex;align-items:center;justify-content:center;gap:8px;" ]);
+    var $ = s().div.withConfig({
         displayName: "TabStyles__StyledLabel",
-        componentId: "sc-1ry8mzj-3"
+        componentId: "sc-1ry8mzj-5"
     })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
-    s.pick)({
+    c.pick)({
         enterprise: "0",
         prisma: {
             comfortable: "16px 0",
             compact: "10px 0"
         }
     }));
-    var w = c().span.withConfig({
+    var D = s().span.withConfig({
         displayName: "TabStyles__StyledCount",
-        componentId: "sc-1ry8mzj-4"
-    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{background:", ";color:", ";}" ], s.variables.contentColorDefault, (0, 
-    s.pick)({
+        componentId: "sc-1ry8mzj-6"
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{background:", ";color:", ";}" ], c.variables.contentColorDefault, (0, 
+    c.pick)({
         enterprise: "inherit",
         prisma: "10px"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: "0.4em 0.3em",
         prisma: "0.4em 0.6em"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: "0",
         prisma: "0.3em"
-    }), (0, s.pick)({
+    }), (0, c.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
-        prisma: (0, l.css)([ "background:", ";" ], s.variables.neutral100)
-    }), s.variables.interactiveColorBackgroundDisabled, s.variables.contentColorDisabled);
-    var O = c().div.withConfig({
+        prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
+    }), c.variables.interactiveColorBackgroundDisabled, c.variables.contentColorDisabled);
+    var R = s().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
-        componentId: "sc-1ry8mzj-5"
-    })([ "padding:8px;font-size:", ";" ], s.variables.fontSizeSmall);
+        componentId: "sc-1ry8mzj-7"
+    })([ "padding:8px;font-size:", ";" ], c.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var S =  (0, r.createContext)({});
-    S.displayName = "TabBar";
-    /* harmony default export */    const C = S;
+    var q = function e() {
+        return undefined;
+    };
+    var A =  (0, r.createContext)({
+        onMenuOpen: q,
+        onMenuClose: q,
+        isMenuOpen: false
+    });
+    A.displayName = "TabBar";
+    /* harmony default export */    const V = A;
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var T = function e(t, r) {
+    var K = function e(t, r) {
         if (t > r) {
             return "".concat(r, "+");
         }
@@ -252,7 +305,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function I(e, t) {
+    function B(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -265,21 +318,21 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function j(e) {
+    function F(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            j = function e(t) {
+            F = function e(t) {
                 return typeof t;
             };
         } else {
-            j = function e(t) {
+            F = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return j(e);
+        return F(e);
     }
-    function z() {
-        z = Object.assign || function(e) {
+    function N() {
+        N = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -290,16 +343,16 @@
             }
             return e;
         };
-        return z.apply(this, arguments);
+        return N.apply(this, arguments);
     }
-    function _(e, t) {
+    function U(e, t) {
         if (e == null) return {};
-        var r = E(e, t);
+        var r = W(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
+            var a = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < a.length; i++) {
+                n = a[i];
                 if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 r[n] = e[n];
@@ -307,24 +360,24 @@
         }
         return r;
     }
-    function E(e, t) {
+    function W(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
+        var i, a;
+        for (a = 0; a < n.length; a++) {
+            i = n[a];
             if (t.indexOf(i) >= 0) continue;
             r[i] = e[i];
         }
         return r;
     }
-    function P(e, t) {
+    function L(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function $(e, t) {
+    function H(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -333,12 +386,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function R(e, t, r) {
-        if (t) $(e.prototype, t);
-        if (r) $(e, r);
+    function Y(e, t, r) {
+        if (t) H(e.prototype, t);
+        if (r) H(e, r);
         return e;
     }
-    function D(e, t) {
+    function G(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -349,41 +402,41 @@
                 configurable: true
             }
         });
-        if (t) M(e, t);
+        if (t) J(e, t);
     }
-    function M(e, t) {
-        M = Object.setPrototypeOf || function e(t, r) {
+    function J(e, t) {
+        J = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return M(e, t);
+        return J(e, t);
     }
-    function q(e) {
-        var t = A();
+    function Q(e) {
+        var t = ee();
         return function r() {
-            var n = B(e), i;
+            var n = te(e), i;
             if (t) {
-                var o = B(this).constructor;
-                i = Reflect.construct(n, arguments, o);
+                var a = te(this).constructor;
+                i = Reflect.construct(n, arguments, a);
             } else {
                 i = n.apply(this, arguments);
             }
-            return K(this, i);
+            return X(this, i);
         };
     }
-    function K(e, t) {
-        if (t && (j(t) === "object" || typeof t === "function")) {
+    function X(e, t) {
+        if (t && (F(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return V(e);
+        return Z(e);
     }
-    function V(e) {
+    function Z(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function A() {
+    function ee() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -394,13 +447,13 @@
             return false;
         }
     }
-    function B(e) {
-        B = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function te(e) {
+        te = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return B(e);
+        return te(e);
     }
-    function N(e, t, r) {
+    function re(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -413,88 +466,103 @@
         }
         return e;
     }
-    var W = {
+    var ne = {
         /** @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 ]),
+        active: a().bool,
+        ariaControls: a().string,
+        count: a().number,
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        icon: a().node,
+        id: a().string,
+        label: a().oneOfType([ a().string, a().element ]),
         /** @private Maximum count number in tab label */
-        maxCount: o().number,
+        maxCount: a().number,
         /** @private */
-        splunkTheme: o().object,
-        tabId: o().string,
+        splunkTheme: a().object,
+        tabId: a().string,
         /** @private. The internal key of the tab */
-        tabKey: o().number,
-        to: o().string,
-        tooltip: o().node
+        tabKey: a().number,
+        to: a().string,
+        tooltip: a().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: a().node
     };
-    var F = {
+    var ie = {
         active: false
     };
-    var U =  function(e) {
-        D(r, e);
-        var t = q(r);
+    var ae =  function(e) {
+        G(r, e);
+        var t = Q(r);
         // @docs-props-type TabPropsBase
                 function r(e) {
             var n;
-            P(this, r);
+            L(this, r);
             n = t.call(this, e);
-            N(V(n), "popoverId", void 0);
-            N(V(n), "ariaId", void 0);
-            N(V(n), "handleMount", (function(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
                 });
-                I(n.props.elementRef, e);
+                B(n.props.elementRef, e);
             }));
-            N(V(n), "handleTooltipOpen", (function() {
+            re(Z(n), "handleTooltipOpen", (function() {
                 n.setState({
                     open: true
                 });
             }));
-            N(V(n), "handleTooltipClose", (function() {
+            re(Z(n), "handleTooltipClose", (function() {
                 n.setState({
                     open: false
                 });
             }));
-            N(V(n), "handleClick", (function(e) {
-                var t = n.props, r = t.active, i = t.tabId, o = t.tabKey, a = t.to;
+            re(Z(n), "handleClick", (function(e) {
+                var t = n.props, r = t.active, i = t.tabId, a = t.tabKey, o = 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
+                        tabKey: a
                     });
                 }
-                if (a == null || a != null && r) {
+                if (o == null || o != null && r) {
                     e.preventDefault();
                 }
             }));
-            N(V(n), "handleFocus", (function(e) {
+            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, {
+                var a = n.context.onFocus;
+                a === null || a === void 0 ? void 0 : a(e, {
                     tabId: r,
                     tabKey: i
                 });
             }));
-            n.popoverId = (0, b.createDOMID)("popover");
-            n.ariaId = (0, b.createDOMID)("aria-id");
+            re(Z(n), "handleFocusMenuToggle", (function() {
+                n.focus();
+            }));
+            re(Z(n), "handleBlur", (function() {
+                n.handleTooltipClose();
+            }));
+            n.popoverId = (0, S.createDOMID)("popover");
+            n.ariaId = (0, S.createDOMID)("aria-id");
+            n.menuDescription = (0, S.createDOMID)("menu-description");
             n.state = {
                 open: false,
                 anchor: null
             };
             return n;
         }
-        R(r, [ {
+        Y(r, [ {
             key: "focus",
             value: function e() {
                 var t;
@@ -503,116 +571,145 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.active, i = t.ariaControls, o = t.count, a = t.disabled, l = t.icon, c = t.label, s = t.tabId, p = t.maxCount, u = t.splunkTheme, f = t.to, b = t.tooltip, h = _(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip" ]);
-                var y = this.state, S = y.anchor, C = y.open;
-                var I = this.context, j = I.appearance, E = I.disabled, P = I.iconSize, $ = I.layout, R = I.width;
-                var D = h.style;
-                var M = E || a || false;
-                var q = P || "inline";
-                var K = $ || "horizontal";
-                var V = R ? {
-                    width: R
-                } : D;
-                var A = u.isEnterprise;
-                var B = c ? c.toString() : "";
-                var N = o === 0 || o ? "".concat(o === null || o === void 0 ? void 0 : o.toString()) : "";
+                var t = this.props, r = t.active, i = t.ariaControls, a = t.count, o = 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 S = this.state, O = S.anchor, T = S.open;
+                var I = this.context, j = I.appearance, q = I.disabled, A = I.iconSize, V = I.layout, B = I.width, F = I.onMenuOpen, W = I.onMenuClose, L = I.isMenuOpen, H = I.focusedTabKey;
+                var Y = w.style;
+                var G = q || o || false;
+                var J = A || "inline";
+                var Q = V || "horizontal";
+                var X = B ? {
+                    width: B
+                } : Y;
+                var Z = p.isEnterprise;
+                var ee = s ? s.toString() : "";
+                var te = a === 0 || a ? "".concat(a === null || a === void 0 ? void 0 : a.toString()) : "";
  // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
-                                var W;
-                if (A) {
+                                var re;
+                if (Z) {
                     // countValue needs unicode space for width to not change after it's clicked.
-                    var F = N ? "(".concat(N, ")  ") : "";
-                    W = "".concat(B, " ").concat(F);
+                    var ne = te ? "(".concat(te, ")  ") : "";
+                    re = "".concat(ee, " ").concat(ne);
                 } else {
-                    W = "".concat(B, "    ").concat(N);
+                    re = "".concat(ee, "    ").concat(te);
                 }
+                var ie = H === x && L && !!m;
+                var ae =  n().createElement(_, {
+                    $active: r,
+                    "data-test": "menu-toggle",
+                    tabIndex: -1,
+                    onFocus: this.handleFocusMenuToggle
+                }, Z ?  n().createElement(g(), {
+                    size: 1.1
+                }) :  n().createElement(b(), null));
+                var oe = function e(t) {
+                    // if there is no menu, or if we are not in horizontal, do not render menu container
+                    if (!m || Q !== "horizontal") {
+                        return t;
+                    }
+                    
+                    return n().createElement(P, null, t,  n().createElement(y(), {
+                        toggle: ae,
+                        align: "center",
+                        onRequestOpen: F,
+                        onRequestClose: W,
+                        open: ie
+                    }, m));
+                };
                 
                 // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
                 // eslint-disable-next-line
                 // @ts-ignore-next-line
-                return n().createElement(m, z({
+                return n().createElement(z, N({
                     "aria-controls": i,
                     "aria-selected": r,
                     "aria-labelledby": this.ariaId,
+                    "aria-describedby": m ? this.menuDescription : undefined,
+                    "aria-haspopup": ie,
                     "data-test": "tab",
-                    "data-test-tab-id": s,
-                    "data-test-popover-id": b ? this.popoverId : undefined,
-                    $layout: K,
-                    $icon: l && q !== "inline" ? true : undefined,
-                    disabled: M,
-                    elementRef: this.handleMount,
-                    style: V
-                }, h, {
+                    "data-test-tab-id": c,
+                    "data-test-popover-id": h ? this.popoverId : undefined,
+                    $layout: Q,
+                    $icon: l && J !== "inline" ? true : undefined,
+                    disabled: G,
+                    style: X,
+                    elementRef: this.handleMount
+                }, d()(w, "elementRef"), {
                     onClick: this.handleClick,
                     onFocus: this.handleFocus,
                     onMouseEnter: this.handleTooltipOpen,
-                    onBlur: this.handleTooltipClose,
+                    onBlur: this.handleBlur,
                     onMouseLeave: this.handleTooltipClose,
                     role: "tab",
                     tabIndex: r ? undefined : -1,
-                    "data-title": W,
-                    to: f
-                }),  n().createElement(k, {
+                    "data-title": re,
+                    to: v,
+                    $hasMenu: !!m
+                }), oe( n().createElement($, {
                     "data-test": "label",
                     $withUnderline: j === "navigation"
-                }, l &&  n().createElement(x, {
-                    $iconSize: q
-                }, l), c, (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(v(), null, " "),  n().createElement(w, {
+                }, l &&  n().createElement(E, {
+                    $iconSize: J
+                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(C(), null, " "),  n().createElement(D, {
                     "data-test": "count",
-                    disabled: M
-                }, p ? T(o, p) : o))),  n().createElement(g, {
-                    $layout: K,
+                    disabled: G
+                }, u ? K(a, u) : a)), !!m &&  n().createElement(C(), {
+                    "aria-hidden": true,
+                    id: this.menuDescription
+                }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(M, {
+                    $layout: Q,
                     $withUnderline: j === "navigation"
-                }), !a && b &&  n().createElement(d(), {
+                }), !o && h &&  n().createElement(k(), {
                     role: "tooltip",
-                    anchor: S,
+                    anchor: O,
                     animationConfig: {
                         tension: 400
                     },
                     appearance: "inverted",
                     closeReasons: [ "offScreen", "escapeKey" ],
-                    defaultPlacement: K === "vertical" ? "right" : "above",
+                    defaultPlacement: Q === "vertical" ? "right" : "above",
                     id: this.popoverId,
-                    open: !!S && C,
+                    open: !!O && T,
                     align: "center"
-                },  n().createElement(O, null, b)), b &&  n().createElement(v(), {
+                },  n().createElement(R, null, h)), h &&  n().createElement(C(), {
                     "aria-hidden": "true",
                     id: this.ariaId
-                }, b));
+                }, h));
             }
         } ]);
         return r;
     }(r.Component);
-    N(U, "propTypes", W);
-    N(U, "defaultProps", F);
-    N(U, "contextType", C);
-    var L = (0, s.withSplunkTheme)(U);
-    L.propTypes = U.propTypes;
-    /* harmony default export */    const Y = L;
+    re(ae, "propTypes", ne);
+    re(ae, "defaultProps", ie);
+    re(ae, "contextType", V);
+    var oe = (0, c.withSplunkTheme)(ae);
+    oe.propTypes = ae.propTypes;
+    /* harmony default export */    const le = oe;
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function G(e, t, r) {
+    function se(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 (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[a];
             }
         }
         return e[t];
     }
-    function H(e, t, r) {
+    function ce(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 (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[a];
             }
         }
         return e[t];
     }
     // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-    function J() {
-        J = Object.assign || function(e) {
+    function ue() {
+        ue = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -623,16 +720,63 @@
             }
             return e;
         };
-        return J.apply(this, arguments);
+        return ue.apply(this, arguments);
+    }
+    function pe(e, t) {
+        return he(e) || be(e, t) || fe(e, t) || de();
+    }
+    function de() {
+        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 Q(e, t) {
+    function fe(e, t) {
+        if (!e) return;
+        if (typeof e === "string") return ve(e, t);
+        var r = Object.prototype.toString.call(e).slice(8, -1);
+        if (r === "Object" && e.constructor) r = e.constructor.name;
+        if (r === "Map" || r === "Set") return Array.from(e);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return ve(e, t);
+    }
+    function ve(e, t) {
+        if (t == null || t > e.length) t = e.length;
+        for (var r = 0, n = new Array(t); r < t; r++) {
+            n[r] = e[r];
+        }
+        return n;
+    }
+    function be(e, t) {
+        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
+        var r = [];
+        var n = true;
+        var i = false;
+        var a = undefined;
+        try {
+            for (var o = e[Symbol.iterator](), l; !(n = (l = o.next()).done); n = true) {
+                r.push(l.value);
+                if (t && r.length === t) break;
+            }
+        } catch (e) {
+            i = true;
+            a = e;
+        } finally {
+            try {
+                if (!n && o["return"] != null) o["return"]();
+            } finally {
+                if (i) throw a;
+            }
+        }
+        return r;
+    }
+    function he(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function ye(e, t) {
         if (e == null) return {};
-        var r = X(e, t);
+        var r = me(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
+            var a = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < a.length; i++) {
+                n = a[i];
                 if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 r[n] = e[n];
@@ -640,97 +784,136 @@
         }
         return r;
     }
-    function X(e, t) {
+    function me(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
+        var i, a;
+        for (a = 0; a < n.length; a++) {
+            i = n[a];
             if (t.indexOf(i) >= 0) continue;
             r[i] = e[i];
         }
         return r;
     }
-    var Z = 50;
-    /** @public */    var ee = {
-        autoActivate: o().bool,
-        activeTabId: o().string,
-        appearance: o().oneOf([ "navigation", "context" ]),
-        children: o().node,
+    var ge = 50;
+    /** @public */    var xe = {
+        autoActivate: a().bool,
+        activeTabId: a().string,
+        appearance: a().oneOf([ "navigation", "context" ]),
+        children: a().node,
         /** @private */
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        iconSize: o().oneOf([ "inline", "small", "large" ]),
-        layout: o().oneOf([ "horizontal", "vertical" ]),
-        onChange: o().func,
-        tabWidth: o().number
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        iconSize: a().oneOf([ "inline", "small", "large" ]),
+        layout: a().oneOf([ "horizontal", "vertical" ]),
+        onChange: a().func,
+        tabWidth: a().number
     };
-    function te(e) {
-        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, c = e.children, s = e.disabled, u = s === void 0 ? false : s, d = e.elementRef, f = e.iconSize, v = f === void 0 ? "inline" : f, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = Q(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
+    function ke(e) {
+        var t = e.activeTabId, i = e.autoActivate, a = e.appearance, l = a === void 0 ? "navigation" : a, s = e.children, c = e.disabled, p = c === void 0 ? false : c, d = e.elementRef, f = e.iconSize, v = f === void 0 ? "inline" : f, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = ye(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
-                var x = (0, r.useRef)(0);
-        var k = [];
-        var w = (0, r.useMemo)((function() {
-            return h === "vertical" ? "down" : "right";
-        }), [ h ]);
-        var O = (0, r.useMemo)((function() {
-            return h === "vertical" ? "up" : "left";
-        }), [ h ]);
-        var S = function e(t, r) {
-            var n = r.tabKey;
-            if (n != null) {
-                x.current = n;
+                var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], C = k[1];
+        var S = (0, r.useState)(0), O = pe(S, 2), T = O[0], I = O[1];
+        var j = (0, r.useRef)([]);
+        var z = h === "vertical" ? "down" : "right";
+        var M = h === "vertical" ? "up" : "left";
+        var _ = (0, r.useCallback)((function(e, t) {
+            var r = t.tabKey, n = t.tabId;
+            if (r != null) {
+                I(r);
             }
             if (i) {
-                y === null || y === void 0 ? void 0 : y(t, {
-                    selectedTabId: r.tabId
+                y === null || y === void 0 ? void 0 : y(e, {
+                    selectedTabId: n
                 });
             }
-        };
-        var T = function e(t, r) {
-            y === null || y === void 0 ? void 0 : y(t, {
-                selectedTabId: r.tabId
+        }), [ i, y ]);
+        var E = (0, r.useCallback)((function(e, t) {
+            y === null || y === void 0 ? void 0 : y(e, {
+                selectedTabId: t.tabId
             });
-        };
-        var I = 0;
-        var j = r.Children.toArray(c).filter(r.isValidElement).map((function(e) {
-            // <TabBar> allows non-<Tab> children, pass them through without any modification
-            if (typeof e.type === "string" || e.type.name !== Y.name) {
-                return e;
-            }
-            var i =  n().createRef();
-            k.push(i);
-            var o = {
-                active: t === e.props.tabId,
-                tabKey: I,
-                ref: i
-            };
-            I += 1;
-            
-            return (0, r.cloneElement)(e, o);
-        }));
-        var z = m && m > Z ? m : null;
-        var _ = function e(t) {
-            var r = (0, a.keycode)(t.nativeEvent);
-            var n;
-            if (r === w) {
-                n = G(k, x.current, x.current + 1);
-            } else if (r === O) {
-                n = H(k, x.current, x.current - 1);
-            } else if (r === "home") {
-                n = G(k, x.current, 0);
-            } else if (r === "end") {
-                n = H(k, x.current, k.length - 1);
+        }), [ y ]);
+        var P = (0, r.useMemo)((function() {
+            var e = 0;
+ // reset tabRefs since children are changed
+                        j.current = [];
+            return r.Children.toArray(s).filter(r.isValidElement).map((function(i) {
+                // <TabBar> allows non-<Tab> children, pass them through without any modification
+                if (typeof i.type === "string" || i.type.name !== le.name) {
+                    return i;
+                }
+                var a =  n().createRef();
+                j.current.push(a);
+                var o = {
+                    active: t === i.props.tabId,
+                    tabKey: e,
+                    ref: a
+                };
+                e += 1;
+                
+                return (0, r.cloneElement)(i, o);
+            }));
+        }), [ t, s ]);
+        var $ = m && m > ge ? m : null;
+        var D = (0, r.useCallback)((function(e) {
+            var t = (0, o.keycode)(e.nativeEvent);
+            var r;
+            if (t === z) {
+                r = se(j.current, T, T + 1);
+            } else if (t === M) {
+                r = ce(j.current, T, T - 1);
+            } else if (t === "home") {
+                r = se(j.current, T, 0);
+            } else if (t === "end") {
+                r = ce(j.current, T, j.current.length - 1);
+            } else if (h === "horizontal" && e.shiftKey && t === "f10") {
+                C((function(e) {
+                    if (e) {
+                        var t;
+                        // if we're closing, we want to shift focus to the tab
+                                                var r = j.current[T];
+                        r === null || r === void 0 ? void 0 : (t = r.current) === null || t === void 0 ? void 0 : t.focus();
+                    }
+                    return !e;
+                }));
+            } else if (h === "horizontal" && t === "down") {
+                C(true);
             }
-            if (n != null) {
-                var i;
-                (i = n.current) === null || i === void 0 ? void 0 : i.focus();
-                t.preventDefault();
+            if (r != null) {
+                var n;
+                (n = r.current) === null || n === void 0 ? void 0 : n.focus();
+                e.preventDefault();
             }
-        };
+        }), [ T, h, z, M ]);
+        var R = (0, r.useCallback)((function(e) {
+            // prevent clicking on the menu icon from changing the active tab
+            e.stopPropagation();
+            C(true);
+        }), []);
+        var q = (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();
+            C(false);
+        }), []);
+        var A = (0, r.useMemo)((function() {
+            return {
+                appearance: l,
+                disabled: p,
+                iconSize: v,
+                layout: h,
+                onClick: E,
+                onFocus: _,
+                width: $,
+                onMenuOpen: R,
+                onMenuClose: q,
+                isMenuOpen: w,
+                focusedTabKey: T
+            };
+        }), [ l, p, T, v, w, h, q, R, E, _, $ ]);
         
-        return n().createElement(p, J({
+        return n().createElement(u, ue({
             "data-tab-layout": h,
             "data-test-active-tab-id": t,
             "data-test": "tab-bar",
@@ -738,22 +921,14 @@
             ref: d,
             $layout: h,
             $withUnderline: l === "navigation",
-            onKeyDown: _
-        }, g),  n().createElement(C.Provider, {
-            value: {
-                appearance: l,
-                disabled: u,
-                iconSize: v,
-                layout: h,
-                onClick: T,
-                onFocus: S,
-                width: z
-            }
-        }, j));
+            onKeyDown: D
+        }, g),  n().createElement(V.Provider, {
+            value: A
+        }, P));
     }
-    te.propTypes = ee;
-    te.Tab = Y;
-    /* harmony default export */    const re = te;
+    ke.propTypes = xe;
+    ke.Tab = le;
+    /* harmony default export */    const we = ke;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();