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

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

@@ -0,0 +1,31 @@
+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, any, undefined>;
+/**
+ * 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>>>;

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

@@ -0,0 +1,93 @@
+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, 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),
+      children
+    }
+  ) });
+};
+const FormProviderCustomForward = forwardRef(FormProviderCustomBase);
+FormProviderCustomForward.displayName = "FormProviderCustom";
+const FormProviderCustom = FormProviderCustomForward;
+const RHFormProvider = forwardRef(
+  (props, ref) => {
+    const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+    const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
+    return /* @__PURE__ */ jsx(
+      FormProviderCustom,
+      {
+        ref,
+        className,
+        values,
+        validationSchema,
+        statusLoad,
+        onSubmit,
+        formMethods,
+        children
+      }
+    );
+  }
+);
+RHFormProvider.displayName = "RHFormProvider";
+export {
+  FormProviderCustom as F,
+  RHFormProvider as R,
+  useCustomForm as u
+};

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

@@ -0,0 +1,4 @@
+export * from './RHFormProvider';
+export type { ValidationSchema, ValidationShape, ValidationFullObject as ValidationObject, ValidationPartialObject, RHFormInitialValues, RHFormValues, } from './types';
+export { VALIDATION_SCHEMA_BRAND, VALIDATION_PARTIAL_OBJECT_BRAND, VALIDATION_OBJECT_BRAND, } from './types';
+export * from './schema';

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,17 @@
+import { RHFormValues, ValidationFullObject, ValidationSchema, ValidationShape, ValidationPartialObject } from './types';
+/**
+ * Crea un esquema de Yup a partir de un shape tipado y mantiene la asociación con el tipo del formulario.
+ */
+export declare const createValidationSchema: <T extends RHFormValues>(valitionFullObject: ValidationFullObject<T>) => ValidationSchema<T>;
+/**
+ * Crea un esquema de Yup a partir de un shape tipado y mantiene la asociación con el tipo del formulario.
+ */
+export declare const createValidationPartialObject: <T extends RHFormValues>(partialObjectShape: ValidationShape<T>) => ValidationPartialObject<T>;
+/**
+ * Marca un ObjectShape para garantizar que fue construido mediante createValidationObject.
+ */
+export declare const createValidationFullObject: <T extends RHFormValues>(...partialObjectShape: Array<ValidationPartialObject<T>>) => ValidationFullObject<T>;
+/**
+ * crea un squema de validación vacío, para los testing
+ */
+export declare const createEmptyValidationSchema: <T extends RHFormValues>() => ValidationSchema<T>;

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

