@telefonica/mistica 14.24.1 → 14.25.0

package/dist-es/tooltip.js

@@ -77,22 +77,22 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as P, Fragment as tt, jsx as w } from "react/jsx-runtime";
+import { jsxs as P, Fragment as et, jsx as w } from "react/jsx-runtime";
 import * as o from "react";
 import E from "classnames";
-import { CSSTransition as et } from "react-transition-group";
-import { useTheme as rt, useScreenSize as nt, useAriaId as ot } from "./hooks.js";
-import { Portal as it } from "./portal.js";
-import at from "./overlay.js";
+import { CSSTransition as rt } from "react-transition-group";
+import { useTheme as nt, useScreenSize as ot, useAriaId as it } from "./hooks.js";
+import { Portal as at } from "./portal.js";
+import ct from "./overlay.js";
 import { Text2 as I } from "./text.js";
-import { TAB as ct } from "./utils/key-codes.js";
-import st from "./stack.js";
-import { vars as s, wrapper as ut, enter as lt, enterActive as dt, enterDone as ft, exit as ht, exitActive as wt, container as mt, textAlign as pt, arrowWrapper as gt, arrow as xt, fadeInTopKeyframes as Tt, fadeInBottomKeyframes as vt, fadeInXKeyframes as bt, arrowTop as At, arrowBottom as Pt, arrowLeft as St, arrowRight as Yt } from "./tooltip.css-mistica.js";
-import { assignInlineVars as Ot } from "@vanilla-extract/dynamic";
-import { getPrefixedDataAttributes as Rt } from "./utils/dom.js";
-import { isClientSide as yt, isServerSide as Ct } from "./utils/environment.js";
-const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500, M = ()=>{}, It = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, Mt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Nt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", kt = (r)=>r === "top" ? Tt : r === "bottom" ? vt : bt, Lt = (r)=>r ? "1" : "0.2", Vt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : "", jt = (_param)=>{
-    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f  } = _param, C = _object_without_properties(_param, [
+import { TAB as st } from "./utils/key-codes.js";
+import ut from "./stack.js";
+import { vars as s, wrapper as lt, enter as dt, enterActive as ft, enterDone as ht, exit as wt, exitActive as mt, container as pt, textAlign as gt, textCenter as xt, arrowWrapper as Tt, arrow as vt, fadeInTopKeyframes as bt, fadeInBottomKeyframes as At, fadeInXKeyframes as Pt, arrowTop as St, arrowBottom as Yt, arrowLeft as Ct, arrowRight as Ot } from "./tooltip.css-mistica.js";
+import { assignInlineVars as Rt } from "@vanilla-extract/dynamic";
+import { getPrefixedDataAttributes as yt } from "./utils/dom.js";
+import { isClientSide as Dt, isServerSide as Wt } from "./utils/environment.js";
+const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500, M = ()=>{}, Nt = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, kt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Lt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Vt = (r)=>r === "top" ? bt : r === "bottom" ? At : Pt, jt = (r)=>r ? "1" : "0.2", Kt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : "", zt = (_param)=>{
+    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f , textCenter: z  } = _param, y = _object_without_properties(_param, [
         "children",
         "extra",
         "description",
@@ -102,16 +102,17 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
         "delay",
         "dataAttributes",
         "targetStyle",
-        "unstable_offsetX"
+        "unstable_offsetX",
+        "textCenter"
     ]);
-    const { isDarkMode: z  } = rt(), [a, O] = o.useState(!1), { isTabletOrSmaller: F  } = nt(), D = ot(), h = o.useRef(!1), c = o.useRef(null), g = o.useRef(null), R = o.useRef(null), x = o.useRef(null), t = o.useRef({
+    const { isDarkMode: F  } = nt(), [a, C] = o.useState(!1), { isTabletOrSmaller: H  } = ot(), D = it(), h = o.useRef(!1), c = o.useRef(null), g = o.useRef(null), O = o.useRef(null), x = o.useRef(null), t = o.useRef({
         top: 0,
         right: 0,
         left: 0,
         bottom: 0,
         width: 0,
         height: 0
-    }), [H, X] = o.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = o.useState(void 0), i = ((n)=>{
+    }), [X, q] = o.useState({}), G = (n)=>H ? n || Bt : n || $t, [e, J] = o.useState(void 0), i = ((n)=>{
         if (!e) return n;
         const u = (d)=>{
             const p = t.current.top > e.height;
@@ -123,28 +124,28 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             left: t.current.left < e.width ? t.current.right + e.width > window.innerWidth ? t.current.top < e.height ? "bottom" : "top" : "right" : n,
             bottom: t.current.bottom + e.height > window.innerHeight ? l("top") : l(n)
         })[n];
-    })(q(C.position)), y = yt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
-        a && O(!1);
+    })(G(y.position)), R = Dt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && C(!1);
     };
     o.useEffect(()=>(window.addEventListener("resize", W), ()=>{
             window.removeEventListener("resize", W);
         }));
     const $ = ()=>{
-        O(!1);
+        C(!1);
     }, T = ()=>{
-        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
-    }, J = ()=>{
+        O.current && (t.current = O.current.getBoundingClientRect(), C(!a));
+    }, Q = ()=>{
         a || T();
-    }, Q = (n)=>{
-        n.keyCode === ct && $();
     }, U = (n)=>{
+        n.keyCode === st && $();
+    }, Z = (n)=>{
         if (!e) return {};
         const u = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? t.current.width / 2 : "50%";
         return n === "bottom" || n === "top" ? {
             left: u
         } : {};
     }, B = o.useCallback((n, u)=>{
-        if (Ct() || !e) return {};
+        if (Wt() || !e) return {};
         const l = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? Math.round(e.width / 2 - t.current.width / 2) : 0, A = f || (u ? window.pageXOffset + t.current.left + t.current.width / 2 - u / 2 : window.pageXOffset + t.current.left + l + t.current.width / 2 - e.width / 2), d = t.current.left < e.width ? A : u ? t.current.left - u - m : t.current.left - e.width - m, p = t.current.left < e.width ? t.current.top < e.height ? window.pageYOffset + t.current.bottom + m : window.pageYOffset + t.current.top - m : f || window.pageYOffset + t.current.top + t.current.height / 2;
         return ({
             right: {
@@ -167,42 +168,42 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
     }, [
         f,
         e
-    ]), b = (()=>C.width)(), Z = {
-        top: At,
-        bottom: Pt,
-        left: St,
-        right: Yt
-    }, _ = i && Ot({
-        [s.enterTransform]: It(i),
-        [s.exitTransform]: Nt(i),
-        [s.enterActiveAnimationName]: kt(i),
-        [s.enterDoneTransform]: Mt(i),
-        [s.shadowAlpha]: Lt(z),
-        [s.arrowBoxShadow]: Vt(i)
+    ]), b = (()=>y.width)(), _ = {
+        top: St,
+        bottom: Yt,
+        left: Ct,
+        right: Ot
+    }, tt = i && Rt({
+        [s.enterTransform]: Nt(i),
+        [s.exitTransform]: Lt(i),
+        [s.enterActiveAnimationName]: Vt(i),
+        [s.enterDoneTransform]: kt(i),
+        [s.shadowAlpha]: jt(F),
+        [s.arrowBoxShadow]: Kt(i)
     });
     return o.useEffect(()=>{
-        i && x.current && a && X(B(i, b || 0));
+        i && x.current && a && q(B(i, b || 0));
     }, [
         a,
         B,
         i,
         b
     ]), o.useEffect(()=>{
-        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+        x.current && (x.current.getBoundingClientRect(), a && J(x.current.getBoundingClientRect()));
     }, [
         a
-    ]), /* @__PURE__ */ P(tt, {
+    ]), /* @__PURE__ */ P(et, {
         children: [
             /* @__PURE__ */ w("div", {
-                ref: R,
+                ref: O,
                 style: K,
-                className: ut,
+                className: lt,
                 onPointerOver: ()=>{
                     c.current && (clearTimeout(c.current), c.current = null), !h.current && (h.current = !0, V ? g.current = setTimeout(()=>{
                         g.current = null, T();
-                    }, Et) : T());
+                    }, Mt) : T());
                 },
-                onPointerLeave: y ? M : ()=>{
+                onPointerLeave: R ? M : ()=>{
                     if (g.current) {
                         clearTimeout(g.current), g.current = null, h.current = !1;
                         return;
@@ -211,8 +212,8 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                         h.current && (c.current = null, h.current = !1, T());
                     }, 100);
                 },
-                onFocus: J,
-                onKeyDown: Q,
+                onFocus: Q,
+                onKeyDown: U,
                 "touch-action": "auto",
                 role: "button",
                 tabIndex: 0,
@@ -221,48 +222,48 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                 "aria-label": L,
                 children: k
             }),
-            /* @__PURE__ */ P(it, {
+            /* @__PURE__ */ P(at, {
                 children: [
-                    a && y && /* @__PURE__ */ w(at, {
+                    a && R && /* @__PURE__ */ w(ct, {
                         onPress: $
                     }),
-                    /* @__PURE__ */ w(et, {
+                    /* @__PURE__ */ w(rt, {
                         in: a,
-                        timeout: Bt,
+                        timeout: It,
                         classNames: {
-                            enter: lt,
-                            enterActive: dt,
-                            enterDone: ft,
-                            exit: ht,
-                            exitActive: wt
+                            enter: dt,
+                            enterActive: ft,
+                            enterDone: ht,
+                            exit: wt,
+                            exitActive: mt
                         },
                         unmountOnExit: !0,
                         children: /* @__PURE__ */ P("div", _object_spread_props(_object_spread({
                             ref: x
-                        }, Rt(j, "Tooltip")), {
+                        }, yt(j, "Tooltip")), {
                             role: "tooltip",
                             id: D,
-                            className: E(mt, pt),
+                            className: E(pt, gt, z ? xt : ""),
                             style: _object_spread({
                                 width: b
-                            }, H, _),
+                            }, X, tt),
                             onPointerOver: ()=>{
                                 c.current && (clearTimeout(c.current), c.current = null);
                             },
-                            onPointerLeave: y ? M : ()=>{
+                            onPointerLeave: R ? M : ()=>{
                                 c.current = setTimeout(()=>{
                                     h.current && (c.current = null, h.current = !1, T());
                                 }, 100);
                             },
                             children: [
                                 /* @__PURE__ */ w("div", {
-                                    style: U(i),
-                                    className: E(gt, Z[i]),
+                                    style: Z(i),
+                                    className: E(Tt, _[i]),
                                     children: /* @__PURE__ */ w("div", {
-                                        className: xt
+                                        className: vt
                                     })
                                 }),
-                                (Y || S) && /* @__PURE__ */ P(st, {
+                                (Y || S) && /* @__PURE__ */ P(ut, {
                                     space: 4,
                                     children: [
                                         Y && /* @__PURE__ */ w(I, {
@@ -283,5 +284,5 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             })
         ]
     });
-}, oe = jt;
-export { oe as default };
+}, ae = zt;
+export { ae as default };

package/package.json

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