boreal-ui 0.0.883 → 0.0.885

package/dist/core/DataTable-BB7nx-un.js

@@ -0,0 +1,357 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+import './DataTable.css';function DataTableBase({
+  columns,
+  data,
+  onRowClick,
+  classMap,
+  theme = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  state = "",
+  outline = false,
+  className = "",
+  tableClassName,
+  theadClassName,
+  tbodyClassName,
+  rowClassName,
+  cellClassName,
+  striped = true,
+  wrapCells = false,
+  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] = useState(defaultSortKey);
+  const [sortOrder, setSortOrder] = useState(defaultSortOrder);
+  const [sortAnnouncement, setSortAnnouncement] = useState("");
+  const captionId = `${testId}-caption`;
+  const liveRegionId = `${testId}-live-region`;
+  const computedAriaDescribedBy = [
+    ariaDescribedBy,
+    caption ? captionId : void 0,
+    liveRegionId
+  ].filter(Boolean).join(" ");
+  const sortedData = 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 getColumnStyle = (column) => ({
+    width: column.width,
+    minWidth: column.minWidth,
+    maxWidth: column.maxWidth
+  });
+  const getRowClassName = (row, index) => {
+    if (typeof rowClassName === "function") {
+      return rowClassName(row, index);
+    }
+    return rowClassName;
+  };
+  const getCellClassName = (value, row, column, rowIndex) => {
+    return cellClassName == null ? void 0 : cellClassName(value, row, column, rowIndex);
+  };
+  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 ?? "");
+  };
+  useEffect(() => {
+    if (!sortKey) {
+      setSortAnnouncement("");
+      return;
+    }
+    const activeColumn = columns.find((column) => column.key === sortKey);
+    if (!activeColumn) return;
+    announceSortChange(activeColumn, sortOrder);
+  }, []);
+  const tableClass = useMemo(
+    () => combineClassNames(
+      classMap.table,
+      classMap[theme],
+      classMap[state],
+      outline && classMap.outline,
+      tableClassName
+    ),
+    [classMap, theme, state, outline, tableClassName]
+  );
+  const wrapperClass = useMemo(
+    () => combineClassNames(
+      classMap.wrapper,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`],
+      striped && classMap.striped,
+      className
+    ),
+    [classMap, shadow, rounding, striped, className]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: liveRegionId,
+        className: classMap.srOnly ?? "sr_only",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: loading ? loadingMessage : sortAnnouncement
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: tableClass,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": computedAriaDescribedBy || void 0,
+        "aria-colcount": colCount,
+        "aria-rowcount": rowCount,
+        children: [
+          caption ? /* @__PURE__ */ jsx(
+            "caption",
+            {
+              id: captionId,
+              className: hideCaption ? classMap.srOnly ?? "sr_only" : void 0,
+              children: caption
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("thead", { className: theadClassName, children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+            const isActive = sortKey === column.key;
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                id: getHeaderId(column),
+                scope: getHeaderScope(column),
+                style: getColumnStyle(column),
+                "aria-sort": column.sortable ? isActive ? sortOrder === "asc" ? "ascending" : "descending" : "none" : void 0,
+                className: combineClassNames(
+                  column.sortable && classMap.sortable,
+                  classMap.headerCell,
+                  (column.wrap ?? wrapCells) && classMap.wrapCell,
+                  column.headerClassName
+                ),
+                children: column.sortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: combineClassNames(
+                      classMap.sortButton,
+                      column.sortButtonClassName
+                    ),
+                    onClick: () => handleSort(column),
+                    onKeyDown: handleSortKeyDown(column),
+                    "aria-label": getColumnAriaLabel(column, isActive),
+                    "data-testid": `${testId}-sort-${String(column.key)}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: column.label }),
+                      /* @__PURE__ */ jsx("span", { className: classMap.sortIcon, "aria-hidden": "true", children: isActive ? sortOrder === "asc" ? "▲" : "▼" : "⇅" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("span", { "aria-label": column.srLabel, children: column.label })
+              },
+              String(column.key)
+            );
+          }) }) }),
+          /* @__PURE__ */ jsx("tbody", { className: tbodyClassName, children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: classMap.emptyCell,
+              colSpan: columns.length,
+              "aria-live": "polite",
+              children: loadingMessage
+            }
+          ) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ 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__ */ jsx(
+              "tr",
+              {
+                className: combineClassNames(
+                  onRowClick && classMap.clickable,
+                  striped && index % 2 === 1 && classMap.striped,
+                  getRowClassName(row, index)
+                ),
+                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 value = row[column.key];
+                  const content = renderCellContent(row, column);
+                  const headerId = getHeaderId(column);
+                  const shouldWrap = column.wrap ?? wrapCells;
+                  const resolvedCellClassName = combineClassNames(
+                    classMap.cell,
+                    shouldWrap && classMap.wrapCell,
+                    column.cellClassName,
+                    getCellClassName(value, row, column, index)
+                  );
+                  if (column.isRowHeader) {
+                    return /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        scope: "row",
+                        headers: headerId,
+                        "data-label": column.label,
+                        style: getColumnStyle(column),
+                        className: combineClassNames(
+                          resolvedCellClassName,
+                          column.rowHeaderClassName
+                        ),
+                        children: content
+                      },
+                      cellKey
+                    );
+                  }
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      headers: headerId,
+                      "data-label": column.label,
+                      style: getColumnStyle(column),
+                      className: resolvedCellClassName,
+                      children: content
+                    },
+                    cellKey
+                  );
+                })
+              },
+              key
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+DataTableBase.displayName = "DataTableBase";
+const classes = {
+  wrapper: "data_table_wrapper",
+  table: "data_table",
+  headerCell: "data_table_header_cell",
+  sortable: "data_table_header_sortable",
+  sortButton: "data_table_sort_button",
+  sortIcon: "data_table_sort_icon",
+  clickable: "data_table_row_clickable",
+  striped: "data_table_row_striped",
+  cell: "data_table_cell",
+  wrapCell: "data_table_cell_wrap",
+  primary: "data_table_primary",
+  secondary: "data_table_secondary",
+  tertiary: "data_table_tertiary",
+  quaternary: "data_table_quaternary",
+  success: "data_table_success",
+  error: "data_table_error",
+  warning: "data_table_warning",
+  clear: "data_table_clear",
+  outline: "data_table_outline",
+  shadowNone: "data_table_shadow-None",
+  shadowLight: "data_table_shadow-Light",
+  shadowMedium: "data_table_shadow-Medium",
+  shadowStrong: "data_table_shadow-Strong",
+  shadowIntense: "data_table_shadow-Intense",
+  roundNone: "data_table_round-None",
+  roundSmall: "data_table_round-Small",
+  roundMedium: "data_table_round-Medium",
+  roundLarge: "data_table_round-Large"
+};
+function DataTable(props) {
+  return /* @__PURE__ */ jsx(DataTableBase, { ...props, classMap: classes });
+}
+DataTable.displayName = "DataTable";
+export {
+  DataTable as D
+};
+//# sourceMappingURL=DataTable-BB7nx-un.js.map

package/dist/core/DataTable-BB7nx-un.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable-BB7nx-un.js","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/core/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  tableClassName,\r\n  theadClassName,\r\n  tbodyClassName,\r\n  rowClassName,\r\n  cellClassName,\r\n  striped = true,\r\n  wrapCells = false,\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 getColumnStyle = (column: Column<T>): React.CSSProperties => ({\r\n    width: column.width,\r\n    minWidth: column.minWidth,\r\n    maxWidth: column.maxWidth,\r\n  });\r\n\r\n  const getRowClassName = (row: T, index: number): string | undefined => {\r\n    if (typeof rowClassName === \"function\") {\r\n      return rowClassName(row, index);\r\n    }\r\n\r\n    return rowClassName;\r\n  };\r\n\r\n  const getCellClassName = (\r\n    value: unknown,\r\n    row: T,\r\n    column: Column<T>,\r\n    rowIndex: number,\r\n  ): string | undefined => {\r\n    return cellClassName?.(value, row, column, rowIndex);\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  const tableClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.table,\r\n        classMap[theme],\r\n        classMap[state],\r\n        outline && classMap.outline,\r\n        tableClassName,\r\n      ),\r\n    [classMap, theme, state, outline, tableClassName],\r\n  );\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      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    [classMap, shadow, rounding, striped, className],\r\n  );\r\n\r\n  return (\r\n    <div className={wrapperClass} data-testid={testId}>\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={tableClass}\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 className={theadClassName}>\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                  style={getColumnStyle(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                    (column.wrap ?? wrapCells) && classMap.wrapCell,\r\n                    column.headerClassName,\r\n                  )}\r\n                >\r\n                  {column.sortable ? (\r\n                    <button\r\n                      type=\"button\"\r\n                      className={combineClassNames(\r\n                        classMap.sortButton,\r\n                        column.sortButtonClassName,\r\n                      )}\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 className={tbodyClassName}>\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                    getRowClassName(row, index),\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 value = row[column.key];\r\n                    const content = renderCellContent(row, column);\r\n                    const headerId = getHeaderId(column);\r\n                    const shouldWrap = column.wrap ?? wrapCells;\r\n\r\n                    const resolvedCellClassName = combineClassNames(\r\n                      classMap.cell,\r\n                      shouldWrap && classMap.wrapCell,\r\n                      column.cellClassName,\r\n                      getCellClassName(value, row, column, index),\r\n                    );\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                          style={getColumnStyle(column)}\r\n                          className={combineClassNames(\r\n                            resolvedCellClassName,\r\n                            column.rowHeaderClassName,\r\n                          )}\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                        style={getColumnStyle(column)}\r\n                        className={resolvedCellClassName}\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","import \"./DataTable.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"data_table_wrapper\",\r\n  table: \"data_table\",\r\n\r\n  headerCell: \"data_table_header_cell\",\r\n  sortable: \"data_table_header_sortable\",\r\n  sortButton: \"data_table_sort_button\",\r\n  sortIcon: \"data_table_sort_icon\",\r\n\r\n  clickable: \"data_table_row_clickable\",\r\n  striped: \"data_table_row_striped\",\r\n\r\n  cell: \"data_table_cell\",\r\n  wrapCell: \"data_table_cell_wrap\",\r\n\r\n  primary: \"data_table_primary\",\r\n  secondary: \"data_table_secondary\",\r\n  tertiary: \"data_table_tertiary\",\r\n  quaternary: \"data_table_quaternary\",\r\n\r\n  success: \"data_table_success\",\r\n  error: \"data_table_error\",\r\n  warning: \"data_table_warning\",\r\n\r\n  clear: \"data_table_clear\",\r\n  outline: \"data_table_outline\",\r\n\r\n  shadowNone: \"data_table_shadow-None\",\r\n  shadowLight: \"data_table_shadow-Light\",\r\n  shadowMedium: \"data_table_shadow-Medium\",\r\n  shadowStrong: \"data_table_shadow-Strong\",\r\n  shadowIntense: \"data_table_shadow-Intense\",\r\n\r\n  roundNone: \"data_table_round-None\",\r\n  roundSmall: \"data_table_round-Small\",\r\n  roundMedium: \"data_table_round-Medium\",\r\n  roundLarge: \"data_table_round-Large\",\r\n};\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n  return <DataTableBase {...props} classMap={classes} />;\r\n}\r\n\r\nDataTable.displayName = \"DataTable\";\r\n\r\nexport default DataTable;\r\n"],"names":[],"mappings":"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"}