@capyx/components-library 0.0.18 → 0.0.20
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.
|
@@ -2,7 +2,35 @@ import { type FC } from 'react';
|
|
|
2
2
|
/**
|
|
3
3
|
* Props for the TagsInput component
|
|
4
4
|
*/
|
|
5
|
+
/**
|
|
6
|
+
* ChipStyle: Supported style keys for customizing a chip.
|
|
7
|
+
*/
|
|
8
|
+
export type ChipStyle = {
|
|
9
|
+
backgroundColor?: string;
|
|
10
|
+
borderColor?: string;
|
|
11
|
+
color?: string;
|
|
12
|
+
hoverBackgroundColor?: string;
|
|
13
|
+
hoverBorderColor?: string;
|
|
14
|
+
hoverColor?: string;
|
|
15
|
+
deleteIconColor?: string;
|
|
16
|
+
deleteIconHoverColor?: string;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Function signature for per-chip style customization.
|
|
20
|
+
* Receives the chip value and its index, returns a ChipStyle object.
|
|
21
|
+
*/
|
|
22
|
+
export type ChipStyleFn = (chipValue: string, index: number) => ChipStyle;
|
|
5
23
|
export type TagsInputProps = {
|
|
24
|
+
/**
|
|
25
|
+
* Customizes the style of chips. Pass a style object for global styles, or a function (chipValue, index) => styleObject for per-chip customization.
|
|
26
|
+
*/
|
|
27
|
+
chipStyle?: ChipStyle | ChipStyleFn;
|
|
28
|
+
inputStyle?: {
|
|
29
|
+
borderColor?: string;
|
|
30
|
+
errorBorderColor?: string;
|
|
31
|
+
hoverBorderColor?: string;
|
|
32
|
+
focusBorderColor?: string;
|
|
33
|
+
};
|
|
6
34
|
/** Field name — required for form integration and the hidden native input */
|
|
7
35
|
name: string;
|
|
8
36
|
/** Array of current tag values */
|
|
@@ -37,16 +65,45 @@ export type TagsInputProps = {
|
|
|
37
65
|
* constraint validation (`required` attribute), making it compatible with
|
|
38
66
|
* any form library that relies on `checkValidity()` / `reportValidity()`.
|
|
39
67
|
*
|
|
68
|
+
* ## Customization
|
|
69
|
+
*
|
|
70
|
+
* - `chipStyle`: Minimal style customization for all chips, or per-chip if a function is provided. Only the following keys are supported:
|
|
71
|
+
* - backgroundColor
|
|
72
|
+
* - borderColor
|
|
73
|
+
* - color
|
|
74
|
+
* - hoverBackgroundColor
|
|
75
|
+
* - hoverBorderColor
|
|
76
|
+
* - hoverColor
|
|
77
|
+
* - deleteIconColor
|
|
78
|
+
* - deleteIconHoverColor
|
|
79
|
+
* You can provide either a style object (applied to all chips) or a function (chipValue, index) => styleObject for per-chip customization.
|
|
80
|
+
* - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
|
|
81
|
+
* - borderColor
|
|
82
|
+
* - errorBorderColor
|
|
83
|
+
* - hoverBorderColor
|
|
84
|
+
* - focusBorderColor
|
|
85
|
+
*
|
|
40
86
|
* @example
|
|
41
87
|
* ```tsx
|
|
42
88
|
* <TagsInput
|
|
43
89
|
* name="skills"
|
|
44
90
|
* value={tags}
|
|
45
91
|
* onChange={setTags}
|
|
46
|
-
* placeholder="Add skills..."
|
|
47
92
|
* required
|
|
48
|
-
*
|
|
49
|
-
*
|
|
93
|
+
* chipStyle={{
|
|
94
|
+
* backgroundColor: tagsError ? '#ffeaea' : '#212529',
|
|
95
|
+
* borderColor: tagsError ? '#ff4d4f' : '#212529',
|
|
96
|
+
* color: tagsError ? '#ff4d4f' : '#fff',
|
|
97
|
+
* hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
|
|
98
|
+
* hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
|
|
99
|
+
* hoverColor: tagsError ? '#ff4d4f' : '#fff',
|
|
100
|
+
* }}
|
|
101
|
+
* inputStyle={{
|
|
102
|
+
* borderColor: '#ced4da',
|
|
103
|
+
* errorBorderColor: '#ff4d4f',
|
|
104
|
+
* hoverBorderColor: '#86b7fe',
|
|
105
|
+
* focusBorderColor: '#1976d2',
|
|
106
|
+
* }}
|
|
50
107
|
* />
|
|
51
108
|
* ```
|
|
52
109
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAE1E,MAAM,MAAM,cAAc,GAAG;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACpC,UAAU,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8QxC,CAAC"}
|
|
@@ -18,20 +18,49 @@ import { Controller, useFormContext } from 'react-hook-form';
|
|
|
18
18
|
* constraint validation (`required` attribute), making it compatible with
|
|
19
19
|
* any form library that relies on `checkValidity()` / `reportValidity()`.
|
|
20
20
|
*
|
|
21
|
+
* ## Customization
|
|
22
|
+
*
|
|
23
|
+
* - `chipStyle`: Minimal style customization for all chips, or per-chip if a function is provided. Only the following keys are supported:
|
|
24
|
+
* - backgroundColor
|
|
25
|
+
* - borderColor
|
|
26
|
+
* - color
|
|
27
|
+
* - hoverBackgroundColor
|
|
28
|
+
* - hoverBorderColor
|
|
29
|
+
* - hoverColor
|
|
30
|
+
* - deleteIconColor
|
|
31
|
+
* - deleteIconHoverColor
|
|
32
|
+
* You can provide either a style object (applied to all chips) or a function (chipValue, index) => styleObject for per-chip customization.
|
|
33
|
+
* - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
|
|
34
|
+
* - borderColor
|
|
35
|
+
* - errorBorderColor
|
|
36
|
+
* - hoverBorderColor
|
|
37
|
+
* - focusBorderColor
|
|
38
|
+
*
|
|
21
39
|
* @example
|
|
22
40
|
* ```tsx
|
|
23
41
|
* <TagsInput
|
|
24
42
|
* name="skills"
|
|
25
43
|
* value={tags}
|
|
26
44
|
* onChange={setTags}
|
|
27
|
-
* placeholder="Add skills..."
|
|
28
45
|
* required
|
|
29
|
-
*
|
|
30
|
-
*
|
|
46
|
+
* chipStyle={{
|
|
47
|
+
* backgroundColor: tagsError ? '#ffeaea' : '#212529',
|
|
48
|
+
* borderColor: tagsError ? '#ff4d4f' : '#212529',
|
|
49
|
+
* color: tagsError ? '#ff4d4f' : '#fff',
|
|
50
|
+
* hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
|
|
51
|
+
* hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
|
|
52
|
+
* hoverColor: tagsError ? '#ff4d4f' : '#fff',
|
|
53
|
+
* }}
|
|
54
|
+
* inputStyle={{
|
|
55
|
+
* borderColor: '#ced4da',
|
|
56
|
+
* errorBorderColor: '#ff4d4f',
|
|
57
|
+
* hoverBorderColor: '#86b7fe',
|
|
58
|
+
* focusBorderColor: '#1976d2',
|
|
59
|
+
* }}
|
|
31
60
|
* />
|
|
32
61
|
* ```
|
|
33
62
|
*/
|
|
34
|
-
export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, }) => {
|
|
63
|
+
export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, chipStyle, inputStyle, }) => {
|
|
35
64
|
const formContext = useFormContext();
|
|
36
65
|
const nativeInputRef = useRef(null);
|
|
37
66
|
const fieldLabel = label || 'This field';
|
|
@@ -91,11 +120,32 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
|
|
|
91
120
|
}
|
|
92
121
|
return cleaned;
|
|
93
122
|
};
|
|
94
|
-
const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) =>
|
|
123
|
+
const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => {
|
|
124
|
+
const resolvedChipStyle = typeof chipStyle === 'function' ? chipStyle(option, index) : chipStyle || {};
|
|
125
|
+
const baseChipSx = {
|
|
95
126
|
backgroundColor: '#212529',
|
|
96
127
|
color: '#ffffff',
|
|
128
|
+
border: '1px solid transparent',
|
|
129
|
+
...(resolvedChipStyle.backgroundColor && {
|
|
130
|
+
backgroundColor: resolvedChipStyle.backgroundColor,
|
|
131
|
+
}),
|
|
132
|
+
...(resolvedChipStyle.borderColor && {
|
|
133
|
+
borderColor: resolvedChipStyle.borderColor,
|
|
134
|
+
border: `1px solid ${resolvedChipStyle.borderColor}`,
|
|
135
|
+
}),
|
|
136
|
+
...(resolvedChipStyle.color && { color: resolvedChipStyle.color }),
|
|
137
|
+
'&:hover': {
|
|
138
|
+
...(resolvedChipStyle.hoverBackgroundColor && {
|
|
139
|
+
backgroundColor: resolvedChipStyle.hoverBackgroundColor,
|
|
140
|
+
}),
|
|
141
|
+
...(resolvedChipStyle.hoverBorderColor && {
|
|
142
|
+
borderColor: resolvedChipStyle.hoverBorderColor,
|
|
143
|
+
border: `1px solid ${resolvedChipStyle.hoverBorderColor}`,
|
|
144
|
+
}),
|
|
145
|
+
...(resolvedChipStyle.hoverColor && { color: resolvedChipStyle.hoverColor }),
|
|
146
|
+
},
|
|
97
147
|
'& .MuiChip-deleteIcon': {
|
|
98
|
-
color: 'rgba(255, 255, 255, 0.7)',
|
|
148
|
+
color: resolvedChipStyle.deleteIconColor || 'rgba(255, 255, 255, 0.7)',
|
|
99
149
|
userSelect: 'none',
|
|
100
150
|
WebkitUserSelect: 'none',
|
|
101
151
|
MozUserSelect: 'none',
|
|
@@ -111,26 +161,34 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
|
|
|
111
161
|
pointerEvents: 'none',
|
|
112
162
|
},
|
|
113
163
|
'&:hover': {
|
|
114
|
-
color: '#dc3545',
|
|
164
|
+
color: resolvedChipStyle.deleteIconHoverColor || '#dc3545',
|
|
115
165
|
},
|
|
116
166
|
},
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
'& .MuiOutlinedInput-root': {
|
|
120
|
-
padding: '4px',
|
|
121
|
-
minHeight: '38px',
|
|
122
|
-
'& fieldset': {
|
|
123
|
-
borderColor: hasError ? '#dc3545' : '#ced4da',
|
|
124
|
-
},
|
|
125
|
-
'&:hover fieldset': {
|
|
126
|
-
borderColor: hasError ? '#dc3545' : '#86b7fe',
|
|
127
|
-
},
|
|
128
|
-
'&.Mui-focused fieldset': {
|
|
129
|
-
borderColor: hasError ? '#dc3545' : '#86b7fe',
|
|
130
|
-
borderWidth: '1px',
|
|
131
|
-
},
|
|
132
|
-
},
|
|
167
|
+
};
|
|
168
|
+
return (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: baseChipSx }));
|
|
133
169
|
});
|
|
170
|
+
const inputSx = (hasError) => {
|
|
171
|
+
const borderColor = inputStyle?.borderColor || '#ced4da';
|
|
172
|
+
const errorBorderColor = inputStyle?.errorBorderColor || '#dc3545';
|
|
173
|
+
const hoverBorderColor = inputStyle?.hoverBorderColor || '#86b7fe';
|
|
174
|
+
const focusBorderColor = inputStyle?.focusBorderColor || '#86b7fe';
|
|
175
|
+
return {
|
|
176
|
+
'& .MuiOutlinedInput-root': {
|
|
177
|
+
padding: '4px',
|
|
178
|
+
minHeight: '38px',
|
|
179
|
+
'& fieldset': {
|
|
180
|
+
borderColor: hasError ? errorBorderColor : borderColor,
|
|
181
|
+
},
|
|
182
|
+
'&:hover fieldset': {
|
|
183
|
+
borderColor: hasError ? errorBorderColor : hoverBorderColor,
|
|
184
|
+
},
|
|
185
|
+
'&.Mui-focused fieldset': {
|
|
186
|
+
borderColor: hasError ? errorBorderColor : focusBorderColor,
|
|
187
|
+
borderWidth: '1px',
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
};
|
|
191
|
+
};
|
|
134
192
|
// ── react-hook-form mode ──────────────────────────────────────────────
|
|
135
193
|
if (formContext) {
|
|
136
194
|
const errorMessage = getFieldError(name);
|