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

package/Layout.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Layout';
+export * from './types/src/Layout';

package/Link.js

@@ -76,26 +76,26 @@
     const s = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const c = require("styled-components");
-    var u =  e.n(c);
+    var d =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
-    const d = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var p =  e.n(d);
+    const u = require("@splunk/react-icons/ArrowSquareTopRightInset");
+    var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
     const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Link/icons/External.tsx
-    var b = u()(p()).withConfig({
+    var b = d()(p()).withConfig({
         displayName: "External",
         componentId: "sc-13bdx45-0"
     })([ "vertical-align:text-bottom;margin-left:", ";" ], f.variables.spacingXSmall);
     /* harmony default export */    const v = b;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const m = require("@splunk/react-ui/Clickable");
-    var y =  e.n(m);
+    var h =  e.n(m);
     // CONCATENATED MODULE: ./src/Link/LinkStyles.ts
-    var h = u()(y()).withConfig({
+    var y = d()(h()).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;}&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], f.mixins.reset("inline"), f.variables.contentColorLink, (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)
@@ -147,19 +147,19 @@
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
  */    var k =  r().forwardRef((function(e, 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, u = e.openInNewContext, d = u === void 0 ? false : u, p = e.to, f = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "to" ]);
+        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.to, f = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "to" ]);
         // @docs-props-type LinkPropsBase
-                var b = typeof d === "string" ? d : S;
+                var b = typeof u === "string" ? u : S;
         
-        return r().createElement(h, g({
+        return r().createElement(y, g({
             "data-test": "link",
             disabled: s,
             elementRef: c,
-            openInNewContext: !!d,
+            openInNewContext: !!u,
             $appearance: o,
             ref: n,
             to: s ? "" : p
-        }, f), a, d &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, b)));
+        }, f), a, u &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, b)));
     }));
     k.propTypes = x;
     /* harmony default export */    const C = k;

package/MIGRATION.mdx

@@ -5,6 +5,27 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.44.0 
+
+### `ButtonGroup` role changed to `group`
+
+### Change
+
+`ButtonGroup`'s `role` has changed from `menubar` to `group`.
+Child `Button`'s `role`s have changed from `menuitem` to `button`.
+
+#### Context
+
+`ButtonGroup` did not implement the correct keyboard behavior for a menu bar.
+This created an unexpected user experience for keyboard and screen reader users.
+
+#### Migration steps
+
+If `role="group"` is not desired: 
+* consider using `RadioBar` which supports `role="menubar"`
+* implement either the [Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) or [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) pattern according to WCAG guidelines using `ButtonGroup`
+* contact the Design System team to make a feature request based on your use case.
+
 ## 4.40.0
 
 ### Deprecated `Select`'s `appearance="primary"` value
@@ -228,7 +249,7 @@ For Enterprise themes:
 
 For Prisma themes:
 * the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
-* the `"toggle"` appearance can be replaced with `"default"`.
+* the `"toggle"` appearance can be replaced with `"secondary"`.
 
 ### Deprecated `CollapsiblePanel`'s `titleWithActions` prop
 

package/MIGRATION.v5.mdx

@@ -207,7 +207,7 @@ Components that formerly supported class focus methods (`Color`, `Link`, `Menu`,
 ### Migration steps
 - Convert all usage of `ref` to `elementRef`.
 - For `Number` and `Text`: Replace all usage of the class `focus` method with passing a `ref` to the `inputRef` prop and calling `inputRef.current.focus()`.
-- For `Button`, `Color`, `Link`, `Menu`, `Select.Option`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
+- For `Button`, `Color`, `Link`, `Menu`, `Multiselect.Option`, `Select.Option`, `SplitButton.Item`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
 - For `Table.HeadDropdownCell`: Replace all usage of the class `focus` method with passing a `ref` to the `buttonRef` prop and calling `buttonRef.current.focus()`.
 - For `Switch`: Replace all usage of the class `focus` method with passing a `ref` to the `toggleRef` prop and calling `toggleRef.current.focus()`.
 - For `Slider`: Replace all usage of the class `focus` method with passing a `ref` to the `thumbRef` prop and calling `thumbRef.current.focus()`.
@@ -261,6 +261,17 @@ This difference can cause confusion and conflict with accessibility expectations
 #### Migration steps
 - Replace Select with appearance="link" by using either appearance="default" or appearance="subtle", depending on design requirements.
 
+### Deprecated `Multiselect`'s `selectAllAppearance="buttongroup"` value
+
+#### Change
+`Multiselect`'s `"buttongroup"` value of the `selectAllAppearance` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+Using `Multiselect`'s `selectAllAppearance="checkbox"` will fix accessibility issue by making it easier to toggle between "select all" and "select none" with one less tab stop.
+
+#### Migration steps
+- Replace `Mulitselect`'s `selectAllAppearance="buttongroup"` with `selectAllAppearance="checkbox"`.
+
 ## Markdown users `react-markdown`
 
 ### Change

package/Menu.js

@@ -72,10 +72,10 @@
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var o =  e.n(a);
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
-    const i = require("lodash/omit");
-    var l =  e.n(i);
+    const o = require("lodash/omit");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const s = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
@@ -109,21 +109,21 @@
         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({
+    var x = 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({
+    var C = d()(g()).withConfig({
         displayName: "ItemStyles__StyledNonInteractiveCheckbox",
         componentId: "sc-4kc053-4"
-    })([ "padding-right:", ";" ], f.variables.spacingSmall);
+    })([ "min-height:0;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) {
+    })([ "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:", ";", ",", ",", ",", "{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) {
@@ -140,7 +140,7 @@
     }), 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);
+    }), f.variables.focusShadowInset, f.variables.interactiveColorOverlayHover, f.variables.contentColorDisabled, /* sc-sel */ S, /* sc-sel */ w, /* sc-sel */ O, /* sc-sel */ x, f.variables.contentColorDisabled);
     var E = d().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
