@telefonica/mistica 14.21.0 → 14.22.1

package/dist/tooltip.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Ht;
+        return oe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-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" ? _tooltipcssmistica.fadeInTopKeyframes : t === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Rt = (t)=>t ? "1" : "0.2", $t = (t)=>t === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.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, [
+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" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Lt = (r)=>r ? "1" : "0.2", Vt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.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",
@@ -154,101 +154,135 @@ 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  } = (0, _hooks.useTheme)(), [l, T] = _react.useState(!1), { isTabletOrSmaller: u  } = (0, _hooks.useScreenSize)(), P = (0, _hooks.useAriaId)(), o = _react.useRef(!1), r = _react.useRef(null), f = _react.useRef(null), b = _react.useRef(null), e = _react.useRef({
+    const { isDarkMode: z  } = (0, _hooks.useTheme)(), [a, O] = _react.useState(!1), { isTabletOrSmaller: F  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), R = _react.useRef(null), x = _react.useRef(null), t = _react.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 = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, S = ()=>{
-        l && T(!1);
+    }), [H, X] = _react.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = _react.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 = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && O(!1);
     };
-    _react.useEffect(()=>(window.addEventListener("resize", S), ()=>{
-            window.removeEventListener("resize", S);
+    _react.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 === _keycodes.TAB && y();
-    }, X = (i, A)=>(0, _environment.isServerSide)() ? {} : ({
+    const $ = ()=>{
+        O(!1);
+    }, T = ()=>{
+        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
+    }, J = ()=>{
+        a || T();
+    }, Q = (n)=>{
+        n.keyCode === _keycodes.TAB && $();
+    }, 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 = _react.useCallback((n, u)=>{
+        if ((0, _environment.isServerSide)() || !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 = {
+        })[n];
+    }, [
+        f,
+        e
+    ]), b = (()=>C.width)(), Z = {
         top: _tooltipcssmistica.arrowTop,
         bottom: _tooltipcssmistica.arrowBottom,
         left: _tooltipcssmistica.arrowLeft,
         right: _tooltipcssmistica.arrowRight
-    }, W = (0, _dynamic.assignInlineVars)({
-        [_tooltipcssmistica.vars.enterTransform]: St(a),
-        [_tooltipcssmistica.vars.exitTransform]: Dt(a),
-        [_tooltipcssmistica.vars.enterActiveAnimationName]: Ot(a),
-        [_tooltipcssmistica.vars.enterDoneTransform]: yt(a),
-        [_tooltipcssmistica.vars.shadowAlpha]: Rt(M),
-        [_tooltipcssmistica.vars.arrowBoxShadow]: $t(a)
+    }, _ = i && (0, _dynamic.assignInlineVars)({
+        [_tooltipcssmistica.vars.enterTransform]: It(i),
+        [_tooltipcssmistica.vars.exitTransform]: Nt(i),
+        [_tooltipcssmistica.vars.enterActiveAnimationName]: kt(i),
+        [_tooltipcssmistica.vars.enterDoneTransform]: Mt(i),
+        [_tooltipcssmistica.vars.shadowAlpha]: Lt(z),
+        [_tooltipcssmistica.vars.arrowBoxShadow]: Vt(i)
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return _react.useEffect(()=>{
+        i && x.current && a && X(B(i, b || 0));
+    }, [
+        a,
+        B,
+        i,
+        b
+    ]), _react.useEffect(()=>{
+        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+    }, [
+        a
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: b,
+                ref: R,
+                style: K,
                 className: _tooltipcssmistica.wrapper,
                 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__ */ (0, _jsxruntime.jsxs)(_portal.Portal, {
                 children: [
-                    l && v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
-                        onPress: y
+                    a && y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+                        onPress: $
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                        in: l,
-                        timeout: At,
+                        in: a,
+                        timeout: Bt,
                         classNames: {
                             enter: _tooltipcssmistica.enter,
                             enterActive: _tooltipcssmistica.enterActive,
@@ -257,43 +291,45 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
                             exitActive: _tooltipcssmistica.exitActive
                         },
                         unmountOnExit: !0,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(E, "Tooltip")), {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+                            ref: x
+                        }, (0, _dom.getPrefixedDataAttributes)(j, "Tooltip")), {
                             role: "tooltip",
-                            id: P,
-                            className: _tooltipcssmistica.container,
+                            id: D,
+                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign),
                             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__ */ (0, _jsxruntime.jsx)("div", {
-                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, K[a]),
-                                    style: L(),
+                                    style: U(i),
+                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, Z[i]),
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _tooltipcssmistica.arrow
                                     })
                                 }),
-                                (x || w) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                (Y || S) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 4,
                                     children: [
-                                        x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        Y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             medium: !0,
-                                            children: x
+                                            children: Y
                                         }),
-                                        w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             regular: !0,
-                                            children: w
+                                            children: S
                                         })
                                     ]
                                 }),
-                                $ || t
+                                N || r
                             ]
                         }))
                     })
@@ -301,4 +337,4 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
             })
         ]
     });
-}, Ht = It;
+}, oe = jt;

package/dist/utils/dom.d.ts

@@ -19,4 +19,5 @@ export declare const getScrollDistanceToBottom: (el: HTMLElement) => number;
 export declare const hasScroll: (el: HTMLElement) => boolean;
 type ResizeListener = (entries: Array<ResizeObserverEntry>, observer: ResizeObserver) => void;
 export declare const listenResize: (element: Element, handler: ResizeListener) => (() => void);
+export declare const getCssVarValue: (cssVar: string, element?: Element) => string;
 export {};

package/dist/utils/dom.js

@@ -10,34 +10,37 @@ function _export(target, all) {
 }
 _export(exports, {
     addPassiveEventListener: function() {
-        return p;
+        return h;
     },
     cancelEvent: function() {
-        return v;
+        return f;
     },
     createChangeEvent: function() {
-        return d;
+        return m;
+    },
+    getCssVarValue: function() {
+        return l;
     },
     getPrefixedDataAttributes: function() {
-        return m;
+        return g;
     },
     getScrollDistanceToBottom: function() {
-        return g;
+        return b;
     },
     getScrollableParentElement: function() {
-        return E;
+        return w;
     },
     hasScroll: function() {
-        return h;
+        return P;
     },
     isInputTypeSupported: function() {
-        return u;
+        return d;
     },
     listenResize: function() {
-        return w;
+        return y;
     },
     removePassiveEventListener: function() {
-        return f;
+        return E;
     }
 });
 const _environment = require("./environment.js");
@@ -132,55 +135,68 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const u = (e)=>{
+const d = (e)=>{
     if ((0, _environment.isServerSide)()) return !1;
-    const n = document.createElement("input");
-    return n.setAttribute("type", e), n.type === e;
-}, v = (e)=>{
+    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 = ()=>(0, _environment.isServerSide)() ? Promise.resolve(null) : window.ResizeObserver ? Promise.resolve(ResizeObserver) : Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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 = ()=>(0, _environment.isServerSide)() ? Promise.resolve(null) : window.ResizeObserver ? Promise.resolve(ResizeObserver) : Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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);
 };