@tsed/react-formio 3.0.0-rc.15 → 3.0.0-rc.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/molecules/table/components/DefaultBooleanCell.js +3 -3
  2. package/dist/molecules/table/components/DefaultBooleanCell.js.map +1 -1
  3. package/dist/molecules/table/filters/SelectFilter.js +16 -15
  4. package/dist/molecules/table/filters/SelectFilter.js.map +1 -1
  5. package/dist/molecules/table/filters/TextFieldFilter.js +16 -16
  6. package/dist/molecules/table/filters/TextFieldFilter.js.map +1 -1
  7. package/dist/molecules/table/hooks/useTable.d.ts +1 -1
  8. package/dist/molecules/table/hooks/useTable.js +14 -14
  9. package/dist/molecules/table/hooks/useTable.js.map +1 -1
  10. package/dist/molecules/table/hooks/useUniqValues.d.ts +3 -3
  11. package/dist/molecules/table/hooks/useUniqValues.js +16 -6
  12. package/dist/molecules/table/hooks/useUniqValues.js.map +1 -1
  13. package/package.json +3 -3
  14. package/src/molecules/table/Table.stories.tsx +4 -1
  15. package/src/molecules/table/components/DefaultBooleanCell.spec.tsx +2 -2
  16. package/src/molecules/table/components/DefaultBooleanCell.tsx +1 -1
  17. package/src/molecules/table/filters/SelectFilter.tsx +3 -2
  18. package/src/molecules/table/filters/TextFieldFilter.tsx +5 -3
  19. package/src/molecules/table/hooks/useTable.tsx +5 -10
  20. package/src/molecules/table/hooks/useUniqValues.spec.tsx +51 -0
  21. package/src/molecules/table/hooks/useUniqValues.tsx +21 -5
