kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/form/Form.tsx

@@ -1,477 +1,477 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import { Select } from "../select/Select"; // <--- ton composant
-import "./form.css";
-import {
-  FormInterface,
-  FormMode,
-  FormSection,
-  FormValuesInterface,
-} from "./form.interface";
-import { Input } from "./input/Input";
-import { InputPrice } from "./inputPrice/InputPrice";
-import { TextArea } from "./textArea/TextArea";
-import { Col } from "../grid/col/Col";
-import { Row } from "../grid/row/Row";
-import { GridBreakpoints, GridResponsive } from "../grid/grid.interface";
-import { TypeInputEnum } from "./form.enum";
-import { AddressSearch } from "../addressSearch/AddressSearch";
-
-const euroFormatter = new Intl.NumberFormat("fr-FR", {
-  style: "currency",
-  currency: "EUR",
-});
-
-type FormFieldContainerProps = {
-  field: FormInterface;
-  gridEnabled: boolean;
-  children: React.ReactNode;
-};
-
-const FormFieldContainer = ({
-  field,
-  gridEnabled,
-  children,
-}: FormFieldContainerProps) =>
-  gridEnabled ? <Col {...field.col}>{children}</Col> : <>{children}</>;
-
-export type FormProps<
-  T extends { [key: string]: string | number | boolean | Date | string[] }
-> = {
-  id?: string;
-  className?: string;
-  title?: string;
-  hideSubmit?: boolean;
-  autoComplete?: string;
-  children?: React.ReactNode;
-  initialForm?: FormInterface[];
-  sections?: FormSection[];
-  disabledSubmit?: boolean;
-  mode?: FormMode;
-  /** Largeur sur laquelle se basent les breakpoints des champs (col), défaut : "app" */
-  responsive?: GridResponsive;
-  /** Place le bouton submit dans la grid (dernière ligne) avec ces tailles de col.
-   *  Ignoré si les champs n'utilisent pas la grid : le bouton reste dans le footer. */
-  submitCol?: GridBreakpoints;
-  onSubmit?: (values: FormValuesInterface<T>) => void;
-  onChange?: (values: FormValuesInterface<T>) => void;
-};
-
-export const DynamicForm = forwardRef(
-  <T extends { [key: string]: string | number | boolean | Date | string[] }>(
-    {
-      initialForm,
-      sections,
-      title,
-      onSubmit,
-      id,
-      children,
-      autoComplete,
-      onChange,
-      hideSubmit,
-      disabledSubmit = false,
-      mode = "edit",
-      className,
-      responsive,
-      submitCol,
-    }: FormProps<T>,
-    ref: React.Ref<{
-      clearInput?: (name: string) => void;
-      resetForm?: () => void;
-      focusInitialElement?: () => void;
-      getValues?: () => FormValuesInterface<T>;
-      updateFormValue?: (values: FormValuesInterface<T>) => void;
-      setBtnDisabledSubmit?: (disabled: boolean) => void;
-    }>
-  ) => {
-    const formFields = sections
-      ? sections.reduce<FormInterface[]>(
-        (fields, section) => fields.concat(section.fields),
-        [],
-      )
-      : (initialForm ?? []);
-    const [btnDisabledSubmit, setBtnDisabledSubmit] = useState(disabledSubmit);
-    const [values, setValues] = useState<FormValuesInterface<T>>(() => {
-      const initialValues: FormValuesInterface<T> =
-        {} as FormValuesInterface<T>;
-      formFields.forEach((field) => {
-        (initialValues as any)[field.name] = field.value ?? "";
-      });
-      return initialValues;
-    });
-
-    const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
-
-    /** Gestion des <input> */
-    const handleChangeInput = useCallback(
-      (
-        event: React.ChangeEvent<HTMLInputElement>,
-        forminterface: FormInterface
-      ) => {
-        const { name, type, checked, value } = event.target;
-        const newValue = type === "checkbox" ? checked : value;
-
-        if (forminterface.onChange) {
-          forminterface.onChange(newValue, name);
-        }
-
-        setValues((prevValues) => {
-          const updatedValues = { ...prevValues, [name]: newValue };
-          if (onChange) {
-            onChange(updatedValues);
-          }
-          return updatedValues;
-        });
-      },
-      [onChange]
-    );
-    const handleChangeTextArea = useCallback(
-      (name: string, value: string, forminterface: FormInterface) => {
-        if (forminterface.onChange) {
-          forminterface.onChange(value, name);
-        }
-
-        setValues((prevValues) => {
-          const updatedValues = { ...prevValues, [name]: value };
-          if (onChange) {
-            onChange(updatedValues);
-          }
-          return updatedValues;
-        });
-      },
-      [onChange]
-    );
-    /** Gestion des <select> */
-    const handleChangeSelect = useCallback(
-      (
-        newValue: string | string[],
-        name: string,
-        forminterface: FormInterface
-      ) => {
-        if (forminterface.onChange) {
-          forminterface.onChange(newValue, name);
-        }
-
-        setValues((prevValues) => {
-          const updatedValues = { ...prevValues, [name]: newValue };
-          if (onChange) onChange(updatedValues);
-          return updatedValues;
-        });
-      },
-      [onChange]
-    );
-
-    const handleSubmit = useCallback(
-      (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onSubmit) {
-          onSubmit(values);
-        }
-      },
-      [onSubmit, values]
-    );
-
-    const resetForm = () => {
-      setValues(() => {
-        const resetValues: FormValuesInterface<T> =
-          {} as FormValuesInterface<T>;
-        formFields.forEach((field) => {
-          (resetValues as any)[field.name] = field.value ?? "";
-        });
-        return resetValues;
-      });
-    };
-
-    const clearInput = useCallback((name: string) => {
-      setValues((prevValues) => ({
-        ...prevValues,
-        [name]: "",
-      }));
-    }, []);
-
-    const focusInitialElement = () => {
-      const focusedField = formFields.find((field) => field.focus);
-      if (focusedField && inputRefs.current[focusedField.name]) {
-        setTimeout(() => {
-          inputRefs.current[focusedField.name]?.select();
-        }, 500);
-      }
-    };
-
-    const getValues = () => values;
-
-    const updateFormValue: (values: FormValuesInterface<T>) => void = (
-      values
-    ) => {
-      setValues((prevValues) => ({
-        ...prevValues,
-        ...values,
-      }));
-    };
-
-    const updateValues = useCallback(
-      (updatedValues: FormValuesInterface<T>) => {
-        setValues((previousValues) => {
-          const nextValues = { ...previousValues, ...updatedValues };
-          onChange?.(nextValues);
-          return nextValues;
-        });
-      },
-      [onChange],
-    );
-
-    useImperativeHandle(ref, () => ({
-      resetForm,
-      clearInput,
-      focusInitialElement,
-      getValues,
-      updateFormValue,
-      setBtnDisabledSubmit,
-    }));
-
-    const getReadValue = (field: FormInterface): React.ReactNode => {
-      const value = values[field.name];
-
-      if (field.formatReadValue) {
-        return field.formatReadValue(value ?? "");
-      }
-
-      if (field.type === TypeInputEnum.SELECT) {
-        const selectedValues = Array.isArray(value) ? value : [value];
-        const labels = selectedValues
-          .map(
-            (selectedValue) =>
-              field.options?.find((option) => option.value === selectedValue)
-                ?.label ?? selectedValue,
-          )
-          .filter((selectedValue) => selectedValue !== undefined);
-
-        return labels.join(", ") || "-";
-      }
-
-      if (field.type === TypeInputEnum.PRICE) {
-        const amount = Number(value);
-        return value === "" || value === undefined || Number.isNaN(amount)
-          ? "-"
-          : euroFormatter.format(amount);
-      }
-
-      if (typeof value === "boolean") {
-        return value ? "Oui" : "Non";
-      }
-
-      if (value instanceof Date) {
-        return value.toLocaleDateString();
-      }
-
-      if (Array.isArray(value)) {
-        return value.join(", ") || "-";
-      }
-
-      return value === undefined || value === null || value === ""
-        ? "-"
-        : String(value);
-    };
-
-    const submitButton = mode === "edit" && !hideSubmit && (
-      <Button
-        id={`button-${id}`}
-        disabled={btnDisabledSubmit}
-        title={title || "submit"}
-      />
-    );
-    // Le bouton va dans la grid de la dernière liste de champs, si elle en a une
-    const lastFields = sections
-      ? sections[sections.length - 1]?.fields ?? []
-      : initialForm ?? [];
-    const submitInGrid =
-      !!submitCol && lastFields.some((field) => field.col !== undefined);
-
-    const renderFields = (fields: FormInterface[], withSubmit = false) => {
-      const gridEnabled = fields.some((field) => field.col !== undefined);
-      const FieldsContainer: React.ElementType = gridEnabled
-        ? Row
-        : React.Fragment;
-      // Un Fragment n'accepte pas de props : on ne les passe qu'à la Row
-      const containerProps = gridEnabled ? { responsive } : {};
-
-      return (
-        <FieldsContainer {...containerProps}>
-          {fields.map((v, key) => {
-            const required = v.onRequired
-              ? v.onRequired(v.value)
-              : v.required ?? false;
-            const disabled = v.onDisabled
-              ? v.onDisabled(v.value)
-              : v.disabled ?? false;
-
-            return (
-              <FormFieldContainer
-                key={v.name || key}
-                field={v}
-                gridEnabled={gridEnabled}
-              >
-                <div
-                  className={`d-flex flex-column ${v.className ?? ""
-                    } form-group form-group-${v.type}`}
-                >
-                  {v.label && <label>{v.label}</label>}
-                  {v.icon && <Icon classIcon={v.icon} />}
-
-                  {mode === "read" ? (
-                    <div
-                      className={`form-read-value ${v.type === TypeInputEnum.TEXTAREA
-                        ? "form-read-value--textarea"
-                        : ""
-                        }`}
-                    >
-                      {getReadValue(v)}
-                    </div>
-                  ) : v.type === TypeInputEnum.ADDRESS ? (
-                    <AddressSearch
-                      id={v.id ?? v.name}
-                      label=""
-                      placeholder={v.placeholder}
-                      value={String(values[v.name] ?? "")}
-                      disabled={disabled}
-                      minimumQueryLength={v.addressSearch?.minimumQueryLength}
-                      debounceTime={v.addressSearch?.debounceTime}
-                      limit={v.addressSearch?.limit}
-                      provider={v.addressSearch?.provider}
-                      allowManualEntry
-                      manualEntryLabel={v.addressSearch?.manualEntryLabel}
-                      onChange={(value) =>
-                        updateValues({ [v.name]: value } as FormValuesInterface<T>)
-                      }
-                      onSelect={(address) => {
-                        const mappedValues =
-                          v.addressSearch?.mapAddress?.(address) ?? {};
-                        updateValues(mappedValues as FormValuesInterface<T>);
-                        v.addressSearch?.onSelect?.(address);
-                      }}
-                    />
-                  ) : v.type === "select" ? (
-                    <Select
-                      id={v.id ?? v.name}
-                      label={undefined}
-                      name={v.name}
-                      options={v.options ?? []}
-                      disabled={disabled}
-                      multiple={v.multiple}
-                      usePortal={v.usePortal}
-                      searchable={v.searchable}
-                      value={values[v.name] as any}
-                      required={required}
-                      defaultValue={v.value as string | string[]}
-                      placeholder={v.placeholder}
-                      onChangeMultiple={(newValue) =>
-                        handleChangeSelect(newValue, v.name, v)
-                      }
-                      onChange={(newValue) =>
-                        handleChangeSelect(newValue, v.name, v)
-                      }
-                    />
-                  ) : v.type === "textarea" ? (
-                    <TextArea
-                      id={v.id ?? v.name}
-                      name={v.name}
-                      className="textarea-input"
-                      placeholder={v.placeholder ?? ""}
-                      disabled={disabled}
-                      required={required}
-                      value={values[v.name] as string}
-                      onChange={(value, name) =>
-                        handleChangeTextArea(name, value, v)
-                      }
-                    />
-                  ) : v.type === TypeInputEnum.PRICE ? (
-                    <InputPrice
-                      id={v.id ?? v.name}
-                      ref={(el) => (inputRefs.current[v.name] = el)}
-                      name={v.name}
-                      placeholder={v.placeholder ?? ""}
-                      autoComplete={v.autoComplete}
-                      tabIndex={0}
-                      disabled={disabled}
-                      autoFocus={v.focus ?? false}
-                      required={required}
-                      value={String(values[v.name] ?? "")}
-                      onChange={(value) =>
-                        handleChangeTextArea(v.name, value, v)
-                      }
-                    />
-                  ) : (
-                    <Input
-                      id={v.id ?? v.name}
-                      ref={(el) => (inputRefs.current[v.name] = el)}
-                      name={v.name}
-                      type={v.type}
-                      placeholder={v.placeholder ?? ""}
-                      autoComplete={v.autoComplete}
-                      tabIndex={0}
-                      disabled={disabled}
-                      autoFocus={v.focus ?? false}
-                      required={required}
-                      step={v.step ?? "0.01"}
-                      value={values[v.name] as string | number}
-                      checked={
-                        v.type === "checkbox" ? !!values[v.name] : undefined
-                      }
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        handleChangeInput(e, v)
-                      }
-                      onInvalid={v.onInvalid ? v.onInvalid : undefined}
-                    />
-                  )}
-                </div>
-              </FormFieldContainer>
-            );
-          })}
-          {withSubmit && submitButton && (
-            <Col {...submitCol}>
-              <div className="form-submit-col">{submitButton}</div>
-            </Col>
-          )}
-        </FieldsContainer>
-      );
-    };
-
-    return (
-      <form
-        autoComplete={autoComplete ?? "off"}
-        onSubmit={handleSubmit}
-        className={className ?? ""}
-      >
-        <div className="form-content">
-          {sections
-            ? sections.map((section, index) => (
-              <section
-                className={`form-section ${section.className ?? ""}`}
-                key={index}
-              >
-                {section.title && (
-                  <h3 className="form-section-title">{section.title}</h3>
-                )}
-                {renderFields(
-                  section.fields,
-                  submitInGrid && index === sections.length - 1
-                )}
-              </section>
-            ))
-            : renderFields(initialForm ?? [], submitInGrid)}
-          {children}
-        </div>
-        <div className="d-flex justify-content-end form-footer">
-          {!submitInGrid && submitButton}
-        </div>
-      </form>
-    );
-  }
-);
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import { Select } from "../select/Select"; // <--- ton composant
+import "./form.css";
+import {
+  FormInterface,
+  FormMode,
+  FormSection,
+  FormValuesInterface,
+} from "./form.interface";
+import { Input } from "./input/Input";
+import { InputPrice } from "./inputPrice/InputPrice";
+import { TextArea } from "./textArea/TextArea";
+import { Col } from "../grid/col/Col";
+import { Row } from "../grid/row/Row";
+import { GridBreakpoints, GridResponsive } from "../grid/grid.interface";
+import { TypeInputEnum } from "./form.enum";
+import { AddressSearch } from "../addressSearch/AddressSearch";
+
+const euroFormatter = new Intl.NumberFormat("fr-FR", {
+  style: "currency",
+  currency: "EUR",
+});
+
+type FormFieldContainerProps = {
+  field: FormInterface;
+  gridEnabled: boolean;
+  children: React.ReactNode;
+};
+
+const FormFieldContainer = ({
+  field,
+  gridEnabled,
+  children,
+}: FormFieldContainerProps) =>
+  gridEnabled ? <Col {...field.col}>{children}</Col> : <>{children}</>;
+
+export type FormProps<
+  T extends { [key: string]: string | number | boolean | Date | string[] }
+> = {
+  id?: string;
+  className?: string;
+  title?: string;
+  hideSubmit?: boolean;
+  autoComplete?: string;
+  children?: React.ReactNode;
+  initialForm?: FormInterface[];
+  sections?: FormSection[];
+  disabledSubmit?: boolean;
+  mode?: FormMode;
+  /** Largeur sur laquelle se basent les breakpoints des champs (col), défaut : "app" */
+  responsive?: GridResponsive;
+  /** Place le bouton submit dans la grid (dernière ligne) avec ces tailles de col.
+   *  Ignoré si les champs n'utilisent pas la grid : le bouton reste dans le footer. */
+  submitCol?: GridBreakpoints;
+  onSubmit?: (values: FormValuesInterface<T>) => void;
+  onChange?: (values: FormValuesInterface<T>) => void;
+};
+
+export const DynamicForm = forwardRef(
+  <T extends { [key: string]: string | number | boolean | Date | string[] }>(
+    {
+      initialForm,
+      sections,
+      title,
+      onSubmit,
+      id,
+      children,
+      autoComplete,
+      onChange,
+      hideSubmit,
+      disabledSubmit = false,
+      mode = "edit",
+      className,
+      responsive,
+      submitCol,
+    }: FormProps<T>,
+    ref: React.Ref<{
+      clearInput?: (name: string) => void;
+      resetForm?: () => void;
+      focusInitialElement?: () => void;
+      getValues?: () => FormValuesInterface<T>;
+      updateFormValue?: (values: FormValuesInterface<T>) => void;
+      setBtnDisabledSubmit?: (disabled: boolean) => void;
+    }>
+  ) => {
+    const formFields = sections
+      ? sections.reduce<FormInterface[]>(
+        (fields, section) => fields.concat(section.fields),
+        [],
+      )
+      : (initialForm ?? []);
+    const [btnDisabledSubmit, setBtnDisabledSubmit] = useState(disabledSubmit);
+    const [values, setValues] = useState<FormValuesInterface<T>>(() => {
+      const initialValues: FormValuesInterface<T> =
+        {} as FormValuesInterface<T>;
+      formFields.forEach((field) => {
+        (initialValues as any)[field.name] = field.value ?? "";
+      });
+      return initialValues;
+    });
+
+    const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
+
+    /** Gestion des <input> */
+    const handleChangeInput = useCallback(
+      (
+        event: React.ChangeEvent<HTMLInputElement>,
+        forminterface: FormInterface
+      ) => {
+        const { name, type, checked, value } = event.target;
+        const newValue = type === "checkbox" ? checked : value;
+
+        if (forminterface.onChange) {
+          forminterface.onChange(newValue, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) {
+            onChange(updatedValues);
+          }
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+    const handleChangeTextArea = useCallback(
+      (name: string, value: string, forminterface: FormInterface) => {
+        if (forminterface.onChange) {
+          forminterface.onChange(value, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: value };
+          if (onChange) {
+            onChange(updatedValues);
+          }
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+    /** Gestion des <select> */
+    const handleChangeSelect = useCallback(
+      (
+        newValue: string | string[],
+        name: string,
+        forminterface: FormInterface
+      ) => {
+        if (forminterface.onChange) {
+          forminterface.onChange(newValue, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) onChange(updatedValues);
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+
+    const handleSubmit = useCallback(
+      (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+          onSubmit(values);
+        }
+      },
+      [onSubmit, values]
+    );
+
+    const resetForm = () => {
+      setValues(() => {
+        const resetValues: FormValuesInterface<T> =
+          {} as FormValuesInterface<T>;
+        formFields.forEach((field) => {
+          (resetValues as any)[field.name] = field.value ?? "";
+        });
+        return resetValues;
+      });
+    };
+
+    const clearInput = useCallback((name: string) => {
+      setValues((prevValues) => ({
+        ...prevValues,
+        [name]: "",
+      }));
+    }, []);
+
+    const focusInitialElement = () => {
+      const focusedField = formFields.find((field) => field.focus);
+      if (focusedField && inputRefs.current[focusedField.name]) {
+        setTimeout(() => {
+          inputRefs.current[focusedField.name]?.select();
+        }, 500);
+      }
+    };
+
+    const getValues = () => values;
+
+    const updateFormValue: (values: FormValuesInterface<T>) => void = (
+      values
+    ) => {
+      setValues((prevValues) => ({
+        ...prevValues,
+        ...values,
+      }));
+    };
+
+    const updateValues = useCallback(
+      (updatedValues: FormValuesInterface<T>) => {
+        setValues((previousValues) => {
+          const nextValues = { ...previousValues, ...updatedValues };
+          onChange?.(nextValues);
+          return nextValues;
+        });
+      },
+      [onChange],
+    );
+
+    useImperativeHandle(ref, () => ({
+      resetForm,
+      clearInput,
+      focusInitialElement,
+      getValues,
+      updateFormValue,
+      setBtnDisabledSubmit,
+    }));
+
+    const getReadValue = (field: FormInterface): React.ReactNode => {
+      const value = values[field.name];
+
+      if (field.formatReadValue) {
+        return field.formatReadValue(value ?? "");
+      }
+
+      if (field.type === TypeInputEnum.SELECT) {
+        const selectedValues = Array.isArray(value) ? value : [value];
+        const labels = selectedValues
+          .map(
+            (selectedValue) =>
+              field.options?.find((option) => option.value === selectedValue)
+                ?.label ?? selectedValue,
+          )
+          .filter((selectedValue) => selectedValue !== undefined);
+
+        return labels.join(", ") || "-";
+      }
+
+      if (field.type === TypeInputEnum.PRICE) {
+        const amount = Number(value);
+        return value === "" || value === undefined || Number.isNaN(amount)
+          ? "-"
+          : euroFormatter.format(amount);
+      }
+
+      if (typeof value === "boolean") {
+        return value ? "Oui" : "Non";
+      }
+
+      if (value instanceof Date) {
+        return value.toLocaleDateString();
+      }
+
+      if (Array.isArray(value)) {
+        return value.join(", ") || "-";
+      }
+
+      return value === undefined || value === null || value === ""
+        ? "-"
+        : String(value);
+    };
+
+    const submitButton = mode === "edit" && !hideSubmit && (
+      <Button
+        id={`button-${id}`}
+        disabled={btnDisabledSubmit}
+        title={title || "submit"}
+      />
+    );
+    // Le bouton va dans la grid de la dernière liste de champs, si elle en a une
+    const lastFields = sections
+      ? sections[sections.length - 1]?.fields ?? []
+      : initialForm ?? [];
+    const submitInGrid =
+      !!submitCol && lastFields.some((field) => field.col !== undefined);
+
+    const renderFields = (fields: FormInterface[], withSubmit = false) => {
+      const gridEnabled = fields.some((field) => field.col !== undefined);
+      const FieldsContainer: React.ElementType = gridEnabled
+        ? Row
+        : React.Fragment;
+      // Un Fragment n'accepte pas de props : on ne les passe qu'à la Row
+      const containerProps = gridEnabled ? { responsive } : {};
+
+      return (
+        <FieldsContainer {...containerProps}>
+          {fields.map((v, key) => {
+            const required = v.onRequired
+              ? v.onRequired(v.value)
+              : v.required ?? false;
+            const disabled = v.onDisabled
+              ? v.onDisabled(v.value)
+              : v.disabled ?? false;
+
+            return (
+              <FormFieldContainer
+                key={v.name || key}
+                field={v}
+                gridEnabled={gridEnabled}
+              >
+                <div
+                  className={`d-flex flex-column ${v.className ?? ""
+                    } form-group form-group-${v.type}`}
+                >
+                  {v.label && <label>{v.label}</label>}
+                  {v.icon && <Icon classIcon={v.icon} />}
+
+                  {mode === "read" ? (
+                    <div
+                      className={`form-read-value ${v.type === TypeInputEnum.TEXTAREA
+                        ? "form-read-value--textarea"
+                        : ""
+                        }`}
+                    >
+                      {getReadValue(v)}
+                    </div>
+                  ) : v.type === TypeInputEnum.ADDRESS ? (
+                    <AddressSearch
+                      id={v.id ?? v.name}
+                      label=""
+                      placeholder={v.placeholder}
+                      value={String(values[v.name] ?? "")}
+                      disabled={disabled}
+                      minimumQueryLength={v.addressSearch?.minimumQueryLength}
+                      debounceTime={v.addressSearch?.debounceTime}
+                      limit={v.addressSearch?.limit}
+                      provider={v.addressSearch?.provider}
+                      allowManualEntry
+                      manualEntryLabel={v.addressSearch?.manualEntryLabel}
+                      onChange={(value) =>
+                        updateValues({ [v.name]: value } as FormValuesInterface<T>)
+                      }
+                      onSelect={(address) => {
+                        const mappedValues =
+                          v.addressSearch?.mapAddress?.(address) ?? {};
+                        updateValues(mappedValues as FormValuesInterface<T>);
+                        v.addressSearch?.onSelect?.(address);
+                      }}
+                    />
+                  ) : v.type === "select" ? (
+                    <Select
+                      id={v.id ?? v.name}
+                      label={undefined}
+                      name={v.name}
+                      options={v.options ?? []}
+                      disabled={disabled}
+                      multiple={v.multiple}
+                      usePortal={v.usePortal}
+                      searchable={v.searchable}
+                      value={values[v.name] as any}
+                      required={required}
+                      defaultValue={v.value as string | string[]}
+                      placeholder={v.placeholder}
+                      onChangeMultiple={(newValue) =>
+                        handleChangeSelect(newValue, v.name, v)
+                      }
+                      onChange={(newValue) =>
+                        handleChangeSelect(newValue, v.name, v)
+                      }
+                    />
+                  ) : v.type === "textarea" ? (
+                    <TextArea
+                      id={v.id ?? v.name}
+                      name={v.name}
+                      className="textarea-input"
+                      placeholder={v.placeholder ?? ""}
+                      disabled={disabled}
+                      required={required}
+                      value={values[v.name] as string}
+                      onChange={(value, name) =>
+                        handleChangeTextArea(name, value, v)
+                      }
+                    />
+                  ) : v.type === TypeInputEnum.PRICE ? (
+                    <InputPrice
+                      id={v.id ?? v.name}
+                      ref={(el) => (inputRefs.current[v.name] = el)}
+                      name={v.name}
+                      placeholder={v.placeholder ?? ""}
+                      autoComplete={v.autoComplete}
+                      tabIndex={0}
+                      disabled={disabled}
+                      autoFocus={v.focus ?? false}
+                      required={required}
+                      value={String(values[v.name] ?? "")}
+                      onChange={(value) =>
+                        handleChangeTextArea(v.name, value, v)
+                      }
+                    />
+                  ) : (
+                    <Input
+                      id={v.id ?? v.name}
+                      ref={(el) => (inputRefs.current[v.name] = el)}
+                      name={v.name}
+                      type={v.type}
+                      placeholder={v.placeholder ?? ""}
+                      autoComplete={v.autoComplete}
+                      tabIndex={0}
+                      disabled={disabled}
+                      autoFocus={v.focus ?? false}
+                      required={required}
+                      step={v.step ?? "0.01"}
+                      value={values[v.name] as string | number}
+                      checked={
+                        v.type === "checkbox" ? !!values[v.name] : undefined
+                      }
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleChangeInput(e, v)
+                      }
+                      onInvalid={v.onInvalid ? v.onInvalid : undefined}
+                    />
+                  )}
+                </div>
+              </FormFieldContainer>
+            );
+          })}
+          {withSubmit && submitButton && (
+            <Col {...submitCol}>
+              <div className="form-submit-col">{submitButton}</div>
+            </Col>
+          )}
+        </FieldsContainer>
+      );
+    };
+
+    return (
+      <form
+        autoComplete={autoComplete ?? "off"}
+        onSubmit={handleSubmit}
+        className={className ?? ""}
+      >
+        <div className="form-content">
+          {sections
+            ? sections.map((section, index) => (
+              <section
+                className={`form-section ${section.className ?? ""}`}
+                key={index}
+              >
+                {section.title && (
+                  <h3 className="form-section-title">{section.title}</h3>
+                )}
+                {renderFields(
+                  section.fields,
+                  submitInGrid && index === sections.length - 1
+                )}
+              </section>
+            ))
+            : renderFields(initialForm ?? [], submitInGrid)}
+          {children}
+        </div>
+        <div className="d-flex justify-content-end form-footer">
+          {!submitInGrid && submitButton}
+        </div>
+      </form>
+    );
+  }
+);