@m4l/components 9.3.29 → 9.3.30-BE211125-beta.1

package/components/AppBar/styles.js

@@ -8,7 +8,7 @@ const appBarStyles = {
     display: "flex",
     flexDirection: "row",
     flexWrap: "nowrap",
-    alignItems: theme.generalSettings.isMobile ? "center" : "initial",
+    alignItems: "center",
     height: theme.vars.size.baseSpacings.sp12,
     minHeight: theme.vars.size.baseSpacings.sp12,
     padding: `0 ${theme.generalSettings.isMobile ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp4}`,

package/components/Card/Card.styles.js

@@ -17,7 +17,7 @@ const cardStyles = {
       width: "100%",
       outline: "unset!important",
       borderRadius: theme.vars.size.borderRadius.r2,
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.vars.palette.background.default,
       height: ownerState?.height ?? "auto",
       minHeight: ownerState?.height ?? "auto",
       maxHeight: ownerState?.height ?? "auto",

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FormFilterValueBoolean, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { BooleanFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider';
 /**
  * BooleanFilterHelpers es una clase que implementa la interfaz IFieldType
  * para manejar filtros booleanos en un componente de filtro dinámico.
@@ -28,7 +29,7 @@ export declare class BooleanFilterHelpers implements IFieldType<FormFilterValueB
     /**
      * getschema devuelve un esquema de validación para el filtro booleano.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueBoolean>;
     /**
      * verifyFilter verifica si el filtro es válido.
      */

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { B as BOOLEAN_OPERATORS } from "../../../constants.js";
 import { B as BooleanFilter } from "./index.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class BooleanFilterHelpers {
   getComponent() {
     return BooleanFilter;
@@ -79,10 +80,10 @@ class BooleanFilterHelpers {
    * getschema devuelve un esquema de validación para el filtro booleano.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperand1: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operand_required))
-    });
+    })));
   }
   /**
    * verifyFilter verifica si el filtro es válido.

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FormFilterValueDateTime, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { DateTimeFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider';
 /**
  * DateTimeFilterHelpers es una clase que implementa la interfaz IFieldType
  */
@@ -27,7 +28,7 @@ export declare class DateTimeFilterHelpers implements IFieldType<FormFilterValue
     /**
      * getschema devuelve el esquema de validación de Yup para un filtro de fecha y hora.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueDateTime>;
     /**
      * verifyFilter verifica si un filtro de fecha y hora es válido.
      */

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/helpers.js

@@ -4,6 +4,7 @@ import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../di
 import { D as DateTimeFilter } from "./index.js";
 import { startOfDay, endOfDay } from "date-fns";
 import { i as isValidDate } from "../../../../../utils/isValidDate.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class DateTimeFilterHelpers {
   getComponent() {
     return DateTimeFilter;
@@ -109,7 +110,7 @@ class DateTimeFilterHelpers {
    * getschema devuelve el esquema de validación de Yup para un filtro de fecha y hora.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperand1: Yup.date().required(getLabel(DICCTIONARY.error_invalid_date)).typeError(getLabel(DICCTIONARY.error_invalid_date)),
       formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
@@ -119,7 +120,7 @@ class DateTimeFilterHelpers {
           getLabel(DICCTIONARY.error_invalid_date)
         )
       })
-    });
+    })));
   }
   /**
    * verifyFilter verifica si un filtro de fecha y hora es válido.

package/components/DynamicFilter/subcomponents/FieldTypes/FieldTypeInterface.d.ts

@@ -2,18 +2,17 @@ import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { FC } from 'react';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, InitialFilterApplied } from '../../types';
-import * as Yup from 'yup';
-export type YupSchema = Yup.SchemaOf<any>;
+import { RHFormValues, ValidationSchema } from '../../../hook-form/RHFormProvider/types';
 /**
  * Interface para crear los helpers de cada tipo de campo
  */
