@m4l/components 9.3.13 → 9.3.14

package/components/Stepper/types.d.ts

@@ -0,0 +1,165 @@
+import { ReactElement, ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+import { Sizes } from '@m4l/styles';
+import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from './slots/StepperEnum';
+import { STEPPER_PREFIX_NAME } from './constants';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
+export type Orientation = 'horizontal' | 'vertical';
+export type IndicatorType = 'number' | 'dot';
+export type FormData = Record<string, string | number | boolean | null | undefined>;
+export type VisibilityData = Record<string, string | number | boolean | null | undefined>;
+export type Step = {
+    /**
+     * Clave única que identifica el step.
+     */
+    key: string;
+    /**
+     * Título del step.
+     */
+    title: string;
+    /**
+     * Descripción del step.
+     */
+    description?: string;
+    /**
+     * Icono del step.
+     */
+    icon?: string;
+    /**
+     * Array con los campos que se deben validar en el step.
+     */
+    validationFields?: string[];
+    /**
+     * Función que determina si el step se debe mostrar.
+     * @param formData - Datos del formulario.
+     * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId).
+     * @returns true si el step se debe mostrar, false en caso contrario.
+     * Si no se proporciona, el step siempre se muestra.
+     */
+    visibilityCondition?: (formData?: FormData, visibilityData?: VisibilityData) => boolean;
+};
+export interface StepperProps {
+    /**
+     * Children opcional para inyectar componentes adicionales
+     */
+    children?: React.ReactNode;
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
+    /**
+     * "visibleTitle": Propiedad que ejecuta condición para visualizar los titulos en el SteppArea
+     */
+    visibleTitle?: boolean;
+    /**
+     * Array con la configuración de cada step.
+     */
+    steps: Step[];
+    /**
+     * Datos adicionales para evaluar visibilityCondition de los steps.
+     * Por ejemplo, objectId para determinar si mostrar steps después del submit inicial.
+     */
+    visibilityData?: VisibilityData;
+    /**
+     * Indica que tipo de indicador se usará en el Stepper.
+     * Puede ser 'number' para números o 'dot' para puntos.
+     */
+    indicatorType?: IndicatorType;
+    /**
+     * "orientation" define la orientación del Stepper.
+     */
+    orientation?: Orientation;
+    /**
+     * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Clase personalizada para el Stepper.
+     */
+    className?: string;
+}
+/**
+ * Props del StepperContent
+ */
+export interface StepperContentProps {
+    /**
+     * Array de componentes Step
+     */
+    children: ReactElement<typeof StepComponent>[];
+}
+/**
+ * Props del Step
+ */
+export interface StepProps {
+    /**
+     * Clave única del step que determina cuándo se renderiza
+     */
+    stepKey: string;
+    /**
+     * Contenido del step
+     */
+    children: ReactNode;
+}
+/**
+ * Props del ContentArea
+ */
+export interface ContentAreaProps {
+    children: ReactNode;
+}
+/**
+ * Props del Indicator
+ */
+export interface IndicatorProps {
+    /**
+     * El número del paso actual.
+     */
+    step: number;
+    /**
+     * Indica si el paso es el actual.
+     */
+    currentStep: number;
+    /**
+     * El número total de pasos.
+     */
+    totalSteps: number;
+    /**
+     * El índice original del paso en el array completo de pasos.
+     * Se usa para buscar el estado de validación en stepValidationStatus.
+     */
+    originalStepIndex: number;
+}
+/**
+ * Props del StepperFooter
+ */
+export interface StepperFooterProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterLeftActions
+ */
+export interface StepperFooterLeftActionsProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterRightActions
+ */
+export interface StepperFooterRightActionsProps {
+    children?: ReactNode;
+}
+export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, Record<string, unknown> {
+    step?: number;
+    currentStep?: number;
+    totalSteps?: number;
+    orientation?: Orientation;
+    indicatorType?: IndicatorType;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    stepValidationStatus?: Record<number, boolean>;
+    isStepVisible?: boolean;
+}
+export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
+export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

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

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * TODO: Documentar
  */

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

@@ -6,10 +6,11 @@ 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 }) {
+function useCustomForm({ validationSchema, values, statusLoad, mode }) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues: values
+    defaultValues: values,
+    ...mode && { mode }
   });
   useEffect(() => {
     if (statusLoad === "reload_values_provider") {
@@ -41,8 +42,8 @@ function FormProviderCustom(props) {
   return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
 }
 function RHFormProvider(props) {
-  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className } = props;
-  const formMethods = useCustomForm({ validationSchema, statusLoad, values });
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+  const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldValues, FormProviderProps as RHFormProviderProps } from 'react-hook-form';
+import { FieldValues, FormProviderProps as RHFormProviderProps, Mode } from 'react-hook-form';
 export type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
 export type FormInitialValues = FieldValues;
 export interface FormProviderProps {
@@ -9,10 +9,12 @@ export interface FormProviderProps {
     validationSchema: any;
     statusLoad?: FormStatusLoad;
     className?: string;
+    mode?: Mode;
 }
 export type FormProviderCustomProps = RHFormProviderProps & FormProviderProps;
 export interface CustomFormArguments {
     values: FormInitialValues;
     validationSchema: any;
     statusLoad?: FormStatusLoad;
+    mode?: Mode;
 }

package/components/index.d.ts

@@ -51,3 +51,4 @@ export * from './ModalDialog';
 export * from './SettingsLayout';
 export * from './Pager';
 export * from './ScrollBar';
+export * from './Stepper';

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts

@@ -0,0 +1,11 @@
+import { Step } from '../../components/Stepper/types';
+import { GetStepsAndValidationSchemaProps } from './types';
+import * as Yup from 'yup';
+/**
+ * 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>>>>;
+    steps: Step[];
+};

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js

@@ -0,0 +1,44 @@
+import * as Yup from "yup";
+import { e as evaluateVisibilityStepCondition } from "../../components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
+function getStepsAndValidationSchema({
+  steps,
+  visibilityData
+}) {
+  const validationSchema = (() => {
+    const combinedValidations = {};
+    const visibleSteps = steps.filter((step) => {
+      if (!step.visibilityCondition) {
+        return true;
+      }
+      return evaluateVisibilityStepCondition(step, void 0, visibilityData);
+    });
+    visibleSteps.forEach((step) => {
+      if (step.validationFunction) {
+        const validationResult = step.validationFunction();
+        Object.assign(combinedValidations, validationResult);
+      }
+    });
+    return Yup.object().shape(combinedValidations);
+  })();
+  const processedSteps = steps.map((step) => {
+    let validationFields = [];
+    if (step.validationFunction) {
+      const validationResult = step.validationFunction();
+      validationFields = Object.keys(validationResult);
+    }
+    const processedStep = {
+      ...step,
+      // Incluir todas las propiedades del step original
+      validationFields
+      // Agregar validationFields calculados
+    };
+    return processedStep;
+  });
+  return {
+    validationSchema,
+    steps: processedSteps
+  };
+}
+export {
+  getStepsAndValidationSchema as g
+};

package/helpers/getStepsAndValidationSchema/index.d.ts

@@ -0,0 +1,2 @@
+export { getStepsAndValidationSchema } from './getStepsAndValidationSchema';
+export * from './types';

package/helpers/getStepsAndValidationSchema/index.js

@@ -0,0 +1 @@
+

package/helpers/getStepsAndValidationSchema/types.d.ts

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

package/helpers/getStepsAndValidationSchema/types.js

@@ -0,0 +1 @@
+

package/helpers/index.d.ts

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

package/helpers/index.js

@@ -0,0 +1 @@
+

package/index.d.ts

@@ -8,4 +8,5 @@ export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
 export * from './utils';
+export * from './helpers';
 export type { M4LOverridesStyleRules } from './@types/augmentations';

package/index.js

@@ -194,38 +194,52 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { F as F3, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
-import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
-import { u as u17 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u16 } from "./components/Stepper/hooks/useStepper/index.js";
+import { S as S11 } from "./components/Stepper/Stepper.js";
+import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
+import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
+import { S as S14 } from "./components/Stepper/subcomponents/StepperFooter/index.js";
+import { S as S15 } from "./components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js";
+import { S as S16 } from "./components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js";
+import { S as S17 } from "./components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js";
+import { S as S18 } from "./components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js";
+import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js";
+import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
+import { e as e3 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
+import { g as g29 } from "./components/Stepper/dictionary.js";
+import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormContext/index.js";
+import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
+import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
-import { u as u18 } from "./hooks/useFormAddEdit/index.js";
-import { u as u19 } from "./hooks/useModal/index.js";
-import { u as u20 } from "./hooks/useTab/index.js";
-import { g as g30 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u21 } from "./hooks/useFormFocus/index.js";
-import { u as u22 } from "./hooks/useInterval/index.js";
-import { u as u23 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u24 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u25 } from "./hooks/useStateRef/index.js";
-import { S as S11 } from "./hooks/useSvgColor/constants.js";
-import { u as u26 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u27 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u28 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u29 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u30 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u19 } from "./hooks/useFormAddEdit/index.js";
+import { u as u20 } from "./hooks/useModal/index.js";
+import { u as u21 } from "./hooks/useTab/index.js";
+import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";
+import { u as u22 } from "./hooks/useFormFocus/index.js";
+import { u as u23 } from "./hooks/useInterval/index.js";
+import { u as u24 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u25 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u26 } from "./hooks/useStateRef/index.js";
+import { S as S21 } from "./hooks/useSvgColor/constants.js";
+import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u31 } from "./hooks/useIsVisible/useIsVisible.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
-import { g as g31 } from "./utils/getComponentUtilityClass.js";
-import { g as g32 } from "./utils/getPaletteColor.js";
-import { g as g33 } from "./utils/getTypographyStyles.js";
-import { g as g34 } from "./utils/getIconColor.js";
-import { a as a16, g as g35 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { g as g32 } from "./utils/getComponentUtilityClass.js";
+import { g as g33 } from "./utils/getPaletteColor.js";
+import { g as g34 } from "./utils/getTypographyStyles.js";
+import { g as g35 } from "./utils/getIconColor.js";
+import { a as a16, g as g36 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g36, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g37, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g37 } from "./utils/getValidDate.js";
-import { g as g38 } from "./utils/getNullGuard.js";
+import { g as g38 } from "./utils/getValidDate.js";
+import { g as g39 } from "./utils/getNullGuard.js";
+import { g as g40 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -360,7 +374,7 @@ export {
   R as Resizable,
   R2 as ResizableBox,
   R4 as Responsive,
-  S11 as SKELETON_SVG_ICON,
+  S21 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,
   S4 as Select,
@@ -371,6 +385,16 @@ export {
   S2 as SortCompareValues,
   S3 as SplitLayout,
   S6 as Stack,
+  S13 as Step,
+  S11 as Stepper,
+  S19 as StepperCancelButton,
+  S12 as StepperContent,
+  S14 as StepperFooter,
+  S15 as StepperFooterLeftActions,
+  S16 as StepperFooterRightActions,
+  S17 as StepperNextButton,
+  S18 as StepperPrevButton,
+  S20 as StepperSubmitButton,
   T10 as TOGGLE_BUTTON_KEY_COMPONENT,
   a8 as TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY,
   T14 as TOGGLE_ICON_BUTTON_KEY_COMPONENT,
@@ -406,29 +430,30 @@ export {
   c as createToaster,
   d as defaultCommonActionsDictionary,
   d2 as dragResizeWindowRNDClasses,
+  e3 as evaluateVisibilityStepCondition,
   f as formatDistanceToNow,
   g as getAccountPopoverDictionary,
   g2 as getAppBarDictionary,
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g36 as getComponentClasses,
+  g37 as getComponentClasses,
   a17 as getComponentSlotRoot,
-  g31 as getComponentUtilityClass,
+  g32 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
   g17 as getDistanceToNowFormatterComponentsDictionary,
   g7 as getDynamicFilterComponentsDictionary,
   a6 as getDynamicSortComponentsDictionary,
   a5 as getFilterGroupFieldsByName,
-  g29 as getFormComponentsDictionary,
+  g30 as getFormComponentsDictionary,
   g15 as getFormatConcatenated,
   g12 as getFormatDate,
   g14 as getFormatPoints,
   g16 as getFormatPrice,
   g18 as getFormattersComponentsDictionary,
   a16 as getHeightSizeStyles,
-  g34 as getIconColor,
+  g35 as getIconColor,
   g8 as getIsIfInDynamicFilter,
   g22 as getLoadingErrorComponentsDictionary,
   g24 as getMFLoaderComponentsDictionary,
@@ -437,27 +462,29 @@ export {
   g28 as getModalDictionary,
   g26 as getNoItemPrivilegesComponentsDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g38 as getNullGuard,
+  g39 as getNullGuard,
   g27 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
-  g32 as getPaletteColor,
+  g33 as getPaletteColor,
   g21 as getPeriodComponetsDictionary,
   g20 as getRHFAutocompleteAsyncComponentsDictionary,
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
-  g35 as getSizeStyles,
-  g33 as getTypographyStyles,
+  g36 as getSizeStyles,
+  g29 as getStepperComponentsDictionary,
+  g40 as getStepsAndValidationSchema,
+  g34 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g37 as getValidDate,
-  g30 as getformAddEditDictionary,
+  g38 as getValidDate,
+  g31 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,
   i2 as isValidDate,
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u17 as useAppearanceComponentStore,
+  u18 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
   u11 as useColumnChipStatus,
@@ -469,24 +496,25 @@ export {
   u8 as useColumnPrice,
   u9 as useColumnSetCheck,
   u10 as useColumnUncertanity,
-  u23 as useComponentSize,
-  u16 as useCustomForm,
-  u28 as useDataGridPersistence,
-  u27 as useDynamicFilterAndSort,
+  u24 as useComponentSize,
+  u17 as useCustomForm,
+  u29 as useDataGridPersistence,
+  u28 as useDynamicFilterAndSort,
   u15 as useDynamicMFParameters,
   a11 as useDynamicMFParametersStore,
-  u18 as useFormAddEdit,
-  u21 as useFormFocus,
-  u24 as useFormReadyForUpdate,
+  u19 as useFormAddEdit,
+  u22 as useFormFocus,
+  u25 as useFormReadyForUpdate,
   u12 as useFormatPeriod,
-  u22 as useInterval,
-  u30 as useIsVisible,
-  u19 as useModal,
-  u29 as usePopoverContainer,
+  u23 as useInterval,
+  u31 as useIsVisible,
+  u20 as useModal,
+  u30 as usePopoverContainer,
   u13 as usePopupsStore,
-  u25 as useStateRef,
-  u26 as useSvgColor,
-  u20 as useTab,
+  u26 as useStateRef,
+  u16 as useStepper,
+  u27 as useSvgColor,
+  u21 as useTab,
   u14 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.13",
+  "version": "9.3.14",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {