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

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.25",
   "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.25",
+    "@tsed/typescript": "3.0.0-rc.25",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

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>
   );