@@ -175,7 +175,7 @@
     var D = d()(p()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
-    })([ "border-color:", ";", " + &,& + ", "{margin-block-start:", ";}" ], f.variables.borderColor, I, I, f.variables.spacingSmall);
+    })([ "", " + &,& + ", "{margin-block-start:", ";}" ], I, I, f.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
     var q =  (0, r.createContext)({
         role: "menu",
@@ -200,10 +200,10 @@
  */    function $(e) {
         var t = R({}, e);
         // @docs-props-type DividerPropsBase
-                var a = (0, r.useContext)(A), o = a.role;
+                var a = (0, r.useContext)(A), i = a.role;
         
         return n().createElement(D, R({
-            "aria-hidden": o === "listbox",
+            "aria-hidden": i === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
@@ -293,9 +293,9 @@
         if (null == e) return {};
         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) && (a[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -312,14 +312,14 @@
         return r;
     }
     var Y = {
-        children: o().node,
-        title: o().bool,
-        outerStyle: o().object
+        children: i().node,
+        title: i().bool,
+        outerStyle: i().object
     };
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */    function Z(e) {
-        var t = e.children, a = e.outerStyle, o = e.title, i = Q(e, [ "children", "outerStyle", "title" ]);
+        var t = e.children, a = e.outerStyle, i = e.title, o = Q(e, [ "children", "outerStyle", "title" ]);
         var l = (0, r.useContext)(A), s = l.role;
         var c = (0, r.useMemo)((function() {
             return V(V({}, a), {}, {
@@ -335,10 +335,10 @@
             "aria-hidden": s === "listbox" ? true : undefined
         },  n().createElement(K, W({
             style: c,
-            level: o ? 4 : 5,
-            variant: o ? "title5" : "title6",
+            level: i ? 4 : 5,
+            variant: i ? "title5" : "title6",
             "data-test": "heading"
-        }, i), t));
+        }, o), t));
     }
     Z.propTypes = Y;
     /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    Z.filterConsecutive = true;
@@ -352,8 +352,8 @@
     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);
+    const ie = require("@splunk/react-icons/ChevronRight");
+    var oe =  e.n(ie);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const le = require("@splunk/react-ui/ScreenReaderContent");
     var se =  e.n(le);
@@ -388,9 +388,9 @@
         if (null == e) return {};
         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) && (a[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -407,37 +407,37 @@
         return r;
     }
     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" ]) ]),
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        endAdornment: o().node,
-        hasSubmenu: o().bool,
+        active: i().bool,
+        children: i().node,
+        description: i().string,
+        descriptionPosition: i().oneOf([ "right", "bottom" ]),
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        endAdornment: i().node,
+        hasSubmenu: i().bool,
         /** @private. The internal key of the tab */
-        itemKey: o().number,
-        matchRanges: o().arrayOf(o().shape({
-            start: o().number.isRequired,
-            end: o().number.isRequired
+        itemKey: i().number,
+        matchRanges: i().arrayOf(i().shape({
+            start: i().number.isRequired,
+            end: i().number.isRequired
         })),
-        onClick: o().func,
+        onClick: i().func,
         /** @private */
-        onFocus: o().func,
-        openInNewContext: o().oneOfType([ o().bool, o().string ]),
+        onFocus: i().func,
+        openInNewContext: i().oneOfType([ i().bool, i().string ]),
         /** @private */
-        preventFocus: o().bool,
-        role: o().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
-        selectable: o().bool,
-        selectableAppearance: o().oneOf([ "checkmark", "checkbox" ]),
-        selected: o().oneOfType([ o().bool, o().oneOf([ "some" ]) ]),
-        startAdornment: o().node,
-        to: o().string,
-        truncate: o().bool
+        preventFocus: i().bool,
+        role: i().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
+        selectable: i().bool,
+        selectableAppearance: i().oneOf([ "checkmark", "checkbox" ]),
+        selected: i().oneOfType([ i().bool, i().oneOf([ "some" ]) ]),
+        startAdornment: i().node,
+        to: i().string,
+        truncate: i().bool
     };
     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 t = e.active, a = e.children, i = e.description, o = e.descriptionPosition, s = o === void 0 ? "bottom" : o, 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) {}
@@ -490,8 +490,8 @@
         } else if (V === "option") {
             X["aria-selected"] = W;
         }
-        var G = o && s === "right";
-        var J = o && !G;
+        var G = i && s === "right";
+        var J = i && !G;
         var Q = q && D === "checkmark" &&  n().createElement(O, null,  n().createElement(ae(), {
             inline: true
         }));
@@ -521,10 +521,10 @@
             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, {
+        }, X, l()(H, "onFocus")), v &&  n().createElement(N, null,  n().createElement(oe(), null)),  n().createElement(E, null, h && D === "checkbox" &&  n().createElement(C, {
             disabled: !!c,
             selected: q
-        }), R &&  n().createElement(C, null, R),  n().createElement(_, {
+        }), R &&  n().createElement(x, null, R),  n().createElement(_, {
             $descriptionBottom: !!J,
             $truncate: $ !== null && $ !== void 0 ? $ : false
         },  n().createElement(P, {
@@ -532,9 +532,9 @@
             "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, {
+        }, i), G &&  n().createElement(w, {
             "data-test": "description"
-        }, o)), u &&  n().createElement(C, {
+        }, i)), u &&  n().createElement(x, {
             endAdornment: u
         }, u), Q));
     }
@@ -546,16 +546,16 @@
     const ke = require("@splunk/react-ui/Scroll");
     var Oe =  e.n(ke);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    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 xe = (0, u.css)([ "border-top:1px solid ", ";" ], f.variables.borderColor);
+    var Ce = (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, xe);
     var Ie = d().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
-    })([ "", "" ], xe);
+    })([ "", "" ], Ce);
     var Ee = d()(Oe()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ie, /* sc-sel */ Ie, Ce);
