@splunk/react-ui 4.28.1 → 4.28.2

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 Change Log
 ============
 
+4.28.2 - March 22, 2024
+----------
+Bug Fixes:
+* `Table.Row` no longer ignores provided `style` properties (SUI-6156).
+
+Typescript:
+* `WaitSpinner`'s `screenReaderText` type includes `null` now (SUI-6081).
+
 4.28.1 - March 21, 2024
 ----------
 Bug Fixes:

package/Modal.js

@@ -692,6 +692,7 @@
     }
     var qe = {
         children: i().node,
+        closeOnClickAway: i().bool,
         divider: i().oneOf([ "header", "footer", "both", "none" ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         initialFocus: i().oneOfType([ i().object, i().oneOf([ "first", "container" ]) ]),
@@ -700,6 +701,8 @@
         returnFocus: i().oneOfType([ i().func, i().object ])
     };
     var Fe = {
+        // TODO: Set to `false` in next major version
+        closeOnClickAway: true,
         divider: "both",
         initialFocus: "first",
         open: false
@@ -860,13 +863,16 @@
         }, {
             key: "render",
             value: function e() {
+                var t = this.props.closeOnClickAway;
+                var r = t ? "interactive" : "visible";
                 
                 return n().createElement(b(), {
-                    open: this.props.open,
                     getDefaultMotionStyle: this.getDefaultMotionStyle,
-                    renderModal: this.renderModal,
                     getMotionStyle: this.getMotionStyle,
-                    onRequestClose: this.handleRequestClose
+                    onRequestClose: this.handleRequestClose,
+                    open: this.props.open,
+                    renderModal: this.renderModal,
+                    scrim: r
                 });
             }
         } ]);

package/ModalLayer.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -64,66 +64,66 @@
         default: () => /* reexport */ E
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
     const a = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const l = require("@splunk/react-ui/Layer");
-    var u =  e.n(l);
+    const c = require("@splunk/react-ui/Layer");
+    var l =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var s =  e.n(c);
+    const u = require("styled-components");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "react-spring"
     const f = require("react-spring");
     // CONCATENATED MODULE: external "@splunk/themes"
     const p = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayerStyles.ts
