@splunk/react-ui 4.28.0 → 4.28.2

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 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:
+* Fixed `CollapsiblePanel` not calling its `onRequestOpen` and `onRequestClose` callbacks (SUI-6146).
+* Fixed documentation issues and discrepancies between the `onChange` callbacks of `CollapsiblePanel` and `SingleOpenPanelGroup` (SUI-6145).
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both always provide the `panelId` to their `onChange` callback.
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both provide an `action="open"|"closed"` value to the `onChange` callback.
+
 4.28.0 - March 20, 2024
 ----------
 New Features:

package/CollapsiblePanel.js

@@ -97,8 +97,8 @@
     const C = require("@splunk/react-ui/ButtonSimple");
     var x =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const S = require("@splunk/react-ui/Clickable");
-    var O =  e.n(S);
+    const O = require("@splunk/react-ui/Clickable");
+    var S =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/themes"
     const I = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
@@ -196,7 +196,7 @@
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
     })([ "flex:0 auto;padding:0;", "" ], N);
-    var M = h()(O()).withConfig({
+    var M = h()(S()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
     })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0, 
@@ -415,16 +415,13 @@
             return t;
         };
         var x = (0, n.useCallback)((function(e, t) {
-            var n = t.panelId, r = t.reason;
-            var o = C();
-            var a = o === n ? null : n;
+            var n = t.panelId;
+            var r = C();
+            var o = r === n ? null : n;
             if (!d) {
-                k(a);
+                k(o);
             }
-            p === null || p === void 0 ? void 0 : p(e, {
-                openPanelId: a,
-                reason: r
-            });
+            p === null || p === void 0 ? void 0 : p(e, t);
         }), [ u, d, g, C, p ]);
         (0, n.useEffect)((function() {
             if (false) {}
@@ -438,9 +435,9 @@
         (0, n.useEffect)((function() {
             if (false) {}
         }), [ b, o ]);
-        var S = n.Children.toArray(t).filter(n.isValidElement);
+        var O = n.Children.toArray(t).filter(n.isValidElement);
  // remove false, null, 0, etc
-                var O = (0, n.useMemo)((function() {
+                var S = (0, n.useMemo)((function() {
             return {
                 onChange: x,
                 openPanelId: d ? u : g,
@@ -453,8 +450,8 @@
             "data-test-open-panel-id": u,
             elementRef: i
         }, c().apply(void 0, [ f ].concat(Q(Object.keys(ie))))),  r().createElement(V.Provider, {
-            value: O
-        }, S));
+            value: S
+        }, O));
     }
     le.propTypes = ie;
     /* harmony default export */    const se = le;
@@ -502,7 +499,7 @@
             var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
                 ue(Object(n), true).forEach((function(t) {
-                    Se(e, t, n[t]);
+                    Oe(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
@@ -595,7 +592,7 @@
         };
         return xe(e);
     }
-    function Se(e, t, n) {
+    function Oe(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -608,7 +605,7 @@
         }
         return e;
     }
-    var Oe = {
+    var Se = {
         innerBodyStyles: u().object,
         children: u().node,
         defaultOpen: u().bool,
@@ -642,60 +639,54 @@
             var r;
             de(this, n);
             r = t.call(this, e);
-            Se(ke(r), "controlledExternally", void 0);
-            Se(ke(r), "containerId", void 0);
-            Se(ke(r), "toggleId", void 0);
-            Se(ke(r), "handleRequestClose", (function(e) {
+            Oe(ke(r), "controlledExternally", void 0);
+            Oe(ke(r), "containerId", void 0);
+            Oe(ke(r), "toggleId", void 0);
+            Oe(ke(r), "handleRequestClose", (function(e) {
                 var t = r.props, n = t.panelId, o = t.onRequestClose;
                 o === null || o === void 0 ? void 0 : o({
                     event: e,
                     panelId: n,
                     reason: "toggleClick"
                 });
-                r.setState(fe({
-                    animating: true
-                }, !r.isControlled() ? {
-                    open: false
-                } : {}));
             }));
-            Se(ke(r), "handleRequestOpen", (function(e) {
+            Oe(ke(r), "handleRequestOpen", (function(e) {
                 var t = r.props, n = t.panelId, o = t.onRequestOpen;
                 o === null || o === void 0 ? void 0 : o({
                     event: e,
                     panelId: n,
                     reason: "toggleClick"
                 });
-                r.setState(fe({
-                    animating: true
-                }, !r.isControlled() ? {
-                    open: true
-                } : {}));
             }));
-            Se(ke(r), "handleChange", (function(e) {
-                var t = r.props, n = t.panelId, o = t.open, a = t.onChange;
-                var i = r.isControlled() ? o : !r.state.open;
-                a === null || a === void 0 ? void 0 : a(e, {
-                    panelId: n,
-                    reason: "toggleClick"
-                });
+            Oe(ke(r), "handleChange", (function(e) {
+                var t, n;
+                var o = r.props, a = o.panelId, i = o.onChange;
+                var l = r.isOpen();
                 if (!r.isControlled()) {
                     r.setState({
                         animating: true,
-                        open: i
-                    });
-                }
-                if (r.context.onChange) {
-                    r.context.onChange(e, {
-                        panelId: n,
-                        reason: "toggleClick"
+                        open: !l
                     });
                 }
+                var s = l ? "close" : "open";
+                i === null || i === void 0 ? void 0 : i(e, {
+                    panelId: a,
+                    reason: "toggleClick",
+                    action: s
+                });
+                (t = (n = r.context).onChange) === null || t === void 0 ? void 0 : t.call(n, e, {
+                    panelId: a,
+                    reason: "toggleClick",
+                    action: s
+                });
  // Maintains backwards compatibility until the `handleRequestClose` and `handleRequestOpen` handlers are removed in SUI-5
-                                var l = r.props.open ? r.handleRequestClose : r.handleRequestOpen;
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                                l;
+                                if (l) {
+                    r.handleRequestClose(e);
+                } else {
+                    r.handleRequestOpen(e);
+                }
             }));
-            Se(ke(r), "handleAnimationEnd", (function() {
+            Oe(ke(r), "handleAnimationEnd", (function() {
                 r.setState({
                     animating: false
                 });
@@ -730,6 +721,11 @@
                 if (false) {}
                 if (false) {}
             }
+        }, {
+            key: "isOpen",
+            value: function e() {
+                return this.isControlled() ? this.props.open : this.state.open;
+            }
  // Using all three handlers: `handleRequestClose` and `handleRequestOpen` and `handleChange` to test interoperability and maintain backwards compatibility until the open/close handlers are removed in SUI-5
                 }, {
             key: "isControlled",
@@ -741,23 +737,13 @@
             value: function e() {
                 var t = this.props, o = t.innerBodyStyles, a = t.children, i = t.description, s = t.disabled, p = t.elementRef, u = t.headingLevel, f = t.overflow, b = t.renderChildrenWhenCollapsed, v = t.title, m = t.titleWithActions, y = t.inset;
                 var h = this.state.animating;
-                var g;
-                if (this.context.openPanelId !== undefined) {
-                    // SingleOpenPanelGroup controlled & uncontrolled
-                    /**
-         * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
-         * so this.context.openPanelId is used for both the controlled and uncontrolled case.
-         */
-                    var k = this.context.openPanelId === this.props.panelId;
-                    g = k;
-                } else if (this.isControlled()) {
-                    // CollapsiblePanel controlled
-                    g = this.props.open;
-                } else {
-                    // CollapsiblePanel uncontrolled
-                    g = this.state.open;
-                }
-                var C = {
+                var g = this.context.openPanelId !== undefined ? 
+                /**
+       * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
+       * so this.context.openPanelId is used for both the controlled and uncontrolled case.
+       */
+                this.context.openPanelId === this.props.panelId : this.isOpen();
+                var k = {
                     disabled: s,
                     onClick: this.handleChange,
                     id: this.toggleId,
@@ -772,7 +758,7 @@
                     elementRef: p
                 }, c()(this.props, l()(n.propTypes))), m ?  r().createElement(B, {
                     $disabled: s
-                },  r().createElement($, pe({}, C, {
+                },  r().createElement($, pe({}, k, {
                     appearance: "pill"
                 }),  r().createElement(U, {
                     open: !!g
@@ -786,7 +772,7 @@
                     "data-test": "heading",
                     role: u ? "heading" : undefined,
                     "aria-level": u
-                },  r().createElement(M, C,  r().createElement(W, null,  r().createElement(U, {
+                },  r().createElement(M, k,  r().createElement(W, null,  r().createElement(U, {
                     open: !!g
                 })),  r().createElement(H, null,  r().createElement("span", {
                     "data-test": "title"
@@ -812,9 +798,9 @@
         } ]);
         return n;
     }(n.Component);
-    Se(Pe, "propTypes", Oe);
-    Se(Pe, "defaultProps", Ie);
-    Se(Pe, "contextType", V);
+    Oe(Pe, "propTypes", Se);
+    Oe(Pe, "defaultProps", Ie);
+    Oe(Pe, "contextType", V);
     /* harmony default export */    const we = Pe;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = t;

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;
     /******/})();