@splunk/react-ui 4.30.0 → 4.32.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 Change Log
 ============
 
+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:
+* `SidePanel` incorrectly rendered the overlay mask when `useLayerForClickAway={false}`. This has been fixed (SUI-6260).
+
 4.30.0 - May 6, 2024
 ----------
 New Features:

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");
@@ -87,17 +87,18 @@
     const p = require("styled-components");
     var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Clickable/ClickableStyles.ts
-    var v = d().a.withConfig({
+    var b = d().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     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,11 +248,11 @@
         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);
@@ -259,7 +261,7 @@
         };
     }
     function I(e, t) {
-        if (t && (k(t) === "object" || typeof t === "function")) {
+        if (t && (g(t) === "object" || typeof t === "function")) {
             return t;
         }
         return T(e);
@@ -270,7 +272,7 @@
         }
         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,14 +302,14 @@
         }
         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 */
@@ -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(T(r), "el", null);
+            M(T(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(T(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(T(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,52 @@
         }, {
             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(b, 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(b, 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 v = this.props, y = v.children, h = v.type, m = O(v, [ "children", "type" ]);
                 
-                return r().createElement(v, O({
+                return r().createElement(b, C({
                     as: "button",
                     "data-test": "clickable",
                     ref: this.handleMount,
-                    type: m || "button",
-                    onClick: n
-                }, f()(g, "elementRef", "onClick", "openInNewContext", "to")), h);
+                    type: h || "button",
+                    onClick: t
+                }, f()(m, "elementRef", "onClick", "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;

package/Divider.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (r, t) => {
-            /******/ for (var o in t) {
-                /******/ if (e.o(t, o) && !e.o(r, o)) {
-                    /******/ Object.defineProperty(r, o, {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: t[o]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -61,89 +61,140 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ v
+        default: () => /* reexport */ j
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
-    var o =  e.n(t);
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const a = require("styled-components");
     var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Divider/DividerStyles.ts
-    var c = l().hr.withConfig({
+    var u = l().hr.withConfig({
         displayName: "DividerStyles__StyledRule",
         componentId: "gl6kyz-0"
-    })([ "", ";", ";border-color:", ";" ], s.mixins.reset("block"), (0, s.pickVariant)("$orientation", {
+    })([ "", ";", ";border-color:", ";" ], c.mixins.reset("block"), (0, c.pickVariant)("$orientation", {
         horizontal: (0, a.css)([ "border-top-style:solid;border-width:1px;" ]),
         vertical: (0, a.css)([ "display:inline;border-left-style:solid;border-width:1px;" ])
-    }), (0, s.pick)({
-        enterprise: s.variables.borderColor,
-        prisma: s.variables.neutral200
+    }), (0, c.pick)({
+        enterprise: c.variables.borderColor,
+        prisma: c.variables.neutral200
     }));
     // CONCATENATED MODULE: ./src/Divider/Divider.tsx
-    function u() {
-        u = Object.assign || function(e) {
+    function s() {
+        s = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
-                for (var o in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, o)) {
-                        e[o] = t[o];
+                for (var n in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, n)) {
+                        e[n] = t[n];
                     }
                 }
             }
             return e;
         };
-        return u.apply(this, arguments);
+        return s.apply(this, arguments);
     }
-    function p(e, r) {
+    function f(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            if (r) n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }));
+            t.push.apply(t, n);
+        }
+        return t;
+    }
+    function p(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = arguments[r] != null ? arguments[r] : {};
+            if (r % 2) {
+                f(Object(t), true).forEach((function(r) {
+                    b(e, r, t[r]);
+                }));
+            } else if (Object.getOwnPropertyDescriptors) {
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
+            } else {
+                f(Object(t)).forEach((function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                }));
+            }
+        }
+        return e;
+    }
+    function b(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[r] = t;
+        }
+        return e;
+    }
+    function d(e, r) {
         if (e == null) return {};
-        var t = f(e, r);
-        var o, n;
+        var t = y(e, r);
+        var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                o = i[n];
-                if (r.indexOf(o) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, o)) continue;
-                t[o] = e[o];
+            for (o = 0; o < i.length; o++) {
+                n = i[o];
+                if (r.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                t[n] = e[n];
             }
         }
         return t;
     }
-    function f(e, r) {
+    function y(e, r) {
         if (e == null) return {};
         var t = {};
-        var o = Object.keys(e);
-        var n, i;
-        for (i = 0; i < o.length; i++) {
-            n = o[i];
-            if (r.indexOf(n) >= 0) continue;
-            t[n] = e[n];
+        var n = Object.keys(e);
+        var o, i;
+        for (i = 0; i < n.length; i++) {
+            o = n[i];
+            if (r.indexOf(o) >= 0) continue;
+            t[o] = e[o];
         }
         return t;
     }
-    var d = {
+    var v = {
         elementRef: i().oneOfType([ i().func, i().object ]),
+        decorative: i().bool,
         orientation: i().oneOf([ "horizontal", "vertical" ])
     };
-    function y(e) {
-        var r = e.elementRef, t = e.orientation, n = t === void 0 ? "horizontal" : t, i = p(e, [ "elementRef", "orientation" ]);
+    function O(e) {
+        var r = e.elementRef, t = e.decorative, o = t === void 0 ? false : t, i = e.orientation, a = i === void 0 ? "horizontal" : i, l = d(e, [ "elementRef", "decorative", "orientation" ]);
         // @docs-props-type DividerPropsBase
-                
-        return o().createElement(c, u({
+                var c = p({
             "data-test": "divider",
             ref: r,
-            "aria-orientation": n,
-            $orientation: n
-        }, i));
+            $orientation: a
+        }, l);
+ // aria-orientation is not needed when decorative and div is used to have no semantics
+                if (o) {
+            
+            return n().createElement(u, s({
+                as: "div"
+            }, c));
+        }
+        
+        return n().createElement(u, s({
+            "aria-orientation": a
+        }, c));
     }
-    y.propTypes = d;
-    /* harmony default export */    const v = y;
+    O.propTypes = v;
+    /* harmony default export */    const j = O;
     // CONCATENATED MODULE: ./src/Divider/index.ts
     module.exports = r;
     /******/})();