shadcn-zod-formkit 1.9.2 → 1.10.0

package/dist/index.cjs

@@ -4524,11 +4524,12 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
     { value: 3, id: 3, name: "MOCK OPTION - PERMISO 3" },
     { value: 4, id: 4, name: "MOCK OPTION - PERMISO 4" }
   ];
-  const lista = input?.listConfig?.list?.every((item) => "name" in item) ? input.listConfig.list : mockInputOptions;
-  const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
-  const [value, setValue] = React3.useState(
-    input.value?.toString() ?? ""
+  const [lista, setLista] = React3.useState(
+    input?.listConfig?.list?.every((item) => "name" in item) ? input.listConfig.list : mockInputOptions
   );
+  const [loading, setLoading] = React3.useState(false);
+  const [value, setValue] = React3.useState(input.value?.toString() ?? "");
+  const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
   React3.useEffect(() => {
     const currentValue = form.getValues(input.name);
     if (!currentValue && input.value) {
@@ -4536,8 +4537,32 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
       setValue(input.value.toString());
     }
   }, [form, input.name, input.value]);
+  React3.useEffect(() => {
+    if (input.dependsOn && input.loadOptions) {
+      const subscription = form.watch(async (values) => {
+        const dependencyValue = values[input.dependsOn];
+        if (dependencyValue) {
+          try {
+            setLoading(true);
+            const newOptions = await input.loadOptions(dependencyValue);
+            setLista(newOptions);
+          } catch (err) {
+            console.error(`Error loading options for ${input.name}:`, err);
+            setLista([]);
+          } finally {
+            setLoading(false);
+          }
+        } else {
+          setLista([]);
+          form.setValue(input.name, "");
+        }
+      });
+      return () => subscription.unsubscribe?.();
+    }
+  }, [form, input.dependsOn, input.loadOptions, input.name]);
   const getValue = (item) => {
-    return (optionValue === "name" ? item.name.toString() : item.value.toString() ?? item.id).toString();
+    const val = optionValue === "name" ? item.name : item.value?.toString?.() ?? item.id?.toString();
+    return val?.toString() ?? "";
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
@@ -4555,15 +4580,29 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
           /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
             Select,
             {
-              disabled: input.disabled || isSubmitting,
+              disabled: input.disabled || isSubmitting || loading,
               onValueChange: (val) => {
                 field.onChange(val);
                 setValue(val);
+                if (input.listConfig?.onOptionChange) {
+                  const selectedItem = lista.find(
+                    (item) => getValue(item) === val
+                  );
+                  input.listConfig.onOptionChange(selectedItem);
+                }
               },
               value: currentValue || void 0,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-[60%] bg-black/10 dark:bg-white/25", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: input.placeHolder }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: lista.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)) })
+                /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-[60%] bg-black/10 dark:bg-white/25", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectValue,
+                  {
+                    placeholder: loading ? "Cargando..." : input.placeHolder ?? "Seleccionar"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+                  lista.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
+                  lista.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
+                ] })
               ]
             }
           ) })