@capyx/components-library 0.0.19 → 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,17 +2,29 @@ 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 = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
hoverBackgroundColor?: string;
|
|
11
|
-
hoverBorderColor?: string;
|
|
12
|
-
hoverColor?: string;
|
|
13
|
-
deleteIconColor?: string;
|
|
14
|
-
deleteIconHoverColor?: string;
|
|
15
|
-
};
|
|
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;
|
|
16
28
|
inputStyle?: {
|
|
17
29
|
borderColor?: string;
|
|
18
30
|
errorBorderColor?: string;
|
|
@@ -55,7 +67,7 @@ export type TagsInputProps = {
|
|
|
55
67
|
*
|
|
56
68
|
* ## Customization
|
|
57
69
|
*
|
|
58
|
-
* - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
|
|
70
|
+
* - `chipStyle`: Minimal style customization for all chips, or per-chip if a function is provided. Only the following keys are supported:
|
|
59
71
|
* - backgroundColor
|
|
60
72
|
* - borderColor
|
|
61
73
|
* - color
|
|
@@ -64,6 +76,7 @@ export type TagsInputProps = {
|
|
|
64
76
|
* - hoverColor
|
|
65
77
|
* - deleteIconColor
|
|
66
78
|
* - deleteIconHoverColor
|
|
79
|
+
* You can provide either a style object (applied to all chips) or a function (chipValue, index) => styleObject for per-chip customization.
|
|
67
80
|
* - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
|
|
68
81
|
* - borderColor
|
|
69
82
|
* - errorBorderColor
|
|
@@ -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,
|
|
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"}
|
|
@@ -20,7 +20,7 @@ import { Controller, useFormContext } from 'react-hook-form';
|
|
|
20
20
|
*
|
|
21
21
|
* ## Customization
|
|
22
22
|
*
|
|
23
|
-
* - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
|
|
23
|
+
* - `chipStyle`: Minimal style customization for all chips, or per-chip if a function is provided. Only the following keys are supported:
|
|
24
24
|
* - backgroundColor
|
|
25
25
|
* - borderColor
|
|
26
26
|
* - color
|
|
@@ -29,6 +29,7 @@ import { Controller, useFormContext } from 'react-hook-form';
|
|
|
29
29
|
* - hoverColor
|
|
30
30
|
* - deleteIconColor
|
|
31
31
|
* - deleteIconHoverColor
|
|
32
|
+
* You can provide either a style object (applied to all chips) or a function (chipValue, index) => styleObject for per-chip customization.
|
|
32
33
|
* - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
|
|
33
34
|
* - borderColor
|
|
34
35
|
* - errorBorderColor
|
|
@@ -120,30 +121,31 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
|
|
|
120
121
|
return cleaned;
|
|
121
122
|
};
|
|
122
123
|
const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => {
|
|
124
|
+
const resolvedChipStyle = typeof chipStyle === 'function' ? chipStyle(option, index) : chipStyle || {};
|
|
123
125
|
const baseChipSx = {
|
|
124
126
|
backgroundColor: '#212529',
|
|
125
127
|
color: '#ffffff',
|
|
126
128
|
border: '1px solid transparent',
|
|
127
|
-
...(
|
|
128
|
-
backgroundColor:
|
|
129
|
+
...(resolvedChipStyle.backgroundColor && {
|
|
130
|
+
backgroundColor: resolvedChipStyle.backgroundColor,
|
|
129
131
|
}),
|
|
130
|
-
...(
|
|
131
|
-
borderColor:
|
|
132
|
-
border: `1px solid ${
|
|
132
|
+
...(resolvedChipStyle.borderColor && {
|
|
133
|
+
borderColor: resolvedChipStyle.borderColor,
|
|
134
|
+
border: `1px solid ${resolvedChipStyle.borderColor}`,
|
|
133
135
|
}),
|
|
134
|
-
...(
|
|
136
|
+
...(resolvedChipStyle.color && { color: resolvedChipStyle.color }),
|
|
135
137
|
'&:hover': {
|
|
136
|
-
...(
|
|
137
|
-
backgroundColor:
|
|
138
|
+
...(resolvedChipStyle.hoverBackgroundColor && {
|
|
139
|
+
backgroundColor: resolvedChipStyle.hoverBackgroundColor,
|
|
138
140
|
}),
|
|
139
|
-
...(
|
|
140
|
-
borderColor:
|
|
141
|
-
border: `1px solid ${
|
|
141
|
+
...(resolvedChipStyle.hoverBorderColor && {
|
|
142
|
+
borderColor: resolvedChipStyle.hoverBorderColor,
|
|
143
|
+
border: `1px solid ${resolvedChipStyle.hoverBorderColor}`,
|
|
142
144
|
}),
|
|
143
|
-
...(
|
|
145
|
+
...(resolvedChipStyle.hoverColor && { color: resolvedChipStyle.hoverColor }),
|
|
144
146
|
},
|
|
145
147
|
'& .MuiChip-deleteIcon': {
|
|
146
|
-
color:
|
|
148
|
+
color: resolvedChipStyle.deleteIconColor || 'rgba(255, 255, 255, 0.7)',
|
|
147
149
|
userSelect: 'none',
|
|
148
150
|
WebkitUserSelect: 'none',
|
|
149
151
|
MozUserSelect: 'none',
|
|
@@ -159,7 +161,7 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
|
|
|
159
161
|
pointerEvents: 'none',
|
|
160
162
|
},
|
|
161
163
|
'&:hover': {
|
|
162
|
-
color:
|
|
164
|
+
color: resolvedChipStyle.deleteIconHoverColor || '#dc3545',
|
|
163
165
|
},
|
|
164
166
|
},
|
|
165
167
|
};
|