@mond-design-system/react 5.1.0 → 6.0.0

package/dist/index.cjs

@@ -1494,7 +1494,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,
@@ -1529,13 +1529,19 @@ function DataTable({
     return typeof first === "string" ? first : rowKey(row);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(DataTable_module_default.root, className), ref, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module_default.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
         selectable && /* @__PURE__ */ jsxRuntime.jsx("col", {}),
-        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: column.width !== void 0 ? { width: column.width } : void 0 }, column.key)),
+        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          "col",
+          {
+            style: column.width !== void 0 ? { width: column.width } : void 0
+          },
+          column.key
+        )),
         rowActions && /* @__PURE__ */ jsxRuntime.jsx("col", {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { as: "thead", className: DataTable_module_default.head, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: DataTable_module_default.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: DataTable_module_default.row, children: [
         selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
@@ -1555,7 +1561,11 @@ function DataTable({
         return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
                 Checkbox,
@@ -1566,17 +1576,14 @@ function DataTable({
                   onChange: (event) => toggle(key, event.target.checked)
                 }
               ) }),
-              columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cx(DataTable_module_default.cell, index === 0 && DataTable_module_default.lead), children: [
-                index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module_default.key, "aria-hidden": "true", children: column.header }),
-                column.cell(row)
-              ] }, column.key)),
+              columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.cell, children: column.cell(row) }, column.key)),
               rowActions && /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.actions, children: rowActions(row) })
             ]
           },
           key
         );
       }) : empty !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module_default.row, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.empty, colSpan: span, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "note", children: empty }) }) }) })
-    ] }),
+    ] }) }),
     selectable && selected.length > 0 && bulkActions !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DataTable_module_default.bulk, role: "status", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: selectionLabels.count(selected.length) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module_default.bulkActions, children: bulkActions })