@splunk/react-ui 5.3.0 → 5.5.0

package/SlidingPanels.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = n => {
-            /******/ var r = n && n.__esModule ? 
+            /******/ var t = n && n.__esModule ? 
             /******/ () => n["default"]
             /******/ : () => n
             /******/;
-            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 = (n, r) => {
-            /******/ for (var t in r) {
-                /******/ if (e.o(r, t) && !e.o(n, t)) {
-                    /******/ Object.defineProperty(n, t, {
+        /******/ e.d = (n, t) => {
+            /******/ for (var r in t) {
+                /******/ if (e.o(t, r) && !e.o(n, r)) {
+                    /******/ Object.defineProperty(n, r, {
                         enumerable: true,
-                        get: r[t]
+                        get: t[r]
                     });
                     /******/                }
                 /******/            }
@@ -62,11 +62,11 @@
     // EXPORTS
         e.d(n, {
         Panel: () => /* reexport */ A,
-        default: () => /* reexport */ L
+        default: () => /* reexport */ K
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var t =  e.n(r);
+    const t = require("react");
+    var r =  e.n(t);
     // CONCATENATED MODULE: external "@react-spring/web"
     const o = require("@react-spring/web");
     // CONCATENATED MODULE: external "prop-types"
@@ -83,11 +83,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const y = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SlidingPanels/SlidingPanelsStyles.ts
-    var d = c()(s()).withConfig({
+    var p = c()(s()).withConfig({
         displayName: "SlidingPanelsStyles__StyledBox",
         componentId: "su6isq-0"
     })([ "overflow:hidden;position:relative;" ]);
-    var v = c()(o.animated.div).withConfig({
+    var d = c()(o.animated.div).withConfig({
         displayName: "SlidingPanelsStyles__StyledAnimatedDiv",
         componentId: "su6isq-1"
     })([ "", ";", ";" ], y.mixins.reset("block"), y.mixins.clearfix());
@@ -98,7 +98,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function p(e, n) {
+    function m(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -111,52 +111,52 @@
         }
     }
     // CONCATENATED MODULE: ./src/SlidingPanels/Panel.tsx
-    function m() {
-        return m = Object.assign ? Object.assign.bind() : function(e) {
+    function v() {
+        return v = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
-                var r = arguments[n];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                var t = arguments[n];
+                for (var r in t) {
+                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
                 }
             }
             return e;
-        }, m.apply(null, arguments);
+        }, v.apply(null, arguments);
     }
     function b(e, n) {
-        return j(e) || S(e, n) || g(e, n) || O();
+        return j(e) || h(e, n) || g(e, n) || O();
     }
     function O() {
         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 g(e, n) {
         if (e) {
-            if ("string" == typeof e) return h(e, n);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? h(e, n) : void 0;
+            if ("string" == typeof e) return S(e, n);
+            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) ? S(e, n) : void 0;
         }
     }
-    function h(e, n) {
+    function S(e, n) {
         (null == n || n > e.length) && (n = e.length);
-        for (var r = 0, t = Array(n); r < n; r++) {
-            t[r] = e[r];
+        for (var t = 0, r = Array(n); t < n; t++) {
+            r[t] = e[t];
         }
-        return t;
+        return r;
     }
-    function S(e, n) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var t, o, i, a, u = [], l = !0, c = !1;
+    function h(e, n) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var r, o, i, a, u = [], l = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === n) {
-                    if (Object(r) !== r) return;
+                if (i = (t = t.call(e)).next, 0 === n) {
+                    if (Object(t) !== t) return;
                     l = !1;
-                } else for (;!(l = (t = i.call(r)).done) && (u.push(t.value), u.length !== n); l = !0) {
+                } else for (;!(l = (r = i.call(t)).done) && (u.push(r.value), u.length !== n); l = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
                 } finally {
                     if (c) throw o;
                 }
@@ -169,25 +169,25 @@
     }
     function w(e, n) {
         if (null == e) return {};
-        var r, t, o = P(e, n);
+        var t, r, o = P(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                t = i[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
     function P(e, n) {
         if (null == e) return {};
-        var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (-1 !== n.indexOf(t)) continue;
-                r[t] = e[t];
+        var t = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (-1 !== n.indexOf(r)) continue;
+                t[r] = e[r];
             }
         }
-        return r;
+        return t;
     }
     var x = {
         children: a().node,
@@ -203,23 +203,23 @@
  */    function E(e) {
         var n = e.children, o = e.elementRef, i = e.onMount, a = e.onUnmount, u = e.panelId, l = w(e, [ "children", "elementRef", "onMount", "onUnmount", "panelId" ]);
         // @docs-props-type PanelPropsBase
-                var c = (0, r.useState)(null), f = b(c, 2), s = f[0], y = f[1];
-        var d = (0, r.useCallback)((function(e) {
+                var c = (0, t.useState)(null), f = b(c, 2), s = f[0], y = f[1];
+        var p = (0, t.useCallback)((function(e) {
             y(e);
-            p(o, e);
+            m(o, e);
         }), [ o ]);
-        (0, r.useEffect)((function() {
+        (0, t.useEffect)((function() {
             i === null || i === void 0 ? void 0 : i(s, u);
             return function() {
                 a === null || a === void 0 ? void 0 : a(u);
             };
         }), [ i, a, s, u ]);
         
-        return t().createElement(v, m({
+        return r().createElement(d, v({
             "data-test": "panel",
             "data-test-panel-id": u
         }, l, {
-            ref: d
+            ref: p
         }), n);
     }
     E.propTypes = x;
@@ -233,18 +233,18 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, I(e);
     }
-    function C() {
-        return C = Object.assign ? Object.assign.bind() : function(e) {
+    function M() {
+        return M = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
-                var r = arguments[n];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                var t = arguments[n];
+                for (var r in t) {
+                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
                 }
             }
             return e;
-        }, C.apply(null, arguments);
+        }, M.apply(null, arguments);
     }
-    function M(e, n) {
+    function C(e, n) {
         return k(e) || R(e, n) || T(e, n) || N();
     }
     function N() {
@@ -253,32 +253,32 @@
     function T(e, n) {
         if (e) {
             if ("string" == typeof e) return q(e, n);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? q(e, n) : void 0;
+            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) ? q(e, n) : void 0;
         }
     }
     function q(e, n) {
         (null == n || n > e.length) && (n = e.length);
-        for (var r = 0, t = Array(n); r < n; r++) {
-            t[r] = e[r];
+        for (var t = 0, r = Array(n); t < n; t++) {
+            r[t] = e[t];
         }
-        return t;
+        return r;
     }
     function R(e, n) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var t, o, i, a, u = [], l = !0, c = !1;
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var r, o, i, a, u = [], l = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === n) {
-                    if (Object(r) !== r) return;
+                if (i = (t = t.call(e)).next, 0 === n) {
+                    if (Object(t) !== t) return;
                     l = !1;
-                } else for (;!(l = (t = i.call(r)).done) && (u.push(t.value), u.length !== n); l = !0) {
+                } else for (;!(l = (r = i.call(t)).done) && (u.push(r.value), u.length !== n); l = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
                 } finally {
                     if (c) throw o;
                 }
@@ -291,71 +291,71 @@
     }
     function U(e, n) {
         if (null == e) return {};
-        var r, t, o = _(e, n);
+        var t, r, o = _(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                t = i[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
     function _(e, n) {
         if (null == e) return {};
-        var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (-1 !== n.indexOf(t)) continue;
-                r[t] = e[t];
+        var t = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (-1 !== n.indexOf(r)) continue;
+                t[r] = e[r];
             }
         }
-        return r;
+        return t;
     }
     function D(e, n) {
-        var r = Object.keys(e);
+        var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var t = Object.getOwnPropertySymbols(e);
-            n && (t = t.filter((function(n) {
+            var r = Object.getOwnPropertySymbols(e);
+            n && (r = r.filter((function(n) {
                 return Object.getOwnPropertyDescriptor(e, n).enumerable;
-            }))), r.push.apply(r, t);
+            }))), t.push.apply(t, r);
         }
-        return r;
+        return t;
     }
     function B(e) {
         for (var n = 1; n < arguments.length; n++) {
-            var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? D(Object(r), !0).forEach((function(n) {
-                V(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : D(Object(r)).forEach((function(n) {
-                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
+            var t = null != arguments[n] ? arguments[n] : {};
+            n % 2 ? D(Object(t), !0).forEach((function(n) {
+                V(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : D(Object(t)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
             }));
         }
         return e;
     }
-    function V(e, n, r) {
+    function V(e, n, t) {
         return (n = $(n)) in e ? Object.defineProperty(e, n, {
-            value: r,
+            value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[n] = r, e;
+        }) : e[n] = t, e;
     }
     function $(e) {
-        var n = W(e, "string");
+        var n = L(e, "string");
         return "symbol" == I(n) ? n : n + "";
     }
-    function W(e, n) {
+    function L(e, n) {
         if ("object" != I(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var t = r.call(e, n || "default");
-            if ("object" != I(t)) return t;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var r = t.call(e, n || "default");
+            if ("object" != I(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
     // can't use PanelId as key type, because an index signature parameter type must be 'string', 'number', 'symbol', or a template literal type.
-        var z = {
+        var W = {
         activePanelId: a().oneOfType([ a().string, a().number ]).isRequired,
         children: a().node,
         elementRef: a().oneOfType([ a().func, a().object ]),
@@ -366,7 +366,7 @@
         outerStyle: a().object,
         transition: a().oneOf([ "forward", "backward" ])
     };
-    var F = {
+    var z = {
         enter: {
             x: "0px"
         },
@@ -374,11 +374,11 @@
             x: "0px"
         }
     };
-    var G = function e(n, r) {
-        var t = "".concat(n, "px");
+    var F = function e(n, t) {
+        var r = "".concat(n, "px");
         var o = "".concat(n * -1, "px");
-        var i = r === "forward" ? t : o;
-        var a = r === "forward" ? o : t;
+        var i = t === "forward" ? r : o;
+        var a = t === "forward" ? o : r;
         return {
             from: {
                 x: i
@@ -394,7 +394,7 @@
             }
         };
     };
-    var H = function e(n) {
+    var G = function e(n) {
         return Object.values(n).reduce((function(e, n) {
             if ((n === null || n === void 0 ? void 0 : n.tagName) === "DIV") {
                 return Math.max(e, n.clientWidth);
@@ -402,121 +402,116 @@
             return e;
         }), 0);
     };
-    /* this function is used to loop over children panels and output a render function for each,
-   we wrap each child panel in animated.div via StyledAnimatedDiv
+    /* This component is used to wrap each child panel in animated.div via StyledAnimatedDiv
    apply any custom inner styles or classnames that have been passed in
-   apply styles coming from the transitions call that is rendering this component
-   you can see this being used below as `<PanelToRender style={style} />` */    var J = function e(n) {
-        var o = n.validChildren, i = n.innerClassName, a = n.innerStyle, u = n.onMount, l = n.onUnmount;
-        return o.map((function(e) {
-            /* this is returning a function (component) that is rendered near bottom of file as <PanelToRender style={style} /> */
-            return function(n) {
-                var o = n.style;
-                var c =  (0, r.cloneElement)(e, {
-                    onMount: u,
-                    onUnmount: l
-                });
-                var f = (0, r.useMemo)((function() {
-                    return B(B({}, a), o);
-                }), [ o ]);
-                
-                return t().createElement(v, {
-                    style: f,
-                    className: i
-                }, c);
-            };
-        }));
-    };
-    function K(e) {
-        var n = e.activePanelId, i = e.children, a = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, v = e.transition, p = v === void 0 ? "forward" : v, m = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
+   apply styles coming from the transitions call that is rendering this component */    var H =  r().memo((function(e) {
+        var n = e.innerClassName, o = e.innerStyle, i = e.onMount, a = e.onUnmount, u = e.panel, l = e.style;
+        var c = (0, t.useMemo)((function() {
+            
+            return (0, t.cloneElement)(u, {
+                onMount: i,
+                onUnmount: a
+            });
+        }), [ u, i, a ]);
+        var f = (0, t.useMemo)((function() {
+            return B(B({}, o), l);
+        }), [ o, l ]);
+        
+        return r().createElement(d, {
+            style: f,
+            className: n
+        }, c);
+    }));
+    function J(e) {
+        var n = e.activePanelId, i = e.children, a = e.elementRef, l = e.innerClassName, c = e.innerStyle, f = e.onAnimationEnd, s = e.outerClassName, y = e.outerStyle, d = e.transition, m = d === void 0 ? "forward" : d, v = U(e, [ "activePanelId", "children", "elementRef", "innerClassName", "innerStyle", "onAnimationEnd", "outerClassName", "outerStyle", "transition" ]);
         // @docs-props-type SlidingPanelsPropsBase
-                var b = (0, r.useState)(0), O = M(b, 2), g = O[0], h = O[1];
-        var S = (0, r.useState)([]), j = M(S, 2), w = j[0], P = j[1];
-        var x = (0, r.useState)({}), E = M(x, 2), A = E[0], I = E[1];
+                var b = (0, t.useState)(0), O = C(b, 2), g = O[0], S = O[1];
+        var h = (0, t.useState)([]), j = C(h, 2), w = j[0], P = j[1];
+        var x = (0, t.useState)({}), E = C(x, 2), A = E[0], I = E[1];
         var N = (0, o.useSpringRef)();
-        var T = (0, r.useMemo)((function() {
-            return r.Children.toArray(i).filter(r.isValidElement);
+        var T = (0, t.useMemo)((function() {
+            return t.Children.toArray(i).filter(t.isValidElement);
         }), [ i ]);
         /**
    * maxWidth is used to determine how far to translate the x value of the animated panels.
    * Without maxWidth, we run into a problem if the leaving panel width > the arriving panel width.
    * In this case, useAnimationTransition will only know to shift the leaving panel by the width of the arriving panel,
    * which would result in seeing part of the leaving panel's content on screen at the same time as the arriving panel's content.
-   */        var q = (0, r.useMemo)((function() {
-            return H(A);
+   */        var q = (0, t.useMemo)((function() {
+            return G(A);
         }), [ A ]);
         /* determines what our transform translateX will look like based on is it transitioning forward or backward */        var R = (0, 
-        r.useMemo)((function() {
-            return G(q, p);
-        }), [ q, p ]);
+        t.useMemo)((function() {
+            return F(q, m);
+        }), [ q, m ]);
         var k = (0, u.useAnimationTransition)(g, B(B(B({
             ref: N
-        }, F), R), {}, {
+        }, z), R), {}, {
             onRest: function e() {
                 f === null || f === void 0 ? void 0 : f();
             }
         }));
-        (0, r.useEffect)((function() {
+        (0, t.useEffect)((function() {
             /* if it can't find activePanelId it will set currentPanelIndex to -1 */
             if (false) {}
         }), [ g ]);
-        (0, r.useEffect)((function() {
+        (0, t.useEffect)((function() {
             /* starts animation */
             N.start();
         }), [ N, g ]);
-        (0, r.useEffect)((function() {
+        (0, t.useEffect)((function() {
             /* sets the currentPanelIndex in state whenever activePanelId or children changes */
             var e = T.findIndex((function(e) {
-                var r = e.props;
-                return r.panelId === n;
+                var t = e.props;
+                return t.panelId === n;
             }));
-            h(e);
+            S(e);
         }), [ n, T ]);
-        var _ = (0, r.useCallback)((function(e, n) {
+        var _ = (0, t.useCallback)((function(e, n) {
             if (e != null && n != null) {
-                I((function(r) {
-                    return B(B({}, r), {}, V({}, n, e));
+                I((function(t) {
+                    return B(B({}, t), {}, V({}, n, e));
                 }));
             }
         }), []);
-        var D = (0, r.useCallback)((function(e) {
+        var D = (0, t.useCallback)((function(e) {
             I((function(n) {
-                var r = B({}, n);
-                delete r[e];
-                return r;
+                var t = B({}, n);
+                delete t[e];
+                return t;
             }));
         }), []);
-        (0, r.useMemo)((function() {
+        (0, t.useLayoutEffect)((function() {
             /**
-     * use useMemo instead of useEffect to setPanels because we need panels to be populated before mount
-     * so SlidingPanels will appear with a panel already inside the StyledBox
+     * use useLayoutEffect instead of useEffect to setPanels because we need panels to be populated before mount
+     * so SlidingPanels will appear with a panel already inside the StyledBox.  You can recreate issue by going
+     * to Storybook and quickly switching between basic and dropdown examples.  The basic example will eventually
+     * show a small square on initial render, vs what we want to be the entire initial panel.
      */
-            P(J({
-                validChildren: T,
-                onMount: _,
-                onUnmount: D,
-                innerClassName: l,
-                innerStyle: c
-            }));
-        }), [ T, _, D, l, c ]);
+            P(T);
+        }), [ T ]);
         
-        return t().createElement(d, C({
+        return r().createElement(p, M({
             className: s,
             "data-test-active-panel-id": n,
             "data-test": "sliding-panels",
             elementRef: a,
             style: y
-        }, m), k((function(e, n) {
-            var r = w[n];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        return r ?  t().createElement(r, {
+        }, v), k((function(e, n) {
+            var t = w[n];
+            return t ?  r().createElement(H, {
+                innerClassName: l,
+                innerStyle: c,
+                onMount: _,
+                onUnmount: D,
+                panel: t,
                 style: e
             }) : null;
         })));
     }
-    K.propTypes = z;
-    K.Panel = A;
-    /* harmony default export */    const L = K;
+    J.propTypes = W;
+    J.Panel = A;
+    /* harmony default export */    const K = J;
     // CONCATENATED MODULE: ./src/SlidingPanels/index.ts
     module.exports = n;
     /******/})();