@mond-design-system/react 4.6.1 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +182 -10
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +245 -0
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +146 -2
  7. package/dist/index.d.ts +146 -2
  8. package/dist/index.js +179 -11
  9. package/dist/index.js.map +1 -1
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -60,7 +60,7 @@ Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
60
60
 
61
61
  **Layout** — `Stack`, `Inline`, `Container`, `Screen`, `ScreenContent`
62
62
 
63
- **Navigation** — `Tabs`, `TabList`, `Tab`, `TabPanel`, `AppBar`, `TabBar`
63
+ **Navigation** — `Tabs`, `TabList`, `Tab`, `TabPanel`, `AppBar`, `TabBar`, `SideNav`
64
64
 
65
65
  **Overlays** — `Modal`, `Sheet`, `ConfirmDialog`
66
66
 
package/dist/index.cjs CHANGED
@@ -1187,12 +1187,40 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
1187
1187
  ] });
1188
1188
  }
1189
1189
 
1190
+ // src/internal/forkRef.ts
1191
+ function forkRef(own, given) {
1192
+ return (node) => {
1193
+ own.current = node;
1194
+ if (typeof given === "function") given(node);
1195
+ else if (given != null) given.current = node;
1196
+ };
1197
+ }
1198
+
1190
1199
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
1191
- var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "label": "mds-Checkbox__label" };
1192
- function Checkbox({ label, className, ...rest }) {
1193
- return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, className), children: [
1194
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_module_default.box, ...rest }),
1195
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module_default.label, children: label })
1200
+ var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
1201
+ function Checkbox({
1202
+ label,
1203
+ labelHidden = false,
1204
+ indeterminate = false,
1205
+ className,
1206
+ ref,
1207
+ ...rest
1208
+ }) {
1209
+ const own = react.useRef(null);
1210
+ react.useEffect(() => {
1211
+ if (own.current !== null) own.current.indeterminate = indeterminate;
1212
+ }, [indeterminate]);
1213
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, labelHidden && Checkbox_module_default.bare, className), children: [
1214
+ /* @__PURE__ */ jsxRuntime.jsx(
1215
+ "input",
1216
+ {
1217
+ type: "checkbox",
1218
+ className: Checkbox_module_default.box,
1219
+ ref: forkRef(own, ref),
1220
+ ...rest
1221
+ }
1222
+ ),
1223
+ labelHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { className: Checkbox_module_default.label, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module_default.label, children: label })
1196
1224
  ] });
1197
1225
  }
1198
1226
 
@@ -1399,6 +1427,97 @@ function ListItem({
1399
1427
  );
1400
1428
  }
1401
1429
 
1430
+ // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped
1431
+ 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" };
1432
+ function DataTable({
1433
+ label,
1434
+ columns,
1435
+ rows,
1436
+ rowKey,
1437
+ rowLabel,
1438
+ rowActions,
1439
+ actionsHeader,
1440
+ rowMuted,
1441
+ empty,
1442
+ ref,
1443
+ selected,
1444
+ onSelectedChange,
1445
+ selectionLabels,
1446
+ bulkActions,
1447
+ className,
1448
+ ...rest
1449
+ }) {
1450
+ const selectable = selected !== void 0;
1451
+ const keys = rows.map(rowKey);
1452
+ const all = selectable && keys.length > 0 && keys.every((key) => selected.includes(key));
1453
+ const some = selectable && !all && keys.some((key) => selected.includes(key));
1454
+ const span = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
1455
+ const toggle = (key, taken) => {
1456
+ if (selected === void 0) return;
1457
+ const next = taken ? [...selected, key] : selected.filter((each) => each !== key);
1458
+ onSelectedChange(keys.filter((each) => next.includes(each)));
1459
+ };
1460
+ const nameOf = (row) => {
1461
+ if (rowLabel !== void 0) return rowLabel(row);
1462
+ const first = columns[0]?.cell(row);
1463
+ return typeof first === "string" ? first : rowKey(row);
1464
+ };
1465
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(DataTable_module_default.root, className), ref, ...rest, children: [
1466
+ /* @__PURE__ */ jsxRuntime.jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
1467
+ /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
1468
+ selectable && /* @__PURE__ */ jsxRuntime.jsx("col", {}),
1469
+ columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: column.width !== void 0 ? { width: column.width } : void 0 }, column.key)),
1470
+ rowActions && /* @__PURE__ */ jsxRuntime.jsx("col", {})
1471
+ ] }),
1472
+ /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { as: "thead", className: DataTable_module_default.head, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: DataTable_module_default.row, children: [
1473
+ selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
1474
+ Checkbox,
1475
+ {
1476
+ label: selectionLabels.all,
1477
+ labelHidden: true,
1478
+ checked: all,
1479
+ indeterminate: some,
1480
+ onChange: (event) => onSelectedChange(event.target.checked ? keys : [])
1481
+ }
1482
+ ) }),
1483
+ columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.cell, children: column.header }, column.key)),
1484
+ rowActions && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.actions, children: actionsHeader })
1485
+ ] }) }),
1486
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: DataTable_module_default.body, children: rows.length > 0 ? rows.map((row) => {
1487
+ const key = rowKey(row);
1488
+ const taken = selected?.includes(key) ?? false;
1489
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1490
+ "tr",
1491
+ {
1492
+ className: cx(DataTable_module_default.row, taken && DataTable_module_default.selected, rowMuted?.(row) === true && DataTable_module_default.muted),
1493
+ children: [
1494
+ selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
1495
+ Checkbox,
1496
+ {
1497
+ label: selectionLabels.row(nameOf(row)),
1498
+ labelHidden: true,
1499
+ checked: taken,
1500
+ onChange: (event) => toggle(key, event.target.checked)
1501
+ }
1502
+ ) }),
1503
+ columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cx(DataTable_module_default.cell, index === 0 && DataTable_module_default.lead), children: [
1504
+ index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module_default.key, "aria-hidden": "true", children: column.header }),
1505
+ column.cell(row)
1506
+ ] }, column.key)),
1507
+ rowActions && /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.actions, children: rowActions(row) })
1508
+ ]
1509
+ },
1510
+ key
1511
+ );
1512
+ }) : 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 }) }) }) })
1513
+ ] }),
1514
+ selectable && selected.length > 0 && bulkActions !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DataTable_module_default.bulk, role: "status", children: [
1515
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: selectionLabels.count(selected.length) }),
1516
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module_default.bulkActions, children: bulkActions })
1517
+ ] })
1518
+ ] });
1519
+ }
1520
+
1402
1521
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped
1403
1522
  var EmptyState_module_default = { "root": "mds-EmptyState__root", "icon": "mds-EmptyState__icon", "action": "mds-EmptyState__action" };
