@telefonica/mistica 16.1.0 → 16.2.0

package/dist-es/tooltip.js

@@ -78,31 +78,30 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as n, jsxs as D, Fragment as gt } from "react/jsx-runtime";
-import * as s from "react";
-import { useTheme as bt, useBoundingRect as at, useWindowSize as vt } from "./hooks.js";
-import { Portal as xt } from "./portal.js";
-import { Transition as Mt } from "react-transition-group";
-import { content as Et, CONTENT_MIN_WIDTH as St, container as Ot, tooltipTransitionClasses as wt, tooltip as It, contentContainer as Rt, tooltipCenter as _t, closeButtonIcon as Nt, arrowContainer as Ct, arrow as yt } from "./tooltip.css-mistica.js";
-import Lt from "./stack.js";
-import { Text2 as lt } from "./text.js";
-import { getCssVarValue as kt } from "./utils/dom.js";
-import { TAB as $t, ESC as At } from "./utils/keys.js";
-import { isTouchableDevice as Ft } from "./utils/environment.js";
-import { isEqual as ct } from "./utils/helpers.js";
-import et from "classnames";
-import { vars as ot } from "./skins/skin-contract.css-mistica.js";
-import { useIsInverseOrMediaVariant as Bt, ThemeVariant as Dt } from "./theme-variant-context.js";
-import { combineRefs as Wt } from "./utils/common.js";
-import { useTooltipState as Vt, useSetTooltipState as Ht } from "./tooltip-context-provider.js";
-import { isRunningAcceptanceTest as Xt } from "./utils/platform.js";
-import { IconButton as zt } from "./icon-button.js";
-import Pt from "./generated/mistica-icons/icon-close-regular.js";
-import Yt from "./box.js";
+import { jsx as n, jsxs as B, Fragment as vt } from "react/jsx-runtime";
+import * as r from "react";
+import { useTheme as bt, useBoundingRect as lt, useWindowSize as xt } from "./hooks.js";
+import { Portal as Mt } from "./portal.js";
+import { Transition as Et } from "react-transition-group";
+import { content as St, CONTENT_MIN_WIDTH as Ot, container as wt, tooltipTransitionClasses as It, tooltip as Rt, contentContainer as _t, tooltipCenter as Nt, closeButtonIcon as yt, arrowContainer as Ct, arrow as Lt } from "./tooltip.css-mistica.js";
+import kt from "./stack.js";
+import { Text2 as ct } from "./text.js";
+import { getCssVarValue as $t } from "./utils/dom.js";
+import { TAB as At, ESC as Ft } from "./utils/keys.js";
+import { isTouchableDevice as Bt } from "./utils/environment.js";
+import { isEqual as ft } from "./utils/helpers.js";
+import ot from "classnames";
+import { vars as st } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseOrMediaVariant as Dt, ThemeVariant as Wt } from "./theme-variant-context.js";
+import { combineRefs as Vt } from "./utils/common.js";
+import { useTooltipState as Ht, useSetTooltipState as Xt } from "./tooltip-context-provider.js";
+import { isRunningAcceptanceTest as zt } from "./utils/platform.js";
+import { IconButton as Pt } from "./icon-button.js";
+import Yt from "./generated/mistica-icons/icon-close-regular.js";
 import { closeButtonLabel as Gt } from "./text-tokens.js";
