@tsed/react-formio 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/molecules/forms/select/components/ChoicesSelect.js

@@ -1,100 +1,97 @@
-import { jsx as x } from "react/jsx-runtime";
-import { C as w } from "../../../../chunks/choices.js";
+import { jsx as k } from "react/jsx-runtime";
+import { C as p } from "../../../../chunks/choices.js";
 import { c as O } from "../../../../chunks/clsx.js";
-import { useRef as S, useMemo as z, useEffect as p } from "react";
-import { c as M } from "../../../../chunks/index.module.js";
-import { registerComponent as $ } from "../../../../registries/components.js";
-import { cleanFormControlProps as g } from "../../form-control/FormControl.js";
-import { callbackOnCreateTemplates as j } from "./choices.template.js";
-function B({
+import { useRef as S, useMemo as w, useEffect as E } from "react";
+import { registerComponent as z } from "../../../../registries/components.js";
+import { cleanFormControlProps as M } from "../../form-control/FormControl.js";
+import { callbackOnCreateTemplates as $ } from "./choices.template.js";
+function j({
   name: r,
   disabled: i,
-  multiple: c,
-  options: f,
-  placeholder: l,
-  searchEnabled: d = !0,
-  customProperties: v = {},
-  size: E,
-  value: a,
-  required: C,
-  onChange: b
+  multiple: s,
+  options: d,
+  placeholder: n,
+  searchEnabled: v = !0,
+  customProperties: f = {},
+  size: h,
+  value: o,
+  required: b,
+  onChange: u
 }) {
-  const h = S(), t = S(), m = z(() => {
-    const n = (e) => [].concat(a).includes(e), s = f.map((e) => (e.options && (e = {
+  const C = S(), t = S(), l = w(() => {
+    const a = (e) => [].concat(o).includes(e), m = d.map((e) => (e.options && (e = {
       ...e,
-      choices: e.options.map((o) => ({
-        ...o,
-        selected: n(o.value)
+      choices: e.options.map((c) => ({
+        ...c,
+        selected: a(c.value)
       }))
     }), {
       ...e,
-      selected: n(e.value)
+      selected: a(e.value)
     }));
-    return !c && l ? [
+    return !s && n ? [
       {
-        disabled: C,
-        label: l,
+        disabled: b,
+        label: n,
         value: ""
       },
-      ...s
-    ] : s;
-  }, [f, a, C, c, l]), u = M((n, s) => {
-    b?.(n, s);
-  }, 50);
-  return p(() => {
-    t.current && (c && t.current.clearStore(), t.current.setChoices(m, "value", "label", !0));
-  }, [m]), p(() => {
+      ...m
+    ] : m;
+  }, [d, o, b, s, n]);
+  return E(() => {
+    t.current && (s && t.current.clearStore(), t.current.setChoices(l, "value", "label", !0));
+  }, [s, l]), E(() => {
     if (!t.current) {
       const {
         allowHTML: e = !0,
-        silent: o = !0,
-        removeItemButton: I = !0,
-        shouldSort: T = !1,
+        silent: c = !0,
+        removeItemButton: T = !0,
+        shouldSort: I = !1,
         itemSelectText: L = "",
-        callbackOnCreateTemplates: k
-      } = v;
-      t.current = new w(h.current, {
-        ...v,
+        callbackOnCreateTemplates: x
+      } = f;
+      t.current = new p(C.current, {
+        ...f,
         allowHTML: e,
-        silent: o,
-        searchEnabled: d,
-        removeItemButton: I,
-        choices: m,
-        placeholder: l,
+        silent: c,
+        searchEnabled: v,
+        removeItemButton: T,
+        choices: l,
+        placeholder: n,
         placeholderValue: "",
         itemSelectText: L,
-        shouldSort: T,
-        callbackOnCreateTemplates: k || j
+        shouldSort: I,
+        callbackOnCreateTemplates: x || $
       });
     }
     i ? t.current?.disable() : t.current?.enable();
-    const n = ({ detail: { value: e } }) => {
-      u(r, c ? [.../* @__PURE__ */ new Set([...new Set(a), e])] : e);
-    }, s = ({ detail: { value: e } }) => {
-      c ? u(
+    const a = ({ detail: { value: e } }) => {
+      u?.(r, s ? [.../* @__PURE__ */ new Set([...o, e])] : e);
+    }, m = ({ detail: { value: e } }) => {
+      s ? u?.(
         r,
-        a.filter((o) => o !== e)
-      ) : u(r, void 0);
+        o.filter((c) => c !== e)
+      ) : u?.(r, void 0);
     };
-    return t.current?.passedElement.element.addEventListener("addItem", n), t.current?.passedElement.element.addEventListener("removeItem", s), () => {
-      t.current?.passedElement.element.removeEventListener("addItem", n), t.current?.passedElement.element.removeEventListener("removeItem", s);
+    return t.current?.passedElement.element.addEventListener("addItem", a), t.current?.passedElement.element.addEventListener("removeItem", m), () => {
+      t.current?.passedElement.element.removeEventListener("addItem", a), t.current?.passedElement.element.removeEventListener("removeItem", m);
     };
-  }, [i, b, m, l, d, E, a]), {
-    ref: h,
+  }, [f, i, s, r, u, l, n, v, h, o]), {
+    ref: C,
     choicesRef: t
   };
 }
-function H(r) {
-  const { ref: i } = B({
+function B(r) {
+  const { ref: i } = j({
     ...r,
     searchEnabled: !r.disableSearch
   });
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ k(
     "select",
     {
       ref: i,
       "data-testid": `select_${r.name}`,
-      ...g(r, [
+      ...M(r, [
         "className",
         "size",
         "value",
@@ -112,9 +109,9 @@ function H(r) {
     }
   );
 }
-$("Select.choicesjs", H);
+z("Select.choicesjs", B);
 export {
-  H as ChoiceSelect,
-  B as useChoices
+  B as ChoiceSelect,
+  j as useChoices
 };
 //# sourceMappingURL=ChoicesSelect.js.map

package/dist/molecules/forms/select/components/ChoicesSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport cx from \"clsx\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport type { AllSelectProps } from \"../Select.interface\";\nimport { callbackOnCreateTemplates as defaultTemplateCallback } from \"./choices.template\";\n\nexport function useChoices({\n  name,\n  disabled,\n  multiple,\n  options,\n  placeholder,\n  searchEnabled = true,\n  customProperties = {},\n  size,\n  value,\n  required,\n  onChange\n}: AllSelectProps) {\n  const ref = useRef<any>();\n  const choicesRef = useRef<Choices>();\n\n  const opts = useMemo(() => {\n    const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);\n\n    const opts = options.map((item) => {\n      if (item.options) {\n        item = {\n          ...item,\n          choices: item.options.map((item: any) => ({\n            ...item,\n            selected: isSelected(item.value)\n          }))\n        };\n      }\n\n      return {\n        ...item,\n        selected: isSelected(item.value)\n      };\n    });\n\n    if (!multiple && placeholder) {\n      return [\n        {\n          disabled: required,\n          label: placeholder,\n          value: \"\"\n        },\n        ...opts\n      ];\n    }\n\n    return opts;\n  }, [options, value, required, multiple, placeholder]);\n\n  const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {\n    onChange?.(name, value);\n  }, 50);\n\n  useEffect(() => {\n    if (choicesRef.current) {\n      if (multiple) {\n        choicesRef.current.clearStore();\n        choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n      } else {\n        choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n      }\n    }\n  }, [opts]);\n\n  useEffect(() => {\n    if (!choicesRef.current) {\n      const {\n        allowHTML = true,\n        silent = true,\n        removeItemButton = true,\n        shouldSort = false,\n        itemSelectText = \"\",\n        callbackOnCreateTemplates\n      } = customProperties;\n      choicesRef.current = new Choices(ref.current, {\n        ...customProperties,\n        allowHTML,\n        silent,\n        searchEnabled,\n        removeItemButton,\n        choices: opts,\n        placeholder: placeholder as string,\n        placeholderValue: \"\" as string,\n        itemSelectText,\n        shouldSort,\n        callbackOnCreateTemplates: callbackOnCreateTemplates || defaultTemplateCallback\n      } as any);\n    }\n\n    if (disabled) {\n      choicesRef.current?.disable();\n    } else {\n      choicesRef.current?.enable();\n    }\n\n    const addItem = ({ detail: { value: newValue } }: any) => {\n      onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);\n    };\n\n    const removeItem = ({ detail: { value: newValue } }: any) => {\n      if (multiple) {\n        onChangeCallback(\n          name,\n          (value as string[]).filter((v) => v !== newValue)\n        );\n      } else {\n        onChangeCallback(name, undefined as any);\n      }\n    };\n\n    choicesRef.current?.passedElement.element.addEventListener(\"addItem\", addItem);\n    choicesRef.current?.passedElement.element.addEventListener(\"removeItem\", removeItem);\n\n    return () => {\n      choicesRef.current?.passedElement.element.removeEventListener(\"addItem\", addItem);\n      choicesRef.current?.passedElement.element.removeEventListener(\"removeItem\", removeItem);\n    };\n  }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);\n\n  return {\n    ref,\n    choicesRef\n  };\n}\n\nexport function ChoiceSelect(props: AllSelectProps) {\n  const { ref } = useChoices({\n    ...props,\n    searchEnabled: !props.disableSearch\n  });\n\n  return (\n    <select\n      ref={ref}\n      data-testid={`select_${props.name}`}\n      {...cleanFormControlProps(props as any, [\n        \"className\",\n        \"size\",\n        \"value\",\n        \"options\",\n        \"placeholder\",\n        \"onChange\",\n        \"allowHTML\",\n        \"silent\",\n        \"removeItemButton\",\n        \"shouldSort\",\n        \"itemSelectText\",\n        \"customProperties\"\n      ])}\n      className={cx(\"form-control\", props.size && `form-control-${props.size}`)}\n    />\n  );\n}\n\nregisterComponent(\"Select.choicesjs\", ChoiceSelect);\n"],"names":["useChoices","name","disabled","multiple","options","placeholder","searchEnabled","customProperties","size","value","required","onChange","ref","useRef","choicesRef","opts","useMemo","isSelected","itemValue","item","onChangeCallback","useDebouncedCallback","useEffect","allowHTML","silent","removeItemButton","shouldSort","itemSelectText","callbackOnCreateTemplates","Choices","defaultTemplateCallback","addItem","newValue","removeItem","v","ChoiceSelect","props","jsx","cleanFormControlProps","cx","registerComponent"],"mappings":"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"}
+{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport cx from \"clsx\";\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport type { AllSelectProps } from \"../Select.interface\";\nimport { callbackOnCreateTemplates as defaultTemplateCallback } from \"./choices.template\";\n\nexport function useChoices({\n  name,\n  disabled,\n  multiple,\n  options,\n  placeholder,\n  searchEnabled = true,\n  customProperties = {},\n  size,\n  value,\n  required,\n  onChange\n}: AllSelectProps) {\n  const ref = useRef<any>();\n  const choicesRef = useRef<Choices>();\n\n  const opts = useMemo(() => {\n    const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);\n\n    const opts = options.map((item: any) => {\n      if (item.options) {\n        item = {\n          ...item,\n          choices: item.options.map((optionItem: any) => ({\n            ...optionItem,\n            selected: isSelected(optionItem.value)\n          }))\n        };\n      }\n\n      return {\n        ...item,\n        selected: isSelected(item.value)\n      };\n    });\n\n    if (!multiple && placeholder) {\n      return [\n        {\n          disabled: required,\n          label: placeholder,\n          value: \"\"\n        },\n        ...opts\n      ];\n    }\n\n    return opts;\n  }, [options, value, required, multiple, placeholder]);\n\n  useEffect(() => {\n    if (choicesRef.current) {\n      if (multiple) {\n        choicesRef.current.clearStore();\n        choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n      } else {\n        choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n      }\n    }\n  }, [multiple, opts]);\n\n  useEffect(() => {\n    if (!choicesRef.current) {\n      const {\n        allowHTML = true,\n        silent = true,\n        removeItemButton = true,\n        shouldSort = false,\n        itemSelectText = \"\",\n        callbackOnCreateTemplates\n      } = customProperties as any;\n\n      choicesRef.current = new Choices(ref.current, {\n        ...(customProperties as any),\n        allowHTML,\n        silent,\n        searchEnabled,\n        removeItemButton,\n        choices: opts,\n        placeholder: placeholder as string,\n        placeholderValue: \"\" as string,\n        itemSelectText,\n        shouldSort,\n        callbackOnCreateTemplates: callbackOnCreateTemplates || defaultTemplateCallback\n      } as any);\n    }\n\n    if (disabled) {\n      choicesRef.current?.disable();\n    } else {\n      choicesRef.current?.enable();\n    }\n\n    const addItem = ({ detail: { value: newValue } }: any) => {\n      onChange?.(name, multiple ? [...new Set([...(value as string[]), newValue])] : newValue);\n    };\n\n    const removeItem = ({ detail: { value: newValue } }: any) => {\n      if (multiple) {\n        onChange?.(\n          name,\n          (value as string[]).filter((v) => v !== newValue)\n        );\n      } else {\n        onChange?.(name, undefined as any);\n      }\n    };\n\n    choicesRef.current?.passedElement.element.addEventListener(\"addItem\", addItem);\n    choicesRef.current?.passedElement.element.addEventListener(\"removeItem\", removeItem);\n\n    return () => {\n      choicesRef.current?.passedElement.element.removeEventListener(\"addItem\", addItem);\n      choicesRef.current?.passedElement.element.removeEventListener(\"removeItem\", removeItem);\n    };\n  }, [customProperties, disabled, multiple, name, onChange, opts, placeholder, searchEnabled, size, value]);\n\n  return {\n    ref,\n    choicesRef\n  };\n}\n\nexport function ChoiceSelect(props: AllSelectProps) {\n  const { ref } = useChoices({\n    ...props,\n    searchEnabled: !props.disableSearch\n  });\n\n  return (\n    <select\n      ref={ref}\n      data-testid={`select_${props.name}`}\n      {...cleanFormControlProps(props as any, [\n        \"className\",\n        \"size\",\n        \"value\",\n        \"options\",\n        \"placeholder\",\n        \"onChange\",\n        \"allowHTML\",\n        \"silent\",\n        \"removeItemButton\",\n        \"shouldSort\",\n        \"itemSelectText\",\n        \"customProperties\"\n      ])}\n      className={cx(\"form-control\", props.size && `form-control-${props.size}`)}\n    />\n  );\n}\n\nregisterComponent(\"Select.choicesjs\", ChoiceSelect);\n"],"names":["useChoices","name","disabled","multiple","options","placeholder","searchEnabled","customProperties","size","value","required","onChange","ref","useRef","choicesRef","opts","useMemo","isSelected","itemValue","item","optionItem","useEffect","allowHTML","silent","removeItemButton","shouldSort","itemSelectText","callbackOnCreateTemplates","Choices","defaultTemplateCallback","addItem","newValue","removeItem","v","ChoiceSelect","props","jsx","cleanFormControlProps","cx","registerComponent"],"mappings":"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"}

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

@@ -1,40 +1,42 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { registerComponent as p, getComponent as x } from "../../../registries/components.js";
-function g({ header: c, options: a }) {
-  const { column: l } = c, r = x("InputText"), m = c.column.getFilterValue(), t = a.min ?? l.getFacetedMinMaxValues()?.[0], n = a.max ?? l.getFacetedMinMaxValues()?.[1], o = a.step ?? 1;
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { registerComponent as x, getComponent as p } from "../../../registries/components.js";
+function g({ header: m, options: t }) {
+  const { column: e } = m, c = p("InputText"), r = m.column.getFilterValue(), a = t.min ?? e.getFacetedMinMaxValues()?.[0], l = t.max ?? e.getFacetedMinMaxValues()?.[1], o = t.step ?? 1;
   return /* @__PURE__ */ u("div", { children: [
     /* @__PURE__ */ u("div", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
-        r,
+      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
+        c,
         {
+          name: `${e.id}-min`,
           type: "number",
           size: "small",
-          min: t,
-          max: n,
+          min: a,
+          max: l,
           step: o,
-          value: m?.[0] ?? "",
-          onChange: (d, s) => l.setFilterValue((i) => [s, i?.[1]]),
-          placeholder: `Min ${t !== void 0 ? `(${t})` : ""}`
+          value: r?.[0] ?? "",
+          onChange: (d, i) => e.setFilterValue((s) => [i, s?.[1]]),
+          placeholder: `Min ${a !== void 0 ? `(${a})` : ""}`
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
-        r,
+      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
+        c,
         {
+          name: `${e.id}-max`,
           type: "number",
           size: "small",
-          min: t,
-          max: n,
+          min: a,
+          max: l,
           step: o,
-          value: m?.[1] ?? "",
-          onChange: (d, s) => l.setFilterValue((i) => [i?.[0], s]),
-          placeholder: `Max ${n ? `(${n})` : ""}`
+          value: r?.[1] ?? "",
+          onChange: (d, i) => e.setFilterValue((s) => [s?.[0], i]),
+          placeholder: `Max ${l ? `(${l})` : ""}`
         }
       ) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "h-1" })
+    /* @__PURE__ */ n("div", { className: "h-1" })
   ] });
 }
-p("Filter.range", g);
+x("Filter.range", g);
 export {
   g as RangeFilter
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.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 { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","max","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;AAClG,QAAM,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAA,GAClCM,IAAML,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDK,IAAMN,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDM,IAAOP,EAAQ,QAAQ;AAE7B,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACD,GAAOC,IAAM,CAAC,CAAC,CAAC;AAAA,UAC1F,aAAa,OAAOP,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACA,IAAM,CAAC,GAAGD,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAOL,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAC3C,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,MAAA,CAAM;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBf,CAAW;"}
+{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.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 { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            name={`${column.id}-min`}\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            name={`${column.id}-max`}\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","max","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;AAClG,QAAM,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAA,GAClCM,IAAML,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDK,IAAMN,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDM,IAAOP,EAAQ,QAAQ;AAE7B,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAM,GAAGD,EAAO,EAAE;AAAA,UAClB,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAI;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACD,GAAOC,IAAM,CAAC,CAAC,CAAC;AAAA,UAC1F,aAAa,OAAOP,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAM,GAAGD,EAAO,EAAE;AAAA,UAClB,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAI;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACA,IAAM,CAAC,GAAGD,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAOL,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAC3C,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,MAAA,CAAM;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBf,CAAW;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-rc.25",
+  "version": "3.0.0-rc.27",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-rc.25",
-    "@tsed/typescript": "3.0.0-rc.25",
+    "@tsed/tailwind-formio": "3.0.0-rc.27",
+    "@tsed/typescript": "3.0.0-rc.27",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

package/src/molecules/forms/select/components/ChoicesSelect.tsx

@@ -1,7 +1,6 @@
 import Choices from "choices.js";
 import cx from "clsx";
 import { useEffect, useMemo, useRef } from "react";
-import { useDebouncedCallback } from "use-debounce";
 
 import { registerComponent } from "../../../../registries/components";
 import { cleanFormControlProps } from "../../form-control/FormControl";
@@ -27,13 +26,13 @@ export function useChoices({
   const opts = useMemo(() => {
     const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);
 
-    const opts = options.map((item) => {
+    const opts = options.map((item: any) => {
       if (item.options) {
         item = {
           ...item,
-          choices: item.options.map((item: any) => ({
-            ...item,
-            selected: isSelected(item.value)
+          choices: item.options.map((optionItem: any) => ({
+            ...optionItem,
+            selected: isSelected(optionItem.value)
           }))
         };
       }
@@ -58,10 +57,6 @@ export function useChoices({
     return opts;
   }, [options, value, required, multiple, placeholder]);
 
-  const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {
-    onChange?.(name, value);
-  }, 50);
-
   useEffect(() => {
     if (choicesRef.current) {
       if (multiple) {
@@ -71,7 +66,7 @@ export function useChoices({
         choicesRef.current.setChoices(opts as any, "value", "label", true);
       }
     }
-  }, [opts]);
+  }, [multiple, opts]);
 
   useEffect(() => {
     if (!choicesRef.current) {
@@ -82,9 +77,10 @@ export function useChoices({
         shouldSort = false,
         itemSelectText = "",
         callbackOnCreateTemplates
-      } = customProperties;
+      } = customProperties as any;
+
       choicesRef.current = new Choices(ref.current, {
-        ...customProperties,
+        ...(customProperties as any),
         allowHTML,
         silent,
         searchEnabled,
@@ -105,17 +101,17 @@ export function useChoices({
     }
 
     const addItem = ({ detail: { value: newValue } }: any) => {
-      onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);
+      onChange?.(name, multiple ? [...new Set([...(value as string[]), newValue])] : newValue);
     };
 
     const removeItem = ({ detail: { value: newValue } }: any) => {
       if (multiple) {
-        onChangeCallback(
+        onChange?.(
           name,
           (value as string[]).filter((v) => v !== newValue)
         );
       } else {
-        onChangeCallback(name, undefined as any);
+        onChange?.(name, undefined as any);
       }
     };
 
@@ -126,7 +122,7 @@ export function useChoices({
       choicesRef.current?.passedElement.element.removeEventListener("addItem", addItem);
       choicesRef.current?.passedElement.element.removeEventListener("removeItem", removeItem);
     };
-  }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);
+  }, [customProperties, disabled, multiple, name, onChange, opts, placeholder, searchEnabled, size, value]);
 
   return {
     ref,

package/src/molecules/table/filters/RangeFilter.tsx

@@ -16,6 +16,7 @@ export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, F
       <div className='flex space-x-2'>
         <div className='w-1/2'>
           <InputText
+            name={`${column.id}-min`}
             type='number'
             size='small'
             {...{ min, max, step }}
@@ -26,6 +27,7 @@ export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, F
         </div>
         <div className='w-1/2'>
           <InputText
+            name={`${column.id}-max`}
             type='number'
             size='small'
             {...{ min, max, step }}