@gusto/embedded-react-sdk 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.29.0
+
+### Features & Enhancements
+
+- Export StateTaxesList and StateTaxesForm from Company API
+- Add RFI alerts to contractor payment list
+
+### Fixes
+
+- Convert state tax percentage inputs from decimal to human-readable format
+- Improve UI of tab component
+
+### Chores & Maintenance
+
+- Rewrite contractor onboarding documentation
+- Implement semver-based PR title validation and auto-versioning
+- Switch auto-version workflow to manual dispatch
+- Add reusable pagination hook and refactor components
+- Improve cursor commands for branch creation and PR defaults
+- Bump @storybook/addon-a11y, addon-docs, addon-onboarding, react-vite from 10.2.8 to 10.2.9
+- Bump typescript-eslint from 8.55.0 to 8.56.0
+- Bump i18next from 25.8.5 to 25.8.8
+- Bump react-error-boundary from 6.1.0 to 6.1.1
+- Bump dotenv from 17.2.4 to 17.3.1
+
+## 0.28.0
+
+### Features & Enhancements
+
+- Extend DataTable for radio selection mode
+- Update InformationRequests empty state title and remove description
+
+### Breaking changes
+
+#### Card component adapter (selection props)
+
+If you supply a custom **Card** via the [component adapter](./docs/component-adapter/component-adapter.md), update it to use the new API: the Card no longer receives `onSelect`. Selection UI (checkbox or radio) is now passed as the `action` prop.
+
+```tsx
+// Before: Card received onSelect and rendered its own checkbox
+Card: ({ children, menu, className, onSelect }) => (
+  <div className={className}>
+    {onSelect && <input type="checkbox" onChange={e => onSelect(e.target.checked)} />}
+    {children}
+    {menu}
+  </div>
+)
+
+// After: Card receives pre-rendered selection UI via action
+Card: ({ children, menu, className, action }) => (
+  <div className={className}>
+    {action}
+    {children}
+    {menu}
+  </div>
+)
+```
+
 ## 0.27.0
 
 ### Features & Enhancements

package/dist/components/Common/DataView/DataCards/DataCards.d.ts

