@splunk/react-ui 5.0.0-rc.1 → 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/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

@@ -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