@@ -0,0 +1,29 @@
+import * as Yup from "yup";
+import { V as VALIDATION_OBJECT_BRAND } from "./types.js";
+const createValidationSchema = (valitionFullObject) => {
+  const schema = Yup.object().shape(valitionFullObject);
+  return schema;
+};
+const createValidationPartialObject = (partialObjectShape) => {
+  const validationPartialObject = { ...partialObjectShape };
+  return validationPartialObject;
+};
+const createValidationFullObject = (...partialObjectShape) => {
+  const mergedShape = Object.assign({}, ...partialObjectShape);
+  Object.defineProperty(mergedShape, VALIDATION_OBJECT_BRAND, {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+    value: true
+  });
+  return mergedShape;
+};
+const createEmptyValidationSchema = () => {
+  return createValidationSchema(createValidationFullObject(createValidationPartialObject({})));
+};
+export {
+  createValidationFullObject as a,
+  createValidationPartialObject as b,
+  createValidationSchema as c,
+  createEmptyValidationSchema as d
+};

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

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react';
+import { Mode, UseFormReturn } from 'react-hook-form';
+import { ObjectSchema } from 'yup';
+import { ObjectShape } from 'yup/lib/object';
+/**
+ * Estados de carga del formulario que determinan cuándo y cómo actualizar los valores.
+ *
+ * - `initial`: Estado inicial del formulario
+ * - `new`: Formulario para crear un nuevo elemento
+ * - `edit`: Formulario para editar un elemento existente
+ * - `reload_values_provider`: Estado que indica que se deben recargar los valores del proveedor
+ * - `ready`: Formulario listo para ser usado
+ * - `error`: Estado de error en el formulario
+ */
+export type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
+export type RHFormValues = {};
+/**
+ * Tipo que define los valores iniciales del formulario.
+ * Extiende FieldValues de React Hook Form para mayor flexibilidad.
+ */
+export type RHFormInitialValues<T extends RHFormValues> = Partial<T>;
+/**
+ * LiteralKeys es un tipo que define las claves literales del formulario. excepto statusLoad, que no es necesario que el usuario la aporte.
+ */
+export type LiteralKeys<T> = Exclude<Extract<keyof T, string>, 'statusLoad'>;
+/**
+ * StrictFormValues es un tipo que define los valores del formulario explicitamente.
+ */
+export type StrictFormValues<T extends RHFormValues> = Pick<RHFormInitialValues<T>, LiteralKeys<RHFormInitialValues<T>>>;
+/**
+ * Garantiza que el shape sólo contenga claves declaradas en el tipo del formulario.
+ * Si usa un key que no está en el tipo del formulario, se devuelve never. Protegiendo el ingreso de claves diferentes.
+ */
+export type EnsureAllowedKeys<Shape, Allowed extends string> = Exclude<keyof Shape, Allowed> extends never ? Shape : never;
+/**
+ * YupShapeEntry es un tipo que define la entrada de un shape de Yup.
+ */
+type YupShapeEntry = ObjectShape[string];
+/**
+ * ValidationShape veririca que solo YupShapeEntry  puedan ser usados en algunos campos de RHFormValues.
+ */
+export type ValidationShape<T extends RHFormValues> = Partial<Record<LiteralKeys<T>, YupShapeEntry>>;
+/**
+ * Symbol que contiene el ValidationSchema que lo hace diferente a ObjectSchema normal de Yup.
+ */
+export declare const VALIDATION_SCHEMA_BRAND: unique symbol;
+/**
+ * Symbol que identifica que un ValidationShape fue construido mediante createValidationObject.
+ */
+export declare const VALIDATION_OBJECT_BRAND: unique symbol;
+/**
+ * Symbol que identifica que un ValidationShape parcial fue construido mediante createValidationPartialObject.
+ */
+export declare const VALIDATION_PARTIAL_OBJECT_BRAND: unique symbol;
+/**
+ * ValidationSchema es un tipo que define el schema de validación del formulario. Aporta el brand VALIDATION_SCHEMA_BRAND para hacer diferentes a ObjectSchema normal de Yup.
+ * y asi poder garantizar que se use la función createValidationSchema para crear la schema.
+ */
+export type ValidationSchema<T extends RHFormValues> = ObjectSchema<any> & {
+    /**
+     * Aunque no se use en el codigo a nivel de javascript, es necesario para que el tipo de la schema para hacerlos diferente a ObjectSchema. y obliga
+     * a que se use la función createValidationSchema para crear la schema.
+     */
+    readonly [VALIDATION_SCHEMA_BRAND]: ValidationShape<T>;
+};
+/**
+ * ValidationFullObject garantiza que el shape sea construido mediante createValidationObject.
+ * con base en los partialObjectShape que se le pasan a createValidationObject.
+ */
+export type ValidationFullObject<T extends RHFormValues> = ValidationShape<T> & {
+    readonly [VALIDATION_OBJECT_BRAND]: true;
+};
+/**
+ * ValidationPartialObject garantiza que el shape parcial sea construido mediante createValidationPartialObject.
+ */
+export type ValidationPartialObject<T extends RHFormValues> = ValidationShape<T> & {
+    readonly [VALIDATION_PARTIAL_OBJECT_BRAND]: true;
+};
+/**
+ * Propiedades del componente principal RHFormProvider.
+ * Define la interfaz para crear formularios con React Hook Form y validación Yup.
+ */
+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;
+    /** Valores iniciales del formulario si es un new o cargados del backend si son edit */
+    values: RHFormInitialValues<T>;
+    /** Esquema de validación de Yup */
+    validationSchema: ValidationSchema<T>;
+    /** Estado de carga del formulario (opcional, por defecto 'ready') */
+    statusLoad?: FormStatusLoad;
+    /** Clases CSS adicionales (opcional) */
+    className?: string;
+    /** Modo de validación del formulario (opcional) */
+    mode?: Mode;
+}
+/**
+ * Propiedades del componente FormProviderCustom.
+ * 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>;
+}
+/**
+ * Argumentos para el hook useCustomForm.
+ * Define los parámetros necesarios para configurar un formulario personalizado.
+ */
+export interface CustomFormArguments<T extends RHFormValues> {
+    /** Valores iniciales del formulario */
+    values: RHFormInitialValues<T>;
+    /** Esquema de validación de Yup */
+    validationSchema: ValidationSchema<T>;
+    /** Estado de carga del formulario (opcional) */
+    statusLoad?: FormStatusLoad;
+    /** Modo de validación del formulario (opcional) */
+    mode?: Mode;
+}
+/**
+ * Interfaz que define los métodos expuestos a través de la ref del RHFormProvider.
+ * Permite acceso programático a los métodos de React Hook Form desde componentes padre.
+ */
+export interface RHFormProviderRef<T extends RHFormValues> {
+    /** Objeto completo con todos los métodos de React Hook Form */
+    formMethods: UseFormReturn<T, any, undefined>;
+    onSubmit: (data: T) => void;
+}
+export {};

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

