@m4l/components 9.3.19 → 9.3.21-JAEBeta.0

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";
 import { A as AppliedFilters } from "../AppliedFilters/AppliedFilters.js";
 import { F as FilterActions } from "../FilterActions/FilterActions.js";
 import { P as PopoverFilter } from "../PopoverFilter/PopoverFilter.js";
 import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
-function DynamicFilterBase() {
+function DynamicFilterBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicFilterBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_FILTER_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_FILTER_KEY_COMPONENT, DynamicFilterSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicFilter/subcomponents/DynamicFilterBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicFilterBaseProps {
+    className?: string;
+}

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

@@ -52,7 +52,7 @@ function PopoverFilter() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicFilter/types.d.ts

@@ -273,6 +273,10 @@ rawFilters: Array<RawFilterFieldApply>) => void;
  * Propiedades que recibe el componente DynamicFilter
  */
 export interface DynamicFilterProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/DynamicSort/DynamicSort.js

@@ -5,13 +5,14 @@ import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
 import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
 const DynamicSort = forwardRef(
   (props, ref) => {
+    const { className, ...others } = props;
     const hasPresentFlags = useFlagsPresent([
       CommonFlags.FLAG_DICTIONARY_LOADED
     ]);
     if (!hasPresentFlags) {
       return null;
     }
-    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
+    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...others, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, { className }) });
   }
 );
 export {

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.d.ts

@@ -1,5 +1,6 @@
+import { DynamicSortBaseProps } from './types';
 /**
  * DynamicSortBase es un componente base que contiene los subcomponentes InputSort, AppliedSorts, SortActions y PopoverSort.
  */
-declare function DynamicSortBase(): import("react/jsx-runtime").JSX.Element;
+declare function DynamicSortBase(props: DynamicSortBaseProps): import("react/jsx-runtime").JSX.Element;
 export default DynamicSortBase;

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { I as InputSort } from "../InputSort/InputSort.js";
 import { A as AppliedSorts } from "../AppliedSorts/AppliedSorts.js";
 import { S as SortActions } from "../SortActions/SortActions.js";
 import { P as PopoverSort } from "../PopoverSort/PopoverSort.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
-function DynamicSortBase() {
+function DynamicSortBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicSortBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_SORT_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicSort/subcomponents/DynamicSortBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicSortBaseProps {
+    className?: string;
+}

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

@@ -51,7 +51,7 @@ function PopoverSort() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicSort/types.d.ts

@@ -106,6 +106,10 @@ rawSorts: Array<RawSortFieldApply>) => void;
  * Propiedades que recibe el componente DynamicSort
  */
 export interface DynamicSortProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/Image/Image.js

@@ -14,6 +14,8 @@ function Image(props) {
     dataTestId,
     className,
     cover,
+    width,
+    height,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -31,6 +33,7 @@ function Image(props) {
           ImgStyled,
           {
             ownerState: { ...ownerState },
+            style: { width, height },
             ...getPropDataTestId(IMAGE_KEY_COMPONENT, ImageSlots.root, dataTestId),
             ...others,
             className: clsx(IMAGE_CLASSES.root, className)
@@ -38,7 +41,7 @@ function Image(props) {
         ) })
       }
     );
-  }, [dataTestId, enableIntersectionObserver, others, ownerState, threshold, className]);
+  }, [enableIntersectionObserver, threshold, ownerState, width, height, dataTestId, others, className]);
   return lazyLoadComponent;
 }
 export {

package/components/MFLoader/MFLoader.js

@@ -30,7 +30,7 @@ function getDivScritId(prefix, moduleId) {
   };
 }
 function MFLoader(props) {
-  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools } = props;
+  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools, emergeType } = props;
   const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
   const { networkOperation } = useNetwork();
   const environment = useEnvironment();
@@ -74,7 +74,8 @@ function MFLoader(props) {
           axiosOperation,
           formatter,
           dynamicMFStore,
-          windowTools
+          windowTools,
+          emergeType
         );
       } catch (_e) {
       }

package/components/MFLoader/types.d.ts

@@ -1,5 +1,6 @@
 import { DynamicMFStore } from '../WindowBase/contexts/DynamicMFParmsContext/store';
 import { WindowToolsMF } from '../WindowBase/contexts';
