@m4l/components 9.5.9 → 9.5.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/extended/mui/TextField/TextField.styles.d.ts.map +1 -1
  2. package/components/extended/mui/TextField/TextField.styles.js +87 -59
  3. package/package.json +7 -7
package/components/extended/mui/TextField/TextField.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/TextField/TextField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,eAAe,EAAE,eAyO7B,CAAC"}
1
+ {"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/TextField/TextField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6B1C,eAAO,MAAM,eAAe,EAAE,eAmQ7B,CAAC"}
package/components/extended/mui/TextField/TextField.styles.js CHANGED
@@ -1,75 +1,82 @@
1
- import { getTypographyStyles as a } from "../../../../utils/getTypographyStyles.js";
2
- import { getHeightSizeStyles as e, getSizeStyles as s } from "../../../../utils/getSizeStyles/getSizeStyles.js";
3
- import { TEXT_FIELD_CLASSES as l } from "./constants.js";
4
- const t = (o, r) => o && o > 79 && o < 100 ? r.vars.palette.warning.semanticText : o === 100 ? r.vars.palette.chips.forest.outlined.colorTone : r.vars.palette.text.secondary, u = {
1
+ import { getTypographyStyles as e } from "../../../../utils/getTypographyStyles.js";
2
+ import { getHeightSizeStyles as l, getSizeStyles as s } from "../../../../utils/getSizeStyles/getSizeStyles.js";
3
+ import { TEXT_FIELD_CLASSES as p } from "./constants.js";
4
+ function r() {
5
+ return {
6
+ WebkitBoxShadow: "0 0 0 1000px #20202000 inset !important",
7
+ boxShadow: "0 0 0 1000px #20202000 inset !important"
8
+ };
9
+ }
10
+ const i = (o, t) => o && o > 79 && o < 100 ? t.vars.palette.warning.semanticText : o === 100 ? t.vars.palette.chips.forest.outlined.colorTone : t.vars.palette.text.secondary, c = {
5
11
  /**
6
12
  * Estilos personalizados para el componente TextField.
7
13
  */
8
- root: ({ ownerState: o, theme: r }) => ({
14
+ root: ({ ownerState: o, theme: t }) => ({
9
15
  width: "100%",
10
16
  height: "fit-content!important",
11
17
  minHeight: "fit-content!important",
12
18
  padding: 0,
13
- borderRadius: r.vars.size.borderRadius["r1-5"],
19
+ borderRadius: t.vars.size.borderRadius["r1-5"],
14
20
  display: "flex",
15
21
  overflow: "visible",
16
22
  "&&& .MuiInputBase-root": {
17
23
  // Positioning context so autofill input can fill the wrapper (inset: 0)
18
24
  position: "relative",
19
25
  width: "100%",
26
+ backgroundColor: t.vars.palette.background.default,
20
27
  // Estilos globales del TextField 🌎
21
28
  // Paddings
22
- paddingLeft: r.vars.size.baseSpacings.sp1,
29
+ paddingLeft: t.vars.size.baseSpacings.sp1,
23
30
  paddingRight: 0,
24
31
  paddingTop: 0,
25
32
  paddingBottom: 0,
26
33
  overflow: "hidden",
27
34
  // Redondeado de los bordes
28
- borderRadius: r.vars.size.borderRadius["r1-5"],
35
+ borderRadius: t.vars.size.borderRadius["r1-5"],
29
36
  // Altura
30
37
  height: "100%",
31
38
  // transición
32
39
  transition: "all 0.2s ease",
33
40
  // Espaciado entre elementos
34
41
  ...s(
35
- r,
42
+ t,
36
43
  o?.size || "medium",
37
44
  "action",
38
- (i) => ({
45
+ (a) => ({
39
46
  height: "auto",
40
- minHeight: i
47
+ minHeight: a
41
48
  })
42
49
  ),
43
50
  "& .MuiInputBase-input.MuiInputBase-inputMultiline": {
44
- paddingTop: r.vars.size.baseSpacings.sp1,
45
- paddingBottom: r.vars.size.baseSpacings.sp1
51
+ paddingTop: t.vars.size.baseSpacings.sp1,
52
+ paddingBottom: t.vars.size.baseSpacings.sp1
46
53
  },
47
54
  // Variant Outlined TextField
48
55
  ...o?.variant === "outlined" && {
49
56
  // Estilos de borde
50
- border: r.vars.size.borderStroke.actionInput,
51
- borderColor: r.vars.palette.border.secondary,
52
- borderRadius: r.vars.size.borderRadius["r1-5"]
57
+ border: t.vars.size.borderStroke.actionInput,
58
+ borderColor: t.vars.palette.border.secondary,
59
+ borderRadius: t.vars.size.borderRadius["r1-5"]
53
60
  },
54
61
  // Variant Text TextField
55
62
  ...o?.variant === "text" && {
56
63
  // Estilos de borde por el formato de variante, solo se aplica para borde inferior.
57
- borderBottom: r.vars.size.borderStroke.actionInput,
58
- borderColor: r.vars.palette.border.secondary,
64
+ borderBottom: t.vars.size.borderStroke.actionInput,
65
+ borderColor: t.vars.palette.border.secondary,
59
66
  borderRadius: 0
60
67
  },
61
68
  // Variant Contained TextField
62
69
  ...o?.variant === "contained" && {
63
- border: r.vars.size.borderStroke.actionInput,
70
+ border: t.vars.size.borderStroke.actionInput,
64
71
  borderColor: "transparent",
65
- backgroundColor: r.vars.palette[o?.color || "default"][o?.error ? "toneOpacity" : "enabledOpacity"]
72
+ backgroundColor: t.vars.palette[o?.color || "default"][o?.error ? "toneOpacity" : "enabledOpacity"]
66
73
  },
67
74
  // state readOnly
68
75
  ...o?.readOnly && {
69
- backgroundColor: r.vars.palette.default.enabledOpacity,
70
- borderColor: `${r.vars.palette.border.secondary}!important`,
76
+ backgroundColor: t.vars.palette.default.enabledOpacity,
77
+ borderColor: `${t.vars.palette.border.secondary}!important`,
71
78
  "& .MuiInputBase-input": {
72
- color: r.vars.palette.text.primary
79
+ color: t.vars.palette.text.primary
73
80
  }
74
81
  },
75
82
  ...!o?.readOnly && {
@@ -78,15 +85,15 @@ const t = (o, r) => o && o > 79 && o < 100 ? r.vars.palette.warning.semanticText
78
85
  },
79
86
  /* State hover */
80
87
  "&:hover": {
81
- backgroundColor: o?.error ? o?.paletteColor?.hoverOpacity : r.vars.palette.default.hoverOpacity,
88
+ backgroundColor: o?.error ? o?.paletteColor?.hoverOpacity : t.vars.palette.default.hoverOpacity,
82
89
  ...o?.error && o?.variant !== "contained" && {
83
90
  borderColor: `${o?.paletteColor?.hover}`
84
91
  }
85
92
  },
86
93
  /* State focus */
87
94
  "&:focus-within": {
88
- backgroundColor: r.vars.palette.background.default,
89
- borderColor: `${r.vars.palette.primary.selected}`,
95
+ backgroundColor: t.vars.palette.background.default,
96
+ borderColor: `${t.vars.palette.primary.selected}`,
90
97
  ...o?.variant === "text" ? {
91
98
  boxShadow: `0px 1.5px 0px 0px ${o?.paletteColor?.selectedOpacity} !important`
92
99
  } : {
@@ -102,59 +109,80 @@ const t = (o, r) => o && o > 79 && o < 100 ? r.vars.palette.warning.semanticText
102
109
  // Estilos del input
103
110
  "& .MuiInputBase-input": {
104
111
  // ↴ Overrides ❌
105
- paddingLeft: r.vars.size.baseSpacings.sp1,
106
- paddingRight: r.vars.size.baseSpacings.sp1,
112
+ paddingLeft: t.vars.size.baseSpacings.sp1,
113
+ paddingRight: t.vars.size.baseSpacings.sp1,
107
114
  paddingTop: 0,
108
115
  paddingBottom: 0,
109
- fontFamily: r.typography.fontFamily,
110
- color: o?.disabled ? r.vars.palette.text.disabled : r.vars.palette.text.primary,
116
+ fontFamily: t.typography.fontFamily,
117
+ color: o?.disabled ? t.vars.palette.text.disabled : t.vars.palette.text.primary,
111
118
  transition: "all 0.2s ease",
112
- ...a(
113
- r.generalSettings.isMobile,
119
+ ...e(
120
+ t.generalSettings.isMobile,
114
121
  o?.size || "medium",
115
122
  "body"
116
123
  ),
117
124
  "&::placeholder": {
118
- color: `${r.vars.palette.text.disabled}`,
125
+ color: `${t.vars.palette.text.disabled}`,
119
126
  opacity: 1
120
127
  },
121
128
  "&:focus": {
122
129
  "&::placeholder": {
123
- color: `${r.vars.palette.text.primary}!important`
130
+ color: `${t.vars.palette.text.primary}!important`
124
131
  }
125
132
  },
126
- // When autofilled: transparent background so it blends with wrapper
133
+ "&::selection": {
134
+ backgroundColor: t.vars.palette.primary.selectedOpacity,
135
+ color: t.vars.palette.text.primary,
136
+ WebkitTextFillColor: t.vars.palette.text.primary
137
+ },
138
+ // Autofill: solid inset fill matches field surface (transparent fails vs Chrome autofill paint)
127
139
  "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
128
140
  width: "100%",
129
141
  height: "100%",
130
142
  boxSizing: "border-box",
131
- color: `${r.vars.palette.text.primary} !important`,
132
- WebkitTextFillColor: `${r.vars.palette.text.primary} !important`,
133
- WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
134
- boxShadow: "0 0 0 1000px transparent inset !important"
143
+ color: `${t.vars.palette.text.primary} !important`,
144
+ WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
145
+ caretColor: t.vars.palette.text.primary,
146
+ ...r(),
147
+ transition: "background-color 5000s ease-in-out 0s"
135
148
  },
136
149
  "&:-moz-autofill, &:-moz-autofill-preview": {
137
150
  filter: "none",
138
- boxShadow: "0 0 0 1000px transparent inset !important",
139
- WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
140
- color: `${r.vars.palette.text.primary} !important`,
151
+ color: `${t.vars.palette.text.primary} !important`,
152
+ caretColor: t.vars.palette.text.primary,
153
+ ...r(),
141
154
  transition: "background-color 5000s ease-in-out 0s"
142
155
  },
143
156
  "&:autofill, &:autofill:hover, &:autofill:focus, &:autofill:active": {
144
157
  width: "100%",
145
158
  height: "100%",
146
159
  boxSizing: "border-box",
147
- color: `${r.vars.palette.text.primary} !important`,
148
- boxShadow: "0 0 0 1000px transparent inset !important",
149
- WebkitBoxShadow: "0 0 0 1000px transparent inset !important"
160
+ color: `${t.vars.palette.text.primary} !important`,
161
+ WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
162
+ caretColor: t.vars.palette.text.primary,
163
+ ...r(),
164
+ transition: "background-color 5000s ease-in-out 0s"
150
165
  }
151
166
  },
167
+ // Hover / focus: match `MuiInputBase-root` background so autofill overlay stays aligned with the field
168
+ "&&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:hover, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:focus, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:active": {
169
+ color: `${t.vars.palette.text.primary} !important`,
170
+ WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
171
+ caretColor: t.vars.palette.text.primary,
172
+ ...r()
173
+ },
174
+ "&&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:hover, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:focus, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:active": {
175
+ color: `${t.vars.palette.text.primary} !important`,
176
+ WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
177
+ caretColor: t.vars.palette.text.primary,
178
+ ...r()
179
+ },
152
180
  // Estilos de cuando esta deshabilitado
153
181
  ...o?.disabled && {
154
- borderColor: `${r.vars.palette.border.disabled}!important`,
182
+ borderColor: `${t.vars.palette.border.disabled}!important`,
155
183
  pointerEvents: o?.disabled ? "none" : "auto",
156
184
  "& .MuiInputAdornment-root .M4LIcon-icon": {
157
- backgroundColor: r.vars.palette.text.disabled
185
+ backgroundColor: t.vars.palette.text.disabled
158
186
  }
159
187
  },
160
188
  // Estilos del los adorments
@@ -174,12 +202,12 @@ const t = (o, r) => o && o > 79 && o < 100 ? r.vars.palette.warning.semanticText
174
202
  /**
175
203
  * Estilos personalizados para el componente Skeleton.
176
204
  */
177
- skeleton: ({ ownerState: o, theme: r }) => ({
178
- [`&.${l.skeleton}`]: {
205
+ skeleton: ({ ownerState: o, theme: t }) => ({
206
+ [`&.${p.skeleton}`]: {
179
207
  display: "flex",
180
- borderRadius: r.vars.size.borderRadius.r1,
181
- ...e(
182
- r.generalSettings.isMobile,
208
+ borderRadius: t.vars.size.borderRadius.r1,
209
+ ...l(
210
+ t.generalSettings.isMobile,
183
211
  o?.size || "medium",
184
212
  "action"
185
213
  )
@@ -197,22 +225,22 @@ const t = (o, r) => o && o > 79 && o < 100 ? r.vars.palette.warning.semanticText
197
225
  /**
198
226
  * Estilos personalizados para el texto de limite de caracteres.
199
227
  */
200
- limitTextFirst: ({ ownerState: o, theme: r }) => ({
201
- color: t(o?.percent || 0, r)
228
+ limitTextFirst: ({ ownerState: o, theme: t }) => ({
229
+ color: i(o?.percent || 0, t)
202
230
  }),
203
231
  /**
204
232
  * Estilos personalizados para el texto de limite de caracteres.
205
233
  */
206
- limitTextSeparator: ({ ownerState: o, theme: r }) => ({
207
- color: t(o?.percent || 0, r)
234
+ limitTextSeparator: ({ ownerState: o, theme: t }) => ({
235
+ color: i(o?.percent || 0, t)
208
236
  }),
209
237
  /**
210
238
  * Estilos personalizados para el texto de limite de caracteres.
211
239
  */
212
- limitTextSecond: ({ ownerState: o, theme: r }) => ({
213
- color: t(o?.percent || 0, r)
240
+ limitTextSecond: ({ ownerState: o, theme: t }) => ({
241
+ color: i(o?.percent || 0, t)
214
242
  })
215
243
  };
216
244
  export {
217
- u as textFieldStyles
245
+ c as textFieldStyles
218
246
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.5.9",
3
+ "version": "9.5.10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -51,23 +51,23 @@
51
51
  "@hookform/resolvers": "2.9.11",
52
52
  "nprogress": "0.2.0",
53
53
  "react-transition-group": "4.4.5",
54
- "react-rnd": "10.5.2",
55
- "react-draggable": "4.5.0",
56
54
  "react-dropzone": "14.4.1",
57
55
  "react-spinners": "0.13.8",
56
+ "react-draggable": "4.5.0",
57
+ "react-rnd": "10.5.2",
58
58
  "date-fns": "2.30.0",
59
+ "react-color": "2.19.3",
60
+ "@mui/x-date-pickers": "6.20.2",
61
+ "simplebar-react": "3.2.6",
59
62
  "chart.js": "4.5.1",
60
63
  "chartjs-chart-error-bars": "4.4.5",
61
64
  "qrcode.react": "3.2.0",
62
- "simplebar-react": "3.2.6",
63
- "react-color": "2.19.3",
64
- "@mui/x-date-pickers": "6.20.2",
65
65
  "react-resizable-panels": "2.1.9",
66
66
  "react-data-grid": "7.0.0-beta.47",
67
67
  "react-dnd": "16.0.1",
68
68
  "react-dnd-html5-backend": "16.0.1",
69
- "react-window": "1.8.11",
70
69
  "react-resizable": "3.1.3",
70
+ "react-window": "1.8.11",
71
71
  "@tanstack/react-virtual": "3.13.23"
72
72
  }
73
73
  }