@capillarytech/blaze-ui 0.1.6-alpha.63 → 0.1.6-alpha.65

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.
Files changed (9) hide show
  1. package/CapIcon/styles.js +15 -15
  2. package/CapInput/styles.js +2 -2
  3. package/CapLabel/styles.js +84 -84
  4. package/CapTable/styles.js +5 -5
  5. package/CapTooltip/styles.js +4 -4
  6. package/CapTooltipWithInfo/styles.js +1 -1
  7. package/CapUnifiedSelect/CapUnifiedSelect.js +46 -16
  8. package/CapUnifiedSelect/styles.js +91 -57
  9. package/package.json +1 -1
package/CapIcon/styles.js CHANGED
@@ -9,33 +9,33 @@ export const IconWrapper = styled.span`
9
9
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
10
10
 
11
11
  &.xs {
12
- font-size: 12px;
13
- width: 12px;
14
- height: 12px;
12
+ font-size: 0.857rem;
13
+ width: 0.857rem;
14
+ height: 0.857rem;
15
15
  }
16
16
 
17
17
  &.s {
18
- font-size: 16px;
19
- width: 16px;
20
- height: 16px;
18
+ font-size: 1.143rem;
19
+ width: 1.143rem;
20
+ height: 1.143rem;
21
21
  }
22
22
 
23
23
  &.m {
24
- font-size: 24px;
25
- width: 24px;
26
- height: 24px;
24
+ font-size: 1.714rem;
25
+ width: 1.714rem;
26
+ height: 1.714rem;
27
27
  }
28
28
 
29
29
  &.l {
30
- font-size: 32px;
31
- width: 32px;
32
- height: 32px;
30
+ font-size: 2.286rem;
31
+ width: 2.286rem;
32
+ height: 2.286rem;
33
33
  }
34
34
 
35
35
  &.with-text-label {
36
36
  display: inline-flex;
37
37
  align-items: center;
38
- gap: 8px;
38
+ gap: 0.571rem;
39
39
  }
40
40
  `;
41
41
 
@@ -45,8 +45,8 @@ export const BackgroundWrapper = styled.span`
45
45
  justify-content: center;
46
46
  border-radius: 50%;
47
47
  background-color: ${({ bgColor }) => bgColor || styledVars.CAP_G09};
48
- width: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
49
- height: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
48
+ width: ${({ size }) => (size === 'xs' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
49
+ height: ${({ size }) => (size === 'xs' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
50
50
  `;
51
51
 
52
52
  export const iconStyles = css`
package/CapInput/styles.js CHANGED
@@ -46,8 +46,8 @@ export const inputStyles = css`
46
46
  /* Size variations */
47
47
  &.ant-input-lg,
48
48
  &.ant-input-affix-wrapper-lg {
49
- font-size: 14px;
50
- padding: 10px 12px;
49
+ font-size: 1rem;
50
+ padding: 0.714rem 0.857rem;
51
51
  }
52
52
 
53
53
  /* TextArea specific */
package/CapLabel/styles.js CHANGED
@@ -3,8 +3,8 @@ import * as styledVars from '../styled/variables';
3
3
 
4
4
  export const StyledLabelDiv = styled.div`
5
5
  font-family: ${styledVars.FONT_FAMILY};
6
- font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
7
- font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
6
+ font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
7
+ font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
8
8
  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
9
9
  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
10
10
  margin: 0;
@@ -13,8 +13,8 @@ export const StyledLabelDiv = styled.div`
13
13
 
14
14
  export const StyledLabelSpan = styled.span`
15
15
  font-family: ${styledVars.FONT_FAMILY};
16
- font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
17
- font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
16
+ font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
17
+ font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
18
18
  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
19
19
  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
20
20
  margin: 0;
@@ -26,234 +26,234 @@ export const labelStyles = css`
26
26
  font-family: ${styledVars.FONT_FAMILY};
27
27
 
28
28
  &.label1 {
29
- font-size: 12px;
29
+ font-size: 0.857rem;
30
30
  color: ${styledVars.CAP_G04};
31
- font-weight: normal;
31
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
32
32
  line-height: normal;
33
33
  }
34
34
 
35
35
  &.label2 {
36
- font-size: 12px;
36
+ font-size: 0.857rem;
37
37
  color: ${styledVars.CAP_G01};
38
- font-weight: normal;
38
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
39
39
  line-height: normal;
40
40
  }
41
41
 
