@telefonica/mistica 15.15.0 → 15.16.0

package/dist-es/table.js

@@ -77,30 +77,30 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import * as K from "react";
-import { getPrefixedDataAttributes as Q } from "./utils/dom.js";
-import { table as U, boxed as X, collapsedRowsInMobile as H, fullWidth as D, hiddenHeadersInDesktop as V, hiddenHeadersInMobile as W, cellTextAlign as O, verticalAlign as S, rowFirstItem as N, rowLastItem as L, rowLastCollapsedItem as M, mobileCellHeading as ee, collapsedRowTitle as te, actionsTableCell as E, topActions as le, scrollContainer as re, scrollOverResponsiveLayout as ae, vars as oe } from "./table.css-mistica.js";
-import { vars as Y } from "./skins/skin-contract.css-mistica.js";
-import se, { Text1 as _, textProps as m, Text2 as ne } from "./text.js";
-import { InternalBoxed as ie } from "./boxed.js";
-import n from "classnames";
-import ce from "./box.js";
-import { applyCssVars as de } from "./utils/css.js";
-import me from "./inline.js";
-import { IconButton as pe, ToggleIconButton as be } from "./icon-button.js";
-import { iconContainerSize as j, iconSize as he } from "./icon-button.css-mistica.js";
-import { TableActionsHeader as ue } from "./table-actions-header.js";
-const C = {
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import * as U from "react";
+import { getPrefixedDataAttributes as X } from "./utils/dom.js";
+import { table as V, boxed as W, collapsedRowsInMobile as O, fullWidth as M, hiddenHeadersInDesktop as ee, hiddenHeadersInMobile as te, cellTextAlign as E, verticalAlign as L, rowFirstItem as N, rowLastItem as R, rowLastCollapsedItem as H, collapsedRowHeaderItem as le, mobileCellHeading as re, collapsedRowTitle as ae, actionsTableCell as Y, topActions as oe, scrollContainer as se, scrollOverResponsiveLayout as ne, vars as ie } from "./table.css-mistica.js";
+import { vars as _ } from "./skins/skin-contract.css-mistica.js";
+import ce, { Text1 as j, textProps as b, Text2 as me } from "./text.js";
+import { InternalBoxed as de } from "./boxed.js";
+import c from "classnames";
+import pe from "./box.js";
+import { applyCssVars as be } from "./utils/css.js";
+import he from "./inline.js";
+import { IconButton as ue, ToggleIconButton as ge } from "./icon-button.js";
+import { iconContainerSize as F, iconSize as ye } from "./icon-button.css-mistica.js";
+import { TableActionsHeader as fe } from "./table-actions-header.js";
+const P = {
     default: "8px",
     boxed: "16px"
-}, F = "1px", ge = (a)=>a.Icon ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, a), {
+}, G = "1px", ke = (a)=>a.Icon ? /* @__PURE__ */ e(ue, _object_spread_props(_object_spread({}, a), {
         "aria-label": a.label,
         small: !0,
         type: "neutral",
         backgroundType: "transparent",
         bleedY: !0
-    })) : /* @__PURE__ */ e(be, _object_spread_props(_object_spread({}, a), {
+    })) : /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, a), {
         checkedProps: _object_spread_props(_object_spread({}, a.checkedProps), {
             "aria-label": a.checkedProps.label,
             type: "brand",
@@ -113,8 +113,8 @@ const C = {
         }),
         small: !0,
         bleedY: !0
-    })), G = "left", we = /*#__PURE__*/ K.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__*/ U.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",
@@ -127,177 +127,183 @@ 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__ */ y("table", {
-        className: n(U, {
-            [X]: p,
-            [H]: l,
-            [D]: b,
-            [V]: J,
-            [W]: P || l
+    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__ */ f("table", {
+        className: c(V, {
+            [W]: h,
+            [O]: r,
+            [M]: u,
+            [ee]: K,
+            [te]: 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__ */ e("thead", {
-                children: /* @__PURE__ */ y(_, {
+            m.length > 0 && /* @__PURE__ */ e("thead", {
+                children: /* @__PURE__ */ f(j, {
                     as: "tr",
                     medium: !0,
                     transform: "uppercase",
-                    color: Y.colors.textSecondary,
+                    color: _.colors.textSecondary,
                     wordBreak: !1,
                     children: [
-                        i.map((t, o)=>/* @__PURE__ */ e("th", {
+                        m.map((l, o)=>/* @__PURE__ */ e("th", {
                                 scope: "col",
-                                className: n(O[w(o)], S[A], {
+                                className: c(E[x(o)], L[C], {
                                     [N]: o === 0,
-                                    [L]: o === i.length - 1 && !u
+                                    [R]: 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__ */ e(ue, {})
+                        y && /* @__PURE__ */ e(fe, {})
                     ]
                 })
             }),
             /* @__PURE__ */ e("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__ */ e(me, {
+                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__ */ e(he, {
                         space: 16,
-                        children: s.map((d, r)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ge, _object_spread({}, d), r) : d)
-                    }), v = s.length ? `calc(${j.small} * ${s.length} + 16px * ${s.length - 1})` : "0px";
+                        children: i.map((p, t)=>"Icon" in p || "checkedProps" in p ? /* @__PURE__ */ e(ke, _object_spread({}, p), t) : p)
+                    }), I = i.length ? `calc(${F.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
                     return(// Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
-                    /* @__PURE__ */ y("tr", {
+                    /* @__PURE__ */ f("tr", {
                         style: {
                             position: "relative"
                         },
                         children: [
-                            g.map((d, r)=>/* @__PURE__ */ y("td", {
-                                    className: n(S[A], {
-                                        [N]: r === 0,
-                                        [L]: r === g.length - 1 && !u,
-                                        [M]: 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__ */ f(t === s ? "th" : "td", {
+                                    className: c(L[C], {
+                                        [N]: t === 0,
+                                        [R]: t === n.length - 1 && !y,
+                                        [H]: Q && r,
+                                        [le]: 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__ */ e("div", {
-                                            className: ee,
+                                            className: re,
                                             "aria-hidden": !0,
-                                            children: /* @__PURE__ */ e(_, {
+                                            children: /* @__PURE__ */ e(j, {
                                                 medium: !0,
-                                                color: Y.colors.textSecondary,
-                                                children: i[r]
+                                                color: _.colors.textSecondary,
+                                                children: m[t]
                                             })
                                         }),
-                                        /* @__PURE__ */ e(se, _object_spread_props(_object_spread({
-                                            desktopSize: m.text2.desktopSize,
-                                            desktopLineHeight: m.text2.desktopLineHeight
-                                        }, r === 0 && l ? {
-                                            mobileSize: m.text4.mobileSize,
-                                            mobileLineHeight: m.text4.mobileLineHeight
+                                        /* @__PURE__ */ e(ce, _object_spread_props(_object_spread({
+                                            desktopSize: b.text2.desktopSize,
+                                            desktopLineHeight: b.text2.desktopLineHeight
+                                        }, t === s && r ? {
+                                            mobileSize: b.text4.mobileSize,
+                                            mobileLineHeight: b.text4.mobileLineHeight
                                         } : {
-                                            mobileSize: m.text2.mobileSize,
-                                            mobileLineHeight: m.text2.mobileLineHeight
+                                            mobileSize: b.text2.mobileSize,
+                                            mobileLineHeight: b.text2.mobileLineHeight
                                         }), {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ e("div", {
-                                                className: n(O[w(r)], {
-                                                    [te]: r === 0 && l
+                                                className: c(E[x(t)], {
+                                                    [ae]: t === s && r
                                                 }),
-                                                children: d
+                                                children: p
                                             })
                                         }))
                                     ]
-                                }, r)),
-                            s.length > 0 ? /* @__PURE__ */ e("td", {
-                                className: n(S[A], E, L, {
-                                    [N]: g.length === 0
+                                });
+                            }),
+                            i.length > 0 ? /* @__PURE__ */ e("td", {
+                                className: c(L[C], Y, R, {
+                                    [N]: n.length === 0
                                 }),
                                 align: "right",
                                 style: {
-                                    width: `calc(${v} + 12px)`
+                                    width: `calc(${I} + 12px)`
                                 },
-                                children: B
-                            }) : u && /* @__PURE__ */ e("td", {
-                                className: E
+                                children: D
+                            }) : y && /* @__PURE__ */ e("td", {
+                                className: Y
                             }),
-                            l && s.length > 0 && /* @__PURE__ */ e("td", {
-                                className: le,
+                            r && i.length > 0 && /* @__PURE__ */ e("td", {
+                                className: oe,
                                 style: {
                                     position: "absolute",
-                                    top: `calc(${p ? C.boxed : C.default} - ${F} + (${j.small} - ${he.small}) / 2)`,
-                                    right: p ? `calc(${C.boxed} - ${F})` : 0,
-                                    width: v
+                                    top: `calc(${h ? P.boxed : P.default} - ${G} + (${F.small} - ${ye.small}) / 2)`,
+                                    right: h ? `calc(${P.boxed} - ${G})` : 0,
+                                    width: I
                                 },
-                                children: B
+                                children: D
                             })
                         ]
                     }, o));
                 }) : /* @__PURE__ */ e("tr", {
                     children: /* @__PURE__ */ e("td", {
-                        colSpan: i.length,
-                        className: n({
-                            [M]: l
+                        colSpan: m.length,
+                        className: c({
+                            [H]: r
                         }),
-                        children: typeof I == "string" ? /* @__PURE__ */ e(ce, {
+                        children: typeof A == "string" ? /* @__PURE__ */ e(pe, {
                             paddingY: 56,
-                            children: /* @__PURE__ */ e(ne, {
+                            children: /* @__PURE__ */ e(me, {
                                 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: n(re, {
-                [ae]: t,
-                [H]: l,
-                [D]: b
+            className: c(se, {
+                [ne]: l,
+                [O]: r,
+                [M]: u
             }),
-            style: de({
-                [oe.maxHeight]: typeof k == "number" ? `${k}px` : k !== null && k !== void 0 ? k : "auto"
+            style: be({
+                [ie.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
             })
         };
     };
-    return p ? /* @__PURE__ */ e(ie, {
-        desktopOnly: l,
+    return h ? /* @__PURE__ */ e(de, {
+        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__ */ e("div", _object_spread_props(_object_spread({}, z()), {
-            children: $
+        children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, w()), {
+            children: B
         }))
     }) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-        ref: R
-    }, Q(a, "Table"), z(q)), {
-        children: $
+        ref: $
+    }, X(a, "Table"), w(J)), {
+        children: B
     }));
 });
 export { we as Table };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.15.0",
+    "version": "15.16.0",
     "license": "MIT",
     "repository": {
         "type": "git",