@splunk/react-ui 4.23.0 → 4.25.0

package/Menu.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,38 +56,38 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
+        e.d(r, {
         Divider: () => /* reexport */ x,
-        Heading: () => /* reexport */ H,
+        Heading: () => /* reexport */ N,
         Item: () => /* reexport */ ze,
-        MenuContext: () => /* reexport */ h,
-        default: () => /* reexport */ rt
+        MenuContext: () => /* reexport */ y,
+        default: () => /* reexport */ cr
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var o =  e.n(i);
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const a = require("lodash/omit");
-    var l =  e.n(a);
+    const o = require("lodash/omit");
+    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 p = require("@splunk/ui-utils/keyboard");
+    const u = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
-    const u = require("@splunk/react-ui/useForceUpdate");
-    var d =  e.n(u);
+    const p = require("@splunk/react-ui/useForceUpdate");
+    var f =  e.n(p);
     // CONCATENATED MODULE: external "styled-components"
-    const f = require("styled-components");
-    var v =  e.n(f);
+    const d = require("styled-components");
+    var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
@@ -99,42 +99,42 @@
         prisma: b.variables.neutral200
     }), (0, b.pick)({
         prisma: {
-            comfortable: (0, f.css)([ "margin:8px 0;" ]),
-            compact: (0, f.css)([ "margin:6px 0;" ])
+            comfortable: (0, d.css)([ "margin:8px 0;" ]),
+            compact: (0, d.css)([ "margin:6px 0;" ])
         }
     }));
     // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
-    var h =  (0, r.createContext)({
+    var y =  (0, t.createContext)({
         role: "menu"
     });
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
-    function y() {
-        y = 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];
+    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];
                     }
                 }
             }
             return e;
         };
-        return y.apply(this, arguments);
+        return h.apply(this, arguments);
     }
     var g = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
  */    function k(e) {
-        var t = y({}, e);
+        var r = h({}, e);
         // @docs-props-type DividerPropsBase
-                var i = (0, r.useContext)(h), o = i.role;
+                var i = (0, t.useContext)(y), a = i.role;
         
-        return n().createElement(m, y({
-            "aria-hidden": o === "listbox",
+        return n().createElement(m, h({
+            "aria-hidden": a === "listbox",
             "data-test": "divider",
             role: "separator"
-        }, t));
+        }, r));
     }
     k.propTypes = g;
     /* Remove the item if it is the first item after filtering */    k.filterFirst = true;
@@ -149,76 +149,76 @@
     const O = require("@splunk/themes/useSplunkTheme");
     var C =  e.n(O);
     // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
-    var I = v().div.withConfig({
+    var P = v().div.withConfig({
         displayName: "HeadingStyles__Styled",
         componentId: "mcd2ws-0"
     })([ "", " border-top:1px solid transparent;padding:", ";&:not(:first-child){", ";}" ], b.mixins.reset("block"), (0, 
     b.pick)({
-        enterprise: (0, f.css)([ "", " ", " 6px" ], b.variables.spacingQuarter, b.variables.spacingHalf),
+        enterprise: (0, d.css)([ "", " ", " 6px" ], b.variables.spacingQuarter, b.variables.spacingHalf),
         prisma: {
             comfortable: "13px 16px 10px 16px",
             compact: "9px 16px 6px 16px"
         }
     }), (0, b.pick)({
-        enterprise: (0, f.css)([ "border-top:", ";" ], b.variables.border),
+        enterprise: (0, d.css)([ "border-top:", ";" ], b.variables.border),
         prisma: {
-            comfortable: (0, f.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], b.variables.neutral200),
-            compact: (0, f.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], b.variables.neutral200)
+            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)
         }
     }));
-    var P = v().h5.withConfig({
+    var I = v().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 _(e, t) {
-        var r = Object.keys(e);
+    function j(e, r) {
+        var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            if (t) n = n.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            if (r) n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
             }));
-            r.push.apply(r, n);
+            t.push.apply(t, n);
         }
-        return r;
+        return t;
     }
-    function j(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var r = arguments[t] != null ? arguments[t] : {};
-            if (t % 2) {
-                _(Object(r), true).forEach((function(t) {
-                    E(e, t, r[t]);
+    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]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
             } else {
-                _(Object(r)).forEach((function(t) {
-                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+                j(Object(t)).forEach((function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
                 }));
             }
         }
         return e;
     }
-    function E(e, t, r) {
-        if (t in e) {
-            Object.defineProperty(e, t, {
-                value: r,
+    function _(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = r;
+            e[r] = t;
         }
         return e;
     }
     function T() {
         T = 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];
+            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];
                     }
                 }
             }
@@ -226,92 +226,92 @@
         };
         return T.apply(this, arguments);
     }