@@ -0,0 +1,8 @@
+const VALIDATION_SCHEMA_BRAND = Symbol("VALIDATION_SCHEMA_BRAND");
+const VALIDATION_OBJECT_BRAND = Symbol("VALIDATION_OBJECT_BRAND");
+const VALIDATION_PARTIAL_OBJECT_BRAND = Symbol("VALIDATION_PARTIAL_OBJECT_BRAND");
+export {
+  VALIDATION_OBJECT_BRAND as V,
+  VALIDATION_SCHEMA_BRAND as a,
+  VALIDATION_PARTIAL_OBJECT_BRAND as b
+};

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

@@ -15,3 +15,4 @@ export { RHFRadioGroup } from './RHFRadioGroup';
 export * from './RHFNumberInput';
 export { RHFUploadSingleFile } from './RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile';
 export * from './RHFUpload';
+export * from './RHFormProvider';

package/components/mui_extended/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconLabelStyled, L as LabelStyled, b as IconExpandedStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";

package/components/mui_extended/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { useModuleSkeleton } from "@m4l/core";
 import { S as SkeletonAvatar } from "./subcomponents/SkeletonAvatar/index.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { A as AvatarRootStyled } from "./slots/AvatarSlots.js";
 import { A as AVATAR_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";

package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
 import { A as AVATAR_KEY } from "../../constants.js";
 import { S as Skeleton } from "../../../Skeleton/Skeleton.js";
 const SkeletonAvatar = (props) => {

package/components/mui_extended/Badge/Badge.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BADGE_LABEL_KEY_COMPONENT } from "./constants.js";
 import { B as BadgeRootStyled } from "./slots/BadgeSlots.js";

package/components/mui_extended/CircularProgress/CircularProgress.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { S as SkeletonStyled, R as RootStyled } from "./slots/CircularProgressSlots.js";
 import { C as CircularProgressSlots } from "./slots/CircularProgressEnum.js";
 import { C as CIRCULAR_PROGRESS_PREFIX } from "./constants.js";

package/components/mui_extended/DateTimePicker/DateTimePicker.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useMemo, useCallback } from "react";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { P as PopperStyled, a as PickersCalendarHeaderStyled, I as IconButtonStyled, b as PickersDayStyled, c as PaperStyled, S as SkeletonStyled, M as MobileDateTimePickerRootStyled, D as DesktopDateTimePickerRootStyled } from "./slots/DateTimePickerSlots.js";
 import { d as date, c as chevron_right, a as chevron_left, b as chevron_down } from "./icons.js";

