@splunk/react-ui 5.7.0 → 5.8.0

package/Menu.js

@@ -61,26 +61,26 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Divider: () => /* reexport */ H,
+        Divider: () => /* reexport */ $,
         Heading: () => /* reexport */ Z,
-        Item: () => /* reexport */ Se,
+        Item: () => /* reexport */ Ee,
         MenuContext: () => /* reexport */ T,
-        default: () => /* reexport */ qe
+        default: () => /* reexport */ Ke
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
     // CONCATENATED MODULE: external "lodash/omit"
-    const a = require("lodash/omit");
-    var i =  e.n(a);
+    const o = require("lodash/omit");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var l =  e.n(o);
+    const a = require("prop-types");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const s = require("@splunk/ui-utils/focus");
+    const c = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var u =  e.n(c);
+    const s = require("styled-components");
+    var u =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
     const d = require("@splunk/react-ui/Divider");
     var v =  e.n(d);
@@ -88,99 +88,99 @@
     const p = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/Checkbox"
     const f = require("@splunk/react-ui/Checkbox");
-    var m =  e.n(f);
+    var b =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const b = require("@splunk/react-ui/Clickable");
-    var g =  e.n(b);
+    const m = require("@splunk/react-ui/Clickable");
+    var y =  e.n(m);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
-    var y = (0, c.css)([ "", " overflow:inherit;white-space:inherit;text-overflow:inherit;" ], p.mixins.typography("smallBody"));
+    var g = (0, s.css)([ "", " overflow:inherit;white-space:inherit;text-overflow:inherit;" ], p.mixins.typography("smallBody"));
     var h = u().div.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionBottom",
         componentId: "sc-4kc053-0"
-    })([ "", ";" ], y);
+    })([ "", ";" ], g);
     var S = u().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;" ], y, p.variables.spacingLarge);
-    var w = (0, c.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], p.mixins.reset("inline-flex"));
-    var k = u().div.withConfig({
+    })([ "", ";display:flex;align-self:flex-start;align-items:center;float:right;padding-left:", ";max-width:50%;min-height:20px;text-align:right;" ], g, p.variables.spacingLarge);
+    var O = (0, s.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], p.mixins.reset("inline-flex"));
+    var w = u().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedAdornment",
         componentId: "sc-4kc053-2"
-    })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], w, p.variables.spacingLarge, p.variables.contentColorActive);
-    var O = u().span.withConfig({
+    })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], O, p.variables.spacingLarge, p.variables.contentColorActive);
+    var k = u().span.withConfig({
         displayName: "ItemStyles__StyledItemAdornment",
         componentId: "sc-4kc053-3"
-    })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], w, (function(e) {
+    })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], O, (function(e) {
         var t = e.endAdornment;
-        return t && (0, c.css)([ "padding-left:", ";" ], p.variables.spacingSmall);
+        return t && (0, s.css)([ "padding-left:", ";" ], p.variables.spacingSmall);
     }), p.variables.spacingSmall, p.variables.contentColorMuted);
