@telefonica/mistica 17.0.0 → 17.2.0

package/dist/menu.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get Menu () {
-        return Ze;
+        return nt;
     },
     get MenuItem () {
-        return Je;
+        return et;
     },
     get MenuSection () {
-        return Qe;
+        return tt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -40,6 +40,7 @@ const _reacttransitiongroup = require("react-transition-group");
 const _common = require("./utils/common.js");
 const _css = require("./utils/css.js");
 const _platform = require("./utils/platform.js");
+const _imagecssmistica = require("./image.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -138,58 +139,64 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Ne = 120, Q = /*#__PURE__*/ _react.createContext({
+const ye = 120, ee = /*#__PURE__*/ _react.createContext({
     focusedItem: null,
     isMenuOpen: !1,
     setFocusedItem: ()=>{},
     closeMenu: ()=>{}
-}), Re = ()=>_react.useContext(Q), w = (c)=>c ? Array.from(c.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Fe = (c, g)=>{
-    if (!g) return null;
-    const f = w(c).indexOf(g);
-    return f < 0 ? null : f;
-}, Je = (param)=>{
-    let { label: c, Icon: g, destructive: f, disabled: a, onPress: R, href: r, to: u, newTab: d, loadOnTop: F, fullPageOnWebView: l, onNavigate: y, controlType: p, checked: v, description: C, dataAttributes: S } = param;
-    const { focusedItem: D, setFocusedItem: s, closeMenu: M, isMenuOpen: h } = Re(), x = _react.useRef(null), H = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, E = x === null || x === void 0 ? void 0 : x.current, P = (E === null || E === void 0 ? void 0 : E.closest("[role=menu]")) || null, n = Fe(P, E), e = _object_spread({
+}), Fe = ()=>_react.useContext(ee), _ = (i)=>i ? Array.from(i.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], De = (i, x)=>{
+    if (!x) return null;
+    const a = _(i).indexOf(x);
+    return a < 0 ? null : a;
+}, et = (param)=>{
+    let { label: i, Icon: x, asset: a, destructive: v, disabled: l, onPress: o, href: m, to: u, newTab: C, loadOnTop: c, fullPageOnWebView: $, onNavigate: d, controlType: T, checked: F, description: S, dataAttributes: D } = param;
+    const { focusedItem: s, setFocusedItem: E, closeMenu: I, isMenuOpen: H } = Fe(), M = _react.useRef(null), A = v ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, R = M === null || M === void 0 ? void 0 : M.current, r = (R === null || R === void 0 ? void 0 : R.closest("[role=menu]")) || null, e = De(r, R), f = _object_spread({
         testid: "MenuItem"
-    }, S), I = (m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-            id: m,
+    }, D), p = (g)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            id: g,
             className: _menucssmistica.itemTextContent,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
-                    color: H,
-                    children: c
+                    color: A,
+                    children: i
                 }),
-                C && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                    children: C
+                    children: S
                 })
             ]
-        }), i = (m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        }), h = (g)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _menucssmistica.itemContent,
             children: [
-                g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _menucssmistica.iconContainer,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                (a || x) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                    className: _menucssmistica.assetContainer
+                }, a ? (0, _dom.getPrefixedDataAttributes)({
+                    testid: "asset"
+                }) : {}), {
+                    style: a ? (0, _css.applyCssVars)({
+                        [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
+                    }) : void 0,
+                    children: a || x && /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
                         size: 24,
-                        color: H
+                        color: A
                     })
-                }),
-                I(m)
+                })),
+                p(g)
             ]
-        }), O = ()=>p === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
-            ref: x,
-            name: c,
-            checked: v,
+        }), b = ()=>T === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
+            ref: M,
+            name: i,
+            checked: F,
             onChange: ()=>{
-                h && n !== null && (R === null || R === void 0 ? void 0 : R(n));
+                H && e !== null && (o === null || o === void 0 ? void 0 : o(e));
             },
-            disabled: a,
+            disabled: l,
             role: "menuitemcheckbox",
-            dataAttributes: e,
+            dataAttributes: f,
             render: (param)=>{
-                let { controlElement: m, labelId: T } = param;
+                let { controlElement: g, labelId: P } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 8,
                     paddingY: 12,
@@ -197,166 +204,167 @@ const Ne = 120, Q = /*#__PURE__*/ _react.createContext({
                         space: "between",
                         alignItems: "center",
                         children: [
-                            i(T),
+                            h(P),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingLeft: 16,
-                                children: m
+                                children: g
                             })
                         ]
                     })
                 });
             }
-        }) : r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-            ref: x,
-            href: r,
-            newTab: d,
-            loadOnTop: F,
+        }) : m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+            ref: M,
+            href: m,
+            newTab: C,
+            loadOnTop: c,
             onNavigate: ()=>{
-                M(), y === null || y === void 0 ? void 0 : y();
+                I(), d === null || d === void 0 ? void 0 : d();
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
+            dataAttributes: f,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
         }) : u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-            ref: x,
