@splunk/react-ui 4.31.0 → 4.33.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 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:
+* `Clickable`'s `NavigationProvider` now accepts a new `onLinkClick` prop to handle click events globally (SUI-5291).
+
+Typescript:
+* `Card`'s `selected` prop now requires `onClick` to also be provided (SUI-6200).
+
 4.31.0 - May 16, 2024
 ----------
 New Features:
 * `Divider` has a new `decorative` prop for disabling the default semantics of `role="separator"`.
 
-Bug Fixes: 
+Bug Fixes:
 * `SidePanel` incorrectly rendered the overlay mask when `useLayerForClickAway={false}`. This has been fixed (SUI-6260).
 
 4.30.0 - May 6, 2024

package/Card.js

@@ -695,26 +695,24 @@
     };
     var Pe = {
         openInNewContext: false,
-        selected: false,
         showBorder: true
     };
     function _e(e) {
         return !!e.onClick || !!e.to;
     }
     function Te(e) {
-        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.selected, i = e.showBorder, a = e.style, l = ke(e, [ "margin", "maxWidth", "minWidth", "selected", "showBorder", "style" ]);
-        var c = xe({
+        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,
             maxWidth: t,
             margin: r
-        }, a);
-        var s = {
-            showBorder: i,
-            selected: o,
+        }, i);
+        var c = {
+            showBorder: o,
             "data-test": "card",
-            style: c
+            style: l
         };
-        return [ s, l ];
+        return [ c, a ];
     }
     var Ee =  function(e) {
         be(t, e);
@@ -730,7 +728,7 @@
                 var t, n;
                 var o = e.props, i = o.selected, a = o.value;
                 (t = (n = e.props).onClick) === null || t === void 0 ? void 0 : t.call(n, r, {
-                    selected: i,
+                    selected: i || false,
                     value: a
                 });
             }));
@@ -741,29 +739,29 @@
             value: function e() {
                 if (_e(this.props)) {
                     var r = Te(this.props), t = ie(r, 2), o = t[0], i = t[1];
-                    var a = o.selected, l = o.showBorder;
-                    var c = i.children, s = i.elementRef, u = i.onClick, p = i.openInNewContext, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "to" ]);
+                    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" ]);
                     
                     return n().createElement(re, oe({
                         "data-clickable": true,
-                        $selected: a,
-                        $cardHasBorder: l,
-                        elementRef: s
+                        $selected: p || false,
+                        $cardHasBorder: a,
+                        elementRef: c
                     }, o, f, {
-                        onClick: u ? this.handleCardClick : undefined,
-                        openInNewContext: p,
+                        onClick: s ? this.handleCardClick : undefined,
+                        openInNewContext: u,
                         to: d || undefined
-                    }),  n().createElement(te, null, c));
+                    }),  n().createElement(te, null, l));
                 }
                 var b = Te(this.props), v = ie(b, 2), y = v[0], m = v[1];
-                var h = y.selected, g = y.showBorder;
-                var w = m.children, O = m.elementRef, x = ke(m, [ "children", "elementRef" ]);
+                var h = y.showBorder;
+                var g = m.children, w = m.elementRef, O = ke(m, [ "children", "elementRef" ]);
                 
                 return n().createElement(ee, oe({
-                    $selected: h,
-                    $cardHasBorder: g,
-                    ref: O
-                }, y, x), w);
+                    $selected: false,
+                    $cardHasBorder: h,
+                    ref: w
+                }, y, O), g);
             }
         } ]);
         return t;

package/Clickable.js

@@ -65,7 +65,7 @@
         NavigationProvider: () => /* reexport */ m,
         default: () => /* reexport */ F,
         isInternalLink: () => /* reexport */ z,
-        isRootRelativeLink: () => /* reexport */ L
+        isRootRelativeLink: () => /* reexport */ D
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -98,6 +98,7 @@
     var y = {
         children: i().node,
         onClick: i().func,
+        onLinkClick: i().func,
         prefix: i().string,
         transformUrl: i().func
     };
