@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/molecules/forms/select/Select.interface.d.ts

@@ -0,0 +1,38 @@
+import { SelectHTMLAttributes } from 'react';
+import { FormControlProps } from '../form-control/FormControl';
+export interface SelectOptionBaseProps<Data = any> extends Record<string, any> {
+    label: string | JSX.Element;
+    value: string;
+    id?: string;
+    disabled?: boolean;
+    note?: string | JSX.Element;
+    group?: string;
+    data?: Data;
+    template?: (item: SelectOptionProps<Data>) => JSX.Element;
+}
+export interface SelectOptionProps<Data = string> extends SelectOptionBaseProps<Data> {
+    options?: SelectOptionProps<Data>[];
+}
+export interface SelectProps<Data = string> extends FormControlProps<Data, SelectHTMLAttributes<HTMLSelectElement>> {
+    layout?: "html5" | "react" | "choicesjs";
+    /**
+     * Error message
+     */
+    errorMessage?: string;
+    readonly?: boolean;
+    disableSearch?: boolean;
+    searchEnabled?: boolean;
+    customProperties?: Record<string, any>;
+    options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+    /**
+     * @deprecated
+     */
+    choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+}
+export interface SelectSingle<Data = string> extends SelectProps<Data> {
+    multiple?: false | undefined;
+}
+export interface SelectMultiple<Data = string> extends SelectProps<Data[]> {
+    multiple: true;
+}
+export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Select.interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.interface.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { registerComponent as s, getComponent as l } from "../../../registries/components.js";
+import { useOptions as d } from "./hooks/useOptions.js";
+let f = 0;
+function C(e) {
+  const { className: n, name: i = "", id: t = `field-select-${++f}`, label: m, description: r = "" } = e, a = d({
+    ...e,
+    value: Array.isArray(e.value) ? e.value : [e.value]
+  }), c = l("FormControl"), u = l(["Select." + e.layout, "Select.html5"]);
+  return /* @__PURE__ */ o(c, { ...e, id: t, description: r, shadow: !1, className: n, label: m, children: /* @__PURE__ */ o(u, { ...e, options: a, name: i, id: t }) });
+}
+s("Select", C);
+export {
+  C as Select
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +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;"}

package/dist/molecules/forms/select/all.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './Select.interface';

package/dist/molecules/forms/select/all.js

@@ -0,0 +1,9 @@
+import "../form-control/FormControl.js";
+import "./components/ReactSelect.js";
+import "./components/HtmlSelect.js";
+import "./components/ChoicesSelect.js";
+import { Select as e } from "./Select.js";
+export {
+  e as Select
+};
+//# sourceMappingURL=all.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/molecules/forms/select/components/ChoicesSelect.d.ts

@@ -0,0 +1,7 @@
+import { default as Choices } from '@formio/choices.js';
+import { AllSelectProps } from '../Select.interface';
+export declare function useChoices({ name, disabled, multiple, options, placeholder, searchEnabled, customProperties, size, value, required, onChange }: AllSelectProps): {
+    ref: import('react').MutableRefObject<any>;
+    choicesRef: import('react').MutableRefObject<Choices | undefined>;
+};
+export declare function ChoiceSelect(props: AllSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,115 @@
+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({
+  name: r,
+  disabled: f,
+  multiple: l,
+  options: S,
+  placeholder: m,
+  searchEnabled: E = !0,
+  customProperties: b = {},
+  size: T,
+  value: i,
+  required: I,
+  onChange: d
+}) {
+  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)
+      }))
+    }), {
+      ...t,
+      selected: s(t.value)
+    }));
+    return !l && m ? [
+      {
+        disabled: I,
+        label: m,
+        value: ""
+      },
+      ...c
+    ] : c;
+  }, [S, i, I, l, m]), v = N((s, c) => {
+    d == null || d(s, c);
+  }, 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,
+        placeholderValue: "",
+        itemSelectText: M,
+        shouldSort: z,
+        callbackOnCreateTemplates: F
+      });
+    }
+    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(
+        r,
+        i.filter((n) => n !== o)
+      ) : v(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);
+    };
+  }, [f, d, a, m, E, T, i]), {
+    ref: h,
+    choicesRef: e
+  };
+}
+function P(r) {
+  const { ref: f } = O({
+    ...r,
+    searchEnabled: !r.disableSearch
+  });
+  return /* @__PURE__ */ j(
+    "select",
+    {
+      ref: f,
+      "data-testid": `select_${r.name}`,
+      ...$(r, [
+        "className",
+        "size",
+        "value",
+        "options",
+        "placeholder",
+        "onChange",
+        "allowHTML",
+        "silent",
+        "removeItemButton",
+        "shouldSort",
+        "itemSelectText",
+        "customProperties"
+      ]),
+      className: B("form-control", r.size && `form-control-${r.size}`)
+    }
+  );
+}
+R("Select.choicesjs", P);
+export {
+  P as ChoiceSelect,
+  O as useChoices
+};
+//# sourceMappingURL=ChoicesSelect.js.map

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

@@ -0,0 +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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"}

package/dist/molecules/forms/select/components/HtmlSelect.d.ts

@@ -0,0 +1,2 @@
+import { AllSelectProps } from '../Select.interface';
+export declare function HTMLSelect({ name, id, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +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;"}

package/dist/molecules/forms/select/components/ReactSelect.d.ts

@@ -0,0 +1,2 @@
+import { AllSelectProps } from '../Select.interface';
+export declare function ReactSelect(props: AllSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import m 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) {
+  const t = [].concat(e);
+  return a.flatMap((n) => {
+    if (t.includes(n.value))
+      return n;
+    if (n.options)
+      return n.options.filter((l) => t.includes(l.value));
+  }).filter(Boolean);
+}
+function h(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);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      ...o,
+      id: e.id,
+      placeholder: a,
+      className: "react-select-container",
+      classNamePrefix: "react-select",
+      name: e.name || "",
+      components: d,
+      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));
+      }
+    }
+  );
+}
+f("Select.react", b);
+export {
+  b as ReactSelect
+};
+//# sourceMappingURL=ReactSelect.js.map

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

@@ -0,0 +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;"}

package/dist/molecules/forms/select/components/choices.template.d.ts

@@ -0,0 +1,7 @@
+export declare function callbackOnCreateTemplates(this: {
+    config: {
+        itemSelectText: string;
+    };
+}, strToEl: (template: string) => any): {
+    choice: (...args: any) => any;
+};