+            ref: M,
             to: u,
-            newTab: d,
-            fullPageOnWebView: l,
+            newTab: C,
+            fullPageOnWebView: $,
             onNavigate: ()=>{
-                M(), y === null || y === void 0 ? void 0 : y();
+                I(), d === null || d === void 0 ? void 0 : d();
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
+            dataAttributes: f,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-            ref: x,
+            ref: M,
             onPress: ()=>{
-                h && n !== null && (R === null || R === void 0 ? void 0 : R(n), M());
+                H && e !== null && (o === null || o === void 0 ? void 0 : o(e), I());
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
+            dataAttributes: f,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_menucssmistica.menuItem, {
-            [_menucssmistica.menuItemEnabled]: !a,
-            [_menucssmistica.menuItemDisabled]: a,
-            [_menucssmistica.menuItemHovered]: !a && n !== null && D === n
+            [_menucssmistica.menuItemEnabled]: !l,
+            [_menucssmistica.menuItemDisabled]: l,
+            [_menucssmistica.menuItemHovered]: !l && !v && e !== null && s === e,
+            [_menucssmistica.menuItemHoveredDestructive]: !l && v && e !== null && s === e
         }),
-        onMouseMove: ()=>s(a ? null : n),
-        onMouseLeave: ()=>s(null),
-        children: O()
+        onMouseMove: ()=>E(l ? null : e),
+        onMouseLeave: ()=>E(null),
+        children: b()
     });