1404
1523
  function EmptyState({ title, description, icon, action, className }) {
@@ -1825,6 +1944,59 @@ function TabBarAction({ label, icon, onClick }) {
1825
1944
  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": label, className: TabBar_module_default.action, onClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: icon }) });
1826
1945
  }
1827
1946
 
1947
+ // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SideNav/SideNav.module.css?mds-scoped
1948
+ var SideNav_module_default = { "nav": "mds-SideNav__nav", "group": "mds-SideNav__group", "heading": "mds-SideNav__heading", "item": "mds-SideNav__item", "active": "mds-SideNav__active", "icon": "mds-SideNav__icon", "label": "mds-SideNav__label", "count": "mds-SideNav__count" };
1949
+ function SideNav({ label, className, children, ref, ...rest }) {
1950
+ return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": label, className: cx(SideNav_module_default.nav, className), ...rest, children });
1951
+ }
1952
+ function SideNavGroup({
1953
+ label,
1954
+ className,
1955
+ children,
1956
+ ref,
1957
+ ...rest
1958
+ }) {
1959
+ const headingId = react.useId();
1960
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1961
+ "div",
1962
+ {
1963
+ ref,
1964
+ className: cx(SideNav_module_default.group, className),
1965
+ role: label != null ? "group" : void 0,
1966
+ "aria-labelledby": label != null ? headingId : void 0,
1967
+ ...rest,
1968
+ children: [
1969
+ label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.heading, id: headingId, children: label }),
1970
+ children
1971
+ ]
1972
+ }
1973
+ );
1974
+ }
1975
+ function SideNavItem({
1976
+ label,
1977
+ icon,
1978
+ href,
1979
+ onClick,
1980
+ active = false,
1981
+ count,
1982
+ countLabel,
1983
+ max = 99,
1984
+ as
1985
+ }) {
1986
+ const className = cx(SideNav_module_default.item, active && SideNav_module_default.active);
1987
+ const current = active ? "page" : void 0;
1988
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1989
+ icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.icon, "aria-hidden": "true", children: icon }),
1990
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.label, children: label }),
1991
+ count !== void 0 && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "accent", role: "status", "aria-label": countLabel, className: SideNav_module_default.count, children: count > max ? `${max}+` : count })
1992
+ ] });
1993
+ if (href !== void 0) {
1994
+ const Element = as ?? "a";
1995
+ return /* @__PURE__ */ jsxRuntime.jsx(Element, { href, className, "aria-current": current, onClick, children: content });
1996
+ }
1997
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className, "aria-current": current, onClick, children: content });
1998
+ }
1999
+
1828
2000
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/MediaPlaceholder/MediaPlaceholder.module.css?mds-scoped
1829
2001
  var MediaPlaceholder_module_default = { "media": "mds-MediaPlaceholder__media", "fill": "mds-MediaPlaceholder__fill", "image": "mds-MediaPlaceholder__image", "caption": "mds-MediaPlaceholder__caption", "cover": "mds-MediaPlaceholder__cover", "blurred": "mds-MediaPlaceholder__blurred" };
1830
2002
  function MediaPlaceholder({
@@ -2343,11 +2515,7 @@ function VideoPlayer({
2343
2515
  {
2344
2516
  className: cx(VideoPlayer_module_default.player, covered && VideoPlayer_module_default.covered, className),
2345
2517
  "aria-label": labels.region,
2346
- ref: (node) => {
2347
- root.current = node;
2348
- if (typeof ref === "function") ref(node);
2349
- else if (ref) ref.current = node;
2350
- },
2518
+ ref: forkRef(root, ref),
2351
2519
  ...rest,
2352
2520
  children: [
2353
2521
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: VideoPlayer_module_default.frame, children: [
@@ -2512,6 +2680,7 @@ exports.ChipGroup = ChipGroup;
2512
2680
  exports.ConfirmDialog = ConfirmDialog;
2513
2681
  exports.Container = Container;
2514
2682
  exports.CountButton = CountButton;
2683
+ exports.DataTable = DataTable;
2515
2684
  exports.DateTimePicker = DateTimePicker;
2516
2685
  exports.Divider = Divider;
2517
2686
  exports.EmptyState = EmptyState;
@@ -2544,6 +2713,9 @@ exports.Sheet = Sheet;
2544
2713
  exports.SheetBody = SheetBody;
2545
2714
  exports.SheetFooter = SheetFooter;
2546
2715
  exports.SheetHeader = SheetHeader;
2716
+ exports.SideNav = SideNav;
2717
+ exports.SideNavGroup = SideNavGroup;
2718
+ exports.SideNavItem = SideNavItem;
2547
2719
  exports.Skeleton = Skeleton;
2548
2720
  exports.Spinner = Spinner;
2549
2721
  exports.Stack = Stack;