@splunk/react-ui 5.3.0 → 5.5.0

package/Link.js

@@ -61,48 +61,73 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        default: () => /* reexport */ C
+        LinkContext: () => /* reexport */ y,
+        LinkProvider: () => /* reexport */ m,
+        default: () => /* reexport */ j
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var r =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
+    const i = require("prop-types");
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const i = require("@splunk/react-ui/ScreenReaderContent");
-    var l =  e.n(i);
+    const o = require("@splunk/react-ui/ScreenReaderContent");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const s = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var d =  e.n(c);
+    const d = require("styled-components");
+    var c =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
     const u = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var p =  e.n(u);
+    var f =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const f = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Link/icons/External.tsx
-    var v = d()(p()).withConfig({
+    var b = c()(f()).withConfig({
         displayName: "External",
         componentId: "sc-13bdx45-0"
-    })([ "vertical-align:text-bottom;margin-left:", ";" ], f.variables.spacingXSmall);
-    /* harmony default export */    const b = v;
+    })([ "vertical-align:text-bottom;margin-left:", ";" ], v.variables.spacingXSmall);
+    /* harmony default export */    const p = b;
+    // CONCATENATED MODULE: ./src/Link/LinkContext.tsx
+    var g = {
+        enableVisitedStyling: false
+    };
+    var y =  (0, t.createContext)(g);
+    /**
+ * Control behavior for all children Link components.
+ */    var m = function e(n) {
+        var i = n.enableVisitedStyling, a = i === void 0 ? false : i, o = n.children;
+        // @docs-props-type LinkProviderProps
+                var l = (0, t.useMemo)((function() {
+            return {
+                enableVisitedStyling: a
+            };
+        }), [ a ]);
+        
+        return r().createElement(y.Provider, {
+            value: l
+        }, o);
+    };
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const g = require("@splunk/react-ui/Clickable");
-    var m =  e.n(g);
+    const h = require("@splunk/react-ui/Clickable");
+    var S =  e.n(h);
     // CONCATENATED MODULE: ./src/Link/LinkStyles.ts
-    var h = d()(m()).withConfig({
+    var w = c()(S()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
-    })([ "", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;color:", ";", " &:not([disabled],[aria-disabled='true']){cursor:pointer;&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], f.mixins.reset("inline"), f.variables.contentColorLink, (0, 
-    f.pickVariant)("$appearance", {
-        inline: (0, c.css)([ "text-decoration:underline;" ]),
-        standalone: (0, c.css)([ "font-weight:", ";" ], f.variables.fontWeightSemiBold)
-    }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorAccentWeak);
+    })([ "", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;color:", ";", " &:not([disabled],[aria-disabled='true']){cursor:pointer;&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}", "" ], v.mixins.reset("inline"), v.variables.contentColorLink, (0, 
+    v.pickVariant)("$appearance", {
+        inline: (0, d.css)([ "text-decoration:underline;" ]),
+        standalone: (0, d.css)([ "font-weight:", ";" ], v.variables.fontWeightSemiBold)
+    }), v.variables.contentColorLink, v.variables.focusShadow, v.variables.contentColorLinkDisabled, (function(e) {
+        var n = e.$enableVisitedStyling;
+        return n && (0, d.css)([ "&:visited{color:", ";}&:where([disabled],[aria-disabled='true']):visited{color:", ";}" ], v.variables.contentColorLinkVisited, v.variables.contentColorLinkVisitedDisabled);
+    }));
     // CONCATENATED MODULE: ./src/Link/Link.tsx
-    function y() {
-        return y = Object.assign ? Object.assign.bind() : function(e) {
+    function x() {
+        return x = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -110,20 +135,20 @@
                 }
             }
             return e;
-        }, y.apply(null, arguments);
+        }, x.apply(null, arguments);
     }
