@splunk/react-ui 4.43.0 → 5.0.0-beta.2

package/SidePanel.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ V
+        default: () => /* reexport */ R
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -69,56 +69,53 @@
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const a = require("lodash/keys");
-    var l =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const u = require("lodash/omit");
-    var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
-    const s = require("@splunk/react-ui/ModalLayer");
-    var p =  e.n(s);
+    const a = require("@splunk/react-ui/ModalLayer");
+    var l =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const u = require("@splunk/react-ui/usePrevious");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "styled-components"
-    const f = require("styled-components");
-    var y =  e.n(f);
+    const c = require("styled-components");
+    var f =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
-    const d = require("@splunk/react-ui/TransitionOpen");
-    var b =  e.n(d);
+    const p = require("@splunk/react-ui/TransitionOpen");
+    var y =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SidePanel/SidePanelStyles.ts
-    var v = (0, f.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], m.mixins.reset("flex"), (0, 
-    m.pick)({
+    var m = (0, c.css)([ "", " position:fixed;flex-direction:column;box-shadow:", ";background-color:", ";z-index:", ";" ], d.mixins.reset("flex"), (0, 
+    d.pick)({
         enterprise: "0 0 12px rgba(0, 0, 0, 0.3)",
-        prisma: m.variables.overlayShadow
-    }), m.variables.backgroundColorSidebar, m.variables.zindexModal);
-    var h = y()(b()).withConfig({
+        prisma: d.variables.overlayShadow
+    }), d.variables.backgroundColorSidebar, d.variables.zindexModal);
+    var b = f()(y()).withConfig({
         displayName: "SidePanelStyles__StyledLeftPanelTransitionOpen",
         componentId: "mtbcuz-0"
-    })([ "", ";top:0;left:0;height:100vh;" ], v);
-    var g = y()(b()).withConfig({
+    })([ "", ";top:0;left:0;height:100vh;" ], m);
+    var v = f()(y()).withConfig({
         displayName: "SidePanelStyles__StyledRightPanelTransitionOpen",
         componentId: "mtbcuz-1"
-    })([ "", ";right:0;top:0;height:100vh;" ], v);
-    var O = y()(b()).withConfig({
+    })([ "", ";right:0;top:0;height:100vh;" ], m);
+    var h = f()(y()).withConfig({
         displayName: "SidePanelStyles__StyledTopPanelTransitionOpen",
         componentId: "mtbcuz-2"
-    })([ "", ";top:0;left:0;width:100vw;" ], v);
-    var S = y()(b()).withConfig({
+    })([ "", ";top:0;left:0;width:100vw;" ], m);
+    var g = f()(y()).withConfig({
         displayName: "SidePanelStyles__StyledBottomPanelTransitionOpen",
         componentId: "mtbcuz-3"
-    })([ "", ";left:0;bottom:0;width:100vw;" ], v);
+    })([ "", ";left:0;bottom:0;width:100vw;" ], m);
     // CONCATENATED MODULE: ./src/SidePanel/SidePanel.tsx
-    function w(e) {
+    function S(e) {
         "@babel/helpers - typeof";
-        return w = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return S = "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;
-        }, w(e);
+        }, S(e);
     }
-    function P() {
-        return P = Object.assign ? Object.assign.bind() : function(e) {
+    function O() {
+        return O = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -126,35 +123,9 @@
                 }
             }
             return e;
-        }, P.apply(null, arguments);
-    }
-    function j(e) {
-        return k(e) || _(e) || C(e) || A();
-    }
-    function A() {
-        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-    function C(e, t) {
-        if (e) {
-            if ("string" == typeof e) return E(e, t);
-            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) ? E(e, t) : void 0;
-        }
-    }
-    function _(e) {
-        if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
+        }, O.apply(null, arguments);
     }
-    function k(e) {
-        if (Array.isArray(e)) return E(e);
-    }
-    function E(e, t) {
-        (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
-        }
-        return n;
-    }
-    function T(e, t) {
+    function w(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -164,105 +135,107 @@
         }
         return r;
     }
