@splunk/react-ui 4.42.0 → 4.44.0

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
@@ -46,6 +67,17 @@ Remove usages of the `iconSize` prop.
 
 ## 4.39.0
 
+### Deprecated `Menu.Item`'s `icon` prop
+
+#### Change
+`Menu.Item`'s `icon` prop is deprecated and will be removed in a future major version.
+
+#### Context
+The `Menu.Item` icon should not be used as `Menu.Item` as that restricted the location of the icon and it is now possible to place an adornment at the start or the end of the `Menu.Item` content.
+
+#### Migration steps
+Replace all usage of `Menu.Item`'s `icon` prop with `startAdornment` and/or `endAdornment`.
+
 ### Deprecated `TabBar` and `TabLayout`'s `appearance` prop
 
 #### Change
@@ -60,7 +92,7 @@ Due to these factors, the `"context"` appearance has poor accessibility on two f
 * it makes it difficult to distinguish the tabs from the content
 * it has poor contrast between the selected and unselected tabs
 
-The existance of this appearance has also encouraged uses of these components where tabs are not appropriate.
+The existence of this appearance has also encouraged uses of these components where tabs are not appropriate.
 
 Additionally, this appearance has only been supported in Prisma themes, leading to visual inconsistency with Enterprise themes.
 
@@ -98,6 +130,22 @@ There are two possible use cases for a selectable `Button`:
 1) If the `Button` was used as part of a `ButtonGroup`, replace it with a `RadioBar`.
 2) If the `Button` was used standalone, replace it with a `Switch` with `appearance="toggle"`.
 
+## 4.36.0
+
+### Deprecated `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop
+
+#### Change
+
+`ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+The `size` prop currently does not do anything in `ComboBox`, `ControlGroup`, or `StaticContent`, so it will be removed in the next major version.
+
+#### Migration steps
+
+Remove all usage of `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop. To change the size of components, use the `SplunkThemeProvider`'s `density` prop.
+
 ## 4.35.0
 
 ### Deprecated `Menu`'s `retainFocus` prop
@@ -142,7 +190,7 @@ For Enterprise themes:
 * the `"pill"` value can be replaced with `"subtle"` with no other changes.
 
 For Prisma themes:
-* the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
+* the `"flat"` appearance can be replaced with `"subtle"`.
 * the `"toggle"` appearance can be replaced with `"default"`.
 
 ### Improved `Card.Header` accessibility when rendering actions
@@ -201,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
 
@@ -223,6 +271,21 @@ and move them to the new `actions` prop.
 
 ## 4.30.0
 
+### Deprecated `Text`'s `appearance` prop
+
+#### Change
+
+`Text`'s `appearance` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+`Text`'s `appearance` prop allowed the values "default" and "search".
+With the new `Search` component optimized for user interaction, Text's `appearance` prop has become unnecessary.
+
+#### Migration steps
+
+Replace all usage of `Text`'s `appearance="search"` value with the `Search` component. Remove all usage of `Text`'s `appearance="default"` value.
+
 ### Deprecated `NavigationProvider`'s `prefix` prop
 
 #### Change
@@ -397,7 +460,7 @@ const StyledSHeading = styled(Heading)`
     })};
 `;
 
-<StyledSHeading level={4} variant="title4"/>
+<StyledSHeading level={5} variant="title4"/>
 ```
 
 `level="ss"` styling:
@@ -410,7 +473,7 @@ const StyledSSHeading = styled(Heading)`
     })};
 `;
 
-<StyledSHeading level={5} variant="title5"/>
+<StyledSHeading level={6} variant="title5"/>
 ```
 
 *Prisma*
@@ -423,14 +486,14 @@ const StyledSHeading = styled(Heading)`
     color: ${variables.contentColorDefault};
 `;
 
-<StyledSHeading level={4} variant="title4"/>
+<StyledSHeading level={5} variant="title4"/>
 ```
 
 `level="ss"` styling:
 
 ```jsx
 No styling is needed.
