@splunk/react-ui 4.32.0 → 4.34.0

package/CHANGELOG.md

@@ -1,6 +1,60 @@
 Change Log
 ============
 
+4.34.0 - August 7, 2024
+----------
+New Features:
+* `RadioBar` supports new prop `role` for either `radiogroup` (default) or `menubar` (SUI-6335).
+* `CollapsiblePanel` has a new `actions` prop for rendering the toggle button and interactive elements separate from `title`, reserving the `title` prop for text only (SUI-5999).
+    * If using the new `actions` prop, the toggle button supports `aria-labelledby` with the title and the panel body supports `role='region'`.
+* `Select` now supports `appearance="subtle"` with the same visual appearance as the Enterprise `"pill"` and Prisma `"secondary"` appearances (SUI-6440).
+* `Card` has a new `actions` prop for rendering card actions. This should be used to add unambiguous labels to the secondary actions, see the migration guide for details (SUI-5881).
+* `Card` has a new `tag` prop for overriding the default HTML tag (SUI-5881).
+
+Bug Fixes:
+* `CollapsiblePanel` now correctly announces its expanded state to a11y tools in Firefox (SUI-5999).
+* `RadioBar` no longer warns about the deprecated `appearance` prop when the default value is used.
+* `Button` now shows focus styling when hovered (SUI-6357).
+* `Button`s with an `appearance` of `primary` or `destructive` no longer have incorrect background colors on focus when `disabled="dimmed"` (SUI-6357).
+* `JSONTree's` active border has been removed to avoid a layout shift (SUI-6324).
+* `CollapsiblePanel`'s focus shadow has been updated to improve contrast (SUI-6340).
+* `Search`'s `role` has been changed from `"textbox"` to `"searchbox"`. 
+* `Search`'s default labels have been removed to avoid redundant screen reader output (SUI-6332).
+* `CollapsiblePanel`'s Enterprise dark theme toggle button is now visible when `disabled` (SUI-6425).
+* `Popover` no longer moves focus to the container when no focusable children exist to ensure the focus indicator remains visible (SUI-6446).
+* `Card` uses the `article` tag instead of `div` by default (SUI-5881).
+* `Menu` no longer takes focus when all `Menu.Item` children are disabled (SUI-6268).
+* `Color`'s textbox swatch in the popover palette is now focusable in Enterprise themes (SUI-6401).
+* `Menu`s last `Item` no longer has an incorrect border radius on hover when a `footerMessage` is set (SUI-6450).
+
+Deprecations:
+* `CollapsiblePanel`'s `titleWithActions` prop has been deprecated and will be removed in the next major version. Use the new `actions` prop instead to render the toggle button and interactive elements separate from `title` (SUI-5999).
+* `Select`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6440).
+
+4.33.0 - July 8, 2024
+----------
+New Features:
+* `Clickable` now supports the `"dimmed"` value for the `disabled` prop (SUI-5819).
+    * If set to `"dimmed"`, the component does not respond to mouse events and `aria-disabled` is set to `true`.
+* `Button` now supports `appearance="subtle"` with a visual appearance similar to the Enterprise `"pill"` and Prisma `"secondary"` appearances (SUI-6051).
+* `Button` now sets the `aria-pressed` attribute appropriately when the `selected` prop is provided (SUI-2791).
+* `Select` has a new `toggleContent` prop that specifies whether the children (`"optionChildren"`) or label (`"optionLabel"`) of the matched `Option` are rendered in the toggle button (SUI-6316).
+* `Menu.Item` now supports `descriptionPosition="right"` for Prisma themes (SUI-5664).
+
+Bug Fixes:
+* `Modal.Header` uses semantic HTML elements for the `title` and `subtitle` props to improve accessibility.
+* `TabBar.Tab` has a correctly sized active indicator when vertical and the `to` prop is passed (SUI-6205).
+* `Button`'s text is now centered correctly when combining the `icon` and `to` props (SUI-6331).
+* `Button`'s external icon now has the same size as an icon rendered by the `icon` prop (SUI-6255).
+* `Select` now constructs `aria-label` out of the `Option`-s `label`s rather than `children` (SUI-6316).
+* `Search` now allows provided `aria-label` value to override the default `aria-label` value (SUI-6332).
+
+Deprecations:
+* `Button`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version (SUI-6501).
+
+Docs:
+* Fixed an issue where `SidePanel`'s Test Hooks content was not shown (SUI-6322).
+
 4.32.0 - June 4, 2024
 ----------
 New Features:

package/Card.js

