@telefonica/mistica 14.28.1 → 14.30.0

package/dist-es/navigation-bar.js

@@ -100,20 +100,21 @@ import de from "./grid-layout.js";
 import { useSetModalState as me } from "./modal-context-provider.js";
 import { Logo as j } from "./logo.js";
 import { vars as H } from "./skins/skin-contract.css-mistica.js";
-import { logoContainer as P, spacer as T, burgerMenu as ue, burgerMenuTransition as pe, spacerLarge as he, iconButtonVariants as ge, lineHeightFix as W, textWrapperVariants as F, burgerIconContainer as Ne, iconCloseOpen as fe, iconCloseHidden as ve, iconMenuHidden as Be, iconMenuOpen as be, topFixed as Me, topFixedBottomRow as Ae, navigationBarContent as Te, navigationBarContentRight as Ie, section as Ce, selectedSectionVariantes as Se, navbarBorderColorVariants as C } from "./navigation-bar.css-mistica.js";
+import { logoContainer as P, spacer as T, burgerMenu as ue, burgerMenuTransition as pe, spacerLarge as he, iconButtonVariants as ge, lineHeightFix as W, textWrapperVariants as F, burgerIconContainer as fe, iconCloseOpen as Ne, iconCloseHidden as ve, iconMenuHidden as Be, iconMenuOpen as be, topFixed as Me, topFixedBottomRow as Ae, navigationBarContent as Te, navigationBarContentRight as Ie, section as Ce, selectedSectionVariantes as Se, navbarBorderColorVariants as C } from "./navigation-bar.css-mistica.js";
 import { sprinkles as $ } from "./sprinkles.css-mistica.js";
 import { getPrefixedDataAttributes as Oe } from "./utils/dom.js";
 import Re from "./stack.js";
 import xe from "./box.js";
-const _e = (param)=>/* @__PURE__ */ {
+import { isRunningAcceptanceTest as _e } from "./utils/platform.js";
+const ke = (param)=>/* @__PURE__ */ {
     let { isOpen: n  } = param;
     return i("div", {
-        className: Ne,
+        className: fe,
         role: "presentation",
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: n ? fe : ve,
+                className: n ? Ne : ve,
                 children: /* @__PURE__ */ e(te, {})
             }),
             /* @__PURE__ */ e("div", {
@@ -122,7 +123,7 @@ const _e = (param)=>/* @__PURE__ */ {
             })
         ]
     });