-export interface IFieldType<T> {
+export interface IFieldType<T extends RHFormValues> {
     getComponent(): FC<{
         [key: string]: any;
     }>;
     getDefaultFilter(field: FilterField, fixed: boolean): FilterFieldApplied;
     getLabels(filter: FilterFieldApplied, getLabel: GetLabelType, formatters: Formatters, field: FilterField): DataTypeFilerLabels;
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<T>;
     getFormValue(field: FilterField, getLabel: GetLabelType, filterValue?: FilterValue): T;
     getFilterFromFormValue(formFilterValue: T): FilterValue;
     verifyFilter(filter: InitialFilterApplied, field?: FilterField): boolean;

package/components/DynamicFilter/subcomponents/FieldTypes/NumberFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FormFilterValueNumber, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { NumberFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider/types';
 /**
  * NumberFilterHelpers es una clase que implementa la interfaz IFieldType
  */
@@ -27,7 +28,7 @@ export declare class NumberFilterHelpers implements IFieldType<FormFilterValueNu
     /**
      * getSchema devuelve el esquema de validación para el filtro.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueNumber>;
     /**
      * verifyFilter verifica si el filtro es válido.
      */

package/components/DynamicFilter/subcomponents/FieldTypes/NumberFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { N as NUMBER_OPERATORS } from "../../../constants.js";
 import { N as NumberFilter } from "./index.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class NumberFilterHelpers {
   getComponent() {
     return NumberFilter;
@@ -93,7 +94,7 @@ class NumberFilterHelpers {
    * getSchema devuelve el esquema de validación para el filtro.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperand1: Yup.number().typeError(
         getLabel(DICCTIONARY.error_operand_mustbe_number)
@@ -105,7 +106,7 @@ class NumberFilterHelpers {
           getLabel(DICCTIONARY.error_less_than_start)
         )
       })
-    });
+    })));
   }
   /**
    * verifyFilter verifica si el filtro es válido.

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FilterValueSelectAsync, FormFilterValueSelectAsync, OperandSelectAsync, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { SelectAsyncFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider/types';
 /**
  * Filtra los valores de operandArray para que solo tengan valores validos
  * @param operandsArray valores del OperandsArray
@@ -34,7 +35,7 @@ export declare class SelectAsyncFilterHelpers implements IFieldType<FormFilterVa
     /**
      * getschema devuelve el esquema de validación de Yup para el filtro.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueSelectAsync>;
     /**
      * verifyFilter verifica si el filtro es válido.
      */

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { S as SELECT_ASYNC_OPERATORS_MULTIPLE, c as SELECT_ASYNC_OPERATORS_SINGLE } from "../../../constants.js";
 import { S as SelectAsyncFilter } from "./index.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 function filterValidOperandsArraySelectAsync(operandsArray, field) {
   const operandsArrayFormatted = Array.isArray(operandsArray) ? operandsArray : [operandsArray];
   const getOptionId = field?.selectAsyncOptions?.getOptionId;
@@ -147,7 +148,7 @@ class SelectAsyncFilterHelpers {
    * getschema devuelve el esquema de validación de Yup para el filtro.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperandsArray: Yup.mixed().when(["multiple"], {
         is: true,
@@ -157,7 +158,7 @@ class SelectAsyncFilterHelpers {
         is: false,
         then: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operand_required))
       })
