@m4l/components 9.1.84 → 9.1.86

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 (17) hide show
  1. package/components/Chip/Chip.js +2 -10
  2. package/components/Chip/ChipStyles.js +37 -433
  3. package/components/Chip/types.d.ts +1 -2
  4. package/components/CommonActions/components/ActionFormIntro/index.d.ts +2 -2
  5. package/components/CommonActions/components/ActionFormIntro/index.js +5 -9
  6. package/components/CommonActions/components/ActionFormIntro/types.d.ts +4 -0
  7. package/components/hook-form/RHFAutocomplete/RFHAutocompleteStyles.js +2 -1
  8. package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js +1 -1
  9. package/components/mui_extended/Autocomplete/Autocomplete.js +14 -13
  10. package/components/mui_extended/Autocomplete/Autocomplete.styles.js +22 -23
  11. package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.d.ts +2 -2
  12. package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.js +2 -2
  13. package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts +5 -2
  14. package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.js +11 -5
  15. package/components/mui_extended/CheckBox/CheckBox.js +1 -1
  16. package/components/mui_extended/IconButton/IconButton.styles.js +2 -1
  17. package/package.json +1 -1
package/components/Chip/Chip.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
3
- import { useTheme } from "@mui/material";
2
+ import { useModuleSkeleton, useEnvironment } from "@m4l/core";
4
3
  import clsx from "clsx";
5
4
  import { forwardRef } from "react";
6
5
  import { C as CHIP_CLASSES } from "./constants.js";