-}, ke = 300, N = (param)=>{
+}, Ee = 300, f = (param)=>{
     let { children: n , topFixed: o , withBorder: t , isMenuOpen: r , isInverse: a , dataAttributes: c , isBottomRow: d = !1  } = param;
     const { isDarkMode: s  } = O();
     return /* @__PURE__ */ e("header", _object_spread_props(_object_spread({
@@ -140,7 +141,7 @@ const _e = (param)=>/* @__PURE__ */ {
     }, Oe(c)), {
         children: n
     }));
-}, Ee = 136, Ge = 24, f = (param)=>{
+}, Ge = 136, ye = 24, N = (param)=>{
     let { right: n , children: o  } = param;
     const { isTabletOrSmaller: t  } = R();
     return /* @__PURE__ */ i("div", {
@@ -150,13 +151,13 @@ const _e = (param)=>/* @__PURE__ */ {
             n && /* @__PURE__ */ e("div", {
                 className: Ie,
                 style: {
-                    marginLeft: t ? Ge : Ee
+                    marginLeft: t ? ye : Ge
                 },
                 children: n
             })
         ]
     });
-}, sn = (param)=>{
+}, dn = (param)=>{
     let { sections: n , selectedIndex: o , right: t , isInverse: r = !1 , topFixed: a = !0 , withBorder: c = !0 , burgerMenuExtra: d , logo: s , large: p = !1  } = param;
     const { texts: h , isDarkMode: q  } = O(), [l, x] = S.useState(!1), [_, v] = S.useState("closed"), k = ne(), J = q ? 1 : 0.2, { isTabletOrSmaller: E  } = R(), G = me();
     if (s = s !== null && s !== void 0 ? s : /* @__PURE__ */ e(j, {
@@ -179,7 +180,7 @@ const _e = (param)=>/* @__PURE__ */ {
                     children: [
                         /* @__PURE__ */ e(A, {
                             isInverse: r,
-                            children: /* @__PURE__ */ e(N, {
+                            children: /* @__PURE__ */ e(f, {
                                 topFixed: a,
                                 withBorder: c,
                                 isMenuOpen: l,
@@ -188,7 +189,7 @@ const _e = (param)=>/* @__PURE__ */ {
                                     "component-name": "MainNavigationBar"
                                 },
                                 children: /* @__PURE__ */ e(m, {
-                                    children: /* @__PURE__ */ e(f, {
+                                    children: /* @__PURE__ */ e(N, {
                                         right: t,
                                         children: /* @__PURE__ */ i(u, {
                                             space: 24,
@@ -200,7 +201,7 @@ const _e = (param)=>/* @__PURE__ */ {
                                                     "aria-expanded": l,
                                                     "aria-controls": k,
                                                     onPress: l ? b : I,
-                                                    children: /* @__PURE__ */ e(_e, {
+                                                    children: /* @__PURE__ */ e(ke, {
                                                         isOpen: l
                                                     })
                                                 }),
@@ -237,7 +238,7 @@ const _e = (param)=>/* @__PURE__ */ {
                                 v("closed");
                             },
                             in: l,
-                            timeout: ke,
+                            timeout: _e() ? 0 : Ee,
                             unmountOnExit: !0,
                             children: (K)=>/* @__PURE__ */ e(L, {
                                     children: /* @__PURE__ */ e("nav", {
@@ -296,7 +297,7 @@ const _e = (param)=>/* @__PURE__ */ {
     return /* @__PURE__ */ i(A, {
         isInverse: r,
         children: [
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(f, {
                 topFixed: a,
                 withBorder: c && !B,
                 isMenuOpen: l,
@@ -305,7 +306,7 @@ const _e = (param)=>/* @__PURE__ */ {
                     "component-name": "MainNavigationBar"
                 },
                 children: /* @__PURE__ */ e(m, {
-                    children: /* @__PURE__ */ e(f, {
+                    children: /* @__PURE__ */ e(N, {
                         right: t,
                         children: /* @__PURE__ */ i(u, {
                             space: 48,
@@ -321,7 +322,7 @@ const _e = (param)=>/* @__PURE__ */ {
                     })
                 })
             }),
-            B && /* @__PURE__ */ e(N, {
+            B && /* @__PURE__ */ e(f, {
                 topFixed: a,
                 withBorder: c,
                 isBottomRow: !0,
@@ -331,7 +332,7 @@ const _e = (param)=>/* @__PURE__ */ {
                     "component-name": "MainNavigationBar"
                 },
                 children: /* @__PURE__ */ e(m, {
-                    children: /* @__PURE__ */ e(f, {
+                    children: /* @__PURE__ */ e(N, {
                         children: y()
                     })
                 })
@@ -341,9 +342,9 @@ const _e = (param)=>/* @__PURE__ */ {
             })
         ]
     });
-}, ln = (param)=>{
+}, mn = (param)=>{
     let { onBack: n , title: o , right: t , isInverse: r = !1 , topFixed: a = !0 , paddingX: c = 0 , withBorder: d = !0  } = param;
-    const { texts: s  } = O(), p = /* @__PURE__ */ e(f, {
+    const { texts: s  } = O(), p = /* @__PURE__ */ e(N, {
         right: t,
         children: /* @__PURE__ */ i(u, {
             space: 24,
@@ -368,7 +369,7 @@ const _e = (param)=>/* @__PURE__ */ {
     return /* @__PURE__ */ i(A, {
         isInverse: r,
         children: [
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(f, {
                 topFixed: a,
                 withBorder: d,
                 isInverse: r,
@@ -392,7 +393,7 @@ const _e = (param)=>/* @__PURE__ */ {
             })
         ]
     });
-}, dn = (param)=>{
+}, un = (param)=>{
     let { logo: n , right: o , isInverse: t = !1 , topFixed: r = !0 , withBorder: a = !0  } = param;
     const { isTabletOrSmaller: c  } = R();
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(j, {
@@ -400,7 +401,7 @@ const _e = (param)=>/* @__PURE__ */ {
     }), /* @__PURE__ */ i(A, {
         isInverse: t,
         children: [
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(f, {
                 topFixed: r,
                 withBorder: a,
                 isInverse: t,
@@ -410,7 +411,7 @@ const _e = (param)=>/* @__PURE__ */ {
                 children: /* @__PURE__ */ e(m, {
                     children: /* @__PURE__ */ e(de, {
                         template: "10",
-                        children: /* @__PURE__ */ e(f, {
+                        children: /* @__PURE__ */ e(N, {
                             right: o,
                             children: n
                         })
@@ -422,7 +423,7 @@ const _e = (param)=>/* @__PURE__ */ {
             })
         ]
     });
-}, mn = (param)=>/* @__PURE__ */ {
+}, pn = (param)=>/* @__PURE__ */ {
     let { children: n  } = param;
     return e("div", {
         className: W,
@@ -433,7 +434,7 @@ const _e = (param)=>/* @__PURE__ */ {
             children: n
         })
     });
-}, un = (_param)=>{
+}, hn = (_param)=>{
     var { children: n  } = _param, o = _object_without_properties(_param, [
         "children"
     ]);
@@ -458,4 +459,4 @@ const _e = (param)=>/* @__PURE__ */ {
         })
     }));
 };
-export { dn as FunnelNavigationBar, sn as MainNavigationBar, ln as NavigationBar, un as NavigationBarAction, mn as NavigationBarActionGroup };
+export { un as FunnelNavigationBar, dn as MainNavigationBar, mn as NavigationBar, hn as NavigationBarAction, pn as NavigationBarActionGroup };

package/dist-es/package-version.js

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

package/dist-es/snackbar.css-mistica.js

@@ -1,4 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./snackbar.css.ts.vanilla.css-mistica.js";
-var n = 300, b = "o7bjb09", v = "_1y2v1nf1x", o = "_1y2v1nf2a", t = "_1y2v1nfb6 _1y2v1nfbi", f = "o7bjb0a", _ = "o7bjb01 _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", p = "o7bjb02", y = "o7bjb04 _1y2v1nfb2 _1y2v1nfdz", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";
-export { n as TRANSITION_TIME_IN_MS, b as button, v as buttonCritical, o as buttonInfo, t as content, f as longButton, _ as snackbar, p as snackbarOpen, y as wrapper, e as wrapperCritical, i as wrapperInfo, j as wrapperOpen };
+var b = 300, f = "o7bjb0a", _ = "_1y2v1nfb6 _1y2v1nfbi", r = {
+    centered: "o7bjb0e _1y2v1nfb6 _1y2v1nfb1 _1y2v1nfbl _1y2v1nfbf _1y2v1nff9",
+    topRight: "_1y2v1nfb6 _1y2v1nfb1 _1y2v1nfbl _1y2v1nfbf _1y2v1nff9 _1y2v1nfef"
+}, y = "o7bjb0h _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", a = "o7bjb0b", o = "o7bjb01 _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", t = "o7bjb02", p = "o7bjb04 _1y2v1nfb2 _1y2v1nfdz", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";
+export { b as TRANSITION_TIME_IN_MS, f as button, _ as content, r as dismissButton, y as dismissIcon, a as longButton, o as snackbar, t as snackbarOpen, p as wrapper, e as wrapperCritical, i as wrapperInfo, j as wrapperOpen };

package/dist-es/snackbar.js

@@ -50,110 +50,165 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
-import * as s from "react";
-import { BaseTouchable as T } from "./touchable.js";
-import l from "classnames";
-import { isWebViewBridgeAvailable as k, nativeMessage as v } from "@tef-novum/webview-bridge";
-import { useElementDimensions as R, useScreenSize as S } from "./hooks.js";
-import { Text2 as B } from "./text.js";
-import { TRANSITION_TIME_IN_MS as C, snackbar as O, snackbarOpen as w, wrapper as A, wrapperCritical as E, wrapperInfo as M, wrapperOpen as W, content as D, button as L, buttonCritical as V, buttonInfo as _, longButton as j } from "./snackbar.css-mistica.js";
-import { sprinkles as p } from "./sprinkles.css-mistica.js";
-import { vars as x } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as F } from "./utils/dom.js";
-import { Portal as P } from "./portal.js";
-const z = (param)=>{
-    let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" , dataAttributes: c  } = param;
-    const [i, u] = s.useState(!1), { width: d , ref: h  } = R(), { isDesktopOrBigger: I  } = S(), m = d > (I ? 160 : 128), f = s.useCallback(()=>{
-        u(!1), setTimeout(()=>{
-            n();
-        }, C);
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+import * as a from "react";
+import { BaseTouchable as b } from "./touchable.js";
+import p from "classnames";
+import { isWebViewBridgeAvailable as R, nativeMessage as k } from "@tef-novum/webview-bridge";
+import { useTheme as E, useElementDimensions as D, useScreenSize as M } from "./hooks.js";
+import { Text2 as U, Text3 as A } from "./text.js";
+import { TRANSITION_TIME_IN_MS as _, snackbar as x, snackbarOpen as y, wrapper as L, wrapperCritical as w, wrapperInfo as W, wrapperOpen as P, content as z, button as C, longButton as j, dismissButton as F, dismissIcon as H } from "./snackbar.css-mistica.js";
+import { sprinkles as g } from "./sprinkles.css-mistica.js";
+import { vars as I } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as V } from "./utils/dom.js";
+import { Portal as X } from "./portal.js";
+import Y from "./generated/mistica-icons/icon-close-regular.js";
+import $ from "./icon-button.js";
+const q = 5e3, G = 1e4, J = (param)=>{
+    let { message: l , buttonText: o , duration: r , onClose: n , type: c , withDismiss: m = !1 , dataAttributes: f  } = param;
+    const { texts: d  } = E(), [i, e] = a.useState(!1), { width: N , ref: v  } = D(), { isDesktopOrBigger: B  } = M(), s = N > (B ? 160 : 128), T = r === 1 / 0 && !o || m, u = a.useCallback((h)=>{
+        e(!1), setTimeout(()=>{
+            n == null || n(h);
+        }, _);
     }, [
         n
     ]);
-    return s.useEffect(()=>{
-        const g = setTimeout(()=>{
-            u(!0);
-        }, 50), b = setTimeout(f, t);
+    return a.useEffect(()=>{
+        const h = setTimeout(()=>{
+            e(!0);
+        }, 50), O = setTimeout(()=>{
+            u({
+                action: "TIMEOUT"
+            });
+        }, r);
         return ()=>{
-            clearTimeout(g), clearTimeout(b);
+            clearTimeout(h), clearTimeout(O);
         };
     }, [
-        f,
-        t
-    ]), /* @__PURE__ */ r(P, {
-        children: /* @__PURE__ */ r("div", {
-            className: l(O, {
-                [w]: i
+        u,
+        r
+    ]), /* @__PURE__ */ t(X, {
+        children: /* @__PURE__ */ t("div", {
+            className: p(x, {
+                [y]: i
             }),
-            children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
+            children: /* @__PURE__ */ S("div", _object_spread_props(_object_spread({
                 role: "alert",
-                className: l(A, o === "CRITICAL" ? E : M, {
-                    [W]: i
+                className: p(L, c === "CRITICAL" ? w : W, {
+                    [P]: i
                 })
-            }, F(c, "SnackBar")), {
-                children: /* @__PURE__ */ N("div", {
-                    className: l(D, p({
-                        flexDirection: m ? "column" : "row",
-                        alignItems: m ? void 0 : "center"
-                    })),
-                    children: [
-                        /* @__PURE__ */ r(B, {
-                            regular: !0,
-                            color: x.colors.textPrimaryInverse,
-                            children: a
-                        }),
-                        e && /* @__PURE__ */ r("div", {
-                            className: l(L, o === "CRITICAL" ? V : _, {
-                                [j]: m
+            }, V(f, "SnackBar")), {
+                children: [
+                    /* @__PURE__ */ S("div", {
+                        className: p(z, g({
+                            flexDirection: s ? "column" : "row",
+                            alignItems: s ? void 0 : "center"
+                        })),
+                        style: T && !s ? {
+                            paddingRight: 32
+                        } : void 0,
+                        children: [
+                            /* @__PURE__ */ t("div", {
+                                style: T && s ? {
+                                    paddingRight: 32
+                                } : void 0,
+                                children: /* @__PURE__ */ t(U, {
+                                    regular: !0,
+                                    color: I.colors.textPrimaryInverse,
+                                    children: l
+                                })
                             }),
-                            children: /* @__PURE__ */ r(T, {
-                                className: p({
-                                    border: "none",
-                                    padding: 0,
-                                    background: "transparent",
-                                    color: "inherit"
+                            o && /* @__PURE__ */ t("div", {
+                                className: p(C, {
+                                    [j]: s
                                 }),
-                                style: {
-                                    lineHeight: "inherit",
-                                    fontWeight: "inherit"
-                                },
-                                ref: h,
-                                onPress: f,
-                                children: e
+                                children: /* @__PURE__ */ t(b, {
+                                    className: g({
+                                        paddingY: 4,
+                                        paddingX: 8,
+                                        border: "none",
+                                        padding: 0,
+                                        background: "transparent"
+                                    }),
+                                    ref: v,
+                                    onPress: ()=>{
+                                        u({
+                                            action: "BUTTON"
+                                        });
+                                    },
+                                    children: /* @__PURE__ */ t(A, {
+                                        medium: !0,
+                                        forceMobileSizes: !0,
+                                        truncate: !0,
+                                        color: c === "CRITICAL" ? I.colors.textPrimaryInverse : I.colors.textLinkSnackbar,
+                                        children: o
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    T ? /* @__PURE__ */ t($, {
+                        size: 32,
+                        onPress: ()=>{
+                            u({
+                                action: "DISMISS"
+                            });
+                        },
+                        "aria-label": d.closeButtonLabel,
+                        className: F[s ? "topRight" : "centered"],
+                        style: {
+                            display: "flex"
+                        },
+                        children: /* @__PURE__ */ t("div", {
+                            className: H,
+                            children: /* @__PURE__ */ t(Y, {
+                                color: I.colors.inverse,
+                                size: 20
                             })
                         })
-                    ]
-                })
+                    }) : null
+                ]
             }))
         })
     });
-}, H = (param)=>{
-    let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE"  } = param;
-    const c = k(), i = s.useRef(n);
-    return s.useEffect(()=>{
+}, K = (param)=>{
+    let { message: l , buttonText: o , duration: r , onClose: n = ()=>{} , type: c = "INFORMATIVE" , withDismiss: m  } = param;
+    const f = o ? G : q;
+    r = Math.max(r !== null && r !== void 0 ? r : f, f);
+    const d = R(), i = a.useRef(n);
+    return a.useEffect(()=>{
         i.current = n;
     }, [
         n
-    ]), s.useEffect(()=>{
-        c && v({
-            message: a,
-            duration: t,
-            buttonText: e,
-            type: o
-        }).then(i.current);
+    ]), a.useEffect(()=>{
+        d && k({
+            message: l,
+            // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
+            duration: r === 1 / 0 ? "PERSISTENT" : void 0,
+            buttonText: o,
+            type: c,
+            withDismiss: m
+        }).then((e)=>{
+            !e || typeof e != "object" || !("action" in e) || typeof e.action != "string" || e.action !== "DISMISS" && e.action !== "TIMEOUT" && e.action !== "BUTTON" ? i.current({
+                action: "DISMISS"
+            }) : i.current({
+                action: e.action
+            });
+        });
     }, [
-        e,
-        t,
-        a,
+        o,
+        r,
+        l,
+        d,
         c,
-        o
-    ]), c ? null : /* @__PURE__ */ r(z, {
-        message: a,
-        duration: t,
-        buttonText: e,
-        type: o,
-        onClose: i.current
+        m
+    ]), d ? null : /* @__PURE__ */ t(J, {
+        message: l,
+        duration: r,
+        buttonText: o,
+        type: c,
+        onClose: i.current,
+        withDismiss: m
     });
-}, re = H;
-export { re as default };
+}, fe = K;
+export { fe as default };