@protonradio/proton-ui 0.13.0 → 0.13.1

package/dist/components/Table/DataTable/DataTable.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /**\n   * Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /**\n   * Array of data objects to display. Can be empty array for loading/empty states\n   * @default []\n   * */\n  data?: T[] | null;\n  /**\n   * Test ID for testing purposes\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Error state\n   * @default false\n   */\n  error?: boolean | string;\n  /**\n   * Custom empty state message\n   * @default \"Data Unavailable\"\n   */\n  emptyMessage?: string;\n  /**\n   * Custom error message\n   * @default \"An error occurred\"\n   */\n  errorMessage?: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Loading state */\n  loading?: boolean;\n  /**\n   * Number of skeleton rows to show in loading state\n   * @default 5\n   */\n  loadingRows?: number;\n  /**\n   * Enable row-level memoization for performance optimization.\n   * Uses deepEqual to compare row data. @see {@link deepEqual}\n   * @default true\n   */\n  memoize?: boolean;\n  /**\n   * Table name/caption for accessibility. Provides essential context for screen readers.\n   * */\n  name: string;\n  /** Optional tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/**\n * DataTable is a declarative wrapper around the base Table component.\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n *\n * @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n  columns,\n  data = [],\n  loading = false,\n  tombstoneComponent,\n  error = false,\n  name,\n  onRowClick,\n  emptyMessage = \"Data Unavailable\",\n  errorMessage = \"An error occurred\",\n  loadingRows = 5,\n  \"data-testid\": testId,\n  memoize = true,\n  sortableColumns = [],\n  sortedBy,\n  sortDirection,\n  onSort,\n}: DataTableProps<T>) => {\n  const visibleColumns = columns.filter((col) => !col.isHidden);\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={typeof error === \"string\" ? error : errorMessage}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <ChevronUp\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            const tableRow = row as TableRowData;\n\n            return (\n              <DataTableRow\n                key={tableRow.key ?? index}\n                row={row}\n                columns={visibleColumns}\n                rowIndex={index}\n                onRowClick={onRowClick}\n                memoize={memoize}\n                dataTestId={tableRow.dataTestId}\n              />\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: {\n  columns: DataTableColumn<any>[];\n  name: string;\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /**\n   * Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /**\n   * Array of data objects to display. Can be empty array for loading/empty states\n   * @default []\n   * */\n  data?: T[] | null;\n  /**\n   * Test ID for testing purposes\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Error state\n   * @default false\n   */\n  error?: boolean | string;\n  /**\n   * Custom empty state message\n   * @default \"Data Unavailable\"\n   */\n  emptyMessage?: string;\n  /**\n   * Custom error message\n   * @default \"An error occurred\"\n   */\n  errorMessage?: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Loading state */\n  loading?: boolean;\n  /**\n   * Number of skeleton rows to show in loading state\n   * @default 5\n   */\n  loadingRows?: number;\n  /**\n   * Enable row-level memoization for performance optimization.\n   * Uses deepEqual to compare row data. @see {@link deepEqual}\n   * @default true\n   */\n  memoize?: boolean;\n  /**\n   * Table name/caption for accessibility. Provides essential context for screen readers.\n   * */\n  name: string;\n  /** Optional tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/**\n * DataTable is a declarative wrapper around the base Table component.\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n *\n * @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n  columns,\n  data = [],\n  loading = false,\n  tombstoneComponent,\n  error = false,\n  name,\n  onRowClick,\n  emptyMessage = \"Data Unavailable\",\n  errorMessage = \"An error occurred\",\n  loadingRows = 5,\n  \"data-testid\": testId,\n  memoize = true,\n  sortableColumns = [],\n  sortedBy,\n  sortDirection,\n  onSort,\n}: DataTableProps<T>) => {\n  const visibleColumns = columns.filter((col) => !col.isHidden);\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={typeof error === \"string\" ? error : errorMessage}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <ChevronUp\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            const tableRow = row as TableRowData;\n\n            return (\n              <DataTableRow\n                key={tableRow.key ?? index}\n                row={row}\n                columns={visibleColumns}\n                rowIndex={index}\n                onRowClick={onRowClick}\n                memoize={memoize}\n                dataTestId={tableRow.dataTestId}\n              />\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: {\n  columns: DataTableColumn<any>[];\n  name: string;\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}

package/dist/components/Table/DataTable/DataTable.es.js

@@ -1,54 +1,54 @@
-import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import { Table as a } from "../BaseTable/Table.es.js";
-import { Elevation as v } from "../../Elevation/Elevation.es.js";
-import { Tombstone as _ } from "../../Tombstone/Tombstone.es.js";
-import { ChevronUp as N } from "../../Icon/IconComponents/ChevronUp.es.js";
-import { DataTableRow as w } from "./DataTableRow.es.js";
+import { Elevation as w } from "../../Elevation/Elevation.es.js";
+import { Tombstone as A } from "../../Tombstone/Tombstone.es.js";
+import { ChevronUp as E } from "../../Icon/IconComponents/ChevronUp.es.js";
+import { DataTableRow as H } from "./DataTableRow.es.js";
 /* empty css                        */
 /* empty css                 */
