boreal-ui 0.0.72 → 0.0.73

package/dist/next/DataTable-CZj_U9rg.js

@@ -0,0 +1,360 @@
+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";
+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 = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = 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] = 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 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);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: combineClassNames(
+        classMap.wrapper,
+        shadow && classMap[`shadow${capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize(rounding)}`],
+        striped2 && classMap.striped,
+        className
+      ),
+      "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: 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__ */ jsx(
+                "caption",
+                {
+                  id: captionId,
+                  className: hideCaption ? classMap.srOnly ?? "sr_only" : void 0,
+                  children: caption
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+                const isActive = sortKey === column.key;
+                return /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    id: getHeaderId(column),
+                    scope: getHeaderScope(column),
+                    "aria-sort": column.sortable ? isActive ? sortOrder === "asc" ? "ascending" : "descending" : "none" : void 0,
+                    className: combineClassNames(
+                      column.sortable && classMap.sortable,
+                      classMap.headerCell
+                    ),
+                    children: column.sortable ? /* @__PURE__ */ 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__ */ 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", { 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,
+                      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__ */ jsx(
+                          "th",
+                          {
+                            scope: "row",
+                            headers: headerId,
+                            "data-label": column.label,
+                            className: classMap.cell,
+                            children: content
+                          },
+                          cellKey
+                        );
+                      }
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          headers: headerId,
+                          "data-label": column.label,
+                          className: classMap.cell,
+                          children: content
+                        },
+                        cellKey
+                      );
+                    })
+                  },
+                  key
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DataTableBase.displayName = "DataTableBase";
+function DataTable(props) {
+  return /* @__PURE__ */ jsx(DataTableBase, { ...props, classMap: styles });
+}
+DataTable.displayName = "DataTable";
+export {
+  DataTable as D
+};
+//# sourceMappingURL=DataTable-CZj_U9rg.js.map

package/dist/next/DataTable-CZj_U9rg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable-CZj_U9rg.js","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":["outline","striped"],"mappings":"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"}

package/dist/next/DataTable.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const DataTable = require("./DataTable-GpE9KYNX.cjs");
+const DataTable = require("./DataTable-Bt6D__oo.cjs");
 module.exports = DataTable.DataTable;
 //# sourceMappingURL=DataTable.cjs.js.map

package/dist/next/DataTable.js

@@ -1,4 +1,4 @@
-import { D } from "./DataTable-Cdhd9JxJ.js";
+import { D } from "./DataTable-CZj_U9rg.js";
 export {
   D as default
 };

package/dist/next/{DateTimePicker-CGz-n7Bi.js → DateTimePicker-CdPvr6Mc.js}