-}, Qe = (param)=>{
-    let { children: c } = param;
-    return c ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+}, tt = (param)=>{
+    let { children: i } = param;
+    return i ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            c,
+            i,
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _menucssmistica.menuSectionDivider,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, V = 12, J = 8, Ze = (param)=>{
-    let { renderTarget: c, renderMenu: g, width: f, position: a = "left", dataAttributes: R } = param;
-    const [r, u] = _react.useState(!1), [d, F] = _react.useState(null), [l, y] = _react.useState(null), [p, v] = _react.useState(null), [C, S] = _react.useState(!1), D = _react.useRef(null), [s, M] = _react.useState(null), h = (0, _hooks.useWindowSize)();
+}, V = 12, J = 8, nt = (param)=>{
+    let { renderTarget: i, renderMenu: x, width: a, position: v = "left", dataAttributes: l } = param;
+    const [o, m] = _react.useState(!1), [u, C] = _react.useState(null), [c, $] = _react.useState(null), [d, T] = _react.useState(null), [F, S] = _react.useState(!1), D = _react.useRef(null), [s, E] = _react.useState(null), I = (0, _hooks.useWindowSize)();
     _react.useEffect(()=>{
-        const n = d === null || d === void 0 ? void 0 : d.getBoundingClientRect();
-        if (!l || !n || !r) return;
-        const { top: e, right: I, left: i, bottom: O } = n, m = l.scrollHeight, T = a === "left" ? i : void 0, U = a === "right" ? h.width - I : void 0, W = e - J, X = O + J, _ = h.height - X - V, L = W - V, Y = _ > m, z = L > m, Z = Y || !z && _ > L;
-        M(Z ? {
-            left: T,
-            right: U,
+        const r = u === null || u === void 0 ? void 0 : u.getBoundingClientRect();
+        if (!c || !r || !o) return;
+        const { top: e, right: f, left: p, bottom: h } = r, b = c.scrollHeight, g = v === "left" ? p : void 0, P = v === "right" ? I.width - f : void 0, W = e - J, X = h + J, B = I.height - X - V, L = W - V, Y = B > b, z = L > b, te = Y || !z && B > L;
+        E(te ? {
+            left: g,
+            right: P,
             top: `${X}px`,
             bottom: "auto",
-            maxHeight: Y ? void 0 : _,
+            maxHeight: Y ? void 0 : B,
             transformOrigin: "center top"
         } : {
-            left: T,
-            right: U,
+            left: g,
+            right: P,
             top: "auto",
-            bottom: `${h.height - W}px`,
+            bottom: `${I.height - W}px`,
             maxHeight: z ? void 0 : L,
             transformOrigin: "center bottom"
         });
     }, [
+        v,
+        o,
+        c,
+        u,
         a,
-        r,
-        l,
-        d,
-        f,
-        h
+        I
     ]);
-    const x = _react.useMemo(()=>({
-            ref: F,
+    const H = _react.useMemo(()=>({
+            ref: C,
             onPress: ()=>{
-                u(!r);
+                m(!o);
             }
         }), [
-        F,
-        r
-    ]), H = {
-        ref: (0, _common.combineRefs)(y, D),
+        C,
+        o
+    ]), M = {
+        ref: (0, _common.combineRefs)($, D),
         className: _menucssmistica.menuContainer,
-        close: ()=>u(!1)
-    }, E = _react.useCallback(()=>{
-        const e = w(l).findIndex((I)=>!I.getAttribute("aria-disabled"));
-        v(e < 0 ? null : e);
+        close: ()=>m(!1)
+    }, A = _react.useCallback(()=>{
+        const e = _(c).findIndex((f)=>!f.getAttribute("aria-disabled"));
+        T(e < 0 ? null : e);
     }, [
-        l
-    ]), P = _react.useCallback((n)=>{
-        var _e_i;
-        const e = w(l);
-        n && e.reverse();
-        const I = p === null ? -1 : n ? e.length - 1 - p : p;
-        let i = e.findIndex((m, T)=>!m.getAttribute("aria-disabled") && T > I);
-        i === -1 && (i = e.findIndex((m)=>!m.getAttribute("aria-disabled")));
-        const O = n && i !== -1 ? e.length - 1 - i : i;
-        v(O < 0 ? null : O), (_e_i = e[i]) === null || _e_i === void 0 ? void 0 : _e_i.focus();
+        c
+    ]), R = _react.useCallback((r)=>{
+        var _e_p;
+        const e = _(c);
+        r && e.reverse();
+        const f = d === null ? -1 : r ? e.length - 1 - d : d;
+        let p = e.findIndex((b, g)=>!b.getAttribute("aria-disabled") && g > f);
+        p === -1 && (p = e.findIndex((b)=>!b.getAttribute("aria-disabled")));
+        const h = r && p !== -1 ? e.length - 1 - p : p;
+        T(h < 0 ? null : h), (_e_p = e[p]) === null || _e_p === void 0 ? void 0 : _e_p.focus();
     }, [
-        p,
-        l
+        d,
+        c
     ]);
     return _react.useEffect(()=>{
-        r ? C && l && (E(), S(!1)) : v(null);
+        o ? F && c && (A(), S(!1)) : T(null);
     }, [
-        r,
-        E,
-        C,
-        l
+        o,
+        A,
+        F,
+        c
     ]), _react.useEffect(()=>{
-        const n = (e)=>{
-            if (r) switch(e.key){
+        const r = (e)=>{
+            if (o) switch(e.key){
                 case _keys.RIGHT:
                 case _keys.DOWN:
-                    (0, _dom.cancelEvent)(e), P();
+                    (0, _dom.cancelEvent)(e), R();
                     break;
                 case _keys.LEFT:
                 case _keys.UP:
-                    (0, _dom.cancelEvent)(e), P(!0);
+                    (0, _dom.cancelEvent)(e), R(!0);
                     break;
                 case _keys.ESC:
-                    u(!1);
+                    m(!1);
                     break;
                 case _keys.SPACE:
                 case _keys.ENTER:
-                    (0, _dom.cancelEvent)(e), p !== null && w(l)[p].click();
+                    (0, _dom.cancelEvent)(e), d !== null && _(c)[d].click();
                     break;
                 case _keys.TAB:
                     (0, _dom.cancelEvent)(e);
@@ -368,37 +376,37 @@ const Ne = 120, Q = /*#__PURE__*/ _react.createContext({
                     S(!0);
                     break;
                 case _keys.DOWN:
-                    d === document.activeElement && (S(!0), u(!0));
+                    u === document.activeElement && (S(!0), m(!0));
                     break;
             }
         };
-        return document.addEventListener("keydown", n, !1), ()=>{
-            document.removeEventListener("keydown", n, !1);
+        return document.addEventListener("keydown", r, !1), ()=>{
+            document.removeEventListener("keydown", r, !1);
         };
     }), _react.useEffect(()=>{
-        d === null || d === void 0 ? void 0 : d.setAttribute("aria-haspopup", "menu"), d === null || d === void 0 ? void 0 : d.setAttribute("aria-expanded", String(r));
+        u === null || u === void 0 ? void 0 : u.setAttribute("aria-haspopup", "menu"), u === null || u === void 0 ? void 0 : u.setAttribute("aria-expanded", String(o));
     }, [
-        d,
-        r
+        u,
+        o
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         testid: "Menu"
-    }, R))), {
+    }, l))), {
         children: [
-            c(_object_spread_props(_object_spread({}, x), {
-                isMenuOpen: r
+            i(_object_spread_props(_object_spread({}, H), {
+                isMenuOpen: o
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                    in: r,
+                    in: o,
                     nodeRef: D,
-                    timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Ne,
+                    timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : ye,
                     classNames: _menucssmistica.menuTransitionClasses,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>d === null || d === void 0 ? void 0 : d.focus(),
+                    onExit: ()=>u === null || u === void 0 ? void 0 : u.focus(),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
-                        onPress: (n)=>{
-                            (0, _dom.cancelEvent)(n), u(!1);
+                        onPress: (r)=>{
+                            (0, _dom.cancelEvent)(r), m(!1);
                         },
                         disableScroll: !0,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -412,18 +420,18 @@ const Ne = 120, Q = /*#__PURE__*/ _react.createContext({
                                 [_menucssmistica.vars.right]: `${s.right}px`
                             }, s.maxHeight !== void 0 && {
                                 [_menucssmistica.vars.maxHeight]: `${s.maxHeight}px`
-                            }, f !== void 0 && {
-                                [_menucssmistica.vars.width]: f ? `${f}px` : ""
+                            }, a !== void 0 && {
+                                [_menucssmistica.vars.width]: a ? `${a}px` : ""
                             }) : {}))),
                             role: "menu",
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q.Provider, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ee.Provider, {
                                 value: {
-                                    isMenuOpen: r,
-                                    focusedItem: p,
-                                    setFocusedItem: v,
-                                    closeMenu: ()=>u(!1)
+                                    isMenuOpen: o,
+                                    focusedItem: d,
+                                    setFocusedItem: T,
+                                    closeMenu: ()=>m(!1)
                                 },
-                                children: g(H)
+                                children: x(M)
                             })
                         })
                     })

package/dist/mosaic.css-mistica.js

@@ -12,6 +12,9 @@ _export(exports, {
     get fourItemsContainer () {
         return a;
     },
+    get horizontalMosaicPageContainer () {
+        return o;
+    },
     get singleItemRowContainer () {
         return t;
     },
@@ -19,4 +22,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                  */ var r = "v17_1j2q6te0", t = "v17_1j2q6te1", a = "v17_1j2q6te2";
+/* empty css                                  */ var r = "v17_2_1j2q6te0", t = "v17_2_1j2q6te1", a = "v17_2_1j2q6te2", o = "v17_2_1j2q6te3";

package/dist/mosaic.css.d.ts

@@ -4,3 +4,4 @@ export declare const squareContainer: string;
 export declare const singleItemRowContainer: string;
 /** Aspect ratio = 2/3, but considering the grip gap */
 export declare const fourItemsContainer: string;
+export declare const horizontalMosaicPageContainer: string;

package/dist/mosaic.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get HorizontalMosaic () {
-        return N;
+        return j;
     },
     get VerticalMosaic () {
-        return j;
+        return x;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -80,7 +80,7 @@ const g = {
     }) : r, y = (param)=>{
     let { items: r, isEven: o } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: r.length === 1 ? _mosaiccssmistica.singleItemRowContainer : _mosaiccssmistica.squareContainer,
+        className: `${r.length === 1 ? _mosaiccssmistica.singleItemRowContainer : _mosaiccssmistica.squareContainer} ${_mosaiccssmistica.horizontalMosaicPageContainer}`,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
             gap: g,
             rows: 2,
@@ -107,14 +107,14 @@ const g = {
                 }, e))
         })
     });
-}, N = (param)=>{
+}, j = (param)=>{
     let { items: r, withBullets: o, withControls: t = !0, free: e, "aria-label": p, "aria-labelledby": m, dataAttributes: f } = param;
     const d = r.length, u = d < 5 ? Math.min(d, 1) : Math.floor((d + 1) / 3), i = Array.from({
         length: u
     }, ()=>[]);
     return r.forEach((c, h)=>{
-        const M = Math.min(u - 1, Math.floor(h / 3));
-        i[M].push(c);
+        const w = Math.min(u - 1, Math.floor(h / 3));
+        i[w].push(c);
     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_carousel.Carousel, {
         "aria-label": p,
         "aria-labelledby": m,
@@ -122,6 +122,7 @@ const g = {
             testid: "horizontal-mosaic"
         }),
         items: i.map((c, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                height: "100%",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(y, {
                     items: c,
                     isEven: h % 2 === 0
@@ -131,7 +132,7 @@ const g = {
         withControls: t,
         free: e
     });
-}, z = (param)=>{
+}, P = (param)=>{
     let { items: r, itemRole: o } = param;
     switch(r.length){
         case 1:
@@ -206,7 +207,7 @@ const g = {
                 })
             });
     }
-}, j = (param)=>{
+}, x = (param)=>{
     let { items: r, dataAttributes: o, role: t = "list", itemRole: e = "listitem", "aria-label": p, "aria-labelledby": m } = param;
     const f = r.length, d = Math.ceil(f / 4), u = Array.from({
         length: d
@@ -223,7 +224,7 @@ const g = {
         dataAttributes: _object_spread({
             testid: "vertical-mosaic"
         }, o),
-        children: u.map((i, c)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+        children: u.map((i, c)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
                 items: i,
                 itemRole: e
             }, c))