-const A = ({
-  columns: l,
-  data: n = [],
-  loading: h = !1,
-  tombstoneComponent: p,
-  error: o = !1,
-  name: s,
-  onRowClick: f,
-  emptyMessage: C = "Data Unavailable",
-  errorMessage: u = "An error occurred",
-  loadingRows: g = 5,
+const R = ({
+  columns: d,
+  data: o = [],
+  loading: p = !1,
+  tombstoneComponent: m,
+  error: s = !1,
+  name: l,
+  onRowClick: u,
+  emptyMessage: y = "Data Unavailable",
+  errorMessage: T = "An error occurred",
+  loadingRows: S = 5,
   "data-testid": c,
-  memoize: y = !0,
-  sortableColumns: T = [],
-  sortedBy: j,
-  sortDirection: x,
-  onSort: m
+  memoize: D = !0,
+  sortableColumns: v = [],
+  sortedBy: b,
+  sortDirection: f,
+  onSort: C
 }) => {
-  const d = l.filter((r) => !r.isHidden), S = (r) => {
-    if (!m) return;
-    const i = j === r.id && x === "ASC" ? "DESC" : "ASC";
-    m(r.id, i);
-  }, D = (r) => j !== r ? "none" : x === "ASC" ? "ascending" : "descending";
-  return o ? /* @__PURE__ */ e.jsx(
-    b,
+  const n = d.filter((r) => !r.isHidden), _ = (r) => {
+    if (!C) return;
+    const i = b === r.id && f === "ASC" ? "DESC" : "ASC";
+    C(r.id, i);
+  }, N = (r) => b !== r ? "none" : f === "ASC" ? "ascending" : "descending";
+  return s ? /* @__PURE__ */ e(
+    g,
     {
-      columns: d,
-      message: typeof o == "string" ? o : u,
-      name: s,
+      columns: n,
+      message: typeof s == "string" ? s : T,
+      name: l,
       testId: c,
       isError: !0
     }
-  ) : h ? /* @__PURE__ */ e.jsx(
+  ) : p ? /* @__PURE__ */ e(
     "div",
     {
       className: "proton-DataTable",
       "data-testid": c,
       "aria-busy": "true",
-      "aria-label": `Loading ${s}...`,
-      children: /* @__PURE__ */ e.jsxs(a, { name: s, children: [
-        /* @__PURE__ */ e.jsx(a.Header, { children: d.map((r) => /* @__PURE__ */ e.jsx(a.Column, { id: r.id, children: r.header }, r.id)) }),
-        /* @__PURE__ */ e.jsx(a.Body, { children: Array.from({ length: g }).map((r, t) => /* @__PURE__ */ e.jsx(a.Row, { children: d.map((i) => /* @__PURE__ */ e.jsx(a.Cell, { children: p || /* @__PURE__ */ e.jsx(
-          _,
+      "aria-label": `Loading ${l}...`,
+      children: /* @__PURE__ */ h(a, { name: l, children: [
+        /* @__PURE__ */ e(a.Header, { children: n.map((r) => /* @__PURE__ */ e(a.Column, { id: r.id, children: r.header }, r.id)) }),
+        /* @__PURE__ */ e(a.Body, { children: Array.from({ length: S }).map((r, t) => /* @__PURE__ */ e(a.Row, { children: n.map((i) => /* @__PURE__ */ e(a.Cell, { children: m || /* @__PURE__ */ e(
+          A,
           {
             height: "1rem",
             width: (
@@ -59,33 +59,33 @@ const A = ({
         ) }, i.id)) }, `loading-${t}`)) })
       ] })
     }
-  ) : !n || n.length === 0 ? /* @__PURE__ */ e.jsx(
-    b,
+  ) : !o || o.length === 0 ? /* @__PURE__ */ e(
+    g,
     {
-      columns: d,
-      message: C,
-      name: s,
+      columns: n,
+      message: y,
+      name: l,
       testId: c
     }
-  ) : /* @__PURE__ */ e.jsx("div", { className: "proton-DataTable", "data-testid": c, children: /* @__PURE__ */ e.jsxs(a, { name: s, children: [
-    /* @__PURE__ */ e.jsx(a.Header, { children: d.map((r) => {
-      const t = T.includes(r.id), i = D(r.id);
-      return /* @__PURE__ */ e.jsx(
+  ) : /* @__PURE__ */ e("div", { className: "proton-DataTable", "data-testid": c, children: /* @__PURE__ */ h(a, { name: l, children: [
+    /* @__PURE__ */ e(a.Header, { children: n.map((r) => {
+      const t = v.includes(r.id), i = N(r.id);
+      return /* @__PURE__ */ e(
         a.Column,
         {
           id: r.id,
           ...t && { "aria-sort": i },
-          children: /* @__PURE__ */ e.jsxs("span", { className: "proton-DataTable__header-content", children: [
+          children: /* @__PURE__ */ h("span", { className: "proton-DataTable__header-content", children: [
             r.header,
-            t && /* @__PURE__ */ e.jsx(
+            t && /* @__PURE__ */ e(
               "button",
               {
                 className: "proton-DataTable__sort-button",
-                onClick: () => S(r),
+                onClick: () => _(r),
                 "aria-label": `Sort by ${r.header}: ${i}`,
                 type: "button",
-                children: /* @__PURE__ */ e.jsx(
-                  N,
+                children: /* @__PURE__ */ e(
+                  E,
                   {
                     size: 12,
                     color: i === "ascending" ? "var(--proton-color__primary)" : "currentColor"
@@ -98,42 +98,42 @@ const A = ({
         r.id
       );
     }) }),
-    /* @__PURE__ */ e.jsx(a.Body, { children: n.map((r, t) => {
+    /* @__PURE__ */ e(a.Body, { children: o.map((r, t) => {
       const i = r;
-      return /* @__PURE__ */ e.jsx(
-        w,
+      return /* @__PURE__ */ e(
+        H,
         {
           row: r,
-          columns: d,
+          columns: n,
           rowIndex: t,
-          onRowClick: f,
-          memoize: y,
+          onRowClick: u,
+          memoize: D,
           dataTestId: i.dataTestId
         },
         i.key ?? t
       );
     }) })
   ] }) });
-}, b = ({
-  columns: l,
-  message: n,
-  name: h,
-  testId: p,
-  isError: o = !1
-}) => /* @__PURE__ */ e.jsx("div", { className: "proton-DataTable", "data-testid": p, children: /* @__PURE__ */ e.jsxs(a, { name: h, children: [
-  /* @__PURE__ */ e.jsx(a.Header, { children: l.map((s) => /* @__PURE__ */ e.jsx(a.Column, { id: s.id, children: s.header }, s.id)) }),
-  /* @__PURE__ */ e.jsx(a.Body, { children: /* @__PURE__ */ e.jsx(a.Row, { children: /* @__PURE__ */ e.jsx(a.Cell, { colSpan: (l == null ? void 0 : l.length) || 1, children: /* @__PURE__ */ e.jsx(
+}, g = ({
+  columns: d,
+  message: o,
+  name: p,
+  testId: m,
+  isError: s = !1
+}) => /* @__PURE__ */ e("div", { className: "proton-DataTable", "data-testid": m, children: /* @__PURE__ */ h(a, { name: p, children: [
+  /* @__PURE__ */ e(a.Header, { children: d.map((l) => /* @__PURE__ */ e(a.Column, { id: l.id, children: l.header }, l.id)) }),
+  /* @__PURE__ */ e(a.Body, { children: /* @__PURE__ */ e(a.Row, { children: /* @__PURE__ */ e(a.Cell, { colSpan: (d == null ? void 0 : d.length) || 1, children: /* @__PURE__ */ e(
     "div",
     {
       className: "proton-DataTable__message-cell",
-      role: o ? "alert" : "status",
+      role: s ? "alert" : "status",
       "aria-live": "polite",
-      children: /* @__PURE__ */ e.jsx(v, { children: /* @__PURE__ */ e.jsx("div", { className: "proton-DataTable__empty-cell", children: n }) })
+      children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { className: "proton-DataTable__empty-cell", children: o }) })
     }
   ) }) }) })
 ] }) });
-A.displayName = "ProtonUIDataTable";
+R.displayName = "ProtonUIDataTable";
 export {
-  A as DataTable
+  R as DataTable
 };
 //# sourceMappingURL=DataTable.es.js.map

package/dist/components/Table/DataTable/DataTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.es.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /**\n   * Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /**\n   * Array of data objects to display. Can be empty array for loading/empty states\n   * @default []\n   * */\n  data?: T[] | null;\n  /**\n   * Test ID for testing purposes\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Error state\n   * @default false\n   */\n  error?: boolean | string;\n  /**\n   * Custom empty state message\n   * @default \"Data Unavailable\"\n   */\n  emptyMessage?: string;\n  /**\n   * Custom error message\n   * @default \"An error occurred\"\n   */\n  errorMessage?: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Loading state */\n  loading?: boolean;\n  /**\n   * Number of skeleton rows to show in loading state\n   * @default 5\n   */\n  loadingRows?: number;\n  /**\n   * Enable row-level memoization for performance optimization.\n   * Uses deepEqual to compare row data. @see {@link deepEqual}\n   * @default true\n   */\n  memoize?: boolean;\n  /**\n   * Table name/caption for accessibility. Provides essential context for screen readers.\n   * */\n  name: string;\n  /** Optional tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/**\n * DataTable is a declarative wrapper around the base Table component.\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n *\n * @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n  columns,\n  data = [],\n  loading = false,\n  tombstoneComponent,\n  error = false,\n  name,\n  onRowClick,\n  emptyMessage = \"Data Unavailable\",\n  errorMessage = \"An error occurred\",\n  loadingRows = 5,\n  \"data-testid\": testId,\n  memoize = true,\n  sortableColumns = [],\n  sortedBy,\n  sortDirection,\n  onSort,\n}: DataTableProps<T>) => {\n  const visibleColumns = columns.filter((col) => !col.isHidden);\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={typeof error === \"string\" ? error : errorMessage}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <ChevronUp\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            const tableRow = row as TableRowData;\n\n            return (\n              <DataTableRow\n                key={tableRow.key ?? index}\n                row={row}\n                columns={visibleColumns}\n                rowIndex={index}\n                onRowClick={onRowClick}\n                memoize={memoize}\n                dataTestId={tableRow.dataTestId}\n              />\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: {\n  columns: DataTableColumn<any>[];\n  name: string;\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.es.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /**\n   * Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /**\n   * Array of data objects to display. Can be empty array for loading/empty states\n   * @default []\n   * */\n  data?: T[] | null;\n  /**\n   * Test ID for testing purposes\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Error state\n   * @default false\n   */\n  error?: boolean | string;\n  /**\n   * Custom empty state message\n   * @default \"Data Unavailable\"\n   */\n  emptyMessage?: string;\n  /**\n   * Custom error message\n   * @default \"An error occurred\"\n   */\n  errorMessage?: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Loading state */\n  loading?: boolean;\n  /**\n   * Number of skeleton rows to show in loading state\n   * @default 5\n   */\n  loadingRows?: number;\n  /**\n   * Enable row-level memoization for performance optimization.\n   * Uses deepEqual to compare row data. @see {@link deepEqual}\n   * @default true\n   */\n  memoize?: boolean;\n  /**\n   * Table name/caption for accessibility. Provides essential context for screen readers.\n   * */\n  name: string;\n  /** Optional tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/**\n * DataTable is a declarative wrapper around the base Table component.\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n *\n * @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n  columns,\n  data = [],\n  loading = false,\n  tombstoneComponent,\n  error = false,\n  name,\n  onRowClick,\n  emptyMessage = \"Data Unavailable\",\n  errorMessage = \"An error occurred\",\n  loadingRows = 5,\n  \"data-testid\": testId,\n  memoize = true,\n  sortableColumns = [],\n  sortedBy,\n  sortDirection,\n  onSort,\n}: DataTableProps<T>) => {\n  const visibleColumns = columns.filter((col) => !col.isHidden);\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={typeof error === \"string\" ? error : errorMessage}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <ChevronUp\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            const tableRow = row as TableRowData;\n\n            return (\n              <DataTableRow\n                key={tableRow.key ?? index}\n                row={row}\n                columns={visibleColumns}\n                rowIndex={index}\n                onRowClick={onRowClick}\n                memoize={memoize}\n                dataTestId={tableRow.dataTestId}\n              />\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: {\n  columns: DataTableColumn<any>[];\n  name: string;\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}

package/dist/components/Table/DataTable/DataTableRow.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),x=require("../../../utils/deepEqual.cjs.js"),d=require("../BaseTable/Collection/useTableCollection.cjs.js"),R=require("../BaseTable/elements/TableRow.cjs.js"),b=require("../BaseTable/elements/TableCell.cjs.js"),l=({row:t,columns:e,rowIndex:r,onRowClick:a,dataTestId:s})=>o.jsxRuntimeExports.jsx(R.TableRow,{dataTestId:s,ariaRowIndex:d.calculateAriaRowIndex(r,e.length>0),onClick:a?()=>a(t):void 0,children:e.map((n,u)=>o.jsxRuntimeExports.jsx(b.TableCell,{columnIndex:u+1,children:n.cell(t)},n.id))}),m=c.memo(l,(t,e)=>t.rowIndex===e.rowIndex&&x.deepEqual(t.row,e.row)),i=({memoize:t,...e})=>{if(t){const r=m;return o.jsxRuntimeExports.jsx(r,{...e})}return o.jsxRuntimeExports.jsx(l,{...e})};i.displayName="ProtonUIDataTableRow";exports.DataTableRow=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),s=require("../../../utils/deepEqual.cjs.js"),b=require("../BaseTable/Collection/useTableCollection.cjs.js"),w=require("../BaseTable/elements/TableRow.cjs.js"),R=require("../BaseTable/elements/TableCell.cjs.js"),r=({row:a,columns:e,rowIndex:t,onRowClick:l,dataTestId:c})=>o.jsx(w.TableRow,{dataTestId:c,ariaRowIndex:b.calculateAriaRowIndex(t,e.length>0),onClick:l?()=>l(a):void 0,children:e.map((n,d)=>o.jsx(R.TableCell,{columnIndex:d+1,children:n.cell(a)},n.id))}),T=u.memo(r,(a,e)=>a.rowIndex===e.rowIndex&&s.deepEqual(a.row,e.row)),i=({memoize:a,...e})=>{if(a){const t=T;return o.jsx(t,{...e})}return o.jsx(r,{...e})};i.displayName="ProtonUIDataTableRow";exports.DataTableRow=i;
 //# sourceMappingURL=DataTableRow.cjs.js.map

package/dist/components/Table/DataTable/DataTableRow.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.cjs.js","sources":["../../../../src/components/Table/DataTable/DataTableRow.tsx"],"sourcesContent":["import { memo, type ComponentType, type ReactNode } from \"react\";\nimport { DataTableColumn } from \"./DataTable\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\nimport {  calculateAriaRowIndex } from \"../BaseTable/Collection/useTableCollection\";\nimport { TableRow } from \"../BaseTable/elements/TableRow\";\nimport { TableCell } from \"../BaseTable/elements/TableCell\";\n\ninterface DataTableRowProps<T> {\n  row: T;\n  columns: DataTableColumn<T>[];\n  rowIndex: number;\n  onRowClick?: (row: T) => void;\n  memoize?: boolean;\n  dataTestId?: string;\n}\n\nconst DataTableRowComponent = <T,>({\n  row,\n  columns,\n  rowIndex,\n  onRowClick,\n  dataTestId,\n}: DataTableRowProps<T>) => {\n  return (\n    <TableRow\n      dataTestId={dataTestId}\n      ariaRowIndex={calculateAriaRowIndex(rowIndex, columns.length > 0)}\n      onClick={onRowClick ? () => onRowClick(row) : undefined}\n    >\n      {columns.map((column, colIndex) => (\n        <TableCell key={column.id} columnIndex={colIndex + 1}>\n          {column.cell(row)}\n        </TableCell>\n      ))}\n    </TableRow>\n  );\n};\n\nconst MemoizedDataTableRowInner = memo(\n  DataTableRowComponent,\n  (prevProps, nextProps) =>\n    prevProps.rowIndex === nextProps.rowIndex &&\n    deepEqual(prevProps.row, nextProps.row),\n) as typeof DataTableRowComponent;\n\n/**\n * Memoized wrapper for a DataTableRow.\n */\nexport const DataTableRow = <T,>({\n  memoize,\n  ...props\n}: DataTableRowProps<T>): ReactNode => {\n  if (memoize) {\n    const MemoizedRow = MemoizedDataTableRowInner as ComponentType<\n      DataTableRowProps<T>\n    >;\n    return <MemoizedRow {...props} />;\n  }\n  return <DataTableRowComponent {...props} />;\n};\n\nDataTableRow.displayName = \"ProtonUIDataTableRow\";\n"],"names":["DataTableRowComponent","row","columns","rowIndex","onRowClick","dataTestId","jsx","TableRow","calculateAriaRowIndex","column","colIndex","TableCell","MemoizedDataTableRowInner","memo","prevProps","nextProps","deepEqual","DataTableRow","memoize","props","MemoizedRow"],"mappings":"wXAgBMA,EAAwB,CAAK,CACjC,IAAAC,EACA,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,WAAAC,CACF,IAEIC,EAAAA,kBAAAA,IAACC,EAAAA,SAAA,CACC,WAAAF,EACA,aAAcG,EAAAA,sBAAsBL,EAAUD,EAAQ,OAAS,CAAC,EAChE,QAASE,EAAa,IAAMA,EAAWH,CAAG,EAAI,OAE7C,WAAQ,IAAI,CAACQ,EAAQC,4BACnBC,EAAAA,UAAA,CAA0B,YAAaD,EAAW,EAChD,WAAO,KAAKT,CAAG,CAAA,EADFQ,EAAO,EAEvB,CACD,CAAA,CAAA,EAKDG,EAA4BC,EAAAA,KAChCb,EACA,CAACc,EAAWC,IACVD,EAAU,WAAaC,EAAU,UACjCC,YAAUF,EAAU,IAAKC,EAAU,GAAG,CAC1C,EAKaE,EAAe,CAAK,CAC/B,QAAAC,EACA,GAAGC,CACL,IAAuC,CACrC,GAAID,EAAS,CACX,MAAME,EAAcR,EAGpB,OAAON,wBAACc,EAAA,CAAa,GAAGD,CAAA,CAAO,CACjC,CACA,OAAOb,wBAACN,EAAA,CAAuB,GAAGmB,CAAA,CAAO,CAC3C,EAEAF,EAAa,YAAc"}
+{"version":3,"file":"DataTableRow.cjs.js","sources":["../../../../src/components/Table/DataTable/DataTableRow.tsx"],"sourcesContent":["import { memo, type ComponentType, type ReactNode } from \"react\";\nimport { DataTableColumn } from \"./DataTable\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\nimport {  calculateAriaRowIndex } from \"../BaseTable/Collection/useTableCollection\";\nimport { TableRow } from \"../BaseTable/elements/TableRow\";\nimport { TableCell } from \"../BaseTable/elements/TableCell\";\n\ninterface DataTableRowProps<T> {\n  row: T;\n  columns: DataTableColumn<T>[];\n  rowIndex: number;\n  onRowClick?: (row: T) => void;\n  memoize?: boolean;\n  dataTestId?: string;\n}\n\nconst DataTableRowComponent = <T,>({\n  row,\n  columns,\n  rowIndex,\n  onRowClick,\n  dataTestId,\n}: DataTableRowProps<T>) => {\n  return (\n    <TableRow\n      dataTestId={dataTestId}\n      ariaRowIndex={calculateAriaRowIndex(rowIndex, columns.length > 0)}\n      onClick={onRowClick ? () => onRowClick(row) : undefined}\n    >\n      {columns.map((column, colIndex) => (\n        <TableCell key={column.id} columnIndex={colIndex + 1}>\n          {column.cell(row)}\n        </TableCell>\n      ))}\n    </TableRow>\n  );\n};\n\nconst MemoizedDataTableRowInner = memo(\n  DataTableRowComponent,\n  (prevProps, nextProps) =>\n    prevProps.rowIndex === nextProps.rowIndex &&\n    deepEqual(prevProps.row, nextProps.row),\n) as typeof DataTableRowComponent;\n\n/**\n * Memoized wrapper for a DataTableRow.\n */\nexport const DataTableRow = <T,>({\n  memoize,\n  ...props\n}: DataTableRowProps<T>): ReactNode => {\n  if (memoize) {\n    const MemoizedRow = MemoizedDataTableRowInner as ComponentType<\n      DataTableRowProps<T>\n    >;\n    return <MemoizedRow {...props} />;\n  }\n  return <DataTableRowComponent {...props} />;\n};\n\nDataTableRow.displayName = \"ProtonUIDataTableRow\";\n"],"names":["DataTableRowComponent","row","columns","rowIndex","onRowClick","dataTestId","jsx","TableRow","calculateAriaRowIndex","column","colIndex","TableCell","MemoizedDataTableRowInner","memo","prevProps","nextProps","deepEqual","DataTableRow","memoize","props","MemoizedRow"],"mappings":"2VAgBMA,EAAwB,CAAK,CACjC,IAAAC,EACA,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,WAAAC,CACF,IAEIC,EAAAA,IAACC,EAAAA,SAAA,CACC,WAAAF,EACA,aAAcG,EAAAA,sBAAsBL,EAAUD,EAAQ,OAAS,CAAC,EAChE,QAASE,EAAa,IAAMA,EAAWH,CAAG,EAAI,OAE7C,WAAQ,IAAI,CAACQ,EAAQC,UACnBC,EAAAA,UAAA,CAA0B,YAAaD,EAAW,EAChD,WAAO,KAAKT,CAAG,CAAA,EADFQ,EAAO,EAEvB,CACD,CAAA,CAAA,EAKDG,EAA4BC,EAAAA,KAChCb,EACA,CAACc,EAAWC,IACVD,EAAU,WAAaC,EAAU,UACjCC,YAAUF,EAAU,IAAKC,EAAU,GAAG,CAC1C,EAKaE,EAAe,CAAK,CAC/B,QAAAC,EACA,GAAGC,CACL,IAAuC,CACrC,GAAID,EAAS,CACX,MAAME,EAAcR,EAGpB,OAAON,MAACc,EAAA,CAAa,GAAGD,CAAA,CAAO,CACjC,CACA,OAAOb,MAACN,EAAA,CAAuB,GAAGmB,CAAA,CAAO,CAC3C,EAEAF,EAAa,YAAc"}

package/dist/components/Table/DataTable/DataTableRow.es.js

@@ -1,38 +1,32 @@
-import { j as r } from "../../../node_modules/react/jsx-runtime.es.js";
+import { jsx as r } from "react/jsx-runtime";
 import { memo as d } from "react";
-import { deepEqual as x } from "../../../utils/deepEqual.es.js";
-import { calculateAriaRowIndex as w } from "../BaseTable/Collection/useTableCollection.es.js";
-import { TableRow as c } from "../BaseTable/elements/TableRow.es.js";
-import { TableCell as s } from "../BaseTable/elements/TableCell.es.js";
+import { deepEqual as w } from "../../../utils/deepEqual.es.js";
+import { calculateAriaRowIndex as c } from "../BaseTable/Collection/useTableCollection.es.js";
+import { TableRow as R } from "../BaseTable/elements/TableRow.es.js";
+import { TableCell as f } from "../BaseTable/elements/TableCell.es.js";
 const n = ({
   row: e,
   columns: o,
   rowIndex: a,
   onRowClick: t,
   dataTestId: i
-}) => /* @__PURE__ */ r.jsx(
-  c,
+}) => /* @__PURE__ */ r(
+  R,
   {
     dataTestId: i,
-    ariaRowIndex: w(a, o.length > 0),
+    ariaRowIndex: c(a, o.length > 0),
     onClick: t ? () => t(e) : void 0,
-    children: o.map((m, l) => /* @__PURE__ */ r.jsx(s, { columnIndex: l + 1, children: m.cell(e) }, m.id))
+    children: o.map((m, l) => /* @__PURE__ */ r(f, { columnIndex: l + 1, children: m.cell(e) }, m.id))
   }
-), R = d(
+), I = d(
   n,
-  (e, o) => e.rowIndex === o.rowIndex && x(e.row, o.row)
-), f = ({
+  (e, o) => e.rowIndex === o.rowIndex && w(e.row, o.row)
+), b = ({
   memoize: e,
   ...o
-}) => {
-  if (e) {
-    const a = R;
-    return /* @__PURE__ */ r.jsx(a, { ...o });
-  }
-  return /* @__PURE__ */ r.jsx(n, { ...o });
-};
-f.displayName = "ProtonUIDataTableRow";
+}) => e ? /* @__PURE__ */ r(I, { ...o }) : /* @__PURE__ */ r(n, { ...o });
+b.displayName = "ProtonUIDataTableRow";
 export {
-  f as DataTableRow
+  b as DataTableRow
 };
 //# sourceMappingURL=DataTableRow.es.js.map

package/dist/components/Table/DataTable/DataTableRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.es.js","sources":["../../../../src/components/Table/DataTable/DataTableRow.tsx"],"sourcesContent":["import { memo, type ComponentType, type ReactNode } from \"react\";\nimport { DataTableColumn } from \"./DataTable\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\nimport {  calculateAriaRowIndex } from \"../BaseTable/Collection/useTableCollection\";\nimport { TableRow } from \"../BaseTable/elements/TableRow\";\nimport { TableCell } from \"../BaseTable/elements/TableCell\";\n\ninterface DataTableRowProps<T> {\n  row: T;\n  columns: DataTableColumn<T>[];\n  rowIndex: number;\n  onRowClick?: (row: T) => void;\n  memoize?: boolean;\n  dataTestId?: string;\n}\n\nconst DataTableRowComponent = <T,>({\n  row,\n  columns,\n  rowIndex,\n  onRowClick,\n  dataTestId,\n}: DataTableRowProps<T>) => {\n  return (\n    <TableRow\n      dataTestId={dataTestId}\n      ariaRowIndex={calculateAriaRowIndex(rowIndex, columns.length > 0)}\n      onClick={onRowClick ? () => onRowClick(row) : undefined}\n    >\n      {columns.map((column, colIndex) => (\n        <TableCell key={column.id} columnIndex={colIndex + 1}>\n          {column.cell(row)}\n        </TableCell>\n      ))}\n    </TableRow>\n  );\n};\n\nconst MemoizedDataTableRowInner = memo(\n  DataTableRowComponent,\n  (prevProps, nextProps) =>\n    prevProps.rowIndex === nextProps.rowIndex &&\n    deepEqual(prevProps.row, nextProps.row),\n) as typeof DataTableRowComponent;\n\n/**\n * Memoized wrapper for a DataTableRow.\n */\nexport const DataTableRow = <T,>({\n  memoize,\n  ...props\n}: DataTableRowProps<T>): ReactNode => {\n  if (memoize) {\n    const MemoizedRow = MemoizedDataTableRowInner as ComponentType<\n      DataTableRowProps<T>\n    >;\n    return <MemoizedRow {...props} />;\n  }\n  return <DataTableRowComponent {...props} />;\n};\n\nDataTableRow.displayName = \"ProtonUIDataTableRow\";\n"],"names":["DataTableRowComponent","row","columns","rowIndex","onRowClick","dataTestId","jsx","TableRow","calculateAriaRowIndex","column","colIndex","TableCell","MemoizedDataTableRowInner","memo","prevProps","nextProps","deepEqual","DataTableRow","memoize","props","MemoizedRow"],"mappings":";;;;;;AAgBA,MAAMA,IAAwB,CAAK;AAAA,EACjC,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MAEIC,gBAAAA,EAAAA;AAAAA,EAACC;AAAA,EAAA;AAAA,IACC,YAAAF;AAAA,IACA,cAAcG,EAAsBL,GAAUD,EAAQ,SAAS,CAAC;AAAA,IAChE,SAASE,IAAa,MAAMA,EAAWH,CAAG,IAAI;AAAA,IAE7C,YAAQ,IAAI,CAACQ,GAAQC,4BACnBC,GAAA,EAA0B,aAAaD,IAAW,GAChD,YAAO,KAAKT,CAAG,EAAA,GADFQ,EAAO,EAEvB,CACD;AAAA,EAAA;AAAA,GAKDG,IAA4BC;AAAA,EAChCb;AAAA,EACA,CAACc,GAAWC,MACVD,EAAU,aAAaC,EAAU,YACjCC,EAAUF,EAAU,KAAKC,EAAU,GAAG;AAC1C,GAKaE,IAAe,CAAK;AAAA,EAC/B,SAAAC;AAAA,EACA,GAAGC;AACL,MAAuC;AACrC,MAAID,GAAS;AACX,UAAME,IAAcR;AAGpB,WAAON,gBAAAA,MAACc,GAAA,EAAa,GAAGD,EAAA,CAAO;AAAA,EACjC;AACA,SAAOb,gBAAAA,MAACN,GAAA,EAAuB,GAAGmB,EAAA,CAAO;AAC3C;AAEAF,EAAa,cAAc;"}
+{"version":3,"file":"DataTableRow.es.js","sources":["../../../../src/components/Table/DataTable/DataTableRow.tsx"],"sourcesContent":["import { memo, type ComponentType, type ReactNode } from \"react\";\nimport { DataTableColumn } from \"./DataTable\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\nimport {  calculateAriaRowIndex } from \"../BaseTable/Collection/useTableCollection\";\nimport { TableRow } from \"../BaseTable/elements/TableRow\";\nimport { TableCell } from \"../BaseTable/elements/TableCell\";\n\ninterface DataTableRowProps<T> {\n  row: T;\n  columns: DataTableColumn<T>[];\n  rowIndex: number;\n  onRowClick?: (row: T) => void;\n  memoize?: boolean;\n  dataTestId?: string;\n}\n\nconst DataTableRowComponent = <T,>({\n  row,\n  columns,\n  rowIndex,\n  onRowClick,\n  dataTestId,\n}: DataTableRowProps<T>) => {\n  return (\n    <TableRow\n      dataTestId={dataTestId}\n      ariaRowIndex={calculateAriaRowIndex(rowIndex, columns.length > 0)}\n      onClick={onRowClick ? () => onRowClick(row) : undefined}\n    >\n      {columns.map((column, colIndex) => (\n        <TableCell key={column.id} columnIndex={colIndex + 1}>\n          {column.cell(row)}\n        </TableCell>\n      ))}\n    </TableRow>\n  );\n};\n\nconst MemoizedDataTableRowInner = memo(\n  DataTableRowComponent,\n  (prevProps, nextProps) =>\n    prevProps.rowIndex === nextProps.rowIndex &&\n    deepEqual(prevProps.row, nextProps.row),\n) as typeof DataTableRowComponent;\n\n/**\n * Memoized wrapper for a DataTableRow.\n */\nexport const DataTableRow = <T,>({\n  memoize,\n  ...props\n}: DataTableRowProps<T>): ReactNode => {\n  if (memoize) {\n    const MemoizedRow = MemoizedDataTableRowInner as ComponentType<\n      DataTableRowProps<T>\n    >;\n    return <MemoizedRow {...props} />;\n  }\n  return <DataTableRowComponent {...props} />;\n};\n\nDataTableRow.displayName = \"ProtonUIDataTableRow\";\n"],"names":["DataTableRowComponent","row","columns","rowIndex","onRowClick","dataTestId","jsx","TableRow","calculateAriaRowIndex","column","colIndex","TableCell","MemoizedDataTableRowInner","memo","prevProps","nextProps","deepEqual","DataTableRow","memoize","props"],"mappings":";;;;;;AAgBA,MAAMA,IAAwB,CAAK;AAAA,EACjC,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,YAAAF;AAAA,IACA,cAAcG,EAAsBL,GAAUD,EAAQ,SAAS,CAAC;AAAA,IAChE,SAASE,IAAa,MAAMA,EAAWH,CAAG,IAAI;AAAA,IAE7C,YAAQ,IAAI,CAACQ,GAAQC,wBACnBC,GAAA,EAA0B,aAAaD,IAAW,GAChD,YAAO,KAAKT,CAAG,EAAA,GADFQ,EAAO,EAEvB,CACD;AAAA,EAAA;AAAA,GAKDG,IAA4BC;AAAA,EAChCb;AAAA,EACA,CAACc,GAAWC,MACVD,EAAU,aAAaC,EAAU,YACjCC,EAAUF,EAAU,KAAKC,EAAU,GAAG;AAC1C,GAKaE,IAAe,CAAK;AAAA,EAC/B,SAAAC;AAAA,EACA,GAAGC;AACL,MACMD,IAIK,gBAAAZ,EAHaM,GAGZ,EAAa,GAAGO,EAAA,CAAO,IAE1B,gBAAAb,EAACN,GAAA,EAAuB,GAAGmB,EAAA,CAAO;AAG3CF,EAAa,cAAc;"}

package/dist/components/Text/TextCountdown/TextCountdown.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../../../node_modules/react/jsx-runtime.cjs.js"),n=require("react");function x({initialDurationSeconds:u=0,durationSeconds:a=20,children:i="Complete",label:e="",showTimer:s=!0,"data-testid":f}){const o=()=>u>0?Math.max(0,a-u):a,[r,l]=n.useState(()=>o()),t=n.useRef(null);return n.useEffect(()=>{if(!(r<=0))return t.current=setInterval(()=>{l(c=>c<=1?(t.current&&(clearInterval(t.current),t.current=null),0):c-1)},1e3),()=>{t.current&&(clearInterval(t.current),t.current=null)}},[r]),n.useEffect(()=>{l(o())},[a,u]),r<=0?m.jsxRuntimeExports.jsx("span",{"data-testid":f,"aria-label":typeof i=="string"?i:void 0,children:i}):m.jsxRuntimeExports.jsxs("span",{role:"timer","aria-live":"polite","aria-atomic":"true","aria-label":e,"data-testid":f,children:[e&&(s?`${e} `:e),s&&`${String(r)}s...`]})}x.displayName="ProtonUITextCountdown";exports.TextCountdown=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),n=require("react");function x({initialDurationSeconds:u=0,durationSeconds:a=20,children:i="Complete",label:e="",showTimer:s=!0,"data-testid":f}){const c=()=>u>0?Math.max(0,a-u):a,[r,l]=n.useState(()=>c()),t=n.useRef(null);return n.useEffect(()=>{if(!(r<=0))return t.current=setInterval(()=>{l(o=>o<=1?(t.current&&(clearInterval(t.current),t.current=null),0):o-1)},1e3),()=>{t.current&&(clearInterval(t.current),t.current=null)}},[r]),n.useEffect(()=>{l(c())},[a,u]),r<=0?m.jsx("span",{"data-testid":f,"aria-label":typeof i=="string"?i:void 0,children:i}):m.jsxs("span",{role:"timer","aria-live":"polite","aria-atomic":"true","aria-label":e,"data-testid":f,children:[e&&(s?`${e} `:e),s&&`${String(r)}s...`]})}x.displayName="ProtonUITextCountdown";exports.TextCountdown=x;
 //# sourceMappingURL=TextCountdown.cjs.js.map

package/dist/components/Text/TextCountdown/TextCountdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCountdown.cjs.js","sources":["../../../../src/components/Text/TextCountdown/TextCountdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface TextCountdownProps {\n  /** Content to show when countdown has finished and the button is clickable.\n   * @default \"Complete\"\n   */\n  children?: ReactNode;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Total time the timer runs for, in seconds.\n   * @default 20\n   */\n  durationSeconds?: number;\n\n  /** Whether to show the timer.\n   * @default true\n   */\n  showTimer?: boolean;\n\n  /** Label to show before the timer.\n   * @default \"\"\n   */\n  label?: string;\n\n  /**\n   * When provided (and positive), subtracted from durationSeconds to get the initial time left\n   * (e.g. durationSeconds=20, initialDurationSeconds=5 → starts at 15s).\n   * When 0 or omitted, the countdown starts at the full durationSeconds.\n   * @default 0\n   */\n  initialDurationSeconds?: number;\n}\n\n/**\n * A component that displays text with a countdown timer.\n *\n * API:\n *  - {@link TextCountdownProps}\n */\nexport function TextCountdown({\n  initialDurationSeconds = 0,\n  durationSeconds = 20,\n  children = \"Complete\",\n  label = \"\",\n  showTimer = true,\n  \"data-testid\": testId,\n}: TextCountdownProps) {\n  const getInitialTimeLeft = () =>\n    initialDurationSeconds > 0\n      ? Math.max(0, durationSeconds - initialDurationSeconds)\n      : durationSeconds;\n\n  const [timeLeft, setTimeLeft] = useState<number>(() => getInitialTimeLeft());\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  useEffect(() => {\n    if (timeLeft <= 0) {\n      return;\n    }\n\n    intervalRef.current = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n            intervalRef.current = null;\n          }\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [timeLeft]);\n\n  useEffect(() => {\n    setTimeLeft(getInitialTimeLeft());\n  }, [durationSeconds, initialDurationSeconds]);\n\n  if (timeLeft <= 0) {\n    return (\n      <span\n        data-testid={testId}\n        aria-label={typeof children === \"string\" ? children : undefined}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      role=\"timer\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={label}\n      data-testid={testId}\n    >\n      {label && (showTimer ? `${label} ` : label)}\n      {showTimer && `${String(timeLeft)}s...`}\n    </span>\n  );\n}\n\nTextCountdown.displayName = \"ProtonUITextCountdown\";\n"],"names":["TextCountdown","initialDurationSeconds","durationSeconds","children","label","showTimer","testId","getInitialTimeLeft","timeLeft","setTimeLeft","useState","intervalRef","useRef","useEffect","prev","jsx","jsxs"],"mappings":"qKA2CO,SAASA,EAAc,CAC5B,uBAAAC,EAAyB,EACzB,gBAAAC,EAAkB,GAClB,SAAAC,EAAW,WACX,MAAAC,EAAQ,GACR,UAAAC,EAAY,GACZ,cAAeC,CACjB,EAAuB,CACrB,MAAMC,EAAqB,IACzBN,EAAyB,EACrB,KAAK,IAAI,EAAGC,EAAkBD,CAAsB,EACpDC,EAEA,CAACM,EAAUC,CAAW,EAAIC,EAAAA,SAAiB,IAAMH,GAAoB,EACrEI,EAAcC,EAAAA,OAA8C,IAAI,EAgCtE,OA9BAC,EAAAA,UAAU,IAAM,CACd,GAAI,EAAAL,GAAY,GAIhB,OAAAG,EAAY,QAAU,YAAY,IAAM,CACtCF,EAAaK,GACPA,GAAQ,GACNH,EAAY,UACd,cAAcA,EAAY,OAAO,EACjCA,EAAY,QAAU,MAEjB,GAEFG,EAAO,CACf,CACH,EAAG,GAAI,EAEA,IAAM,CACPH,EAAY,UACd,cAAcA,EAAY,OAAO,EACjCA,EAAY,QAAU,KAE1B,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbK,EAAAA,UAAU,IAAM,CACdJ,EAAYF,GAAoB,CAClC,EAAG,CAACL,EAAiBD,CAAsB,CAAC,EAExCO,GAAY,EAEZO,EAAAA,kBAAAA,IAAC,OAAA,CACC,cAAaT,EACb,aAAY,OAAOH,GAAa,SAAWA,EAAW,OAErD,SAAAA,CAAA,CAAA,EAMLa,EAAAA,kBAAAA,KAAC,OAAA,CACC,KAAK,QACL,YAAU,SACV,cAAY,OACZ,aAAYZ,EACZ,cAAaE,EAEZ,SAAA,CAAAF,IAAUC,EAAY,GAAGD,CAAK,IAAMA,GACpCC,GAAa,GAAG,OAAOG,CAAQ,CAAC,MAAA,CAAA,CAAA,CAGvC,CAEAR,EAAc,YAAc"}
+{"version":3,"file":"TextCountdown.cjs.js","sources":["../../../../src/components/Text/TextCountdown/TextCountdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface TextCountdownProps {\n  /** Content to show when countdown has finished and the button is clickable.\n   * @default \"Complete\"\n   */\n  children?: ReactNode;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Total time the timer runs for, in seconds.\n   * @default 20\n   */\n  durationSeconds?: number;\n\n  /** Whether to show the timer.\n   * @default true\n   */\n  showTimer?: boolean;\n\n  /** Label to show before the timer.\n   * @default \"\"\n   */\n  label?: string;\n\n  /**\n   * When provided (and positive), subtracted from durationSeconds to get the initial time left\n   * (e.g. durationSeconds=20, initialDurationSeconds=5 → starts at 15s).\n   * When 0 or omitted, the countdown starts at the full durationSeconds.\n   * @default 0\n   */\n  initialDurationSeconds?: number;\n}\n\n/**\n * A component that displays text with a countdown timer.\n *\n * API:\n *  - {@link TextCountdownProps}\n */\nexport function TextCountdown({\n  initialDurationSeconds = 0,\n  durationSeconds = 20,\n  children = \"Complete\",\n  label = \"\",\n  showTimer = true,\n  \"data-testid\": testId,\n}: TextCountdownProps) {\n  const getInitialTimeLeft = () =>\n    initialDurationSeconds > 0\n      ? Math.max(0, durationSeconds - initialDurationSeconds)\n      : durationSeconds;\n\n  const [timeLeft, setTimeLeft] = useState<number>(() => getInitialTimeLeft());\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  useEffect(() => {\n    if (timeLeft <= 0) {\n      return;\n    }\n\n    intervalRef.current = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n            intervalRef.current = null;\n          }\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [timeLeft]);\n\n  useEffect(() => {\n    setTimeLeft(getInitialTimeLeft());\n  }, [durationSeconds, initialDurationSeconds]);\n\n  if (timeLeft <= 0) {\n    return (\n      <span\n        data-testid={testId}\n        aria-label={typeof children === \"string\" ? children : undefined}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      role=\"timer\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={label}\n      data-testid={testId}\n    >\n      {label && (showTimer ? `${label} ` : label)}\n      {showTimer && `${String(timeLeft)}s...`}\n    </span>\n  );\n}\n\nTextCountdown.displayName = \"ProtonUITextCountdown\";\n"],"names":["TextCountdown","initialDurationSeconds","durationSeconds","children","label","showTimer","testId","getInitialTimeLeft","timeLeft","setTimeLeft","useState","intervalRef","useRef","useEffect","prev","jsx","jsxs"],"mappings":"wIA2CO,SAASA,EAAc,CAC5B,uBAAAC,EAAyB,EACzB,gBAAAC,EAAkB,GAClB,SAAAC,EAAW,WACX,MAAAC,EAAQ,GACR,UAAAC,EAAY,GACZ,cAAeC,CACjB,EAAuB,CACrB,MAAMC,EAAqB,IACzBN,EAAyB,EACrB,KAAK,IAAI,EAAGC,EAAkBD,CAAsB,EACpDC,EAEA,CAACM,EAAUC,CAAW,EAAIC,EAAAA,SAAiB,IAAMH,GAAoB,EACrEI,EAAcC,EAAAA,OAA8C,IAAI,EAgCtE,OA9BAC,EAAAA,UAAU,IAAM,CACd,GAAI,EAAAL,GAAY,GAIhB,OAAAG,EAAY,QAAU,YAAY,IAAM,CACtCF,EAAaK,GACPA,GAAQ,GACNH,EAAY,UACd,cAAcA,EAAY,OAAO,EACjCA,EAAY,QAAU,MAEjB,GAEFG,EAAO,CACf,CACH,EAAG,GAAI,EAEA,IAAM,CACPH,EAAY,UACd,cAAcA,EAAY,OAAO,EACjCA,EAAY,QAAU,KAE1B,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbK,EAAAA,UAAU,IAAM,CACdJ,EAAYF,GAAoB,CAClC,EAAG,CAACL,EAAiBD,CAAsB,CAAC,EAExCO,GAAY,EAEZO,EAAAA,IAAC,OAAA,CACC,cAAaT,EACb,aAAY,OAAOH,GAAa,SAAWA,EAAW,OAErD,SAAAA,CAAA,CAAA,EAMLa,EAAAA,KAAC,OAAA,CACC,KAAK,QACL,YAAU,SACV,cAAY,OACZ,aAAYZ,EACZ,cAAaE,EAEZ,SAAA,CAAAF,IAAUC,EAAY,GAAGD,CAAK,IAAMA,GACpCC,GAAa,GAAG,OAAOG,CAAQ,CAAC,MAAA,CAAA,CAAA,CAGvC,CAEAR,EAAc,YAAc"}

package/dist/components/Text/TextCountdown/TextCountdown.es.js

@@ -1,6 +1,6 @@
-import { j as m } from "../../../node_modules/react/jsx-runtime.es.js";
-import { useState as p, useRef as x, useEffect as c } from "react";
-function v({
+import { jsx as c, jsxs as p } from "react/jsx-runtime";
+import { useState as x, useRef as v, useEffect as m } from "react";
+function I({
   initialDurationSeconds: n = 0,
   durationSeconds: a = 20,
   children: u = "Complete",
@@ -8,24 +8,24 @@ function v({
   showTimer: i = !0,
   "data-testid": f
 }) {
-  const s = () => n > 0 ? Math.max(0, a - n) : a, [r, l] = p(() => s()), t = x(null);
-  return c(() => {
+  const l = () => n > 0 ? Math.max(0, a - n) : a, [r, s] = x(() => l()), t = v(null);
+  return m(() => {
     if (!(r <= 0))
       return t.current = setInterval(() => {
-        l((o) => o <= 1 ? (t.current && (clearInterval(t.current), t.current = null), 0) : o - 1);
+        s((o) => o <= 1 ? (t.current && (clearInterval(t.current), t.current = null), 0) : o - 1);
       }, 1e3), () => {
         t.current && (clearInterval(t.current), t.current = null);
       };
-  }, [r]), c(() => {
-    l(s());
-  }, [a, n]), r <= 0 ? /* @__PURE__ */ m.jsx(
+  }, [r]), m(() => {
+    s(l());
+  }, [a, n]), r <= 0 ? /* @__PURE__ */ c(
     "span",
     {
       "data-testid": f,
       "aria-label": typeof u == "string" ? u : void 0,
       children: u
     }
-  ) : /* @__PURE__ */ m.jsxs(
+  ) : /* @__PURE__ */ p(
     "span",
     {
       role: "timer",
@@ -40,8 +40,8 @@ function v({
     }
   );
 }
-v.displayName = "ProtonUITextCountdown";
+I.displayName = "ProtonUITextCountdown";
 export {
-  v as TextCountdown
+  I as TextCountdown
 };
 //# sourceMappingURL=TextCountdown.es.js.map

package/dist/components/Text/TextCountdown/TextCountdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCountdown.es.js","sources":["../../../../src/components/Text/TextCountdown/TextCountdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface TextCountdownProps {\n  /** Content to show when countdown has finished and the button is clickable.\n   * @default \"Complete\"\n   */\n  children?: ReactNode;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Total time the timer runs for, in seconds.\n   * @default 20\n   */\n  durationSeconds?: number;\n\n  /** Whether to show the timer.\n   * @default true\n   */\n  showTimer?: boolean;\n\n  /** Label to show before the timer.\n   * @default \"\"\n   */\n  label?: string;\n\n  /**\n   * When provided (and positive), subtracted from durationSeconds to get the initial time left\n   * (e.g. durationSeconds=20, initialDurationSeconds=5 → starts at 15s).\n   * When 0 or omitted, the countdown starts at the full durationSeconds.\n   * @default 0\n   */\n  initialDurationSeconds?: number;\n}\n\n/**\n * A component that displays text with a countdown timer.\n *\n * API:\n *  - {@link TextCountdownProps}\n */\nexport function TextCountdown({\n  initialDurationSeconds = 0,\n  durationSeconds = 20,\n  children = \"Complete\",\n  label = \"\",\n  showTimer = true,\n  \"data-testid\": testId,\n}: TextCountdownProps) {\n  const getInitialTimeLeft = () =>\n    initialDurationSeconds > 0\n      ? Math.max(0, durationSeconds - initialDurationSeconds)\n      : durationSeconds;\n\n  const [timeLeft, setTimeLeft] = useState<number>(() => getInitialTimeLeft());\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  useEffect(() => {\n    if (timeLeft <= 0) {\n      return;\n    }\n\n    intervalRef.current = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n            intervalRef.current = null;\n          }\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [timeLeft]);\n\n  useEffect(() => {\n    setTimeLeft(getInitialTimeLeft());\n  }, [durationSeconds, initialDurationSeconds]);\n\n  if (timeLeft <= 0) {\n    return (\n      <span\n        data-testid={testId}\n        aria-label={typeof children === \"string\" ? children : undefined}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      role=\"timer\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={label}\n      data-testid={testId}\n    >\n      {label && (showTimer ? `${label} ` : label)}\n      {showTimer && `${String(timeLeft)}s...`}\n    </span>\n  );\n}\n\nTextCountdown.displayName = \"ProtonUITextCountdown\";\n"],"names":["TextCountdown","initialDurationSeconds","durationSeconds","children","label","showTimer","testId","getInitialTimeLeft","timeLeft","setTimeLeft","useState","intervalRef","useRef","useEffect","prev","jsx","jsxs"],"mappings":";;AA2CO,SAASA,EAAc;AAAA,EAC5B,wBAAAC,IAAyB;AAAA,EACzB,iBAAAC,IAAkB;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,eAAeC;AACjB,GAAuB;AACrB,QAAMC,IAAqB,MACzBN,IAAyB,IACrB,KAAK,IAAI,GAAGC,IAAkBD,CAAsB,IACpDC,GAEA,CAACM,GAAUC,CAAW,IAAIC,EAAiB,MAAMH,GAAoB,GACrEI,IAAcC,EAA8C,IAAI;AAgCtE,SA9BAC,EAAU,MAAM;AACd,QAAI,EAAAL,KAAY;AAIhB,aAAAG,EAAY,UAAU,YAAY,MAAM;AACtC,QAAAF,EAAY,CAACK,MACPA,KAAQ,KACNH,EAAY,YACd,cAAcA,EAAY,OAAO,GACjCA,EAAY,UAAU,OAEjB,KAEFG,IAAO,CACf;AAAA,MACH,GAAG,GAAI,GAEA,MAAM;AACX,QAAIH,EAAY,YACd,cAAcA,EAAY,OAAO,GACjCA,EAAY,UAAU;AAAA,MAE1B;AAAA,EACF,GAAG,CAACH,CAAQ,CAAC,GAEbK,EAAU,MAAM;AACd,IAAAJ,EAAYF,GAAoB;AAAA,EAClC,GAAG,CAACL,GAAiBD,CAAsB,CAAC,GAExCO,KAAY,IAEZO,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaT;AAAA,MACb,cAAY,OAAOH,KAAa,WAAWA,IAAW;AAAA,MAErD,UAAAA;AAAA,IAAA;AAAA,EAAA,IAMLa,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAYZ;AAAA,MACZ,eAAaE;AAAA,MAEZ,UAAA;AAAA,QAAAF,MAAUC,IAAY,GAAGD,CAAK,MAAMA;AAAA,QACpCC,KAAa,GAAG,OAAOG,CAAQ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC;AAEAR,EAAc,cAAc;"}
+{"version":3,"file":"TextCountdown.es.js","sources":["../../../../src/components/Text/TextCountdown/TextCountdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface TextCountdownProps {\n  /** Content to show when countdown has finished and the button is clickable.\n   * @default \"Complete\"\n   */\n  children?: ReactNode;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Total time the timer runs for, in seconds.\n   * @default 20\n   */\n  durationSeconds?: number;\n\n  /** Whether to show the timer.\n   * @default true\n   */\n  showTimer?: boolean;\n\n  /** Label to show before the timer.\n   * @default \"\"\n   */\n  label?: string;\n\n  /**\n   * When provided (and positive), subtracted from durationSeconds to get the initial time left\n   * (e.g. durationSeconds=20, initialDurationSeconds=5 → starts at 15s).\n   * When 0 or omitted, the countdown starts at the full durationSeconds.\n   * @default 0\n   */\n  initialDurationSeconds?: number;\n}\n\n/**\n * A component that displays text with a countdown timer.\n *\n * API:\n *  - {@link TextCountdownProps}\n */\nexport function TextCountdown({\n  initialDurationSeconds = 0,\n  durationSeconds = 20,\n  children = \"Complete\",\n  label = \"\",\n  showTimer = true,\n  \"data-testid\": testId,\n}: TextCountdownProps) {\n  const getInitialTimeLeft = () =>\n    initialDurationSeconds > 0\n      ? Math.max(0, durationSeconds - initialDurationSeconds)\n      : durationSeconds;\n\n  const [timeLeft, setTimeLeft] = useState<number>(() => getInitialTimeLeft());\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  useEffect(() => {\n    if (timeLeft <= 0) {\n      return;\n    }\n\n    intervalRef.current = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n            intervalRef.current = null;\n          }\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [timeLeft]);\n\n  useEffect(() => {\n    setTimeLeft(getInitialTimeLeft());\n  }, [durationSeconds, initialDurationSeconds]);\n\n  if (timeLeft <= 0) {\n    return (\n      <span\n        data-testid={testId}\n        aria-label={typeof children === \"string\" ? children : undefined}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      role=\"timer\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={label}\n      data-testid={testId}\n    >\n      {label && (showTimer ? `${label} ` : label)}\n      {showTimer && `${String(timeLeft)}s...`}\n    </span>\n  );\n}\n\nTextCountdown.displayName = \"ProtonUITextCountdown\";\n"],"names":["TextCountdown","initialDurationSeconds","durationSeconds","children","label","showTimer","testId","getInitialTimeLeft","timeLeft","setTimeLeft","useState","intervalRef","useRef","useEffect","prev","jsx","jsxs"],"mappings":";;AA2CO,SAASA,EAAc;AAAA,EAC5B,wBAAAC,IAAyB;AAAA,EACzB,iBAAAC,IAAkB;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,eAAeC;AACjB,GAAuB;AACrB,QAAMC,IAAqB,MACzBN,IAAyB,IACrB,KAAK,IAAI,GAAGC,IAAkBD,CAAsB,IACpDC,GAEA,CAACM,GAAUC,CAAW,IAAIC,EAAiB,MAAMH,GAAoB,GACrEI,IAAcC,EAA8C,IAAI;AAgCtE,SA9BAC,EAAU,MAAM;AACd,QAAI,EAAAL,KAAY;AAIhB,aAAAG,EAAY,UAAU,YAAY,MAAM;AACtC,QAAAF,EAAY,CAACK,MACPA,KAAQ,KACNH,EAAY,YACd,cAAcA,EAAY,OAAO,GACjCA,EAAY,UAAU,OAEjB,KAEFG,IAAO,CACf;AAAA,MACH,GAAG,GAAI,GAEA,MAAM;AACX,QAAIH,EAAY,YACd,cAAcA,EAAY,OAAO,GACjCA,EAAY,UAAU;AAAA,MAE1B;AAAA,EACF,GAAG,CAACH,CAAQ,CAAC,GAEbK,EAAU,MAAM;AACd,IAAAJ,EAAYF,GAAoB;AAAA,EAClC,GAAG,CAACL,GAAiBD,CAAsB,CAAC,GAExCO,KAAY,IAEZ,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaT;AAAA,MACb,cAAY,OAAOH,KAAa,WAAWA,IAAW;AAAA,MAErD,UAAAA;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAYZ;AAAA,MACZ,eAAaE;AAAA,MAEZ,UAAA;AAAA,QAAAF,MAAUC,IAAY,GAAGD,CAAK,MAAMA;AAAA,QACpCC,KAAa,GAAG,OAAOG,CAAQ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC;AAEAR,EAAc,cAAc;"}

package/dist/components/Text/TextEllipsis/TextEllipsis.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../node_modules/react/jsx-runtime.cjs.js");;/* empty css                      */const o=require("../../../utils/string.cjs.js"),p=({children:e,maxWidth:i,singleLine:s=!0,lines:t=1,title:l,"data-testid":r})=>n.jsxRuntimeExports.jsx("div",{className:o.csx("proton-TextEllipsis",s||t===1?"proton-TextEllipsis--single-line":t>1?"proton-TextEllipsis--multi-line":""),style:{maxWidth:i,WebkitLineClamp:t},title:l,"data-testid":r,children:e});exports.TextEllipsis=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");;/* empty css                      */const o=require("../../../utils/string.cjs.js"),p=({children:e,maxWidth:i,singleLine:s=!0,lines:t=1,title:l,"data-testid":r})=>n.jsx("div",{className:o.csx("proton-TextEllipsis",s||t===1?"proton-TextEllipsis--single-line":t>1?"proton-TextEllipsis--multi-line":""),style:{maxWidth:i,WebkitLineClamp:t},title:l,"data-testid":r,children:e});exports.TextEllipsis=p;
 //# sourceMappingURL=TextEllipsis.cjs.js.map

package/dist/components/Text/TextEllipsis/TextEllipsis.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}
+{"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n  /**\n   * The content to display within the text ellipsis.\n   */\n  children: ReactNode;\n\n  /**\n   * The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n   * When the container width is less than this value, text will be truncated with an ellipsis.\n   */\n  maxWidth?: string | number;\n\n  /**\n   * Whether to truncate the text to a single line. Default is true.\n   * If false, the text will wrap to multiple lines.\n   */\n  singleLine?: boolean;\n\n  /**\n   * The number of lines to show before truncating with an ellipsis.\n   * Only applies when singleLine is false.\n   */\n  lines?: number;\n\n  /**\n   * The title attribute to show on hover. If not provided and singleLine is true,\n   * the children will be used as the title (if children is a string).\n   */\n  title?: string;\n\n  /**\n   * Test id for the component.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A component that displays text with an ellipsis when it overflows its container.\n *\n * API:\n *  - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n  children,\n  maxWidth,\n  singleLine = true,\n  lines = 1,\n  title,\n  \"data-testid\": testId,\n}: TextEllipsisProps) => {\n  return (\n    <div\n      className={csx(\n        \"proton-TextEllipsis\",\n        singleLine || lines === 1\n          ? \"proton-TextEllipsis--single-line\"\n          : lines > 1\n            ? \"proton-TextEllipsis--multi-line\"\n            : \"\"\n      )}\n      style={{\n        maxWidth: maxWidth,\n        WebkitLineClamp: lines,\n      }}\n      title={title}\n      data-testid={testId}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"0MAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}