@@ -67,6 +67,10 @@ const DateTimePickerBase = ({
   name,
   required = false,
   disabled: disabled2 = false,
+  readOnly = false,
+  placeholder,
+  autoComplete = "off",
+  title,
   size = getDefaultSize(),
   outline: outline2,
   theme = getDefaultTheme(),
@@ -78,20 +82,39 @@ const DateTimePickerBase = ({
   classMap,
   error: error2,
   description: description2,
-  id
+  id,
+  labelId,
+  descriptionId,
+  errorId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  pickerButtonAriaLabel,
+  pickerButtonAriaLabelledBy,
+  pickerButtonAriaDescribedBy,
+  pickerButtonTitle,
+  inputProps,
+  buttonProps
 }) => {
   const generatedId = useId();
   const inputId = id || generatedId;
+  const computedLabelId = labelId || (label2 ? `${inputId}-label` : void 0);
+  const computedDescriptionId = descriptionId || (description2 ? `${inputId}-description` : void 0);
+  const computedErrorId = errorId || (error2 ? `${inputId}-error` : void 0);
   const inputRef = useRef(null);
-  const descriptionId = description2 ? `${inputId}-description` : void 0;
-  const errorId = error2 ? `${inputId}-error` : void 0;
   const invalidRange = min && max ? min > max : false;
   const outOfBounds = value ? (min ? value < min : false) || (max ? value > max : false) : false;
   const openPicker = () => {
     const el = inputRef.current;
-    if (!el) return;
-    if (typeof el.showPicker === "function") el.showPicker();
-    else el.focus();
+    if (!el || disabled2 || readOnly) return;
+    if (typeof el.showPicker === "function") {
+      el.showPicker();
+    } else {
+      el.focus();
+    }
   };
   const pickerClass = useMemo(
     () => combineClassNames(
@@ -103,6 +126,7 @@ const DateTimePickerBase = ({
       rounding && classMap[`round${capitalize(rounding)}`],
       outline2 && classMap.outline,
       disabled2 && classMap.disabled,
+      readOnly && classMap.readOnly,
       className
     ),
     [
@@ -114,21 +138,36 @@ const DateTimePickerBase = ({
       rounding,
       outline2,
       disabled2,
+      readOnly,
       className
     ]
   );
-  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+  const mergedDescribedBy = [ariaDescribedBy, computedDescriptionId, computedErrorId].filter(Boolean).join(" ") || void 0;
+  const resolvedAriaInvalid = (ariaInvalid ?? Boolean(error2 || invalidRange || outOfBounds)) || void 0;
+  const resolvedAriaRequired = (ariaRequired ?? required) || void 0;
+  const resolvedAriaLabel = ariaLabel || (!label2 && !ariaLabelledBy ? "Date and time" : void 0);
+  const resolvedAriaLabelledBy = ariaLabelledBy || (!ariaLabel && computedLabelId ? computedLabelId : void 0);
+  const resolvedAriaErrorMessage = ariaErrorMessage || (error2 ? computedErrorId : void 0);
   return /* @__PURE__ */ jsxs("div", { className: pickerClass, "data-testid": testId, children: [
-    label2 && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: classMap.label, children: [
-      label2,
-      " ",
-      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
-    ] }),
+    label2 && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: computedLabelId,
+        htmlFor: inputId,
+        className: classMap.label,
+        "data-testid": `${testId}-label`,
+        children: [
+          label2,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: classMap.inputWrapper, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           id: inputId,
+          ref: inputRef,
           type: "datetime-local",
           className: classMap.input,
           value,
@@ -136,15 +175,20 @@ const DateTimePickerBase = ({
           min,
           max,
           name,
-          ref: inputRef,
           required,
           disabled: disabled2,
-          "aria-invalid": Boolean(error2) || invalidRange || outOfBounds || void 0,
-          "aria-describedby": describedBy,
-          "aria-errormessage": error2 ? errorId : void 0,
-          "aria-label": label2 || "Date and time",
+          readOnly,
+          placeholder,
+          autoComplete,
+          title,
+          "aria-label": resolvedAriaLabel,
+          "aria-labelledby": resolvedAriaLabelledBy,
+          "aria-describedby": mergedDescribedBy,
+          "aria-errormessage": resolvedAriaErrorMessage,
+          "aria-invalid": resolvedAriaInvalid,
+          "aria-required": resolvedAriaRequired,
           "data-testid": `${testId}-input`,
-          autoComplete: "off"
+          ...inputProps
         }
       ),
       /* @__PURE__ */ jsx(
@@ -153,15 +197,36 @@ const DateTimePickerBase = ({
           type: "button",
           className: classMap.icon,
           onClick: openPicker,
-          disabled: disabled2,
-          "aria-label": "Open date and time picker",
+          disabled: disabled2 || readOnly,
+          "aria-label": pickerButtonAriaLabel || "Open date and time picker",
+          "aria-labelledby": pickerButtonAriaLabelledBy,
+          "aria-describedby": pickerButtonAriaDescribedBy,
+          title: pickerButtonTitle || pickerButtonAriaLabel || "Open date and time picker",
           "data-testid": `${testId}-button`,
-          children: /* @__PURE__ */ jsx(CalendarIcon, {})
+          ...buttonProps,
+          children: /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": true, focusable: false })
         }
       )
     ] }),
-    description2 && !error2 && /* @__PURE__ */ jsx("p", { id: descriptionId, className: classMap.description, children: description2 }),
-    error2 && /* @__PURE__ */ jsx("p", { id: errorId, className: classMap.error, role: "alert", children: error2 })
+    description2 && !error2 && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: computedDescriptionId,
+        className: classMap.description,
+        "data-testid": `${testId}-description`,
+        children: description2
+      }
+    ),
+    error2 && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: computedErrorId,
+        className: classMap.error,
+        role: "alert",
+        "data-testid": `${testId}-error`,
+        children: error2
+      }
+    )
   ] });
 };
 DateTimePickerBase.displayName = "DateTimePickerBase";
