@splunk/react-ui 5.3.0 → 5.4.0

package/Popover.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        PopoverContext: () => /* reexport */ ve,
-        PopoverMenuContext: () => /* reexport */ st,
-        PopoverProvider: () => /* reexport */ he,
-        default: () => /* reexport */ ft
+        PopoverContext: () => /* reexport */ de,
+        PopoverMenuContext: () => /* reexport */ pt,
+        PopoverProvider: () => /* reexport */ me,
+        default: () => /* reexport */ st
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -442,16 +442,19 @@
     const U = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Popover/PopoverStyles.ts
     var G = 8;
-    var J = Y()(X.animated.div).withConfig({
+    // this works around SUI-7977 and SUI-8062 by insetting the arrow into the box
+    // such that a 1px gap does not appear between the arrow and the box when the Popover is resized or zoomed
+        var J = 1;
+    var Q = Y()(X.animated.div).withConfig({
         displayName: "PopoverStyles__Styled",
         componentId: "sc-1nahsvw-0"
     })([ "position:fixed;z-index:", ";left:-300%;top:-300%;" ], U.variables.zindexPopover);
     // These hex codes are the inverted values of variables.backgroundColorPopup which are not exposed as tokens
-        var Q = (0, B.css)([ "", "" ], (0, U.pick)({
+        var Z = (0, B.css)([ "", "" ], (0, U.pick)({
         light: "#27292e",
         dark: U.variables.white
     }));
-    var Z = Y().div.withConfig({
+    var ee = Y().div.withConfig({
         displayName: "PopoverStyles__StyledBox",
         componentId: "sc-1nahsvw-1"
     })([ "", ";", ";", ";" ], U.mixins.reset("block"), (function(e) {
@@ -461,55 +464,55 @@
         var t = e.$appearance, r = e.$boxPadding;
         return t !== "none" && (0, B.css)([ "padding:", "px;" ], r);
     }));
-    var ee = Y().div.withConfig({
+    var te = Y().div.withConfig({
         displayName: "PopoverStyles__StyledContent",
         componentId: "sc-1nahsvw-2"
     })([ "border-radius:", ";background-color:", ";color:", ";", "" ], U.variables.borderRadius, (0, 
     U.pickVariant)("$appearance", {
         normal: U.variables.backgroundColorPopup,
-        inverted: Q
+        inverted: Z
     }), (0, U.pickVariant)("$appearance", {
         normal: U.variables.contentColorDefault,
         inverted: U.variables.contentColorInverted
     }), (0, U.pickVariant)("$appearance", {
         normal: (0, B.css)([ "box-shadow:", ";" ], U.variables.overlayShadow)
     }));
-    var te = Y().div.withConfig({
+    var re = Y().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;", ";" ], G, G, G, (function(e) {
+    })([ "width:0;height:0;border-left:calc(", "px + ", "px) solid transparent;border-right:calc(", "px + ", "px) solid transparent;position:absolute;border-bottom-width:calc(", "px + ", "px);border-bottom-style:solid;", ";" ], G, J, G, J, G, J, (function(e) {
         var t = e.$appearance;
         return t !== "none" && (0, B.css)([ "border-bottom-color:", ";" ], (0, U.pickVariant)("$appearance", {
             normal: U.variables.backgroundColorPopup,
-            inverted: Q
+            inverted: Z
         }));
     }));
-    var re = Y().svg.withConfig({
+    var ne = Y().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 ne(e, t) {
-        return ce(e) || le(e, t) || ae(e, t) || oe();
+    function oe(e, t) {
+        return ue(e) || ce(e, t) || ie(e, t) || ae();
     }
-    function oe() {
+    function ae() {
         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 ae(e, t) {
+    function ie(e, t) {
         if (e) {
-            if ("string" == typeof e) return ie(e, t);
+            if ("string" == typeof e) return le(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) ? ie(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) ? le(e, t) : void 0;
         }
     }
-    function ie(e, t) {
+    function le(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 le(e, t) {
+    function ce(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;
@@ -531,15 +534,15 @@
             return l;
         }
     }
-    function ce(e) {
+    function ue(e) {
         if (Array.isArray(e)) return e;
     }
-    var ue = {
+    var fe = {
         anchorRect: O().object,
         popoverEl: O().object,
         popoverPlacement: O().oneOf([ "above", "below", "left", "right", "misaligned" ])
     };
-    var fe = function e(t) {
+    var se = function e(t) {
         var r = t.anchorRect, n = t.popoverEl, o = t.popoverPlacement;
         if (r != null && n != null && o != null) {
             var a = n.getBoundingClientRect();
@@ -599,12 +602,12 @@
             hitAreaStyle: {}
         };
     };
-    var se =  n().forwardRef((function(e, t) {
+    var pe =  n().forwardRef((function(e, t) {
         var o = e.anchorRect, a = e.popoverEl, i = e.popoverPlacement;
-        var l = (0, r.useState)(null), c = ne(l, 2), u = c[0], f = c[1];
-        var s = (0, r.useState)({}), p = ne(s, 2), v = p[0], d = p[1];
+        var l = (0, r.useState)(null), c = oe(l, 2), u = c[0], f = c[1];
+        var s = (0, r.useState)({}), p = oe(s, 2), v = p[0], d = p[1];
         (0, r.useEffect)((function() {
-            var e = fe({
+            var e = se({
                 anchorRect: o,
                 popoverEl: a,
                 popoverPlacement: i
@@ -614,7 +617,7 @@
         }), [ o, a, i ]);
         if (u != null) {
             
-            return n().createElement(re, {
+            return n().createElement(ne, {
                 "data-test": "popover-hit-area",
                 style: v
             },  n().createElement("path", {
@@ -624,11 +627,11 @@
         }
         return null;
     }));
-    se.propTypes = ue;
-    /* harmony default export */    const pe = se;
+    pe.propTypes = fe;
+    /* harmony default export */    const ve = pe;
     // CONCATENATED MODULE: ./src/Popover/PopoverProvider.tsx
-    var ve =  (0, r.createContext)({});
-    var de = {
+    var de =  (0, r.createContext)({});
+    var he = {
         /** @private */
         allowPropagation: O().bool,
         children: O().node,
@@ -636,7 +639,7 @@
     };
     /**
  * Provides a method for controlling certain `Popover` props in components that use `Popover`.
- */    var he = function e(t) {
+ */    var me = function e(t) {
         var o = t.allowPropagation, a = t.children, i = t.hideArrow;
         var l = (0, r.useMemo)((function() {
             return {
@@ -645,14 +648,14 @@
             };
         }), [ o, i ]);
         
-        return n().createElement(ve.Provider, {
+        return n().createElement(de.Provider, {
             value: l
         }, a);
     };
-    he.propTypes = de;
+    me.propTypes = he;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var me = {
+    var be = {
         body: {
             appendChild: function e() {
                 return [];
@@ -706,16 +709,16 @@
             search: ""
         }
     };
-    function be() {
-        var e = typeof document !== "undefined" ? document : me;
+    function ge() {
+        var e = typeof document !== "undefined" ? document : be;
         return e;
     }
-    var ge = be();
-    /* harmony default export */    const ye = /* unused pure expression or super */ null && ge;
+    var ye = ge();
+    /* harmony default export */    const we = /* unused pure expression or super */ null && ye;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var we = {
-        document: me,
+    var Pe = {
+        document: be,
         navigator: {
             userAgent: ""
         },
@@ -769,22 +772,22 @@
             clearTimeout(t);
         }
     };
-    function Pe() {
-        var e = typeof window !== "undefined" ? window : we;
+    function Se() {
+        var e = typeof window !== "undefined" ? window : Pe;
         return e;
     }
-    var Se = Pe();
-    /* harmony default export */    const Oe = /* unused pure expression or super */ null && Se;
+    var Oe = Se();
+    /* harmony default export */    const Ce = /* unused pure expression or super */ null && Oe;
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
-    function Ce(e) {
+    function Ee(e) {
         "@babel/helpers - typeof";
-        return Ce = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ee = "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;
-        }, Ce(e);
+        }, Ee(e);
     }
-    function Ee(e, t) {
+    function je(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -794,46 +797,46 @@
         }
         return r;
     }
-    function je(e) {
+    function xe(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Ee(Object(r), !0).forEach((function(t) {
-                xe(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ee(Object(r)).forEach((function(t) {
+            t % 2 ? je(Object(r), !0).forEach((function(t) {
+                ke(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : je(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function xe(e, t, r) {
-        return (t = ke(t)) in e ? Object.defineProperty(e, t, {
+    function ke(e, t, r) {
+        return (t = Ae(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function ke(e) {
-        var t = Ae(e, "string");
-        return "symbol" == Ce(t) ? t : t + "";
+    function Ae(e) {
+        var t = Te(e, "string");
+        return "symbol" == Ee(t) ? t : t + "";
     }
-    function Ae(e, t) {
-        if ("object" != Ce(e) || !e) return e;
+    function Te(e, t) {
+        if ("object" != Ee(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != Ce(n)) return n;
+            if ("object" != Ee(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     // Checks if browser is Safari
-        function Te() {
+        function Re() {
         return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     }
     // Formats return value to DOMRect
-        function Re(e) {
-        return je(je({}, e), {}, {
+        function Me(e) {
+        return xe(xe({}, e), {}, {
             top: e.y,
             left: e.x,
             right: e.x + e.width,
@@ -847,18 +850,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 Me(e, t) {
+ */    function We(e, t) {
         var r, n;
         var o = e.getBoundingClientRect();
-        var a = Te();
+        var a = Re();
         if (!t || !a) {
             return o;
         }
-        var i = Pe();
+        var i = Se();
         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 Re({
+        return Me({
             width: u,
             height: f,
             x: l,
@@ -872,7 +875,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function We(e, t) {
+    function qe(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -885,36 +888,36 @@
         }
     }
     // 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 He = "is deprecated and will be removed in the next major version.";
+    var Ie = 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 Ne = 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 Le = 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 Le(e) {
+    function De(e) {
         "@babel/helpers - typeof";
-        return Le = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return De = "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;
-        }, Le(e);
+        }, De(e);
     }
-    function De() {
-        return De = Object.assign ? Object.assign.bind() : function(e) {
+    function Fe() {
+        return Fe = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -922,9 +925,9 @@
                 }
             }
             return e;
-        }, De.apply(null, arguments);
+        }, Fe.apply(null, arguments);
     }
-    function Fe(e, t) {
+    function $e(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -934,60 +937,60 @@
         }
         return r;
     }
-    function $e(e) {
+    function _e(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[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) {
+            t % 2 ? $e(Object(r), !0).forEach((function(t) {
+                Ve(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : $e(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function _e(e, t, r) {
-        return (t = Ve(t)) in e ? Object.defineProperty(e, t, {
+    function Ve(e, t, r) {
+        return (t = ze(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function Ve(e) {
-        var t = ze(e, "string");
-        return "symbol" == Le(t) ? t : t + "";
+    function ze(e) {
+        var t = Ke(e, "string");
+        return "symbol" == De(t) ? t : t + "";
     }
-    function ze(e, t) {
-        if ("object" != Le(e) || !e) return e;
+    function Ke(e, t) {
+        if ("object" != De(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != Le(n)) return n;
+            if ("object" != De(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function Ke(e, t) {
-        return Ge(e) || Ue(e, t) || Be(e, t) || Xe();
+    function Xe(e, t) {
+        return Je(e) || Ge(e, t) || Ye(e, t) || Be();
     }
-    function Xe() {
+    function Be() {
         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 Be(e, t) {
+    function Ye(e, t) {
         if (e) {
-            if ("string" == typeof e) return Ye(e, t);
+            if ("string" == typeof e) return Ue(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) ? Ye(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) ? Ue(e, t) : void 0;
         }
     }
-    function Ye(e, t) {
+    function Ue(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 Ue(e, t) {
+    function Ge(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;
@@ -1009,12 +1012,12 @@
             return l;
         }
     }
-    function Ge(e) {
+    function Je(e) {
         if (Array.isArray(e)) return e;
     }
-    function Je(e, t) {
+    function Qe(e, t) {
         if (null == e) return {};
-        var r, n, o = Qe(e, t);
+        var r, n, o = Ze(e, t);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
@@ -1023,7 +1026,7 @@
         }
         return o;
     }
-    function Qe(e, t) {
+    function Ze(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -1038,8 +1041,8 @@
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var Ze = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
-    var et = {
+    /** @public */    var et = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
+    var tt = {
         align: O().oneOf([ "center", "edge", "end" ]),
         anchor: O().object,
         animation: O().bool,
@@ -1048,7 +1051,7 @@
         autoCloseWhenOffScreen: O().bool,
         canCoverAnchor: O().bool,
         children: O().oneOfType([ O().node, O().func ]),
-        closeReasons: O().arrayOf(O().oneOf(Ze)),
+        closeReasons: O().arrayOf(O().oneOf(et)),
         defaultPlacement: O().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
         elementRef: O().oneOfType([ O().func, O().object ]),
         id: O().string,
@@ -1066,11 +1069,11 @@
         takeFocus: O().bool,
         splunkTheme: O().object
     };
-    var tt = {
+    var rt = {
         passive: false,
         capture: true
     };
-    function rt(e, t) {
+    function nt(e, t) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
         return !!e && !!t && u()(e, (function(e, n) {
             if (h()(e)) {
@@ -1079,7 +1082,7 @@
             return t[n] === e;
         }));
     }
-    function nt(e) {
+    function ot(e) {
         var t = e.anchorPos, r = e.borderRadius, n = e.placement, o = e.outerContainerStyle, i = e.outerContainerEl;
         if (n === "misaligned") {
             return [ {
@@ -1104,22 +1107,22 @@
         var m = a()(h, d, v);
         var b = {
             left: {
-                translateX: G / 2,
+                translateX: (G + J) / 2,
                 translateY: p,
                 rotate: 90
             },
             right: {
-                translateX: -G / 2,
+                translateX: -(G + J) / 2,
                 translateY: p,
                 rotate: -90
             },
             above: {
-                translateX: m,
+                translateX: m - J / 2,
                 translateY: 0,
                 rotate: 180
             },
             below: {
-                translateX: m,
+                translateX: m - J / 2,
                 translateY: 0,
                 rotate: 0
             }
@@ -1140,12 +1143,12 @@
             above: "left",
             below: "left"
         };
-        l[w[n]] = "50%";
+        l[w[n]] = "calc(50% - ".concat(J, "px/2)");
         return [ l, g ];
     }
-    function ot(e) {
+    function at(e) {
         var t = e.anchorEl, r = e.offsets, n = r === void 0 ? false : r, o = e.pointTo;
-        var a = Me(t, n);
+        var a = We(t, n);
         var i = {
             // these are rounded to avoid causing visual regressions
             // they were previously clientWidth and clientHeight which were already rounded
@@ -1166,11 +1169,11 @@
         i.center = c ? i.top : a.top + (i.bottom - a.top) / 2;
         return i;
     }
-    function at(e) {
+    function it(e) {
         return e !== window && e !== window.document;
     }
-    function it(e, t) {
-        var r = Pe();
+    function lt(e, t) {
+        var r = Se();
         if (e.top < 0 || e.top > r.innerHeight || e.left < 0 || e.left > r.innerWidth) {
             return true;
         }
@@ -1181,29 +1184,29 @@
         }
         return false;
     }
-    function lt(e, t) {
+    function ct(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 ct = {};
+    var ut = {};
     /**
  * `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 ut(e) {
+ */    function ft(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 ? 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" ]);
+        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 ? ut : 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 ? et : 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 = Qe(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
-                Ne({
+                Le({
             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];
+        var U = (0, r.useState)(L), J = Xe(U, 2), Z = J[0], ne = J[1];
+        var oe = (0, r.useState)(false), ae = Xe(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
@@ -1215,8 +1218,8 @@
         }
         // this is a single state object because all these properties
         // are updated at the same time by setPlacement
-                var ce = (0, r.useState)({}), ue = Ke(ce, 2), fe = ue[0], se = ue[1];
-        var de = (0, r.useRef)(true);
+                var ce = (0, r.useState)({}), ue = Xe(ce, 2), fe = ue[0], se = ue[1];
+        var pe = (0, r.useRef)(true);
         var he = (0, r.useRef)(false);
         var me = (0, r.useRef)(null);
         var be = (0, r.useRef)(null);
@@ -1225,8 +1228,8 @@
             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: lt(fe.maxHeight, h),
-            maxWidth: lt(fe.maxWidth, h),
+            maxHeight: ct(fe.maxHeight, h),
+            maxWidth: ct(fe.maxWidth, h),
             toggleId: B
         };
         var we = (0, r.useMemo)((function() {
@@ -1236,11 +1239,11 @@
                 opacity: 1
             };
         }), [ 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 Pe = Se();
+        var Oe = L || Z;
+        var Ce = (0, r.useContext)(T()) || Pe;
+        var Ee = Ce !== Pe;
+        var je = (0, r.useContext)(de), xe = je.allowPropagation, ke = je.hideArrow;
         var Ae = q !== null && q !== void 0 ? q : ke;
         (0, r.useEffect)((function() {
             if (false) {}
@@ -1251,7 +1254,7 @@
             }
         }), [ E, L, N ]);
         var Re = (0, r.useCallback)((function(e, t) {
-            var r = it(e, t);
+            var r = lt(e, t);
             if (r) {
                 Te({
                     reason: "offScreen"
@@ -1259,13 +1262,13 @@
             }
             return r;
         }), [ Te ]);
-        var Me = M()(), qe = Me.borderRadius, He = Me.spacingXSmall;
-        var Ie = parseInt(qe, 10);
-        var Le = parseInt(He, 10);
+        var Me = M()(), We = Me.borderRadius, He = Me.spacingXSmall;
+        var Ie = parseInt(We, 10);
+        var Ne = parseInt(He, 10);
         // this is intentionally smaller when the arrow is hidden to address SUI-5452
-                var Fe = Ae ? Le : G;
-        // do not call this directly - use setPlacement (the throttled version) instead
-                var _e = (0, r.useCallback)((function(e) {
+                var De = Ae ? Ne : G;
+        // use caution when calling this directly - prefer setPlacement (the throttled version) instead
+                var $e = (0, r.useCallback)((function(e) {
             se((function(t) {
                 var r, n;
                 // If these conditions are not met, we cannot set the popover.
@@ -1275,16 +1278,16 @@
                     // }
                     return t;
                 }
-                var o = ot({
+                var o = at({
                     anchorEl: c,
                     pointTo: F
                 });
-                var a = ot({
+                var a = at({
                     anchorEl: c,
                     offsets: true,
                     pointTo: F
                 });
-                var l = at(Ce) ? ot({
+                var l = it(Ce) ? at({
                     anchorEl: Ce,
                     pointTo: F
                 }) : undefined;
@@ -1301,27 +1304,27 @@
                     defaultPlacement: A,
                     repositionMode: _,
                     outerContainerEl: ge.current,
-                    padding: Fe,
-                    windowWidth: Se.innerWidth,
-                    windowHeight: Se.innerHeight
+                    padding: De,
+                    windowWidth: Pe.innerWidth,
+                    windowHeight: Pe.innerHeight
                 }), f = u.placement, s = u.outerContainerStyle, p = u.maxHeight, v = u.maxWidth;
-                var d = rt(a, t.anchorPos) && rt(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
+                var d = nt(a, t.anchorPos) && nt(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
                 var h = true;
                 var m = {};
                 var b;
                 if (me.current) {
-                    var P = nt({
+                    var P = ot({
                         anchorPos: a,
                         borderRadius: Ie,
                         outerContainerStyle: s,
                         placement: f,
                         outerContainerEl: ge.current
                     });
-                    var S = Ke(P, 2);
+                    var S = Xe(P, 2);
                     m = S[0];
                     b = S[1];
                 }
-                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 : {});
+                h = nt(y()(m, "transform"), y()(t.arrowStyle, "transform")) && nt((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;
@@ -1336,27 +1339,29 @@
                     maxWidth: v
                 };
             }));
-        }), [ i, c, g, Ie, Fe, w, Re, A, L, F, _, Ce, Se.innerHeight, Se.innerWidth ]);
+        }), [ i, c, g, Ie, De, w, Re, A, L, F, _, Ce, Pe.innerHeight, Pe.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 Ve = (0, r.useMemo)((function() {
-            return P()(_e.bind(null, true), 0);
-        }), [ _e ]);
+            return P()($e.bind(null, true), 0);
+        }), [ $e ]);
         var ze = (0, r.useMemo)((function() {
-            return P()(_e.bind(null, true), 0);
-        }), [ _e ]);
-        var Xe = (0, r.useMemo)((function() {
-            return P()(_e, 0, {
+            return P()($e.bind(null, true), 0);
+        }), [ $e ]);
+        var Ke = (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() {
+                (0, r.useLayoutEffect)((function() {
             if (!be.current) {
                 return;
             }
-            if (L || re) {
-                Xe();
+            if (L || Z) {
+                // SUI-8062: using the unthrottled version of setPlacement() here because to avoid a flash of incorrect placement
+                // we're doing this inside useLayoutEffect() so we're depending on React to batch these updates together
+                $e();
             }
         }));
         (0, r.useEffect)((function() {
@@ -1368,12 +1373,12 @@
         (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;
+            pe.current = true;
             return function() {
-                Xe.cancel();
+                Ke.cancel();
                 Ve.cancel();
                 ze.cancel();
-                de.current = false;
+                pe.current = false;
             };
             // no dependencies here since this is equivalent to componentDidMount and componentWillUnmount
             // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1384,23 +1389,23 @@
             target: Ce,
             eventType: "scroll",
             listener: Ve,
-            options: tt,
+            options: rt,
             key: "eventListener"
         }),  n().createElement(j(), {
-            target: Se,
+            target: Pe,
             eventType: "resize",
-            listener: Xe,
+            listener: Ke,
             key: "eventListenerOnWindowResize"
         }),  n().createElement(j(), {
-            target: Se,
+            target: Pe,
             eventType: "scroll",
             listener: ze,
-            options: tt,
+            options: rt,
             key: "eventListenerOnWindowScroll"
         })) : null;
         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) {
+            if (pe.current) {
                 ne(false);
             }
         }), []);
@@ -1409,13 +1414,13 @@
             if (e && X) {
                 l()(W.takeFocus, e);
             }
-            We(R, e);
+            qe(R, e);
         }), [ R, X ]);
         var Ge = (0, r.useCallback)((function(e) {
             ge.current = e;
-            We(D, e);
+            qe(D, e);
         }), [ D ]);
-        var Qe = (0, r.useCallback)((function(e) {
+        var Je = (0, r.useCallback)((function(e) {
             if (be.current) {
                 if (z) {
                     (0, W.handleTab)(be.current, e);
@@ -1433,25 +1438,25 @@
                 }
             }
         }), [ Te, z ]);
-        var et = (0, r.useCallback)((function(e) {
+        var Ze = (0, r.useCallback)((function(e) {
             if (!xe) {
                 e.stopPropagation();
             }
         }), [ xe ]);
-        var ut = (0, r.useMemo)((function() {
+        var tt = (0, r.useMemo)((function() {
             return {
                 opacity: f ? 0 : 1
             };
         }), [ f ]);
         var ft = (0, r.useMemo)((function() {
-            return $e({
+            return _e({
                 tension: 300,
                 friction: 20,
                 clamp: true
             }, p);
         }), [ p ]);
         var st = (0, C.useAnimation)({
-            from: ut,
+            from: tt,
             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).
@@ -1459,7 +1464,7 @@
             onRest: Ye
         });
         var pt = (0, r.useMemo)((function() {
-            return $e($e({}, fe.outerContainerStyle), st);
+            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) {
@@ -1473,39 +1478,39 @@
             open: Oe,
             onRequestClose: Te,
             key: "Layer"
-        }, Oe && be.current && H &&  n().createElement(pe, {
+        }, Oe && be.current && H &&  n().createElement(ve, {
             anchorRect: fe.anchorPos,
             popoverEl: be.current,
             popoverPlacement: fe.placement,
             ref: H
-        }), Oe &&  n().createElement(J, {
+        }), Oe &&  n().createElement(Q, {
             "data-test": "outer-popover",
             style: pt,
             ref: Ge
-        },  n().createElement(Z, De({
+        },  n().createElement(ee, Fe({
             $appearance: h,
-            $boxPadding: Fe,
+            $boxPadding: De,
             $open: L,
             "data-test": "popover",
             ref: Ue,
             id: I,
-            onKeyDown: Qe
-        }, Y),  n().createElement(n().Fragment, null, h === "none" && dt, h !== "none" && !Ae &&  n().createElement(te, {
+            onKeyDown: Je
+        }, Y),  n().createElement(n().Fragment, null, h === "none" && dt, h !== "none" && !Ae &&  n().createElement(re, {
             "data-test": "popover-arrow",
             $appearance: h,
-            onClick: et,
+            onClick: Ze,
             ref: me,
             style: fe.arrowStyle
-        }), h !== "none" &&  n().createElement(ee, {
+        }), h !== "none" &&  n().createElement(te, {
             $appearance: h,
-            onClick: et
+            onClick: Ze
         }, dt))))));
     }
-    ut.propTypes = et;
-    ut.possibleCloseReasons = Ze;
-    /* harmony default export */    const ft = ut;
+    ft.propTypes = tt;
+    ft.possibleCloseReasons = et;
+    /* harmony default export */    const st = ft;
     // CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
-    var st =  (0, r.createContext)({});
+    var pt =  (0, r.createContext)({});
     // CONCATENATED MODULE: ./src/Popover/index.ts
     module.exports = t;
     /******/})();