@m4l/components 3.1.7 → 3.1.8

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

@@ -1,337 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
-import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index-CusYFjie.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index-DKj6m8SL.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index-DiMrtgIu.js";
-import { H as HelperText } from "../../HelperText/index-Crn_XIPF.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index-CI57EizR.js";
-const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
-const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
-const RHFTEXTFIELD_PREFIX = "RHFTextField";
-const getNameDataTestId$1 = (KEY) => {
-  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
-};
-const SkeletonTextField = (props) => {
-  const { skeletonWidth, skeletonHeight, ownerState, classes, hasLabel } = props;
-  const { type: variant } = ownerState;
-  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, { children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      WrapperSkeletonRHFTextField,
-      {
-        className: classes.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("skeleton") } : {},
-        children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" })
-        ] })
-      }
-    )
-  ] });
-};
-const componentName = "M4LRHFTextField";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root",
-    "label",
-    "skeleton",
-    /* states or variants of elements */
-    "variantText",
-    "variantPassword",
-    "variantInfo",
-    "isDisabled",
-    "variantSuccess",
-    "variantWarning",
-    "variantError",
-    "sizeSmall",
-    "sizeMedium",
-    "isFocus",
-    "isTabSelected"
-  ]
-  /*  returna un objeto igual a:
-    {
-        root: 'M4LRHFTextField-root',
-        skeleton: 'M4LRHFTextField-skeleton',
-        variantText: 'M4LRHFTextField-variantText',
-        variantPassword: 'M4LRHFTextField-variantPassword',
-    } 
-    */
-);
-const getRHFTextFieldClassesByState = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.type === "password" ? "variantPassword" : "variantText",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.disabled && "isDisabled",
-      ownerState.variant === "info" && "variantInfo",
-      ownerState.variant === "success" && "variantSuccess",
-      ownerState.variant === "warning" && "variantWarning",
-      ownerState.variant === "error" && "variantError"
-    ],
-    label: ["label"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-    /* retorna un objeto para una variante de tipo = 'password':
-        {
-            input : "M4LRHFTextField-input"
-            root: "M4LRHFTextField-root M4LRHFTextField-variantPassword"
-            skeleton: "M4LRHFTextField-skeleton"
-        };
-        */
-  };
-};
-const RHFTextField = forwardRef((props, ref) => {
-  const {
-    name: nameRHF,
-    autoComplete = "off",
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
-    type,
-    label,
-    size = "small",
-    startIcon,
-    endIcon,
-    variant,
-    helperMessage = "",
-    disabled,
-    mandatory,
-    mandatoryMessage,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    helperText,
-    ...other
-  } = props;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    type: type === "password" ? "password" : "text",
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    variant: currentVariant,
-    disabled
-  };
-  const classes = getRHFTextFieldClassesByState(ownerState);
-  return (
-    /* RHFTextFieldRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides
-            que provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros
-            componentes de la plataforna web. */
-    /* @__PURE__ */ jsx(
-      RHFTextFieldRoot,
-      {
-        className: classes.root,
-        tabIndex: 0,
-        onFocus: handlerFocus,
-        onBlur: handlerOnBlur,
-        onKeyUp: handlerOnKeyUp,
-        role: "textbox",
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}` } : {},
-        children: !isSkeleton ? (
-          /* controller: Componente usado para suscribir el componente al contexto de hook-form */
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              name: nameRHF,
-              control,
-              render: ({ field: { onChange, value, name, ref: inputRef }, fieldState: { error } }) => {
-                const onInternalChange = (event) => {
-                  if (type === "number") {
-                    if (event.target.value) {
-                      onChange(Number(event.target.value));
-                      return;
-                    }
-                  }
-                  onChange(event);
-                };
-                return /* @__PURE__ */ jsxs(Fragment, { children: [
-                  label && /* @__PURE__ */ jsx(
-                    FieldLabel,
-                    {
-                      label,
-                      mandatory,
-                      mandatoryMessage,
-                      helperMessage
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      variant: "outlined",
-                      disabled,
-                      ref,
-                      inputRef,
-                      InputLabelProps: { shrink: true },
-                      autoComplete,
-                      onChange: onInternalChange,
-                      value: type === "number" ? isNaN(value) ? 0 : value : value || "",
-                      name,
-                      inputProps: {
-                        ...process.env.NODE_ENV !== "production" ? {
-                          [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
-                        } : {}
-                      },
-                      fullWidth: true,
-                      error: !!error,
-                      type,
-                      ...startIcon || endIcon ? {
-                        InputProps: {
-                          ...{
-                            ...startIcon ? {
-                              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startIcon })
-                            } : {},
-                            ...endIcon ? {
-                              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endIcon })
-                            } : {}
-                          }
-                        }
-                      } : {},
-                      ...other
-                    }
-                  ),
-                  currentVariant ? /* @__PURE__ */ jsx(
-                    HelperText,
-                    {
-                      variant: currentVariant,
-                      message: currentVariant !== "error" ? helperMessage : error?.message
-                    }
-                  ) : null
-                ] });
-              }
-            }
-          )
-        ) : (
-          /* SkeletonTextField: Subcomponente donde se construye la versión de carga provisional que se va a dar mientras no se haya
-                      asignado los valores de diccionario */
-          /* @__PURE__ */ jsx(
-            SkeletonTextField,
-            {
-              classes,
-              skeletonWidth,
-              skeletonHeight,
-              ownerState,
-              hasLabel: label
-            }
-          )
-        )
-      }
-    )
-  );
-});
-RHFTextField.displayName = "RHFTextField";
-generateUtilityClasses(
-  "M4LRHFTextFieldPassword",
-  [
-    /* elements */
-    "root"
-    /* states or variants of elements */
-  ]
-);
-function getRHFTextFieldPasswordUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
-const getNameDataTestId = (KEY) => {
-  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
-};
-const RHFTextFieldPassword = (props) => {
-  const {
-    name,
-    label,
-    skeletonWidth,
-    skeletonHeight,
-    size,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const [showPassword, setShowPassword] = useState(false);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const classes = useUtilityClasses();
-  return (
-    /* RHFTextFieldPasswordRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides
-        que provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros
-        componentes de la plataforna web. */
-    /* @__PURE__ */ jsx(
-      RHFTextFieldPasswordRoot,
-      {
-        className: classes.root,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-        children: /* @__PURE__ */ jsx(
-          RHFTextField,
-          {
-            name,
-            label,
-            type: showPassword ? "text" : "password",
-            autoComplete: "on",
-            skeletonWidth,
-            skeletonHeight,
-            size,
-            mandatory,
-            mandatoryMessage,
-            helperMessage,
-            InputProps: {
-              endAdornment: (
-                /* InputAdornment: Componente de la librería externa material ui, permite agregar un elemento gráfico
-                            personalizado dentro del campo de texto*/
-                /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    onClick: () => setShowPassword(!showPassword),
-                    variant: "line",
-                    src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
-                  }
-                ) })
-              )
-            }
-          }
-        )
-      }
-    )
-  );
-};
-export {
-  RHFTextField as R,
-  RHFTEXTFIELD_ROOT_TEST_ID as a,
-  RHFTEXTFIELD_INPUT_TEST_ID as b,
-  RHFTEXTFIELD_PREFIX as c,
-  RHFTextFieldPassword as d
-};

package/components/hook-form/RHFUpload/index-CDPbm8NR.js

@@ -1,253 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import isString from "lodash/isString";
-import { useDropzone } from "react-dropzone";
-import { I as Image } from "../../Image/index-COp8vP0X.js";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { as as UploadImageRoot, at as WrapperRHFUploadImage } from "../../../styles/index-DKj6m8SL.js";
-import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
-import { unstable_composeClasses } from "@mui/base";
-import { T as Typography } from "../../mui_extended/Typography/index-Cf_4Zw8f.js";
-import { B as Button } from "../../mui_extended/Button/index-CGfZbaea.js";
-import { H as HelperText } from "../../HelperText/index-Crn_XIPF.js";
-const ICON_PREFIX = "M4LRHFUploadImage";
-const getNameRHFUploadImageDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-const SkeletonUploadImage = (props) => {
-  const { classes } = props;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("skeleton")
-      } : {},
-      children: [
-        "está con skeleton",
-        /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" })
-      ]
-    }
-  );
-};
-const componentName = "M4LRHFUploadImage";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root",
-    "dropZoneStyle",
-    "containerFileImage",
-    "placeHolder",
-    "containerUploadBoddy",
-    "containerBodyImage",
-    "containerMessage",
-    "containerTitle",
-    "containerDescription",
-    "containerConditions",
-    "containerUploadImage",
-    "string",
-    "skeleton",
-    "inputDropZone",
-    /* states or variants of elements */
-    "stateError"
-  ]
-);
-function getRHFUploadImagebUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const RHFUploadImageUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.isDragReject && "stateError",
-      ownerState.isDragActive && "stateActive",
-      ownerState.hasFile && "hasFile"
-    ],
-    dropZoneStyle: ["dropZoneStyle"],
-    containerFileImage: ["containerFileImage"],
-    placeHolder: ["placeHolder"],
-    containerUploadBoddy: ["containerUploadBoddy"],
-    containerBodyImage: ["containerBodyImage"],
-    containerMessage: ["containerMessage"],
-    containerTitle: ["containerTitle"],
-    containerDescription: ["containerDescription"],
-    containerConditions: ["containerConditions"],
-    containerUploadImage: ["containerUploadImage"],
-    skeleton: ["skeleton"],
-    inputDropZone: ["inputDropZone"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFUploadImagebUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function UploadImage({ error, file, helperText, sx, ...other }) {
-  const { getRootProps, getInputProps, isDragActive, isDragReject, open } = useDropzone({
-    multiple: false,
-    ...other
-  });
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const ownerSate = {
-    isDragReject: isDragReject || error,
-    isDragActive,
-    hasFile: file
-  };
-  const classes = RHFUploadImageUtilityClasses(ownerSate);
-  return /* @__PURE__ */ jsx(
-    UploadImageRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        "está sin skeleton",
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes.containerUploadImage,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadImage")
-            } : {},
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: classes.dropZoneStyle,
-                ...getRootProps(),
-                ...process.env.NODE_ENV !== "production" ? {
-                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("dropZoneStyle")
-                } : {},
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ...getInputProps(),
-                      className: classes.inputDropZone,
-                      ...process.env.NODE_ENV !== "production" ? {
-                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("inputDropZone")
-                      } : {}
-                    }
-                  ),
-                  file && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes.containerFileImage,
-                      ...process.env.NODE_ENV !== "production" ? {
-                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerFileImage")
-                      } : {},
-                      children: /* @__PURE__ */ jsx(
-                        Image,
-                        {
-                          alt: "bgImageUploadImage",
-                          src: isString(file) ? file : file.preview || "",
-                          ratio: "1:1"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes.placeHolder,
-                      ...process.env.NODE_ENV !== "production" ? {
-                        [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("placeHolder")
-                      } : {},
-                      children: /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: classes.containerUploadBoddy,
-                          ...process.env.NODE_ENV !== "production" ? {
-                            [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadBoddy")
-                          } : {},
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: classes.containerBodyImage,
-                                ...process.env.NODE_ENV !== "production" ? {
-                                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerBodyImage")
-                                } : {},
-                                children: /* @__PURE__ */ jsx(
-                                  Image,
-                                  {
-                                    src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
-                                    ratio: "1:1"
-                                  }
-                                )
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                className: classes.containerMessage,
-                                ...process.env.NODE_ENV !== "production" ? {
-                                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerMessage")
-                                } : {},
-                                children: [
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      className: classes.containerTitle,
-                                      variant: "subtitle",
-                                      skeletonWidth: "150px",
-                                      children: getLabel("upload_image.title_upload")
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(Typography, { className: classes.containerDescription, variant: "body", children: getLabel("upload_image.description") }),
-                                  /* @__PURE__ */ jsx(Typography, { className: classes.containerConditions, variant: "body", children: getLabel("upload_image.conditions") }),
-                                  /* @__PURE__ */ jsx(Button, { onClick: open, children: getLabel("upload_image.label_button") })
-                                ]
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        helperText && helperText
-      ] }) : /* @__PURE__ */ jsx(SkeletonUploadImage, { classes: classes.skeleton })
-    }
-  );
-}
-function RHFUploadImage({ name, ...other }) {
-  const { control, setValue } = useFormContext();
-  const handleDrop = useCallback(
-    (acceptedFiles) => {
-      const file = acceptedFiles[0];
-      if (file) {
-        setValue(
-          name,
-          Object.assign(file, {
-            preview: URL.createObjectURL(file)
-          })
-        );
-      }
-    },
-    [setValue]
-  );
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field, fieldState: { error } }) => {
-        const checkError = !!error && !field.value;
-        return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, { children: [
-          /* @__PURE__ */ jsx(UploadImage, { onDrop: handleDrop, error: checkError, ...other, file: field.value }),
-          checkError && /* @__PURE__ */ jsx(HelperText, { message: error.message })
-        ] });
-      }
-    }
-  );
-}
-export {
-  RHFUploadImage as R
-};