-    function D(e, t) {
+    function R(e, r) {
         if (e == null) return {};
-        var r = R(e, t);
+        var t = D(e, r);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
-                if (t.indexOf(n) >= 0) continue;
+            var a = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < a.length; i++) {
+                n = a[i];
+                if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    function R(e, t) {
+    function D(e, r) {
         if (e == null) return {};
-        var r = {};
+        var t = {};
         var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
-            if (t.indexOf(i) >= 0) continue;
-            r[i] = e[i];
+        var i, a;
+        for (a = 0; a < n.length; a++) {
+            i = n[a];
+            if (r.indexOf(i) >= 0) continue;
+            t[i] = e[i];
         }
-        return r;
+        return t;
     }
     var q = {
-        children: o().node,
-        title: o().bool,
-        outerStyle: o().object
+        children: a().node,
+        title: a().bool,
+        outerStyle: a().object
     };
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
- */    function N(e) {
-        var t = e.children, i = e.title, o = e.outerStyle, a = D(e, [ "children", "title", "outerStyle" ]);
-        var l = (0, r.useContext)(h), s = l.role;
-        var c = C()(), p = c.family;
-        var u = p === "prisma" ?  n().createElement(P, T({
+ */    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: o,
+            style: a,
             "data-test": "heading"
-        }, a), t) :  n().createElement(S(), T({
-            style: j(j({}, o), {}, {
+        }, o), r) :  n().createElement(S(), T({
+            style: E(E({}, a), {}, {
                 margin: 0
             }),
             level: i ? 4 : "ss",
             "data-test": "heading"
-        }, a), t);
+        }, o), r);
  // 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
         // so we set them to aria-hidden to prevent that
                 
-        return n().createElement(I, {
+        return n().createElement(P, {
             "aria-hidden": s === "listbox"
-        }, u);
+        }, p);
     }
-    N.propTypes = q;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    N.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    N.filterLast = true;
-    /* Tag the item as a Heading */    N.as = "Heading";
-    /* harmony default export */    const H = N;
+    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;
     // CONCATENATED MODULE: external "lodash/isString"
-    const F = require("lodash/isString");
-    var $ =  e.n(F);
+    const H = require("lodash/isString");
+    var A =  e.n(H);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const A = require("@splunk/react-icons/ChevronRight");
-    var M =  e.n(A);
+    const F = require("@splunk/react-icons/ChevronRight");
+    var $ =  e.n(F);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const K = require("@splunk/react-icons/Checkmark");
-    var z =  e.n(K);
+    const M = require("@splunk/react-icons/Checkmark");
+    var z =  e.n(M);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
     const L = require("@splunk/react-icons/enterprise/Check");
-    var W =  e.n(L);
+    var U =  e.n(L);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const B = require("@splunk/react-icons/enterprise/ChevronRight");
-    var G =  e.n(B);
+    const W = require("@splunk/react-icons/enterprise/ChevronRight");
+    var B =  e.n(W);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const U = require("@splunk/react-ui/Clickable");
-    var V =  e.n(U);
+    const G = require("@splunk/react-ui/Clickable");
+    var V =  e.n(G);
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
     const Q = require("@splunk/react-ui/Switch");
     var Y =  e.n(Q);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
-    var J = (0, f.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0, 
+    var J = (0, d.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
@@ -330,13 +330,13 @@
         displayName: "ItemStyles__StyledItemSelectedIcon",
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, b.pick)({
-        prisma: (0, f.css)([ "right:16px;" ]),
-        enterprise: (0, f.css)([ "top:5px;right:3px;left:8px;" ])
+        prisma: (0, d.css)([ "right:16px;" ]),
+        enterprise: (0, d.css)([ "top:5px;right:3px;left:8px;" ])
     }), (0, b.pick)({
         prisma: b.variables.contentColorActive,
         enterprise: b.variables.accentColorL10
     }));
-    var te = v().span.withConfig({
+    var re = v().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,10 +347,10 @@
         prisma: "initial",
         enterprise: "middle"
     }), (0, b.pick)({
-        prisma: (0, f.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], b.variables.contentColorMuted),
-        enterprise: (0, f.css)([ "transform:translateY(-1px);" ])
+        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);" ])
     }));
