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

package/Popover.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        PopoverContext: () => /* reexport */ z,
-        PopoverMenuContext: () => /* reexport */ Y,
-        PopoverProvider: () => /* reexport */ X,
-        default: () => /* reexport */ dt
+        PopoverContext: () => /* reexport */ se,
+        PopoverMenuContext: () => /* reexport */ tt,
+        PopoverProvider: () => /* reexport */ pe,
+        default: () => /* reexport */ et
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -72,56 +72,52 @@
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var a =  e.n(o);
-    // CONCATENATED MODULE: external "react-dom"
-    const i = require("react-dom");
     // CONCATENATED MODULE: external "lodash/clamp"
-    const l = require("lodash/clamp");
-    var c =  e.n(l);
+    const i = require("lodash/clamp");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/defer"
-    const u = require("lodash/defer");
-    var f =  e.n(u);
+    const c = require("lodash/defer");
+    var u =  e.n(c);
     // CONCATENATED MODULE: external "lodash/every"
-    const s = require("lodash/every");
-    var p =  e.n(s);
+    const f = require("lodash/every");
+    var s =  e.n(f);
     // CONCATENATED MODULE: external "lodash/has"
-    const h = require("lodash/has");
-    var d =  e.n(h);
-    // CONCATENATED MODULE: external "lodash/includes"
-    const v = require("lodash/includes");
-    var m =  e.n(v);
+    const v = require("lodash/has");
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "lodash/intersection"
-    const b = require("lodash/intersection");
-    var y =  e.n(b);
+    const d = require("lodash/intersection");
+    var h =  e.n(d);
     // CONCATENATED MODULE: external "lodash/isFinite"
-    const g = require("lodash/isFinite");
-    var w =  e.n(g);
+    const m = require("lodash/isFinite");
+    var b =  e.n(m);
     // CONCATENATED MODULE: external "lodash/isFunction"
-    const S = require("lodash/isFunction");
-    var O =  e.n(S);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const P = require("lodash/keys");
-    var E =  e.n(P);
+    const y = require("lodash/isFunction");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "lodash/omit"
-    const C = require("lodash/omit");
-    var j =  e.n(C);
+    const w = require("lodash/omit");
+    var S =  e.n(w);
     // CONCATENATED MODULE: external "lodash/throttle"
-    const x = require("lodash/throttle");
-    var k =  e.n(x);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const A = require("@splunk/themes");
+    const O = require("lodash/throttle");
+    var P =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
-    const T = require("@splunk/react-ui/Animation");
+    const j = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const W = require("@splunk/react-ui/EventListener");
-    var M =  e.n(W);
+    const C = require("@splunk/react-ui/EventListener");
+    var E =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const q = require("@splunk/react-ui/Layer");
-    var R =  e.n(q);
+    const x = require("@splunk/react-ui/Layer");
+    var A =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const H = require("@splunk/react-ui/ScrollContainerContext");
-    var _ =  e.n(H);
+    const k = require("@splunk/react-ui/ScrollContainerContext");
+    var T =  e.n(k);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const R = require("@splunk/react-ui/usePrevious");
+    var M =  e.n(R);
+    // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
+    const W = require("@splunk/themes/useSplunkTheme");
+    var q =  e.n(W);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const D = require("@splunk/ui-utils/focus");
+    const H = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: ./src/Popover/getPlacement.ts
     function I(e) {
         "@babel/helpers - typeof";
@@ -141,18 +137,18 @@
         }
         return r;
     }
