@splunk/react-ui 5.1.0 → 5.2.0

package/Popover.js

@@ -62,9 +62,9 @@
     // EXPORTS
         e.d(t, {
         PopoverContext: () => /* reexport */ ve,
-        PopoverMenuContext: () => /* reexport */ lt,
+        PopoverMenuContext: () => /* reexport */ st,
         PopoverProvider: () => /* reexport */ he,
-        default: () => /* reexport */ it
+        default: () => /* reexport */ ft
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -95,10 +95,10 @@
     var y =  e.n(g);
     // CONCATENATED MODULE: external "lodash/throttle"
     const w = require("lodash/throttle");
-    var S =  e.n(w);
+    var P =  e.n(w);
     // CONCATENATED MODULE: external "prop-types"
-    const P = require("prop-types");
-    var O =  e.n(P);
+    const S = require("prop-types");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
     const C = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
@@ -106,10 +106,10 @@
     var j =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
     const x = require("@splunk/react-ui/Layer");
-    var A =  e.n(x);
+    var k =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const k = require("@splunk/react-ui/ScrollContainerContext");
-    var T =  e.n(k);
+    const A = require("@splunk/react-ui/ScrollContainerContext");
+    var T =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
     const R = require("@splunk/themes/useSplunkTheme");
     var M =  e.n(R);
@@ -138,26 +138,26 @@
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
             t % 2 ? H(Object(r), !0).forEach((function(t) {
-                L(e, t, r[t]);
+                N(e, t, r[t]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : H(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function L(e, t, r) {
-        return (t = D(t)) in e ? Object.defineProperty(e, t, {
+    function N(e, t, r) {
+        return (t = L(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function D(e) {
-        var t = F(e, "string");
+    function L(e) {
+        var t = D(e, "string");
         return "symbol" == q(t) ? t : t + "";
     }
-    function F(e, t) {
+    function D(e, t) {
         if ("object" != q(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -167,7 +167,7 @@
         }
         return ("string" === t ? String : Number)(e);
     }
-    function $(e) {
+    function F(e) {
         var t = e.align, r = e.anchorPos, n = e.outerContainerEl, o = e.padding, a = e.placement;
         switch (a) {
           case "above":
@@ -206,7 +206,7 @@
             throw new Error("".concat(a, " is not a valid placement value. Valid options are: 'above', 'below', 'left', or 'right'"));
         }
     }
-    var _ = function e(t) {
+    var $ = function e(t) {
         var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
         if (r === "edge") {
             return n.left + o.offsetWidth - a;
@@ -216,7 +216,7 @@
         }
         return n.middle + o.offsetWidth / 2;
     };
-    var N = function e(t) {
+    var _ = function e(t) {
         var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
         if (r === "edge") return n.left - a;
         if (r === "end") return n.right - o.offsetWidth + a;
@@ -246,7 +246,7 @@
         }
         var h = d;
         // Initialize the result variables. These will be mutated as needed and returned.
-                var m = $({
+                var m = F({
             align: t,
             anchorPos: r,
             outerContainerEl: i,
@@ -255,21 +255,21 @@
         }), b = m.top, g = m.left;
         var y = "auto";
         var w = f;
-        var S = u;
-        var P = h;
+        var P = u;
+        var S = h;
         // Boolean convenience variables to simplify positioning logic.
                 var O = r.top - i.offsetHeight > 0;
         var C = r.bottom + i.offsetHeight < u;
         var E = r.left - i.offsetWidth > 0;
         var j = r.right + i.offsetWidth < f;
         var x = r.top * .7 > u - r.bottom;
-        var A = _({
+        var k = $({
             align: t,
             anchorPos: r,
             outerContainerEl: i,
             padding: l
         }) > f;
-        var k = N({
+        var A = _({
             align: t,
             anchorPos: r,
             outerContainerEl: i,
@@ -288,7 +288,7 @@
             padding: l
         }) > u;
         // Handle each of the four placement options individually.
-                if (P === "above") {
+                if (S === "above") {
             if (!O && v) {
                 if (C) {
                     return K(I(I({}, e), {}, {
@@ -306,27 +306,27 @@
                     }));
                 }
                 if (o) {
-                    P = "misaligned";
+                    S = "misaligned";
                     b = 0;
                 }
             }
-            if (P !== "misaligned") {
+            if (S !== "misaligned") {
                 y = u - b - i.offsetHeight;
                 if (n) {
                     y = Math.min(y, u - n.top);
                 }
                 b = "auto";
             }
-            if (A) {
+            if (k) {
                 g = Math.max(f - i.offsetWidth, 0);
-            } else if (k) {
+            } else if (A) {
                 g = 0;
             }
             if (!o) {
-                S = r.top;
+                P = r.top;
             }
         }
-        if (P === "below") {
+        if (S === "below") {
             if (!C && v) {
                 if (O && x) {
                     return K(I(I({}, e), {}, {
@@ -344,23 +344,23 @@
                     }));
                 }
                 if (o) {
-                    P = "misaligned";
+                    S = "misaligned";
                     b = 0;
                 }
             }
             if (n) {
                 b = Math.min(b, n.bottom);
             }
-            if (A) {
+            if (k) {
                 g = Math.max(f - i.offsetWidth, 0);
-            } else if (k) {
+            } else if (A) {
                 g = 0;
             }
             if (!o) {
-                S = u - r.bottom;
+                P = u - r.bottom;
             }
         }
-        if (P === "left") {
+        if (S === "left") {
             if (!E && v) {
                 if (j) {
                     return K(I(I({}, e), {}, {
@@ -378,7 +378,7 @@
                     }));
                 }
                 if (o) {
-                    P = "misaligned";
+                    S = "misaligned";
                     b = 0;
                 }
             }
@@ -391,7 +391,7 @@
                 w = r.left;
             }
         }
-        if (P === "right") {
+        if (S === "right") {
             if (!j && v) {
                 if (E) {
                     return K(I(I({}, e), {}, {
@@ -409,7 +409,7 @@
                     }));
                 }
                 if (o) {
-                    P = "misaligned";
+                    S = "misaligned";
                     b = 0;
                 }
             }
@@ -423,8 +423,8 @@
             }
         }
         return {
-            placement: P,
-            maxHeight: S,
+            placement: S,
+            maxHeight: P,
             maxWidth: w,
             outerContainerStyle: {
                 top: b,
@@ -578,11 +578,11 @@
                 }
                 var y = "".concat(b, " 0");
                 var w = "".concat(b, " ").concat(a.height);
-                var S = "".concat(b, " ").concat(m);
-                var P = "".concat(g, " ").concat(m);
+                var P = "".concat(b, " ").concat(m);
+                var S = "".concat(g, " ").concat(m);
                 var O = "".concat(b, " ").concat(m + r.height);
                 var C = "".concat(g, " ").concat(m + r.height);
-                var E = "\n                        M ".concat(y, "\n                        S ").concat(S, " , ").concat(P, "\n                        L ").concat(S, "\n                        L ").concat(O, "\n                        L ").concat(C, "\n                        S ").concat(O, " , ").concat(w, "\n                    ");
+                var E = "\n                        M ".concat(y, "\n                        S ").concat(P, " , ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(O, "\n                        L ").concat(C, "\n                        S ").concat(O, " , ").concat(w, "\n                    ");
                 return {
                     hitAreaPath: E,
                     hitAreaStyle: {
@@ -629,22 +629,25 @@
     // CONCATENATED MODULE: ./src/Popover/PopoverProvider.tsx
     var ve =  (0, r.createContext)({});
     var de = {
+        /** @private */
+        allowPropagation: O().bool,
         children: O().node,
         hideArrow: O().bool
     };
     /**
  * Provides a method for controlling certain `Popover` props in components that use `Popover`.
  */    var he = function e(t) {
-        var o = t.children, a = t.hideArrow;
-        var i = (0, r.useMemo)((function() {
+        var o = t.allowPropagation, a = t.children, i = t.hideArrow;
+        var l = (0, r.useMemo)((function() {
             return {
-                hideArrow: a
+                allowPropagation: o,
+                hideArrow: i
             };
-        }), [ a ]);
+        }), [ o, i ]);
         
         return n().createElement(ve.Provider, {
-            value: i
-        }, o);
+            value: l
+        }, a);
     };
     he.propTypes = de;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
@@ -766,12 +769,12 @@
             clearTimeout(t);
         }
     };
-    function Se() {
+    function Pe() {
         var e = typeof window !== "undefined" ? window : we;
         return e;
     }
-    var Pe = Se();
-    /* harmony default export */    const Oe = /* unused pure expression or super */ null && Pe;
+    var Se = Pe();
+    /* harmony default export */    const Oe = /* unused pure expression or super */ null && Se;
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
     function Ce(e) {
         "@babel/helpers - typeof";
@@ -803,18 +806,18 @@
         return e;
     }
     function xe(e, t, r) {
-        return (t = Ae(t)) in e ? Object.defineProperty(e, t, {
+        return (t = ke(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function Ae(e) {
-        var t = ke(e, "string");
+    function ke(e) {
+        var t = Ae(e, "string");
         return "symbol" == Ce(t) ? t : t + "";
     }
-    function ke(e, t) {
+    function Ae(e, t) {
         if ("object" != Ce(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -851,7 +854,7 @@
         if (!t || !a) {
             return o;
         }
-        var i = Se();
+        var i = Pe();
         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;
@@ -881,17 +884,37 @@
                         }
         }
     }
+    // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
+    var qe = "is deprecated and will be removed in the next major version.";
+    var He = function e(t) {
+        var r = t.additionalMessage, n = r === void 0 ? "" : r, o = t.componentName;
+        useEffect((function() {
+            if (false) {}
+        }), [ n, o ]);
+    };
+    var Ie = function e(t) {
+        var r = t.additionalMessage, n = r === void 0 ? "" : r, o = t.componentName, a = t.propName, i = t.propValue;
+        useEffect((function() {
+            if (false) {}
+        }), [ n, o, a, i ]);
+    };
+    var Ne = function e(t) {
+        var n = t.additionalMessage, o = n === void 0 ? "" : n, a = t.componentName, i = t.deprecatedPropValue, l = t.propName, c = t.propValue;
+        (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ o, a, l, c, i ]);
+    };
     // CONCATENATED MODULE: ./src/Popover/Popover.tsx
-    function qe(e) {
+    function Le(e) {
         "@babel/helpers - typeof";
-        return qe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Le = "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;
-        }, qe(e);
+        }, Le(e);
     }
-    function He() {
-        return He = Object.assign ? Object.assign.bind() : function(e) {
+    function De() {
+        return De = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -899,9 +922,9 @@
                 }
             }
             return e;
-        }, He.apply(null, arguments);
+        }, De.apply(null, arguments);
     }
-    function Ie(e, t) {
+    function Fe(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -911,60 +934,60 @@
         }
         return r;
     }
-    function Le(e) {
+    function $e(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Ie(Object(r), !0).forEach((function(t) {
-                De(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ie(Object(r)).forEach((function(t) {
+            t % 2 ? Fe(Object(r), !0).forEach((function(t) {
+                _e(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Fe(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function De(e, t, r) {
-        return (t = Fe(t)) in e ? Object.defineProperty(e, t, {
+    function _e(e, t, r) {
+        return (t = Ve(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function Fe(e) {
-        var t = $e(e, "string");
-        return "symbol" == qe(t) ? t : t + "";
+    function Ve(e) {
+        var t = ze(e, "string");
+        return "symbol" == Le(t) ? t : t + "";
     }
-    function $e(e, t) {
-        if ("object" != qe(e) || !e) return e;
+    function ze(e, t) {
+        if ("object" != Le(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != qe(n)) return n;
+            if ("object" != Le(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function _e(e, t) {
-        return Xe(e) || Ke(e, t) || Ve(e, t) || Ne();
+    function Ke(e, t) {
+        return Ge(e) || Ue(e, t) || Be(e, t) || Xe();
     }
-    function Ne() {
+    function Xe() {
         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 Ve(e, t) {
+    function Be(e, t) {
         if (e) {
-            if ("string" == typeof e) return ze(e, t);
+            if ("string" == typeof e) return Ye(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) ? ze(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) ? Ye(e, t) : void 0;
         }
     }
-    function ze(e, t) {
+    function Ye(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 Ke(e, t) {
+    function Ue(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;
@@ -986,26 +1009,26 @@
             return l;
         }
     }
-    function Xe(e) {
+    function Ge(e) {
         if (Array.isArray(e)) return e;
     }
-    function Be(e, t) {
+    function Je(e, t) {
         if (null == e) return {};
-        var r, n, o = Ye(e, t);
+        var r, n, o = Qe(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]);
+                r = a[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
         return o;
     }
-    function Ye(e, t) {
+    function Qe(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
@@ -1015,8 +1038,8 @@
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var Ue = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
-    var Ge = {
+    /** @public */    var Ze = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
+    var et = {
         align: O().oneOf([ "center", "edge", "end" ]),
         anchor: O().object,
         animation: O().bool,
@@ -1025,7 +1048,7 @@
         autoCloseWhenOffScreen: O().bool,
         canCoverAnchor: O().bool,
         children: O().oneOfType([ O().node, O().func ]),
-        closeReasons: O().arrayOf(O().oneOf(Ue)),
+        closeReasons: O().arrayOf(O().oneOf(Ze)),
         defaultPlacement: O().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
         elementRef: O().oneOfType([ O().func, O().object ]),
         id: O().string,
@@ -1043,11 +1066,11 @@
         takeFocus: O().bool,
         splunkTheme: O().object
     };
-    var Je = {
+    var tt = {
         passive: false,
         capture: true
     };
-    function Qe(e, t) {
+    function rt(e, t) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
         return !!e && !!t && u()(e, (function(e, n) {
             if (h()(e)) {
@@ -1056,7 +1079,7 @@
             return t[n] === e;
         }));
     }
-    function Ze(e) {
+    function nt(e) {
         var t = e.anchorPos, r = e.borderRadius, n = e.placement, o = e.outerContainerStyle, i = e.outerContainerEl;
         if (n === "misaligned") {
             return [ {
@@ -1120,7 +1143,7 @@
         l[w[n]] = "50%";
         return [ l, g ];
     }
-    function et(e) {
+    function ot(e) {
         var t = e.anchorEl, r = e.offsets, n = r === void 0 ? false : r, o = e.pointTo;
         var a = Me(t, n);
         var i = {
@@ -1143,11 +1166,11 @@
         i.center = c ? i.top : a.top + (i.bottom - a.top) / 2;
         return i;
     }
-    function tt(e) {
+    function at(e) {
         return e !== window && e !== window.document;
     }
-    function rt(e, t) {
-        var r = Se();
+    function it(e, t) {
+        var r = Pe();
         if (e.top < 0 || e.top > r.innerHeight || e.left < 0 || e.left > r.innerWidth) {
             return true;
         }
@@ -1158,36 +1181,41 @@
         }
         return false;
     }
-    function nt(e, t) {
+    function lt(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 = G * 2;
         return t !== "none" && e != null && h()(e) ? e - r : e || null;
     }
-    var ot = {};
+    var ct = {};
     /**
  * `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.
- */    function at(e) {
+ */    function ut(e) {
         var t, o;
-        var a = e.align, i = a === void 0 ? "center" : a, c = e.anchor, u = e.animation, f = u === void 0 ? true : u, s = e.animationConfig, p = s === void 0 ? ot : s, d = e.appearance, h = d === void 0 ? "normal" : d, m = e.autoCloseWhenOffScreen, g = m === void 0 ? true : m, w = e.canCoverAnchor, P = e.children, O = e.closeReasons, E = O === void 0 ? Ue : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, _ = e.repositionMode, N = _ === void 0 ? "flip" : _, V = e.retainFocus, z = V === void 0 ? true : V, X = e.takeFocus, B = e.toggleId, Y = Be(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus", "toggleId" ]);
+        var a = e.align, i = a === void 0 ? "center" : a, c = e.anchor, u = e.animation, f = u === void 0 ? true : u, s = e.animationConfig, p = s === void 0 ? ct : s, d = e.appearance, h = d === void 0 ? "normal" : d, m = e.autoCloseWhenOffScreen, g = m === void 0 ? true : m, w = e.canCoverAnchor, S = e.children, O = e.closeReasons, E = O === void 0 ? Ze : O, x = e.defaultPlacement, A = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, N = e.onRequestClose, L = e.open, D = e.outerRef, F = e.pointTo, $ = e.repositionMode, _ = $ === void 0 ? "flip" : $, V = e.retainFocus, z = V === void 0 ? true : V, X = e.takeFocus, B = e.toggleId, Y = Je(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus", "toggleId" ]);
         // @docs-props-type PopoverPropsBase
-                if (false) {}
-        var U = (0, r.useState)(D), Q = _e(U, 2), re = Q[0], ne = Q[1];
-        var oe = (0, r.useState)(false), ae = _e(oe, 2), ie = ae[0], le = ae[1];
-        if (D !== ie) {
+                Ne({
+            componentName: "Popover",
+            deprecatedPropValue: "inverted",
+            propName: "appearance",
+            propValue: h
+        });
+        var U = (0, r.useState)(L), Q = Ke(U, 2), re = Q[0], ne = Q[1];
+        var oe = (0, r.useState)(false), ae = Ke(oe, 2), ie = ae[0], le = ae[1];
+        if (L !== ie) {
             // 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
             ne(f);
-            le(D);
+            le(L);
         }
         // this is a single state object because all these properties
         // are updated at the same time by setPlacement
-                var ce = (0, r.useState)({}), ue = _e(ce, 2), fe = ue[0], se = ue[1];
+                var ce = (0, r.useState)({}), ue = Ke(ce, 2), fe = ue[0], se = ue[1];
         var de = (0, r.useRef)(true);
         var he = (0, r.useRef)(false);
         var me = (0, r.useRef)(null);
@@ -1197,71 +1225,71 @@
             anchorHeight: ((t = fe.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
             anchorWidth: ((o = fe.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
             placement: fe.placement || null,
-            maxHeight: nt(fe.maxHeight, h),
-            maxWidth: nt(fe.maxWidth, h),
+            maxHeight: lt(fe.maxHeight, h),
+            maxWidth: lt(fe.maxWidth, h),
             toggleId: B
         };
         var we = (0, r.useMemo)((function() {
             return f ? {
-                opacity: D ? 1 : 0
+                opacity: L ? 1 : 0
             } : {
                 opacity: 1
             };
-        }), [ f, D ]);
-        var Pe = Se();
-        var Oe = D || re;
-        var Ce = (0, r.useContext)(T()) || Pe;
-        var Ee = Ce !== Pe;
-        var je = (0, r.useContext)(ve), xe = je.hideArrow;
-        var Ae = q !== null && q !== void 0 ? q : xe;
+        }), [ f, L ]);
+        var Se = Pe();
+        var Oe = L || re;
+        var Ce = (0, r.useContext)(T()) || Se;
+        var Ee = Ce !== Se;
+        var je = (0, r.useContext)(ve), xe = je.allowPropagation, ke = je.hideArrow;
+        var Ae = q !== null && q !== void 0 ? q : ke;
         (0, r.useEffect)((function() {
             if (false) {}
         }), [ c ]);
-        var ke = (0, r.useCallback)((function(e) {
-            if (D && (E === null || E === void 0 ? void 0 : E.includes(e.reason))) {
-                L === null || L === void 0 ? void 0 : L(e);
+        var Te = (0, r.useCallback)((function(e) {
+            if (L && (E === null || E === void 0 ? void 0 : E.includes(e.reason))) {
+                N === null || N === void 0 ? void 0 : N(e);
             }
-        }), [ E, D, L ]);
-        var Te = (0, r.useCallback)((function(e, t) {
-            var r = rt(e, t);
+        }), [ E, L, N ]);
+        var Re = (0, r.useCallback)((function(e, t) {
+            var r = it(e, t);
             if (r) {
-                ke({
+                Te({
                     reason: "offScreen"
                 });
             }
             return r;
-        }), [ ke ]);
-        var Re = M()(), Me = Re.borderRadius, qe = Re.spacingXSmall;
-        var Ie = parseInt(Me, 10);
-        var De = parseInt(qe, 10);
+        }), [ Te ]);
+        var Me = M()(), qe = Me.borderRadius, He = Me.spacingXSmall;
+        var Ie = parseInt(qe, 10);
+        var Le = parseInt(He, 10);
         // this is intentionally smaller when the arrow is hidden to address SUI-5452
-                var Fe = Ae ? De : G;
+                var Fe = Ae ? Le : G;
         // do not call this directly - use setPlacement (the throttled version) instead
-                var $e = (0, r.useCallback)((function(e) {
+                var _e = (0, r.useCallback)((function(e) {
             se((function(t) {
                 var r, n;
                 // If these conditions are not met, we cannot set the popover.
-                                if (!D || !ge.current || !c) {
+                                if (!L || !ge.current || !c) {
                     // if (__DEV__ && !anchor && open) {
                     //     throw new Error(`Invalid anchor ${anchor} provided to Popover.`);
                     // }
                     return t;
                 }
-                var o = et({
+                var o = ot({
                     anchorEl: c,
-                    pointTo: $
+                    pointTo: F
                 });
-                var a = et({
+                var a = ot({
                     anchorEl: c,
                     offsets: true,
-                    pointTo: $
+                    pointTo: F
                 });
-                var l = tt(Ce) ? et({
+                var l = at(Ce) ? ot({
                     anchorEl: Ce,
-                    pointTo: $
+                    pointTo: F
                 }) : undefined;
                 if (e && g) {
-                    if (Te(o, l)) {
+                    if (Re(o, l)) {
                         return t;
                     }
                 }
@@ -1270,30 +1298,30 @@
                     anchorPos: a,
                     scrollContainerPos: l,
                     canCoverAnchor: w,
-                    defaultPlacement: k,
-                    repositionMode: N,
+                    defaultPlacement: A,
+                    repositionMode: _,
                     outerContainerEl: ge.current,
                     padding: Fe,
-                    windowWidth: Pe.innerWidth,
-                    windowHeight: Pe.innerHeight
+                    windowWidth: Se.innerWidth,
+                    windowHeight: Se.innerHeight
                 }), f = u.placement, s = u.outerContainerStyle, p = u.maxHeight, v = u.maxWidth;
-                var d = Qe(a, t.anchorPos) && Qe(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
+                var d = rt(a, t.anchorPos) && rt(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
                 var h = true;
                 var m = {};
                 var b;
                 if (me.current) {
-                    var S = Ze({
+                    var P = nt({
                         anchorPos: a,
                         borderRadius: Ie,
                         outerContainerStyle: s,
                         placement: f,
                         outerContainerEl: ge.current
                     });
-                    var P = _e(S, 2);
-                    m = P[0];
-                    b = P[1];
+                    var S = Ke(P, 2);
+                    m = S[0];
+                    b = S[1];
                 }
-                h = Qe(y()(m, "transform"), y()(t.arrowStyle, "transform")) && Qe((r = b) !== null && r !== void 0 ? r : {}, (n = t.arrowStyleTransformMeta) !== null && n !== void 0 ? n : {});
+                h = rt(y()(m, "transform"), y()(t.arrowStyle, "transform")) && rt((r = b) !== 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;
@@ -1308,43 +1336,43 @@
                     maxWidth: v
                 };
             }));
-        }), [ i, c, g, Ie, Fe, w, Te, k, D, $, N, Ce, Pe.innerHeight, Pe.innerWidth ]);
+        }), [ i, c, g, Ie, Fe, w, Re, A, L, F, _, Ce, Se.innerHeight, Se.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 Ne = (0, r.useMemo)((function() {
-            return S()($e.bind(null, true), 0);
-        }), [ $e ]);
-        var Ve = (0, r.useMemo)((function() {
-            return S()($e.bind(null, true), 0);
-        }), [ $e ]);
+                var Ve = (0, r.useMemo)((function() {
+            return P()(_e.bind(null, true), 0);
+        }), [ _e ]);
         var ze = (0, r.useMemo)((function() {
-            return S()($e, 0, {
+            return P()(_e.bind(null, true), 0);
+        }), [ _e ]);
+        var Xe = (0, r.useMemo)((function() {
+            return P()(_e, 0, {
                 leading: false
             });
-        }), [ $e ]);
+        }), [ _e ]);
         // this needs to run on every render - equivalent to componentDidUpdate
                 (0, r.useEffect)((function() {
             if (!be.current) {
                 return;
             }
-            if (D || re) {
-                ze();
+            if (L || re) {
+                Xe();
             }
         }));
         (0, r.useEffect)((function() {
-            if (X && D && be.current && fe.placement != null && !he.current) {
+            if (X && L && be.current && fe.placement != null && !he.current) {
                 he.current = true;
                 (0, W.takeFocus)(be.current);
             }
-        }), [ D, fe.placement, X ]);
+        }), [ L, fe.placement, X ]);
         (0, r.useEffect)((function() {
             // we need to set this to true on every mount because React.StrictMode will call the effect twice
             // and we need to ensure that allowAnimationUpdates is true while the component is mounted
             de.current = true;
             return function() {
-                ze.cancel();
-                Ne.cancel();
+                Xe.cancel();
                 Ve.cancel();
+                ze.cancel();
                 de.current = false;
             };
             // no dependencies here since this is equivalent to componentDidMount and componentWillUnmount
@@ -1352,31 +1380,31 @@
                 }), []);
         // EventListeners only need to be rendered when open,
         // otherwise leads to negative performance impacts
-                var Ke = Oe ?  n().createElement(n().Fragment, null, Ee &&  n().createElement(j(), {
+                var Be = Oe ?  n().createElement(n().Fragment, null, Ee &&  n().createElement(j(), {
             target: Ce,
             eventType: "scroll",
-            listener: Ne,
-            options: Je,
+            listener: Ve,
+            options: tt,
             key: "eventListener"
         }),  n().createElement(j(), {
-            target: Pe,
+            target: Se,
             eventType: "resize",
-            listener: ze,
+            listener: Xe,
             key: "eventListenerOnWindowResize"
         }),  n().createElement(j(), {
-            target: Pe,
+            target: Se,
             eventType: "scroll",
-            listener: Ve,
-            options: Je,
+            listener: ze,
+            options: tt,
             key: "eventListenerOnWindowScroll"
         })) : null;
-        var Xe = (0, r.useCallback)((function() {
+        var Ye = (0, r.useCallback)((function() {
             // checking allowAnimationUpdates avoids trying to update state after the component has been unmounted - see SUI-3666
             if (de.current) {
                 ne(false);
             }
         }), []);
-        var Ye = (0, r.useCallback)((function(e) {
+        var Ue = (0, r.useCallback)((function(e) {
             be.current = e;
             if (e && X) {
                 l()(W.takeFocus, e);
@@ -1385,9 +1413,9 @@
         }), [ R, X ]);
         var Ge = (0, r.useCallback)((function(e) {
             ge.current = e;
-            We(F, e);
-        }), [ F ]);
-        var at = (0, r.useCallback)((function(e) {
+            We(D, e);
+        }), [ D ]);
+        var Qe = (0, r.useCallback)((function(e) {
             if (be.current) {
                 if (z) {
                     (0, W.handleTab)(be.current, e);
@@ -1396,7 +1424,7 @@
                     if (t.length > 0) {
                         var r = e.shiftKey ? t[0] : t[t.length - 1];
                         if (r === e.target) {
-                            ke({
+                            Te({
                                 event: e,
                                 reason: "tabKey"
                             });
@@ -1404,41 +1432,46 @@
                     }
                 }
             }
-        }), [ ke, z ]);
-        var it = (0, r.useMemo)((function() {
+        }), [ Te, z ]);
+        var et = (0, r.useCallback)((function(e) {
+            if (!xe) {
+                e.stopPropagation();
+            }
+        }), [ xe ]);
+        var ut = (0, r.useMemo)((function() {
             return {
                 opacity: f ? 0 : 1
             };
         }), [ f ]);
-        var lt = (0, r.useMemo)((function() {
-            return Le({
+        var ft = (0, r.useMemo)((function() {
+            return $e({
                 tension: 300,
                 friction: 20,
                 clamp: true
             }, p);
         }), [ p ]);
-        var ct = (0, C.useAnimation)({
-            from: it,
+        var st = (0, C.useAnimation)({
+            from: ut,
             to: we,
             // 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: Xe
+            config: ft,
+            onRest: Ye
         });
-        var ut = (0, r.useMemo)((function() {
-            return Le(Le({}, fe.outerContainerStyle), ct);
-        }), [ fe.outerContainerStyle, ct ]);
-        var ft = (0, r.useMemo)((function() {
+        var pt = (0, r.useMemo)((function() {
+            return $e($e({}, fe.outerContainerStyle), st);
+        }), [ fe.outerContainerStyle, st ]);
+        var vt = (0, r.useMemo)((function() {
             return v()(E === null || E === void 0 ? void 0 : E.filter((function(e) {
                 return e !== "offScreen";
-            })), A().possibleCloseReasons);
+            })), k().possibleCloseReasons);
         }), [ E ]);
-        var st = b()(P) ? P(ye) : P;
+        var dt = b()(S) ? S(ye) : S;
         
-        return n().createElement(n().Fragment, null, Ke,  n().createElement(A(), {
-            closeReasons: ft,
+        return n().createElement(n().Fragment, null, Be,  n().createElement(k(), {
+            closeReasons: vt,
             open: Oe,
-            onRequestClose: ke,
+            onRequestClose: Te,
             key: "Layer"
         }, Oe && be.current && H &&  n().createElement(pe, {
             anchorRect: fe.anchorPos,
@@ -1447,30 +1480,32 @@
             ref: H
         }), Oe &&  n().createElement(J, {
             "data-test": "outer-popover",
-            style: ut,
+            style: pt,
             ref: Ge
-        },  n().createElement(Z, He({
+        },  n().createElement(Z, De({
             $appearance: h,
             $boxPadding: Fe,
-            $open: D,
+            $open: L,
             "data-test": "popover",
-            ref: Ye,
+            ref: Ue,
             id: I,
-            onKeyDown: at
-        }, Y),  n().createElement(n().Fragment, null, h === "none" && st, h !== "none" && !Ae &&  n().createElement(te, {
+            onKeyDown: Qe
+        }, Y),  n().createElement(n().Fragment, null, h === "none" && dt, h !== "none" && !Ae &&  n().createElement(te, {
             "data-test": "popover-arrow",
             $appearance: h,
+            onClick: et,
             ref: me,
             style: fe.arrowStyle
         }), h !== "none" &&  n().createElement(ee, {
-            $appearance: h
-        }, st))))));
+            $appearance: h,
+            onClick: et
+        }, dt))))));
     }
-    at.propTypes = Ge;
-    at.possibleCloseReasons = Ue;
-    /* harmony default export */    const it = at;
+    ut.propTypes = et;
+    ut.possibleCloseReasons = Ze;
+    /* harmony default export */    const ft = ut;
     // CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
-    var lt =  (0, r.createContext)({});
+    var st =  (0, r.createContext)({});
     // CONCATENATED MODULE: ./src/Popover/index.ts
     module.exports = t;
     /******/})();