package/components/mui_extended/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { D as DIALOG_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";

package/components/mui_extended/ImageButton/ImageButton.js

@@ -6,7 +6,7 @@ import { I as Image } from "../../Image/Image.js";
 import { W as WrapperImageButton } from "./styles.js";
 import { u as useUtilityClasses } from "./utils/Clases/index.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { I as IMAGE_BUTTON_KEY_COMPONENT } from "./tests/constants.js";
 function ImageButton({
   src,

package/components/mui_extended/MenuDivider/MenuDivider.js

@@ -4,7 +4,7 @@ import { M as MENU_DIVIDER_KEY_COMPONENT } from "./constants.js";
 import { M as MenuDividerRootStyled, D as DividerStyled } from "./slots/MenuDividerSlots.js";
 import { M as MenuDividerSlots } from "./slots/MenuDividerEnum.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuDivider = (props) => {
   const {

package/components/mui_extended/NavLink/NavLink.js

@@ -4,7 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
 import { c as classNavLinkRoot, N as NAV_LINK_SPECIFY, a as NAV_LINK_KEY_COMPONENT } from "./constants.js";
 import { N as NavLinkSlots } from "./slots/NavLinkEnum.js";
 import { clsx } from "clsx";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const NavLink = (props) => {
   const {

package/components/mui_extended/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as POPOVER_PREFIX, a as POPOVER_CLASS_NAME_SPECIFY } from "./constants.js";
 import clsx from "clsx";
 import { P as PopoverRootStyled } from "./slots/PopoverSlots.js";

package/components/mui_extended/Select/Select.js

@@ -7,7 +7,7 @@ import { forwardRef, useMemo, useState, useRef, useCallback, useEffect } from "r
 import { A as ArrowDownStyled, a as AdormentStyled, S as SelectRootStyled, b as SkeletonSelectStyled, M as MenuItemListStyled, c as MenuItemNoOptionStyled, L as LabelPlaceholerStyled, R as RenderValueContainerStyled, d as RenderValueTypography } from "./slots/SelectSlots.js";
 import { I as ICON_ARROW_DOWN, S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT } from "./constants.js";
 import { S as SELECT_DICTIONARY } from "./dictionary.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { C as Chip } from "../../Chip/Chip.js";
 import { S as SelectSlots } from "./slots/SelectEnum.js";

package/components/mui_extended/Stack/Stack.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { S as STACK_KEY_COMPONENT } from "./constant.js";
 import { M as MUISTackRootStyled } from "./slots/StackSlot.js";
 import { S as StackSlots } from "./slots/StackEnum.js";

package/components/mui_extended/TextField/TextField.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
 import { S as SkeletonStyled, T as TextFieldRootStyled, L as LimitContainerStyled, a as LimitTextFirstStyled, b as LimitTextSeparatorStyled, c as LimitTextSecondStyled } from "./slots/TextFieldSlots.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { T as TEXT_FIELD_CLASSES, a as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
 import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
 import { useTheme } from "@mui/material";

package/components/mui_extended/ToggleButton/ToggleButton.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { w as withToggle } from "../../../hocs/withToggle/index.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import clsx from "clsx";
 import { T as TOGGLE_BUTTON_KEY_COMPONENT } from "./constants.js";
 import { T as ToggleButtonRootStyled } from "./slots/ToggleButtonSlots.js";

package/components/mui_extended/ToggleIconButton/ToggleIconButton.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { T as TOGGLE_ICON_BUTTON_KEY_COMPONENT, a as TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY } from "./constants.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.js";

package/components/mui_extended/Typography/Typography.js

@@ -4,7 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
 import { T as TYPOGRAPHY_CLASSES, a as TYPOGRAPHY_KEY_COMPONENT, b as TYPOGRAPHY_CLASS_NAME_SPECIFY } from "./constants.js";
 import { T as TypographySlots } from "./slots/typographyEnum.js";
 import { S as StyledMUITypography, a as StyledSkeleton } from "./slots/typographySlots.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 function Typography(props) {
   const {

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -6,7 +6,7 @@ import { P as PopupDragWindowRootStyled } from "../../slots/popupsViewerSlots.js
 import { u as usePopups } from "../../../PopupsProvider/hooks/usePopups.js";
 import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { a as POPUPS_VIEWER_CLASS_NAME } from "../../constants.js";
-import { a as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
 import { d as deepShallow } from "../../../../../../utils/deepShallow.js";

package/contexts/index.d.ts

@@ -1,7 +1,7 @@
 export { DynamicMFParmsProvider, DynamicMFParmsContext, MemonizedDynamicMFParmsProvider, } from '../components/WindowBase/contexts/DynamicMFParmsContext';
 export * from './ModalContext/index';
 export * from './ModalContext/types';
-export type { FormInitialValues, FormStatusLoad, } from '../components/hook-form/RHFormContext/types';
-export { RHFormProvider, FormProviderCustom, useCustomForm, } from '../components/hook-form/RHFormContext';
-export { getFormComponentsDictionary } from '../components/hook-form/RHFormContext/dictionary';
+export type { RHFormInitialValues as FormInitialValues, FormStatusLoad, } from '../components/hook-form/RHFormProvider/types';
+export { RHFormProvider, FormProviderCustom, useCustomForm, } from '../components/hook-form/RHFormProvider/RHFormProvider';
+export { getFormComponentsDictionary } from '../components/hook-form/RHFormProvider/dictionary';
 export { useAppearanceComponentStore, AppearanceComponentProvider, } from './AppearanceComponentContext';

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts

@@ -1,11 +1,11 @@
 import { Step } from '../../components/Stepper/types';
 import { GetStepsAndValidationSchemaProps } from './types';
-import * as Yup from 'yup';
+import { RHFormValues } from '../../components/hook-form/RHFormProvider/types';
 /**
  * Hook personalizado que recibe un array de steps con validaciones y regresa todo listo para el Stepper
  * Una sola configuración genera: validationSchema + steps + validationFields automáticamente
  */
-export declare function getStepsAndValidationSchema({ steps, visibilityData, }: GetStepsAndValidationSchemaProps): {
-    validationSchema: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>>;
+export declare function getStepsAndValidationSchema<T extends RHFormValues>({ steps, visibilityData, }: GetStepsAndValidationSchemaProps<T>): {
+    validationSchema: import('../../components/hook-form/RHFormProvider/types').ValidationSchema<T>;
     steps: Step[];
 };

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js

@@ -1,11 +1,11 @@
-import * as Yup from "yup";
+import { b as createValidationPartialObject, c as createValidationSchema, a as createValidationFullObject } from "../../components/hook-form/RHFormProvider/schema.js";
 import { e as evaluateVisibilityStepCondition } from "../../components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
 function getStepsAndValidationSchema({
   steps,
   visibilityData
 }) {
   const validationSchema = (() => {
-    const combinedValidations = {};
+    const combinedValidations = createValidationPartialObject({});
     const visibleSteps = steps.filter((step) => {
       if (!step.visibilityCondition) {
         return true;
@@ -18,7 +18,7 @@ function getStepsAndValidationSchema({
         Object.assign(combinedValidations, validationResult);
       }
     });
-    return Yup.object().shape(combinedValidations);
+    return createValidationSchema(createValidationFullObject(combinedValidations));
   })();
   const processedSteps = steps.map((step) => {
     let validationFields = [];

package/helpers/getStepsAndValidationSchema/types.d.ts

@@ -1,19 +1,20 @@
+import { RHFormValues, ValidationPartialObject } from '../../components/hook-form/RHFormProvider/types';
 import { Step } from '../../components/Stepper/types';
 /**
  * Configuración completa de un step con validaciones incluidas
  */
-export interface StepWithValidation extends Omit<Step, 'validationFields'> {
+export interface StepWithValidation<T extends RHFormValues> extends Omit<Step, 'validationFields'> {
     /**
      * Función de validación que retorna un objeto con esquemas Yup
      * Ejemplo: ContactDataValidation
      */
-    validationFunction?: () => Record<string, any>;
+    validationFunction?: () => ValidationPartialObject<T>;
 }
-export interface GetStepsAndValidationSchemaProps {
+export interface GetStepsAndValidationSchemaProps<T extends RHFormValues> {
     /**
      * Array de steps con sus validaciones incluidas
      */
-    steps: StepWithValidation[];
+    steps: StepWithValidation<T>[];
     /**
      * Datos adicionales para visibilityCondition (ej: objectId)
      */

package/hooks/index.d.ts

@@ -13,3 +13,4 @@ export * from './useDataGridPersistence';
 export * from './usePopoverContainer';
 export * from './useIsVisible';
 export * from './useSizeContainer';
+export * from './useWatchTyped';

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -5,7 +5,7 @@ import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
 import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
 import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { C as COOKIE_APPLIED_FILTERS, a as COOKIE_APPLIED_SORTS, M as M4LDYNAMIC_KEY_FILTER_AND_SORT } from "./constants.js";
 import { I as ICON_PATH_FILTER, a as ICON_PATH_SORT, A as ASSETS } from "./icons.js";
 import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum.js";

package/hooks/useFormAddEdit/index.d.ts

@@ -1,4 +1,4 @@
-import { FormStatusLoad } from '../../components/hook-form/RHFormContext/types';
+import { FormStatusLoad } from '../../components/hook-form/RHFormProvider/types';
 import { UseFormAddEditProps } from './types';
 import { FieldValues } from 'react-hook-form';
 /**

package/hooks/useWatchTyped/index.d.ts

@@ -0,0 +1 @@
+export * from './useTypedWatch';

package/hooks/useWatchTyped/index.js

@@ -0,0 +1 @@
+