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

package/Menu.js

@@ -61,54 +61,130 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Divider: () => /* reexport */ w,
-        Heading: () => /* reexport */ M,
-        Item: () => /* reexport */ Ye,
-        MenuContext: () => /* reexport */ h,
-        default: () => /* reexport */ pt
+        Divider: () => /* reexport */ H,
+        Heading: () => /* reexport */ ee,
+        Item: () => /* reexport */ we,
+        MenuContext: () => /* reexport */ A,
+        default: () => /* reexport */ Te
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
-    const a = require("lodash/omit");
-    var l =  e.n(a);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const s = require("@splunk/react-ui/Popover");
+    const i = require("lodash/omit");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const c = require("@splunk/ui-utils/keyboard");
+    const s = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const p = require("@splunk/ui-utils/focus");
+    const c = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "styled-components"
     const u = require("styled-components");
     var d =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const f = require("@splunk/react-ui/Divider");
-    var v =  e.n(f);
+    const v = require("@splunk/react-ui/Divider");
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
+    const f = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const m = require("@splunk/react-ui/Clickable");
+    var b =  e.n(m);
+    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
+    const y = require("@splunk/react-ui/NonInteractiveCheckbox");
+    var g =  e.n(y);
+    // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
+    var h = (0, u.css)([ "", " overflow:inherit;white-space:inherit;text-overflow:inherit;" ], f.mixins.typography("smallBody"));
+    var S = d().div.withConfig({
+        displayName: "ItemStyles__StyledItemDescriptionBottom",
+        componentId: "sc-4kc053-0"
+    })([ "", ";" ], h);
+    var w = d().span.withConfig({
+        displayName: "ItemStyles__StyledItemDescriptionRight",
+        componentId: "sc-4kc053-1"
+    })([ "", ";display:flex;align-self:flex-start;align-items:center;float:right;padding-left:", ";max-width:50%;min-height:20px;text-align:right;" ], h, f.variables.spacingLarge);
+    var k = (0, u.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], f.mixins.reset("inline-flex"));
+    var O = d().div.withConfig({
+        displayName: "ItemStyles__StyledItemSelectedAdornment",
+        componentId: "sc-4kc053-2"
+    })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], k, f.variables.spacingLarge, f.variables.contentColorActive);
+    var C = d().span.withConfig({
+        displayName: "ItemStyles__StyledItemAdornment",
+        componentId: "sc-4kc053-3"
+    })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], k, (function(e) {
+        var t = e.endAdornment;
+        return t && (0, u.css)([ "padding-left:", ";" ], f.variables.spacingSmall);
+    }), f.variables.spacingSmall, f.variables.contentColorMuted);
+    var x = d()(g()).withConfig({
+        displayName: "ItemStyles__StyledNonInteractiveCheckbox",
+        componentId: "sc-4kc053-4"
+    })([ "padding-right:", ";" ], f.variables.spacingSmall);
+    var I = d()(b()).withConfig({
+        displayName: "ItemStyles__StyledClickable",
+        componentId: "sc-4kc053-5"
+    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;min-height:", ";padding:", " ", ";line-height:20px;", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}&:active{background:", ";}", "}&:focus{outline:0;box-shadow:", ";background:", ";}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", ",", ",", "{color:", ";}}" ], f.variables.contentColorActive, f.variables.inputHeight, f.variables.spacingXSmall, f.variables.spacingLarge, (function(e) {
+        var t = e.$active, r = e.$preventFocus;
+        return t && !r && (0, u.css)([ "box-shadow:", ";" ], f.variables.focusShadowInset);
+    }), (function(e) {
+        var t = e.$active;
+        return t && (0, u.css)([ "background:", ";font-weight:", ";" ], f.variables.neutral100, f.variables.fontWeightBold);
+    }), (function(e) {
+        var t = e.$isSelectable, r = e.$selectableAppearance, n = e.$selected;
+        return t && !n && r === "checkmark" && // Adds whitespace to right to reserve space for checkmark for selectable Items
+        // spacingLarge x 3 = padding-left + icon size + padding-right
+        (0, u.css)([ "padding-right:calc(", " * 3);" ], f.variables.spacingLarge);
+    }), f.variables.interactiveColorOverlayHover, (function(e) {
+        var t = e.$selected;
+        return t && (0, u.css)([ "background:", ";" ], f.mixins.overlayColors(f.variables.interactiveColorOverlaySelected, f.variables.interactiveColorOverlayHover));
+    }), f.variables.interactiveColorOverlayActive, (function(e) {
+        var t = e.$selected;
+        return t && (0, u.css)([ "background:", ";font-weight:", ";" ], f.variables.interactiveColorOverlaySelected, f.variables.fontWeightSemiBold);
+    }), f.variables.focusShadowInset, f.variables.interactiveColorOverlayHover, f.variables.contentColorDisabled, /* sc-sel */ S, /* sc-sel */ w, /* sc-sel */ O, /* sc-sel */ C, f.variables.contentColorDisabled);
+    var E = d().span.withConfig({
+        displayName: "ItemStyles__StyledInnerWrapper",
+        componentId: "sc-4kc053-6"
+    })([ "display:flex;align-items:flex-start;" ]);
+    var _ = d().div.withConfig({
+        displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
+        componentId: "sc-4kc053-7"
+    })([ "display:flex;flex:1;width:100%;align-self:flex-start;word-break:break-word;white-space:normal;", " ", "" ], (function(e) {
+        var t = e.$descriptionBottom;
+        return t && (0, u.css)([ "flex-direction:column;" ]);
+    }), (function(e) {
+        var t = e.$truncate;
+        return t && (0, u.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
+    }));
+    var P = d().div.withConfig({
+        displayName: "ItemStyles__StyledLabel",
+        componentId: "sc-4kc053-8"
+    })([ "flex:1;overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
+        var t = e.$truncate;
+        return t && (0, u.css)([ "display:block;clear:both;" ]);
+    }));
+    var j = d().span.withConfig({
+        displayName: "ItemStyles__StyledMatch",
+        componentId: "sc-4kc053-9"
+    })([ "border-bottom:1px solid ", ";" ], f.variables.contentColorActive);
+    var N = d().span.withConfig({
+        displayName: "ItemStyles__StyledSubmenu",
+        componentId: "sc-4kc053-10"
+    })([ "float:right;padding-left:", ";color:", ";" ], f.variables.spacingSmall, f.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
-    var b = d()(v()).withConfig({
+    // Adds margin if direct sibling is a Menu.Item to provide spacing between Divider and Item
+    var D = d()(p()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
-    })([ "", "" ], (0, m.pick)({
-        prisma: {
-            comfortable: (0, u.css)([ "margin:8px 0;" ]),
-            compact: (0, u.css)([ "margin:6px 0;" ])
-        }
-    }));
+    })([ "border-color:", ";", " + &,& + ", "{margin-block-start:", ";}" ], f.variables.borderColor, I, I, f.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
-    var y =  (0, r.createContext)({
+    var q =  (0, r.createContext)({
         role: "menu",
         preventFocus: false
     });
-    /* harmony default export */    const h = y;
+    /* harmony default export */    const A = q;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
+    function R() {
+        return R = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -116,67 +192,51 @@
                 }
             }
             return e;
-        }, g.apply(null, arguments);
+        }, R.apply(null, arguments);
     }
