@mond-design-system/react 5.1.0 → 6.0.0

package/dist/index.d.cts

@@ -960,8 +960,7 @@ declare function ListItem({ title, description, leading, trailing, actions, onCl
 
 interface DataColumn<Row> {
     key: string;
-    /** Read in the header row, and echoed beside the cell once the table has
-        folded into cards. */
+    /** Read in the header row. */
     header: ReactNode;
     /** CSS width for the column, applied through the colgroup. */
     width?: string;
@@ -1012,11 +1011,13 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     ref?: Ref<HTMLDivElement>;
 } & DataTableSelection;
 /**
- * Rows and columns, folded into cards on a narrow screen.
+ * Rows and columns, at every width.
  *
- * Below the wide breakpoint a table cannot be read across, so each row becomes
- * a card and every cell carries its column's header beside it. The markup is
- * one table either way: what changes is the layout, never the semantics.
+ * A table is for reading across a row and comparing down a column, and it stays
+ * one on a narrow screen rather than turning into something else: where the
+ * columns need more room than there is, the table pans sideways inside a box
+ * that takes focus. An app wanting cards on a phone builds cards — that is a
+ * different component, not this one wearing a second layout.
  *
  * ```tsx
  * <DataTable

package/dist/index.d.ts

@@ -960,8 +960,7 @@ declare function ListItem({ title, description, leading, trailing, actions, onCl
 
 interface DataColumn<Row> {
     key: string;
-    /** Read in the header row, and echoed beside the cell once the table has
-        folded into cards. */
+    /** Read in the header row. */
     header: ReactNode;
     /** CSS width for the column, applied through the colgroup. */
     width?: string;
@@ -1012,11 +1011,13 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     ref?: Ref<HTMLDivElement>;
 } & DataTableSelection;
 /**
- * Rows and columns, folded into cards on a narrow screen.
+ * Rows and columns, at every width.
  *
- * Below the wide breakpoint a table cannot be read across, so each row becomes
- * a card and every cell carries its column's header beside it. The markup is
- * one table either way: what changes is the layout, never the semantics.
+ * A table is for reading across a row and comparing down a column, and it stays
+ * one on a narrow screen rather than turning into something else: where the
+ * columns need more room than there is, the table pans sideways inside a box
+ * that takes focus. An app wanting cards on a phone builds cards — that is a
+ * different component, not this one wearing a second layout.
  *
  * ```tsx
  * <DataTable

package/dist/index.js

@@ -1492,7 +1492,7 @@ function ListItem({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped
-var DataTable_module_default = { "root": "mds-DataTable__root", "table": "mds-DataTable__table", "body": "mds-DataTable__body", "row": "mds-DataTable__row", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "key": "mds-DataTable__key", "lead": "mds-DataTable__lead", "selected": "mds-DataTable__selected", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions", "head": "mds-DataTable__head" };
+var DataTable_module_default = { "root": "mds-DataTable__root", "scroll": "mds-DataTable__scroll", "table": "mds-DataTable__table", "row": "mds-DataTable__row", "body": "mds-DataTable__body", "selected": "mds-DataTable__selected", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions" };
 function DataTable({
   label,
   columns,
@@ -1527,13 +1527,19 @@ function DataTable({
     return typeof first === "string" ? first : rowKey(row);
   };
   return /* @__PURE__ */ jsxs("div", { className: cx(DataTable_module_default.root, className), ref, ...rest, children: [
-    /* @__PURE__ */ jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
+    /* @__PURE__ */ jsx("div", { className: DataTable_module_default.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
       /* @__PURE__ */ jsxs("colgroup", { children: [
         selectable && /* @__PURE__ */ jsx("col", {}),
-        columns.map((column) => /* @__PURE__ */ jsx("col", { style: column.width !== void 0 ? { width: column.width } : void 0 }, column.key)),
+        columns.map((column) => /* @__PURE__ */ jsx(
+          "col",
+          {
+            style: column.width !== void 0 ? { width: column.width } : void 0
+          },
+          column.key
+        )),
         rowActions && /* @__PURE__ */ jsx("col", {})
       ] }),
-      /* @__PURE__ */ jsx(VisuallyHidden, { as: "thead", className: DataTable_module_default.head, children: /* @__PURE__ */ jsxs("tr", { className: DataTable_module_default.row, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: DataTable_module_default.row, children: [
         selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -1553,7 +1559,11 @@ function DataTable({
         return /* @__PURE__ */ jsxs(
           "tr",
           {
-            className: cx(DataTable_module_default.row, taken && DataTable_module_default.selected, rowMuted?.(row) === true && DataTable_module_default.muted),
+            className: cx(
+              DataTable_module_default.row,
+              taken && DataTable_module_default.selected,
+              rowMuted?.(row) === true && DataTable_module_default.muted
+            ),
             children: [
               selectable && /* @__PURE__ */ jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsx(
                 Checkbox,
@@ -1564,17 +1574,14 @@ function DataTable({
                   onChange: (event) => toggle(key, event.target.checked)
                 }
               ) }),
-              columns.map((column, index) => /* @__PURE__ */ jsxs("td", { className: cx(DataTable_module_default.cell, index === 0 && DataTable_module_default.lead), children: [
-                index > 0 && /* @__PURE__ */ jsx("span", { className: DataTable_module_default.key, "aria-hidden": "true", children: column.header }),
-                column.cell(row)
-              ] }, column.key)),
+              columns.map((column) => /* @__PURE__ */ jsx("td", { className: DataTable_module_default.cell, children: column.cell(row) }, column.key)),
               rowActions && /* @__PURE__ */ jsx("td", { className: DataTable_module_default.actions, children: rowActions(row) })
             ]
           },
           key
         );
       }) : empty !== void 0 && /* @__PURE__ */ jsx("tr", { className: DataTable_module_default.row, children: /* @__PURE__ */ jsx("td", { className: DataTable_module_default.empty, colSpan: span, children: /* @__PURE__ */ jsx(Text, { variant: "note", children: empty }) }) }) })
-    ] }),
+    ] }) }),
     selectable && selected.length > 0 && bulkActions !== void 0 && /* @__PURE__ */ jsxs("div", { className: DataTable_module_default.bulk, role: "status", children: [
       /* @__PURE__ */ jsx(Text, { variant: "meta", children: selectionLabels.count(selected.length) }),
       /* @__PURE__ */ jsx("div", { className: DataTable_module_default.bulkActions, children: bulkActions })