@m4l/components 2.0.7 → 3.0.1

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

@@ -0,0 +1,337 @@
+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-BfDbi0cC.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index-Cc9p_h7i.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-COWCXeJp.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index-BpW2AGJx.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.cf63abf0.js → index-D52JNxDh.js}

@@ -3,15 +3,15 @@ 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.32b58ce4.js";
+import { I as Image } from "../../Image/index-B7FhR9uF.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { as as UploadImageRoot, at as WrapperRHFUploadImage } from "../../../styles/index.ccd8acc4.js";
+import { as as UploadImageRoot, at as WrapperRHFUploadImage } from "../../../styles/index-Cc9p_h7i.js";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+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.61dd3fc6.js";
-import { B as Button } from "../../mui_extended/Button/index.ca15c36e.js";
-import { H as HelperText } from "../../HelperText/index.2f4c6655.js";
+import { T as Typography } from "../../mui_extended/Typography/index-DKPqV11f.js";
+import { B as Button } from "../../mui_extended/Button/index-DlzpoczE.js";
+import { H as HelperText } from "../../HelperText/index-COWCXeJp.js";
 const ICON_PREFIX = "M4LRHFUploadImage";
 const getNameRHFUploadImageDataTestId = (KEY) => {
   return `${ICON_PREFIX}-${KEY}`;
@@ -26,7 +26,7 @@ const SkeletonUploadImage = (props) => {
         [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("skeleton")
       } : {},
       children: [
-        "est\xE1 con skeleton",
+        "está con skeleton",
         /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" })
       ]
     }
@@ -36,6 +36,7 @@ const componentName = "M4LRHFUploadImage";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root",
     "dropZoneStyle",
     "containerFileImage",
@@ -50,6 +51,7 @@ generateUtilityClasses(
     "string",
     "skeleton",
     "inputDropZone",
+    /* states or variants of elements */
     "stateError"
   ]
 );
@@ -102,7 +104,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
       className: classes.root,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("root") } : {},
       children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        "est\xE1 sin skeleton",
+        "está sin skeleton",
         /* @__PURE__ */ jsx(
           "div",
           {