@@ -87,7 +87,7 @@
     })([ "flex:1 1 auto;overflow:auto;height:100%;", ";", "" ], (function(e) {
         var r = e.$inset;
         return r ? (0, a.css)([ "", "" ], (0, u.pick)({
-            enterprise: (0, a.css)([ "padding:", ";&:not(:first-child){padding-top:0;}" ], u.variables.spacing),
+            enterprise: (0, a.css)([ "padding:", ";&:not(:first-child){padding-top:0;}" ], u.variables.spacingLarge),
             prisma: {
                 comfortable: (0, a.css)([ "padding:12px 24px;&:first-child{padding-top:28px;}&:last-child{padding-bottom:28px;}" ]),
                 compact: (0, a.css)([ "padding:8px 24px;&:first-child{padding-top:20px;}&:last-child{padding-bottom:20px;}" ])
@@ -164,7 +164,7 @@
         displayName: "FooterStyles__StyledBox",
         componentId: "sc-1yu3r4s-0"
     })([ "", ";text-align:right;color:", ";", "" ], (0, u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";&:first-child{border-top:none;}" ], u.variables.spacing),
+        enterprise: (0, a.css)([ "padding:", ";&:first-child{border-top:none;}" ], u.variables.spacingLarge),
         prisma: {
             comfortable: (0, a.css)([ "padding:24px;" ]),
             compact: "padding: 18px 24px"
@@ -242,19 +242,19 @@
     var P =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/MoreVertical"
     const _ = require("@splunk/react-icons/enterprise/MoreVertical");
-    var T =  e.n(_);
+    var E =  e.n(_);
     // CONCATENATED MODULE: external "@splunk/react-ui/Anchor"
-    const E = require("@splunk/react-ui/Anchor");
-    var B =  e.n(E);
+    const T = require("@splunk/react-ui/Anchor");
+    var B =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const R = require("@splunk/react-ui/Dropdown");
     var I =  e.n(R);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
     const q = require("@splunk/react-ui/Tooltip");
-    var H =  e.n(q);
+    var N =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const N = require("@splunk/react-ui/Button");
-    var $ =  e.n(N);
+    const H = require("@splunk/react-ui/Button");
+    var $ =  e.n(H);
     // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
     var A = l().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
@@ -282,10 +282,7 @@
         A, 
         /* sc-sel */
         W);
-    }), (0, u.pick)({
-        enterprise: u.variables.spacingHalf,
-        prisma: u.variables.spacingSmall
-    }));
+    }), u.variables.spacingSmall);
     var M = l().div.withConfig({
         displayName: "HeaderStyles__StyledActionContainer",
         componentId: "eqi6uk-3"
@@ -300,12 +297,12 @@
         displayName: "HeaderStyles__StyledSecondaryAction",
         componentId: "eqi6uk-4"
     })([ "margin-left:10px;" ]);
