@gusto/embedded-react-sdk 0.13.1 → 0.13.3

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 0.13.3
+
+### Fixes
+
+- Apply system styles to alert UI for consistent styling
+- Hide admin fields when self-onboarding and add form validation
+- Update useField to correctly handle component props
+- Replace self-onboarding checkbox with switchfield card component
+
+### Chores & Maintenance
+
+- Bump react-hook-form from 7.62.0 to 7.63.0
+- Bump robot3 from 1.1.1 to 1.2.0
+- Bump typescript-eslint from 8.44.0 to 8.44.1
+- Bump eslint from 9.35.0 to 9.36.0
+- Bump eslint-plugin-react-refresh from 0.4.20 to 0.4.21
+- Bump tsx from 4.20.5 to 4.20.6
+- Bump sass-embedded from 1.92.1 to 1.93.2
+- Bump msw from 2.11.2 to 2.11.3
+- Bump lint-staged from 16.1.6 to 16.2.0
+- Bump @eslint/js from 9.35.0 to 9.36.0
+
+## 0.13.2
+
+### Features & Enhancements
+
+- Add alert for edit payroll success
+- Add payroll type and pay date to PayrollList
+- Add comprehensive footer support to DataView components
+- Implement PayrollHistory presentation layer
+- Implement new deductions empty state UI
+
+### Chores & Maintenance
+
+- Upgrade embedded API to 0.6.11
+- Bump dompurify from 3.2.6 to 3.2.7
+
 ## 0.13.1
 
 ### Fixes

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,7 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_virtual/index.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/fast-deep-equal/index.js";
+var t = r();
+const p = /* @__PURE__ */ e(t);
+export {
+  p as default
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/assets/icons/close.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: o,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": o, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: o }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M15 5L5 15M5 5L15 15", stroke: "#535862", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=close.svg.js.map

package/dist/assets/icons/close.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.svg.js","sources":["../../../src/assets/icons/close.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgClose = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 20, height: 20, viewBox: \"0 0 20 20\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15 5L5 15M5 5L15 15\", stroke: \"#535862\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgClose;\n"],"names":["SvgClose","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAW,CAAC;AAAA,EAChB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,wBAAwB,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/download-cloud.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: o,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": o, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: o }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M5.33301 11.3333L7.99967 14M7.99967 14L10.6663 11.3333M7.99967 14V8M13.333 11.1619C14.1473 10.4894 14.6663 9.47196 14.6663 8.33333C14.6663 6.30829 13.0247 4.66667 10.9997 4.66667C10.854 4.66667 10.7177 4.59066 10.6438 4.46516C9.77438 2.98989 8.1693 2 6.33301 2C3.57158 2 1.33301 4.23858 1.33301 7C1.33301 8.3774 1.88997 9.62472 2.79097 10.529", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=download-cloud.svg.js.map

package/dist/assets/icons/download-cloud.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-cloud.svg.js","sources":["../../../src/assets/icons/download-cloud.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgDownloadCloud = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M5.33301 11.3333L7.99967 14M7.99967 14L10.6663 11.3333M7.99967 14V8M13.333 11.1619C14.1473 10.4894 14.6663 9.47196 14.6663 8.33333C14.6663 6.30829 13.0247 4.66667 10.9997 4.66667C10.854 4.66667 10.7177 4.59066 10.6438 4.46516C9.77438 2.98989 8.1693 2 6.33301 2C3.57158 2 1.33301 4.23858 1.33301 7C1.33301 8.3774 1.88997 9.62472 2.79097 10.529\", stroke: \"currentColor\", strokeWidth: 1.5, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgDownloadCloud;\n"],"names":["SvgDownloadCloud","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAmB,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,0VAA0V,QAAQ,gBAAgB,aAAa,KAAK,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

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

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

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

@@ -1,33 +1,38 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import a from "./DataCards.module.scss.js";
-import { Flex as p } from "../../Flex/Flex.js";
-import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+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: t,
-  columns: c,
-  itemMenu: d,
-  onSelect: n,
-  emptyState: o
+  data: o,
+  columns: h,
+  itemMenu: s,
+  onSelect: a,
+  emptyState: c,
+  footer: m
 }) => {
-  const s = x();
-  return /* @__PURE__ */ l("div", { role: "list", "data-testid": "data-cards", children: [
-    t.length === 0 && o && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(s.Card, { children: o() }) }),
-    t.map((i, m) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
-      s.Card,
+  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,
       {
-        menu: d && d(i),
-        onSelect: n ? (r) => {
-          n(i, r);
+        menu: s && s(t),
+        onSelect: a ? (e) => {
+          a(t, e);
         } : void 0,
-        children: c.map((r, h) => /* @__PURE__ */ l(p, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e("h5", { className: a.columnTitle, children: r.title }),
-          /* @__PURE__ */ l("div", { className: a.columnData, children: [
+        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: [
             " ",
-            r.render ? r.render(i) : String(i[r.key])
+            e.render ? e.render(t) : String(t[e.key])
           ] })
-        ] }, h))
+        ] }, p))
       }