42
42
  &.label3 {
43
- font-size: 12px;
43
+ font-size: 0.857rem;
44
44
  color: ${styledVars.CAP_G05};
45
- font-weight: normal;
45
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
46
46
  line-height: normal;
47
47
  }
48
48
 
49
49
  &.label4 {
50
- font-size: 12px;
50
+ font-size: 0.857rem;
51
51
  color: ${styledVars.CAP_G01};
52
- font-weight: 500;
52
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
53
53
  line-height: normal;
54
54
  }
55
55
 
56
56
  &.label5 {
57
- font-size: 10px;
57
+ font-size: 0.714rem;
58
58
  color: ${styledVars.CAP_G01};
59
- font-weight: normal;
59
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
60
60
  line-height: normal;
61
61
  }
62
62
 
63
63
  &.label6 {
64
- font-size: 12px;
64
+ font-size: 0.857rem;
65
65
  color: ${styledVars.CAP_G06};
66
- font-weight: normal;
66
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
67
67
  line-height: normal;
68
68
  }
69
69
 
70
70
  &.label7 {
71
- font-size: 14px;
71
+ font-size: 1rem;
72
72
  color: ${styledVars.CAP_G04};
73
- font-weight: 500;
73
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
74
74
  line-height: normal;
75
75
  }
76
76
 
77
77
  &.label8 {
78
- font-size: 12px;
78
+ font-size: 0.857rem;
79
79
  color: ${styledVars.CAP_G01};
80
- font-weight: 500;
80
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
81
81
  line-height: normal;
82
82
  }
83
83
 
84
84
  &.label9 {
85
- font-size: 12px;
85
+ font-size: 0.857rem;
86
86
  color: ${styledVars.CAP_G01};
87
- line-height: 16px;
88
- font-weight: normal;
87
+ line-height: 1.143rem;
88
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
89
89
  }
90
90
 
91
91
  &.label10 {
92
- font-size: 12px;
92
+ font-size: 0.857rem;
93
93
  color: ${styledVars.CAP_WHITE};
94
- line-height: 16px;
95
- font-weight: normal;
94
+ line-height: 1.143rem;
95
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
96
96
  }
97
97
 
98
98
  &.label11 {
99
- font-size: 10px;
99
+ font-size: 0.714rem;
100
100
  color: ${styledVars.CAP_G04};
101
- font-weight: normal;
101
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
102
102
  line-height: normal;
103
103
  }
104
104
 
105
105
  &.label12 {
106
- font-size: 12px;
106
+ font-size: 0.857rem;
107
107
  color: ${styledVars.CAP_WHITE};
108
- font-weight: normal;
108
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
109
109
  line-height: normal;
110
110
  }
111
111
 
112
112
  &.label13 {
113
- font-size: 10px;
113
+ font-size: 0.714rem;
114
114
  color: ${styledVars.CAP_G05};
115
- font-weight: normal;
115
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
116
116
  line-height: normal;
117
117
  }
118
118
 
119
119
  &.label14 {
120
- font-size: 14px;
120
+ font-size: 1rem;
121
121
  color: #676e7c;
122
- font-weight: normal;
122
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
123
123
  line-height: normal;
124
124
  }
125
125
 
126
126
  &.label15 {
127
- font-size: 14px;
127
+ font-size: 1rem;
128
128
  color: ${styledVars.CAP_G01};
129
- font-weight: normal;
129
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
130
130
  line-height: normal;
131
131
  }
132
132
 
133
133
  &.label16 {
134
- font-size: 14px;
134
+ font-size: 1rem;
135
135
  color: ${styledVars.CAP_G01};
136
- font-weight: 500;
136
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
137
137
  line-height: normal;
138
138
  }
139
139
 
140
140
  &.label17 {
141
- font-size: 16px;
141
+ font-size: 1.143rem;
142
142
  color: ${styledVars.CAP_G01};
143
- font-weight: 500;
143
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
144
144
  line-height: normal;
145
145
  }
146
146
 
147
147
  &.label18 {
148
- font-size: 14px;
148
+ font-size: 1rem;
149
149
  color: ${styledVars.CAP_G04};
150
- font-weight: normal;
150
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
151
151
  line-height: normal;
152
152
  }
153
153
 
154
154
  &.label19 {
155
- font-size: 12px;
156
- line-height: 16px;
157
- font-weight: normal;
155
+ font-size: 0.857rem;
156
+ line-height: 1.143rem;
157
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
158
158
  color: rgba(0, 0, 0, 0.87);
159
159
  }
