@splunk/react-ui 5.2.0 → 5.4.0

package/Tooltip.js

@@ -294,6 +294,10 @@
         onRequestOpen: i().func,
         open: i().bool,
         openDelay: i().oneOfType([ i().oneOf([ "primary", "secondary" ]), i().number ]),
+        pointTo: i().shape({
+            x: i().number,
+            y: i().number
+        }),
         /** @private */
         prepend: i().bool,
         renderAnchor: i().func
@@ -307,20 +311,20 @@
  * The Tooltip component wraps arbitrary content to be displayed when the target element is hovered
  * or focused.
  */    function X(e) {
-        var n = e.appearance, o = e.append, l = e.children, i = e.closeDelay, u = i === void 0 ? 300 : i, s = e.closeWhen, c = s === void 0 ? "default" : s, p = e.content, d = e.contentRelationship, g = e.defaultPlacement, O = g === void 0 ? "above" : g, h = e.elementRef, S = e.inline, C = S === void 0 ? true : S, L = e.onRequestClose, I = e.onRequestOpen, _ = e.open, D = e.openDelay, M = D === void 0 ? "primary" : D, x = e.renderAnchor, B = e.prepend, H = W(e, [ "appearance", "append", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor", "prepend" ]);
+        var n = e.appearance, o = e.append, l = e.children, i = e.closeDelay, u = i === void 0 ? 300 : i, s = e.closeWhen, c = s === void 0 ? "default" : s, p = e.content, d = e.contentRelationship, g = e.defaultPlacement, O = g === void 0 ? "above" : g, h = e.elementRef, S = e.inline, C = S === void 0 ? true : S, L = e.onRequestClose, I = e.onRequestOpen, _ = e.open, D = e.openDelay, M = D === void 0 ? "primary" : D, x = e.renderAnchor, B = e.pointTo, H = e.prepend, F = W(e, [ "appearance", "append", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor", "pointTo", "prepend" ]);
         // @docs-props-type TooltipPropsBase
-                var F = (0, r.useState)(false), K = N(F, 2), V = K[0], U = K[1];
-        var $ = (0, r.useState)(null), z = N($, 2), X = z[0], Y = z[1];
-        var Z = (0, r.useState)(null), ee = N(Z, 2), ne = ee[0], re = ee[1];
-        var te = (0, r.useState)(null), oe = N(te, 2), ae = oe[0], le = oe[1];
-        var ie = (0, r.useState)(null), ue = N(ie, 2), se = ue[0], ce = ue[1];
-        var fe = (0, r.useState)((function() {
+                var K = (0, r.useState)(false), V = N(K, 2), U = V[0], $ = V[1];
+        var z = (0, r.useState)(null), X = N(z, 2), Y = X[0], Z = X[1];
+        var ee = (0, r.useState)(null), ne = N(ee, 2), re = ne[0], te = ne[1];
+        var oe = (0, r.useState)(null), ae = N(oe, 2), le = ae[0], ie = ae[1];
+        var ue = (0, r.useState)(null), se = N(ue, 2), ce = se[0], fe = se[1];
+        var pe = (0, r.useState)((function() {
             return {
                 ariaId: (0, y.createDOMID)("aria-id"),
                 popoverId: (0, y.createDOMID)("popover")
             };
-        })), pe = N(fe, 1), ve = pe[0], de = ve.ariaId, me = ve.popoverId;
-        var be = m()({
+        })), ve = N(pe, 1), de = ve[0], me = de.ariaId, be = de.popoverId;
+        var ye = m()({
             componentName: "Tooltip",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -328,189 +332,189 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var ye = (0, r.useMemo)((function() {
+        var ge = (0, r.useMemo)((function() {
             var e = !!p;
-            return !!X && be ? _ : e && V;
-        }), [ X, p, be, V, _ ]);
-        var ge = (0, r.useRef)();
+            return !!Y && ye ? _ : e && U;
+        }), [ Y, p, ye, U, _ ]);
+        var Oe = (0, r.useRef)();
         (0, r.useEffect)((function() {
             return function() {
-                if (ge.current !== undefined) {
-                    clearTimeout(ge.current);
+                if (Oe.current !== undefined) {
+                    clearTimeout(Oe.current);
                 }
             };
         }), []);
-        var Oe = (0, r.useCallback)((function(e, n) {
-            if (ge.current !== undefined) {
-                clearTimeout(ge.current);
+        var he = (0, r.useCallback)((function(e, n) {
+            if (Oe.current !== undefined) {
+                clearTimeout(Oe.current);
             }
-            ge.current = setTimeout((function() {
-                if (!be) {
-                    U(false);
+            Oe.current = setTimeout((function() {
+                if (!ye) {
+                    $(false);
                 }
                 L === null || L === void 0 ? void 0 : L(e, n);
             }), u);
-        }), [ u, be, L ]);
-        var he = (0, r.useCallback)((function(e, n) {
+        }), [ u, ye, L ]);
+        var Se = (0, r.useCallback)((function(e, n) {
             var r = M === "primary" ? 300 : 750;
             var t = typeof M === "number" ? M : r;
-            if (ge.current !== undefined) {
-                clearTimeout(ge.current);
+            if (Oe.current !== undefined) {
+                clearTimeout(Oe.current);
             }
-            ge.current = setTimeout((function() {
-                var r = ye;
-                if (!be) {
-                    U(true);
+            Oe.current = setTimeout((function() {
+                var r = ge;
+                if (!ye) {
+                    $(true);
                 }
                 if (!r) {
                     I === null || I === void 0 ? void 0 : I(e, n);
                 }
             }), t);
-        }), [ be, ye, I, M ]);
-        var Se = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ ye, ge, I, M ]);
+        var Ce = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterToggle"
             });
-        }), [ he ]);
-        var Ce = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ Se ]);
+        var ke = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterPopover"
             });
-        }), [ he ]);
-        var ke = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ Se ]);
+        var Ee = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterHitArea"
             });
-        }), [ he ]);
-        var Ee = (0, r.useCallback)((function(e) {
+        }), [ Se ]);
+        var Te = (0, r.useCallback)((function(e) {
             var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "mouseLeaveToggle";
-            if (e.relatedTarget == null || e.relatedTarget !== ae && e.relatedTarget !== se) {
-                Oe(e, {
+            if (e.relatedTarget == null || e.relatedTarget !== le && e.relatedTarget !== ce) {
+                he(e, {
                     reason: n
                 });
             }
-        }), [ Oe, ae, se ]);
-        var Te = (0, r.useCallback)((function(e) {
-            Ee(e, "mouseLeavePopover");
-        }), [ Ee ]);
+        }), [ he, le, ce ]);
         var Pe = (0, r.useCallback)((function(e) {
-            Ee(e, "mouseLeaveHitArea");
-        }), [ Ee ]);
+            Te(e, "mouseLeavePopover");
+        }), [ Te ]);
         var je = (0, r.useCallback)((function(e) {
-            Oe(e, {
+            Te(e, "mouseLeaveHitArea");
+        }), [ Te ]);
+        var we = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "mouseStopHitArea"
             });
