@rescui/checkbox 0.11.3 → 0.11.5-RUI-308-Fix-select-issues-405b9fa40.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.
Files changed (12) hide show
  1. package/lib/checkbox.js +2 -2
  2. package/lib/index.css +79 -69
  3. package/lib/parts/checkbox-list.js +2 -2
  4. package/lib/parts/checkbox-list.p.module.css.js +13 -13
  5. package/lib/parts/checkbox.p.module.css.js +22 -22
  6. package/lib/parts/use-safe-id.d.ts +4 -0
  7. package/lib/parts/use-safe-id.js +10 -0
  8. package/lib/public-api.p.css +5 -0
  9. package/lib/public-api.pcss +5 -0
  10. package/package.json +9 -9
  11. package/lib/parts/use-backward-compatible-id.d.ts +0 -4
  12. package/lib/parts/use-backward-compatible-id.js +0 -14
package/lib/checkbox.js CHANGED
@@ -7,7 +7,7 @@ import cn from 'classnames';
7
7
  import { ErrorMessage } from '@rescui/form-field';
8
8
  import { GroupContext } from './parts/group-context.js';
9
9
  import CheckboxControl from './parts/checkbox-control.js';
10
- import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
10
+ import { useSafeId } from './parts/use-safe-id.js';
11
11
  import styles from './parts/checkbox.p.module.css.js';
12
12
  const THEME_STYLES = {
13
13
  light: styles.themeLight,
@@ -43,7 +43,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
43
43
  size: contextSize
44
44
  } = useContext(GroupContext);
45
45
  const size = !inGroup ? propsSize : contextSize || propsSize;
46
- const uniqueId = `checkbox-list-${useBackwardCompatibleId()}`;
46
+ const uniqueId = `checkbox-list-${useSafeId()}`;
47
47
  const errorId = `${id ? id : uniqueId}-error`;
48
48
  return /*#__PURE__*/React.createElement("div", {
49
49
  className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size]),
