@splunk/react-ui 4.33.0 → 4.35.0

package/Menu.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,20 +56,20 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
-        Divider: () => /* reexport */ x,
-        Heading: () => /* reexport */ N,
-        Item: () => /* reexport */ ze,
+        e.d(t, {
+        Divider: () => /* reexport */ w,
+        Heading: () => /* reexport */ F,
+        Item: () => /* reexport */ Ke,
         MenuContext: () => /* reexport */ y,
-        default: () => /* reexport */ cr
+        default: () => /* reexport */ nt
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
     var a =  e.n(i);
@@ -78,203 +78,205 @@
     var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
     const s = require("@splunk/react-ui/Popover");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const c = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const u = require("@splunk/ui-utils/keyboard");
-    // CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
-    const p = require("@splunk/react-ui/useForceUpdate");
-    var f =  e.n(p);
+    const c = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
+    const p = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "styled-components"
-    const d = require("styled-components");
+    const u = require("styled-components");
+    var f =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+    const d = require("@splunk/react-ui/Divider");
     var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
-    var m = v().div.withConfig({
+    var m = f()(v()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
-    })([ "border-top:1px solid ", ";", "" ], (0, b.pick)({
-        enterprise: b.variables.borderColor,
-        prisma: b.variables.neutral200
-    }), (0, b.pick)({
+    })([ "", "" ], (0, b.pick)({
         prisma: {
-            comfortable: (0, d.css)([ "margin:8px 0;" ]),
-            compact: (0, d.css)([ "margin:6px 0;" ])
+            comfortable: (0, u.css)([ "margin:8px 0;" ]),
+            compact: (0, u.css)([ "margin:6px 0;" ])
         }
     }));
     // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
-    var y =  (0, t.createContext)({
-        role: "menu"
+    var h =  (0, r.createContext)({
+        role: "menu",
+        preventFocus: false
     });
+    /* harmony default export */    const y = h;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
-    function h() {
-        h = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, n)) {
-                        e[n] = t[n];
+    function g() {
+        g = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
                     }
                 }
             }
             return e;
         };
-        return h.apply(this, arguments);
+        return g.apply(this, arguments);
     }
-    var g = {};
+    var k = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
- */    function k(e) {
-        var r = h({}, e);
+ */    function x(e) {
+        var t = g({}, e);
         // @docs-props-type DividerPropsBase
-                var i = (0, t.useContext)(y), a = i.role;
+                var i = (0, r.useContext)(y), a = i.role;
         
-        return n().createElement(m, h({
+        return n().createElement(m, g({
             "aria-hidden": a === "listbox",
             "data-test": "divider",
             role: "separator"
-        }, r));
+        }, t));
     }
-    k.propTypes = g;
-    /* Remove the item if it is the first item after filtering */    k.filterFirst = true;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    k.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    k.filterLast = true;
-    /* Tag the item as Divider */    k.as = "Divider";
-    /* harmony default export */    const x = k;
+    x.propTypes = k;
+    /* Remove the item if it is the first item after filtering */    x.filterFirst = true;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    x.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    x.filterLast = true;
+    /* Tag the item as Divider */    x.as = "Divider";
+    /* harmony default export */    const w = x;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
-    const w = require("@splunk/react-ui/Heading");
-    var S =  e.n(w);
+    const S = require("@splunk/react-ui/Heading");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
-    const O = require("@splunk/themes/useSplunkTheme");
-    var C =  e.n(O);
+    const C = require("@splunk/themes/useSplunkTheme");
+    var I =  e.n(C);
     // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
-    var P = v().div.withConfig({
+    var P = f().div.withConfig({
         displayName: "HeadingStyles__Styled",
         componentId: "mcd2ws-0"
-    })([ "", " border-top:1px solid transparent;padding:", ";&:not(:first-child){", ";}" ], b.mixins.reset("block"), (0, 
+    })([ "", " border-top:1px solid transparent;", ";&:not(:first-child){", ";}" ], b.mixins.reset("block"), (0, 
     b.pick)({
-        enterprise: (0, d.css)([ "", " ", " 6px" ], b.variables.spacingQuarter, b.variables.spacingHalf),
+        enterprise: (0, u.css)([ "padding:", " ", " 6px;" ], b.variables.spacingXSmall, b.variables.spacingSmall),
         prisma: {
-            comfortable: "13px 16px 10px 16px",
-            compact: "9px 16px 6px 16px"
+            comfortable: "padding: 13px 16px 10px 16px",
+            compact: "padding: 9px 16px 6px 16px"
         }
     }), (0, b.pick)({
-        enterprise: (0, d.css)([ "border-top:", ";" ], b.variables.border),
+        enterprise: (0, u.css)([ "border-top:", ";" ], b.variables.border),
         prisma: {
-            comfortable: (0, d.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], b.variables.neutral200),
-            compact: (0, d.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], b.variables.neutral200)
+            comfortable: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], b.variables.neutral200),
+            compact: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], b.variables.neutral200)
         }
     }));
