@splunk/react-ui 5.4.0 → 5.6.0

package/Popover.js

@@ -100,10 +100,10 @@
     const S = require("prop-types");
     var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
-    const C = require("@splunk/react-ui/Animation");
+    const E = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const E = require("@splunk/react-ui/EventListener");
-    var j =  e.n(E);
+    const C = require("@splunk/react-ui/EventListener");
+    var j =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
     const x = require("@splunk/react-ui/Layer");
     var k =  e.n(x);
@@ -111,20 +111,20 @@
     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);
+    const M = require("@splunk/themes/useSplunkTheme");
+    var R =  e.n(M);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
     const W = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: ./src/Popover/getPlacement.ts
-    function q(e) {
+    function H(e) {
         "@babel/helpers - typeof";
-        return q = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return H = "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;
-        }, q(e);
+        }, H(e);
     }
-    function H(e, t) {
+    function q(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -137,9 +137,9 @@
     function I(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? H(Object(r), !0).forEach((function(t) {
+            t % 2 ? q(Object(r), !0).forEach((function(t) {
                 N(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : H(Object(r)).forEach((function(t) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : q(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
@@ -155,14 +155,14 @@
     }
     function L(e) {
         var t = D(e, "string");
-        return "symbol" == q(t) ? t : t + "";
+        return "symbol" == H(t) ? t : t + "";
     }
     function D(e, t) {
-        if ("object" != q(e) || !e) return e;
+        if ("object" != H(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != q(n)) return n;
+            if ("object" != H(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
@@ -259,8 +259,8 @@
         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 E = r.bottom + i.offsetHeight < u;
+        var C = r.left - i.offsetWidth > 0;
         var j = r.right + i.offsetWidth < f;
         var x = r.top * .7 > u - r.bottom;
         var k = $({
@@ -281,7 +281,7 @@
             outerContainerEl: i,
             padding: l
         }) < 0;
-        var R = z({
+        var M = z({
             align: t,
             anchorPos: r,
             outerContainerEl: i,
@@ -290,7 +290,7 @@
         // Handle each of the four placement options individually.
                 if (S === "above") {
             if (!O && v) {
-                if (C) {
+                if (E) {
                     return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
@@ -300,7 +300,7 @@
                         placement: "right"
                     }));
                 }
-                if (p && E) {
+                if (p && C) {
                     return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
@@ -327,7 +327,7 @@
             }
         }
         if (S === "below") {
-            if (!C && v) {
+            if (!E && v) {
                 if (O && x) {
                     return K(I(I({}, e), {}, {
                         placement: "above"
@@ -338,7 +338,7 @@
                         placement: "right"
                     }));
                 }
-                if (p && E) {
+                if (p && C) {
                     return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
@@ -361,13 +361,13 @@
             }
         }
         if (S === "left") {
-            if (!E && v) {
+            if (!C && v) {
                 if (j) {
                     return K(I(I({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && C) {
+                if (p && E) {
                     return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
@@ -384,7 +384,7 @@
             }
             if (T) {
                 b = 0;
-            } else if (R) {
+            } else if (M) {
                 b = Math.max(u - i.offsetHeight, 0);
             }
             if (!o) {
@@ -393,12 +393,12 @@
         }
         if (S === "right") {
             if (!j && v) {
-                if (E) {
+                if (C) {
                     return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
                 }
-                if (p && C) {
+                if (p && E) {
                     return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
@@ -415,7 +415,7 @@
             }
             if (T) {
                 b = 0;
-            } else if (R) {
+            } else if (M) {
                 b = Math.max(u - i.offsetHeight, 0);
             }
             if (!o) {
@@ -584,10 +584,10 @@
                 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(P, " , ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(O, "\n                        L ").concat(C, "\n                        S ").concat(O, " , ").concat(w, "\n                    ");
+                var E = "".concat(g, " ").concat(m + r.height);
+                var C = "\n                        M ".concat(y, "\n                        S ").concat(P, " , ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(O, "\n                        L ").concat(E, "\n                        S ").concat(O, " , ").concat(w, "\n                    ");
                 return {
-                    hitAreaPath: E,
+                    hitAreaPath: C,
                     hitAreaStyle: {
                         left: r.left,
                         top: a.top,
@@ -777,15 +777,15 @@
         return e;
     }
     var Oe = Se();
-    /* harmony default export */    const Ce = /* unused pure expression or super */ null && Oe;
+    /* harmony default export */    const Ee = /* unused pure expression or super */ null && Oe;
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
-    function Ee(e) {
+    function Ce(e) {
         "@babel/helpers - typeof";
-        return Ee = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ce = "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;
-        }, Ee(e);
+        }, Ce(e);
     }
     function je(e, t) {
         var r = Object.keys(e);
@@ -818,24 +818,24 @@
     }
     function Ae(e) {
         var t = Te(e, "string");
-        return "symbol" == Ee(t) ? t : t + "";
+        return "symbol" == Ce(t) ? t : t + "";
     }
     function Te(e, t) {
-        if ("object" != Ee(e) || !e) return e;
+        if ("object" != Ce(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != Ee(n)) return n;
+            if ("object" != Ce(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     // Checks if browser is Safari
-        function Re() {
+        function Me() {
         return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     }
     // Formats return value to DOMRect
-        function Me(e) {
+        function Re(e) {
         return xe(xe({}, e), {}, {
             top: e.y,
             left: e.x,
@@ -853,7 +853,7 @@
  */    function We(e, t) {
         var r, n;
         var o = e.getBoundingClientRect();
-        var a = Re();
+        var a = Me();
         if (!t || !a) {
             return o;
         }
@@ -861,7 +861,7 @@
         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 Me({
+        return Re({
             width: u,
             height: f,
             x: l,
@@ -875,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 qe(e, t) {
+    function He(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -888,7 +888,7 @@
         }
     }
     // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
-    var He = "is deprecated and will be removed in the next major version.";
+    var qe = "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() {
@@ -1197,7 +1197,7 @@
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
  */    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 ? 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" ]);
+        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, C = O === void 0 ? et : O, x = e.defaultPlacement, A = x === void 0 ? "below" : x, M = e.elementRef, H = e.hideArrow, q = 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
                 Le({
             componentName: "Popover",
@@ -1241,19 +1241,19 @@
         }), [ f, L ]);
         var Pe = Se();
         var Oe = L || Z;
-        var Ce = (0, r.useContext)(T()) || Pe;
-        var Ee = Ce !== Pe;
+        var Ee = (0, r.useContext)(T()) || Pe;
+        var Ce = Ee !== Pe;
         var je = (0, r.useContext)(de), xe = je.allowPropagation, ke = je.hideArrow;
-        var Ae = q !== null && q !== void 0 ? q : ke;
+        var Ae = H !== null && H !== void 0 ? H : ke;
         (0, r.useEffect)((function() {
             if (false) {}
         }), [ c ]);
         var Te = (0, r.useCallback)((function(e) {
-            if (L && (E === null || E === void 0 ? void 0 : E.includes(e.reason))) {
+            if (L && (C === null || C === void 0 ? void 0 : C.includes(e.reason))) {
                 N === null || N === void 0 ? void 0 : N(e);
             }
-        }), [ E, L, N ]);
-        var Re = (0, r.useCallback)((function(e, t) {
+        }), [ C, L, N ]);
+        var Me = (0, r.useCallback)((function(e, t) {
             var r = lt(e, t);
             if (r) {
                 Te({
@@ -1262,12 +1262,12 @@
             }
             return r;
         }), [ Te ]);
-        var Me = M()(), We = Me.borderRadius, He = Me.spacingXSmall;
+        var Re = R()(), We = Re.borderRadius, qe = Re.spacingXSmall;
         var Ie = parseInt(We, 10);
-        var Ne = parseInt(He, 10);
+        var Ne = parseInt(qe, 10);
         // this is intentionally smaller when the arrow is hidden to address SUI-5452
                 var De = Ae ? Ne : G;
-        // use caution when calling this directly - prefer setPlacement (the throttled version) instead
+        // do not call this directly - use setPlacement (the throttled version) instead
                 var $e = (0, r.useCallback)((function(e) {
             se((function(t) {
                 var r, n;
@@ -1287,12 +1287,12 @@
                     offsets: true,
                     pointTo: F
                 });
-                var l = it(Ce) ? at({
-                    anchorEl: Ce,
+                var l = it(Ee) ? at({
+                    anchorEl: Ee,
                     pointTo: F
                 }) : undefined;
                 if (e && g) {
-                    if (Re(o, l)) {
+                    if (Me(o, l)) {
                         return t;
                     }
                 }
@@ -1339,7 +1339,7 @@
                     maxWidth: v
                 };
             }));
-        }), [ i, c, g, Ie, De, w, Re, A, L, F, _, Ce, Pe.innerHeight, Pe.innerWidth ]);
+        }), [ i, c, g, Ie, De, w, Me, A, L, F, _, Ee, 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() {
@@ -1354,14 +1354,12 @@
             });
         }), [ $e ]);
         // this needs to run on every render - equivalent to componentDidUpdate
-                (0, r.useLayoutEffect)((function() {
+                (0, r.useEffect)((function() {
             if (!be.current) {
                 return;
             }
             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();
+                Ke();
             }
         }));
         (0, r.useEffect)((function() {
@@ -1385,8 +1383,8 @@
                 }), []);
         // EventListeners only need to be rendered when open,
         // otherwise leads to negative performance impacts
-                var Be = Oe ?  n().createElement(n().Fragment, null, Ee &&  n().createElement(j(), {
-            target: Ce,
+                var Be = Oe ?  n().createElement(n().Fragment, null, Ce &&  n().createElement(j(), {
+            target: Ee,
             eventType: "scroll",
             listener: Ve,
             options: rt,
@@ -1414,23 +1412,23 @@
             if (e && X) {
                 l()(W.takeFocus, e);
             }
-            qe(R, e);
-        }), [ R, X ]);
+            He(M, e);
+        }), [ M, X ]);
         var Ge = (0, r.useCallback)((function(e) {
             ge.current = e;
-            qe(D, e);
+            He(D, e);
         }), [ D ]);
         var Je = (0, r.useCallback)((function(e) {
             if (be.current) {
                 if (z) {
-                    (0, W.handleTab)(be.current, e);
-                } else if ((0, W.isTabKey)(e)) {
+                    (0, W.handleTab)(be.current, e.nativeEvent);
+                } else if ((0, W.isTabKey)(e.nativeEvent)) {
                     var t = (0, W.getSortedTabbableElements)(be.current);
                     if (t.length > 0) {
                         var r = e.shiftKey ? t[0] : t[t.length - 1];
-                        if (r === e.target) {
+                        if (e.target instanceof HTMLElement && r === e.target) {
                             Te({
-                                event: e,
+                                event: e.nativeEvent,
                                 reason: "tabKey"
                             });
                         }
@@ -1455,7 +1453,7 @@
                 clamp: true
             }, p);
         }), [ p ]);
-        var st = (0, C.useAnimation)({
+        var st = (0, E.useAnimation)({
             from: tt,
             to: we,
             // Setting clamp to true will stop animating at the point it hit's it's goal value.
@@ -1467,10 +1465,10 @@
             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 v()(C === null || C === void 0 ? void 0 : C.filter((function(e) {
                 return e !== "offScreen";
             })), k().possibleCloseReasons);
-        }), [ E ]);
+        }), [ C ]);
         var dt = b()(S) ? S(ye) : S;
         
         return n().createElement(n().Fragment, null, Be,  n().createElement(k(), {
@@ -1478,11 +1476,11 @@
             open: Oe,
             onRequestClose: Te,
             key: "Layer"
-        }, Oe && be.current && H &&  n().createElement(ve, {
+        }, Oe && be.current && q &&  n().createElement(ve, {
             anchorRect: fe.anchorPos,
             popoverEl: be.current,
             popoverPlacement: fe.placement,
-            ref: H
+            ref: q
         }), Oe &&  n().createElement(Q, {
             "data-test": "outer-popover",
             style: pt,