@m4l/components 9.2.56-beta.4 → 9.2.56-beta.6

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

@@ -11,8 +11,8 @@ const textFieldStyles = {
     padding: 0,
     borderRadius: theme.vars.size.borderRadius.r1,
     display: "flex",
-    // Estilos globales del TextField 🌎
     "& .MuiInputBase-root": {
+      // Estilos globales del TextField 🌎
       // Paddings
       paddingLeft: theme.vars.size.baseSpacings.sp1,
       paddingRight: 0,
@@ -20,7 +20,7 @@ const textFieldStyles = {
       paddingBottom: 0,
       // Estilo de los bordes
       border: theme.vars.size.borderStroke.actionInput,
-      borderColor: ownerState?.error ? `${ownerState?.paletteColor?.enabled}!important` : `${theme.vars.palette.border.default}!important`,
+      borderColor: ownerState?.error && !ownerState?.readOnly ? `${ownerState?.paletteColor?.enabled}!important` : `${theme.vars.palette.border.default}!important`,
       // Redondeado de los bordes
       borderRadius: theme.vars.size.borderRadius.r1,
       // Altura
@@ -39,68 +39,71 @@ const textFieldStyles = {
           };
         }
       ),
+      ...ownerState?.readOnly ? {
+        backgroundColor: theme.vars.palette.background.neutral
+      } : {}
+    },
+    // ↴ Overrides ❌
+    // Estilos del input
+    "& .MuiInputBase-input": {
       // ↴ Overrides ❌
-      // Estilos del input
-      "& > .MuiInputBase-input": {
-        // ↴ Overrides ❌
-        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",
-          "body"
-        ),
-        "&::placeholder": {
-          color: theme.palette.text.disabled
-        },
-        "&:-webkit-autofill": {
-          backgroundColor: "transparent!important"
-        }
+      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",
+        "body"
+      ),
+      "&::placeholder": {
+        color: theme.palette.text.disabled
       },
-      // Estilos de cuando esta deshabilitado
+      "&:-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",
+      width: "auto",
+      // ↴ Overrides ❌
+      margin: 0
+    },
+    // Estilos de la mascara fieldset, es un elemento interno del textfield, material lo usa como mascara para el estilo.
+    // por practicidad se oculta en nuestra versión, sin embargo no se elimina porque es parte de la semántica del componente.
+    "& .MuiOutlinedInput-notchedOutline": {
+      all: "unset",
+      display: "none"
+    },
+    "& .MuiInputAdornment-root .M4LIcon-icon": {
+      backgroundColor: ownerState?.error ? ownerState?.paletteColor?.enabled : theme.vars.palette.text.primary,
       ...ownerState?.disabled && {
-        borderColor: `${theme.vars.palette.border.disabled}!important`,
-        pointerEvents: ownerState?.disabled ? "none" : "auto"
-      },
-      // Estilos del los adorments
-      "& .MuiInputAdornment-root": {
-        height: "auto",
-        width: "auto",
-        // ↴ Overrides ❌
-        margin: 0
-      },
-      // Estilos de la mascara fieldset, es un elemento interno del textfield, material lo usa como mascara para el estilo.
-      // por practicidad se oculta en nuestra versión, sin embargo no se elimina porque es parte de la semántica del componente.
-      "& .MuiOutlinedInput-notchedOutline": {
-        all: "unset",
-        display: "none"
-      },
-      "& .MuiInputAdornment-root .M4LIcon-icon": {
-        backgroundColor: ownerState?.error ? ownerState?.paletteColor?.enabled : theme.vars.palette.text.primary,
-        ...ownerState?.disabled && {
-          backgroundColor: theme.vars.palette.text.disabled
-        }
-      },
-      "&:hover": {
-        backgroundColor: ownerState?.paletteColor?.hoverOpacity,
-        ...ownerState?.error && {
-          borderColor: `${ownerState?.paletteColor?.hover}!important`,
-          "& .MuiInputAdornment-root .M4LIcon-icon": {
-            backgroundColor: ownerState?.paletteColor?.hover
-          }
-        }
-      },
-      "&:focus-within": {
-        borderColor: `${ownerState?.paletteColor?.enabled}!important`,
+        backgroundColor: theme.vars.palette.text.disabled
+      }
+    },
+    "&:not(.M4LTextField-readOnly ) .MuiInputBase-root:hover": {
+      backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+      ...ownerState?.error && {
+        borderColor: `${ownerState?.paletteColor?.hover}!important`,
         "& .MuiInputAdornment-root .M4LIcon-icon": {
-          backgroundColor: ownerState?.paletteColor?.focus
+          backgroundColor: ownerState?.paletteColor?.hover
         }
       }
     },
