@m4l/components 9.3.16-BE091925-beta.1 → 9.3.16-JT19092025.beta.1

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 (47) hide show
  1. package/components/Stepper/Stepper.styles.js +6 -1
  2. package/components/Stepper/hooks/useDynamicValidation/index.d.ts +9 -0
  3. package/components/Stepper/hooks/useDynamicValidation/index.js +57 -0
  4. package/components/Stepper/hooks/useStepperActions/index.js +21 -3
  5. package/components/Stepper/subcomponents/StepArea/index.js +4 -0
  6. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts +2 -1
  7. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +39 -6
  8. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts +2 -1
  9. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +5 -3
  10. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts +2 -1
  11. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +5 -3
  12. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts +2 -1
  13. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +5 -3
  14. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +17 -9
  15. package/components/Stepper/types.d.ts +7 -0
  16. package/components/areas/icons.js +1 -1
  17. package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js +35 -3
  18. package/components/hook-form/RHFAutocomplete/types.d.ts +6 -1
  19. package/components/hook-form/RHFormContext/index.d.ts +1 -1
  20. package/components/hook-form/RHFormContext/index.js +29 -4
  21. package/components/index.d.ts +0 -1
  22. package/components/mui_extended/Autocomplete/Autocomplete.js +6 -12
  23. package/components/mui_extended/Autocomplete/Autocomplete.styles.js +5 -48
  24. package/components/mui_extended/Autocomplete/hooks/useEndAdornments.d.ts +0 -1
  25. package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js +3 -4
  26. package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js +4 -4
  27. package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.js +4 -39
  28. package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.d.ts +1 -3
  29. package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js +0 -2
  30. package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.d.ts +0 -6
  31. package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js +1 -11
  32. package/components/mui_extended/Autocomplete/types.d.ts +1 -1
  33. package/components/mui_extended/Button/ButtonStyles.js +6 -3
  34. package/components/mui_extended/Popper/Popper.js +2 -9
  35. package/components/mui_extended/Popper/types.d.ts +0 -1
  36. package/components/mui_extended/Select/Select.js +10 -17
  37. package/components/mui_extended/Select/Select.styles.js +10 -17
  38. package/components/mui_extended/Select/types.d.ts +1 -1
  39. package/components/mui_extended/TextField/TextField.d.ts +1 -2
  40. package/components/mui_extended/TextField/TextField.js +4 -25
  41. package/components/mui_extended/TextField/TextField.styles.js +125 -132
  42. package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +9 -3
  43. package/components/mui_extended/TextField/slots/TextFieldSlots.js +1 -2
  44. package/components/mui_extended/Typography/Typography.js +1 -1
  45. package/components/mui_extended/Typography/typography.styles.js +1 -3
  46. package/package.json +2 -2
  47. package/test/mocks/dictionary-mock.d.ts +0 -433
