@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.12

package/dist/molecules/forms/input-text/InputText.js

@@ -3,7 +3,7 @@ import { useState as C, useEffect as I } from "react";
 import { c as x } from "../../../chunks/index.module.js";
 import { registerComponent as g, getComponent as v } from "../../../registries/components.js";
 import { getEventValue as b } from "../../../utils/getEventValue.js";
-import { FormControl as y, cleanFormControlProps as N } from "../form-control/FormControl.js";
+import { cleanFormControlProps as y, FormControl as N } from "../form-control/FormControl.js";
 function V(o) {
   const { name: e, id: n = e, value: t, onChange: r, required: a, type: u, placeholder: m, debounceDelay: c = 300, ...l } = o, [p, i] = C(t), f = x(r || (() => {
   }), c);
@@ -12,7 +12,7 @@ function V(o) {
   }, [t]), /* @__PURE__ */ s(
     "input",
     {
-      ...N(l, ["className"]),
+      ...y(l, ["className"]),
       type: u || "text",
       "data-testid": `input_${e || ""}`,
       className: "form-control",
@@ -32,7 +32,7 @@ g("Input", V);
 function q(o) {
   const { name: e, id: n = e, label: t, required: r, size: a, before: u, after: m, description: c, className: l } = o, p = v("Input");
   return /* @__PURE__ */ s(
-    y,
+    N,
     {
       id: n,
       name: e,

package/dist/molecules/forms/input-text/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","sources":["../../../../src/molecules/forms/input-text/InputText.tsx"],"sourcesContent":["import { ComponentType, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\nimport { getEventValue } from \"../../../utils/getEventValue\";\nimport { cleanFormControlProps, FormControl } from \"../form-control/FormControl\";\nimport { InputTextProps } from \"./InputText.interface\";\n\nfunction Input<Data = any>(props: InputTextProps<Data>) {\n  const { name, id = name, value, onChange, required, type, placeholder, debounceDelay = 300, ...otherProps } = props;\n\n  const [localValue, setValue] = useState(value);\n  const change = useDebouncedCallback(onChange || (() => {}), debounceDelay);\n\n  useEffect(() => {\n    setValue(value);\n  }, [value]);\n\n  return (\n    <input\n      {...cleanFormControlProps(otherProps, [\"className\"])}\n      type={type || \"text\"}\n      data-testid={`input_${name || \"\"}`}\n      className={\"form-control\"}\n      id={id}\n      name={name}\n      required={required}\n      value={(localValue || \"\") as any}\n      placeholder={placeholder}\n      onChange={(event) => {\n        const value = getEventValue(event);\n        setValue(value);\n\n        return change && change(name, value);\n      }}\n    />\n  );\n}\n\nregisterComponent(\"Input\", Input);\n\nexport function InputText<Data = any>(props: InputTextProps<Data>) {\n  const { name, id = name, label, required, size, before, after, description, className } = props;\n  const Input = getComponent<ComponentType<InputTextProps<Data>>>(\"Input\");\n\n  return (\n    <FormControl\n      id={id}\n      name={name}\n      label={label}\n      required={required}\n      description={description}\n      before={before}\n      after={after}\n      size={size}\n      className={className}\n    >\n      <Input {...props} />\n    </FormControl>\n  );\n}\n\nregisterComponent(\"InputText\", InputText);\n"],"names":["Input","props","name","id","value","onChange","required","type","placeholder","debounceDelay","otherProps","localValue","setValue","useState","change","useDebouncedCallback","useEffect","jsx","cleanFormControlProps","event","getEventValue","registerComponent","InputText","label","size","before","after","description","className","getComponent","FormControl"],"mappings":";;;;;;AAQA,SAASA,EAAkBC,GAA6B;AACtD,QAAM,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,OAAAE,GAAO,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,aAAAC,GAAa,eAAAC,IAAgB,KAAK,GAAGC,EAAe,IAAAT,GAExG,CAACU,GAAYC,CAAQ,IAAIC,EAAST,CAAK,GACvCU,IAASC,EAAqBV,MAAa,MAAM;AAAA,MAAKI,CAAa;AAEzE,SAAAO,EAAU,MAAM;AACd,IAAAJ,EAASR,CAAK;AAAA,EAAA,GACb,CAACA,CAAK,CAAC,GAGR,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGC,EAAsBR,GAAY,CAAC,WAAW,CAAC;AAAA,MACnD,MAAMH,KAAQ;AAAA,MACd,eAAa,SAASL,KAAQ,EAAE;AAAA,MAChC,WAAW;AAAA,MACX,IAAAC;AAAA,MACA,MAAAD;AAAA,MACA,UAAAI;AAAA,MACA,OAAQK,KAAc;AAAA,MACtB,aAAAH;AAAA,MACA,UAAU,CAACW,MAAU;AACbf,cAAAA,IAAQgB,EAAcD,CAAK;AACjC,eAAAP,EAASR,CAAK,GAEPU,KAAUA,EAAOZ,GAAME,CAAK;AAAA,MAAA;AAAA,IACrC;AAAA,EACF;AAEJ;AAEAiB,EAAkB,SAASrB,CAAK;AAEzB,SAASsB,EAAsBrB,GAA6B;AAC3D,QAAA,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,OAAAqB,GAAO,UAAAjB,GAAU,MAAAkB,GAAM,QAAAC,GAAQ,OAAAC,GAAO,aAAAC,GAAa,WAAAC,EAAc,IAAA3B,GACpFD,IAAQ6B,EAAkD,OAAO;AAGrE,SAAA,gBAAAZ;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,IAAA3B;AAAA,MACA,MAAAD;AAAA,MACA,OAAAqB;AAAA,MACA,UAAAjB;AAAA,MACA,aAAAqB;AAAA,MACA,QAAAF;AAAA,MACA,OAAAC;AAAA,MACA,MAAAF;AAAA,MACA,WAAAI;AAAA,MAEA,UAAC5B,gBAAAA,EAAAA,GAAA,EAAO,GAAGC,EAAO,CAAA;AAAA,IAAA;AAAA,EACpB;AAEJ;AAEAoB,EAAkB,aAAaC,CAAS;"}
+{"version":3,"file":"InputText.js","sources":["../../../../src/molecules/forms/input-text/InputText.tsx"],"sourcesContent":["import { ComponentType, useEffect, useState } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\nimport { getEventValue } from \"../../../utils/getEventValue\";\nimport { cleanFormControlProps, FormControl } from \"../form-control/FormControl\";\nimport { InputTextProps } from \"./InputText.interface\";\n\nfunction Input<Data = any>(props: InputTextProps<Data>) {\n  const { name, id = name, value, onChange, required, type, placeholder, debounceDelay = 300, ...otherProps } = props;\n\n  const [localValue, setValue] = useState(value);\n  const change = useDebouncedCallback(onChange || (() => {}), debounceDelay);\n\n  useEffect(() => {\n    setValue(value);\n  }, [value]);\n\n  return (\n    <input\n      {...cleanFormControlProps(otherProps, [\"className\"])}\n      type={type || \"text\"}\n      data-testid={`input_${name || \"\"}`}\n      className={\"form-control\"}\n      id={id}\n      name={name}\n      required={required}\n      value={(localValue || \"\") as any}\n      placeholder={placeholder}\n      onChange={(event) => {\n        const value = getEventValue(event);\n        setValue(value);\n\n        return change && change(name, value);\n      }}\n    />\n  );\n}\n\nregisterComponent(\"Input\", Input);\n\nexport function InputText<Data = any>(props: InputTextProps<Data>) {\n  const { name, id = name, label, required, size, before, after, description, className } = props;\n  const Input = getComponent<ComponentType<InputTextProps<Data>>>(\"Input\");\n\n  return (\n    <FormControl\n      id={id}\n      name={name}\n      label={label}\n      required={required}\n      description={description}\n      before={before}\n      after={after}\n      size={size}\n      className={className}\n    >\n      <Input {...props} />\n    </FormControl>\n  );\n}\n\nregisterComponent(\"InputText\", InputText);\n"],"names":["Input","props","name","id","value","onChange","required","type","placeholder","debounceDelay","otherProps","localValue","setValue","useState","change","useDebouncedCallback","useEffect","jsx","cleanFormControlProps","event","getEventValue","registerComponent","InputText","label","size","before","after","description","className","getComponent","FormControl"],"mappings":";;;;;;AAQA,SAASA,EAAkBC,GAA6B;AACtD,QAAM,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,OAAAE,GAAO,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,aAAAC,GAAa,eAAAC,IAAgB,KAAK,GAAGC,MAAeT,GAExG,CAACU,GAAYC,CAAQ,IAAIC,EAAST,CAAK,GACvCU,IAASC,EAAqBV,MAAa,MAAM;AAAA,EAAC,IAAII,CAAa;AAEzE,SAAAO,EAAU,MAAM;AACd,IAAAJ,EAASR,CAAK;AAAA,EAChB,GAAG,CAACA,CAAK,CAAC,GAGR,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGC,EAAsBR,GAAY,CAAC,WAAW,CAAC;AAAA,MACnD,MAAMH,KAAQ;AAAA,MACd,eAAa,SAASL,KAAQ,EAAE;AAAA,MAChC,WAAW;AAAA,MACX,IAAAC;AAAA,MACA,MAAAD;AAAA,MACA,UAAAI;AAAA,MACA,OAAQK,KAAc;AAAA,MACtB,aAAAH;AAAA,MACA,UAAU,CAACW,MAAU;AACnB,cAAMf,IAAQgB,EAAcD,CAAK;AACjC,eAAAP,EAASR,CAAK,GAEPU,KAAUA,EAAOZ,GAAME,CAAK;AAAA,MACrC;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAiB,EAAkB,SAASrB,CAAK;AAEzB,SAASsB,EAAsBrB,GAA6B;AACjE,QAAM,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,OAAAqB,GAAO,UAAAjB,GAAU,MAAAkB,GAAM,QAAAC,GAAQ,OAAAC,GAAO,aAAAC,GAAa,WAAAC,EAAA,IAAc3B,GACpFD,IAAQ6B,EAAkD,OAAO;AAEvE,SACE,gBAAAZ;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,IAAA3B;AAAA,MACA,MAAAD;AAAA,MACA,OAAAqB;AAAA,MACA,UAAAjB;AAAA,MACA,aAAAqB;AAAA,MACA,QAAAF;AAAA,MACA,OAAAC;AAAA,MACA,MAAAF;AAAA,MACA,WAAAI;AAAA,MAEA,UAAA,gBAAAX,EAACjB,GAAA,EAAO,GAAGC,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGxB;AAEAoB,EAAkB,aAAaC,CAAS;"}

package/dist/molecules/forms/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/molecules/forms/select/Select.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { FormControl as DefaultFormControl } from \"../form-control/FormControl\";\nimport { useOptions } from \"./hooks/useOptions\";\nimport { AllSelectProps } from \"./Select.interface\";\n\nlet uuid = 0;\n\nexport function Select<Data = string>(props: AllSelectProps<Data>) {\n  const { className, name = \"\", id = `field-select-${++uuid}`, label, description = \"\" } = props;\n\n  const options = useOptions<Data>({\n    ...props,\n    value: (Array.isArray(props.value) ? props.value : [props.value]) as any\n  });\n\n  const FormControl = getComponent<typeof DefaultFormControl>(\"FormControl\");\n  const Component = getComponent<ComponentType<AllSelectProps<Data>>>([\"Select.\" + props.layout, \"Select.html5\"]);\n\n  return (\n    <FormControl {...(props as any)} id={id} description={description} shadow={false} className={className} label={label}>\n      <Component {...props} options={options} name={name} id={id} />\n    </FormControl>\n  );\n}\n\nregisterComponent(\"Select\", Select);\n"],"names":["uuid","Select","props","className","name","id","label","description","options","useOptions","FormControl","getComponent","Component","registerComponent"],"mappings":";;;AAOA,IAAIA,IAAO;AAEJ,SAASC,EAAsBC,GAA6B;AACjE,QAAM,EAAE,WAAAC,GAAW,MAAAC,IAAO,IAAI,IAAAC,IAAK,gBAAgB,EAAEL,CAAI,IAAI,OAAAM,GAAO,aAAAC,IAAc,GAAO,IAAAL,GAEnFM,IAAUC,EAAiB;AAAA,IAC/B,GAAGP;AAAA,IACH,OAAQ,MAAM,QAAQA,EAAM,KAAK,IAAIA,EAAM,QAAQ,CAACA,EAAM,KAAK;AAAA,EAAA,CAChE,GAEKQ,IAAcC,EAAwC,aAAa,GACnEC,IAAYD,EAAkD,CAAC,YAAYT,EAAM,QAAQ,cAAc,CAAC;AAE9G,2BACGQ,GAAa,EAAA,GAAIR,GAAe,IAAAG,GAAQ,aAAAE,GAA0B,QAAQ,IAAO,WAAAJ,GAAsB,OAAAG,GACtG,4BAACM,GAAW,EAAA,GAAGV,GAAO,SAAAM,GAAkB,MAAAJ,GAAY,IAAAC,EAAQ,CAAA,GAC9D;AAEJ;AAEAQ,EAAkB,UAAUZ,CAAM;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/molecules/forms/select/Select.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { FormControl as DefaultFormControl } from \"../form-control/FormControl\";\nimport { useOptions } from \"./hooks/useOptions\";\nimport { AllSelectProps } from \"./Select.interface\";\n\nlet uuid = 0;\n\nexport function Select<Data = string>(props: AllSelectProps<Data>) {\n  const { className, name = \"\", id = `field-select-${++uuid}`, label, description = \"\" } = props;\n\n  const options = useOptions<Data>({\n    ...props,\n    value: (Array.isArray(props.value) ? props.value : [props.value]) as any\n  });\n\n  const FormControl = getComponent<typeof DefaultFormControl>(\"FormControl\");\n  const Component = getComponent<ComponentType<AllSelectProps<Data>>>([\"Select.\" + props.layout, \"Select.html5\"]);\n\n  return (\n    <FormControl {...(props as any)} id={id} description={description} shadow={false} className={className} label={label}>\n      <Component {...props} options={options} name={name} id={id} />\n    </FormControl>\n  );\n}\n\nregisterComponent(\"Select\", Select);\n"],"names":["uuid","Select","props","className","name","id","label","description","options","useOptions","FormControl","getComponent","Component","registerComponent"],"mappings":";;;AAOA,IAAIA,IAAO;AAEJ,SAASC,EAAsBC,GAA6B;AACjE,QAAM,EAAE,WAAAC,GAAW,MAAAC,IAAO,IAAI,IAAAC,IAAK,gBAAgB,EAAEL,CAAI,IAAI,OAAAM,GAAO,aAAAC,IAAc,GAAA,IAAOL,GAEnFM,IAAUC,EAAiB;AAAA,IAC/B,GAAGP;AAAA,IACH,OAAQ,MAAM,QAAQA,EAAM,KAAK,IAAIA,EAAM,QAAQ,CAACA,EAAM,KAAK;AAAA,EAAA,CAChE,GAEKQ,IAAcC,EAAwC,aAAa,GACnEC,IAAYD,EAAkD,CAAC,YAAYT,EAAM,QAAQ,cAAc,CAAC;AAE9G,2BACGQ,GAAA,EAAa,GAAIR,GAAe,IAAAG,GAAQ,aAAAE,GAA0B,QAAQ,IAAO,WAAAJ,GAAsB,OAAAG,GACtG,4BAACM,GAAA,EAAW,GAAGV,GAAO,SAAAM,GAAkB,MAAAJ,GAAY,IAAAC,GAAQ,GAC9D;AAEJ;AAEAQ,EAAkB,UAAUZ,CAAM;"}

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

@@ -1,95 +1,93 @@
-import { jsx as j } from "react/jsx-runtime";
-import k from "@formio/choices.js";
-import { c as B } from "../../../../chunks/index.js";
-import { useRef as L, useMemo as H, useEffect as x } from "react";
-import { c as N } from "../../../../chunks/index.module.js";
-import { registerComponent as R } from "../../../../registries/components.js";
-import { cleanFormControlProps as $ } from "../../form-control/FormControl.js";
-import { callbackOnCreateTemplates as F } from "./choices.template.js";
-function O({
+import { jsx as T } from "react/jsx-runtime";
+import w from "@formio/choices.js";
+import { c as z } from "../../../../chunks/index.js";
+import { useRef as E, useMemo as M, useEffect as b } from "react";
+import { c as g } from "../../../../chunks/index.module.js";
+import { registerComponent as j } from "../../../../registries/components.js";
+import { cleanFormControlProps as k } from "../../form-control/FormControl.js";
+import { callbackOnCreateTemplates as B } from "./choices.template.js";
+function H({
   name: r,
-  disabled: f,
-  multiple: l,
-  options: S,
-  placeholder: m,
-  searchEnabled: E = !0,
-  customProperties: b = {},
-  size: T,
-  value: i,
-  required: I,
-  onChange: d
+  disabled: i,
+  multiple: c,
+  options: f,
+  placeholder: l,
+  searchEnabled: d = !0,
+  customProperties: v = {},
+  size: I,
+  value: a,
+  required: h,
+  onChange: S
 }) {
-  const h = L(), e = L(), a = H(() => {
-    const s = (t) => [].concat(i).includes(t), c = S.map((t) => (t.options && (t = {
-      ...t,
-      choices: t.options.map((u) => ({
-        ...u,
-        selected: s(u.value)
+  const C = E(), t = E(), m = M(() => {
+    const o = (e) => [].concat(a).includes(e), n = f.map((e) => (e.options && (e = {
+      ...e,
+      choices: e.options.map((s) => ({
+        ...s,
+        selected: o(s.value)
       }))
     }), {
-      ...t,
-      selected: s(t.value)
+      ...e,
+      selected: o(e.value)
     }));
-    return !l && m ? [
+    return !c && l ? [
       {
-        disabled: I,
-        label: m,
+        disabled: h,
+        label: l,
         value: ""
       },
-      ...c
-    ] : c;
-  }, [S, i, I, l, m]), v = N((s, c) => {
-    d == null || d(s, c);
+      ...n
+    ] : n;
+  }, [f, a, h, c, l]), u = g((o, n) => {
+    S?.(o, n);
   }, 50);
-  return x(() => {
-    e.current && (l && e.current.clearStore(), e.current.setChoices(a, "value", "label", !0));
-  }, [a]), x(() => {
-    var t, u, p, C;
-    if (!e.current) {
-      const { allowHTML: o = !0, silent: n = !0, removeItemButton: w = !0, shouldSort: z = !1, itemSelectText: M = "" } = b;
-      e.current = new k(h.current, {
-        ...b,
-        allowHTML: o,
-        silent: n,
-        searchEnabled: E,
-        removeItemButton: w,
-        choices: a,
-        placeholder: m,
+  return b(() => {
+    t.current && (c && t.current.clearStore(), t.current.setChoices(m, "value", "label", !0));
+  }, [m]), b(() => {
+    if (!t.current) {
+      const { allowHTML: e = !0, silent: s = !0, removeItemButton: p = !0, shouldSort: L = !1, itemSelectText: x = "" } = v;
+      t.current = new w(C.current, {
+        ...v,
+        allowHTML: e,
+        silent: s,
+        searchEnabled: d,
+        removeItemButton: p,
+        choices: m,
+        placeholder: l,
         placeholderValue: "",
-        itemSelectText: M,
-        shouldSort: z,
-        callbackOnCreateTemplates: F
+        itemSelectText: x,
+        shouldSort: L,
+        callbackOnCreateTemplates: B
       });
     }
-    f ? (t = e.current) == null || t.disable() : (u = e.current) == null || u.enable();
-    const s = ({ detail: { value: o } }) => {
-      v(r, l ? [.../* @__PURE__ */ new Set([...new Set(i), o])] : o);
-    }, c = ({ detail: { value: o } }) => {
-      l ? v(
+    i ? t.current?.disable() : t.current?.enable();
+    const o = ({ detail: { value: e } }) => {
+      u(r, c ? [.../* @__PURE__ */ new Set([...new Set(a), e])] : e);
+    }, n = ({ detail: { value: e } }) => {
+      c ? u(
         r,
-        i.filter((n) => n !== o)
-      ) : v(r, void 0);
+        a.filter((s) => s !== e)
+      ) : u(r, void 0);
     };
-    return (p = e.current) == null || p.passedElement.element.addEventListener("addItem", s), (C = e.current) == null || C.passedElement.element.addEventListener("removeItem", c), () => {
-      var o, n;
-      (o = e.current) == null || o.passedElement.element.removeEventListener("addItem", s), (n = e.current) == null || n.passedElement.element.removeEventListener("removeItem", c);
+    return t.current?.passedElement.element.addEventListener("addItem", o), t.current?.passedElement.element.addEventListener("removeItem", n), () => {
+      t.current?.passedElement.element.removeEventListener("addItem", o), t.current?.passedElement.element.removeEventListener("removeItem", n);
     };
-  }, [f, d, a, m, E, T, i]), {
-    ref: h,
-    choicesRef: e
+  }, [i, S, m, l, d, I, a]), {
+    ref: C,
+    choicesRef: t
   };
 }
-function P(r) {
-  const { ref: f } = O({
+function N(r) {
+  const { ref: i } = H({
     ...r,
     searchEnabled: !r.disableSearch
   });
-  return /* @__PURE__ */ j(
+  return /* @__PURE__ */ T(
     "select",
     {
-      ref: f,
+      ref: i,
       "data-testid": `select_${r.name}`,
-      ...$(r, [
+      ...k(r, [
         "className",
         "size",
         "value",
@@ -103,13 +101,13 @@ function P(r) {
         "itemSelectText",
         "customProperties"
       ]),
-      className: B("form-control", r.size && `form-control-${r.size}`)
+      className: z("form-control", r.size && `form-control-${r.size}`)
     }
   );
 }
-R("Select.choicesjs", P);
+j("Select.choicesjs", N);
 export {
-  P as ChoiceSelect,
-  O as useChoices
+  N as ChoiceSelect,
+  H 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 \"@formio/choices.js\";\nimport cx from \"classnames\";\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 } 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, \"value\", \"label\", true);\n      } else {\n        choicesRef.current.setChoices(opts, \"value\", \"label\", true);\n      }\n    }\n  }, [opts]);\n\n  useEffect(() => {\n    if (!choicesRef.current) {\n      const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = \"\" } = 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\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","Choices","callbackOnCreateTemplates","_a","_b","addItem","newValue","removeItem","v","_c","_d","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 \"@formio/choices.js\";\nimport cx from \"classnames\";\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 } 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, \"value\", \"label\", true);\n      } else {\n        choicesRef.current.setChoices(opts, \"value\", \"label\", true);\n      }\n    }\n  }, [opts]);\n\n  useEffect(() => {\n    if (!choicesRef.current) {\n      const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = \"\" } = 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\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","Choices","callbackOnCreateTemplates","addItem","newValue","removeItem","v","ChoiceSelect","props","jsx","cleanFormControlProps","cx","registerComponent"],"mappings":"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"}

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 \"classnames\";\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,SACG,gBAAAC,EAAA,UAAA,EAAQ,GAAGD,GAAO,OAAAF,GAChB,UACHC,GAAA;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;AAG5B,SAAA,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,QAAeL,KAAA,CAACH,KACd,gBAAAL,EAAA,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UACHQ,EAAA,CAAA;AAAA,QAEDC,IACGF,EAAQ,IAAI,CAAC,EAAE,OAAAT,GAAO,SAAAS,0BAEjB,YAAqB,EAAA,OAAAT,GACnB,UAAAS,EAAQ,IAAI,CAACR,wBACJH,GAAkC,EAAA,GAAGG,KAAzB,OAAOA,EAAM,KAAK,CAAc,CACrD,KAHYD,CAIf,CAEH,IACAS,EAAoC,IAAI,CAACR,wBAChCH,GAAkC,EAAA,GAAGG,KAAzB,OAAOA,EAAM,KAAK,CAAc,CACrD;AAAA,MAAA;AAAA,IAAA;AAAA,EACP;AAEJ;AAEAgB,EAAkB,gBAAgBd,CAAU;"}
+{"version":3,"file":"HtmlSelect.js","sources":["../../../../../src/molecules/forms/select/components/HtmlSelect.tsx"],"sourcesContent":["import cx from \"classnames\";\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;"}

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

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import m from "react-select";
+import u from "react-select";
 import { i as s } from "../../../../chunks/react-select-animated.esm.js";
-import { registerComponent as f } from "../../../../registries/components.js";
-const d = s();
-function v(e, a) {
+import { registerComponent as m } from "../../../../registries/components.js";
+const f = s();
+function d(e, a) {
   const t = [].concat(e);
   return a.flatMap((n) => {
     if (t.includes(n.value))
@@ -12,13 +12,13 @@ function v(e, a) {
       return n.options.filter((l) => t.includes(l.value));
   }).filter(Boolean);
 }
-function h(e, a) {
+function v(e, a) {
   return a ? [].concat(e).filter(Boolean).map((t) => t.value) : e.value;
 }
-function b(e) {
-  const { placeholder: a, options: t, multiple: n, searchEnabled: l = !0, customProperties: o = {} } = e, i = v(e.value, e.options);
+function h(e) {
+  const { placeholder: a, options: t, multiple: n, searchEnabled: l = !0, customProperties: o = {} } = e, i = d(e.value, e.options);
   return /* @__PURE__ */ r(
-    m,
+    u,
     {
       ...o,
       id: e.id,
@@ -26,21 +26,20 @@ function b(e) {
       className: "react-select-container",
       classNamePrefix: "react-select",
       name: e.name || "",
-      components: d,
+      components: f,
       options: t,
       isDisabled: e.disabled,
       isSearchable: l,
       isMulti: e.multiple,
       value: n ? i : i[0],
-      onChange: (u) => {
-        var c;
-        (c = e.onChange) == null || c.call(e, e.name, h(u, e.multiple));
+      onChange: (c) => {
+        e.onChange?.(e.name, v(c, e.multiple));
       }
     }
   );
 }
-f("Select.react", b);
+m("Select.react", h);
 export {
-  b as ReactSelect
+  h as ReactSelect
 };
 //# sourceMappingURL=ReactSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactSelect.js","sources":["../../../../../src/molecules/forms/select/components/ReactSelect.tsx"],"sourcesContent":["import Select, { OptionsOrGroups } from \"react-select\";\nimport makeAnimated from \"react-select/animated\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { AllSelectProps } from \"../Select.interface\";\n\nconst animatedComponents = makeAnimated();\n\nfunction findValues(value: string | string[], options: AllSelectProps[\"options\"][0]) {\n  const localValue: string[] = [].concat(value as never);\n\n  return options\n    .flatMap((item: any) => {\n      if (localValue.includes(item.value)) {\n        return item;\n      }\n\n      if (item.options) {\n        return item.options.filter((option: any) => localValue.includes(option.value));\n      }\n    })\n    .filter(Boolean);\n}\n\nfunction mapValues(value: { label: string; value: never[] } | null, multiple?: boolean) {\n  return multiple\n    ? []\n        .concat(value as never)\n        .filter(Boolean)\n        .map((v: { value: unknown }) => v.value)\n    : (value as any).value;\n}\n\nexport function ReactSelect(props: AllSelectProps) {\n  const { placeholder, options, multiple, searchEnabled = true, customProperties = {} } = props;\n\n  const values = findValues(props.value!, props.options);\n\n  return (\n    <Select<{ label: string; value: never | never[] }>\n      {...customProperties}\n      id={props.id}\n      placeholder={placeholder}\n      className='react-select-container'\n      classNamePrefix='react-select'\n      name={props.name || \"\"}\n      components={animatedComponents}\n      options={options as OptionsOrGroups<any, any>}\n      isDisabled={props.disabled}\n      isSearchable={searchEnabled}\n      isMulti={props.multiple as false}\n      value={multiple ? values : values[0]}\n      onChange={(value) => {\n        props.onChange?.(props.name, mapValues(value, props.multiple));\n      }}\n    />\n  );\n}\n\nregisterComponent(\"Select.react\", ReactSelect);\n"],"names":["animatedComponents","makeAnimated","findValues","value","options","localValue","item","option","mapValues","multiple","v","ReactSelect","props","placeholder","searchEnabled","customProperties","values","jsx","Select","_a","registerComponent"],"mappings":";;;;AAMA,MAAMA,IAAqBC,EAAa;AAExC,SAASC,EAAWC,GAA0BC,GAAuC;AACnF,QAAMC,IAAuB,CAAA,EAAG,OAAOF,CAAc;AAE9C,SAAAC,EACJ,QAAQ,CAACE,MAAc;AACtB,QAAID,EAAW,SAASC,EAAK,KAAK;AACzB,aAAAA;AAGT,QAAIA,EAAK;AACA,aAAAA,EAAK,QAAQ,OAAO,CAACC,MAAgBF,EAAW,SAASE,EAAO,KAAK,CAAC;AAAA,EAC/E,CACD,EACA,OAAO,OAAO;AACnB;AAEA,SAASC,EAAUL,GAAiDM,GAAoB;AACtF,SAAOA,IACH,CACG,EAAA,OAAON,CAAc,EACrB,OAAO,OAAO,EACd,IAAI,CAACO,MAA0BA,EAAE,KAAK,IACxCP,EAAc;AACrB;AAEO,SAASQ,EAAYC,GAAuB;AAC3C,QAAA,EAAE,aAAAC,GAAa,SAAAT,GAAS,UAAAK,GAAU,eAAAK,IAAgB,IAAM,kBAAAC,IAAmB,CAAC,EAAA,IAAMH,GAElFI,IAASd,EAAWU,EAAM,OAAQA,EAAM,OAAO;AAGnD,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,IAAIH,EAAM;AAAA,MACV,aAAAC;AAAA,MACA,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,MAAMD,EAAM,QAAQ;AAAA,MACpB,YAAYZ;AAAA,MACZ,SAAAI;AAAA,MACA,YAAYQ,EAAM;AAAA,MAClB,cAAcE;AAAA,MACd,SAASF,EAAM;AAAA,MACf,OAAOH,IAAWO,IAASA,EAAO,CAAC;AAAA,MACnC,UAAU,CAACb,MAAU;;AACnB,SAAAgB,IAAAP,EAAM,aAAN,QAAAO,EAAA,KAAAP,GAAiBA,EAAM,MAAMJ,EAAUL,GAAOS,EAAM,QAAQ;AAAA,MAAC;AAAA,IAC/D;AAAA,EACF;AAEJ;AAEAQ,EAAkB,gBAAgBT,CAAW;"}
+{"version":3,"file":"ReactSelect.js","sources":["../../../../../src/molecules/forms/select/components/ReactSelect.tsx"],"sourcesContent":["import Select, { OptionsOrGroups } from \"react-select\";\nimport makeAnimated from \"react-select/animated\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { AllSelectProps } from \"../Select.interface\";\n\nconst animatedComponents = makeAnimated();\n\nfunction findValues(value: string | string[], options: AllSelectProps[\"options\"][0]) {\n  const localValue: string[] = [].concat(value as never);\n\n  return options\n    .flatMap((item: any) => {\n      if (localValue.includes(item.value)) {\n        return item;\n      }\n\n      if (item.options) {\n        return item.options.filter((option: any) => localValue.includes(option.value));\n      }\n    })\n    .filter(Boolean);\n}\n\nfunction mapValues(value: { label: string; value: never[] } | null, multiple?: boolean) {\n  return multiple\n    ? []\n        .concat(value as never)\n        .filter(Boolean)\n        .map((v: { value: unknown }) => v.value)\n    : (value as any).value;\n}\n\nexport function ReactSelect(props: AllSelectProps) {\n  const { placeholder, options, multiple, searchEnabled = true, customProperties = {} } = props;\n\n  const values = findValues(props.value!, props.options);\n\n  return (\n    <Select<{ label: string; value: never | never[] }>\n      {...customProperties}\n      id={props.id}\n      placeholder={placeholder}\n      className='react-select-container'\n      classNamePrefix='react-select'\n      name={props.name || \"\"}\n      components={animatedComponents}\n      options={options as OptionsOrGroups<any, any>}\n      isDisabled={props.disabled}\n      isSearchable={searchEnabled}\n      isMulti={props.multiple as false}\n      value={multiple ? values : values[0]}\n      onChange={(value) => {\n        props.onChange?.(props.name, mapValues(value, props.multiple));\n      }}\n    />\n  );\n}\n\nregisterComponent(\"Select.react\", ReactSelect);\n"],"names":["animatedComponents","makeAnimated","findValues","value","options","localValue","item","option","mapValues","multiple","v","ReactSelect","props","placeholder","searchEnabled","customProperties","values","jsx","Select","registerComponent"],"mappings":";;;;AAMA,MAAMA,IAAqBC,EAAA;AAE3B,SAASC,EAAWC,GAA0BC,GAAuC;AACnF,QAAMC,IAAuB,CAAA,EAAG,OAAOF,CAAc;AAErD,SAAOC,EACJ,QAAQ,CAACE,MAAc;AACtB,QAAID,EAAW,SAASC,EAAK,KAAK;AAChC,aAAOA;AAGT,QAAIA,EAAK;AACP,aAAOA,EAAK,QAAQ,OAAO,CAACC,MAAgBF,EAAW,SAASE,EAAO,KAAK,CAAC;AAAA,EAEjF,CAAC,EACA,OAAO,OAAO;AACnB;AAEA,SAASC,EAAUL,GAAiDM,GAAoB;AACtF,SAAOA,IACH,CAAA,EACG,OAAON,CAAc,EACrB,OAAO,OAAO,EACd,IAAI,CAACO,MAA0BA,EAAE,KAAK,IACxCP,EAAc;AACrB;AAEO,SAASQ,EAAYC,GAAuB;AACjD,QAAM,EAAE,aAAAC,GAAa,SAAAT,GAAS,UAAAK,GAAU,eAAAK,IAAgB,IAAM,kBAAAC,IAAmB,CAAA,EAAC,IAAMH,GAElFI,IAASd,EAAWU,EAAM,OAAQA,EAAM,OAAO;AAErD,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,IAAIH,EAAM;AAAA,MACV,aAAAC;AAAA,MACA,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,MAAMD,EAAM,QAAQ;AAAA,MACpB,YAAYZ;AAAA,MACZ,SAAAI;AAAA,MACA,YAAYQ,EAAM;AAAA,MAClB,cAAcE;AAAA,MACd,SAASF,EAAM;AAAA,MACf,OAAOH,IAAWO,IAASA,EAAO,CAAC;AAAA,MACnC,UAAU,CAACb,MAAU;AACnB,QAAAS,EAAM,WAAWA,EAAM,MAAMJ,EAAUL,GAAOS,EAAM,QAAQ,CAAC;AAAA,MAC/D;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAO,EAAkB,gBAAgBR,CAAW;"}