@gusto/embedded-react-sdk 0.57.3 → 0.58.0

package/dist/components/Common/DataView/DataTable/DataTable.js

@@ -1,43 +1,46 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useId as T, useState as E } from "react";
-import F from "classnames";
-import { useTranslation as S } from "react-i18next";
-import { useSelectionState as A } from "../useSelectionState.js";
-import h from "./DataTable.module.scss.js";
-import { useComponentContext as B } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useId as E, useState as F } from "react";
+import A from "classnames";
+import { useTranslation as B } from "react-i18next";
+import { useSelectionState as G } from "../useSelectionState.js";
+import { getSortControls as J } from "../getSortControls.js";
+import b from "./DataTable.module.scss.js";
+import { useComponentContext as K } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
-function d(r, o) {
-  return !o || o === "start" ? r : /* @__PURE__ */ a("div", { className: h.cellEnd, children: r });
+function i(n, o) {
+  return !o || o === "start" ? n : /* @__PURE__ */ a("div", { className: b.cellEnd, children: n });
 }
-function G(r, o) {
+function W(n, o) {
   if (o.render)
-    return o.render(r);
+    return o.render(n);
   if (o.key) {
-    const i = o.key;
-    return String(r[i] ?? "");
+    const c = o.key;
+    return String(n[c] ?? "");
   }
   return "";
 }
-const Y = ({
-  label: r,
+const I = ({
+  label: n,
   data: o,
-  columns: i,
-  itemMenu: u,
+  columns: c,
+  itemMenu: y,
   onSelect: l,
-  onSelectAll: R,
-  getIsItemSelected: p,
-  hideSelectAll: v,
-  emptyState: b,
-  footer: k,
-  isWithinBox: D,
+  onSelectAll: v,
+  getIsItemSelected: f,
+  hideSelectAll: D,
+  emptyState: k,
+  footer: h,
+  isWithinBox: $,
   selectionMode: C = "multiple",
-  isFetching: g
+  isFetching: g,
+  sortDescriptor: w,
+  onSortChange: R
 }) => {
-  const y = B(), { t: c } = S("common"), $ = T(), [w, H] = E(null), { allSelected: L } = A(o, p), x = [
+  const p = K(), { t: d } = B("common"), H = E(), [L, j] = F(null), { allSelected: x } = G(o, f), N = [
     ...l ? [
       {
         key: "select-header",
-        content: C === "multiple" && p && !v && o.length > 0 ? (
+        content: C === "multiple" && f && !D && o.length > 0 ? (
           // Stop propagation so the surrounding react-aria-components
           // <Column> press handler doesn't intercept the checkbox click
           // and desync the controlled DOM state. The inner <input> is
@@ -57,78 +60,86 @@ const Y = ({
                 e.stopPropagation();
               },
               children: /* @__PURE__ */ a(
-                y.Checkbox,
+                p.Checkbox,
                 {
-                  value: L,
-                  onChange: (e) => R?.(e, o),
-                  label: c("table.selectAllRowsLabel"),
+                  value: x,
+                  onChange: (e) => v?.(e, o),
+                  label: d("table.selectAllRowsLabel"),
                   shouldVisuallyHideLabel: !0
                 }
               )
             }
           )
-        ) : /* @__PURE__ */ a(m, { children: c("table.selectRowHeader") })
+        ) : /* @__PURE__ */ a(m, { children: d("table.selectRowHeader") })
       }
     ] : [],
-    ...i.map((e, t) => ({
-      key: typeof e.key == "string" ? e.key : `header-${t}`,
-      content: d(e.title, e.justify)
-    })),
-    ...u ? [
+    // A sortable column with nothing listening would render a header that looks interactive and
+    // does nothing, so the sort affordance is gated on there being a handler to receive it.
+    ...c.map(
+      (e, t) => e.isSortable && R ? {
+        key: e.key,
+        content: i(e.title, e.justify),
+        ...J(e.key, w, R)
+      } : {
+        key: typeof e.key == "string" ? e.key : `header-${t}`,
+        content: i(e.title, e.justify)
+      }
+    ),
+    ...y ? [
       {
         key: "actions-header",
-        content: d(
-          /* @__PURE__ */ a(m, { children: c("table.actionsColumnHeader") }),
+        content: i(
+          /* @__PURE__ */ a(m, { children: d("table.actionsColumnHeader") }),
           "end"
         )
       }
     ] : []
-  ], N = (e, t) => {
-    H(t), l?.(e, !0);
-  }, P = (e, t) => {
+  ], P = (e, t) => {
+    j(t), l?.(e, !0);
+  }, V = (e, t) => {
     if (C === "single") {
-      const n = p?.(e) ?? w === t;
+      const r = f?.(e) ?? L === t;
       return /* @__PURE__ */ a(
-        y.Radio,
+        p.Radio,
         {
-          name: $,
-          value: n,
+          name: H,
+          value: r,
           onChange: () => {
-            N(e, t);
+            P(e, t);
           },
-          label: c("table.selectRowLabel"),
+          label: d("table.selectRowLabel"),
           shouldVisuallyHideLabel: !0
         }
       );
     }
-    const s = p?.(e) ?? !1;
+    const s = f?.(e) ?? !1;
     return /* @__PURE__ */ a(
-      y.Checkbox,
+      p.Checkbox,
       {
         value: s,
-        onChange: (n) => {
-          l?.(e, n);
+        onChange: (r) => {
+          l?.(e, r);
         },
-        label: c("table.selectRowLabel"),
+        label: d("table.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     );
-  }, V = o.map((e, t) => {
+  }, S = o.map((e, t) => {
     const s = [
       ...l ? [
         {
           key: `select-${t}`,
-          content: P(e, t)
+          content: V(e, t)
         }
       ] : [],
-      ...i.map((n, f) => ({
-        key: typeof n.key == "string" ? n.key : `cell-${f}`,
-        content: d(G(e, n), n.justify)
+      ...c.map((r, u) => ({
+        key: typeof r.key == "string" ? r.key : `cell-${u}`,
+        content: i(W(e, r), r.justify)
       })),
-      ...u ? [
+      ...y ? [
         {
           key: `menu-${t}`,
-          content: d(u(e), "end")
+          content: i(y(e), "end")
         }
       ] : []
     ];
@@ -136,19 +147,19 @@ const Y = ({
       key: `row-${t}`,
       data: s
     };
-  }), j = (() => {
-    if (!k) return;
-    const e = k(), t = [];
+  }), T = (() => {
+    if (!h) return;
+    const e = h(), t = [];
     return l && t.push({
       key: "footer-select",
       content: ""
-    }), i.forEach((s, n) => {
-      const f = typeof s.key == "string" ? s.key : `column-${n}`;
+    }), c.forEach((s, r) => {
+      const u = typeof s.key == "string" ? s.key : `column-${r}`;
       t.push({
-        key: `footer-${f}`,
-        content: d(e[f] || "", s.justify)
+        key: `footer-${u}`,
+        content: i(e[u] || "", s.justify)
       });
-    }), u && t.push({
+    }), y && t.push({
       key: "footer-actions",
       content: ""
     }), t;
@@ -156,18 +167,18 @@ const Y = ({
   return /* @__PURE__ */ a(
     "div",
     {
-      className: F(h.tableWrapper, g && h.isFetching),
+      className: A(b.tableWrapper, g && b.isFetching),
       "aria-busy": !!g,
       children: /* @__PURE__ */ a(
-        y.Table,
+        p.Table,
         {
-          "aria-label": r,
+          "aria-label": n,
           "data-testid": "data-table",
-          headers: x,
-          rows: V,
-          footer: j,
-          emptyState: b ? b() : void 0,
-          isWithinBox: D,
+          headers: N,
+          rows: S,
+          footer: T,
+          emptyState: k ? k() : void 0,
+          isWithinBox: $,
           hasCheckboxColumn: !!l
         }
       )
@@ -175,6 +186,6 @@ const Y = ({
   );
 };
 export {
-  Y as DataTable
+  I as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

package/dist/components/Common/DataView/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport styles from './DataTable.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nfunction withJustify(content: React.ReactNode, justify?: 'start' | 'end') {\n  if (!justify || justify === 'start') return content\n  return <div className={styles.cellEnd}>{content}</div>\n}\n\n/** @internal */\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  isWithinBox?: TableProps['isWithinBox']\n  selectionMode?: SelectionMode\n  isFetching?: useDataViewPropReturn<T>['isFetching']\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\n/** @internal */\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  emptyState,\n  footer,\n  isWithinBox,\n  selectionMode = 'multiple',\n  isFetching,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content:\n              selectionMode === 'multiple' &&\n              getIsItemSelected &&\n              !hideSelectAll &&\n              data.length > 0 ? (\n                // Stop propagation so the surrounding react-aria-components\n                // <Column> press handler doesn't intercept the checkbox click\n                // and desync the controlled DOM state. The inner <input> is\n                // the actual interactive element; this span is a propagation\n                // shield, not a click target itself.\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n                <span\n                  onClick={e => {\n                    e.stopPropagation()\n                  }}\n                  onPointerDown={e => {\n                    e.stopPropagation()\n                  }}\n                  onMouseDown={e => {\n                    e.stopPropagation()\n                  }}\n                >\n                  <Components.Checkbox\n                    value={allSelected}\n                    onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n                    label={t('table.selectAllRowsLabel')}\n                    shouldVisuallyHideLabel\n                  />\n                </span>\n              ) : (\n                <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n              ),\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: withJustify(column.title, column.justify),\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: withJustify(\n              <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n              'end',\n            ),\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: withJustify(getCellContent(item, column), column.justify),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: withJustify(itemMenu(item), 'end'),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: withJustify(footerContent[columnKey] || '', column.justify),\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <div\n      className={cn(styles.tableWrapper, isFetching && styles.isFetching)}\n      aria-busy={Boolean(isFetching)}\n    >\n      <Components.Table\n        aria-label={label}\n        data-testid=\"data-table\"\n        headers={headers}\n        rows={rows}\n        footer={footerData}\n        emptyState={emptyState ? emptyState() : undefined}\n        isWithinBox={isWithinBox}\n        hasCheckboxColumn={!!onSelect}\n      />\n    </div>\n  )\n}\n"],"names":["withJustify","content","justify","jsx","styles","getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","isWithinBox","selectionMode","isFetching","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey","cn"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport { getSortControls } from '../getSortControls'\nimport type { TableData, TableHeaderData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport styles from './DataTable.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nfunction withJustify(content: React.ReactNode, justify?: 'start' | 'end') {\n  if (!justify || justify === 'start') return content\n  return <div className={styles.cellEnd}>{content}</div>\n}\n\n/** @internal */\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  isWithinBox?: TableProps['isWithinBox']\n  selectionMode?: SelectionMode\n  isFetching?: useDataViewPropReturn<T>['isFetching']\n  sortDescriptor?: useDataViewPropReturn<T>['sortDescriptor']\n  onSortChange?: useDataViewPropReturn<T>['onSortChange']\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\n/** @internal */\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  emptyState,\n  footer,\n  isWithinBox,\n  selectionMode = 'multiple',\n  isFetching,\n  sortDescriptor,\n  onSortChange,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const headers: TableHeaderData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content:\n              selectionMode === 'multiple' &&\n              getIsItemSelected &&\n              !hideSelectAll &&\n              data.length > 0 ? (\n                // Stop propagation so the surrounding react-aria-components\n                // <Column> press handler doesn't intercept the checkbox click\n                // and desync the controlled DOM state. The inner <input> is\n                // the actual interactive element; this span is a propagation\n                // shield, not a click target itself.\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n                <span\n                  onClick={e => {\n                    e.stopPropagation()\n                  }}\n                  onPointerDown={e => {\n                    e.stopPropagation()\n                  }}\n                  onMouseDown={e => {\n                    e.stopPropagation()\n                  }}\n                >\n                  <Components.Checkbox\n                    value={allSelected}\n                    onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n                    label={t('table.selectAllRowsLabel')}\n                    shouldVisuallyHideLabel\n                  />\n                </span>\n              ) : (\n                <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n              ),\n          },\n        ]\n      : []),\n    // A sortable column with nothing listening would render a header that looks interactive and\n    // does nothing, so the sort affordance is gated on there being a handler to receive it.\n    ...columns.map((column, index) =>\n      column.isSortable && onSortChange\n        ? {\n            key: column.key,\n            content: withJustify(column.title, column.justify),\n            ...getSortControls(column.key, sortDescriptor, onSortChange),\n          }\n        : {\n            key: typeof column.key === 'string' ? column.key : `header-${index}`,\n            content: withJustify(column.title, column.justify),\n          },\n    ),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: withJustify(\n              <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n              'end',\n            ),\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: withJustify(getCellContent(item, column), column.justify),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: withJustify(itemMenu(item), 'end'),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: withJustify(footerContent[columnKey] || '', column.justify),\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <div\n      className={cn(styles.tableWrapper, isFetching && styles.isFetching)}\n      aria-busy={Boolean(isFetching)}\n    >\n      <Components.Table\n        aria-label={label}\n        data-testid=\"data-table\"\n        headers={headers}\n        rows={rows}\n        footer={footerData}\n        emptyState={emptyState ? emptyState() : undefined}\n        isWithinBox={isWithinBox}\n        hasCheckboxColumn={!!onSelect}\n      />\n    </div>\n  )\n}\n"],"names":["withJustify","content","justify","jsx","styles","getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","isWithinBox","selectionMode","isFetching","sortDescriptor","onSortChange","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","checked","VisuallyHidden","index","getSortControls","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey","cn"],"mappings":"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"}

package/dist/components/Common/DataView/DataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\n/** @internal */\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: useDataViewPropReturn<T>['onSelectAll']\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  isWithinBox?: TableProps['isWithinBox']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n}\n\n/** @internal */\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  isWithinBox,\n  emptyState,\n  selectionMode,\n  onSelectAll,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component\n          {...dataViewProps}\n          onSelectAll={onSelectAll}\n          footer={footer}\n          isWithinBox={isWithinBox}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n          isFetching={isFetching}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","isWithinBox","emptyState","selectionMode","onSelectAll","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA+BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaP;AAAA,EAAA,CACd,GAGKW,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASV,CAAO,GAExCc,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,aAAAD;AAAA,YACA,QAAAJ;AAAA,YACA,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,YACA,YAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHD,KAAc,gBAAAuB,EAACC,GAAA,EAAmB,GAAGxB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
+{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\n/** @internal */\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: useDataViewPropReturn<T>['onSelectAll']\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  isWithinBox?: TableProps['isWithinBox']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n  sortDescriptor?: useDataViewPropReturn<T>['sortDescriptor']\n  onSortChange?: useDataViewPropReturn<T>['onSortChange']\n}\n\n/** @internal */\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  isWithinBox,\n  emptyState,\n  selectionMode,\n  onSelectAll,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component\n          {...dataViewProps}\n          onSelectAll={onSelectAll}\n          footer={footer}\n          isWithinBox={isWithinBox}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n          isFetching={isFetching}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","isWithinBox","emptyState","selectionMode","onSelectAll","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAiCO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaP;AAAA,EAAA,CACd,GAGKW,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASV,CAAO,GAExCc,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,aAAAD;AAAA,YACA,QAAAJ;AAAA,YACA,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,YACA,YAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHD,KAAc,gBAAAuB,EAACC,GAAA,EAAmB,GAAGxB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/getSortControls.js

@@ -0,0 +1,22 @@
+const r = {
+  none: "ascending",
+  ascending: "descending",
+  descending: "none"
+};
+function c(o, e, i) {
+  const t = e?.columnKey === o ? e.direction : "none", n = (s) => () => {
+    i(s === "none" ? void 0 : { columnKey: o, direction: s });
+  };
+  return {
+    isSortable: !0,
+    sortDirection: t,
+    onSort: n(r[t]),
+    onSortAscending: n("ascending"),
+    onSortDescending: n("descending"),
+    onClearSort: n("none")
+  };
+}
+export {
+  c as getSortControls
+};
+//# sourceMappingURL=getSortControls.js.map

package/dist/components/Common/DataView/getSortControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSortControls.js","sources":["../../../../src/components/Common/DataView/getSortControls.ts"],"sourcesContent":["import type { TableSortControls, TableSortDirection } from '../UI/Table/TableTypes'\n\n/**\n * Which column a `DataView` is sorted by, and in which direction. Absent while the data is in its\n * default order.\n *\n * @internal\n */\nexport interface TableSortDescriptor {\n  /** `key` of the column the data is currently sorted by. */\n  columnKey: string\n  /** Direction the sorted column is ordered in. */\n  direction: TableSortDirection\n}\n\nconst NEXT_DIRECTION = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none',\n} as const satisfies Record<TableSortDirection | 'none', TableSortDirection | 'none'>\n\n/**\n * Builds the sort state and handlers for one sortable column, so the desktop table, the mobile\n * cards, and a partner's own table all cycle through the same sorts in the same order.\n *\n * @param columnKey - `key` of the column these controls belong to.\n * @param current - The sort currently applied to the data, if any.\n * @param onSortChange - Receives the sort to move to, or `undefined` to return to the default order.\n * @returns Controls to hand to the column's header cell.\n * @internal\n */\nexport function getSortControls(\n  columnKey: string,\n  current: TableSortDescriptor | undefined,\n  onSortChange: (sortDescriptor: TableSortDescriptor | undefined) => void,\n): TableSortControls {\n  const sortDirection = current?.columnKey === columnKey ? current.direction : 'none'\n  const sortTo = (direction: TableSortDirection | 'none') => () => {\n    onSortChange(direction === 'none' ? undefined : { columnKey, direction })\n  }\n\n  return {\n    isSortable: true,\n    sortDirection,\n    onSort: sortTo(NEXT_DIRECTION[sortDirection]),\n    onSortAscending: sortTo('ascending'),\n    onSortDescending: sortTo('descending'),\n    onClearSort: sortTo('none'),\n  }\n}\n"],"names":["NEXT_DIRECTION","getSortControls","columnKey","current","onSortChange","sortDirection","sortTo","direction"],"mappings":"AAeA,MAAMA,IAAiB;AAAA,EACrB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,YAAY;AACd;AAYO,SAASC,EACdC,GACAC,GACAC,GACmB;AACnB,QAAMC,IAAgBF,GAAS,cAAcD,IAAYC,EAAQ,YAAY,QACvEG,IAAS,CAACC,MAA2C,MAAM;AAC/D,IAAAH,EAAaG,MAAc,SAAS,SAAY,EAAE,WAAAL,GAAW,WAAAK,GAAW;AAAA,EAC1E;AAEA,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,eAAAF;AAAA,IACA,QAAQC,EAAON,EAAeK,CAAa,CAAC;AAAA,IAC5C,iBAAiBC,EAAO,WAAW;AAAA,IACnC,kBAAkBA,EAAO,YAAY;AAAA,IACrC,aAAaA,EAAO,MAAM;AAAA,EAAA;AAE9B;"}

package/dist/components/Common/DataView/useDataView.js

@@ -1,45 +1,51 @@
-import { useMemo as j } from "react";
-const q = ({
+import { useMemo as v } from "react";
+const D = ({
   columns: r,
   data: w,
   itemMenu: V,
-  onSelect: p,
-  onSelectAll: s,
-  getIsItemSelected: u,
-  hideSelectAll: P,
+  onSelect: u,
+  onSelectAll: P,
+  getIsItemSelected: p,
+  hideSelectAll: x,
   pagination: a,
-  emptyState: x,
-  footer: D,
-  isFetching: b,
-  selectionMode: f
-}) => j(() => ({
+  emptyState: b,
+  footer: f,
+  isFetching: j,
+  selectionMode: k,
+  sortDescriptor: q,
+  onSortChange: s
+}) => v(() => ({
   pagination: a,
   data: w,
   columns: r,
   itemMenu: V,
-  onSelect: p,
-  onSelectAll: s,
-  getIsItemSelected: u,
-  hideSelectAll: P,
-  emptyState: x,
-  footer: D,
-  isFetching: b,
-  selectionMode: f
+  onSelect: u,
+  onSelectAll: P,
+  getIsItemSelected: p,
+  hideSelectAll: x,
+  emptyState: b,
+  footer: f,
+  isFetching: j,
+  selectionMode: k,
+  sortDescriptor: q,
+  onSortChange: s
 }), [
   a,
   w,
   r,
   V,
-  p,
-  s,
   u,
   P,
+  p,
   x,
-  D,
   b,
-  f
+  f,
+  j,
+  k,
+  q,
+  s
 ]);
 export {
-  q as useDataView
+  D as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

package/dist/components/Common/DataView/useDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\n/** @internal */\nexport type SelectionMode = 'multiple' | 'single'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n      justify?: 'start' | 'end'\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n      justify?: 'start' | 'end'\n    }\n\ntype FooterKeys<T> = keyof T | string\n\ntype BaseDataViewProps<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  /**\n   * When true, hides the select-all header checkbox (DataTable) and the\n   * select-all row (DataCards). Only meaningful with `selectionMode: 'multiple'`.\n   * Per-row checkboxes are unaffected.\n   */\n  hideSelectAll?: boolean\n}\n\ntype NoSelectionProps = {\n  onSelect?: undefined\n  onSelectAll?: undefined\n  getIsItemSelected?: undefined\n  selectionMode?: undefined\n}\n\ntype SingleSelectionProps<T> = {\n  selectionMode: 'single'\n  onSelect: (item: T, checked: boolean) => void\n  onSelectAll?: undefined\n  getIsItemSelected?: (item: T) => boolean\n}\n\ntype MultipleSelectionProps<T> = {\n  selectionMode?: 'multiple'\n  onSelect: (item: T, checked: boolean) => void\n  /**\n   * Called when the select-all checkbox is toggled.\n   * The header checkbox state reflects only the currently visible `data` array.\n   * With pagination, consumers decide whether to select all data or only the visible page.\n   * `visibleData` is the current page's data array for reference.\n   */\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  /**\n   * Required for multi-select. Returns whether a given item is currently selected.\n   * Use a stable identifier from the item (e.g. item.id) rather than array index.\n   */\n  getIsItemSelected: (item: T) => boolean\n}\n\n/** @internal */\nexport type useDataViewProp<T> = BaseDataViewProps<T> &\n  (NoSelectionProps | SingleSelectionProps<T> | MultipleSelectionProps<T>)\n\n/** @internal */\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\n/** @internal */\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n  selectionMode,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      onSelectAll,\n      getIsItemSelected,\n      hideSelectAll,\n      emptyState,\n      footer,\n      isFetching,\n      selectionMode,\n    }\n  }, [\n    pagination,\n    data,\n    columns,\n    itemMenu,\n    onSelect,\n    onSelectAll,\n    getIsItemSelected,\n    hideSelectAll,\n    emptyState,\n    footer,\n    isFetching,\n    selectionMode,\n  ])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","pagination","emptyState","footer","isFetching","selectionMode","useMemo"],"mappings":";AA0FO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAL;AAAA,EACA,MAAAN;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,IAED;AAAA,EACDJ;AAAA,EACAN;AAAA,EACAD;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,CACD;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { TableSortDescriptor } from './getSortControls'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\n/** @internal */\nexport type SelectionMode = 'multiple' | 'single'\n\n// A sortable column's `key` is reported back as the sort's `columnKey`, so it has to be a real\n// string the consumer chose -- never DataTable's `header-<index>` fallback.\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n      justify?: 'start' | 'end'\n      isSortable?: false\n    }\n  | {\n      key: string\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n      justify?: 'start' | 'end'\n      isSortable: true\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n      justify?: 'start' | 'end'\n      isSortable?: false\n    }\n\ntype FooterKeys<T> = keyof T | string\n\ntype BaseDataViewProps<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  /**\n   * When true, hides the select-all header checkbox (DataTable) and the\n   * select-all row (DataCards). Only meaningful with `selectionMode: 'multiple'`.\n   * Per-row checkboxes are unaffected.\n   */\n  hideSelectAll?: boolean\n  /**\n   * Column the data is currently sorted by. Omit while it is in its default order.\n   */\n  sortDescriptor?: TableSortDescriptor\n  /**\n   * Called when the user picks a new sort, from a column header (DataTable) or the\n   * sort control above the cards (DataCards), with `undefined` when they return the data to its\n   * default order. Omit to leave columns unsortable.\n   */\n  onSortChange?: (sortDescriptor: TableSortDescriptor | undefined) => void\n}\n\ntype NoSelectionProps = {\n  onSelect?: undefined\n  onSelectAll?: undefined\n  getIsItemSelected?: undefined\n  selectionMode?: undefined\n}\n\ntype SingleSelectionProps<T> = {\n  selectionMode: 'single'\n  onSelect: (item: T, checked: boolean) => void\n  onSelectAll?: undefined\n  getIsItemSelected?: (item: T) => boolean\n}\n\ntype MultipleSelectionProps<T> = {\n  selectionMode?: 'multiple'\n  onSelect: (item: T, checked: boolean) => void\n  /**\n   * Called when the select-all checkbox is toggled.\n   * The header checkbox state reflects only the currently visible `data` array.\n   * With pagination, consumers decide whether to select all data or only the visible page.\n   * `visibleData` is the current page's data array for reference.\n   */\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  /**\n   * Required for multi-select. Returns whether a given item is currently selected.\n   * Use a stable identifier from the item (e.g. item.id) rather than array index.\n   */\n  getIsItemSelected: (item: T) => boolean\n}\n\n/** @internal */\nexport type useDataViewProp<T> = BaseDataViewProps<T> &\n  (NoSelectionProps | SingleSelectionProps<T> | MultipleSelectionProps<T>)\n\n/** @internal */\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n  sortDescriptor?: TableSortDescriptor\n  onSortChange?: (sortDescriptor: TableSortDescriptor | undefined) => void\n}\n\n/** @internal */\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n  selectionMode,\n  sortDescriptor,\n  onSortChange,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      onSelectAll,\n      getIsItemSelected,\n      hideSelectAll,\n      emptyState,\n      footer,\n      isFetching,\n      selectionMode,\n      sortDescriptor,\n      onSortChange,\n    }\n  }, [\n    pagination,\n    data,\n    columns,\n    itemMenu,\n    onSelect,\n    onSelectAll,\n    getIsItemSelected,\n    hideSelectAll,\n    emptyState,\n    footer,\n    isFetching,\n    selectionMode,\n    sortDescriptor,\n    onSortChange,\n  ])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","pagination","emptyState","footer","isFetching","selectionMode","sortDescriptor","onSortChange","useMemo"],"mappings":";AAkHO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAP;AAAA,EACA,MAAAN;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,IAED;AAAA,EACDN;AAAA,EACAN;AAAA,EACAD;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,CACD;"}

package/dist/components/Common/UI/Table/Table.js

@@ -1,29 +1,69 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { Table as y, TableHeader as T, Row as i, Column as x, TableBody as k, Cell as t } from "react-aria-components";
-import v from "classnames";
-import { Text as s } from "../Text/Text.js";
-import { TableDefaults as w } from "./TableTypes.js";
-import z from "./Table.module.scss.js";
-import { applyMissingDefaults as C } from "../../../../helpers/applyMissingDefaults.js";
-function M(p) {
-  const h = C(p, w), { className: f, headers: o, rows: l, footer: n, emptyState: c, isWithinBox: g, hasCheckboxColumn: b, ...u } = h;
-  return /* @__PURE__ */ e("div", { className: z.root, "data-within-box": g || void 0, children: /* @__PURE__ */ m(y, { ...u, className: v("react-aria-Table", f), children: [
-    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(i, { children: o.map((a, r) => /* @__PURE__ */ e(x, { isRowHeader: r === 0, children: /* @__PURE__ */ e(s, { as: "span", weight: "semibold", size: "xs", children: a.content }) }, a.key)) }) }),
-    /* @__PURE__ */ m(k, { children: [
-      l.length === 0 && c ? /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { colSpan: o.length, children: c }) }) : l.map((a) => /* @__PURE__ */ e(i, { children: a.data.map((r, d) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(
-        s,
-        {
-          as: "span",
-          variant: b ? d === 1 ? "leading" : "supporting" : d === 0 ? "leading" : "supporting",
-          size: "sm",
-          children: r.content
-        }
-      ) }, r.key)) }, a.key)),
-      n && n.length > 0 && /* @__PURE__ */ e(i, { "data-footer": "true", children: n.length === 1 && n[0] ? /* @__PURE__ */ e(t, { colSpan: o.length, children: /* @__PURE__ */ e(s, { as: "span", variant: "leading", size: "sm", children: n[0].content }) }, n[0].key) : n.map((a) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(s, { as: "span", variant: "leading", size: "sm", children: a.content }) }, a.key)) }, "table-footer")
-    ] })
-  ] }) });
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { Table as v, TableHeader as k, Row as s, Column as D, TableBody as T, Cell as l } from "react-aria-components";
+import g from "classnames";
+import { Text as c } from "../Text/Text.js";
+import { TableDefaults as x } from "./TableTypes.js";
+import p from "./Table.module.scss.js";
+import { applyMissingDefaults as w } from "../../../../helpers/applyMissingDefaults.js";
+import C from "../../../../assets/icons/caret-down.svg.js";
+function N(d) {
+  for (const n of d)
+    if (n.isSortable && n.sortDirection !== "none")
+      return { column: n.key, direction: n.sortDirection };
+}
+function P(d) {
+  const n = w(d, x), { className: u, headers: i, rows: h, footer: t, emptyState: f, isWithinBox: b, hasCheckboxColumn: S, ...y } = n;
+  return /* @__PURE__ */ o("div", { className: p.root, "data-within-box": b || void 0, children: /* @__PURE__ */ m(
+    v,
+    {
+      ...y,
+      className: g("react-aria-Table", u),
+      sortDescriptor: N(i),
+      onSortChange: (e) => {
+        const r = i.find((a) => a.key === String(e.column));
+        r?.isSortable && r.onSort();
+      },
+      children: [
+        /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(s, { children: i.map((e, r) => /* @__PURE__ */ o(
+          D,
+          {
+            id: e.key,
+            isRowHeader: r === 0,
+            allowsSorting: e.isSortable,
+            children: /* @__PURE__ */ m(c, { as: "span", weight: "semibold", size: "xs", children: [
+              e.content,
+              e.isSortable && /* @__PURE__ */ o(
+                C,
+                {
+                  "aria-hidden": "true",
+                  className: g(
+                    p.sortIcon,
+                    e.sortDirection === "ascending" && p.sortIconAscending
+                  ),
+                  "data-sorted": e.sortDirection === "none" ? void 0 : "true"
+                }
+              )
+            ] })
+          },
+          e.key
+        )) }) }),
+        /* @__PURE__ */ m(T, { children: [
+          h.length === 0 && f ? /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(l, { colSpan: i.length, children: f }) }) : h.map((e) => /* @__PURE__ */ o(s, { children: e.data.map((r, a) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+            c,
+            {
+              as: "span",
+              variant: S ? a === 1 ? "leading" : "supporting" : a === 0 ? "leading" : "supporting",
+              size: "sm",
+              children: r.content
+            }
+          ) }, r.key)) }, e.key)),
+          t && t.length > 0 && /* @__PURE__ */ o(s, { "data-footer": "true", children: t.length === 1 && t[0] ? /* @__PURE__ */ o(l, { colSpan: i.length, children: /* @__PURE__ */ o(c, { as: "span", variant: "leading", size: "sm", children: t[0].content }) }, t[0].key) : t.map((e) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(c, { as: "span", variant: "leading", size: "sm", children: e.content }) }, e.key)) }, "table-footer")
+        ] })
+      ]
+    }
+  ) });
 }
 export {
-  M as Table
+  P as Table
 };
 //# sourceMappingURL=Table.js.map

package/dist/components/Common/UI/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/components/Common/UI/Table/Table.tsx"],"sourcesContent":["import {\n  Table as AriaTable,\n  TableHeader as AriaTableHeader,\n  TableBody as AriaTableBody,\n  Row,\n  Column,\n  Cell,\n} from 'react-aria-components'\nimport classnames from 'classnames'\nimport { Text } from '../Text/Text'\nimport type { TableProps } from './TableTypes'\nimport { TableDefaults } from './TableTypes'\nimport styles from './Table.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\n\n/**\n * Data table with headers, rows, optional footer, and empty state.\n *\n * @param rawProps - Table configuration; see {@link TableProps}.\n * @returns The rendered table.\n * @public\n */\nexport function Table(rawProps: TableProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, TableDefaults)\n  const { className, headers, rows, footer, emptyState, isWithinBox, hasCheckboxColumn, ...props } =\n    resolvedProps\n  return (\n    <div className={styles.root} data-within-box={isWithinBox || undefined}>\n      <AriaTable {...props} className={classnames('react-aria-Table', className)}>\n        <AriaTableHeader>\n          <Row>\n            {headers.map((header, index) => (\n              <Column key={header.key} isRowHeader={index === 0}>\n                <Text as=\"span\" weight=\"semibold\" size=\"xs\">\n                  {header.content}\n                </Text>\n              </Column>\n            ))}\n          </Row>\n        </AriaTableHeader>\n        <AriaTableBody>\n          {rows.length === 0 && emptyState ? (\n            <Row>\n              <Cell colSpan={headers.length}>{emptyState}</Cell>\n            </Row>\n          ) : (\n            rows.map(row => (\n              <Row key={row.key}>\n                {row.data.map((cell, index) => (\n                  <Cell key={cell.key}>\n                    <Text\n                      as=\"span\"\n                      variant={\n                        hasCheckboxColumn\n                          ? index === 1\n                            ? 'leading'\n                            : 'supporting'\n                          : index === 0\n                            ? 'leading'\n                            : 'supporting'\n                      }\n                      size=\"sm\"\n                    >\n                      {cell.content}\n                    </Text>\n                  </Cell>\n                ))}\n              </Row>\n            ))\n          )}\n          {footer && footer.length > 0 && (\n            <Row key=\"table-footer\" data-footer=\"true\">\n              {footer.length === 1 && footer[0] ? (\n                <Cell key={footer[0].key} colSpan={headers.length}>\n                  <Text as=\"span\" variant=\"leading\" size=\"sm\">\n                    {footer[0].content}\n                  </Text>\n                </Cell>\n              ) : (\n                footer.map(cell => (\n                  <Cell key={cell.key}>\n                    <Text as=\"span\" variant=\"leading\" size=\"sm\">\n                      {cell.content}\n                    </Text>\n                  </Cell>\n                ))\n              )}\n            </Row>\n          )}\n        </AriaTableBody>\n      </AriaTable>\n    </div>\n  )\n}\n"],"names":["Table","rawProps","resolvedProps","applyMissingDefaults","TableDefaults","className","headers","rows","footer","emptyState","isWithinBox","hasCheckboxColumn","props","styles","jsxs","AriaTable","classnames","jsx","AriaTableHeader","Row","header","index","Column","Text","AriaTableBody","Cell","row","cell"],"mappings":";;;;;;;AAsBO,SAASA,EAAMC,GAAsB;AAC1C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,YAAAC,GAAY,aAAAC,GAAa,mBAAAC,GAAmB,GAAGC,EAAA,IACvFV;AACF,2BACG,OAAA,EAAI,WAAWW,EAAO,MAAM,mBAAiBH,KAAe,QAC3D,UAAA,gBAAAI,EAACC,GAAA,EAAW,GAAGH,GAAO,WAAWI,EAAW,oBAAoBX,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EACE,UAAAb,EAAQ,IAAI,CAACc,GAAQC,MACpB,gBAAAJ,EAACK,GAAA,EAAwB,aAAaD,MAAU,GAC9C,UAAA,gBAAAJ,EAACM,GAAA,EAAK,IAAG,QAAO,QAAO,YAAW,MAAK,MACpC,UAAAH,EAAO,QAAA,CACV,EAAA,GAHWA,EAAO,GAIpB,CACD,EAAA,CACH,GACF;AAAA,sBACCI,GAAA,EACE,UAAA;AAAA,MAAAjB,EAAK,WAAW,KAAKE,IACpB,gBAAAQ,EAACE,GAAA,EACC,4BAACM,GAAA,EAAK,SAASnB,EAAQ,QAAS,UAAAG,EAAA,CAAW,EAAA,CAC7C,IAEAF,EAAK,IAAI,CAAAmB,MACP,gBAAAT,EAACE,GAAA,EACE,UAAAO,EAAI,KAAK,IAAI,CAACC,GAAMN,MACnB,gBAAAJ,EAACQ,GAAA,EACC,UAAA,gBAAAR;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,SACEZ,IACIU,MAAU,IACR,YACA,eACFA,MAAU,IACR,YACA;AAAA,UAER,MAAK;AAAA,UAEJ,UAAAM,EAAK;AAAA,QAAA;AAAA,MAAA,KAdCA,EAAK,GAgBhB,CACD,EAAA,GAnBOD,EAAI,GAoBd,CACD;AAAA,MAEFlB,KAAUA,EAAO,SAAS,KACzB,gBAAAS,EAACE,GAAA,EAAuB,eAAY,QACjC,UAAAX,EAAO,WAAW,KAAKA,EAAO,CAAC,IAC9B,gBAAAS,EAACQ,GAAA,EAAyB,SAASnB,EAAQ,QACzC,UAAA,gBAAAW,EAACM,GAAA,EAAK,IAAG,QAAO,SAAQ,WAAU,MAAK,MACpC,UAAAf,EAAO,CAAC,EAAE,QAAA,CACb,EAAA,GAHSA,EAAO,CAAC,EAAE,GAIrB,IAEAA,EAAO,IAAI,CAAAmB,MACT,gBAAAV,EAACQ,GAAA,EACC,UAAA,gBAAAR,EAACM,GAAA,EAAK,IAAG,QAAO,SAAQ,WAAU,MAAK,MACpC,UAAAI,EAAK,QAAA,CACR,EAAA,GAHSA,EAAK,GAIhB,CACD,EAAA,GAdI,cAgBT;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/components/Common/UI/Table/Table.tsx"],"sourcesContent":["import {\n  Table as AriaTable,\n  TableHeader as AriaTableHeader,\n  TableBody as AriaTableBody,\n  Row,\n  Column,\n  Cell,\n} from 'react-aria-components'\nimport classnames from 'classnames'\nimport { Text } from '../Text/Text'\nimport type { TableProps } from './TableTypes'\nimport { TableDefaults } from './TableTypes'\nimport styles from './Table.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\nfunction getAriaSortDescriptor(headers: TableProps['headers']) {\n  for (const header of headers) {\n    if (header.isSortable && header.sortDirection !== 'none') {\n      return { column: header.key, direction: header.sortDirection }\n    }\n  }\n  return undefined\n}\n\n/**\n * Data table with headers, rows, optional footer, and empty state.\n *\n * @param rawProps - Table configuration; see {@link TableProps}.\n * @returns The rendered table.\n * @public\n */\nexport function Table(rawProps: TableProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, TableDefaults)\n  const { className, headers, rows, footer, emptyState, isWithinBox, hasCheckboxColumn, ...props } =\n    resolvedProps\n  return (\n    <div className={styles.root} data-within-box={isWithinBox || undefined}>\n      <AriaTable\n        {...props}\n        className={classnames('react-aria-Table', className)}\n        sortDescriptor={getAriaSortDescriptor(headers)}\n        onSortChange={descriptor => {\n          // The header owns its own cycle, so react-aria's suggested direction is discarded.\n          const activatedHeader = headers.find(header => header.key === String(descriptor.column))\n          if (activatedHeader?.isSortable) {\n            activatedHeader.onSort()\n          }\n        }}\n      >\n        <AriaTableHeader>\n          <Row>\n            {headers.map((header, index) => (\n              <Column\n                key={header.key}\n                id={header.key}\n                isRowHeader={index === 0}\n                allowsSorting={header.isSortable}\n              >\n                <Text as=\"span\" weight=\"semibold\" size=\"xs\">\n                  {header.content}\n                  {header.isSortable && (\n                    <CaretDown\n                      aria-hidden=\"true\"\n                      className={classnames(\n                        styles.sortIcon,\n                        header.sortDirection === 'ascending' && styles.sortIconAscending,\n                      )}\n                      data-sorted={header.sortDirection === 'none' ? undefined : 'true'}\n                    />\n                  )}\n                </Text>\n              </Column>\n            ))}\n          </Row>\n        </AriaTableHeader>\n        <AriaTableBody>\n          {rows.length === 0 && emptyState ? (\n            <Row>\n              <Cell colSpan={headers.length}>{emptyState}</Cell>\n            </Row>\n          ) : (\n            rows.map(row => (\n              <Row key={row.key}>\n                {row.data.map((cell, index) => (\n                  <Cell key={cell.key}>\n                    <Text\n                      as=\"span\"\n                      variant={\n                        hasCheckboxColumn\n                          ? index === 1\n                            ? 'leading'\n                            : 'supporting'\n                          : index === 0\n                            ? 'leading'\n                            : 'supporting'\n                      }\n                      size=\"sm\"\n                    >\n                      {cell.content}\n                    </Text>\n                  </Cell>\n                ))}\n              </Row>\n            ))\n          )}\n          {footer && footer.length > 0 && (\n            <Row key=\"table-footer\" data-footer=\"true\">\n              {footer.length === 1 && footer[0] ? (\n                <Cell key={footer[0].key} colSpan={headers.length}>\n                  <Text as=\"span\" variant=\"leading\" size=\"sm\">\n                    {footer[0].content}\n                  </Text>\n                </Cell>\n              ) : (\n                footer.map(cell => (\n                  <Cell key={cell.key}>\n                    <Text as=\"span\" variant=\"leading\" size=\"sm\">\n                      {cell.content}\n                    </Text>\n                  </Cell>\n                ))\n              )}\n            </Row>\n          )}\n        </AriaTableBody>\n      </AriaTable>\n    </div>\n  )\n}\n"],"names":["getAriaSortDescriptor","headers","header","Table","rawProps","resolvedProps","applyMissingDefaults","TableDefaults","className","rows","footer","emptyState","isWithinBox","hasCheckboxColumn","props","styles","jsxs","AriaTable","classnames","descriptor","activatedHeader","jsx","AriaTableHeader","Row","index","Column","Text","CaretDown","AriaTableBody","Cell","row","cell"],"mappings":"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"}