-    function F(e) {
+    function D(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
             t % 2 ? L(Object(r), !0).forEach((function(t) {
-                N(e, t, r[t]);
+                F(e, t, r[t]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : L(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function N(e, t, r) {
+    function F(e, t, r) {
         return (t = $(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
@@ -161,10 +157,10 @@
         }) : e[t] = r, e;
     }
     function $(e) {
-        var t = V(e, "string");
+        var t = _(e, "string");
         return "symbol" == I(t) ? t : t + "";
     }
-    function V(e, t) {
+    function _(e, t) {
         if ("object" != I(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -174,7 +170,7 @@
         }
         return ("string" === t ? String : Number)(e);
     }
-    function B(e) {
+    function N(e) {
         var t = e.align, r = e.anchorPos, n = e.outerContainerEl, o = e.padding, a = e.placement;
         switch (a) {
           case "above":
@@ -213,11 +209,11 @@
             throw new Error("".concat(a, " is not a valid placement value. Valid options are: 'above', 'below', 'left', or 'right'"));
         }
     }
-    function U(e) {
+    function V(e) {
         var t = e.align, r = e.anchorPos, n = e.scrollContainerPos, o = e.canCoverAnchor, a = e.defaultPlacement, i = e.outerContainerEl, l = e.padding, c = e.repositionMode, u = e.windowHeight, f = e.windowWidth;
         var s = c === "flip";
-        var p = c === "any";
-        var h = s || p;
+        var v = c === "any";
+        var p = s || v;
         var d = e.placement || a;
         // Translate vertical/horizontal to above/below/left/right
                 if (a === "vertical") {
@@ -225,44 +221,44 @@
         } else if (a === "horizontal") {
             d = r.left > f - r.right ? "left" : "right";
         }
-        var v = d;
+        var h = d;
         // Initialize the result variables. These will be mutated as needed and returned.
-                var m = B({
+                var m = N({
             align: t,
             anchorPos: r,
             outerContainerEl: i,
             padding: l,
-            placement: v
+            placement: h
         }), b = m.top, y = m.left;
         var g = "auto";
         var w = f;
         var S = u;
-        var O = v;
+        var O = h;
         // Boolean convenience variables to simplify positioning logic.
                 var P = r.top - i.offsetHeight > 0;
-        var E = r.bottom + i.offsetHeight < u;
+        var j = r.bottom + i.offsetHeight < u;
         var C = r.left - i.offsetWidth > 0;
-        var j = r.right + i.offsetWidth < f;
+        var E = r.right + i.offsetWidth < f;
         var x = r.top * .7 > u - r.bottom;
-        var k = (t === "edge" ? r.left + i.offsetWidth - l : r.middle + i.offsetWidth / 2) > f;
-        var A = (t === "edge" ? r.left - l : r.middle - i.offsetWidth / 2) < 0;
+        var A = (t === "edge" ? r.left + i.offsetWidth - l : r.middle + i.offsetWidth / 2) > f;
+        var k = (t === "edge" ? r.left - l : r.middle - i.offsetWidth / 2) < 0;
         var T = (t === "edge" ? r.top - l : r.top - i.offsetHeight / 2) < 0;
-        var W = (t === "edge" ? r.top + i.offsetHeight - l : r.bottom + i.offsetHeight / 2) > u;
+        var R = (t === "edge" ? r.top + i.offsetHeight - l : r.bottom + i.offsetHeight / 2) > u;
         // Handle each of the four placement options individually.
                 if (O === "above") {
-            if (!P && h) {
-                if (E) {
-                    return U(F(F({}, e), {}, {
+            if (!P && p) {
+                if (j) {
+                    return V(D(D({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && j) {
-                    return U(F(F({}, e), {}, {
+                if (v && E) {
+                    return V(D(D({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && C) {
-                    return U(F(F({}, e), {}, {
+                if (v && C) {
+                    return V(D(D({}, e), {}, {
                         placement: "left"
                     }));
                 }
@@ -278,9 +274,9 @@
                 }
                 b = "auto";
             }
-            if (k) {
+            if (A) {
                 y = Math.max(f - i.offsetWidth, 0);
-            } else if (A) {
+            } else if (k) {
                 y = 0;
             }
             if (!o) {
@@ -288,19 +284,19 @@
             }
         }
         if (O === "below") {
-            if (!E && h) {
+            if (!j && p) {
                 if (P && x) {
-                    return U(F(F({}, e), {}, {
+                    return V(D(D({}, e), {}, {
                         placement: "above"
                     }));
                 }
-                if (p && j) {
-                    return U(F(F({}, e), {}, {
+                if (v && E) {
+                    return V(D(D({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && C) {
-                    return U(F(F({}, e), {}, {
+                if (v && C) {
+                    return V(D(D({}, e), {}, {
                         placement: "left"
                     }));
                 }
@@ -312,9 +308,9 @@
             if (n) {
                 b = Math.min(b, n.bottom);
             }
-            if (k) {
+            if (A) {
                 y = Math.max(f - i.offsetWidth, 0);
-            } else if (A) {
+            } else if (k) {
                 y = 0;
             }
             if (!o) {
@@ -322,19 +318,19 @@
             }
         }
         if (O === "left") {
-            if (!C && h) {
-                if (j) {
-                    return U(F(F({}, e), {}, {
+            if (!C && p) {
+                if (E) {
+                    return V(D(D({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && E) {
-                    return U(F(F({}, e), {}, {
+                if (v && j) {
+                    return V(D(D({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && P) {
-                    return U(F(F({}, e), {}, {
+                if (v && P) {
+                    return V(D(D({}, e), {}, {
                         placement: "above"
                     }));
                 }
@@ -345,7 +341,7 @@
             }
             if (T) {
                 b = 0;
-            } else if (W) {
+            } else if (R) {
                 b = Math.max(u - i.offsetHeight, 0);
             }
             if (!o) {
@@ -353,19 +349,19 @@
             }
         }
         if (O === "right") {
-            if (!j && h) {
+            if (!E && p) {
                 if (C) {
-                    return U(F(F({}, e), {}, {
+                    return V(D(D({}, e), {}, {
                         placement: "left"
                     }));
                 }
-                if (p && E) {
-                    return U(F(F({}, e), {}, {
+                if (v && j) {
+                    return V(D(D({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && P) {
-                    return U(F(F({}, e), {}, {
+                if (v && P) {
+                    return V(D(D({}, e), {}, {
                         placement: "above"
                     }));
                 }
@@ -376,7 +372,7 @@
             }
             if (T) {
                 b = 0;
-            } else if (W) {
+            } else if (R) {
                 b = Math.max(u - i.offsetHeight, 0);
             }
             if (!o) {
@@ -394,144 +390,83 @@
             }
         };
     }
-    // CONCATENATED MODULE: ./src/Popover/PopoverProvider.tsx
-    var z =  (0, r.createContext)({});
-    var K = {
-        children: a().node,
-        hideArrow: a().bool
-    };
-    /**
- * Provides a method for controlling certain `Popover` props in components that use `Popover`.
- */    var X = function e(t) {
-        var o = t.children, a = t.hideArrow;
-        var i = (0, r.useMemo)((function() {
-            return {
-                hideArrow: a
-            };
-        }), [ a ]);
-        
-        return n().createElement(z.Provider, {
-            value: i
-        }, o);
-    };
-    X.propTypes = K;
-    // CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
-    var Y =  (0, r.createContext)({});
     // CONCATENATED MODULE: external "react-spring"
-    const G = require("react-spring");
+    const z = require("react-spring");
     // CONCATENATED MODULE: external "styled-components"
-    const J = require("styled-components");
-    var Q =  e.n(J);
+    const K = require("styled-components");
+    var X =  e.n(K);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const B = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Popover/PopoverStyles.ts
-    var Z = 8;
-    var ee = Q()(G.animated.div).withConfig({
+    var Y = 8;
+    var U = X()(z.animated.div).withConfig({
         displayName: "PopoverStyles__Styled",
         componentId: "sc-1nahsvw-0"
-    })([ "position:fixed;z-index:", ";left:-300%;top:-300%;" ], A.variables.zindexPopover);
+    })([ "position:fixed;z-index:", ";left:-300%;top:-300%;" ], B.variables.zindexPopover);
     // These hex codes are the inverted values of variables.backgroundColorPopup which are not exposed as tokens
-        var te = (0, J.css)([ "", "" ], (0, A.pick)({
+        var G = (0, K.css)([ "", "" ], (0, B.pick)({
         light: "#27292e",
-        dark: A.variables.white
+        dark: B.variables.white
     }));
-    var re = Q().div.withConfig({
+    var J = X().div.withConfig({
         displayName: "PopoverStyles__StyledBox",
         componentId: "sc-1nahsvw-1"
-    })([ "", ";", ";", ";" ], A.mixins.reset("block"), (function(e) {
+    })([ "", ";", ";", ";" ], B.mixins.reset("block"), (function(e) {
         var t = e.$open;
-        return !t && (0, J.css)([ "pointer-events:none;" ]);
+        return !t && (0, K.css)([ "pointer-events:none;" ]);
     }), (function(e) {
-        var t = e.$appearance;
-        return t !== "none" && (0, J.css)([ "padding:8px;" ]);
+        var t = e.$appearance, r = e.$boxPadding;
+        return t !== "none" && (0, K.css)([ "padding:", "px;" ], r);
     }));
-    var ne = Q().div.withConfig({
+    var Q = X().div.withConfig({
         displayName: "PopoverStyles__StyledContent",
         componentId: "sc-1nahsvw-2"
-    })([ "border-radius:", ";background-color:", ";color:", ";", "" ], A.variables.borderRadius, (0, 
-    A.pickVariant)("$appearance", {
-        normal: A.variables.backgroundColorPopup,
-        inverted: {
-            enterprise: {
-                light: A.variables.gray20,
-                dark: A.variables.white
-            },
-            prisma: te
-        }
-    }), (0, A.pickVariant)("$appearance", {
-        normal: A.variables.contentColorDefault,
-        inverted: {
-            enterprise: {
-                light: A.variables.white,
-                dark: A.variables.gray30
-            },
-            prisma: A.variables.contentColorInverted
-        }
-    }), (0, A.pickVariant)("$appearance", {
-        normal: (0, J.css)([ "", ";" ], (0, A.pick)({
-            enterprise: {
-                light: (0, J.css)([ "box-shadow:0 2px 2px ", ";border:", ";" ], A.mixins.colorWithAlpha(A.variables.gray20, .1), A.variables.border),
-                dark: (0, J.css)([ "box-shadow:0 1px 2px #000;border:", ";" ], A.variables.border)
-            },
-            prisma: (0, J.css)([ "box-shadow:", ";" ], A.variables.overlayShadow)
-        }))
+    })([ "border-radius:", ";background-color:", ";color:", ";", "" ], B.variables.borderRadius, (0, 
+    B.pickVariant)("$appearance", {
+        normal: B.variables.backgroundColorPopup,
+        inverted: G
+    }), (0, B.pickVariant)("$appearance", {
+        normal: B.variables.contentColorDefault,
+        inverted: B.variables.contentColorInverted
+    }), (0, B.pickVariant)("$appearance", {
+        normal: (0, K.css)([ "box-shadow:", ";" ], B.variables.overlayShadow)
     }));
-    var oe = Q().div.withConfig({
+    var Z = X().div.withConfig({
         displayName: "PopoverStyles__StyledArrow",
         componentId: "sc-1nahsvw-3"
-    })([ "width:0;height:0;border-left:", "px solid transparent;border-right:", "px solid transparent;position:absolute;border-bottom-width:", "px;border-bottom-style:solid;", ";" ], Z, Z, Z, (function(e) {
+    })([ "width:0;height:0;border-left:", "px solid transparent;border-right:", "px solid transparent;position:absolute;border-bottom-width:", "px;border-bottom-style:solid;", ";" ], Y, Y, Y, (function(e) {
         var t = e.$appearance;
-        return t !== "none" && (0, J.css)([ "border-bottom-color:", ";&::before{content:'';display:block;width:0;height:0;border-left:", "px solid transparent;border-right:", "px solid transparent;border-bottom:", "px solid;border-bottom-color:", ";position:absolute;top:1px;left:0;margin-left:-", "px;}" ], (0, 
-        A.pickVariant)("$appearance", {
-            normal: {
-                enterprise: {
-                    light: A.variables.borderColor,
-                    dark: A.variables.black
-                },
-                prisma: A.variables.backgroundColorPopup
-            },
-            inverted: {
-                enterprise: {
-                    light: A.variables.gray20,
-                    dark: A.variables.white
-                },
-                prisma: te
-            }
-        }), Z, Z, Z, (0, A.pickVariant)("$appearance", {
-            normal: A.variables.backgroundColorPopup,
-            inverted: {
-                enterprise: {
-                    light: A.variables.gray20,
-                    dark: A.variables.white
-                },
-                prisma: te
-            }
-        }), Z);
+        return t !== "none" && (0, K.css)([ "border-bottom-color:", ";" ], (0, B.pickVariant)("$appearance", {
+            normal: B.variables.backgroundColorPopup,
+            inverted: G
+        }));
     }));
-    var ae = Q().svg.withConfig({
+    var ee = X().svg.withConfig({
         displayName: "PopoverStyles__StyledHitArea",
         componentId: "sc-1nahsvw-4"
     })([ "position:fixed;pointer-events:none;path{pointer-events:auto;stroke-width:0;stroke:transparent;fill:transparent;}" ]);
     // CONCATENATED MODULE: ./src/Popover/PopoverHitArea.tsx
-    function ie(e, t) {
-        return se(e) || fe(e, t) || ce(e, t) || le();
+    function te(e, t) {
+        return ie(e) || ae(e, t) || ne(e, t) || re();
     }
-    function le() {
+    function re() {
         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 ce(e, t) {
+    function ne(e, t) {
         if (e) {
-            if ("string" == typeof e) return ue(e, t);
+            if ("string" == typeof e) return oe(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) ? ue(e, t) : void 0;
+            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) ? oe(e, t) : void 0;
         }
     }
-    function ue(e, t) {
+    function oe(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 fe(e, t) {
+    function ae(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, a, i, l = [], c = !0, u = !1;
@@ -553,15 +488,15 @@
             return l;
         }
     }
-    function se(e) {
+    function ie(e) {
         if (Array.isArray(e)) return e;
     }
-    var pe = {
+    var le = {
         anchorRect: a().object,
         popoverEl: a().object,
         popoverPlacement: a().oneOf([ "above", "below", "left", "right", "misaligned" ])
     };
-    var he = function e(t) {
+    var ce = function e(t) {
         var r = t.anchorRect, n = t.popoverEl, o = t.popoverPlacement;
         if (r != null && n != null && o != null) {
             var a = n.getBoundingClientRect();
@@ -576,12 +511,12 @@
                 var u = "0 ".concat(l);
                 var f = "".concat(a.width, " ").concat(l);
                 var s = "".concat(i, " ").concat(l);
-                var p = "".concat(i, " ").concat(c);
-                var h = "".concat(i + r.width, " ").concat(l);
+                var v = "".concat(i, " ").concat(c);
+                var p = "".concat(i + r.width, " ").concat(l);
                 var d = "".concat(i + r.width, " ").concat(c);
-                var v = "\n                        M ".concat(u, "\n                        S ").concat(s, " , ").concat(p, "\n                        L ").concat(s, "\n                        L ").concat(h, "\n                        L ").concat(d, "\n                        S ").concat(h, " , ").concat(f, "\n                    ");
+                var h = "\n                        M ".concat(u, "\n                        S ").concat(s, " , ").concat(v, "\n                        L ").concat(s, "\n                        L ").concat(p, "\n                        L ").concat(d, "\n                        S ").concat(p, " , ").concat(f, "\n                    ");
                 return {
-                    hitAreaPath: v,
+                    hitAreaPath: h,
                     hitAreaStyle: {
                         left: a.left,
                         top: r.top,
@@ -603,8 +538,8 @@
                 var S = "".concat(b, " ").concat(m);
                 var O = "".concat(y, " ").concat(m);
                 var P = "".concat(b, " ").concat(m + r.height);
-                var E = "".concat(y, " ").concat(m + r.height);
-                var C = "\n                        M ".concat(g, "\n                        S ").concat(S, " , ").concat(O, "\n                        L ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(E, "\n                        S ").concat(P, " , ").concat(w, "\n                    ");
+                var j = "".concat(y, " ").concat(m + r.height);
+                var C = "\n                        M ".concat(g, "\n                        S ").concat(S, " , ").concat(O, "\n                        L ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(j, "\n                        S ").concat(P, " , ").concat(w, "\n                    ");
                 return {
                     hitAreaPath: C,
                     hitAreaStyle: {
@@ -621,12 +556,12 @@
             hitAreaStyle: {}
         };
     };
-    var de =  n().forwardRef((function(e, t) {
+    var ue =  n().forwardRef((function(e, t) {
         var o = e.anchorRect, a = e.popoverEl, i = e.popoverPlacement;
-        var l = (0, r.useState)(null), c = ie(l, 2), u = c[0], f = c[1];
-        var s = (0, r.useState)({}), p = ie(s, 2), h = p[0], d = p[1];
+        var l = (0, r.useState)(null), c = te(l, 2), u = c[0], f = c[1];
+        var s = (0, r.useState)({}), v = te(s, 2), p = v[0], d = v[1];
         (0, r.useEffect)((function() {
-            var e = he({
+            var e = ce({
                 anchorRect: o,
                 popoverEl: a,
                 popoverPlacement: i
@@ -636,9 +571,9 @@
         }), [ o, a, i ]);
         if (u != null) {
             
-            return n().createElement(ae, {
+            return n().createElement(ee, {
                 "data-test": "popover-hit-area",
-                style: h
+                style: p
             },  n().createElement("path", {
                 d: u,
                 ref: t
@@ -646,11 +581,32 @@
         }
         return null;
     }));
-    de.propTypes = pe;
-    /* harmony default export */    const ve = de;
+    ue.propTypes = le;
+    /* harmony default export */    const fe = ue;
+    // CONCATENATED MODULE: ./src/Popover/PopoverProvider.tsx
+    var se =  (0, r.createContext)({});
+    var ve = {
+        children: a().node,
+        hideArrow: a().bool
+    };
+    /**
+ * Provides a method for controlling certain `Popover` props in components that use `Popover`.
+ */    var pe = function e(t) {
+        var o = t.children, a = t.hideArrow;
+        var i = (0, r.useMemo)((function() {
+            return {
+                hideArrow: a
+            };
+        }), [ a ]);
+        
+        return n().createElement(se.Provider, {
+            value: i
+        }, o);
+    };
+    pe.propTypes = ve;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var me = {
+    var de = {
         body: {
             appendChild: function e() {
                 return [];
@@ -704,14 +660,14 @@
             search: ""
         }
     };
-    function be() {
-        var e = typeof document !== "undefined" ? document : me;
+    function he() {
+        var e = typeof document !== "undefined" ? document : de;
         return e;
     }
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var ye = {
-        document: me,
+    var me = {
+        document: de,
         navigator: {
             userAgent: ""
         },
@@ -765,20 +721,20 @@
             clearTimeout(t);
         }
     };
-    function ge() {
-        var e = typeof window !== "undefined" ? window : ye;
+    function be() {
+        var e = typeof window !== "undefined" ? window : me;
         return e;
     }
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
-    function we(e) {
+    function ye(e) {
         "@babel/helpers - typeof";
-        return we = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return ye = "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;
-        }, we(e);
+        }, ye(e);
     }
-    function Se(e, t) {
+    function ge(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -788,35 +744,35 @@
         }
         return r;
     }
-    function Oe(e) {
+    function we(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Se(Object(r), !0).forEach((function(t) {
-                Pe(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Se(Object(r)).forEach((function(t) {
+            t % 2 ? ge(Object(r), !0).forEach((function(t) {
+                Se(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : ge(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function Pe(e, t, r) {
-        return (t = Ee(t)) in e ? Object.defineProperty(e, t, {
+    function Se(e, t, r) {
+        return (t = Oe(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function Ee(e) {
-        var t = Ce(e, "string");
-        return "symbol" == we(t) ? t : t + "";
+    function Oe(e) {
+        var t = Pe(e, "string");
+        return "symbol" == ye(t) ? t : t + "";
     }
-    function Ce(e, t) {
-        if ("object" != we(e) || !e) return e;
+    function Pe(e, t) {
+        if ("object" != ye(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != we(n)) return n;
+            if ("object" != ye(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
@@ -826,8 +782,8 @@
         return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     }
     // Formats return value to DOMRect
-        function xe(e) {
-        return Oe(Oe({}, e), {}, {
+        function Ce(e) {
+        return we(we({}, e), {}, {
             top: e.y,
             left: e.x,
             right: e.x + e.width,
@@ -841,18 +797,18 @@
  * @param {boolean} offsets - Use when position of element relative to the layout viewport offsets are needed for Safari.
  * @returns {Omit<DOMRect, 'toJSON'>}
  * @public
- */    function ke(e, t) {
+ */    function Ee(e, t) {
         var r, n;
         var o = e.getBoundingClientRect();
         var a = je();
         if (!t || !a) {
             return o;
         }
-        var i = ge();
+        var i = be();
         var l = o.left + (((r = i.visualViewport) === null || r === void 0 ? void 0 : r.offsetLeft) || 0);
         var c = o.top + (((n = i.visualViewport) === null || n === void 0 ? void 0 : n.offsetTop) || 0);
         var u = o.width, f = o.height;
-        return xe({
+        return Ce({
             width: u,
             height: f,
             x: l,
@@ -866,7 +822,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function Ae(e, t) {
+    function xe(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -879,16 +835,16 @@
         }
     }
     // CONCATENATED MODULE: ./src/Popover/Popover.tsx
-    function Te(e) {
+    function Ae(e) {
         "@babel/helpers - typeof";
-        return Te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ae = "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;
-        }, Te(e);
+        }, Ae(e);
     }
-    function We() {
-        return We = Object.assign ? Object.assign.bind() : function(e) {
+    function ke() {
+        return ke = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -896,21 +852,9 @@
                 }
             }
             return e;
-        }, We.apply(null, arguments);
+        }, ke.apply(null, arguments);
     }
-    function Me(e) {
-        return He(e) || Re(e) || Fe(e) || qe();
-    }
-    function qe() {
-        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 Re(e) {
-        if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
-    }
-    function He(e) {
-        if (Array.isArray(e)) return Ne(e);
-    }
-    function _e(e, t) {
+    function Te(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -920,38 +864,60 @@
         }
         return r;
     }
-    function De(e) {
+    function Re(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? _e(Object(r), !0).forEach((function(t) {
-                et(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : _e(Object(r)).forEach((function(t) {
+            t % 2 ? Te(Object(r), !0).forEach((function(t) {
+                Me(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Te(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function Ie(e, t) {
-        return Ve(e) || $e(e, t) || Fe(e, t) || Le();
+    function Me(e, t, r) {
+        return (t = We(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[t] = r, e;
+    }
+    function We(e) {
+        var t = qe(e, "string");
+        return "symbol" == Ae(t) ? t : t + "";
     }
-    function Le() {
+    function qe(e, t) {
+        if ("object" != Ae(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var n = r.call(e, t || "default");
+            if ("object" != Ae(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === t ? String : Number)(e);
+    }
+    function He(e, t) {
+        return $e(e) || Fe(e, t) || Le(e, t) || Ie();
+    }
+    function Ie() {
         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 Fe(e, t) {
+    function Le(e, t) {
         if (e) {
-            if ("string" == typeof e) return Ne(e, t);
+            if ("string" == typeof e) return De(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) ? Ne(e, t) : void 0;
+            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) ? De(e, t) : void 0;
         }
     }
-    function Ne(e, t) {
+    function De(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 $e(e, t) {
+    function Fe(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, a, i, l = [], c = !0, u = !1;
@@ -973,103 +939,38 @@
             return l;
         }
     }
-    function Ve(e) {
+    function $e(e) {
         if (Array.isArray(e)) return e;
     }
-    function Be(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-    }
-    function Ue(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, tt(n.key), n);
+    function _e(e, t) {
+        if (null == e) return {};
+        var r, n, o = Ne(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                r = a[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
         }
+        return o;
     }
-    function ze(e, t, r) {
-        return t && Ue(e.prototype, t), r && Ue(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function Ke(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 Ne(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];
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && Xe(e, t);
-    }
-    function Xe(e, t) {
-        return Xe = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, Xe(e, t);
-    }
-    function Ye(e) {
-        var t = Qe();
-        return function() {
-            var r, n = Ze(e);
-            if (t) {
-                var o = Ze(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return Ge(this, r);
-        };
-    }
-    function Ge(e, t) {
-        if (t && ("object" == Te(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return Je(e);
-    }
-    function Je(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function Qe() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (Qe = function t() {
-            return !!e;
-        })();
-    }
-    function Ze(e) {
-        return Ze = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, Ze(e);
-    }
-    function et(e, t, r) {
-        return (t = tt(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
-    }
-    function tt(e) {
-        var t = rt(e, "string");
-        return "symbol" == Te(t) ? t : t + "";
-    }
-    function rt(e, t) {
-        if ("object" != Te(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != Te(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === t ? String : Number)(e);
+        return r;
     }
     /** @public */
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var nt = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
-    var ot = {
-        align: a().oneOf([ "center", "edge", "theme", "end" ]),
+    /** @public */    var Ve = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
+    var ze = {
+        align: a().oneOf([ "center", "edge", "end" ]),
         anchor: a().object,
         animation: a().bool,
         animationConfig: a().object,
@@ -1077,7 +978,7 @@
         autoCloseWhenOffScreen: a().bool,
         canCoverAnchor: a().bool,
         children: a().oneOfType([ a().node, a().func ]),
-        closeReasons: a().arrayOf(a().oneOf(nt)),
+        closeReasons: a().arrayOf(a().oneOf(Ve)),
         defaultPlacement: a().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
         elementRef: a().oneOfType([ a().func, a().object ]),
         id: a().string,
@@ -1095,107 +996,95 @@
         takeFocus: a().bool,
         splunkTheme: a().object
     };
-    var at = {
-        align: "theme",
-        animation: true,
-        animationConfig: {},
-        appearance: "normal",
-        autoCloseWhenOffScreen: true,
-        canCoverAnchor: false,
-        closeReasons: nt,
-        defaultPlacement: "below",
-        open: false,
-        repositionMode: "flip",
-        retainFocus: true,
-        takeFocus: false
-    };
-    var it = {
+    var Ke = {
         passive: false,
         capture: true
     };
     // eslint-disable-next-line @typescript-eslint/ban-types
-        function lt(e, t) {
+        function Xe(e, t) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-        return !!e && !!t && p()(e, (function(e, n) {
-            if (w()(e)) {
+        return !!e && !!t && s()(e, (function(e, n) {
+            if (b()(e)) {
                 return Math.abs(t[n] - e) <= r;
             }
             return t[n] === e;
         }));
     }
-    function ct(e) {
-        var t = e.anchorPos, r = e.placement, n = e.outerContainerStyle, o = e.outerContainerEl;
-        if (r === "misaligned") {
+    function Be(e) {
+        var t = e.anchorPos, r = e.borderRadius, n = e.placement, o = e.outerContainerStyle, a = e.outerContainerEl;
+        if (n === "misaligned") {
             return [ {
                 display: "none"
             } ];
         }
-        var a = {
+        var i = {
             display: "block"
         };
-        var i = o.offsetHeight / 2 - 22;
-        var l = -(o.offsetHeight / 2 - 15);
-        var u = t.center - (n.top + o.offsetHeight / 2) - Z / 2;
-        var f = c()(u, l, i);
-        // 26px is 16px arrow width + 8px padding + half of 3px or 4px border-radius
-        // 11px is 16px arrow width - 8px padding + half of 3px or 4px border-radius
-                var s = o.offsetWidth / 2 - 26;
-        var p = -(o.offsetWidth / 2 - 11);
-        // const initHorizontalDiff = -arrowHeight;
-                var h = t.middle - (n.left + o.offsetWidth / 2) - Z;
-        var d = c()(h, p, s);
-        var v = {
+        var c = Y * 2;
+        // bottom edge
+                var u = a.offsetHeight / 2 - (Y * 2 + r + Y / 2);
+        // top edge
+                var f = -(a.offsetHeight / 2 - (Y + r + Y / 2));
+        var s = t.center - (o.top + a.offsetHeight / 2) - Y / 2;
+        var v = l()(s, f, u);
+        // right edge
+                var p = a.offsetWidth / 2 - (c + Y + r);
+        // left edge
+                var d = -(a.offsetWidth / 2 - (Y + r));
+        var h = t.middle - (o.left + a.offsetWidth / 2) - Y;
+        var m = l()(h, d, p);
+        var b = {
             left: {
-                translateX: Z / 2,
-                translateY: f,
+                translateX: Y / 2,
+                translateY: v,
                 rotate: 90
             },
             right: {
-                translateX: -Z / 2,
-                translateY: f,
+                translateX: -Y / 2,
+                translateY: v,
                 rotate: -90
             },
             above: {
-                translateX: d,
+                translateX: m,
                 translateY: 0,
                 rotate: 180
             },
             below: {
-                translateX: d,
+                translateX: m,
                 translateY: 0,
                 rotate: 0
             }
         };
-        var m = v[r];
-        a.transform = "translate(".concat(m.translateX, "px, ").concat(m.translateY, "px) rotate(").concat(m.rotate, "deg)");
+        var y = b[n];
+        i.transform = "translate(".concat(y.translateX, "px, ").concat(y.translateY, "px) rotate(").concat(y.rotate, "deg)");
         // set new positions
-                var b = {
+                var g = {
             left: "right",
             right: "left",
             above: "bottom",
             below: "top"
         };
-        a[b[r]] = "1px";
-        var y = {
+        i[g[n]] = "0";
+        var w = {
             left: "top",
             right: "top",
             above: "left",
             below: "left"
         };
-        a[y[r]] = "50%";
-        return [ a, m ];
+        i[w[n]] = "50%";
+        return [ i, y ];
     }
-    function ut(e) {
+    function Ye(e) {
         var t = e.anchorEl, r = e.offsets, n = r === void 0 ? false : r, o = e.pointTo;
-        var a = ke(t, n);
+        var a = Ee(t, n);
         var i = {
             // these are rounded to avoid causing visual regressions
             // they were previously clientWidth and clientHeight which were already rounded
             width: Math.round(a.width),
             height: Math.round(a.height)
         };
-        var l = o && d()(o, "x");
-        var c = o && d()(o, "y");
+        var l = o && p()(o, "x");
+        var c = o && p()(o, "y");
         i.left = l ? a.left + ((o === null || o === void 0 ? void 0 : o.x) || 0) : a.left;
         i.top = c ? a.top + ((o === null || o === void 0 ? void 0 : o.y) || 0) : a.top;
         i.right = l ? i.left + i.width : a.left + i.width || a.right;
@@ -1208,11 +1097,11 @@
         i.center = c ? i.top : a.top + (i.bottom - a.top) / 2;
         return i;
     }
-    function ft(e) {
+    function Ue(e) {
         return e !== window && e !== window.document;
     }
-    function st(e, t) {
-        var r = ge();
+    function Ge(e, t) {
+        var r = be();
         if (e.top < 0 || e.top > r.innerHeight || e.left < 0 || e.left > r.innerWidth) {
             return true;
         }
@@ -1223,363 +1112,312 @@
         }
         return false;
     }
+    function Je(e, t) {
+        // this accomodates the arrow height
+        // and provides some spacing between the end of the Popover and the edge of the window
+        var r = Y * 2;
+        return t !== "none" && e != null && b()(e) ? e - r : e || null;
+    }
+    var Qe = {};
     /**
  * `Popover` is used to create layovers such as dropdowns, contextual menus, or tooltips. Use
  * this only when the other components don't provide sufficient functionality or control. A controlled
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
- */    var pt =  function(e) {
-        Ke(r, e);
-        var t = Ye(r);
-        ze(r, null, [ {
-            key: "getDerivedStateFromProps",
-            // @docs-props-type PopoverPropsBase
-            value: function e(t, r) {
-                if (t.open !== r.prevOpen) {
-                    return {
-                        animating: t.animation,
-                        prevOpen: t.open
-                    };
-                }
-                return null;
+ */    function Ze(e) {
+        var t, o;
+        var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig, v = s === void 0 ? Qe : s, p = e.appearance, d = p === void 0 ? "normal" : p, m = e.autoCloseWhenOffScreen, b = m === void 0 ? true : m, y = e.canCoverAnchor, w = e.children, O = e.closeReasons, C = O === void 0 ? Ve : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, W = e.hideArrow, I = e.hitAreaRef, L = e.id, D = e.onRequestClose, F = e.open, $ = e.outerRef, _ = e.pointTo, N = e.repositionMode, z = N === void 0 ? "flip" : N, K = e.retainFocus, X = K === void 0 ? true : K, B = e.takeFocus, G = _e(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus" ]);
+        // @docs-props-type PopoverPropsBase
+                var ee = M()(F);
+        var te = (0, r.useState)(F), re = He(te, 2), ne = re[0], oe = re[1];
+        var ae = (0, r.useState)(false), ie = He(ae, 2), le = ie[0], ce = ie[1];
+        if (F !== le) {
+            // formerly implemented by componentWillReceiveProps
+            // we can't use prevOpen here since that's a ref behind the scenes
+            // and won't get updated until the component re-renders successfully
+            // whereas setAnimating will interrupt the re-render and we'll end up in an infinite loop
+            // so we need to update the value of wasOpen at the same time
+            oe(f);
+            ce(F);
+        }
+        // this is a single state object because all these properties
+        // are updated at the same time by setPlacement
+                var ue = (0, r.useState)({}), ve = He(ue, 2), pe = ve[0], de = ve[1];
+        var he = (0, r.useRef)(true);
+        var me = (0, r.useRef)(null);
+        var ye = (0, r.useRef)(null);
+        var ge = (0, r.useRef)(null);
+        var we = {
+            anchorHeight: ((t = pe.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
+            anchorWidth: ((o = pe.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
+            placement: pe.placement || null,
+            maxHeight: Je(pe.maxHeight, d),
+            maxWidth: Je(pe.maxWidth, d)
+        };
+        var Se = (0, r.useMemo)((function() {
+            return f ? {
+                opacity: F ? 1 : 0
+            } : {
+                opacity: 1
+            };
+        }), [ f, F ]);
+        var Oe = be();
+        var Pe = F || ne;
+        var je = (0, r.useContext)(T()) || Oe;
+        var Ce = je !== Oe;
+        var Ee = (0, r.useContext)(se), Ae = Ee.hideArrow;
+        var Te = W !== null && W !== void 0 ? W : Ae;
+        (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ l ]);
+        var Me = (0, r.useCallback)((function(e) {
+            if (F && (C === null || C === void 0 ? void 0 : C.includes(e.reason))) {
+                D === null || D === void 0 ? void 0 : D(e);
             }
-        } ]);
-        function r(e) {
-            var n;
-            Be(this, r);
-            n = t.call(this, e);
-            et(Je(n), "outerContainerEl", null);
-            et(Je(n), "innerContainerEl", null);
-            et(Je(n), "arrow", null);
-            et(Je(n), "handleScroll", void 0);
-            et(Je(n), "handleWindowScroll", void 0);
-            et(Je(n), "allowAnimationUpdates", true);
-            et(Je(n), "setPlacement", (function(e) {
-                var t = ge();
-                n.setState((function(r) {
-                    var o = n.props, a = o.align, i = o.anchor, l = o.autoCloseWhenOffScreen, c = o.canCoverAnchor, u = o.defaultPlacement, f = o.open, s = o.pointTo, p = o.repositionMode, h = o.splunkTheme;
-                    var d = n.context || t;
-                    var v = h.isPrisma;
- // If these conditions are not met, we cannot set the popover.
-                                        if (!f || !n.outerContainerEl || !i || !r.anchorEl) {
-                        if (false) {}
-                        return null;
-                    }
-                    var m = ut({
-                        anchorEl: r.anchorEl,
-                        pointTo: s
-                    });
-                    var b = ut({
-                        anchorEl: r.anchorEl,
-                        offsets: true,
-                        pointTo: s
-                    });
-                    var y = ft(d) ? ut({
-                        anchorEl: d,
-                        pointTo: s
-                    }) : undefined;
-                    if (e && l) {
-                        if (n.autoCloseWhenOffScreen(m, y)) {
-                            return null;
-                        }
-                    }
-                    var g = 8;
-                    var w = v ? "edge" : "center";
-                    var S = U({
-                        align: a === "theme" ? w : a,
-                        anchorPos: b,
-                        scrollContainerPos: y,
-                        canCoverAnchor: c,
-                        defaultPlacement: u,
-                        repositionMode: p,
-                        outerContainerEl: n.outerContainerEl,
-                        padding: g,
-                        windowWidth: t.innerWidth,
-                        windowHeight: t.innerHeight
-                    }), O = S.placement, P = S.outerContainerStyle, E = S.maxHeight, C = S.maxWidth;
-                    var x = lt(b, r.anchorPos) && lt(P, r.outerContainerStyle) && O === r.placement && E === r.maxHeight && C === r.maxWidth;
-                    var k = true;
-                    var A = {};
-                    var T;
-                    if (n.arrow) {
-                        var W, M;
-                        var q = ct({
-                            anchorPos: b,
-                            outerContainerStyle: P,
-                            placement: O,
-                            outerContainerEl: n.outerContainerEl
-                        });
-                        var R = Ie(q, 2);
-                        A = R[0];
-                        T = R[1];
-                        k = lt(j()(A, "transform"), j()(r.arrowStyle, "transform")) && lt((W = T) !== null && W !== void 0 ? W : {}, (M = r.arrowStyleTransformMeta) !== null && M !== void 0 ? M : {});
-                    }
-                    // If none of the position data has changed, do not set state.
-                                        if (x && k) {
-                        return null;
-                    }
-                    return {
-                        anchorPos: b,
-                        arrowStyle: A,
-                        arrowStyleTransformMeta: T,
-                        outerContainerStyle: P,
-                        placement: O,
-                        maxHeight: E,
-                        maxWidth: C
-                    };
-                }));
-            }));
-            et(Je(n), "handleArrowMount", (function(e) {
-                n.arrow = e;
-            }));
-            et(Je(n), "handleNewAnchor", (function(e) {
-                var t = n.props.pointTo;
-                var r;
-                if (e && !(e instanceof HTMLElement)) {
-                    if (false) {}
-                    r = (0, i.findDOMNode)(e);
- // eslint-disable-line react/no-find-dom-node
-                                } else {
-                    r = e !== null && e !== void 0 ? e : undefined;
-                }
-                var o = r ? ut({
-                    anchorEl: r,
-                    pointTo: t
-                }) : undefined;
-                n.setState({
-                    anchorEl: r,
-                    anchorPos: o
+        }), [ C, F, D ]);
+        var We = (0, r.useCallback)((function(e, t) {
+            var r = Ge(e, t);
+            if (r) {
+                Me({
+                    reason: "offScreen"
                 });
- // eslint-disable-line react/no-unused-state
-                        }));
-            et(Je(n), "handleInnerContainerMount", (function(e) {
-                n.innerContainerEl = e;
-                if (e && n.props.takeFocus) {
-                    f()(D.takeFocus, e);
+            }
+            return r;
+        }), [ Me ]);
+        var qe = q()(), Ie = qe.borderRadius, Le = qe.spacingXSmall;
+        var De = parseInt(Ie, 10);
+        var Fe = parseInt(Le, 10);
+        // this is intentionally smaller when the arrow is hidden to address SUI-5452
+                var $e = Te ? Fe : Y;
+        // do not call this directly - use setPlacement (the throttled version) instead
+                var Ne = (0, r.useCallback)((function(e) {
+            de((function(t) {
+                var r, n;
+                // If these conditions are not met, we cannot set the popover.
+                                if (!F || !ge.current || !l) {
+                    // if (__DEV__ && !anchor && open) {
+                    //     throw new Error(`Invalid anchor ${anchor} provided to Popover.`);
+                    // }
+                    return t;
                 }
-                Ae(n.props.elementRef, e);
-            }));
-            et(Je(n), "handleOuterContainerMount", (function(e) {
-                n.outerContainerEl = e;
-                Ae(n.props.outerRef, e);
-            }));
-            et(Je(n), "handleTab", (function(e) {
-                if (n.innerContainerEl) {
-                    if (n.props.retainFocus) {
-                        (0, D.handleTab)(n.innerContainerEl, e);
-                    } else if ((0, D.isTabKey)(e)) {
-                        var t = (0, D.getSortedTabbableElements)(n.innerContainerEl);
-                        if (t.length > 0) {
-                            var r = e.shiftKey ? t[0] : t[t.length - 1];
-                            if (r === e.target) {
-                                n.handleRequestClose({
-                                    event: e,
-                                    reason: "tabKey"
-                                });
-                            }
-                        }
+                var o = Ye({
+                    anchorEl: l,
+                    pointTo: _
+                });
+                var a = Ye({
+                    anchorEl: l,
+                    offsets: true,
+                    pointTo: _
+                });
+                var c = Ue(je) ? Ye({
+                    anchorEl: je,
+                    pointTo: _
+                }) : undefined;
+                if (e && b) {
+                    if (We(o, c)) {
+                        return t;
                     }
                 }
-            }));
-            et(Je(n), "handleRequestClose", (function(e) {
-                if (n.props.open) {
-                    n.requestClose(e);
-                }
-            }));
-            et(Je(n), "handleAnimationEnd", (function() {
-                if (n.allowAnimationUpdates) {
-                    n.setState({
-                        animating: false
+                var u = V({
+                    align: i,
+                    anchorPos: a,
+                    scrollContainerPos: c,
+                    canCoverAnchor: y,
+                    defaultPlacement: k,
+                    repositionMode: z,
+                    outerContainerEl: ge.current,
+                    padding: $e,
+                    windowWidth: Oe.innerWidth,
+                    windowHeight: Oe.innerHeight
+                }), f = u.placement, s = u.outerContainerStyle, v = u.maxHeight, p = u.maxWidth;
+                var d = Xe(a, t.anchorPos) && Xe(s, t.outerContainerStyle) && f === t.placement && v === t.maxHeight && p === t.maxWidth;
+                var h = true;
+                var m = {};
+                var g;
+                if (me.current) {
+                    var w = Be({
+                        anchorPos: a,
+                        borderRadius: De,
+                        outerContainerStyle: s,
+                        placement: f,
+                        outerContainerEl: ge.current
                     });
+                    var O = He(w, 2);
+                    m = O[0];
+                    g = O[1];
                 }
+                h = Xe(S()(m, "transform"), S()(t.arrowStyle, "transform")) && Xe((r = g) !== null && r !== void 0 ? r : {}, (n = t.arrowStyleTransformMeta) !== null && n !== void 0 ? n : {});
+                // If none of the position data has changed, do not set state.
+                                if (d && h) {
+                    return t;
+                }
+                return {
+                    anchorPos: a,
+                    arrowStyle: m,
+                    arrowStyleTransformMeta: g,
+                    outerContainerStyle: s,
+                    placement: f,
+                    maxHeight: v,
+                    maxWidth: p
+                };
             }));
-            n.handleScroll = k()(n.setPlacement.bind(Je(n), true), 0);
-            n.handleWindowScroll = k()(n.setPlacement.bind(Je(n), true), 0);
-            n.setPlacement = k()(n.setPlacement, 0, {
+        }), [ i, l, b, De, $e, y, We, k, F, _, z, je, Oe.innerHeight, Oe.innerWidth ]);
+        // these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
+        // see https://github.com/facebook/react/issues/19240#issuecomment-652945246
+                var ze = (0, r.useMemo)((function() {
+            return P()(Ne.bind(null, true), 0);
+        }), [ Ne ]);
+        var Ze = (0, r.useMemo)((function() {
+            return P()(Ne.bind(null, true), 0);
+        }), [ Ne ]);
+        var et = (0, r.useMemo)((function() {
+            return P()(Ne, 0, {
                 leading: false
             });
-            n.state = {
-                animating: false,
-                prevOpen: e.open
-            };
-            return n;
-        }
-        ze(r, [ {
-            key: "componentDidMount",
-            value: function e() {
-                this.handleNewAnchor(this.props.anchor);
+        }), [ Ne ]);
+        (0, r.useEffect)((function() {
+            if (!ye.current) {
+                return;
             }
-        }, {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                if (t.anchor !== this.props.anchor) {
-                    this.handleNewAnchor(this.props.anchor);
-                }
-                if (!this.innerContainerEl) {
-                    return;
+            if (F || ne) {
+                et();
+                // make sure that the popover both was not open before and is actually open now
+                // this prevents bugs like #4 in SUI-2054 where popover contents re-rendering due to animation
+                // causes the popover contents to receive focus even though the popover closing
+                                if (!ee && F && B) {
+                    (0, H.takeFocus)(ye.current);
                 }
-                if (this.props.open || this.state.animating) {
-                    this.setPlacement();
-                    // make sure that the popover both was not open before and is actually open now
-                    // this prevents bugs like #4 in SUI-2054 where popover contents re-rendering due to animation
-                    // causes the popover contents to receive focus even though the popover closing
-                                        if (!t.open && this.props.open && this.props.takeFocus) {
-                        (0, D.takeFocus)(this.innerContainerEl);
-                    }
-                }
-            }
-        }, {
-            key: "componentWillUnmount",
-            value: function e() {
-                this.setPlacement.cancel();
- // guaranteed by constructor
-                                this.handleScroll.cancel();
-                this.allowAnimationUpdates = false;
             }
-        }, {
-            key: "shouldRenderArrow",
-            value: function e(t) {
-                var r;
-                var n = this.props, o = n.appearance, a = n.hideArrow, i = n.splunkTheme;
-                var l = i.isPrisma;
- // if hideArrow or hideArrowContext isn't set, default it to true in Prisma themes
-                                var c = (r = a !== null && a !== void 0 ? a : t) !== null && r !== void 0 ? r : l;
-                return o !== "none" && !c;
-            }
-        }, {
-            key: "autoCloseWhenOffScreen",
-            value: function e(t, r) {
-                var n = st(t, r);
-                if (n) {
-                    this.requestClose({
-                        reason: "offScreen"
-                    });
-                }
-                return n;
+        }), [ ne, l, F, ee, et, B ]);
+        // it is not part of the previous useEffect because it needs to be equivalent to componentWillUnmount
+                (0, r.useEffect)((function() {
+            return function() {
+                et.cancel();
+                ze.cancel();
+                Ze.cancel();
+                he.current = false;
+            };
+            // no dependencies here since this needs to set up a cleanup function exactly once
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                }), []);
+        // EventListeners only need to be rendered when open,
+        // otherwise leads to negative performance impacts
+                var tt = Pe ?  n().createElement(n().Fragment, null, Ce &&  n().createElement(E(), {
+            target: je,
+            eventType: "scroll",
+            listener: ze,
+            options: Ke,
+            key: "eventListener"
+        }),  n().createElement(E(), {
+            target: Oe,
+            eventType: "resize",
+            listener: et,
+            key: "eventListenerOnWindowResize"
+        }),  n().createElement(E(), {
+            target: Oe,
+            eventType: "scroll",
+            listener: Ze,
+            options: Ke,
+            key: "eventListenerOnWindowScroll"
+        })) : null;
+        var rt = (0, r.useCallback)((function() {
+            // checking allowAnimationUpdates avoids trying to update state after the component has been unmounted - see SUI-3666
+            if (he.current) {
+                oe(false);
             }
-        }, {
-            key: "requestClose",
-            value: function e(t) {
-                if (m()(this.props.closeReasons, t.reason)) {
-                    var r, n;
-                    (r = (n = this.props).onRequestClose) === null || r === void 0 ? void 0 : r.call(n, t);
-                }
+        }), []);
+        var nt = (0, r.useCallback)((function(e) {
+            ye.current = e;
+            if (e && B) {
+                u()(H.takeFocus, e);
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this;
-                var o = this.props, a = o.animation, i = o.animationConfig, l = o.appearance, c = o.children, u = o.closeReasons, f = o.hitAreaRef, s = o.id, p = o.open, h = o.retainFocus;
-                var d = this.state, v = d.anchorPos, m = d.animating, b = d.arrowStyle, g = d.outerContainerStyle, S = d.placement;
-                var P = this.state, C = P.maxHeight, x = P.maxWidth;
- // eslint-disable-line prefer-const
-                // Accommodate the arrow in the maxHeight and maxWidth.
-                                if (l !== "none") {
-                    if (w()(C)) {
-                        C -= 20;
-                    }
-                    if (w()(x)) {
-                        x -= 20;
+            xe(R, e);
+        }), [ R, B ]);
+        var ot = (0, r.useCallback)((function(e) {
+            ge.current = e;
+            xe($, e);
+        }), [ $ ]);
+        var at = (0, r.useCallback)((function(e) {
+            if (ye.current) {
+                if (X) {
+                    (0, H.handleTab)(ye.current, e);
+                } else if ((0, H.isTabKey)(e)) {
+                    var t = (0, H.getSortedTabbableElements)(ye.current);
+                    if (t.length > 0) {
+                        var r = e.shiftKey ? t[0] : t[t.length - 1];
+                        if (r === e.target) {
+                            Me({
+                                event: e,
+                                reason: "tabKey"
+                            });
+                        }
                     }
                 }
-                var k = {
-                    anchorHeight: v ? v.height : null,
-                    anchorWidth: v ? v.width : null,
-                    placement: S || null,
-                    maxHeight: C || null,
-                    maxWidth: x || null
-                };
-                var A = a ? {
-                    opacity: p ? 1 : 0
-                } : {
-                    opacity: 1
-                };
-                var W = ge();
-                var q = p || m;
-                var H = this.context || W;
-                var _ = H !== W;
-                // EventListeners only need to be rendered when open,
-                // otherwise leads to negative performance impacts
-                                var D = q ? [ _ &&  n().createElement(M(), {
-                    target: H,
-                    eventType: "scroll",
-                    listener: this.handleScroll,
-                    options: it,
-                    key: "eventListener"
-                }),  n().createElement(M(), {
-                    target: W,
-                    eventType: "resize",
-                    listener: this.setPlacement,
-                    key: "eventListenerOnWindowResize"
-                }),  n().createElement(M(), {
-                    target: W,
-                    eventType: "scroll",
-                    listener: this.handleWindowScroll,
-                    options: it,
-                    key: "eventListenerOnWindowScroll"
-                }) ] : [];
-                return [].concat(D, [  n().createElement(R(), {
-                    closeReasons: y()(u.filter((function(e) {
-                        return e !== "offScreen";
-                    })), R().possibleCloseReasons),
-                    open: q,
-                    onRequestClose: this.handleRequestClose,
-                    key: "Layer"
-                }, q && this.innerContainerEl && f &&  n().createElement(ve, {
-                    anchorRect: v,
-                    popoverEl: this.innerContainerEl,
-                    popoverPlacement: S,
-                    ref: f
-                }), q &&  n().createElement(T.Spring, {
-                    from: {
-                        opacity: a ? 0 : 1
-                    },
-                    to: A,
-                    config: De({
-                        tension: 300,
-                        friction: 20,
-                        clamp: true
-                    }, i),
-                    onRest: this.handleAnimationEnd
-                }, (function(e) {
-                    
-                    return n().createElement(z.Consumer, null, (function(o) {
-                        var a = o.hideArrow;
-                        
-                        return n().createElement(ee, {
-                            "data-test": "outer-popover",
-                            style: De(De({}, g), e),
-                            ref: t.handleOuterContainerMount
-                        },  n().createElement(re, We({
-                            $appearance: l,
-                            $open: p,
-                            "data-test": "popover",
-                            ref: t.handleInnerContainerMount,
-                            id: s,
-                            onKeyDown: t.handleTab
-                        }, j()(t.props, [ "anchor" ].concat(Me(E()(r.propTypes))))),  n().createElement(Y.Provider, {
-                            value: {
-                                retainFocus: h
-                            }
-                        },  n().createElement(n().Fragment, null, l === "none" && c, t.shouldRenderArrow(a) &&  n().createElement(oe, {
-                            "data-test": "popover-arrow",
-                            $appearance: l,
-                            ref: t.handleArrowMount,
-                            style: b
-                        }), l !== "none" &&  n().createElement(ne, {
-                            $appearance: l
-                        }, O()(c) ? c(k) : c)))));
-                    }));
-                }))) ]);
             }
-        } ]);
-        return r;
-    }(r.Component);
-    et(pt, "contextType", _());
-    et(pt, "defaultProps", at);
-    et(pt, "propTypes", ot);
-    var ht = (0, A.withSplunkTheme)(pt);
-    ht.propTypes = pt.propTypes;
-    /* harmony default export */    const dt = ht;
+        }), [ Me, X ]);
+        var it = (0, r.useMemo)((function() {
+            return {
+                opacity: f ? 0 : 1
+            };
+        }), [ f ]);
+        var lt = (0, r.useMemo)((function() {
+            return Re({
+                tension: 300,
+                friction: 20,
+                clamp: true
+            }, v);
+        }), [ v ]);
+        var ct = (0, j.useAnimation)({
+            from: it,
+            to: Se,
+            // Setting clamp to true will stop animating at the point it hit's it's goal value.
+            // This will prevent click through while animating out (SUI-6618).
+            config: lt,
+            onRest: rt
+        });
+        var ut = (0, r.useMemo)((function() {
+            return Re(Re({}, pe.outerContainerStyle), ct);
+        }), [ pe.outerContainerStyle, ct ]);
+        var ft = (0, r.useMemo)((function() {
+            return h()(C === null || C === void 0 ? void 0 : C.filter((function(e) {
+                return e !== "offScreen";
+            })), A().possibleCloseReasons);
+        }), [ C ]);
+        
+        return n().createElement(n().Fragment, null, tt,  n().createElement(A(), {
+            closeReasons: ft,
+            open: Pe,
+            onRequestClose: Me,
+            key: "Layer"
+        }, Pe && ye.current && I &&  n().createElement(fe, {
+            anchorRect: pe.anchorPos,
+            popoverEl: ye.current,
+            popoverPlacement: pe.placement,
+            ref: I
+        }), Pe &&  n().createElement(U, {
+            "data-test": "outer-popover",
+            style: ut,
+            ref: ot
+        },  n().createElement(J, ke({
+            $appearance: d,
+            $boxPadding: $e,
+            $open: F,
+            "data-test": "popover",
+            ref: nt,
+            id: L,
+            onKeyDown: at
+        }, G),  n().createElement(n().Fragment, null, d === "none" && w, d !== "none" && !Te &&  n().createElement(Z, {
+            "data-test": "popover-arrow",
+            $appearance: d,
+            ref: me,
+            style: pe.arrowStyle
+        }), d !== "none" &&  n().createElement(Q, {
+            $appearance: d
+        }, g()(w) ? w(we) : w))))));
+    }
+    Ze.propTypes = ze;
+    /* harmony default export */    const et = Ze;
+    // CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
+    var tt =  (0, r.createContext)({});
     // CONCATENATED MODULE: ./src/Popover/index.ts
     module.exports = t;
     /******/})();