@rescui/tag 0.10.10 → 0.10.12
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/lib/_virtual/close.js +8 -9
- package/lib/_virtual/index.css.js +7 -7
- package/lib/index.css +83 -138
- package/lib/parts/base-tag.js +29 -44
- package/lib/parts/base-tag.p.module.css.js +9 -9
- package/lib/parts/presets.js +7 -20
- package/lib/parts/removable-tag.js +21 -37
- package/lib/parts/removable-tag.p.module.css.js +12 -12
- package/lib/parts/sticky-tag.js +21 -39
- package/lib/parts/sticky-tag.p.module.css.js +11 -11
- package/lib/parts/tag.p.module.css.js +1 -1
- package/lib/tag.js +12 -27
- package/package.json +8 -9
package/lib/_virtual/close.js
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
2
|
-
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import cn from 'classnames';
|
|
6
5
|
import styles from './index.css.js';
|
|
7
|
-
|
|
8
|
-
var sizeStyles = {
|
|
6
|
+
const sizeStyles = {
|
|
9
7
|
"xs": styles.sizeXS,
|
|
10
8
|
"s": styles.sizeS,
|
|
11
9
|
"m": styles.sizeM,
|
|
12
10
|
"l": styles.sizeL
|
|
13
11
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
const CloseIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
13
|
+
let {
|
|
14
|
+
theme,
|
|
15
|
+
size,
|
|
16
|
+
className,
|
|
17
|
+
...props
|
|
18
|
+
} = _ref;
|
|
20
19
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
20
|
viewBox: "0 0 24 24"
|
|
22
21
|
}, props, {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"icon": "
|
|
3
|
-
"sizeXS": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"light": "
|
|
8
|
-
"dark": "
|
|
2
|
+
"icon": "_icon_ons1cf_4",
|
|
3
|
+
"sizeXS": "_sizeXS_ons1cf_14",
|
|
4
|
+
"sizeS": "_sizeS_ons1cf_18",
|
|
5
|
+
"sizeM": "_sizeM_ons1cf_22",
|
|
6
|
+
"sizeL": "_sizeL_ons1cf_26",
|
|
7
|
+
"light": "_light_ons1cf_30",
|
|
8
|
+
"dark": "_dark_ons1cf_34"
|
|
9
9
|
};
|
|
10
10
|
export { styles as default };
|
package/lib/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._icon_ons1cf_4{
|
|
2
2
|
--_rs-theme-dark:var(
|
|
3
3
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
4
4
|
var(--rs-theme-dark, 0)
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
9
9
|
}
|
|
10
10
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
11
|
-
.
|
|
11
|
+
._icon_ons1cf_4{
|
|
12
12
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
13
13
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
14
14
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
20
|
-
.
|
|
20
|
+
._icon_ons1cf_4{
|
|
21
21
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
22
22
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
23
23
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -25,66 +25,54 @@
|
|
|
25
25
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
._icon_ons1cf_4{
|
|
29
29
|
|
|
30
30
|
fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
|
|
31
31
|
|
|
32
32
|
width:auto;
|
|
33
33
|
height:var(--_rs-icons-height);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
._sizeXS_ons1cf_14{
|
|
36
36
|
--_rs-icons-height:16px;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
._sizeS_ons1cf_18{
|
|
39
39
|
--_rs-icons-height:20px;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
._sizeM_ons1cf_22{
|
|
42
42
|
--_rs-icons-height:24px;
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
._sizeL_ons1cf_26{
|
|
45
45
|
--_rs-icons-height:28px;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
._light_ons1cf_30{
|
|
48
48
|
--rs-theme-dark:0;
|
|
49
49
|
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
._dark_ons1cf_34{
|
|
52
52
|
--rs-theme-dark:1;
|
|
53
53
|
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
54
54
|
}
|
|
55
|
-
@-webkit-keyframes rs-icon-rotate{
|
|
56
|
-
from{
|
|
57
|
-
-webkit-transform:rotate(0deg);
|
|
58
|
-
transform:rotate(0deg);
|
|
59
|
-
}
|
|
60
|
-
to{
|
|
61
|
-
-webkit-transform:rotate(360deg);
|
|
62
|
-
transform:rotate(360deg);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
55
|
@keyframes rs-icon-rotate{
|
|
66
56
|
from{
|
|
67
|
-
|
|
68
|
-
transform:rotate(0deg);
|
|
57
|
+
transform:rotate(0deg);
|
|
69
58
|
}
|
|
70
59
|
to{
|
|
71
|
-
|
|
72
|
-
transform:rotate(360deg);
|
|
60
|
+
transform:rotate(360deg);
|
|
73
61
|
}
|
|
74
62
|
}
|
|
75
|
-
.
|
|
63
|
+
._alignIconLeft_1n1e1cd_7{
|
|
76
64
|
--_rs-tag-flex-direction:row;
|
|
77
65
|
}
|
|
78
|
-
.
|
|
66
|
+
._alignIconRight_1n1e1cd_10{
|
|
79
67
|
--_rs-tag-flex-direction:row-reverse;
|
|
80
68
|
}
|
|
81
|
-
.
|
|
69
|
+
._uppercase_1n1e1cd_14{
|
|
82
70
|
--_rs-tag-text-transform:uppercase;
|
|
83
71
|
--_rs-tag-horizontal-padding-or-initial:var(
|
|
84
72
|
--_rs-tag-uppercase-horizontal-padding
|
|
85
73
|
);
|
|
86
74
|
}
|
|
87
|
-
.
|
|
75
|
+
._sizeXs_1n1e1cd_18{
|
|
88
76
|
--_rs-tag-vertical-padding:2px;
|
|
89
77
|
--_rs-tag-base-horizontal-padding:8px;
|
|
90
78
|
--_rs-tag-uppercase-horizontal-padding:var(
|
|
@@ -125,7 +113,7 @@
|
|
|
125
113
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
126
114
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
127
115
|
}
|
|
128
|
-
.
|
|
116
|
+
._sizeS_1n1e1cd_21{
|
|
129
117
|
--_rs-tag-vertical-padding:4px;
|
|
130
118
|
--_rs-tag-base-horizontal-padding:8px;
|
|
131
119
|
--_rs-tag-uppercase-horizontal-padding:10px;
|
|
@@ -164,7 +152,7 @@
|
|
|
164
152
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
165
153
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
166
154
|
}
|
|
167
|
-
.
|
|
155
|
+
._sizeM_1n1e1cd_24{
|
|
168
156
|
--_rs-tag-vertical-padding:6px;
|
|
169
157
|
--_rs-tag-base-horizontal-padding:12px;
|
|
170
158
|
--_rs-tag-uppercase-horizontal-padding:var(
|
|
@@ -206,11 +194,11 @@
|
|
|
206
194
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
207
195
|
}
|
|
208
196
|
@media screen and (max-width: 640px){
|
|
209
|
-
.
|
|
197
|
+
._sizeM_1n1e1cd_24{
|
|
210
198
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
211
199
|
}
|
|
212
200
|
}
|
|
213
|
-
.
|
|
201
|
+
._sizeL_1n1e1cd_27{
|
|
214
202
|
--_rs-tag-vertical-padding:8px;
|
|
215
203
|
--_rs-tag-base-horizontal-padding:16px;
|
|
216
204
|
--_rs-tag-uppercase-horizontal-padding:var(
|
|
@@ -252,11 +240,11 @@
|
|
|
252
240
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
253
241
|
}
|
|
254
242
|
@media screen and (max-width: 640px){
|
|
255
|
-
.
|
|
243
|
+
._sizeL_1n1e1cd_27{
|
|
256
244
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
257
245
|
}
|
|
258
246
|
}
|
|
259
|
-
.
|
|
247
|
+
._main_1n1e1cd_31{
|
|
260
248
|
--_rs-tag-border-width:1px;
|
|
261
249
|
|
|
262
250
|
--_rs-tag-horizontal-padding:var(
|
|
@@ -273,30 +261,16 @@
|
|
|
273
261
|
font-weight:var(--_rs-typography-font-weight);
|
|
274
262
|
line-height:var(--_rs-typography-line-height);
|
|
275
263
|
font-variant-numeric:var(--_rs-typography-font-variant-numeric);
|
|
276
|
-
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
277
264
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
278
265
|
|
|
279
266
|
position:relative;
|
|
280
267
|
|
|
281
|
-
display:-webkit-inline-box;
|
|
282
|
-
|
|
283
|
-
display:-ms-inline-flexbox;
|
|
284
|
-
|
|
285
268
|
display:inline-flex;
|
|
286
|
-
-
|
|
287
|
-
-
|
|
288
|
-
|
|
289
|
-
flex-direction:var(--_rs-tag-flex-direction);
|
|
290
|
-
-webkit-box-pack:center;
|
|
291
|
-
-ms-flex-pack:center;
|
|
292
|
-
justify-content:center;
|
|
293
|
-
-webkit-box-align:center;
|
|
294
|
-
-ms-flex-align:center;
|
|
295
|
-
align-items:center;
|
|
269
|
+
flex-direction:var(--_rs-tag-flex-direction);
|
|
270
|
+
justify-content:center;
|
|
271
|
+
align-items:center;
|
|
296
272
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
box-sizing:border-box;
|
|
273
|
+
box-sizing:border-box;
|
|
300
274
|
|
|
301
275
|
padding:calc(var(--_rs-tag-vertical-padding) - var(--_rs-tag-border-width)) calc(var(--_rs-tag-horizontal-padding) - var(--_rs-tag-border-width));
|
|
302
276
|
|
|
@@ -311,24 +285,24 @@
|
|
|
311
285
|
background:transparent;
|
|
312
286
|
gap:8px;
|
|
313
287
|
}
|
|
314
|
-
.
|
|
288
|
+
._main_1n1e1cd_31 ._icon_1n1e1cd_60{
|
|
315
289
|
fill:currentColor;
|
|
316
290
|
|
|
317
291
|
width:auto;
|
|
318
292
|
height:var(--_rs-tag-icon-size);
|
|
319
293
|
}
|
|
320
294
|
|
|
321
|
-
.
|
|
295
|
+
._main_1qo41x7_1{
|
|
322
296
|
border-radius:var(--_rs-tag-border-radius);
|
|
323
297
|
}
|
|
324
298
|
|
|
325
|
-
.
|
|
299
|
+
._themeLight_1dan2h7_7{
|
|
326
300
|
--rs-theme-dark:0;
|
|
327
301
|
}
|
|
328
|
-
.
|
|
302
|
+
._themeDark_1dan2h7_10{
|
|
329
303
|
--rs-theme-dark:1;
|
|
330
304
|
}
|
|
331
|
-
.
|
|
305
|
+
._sizeXs_1dan2h7_14{
|
|
332
306
|
--_rs-tag-removable-vertical-padding:2px;
|
|
333
307
|
--_rs-tag-removable-left-padding:8px;
|
|
334
308
|
--_rs-tag-removable-right-padding:2px;
|
|
@@ -336,10 +310,10 @@
|
|
|
336
310
|
--_rs-tag-removable-close-icon-size:28px;
|
|
337
311
|
--_rs-tag-removable-custom-icon-size:20px;
|
|
338
312
|
}
|
|
339
|
-
.
|
|
313
|
+
._sizeXs_1dan2h7_14 [data-rs-internal="removable-tag__close-icon"]:not(html){
|
|
340
314
|
--_rs-icons-height:20px;
|
|
341
315
|
}
|
|
342
|
-
.
|
|
316
|
+
._sizeXs_1dan2h7_14 {
|
|
343
317
|
--_rs-typography-letter-spacing:0.0045em;
|
|
344
318
|
--_rs-typography-text-transform:initial;
|
|
345
319
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -373,7 +347,7 @@
|
|
|
373
347
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
374
348
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
375
349
|
}
|
|
376
|
-
.
|
|
350
|
+
._sizeS_1dan2h7_17{
|
|
377
351
|
--_rs-tag-removable-vertical-padding:4px;
|
|
378
352
|
--_rs-tag-removable-left-padding:8px;
|
|
379
353
|
--_rs-tag-removable-right-padding:2px;
|
|
@@ -381,10 +355,10 @@
|
|
|
381
355
|
--_rs-tag-removable-close-icon-size:28px;
|
|
382
356
|
--_rs-tag-removable-custom-icon-size:20px;
|
|
383
357
|
}
|
|
384
|
-
.
|
|
358
|
+
._sizeS_1dan2h7_17 [data-rs-internal="removable-tag__close-icon"]:not(html){
|
|
385
359
|
--_rs-icons-height:20px;
|
|
386
360
|
}
|
|
387
|
-
.
|
|
361
|
+
._sizeS_1dan2h7_17 {
|
|
388
362
|
--_rs-typography-letter-spacing:0.0045em;
|
|
389
363
|
--_rs-typography-text-transform:initial;
|
|
390
364
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -418,7 +392,7 @@
|
|
|
418
392
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
419
393
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
420
394
|
}
|
|
421
|
-
.
|
|
395
|
+
._sizeM_1dan2h7_20{
|
|
422
396
|
--_rs-tag-removable-vertical-padding:6px;
|
|
423
397
|
--_rs-tag-removable-left-padding:12px;
|
|
424
398
|
--_rs-tag-removable-right-padding:2px;
|
|
@@ -426,10 +400,10 @@
|
|
|
426
400
|
--_rs-tag-removable-close-icon-size:36px;
|
|
427
401
|
--_rs-tag-removable-custom-icon-size:24px;
|
|
428
402
|
}
|
|
429
|
-
.
|
|
403
|
+
._sizeM_1dan2h7_20 [data-rs-internal="removable-tag__close-icon"]:not(html){
|
|
430
404
|
--_rs-icons-height:24px;
|
|
431
405
|
}
|
|
432
|
-
.
|
|
406
|
+
._sizeM_1dan2h7_20 {
|
|
433
407
|
--_rs-typography-letter-spacing:0.0015em;
|
|
434
408
|
--_rs-typography-text-transform:initial;
|
|
435
409
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -464,11 +438,11 @@
|
|
|
464
438
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
465
439
|
}
|
|
466
440
|
@media screen and (max-width: 640px){
|
|
467
|
-
.
|
|
441
|
+
._sizeM_1dan2h7_20 {
|
|
468
442
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
469
443
|
}
|
|
470
444
|
}
|
|
471
|
-
.
|
|
445
|
+
._sizeL_1dan2h7_23{
|
|
472
446
|
--_rs-tag-removable-vertical-padding:8px;
|
|
473
447
|
--_rs-tag-removable-left-padding:16px;
|
|
474
448
|
--_rs-tag-removable-right-padding:4px;
|
|
@@ -476,10 +450,10 @@
|
|
|
476
450
|
--_rs-tag-removable-close-icon-size:44px;
|
|
477
451
|
--_rs-tag-removable-custom-icon-size:28px;
|
|
478
452
|
}
|
|
479
|
-
.
|
|
453
|
+
._sizeL_1dan2h7_23 [data-rs-internal="removable-tag__close-icon"]:not(html){
|
|
480
454
|
--_rs-icons-height:28px;
|
|
481
455
|
}
|
|
482
|
-
.
|
|
456
|
+
._sizeL_1dan2h7_23 {
|
|
483
457
|
--_rs-typography-letter-spacing:normal;
|
|
484
458
|
--_rs-typography-text-transform:initial;
|
|
485
459
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -514,11 +488,11 @@
|
|
|
514
488
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
515
489
|
}
|
|
516
490
|
@media screen and (max-width: 640px){
|
|
517
|
-
.
|
|
491
|
+
._sizeL_1dan2h7_23 {
|
|
518
492
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
519
493
|
}
|
|
520
494
|
}
|
|
521
|
-
.
|
|
495
|
+
._wrapper_1dan2h7_27{
|
|
522
496
|
--_rs-theme-dark:var(
|
|
523
497
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
524
498
|
var(--rs-theme-dark, 0)
|
|
@@ -528,7 +502,7 @@
|
|
|
528
502
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
529
503
|
}
|
|
530
504
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
531
|
-
.
|
|
505
|
+
._wrapper_1dan2h7_27{
|
|
532
506
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
533
507
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
534
508
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -537,7 +511,7 @@
|
|
|
537
511
|
}
|
|
538
512
|
}
|
|
539
513
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
540
|
-
.
|
|
514
|
+
._wrapper_1dan2h7_27{
|
|
541
515
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
542
516
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
543
517
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -545,7 +519,7 @@
|
|
|
545
519
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
546
520
|
}
|
|
547
521
|
}
|
|
548
|
-
.
|
|
522
|
+
._wrapper_1dan2h7_27 {
|
|
549
523
|
letter-spacing:var(
|
|
550
524
|
--rs-text-base-letter-spacing,
|
|
551
525
|
var(--_rs-typography-letter-spacing)
|
|
@@ -556,7 +530,6 @@
|
|
|
556
530
|
font-weight:var(--_rs-typography-font-weight);
|
|
557
531
|
line-height:var(--_rs-typography-line-height);
|
|
558
532
|
font-variant-numeric:var(--_rs-typography-font-variant-numeric);
|
|
559
|
-
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
560
533
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
561
534
|
color:var(
|
|
562
535
|
--rs-color-average,
|
|
@@ -565,10 +538,6 @@
|
|
|
565
538
|
|
|
566
539
|
position:relative;
|
|
567
540
|
|
|
568
|
-
display:-webkit-inline-box;
|
|
569
|
-
|
|
570
|
-
display:-ms-inline-flexbox;
|
|
571
|
-
|
|
572
541
|
display:inline-flex;
|
|
573
542
|
|
|
574
543
|
padding-left:var(--_rs-tag-removable-left-padding);
|
|
@@ -579,29 +548,21 @@
|
|
|
579
548
|
|
|
580
549
|
background-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
|
|
581
550
|
}
|
|
582
|
-
.
|
|
551
|
+
._wrapper_1dan2h7_27 > *{
|
|
583
552
|
vertical-align:top;
|
|
584
553
|
}
|
|
585
|
-
.
|
|
554
|
+
._disabled_1dan2h7_50{
|
|
586
555
|
pointer-events:none;
|
|
587
556
|
color:var(
|
|
588
557
|
--rs-color-pale,
|
|
589
558
|
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
|
|
590
559
|
);
|
|
591
560
|
}
|
|
592
|
-
.
|
|
593
|
-
display:-webkit-inline-box;
|
|
594
|
-
display:-ms-inline-flexbox;
|
|
561
|
+
._main_1dan2h7_55{
|
|
595
562
|
display:inline-flex;
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
-webkit-box-pack:center;
|
|
600
|
-
-ms-flex-pack:center;
|
|
601
|
-
justify-content:center;
|
|
602
|
-
-webkit-box-align:center;
|
|
603
|
-
-ms-flex-align:center;
|
|
604
|
-
align-items:center;
|
|
563
|
+
flex:1 1 auto;
|
|
564
|
+
justify-content:center;
|
|
565
|
+
align-items:center;
|
|
605
566
|
|
|
606
567
|
padding-top:var(--_rs-tag-removable-vertical-padding);
|
|
607
568
|
padding-right:var(--_rs-tag-removable-right-padding);
|
|
@@ -611,29 +572,19 @@
|
|
|
611
572
|
|
|
612
573
|
background:transparent;
|
|
613
574
|
}
|
|
614
|
-
.
|
|
575
|
+
._wrap_1dan2h7_27 ._main_1dan2h7_55{
|
|
615
576
|
white-space:normal;
|
|
616
577
|
}
|
|
617
|
-
.
|
|
578
|
+
._close_1dan2h7_74{
|
|
618
579
|
top:0;
|
|
619
580
|
right:0;
|
|
620
581
|
bottom:0;
|
|
621
582
|
|
|
622
|
-
display:-webkit-inline-box;
|
|
623
|
-
|
|
624
|
-
display:-ms-inline-flexbox;
|
|
625
|
-
|
|
626
583
|
display:inline-flex;
|
|
627
584
|
overflow:visible;
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
-webkit-box-pack:center;
|
|
632
|
-
-ms-flex-pack:center;
|
|
633
|
-
justify-content:center;
|
|
634
|
-
-webkit-box-align:center;
|
|
635
|
-
-ms-flex-align:center;
|
|
636
|
-
align-items:center;
|
|
585
|
+
flex:1 0 auto;
|
|
586
|
+
justify-content:center;
|
|
587
|
+
align-items:center;
|
|
637
588
|
|
|
638
589
|
width:var(--_rs-tag-removable-close-icon-size);
|
|
639
590
|
height:auto;
|
|
@@ -652,37 +603,34 @@
|
|
|
652
603
|
-webkit-font-smoothing:inherit;
|
|
653
604
|
-moz-osx-font-smoothing:inherit;
|
|
654
605
|
}
|
|
655
|
-
.
|
|
606
|
+
._close_1dan2h7_74::-moz-focus-inner{
|
|
656
607
|
padding:0;
|
|
657
608
|
|
|
658
609
|
border:0;
|
|
659
610
|
}
|
|
660
|
-
.
|
|
661
|
-
.
|
|
662
|
-
.
|
|
611
|
+
._close_1dan2h7_74:active,
|
|
612
|
+
._close_1dan2h7_74:hover,
|
|
613
|
+
._close_1dan2h7_74:focus{
|
|
663
614
|
outline:none;
|
|
664
615
|
|
|
665
616
|
text-decoration:none;
|
|
666
617
|
}
|
|
667
|
-
.
|
|
618
|
+
._close_1dan2h7_74:hover{
|
|
668
619
|
color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
669
620
|
background-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
|
|
670
621
|
}
|
|
671
|
-
.
|
|
622
|
+
._close_1dan2h7_74:active{
|
|
672
623
|
color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
673
624
|
background-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
|
|
674
625
|
}
|
|
675
|
-
.
|
|
676
|
-
|
|
677
|
-
box-shadow:inset 0 0 0 4px var(--_rs-color-primary-dim);
|
|
626
|
+
._close_1dan2h7_74:focus[data-focus-method='key']{
|
|
627
|
+
box-shadow:inset 0 0 0 4px var(--_rs-color-primary-dim);
|
|
678
628
|
}
|
|
679
|
-
.
|
|
629
|
+
._disabled_1dan2h7_50 ._close_1dan2h7_74{
|
|
680
630
|
pointer-events:none;
|
|
681
631
|
}
|
|
682
|
-
.
|
|
683
|
-
|
|
684
|
-
-ms-flex:1 0 auto;
|
|
685
|
-
flex:1 0 auto;
|
|
632
|
+
._icon_1dan2h7_135{
|
|
633
|
+
flex:1 0 auto;
|
|
686
634
|
|
|
687
635
|
width:auto;
|
|
688
636
|
height:var(--_rs-tag-removable-custom-icon-size);
|
|
@@ -694,55 +642,55 @@
|
|
|
694
642
|
fill:currentColor;
|
|
695
643
|
}
|
|
696
644
|
|
|
697
|
-
.
|
|
645
|
+
._wrapper_1a2lqmx_3{
|
|
698
646
|
position:relative;
|
|
699
647
|
}
|
|
700
|
-
.
|
|
648
|
+
._offset16_1a2lqmx_7{
|
|
701
649
|
--_rs-tag-sticky-side-offset:16px;
|
|
702
650
|
}
|
|
703
|
-
.
|
|
651
|
+
._offset24_1a2lqmx_10{
|
|
704
652
|
--_rs-tag-sticky-side-offset:24px;
|
|
705
653
|
}
|
|
706
|
-
.
|
|
654
|
+
._offset32_1a2lqmx_13{
|
|
707
655
|
--_rs-tag-sticky-side-offset:32px;
|
|
708
656
|
}
|
|
709
|
-
.
|
|
657
|
+
._alignTop_1a2lqmx_17{
|
|
710
658
|
--_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius) var(--_rs-tag-border-radius) 0 0;
|
|
711
659
|
--_rs-tag-sticky-translate-y:-100%;
|
|
712
660
|
}
|
|
713
|
-
.
|
|
661
|
+
._alignMiddle_1a2lqmx_20{
|
|
714
662
|
--_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius);
|
|
715
663
|
--_rs-tag-sticky-translate-y:-50%;
|
|
716
664
|
}
|
|
717
|
-
.
|
|
665
|
+
._topStart_1a2lqmx_24{
|
|
718
666
|
--_rs-tag-sticky-top:0;
|
|
719
667
|
--_rs-tag-sticky-right:initial;
|
|
720
668
|
--_rs-tag-sticky-left:var(--_rs-tag-sticky-side-offset);
|
|
721
669
|
--_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
|
|
722
670
|
--_rs-tag-sticky-transform-origin:initial;
|
|
723
671
|
}
|
|
724
|
-
.
|
|
672
|
+
._topEnd_1a2lqmx_27{
|
|
725
673
|
--_rs-tag-sticky-top:0;
|
|
726
674
|
--_rs-tag-sticky-right:var(--_rs-tag-sticky-side-offset);
|
|
727
675
|
--_rs-tag-sticky-left:initial;
|
|
728
676
|
--_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
|
|
729
677
|
--_rs-tag-sticky-transform-origin:initial;
|
|
730
678
|
}
|
|
731
|
-
.
|
|
679
|
+
._leftStart_1a2lqmx_30{
|
|
732
680
|
--_rs-tag-sticky-top:var(--_rs-tag-sticky-side-offset);
|
|
733
681
|
--_rs-tag-sticky-right:100%;
|
|
734
682
|
--_rs-tag-sticky-left:initial;
|
|
735
683
|
--_rs-tag-sticky-transform:rotate(270deg) translate(0, var(--_rs-tag-sticky-translate-y));
|
|
736
684
|
--_rs-tag-sticky-transform-origin:100% 0;
|
|
737
685
|
}
|
|
738
|
-
.
|
|
686
|
+
._leftEnd_1a2lqmx_33{
|
|
739
687
|
--_rs-tag-sticky-top:calc(100% - var(--_rs-tag-sticky-side-offset));
|
|
740
688
|
--_rs-tag-sticky-right:100%;
|
|
741
689
|
--_rs-tag-sticky-left:initial;
|
|
742
690
|
--_rs-tag-sticky-transform:rotate(270deg) translate(100%, var(--_rs-tag-sticky-translate-y));
|
|
743
691
|
--_rs-tag-sticky-transform-origin:100% 0;
|
|
744
692
|
}
|
|
745
|
-
.
|
|
693
|
+
._tag_1a2lqmx_37{
|
|
746
694
|
position:absolute;
|
|
747
695
|
top:var(--_rs-tag-sticky-top);
|
|
748
696
|
right:var(--_rs-tag-sticky-right);
|
|
@@ -750,9 +698,6 @@
|
|
|
750
698
|
|
|
751
699
|
border-radius:var(--_rs-tag-sticky-border-radius);
|
|
752
700
|
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
transform:var(--_rs-tag-sticky-transform);
|
|
756
|
-
-webkit-transform-origin:var(--_rs-tag-sticky-transform-origin);
|
|
757
|
-
transform-origin:var(--_rs-tag-sticky-transform-origin);
|
|
701
|
+
transform:var(--_rs-tag-sticky-transform);
|
|
702
|
+
transform-origin:var(--_rs-tag-sticky-transform-origin);
|
|
758
703
|
}
|
package/lib/parts/base-tag.js
CHANGED
|
@@ -1,63 +1,48 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["className", "children", "size", "icon", "iconPosition", "isUppercase", "color", "backgroundColor", "borderColor", "style"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React, { cloneElement } from 'react';
|
|
17
2
|
import cn from 'classnames';
|
|
18
3
|
import PropTypes from 'prop-types';
|
|
19
4
|
import styles from './base-tag.p.module.css.js';
|
|
20
|
-
|
|
5
|
+
const SIZE_STYLES = {
|
|
21
6
|
xs: styles.sizeXs,
|
|
22
7
|
s: styles.sizeS,
|
|
23
8
|
m: styles.sizeM,
|
|
24
9
|
l: styles.sizeL
|
|
25
10
|
};
|
|
26
|
-
|
|
11
|
+
const ICON_POSITION_STYLES = {
|
|
27
12
|
left: styles.alignIconLeft,
|
|
28
13
|
right: styles.alignIconRight
|
|
29
14
|
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var iconSlot = withIcon && /*#__PURE__*/cloneElement(icon, {
|
|
15
|
+
const BaseTag = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
|
|
16
|
+
(_ref, ref) => {
|
|
17
|
+
let {
|
|
18
|
+
className,
|
|
19
|
+
children,
|
|
20
|
+
size = 'xs',
|
|
21
|
+
icon,
|
|
22
|
+
iconPosition = 'left',
|
|
23
|
+
isUppercase,
|
|
24
|
+
color,
|
|
25
|
+
backgroundColor,
|
|
26
|
+
borderColor,
|
|
27
|
+
style,
|
|
28
|
+
...restProps
|
|
29
|
+
} = _ref;
|
|
30
|
+
const withIcon = /*#__PURE__*/React.isValidElement(icon);
|
|
31
|
+
const iconSlot = withIcon && /*#__PURE__*/cloneElement(icon, {
|
|
48
32
|
className: cn(icon.props.className, styles.icon)
|
|
49
33
|
});
|
|
50
|
-
return /*#__PURE__*/React.createElement("span",
|
|
51
|
-
"data-test": 'tag'
|
|
52
|
-
|
|
34
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
35
|
+
"data-test": 'tag',
|
|
36
|
+
...restProps,
|
|
53
37
|
ref: ref,
|
|
54
38
|
className: cn(styles.main, SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition], withIcon && styles.withIcon, isUppercase && styles.uppercase, className),
|
|
55
|
-
style:
|
|
56
|
-
color
|
|
57
|
-
backgroundColor
|
|
58
|
-
borderColor
|
|
59
|
-
|
|
60
|
-
|
|
39
|
+
style: {
|
|
40
|
+
color,
|
|
41
|
+
backgroundColor,
|
|
42
|
+
borderColor,
|
|
43
|
+
...style
|
|
44
|
+
}
|
|
45
|
+
}, iconSlot, children);
|
|
61
46
|
});
|
|
62
47
|
BaseTag.displayName = 'BaseTag';
|
|
63
48
|
BaseTag.propTypes = {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"alignIconLeft": "
|
|
3
|
-
"alignIconRight": "
|
|
4
|
-
"uppercase": "
|
|
5
|
-
"sizeXs": "
|
|
6
|
-
"sizeS": "
|
|
7
|
-
"sizeM": "
|
|
8
|
-
"sizeL": "
|
|
9
|
-
"main": "
|
|
10
|
-
"icon": "
|
|
2
|
+
"alignIconLeft": "_alignIconLeft_1n1e1cd_7",
|
|
3
|
+
"alignIconRight": "_alignIconRight_1n1e1cd_10",
|
|
4
|
+
"uppercase": "_uppercase_1n1e1cd_14",
|
|
5
|
+
"sizeXs": "_sizeXs_1n1e1cd_18",
|
|
6
|
+
"sizeS": "_sizeS_1n1e1cd_21",
|
|
7
|
+
"sizeM": "_sizeM_1n1e1cd_24",
|
|
8
|
+
"sizeL": "_sizeL_1n1e1cd_27",
|
|
9
|
+
"main": "_main_1n1e1cd_31",
|
|
10
|
+
"icon": "_icon_1n1e1cd_60"
|
|
11
11
|
};
|
|
12
12
|
export { styles as default };
|
package/lib/parts/presets.js
CHANGED
|
@@ -1,24 +1,11 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
|
-
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
|
-
|
|
14
1
|
import { RS_COLOR_WHITE, RS_COLOR_PRIMARY_LIGHT_THEME, RS_COLOR_BLACK, RS_COLOR_BLACK_T70, RS_COLOR_BLACK_T10, RS_COLOR_PRIMARY_DARK_THEME, RS_COLOR_WHITE_T70, RS_COLOR_WHITE_T10 } from '@rescui/colors';
|
|
15
|
-
|
|
2
|
+
const presetsLight = {
|
|
16
3
|
/**
|
|
17
4
|
* Primary background
|
|
18
5
|
*/
|
|
19
6
|
'classic-light': {
|
|
20
7
|
color: RS_COLOR_WHITE,
|
|
21
|
-
backgroundColor:
|
|
8
|
+
backgroundColor: `var(--rs-color-primary-light-theme, ${RS_COLOR_PRIMARY_LIGHT_THEME})`
|
|
22
9
|
},
|
|
23
10
|
|
|
24
11
|
/**
|
|
@@ -45,13 +32,13 @@ var presetsLight = {
|
|
|
45
32
|
borderColor: RS_COLOR_BLACK
|
|
46
33
|
}
|
|
47
34
|
};
|
|
48
|
-
|
|
35
|
+
const presetsDark = {
|
|
49
36
|
/**
|
|
50
37
|
* Primary background
|
|
51
38
|
*/
|
|
52
39
|
'classic-dark': {
|
|
53
40
|
color: RS_COLOR_WHITE,
|
|
54
|
-
backgroundColor:
|
|
41
|
+
backgroundColor: `var(--rs-color-primary-dark-theme, ${RS_COLOR_PRIMARY_DARK_THEME})`
|
|
55
42
|
},
|
|
56
43
|
|
|
57
44
|
/**
|
|
@@ -78,8 +65,9 @@ var presetsDark = {
|
|
|
78
65
|
borderColor: RS_COLOR_WHITE
|
|
79
66
|
}
|
|
80
67
|
};
|
|
68
|
+
const presets = { ...presetsLight,
|
|
69
|
+
...presetsDark,
|
|
81
70
|
|
|
82
|
-
var presets = _objectSpread(_objectSpread(_objectSpread({}, presetsLight), presetsDark), {}, {
|
|
83
71
|
/**
|
|
84
72
|
* Primary background
|
|
85
73
|
* @deprecated use 'classic-light' instead
|
|
@@ -127,6 +115,5 @@ var presets = _objectSpread(_objectSpread(_objectSpread({}, presetsLight), prese
|
|
|
127
115
|
* @deprecated use 'outline-dark' instead
|
|
128
116
|
*/
|
|
129
117
|
outlineDark: presetsDark['outline-dark']
|
|
130
|
-
}
|
|
131
|
-
|
|
118
|
+
};
|
|
132
119
|
export { presets };
|
|
@@ -1,55 +1,39 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["className", "disabled", "size", "theme", "children", "icon", "onRemoveClick", "wrap"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React, { cloneElement } from 'react';
|
|
17
2
|
import PropTypes from 'prop-types';
|
|
18
3
|
import cn from 'classnames';
|
|
19
4
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
20
5
|
import CloseIcon from '../_virtual/close.js';
|
|
21
6
|
import styles from './removable-tag.p.module.css.js';
|
|
22
|
-
|
|
7
|
+
const SIZE_STYLES = {
|
|
23
8
|
xs: styles.sizeXs,
|
|
24
9
|
s: styles.sizeS,
|
|
25
10
|
m: styles.sizeM,
|
|
26
11
|
l: styles.sizeL
|
|
27
12
|
};
|
|
28
|
-
|
|
13
|
+
const THEME_STYLES = {
|
|
29
14
|
light: styles.themeLight,
|
|
30
15
|
dark: styles.themeDark
|
|
31
16
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
|
|
17
|
+
const RemovableTag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
|
|
18
|
+
let {
|
|
19
|
+
className,
|
|
20
|
+
disabled,
|
|
21
|
+
size = 'xs',
|
|
22
|
+
theme: themeFromProps,
|
|
23
|
+
children,
|
|
24
|
+
icon,
|
|
25
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
26
|
+
onRemoveClick = () => {},
|
|
27
|
+
wrap = false,
|
|
28
|
+
...restProps
|
|
29
|
+
} = _ref;
|
|
30
|
+
const theme = useThemeWithUndefined(themeFromProps);
|
|
31
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
48
32
|
className: cn(styles.wrapper, SIZE_STYLES[size], THEME_STYLES[theme], disabled && styles.disabled, wrap && styles.wrap, className),
|
|
49
|
-
"data-test": 'removable-tag-wrapper'
|
|
50
|
-
|
|
33
|
+
"data-test": 'removable-tag-wrapper',
|
|
34
|
+
...restProps,
|
|
51
35
|
ref: ref
|
|
52
|
-
}
|
|
36
|
+
}, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
|
|
53
37
|
className: cn(icon.props.className, styles.icon)
|
|
54
38
|
}), /*#__PURE__*/React.createElement("span", {
|
|
55
39
|
className: styles.main,
|
|
@@ -59,7 +43,7 @@ var RemovableTag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
|
|
|
59
43
|
"data-test": "removable-tag-remove-icon",
|
|
60
44
|
className: styles.close,
|
|
61
45
|
tabIndex: disabled ? -1 : 0,
|
|
62
|
-
onClick:
|
|
46
|
+
onClick: e => {
|
|
63
47
|
e.stopPropagation();
|
|
64
48
|
onRemoveClick();
|
|
65
49
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeXs": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"wrapper": "
|
|
9
|
-
"disabled": "
|
|
10
|
-
"main": "
|
|
11
|
-
"wrap": "
|
|
12
|
-
"close": "
|
|
13
|
-
"icon": "
|
|
2
|
+
"themeLight": "_themeLight_1dan2h7_7",
|
|
3
|
+
"themeDark": "_themeDark_1dan2h7_10",
|
|
4
|
+
"sizeXs": "_sizeXs_1dan2h7_14",
|
|
5
|
+
"sizeS": "_sizeS_1dan2h7_17",
|
|
6
|
+
"sizeM": "_sizeM_1dan2h7_20",
|
|
7
|
+
"sizeL": "_sizeL_1dan2h7_23",
|
|
8
|
+
"wrapper": "_wrapper_1dan2h7_27",
|
|
9
|
+
"disabled": "_disabled_1dan2h7_50",
|
|
10
|
+
"main": "_main_1dan2h7_55",
|
|
11
|
+
"wrap": "_wrap_1dan2h7_27",
|
|
12
|
+
"close": "_close_1dan2h7_74",
|
|
13
|
+
"icon": "_icon_1dan2h7_135"
|
|
14
14
|
};
|
|
15
15
|
export { styles as default };
|
package/lib/parts/sticky-tag.js
CHANGED
|
@@ -1,65 +1,47 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["className", "wrapperClassName", "content", "children", "size", "placement", "align", "offset"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React from 'react';
|
|
17
2
|
import cn from 'classnames';
|
|
18
3
|
import PropTypes from 'prop-types';
|
|
19
4
|
import { BaseTag } from './base-tag.js';
|
|
20
5
|
import styles from './sticky-tag.p.module.css.js';
|
|
21
|
-
|
|
22
|
-
|
|
6
|
+
const DEFAULT_OFFSET = 24;
|
|
7
|
+
const PLACEMENT_STYLES = {
|
|
23
8
|
'top-start': styles.topStart,
|
|
24
9
|
'top-end': styles.topEnd,
|
|
25
10
|
'left-start': styles.leftStart,
|
|
26
11
|
'left-end': styles.leftEnd
|
|
27
12
|
};
|
|
28
|
-
|
|
13
|
+
const ALIGN_STYLES = {
|
|
29
14
|
top: styles.alignTop,
|
|
30
15
|
middle: styles.alignMiddle
|
|
31
16
|
};
|
|
32
|
-
|
|
17
|
+
const OFFSET_STYLES = {
|
|
33
18
|
16: styles.offset16,
|
|
34
19
|
24: styles.offset24,
|
|
35
20
|
32: styles.offset32
|
|
36
21
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
51
|
-
|
|
52
|
-
var offsetCn = offset in OFFSET_STYLES ? OFFSET_STYLES[offset] : OFFSET_STYLES[DEFAULT_OFFSET];
|
|
22
|
+
const StickyTag = /*#__PURE__*/React.forwardRef(function StickyTag(_ref, ref) {
|
|
23
|
+
let {
|
|
24
|
+
className,
|
|
25
|
+
wrapperClassName,
|
|
26
|
+
content,
|
|
27
|
+
children,
|
|
28
|
+
size = 'xs',
|
|
29
|
+
placement = 'top-end',
|
|
30
|
+
align = 'top',
|
|
31
|
+
offset = DEFAULT_OFFSET,
|
|
32
|
+
...restProps
|
|
33
|
+
} = _ref;
|
|
34
|
+
const offsetCn = offset in OFFSET_STYLES ? OFFSET_STYLES[offset] : OFFSET_STYLES[DEFAULT_OFFSET];
|
|
53
35
|
return /*#__PURE__*/React.createElement("div", {
|
|
54
36
|
className: cn(styles.wrapper, wrapperClassName),
|
|
55
37
|
"data-test": 'sticky-tag-wrapper'
|
|
56
|
-
}, children, /*#__PURE__*/React.createElement(BaseTag,
|
|
38
|
+
}, children, /*#__PURE__*/React.createElement(BaseTag, {
|
|
57
39
|
size: size,
|
|
58
40
|
className: cn(styles.tag, className, PLACEMENT_STYLES[placement], ALIGN_STYLES[align], offsetCn),
|
|
59
|
-
"data-test": 'sticky-tag'
|
|
60
|
-
|
|
41
|
+
"data-test": 'sticky-tag',
|
|
42
|
+
...restProps,
|
|
61
43
|
ref: ref
|
|
62
|
-
}
|
|
44
|
+
}, content));
|
|
63
45
|
});
|
|
64
46
|
StickyTag.propTypes = {
|
|
65
47
|
className: PropTypes.string,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"wrapper": "
|
|
3
|
-
"offset16": "
|
|
4
|
-
"offset24": "
|
|
5
|
-
"offset32": "
|
|
6
|
-
"alignTop": "
|
|
7
|
-
"alignMiddle": "
|
|
8
|
-
"topStart": "
|
|
9
|
-
"topEnd": "
|
|
10
|
-
"leftStart": "
|
|
11
|
-
"leftEnd": "
|
|
12
|
-
"tag": "
|
|
2
|
+
"wrapper": "_wrapper_1a2lqmx_3",
|
|
3
|
+
"offset16": "_offset16_1a2lqmx_7",
|
|
4
|
+
"offset24": "_offset24_1a2lqmx_10",
|
|
5
|
+
"offset32": "_offset32_1a2lqmx_13",
|
|
6
|
+
"alignTop": "_alignTop_1a2lqmx_17",
|
|
7
|
+
"alignMiddle": "_alignMiddle_1a2lqmx_20",
|
|
8
|
+
"topStart": "_topStart_1a2lqmx_24",
|
|
9
|
+
"topEnd": "_topEnd_1a2lqmx_27",
|
|
10
|
+
"leftStart": "_leftStart_1a2lqmx_30",
|
|
11
|
+
"leftEnd": "_leftEnd_1a2lqmx_33",
|
|
12
|
+
"tag": "_tag_1a2lqmx_37"
|
|
13
13
|
};
|
|
14
14
|
export { styles as default };
|
package/lib/tag.js
CHANGED
|
@@ -1,38 +1,23 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["className", "children", "size"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React from 'react';
|
|
17
2
|
import cn from 'classnames';
|
|
18
3
|
import PropTypes from 'prop-types';
|
|
19
4
|
import { BaseTag } from './parts/base-tag.js';
|
|
20
5
|
import styles from './parts/tag.p.module.css.js';
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return /*#__PURE__*/React.createElement(BaseTag,
|
|
30
|
-
"data-test": 'tag'
|
|
31
|
-
|
|
6
|
+
const Tag = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
|
|
7
|
+
(_ref, ref) => {
|
|
8
|
+
let {
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
11
|
+
size = 'xs',
|
|
12
|
+
...restProps
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/React.createElement(BaseTag, {
|
|
15
|
+
"data-test": 'tag',
|
|
16
|
+
...restProps,
|
|
32
17
|
size: size,
|
|
33
18
|
ref: ref,
|
|
34
19
|
className: cn(styles.main, className)
|
|
35
|
-
}
|
|
20
|
+
}, children);
|
|
36
21
|
});
|
|
37
22
|
Tag.displayName = 'Tag';
|
|
38
23
|
Tag.propTypes = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/tag",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.12",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -14,10 +14,9 @@
|
|
|
14
14
|
"access": "public"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@babel/runtime-corejs3": "^7.
|
|
18
|
-
"@rescui/colors": "^0.2.
|
|
19
|
-
"classnames": "^2.3.1"
|
|
20
|
-
"core-js": "^3.9.1"
|
|
17
|
+
"@babel/runtime-corejs3": "^7.26.0",
|
|
18
|
+
"@rescui/colors": "^0.2.6",
|
|
19
|
+
"classnames": "^2.3.1"
|
|
21
20
|
},
|
|
22
21
|
"peerDependencies": {
|
|
23
22
|
"@rescui/ui-contexts": "^0.5.0",
|
|
@@ -25,14 +24,14 @@
|
|
|
25
24
|
"react": ">=16.8.0 <19"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
|
-
"@rescui/icons": "^0.16.
|
|
29
|
-
"@rescui/scripts": "^0.3.
|
|
30
|
-
"@rescui/typography": "^0.19.
|
|
27
|
+
"@rescui/icons": "^0.16.12",
|
|
28
|
+
"@rescui/scripts": "^0.3.5",
|
|
29
|
+
"@rescui/typography": "^0.19.1"
|
|
31
30
|
},
|
|
32
31
|
"scripts": {
|
|
33
32
|
"build": "rescui-scripts build && yarn run build-pcss-api",
|
|
34
33
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
35
34
|
},
|
|
36
35
|
"nx": {},
|
|
37
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
|
|
38
37
|
}
|