@m4l/components 9.3.13 → 9.3.15

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/WindowBase/WindowBase.styles.js

@@ -291,7 +291,7 @@ const windowBaseStyles = {
           }
         }
       },
-      "&.MuiButtonBase-root:not(:hover, :active, :focus) .M4LIcon-root .M4LIcon-icon": {
+      "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .M4LIcon-icon": {
         backgroundColor: `${theme.vars.palette.text.disabled} !important`
       }
     },

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/components/mui_extended/Autocomplete/types.d.ts

@@ -8,30 +8,72 @@ import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 export type GetOptionString<T> = (option: T | null) => string;
 export type AutocompleteVariants = 'outlined' | 'text';
 export interface BaseAutocompleteProps {
+    /**
+     * The size of the autocomplete input field.
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * The variant of the autocomplete (e.g., outlined, contained, text).
+     */
     variant?: AutocompleteVariants;
+    /**
+     * Custom data-testid for testing purposes.
+     */
     dataTestid?: string;
 }
 /**
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
  */
-export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled'>, Pick<TextFieldProps, 'error'>, BaseAutocompleteProps {
+export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled' | 'open'>, Pick<TextFieldProps, 'error' | 'focused'>, BaseAutocompleteProps {
+    /**
+     * Indica si el campo de texto está en modo de solo lectura.
+     * readOnly={true}
+     */
+    readOnly?: boolean;
+    /**
+     * The placeholder of the autocomplete.
+     * placeholder={}
+     */
+    placeholder?: string;
+    /**
+     * Whether multiple selections are allowed.
+     * multiple={true}
+     */
     multiple?: boolean;
     /**
      * The value of the autocomplete, supports single or multiple selection.
      * Extended to include `null` for controlled components.
      */
-    value: T | T[] | null | null | undefined;
+    value: T | T[] | null | undefined;
+    /**
+     * Function to get the label for a given option.
+     */
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<false>) => string;
+    /**
+     * Function to compare if an option matches the selected value.
+     */
     isOptionEqualToValue: (option: T, value: T) => boolean;
     /**
      * Function to refresh the options.
      */
     refresh?: () => void;
+    /**
+     * Callback for filtering options based on user input.
+     */
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+    /**
+     * Function to get the image URL for a given option (only for `type: 'image'`).
+     */
     getOptionUrlImage?: (option: T) => string;
+    /**
+     * se cambia el nativo de Autocomplete por este, debido a que el value esta disponible para procesar
+     * Handler for when the selected value changes.
+     */
     onChange: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
+    /**
+     * "htmlFor" attribute for the autocomplete field.
+     */
     htmlFor?: string;
 }
 /**
@@ -41,6 +83,7 @@ export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'siz
     error?: boolean;
     disabled?: boolean;
     multiple?: boolean;
+    readOnly?: boolean;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

package/components/mui_extended/Badge/Badge.styles.js

@@ -24,11 +24,13 @@ const badgeStyles = {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.baseSpacings.sp5,
         width: ownerState?.displayBadgeContent ? "26px" : theme.vars.size.baseSpacings.sp5,
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       } : {
         height: theme.vars.size.baseSpacings["sp3-5"],
         width: ownerState?.displayBadgeContent ? "23px" : theme.vars.size.baseSpacings["sp3-5"],
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       },
       // Estilos para variantes
       ...ownerState?.BadgeVariant === "dot" && {

package/components/mui_extended/IconButton/IconButton.js

@@ -88,7 +88,12 @@ const IconButton = forwardRef((props, ref) => {
           color,
           role: "button",
           ...other,
-          className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+          className: clsx(
+            ICON_BUTTON_CLASSES[variant],
+            ICON_BUTTON_CLASSES.styledMUIIconButton,
+            selected && ICON_BUTTON_CLASSES.selected,
+            className
+          ),
           children: renderIcon(icon || src)
         }
       )
@@ -104,7 +109,12 @@ const IconButton = forwardRef((props, ref) => {
       "data-testid": "IconButtonRoot",
       color,
       ...other,
-      className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+      className: clsx(
+        ICON_BUTTON_CLASSES[variant],
+        ICON_BUTTON_CLASSES.styledMUIIconButton,
+        selected && ICON_BUTTON_CLASSES.selected,
+        className
+      ),
       children: renderIcon(icon || src)
     }
   );

package/components/mui_extended/IconButton/IconButton.styles.js

@@ -13,7 +13,7 @@ const iconButtonStyles = {
         overflow: "hidden",
         cursor: ownerState?.disabled ? "not-allowed" : "pointer",
         color: theme.vars.palette.text.primary,
-        borderRadius: theme.size.borderRadius.r1,
+        borderRadius: theme.size.borderRadius["r1-5"],
         pointerEvents: ownerState?.disabled ? "none" : "auto",
         display: ownerState?.isSkeleton ? "none" : "flex",
         justifyContent: "center",
@@ -47,24 +47,24 @@ const iconButtonStyles = {
           // Estilos para la variante contained
           ...ownerState?.variant === "contained" && {
             // 🎯 Color de fondo según variante y color del componente
-            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
+            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : ownerState?.color === "success" ? theme.vars.palette.success.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
               backgroundColor: ownerState?.variant === "contained" ? theme.vars.palette.primary.contrastText : paletteColor.semanticText
             }
           },
           // Estilos para la variante text
           ...ownerState.variant === "outline" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             border: theme.vars.size.borderStroke.actionInput,
             borderColor: ownerState.color === "default" ? theme.vars.palette.primary.active : paletteColor.active,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           },
           ...ownerState.variant === "text" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           }
         } : {
@@ -128,7 +128,7 @@ const iconButtonStyles = {
             backgroundColor: paletteColor.enabled,
             // 🖼️ Color del icono
             "&&& .M4LIcon-icon": {
-              backgroundColor: paletteColor.semanticText
+              backgroundColor: ownerState?.color === "default" ? paletteColor.semanticText : paletteColor.contrastText
             },
             // 🖱️ Estado Hover
             "&:hover": {

package/components/mui_extended/IconButton/constants.js

@@ -1,7 +1,14 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { I as IconButtonSlots } from "./slots/IconButtonEnum.js";
 const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
-const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonSlots);
+const IconButtonComplementaryClasses = {
+  selected: "selected"
+};
+const IconButtonCombineClasses = {
+  ...IconButtonSlots,
+  ...IconButtonComplementaryClasses
+};
+const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonCombineClasses);
 export {
   ICON_BUTTON_CLASSES as I,
   ICON_BUTTON_KEY_COMPONENT as a

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';