-    ) }, m))
+    ) }, 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));
+    })() }) })
   ] });
 };
 export {

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}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\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                <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    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles"],"mappings":";;;;AAaO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAP,EAAK,WAAW,KAAKI,KACpB,gBAAAI,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAD,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACS,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMH,KAAYA,EAASO,CAAI;AAAA,QAC/B,UACEN,IACI,CAACQ,MAAqB;AACpB,UAAAR,EAASM,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAV,EAAQ,IAAI,CAACW,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC5C,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,OAAM;AAAA,UACjD,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,EAAA,GACH;AAEJ;"}
+{"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;"}

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

@@ -1,10 +1,12 @@
-const t = "_columnTitle_1rhjs_1", l = "_columnData_1rhjs_8", o = {
+const t = "_columnTitle_13axu_1", o = "_columnData_13axu_8", e = "_footerItem_13axu_13", a = {
   columnTitle: t,
-  columnData: l
+  columnData: o,
+  footerItem: e
 };
 export {
-  l as columnData,
+  o as columnData,
   t as columnTitle,
-  o as default
+  a as default,
+  e as footerItem
 };
 //# sourceMappingURL=DataCards.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

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

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

@@ -1,86 +1,106 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useTranslation as C } from "react-i18next";
-import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as k } from "../../VisuallyHidden/VisuallyHidden.js";
-function u(n, t) {
-  if (t.render)
-    return t.render(n);
-  if (t.key) {
-    const o = t.key;
-    return String(n[o] ?? "");
+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 b } from "../../VisuallyHidden/VisuallyHidden.js";
+function H(a, r) {
+  if (r.render)
+    return r.render(a);
+  if (r.key) {
+    const n = r.key;
+    return String(a[n] ?? "");
   }
   return "";
 }
-const T = ({
-  label: n,
-  data: t,
-  columns: o,
-  itemMenu: l,
-  onSelect: i,
-  emptyState: d
+const F = ({
+  label: a,
+  data: r,
+  columns: n,
+  itemMenu: s,
+  onSelect: c,
+  emptyState: f,
+  footer: k,
+  variant: h
 }) => {
-  const c = g(), { t: y } = C("common"), p = [
-    ...i ? [
+  const p = D(), { t: d } = g("common"), u = [
+    ...c ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ s(k, { children: y("table.selectRowHeader") })
+        content: /* @__PURE__ */ l(b, { children: d("table.selectRowHeader") })
       }
     ] : [],
-    ...o.map((e, r) => ({
-      key: typeof e.key == "string" ? e.key : `header-${r}`,
-      content: e.title
+    ...n.map((t, e) => ({
+      key: typeof t.key == "string" ? t.key : `header-${e}`,
+      content: t.title
     })),
-    ...l ? [
+    ...s ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ s(k, { children: y("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(b, { children: d("table.actionsColumnHeader") })
       }
     ] : []
-  ], b = t.map((e, r) => {
-    const f = [
-      ...i ? [
+  ], C = r.map((t, e) => {
+    const i = [
+      ...c ? [
         {
-          key: `select-${r}`,
-          content: /* @__PURE__ */ s(
-            c.Checkbox,
+          key: `select-${e}`,
+          content: /* @__PURE__ */ l(
+            p.Checkbox,
             {
-              onChange: (a) => {
-                i(e, a);
+              onChange: (o) => {
+                c(t, o);
               },
-              label: y("table.selectRowLabel"),
+              label: d("table.selectRowLabel"),
               shouldVisuallyHideLabel: !0
             }
           )
         }
       ] : [],
-      ...o.map((a, h) => ({
-        key: typeof a.key == "string" ? a.key : `cell-${h}`,
-        content: u(e, a)
+      ...n.map((o, y) => ({
+        key: typeof o.key == "string" ? o.key : `cell-${y}`,
+        content: H(t, o)
       })),
-      ...l ? [
+      ...s ? [
         {
-          key: `menu-${r}`,
-          content: l(e)
+          key: `menu-${e}`,
+          content: s(t)
         }
       ] : []
     ];
     return {
-      key: `row-${r}`,
-      data: f
+      key: `row-${e}`,
+      data: i
     };
-  });
-  return /* @__PURE__ */ s(
-    c.Table,
+  }), $ = (() => {
+    if (!k) return;
+    const t = k(), e = [];
+    return c && e.push({
+      key: "footer-select",
+      content: ""
+    }), n.forEach((i, o) => {
+      const y = typeof i.key == "string" ? i.key : `column-${o}`;
+      e.push({
+        key: `footer-${y}`,
+        content: t[y] || ""
+      });
+    }), s && e.push({
+      key: "footer-actions",
+      content: ""
+    }), e;
+  })();
+  return /* @__PURE__ */ l(
+    p.Table,
     {
-      "aria-label": n,
+      "aria-label": a,
       "data-testid": "data-table",
-      headers: p,
-      rows: b,
-      emptyState: d ? d() : void 0
+      headers: u,
+      rows: C,
+      footer: $,
+      emptyState: f ? f() : void 0,
+      variant: h
     }
   );
 };
 export {
-  T as DataTable
+  F 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 } 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}\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}: 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  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      emptyState={emptyState ? emptyState() : undefined}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","Components","useComponentContext","t","useTranslation","headers","jsx","VisuallyHidden","index","rows","rowIndex","rowData","checked","colIndex"],"mappings":";;;;AAeA,SAASA,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;AAEO,MAAMC,IAAY,CAAK;AAAA,EAC5B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAE/BC,IAAuB;AAAA,IAC3B,GAAIN,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAAS,gBAAAO,EAACC,GAAA,EAAgB,UAAAJ,EAAE,uBAAuB,EAAA,CAAE;AAAA,MAAA;AAAA,IACvD,IAEF,CAAA;AAAA,IACJ,GAAGN,EAAQ,IAAI,CAACL,GAAQgB,OAAW;AAAA,MACjC,KAAK,OAAOhB,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAUgB,CAAK;AAAA,MAClE,SAAShB,EAAO;AAAA,IAAA,EAChB;AAAA,IACF,GAAIM,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAAS,gBAAAQ,EAACC,GAAA,EAAgB,UAAAJ,EAAE,2BAA2B,EAAA,CAAE;AAAA,MAAA;AAAA,IAC3D,IAEF,CAAA;AAAA,EAAC,GAGDM,IAAmBb,EAAK,IAAI,CAACL,GAAMmB,MAAa;AACpD,UAAMC,IAAuB;AAAA,MAC3B,GAAIZ,IACA;AAAA,QACE;AAAA,UACE,KAAK,UAAUW,CAAQ;AAAA,UACvB,SACE,gBAAAJ;AAAA,YAACL,EAAW;AAAA,YAAX;AAAA,cACC,UAAU,CAACW,MAAqB;AAC9B,gBAAAb,EAASR,GAAMqB,CAAO;AAAA,cACxB;AAAA,cACA,OAAOT,EAAE,sBAAsB;AAAA,cAC/B,yBAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,QACzB;AAAA,MAEJ,IAEF,CAAA;AAAA,MACJ,GAAGN,EAAQ,IAAI,CAACL,GAAQqB,OACf;AAAA,QACL,KAAK,OAAOrB,EAAO,OAAQ,WAAWA,EAAO,MAAM,QAAQqB,CAAQ;AAAA,QACnE,SAASvB,EAAeC,GAAMC,CAAM;AAAA,MAAA,EAEvC;AAAA,MACD,GAAIM,IACA;AAAA,QACE;AAAA,UACE,KAAK,QAAQY,CAAQ;AAAA,UACrB,SAASZ,EAASP,CAAI;AAAA,QAAA;AAAA,MACxB,IAEF,CAAA;AAAA,IAAC;AAGP,WAAO;AAAA,MACL,KAAK,OAAOmB,CAAQ;AAAA,MACpB,MAAMC;AAAA,IAAA;AAAA,EAEV,CAAC;AAED,SACE,gBAAAL;AAAA,IAACL,EAAW;AAAA,IAAX;AAAA,MACC,cAAYN;AAAA,MACZ,eAAY;AAAA,MACZ,SAAAU;AAAA,MACA,MAAAI;AAAA,MACA,YAAYT,IAAaA,MAAe;AAAA,IAAA;AAAA,EAAA;AAG9C;"}
+{"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    />\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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"}

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

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

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

@@ -1,35 +1,39 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { useRef as p, useMemo as d } from "react";
-import { PaginationControl as u } from "../PaginationControl/PaginationControl.js";
-import C from "./DataView.module.scss.js";
-import { DataTable as D } from "./DataTable/DataTable.js";
-import { DataCards as b } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as k } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const R = ({
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useRef as b, useMemo as k } from "react";
+import { PaginationControl as C } from "../PaginationControl/PaginationControl.js";
+import D from "./DataView.module.scss.js";
+import { DataTable as w } from "./DataTable/DataTable.js";
+import { DataCards as x } from "./DataCards/DataCards.js";
+import { useContainerBreakpoints as h } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const y = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
-  ...i
+  breakpoints: i,
+  footer: m,
+  variant: p,
+  ...c
 }) => {
-  const e = p(null), o = k({
-    ref: e
-  }), m = o.length > 0, r = !o.includes(a), c = d(() => r ? b : D, [r]);
-  return /* @__PURE__ */ f(
+  const e = b(null), o = h({
+    ref: e,
+    breakpoints: i
+  }), l = o.length > 0, r = !o.includes(a), f = k(() => r ? x : w, [r]);
+  return /* @__PURE__ */ u(
     "div",
     {
       "data-testid": "data-view",
-      className: C.dataViewContainer,
-      ref: (l) => {
-        e.current = l;
+      className: D.dataViewContainer,
+      ref: (d) => {
+        e.current = d;
       },
       children: [
-        m && /* @__PURE__ */ n(c, { ...i }),
-        t && /* @__PURE__ */ n(u, { ...t, isFetching: s })
+        l && /* @__PURE__ */ n(f, { ...c, footer: m, variant: p }),
+        t && /* @__PURE__ */ n(C, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  R as DataView
+  y 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 styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { BreakpointKey } 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?: BreakpointKey\n  isFetching?: boolean\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\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 && <Component {...dataViewProps} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,GAGKI,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASJ,CAAO,GAExCQ,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,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,EAAA,CAAe;AAAA,QACvDH,KAAc,gBAAAiB,EAACC,GAAA,EAAmB,GAAGlB,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 } 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}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\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 && <Component {...dataViewProps} footer={footer} variant={variant} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAwBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaJ;AAAA,EAAA,CACd,GAGKQ,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASP,CAAO,GAExCW,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,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,GAAe,QAAAF,GAAgB,SAAAC,GAAkB;AAAA,QACzFL,KAAc,gBAAAoB,EAACC,GAAA,EAAmB,GAAGrB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

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

@@ -8,6 +8,7 @@ type DataViewColumn<T> = {
     title: string | React.ReactNode;
     render: (item: T) => React.ReactNode;
 };
+type FooterKeys<T> = keyof T | string;
 export type useDataViewProp<T> = {
     columns: DataViewColumn<T>[];
     data: T[];
@@ -15,6 +16,7 @@ export type useDataViewProp<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
 };
 export type useDataViewPropReturn<T> = {
@@ -24,7 +26,8 @@ export type useDataViewPropReturn<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, footer, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

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

@@ -1,22 +1,24 @@
-import { useMemo as u } from "react";
-const d = ({
+import { useMemo as a } from "react";
+const x = ({
   columns: r,
-  data: o,
-  itemMenu: s,
+  data: s,
+  itemMenu: o,
   onSelect: w,
   pagination: V,
-  emptyState: e,
-  isFetching: p
-}) => u(() => ({
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}) => a(() => ({
   pagination: V,
-  data: o,
+  data: s,
   columns: r,
-  itemMenu: s,
+  itemMenu: o,
   onSelect: w,
-  emptyState: e,
-  isFetching: p
-}), [V, o, r, s, w, e, p]);
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}), [V, s, r, o, w, p, u, P]);
 export {
-  d as useDataView
+  x 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\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\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  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","isFetching","useMemo"],"mappings":";AAmCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAH;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,YAAAC;AAAA,IAED,CAACF,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,CAAU,CAAC;"}
+{"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\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\n// Type for footer object keys - allows data keys and custom string keys\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\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  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      footer,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, footer, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","footer","isFetching","useMemo"],"mappings":";AAwCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAJ;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,IAED,CAACH,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,GAAQC,CAAU,CAAC;"}

package/dist/components/Common/Fields/CheckboxField/CheckboxField.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldProps } from '../hooks/useField';
 import { CheckboxProps } from '../../UI/Checkbox/CheckboxTypes';
-export interface CheckboxFieldProps extends Omit<CheckboxProps, 'name' | 'value'>, UseFieldProps<boolean> {
+export interface CheckboxFieldProps extends Omit<CheckboxProps, 'name' | 'value' | 'isInvalid'>, UseFieldProps<boolean> {
 }
 export declare const CheckboxField: React.FC<CheckboxFieldProps>;