160
160
 
161
161
  &.label20 {
162
- font-size: 14px;
162
+ font-size: 1rem;
163
163
  color: ${styledVars.CAP_BLUE01};
164
- font-weight: 500;
164
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
165
165
  line-height: normal;
166
166
  }
167
167
 
168
168
  &.label21 {
169
- font-size: 12px;
169
+ font-size: 0.857rem;
170
170
  color: ${styledVars.CAP_BLUE01};
171
- font-weight: normal;
171
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
172
172
  line-height: normal;
173
173
  }
174
174
 
175
175
  &.label22 {
176
- font-size: 24px;
176
+ font-size: 1.714rem;
177
177
  color: ${styledVars.CAP_G04};
178
- line-height: 28px;
179
- font-weight: normal;
178
+ line-height: 2rem;
179
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
180
180
  }
181
181
 
182
182
  &.label23 {
183
- font-size: 14px;
183
+ font-size: 1rem;
184
184
  color: ${styledVars.CAP_WHITE};
185
- font-weight: normal;
185
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
186
186
  line-height: normal;
187
187
  }
188
188
 
189
189
  &.label24 {
190
- font-size: 14px;
190
+ font-size: 1rem;
191
191
  color: ${styledVars.CAP_G04};
192
- font-weight: 400;
193
- line-height: 20px;
192
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
193
+ line-height: 1.429rem;
194
194
  }
195
195
 
196
196
  &.label25 {
197
- font-size: 14px;
197
+ font-size: 1rem;
198
198
  color: ${styledVars.CAP_G04};
199
- font-weight: 500;
200
- line-height: 20px;
199
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
200
+ line-height: 1.429rem;
201
201
  }
202
202
 
203
203
  &.label26 {
204
- font-size: 10px;
204
+ font-size: 0.714rem;
205
205
  color: ${styledVars.CAP_G01};
206
- font-weight: 400;
207
- line-height: 12px;
206
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
207
+ line-height: 0.857rem;
208
208
  }
209
209
 
210
210
  &.label27 {
211
- font-size: 12px;
211
+ font-size: 0.857rem;
212
212
  color: ${styledVars.CAP_BLUE01};
213
- font-weight: 500;
214
- line-height: 16px;
213
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
214
+ line-height: 1.143rem;
215
215
  }
216
216
 
217
217
  &.label28 {
218
218
  color: ${styledVars.CAP_WHITE};
219
- font-size: 12px;
220
- font-weight: 500;
221
- line-height: 16px;
219
+ font-size: 0.857rem;
220
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
221
+ line-height: 1.143rem;
222
222
  }
223
223
 
224
224
  &.label29 {
225
225
  color: ${styledVars.CAP_WHITE};
226
- font-size: 10px;
227
- font-weight: 400;
228
- line-height: 12px;
226
+ font-size: 0.714rem;
227
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
228
+ line-height: 0.857rem;
229
229
  }
230
230
 
231
231
  &.label30 {
232
232
  color: ${styledVars.CAP_WHITE};
233
- font-size: 10px;
234
- font-weight: 400;
235
- line-height: 12px;
233
+ font-size: 0.714rem;
234
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
235
+ line-height: 0.857rem;
236
236
  }
237
237
 
238
238
  &.label31 {
239
- font-size: 12px;
239
+ font-size: 0.857rem;
240
240
  color: ${styledVars.CAP_G01};
241
- font-weight: 400;
242
- line-height: 16px;
241
+ font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
242
+ line-height: 1.143rem;
243
243
  }
244
244
 
245
245
  &.label32 {
246
- line-height: 20px;
247
- font-size: 14px;
246
+ line-height: 1.429rem;
247
+ font-size: 1rem;
248
248
  color: ${styledVars.CAP_WHITE};
249
- font-weight: 500;
249
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
250
250
  }
251
251
 
252
252
  &.label33 {
253
- font-size: 14px;
253
+ font-size: 1rem;
254
254
  color: ${styledVars.CAP_BLUE01};
255
- font-weight: 500;
256
- line-height: 20px;
255
+ font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
256
+ line-height: 1.429rem;
257
257
  }
258
258
  }
259
259
  `;
package/CapTable/styles.js CHANGED
@@ -28,9 +28,9 @@ export const StyledTable = styled(Table)`
28
28
  position: absolute;
29
29
  width: 100%;
30
30
  align-items: center;
31
- height: 60px;
31
+ height: 4.286rem;
32
32
  text-align: center;
