@telefonica/mistica 15.15.0 → 15.16.0

package/dist/table.js

@@ -147,10 +147,10 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const C = {
+const P = {
     default: "8px",
     boxed: "16px"
-}, F = "1px", ge = (a)=>a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, a), {
+}, G = "1px", ke = (a)=>a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, a), {
         "aria-label": a.label,
         small: !0,
         type: "neutral",
@@ -169,8 +169,8 @@ const C = {
         }),
         small: !0,
         bleedY: !0
-    })), G = "left", we = /*#__PURE__*/ _react.forwardRef((_param, R)=>{
-    var { dataAttributes: a, heading: i = [], content: f = [], boxed: p, responsive: Z, fullWidth: b = !0, maxHeight: k, emptyCase: I, columnTextAlign: x = G, rowVerticalAlign: A = "middle", columnWidth: c, hideHeaders: h, scrollOverResponsiveLayout: q } = _param, T = _object_without_properties(_param, [
+    })), Z = "left", we = /*#__PURE__*/ _react.forwardRef((_param, $)=>{
+    var { dataAttributes: a, heading: m = [], content: k = [], boxed: h, responsive: q, fullWidth: u = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = Z, rowVerticalAlign: C = "middle", columnWidth: d, hideHeaders: g, scrollOverResponsiveLayout: J, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
         "dataAttributes",
         "heading",
         "content",
@@ -183,24 +183,25 @@ const C = {
         "rowVerticalAlign",
         "columnWidth",
         "hideHeaders",
-        "scrollOverResponsiveLayout"
+        "scrollOverResponsiveLayout",
+        "rowHeaderIndex"
     ]);
-    const w = (t)=>{
-        var _x_t;
-        return Array.isArray(x) ? (_x_t = x[t]) !== null && _x_t !== void 0 ? _x_t : G : x;
-    }, l = Z === "collapse-rows", P = h === !0 || h === "mobile", J = h === !0 || h === "desktop", u = f.some((t)=>!Array.isArray(t) && t.actions.length > 0), $ = /* @__PURE__ */ (0, _jsxruntime.jsxs)("table", {
+    const x = (l)=>{
+        var _T_l;
+        return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : Z : T;
+    }, r = q === "collapse-rows", z = g === !0 || g === "mobile", K = g === !0 || g === "desktop", y = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), B = /* @__PURE__ */ (0, _jsxruntime.jsxs)("table", {
         className: (0, _classnames.default)(_tablecssmistica.table, {
-            [_tablecssmistica.boxed]: p,
-            [_tablecssmistica.collapsedRowsInMobile]: l,
-            [_tablecssmistica.fullWidth]: b,
-            [_tablecssmistica.hiddenHeadersInDesktop]: J,
-            [_tablecssmistica.hiddenHeadersInMobile]: P || l
+            [_tablecssmistica.boxed]: h,
+            [_tablecssmistica.collapsedRowsInMobile]: r,
+            [_tablecssmistica.fullWidth]: u,
+            [_tablecssmistica.hiddenHeadersInDesktop]: K,
+            [_tablecssmistica.hiddenHeadersInMobile]: z || r
         }),
-        "aria-label": T["aria-label"],
-        "aria-labelledby": T["aria-labelledby"],
-        "aria-describedby": T["aria-describedby"],
+        "aria-label": S["aria-label"],
+        "aria-labelledby": S["aria-labelledby"],
+        "aria-describedby": S["aria-describedby"],
         children: [
-            i.length > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("thead", {
+            m.length > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("thead", {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_text.Text1, {
                     as: "tr",
                     medium: !0,
@@ -208,59 +209,63 @@ const C = {
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     wordBreak: !1,
                     children: [
-                        i.map((t, o)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("th", {
+                        m.map((l, o)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("th", {
                                 scope: "col",
-                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[w(o)], _tablecssmistica.verticalAlign[A], {
+                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[x(o)], _tablecssmistica.verticalAlign[C], {
                                     [_tablecssmistica.rowFirstItem]: o === 0,
-                                    [_tablecssmistica.rowLastItem]: o === i.length - 1 && !u
+                                    [_tablecssmistica.rowLastItem]: o === m.length - 1 && !y
                                 }),
                                 style: {
-                                    minWidth: c == null ? void 0 : c[o],
-                                    width: c == null ? void 0 : c[o]
+                                    minWidth: d == null ? void 0 : d[o],
+                                    width: d == null ? void 0 : d[o]
                                 },
-                                children: t
+                                children: l
                             }, o)),
-                        u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_tableactionsheader.TableActionsHeader, {})
+                        y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_tableactionsheader.TableActionsHeader, {})
                     ]
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("tbody", {
-                children: f.length > 0 ? f.map((t, o)=>{
-                    var _t_actions;
-                    const g = Array.isArray(t) ? t : t.cells, s = Array.isArray(t) ? [] : (_t_actions = t.actions) !== null && _t_actions !== void 0 ? _t_actions : [], B = /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+                children: k.length > 0 ? k.map((l, o)=>{
+                    var _l_actions;
+                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], D = /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                         space: 16,
-                        children: s.map((d, r)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(ge, _object_spread({}, d), r) : d)
-                    }), v = s.length ? `calc(${_iconbuttoncssmistica.iconContainerSize.small} * ${s.length} + 16px * ${s.length - 1})` : "0px";
+                        children: i.map((p, t)=>"Icon" in p || "checkedProps" in p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(ke, _object_spread({}, p), t) : p)
+                    }), I = i.length ? `calc(${_iconbuttoncssmistica.iconContainerSize.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
                     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("tr", {
                         style: {
                             position: "relative"
                         },
                         children: [
-                            g.map((d, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("td", {
-                                    className: (0, _classnames.default)(_tablecssmistica.verticalAlign[A], {
-                                        [_tablecssmistica.rowFirstItem]: r === 0,
-                                        [_tablecssmistica.rowLastItem]: r === g.length - 1 && !u,
-                                        [_tablecssmistica.rowLastCollapsedItem]: r === g.length - 1 && l
+                            n.map((p, t)=>{
+                                const Q = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
+                                return /* @__PURE__ */ (0, _jsxruntime.jsxs)(t === s ? "th" : "td", {
+                                    className: (0, _classnames.default)(_tablecssmistica.verticalAlign[C], {
+                                        [_tablecssmistica.rowFirstItem]: t === 0,
+                                        [_tablecssmistica.rowLastItem]: t === n.length - 1 && !y,
+                                        [_tablecssmistica.rowLastCollapsedItem]: Q && r,
+                                        [_tablecssmistica.collapsedRowHeaderItem]: t === s && r
                                     }),
                                     style: {
                                         // add space between top actions and content
-                                        marginRight: l && s.length ? `calc(${v} + 8px)` : void 0
+                                        marginRight: r && i.length ? `calc(${I} + 8px)` : void 0
                                     },
+                                    scope: t === s ? "row" : void 0,
                                     children: [
-                                        r !== 0 && l && i[r] && !P && // this is aria-hidden because screen readers already read the column heading from the th
+                                        t !== s && r && m[t] && !z && // this is aria-hidden because screen readers already read the column heading from the th
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _tablecssmistica.mobileCellHeading,
                                             "aria-hidden": !0,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                                                 medium: !0,
                                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                                children: i[r]
+                                                children: m[t]
                                             })
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, _object_spread_props(_object_spread({
                                             desktopSize: _text.textProps.text2.desktopSize,
                                             desktopLineHeight: _text.textProps.text2.desktopLineHeight
-                                        }, r === 0 && l ? {
+                                        }, t === s && r ? {
                                             mobileSize: _text.textProps.text4.mobileSize,
                                             mobileLineHeight: _text.textProps.text4.mobileLineHeight
                                         } : {
@@ -270,88 +275,89 @@ const C = {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[w(r)], {
-                                                    [_tablecssmistica.collapsedRowTitle]: r === 0 && l
+                                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[x(t)], {
+                                                    [_tablecssmistica.collapsedRowTitle]: t === s && r
                                                 }),
-                                                children: d
+                                                children: p
                                             })
                                         }))
                                     ]
-                                }, r)),
-                            s.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
-                                className: (0, _classnames.default)(_tablecssmistica.verticalAlign[A], _tablecssmistica.actionsTableCell, _tablecssmistica.rowLastItem, {
-                                    [_tablecssmistica.rowFirstItem]: g.length === 0
+                                });
+                            }),
+                            i.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
+                                className: (0, _classnames.default)(_tablecssmistica.verticalAlign[C], _tablecssmistica.actionsTableCell, _tablecssmistica.rowLastItem, {
+                                    [_tablecssmistica.rowFirstItem]: n.length === 0
                                 }),
                                 align: "right",
                                 style: {
-                                    width: `calc(${v} + 12px)`
+                                    width: `calc(${I} + 12px)`
                                 },
-                                children: B
-                            }) : u && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
+                                children: D
+                            }) : y && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
                                 className: _tablecssmistica.actionsTableCell
                             }),
-                            l && s.length > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
+                            r && i.length > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
                                 className: _tablecssmistica.topActions,
                                 style: {
                                     position: "absolute",
-                                    top: `calc(${p ? C.boxed : C.default} - ${F} + (${_iconbuttoncssmistica.iconContainerSize.small} - ${_iconbuttoncssmistica.iconSize.small}) / 2)`,
-                                    right: p ? `calc(${C.boxed} - ${F})` : 0,
-                                    width: v
+                                    top: `calc(${h ? P.boxed : P.default} - ${G} + (${_iconbuttoncssmistica.iconContainerSize.small} - ${_iconbuttoncssmistica.iconSize.small}) / 2)`,
+                                    right: h ? `calc(${P.boxed} - ${G})` : 0,
+                                    width: I
                                 },
-                                children: B
+                                children: D
                             })
                         ]
                     }, o);
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("tr", {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
-                        colSpan: i.length,
+                        colSpan: m.length,
                         className: (0, _classnames.default)({
-                            [_tablecssmistica.rowLastCollapsedItem]: l
+                            [_tablecssmistica.rowLastCollapsedItem]: r
                         }),
-                        children: typeof I == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        children: typeof A == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingY: 56,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
                                 textAlign: "center",
                                 as: "div",
-                                children: I
+                                children: A
                             })
-                        }) : I
+                        }) : A
                     })
                 })
             })
         ]
-    }), z = function() {
-        let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+    }), w = function() {
+        let l = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
         return {
             className: (0, _classnames.default)(_tablecssmistica.scrollContainer, {
-                [_tablecssmistica.scrollOverResponsiveLayout]: t,
-                [_tablecssmistica.collapsedRowsInMobile]: l,
-                [_tablecssmistica.fullWidth]: b
+                [_tablecssmistica.scrollOverResponsiveLayout]: l,
+                [_tablecssmistica.collapsedRowsInMobile]: r,
+                [_tablecssmistica.fullWidth]: u
             }),
             style: (0, _css.applyCssVars)({
-                [_tablecssmistica.vars.maxHeight]: typeof k == "number" ? `${k}px` : k !== null && k !== void 0 ? k : "auto"
+                [_tablecssmistica.vars.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
             })
         };
     };
-    return p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
-        desktopOnly: l,
+    return h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
+        desktopOnly: r,
         width: "fit-content",
         maxWidth: "100%",
         minWidth: {
-            desktop: b ? "100%" : "auto",
-            mobile: l || b ? "100%" : "auto"
+            desktop: u ? "100%" : "auto",
+            mobile: r || u ? "100%" : "auto"
         },
-        ref: R,
+        ref: $,
         dataAttributes: _object_spread({
             "component-name": "Table"
         }, a),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, z()), {
-            children: $
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, w()), {
+            children: B
         }))
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: R
-    }, (0, _dom.getPrefixedDataAttributes)(a, "Table"), z(q)), {
-        children: $
+        ref: $
+    }, (0, _dom.getPrefixedDataAttributes)(a, "Table"), w(J)), {
+        children: B
     }));
 });

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

@@ -1,4 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./callout.css.ts.vanilla.css-mistica.js";
-var y = "_14g0jmy1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfkb _1y2v1nfkl", _ = "_14g0jmy3 _1y2v1nfi6";
-export { y as container, _ as content };
+var _ = "_14g0jmy5 _1y2v1nfhf _1y2v1nfll", t = "_14g0jmy6", f = "_14g0jmy1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfkb _1y2v1nfkl", o = "_14g0jmy3 _1y2v1nfi6 _1y2v1nfhe";
+export { _ as closeButtonContainer, t as closeButtonContainerSize, f as container, o as content };

package/dist-es/callout.js

@@ -51,98 +51,103 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import n from "./stack.js";
-import g from "./inline.js";
-import b from "./box.js";
-import { useTheme as v } from "./hooks.js";
-import { useThemeVariant as x, ThemeVariant as C } from "./theme-variant-context.js";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import m from "./stack.js";
+import b from "./inline.js";
+import v from "./box.js";
+import { useTheme as x } from "./hooks.js";
+import { useThemeVariant as C, ThemeVariant as B } from "./theme-variant-context.js";
 import { Text3 as k, Text2 as I } from "./text.js";
-import T from "./generated/mistica-icons/icon-close-regular.js";
-import { IconButton as B } from "./icon-button.js";
-import R from "classnames";
-import y from "./button-group.js";
-import { container as S, content as V } from "./callout.css-mistica.js";
-import { vars as j } from "./image.css-mistica.js";
-import { sprinkles as A } from "./sprinkles.css-mistica.js";
-import { vars as e } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as N } from "./utils/dom.js";
-import { applyCssVars as P } from "./utils/css.js";
-const $ = (param)=>{
-    let { title: t, titleAs: c = "h2", description: d, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: m, "aria-label": p, dataAttributes: u } = param;
-    const f = x(), { texts: h } = v();
+import R from "./generated/mistica-icons/icon-close-regular.js";
+import { IconButton as T } from "./icon-button.js";
+import N from "classnames";
+import S from "./button-group.js";
+import { container as y, content as V, closeButtonContainerSize as j, closeButtonContainer as A } from "./callout.css-mistica.js";
+import { vars as P } from "./image.css-mistica.js";
+import { sprinkles as $ } from "./sprinkles.css-mistica.js";
+import { vars as o } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as w } from "./utils/dom.js";
+import { applyCssVars as z } from "./utils/css.js";
+const D = (param)=>{
+    let { title: a, titleAs: c = "h2", description: d, icon: i, onClose: t, button: l, secondaryButton: s, buttonLink: n, "aria-label": p, dataAttributes: u, role: f } = param;
+    const h = C(), { texts: g } = x();
     return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({
-        className: R(S, A({
+        className: N(y, $({
             background: {
-                inverse: e.colors.backgroundContainer,
-                alternative: e.colors.backgroundContainer,
-                default: e.colors.backgroundContainerAlternative
-            }[f]
+                inverse: o.colors.backgroundContainer,
+                alternative: o.colors.backgroundContainer,
+                default: o.colors.backgroundContainerAlternative
+            }[h]
         })),
-        style: P({
-            [j.mediaBorderRadius]: e.borderRadii.mediaSmall
+        style: z({
+            [P.mediaBorderRadius]: o.borderRadii.mediaSmall
         }),
-        "aria-label": p !== null && p !== void 0 ? p : t
-    }, N(u, "Callout")), {
-        children: /* @__PURE__ */ o(C, {
+        "aria-label": p !== null && p !== void 0 ? p : a,
+        role: f
+    }, w(u, "Callout")), {
+        children: /* @__PURE__ */ e(B, {
             isInverse: !1,
             children: [
-                a && /* @__PURE__ */ r(b, {
+                i && /* @__PURE__ */ r(v, {
                     paddingRight: 16,
-                    children: a
+                    children: i
                 }),
-                /* @__PURE__ */ r("div", {
+                /* @__PURE__ */ e("div", {
                     className: V,
-                    children: /* @__PURE__ */ o(n, {
-                        space: 16,
-                        children: [
-                            /* @__PURE__ */ o(g, {
-                                fullWidth: !0,
-                                alignItems: "flex-start",
-                                space: "between",
-                                children: [
-                                    /* @__PURE__ */ o(n, {
-                                        space: 4,
-                                        children: [
-                                            /* @__PURE__ */ r(k, {
-                                                as: c,
-                                                regular: !0,
-                                                children: t
-                                            }),
-                                            /* @__PURE__ */ r(I, {
-                                                as: "p",
-                                                regular: !0,
-                                                color: e.colors.textSecondary,
-                                                children: d
-                                            })
-                                        ]
-                                    }),
-                                    i && /* @__PURE__ */ r("div", {
-                                        style: {
-                                            // Align the X with the text content
-                                            marginTop: "0.125rem"
-                                        },
-                                        children: /* @__PURE__ */ r(B, {
-                                            small: !0,
-                                            bleedY: !0,
-                                            bleedRight: !0,
-                                            Icon: T,
-                                            onPress: i,
-                                            "aria-label": h.closeButtonLabel
+                    children: [
+                        /* @__PURE__ */ e(m, {
+                            space: 16,
+                            children: [
+                                /* @__PURE__ */ e(b, {
+                                    fullWidth: !0,
+                                    alignItems: "flex-start",
+                                    space: "between",
+                                    children: [
+                                        /* @__PURE__ */ e(m, {
+                                            space: 4,
+                                            children: [
+                                                /* @__PURE__ */ r(k, {
+                                                    as: c,
+                                                    regular: !0,
+                                                    children: a
+                                                }),
+                                                /* @__PURE__ */ r(I, {
+                                                    as: "p",
+                                                    regular: !0,
+                                                    color: o.colors.textSecondary,
+                                                    children: d
+                                                })
+                                            ]
+                                        }),
+                                        t && // Create empty div in order to fill space that iconButton occupies.
+                                        // Without this, the content's vertical alignment can be affected
+                                        /* @__PURE__ */ r("div", {
+                                            className: j
                                         })
-                                    })
-                                ]
-                            }),
-                            (l || s || m) && /* @__PURE__ */ r(y, {
-                                primaryButton: l,
-                                secondaryButton: s,
-                                link: m
+                                    ]
+                                }),
+                                (l || s || n) && /* @__PURE__ */ r(S, {
+                                    primaryButton: l,
+                                    secondaryButton: s,
+                                    link: n
+                                })
+                            ]
+                        }),
+                        t && /* @__PURE__ */ r("div", {
+                            className: A,
+                            children: /* @__PURE__ */ r(T, {
+                                small: !0,
+                                bleedY: !0,
+                                bleedRight: !0,
+                                Icon: R,
+                                onPress: t,
+                                "aria-label": g.closeButtonLabel
                             })
-                        ]
-                    })
+                        })
+                    ]
                 })
             ]
         })
     }));
-}, X = $;
-export { X as default };
+}, rr = D;
+export { rr as default };