@gusto/embedded-react-sdk 0.57.2 → 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":";;;;;;;;AAUA,SAASA,EAAYC,GAA0BC,GAA2B;AACxE,SAAI,CAACA,KAAWA,MAAY,UAAgBD,IACrC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAAU,UAAAH,GAAQ;AAClD;AAmBA,SAASI,EACPC,GACAC,GACA;AACA,MAAIA,EAAO;AACT,WAAOA,EAAO,OAAOD,CAAI;AAG3B,MAAIC,EAAO,KAAK;AACd,UAAMC,IAAMD,EAAO;AACnB,WAAO,OAAOD,EAAKE,CAAG,KAAK,EAAE;AAAA,EAC/B;AAEA,SAAO;AACT;AAGO,MAAMC,IAAY,CAAK;AAAA,EAC5B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAiBC,EAAA,GACjB,CAACC,GAAoBC,CAAqB,IAAIC,EAAwB,IAAI,GAC1E,EAAE,aAAAC,EAAA,IAAgBC,EAAkBtB,GAAMK,CAAiB,GAE3DkB,IAAuB;AAAA,IAC3B,GAAIpB,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SACEO,MAAkB,cAClBL,KACA,CAACC,KACDN,EAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOZ,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAA,MAAK;AACZ,kBAAE,gBAAA;AAAA,cACJ;AAAA,cACA,eAAe,CAAA,MAAK;AAClB,kBAAE,gBAAA;AAAA,cACJ;AAAA,cACA,aAAa,CAAA,MAAK;AAChB,kBAAE,gBAAA;AAAA,cACJ;AAAA,cAEA,UAAA,gBAAAA;AAAA,gBAACoB,EAAW;AAAA,gBAAX;AAAA,kBACC,OAAOS;AAAA,kBACP,UAAU,CAACG,MAAqBpB,IAAcoB,GAASxB,CAAI;AAAA,kBAC3D,OAAOc,EAAE,0BAA0B;AAAA,kBACnC,yBAAuB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA;AAAA,YAGF,gBAAAtB,EAACiC,GAAA,EAAgB,UAAAX,EAAE,uBAAuB,EAAA,CAAE;AAAA,MAAA;AAAA,IAElD,IAEF,CAAA;AAAA,IACJ,GAAGb,EAAQ,IAAI,CAACL,GAAQ8B,OAAW;AAAA,MACjC,KAAK,OAAO9B,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAU8B,CAAK;AAAA,MAClE,SAASrC,EAAYO,EAAO,OAAOA,EAAO,OAAO;AAAA,IAAA,EACjD;AAAA,IACF,GAAIM,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAASb;AAAA,UACP,gBAAAG,EAACiC,GAAA,EAAgB,UAAAX,EAAE,2BAA2B,EAAA,CAAE;AAAA,UAChD;AAAA,QAAA;AAAA,MACF;AAAA,IACF,IAEF,CAAA;AAAA,EAAC,GAGDa,IAAoB,CAAChC,GAASiC,MAAqB;AACvD,IAAAT,EAAsBS,CAAQ,GAC9BzB,IAAWR,GAAM,EAAI;AAAA,EACvB,GAEMkC,IAAyB,CAAClC,GAASiC,MAAqB;AAC5D,QAAIlB,MAAkB,UAAU;AAC9B,YAAMoB,IAAazB,IAAoBV,CAAI,KAAKuB,MAAuBU;AACvE,aACE,gBAAApC;AAAA,QAACoB,EAAW;AAAA,QAAX;AAAA,UACC,MAAMI;AAAA,UACN,OAAOc;AAAAA,UACP,UAAU,MAAM;AACd,YAAAH,EAAkBhC,GAAMiC,CAAQ;AAAA,UAClC;AAAA,UACA,OAAOd,EAAE,sBAAsB;AAAA,UAC/B,yBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,IAG7B;AAEA,UAAMgB,IAAazB,IAAoBV,CAAI,KAAK;AAChD,WACE,gBAAAH;AAAA,MAACoB,EAAW;AAAA,MAAX;AAAA,QACC,OAAOkB;AAAA,QACP,UAAU,CAACN,MAAqB;AAC9B,UAAArB,IAAWR,GAAM6B,CAAO;AAAA,QAC1B;AAAA,QACA,OAAOV,EAAE,sBAAsB;AAAA,QAC/B,yBAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7B,GAEMiB,IAAmB/B,EAAK,IAAI,CAACL,GAAMiC,MAAa;AACpD,UAAMI,IAAuB;AAAA,MAC3B,GAAI7B,IACA;AAAA,QACE;AAAA,UACE,KAAK,UAAUyB,CAAQ;AAAA,UACvB,SAASC,EAAuBlC,GAAMiC,CAAQ;AAAA,QAAA;AAAA,MAChD,IAEF,CAAA;AAAA,MACJ,GAAG3B,EAAQ,IAAI,CAACL,GAAQqC,OACf;AAAA,QACL,KAAK,OAAOrC,EAAO,OAAQ,WAAWA,EAAO,MAAM,QAAQqC,CAAQ;AAAA,QACnE,SAAS5C,EAAYK,EAAeC,GAAMC,CAAM,GAAGA,EAAO,OAAO;AAAA,MAAA,EAEpE;AAAA,MACD,GAAIM,IACA;AAAA,QACE;AAAA,UACE,KAAK,QAAQ0B,CAAQ;AAAA,UACrB,SAASvC,EAAYa,EAASP,CAAI,GAAG,KAAK;AAAA,QAAA;AAAA,MAC5C,IAEF,CAAA;AAAA,IAAC;AAGP,WAAO;AAAA,MACL,KAAK,OAAOiC,CAAQ;AAAA,MACpB,MAAMI;AAAA,IAAA;AAAA,EAEV,CAAC,GAoCKE,KAlCkB,MAAM;AAC5B,QAAI,CAAC1B,EAAQ;AAEb,UAAM2B,IAAgB3B,EAAA,GAChB4B,IAA2B,CAAA;AAGjC,WAAIjC,KACFiC,EAAY,KAAK;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,IAAA,CACV,GAIHnC,EAAQ,QAAQ,CAACL,GAAQ8B,MAAU;AACjC,YAAMW,IAAY,OAAOzC,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAU8B,CAAK;AAC/E,MAAAU,EAAY,KAAK;AAAA,QACf,KAAK,UAAUC,CAAS;AAAA,QACxB,SAAShD,EAAY8C,EAAcE,CAAS,KAAK,IAAIzC,EAAO,OAAO;AAAA,MAAA,CACpE;AAAA,IACH,CAAC,GAGGM,KACFkC,EAAY,KAAK;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,IAAA,CACV,GAGIA;AAAA,EACT,GAEmB;AAEnB,SACE,gBAAA5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW8C,EAAG7C,EAAO,cAAckB,KAAclB,EAAO,UAAU;AAAA,MAClE,aAAW,EAAQkB;AAAA,MAEnB,UAAA,gBAAAnB;AAAA,QAACoB,EAAW;AAAA,QAAX;AAAA,UACC,cAAYb;AAAA,UACZ,eAAY;AAAA,UACZ,SAAAwB;AAAA,UACA,MAAAQ;AAAA,UACA,QAAQG;AAAA,UACR,YAAY3B,IAAaA,EAAA,IAAe;AAAA,UACxC,aAAAE;AAAA,UACA,mBAAmB,CAAC,CAACN;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB;AAAA,EAAA;AAGN;"}
+{"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":";;;;;;;;;AAWA,SAASA,EAAYC,GAA0BC,GAA2B;AACxE,SAAI,CAACA,KAAWA,MAAY,UAAgBD,IACrC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAAU,UAAAH,GAAQ;AAClD;AAqBA,SAASI,EACPC,GACAC,GACA;AACA,MAAIA,EAAO;AACT,WAAOA,EAAO,OAAOD,CAAI;AAG3B,MAAIC,EAAO,KAAK;AACd,UAAMC,IAAMD,EAAO;AACnB,WAAO,OAAOD,EAAKE,CAAG,KAAK,EAAE;AAAA,EAC/B;AAEA,SAAO;AACT;AAGO,MAAMC,IAAY,CAAK;AAAA,EAC5B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAiBC,EAAA,GACjB,CAACC,GAAoBC,CAAqB,IAAIC,EAAwB,IAAI,GAC1E,EAAE,aAAAC,EAAA,IAAgBC,EAAkBxB,GAAMK,CAAiB,GAE3DoB,IAA6B;AAAA,IACjC,GAAItB,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SACEO,MAAkB,cAClBL,KACA,CAACC,KACDN,EAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOZ,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAA,MAAK;AACZ,kBAAE,gBAAA;AAAA,cACJ;AAAA,cACA,eAAe,CAAA,MAAK;AAClB,kBAAE,gBAAA;AAAA,cACJ;AAAA,cACA,aAAa,CAAA,MAAK;AAChB,kBAAE,gBAAA;AAAA,cACJ;AAAA,cAEA,UAAA,gBAAAA;AAAA,gBAACsB,EAAW;AAAA,gBAAX;AAAA,kBACC,OAAOS;AAAA,kBACP,UAAU,CAACG,MAAqBtB,IAAcsB,GAAS1B,CAAI;AAAA,kBAC3D,OAAOgB,EAAE,0BAA0B;AAAA,kBACnC,yBAAuB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA;AAAA,YAGF,gBAAAxB,EAACmC,GAAA,EAAgB,UAAAX,EAAE,uBAAuB,EAAA,CAAE;AAAA,MAAA;AAAA,IAElD,IAEF,CAAA;AAAA;AAAA;AAAA,IAGJ,GAAGf,EAAQ;AAAA,MAAI,CAACL,GAAQgC,MACtBhC,EAAO,cAAciB,IACjB;AAAA,QACE,KAAKjB,EAAO;AAAA,QACZ,SAASP,EAAYO,EAAO,OAAOA,EAAO,OAAO;AAAA,QACjD,GAAGiC,EAAgBjC,EAAO,KAAKgB,GAAgBC,CAAY;AAAA,MAAA,IAE7D;AAAA,QACE,KAAK,OAAOjB,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAUgC,CAAK;AAAA,QAClE,SAASvC,EAAYO,EAAO,OAAOA,EAAO,OAAO;AAAA,MAAA;AAAA,IACnD;AAAA,IAEN,GAAIM,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAASb;AAAA,UACP,gBAAAG,EAACmC,GAAA,EAAgB,UAAAX,EAAE,2BAA2B,EAAA,CAAE;AAAA,UAChD;AAAA,QAAA;AAAA,MACF;AAAA,IACF,IAEF,CAAA;AAAA,EAAC,GAGDc,IAAoB,CAACnC,GAASoC,MAAqB;AACvD,IAAAV,EAAsBU,CAAQ,GAC9B5B,IAAWR,GAAM,EAAI;AAAA,EACvB,GAEMqC,IAAyB,CAACrC,GAASoC,MAAqB;AAC5D,QAAIrB,MAAkB,UAAU;AAC9B,YAAMuB,IAAa5B,IAAoBV,CAAI,KAAKyB,MAAuBW;AACvE,aACE,gBAAAvC;AAAA,QAACsB,EAAW;AAAA,QAAX;AAAA,UACC,MAAMI;AAAA,UACN,OAAOe;AAAAA,UACP,UAAU,MAAM;AACd,YAAAH,EAAkBnC,GAAMoC,CAAQ;AAAA,UAClC;AAAA,UACA,OAAOf,EAAE,sBAAsB;AAAA,UAC/B,yBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,IAG7B;AAEA,UAAMiB,IAAa5B,IAAoBV,CAAI,KAAK;AAChD,WACE,gBAAAH;AAAA,MAACsB,EAAW;AAAA,MAAX;AAAA,QACC,OAAOmB;AAAA,QACP,UAAU,CAACP,MAAqB;AAC9B,UAAAvB,IAAWR,GAAM+B,CAAO;AAAA,QAC1B;AAAA,QACA,OAAOV,EAAE,sBAAsB;AAAA,QAC/B,yBAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7B,GAEMkB,IAAmBlC,EAAK,IAAI,CAACL,GAAMoC,MAAa;AACpD,UAAMI,IAAuB;AAAA,MAC3B,GAAIhC,IACA;AAAA,QACE;AAAA,UACE,KAAK,UAAU4B,CAAQ;AAAA,UACvB,SAASC,EAAuBrC,GAAMoC,CAAQ;AAAA,QAAA;AAAA,MAChD,IAEF,CAAA;AAAA,MACJ,GAAG9B,EAAQ,IAAI,CAACL,GAAQwC,OACf;AAAA,QACL,KAAK,OAAOxC,EAAO,OAAQ,WAAWA,EAAO,MAAM,QAAQwC,CAAQ;AAAA,QACnE,SAAS/C,EAAYK,EAAeC,GAAMC,CAAM,GAAGA,EAAO,OAAO;AAAA,MAAA,EAEpE;AAAA,MACD,GAAIM,IACA;AAAA,QACE;AAAA,UACE,KAAK,QAAQ6B,CAAQ;AAAA,UACrB,SAAS1C,EAAYa,EAASP,CAAI,GAAG,KAAK;AAAA,QAAA;AAAA,MAC5C,IAEF,CAAA;AAAA,IAAC;AAGP,WAAO;AAAA,MACL,KAAK,OAAOoC,CAAQ;AAAA,MACpB,MAAMI;AAAA,IAAA;AAAA,EAEV,CAAC,GAoCKE,KAlCkB,MAAM;AAC5B,QAAI,CAAC7B,EAAQ;AAEb,UAAM8B,IAAgB9B,EAAA,GAChB+B,IAA2B,CAAA;AAGjC,WAAIpC,KACFoC,EAAY,KAAK;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,IAAA,CACV,GAIHtC,EAAQ,QAAQ,CAACL,GAAQgC,MAAU;AACjC,YAAMY,IAAY,OAAO5C,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAUgC,CAAK;AAC/E,MAAAW,EAAY,KAAK;AAAA,QACf,KAAK,UAAUC,CAAS;AAAA,QACxB,SAASnD,EAAYiD,EAAcE,CAAS,KAAK,IAAI5C,EAAO,OAAO;AAAA,MAAA,CACpE;AAAA,IACH,CAAC,GAGGM,KACFqC,EAAY,KAAK;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,IAAA,CACV,GAGIA;AAAA,EACT,GAEmB;AAEnB,SACE,gBAAA/C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWiD,EAAGhD,EAAO,cAAckB,KAAclB,EAAO,UAAU;AAAA,MAClE,aAAW,EAAQkB;AAAA,MAEnB,UAAA,gBAAAnB;AAAA,QAACsB,EAAW;AAAA,QAAX;AAAA,UACC,cAAYf;AAAA,UACZ,eAAY;AAAA,UACZ,SAAA0B;AAAA,UACA,MAAAS;AAAA,UACA,QAAQG;AAAA,UACR,YAAY9B,IAAaA,EAAA,IAAe;AAAA,UACxC,aAAAE;AAAA,UACA,mBAAmB,CAAC,CAACN;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB;AAAA,EAAA;AAGN;"}

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/DateRangeFilter/DateRangeFilter.js

