@capillarytech/blaze-ui 0.1.6-alpha.44 → 0.1.6-alpha.45

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 (3) hide show
  1. package/CapUnifiedSelect/CapUnifiedSelect.js +7 -7
  2. package/CapUnifiedSelect/styles.js +100 -87
  3. package/package.json +1 -1
package/CapUnifiedSelect/CapUnifiedSelect.js CHANGED
@@ -36,7 +36,8 @@ const CapUnifiedSelect = ({
36
36
  searchBasedOn = 'label',
37
37
  onConfirm,
38
38
  onCancel,
39
- noResultText = 'No results found',
39
+ noResultCustomText = 'No results found',
40
+ noResultCustomIcon = 'warning',
40
41
  ...rest
41
42
  }) => {
42
43
 
@@ -55,14 +56,14 @@ const CapUnifiedSelect = ({
55
56
  listItemHeight: 32,
56
57
  };
57
58
 
58
- const NoResult = memo(({ noResultText, className }) => (
59
+ const NoResult = memo(({ noResultCustomText, className }) => (
59
60
  <CapRow
60
61
  className={classnames(className, "cap-unified-select-no-result")}
61
62
  align="middle"
62
63
  gap={8}
63
64
  >
64
- <CapIcon type="warning" size="m" />
65
- <CapLabel className="cap-unified-select-no-result-text">{noResultText}</CapLabel>
65
+ <CapIcon type={noResultCustomIcon} size="m" />
66
+ <CapLabel className="cap-unified-select-no-result-text">{showUpload && options.length === 0 ? noResultCustomText : 'No results found'}</CapLabel>
66
67
  </CapRow>
67
68
  ));
68
69
 
@@ -236,7 +237,7 @@ const CapUnifiedSelect = ({
236
237
  </CapRow>
237
238
  )}
238
239
 
239
- {currentItems.length === 0 ? <NoResult noResultText={noResultText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
240
+ {currentItems.length === 0 ? <NoResult noResultCustomText={noResultCustomText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
240
241
 
241
242
  {currentItems.length > 0 && isMulti && (
242
243
  <div className="cap-unified-select-confirm-container">
@@ -282,14 +283,13 @@ const CapUnifiedSelect = ({
282
283
  maxTagPlaceholder={() => null}
283
284
  prefix={tempValue?.length > 0 ? prefix : undefined}
284
285
  suffixIcon={suffix}
285
- className={classnames(`cap-unified-tree-select ${className || ''}`)}
286
+ className={classnames(`cap-unified-tree-select cap-unified-tree-select-${size}`, className)}
286
287
  style={style}
287
288
  status={isError ? 'error' : ''}
288
289
  allowClear={allowClear}
289
290
  multiple={isMulti}
290
291
  treeCheckable={isMulti}
291
292
  open={dropdownOpen}
292
- treeDefaultExpandAll={true}
293
293
  onOpenChange={handleDropdownVisibilityChange}
294
294
  showCheckedStrategy={TreeSelect.SHOW_PARENT}
295
295
  virtual
package/CapUnifiedSelect/styles.js CHANGED
@@ -97,121 +97,134 @@ export const selectStyles = css`
97
97
  &.cap-unified-select-container {
98
98
  text-align: justify;
99
99
  .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover{
100
- background-color: #42b040 !important;
100
+ background-color: #42b040;
101
101
  }
102
102
  .ant-tree-select-dropdown{
103
- padding: 0px !important;
103
+ padding: 0px;
104
104
  }
105
- .cap-unified-tree-select{
106
- height: 40px !important;
107
- width: 340px !important;
105
+ .cap-unified-tree-select-s{
106
+ height: 40px;
107
+ width: 160px;
108
+ }
109
+ .cap-unified-tree-select-m{
110
+ height: 40px;
111
+ width: 340px;
112
+ }
113
+ .cap-unified-tree-select-l{
114
+ height: 40px;
115
+ width: 400px;
116
+ }
117
+ .cap-unified-tree-select-xl{
118
+ height: 40px;
119
+ width: 480px;
108
120
  }
109
121
  .cap-unified-select-upload-container{
110
- cursor: pointer !important;
111
- display: flex !important;
112
- align-items: center !important;
113
- border-bottom: 1px solid #f0f0f0 !important;
114
- height: 40px !important;
115
- padding-left: 15px !important;
122
+ cursor: pointer;
123
+ display: flex;
124
+ align-items: center;
125
+ border-bottom: 1px solid #f0f0f0;
126
+ height: 40px;
127
+ padding-left: 15px;
116
128
 
117
129
  .cap-unified-select-upload-label{
118
- margin-left: 12px !important;
119
- color: #2466EA !important;
130
+ margin-left: 12px;
131
+ color: #2466EA;
120
132
  }
121
133
  }
122
134
  .cap-unified-select-select-all-container{
123
- padding: 9px 9px !important;
124
- cursor: pointer !important;
125
- display: flex !important;
126
- align-items: center !important;
127
- border-bottom: 1px solid #f0f0f0 !important;
128
- height: 40px !important;
135
+ padding: 9px 9px;
136
+ cursor: pointer;
137
+ display: flex;
138
+ align-items: center;
139
+ border-bottom: 1px solid #f0f0f0;
140
+ height: 40px;
129
141
  }
130
142
  .ant-select-dropdown{
131
- margin-top: -5px !important;
132
- border-radius: 4px !important;
133
- box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F !important;
143
+ margin-top: -5px;
144
+ border-radius: 4px;
145
+ box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F;
146
+ max-height: 368px;
134
147
  }
135
148
  .ant-select-prefix{
136
- font-size: 14px !important;
137
- font-weight: 400 !important;
138
- color: #091E42 !important;
139
- line-height: 20px !important;
149
+ font-size: 14px;
150
+ font-weight: 400;
151
+ color: #091E42;
152
+ line-height: 20px;
140
153
  }
141
154
  .cap-unified-select-header-label{
142
- font-family: ${styledVars.FONT_FAMILY} !important;
143
- font-weight: 500 !important;
144
- font-size: 14px !important;
145
- line-height: 20px !important;
146
- letter-spacing: 0px !important;
155
+ font-family: ${styledVars.FONT_FAMILY};
156
+ font-weight: 500;
157
+ font-size: 14px;
158
+ line-height: 20px;
159
+ letter-spacing: 0px;
147
160
  }
148
161
  .cap-unified-select-header-byline-text{
149
- font-family: ${styledVars.FONT_FAMILY} !important;
150
- font-weight: 400 !important;
151
- font-size: 12px !important;
162
+ font-family: ${styledVars.FONT_FAMILY};
163
+ font-weight: 400;
164
+ font-size: 12px;
152
165
  margin-top: -10px;
153
- letter-spacing: 0px !important;
154
- color: #97A0AF !important;
166
+ letter-spacing: 0px;
167
+ color: #97A0AF;
155
168
  }
156
169
  .ant-input-affix-wrapper .ant-input-prefix{
157
- left: 13px !important;
170
+ left: 13px;
158
171
  }
159
172
  .ant-select-tree {
160
173
  .ant-select-tree-node-content-wrapper{
161
- background-color: transparent !important;
174
+ background-color: transparent;
162
175
  }
163
176
  .ant-select-tree-node-content-wrapper:hover {
164
- background-color: transparent !important;
177
+ background-color: transparent;
165
178
  }
166
179
  }
167
180
  .ant-select-tree .ant-select-tree-switcher:not(.ant-select-tree-switcher-noop):hover:before{
168
- background-color: transparent !important;
181
+ background-color: transparent;
169
182
  }
170
183
  .ant-select-selection-item{
171
- background: transparent !important;
184
+ background: transparent;
172
185
  }
173
186
  .cap-unified-tree-select .ant-select-selector:hover{
174
- border: 1px solid #7A869A !important;
187
+ border: 1px solid #7A869A;
175
188
  }
176
189
  .cap-unified-tree-select .ant-select-selector:focus{
177
- border: 1px solid #7A869A !important;
190
+ border: 1px solid #7A869A;
178
191
  }
179
192
  .cap-unified-tree-select .cap-unified-select-select-all-checkbox{
180
- height: 18px !important;
181
- width: 18px !important;
182
- border-color: #B3BAC5 !important;
183
- border-radius: 2px !important;
193
+ height: 18px;
194
+ width: 18px;
195
+ border-color: #B3BAC5;
196
+ border-radius: 2px;
184
197
  }
185
198
  .cap-unified-tree-select .select-popup-container .ant-select-tree-switcher-noop,
186
199
  .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-switcher-noop {
187
- display: none !important;
200
+ display: none;
188
201
  }
189
202
  .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-treenode{
190
- padding-left: 15px !important;
203
+ padding-left: 15px;
191
204
  }
192
205
  .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
193
- line-height: 40px !important;
194
- margin-bottom: 0px !important;
206
+ line-height: 40px;
207
+ margin-bottom: 0px;
195
208
  .ant-select-tree-checkbox .ant-select-tree-checkbox-inner{
196
- height: 18px !important;
197
- width: 18px !important;
198
- border: 2px solid #B3BAC5 !important;
209
+ height: 18px;
210
+ width: 18px;
211
+ border: 2px solid #B3BAC5;
199
212
  }
200
213
  &:hover{
201
- background-color: #FFFBE6 !important;
202
- border-radius: 4px !important;
214
+ background-color: #FFFBE6;
215
+ border-radius: 4px;
203
216
  }
204
217
  &:not(.ant-select-tree-treenode-disabled) .ant-select-tree-node-content-wrapper:hover{
205
- background-color: none !important;
218
+ background-color: none;
206
219
  }
207
220
  }
208
221
  .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-node-content-wrapper{
209
- border-radius: 0px !important;
210
- padding-left: 12px !important;
222
+ border-radius: 0px;
223
+ padding-left: 12px;
211
224
  }
212
225
  .ant-select-tree-treenode.ant-select-tree-treenode-selected{
213
- background-color: #E9F0FE !important;
214
- color: #2466EA !important;
226
+ background-color: #E9F0FE;
227
+ color: #2466EA;
215
228
  }
216
229
  .cap-unified-select-no-result{
217
230
  display: flex;
@@ -231,24 +244,24 @@ export const selectStyles = css`
231
244
  font-weight: 500;
232
245
  }
233
246
  .ant-tree-select:hover .ant-select-selector {
234
- border-color: #7A869A !important;
247
+ border-color: #7A869A;
235
248
  }
236
249
  .ant-tree-select-focused .ant-select-selector,
237
250
  .ant-tree-select-open .ant-select-selector {
238
- border-color: #7A869A !important;
239
- box-shadow: none !important;
240
- outline: none !important;
251
+ border-color: #7A869A;
252
+ box-shadow: none;
253
+ outline: none;
241
254
  }
242
255
  .cap-unified-select-search-container{
243
256
  border-bottom: 1px solid #EBECF0 !important;
244
257
  line-height: 40px !important;
245
258
  .ant-input-affix-wrapper{
246
- padding-left: 8px !important;
259
+ padding-left: 8px;
247
260
  }
248
261
  }
249
262
  .cap-unified-select-upload-button{
250
- border: none !important;
251
- padding-left: 15px !important;
263
+ border: none;
264
+ padding-left: 15px;
252
265
  }
253
266
  .cap-unified-select-confirm-container {
254
267
  display: flex;
@@ -267,42 +280,42 @@ export const selectStyles = css`
267
280
  width: 94px;
268
281
  }
269
282
  .cap-unified-select-confirm-button{
270
- background-color: #6ebd6e !important;
283
+ background-color: #6ebd6e;
271
284
  }
272
285
  .cap-unified-select-cancel-button{
273
- border: transparent !important;
274
- box-shadow: none !important;
286
+ border: transparent;
287
+ box-shadow: none;
275
288
  }
276
289
  }
277
290
  .cap-unified-select-selected-count {
278
291
  display: flex;
279
- margin-left: auto !important; /* pushes to far right */
280
- font-size: 12px !important;
281
- font-weight: 400 !important;
282
- line-height: 16px !important;
283
- color: #5E6C84 !important;
292
+ margin-left: auto; /* pushes to far right */
293
+ font-size: 12px;
294
+ font-weight: 400;
295
+ line-height: 16px;
296
+ color: #5E6C84;
284
297
  }
285
298
  .cap-unified-select-status{
286
- color: #E83135 !important;
299
+ color: #E83135;
287
300
  }
288
301
  .cap-unified-select-search-container {
289
302
  .ant-input-affix-wrapper {
290
- border: none !important;
291
- box-shadow: none !important;
292
- border-radius: 0 !important;
303
+ border: none;
304
+ box-shadow: none;
305
+ border-radius: 0;
293
306
  }
294
307
 
295
308
  .ant-input-affix-wrapper:hover {
296
- border: none !important;
297
- box-shadow: none !important;
298
- border-bottom: 1px solid #EBECF0 !important;
309
+ border: none;
310
+ box-shadow: none;
311
+ border-bottom: 1px solid #EBECF0;
299
312
  }
300
313
 
301
314
  .ant-input-affix-wrapper:focus-within {
302
- border: none !important;
303
- box-shadow: none !important;
304
- border-bottom: 1px solid #091E42 !important;
305
- outline: none !important;
315
+ border: none;
316
+ box-shadow: none;
317
+ border-bottom: 1px solid #091E42;
318
+ outline: none;
306
319
  }
307
320
 
308
321
  .ant-input {
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.44",
4
+ "version": "0.1.6-alpha.45",
5
5
  "description": "Capillary UI component library with Ant Design v5",
6
6
  "main": "./index.js",
7
7
  "sideEffects": [