-    var re = v()(V()).withConfig({
+    var te = v()(V()).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, 
@@ -367,21 +367,21 @@
         },
         enterprise: "6px 10px"
     }), (function(e) {
-        var t = e.$isSelectable, r = e.$selectableAppearance;
-        return t && (0, b.pick)({
-            prisma: (0, f.css)([ "padding-right:44px;", "" ], (function() {
-                return r === "checkbox" && "padding-left: 42px;";
+        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;";
             })),
-            enterprise: (0, f.css)([ "padding-right:10px;padding-left:", ";" ], (function() {
-                return r === "checkbox" ? "32px" : "28px";
+            enterprise: (0, d.css)([ "padding-right:10px;padding-left:", ";" ], (function() {
+                return t === "checkbox" ? "32px" : "28px";
             }))
         });
     }), (function(e) {
-        var t = e.$active, r = e.$preventFocus;
-        return t && !r && (0, f.css)([ "box-shadow:", ";" ], b.variables.focusShadowInset);
+        var r = e.$active, t = e.$preventFocus;
+        return r && !t && (0, d.css)([ "box-shadow:", ";" ], b.variables.focusShadowInset);
     }), (function(e) {
-        var t = e.$active;
-        return t && (0, f.css)([ "background:", ";font-weight:", ";" ], (0, b.pick)({
+        var r = e.$active;
+        return r && (0, d.css)([ "background:", ";font-weight:", ";" ], (0, b.pick)({
             enterprise: {
                 light: b.variables.gray92,
                 dark: b.variables.gray22
@@ -392,18 +392,18 @@
         prisma: b.variables.interactiveColorOverlayHover,
         enterprise: b.variables.backgroundColorHover
     }), (function(e) {
-        var t = e.$selected;
-        return t && (0, b.pick)({
-            prisma: (0, f.css)([ "background:", ";" ], b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayHover))
+        var r = e.$selected;
+        return r && (0, b.pick)({
+            prisma: (0, d.css)([ "background:", ";" ], b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayHover))
         });
     }), b.variables.focusShadowInset, (0, b.pick)({
-        prisma: (0, f.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
+        prisma: (0, d.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
     }), (0, b.pick)({
-        prisma: (0, f.css)([ "&:active{background:", ";}" ], b.variables.interactiveColorOverlayActive)
+        prisma: (0, d.css)([ "&:active{background:", ";}" ], b.variables.interactiveColorOverlayActive)
     }), (function(e) {
-        var t = e.$selected;
-        return t && (0, b.pick)({
-            prisma: (0, f.css)([ "background:", ";&:active{background:", ";}" ], b.variables.interactiveColorOverlaySelected, b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayActive))
+        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))
         });
     }), (0, b.pick)({
         enterprise: {
@@ -421,15 +421,15 @@
         prisma: b.variables.contentColorDisabled,
         enterprise: b.variables.gray80
     }), (0, b.pick)({
-        prisma: (0, f.css)([ "& > * > ", "{color:", ";}" ], 
+        prisma: (0, d.css)([ "& > * > ", "{color:", ";}" ], 
         /* sc-sel */
-        te, b.variables.contentColorDisabled)
+        re, b.variables.contentColorDisabled)
     }), (function(e) {
-        var t = e.$selected;
-        return t && (0, b.pick)({
-            prisma: (0, f.css)([ "", "{color:", ";}" ], 
+        var r = e.$selected;
+        return r && (0, b.pick)({
+            prisma: (0, d.css)([ "", "{color:", ";}" ], 
             /* sc-sel */
-            te, b.variables.contentColorActive)
+            re, b.variables.contentColorActive)
         });
     }));
     var ne = v()(Y()).withConfig({
@@ -449,19 +449,19 @@
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var oe = v().span.withConfig({
+    var ae = v().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
     })([ "max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
-        var t = e.$truncate;
-        return t && (0, f.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
+        var r = e.$truncate;
+        return r && (0, d.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var ae = v().div.withConfig({
+    var oe = v().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 t = e.$truncate;
-        return t && (0, f.css)([ "display:block;clear:both;" ]);
+        var r = e.$truncate;
+        return r && (0, d.css)([ "display:block;clear:both;" ]);
     }));
     var le = v().span.withConfig({
         displayName: "ItemStyles__StyledMatch",
@@ -481,39 +481,39 @@
         prisma: "inherit",
         enterprise: b.variables.textGray
     }), (0, b.pick)({
-        prisma: (0, f.css)([ "& > svg{width:20px;height:20px;}" ])
+        prisma: (0, d.css)([ "& > svg{width:20px;height:20px;}" ])
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
     const ce = require("@splunk/react-icons/ArrowSquareTopRight");
-    var pe =  e.n(ce);
+    var ue =  e.n(ce);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const ue = require("@splunk/react-icons/enterprise/External");
-    var de =  e.n(ue);
+    const pe = require("@splunk/react-icons/enterprise/External");
+    var fe =  e.n(pe);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const fe = require("@splunk/ui-utils/i18n");
+    const de = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Menu/icons/External.tsx
-    var ve = (0, fe._)("Open externally");
-    var be = (0, f.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
-    var me = v()(de()).withConfig({
+    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({
         displayName: "External__StyledEnterprise",
         componentId: "sc-1turs2s-0"
     })([ "", " margin:0 0 0 3px;" ], be);
-    var he = v()(pe()).withConfig({
+    var ye = v()(ue()).withConfig({
         displayName: "External__StyledPrisma",
         componentId: "sc-1turs2s-1"
     })([ "", " margin:0 0 0 4px;" ], be);
-    function ye() {
-        var e = (0, b.useSplunkTheme)(), t = e.isEnterprise, r = e.isCompact;
-        var i = r ? "20px" : "24px";
-        return t ?  n().createElement(me, {
+    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
-        }) :  n().createElement(he, {
+        }) :  n().createElement(ye, {
             "aria-label": ve,
             height: i,
             width: i
         },  n().createElement("title", null, ve));
     }
-    /* harmony default export */    const ge = ye;
+    /* harmony default export */    const ge = he;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -521,57 +521,57 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function ke(e, t) {
+    function ke(e, r) {
         if (e) {
             if (typeof e === "function") {
-                e(t);
+                e(r);
             } 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 = t;
+                e.current = r;
  // 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(t) {
-        if (!t) {
+    var xe = function e(r) {
+        if (!r) {
             return;
         }
-        var r = t.offsetParent;
-        if (!r) {
+        var t = r.offsetParent;
+        if (!t) {
             return;
         }
  // Below the bottom of the container.
-                if (r.scrollTop + r.clientHeight < t.offsetTop + t.clientHeight) {
-            r.scrollTop = t.offsetTop + t.clientHeight - r.clientHeight;
+                if (t.scrollTop + t.clientHeight < r.offsetTop + r.clientHeight) {
+            t.scrollTop = r.offsetTop + r.clientHeight - t.clientHeight;
  // Above the top of the container.
-                } else if (r.scrollTop > t.offsetTop) {
-            r.scrollTop = t.offsetTop;
+                } else if (t.scrollTop > r.offsetTop) {
+            t.scrollTop = r.offsetTop;
         }
     };
     // CONCATENATED MODULE: ./src/Menu/Item.tsx
     function we(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            we = function e(t) {
-                return typeof t;
+            we = function e(r) {
+                return typeof r;
             };
         } else {
-            we = function e(t) {
-                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            we = function e(r) {
+                return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
             };
         }
         return we(e);
     }
     function Se() {
         Se = 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];
+            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];
                     }
                 }
             }
@@ -579,92 +579,92 @@
         };
         return Se.apply(this, arguments);
     }
-    function Oe(e, t) {
+    function Oe(e, r) {
         if (e == null) return {};
-        var r = Ce(e, t);
+        var t = Ce(e, r);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
-                if (t.indexOf(n) >= 0) continue;
+            var a = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < a.length; i++) {
+                n = a[i];
+                if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    function Ce(e, t) {
+    function Ce(e, r) {
         if (e == null) return {};
-        var r = {};
+        var t = {};
         var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
-            if (t.indexOf(i) >= 0) continue;
-            r[i] = e[i];
+        var i, a;
+        for (a = 0; a < n.length; a++) {
+            i = n[a];
+            if (r.indexOf(i) >= 0) continue;
+            t[i] = e[i];
         }
-        return r;
+        return t;
     }
-    function Ie(e, t) {
-        if (!(e instanceof t)) {
+    function Pe(e, r) {
+        if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function Pe(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
+    function Ie(e, r) {
+        for (var t = 0; t < r.length; t++) {
+            var n = r[t];
             n.enumerable = n.enumerable || false;
             n.configurable = true;
             if ("value" in n) n.writable = true;
             Object.defineProperty(e, n.key, n);
         }
     }
-    function _e(e, t, r) {
-        if (t) Pe(e.prototype, t);
-        if (r) Pe(e, r);
+    function je(e, r, t) {
+        if (r) Ie(e.prototype, r);
+        if (t) Ie(e, t);
         return e;
     }
-    function je(e, t) {
-        if (typeof t !== "function" && t !== null) {
+    function Ee(e, r) {
+        if (typeof r !== "function" && r !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
-        e.prototype = Object.create(t && t.prototype, {
+        e.prototype = Object.create(r && r.prototype, {
             constructor: {
                 value: e,
                 writable: true,
                 configurable: true
             }
         });
-        if (t) Ee(e, t);
+        if (r) _e(e, r);
     }
-    function Ee(e, t) {
-        Ee = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
-            return t;
+    function _e(e, r) {
+        _e = Object.setPrototypeOf || function e(r, t) {
+            r.__proto__ = t;
+            return r;
         };
-        return Ee(e, t);
+        return _e(e, r);
     }
     function Te(e) {
-        var t = qe();
-        return function r() {
-            var n = Ne(e), i;
-            if (t) {
-                var o = Ne(this).constructor;
-                i = Reflect.construct(n, arguments, o);
+        var r = qe();
+        return function t() {
+            var n = Ke(e), i;
+            if (r) {
+                var a = Ke(this).constructor;
+                i = Reflect.construct(n, arguments, a);
             } else {
                 i = n.apply(this, arguments);
             }
-            return De(this, i);
+            return Re(this, i);
         };
     }
-    function De(e, t) {
-        if (t && (we(t) === "object" || typeof t === "function")) {
-            return t;
+    function Re(e, r) {
+        if (r && (we(r) === "object" || typeof r === "function")) {
+            return r;
         }
-        return Re(e);
+        return De(e);
     }
-    function Re(e) {
+    function De(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -681,56 +681,56 @@
             return false;
         }
     }
-    function Ne(e) {
-        Ne = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
-            return t.__proto__ || Object.getPrototypeOf(t);
+    function Ke(e) {
+        Ke = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+            return r.__proto__ || Object.getPrototypeOf(r);
         };
-        return Ne(e);
+        return Ke(e);
     }
-    function He(e, t, r) {
-        if (t in e) {
-            Object.defineProperty(e, t, {
-                value: r,
+    function Ne(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = r;
+            e[r] = t;
         }
         return e;
     }
-    var Fe = {
-        active: o().bool,
-        children: o().node,
-        description: o().string,
-        descriptionPosition: o().oneOf([ "right", "bottom" ]),
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        hasSubmenu: o().bool,
-        icon: o().node,
+    var He = {
+        active: a().bool,
+        children: a().node,
+        description: a().string,
+        descriptionPosition: a().oneOf([ "right", "bottom" ]),
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        hasSubmenu: a().bool,
+        icon: a().node,
         /** @private. The internal key of the tab */
-        itemKey: o().number,
-        matchRanges: o().arrayOf(o().shape({
-            start: o().number.isRequired,
-            end: o().number.isRequired
+        itemKey: a().number,
+        matchRanges: a().arrayOf(a().shape({
+            start: a().number.isRequired,
+            end: a().number.isRequired
         })),
-        onClick: o().func,
+        onClick: a().func,
         /** @private */
-        onFocus: o().func,
-        openInNewContext: o().bool,
+        onFocus: a().func,
+        openInNewContext: a().bool,
         /** @private */
-        preventFocus: o().bool,
-        role: o().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
-        selectable: o().bool,
-        selectableAppearance: o().oneOf([ "checkmark", "checkbox" ]),
-        selected: o().bool,
+        preventFocus: a().bool,
+        role: a().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
+        selectable: a().bool,
+        selectableAppearance: a().oneOf([ "checkmark", "checkbox" ]),
+        selected: a().bool,
         /** @private */
-        splunkTheme: o().object,
-        to: o().string,
-        truncate: o().bool
+        splunkTheme: a().object,
+        to: a().string,
+        truncate: a().bool
     };
-    var $e = {
+    var Ae = {
         active: false,
         descriptionPosition: "bottom",
         disabled: false,
@@ -742,44 +742,44 @@
         selected: false,
         truncate: false
     };
-    var Ae =  function(e) {
-        je(r, e);
-        var t = Te(r);
-        _e(r, null, [ {
+    var Fe =  function(e) {
+        Ee(t, e);
+        var r = Te(t);
+        je(t, null, [ {
             key: "validateProps",
             // @docs-props-type ItemPropsBase
-            value: function e(t) {
+            value: function e(r) {
                 if (false) {}
             }
         } ]);
-        function r(e) {
+        function t(e) {
             var n;
-            Ie(this, r);
-            n = t.call(this, e);
-            He(Re(n), "el", null);
-            He(Re(n), "handleFocus", (function(e) {
-                var t = n.props, r = t.onFocus, i = t.itemKey;
-                r === null || r === void 0 ? void 0 : r(e, {
+            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, {
                     itemKey: i
                 });
             }));
-            He(Re(n), "handleMount", (function(e) {
+            Ne(De(n), "handleMount", (function(e) {
                 n.el = e;
                 ke(n.props.elementRef, e);
             }));
-            r.validateProps(e);
+            t.validateProps(e);
             return n;
         }
-        _e(r, [ {
+        je(t, [ {
             key: "componentDidUpdate",
             value: function e() {
-                r.validateProps(this.props);
+                t.validateProps(this.props);
             }
         }, {
             key: "focus",
             value: function e() {
-                var t;
-                (t = this.el) === null || t === void 0 ? void 0 : t.focus();
+                var r;
+                (r = this.el) === null || r === void 0 ? void 0 : r.focus();
             }
         }, {
             key: "scrollIntoViewIfNeeded",
@@ -789,121 +789,121 @@
         }, {
             key: "renderLabel",
             value: function e() {
-                var t = this.props, r = t.children, i = t.matchRanges;
-                if (!i || !$()(r)) {
-                    return r;
+                var r = this.props, t = r.children, i = r.matchRanges;
+                if (!i || !A()(t)) {
+                    return t;
                 }
-                var o = [];
+                var a = [];
  // before first match. May be empty string.
-                                o.push(r.substring(0, i[0].start));
-                i.forEach((function(e, t) {
-                    o.push(
+                                a.push(t.substring(0, i[0].start));
+                i.forEach((function(e, r) {
+                    a.push(
                     
                     // eslint-disable-next-line react/no-array-index-key
                     n().createElement(le, {
-                        key: t,
+                        key: r,
                         "data-test": "match"
-                    }, r.substring(e.start, e.end)));
-                    if (t < i.length - 1) {
-                        o.push(r.substring(e.end, i[t + 1].start));
+                    }, t.substring(e.start, e.end)));
+                    if (r < i.length - 1) {
+                        a.push(t.substring(e.end, i[r + 1].start));
                     } else {
-                        o.push(r.substring(e.end, r.length));
+                        a.push(t.substring(e.end, t.length));
                     }
                 }));
-                return o;
+                return a;
             }
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.active, i = t.children, o = t.hasSubmenu, a = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, d = t.disabled, f = t.onClick, v = t.preventFocus, b = t.role, m = t.splunkTheme, h = t.to, y = t.truncate, g = t.descriptionPosition, k = t.openInNewContext, x = Oe(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
+                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 O = a || c;
+                var O = o || c;
                 var C = {
                     nonselectable: "menuitem",
                     checkmark: "menuitemradio",
                     checkbox: "menuitemcheckbox"
                 }[O ? s : "nonselectable"];
  // aria-checked updates only with checkmark appearance for now SUI-2578
-                                var I = {
-                    "aria-haspopup": o ? true : undefined,
+                                var P = {
+                    "aria-haspopup": a ? true : undefined,
                     "aria-checked": s === "checkmark" && c ? true : undefined
                 };
-                var P = S ? "right" : "left";
-                var _ = u && g === "right" && P !== "right";
-                var j = u && !_;
-                var E = c && s === "checkmark" &&  n().createElement(ee, null, S ?  n().createElement(z(), {
+                var I = S ? "right" : "left";
+                var j = p && g === "right" && I !== "right";
+                var E = p && !j;
+                var _ = c && s === "checkmark" &&  n().createElement(ee, null, S ?  n().createElement(z(), {
                     inline: true,
                     height: "16",
                     width: "16"
-                }) :  n().createElement(W(), {
+                }) :  n().createElement(U(), {
                     hideDefaultTooltip: true,
                     inline: true,
                     screenReaderText: null,
                     size: .85
                 }));
                 
-                return n().createElement(re, Se({
+                return n().createElement(te, Se({
                     $isSelectable: O,
                     $selectableAppearance: s,
                     $selected: c,
-                    $active: r,
+                    $active: t,
                     $preventFocus: v,
                     "data-test-selected": O ? c : null,
                     "data-test": "item",
-                    "data-has-icon": !!p,
-                    disabled: d,
-                    onClick: f,
+                    "data-has-icon": !!u,
+                    disabled: f,
+                    onClick: d,
                     onFocus: this.handleFocus,
-                    onMouseDown: function e(t) {
+                    onMouseDown: function e(r) {
                         if (v) {
-                            t.preventDefault();
+                            r.preventDefault();
                         }
                     },
                     role: b || C,
-                    to: h,
-                    title: y && $()(i) ? i : undefined,
+                    to: y,
+                    title: h && A()(i) ? i : undefined,
                     openInNewContext: k
-                }, I, l()(x, "onFocus"), {
+                }, P, l()(x, "onFocus"), {
                     elementRef: this.handleMount
-                }), P === "left" && E, a && s === "checkbox" &&  n().createElement(ne, {
+                }), I === "left" && _, o && s === "checkbox" &&  n().createElement(ne, {
                     interactive: false,
                     selected: c,
                     selectedLabel: "Selected",
                     value: "menu-item"
-                }), o &&  n().createElement(se, null, w ?  n().createElement(G(), {
+                }), a &&  n().createElement(se, null, w ?  n().createElement(B(), {
                     hideDefaultTooltip: true,
                     screenReaderText: null
-                }) :  n().createElement(M(), null)), _ &&  n().createElement(Z, {
+                }) :  n().createElement($(), null)), j &&  n().createElement(Z, {
                     "data-test": "description"
-                }, u),  n().createElement(ie, null, p &&  n().createElement(te, null, p),  n().createElement(oe, {
-                    $truncate: y
-                },  n().createElement(ae, {
-                    $truncate: y,
+                }, p),  n().createElement(ie, null, u &&  n().createElement(re, null, u),  n().createElement(ae, {
+                    $truncate: h
+                },  n().createElement(oe, {
+                    $truncate: h,
                     "data-test": "label"
-                }, this.renderLabel(), k &&  n().createElement(ge, null)), j &&  n().createElement(X, {
+                }, this.renderLabel(), k &&  n().createElement(ge, null)), E &&  n().createElement(X, {
                     "data-test": "description"
-                }, u)), P === "right" && E));
+                }, p)), I === "right" && _));
             }
         } ]);
-        return r;
-    }(r.Component);
-    He(Ae, "propTypes", Fe);
-    He(Ae, "defaultProps", $e);
-    He(Ae, "as", void 0);
-    var Me = (0, b.withSplunkTheme)(Ae);
-    var Ke = Me;
-    Ke.propTypes = Ae.propTypes;
-    Ke.as = "Item";
-    /* harmony default export */    const ze = Ke;
+        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;
     // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
     const Le = require("@splunk/react-ui/Scroll");
-    var We =  e.n(Le);
+    var Ue =  e.n(Le);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var Be = (0, f.css)([ "border-top:1px solid ", ";" ], (0, b.pick)({
+    var We = (0, d.css)([ "border-top:1px solid ", ";" ], (0, b.pick)({
         enterprise: b.variables.gray60,
         prisma: b.variables.neutral200
     }));
-    var Ge = v().div.withConfig({
+    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, 
@@ -911,220 +911,391 @@
         enterprise: b.variables.backgroundColor,
         prisma: b.variables.backgroundColorPopup
     }), b.variables.borderRadius, (0, b.pick)({
-        prisma: (0, f.css)([ "padding:8px 0;" ])
+        prisma: (0, d.css)([ "padding:8px 0;" ])
     }), b.variables.focusShadowInset, (0, b.pick)({
-        prisma: (0, f.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
-    }), Be);
-    var Ue = v()(Ge.withComponent(We())).withConfig({
+        prisma: (0, d.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
+    }), We);
+    var Ge = v()(Be.withComponent(Ue())).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
     })([ "", " + &,& + ", "{", "}" ], 
     /* sc-sel */
-    Ge, 
+    Be, 
     /* sc-sel */
-    Ge, Be);
+    Be, We);
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
-    function Ve(e, t, r) {
+    function Ve(e, r, t) {
         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 + t) % e.length;
+            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[a];
             }
         }
-        return e[t];
+        return e[r];
     }
-    function Qe(e, t, r) {
+    function Qe(e, r, t) {
         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 + t) % e.length;
+            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[a];
             }
         }
-        return e[t];
+        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;
+    };
     // CONCATENATED MODULE: ./src/Menu/Menu.tsx
-    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];
+    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];
                     }
                 }
             }
             return e;
         };
-        return Ye.apply(this, arguments);
+        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);
+    }
+    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 Je(e, t) {
+    function nr(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function ir(e, r) {
         if (e == null) return {};
-        var r = Xe(e, t);
+        var t = ar(e, r);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < o.length; i++) {
-                n = o[i];
-                if (t.indexOf(n) >= 0) continue;
+            var a = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < a.length; i++) {
+                n = a[i];
+                if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                r[n] = e[n];
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    function Xe(e, t) {
+    function ar(e, r) {
         if (e == null) return {};
-        var r = {};
+        var t = {};
         var n = Object.keys(e);
-        var i, o;
-        for (o = 0; o < n.length; o++) {
-            i = n[o];
-            if (t.indexOf(i) >= 0) continue;
-            r[i] = e[i];
+        var i, a;
+        for (a = 0; a < n.length; a++) {
+            i = n[a];
+            if (r.indexOf(i) >= 0) continue;
+            t[i] = e[i];
         }
-        return r;
+        return t;
     }
-    var Ze = {
-        children: o().node,
+    var or = {
+        children: a().node,
+        /** @private */
+        controlledExternally: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        /** @private */
+        onDownKeyPress: a().func,
         /** @private */
-        controlledExternally: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        retainFocus: o().bool,
-        stopScrollPropagation: o().bool
+        onEndKeyPress: a().func,
+        /** @private */
+        onHomeKeyPress: a().func,
+        /** @private */
+        onUpKeyPress: a().func,
+        retainFocus: a().bool,
+        stopScrollPropagation: a().bool
     };
-    var et = {
+    var lr = {
         stopScrollPropagation: false
     };
-    function tt(e) {
-        var t = e.children, i = e.controlledExternally, o = e.elementRef, a = e.retainFocus, u = e.stopScrollPropagation, f = Je(e, [ "children", "controlledExternally", "elementRef", "retainFocus", "stopScrollPropagation" ]);
+    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" ]);
         // @docs-props-type MenuPropsBase
-                var v = (0, r.useContext)(h), b = v.role, m = b === void 0 ? "menu" : b;
-        var y = (0, r.useContext)(s.PopoverContext), g = y.retainFocus;
-        var k = d()();
-        var x = true;
-        if (a != null) {
-            x = a;
-        } else if (g != null) {
-            x = g;
+                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;
         }
-        var w = n().useRef(0);
-        var S = [];
-        var O = 0;
-        var C;
-        var I = false;
-        var P = false;
-        var _ = false;
-        var j = function e(t) {
+        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 r = (0, p.keycode)(t.nativeEvent);
-            var n = w.current;
+            var t = (0, u.keycode)(r.nativeEvent);
+            var n = P.current;
             var i;
  // the "retainFocus" checks here mimic the prior tab key functionality
-                        if (r === "down" || x && (0, c.isTabKey)(t)) {
-                i = Ve(S, n, n + 1);
-            } else if (r === "up" || x && (0, c.isTabKey)(t) && t.shiftKey) {
-                i = Qe(S, n, n - 1);
-            } else if (r === "home") {
-                i = Ve(S, n, 0);
-            } else if (r === "end") {
-                i = Qe(S, n, S.length - 1);
+                        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 o, a;
-                (o = i.current) === null || o === void 0 ? void 0 : (a = o.focus) === null || a === void 0 ? void 0 : a.call(o);
-                t.preventDefault();
+                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 E = (0, r.useCallback)((function(e, t) {
-            var r = t.itemKey;
-            if (r != null) {
-                w.current = r;
+        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 T = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, o) {
+        var F = t.Children.toArray(r).filter(t.isValidElement).reduce((function(e, r, t, a) {
             /* Filter out initial Dividers
      * Requires reduce() over filter() because a Heading may have been
      * before the Divider.
      */
-            if (t.type.as === "Divider" && e.length === 0) {
+            if (r.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 ((t.type.as === "Heading" || t.type.as === "Divider") && !t.props.title && t.type.filterConsecutive && o.length > r + 1) {
-                var a = o[r + 1];
-                if (a.type.as === "Heading" || a.type.as === "Divider") {
+                        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") {
                     return e;
                 }
             }
  // Filter out last Dividers and Headings
-                        if ((t.type.as === "Divider" || t.type.as === "Heading") && r === o.length - 1) {
+                        if ((r.type.as === "Divider" || r.type.as === "Heading") && t === a.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 (!(t.type.as === "Divider" || t.type.as === "Heading") && typeof t.type !== "string") {
+                        if (!(r.type.as === "Divider" || r.type.as === "Heading") && typeof r.type !== "string") {
                 var l =  n().createRef();
-                S.push(l);
-                if (C == null && (!("disabled" in t.props) || !t.props.disabled)) {
-                    C = O;
+                var s = I.length;
+                I.push(l);
+                if (R == null && (!("disabled" in r.props) || !r.props.disabled)) {
+                    R = T;
                 }
-                if (w.current === O && "disabled" in t.props && t.props.disabled) {
-                    I = true;
+                if (P.current === T && "disabled" in r.props && r.props.disabled) {
+                    D = true;
                 }
-                if ("selected" in t.props && t.props.selected) {
-                    P = true;
-                    if ("disabled" in t.props && !t.props.disabled) {
-                        _ = true;
+                if ("selected" in r.props && r.props.selected) {
+                    q = true;
+                    if ("disabled" in r.props && !r.props.disabled) {
+                        K = true;
                     }
                 }
-                var s = !i && w.current === O ? undefined : -1;
-                e.push( n().cloneElement(t, {
-                    itemKey: O,
-                    onFocus: E,
+                var c = !i && P.current === T ? undefined : -1;
+                e.push( n().cloneElement(r, {
+                    itemKey: T,
+                    onFocus: A,
                     preventFocus: i,
-                    ref: function e(r) {
-                        ke(t.ref, r);
-                        ke(l, r);
+                    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: s
+                    tabIndex: c
                 }));
-                O += 1;
+                T += 1;
                 return e;
             }
-            e.push(t);
+            e.push(r);
             return e;
         }), []);
-        if (C !== w.current && (!P || _) && I && C != null) {
-            w.current = C;
-            k();
+        if (R !== P.current && (!q || K) && D && R != null) {
+            P.current = R;
+            O();
         }
-        var D = {
+        var $ = {
             "data-test": "menu",
-            onKeyDown: j,
-            role: m,
-            tabIndex: C == null && !i ? 0 : undefined
+            onKeyDown: H,
+            role: x,
+            tabIndex: R == null && !i ? 0 : undefined
         };
-        return u ?  n().createElement(Ue, Ye({}, D, {
-            elementRef: o,
+        return m ?  n().createElement(Ge, Je({}, $, {
+            elementRef: a,
             stopScrollPropagation: true
-        }, l()(f, "tagName")), T) :  n().createElement(Ge, Ye({}, D, {
-            ref: o
-        }, f), T);
+        }, l()(h, "tagName")), F) :  n().createElement(Be, Je({}, $, {
+            ref: a
+        }, h), F);
     }
-    tt.propTypes = Ze;
-    tt.defaultProps = et;
-    tt.Item = ze;
-    tt.Divider = x;
-    tt.Heading = H;
-    /* harmony default export */    const rt = tt;
+    sr.propTypes = or;
+    sr.defaultProps = lr;
+    sr.Item = ze;
+    sr.Divider = x;
+    sr.Heading = N;
+    /* harmony default export */    const cr = sr;
     // CONCATENATED MODULE: ./src/Menu/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();