@tsed/react-formio 3.0.0-rc.2 → 3.0.0-rc.20

package/dist/molecules/table/filters/SelectFilter.js

@@ -1,33 +1,35 @@
-import { jsx as o, Fragment as u } from "react/jsx-runtime";
-import { registerComponent as a, getComponent as p } from "../../../registries/components.js";
-import { useUniqValues as f } from "../hooks/useUniqValues.js";
-function F({ header: t, options: e }) {
-  const n = p("Select"), i = t.column.getFilterValue(), c = f({ header: t, filterVariant: "text" }), r = e.layout === "choicesjs" ? {
+import { jsx as t, Fragment as a } from "react/jsx-runtime";
+import { registerComponent as o, getComponent as f } from "../../../registries/components.js";
+import { useUniqValues as p } from "../hooks/useUniqValues.js";
+function n({ header: e, options: l }) {
+  const c = f("Select"), i = e.column.getFilterValue(), u = p({ header: e, options: l }), m = l.layout === "choicesjs" ? {
     placeholder: void 0
   } : {
-    placeholder: `Filter by ${t.column.columnDef.header}`
-  }, m = [
+    placeholder: `Filter by ${e.column.columnDef.header}`
+  }, r = [
     {
-      label: `Filter by ${t.column.columnDef.header}`,
+      label: `Filter by ${e.column.columnDef.header}`,
       value: ""
     }
-  ].concat(e.options || c.map((l) => ({ label: l, value: l })));
-  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
-    n,
+  ].concat(u);
+  return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
+    c,
     {
       size: "small",
-      ...e,
-      ...r,
-      options: m,
-      name: `filter_${t.column.id}`,
-      "data-testid": `filter_${t.column.id}`,
-      value: i,
-      onChange: (l, s) => t.column.setFilterValue(s)
+      ...l,
+      ...m,
+      autoComplete: "off",
+      options: r,
+      name: `filter_${e.column.id}`,
+      "data-testid": `filter_${e.column.id}`,
+      value: i ?? "",
+      onChange: (F, s) => e.column.setFilterValue(s)
     }
   ) });
 }
-a("Filter.select", F);
+o("Filter.select", n);
+o("Filter.boolean", n);
 export {
-  F as SelectFilter
+  n as SelectFilter
 };
 //# sourceMappingURL=SelectFilter.js.map

package/dist/molecules/table/filters/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n\n  const opts =\n    options.layout === \"choicesjs\"\n      ? {\n          placeholder: undefined\n        }\n      : {\n          placeholder: `Filter by ${header.column.columnDef.header}`\n        };\n\n  const listOptions = (\n    [\n      {\n        label: `Filter by ${header.column.columnDef.header}`,\n        value: \"\"\n      }\n    ] as SelectOptionProps[]\n  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));\n\n  return (\n    <>\n      <Select<string>\n        size='small'\n        {...(options as any)}\n        {...opts}\n        options={listOptions}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={columnFilterValue as string}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.select\", SelectFilter);\n"],"names":["SelectFilter","header","options","Select","getComponent","columnFilterValue","uniqValues","useUniqValues","opts","listOptions","value","jsx","Fragment","_","registerComponent"],"mappings":";;;AAOO,SAASA,EAAyB,EAAE,QAAAC,GAAQ,SAAAC,KAAmD;AACpG,QAAMC,IAASC,EAAmC,QAAQ,GACpDC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ,GAElEO,IACJN,EAAQ,WAAW,cACf;AAAA,IACE,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,aAAa,aAAaD,EAAO,OAAO,UAAU,MAAM;AAAA,EAAA,GAG1DQ,IACJ;AAAA,IACE;AAAA,MACE,OAAO,aAAaR,EAAO,OAAO,UAAU,MAAM;AAAA,MAClD,OAAO;AAAA,IAAA;AAAA,EACT,EAEF,OAAOC,EAAQ,WAAWI,EAAW,IAAI,CAACI,OAAgB,EAAE,OAAOA,GAAO,OAAAA,EAAA,EAAQ,CAAC;AAErF,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAID;AAAA,MACJ,GAAGM;AAAA,MACJ,SAASC;AAAA,MACT,MAAM,UAAUR,EAAO,OAAO,EAAE;AAAA,MAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,MACvC,OAAOI;AAAA,MACP,UAAU,CAACQ,GAAGH,MAAUT,EAAO,OAAO,eAAeS,CAAK;AAAA,IAAA;AAAA,EAAA,GAE9D;AAEJ;AAEAI,EAAkB,iBAAiBd,CAAY;"}
+{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, options });\n\n  const opts =\n    options.layout === \"choicesjs\"\n      ? {\n          placeholder: undefined\n        }\n      : {\n          placeholder: `Filter by ${header.column.columnDef.header}`\n        };\n\n  const listOptions = (\n    [\n      {\n        label: `Filter by ${header.column.columnDef.header}`,\n        value: \"\"\n      }\n    ] as SelectOptionProps[]\n  ).concat(uniqValues);\n\n  return (\n    <>\n      <Select<string>\n        size='small'\n        {...(options as any)}\n        {...opts}\n        autoComplete='off'\n        options={listOptions}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.select\", SelectFilter);\nregisterComponent(\"Filter.boolean\", SelectFilter);\n"],"names":["SelectFilter","header","options","Select","getComponent","columnFilterValue","uniqValues","useUniqValues","opts","listOptions","jsx","Fragment","_","value","registerComponent"],"mappings":";;;AAOO,SAASA,EAAyB,EAAE,QAAAC,GAAQ,SAAAC,KAAmD;AACpG,QAAMC,IAASC,EAAmC,QAAQ,GACpDC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,SAAAC,GAAS,GAEpDM,IACJN,EAAQ,WAAW,cACf;AAAA,IACE,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,aAAa,aAAaD,EAAO,OAAO,UAAU,MAAM;AAAA,EAAA,GAG1DQ,IACJ;AAAA,IACE;AAAA,MACE,OAAO,aAAaR,EAAO,OAAO,UAAU,MAAM;AAAA,MAClD,OAAO;AAAA,IAAA;AAAA,EACT,EAEF,OAAOK,CAAU;AAEnB,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAID;AAAA,MACJ,GAAGM;AAAA,MACJ,cAAa;AAAA,MACb,SAASC;AAAA,MACT,MAAM,UAAUR,EAAO,OAAO,EAAE;AAAA,MAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,MACvC,OAAQI,KAAqB;AAAA,MAC7B,UAAU,CAACO,GAAGC,MAAUZ,EAAO,OAAO,eAAeY,CAAK;AAAA,IAAA;AAAA,EAAA,GAE9D;AAEJ;AAEAC,EAAkB,iBAAiBd,CAAY;AAC/Cc,EAAkB,kBAAkBd,CAAY;"}