@@ -1,10 +1,12 @@
-import { useDataViewPropReturn } from '../useDataView';
+import { useDataViewPropReturn, SelectionMode } from '../useDataView';
 export type DataCardsProps<T> = {
     columns: useDataViewPropReturn<T>['columns'];
     data: useDataViewPropReturn<T>['data'];
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, emptyState, footer, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, isItemSelected, emptyState, footer, selectionMode, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,41 +1,61 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import d from "./DataCards.module.scss.js";
-import { Flex as C } from "../../Flex/Flex.js";
-import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const D = ({
-  data: o,
-  columns: h,
-  itemMenu: s,
-  onSelect: a,
-  emptyState: c,
-  footer: m
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { useId as g } from "react";
+import { useTranslation as x } from "react-i18next";
+import s from "./DataCards.module.scss.js";
+import { Flex as L } from "../../Flex/Flex.js";
+import { useComponentContext as N } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const H = ({
+  data: d,
+  columns: p,
+  itemMenu: c,
+  onSelect: o,
+  isItemSelected: f,
+  emptyState: m,
+  footer: h,
+  selectionMode: C = "multiple"
 }) => {
-  const i = v();
-  return /* @__PURE__ */ n("div", { role: "list", "data-testid": "data-cards", children: [
-    o.length === 0 && c && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: c() }) }),
-    o.map((t, l) => /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(
-      i.Card,
+  const i = N(), { t: u } = x("common"), v = g(), b = (e, t) => {
+    if (!o) return;
+    const r = f?.(e, t) ?? !1;
+    return C === "single" ? /* @__PURE__ */ l(
+      i.Radio,
       {
-        menu: s && s(t),
-        onSelect: a ? (e) => {
-          a(t, e);
-        } : void 0,
-        children: h.map((e, p) => /* @__PURE__ */ n(C, { flexDirection: "column", gap: 0, children: [
-          e.title && /* @__PURE__ */ r("h5", { className: d.columnTitle, children: e.title }),
-          /* @__PURE__ */ n("div", { className: d.columnData, children: [
-            " ",
-            e.render ? e.render(t) : String(t[e.key])
-          ] })
-        ] }, p))
+        name: v,
+        value: r,
+        onChange: () => {
+          o(e, !0);
+        },
+        label: u("card.selectRowLabel"),
+        shouldVisuallyHideLabel: !0
       }
-    ) }, l)),
-    m && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: (() => {
-      const t = m();
-      return Object.entries(t).map(([l, e]) => /* @__PURE__ */ r("div", { className: d.footerItem, children: e }, l));
+    ) : /* @__PURE__ */ l(
+      i.Checkbox,
+      {
+        value: r,
+        onChange: (n) => {
+          o(e, n);
+        },
+        label: u("card.selectRowLabel"),
+        shouldVisuallyHideLabel: !0
+      }
+    );
+  };
+  return /* @__PURE__ */ a("div", { role: "list", "data-testid": "data-cards", children: [
+    d.length === 0 && m && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { children: m() }) }),
+    d.map((e, t) => /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { menu: c && c(e), action: b(e, t), children: p.map((r, n) => /* @__PURE__ */ a(L, { flexDirection: "column", gap: 0, children: [
+      r.title && /* @__PURE__ */ l("h5", { className: s.columnTitle, children: r.title }),
+      /* @__PURE__ */ a("div", { className: s.columnData, children: [
+        " ",
+        r.render ? r.render(e) : String(e[r.key])
+      ] })
+    ] }, n)) }) }, t)),
+    h && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { children: (() => {
+      const e = h();
+      return Object.entries(e).map(([t, r]) => /* @__PURE__ */ l("div", { className: s.footerItem, children: r }, t));
     })() }) })
   ] });
 };
 export {
-  D as DataCards
+  H as DataCards
 };
 //# sourceMappingURL=DataCards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card\n            menu={itemMenu && itemMenu(item)}\n            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              // Footer content is always an object with column keys\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key} className={styles.footerItem}>\n                  {content}\n                </div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles","footerContent","key","content"],"mappings":";;;;AAcO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAR,EAAK,WAAW,KAAKI,KACpB,gBAAAK,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAF,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACU,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMJ,KAAYA,EAASQ,CAAI;AAAA,QAC/B,UACEP,IACI,CAACS,MAAqB;AACpB,UAAAT,EAASO,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAX,EAAQ,IAAI,CAACY,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC3C,UAAA;AAAA,UAAAD,EAAO,SAAS,gBAAAJ,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,UAClE,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,IACAN,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAI,EAACH,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMU,IAAgBX,EAAA;AAGtB,aAAO,OAAO,QAAQW,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,wBACpD,OAAA,EAAc,WAAWH,EAAO,YAC9B,UAAAG,EAAA,GADOD,CAEV,CACD;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  isItemSelected,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = isItemSelected?.(item, index) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card menu={itemMenu && itemMenu(item)} action={renderAction(item, index)}>\n            {columns.map((column, colIndex) => (\n              <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key} className={styles.footerItem}>\n                  {content}\n                </div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","isItemSelected","emptyState","footer","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","renderAction","item","index","isSelected","jsx","checked","jsxs","column","colIndex","Flex","styles","footerContent","key","content"],"mappings":";;;;;;AAkBO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAiBC,EAAA,GAEjBC,IAAe,CAACC,GAASC,MAAkB;AAC/C,QAAI,CAACb,EAAU;AAEf,UAAMc,IAAab,IAAiBW,GAAMC,CAAK,KAAK;AAEpD,WAAIT,MAAkB,WAElB,gBAAAW;AAAA,MAACV,EAAW;AAAA,MAAX;AAAA,QACC,MAAMI;AAAA,QACN,OAAOK;AAAA,QACP,UAAU,MAAM;AACd,UAAAd,EAASY,GAAM,EAAI;AAAA,QACrB;AAAA,QACA,OAAOL,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA,IAM3B,gBAAAQ;AAAA,MAACV,EAAW;AAAA,MAAX;AAAA,QACC,OAAOS;AAAA,QACP,UAAU,CAACE,MAAqB;AAC9B,UAAAhB,EAASY,GAAMI,CAAO;AAAA,QACxB;AAAA,QACA,OAAOT,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7B;AAEA,SACE,gBAAAU,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAApB,EAAK,WAAW,KAAKK,KACpB,gBAAAa,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACV,EAAW,MAAX,EAAiB,UAAAH,EAAA,GAAa,GACjC;AAAA,IAEDL,EAAK,IAAI,CAACe,GAAMC,MACf,gBAAAE,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACV,EAAW,MAAX,EAAgB,MAAMN,KAAYA,EAASa,CAAI,GAAG,QAAQD,EAAaC,GAAMC,CAAK,GAChF,UAAAf,EAAQ,IAAI,CAACoB,GAAQC,MACpB,gBAAAF,EAACG,GAAA,EAAoB,eAAc,UAAS,KAAK,GAC9C,UAAA;AAAA,MAAAF,EAAO,SAAS,gBAAAH,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,MAClE,gBAAAJ,EAAC,OAAA,EAAI,WAAWI,EAAO,YACpB,UAAA;AAAA,QAAA;AAAA,QACAH,EAAO,SAASA,EAAO,OAAON,CAAI,IAAI,OAAOA,EAAKM,EAAO,GAAc,CAAC;AAAA,MAAA,EAAA,CAC3E;AAAA,IAAA,EAAA,GALSC,CAMX,CACD,EAAA,CACH,EAAA,GAXwBN,CAY1B,CACD;AAAA,IACAV,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAY,EAACV,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMiB,IAAgBnB,EAAA;AAEtB,aAAO,OAAO,QAAQmB,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,wBACpD,OAAA,EAAc,WAAWH,EAAO,YAC9B,UAAAG,EAAA,GADOD,CAEV,CACD;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Common/DataView/DataTable/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { useDataViewPropReturn } from '../useDataView';