@@ -10,20 +10,7 @@ const autocompleteSyles = {
10
10
  /**
11
11
  * Styles for the icon button component.
12
12
  */
13
- iconButton: ({ ownerState }) => ({
14
- ...ownerState?.readOnly && {
15
- "&:hover": {
16
- backgroundColor: "unset!important"
17
- },
18
- "&:active": {
19
- backgroundColor: "unset!important"
20
- },
21
- "&:focus-visible": {
22
- backgroundColor: "unset!important",
23
- outline: "none!important"
24
- }
25
- }
26
- }),
13
+ iconButton: {},
27
14
  /**
28
15
  * Styles for the input component.
29
16
  */
@@ -92,22 +79,10 @@ const autocompleteSyles = {
92
79
  /**
93
80
  * Styles for the popper component.
94
81
  */
95
- popper: () => ({
96
- width: "fit-content!important",
97
- maxWidth: "calc(100vw - 20px)",
82
+ popper: ({ theme }) => ({
83
+ ...theme.typography.body1,
98
84
  "& .MuiPaper-root": {
99
- minWidth: "100%",
100
- maxHeight: "200px",
101
- "& .MuiAutocomplete-listbox": {
102
- height: "100%",
103
- "& .M4LMenuItem-root ": {
104
- width: "fit-content",
105
- "& .M4LTypography-root": {
106
- width: "fit-content",
107
- overflow: "unset"
108
- }
109
- }
110
- }
85
+ width: "100%"
111
86
  }
112
87
  }),
113
88
  /**
@@ -131,25 +106,7 @@ const autocompleteSyles = {
131
106
  )
132
107
  };
133
108
  },
134
- renderInputText: {},
135
- /**
136
- * Styles for the container multiple values component.
137
- */
138
- containerMultipleValues: () => ({
139
- display: "flex",
140
- overflow: "auto",
141
- width: "100%",
142
- flex: 1,
143
- maxHeight: "80px"
144
- }),
145
- /**
146
- * Styles for the container wrapper component.
147
- */
148
- containerWrapper: ({ theme }) => ({
149
- display: "flex",
150
- flexWrap: "wrap",
151
- gap: theme.vars.size.baseSpacings.sp1
152
- })
109
+ renderInputText: {}
153
110
  };
154
111
  export {
155
112
  autocompleteSyles as a
@@ -8,7 +8,6 @@ export type UseAdornmentsProps = {
8
8
  disabled?: boolean;
9
9
  onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
10
10
  open: boolean;
11
- readOnly?: boolean;
12
11
  };
13
12
  /**
14
13
  * Hook para el componente Autocomplete local
@@ -11,8 +11,7 @@ function useEndAdornments(props) {
11
11
  handleRefresh,
12
12
  disabled,
13
13
  onOpenLocal,
14
- open,
15
- readOnly
14
+ open
16
15
  } = props;
17
16
  const { host_static_assets, environment_assets } = useEnvironment();
18
17
  return /* @__PURE__ */ jsxs(AdormentsStyled, { children: [
@@ -27,7 +26,7 @@ function useEndAdornments(props) {
27
26
  {
28
27
  ownerState: { ...ownerState },
29
28
  icon: `${host_static_assets}/${environment_assets}/${icons.refresh}`,
30
- onClick: !readOnly ? handleRefresh : void 0,
29
+ onClick: handleRefresh,
31
30
  disabled,
32
31
  size: adjustedSize
33
32
  }
@@ -37,7 +36,7 @@ function useEndAdornments(props) {
37
36
  {
38
37
  ownerState: { ...ownerState },
39
38
  icon: `${host_static_assets}/${environment_assets}/${icons.chevronDown}`,
40
- onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
39
+ onClick: (event) => onOpenLocal(event),
41
40
  disabled,
42
41
  size: adjustedSize,
43
42
  rotationAngle: open ? 180 : 0
@@ -1,5 +1,5 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled } from "../slots/AutocompleteSlots.js";
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import { b as ChipStyled } from "../slots/AutocompleteSlots.js";
3
3
  function useStartAdornments(props) {
4
4
  const {
5
5
  selectedValue,
@@ -13,7 +13,7 @@ function useStartAdornments(props) {
13
13
  if (!(Array.isArray(selectedValue) && multiple)) {
14
14
  return null;
15
15
  }
16
- return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
16
+ return /* @__PURE__ */ jsx(Fragment, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
17
17
  ChipStyled,
18
18
  {
19
19
  size: adjustedSize,
@@ -24,7 +24,7 @@ function useStartAdornments(props) {
24
24
  ownerState: { ...ownerState }
25
25
  },
26
26
  `${option}-${index}`
27
- )) }) });
27
+ )) });
28
28
  }
29
29
  export {
30
30
  useStartAdornments as u
@@ -4,7 +4,7 @@ function useValuesAndHandlers(props) {
4
4
  const {
5
5
  getOptionLabel,
6
6
  isOptionEqualToValue,
7
- options = [],
7
+ options,
8
8
  onOpen,
9
9
  onClose,
10
10
  onChangeFilterParmsLocal,
@@ -13,8 +13,7 @@ function useValuesAndHandlers(props) {
13
13
  // Diferencia
14
14
  refresh,
15
15
  onChange,
16
- value,
17
- readOnly
16
+ value
18
17
  } = props;
19
18
  const [open, setOpen] = useState(false);
20
19
  const scrollPositionOptionsRef = useRef(0);
@@ -40,9 +39,6 @@ function useValuesAndHandlers(props) {
40
39
  [isOptionEqualToValue]
41
40
  );
42
41
  const handleDelete = useCallback((optionToDelete) => {
43
- if (readOnly) {
44
- return;
45
- }
46
42
  if (Array.isArray(selectedValue)) {
47
43
  const updatedValue = selectedValue.filter(
48
44
  (val) => !isOptionEqualToValueLocal(val, optionToDelete)
@@ -54,7 +50,7 @@ function useValuesAndHandlers(props) {
54
50
  "removeOption"
55
51
  );
56
52
  }
57
- }, [selectedValue, isOptionEqualToValueLocal, onChange, readOnly]);
53
+ }, [selectedValue, isOptionEqualToValueLocal, onChange]);
58
54
  const handleRefresh = useCallback(() => {
59
55
  refresh?.();
60
56
  setOpen(true);
@@ -68,9 +64,6 @@ function useValuesAndHandlers(props) {
68
64
  onChange?.(event, updatedValue, reason);
69
65
  };
70
66
  const handleInputChange = (_event, newValue, reason) => {
71
- if (readOnly) {
72
- return;
73
- }
74
67
  setInputValue(newValue);
75
68
  if (onChangeFilterParmsLocal && reason === "input") {
76
69
  onChangeFilterParmsLocal(newValue, reason);
@@ -92,14 +85,11 @@ function useValuesAndHandlers(props) {
92
85
  }
93
86
  };
94
87
  const onOpenLocal = useCallback((event) => {
95
- if (readOnly) {
96
- return;
97
- }
98
88
  setOpen((currentState) => !currentState);
99
89
  if (onOpen) {
100
90
  onOpen(event);
101
91
  }
102
- }, [onOpen, readOnly]);
92
+ }, [onOpen]);
103
93
  const getOptionLabelLocal = useCallback(
104
94
  (option) => {
105
95
  if (typeof option === "string") {
@@ -119,14 +109,6 @@ function useValuesAndHandlers(props) {
119
109
  return getOptionUrlImage(option);
120
110
  }, [getOptionUrlImage]);
121
111
  const [inputValue, setInputValue] = useState("");
122
- useEffect(() => {
123
- if (readOnly && value !== null && value !== void 0 && !multiple) {
124
- const displayValue = getOptionLabelLocal(value);
125
- setInputValue(displayValue);
126
- } else if (readOnly && multiple) {
127
- setInputValue("");
128
- }
129
- }, [readOnly, value, getOptionLabelLocal, multiple]);
130
112
  useEffect(() => {
131
113
  if (open === false && value === null && inputValue !== "") {
132
114
  setInputValue("");
@@ -136,23 +118,6 @@ function useValuesAndHandlers(props) {
136
118
  if (e.code === "Enter") {
137
119
  e.preventDefault();
138
120
  }
139
- if (readOnly) {
140
- const allowedKeys = [
141
- "Tab",
142
- "Escape",
143
- "ArrowUp",
144
- "ArrowDown",
145
- "ArrowLeft",
146
- "ArrowRight",
147
- "Home",
148
- "End",
149
- "PageUp",
150
- "PageDown"
151
- ];
152
- if (!allowedKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
153
- e.preventDefault();
154
- }
155
- }
156
121
  };
157
122
  const selectedOption = options.find((option) => {
158
123
  return isOptionEqualToValueLocal(option, selectedValue);
@@ -11,7 +11,5 @@ export declare enum AutocompleteSlots {
11
11
  circularProgress = "circularProgress",
12
12
  textField = "textField",
13
13
  image = "image",
14
- renderInputText = "renderInputText",
15
- containerMultipleValues = "containerMultipleValues",
16
- containerWrapper = "containerWrapper"
14
+ renderInputText = "renderInputText"
17
15
  }
@@ -12,8 +12,6 @@ var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
12
12
  AutocompleteSlots2["textField"] = "textField";
13
13
  AutocompleteSlots2["image"] = "image";
14
14
  AutocompleteSlots2["renderInputText"] = "renderInputText";
15
- AutocompleteSlots2["containerMultipleValues"] = "containerMultipleValues";
16
- AutocompleteSlots2["containerWrapper"] = "containerWrapper";
17
15
  return AutocompleteSlots2;
18
16
  })(AutocompleteSlots || {});
19
17
  export {
@@ -39,9 +39,3 @@ export declare const RenderInputTextStyled: import('@emotion/styled').StyledComp
39
39
  export declare const AdormentsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
40
40
  ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
41
41
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
42
- export declare const ContainerMultipleValuesStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
43
- ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
44
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
45
- export declare const ContainerWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
46
- ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
47
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -64,14 +64,6 @@ const AdormentsStyled = styled("div", {
64
64
  name: AUTOCOMPLETE_KEY_COMPONENT,
65
65
  slot: AutocompleteSlots.adorments
66
66
  })(autocompleteSyles?.adorments);
67
- const ContainerMultipleValuesStyled = styled("div", {
68
- name: AUTOCOMPLETE_KEY_COMPONENT,
69
- slot: AutocompleteSlots.containerMultipleValues
70
- })(autocompleteSyles?.containerMultipleValues);
71
- const ContainerWrapperStyled = styled("div", {
72
- name: AUTOCOMPLETE_KEY_COMPONENT,
73
- slot: AutocompleteSlots.containerWrapper
74
- })(autocompleteSyles?.containerWrapper);
75
67
  export {
76
68
  AutocompleteRootStyled as A,
77
69
  CircularProgressStyled as C,
@@ -80,7 +72,5 @@ export {
80
72
  RenderInputStyled as R,
81
73
  SkeletonAutocompleteStyled as S,
82
74
  AdormentsStyled as a,
83
- ContainerMultipleValuesStyled as b,
84
- ContainerWrapperStyled as c,
85
- ChipStyled as d
75
+ ChipStyled as b
86
76
  };
@@ -25,7 +25,7 @@ export interface BaseAutocompleteProps {
25
25
  * Props for the unified Autocomplete component.
26
26
  * Supports both single and multiple selection, and two types: `text` and `image`.
27
27
  */
28
- export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled'>, Pick<TextFieldProps, 'error'>, BaseAutocompleteProps {
28
+ export interface AutocompleteProps<T, Multiple extends boolean | undefined> extends Pick<MUIAutocompleteProps<T, Multiple, undefined, false>, 'options' | 'onOpen' | 'onClose' | 'loading' | 'disabled' | 'open'>, Pick<TextFieldProps, 'error' | 'focused'>, BaseAutocompleteProps {
29
29
  /**
30
30
  * Indica si el campo de texto está en modo de solo lectura.
31
31
  * readOnly={true}
@@ -8,14 +8,14 @@ const buttonStyles = {
8
8
  flexWrap: "nowrap",
9
9
  alignItems: "center",
10
10
  gap: theme.vars.size.baseSpacings.sp1,
11
- padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
11
+ padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
12
12
  boxShadow: "none",
13
- borderRadius: theme.vars.size.borderRadius["r1-5"],
13
+ borderRadius: theme.vars.size.borderRadius.r1,
14
14
  maxWidth: "200px",
15
15
  minWidth: "0",
16
16
  flexShrink: 0,
17
17
  "&:hover": {
18
- backgroundColor: ownerState?.color === "default" ? ownerState?.paletteColor?.hover : ownerState?.paletteColor?.hoverOpacity,
18
+ backgroundColor: ownerState?.paletteColor?.hoverOpacity,
19
19
  borderColor: ownerState?.paletteColor?.hover
20
20
  },
21
21
  "&:active": {
@@ -25,6 +25,9 @@ const buttonStyles = {
25
25
  },
26
26
  "&:focus-visible": {
27
27
  boxShadow: "none",
28
+ outline: theme.vars.size.borderStroke.container,
29
+ outlineColor: theme.vars.palette.border.main,
30
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
28
31
  backgroundColor: ownerState?.paletteColor?.activeOpacity
29
32
  },
30
33
  "&:disabled": {
@@ -25,8 +25,7 @@ const Popper = forwardRef((props, ref) => {
25
25
  const ownerState = {
26
26
  paletteColor,
27
27
  popperColor: color,
28
- arrow,
29
- variant
28
+ arrow
30
29
  };
31
30
  return /* @__PURE__ */ jsx(
32
31
  PopperRootStyled,
@@ -35,18 +34,12 @@ const Popper = forwardRef((props, ref) => {
35
34
  placement: props.placement || initialPlacement,
36
35
  "data-testid": "popper-root",
37
36
  className: getComponentSlotRoot("M4LPopperClass"),
37
+ variant,
38
38
  ownerState: { ...ownerState },
39
39
  anchorEl,
40
40
  color,
41
41
  ref,
42
42
  modifiers: [
43
- {
44
- name: "preventOverflow",
45
- options: {
46
- boundary: "viewport",
47
- padding: 8
48
- }
49
- },
50
43
  {
51
44
  name: "flip",
52
45
  options: {
@@ -23,7 +23,6 @@ export interface PopperOwnerState extends Pick<PopperProps, 'placement'> {
23
23
  popperColor: PopperProps['color'];
24
24
  arrow: boolean;
25
25
  paletteColor: PaletteColor;
26
- variant: PopperProps['variant'];
27
26
  }
28
27
  /**
29
28
  * Defines the types of Slots available for the `Popper`.
@@ -32,15 +32,14 @@ const Select = forwardRef(
32
32
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
33
33
  const arrowDropDownIcon = `${host_static_assets}/${environment_assets}/${ICON_ARROW_DOWN}`;
34
34
  const selectedValue = useMemo(() => value, [value]);
35
- const [openLocal, setOpenLocal] = useState(false);
35
+ const [open, setOpen] = useState(false);
36
36
  const theme = useTheme();
37
37
  const ownerState = useMemo(() => ({
38
38
  size: adjustedSize,
39
39
  disabled,
40
40
  error,
41
- variant,
42
- multiple
43
- }), [adjustedSize, disabled, error, variant, multiple]);
41
+ variant
42
+ }), [adjustedSize, disabled, error, variant]);
44
43
  const handleLocalChange = useCallback((event) => {
45
44
  const newValue = event.target.value;
46
45
  if (!onChange) {
@@ -73,12 +72,12 @@ const Select = forwardRef(
73
72
  disabled,
74
73
  size: adjustedSize,
75
74
  onClick: () => {
76
- !disabled && setOpenLocal(!openLocal);
75
+ !disabled && setOpen(!open);
77
76
  },
78
- rotationAngle: openLocal ? 180 : 0
77
+ rotationAngle: open ? 180 : 0
79
78
  }
80
79
  );
81
- }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, openLocal]);
80
+ }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, open]);
82
81
  const RenderIcon = useCallback((icon) => {
83
82
  if (!icon) {
84
83
  return null;
@@ -140,10 +139,10 @@ const Select = forwardRef(
140
139
  }
141
140
  };
142
141
  const onOpen = useCallback(() => {
143
- setOpenLocal(true);
142
+ setOpen(true);
144
143
  }, []);
145
144
  const onClose = useCallback(() => {
146
- setOpenLocal(false);
145
+ setOpen(false);
147
146
  }, []);
148
147
  const StyledSelect = useMemo(() => SelectRootStyled(), []);
149
148
  if (isSkeleton) {
@@ -165,13 +164,12 @@ const Select = forwardRef(
165
164
  disabled,
166
165
  error,
167
166
  renderValue,
168
- open: openLocal,
167
+ open,
169
168
  native: false,
170
169
  onOpen,
171
170
  onClose,
172
171
  displayEmpty: true,
173
172
  MenuProps: {
174
- disableScrollLock: true,
175
173
  sx: {
176
174
  "& .MuiPaper-root": {
177
175
  paddingTop: theme.vars.size.baseSpacings.sp3,
@@ -179,16 +177,11 @@ const Select = forwardRef(
179
177
  paddingLeft: 0,
180
178
  paddingRight: 0,
181
179
  maxHeight: "200px",
182
- overflow: "auto",
183
180
  "& .MuiList-root": {
184
181
  padding: 0,
185
182
  display: "flex",
186
183
  flexDirection: "column",
187
- gap: theme.vars.size.baseSpacings.sp1,
188
- width: "fit-content",
189
- "& .MuiMenuItem-root": {
190
- width: "fit-content"
191
- }
184
+ gap: theme.vars.size.baseSpacings.sp1
192
185
  }
193
186
  }
194
187
  }
@@ -9,7 +9,7 @@ const selectStyles = {
9
9
  return {
10
10
  [`&.${SELECT_CLASSES.root}`]: {
11
11
  width: "100%",
12
- borderRadius: theme.vars.size.borderRadius["r1-5"],
12
+ borderRadius: theme.vars.size.borderRadius.r1,
13
13
  border: theme.vars.size.borderStroke.actionInput,
14
14
  borderColor: ownerState?.error ? theme.vars.palette[color].enabled : theme.vars.palette.border.default,
15
15
  padding: 0,
@@ -18,7 +18,7 @@ const selectStyles = {
18
18
  display: "none"
19
19
  },
20
20
  '&:has(.MuiSelect-select[aria-expanded="true"])': {
21
- border: `1px solid ${theme.vars.palette[color].enabled}`
21
+ border: `1px solid ${theme.vars.palette[color].focus}`
22
22
  },
23
23
  "& .M4LImage-root": {
24
24
  ...getHeightSizeStyles(
@@ -40,26 +40,21 @@ const selectStyles = {
40
40
  overflow: "auto",
41
41
  boxSizing: "border-box",
42
42
  display: "flex",
43
- flexDirection: "column",
44
- flexWrap: "unset"
43
+ flexDirection: "column"
45
44
  },
46
45
  // Estilos para la variante text
47
- [`&&&.${SELECT_CLASSES.text}`]: {
46
+ [`&.${SELECT_CLASSES.text}`]: {
48
47
  borderTop: 0,
49
48
  borderRight: 0,
49
+ borderBottom: theme.vars.size.borderStroke.actionInput,
50
50
  borderLeft: 0,
51
- borderRadius: "unset"
51
+ borderColor: ownerState?.error ? theme.vars.palette[color].enabled : theme.vars.palette.border.default
52
52
  },
53
53
  "&:hover": {
54
54
  backgroundColor: ownerState?.disabled ? "unset" : theme.vars.palette[color].hoverOpacity
55
55
  },
56
56
  "&:focus-within": {
57
- borderColor: theme.vars.palette[color].enabled,
58
- ...ownerState?.variant === "text" ? {
59
- boxShadow: `0px 1.5px 0px 0px ${theme.vars.palette[color].selectedOpacity} !important`
60
- } : {
61
- boxShadow: `0px 0px 0px 1.5px ${theme.vars.palette[color].selectedOpacity} !important`
62
- }
57
+ borderColor: theme.vars.palette[color].focus
63
58
  },
64
59
  '&[aria-hidden="true"]': {
65
60
  pointerEvents: "none"
@@ -95,15 +90,13 @@ const selectStyles = {
95
90
  * Styles for the render option container
96
91
  * @returns {object} The styles for the render option container
97
92
  */
98
- renderValueContainer: ({ theme, ownerState }) => ({
93
+ renderValueContainer: ({ theme }) => ({
99
94
  display: "flex",
100
95
  alignItems: "center",
101
96
  gap: theme.vars.size.baseSpacings.sp1,
97
+ flexWrap: "wrap",
102
98
  overflow: "auto",
103
- flexShrink: 1,
104
- ...ownerState?.multiple && {
105
- flexWrap: "wrap"
106
- }
99
+ flexShrink: 1
107
100
  }),
108
101
  arrowDown: {},
109
102
  renderValueTypography: () => ({
@@ -72,7 +72,7 @@ export interface SelectProps<T extends string | number, Multiple extends boolean
72
72
  * Propiedades internas que definen el estado del componente `Select`.
73
73
  * paletteColor - Color de la paleta aplicado al Select.
74
74
  */
75
- export interface SelectOwnerState<T extends string | number, Multiple extends boolean | undefined = false> extends Pick<SelectProps<T, Multiple>, 'classes' | 'size' | 'error' | 'variant' | 'disabled' | 'multiple'> {
75
+ export interface SelectOwnerState<T extends string | number> extends Pick<SelectProps<T>, 'classes' | 'size' | 'error' | 'variant' | 'disabled'> {
76
76
  disabled?: boolean;
77
77
  }
78
78
  /**
@@ -1,6 +1,5 @@
1
1
  import { TextFieldProps } from './types';
2
- import { default as React } from 'react';
3
2
  /**
4
3
  * Componente TextField extended de MUI-MATERIAL componente de entrada de datos en una interfaz de usuario que permite a los usuarios ingresar y editar texto. Es comúnmente utilizado en formularios y otros contextos donde se requiere la entrada de texto por parte del usuario.
5
4
  */
6
- export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
+ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -6,9 +6,8 @@ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
6
  import { T as TEXT_FIELD_CLASSES, a as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
7
7
  import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
8
8
  import { useTheme } from "@mui/material";
9
- import React, { forwardRef, useMemo, cloneElement } from "react";
9
+ import { forwardRef } from "react";
10
10
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
11
- import { I as IconButton } from "../IconButton/IconButton.js";
12
11
  const TextField = forwardRef(function TextField2(props, ref) {
13
12
  const {
14
13
  value,
@@ -38,24 +37,6 @@ const TextField = forwardRef(function TextField2(props, ref) {
38
37
  color: error ? "error" : "default",
39
38
  readOnly: InputProps?.readOnly
40
39
  };
41
- const renderStartAdornment = useMemo(() => {
42
- if (InputProps?.startAdornment && React.isValidElement(InputProps?.startAdornment)) {
43
- return cloneElement(InputProps?.startAdornment, {
44
- size: adjustedSize
45
- });
46
- } else {
47
- return InputProps?.startAdornment;
48
- }
49
- }, [InputProps?.startAdornment, adjustedSize]);
50
- const renderEndAdornment = useMemo(() => {
51
- if (InputProps?.endAdornment && React.isValidElement(InputProps?.endAdornment) && InputProps?.endAdornment.type === IconButton) {
52
- return cloneElement(InputProps?.endAdornment, {
53
- size: adjustedSize
54
- });
55
- } else {
56
- return InputProps?.endAdornment;
57
- }
58
- }, [InputProps?.endAdornment, adjustedSize]);
59
40
  const isSkeleton = useModuleSkeleton();
60
41
  if (isSkeleton) {
61
42
  return /* @__PURE__ */ jsx(
@@ -87,13 +68,11 @@ const TextField = forwardRef(function TextField2(props, ref) {
87
68
  maxLength,
88
69
  InputProps: {
89
70
  ...InputProps,
90
- startAdornment: renderStartAdornment,
91
- endAdornment: renderEndAdornment,
92
71
  ...maxLength && {
93
72
  endAdornment: /* @__PURE__ */ jsxs(LimitContainerStyled, { children: [
94
- /* @__PURE__ */ jsx(LimitTextFirstStyled, { size: adjustedSize, role: "text", "aria-label": "current characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: value.length }),
95
- /* @__PURE__ */ jsx(LimitTextSeparatorStyled, { size: adjustedSize, variant: "body", color: "text.secondary", ownerState: { percent }, children: "/" }),
96
- /* @__PURE__ */ jsx(LimitTextSecondStyled, { size: adjustedSize, role: "text", "aria-label": "limit characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: maxLength }),
73
+ /* @__PURE__ */ jsx(LimitTextFirstStyled, { role: "text", "aria-label": "current characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: value.length }),
74
+ /* @__PURE__ */ jsx(LimitTextSeparatorStyled, { variant: "body", color: "text.secondary", ownerState: { percent }, children: "/" }),
75
+ /* @__PURE__ */ jsx(LimitTextSecondStyled, { role: "text", "aria-label": "limit characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: maxLength }),
97
76
  InputProps?.endAdornment
98
77
  ] })
99
78
  },