package/dist/molecules/table/components/DefaultBooleanCell.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import { registerComponent as o } from "../../../registries/components.js";
3
- function l({ getValue: t, column: { columnDef: e } }) {
4
- const n = t();
5
- return /* @__PURE__ */ r("span", { children: String(n ? e.meta?.labels?.yes || "Yes" : e.meta?.labels?.No || "No") });
3
+ function l({ getValue: n, column: { columnDef: e } }) {
4
+ const t = n();
5
+ return /* @__PURE__ */ r("span", { children: String(t ? e.meta?.labels?.yes || "Yes" : e.meta?.labels?.no || "No") });
6
6
  }
7
7
  o("Cell.boolean", l);
8
8
  o("Cell.checkbox", l);
package/dist/molecules/table/components/DefaultBooleanCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultBooleanCell.js","sources":["../../../../src/molecules/table/components/DefaultBooleanCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {\n const value = getValue();\n return <span>{String(value ? columnDef.meta?.labels?.[\"yes\"] || \"Yes\" : columnDef.meta?.labels?.[\"No\"] || \"No\")}</span>;\n}\n\nregisterComponent(\"Cell.boolean\", DefaultCellBoolean);\nregisterComponent(\"Cell.checkbox\", DefaultCellBoolean);\n"],"names":["DefaultCellBoolean","getValue","columnDef","value","registerComponent"],"mappings":";;AAIO,SAASA,EAAwC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA2C;AACvH,QAAMC,IAAQF,EAAA;AACd,2BAAQ,QAAA,EAAM,UAAA,OAAOE,IAAQD,EAAU,MAAM,QAAS,OAAU,QAAQA,EAAU,MAAM,QAAS,MAAS,IAAI,GAAE;AAClH;AAEAE,EAAkB,gBAAgBJ,CAAkB;AACpDI,EAAkB,iBAAiBJ,CAAkB;"}
1
+ {"version":3,"file":"DefaultBooleanCell.js","sources":["../../../../src/molecules/table/components/DefaultBooleanCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {\n const value = getValue();\n return <span>{String(value ? columnDef.meta?.labels?.[\"yes\"] || \"Yes\" : columnDef.meta?.labels?.[\"no\"] || \"No\")}</span>;\n}\n\nregisterComponent(\"Cell.boolean\", DefaultCellBoolean);\nregisterComponent(\"Cell.checkbox\", DefaultCellBoolean);\n"],"names":["DefaultCellBoolean","getValue","columnDef","value","registerComponent"],"mappings":";;AAIO,SAASA,EAAwC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA2C;AACvH,QAAMC,IAAQF,EAAA;AACd,2BAAQ,QAAA,EAAM,UAAA,OAAOE,IAAQD,EAAU,MAAM,QAAS,OAAU,QAAQA,EAAU,MAAM,QAAS,MAAS,IAAI,GAAE;AAClH;AAEAE,EAAkB,gBAAgBJ,CAAkB;AACpDI,EAAkB,iBAAiBJ,CAAkB;"}
package/dist/molecules/table/filters/SelectFilter.js CHANGED
@@ -1,34 +1,35 @@
1
- import { jsx as o, Fragment as s } from "react/jsx-runtime";
2
- import { registerComponent as a, getComponent as p } from "../../../registries/components.js";
1
+ import { jsx as t, Fragment as a } from "react/jsx-runtime";
2
+ import { registerComponent as o, getComponent as p } from "../../../registries/components.js";
3
3
  import { useUniqValues as f } from "../hooks/useUniqValues.js";
4
- function F({ header: t, options: e }) {
5
- const n = p("Select"), i = t.column.getFilterValue(), c = f({ header: t, filterVariant: "text" }), m = e.layout === "choicesjs" ? {
4
+ function n({ header: e, options: l }) {
5
+ const c = p("Select"), i = e.column.getFilterValue(), u = f({ header: e }), m = l.layout === "choicesjs" ? {
6
6
  placeholder: void 0
7
7
  } : {
8
- placeholder: `Filter by ${t.column.columnDef.header}`
8
+ placeholder: `Filter by ${e.column.columnDef.header}`
9
9
  }, r = [
10
10
  {
11
- label: `Filter by ${t.column.columnDef.header}`,
11
+ label: `Filter by ${e.column.columnDef.header}`,
12
12
  value: ""
13
13
  }
14
- ].concat(e.options || c.map((l) => ({ label: l, value: l })));
15
- return /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(
16
- n,
14
+ ].concat(l.options || u);
15
+ return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
16
+ c,
17
17
  {
18
18
  size: "small",
19
- ...e,
19
+ ...l,
20
20
  ...m,
21
21
  autoComplete: "off",
22
22
  options: r,
23
- name: `filter_${t.column.id}`,
24
- "data-testid": `filter_${t.column.id}`,
23
+ name: `filter_${e.column.id}`,
24
+ "data-testid": `filter_${e.column.id}`,
25
25
  value: i,
26
- onChange: (l, u) => t.column.setFilterValue(u)
26
+ onChange: (F, s) => e.column.setFilterValue(s)
27
27
  }
28
28
  ) });
29
29
  }
30
- a("Filter.select", F);
30
+ o("Filter.select", n);
31
+ o("Filter.boolean", n);
31
32
  export {
32
- F as SelectFilter
33
+ n as SelectFilter
33
34
  };
34
35
  //# sourceMappingURL=SelectFilter.js.map
package/dist/molecules/table/filters/SelectFilter.js.map CHANGED
@@ -1 +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 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);\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,cAAa;AAAA,MACb,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;"}
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 });\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);\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,GAE3CO,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,CAAU;AAEtC,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,OAAOI;AAAA,MACP,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 CHANGED
@@ -1,27 +1,27 @@
1
- import { jsxs as a, Fragment as u, jsx as i } from "react/jsx-runtime";
2
- import { registerComponent as c, getComponent as d } from "../../../registries/components.js";
1
+ import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
2
+ import { registerComponent as m, getComponent as d } from "../../../registries/components.js";
3
3
  import { useUniqValues as p } from "../hooks/useUniqValues.js";
