boreal-ui 0.0.72 → 0.0.73

package/dist/next/DataTable-Bt6D__oo.cjs

@@ -0,0 +1,359 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const noScroll = "_noScroll_1vqqr_109";
+const errorMessage = "_errorMessage_1vqqr_110";
+const loadingContainer = "_loadingContainer_1vqqr_111";
+const hideScrollbar = "_hideScrollbar_1vqqr_103";
+const sr_only = "_sr_only_1vqqr_112";
+const wrapper = "_wrapper_1vqqr_637";
+const table = "_table_1vqqr_646";
+const sortable = "_sortable_1vqqr_694";
+const sortButton = "_sortButton_1vqqr_701";
+const sort_icon = "_sort_icon_1vqqr_711";
+const clickable = "_clickable_1vqqr_725";
+const striped = "_striped_1vqqr_739";
+const clear = "_clear_1vqqr_742";
+const primary = "_primary_1vqqr_798";
+const outline = "_outline_1vqqr_803";
+const secondary = "_secondary_1vqqr_814";
+const tertiary = "_tertiary_1vqqr_830";
+const quaternary = "_quaternary_1vqqr_846";
+const success = "_success_1vqqr_878";
+const error = "_error_1vqqr_110";
+const warning = "_warning_1vqqr_910";
+const roundNone = "_roundNone_1vqqr_926";
+const roundSmall = "_roundSmall_1vqqr_930";
+const roundMedium = "_roundMedium_1vqqr_934";
+const roundLarge = "_roundLarge_1vqqr_938";
+const roundFull = "_roundFull_1vqqr_942";
+const shadowNone = "_shadowNone_1vqqr_946";
+const shadowLight = "_shadowLight_1vqqr_950";
+const shadowMedium = "_shadowMedium_1vqqr_954";
+const shadowStrong = "_shadowStrong_1vqqr_958";
+const shadowIntense = "_shadowIntense_1vqqr_962";
+const spin = "_spin_1vqqr_1";
+const pulse = "_pulse_1vqqr_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  table,
+  sortable,
+  sortButton,
+  sort_icon,
+  clickable,
+  striped,
+  clear,
+  primary,
+  outline,
+  secondary,
+  tertiary,
+  quaternary,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1vqqr_1",
+  "slide-up": "_slide-up_1vqqr_1",
+  "spin-3d": "_spin-3d_1vqqr_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1vqqr_1",
+  "progress-grow": "_progress-grow_1vqqr_1",
+  "indeterminate-move": "_indeterminate-move_1vqqr_1",
+  "skeleton-loading": "_skeleton-loading_1vqqr_1"
+};
+function DataTableBase({
+  columns,
+  data,
+  onRowClick,
+  classMap,
+  theme = borealStyleConfig.getDefaultTheme(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  state = "",
+  outline: outline2 = false,
+  className = "",
+  striped: striped2 = true,
+  defaultSortKey,
+  defaultSortOrder = "asc",
+  serverSort = false,
+  onSortChange,
+  rowKey,
+  caption = "Data table",
+  hideCaption = true,
+  getSortAriaLabel,
+  getSortAnnouncement,
+  getRowAriaLabel,
+  getRowAriaDescription,
+  emptyMessage = "No data available",
+  loading = false,
+  loadingMessage = "Loading data",
+  colCount,
+  rowCount,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "data-table"
+}) {
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortOrder, setSortOrder] = React.useState(defaultSortOrder);
+  const [sortAnnouncement, setSortAnnouncement] = React.useState("");
+  const captionId = `${testId}-caption`;
+  const liveRegionId = `${testId}-live-region`;
+  const computedAriaDescribedBy = [
+    ariaDescribedBy,
+    caption ? captionId : void 0,
+    liveRegionId
+  ].filter(Boolean).join(" ");
+  const sortedData = React.useMemo(() => {
+    if (serverSort || !sortKey) return data;
+    return [...data].sort((a, b) => {
+      const valA = a[sortKey];
+      const valB = b[sortKey];
+      if (valA === valB) return 0;
+      if (valA == null) return 1;
+      if (valB == null) return -1;
+      const numA = Number(valA);
+      const numB = Number(valB);
+      const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);
+      if (bothNumeric) {
+        return sortOrder === "asc" ? numA - numB : numB - numA;
+      }
+      const cmp = String(valA).localeCompare(String(valB), void 0, {
+        numeric: true
+      });
+      return sortOrder === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortOrder, serverSort]);
+  const announceSortChange = (column, nextOrder) => {
+    const message = getSortAnnouncement ? getSortAnnouncement(column, nextOrder) : `${column.label} sorted ${nextOrder === "asc" ? "ascending" : "descending"}`;
+    setSortAnnouncement(message);
+  };
+  const handleSort = (column) => {
+    const nextOrder = column.key === sortKey && sortOrder === "asc" ? "desc" : "asc";
+    setSortKey(column.key);
+    setSortOrder(nextOrder);
+    announceSortChange(column, nextOrder);
+    if (serverSort && onSortChange) {
+      onSortChange(column.key, nextOrder);
+    }
+  };
+  const handleSortKeyDown = (column) => (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSort(column);
+    }
+  };
+  const handleRowKeyDown = (row) => (e) => {
+    if (!onRowClick) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onRowClick(row);
+    }
+  };
+  const getHeaderScope = (column) => column.scope ?? "col";
+  const getHeaderId = (column) => column.id ?? `${testId}-header-${String(column.key)}`;
+  const getColumnAriaLabel = (column, isActive) => {
+    if (!column.sortable) {
+      return column.srLabel;
+    }
+    if (getSortAriaLabel) {
+      return getSortAriaLabel(column, sortOrder, isActive);
+    }
+    const baseLabel = column.srLabel ?? column.label;
+    if (isActive) {
+      return `${baseLabel}, sorted ${sortOrder === "asc" ? "ascending" : "descending"}. Activate to sort ${sortOrder === "asc" ? "descending" : "ascending"}.`;
+    }
+    return `${baseLabel}. Activate to sort ascending.`;
+  };
+  const renderCellContent = (row, column) => {
+    const value = row[column.key];
+    if (column.render) {
+      return column.render(value, row);
+    }
+    if (typeof value === "object" && value !== null) {
+      return JSON.stringify(value);
+    }
+    return String(value ?? "");
+  };
+  React.useEffect(() => {
+    if (!sortKey) {
+      setSortAnnouncement("");
+      return;
+    }
+    const activeColumn = columns.find((column) => column.key === sortKey);
+    if (!activeColumn) return;
+    announceSortChange(activeColumn, sortOrder);
+  }, []);
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: classNames.combineClassNames(
+        classMap.wrapper,
+        shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+        striped2 && classMap.striped,
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            id: liveRegionId,
+            className: classMap.srOnly ?? "sr_only",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: loading ? loadingMessage : sortAnnouncement
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsxs(
+          "table",
+          {
+            className: classNames.combineClassNames(
+              classMap.table,
+              classMap[theme],
+              classMap[state],
+              outline2 && classMap.outline
+            ),
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": computedAriaDescribedBy || void 0,
+            "aria-colcount": colCount,
+            "aria-rowcount": rowCount,
+            children: [
+              caption ? /* @__PURE__ */ require$$2.jsx(
+                "caption",
+                {
+                  id: captionId,
+                  className: hideCaption ? classMap.srOnly ?? "sr_only" : void 0,
+                  children: caption
+                }
+              ) : null,
+              /* @__PURE__ */ require$$2.jsx("thead", { children: /* @__PURE__ */ require$$2.jsx("tr", { children: columns.map((column) => {
+                const isActive = sortKey === column.key;
+                return /* @__PURE__ */ require$$2.jsx(
+                  "th",
+                  {
+                    id: getHeaderId(column),
+                    scope: getHeaderScope(column),
+                    "aria-sort": column.sortable ? isActive ? sortOrder === "asc" ? "ascending" : "descending" : "none" : void 0,
+                    className: classNames.combineClassNames(
+                      column.sortable && classMap.sortable,
+                      classMap.headerCell
+                    ),
+                    children: column.sortable ? /* @__PURE__ */ require$$2.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: classMap.sortButton,
+                        onClick: () => handleSort(column),
+                        onKeyDown: handleSortKeyDown(column),
+                        "aria-label": getColumnAriaLabel(column, isActive),
+                        "data-testid": `${testId}-sort-${String(column.key)}`,
+                        children: [
+                          /* @__PURE__ */ require$$2.jsx("span", { children: column.label }),
+                          /* @__PURE__ */ require$$2.jsx("span", { className: classMap.sortIcon, "aria-hidden": "true", children: isActive ? sortOrder === "asc" ? "▲" : "▼" : "⇅" })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ require$$2.jsx("span", { "aria-label": column.srLabel, children: column.label })
+                  },
+                  String(column.key)
+                );
+              }) }) }),
+              /* @__PURE__ */ require$$2.jsx("tbody", { children: loading ? /* @__PURE__ */ require$$2.jsx("tr", { children: /* @__PURE__ */ require$$2.jsx(
+                "td",
+                {
+                  className: classMap.emptyCell,
+                  colSpan: columns.length,
+                  "aria-live": "polite",
+                  children: loadingMessage
+                }
+              ) }) : sortedData.length === 0 ? /* @__PURE__ */ require$$2.jsx("tr", { children: /* @__PURE__ */ require$$2.jsx(
+                "td",
+                {
+                  className: classMap.emptyCell,
+                  colSpan: columns.length,
+                  "aria-live": "polite",
+                  children: emptyMessage
+                }
+              ) }) : sortedData.map((row, index) => {
+                const key = rowKey ? rowKey(row) : index;
+                const rowAriaLabel = getRowAriaLabel == null ? void 0 : getRowAriaLabel(row, index);
+                const rowAriaDescription = getRowAriaDescription == null ? void 0 : getRowAriaDescription(row, index);
+                return /* @__PURE__ */ require$$2.jsx(
+                  "tr",
+                  {
+                    className: classNames.combineClassNames(
+                      onRowClick && classMap.clickable,
+                      striped2 && index % 2 === 1 && classMap.striped
+                    ),
+                    onClick: () => onRowClick == null ? void 0 : onRowClick(row),
+                    onKeyDown: handleRowKeyDown(row),
+                    tabIndex: onRowClick ? 0 : void 0,
+                    "aria-label": onRowClick ? rowAriaLabel : void 0,
+                    "aria-description": onRowClick ? rowAriaDescription : void 0,
+                    "data-testid": `${testId}-row-${key}`,
+                    children: columns.map((column) => {
+                      const cellKey = String(column.key);
+                      const content = renderCellContent(row, column);
+                      const headerId = getHeaderId(column);
+                      if (column.isRowHeader) {
+                        return /* @__PURE__ */ require$$2.jsx(
+                          "th",
+                          {
+                            scope: "row",
+                            headers: headerId,
+                            "data-label": column.label,
+                            className: classMap.cell,
+                            children: content
+                          },
+                          cellKey
+                        );
+                      }
+                      return /* @__PURE__ */ require$$2.jsx(
+                        "td",
+                        {
+                          headers: headerId,
+                          "data-label": column.label,
+                          className: classMap.cell,
+                          children: content
+                        },
+                        cellKey
+                      );
+                    })
+                  },
+                  key
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DataTableBase.displayName = "DataTableBase";
+function DataTable(props) {
+  return /* @__PURE__ */ require$$2.jsx(DataTableBase, { ...props, classMap: styles });
+}
+DataTable.displayName = "DataTable";
+exports.DataTable = DataTable;
+//# sourceMappingURL=DataTable-Bt6D__oo.cjs.map

package/dist/next/DataTable-Bt6D__oo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable-Bt6D__oo.cjs","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/next/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps, Column } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n  columns,\r\n  data,\r\n  onRowClick,\r\n  classMap,\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  outline = false,\r\n  className = \"\",\r\n  striped = true,\r\n  defaultSortKey,\r\n  defaultSortOrder = \"asc\",\r\n  serverSort = false,\r\n  onSortChange,\r\n  rowKey,\r\n  caption = \"Data table\",\r\n  hideCaption = true,\r\n  getSortAriaLabel,\r\n  getSortAnnouncement,\r\n  getRowAriaLabel,\r\n  getRowAriaDescription,\r\n  emptyMessage = \"No data available\",\r\n  loading = false,\r\n  loadingMessage = \"Loading data\",\r\n  colCount,\r\n  rowCount,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n  const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n  const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n  const [sortAnnouncement, setSortAnnouncement] = useState(\"\");\r\n\r\n  const captionId = `${testId}-caption`;\r\n  const liveRegionId = `${testId}-live-region`;\r\n\r\n  const computedAriaDescribedBy = [\r\n    ariaDescribedBy,\r\n    caption ? captionId : undefined,\r\n    liveRegionId,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  const sortedData = useMemo(() => {\r\n    if (serverSort || !sortKey) return data;\r\n\r\n    return [...data].sort((a, b) => {\r\n      const valA = a[sortKey];\r\n      const valB = b[sortKey];\r\n\r\n      if (valA === valB) return 0;\r\n      if (valA == null) return 1;\r\n      if (valB == null) return -1;\r\n\r\n      const numA = Number(valA);\r\n      const numB = Number(valB);\r\n      const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n      if (bothNumeric) {\r\n        return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n      }\r\n\r\n      const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n        numeric: true,\r\n      });\r\n\r\n      return sortOrder === \"asc\" ? cmp : -cmp;\r\n    });\r\n  }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n  const announceSortChange = (\r\n    column: Column<T>,\r\n    nextOrder: \"asc\" | \"desc\",\r\n  ): void => {\r\n    const message = getSortAnnouncement\r\n      ? getSortAnnouncement(column, nextOrder)\r\n      : `${column.label} sorted ${nextOrder === \"asc\" ? \"ascending\" : \"descending\"}`;\r\n\r\n    setSortAnnouncement(message);\r\n  };\r\n\r\n  const handleSort = (column: Column<T>): void => {\r\n    const nextOrder =\r\n      column.key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n\r\n    setSortKey(column.key);\r\n    setSortOrder(nextOrder);\r\n    announceSortChange(column, nextOrder);\r\n\r\n    if (serverSort && onSortChange) {\r\n      onSortChange(column.key, nextOrder);\r\n    }\r\n  };\r\n\r\n  const handleSortKeyDown =\r\n    (column: Column<T>) =>\r\n    (e: KeyboardEvent<HTMLButtonElement>): void => {\r\n      if (e.key === \"Enter\" || e.key === \" \") {\r\n        e.preventDefault();\r\n        handleSort(column);\r\n      }\r\n    };\r\n\r\n  const handleRowKeyDown =\r\n    (row: T) =>\r\n    (e: KeyboardEvent<HTMLTableRowElement>): void => {\r\n      if (!onRowClick) return;\r\n\r\n      if (e.key === \"Enter\" || e.key === \" \") {\r\n        e.preventDefault();\r\n        onRowClick(row);\r\n      }\r\n    };\r\n\r\n  const getHeaderScope = (column: Column<T>): \"col\" | \"colgroup\" =>\r\n    column.scope ?? \"col\";\r\n\r\n  const getHeaderId = (column: Column<T>): string =>\r\n    column.id ?? `${testId}-header-${String(column.key)}`;\r\n\r\n  const getColumnAriaLabel = (\r\n    column: Column<T>,\r\n    isActive: boolean,\r\n  ): string | undefined => {\r\n    if (!column.sortable) {\r\n      return column.srLabel;\r\n    }\r\n\r\n    if (getSortAriaLabel) {\r\n      return getSortAriaLabel(column, sortOrder, isActive);\r\n    }\r\n\r\n    const baseLabel = column.srLabel ?? column.label;\r\n\r\n    if (isActive) {\r\n      return `${baseLabel}, sorted ${sortOrder === \"asc\" ? \"ascending\" : \"descending\"}. Activate to sort ${sortOrder === \"asc\" ? \"descending\" : \"ascending\"}.`;\r\n    }\r\n\r\n    return `${baseLabel}. Activate to sort ascending.`;\r\n  };\r\n\r\n  const renderCellContent = (row: T, column: Column<T>): React.ReactNode => {\r\n    const value = row[column.key];\r\n\r\n    if (column.render) {\r\n      return column.render(value, row);\r\n    }\r\n\r\n    if (typeof value === \"object\" && value !== null) {\r\n      return JSON.stringify(value);\r\n    }\r\n\r\n    return String(value ?? \"\");\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!sortKey) {\r\n      setSortAnnouncement(\"\");\r\n      return;\r\n    }\r\n\r\n    const activeColumn = columns.find((column) => column.key === sortKey);\r\n    if (!activeColumn) return;\r\n\r\n    announceSortChange(activeColumn, sortOrder);\r\n  }, []);\r\n\r\n  return (\r\n    <div\r\n      className={combineClassNames(\r\n        classMap.wrapper,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        striped && classMap.striped,\r\n        className,\r\n      )}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        id={liveRegionId}\r\n        className={classMap.srOnly ?? \"sr_only\"}\r\n        aria-live=\"polite\"\r\n        aria-atomic=\"true\"\r\n      >\r\n        {loading ? loadingMessage : sortAnnouncement}\r\n      </div>\r\n\r\n      <table\r\n        className={combineClassNames(\r\n          classMap.table,\r\n          classMap[theme],\r\n          classMap[state],\r\n          outline && classMap.outline,\r\n        )}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-describedby={computedAriaDescribedBy || undefined}\r\n        aria-colcount={colCount}\r\n        aria-rowcount={rowCount}\r\n      >\r\n        {caption ? (\r\n          <caption\r\n            id={captionId}\r\n            className={hideCaption ? (classMap.srOnly ?? \"sr_only\") : undefined}\r\n          >\r\n            {caption}\r\n          </caption>\r\n        ) : null}\r\n\r\n        <thead>\r\n          <tr>\r\n            {columns.map((column) => {\r\n              const isActive = sortKey === column.key;\r\n\r\n              return (\r\n                <th\r\n                  key={String(column.key)}\r\n                  id={getHeaderId(column)}\r\n                  scope={getHeaderScope(column)}\r\n                  aria-sort={\r\n                    column.sortable\r\n                      ? isActive\r\n                        ? sortOrder === \"asc\"\r\n                          ? \"ascending\"\r\n                          : \"descending\"\r\n                        : \"none\"\r\n                      : undefined\r\n                  }\r\n                  className={combineClassNames(\r\n                    column.sortable && classMap.sortable,\r\n                    classMap.headerCell,\r\n                  )}\r\n                >\r\n                  {column.sortable ? (\r\n                    <button\r\n                      type=\"button\"\r\n                      className={classMap.sortButton}\r\n                      onClick={() => handleSort(column)}\r\n                      onKeyDown={handleSortKeyDown(column)}\r\n                      aria-label={getColumnAriaLabel(column, isActive)}\r\n                      data-testid={`${testId}-sort-${String(column.key)}`}\r\n                    >\r\n                      <span>{column.label}</span>\r\n                      <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n                        {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n                      </span>\r\n                    </button>\r\n                  ) : (\r\n                    <span aria-label={column.srLabel}>{column.label}</span>\r\n                  )}\r\n                </th>\r\n              );\r\n            })}\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          {loading ? (\r\n            <tr>\r\n              <td\r\n                className={classMap.emptyCell}\r\n                colSpan={columns.length}\r\n                aria-live=\"polite\"\r\n              >\r\n                {loadingMessage}\r\n              </td>\r\n            </tr>\r\n          ) : sortedData.length === 0 ? (\r\n            <tr>\r\n              <td\r\n                className={classMap.emptyCell}\r\n                colSpan={columns.length}\r\n                aria-live=\"polite\"\r\n              >\r\n                {emptyMessage}\r\n              </td>\r\n            </tr>\r\n          ) : (\r\n            sortedData.map((row, index) => {\r\n              const key = rowKey ? rowKey(row) : index;\r\n              const rowAriaLabel = getRowAriaLabel?.(row, index);\r\n              const rowAriaDescription = getRowAriaDescription?.(row, index);\r\n\r\n              return (\r\n                <tr\r\n                  key={key}\r\n                  className={combineClassNames(\r\n                    onRowClick && classMap.clickable,\r\n                    striped && index % 2 === 1 && classMap.striped,\r\n                  )}\r\n                  onClick={() => onRowClick?.(row)}\r\n                  onKeyDown={handleRowKeyDown(row)}\r\n                  tabIndex={onRowClick ? 0 : undefined}\r\n                  aria-label={onRowClick ? rowAriaLabel : undefined}\r\n                  aria-description={onRowClick ? rowAriaDescription : undefined}\r\n                  data-testid={`${testId}-row-${key}`}\r\n                >\r\n                  {columns.map((column) => {\r\n                    const cellKey = String(column.key);\r\n                    const content = renderCellContent(row, column);\r\n                    const headerId = getHeaderId(column);\r\n\r\n                    if (column.isRowHeader) {\r\n                      return (\r\n                        <th\r\n                          key={cellKey}\r\n                          scope=\"row\"\r\n                          headers={headerId}\r\n                          data-label={column.label}\r\n                          className={classMap.cell}\r\n                        >\r\n                          {content}\r\n                        </th>\r\n                      );\r\n                    }\r\n\r\n                    return (\r\n                      <td\r\n                        key={cellKey}\r\n                        headers={headerId}\r\n                        data-label={column.label}\r\n                        className={classMap.cell}\r\n                      >\r\n                        {content}\r\n                      </td>\r\n                    );\r\n                  })}\r\n                </tr>\r\n              );\r\n            })\r\n          )}\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  );\r\n}\r\n\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","\"use client\";\r\n\r\nimport styles from \"./DataTable.module.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n  return <DataTableBase {...props} classMap={styles} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","outline","striped","useState","useMemo","useEffect","jsxs","combineClassNames","capitalize","jsx"],"mappings":"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"}