-    var k = {};
+    var T = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
- */    function x(e) {
-        var t = g({}, e);
+ */    function $(e) {
+        var t = R({}, e);
         // @docs-props-type DividerPropsBase
-                var i = (0, r.useContext)(h), o = i.role;
+                var a = (0, r.useContext)(A), o = a.role;
         
-        return n().createElement(b, g({
+        return n().createElement(D, R({
             "aria-hidden": o === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
     }
-    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;
+    $.propTypes = T;
+    /* Remove the item if it is the first item after filtering */    $.filterFirst = true;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    $.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    $.filterLast = true;
+    /* Tag the item as Divider */    $.as = "Divider";
+    /* harmony default export */    const H = $;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
-    const S = require("@splunk/react-ui/Heading");
-    var O =  e.n(S);
-    // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
-    const C = require("@splunk/themes/useSplunkTheme");
-    var P =  e.n(C);
+    const F = require("@splunk/react-ui/Heading");
+    var M =  e.n(F);
     // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
-    var E = d().div.withConfig({
+    var L = d().div.withConfig({
         displayName: "HeadingStyles__Styled",
         componentId: "mcd2ws-0"
-    })([ "", " border-top:1px solid transparent;", ";&:not(:first-child){", ";}" ], m.mixins.reset("block"), (0, 
-    m.pick)({
-        enterprise: (0, u.css)([ "padding:", " ", " 6px;" ], m.variables.spacingXSmall, m.variables.spacingSmall),
-        prisma: {
-            comfortable: "padding: 13px 16px 10px 16px",
-            compact: "padding: 9px 16px 6px 16px"
-        }
-    }), (0, m.pick)({
-        enterprise: (0, u.css)([ "border-top:", ";" ], m.variables.border),
-        prisma: {
-            comfortable: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], m.variables.neutral200),
-            compact: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], m.variables.neutral200)
-        }
-    }));
-    var I = d().h5.withConfig({
-        displayName: "HeadingStyles__PrismaSectionTitle",
+    })([ "", " border-top:1px solid transparent;padding:", " ", ";&:not(:first-child){border-top:1px solid ", ";margin-top:", ";}" ], f.mixins.reset("block"), f.variables.spacingSmall, f.variables.spacingLarge, f.variables.borderColor, f.variables.spacingSmall);
+    var K = d()(M()).withConfig({
+        displayName: "HeadingStyles__StyledHeading",
         componentId: "mcd2ws-1"
-    })([ "", " font-size:", ";line-height:", ";font-weight:", ";letter-spacing:0.02em;" ], m.mixins.reset("block"), m.variables.fontSizeSmall, m.variables.lineHeight, m.variables.fontWeightBold);
+    })([ "color:", ";" ], f.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/Heading.tsx
-    function j(e) {
+    function B(e) {
         "@babel/helpers - typeof";
-        return j = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return B = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, j(e);
+        }, B(e);
     }
-    function _() {
-        return _ = Object.assign ? Object.assign.bind() : function(e) {
+    function W() {
+        return W = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -184,9 +244,9 @@
                 }
             }
             return e;
-        }, _.apply(null, arguments);
+        }, W.apply(null, arguments);
     }
-    function T(e, t) {
+    function z(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -196,51 +256,51 @@
         }
         return r;
     }
-    function D(e) {
+    function V(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? T(Object(r), !0).forEach((function(t) {
-                q(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : T(Object(r)).forEach((function(t) {
+            t % 2 ? z(Object(r), !0).forEach((function(t) {
+                X(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : z(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function q(e, t, r) {
-        return (t = N(t)) in e ? Object.defineProperty(e, t, {
+    function X(e, t, r) {
+        return (t = G(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function N(e) {
-        var t = A(e, "string");
-        return "symbol" == j(t) ? t : t + "";
+    function G(e) {
+        var t = J(e, "string");
+        return "symbol" == B(t) ? t : t + "";
     }
-    function A(e, t) {
-        if ("object" != j(e) || !e) return e;
+    function J(e, t) {
+        if ("object" != B(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != j(n)) return n;
+            if ("object" != B(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function R(e, t) {
+    function Q(e, t) {
         if (null == e) return {};
-        var r, n, i = F(e, t);
+        var r, n, a = U(e, t);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function F(e, t) {
+    function U(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -251,318 +311,70 @@
         }
         return r;
     }
-    var H = {
+    var Y = {
         children: o().node,
         title: o().bool,
         outerStyle: o().object
     };
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
- */    function $(e) {
-        var t = e.children, i = e.outerStyle, o = e.title, a = R(e, [ "children", "outerStyle", "title" ]);
-        var l = (0, r.useContext)(h), s = l.role;
-        var c = P()(), p = c.family;
-        var u = (0, r.useMemo)((function() {
-            return D(D({}, i), {}, {
+ */    function Z(e) {
+        var t = e.children, a = e.outerStyle, o = e.title, i = Q(e, [ "children", "outerStyle", "title" ]);
+        var l = (0, r.useContext)(A), s = l.role;
+        var c = (0, r.useMemo)((function() {
+            return V(V({}, a), {}, {
                 margin: 0
             });
-        }), [ i ]);
-        var d = p === "prisma" ?  n().createElement(I, _({
-            as: o ? "h4" : "h5",
-            "data-test": "heading",
-            style: i
-        }, a), t) :  n().createElement(O(), _({
-            "data-test": "heading",
-            level: o ? 4 : "ss",
-            style: u
-        }, a), t);
+        }), [ a ]);
         // 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(E, {
+        return n().createElement(L, {
             "aria-hidden": s === "listbox" ? true : undefined
-        }, d);
-    }
-    $.propTypes = H;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    $.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    $.filterLast = true;
-    /* Tag the item as a Heading */    $.as = "Heading";
-    /* harmony default export */    const M = $;
+        },  n().createElement(K, W({
+            style: c,
+            level: o ? 4 : 5,
+            variant: o ? "title5" : "title6",
+            "data-test": "heading"
+        }, i), t));
+    }
+    Z.propTypes = Y;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    Z.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    Z.filterLast = true;
+    /* Tag the item as a Heading */    Z.as = "Heading";
+    /* harmony default export */    const ee = Z;
     // CONCATENATED MODULE: external "lodash/isString"
-    const L = require("lodash/isString");
-    var z =  e.n(L);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const K = require("@splunk/react-icons/ChevronRight");
-    var B =  e.n(K);
+    const te = require("lodash/isString");
+    var re =  e.n(te);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const W = require("@splunk/react-icons/Checkmark");
-    var G =  e.n(W);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
-    const V = require("@splunk/react-icons/enterprise/Check");
-    var U =  e.n(V);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const X = require("@splunk/react-icons/enterprise/ChevronRight");
-    var Y =  e.n(X);
+    const ne = require("@splunk/react-icons/Checkmark");
+    var ae =  e.n(ne);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
+    const oe = require("@splunk/react-icons/ChevronRight");
+    var ie =  e.n(oe);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const J = require("@splunk/react-ui/ScreenReaderContent");
-    var Q =  e.n(J);
+    const le = require("@splunk/react-ui/ScreenReaderContent");
+    var se =  e.n(le);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const Z = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const ee = require("@splunk/react-ui/Clickable");
-    var te =  e.n(ee);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
-    const re = require("@splunk/react-ui/Switch");
-    var ne =  e.n(re);
-    // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
-    var ie = (0, u.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0, 
-    m.pick)({
-        prisma: m.variables.contentColorDefault,
-        enterprise: m.variables.textGray
-    }), m.variables.fontSizeSmall, (0, m.pick)({
-        prisma: "16px"
-    }));
-    var oe = d().span.withConfig({
-        displayName: "ItemStyles__StyledItemDescriptionBottom",
-        componentId: "sc-4kc053-0"
-    })([ "", ";display:block;" ], ie);
-    var ae = d().span.withConfig({
-        displayName: "ItemStyles__StyledItemDescriptionRight",
-        componentId: "sc-4kc053-1"
-    })([ "", ";display:flex;align-items:center;float:right;", " max-width:50%;min-height:20px;text-align:right;box-sizing:border-box;" ], ie, (0, 
-    m.pick)({
-        enterprise: (0, u.css)([ "padding-left:", ";" ], m.variables.spacingLarge)
-    }));
-    var le = d().div.withConfig({
-        displayName: "ItemStyles__StyledItemSelectedAdornment",
-        componentId: "sc-4kc053-2"
-    })([ "position:absolute;", " color:", ";" ], (0, m.pick)({
-        prisma: (0, u.css)([ "right:16px;" ]),
-        enterprise: (0, u.css)([ "right:3px;left:8px;" ])
-    }), (0, m.pick)({
-        prisma: m.variables.contentColorActive,
-        enterprise: m.variables.accentColorL10
-    }));
-    var se = d().span.withConfig({
-        displayName: "ItemStyles__StyledItemAdornment",
-        componentId: "sc-4kc053-3"
-    })([ "flex:0 0 auto;padding-right:", ";", " min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0, 
-    m.pick)({
-        prisma: "8px",
-        enterprise: "3px"
-    }), (function(e) {
-        var t = e.endAdornment;
-        return t && (0, u.css)([ "padding-left:", ";" ], (0, m.pick)({
-            prisma: "8px",
-            enterprise: "3px"
-        }));
-    }), (0, m.pick)({
-        prisma: "initial",
-        enterprise: "middle"
-    }), (0, m.pick)({
-        prisma: (0, u.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], m.variables.contentColorMuted),
-        enterprise: (0, u.css)([ "transform:translateY(-1px);" ])
-    }));
-    var ce = d()(te()).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],[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, 
-    m.pick)({
-        prisma: m.variables.contentColorActive,
-        enterprise: {
-            dark: m.variables.gray96,
-            light: m.variables.gray22
-        }
-    }), (0, m.pick)({
-        prisma: {
-            comfortable: "10px 16px",
-            compact: "6px 16px"
-        },
-        enterprise: "6px 10px"
-    }), (function(e) {
-        var t = e.$isSelectable, r = e.$selectableAppearance;
-        return t && (0, m.pick)({
-            prisma: (0, u.css)([ "padding-right:44px;", "" ], (function() {
-                return r === "checkbox" && "padding-left: 42px;";
-            })),
-            enterprise: (0, u.css)([ "padding-right:10px;padding-left:", ";" ], (function() {
-                return r === "checkbox" ? "32px" : "28px";
-            }))
-        });
-    }), (function(e) {
-        var t = e.$active, r = e.$preventFocus;
-        return t && !r && (0, u.css)([ "box-shadow:", ";" ], m.variables.focusShadowInset);
-    }), (function(e) {
-        var t = e.$active;
-        return t && (0, u.css)([ "background:", ";font-weight:", ";" ], (0, m.pick)({
-            enterprise: {
-                light: m.variables.gray92,
-                dark: m.variables.gray22
-            },
-            prisma: m.variables.neutral100
-        }), m.variables.fontWeightBold);
-    }), (0, m.pick)({
-        prisma: m.variables.interactiveColorOverlayHover,
-        enterprise: m.variables.backgroundColorHover
-    }), (function(e) {
-        var t = e.$selected;
-        return t && (0, m.pick)({
-            prisma: (0, u.css)([ "background:", ";" ], m.mixins.overlayColors(m.variables.interactiveColorOverlaySelected, m.variables.interactiveColorOverlayHover))
-        });
-    }), (0, m.pick)({
-        prisma: (0, u.css)([ "&:active{background:", ";}" ], m.variables.interactiveColorOverlayActive)
-    }), (function(e) {
-        var t = e.$selected;
-        return t && (0, m.pick)({
-            prisma: (0, u.css)([ "background:", ";&:active{background:", ";}" ], m.variables.interactiveColorOverlaySelected, m.mixins.overlayColors(m.variables.interactiveColorOverlaySelected, m.variables.interactiveColorOverlayActive))
-        });
-    }), m.variables.focusShadowInset, (0, m.pick)({
-        prisma: (0, u.css)([ "background:", ";" ], m.variables.interactiveColorOverlayHover)
-    }), (0, m.pick)({
-        enterprise: {
-            light: m.variables.gray45,
-            dark: m.variables.contentColorDisabled
-        },
-        prisma: m.variables.contentColorDisabled
-    }), /* sc-sel */ oe, /* sc-sel */ ae, /* sc-sel */ le, (0, m.pick)({
-        prisma: m.variables.contentColorDisabled,
-        enterprise: m.variables.gray80
-    }), (0, m.pick)({
-        prisma: (0, u.css)([ "& > * > ", "{color:", ";}" ], /* sc-sel */ se, m.variables.contentColorDisabled)
-    }), (function(e) {
-        var t = e.$selected;
-        return t && (0, m.pick)({
-            prisma: (0, u.css)([ "", "{color:", ";}" ], /* sc-sel */ se, m.variables.contentColorActive)
-        });
-    }));
-    var pe = d()(ne()).withConfig({
-        displayName: "ItemStyles__StyledSwitch",
-        componentId: "sc-4kc053-5"
-    })([ "position:absolute;left:", ";top:", ";" ], (0, m.pick)({
-        prisma: "16px",
-        enterprise: "8px"
-    }), (0, m.pick)({
-        prisma: "0px",
-        enterprise: {
-            comfortable: "-1px",
-            compact: "2px"
-        }
-    }));
-    var ue = d().span.withConfig({
-        displayName: "ItemStyles__StyledInnerWrapper",
-        componentId: "sc-4kc053-6"
-    })([ "display:flex;align-items:flex-start;" ]);
-    var de = d().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 t = e.$truncate;
-        return t && (0, u.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
-    }));
-    var fe = d().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, u.css)([ "display:block;clear:both;" ]);
-    }));
-    var ve = d().span.withConfig({
-        displayName: "ItemStyles__StyledMatch",
-        componentId: "sc-4kc053-9"
-    })([ "border-bottom:1px solid ", ";" ], (0, m.pick)({
-        prisma: m.variables.contentColorActive,
-        enterprise: {
-            dark: m.variables.gray96,
-            light: m.variables.gray45
-        }
-    }));
-    var me = d().span.withConfig({
-        displayName: "ItemStyles__StyledSubmenu",
-        componentId: "sc-4kc053-10"
-    })([ "float:right;padding-left:", ";color:", ";", "" ], m.variables.spacingSmall, (0, 
-    m.pick)({
-        prisma: "inherit",
-        enterprise: m.variables.textGray
-    }), (0, m.pick)({
-        prisma: (0, u.css)([ "& > svg{width:20px;height:20px;}" ])
-    }));
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
-    const be = require("@splunk/react-icons/ArrowSquareTopRight");
-    var ye =  e.n(be);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const he = require("@splunk/react-icons/enterprise/External");
-    var ge =  e.n(he);
+    const ce = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
+    const ue = require("@splunk/react-icons/ArrowSquareTopRightInset");
+    var de =  e.n(ue);
     // CONCATENATED MODULE: ./src/Menu/icons/External.tsx
-    var ke = (0, u.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
-    var xe = d()(ge()).withConfig({
-        displayName: "External__StyledEnterprise",
+    var ve = d()(de()).withConfig({
+        displayName: "External__Styled",
         componentId: "sc-1turs2s-0"
-    })([ "", " margin:0 0 0 3px;" ], ke);
-    var we = d()(ye()).withConfig({
-        displayName: "External__StyledPrisma",
-        componentId: "sc-1turs2s-1"
-    })([ "", " margin:0 0 0 4px;" ], ke);
-    function Se() {
-        var e = (0, m.useSplunkTheme)(), t = e.isEnterprise, r = e.isCompact;
-        var i = r ? "20px" : "24px";
-        return t ?  n().createElement(xe, {
-            screenReaderText: null
-        }) :  n().createElement(we, {
-            height: i,
-            width: i
-        });
-    }
-    /* harmony default export */    const Oe = Se;
-    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
-    /**
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
- *
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
- * @param current - The new value of the ref.
- */
-    function Ce(e, t) {
-        if (e) {
-            if (typeof e === "function") {
-                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 = t;
- // eslint-disable-line no-param-reassign
-                        }
-        }
+    })([ "vertical-align:text-top;margin:0 0 0 4px;" ]);
+    function pe() {
+        
+        return n().createElement(ve, null);
     }
-    // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
-    // A utility that attempts to move an element into view by scrolling it's derived parent.
-    var Pe = function e(t) {
-        if (!t) {
-            return;
-        }
-        var r = t.offsetParent;
-        if (!r) {
-            return;
-        }
-        // Below the bottom of the container.
-                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 (r.scrollTop > t.offsetTop) {
-            r.scrollTop = t.offsetTop;
-        }
-    };
+    /* harmony default export */    const fe = pe;
     // CONCATENATED MODULE: ./src/Menu/Item.tsx
-    function Ee(e) {
-        "@babel/helpers - typeof";
-        return Ee = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-            return typeof e;
-        } : function(e) {
-            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, Ee(e);
-    }
-    function Ie() {
-        return Ie = Object.assign ? Object.assign.bind() : function(e) {
+    function me() {
+        return me = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -570,20 +382,20 @@
                 }
             }
             return e;
-        }, Ie.apply(null, arguments);
+        }, me.apply(null, arguments);
     }
-    function je(e, t) {
+    function be(e, t) {
         if (null == e) return {};
-        var r, n, i = _e(e, t);
+        var r, n, a = ye(e, t);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function _e(e, t) {
+    function ye(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -594,103 +406,15 @@
         }
         return r;
     }
-    function Te(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function De(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, ze(n.key), n);
-        }
-    }
-    function qe(e, t, r) {
-        return t && De(e.prototype, t), r && De(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function Ne(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && Ae(e, t);
-    }
-    function Ae(e, t) {
-        return Ae = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, Ae(e, t);
-    }
-    function Re(e) {
-        var t = $e();
-        return function() {
-            var r, n = Me(e);
-            if (t) {
-                var i = Me(this).constructor;
-                r = Reflect.construct(n, arguments, i);
-            } else r = n.apply(this, arguments);
-            return Fe(this, r);
-        };
-    }
-    function Fe(e, t) {
-        if (t && ("object" == Ee(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return He(e);
-    }
-    function He(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function $e() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return ($e = function t() {
-            return !!e;
-        })();
-    }
-    function Me(e) {
-        return Me = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, Me(e);
-    }
-    function Le(e, t, r) {
-        return (t = ze(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
-    }
-    function ze(e) {
-        var t = Ke(e, "string");
-        return "symbol" == Ee(t) ? t : t + "";
-    }
-    function Ke(e, t) {
-        if ("object" != Ee(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != Ee(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === t ? String : Number)(e);
-    }
-    var Be = {
+    var ge = {
         active: o().bool,
         children: o().node,
         description: o().string,
         descriptionPosition: o().oneOf([ "right", "bottom" ]),
-        disabled: o().oneOfType([ o().bool, o().oneOf([ "dimmed" ]) ]),
+        disabled: o().oneOfType([ o().bool, o().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: o().oneOfType([ o().func, o().object ]),
         endAdornment: o().node,
         hasSubmenu: o().bool,
-        icon: o().node,
         /** @private. The internal key of the tab */
         itemKey: o().number,
         matchRanges: o().arrayOf(o().shape({
@@ -707,224 +431,153 @@
         selectable: o().bool,
         selectableAppearance: o().oneOf([ "checkmark", "checkbox" ]),
         selected: o().oneOfType([ o().bool, o().oneOf([ "some" ]) ]),
-        /** @private */
-        splunkTheme: o().object,
         startAdornment: o().node,
         to: o().string,
         truncate: o().bool
     };
-    var We = {
-        active: false,
-        descriptionPosition: "bottom",
-        hasSubmenu: false,
-        openInNewContext: false,
-        preventFocus: false,
-        selectable: false,
-        selectableAppearance: "checkmark",
-        selected: false,
-        truncate: false
-    };
-    var Ge = (0, Z._)("(Opens new window)");
-    var Ve =  function(e) {
-        Ne(r, e);
-        var t = Re(r);
-        qe(r, null, [ {
-            key: "validateProps",
-            // @docs-props-type ItemPropsBase
-            value: function e(t) {
-                if (false) {}
-            }
-        } ]);
-        function r(e) {
-            var n;
-            Te(this, r);
-            n = t.call(this, e);
-            Le(He(n), "el", null);
-            Le(He(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
-                });
-            }));
-            Le(He(n), "handleMount", (function(e) {
-                n.el = e;
-                Ce(n.props.elementRef, e);
-            }));
-            r.validateProps(e);
-            return n;
-        }
-        qe(r, [ {
-            key: "componentDidUpdate",
-            value: function e() {
-                r.validateProps(this.props);
-            }
-        }, {
-            key: "focus",
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                var t;
-                (t = this.el) === null || t === void 0 ? void 0 : t.focus();
-            }
- // eslint-disable-next-line react/no-unused-class-component-methods
-                }, {
-            key: "scrollIntoViewIfNeeded",
-            value: function e() {
-                Pe(this.el);
+    var he = (0, ce._)("(Opens new window)");
+    function Se(e) {
+        var t = e.active, a = e.children, o = e.description, i = e.descriptionPosition, s = i === void 0 ? "bottom" : i, c = e.disabled, u = e.endAdornment, d = e.elementRef, v = e.hasSubmenu, p = e.itemKey, f = e.matchRanges, m = e.onClick, b = e.onFocus, y = e.openInNewContext, g = e.role, h = e.selectable, k = e.selectableAppearance, D = k === void 0 ? "checkmark" : k, q = e.selected, R = e.startAdornment, T = e.to, $ = e.truncate, H = be(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
+        var F = (0, r.useContext)(A), M = F.preventFocus;
+        (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ $, s, f, a ]);
+        var L = (0, r.useCallback)((function(e) {
+            b === null || b === void 0 ? void 0 : b(e, {
+                itemKey: p
+            });
+        }), [ p, b ]);
+        var K = (0, r.useCallback)((function(e) {
+            if (M) {
+                e.preventDefault();
             }
-        }, {
-            key: "renderLabel",
-            value: function e() {
-                var t = this.props, r = t.children, i = t.matchRanges;
-                if (!i || !z()(r)) {
-                    return r;
-                }
-                var o = [];
-                // before first match. May be empty string.
-                                o.push(r.substring(0, i[0].start));
-                i.forEach((function(e, t) {
-                    o.push(
-                    
-                    // eslint-disable-next-line react/no-array-index-key
-                    n().createElement(ve, {
-                        key: t,
-                        "data-test": "match"
-                    }, r.substring(e.start, e.end)));
-                    if (t < i.length - 1) {
-                        o.push(r.substring(e.end, i[t + 1].start));
-                    } else {
-                        o.push(r.substring(e.end, r.length));
-                    }
-                }));
-                return o;
+        }), [ M ]);
+        var B = (0, r.useMemo)((function() {
+            if (!f || !re()(a)) {
+                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.role, m = t.splunkTheme, b = t.to, y = t.truncate, h = t.descriptionPosition, g = t.openInNewContext, k = t.endAdornment, x = t.startAdornment, w = je(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext", "endAdornment", "startAdornment" ]);
-                var S = m.isEnterprise, O = m.isPrisma;
-                var C = this.context.preventFocus;
-                var P = c === true || c === "some";
-                var E = a || P;
-                var I = v || {
-                    nonselectable: "menuitem",
-                    checkmark: "menuitemradio",
-                    checkbox: "menuitemcheckbox"
-                }[E ? s : "nonselectable"];
-                var j = {
-                    "aria-haspopup": o ? true : undefined
-                };
-                if (I === "menuitemradio" || I === "menuitemcheckbox") {
-                    j["aria-checked"] = c === "some" ? "mixed" : P;
-                } else if (I === "option") {
-                    j["aria-selected"] = P;
-                }
-                var _ = O ? "right" : "left";
-                var T = u && h === "right";
-                var D = u && !T;
-                var q = c && s === "checkmark" &&  n().createElement(le, null, O ?  n().createElement(G(), {
-                    inline: true,
-                    height: "16",
-                    width: "16"
-                }) :  n().createElement(U(), {
-                    hideDefaultTooltip: true,
-                    inline: true,
-                    screenReaderText: null,
-                    size: .85
-                }));
-                var N = false;
-                var A;
-                if (g) {
-                    N = true;
-                    A = typeof g === "string" ? g : Ge;
-                }
+            var e = [];
+            // before first match. May be empty string.
+                        e.push(a.substring(0, f[0].start));
+            f.forEach((function(t, r) {
+                e.push(
                 
-                return n().createElement(ce, Ie({
-                    $isSelectable: E,
-                    $selectableAppearance: s,
-                    $selected: P,
-                    $active: r,
-                    $preventFocus: C || false,
-                    "data-test-selected": E ? P : null,
-                    "data-test": "item",
-                    "data-has-icon": !!p || !!x || !!k,
-                    disabled: d,
-                    onClick: f,
-                    onFocus: this.handleFocus,
-                    onMouseDown: function e(t) {
-                        if (C) {
-                            t.preventDefault();
-                        }
-                    },
-                    role: I,
-                    tabIndex: C ? -1 : undefined,
-                    to: b,
-                    title: y && z()(i) ? i : undefined,
-                    openInNewContext: N
-                }, j, l()(w, "onFocus"), {
-                    elementRef: this.handleMount
-                }), a && s === "checkbox" &&  n().createElement(pe, {
-                    interactive: false,
-                    value: "menu-item",
-                    selectedLabel: "Selected",
-                    selected: c,
-                    disabled: Boolean(d)
-                }), o &&  n().createElement(me, null, S ?  n().createElement(Y(), {
-                    hideDefaultTooltip: true,
-                    screenReaderText: null
-                }) :  n().createElement(B(), null)), T &&  n().createElement(ae, {
-                    "data-test": "description"
-                }, u),  n().createElement(ue, null, x ?  n().createElement(se, null, x) : p &&  n().createElement(se, null, p),  n().createElement(de, {
-                    $truncate: y
-                }, _ === "left" && q,  n().createElement(fe, {
-                    $truncate: y,
-                    "data-test": "label"
-                }, this.renderLabel(), g &&  n().createElement(n().Fragment, null,  n().createElement(Oe, null),  n().createElement(Q(), null, A))), D &&  n().createElement(oe, {
-                    "data-test": "description"
-                }, u), _ === "right" && q), k &&  n().createElement(se, {
-                    endAdornment: k
-                }, k)));
-            }
-        } ]);
-        return r;
-    }(r.Component);
-    Le(Ve, "propTypes", Be);
-    Le(Ve, "defaultProps", We);
-    Le(Ve, "as", void 0);
-    Le(Ve, "contextType", h);
-    var Ue = (0, m.withSplunkTheme)(Ve);
-    var Xe = Ue;
-    Xe.propTypes = Ve.propTypes;
-    Xe.as = "Item";
-    /* harmony default export */    const Ye = Xe;
+                // eslint-disable-next-line react/no-array-index-key
+                n().createElement(j, {
+                    key: r,
+                    "data-test": "match"
+                }, a.substring(t.start, t.end)));
+                if (r < f.length - 1) {
+                    e.push(a.substring(t.end, f[r + 1].start));
+                } else {
+                    e.push(a.substring(t.end, a.length));
+                }
+            }));
+            return e;
+        }), [ a, f ]);
+        var W = q === true || q === "some";
+        var z = h || W;
+        var V = g || {
+            nonselectable: "menuitem",
+            checkmark: "menuitemradio",
+            checkbox: "menuitemcheckbox"
+        }[z ? D : "nonselectable"];
+        var X = {
+            "aria-haspopup": v ? true : undefined
+        };
+        if (V === "menuitemradio" || V === "menuitemcheckbox") {
+            X["aria-checked"] = q === "some" ? "mixed" : W;
+        } else if (V === "option") {
+            X["aria-selected"] = W;
+        }
+        var G = o && s === "right";
+        var J = o && !G;
+        var Q = q && D === "checkmark" &&  n().createElement(O, null,  n().createElement(ae(), {
+            inline: true
+        }));
+        var U = false;
+        var Y;
+        if (y) {
+            U = true;
+            Y = typeof y === "string" ? y : he;
+        }
+        
+        return n().createElement(I, me({
+            $active: t,
+            $isSelectable: z,
+            $preventFocus: M || false,
+            $selectableAppearance: D !== null && D !== void 0 ? D : false,
+            $selected: W,
+            "data-has-icon": !!R || !!u,
+            "data-test": "item",
+            "data-test-selected": z ? W : null,
+            disabled: c,
+            elementRef: d,
+            onClick: m,
+            onFocus: L,
+            onMouseDown: K,
+            openInNewContext: U,
+            role: V,
+            tabIndex: M ? -1 : undefined,
+            to: T,
+            title: $ && re()(a) ? a : undefined
+        }, X, l()(H, "onFocus")), v &&  n().createElement(N, null,  n().createElement(ie(), null)),  n().createElement(E, null, h && D === "checkbox" &&  n().createElement(x, {
+            disabled: !!c,
+            selected: q
+        }), R &&  n().createElement(C, null, R),  n().createElement(_, {
+            $descriptionBottom: !!J,
+            $truncate: $ !== null && $ !== void 0 ? $ : false
+        },  n().createElement(P, {
+            $truncate: $ !== null && $ !== void 0 ? $ : false,
+            "data-test": "label"
+        }, B, y &&  n().createElement(n().Fragment, null,  n().createElement(fe, null),  n().createElement(se(), null, Y))), J &&  n().createElement(S, {
+            "data-test": "description"
+        }, o), G &&  n().createElement(w, {
+            "data-test": "description"
+        }, o)), u &&  n().createElement(C, {
+            endAdornment: u
+        }, u), Q));
+    }
+    Se.propTypes = ge;
+    Se.as = "Item";
+    /* harmony default export */    const we = Se;
     // only for styled components using Item
         // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
-    const Je = require("@splunk/react-ui/Scroll");
-    var Qe =  e.n(Je);
+    const ke = require("@splunk/react-ui/Scroll");
+    var Oe =  e.n(ke);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var Ze = (0, u.css)([ "border-top:1px solid ", ";" ], (0, m.pick)({
-        enterprise: m.variables.gray60,
-        prisma: m.variables.neutral200
-    }));
-    var et = (0, u.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}" ], m.mixins.reset("block"), (0, 
-    m.pick)({
-        enterprise: m.variables.backgroundColor,
-        prisma: m.variables.backgroundColorPopup
-    }), m.variables.borderRadius, (0, m.pick)({
-        prisma: (0, u.css)([ "padding:8px 0;" ])
-    }), m.variables.focusShadowInset, (0, m.pick)({
-        prisma: (0, u.css)([ "background:", ";" ], m.variables.interactiveColorOverlayHover)
-    }), Ze);
-    var tt = d().div.withConfig({
+    var Ce = (0, u.css)([ "border-top:1px solid ", ";" ], f.variables.borderColor);
+    var xe = (0, u.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], f.mixins.reset("block"), f.variables.backgroundColorPopup, f.variables.borderRadius, f.variables.spacingSmall, f.variables.focusShadowInset, f.variables.interactiveColorOverlayHover, Ce);
+    var Ie = d().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
-    })([ "", "" ], et);
-    var rt = d()(Qe()).withConfig({
+    })([ "", "" ], xe);
+    var Ee = d()(Oe()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], et, /* sc-sel */ tt, /* sc-sel */ tt, Ze);
+    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ie, /* sc-sel */ Ie, Ce);
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function _e(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                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 = t;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
     // CONCATENATED MODULE: ./src/Menu/Menu.tsx
-    function nt() {
-        return nt = Object.assign ? Object.assign.bind() : function(e) {
+    function Pe() {
+        return Pe = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -932,20 +585,20 @@
                 }
             }
             return e;
-        }, nt.apply(null, arguments);
+        }, Pe.apply(null, arguments);
     }
-    function it(e, t) {
+    function je(e, t) {
         if (null == e) return {};
-        var r, n, i = ot(e, t);
+        var r, n, a = Ne(e, t);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return i;
+        return a;
     }
-    function ot(e, t) {
+    function Ne(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -956,46 +609,35 @@
         }
         return r;
     }
-    var at = {
+    var De = {
         children: o().node,
         elementRef: o().oneOfType([ o().func, o().object ]),
         focusMode: o().oneOf([ "roving", "normal", "never" ]),
-        retainFocus: o().bool,
         stopScrollPropagation: o().bool
     };
     // the default focus control for Menu: loop, verticalArrows(up/down keys), home/end keys
-        var lt = function e(t) {
+        var qe = function e() {
         return {
             enableLoop: true,
             orientation: "vertical",
-            enableTab: t,
+            enableTab: false,
             enableHomeEnd: true
         };
     };
-    var st = function e(t) {
-        var r = (0, c.keycode)(t.nativeEvent);
+    var Ae = function e(t) {
+        var r = (0, s.keycode)(t.nativeEvent);
         // Handle special case for tab navigation
-                if (r === "tab" && (0, p.isTabKey)(t)) {
+                if (r === "tab" && (0, c.isTabKey)(t)) {
             return t.shiftKey ? "tabShift" : "tab";
         }
         return r;
     };
-    function ct(e) {
-        var t = e.children, i = e.elementRef, o = e.focusMode, a = e.retainFocus, c = e.stopScrollPropagation, u = it(e, [ "children", "elementRef", "focusMode", "retainFocus", "stopScrollPropagation" ]);
+    function Re(e) {
+        var t = e.children, a = e.elementRef, o = e.focusMode, i = o === void 0 ? "roving" : o, s = e.stopScrollPropagation, u = je(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
-                if (false) {}
-        var d = (0, r.useContext)(h), f = d.role, v = f === void 0 ? "menu" : f;
-        var m = (0, r.useContext)(s.PopoverMenuContext), b = m.retainFocus;
-        var y = (0, r.useRef)(null);
-        var g = true;
-        if (a != null) {
-            g = a;
-        } else if (o === "roving") {
-            g = false;
-        } else if (b != null) {
-            g = b;
-        }
-        var k = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
+                var d = (0, r.useContext)(A), v = d.role, p = v === void 0 ? "menu" : v;
+        var f = (0, r.useRef)(null);
+        var m = 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.
@@ -1006,8 +648,8 @@
             // 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 && n.length > r + 1) {
-                var i = n[r + 1];
-                if (i.type.as === "Heading" || i.type.as === "Divider") {
+                var a = n[r + 1];
+                if (a.type.as === "Heading" || a.type.as === "Divider") {
                     return e;
                 }
             }
@@ -1018,64 +660,64 @@
             e.push(t);
             return e;
         }), []);
-        var x = (0, r.useCallback)((function(e) {
-            y.current = e;
-            Ce(i, e);
-        }), [ i ]);
-        var w = lt(g);
-        var S = (0, r.useCallback)((function(e) {
+        var b = (0, r.useCallback)((function(e) {
+            f.current = e;
+            _e(a, e);
+        }), [ a ]);
+        var y = qe();
+        var g = (0, r.useCallback)((function(e) {
             // if command key on Mac was pressed ignore
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = st(e);
+            var t = Ae(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)) {
+                        if (!n && (y.enableTab || !r)) {
                 e.preventDefault();
             }
-            var i = y.current;
+            var a = f.current;
             var o = [];
-            if (i) {
-                o = (0, p.getSortedTabbableElements)(i, {
+            if (a) {
+                o = (0, c.getSortedTabbableElements)(a, {
                     ignoreTabIndex: true
                 });
             }
-            var a = (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 = a || l;
-            var c = s ? o.indexOf(s) : -1;
-            (0, p.handleFocus)(t, o, c, w);
-        }), [ w ]);
-        var O = function e() {
+            var i = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
+            var l = a === null || a === void 0 ? void 0 : a.querySelector(":focus");
+            var s = i || l;
+            var u = s ? o.indexOf(s) : -1;
+            (0, c.handleFocus)(t, o, u, y);
+        }), [ y ]);
+        var h = function e() {
             return {
                 role: "menu",
-                preventFocus: o === "never"
+                preventFocus: i === "never"
             };
         };
-        var C = o === "normal" || o === "never" ? undefined : S;
-        var P = {
+        var S = i === "normal" || i === "never" ? undefined : g;
+        var w = {
             "data-test": "menu",
-            onKeyDown: C,
-            role: v
+            onKeyDown: S,
+            role: p
         };
-        return c ?  n().createElement(rt, nt({}, P, {
-            elementRef: x,
+        return s ?  n().createElement(Ee, Pe({}, w, {
+            elementRef: b,
             stopScrollPropagation: true
-        }, l()(u, "tagName")), k) :  n().createElement(tt, nt({}, P, {
-            ref: x
-        }, u),  n().createElement(h.Provider, {
-            value: O()
-        }, k));
-    }
-    ct.propTypes = at;
-    ct.Item = Ye;
-    ct.Divider = w;
-    ct.Heading = M;
-    /* harmony default export */    const pt = ct;
+        }, l()(u, "tagName")), m) :  n().createElement(Ie, Pe({}, w, {
+            ref: b
+        }, u),  n().createElement(A.Provider, {
+            value: h()
+        }, m));
+    }
+    Re.propTypes = De;
+    Re.Item = we;
+    Re.Divider = H;
+    Re.Heading = ee;
+    /* harmony default export */    const Te = Re;
     // CONCATENATED MODULE: ./src/Menu/index.ts
     module.exports = t;
     /******/})();