@@ -106,29 +107,30 @@
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */    function m(e) {
-        var t = e.children, o = e.onClick, i = e.prefix, l = e.transformUrl;
+        var t = e.children, o = e.onClick, i = e.onLinkClick, l = e.prefix, a = e.transformUrl;
         // @docs-props-type NavigationProviderProps
-                var a = (0, n.useMemo)((function() {
+                var u = (0, n.useMemo)((function() {
             var e;
-            if (l != null) {
+            if (a != null) {
                 if (false) {}
-                e = l;
-            } else if (i != null) {
+                e = a;
+            } else if (l != null) {
                 if (false) {}
                 e = function e() {
                     var t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
                     var n = arguments.length > 1 ? arguments[1] : undefined, r = n.isInternal, o = n.isRootRelative;
-                    return i != null && r && o ? "".concat(i).concat(t) : t;
+                    return l != null && r && o ? "".concat(l).concat(t) : t;
                 };
             }
             return {
                 onClick: o,
+                onLinkClick: i,
                 transformUrl: e
             };
-        }), [ o, i, l ]);
+        }), [ o, i, l, a ]);
         
         return r().createElement(h.Provider, {
-            value: a
+            value: u
         }, t);
     }
     m.propTypes = y;
@@ -139,7 +141,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function g(e, t) {
+    function k(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -152,21 +154,21 @@
         }
     }
     // CONCATENATED MODULE: ./src/Clickable/Clickable.tsx
-    function k(e) {
+    function g(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            k = function e(t) {
+            g = function e(t) {
                 return typeof t;
             };
         } else {
-            k = function e(t) {
+            g = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return k(e);
+        return g(e);
     }
-    function O() {
-        O = Object.assign || function(e) {
+    function C() {
+        C = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -177,9 +179,9 @@
             }
             return e;
         };
-        return O.apply(this, arguments);
+        return C.apply(this, arguments);
     }
-    function C(e, t) {
+    function O(e, t) {
         if (e == null) return {};
         var n = w(e, t);
         var r, o;
@@ -246,31 +248,31 @@
         return S(e, t);
     }
     function _(e) {
-        var t = N();
+        var t = L();
         return function n() {
-            var r = M(e), o;
+            var r = N(e), o;
             if (t) {
-                var i = M(this).constructor;
+                var i = N(this).constructor;
                 o = Reflect.construct(r, arguments, i);
             } else {
                 o = r.apply(this, arguments);
             }
-            return I(this, o);
+            return T(this, o);
         };
     }
-    function I(e, t) {
-        if (t && (k(t) === "object" || typeof t === "function")) {
+    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");
         }
         return e;
     }
-    function N() {
+    function L() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -281,13 +283,13 @@
             return false;
         }
     }
-    function M(e) {
-        M = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function N(e) {
+        N = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return M(e);
+        return N(e);
     }
-    function q(e, t, n) {
+    function M(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -300,20 +302,20 @@
         }
         return e;
     }
-    var E = /^[a-z0-9]+:/;
-    var U = /^\/\//;
-    var D = /^\//;
-    var L = function e(t) {
-        return t != null && D.test(t);
+    var q = /^[a-z0-9]+:/;
+    var E = /^\/\//;
+    var U = /^\//;
+    var D = function e(t) {
+        return t != null && U.test(t);
     };
     var z = function e(t) {
-        return t != null && !E.test(t) && !U.test(t);
+        return t != null && !q.test(t) && !E.test(t);
     };
     var H = {
         /** @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,
@@ -339,13 +341,14 @@
             var r;
             x(this, n);
             r = t.call(this, e);
-            q(T(r), "el", null);
-            q(T(r), "handleMount", (function(e) {
+            M(I(r), "el", null);
+            M(I(r), "handleMount", (function(e) {
                 r.el = e;
-                g(r.props.elementRef, e);
+                k(r.props.elementRef, e);
             }));
-            q(T(r), "createHandleOnClick", (function(e) {
-                return function(t) {
+            M(I(r), "createHandleOnClick", (function() {
+                var e = r.context, t = e.onClick, n = e.onLinkClick;
+                return function(e) {
                     if (A(r.props)) {
                         // when user command-click on mac or ctrl-click on other platforms, and
                         // Tag is an <a>, let the click pass through, let the <a> to achieve user's
@@ -353,31 +356,37 @@
                         // on mac, ctrl-click will be caught and open option menu even before hitting
                         // the DOM, so we're safe to check both metaKey and ctrlKey here
                         // without platform sniffing
-                        if ((t.metaKey || t.ctrlKey) && r.props.to) {
+                        if ((e.metaKey || e.ctrlKey) && r.props.to) {
                             return;
                         }
                     }
                     if (r.props.onClick) {
-                        r.props.onClick(t);
-                    } else if (A(r.props) && e) {
-                        var n = r.props.navigationLabel;
-                        if (!n && u()(r.props.children)) {
-                            n = r.props.children;
+                        r.props.onClick(e);
+                    }
+                    var o = r.props.onClick == null && t != null;
+                    if (A(r.props) && (o || n != null)) {
+                        var i = r.props.navigationLabel;
+                        if (!i && u()(r.props.children)) {
+                            i = r.props.children;
                         }
-                        e(t, {
+                        var l = {
                             to: r.getTransformedUrl(r.props.to),
                             originalTo: r.props.to,
                             openInNewContext: r.props.openInNewContext,
-                            label: n
-                        });
+                            label: i
+                        };
+                        if (o) {
+                            t(e, l);
+                        }
+                        n === null || n === void 0 ? void 0 : n(e, l);
                     }
                 };
             }));
-            q(T(r), "getTransformedUrl", (function(e) {
+            M(I(r), "getTransformedUrl", (function(e) {
                 var t = r.context.transformUrl;
                 return t != null ? t(e, {
                     isInternal: z(e),
-                    isRootRelative: L(e)
+                    isRootRelative: D(e)
                 }) : e;
             }));
             if (false) {}
@@ -395,53 +404,54 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.context.onClick;
-                var n = this.createHandleOnClick(t);
+                var t = this.createHandleOnClick();
  // Only set the href attribute when enabled, and therefore using an <a> tag
                                 if (A(this.props)) {
-                    var o = this.props, i = o.children, l = o.openInNewContext, a = o.to, u = C(o, [ "children", "openInNewContext", "to" ]);
-                    var c = l ? "_blank" : undefined;
-                    var s = l && z(a) ? "noopener noreferrer" : undefined;
+                    var n = this.props, o = n.children, i = n.openInNewContext, l = n.to, a = O(n, [ "children", "openInNewContext", "to" ]);
+                    var u = i ? "_blank" : undefined;
+                    var c = i && z(l) ? "noopener noreferrer" : undefined;
                     
-                    return r().createElement(v, O({
+                    return r().createElement(v, C({
                         "data-test": "clickable",
                         ref: this.handleMount,
                         href: this.getTransformedUrl(this.props.to),
-                        target: c,
-                        rel: s,
-                        onClick: n
-                    }, f()(u, "disabled", "elementRef", "onClick")), i);
+                        target: u,
+                        rel: c,
+                        onClick: t
+                    }, f()(a, "disabled", "elementRef", "onClick")), o);
                 }
                 if (this.props.allowDisabledLink) {
-                    var p = this.props, d = p.children, b = C(p, [ "children" ]);
+                    var s = this.props, p = s.children, d = O(s, [ "children" ]);
                     if (this.props.disabled && this.props.to != null) {
                         
-                        return r().createElement(v, O({
+                        return r().createElement(v, C({
                             "data-test": "clickable",
                             ref: this.handleMount,
                             role: "link",
                             "aria-disabled": "true"
-                        }, f()(b, "href", "to", "elementRef", "onClick", "disabled")), d);
+                        }, f()(d, "href", "to", "elementRef", "onClick", "disabled")), p);
                     }
                 }
  // button variant
-                                var y = this.props, h = y.children, m = y.type, g = C(y, [ "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(v, O({
+                return r().createElement(v, C({
                     as: "button",
+                    "aria-disabled": m === "dimmed" || undefined,
                     "data-test": "clickable",
                     ref: this.handleMount,
-                    type: m || "button",
-                    onClick: n
-                }, f()(g, "elementRef", "onClick", "openInNewContext", "to")), h);
+                    type: k || "button",
+                    disabled: m === true,
+                    onClick: h && !m ? t : undefined
+                }, f()(g, "elementRef", "openInNewContext", "to")), y);
             }
         } ]);
         return n;
     }(n.Component);
-    q(B, "contextType", h);
-    q(B, "propTypes", H);
-    q(B, "defaultProps", K);
-    q(B, s.legacyRefMode, true);
+    M(B, "contextType", h);
+    M(B, "propTypes", H);
+    M(B, "defaultProps", K);
+    M(B, s.legacyRefMode, true);
     /* harmony default export */    const F = B;
     // CONCATENATED MODULE: ./src/Clickable/index.ts
     module.exports = t;