@mond-design-system/react 4.6.0 → 4.7.0

package/dist/index.cjs

@@ -660,7 +660,7 @@ function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
 }
 function SheetHeader({ children, onClose, closeLabel }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sheet_module_default.header, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sheet_module_default.headerTitle, children }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Sheet_module_default.headerTitle, children }),
     onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": closeLabel, className: Sheet_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Sheet_module_default.closeGlyph }) })
   ] });
 }
@@ -1187,12 +1187,40 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
 
+// src/internal/forkRef.ts
+function forkRef(own, given) {
+  return (node) => {
+    own.current = node;
+    if (typeof given === "function") given(node);
+    else if (given != null) given.current = node;
+  };
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
-var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "label": "mds-Checkbox__label" };
-function Checkbox({ label, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_module_default.box, ...rest }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module_default.label, children: label })
+var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
+function Checkbox({
+  label,
+  labelHidden = false,
+  indeterminate = false,
+  className,
+  ref,
+  ...rest
+}) {
+  const own = react.useRef(null);
+  react.useEffect(() => {
+    if (own.current !== null) own.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, labelHidden && Checkbox_module_default.bare, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: Checkbox_module_default.box,
+        ref: forkRef(own, ref),
+        ...rest
+      }
+    ),
+    labelHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { className: Checkbox_module_default.label, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module_default.label, children: label })
   ] });
 }
 
@@ -1399,6 +1427,97 @@ 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" };
+function DataTable({
+  label,
+  columns,
+  rows,
+  rowKey,
+  rowLabel,
+  rowActions,
+  actionsHeader,
+  rowMuted,
+  empty,
+  ref,
+  selected,
+  onSelectedChange,
+  selectionLabels,
+  bulkActions,
+  className,
+  ...rest
+}) {
+  const selectable = selected !== void 0;
+  const keys = rows.map(rowKey);
+  const all = selectable && keys.length > 0 && keys.every((key) => selected.includes(key));
+  const some = selectable && !all && keys.some((key) => selected.includes(key));
+  const span = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+  const toggle = (key, taken) => {
+    if (selected === void 0) return;
+    const next = taken ? [...selected, key] : selected.filter((each) => each !== key);
+    onSelectedChange(keys.filter((each) => next.includes(each)));
+  };
+  const nameOf = (row) => {
+    if (rowLabel !== void 0) return rowLabel(row);
+    const first = columns[0]?.cell(row);
+    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.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)),
+        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: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            label: selectionLabels.all,
+            labelHidden: true,
+            checked: all,
+            indeterminate: some,
+            onChange: (event) => onSelectedChange(event.target.checked ? keys : [])
+          }
+        ) }),
+        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.cell, children: column.header }, column.key)),
+        rowActions && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.actions, children: actionsHeader })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: DataTable_module_default.body, children: rows.length > 0 ? rows.map((row) => {
+        const key = rowKey(row);
+        const taken = selected?.includes(key) ?? false;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "tr",
+          {
+            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,
+                {
+                  label: selectionLabels.row(nameOf(row)),
+                  labelHidden: true,
+                  checked: taken,
+                  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)),
+              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 })
+    ] })
+  ] });
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped
 var EmptyState_module_default = { "root": "mds-EmptyState__root", "icon": "mds-EmptyState__icon", "action": "mds-EmptyState__action" };
 function EmptyState({ title, description, icon, action, className }) {
@@ -1670,7 +1789,7 @@ function CardFooter({ className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped
-var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
+var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "headerTitle": "mds-Modal__headerTitle", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
 function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog", children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Overlay,
@@ -1687,7 +1806,7 @@ function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog"
   );
 }
 function ModalHeader({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.header, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.header, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module_default.headerTitle, children }) });
 }
 function ModalBody({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.body, children });
@@ -2343,11 +2462,7 @@ function VideoPlayer({
     {
       className: cx(VideoPlayer_module_default.player, covered && VideoPlayer_module_default.covered, className),
       "aria-label": labels.region,
-      ref: (node) => {
-        root.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
+      ref: forkRef(root, ref),
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: VideoPlayer_module_default.frame, children: [
@@ -2512,6 +2627,7 @@ exports.ChipGroup = ChipGroup;
 exports.ConfirmDialog = ConfirmDialog;
 exports.Container = Container;
 exports.CountButton = CountButton;
+exports.DataTable = DataTable;
 exports.DateTimePicker = DateTimePicker;
 exports.Divider = Divider;
 exports.EmptyState = EmptyState;