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

package/Message.js

@@ -68,10 +68,10 @@
     var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var i =  e.n(a);
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const o = require("@splunk/react-icons/CheckCircle");
-    var l =  e.n(o);
+    const i = require("@splunk/react-icons/CheckCircle");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
     const s = require("@splunk/react-icons/Cross");
     var c =  e.n(s);
@@ -104,40 +104,44 @@
         warning: C.variables.notificationColorCaution,
         error: C.variables.notificationColorNegative
     };
-    var k = w().div.withConfig({
+    var x = w().div.withConfig({
         displayName: "MessageStyles__StyledTitle",
         componentId: "eg66af-0"
     })([ "", ";" ], C.mixins.typography("title4"));
-    var x = w().div.withConfig({
+    var k = w().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-1"
-    })([ "", ";grid-row:1 / -1;grid-column:content;max-width:", ";word-wrap:break-word;&:not(:has(> ", ")){", ";}" ], C.mixins.typography("body"), C.variables.lineLength, k, C.mixins.typography("body", {
+    })([ "", ";grid-row:1 / -1;grid-column:content;max-width:", ";word-wrap:break-word;&:not(:has(> ", ")){", ";}" ], C.mixins.typography("body"), C.variables.lineLength, x, C.mixins.typography("body", {
         color: "active"
     }));
-    var q = w().span.withConfig({
+    var R = w().span.withConfig({
         displayName: "MessageStyles__StyledIcon",
         componentId: "eg66af-2"
     })([ "fill:", ";grid-row:1;height:20px;width:20px;" ], (0, C.pickVariant)("$type", _));
-    var R = w()(O()).withConfig({
+    var q = w()(O()).withConfig({
         displayName: "MessageStyles__StyledRemove",
         componentId: "eg66af-3"
     })([ "grid-column:remove;" ]);
-    var j = w().div.withConfig({
+    var I = w().div.withConfig({
         displayName: "MessageStyles__Styled",
         componentId: "eg66af-4"
-    })([ "", ";grid-template-columns:[icon] 20px ", " [content] auto ", " [remove] min-content;grid-template-rows:1lh auto;align-items:center;padding:", ";", "" ], C.mixins.reset("grid"), C.variables.spacingSmall, C.variables.spacingSmall, C.variables.spacingSmall, (function(e) {
-        var n = e.$appearance, r = e.$type;
-        var t = _[r];
-        return n === "fill" && (0, h.css)([ "background-color:", ";border-left:8px solid ", ";border-radius:", ";box-shadow:", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [remove] min-content;padding-inline:", ";" ], C.variables.backgroundColorPopup, t, C.variables.borderRadius, C.variables.embossShadow, C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingSmall, C.variables.spacingMedium);
+    })([ "", ";grid-template-rows:1lh auto;align-items:center;padding:", ";", ";", "" ], C.mixins.reset("grid"), C.variables.spacingSmall, (function(e) {
+        var n = e.$hasRemoveIcon;
+        return (0, h.css)([ "grid-template-columns:[icon] 20px ", " [content] auto ", " [remove] min-content;" ], C.variables.spacingSmall, n ? C.variables.spacingSmall : "0");
+    }), (function(e) {
+        var n = e.$appearance, r = e.$hasRemoveIcon, t = e.$type;
+        var a = _[t];
+        return n === "fill" && (0, h.css)([ "background-color:", ";border-left:8px solid ", ";border-radius:", ";box-shadow:", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ");padding-inline:", ";", "" ], C.variables.backgroundColorPopup, a, C.variables.borderRadius, C.variables.embossShadow, C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingMedium, r && (0, 
+        h.css)([ "grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [remove] min-content;" ], C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingSmall));
     }));
     // CONCATENATED MODULE: ./src/Message/Title.tsx
-    function I(e, n) {
+    function j(e, n) {
         if (null == e) return {};
         var r, t, a = P(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < o.length; t++) {
+                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -154,21 +158,21 @@
         return r;
     }
     var E = {
-        children: i().node
+        children: o().node
     };
     /**
  * A title component for use in `Message`.
  */    function M(e) {
-        var n = e.children, r = I(e, [ "children" ]);
+        var n = e.children, r = j(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return t().createElement(k, r, n);
+        return t().createElement(x, r, n);
     }
     M.propTypes = E;
-    /* harmony default export */    const T = M;
+    /* harmony default export */    const $ = M;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
-    function $() {
-        return $ = Object.assign ? Object.assign.bind() : function(e) {
+    function T() {
+        return T = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -176,20 +180,20 @@
                 }
             }
             return e;
-        }, $.apply(null, arguments);
+        }, T.apply(null, arguments);
     }
     function N(e, n) {
         if (null == e) return {};
-        var r, t, a = z(e, n);
+        var r, t, a = L(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < o.length; t++) {
+                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
     }
-    function z(e, n) {
+    function L(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -200,12 +204,12 @@
         }
         return r;
     }
-    var L = {
-        appearance: i().oneOf([ "default", "fill" ]),
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        onRequestRemove: i().func,
-        type: i().oneOf([ "info", "warning", "error", "success" ])
+    var z = {
+        appearance: o().oneOf([ "default", "fill" ]),
+        children: o().node,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        onRequestRemove: o().func,
+        type: o().oneOf([ "info", "warning", "error", "success" ])
     };
     var A = Object.freeze({
         info: v(),
@@ -224,7 +228,7 @@
         width: "20px"
     });
     function F(e) {
-        var n = e.appearance, a = n === void 0 ? "default" : n, i = e.children, o = e.elementRef, l = e.onRequestRemove, s = e.type, c = s === void 0 ? "warning" : s, u = N(e, [ "appearance", "children", "elementRef", "onRequestRemove", "type" ]);
+        var n = e.appearance, a = n === void 0 ? "default" : n, o = e.children, i = e.elementRef, l = e.onRequestRemove, s = e.type, c = s === void 0 ? "warning" : s, u = N(e, [ "appearance", "children", "elementRef", "onRequestRemove", "type" ]);
         // @docs-props-type MessagePropsBase
                 var p = (0, r.useCallback)((function(e) {
             l === null || l === void 0 ? void 0 : l(e);
@@ -232,20 +236,20 @@
         var d = A[c];
         var v = B[c];
         
-        return t().createElement(j, $({
-            ref: o,
+        return t().createElement(I, T({
+            ref: i,
             $appearance: a,
             $hasRemoveIcon: !!l,
             $type: c,
             "data-test-type": c,
             "data-test": "message"
-        }, u),  t().createElement(t().Fragment, null,  t().createElement(q, {
+        }, u),  t().createElement(t().Fragment, null,  t().createElement(R, {
             as: d,
             $type: c,
             variant: "filled"
-        }),  t().createElement(y(), null, v)),  t().createElement(x, {
+        }),  t().createElement(y(), null, v)),  t().createElement(k, {
             "data-test": "content"
-        }, i), l &&  t().createElement(R, {
+        }, o), l &&  t().createElement(q, {
             "aria-label": "Remove",
             "data-test": "remove",
             appearance: "subtle",
@@ -253,8 +257,8 @@
             icon: D
         }));
     }
-    F.propTypes = L;
-    F.Title = T;
+    F.propTypes = z;
+    F.Title = $;
     /* harmony default export */    const V = F;
     // CONCATENATED MODULE: ./src/Message/index.ts
     module.exports = n;

package/ModalLayer.js

@@ -72,8 +72,8 @@
     // 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 u = require("@splunk/react-ui/Layer");
+    var l =  e.n(u);
     // CONCATENATED MODULE: external "styled-components"
     const c = require("styled-components");
     var s =  e.n(c);
@@ -162,23 +162,23 @@
     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;
+            var n, o, i, a, u = [], l = !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) {
+                    l = !1;
+                } else for (;!(l = (n = i.call(t)).done) && (u.push(n.value), u.length !== r); l = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
                 } finally {
                     if (c) throw o;
                 }
             }
-            return l;
+            return u;
         }
     }
     function A(e) {
@@ -196,7 +196,7 @@
     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 i = e.childrenInAnimation, u = 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];
@@ -208,7 +208,11 @@
             S(true);
             A(f);
         }
-        (0, t.useEffect)((function() {
+        // equivalent to componentDidMount and componentWillUnmount
+                (0, t.useEffect)((function() {
+            // we need to set this to true on every mount because React.StrictMode will call the effect twice
+            // and we need to ensure that allowAnimationUpdates is true while the component is mounted
+            j.current = true;
             return function() {
                 j.current = false;
             };
@@ -224,7 +228,7 @@
                 S(false);
             }
         };
-        var C = m(m({}, (r = l === null || l === void 0 ? void 0 : l()) !== null && r !== void 0 ? r : {}), {}, {
+        var C = m(m({}, (r = u === null || u === void 0 ? void 0 : u()) !== null && r !== void 0 ? r : {}), {}, {
             overlayOpacity: 0,
             opacity: 0
         });
@@ -255,7 +259,7 @@
         };
         var _ = f || O || i;
         
-        return n().createElement(u(), {
+        return n().createElement(l(), {
             open: _,
             closeReasons: q,
             onRequestClose: s