@m4l/components 9.3.40 → 9.3.41

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/package.json

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