-const ft = (t)=>({
-        border: `1px solid ${t ? ot.colors.backgroundContainer : ot.colors.border}`
-    }), pt = 496, Kt = 300, Ut = 500, jt = 100, f = 20, E = 6, N = E + f / 2 + 1, qt = (t)=>{
+const pt = (t)=>({
+        border: `1px solid ${t ? st.colors.backgroundContainer : st.colors.border}`
+    }), dt = 496, Kt = 300, Ut = 500, jt = 100, d = 20, E = 6, R = E + d / 2 + 1, qt = (t)=>{
     switch(t){
         case "left":
             return `translateX(-${E}px)`;
@@ -116,75 +115,75 @@ const ft = (t)=>({
             return "";
     }
 }, mt = (t)=>{
-    const h = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), b = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), p = t.offsetWidth - h, d = t.offsetHeight - b;
+    const m = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - m, c = t.offsetHeight - T;
     return {
-        width: p,
-        height: d
+        width: g,
+        height: c
     };
-}, dt = (t, h, b, p, d)=>{
-    if (!t || !h) return;
-    const { top: v, bottom: S, left: W, right: V } = t, O = p - S, o = d - V, w = v, I = W, { width: X, height: m } = mt(h), C = X + N, R = m + N, _ = C <= Math.max(I, o), T = R <= Math.max(O, w);
-    if (!(!T && !_)) switch(b){
+}, ut = (t, m, T, g, c)=>{
+    if (!t || !m) return;
+    const { top: v, bottom: _, left: D, right: W } = t, b = g - _, S = c - W, o = v, O = D, { width: X, height: z } = mt(m), f = X + R, N = z + R, w = f <= Math.max(O, S), I = N <= Math.max(b, o);
+    if (!(!I && !w)) switch(T){
         case "left":
-            return _ ? C <= I ? "left" : "right" : O > w ? "bottom" : "top";
+            return w ? f <= O ? "left" : "right" : b > o ? "bottom" : "top";
         case "right":
-            return _ ? C <= o ? "right" : "left" : O > w ? "bottom" : "top";
+            return w ? f <= S ? "right" : "left" : b > o ? "bottom" : "top";
         case "top":
-            return T ? R <= w ? "top" : "bottom" : I > o ? "left" : "right";
+            return I ? N <= o ? "top" : "bottom" : O > S ? "left" : "right";
         case "bottom":
-            return T ? R <= O ? "bottom" : "top" : I > o ? "left" : "right";
+            return I ? N <= b ? "bottom" : "top" : O > S ? "left" : "right";
         default:
             return;
     }
 }, Zt = (param)=>{
-    let { content: t, target: h, width: b, position: p = "top", dataAttributes: d, delay: v = !0, centerContent: S, open: W, onClose: V, closeButtonLabel: O, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
-    const { texts: I, t: X } = bt(), m = s.useId(), { openTooltipId: C } = Vt(), { openTooltip: R, closeTooltip: _ } = Ht(), [T, z] = s.useState(), [P, Y] = s.useState(), G = s.useRef(null), K = s.useRef(null), [y, ut] = s.useState(null), u = Ft(), U = v ? Ut : 0, [rt, j] = s.useState(!1), [q, L] = s.useState(!1), Z = W !== void 0, [st, J] = s.useState(!1), x = Z ? W : m === C, Q = Bt(), c = at(G, x), H = at(K, x, !0), a = vt(), M = s.useCallback(()=>{
-        J(!1), j(!1), L(!1);
+    let { content: t, target: m, targetStyle: T, width: g, position: c = "top", dataAttributes: v, delay: _ = !0, centerContent: D, open: W, onClose: b, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
+    const { texts: X, t: z } = bt(), f = r.useId(), { openTooltipId: N } = Ht(), { openTooltip: w, closeTooltip: I } = Xt(), [V, P] = r.useState(), [Y, G] = r.useState(), K = r.useRef(null), U = r.useRef(null), [y, ht] = r.useState(null), u = Bt(), j = _ ? Ut : 0, [rt, q] = r.useState(!1), [Z, C] = r.useState(!1), J = W !== void 0, [it, Q] = r.useState(!1), x = J ? W : f === N, tt = Dt(), p = lt(K, x), H = lt(U, x, !0), a = xt(), M = r.useCallback(()=>{
+        Q(!1), q(!1), C(!1);
     }, []);
-    s.useEffect(()=>{
+    r.useEffect(()=>{
         x || M();
     }, [
         x,
         M
-    ]), s.useEffect(()=>{
+    ]), r.useEffect(()=>{
         if (!y || !x) return;
-        const i = dt(c, y, p, a.height, a.width);
-        if (!i || !c) {
-            z(void 0), Y(void 0), M();
+        const i = ut(p, y, c, a.height, a.width);
+        if (!i || !p) {
+            P(void 0), G(void 0), M();
             return;
         }
-        let r, e;
+        let s, e;
         var _parseInt;
-        const { left: l, right: k, top: $, bottom: A } = c, { width: F, height: B } = mt(y), it = a.width - F, nt = a.height - B, g = (_parseInt = parseInt(kt(ot.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        const { left: l, right: L, top: k, bottom: $ } = p, { width: A, height: F } = mt(y), nt = a.width - A, at = a.height - F, h = (_parseInt = parseInt($t(st.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
         switch(i){
             case "top":
-                r = {
-                    left: Math.max(0, Math.min(it, (l + k - F) / 2)),
-                    top: $ - B - f / 2,
-                    padding: `0px 0px ${N}px 0px`
+                s = {
+                    left: Math.max(0, Math.min(nt, (l + L - A) / 2)),
+                    top: k - F - d / 2,
+                    padding: `0px 0px ${R}px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
+                    left: Math.max(h, Math.min(a.width - h - d, (l + L - d) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
-                r = {
-                    left: Math.max(0, Math.min(it, (l + k - F) / 2)),
-                    top: A - E,
-                    padding: `${N}px 0px 0px 0px`
+                s = {
+                    left: Math.max(0, Math.min(nt, (l + L - A) / 2)),
+                    top: $ - E,
+                    padding: `${R}px 0px 0px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
+                    left: Math.max(h, Math.min(a.width - h - d, (l + L - d) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
-                r = {
-                    left: l - F - f / 2,
-                    top: Math.max(0, Math.min(nt, ($ + A - B) / 2)),
-                    padding: `0px ${N}px 0px 0px`
+                s = {
+                    left: l - A - d / 2,
+                    top: Math.max(0, Math.min(at, (k + $ - F) / 2)),
+                    padding: `0px ${R}px 0px 0px`
                 }, e = {
-                    top: Math.max(g, Math.min(a.height - g - f, ($ + A - f) / 2)),
+                    top: Math.max(h, Math.min(a.height - h - d, (k + $ - d) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
@@ -192,102 +191,103 @@ const ft = (t)=>({
                 break;
             case "right":
             default:
-                r = {
-                    left: k - E,
-                    top: Math.max(0, Math.min(nt, ($ + A - B) / 2)),
-                    padding: `0px 0px 0px ${N}px`
+                s = {
+                    left: L - E,
+                    top: Math.max(0, Math.min(at, (k + $ - F) / 2)),
+                    padding: `0px 0px 0px ${R}px`
                 }, e = {
-                    top: Math.max(g, Math.min(a.height - g - f, ($ + A - f) / 2)),
+                    top: Math.max(h, Math.min(a.height - h - d, (k + $ - d) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
         }
-        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / B * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), ct(r, T) || z(r), ct(e, P) || Y(e);
+        typeof e.top == "number" && (e.top -= s.top, e.top = `${e.top / F * 100}%`), typeof e.left == "number" && (e.left -= s.left, e.left = `${e.left / A * 100}%`), ft(s, V) || P(s), ft(e, Y) || G(e);
     }, [
         y,
-        c,
+        p,
         H,
         x,
-        p,
+        c,
         a,
-        T,
-        P,
-        Q,
+        V,
+        Y,
+        tt,
         u,
-        m,
+        f,
         M
     ]);
-    const tt = s.useRef(!1);
-    s.useEffect(()=>{
+    const et = r.useRef(!1);
+    r.useEffect(()=>{
         const i = (l)=>{
             switch(l.key){
-                case At:
+                case Ft:
                     o || M();
                     break;
-                case $t:
-                    tt.current = !0;
+                case At:
+                    et.current = !0;
                     break;
             }
-        }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && u && c && (l.clientX < c.left || l.clientX > c.right || l.clientY < c.top || l.clientY > c.bottom) && M();
+        }, s = ()=>et.current = !1, e = (l)=>{
+            !o && u && p && (l.clientX < p.left || l.clientX > p.right || l.clientY < p.top || l.clientY > p.bottom) && M();
         };
-        return document.addEventListener("keydown", i, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
-            document.removeEventListener("keydown", i, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
+        return document.addEventListener("keydown", i, !1), document.addEventListener("keyup", s, !1), document.addEventListener("click", e, !1), ()=>{
+            document.removeEventListener("keydown", i, !1), document.removeEventListener("keyup", s, !1), document.removeEventListener("click", e, !1);
         };
     }, [
         u,
         M,
-        c,
+        p,
         o
-    ]), s.useEffect(()=>{
-        Z || (q || rt || st ? R(m) : _(m));
+    ]), r.useEffect(()=>{
+        J || (Z || rt || it ? w(f) : I(f));
     }, [
-        q,
+        Z,
         rt,
-        st,
-        m,
-        R,
-        _,
-        Z
+        it,
+        f,
+        w,
+        I,
+        J
     ]);
-    const ht = dt(c, y, p, a.height, a.width), Tt = S !== void 0 ? S : (H == null ? void 0 : H.width) === St;
-    return /* @__PURE__ */ D(gt, {
+    const Tt = ut(p, y, c, a.height, a.width), gt = D !== void 0 ? D : (H == null ? void 0 : H.width) === Ot;
+    return /* @__PURE__ */ B(vt, {
         children: [
             /* @__PURE__ */ n("div", {
+                style: T,
                 ref: (i)=>{
-                    const r = i == null ? void 0 : i.firstElementChild;
-                    r && r !== G.current && (G.current = r);
+                    const s = i == null ? void 0 : i.firstElementChild;
+                    s && s !== K.current && (K.current = s);
                 },
                 onMouseOver: ()=>{
-                    !u && !o && L(!0);
+                    !u && !o && C(!0);
                 },
                 onMouseLeave: ()=>{
-                    !u && !o && L(!1);
+                    !u && !o && C(!1);
                 },
                 onClick: ()=>{
-                    (u || o) && L(o ? !q : !0);
+                    (u || o) && C(o ? !Z : !0);
                 },
                 onFocus: ()=>{
-                    tt.current && !o && J(!0);
+                    et.current && !o && Q(!0);
                 },
                 onBlur: ()=>{
-                    !u && !o && J(!1);
+                    !u && !o && Q(!1);
                 },
-                "aria-describedby": m,
-                children: h
+                "aria-describedby": f,
+                children: m
             }),
-            /* @__PURE__ */ n(xt, {
-                children: /* @__PURE__ */ n(Mt, {
+            /* @__PURE__ */ n(Mt, {
+                children: /* @__PURE__ */ n(Et, {
                     in: x,
-                    nodeRef: K,
-                    timeout: Xt() ? 0 : {
-                        enter: Kt + U,
+                    nodeRef: U,
+                    timeout: zt() ? 0 : {
+                        enter: Kt + j,
                         exit: jt
                     },
                     onExited: ()=>{
-                        z(void 0), Y(void 0);
+                        P(void 0), G(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
@@ -297,56 +297,56 @@ const ft = (t)=>({
                * Hack to prevent text from wrapping automatically when touching the viewport's edges,
                * even if the content's width didn't reach the max width.
                * https://stackoverflow.com/questions/66106629/how-to-disable-text-wrapping-when-viewport-border-is-reached
-               */ width: `calc(100vw + ${pt}px)`,
+               */ width: `calc(100vw + ${dt}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: T ? "visible" : "hidden"
+                                visibility: V ? "visible" : "hidden"
                             }
-                        }, d), {
+                        }, v), {
                             role: "tooltip",
-                            "aria-label": m,
+                            "aria-label": f,
                             tabIndex: -1,
                             children: /* @__PURE__ */ n("div", {
-                                className: et(Ot),
+                                className: ot(wt),
                                 style: _object_spread_props(_object_spread({
                                     pointerEvents: i === "entered" ? "auto" : "none",
-                                    transform: qt(ht)
-                                }, T, wt[i]), {
-                                    transition: i === "entering" ? `opacity .1s linear ${U}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${U}ms` : "opacity .1s linear"
+                                    transform: qt(Tt)
+                                }, V, It[i]), {
+                                    transition: i === "entering" ? `opacity .1s linear ${j}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${j}ms` : "opacity .1s linear"
                                 }),
-                                ref: Wt(ut, K),
+                                ref: Vt(ht, U),
                                 onMouseEnter: ()=>{
-                                    !u && i === "entered" && !o && j(!0);
+                                    !u && i === "entered" && !o && q(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !u && !o && j(!1);
+                                    !u && !o && q(!1);
                                 },
-                                children: /* @__PURE__ */ D("div", {
-                                    className: It,
+                                children: /* @__PURE__ */ B("div", {
+                                    className: Rt,
                                     style: _object_spread_props(_object_spread({
-                                        width: b
-                                    }, ft(Q)), {
-                                        maxWidth: Math.min(pt, a.width)
+                                        width: g
+                                    }, pt(tt)), {
+                                        maxWidth: Math.min(dt, a.width)
                                     }),
                                     children: [
                                         /* @__PURE__ */ n("div", {
-                                            className: et(Rt, {
-                                                [_t]: Tt
+                                            className: ot(_t, {
+                                                [Nt]: gt
                                             }),
-                                            children: /* @__PURE__ */ D(Dt, {
+                                            children: /* @__PURE__ */ B(Wt, {
                                                 isInverse: !1,
                                                 children: [
                                                     t,
-                                                    V && /* @__PURE__ */ n("div", {
-                                                        className: Nt,
-                                                        children: /* @__PURE__ */ n(zt, {
+                                                    b && /* @__PURE__ */ n("div", {
+                                                        className: yt,
+                                                        children: /* @__PURE__ */ n(Pt, {
                                                             onPress: ()=>{
-                                                                L(!1), V();
+                                                                C(!1), b();
                                                             },
-                                                            trackingEvent: w,
-                                                            "aria-label": O || I.closeButtonLabel || X(Gt),
-                                                            Icon: Pt,
+                                                            trackingEvent: O,
+                                                            "aria-label": S || X.closeButtonLabel || z(Gt),
+                                                            Icon: Yt,
                                                             small: !0
                                                         })
                                                     })
@@ -355,10 +355,10 @@ const ft = (t)=>({
                                         }),
                                         /* @__PURE__ */ n("div", {
                                             className: Ct,
-                                            style: P,
+                                            style: Y,
                                             children: /* @__PURE__ */ n("div", {
-                                                className: et(yt),
-                                                style: ft(Q)
+                                                className: ot(Lt),
+                                                style: pt(tt)
                                             })
                                         })
                                     ]
@@ -370,7 +370,7 @@ const ft = (t)=>({
         ]
     });
 }, Jt = (_param)=>{
-    var { centerContent: t, extra: h, children: b, dataAttributes: p, title: d, description: v } = _param, S = _object_without_properties(_param, [
+    var { centerContent: t, extra: m, children: T, dataAttributes: g, title: c, description: v } = _param, _ = _object_without_properties(_param, [
         "centerContent",
         "extra",
         "children",
@@ -379,29 +379,29 @@ const ft = (t)=>({
         "description"
     ]);
     return /* @__PURE__ */ n(Zt, _object_spread({
-        content: /* @__PURE__ */ D(Yt, {
-            className: Et,
+        content: /* @__PURE__ */ B("div", {
+            className: St,
             children: [
-                (d || v) && /* @__PURE__ */ D(Lt, {
+                (c || v) && /* @__PURE__ */ B(kt, {
                     space: 4,
                     children: [
-                        d && /* @__PURE__ */ n(lt, {
+                        c && /* @__PURE__ */ n(ct, {
                             medium: !0,
-                            children: d
+                            children: c
                         }),
-                        v && /* @__PURE__ */ n(lt, {
+                        v && /* @__PURE__ */ n(ct, {
                             regular: !0,
                             children: v
                         })
                     ]
                 }),
-                h !== null && h !== void 0 ? h : b
+                m !== null && m !== void 0 ? m : T
             ]
         }),
         centerContent: t,
         dataAttributes: _object_spread({
             "component-name": "Tooltip"
-        }, p)
-    }, S));
-}, xe = Jt;
-export { Zt as BaseTooltip, xe as default };
+        }, g)
+    }, _));
+}, be = Jt;
+export { Zt as BaseTooltip, be as default };