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

package/Layer.js

@@ -73,85 +73,90 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        LayerContext: () => /* reexport */ h,
-        LayerStackContext: () => /* reexport */ v,
-        LayerStackGlobalProvider: () => /* reexport */ b,
-        default: () => /* reexport */ I
+        LayerContext: () => /* reexport */ g,
+        LayerStackContext: () => /* reexport */ b,
+        LayerStackGlobalProvider: () => /* reexport */ w,
+        default: () => /* reexport */ K
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
     var r =  e.n(n);
     // CONCATENATED MODULE: external "react-dom"
-    const o = require("react-dom");
+    const a = require("react-dom");
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var a =  e.n(i);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "lodash/includes"
     const l = require("lodash/includes");
-    var c =  e.n(l);
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "lodash/last"
-    const u = require("lodash/last");
-    var s =  e.n(u);
+    const c = require("lodash/last");
+    var s =  e.n(c);
     // CONCATENATED MODULE: external "lodash/pull"
-    const p = require("lodash/pull");
-    var f =  e.n(p);
+    const d = require("lodash/pull");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const y = require("@splunk/react-ui/EventListener");
-    var d =  e.n(y);
+    const v = require("@splunk/react-ui/EventListener");
+    var y =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const p = require("@splunk/react-ui/usePrevious");
+    var m =  e.n(p);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const h = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/Layer/LayerStack.tsx
     /**
  * `LayerStackContext` is used to manage the array that `Layer` (and components that
  * depend on it, such as `Modal`) uses to determine the order of open layers.
  * @public
  */