@@ -1,13 +1,13 @@
-import { jsxs as a, Fragment as H, jsx as e } from "react/jsx-runtime";
-import { useState as y, useRef as I, useCallback as t, useMemo as M } from "react";
-import { Popover as _, Dialog as q } from "react-aria-components";
+import { jsx as e, jsxs as a, Fragment as H } from "react/jsx-runtime";
+import { useState as x, useRef as I, useCallback as l, useMemo as L } from "react";
+import { Popover as M, Dialog as _ } from "react-aria-components";
 import s from "./DateRangeFilter.module.scss.js";
 import { Flex as R } from "../Flex/Flex.js";
-import { useComponentContext as z } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useTheme as E } from "../../../contexts/ThemeProvider/useTheme.js";
+import { useComponentContext as q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTheme as z } from "../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                       */
-import G from "../../../assets/icons/filter-funnel.svg.js";
-const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ee = ({
+import E from "../../../assets/icons/filter-funnel.svg.js";
+const F = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ne = ({
   startDate: n,
   endDate: o,
   onStartDateChange: d,
@@ -15,44 +15,44 @@ const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   onClear: h,
   startDateLabel: c,
   endDateLabel: u,
-  applyLabel: F,
+  applyLabel: b,
   cancelLabel: k,
   resetLabel: $,
-  selectDatesLabel: b,
-  triggerLabel: N,
-  maxEndDate: j,
-  minStartDate: B
+  selectDatesLabel: N,
+  getTriggerLabel: j,
+  maxEndDate: B,
+  minStartDate: O
 }) => {
-  const { Button: i, DateRangePicker: O } = z(), { container: S } = E(), [g, m] = y(!1), [l, p] = y(null), v = I(null), P = t(() => {
+  const { Button: i, DateRangePicker: S } = q(), { container: P } = z(), [g, m] = x(!1), [t, p] = x(null), v = I(null), T = l(() => {
     p(n && o ? { start: n, end: o } : null), m(!0);
-  }, [n, o]), C = t(() => {
+  }, [n, o]), C = l(() => {
     m(!1);
-  }, []), U = t(() => {
-    l ? (d(l.start), f(l.end)) : h(), m(!1);
-  }, [l, d, f, h]), V = t(() => {
+  }, []), U = l(() => {
+    t ? (d(t.start), f(t.end)) : h(), m(!1);
+  }, [t, d, f, h]), V = l(() => {
     p(null);
-  }, []), A = t((r) => {
+  }, []), A = l((r) => {
     p(r?.start && r.end ? r : null);
-  }, []), T = M(() => !n || !o ? null : `${x(n)} – ${x(o)}`, [n, o]), w = /* @__PURE__ */ e(
+  }, []), y = L(() => !n || !o ? null : `${F(n)} – ${F(o)}`, [n, o]) ?? N, w = /* @__PURE__ */ e(
     i,
     {
       buttonRef: v,
-      "aria-label": N,
+      "aria-label": j(y),
       "aria-haspopup": "dialog",
       "aria-expanded": g,
-      onClick: P,
+      onClick: T,
       variant: "secondary",
-      icon: /* @__PURE__ */ e(G, {}),
+      icon: /* @__PURE__ */ e(E, {}),
       className: s.triggerButton,
-      children: T ?? b
+      children: y
     }
   );
   return /* @__PURE__ */ a(H, { children: [
     w,
     /* @__PURE__ */ e(
-      _,
+      M,
       {
-        UNSTABLE_portalContainer: S.current ?? void 0,
+        UNSTABLE_portalContainer: P.current ?? void 0,
         isOpen: g,
         onOpenChange: (r) => {
           r || C();
@@ -61,25 +61,25 @@ const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
         placement: "bottom end",
         offset: 8,
         shouldUpdatePosition: !0,
-        children: /* @__PURE__ */ a(q, { className: s.dialog, "aria-label": `${c} – ${u}`, children: [
+        children: /* @__PURE__ */ a(_, { className: s.dialog, "aria-label": `${c} – ${u}`, children: [
           /* @__PURE__ */ e("div", { className: s.popoverContent, children: /* @__PURE__ */ e(
-            O,
+            S,
             {
               label: `${c} – ${u}`,
               shouldVisuallyHideLabel: !0,
-              value: l,
+              value: t,
               onChange: A,
               startDateLabel: c,
               endDateLabel: u,
-              minValue: B,
-              maxValue: j
+              minValue: O,
+              maxValue: B
             }
           ) }),
           /* @__PURE__ */ e("div", { className: s.popoverFooter, children: /* @__PURE__ */ a(R, { gap: 8, justifyContent: "space-between", children: [
             /* @__PURE__ */ e(i, { variant: "tertiary", onClick: V, children: $ }),
             /* @__PURE__ */ a(R, { gap: 8, justifyContent: "flex-end", children: [
               /* @__PURE__ */ e(i, { variant: "secondary", onClick: C, children: k }),
-              /* @__PURE__ */ e(i, { variant: "primary", onClick: U, children: F })
+              /* @__PURE__ */ e(i, { variant: "primary", onClick: U, children: b })
             ] })
           ] }) })
         ] })
@@ -88,6 +88,6 @@ const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   ] });
 };
 export {
-  ee as DateRangeFilter
+  ne as DateRangeFilter
 };
 //# sourceMappingURL=DateRangeFilter.js.map