33
- font-size: 16px;
33
+ font-size: 1.143rem;
34
34
  color: gray;
35
35
  border-top: 1px solid ${CAP_G07};
36
36
  }
@@ -79,7 +79,7 @@ export const StyledTable = styled(Table)`
79
79
 
80
80
  .ant-table-thead {
81
81
  .table-children {
82
- padding: 6px ${SPACING_24} 16px;
82
+ padding: 0.429rem ${SPACING_24} 1.143rem;
83
83
  position: relative;
84
84
  }
85
85
 
@@ -90,8 +90,8 @@ export const StyledTable = styled(Table)`
90
90
 
91
91
  .table-children.show-separator:not(:last-child)::after {
92
92
  content: '';
93
- height: 8px;
94
- width: 1px;
93
+ height: 0.571rem;
94
+ width: 0.071rem;
95
95
  right: 0;
96
96
  top: 30%;
97
97
  background-color: ${CAP_G07};
package/CapTooltip/styles.js CHANGED
@@ -6,11 +6,11 @@ export const tooltipStyles = css`
6
6
  .ant-tooltip-inner {
7
7
  background-color: ${styledVars.CAP_G01};
8
8
  color: ${styledVars.CAP_WHITE};
9
- padding: 8px 12px;
10
- font-size: 14px;
11
- line-height: 20px;
9
+ padding: ${styledVars.SPACING_08} ${styledVars.SPACING_12};
10
+ font-size: 1rem;
11
+ line-height: 1.429rem;
12
12
  border-radius: ${styledVars.RADIUS_04};
13
- max-width: 300px;
13
+ max-width: 21.429rem;
14
14
  word-wrap: break-word;
15
15
  }
16
16
 
package/CapTooltipWithInfo/styles.js CHANGED
@@ -9,7 +9,7 @@ export const tooltipWithInfoStyles = css`
9
9
 
10
10
  .cap-tooltip-with-info-icon {
11
11
  color: ${styledVars.CAP_G06};
12
- margin-left: 4px;
12
+ margin-left: ${styledVars.SPACING_04};
13
13
  cursor: help;
14
14
 
15
15
  &:hover {
package/CapUnifiedSelect/CapUnifiedSelect.js CHANGED
@@ -29,7 +29,7 @@ const NoResult = memo(({ noResultCustomText, className, showUpload, options, noR
29
29
  ));
30
30
 
31
31
  const SelectAllCheckbox = memo(({ currentItems, tempValue, setTempValue, processTreeData }) => {
32
- const { leafValues } = processTreeData?.(currentItems);
32
+ const { leafValues = [] } = processTreeData ? processTreeData(currentItems) : {};
33
33
  const totalAvailable = leafValues.length;
34
34
  const leafSet = new Set(leafValues);
35
35
  const selectedInScope = Array.isArray(tempValue)
@@ -172,13 +172,39 @@ const CapUnifiedSelect = ({
172
172
 
173
173
  const dataSource = useMemo(() => {
174
174
  if (!options?.length) return [];
175
- return isTree
176
- ? options
177
- : options.map((opt) => ({
178
- title: opt?.label,
179
- value: opt?.value,
180
- key: opt?.key || opt?.value,
181
- }));
175
+ const enhanceOptions = (opts) =>
176
+ opts.map((opt) => {
177
+ const decoratedTitle = (
178
+ <CapRow className="cap-unified-select-option-with-suffix">
179
+ <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
180
+ {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
181
+ {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
182
+ </div>}
183
+ {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
184
+ </CapRow>
185
+ );
186
+
187
+ return {
188
+ ...opt,
189
+ title: decoratedTitle,
190
+ label: opt?.label,
191
+ children: opt?.children ? enhanceOptions(opt.children) : [],
192
+ };
193
+ });
194
+
195
+ return isTree ? enhanceOptions(options) : options.map((opt) => ({
196
+ ...opt,
197
+ title: (
198
+ <CapRow className="cap-unified-select-option-with-suffix">
199
+ <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
200
+ {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
201
+ {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
202
+ </div>}
203
+ {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
204
+ </CapRow>
205
+ ),
206
+ label: opt?.label,
207
+ }));
182
208
  }, [isTree, options]);
183
209
 
184
210
  const filteredTree = useMemo(
@@ -208,7 +234,7 @@ const CapUnifiedSelect = ({
208
234
  const prefix = useMemo(() => {
209
235
  if (isMulti && Array.isArray(displayValue) && displayValue?.length > 0) {
210
236
  const firstLeafValue = displayValue.find(val => treeMaps?.leafValues?.includes(val));
211
- return treeMaps?.nodeMap?.[firstLeafValue]?.label || treeMaps?.nodeMap?.[firstLeafValue]?.title || null;
237
+ return treeMaps?.nodeMap?.[firstLeafValue]?.label || null;
212
238
  }
213
239
  return null;
214
240
  }, [isMulti, displayValue, treeMaps]);
@@ -221,10 +247,11 @@ const CapUnifiedSelect = ({
221
247
  }, [onChange, onConfirm, tempValue]);
222
248
 
223
249
  const handleClearAll = useCallback(() => {
224
- setTempValue([]);
225
- onChange?.([]);
250
+ const cleared = isMulti ? [] : undefined;
251
+ setTempValue(cleared);
252
+ onChange?.(cleared);
226
253
  setDropdownOpen(false);
227
- }, [onChange]);
254
+ }, [isMulti, onChange]);
228
255
 
229
256
 
230
257
  const handleDropdownVisibilityChange = useCallback((open) => {
@@ -335,7 +362,7 @@ const CapUnifiedSelect = ({
335
362
  size="small"
336
363
  onClick={handleClearAll}
337
364
  >
338
- Clear all
365
+ {clearText}
339
366
  </Button>
340
367
  <CapLabel className="cap-unified-select-selected-count">
341
368
  {selectedLeafCount} selected
@@ -384,6 +411,7 @@ const CapUnifiedSelect = ({
384
411
  type={type}
385
412
  treeData={filteredTree}
386
413
  value={customPopupRender ? tempValue : value}
414
+ treeNodeLabelProp='label'
387
415
  onChange={isMulti ? setTempValue : onChange}
388
416
  placeholder={placeholder}
389
417
  showSearch={false}
@@ -425,6 +453,7 @@ CapUnifiedSelect.propTypes = {
425
453
  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
426
454
  options: PropTypes.array,
427
455
  value: PropTypes.any,
456
+ containerClassName: PropTypes.string,
428
457
  onChange: PropTypes.func,
429
458
  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
430
459
  className: PropTypes.string,
@@ -433,16 +462,19 @@ CapUnifiedSelect.propTypes = {
433
462
  headerLabel: PropTypes.string,
434
463
  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
435
464
  disabled: PropTypes.bool,
465
+ bylineText: PropTypes.string,
436
466
  customPopupRender: PropTypes.bool,
437
467
  showSearch: PropTypes.bool,
438
468
  searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
439
469
  onConfirm: PropTypes.func,
440
470
  isError: PropTypes.bool,
441
471
  errorMessage: PropTypes.string,
442
- popupClassName: PropTypes.string,
472
+ popoverClassName: PropTypes.string,
443
473
  showUpload: PropTypes.bool,
444
474
  onUpload: PropTypes.func,
445
475
  clearText: PropTypes.string,
476
+ noResultCustomText: PropTypes.string,
477
+ noResultCustomIcon: PropTypes.string,
446
478
  };
447
479
 
448
480
  CapUnifiedSelect.defaultProps = {
@@ -457,14 +489,12 @@ CapUnifiedSelect.defaultProps = {
457
489
  customPopupRender: true,
458
490
  showSearch: true,
459
491
  className: '',
460
- popupClassName: '',
461
492
  disabled: false,
462
493
  showUpload: false,
463
494
  isError: false,
464
495
  onUpload: () => {},
465
496
  onChange: () => {},
466
497
  onConfirm: () => {},
467
- onCancel: () => {},
468
498
  };
469
499
 
470
500
  export default withMemo(withStyles(CapUnifiedSelect, selectStyles));
package/CapUnifiedSelect/styles.js CHANGED
@@ -34,22 +34,22 @@ export const selectStyles = css`
34
34
  pointer-events: unset;
35
35
  }
36
36
  .ant-select-prefix {
37
- font-size: 0.875rem;
37
+ font-size: 1rem;
38
38
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
39
39
  color: ${styledVars.CAP_G01};
40
- line-height: 1.25rem;
40
+ line-height: 1.429rem;
41
41
  }
42
42
  .cap-unified-select-header-label {
43
43
  font-family: ${styledVars.FONT_FAMILY};
44
44
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
45
- font-size: 0.875rem;
46
- line-height: 1.25rem;
45
+ font-size: 1rem;
46
+ line-height: 1.429rem;
47
47
  letter-spacing: 0;
48
48
  }
49
49
  .cap-unified-select-header-byline-text {
50
50
  font-family: ${styledVars.FONT_FAMILY};
51
51
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
52
- font-size: 0.75rem;
52
+ font-size: 0.857rem;
53
53
  letter-spacing: 0;
54
54
  color: ${styledVars.CAP_G05};
55
55
  }
@@ -57,11 +57,11 @@ export const selectStyles = css`
57
57
  left: ${styledVars.SPACING_12};
58
58
  }
59
59
  .cap-tooltip-with-info-icon {
60
- margin-top: 0.125rem;
60
+ margin-top: 0.143rem;
61
61
  }
62
62
 
63
63
  .cap-unified-tree-select {
64
- min-width: 12.5rem;
64
+ min-width: 14.286rem;
65
65
  }
66
66
 
67
67
  .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
@@ -75,12 +75,12 @@ export const selectStyles = css`
75
75
  background-color: ${styledVars.CAP_PRIMARY.base};
76
76
  }
77
77
  .ant-select-dropdown {
78
- margin-top: -0.5rem !important;
78
+ margin-top: -0.571rem !important;
79
79
  border-radius: ${styledVars.RADIUS_04};
80
80
  box-shadow:
81
- 0 0.25rem 0.5rem -0.125rem ${styledVars.CAP_G01},
82
- 0 0 0.0625rem 0 ${styledVars.CAP_G01};
83
- max-height: 22.5rem;
81
+ 0 0.286rem 0.571rem -0.143rem ${styledVars.CAP_G01},
82
+ 0 0 0.071rem 0 ${styledVars.CAP_G01};
83
+ max-height: 25.714rem;
84
84
  overflow: visible;
85
85
  }
86
86
 
@@ -108,17 +108,44 @@ export const selectStyles = css`
108
108
  .ant-select-tree {
109
109
  .ant-select-tree-node-content-wrapper {
110
110
  background-color: transparent;
111
+ height: 100%;
112
+ .cap-unified-select-option-with-suffix{
113
+ display: flex;
114
+ justify-content: flex-start;
115
+ align-items: center;
116
+ width: 100%;
117
+ height: 100%;
118
+ .cap-unified-select-option-label{
119
+ flex: 1;
120
+ max-width: 9.286rem;
121
+ overflow: hidden;
122
+ text-overflow: ellipsis;
123
+ white-space: nowrap;
124
+ display: block;
125
+ }
126
+ .cap-unified-select-option-suffix{
127
+ display: flex;
128
+ align-items: center;
129
+ padding: 0 ${styledVars.SPACING_08};
130
+ max-height: 1.429rem;
131
+ white-space: nowrap;
132
+ margin-left: ${styledVars.SPACING_08};
133
+ }
134
+ .cap-tooltip-with-info-icon{
135
+ margin-top: 0.357rem;
136
+ }
137
+ }
111
138
  }
112
139
  .ant-select-tree-node-content-wrapper:hover {
113
140
  background-color: transparent;
114
141
  }
115
142
  .ant-select-tree-treenode {
116
- line-height: 2.5rem;
143
+ height: 3.429rem;
117
144
  margin-bottom: 0;
118
145
  .ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
119
- height: 1.125rem;
120
- width: 1.125rem;
121
- border: 2px solid ${styledVars.CAP_G06};
146
+ height: 1.286rem;
147
+ width: 1.286rem;
148
+ border: 0.143rem solid ${styledVars.CAP_G06};
122
149
  border-radius: ${styledVars.RADIUS_04};
123
150
  }
124
151
  &:hover {
@@ -131,7 +158,7 @@ export const selectStyles = css`
131
158
  }
132
159
  .ant-select-tree-node-content-wrapper {
133
160
  border-radius: 0;
134
- padding-left: 0.1875rem;
161
+ padding-left: 3px;
135
162
  }
136
163
  .ant-select-tree-indent {
137
164
  margin-left: ${styledVars.SPACING_12};
@@ -143,14 +170,15 @@ export const selectStyles = css`
143
170
  }
144
171
  .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
145
172
  background-color: ${styledVars.CAP_PRIMARY.base};
146
- border: 2px solid ${styledVars.CAP_PRIMARY.base} !important;
173
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
147
174
  &:hover {
148
175
  background-color: ${styledVars.CAP_PRIMARY.base};
149
- border: 2px solid ${styledVars.CAP_PRIMARY.base} !important;
176
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
150
177
  }
151
178
  }
152
179
  .ant-select-tree-switcher .ant-select-tree-switcher-icon {
153
- font-size: 0.75rem;
180
+ font-size: 0.857rem;
181
+ margin-top: 1.286rem;
154
182
  }
155
183
  }
156
184
  .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
@@ -165,18 +193,18 @@ export const selectStyles = css`
165
193
  position: absolute;
166
194
  top: 50%;
167
195
  left: 50%;
168
- width: 0.625rem;
169
- height: 0.125rem;
196
+ width: 0.714rem;
197
+ height: 0.143rem;
170
198
  background-color: ${styledVars.CAP_WHITE};
171
199
  transform: translate(-50%, -50%);
172
- border-radius: 0.0625rem;
200
+ border-radius: 0.071rem;
173
201
  }
174
202
  .cap-unified-select-upload-container {
175
203
  cursor: pointer;
176
204
  display: flex;
177
205
  align-items: center;
178
- border-bottom: 1px solid ${styledVars.CAP_G08};
179
- height: 2.5rem;
206
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08};
207
+ height: 2.857rem;
180
208
  padding-left: ${styledVars.SPACING_16};
181
209
 
182
210
  .cap-unified-select-upload-label {
@@ -185,18 +213,18 @@ export const selectStyles = css`
185
213
  }
186
214
  }
187
215
  .cap-unified-select-select-all-container {
188
- padding: 0.5625rem 0.9375rem;
216
+ padding: 0.643rem 1.071rem;
189
217
  cursor: pointer;
190
218
  display: flex;
191
219
  align-items: center;
192
- border-bottom: 1px solid ${styledVars.CAP_G08};
193
- height: 2.5rem;
220
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08};
221
+ height: 2.857rem;
194
222
  .cap-unified-select-select-all-checkbox {
195
223
  display: contents !important;
196
224
  .ant-checkbox-inner {
197
- height: 1.125rem;
198
- width: 1.125rem;
199
- border: 2px solid ${styledVars.CAP_G06};
225
+ height: 1.286rem;
226
+ width: 1.286rem;
227
+ border: 0.143rem solid ${styledVars.CAP_G06};
200
228
  border-radius: ${styledVars.RADIUS_04};
201
229
  }
202
230
  }
@@ -204,7 +232,7 @@ export const selectStyles = css`
204
232
  .ant-checkbox-checked:not(.ant-checkbox-disabled)
205
233
  .ant-checkbox-inner {
206
234
  background-color: ${styledVars.CAP_PRIMARY.base};
207
- border: 2px solid ${styledVars.CAP_PRIMARY.base} !important;
235
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
208
236
  }
209
237
  .ant-checkbox-indeterminate .ant-checkbox-inner {
210
238
  background-color: ${styledVars.CAP_PRIMARY.base} !important;
@@ -215,11 +243,11 @@ export const selectStyles = css`
215
243
  position: absolute;
216
244
  top: 50%;
217
245
  left: 50%;
218
- width: 0.625rem;
219
- height: 0.125rem;
246
+ width: 0.714rem;
247
+ height: 0.143rem;
220
248
  background-color: ${styledVars.CAP_WHITE};
221
249
  transform: translate(-50%, -50%);
222
- border-radius: 0.0625rem;
250
+ border-radius: 0.071rem;
223
251
  }
224
252
  }
225
253
  .ant-select-tree-treenode.ant-select-tree-treenode-selected {
@@ -234,12 +262,12 @@ export const selectStyles = css`
234
262
  flex-direction: column;
235
263
  align-items: center;
236
264
  justify-content: center;
237
- height: 12.5rem;
265
+ height: 14.286rem;
238
266
  color: ${styledVars.CAP_G05};
239
- font-size: 0.875rem;
267
+ font-size: 1rem;
240
268
  }
241
269
  .cap-unified-select-no-result-icon {
242
- font-size: 2.25rem;
270
+ font-size: 2.571rem;
243
271
  margin-bottom: ${styledVars.SPACING_08};
244
272
  color: ${styledVars.CAP_G06};
245
273
  }
@@ -256,44 +284,44 @@ export const selectStyles = css`
256
284
  outline: none;
257
285
  }
258
286
  .cap-unified-select-search-container {
259
- border-bottom: 1px solid ${styledVars.CAP_G08} !important;
260
- line-height: 2.5rem !important;
287
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08} !important;
288
+ line-height: 2.857rem !important;
261
289
  .ant-input-affix-wrapper {
262
290
  padding-left: ${styledVars.SPACING_08};
263
291
  }
264
292
  }
265
293
  .cap-unified-select-upload-button {
266
294
  border: none;
267
- padding-left: 0.9375rem;
295
+ padding-left: 1.071rem;
268
296
  }
269
297
  .cap-unified-select-confirm-container {
270
298
  display: flex;
271
299
  align-items: center;
272
- height: 3rem;
273
- padding: 0.4375rem;
274
- border-top: 1px solid ${styledVars.CAP_G08};
300
+ height: 3.429rem;
301
+ padding: 0.5rem;
302
+ border-top: 0.071rem solid ${styledVars.CAP_G08};
275
303
  }
276
304
  .cap-unified-select-confirm-button-group {
277
305
  display: flex;
278
- padding-left: 8px;
306
+ padding-left: ${styledVars.SPACING_08};
279
307
  align-items: center;
280
308
  .cap-unified-select-confirm-button {
281
309
  background-color: ${styledVars.CAP_GREEN01};
282
- height: 2rem;
283
- width: 5.875rem;
310
+ height: 2.286rem;
311
+ width: 6.714rem;
284
312
  }
285
313
  .cap-unified-select-cancel-button {
286
314
  border: transparent;
287
315
  box-shadow: none;
288
- width: 5rem;
316
+ width: 5.714rem;
289
317
  }
290
318
  }
291
319
  .cap-unified-select-selected-count {
292
320
  display: flex;
293
321
  margin-left: auto; /* pushes to far right */
294
- font-size: 12px;
322
+ font-size: 0.857rem;
295
323
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
296
- line-height: 1rem;
324
+ line-height: 1.143rem;
297
325
  color: ${styledVars.CAP_G04};
298
326
  }
299
327
  .cap-unified-select-search-container {
@@ -301,17 +329,17 @@ export const selectStyles = css`
301
329
  border: none;
302
330
  box-shadow: none;
303
331
  border-radius: 0;
304
- border-bottom: 1px solid transparent;
305
- transition: border-color 0.2s ease;
332
+ border-bottom: 0.071rem solid transparent;
333
+ transition: border-color 0.2s ease;
306
334
  }
307
335
 
308
336
  .ant-input-affix-wrapper:hover {
309
- border-bottom: 1px solid ${styledVars.CAP_G11} !important;
337
+ border-bottom: 0.071rem solid ${styledVars.CAP_G11} !important;
310
338
  box-shadow: none;
311
339
  }
312
340
 
313
341
  .ant-input-affix-wrapper:focus-within {
314
- border-bottom: 1px solid ${styledVars.CAP_G01} !important;
342
+ border-bottom: 0.071rem solid ${styledVars.CAP_G01} !important;
315
343
  box-shadow: none;
316
344
  outline: none;
317
345
  }
@@ -325,15 +353,15 @@ export const selectStyles = css`
325
353
  display: flex;
326
354
  justify-content: center;
327
355
  align-items: center;
328
- height: 2.5rem;
329
- border-top: 1px solid #EBECF0;
356
+ height: 2.857rem;
357
+ border-top: 0.071rem solid #EBECF0;
330
358
  cursor: pointer;
331
359
  color: ${styledVars.CAP_G01};
332
360
  &:hover{
333
361
  background-color: ${styledVars.CAP_G08};
334
362
  }
335
363
  .cap-unified-select-tree-clear-label{
336
- font-size: 0.875rem;
364
+ font-size: 1rem;
337
365
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
338
366
  }
339
367
  }
@@ -350,9 +378,15 @@ export const selectStyles = css`
350
378
  }
351
379
  }
352
380
  .ant-select-tree-indent {
353
- margin-left: 0.9375rem;
381
+ margin-left: 1.071rem;
354
382
  }
355
383
  }
384
+ .multiTreeSelect-popup-container {
385
+ min-width: 20rem;
386
+ }
387
+ .treeSelect-popup-container {
388
+ min-width: 20rem;
389
+ }
356
390
 
357
391
  /* Single Select */
358
392
  .select-popup-container {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/blaze-ui",
3
3
  "author": "Capillary Technologies",
4
- "version": "0.1.6-alpha.63",
4
+ "version": "0.1.6-alpha.65",
5
5
  "description": "Capillary UI component library with Ant Design v5",
6
6
  "main": "./index.js",
7
7
  "sideEffects": [