-    var y = (0, c.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], p.mixins.reset("block"));
+    var y = (0, u.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], p.mixins.reset("block"));
     var d = s()(f.animated.div).withConfig({
         displayName: "ModalLayerStyles__StyledClickAwayOverlay",
         componentId: "sc-1sa3n1j-0"
     })([ "", ";background-color:", ";z-index:", ";" ], y, p.variables.backgroundColorScrim, p.variables.zindexModalBackdrop);
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayer.tsx
-    function b(e) {
+    function v(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            b = function e(t) {
+            v = function e(t) {
                 return typeof t;
             };
         } else {
-            b = function e(t) {
+            v = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return b(e);
+        return v(e);
     }
-    function v(e, t) {
-        var r = Object.keys(e);
+    function b(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            if (t) n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            if (t) r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
             }));
-            r.push.apply(r, n);
+            n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
     function m(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = arguments[t] != null ? arguments[t] : {};
+            var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                v(Object(r), true).forEach((function(t) {
-                    _(e, t, r[t]);
+                b(Object(n), true).forEach((function(t) {
+                    R(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
             } else {
-                v(Object(r)).forEach((function(t) {
-                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+                b(Object(n)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
         }
@@ -135,17 +135,17 @@
         }
     }
     function h(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || false;
-            n.configurable = true;
-            if ("value" in n) n.writable = true;
-            Object.defineProperty(e, n.key, n);
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
         }
     }
-    function g(e, t, r) {
+    function g(e, t, n) {
         if (t) h(e.prototype, t);
-        if (r) h(e, r);
+        if (n) h(e, n);
         return e;
     }
     function w(e, t) {
@@ -162,27 +162,27 @@
         if (t) j(e, t);
     }
     function j(e, t) {
-        j = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
+        j = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
             return t;
         };
         return j(e, t);
     }
     function S(e) {
         var t = A();
-        return function r() {
-            var n = C(e), o;
+        return function n() {
+            var r = _(e), o;
             if (t) {
-                var i = C(this).constructor;
-                o = Reflect.construct(n, arguments, i);
+                var i = _(this).constructor;
+                o = Reflect.construct(r, arguments, i);
             } else {
-                o = n.apply(this, arguments);
+                o = r.apply(this, arguments);
             }
             return P(this, o);
         };
     }
     function P(e, t) {
-        if (t && (b(t) === "object" || typeof t === "function")) {
+        if (t && (v(t) === "object" || typeof t === "function")) {
             return t;
         }
         return k(e);
@@ -204,82 +204,82 @@
             return false;
         }
     }
-    function C(e) {
-        C = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function _(e) {
+        _ = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return C(e);
+        return _(e);
     }
-    function _(e, t, r) {
+    function R(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
-                value: r,
+                value: n,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[t] = r;
+            e[t] = n;
         }
         return e;
     }
-    var R = {
+    var q = {
         childrenInAnimation: i().bool,
         getDefaultMotionStyle: i().func,
         getMotionStyle: i().func,
         onRequestClose: i().func,
         open: i().bool,
         renderModal: i().func.isRequired,
-        useLayerForClickAway: i().bool
+        scrim: i().oneOf([ "visible", "hidden", "interactive" ])
     };
-    var q = {
+    var M = {
         childrenInAnimation: false,
         open: false,
-        useLayerForClickAway: true
+        scrim: "interactive"
     };
-    var M =  function(e) {
-        w(r, e);
-        var t = S(r);
-        function r(e) {
+    var C =  function(e) {
+        w(n, e);
+        var t = S(n);
+        function n(e) {
             var o;
-            O(this, r);
+            O(this, n);
             o = t.call(this, e);
-            _(k(o), "allowAnimationUpdates", true);
-            _(k(o), "handleClickAway", (function(e) {
-                var t, r;
-                (t = (r = o.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, {
+            R(k(o), "allowAnimationUpdates", true);
+            R(k(o), "handleClickAway", (function(e) {
+                var t, n;
+                (t = (n = o.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
                     reason: "clickAway",
                     event: e
                 });
             }));
-            _(k(o), "handleAnimationEnd", (function() {
+            R(k(o), "handleAnimationEnd", (function() {
                 if (o.allowAnimationUpdates) {
                     o.setState({
                         animating: false
                     });
                 }
             }));
-            _(k(o), "renderLayer", (function() {
-                var e = o.props, t = e.getDefaultMotionStyle, r = e.getMotionStyle, i = e.renderModal, l = e.useLayerForClickAway;
-                var u = o.props.open || o.state.animating;
+            R(k(o), "renderLayer", (function() {
+                var e = o.props, t = e.getDefaultMotionStyle, n = e.getMotionStyle, i = e.renderModal, c = e.scrim;
+                var l = o.props.open || o.state.animating;
                 
-                return n().createElement(a.Spring, {
+                return r().createElement(a.Spring, {
                     from: m(m({}, t === null || t === void 0 ? void 0 : t()), {}, {
                         overlayOpacity: 0,
                         opacity: 0
                     }),
-                    to: m(m({}, r === null || r === void 0 ? void 0 : r()), {}, {
+                    to: m(m({}, n === null || n === void 0 ? void 0 : n()), {}, {
                         overlayOpacity: o.props.open ? 1 : 0,
                         opacity: o.props.open ? 1 : 0
                     }),
                     onRest: o.handleAnimationEnd
                 }, (function(e) {
                     
-                    return n().createElement("div", null, 
+                    return r().createElement("div", null, 
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), u && l &&  n().createElement(d, {
+                    i(e), l && (c === "visible" || "interactive") &&  r().createElement(d, {
                         "data-test": "modal-overlay",
-                        onMouseDown: o.handleClickAway,
+                        onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
                         key: "clickAway",
                         style: {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -294,7 +294,7 @@
             };
             return o;
         }
-        g(r, [ {
+        g(n, [ {
             key: "componentWillUnmount",
             value: function e() {
                 this.allowAnimationUpdates = false;
@@ -305,18 +305,18 @@
             value: function e() {
                 var t = this.props.open || this.state.animating || this.props.childrenInAnimation;
                 
-                return n().createElement(u(), {
+                return r().createElement(l(), {
                     open: t,
                     closeReasons: [ "escapeKey" ],
                     onRequestClose: this.props.onRequestClose
                 }, t && this.renderLayer());
             }
         } ]);
-        return r;
-    }(r.Component);
-    _(M, "propTypes", R);
-    _(M, "defaultProps", q);
-    _(M, "getDerivedStateFromProps", (function(e, t) {
+        return n;
+    }(n.Component);
+    R(C, "propTypes", q);
+    R(C, "defaultProps", M);
+    R(C, "getDerivedStateFromProps", (function(e, t) {
         if (e.open !== t.prevOpen) {
             return {
                 animating: true,
@@ -325,7 +325,7 @@
         }
         return null;
     }));
-    /* harmony default export */    const E = M;
+    /* harmony default export */    const E = C;
     // CONCATENATED MODULE: ./src/ModalLayer/index.ts
     module.exports = t;
     /******/})();

package/SidePanel.js

@@ -87,43 +87,43 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SidePanel/SidePanelStyles.ts
-    var h = (0, p.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], m.mixins.reset("flex"), (0, 
+    var v = (0, p.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], m.mixins.reset("flex"), (0, 
     m.pick)({
         enterprise: "0 0 12px rgba(0, 0, 0, 0.3)",
         prisma: m.variables.overlayShadow
     }), m.variables.backgroundColorSidebar, m.variables.zindexModal);
-    var v = y()(b()).withConfig({
+    var h = y()(b()).withConfig({
         displayName: "SidePanelStyles__StyledLeftPanelTransitionOpen",
         componentId: "mtbcuz-0"
-    })([ "", ";top:0;left:0;height:100vh;" ], h);
+    })([ "", ";top:0;left:0;height:100vh;" ], v);
     var g = y()(b()).withConfig({
         displayName: "SidePanelStyles__StyledRightPanelTransitionOpen",
         componentId: "mtbcuz-1"
-    })([ "", ";right:0;top:0;height:100vh;" ], h);
+    })([ "", ";right:0;top:0;height:100vh;" ], v);
     var O = y()(b()).withConfig({
         displayName: "SidePanelStyles__StyledTopPanelTransitionOpen",
         componentId: "mtbcuz-2"
-    })([ "", ";top:0;left:0;width:100vw;" ], h);
+    })([ "", ";top:0;left:0;width:100vw;" ], v);
     var S = y()(b()).withConfig({
         displayName: "SidePanelStyles__StyledBottomPanelTransitionOpen",
         componentId: "mtbcuz-3"
-    })([ "", ";left:0;bottom:0;width:100vw;" ], h);
+    })([ "", ";left:0;bottom:0;width:100vw;" ], v);
     // CONCATENATED MODULE: ./src/SidePanel/SidePanel.tsx
-    function w(e) {
+    function P(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            w = function e(t) {
+            P = function e(t) {
                 return typeof t;
             };
         } else {
-            w = function e(t) {
+            P = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return w(e);
+        return P(e);
     }
-    function P() {
-        P = Object.assign || function(e) {
+    function w() {
+        w = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -134,7 +134,7 @@
             }
             return e;
         };
-        return P.apply(this, arguments);
+        return w.apply(this, arguments);
     }
     function j(e) {
         return k(e) || _(e) || C(e) || A();
@@ -196,7 +196,7 @@
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function F(e, t) {
+    function R(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -205,9 +205,9 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function R(e, t, r) {
-        if (t) F(e.prototype, t);
-        if (r) F(e, r);
+    function F(e, t, r) {
+        if (t) R(e.prototype, t);
+        if (r) R(e, r);
         return e;
     }
     function M(e, t) {
@@ -231,7 +231,7 @@
         return N(e, t);
     }
     function I(e) {
-        var t = z();
+        var t = L();
         return function r() {
             var n = B(e), o;
             if (t) {
@@ -244,18 +244,18 @@
         };
     }
     function D(e, t) {
-        if (t && (w(t) === "object" || typeof t === "function")) {
+        if (t && (P(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return L(e);
+        return z(e);
     }
-    function L(e) {
+    function z(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function z() {
+    function L() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -316,17 +316,17 @@
             var o;
             q(this, r);
             o = t.call(this, e);
-            U(L(o), "handlePanelAnimationEnd", (function() {
+            U(z(o), "handlePanelAnimationEnd", (function() {
                 var e, t;
                 o.setState({
                     panelAnimating: false
                 });
                 (e = (t = o.props).onAnimationEnd) === null || e === void 0 ? void 0 : e.call(t);
             }));
-            U(L(o), "renderModal", (function() {
+            U(z(o), "renderModal", (function() {
                 var e = o.props, t = e.children, i = e.dockPosition, a = e.innerClassName, u = e.innerStyle, s = e.outerClassName, f = e.outerStyle;
                 var p = {
-                    left: v,
+                    left: h,
                     right: g,
                     top: O,
                     bottom: S
@@ -337,7 +337,7 @@
                     width: "100%"
                 };
                 
-                return n().createElement(p, P({
+                return n().createElement(p, w({
                     animateOnMount: true,
                     animation: H[i],
                     "data-test": "side-panel",
@@ -359,18 +359,19 @@
             };
             return o;
         }
-        R(r, [ {
+        F(r, [ {
             key: "render",
             value: function e() {
                 var t = this.props, r = t.open, o = t.onRequestClose, i = t.useLayerForClickAway;
                 var a = this.state.panelAnimating;
+                var l = i ? "interactive" : "visible";
                 
                 return n().createElement(f(), {
                     childrenInAnimation: a,
                     onRequestClose: o,
                     open: r,
                     renderModal: this.renderModal,
-                    useLayerForClickAway: i
+                    scrim: l
                 });
             }
         } ]);