@telefonica/mistica 15.15.0 → 15.16.1

package/dist-es/fixed-footer-layout.js

@@ -1,105 +1,105 @@
 "use client";
-import { jsxs as p, Fragment as O, jsx as a } from "react/jsx-runtime";
+import { jsxs as p, Fragment as H, jsx as a } from "react/jsx-runtime";
 import * as v from "react";
-import P from "classnames";
-import { debounce as _ } from "./utils/helpers.js";
-import { isRunningAcceptanceTest as j } from "./utils/platform.js";
-import { useBoundingRect as W, useScreenSize as G, useTheme as M, useElementDimensions as E, useWindowSize as X, useIsomorphicLayoutEffect as q } from "./hooks.js";
-import { getScrollableParentElement as J, addPassiveEventListener as b, removePassiveEventListener as S, hasScroll as K, getScrollDistanceToBottom as Q } from "./utils/dom.js";
-import { Portal as U } from "./portal.js";
+import z from "classnames";
+import { debounce as O } from "./utils/helpers.js";
+import { isRunningAcceptanceTest as P } from "./utils/platform.js";
+import { useBoundingRect as _, useScreenSize as j, useTheme as M, useElementDimensions as y, useWindowSize as W, useIsomorphicLayoutEffect as G } from "./hooks.js";
+import { getScrollableParentElement as X, addPassiveEventListener as E, removePassiveEventListener as b, hasScroll as q, getScrollDistanceToBottom as J } from "./utils/dom.js";
+import { Portal as K } from "./portal.js";
 import { vars as T } from "./skins/skin-contract.css-mistica.js";
