@tsed/react-formio 3.0.0-rc.24 → 3.0.0-rc.26

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/forms/select/components/HtmlSelect.js

@@ -1,35 +1,35 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { c as h } from "../../../../chunks/clsx.js";
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import { c as x } from "../../../../chunks/clsx.js";
 import { registerComponent as v } from "../../../../registries/components.js";
-import { getEventValue as x } from "../../../../utils/getEventValue.js";
-import { cleanFormControlProps as S } from "../../form-control/FormControl.js";
-function s({ value: t, label: n, ...e }) {
-  return /* @__PURE__ */ o("option", { ...e, value: t, children: n });
+import { getEventValue as j } from "../../../../utils/getEventValue.js";
+import { cleanFormControlProps as C } from "../../form-control/FormControl.js";
+function i({ value: o, label: r, ...n }) {
+  return /* @__PURE__ */ e("option", { ...n, value: o, children: r });
 }
-function j({ name: t, id: n = t, size: e, value: a, multiple: c, onChange: l, options: i, placeholder: m, ...p }) {
-  const f = !!i[0].options;
+function S({ name: o, id: r = o, size: n, value: u, multiple: l, onChange: m, options: p, placeholder: s, ...a }) {
+  const f = !!p[0].options;
   return /* @__PURE__ */ g(
     "select",
     {
-      "data-testid": `select_${t}`,
-      ...S(p),
-      className: h("form-control", e && `form-control-${e}`),
-      name: t,
-      id: n,
-      multiple: c,
-      value: a || "",
-      onChange: (r) => {
-        l && l(t, x(r));
+      "data-testid": `select_${o}`,
+      ...C(a),
+      className: x("form-control", n && `form-control-${n}`),
+      name: o,
+      id: r,
+      multiple: l,
+      value: u || "",
+      onChange: (t) => {
+        m && m(o, j(t));
       },
       children: [
-        m && !c && /* @__PURE__ */ o("option", { value: "", disabled: !0, children: m }),
-        f ? i.map(({ label: r, options: d }) => /* @__PURE__ */ o("optgroup", { label: r, children: d.map((u) => /* @__PURE__ */ o(s, { ...u }, String(u.value))) }, r)) : i.map((r) => /* @__PURE__ */ o(s, { ...r }, String(r.value)))
+        s && !l && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: s }),
+        f ? p.map(({ label: t, options: c }, $) => /* @__PURE__ */ e("optgroup", { label: t, children: c.map((h, d) => /* @__PURE__ */ e(i, { ...h }, `${r}-optgroup-${d}`)) }, r + "-" + $)) : p.map((t, c) => /* @__PURE__ */ e(i, { ...t }, `${r}-option-${c}`))
       ]
     }
   );
 }
-v("Select.html5", j);
+v("Select.html5", S);
 export {
-  j as HTMLSelect
+  S as HTMLSelect
 };
 //# sourceMappingURL=HtmlSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HtmlSelect.js","sources":["../../../../../src/molecules/forms/select/components/HtmlSelect.tsx"],"sourcesContent":["import cx from \"clsx\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { getEventValue } from \"../../../../utils/getEventValue\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport { AllSelectProps, SelectOptionBaseProps } from \"../Select.interface\";\n\nfunction Option({ value, label, ...props }: SelectOptionBaseProps) {\n  return (\n    <option {...props} value={value as any}>\n      {label}\n    </option>\n  );\n}\n\nexport function HTMLSelect({ name, id = name, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps) {\n  const hasGroup = !!options[0].options;\n\n  return (\n    <select\n      data-testid={`select_${name}`}\n      {...cleanFormControlProps(props as any)}\n      className={cx(\"form-control\", size && `form-control-${size}`)}\n      name={name}\n      id={id}\n      multiple={multiple}\n      value={value || (\"\" as any)}\n      onChange={(event) => {\n        onChange && onChange(name, getEventValue(event));\n      }}\n    >\n      {placeholder && !multiple && (\n        <option value='' disabled>\n          {placeholder}\n        </option>\n      )}\n      {hasGroup\n        ? options.map(({ label, options }) => {\n            return (\n              <optgroup key={label} label={label}>\n                {options.map((props: SelectOptionBaseProps) => {\n                  return <Option key={String(props.value)} {...props} />;\n                })}\n              </optgroup>\n            );\n          })\n        : (options as SelectOptionBaseProps[]).map((props) => {\n            return <Option key={String(props.value)} {...props} />;\n          })}\n    </select>\n  );\n}\n\nregisterComponent(\"Select.html5\", HTMLSelect);\n"],"names":["Option","value","label","props","jsx","HTMLSelect","name","id","size","multiple","onChange","options","placeholder","hasGroup","jsxs","cleanFormControlProps","cx","event","getEventValue","registerComponent"],"mappings":";;;;;AAOA,SAASA,EAAO,EAAE,OAAAC,GAAO,OAAAC,GAAO,GAAGC,KAAgC;AACjE,SACE,gBAAAC,EAAC,UAAA,EAAQ,GAAGD,GAAO,OAAAF,GAChB,UAAAC,GACH;AAEJ;AAEO,SAASG,EAAW,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,MAAAE,GAAM,OAAAP,GAAO,UAAAQ,GAAU,UAAAC,GAAU,SAAAC,GAAS,aAAAC,GAAa,GAAGT,KAAyB;AAC/H,QAAMU,IAAW,CAAC,CAACF,EAAQ,CAAC,EAAE;AAE9B,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,UAAUR,CAAI;AAAA,MAC1B,GAAGS,EAAsBZ,CAAY;AAAA,MACtC,WAAWa,EAAG,gBAAgBR,KAAQ,gBAAgBA,CAAI,EAAE;AAAA,MAC5D,MAAAF;AAAA,MACA,IAAAC;AAAA,MACA,UAAAE;AAAA,MACA,OAAOR,KAAU;AAAA,MACjB,UAAU,CAACgB,MAAU;AACnB,QAAAP,KAAYA,EAASJ,GAAMY,EAAcD,CAAK,CAAC;AAAA,MACjD;AAAA,MAEC,UAAA;AAAA,QAAAL,KAAe,CAACH,KACf,gBAAAL,EAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAQ,EAAA,CACH;AAAA,QAEDC,IACGF,EAAQ,IAAI,CAAC,EAAE,OAAAT,GAAO,SAAAS,0BAEjB,YAAA,EAAqB,OAAAT,GACnB,UAAAS,EAAQ,IAAI,CAACR,wBACJH,GAAA,EAAkC,GAAGG,KAAzB,OAAOA,EAAM,KAAK,CAAc,CACrD,KAHYD,CAIf,CAEH,IACAS,EAAoC,IAAI,CAACR,wBAChCH,GAAA,EAAkC,GAAGG,KAAzB,OAAOA,EAAM,KAAK,CAAc,CACrD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGX;AAEAgB,EAAkB,gBAAgBd,CAAU;"}
+{"version":3,"file":"HtmlSelect.js","sources":["../../../../../src/molecules/forms/select/components/HtmlSelect.tsx"],"sourcesContent":["import cx from \"clsx\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { getEventValue } from \"../../../../utils/getEventValue\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport { AllSelectProps, SelectOptionBaseProps } from \"../Select.interface\";\n\nfunction Option({ value, label, ...props }: SelectOptionBaseProps) {\n  return (\n    <option {...props} value={value as any}>\n      {label}\n    </option>\n  );\n}\n\nexport function HTMLSelect({ name, id = name, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps) {\n  const hasGroup = !!options[0].options;\n\n  return (\n    <select\n      data-testid={`select_${name}`}\n      {...cleanFormControlProps(props as any)}\n      className={cx(\"form-control\", size && `form-control-${size}`)}\n      name={name}\n      id={id}\n      multiple={multiple}\n      value={value || (\"\" as any)}\n      onChange={(event) => {\n        onChange && onChange(name, getEventValue(event));\n      }}\n    >\n      {placeholder && !multiple && (\n        <option value='' disabled>\n          {placeholder}\n        </option>\n      )}\n      {hasGroup\n        ? options.map(({ label, options }, index) => {\n            return (\n              <optgroup key={id + \"-\" + index} label={label}>\n                {options.map((props: SelectOptionBaseProps, index: number) => {\n                  return <Option key={`${id}-optgroup-${index}`} {...props} />;\n                })}\n              </optgroup>\n            );\n          })\n        : (options as SelectOptionBaseProps[]).map((props, index) => {\n            return <Option key={`${id}-option-${index}`} {...props} />;\n          })}\n    </select>\n  );\n}\n\nregisterComponent(\"Select.html5\", HTMLSelect);\n"],"names":["Option","value","label","props","jsx","HTMLSelect","name","id","size","multiple","onChange","options","placeholder","hasGroup","jsxs","cleanFormControlProps","cx","event","getEventValue","index","registerComponent"],"mappings":";;;;;AAOA,SAASA,EAAO,EAAE,OAAAC,GAAO,OAAAC,GAAO,GAAGC,KAAgC;AACjE,SACE,gBAAAC,EAAC,UAAA,EAAQ,GAAGD,GAAO,OAAAF,GAChB,UAAAC,GACH;AAEJ;AAEO,SAASG,EAAW,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,MAAAE,GAAM,OAAAP,GAAO,UAAAQ,GAAU,UAAAC,GAAU,SAAAC,GAAS,aAAAC,GAAa,GAAGT,KAAyB;AAC/H,QAAMU,IAAW,CAAC,CAACF,EAAQ,CAAC,EAAE;AAE9B,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,UAAUR,CAAI;AAAA,MAC1B,GAAGS,EAAsBZ,CAAY;AAAA,MACtC,WAAWa,EAAG,gBAAgBR,KAAQ,gBAAgBA,CAAI,EAAE;AAAA,MAC5D,MAAAF;AAAA,MACA,IAAAC;AAAA,MACA,UAAAE;AAAA,MACA,OAAOR,KAAU;AAAA,MACjB,UAAU,CAACgB,MAAU;AACnB,QAAAP,KAAYA,EAASJ,GAAMY,EAAcD,CAAK,CAAC;AAAA,MACjD;AAAA,MAEC,UAAA;AAAA,QAAAL,KAAe,CAACH,KACf,gBAAAL,EAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAQ,EAAA,CACH;AAAA,QAEDC,IACGF,EAAQ,IAAI,CAAC,EAAE,OAAAT,GAAO,SAAAS,EAAAA,GAAWQ,MAE7B,gBAAAf,EAAC,cAAgC,OAAAF,GAC9B,UAAAS,EAAQ,IAAI,CAACR,GAA8BgB,MACnC,gBAAAf,EAACJ,KAAwC,GAAGG,EAAAA,GAA/B,GAAGI,CAAE,aAAaY,CAAK,EAAe,CAC3D,EAAA,GAHYZ,IAAK,MAAMY,CAI1B,CAEH,IACAR,EAAoC,IAAI,CAACR,GAAOgB,MACxC,gBAAAf,EAACJ,KAAsC,GAAGG,EAAAA,GAA7B,GAAGI,CAAE,WAAWY,CAAK,EAAe,CACzD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGX;AAEAC,EAAkB,gBAAgBf,CAAU;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-rc.24",
+  "version": "3.0.0-rc.26",
   "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.24",
-    "@tsed/typescript": "3.0.0-rc.24",
+    "@tsed/tailwind-formio": "3.0.0-rc.26",
+    "@tsed/typescript": "3.0.0-rc.26",
     "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/forms/select/components/HtmlSelect.tsx

@@ -35,17 +35,17 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
         </option>
       )}
       {hasGroup
-        ? options.map(({ label, options }) => {
+        ? options.map(({ label, options }, index) => {
             return (
-              <optgroup key={label} label={label}>
-                {options.map((props: SelectOptionBaseProps) => {
-                  return <Option key={String(props.value)} {...props} />;
+              <optgroup key={id + "-" + index} label={label}>
+                {options.map((props: SelectOptionBaseProps, index: number) => {
+                  return <Option key={`${id}-optgroup-${index}`} {...props} />;
                 })}
               </optgroup>
             );
           })
-        : (options as SelectOptionBaseProps[]).map((props) => {
-            return <Option key={String(props.value)} {...props} />;
+        : (options as SelectOptionBaseProps[]).map((props, index) => {
+            return <Option key={`${id}-option-${index}`} {...props} />;
           })}
     </select>
   );