4
- function f({ header: t, options: e }) {
5
- const o = d("InputText"), m = t.column.getFilterValue(), r = p({ header: t, filterVariant: "text" }), n = `data_list_${t.column.id}`;
6
- return /* @__PURE__ */ a(u, { children: [
7
- !e.disableDatalist && /* @__PURE__ */ i("datalist", { id: n, children: r.map((l) => /* @__PURE__ */ i("option", { value: l }, l)) }),
8
- /* @__PURE__ */ i(
4
+ function F({ header: l, options: n }) {
5
+ const o = d("InputText"), u = l.column.getFilterValue(), a = p({ header: l }), i = `data_list_${l.column.id}`;
6
+ return /* @__PURE__ */ r(c, { children: [
7
+ !n.disableDatalist && /* @__PURE__ */ e("datalist", { id: i, children: a.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label || t.value }, t.value)) }),
8
+ /* @__PURE__ */ e(
9
9
  o,
10
10
  {
11
11
  size: "small",
12
- placeholder: `Filter by ${t.column.columnDef.header}`,
13
- ...e,
14
- name: `filter_${t.column.id}`,
15
- "data-testid": `filter_${t.column.id}`,
16
- value: m ?? "",
17
- list: n,
18
- onChange: (l, s) => t.column.setFilterValue(s)
12
+ placeholder: `Filter by ${l.column.columnDef.header}`,
13
+ ...n,
14
+ name: `filter_${l.column.id}`,
15
+ "data-testid": `filter_${l.column.id}`,
16
+ value: u ?? "",
17
+ list: i,
18
+ onChange: (t, s) => l.column.setFilterValue(s)
19
19
  }
20
20
  )
21
21
  ] });
22
22
  }
23
- c("Filter.text", f);
23
+ m("Filter.text", F);
24
24
  export {
25
- f as TextFieldFilter
25
+ F as TextFieldFilter
26
26
  };
27
27
  //# sourceMappingURL=TextFieldFilter.js.map
package/dist/molecules/table/filters/TextFieldFilter.js.map CHANGED
@@ -1 +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;"}
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 });\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 CHANGED
@@ -1,7 +1,7 @@
1
1
  import { TableOptions, TableState } from '@tanstack/react-table';
2
2
  import { FormOptions, Operation } from '../../../interfaces';
3
3
  import { JSONRecord } from '../../../interfaces/JSONRecord.js';
4
- export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
4
+ export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick"> {
5
5
  operations: Operation<Data>[];
6
6
  metadata?: Record<string, unknown>;
7
7
  i18n?: FormOptions["i18n"];
package/dist/molecules/table/hooks/useTable.js CHANGED
@@ -1,35 +1,35 @@
1
- import { jsx as R } from "react/jsx-runtime";
2
- 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";
1
+ import { jsx as w } from "react/jsx-runtime";
2
+ 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";
3
3
  import { useEffect as v } from "react";
4
4
  import { useI18n as O } from "../../../hooks/useI18n.js";