-    function q(e) {
+    function P(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? T(Object(r), !0).forEach((function(t) {
-                U(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : T(Object(r)).forEach((function(t) {
+            t % 2 ? w(Object(r), !0).forEach((function(t) {
+                j(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : w(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function x(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function N(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, $(n.key), n);
-        }
-    }
-    function F(e, t, r) {
-        return t && N(e.prototype, t), r && N(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function M(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 && I(e, t);
-    }
-    function I(e, t) {
-        return I = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, I(e, t);
-    }
-    function R(e) {
-        var t = L();
-        return function() {
-            var r, n = B(e);
-            if (t) {
-                var o = B(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return z(this, r);
-        };
-    }
-    function z(e, t) {
-        if (t && ("object" == w(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return D(e);
-    }
-    function D(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function L() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (L = function t() {
-            return !!e;
-        })();
-    }
-    function B(e) {
-        return B = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, B(e);
-    }
-    function U(e, t, r) {
-        return (t = $(t)) in e ? Object.defineProperty(e, t, {
+    function j(e, t, r) {
+        return (t = C(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function $(e) {
-        var t = G(e, "string");
-        return "symbol" == w(t) ? t : t + "";
+    function C(e) {
+        var t = k(e, "string");
+        return "symbol" == S(t) ? t : t + "";
     }
-    function G(e, t) {
-        if ("object" != w(e) || !e) return e;
+    function k(e, t) {
+        if ("object" != S(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != w(n)) return n;
+            if ("object" != S(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    /** @public */    var H = {
+    function A(e, t) {
+        return _(e) || T(e, t) || E(e, t) || N();
+    }
+    function N() {
+        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) {
+        if (e) {
+            if ("string" == typeof e) return M(e, t);
+            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) ? M(e, t) : void 0;
+        }
+    }
+    function M(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var r = 0, n = Array(t); r < t; r++) {
+            n[r] = e[r];
+        }
+        return n;
+    }
+    function T(e, t) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var n, o, i, a, l = [], u = !0, s = !1;
+            try {
+                if (i = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                }
+            } catch (e) {
+                s = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (s) throw o;
+                }
+            }
+            return l;
+        }
+    }
+    function _(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function q(e, t) {
+        if (null == e) return {};
+        var r, n, o = x(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
+    }
+    function x(e, t) {
+        if (null == e) return {};
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (t.includes(n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    /** @public */    var I = {
         children: i().node,
         dockPosition: i().oneOf([ "top", "bottom", "left", "right" ]),
         innerClassName: i().string,
@@ -274,101 +247,84 @@
         outerStyle: i().object,
         useLayerForClickAway: i().bool
     };
-    var J = {
-        dockPosition: "right",
-        open: false,
-        useLayerForClickAway: true
-    };
-    var K = {
+    var F = {
         left: "slideFromLeft",
         right: "slideFromRight",
         top: "slideFromTop",
         bottom: "slideFromBottom"
     };
-    var Q =  function(e) {
-        M(r, e);
-        var t = R(r);
-        F(r, null, [ {
-            key: "getDerivedStateFromProps",
-            // @docs-props-type SidePanelPropsBase
-            value: function e(t, r) {
-                if (t.open !== r.prevOpen) {
-                    return {
-                        panelAnimating: true,
-                        prevOpen: t.open
-                    };
-                }
-                return null;
+    var z = {
+        left: b,
+        right: v,
+        top: h,
+        bottom: g
+    };
+    function L(e) {
+        var t = e.children, o = e.dockPosition, i = o === void 0 ? "right" : o, a = e.innerClassName, u = e.innerStyle, c = e.onAnimationEnd, f = e.onRequestClose, p = e.open, y = e.outerClassName, d = e.outerStyle, m = e.useLayerForClickAway, b = m === void 0 ? true : m, v = q(e, [ "children", "dockPosition", "innerClassName", "innerStyle", "onAnimationEnd", "onRequestClose", "open", "outerClassName", "outerStyle", "useLayerForClickAway" ]);
+        // @docs-props-type SidePanelPropsBase
+                var h = (0, r.useState)(false), g = A(h, 2), S = g[0], w = g[1];
+        var j = s()(p);
+        (0, r.useEffect)((function() {
+            // prevOpen starts undefined, and we don't want to make the comparison in that situation
+            if (j != null && p !== j) {
+                w(true);
             }
-        } ]);
-        function r(e) {
-            var o;
-            x(this, r);
-            o = t.call(this, e);
-            U(D(o), "handlePanelAnimationEnd", (function() {
-                var e, t;
-                o.setState({
-                    panelAnimating: false
-                });
-                (e = (t = o.props).onAnimationEnd) === null || e === void 0 ? void 0 : e.call(t);
-            }));
-            U(D(o), "renderModal", (function() {
-                var e = o.props, t = e.children, i = e.dockPosition, a = e.innerClassName, u = e.innerStyle, s = e.outerClassName, p = e.outerStyle;
-                var f = {
-                    left: h,
-                    right: g,
-                    top: O,
-                    bottom: S
-                }[i];
-                var y = i === "left" || i === "right" ? {
+        }), [ p, j ]);
+        var C = (0, r.useMemo)((function() {
+            if (b) {
+                return "interactive";
+            }
+            return "hidden";
+        }), [ b ]);
+        var k = (0, r.useMemo)((function() {
+            if (i === "left" || i === "right") {
+                return {
                     height: "100%"
-                } : {
-                    width: "100%"
                 };
-                
-                return n().createElement(f, P({
-                    animateOnMount: true,
-                    animation: K[i],
-                    "data-test": "side-panel",
-                    innerClassName: a,
-                    innerStyle: q(q({}, y), u),
-                    onAnimationEnd: o.handlePanelAnimationEnd,
-                    open: o.props.open,
-                    outerClassName: s,
-                    outerStyle: p,
-                    retainFocus: true,
-                    role: "dialog",
-                    tabIndex: -1,
-                    takeFocus: true
-                }, c()(o.props, [].concat(j(l()(r.propTypes)), [ "onAnimationEnd" ]))), t);
-            }));
-            o.state = {
-                panelAnimating: false,
-                prevOpen: e.open
-            };
-            return o;
-        }
-        F(r, [ {
-            key: "render",
-            value: function e() {
-                var t = this.props, r = t.open, o = t.onRequestClose, i = t.useLayerForClickAway;
-                var a = this.state.panelAnimating;
-                var l = i ? "interactive" : "hidden";
-                
-                return n().createElement(p(), {
-                    childrenInAnimation: a,
-                    onRequestClose: o,
-                    open: r,
-                    renderModal: this.renderModal,
-                    scrim: l
-                });
             }
-        } ]);
-        return r;
-    }(r.Component);
-    U(Q, "propTypes", H);
-    U(Q, "defaultProps", J);
-    /* harmony default export */    const V = Q;
+            return {
+                width: "100%"
+            };
+        }), [ i ]);
+        var N = (0, r.useMemo)((function() {
+            return P(P({}, k), u);
+        }), [ k, u ]);
+        var E = (0, r.useCallback)((function() {
+            w(false);
+            c === null || c === void 0 ? void 0 : c();
+        }), [ c ]);
+        var M = (0, r.useMemo)((function() {
+            return z[i];
+        }), [ i ]);
+        var T = (0, r.useCallback)((function() {
+            
+            return n().createElement(M, O({
+                animateOnMount: true,
+                animation: F[i],
+                "data-test": "side-panel",
+                innerClassName: a,
+                innerStyle: N,
+                onAnimationEnd: E,
+                open: p,
+                outerClassName: y,
+                outerStyle: d,
+                retainFocus: true,
+                role: "dialog",
+                tabIndex: -1,
+                takeFocus: true
+            }, v), t);
+        }), [ t, i, N, E, a, p, y, d, M, v ]);
+        
+        return n().createElement(l(), {
+            childrenInAnimation: S,
+            onRequestClose: f,
+            open: p,
+            renderModal: T,
+            scrim: C
+        });
+    }
+    L.propTypes = I;
+    /* harmony default export */    const R = L;
     // CONCATENATED MODULE: ./src/SidePanel/index.ts
     module.exports = t;
     /******/})();