@visns-studio/visns-components 5.8.20 → 5.9.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/README.md +149 -0
- package/package.json +1 -1
- package/src/components/crm/DataGrid.jsx +1177 -56
- package/src/components/crm/Field.jsx +2 -2
- package/src/components/crm/MultiSelect.jsx +33 -13
- package/src/components/crm/styles/DataGrid.module.scss +66 -6
- package/src/components/crm/styles/MultiSelect.module.scss +31 -9
- package/src/components/crm/styles/global-datagrid.css +240 -10
- package/src/examples/MultiSelectStylingTest.jsx +76 -0
|
@@ -1112,8 +1112,8 @@ function Field({
|
|
|
1112
1112
|
? settings.options
|
|
1113
1113
|
: options
|
|
1114
1114
|
}
|
|
1115
|
-
isSearchable={settings.isSearchable
|
|
1116
|
-
isCreatable={settings.isCreatable
|
|
1115
|
+
isSearchable={settings.isSearchable ?? true}
|
|
1116
|
+
isCreatable={settings.isCreatable ?? false}
|
|
1117
1117
|
dataOptions={dataOptions}
|
|
1118
1118
|
style={style}
|
|
1119
1119
|
/>
|
|
@@ -25,7 +25,9 @@ const CustomOption = (props) => {
|
|
|
25
25
|
<div className={styles.option}>
|
|
26
26
|
<div className={styles.optionLabel}>{children}</div>
|
|
27
27
|
{data.description && (
|
|
28
|
-
<div className={styles.optionDescription}>
|
|
28
|
+
<div className={styles.optionDescription}>
|
|
29
|
+
{data.description}
|
|
30
|
+
</div>
|
|
29
31
|
)}
|
|
30
32
|
</div>
|
|
31
33
|
</components.Option>
|
|
@@ -40,7 +42,9 @@ const CustomMultiValue = (props) => {
|
|
|
40
42
|
<div className={styles.multiValue}>
|
|
41
43
|
<div className={styles.multiValueLabel}>{children}</div>
|
|
42
44
|
{data.description && (
|
|
43
|
-
<div className={styles.multiValueDescription}>
|
|
45
|
+
<div className={styles.multiValueDescription}>
|
|
46
|
+
{data.description}
|
|
47
|
+
</div>
|
|
44
48
|
)}
|
|
45
49
|
</div>
|
|
46
50
|
</components.MultiValue>
|
|
@@ -111,14 +115,14 @@ function MultiSelect({
|
|
|
111
115
|
if (item.description) return item;
|
|
112
116
|
|
|
113
117
|
// Try to find a matching option with description
|
|
114
|
-
const matchingOption = selectOptions.find(
|
|
115
|
-
opt.id === item.id || opt.value === item.id
|
|
118
|
+
const matchingOption = selectOptions.find(
|
|
119
|
+
(opt) => opt.id === item.id || opt.value === item.id
|
|
116
120
|
);
|
|
117
121
|
|
|
118
122
|
if (matchingOption && matchingOption.description) {
|
|
119
123
|
return {
|
|
120
124
|
...item,
|
|
121
|
-
description: matchingOption.description
|
|
125
|
+
description: matchingOption.description,
|
|
122
126
|
};
|
|
123
127
|
}
|
|
124
128
|
|
|
@@ -130,7 +134,11 @@ function MultiSelect({
|
|
|
130
134
|
const enrichedItem = findMatchingOption(a);
|
|
131
135
|
return {
|
|
132
136
|
value: enrichedItem.id,
|
|
133
|
-
label:
|
|
137
|
+
label:
|
|
138
|
+
enrichedItem.label ||
|
|
139
|
+
enrichedItem.name ||
|
|
140
|
+
enrichedItem.description ||
|
|
141
|
+
'Unknown',
|
|
134
142
|
// Make sure description is preserved
|
|
135
143
|
description: enrichedItem.description || null,
|
|
136
144
|
...enrichedItem,
|
|
@@ -210,7 +218,7 @@ function MultiSelect({
|
|
|
210
218
|
components={{
|
|
211
219
|
SelectList,
|
|
212
220
|
Option: CustomOption,
|
|
213
|
-
MultiValue: CustomMultiValue
|
|
221
|
+
MultiValue: CustomMultiValue,
|
|
214
222
|
}}
|
|
215
223
|
options={selectOptions}
|
|
216
224
|
menuPortalTarget={document.body}
|
|
@@ -301,21 +309,33 @@ function MultiSelect({
|
|
|
301
309
|
padding: '2px 4px',
|
|
302
310
|
minHeight: '30px',
|
|
303
311
|
display: 'flex',
|
|
304
|
-
flexDirection: '
|
|
305
|
-
alignItems: '
|
|
312
|
+
flexDirection: 'row',
|
|
313
|
+
alignItems: 'center',
|
|
314
|
+
backgroundColor: '#e2e8f0',
|
|
315
|
+
borderRadius: '4px',
|
|
306
316
|
}),
|
|
307
317
|
multiValueLabel: (base) => ({
|
|
308
318
|
...base,
|
|
309
|
-
padding: '0',
|
|
319
|
+
padding: '0 4px 0 0',
|
|
310
320
|
display: 'flex',
|
|
311
321
|
flexDirection: 'column',
|
|
312
|
-
|
|
322
|
+
flex: '1',
|
|
323
|
+
minWidth: '0',
|
|
313
324
|
}),
|
|
314
325
|
multiValueRemove: (base) => ({
|
|
315
326
|
...base,
|
|
316
327
|
padding: '0 4px',
|
|
317
|
-
|
|
318
|
-
|
|
328
|
+
display: 'flex',
|
|
329
|
+
alignItems: 'center',
|
|
330
|
+
justifyContent: 'center',
|
|
331
|
+
margin: '0',
|
|
332
|
+
borderRadius: '0 4px 4px 0',
|
|
333
|
+
backgroundColor: 'transparent',
|
|
334
|
+
transition: 'background-color 0.2s ease',
|
|
335
|
+
'&:hover': {
|
|
336
|
+
backgroundColor: '#dc2626',
|
|
337
|
+
color: 'white',
|
|
338
|
+
},
|
|
319
339
|
}),
|
|
320
340
|
}}
|
|
321
341
|
value={selectValue}
|
|
@@ -21,19 +21,20 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
/* Clock button styles */
|
|
24
|
+
/* Clock button styles - Compact version */
|
|
25
25
|
.clockButton {
|
|
26
26
|
display: flex;
|
|
27
27
|
align-items: center;
|
|
28
28
|
justify-content: center;
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
31
|
-
border-radius:
|
|
29
|
+
width: 28px;
|
|
30
|
+
height: 28px;
|
|
31
|
+
border-radius: 3px;
|
|
32
32
|
background-color: #2b6cb0; /* Matching blue from screenshot */
|
|
33
33
|
border: none;
|
|
34
34
|
cursor: pointer;
|
|
35
35
|
transition: all 0.2s ease;
|
|
36
36
|
margin: 0 auto;
|
|
37
|
+
padding: 0;
|
|
37
38
|
|
|
38
39
|
&:hover {
|
|
39
40
|
background-color: #2563a0; /* Slightly darker blue on hover */
|
|
@@ -109,13 +110,22 @@
|
|
|
109
110
|
justify-content: flex-start;
|
|
110
111
|
align-items: center;
|
|
111
112
|
gap: 0.1rem;
|
|
113
|
+
padding: 3px 0;
|
|
112
114
|
|
|
113
115
|
span {
|
|
114
116
|
display: flex;
|
|
115
117
|
align-items: center;
|
|
116
118
|
position: relative;
|
|
117
|
-
width:
|
|
118
|
-
height:
|
|
119
|
+
width: 20px;
|
|
120
|
+
height: 20px;
|
|
121
|
+
padding: 3px;
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
border-radius: 3px;
|
|
124
|
+
transition: background-color 0.2s ease;
|
|
125
|
+
|
|
126
|
+
&:hover {
|
|
127
|
+
background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
|
|
128
|
+
}
|
|
119
129
|
|
|
120
130
|
svg {
|
|
121
131
|
width: 18px;
|
|
@@ -823,3 +833,53 @@
|
|
|
823
833
|
}
|
|
824
834
|
}
|
|
825
835
|
}
|
|
836
|
+
|
|
837
|
+
/* Group header styles */
|
|
838
|
+
.groupHeader {
|
|
839
|
+
display: flex;
|
|
840
|
+
justify-content: space-between;
|
|
841
|
+
align-items: center;
|
|
842
|
+
padding: 8px 12px;
|
|
843
|
+
background-color: #f8fafc;
|
|
844
|
+
border-bottom: 1px solid #e2e8f0;
|
|
845
|
+
font-size: 0.9rem;
|
|
846
|
+
width: 100%;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
.groupTitle {
|
|
850
|
+
display: flex;
|
|
851
|
+
align-items: center;
|
|
852
|
+
gap: 8px;
|
|
853
|
+
flex: 1;
|
|
854
|
+
|
|
855
|
+
strong {
|
|
856
|
+
color: var(--secondary-color, #1f2937);
|
|
857
|
+
font-weight: 600;
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.groupCount {
|
|
862
|
+
color: var(--paragraph-color, #6b7280);
|
|
863
|
+
font-size: 0.85rem;
|
|
864
|
+
font-weight: normal;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
.groupCheckbox {
|
|
868
|
+
display: flex;
|
|
869
|
+
align-items: center;
|
|
870
|
+
gap: 6px;
|
|
871
|
+
font-size: 0.85rem;
|
|
872
|
+
color: var(--secondary-color, #1f2937);
|
|
873
|
+
|
|
874
|
+
input[type='checkbox'] {
|
|
875
|
+
width: 16px;
|
|
876
|
+
height: 16px;
|
|
877
|
+
margin: 0;
|
|
878
|
+
cursor: pointer;
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
span {
|
|
882
|
+
cursor: pointer;
|
|
883
|
+
user-select: none;
|
|
884
|
+
}
|
|
885
|
+
}
|
|
@@ -32,8 +32,12 @@
|
|
|
32
32
|
|
|
33
33
|
.multiValue {
|
|
34
34
|
display: flex;
|
|
35
|
-
flex-direction:
|
|
36
|
-
|
|
35
|
+
flex-direction: row;
|
|
36
|
+
align-items: center;
|
|
37
|
+
gap: 4px;
|
|
38
|
+
background-color: #e2e8f0;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
padding: 2px 4px;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
.multiValueLabel {
|
|
@@ -46,7 +50,12 @@
|
|
|
46
50
|
color: rgba(0, 0, 0, 0.7); /* Darker color for better contrast */
|
|
47
51
|
font-weight: 400;
|
|
48
52
|
line-height: 1.1;
|
|
49
|
-
background-color: rgba(
|
|
53
|
+
background-color: rgba(
|
|
54
|
+
255,
|
|
55
|
+
255,
|
|
56
|
+
255,
|
|
57
|
+
0.7
|
|
58
|
+
); /* Semi-transparent white background */
|
|
50
59
|
padding: 1px 3px;
|
|
51
60
|
border-radius: 2px;
|
|
52
61
|
margin-top: 1px;
|
|
@@ -109,21 +118,34 @@
|
|
|
109
118
|
padding: 2px 4px !important;
|
|
110
119
|
min-height: 30px !important;
|
|
111
120
|
display: flex !important;
|
|
112
|
-
flex-direction:
|
|
113
|
-
align-items:
|
|
121
|
+
flex-direction: row !important;
|
|
122
|
+
align-items: center !important;
|
|
123
|
+
background-color: #e2e8f0 !important;
|
|
124
|
+
border-radius: 4px !important;
|
|
114
125
|
}
|
|
115
126
|
|
|
116
127
|
.visns-select__multi-value__label {
|
|
117
|
-
padding: 0 !important;
|
|
128
|
+
padding: 0 4px 0 0 !important;
|
|
118
129
|
display: flex !important;
|
|
119
130
|
flex-direction: column !important;
|
|
120
|
-
|
|
131
|
+
flex: 1 !important;
|
|
132
|
+
min-width: 0 !important;
|
|
121
133
|
}
|
|
122
134
|
|
|
123
135
|
.visns-select__multi-value__remove {
|
|
124
136
|
padding: 0 4px !important;
|
|
125
|
-
|
|
126
|
-
|
|
137
|
+
display: flex !important;
|
|
138
|
+
align-items: center !important;
|
|
139
|
+
justify-content: center !important;
|
|
140
|
+
margin: 0 !important;
|
|
141
|
+
border-radius: 0 4px 4px 0 !important;
|
|
142
|
+
background-color: transparent !important;
|
|
143
|
+
transition: background-color 0.2s ease !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.visns-select__multi-value__remove:hover {
|
|
147
|
+
background-color: #dc2626 !important;
|
|
148
|
+
color: white !important;
|
|
127
149
|
}
|
|
128
150
|
|
|
129
151
|
/* Fix for modals */
|
|
@@ -21,9 +21,15 @@
|
|
|
21
21
|
border-radius: 0 !important;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
/* Ensure consistent border radius for cells */
|
|
24
|
+
/* Ensure consistent border radius for cells and reduce padding for compact rows */
|
|
25
25
|
.InovuaReactDataGrid__cell {
|
|
26
26
|
border-radius: 0 !important;
|
|
27
|
+
padding: 6px 8px !important; /* Reduced from default padding */
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Reduce header cell padding as well */
|
|
31
|
+
.InovuaReactDataGrid__header-cell {
|
|
32
|
+
padding: 6px 8px !important;
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
/* Fix for focus outline */
|
|
@@ -33,9 +39,9 @@
|
|
|
33
39
|
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
|
|
34
40
|
}
|
|
35
41
|
|
|
36
|
-
/* Checkbox column improvements for touch devices */
|
|
42
|
+
/* Checkbox column improvements for touch devices - Compact version */
|
|
37
43
|
.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
|
|
38
|
-
padding: 8px
|
|
44
|
+
padding: 6px 8px !important; /* Reduced padding for compact rows */
|
|
39
45
|
min-width: 60px !important;
|
|
40
46
|
width: 60px !important;
|
|
41
47
|
max-width: 60px !important;
|
|
@@ -92,9 +98,9 @@
|
|
|
92
98
|
background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
|
|
93
99
|
}
|
|
94
100
|
|
|
95
|
-
/* Header checkbox improvements */
|
|
101
|
+
/* Header checkbox improvements - Compact version */
|
|
96
102
|
.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
|
|
97
|
-
padding: 8px
|
|
103
|
+
padding: 6px 8px !important; /* Reduced padding for compact rows */
|
|
98
104
|
min-width: 60px !important;
|
|
99
105
|
width: 60px !important;
|
|
100
106
|
max-width: 60px !important;
|
|
@@ -139,13 +145,13 @@
|
|
|
139
145
|
background-color: inherit !important;
|
|
140
146
|
}
|
|
141
147
|
|
|
142
|
-
/* Mobile-specific improvements */
|
|
148
|
+
/* Mobile-specific improvements - Compact version */
|
|
143
149
|
@media (max-width: 768px) {
|
|
144
150
|
.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
|
|
145
151
|
min-width: 70px !important;
|
|
146
152
|
width: 70px !important;
|
|
147
153
|
max-width: 70px !important;
|
|
148
|
-
padding: 12px
|
|
154
|
+
padding: 8px 12px !important; /* Reduced padding for compact rows */
|
|
149
155
|
}
|
|
150
156
|
|
|
151
157
|
.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
|
|
@@ -168,7 +174,7 @@
|
|
|
168
174
|
min-width: 70px !important;
|
|
169
175
|
width: 70px !important;
|
|
170
176
|
max-width: 70px !important;
|
|
171
|
-
padding: 12px
|
|
177
|
+
padding: 8px 12px !important; /* Reduced padding for compact rows */
|
|
172
178
|
}
|
|
173
179
|
|
|
174
180
|
.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
|
|
@@ -178,10 +184,10 @@
|
|
|
178
184
|
}
|
|
179
185
|
}
|
|
180
186
|
|
|
181
|
-
/* Touch device specific improvements */
|
|
187
|
+
/* Touch device specific improvements - Compact version */
|
|
182
188
|
@media (hover: none) and (pointer: coarse) {
|
|
183
189
|
.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
|
|
184
|
-
padding:
|
|
190
|
+
padding: 12px !important; /* Reduced padding for compact rows */
|
|
185
191
|
}
|
|
186
192
|
|
|
187
193
|
.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
|
|
@@ -200,3 +206,227 @@
|
|
|
200
206
|
margin: -18px !important;
|
|
201
207
|
}
|
|
202
208
|
}
|
|
209
|
+
|
|
210
|
+
/* Group expand/collapse icon fixes - Enhanced for better visibility */
|
|
211
|
+
.InovuaReactDataGrid__group-expand-icon,
|
|
212
|
+
.InovuaReactDataGrid__group-collapse-icon {
|
|
213
|
+
display: inline-flex !important;
|
|
214
|
+
align-items: center !important;
|
|
215
|
+
justify-content: center !important;
|
|
216
|
+
width: 24px !important;
|
|
217
|
+
height: 24px !important;
|
|
218
|
+
margin-right: 8px !important;
|
|
219
|
+
cursor: pointer !important;
|
|
220
|
+
border-radius: 4px !important;
|
|
221
|
+
background-color: var(--primary-color, #3b82f6) !important;
|
|
222
|
+
transition: all 0.2s ease !important;
|
|
223
|
+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
224
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.InovuaReactDataGrid__group-expand-icon:hover,
|
|
228
|
+
.InovuaReactDataGrid__group-collapse-icon:hover {
|
|
229
|
+
background-color: var(--secondary-color, #2563eb) !important;
|
|
230
|
+
transform: scale(1.05) !important;
|
|
231
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.InovuaReactDataGrid__group-expand-icon svg,
|
|
235
|
+
.InovuaReactDataGrid__group-collapse-icon svg {
|
|
236
|
+
width: 14px !important;
|
|
237
|
+
height: 14px !important;
|
|
238
|
+
fill: white !important;
|
|
239
|
+
color: white !important;
|
|
240
|
+
display: block !important;
|
|
241
|
+
opacity: 1 !important;
|
|
242
|
+
stroke: white !important;
|
|
243
|
+
stroke-width: 2 !important;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Enhanced group row styling */
|
|
247
|
+
.InovuaReactDataGrid__group-row {
|
|
248
|
+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
249
|
+
border-bottom: 2px solid #e2e8f0 !important;
|
|
250
|
+
border-left: 4px solid var(--primary-color, #3b82f6) !important;
|
|
251
|
+
position: relative !important;
|
|
252
|
+
transition: all 0.2s ease !important;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.InovuaReactDataGrid__group-row:hover {
|
|
256
|
+
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
|
|
257
|
+
border-left-color: var(--secondary-color, #2563eb) !important;
|
|
258
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Enhanced group cell styling */
|
|
262
|
+
.InovuaReactDataGrid__group-cell {
|
|
263
|
+
padding: 12px 16px !important;
|
|
264
|
+
font-weight: 700 !important;
|
|
265
|
+
color: var(--secondary-color, #1f2937) !important;
|
|
266
|
+
font-size: 0.95rem !important;
|
|
267
|
+
letter-spacing: 0.025em !important;
|
|
268
|
+
text-transform: uppercase !important;
|
|
269
|
+
position: relative !important;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Add a subtle pattern to group cells */
|
|
273
|
+
.InovuaReactDataGrid__group-cell::before {
|
|
274
|
+
content: '' !important;
|
|
275
|
+
position: absolute !important;
|
|
276
|
+
top: 0 !important;
|
|
277
|
+
left: 0 !important;
|
|
278
|
+
right: 0 !important;
|
|
279
|
+
bottom: 0 !important;
|
|
280
|
+
background: repeating-linear-gradient(
|
|
281
|
+
45deg,
|
|
282
|
+
transparent,
|
|
283
|
+
transparent 2px,
|
|
284
|
+
rgba(59, 130, 246, 0.05) 2px,
|
|
285
|
+
rgba(59, 130, 246, 0.05) 4px
|
|
286
|
+
) !important;
|
|
287
|
+
pointer-events: none !important;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* Ensure group expand/collapse icons are visible in all themes */
|
|
291
|
+
.InovuaReactDataGrid__group-expand-icon .InovuaReactDataGrid__icon,
|
|
292
|
+
.InovuaReactDataGrid__group-collapse-icon .InovuaReactDataGrid__icon {
|
|
293
|
+
opacity: 1 !important;
|
|
294
|
+
visibility: visible !important;
|
|
295
|
+
display: block !important;
|
|
296
|
+
color: white !important;
|
|
297
|
+
fill: white !important;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Alternative selectors for different library versions */
|
|
301
|
+
.InovuaReactDataGrid .InovuaReactDataGrid__group-expand-icon,
|
|
302
|
+
.InovuaReactDataGrid .InovuaReactDataGrid__group-collapse-icon {
|
|
303
|
+
opacity: 1 !important;
|
|
304
|
+
visibility: visible !important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Fix for SVG icons that might be hidden */
|
|
308
|
+
.InovuaReactDataGrid__group-expand-icon > *,
|
|
309
|
+
.InovuaReactDataGrid__group-collapse-icon > * {
|
|
310
|
+
opacity: 1 !important;
|
|
311
|
+
visibility: visible !important;
|
|
312
|
+
display: block !important;
|
|
313
|
+
color: white !important;
|
|
314
|
+
fill: white !important;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Enhanced styling for the grouped column header */
|
|
318
|
+
.InovuaReactDataGrid__header-cell--grouped {
|
|
319
|
+
background: linear-gradient(
|
|
320
|
+
135deg,
|
|
321
|
+
var(--primary-color, #3b82f6) 0%,
|
|
322
|
+
var(--secondary-color, #2563eb) 100%
|
|
323
|
+
) !important;
|
|
324
|
+
color: white !important;
|
|
325
|
+
font-weight: 800 !important;
|
|
326
|
+
text-transform: uppercase !important;
|
|
327
|
+
letter-spacing: 0.1em !important;
|
|
328
|
+
border-bottom: 4px solid var(--secondary-color, #2563eb) !important;
|
|
329
|
+
border-top: 2px solid rgba(255, 255, 255, 0.3) !important;
|
|
330
|
+
position: relative !important;
|
|
331
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
|
|
332
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
|
|
333
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
|
|
334
|
+
font-size: 0.9rem !important;
|
|
335
|
+
padding: 12px 16px !important;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.InovuaReactDataGrid__header-cell--grouped::before {
|
|
339
|
+
content: '🔗' !important;
|
|
340
|
+
position: absolute !important;
|
|
341
|
+
left: 8px !important;
|
|
342
|
+
top: 50% !important;
|
|
343
|
+
transform: translateY(-50%) !important;
|
|
344
|
+
font-size: 16px !important;
|
|
345
|
+
opacity: 0.9 !important;
|
|
346
|
+
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.InovuaReactDataGrid__header-cell--grouped::after {
|
|
350
|
+
content: 'GROUPED BY' !important;
|
|
351
|
+
position: absolute !important;
|
|
352
|
+
right: 8px !important;
|
|
353
|
+
top: 50% !important;
|
|
354
|
+
transform: translateY(-50%) !important;
|
|
355
|
+
font-size: 10px !important;
|
|
356
|
+
opacity: 0.8 !important;
|
|
357
|
+
font-weight: 600 !important;
|
|
358
|
+
letter-spacing: 0.05em !important;
|
|
359
|
+
background: rgba(255, 255, 255, 0.2) !important;
|
|
360
|
+
padding: 2px 6px !important;
|
|
361
|
+
border-radius: 10px !important;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.InovuaReactDataGrid__header-cell--grouped:hover {
|
|
365
|
+
background: linear-gradient(
|
|
366
|
+
135deg,
|
|
367
|
+
var(--secondary-color, #2563eb) 0%,
|
|
368
|
+
#1d4ed8 100%
|
|
369
|
+
) !important;
|
|
370
|
+
transform: translateY(-1px) !important;
|
|
371
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
|
|
372
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
|
|
373
|
+
transition: all 0.2s ease !important;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/* Group selection functionality */
|
|
377
|
+
.group-selection-checkbox {
|
|
378
|
+
position: absolute !important;
|
|
379
|
+
right: 12px !important;
|
|
380
|
+
top: 50% !important;
|
|
381
|
+
transform: translateY(-50%) !important;
|
|
382
|
+
width: 18px !important;
|
|
383
|
+
height: 18px !important;
|
|
384
|
+
cursor: pointer !important;
|
|
385
|
+
z-index: 10 !important;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* Clean up group header rows - hide all column content */
|
|
389
|
+
.InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell {
|
|
390
|
+
position: relative !important;
|
|
391
|
+
padding-right: 50px !important;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/* PRESERVE ORIGINAL GROUPING: Clean group rows while maintaining ReactDataGrid structure */
|
|
395
|
+
|
|
396
|
+
/* Let ReactDataGrid handle the group cell spanning, but clean up any content that shouldn't be there */
|
|
397
|
+
/* The group cell should naturally span across all columns in ReactDataGrid */
|
|
398
|
+
|
|
399
|
+
/* Clean approach: Only hide content within group cells that shouldn't be there */
|
|
400
|
+
/* This preserves ReactDataGrid's natural group row spanning behavior */
|
|
401
|
+
|
|
402
|
+
/* Hide specific unwanted elements in group rows */
|
|
403
|
+
.InovuaReactDataGrid__group-row select,
|
|
404
|
+
.InovuaReactDataGrid__group-row input:not([type='checkbox']),
|
|
405
|
+
.InovuaReactDataGrid__group-row
|
|
406
|
+
button:not(.InovuaReactDataGrid__group-expand-button),
|
|
407
|
+
.InovuaReactDataGrid__group-row .dropdown,
|
|
408
|
+
.InovuaReactDataGrid__group-row .timer-button,
|
|
409
|
+
.InovuaReactDataGrid__group-row .action-icon,
|
|
410
|
+
.InovuaReactDataGrid__group-row
|
|
411
|
+
.btn:not(.InovuaReactDataGrid__group-expand-button),
|
|
412
|
+
.InovuaReactDataGrid__group-row
|
|
413
|
+
.icon:not(.InovuaReactDataGrid__group-expand-icon),
|
|
414
|
+
.InovuaReactDataGrid__group-row .cell-content,
|
|
415
|
+
.InovuaReactDataGrid__group-row .cell-value,
|
|
416
|
+
.InovuaReactDataGrid__group-row .dropdown-value {
|
|
417
|
+
display: none !important;
|
|
418
|
+
visibility: hidden !important;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Enhance group cell styling */
|
|
422
|
+
.InovuaReactDataGrid__group-cell {
|
|
423
|
+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
424
|
+
border-left: 4px solid var(--primary-color, #3b82f6) !important;
|
|
425
|
+
font-weight: 600 !important;
|
|
426
|
+
padding: 12px 16px !important;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
/* Additional group row cleanup */
|
|
430
|
+
.InovuaReactDataGrid__group-row * {
|
|
431
|
+
background-image: none !important;
|
|
432
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import MultiSelect from '../components/crm/MultiSelect';
|
|
3
|
+
|
|
4
|
+
function MultiSelectStylingTest() {
|
|
5
|
+
const [selectedValues, setSelectedValues] = useState([]);
|
|
6
|
+
|
|
7
|
+
const options = [
|
|
8
|
+
{ id: 1, label: 'Customer Service Representative' },
|
|
9
|
+
{ id: 2, label: 'Dashboard Administrator' },
|
|
10
|
+
{ id: 3, label: 'Project Manager' },
|
|
11
|
+
{ id: 4, label: 'Technical Support Specialist' },
|
|
12
|
+
{ id: 5, label: 'Sales Representative' },
|
|
13
|
+
{ id: 6, label: 'Quality Assurance Analyst' },
|
|
14
|
+
{ id: 7, label: 'Business Development Manager' },
|
|
15
|
+
{ id: 8, label: 'Software Engineer' }
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
const handleChange = (values) => {
|
|
19
|
+
setSelectedValues(values);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
|
24
|
+
<h1>MultiSelect Styling Test</h1>
|
|
25
|
+
<p>This test verifies that the delete/cross icons appear inline with the selected item text, not on a new line.</p>
|
|
26
|
+
|
|
27
|
+
<div style={{ marginBottom: '20px' }}>
|
|
28
|
+
<h3>Test Case: Multi-Select with Long Labels</h3>
|
|
29
|
+
<p>Select multiple items to test the inline styling of delete icons:</p>
|
|
30
|
+
|
|
31
|
+
<MultiSelect
|
|
32
|
+
settings={{
|
|
33
|
+
id: 'stylingTest',
|
|
34
|
+
multi: true
|
|
35
|
+
}}
|
|
36
|
+
multi={true}
|
|
37
|
+
options={options}
|
|
38
|
+
inputValue={selectedValues}
|
|
39
|
+
onChange={handleChange}
|
|
40
|
+
placeholder="Select multiple roles..."
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
|
|
45
|
+
<h3>Expected Behavior:</h3>
|
|
46
|
+
<ul>
|
|
47
|
+
<li>✅ Delete icons should appear on the same line as the text</li>
|
|
48
|
+
<li>✅ Selected items should have a consistent height</li>
|
|
49
|
+
<li>✅ Delete icons should be clickable and remove the item</li>
|
|
50
|
+
<li>✅ Hover effect should work on delete icons</li>
|
|
51
|
+
<li>✅ Multiple selections should wrap properly without excessive height</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div style={{ marginTop: '20px' }}>
|
|
56
|
+
<h3>Selected Values:</h3>
|
|
57
|
+
<pre style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }}>
|
|
58
|
+
{JSON.stringify(selectedValues, null, 2)}
|
|
59
|
+
</pre>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
|
|
63
|
+
<p><strong>Testing Instructions:</strong></p>
|
|
64
|
+
<ol>
|
|
65
|
+
<li>Select 2-3 items from the dropdown</li>
|
|
66
|
+
<li>Verify that delete icons (×) appear next to each selected item on the same line</li>
|
|
67
|
+
<li>Hover over delete icons to see the red background effect</li>
|
|
68
|
+
<li>Click delete icons to remove items</li>
|
|
69
|
+
<li>Check that the component height doesn't grow unnecessarily</li>
|
|
70
|
+
</ol>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default MultiSelectStylingTest;
|