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

package/Modal.js

@@ -69,25 +69,25 @@
     // CONCATENATED MODULE: external "react"
     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 "lodash/defer"
-    const a = require("lodash/defer");
-    var l =  e.n(a);
+    const o = require("lodash/defer");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "lodash/memoize"
-    const u = require("lodash/memoize");
+    const a = require("lodash/memoize");
+    var l =  e.n(a);
+    // CONCATENATED MODULE: external "prop-types"
+    const u = require("prop-types");
     var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
     const s = require("@splunk/react-ui/ModalLayer");
     var f =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const d = require("@splunk/react-ui/usePrevious");
+    var p =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const d = require("@splunk/ui-utils/focus");
+    const v = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const p = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const v = require("@splunk/react-ui/usePrevious");
-    var b =  e.n(v);
+    const b = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
     const y = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "styled-components"
@@ -187,7 +187,7 @@
         return t;
     }
     var T = {
-        children: i().node
+        children: c().node
     };
     /**
  * A styled container for `Modal` body content.
@@ -259,8 +259,8 @@
         return t;
     }
     var z = {
-        children: i().node,
-        layout: i().oneOf([ "auto", "none" ])
+        children: c().node,
+        layout: c().oneOf([ "auto", "none" ])
     };
     /**
  * A styled container for `Modal` footer content.
@@ -354,11 +354,11 @@
         return t;
     }
     var ie = {
-        children: i().node,
-        icon: i().node,
-        hideCloseButton: i().bool,
-        title: i().string,
-        subtitle: i().node
+        children: c().node,
+        icon: c().node,
+        hideCloseButton: c().bool,
+        title: c().string,
+        subtitle: c().node
     };
     var ae =  n().createElement(K(), {
         width: "20px",
@@ -560,17 +560,17 @@
         return t;
     }
     /** @public */    var Pe = {
-        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" ]) ]),
-        onRequestClose: i().func,
-        open: i().bool,
-        returnFocus: i().oneOfType([ i().func, i().object ]).isRequired
+        children: c().node,
+        closeOnClickAway: c().bool,
+        divider: c().oneOf([ "header", "footer", "both", "none" ]),
+        elementRef: c().oneOfType([ c().func, c().object ]),
+        initialFocus: c().oneOfType([ c().object, c().oneOf([ "first", "container" ]) ]),
+        onRequestClose: c().func,
+        open: c().bool,
+        returnFocus: c().oneOfType([ c().func, c().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, 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" ]);
+        var r = e.children, o = e.closeOnClickAway, a = e.elementRef, u = e.divider, c = u === void 0 ? "both" : u, s = e.initialFocus, d = 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
@@ -579,11 +579,11 @@
         var x = (0, t.useRef)(null);
         var k = (0, t.useState)((function() {
             return {
-                headerTitleId: (0, p.createDOMID)("titleId"),
-                headerSubtitleId: (0, p.createDOMID)("subtitleId")
+                headerTitleId: (0, b.createDOMID)("titleId"),
+                headerSubtitleId: (0, b.createDOMID)("subtitleId")
             };
         })), P = he(k, 1), E = P[0], I = E.headerTitleId, q = E.headerSubtitleId;
-        var _ = b()(g);
+        var _ = p()(g);
         var T = (0, t.useCallback)((function() {
             return {
                 top: 0
@@ -601,28 +601,28 @@
         }), [ g ]);
         var D = (0, t.useCallback)((function(e) {
             if (g) {
-                C.current = l()((function() {
+                C.current = i()((function() {
                     var e;
                     // not using the takeFocus() util here because it
                     // doesn't work for all values of "initialFocus"
                     // and it has a nested defer() call, which we want to avoid
-                                        if (x.current !== v) {
-                        if (v === "first") {
+                                        if (x.current !== d) {
+                        if (d === "first") {
                             if (S.current) {
                                 /* eslint-disable prefer-destructuring */
                                 /* prefer-desturucting leads to harder-to-read syntax in this case */
-                                e = (0, d.getSortedTabbableElements)(S.current)[0];
+                                e = (0, v.getSortedTabbableElements)(S.current)[0];
                                 /* eslint-enable prefer-destructuring */                            }
-                        } else if (v === "container") {
+                        } else if (d === "container") {
                             e = S.current;
-                        } else if (ge(v) === "object") {
-                            e = v;
+                        } else if (ge(d) === "object") {
+                            e = d;
                         }
                         // Typescript isn't happy with optional chaining here
                                                 if (e != null && "focus" in e) {
                             e.focus();
                         }
-                        x.current = v;
+                        x.current = d;
                     }
                 }));
             } else {
@@ -637,7 +637,7 @@
                         if (typeof h === "function") {
                             h();
                         } else {
-                            l()((function() {
+                            i()((function() {
                                 var e, r;
                                 (e = h.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
                             }));
@@ -645,22 +645,22 @@
                     }
                 }
             }
-        }), [ v, g, h ]);
+        }), [ d, g, h ]);
         (0, t.useEffect)((function() {
-            if (x.current !== v) {
+            if (x.current !== d) {
                 // cancel the defer() set up in handleInitialFocus()
                 // so that focus won't jump around if "initialFocus" changes
                 clearTimeout(C.current);
             }
             D(_);
-        }), [ D, v, g, j, _ ]);
+        }), [ D, d, g, j, _ ]);
         var M = (0, t.useCallback)((function(e) {
             S.current = e;
-            fe(i, e);
-        }), [ i, S ]);
+            fe(a, e);
+        }), [ a, S ]);
         var R = function e(r) {
             if (S.current !== null) {
-                (0, d.handleTab)(S.current, r.nativeEvent);
+                (0, v.handleTab)(S.current, r.nativeEvent);
             }
         };
         var B = (0, t.useCallback)((function(e) {
@@ -669,13 +669,13 @@
         }), [ y ]);
         var F = (0, t.useMemo)((function() {
             return {
-                divider: u,
+                divider: c,
                 onRequestClose: y,
                 subtitleId: q,
                 titleId: I
             };
-        }), [ u, y, I, q ]);
-        var L = c()((function(e) {
+        }), [ c, y, I, q ]);
+        var L = l()((function(e) {
             var r = e.opacity, t = e.modalStyle, n = e.top;
             return ve(ve({}, t), {}, {
                 opacity: r,

package/ModalLayer.js

@@ -72,18 +72,18 @@
     // 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);
-    // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var s =  e.n(c);
+    const u = require("@splunk/react-ui/Layer");
+    var l =  e.n(u);
     // CONCATENATED MODULE: external "@react-spring/web"
-    const f = require("@react-spring/web");
+    const c = require("@react-spring/web");
+    // CONCATENATED MODULE: external "styled-components"
+    const s = require("styled-components");
+    var f =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/themes"
     const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ModalLayer/ModalLayerStyles.ts
-    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({
+    var v = (0, s.css)([ "", ";position:fixed;top:0;right:0;bottom:0;left:0;" ], y.mixins.reset("block"));
+    var p = f()(c.animated.div).withConfig({
         displayName: "ModalLayerStyles__StyledClickAwayOverlay",
         componentId: "sc-1sa3n1j-0"
     })([ "", ";background-color:", ";z-index:", ";" ], v, y.variables.backgroundColorScrim, y.variables.zindexModalBackdrop);
@@ -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

package/Monogram.js

@@ -67,11 +67,11 @@
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
-    // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const a = require("lodash/omit");
+    const i = require("lodash/omit");
+    var o =  e.n(i);
+    // CONCATENATED MODULE: external "prop-types"
+    const a = require("prop-types");
     var l =  e.n(a);
     // CONCATENATED MODULE: external "styled-components"
     const c = require("styled-components");
@@ -285,12 +285,12 @@
         return t;
     }
     /** @public */    var q = {
-        backgroundColor: o().string,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        initials: o().string.isRequired,
-        name: o().string,
-        onClick: o().func,
-        size: o().oneOfType([ o().oneOf([ "small", "medium", "large" ]), o().number ])
+        backgroundColor: l().string,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        initials: l().string.isRequired,
+        name: l().string,
+        onClick: l().func,
+        size: l().oneOfType([ l().oneOf([ "small", "medium", "large" ]), l().number ])
     };
     function R(e) {
         return !!e.onClick;
@@ -318,8 +318,8 @@
         return [ o, i ];
     }
     function D(e) {
-        var r = N(e), i = z(r, 2), o = i[0], a = i[1];
-        var c = a.children, s = a.elementRef, u = a.name, f = a.onClick, p = M(a, [ "children", "elementRef", "name", "onClick" ]);
+        var r = N(e), i = z(r, 2), a = i[0], l = i[1];
+        var c = l.children, s = l.elementRef, u = l.name, f = l.onClick, p = M(l, [ "children", "elementRef", "name", "onClick" ]);
         var b = (0, t.useCallback)((function(e) {
             f(e, {
                 name: u
@@ -329,15 +329,15 @@
         return n().createElement(g, C({
             elementRef: s,
             onClick: b
-        }, o, l()(p, Object.keys(q))), c);
+        }, a, o()(p, Object.keys(q))), c);
     }
     function X(e) {
-        var r = N(e), t = z(r, 2), i = t[0], o = t[1];
-        var a = o.children, c = o.elementRef, s = M(o, [ "children", "elementRef" ]);
+        var r = N(e), t = z(r, 2), i = t[0], a = t[1];
+        var l = a.children, c = a.elementRef, s = M(a, [ "children", "elementRef" ]);
         
         return n().createElement(y, C({
             ref: c
-        }, i, l()(s, Object.keys(q))), a);
+        }, i, o()(s, Object.keys(q))), l);
     }
     function L(e) {
         var r = e.backgroundColor, t = r === void 0 ? "theme" : r, i = e.initials, o = e.size, a = o === void 0 ? "medium" : o, l = M(e, [ "backgroundColor", "initials", "size" ]);