-    var v =  r().createContext([]);
-    var h =  r().createContext({});
-    var m = {
-        children: a().node,
-        name: a().string,
-        scope: a().object,
-        separateStackingContexts: a().bool
+    var b =  r().createContext([]);
+    var g =  r().createContext({});
+    var C = {
+        children: i().node,
+        name: i().string,
+        scope: i().object,
+        separateStackingContexts: i().bool
     };
     /* global global */
     /**
  * A `LayerStackContext` provider that stores a shared layer stack using a global variable.
  * Applications should only use this provider if there's a known need to support multiple
  * instances of this library on the same page.
- */    function b(t) {
-        var o = t.children, i = t.name, a = i === void 0 ? "__splunkui_layer_instances__" : i, l = t.scope, c = l === void 0 ? typeof window !== "undefined" ? window : e.g : l, u = t.separateStackingContexts, s = u === void 0 ? false : u;
-        if (!c[a]) {
-            c[a] = [];
+ */    function w(t) {
+        var a = t.children, o = t.name, i = o === void 0 ? "__splunkui_layer_instances__" : o, l = t.scope, u = l === void 0 ? typeof window !== "undefined" ? window : e.g : l, c = t.separateStackingContexts, s = c === void 0 ? false : c;
+        if (!u[i]) {
+            u[i] = [];
  // eslint-disable-line no-param-reassign
                 }
-        var p = (0, n.useMemo)((function() {
+        var d = (0, n.useMemo)((function() {
             return {
                 separateStackingContexts: s
             };
         }), [ s ]);
         
-        return r().createElement(v.Provider, {
-            value: c[a]
-        },  r().createElement(h.Provider, {
-            value: p
-        }, o));
+        return r().createElement(b.Provider, {
+            value: u[i]
+        },  r().createElement(g.Provider, {
+            value: d
+        }, a));
     }
-    b.propTypes = m;
+    w.propTypes = C;
     // CONCATENATED MODULE: external "styled-components"
-    const w = require("styled-components");
-    var g =  e.n(w);
+    const E = require("styled-components");
+    var S =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const C = require("@splunk/themes");
+    const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Layer/LayerStyles.ts
-    var k = g().div.withConfig({
+    var x = S().div.withConfig({
         displayName: "LayerStyles__StyledLayer",
         componentId: "ii6psl-0"
     })([ "", "" ], (function(e) {
         var t = e.$separateStackingContexts;
-        return t && (0, w.css)([ "isolation:isolate;z-index:", ";" ], C.variables.zindexLayer);
+        return t && (0, E.css)([ "isolation:isolate;z-index:", ";" ], k.variables.zindexLayer);
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var S = {
+    var q = {
         body: {
             appendChild: function e() {
                 return [];
@@ -205,259 +210,172 @@
             search: ""
         }
     };
-    function E() {
-        var e = typeof document !== "undefined" ? document : S;
+    function T() {
+        var e = typeof document !== "undefined" ? document : q;
         return e;
     }
     // CONCATENATED MODULE: ./src/Layer/Layer.tsx
-    function O(e) {
-        "@babel/helpers - typeof";
-        return O = "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;
-        }, O(e);
+    function A(e, t) {
+        return P(e) || O(e, t) || _(e, t) || L();
     }
-    function j(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function L() {
+        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 L(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, A(r.key), r);
+    function _(e, t) {
+        if (e) {
+            if ("string" == typeof e) return j(e, t);
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? j(e, t) : void 0;
         }
     }
-    function P(e, t, n) {
-        return t && L(e.prototype, t), n && L(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function j(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
+        }
+        return r;
     }
-    function _(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
+    function O(e, t) {
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, a, o, i, l = [], u = !0, c = !1;
+            try {
+                if (o = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
+                    u = !1;
+                } else for (;!(u = (r = o.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
+                }
+            } catch (e) {
+                c = !0, a = e;
+            } finally {
+                try {
+                    if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                } finally {
+                    if (c) throw a;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && T(e, t);
-    }
-    function T(e, t) {
-        return T = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, T(e, t);
-    }
-    function x(e) {
-        var t = D();
-        return function() {
-            var n, r = M(e);
-            if (t) {
-                var o = M(this).constructor;
-                n = Reflect.construct(r, arguments, o);
-            } else n = r.apply(this, arguments);
-            return q(this, n);
-        };
-    }
-    function q(e, t) {
-        if (t && ("object" == O(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return R(e);
-    }
-    function R(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function D() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (D = function t() {
-            return !!e;
-        })();
-    }
-    function M(e) {
-        return M = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, M(e);
-    }
-    function N(e, t, n) {
-        return (t = A(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = n, e;
-    }
-    function A(e) {
-        var t = K(e, "string");
-        return "symbol" == O(t) ? t : t + "";
-    }
-    function K(e, t) {
-        if ("object" != O(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != O(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+            return l;
         }
-        return ("string" === t ? String : Number)(e);
+    }
+    function P(e) {
+        if (Array.isArray(e)) return e;
     }
     /** @public */
-    /** @public */    var W = [ "clickAway", "escapeKey" ];
-    var F = {
-        children: a().node,
-        closeReasons: a().arrayOf(a().oneOf(W)),
-        onRequestClose: a().func,
-        open: a().bool
+    /** @public */    var M = [ "clickAway", "escapeKey" ];
+    var I = {
+        children: i().node,
+        closeReasons: i().arrayOf(i().oneOf(M)),
+        onRequestClose: i().func,
+        open: i().bool
     };
-    var B = {
-        closeReasons: W,
-        open: false
+    var N = {
+        passive: true
     };
-    var z =  function(e) {
-        _(n, e);
-        var t = x(n);
-        // @docs-props-type LayerPropsBase
-        // eslint-disable-next-line react/sort-comp
-        // LayerStackContext (an array) keeps track of the current instances of Layer. This is
-        // used by Layer#handleKeyDown to determine if the escapeKey event should be handled by
-        // the current instance. Only the topmost Layer instance should honor the escapeKey.
-                function n(e) {
-            var r;
-            j(this, n);
-            r = t.call(this, e);
-            N(R(r), "layerClickEvent", null);
-            N(R(r), "handleClickOnLayer", (function(e) {
-                var t = e.nativeEvent;
-                r.layerClickEvent = t;
-            }));
-            N(R(r), "handleClickOnWindow", (function(e) {
-                var t, n;
-                // clicks inside the layer should not be considered clickAways
-                                if (!r.props.open || !c()(r.props.closeReasons, "clickAway") || r.layerClickEvent === e) {
-                    return;
-                }
-                (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
-                    event: e,
-                    reason: "clickAway"
-                });
-            }));
-            N(R(r), "handleKeyDownOnWindow", (function(e) {
-                if (r.props.open && e.key === "Escape" && s()(r.getLayerStack()) === R(r) && c()(r.props.closeReasons, "escapeKey")) {
-                    var t, n;
-                    (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
-                        event: e,
-                        reason: "escapeKey"
-                    });
-                }
-            }));
-            var o = E();
-            if (!n.layerContainer) {
-                n.layerContainer = o.createElement("div");
-                n.layerContainer.setAttribute("data-test", "layer-container");
-                o.body.appendChild(n.layerContainer);
+    // we need a custom type here in order to set layerContainer as a property
+        var R = function e(t) {
+        var o = t.children, i = t.closeReasons, l = i === void 0 ? M : i, c = t.open, d = t.onRequestClose;
+        var v = (0, n.useContext)(g), p = v.separateStackingContexts;
+        var C = (0, n.useContext)(b);
+        var w = (0, n.useRef)(null);
+        var E = (0, n.useState)((0, h.createGUID)()), S = A(E, 1), k = S[0];
+        var q = m()(c);
+        (0, n.useEffect)((function() {
+            if (c && !q) {
+                C.push(k);
+            } else if (q && !c) {
+                f()(C, k);
             }
-            return r;
+        }), [ k, C, c, q ]);
+        // it is not part of the previous useEffect because it needs to be equivalent to componentWillUnmount
+        // the previous useEffect will get re-run every time open and prevOpen change which is not what we want
+                (0, n.useEffect)((function() {
+            return function() {
+                f()(C, k);
+            };
+        }), [ k, C ]);
+        if (!e.layerContainer) {
+            var L = T();
+            var _ = L.createElement("div");
+            _.setAttribute("data-test", "layer-container");
+            L.body.appendChild(_);
+            e.layerContainer = _;
         }
-        P(n, [ {
-            key: "componentDidMount",
-            value: function e() {
-                if (this.props.open) {
-                    this.getLayerStack().push(this);
-                }
-            }
-        }, {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                if (!t.open && this.props.open) {
-                    this.getLayerStack().push(this);
-                } else if (t.open && !this.props.open) {
-                    f()(this.getLayerStack(), this);
+        // the fullscreen API does not render elements outside the fullscreen element
+        // Layer renders in document.body, which means that anything using Layer will not render in fullscreen
+        // this code moves the layer container into the fullscreen element, ensuring that it will render
+                var j = (0, n.useCallback)((function() {
+            if (e.layerContainer) {
+                var t = T();
+                if (t.fullscreenElement != null) {
+                    t.fullscreenElement.appendChild(e.layerContainer);
+                } else {
+                    t.body.appendChild(e.layerContainer);
                 }
             }
-        }, {
-            key: "componentWillUnmount",
-            value: function e() {
-                f()(this.getLayerStack(), this);
-            }
-        }, {
-            key: "getLayerStack",
-            value: function e() {
-                return this.context;
+        }), []);
+        var O = (0, n.useCallback)((function(e) {
+            var t = e.nativeEvent;
+            w.current = t;
+        }), []);
+        var P = (0, n.useCallback)((function(e) {
+            // clicks inside the layer should not be considered clickAways
+            if (!c || !u()(l, "clickAway") || w.current === e) {
+                return;
             }
- // the fullscreen API does not render elements outside the fullscreen element
-            // Layer renders in document.body, which means that anything using Layer will not render in fullscreen
-            // this code moves the layer container into the fullscreen element, ensuring that it will render
-                }, {
-            key: "render",
-            value: function e() {
-                var t = this;
-                var i = this.props, a = i.children, l = i.open;
-                var c =  r().createElement(d(), {
-                    target: window,
-                    eventType: "fullscreenchange",
-                    listener: n.handleFullScreenChange,
-                    key: "fullScreenChange"
+            d === null || d === void 0 ? void 0 : d({
+                event: e,
+                reason: "clickAway"
+            });
+        }), [ l, c, d ]);
+        var I = (0, n.useCallback)((function(e) {
+            if (c && e.key === "Escape" && s()(C) === k && u()(l, "escapeKey")) {
+                d === null || d === void 0 ? void 0 : d({
+                    event: e,
+                    reason: "escapeKey"
                 });
-                if (l) {
-                    var u =  (0, o.createPortal)( r().createElement(h.Consumer, null, (function(e) {
-                        var n = e.separateStackingContexts, o = n === void 0 ? false : n;
-                        
-                        return r().createElement(k, {
-                            $separateStackingContexts: o,
-                            "data-test": "layer",
-                            onMouseDown: t.handleClickOnLayer,
-                            onTouchStart: t.handleClickOnLayer
-                        }, a);
-                    })), n.layerContainer);
-                    
-                    return r().createElement(r().Fragment, null,  r().createElement(d(), {
-                        target: window,
-                        eventType: "keydown",
-                        listener: this.handleKeyDownOnWindow,
-                        key: "eventListenerKeydown"
-                    }),  r().createElement(d(), {
-                        target: window,
-                        eventType: "mousedown",
-                        listener: this.handleClickOnWindow,
-                        key: "eventListenerMouseDown"
-                    }),  r().createElement(d(), {
-                        target: window,
-                        eventType: "touchstart",
-                        listener: this.handleClickOnWindow,
-                        key: "eventListenerTouchStart",
-                        options: {
-                            passive: true
-                        }
-                    }), c, u);
-                }
-                // the fragment has to be present to avoid type issues with React 18
-                // eslint-disable-next-line react/jsx-no-useless-fragment
-                                
-                return r().createElement(r().Fragment, null, c);
-            }
-        } ]);
-        return n;
-    }(n.Component);
-    N(z, "layerContainer", null);
-    N(z, "possibleCloseReasons", W);
-    N(z, "propTypes", F);
-    N(z, "defaultProps", B);
-    N(z, "contextType", v);
-    N(z, "handleFullScreenChange", (function() {
-        if (z.layerContainer) {
-            var e = E();
-            if (e.fullscreenElement != null) {
-                e.fullscreenElement.appendChild(z.layerContainer);
-            } else {
-                e.body.appendChild(z.layerContainer);
             }
+        }), [ l, k, C, c, d ]);
+        var R =  r().createElement(y(), {
+            target: window,
+            eventType: "fullscreenchange",
+            listener: j,
+            key: "fullScreenChange"
+        });
+        if (c) {
+            var K =  (0, a.createPortal)( r().createElement(x, {
+                $separateStackingContexts: p,
+                "data-test": "layer",
+                onMouseDown: O,
+                onTouchStart: O
+            }, o), e.layerContainer);
+            
+            return r().createElement(r().Fragment, null,  r().createElement(y(), {
+                target: window,
+                eventType: "keydown",
+                listener: I,
+                key: "eventListenerKeydown"
+            }),  r().createElement(y(), {
+                target: window,
+                eventType: "mousedown",
+                listener: P,
+                key: "eventListenerMouseDown"
+            }),  r().createElement(y(), {
+                target: window,
+                eventType: "touchstart",
+                listener: P,
+                key: "eventListenerTouchStart",
+                options: N
+            }), R, K);
         }
-    }));
-    /* harmony default export */    const I = z;
+        // the fragment has to be present to avoid type issues with React 18
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+                
+        return r().createElement(r().Fragment, null, R);
+    };
+    R.propTypes = I;
+    R.layerContainer = null;
+    R.possibleCloseReasons = M;
+    /* harmony default export */    const K = R;
     // CONCATENATED MODULE: ./src/Layer/index.ts
     module.exports = t;
     /******/})();