@m4l/components 9.1.51 → 9.1.53

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

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { InputAdornment } from "@mui/material";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { R as RHF_TEXT_FIELD_KEY_COMPONENT } from "./constant.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { R as RHFTextFieldRootStyled, L as LabelStyled, T as TextFieldStyled, H as HelperErrorStyled } from "./slots/RHFTextFieldSlots.js";
 import { R as RHFTextFieldSlots } from "./slots/RHFTextFieldEnum.js";
@@ -12,11 +13,9 @@ const RHFTextField = forwardRef((props, ref) => {
   const {
     name,
     autoComplete = "off",
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
     type,
     label,
-    size = "small",
+    size = "medium",
     startIcon,
     endIcon,
     helperMessage = "",
@@ -27,13 +26,14 @@ const RHFTextField = forwardRef((props, ref) => {
     isInteger = true,
     mandatoryMessage,
     helperText = true,
+    className,
     ...other
   } = props;
-  const ariaLabelledById = `field-label-${name}`;
+  const htmlForId = useId();
+  const ariaLabelledById = `field-label-${htmlForId}`;
   const {
     control
   } = useFormContext();
-  const { handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
@@ -44,15 +44,12 @@ const RHFTextField = forwardRef((props, ref) => {
     size: adjustedSize,
     disabled
   };
+  const classRoot = getComponentSlotRoot(RHF_TEXT_FIELD_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RHFTextFieldRootStyled,
     {
       ownerState: { ...ownerState },
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      role: "textbox",
-      htmlFor: name,
+      className: clsx(classRoot, className),
       ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.root),
       children: /* @__PURE__ */ jsx(
         Controller,
@@ -61,16 +58,7 @@ const RHFTextField = forwardRef((props, ref) => {
           control,
           render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
             const onInternalChange = (event) => {
-              let newValue = event.target.value;
-              if (type === "number") {
-                if (isInteger) {
-                  newValue = newValue ? parseInt(newValue, 10) : "";
-                } else {
-                  if (!/^\d*\.?\d*$/.test(newValue)) {
-                    newValue = value;
-                  }
-                }
-              }
+              const newValue = event.target.value;
               onChange(newValue);
             };
             return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -80,28 +68,28 @@ const RHFTextField = forwardRef((props, ref) => {
                   ownerState: { ...ownerState },
                   size: adjustedSize,
                   label,
-                  id: ariaLabelledById,
+                  htmlFor: htmlForId,
                   mandatory,
                   mandatoryMessage,
-                  helperMessage,
-                  className: "Ejemplo"
+                  helperMessage
                 }
               ),
               /* @__PURE__ */ jsx(
                 TextFieldStyled,
                 {
-                  ownerState: { ...ownerState, error: !!error || other.error },
+                  ownerState: { ...ownerState, error: !!error },
                   disabled,
                   inputRef,
                   ref,
                   InputLabelProps: { shrink: true },
                   autoComplete,
                   onChange: onInternalChange,
-                  className: "rhf-text-field-root",
                   value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
                   inputProps: {
                     name,
-                    id: name,
+                    role: "textbox",
+                    ss: 1,
+                    id: htmlForId,
                     "aria-labelledby": ariaLabelledById,
                     ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.textField)
                   },
@@ -128,7 +116,8 @@ const RHFTextField = forwardRef((props, ref) => {
                 {
                   ownerState: {},
                   message: error.message,
-                  size: adjustedSize
+                  size: adjustedSize,
+                  htmlFor: htmlForId
                 }
               ) : null
             ] });

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

@@ -26,7 +26,9 @@ const rhfTextFieldStyles = {
    * @updatedAt 2024-10-22 19:27:23 - automatic
    * @updatedUser Bruce Escobar - automatic
    */
-  helperErrorStyled: {}
+  helperErrorStyled: {},
+  skeletonTextFieldRoot: {},
+  wrapperSkeletonRHFTextField: {}
 };
 export {
   rhfTextFieldStyles as r

package/components/hook-form/RHFTextField/types.d.ts

@@ -6,9 +6,16 @@ import { LabelProps } from '../../Label/types';
 import { RHFTextFieldSlots } from './slots';
 import { RHF_TEXT_FIELD_KEY_COMPONENT } from './constant';
 import { ComponentPalletColor } from '@m4l/styles';
-export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'label' | 'theme' | 'color'>, Omit<LabelProps, 'label'> {
+export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'label' | 'theme' | 'color' | 'error'>, Omit<LabelProps, 'label' | 'error'> {
+    /**
+     * Valor de anchura total para la vista de carga provisional.
+     * @deprecated
+     */
     skeletonWidth?: string | number;
-    /** Valor de altura total para la vista de carga provisional. */
+    /**
+     * Valor de altura total para la vista de carga provisional.
+     * @deprecated
+     */
     skeletonHeight?: string | number;
     /** Identificador del campo para react hook form. */
     name: string;
@@ -23,17 +30,10 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
     /** Etiqueta que se utiliza para condicionar el valor del campo de texto para que sea de tipo entero o decimal.*/
     isInteger?: boolean;
     color?: Extract<ComponentPalletColor, 'default'>;
-    RHFtextFieldError?: boolean;
-}
-export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
-    type: 'password' | 'text';
-    isFocus: boolean;
-    isTabSelected: boolean;
+    className?: string;
 }
 export type RHFTextFieldOwnerState = RHFTextFieldProps & {
-    componentPaletteColor?: ComponentPalletColor;
-    RHFtextFieldError?: boolean;
     error?: boolean;
 };
 export type RHFTextFieldSlotsType = keyof typeof RHFTextFieldSlots;
-export type RHFTextFieldStyles = Partial<OverridesStyleRules<RHFTextFieldSlotsType, typeof RHF_TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type RHFTextFieldStyles = OverridesStyleRules<RHFTextFieldSlotsType, typeof RHF_TEXT_FIELD_KEY_COMPONENT, Theme>;

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

@@ -12,8 +12,6 @@ const RHFTextFieldPassword = (props) => {
   const {
     name,
     label,
-    skeletonWidth,
-    skeletonHeight,
     size,
     mandatory,
     mandatoryMessage,
@@ -38,8 +36,6 @@ const RHFTextFieldPassword = (props) => {
             label,
             type: showPassword ? "text" : "password",
             autoComplete: "on",
-            skeletonWidth,
-            skeletonHeight,
             size,
             mandatory,
             mandatoryMessage,

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/index.js

@@ -99,8 +99,6 @@ function GeneralData() {
             name: "properties.radius",
             label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_RADIUS),
             autoComplete: "off",
-            skeletonWidth: "70%",
-            skeletonHeight: "18px",
             disabled: true,
             size: "small"
           }
@@ -111,8 +109,6 @@ function GeneralData() {
             name: "lat",
             label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LAT),
             autoComplete: "off",
-            skeletonWidth: "70%",
-            skeletonHeight: "18px",
             disabled: true,
             size: "small"
           }
@@ -123,8 +119,6 @@ function GeneralData() {
             name: "lng",
             label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LON),
             autoComplete: "off",
-            skeletonWidth: "70%",
-            skeletonHeight: "18px",
             disabled: true,
             size: "small"
           }

package/components/mui_extended/TextField/TextField.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { getPropertyByString, useModuleSkeleton } from "@m4l/core";
+import { useModuleSkeleton } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import { S as SkeletonStyled, T as TextFieldRootStyled } from "./slots/TextFieldSlots.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { T as TEXT_FIELD_KEY_COMPONENT, a as TEXT_FIELD_CLASSES } from "./constants.js";
+import { T as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
 import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
-import { clsx } from "clsx";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const TextField = (props) => {
   const {
@@ -23,17 +24,13 @@ const TextField = (props) => {
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const theme = useTheme();
-  const paletteColor = getPropertyByString(
-    theme.palette,
-    disabled ? "default" : error ? "error" : color,
-    theme.palette.default
-  );
+  const paletteColor = disabled && theme.palette.default || error && theme.palette.error || theme.palette[color] || theme.palette.default;
   const ownerState = {
     size: adjustedSize,
-    textFieldDisabled: disabled,
-    textFieldPaletteColor: paletteColor,
-    textFieldVariant: variant,
-    textFieldError: error
+    disabled,
+    paletteColor,
+    variants: variant,
+    error
   };
   const isSkeleton = useModuleSkeleton();
   if (isSkeleton) {
@@ -47,12 +44,13 @@ const TextField = (props) => {
       }
     );
   }
+  const classRoot = getComponentSlotRoot(TEXT_FIELD_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     TextFieldRootStyled,
     {
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
-      className: clsx(TEXT_FIELD_CLASSES.root, className),
       autoComplete,
       inputMode: "numeric",
       inputProps: {

package/components/mui_extended/TextField/TextField.styles.js

@@ -32,7 +32,7 @@ const textFieldStyles = {
       }
     },
     // Variant Outlined TextField
-    ...ownerState.textFieldVariant === "outlined" && {
+    ...ownerState.variants === "outlined" && {
       "& .MuiInputBase-root": {
         padding: 0,
         minHeight: 0,
@@ -48,11 +48,11 @@ const textFieldStyles = {
         "& .MuiOutlinedInput-notchedOutline": {
           minHeight: 0,
           border: theme.vars.size.borderStroke.actionInput,
-          borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default
+          borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default
         },
         //Estilo Hover para primary para el Icono e IconButton
         "&:hover": {
-          backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity
+          backgroundColor: ownerState.error ? "inherit" : theme.palette.primary.hoverOpacity
         },
         //Estilo Focus para primary para el Icono e IconButton
         ":focus-within": {
@@ -83,13 +83,13 @@ const textFieldStyles = {
           height: "inherit",
           //Estilos del InputBase en hover
           "&:hover ~ .MuiOutlinedInput-notchedOutline": {
-            ...ownerState.textFieldError && {
-              borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : theme.vars.palette.border.default
+            ...ownerState.error && {
+              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
             }
           },
           // Estilos del InputBase en Focus
           "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-            borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
+            borderColor: ownerState.error ? theme.vars.palette.border.error : ownerState.paletteColor?.selected
           },
           //Estilos del InputBase en placeholder default
           "&::placeholder": {
@@ -101,11 +101,11 @@ const textFieldStyles = {
           padding: 0
         },
         // Historia Disabled para Outlined
-        ...ownerState.textFieldDisabled && {
+        ...ownerState.disabled && {
           borderColor: theme.palette.border.disabled,
-          pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+          pointerEvents: ownerState.disabled ? "none" : "auto",
           "&:hover": {
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
+            pointerEvents: ownerState.disabled ? "none" : "auto"
           },
           "& .MuiInputBase-input::placeholder": {
             color: theme.palette.text.disabled
@@ -120,7 +120,7 @@ const textFieldStyles = {
       }
     },
     // Variant Text TextField
-    ...ownerState.textFieldVariant === "text" && {
+    ...ownerState.variants === "text" && {
       borderColor: "transparent",
       "& .MuiInputBase-root": {
         padding: 0,
@@ -139,14 +139,14 @@ const textFieldStyles = {
         "& .MuiOutlinedInput-notchedOutline": {
           minHeight: 0,
           border: theme.vars.size.borderStroke.actionInput,
-          borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default,
+          borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default,
           borderLeft: "transparent",
           borderTop: "transparent",
           borderRight: "transparent"
         },
         //Estilo Hover para primary para el Icono e IconButton
         "&:hover": {
-          backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity,
+          backgroundColor: ownerState.error ? "inherit" : theme.palette.primary.hoverOpacity,
           '.MuiIconButton-root [class*="M4LIcon-icon"]': {
             backgroundColor: theme.vars.palette.text.primary
           }
@@ -179,7 +179,7 @@ const textFieldStyles = {
           height: "inherit",
           //Estilo Focus del InputBase
           "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-            borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
+            borderColor: ownerState.error ? theme.vars.palette.border.error : ownerState.paletteColor?.selected
           },
           // Estilos del InputBase en placeholder default
           "&::placeholder": {
@@ -191,16 +191,16 @@ const textFieldStyles = {
           padding: 0
         },
         // Historia Disabled
-        ...ownerState.textFieldDisabled && {
+        ...ownerState.disabled && {
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: theme.palette.border.disabled,
             borderTop: theme.palette.border.disabled,
             borderLeft: "transparent",
             borderRight: "transparent"
           },
-          pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+          pointerEvents: ownerState.disabled ? "none" : "auto",
           "&:hover": {
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
+            pointerEvents: ownerState.disabled ? "none" : "auto"
           },
           "& .MuiInputBase-input::placeholder": {
             color: theme.palette.text.disabled

package/components/mui_extended/TextField/constants.js

@@ -1,8 +1,7 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
 const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
-const TEXT_FIELD_CLASSES = getComponentClasses(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots);
+getComponentClasses(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots);
 export {
-  TEXT_FIELD_KEY_COMPONENT as T,
-  TEXT_FIELD_CLASSES as a
+  TEXT_FIELD_KEY_COMPONENT as T
 };

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

@@ -41,6 +41,10 @@ export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color'
      * color="primary"
      */
     color?: Extract<ComponentPalletColor, 'default' | 'primary'>;
+    /**
+     * Indica si el campo de texto debe aceptar solo texto.
+     */
+    type?: string;
 }
 /**
  * Estado del propietario del campo de texto.
@@ -49,19 +53,15 @@ export interface TextFieldOwnerState {
     /**
      * Indica si el campo de texto está deshabilitado.
      */
-    textFieldDisabled?: boolean;
+    disabled?: boolean;
     /**
      * Color de la paleta del campo de texto.
      */
-    textFieldPaletteColor: PaletteColor;
+    paletteColor: PaletteColor;
     /**
      * Variante del campo de texto.
      */
-    textFieldVariant?: TextFieldVariants;
-    /**
-     * Color de la paleta del componente del campo de texto.
-     */
-    textFieldComponentPaletteColor?: ComponentPalletColor;
+    variants?: TextFieldVariants;
     /**
      * Tamaño del campo de texto.
      */
@@ -69,15 +69,7 @@ export interface TextFieldOwnerState {
     /**
      * Indica si el campo de texto es error.
      */
-    textFieldError?: boolean;
-    /**
-     * Color del campo de texto.
-     */
-    textFieldColor?: Extract<ComponentPalletColor, 'primary'>;
-    /**
-     * Indica si el campo de texto debe aceptar solo texto.
-     */
-    type?: string;
+    error?: boolean;
 }
 export type TextFieldSlotsType = keyof typeof TextFieldSlots;
-export type TextFieldStyles = Partial<OverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type TextFieldStyles = OverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme>;

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

@@ -1,6 +1,6 @@
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { TypographyProps as MUITypographyProps, Theme } from '@mui/material';
-import { Sizes, M4LTypographyVariants } from '@m4l/styles';
+import { Sizes, TypographyVariants } from '@m4l/styles';
 import { TypographySlots } from './slots/typographyEnum';
 import { TYPOGRAPHY_KEY_COMPONENT } from './constants';
 /**
@@ -10,7 +10,7 @@ export type TypographyColors = 'text.primary' | 'text.secondary' | 'text.disable
 /**
  * Define la propiedades del componente, se une a las capacidades originales de MUI Typography.
  */
-export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'variant' | 'children'> {
+export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'variant' | 'children' | 'size'> {
     /**
      * Anchura del elemento Skeleton.
      */
@@ -30,7 +30,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     /**
      * Listas de variantes de tipografía disponibles para la aplicación web.
      */
-    variant?: M4LTypographyVariants;
+    variant?: TypographyVariants;
     /**
      * Contenido del componente.
      */
@@ -39,6 +39,8 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
      * Nombre identificador del componente, es útil para realizar pruebas del componente.
      */
     dataTestid?: string;
+    /** Sirve para vincular un elemento de etiqueta con un elemento de formulario, como un campo de entrada, lo que permite que al hacer clic en el texto de la etiqueta, se active el campo correspondiente*/
+    htmlFor?: string | undefined;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.