@rescui/collapse 0.8.2 → 0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10

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 (12) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/accordion.js +155 -34
  3. package/lib/collapse.js +324 -101
  4. package/lib/collapse.p.module.css.js +32 -32
  5. package/lib/index.css +73 -73
  6. package/lib/use-collapse-state.d.ts +7 -6
  7. package/lib/use-collapse-state.js +160 -43
  8. package/lib/use-safe-id.d.ts +3 -0
  9. package/lib/use-safe-id.js +10 -0
  10. package/llm/components/accordion.md +23 -38
  11. package/llm/components/collapse.md +19 -34
  12. package/package.json +11 -10
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_18p83uf_4{
1
+ ._icon_19upof9_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
- ._icon_18p83uf_4{
11
+ ._icon_19upof9_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
- ._icon_18p83uf_4{
20
+ ._icon_19upof9_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,30 +25,30 @@
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
- ._icon_18p83uf_4{
28
+ ._icon_19upof9_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_18p83uf_14{
35
+ ._sizeXS_19upof9_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_18p83uf_18{
38
+ ._sizeS_19upof9_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_18p83uf_22{
41
+ ._sizeM_19upof9_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_18p83uf_26{
44
+ ._sizeL_19upof9_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_18p83uf_30{
47
+ ._light_19upof9_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
- ._dark_18p83uf_34{
51
+ ._dark_19upof9_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
  }
@@ -60,54 +60,54 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_18p83uf_48{
63
+ ._allVariants_19upof9_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_18p83uf_53,
68
- ._variant20_18p83uf_54,
69
- ._variant24_18p83uf_55{
67
+ ._variant16_19upof9_53,
68
+ ._variant20_19upof9_54,
69
+ ._variant24_19upof9_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_18p83uf_58{
72
+ ._variant28_19upof9_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_18p83uf_55{
76
+ ._variant24_19upof9_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_18p83uf_58{
79
+ ._variant28_19upof9_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_18p83uf_54{
84
+ ._variant20_19upof9_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_18p83uf_55{
87
+ ._variant24_19upof9_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_18p83uf_53{
92
+ ._variant16_19upof9_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_18p83uf_54{
95
+ ._variant20_19upof9_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_1m6emg9_6{
99
+ ._themeLight_1t0qfuj_6{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_1m6emg9_9{
102
+ ._themeDark_1t0qfuj_9{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._sizeS_1m6emg9_13{
105
+ ._sizeS_1t0qfuj_13{
106
106
  --_rs-collapse-vertical-padding:6px;
107
107
  --_rs-collapse-horizontal-padding:8px;
108
108
  --_rs-collapse-icon-size:20px;
109
109
  }
110
- ._sizeS_1m6emg9_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
110
+ ._sizeS_1t0qfuj_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
111
111
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
112
112
  --_rs-typography-text-transform:initial;
113
113
  --_rs-typography-font-variant-numeric:initial;
@@ -139,7 +139,7 @@
139
139
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
140
140
  --_rs-typography-link-border-bottom-width-from-text:2px;
141
141
  }
142
- ._sizeS_1m6emg9_13 > [data-rs-internal='collapse__content']{
142
+ ._sizeS_1t0qfuj_13 > [data-rs-internal='collapse__content']{
143
143
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
144
144
  --_rs-typography-text-transform:initial;
145
145
  --_rs-typography-font-variant-numeric:initial;
@@ -174,12 +174,12 @@
174
174
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
175
175
  --_rs-typography-link-border-bottom-width-from-text:1px;
176
176
  }
177
- ._sizeM_1m6emg9_16{
177
+ ._sizeM_1t0qfuj_16{
178
178
  --_rs-collapse-vertical-padding:8px;
179
179
  --_rs-collapse-horizontal-padding:8px;
180
180
  --_rs-collapse-icon-size:24px;
181
181
  }
182
- ._sizeM_1m6emg9_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
182
+ ._sizeM_1t0qfuj_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
183
183
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
184
184
  --_rs-typography-text-transform:initial;
185
185
  --_rs-typography-font-variant-numeric:initial;
@@ -211,7 +211,7 @@
211
211
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
212
212
  --_rs-typography-link-border-bottom-width-from-text:2px;
213
213
  }
214
- ._sizeM_1m6emg9_16 > [data-rs-internal='collapse__content']{
214
+ ._sizeM_1t0qfuj_16 > [data-rs-internal='collapse__content']{
215
215
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
216
216
  --_rs-typography-text-transform:initial;
217
217
  --_rs-typography-font-variant-numeric:initial;
@@ -250,16 +250,16 @@
250
250
  --_rs-typography-link-border-bottom-width-from-text:1px;
251
251
  }
252
252
  @media screen and (max-width: 640px){
253
- ._sizeM_1m6emg9_16 > [data-rs-internal='collapse__content']{
253
+ ._sizeM_1t0qfuj_16 > [data-rs-internal='collapse__content']{
254
254
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
255
255
  }
256
256
  }
257
- ._sizeL_1m6emg9_19{
257
+ ._sizeL_1t0qfuj_19{
258
258
  --_rs-collapse-vertical-padding:12px;
259
259
  --_rs-collapse-horizontal-padding:16px;
260
260
  --_rs-collapse-icon-size:28px;
261
261
  }
262
- ._sizeL_1m6emg9_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
262
+ ._sizeL_1t0qfuj_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
263
263
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
264
264
  --_rs-typography-text-transform:initial;
265
265
  --_rs-typography-font-variant-numeric:initial;
@@ -291,7 +291,7 @@
291
291
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
292
292
  --_rs-typography-link-border-bottom-width-from-text:2px;
293
293
  }
294
- ._sizeL_1m6emg9_19 > [data-rs-internal='collapse__content']{
294
+ ._sizeL_1t0qfuj_19 > [data-rs-internal='collapse__content']{
295
295
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
296
296
  --_rs-typography-text-transform:initial;
297
297
  --_rs-typography-font-variant-numeric:initial;
@@ -330,11 +330,11 @@
330
330
  --_rs-typography-link-border-bottom-width-from-text:1px;
331
331
  }
332
332
  @media screen and (max-width: 640px){
333
- ._sizeL_1m6emg9_19 > [data-rs-internal='collapse__content']{
333
+ ._sizeL_1t0qfuj_19 > [data-rs-internal='collapse__content']{
334
334
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
335
335
  }
336
336
  }
337
- ._classic_1m6emg9_23{
337
+ ._classic_1t0qfuj_23{
338
338
  --_rs-collapse-active-theme-flip:0;
339
339
  --_rs-collapse-active-background:rgba(
340
340
  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),
@@ -348,7 +348,7 @@
348
348
  );
349
349
  --_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);
350
350
  }
351
- ._rock_1m6emg9_26{
351
+ ._rock_1t0qfuj_26{
352
352
  --_rs-collapse-active-theme-flip:1;
353
353
  --_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));
354
354
  --_rs-collapse-active-border-bottom-to-padding-multiplier:1;
@@ -359,7 +359,7 @@
359
359
  );
360
360
  --_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);
361
361
  }
362
- ._clear_1m6emg9_29{
362
+ ._clear_1t0qfuj_29{
363
363
  --_rs-collapse-active-theme-flip:0;
364
364
  --_rs-collapse-active-background:transparent;
365
365
  --_rs-collapse-active-border-bottom-to-padding-multiplier:0;
@@ -370,27 +370,27 @@
370
370
  0.7
371
371
  );
372
372
  }
373
- ._hasBorderBottom_1m6emg9_33{
373
+ ._hasBorderBottom_1t0qfuj_33{
374
374
  --_rs-collapse-border-bottom-width-or-initial:1px;
375
375
  }
376
- ._leftIcon_1m6emg9_37{
376
+ ._leftIcon_1t0qfuj_37{
377
377
  --_rs-collapse-button-flex-direction:row;
378
378
  --_rs-collapse-icon-margin:0 var(--_rs-collapse-horizontal-padding) 0 0;
379
379
  --_rs-collapse-inner-wrapper-padding-left-base:calc(var(--_rs-collapse-horizontal-padding)*2 + var(--_rs-collapse-icon-size));
380
380
  }
381
- ._rightIcon_1m6emg9_40{
381
+ ._rightIcon_1t0qfuj_40{
382
382
  --_rs-collapse-button-flex-direction:row-reverse;
383
383
  --_rs-collapse-icon-margin:0 0 0 var(--_rs-collapse-horizontal-padding);
384
384
  --_rs-collapse-inner-wrapper-padding-left-base:var(
385
385
  --_rs-collapse-horizontal-padding
386
386
  );
387
387
  }
388
- ._disableLeftPadding_1m6emg9_44{
388
+ ._disableLeftPadding_1t0qfuj_44{
389
389
  --_rs-collapse-inner-wrapper-padding-left-from-disable-left-padding-or-initial:var(
390
390
  --_rs-collapse-horizontal-padding
391
391
  );
392
392
  }
393
- ._main_1m6emg9_48{
393
+ ._main_1t0qfuj_48{
394
394
  --_rs-theme-dark:var(
395
395
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
396
396
  var(--rs-theme-dark, 0)
@@ -400,7 +400,7 @@
400
400
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
401
401
  }
402
402
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
403
- ._main_1m6emg9_48{
403
+ ._main_1t0qfuj_48{
404
404
  --_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)));
405
405
  --_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)));
406
406
  --_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)));
@@ -409,7 +409,7 @@
409
409
  }
410
410
  }
411
411
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
412
- ._main_1m6emg9_48{
412
+ ._main_1t0qfuj_48{
413
413
  --_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);
414
414
  --_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));
415
415
  --_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));
@@ -417,7 +417,7 @@
417
417
  --_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));
418
418
  }
419
419
  }
420
- ._main_1m6emg9_48 {
420
+ ._main_1t0qfuj_48 {
421
421
  --_rs-collapse-border-bottom-width:var(
422
422
  --_rs-collapse-border-bottom-width-or-initial,
423
423
  0px
@@ -432,9 +432,9 @@
432
432
  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);
433
433
  border-radius:var(--rs-collapse-border-radius, 0px);
434
434
  }
435
- ._main_1m6emg9_48._opening_1m6emg9_59,
436
- ._main_1m6emg9_48._opened_1m6emg9_60,
437
- ._main_1m6emg9_48._closing_1m6emg9_61{
435
+ ._main_1t0qfuj_48._opening_1t0qfuj_59,
436
+ ._main_1t0qfuj_48._opened_1t0qfuj_60,
437
+ ._main_1t0qfuj_48._closing_1t0qfuj_61{
438
438
  --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
439
439
 
440
440
  padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -444,7 +444,7 @@
444
444
  background:var(--_rs-collapse-active-background);
445
445
  }
446
446
  @media (hover: hover){
447
- ._main_1m6emg9_48:hover{
447
+ ._main_1t0qfuj_48:hover{
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
  }
457
- ._title_1m6emg9_95{
457
+ ._title_1t0qfuj_95{
458
458
  letter-spacing:var(
459
459
  --rs-text-base-letter-spacing,
460
460
  var(--_rs-typography-letter-spacing)
@@ -471,7 +471,7 @@
471
471
 
472
472
  color:inherit;
473
473
  }
474
- ._content_1m6emg9_103{
474
+ ._content_1t0qfuj_103{
475
475
  letter-spacing:var(
476
476
  --rs-text-base-letter-spacing,
477
477
  var(--_rs-typography-letter-spacing)
@@ -492,22 +492,22 @@
492
492
 
493
493
  height:0;
494
494
  }
495
- ._closed_1m6emg9_111 > ._content_1m6emg9_103{
495
+ ._closed_1t0qfuj_111 > ._content_1t0qfuj_103{
496
496
  display:none;
497
497
  }
498
- ._opened_1m6emg9_60 > ._content_1m6emg9_103{
498
+ ._opened_1t0qfuj_60 > ._content_1t0qfuj_103{
499
499
  height:initial;
500
500
  }
501
- ._opening_1m6emg9_59 > ._content_1m6emg9_103,
502
- ._closingTransition_1m6emg9_120 > ._content_1m6emg9_103{
501
+ ._opening_1t0qfuj_59 > ._content_1t0qfuj_103,
502
+ ._closingTransition_1t0qfuj_120 > ._content_1t0qfuj_103{
503
503
  overflow:hidden;
504
504
 
505
505
  transition:height 300ms var(--rs-transition-function, ease);
506
506
  }
507
- ._innerWrapper_1m6emg9_127{
507
+ ._innerWrapper_1t0qfuj_127{
508
508
  padding:0 var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-inner-wrapper-padding-left);
509
509
  }
510
- ._button_1m6emg9_133{
510
+ ._button_1t0qfuj_133{
511
511
  color:var(
512
512
  --rs-color-hard,
513
513
  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))
@@ -540,24 +540,24 @@
540
540
  -moz-osx-font-smoothing:inherit;
541
541
  -webkit-appearance:none;
542
542
  }
543
- ._button_1m6emg9_133::-moz-focus-inner{
543
+ ._button_1t0qfuj_133::-moz-focus-inner{
544
544
  padding:0;
545
545
 
546
546
  border:0;
547
547
  }
548
- ._button_1m6emg9_133:focus{
548
+ ._button_1t0qfuj_133:focus{
549
549
  outline:none;
550
550
  }
551
- ._button_1m6emg9_133:focus[data-focus-method='key']{
551
+ ._button_1t0qfuj_133:focus[data-focus-method='key']{
552
552
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
553
553
  }
554
554
  @media (hover: hover){
555
- ._button_1m6emg9_133:hover{
555
+ ._button_1t0qfuj_133:hover{
556
556
  color:var(--_rs-collapse-button-hover-color);
557
557
  background:var(--_rs-collapse-button-hover-background);
558
558
  }
559
559
  }
560
- ._icon_1m6emg9_186{
560
+ ._icon_1t0qfuj_186{
561
561
  position:relative;
562
562
  top:0;
563
563
  left:0;
@@ -573,34 +573,34 @@
573
573
 
574
574
  will-change:transform;
575
575
  }
576
- ._opening_1m6emg9_59._iconPlus_1m6emg9_202 > ._button_1m6emg9_133 > ._icon_1m6emg9_186,
577
- ._opened_1m6emg9_60._iconPlus_1m6emg9_202 > ._button_1m6emg9_133 > ._icon_1m6emg9_186{
576
+ ._opening_1t0qfuj_59._iconPlus_1t0qfuj_202 > ._button_1t0qfuj_133 > ._icon_1t0qfuj_186,
577
+ ._opened_1t0qfuj_60._iconPlus_1t0qfuj_202 > ._button_1t0qfuj_133 > ._icon_1t0qfuj_186{
578
578
  transform:rotate(45deg);
579
579
  }
580
- ._opening_1m6emg9_59._iconArrow_1m6emg9_207 > ._button_1m6emg9_133 > ._icon_1m6emg9_186,
581
- ._opened_1m6emg9_60._iconArrow_1m6emg9_207 > ._button_1m6emg9_133 > ._icon_1m6emg9_186{
580
+ ._opening_1t0qfuj_59._iconArrow_1t0qfuj_207 > ._button_1t0qfuj_133 > ._icon_1t0qfuj_186,
581
+ ._opened_1t0qfuj_60._iconArrow_1t0qfuj_207 > ._button_1t0qfuj_133 > ._icon_1t0qfuj_186{
582
582
  transform:rotate(90deg);
583
583
  }
584
- ._accordion_1m6emg9_213{
584
+ ._accordion_1t0qfuj_213{
585
585
  display:flex;
586
586
  flex-direction:column;
587
587
  row-gap:var(--_rs-collapse-accordion-gap);
588
588
  }
589
- ._accordionGap0_1m6emg9_218{
589
+ ._accordionGap0_1t0qfuj_218{
590
590
  --_rs-collapse-accordion-gap:0px;
591
591
  }
592
- ._accordionGap8_1m6emg9_221{
592
+ ._accordionGap8_1t0qfuj_221{
593
593
  --_rs-collapse-accordion-gap:8px;
594
594
  }
595
- ._accordionGap12_1m6emg9_224{
595
+ ._accordionGap12_1t0qfuj_224{
596
596
  --_rs-collapse-accordion-gap:12px;
597
597
  }
598
- ._accordionGap16_1m6emg9_227{
598
+ ._accordionGap16_1t0qfuj_227{
599
599
  --_rs-collapse-accordion-gap:16px;
600
600
  }
601
- ._accordionGap24_1m6emg9_230{
601
+ ._accordionGap24_1t0qfuj_230{
602
602
  --_rs-collapse-accordion-gap:24px;
603
603
  }
604
- ._accordionGap32_1m6emg9_233{
604
+ ._accordionGap32_1t0qfuj_233{
605
605
  --_rs-collapse-accordion-gap:32px;
606
606
  }
package/lib/use-collapse-state.d.ts CHANGED
@@ -1,17 +1,18 @@
1
1
  export declare enum COLLAPSE_STATES {
2
2
  OPENING = "OPENING",
3
3
  OPEN = "OPEN",
4
+ CLOSING_PREPARE = "CLOSING_PREPARE",
4
5
  CLOSING = "CLOSING",
5
6
  CLOSE = "CLOSE"
6
7
  }
7
- export declare function useCollapseState({ shouldBeOpened, cancelAnimation }: {
8
+ type InitialState = {
8
9
  shouldBeOpened: boolean;
9
10
  cancelAnimation?: boolean;
10
- }): {
11
- onAnimationEnd: () => void;
12
- state: COLLAPSE_STATES;
13
11
  };
14
- export declare function useStartedClosing(state: COLLAPSE_STATES): {
15
- isStartedClosing: boolean;
12
+ export declare function useCollapseState({ shouldBeOpened, cancelAnimation }: InitialState): {
16
13
  contentRef: import("react").RefObject<HTMLDivElement>;
14
+ isStartedClosing: boolean;
15
+ onAnimationEnd: () => void;
16
+ state: COLLAPSE_STATES;
17
17
  };
18
+ export {};
package/lib/use-collapse-state.js CHANGED
@@ -1,75 +1,192 @@
1
1
  "use client";
2
- import { useState, useRef, useCallback } from 'react';
2
+ import { c } from 'react-compiler-runtime';
3
+ import { useReducer, useRef, useLayoutEffect } from 'react';
3
4
  var COLLAPSE_STATES;
4
5
 
5
6
  (function (COLLAPSE_STATES) {
6
7
  COLLAPSE_STATES["OPENING"] = "OPENING";
7
8
  COLLAPSE_STATES["OPEN"] = "OPEN";
9
+ COLLAPSE_STATES["CLOSING_PREPARE"] = "CLOSING_PREPARE";
8
10
  COLLAPSE_STATES["CLOSING"] = "CLOSING";
9
11
  COLLAPSE_STATES["CLOSE"] = "CLOSE";
10
- })(COLLAPSE_STATES || (COLLAPSE_STATES = {})); // eslint-disable-next-line complexity
12
+ })(COLLAPSE_STATES || (COLLAPSE_STATES = {}));
11
13
 
14
+ function forceLayoutRecalculation(element) {
15
+ 'use no memo'; // eslint-disable-next-line no-unused-expressions
12
16
 
13
- function useCollapseState(_ref) {
17
+ element.offsetHeight;
18
+ }
19
+
20
+ function getInitialState(_ref) {
14
21
  let {
15
22
  shouldBeOpened,
16
23
  cancelAnimation
17
24
  } = _ref;
18
- const [, setDummyState] = useState(false);
19
- const stateRef = useRef(COLLAPSE_STATES.CLOSE);
20
- const onAnimationEnd = useCallback(() => {
21
- if ((stateRef.current === COLLAPSE_STATES.CLOSING || stateRef.current === COLLAPSE_STATES.OPENING) && !shouldBeOpened) {
22
- stateRef.current = COLLAPSE_STATES.CLOSE; //force rerender
23
25
 
24
- setDummyState(s => !s);
25
- } else if (stateRef.current === COLLAPSE_STATES.OPENING && shouldBeOpened) {
26
- stateRef.current = COLLAPSE_STATES.OPEN; //force rerender
26
+ if (!shouldBeOpened) {
27
+ return COLLAPSE_STATES.CLOSE;
28
+ }
29
+
30
+ return cancelAnimation ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.OPENING;
31
+ }
27
32
 
28
- setDummyState(s => !s);
33
+ function getStateForTarget(state, shouldBeOpened, cancelAnimation) {
34
+ if (cancelAnimation) {
35
+ return shouldBeOpened ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.CLOSE;
36
+ }
37
+
38
+ if (shouldBeOpened) {
39
+ // Closing has not started visually yet, so there is nothing to animate back.
40
+ if (state === COLLAPSE_STATES.CLOSING_PREPARE) {
41
+ return COLLAPSE_STATES.OPEN;
29
42
  }
30
- }, [shouldBeOpened]);
31
43
 
32
- if (shouldBeOpened && stateRef.current !== COLLAPSE_STATES.OPEN) {
33
- stateRef.current = cancelAnimation ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.OPENING;
34
- } else if ((stateRef.current === COLLAPSE_STATES.OPEN || stateRef.current === COLLAPSE_STATES.OPENING) && !shouldBeOpened) {
35
- stateRef.current = cancelAnimation ? COLLAPSE_STATES.CLOSE : COLLAPSE_STATES.CLOSING;
44
+ return state === COLLAPSE_STATES.OPEN || state === COLLAPSE_STATES.OPENING ? state : COLLAPSE_STATES.OPENING;
45
+ }
46
+
47
+ if (state === COLLAPSE_STATES.CLOSE || state === COLLAPSE_STATES.CLOSING_PREPARE || state === COLLAPSE_STATES.CLOSING) {
48
+ return state;
36
49
  }
37
50
 
38
- return {
39
- onAnimationEnd,
40
- state: stateRef.current
41
- };
51
+ return state === COLLAPSE_STATES.OPEN ? COLLAPSE_STATES.CLOSING_PREPARE : COLLAPSE_STATES.CLOSING;
42
52
  }
43
53
 
44
- function useStartedClosing(state) {
45
- const isStartedClosingRef = useRef(false);
46
- const prevState = useRef(state);
54
+ function collapseReducer(state, action) {
55
+ switch (action.type) {
56
+ case 'TARGET_CHANGED':
57
+ return getStateForTarget(state, action.shouldBeOpened, action.cancelAnimation);
58
+
59
+ case 'CLOSING_READY':
60
+ return state === COLLAPSE_STATES.CLOSING_PREPARE ? COLLAPSE_STATES.CLOSING : state;
61
+
62
+ case 'TRANSITION_END':
63
+ if (action.shouldBeOpened && state === COLLAPSE_STATES.OPENING) {
64
+ return COLLAPSE_STATES.OPEN;
65
+ }
66
+
67
+ if (!action.shouldBeOpened && state === COLLAPSE_STATES.CLOSING) {
68
+ return COLLAPSE_STATES.CLOSE;
69
+ }
70
+
71
+ return state;
72
+
73
+ default:
74
+ return state;
75
+ }
76
+ }
77
+
78
+ function useCollapseState(t0) {
79
+ const $ = c(16);
80
+ const {
81
+ shouldBeOpened,
82
+ cancelAnimation
83
+ } = t0;
84
+ let t1;
85
+
86
+ if ($[0] !== cancelAnimation || $[1] !== shouldBeOpened) {
87
+ t1 = {
88
+ shouldBeOpened,
89
+ cancelAnimation
90
+ };
91
+ $[0] = cancelAnimation;
92
+ $[1] = shouldBeOpened;
93
+ $[2] = t1;
94
+ } else {
95
+ t1 = $[2];
96
+ }
97
+
98
+ const [state, dispatch] = useReducer(collapseReducer, t1, getInitialState);
47
99
  const contentRef = useRef(null);
48
- const [, setDummyState] = useState(false);
100
+ let t2;
101
+ let t3;
49
102
 
50
- if (prevState.current === COLLAPSE_STATES.OPEN && state === COLLAPSE_STATES.CLOSING) {
51
- isStartedClosingRef.current = true; // the next frame we need to force layout recalculations and new render
103
+ if ($[3] !== cancelAnimation || $[4] !== shouldBeOpened) {
104
+ t2 = () => {
105
+ dispatch({
106
+ type: "TARGET_CHANGED",
107
+ shouldBeOpened,
108
+ cancelAnimation
109
+ });
110
+ };
52
111
 
53
- if (typeof window !== 'undefined') {
54
- requestAnimationFrame(() => {
55
- if (!contentRef.current || !isStartedClosingRef.current) {
56
- return;
57
- } // force layout recalc, without this step firefox doesn't register style values for transitions
58
- // eslint-disable-next-line no-unused-expressions
112
+ t3 = [shouldBeOpened, cancelAnimation];
113
+ $[3] = cancelAnimation;
114
+ $[4] = shouldBeOpened;
115
+ $[5] = t2;
116
+ $[6] = t3;
117
+ } else {
118
+ t2 = $[5];
119
+ t3 = $[6];
120
+ }
121
+
122
+ useLayoutEffect(t2, t3);
123
+ let t4;
124
+ let t5;
59
125
 
126
+ if ($[7] !== state) {
127
+ t4 = () => {
128
+ if (state !== COLLAPSE_STATES.CLOSING_PREPARE) {
129
+ return;
130
+ }
60
131
 
61
- contentRef.current.offsetHeight;
62
- isStartedClosingRef.current = false;
63
- setDummyState(s => !s);
132
+ const frame = requestAnimationFrame(() => {
133
+ if (contentRef.current) {
134
+ forceLayoutRecalculation(contentRef.current);
135
+ }
136
+
137
+ dispatch({
138
+ type: "CLOSING_READY"
139
+ });
64
140
  });
65
- }
141
+ return () => cancelAnimationFrame(frame);
142
+ };
143
+
144
+ t5 = [state];
145
+ $[7] = state;
146
+ $[8] = t4;
147
+ $[9] = t5;
148
+ } else {
149
+ t4 = $[8];
150
+ t5 = $[9];
151
+ }
152
+
153
+ useLayoutEffect(t4, t5);
154
+ let t6;
155
+
156
+ if ($[10] !== shouldBeOpened) {
157
+ t6 = () => {
158
+ dispatch({
159
+ type: "TRANSITION_END",
160
+ shouldBeOpened
161
+ });
162
+ };
163
+
164
+ $[10] = shouldBeOpened;
165
+ $[11] = t6;
166
+ } else {
167
+ t6 = $[11];
168
+ }
169
+
170
+ const onAnimationEnd = t6;
171
+ const t7 = state === COLLAPSE_STATES.CLOSING_PREPARE;
172
+ let t8;
173
+
174
+ if ($[12] !== onAnimationEnd || $[13] !== state || $[14] !== t7) {
175
+ t8 = {
176
+ contentRef,
177
+ isStartedClosing: t7,
178
+ onAnimationEnd,
179
+ state
180
+ };
181
+ $[12] = onAnimationEnd;
182
+ $[13] = state;
183
+ $[14] = t7;
184
+ $[15] = t8;
185
+ } else {
186
+ t8 = $[15];
66
187
  }
67
188
 
68
- prevState.current = state;
69
- return {
70
- isStartedClosing: isStartedClosingRef.current,
71
- contentRef
72
- };
189
+ return t8;
73
190
  }
74
191
 
75
- export { COLLAPSE_STATES, useCollapseState, useStartedClosing };
192
+ export { COLLAPSE_STATES, useCollapseState };