@telefonica/mistica 14.21.0 → 14.22.1

package/dist-es/tooltip.js

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

package/dist-es/utils/dom.js

@@ -50,57 +50,70 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { isServerSide as i } from "./environment.js";
-const u = (e)=>{
-    if (i()) return !1;
-    const n = document.createElement("input");
-    return n.setAttribute("type", e), n.type === e;
-}, v = (e)=>{
+import { isServerSide as a } from "./environment.js";
+const d = (e)=>{
+    if (a()) return !1;
+    const t = document.createElement("input");
+    return t.setAttribute("type", e), t.type === e;
+}, f = (e)=>{
     e.stopPropagation(), e.preventDefault();
-}, d = (e, n)=>{
-    const t = new Event("change");
-    return e.value = n, _object_spread_props(_object_spread({}, t), {
+}, m = (e, t)=>{
+    const r = new Event("change");
+    return e.value = t, _object_spread_props(_object_spread({}, r), {
         target: e,
         currentTarget: e
     });
 };
-let l = !1;
+let c = !1;
 try {
     const e = Object.defineProperty({}, "passive", {
         get () {
-            l = !0;
+            c = !0;
         }
     });
     window.addEventListener("test", ()=>{}, e);
 } catch (e) {}
-const p = (e, n, t)=>e.addEventListener(n, t, l ? {
+const h = (e, t, r)=>e.addEventListener(t, r, c ? {
         passive: !0
-    } : !1), f = (e, n, t)=>e.removeEventListener(n, t, !1), m = (e, n)=>{
-    const t = n ? {
-        "data-component-name": n
+    } : !1), E = (e, t, r)=>e.removeEventListener(t, r, !1), g = (e, t)=>{
+    const r = t ? {
+        "data-component-name": t
     } : {};
-    return e && Object.keys(e).forEach((r)=>{
-        t["data-" + r] = e[r];
-    }), t;
-}, c = (e, n)=>{
-    const t = `overflow${n}`, r = window.getComputedStyle(e)[t];
+    return e && Object.keys(e).forEach((n)=>{
+        r["data-" + n] = e[n];
+    }), r;
+}, u = (e, t)=>{
+    const r = `overflow${t}`, n = window.getComputedStyle(e)[r];
     return [
         "auto",
         "scroll",
         "overlay"
-    ].includes(r);
-}, E = function(e) {
-    let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "Y";
-    let t = e == null ? void 0 : e.parentElement;
-    for(; t && !c(t, n);)t = t.parentElement;
-    return t || document.documentElement;
-}, g = (e)=>e.scrollHeight - e.scrollTop - e.clientHeight, h = (e)=>e.scrollHeight > e.clientHeight, w = (e, n)=>{
-    const t = ()=>i() ? Promise.resolve(null) : window.ResizeObserver ? Promise.resolve(ResizeObserver) : import(/* webpackChunkName: "@juggle/resize-observer" */ "@juggle/resize-observer").then((o)=>o.ResizeObserver);
-    let r = !1, s = null;
-    return t().then((o)=>{
-        !r && o && (s = new o(n), s.observe(e));
+    ].includes(n);
+}, w = function(e) {
+    let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "Y";
+    let r = e == null ? void 0 : e.parentElement;
+    for(; r && !u(r, t);)r = r.parentElement;
+    return r || document.documentElement;
+}, b = (e)=>e.scrollHeight - e.scrollTop - e.clientHeight, P = (e)=>e.scrollHeight > e.clientHeight, y = (e, t)=>{
+    const r = ()=>a() ? Promise.resolve(null) : window.ResizeObserver ? Promise.resolve(ResizeObserver) : import(/* webpackChunkName: "@juggle/resize-observer" */ "@juggle/resize-observer").then((o)=>o.ResizeObserver);
+    let n = !1, s = null;
+    return r().then((o)=>{
+        !n && o && (s = new o(t), s.observe(e));
     }), ()=>{
-        r = !0, s && s.disconnect();
+        n = !0, s && s.disconnect();
+    };
+}, v = (e)=>{
+    const [t, r] = e.replace(/^var\(/, "").replace(/\)$/, "").split(/\s*,\s*(.*)/);
+    return {
+        varName: t,
+        fallback: r
     };
+}, i = (e)=>e.startsWith("var(") || e.startsWith("--"), l = (e, t)=>{
+    if (!i(e)) throw new Error(`Invalid css var: ${e}`);
+    if (e.startsWith("var(")) {
+        const { varName: r , fallback: n  } = v(e), s = l(r, t);
+        return !s && n ? i(n) ? l(n, t) : n : s;
+    }
+    return getComputedStyle(t !== null && t !== void 0 ? t : document.documentElement).getPropertyValue(e);
 };
-export { p as addPassiveEventListener, v as cancelEvent, d as createChangeEvent, m as getPrefixedDataAttributes, g as getScrollDistanceToBottom, E as getScrollableParentElement, h as hasScroll, u as isInputTypeSupported, w as listenResize, f as removePassiveEventListener };
+export { h as addPassiveEventListener, f as cancelEvent, m as createChangeEvent, l as getCssVarValue, g as getPrefixedDataAttributes, b as getScrollDistanceToBottom, w as getScrollableParentElement, P as hasScroll, d as isInputTypeSupported, y as listenResize, E as removePassiveEventListener };

package/package.json

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