package/lib/index.css CHANGED
@@ -1,19 +1,24 @@
1
- ._themeLight_1dbkx3o_8{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._themeLight_mhvs2m_8{
2
7
  --rs-theme-dark:0;
3
8
  }
4
- ._themeDark_1dbkx3o_11{
9
+ ._themeDark_mhvs2m_11{
5
10
  --rs-theme-dark:1;
6
11
  }
7
- ._checkboxSizeS_1dbkx3o_15{
12
+ ._checkboxSizeS_mhvs2m_15{
8
13
  --_rs-checkbox-parts-offset:4px;
9
14
  }
10
- ._checkboxSizeM_1dbkx3o_18{
15
+ ._checkboxSizeM_mhvs2m_18{
11
16
  --_rs-checkbox-parts-offset:8px;
12
17
  }
13
- ._checkboxSizeL_1dbkx3o_21{
18
+ ._checkboxSizeL_mhvs2m_21{
14
19
  --_rs-checkbox-parts-offset:8px;
15
20
  }
16
- ._sizeS_1dbkx3o_25{
21
+ ._sizeS_mhvs2m_25{
17
22
  --_rs-checkbox-ci-mark-s-display:initial;
18
23
  --_rs-checkbox-ci-mark-m-display:none;
19
24
  --_rs-checkbox-ci-mark-l-display:none;
@@ -21,7 +26,7 @@
21
26
  --_rs-checkbox-ci-shadow-size:3px;
22
27
  --_rs-checkbox-ci-indeterminate-icon-border-width:6px 3px;
23
28
  }
24
- ._sizeM_1dbkx3o_28{
29
+ ._sizeM_mhvs2m_28{
25
30
  --_rs-checkbox-ci-mark-s-display:none;
26
31
  --_rs-checkbox-ci-mark-m-display:initial;
27
32
  --_rs-checkbox-ci-mark-l-display:none;
@@ -29,7 +34,7 @@
29
34
  --_rs-checkbox-ci-shadow-size:3px;
30
35
  --_rs-checkbox-ci-indeterminate-icon-border-width:8px 3px;
31
36
  }
32
- ._sizeL_1dbkx3o_31{
37
+ ._sizeL_mhvs2m_31{
33
38
  --_rs-checkbox-ci-mark-s-display:none;
34
39
  --_rs-checkbox-ci-mark-m-display:none;
35
40
  --_rs-checkbox-ci-mark-l-display:initial;
@@ -37,14 +42,14 @@
37
42
  --_rs-checkbox-ci-shadow-size:4px;
38
43
  --_rs-checkbox-ci-indeterminate-icon-border-width:9px 3px;
39
44
  }
40
- ._classic_1dbkx3o_35{
45
+ ._classic_mhvs2m_35{
41
46
  --_rs-checkbox-ci-mark-color:#FFFFFF;
42
47
  --_rs-checkbox-ci-indeterminate-icon-border-color:var(--_rs-color-primary);
43
48
  --_rs-checkbox-ci-indeterminate-icon-background-color:#FFFFFF;
44
49
  --_rs-checkbox-ci-checked-icon-border-color:var(--_rs-color-primary);
45
50
  --_rs-checkbox-ci-hover-icon-box-shadow:var(--_rs-color-primary-t-fog);
46
51
  }
47
- ._rock_1dbkx3o_38{
52
+ ._rock_mhvs2m_38{
48
53
  --_rs-checkbox-ci-mark-color: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));
49
54
  --_rs-checkbox-ci-indeterminate-icon-border-color:rgb(
50
55
  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)
@@ -60,7 +65,7 @@
60
65
  0.1
61
66
  );
62
67
  }
63
- ._checkbox_1dbkx3o_15{
68
+ ._checkbox_mhvs2m_15{
64
69
  --_rs-theme-dark:var(
65
70
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
66
71
  var(--rs-theme-dark, 0)
@@ -70,7 +75,7 @@
70
75
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
71
76
  }
72
77
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
73
- ._checkbox_1dbkx3o_15{
78
+ ._checkbox_mhvs2m_15{
74
79
  --_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)));
75
80
  --_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)));
76
81
  --_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)));
@@ -79,7 +84,7 @@
79
84
  }
80
85
  }
81
86
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
82
- ._checkbox_1dbkx3o_15{
87
+ ._checkbox_mhvs2m_15{
83
88
  --_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);
84
89
  --_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));
85
90
  --_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));
@@ -88,18 +93,18 @@
88
93
  }
89
94
  }