-        }), [ Oe ]);
-        var we = a()(je, 10);
-        var Re = (0, r.useCallback)((function(e) {
+        }), [ he ]);
+        var Re = a()(we, 10);
+        var Le = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
-            if (e) {
-                e.addEventListener("mouseenter", Se);
-                e.addEventListener("mouseleave", Ee);
-            } else if (X) {
-                X.removeEventListener("mouseenter", Se);
-                X.removeEventListener("mouseleave", Ee);
-            }
-            Y(e);
-        }), [ X, Se, Ee ]);
-        var Le = (0, r.useCallback)((function(e) {
             if (e) {
                 e.addEventListener("mouseenter", Ce);
                 e.addEventListener("mouseleave", Te);
-            } else if (ae) {
-                ae.removeEventListener("mouseenter", Ce);
-                ae.removeEventListener("mouseleave", Te);
+            } else if (Y) {
+                Y.removeEventListener("mouseenter", Ce);
+                Y.removeEventListener("mouseleave", Te);
             }
-            le(e);
-        }), [ Ce, Te, ae ]);
+            Z(e);
+        }), [ Y, Ce, Te ]);
         var qe = (0, r.useCallback)((function(e) {
-            ce(e);
-        }), []);
+            if (e) {
+                e.addEventListener("mouseenter", ke);
+                e.addEventListener("mouseleave", Pe);
+            } else if (le) {
+                le.removeEventListener("mouseenter", ke);
+                le.removeEventListener("mouseleave", Pe);
+            }
+            ie(e);
+        }), [ ke, Pe, le ]);
         var Ie = (0, r.useCallback)((function(e) {
+            fe(e);
+        }), []);
+        var Ae = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
             if (e) {
-                e.addEventListener("mouseenter", ke);
-                e.addEventListener("mousemove", we);
-                e.addEventListener("mouseleave", Pe);
-            } else if (ne) {
-                ne.removeEventListener("mouseenter", ke);
-                ne.removeEventListener("mousemove", we);
-                ne.removeEventListener("mouseleave", Pe);
+                e.addEventListener("mouseenter", Ee);
+                e.addEventListener("mousemove", Re);
+                e.addEventListener("mouseleave", je);
+            } else if (re) {
+                re.removeEventListener("mouseenter", Ee);
+                re.removeEventListener("mousemove", Re);
+                re.removeEventListener("mouseleave", je);
             }
-            re(e);
-        }), [ ke, Pe, we, ne ]);
-        var Ae = (0, r.useCallback)((function(e) {
+            te(e);
+        }), [ Ee, je, Re, re ]);
+        var _e = (0, r.useCallback)((function(e) {
             if (c !== "notOnClick") {
-                Oe(e, {
+                he(e, {
                     reason: "toggleClick"
                 });
             }
-        }), [ c, Oe ]);
-        var _e = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ c, he ]);
+        var De = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "focusToggle"
             });
-        }), [ he ]);
-        var De = (0, r.useCallback)((function(e) {
-            Oe(e, {
+        }), [ Se ]);
+        var Me = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "blurToggle"
             });
