@m4l/components 9.1.54 → 9.1.56

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

@@ -18,8 +18,8 @@ const textFieldStyles = {
     // Estilos globales del TextField 🌎
     "& .MuiInputBase-root": {
       // Paddings
-      paddingRight: theme.vars.size.baseSpacings.sp1,
       paddingLeft: theme.vars.size.baseSpacings.sp1,
+      paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
       // Estilo de los bordes
@@ -29,25 +29,30 @@ const textFieldStyles = {
       borderRadius: theme.vars.size.borderRadius.r1,
       // Altura
       height: "100%",
-      // Estilos de cuando esta deshabilitado
-      ...ownerState.disabled && {
-        borderColor: `${theme.vars.palette.border.disabled}!important`
-        // pointerEvents: ownerState.disabled ? 'none' : 'auto',
-      },
+      // transición
+      transition: "all 0.2s ease",
+      // Espaciado entre elementos
       ...getHeightSizeStyles(
         theme.generalSettings.isMobile,
         ownerState.size || "medium",
-        "action"
+        "action",
+        (height) => {
+          return {
+            height: "auto",
+            minHeight: height
+          };
+        }
       ),
       // ↴ Overrides ❌
       // Estilos del input
       "& > .MuiInputBase-input": {
         // ↴ Overrides ❌
-        paddingTop: 0,
-        paddingBottom: 0,
         paddingLeft: theme.vars.size.baseSpacings.sp1,
         paddingRight: theme.vars.size.baseSpacings.sp1,
+        paddingTop: 0,
+        paddingBottom: 0,
         fontFamily: theme.typography.fontFamily,
+        color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.primary,
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState.size || "medium",
@@ -55,8 +60,16 @@ const textFieldStyles = {
         ),
         "&::placeholder": {
           color: theme.palette.text.disabled
+        },
+        "&:-webkit-autofill": {
+          backgroundColor: "transparent!important"
         }
       },
+      // Estilos de cuando esta deshabilitado
+      ...ownerState.disabled && {
+        borderColor: `${theme.vars.palette.border.disabled}!important`,
+        pointerEvents: ownerState.disabled ? "none" : "auto"
+      },
       // Estilos del los adorments
       "& .MuiInputAdornment-root": {
         height: "auto",
@@ -71,7 +84,10 @@ const textFieldStyles = {
         display: "none"
       },
       "& .MuiInputAdornment-root .M4LIcon-icon": {
-        backgroundColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.text.primary
+        backgroundColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.text.primary,
+        ...ownerState.disabled && {
+          backgroundColor: theme.vars.palette.text.disabled
+        }
       },
       "&:hover": {
         backgroundColor: ownerState.paletteColor?.hoverOpacity,

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

@@ -1,8 +1,8 @@
-import { TexFieldVariants, TextFieldSlots } from './slots';
+import { TexFieldComplementaryClasses, TextFieldSlots } from './slots';
 export declare const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
 export declare const COMBINATED_TEXTFIELD_ENUMS: {
-    outlined: TexFieldVariants.outlined;
-    text: TexFieldVariants.text;
+    outlined: TexFieldComplementaryClasses.outlined;
+    text: TexFieldComplementaryClasses.text;
     root: TextFieldSlots.root;
     skeleton: TextFieldSlots.skeleton;
 };

package/components/mui_extended/TextField/constants.js

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

package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts

@@ -2,7 +2,7 @@ export declare enum TextFieldSlots {
     root = "root",
     skeleton = "skeleton"
 }
-export declare enum TexFieldVariants {
+export declare enum TexFieldComplementaryClasses {
     outlined = "outlined",
     text = "text"
 }

package/components/mui_extended/TextField/slots/TextFieldEnum.js

@@ -3,12 +3,12 @@ var TextFieldSlots = /* @__PURE__ */ ((TextFieldSlots2) => {
   TextFieldSlots2["skeleton"] = "skeleton";
   return TextFieldSlots2;
 })(TextFieldSlots || {});
-var TexFieldVariants = /* @__PURE__ */ ((TexFieldVariants2) => {
-  TexFieldVariants2["outlined"] = "outlined";
-  TexFieldVariants2["text"] = "text";
-  return TexFieldVariants2;
-})(TexFieldVariants || {});
+var TexFieldComplementaryClasses = /* @__PURE__ */ ((TexFieldComplementaryClasses2) => {
+  TexFieldComplementaryClasses2["outlined"] = "outlined";
+  TexFieldComplementaryClasses2["text"] = "text";
+  return TexFieldComplementaryClasses2;
+})(TexFieldComplementaryClasses || {});
 export {
   TextFieldSlots as T,
-  TexFieldVariants as a
+  TexFieldComplementaryClasses as a
 };

package/components/mui_extended/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TYPOGRAPHY_CLASS_NAME_SPECIFY, a as TYPOGRAPHY_KEY_COMPONENT } from "./constants.js";
+import { T as TYPOGRAPHY_CLASS_NAME_SPECIFY, a as TYPOGRAPHY_CLASSES, b as TYPOGRAPHY_KEY_COMPONENT } from "./constants.js";
 import { T as TypographySlots } from "./slots/typographyEnum.js";
 import { S as StyledMUITypography, a as StyledSkeleton } from "./slots/typographySlots.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
@@ -30,7 +30,7 @@ function Typography(props) {
   return /* @__PURE__ */ jsx(
     StyledMUITypography,
     {
-      className: clsx(className, TYPOGRAPHY_CLASS_NAME_SPECIFY),
+      className: clsx(className, TYPOGRAPHY_CLASS_NAME_SPECIFY, TYPOGRAPHY_CLASSES.root),
       variant,
       ownerState: { ...ownerState },
       ...getPropDataTestId(TYPOGRAPHY_KEY_COMPONENT, TypographySlots.root, dataTestid),
@@ -40,7 +40,8 @@ function Typography(props) {
         {
           width: index === skeletonRows - 1 ? skeletonWidth : "100%",
           variant: "text",
-          ownerState: { ...ownerState }
+          ownerState: { ...ownerState },
+          className: TYPOGRAPHY_CLASSES.skeleton
         },
         index
       ))

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

@@ -7,3 +7,7 @@ export declare const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
  * tener la necesidad de agregar valores en !important.
  */
 export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
+/**
+ * Inventario de clases CSS para el componente Typography.
+ */
+export declare const TYPOGRAPHY_CLASSES: Record<string, string>;

package/components/mui_extended/Typography/constants.js

@@ -1,6 +1,10 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { T as TypographySlots } from "./slots/typographyEnum.js";
 const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
 const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
+const TYPOGRAPHY_CLASSES = getComponentClasses(TYPOGRAPHY_KEY_COMPONENT, TypographySlots);
 export {
   TYPOGRAPHY_CLASS_NAME_SPECIFY as T,
-  TYPOGRAPHY_KEY_COMPONENT as a
+  TYPOGRAPHY_CLASSES as a,
+  TYPOGRAPHY_KEY_COMPONENT as b
 };

package/components/mui_extended/Typography/slots/typographySlots.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { a as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
+import { b as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
 import { T as TypographySlots } from "./typographyEnum.js";
 import { t as typographyStyles } from "../typography.styles.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";

package/index.js

@@ -46,7 +46,7 @@ import { D as D2, u as u4 } from "./components/formatters/DateFormatter/index.js
 import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/index.js";
 import { P as P2, g as g8 } from "./components/formatters/PointsFormatter/index.js";
 import { C, g as g9 } from "./components/formatters/ConcatenatedFormatter/index.js";
-import { P as P3, u as u5 } from "./components/formatters/PeriodFormatter/index.js";
+import { P as P3, u as u5 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P4, g as g10 } from "./components/formatters/PriceFormatter/index.js";
 import { g as g11 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D3 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.54",
+  "version": "9.1.56",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/utils/getHeightSizeStyles.js

@@ -2,7 +2,7 @@ import { POINTER_QR_MOBILE_SIZES, POINTER_QR_DESKTOP_SIZES } from "@m4l/styles";
 const getHeightSizeStyles = (isMobile, size, variantSize, css) => {
   const pointerQrSource = isMobile ? POINTER_QR_MOBILE_SIZES : POINTER_QR_DESKTOP_SIZES;
   const heightSize = pointerQrSource[size][variantSize];
-  const resolvedCss = css;
+  const resolvedCss = typeof css === "function" ? css(heightSize) : css;
   return {
     height: heightSize,
     ...resolvedCss

package/components/formatters/PeriodFormatter/index.d.ts

@@ -1,15 +0,0 @@
-import { PeriodFormatterProps } from './types';
-/**
- * Muestra un periodo de tiempo en años, meses y días. Retorna un string
- * @param years Cantidad de años
- * @param months Cantidad de meses
- * @param days Cantidad de días
- * @returns string
- */
-export declare function useFormatPeriod(years: number, months: number, days: number): string;
-/**
- * Muestra un periodo de tiempo en años, meses y días. Retorna un JSX
- * @param props
- * @returns
- */
-export declare function PeriodFormatter(props: PeriodFormatterProps): JSX.Element;

package/components/formatters/PeriodFormatter/index.js

@@ -1,60 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { W as WrapperComponent } from "../../WrapperComponent/index.js";
-import { d as dictionary } from "./dictionary.js";
-import { useModuleDictionary } from "@m4l/core";
-function useFormatPeriod(years, months, days) {
-  const { getLabel } = useModuleDictionary();
-  let period = "";
-  const separator = ", ";
-  switch (years) {
-    case 0:
-      break;
-    case 1:
-      period = "1 " + getLabel(dictionary.LABEL_YEAR);
-      break;
-    default:
-      period = years.toString() + " " + getLabel(dictionary.LABEL_YEARS);
-  }
-  switch (months) {
-    case 0:
-      break;
-    case 1:
-      if (years > 0) {
-        period += separator;
-      }
-      period += "1 " + getLabel(dictionary.LABEL_MONTH);
-      break;
-    default:
-      if (years > 0) {
-        period += separator;
-      }
-      period += months.toString() + " " + getLabel(dictionary.LABEL_MONTHS);
-  }
-  switch (days) {
-    case 0:
-      break;
-    case 1:
-      if (years > 0 || months > 0) {
-        period += separator;
-      }
-      period += "1 " + getLabel(dictionary.LABEL_DAY);
-      break;
-    default:
-      if (years > 0 || months > 0) {
-        period += separator;
-      }
-      period += days.toString() + " " + getLabel(dictionary.LABEL_DAYS);
-  }
-  if (period === "") {
-    period = "-";
-  }
-  return period;
-}
-function PeriodFormatter(props) {
-  const { years = 0, months = 0, days = 0, Component = WrapperComponent } = props;
-  return /* @__PURE__ */ jsx(Component, { children: useFormatPeriod(years, months, days) });
-}
-export {
-  PeriodFormatter as P,
-  useFormatPeriod as u
-};

package/components/formatters/PeriodFormatter/index.test.d.ts

@@ -1,4 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-export {};