90
95
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
91
- ._checkbox_1dbkx3o_15{
96
+ ._checkbox_mhvs2m_15{
92
97
  --_rs-color-danger:color-mix(in srgb, #CC1400 calc(100%*var(--_rs-theme-light-coefficient, 1)), #FF6553 calc(100%*var(--_rs-theme-dark-coefficient, 0)));
93
98
  --_rs-color-danger-bg:color-mix(in srgb, rgba(204,20,0, 0.2) calc(100%*var(--_rs-theme-light-coefficient, 1)), rgba(255,101,83, 0.2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
94
99
  }
95
100
  }
96
101
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
97
- ._checkbox_1dbkx3o_15{
102
+ ._checkbox_mhvs2m_15{
98
103
  --_rs-color-danger:rgb(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83));
99
104
  --_rs-color-danger-bg:rgba(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83), 0.2);
100
105
  }
101
106
  }
102
- ._checkbox_1dbkx3o_15 {
107
+ ._checkbox_mhvs2m_15 {
103
108
 
104
109
  position:relative;
105
110
 
@@ -114,7 +119,7 @@
114
119
 
115
120
  text-align:left;
116
121
  }
117
- ._input_1dbkx3o_65{
122
+ ._input_mhvs2m_65{
118
123
  position:absolute;
119
124
  z-index:-1;
120
125
 
@@ -124,7 +129,7 @@
124
129
 
125
130
  border:0;
126
131
  }
127
- ._icon_1dbkx3o_76{
132
+ ._icon_mhvs2m_76{
128
133
  display:inline-block;
129
134
  float:left;
130
135
 
@@ -140,17 +145,17 @@
140
145
 
141
146
  transition:border-width var(--rs-transition-function, ease-out) 100ms, border-color var(--rs-transition-function, ease-out) 100ms;
142
147
  }
143
- ._enabled_1dbkx3o_93 ._icon_1dbkx3o_76{
148
+ ._enabled_mhvs2m_93 ._icon_mhvs2m_76{
144
149
  cursor:pointer;
145
150
  }
146
- ._indeterminate_1dbkx3o_97 ._icon_1dbkx3o_76{
151
+ ._indeterminate_mhvs2m_97 ._icon_mhvs2m_76{
147
152
  border-width:var(--_rs-checkbox-ci-indeterminate-icon-border-width);
148
153
  }
149
- ._input_1dbkx3o_65:checked + ._icon_1dbkx3o_76{
154
+ ._input_mhvs2m_65:checked + ._icon_mhvs2m_76{
150
155
  border-width:calc(var(--_rs-checkbox-ci-size)/2);
151
156
  }
152
- ._disabled_1dbkx3o_105 ._icon_1dbkx3o_76._icon_1dbkx3o_76,
153
- ._input_1dbkx3o_65:disabled + ._icon_1dbkx3o_76{
157
+ ._disabled_mhvs2m_105 ._icon_mhvs2m_76._icon_mhvs2m_76,
158
+ ._input_mhvs2m_65:disabled + ._icon_mhvs2m_76{
154
159
  border-color:rgb(calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(187 - var(--_rs-theme-dark-coefficient, 0)*91));
155
160
 
156
161
  cursor:not-allowed;
@@ -158,27 +163,27 @@
158
163
 
159
164
  background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
160
165
  }
161
- ._input_1dbkx3o_65:hover + ._icon_1dbkx3o_76,
162
- ._enabled_1dbkx3o_93:hover ._icon_1dbkx3o_76{
166
+ ._input_mhvs2m_65:hover + ._icon_mhvs2m_76,
167
+ ._enabled_mhvs2m_93:hover ._icon_mhvs2m_76{
163
168
  background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*182));
164
169
  }
165
- ._enabled_1dbkx3o_93._indeterminate_1dbkx3o_97 ._icon_1dbkx3o_76,
166
- ._enabled_1dbkx3o_93._indeterminate_1dbkx3o_97:hover ._icon_1dbkx3o_76,
167
- ._enabled_1dbkx3o_93._indeterminate_1dbkx3o_97 ._input_1dbkx3o_65:hover + ._icon_1dbkx3o_76{
170
+ ._enabled_mhvs2m_93._indeterminate_mhvs2m_97 ._icon_mhvs2m_76,
171
+ ._enabled_mhvs2m_93._indeterminate_mhvs2m_97:hover ._icon_mhvs2m_76,
172
+ ._enabled_mhvs2m_93._indeterminate_mhvs2m_97 ._input_mhvs2m_65:hover + ._icon_mhvs2m_76{
168
173
  border-color:var(--_rs-checkbox-ci-indeterminate-icon-border-color);
169
174
 
170
175
  background-color:var(
171
176
  --_rs-checkbox-ci-indeterminate-icon-background-color
172
177
  );
173
178
  }
174
- ._enabled_1dbkx3o_93 ._input_1dbkx3o_65:checked + ._icon_1dbkx3o_76._icon_1dbkx3o_76{
179
+ ._enabled_mhvs2m_93 ._input_mhvs2m_65:checked + ._icon_mhvs2m_76._icon_mhvs2m_76{
175
180
  border-color:var(--_rs-checkbox-ci-checked-icon-border-color);
176
181
  }
177
- ._error_1dbkx3o_134 ._icon_1dbkx3o_76._icon_1dbkx3o_76._icon_1dbkx3o_76._icon_1dbkx3o_76,
178
- ._input_1dbkx3o_65:invalid + ._icon_1dbkx3o_76._icon_1dbkx3o_76._icon_1dbkx3o_76{
182
+ ._error_mhvs2m_134 ._icon_mhvs2m_76._icon_mhvs2m_76._icon_mhvs2m_76._icon_mhvs2m_76,
183
+ ._input_mhvs2m_65:invalid + ._icon_mhvs2m_76._icon_mhvs2m_76._icon_mhvs2m_76{
179
184
  border-color:var(--_rs-color-danger);
180
185
  }
181
- ._icon_1dbkx3o_76::after{
186
+ ._icon_mhvs2m_76::after{
182
187
  position:absolute;
183
188
  top:var(--_rs-checkbox-ci-shadow-size);
184
189
  right:var(--_rs-checkbox-ci-shadow-size);
@@ -187,15 +192,15 @@
187
192
 
188
193
  content:'';
189
194
  }
190
- ._enabled_1dbkx3o_93:hover > ._icon_1dbkx3o_76::after,
191
- label:hover ._enabled_1dbkx3o_93 > ._icon_1dbkx3o_76::after,
192
- ._enabled_1dbkx3o_93 ._input_1dbkx3o_65:active + ._icon_1dbkx3o_76::after{
195
+ ._enabled_mhvs2m_93:hover > ._icon_mhvs2m_76::after,
196
+ label:hover ._enabled_mhvs2m_93 > ._icon_mhvs2m_76::after,
197
+ ._enabled_mhvs2m_93 ._input_mhvs2m_65:active + ._icon_mhvs2m_76::after{
193
198
  box-shadow:0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-checkbox-ci-hover-icon-box-shadow);
194
199
  }
195
- ._enabled_1dbkx3o_93 ._input_1dbkx3o_65:focus[data-focus-method='key'] + ._icon_1dbkx3o_76::after{
200
+ ._enabled_mhvs2m_93 ._input_mhvs2m_65:focus[data-focus-method='key'] + ._icon_mhvs2m_76::after{
196
201
  box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-color-primary-t-dim);
197
202
  }
198
- ._checkmark_1dbkx3o_161{
203
+ ._checkmark_mhvs2m_161{
199
204
  position:absolute;
200
205
  top:var(--_rs-checkbox-ci-shadow-size);
201
206
  left:var(--_rs-checkbox-ci-shadow-size);
@@ -206,36 +211,41 @@
206
211
  height:var(--_rs-checkbox-ci-size);
207
212
  fill:currentColor;
208
213
  }
209
- ._enabled_1dbkx3o_93 ._checkmark_1dbkx3o_161{
214
+ ._enabled_mhvs2m_93 ._checkmark_mhvs2m_161{
210
215
  color:var(--_rs-checkbox-ci-mark-color);
211
216
  }
212
- ._disabled_1dbkx3o_105 ._checkmark_1dbkx3o_161,
213
- ._input_1dbkx3o_65:disabled + ._icon_1dbkx3o_76 > ._checkmark_1dbkx3o_161{
217
+ ._disabled_mhvs2m_105 ._checkmark_mhvs2m_161,
218
+ ._input_mhvs2m_65:disabled + ._icon_mhvs2m_76 > ._checkmark_mhvs2m_161{
214
219
  color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
215
220
  }
216
- ._input_1dbkx3o_65:checked + ._icon_1dbkx3o_76 > ._checkmark_1dbkx3o_161{
221
+ ._input_mhvs2m_65:checked + ._icon_mhvs2m_76 > ._checkmark_mhvs2m_161{
217
222
  display:block;
218
223
  }
219
- ._markS_1dbkx3o_186{
224
+ ._markS_mhvs2m_186{
220
225
  display:var(--_rs-checkbox-ci-mark-s-display);
221
226
  }
222
- ._markM_1dbkx3o_189{
227
+ ._markM_mhvs2m_189{
223
228
  display:var(--_rs-checkbox-ci-mark-m-display);
224
229
  }
225
- ._markL_1dbkx3o_192{
230
+ ._markL_mhvs2m_192{
226
231
  display:var(--_rs-checkbox-ci-mark-l-display);
227
232
  }
228
- ._errorMessage_1dbkx3o_196{
233
+ ._errorMessage_mhvs2m_196{
229
234
  margin-top:var(--_rs-checkbox-parts-offset);
230
235
  }
231
236
 
232
- ._themeLight_52cm7x_6{
237
+ @property --_rs-theme-dark-coefficient{
238
+ syntax:'<number>';
239
+ inherits:true;
240
+ initial-value:0;
241
+ }
242
+ ._themeLight_808rqv_6{
233
243
  --rs-theme-dark:0;
234
244
  }
235
- ._themeDark_52cm7x_9{
245
+ ._themeDark_808rqv_9{
236
246
  --rs-theme-dark:1;
237
247
  }
238
- ._container_52cm7x_13{
248
+ ._container_808rqv_13{
239
249
  --_rs-theme-dark:var(
240
250
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
251
  var(--rs-theme-dark, 0)
@@ -245,7 +255,7 @@
245
255
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
256
  }
247
257
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._container_52cm7x_13{
258
+ ._container_808rqv_13{
249
259
  --_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)));
250
260
  --_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)));
251
261
  --_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)));
@@ -254,7 +264,7 @@
254
264
  }
255
265
  }
256
266
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._container_52cm7x_13{
267
+ ._container_808rqv_13{
258
268
  --_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);
259
269
  --_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));
260
270
  --_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));
@@ -262,11 +272,11 @@
262
272
  --_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));
263
273
  }
264
274
  }
265
- ._sizeS_52cm7x_18{
275
+ ._sizeS_808rqv_18{
266
276
  --_rs-checkbox-list-label-offset:4px;
267
277
  --_rs-checkbox-list-left-offset:28px;
268
278
  }
269
- ._sizeS_52cm7x_18 [data-rs-internal='checkbox-list__label']{
279
+ ._sizeS_808rqv_18 [data-rs-internal='checkbox-list__label']{
270
280
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
271
281
  --_rs-typography-text-transform:initial;
272
282
  --_rs-typography-font-variant-numeric:initial;
@@ -301,7 +311,7 @@
301
311
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
302
312
  --_rs-typography-link-border-bottom-width-from-text:1px;
303
313
  }
304
- ._sizeS_52cm7x_18 [data-rs-internal='checkbox-list__bold-label']{
314
+ ._sizeS_808rqv_18 [data-rs-internal='checkbox-list__bold-label']{
305
315
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
306
316
  --_rs-typography-text-transform:initial;
307
317
  --_rs-typography-font-variant-numeric:initial;
@@ -333,11 +343,11 @@
333
343
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
334
344
  --_rs-typography-link-border-bottom-width-from-text:2px;
335
345
  }
336
- ._sizeM_52cm7x_21{
346
+ ._sizeM_808rqv_21{
337
347
  --_rs-checkbox-list-label-offset:8px;
338
348
  --_rs-checkbox-list-left-offset:32px;
339
349
  }
340
- ._sizeM_52cm7x_21 [data-rs-internal='checkbox-list__label']{
350
+ ._sizeM_808rqv_21 [data-rs-internal='checkbox-list__label']{
341
351
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
342
352
  --_rs-typography-text-transform:initial;
343
353
  --_rs-typography-font-variant-numeric:initial;
@@ -376,11 +386,11 @@
376
386
  --_rs-typography-link-border-bottom-width-from-text:1px;
377
387
  }
378
388
  @media screen and (max-width: 640px){
379
- ._sizeM_52cm7x_21 [data-rs-internal='checkbox-list__label']{
389
+ ._sizeM_808rqv_21 [data-rs-internal='checkbox-list__label']{
380
390
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
381
391
  }
382
392
  }
383
- ._sizeM_52cm7x_21 [data-rs-internal='checkbox-list__bold-label']{
393
+ ._sizeM_808rqv_21 [data-rs-internal='checkbox-list__bold-label']{
384
394
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
385
395
  --_rs-typography-text-transform:initial;
386
396
  --_rs-typography-font-variant-numeric:initial;
@@ -412,11 +422,11 @@
412
422
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
413
423
  --_rs-typography-link-border-bottom-width-from-text:2px;
414
424
  }
415
- ._sizeL_52cm7x_24{
425
+ ._sizeL_808rqv_24{
416
426
  --_rs-checkbox-list-label-offset:12px;
417
427
  --_rs-checkbox-list-left-offset:44px;
418
428
  }
419
- ._sizeL_52cm7x_24 [data-rs-internal='checkbox-list__label']{
429
+ ._sizeL_808rqv_24 [data-rs-internal='checkbox-list__label']{
420
430
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
421
431
  --_rs-typography-text-transform:initial;
422
432
  --_rs-typography-font-variant-numeric:initial;
@@ -455,11 +465,11 @@
455
465
  --_rs-typography-link-border-bottom-width-from-text:1px;
456
466
  }
457
467
  @media screen and (max-width: 640px){
458
- ._sizeL_52cm7x_24 [data-rs-internal='checkbox-list__label']{
468
+ ._sizeL_808rqv_24 [data-rs-internal='checkbox-list__label']{
459
469
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
460
470
  }
461
471
  }
462
- ._sizeL_52cm7x_24 [data-rs-internal='checkbox-list__bold-label']{
472
+ ._sizeL_808rqv_24 [data-rs-internal='checkbox-list__bold-label']{
463
473
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
464
474
  --_rs-typography-text-transform:initial;
465
475
  --_rs-typography-font-variant-numeric:initial;
@@ -491,10 +501,10 @@
491
501
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
492
502
  --_rs-typography-link-border-bottom-width-from-text:2px;
493
503
  }
494
- ._inner_52cm7x_28{
504
+ ._inner_808rqv_28{
495
505
  --rs-out-checkbox-list-left-offset:var(--_rs-checkbox-list-left-offset);
496
506
  }
497
- ._label_52cm7x_32{
507
+ ._label_808rqv_32{
498
508
  letter-spacing:var(
499
509
  --rs-text-base-letter-spacing,
500
510
  var(--_rs-typography-letter-spacing)
@@ -514,23 +524,23 @@
514
524
  margin:0 0 var(--_rs-checkbox-list-label-offset) 0;
515
525
  padding:0;
516
526
  }
517
- ._disabled_52cm7x_39 ._label_52cm7x_32{
527
+ ._disabled_808rqv_39 ._label_808rqv_32{
518
528
  color:var(
519
529
  --rs-color-pale,
520
530
  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)
521
531
  );
522
532
  }
523
- ._footer_52cm7x_44{
533
+ ._footer_808rqv_44{
524
534
  display:flex;
525
535
  flex-direction:column;
526
536
  }
527
- ._errorMessage_52cm7x_49{
537
+ ._errorMessage_808rqv_49{
528
538
  order:99;
529
539
  }
530
- ._error_52cm7x_49 ._errorMessage_52cm7x_49{
540
+ ._error_808rqv_49 ._errorMessage_808rqv_49{
531
541
  order:0;
532
542
  }
533
- ._note_52cm7x_58{
543
+ ._note_808rqv_58{
534
544
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
535
545
  --_rs-typography-text-transform:initial;
536
546
  --_rs-typography-font-variant-numeric:initial;
@@ -590,7 +600,7 @@
590
600
 
591
601
  order:1;
592
602
  }
593
- ._disabled_52cm7x_39 ._note_52cm7x_58{
603
+ ._disabled_808rqv_39 ._note_808rqv_58{
594
604
  --_rs-typography-hardness-color:var(
595
605
  --rs-color-pale,
596
606
  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)
package/lib/parts/checkbox-list.js CHANGED
@@ -7,7 +7,7 @@ import { useThemeWithUndefined } from '@rescui/ui-contexts';
7
7
  import { ErrorMessage, shouldRenderErrorMessage } from '@rescui/form-field';
8
8
  import styles from './checkbox-list.p.module.css.js';
9
9
  import CheckboxManager from './checkbox-manager.js';
10
- import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
10
+ import { useSafeId } from './use-safe-id.js';
11
11
  const THEME_STYLES = {
12
12
  light: styles.themeLight,
13
13
  dark: styles.themeDark
@@ -39,7 +39,7 @@ const CheckboxList = _ref => {
39
39
  ...restProps
40
40
  } = _ref;
41
41
  const theme = useThemeWithUndefined(themeFromProps);
42
- const uniqueId = `checkbox-list-${useBackwardCompatibleId()}`;
42
+ const uniqueId = `checkbox-list-${useSafeId()}`;
43
43
  const errorId = `${id ? id : uniqueId}-error`;
44
44
  const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
45
45
  return /*#__PURE__*/React.createElement(CheckboxManager, {
package/lib/parts/checkbox-list.p.module.css.js CHANGED
@@ -1,16 +1,16 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_52cm7x_6",
3
- "themeDark": "_themeDark_52cm7x_9",
4
- "container": "_container_52cm7x_13",
5
- "sizeS": "_sizeS_52cm7x_18",
6
- "sizeM": "_sizeM_52cm7x_21",
7
- "sizeL": "_sizeL_52cm7x_24",
8
- "inner": "_inner_52cm7x_28",
9
- "label": "_label_52cm7x_32",
10
- "disabled": "_disabled_52cm7x_39",
11
- "footer": "_footer_52cm7x_44",
12
- "errorMessage": "_errorMessage_52cm7x_49",
13
- "error": "_error_52cm7x_49",
14
- "note": "_note_52cm7x_58"
2
+ "themeLight": "_themeLight_808rqv_6",
3
+ "themeDark": "_themeDark_808rqv_9",
4
+ "container": "_container_808rqv_13",
5
+ "sizeS": "_sizeS_808rqv_18",
6
+ "sizeM": "_sizeM_808rqv_21",
7
+ "sizeL": "_sizeL_808rqv_24",
8
+ "inner": "_inner_808rqv_28",
9
+ "label": "_label_808rqv_32",
10
+ "disabled": "_disabled_808rqv_39",
11
+ "footer": "_footer_808rqv_44",
12
+ "errorMessage": "_errorMessage_808rqv_49",
13
+ "error": "_error_808rqv_49",
14
+ "note": "_note_808rqv_58"
15
15
  };
16
16
  export { styles as default };
package/lib/parts/checkbox.p.module.css.js CHANGED
@@ -1,25 +1,25 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1dbkx3o_8",
3
- "themeDark": "_themeDark_1dbkx3o_11",
4
- "checkboxSizeS": "_checkboxSizeS_1dbkx3o_15",
5
- "checkboxSizeM": "_checkboxSizeM_1dbkx3o_18",
6
- "checkboxSizeL": "_checkboxSizeL_1dbkx3o_21",
7
- "sizeS": "_sizeS_1dbkx3o_25",
8
- "sizeM": "_sizeM_1dbkx3o_28",
9
- "sizeL": "_sizeL_1dbkx3o_31",
10
- "classic": "_classic_1dbkx3o_35",
11
- "rock": "_rock_1dbkx3o_38",
12
- "checkbox": "_checkbox_1dbkx3o_15",
13
- "input": "_input_1dbkx3o_65",
14
- "icon": "_icon_1dbkx3o_76",
15
- "enabled": "_enabled_1dbkx3o_93",
16
- "indeterminate": "_indeterminate_1dbkx3o_97",
17
- "disabled": "_disabled_1dbkx3o_105",
18
- "error": "_error_1dbkx3o_134",
19
- "checkmark": "_checkmark_1dbkx3o_161",
20
- "markS": "_markS_1dbkx3o_186",
21
- "markM": "_markM_1dbkx3o_189",
22
- "markL": "_markL_1dbkx3o_192",
23
- "errorMessage": "_errorMessage_1dbkx3o_196"
2
+ "themeLight": "_themeLight_mhvs2m_8",
3
+ "themeDark": "_themeDark_mhvs2m_11",
4
+ "checkboxSizeS": "_checkboxSizeS_mhvs2m_15",
5
+ "checkboxSizeM": "_checkboxSizeM_mhvs2m_18",
6
+ "checkboxSizeL": "_checkboxSizeL_mhvs2m_21",
7
+ "sizeS": "_sizeS_mhvs2m_25",
8
+ "sizeM": "_sizeM_mhvs2m_28",
9
+ "sizeL": "_sizeL_mhvs2m_31",
10
+ "classic": "_classic_mhvs2m_35",
11
+ "rock": "_rock_mhvs2m_38",
12
+ "checkbox": "_checkbox_mhvs2m_15",
13
+ "input": "_input_mhvs2m_65",
14
+ "icon": "_icon_mhvs2m_76",
15
+ "enabled": "_enabled_mhvs2m_93",
16
+ "indeterminate": "_indeterminate_mhvs2m_97",
17
+ "disabled": "_disabled_mhvs2m_105",
18
+ "error": "_error_mhvs2m_134",
19
+ "checkmark": "_checkmark_mhvs2m_161",
20
+ "markS": "_markS_mhvs2m_186",
21
+ "markM": "_markM_mhvs2m_189",
22
+ "markL": "_markL_mhvs2m_192",
23
+ "errorMessage": "_errorMessage_mhvs2m_196"
24
24
  };
25
25
  export { styles as default };
package/lib/parts/use-safe-id.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ declare function useFallbackId(): number;
3
+ export declare const useSafeId: typeof React.useId | typeof useFallbackId;
4
+ export {};
package/lib/parts/use-safe-id.js ADDED
@@ -0,0 +1,10 @@
1
+ import React, { useState } from 'react';
2
+ let nextFallbackId = 0;
3
+
4
+ function useFallbackId() {
5
+ const [id] = useState(() => nextFallbackId++);
6
+ return id;
7
+ }
8
+
9
+ const useSafeId = React.useId ?? useFallbackId;
10
+ export { useSafeId };
package/lib/public-api.p.css CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-checkbox-list-size-s{
2
7
  &[class]{
3
8
  --_rs-checkbox-list-label-offset:4px;
package/lib/public-api.pcss CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-checkbox-list-size-s{
2
7
  &[class]{
3
8
  --_rs-checkbox-list-label-offset:4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/checkbox",
3
- "version": "0.11.3",
3
+ "version": "0.11.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,8 +17,8 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "@rescui/form-field": "^0.1.6",
21
- "@rescui/menu": "^0.14.0",
20
+ "@rescui/form-field": "0.1.8-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
21
+ "@rescui/menu": "0.14.2-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
22
22
  "classnames": "^2.2.6"
23
23
  },
24
24
  "peerDependencies": {
@@ -27,16 +27,16 @@
27
27
  "react": ">=16.8.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.3.2",
31
- "@rescui/postcss-preset-library": "^0.2.2",
32
- "@rescui/scripts": "^0.5.2",
33
- "@rescui/typography": "^0.27.3",
34
- "@rescui/visual-regression": "^0.1.4"
30
+ "@rescui/colors": "0.3.4-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
31
+ "@rescui/postcss-preset-library": "0.2.3",
32
+ "@rescui/scripts": "0.5.2",
33
+ "@rescui/typography": "0.27.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
34
+ "@rescui/visual-regression": "0.1.4"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rescui-scripts build && yarn run build-pcss-api",
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
41
+ "gitHead": "405b9fa40886b0ab6709c9185e8214599d2d792e"
42
42
  }
package/lib/parts/use-backward-compatible-id.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export declare const useBackwardCompatibleId: {
2
- (): string | number;
3
- counter: number;
4
- };
package/lib/parts/use-backward-compatible-id.js DELETED
@@ -1,14 +0,0 @@
1
- import React, { useRef } from 'react';
2
-
3
- const useBackwardCompatibleId = () => {
4
- const id = useRef(null);
5
-
6
- if (id.current === null) {
7
- id.current = useBackwardCompatibleId.counter++;
8
- }
9
-
10
- return (React.useId ? React.useId : () => id.current)();
11
- };
12
-
13
- useBackwardCompatibleId.counter = 0;
14
- export { useBackwardCompatibleId };