+    "&:not(.M4LTextField-readOnly ) .MuiInputBase-root:focus-within": {
+      borderColor: `${ownerState?.paletteColor?.enabled}!important`,
+      "& .MuiInputAdornment-root .M4LIcon-icon": {
+        backgroundColor: ownerState?.paletteColor?.focus
+      }
+    },
     // Variant Outlined TextField
     ...ownerState?.variant === "outlined" && {
       [`&.${TEXT_FIELD_CLASSES.outlined} .MuiInputBase-root`]: {
@@ -122,13 +125,13 @@ const textFieldStyles = {
     ...ownerState?.variant === "contained" && {
       [`&.${TEXT_FIELD_CLASSES.contained} .MuiInputBase-root`]: {
         border: "none",
-        backgroundColor: theme.vars.palette[ownerState?.color || "default"][ownerState?.error ? "toneOpacity" : "enabled"]
+        backgroundColor: ownerState?.readOnly ? theme.vars.palette.background.neutral : theme.vars.palette[ownerState?.color || "default"][ownerState?.error ? "toneOpacity" : "enabled"]
       },
-      ...ownerState?.error && {
+      ...ownerState?.error && !ownerState?.readOnly && {
         border: theme.vars.size.borderStroke.actionInput,
         borderColor: `${ownerState?.paletteColor?.enabled}!important`
       },
-      "&:focus-within": {
+      "&:not(.M4LTextField-readOnly ) .MuiInputBase-root:focus-within": {
         border: theme.vars.size.borderStroke.actionInput,
         borderColor: `${ownerState?.paletteColor?.enabled}!important`
       }

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

@@ -4,6 +4,7 @@ export declare const COMBINATED_TEXTFIELD_ENUMS: {
     outlined: TexFieldComplementaryClasses.outlined;
     text: TexFieldComplementaryClasses.text;
     contained: TexFieldComplementaryClasses.contained;
+    readOnly: TexFieldComplementaryClasses.readOnly;
     root: TextFieldSlots.root;
     skeleton: TextFieldSlots.skeleton;
 };

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

@@ -5,5 +5,6 @@ export declare enum TextFieldSlots {
 export declare enum TexFieldComplementaryClasses {
     outlined = "outlined",
     text = "text",
-    contained = "contained"
+    contained = "contained",
+    readOnly = "readOnly"
 }

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

@@ -7,6 +7,7 @@ var TexFieldComplementaryClasses = /* @__PURE__ */ ((TexFieldComplementaryClasse
   TexFieldComplementaryClasses2["outlined"] = "outlined";
   TexFieldComplementaryClasses2["text"] = "text";
   TexFieldComplementaryClasses2["contained"] = "contained";
+  TexFieldComplementaryClasses2["readOnly"] = "readOnly";
   return TexFieldComplementaryClasses2;
 })(TexFieldComplementaryClasses || {});
 export {

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

@@ -36,6 +36,11 @@ export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color'
      * size="medium"
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indica si el campo de texto está en modo de solo lectura.
+     * readOnly={true}
+     */
+    readOnly?: boolean;
 }
 /**
  * Estado del propietario del campo de texto.
@@ -61,7 +66,14 @@ export interface TextFieldOwnerState {
      * Indica si el campo de texto es error.
      */
     error?: boolean;
+    /**
+     * Color del campo de texto.
+     */
     color?: Extract<ComponentPalletColor, 'default' | 'error'>;
+    /**
+     * Indica si el campo de texto está en modo de solo lectura.
+     */
+    readOnly?: boolean;
 }
 export type TextFieldSlotsType = keyof typeof TextFieldSlots;
 export type TextFieldStyles = M4LOverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.56-beta.4",
+  "version": "9.2.56-beta.6",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.1-beta.4",
-    "@m4l/styles": "7.1.28-beta.4",
+    "@m4l/graphics": "7.1.1-beta.6",
+    "@m4l/styles": "7.1.28-beta.6",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/storybook/components/NoItemSelect/NoItemSelect.stories.d.ts

@@ -5,4 +5,8 @@ export default meta;
 type Story = StoryObj<typeof NoItemSelected>;
 /** Base component  */
 export declare const NoItemSelectedComponent: Story;
+/**
+ * Version skeleton del componente
+ */
+export declare const Skeleton: Story;
 export declare const WithSplitLayout: Story;

package/storybook/components/PropertyValue/PropertyValue.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PropertyValue } from '../../../src/components/PropertyValue/PropertyValue';
+import { PropertyValue } from '../../../src/components/PropertyValue';
 declare const meta: Meta<typeof PropertyValue>;
 export default meta;
 type Story = StoryObj<typeof PropertyValue>;
@@ -59,3 +59,7 @@ export declare const LargeProperty: Story;
  * Historia sin formulario con valor largo.
  */
 export declare const LargeValue: Story;
+/**
+ * Historia que muestra todos los estados semánticos de semanticWidth de manera vertical.
+ */
+export declare const SemanticWidths: Story;

package/storybook/components/extended/mui/TextField/TextFieldText.stories.d.ts

@@ -8,6 +8,17 @@ import { TextField } from '../../../../../src/components/mui_extended/TextField/
 declare const meta: Meta<typeof TextField>;
 type Story = StoryObj<typeof TextField>;
 export declare const Default: Story;
+/**
+ * Se aplica cuando el input está en modo de solo lectura y no puede ser interactuado por el usuario.
+ *
+ * readOnly
+ */
+export declare const ReadOnly: Story;
+/**
+ * Se aplica cuando el input tiene adornos.
+ *
+ * disabled
+ */
 export declare const WhitAdorment: Story;
 export declare const WithSkeleton: Story;
 export default meta;