@@ -255,4 +320,4 @@ DateTimePicker.displayName = "DateTimePicker";
 export {
   DateTimePicker as D
 };
-//# sourceMappingURL=DateTimePicker-CGz-n7Bi.js.map
+//# sourceMappingURL=DateTimePicker-CdPvr6Mc.js.map

package/dist/next/DateTimePicker-CdPvr6Mc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker-CdPvr6Mc.js","sources":["../../src/Icons/CalendarIcon.tsx","../../src/components/DateTimePicker/DateTimePickerBase.tsx","../../src/components/DateTimePicker/next/DateTimePicker.tsx"],"sourcesContent":["const CalendarIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    strokeWidth=\"1.5\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 10V6C3 4.89543 3.89543 4 5 4H7\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M7 2V6\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M21 10V6C21 4.89543 20.1046 4 19 4H18.5\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default CalendarIcon;\r\n","import React, { useId, useMemo, useRef } from \"react\";\r\nimport { DateTimePickerBaseProps } from \"./DateTimePicker.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { CalendarIcon } from \"../../Icons\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({\r\n  label,\r\n  value,\r\n  onChange,\r\n  min,\r\n  max,\r\n  name,\r\n  required = false,\r\n  disabled = false,\r\n  readOnly = false,\r\n  placeholder,\r\n  autoComplete = \"off\",\r\n  title,\r\n  size = getDefaultSize(),\r\n  outline,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"datetime-picker\",\r\n  classMap,\r\n  error,\r\n  description,\r\n  id,\r\n  labelId,\r\n  descriptionId,\r\n  errorId,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-errormessage\": ariaErrorMessage,\r\n  \"aria-invalid\": ariaInvalid,\r\n  \"aria-required\": ariaRequired,\r\n  pickerButtonAriaLabel,\r\n  pickerButtonAriaLabelledBy,\r\n  pickerButtonAriaDescribedBy,\r\n  pickerButtonTitle,\r\n  inputProps,\r\n  buttonProps,\r\n}) => {\r\n  const generatedId = useId();\r\n  const inputId = id || generatedId;\r\n  const computedLabelId = labelId || (label ? `${inputId}-label` : undefined);\r\n  const computedDescriptionId =\r\n    descriptionId || (description ? `${inputId}-description` : undefined);\r\n  const computedErrorId = errorId || (error ? `${inputId}-error` : undefined);\r\n\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n  const invalidRange = min && max ? min > max : false;\r\n  const outOfBounds = value\r\n    ? (min ? value < min : false) || (max ? value > max : false)\r\n    : false;\r\n\r\n  const openPicker = () => {\r\n    const el = inputRef.current;\r\n    if (!el || disabled || readOnly) return;\r\n\r\n    if (typeof el.showPicker === \"function\") {\r\n      el.showPicker();\r\n    } else {\r\n      el.focus();\r\n    }\r\n  };\r\n\r\n  const pickerClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        outline && classMap.outline,\r\n        disabled && classMap.disabled,\r\n        readOnly && classMap.readOnly,\r\n        className,\r\n      ),\r\n    [\r\n      classMap,\r\n      theme,\r\n      state,\r\n      size,\r\n      shadow,\r\n      rounding,\r\n      outline,\r\n      disabled,\r\n      readOnly,\r\n      className,\r\n    ],\r\n  );\r\n\r\n  const mergedDescribedBy =\r\n    [ariaDescribedBy, computedDescriptionId, computedErrorId]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const resolvedAriaInvalid =\r\n    (ariaInvalid ?? Boolean(error || invalidRange || outOfBounds)) || undefined;\r\n\r\n  const resolvedAriaRequired = (ariaRequired ?? required) || undefined;\r\n\r\n  const resolvedAriaLabel =\r\n    ariaLabel || (!label && !ariaLabelledBy ? \"Date and time\" : undefined);\r\n\r\n  const resolvedAriaLabelledBy =\r\n    ariaLabelledBy ||\r\n    (!ariaLabel && computedLabelId ? computedLabelId : undefined);\r\n\r\n  const resolvedAriaErrorMessage =\r\n    ariaErrorMessage || (error ? computedErrorId : undefined);\r\n\r\n  return (\r\n    <div className={pickerClass} data-testid={testId}>\r\n      {label && (\r\n        <label\r\n          id={computedLabelId}\r\n          htmlFor={inputId}\r\n          className={classMap.label}\r\n          data-testid={`${testId}-label`}\r\n        >\r\n          {label}\r\n          {required && <span aria-hidden=\"true\"> *</span>}\r\n        </label>\r\n      )}\r\n\r\n      <div className={classMap.inputWrapper}>\r\n        <input\r\n          id={inputId}\r\n          ref={inputRef}\r\n          type=\"datetime-local\"\r\n          className={classMap.input}\r\n          value={value}\r\n          onChange={(e) => onChange?.(e.target.value)}\r\n          min={min}\r\n          max={max}\r\n          name={name}\r\n          required={required}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          placeholder={placeholder}\r\n          autoComplete={autoComplete}\r\n          title={title}\r\n          aria-label={resolvedAriaLabel}\r\n          aria-labelledby={resolvedAriaLabelledBy}\r\n          aria-describedby={mergedDescribedBy}\r\n          aria-errormessage={resolvedAriaErrorMessage}\r\n          aria-invalid={resolvedAriaInvalid}\r\n          aria-required={resolvedAriaRequired}\r\n          data-testid={`${testId}-input`}\r\n          {...inputProps}\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          className={classMap.icon}\r\n          onClick={openPicker}\r\n          disabled={disabled || readOnly}\r\n          aria-label={pickerButtonAriaLabel || \"Open date and time picker\"}\r\n          aria-labelledby={pickerButtonAriaLabelledBy}\r\n          aria-describedby={pickerButtonAriaDescribedBy}\r\n          title={\r\n            pickerButtonTitle ||\r\n            pickerButtonAriaLabel ||\r\n            \"Open date and time picker\"\r\n          }\r\n          data-testid={`${testId}-button`}\r\n          {...buttonProps}\r\n        >\r\n          <CalendarIcon aria-hidden={true} focusable={false} />\r\n        </button>\r\n      </div>\r\n\r\n      {description && !error && (\r\n        <p\r\n          id={computedDescriptionId}\r\n          className={classMap.description}\r\n          data-testid={`${testId}-description`}\r\n        >\r\n          {description}\r\n        </p>\r\n      )}\r\n\r\n      {error && (\r\n        <p\r\n          id={computedErrorId}\r\n          className={classMap.error}\r\n          role=\"alert\"\r\n          data-testid={`${testId}-error`}\r\n        >\r\n          {error}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nDateTimePickerBase.displayName = \"DateTimePickerBase\";\r\n\r\nexport default DateTimePickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport DateTimePickerBase from \"../DateTimePickerBase\";\r\nimport styles from \"./DateTimePicker.module.scss\";\r\nimport type { DateTimePickerProps } from \"../DateTimePicker.types\";\r\n\r\nconst DateTimePicker: React.FC<DateTimePickerProps> = (props) => (\r\n  <DateTimePickerBase {...props} classMap={styles} />\r\n);\r\nDateTimePicker.displayName = \"DateTimePicker\";\r\nexport default DateTimePicker;\r\n"],"names":["label","disabled","outline","error","description"],"mappings":"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"}