package/dist/molecules/table/filters/TextFieldFilter.js

@@ -1,27 +1,27 @@
-import { jsxs as a, Fragment as u, jsx as i } from "react/jsx-runtime";
-import { registerComponent as c, getComponent as d } from "../../../registries/components.js";
+import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { registerComponent as m, getComponent as d } from "../../../registries/components.js";
 import { useUniqValues as p } from "../hooks/useUniqValues.js";
-function f({ header: t, options: e }) {
-  const o = d("InputText"), m = t.column.getFilterValue(), r = p({ header: t, filterVariant: "text" }), n = `data_list_${t.column.id}`;
-  return /* @__PURE__ */ a(u, { children: [
-    !e.disableDatalist && /* @__PURE__ */ i("datalist", { id: n, children: r.map((l) => /* @__PURE__ */ i("option", { value: l }, l)) }),
-    /* @__PURE__ */ i(
+function F({ header: l, options: n }) {
+  const o = d("InputText"), u = l.column.getFilterValue(), a = p({ header: l }), i = `data_list_${l.column.id}`;
+  return /* @__PURE__ */ r(c, { children: [
+    !n.disableDatalist && /* @__PURE__ */ e("datalist", { id: i, children: a.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label || t.value }, t.value)) }),
+    /* @__PURE__ */ e(
       o,
       {
         size: "small",
-        placeholder: `Filter by ${t.column.columnDef.header}`,
-        ...e,
-        name: `filter_${t.column.id}`,
-        "data-testid": `filter_${t.column.id}`,
-        value: m ?? "",
-        list: n,
-        onChange: (l, s) => t.column.setFilterValue(s)
+        placeholder: `Filter by ${l.column.columnDef.header}`,
+        ...n,
+        name: `filter_${l.column.id}`,
+        "data-testid": `filter_${l.column.id}`,
+        value: u ?? "",
+        list: i,
+        onChange: (t, s) => l.column.setFilterValue(s)
       }
     )
   ] });
 }
-c("Filter.text", f);
+m("Filter.text", F);
 export {
-  f as TextFieldFilter
+  F as TextFieldFilter
 };
 //# sourceMappingURL=TextFieldFilter.js.map

package/dist/molecules/table/filters/TextFieldFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((value: any) => (\n            <option value={value} key={value} />\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","value","_","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ,GAClEO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,UAAA,EAAO,OAAAC,KAAmBA,CAAO,CACnC,GACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGD,MAAUX,EAAO,OAAO,eAAeW,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAE,EAAkB,eAAed,CAAe;"}
+{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((item) => (\n            <option value={item.value} key={item.value}>\n              {item.label || item.value}\n            </option>\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","item","_","value","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,GAC3CO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,YAAO,OAAOC,EAAK,OACjB,UAAAA,EAAK,SAASA,EAAK,MAAA,GADUA,EAAK,KAErC,CACD,EAAA,CACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGC,MAAUb,EAAO,OAAO,eAAea,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAC,EAAkB,eAAef,CAAe;"}

package/dist/molecules/table/hooks/useTable.d.ts

@@ -1,10 +1,7 @@
 import { TableOptions, TableState } from '@tanstack/react-table';
-import { FormOptions, JSON, Operation } from '../../../interfaces';
-export interface UseTableProps<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+import { FormOptions, Operation } from '../../../interfaces';
+import { JSONRecord } from '../../../interfaces/JSONRecord.js';
+export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick" | "getCoreRowModel"> {
     operations: Operation<Data>[];
     metadata?: Record<string, unknown>;
     i18n?: FormOptions["i18n"];
@@ -13,11 +10,7 @@ export interface UseTableProps<Data extends {
     onChange?: (query: TableState) => void;
     pageSizes?: number[];
 }
-export declare function useTable<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}>(props: UseTableProps<Data>): {
+export declare function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>): {
     i18n: (key: string, defaultValue?: string) => string;
     tableInstance: import('@tanstack/table-core').Table<Data>;
 };

package/dist/molecules/table/hooks/useTable.js

@@ -1,35 +1,35 @@
-import { jsx as R } from "react/jsx-runtime";
-import { useReactTable as f, getFacetedUniqueValues as w, getFacetedRowModel as M, getSortedRowModel as C, getFilteredRowModel as S, getPaginationRowModel as b, getCoreRowModel as h } from "@tanstack/react-table";
+import { jsx as w } from "react/jsx-runtime";
+import { useReactTable as M, getFacetedUniqueValues as s, getFacetedRowModel as f, getSortedRowModel as C, getFilteredRowModel as S, getPaginationRowModel as b, getCoreRowModel as h } from "@tanstack/react-table";
 import { useEffect as v } from "react";
 import { useI18n as O } from "../../../hooks/useI18n.js";
-import { getComponent as I } from "../../../registries/components.js";
-function z(e) {
-  const n = I("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
+import { getComponent as V } from "../../../registries/components.js";
+function x(e) {
+  const n = V("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
     {
       id: "operations",
       header: t("Operations"),
-      cell: (F) => /* @__PURE__ */ R(n, { info: F, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
+      cell: (R) => /* @__PURE__ */ w(n, { info: R, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
     }
-  ] : [], o = f({
+  ] : [], o = M({
     ...e,
     columns: [...e.columns, ...i],
     getCoreRowModel: h(),
     getPaginationRowModel: b(),
-    getFilteredRowModel: e.manualFiltering ? void 0 : S(),
-    getSortedRowModel: e.manualSorting ? void 0 : C(),
-    getFacetedRowModel: e.manualFaceted ? void 0 : M(),
+    getFilteredRowModel: e.manualFiltering ? void 0 : e.getFilteredRowModel || S(),
+    getSortedRowModel: e.manualSorting ? void 0 : e.getSortedRowModel || C(),
+    getFacetedRowModel: e.manualFaceted ? void 0 : e.getFacetedRowModel || f(),
     // client-side faceting
-    getFacetedUniqueValues: e.manualFaceted ? void 0 : w()
+    getFacetedUniqueValues: e.manualFaceted ? void 0 : e.getFacetedUniqueValues || s()
     // generate unique values for select filter/autocomplete
-  }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: r, columnVisibility: u, globalFilter: s } = o.getState();
+  }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: u, columnVisibility: r, globalFilter: F } = o.getState();
   return v(() => {
     e.onChange && e.onChange(o.getState());
-  }, [a, l, d, g, c, m, r, u, s]), {
+  }, [a, l, d, g, c, m, u, r, F]), {
     i18n: t,
     tableInstance: o
   };
 }
 export {
-  z as useTable
+  x as useTable
 };
 //# sourceMappingURL=useTable.js.map

package/dist/molecules/table/hooks/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { type FormOptions, type JSON, Operation } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>\n  extends Omit<TableOptions<Data>, \"getCoreRowModel\" | \"onClick\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (data: Data, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const { t } = useI18n(props.i18n);\n\n  // const [pagination, setPagination] = useState({\n  //   pageIndex: 0, //initial page index\n  //   pageSize: 10 //default page size\n  // });\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: t(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n: t,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","useI18n","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;;AA8BO,SAASA,EAAyEC,GAA4B;AACnH,QAAMC,IAAaC,EAAiD,gBAAgB,GAC9E,EAAE,EAAA,IAAMC,EAAQH,EAAM,IAAI,GAO1BI,IAAaJ,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ,EAAE,YAAY;AAAA,MACtB,MAAM,CAACK,MACL,gBAAAC,EAACL,GAAA,EAAW,MAAAI,GAAY,YAAYL,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAErH,IAEF,CAAA,GAEEO,IAAgBC,EAAc;AAAA,IAClC,GAAGR;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGI,CAAU;AAAA,IACzC,iBAAiBK,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,qBAAsBV,EAAM,kBAA0C,SAAxBW;IAC9C,mBAAoBX,EAAM,gBAAsC,SAAtBY;IAC1C,oBAAqBZ,EAAM,gBAAuC,SAAvBa;;IAC3C,wBAAyBb,EAAM,gBAA2C,SAA3Bc;;EAA2B,CAC3E,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAA;AAEhB,SAAAiB,EAAU,MAAM;AACd,IAAIxB,EAAM,YACRA,EAAM,SAASO,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAM;AAAA,IACN,eAAAhB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { type FormOptions, Operation } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, \"onClick\" | \"getCoreRowModel\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (data: Data, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const { t } = useI18n(props.i18n);\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: t(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? props.getFilteredRowModel || getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? props.getSortedRowModel || getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? props.getFacetedRowModel || getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? props.getFacetedUniqueValues || getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n: t,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","useI18n","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;;AA8BO,SAASA,EAA2CC,GAA4B;AACrF,QAAMC,IAAaC,EAAiD,gBAAgB,GAC9E,EAAE,EAAA,IAAMC,EAAQH,EAAM,IAAI,GAE1BI,IAAaJ,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ,EAAE,YAAY;AAAA,MACtB,MAAM,CAACK,MACL,gBAAAC,EAACL,GAAA,EAAW,MAAAI,GAAY,YAAYL,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAErH,IAEF,CAAA,GAEEO,IAAgBC,EAAc;AAAA,IAClC,GAAGR;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGI,CAAU;AAAA,IACzC,iBAAiBK,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,qBAAsBV,EAAM,kBAAuE,SAArDA,EAAM,uBAAuBW;IAC3E,mBAAoBX,EAAM,gBAAiE,SAAjDA,EAAM,qBAAqBY;IACrE,oBAAqBZ,EAAM,gBAAmE,SAAnDA,EAAM,sBAAsBa;;IACvE,wBAAyBb,EAAM,gBAA2E,SAA3DA,EAAM,0BAA0Bc;;EAA2B,CAC3G,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAA;AAEhB,SAAAiB,EAAU,MAAM;AACd,IAAIxB,EAAM,YACRA,EAAM,SAASO,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAM;AAAA,IACN,eAAAhB;AAAA,EAAA;AAEJ;"}

package/dist/molecules/table/hooks/useUniqValues.d.ts

@@ -1,5 +1,8 @@
-import { Header } from '@tanstack/react-table';
-export declare function useUniqValues<Data = any>({ header, filterVariant }: {
-    header: Header<Data, unknown>;
-    filterVariant: string;
-}): any[];
+import { SelectOptionProps } from '../../../molecules/forms/select/Select.interface';
+import { FilterProps } from '../components/DefaultFilter';
+import { FilterSelectOptions } from '../filters/Filters';
+type UseUniqValuesProps<Data = any> = Omit<FilterProps<Data, FilterSelectOptions>, "options"> & {
+    options?: FilterSelectOptions;
+};
+export declare function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[];
+export {};

package/dist/molecules/table/hooks/useUniqValues.js

@@ -1,11 +1,27 @@
-import { useMemo as u } from "react";
-function r({ header: e, filterVariant: o }) {
-  return u(
-    () => o === "range" ? [] : Array.from(e.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5e3),
-    [e.column, o]
-  );
+import { useMemo as o } from "react";
+function m({ header: l, options: t }) {
+  return o(() => {
+    const n = t?.options;
+    if (n)
+      return typeof n == "function" ? n({ header: l, options: t }) : n;
+    switch (l.column.columnDef.meta?.filter?.variant) {
+      case "boolean":
+        return [
+          { label: l.column.columnDef.meta?.labels?.yes || "Yes", value: "true" },
+          {
+            label: l.column.columnDef.meta?.labels?.no || l.column.columnDef.meta?.labels?.No || "No",
+            value: "false"
+          }
+        ];
+      default:
+        return Array.from(l.column.getFacetedUniqueValues().keys()).flat().filter((e) => e != null).map((e) => String(e)).sort().slice(0, 5e3).map((e) => ({
+          label: e,
+          value: e
+        }));
+    }
+  }, [l, t]);
 }
 export {
-  r as useUniqValues
+  m as useUniqValues
 };
 //# sourceMappingURL=useUniqValues.js.map

package/dist/molecules/table/hooks/useUniqValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import type { Header } from \"@tanstack/react-table\";\nimport { useMemo } from \"react\";\n\nexport function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {\n  return useMemo(\n    () => (filterVariant === \"range\" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),\n\n    [header.column, filterVariant]\n  );\n}\n"],"names":["useUniqValues","header","filterVariant","useMemo"],"mappings":";AAGO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,eAAAC,KAA2E;AAC7H,SAAOC;AAAA,IACL,MAAOD,MAAkB,UAAU,CAAA,IAAK,MAAM,KAAKD,EAAO,OAAO,uBAAA,EAAyB,KAAA,CAAM,EAAE,KAAA,EAAO,OAAO,MAAM,GAAG,GAAI;AAAA,IAE7H,CAACA,EAAO,QAAQC,CAAa;AAAA,EAAA;AAEjC;"}
+{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { SelectOptionProps } from \"../../../molecules/forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterSelectOptions } from \"../filters/Filters\";\n\ntype UseUniqValuesProps<Data = any> = Omit<FilterProps<Data, FilterSelectOptions>, \"options\"> & {\n  options?: FilterSelectOptions;\n};\n\nexport function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[] {\n  return useMemo(() => {\n    const providedOptions = options?.options;\n\n    if (providedOptions) {\n      if (typeof providedOptions === \"function\") {\n        return providedOptions({ header, options: options as FilterSelectOptions });\n      }\n\n      return providedOptions;\n    }\n\n    switch (header.column.columnDef.meta?.filter?.variant) {\n      case \"boolean\":\n        return [\n          { label: header.column.columnDef.meta?.labels?.[\"yes\"] || \"Yes\", value: \"true\" },\n          {\n            label: header.column.columnDef.meta?.labels?.[\"no\"] || header.column.columnDef.meta?.labels?.[\"No\"] || \"No\",\n            value: \"false\"\n          }\n        ];\n\n      default:\n        return Array.from(header.column.getFacetedUniqueValues().keys())\n          .flat()\n          .filter((value) => value !== undefined && value !== null)\n          .map((value) => String(value))\n          .sort()\n          .slice(0, 5000)\n          .map((value) => ({\n            label: value,\n            value\n          }));\n    }\n  }, [header, options]);\n}\n"],"names":["useUniqValues","header","options","useMemo","providedOptions","value"],"mappings":";AAUO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,SAAAC,KAA0D;AAC5G,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAAkBF,GAAS;AAEjC,QAAIE;AACF,aAAI,OAAOA,KAAoB,aACtBA,EAAgB,EAAE,QAAAH,GAAQ,SAAAC,GAAyC,IAGrEE;AAGT,YAAQH,EAAO,OAAO,UAAU,MAAM,QAAQ,SAAA;AAAA,MAC5C,KAAK;AACH,eAAO;AAAA,UACL,EAAE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,OAAU,OAAO,OAAO,OAAA;AAAA,UACxE;AAAA,YACE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,MAASA,EAAO,OAAO,UAAU,MAAM,QAAS,MAAS;AAAA,YACvG,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MAGJ;AACE,eAAO,MAAM,KAAKA,EAAO,OAAO,yBAAyB,KAAA,CAAM,EAC5D,OACA,OAAO,CAACI,MAAiCA,KAAU,IAAI,EACvD,IAAI,CAACA,MAAU,OAAOA,CAAK,CAAC,EAC5B,KAAA,EACA,MAAM,GAAG,GAAI,EACb,IAAI,CAACA,OAAW;AAAA,UACf,OAAOA;AAAA,UACP,OAAAA;AAAA,QAAA,EACA;AAAA,IAAA;AAAA,EAEV,GAAG,CAACJ,GAAQC,CAAO,CAAC;AACtB;"}

package/dist/molecules/table/interfaces/extends.d.ts

@@ -3,6 +3,9 @@ import { TdHTMLAttributes } from 'react';
 import { FilterOptions } from '../filters/Filters';
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
+        type?: "string" | "number" | "boolean" | "date" | string;
+        format?: string;
+        labels?: Record<string, string>;
         filter?: FilterOptions;
         sort?: string;
         cellProps?: TdHTMLAttributes<HTMLTableCellElement>;

package/dist/molecules/table/utils/mapFormToColumns.d.ts

@@ -1,3 +1,7 @@
 import { ColumnDef, ColumnDefResolved } from '@tanstack/react-table';
 import { FormType } from '../../../interfaces';
-export declare function mapFormToColumns<Data = any>(form: FormType, columns?: ColumnDefResolved<Data, any>[]): ColumnDef<Data, any>[];
+export declare function mapFormToColumns<Data = any>({ form, columns, prefix }: {
+    form: FormType;
+    columns?: ColumnDefResolved<Data, any>[];
+    prefix?: string;
+}): ColumnDef<Data, any>[];

package/dist/molecules/table/utils/mapFormToColumns.js

@@ -1,39 +1,66 @@
-import { jsx as s } from "react/jsx-runtime";
-import { r as f, c as d } from "../../../chunks/index2.js";
-import { createColumnHelper as g } from "@tanstack/react-table";
-import { c as C } from "../../../chunks/cloneDeep.js";
-import { g as x } from "../../../chunks/_commonjsHelpers.js";
+import { createColumnHelper as f } from "@tanstack/react-table";
+import { c as y } from "../../../chunks/cloneDeep.js";
+import { g as C } from "../../../chunks/_commonjsHelpers.js";
+import { r as g } from "../../../chunks/get.js";
 import { getComponent as b } from "../../../registries/components.js";
-var y = f();
-const k = /* @__PURE__ */ x(y), v = {
+var x = g();
+const h = /* @__PURE__ */ C(x), K = {
   number: "range",
   currency: "range",
   checkbox: "boolean"
+}, k = {
+  date: "date",
+  datetime: "date",
+  number: "number",
+  currency: "currency",
+  checkbox: "boolean"
 };
-function H(c, p = []) {
-  const u = g(), r = C(p), l = b("Cell");
-  return c.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
-    const t = e, n = d.Components.create(t, {}, null), o = r.findIndex(({ accessorKey: m }) => m === `data.${t.key}`);
-    let a = r[o];
-    return a && r.splice(o, 1), u.accessor(`data.${t.key}`, {
+function m(r) {
+  if ("id" in r && typeof r.id == "string")
+    return r.id;
+  if ("accessorKey" in r && typeof r.accessorKey == "string")
+    return r.accessorKey;
+}
+function S({
+  form: r,
+  columns: p = [],
+  prefix: l = "data."
+}) {
+  const d = f(), n = y(p);
+  return [...r.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
+    const t = e, o = `${l}${t.key}`, a = /* @__PURE__ */ new Set([t.key, o]), i = n.findIndex((u) => {
+      const c = m(u);
+      return c ? a.has(c) : !1;
+    });
+    let s = n[i];
+    return s && n.splice(i, 1), d.accessor(o, {
       header: (t.label || t.title || t.key)?.replace(/:/, ""),
-      cell: (m) => /* @__PURE__ */ s(l, { value: m.getValue(), render: (i) => n.asString(i) }),
       meta: {
-        filter: { variant: v[t.type] || "text" },
-        ...a?.meta || {}
+        type: k[t.type] || t.type,
+        filter: {
+          ...s?.meta?.filter,
+          variant: K[t.type] || "text"
+        },
+        ...s?.meta || {}
       },
-      ...a || {}
+      ...s || {}
     });
-  }).concat(r).map((e, t) => ({
-    ...e,
-    meta: {
-      ...e.meta || {},
-      order: k(e, "meta.order", t * 10)
-    },
-    cell: e.cell || ((n) => /* @__PURE__ */ s(l, { value: n.getValue(), render: (o) => o }))
-  })).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
+  }), ...n].reduce((e, t) => {
+    const o = m(t);
+    return o && e.some((a) => m(a) === o) || e.push(t), e;
+  }, []).map((e, t) => {
+    const o = b([`Cell.${e.id}`, `Cell.${e.meta?.type}`, "Cell"]);
+    return {
+      ...e,
+      meta: {
+        ...e?.meta,
+        order: h(e, "meta.order", t * 10)
+      },
+      cell: e.cell || o
+    };
+  }).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
 }
 export {
-  H as mapFormToColumns
+  S as mapFormToColumns
 };
 //# sourceMappingURL=mapFormToColumns.js.map

package/dist/molecules/table/utils/mapFormToColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Components } from \"@formio/js\";\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_TYPES: Record<string, FilterVariants> = {\n  number: \"range\",\n  currency: \"range\",\n  checkbox: \"boolean\"\n};\n\nexport function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {\n  const columnHelper = createColumnHelper<Data>();\n  const columnsToKeep = cloneDeep(columns);\n\n  const Cell = getComponent<typeof DefaultCell>(\"Cell\");\n\n  const columnsFromComponents = form.components\n    .flatMap((component) => {\n      if (component.type === \"tabs\") {\n        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n      }\n\n      return [component];\n    })\n    .filter((component) => component?.tableView)\n    .map((c) => {\n      const component = c as ComponentType;\n      const cmp: any = Components.create(component, {}, null);\n\n      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {\n        return accessorKey === `data.${component.key}`;\n      });\n\n      let column = columnsToKeep[columnIndex];\n\n      if (column) {\n        columnsToKeep.splice(columnIndex, 1);\n      }\n\n      return columnHelper.accessor(`data.${component.key}` as any, {\n        header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n        cell: (info) => {\n          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;\n        },\n        meta: {\n          filter: { variant: MAP_TYPES[component.type!] || \"text\" },\n          ...(column?.meta || {})\n        },\n        ...(column || {})\n      });\n    });\n\n  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({\n    ...column,\n    meta: {\n      ...(column.meta || {}),\n      order: get(column, \"meta.order\", index * 10)\n    },\n    cell:\n      column.cell ||\n      ((info) => {\n        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;\n      })\n  }));\n\n  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_TYPES","mapFormToColumns","form","columns","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","Cell","getComponent","component","subComponent","c","cmp","Components","columnIndex","accessorKey","column","info","jsx","value","index","get","a","b"],"mappings":";;;;;;;gCAYMA,IAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAASC,EAA6BC,GAAgBC,IAA0C,IAA4B;AACjI,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUJ,CAAO,GAEjCK,IAAOC,EAAiC,MAAM;AAmDpD,SAjD8BP,EAAK,WAChC,QAAQ,CAACQ,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GACZC,IAAWC,EAAAA,WAAW,OAAOJ,GAAW,CAAA,GAAI,IAAI,GAEhDK,IAAcT,EAAc,UAAU,CAAC,EAAE,aAAAU,QACtCA,MAAgB,QAAQN,EAAU,GAAG,EAC7C;AAED,QAAIO,IAASX,EAAcS,CAAW;AAEtC,WAAIE,KACFX,EAAc,OAAOS,GAAa,CAAC,GAG9BX,EAAa,SAAS,QAAQM,EAAU,GAAG,IAAW;AAAA,MAC3D,SAASA,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAM,CAACQ,MACE,gBAAAC,EAACX,GAAA,EAAK,OAAOU,EAAK,SAAA,GAAoB,QAAQ,CAACE,MAAgBP,EAAI,SAASO,CAAK,EAAA,CAAG;AAAA,MAE7F,MAAM;AAAA,QACJ,QAAQ,EAAE,SAASpB,EAAUU,EAAU,IAAK,KAAK,OAAA;AAAA,QACjD,GAAIO,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,EAEyC,OAAOX,CAAsB,EAAE,IAAI,CAACW,GAAQI,OAAW;AAAA,IACjG,GAAGJ;AAAA,IACH,MAAM;AAAA,MACJ,GAAIA,EAAO,QAAQ,CAAA;AAAA,MACnB,OAAOK,EAAIL,GAAQ,cAAcI,IAAQ,EAAE;AAAA,IAAA;AAAA,IAE7C,MACEJ,EAAO,SACN,CAACC,MACO,gBAAAC,EAACX,KAAK,OAAOU,EAAK,YAAoB,QAAQ,CAACE,MAAgBA,GAAO;AAAA,EAC/E,EACF,EAEmB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}
+{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_FILTER_TYPES: Record<string, FilterVariants> = {\n  number: \"range\",\n  currency: \"range\",\n  checkbox: \"boolean\"\n} as const;\n\nconst MAP_TYPES = {\n  date: \"date\",\n  datetime: \"date\",\n  number: \"number\",\n  currency: \"currency\",\n  checkbox: \"boolean\"\n} as const;\n\nfunction getColumnIdentity<Data>(column: ColumnDef<Data, any> | ColumnDefResolved<Data, any>) {\n  if (\"id\" in column && typeof column.id === \"string\") {\n    return column.id;\n  }\n\n  if (\"accessorKey\" in column && typeof column.accessorKey === \"string\") {\n    return column.accessorKey;\n  }\n\n  return undefined;\n}\n\nexport function mapFormToColumns<Data = any>({\n  form,\n  columns = [],\n  prefix = \"data.\"\n}: {\n  form: FormType;\n  columns?: ColumnDefResolved<Data, any>[];\n  prefix?: string;\n}): ColumnDef<Data, any>[] {\n  const columnHelper = createColumnHelper<Data>();\n  const columnsToKeep = cloneDeep(columns);\n\n  const columnsFromComponents = form.components\n    .flatMap((component) => {\n      if (component.type === \"tabs\") {\n        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n      }\n\n      return [component];\n    })\n    .filter((component) => component?.tableView)\n    .map((c) => {\n      const component = c as ComponentType;\n      const componentColumnKey = `${prefix}${component.key}`;\n      const matchingKeys = new Set([component.key, componentColumnKey]);\n\n      const columnIndex = columnsToKeep.findIndex((column) => {\n        const identity = getColumnIdentity(column);\n\n        return identity ? matchingKeys.has(identity) : false;\n      });\n\n      let column = columnsToKeep[columnIndex];\n\n      if (column) {\n        columnsToKeep.splice(columnIndex, 1);\n      }\n\n      return columnHelper.accessor(componentColumnKey as any, {\n        header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n        meta: {\n          type: (MAP_TYPES[component.type as keyof typeof MAP_TYPES] || component.type) as any,\n          filter: {\n            ...column?.meta?.filter,\n            variant: MAP_FILTER_TYPES[component.type as keyof typeof MAP_FILTER_TYPES] || \"text\"\n          },\n          ...(column?.meta || {})\n        },\n        ...(column || {})\n      });\n    });\n\n  const dedupedColumns = [...columnsFromComponents, ...(columnsToKeep as any[])].reduce<ColumnDef<Data, any>[]>((acc, column) => {\n    const identity = getColumnIdentity(column);\n\n    if (identity && acc.some((existingColumn) => getColumnIdentity(existingColumn) === identity)) {\n      return acc;\n    }\n\n    acc.push(column);\n    return acc;\n  }, []);\n\n  const mergedColumns = dedupedColumns.map((column, index) => {\n    const Cell = getComponent<typeof DefaultCell>([`Cell.${column.id}`, `Cell.${column.meta?.type}`, \"Cell\"]);\n\n    return {\n      ...column,\n      meta: {\n        ...column?.meta,\n        order: get(column, \"meta.order\", index * 10)\n      },\n      cell: column.cell || Cell\n    };\n  });\n\n  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_FILTER_TYPES","MAP_TYPES","getColumnIdentity","column","mapFormToColumns","form","columns","prefix","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","component","subComponent","c","componentColumnKey","matchingKeys","columnIndex","identity","acc","existingColumn","index","Cell","getComponent","get","a","b"],"mappings":";;;;;;gCAWMA,IAAmD;AAAA,EACvD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ,GAEMC,IAAY;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,SAASC,EAAwBC,GAA6D;AAC5F,MAAI,QAAQA,KAAU,OAAOA,EAAO,MAAO;AACzC,WAAOA,EAAO;AAGhB,MAAI,iBAAiBA,KAAU,OAAOA,EAAO,eAAgB;AAC3D,WAAOA,EAAO;AAIlB;AAEO,SAASC,EAA6B;AAAA,EAC3C,MAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,QAAAC,IAAS;AACX,GAI2B;AACzB,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUL,CAAO;AAkEvC,SAxBuB,CAAC,GAxCMD,EAAK,WAChC,QAAQ,CAACO,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GACZC,IAAqB,GAAGR,CAAM,GAAGK,EAAU,GAAG,IAC9CI,IAAe,oBAAI,IAAI,CAACJ,EAAU,KAAKG,CAAkB,CAAC,GAE1DE,IAAcP,EAAc,UAAU,CAACP,MAAW;AACtD,YAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,aAAOe,IAAWF,EAAa,IAAIE,CAAQ,IAAI;AAAA,IACjD,CAAC;AAED,QAAIf,IAASO,EAAcO,CAAW;AAEtC,WAAId,KACFO,EAAc,OAAOO,GAAa,CAAC,GAG9BT,EAAa,SAASO,GAA2B;AAAA,MACtD,SAASH,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAM;AAAA,QACJ,MAAOX,EAAUW,EAAU,IAA8B,KAAKA,EAAU;AAAA,QACxE,QAAQ;AAAA,UACN,GAAGT,GAAQ,MAAM;AAAA,UACjB,SAASH,EAAiBY,EAAU,IAAqC,KAAK;AAAA,QAAA;AAAA,QAEhF,GAAIT,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,GAE+C,GAAIO,CAAuB,EAAE,OAA+B,CAACS,GAAKhB,MAAW;AAC7H,UAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,WAAIe,KAAYC,EAAI,KAAK,CAACC,MAAmBlB,EAAkBkB,CAAc,MAAMF,CAAQ,KAI3FC,EAAI,KAAKhB,CAAM,GACRgB;AAAA,EACT,GAAG,CAAA,CAAE,EAEgC,IAAI,CAAChB,GAAQkB,MAAU;AAC1D,UAAMC,IAAOC,EAAiC,CAAC,QAAQpB,EAAO,EAAE,IAAI,QAAQA,EAAO,MAAM,IAAI,IAAI,MAAM,CAAC;AAExG,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,MAAM;AAAA,QACJ,GAAGA,GAAQ;AAAA,QACX,OAAOqB,EAAIrB,GAAQ,cAAckB,IAAQ,EAAE;AAAA,MAAA;AAAA,MAE7C,MAAMlB,EAAO,QAAQmB;AAAA,IAAA;AAAA,EAEzB,CAAC,EAEoB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}

package/dist/organisms/form/Form.d.ts

@@ -1,12 +1,8 @@
-import { JSON } from '../../interfaces';
+import { JSONRecord } from '../../interfaces/JSONRecord.js';
 import { UseFormProps } from './useForm';
 declare class CSSProperties {
 }
-export interface FormProps<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}> extends UseFormProps<Data> {
+export interface FormProps<Data extends object = JSONRecord> extends UseFormProps<Data> {
     ["data-testid"]?: string;
     /**
      *
@@ -14,9 +10,5 @@ export interface FormProps<Data extends {
     className?: string;
     style?: CSSProperties;
 }
-export declare function Form<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}>({ style, className, "data-testid": dataTestId, ...props }: Partial<FormProps<Data>>): import("react/jsx-runtime").JSX.Element;
+export declare function Form<Data extends object = JSONRecord>({ style, className, "data-testid": dataTestId, ...props }: Partial<FormProps<Data>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/organisms/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/organisms/form/Form.tsx"],"sourcesContent":["import { JSON } from \"../../interfaces\";\nimport { useForm, UseFormProps } from \"./useForm\";\n\nclass CSSProperties {}\n\nexport interface FormProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseFormProps<Data> {\n  [\"data-testid\"]?: string;\n  /**\n   *\n   */\n  className?: string;\n\n  style?: CSSProperties;\n}\n\nexport function Form<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  style,\n  className,\n  \"data-testid\": dataTestId = \"formio-container\",\n  ...props\n}: Partial<FormProps<Data>>) {\n  const { element } = useForm<Data>(props);\n\n  return (\n    <div>\n      <div data-testid={dataTestId} style={style} className={className} ref={element} />\n    </div>\n  );\n}\n"],"names":["Form","style","className","dataTestId","props","element","useForm","jsx"],"mappings":";;AAeO,SAASA,EAAqE;AAAA,EACnF,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GAA6B;AAC3B,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAcF,CAAK;AAEvC,SACE,gBAAAG,EAAC,OAAA,EACC,UAAA,gBAAAA,EAAC,OAAA,EAAI,eAAaJ,GAAY,OAAAF,GAAc,WAAAC,GAAsB,KAAKG,EAAA,CAAS,EAAA,CAClF;AAEJ;"}
+{"version":3,"file":"Form.js","sources":["../../../src/organisms/form/Form.tsx"],"sourcesContent":["import type { JSONRecord } from \"../../interfaces/JSONRecord.js\";\nimport { useForm, UseFormProps } from \"./useForm\";\n\nclass CSSProperties {}\n\nexport interface FormProps<Data extends object = JSONRecord> extends UseFormProps<Data> {\n  [\"data-testid\"]?: string;\n  /**\n   *\n   */\n  className?: string;\n\n  style?: CSSProperties;\n}\n\nexport function Form<Data extends object = JSONRecord>({\n  style,\n  className,\n  \"data-testid\": dataTestId = \"formio-container\",\n  ...props\n}: Partial<FormProps<Data>>) {\n  const { element } = useForm<Data>(props);\n\n  return (\n    <div>\n      <div data-testid={dataTestId} style={style} className={className} ref={element} />\n    </div>\n  );\n}\n"],"names":["Form","style","className","dataTestId","props","element","useForm","jsx"],"mappings":";;AAeO,SAASA,EAAuC;AAAA,EACrD,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GAA6B;AAC3B,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAcF,CAAK;AAEvC,SACE,gBAAAG,EAAC,OAAA,EACC,UAAA,gBAAAA,EAAC,OAAA,EAAI,eAAaJ,GAAY,OAAAF,GAAc,WAAAC,GAAsB,KAAKG,EAAA,CAAS,EAAA,CAClF;AAEJ;"}

package/dist/organisms/form/actions/FormAction.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import { g as f } from "../../../chunks/_commonjsHelpers.js";
-import { a as c } from "../../../chunks/index2.js";
+import { r as c } from "../../../chunks/index2.js";
 import { Form as p } from "../Form.js";
 var d = c();
 const n = /* @__PURE__ */ f(d);
@@ -18,13 +18,13 @@ function b({ action: t, ...s }) {
   }), s;
 }
 function v({ actionInfo: t, children: s, onSubmit: r, options: e, ...i }) {
-  const { form: u, submission: a } = (() => {
-    const o = x(i.submission || {}, t.defaults);
-    return { form: b(t.settingsForm), submission: { data: o } };
+  const { form: u, submission: o } = (() => {
+    const a = x(i.submission || {}, t.defaults);
+    return { form: b(t.settingsForm), submission: { data: a } };
   })();
   return /* @__PURE__ */ m("div", { children: [
     s,
-    /* @__PURE__ */ l(p, { form: u, submission: a, onSubmit: r, options: e }),
+    /* @__PURE__ */ l(p, { form: u, submission: o, onSubmit: r, options: e }),
     s
   ] });
 }

package/dist/organisms/form/types.d.ts

@@ -1,12 +1,4 @@
-import { ComponentType, JSON, SubmissionType } from '../../interfaces';
-export interface FormPageChangeProps<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}> {
-    page: number;
-    submission: SubmissionType<Data>;
-}
+import { ComponentType } from '../../interfaces';
 export type FormCustomEvent = {
     type: string;
     event: string;

package/dist/organisms/form/useForm.d.ts

@@ -1,6 +1,7 @@
 import { Form } from '@formio/js';
 import { MutableRefObject } from 'react';
-import { ChangedSubmission, ComponentType, FormOptions, FormType, JSON, SubmissionType } from '../../interfaces';
+import { ChangedSubmission, ComponentType, FormOptions, FormType, SubmissionType } from '../../interfaces';
+import { JSON, JSONRecord } from '../../interfaces/JSONRecord.js';
 import { FormCustomEvent } from './types';
 type Webform = any;
 type EventError = string | Error | Error[] | {
@@ -8,11 +9,7 @@ type EventError = string | Error | Error[] | {
 } | {
     message: string;
 }[];
-export interface UseFormProps<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}> {
+export interface UseFormProps<Data extends object = JSONRecord> {
     src?: string;
     url?: string;
     form?: FormType;
@@ -55,11 +52,7 @@ export interface UseFormProps<Data extends {
         [event: string]: (...args: any[]) => void;
     };
 }
-export declare function useForm<Data extends {
-    [key: string]: JSON;
-} = {
-    [key: string]: JSON;
-}>(props: UseFormProps<Data>): {
+export declare function useForm<Data extends object = JSONRecord>(props: UseFormProps<Data>): {
     element: MutableRefObject<HTMLDivElement | null>;
     instance: any;
 };