@telefonica/mistica 15.16.4 → 15.18.0

package/dist-es/chip.js

@@ -51,59 +51,60 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as l, Fragment as x, jsx as t } from "react/jsx-runtime";
-import d from "classnames";
-import { useTheme as j } from "./hooks.js";
-import A from "./badge.js";
-import i from "./box.js";
-import { Text2 as D } from "./text.js";
-import V from "./generated/mistica-icons/icon-close-regular.js";
-import { pxToRem as o } from "./utils/css.js";
-import { iconActive as z, icon as L, chipVariants as m, chipWrapper as h, button as M, wrappedContent as F, chipInteractiveVariants as W } from "./chip.css-mistica.js";
-import { vars as $ } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as q } from "./utils/dom.js";
+import { jsxs as d, Fragment as C, jsx as t } from "react/jsx-runtime";
+import m from "classnames";
+import { useTheme as P } from "./hooks.js";
+import x from "./badge.js";
+import o from "./box.js";
+import { Text2 as V } from "./text.js";
+import z from "./generated/mistica-icons/icon-close-regular.js";
+import { pxToRem as i } from "./utils/css.js";
+import { iconActive as D, icon as M, chipVariants as h, chipWrapper as u, button as F, wrappedContent as W, chipInteractiveVariants as $ } from "./chip.css-mistica.js";
+import { vars as q } from "./skins/skin-contract.css-mistica.js";
 import { useThemeVariant as E } from "./theme-variant-context.js";
 import G, { BaseTouchable as H } from "./touchable.js";
 const J = (e)=>{
-    const { Icon: n, children: R, id: T, dataAttributes: p, active: a, badge: r, onClose: s } = e, { texts: k, isDarkMode: I, textPresets: B } = j(), u = E() === "alternative", f = n ? {
+    const { Icon: n, children: A, id: R, dataAttributes: T, active: a, badge: r, onClose: s, closeButtonLabel: k } = e, { texts: B, isDarkMode: I, textPresets: w } = P(), p = E() === "alternative", f = n ? {
         mobile: 16,
         desktop: 8
     } : {
         mobile: 20,
         desktop: 12
-    }, w = {
+    }, y = {
         mobile: 20,
         desktop: 12
     }, g = {
         mobile: 16,
         desktop: 8
-    }, b = /* @__PURE__ */ l(x, {
+    }, b = /* @__PURE__ */ d(C, {
         children: [
-            n && /* @__PURE__ */ t(i, {
+            n && /* @__PURE__ */ t(o, {
                 paddingRight: 4,
-                className: a ? z : L,
+                className: a ? D : M,
                 children: /* @__PURE__ */ t(n, {
                     color: "currentColor",
-                    size: o(16)
+                    size: i(16)
                 })
             }),
-            /* @__PURE__ */ t(i, {
+            /* @__PURE__ */ t(o, {
                 paddingRight: r ? 8 : s ? 4 : 0,
-                children: /* @__PURE__ */ t(D, {
-                    id: T,
-                    weight: B.indicator.weight,
+                children: /* @__PURE__ */ t(V, {
+                    id: R,
+                    weight: w.indicator.weight,
                     truncate: 1,
                     color: "currentColor",
-                    children: R
+                    children: A
                 })
             })
         ]
-    });
-    if (s) return /* @__PURE__ */ l(i, _object_spread_props(_object_spread({
-        className: d(u ? m.overAlternative : m.default, h),
+    }), c = _object_spread({
+        "component-name": "Chip"
+    }, T);
+    if (s) return /* @__PURE__ */ d(o, {
+        className: m(p ? h.overAlternative : h.default, u),
         paddingLeft: f,
-        paddingRight: g
-    }, q(p, "Chip")), {
+        paddingRight: g,
+        dataAttributes: c,
         children: [
             b,
             /* @__PURE__ */ t(G, {
@@ -111,41 +112,39 @@ const J = (e)=>{
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    width: o(24),
-                    height: o(24)
+                    width: i(24),
+                    height: i(24)
                 },
-                "aria-label": k.closeButtonLabel,
+                "aria-label": k !== null && k !== void 0 ? k : B.closeButtonLabel,
                 onPress: ()=>s(),
-                children: /* @__PURE__ */ t(V, {
-                    size: o(16),
-                    color: $.colors.neutralMedium
+                children: /* @__PURE__ */ t(z, {
+                    size: i(16),
+                    color: q.colors.neutralMedium
                 })
             })
         ]
-    }));
-    const c = e.href || e.onPress || e.to, y = a !== void 0 || c, v = _object_spread({
-        "component-name": "Chip"
-    }, p), N = ()=>r ? /* @__PURE__ */ t(x, {
-            children: r === !0 ? /* @__PURE__ */ t(A, {}) : /* @__PURE__ */ t(A, {
+    });
+    const l = e.href || e.onPress || e.to, N = a !== void 0 || l, j = ()=>r ? /* @__PURE__ */ t(C, {
+            children: r === !0 ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(x, {
                 value: r
             })
-        }) : null, C = (P)=>/* @__PURE__ */ l(i, {
-            className: d(m[a ? "active" : u ? "overAlternative" : "default"], // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
-            c ? F : h, {
-                [W[I ? "dark" : "light"]]: y
+        }) : null, v = (L)=>/* @__PURE__ */ d(o, {
+            className: m(h[a ? "active" : p ? "overAlternative" : "default"], // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
+            l ? W : u, {
+                [$[I ? "dark" : "light"]]: N
             }),
             paddingLeft: f,
-            paddingRight: r ? g : w,
-            dataAttributes: P,
+            paddingRight: r ? g : y,
+            dataAttributes: L,
             children: [
                 b,
-                N()
+                j()
             ]
         });
-    return c ? /* @__PURE__ */ t(H, _object_spread_props(_object_spread({}, e), {
-        className: d(h, M),
-        dataAttributes: v,
-        children: C()
-    })) : C(v);
+    return l ? /* @__PURE__ */ t(H, _object_spread_props(_object_spread({}, e), {
+        className: m(u, F),
+        dataAttributes: c,
+        children: v()
+    })) : v(c);
 }, ot = J;
 export { ot as default };

package/dist-es/dialog.js

@@ -79,7 +79,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as e, jsxs as w, Fragment as L } from "react/jsx-runtime";
-import * as o from "react";
+import * as n from "react";
 import E from "classnames";
 import { ButtonDanger as O, ButtonPrimary as S, ButtonSecondary as M } from "./button.js";
 import { Portal as _ } from "./portal.js";
@@ -95,32 +95,32 @@ import k from "./box.js";
 import { isRunningAcceptanceTest as H } from "./utils/platform.js";
 import { useSetModalStateEffect as J } from "./modal-context-provider.js";
 import Q from "./stack.js";
-import { ANIMATION_DURATION_MS as X, wrapper as Z, modalOpacityLayer as $, closedOpactityLayer as ee, modalContent as te, closedModalContent as oe, modalCloseButtonContainer as ne, variants as ae, iconContainer as re, dialogContent as ie, dialogActions as se } from "./dialog.css-mistica.js";
+import { ANIMATION_DURATION_MS as X, wrapper as Z, modalOpacityLayer as $, closedOpactityLayer as ee, modalContent as te, closedModalContent as ne, modalCloseButtonContainer as oe, variants as ae, iconContainer as re, dialogContent as ie, dialogActions as se } from "./dialog.css-mistica.js";
 import { vars as le } from "./skins/skin-contract.css-mistica.js";
-const ce = ()=>process.env.NODE_ENV !== "test" && !H(), de = (t)=>{
-    const { texts: i } = D(), { className: d, title: r, message: m, icon: n, extra: c, showCancelButton: s, showAcceptButton: l, cancelText: f = i.dialogCancelButton, acceptText: b = i.dialogAcceptButton, onCancel: g, onAccept: v, destructive: B = !1 } = t, u = t.type === "dialog", h = u && !!t.link || l || s, C = {
-        onPress: v || (()=>{}),
-        children: b,
+const ce = ()=>process.env.NODE_ENV !== "test" && !H(), ue = (t)=>{
+    const { texts: i } = D(), { className: u, title: r, message: f, icon: o, extra: c, showCancelButton: s, showAcceptButton: l, cancelText: g = i.dialogCancelButton, acceptText: m = i.dialogAcceptButton, onCancel: h, onAccept: C, destructive: B = !1 } = t, d = t.type === "dialog", p = d && !!t.link || l || s, y = {
+        onPress: C || (()=>{}),
+        children: m,
         // @deprecated - testid should be removed but many webapp tests depend on this
         dataAttributes: {
             testid: "dialog-accept-button"
         }
     };
     return /* @__PURE__ */ w("div", {
-        className: E(ae[u ? "dialog" : "default"], d),
+        className: E(ae[d ? "dialog" : "default"], u),
         children: [
-            n && /* @__PURE__ */ e(k, {
+            o && /* @__PURE__ */ e(k, {
                 paddingBottom: 24,
                 children: /* @__PURE__ */ e("div", {
                     className: re,
-                    children: /*#__PURE__*/ o.cloneElement(n, {
+                    children: /*#__PURE__*/ n.cloneElement(o, {
                         size: "100%"
                     })
                 })
             }),
             r && /* @__PURE__ */ e(k, {
                 paddingBottom: 16,
-                children: u ? /* @__PURE__ */ e(Y, {
+                children: d ? /* @__PURE__ */ e(Y, {
                     as: "h2",
                     children: r
                 }) : /* @__PURE__ */ e(A, {
@@ -145,134 +145,137 @@ const ce = ()=>process.env.NODE_ENV !== "test" && !H(), de = (t)=>{
                         /* @__PURE__ */ e(q, {
                             color: le.colors.textSecondary,
                             regular: !0,
-                            children: m
+                            children: f
                         }),
                         c
                     ]
                 })
             }),
-            h && /* @__PURE__ */ e("div", {
+            p && /* @__PURE__ */ e("div", {
                 className: se,
                 children: /* @__PURE__ */ e(U, {
-                    link: u ? t.link : void 0,
+                    link: d ? t.link : void 0,
                     primaryButton: l ? B ? /* @__PURE__ */ e(O, _object_spread({
                         tabIndex: 1
-                    }, C)) : /* @__PURE__ */ e(S, _object_spread({
+                    }, y)) : /* @__PURE__ */ e(S, _object_spread({
                         tabIndex: 1
-                    }, C)) : void 0,
+                    }, y)) : void 0,
                     secondaryButton: s ? /* @__PURE__ */ e(M, {
                         tabIndex: 2,
-                        onPress: g || (()=>{}),
+                        onPress: h || (()=>{}),
                         dataAttributes: {
                             testid: "dialog-cancel-button"
                         },
-                        children: f
+                        children: g
                     }) : void 0
                 })
             })
         ]
     });
-}, ue = (param)=>{
-    let { type: t, message: i, title: d, acceptText: r, cancelText: m, onAccept: n, onCancel: c, onDestroy: s } = param;
+}, de = (param)=>{
+    let { type: t, message: i, title: u, acceptText: r, cancelText: f, onAccept: o, onCancel: c, onDestroy: s } = param;
     return t === "confirm" ? z({
         message: i,
-        title: d,
-        cancelText: m,
+        title: u,
+        cancelText: f,
         acceptText: r
     }).then((l)=>{
-        l ? n == null || n() : c == null || c(), s();
+        l ? o == null || o() : c == null || c(), s();
     }) : K({
         message: i,
-        title: d,
+        title: u,
         buttonText: r
     }).then(()=>{
-        n == null || n(), s();
+        o == null || o(), s();
     });
 }, me = (param)=>{
-    let { type: t, onAccept: i, onCancel: d, onDestroy: r, acceptText: m, cancelText: n, message: c, title: s } = param;
-    const { texts: l } = D(), f = o.useRef({
+    let { type: t, onAccept: i, onCancel: u, onDestroy: r, acceptText: f, cancelText: o, message: c, title: s } = param;
+    const { texts: l } = D(), g = n.useRef({
         type: t,
         onAccept: i,
-        onCancel: d,
+        onCancel: u,
         onDestroy: r,
-        acceptText: m || l.dialogAcceptButton,
-        cancelText: n || l.dialogCancelButton,
+        acceptText: f || l.dialogAcceptButton,
+        cancelText: o || l.dialogCancelButton,
         message: c,
         title: s
-    });
-    return o.useEffect(()=>{
-        ue(f.current);
+    }), m = n.useRef(!1);
+    return n.useEffect(()=>{
+        m.current || (m.current = !0, de(g.current).finally(()=>{
+            m.current = !1;
+        }));
     }, []), /* @__PURE__ */ e(L, {});
 }, Ie = (t)=>{
     J();
-    const i = o.useRef(null), { texts: d } = D(), [r, m] = o.useState(!1), n = o.useRef(!1), c = o.useRef(!1), [s, l] = o.useState(!1), f = o.useRef(!1), b = o.useRef(ce() ? X : 0), g = t.type !== "dialog" && W(), v = t.type === "dialog", B = t.type === "alert", { onAccept: u, onCancel: h, onDestroy: C } = t, I = _object_without_properties(t, [
+    const i = n.useRef(null), { texts: u } = D(), [r, f] = n.useState(!1), o = n.useRef(!1), c = n.useRef(!1), [s, l] = n.useState(!1), g = n.useRef(!1), m = n.useRef(ce() ? X : 0), h = t.type !== "dialog" && W(), C = t.type === "dialog", B = t.type === "alert", { onAccept: d, onCancel: p, onDestroy: y } = t, I = _object_without_properties(t, [
         "onAccept",
         "onCancel",
         "onDestroy"
     ]);
-    o.useEffect(()=>{
+    n.useEffect(()=>{
         const a = setTimeout(()=>{
-            n.current || l(!0);
-        }, b.current);
+            o.current || l(!0);
+        }, m.current);
         return ()=>{
             clearTimeout(a);
         };
     }, []);
-    const x = o.useCallback(()=>{
-        c.current || (c.current = !0, f.current ? u == null || u() : h == null || h(), C());
+    const x = n.useCallback(()=>{
+        c.current || (c.current = !0, g.current ? d == null || d() : p == null || p(), y());
     }, [
-        u,
-        h,
-        C
-    ]), R = o.useCallback(()=>{
+        d,
+        p,
+        y
+    ]), R = n.useCallback(()=>{
         let a;
-        return !n.current && s && (n.current = !0, l(!1), m(!0), a = setTimeout(x, b.current)), ()=>{
+        return !o.current && s && (o.current = !0, l(!1), f(!0), a = setTimeout(x, m.current)), ()=>{
             a && clearTimeout(a);
         };
     }, [
         x,
         s
-    ]), N = o.useCallback(()=>{
-        f.current = !0, R();
+    ]), N = n.useCallback(()=>{
+        g.current = !0, R();
     }, [
         R
-    ]), y = o.useCallback(()=>{
-        f.current = !1, R();
+    ]), b = n.useCallback(()=>{
+        g.current = !1, R();
     }, [
         R
-    ]), p = o.useCallback(()=>{
-        n.current || (B ? N() : y());
+    ]), v = n.useCallback(()=>{
+        o.current || (B ? N() : b());
     }, [
         N,
-        y,
+        b,
         B
-    ]), T = o.useCallback((a)=>{
-        a.key === G && (a.stopPropagation(), a.preventDefault(), p());
+    ]), T = n.useCallback((a)=>{
+        a.key === G && (a.stopPropagation(), a.preventDefault(), v());
     }, [
-        p
+        v
     ]);
-    o.useEffect(()=>{
-        if (!g) return document.addEventListener("keydown", T), ()=>{
+    n.useEffect(()=>{
+        if (!h) return document.addEventListener("keydown", T), ()=>{
             document.removeEventListener("keydown", T);
         };
     }, [
         T,
-        g
-    ]), o.useEffect(()=>{
-        if (!g) return window.addEventListener("popstate", p), ()=>{
-            window.removeEventListener("popstate", p);
+        h
+    ]), n.useEffect(()=>{
+        if (!h) return window.addEventListener("popstate", v), ()=>{
+            window.removeEventListener("popstate", v);
         };
     }, [
-        p,
-        g
+        v,
+        h
     ]);
-    const P = o.useCallback((a)=>{
-        a.stopPropagation(), v && y();
+    const P = n.useCallback((a)=>{
+        a.stopPropagation(), C && b();
     }, [
-        v,
-        y
+        C,
+        b
     ]);
-    return g ? /* @__PURE__ */ e(me, _object_spread({}, t)) : /* @__PURE__ */ e(_, {
+    var _t_closeButtonLabel;
+    return h ? /* @__PURE__ */ e(me, _object_spread({}, t)) : /* @__PURE__ */ e(_, {
         className: Z,
         children: /* @__PURE__ */ e(j, {
             children: /* @__PURE__ */ e("div", {
@@ -289,30 +292,30 @@ const ce = ()=>process.env.NODE_ENV !== "test" && !H(), de = (t)=>{
                     children: /* @__PURE__ */ w("div", {
                         ref: i,
                         onAnimationEnd: (a)=>{
-                            a.target === i.current && (n.current || l(!0));
+                            a.target === i.current && (o.current || l(!0));
                         },
                         onTransitionEnd: (a)=>{
-                            a.target === i.current && n.current && x();
+                            a.target === i.current && o.current && x();
                         },
                         className: E(te, {
-                            [oe]: r
+                            [ne]: r
                         }),
                         children: [
-                            v && /* @__PURE__ */ e("div", {
-                                className: ne,
+                            C && /* @__PURE__ */ e("div", {
+                                className: oe,
                                 children: /* @__PURE__ */ e(V, {
-                                    onPress: p,
-                                    "aria-label": d.modalClose || d.closeButtonLabel,
+                                    onPress: v,
+                                    "aria-label": (_t_closeButtonLabel = t.closeButtonLabel) !== null && _t_closeButtonLabel !== void 0 ? _t_closeButtonLabel : u.modalClose || u.closeButtonLabel,
                                     bleedLeft: !0,
                                     bleedRight: !0,
                                     bleedY: !0,
                                     Icon: F
                                 })
                             }),
-                            /* @__PURE__ */ e(de, _object_spread_props(_object_spread({}, I), {
+                            /* @__PURE__ */ e(ue, _object_spread_props(_object_spread({}, I), {
                                 showAcceptButton: t.type !== "dialog" || !!t.onAccept,
                                 showCancelButton: t.type === "confirm" || t.type === "dialog" && !!t.onCancel,
-                                onCancel: y,
+                                onCancel: b,
                                 onAccept: N
                             }))
                         ]