@splunk/react-ui 4.32.0 → 4.33.0

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 Change Log
 ============
 
+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).
+
+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/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;