@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.
- package/components/Stepper/Stepper.styles.js +6 -1
- package/components/Stepper/hooks/useDynamicValidation/index.d.ts +9 -0
- package/components/Stepper/hooks/useDynamicValidation/index.js +57 -0
- package/components/Stepper/hooks/useStepperActions/index.js +21 -3
- package/components/Stepper/subcomponents/StepArea/index.js +4 -0
- package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts +2 -1
- package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +39 -6
- package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts +2 -1
- package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +5 -3
- package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts +2 -1
- package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +5 -3
- package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts +2 -1
- package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +5 -3
- package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +17 -9
- package/components/Stepper/types.d.ts +7 -0
- package/components/areas/icons.js +1 -1
- package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js +35 -3
- package/components/hook-form/RHFAutocomplete/types.d.ts +6 -1
- package/components/hook-form/RHFormContext/index.d.ts +1 -1
- package/components/hook-form/RHFormContext/index.js +29 -4
- package/components/index.d.ts +0 -1
- package/components/mui_extended/Autocomplete/Autocomplete.js +6 -12
- package/components/mui_extended/Autocomplete/Autocomplete.styles.js +5 -48
- package/components/mui_extended/Autocomplete/hooks/useEndAdornments.d.ts +0 -1
- package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js +3 -4
- package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js +4 -4
- package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.js +4 -39
- package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.d.ts +1 -3
- package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js +0 -2
- package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.d.ts +0 -6
- package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js +1 -11
- package/components/mui_extended/Autocomplete/types.d.ts +1 -1
- package/components/mui_extended/Button/ButtonStyles.js +6 -3
- package/components/mui_extended/Popper/Popper.js +2 -9
- package/components/mui_extended/Popper/types.d.ts +0 -1
- package/components/mui_extended/Select/Select.js +10 -17
- package/components/mui_extended/Select/Select.styles.js +10 -17
- package/components/mui_extended/Select/types.d.ts +1 -1
- package/components/mui_extended/TextField/TextField.d.ts +1 -2
- package/components/mui_extended/TextField/TextField.js +4 -25
- package/components/mui_extended/TextField/TextField.styles.js +125 -132
- package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +9 -3
- package/components/mui_extended/TextField/slots/TextFieldSlots.js +1 -2
- package/components/mui_extended/Typography/Typography.js +1 -1
- package/components/mui_extended/Typography/typography.styles.js +1 -3
- package/package.json +2 -2
- 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:
|
|
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
|
-
|
|
97
|
-
maxWidth: "calc(100vw - 20px)",
|
|
82
|
+
popper: ({ theme }) => ({
|
|
83
|
+
...theme.typography.body1,
|
|
98
84
|
"& .MuiPaper-root": {
|
|
99
|
-
|
|
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
|
|
@@ -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:
|
|
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) =>
|
|
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
|
|
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(
|
|
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
|
|
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
|
|
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
|
-
|
|
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.
|
|
11
|
+
padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
|
|
12
12
|
boxShadow: "none",
|
|
13
|
-
borderRadius: theme.vars.size.borderRadius
|
|
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?.
|
|
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 [
|
|
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
|
-
|
|
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 &&
|
|
75
|
+
!disabled && setOpen(!open);
|
|
77
76
|
},
|
|
78
|
-
rotationAngle:
|
|
77
|
+
rotationAngle: open ? 180 : 0
|
|
79
78
|
}
|
|
80
79
|
);
|
|
81
|
-
}, [ownerState, arrowDropDownIcon, disabled, adjustedSize,
|
|
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
|
-
|
|
142
|
+
setOpen(true);
|
|
144
143
|
}, []);
|
|
145
144
|
const onClose = useCallback(() => {
|
|
146
|
-
|
|
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
|
|
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
|
|
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].
|
|
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
|
-
[
|
|
46
|
+
[`&.${SELECT_CLASSES.text}`]: {
|
|
48
47
|
borderTop: 0,
|
|
49
48
|
borderRight: 0,
|
|
49
|
+
borderBottom: theme.vars.size.borderStroke.actionInput,
|
|
50
50
|
borderLeft: 0,
|
|
51
|
-
|
|
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].
|
|
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
|
|
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
|
|
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:
|
|
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
|
|
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, {
|
|
95
|
-
/* @__PURE__ */ jsx(LimitTextSeparatorStyled, {
|
|
96
|
-
/* @__PURE__ */ jsx(LimitTextSecondStyled, {
|
|
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
|
},
|