@connect-soft/form-generator 1.1.0-alpha8 → 1.1.0-alpha9

package/dist/index.js

@@ -3407,6 +3407,167 @@ function createTemplateFields(fieldEntries) {
   return new Proxy({}, handler);
 }
 
+const FieldsContext = /*#__PURE__*/React.createContext(null);
+function FieldsProvider(t0) {
+  const $ = compilerRuntime.c(9);
+  const {
+    children,
+    fields,
+    namePrefix
+  } = t0;
+  let map;
+  if ($[0] !== fields || $[1] !== namePrefix) {
+    map = new Map();
+    const addFields = (items, prefix) => {
+      items.forEach(item => {
+        if ("fields" in item && Array.isArray(item.fields)) {
+          const arrayPrefix = prefix ? `${prefix}.${item.name}` : item.name;
+          addFields(item.fields, arrayPrefix);
+        } else {
+          const fieldName = prefix ? `${prefix}.${item.name}` : item.name;
+          map.set(fieldName, item);
+          if (prefix) {
+            map.set(item.name, item);
+          }
+        }
+      });
+    };
+    addFields(fields, namePrefix);
+    $[0] = fields;
+    $[1] = namePrefix;
+    $[2] = map;
+  } else {
+    map = $[2];
+  }
+  const fieldsMap = map;
+  let t1;
+  if ($[3] !== fieldsMap || $[4] !== namePrefix) {
+    t1 = {
+      fields: fieldsMap,
+      namePrefix
+    };
+    $[3] = fieldsMap;
+    $[4] = namePrefix;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const value = t1;
+  let t2;
+  if ($[6] !== children || $[7] !== value) {
+    t2 = jsxRuntime.jsx(FieldsContext.Provider, {
+      value,
+      children
+    });
+    $[6] = children;
+    $[7] = value;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function useFieldProps(name) {
+  const $ = compilerRuntime.c(23);
+  const context = React.useContext(FieldsContext);
+  const form = useFormContext();
+  if (!context) {
+    throw new Error("useFieldProps must be used within FormGenerator or FieldsProvider");
+  }
+  if (!form) {
+    throw new Error("useFieldProps must be used within a FormProvider context");
+  }
+  const {
+    fields,
+    namePrefix
+  } = context;
+  const fullName = namePrefix ? `${namePrefix}.${name}` : name;
+  let t0;
+  if ($[0] !== fields || $[1] !== fullName || $[2] !== name) {
+    t0 = fields.get(fullName) || fields.get(name);
+    $[0] = fields;
+    $[1] = fullName;
+    $[2] = name;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const field = t0;
+  if (!field) {
+    throw new Error(`Field "${name}" not found in form fields. ` + `Available fields: ${Array.from(fields.keys()).join(", ")}`);
+  }
+  let t1;
+  if ($[4] !== form.control || $[5] !== fullName) {
+    t1 = {
+      control: form.control,
+      name: fullName
+    };
+    $[4] = form.control;
+    $[5] = fullName;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const {
+    field: controllerField,
+    fieldState
+  } = useController(t1);
+  let t2;
+  if ($[7] !== field || $[8] !== fullName) {
+    t2 = {
+      ...field,
+      name: fullName
+    };
+    $[7] = field;
+    $[8] = fullName;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== fieldState.error || $[11] !== fieldState.invalid || $[12] !== fieldState.isDirty || $[13] !== fieldState.isTouched) {
+    t3 = {
+      invalid: fieldState.invalid,
+      error: fieldState.error,
+      isDirty: fieldState.isDirty,
+      isTouched: fieldState.isTouched
+    };
+    $[10] = fieldState.error;
+    $[11] = fieldState.invalid;
+    $[12] = fieldState.isDirty;
+    $[13] = fieldState.isTouched;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== controllerField.name || $[16] !== controllerField.onBlur || $[17] !== controllerField.onChange || $[18] !== controllerField.ref || $[19] !== controllerField.value || $[20] !== t2 || $[21] !== t3) {
+    t4 = {
+      name: controllerField.name,
+      value: controllerField.value,
+      onChange: controllerField.onChange,
+      onBlur: controllerField.onBlur,
+      ref: controllerField.ref,
+      field: t2,
+      fieldState: t3
+    };
+    $[15] = controllerField.name;
+    $[16] = controllerField.onBlur;
+    $[17] = controllerField.onChange;
+    $[18] = controllerField.ref;
+    $[19] = controllerField.value;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  return t4;
+}
+function useFieldsContext() {
+  return React.useContext(FieldsContext);
+}
+
 function deepMerge(target, source) {
   const result = {
     ...target
@@ -3517,10 +3678,7 @@ function buildDefaultValues(fields) {
   return values;
 }
 
-function hasSchema(props) {
-  return props.schema !== undefined;
-}
-function FormGeneratorImpl(props) {
+function FormGenerator(props) {
   const {
     fields,
     defaultValues,
@@ -3536,6 +3694,8 @@ function FormGeneratorImpl(props) {
     ref,
     validateTypes
   } = props;
+  const onSubmit = props.onSubmit;
+  const formRef = React.useRef(null);
   React.useMemo(() => {
     if (validateTypes) {
       const registeredTypes = getRegisteredFieldTypes();
@@ -3546,15 +3706,7 @@ function FormGeneratorImpl(props) {
       validateFieldTypes(fields, registeredTypes, options);
     }
   }, [fields, validateTypes]);
-  const userSchema = hasSchema(props) ? props.schema : undefined;
-  const onSubmit = props.onSubmit;
-  const formRef = React.useRef(null);
-  const schema = React.useMemo(() => {
-    if (userSchema) {
-      return userSchema;
-    }
-    return buildSchema(fields);
-  }, [fields, userSchema]);
+  const schema = React.useMemo(() => buildSchema(fields), [fields]);
   const mergedDefaultValues = React.useMemo(() => {
     const builtDefaults = buildDefaultValues(fields);
     return defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
@@ -3666,31 +3818,242 @@ function FormGeneratorImpl(props) {
   if (!children) {
     return jsxRuntime.jsx(FormProvider, {
       ...form,
-      children: jsxRuntime.jsxs("form", {
+      children: jsxRuntime.jsx(FieldsProvider, {
+        fields: fields,
+        children: jsxRuntime.jsxs("form", {
+          ref: formRef,
+          onSubmit: handleSubmit,
+          className: className,
+          children: [jsxRuntime.jsxs(FieldsWrapper, {
+            children: [regularFields.map((field_2, index_0) => jsxRuntime.jsx(FieldWrapper, {
+              name: field_2.name,
+              type: field_2.type,
+              className: field_2.className,
+              children: jsxRuntime.jsx(FieldRenderer, {
+                field: field_2
+              })
+            }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsxRuntime.jsx(FieldWrapper, {
+              name: arrayField.name,
+              type: "array",
+              className: arrayField.className,
+              children: jsxRuntime.jsx(ArrayFieldRenderer, {
+                field: arrayField
+              })
+            }, arrayField.name))]
+          }), jsxRuntime.jsx(SubmitButton, {
+            disabled: disabled || form.formState.isSubmitting,
+            isSubmitting: form.formState.isSubmitting,
+            children: submitText
+          })]
+        })
+      })
+    });
+  }
+  const renderProps = {
+    fields: templateFields,
+    arrays: Object.fromEntries(arrayFields.map(arrayField_0 => [arrayField_0.name, {
+      field: arrayField_0
+    }])),
+    buttons,
+    title,
+    description,
+    form: form,
+    isSubmitting: form.formState.isSubmitting,
+    isValid: form.formState.isValid,
+    isDirty: form.formState.isDirty,
+    renderField,
+    FieldWrapper,
+    FieldsWrapper
+  };
+  const renderFn = children;
+  return jsxRuntime.jsx(FormProvider, {
+    ...form,
+    children: jsxRuntime.jsx(FieldsProvider, {
+      fields: fields,
+      children: jsxRuntime.jsx("form", {
         ref: formRef,
         onSubmit: handleSubmit,
         className: className,
-        children: [jsxRuntime.jsxs(FieldsWrapper, {
-          children: [regularFields.map((field_2, index_0) => jsxRuntime.jsx(FieldWrapper, {
-            name: field_2.name,
-            type: field_2.type,
-            className: field_2.className,
-            children: jsxRuntime.jsx(FieldRenderer, {
-              field: field_2
-            })
-          }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsxRuntime.jsx(FieldWrapper, {
-            name: arrayField.name,
-            type: "array",
-            className: arrayField.className,
-            children: jsxRuntime.jsx(ArrayFieldRenderer, {
-              field: arrayField
-            })
-          }, arrayField.name))]
-        }), jsxRuntime.jsx(SubmitButton, {
-          disabled: disabled || form.formState.isSubmitting,
-          isSubmitting: form.formState.isSubmitting,
-          children: submitText
-        })]
+        children: renderFn(renderProps)
+      })
+    })
+  });
+}
+
+function typedField() {
+  return field => field;
+}
+function typedFields(fields) {
+  return fields;
+}
+function StrictFormGenerator(props) {
+  const {
+    schema,
+    fields,
+    onSubmit,
+    defaultValues,
+    className,
+    submitText = 'Submit',
+    disabled,
+    mode = 'onChange',
+    title,
+    description,
+    showReset = false,
+    resetText = 'Reset',
+    children,
+    ref,
+    validateTypes
+  } = props;
+  const formRef = React.useRef(null);
+  React.useMemo(() => {
+    if (validateTypes) {
+      const registeredTypes = getRegisteredFieldTypes();
+      const options = typeof validateTypes === 'object' ? validateTypes : {
+        throwOnError: false,
+        warn: true
+      };
+      validateFieldTypes(fields, registeredTypes, options);
+    }
+  }, [fields, validateTypes]);
+  const mergedDefaultValues = React.useMemo(() => {
+    const builtDefaults = buildDefaultValues(fields);
+    return defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
+  }, [fields, defaultValues]);
+  const form = useForm({
+    resolver: a(schema),
+    defaultValues: mergedDefaultValues,
+    mode
+  });
+  const handleSubmit = form.handleSubmit(async data => {
+    await onSubmit(data);
+  });
+  const handleReset = React.useCallback(() => {
+    form.reset(mergedDefaultValues);
+  }, [form, mergedDefaultValues]);
+  React.useImperativeHandle(ref, () => ({
+    setValues: values => {
+      Object.entries(values).forEach(([key, value]) => {
+        form.setValue(key, value, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+      });
+    },
+    getValues: () => form.getValues(),
+    reset: values_0 => {
+      if (values_0) {
+        form.reset(deepMerge(mergedDefaultValues, values_0));
+      } else {
+        form.reset(mergedDefaultValues);
+      }
+    },
+    submit: async () => {
+      await handleSubmit();
+    },
+    clearErrors: () => form.clearErrors(),
+    setError: (name, error) => form.setError(name, error),
+    isValid: () => form.formState.isValid,
+    isDirty: () => form.formState.isDirty,
+    form: form
+  }), [form, handleSubmit, mergedDefaultValues]);
+  const SubmitButton = getFormComponent('SubmitButton');
+  const FieldWrapper = getFormComponent('FieldWrapper');
+  const FieldsWrapper = getFormComponent('FieldsWrapper');
+  const {
+    regularFields,
+    arrayFields
+  } = React.useMemo(() => {
+    const regular = [];
+    const arrays = [];
+    fields.forEach(field => {
+      if (isArrayField(field)) {
+        arrays.push(field);
+      } else {
+        regular.push(field);
+      }
+    });
+    return {
+      regularFields: regular,
+      arrayFields: arrays
+    };
+  }, [fields]);
+  const fieldEntries = React.useMemo(() => {
+    const entries = new Map();
+    regularFields.forEach((field_0, index) => {
+      if (!field_0.hidden) {
+        const element = jsxRuntime.jsx(FieldWrapper, {
+          name: field_0.name,
+          type: field_0.type,
+          className: field_0.className,
+          children: jsxRuntime.jsx(FieldRenderer, {
+            field: field_0
+          })
+        }, field_0.name || `field-${index}`);
+        entries.set(field_0.name, {
+          field: field_0,
+          element,
+          accessed: false
+        });
+      }
+    });
+    return entries;
+  }, [regularFields, FieldWrapper]);
+  const templateFields = React.useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
+  const buttons = React.useMemo(() => {
+    const result = {
+      submit: jsxRuntime.jsx(SubmitButton, {
+        disabled: disabled || form.formState.isSubmitting,
+        isSubmitting: form.formState.isSubmitting,
+        children: submitText
+      }, "submit")
+    };
+    if (showReset) {
+      result.reset = jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: handleReset,
+        disabled: disabled,
+        children: resetText
+      }, "reset");
+    }
+    return result;
+  }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
+  const renderField = React.useCallback((field_1, options_0) => {
+    return jsxRuntime.jsx(FieldRenderer, {
+      field: field_1,
+      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
+    });
+  }, []);
+  if (!children) {
+    return jsxRuntime.jsx(FormProvider, {
+      ...form,
+      children: jsxRuntime.jsx(FieldsProvider, {
+        fields: fields,
+        children: jsxRuntime.jsxs("form", {
+          ref: formRef,
+          onSubmit: handleSubmit,
+          className: className,
+          children: [jsxRuntime.jsxs(FieldsWrapper, {
+            children: [regularFields.map((field_2, index_0) => jsxRuntime.jsx(FieldWrapper, {
+              name: field_2.name,
+              type: field_2.type,
+              className: field_2.className,
+              children: jsxRuntime.jsx(FieldRenderer, {
+                field: field_2
+              })
+            }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsxRuntime.jsx(FieldWrapper, {
+              name: arrayField.name,
+              type: "array",
+              className: arrayField.className,
+              children: jsxRuntime.jsx(ArrayFieldRenderer, {
+                field: arrayField
+              })
+            }, arrayField.name))]
+          }), jsxRuntime.jsx(SubmitButton, {
+            disabled: disabled || form.formState.isSubmitting,
+            isSubmitting: form.formState.isSubmitting,
+            children: submitText
+          })]
+        })
       })
     });
   }
@@ -3713,16 +4076,19 @@ function FormGeneratorImpl(props) {
   const renderFn = children;
   return jsxRuntime.jsx(FormProvider, {
     ...form,
-    children: jsxRuntime.jsx("form", {
-      ref: formRef,
-      onSubmit: handleSubmit,
-      className: className,
-      children: renderFn(renderProps)
+    children: jsxRuntime.jsx(FieldsProvider, {
+      fields: fields,
+      children: jsxRuntime.jsx("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: className,
+        children: renderFn(renderProps)
+      })
     })
   });
 }
-function FormGenerator(props) {
-  return FormGeneratorImpl(props);
+function createFieldFactory(_schema) {
+  return field => field;
 }
 
 Object.defineProperty(exports, "z", {
@@ -3732,13 +4098,16 @@ Object.defineProperty(exports, "z", {
 exports.ArrayFieldRenderer = ArrayFieldRenderer;
 exports.Controller = Controller;
 exports.FieldRenderer = FieldRenderer;
+exports.FieldsProvider = FieldsProvider;
 exports.FormGenerator = FormGenerator;
 exports.FormProvider = FormProvider;
+exports.StrictFormGenerator = StrictFormGenerator;
 exports.clearAllRegistries = clearAllRegistries;
 exports.clearFieldRegistry = clearFieldRegistry;
 exports.clearFormComponentRegistry = clearFormComponentRegistry;
 exports.createArrayField = createArrayField;
 exports.createField = createField;
+exports.createFieldFactory = createFieldFactory;
 exports.getFieldComponent = getFieldComponent;
 exports.getFormComponent = getFormComponent;
 exports.getFormComponents = getFormComponents;
@@ -3752,9 +4121,13 @@ exports.registerFormComponent = registerFormComponent;
 exports.registerFormComponents = registerFormComponents;
 exports.resetFormComponentRegistry = resetFormComponentRegistry;
 exports.strictFields = strictFields;
+exports.typedField = typedField;
+exports.typedFields = typedFields;
 exports.unregisterField = unregisterField;
 exports.useArrayField = useArrayField;
 exports.useFieldArray = useFieldArray;
+exports.useFieldProps = useFieldProps;
+exports.useFieldsContext = useFieldsContext;
 exports.useForm = useForm;
 exports.useFormContext = useFormContext;
 exports.useWatch = useWatch;