5
- import { getComponent as I } from "../../../registries/components.js";
6
- function z(e) {
7
- const n = I("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
5
+ import { getComponent as V } from "../../../registries/components.js";
6
+ function x(e) {
7
+ const n = V("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
8
8
  {
9
9
  id: "operations",
10
10
  header: t("Operations"),
11
- cell: (F) => /* @__PURE__ */ R(n, { info: F, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
11
+ cell: (R) => /* @__PURE__ */ w(n, { info: R, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
12
12
  }
13
- ] : [], o = f({
13
+ ] : [], o = M({
14
14
  ...e,
15
15
  columns: [...e.columns, ...i],
16
16
  getCoreRowModel: h(),
17
17
  getPaginationRowModel: b(),
18
- getFilteredRowModel: e.manualFiltering ? void 0 : S(),
19
- getSortedRowModel: e.manualSorting ? void 0 : C(),
20
- getFacetedRowModel: e.manualFaceted ? void 0 : M(),
18
+ getFilteredRowModel: e.manualFiltering ? void 0 : e.getFilteredRowModel || S(),
19
+ getSortedRowModel: e.manualSorting ? void 0 : e.getSortedRowModel || C(),
20
+ getFacetedRowModel: e.manualFaceted ? void 0 : e.getFacetedRowModel || f(),
21
21
  // client-side faceting
22
- getFacetedUniqueValues: e.manualFaceted ? void 0 : w()
22
+ getFacetedUniqueValues: e.manualFaceted ? void 0 : e.getFacetedUniqueValues || s()
23
23
  // generate unique values for select filter/autocomplete
24
- }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: r, columnVisibility: u, globalFilter: s } = o.getState();
24
+ }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: u, columnVisibility: r, globalFilter: F } = o.getState();
25
25
  return v(() => {
26
26
  e.onChange && e.onChange(o.getState());
27
- }, [a, l, d, g, c, m, r, u, s]), {
27
+ }, [a, l, d, g, c, m, u, r, F]), {
28
28
  i18n: t,
29
29
  tableInstance: o
30
30
  };
31
31
  }
32
32
  export {
33
- z as useTable
33
+ x as useTable
34
34
  };
35
35
  //# sourceMappingURL=useTable.js.map
package/dist/molecules/table/hooks/useTable.js.map CHANGED
@@ -1 +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, 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>, \"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 object = JSONRecord>(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,EAA2CC,GAA4B;AACrF,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;"}
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, 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\"> {\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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Header } from '@tanstack/react-table';
2
- export declare function useUniqValues<Data = any>({ header, filterVariant }: {
2
+ import { SelectOptionProps } from '../../../molecules/forms/select/Select.interface';
3
+ export declare function useUniqValues<Data = any>({ header }: {
3
4
  header: Header<Data, unknown>;
4
- filterVariant: string;
5
- }): any[];
5
+ }): SelectOptionProps[];
package/dist/molecules/table/hooks/useUniqValues.js CHANGED
@@ -1,11 +1,21 @@
1
1
  import { useMemo as u } from "react";
2
- function r({ header: e, filterVariant: o }) {
3
- return u(
4
- () => o === "range" ? [] : Array.from(e.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5e3),
5
- [e.column, o]
6
- );
2
+ function a({ header: l }) {
3
+ return u(() => {
4
+ switch (l.column.columnDef.meta?.filter?.variant) {
5
+ case "boolean":
6
+ return [
7
+ { label: l.column.columnDef.meta?.labels?.yes || "Yes", value: !0 },
8
+ { label: l.column.columnDef.meta?.labels?.no || l.column.columnDef.meta?.labels?.No || "No", value: !1 }
9
+ ];
10
+ default:
11
+ return Array.from(l.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5e3).map((e) => ({
12
+ label: e,
13
+ value: e
14
+ }));
15
+ }
16
+ }, [l.column]);
7
17
  }
8
18
  export {
9
- r as useUniqValues
19
+ a as useUniqValues
10
20
  };
11
21
  //# sourceMappingURL=useUniqValues.js.map
package/dist/molecules/table/hooks/useUniqValues.js.map CHANGED
@@ -1 +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;"}
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\nimport { SelectOptionProps } from \"../../../molecules/forms/select/Select.interface\";\n\nexport function useUniqValues<Data = any>({ header }: { header: Header<Data, unknown> }): SelectOptionProps[] {\n return useMemo(() => {\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 { label: header.column.columnDef.meta?.labels?.[\"no\"] || header.column.columnDef.meta?.labels?.[\"No\"] || \"No\", value: false }\n ];\n\n default:\n return Array.from(header.column.getFacetedUniqueValues().keys())\n .flat()\n .sort()\n .slice(0, 5000)\n .map((i) => ({\n label: i,\n value: i\n }));\n }\n }, [header.column]);\n}\n"],"names":["useUniqValues","header","useMemo","i"],"mappings":";AAKO,SAASA,EAA0B,EAAE,QAAAC,KAAkE;AAC5G,SAAOC,EAAQ,MAAM;AACnB,YAAQD,EAAO,OAAO,UAAU,MAAM,QAAQ,SAAA;AAAA,MAC5C,KAAK;AACH,eAAO;AAAA,UACL,EAAE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,OAAU,OAAO,OAAO,GAAA;AAAA,UACxE,EAAE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,MAASA,EAAO,OAAO,UAAU,MAAM,QAAS,MAAS,MAAM,OAAO,GAAA;AAAA,QAAM;AAAA,MAGhI;AACE,eAAO,MAAM,KAAKA,EAAO,OAAO,uBAAA,EAAyB,MAAM,EAC5D,OACA,KAAA,EACA,MAAM,GAAG,GAAI,EACb,IAAI,CAACE,OAAO;AAAA,UACX,OAAOA;AAAA,UACP,OAAOA;AAAA,QAAA,EACP;AAAA,IAAA;AAAA,EAEV,GAAG,CAACF,EAAO,MAAM,CAAC;AACpB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsed/react-formio",
3
- "version": "3.0.0-rc.15",
3
+ "version": "3.0.0-rc.17",
4
4
  "description": "Provide a react formio wrapper. Written in TypeScript.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -44,8 +44,8 @@
44
44
  },
45
45
  "devDependencies": {
46
46
  "@tanstack/react-table": ">=8.20.6",
47
- "@tsed/tailwind-formio": "3.0.0-rc.15",
48
- "@tsed/typescript": "3.0.0-rc.15",
47
+ "@tsed/tailwind-formio": "3.0.0-rc.17",
48
+ "@tsed/typescript": "3.0.0-rc.17",
49
49
  "microbundle": "0.13.0",
50
50
  "vite": "7.1.5",
51
51
  "vitest": "3.2.4"
package/src/molecules/table/Table.stories.tsx CHANGED
@@ -172,7 +172,10 @@ export const Usage: Story = {
172
172
  return expect(canvas.queryByText("MPEC")).not.toBeInTheDocument();
173
173
  });
174
174
 
175
- await expect(canvas.getByText("La Caravelle")).toBeInTheDocument();
175
+ const tableBody = canvasElement.querySelector("tbody");
176
+
177
+ await expect(tableBody).toBeInTheDocument();
178
+ await expect(within(tableBody as HTMLElement).getByText("La Caravelle")).toBeInTheDocument();
176
179
 
177
180
  await delay(300);
178
181
 
package/src/molecules/table/components/DefaultBooleanCell.spec.tsx CHANGED
@@ -29,13 +29,13 @@ describe("DefaultCellBoolean", () => {
29
29
  });
30
30
 
31
31
  it("should render custom labels from column metadata", () => {
32
- render(<DefaultCellBoolean {...createCellContext(true, { yes: "Enabled", No: "Disabled" })} />);
32
+ render(<DefaultCellBoolean {...createCellContext(true, { yes: "Enabled", no: "Disabled" })} />);
33
33
 
34
34
  expect(screen.getByText("Enabled", { selector: "span" })).toBeInTheDocument();
35
35
  });
36
36
 
37
37
  it("should render the custom false label from column metadata", () => {
38
- render(<DefaultCellBoolean {...createCellContext(false, { yes: "Enabled", No: "Disabled" })} />);
38
+ render(<DefaultCellBoolean {...createCellContext(false, { yes: "Enabled", no: "Disabled" })} />);
39
39
 
40
40
  expect(screen.getByText("Disabled", { selector: "span" })).toBeInTheDocument();
41
41
  });
package/src/molecules/table/components/DefaultBooleanCell.tsx CHANGED
@@ -4,7 +4,7 @@ import { registerComponent } from "../../../registries/components";
4
4
 
5
5
  export function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {
6
6
  const value = getValue();
7
- return <span>{String(value ? columnDef.meta?.labels?.["yes"] || "Yes" : columnDef.meta?.labels?.["No"] || "No")}</span>;
7
+ return <span>{String(value ? columnDef.meta?.labels?.["yes"] || "Yes" : columnDef.meta?.labels?.["no"] || "No")}</span>;
8
8
  }
9
9
 
10
10
  registerComponent("Cell.boolean", DefaultCellBoolean);
package/src/molecules/table/filters/SelectFilter.tsx CHANGED
@@ -8,7 +8,7 @@ import { FilterSelectOptions } from "./Filters";
8
8
  export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
9
9
  const Select = getComponent<typeof DefaultSelect>("Select");
10
10
  const columnFilterValue = header.column.getFilterValue();
11
- const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
11
+ const uniqValues = useUniqValues<Data>({ header });
12
12
 
13
13
  const opts =
14
14
  options.layout === "choicesjs"
@@ -26,7 +26,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
26
26
  value: ""
27
27
  }
28
28
  ] as SelectOptionProps[]
