@m4l/components 9.3.30-JA.beta-1 → 9.3.30

package/components/hook-form/RHFormProvider/RHFormProvider.d.ts

@@ -6,26 +6,9 @@ import { CustomFormArguments, FormProviderCustomProps, RHFormProviderProps, RHFo
  * Cuando statusLoad es 'ready' se actualiza el statusLoad del formulario a 'ready', para que los que useWatch puedan ser efectivos despues de la carga de los datos.
  * Se recomienda usar useFormReadyForUpdate que se nutre de statusLoad e indica que el formulario esta listo para ser usado.
  */
-export declare function useCustomForm<T extends RHFormValues>({ validationSchema, values, statusLoad, mode, }: CustomFormArguments<T>): import('react-hook-form').UseFormReturn<T, any, undefined>;
+export declare function useCustomForm<T extends RHFormValues>({ validationSchema, values, statusLoad, mode, }: CustomFormArguments<T>): import('react-hook-form').UseFormReturn<T, undefined, T>;
 /**
  * Componente que extiende FormProviderCustomBase para poder ser usado dentro del forwardRef garantizando el tipado.
  */
 export declare const FormProviderCustom: <T extends RHFormValues>(props: FormProviderCustomProps<T> & RefAttributes<RHFormProviderRef<T>>) => ReactElement;
-/**
- * Componente principal que gestiona el `Provider` de `react-hook-form` y encapsula el formulario para la creación de formularios personalizados.
- *
- * Este componente utiliza internamente `useCustomForm` para inicializar todos los métodos necesarios para la manipulación del formulario,
- * incluyendo validación con Yup, protegida con ValidationSchema<T> para garantizar que solo se usen claves declaradas en el tipo del formulario sean las que participen
- *
- *
- * **Características principales:**
- * - Integración completa con React Hook Form
- * - Validación automática usando esquemas de Yup
- * - Gestión de estados de carga para actualización de valores
- * - Exposición de métodos del formulario a través de refs
- * - Soporte para diferentes modos de validación
- *
- * Si necesitas acceso directo a los métodos de `useForm`, puedes utilizar el `Provider` y el hook por separado mediante
- * `FormProviderCustom` y `useCustomForm`, respectivamente.
- */
-export declare const RHFormProvider: import('react').ForwardRefExoticComponent<RHFormProviderProps<RHFormValues> & RefAttributes<RHFormProviderRef<RHFormValues>>>;
+export declare const RHFormProvider: <T extends RHFormValues>(props: RHFormProviderProps<T> & RefAttributes<RHFormProviderRef<T>>) => ReactElement;

package/components/hook-form/RHFormProvider/RHFormProvider.js

@@ -45,7 +45,7 @@ function useCustomForm({
   return formMethods;
 }
 const FormProviderCustomBase = (props, ref) => {
-  const { children, onSubmit, className, formMethods } = props;
+  const { children, onSubmit, onSubmitError, className, formMethods } = props;
   useImperativeHandle(
     ref,
     () => ({
@@ -58,7 +58,10 @@ const FormProviderCustomBase = (props, ref) => {
     FormProviderRoot,
     {
       className: clsx(classes.root, className),
-      onSubmit: formMethods.handleSubmit(onSubmit),
+      onSubmit: formMethods.handleSubmit(
+        onSubmit,
+        onSubmitError
+      ),
       children
     }
   ) });
@@ -66,9 +69,9 @@ const FormProviderCustomBase = (props, ref) => {
 const FormProviderCustomForward = forwardRef(FormProviderCustomBase);
 FormProviderCustomForward.displayName = "FormProviderCustom";
 const FormProviderCustom = FormProviderCustomForward;
-const RHFormProvider = forwardRef(
+const RHFormProviderBase = forwardRef(
   (props, ref) => {
-    const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+    const { children, onSubmit, onSubmitError, values, validationSchema, statusLoad = "ready", className, mode } = props;
     const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
     return /* @__PURE__ */ jsx(
       FormProviderCustom,
@@ -79,13 +82,15 @@ const RHFormProvider = forwardRef(
         validationSchema,
         statusLoad,
         onSubmit,
+        onSubmitError,
         formMethods,
         children
       }
     );
   }
 );
-RHFormProvider.displayName = "RHFormProvider";
+RHFormProviderBase.displayName = "RHFormProvider";
+const RHFormProvider = RHFormProviderBase;
 export {
   FormProviderCustom as F,
   RHFormProvider as R,

package/components/hook-form/RHFormProvider/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Mode, UseFormReturn } from 'react-hook-form';
+import { Mode, SubmitErrorHandler, UseFormReturn } from 'react-hook-form';
 import { ObjectSchema } from 'yup';
 import { ObjectShape } from 'yup/lib/object';
 /**
@@ -84,7 +84,11 @@ export interface RHFormProviderProps<T extends RHFormValues> {
     /** Elementos hijos del formulario */
     children: ReactNode;
     /** Función que se ejecuta al enviar el formulario con los datos validados */
-    onSubmit: (data: T) => void;
+    onSubmit: ((data: T) => void) | ((data: T) => Promise<void>);
+    /**
+     * Cuando hay un error en la validación del formulario, se ejecuta esta función.
+     */
+    onSubmitError?: SubmitErrorHandler<T>;
     /** Valores iniciales del formulario si es un new o cargados del backend si son edit */
     values: RHFormInitialValues<T>;
     /** Esquema de validación de Yup */
@@ -101,7 +105,7 @@ export interface RHFormProviderProps<T extends RHFormValues> {
  * Combina las propiedades de React Hook Form con las propiedades personalizadas del formulario.
  */
 export interface FormProviderCustomProps<T extends RHFormValues> extends RHFormProviderProps<T> {
-    formMethods: UseFormReturn<T, any, undefined>;
+    formMethods: UseFormReturn<T, undefined, T>;
 }
 /**
  * Argumentos para el hook useCustomForm.
@@ -123,7 +127,7 @@ export interface CustomFormArguments<T extends RHFormValues> {
  */
 export interface RHFormProviderRef<T extends RHFormValues> {
     /** Objeto completo con todos los métodos de React Hook Form */
-    formMethods: UseFormReturn<T, any, undefined>;
+    formMethods: UseFormReturn<T, undefined, T>;
     onSubmit: (data: T) => void;
 }
 export {};

package/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useFormAddEdit } from './useFormAddEdit';
+export { useFormAddEdit } from './useFormAddEdit/useFormAddEdit';
 export { useModal } from './useModal';
 export { useTab } from './useTab';
 export { getformAddEditDictionary } from './useFormAddEdit/dictionary';

package/hooks/useFormAddEdit/{index.d.ts → useFormAddEdit.d.ts}

@@ -2,7 +2,8 @@ import { FormStatusLoad } from '../../components/hook-form/RHFormProvider/types'
 import { UseFormAddEditProps } from './types';
 import { FieldValues } from 'react-hook-form';
 /**
- * TODO: Documentar
+ * Hook to add or edit a form
+ * @deprecated Use useFormAddEdit from @m4l/layouts instead
  */
 export declare function useFormAddEdit<TValues extends FieldValues = FieldValues, TEndpointValues extends FieldValues = FieldValues>(props: UseFormAddEditProps<TValues, TEndpointValues>): {
     formValues: TValues;

package/index.js

@@ -224,7 +224,7 @@ import { g as g30 } from "./components/hook-form/RHFormProvider/dictionary.js";
 import { u as u22 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a17, M as M10 } from "./contexts/ModalContext/index.js";
-import { u as u23 } from "./hooks/useFormAddEdit/index.js";
+import { u as u23 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
 import { u as u24 } from "./hooks/useModal/index.js";
 import { u as u25 } from "./hooks/useTab/index.js";
 import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.30-JA.beta-1",
+  "version": "9.3.30",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {