@rescui/collapse 0.8.6-RUI-308-Fix-select-issues-405b9fa40.12 → 0.9.0

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/lib/_virtual/index.css.js +12 -12
  2. package/lib/_virtual/plus.js +294 -63
  3. package/lib/_virtual/right.js +294 -63
  4. package/lib/accordion.js +155 -34
  5. package/lib/collapse.js +281 -89
  6. package/lib/collapse.p.module.css.js +32 -32
  7. package/lib/index.css +80 -78
  8. package/lib/use-collapse-state.js +78 -57
  9. package/package.json +9 -8
package/lib/index.css CHANGED
@@ -3,7 +3,7 @@
3
3
  inherits:true;
4
4
  initial-value:0;
5
5
  }
6
- ._icon_8k0v18_4{
6
+ ._icon_1ohuzr2_4{
7
7
  --_rs-theme-dark:var(
8
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
9
9
  var(--rs-theme-dark, 0)
@@ -13,7 +13,7 @@
13
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
14
14
  }
15
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
16
- ._icon_8k0v18_4{
16
+ ._icon_1ohuzr2_4{
17
17
  --_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)));
18
18
  --_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)));
19
19
  --_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)));
@@ -22,7 +22,7 @@
22
22
  }
23
23
  }
24
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
25
- ._icon_8k0v18_4{
25
+ ._icon_1ohuzr2_4{
26
26
  --_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);
27
27
  --_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));
28
28
  --_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));
@@ -30,30 +30,30 @@
30
30
  --_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));
31
31
  }
32
32
  }
33
- ._icon_8k0v18_4{
33
+ ._icon_1ohuzr2_4{
34
34
 
35
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
36
36
 
37
37
  width:var(--rs-icons-width, auto);
38
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
39
39
  }
40
- ._sizeXS_8k0v18_14{
40
+ ._sizeXS_1ohuzr2_14{
41
41
  --_rs-icons-height:16px;
42
42
  }
43
- ._sizeS_8k0v18_18{
43
+ ._sizeS_1ohuzr2_18{
44
44
  --_rs-icons-height:20px;
45
45
  }
46
- ._sizeM_8k0v18_22{
46
+ ._sizeM_1ohuzr2_22{
47
47
  --_rs-icons-height:24px;
48
48
  }
49
- ._sizeL_8k0v18_26{
49
+ ._sizeL_1ohuzr2_26{
50
50
  --_rs-icons-height:28px;
51
51
  }
52
- ._light_8k0v18_30{
52
+ ._light_1ohuzr2_30{
53
53
  --rs-theme-dark:0;
54
54
  --_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));
55
55
  }
56
- ._dark_8k0v18_34{
56
+ ._dark_1ohuzr2_34{
57
57
  --rs-theme-dark:1;
58
58
  --_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));
59
59
  }
@@ -65,39 +65,39 @@
65
65
  transform:rotate(360deg);
66
66
  }
67
67
  }
68
- ._allVariants_8k0v18_48{
68
+ ._allVariants_1ohuzr2_48{
69
69
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
70
70
  container:rs-icon / size;
71
71
  }
72
- ._variant16_8k0v18_53,
73
- ._variant20_8k0v18_54,
74
- ._variant24_8k0v18_55{
72
+ ._variant16_1ohuzr2_53,
73
+ ._variant20_1ohuzr2_54,
74
+ ._variant24_1ohuzr2_55{
75
75
  display:none;
76
76
  }
77
- ._variant28_8k0v18_58{
77
+ ._variant28_1ohuzr2_58{
78
78
  display:block;
79
79
  }
80
80
  @container rs-icon (max-height: 24px){
81
- ._variant24_8k0v18_55{
81
+ ._variant24_1ohuzr2_55{
82
82
  display:block;
83
83
  }
84
- ._variant28_8k0v18_58{
84
+ ._variant28_1ohuzr2_58{
85
85
  display:none;
86
86
  }
87
87
  }
88
88
  @container rs-icon (max-height: 20px){
89
- ._variant20_8k0v18_54{
89
+ ._variant20_1ohuzr2_54{
90
90
  display:block;
91
91
  }
92
- ._variant24_8k0v18_55{
92
+ ._variant24_1ohuzr2_55{
93
93
  display:none;
94
94
  }
95
95
  }
96
96
  @container rs-icon (max-height: 16px){
97
- ._variant16_8k0v18_53{
97
+ ._variant16_1ohuzr2_53{
98
98
  display:block;
99
99
  }
100
- ._variant20_8k0v18_54{
100
+ ._variant20_1ohuzr2_54{
101
101
  display:none;
102
102
  }
103
103
  }
@@ -106,18 +106,18 @@
106
106
  inherits:true;
107
107
  initial-value:0;
108
108
  }
109
- ._themeLight_1m640ib_6{
109
+ ._themeLight_xefc0z_6{
110
110
  --rs-theme-dark:0;
111
111
  }
112
- ._themeDark_1m640ib_9{
112
+ ._themeDark_xefc0z_9{
113
113
  --rs-theme-dark:1;
114
114
  }
115
- ._sizeS_1m640ib_13{
115
+ ._sizeS_xefc0z_13{
116
116
  --_rs-collapse-vertical-padding:6px;
117
117
  --_rs-collapse-horizontal-padding:8px;
118
118
  --_rs-collapse-icon-size:20px;
119
119
  }
120
- ._sizeS_1m640ib_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
120
+ ._sizeS_xefc0z_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
121
121
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
122
122
  --_rs-typography-text-transform:initial;
123
123
  --_rs-typography-font-variant-numeric:initial;
@@ -149,7 +149,7 @@
149
149
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
150
150
  --_rs-typography-link-border-bottom-width-from-text:2px;
151
151
  }
152
- ._sizeS_1m640ib_13 > [data-rs-internal='collapse__content']{
152
+ ._sizeS_xefc0z_13 > [data-rs-internal='collapse__content']{
153
153
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
154
154
  --_rs-typography-text-transform:initial;
155
155
  --_rs-typography-font-variant-numeric:initial;
@@ -184,12 +184,12 @@
184
184
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
185
185
  --_rs-typography-link-border-bottom-width-from-text:1px;
186
186
  }
187
- ._sizeM_1m640ib_16{
187
+ ._sizeM_xefc0z_16{
188
188
  --_rs-collapse-vertical-padding:8px;
189
189
  --_rs-collapse-horizontal-padding:8px;
190
190
  --_rs-collapse-icon-size:24px;
191
191
  }
192
- ._sizeM_1m640ib_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
192
+ ._sizeM_xefc0z_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
193
193
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
194
194
  --_rs-typography-text-transform:initial;
195
195
  --_rs-typography-font-variant-numeric:initial;
@@ -221,7 +221,7 @@
221
221
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
222
222
  --_rs-typography-link-border-bottom-width-from-text:2px;
223
223
  }
224
- ._sizeM_1m640ib_16 > [data-rs-internal='collapse__content']{
224
+ ._sizeM_xefc0z_16 > [data-rs-internal='collapse__content']{
225
225
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
226
226
  --_rs-typography-text-transform:initial;
227
227
  --_rs-typography-font-variant-numeric:initial;
@@ -260,16 +260,16 @@
260
260
  --_rs-typography-link-border-bottom-width-from-text:1px;
261
261
  }
262
262
  @media screen and (max-width: 640px){
263
- ._sizeM_1m640ib_16 > [data-rs-internal='collapse__content']{
263
+ ._sizeM_xefc0z_16 > [data-rs-internal='collapse__content']{
264
264
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
265
265
  }
266
266
  }
267
- ._sizeL_1m640ib_19{
267
+ ._sizeL_xefc0z_19{
268
268
  --_rs-collapse-vertical-padding:12px;
269
269
  --_rs-collapse-horizontal-padding:16px;
270
270
  --_rs-collapse-icon-size:28px;
271
271
  }
272
- ._sizeL_1m640ib_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
272
+ ._sizeL_xefc0z_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
273
273
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
274
274
  --_rs-typography-text-transform:initial;
275
275
  --_rs-typography-font-variant-numeric:initial;
@@ -301,7 +301,7 @@
301
301
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
302
302
  --_rs-typography-link-border-bottom-width-from-text:2px;
303
303
  }
304
- ._sizeL_1m640ib_19 > [data-rs-internal='collapse__content']{
304
+ ._sizeL_xefc0z_19 > [data-rs-internal='collapse__content']{
305
305
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
306
306
  --_rs-typography-text-transform:initial;
307
307
  --_rs-typography-font-variant-numeric:initial;
@@ -340,11 +340,11 @@
340
340
  --_rs-typography-link-border-bottom-width-from-text:1px;
341
341
  }
342
342
  @media screen and (max-width: 640px){
343
- ._sizeL_1m640ib_19 > [data-rs-internal='collapse__content']{
343
+ ._sizeL_xefc0z_19 > [data-rs-internal='collapse__content']{
344
344
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
345
345
  }
346
346
  }
347
- ._classic_1m640ib_23{
347
+ ._classic_xefc0z_23{
348
348
  --_rs-collapse-active-theme-flip:0;
349
349
  --_rs-collapse-active-background:rgba(
350
350
  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),
@@ -358,7 +358,7 @@
358
358
  );
359
359
  --_rs-collapse-button-hover-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), 1);
360
360
  }
361
- ._rock_1m640ib_26{
361
+ ._rock_xefc0z_26{
362
362
  --_rs-collapse-active-theme-flip:1;
363
363
  --_rs-collapse-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
364
364
  --_rs-collapse-active-border-bottom-to-padding-multiplier:1;
@@ -369,7 +369,7 @@
369
369
  );
370
370
  --_rs-collapse-button-hover-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), 1);
371
371
  }
372
- ._clear_1m640ib_29{
372
+ ._clear_xefc0z_29{
373
373
  --_rs-collapse-active-theme-flip:0;
374
374
  --_rs-collapse-active-background:transparent;
375
375
  --_rs-collapse-active-border-bottom-to-padding-multiplier:0;
@@ -380,27 +380,27 @@
380
380
  0.7
381
381
  );
382
382
  }
383
- ._hasBorderBottom_1m640ib_33{
383
+ ._hasBorderBottom_xefc0z_33{
384
384
  --_rs-collapse-border-bottom-width-or-initial:1px;
385
385
  }
386
- ._leftIcon_1m640ib_37{
386
+ ._leftIcon_xefc0z_37{
387
387
  --_rs-collapse-button-flex-direction:row;
388
388
  --_rs-collapse-icon-margin:0 var(--_rs-collapse-horizontal-padding) 0 0;
389
389
  --_rs-collapse-inner-wrapper-padding-left-base:calc(var(--_rs-collapse-horizontal-padding)*2 + var(--_rs-collapse-icon-size));
390
390
  }
391
- ._rightIcon_1m640ib_40{
391
+ ._rightIcon_xefc0z_40{
392
392
  --_rs-collapse-button-flex-direction:row-reverse;
393
393
  --_rs-collapse-icon-margin:0 0 0 var(--_rs-collapse-horizontal-padding);
394
394
  --_rs-collapse-inner-wrapper-padding-left-base:var(
395
395
  --_rs-collapse-horizontal-padding
396
396
  );
397
397
  }
398
- ._disableLeftPadding_1m640ib_44{
398
+ ._disableLeftPadding_xefc0z_44{
399
399
  --_rs-collapse-inner-wrapper-padding-left-from-disable-left-padding-or-initial:var(
400
400
  --_rs-collapse-horizontal-padding
401
401
  );
402
402
  }
403
- ._main_1m640ib_48{
403
+ ._main_xefc0z_48{
404
404
  --_rs-theme-dark:var(
405
405
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
406
406
  var(--rs-theme-dark, 0)
@@ -410,7 +410,7 @@
410
410
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
411
411
  }
412
412
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
413
- ._main_1m640ib_48{
413
+ ._main_xefc0z_48{
414
414
  --_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)));
415
415
  --_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)));
416
416
  --_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)));
@@ -419,7 +419,7 @@
419
419
  }
420
420
  }
421
421
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
422
- ._main_1m640ib_48{
422
+ ._main_xefc0z_48{
423
423
  --_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);
424
424
  --_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));
425
425
  --_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));
@@ -427,7 +427,7 @@
427
427
  --_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));
428
428
  }
429
429
  }
430
- ._main_1m640ib_48 {
430
+ ._main_xefc0z_48 {
431
431
  --_rs-collapse-border-bottom-width:var(
432
432
  --_rs-collapse-border-bottom-width-or-initial,
433
433
  0px
@@ -442,9 +442,9 @@
442
442
  border-bottom:var(--_rs-collapse-border-bottom-width) solid 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);
443
443
  border-radius:var(--rs-collapse-border-radius, 0px);
444
444
  }
445
- ._main_1m640ib_48._opening_1m640ib_59,
446
- ._main_1m640ib_48._opened_1m640ib_60,
447
- ._main_1m640ib_48._closing_1m640ib_61{
445
+ ._main_xefc0z_48._opening_xefc0z_59,
446
+ ._main_xefc0z_48._opened_xefc0z_60,
447
+ ._main_xefc0z_48._closing_xefc0z_61{
448
448
  --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
449
449
 
450
450
  padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -454,7 +454,7 @@
454
454
  background:var(--_rs-collapse-active-background);
455
455
  }
456
456
  @media (hover: hover){
457
- ._main_1m640ib_48:hover{
457
+ ._main_xefc0z_48:hover{
458
458
  --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
459
459
 
460
460
  padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -464,7 +464,7 @@
464
464
  background:var(--_rs-collapse-active-background);
465
465
  }
466
466
  }
467
- ._title_1m640ib_95{
467
+ ._title_xefc0z_95{
468
468
  letter-spacing:var(
469
469
  --rs-text-base-letter-spacing,
470
470
  var(--_rs-typography-letter-spacing)
@@ -481,7 +481,7 @@
481
481
 
482
482
  color:inherit;
483
483
  }
484
- ._content_1m640ib_103{
484
+ ._content_xefc0z_103{
485
485
  letter-spacing:var(
486
486
  --rs-text-base-letter-spacing,
487
487
  var(--_rs-typography-letter-spacing)
@@ -506,24 +506,24 @@
506
506
 
507
507
  will-change:grid-template-rows;
508
508
  }
509
- ._animationEnabled_1m640ib_115 ._content_1m640ib_103{
509
+ ._animationEnabled_xefc0z_115 ._content_xefc0z_103{
510
510
  transition:grid-template-rows 300ms var(--rs-transition-function, ease);
511
511
  }
512
- ._opening_1m640ib_59 > ._content_1m640ib_103,
513
- ._opened_1m640ib_60 > ._content_1m640ib_103{
512
+ ._opening_xefc0z_59 > ._content_xefc0z_103,
513
+ ._opened_xefc0z_60 > ._content_xefc0z_103{
514
514
  grid-template-rows:minmax(0, 1fr);
515
515
  }
516
- ._opened_1m640ib_60 > ._content_1m640ib_103{
516
+ ._opened_xefc0z_60 > ._content_xefc0z_103{
517
517
  overflow:visible;
518
518
  }
519
- ._closed_1m640ib_128 > ._content_1m640ib_103{
519
+ ._closed_xefc0z_128 > ._content_xefc0z_103{
520
520
  visibility:hidden;
521
521
  }
522
- ._innerWrapper_1m640ib_133{
522
+ ._innerWrapper_xefc0z_133{
523
523
  min-height:0;
524
524
  padding:0 var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-inner-wrapper-padding-left);
525
525
  }
526
- ._button_1m640ib_140{
526
+ ._button_xefc0z_140{
527
527
  color:var(
528
528
  --rs-color-hard,
529
529
  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))
@@ -555,35 +555,33 @@
555
555
  -moz-osx-font-smoothing:inherit;
556
556
  -webkit-appearance:none;
557
557
  }
558
- ._button_1m640ib_140::-moz-focus-inner{
558
+ ._button_xefc0z_140::-moz-focus-inner{
559
559
  padding:0;
560
560
 
561
561
  border:0;
562
562
  }
563
- ._animationEnabled_1m640ib_115 ._button_1m640ib_140{
563
+ ._animationEnabled_xefc0z_115 ._button_xefc0z_140{
564
564
  transition:var(--_rs-collapse-button-transition);
565
565
  }
566
- ._button_1m640ib_140:focus{
566
+ ._button_xefc0z_140:focus{
567
567
  outline:none;
568
568
  }
569
- ._button_1m640ib_140:focus[data-focus-method='key']{
569
+ ._button_xefc0z_140:focus[data-focus-method='key']{
570
570
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
571
571
  }
572
572
  @media (hover: hover){
573
- ._button_1m640ib_140:hover{
573
+ ._button_xefc0z_140:hover{
574
574
  color:var(--_rs-collapse-button-hover-color);
575
575
  background:var(--_rs-collapse-button-hover-background);
576
576
  }
577
577
  }
578
- ._icon_1m640ib_196{
578
+ ._icon_xefc0z_196{
579
579
  position:relative;
580
580
  top:0;
581
581
  left:0;
582
582
 
583
583
  flex:0 0 auto;
584
584
 
585
- width:auto;
586
- height:var(--_rs-collapse-icon-size);
587
585
  margin:var(--_rs-collapse-icon-margin);
588
586
 
589
587
  transform:rotate(0);
@@ -592,37 +590,41 @@
592
590
 
593
591
  will-change:transform;
594
592
  }
595
- ._animationEnabled_1m640ib_115 ._icon_1m640ib_196{
593
+ ._button_xefc0z_140 ._icon_xefc0z_196{
594
+ width:auto;
595
+ height:var(--_rs-collapse-icon-size);
596
+ }
597
+ ._animationEnabled_xefc0z_115 ._icon_xefc0z_196{
596
598
  transition:transform 300ms var(--rs-transition-function, ease);
597
599
  }
598
- ._opening_1m640ib_59._iconPlus_1m640ib_217 > ._button_1m640ib_140 > ._icon_1m640ib_196,
599
- ._opened_1m640ib_60._iconPlus_1m640ib_217 > ._button_1m640ib_140 > ._icon_1m640ib_196{
600
+ ._opening_xefc0z_59._iconPlus_xefc0z_220 > ._button_xefc0z_140 > ._icon_xefc0z_196,
601
+ ._opened_xefc0z_60._iconPlus_xefc0z_220 > ._button_xefc0z_140 > ._icon_xefc0z_196{
600
602
  transform:rotate(45deg);
601
603
  }
602
- ._opening_1m640ib_59._iconArrow_1m640ib_222 > ._button_1m640ib_140 > ._icon_1m640ib_196,
603
- ._opened_1m640ib_60._iconArrow_1m640ib_222 > ._button_1m640ib_140 > ._icon_1m640ib_196{
604
+ ._opening_xefc0z_59._iconArrow_xefc0z_225 > ._button_xefc0z_140 > ._icon_xefc0z_196,
605
+ ._opened_xefc0z_60._iconArrow_xefc0z_225 > ._button_xefc0z_140 > ._icon_xefc0z_196{
604
606
  transform:rotate(90deg);
605
607
  }
606
- ._accordion_1m640ib_228{
608
+ ._accordion_xefc0z_231{
607
609
  display:flex;
608
610
  flex-direction:column;
609
611
  row-gap:var(--_rs-collapse-accordion-gap);
610
612
  }
611
- ._accordionGap0_1m640ib_233{
613
+ ._accordionGap0_xefc0z_236{
612
614
  --_rs-collapse-accordion-gap:0px;
613
615
  }
614
- ._accordionGap8_1m640ib_236{
616
+ ._accordionGap8_xefc0z_239{
615
617
  --_rs-collapse-accordion-gap:8px;
616
618
  }
617
- ._accordionGap12_1m640ib_239{
619
+ ._accordionGap12_xefc0z_242{
618
620
  --_rs-collapse-accordion-gap:12px;
619
621
  }
620
- ._accordionGap16_1m640ib_242{
622
+ ._accordionGap16_xefc0z_245{
621
623
  --_rs-collapse-accordion-gap:16px;
622
624
  }
623
- ._accordionGap24_1m640ib_245{
625
+ ._accordionGap24_xefc0z_248{
624
626
  --_rs-collapse-accordion-gap:24px;
625
627
  }
626
- ._accordionGap32_1m640ib_248{
628
+ ._accordionGap32_xefc0z_251{
627
629
  --_rs-collapse-accordion-gap:32px;
628
630
  }
package/lib/use-collapse-state.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
- import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
2
+ import { c } from 'react-compiler-runtime';
3
+ import { useState, useEffect, useLayoutEffect } from 'react';
3
4
  const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
4
5
 
5
6
  const getCollapseTransition = element => element.getAnimations().find(animation => animation.transitionProperty === 'grid-template-rows');
@@ -25,87 +26,107 @@ function getStateForTarget(state, shouldBeOpened) {
25
26
  return COLLAPSE_STATES.CLOSING;
26
27
  }
27
28
 
28
- function useCollapseState(_ref) {
29
- let {
29
+ function useCollapseState(t0) {
30
+ const $ = c(5);
31
+ const {
30
32
  shouldBeOpened,
31
33
  contentRef
32
- } = _ref;
34
+ } = t0;
33
35
  const [state, setState] = useState(shouldBeOpened ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.CLOSE);
34
- const completeTransition = useCallback(expectedState => {
35
- setState(currentState => {
36
- if (currentState !== expectedState) {
37
- return currentState;
38
- }
39
-
40
- if (expectedState === COLLAPSE_STATES.OPENING) {
41
- return COLLAPSE_STATES.OPEN;
42
- }
36
+ let t1;
43
37
 
44
- if (expectedState === COLLAPSE_STATES.CLOSING) {
45
- return COLLAPSE_STATES.CLOSE;
46
- }
38
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
39
+ t1 = expectedState => {
40
+ setState(currentState => {
41
+ if (currentState !== expectedState) {
42
+ return currentState;
43
+ }
47
44
 
48
- return currentState;
49
- });
50
- }, []); // Track the grid track transition that currently belongs to OPENING/CLOSING:
51
- // - normally, complete the phase after the track reaches its target;
52
- // - a direction change can replace the transition, so follow the latest one;
53
- // - if the phase changes, cleanup invalidates its waiter, so an old
54
- // transition cannot complete a newer phase;
55
- // - if no transition is created (for example, its duration is 0s), complete
56
- // the phase immediately.
45
+ if (expectedState === COLLAPSE_STATES.OPENING) {
46
+ return COLLAPSE_STATES.OPEN;
47
+ }
57
48
 
58
- useIsomorphicLayoutEffect(() => {
59
- if (state !== COLLAPSE_STATES.OPENING && state !== COLLAPSE_STATES.CLOSING) {
60
- return undefined;
61
- }
49
+ if (expectedState === COLLAPSE_STATES.CLOSING) {
50
+ return COLLAPSE_STATES.CLOSE;
51
+ }
62
52
 
63
- const contentElement = contentRef.current;
53
+ return currentState;
54
+ });
55
+ };
64
56
 
65
- if (!contentElement) {
66
- return undefined;
67
- }
57
+ $[0] = t1;
58
+ } else {
59
+ t1 = $[0];
60
+ }
68
61
 
69
- let isCurrentPhase = true;
62
+ const completeTransition = t1;
63
+ let t2;
64
+ let t3;
70
65
 
71
- const completeCurrentPhase = () => {
72
- if (isCurrentPhase) {
73
- completeTransition(state);
66
+ if ($[1] !== contentRef || $[2] !== state) {
67
+ t2 = () => {
68
+ if (state !== COLLAPSE_STATES.OPENING && state !== COLLAPSE_STATES.CLOSING) {
69
+ return;
74
70
  }
75
- };
76
71
 
77
- const waitForCurrentTransition = previousTransition => {
78
- if (!isCurrentPhase) {
79
- return Promise.resolve();
72
+ const contentElement = contentRef.current;
73
+
74
+ if (!contentElement) {
75
+ return;
80
76
  }
81
77
 
82
- const transition = getCollapseTransition(contentElement);
78
+ let isCurrentPhase = true;
83
79
 
84
- if (!transition || transition === previousTransition) {
85
- return Promise.resolve();
86
- }
80
+ const completeCurrentPhase = () => {
81
+ if (isCurrentPhase) {
82
+ completeTransition(state);
83
+ }
84
+ };
87
85
 
88
- return transition.finished.then(() => {
86
+ const waitForCurrentTransition = previousTransition => {
89
87
  if (!isCurrentPhase) {
90
88
  return Promise.resolve();
91
89
  }
92
90
 
93
- const replacementTransition = getCollapseTransition(contentElement);
91
+ const transition = getCollapseTransition(contentElement);
94
92
 
95
- if (replacementTransition && replacementTransition !== transition) {
96
- return waitForCurrentTransition(transition);
93
+ if (!transition || transition === previousTransition) {
94
+ return Promise.resolve();
97
95
  }
98
96
 
99
- return Promise.resolve();
100
- }, () => waitForCurrentTransition(transition));
101
- };
97
+ return transition.finished.then(() => {
98
+ if (!isCurrentPhase) {
99
+ return Promise.resolve();
100
+ }
101
+
102
+ const replacementTransition = getCollapseTransition(contentElement);
102
103
 
103
- waitForCurrentTransition().then(completeCurrentPhase);
104
- return () => {
105
- isCurrentPhase = false;
104
+ if (replacementTransition && replacementTransition !== transition) {
105
+ return waitForCurrentTransition(transition);
106
+ }
107
+
108
+ return Promise.resolve();
109
+ }, () => waitForCurrentTransition(transition));
110
+ };
111
+
112
+ waitForCurrentTransition().then(completeCurrentPhase);
113
+ return () => {
114
+ isCurrentPhase = false;
115
+ };
106
116
  };
107
- }, [completeTransition, contentRef, state]);
108
- const stateForTarget = getStateForTarget(state, shouldBeOpened); // React retries this component before rendering its children when the phase changes.
117
+
118
+ t3 = [completeTransition, contentRef, state];
119
+ $[1] = contentRef;
120
+ $[2] = state;
121
+ $[3] = t2;
122
+ $[4] = t3;
123
+ } else {
124
+ t2 = $[3];
125
+ t3 = $[4];
126
+ }
127
+
128
+ useIsomorphicLayoutEffect(t2, t3);
129
+ const stateForTarget = getStateForTarget(state, shouldBeOpened);
109
130
 
110
131
  if (stateForTarget !== state) {
111
132
  setState(stateForTarget);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/collapse",
3
- "version": "0.8.6-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
3
+ "version": "0.9.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,18 +17,19 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "classnames": "^2.2.6"
20
+ "classnames": "^2.2.6",
21
+ "react-compiler-runtime": "^1.0.0"
21
22
  },
22
23
  "peerDependencies": {
23
24
  "@rescui/ui-contexts": "^0.6.0",
24
25
  "prop-types": "^15",
25
- "react": ">=16.8.0 <20"
26
+ "react": ">=17.0.0 <20"
26
27
  },
27
28
  "devDependencies": {
28
- "@rescui/colors": "0.3.4-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
29
- "@rescui/scripts": "0.5.2",
30
- "@rescui/typography": "0.27.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
31
- "@rescui/visual-regression": "0.1.4",
29
+ "@rescui/colors": "^0.3.4",
30
+ "@rescui/scripts": "^0.5.3",
31
+ "@rescui/typography": "^0.28.0",
32
+ "@rescui/visual-regression": "^0.1.4",
32
33
  "@types/classnames": "^2.2.11"
33
34
  },
34
35
  "scripts": {
@@ -36,5 +37,5 @@
36
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
38
  },
38
39
  "nx": {},
39
- "gitHead": "405b9fa40886b0ab6709c9185e8214599d2d792e"
40
+ "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
40
41
  }