-        }), [ Oe ]);
-        var Me = (0, r.useCallback)((function(e) {
-            Oe(null, e);
-        }), [ Oe ]);
+        }), [ he ]);
         var Ne = (0, r.useCallback)((function(e) {
-            Re(e);
+            he(null, e);
+        }), [ he ]);
+        var xe = (0, r.useCallback)((function(e) {
+            Le(e);
             R(h, e);
-        }), [ h, Re ]);
-        var xe = (0, r.useMemo)((function() {
+        }), [ h, Le ]);
+        var Be = (0, r.useMemo)((function() {
             return {
                 "data-test": "toggle",
-                elementRef: Ne,
-                onBlur: De,
-                onClick: Ae,
-                onFocus: _e
+                elementRef: xe,
+                onBlur: Me,
+                onClick: _e,
+                onFocus: De
             };
-        }), [ De, Ae, _e, Ne ]);
-        var Be = (0, r.useMemo)((function() {
+        }), [ Me, _e, De, xe ]);
+        var He = (0, r.useMemo)((function() {
             return d === "label" ? {
-                "aria-labelledby": de,
-                labelledBy: de
+                "aria-labelledby": me,
+                labelledBy: me
             } : {
-                "aria-describedby": de,
-                describedBy: de
+                "aria-describedby": me,
+                describedBy: me
             };
-        }), [ d, de ]);
-        var He = (0, r.useMemo)((function() {
+        }), [ d, me ]);
+        var Fe = (0, r.useMemo)((function() {
             return {
                 append: o,
-                prepend: B
+                prepend: H
             };
-        }), [ o, B ]);
-        var Fe = (0, r.useMemo)((function() {
-            return A(A(A({}, Be), xe), He);
-        }), [ Be, xe, He ]);
+        }), [ o, H ]);
         var Ke = (0, r.useMemo)((function() {
-            return A(A({}, Be), He);
-        }), [ Be, He ]);
-        var We = (0, r.useCallback)((function() {
-            if (false) {}
-            return x === null || x === void 0 ? void 0 : x(A(A(A({}, Fe), Be), He));
-        }), [ Be, Fe, l, He, x ]);
+            return A(A(A({}, He), Be), Fe);
+        }), [ He, Be, Fe ]);
+        var We = (0, r.useMemo)((function() {
+            return A(A({}, He), Fe);
+        }), [ He, Fe ]);
         var Ve = (0, r.useCallback)((function() {
+            if (false) {}
+            return x === null || x === void 0 ? void 0 : x(A(A(A({}, Ke), He), Fe));
+        }), [ He, Ke, l, Fe, x ]);
+        var Ue = (0, r.useCallback)((function() {
             var e;
             if ( (0, r.isValidElement)(l)) {
-                e =  (0, r.cloneElement)(l, Ke);
+                e =  (0, r.cloneElement)(l, We);
             } else if (l) {
                 e = l;
             } else {
                 e =  t().createElement(w, {
                     appearance: "subtle",
-                    "aria-describedby": de,
+                    "aria-describedby": me,
                     "aria-label": (0, b._)("More info"),
                     icon: Q
                 });
@@ -519,43 +523,44 @@
             
             return t().createElement(n, {
                 "data-test": "toggle",
-                onClick: Ae,
-                onFocus: _e,
-                onBlur: De,
-                ref: Re
+                onClick: _e,
+                onFocus: De,
+                onBlur: Me,
+                ref: Le
             }, e);
-        }), [ l, C, Ae, _e, De, Re, Ke, de ]);
-        var Ue = C ? E : k;
-        var $e = !!p &&  t().createElement(v(), {
+        }), [ l, C, _e, De, Me, Le, We, me ]);
+        var $e = C ? E : k;
+        var ze = !!p &&  t().createElement(v(), {
             "aria-hidden": "true",
-            id: de
+            id: me
         }, p);
-        var ze =  t().createElement(f(), {
+        var Ge =  t().createElement(f(), {
             role: "tooltip",
             align: "center",
-            anchor: X,
+            anchor: Y,
             animationConfig: G,
             appearance: n,
             closeReasons: J,
             defaultPlacement: O,
-            id: me,
-            open: ye,
-            onRequestClose: Me,
-            elementRef: Le,
-            hitAreaRef: Ie,
-            outerRef: qe
+            id: be,
+            open: ge,
+            onRequestClose: Ne,
+            elementRef: qe,
+            hitAreaRef: Ae,
+            outerRef: Ie,
+            pointTo: B
         },  t().createElement(j, null, p));
         if (x) {
             
-            return t().createElement(t().Fragment, null, We(), $e, ze);
+            return t().createElement(t().Fragment, null, Ve(), ze, Ge);
         }
         
-        return t().createElement(Ue, q({
+        return t().createElement($e, q({
             "data-test": "tooltip",
-            "data-test-open": ye,
-            "data-test-popover-id": me,
+            "data-test-open": ge,
+            "data-test-popover-id": be,
             ref: h
-        }, H), Ve(), $e, ze);
+        }, F), Ue(), ze, Ge);
     }
     X.propTypes = z;
     X.possibleOpenReasons = U;