-import { container as V, footer as Y, withoutFooter as Z, elevated as C, fixedFooter as ee, portal as te, fixedBackgroundLayer as oe, absoluteBackgroundLayer as $, vars as re } from "./fixed-footer-layout.css-mistica.js";
-import { applyCssVars as se, safeAreaInsetBottom as g } from "./utils/css.js";
-import { useFixedToTopHeight as ae } from "./fixed-to-top.js";
-import { useOverScrollColor as ie } from "./overscroll-color-context.js";
-const ne = (e)=>e === document.documentElement ? window : e, ce = (e)=>{
+import { container as Q, footer as U, withoutFooter as V, elevated as Y, fixedFooter as Z, portal as C, fixedBackgroundLayer as ee, absoluteBackgroundLayer as S, vars as te } from "./fixed-footer-layout.css-mistica.js";
+import { applyCssVars as oe, safeAreaInsetBottom as re } from "./utils/css.js";
+import { useFixedToTopHeight as se } from "./fixed-to-top.js";
+import { useOverScrollColor as ae } from "./overscroll-color-context.js";
+const ie = (e)=>e === document.documentElement ? window : e, ne = (e)=>{
     const l = setTimeout(e, 0);
     return {
         cancel: ()=>clearTimeout(l)
     };
-}, le = 200, me = (param)=>{
+}, ce = 200, le = (param)=>{
     let { isFooterVisible: e = !0, footer: l, footerHeight: k = "auto", footerBgColor: i = T.colors.background, containerBgColor: F = T.colors.background, children: L, onChangeFooterHeight: n } = param;
-    const [w, h] = v.useState(!1), m = v.useRef(null), { height: d } = W(m) || {
+    const [$, g] = v.useState(!1), d = v.useRef(null), { height: m } = _(d) || {
         height: 0
-    }, { isTabletOrSmaller: u } = G(), { platformOverrides: x } = M(), { height: r, ref: D } = E(), { visualHeight: I } = X(), s = ae(), t = I - s - r > le, { topColor: N = i } = ie(), { height: y, ref: R } = E();
-    q(()=>{
+    }, { isTabletOrSmaller: u } = j(), { platformOverrides: h } = M(), { height: r, ref: w } = y({
+        includeMargins: !0
+    }), { visualHeight: D } = W(), s = se(), t = D - s - r > ce, { topColor: I = i } = ae(), { height: x, ref: N } = y();
+    G(()=>{
         n == null || n(r);
     }, [
         n,
         r
-    ]);
-    const A = `calc(${g} + ${r}px)`;
-    v.useEffect(()=>{
-        if (!u || j(x) || !t) {
-            h(!1);
+    ]), v.useEffect(()=>{
+        if (!u || P(h) || !t) {
+            g(!1);
             return;
         }
-        const f = J(m.current), B = ()=>K(f) && Q(f) > s + 1, o = _(()=>{
-            h(B());
+        const f = X(d.current), A = ()=>q(f) && J(f) > s + 1, o = O(()=>{
+            g(A());
         }, 50, {
             leading: !0,
             maxWait: 100
-        }), z = ce(o), c = ne(f);
-        return b(c, "resize", o), b(c, "scroll", o), ()=>{
-            o.cancel(), S(c, "scroll", o), S(c, "resize", o), z.cancel();
+        }), B = ne(o), c = ie(f);
+        return E(c, "resize", o), E(c, "scroll", o), ()=>{
+            o.cancel(), b(c, "scroll", o), b(c, "resize", o), B.cancel();
         };
     }, [
-        x,
+        h,
         u,
         t,
         // `topDistance` and `contentHeight` dependencies are needed to recalculate the elevation state
         s,
-        d
+        m
     ]);
-    const H = ()=>/* @__PURE__ */ p(U, {
-            className: te,
+    const R = ()=>/* @__PURE__ */ p(K, {
+            className: C,
             children: [
                 /* @__PURE__ */ a("div", {
-                    className: oe,
+                    className: ee,
                     style: {
-                        background: `linear-gradient(180deg, ${N} 50%, ${i} 50% 100%)`
+                        background: `linear-gradient(180deg, ${I} 50%, ${i} 50% 100%)`
                     }
                 }),
                 /* @__PURE__ */ a("div", {
-                    ref: R,
-                    className: $,
+                    ref: N,
+                    className: S,
                     style: {
                         background: F,
                         // this color could be a gradient
                         top: s - 1,
                         // -1 because the navigationbar could have a 1px transparent background
-                        bottom: t ? A : "unset",
-                        height: t ? "unset" : d
+                        bottom: t ? r : "unset",
+                        height: t ? "unset" : m
                     }
                 }),
                 /* @__PURE__ */ a("div", {
-                    className: $,
+                    className: S,
                     style: {
                         background: i,
-                        top: y + s - 1,
-                        height: `calc(${d}px - ${y}px)`
+                        top: x + s - 1,
+                        height: `calc(${m}px - ${x}px)`
                     }
                 })
             ]
         });
-    return /* @__PURE__ */ p(O, {
+    return /* @__PURE__ */ p(H, {
         children: [
             /* @__PURE__ */ p("div", {
-                ref: m,
-                className: V,
-                style: se({
-                    [re.footerHeight]: t ? `calc(${g} + ${r}px)` : "0px"
+                ref: d,
+                className: Q,
+                style: oe({
+                    [te.footerHeight]: t ? `${r}px` : "0px"
                 }),
                 children: [
-                    H(),
+                    R(),
                     L
                 ]
             }),
             /* @__PURE__ */ a("div", {
-                className: P(Y, {
-                    [Z]: !e,
-                    [C]: w,
-                    [ee]: t
+                className: z(U, {
+                    [V]: !e,
+                    [Y]: $,
+                    [Z]: t
                 }),
                 style: {
                     background: u ? i : void 0
@@ -107,16 +107,16 @@ const ne = (e)=>e === document.documentElement ? window : e, ce = (e)=>{
                 "data-testid": `fixed-footer${e ? "-visible" : "-hidden"}`,
                 "data-position-fixed": "bottom",
                 children: e && /* @__PURE__ */ a("aside", {
-                    ref: D,
+                    ref: w,
                     "data-component-name": "FixedFooter",
                     style: {
                         height: k,
-                        marginBottom: g
+                        marginBottom: re
                     },
                     children: l
                 })
             })
         ]
     });
-}, $e = me;
-export { $e as default };
+}, Se = le;
+export { Se as default };

package/dist-es/hooks.js

@@ -1,162 +1,168 @@
-import * as r from "react";
-import b from "./theme-context.js";
-import y from "./screen-size-context.js";
-import W from "./aria-id-getter-context.js";
-import { listenResize as x } from "./utils/dom.js";
-import { isClientSide as h } from "./utils/environment.js";
-import { isEqual as E } from "./utils/helpers.js";
-const H = ()=>{
-    const t = r.useContext(b);
+import * as n from "react";
+import I from "./theme-context.js";
+import E from "./screen-size-context.js";
+import H from "./aria-id-getter-context.js";
+import { listenResize as T } from "./utils/dom.js";
+import { isClientSide as l } from "./utils/environment.js";
+import { isEqual as R } from "./utils/helpers.js";
+const C = ()=>{
+    const t = n.useContext(I);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let a = "", m = 0, w = 0;
-const L = (t)=>{
-    r.useEffect(()=>{
+let f = "", S = 0, g = 0;
+const M = (t)=>{
+    n.useEffect(()=>{
         if (t) {
-            const n = document.scrollingElement || document.documentElement, e = ()=>{
+            const r = document.scrollingElement || document.documentElement, e = ()=>{
                 var i;
                 var _ref, _ref1;
-                if (w++, !(w > 1) && (m = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, a = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (g++, !(g > 1) && (S = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
-                    const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = a + (a.endsWith(";") ? "" : ";") + [
+                    const o = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = f + (f.endsWith(";") ? "" : ";") + [
                         "overflow: hidden;",
                         `overflow-y: ${o};`,
                         "position: fixed;",
-                        `top: ${-m}px;`,
+                        `top: ${-S}px;`,
                         "left: 0px;",
                         "right: 0px;",
                         "bottom: 0px;",
                         "overscroll-behavior-y: contain;"
                     ].join("");
                 }
-            }, s = ()=>{
-                w--, !(w > 0) && (document.body && (document.body.style.cssText = a), n && (n.scrollTop = m));
+            }, c = ()=>{
+                g--, !(g > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = S));
             };
-            return e(), s;
+            return e(), c;
         }
         return ()=>{};
     }, [
         t
     ]);
-}, M = ()=>r.useContext(y), q = ()=>{
-    const [t, n] = r.useState(0), [e, s] = r.useState(0), [i, c] = r.useState(null), o = r.useCallback((d)=>{
-        if (!d) {
-            n(0), s(0);
+}, k = ()=>n.useContext(E), F = function() {
+    let { includeMargins: t = !1 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    const [r, e] = n.useState(0), [c, i] = n.useState(0), [s, o] = n.useState(null), d = n.useCallback((a)=>{
+        if (!a) {
+            e(0), i(0);
             return;
         }
-        const { width: f, height: l } = d[0].contentRect;
-        n(f), s(l);
-    }, []), u = r.useCallback((d)=>{
-        c(d);
+        const { width: w, height: m } = a[0].contentRect;
+        if (t) {
+            const h = window.getComputedStyle(a[0].target), v = parseInt(h.marginTop, 10), b = parseInt(h.marginBottom, 10), W = parseInt(h.marginLeft, 10), x = parseInt(h.marginRight, 10);
+            e(w + W + x), i(m + v + b);
+        } else e(w), i(m);
+    }, [
+        t
+    ]), u = n.useCallback((a)=>{
+        o(a);
     }, []);
-    return r.useEffect(()=>{
-        if (!i) {
-            n(0), s(0);
+    return n.useEffect(()=>{
+        if (!s) {
+            e(0), i(0);
             return;
         }
-        return x(i, o);
+        return T(s, d);
     }, [
-        i,
-        o
+        s,
+        d
     ]), {
-        width: t,
-        height: e,
+        width: r,
+        height: c,
         ref: u
     };
-}, D = (t)=>{
-    const { useId: n } = H();
-    if (n) {
-        const e = n();
+}, $ = (t)=>{
+    const { useId: r } = C();
+    if (r) {
+        const e = r();
         return t || e;
     } else {
-        const e = r.useContext(W);
-        return r.useRef(t || e()).current;
+        const e = n.useContext(H);
+        return n.useRef(t || e()).current;
     }
-}, v = ()=>{
-    var l;
-    const [t, n] = r.useState(h() ? window.innerHeight : 1200), [e, s] = r.useState(h() ? window.innerWidth : 800), [i, c] = r.useState(h() ? window.screen.availHeight : 1200), [o, u] = r.useState(h() ? window.screen.availWidth : 800), [d, f] = r.useState(h() ? ((l = window.visualViewport) == null ? void 0 : l.height) || window.screen.availHeight : 1200);
-    return r.useEffect(()=>{
-        const g = ()=>{
-            var S;
-            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth), f(((S = window.visualViewport) == null ? void 0 : S.height) || window.screen.availHeight);
+}, y = ()=>{
+    var w;
+    const [t, r] = n.useState(l() ? window.innerHeight : 1200), [e, c] = n.useState(l() ? window.innerWidth : 800), [i, s] = n.useState(l() ? window.screen.availHeight : 1200), [o, d] = n.useState(l() ? window.screen.availWidth : 800), [u, a] = n.useState(l() ? ((w = window.visualViewport) == null ? void 0 : w.height) || window.screen.availHeight : 1200);
+    return n.useEffect(()=>{
+        const m = ()=>{
+            var h;
+            r(window.innerHeight), c(window.innerWidth), s(window.screen.availHeight), d(window.screen.availWidth), a(((h = window.visualViewport) == null ? void 0 : h.height) || window.screen.availHeight);
         };
-        return window.addEventListener("resize", g), ()=>{
-            window.removeEventListener("resize", g);
+        return window.addEventListener("resize", m), ()=>{
+            window.removeEventListener("resize", m);
         };
-    }, []), r.useMemo(()=>({
+    }, []), n.useMemo(()=>({
             height: t,
             width: e,
             screenHeight: i,
             screenWidth: o,
-            visualHeight: d
+            visualHeight: u
         }), [
         t,
         e,
         i,
         o,
-        d
+        u
     ]);
-}, k = ()=>{
-    const { height: t } = v();
+}, j = ()=>{
+    const { height: t } = y();
     return t;
-}, F = ()=>{
-    const { width: t } = v();
+}, G = ()=>{
+    const { width: t } = y();
     return t;
-}, $ = h() ? r.useLayoutEffect : r.useEffect, I = (t, n, e)=>{
-    const [s, i] = r.useState(n);
-    return r.useEffect(()=>{
+}, O = l() ? n.useLayoutEffect : n.useEffect, B = (t, r, e)=>{
+    const [c, i] = n.useState(r);
+    return n.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
-        const c = new IntersectionObserver((o)=>{
+        const s = new IntersectionObserver((o)=>{
             i(o[0].isIntersecting);
         }, {
             root: e == null ? void 0 : e.root,
             rootMargin: e == null ? void 0 : e.rootMargin,
             threshold: e == null ? void 0 : e.threshold
         });
-        return c.observe(t.current), ()=>{
-            c.disconnect();
+        return s.observe(t.current), ()=>{
+            s.disconnect();
         };
     }, [
         t,
         e == null ? void 0 : e.root,
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
-    ]), s;
-}, T = (t)=>{
-    const { top: n, right: e, bottom: s, left: i, width: c, height: o, x: u, y: d } = t.getBoundingClientRect();
+    ]), c;
+}, z = (t)=>{
+    const { top: r, right: e, bottom: c, left: i, width: s, height: o, x: d, y: u } = t.getBoundingClientRect();
     return {
-        top: n,
+        top: r,
         right: e,
-        bottom: s,
+        bottom: c,
         left: i,
-        width: c,
+        width: s,
         height: o,
-        x: u,
-        y: d
+        x: d,
+        y: u
     };
-}, j = function(t) {
-    let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
-    const [s, i] = r.useState(), c = I(t, !1);
-    return r.useEffect(()=>{
+}, P = function(t) {
+    let r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+    const [c, i] = n.useState(), s = B(t, !1);
+    return n.useEffect(()=>{
         let o;
-        const u = ()=>{
-            if (t.current && (c || e)) {
-                const d = T(t.current);
-                E(s, d) || i(d), n && (o = requestAnimationFrame(u));
+        const d = ()=>{
+            if (t.current && (s || e)) {
+                const u = z(t.current);
+                R(c, u) || i(u), r && (o = requestAnimationFrame(d));
             } else i(void 0);
         };
-        return o = requestAnimationFrame(u), ()=>{
+        return o = requestAnimationFrame(d), ()=>{
             cancelAnimationFrame(o);
         };
     }, [
         t,
-        s,
         c,
-        n,
+        s,
+        r,
         e
-    ]), s;
+    ]), c;
 };
-export { D as useAriaId, j as useBoundingRect, L as useDisableBodyScroll, q as useElementDimensions, I as useIsInViewport, $ as useIsomorphicLayoutEffect, M as useScreenSize, H as useTheme, k as useWindowHeight, v as useWindowSize, F as useWindowWidth };
+export { $ as useAriaId, P as useBoundingRect, M as useDisableBodyScroll, F as useElementDimensions, B as useIsInViewport, O as useIsomorphicLayoutEffect, k as useScreenSize, C as useTheme, j as useWindowHeight, y as useWindowSize, G as useWindowWidth };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.15.0";
+const o = "15.16.1";
 export { o as PACKAGE_VERSION };