-<Heading level="ss"> is equivalent to <StyledSHeading level={5} variant="title5"/>
+<Heading level="ss"> is equivalent to <StyledSHeading level={6} variant="title5"/>
 ```
 
 ## 4.17.1
@@ -724,50 +787,3 @@ Previously, `Tooltip` closed as soon as a user stopped hovering over the toggle.
 
 #### Migration steps
 Replace all usage of `Popover`’s `pointerEvents` prop with `possibleOpenReasons` and `possibleCloseReasons`.
-
-## 4.30.0
-
-### Deprecated `Text`'s `appearance` prop
-
-#### Change
-
-`Text`'s `appearance` prop has been deprecated and will be removed in the next major version.
-
-#### Context
-
-`Text`'s `appearance` prop allowed the values "default" and "search".
-With the new `Search` component optimized for user interaction, Text's `appearance` prop has become unnecessary.
-
-#### Migration steps
-
-Replace all usage of `Text`'s `appearance="search"` value with the `Search` component. Remove all usage of `Text`'s `appearance="default"` value.
-
-## 4.36.0
-
-### Deprecated `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop
-
-#### Change
-
-`ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop has been deprecated and will be removed in the next major version.
-
-#### Context
-
-The `size` prop currently does not do anything in `ComboBox`, `ControlGroup`, or `StaticContent`, so it will be removed in the next major version.
-
-#### Migration steps
-
-Remove all usage of `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop. To change the size of components, use the `SplunkThemeProvider`'s `density` prop.
-
-## 4.39.0
-
-### Deprecated `Menu.Item`'s `icon` prop
-
-#### Change
-`Menu.Item`'s `icon` prop is deprecated and will be removed in a future major version.
-
-#### Context
-The `Menu.Item` icon should not be used as `Menu.Item` as that restricted the location of the icon and it is now possible to place an adornment at the start or the end of the `Menu.Item` content.
-
-#### Migration steps
-Replace all usage of `Menu.Item`'s `icon` prop with `startAdornment` and/or `endAdornment`.
-

package/Menu.js

@@ -294,8 +294,8 @@
     const L = require("lodash/isString");
     var z =  e.n(L);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const B = require("@splunk/react-icons/ChevronRight");
-    var K =  e.n(B);
+    const K = require("@splunk/react-icons/ChevronRight");
+    var B =  e.n(K);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
     const W = require("@splunk/react-icons/Checkmark");
     var G =  e.n(W);
@@ -368,7 +368,7 @@
     var ce = d()(te()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
-    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
+    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";", ",", "{color:inherit;}", "{color:", ";}", "}", "" ], (0, 
     m.pick)({
         prisma: m.variables.contentColorActive,
         enterprise: {
@@ -668,10 +668,10 @@
         }) : e[t] = r, e;
     }
     function ze(e) {
-        var t = Be(e, "string");
+        var t = Ke(e, "string");
         return "symbol" == Ee(t) ? t : t + "";
     }
-    function Be(e, t) {
+    function Ke(e, t) {
         if ("object" != Ee(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -681,7 +681,7 @@
         }
         return ("string" === t ? String : Number)(e);
     }
-    var Ke = {
+    var Be = {
         active: o().bool,
         children: o().node,
         description: o().string,
@@ -871,7 +871,7 @@
                 }), o &&  n().createElement(me, null, S ?  n().createElement(Y(), {
                     hideDefaultTooltip: true,
                     screenReaderText: null
-                }) :  n().createElement(K(), null)), T &&  n().createElement(ae, {
+                }) :  n().createElement(B(), null)), T &&  n().createElement(ae, {
                     "data-test": "description"
                 }, u),  n().createElement(ue, null, x ?  n().createElement(se, null, x) : p &&  n().createElement(se, null, p),  n().createElement(de, {
                     $truncate: y
@@ -887,7 +887,7 @@
         } ]);
         return r;
     }(r.Component);
-    Le(Ve, "propTypes", Ke);
+    Le(Ve, "propTypes", Be);
     Le(Ve, "defaultProps", We);
     Le(Ve, "as", void 0);
     Le(Ve, "contextType", h);
@@ -985,7 +985,7 @@
         // @docs-props-type MenuPropsBase
                 if (false) {}
         var d = (0, r.useContext)(h), f = d.role, v = f === void 0 ? "menu" : f;
-        var m = (0, r.useContext)(s.PopoverContext), b = m.retainFocus;
+        var m = (0, r.useContext)(s.PopoverMenuContext), b = m.retainFocus;
         var y = (0, r.useRef)(null);
         var g = true;
         if (a != null) {
@@ -1024,6 +1024,10 @@
         }), [ i ]);
         var w = lt(g);
         var S = (0, r.useCallback)((function(e) {
+            // if command key on Mac was pressed ignore
+            if (e.nativeEvent.metaKey) {
+                return;
+            }
             var t = st(e);
             var r = t === "tab" || t === "tabShift";
             var n = t === "enter";

package/Multiselect.js

@@ -1176,7 +1176,7 @@
                 role: "combobox",
                 "aria-expanded": "true",
                 "aria-controls": c,
-                "aria-owns": l ? n : undefined,
+                "aria-owns": w && l ? n : undefined,
                 "aria-label": (0, s._)("Filter"),
                 "aria-autocomplete": "list",
                 "aria-activedescendant": w && l ? n : undefined,