+    })([ "", " ", " + &,& + ", "{", "}" ], Ce, /* sc-sel */ Ie, /* sc-sel */ Ie, xe);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -591,9 +591,9 @@
         if (null == e) return {};
         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) && (a[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -610,10 +610,10 @@
         return r;
     }
     var De = {
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        focusMode: o().oneOf([ "roving", "normal", "never" ]),
-        stopScrollPropagation: o().bool
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        focusMode: i().oneOf([ "roving", "normal", "never" ]),
+        stopScrollPropagation: i().bool
     };
     // the default focus control for Menu: loop, verticalArrows(up/down keys), home/end keys
         var qe = function e() {
@@ -633,7 +633,7 @@
         return r;
     };
     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" ]);
+        var t = e.children, a = e.elementRef, i = e.focusMode, o = i === void 0 ? "roving" : i, s = e.stopScrollPropagation, u = je(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
                 var d = (0, r.useContext)(A), v = d.role, p = v === void 0 ? "menu" : v;
         var f = (0, r.useRef)(null);
@@ -680,25 +680,25 @@
                 e.preventDefault();
             }
             var a = f.current;
-            var o = [];
+            var i = [];
             if (a) {
-                o = (0, c.getSortedTabbableElements)(a, {
+                i = (0, c.getSortedTabbableElements)(a, {
                     ignoreTabIndex: true
                 });
             }
-            var i = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
+            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 s = i || l;
-            var u = s ? o.indexOf(s) : -1;
-            (0, c.handleFocus)(t, o, u, y);
+            var s = o || l;
+            var u = s ? i.indexOf(s) : -1;
+            (0, c.handleFocus)(t, i, u, y);
         }), [ y ]);
         var h = function e() {
             return {
                 role: "menu",
-                preventFocus: i === "never"
+                preventFocus: o === "never"
             };
         };
-        var S = i === "normal" || i === "never" ? undefined : g;
+        var S = o === "normal" || o === "never" ? undefined : g;
         var w = {
             "data-test": "menu",
             onKeyDown: S,