@telefonica/mistica 15.17.0 → 15.19.0

package/dist-es/tooltip.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.17.0",
+    "version": "15.19.0",
     "license": "MIT",
     "repository": {
         "type": "git",