-    });
+    })));
   }
   /**
    * verifyFilter verifica si el filtro es válido.

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FilterValueSelect, FormFilterValueSelect, OperandSelect, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { SelectFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider';
 /**
  * Filtra los valores de operandArray para que solo tengan valores validos
  * @param operandsArray valores del OperandsArray
@@ -35,7 +36,7 @@ export declare class SelectFilterHelpers implements IFieldType<FormFilterValueSe
     /**
      * getSchema devuelve el esquema de validación de Yup para un filtro de selección.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueSelect>;
     /**
      * TODO: Documentar
      */

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { d as SELECT_OPERATORS_MULTIPLE, e as SELECT_OPERATORS_SINGLE } from "../../../constants.js";
 import { S as SelectFilter } from "./index.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 function filterValidOperandsArraySelect(operandsArray, _field) {
   const operandsArrayFormatted = Array.isArray(operandsArray) ? operandsArray : [operandsArray];
   return operandsArrayFormatted?.filter((operand) => {
@@ -145,7 +146,7 @@ class SelectFilterHelpers {
    * getSchema devuelve el esquema de validación de Yup para un filtro de selección.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperandsArray: Yup.mixed().when(["multiple"], {
         is: true,
@@ -161,7 +162,7 @@ class SelectFilterHelpers {
           }
         ).required(getLabel(DICCTIONARY.error_operand_required))
       })
-    });
+    })));
   }
   /**
    * TODO: Documentar

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, FormFilterValueString, InitialFilterApplied } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { StringFilter } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider/types';
 /**
  * StringFilterHelpers es una clase que implementa la interfaz IFieldType
  */
@@ -27,7 +28,7 @@ export declare class StringFilterHelpers implements IFieldType<FormFilterValueSt
     /**
      * getSchema devuelve el esquema de validación para el filtro de cadena.
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormFilterValueString>;
     /**
      * getFilterValue devuelve el valor del filtro.
      */

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { f as STRING_OPERATORS } from "../../../constants.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
 import { S as StringFilter } from "./index.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class StringFilterHelpers {
   getComponent() {
     return StringFilter;
@@ -74,12 +75,12 @@ class StringFilterHelpers {
    * getSchema devuelve el esquema de validación para el filtro de cadena.
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.object().nullable().required(getLabel(DICCTIONARY.error_operator_required)),
       formValueOperand1: Yup.string().required(
         getLabel(DICCTIONARY.error_operand_required)
       )
-    });
+    })));
   }
   /**
    * getFilterValue devuelve el valor del filtro.

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverFilter } from "./usePopoverFilter.js";
 import { P as PopoverStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
-import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";

package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.d.ts

@@ -16,13 +16,7 @@ declare function usePopoverFilter(): {
     onClose: () => void;
     filterFormValue: FormFilterValue;
     formFilter: FormFilterFieldApplied;
-    popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }>, import('yup/lib/object').AssertsShape<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }>> | undefined;
+    popupValidationSchema: import('../../..').ValidationSchema<import('../../types').FormFilterValueBoolean> | undefined;
     statusLoad: "initial" | "reload_values_provider" | "ready";
 };
 export default usePopoverFilter;

package/components/DynamicSort/subcomponents/FieldTypes/FieldTypeInterface.d.ts

@@ -2,8 +2,7 @@ import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { FC } from 'react';
 import { DataTypeFilerLabels, FormSortValueBase, InitialSortApplied, SortField, SortFieldApplied, SortValue } from '../../types';
-import * as Yup from 'yup';
-export type YupSchema = Yup.SchemaOf<any>;
+import { ValidationSchema } from '../../../hook-form/RHFormProvider/types';
 /**
  * Interface para crear los helpers de cada tipo de campo
  */
@@ -13,7 +12,7 @@ export interface IFieldType {
     }>;
     getDefaultSort(field: SortField, fixed: boolean): SortFieldApplied;
     getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, formatters: Formatters, field: SortField): DataTypeFilerLabels;
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormSortValueBase>;
     getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): FormSortValueBase;
     getSortFromFormValue(formSortValue: FormSortValueBase): SortValue;
     verifySort(Sort: InitialSortApplied, field?: SortField): boolean;

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.d.ts

@@ -1,8 +1,9 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { DataTypeFilerLabels, FormSortValueBase, InitialSortApplied, SortField, SortFieldApplied, SortValue } from '../../../types';
-import { IFieldType, YupSchema } from '../FieldTypeInterface';
+import { IFieldType } from '../FieldTypeInterface';
 import { StringSort } from './index';