-    var I = v().h5.withConfig({
+    var _ = f().h5.withConfig({
         displayName: "HeadingStyles__PrismaSectionTitle",
         componentId: "mcd2ws-1"
     })([ "", " font-size:", ";line-height:", ";font-weight:", ";letter-spacing:0.02em;" ], b.mixins.reset("block"), b.variables.fontSizeSmall, b.variables.lineHeight, b.variables.fontWeightBold);
     // CONCATENATED MODULE: ./src/Menu/Heading.tsx
-    function j(e, r) {
-        var t = Object.keys(e);
+    function j() {
+        j = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return j.apply(this, arguments);
+    }
+    function E(e, t) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            if (r) n = n.filter((function(r) {
-                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            if (t) n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
             }));
-            t.push.apply(t, n);
+            r.push.apply(r, n);
         }
-        return t;
+        return r;
     }
-    function E(e) {
-        for (var r = 1; r < arguments.length; r++) {
-            var t = arguments[r] != null ? arguments[r] : {};
-            if (r % 2) {
-                j(Object(t), true).forEach((function(r) {
-                    _(e, r, t[r]);
+    function T(e) {
+        for (var t = 1; t < arguments.length; t++) {
+            var r = arguments[t] != null ? arguments[t] : {};
+            if (t % 2) {
+                E(Object(r), true).forEach((function(t) {
+                    D(e, t, r[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
             } else {
-                j(Object(t)).forEach((function(r) {
-                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                E(Object(r)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
                 }));
             }
         }
         return e;
     }
-    function _(e, r, t) {
-        if (r in e) {
-            Object.defineProperty(e, r, {
-                value: t,
+    function D(e, t, r) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: r,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[r] = t;
+            e[t] = r;
         }
         return e;
     }
-    function T() {
-        T = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, n)) {
-                        e[n] = t[n];
-                    }
-                }
-            }
-            return e;
-        };
-        return T.apply(this, arguments);
-    }
-    function R(e, r) {
+    function q(e, t) {
         if (e == null) return {};
-        var t = D(e, r);
+        var r = R(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (i = 0; i < a.length; i++) {
                 n = a[i];
-                if (r.indexOf(n) >= 0) continue;
+                if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                t[n] = e[n];
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    function D(e, r) {
+    function R(e, t) {
         if (e == null) return {};
-        var t = {};
+        var r = {};
         var n = Object.keys(e);
         var i, a;
         for (a = 0; a < n.length; a++) {
             i = n[a];
-            if (r.indexOf(i) >= 0) continue;
-            t[i] = e[i];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
         }
-        return t;
+        return r;
     }
-    var q = {
+    var N = {
         children: a().node,
         title: a().bool,
         outerStyle: a().object
     };
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
- */    function K(e) {
-        var r = e.children, i = e.title, a = e.outerStyle, o = R(e, [ "children", "title", "outerStyle" ]);
-        var l = (0, t.useContext)(y), s = l.role;
-        var c = C()(), u = c.family;
-        var p = u === "prisma" ?  n().createElement(I, T({
-            as: i ? "h4" : "h5",
-            style: a,
-            "data-test": "heading"
-        }, o), r) :  n().createElement(S(), T({
-            style: E(E({}, a), {}, {
+ */    function H(e) {
+        var t = e.children, i = e.outerStyle, a = e.title, o = q(e, [ "children", "outerStyle", "title" ]);
+        var l = (0, r.useContext)(y), s = l.role;
+        var c = I()(), p = c.family;
+        var u = (0, r.useMemo)((function() {
+            return T(T({}, i), {}, {
                 margin: 0
-            }),
-            level: i ? 4 : "ss",
-            "data-test": "heading"
-        }, o), r);
+            });
+        }), [ i ]);
+        var f = p === "prisma" ?  n().createElement(_, j({
+            as: a ? "h4" : "h5",
+            "data-test": "heading",
+            style: i
+        }, o), t) :  n().createElement(O(), j({
+            "data-test": "heading",
+            level: a ? 4 : "ss",
+            style: u
+        }, o), t);
  // headings are not supported in role="listbox"
         // this causes Firefox to incorrectly read the total number
         // of items in the list if it contains a heading or divider
@@ -282,61 +284,64 @@
                 
         return n().createElement(P, {
             "aria-hidden": s === "listbox"
-        }, p);
+        }, f);
     }
-    K.propTypes = q;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    K.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    K.filterLast = true;
-    /* Tag the item as a Heading */    K.as = "Heading";
-    /* harmony default export */    const N = K;
+    H.propTypes = N;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    H.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    H.filterLast = true;
+    /* Tag the item as a Heading */    H.as = "Heading";
+    /* harmony default export */    const F = H;
     // CONCATENATED MODULE: external "lodash/isString"
-    const H = require("lodash/isString");
-    var A =  e.n(H);
+    const $ = require("lodash/isString");
+    var A =  e.n($);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const F = require("@splunk/react-icons/ChevronRight");
-    var $ =  e.n(F);
+    const M = require("@splunk/react-icons/ChevronRight");
+    var L =  e.n(M);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const M = require("@splunk/react-icons/Checkmark");
-    var z =  e.n(M);
+    const z = require("@splunk/react-icons/Checkmark");
+    var K =  e.n(z);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
-    const L = require("@splunk/react-icons/enterprise/Check");
-    var U =  e.n(L);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const W = require("@splunk/react-icons/enterprise/ChevronRight");
+    const W = require("@splunk/react-icons/enterprise/Check");
     var B =  e.n(W);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const G = require("@splunk/react-ui/Clickable");
+    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
+    const G = require("@splunk/react-icons/enterprise/ChevronRight");
     var V =  e.n(G);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const U = require("@splunk/react-ui/Clickable");
+    var X =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
-    const Q = require("@splunk/react-ui/Switch");
-    var Y =  e.n(Q);
+    const Y = require("@splunk/react-ui/Switch");
+    var J =  e.n(Y);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
-    var J = (0, d.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0, 
+    var Q = (0, u.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0, 
     b.pick)({
         prisma: b.variables.contentColorDefault,
         enterprise: b.variables.textGray
     }), b.variables.fontSizeSmall, (0, b.pick)({
         prisma: "16px"
     }));
-    var X = v().span.withConfig({
+    var Z = f().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionBottom",
         componentId: "sc-4kc053-0"
-    })([ "", ";display:block;" ], J);
-    var Z = v().span.withConfig({
+    })([ "", ";display:block;" ], Q);
+    var ee = f().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionRight",
         componentId: "sc-4kc053-1"
-    })([ "", ";float:right;padding-left:", ";max-width:50%;text-align:right;box-sizing:border-box;" ], J, b.variables.spacing);
-    var ee = v().div.withConfig({
+    })([ "", ";float:right;", " max-width:50%;text-align:right;box-sizing:border-box;" ], Q, (0, 
+    b.pick)({
+        enterprise: (0, u.css)([ "padding-left:", ";" ], b.variables.spacingLarge)
+    }));
+    var te = f().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedIcon",
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, b.pick)({
-        prisma: (0, d.css)([ "right:16px;" ]),
-        enterprise: (0, d.css)([ "right:3px;left:8px;" ])
+        prisma: (0, u.css)([ "right:16px;" ]),
+        enterprise: (0, u.css)([ "right:3px;left:8px;" ])
     }), (0, b.pick)({
         prisma: b.variables.contentColorActive,
         enterprise: b.variables.accentColorL10
     }));
-    var re = v().span.withConfig({
+    var re = f().span.withConfig({
         displayName: "ItemStyles__StyledItemIcon",
         componentId: "sc-4kc053-3"
     })([ "flex:0 0 auto;padding-right:", ";min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0, 
@@ -347,13 +352,13 @@
         prisma: "initial",
         enterprise: "middle"
     }), (0, b.pick)({
-        prisma: (0, d.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], b.variables.contentColorMuted),
-        enterprise: (0, d.css)([ "transform:translateY(-1px);" ])
+        prisma: (0, u.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], b.variables.contentColorMuted),
+        enterprise: (0, u.css)([ "transform:translateY(-1px);" ])
     }));
-    var te = v()(V()).withConfig({
+    var ne = f()(X()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
-    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
+    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
     b.pick)({
         prisma: b.variables.contentColorActive,
         enterprise: {
@@ -367,21 +372,21 @@
         },
         enterprise: "6px 10px"
     }), (function(e) {
-        var r = e.$isSelectable, t = e.$selectableAppearance;
-        return r && (0, b.pick)({
-            prisma: (0, d.css)([ "padding-right:44px;", "" ], (function() {
-                return t === "checkbox" && "padding-left: 42px;";
+        var t = e.$isSelectable, r = e.$selectableAppearance;
+        return t && (0, b.pick)({
+            prisma: (0, u.css)([ "padding-right:44px;", "" ], (function() {
+                return r === "checkbox" && "padding-left: 42px;";
             })),
-            enterprise: (0, d.css)([ "padding-right:10px;padding-left:", ";" ], (function() {
-                return t === "checkbox" ? "32px" : "28px";
+            enterprise: (0, u.css)([ "padding-right:10px;padding-left:", ";" ], (function() {
+                return r === "checkbox" ? "32px" : "28px";
             }))
         });
     }), (function(e) {
-        var r = e.$active, t = e.$preventFocus;
-        return r && !t && (0, d.css)([ "box-shadow:", ";" ], b.variables.focusShadowInset);
+        var t = e.$active, r = e.$preventFocus;
+        return t && !r && (0, u.css)([ "box-shadow:", ";" ], b.variables.focusShadowInset);
     }), (function(e) {
-        var r = e.$active;
-        return r && (0, d.css)([ "background:", ";font-weight:", ";" ], (0, b.pick)({
+        var t = e.$active;
+        return t && (0, u.css)([ "background:", ";font-weight:", ";" ], (0, b.pick)({
             enterprise: {
                 light: b.variables.gray92,
                 dark: b.variables.gray22
@@ -392,19 +397,19 @@
         prisma: b.variables.interactiveColorOverlayHover,
         enterprise: b.variables.backgroundColorHover
     }), (function(e) {
-        var r = e.$selected;
-        return r && (0, b.pick)({
-            prisma: (0, d.css)([ "background:", ";" ], b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayHover))
+        var t = e.$selected;
+        return t && (0, b.pick)({
+            prisma: (0, u.css)([ "background:", ";" ], b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayHover))
         });
-    }), b.variables.focusShadowInset, (0, b.pick)({
-        prisma: (0, d.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
     }), (0, b.pick)({
-        prisma: (0, d.css)([ "&:active{background:", ";}" ], b.variables.interactiveColorOverlayActive)
+        prisma: (0, u.css)([ "&:active{background:", ";}" ], b.variables.interactiveColorOverlayActive)
     }), (function(e) {
-        var r = e.$selected;
-        return r && (0, b.pick)({
-            prisma: (0, d.css)([ "background:", ";&:active{background:", ";}" ], b.variables.interactiveColorOverlaySelected, b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayActive))
+        var t = e.$selected;
+        return t && (0, b.pick)({
+            prisma: (0, u.css)([ "background:", ";&:active{background:", ";}" ], b.variables.interactiveColorOverlaySelected, b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayActive))
         });
+    }), b.variables.focusShadowInset, (0, b.pick)({
+        prisma: (0, u.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
     }), (0, b.pick)({
         enterprise: {
             light: b.variables.gray45,
@@ -413,26 +418,26 @@
         prisma: b.variables.contentColorDisabled
     }), 
     /* sc-sel */
-    X, 
-    /* sc-sel */
     Z, 
     /* sc-sel */
-    ee, (0, b.pick)({
+    ee, 
+    /* sc-sel */
+    te, (0, b.pick)({
         prisma: b.variables.contentColorDisabled,
         enterprise: b.variables.gray80
     }), (0, b.pick)({
-        prisma: (0, d.css)([ "& > * > ", "{color:", ";}" ], 
+        prisma: (0, u.css)([ "& > * > ", "{color:", ";}" ], 
         /* sc-sel */
         re, b.variables.contentColorDisabled)
     }), (function(e) {
-        var r = e.$selected;
-        return r && (0, b.pick)({
-            prisma: (0, d.css)([ "", "{color:", ";}" ], 
+        var t = e.$selected;
+        return t && (0, b.pick)({
+            prisma: (0, u.css)([ "", "{color:", ";}" ], 
             /* sc-sel */
             re, b.variables.contentColorActive)
         });
     }));
-    var ne = v()(Y()).withConfig({
+    var ie = f()(J()).withConfig({
         displayName: "ItemStyles__StyledSwitch",
         componentId: "sc-4kc053-5"
     })([ "position:absolute;left:", ";top:", ";" ], (0, b.pick)({
@@ -445,25 +450,25 @@
             compact: "2px"
         }
     }));
-    var ie = v().span.withConfig({
+    var ae = f().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var ae = v().span.withConfig({
+    var oe = f().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
     })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
-        var r = e.$truncate;
-        return r && (0, d.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
+        var t = e.$truncate;
+        return t && (0, u.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var oe = v().div.withConfig({
+    var le = f().div.withConfig({
         displayName: "ItemStyles__StyledLabel",
         componentId: "sc-4kc053-8"
     })([ "overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
-        var r = e.$truncate;
-        return r && (0, d.css)([ "display:block;clear:both;" ]);
+        var t = e.$truncate;
+        return t && (0, u.css)([ "display:block;clear:both;" ]);
     }));
-    var le = v().span.withConfig({
+    var se = f().span.withConfig({
         displayName: "ItemStyles__StyledMatch",
         componentId: "sc-4kc053-9"
     })([ "border-bottom:1px solid ", ";" ], (0, b.pick)({
@@ -473,7 +478,7 @@
             light: b.variables.gray45
         }
     }));
-    var se = v().span.withConfig({
+    var ce = f().span.withConfig({
         displayName: "ItemStyles__StyledSubmenu",
         componentId: "sc-4kc053-10"
     })([ "float:right;padding-left:", ";color:", ";", "" ], b.variables.spacingSmall, (0, 
@@ -481,39 +486,39 @@
         prisma: "inherit",
         enterprise: b.variables.textGray
     }), (0, b.pick)({
-        prisma: (0, d.css)([ "& > svg{width:20px;height:20px;}" ])
+        prisma: (0, u.css)([ "& > svg{width:20px;height:20px;}" ])
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
-    const ce = require("@splunk/react-icons/ArrowSquareTopRight");
-    var ue =  e.n(ce);
+    const pe = require("@splunk/react-icons/ArrowSquareTopRight");
+    var ue =  e.n(pe);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const pe = require("@splunk/react-icons/enterprise/External");
-    var fe =  e.n(pe);
+    const fe = require("@splunk/react-icons/enterprise/External");
+    var de =  e.n(fe);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const de = require("@splunk/ui-utils/i18n");
+    const ve = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Menu/icons/External.tsx
-    var ve = (0, de._)("Open externally");
-    var be = (0, d.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
-    var me = v()(fe()).withConfig({
+    var be = (0, ve._)("Open externally");
+    var me = (0, u.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
+    var he = f()(de()).withConfig({
         displayName: "External__StyledEnterprise",
         componentId: "sc-1turs2s-0"
-    })([ "", " margin:0 0 0 3px;" ], be);
-    var ye = v()(ue()).withConfig({
+    })([ "", " margin:0 0 0 3px;" ], me);
+    var ye = f()(ue()).withConfig({
         displayName: "External__StyledPrisma",
         componentId: "sc-1turs2s-1"
-    })([ "", " margin:0 0 0 4px;" ], be);
-    function he() {
-        var e = (0, b.useSplunkTheme)(), r = e.isEnterprise, t = e.isCompact;
-        var i = t ? "20px" : "24px";
-        return r ?  n().createElement(me, {
-            screenReaderText: ve
+    })([ "", " margin:0 0 0 4px;" ], me);
+    function ge() {
+        var e = (0, b.useSplunkTheme)(), t = e.isEnterprise, r = e.isCompact;
+        var i = r ? "20px" : "24px";
+        return t ?  n().createElement(he, {
+            screenReaderText: be
         }) :  n().createElement(ye, {
-            "aria-label": ve,
+            "aria-label": be,
             height: i,
             width: i
-        },  n().createElement("title", null, ve));
+        },  n().createElement("title", null, be));
     }
-    /* harmony default export */    const ge = he;
+    /* harmony default export */    const ke = ge;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -521,156 +526,156 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function ke(e, r) {
+    function xe(e, t) {
         if (e) {
             if (typeof e === "function") {
-                e(r);
+                e(t);
             } else {
                 // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
                 // the intention here is to signal "we will take care of setting 'current', not you".
-                e.current = r;
+                e.current = t;
  // eslint-disable-line no-param-reassign
                         }
         }
     }
     // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
     // A utility that attempts to move an element into view by scrolling it's derived parent.
-    var xe = function e(r) {
-        if (!r) {
+    var we = function e(t) {
+        if (!t) {
             return;
         }
-        var t = r.offsetParent;
-        if (!t) {
+        var r = t.offsetParent;
+        if (!r) {
             return;
         }
  // Below the bottom of the container.
-                if (t.scrollTop + t.clientHeight < r.offsetTop + r.clientHeight) {
-            t.scrollTop = r.offsetTop + r.clientHeight - t.clientHeight;
+                if (r.scrollTop + r.clientHeight < t.offsetTop + t.clientHeight) {
+            r.scrollTop = t.offsetTop + t.clientHeight - r.clientHeight;
  // Above the top of the container.
-                } else if (t.scrollTop > r.offsetTop) {
-            t.scrollTop = r.offsetTop;
+                } else if (r.scrollTop > t.offsetTop) {
+            r.scrollTop = t.offsetTop;
         }
     };
     // CONCATENATED MODULE: ./src/Menu/Item.tsx
-    function we(e) {
+    function Se(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            we = function e(r) {
-                return typeof r;
+            Se = function e(t) {
+                return typeof t;
             };
         } else {
-            we = function e(r) {
-                return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
+            Se = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return we(e);
+        return Se(e);
     }
-    function Se() {
-        Se = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, n)) {
-                        e[n] = t[n];
+    function Oe() {
+        Oe = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
                     }
                 }
             }
             return e;
         };
-        return Se.apply(this, arguments);
+        return Oe.apply(this, arguments);
     }
-    function Oe(e, r) {
+    function Ce(e, t) {
         if (e == null) return {};
-        var t = Ce(e, r);
+        var r = Ie(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (i = 0; i < a.length; i++) {
                 n = a[i];
-                if (r.indexOf(n) >= 0) continue;
+                if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                t[n] = e[n];
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    function Ce(e, r) {
+    function Ie(e, t) {
         if (e == null) return {};
-        var t = {};
+        var r = {};
         var n = Object.keys(e);
         var i, a;
         for (a = 0; a < n.length; a++) {
             i = n[a];
-            if (r.indexOf(i) >= 0) continue;
-            t[i] = e[i];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
         }
-        return t;
+        return r;
     }
-    function Pe(e, r) {
-        if (!(e instanceof r)) {
+    function Pe(e, t) {
+        if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function Ie(e, r) {
-        for (var t = 0; t < r.length; t++) {
-            var n = r[t];
+    function _e(e, t) {
+        for (var r = 0; r < t.length; r++) {
+            var n = t[r];
             n.enumerable = n.enumerable || false;
             n.configurable = true;
             if ("value" in n) n.writable = true;
             Object.defineProperty(e, n.key, n);
         }
     }
-    function je(e, r, t) {
-        if (r) Ie(e.prototype, r);
-        if (t) Ie(e, t);
+    function je(e, t, r) {
+        if (t) _e(e.prototype, t);
+        if (r) _e(e, r);
         return e;
     }
-    function Ee(e, r) {
-        if (typeof r !== "function" && r !== null) {
+    function Ee(e, t) {
+        if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
-        e.prototype = Object.create(r && r.prototype, {
+        e.prototype = Object.create(t && t.prototype, {
             constructor: {
                 value: e,
                 writable: true,
                 configurable: true
             }
         });
-        if (r) _e(e, r);
+        if (t) Te(e, t);
     }
-    function _e(e, r) {
-        _e = Object.setPrototypeOf || function e(r, t) {
-            r.__proto__ = t;
-            return r;
+    function Te(e, t) {
+        Te = Object.setPrototypeOf || function e(t, r) {
+            t.__proto__ = r;
+            return t;
         };
-        return _e(e, r);
+        return Te(e, t);
     }
-    function Te(e) {
-        var r = qe();
-        return function t() {
-            var n = Ke(e), i;
-            if (r) {
-                var a = Ke(this).constructor;
+    function De(e) {
+        var t = Ne();
+        return function r() {
+            var n = He(e), i;
+            if (t) {
+                var a = He(this).constructor;
                 i = Reflect.construct(n, arguments, a);
             } else {
                 i = n.apply(this, arguments);
             }
-            return Re(this, i);
+            return qe(this, i);
         };
     }
-    function Re(e, r) {
-        if (r && (we(r) === "object" || typeof r === "function")) {
-            return r;
+    function qe(e, t) {
+        if (t && (Se(t) === "object" || typeof t === "function")) {
+            return t;
         }
-        return De(e);
+        return Re(e);
     }
-    function De(e) {
+    function Re(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function qe() {
+    function Ne() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -681,31 +686,31 @@
             return false;
         }
     }
-    function Ke(e) {
-        Ke = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
-            return r.__proto__ || Object.getPrototypeOf(r);
+    function He(e) {
+        He = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Ke(e);
+        return He(e);
     }
-    function Ne(e, r, t) {
-        if (r in e) {
-            Object.defineProperty(e, r, {
-                value: t,
+    function Fe(e, t, r) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: r,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[r] = t;
+            e[t] = r;
         }
         return e;
     }
-    var He = {
+    var $e = {
         active: a().bool,
         children: a().node,
         description: a().string,
         descriptionPosition: a().oneOf([ "right", "bottom" ]),
-        disabled: a().bool,
+        disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed" ]) ]),
         elementRef: a().oneOfType([ a().func, a().object ]),
         hasSubmenu: a().bool,
         icon: a().node,
@@ -733,7 +738,6 @@
     var Ae = {
         active: false,
         descriptionPosition: "bottom",
-        disabled: false,
         hasSubmenu: false,
         openInNewContext: false,
         preventFocus: false,
@@ -742,72 +746,72 @@
         selected: false,
         truncate: false
     };
-    var Fe =  function(e) {
-        Ee(t, e);
-        var r = Te(t);
-        je(t, null, [ {
+    var Me =  function(e) {
+        Ee(r, e);
+        var t = De(r);
+        je(r, null, [ {
             key: "validateProps",
             // @docs-props-type ItemPropsBase
-            value: function e(r) {
+            value: function e(t) {
                 if (false) {}
             }
         } ]);
-        function t(e) {
+        function r(e) {
             var n;
-            Pe(this, t);
-            n = r.call(this, e);
-            Ne(De(n), "el", null);
-            Ne(De(n), "handleFocus", (function(e) {
-                var r = n.props, t = r.onFocus, i = r.itemKey;
-                t === null || t === void 0 ? void 0 : t(e, {
+            Pe(this, r);
+            n = t.call(this, e);
+            Fe(Re(n), "el", null);
+            Fe(Re(n), "handleFocus", (function(e) {
+                var t = n.props, r = t.onFocus, i = t.itemKey;
+                r === null || r === void 0 ? void 0 : r(e, {
                     itemKey: i
                 });
             }));
-            Ne(De(n), "handleMount", (function(e) {
+            Fe(Re(n), "handleMount", (function(e) {
                 n.el = e;
-                ke(n.props.elementRef, e);
+                xe(n.props.elementRef, e);
             }));
-            t.validateProps(e);
+            r.validateProps(e);
             return n;
         }
-        je(t, [ {
+        je(r, [ {
             key: "componentDidUpdate",
             value: function e() {
-                t.validateProps(this.props);
+                r.validateProps(this.props);
             }
         }, {
             key: "focus",
             value: function e() {
-                var r;
-                (r = this.el) === null || r === void 0 ? void 0 : r.focus();
+                var t;
+                (t = this.el) === null || t === void 0 ? void 0 : t.focus();
             }
         }, {
             key: "scrollIntoViewIfNeeded",
             value: function e() {
-                xe(this.el);
+                we(this.el);
             }
         }, {
             key: "renderLabel",
             value: function e() {
-                var r = this.props, t = r.children, i = r.matchRanges;
-                if (!i || !A()(t)) {
-                    return t;
+                var t = this.props, r = t.children, i = t.matchRanges;
+                if (!i || !A()(r)) {
+                    return r;
                 }
                 var a = [];
  // before first match. May be empty string.
-                                a.push(t.substring(0, i[0].start));
-                i.forEach((function(e, r) {
+                                a.push(r.substring(0, i[0].start));
+                i.forEach((function(e, t) {
                     a.push(
                     
                     // eslint-disable-next-line react/no-array-index-key
-                    n().createElement(le, {
-                        key: r,
+                    n().createElement(se, {
+                        key: t,
                         "data-test": "match"
-                    }, t.substring(e.start, e.end)));
-                    if (r < i.length - 1) {
-                        a.push(t.substring(e.end, i[r + 1].start));
+                    }, r.substring(e.start, e.end)));
+                    if (t < i.length - 1) {
+                        a.push(r.substring(e.end, i[t + 1].start));
                     } else {
-                        a.push(t.substring(e.end, t.length));
+                        a.push(r.substring(e.end, r.length));
                     }
                 }));
                 return a;
@@ -815,8 +819,9 @@
         }, {
             key: "render",
             value: function e() {
-                var r = this.props, t = r.active, i = r.children, a = r.hasSubmenu, o = r.selectable, s = r.selectableAppearance, c = r.selected, u = r.icon, p = r.description, f = r.disabled, d = r.onClick, v = r.preventFocus, b = r.role, m = r.splunkTheme, y = r.to, h = r.truncate, g = r.descriptionPosition, k = r.openInNewContext, x = Oe(r, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
-                var w = m.isEnterprise, S = m.isPrisma;
+                var t = this.props, r = t.active, i = t.children, a = t.hasSubmenu, o = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, f = t.disabled, d = t.onClick, v = t.role, b = t.splunkTheme, m = t.to, h = t.truncate, y = t.descriptionPosition, g = t.openInNewContext, k = Ce(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
+                var x = b.isEnterprise, w = b.isPrisma;
+                var S = this.context.preventFocus;
                 var O = o || c;
                 var C = {
                     nonselectable: "menuitem",
@@ -824,478 +829,266 @@
                     checkbox: "menuitemcheckbox"
                 }[O ? s : "nonselectable"];
  // aria-checked updates only with checkmark appearance for now SUI-2578
-                                var P = {
+                                var I = {
                     "aria-haspopup": a ? true : undefined,
                     "aria-checked": s === "checkmark" && c ? true : undefined
                 };
-                var I = S ? "right" : "left";
-                var j = p && g === "right";
-                var E = p && !j;
-                var _ = c && s === "checkmark" &&  n().createElement(ee, null, S ?  n().createElement(z(), {
+                var P = w ? "right" : "left";
+                var _ = u && y === "right";
+                var j = u && !_;
+                var E = c && s === "checkmark" &&  n().createElement(te, null, w ?  n().createElement(K(), {
                     inline: true,
                     height: "16",
                     width: "16"
-                }) :  n().createElement(U(), {
+                }) :  n().createElement(B(), {
                     hideDefaultTooltip: true,
                     inline: true,
                     screenReaderText: null,
                     size: .85
                 }));
                 
-                return n().createElement(te, Se({
+                return n().createElement(ne, Oe({
                     $isSelectable: O,
                     $selectableAppearance: s,
                     $selected: c,
-                    $active: t,
-                    $preventFocus: v,
+                    $active: r,
+                    $preventFocus: S || false,
                     "data-test-selected": O ? c : null,
                     "data-test": "item",
-                    "data-has-icon": !!u,
+                    "data-has-icon": !!p,
                     disabled: f,
                     onClick: d,
                     onFocus: this.handleFocus,
-                    onMouseDown: function e(r) {
-                        if (v) {
-                            r.preventDefault();
+                    onMouseDown: function e(t) {
+                        if (S) {
+                            t.preventDefault();
                         }
                     },
-                    role: b || C,
-                    to: y,
+                    role: v || C,
+                    tabIndex: S ? -1 : undefined,
+                    to: m,
                     title: h && A()(i) ? i : undefined,
-                    openInNewContext: k
-                }, P, l()(x, "onFocus"), {
+                    openInNewContext: g
+                }, I, l()(k, "onFocus"), {
                     elementRef: this.handleMount
-                }), o && s === "checkbox" &&  n().createElement(ne, {
+                }), o && s === "checkbox" &&  n().createElement(ie, {
                     interactive: false,
                     selected: c,
                     selectedLabel: "Selected",
                     value: "menu-item"
-                }), a &&  n().createElement(se, null, w ?  n().createElement(B(), {
+                }), a &&  n().createElement(ce, null, x ?  n().createElement(V(), {
                     hideDefaultTooltip: true,
                     screenReaderText: null
-                }) :  n().createElement($(), null)), j &&  n().createElement(Z, {
+                }) :  n().createElement(L(), null)), _ &&  n().createElement(ee, {
                     "data-test": "description"
-                }, p),  n().createElement(ie, null, u &&  n().createElement(re, null, u),  n().createElement(ae, {
+                }, u),  n().createElement(ae, null, p &&  n().createElement(re, null, p),  n().createElement(oe, {
                     $truncate: h
-                }, I === "left" && _,  n().createElement(oe, {
+                }, P === "left" && E,  n().createElement(le, {
                     $truncate: h,
                     "data-test": "label"
-                }, this.renderLabel(), k &&  n().createElement(ge, null)), E &&  n().createElement(X, {
+                }, this.renderLabel(), g &&  n().createElement(ke, null)), j &&  n().createElement(Z, {
                     "data-test": "description"
-                }, p), I === "right" && _)));
+                }, u), P === "right" && E)));
             }
         } ]);
-        return t;
-    }(t.Component);
-    Ne(Fe, "propTypes", He);
-    Ne(Fe, "defaultProps", Ae);
-    Ne(Fe, "as", void 0);
-    var $e = (0, b.withSplunkTheme)(Fe);
-    var Me = $e;
-    Me.propTypes = Fe.propTypes;
-    Me.as = "Item";
-    /* harmony default export */    const ze = Me;
+        return r;
+    }(r.Component);
+    Fe(Me, "propTypes", $e);
+    Fe(Me, "defaultProps", Ae);
+    Fe(Me, "as", void 0);
+    Fe(Me, "contextType", y);
+    var Le = (0, b.withSplunkTheme)(Me);
+    var ze = Le;
+    ze.propTypes = Me.propTypes;
+    ze.as = "Item";
+    /* harmony default export */    const Ke = ze;
     // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
-    const Le = require("@splunk/react-ui/Scroll");
-    var Ue =  e.n(Le);
+    const We = require("@splunk/react-ui/Scroll");
+    var Be =  e.n(We);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var We = (0, d.css)([ "border-top:1px solid ", ";" ], (0, b.pick)({
+    var Ge = (0, u.css)([ "border-top:1px solid ", ";" ], (0, b.pick)({
         enterprise: b.variables.gray60,
         prisma: b.variables.neutral200
     }));
-    var Be = v().div.withConfig({
-        displayName: "MenuStyles__Styled",
-        componentId: "sc-1olffp9-0"
-    })([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}" ], b.mixins.reset("block"), (0, 
+    var Ve = (0, u.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}" ], b.mixins.reset("block"), (0, 
     b.pick)({
         enterprise: b.variables.backgroundColor,
         prisma: b.variables.backgroundColorPopup
     }), b.variables.borderRadius, (0, b.pick)({
-        prisma: (0, d.css)([ "padding:8px 0;" ])
+        prisma: (0, u.css)([ "padding:8px 0;" ])
     }), b.variables.focusShadowInset, (0, b.pick)({
-        prisma: (0, d.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
-    }), We);
-    var Ge = v()(Be.withComponent(Ue())).withConfig({
+        prisma: (0, u.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
+    }), Ge);
+    var Ue = f().div.withConfig({
+        displayName: "MenuStyles__Styled",
+        componentId: "sc-1olffp9-0"
+    })([ "", "" ], Ve);
+    var Xe = f()(Be()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " + &,& + ", "{", "}" ], 
+    })([ "", " ", " + &,& + ", "{", "}" ], Ve, 
     /* sc-sel */
-    Be, 
+    Ue, 
     /* sc-sel */
-    Be, We);
-    // CONCATENATED MODULE: ./src/utils/navigateList.ts
-    // A utility for keyboard navigation of lists
-    function Ve(e, r, t) {
-        for (var n = 0; n < e.length; n += 1) {
-            var i;
-            var a = (n + t) % e.length;
-            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[a];
-            }
-        }
-        return e[r];
-    }
-    function Qe(e, r, t) {
-        for (var n = e.length; n > 0; n -= 1) {
-            var i;
-            var a = (n + t) % e.length;
-            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[a];
-            }
-        }
-        return e[r];
-    }
-    // CONCATENATED MODULE: ./src/utils/getMenuChildNode.tsx
-    // TODO(SUI-5919): fix the ref handling in the other components so this isn't needed
-    /**
- * @private Get the HTML <anchor> or <button> node for a received derivative of Menu.Item
- */
-    var Ye = function e(r) {
-        var t, n, i, a;
-        if (r.el) {
-            return r.el;
- // Menu.Item
-                }
-        if ((t = r.c) === null || t === void 0 ? void 0 : t.el) {
-            return r.c.el;
- // Multiselect.Option
-                }
-        if ((n = r.c) === null || n === void 0 ? void 0 : (i = n.c) === null || i === void 0 ? void 0 : i.el) {
-            return r.c.c.el;
- // Select.Option
-                }
-        if ((a = r.item) === null || a === void 0 ? void 0 : a.el) {
-            return r.item.el;
- // ComboBox.Option
-                }
-        return null;
-    };
+    Ue, Ge);
     // CONCATENATED MODULE: ./src/Menu/Menu.tsx
-    function Je() {
-        Je = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, n)) {
-                        e[n] = t[n];
+    function Ye() {
+        Ye = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
                     }
                 }
             }
             return e;
         };
-        return Je.apply(this, arguments);
-    }
-    function Xe(e, r) {
-        return nr(e) || tr(e, r) || er(e, r) || Ze();
-    }
-    function Ze() {
-        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 er(e, r) {
-        if (!e) return;
-        if (typeof e === "string") return rr(e, r);
-        var t = Object.prototype.toString.call(e).slice(8, -1);
-        if (t === "Object" && e.constructor) t = e.constructor.name;
-        if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return rr(e, r);
+        return Ye.apply(this, arguments);
     }
-    function rr(e, r) {
-        if (r == null || r > e.length) r = e.length;
-        for (var t = 0, n = new Array(r); t < r; t++) {
-            n[t] = e[t];
-        }
-        return n;
-    }
-    function tr(e, r) {
-        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
-        var t = [];
-        var n = true;
-        var i = false;
-        var a = undefined;
-        try {
-            for (var o = e[Symbol.iterator](), l; !(n = (l = o.next()).done); n = true) {
-                t.push(l.value);
-                if (r && t.length === r) break;
-            }
-        } catch (e) {
-            i = true;
-            a = e;
-        } finally {
-            try {
-                if (!n && o["return"] != null) o["return"]();
-            } finally {
-                if (i) throw a;
-            }
-        }
-        return t;
-    }
-    function nr(e) {
-        if (Array.isArray(e)) return e;
-    }
-    function ir(e, r) {
+    function Je(e, t) {
         if (e == null) return {};
-        var t = ar(e, r);
+        var r = Qe(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (i = 0; i < a.length; i++) {
                 n = a[i];
-                if (r.indexOf(n) >= 0) continue;
+                if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                t[n] = e[n];
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
-    function ar(e, r) {
+    function Qe(e, t) {
         if (e == null) return {};
-        var t = {};
+        var r = {};
         var n = Object.keys(e);
         var i, a;
         for (a = 0; a < n.length; a++) {
             i = n[a];
-            if (r.indexOf(i) >= 0) continue;
-            t[i] = e[i];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
         }
-        return t;
+        return r;
     }
-    var or = {
+    var Ze = {
         children: a().node,
-        /** @private */
-        controlledExternally: a().bool,
         elementRef: a().oneOfType([ a().func, a().object ]),
-        /** @private */
-        onDownKeyPress: a().func,
-        /** @private */
-        onEndKeyPress: a().func,
-        /** @private */
-        onHomeKeyPress: a().func,
-        /** @private */
-        onUpKeyPress: a().func,
+        focusMode: a().oneOf([ "roving", "normal", "never" ]),
         retainFocus: a().bool,
         stopScrollPropagation: a().bool
     };
-    var lr = {
-        stopScrollPropagation: false
+    // the default focus control for Menu: loop, verticalArrows(up/down keys), home/end keys
+        var et = function e(t) {
+        return {
+            enableLoop: true,
+            orientation: "vertical",
+            enableTab: t,
+            enableHomeEnd: true
+        };
+    };
+    var tt = function e(t) {
+        var r = (0, c.keycode)(t.nativeEvent);
+ // Handle special case for tab navigation
+                if (r === "tab" && (0, p.isTabKey)(t)) {
+            return t.shiftKey ? "tabShift" : "tab";
+        }
+        return r;
     };
-    function sr(e) {
-        var r = e.children, i = e.controlledExternally, a = e.elementRef, o = e.onDownKeyPress, p = e.onEndKeyPress, d = e.onHomeKeyPress, v = e.onUpKeyPress, b = e.retainFocus, m = e.stopScrollPropagation, h = ir(e, [ "children", "controlledExternally", "elementRef", "onDownKeyPress", "onEndKeyPress", "onHomeKeyPress", "onUpKeyPress", "retainFocus", "stopScrollPropagation" ]);
+    function rt(e) {
+        var t = e.children, i = e.elementRef, a = e.focusMode, o = e.retainFocus, c = e.stopScrollPropagation, u = Je(e, [ "children", "elementRef", "focusMode", "retainFocus", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
-                var g = (0, t.useContext)(y), k = g.role, x = k === void 0 ? "menu" : k;
-        var w = (0, t.useContext)(s.PopoverContext), S = w.retainFocus;
-        var O = f()();
-        var C = true;
-        if (b != null) {
-            C = b;
-        } else if (S != null) {
-            C = S;
+                if (false) {}
+        var f = (0, r.useContext)(y), d = f.role, v = d === void 0 ? "menu" : d;
+        var b = (0, r.useContext)(s.PopoverContext), m = b.retainFocus;
+        var h = (0, r.useRef)(null);
+        var g = true;
+        if (o != null) {
+            g = o;
+        } else if (a === "roving") {
+            g = false;
+        } else if (m != null) {
+            g = m;
         }
-        var P = n().useRef(0);
-        var I = [];
- // `VirtualizedResultsMenu` needs some special consideration regarding the focused element index so that on
-        // keypress it won't ignore the requested focus index or element, even when it doesn't exist. `VirtualizedResultsMenu`
-        // knows what it _will_ mount as a child of `Menu`, and upon mount that targeted child should receive focus.
-                var j = n().useRef(null);
-        var E = n().useRef(false);
- // TODO(SUI-5918): stabilize itemRefs so itemOnFocus does not churn and can access itemRefs
-                var _ = (0, t.useRef)(I);
-        _.current = I;
-        var T = 0;
-        var R;
-        var D = false;
-        var q = false;
-        var K = false;
-        var N = (0, t.useCallback)((function(e) {
-            var r = e.e, t = e.data, n = e.userCallback, i = e.defaultCallback;
-            var a;
-            if (n) {
-                var o = n(r, t);
-                if (typeof o[0] === "number") {
-                    // userCallback returned index of the to-render element which should capture focus on mount
-                    a = {
-                        current: null
-                    };
-                    var l = Xe(o, 2);
-                    P.current = l[0];
-                    E.current = l[1];
-                } else {
-                    // userCallback returned ref of the rendered element which should take focus
-                    var s = o;
-                    var c = Xe(s, 2);
-                    a = c[0];
-                    E.current = c[1];
-                    P.current = Math.max(0, t.itemRefs.indexOf(a));
-                }
-            } else {
-                a = i();
-            }
-            return a;
-        }), []);
-        var H = function e(r) {
-            // SUI-2734: keeping this active even if controlledExternally is set
-            // because Firefox + Voiceover (and possibly other a11y tools)
-            // can still set focus on the Menu items and this avoids the
-            // whole page scrolling when that happens
-            var t = (0, u.keycode)(r.nativeEvent);
-            var n = P.current;
-            var i;
- // the "retainFocus" checks here mimic the prior tab key functionality
-                        if (t === "down" || C && (0, c.isTabKey)(r)) {
-                i = N({
-                    e: r,
-                    data: {
-                        itemRefs: I,
-                        focusedItemKey: n
-                    },
-                    userCallback: o,
-                    defaultCallback: function e() {
-                        return Ve(I, n, n + 1);
-                    }
-                });
-            } else if (t === "up" || C && (0, c.isTabKey)(r) && r.shiftKey) {
-                i = N({
-                    e: r,
-                    data: {
-                        itemRefs: I,
-                        focusedItemKey: n
-                    },
-                    userCallback: v,
-                    defaultCallback: function e() {
-                        return Qe(I, n, n - 1);
-                    }
-                });
-            } else if (t === "home") {
-                i = N({
-                    e: r,
-                    data: {
-                        itemRefs: I,
-                        focusedItemKey: n
-                    },
-                    userCallback: d,
-                    defaultCallback: function e() {
-                        return Ve(I, n, 0);
-                    }
-                });
-            } else if (t === "end") {
-                i = N({
-                    e: r,
-                    data: {
-                        itemRefs: I,
-                        focusedItemKey: n
-                    },
-                    userCallback: p,
-                    defaultCallback: function e() {
-                        return Qe(I, n, I.length - 1);
-                    }
-                });
-            }
-            if (i != null) {
-                var a, l;
-                (a = i.current) === null || a === void 0 ? void 0 : (l = a.focus) === null || l === void 0 ? void 0 : l.call(a);
-                r.preventDefault();
-                j.current = E.current ? null : i.current;
-            }
-        };
-        var A = (0, t.useCallback)((function(e, r) {
-            var t = r.itemKey;
-            if (t != null) {
-                var n;
-                P.current = t;
-                j.current = E.current ? null : (n = _.current[P.current]) === null || n === void 0 ? void 0 : n.current;
-            }
-        }), []);
-        var F = t.Children.toArray(r).filter(t.isValidElement).reduce((function(e, r, t, a) {
+        var k = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
             /* Filter out initial Dividers
      * Requires reduce() over filter() because a Heading may have been
      * before the Divider.
      */
-            if (r.type.as === "Divider" && e.length === 0) {
+            if (t.type.as === "Divider" && e.length === 0) {
                 return e;
             }
  // Filter out consecutive Dividers and Headings
             // If Divider is next to Heading then it will remove both Heading and Divider unless Heading has title prop set to it
-                        if ((r.type.as === "Heading" || r.type.as === "Divider") && !r.props.title && r.type.filterConsecutive && a.length > t + 1) {
-                var o = a[t + 1];
-                if (o.type.as === "Heading" || o.type.as === "Divider") {
+                        if ((t.type.as === "Heading" || t.type.as === "Divider") && !t.props.title && t.type.filterConsecutive && n.length > r + 1) {
+                var i = n[r + 1];
+                if (i.type.as === "Heading" || i.type.as === "Divider") {
                     return e;
                 }
             }
  // Filter out last Dividers and Headings
-                        if ((r.type.as === "Divider" || r.type.as === "Heading") && t === a.length - 1) {
+                        if ((t.type.as === "Divider" || t.type.as === "Heading") && r === n.length - 1) {
                 return e;
             }
- // the filterConsecutive check filters out Headings and Dividers whether styled or not
-            // the typeof check prevents props from being applied to HTML elements
-            // such as the zero-height scroll bottom div in <ResultsMenu>
-                        if (!(r.type.as === "Divider" || r.type.as === "Heading") && typeof r.type !== "string") {
-                var l =  n().createRef();
-                var s = I.length;
-                I.push(l);
-                if (R == null && (!("disabled" in r.props) || !r.props.disabled)) {
-                    R = T;
-                }
-                if (P.current === T && "disabled" in r.props && r.props.disabled) {
-                    D = true;
-                }
-                if ("selected" in r.props && r.props.selected) {
-                    q = true;
-                    if ("disabled" in r.props && !r.props.disabled) {
-                        K = true;
-                    }
-                }
-                var c = !i && P.current === T ? undefined : -1;
-                e.push( n().cloneElement(r, {
-                    itemKey: T,
-                    onFocus: A,
-                    preventFocus: i,
-                    ref: function e(t) {
-                        ke(r.ref, t);
-                        ke(l, t);
-                        if (!t) {
-                            return;
-                        }
-                        if (t === j.current) {
-                            // When using `VirtualizedResultsMenu` the ref content changes but the
-                            // count doesn't. The keyboard scrolling will break if the focus index
-                            // isn't corrected during scroll
-                            P.current = s;
-                        } else if (E.current && s === P.current) {
-                            var n;
-                            (n = Ye(t)) === null || n === void 0 ? void 0 : n.focus();
-                            E.current = false;
-                        }
-                    },
-                    tabIndex: c
-                }));
-                T += 1;
-                return e;
-            }
-            e.push(r);
+            e.push(t);
             return e;
         }), []);
-        if (R !== P.current && (!q || K) && D && R != null) {
-            P.current = R;
-            O();
-        }
-        var $ = {
+        var x = (0, r.useCallback)((function(e) {
+            h.current = e;
+            xe(i, e);
+        }), [ i ]);
+        var w = et(g);
+        var S = (0, r.useCallback)((function(e) {
+            var t = tt(e);
+            var r = t === "tab" || t === "tabShift";
+            var n = t === "enter";
+ // Allow default behavior for the enter key.
+            // If tab navigation is enabled, prevent default behavior for all other keys.
+            // If tab navigation is disabled, allow default behavior for tab and tab+shift key
+                        if (!n && (w.enableTab || !r)) {
+                e.preventDefault();
+            }
+            var i = h.current;
+            var a = [];
+            if (i) {
+                a = (0, p.getSortedTabbableElements)(i, {
+                    ignoreTabIndex: true
+                });
+            }
+            var o = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
+            var l = i === null || i === void 0 ? void 0 : i.querySelector(":focus");
+            var s = o || l;
+            var c = s ? a.indexOf(s) : -1;
+            (0, p.handleFocus)(t, a, c, w);
+        }), [ w ]);
+        var O = function e() {
+            return {
+                role: "menu",
+                preventFocus: a === "never"
+            };
+        };
+        var C = a === "normal" || a === "never" ? undefined : S;
+        var I = {
             "data-test": "menu",
-            onKeyDown: H,
-            role: x,
-            tabIndex: R == null && !i ? 0 : undefined
+            onKeyDown: C,
+            role: v
         };
-        return m ?  n().createElement(Ge, Je({}, $, {
-            elementRef: a,
+        return c ?  n().createElement(Xe, Ye({}, I, {
+            elementRef: x,
             stopScrollPropagation: true
-        }, l()(h, "tagName")), F) :  n().createElement(Be, Je({}, $, {
-            ref: a
-        }, h), F);
+        }, l()(u, "tagName")), k) :  n().createElement(Ue, Ye({}, I, {
+            ref: x
+        }, u),  n().createElement(y.Provider, {
+            value: O()
+        }, k));
     }
-    sr.propTypes = or;
-    sr.defaultProps = lr;
-    sr.Item = ze;
-    sr.Divider = x;
-    sr.Heading = N;
-    /* harmony default export */    const cr = sr;
+    rt.propTypes = Ze;
+    rt.Item = Ke;
+    rt.Divider = w;
+    rt.Heading = F;
+    /* harmony default export */    const nt = rt;
     // CONCATENATED MODULE: ./src/Menu/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();