@@ -24,18 +23,11 @@ const Chip = forwardRef((props, ref) => {
24
23
  } = props;
25
24
  const { currentSize } = useComponentSize(size);
26
25
  const isSkeleton = useModuleSkeleton();
27
- const theme = useTheme();
28
26
  const { host_static_assets, environment_assets } = useEnvironment();
29
27
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
30
- const paletteColor = getPropertyByString(
31
- theme.vars.palette,
32
- color || "default",
33
- theme.vars.palette.default
34
- );
35
28
  const ownerState = {
36
29
  chipSize: adjustedSize,
37
30
  variant,
38
- paletteColor,
39
31
  color,
40
32
  opacity
41
33
  };
@@ -77,12 +69,12 @@ const Chip = forwardRef((props, ref) => {
77
69
  ChipRootStyled,
78
70
  {
79
71
  role: "button-chip",
80
- tabIndex: 0,
81
72
  size: adjustedSize,
82
73
  onClick,
83
74
  ownerState: { ...ownerState },
84
75
  className: clsx(className, CHIP_CLASSES.root),
85
76
  ref,
77
+ ...onClick ? { tabIndex: 0 } : {},
86
78
  ...others,
87
79
  children: [
88
80
  renderIcon(startIcon, "ChipStartIcon"),
package/components/Chip/ChipStyles.js CHANGED
@@ -6,444 +6,48 @@ const chipStyles = {
6
6
  * @updatedAt 2025-01-08 10:36:40 - automatic
7
7
  * @updatedUser Andrés Quintero - automatic
8
8
  */
9
- root: ({ theme, ownerState }) => ({
10
- display: "flex",
11
- alignItems: "center",
12
- padding: theme.vars.size.baseSpacings.sp1,
13
- borderRadius: theme.vars.size.borderRadius["r0-5"],
14
- width: "max-content",
15
- cursor: "pointer",
16
- ...ownerState.variant === "contained" && {
17
- ...ownerState.color === "default" && {
18
- color: theme.vars.palette.chips.default.contrastText,
19
- backgroundColor: theme.vars.palette.chips.default.backgroundColor,
20
- "& .M4LIconClass-root": {
21
- backgroundColor: theme.vars.palette.chips.default.contrastText
22
- },
23
- "&:hover": {
24
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
25
- "&:active": {
26
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
27
- "& .M4LIconClass-root": {
28
- backgroundColor: theme.vars.palette.chips.default.contrastText
29
- }
30
- }
31
- },
32
- ...ownerState.opacity === true && {
33
- color: theme.vars.palette.chips.default.semanticText,
34
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundColor,
35
- "& .M4LIconClass-root": {
36
- backgroundColor: theme.vars.palette.chips.default.semanticText
37
- },
38
- "&:hover": {
39
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
40
- "&:active": {
41
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
42
- "& .M4LIconClass-root": {
43
- backgroundColor: theme.vars.palette.chips.default.semanticText
44
- }
45
- }
46
- }
47
- },
48
- "&:focus-visible": {
49
- boxShadow: "none",
50
- outline: theme.vars.size.borderStroke.container,
51
- outlineColor: theme.vars.palette.border.main,
52
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
53
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
54
- }
9
+ root: ({ theme, ownerState }) => {
10
+ const keyColor = ownerState.color || "defualt";
11
+ const keyColorOpacity = keyColor + "Opacity";
12
+ const keyColorConditionalOpacity = ownerState.opacity ? keyColorOpacity : keyColor;
13
+ const bgColor = ownerState.variant !== "outlined" ? theme.vars.palette.chips[keyColorConditionalOpacity].backgroundColor : "transparent";
14
+ const bgActive = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundActive;
15
+ const bgHover = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundHover;
16
+ const color = ownerState.variant === "contained" && !ownerState.opacity ? theme.vars.palette.chips[keyColorConditionalOpacity].contrastText : theme.vars.palette.chips[keyColorConditionalOpacity].semanticText;
17
+ return {
18
+ display: "flex",
19
+ alignItems: "center",
20
+ padding: theme.vars.size.baseSpacings.sp1,
21
+ borderRadius: theme.vars.size.borderRadius["r0-5"],
22
+ width: "max-content",
23
+ cursor: "pointer",
24
+ color,
25
+ backgroundColor: bgColor,
26
+ "& .M4LIcon-icon": {
27
+ backgroundColor: `${color} !important`
55
28
  },
56
- ...ownerState.color === "warning" && {
57
- color: theme.vars.palette.chips.warning.contrastText,
58
- backgroundColor: theme.vars.palette.chips.warning.backgroundColor,
59
- "& .M4LIconClass-root": {
60
- backgroundColor: theme.vars.palette.chips.warning.contrastText
61
- },
62
- "&:hover": {
63
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
64
- "&:active": {
65
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
66
- "& .M4LIconClass-root": {
67
- backgroundColor: theme.vars.palette.chips.warning.contrastText
68
- }
69
- }
70
- },
71
- ...ownerState.opacity === true && {
72
- color: theme.vars.palette.chips.warningOpacity.contrastText,
73
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundColor,
74
- "& .M4LIconClass-root": {
75
- backgroundColor: theme.vars.palette.text.primary
76
- },
77
- "&:hover": {
78
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
79
- "&:active": {
80
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
81
- "& .M4LIconClass-root": {
82
- backgroundColor: theme.vars.palette.text.primary
83
- }
84
- }
85
- }
86
- },
87
- "&:focus-visible": {
88
- boxShadow: "none",
89
- outline: theme.vars.size.borderStroke.container,
90
- outlineColor: theme.vars.palette.border.main,
91
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
92
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
93
- }
29
+ "&:hover": {
30
+ backgroundColor: bgHover
94
31
  },
95
- ...ownerState.color === "success" && {
96
- color: theme.vars.palette.chips.success.contrastText,
97
- backgroundColor: theme.vars.palette.chips.success.backgroundColor,
98
- "& .M4LIconClass-root": {
99
- backgroundColor: theme.vars.palette.chips.info.contrastText
100
- },
101
- "&:hover": {
102
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
103
- "&:active": {
104
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
105
- "& .M4LIconClass-root": {
106
- backgroundColor: theme.vars.palette.chips.info.contrastText
107
- }
108
- }
109
- },
110
- ...ownerState.opacity === true && {
111
- color: theme.vars.palette.text.primary,
112
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundColor,
113
- "& .M4LIconClass-root": {
114
- backgroundColor: theme.vars.palette.text.primary
115
- },
116
- "&:hover": {
117
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
118
- "&:active": {
119
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
120
- "& .M4LIconClass-root": {
121
- backgroundColor: theme.vars.palette.text.primary
122
- }
123
- }
124
- }
125
- },
126
- "&:focus-visible": {
127
- boxShadow: "none",
128
- outline: theme.vars.size.borderStroke.container,
129
- outlineColor: theme.vars.palette.border.main,
130
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
131
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
132
- }
32
+ "&:active": {
33
+ backgroundColor: bgActive
34
+ // '& .M4LIcon-icon': {
35
+ // backgroundColor: color,
36
+ // },
133
37
  },
134
- ...ownerState.color === "error" && {
135
- color: theme.vars.palette.chips.error.contrastText,
136
- backgroundColor: theme.vars.palette.chips.error.backgroundColor,
137
- "& .M4LIconClass-root": {
138
- backgroundColor: theme.vars.palette.chips.error.contrastText
139
- },
140
- "&:hover": {
141
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
142
- "&:active": {
143
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
144
- "& .M4LIconClass-root": {
145
- backgroundColor: theme.vars.palette.chips.error.contrastText
146
- }
147
- }
148
- },
149
- ...ownerState.opacity === true && {
150
- color: theme.vars.palette.chips.error.semanticText,
151
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
152
- "& .M4LIconClass-root": {
153
- backgroundColor: theme.vars.palette.chips.error.semanticText
154
- },
155
- "&:hover": {
156
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
157
- "&:active": {
158
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
159
- "& .M4LIconClass-root": {
160
- backgroundColor: theme.vars.palette.chips.error.semanticText
161
- }
162
- }
163
- }
164
- },
165
- "&:focus-visible": {
166
- boxShadow: "none",
167
- outline: theme.vars.size.borderStroke.container,
168
- outlineColor: theme.vars.palette.border.main,
169
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
170
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
171
- }
38
+ ...ownerState.variant === "outlined" && {
39
+ border: `${theme.vars.size.borderStroke.container}`,
40
+ borderColor: color
172
41
  },
173
- ...ownerState.color === "info" && {
174
- color: theme.vars.palette.chips.info.contrastText,
175
- backgroundColor: theme.vars.palette.chips.info.backgroundColor,
176
- "& .M4LIconClass-root": {
177
- backgroundColor: theme.vars.palette.chips.info.contrastText
178
- },
179
- "&:hover": {
180
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
181
- "&:active": {
182
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
183
- "& .M4LIconClass-root": {
184
- backgroundColor: theme.vars.palette.chips.info.contrastText
185
- }
186
- }
187
- },
188
- ...ownerState.opacity === true && {
189
- color: theme.vars.palette.text.primary,
190
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
191
- "& .M4LIconClass-root": {
192
- backgroundColor: theme.vars.palette.text.primary
193
- },
194
- "&:hover": {
195
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
196
- "&:active": {
197
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive,
198
- "& .M4LIconClass-root": {
199
- backgroundColor: theme.vars.palette.text.primary
200
- }
201
- }
202
- }
203
- },
204
- "&:focus-visible": {
205
- boxShadow: "none",
206
- outline: theme.vars.size.borderStroke.container,
207
- outlineColor: theme.vars.palette.border.main,
208
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
209
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
210
- }
42
+ "&:focus-visible": {
43
+ boxShadow: "none",
44
+ outline: theme.vars.size.borderStroke.container,
45
+ outlineColor: theme.vars.palette.border.main,
46
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
47
+ backgroundColor: bgActive
211
48
  }
212
- },
213
- ...ownerState.variant === "outlined" && {
214
- backgroundColor: "transparent",
215
- border: `${theme.vars.size.borderStroke.container}`,
216
- ...ownerState.color === "default" && {
217
- color: theme.vars.palette.chips.default.semanticText,
218
- borderColor: theme.vars.palette.chips.default.backgroundColor,
219
- "& .M4LIconClass-root": {
220
- backgroundColor: theme.vars.palette.chips.default.semanticText
221
- },
222
- "&:hover": {
223
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
224
- "&:active": {
225
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
226
- "& .M4LIconClass-root": {
227
- backgroundColor: theme.vars.palette.chips.default.semanticText
228
- }
229
- }
230
- },
231
- ...ownerState.opacity === true && {
232
- color: theme.vars.palette.chips.default.semanticText,
233
- borderColor: theme.vars.palette.chips.default.backgroundColor,
234
- "& .M4LIconClass-root": {
235
- backgroundColor: theme.vars.palette.chips.default.semanticText
236
- },
237
- "&:hover": {
238
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
239
- "&:active": {
240
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
241
- "& .M4LIconClass-root": {
242
- backgroundColor: theme.vars.palette.chips.default.semanticText
243
- }
244
- }
245
- }
246
- },
247
- "&:focus-visible": {
248
- boxShadow: "none",
249
- outline: theme.vars.size.borderStroke.container,
250
- outlineColor: theme.vars.palette.border.main,
251
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
252
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
253
- }
254
- },
255
- ...ownerState.color === "warning" && {
256
- color: theme.vars.palette.chips.warning.semanticText,
257
- borderColor: theme.vars.palette.chips.warning.backgroundColor,
258
- "& .M4LIconClass-root": {
259
- backgroundColor: theme.vars.palette.chips.warning.semanticText
260
- },
261
- "&:hover": {
262
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
263
- "&:active": {
264
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
265
- "& .M4LIconClass-root": {
266
- backgroundColor: theme.vars.palette.chips.warning.semanticText
267
- }
268
- }
269
- },
270
- ...ownerState.opacity === true && {
271
- color: theme.vars.palette.chips.default.semanticText,
272
- borderColor: theme.vars.palette.chips.default.backgroundColor,
273
- "& .M4LIconClass-root": {
274
- backgroundColor: theme.vars.palette.chips.default.semanticText
275
- },
276
- "&:hover": {
277
- color: theme.vars.palette.chips.warning.semanticText,
278
- borderColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
279
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
280
- "& .M4LIconClass-root": {
281
- backgroundColor: theme.vars.palette.chips.warning.semanticText
282
- },
283
- "&:active": {
284
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
285
- "& .M4LIconClass-root": {
286
- backgroundColor: theme.vars.palette.chips.warning.semanticText
287
- }
288
- }
289
- }
290
- },
291
- "&:focus-visible": {
292
- boxShadow: "none",
293
- outline: theme.vars.size.borderStroke.container,
294
- outlineColor: theme.vars.palette.border.main,
295
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
296
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
297
- }
298
- },
299
- ...ownerState.color === "success" && {
300
- color: theme.vars.palette.chips.success.semanticText,
301
- borderColor: theme.vars.palette.chips.success.backgroundColor,
302
- "& .M4LIconClass-root": {
303
- backgroundColor: theme.vars.palette.chips.success.semanticText
304
- },
305
- "&:hover": {
306
- color: theme.vars.palette.chips.success.contrastText,
307
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
308
- "& .M4LIconClass-root": {
309
- backgroundColor: theme.vars.palette.chips.success.contrastText
310
- },
311
- "&:active": {
312
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
313
- "& .M4LIconClass-root": {
314
- backgroundColor: theme.vars.palette.chips.success.contrastText
315
- }
316
- }
317
- },
318
- ...ownerState.opacity === true && {
319
- color: theme.vars.palette.chips.success.semanticText,
320
- borderColor: theme.vars.palette.chips.successOpacity.backgroundColor,
321
- "& .M4LIconClass-root": {
322
- backgroundColor: theme.vars.palette.chips.success.semanticText
323
- },
324
- "&:hover": {
325
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
326
- "&:active": {
327
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
328
- "& .M4LIconClass-root": {
329
- backgroundColor: theme.vars.palette.chips.success.semanticText
330
- }
331
- }
332
- }
333
- },
334
- "&:focus-visible": {
335
- boxShadow: "none",
336
- outline: theme.vars.size.borderStroke.container,
337
- outlineColor: theme.vars.palette.border.main,
338
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
339
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
340
- }
341
- },
342
- ...ownerState.color === "error" && {
343
- color: theme.vars.palette.chips.error.semanticText,
344
- borderColor: theme.vars.palette.chips.error.backgroundColor,
345
- "& .M4LIconClass-root": {
346
- backgroundColor: theme.vars.palette.chips.error.semanticText
347
- },
348
- "&:hover": {
349
- color: theme.vars.palette.chips.error.contrastText,
350
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
351
- "& .M4LIconClass-root": {
352
- backgroundColor: theme.vars.palette.chips.error.contrastText
353
- },
354
- "&:active": {
355
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
356
- "& .M4LIconClass-root": {
357
- backgroundColor: theme.vars.palette.chips.error.contrastText
358
- }
359
- }
360
- },
361
- ...ownerState.opacity === true && {
362
- color: theme.vars.palette.chips.error.semanticText,
363
- borderColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
364
- "& .M4LIconClass-root": {
365
- backgroundColor: theme.vars.palette.chips.error.semanticText
366
- },
367
- "&:hover": {
368
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
369
- "&:active": {
370
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
371
- "& .M4LIconClass-root": {
372
- backgroundColor: theme.vars.palette.chips.error.semanticText
373
- }
374
- }
375
- }
376
- },
377
- "&:focus-visible": {
378
- boxShadow: "none",
379
- outline: theme.vars.size.borderStroke.container,
380
- outlineColor: theme.vars.palette.border.main,
381
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
382
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
383
- }
384
- },
385
- ...ownerState.color === "info" && {
386
- color: theme.vars.palette.chips.info.semanticText,
387
- borderColor: theme.vars.palette.chips.info.backgroundColor,
388
- "& .M4LIconClass-root": {
389
- backgroundColor: theme.vars.palette.chips.info.semanticText
390
- },
391
- "&:hover": {
392
- color: theme.vars.palette.chips.info.contrastText,
393
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
394
- "& .M4LIconClass-root": {
395
- backgroundColor: theme.vars.palette.chips.info.contrastText
396
- },
397
- "&:active": {
398
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
399
- "& .M4LIconClass-root": {
400
- backgroundColor: theme.vars.palette.chips.info.contrastText
401
- }
402
- }
403
- },
404
- ...ownerState.opacity === true && {
405
- color: theme.vars.palette.chips.info.semanticText,
406
- borderColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
407
- "& .M4LIconClass-root": {
408
- backgroundColor: theme.vars.palette.chips.info.semanticText
409
- },
410
- "&:hover": {
411
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
412
- "&:active": {
413
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive
414
- }
415
- }
416
- },
417
- "&:focus-visible": {
418
- boxShadow: "none",
419
- outline: theme.vars.size.borderStroke.container,
420
- outlineColor: theme.vars.palette.border.main,
421
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
422
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
423
- }
424
- }
425
- },
426
- // Estilos específicos para el tamaño small
427
- ...ownerState.chipSize === "small" && {
428
- ...theme.generalSettings.isMobile ? {
429
- height: theme.vars.size.mobile.small.base,
430
- minHeight: theme.vars.size.mobile.small.base
431
- } : {
432
- height: theme.vars.size.desktop.small.base,
433
- minHeight: theme.vars.size.desktop.small.base
434
- }
435
- },
436
- // Estilos específicos para el tamaño medium
437
- ...ownerState.chipSize === "medium" && {
438
- ...theme.generalSettings.isMobile ? {
439
- height: theme.vars.size.mobile.medium.base,
440
- minHeight: theme.vars.size.mobile.medium.base
441
- } : {
442
- height: theme.vars.size.desktop.medium.base,
443
- minHeight: theme.vars.size.desktop.medium.base
444
- }
445
- }
446
- }),
49
+ };
50
+ },
447
51
  /**
448
52
  * Styles for the text chip element.
449
53
  * @author SebastianM - automatic
package/components/Chip/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ComponentPalletColor, Sizes } from '@m4l/styles';
2
- import { PaletteColor, Theme } from '@mui/material';
2
+ import { Theme } from '@mui/material';
3
3
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
4
4
  import { EventHandler, ReactNode } from 'react';
5
5
  import { CHIP_KEY_COMPONENT } from './constants';
@@ -77,7 +77,6 @@ export interface ChipProps {
77
77
  */
78
78
  export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
79
79
  opacity?: boolean;
80
- paletteColor: PaletteColor;
81
80
  chipSize: ChipProps['size'];
82
81
  }
83
82
  /**
package/components/CommonActions/components/ActionFormIntro/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
1
+ import { ActionsFormIntroProps } from './types';
2
2
  /**
3
3
  * TODO: Documentar
4
4
  * @author Andrés Quintero - automatic
@@ -6,4 +6,4 @@ import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
6
6
  * @updatedAt 2025-01-03 11:42:14 - automatic
7
7
  * @updatedUser Andrés Quintero - automatic
8
8
  */
9
- export declare function ActionFormIntro(props: LoadingButtonProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function ActionFormIntro(props: ActionsFormIntroProps): import("react/jsx-runtime").JSX.Element;
package/components/CommonActions/components/ActionFormIntro/index.js CHANGED
@@ -1,31 +1,27 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useFormContext, useFormState } from "react-hook-form";
3
- import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
4
- import { Skeleton } from "@mui/material";
3
+ import { useModuleDictionary } from "@m4l/core";
5
4
  import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
6
5
  import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
7
6
  function ActionFormIntro(props) {
7
+ const { variant = "contained", color = "primary", label, ...others } = props;
8
8
  const { getLabel } = useModuleDictionary();
9
- const isSkeleton = useModuleSkeleton();
9
+ const finalLabel = label || getLabel("common_actions.intro");
10
10
  const { control } = useFormContext();
11
11
  const { isSubmitting } = useFormState({
12
12
  control
13
13
  });
14
- const { variant = "contained", color = "primary" } = props;
15
14
  const classes = useCommonActionsUtilityClasses();
16
- if (isSkeleton) {
17
- return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
18
- }
19
15
  return /* @__PURE__ */ jsx(
20
16
  LoadingButton,
21
17
  {
18
+ ...others,
22
19
  variant,
23
20
  type: "submit",
24
21
  color,
25
22
  loading: isSubmitting,
26
23
  className: classes.actionFormIntro,
27
- ...props,
28
- label: getLabel("common_actions.intro")
24
+ label: finalLabel
29
25
  }
30
26
  );
31
27
  }
package/components/CommonActions/components/ActionFormIntro/types.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
2
+ export interface ActionsFormIntroProps extends Omit<LoadingButtonProps, 'label'> {
3
+ label?: string;
4
+ }
package/components/hook-form/RHFAutocomplete/RFHAutocompleteStyles.js CHANGED
@@ -9,7 +9,8 @@ const rhfAutocompleteSyles = {
9
9
  autocompleteRoot: ({ theme }) => ({
10
10
  display: "flex",
11
11
  flexDirection: "column",
12
- gap: theme.vars.size.baseSpacings.sp1
12
+ gap: theme.vars.size.baseSpacings.sp1,
13
+ width: "100%"
13
14
  }),
14
15
  /**
15
16
  * Styles for the label component.
package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js CHANGED
@@ -12,7 +12,7 @@ function RHFAutocomplete(props) {
12
12
  name: nameRHF,
13
13
  getOptionLabel,
14
14
  isOptionEqualToValue,
15
- label = "RHF Autocomplete",
15
+ label,
16
16
  color,
17
17
  options,
18
18
  disabled,
package/components/mui_extended/Autocomplete/Autocomplete.js CHANGED
@@ -1,10 +1,9 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
3
3
  import { forwardRef, useState, useEffect, useCallback, useMemo } from "react";
4
4
  import { r as renderOption } from "./renderOptions/index.js";
5
- import { Autocomplete as Autocomplete$1 } from "@mui/material";
6
5
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
7
- import { C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled, S as SkeletonAutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled } from "./slots /AutocompleteSlots.js";
6
+ import { C as ChipStyled, I as ImageStyled, A as AdormentsStyled, a as CircularProgressStyled, b as IconButtonStyled, S as SkeletonAutocompleteStyled, c as AutocompleteRootStyled, P as PopperComponentStyled, R as RenderInputStyled } from "./slots /AutocompleteSlots.js";
8
7
  import { T as Typography } from "../Typography/Typography.js";
9
8
  const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
10
9
  const {
@@ -149,6 +148,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
149
148
  return isOptionEqualToValueLocal(option, selectedValue);
150
149
  });
151
150
  const adornments = useMemo(() => {
151
+ if (disabled) {
152
+ return null;
153
+ }
152
154
  const returnValue = {};
153
155
  if (Array.isArray(selectedValue) && multiple) {
154
156
  returnValue.startAdornment = selectedValue.map((option, index) => /* @__PURE__ */ jsx(
@@ -174,17 +176,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
174
176
  );
175
177
  }
176
178
  }
177
- if (loading) {
178
- returnValue.endAdornment = /* @__PURE__ */ jsx(
179
+ returnValue.endAdornment = /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState: {}, children: [
180
+ loading ? /* @__PURE__ */ jsx(
179
181
  CircularProgressStyled,
180
182
  {
181
183
  ownerState: { ...ownerState },
182
- color: "primary",
183
184
  size: adjustedSize
184
185
  }
185
- );
186
- } else {
187
- returnValue.endAdornment = /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
186
+ ) : refresh ? /* @__PURE__ */ jsx(
188
187
  IconButtonStyled,
189
188
  {
190
189
  ownerState: { ...ownerState },
@@ -193,7 +192,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
193
192
  disabled,
194
193
  size: adjustedSize
195
194
  }
196
- ) : /* @__PURE__ */ jsx(
195
+ ) : null,
196
+ /* @__PURE__ */ jsx(
197
197
  IconButtonStyled,
198
198
  {
199
199
  ownerState: { ...ownerState },
@@ -202,8 +202,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
202
202
  disabled,
203
203
  size: adjustedSize
204
204
  }
205
- ) });
206
- }
205
+ )
206
+ ] });
207
207
  return returnValue;
208
208
  }, [selectedValue, multiple, loading, adjustedSize, getOptionLabelLocal, ownerState, handleDelete, getOptionUrlImage, selectedOption, getOptionUrlImageLocal, refresh, host_static_assets, environment_assets, handleRefresh, disabled, onOpenLocal]);
209
209
  if (isSkeleton) {
@@ -215,8 +215,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
215
215
  );
216
216
  }
217
217
  return /* @__PURE__ */ jsx(
218
- Autocomplete$1,
218
+ AutocompleteRootStyled,
219
219
  {
220
+ ownerState: { ...ownerState },
220
221
  multiple,
221
222
  onKeyDown: checkKeyDown,
222
223
  size: adjustedSize,
package/components/mui_extended/Autocomplete/Autocomplete.styles.js CHANGED
@@ -1,5 +1,12 @@
1
1
  import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
2
2
  const autocompleteSyles = {
3
+ /**
4
+ * Styles for the root component.
5
+ */
6
+ root: () => ({
7
+ width: "100%",
8
+ padding: 0
9
+ }),
3
10
  /**
4
11
  * Styles for the icon button component.
5
12
  * @author SebastianM - automatic
@@ -7,22 +14,15 @@ const autocompleteSyles = {
7
14
  * @updatedAt 2025-01-08 10:36:41 - automatic
8
15
  * @updatedUser Andrés Quintero - automatic
9
16
  */
10
- iconButton: () => ({
11
- position: "absolute",
12
- top: "50%",
13
- right: 0,
14
- transform: "translateY(-50%)"
15
- }),
17
+ iconButton: {},
16
18
  /**
17
- * Styles for the autocomplete component.
18
- * @param {object} theme - The theme object.
19
- * @returns {object} The styles for the autocomplete component.
20
- * @author SebastianM - automatic
21
- * @createdAt 2024-11-26 12:36:08 - automatic
22
- * @updatedAt 2024-12-10 15:24:11 - automatic
23
- * @updatedUser SebastianM - automatic
19
+ * Styles for the input component.
24
20
  */
25
- autocomplete: {},
21
+ adorments: ({ theme }) => ({
22
+ display: "flex",
23
+ alignItems: "center",
24
+ gap: theme.vars.size.baseSpacings.sp1
25
+ }),
26
26
  /**
27
27
  * Styles for the typography component.
28
28
  * @createdAt 2025-01-08 10:36:40 - automatic
@@ -74,8 +74,13 @@ const autocompleteSyles = {
74
74
  // position: 'relative',
75
75
  height: "auto !important",
76
76
  "& .MuiInputBase-root": {
77
- padding: theme.vars.size.baseSpacings.sp1,
78
- gap: theme.vars.size.baseSpacings.sp1
77
+ padding: "unset !important",
78
+ gap: theme.vars.size.baseSpacings.sp1,
79
+ "& > input": {
80
+ textOverflow: "ellipsis",
81
+ whiteSpace: "nowrap",
82
+ overflow: "hidden!important"
83
+ }
79
84
  }
80
85
  }),
81
86
  /**
@@ -98,12 +103,7 @@ const autocompleteSyles = {
98
103
  * @updatedAt 2025-01-08 10:36:41 - automatic
99
104
  * @updatedUser Andrés Quintero - automatic
100
105
  */
101
- circularProgress: ({ theme }) => ({
102
- position: "absolute",
103
- top: "18%",
104
- right: theme.vars.size.baseSpacings.sp2,
105
- transform: "translateY(-50%)"
106
- }),
106
+ circularProgress: {},
107
107
  /**
108
108
  * Styles for the skeleton autocomplete component.
109
109
  * @author SebastianM - automatic
@@ -125,7 +125,6 @@ const autocompleteSyles = {
125
125
  )
126
126
  };
127
127
  },
128
- autocompleteRoot: {},
129
128
  renderInputText: {}
130
129
  };
131
130
  export {
package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  export declare enum AutocompleteSlots {
2
- autocomplete = "autocomplete",
3
- autocompleteRoot = "autocompleteRoot",
2
+ root = "root",
4
3
  chip = "chip",
5
4
  popper = "popper",
6
5
  typography = "typography",
6
+ adorments = "adorments",
7
7
  iconButton = "iconButton",
8
8
  menuItem = "menuItem",
9
9
  menuList = "menuList",
package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.js CHANGED
@@ -1,9 +1,9 @@
1
1
  var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
2
- AutocompleteSlots2["autocomplete"] = "autocomplete";
3
- AutocompleteSlots2["autocompleteRoot"] = "autocompleteRoot";
2
+ AutocompleteSlots2["root"] = "root";
4
3
  AutocompleteSlots2["chip"] = "chip";
5
4
  AutocompleteSlots2["popper"] = "popper";
6
5
  AutocompleteSlots2["typography"] = "typography";
6
+ AutocompleteSlots2["adorments"] = "adorments";
7
7
  AutocompleteSlots2["iconButton"] = "iconButton";
8
8
  AutocompleteSlots2["menuItem"] = "menuItem";
9
9
  AutocompleteSlots2["menuList"] = "menuList";
package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
1
+ export declare const AutocompleteRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>, keyof import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
2
2
  ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
3
3
  }, {}, {}>;
4
- export declare const AutocompleteStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>, keyof import('@mui/material').AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
4
+ export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
5
5
  ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
6
6
  }, {}, {}>;
7
7
  export declare const ChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Chip').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../Chip').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
@@ -36,3 +36,6 @@ export declare const PopperComponentStyled: import('@emotion/styled').StyledComp
36
36
  export declare const RenderInputTextStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
37
37
  ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
38
38
  }, {}, {}>;
39
+ export declare const AdormentsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
40
+ ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
41
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.js CHANGED
@@ -12,14 +12,14 @@ import { T as Typography } from "../../Typography/Typography.js";
12
12
  import { S as Skeleton } from "../../Skeleton/Skeleton.js";
13
13
  import { P as Popper } from "../../Popper/Popper.js";
14
14
  import { M as MenuItem } from "../../MenuItem/MenuItem.js";
15
+ const AutocompleteRootStyled = styled(Autocomplete, {
16
+ name: AUTOCOMPLETE_KEY_COMPONENT,
17
+ slot: AutocompleteSlots.root
18
+ })(autocompleteSyles?.root);
15
19
  const IconButtonStyled = styled(IconButton, {
16
20
  name: AUTOCOMPLETE_KEY_COMPONENT,
17
21
  slot: AutocompleteSlots.iconButton
18
22
  })(autocompleteSyles?.iconButton);
19
- styled(Autocomplete, {
20
- name: AUTOCOMPLETE_KEY_COMPONENT,
21
- slot: AutocompleteSlots.autocomplete
22
- })(autocompleteSyles?.autocomplete);
23
23
  const ChipStyled = styled(Chip, {
24
24
  name: AUTOCOMPLETE_KEY_COMPONENT,
25
25
  slot: AutocompleteSlots.chip
@@ -60,12 +60,18 @@ styled(Typography, {
60
60
  name: AUTOCOMPLETE_KEY_COMPONENT,
61
61
  slot: AutocompleteSlots.renderInputText
62
62
  })(autocompleteSyles?.renderInputText);
63
+ const AdormentsStyled = styled("div", {
64
+ name: AUTOCOMPLETE_KEY_COMPONENT,
65
+ slot: AutocompleteSlots.adorments
66
+ })(autocompleteSyles?.adorments);
63
67
  export {
68
+ AdormentsStyled as A,
64
69
  ChipStyled as C,
65
70
  ImageStyled as I,
66
71
  PopperComponentStyled as P,
67
72
  RenderInputStyled as R,
68
73
  SkeletonAutocompleteStyled as S,
69
74
  CircularProgressStyled as a,
70
- IconButtonStyled as b
75
+ IconButtonStyled as b,
76
+ AutocompleteRootStyled as c
71
77
  };
package/components/mui_extended/CheckBox/CheckBox.js CHANGED
@@ -20,7 +20,7 @@ const CheckBox = forwardRef((props, ref) => {
20
20
  htmlFor,
21
21
  error,
22
22
  inlineText,
23
- checked,
23
+ checked = false,
24
24
  ...others
25
25
  } = props;
26
26
  const { currentSize } = useComponentSize(size);
package/components/mui_extended/IconButton/IconButton.styles.js CHANGED
@@ -56,8 +56,9 @@ const iconButtonStyles = {
56
56
  }
57
57
  }
58
58
  },
59
- ":focus-visible": {
59
+ "&:focus-visible": {
60
60
  background: ownerState.paletteColor?.activeOpacity,
61
+ outline: `1px solid ${theme.vars.palette.border.main}`,
61
62
  '& [class*="M4LIcon-icon"]': {
62
63
  backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
63
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.84",
3
+ "version": "9.1.86",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"