+import { ValidationSchema } from '../../../../hook-form/RHFormProvider/types';
 /**
  * Clase que implementa los métodos necesarios para el tipo de campo string
  */
@@ -27,7 +28,7 @@ export declare class SortHelpers implements IFieldType {
     /**
      * getSchema obtiene el esquema de un campo de tipo string
      */
-    getSchema(getLabel: GetLabelType): YupSchema;
+    getSchema(getLabel: GetLabelType): ValidationSchema<FormSortValueBase>;
     /**
      * verifySort verifica si un campo de tipo string es válido
      */

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { O as OPERATORS } from "../../../constants.js";
 import { g as getDynamicSortDictionary } from "../../../dictionary.js";
 import { S as StringSort } from "./index.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../hook-form/RHFormProvider/schema.js";
 class SortHelpers {
   getComponent() {
     return StringSort;
@@ -59,9 +60,9 @@ class SortHelpers {
    * getSchema obtiene el esquema de un campo de tipo string
    */
   getSchema(getLabel) {
-    return Yup.object({
+    return createValidationSchema(createValidationFullObject(createValidationPartialObject({
       formValueOperator: Yup.string().required(getLabel(`dynamic_Sort.error_operator_required`))
-    });
+    })));
   }
   /**
    * verifySort verifica si un campo de tipo string es válido

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -3,7 +3,7 @@ import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.j
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
 import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
-import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts

@@ -16,13 +16,7 @@ declare function usePopoverSort(): {
     onClose: () => void;
     sortFormValue: import('../../types').FormSortValueBase;
     formSort: FormSortFieldApplied;
-    popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }>, import('yup/lib/object').AssertsShape<{
-        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
-    }>> | undefined;
+    popupValidationSchema: import('../../..').ValidationSchema<import('../../types').FormSortValueBase> | undefined;
     statusLoad: "initial" | "reload_values_provider" | "ready";
 };
 export default usePopoverSort;

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -134,7 +134,7 @@ const AreasAdmin = (props) => {
                       }
                     ),
                     maximizedId && windowsLayouts.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ContainerAdminWindowsStyled, { size: currentSize, ownerState, children: [
-                      /* @__PURE__ */ jsx(Typography, { size: currentSize, children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_window)) }),
+                      /* @__PURE__ */ jsx(Typography, { size: currentSize, skeletonWidth: "80px", children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_window)) }),
                       /* @__PURE__ */ jsx(
                         MenuActions,
                         {

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/AreaChip.js

@@ -12,8 +12,9 @@ import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../dic
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "../../constants.js";
 import { g as getComponentClasses } from "../../../../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../hook-form/RHFormProvider/schema.js";
 import { A as AreasAdminSlots } from "../../slots/AreasAdminEnum.js";
-import { R as RHFormProvider } from "../../../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
 import { R as RHFTextField } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
 import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
@@ -56,11 +57,11 @@ const AreaChip = (props) => {
     inputEditArea: areaName
   };
   const validationSchema = useMemo(
-    () => Yup.object().shape({
+    () => createValidationSchema(createValidationFullObject(createValidationPartialObject({
       inputEditArea: Yup.string().required(
         getLabel(getAreasDictionary(AREAS_DICCTIONARY.validation_edit_area))
       )
-    }),
+    }))),
     [getLabel]
   );
   const handlerOnClick = (e) => {

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -9,9 +9,10 @@ import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../
 import { I as ICONS } from "../../../../../../icons.js";
 import { C as ChipActionsMobile } from "../../../AreaChip/subcomponents/ChipActionsMobile/ChipActionsMobile.js";
 import { l as ChipMobileRootStyled, m as ChipMobileContentStyled, N as NameChipMobileStyled, n as EditAreaChipMobileContainerStyled } from "../../../../slots/AreasAdminSlots.js";
-import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../../../hook-form/RHFormProvider/schema.js";
 import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover.js";
 import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField.js";
@@ -44,11 +45,11 @@ const ChipMobile = (props) => {
     inputEditArea: areaName
   };
   const validationSchema = useMemo(
-    () => Yup.object().shape({
+    () => createValidationSchema(createValidationFullObject(createValidationPartialObject({
       inputEditArea: Yup.string().required(
         getLabel(getAreasDictionary(AREAS_DICCTIONARY.validation_edit_area))
       )
-    }),
+    }))),
     [getLabel]
   );
   const handlerOnClick = (e) => {

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

@@ -0,0 +1,14 @@
+import { ReactElement, RefAttributes } from 'react';
+import { CustomFormArguments, FormProviderCustomProps, RHFormProviderProps, RHFormProviderRef, RHFormValues } from './types';
+/**
+ * useCustomForm se encarga de crear los metodos del formulario y validar el statusLoad para recargar los valores del formulario nuevamente.
+ * Cuando statusLoad es 'reload_values_provider' se actualizan los valores del formulario, debido a que se cargaron del backend.
+ * 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, 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;
+export declare const RHFormProvider: <T extends RHFormValues>(props: RHFormProviderProps<T> & RefAttributes<RHFormProviderRef<T>>) => ReactElement;

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

@@ -0,0 +1,98 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle } from "react";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { F as FormProviderRoot } from "./styles.js";
+import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
+const classes = RHFormProviderUtilityClasses();
+function useCustomForm({
+  validationSchema,
+  values,
+  statusLoad,
+  mode
+}) {
+  const formMethods = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues: values,
+    ...mode && { mode }
+  });
+  useEffect(() => {
+    if (statusLoad === "reload_values_provider") {
+      const keys = Object.keys(values);
+      keys.forEach((key) => {
+        const fieldName = key;
+        const fieldValue = values[key];
+        formMethods.setValue(fieldName, fieldValue, {
+          shouldValidate: false,
+          shouldDirty: false,
+          shouldTouch: false
+        });
+      });
+      formMethods.clearErrors();
+      return;
+    }
+  }, [formMethods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      formMethods.setValue("statusLoad", "ready", {
+        shouldValidate: false,
+        shouldDirty: false,
+        shouldTouch: false
+      });
+    }
+  }, [statusLoad]);
+  return formMethods;
+}
+const FormProviderCustomBase = (props, ref) => {
+  const { children, onSubmit, onSubmitError, className, formMethods } = props;
+  useImperativeHandle(
+    ref,
+    () => ({
+      formMethods,
+      onSubmit
+    }),
+    [formMethods, onSubmit]
+  );
+  return /* @__PURE__ */ jsx(FormProvider, { ...formMethods, children: /* @__PURE__ */ jsx(
+    FormProviderRoot,
+    {
+      className: clsx(classes.root, className),
+      onSubmit: formMethods.handleSubmit(
+        onSubmit,
+        onSubmitError
+      ),
+      children
+    }
+  ) });
+};
+const FormProviderCustomForward = forwardRef(FormProviderCustomBase);
+FormProviderCustomForward.displayName = "FormProviderCustom";
+const FormProviderCustom = FormProviderCustomForward;
+const RHFormProviderBase = forwardRef(
+  (props, ref) => {
+    const { children, onSubmit, onSubmitError, values, validationSchema, statusLoad = "ready", className, mode } = props;
+    const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
+    return /* @__PURE__ */ jsx(
+      FormProviderCustom,
+      {
+        ref,
+        className,
+        values,
+        validationSchema,
+        statusLoad,
+        onSubmit,
+        onSubmitError,
+        formMethods,
+        children
+      }
+    );
+  }
+);
+RHFormProviderBase.displayName = "RHFormProvider";
+const RHFormProvider = RHFormProviderBase;
+export {
+  FormProviderCustom as F,
+  RHFormProvider as R,
+  useCustomForm as u
+};