@m4l/components 9.3.39 → 9.3.41-JT04122025.beta.1

package/{helpers → components/Stepper/helpers}/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts

@@ -1,11 +1,11 @@
-import { Step } from '../../components/Stepper/types';
+import { Step } from '../../types';
 import { GetStepsAndValidationSchemaProps } from './types';
-import { RHFormValues } from '../../components/hook-form/RHFormProvider/types';
+import { RHFormValues } from '../../../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<T extends RHFormValues>({ steps, visibilityData, }: GetStepsAndValidationSchemaProps<T>): {
-    validationSchema: import('../../components/hook-form/RHFormProvider/types').ValidationSchema<T>;
+export declare function getStepsAndValidationSchema<T extends RHFormValues>({ steps, }: GetStepsAndValidationSchemaProps<T>): {
+    validationSchema: import('../../../hook-form/RHFormProvider/types').ValidationSchema<T>;
     steps: Step[];
 };

package/{helpers → components/Stepper/helpers}/getStepsAndValidationSchema/getStepsAndValidationSchema.js

@@ -1,24 +1,18 @@
-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";
+import { b as createValidationPartialObject, c as createValidationSchema, a as createValidationFullObject } from "../../../hook-form/RHFormProvider/schema.js";
 function getStepsAndValidationSchema({
-  steps,
-  visibilityData
+  steps
 }) {
   const validationSchema = (() => {
     const combinedValidations = createValidationPartialObject({});
-    const visibleSteps = steps.filter((step) => {
-      if (!step.visibilityCondition) {
-        return true;
-      }
-      return evaluateVisibilityStepCondition(step, void 0, visibilityData);
-    });
-    visibleSteps.forEach((step) => {
+    steps.forEach((step) => {
       if (step.validationFunction) {
         const validationResult = step.validationFunction();
         Object.assign(combinedValidations, validationResult);
       }
     });
-    return createValidationSchema(createValidationFullObject(combinedValidations));
+    return createValidationSchema(
+      createValidationFullObject(combinedValidations)
+    );
   })();
   const processedSteps = steps.map((step) => {
     let validationFields = [];

package/{helpers → components/Stepper/helpers}/getStepsAndValidationSchema/types.d.ts

@@ -1,5 +1,5 @@
-import { RHFormValues, ValidationPartialObject } from '../../components/hook-form/RHFormProvider/types';
-import { Step } from '../../components/Stepper/types';
+import { RHFormValues, ValidationPartialObject } from '../../../hook-form/RHFormProvider/types';
+import { Step } from '../../types';
 /**
  * Configuración completa de un step con validaciones incluidas
  */
@@ -16,7 +16,10 @@ export interface GetStepsAndValidationSchemaProps<T extends RHFormValues> {
      */
     steps: StepWithValidation<T>[];
     /**
-     * Datos adicionales para visibilityCondition (ej: objectId)
+     * @deprecated Esta propiedad ya no se utiliza en el helper.
+     * El schema ahora incluye validaciones de TODOS los steps, no solo los visibles.
+     * visibilityData se debe pasar directamente al componente Stepper para evaluar
+     * visibilityCondition en tiempo real. Se eliminará en futuras versiones.
      */
     visibilityData?: any;
 }

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

@@ -1,5 +1,6 @@
 /**
- * Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
+ * 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(): {

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

@@ -3,7 +3,7 @@ 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 { trigger, getValues, clearErrors } = useFormContext();
   const [activeFields, setActiveFields] = useState([]);
   const [isValidating, setIsValidating] = useState(false);
   const statusLoad = useWatch({
@@ -13,6 +13,8 @@ function useDynamicValidation() {
     name: activeFields.length > 0 ? activeFields : ["__dummy__"]
   });
   const lastValuesRef = useRef({});
+  const pendingFieldsRef = useRef(/* @__PURE__ */ new Set());
+  const validationTimeoutRef = useRef(null);
   useEffect(() => {
     if (activeFields.length === 0 || statusLoad !== "ready" || isValidating) {
       return;
@@ -28,12 +30,30 @@ function useDynamicValidation() {
       return hasChanged;
     });
     if (changedFields.length > 0) {
-      const timeoutId = setTimeout(() => {
-        trigger(changedFields);
-      }, 100);
-      return () => clearTimeout(timeoutId);
+      changedFields.forEach((field) => pendingFieldsRef.current.add(field));
+      if (validationTimeoutRef.current) {
+        clearTimeout(validationTimeoutRef.current);
+      }
+      validationTimeoutRef.current = setTimeout(async () => {
+        const fieldsToValidate = Array.from(pendingFieldsRef.current);
+        pendingFieldsRef.current.clear();
+        validationTimeoutRef.current = null;
+        for (const field of fieldsToValidate) {
+          const isValid = await trigger(field);
+          if (isValid) {
+            clearErrors(field);
+          }
+        }
+      }, 150);
     }
-  }, [activeFields, trigger, watchValues, statusLoad, isValidating]);
+  }, [
+    activeFields,
+    trigger,
+    clearErrors,
+    watchValues,
+    statusLoad,
+    isValidating
+  ]);
   const startExternalValidation = useCallback(() => {
     setIsValidating(true);
   }, []);
@@ -55,6 +75,11 @@ function useDynamicValidation() {
   const clearAllValidation = useCallback(() => {
     setActiveFields([]);
     lastValuesRef.current = {};
+    pendingFieldsRef.current.clear();
+    if (validationTimeoutRef.current) {
+      clearTimeout(validationTimeoutRef.current);
+      validationTimeoutRef.current = null;
+    }
   }, []);
   return {
     activateFieldsValidation,

package/components/Stepper/index.d.ts

@@ -10,5 +10,6 @@ export { StepperPrevButton } from './subcomponents/StepperButtons/StepperPrevBut
 export { StepperCancelButton } from './subcomponents/StepperButtons/StepperCancelButton';
 export { StepperSubmitButton } from './subcomponents/StepperButtons/StepperSubmitButton';
 export { evaluateVisibilityStepCondition } from './helpers/evaluateVisibilityStepCondition';
+export { getStepsAndValidationSchema } from './helpers/getStepsAndValidationSchema';
 export { type Step as TypeStep } from './types';
 export { getStepperComponentsDictionary } from './dictionary';

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

@@ -38,7 +38,7 @@ const RHFActionsGroup = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const currentValue = value ?? null;
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -60,7 +60,7 @@ const RHFActionsGroup = (props) => {
                   actions,
                   value: currentValue,
                   onChange,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   ariaLabel,
                   ariaLabelledBy,
                   size,

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

@@ -73,7 +73,7 @@ function RHFAutocomplete(props) {
         {
           name: nameRHF,
           control,
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
             const [inputValue, setInputValue] = useState(
               getOptionLabelLocal(value)
             );
@@ -113,7 +113,7 @@ function RHFAutocomplete(props) {
                   },
                   onChangeFilterParmsLocal,
                   refresh,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   loading,
                   onOpen: onOpenLocal,
                   onClose: onCloseLocal,

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

@@ -38,7 +38,7 @@ const RHFCheckbox = forwardRef(function RHFCheckbox2(props, ref) {
     {
       name,
       control,
-      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+      render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(
             LabelComponent,
@@ -59,7 +59,7 @@ const RHFCheckbox = forwardRef(function RHFCheckbox2(props, ref) {
               size: adjustedSize,
               onChange,
               checked: value,
-              disabled: disabled ? true : false,
+              disabled: disabled || isSubmitting,
               disableRipple: true,
               inlineText,
               htmlFor: finalId,

package/components/hook-form/RHFColorPicker/RFHColorPicker.js

@@ -45,7 +45,7 @@ const RHFColorPicker = (props) => {
           name,
           control,
           defaultValue: "",
-          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => /* @__PURE__ */ jsx(
             ColorPickerField,
             {
               value,
@@ -56,7 +56,7 @@ const RHFColorPicker = (props) => {
               mandatory,
               mandatoryMessage,
               helperMessage,
-              disabled,
+              disabled: disabled || isSubmitting,
               isSkeleton,
               className,
               instaceDataTestId,

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

@@ -40,7 +40,7 @@ const RHFDatePicker = (props) => {
           name,
           control,
           defaultValue: null,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
             label && /* @__PURE__ */ jsx(
               Label,
               {
@@ -62,7 +62,7 @@ const RHFDatePicker = (props) => {
                 readOnly,
                 error,
                 size: currentSize,
-                disabled,
+                disabled: disabled || isSubmitting,
                 className
               }
             ),

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

@@ -43,7 +43,7 @@ function RHFDateTime(props) {
         {
           name: nameRHF,
           control,
-          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 Label,
@@ -62,7 +62,7 @@ function RHFDateTime(props) {
                 {
                   variant,
                   size: adjustedSize,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   inputRef: ref,
                   slotProps: {
                     field: {

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

@@ -42,7 +42,7 @@ const RHFNumberInput = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const onChangeLocal = (_event, newValue) => {
               onChange(newValue);
             };
@@ -69,7 +69,7 @@ const RHFNumberInput = (props) => {
                   value,
                   onChange: onChangeLocal,
                   variant,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   startAdornment,
                   endAdornment,
                   error: !!error,

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

@@ -47,7 +47,7 @@ const RHFPeriod = (props) => {
           name: name || "",
           control,
           defaultValue: { selPeriodTime: "", singleValue: "" },
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 Label,
@@ -64,7 +64,7 @@ const RHFPeriod = (props) => {
                 {
                   name,
                   control,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   value,
                   onChange,
                   size

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -124,6 +124,7 @@ const Period = (props) => {
         variant: "outlined",
         value: singleValue,
         withDecimal: true,
+        disabled,
         onChange: (_event, newValue) => {
           onTotalChange(selPeriodTime, newValue);
         }

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

@@ -36,7 +36,7 @@ const RHFSelect = (props) => {
     {
       name,
       control,
-      render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+      render: ({ field: { value, onChange, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
         const onChangeLocal = (opt) => {
           if (!opt) {
             onChange(null);
@@ -75,7 +75,7 @@ const RHFSelect = (props) => {
               variant,
               value,
               onChange: onChangeLocal,
-              disabled,
+              disabled: disabled || isSubmitting,
               className: RHFSELECT_CLASSES.select,
               error: Boolean(error),
               placeholder,

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

@@ -60,7 +60,7 @@ const RHFTextField = forwardRef((props, ref) => {
         {
           name,
           control,
-          render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error }, formState: { isSubmitting } }) => {
             const onInternalChange = (event) => {
               const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
               const stringValue = String(finalValue || "");
@@ -83,7 +83,7 @@ const RHFTextField = forwardRef((props, ref) => {
                 TextFieldStyled,
                 {
                   ownerState: { ...ownerState, error: !!error },
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   inputRef,
                   ref,
                   InputLabelProps: { shrink: true },

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

@@ -28,7 +28,7 @@ const RHFTextFieldPassword = (props) => {
     {
       name,
       control,
-      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+      render: ({ field: { onChange, value, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
         const onInternalChange = (event) => {
           const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
           const stringValue = String(finalValue || "");
@@ -56,7 +56,7 @@ const RHFTextFieldPassword = (props) => {
               type: showPassword ? "text" : "password",
               size,
               error: !!error,
-              disabled,
+              disabled: disabled || isSubmitting,
               inputProps: {
                 role: "textbox",
                 "aria-label": name,

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js

@@ -15,6 +15,7 @@ function RHFUploadImage(props) {
     mandatoryMessage,
     maxSize,
     helperMessage,
+    disabled,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -25,7 +26,7 @@ function RHFUploadImage(props) {
     {
       name,
       control,
-      render: ({ field: { value, onChange }, fieldState: { error } }) => {
+      render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
         const checkError = !!error && !value;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(
@@ -56,6 +57,7 @@ function RHFUploadImage(props) {
                 onChange(null);
               },
               error: checkError,
+              disabled: disabled || isSubmitting,
               ...other,
               file: value,
               size: adjustedSize,

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/UploadImage.js

@@ -12,7 +12,7 @@ import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/
 import { g as getComponentClasses } from "../../../../../../utils/getComponentSlotRoot.js";
 import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
 const UploadImage = (props) => {
-  const { file, size, onDrop, onRemove, maxSize, dataTestId, error = false, multiple, ...other } = props;
+  const { file, size, onDrop, onRemove, maxSize, dataTestId, error = false, multiple, disabled, ...other } = props;
   const { currentSize } = useComponentSize(size);
   const { toast } = useHostTools();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
@@ -62,7 +62,8 @@ const UploadImage = (props) => {
                   variant: "contained",
                   icon: `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`,
                   onClick: onRemove,
-                  size: adjustedSize
+                  size: adjustedSize,
+                  disabled
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -100,7 +101,7 @@ const UploadImage = (props) => {
                 ] })
               ] })
             ] }),
-            !file ? /* @__PURE__ */ jsx(ButtonStyled, { variant: "contained", color: "primary", onClick: open, label: getLabel(getUploadImageDictionary(COMPONENTS_DICTIONARY_KEYS.click_button)), size: adjustedSize }) : null
+            !file ? /* @__PURE__ */ jsx(ButtonStyled, { variant: "contained", color: "primary", onClick: open, label: getLabel(getUploadImageDictionary(COMPONENTS_DICTIONARY_KEYS.click_button)), size: adjustedSize, disabled }) : null
           ]
         }
       )

package/components/hook-form/RHFUpload/RHFUploadImage/types.d.ts

@@ -6,6 +6,10 @@ import { UploadImageProps } from './subcomponents/UploadImage/types';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export interface RHFUploadImageProps extends Omit<UploadImageProps, 'file' | 'onDrop' | 'onRemove'>, Omit<LabelProps, 'size' | 'error' | 'disabled' | 'children'> {
     name: string;
+    /**
+     * Si es true, el componente estará deshabilitado.
+     */
+    disabled?: boolean;
 }
 export type RHFUploadImageSlotsType = keyof typeof Slots;
 export type RHFUploadImageOwnerState = {

package/components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js

@@ -9,7 +9,7 @@ import { R as RHFUploadSingleFileSlots } from "./slots/RHFUploadSingleFileEnum.j
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function RHFUploadSingleFile(props) {
   const { control } = useFormContext();
-  const { name, label, skeletonWidth, size, className, helperMessage, mandatory, mandatoryMessage, maxFileSize = DEFAULT_MAX_FILE_SIZE, dataTestId, accept = "*/*" } = props;
+  const { name, label, skeletonWidth, size, className, helperMessage, mandatory, mandatoryMessage, maxFileSize = DEFAULT_MAX_FILE_SIZE, dataTestId, accept = "*/*", disabled } = props;
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const acceptObj = {
@@ -28,7 +28,7 @@ function RHFUploadSingleFile(props) {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const errorUpload = !!error;
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -41,7 +41,8 @@ function RHFUploadSingleFile(props) {
                   mandatoryMessage,
                   helperMessage,
                   size: adjustedSize,
-                  skeletonWidth
+                  skeletonWidth,
+                  disabled
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -51,7 +52,8 @@ function RHFUploadSingleFile(props) {
                   accept: acceptObj,
                   file: value,
                   onChange,
-                  size: adjustedSize
+                  size: adjustedSize,
+                  disabled: disabled || isSubmitting
                 }
               ),
               errorUpload && /* @__PURE__ */ jsx(

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/Preview/Preview.js

@@ -4,7 +4,7 @@ import { d as ContainerPreviewStyled, e as ImagePreviewStyled, f as ContainerNam
 import { useEnvironment } from "@m4l/core";
 import { f as formatFileSize } from "../../helpers/formatFileSize.js";
 const Preview = (props) => {
-  const { file, onChange, onClose } = props;
+  const { file, onChange, onClose, disabled } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const icon = `${host_static_assets}/${environment_assets}/${FILES_ICONS[file.type] || FILES_ICONS["application/octet-stream"]}`;
   const closePreviewIcon = `${host_static_assets}/${environment_assets}/${CLOSE_PREVIEW_ICON}`;
@@ -25,7 +25,8 @@ const Preview = (props) => {
           e.stopPropagation();
           onChange && onChange(null);
           onClose();
-        }
+        },
+        disabled
       }
     )
   ] });

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/Preview/types.d.ts

@@ -1,5 +1,5 @@
 import { UploadSingleFileProps } from '../UploadSingleFile/types';
-export interface PreviewProps extends Pick<UploadSingleFileProps, 'onChange' | 'size'> {
+export interface PreviewProps extends Pick<UploadSingleFileProps, 'onChange' | 'size' | 'disabled'> {
     uploadProgress: number | null;
     file: File;
     onClose: () => void;

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/UploadSingleFile/index.js

@@ -11,7 +11,7 @@ import { u as uploadReducer } from "../../helpers/uploadReducer.js";
 import { f as formatFileSize } from "../../helpers/formatFileSize.js";
 import { g as getReadableFileType } from "../../helpers/getReadableFileType.js";
 function UploadSingleFile(props) {
-  const { file, accept, onChange, maxFileSize, size } = props;
+  const { file, accept, onChange, maxFileSize, size, disabled } = props;
   const { toast } = useHostTools();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -22,6 +22,7 @@ function UploadSingleFile(props) {
   });
   const { getRootProps, getInputProps } = useDropzone({
     multiple: false,
+    disabled,
     /**
      * Maneja el evento de drop del archivo
      */
@@ -60,9 +61,17 @@ function UploadSingleFile(props) {
       }
     }
   });
+  useEffect(() => {
+    if (!!file && !uploadState.validFile) {
+      dispatch({ type: "SET_VALID_FILE", payload: true });
+      dispatch({ type: "SET_PREVIEW", payload: true });
+    } else if (!file && uploadState.validFile) {
+      dispatch({ type: "RESET" });
+    }
+  }, [file, uploadState.validFile]);
   useEffect(() => {
     let interval;
-    if (uploadState.validFile && !!file) {
+    if (!!file && uploadState.validFile && !uploadState.preview) {
       interval = setInterval(() => {
         dispatch({ type: "SET_PROGRESS", payload: (uploadState.progress ?? 0) + 10 });
         if (uploadState.progress !== null && uploadState.progress >= 100) {
@@ -77,10 +86,10 @@ function UploadSingleFile(props) {
         clearInterval(interval);
       }
     };
-  }, [file, uploadState.progress, uploadState.validFile]);
+  }, [file, uploadState.progress, uploadState.validFile, uploadState.preview]);
   return /* @__PURE__ */ jsx(ContainerDropZoneStyled, { ownerState: {}, className: RHF_UPLOAD_SINGLE_FILE_CLASSES.containerDropZone, children: /* @__PURE__ */ jsxs(DropZoneStyled, { ...getRootProps(), ownerState: { isSkeleton }, className: RHF_UPLOAD_SINGLE_FILE_CLASSES.dropZone, children: [
     /* @__PURE__ */ jsx(BlockContent, { value: uploadState.progress, hidden: uploadState.preview, size }),
-    uploadState.preview && !!file && /* @__PURE__ */ jsx(Preview, { uploadProgress: uploadState.progress, file, onChange, onClose: () => dispatch({ type: "RESET" }), size }),
+    uploadState.preview && !!file && /* @__PURE__ */ jsx(Preview, { uploadProgress: uploadState.progress, file, onChange, onClose: () => dispatch({ type: "RESET" }), size, disabled }),
     !isSkeleton && /* @__PURE__ */ jsx("input", { role: "button", "aria-label": "button-upload-single-file", ...getInputProps() })
   ] }) });
 }

package/components/hook-form/RHFUpload/RHFUploadSingleFile/types.d.ts

@@ -33,6 +33,10 @@ export interface RHFUploadSingleFileProps extends Omit<LabelProps, 'size' | 'err
      * Tipos de archivos aceptados.
      */
     accept?: string;
+    /**
+     * Si es true, el componente estará deshabilitado.
+     */
+    disabled?: boolean;
 }
 export type RHFUploadSingleFileSlotsType = keyof typeof RHFUploadSingleFileSlots;
 export type RHFUploadSingleFileOwnerState = Pick<RHFUploadSingleFileProps, 'size' | 'variant'> & {

package/components/mui_extended/Tabs/Tabs.js

@@ -1,9 +1,55 @@
 import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/TabsSlots.js";
+import { useEnvironment } from "@m4l/core";
+import { T as TABS_ICONS } from "./icons.js";
+import React, { useMemo } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../IconButton/IconButton.js";
+const createScrollButtonIcon = (src, size) => {
+  const ScrollButtonIconComponent = React.forwardRef(
+    (props, _ref) => {
+      const { fontSize, ownerState, ...otherProps } = props;
+      const finalProps = {
+        src,
+        size,
+        ...otherProps
+      };
+      return /* @__PURE__ */ jsx(IconButton, { ...finalProps });
+    }
+  );
+  ScrollButtonIconComponent.displayName = "ScrollButtonIcon";
+  return ScrollButtonIconComponent;
+};
 const Tabs = (props) => {
-  const { children, className, ...others } = props;
+  const { children, className, size, ...others } = props;
   const ownerState = {};
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { ownerState }, ...others, children });
+  const { currentSize } = useComponentSize(size);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const leftIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_LEFT}`;
+  const rightIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_RIGHT}`;
+  const StartScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(leftIconSrc, currentSize),
+    [leftIconSrc, currentSize]
+  );
+  const EndScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(rightIconSrc, currentSize),
+    [rightIconSrc, currentSize]
+  );
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ...others,
+      scrollButtons: "auto",
+      ownerState: { ownerState },
+      variant: "scrollable",
+      className,
+      slots: {
+        StartScrollButtonIcon,
+        EndScrollButtonIcon
+      },
+      children
+    }
+  );
 };
 export {
   Tabs as T

package/components/mui_extended/Tabs/Tabs.styles.js

@@ -3,33 +3,59 @@ const tabsStyles = {
    * Elemento root referencia a `MuiTabs` de MUI
    */
   root: ({ theme }) => ({
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    overflow: "auto",
-    width: "100%",
-    height: "fit-content",
-    maxWidth: "fit-content",
-    minHeight: "fit-content",
-    background: theme.vars.palette.background.default,
-    paddingBottom: theme.vars.size.baseSpacings.sp0,
-    gap: theme.vars.size.baseSpacings.sp0,
-    borderRadius: theme.vars.size.borderRadius.r1,
-    borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
-    borderBottomRightRadius: theme.vars.size.borderRadius.r0,
-    marginBottom: "1px",
-    "& .MuiTabs-flexContainer": {
-      background: "transparent"
-    },
-    "& .MuiTabs-scroller": {
-      overflow: "visible !important"
-    },
-    "& .MuiTabs-indicator": {
-      display: "none"
-    },
-    "& .simplebar-content": {
+    "&&&": {
+      position: "relative",
+      zIndex: 1,
       display: "flex",
-      gap: theme.vars.size.baseSpacings.sp0
+      overflow: "auto",
+      alignItems: "center",
+      width: "100%",
+      height: "fit-content",
+      maxWidth: "fit-content",
+      minHeight: "fit-content",
+      gap: theme.vars.size.baseSpacings.sp4,
+      background: theme.vars.palette.background.default,
+      paddingBottom: theme.vars.size.baseSpacings.sp0,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
+      borderBottomRightRadius: theme.vars.size.borderRadius.r0,
+      marginBottom: "1px",
+      "& .MuiTabs-flexContainer": {
+        background: "transparent"
+      },
+      "& .MuiTabs-indicator": {
+        display: "none"
+      },
+      "& .simplebar-content": {
+        display: "flex",
+        gap: theme.vars.size.baseSpacings.sp0
+      },
+      "& .MuiTabScrollButton-root": {
+        width: "fit-content",
+        height: "fit-content",
+        padding: "0",
+        margin: "0",
+        border: "none",
+        borderRadius: "0",
+        "& .MuiTouchRipple-root": {
+          display: "none !important"
+        },
+        "& .MuiButtonBase-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-rippleVisible": {
+          display: "none !important"
+        },
+        "& .M4LIconButton-styledMUIIconButton, & .MuiSkeleton-root": {
+          width: theme.vars.size.baseSpacings.sp4,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.primary
+          }
+        }
+      }
     }
   })
 };

package/components/mui_extended/Tabs/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const TABS_ICONS: {
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+};

package/components/mui_extended/Tabs/icons.js

@@ -0,0 +1,7 @@
+const TABS_ICONS = {
+  ARROW_LEFT: "frontend/components/tabs/assets/icons/chevron_left.svg",
+  ARROW_RIGHT: "frontend/components/tabs/assets/icons/chevron_right.svg"
+};
+export {
+  TABS_ICONS as T
+};

package/components/mui_extended/Tabs/types.d.ts

@@ -3,10 +3,13 @@ import { TabsProps as MuiTabProps } from '@mui/material/Tabs';
 import { TabsSlots } from './slots/TabsEnum';
 import { TABS_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
 /**
  * Props for the tabs component.
  */
-export type TabsProps = MuiTabProps;
+export type TabsProps = MuiTabProps & {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+};
 /**
  * State for the tabs component.
  */

package/index.d.ts

@@ -8,5 +8,4 @@ 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

@@ -230,15 +230,16 @@ import { S as S18 } from "./components/Stepper/subcomponents/StepperButtons/Step
 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 e2 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
-import { g as g30 } from "./components/Stepper/dictionary.js";
-import { g as g31 } from "./components/hook-form/RHFormProvider/dictionary.js";
+import { g as g30 } from "./components/Stepper/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
+import { g as g31 } from "./components/Stepper/dictionary.js";
+import { g as g32 } from "./components/hook-form/RHFormProvider/dictionary.js";
 import { u as u23 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A17 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a17, M as M10 } from "./contexts/ModalContext/index.js";
 import { u as u24 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
 import { u as u25 } from "./hooks/useModal/index.js";
 import { u as u26 } from "./hooks/useTab/index.js";
-import { g as g32 } from "./hooks/useFormAddEdit/dictionary.js";
+import { g as g33 } from "./hooks/useFormAddEdit/dictionary.js";
 import { u as u27 } from "./hooks/useFormFocus/index.js";
 import { u as u28 } from "./hooks/useInterval/index.js";
 import { u as u29 } from "./hooks/useComponentSize/useComponentSize.js";
@@ -254,18 +255,17 @@ import { u as u37 } from "./hooks/useSizeContainer/index.js";
 import { u as u38 } from "./hooks/useWatchTyped/useTypedWatch.js";
 import { c as c5 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
-import { g as g33 } from "./utils/getComponentUtilityClass.js";
-import { g as g34 } from "./utils/getPaletteColor.js";
-import { g as g35 } from "./utils/getTypographyStyles.js";
-import { g as g36 } from "./utils/getIconColor.js";
-import { a as a18, g as g37 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { g as g34 } from "./utils/getComponentUtilityClass.js";
+import { g as g35 } from "./utils/getPaletteColor.js";
+import { g as g36 } from "./utils/getTypographyStyles.js";
+import { g as g37 } from "./utils/getIconColor.js";
+import { a as a18, g as g38 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g38, a as a19 } from "./utils/getComponentSlotRoot.js";
+import { g as g39, a as a19 } from "./utils/getComponentSlotRoot.js";
 import { f as f2 } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g39 } from "./utils/getValidDate.js";
-import { g as g40 } from "./utils/getNullGuard.js";
+import { g as g40 } from "./utils/getValidDate.js";
+import { g as g41 } from "./utils/getNullGuard.js";
 import { c as c6, d as d5 } from "./utils/deepShallow.js";
-import { g as g41 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
 export {
   A8 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -487,23 +487,23 @@ export {
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g38 as getComponentClasses,
+  g39 as getComponentClasses,
   a19 as getComponentSlotRoot,
-  g33 as getComponentUtilityClass,
+  g34 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
   g17 as getDistanceToNowFormatterComponentsDictionary,
   g7 as getDynamicFilterComponentsDictionary,
   a6 as getDynamicSortComponentsDictionary,
   a5 as getFilterGroupFieldsByName,
-  g31 as getFormComponentsDictionary,
+  g32 as getFormComponentsDictionary,
   g15 as getFormatConcatenated,
   g12 as getFormatDate,
   g14 as getFormatPoints,
   g16 as getFormatPrice,
   g18 as getFormattersComponentsDictionary,
   a18 as getHeightSizeStyles,
-  g36 as getIconColor,
+  g37 as getIconColor,
   g8 as getIsIfInDynamicFilter,
   g22 as getLoadingErrorComponentsDictionary,
   g24 as getMFLoaderComponentsDictionary,
@@ -512,23 +512,23 @@ export {
   g29 as getModalDictionary,
   g26 as getNoItemPrivilegesComponentsDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g40 as getNullGuard,
+  g41 as getNullGuard,
   g27 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
-  g34 as getPaletteColor,
+  g35 as getPaletteColor,
   g21 as getPeriodComponetsDictionary,
   g20 as getRHFAutocompleteAsyncComponentsDictionary,
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
-  g37 as getSizeStyles,
-  g30 as getStepperComponentsDictionary,
-  g41 as getStepsAndValidationSchema,
+  g38 as getSizeStyles,
+  g31 as getStepperComponentsDictionary,
+  g30 as getStepsAndValidationSchema,
   g28 as getTabsNavigatorComponentsDictionary,
-  g35 as getTypographyStyles,
+  g36 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g39 as getValidDate,
-  g32 as getformAddEditDictionary,
+  g40 as getValidDate,
+  g33 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,
   i2 as isValidDate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.39",
+  "version": "9.3.41-JT04122025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/helpers/index.d.ts

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

package/helpers/index.js

@@ -1 +0,0 @@
-