29
- ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));
29
+ ).concat(options.options || uniqValues);
30
30
 
31
31
  return (
32
32
  <>
@@ -46,3 +46,4 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
46
46
  }
47
47
 
48
48
  registerComponent("Filter.select", SelectFilter);
49
+ registerComponent("Filter.boolean", SelectFilter);
package/src/molecules/table/filters/TextFieldFilter.tsx CHANGED
@@ -7,15 +7,17 @@ import { FilterTextOptions } from "./Filters";
7
7
  export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {
8
8
  const InputText = getComponent<typeof DefaultInputText>("InputText");
9
9
  const columnFilterValue = header.column.getFilterValue();
10
- const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
10
+ const uniqValues = useUniqValues<Data>({ header });
11
11
  const datalistId = `data_list_${header.column.id}`;
12
12
 
13
13
  return (
14
14
  <>
15
15
  {!options.disableDatalist && (
16
16
  <datalist id={datalistId}>
17
- {uniqValues.map((value: any) => (
18
- <option value={value} key={value} />
17
+ {uniqValues.map((item) => (
18
+ <option value={item.value} key={item.value}>
19
+ {item.label || item.value}
20
+ </option>
19
21
  ))}
20
22
  </datalist>
21
23
  )}
package/src/molecules/table/hooks/useTable.tsx CHANGED
@@ -18,7 +18,7 @@ import type { JSONRecord } from "../../../interfaces/JSONRecord.js";
18
18
  import { getComponent } from "../../../registries/components";
19
19
  import type { DefaultCellOperations } from "../components/DefaultCellOperations";
20
20
 
21
- export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
21
+ export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick"> {
22
22
  operations: Operation<Data>[];
23
23
  metadata?: Record<string, unknown>;
24
24
  i18n?: FormOptions["i18n"];
@@ -32,11 +32,6 @@ export function useTable<Data extends object = JSONRecord>(props: UseTableProps<
32
32
  const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
33
33
  const { t } = useI18n(props.i18n);
34
34
 
35
- // const [pagination, setPagination] = useState({
36
- // pageIndex: 0, //initial page index
37
- // pageSize: 10 //default page size
38
- // });
39
-
40
35
  const operations = props.operations.length
41
36
  ? ([
42
37
  {
@@ -54,10 +49,10 @@ export function useTable<Data extends object = JSONRecord>(props: UseTableProps<
54
49
  columns: [...props.columns, ...operations],
55
50
  getCoreRowModel: getCoreRowModel(),
56
51
  getPaginationRowModel: getPaginationRowModel(),
57
- getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
58
- getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
59
- getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
60
- getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
52
+ getFilteredRowModel: !props.manualFiltering ? props.getFilteredRowModel || getFilteredRowModel() : undefined,
53
+ getSortedRowModel: !props.manualSorting ? props.getSortedRowModel || getSortedRowModel() : undefined,
54
+ getFacetedRowModel: !props.manualFaceted ? props.getFacetedRowModel || getFacetedRowModel() : undefined, // client-side faceting
55
+ getFacetedUniqueValues: !props.manualFaceted ? props.getFacetedUniqueValues || getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
61
56
  });
62
57
 
63
58
  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =
package/src/molecules/table/hooks/useUniqValues.spec.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import { renderHook } from "@testing-library/react";
2
+
3
+ import { useUniqValues } from "./useUniqValues";
4
+
5
+ function createHeader({ variant, labels, values = [] }: { variant?: string; labels?: Record<string, string>; values?: string[] }) {
6
+ return {
7
+ column: {
8
+ columnDef: {
9
+ meta: {
10
+ filter: {
11
+ variant
12
+ },
13
+ labels
14
+ }
15
+ },
16
+ getFacetedUniqueValues: () => new Map(values.map((value) => [value, 1]))
17
+ }
18
+ } as any;
19
+ }
20
+
21
+ describe("useUniqValues", () => {
22
+ it("should return boolean options with the custom labels", () => {
23
+ const header = createHeader({
24
+ variant: "boolean",
25
+ labels: {
26
+ yes: "Enabled",
27
+ No: "Disabled"
28
+ }
29
+ });
30
+
31
+ const { result } = renderHook(() => useUniqValues({ header }));
32
+
33
+ expect(result.current).toEqual([
34
+ { label: "Enabled", value: true },
35
+ { label: "Disabled", value: false }
36
+ ]);
37
+ });
38
+
39
+ it("should map faceted unique values to select options", () => {
40
+ const header = createHeader({
41
+ values: ["beta", "alpha"]
42
+ });
43
+
44
+ const { result } = renderHook(() => useUniqValues({ header }));
45
+
46
+ expect(result.current).toEqual([
47
+ { label: "alpha", value: "alpha" },
48
+ { label: "beta", value: "beta" }
49
+ ]);
50
+ });
51
+ });
package/src/molecules/table/hooks/useUniqValues.tsx CHANGED
@@ -1,10 +1,26 @@
1
1
  import type { Header } from "@tanstack/react-table";
2
2
  import { useMemo } from "react";
3
3
 
4
- export function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {
5
- return useMemo(
6
- () => (filterVariant === "range" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),
4
+ import { SelectOptionProps } from "../../../molecules/forms/select/Select.interface";
7
5
 
8
- [header.column, filterVariant]
9
- );
6
+ export function useUniqValues<Data = any>({ header }: { header: Header<Data, unknown> }): SelectOptionProps[] {
7
+ return useMemo(() => {
8
+ switch (header.column.columnDef.meta?.filter?.variant) {
9
+ case "boolean":
10
+ return [
11
+ { label: header.column.columnDef.meta?.labels?.["yes"] || "Yes", value: true },
12
+ { label: header.column.columnDef.meta?.labels?.["no"] || header.column.columnDef.meta?.labels?.["No"] || "No", value: false }
13
+ ];
14
+
15
+ default:
16
+ return Array.from(header.column.getFacetedUniqueValues().keys())
17
+ .flat()
18
+ .sort()
19
+ .slice(0, 5000)
20
+ .map((i) => ({
21
+ label: i,
22
+ value: i
23
+ }));
24
+ }
25
+ }, [header.column]);
10
26
  }