-    var z = l()(s()).withConfig({
+    var L = l()(s()).withConfig({
         displayName: "HeaderStyles__StyledBox",
         componentId: "eqi6uk-5"
     })([ "align-items:start;display:flex;flex:0 0 auto;justify-content:space-between;position:relative;min-height:30px;", " ", " >:not(", "):not(", "){flex:1 0 auto;}" ], (0, 
     u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";" ], u.variables.spacing),
+        enterprise: (0, a.css)([ "padding:", ";" ], u.variables.spacingLarge),
         prisma: {
             comfortable: (0, a.css)([ "padding:16px 24px;&:last-child{padding-bottom:32px;}" ]),
             compact: (0, a.css)([ "padding:12px 24px;&:last-child{padding-bottom:24px;}" ])
@@ -318,7 +315,7 @@
     /* sc-sel */
     M);
     // CONCATENATED MODULE: ./src/Card/Header.tsx
-    function L(e, r) {
+    function z(e, r) {
         if (e == null) return {};
         var t = V(e, r);
         var n, o;
@@ -369,6 +366,10 @@
         title: i().node,
         truncateTitle: i().bool
     };
+ // The order of the interfaces is necessary to maintain proper error messages: HeaderWithActions then HeaderWithActionsRenderProp
+    // If the actions comes first the error will report that actions should be undefined
+    // when we want actions to be the intended use case
+    // type HeaderProps = ComponentProps<HeaderPropsBase, 'div'>;
     // `forwardRef` is used to enable focus on toggle when Dropdown is closing
         var J =  n().forwardRef((function(e, r) {
         var t = (0, u.useSplunkTheme)(), o = t.family, i = t.isCompact;
@@ -376,9 +377,9 @@
         var l = o === "prisma" ?  n().createElement(P(), {
             height: a,
             width: a
-        }) :  n().createElement(T(), null);
+        }) :  n().createElement(E(), null);
         
-        return n().createElement(H(), G({
+        return n().createElement(N(), G({
             content: (0, j._)("Actions"),
             contentRelationship: "label"
         }, e),  n().createElement(F, {
@@ -391,21 +392,28 @@
     /**
  * A styled container for `Card` header content.
  */    function K(e) {
-        var r = e.actionPrimary, t = e.actionsSecondary, o = e.anchor, i = e.children, a = e.subtitle, l = e.title, c = e.truncateTitle, s = c === void 0 ? true : c, p = L(e, [ "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
+        var r = e.actions, t = e.actionPrimary, o = e.actionsSecondary, i = e.anchor, a = e.children, l = e.subtitle, c = e.title, s = e.truncateTitle, p = s === void 0 ? true : s, d = z(e, [ "actions", "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
         // @docs-props-type HeaderPropsBase
-                var d = (0, u.useSplunkTheme)(), f = d.family;
-        var b = f === "prisma" ? "right" : "below";
+                var f = (0, u.useSplunkTheme)(), b = f.family;
+        var v = b === "prisma" ? "right" : "below";
+        if (false) {}
+        var y;
+        if (r) {
+            y = r();
+        } else if (t || o) {
+            y =  n().createElement(n().Fragment, null, t, o &&  n().createElement(I(), {
+                defaultPlacement: v,
+                toggle:  n().createElement(J, null)
+            }, o));
+        }
         
-        return n().createElement(z, G({
+        return n().createElement(L, G({
             "data-test": "header"
-        }, p), (l || a) &&  n().createElement(D, {
-            $truncateTitle: s
-        }, l &&  n().createElement(A, null, o ?  n().createElement(B(), {
-            name: o
-        }, l) : l), a &&  n().createElement(W, null, a)), i, (r || t) &&  n().createElement(M, null, r, t &&  n().createElement(I(), {
-            defaultPlacement: b,
-            toggle:  n().createElement(J, null)
-        }, t)));
+        }, d), (c || l) &&  n().createElement(D, {
+            $truncateTitle: p
+        }, c &&  n().createElement(A, null, i ?  n().createElement(B(), {
+            name: i
+        }, c) : c), l &&  n().createElement(W, null, l)), a, y &&  n().createElement(M, null, y));
     }
     K.propTypes = U;
     /* harmony default export */    const Q = K;
@@ -414,7 +422,7 @@
     var Y =  e.n(X);
     // CONCATENATED MODULE: ./src/Card/CardStyles.ts
     var Z = "0.2s";
-    var ee = l().div.withConfig({
+    var ee = l().article.withConfig({
         displayName: "CardStyles__Styled",
         componentId: "ola3x0-0"
     })([ "", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}" ], u.mixins.reset("inline-flex"), (0, 
@@ -691,7 +699,8 @@
         selected: i().bool,
         showBorder: i().bool,
         to: i().string,
-        value: i().any
+        value: i().any,
+        tag: i().oneOf([ "article", "div", "aside", "section" ])
     };
     var Pe = {
         openInNewContext: false,
@@ -700,7 +709,7 @@
     function _e(e) {
         return !!e.onClick || !!e.to;
     }
-    function Te(e) {
+    function Ee(e) {
         var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.showBorder, i = e.style, a = ke(e, [ "margin", "maxWidth", "minWidth", "showBorder", "style" ]);
         var l = xe({
             minWidth: n,
@@ -714,7 +723,7 @@
         };
         return [ c, a ];
     }
-    var Ee =  function(e) {
+    var Te =  function(e) {
         be(t, e);
         var r = ye(t);
         function t() {
@@ -738,7 +747,7 @@
             key: "render",
             value: function e() {
                 if (_e(this.props)) {
-                    var r = Te(this.props), t = ie(r, 2), o = t[0], i = t[1];
+                    var r = Ee(this.props), t = ie(r, 2), o = t[0], i = t[1];
                     var a = o.showBorder;
                     var l = i.children, c = i.elementRef, s = i.onClick, u = i.openInNewContext, p = i.selected, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
                     
@@ -753,25 +762,28 @@
                         to: d || undefined
                     }),  n().createElement(te, null, l));
                 }
-                var b = Te(this.props), v = ie(b, 2), y = v[0], m = v[1];
+                var b = Ee(this.props), v = ie(b, 2), y = v[0], m = v[1];
                 var h = y.showBorder;
-                var g = m.children, w = m.elementRef, O = ke(m, [ "children", "elementRef" ]);
+                var g = m.children, w = m.elementRef, O = m.tag, x = ke(m, [ "children", "elementRef", "tag" ]);
                 
                 return n().createElement(ee, oe({
                     $selected: false,
                     $cardHasBorder: h,
-                    ref: w
-                }, y, O), g);
+                    ref: w,
+                    as: O
+                }, y, x, {
+                    onClick: undefined
+                }), g);
             }
         } ]);
         return t;
     }(t.Component);
-    Se(Ee, "propTypes", Ce);
-    Se(Ee, "defaultProps", Pe);
-    Se(Ee, "Header", Q);
-    Se(Ee, "Body", m);
-    Se(Ee, "Footer", k);
-    /* harmony default export */    const Be = Ee;
+    Se(Te, "propTypes", Ce);
+    Se(Te, "defaultProps", Pe);
+    Se(Te, "Header", Q);
+    Se(Te, "Body", m);
+    Se(Te, "Footer", k);
+    /* harmony default export */    const Be = Te;
     // CONCATENATED MODULE: ./src/Card/index.ts
     module.exports = r;
     /******/})();

package/Chip.js

@@ -255,7 +255,7 @@
         displayName: "ChipStyles__StyledRemove",
         componentId: "sc-1sd3tsh-5"
     })([ "", ";" ], (0, b.pick)({
-        enterprise: (0, h.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], b.variables.spacingQuarter, (0, 
+        enterprise: (0, h.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], b.variables.spacingXSmall, (0, 
         b.pick)({
             compact: "9px",
             comfortable: "10.5px"
@@ -268,11 +268,7 @@
                 }
             }
         })),
-        prisma: (0, h.css)([ "font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (0, 
-        b.pick)({
-            compact: "9px",
-            comfortable: "10.5px"
-        }), (function(e) {
+        prisma: (0, h.css)([ "display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (function(e) {
             var r = e.$disabled, a = e.$foregroundColor;
             return r ? b.variables.contentColorDisabled : a || "inherit";
         }))

package/Clickable.js

@@ -87,12 +87,12 @@
     const p = require("styled-components");
     var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Clickable/ClickableStyles.ts
-    var b = d().a.withConfig({
+    var v = d().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var y = {
@@ -257,16 +257,16 @@
             } else {
                 o = r.apply(this, arguments);
             }
-            return I(this, o);
+            return T(this, o);
         };
     }
-    function I(e, t) {
+    function T(e, t) {
         if (t && (g(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return T(e);
+        return I(e);
     }
-    function T(e) {
+    function I(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -315,7 +315,7 @@
         /** @private */
         allowDisabledLink: i().bool,
         children: i().node,
-        disabled: i().bool,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed" ]) ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         onClick: i().func,
         openInNewContext: i().bool,
@@ -341,12 +341,12 @@
             var r;
             x(this, n);
             r = t.call(this, e);
-            M(T(r), "el", null);
-            M(T(r), "handleMount", (function(e) {
+            M(I(r), "el", null);
+            M(I(r), "handleMount", (function(e) {
                 r.el = e;
                 k(r.props.elementRef, e);
             }));
-            M(T(r), "createHandleOnClick", (function() {
+            M(I(r), "createHandleOnClick", (function() {
                 var e = r.context, t = e.onClick, n = e.onLinkClick;
                 return function(e) {
                     if (A(r.props)) {
@@ -382,7 +382,7 @@
                     }
                 };
             }));
-            M(T(r), "getTransformedUrl", (function(e) {
+            M(I(r), "getTransformedUrl", (function(e) {
                 var t = r.context.transformUrl;
                 return t != null ? t(e, {
                     isInternal: z(e),
@@ -411,7 +411,7 @@
                     var u = i ? "_blank" : undefined;
                     var c = i && z(l) ? "noopener noreferrer" : undefined;
                     
-                    return r().createElement(b, C({
+                    return r().createElement(v, C({
                         "data-test": "clickable",
                         ref: this.handleMount,
                         href: this.getTransformedUrl(this.props.to),
@@ -424,7 +424,7 @@
                     var s = this.props, p = s.children, d = O(s, [ "children" ]);
                     if (this.props.disabled && this.props.to != null) {
                         
-                        return r().createElement(b, C({
+                        return r().createElement(v, C({
                             "data-test": "clickable",
                             ref: this.handleMount,
                             role: "link",
@@ -433,15 +433,17 @@
                     }
                 }
  // button variant
-                                var v = this.props, y = v.children, h = v.type, m = O(v, [ "children", "type" ]);
+                                var b = this.props, y = b.children, h = b.onClick, m = b.disabled, k = b.type, g = O(b, [ "children", "onClick", "disabled", "type" ]);
                 
-                return r().createElement(b, C({
+                return r().createElement(v, C({
                     as: "button",
+                    "aria-disabled": m === "dimmed" || undefined,
                     "data-test": "clickable",
                     ref: this.handleMount,
-                    type: h || "button",
-                    onClick: t
-                }, f()(m, "elementRef", "onClick", "openInNewContext", "to")), y);
+                    type: k || "button",
+                    disabled: m === true,
+                    onClick: h && !m ? t : undefined
+                }, f()(g, "elementRef", "openInNewContext", "to")), y);
             }
         } ]);
         return n;