-    var x = u()(m()).withConfig({
+    var x = u()(b()).withConfig({
         displayName: "ItemStyles__StyledCheckbox",
         componentId: "sc-4kc053-4"
     })([ "min-height:0;padding-right:", ";" ], p.variables.spacingSmall);
-    var C = u()(g()).withConfig({
+    var C = u()(y()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-5"
     })([ "line-height:", ";display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;min-height:", ";padding:", " ", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}&:active{background:", ";}", "}&:focus{outline:0;box-shadow:", ";background:", ";}&[disabled],&[aria-disabled='true']{color:", ";", ",", ",", ",", "{color:", ";}}" ], p.variables.lineHeightSpacious, p.variables.contentColorActive, p.variables.inputHeight, p.variables.spacingXSmall, p.variables.spacingLarge, (function(e) {
         var t = e.$active, r = e.$preventFocus;
-        return t && !r && (0, c.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset);
+        return t && !r && (0, s.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset);
     }), (function(e) {
         var t = e.$active;
-        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlayActive, p.variables.fontWeightBold);
+        return t && (0, s.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlayActive, p.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, c.css)([ "padding-right:calc(", " * 3);" ], p.variables.spacingLarge);
+        (0, s.css)([ "padding-right:calc(", " * 3);" ], p.variables.spacingLarge);
     }), p.variables.interactiveColorOverlayHover, (function(e) {
         var t = e.$active;
-        return t && (0, c.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlayActive, p.variables.interactiveColorOverlayHover));
+        return t && (0, s.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlayActive, p.variables.interactiveColorOverlayHover));
     }), p.variables.interactiveColorOverlayActive, (function(e) {
         var t = e.$selected, r = e.$active;
-        return t && (0, c.css)([ "font-weight:", ";", "" ], p.variables.fontWeightSemiBold, r && (0, 
-        c.css)([ "font-weight:", ";" ], p.variables.fontWeightBold));
-    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ k, /* sc-sel */ O, p.variables.contentColorDisabled);
-    var I = u().span.withConfig({
+        return t && (0, s.css)([ "font-weight:", ";", "" ], p.variables.fontWeightSemiBold, r && (0, 
+        s.css)([ "font-weight:", ";" ], p.variables.fontWeightBold));
+    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ w, /* sc-sel */ k, p.variables.contentColorDisabled);
+    var j = u().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var E = u().div.withConfig({
+    var I = u().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, c.css)([ "flex-direction:column;" ]);
+        return t && (0, s.css)([ "flex-direction:column;" ]);
     }), (function(e) {
         var t = e.$truncate;
-        return t && (0, c.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
+        return t && (0, s.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var _ = u().div.withConfig({
+    var P = u().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, c.css)([ "display:block;clear:both;" ]);
+        return t && (0, s.css)([ "display:block;clear:both;" ]);
     }));
-    var P = u().span.withConfig({
+    var E = u().span.withConfig({
         displayName: "ItemStyles__StyledMatch",
         componentId: "sc-4kc053-9"
     })([ "border-bottom:1px solid ", ";" ], p.variables.contentColorActive);
-    var j = u().span.withConfig({
+    var _ = u().span.withConfig({
         displayName: "ItemStyles__StyledSubmenu",
         componentId: "sc-4kc053-10"
     })([ "float:right;padding-left:", ";color:", ";" ], p.variables.spacingSmall, p.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
     // Adds margin if direct sibling is a Menu.Item to provide spacing between Divider and Item
-    var A = u()(v()).withConfig({
+    var D = u()(v()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
     })([ "", " + &,& + ", "{margin-block-start:", ";}" ], C, C, p.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
-    var D =  (0, r.createContext)({
+    var A =  (0, r.createContext)({
         role: "menu",
         preventFocus: false
     });
-    /* harmony default export */    const T = D;
+    /* harmony default export */    const T = A;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
     function N() {
         return N = Object.assign ? Object.assign.bind() : function(e) {
@@ -193,28 +193,28 @@
             return e;
         }, N.apply(null, arguments);
     }
-    var q = {};
+    var R = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
- */    function $(e) {
+ */    function q(e) {
         var t = N({}, e);
-        var a = (0, r.useContext)(T), i = a.role;
+        var o = (0, r.useContext)(T), i = o.role;
         
-        return n().createElement(A, N({
+        return n().createElement(D, N({
             "aria-hidden": i === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
     }
-    $.propTypes = q;
-    /* 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 = $;
+    q.propTypes = R;
+    /* Remove the item if it is the first item after filtering */    q.filterFirst = true;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    q.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    q.filterLast = true;
+    /* Tag the item as Divider */    q.as = "Divider";
+    /* harmony default export */    const $ = q;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
-    const R = require("@splunk/react-ui/Heading");
-    var M =  e.n(R);
+    const H = require("@splunk/react-ui/Heading");
+    var M =  e.n(H);
     // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
     var F = u().div.withConfig({
         displayName: "HeadingStyles__Styled",
@@ -225,16 +225,16 @@
         componentId: "mcd2ws-1"
     })([ "color:", ";" ], p.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/Heading.tsx
-    function K(e) {
+    function B(e) {
         "@babel/helpers - typeof";
-        return K = "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;
-        }, K(e);
+        }, B(e);
     }
-    function B() {
-        return B = Object.assign ? Object.assign.bind() : function(e) {
+    function K() {
+        return K = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -242,7 +242,7 @@
                 }
             }
             return e;
-        }, B.apply(null, arguments);
+        }, K.apply(null, arguments);
     }
     function W(e, t) {
         var r = Object.keys(e);
@@ -275,28 +275,28 @@
     }
     function X(e) {
         var t = G(e, "string");
-        return "symbol" == K(t) ? t : t + "";
+        return "symbol" == B(t) ? t : t + "";
     }
     function G(e, t) {
-        if ("object" != K(e) || !e) return e;
+        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" != K(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 J(e, t) {
         if (null == e) return {};
-        var r, n, a = Q(e, t);
+        var r, n, o = Q(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
-        return a;
+        return o;
     }
     function Q(e, t) {
         if (null == e) return {};
@@ -317,27 +317,27 @@
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */    function Y(e) {
-        var t = e.children, a = e.outerStyle, i = e.title, o = J(e, [ "children", "outerStyle", "title" ]);
+        var t = e.children, o = e.outerStyle, i = e.title, a = J(e, [ "children", "outerStyle", "title" ]);
         // @docs-props-type HeadingPropsBase
-                var l = (0, r.useContext)(T), s = l.role;
-        var c = (0, r.useMemo)((function() {
-            return z(z({}, a), {}, {
+                var l = (0, r.useContext)(T), c = l.role;
+        var s = (0, r.useMemo)((function() {
+            return z(z({}, o), {}, {
                 margin: 0
             });
-        }), [ a ]);
+        }), [ o ]);
         // 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(F, {
-            "aria-hidden": s === "listbox" ? true : undefined
-        },  n().createElement(L, B({
-            style: c,
+            "aria-hidden": c === "listbox" ? true : undefined
+        },  n().createElement(L, K({
+            style: s,
             level: i ? 4 : 5,
             variant: i ? "title5" : "title6",
             "data-test": "heading"
-        }, o), t));
+        }, a), t));
     }
     Y.propTypes = U;
     /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    Y.filterConsecutive = true;
@@ -351,29 +351,102 @@
     const re = require("@splunk/react-icons/Checkmark");
     var ne =  e.n(re);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const ae = require("@splunk/react-icons/ChevronRight");
-    var ie =  e.n(ae);
+    const oe = require("@splunk/react-icons/ChevronRight");
+    var ie =  e.n(oe);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const oe = require("@splunk/react-ui/ScreenReaderContent");
-    var le =  e.n(oe);
+    const ae = require("@splunk/react-ui/ScreenReaderContent");
+    var le =  e.n(ae);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+    const ce = require("@splunk/react-ui/Tooltip");
+    var se =  e.n(ce);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const se = require("@splunk/ui-utils/i18n");
+    const ue = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
-    const ce = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var ue =  e.n(ce);
+    const de = require("@splunk/react-icons/ArrowSquareTopRightInset");
+    var ve =  e.n(de);
     // CONCATENATED MODULE: ./src/Menu/icons/External.tsx
-    var de = u()(ue()).withConfig({
+    var pe = u()(ve()).withConfig({
         displayName: "External__Styled",
         componentId: "sc-1turs2s-0"
     })([ "vertical-align:text-top;margin:0 0 0 4px;" ]);
-    function ve() {
+    function fe() {
         
-        return n().createElement(de, null);
+        return n().createElement(pe, null);
+    }
+    /* harmony default export */    const be = fe;
+    // 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 me(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
+                        }
+        }
     }
-    /* harmony default export */    const pe = ve;
     // CONCATENATED MODULE: ./src/Menu/Item.tsx
-    function fe() {
-        return fe = Object.assign ? Object.assign.bind() : function(e) {
+    function ye(e) {
+        "@babel/helpers - typeof";
+        return ye = "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;
+        }, ye(e);
+    }
+    function ge(e, t) {
+        var r = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            t && (n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            }))), r.push.apply(r, n);
+        }
+        return r;
+    }
+    function he(e) {
+        for (var t = 1; t < arguments.length; t++) {
+            var r = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? ge(Object(r), !0).forEach((function(t) {
+                Se(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : ge(Object(r)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            }));
+        }
+        return e;
+    }
+    function Se(e, t, r) {
+        return (t = Oe(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[t] = r, e;
+    }
+    function Oe(e) {
+        var t = we(e, "string");
+        return "symbol" == ye(t) ? t : t + "";
+    }
+    function we(e, t) {
+        if ("object" != ye(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var n = r.call(e, t || "default");
+            if ("object" != ye(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === t ? String : Number)(e);
+    }
+    function ke() {
+        return ke = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -381,20 +454,20 @@
                 }
             }
             return e;
-        }, fe.apply(null, arguments);
+        }, ke.apply(null, arguments);
     }
-    function me(e, t) {
+    function xe(e, t) {
         if (null == e) return {};
-        var r, n, a = be(e, t);
+        var r, n, o = Ce(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
-        return a;
+        return o;
     }
-    function be(e, t) {
+    function Ce(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -405,7 +478,7 @@
         }
         return r;
     }
-    var ge = {
+    var je = {
         active: l().bool,
         children: l().node,
         description: l().string,
@@ -434,157 +507,182 @@
         to: l().string,
         truncate: l().bool
     };
-    var ye = (0, se._)("(Opens new window)");
-    function he(e) {
+    var Ie = (0, ue._)("(Opens new window)");
+    function Pe(e) {
         var t;
-        var a = e.active, o = e.children, l = e.description, s = e.descriptionPosition, c = s === void 0 ? "bottom" : s, u = e.disabled, d = e.endAdornment, v = e.elementRef, p = e.hasSubmenu, f = e.itemKey, m = e.matchRanges, b = e.onClick, g = e.onFocus, y = e.openInNewContext, w = e.role, A = e.selectable, D = e.selectableAppearance, N = D === void 0 ? "checkmark" : D, q = e.selected, $ = e.startAdornment, H = e.to, R = e.truncate, M = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
+        var o = e.active, a = e.children, l = e.description, c = e.descriptionPosition, s = c === void 0 ? "bottom" : c, u = e.disabled, d = e.endAdornment, v = e.elementRef, p = e.hasSubmenu, f = e.itemKey, b = e.matchRanges, m = e.onClick, y = e.onFocus, g = e.openInNewContext, O = e.role, D = e.selectable, A = e.selectableAppearance, N = A === void 0 ? "checkmark" : A, R = e.selected, q = e.startAdornment, $ = e.to, H = e.truncate, M = xe(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
         // @docs-props-type ItemPropsBase
                 var F = (0, r.useContext)(T), L = F.preventFocus;
  // Use arguments[0] (raw props) to check if `selectableAppearance` was explicitly passed by the caller.
         // This prevents the default value from incorrectly triggering the dev warning.
         // eslint-disable-next-line prefer-rest-params
-                var K = (t = arguments[0]) === null || t === void 0 ? void 0 : t.selectableAppearance;
+                var B = (t = arguments[0]) === null || t === void 0 ? void 0 : t.selectableAppearance;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ R, c, m, o, q, A, N, K ]);
-        var B = (0, r.useCallback)((function(e) {
-            g === null || g === void 0 ? void 0 : g(e, {
+        }), [ H, s, b, a, R, D, N, B ]);
+        var K = (0, r.useCallback)((function(e) {
+            y === null || y === void 0 ? void 0 : y(e, {
                 itemKey: f
             });
-        }), [ f, g ]);
+        }), [ f, y ]);
         var W = (0, r.useCallback)((function(e) {
             if (L) {
                 e.preventDefault();
             }
         }), [ L ]);
         var z = (0, r.useMemo)((function() {
-            if (!m || !te()(o)) {
-                return o;
+            if (!b || !te()(a)) {
+                return a;
             }
             var e = [];
             // before first match. May be empty string.
-                        e.push(o.substring(0, m[0].start));
-            m.forEach((function(t, r) {
+                        e.push(a.substring(0, b[0].start));
+            b.forEach((function(t, r) {
                 e.push(
                 
                 // eslint-disable-next-line react/no-array-index-key
-                n().createElement(P, {
+                n().createElement(E, {
                     key: r,
                     "data-test": "match"
-                }, o.substring(t.start, t.end)));
-                if (r < m.length - 1) {
-                    e.push(o.substring(t.end, m[r + 1].start));
+                }, a.substring(t.start, t.end)));
+                if (r < b.length - 1) {
+                    e.push(a.substring(t.end, b[r + 1].start));
                 } else {
-                    e.push(o.substring(t.end, o.length));
+                    e.push(a.substring(t.end, a.length));
                 }
             }));
             return e;
-        }), [ o, m ]);
-        var V = q === true || q === "some";
-        var X = A || V;
-        var G = w || {
+        }), [ a, b ]);
+        var V = R === true || R === "some";
+        var X = D || V;
+        var G = O || {
             nonselectable: "menuitem",
             checkmark: "menuitemradio",
             checkbox: "menuitemcheckbox"
         }[X ? N : "nonselectable"];
-        var J = {
-            "aria-haspopup": p ? true : undefined
-        };
+        var J = (0, r.useMemo)((function() {
+            return {
+                "aria-haspopup": p ? true : undefined
+            };
+        }), [ p ]);
         if (G === "menuitemradio" || G === "menuitemcheckbox") {
-            J["aria-checked"] = q === "some" ? "mixed" : V;
+            J["aria-checked"] = R === "some" ? "mixed" : V;
         } else if (G === "option") {
             J["aria-selected"] = V;
         }
-        var Q = l && c === "right";
+        var Q = l && s === "right";
         var U = l && !Q;
-        var Y = q && N === "checkmark" &&  n().createElement(k, null,  n().createElement(ne(), {
-            "data-test": "selected-checkmark",
-            inline: true
-        }));
-        var Z = false;
-        var ee;
-        if (y) {
-            Z = true;
-            ee = typeof y === "string" ? y : ye;
+        var Y = false;
+        var Z;
+        if (g) {
+            Y = true;
+            Z = typeof g === "string" ? g : Ie;
         }
-        
-        return n().createElement(C, fe({
-            $active: a,
-            $isSelectable: X,
-            $preventFocus: L || false,
-            $selectableAppearance: N !== null && N !== void 0 ? N : false,
-            $selected: V,
-            "data-has-icon": !!$ || !!d,
-            "data-test": "item",
-            "data-test-selected": X ? V : null,
-            disabled: u,
-            elementRef: v,
-            onClick: b,
-            onFocus: B,
-            onMouseDown: W,
-            openInNewContext: Z,
-            role: G,
-            tabIndex: L ? -1 : undefined,
-            to: H,
-            title: R && te()(o) ? o : undefined
-        }, J, i()(M, "onFocus")), p &&  n().createElement(j, null,  n().createElement(ie(), null)),  n().createElement(I, null, A && N === "checkbox" &&  n().createElement(x, {
-            checked: q === "some" ? "indeterminate" : q,
-            disabled: !!u,
-            inert: true
-        }), $ &&  n().createElement(O, null, $),  n().createElement(E, {
-            $descriptionBottom: !!U,
-            $truncate: R !== null && R !== void 0 ? R : false
-        },  n().createElement(_, {
-            $truncate: R !== null && R !== void 0 ? R : false,
-            "data-test": "label"
-        }, z, y &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, ee))), U &&  n().createElement(h, {
-            "data-test": "description"
-        }, l), Q &&  n().createElement(S, {
-            "data-test": "description"
-        }, l)), d &&  n().createElement(O, {
-            endAdornment: d
-        }, d), Y));
+        var ee = (0, r.useMemo)((function() {
+            
+            return n().createElement(C, ke({
+                $active: o,
+                $isSelectable: X,
+                $preventFocus: L || false,
+                $selectableAppearance: N !== null && N !== void 0 ? N : false,
+                $selected: V,
+                "data-has-icon": !!q || !!d,
+                "data-test": "item",
+                "data-test-selected": X ? V : null,
+                disabled: u,
+                elementRef: v,
+                onClick: m,
+                onFocus: K,
+                onMouseDown: W,
+                openInNewContext: Y,
+                role: G,
+                tabIndex: L ? -1 : undefined,
+                to: $
+            }, J, i()(M, "onFocus")), p &&  n().createElement(_, null,  n().createElement(ie(), null)),  n().createElement(j, null, D && N === "checkbox" &&  n().createElement(x, {
+                checked: R === "some" ? "indeterminate" : R,
+                disabled: !!u,
+                inert: true
+            }), q &&  n().createElement(k, null, q),  n().createElement(I, {
+                $descriptionBottom: !!U,
+                $truncate: H !== null && H !== void 0 ? H : false
+            },  n().createElement(P, {
+                $truncate: H !== null && H !== void 0 ? H : false,
+                "data-test": "label"
+            }, z, g &&  n().createElement(n().Fragment, null,  n().createElement(be, null),  n().createElement(le(), null, Z))), U &&  n().createElement(h, {
+                "data-test": "description"
+            }, l), Q &&  n().createElement(S, {
+                "data-test": "description"
+            }, l)), d &&  n().createElement(k, {
+                endAdornment: d
+            }, d), R && N === "checkmark" &&  n().createElement(w, null,  n().createElement(ne(), {
+                "data-test": "selected-checkmark",
+                inline: true
+            }))));
+        }), [ o, X, L, N, V, q, d, u, v, m, K, W, Y, G, $, J, M, p, D, R, U, H, z, g, Z, l, Q ]);
+        var re = H && te()(a);
+        var oe = (0, r.useCallback)((function(e) {
+            var t = function t(r) {
+                me(e.elementRef, r);
+                me(ee.props.elementRef, r);
+            };
+            // Merge the anchorProps from Tooltip with the props of the clickable element to ensure consistent behavior for screen readers
+                        var r =  n().cloneElement(ee, he(he(he({}, "aria-describedby" in e ? {
+                "aria-describedby": e["aria-describedby"]
+            } : {}), "aria-labelledby" in e ? {
+                "aria-labelledby": e["aria-labelledby"]
+            } : {}), {}, {
+                onFocus: function t(r) {
+                    var n, o, i;
+                    (n = e.onFocus) === null || n === void 0 ? void 0 : n.call(e, r);
+                    (o = (i = ee.props).onFocus) === null || o === void 0 ? void 0 : o.call(i, r);
+                },
+                onBlur: function t(r) {
+                    var n, o, i;
+                    (n = e.onBlur) === null || n === void 0 ? void 0 : n.call(e, r);
+                    (o = (i = ee.props).onBlur) === null || o === void 0 ? void 0 : o.call(i, r);
+                },
+                onClick: function t(r) {
+                    var n, o, i;
+                    (n = e.onClick) === null || n === void 0 ? void 0 : n.call(e, r);
+                    (o = (i = ee.props).onClick) === null || o === void 0 ? void 0 : o.call(i, r);
+                },
+                elementRef: t
+            }));
+            return r;
+        }), [ ee ]);
+        if (re) {
+            
+            return n().createElement(se(), {
+                content: a,
+                defaultPlacement: "right",
+                inline: false,
+                contentRelationship: "label",
+                renderAnchor: oe
+            });
+        }
+        return ee;
     }
-    he.propTypes = ge;
-    he.as = "Item";
-    /* harmony default export */    const Se = he;
+    Pe.propTypes = je;
+    Pe.as = "Item";
+    /* harmony default export */    const Ee = Pe;
     // only for styled components using Item
         // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
-    const we = require("@splunk/react-ui/Scroll");
-    var ke =  e.n(we);
+    const _e = require("@splunk/react-ui/Scroll");
+    var De =  e.n(_e);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var Oe = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
-    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, Oe);
-    var Ce = u().div.withConfig({
+    var Ae = (0, s.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
+    var Te = (0, s.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, Ae);
+    var Ne = u().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
-    })([ "", "" ], xe);
-    var Ie = u()(ke()).withConfig({
+    })([ "", "" ], Te);
+    var Re = u()(De()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, Oe);
-    // 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 Ee(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
-                        }
-        }
-    }
+    })([ "", " ", " + &,& + ", "{", "}" ], Te, /* sc-sel */ Ne, /* sc-sel */ Ne, Ae);
     // CONCATENATED MODULE: ./src/Menu/Menu.tsx
-    function _e() {
-        return _e = Object.assign ? Object.assign.bind() : function(e) {
+    function qe() {
+        return qe = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -592,20 +690,20 @@
                 }
             }
             return e;
-        }, _e.apply(null, arguments);
+        }, qe.apply(null, arguments);
     }
-    function Pe(e, t) {
+    function $e(e, t) {
         if (null == e) return {};
-        var r, n, a = je(e, t);
+        var r, n, o = He(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
-        return a;
+        return o;
     }
-    function je(e, t) {
+    function He(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -616,14 +714,14 @@
         }
         return r;
     }
-    var Ae = {
+    var Me = {
         children: l().node,
         elementRef: l().oneOfType([ l().func, l().object ]),
         focusMode: l().oneOf([ "roving", "normal", "never" ]),
         stopScrollPropagation: l().bool
     };
     // the default focus control for Menu: loop, verticalArrows(up/down keys), home/end keys
-        var De = function e() {
+        var Fe = function e() {
         return {
             enableLoop: true,
             orientation: "vertical",
@@ -631,20 +729,20 @@
             enableHomeEnd: true
         };
     };
-    var Te = function e(t) {
+    var Le = function e(t) {
         var r = t.key;
  // Handle special case for tab navigation
-                if (r === "Tab" && (0, s.isTabKey)(t.nativeEvent)) {
+                if (r === "Tab" && (0, c.isTabKey)(t.nativeEvent)) {
             return t.shiftKey ? "tabShift" : "Tab";
         }
         return r;
     };
-    function Ne(e) {
-        var t = e.children, a = e.elementRef, o = e.focusMode, l = o === void 0 ? "roving" : o, c = e.stopScrollPropagation, u = Pe(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
+    function Be(e) {
+        var t = e.children, o = e.elementRef, a = e.focusMode, l = a === void 0 ? "roving" : a, s = e.stopScrollPropagation, u = $e(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
                 var d = (0, r.useContext)(T), 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) {
+        var b = 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.
@@ -655,8 +753,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 a = n[r + 1];
-                if (a.type.as === "Heading" || a.type.as === "Divider") {
+                var o = n[r + 1];
+                if (o.type.as === "Heading" || o.type.as === "Divider") {
                     return e;
                 }
             }
@@ -667,62 +765,62 @@
             e.push(t);
             return e;
         }), []);
-        var b = (0, r.useCallback)((function(e) {
+        var m = (0, r.useCallback)((function(e) {
             f.current = e;
-            Ee(a, e);
-        }), [ a ]);
-        var g = De();
-        var y = (0, r.useCallback)((function(e) {
+            me(o, e);
+        }), [ o ]);
+        var y = Fe();
+        var g = (0, r.useCallback)((function(e) {
             // if command key on Mac was pressed ignore
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = Te(e);
+            var t = Le(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 && (g.enableTab || !r)) {
+                        if (!n && (y.enableTab || !r)) {
                 e.preventDefault();
             }
-            var a = f.current;
+            var o = f.current;
             var i = [];
-            if (a) {
-                i = (0, s.getSortedTabbableElements)(a, {
+            if (o) {
+                i = (0, c.getSortedTabbableElements)(o, {
                     ignoreTabIndex: true
                 });
             }
-            var o = e.target instanceof HTMLElement ? e.target : a === null || a === void 0 ? void 0 : a.querySelector(":focus");
-            var l = o instanceof HTMLElement ? i.indexOf(o) : -1;
-            (0, s.handleFocus)(t, i, l, g);
-        }), [ g ]);
+            var a = e.target instanceof HTMLElement ? e.target : o === null || o === void 0 ? void 0 : o.querySelector(":focus");
+            var l = a instanceof HTMLElement ? i.indexOf(a) : -1;
+            (0, c.handleFocus)(t, i, l, y);
+        }), [ y ]);
         var h = function e() {
             return {
                 role: "menu",
                 preventFocus: l === "never"
             };
         };
-        var S = l === "normal" || l === "never" ? undefined : y;
-        var w = {
+        var S = l === "normal" || l === "never" ? undefined : g;
+        var O = {
             "data-test": "menu",
             onKeyDown: S,
             role: p
         };
-        return c ?  n().createElement(Ie, _e({}, w, {
-            elementRef: b,
+        return s ?  n().createElement(Re, qe({}, O, {
+            elementRef: m,
             stopScrollPropagation: true
-        }, i()(u, "tagName")), m) :  n().createElement(Ce, _e({}, w, {
-            ref: b
+        }, i()(u, "tagName")), b) :  n().createElement(Ne, qe({}, O, {
+            ref: m
         }, u),  n().createElement(T.Provider, {
             value: h()
-        }, m));
+        }, b));
     }
-    Ne.propTypes = Ae;
-    Ne.Item = Se;
-    Ne.Divider = H;
-    Ne.Heading = Z;
-    /* harmony default export */    const qe = Ne;
+    Be.propTypes = Me;
+    Be.Item = Ee;
+    Be.Divider = $;
+    Be.Heading = Z;
+    /* harmony default export */    const Ke = Be;
     // CONCATENATED MODULE: ./src/Menu/index.ts
     module.exports = t;
     /******/})();