+import { EmergeType } from '../areas/types';
 /**
  * Propiedades base de un microfrontend.
  */
@@ -33,4 +34,8 @@ export interface MFLoaderProps extends MFBaseProps {
      * Herramientas de ventana para el microfrontend.
      */
     windowTools: WindowToolsMF;
+    /**
+     * Tipo de lanzamiento de la ventana, popup, layout, modal
+     */
+    emergeType?: EmergeType;
 }

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -33,7 +33,7 @@ const useDetailFormatter = (type) => {
                 title: getLabel(`${DICTIONARY.LABEL_LOG_DETAIL}`),
                 onClose: closeModal,
                 variant: "outlined",
-                type: "modal",
+                emergeType: "modal",
                 children: /* @__PURE__ */ jsx(StackStyled, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialogComponent, { logId, type }) })
               }
             ),

package/components/Stepper/Stepper.styles.js

@@ -24,8 +24,13 @@ const stepperStyles = {
     flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp8
   }),
+  /**
+   * Estilos para el contenido del paso dentro del Stepper.
+   */
   stepContent: ({ ownerState }) => ({
-    display: ownerState?.isStepVisible ? "block" : "none"
+    height: "100%",
+    display: ownerState?.isStepVisible ? "flex" : "none",
+    flexDirection: "column"
   }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.
@@ -71,8 +76,7 @@ const stepperStyles = {
     const isLastStep = step === totalSteps - 1;
     return {
       cursor: "pointer",
-      display: "flex",
-      visibility: ownerState?.isStepVisible ? "visible" : "hidden",
+      display: ownerState?.isStepVisible ? "flex" : "none",
       flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
       alignItems: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "start",
       justifyContent: ownerState?.visibleTitle ? "space-between" : "center",
@@ -126,7 +130,7 @@ const stepperStyles = {
     whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
-      color: (ownerState?.currentStep ?? 0) > (ownerState?.step ?? 0) ? theme.vars.palette.primary.semanticText : (ownerState?.currentStep ?? 0) === (ownerState?.step ?? 0) ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary,
+      color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
@@ -134,13 +138,12 @@ const stepperStyles = {
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
   indicator: ({ theme, ownerState }) => {
-    const currentStep = ownerState?.currentStep ?? 0;
     const step = ownerState?.step ?? 0;
     const totalSteps = ownerState?.totalSteps ?? 0;
-    const isCompleted = currentStep > step;
-    const isCurrent = currentStep === step;
+    const isCompleted = ownerState?.isCompleted ?? false;
+    const isCurrent = ownerState?.isCurrent ?? false;
+    const isValidStep = ownerState?.isValidStep ?? true;
     const isLastStep = step === totalSteps - 1;
-    const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
     return {
       ...ownerState?.orientation === "horizontal" ? {
         marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
@@ -150,7 +153,7 @@ const stepperStyles = {
       justifyContent: "center",
       flexShrink: 0,
       order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
-      background: isCompleted ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : !isValidStep ? theme.vars.palette.error.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : isCurrent ? theme.vars.palette.primary.enabled : theme.vars.palette.default.enabled,
+      background: !isValidStep && ownerState?.hasBeenValidated ? theme.vars.palette.error.enabled : isCompleted && isValidStep ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : isCurrent ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.default.enabled,
       borderRadius: theme.vars.size.borderRadius.r2,
       ...ownerState?.indicatorType === "number" && !theme.generalSettings.isMobile && {
         boxShadow: isCurrent ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
@@ -178,13 +181,13 @@ const stepperStyles = {
    * Estilos para el número de texto dentro del indicador numérico del Stepper.
    */
   textNumber: ({ theme, ownerState }) => {
-    const currentStep = ownerState?.currentStep ?? 0;
-    const step = ownerState?.step ?? 0;
-    const isCompleted = currentStep > step;
-    const isCurrent = currentStep === step;
+    const isCompleted = ownerState?.isCompleted ?? false;
+    const isCurrent = ownerState?.isCurrent ?? false;
+    const isValidStep = ownerState?.isValidStep ?? true;
+    const hasBeenValidated = ownerState?.hasBeenValidated ?? false;
     return {
       "&.M4LTypography-root": {
-        color: isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
+        color: !isValidStep && hasBeenValidated ? theme.vars.palette.error.contrastText : isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
       }
     };
   },

package/components/Stepper/helpers/getInitialFieldValues/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Obtiene los valores iniciales de campos específicos del formulario.
+ * Se usa para inicializar el ref que trackea cambios en los campos.
+ * @param allValues - Todos los valores del formulario (de getValues())
+ * @param fields - Lista de nombres de campos de los que queremos obtener valores
+ * @returns Objeto con solo los valores de los campos especificados
+ * @example
+ * const formValues = { name: 'John', age: 25, city: 'NY', country: 'USA' };
+ * getInitialFieldValues(formValues, ['name', 'age'])
+ * // Retorna: { name: 'John', age: 25 }
+ */
+export declare function getInitialFieldValues(allValues: Record<string, any>, fields?: string[]): Record<string, any>;

package/components/Stepper/helpers/getInitialFieldValues/index.js

@@ -0,0 +1,14 @@
+function getInitialFieldValues(allValues, fields = []) {
+  if (fields.length === 0) {
+    return {};
+  }
+  return fields.reduce((acc, field) => {
+    if (field in allValues) {
+      acc[field] = allValues[field];
+    }
+    return acc;
+  }, {});
+}
+export {
+  getInitialFieldValues as g
+};

package/components/Stepper/helpers/index.d.ts

@@ -2,3 +2,5 @@ export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepConditi
 export { findNextVisibleValidStep } from './findNextVisibleValidStep';
 export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
+export { parseWatchedValues } from './parseWatchedValues';
+export { getInitialFieldValues } from './getInitialFieldValues';

package/components/Stepper/helpers/parseWatchedValues/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Convierte los valores observados de useWatch en un objeto estructurado con los nombres de campos como keys.
+ *
+ * useWatch de react-hook-form retorna diferentes estructuras según la cantidad de campos observados:
+ * - Un solo campo: retorna el valor directamente
+ * - Múltiples campos: retorna un array con los valores en el mismo orden de los campos
+ * @param watchValues - Valores observados de useWatch (puede ser un valor único o un array)
+ * @param fields - Lista de nombres de campos que se están observando
+ * @returns Objeto con los valores actuales mapeados a sus respectivos nombres de campo
+ * @example
+ * // Para un solo campo
+ * parseWatchedValues('John', ['name']) // { name: 'John' }
+ *
+ * // Para múltiples campos
+ * parseWatchedValues(['John', 25], ['name', 'age']) // { name: 'John', age: 25 }
+ */
+export declare function parseWatchedValues(watchValues: any, fields: string[]): Record<string, any>;

package/components/Stepper/helpers/parseWatchedValues/index.js

@@ -0,0 +1,12 @@
+function parseWatchedValues(watchValues, fields) {
+  if (fields.length === 1) {
+    return { [fields[0]]: watchValues };
+  }
+  return fields.reduce((acc, field, index) => {
+    acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
+    return acc;
+  }, {});
+}
+export {
+  parseWatchedValues as p
+};

package/components/Stepper/hooks/useDynamicValidation/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
+ * @returns Objeto con funciones para manejar la validación dinámica
+ */
+export declare function useDynamicValidation(): {
+    activateFieldsValidation: (fields: string[], skipIfValidating?: boolean) => void;
+    clearAllValidation: () => void;
+    activeFields: string[];
+    startExternalValidation: () => void;
+    endExternalValidation: () => void;
+};

package/components/Stepper/hooks/useDynamicValidation/index.js

@@ -0,0 +1,69 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { p as parseWatchedValues } from "../../helpers/parseWatchedValues/index.js";
+import { g as getInitialFieldValues } from "../../helpers/getInitialFieldValues/index.js";
+function useDynamicValidation() {
+  const { trigger, getValues } = useFormContext();
+  const [activeFields, setActiveFields] = useState([]);
+  const [isValidating, setIsValidating] = useState(false);
+  const statusLoad = useWatch({
+    name: "statusLoad"
+  });
+  const watchValues = useWatch({
+    name: activeFields.length > 0 ? activeFields : ["__dummy__"]
+  });
+  const lastValuesRef = useRef({});
+  useEffect(() => {
+    if (activeFields.length === 0 || statusLoad !== "ready" || isValidating) {
+      return;
+    }
+    const currentValues = parseWatchedValues(watchValues, activeFields);
+    const changedFields = activeFields.filter((field) => {
+      const currentValue = currentValues[field];
+      const lastValue = lastValuesRef.current[field];
+      const hasChanged = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
+      if (hasChanged) {
+        lastValuesRef.current[field] = currentValue;
+      }
+      return hasChanged;
+    });
+    if (changedFields.length > 0) {
+      const timeoutId = setTimeout(() => {
+        trigger(changedFields);
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [activeFields, trigger, watchValues, statusLoad, isValidating]);
+  const startExternalValidation = useCallback(() => {
+    setIsValidating(true);
+  }, []);
+  const endExternalValidation = useCallback(() => {
+    setIsValidating(false);
+  }, []);
+  const activateFieldsValidation = useCallback(
+    (fields, skipIfValidating = true) => {
+      if (skipIfValidating && isValidating) {
+        return;
+      }
+      const formValues = getValues();
+      setActiveFields(fields);
+      const initialValues = getInitialFieldValues(formValues, fields);
+      lastValuesRef.current = initialValues;
+    },
+    [getValues, isValidating]
+  );
+  const clearAllValidation = useCallback(() => {
+    setActiveFields([]);
+    lastValuesRef.current = {};
+  }, []);
+  return {
+    activateFieldsValidation,
+    clearAllValidation,
+    activeFields,
+    startExternalValidation,
+    endExternalValidation
+  };
+}
+export {
+  useDynamicValidation as u
+};

package/components/Stepper/hooks/useStepperActions/index.js

@@ -2,8 +2,10 @@ import { useCallback } from "react";
 import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 import { shallow } from "zustand/shallow";
+import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
 function useStepperActions() {
   const { trigger, clearErrors, getValues, reset } = useFormContext();
+  const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
   const {
     nextStep,
     prevStep,
@@ -41,9 +43,20 @@ function useStepperActions() {
       if (fieldsToValidate.length === 0) {
         return true;
       }
-      return await trigger(fieldsToValidate);
+      const result = await trigger(fieldsToValidate);
+      if (!result) {
+        activateFieldsValidation(fieldsToValidate);
+      }
+      return result;
     };
     const success = await nextStep(validateFn, formData);
+    if (success) {
+      const currentStepData = steps[currentStep - 1];
+      const fieldsJustValidated = currentStepData?.validationFields || [];
+      if (fieldsJustValidated.length > 0) {
+        clearAllValidation();
+      }
+    }
     if (success && futureFields.length > 0) {
       clearErrors(futureFields);
       setTimeout(() => {
@@ -62,13 +75,16 @@ function useStepperActions() {
     steps,
     currentStep,
     trigger,
-    getValues
+    getValues,
+    activateFieldsValidation,
+    clearAllValidation
   ]);
   const cancelAction = useCallback(() => {
     reset();
     clearErrors();
+    clearAllValidation();
     resetStepper();
-  }, [reset, clearErrors, resetStepper]);
+  }, [reset, clearErrors, clearAllValidation, resetStepper]);
   return { prevStepAction, nextStepAction, cancelAction };
 }
 export {

package/components/Stepper/store/StepperStore/index.js

@@ -35,6 +35,18 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               if (!preserveStepValidationStatus) {
                 state.stepValidationStatus = {};
               }
+              if (!preserveStepValidationStatus) {
+                const firstVisibleStepIndex = findNextVisibleValidStep(
+                  -1,
+                  // Comenzar desde -1 para encontrar el primer step visible
+                  steps,
+                  {},
+                  state.visibilityData
+                );
+                if (firstVisibleStepIndex !== 0 && firstVisibleStepIndex < steps.length) {
+                  state.currentStep = firstVisibleStepIndex;
+                }
+              }
             });
           },
           /**
@@ -114,9 +126,16 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           resetStepper: () => {
             set((state) => {
-              state.currentStep = 0;
               state.stepValidationStatus = {};
               state.isValidating = false;
+              const firstVisibleStepIndex = findNextVisibleValidStep(
+                -1,
+                // Comenzar desde -1 para encontrar el primer step visible
+                state.steps,
+                {},
+                state.visibilityData
+              );
+              state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
           }
         }