nurseitaly-components 0.0.16 → 0.0.18
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.
|
@@ -27,6 +27,7 @@ export default function SelectField({ className, attr, label, createdForm, disab
|
|
|
27
27
|
setActive(false);
|
|
28
28
|
}
|
|
29
29
|
}, [focus, mouseOver]);
|
|
30
|
+
const hasSelectedValue = (value) => value !== undefined && value !== null && value !== '';
|
|
30
31
|
const getEndAdornmentIcon = (value) => {
|
|
31
32
|
const adornments = [];
|
|
32
33
|
if (defaultEndAdornments.length > 0) {
|
|
@@ -35,7 +36,7 @@ export default function SelectField({ className, attr, label, createdForm, disab
|
|
|
35
36
|
adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
|
|
36
37
|
}
|
|
37
38
|
if (defaultEndAdornments.includes('close') &&
|
|
38
|
-
value
|
|
39
|
+
hasSelectedValue(value) &&
|
|
39
40
|
onRemove) {
|
|
40
41
|
adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
|
|
41
42
|
}
|
|
@@ -51,31 +52,37 @@ export default function SelectField({ className, attr, label, createdForm, disab
|
|
|
51
52
|
}
|
|
52
53
|
return _jsx("div", { className: "ds-end-adornments", children: adornments });
|
|
53
54
|
};
|
|
54
|
-
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) =>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
: '#000000',
|
|
65
|
-
}, children: `${label}${required ? ' *' : ''}` })), _jsxs(NativeSelect, { ...field, id: `${attr}-select`, value: field.value ?? '', fullWidth: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
|
|
66
|
-
const value = event.target.value;
|
|
67
|
-
field.onChange(value);
|
|
68
|
-
onChange && onChange(attr, value || null);
|
|
69
|
-
}, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
|
|
70
|
-
borderColor: disabled
|
|
55
|
+
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => {
|
|
56
|
+
const adornmentIcon = showEndAdornment
|
|
57
|
+
? getEndAdornmentIcon(field.value)
|
|
58
|
+
: null;
|
|
59
|
+
const hasAddornments = adornmentIcon != null;
|
|
60
|
+
return (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
|
|
61
|
+
hasLabel: !!label,
|
|
62
|
+
hasAddornments,
|
|
63
|
+
}), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
|
|
64
|
+
color: disabled
|
|
71
65
|
? '#BEBFC1'
|
|
72
66
|
: hasError()
|
|
73
|
-
? '#C6080A
|
|
67
|
+
? '#C6080A'
|
|
74
68
|
: active
|
|
75
|
-
? '#1C83F4
|
|
76
|
-
: '#
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
69
|
+
? '#1C83F4'
|
|
70
|
+
: '#000000',
|
|
71
|
+
}, children: `${label}${required ? ' *' : ''}` })), _jsxs(NativeSelect, { ...field, id: `${attr}-select`, value: field.value ?? '', fullWidth: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
|
|
72
|
+
const value = event.target.value;
|
|
73
|
+
field.onChange(value);
|
|
74
|
+
onChange?.(attr, value || null);
|
|
75
|
+
}, input: _jsx(FilledInput, { endAdornment: hasAddornments ? (_jsx(InputAdornment, { position: "end", disablePointerEvents: true, children: adornmentIcon })) : undefined, sx: {
|
|
76
|
+
borderColor: disabled
|
|
77
|
+
? '#BEBFC1'
|
|
78
|
+
: hasError()
|
|
79
|
+
? '#C6080A!important'
|
|
80
|
+
: active
|
|
81
|
+
? '#1C83F4!important'
|
|
82
|
+
: '#BEBFC1!important',
|
|
83
|
+
backgroundColor: disabled
|
|
84
|
+
? '#BEBFC1!important'
|
|
85
|
+
: '#FFFFFF!important',
|
|
86
|
+
} }), children: [allowEmpty && (_jsx("option", { value: "", children: placeholder || '\u00a0' })), options.map((option, idx) => (_jsx("option", { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] }));
|
|
87
|
+
} }) }));
|
|
81
88
|
}
|
|
@@ -9,7 +9,9 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
9
9
|
border: '1px solid #EAEAEB',
|
|
10
10
|
borderRadius: '4px',
|
|
11
11
|
paddingLeft: '16px',
|
|
12
|
-
|
|
12
|
+
// Keep padding small so the native <select> fills the control and
|
|
13
|
+
// receives clicks under the chevron (icon has pointer-events: none).
|
|
14
|
+
paddingRight: '8px',
|
|
13
15
|
borderBottomLeftRadius: '4px',
|
|
14
16
|
borderBottomRightRadius: '4px',
|
|
15
17
|
height: '100%',
|
|
@@ -19,6 +21,18 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
19
21
|
'&:after': {
|
|
20
22
|
display: 'none',
|
|
21
23
|
},
|
|
24
|
+
// Adornments overlay the select instead of shrinking its hit area.
|
|
25
|
+
'& .MuiInputAdornment-positionEnd': {
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
right: '28px',
|
|
28
|
+
height: '100%',
|
|
29
|
+
maxHeight: 'none',
|
|
30
|
+
marginLeft: 0,
|
|
31
|
+
pointerEvents: 'none',
|
|
32
|
+
'& .ds-icon, & .pointer, & button, & a': {
|
|
33
|
+
pointerEvents: 'auto',
|
|
34
|
+
},
|
|
35
|
+
},
|
|
22
36
|
},
|
|
23
37
|
},
|
|
24
38
|
},
|
|
@@ -27,7 +41,14 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
27
41
|
select: {
|
|
28
42
|
display: 'flex',
|
|
29
43
|
alignItems: 'center',
|
|
30
|
-
padding
|
|
44
|
+
// Extra right padding when adornments overlay so text doesn't collide.
|
|
45
|
+
padding: hasLabel
|
|
46
|
+
? hasAddorments
|
|
47
|
+
? '21px 56px 4px 0px!important'
|
|
48
|
+
: '21px 32px 4px 0px!important'
|
|
49
|
+
: hasAddorments
|
|
50
|
+
? '8px 56px 8px 16px!important'
|
|
51
|
+
: '8px 32px 8px 16px!important',
|
|
31
52
|
fontSize: '16px',
|
|
32
53
|
fontWeight: '400',
|
|
33
54
|
lineHeight: '120%',
|
|
@@ -35,7 +56,7 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
35
56
|
fontFamily: 'Work Sans, sans-serif',
|
|
36
57
|
},
|
|
37
58
|
icon: {
|
|
38
|
-
|
|
59
|
+
right: '7px',
|
|
39
60
|
},
|
|
40
61
|
},
|
|
41
62
|
},
|
|
@@ -47,7 +68,13 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
47
68
|
boxSizing: 'border-box',
|
|
48
69
|
minHeight: 'unset!important',
|
|
49
70
|
height: hasLabel ? '48px!important' : 'auto',
|
|
50
|
-
padding: hasLabel
|
|
71
|
+
padding: hasLabel
|
|
72
|
+
? hasAddorments
|
|
73
|
+
? '21px 56px 4px 0px!important'
|
|
74
|
+
: '21px 32px 4px 0px!important'
|
|
75
|
+
: hasAddorments
|
|
76
|
+
? '8px 56px 8px 16px!important'
|
|
77
|
+
: '8px 32px 8px 16px!important',
|
|
51
78
|
fontSize: '16px',
|
|
52
79
|
fontWeight: '400',
|
|
53
80
|
lineHeight: '120%',
|
|
@@ -59,11 +86,17 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
59
86
|
'&.MuiSelect-multiple': {
|
|
60
87
|
minHeight: 'unset!important',
|
|
61
88
|
height: hasLabel ? '48px!important' : 'auto',
|
|
62
|
-
padding: hasLabel
|
|
89
|
+
padding: hasLabel
|
|
90
|
+
? hasAddorments
|
|
91
|
+
? '21px 56px 4px 0px!important'
|
|
92
|
+
: '21px 32px 4px 0px!important'
|
|
93
|
+
: hasAddorments
|
|
94
|
+
? '8px 56px 8px 16px!important'
|
|
95
|
+
: '8px 32px 8px 16px!important',
|
|
63
96
|
},
|
|
64
97
|
},
|
|
65
98
|
icon: {
|
|
66
|
-
|
|
99
|
+
right: '7px',
|
|
67
100
|
},
|
|
68
101
|
},
|
|
69
102
|
},
|
|
@@ -52,50 +52,56 @@ export default function SelectMultipleField({ className, attr, label, createdFor
|
|
|
52
52
|
}
|
|
53
53
|
return _jsx("div", { className: "ds-end-adornments", children: adornments });
|
|
54
54
|
};
|
|
55
|
-
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) =>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
: '#000000',
|
|
66
|
-
}, children: `${label}${required ? ' *' : ''}` })), _jsxs(Select, { ...field, id: `${attr}-select`, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
|
|
67
|
-
let value = event.target.value;
|
|
68
|
-
if (Array.isArray(value) && value.includes('')) {
|
|
69
|
-
value = [];
|
|
70
|
-
}
|
|
71
|
-
field.onChange(value);
|
|
72
|
-
onChange && onChange(attr, value);
|
|
73
|
-
}, MenuProps: {
|
|
74
|
-
disableScrollLock: true,
|
|
75
|
-
disableRestoreFocus: true,
|
|
76
|
-
slotProps: {
|
|
77
|
-
paper: {
|
|
78
|
-
style: {
|
|
79
|
-
maxHeight: maxHeight,
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
// This is the specific property that stops the "auto-select/jump"
|
|
84
|
-
// while keeping the smart "flipping" logic active
|
|
85
|
-
variant: 'menu',
|
|
86
|
-
anchorReference: 'anchorEl',
|
|
87
|
-
}, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
|
|
88
|
-
borderColor: disabled
|
|
55
|
+
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => {
|
|
56
|
+
const adornmentIcon = showEndAdornment
|
|
57
|
+
? getEndAdornmentIcon(field.value)
|
|
58
|
+
: null;
|
|
59
|
+
const hasAddornments = adornmentIcon != null;
|
|
60
|
+
return (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
|
|
61
|
+
hasLabel: !!label,
|
|
62
|
+
hasAddornments,
|
|
63
|
+
}), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
|
|
64
|
+
color: disabled
|
|
89
65
|
? '#BEBFC1'
|
|
90
66
|
: hasError()
|
|
91
|
-
? '#C6080A
|
|
67
|
+
? '#C6080A'
|
|
92
68
|
: active
|
|
93
|
-
? '#1C83F4
|
|
94
|
-
: '#
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
69
|
+
? '#1C83F4'
|
|
70
|
+
: '#000000',
|
|
71
|
+
}, children: `${label}${required ? ' *' : ''}` })), _jsxs(Select, { ...field, id: `${attr}-select`, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
|
|
72
|
+
let value = event.target.value;
|
|
73
|
+
if (Array.isArray(value) && value.includes('')) {
|
|
74
|
+
value = [];
|
|
75
|
+
}
|
|
76
|
+
field.onChange(value);
|
|
77
|
+
onChange?.(attr, value);
|
|
78
|
+
}, MenuProps: {
|
|
79
|
+
disableScrollLock: true,
|
|
80
|
+
disableRestoreFocus: true,
|
|
81
|
+
slotProps: {
|
|
82
|
+
paper: {
|
|
83
|
+
style: {
|
|
84
|
+
maxHeight: maxHeight,
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
// This is the specific property that stops the "auto-select/jump"
|
|
89
|
+
// while keeping the smart "flipping" logic active
|
|
90
|
+
variant: 'menu',
|
|
91
|
+
anchorReference: 'anchorEl',
|
|
92
|
+
}, input: _jsx(FilledInput, { endAdornment: hasAddornments ? (_jsx(InputAdornment, { position: "end", disablePointerEvents: true, children: adornmentIcon })) : undefined, sx: {
|
|
93
|
+
borderColor: disabled
|
|
94
|
+
? '#BEBFC1'
|
|
95
|
+
: hasError()
|
|
96
|
+
? '#C6080A!important'
|
|
97
|
+
: active
|
|
98
|
+
? '#1C83F4!important'
|
|
99
|
+
: '#BEBFC1!important',
|
|
100
|
+
backgroundColor: disabled
|
|
101
|
+
? '#BEBFC1!important'
|
|
102
|
+
: '#FFFFFF!important',
|
|
103
|
+
} }), children: [_jsx(MenuItem, { value: "", sx: (theme) => ({
|
|
104
|
+
minHeight: theme.spacing(6),
|
|
105
|
+
}), children: placeholder || '\u00a0' }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] }));
|
|
106
|
+
} }) }));
|
|
101
107
|
}
|
package/dist/styles/main.scss
CHANGED