@m4l/components 9.3.40 → 9.3.41-JT04122025.beta.2

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/hooks/useDataGridPersistence/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const M4LDYNAMIC_KEY_FILTER_AND_SORT = "M4LDynamicFilterAndSort";
 export declare const COOKIE_COLUMNS_WIDTHS = "columns_widths";
 export declare const COOKIE_COLUMNS_CONFIG = "columns_config";
+export declare const COOKIE_VIEW_MODE = "view_mode";

package/hooks/useDataGridPersistence/constants.js

@@ -1,6 +1,8 @@
 const COOKIE_COLUMNS_WIDTHS = "columns_widths";
 const COOKIE_COLUMNS_CONFIG = "columns_config";
+const COOKIE_VIEW_MODE = "view_mode";
 export {
-  COOKIE_COLUMNS_CONFIG as C,
-  COOKIE_COLUMNS_WIDTHS as a
+  COOKIE_VIEW_MODE as C,
+  COOKIE_COLUMNS_CONFIG as a,
+  COOKIE_COLUMNS_WIDTHS as b
 };

package/hooks/useDataGridPersistence/useDataGridPersistence.d.ts

@@ -1,9 +1,17 @@
 import { UseDataGridPersistenceProps } from './types';
-import { ChangeUserColumn, IGridConfigExtended } from '../../components/DataGrid';
+import { ChangeConfig, IGridConfigExtended } from '../../components/DataGrid';
 /**
- * Hook para manejar los filtros y ordenamientos dinamicos
+ * Hook para manejar la persistencia de configuración del DataGrid en cookies de red.
+ *
+ * Retorna:
+ * - `defaultConfig`: Configuración inicial cargada desde cookies
+ * - `onChangeConfig`: Callback para persistir cambios en cookies
+ * - `defaultUserColumns`: @deprecated Alias de defaultConfig
+ * - `onChangeUserColumns`: @deprecated Alias de onChangeConfig
  */
 export declare const useDataGridPersistence: (props: UseDataGridPersistenceProps) => {
-    onChangeUserColumns: (newProps: ChangeUserColumn) => void;
+    defaultConfig: IGridConfigExtended;
+    onChangeConfig: (newProps: ChangeConfig) => void;
     defaultUserColumns: IGridConfigExtended;
+    onChangeUserColumns: (newProps: ChangeConfig) => void;
 };

package/hooks/useDataGridPersistence/useDataGridPersistence.js

@@ -1,17 +1,18 @@
 import { useState, useCallback } from "react";
 import { g as getColumnsConfigCookie } from "./helpers.js";
-import { C as COOKIE_COLUMNS_CONFIG, a as COOKIE_COLUMNS_WIDTHS } from "./constants.js";
+import { C as COOKIE_VIEW_MODE, a as COOKIE_COLUMNS_CONFIG, b as COOKIE_COLUMNS_WIDTHS } from "./constants.js";
 import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
 const useDataGridPersistence = (props) => {
   const { prefixCookie } = props;
   const { setCookie, getCookie } = useWindowToolsMF();
-  const [defaultUserColumns] = useState(() => {
+  const [defaultConfig] = useState(() => {
     return {
       columnsWidths: getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS) || {},
-      columnsConfig: getColumnsConfigCookie(getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG)) || []
+      columnsConfig: getColumnsConfigCookie(getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG)) || [],
+      viewMode: getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_VIEW_MODE}` : COOKIE_VIEW_MODE) || "table"
     };
   });
-  const onChangeUserColumns = useCallback((newProps) => {
+  const onChangeConfig = useCallback((newProps) => {
     const { reason, userConfig } = newProps;
     if (userConfig === void 0) {
       return;
@@ -20,13 +21,19 @@ const useDataGridPersistence = (props) => {
       setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG, "window", userConfig);
     } else if (reason === "columnsWidths") {
       setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS, "window", userConfig);
+    } else if (reason === "viewMode") {
+      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_VIEW_MODE}` : COOKIE_VIEW_MODE, "window", userConfig);
     } else {
       setCookie(prefixCookie ? `${prefixCookie}_${reason}` : reason, "window", userConfig);
     }
   }, [setCookie, prefixCookie]);
   return {
-    onChangeUserColumns,
-    defaultUserColumns
+    // Nuevos nombres
+    defaultConfig,
+    onChangeConfig,
+    // Deprecated aliases para backward compatibility
+    defaultUserColumns: defaultConfig,
+    onChangeUserColumns: onChangeConfig
   };
 };
 export {

package/package.json

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