@splunk/react-ui 5.0.0-beta.5 → 5.0.0-rc.2

package/Modal.js

@@ -87,9 +87,9 @@
     const p = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const v = require("@splunk/react-ui/usePrevious");
-    var y =  e.n(v);
+    var b =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const b = require("@splunk/react-ui/ScrollContainerContext");
+    const y = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "styled-components"
     const m = require("styled-components");
     var g =  e.n(m);
@@ -203,7 +203,7 @@
             "data-test": "body"
         }, o, {
             elementRef: c
-        }),  n().createElement(b.ScrollContainerProvider, {
+        }),  n().createElement(y.ScrollContainerProvider, {
             value: l
         }, r));
     }
@@ -370,8 +370,8 @@
         var r = e.children, o = e.icon, i = e.hideCloseButton, a = i === void 0 ? false : i, l = e.title, u = e.subtitle, c = ne(e, [ "children", "icon", "hideCloseButton", "title", "subtitle" ]);
         // @docs-props-type StepPropsBase
                 var s = (0, t.useContext)(N), f = s.titleId, d = s.subtitleId, p = s.divider, v = s.onRequestClose;
-        var y = p === "both" || p === "header";
-        var b =  (0, t.isValidElement)(o) &&  (0, t.cloneElement)(o, {
+        var b = p === "both" || p === "header";
+        var y =  (0, t.isValidElement)(o) &&  (0, t.cloneElement)(o, {
             width: o.props.width || "48px",
             height: o.props.height || "48px"
         });
@@ -384,19 +384,19 @@
         
         return n().createElement(n().Fragment, null,  n().createElement(Q, te({
             "data-test": "header"
-        }, c), b, l ?  n().createElement(Y, null, l &&  n().createElement(Z, {
+        }, c), y, l ?  n().createElement(Y, null, l &&  n().createElement(Z, {
             id: f,
             "data-test": "title"
         }, l), u &&  n().createElement(ee, {
             id: d,
             "data-test": "subtitle"
         }, u)) : r, !a && v &&  n().createElement(re, {
-            appearance: "secondary",
+            appearance: "subtle",
             "aria-label": (0, W._)("Close"),
             "data-test": "close",
             icon: ae,
             onClick: m
-        })), y &&  n().createElement(R(), {
+        })), b &&  n().createElement(R(), {
             appearance: "weak",
             decorative: true
         }));
@@ -455,22 +455,22 @@
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
             r % 2 ? pe(Object(t), !0).forEach((function(r) {
-                ye(e, r, t[r]);
+                be(e, r, t[r]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : pe(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function ye(e, r, t) {
-        return (r = be(r)) in e ? Object.defineProperty(e, r, {
+    function be(e, r, t) {
+        return (r = ye(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[r] = t, e;
     }
-    function be(e) {
+    function ye(e) {
         var r = me(e, "string");
         return "symbol" == ge(r) ? r : r + "";
     }
@@ -570,7 +570,7 @@
         returnFocus: i().oneOfType([ i().func, i().object ]).isRequired
     };
     function Ee(e) {
-        var r = e.children, o = e.closeOnClickAway, i = e.elementRef, a = e.divider, u = a === void 0 ? "both" : a, s = e.initialFocus, v = s === void 0 ? "first" : s, b = e.onRequestClose, m = e.open, g = m === void 0 ? false : m, h = e.returnFocus, O = e.style, w = xe(e, [ "children", "closeOnClickAway", "elementRef", "divider", "initialFocus", "onRequestClose", "open", "returnFocus", "style" ]);
+        var r = e.children, o = e.closeOnClickAway, i = e.elementRef, a = e.divider, u = a === void 0 ? "both" : a, s = e.initialFocus, v = s === void 0 ? "first" : s, y = e.onRequestClose, m = e.open, g = m === void 0 ? false : m, h = e.returnFocus, O = e.style, w = xe(e, [ "children", "closeOnClickAway", "elementRef", "divider", "initialFocus", "onRequestClose", "open", "returnFocus", "style" ]);
         // @docs-props-type ModalPropsBase
                 var S = (0, t.useRef)(null);
         // this timeout ensures that the Modal is finished rendering before setting the focus
@@ -583,7 +583,7 @@
                 headerSubtitleId: (0, p.createDOMID)("subtitleId")
             };
         })), P = he(k, 1), E = P[0], I = E.headerTitleId, q = E.headerSubtitleId;
-        var _ = y()(g);
+        var _ = b()(g);
         var T = (0, t.useCallback)((function() {
             return {
                 top: 0
@@ -665,16 +665,16 @@
         };
         var B = (0, t.useCallback)((function(e) {
             x.current = null;
-            b === null || b === void 0 ? void 0 : b(e);
-        }), [ b ]);
+            y === null || y === void 0 ? void 0 : y(e);
+        }), [ y ]);
         var F = (0, t.useMemo)((function() {
             return {
                 divider: u,
-                onRequestClose: b,
+                onRequestClose: y,
                 subtitleId: q,
                 titleId: I
             };
-        }), [ u, b, I, q ]);
+        }), [ u, y, I, q ]);
         var L = c()((function(e) {
             var r = e.opacity, t = e.modalStyle, n = e.top;
             return ve(ve({}, t), {}, {

package/ModalLayer.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* 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 = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,155 +56,135 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ T
+        e.d(r, {
+        default: () => /* reexport */ C
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // 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 c = require("@splunk/react-ui/Layer");
-    var l =  e.n(c);
+    const l = require("@splunk/react-ui/Layer");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "styled-components"
-    const u = require("styled-components");
-    var p =  e.n(u);
+    const c = require("styled-components");
+    var s =  e.n(c);
     // CONCATENATED MODULE: external "@react-spring/web"
-    const s = require("@react-spring/web");
+    const f = require("@react-spring/web");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const f = require("@splunk/themes");
+    const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayerStyles.ts
-    var y = (0, u.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], f.mixins.reset("block"));
-    var d = p()(s.animated.div).withConfig({
+    var v = (0, c.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], y.mixins.reset("block"));
+    var p = s()(f.animated.div).withConfig({
         displayName: "ModalLayerStyles__StyledClickAwayOverlay",
         componentId: "sc-1sa3n1j-0"
-    })([ "", ";background-color:", ";z-index:", ";" ], y, f.variables.backgroundColorScrim, f.variables.zindexModalBackdrop);
+    })([ "", ";background-color:", ";z-index:", ";" ], v, y.variables.backgroundColorScrim, y.variables.zindexModalBackdrop);
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayer.tsx
-    function b(e) {
+    function d(e) {
         "@babel/helpers - typeof";
-        return b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, b(e);
+        }, d(e);
     }
-    function v(e, t) {
-        var r = Object.keys(e);
+    function b(e, r) {
+        var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
         }
-        return r;
+        return t;
     }
     function m(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? v(Object(r), !0).forEach((function(t) {
-                E(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : v(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? b(Object(t), !0).forEach((function(r) {
+                g(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : b(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function O(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function h(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, q(n.key), n);
-        }
-    }
-    function g(e, t, r) {
-        return t && h(e.prototype, t), r && h(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function w(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && j(e, t);
-    }
-    function j(e, t) {
-        return j = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, j(e, t);
-    }
-    function P(e) {
-        var t = A();
-        return function() {
-            var r, n = _(e);
-            if (t) {
-                var o = _(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return S(this, r);
-        };
+    function g(e, r, t) {
+        return (r = O(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
     }
-    function S(e, t) {
-        if (t && ("object" == b(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return k(e);
+    function O(e) {
+        var r = S(e, "string");
+        return "symbol" == d(r) ? r : r + "";
     }
-    function k(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
+    function S(e, r) {
+        if ("object" != d(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != d(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
     }
-    function A() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (A = function t() {
-            return !!e;
-        })();
+    function h(e, r) {
+        return A(e) || M(e, r) || w(e, r) || j();
     }
-    function _(e) {
-        return _ = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, _(e);
+    function j() {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function E(e, t, r) {
-        return (t = q(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
+    function w(e, r) {
+        if (e) {
+            if ("string" == typeof e) return P(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? P(e, r) : void 0;
+        }
     }
-    function q(e) {
-        var t = M(e, "string");
-        return "symbol" == b(t) ? t : t + "";
+    function P(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
+        }
+        return n;
     }
-    function M(e, t) {
-        if ("object" != b(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != b(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function M(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
+            }
+            return l;
         }
-        return ("string" === t ? String : Number)(e);
     }
-    var C = {
+    function A(e) {
+        if (Array.isArray(e)) return e;
+    }
+    var k = {
         childrenInAnimation: i().bool,
         getDefaultMotionStyle: i().func,
         getMotionStyle: i().func,
@@ -213,102 +193,76 @@
         renderModal: i().func.isRequired,
         scrim: i().oneOf([ "visible", "hidden", "interactive" ])
     };
-    var R = {
-        childrenInAnimation: false,
-        open: false,
-        scrim: "interactive"
-    };
-    var D =  function(e) {
-        w(r, e);
-        var t = P(r);
-        g(r, null, [ {
-            key: "getDerivedStateFromProps",
-            value: function e(t, r) {
-                if (t.open !== r.prevOpen) {
-                    return {
-                        animating: true,
-                        prevOpen: t.open
-                    };
-                }
-                return null;
-            }
-        } ]);
-        function r(e) {
-            var o;
-            O(this, r);
-            o = t.call(this, e);
-            E(k(o), "allowAnimationUpdates", true);
-            E(k(o), "handleClickAway", (function(e) {
-                var t, r;
-                (t = (r = o.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, {
-                    reason: "clickAway",
-                    event: e
-                });
-            }));
-            E(k(o), "handleAnimationEnd", (function() {
-                if (o.allowAnimationUpdates) {
-                    o.setState({
-                        animating: false
-                    });
-                }
-            }));
-            E(k(o), "renderLayer", (function() {
-                var e = o.props, t = e.getDefaultMotionStyle, r = e.getMotionStyle, i = e.renderModal, c = e.scrim;
-                var l = o.props.open || o.state.animating;
-                var u = l && c !== "hidden";
-                
-                return n().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()), {}, {
-                        overlayOpacity: o.props.open ? 1 : 0,
-                        opacity: o.props.open ? 1 : 0
-                    }),
-                    onRest: o.handleAnimationEnd
-                }, (function(e) {
-                    
-                    return n().createElement("div", null, /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), u &&  n().createElement(d, {
-                        "data-test": "modal-overlay",
-                        onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
-                        key: "clickAway",
-                        style: {
-                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            opacity: e.overlayOpacity
-                        }
-                    }));
-                }));
-            }));
-            o.state = {
-                animating: false,
-                prevOpen: e.open
-            };
-            return o;
+    var q = [ "escapeKey" ];
+    function E(e) {
+        var r, o;
+        var i = e.childrenInAnimation, l = e.getDefaultMotionStyle, c = e.getMotionStyle, s = e.onRequestClose, f = e.open, y = e.renderModal, v = e.scrim, d = v === void 0 ? "interactive" : v;
+        var b = (0, t.useState)(false), g = h(b, 2), O = g[0], S = g[1];
+        var j = (0, t.useRef)(true);
+        var w = (0, t.useState)(f), P = h(w, 2), M = P[0], A = P[1];
+        if (f !== M) {
+            // we can't use prevOpen here since that's a ref behind the scenes
+            // and won't get updated until the component re-renders successfully
+            // whereas setAnimating will interrupt the re-render and we'll end up in an infinite loop
+            // so we need to update the value of wasOpen at the same time
+            S(true);
+            A(f);
         }
-        g(r, [ {
-            key: "componentWillUnmount",
-            value: function e() {
-                this.allowAnimationUpdates = false;
-            }
- /* eslint-disable jsx-a11y/no-static-element-interactions */        }, {
-            key: "render",
-            /* eslint-enable jsx-a11y/no-static-element-interactions */ value: function e() {
-                var t = this.props.open || this.state.animating || this.props.childrenInAnimation;
-                
-                return n().createElement(l(), {
-                    open: t,
-                    closeReasons: [ "escapeKey" ],
-                    onRequestClose: this.props.onRequestClose
-                }, t && this.renderLayer());
+        (0, t.useEffect)((function() {
+            return function() {
+                j.current = false;
+            };
+        }), []);
+        var k = function e(r) {
+            s === null || s === void 0 ? void 0 : s({
+                reason: "clickAway",
+                event: r
+            });
+        };
+        var E = function e() {
+            if (j.current) {
+                S(false);
             }
-        } ]);
-        return r;
-    }(r.Component);
-    E(D, "propTypes", C);
-    E(D, "defaultProps", R);
-    /* harmony default export */    const T = D;
+        };
+        var C = m(m({}, (r = l === null || l === void 0 ? void 0 : l()) !== null && r !== void 0 ? r : {}), {}, {
+            overlayOpacity: 0,
+            opacity: 0
+        });
+        var D = m(m({}, (o = c === null || c === void 0 ? void 0 : c()) !== null && o !== void 0 ? o : {}), {}, {
+            overlayOpacity: f ? 1 : 0,
+            opacity: f ? 1 : 0
+        });
+        var R = (0, a.useAnimation)({
+            from: C,
+            to: D,
+            onRest: E
+        });
+        var x = (0, t.useMemo)((function() {
+            return {
+                opacity: R.overlayOpacity
+            };
+        }), [ R ]);
+        var I = function e() {
+            var r = f || O;
+            var t = r && d !== "hidden";
+            
+            return n().createElement("div", null, y(R), t &&  n().createElement(p, {
+                "data-test": "modal-overlay",
+                onMouseDown: d === "interactive" ? k : undefined,
+                key: "clickAway",
+                style: x
+            }));
+        };
+        var _ = f || O || i;
+        
+        return n().createElement(u(), {
+            open: _,
+            closeReasons: q,
+            onRequestClose: s
+        }, _ && I());
+    }
+    E.propTypes = k;
+    /* harmony default export */    const C = E;
     // CONCATENATED MODULE: ./src/ModalLayer/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();