-    function w(e, n) {
+    function O(e, n) {
         if (null == e) return {};
-        var t, r, o = O(e, n);
+        var t, r, i = k(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (r = 0; r < a.length; r++) {
-                t = a[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                t = a[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
-        return o;
+        return i;
     }
-    function O(e, n) {
+    function k(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -134,42 +159,47 @@
         }
         return t;
     }
-    var x = {
+    var C = {
         appearance: a().oneOf([ "inline", "standalone" ]),
         children: a().node,
         disabled: a().bool,
         elementRef: a().oneOfType([ a().func, a().object ]),
+        enableVisitedStyling: a().bool,
         openInNewContext: a().oneOfType([ a().bool, a().string ]),
         to: a().string
     };
-    var k = (0, s._)("(Opens new window)");
+    var V = (0, s._)("(Opens new window)");
     /**
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
- */    var S =  r().forwardRef((function(e, 
+ */    var P =  r().forwardRef((function(e, 
     // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
     n) {
-        var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.tag, f = p === void 0 ? "a" : p, v = e.to, g = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "tag", "to" ]);
+        var i = e.appearance, a = i === void 0 ? "inline" : i, o = e.children, s = e.disabled, d = s === void 0 ? false : s, c = e.elementRef, u = e.enableVisitedStyling, f = e.openInNewContext, v = f === void 0 ? false : f, b = e.tag, g = b === void 0 ? "a" : b, m = e.to, h = O(e, [ "appearance", "children", "disabled", "elementRef", "enableVisitedStyling", "openInNewContext", "tag", "to" ]);
         // @docs-props-type LinkPropsBase
-                var m = typeof u === "string" ? u : k;
+                var S = typeof v === "string" ? v : V;
         // Ensure `Link` always renders as an `a` (unless overriden by `tag`) by passing a value to Clickable,
         // using '' if disabled or the to is not passed.
-                var O = s && "" || v && v || "";
+                var k = g !== "button" ? d && "" || m && m || "" : undefined;
+        // Allow the prop to override context
+                var C = (0, t.useContext)(y), P = C.enableVisitedStyling;
+        var j = u !== null && u !== void 0 ? u : P;
         
-        return r().createElement(h, y({
+        return r().createElement(w, x({
             "data-test": "link",
-            disabled: s ? "disabled" : undefined,
+            disabled: d ? "disabled" : undefined,
             elementRef: c,
-            openInNewContext: !!u,
-            $appearance: o,
+            openInNewContext: !!v,
+            $appearance: a,
+            $enableVisitedStyling: j,
             ref: n,
-            to: O
-        }, g, {
-            tag: f
-        }), a, u &&  r().createElement(r().Fragment, null,  r().createElement(b, null),  r().createElement(l(), null, m)));
+            to: k
+        }, h, {
+            tag: g
+        }), o, v &&  r().createElement(r().Fragment, null,  r().createElement(p, null),  r().createElement(l(), null, S)));
     }));
-    S.propTypes = x;
-    /* harmony default export */    const C = S;
+    P.propTypes = C;
+    /* harmony default export */    const j = P;
     // forwardRef appears to prevent TS from inferring LinkProps in components that import Link
     // so we need to export it separately to prevent the TS build from failing with:
     // "... has or is using name 'LinkPropsBase' from external module "...packages/react-ui/src/Link/Link" but cannot be named."

package/MIGRATION.md

@@ -2,12 +2,43 @@
 
 This document lists migration guidance for new features and breaking changes.
 
+## 5.5.0
+
+### Deprecated `Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props
+
+#### Change
+`Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props have been deprecated and will be removed in the next major version.
+
+#### Context
+`Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props have low usage and the same behavior can be achieved in other ways.
+
+#### Migration steps
+* Remove all usage of `Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props.
+* Change the content depending on the `selected` prop's value and do any of the following:
+    * Set the `aria-label` prop to your content and pass the prop into `Switch`
+    * Use the `ScreenReaderContent` component
+    * Place content on screen
+
+### Add new prop `horizontalOverflow` to `Table`
+
+#### Change
+* `Table` supports a new prop called `horizontalOverflow`.
+
+#### Context
+The `Table` component's default overflow behavior has changed between version v4 and v5:
+
+- **v4**: When the `Table`'s container is smaller than the `Table` it will scroll horizontally. `HeadCell` content remains fully visible and `Cell` content wraps only at word breaks.
+- **v5**: The `Table` has a responsive behavior. `HeadCell` content truncates when needed, `Cell` content wraps to fit available space, and horizontal scrolling occurs only when `Table`'s container is smaller than `Table`'s width. 
+
+#### Migration Steps
+* To restore v4 behavior, use `horizontalOverflow="scroll"` prop. This enables horizontal scrolling when `Table` has overflow, keeps `HeadCell` content fully visible, and limits `Cell` content wrapping to word breaks only.
+
 ## 5.3.0
 
 ### `Switch`'s `appearance="checkbox"` prop has been deprecated in favor of new `Checkbox` component.
 
 #### Change
-### `Switch`'s `appearance="checkbox"` prop has been deprecated and will be removed in the next major verion.
+`Switch`'s `appearance="checkbox"` prop has been deprecated and will be removed in the next major version.
 
 #### Context
 The `Switch` component combines two different components - a checkbox and a toggle. While superficially similar in that they both provide a boolean control, they are semantically different controls.

package/Markdown.js

@@ -136,6 +136,7 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, g(e);
     }
+    // eslint-disable-next-line no-relative-imports-of-published -- because MarkdownHeading and MarkdownAnchorHeading come from the same @splunk/react-ui/Markdown top level export so it would be a circular dependency if using the external/alias (ok here because thin/no context)
     // When this is used in MDX, the node isn't guaranteed to be text,
     // so this method extracts the actual text from the node.
         function h(e) {
@@ -799,15 +800,18 @@
                 tbody: Me
             };
         }), [ r, g, c, u, s, d, v, y ]);
+        var w = (0, n.useMemo)((function() {
+            // prettier-ignore
+            return {
+                pre: (0, f.css)([ ":is(", ")" ], S),
+                blockquote: (0, f.css)([ ":is(", ")" ], x)
+            };
+        }), []);
         
         return t().createElement(p(), Ue({
             "data-test": "markdown",
             elementRef: i,
-            elementSelectors: {
-                /* stylelint-disable */
-                pre: (0, f.css)([ ":is(", ")" ], S),
-                blockquote: (0, f.css)([ ":is(", ")" ], x)
-                /* stylelint-enable */            }
+            elementSelectors: w
         }, O),  t().createElement(a(), Ue({
             remarkPlugins: Qe,
             components: h

package/Menu.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Divider: () => /* reexport */ R,
+        Divider: () => /* reexport */ H,
         Heading: () => /* reexport */ Z,
         Item: () => /* reexport */ Se,
-        MenuContext: () => /* reexport */ N,
+        MenuContext: () => /* reexport */ T,
         default: () => /* reexport */ qe
     });
     // CONCATENATED MODULE: external "react"
@@ -180,10 +180,10 @@
         role: "menu",
         preventFocus: false
     });
-    /* harmony default export */    const N = D;
+    /* harmony default export */    const T = D;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
-    function T() {
-        return T = Object.assign ? Object.assign.bind() : function(e) {
+    function N() {
+        return N = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -191,16 +191,16 @@
                 }
             }
             return e;
-        }, T.apply(null, arguments);
+        }, N.apply(null, arguments);
     }
     var q = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
  */    function $(e) {
-        var t = T({}, e);
-        var a = (0, r.useContext)(N), i = a.role;
+        var t = N({}, e);
+        var a = (0, r.useContext)(T), i = a.role;
         
-        return n().createElement(A, T({
+        return n().createElement(A, N({
             "aria-hidden": i === "listbox",
             "data-test": "divider",
             role: "separator"
@@ -211,16 +211,16 @@
     /* 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 R = $;
+    /* harmony default export */    const H = $;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
-    const H = require("@splunk/react-ui/Heading");
-    var F =  e.n(H);
+    const R = require("@splunk/react-ui/Heading");
+    var M =  e.n(R);
     // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
-    var M = u().div.withConfig({
+    var F = u().div.withConfig({
         displayName: "HeadingStyles__Styled",
         componentId: "mcd2ws-0"
     })([ "", " border-top:1px solid transparent;padding:", " ", ";&:not(:first-child){border-top:1px solid ", ";margin-top:", ";}" ], p.mixins.reset("block"), p.variables.spacingSmall, p.variables.spacingLarge, p.variables.borderColor, p.variables.spacingSmall);
-    var L = u()(F()).withConfig({
+    var L = u()(M()).withConfig({
         displayName: "HeadingStyles__StyledHeading",
         componentId: "mcd2ws-1"
     })([ "color:", ";" ], p.variables.contentColorDefault);
@@ -319,7 +319,7 @@
  */    function Y(e) {
         var t = e.children, a = e.outerStyle, i = e.title, o = J(e, [ "children", "outerStyle", "title" ]);
         // @docs-props-type HeadingPropsBase
-                var l = (0, r.useContext)(N), s = l.role;
+                var l = (0, r.useContext)(T), s = l.role;
         var c = (0, r.useMemo)((function() {
             return z(z({}, a), {}, {
                 margin: 0
@@ -330,7 +330,7 @@
         // 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(M, {
+        return n().createElement(F, {
             "aria-hidden": s === "listbox" ? true : undefined
         },  n().createElement(L, B({
             style: c,
@@ -436,109 +436,114 @@
     };
     var ye = (0, se._)("(Opens new window)");
     function he(e) {
-        var t = e.active, a = e.children, o = e.description, l = e.descriptionPosition, s = l === void 0 ? "bottom" : l, c = e.disabled, u = e.endAdornment, d = e.elementRef, v = e.hasSubmenu, p = e.itemKey, f = e.matchRanges, m = e.onClick, b = e.onFocus, g = e.openInNewContext, y = e.role, w = e.selectable, A = e.selectableAppearance, D = A === void 0 ? "checkmark" : A, T = e.selected, q = e.startAdornment, $ = e.to, R = e.truncate, H = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
+        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" ]);
         // @docs-props-type ItemPropsBase
-                var F = (0, r.useContext)(N), M = F.preventFocus;
+                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;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ R, s, f, a, T, w, D ]);
-        var L = (0, r.useCallback)((function(e) {
-            b === null || b === void 0 ? void 0 : b(e, {
-                itemKey: p
+        }), [ R, c, m, o, q, A, N, K ]);
+        var B = (0, r.useCallback)((function(e) {
+            g === null || g === void 0 ? void 0 : g(e, {
+                itemKey: f
             });
-        }), [ p, b ]);
-        var K = (0, r.useCallback)((function(e) {
-            if (M) {
+        }), [ f, g ]);
+        var W = (0, r.useCallback)((function(e) {
+            if (L) {
                 e.preventDefault();
             }
-        }), [ M ]);
-        var B = (0, r.useMemo)((function() {
-            if (!f || !te()(a)) {
-                return a;
+        }), [ L ]);
+        var z = (0, r.useMemo)((function() {
+            if (!m || !te()(o)) {
+                return o;
             }
             var e = [];
             // before first match. May be empty string.
-                        e.push(a.substring(0, f[0].start));
-            f.forEach((function(t, r) {
+                        e.push(o.substring(0, m[0].start));
+            m.forEach((function(t, r) {
                 e.push(
                 
                 // eslint-disable-next-line react/no-array-index-key
                 n().createElement(P, {
                     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));
+                }, o.substring(t.start, t.end)));
+                if (r < m.length - 1) {
+                    e.push(o.substring(t.end, m[r + 1].start));
                 } else {
-                    e.push(a.substring(t.end, a.length));
+                    e.push(o.substring(t.end, o.length));
                 }
             }));
             return e;
-        }), [ a, f ]);
-        var W = T === true || T === "some";
-        var z = w || W;
-        var V = y || {
+        }), [ o, m ]);
+        var V = q === true || q === "some";
+        var X = A || V;
+        var G = w || {
             nonselectable: "menuitem",
             checkmark: "menuitemradio",
             checkbox: "menuitemcheckbox"
-        }[z ? D : "nonselectable"];
-        var X = {
-            "aria-haspopup": v ? true : undefined
+        }[X ? N : "nonselectable"];
+        var J = {
+            "aria-haspopup": p ? true : undefined
         };
-        if (V === "menuitemradio" || V === "menuitemcheckbox") {
-            X["aria-checked"] = T === "some" ? "mixed" : W;
-        } else if (V === "option") {
-            X["aria-selected"] = W;
+        if (G === "menuitemradio" || G === "menuitemcheckbox") {
+            J["aria-checked"] = q === "some" ? "mixed" : V;
+        } else if (G === "option") {
+            J["aria-selected"] = V;
         }
-        var G = o && s === "right";
-        var J = o && !G;
-        var Q = T && D === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
+        var Q = l && c === "right";
+        var U = l && !Q;
+        var Y = q && N === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
             "data-test": "selected-checkmark",
             inline: true
         }));
-        var U = false;
-        var Y;
-        if (g) {
-            U = true;
-            Y = typeof g === "string" ? g : ye;
+        var Z = false;
+        var ee;
+        if (y) {
+            Z = true;
+            ee = typeof y === "string" ? y : ye;
         }
         
         return n().createElement(C, fe({
-            $active: t,
-            $isSelectable: z,
-            $preventFocus: M || false,
-            $selectableAppearance: D !== null && D !== void 0 ? D : false,
-            $selected: W,
-            "data-has-icon": !!q || !!u,
+            $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": z ? W : null,
-            disabled: c,
-            elementRef: d,
-            onClick: m,
-            onFocus: L,
-            onMouseDown: K,
-            openInNewContext: U,
-            role: V,
-            tabIndex: M ? -1 : undefined,
-            to: $,
-            title: R && te()(a) ? a : undefined
-        }, X, i()(H, "onFocus")), v &&  n().createElement(j, null,  n().createElement(ie(), null)),  n().createElement(I, null, w && D === "checkbox" &&  n().createElement(x, {
-            checked: T === "some" ? "indeterminate" : T,
-            disabled: !!c,
+            "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
-        }), q &&  n().createElement(k, null, q),  n().createElement(E, {
-            $descriptionBottom: !!J,
+        }), $ &&  n().createElement(k, 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"
-        }, B, g &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, Y))), J &&  n().createElement(h, {
+        }, z, y &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, ee))), U &&  n().createElement(h, {
             "data-test": "description"
-        }, o), G &&  n().createElement(S, {
+        }, l), Q &&  n().createElement(S, {
             "data-test": "description"
-        }, o)), u &&  n().createElement(k, {
-            endAdornment: u
-        }, u), Q));
+        }, l)), d &&  n().createElement(k, {
+            endAdornment: d
+        }, d), Y));
     }
     he.propTypes = ge;
     he.as = "Item";
@@ -626,18 +631,18 @@
             enableHomeEnd: true
         };
     };
-    var Ne = function e(t) {
+    var Te = function e(t) {
         var r = t.key;
  // Handle special case for tab navigation
-                if (r === "Tab" && (0, s.isTabKey)(t)) {
+                if (r === "Tab" && (0, s.isTabKey)(t.nativeEvent)) {
             return t.shiftKey ? "tabShift" : "Tab";
         }
         return r;
     };
-    function Te(e) {
+    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" ]);
         // @docs-props-type MenuPropsBase
-                var d = (0, r.useContext)(N), v = d.role, p = v === void 0 ? "menu" : v;
+                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) {
             /* Filter out initial Dividers
@@ -672,7 +677,7 @@
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = Ne(e);
+            var t = Te(e);
             var r = t === "Tab" || t === "tabShift";
             var n = t === "Enter";
             // Allow default behavior for the enter key.
@@ -688,11 +693,9 @@
                     ignoreTabIndex: true
                 });
             }
-            var o = (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 c = o || l;
-            var u = c ? i.indexOf(c) : -1;
-            (0, s.handleFocus)(t, i, u, g);
+            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 h = function e() {
             return {
@@ -711,15 +714,15 @@
             stopScrollPropagation: true
         }, i()(u, "tagName")), m) :  n().createElement(Ce, _e({}, w, {
             ref: b
-        }, u),  n().createElement(N.Provider, {
+        }, u),  n().createElement(T.Provider, {
             value: h()
         }, m));
     }
-    Te.propTypes = Ae;
-    Te.Item = Se;
-    Te.Divider = R;
-    Te.Heading = Z;
-    /* harmony default export */    const qe = Te;
+    Ne.propTypes = Ae;
+    Ne.Item = Se;
+    Ne.Divider = H;
+    Ne.Heading = Z;
+    /* harmony default export */    const qe = Ne;
     // CONCATENATED MODULE: ./src/Menu/index.ts
     module.exports = t;
     /******/})();