+import { useDataViewPropReturn, SelectionMode } from '../useDataView';
 import { TableProps } from '../../UI/Table/TableTypes';
 export type DataTableProps<T> = {
     label: string;
@@ -9,5 +9,6 @@ export type DataTableProps<T> = {
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
     variant?: TableProps['variant'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,63 +1,78 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-function m(s, r) {
-  if (r.render)
-    return r.render(s);
-  if (r.key) {
-    const n = r.key;
-    return String(s[n] ?? "");
+import { useId as v, useState as x } from "react";
+import { useTranslation as T } from "react-i18next";
+import { useComponentContext as V } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as p } from "../../VisuallyHidden/VisuallyHidden.js";
+function w(i, o) {
+  if (o.render)
+    return o.render(i);
+  if (o.key) {
+    const a = o.key;
+    return String(i[a] ?? "");
   }
   return "";
 }
-const F = ({
-  label: s,
-  data: r,
-  columns: n,
+const q = ({
+  label: i,
+  data: o,
+  columns: a,
   itemMenu: c,
-  onSelect: a,
-  emptyState: d,
-  footer: f,
-  variant: b
+  onSelect: n,
+  emptyState: f,
+  footer: k,
+  variant: b,
+  selectionMode: h = "multiple"
 }) => {
-  const p = D(), { t: k } = g("common"), u = [
-    ...a ? [
+  const u = V(), { t: d } = T("common"), C = v(), [g, m] = x(null), R = [
+    ...n ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ l(h, { children: k("table.selectRowHeader") })
+        content: /* @__PURE__ */ l(p, { children: d("table.selectRowHeader") })
       }
     ] : [],
-    ...n.map((t, e) => ({
+    ...a.map((t, e) => ({
       key: typeof t.key == "string" ? t.key : `header-${e}`,
       content: t.title
     })),
     ...c ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ l(h, { children: k("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(p, { children: d("table.actionsColumnHeader") })
       }
     ] : []
-  ], C = r.map((t, e) => {
-    const i = [
-      ...a ? [
+  ], $ = (t, e) => {
+    m(e), n?.(t, !0);
+  }, D = (t, e) => h === "single" ? /* @__PURE__ */ l(
+    u.Radio,
+    {
+      name: C,
+      value: g === e,
+      onChange: () => {
+        $(t, e);
+      },
+      label: d("table.selectRowLabel"),
+      shouldVisuallyHideLabel: !0
+    }
+  ) : /* @__PURE__ */ l(
+    u.Checkbox,
+    {
+      onChange: (r) => {
+        n?.(t, r);
+      },
+      label: d("table.selectRowLabel"),
+      shouldVisuallyHideLabel: !0
+    }
+  ), H = o.map((t, e) => {
+    const r = [
+      ...n ? [
         {
           key: `select-${e}`,
-          content: /* @__PURE__ */ l(
-            p.Checkbox,
-            {
-              onChange: (o) => {
-                a(t, o);
-              },
-              label: k("table.selectRowLabel"),
-              shouldVisuallyHideLabel: !0
-            }
-          )
+          content: D(t, e)
         }
       ] : [],
-      ...n.map((o, y) => ({
-        key: typeof o.key == "string" ? o.key : `cell-${y}`,
-        content: m(t, o)
+      ...a.map((s, y) => ({
+        key: typeof s.key == "string" ? s.key : `cell-${y}`,
+        content: w(t, s)
       })),
       ...c ? [
         {
@@ -68,16 +83,16 @@ const F = ({
     ];
     return {
       key: `row-${e}`,
-      data: i
+      data: r
     };
-  }), $ = (() => {
-    if (!f) return;
-    const t = f(), e = [];
-    return a && e.push({
+  }), L = (() => {
+    if (!k) return;
+    const t = k(), e = [];
+    return n && e.push({
       key: "footer-select",
       content: ""
-    }), n.forEach((i, o) => {
-      const y = typeof i.key == "string" ? i.key : `column-${o}`;
+    }), a.forEach((r, s) => {
+      const y = typeof r.key == "string" ? r.key : `column-${s}`;
       e.push({
         key: `footer-${y}`,
         content: t[y] || ""
@@ -88,20 +103,20 @@ const F = ({
     }), e;
   })();
   return /* @__PURE__ */ l(
-    p.Table,
+    u.Table,
     {
-      "aria-label": s,
+      "aria-label": i,
       "data-testid": "data-table",
-      headers: u,
-      rows: C,
-      footer: $,
-      emptyState: d ? d() : void 0,
+      headers: R,
+      rows: H,
+      footer: L,
+      emptyState: f ? f() : void 0,
       variant: b,
-      hasCheckboxColumn: !!a
+      hasCheckboxColumn: !!n
     }
   );
 };
 export {
-  F as DataTable
+  q 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 { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn } from '../useDataView'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\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  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  variant?: TableProps['variant']\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\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n  variant,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\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: (\n                <Components.Checkbox\n                  onChange={(checked: boolean) => {\n                    onSelect(item, checked)\n                  }}\n                  label={t('table.selectRowLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\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: footerContent[columnKey] || '',\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    <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      variant={variant}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","variant","Components","useComponentContext","t","useTranslation","headers","jsx","VisuallyHidden","index","rows","rowIndex","rowData","checked","colIndex","footerData","footerContent","footerCells","columnKey"],"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 { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\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  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  variant?: TableProps['variant']\n  selectionMode?: SelectionMode\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\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n  variant,\n  selectionMode = 'multiple',\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\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\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      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={selectedRadioIndex === rowIndex}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\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: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\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: footerContent[columnKey] || '',\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    <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      variant={variant}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","variant","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","headers","jsx","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","checked","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}

package/dist/components/Common/DataView/DataView.d.ts

@@ -1,5 +1,5 @@
 import { TableProps } from '../UI/Table/TableTypes';
-import { useDataViewPropReturn } from './useDataView';
+import { useDataViewPropReturn, SelectionMode } from './useDataView';
 import { useContainerBreakpointsProps } from '../../../hooks/useContainerBreakpoints/useContainerBreakpoints';
 export type DataViewProps<T> = {
     columns: useDataViewPropReturn<T>['columns'];
@@ -8,11 +8,13 @@ export type DataViewProps<T> = {
     label: string;
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
     breakAt?: string;
     breakpoints?: useContainerBreakpointsProps['breakpoints'];
     footer?: useDataViewPropReturn<T>['footer'];
     isFetching?: boolean;
     variant?: TableProps['variant'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, selectionMode, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,11 @@
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { useRef as k, useMemo as C } from "react";
-import { PaginationControl as D } from "../PaginationControl/PaginationControl.js";
-import w from "./DataView.module.scss.js";
-import { DataTable as x } from "./DataTable/DataTable.js";
-import { DataCards as h } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as j } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const N = ({
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { useRef as C, useMemo as D } from "react";
+import { PaginationControl as w } from "../PaginationControl/PaginationControl.js";
+import x from "./DataView.module.scss.js";
+import { DataTable as h } from "./DataTable/DataTable.js";
+import { DataCards as j } from "./DataCards/DataCards.js";
+import { useContainerBreakpoints as v } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const P = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
@@ -13,28 +13,38 @@ const N = ({
   footer: m,
   variant: p,
   emptyState: c,
-  ...l
+  selectionMode: l,
+  ...f
 }) => {
-  const e = k(null), o = j({
+  const e = C(null), o = v({
     ref: e,
     breakpoints: i
-  }), f = o.length > 0, r = !o.includes(a), d = C(() => r ? h : x, [r]);
-  return /* @__PURE__ */ b(
+  }), d = o.length > 0, r = !o.includes(a), u = D(() => r ? j : h, [r]);
+  return /* @__PURE__ */ k(
     "div",
     {
       "data-testid": "data-view",
-      className: w.dataViewContainer,
-      ref: (u) => {
-        e.current = u;
+      className: x.dataViewContainer,
+      ref: (b) => {
+        e.current = b;
       },
       children: [
-        f && /* @__PURE__ */ n(d, { ...l, footer: m, variant: p, emptyState: c }),
-        t && /* @__PURE__ */ n(D, { ...t, isFetching: s })
+        d && /* @__PURE__ */ n(
+          u,
+          {
+            ...f,
+            footer: m,
+            variant: p,
+            emptyState: c,
+            selectionMode: l
+          }
+        ),
+        t && /* @__PURE__ */ n(w, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  N as DataView
+  P as DataView
 };
 //# sourceMappingURL=DataView.js.map

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 } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\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  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  variant?: TableProps['variant']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\n  emptyState,\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 {...dataViewProps} footer={footer} variant={variant} emptyState={emptyState} />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","emptyState","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAyBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaL;AAAA,EAAA,CACd,GAGKS,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASR,CAAO,GAExCY,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,uBACEE,GAAA,EAAW,GAAGP,GAAe,QAAAH,GAAgB,SAAAC,GAAkB,YAAAC,GAAwB;AAAA,QAEzFN,KAAc,gBAAAqB,EAACC,GAAA,EAAmB,GAAGtB,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\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  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  variant?: TableProps['variant']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\n  emptyState,\n  selectionMode,\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          footer={footer}\n          variant={variant}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","emptyState","selectionMode","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA2BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaN;AAAA,EAAA,CACd,GAGKU,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAAST,CAAO,GAExCa,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,QAAAJ;AAAA,YACA,SAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHP,KAAc,gBAAAsB,EAACC,GAAA,EAAmB,GAAGvB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/useDataView.d.ts

@@ -1,4 +1,5 @@
 import { PaginationControlProps } from '../PaginationControl/PaginationControlTypes';
+export type SelectionMode = 'multiple' | 'single';
 type DataViewColumn<T> = {
     key: keyof T;
     title: string | React.ReactNode;
@@ -15,9 +16,11 @@ export type useDataViewProp<T> = {
     pagination?: PaginationControlProps;
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
+    isItemSelected?: (item: T, index: number) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
+    selectionMode?: SelectionMode;
 };
 export type useDataViewPropReturn<T> = {
     pagination?: PaginationControlProps;
@@ -25,9 +28,11 @@ export type useDataViewPropReturn<T> = {
     columns: DataViewColumn<T>[];
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
+    isItemSelected?: (item: T, index: number) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
+    selectionMode?: SelectionMode;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, footer, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, isItemSelected, pagination, emptyState, footer, isFetching, selectionMode, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

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

@@ -1,24 +1,39 @@
-import { useMemo as a } from "react";
-const x = ({
+import { useMemo as D } from "react";
+const j = ({
   columns: r,
-  data: s,
-  itemMenu: o,
-  onSelect: w,
-  pagination: V,
-  emptyState: p,
-  footer: u,
-  isFetching: P
-}) => a(() => ({
-  pagination: V,
-  data: s,
+  data: w,
+  itemMenu: V,
+  onSelect: p,
+  isItemSelected: s,
+  pagination: u,
+  emptyState: P,
+  footer: a,
+  isFetching: o,
+  selectionMode: x
+}) => D(() => ({
+  pagination: u,
+  data: w,
   columns: r,
-  itemMenu: o,
-  onSelect: w,
-  emptyState: p,
-  footer: u,
-  isFetching: P
-}), [V, s, r, o, w, p, u, P]);
+  itemMenu: V,
+  onSelect: p,
+  isItemSelected: s,
+  emptyState: P,
+  footer: a,
+  isFetching: o,
+  selectionMode: x
+}), [
+  u,
+  w,
+  r,
+  V,
+  p,
+  s,
+  P,
+  a,
+  o,
+  x
+]);
 export {
-  x as useDataView
+  j as useDataView
 };
 //# sourceMappingURL=useDataView.js.map