@ai-matrx/design-system 0.49.48 → 0.49.50

package/dist/data-table/index.js

@@ -43688,6 +43688,27 @@ function MatrxTableGroupHeaderRow({
   onToggle,
   dataAttributes
 }) {
+  const startSpacerColumns = spacers && spacers.start > 0 ? 1 : 0;
+  const desktopLabelSpan = leadingCols + 1 + startSpacerColumns;
+  const mobileAggregateIndex = labelMobileHidden ? cells.findIndex((cell) => !cell.mobileHidden) : -1;
+  const mobileAggregate = mobileAggregateIndex >= 0 ? cells[mobileAggregateIndex] : void 0;
+  const mobileUsesActions = Boolean(labelMobileHidden && !mobileAggregate && showActionsCol);
+  const mobileLabelSpan = Math.max(1, leadingCols + startSpacerColumns + (mobileAggregate ? 1 : 0) + (mobileUsesActions ? 1 : 0));
+  const labelContent = /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 items-center gap-1.5", style: depth > 0 ? { paddingLeft: `${depth * 1.25}rem` } : void 0, children: [
+    collapsible ? /* @__PURE__ */ jsx40(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": !collapsed,
+        "aria-label": `${collapsed ? "Show" : "Hide"} ${label}`,
+        className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+        children: collapsed ? /* @__PURE__ */ jsx40(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx40(ChevronDown, { className: "h-4 w-4" })
+      }
+    ) : /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: "inline-block h-5 w-5 shrink-0" }),
+    /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 truncate", children: labelSlot ?? /* @__PURE__ */ jsx40("span", { className: "text-sm font-semibold text-foreground", children: label }) }),
+    /* @__PURE__ */ jsx40("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: summary })
+  ] });
   return /* @__PURE__ */ jsxs30(
     "tr",
     {
@@ -43696,30 +43717,20 @@ function MatrxTableGroupHeaderRow({
       ...dataAttributes ?? {},
       className: cn("border-y border-border", depth === 0 ? "bg-muted/40" : "bg-muted/20"),
       children: [
-        Array.from({ length: leadingCols }).map((_, i) => /* @__PURE__ */ jsx40("td", { className: "px-2 py-1.5" }, `group-lead-${i}`)),
-        spacers && spacers.start > 0 ? /* @__PURE__ */ jsx40("td", { "aria-hidden": "true", className: "border-0 p-0", style: { width: `${spacers.start}px` } }) : null,
         /* @__PURE__ */ jsx40(
           "td",
           {
+            colSpan: desktopLabelSpan,
             className: cn("px-2 py-1.5 align-middle", labelMobileHidden && "max-sm:hidden"),
-            children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5", style: depth > 0 ? { paddingLeft: `${depth * 1.25}rem` } : void 0, children: [
-              collapsible ? /* @__PURE__ */ jsx40(
-                "button",
-                {
-                  type: "button",
-                  onClick: onToggle,
-                  "aria-expanded": !collapsed,
-                  "aria-label": `${collapsed ? "Show" : "Hide"} ${label}`,
-                  className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-                  children: collapsed ? /* @__PURE__ */ jsx40(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx40(ChevronDown, { className: "h-4 w-4" })
-                }
-              ) : /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: "inline-block h-5 w-5 shrink-0" }),
-              labelSlot ?? /* @__PURE__ */ jsx40("span", { className: "truncate text-sm font-semibold text-foreground", children: label }),
-              /* @__PURE__ */ jsx40("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: summary })
-            ] })
+            children: labelContent
           },
           labelColumnId ?? "group-label"
         ),
+        labelMobileHidden ? /* @__PURE__ */ jsx40("td", { colSpan: mobileLabelSpan, className: "px-2 py-1.5 align-middle sm:hidden", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx40("div", { className: "min-w-0 flex-1", children: labelContent }),
+          mobileAggregate?.content !== void 0 && mobileAggregate?.content !== null ? /* @__PURE__ */ jsx40("span", { ...mobileAggregate.aggregate ? { "data-matrx-table-group-aggregate": mobileAggregate.id } : {}, className: cn("whitespace-nowrap text-xs font-medium text-muted-foreground", mobileAggregate.align === "right" && "text-right"), children: mobileAggregate.content }) : null,
+          mobileUsesActions ? actions ?? null : null
+        ] }) }) : null,
         cells.map((cell) => /* @__PURE__ */ jsx40(
           "td",
           {
@@ -43729,7 +43740,7 @@ function MatrxTableGroupHeaderRow({
               // right-aligned money column it reads as a different column's value.
               cell.align === "center" && "text-center",
               cell.align === "right" && "text-right",
-              cell.mobileHidden && "max-sm:hidden"
+              (cell.mobileHidden || labelMobileHidden && cell === mobileAggregate) && "max-sm:hidden"
             ),
             children: cell.content !== void 0 && cell.content !== null ? /* @__PURE__ */ jsx40(
               "span",
@@ -43743,7 +43754,7 @@ function MatrxTableGroupHeaderRow({
           cell.id
         )),
         spacers && spacers.end > 0 ? /* @__PURE__ */ jsx40("td", { "aria-hidden": "true", className: "border-0 p-0", style: { width: `${spacers.end}px` } }) : null,
-        showActionsCol ? /* @__PURE__ */ jsx40("td", { className: "px-2 py-1.5 text-right", children: actions ?? null }) : null
+        showActionsCol ? /* @__PURE__ */ jsx40("td", { className: cn("px-2 py-1.5 text-right", mobileUsesActions && "max-sm:hidden"), children: actions ?? null }) : null
       ]
     }
   );