@rescui/select 0.21.1 → 0.23.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.
- package/lib/_virtual/index.css.js +12 -12
- package/lib/index.css +199 -194
- package/lib/styles/common.p.module.css.js +1 -1
- package/lib/styles/form-trigger.p.module.css.js +1 -1
- package/lib/styles/list-box.p.module.css.js +1 -1
- package/llm/components/multiselect.md +5 -5
- package/llm/components/select.md +11 -11
- package/package.json +4 -4
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var styles = {"themeLight":"
|
|
1
|
+
var styles = {"themeLight":"_themeLight_1g28wgo_6","themeDark":"_themeDark_1g28wgo_9","sizeS":"_sizeS_1g28wgo_13","sizeM":"_sizeM_1g28wgo_16","sizeL":"_sizeL_1g28wgo_19","classic":"_classic_1g28wgo_23","rock":"_rock_1g28wgo_26","root":"_root_1g28wgo_30","triggerContainer":"_triggerContainer_1g28wgo_36","disabled":"_disabled_1g28wgo_41","trigger":"_trigger_1g28wgo_36","error":"_error_1g28wgo_78","enabled":"_enabled_1g28wgo_83","searchable":"_searchable_1g28wgo_103","canBeMultiline":"_canBeMultiline_1g28wgo_129","triggerText":"_triggerText_1g28wgo_133","searchInput":"_searchInput_1g28wgo_134","labelNotSelected":"_labelNotSelected_1g28wgo_164","multi":"_multi_1g28wgo_216","tagsContainer":"_tagsContainer_1g28wgo_231","tag":"_tag_1g28wgo_231","filledTag":"_filledTag_1g28wgo_253","iconsWrapper":"_iconsWrapper_1g28wgo_261","toggle":"_toggle_1g28wgo_279","icon":"_icon_1g28wgo_261","clearIcon":"_clearIcon_1g28wgo_364","visuallyHidden":"_visuallyHidden_1g28wgo_426","select":"_select_1g28wgo_443","observable":"_observable_1g28wgo_465"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var styles = {"themeLight":"
|
|
1
|
+
var styles = {"themeLight":"_themeLight_ven7at_6","themeDark":"_themeDark_ven7at_9","sizeS":"_sizeS_ven7at_13","sizeM":"_sizeM_ven7at_16","sizeL":"_sizeL_ven7at_19","main":"_main_ven7at_23","label":"_label_ven7at_27","disabled":"_disabled_ven7at_33","footer":"_footer_ven7at_38","errorMessage":"_errorMessage_ven7at_45","error":"_error_ven7at_45","note":"_note_ven7at_54"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var styles = {"sizeS":"
|
|
1
|
+
var styles = {"sizeS":"_sizeS_1yb9ikn_6","sizeM":"_sizeM_1yb9ikn_9","sizeL":"_sizeL_1yb9ikn_12","classic":"_classic_1yb9ikn_16","rock":"_rock_1yb9ikn_26","listBox":"_listBox_1yb9ikn_37","item":"_item_1yb9ikn_53","selected":"_selected_1yb9ikn_91","disabled":"_disabled_1yb9ikn_105","checkIcon":"_checkIcon_1yb9ikn_112","visible":"_visible_1yb9ikn_119","divider":"_divider_1yb9ikn_126","groupHeader":"_groupHeader_1yb9ikn_140"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -10,7 +10,7 @@ Multiselect is a control that allows users to select multiple options from a lis
|
|
|
10
10
|
|
|
11
11
|
You can control what has been selected through `value`/`onChange` props combination. The state represents the collection of options displayed in the select box. The empty state represents by `[]`.
|
|
12
12
|
|
|
13
|
-
```
|
|
13
|
+
```jsx
|
|
14
14
|
import { useState } from 'react';
|
|
15
15
|
import { Multiselect } from '@rescui/select';
|
|
16
16
|
|
|
@@ -54,7 +54,7 @@ render(<MySelect />);
|
|
|
54
54
|
|
|
55
55
|
You can use the `isSingleLine` prop to limit from grow and force it to be always single line. In this case extra tags is hidden and display the count of hidden tags instead.
|
|
56
56
|
|
|
57
|
-
```
|
|
57
|
+
```jsx
|
|
58
58
|
import { useState } from 'react';
|
|
59
59
|
import { Multiselect } from '@rescui/select';
|
|
60
60
|
|
|
@@ -93,7 +93,7 @@ render(<MySelect />);
|
|
|
93
93
|
|
|
94
94
|
If your primary color background requires dark text color, use `--rs-select-contrast-primary` CSS variable.
|
|
95
95
|
|
|
96
|
-
```
|
|
96
|
+
```jsx
|
|
97
97
|
import { useState } from 'react';
|
|
98
98
|
import { Multiselect } from '@rescui/select';
|
|
99
99
|
|
|
@@ -158,7 +158,7 @@ To work around this, we can use the `renderInTrigger` prop to render the popover
|
|
|
158
158
|
|
|
159
159
|
Also use `disableFlip` prop and `overflow: visible` css on the dialog if options will overflow it.
|
|
160
160
|
|
|
161
|
-
```
|
|
161
|
+
```jsx
|
|
162
162
|
import { useState } from 'react';
|
|
163
163
|
import { Multiselect } from '@rescui/select';
|
|
164
164
|
|
|
@@ -226,7 +226,7 @@ render(
|
|
|
226
226
|
|
|
227
227
|
Use the controls to see the effect at different viewport widths.
|
|
228
228
|
|
|
229
|
-
```
|
|
229
|
+
```jsx
|
|
230
230
|
import { useState } from 'react';
|
|
231
231
|
import { Multiselect } from '@rescui/select';
|
|
232
232
|
|
package/llm/components/select.md
CHANGED
|
@@ -10,7 +10,7 @@ Select is a control that allows users to select one option from a longer list.
|
|
|
10
10
|
|
|
11
11
|
Countries:
|
|
12
12
|
|
|
13
|
-
```
|
|
13
|
+
```jsx
|
|
14
14
|
import { useState } from 'react';
|
|
15
15
|
import { Select } from '@rescui/select';
|
|
16
16
|
import COUNTRIES from '@/parts/select/countries';
|
|
@@ -42,7 +42,7 @@ render(<MySelect />);
|
|
|
42
42
|
|
|
43
43
|
Default value:
|
|
44
44
|
|
|
45
|
-
```
|
|
45
|
+
```jsx
|
|
46
46
|
import { useState } from 'react';
|
|
47
47
|
import { Select } from '@rescui/select';
|
|
48
48
|
|
|
@@ -77,7 +77,7 @@ render(<MySelect />);
|
|
|
77
77
|
|
|
78
78
|
#### With fallback to NativeSelect on iOS and Android devices
|
|
79
79
|
|
|
80
|
-
```
|
|
80
|
+
```jsx
|
|
81
81
|
import { useEffect, useState } from 'react';
|
|
82
82
|
import Sniffr from 'sniffr';
|
|
83
83
|
import { Select, NativeSelect } from '@rescui/select';
|
|
@@ -123,7 +123,7 @@ render(<MySelect />);
|
|
|
123
123
|
|
|
124
124
|
#### GroupOptions example with headers
|
|
125
125
|
|
|
126
|
-
```
|
|
126
|
+
```jsx
|
|
127
127
|
import { useEffect, useState } from 'react';
|
|
128
128
|
import Sniffr from 'sniffr';
|
|
129
129
|
import { Select, NativeSelect } from '@rescui/select';
|
|
@@ -204,7 +204,7 @@ We've adopted a second option. Here are the main reasons:
|
|
|
204
204
|
|
|
205
205
|
Here's a concise example of a wrapper that modifies the API to a key-only approach, offering a cleaner interface.
|
|
206
206
|
|
|
207
|
-
```
|
|
207
|
+
```jsx
|
|
208
208
|
import { useState } from 'react';
|
|
209
209
|
import { Select as RSelect } from '@rescui/select';
|
|
210
210
|
|
|
@@ -260,7 +260,7 @@ render(<MySelect />);
|
|
|
260
260
|
|
|
261
261
|
If your primary color background requires dark text color, use `--rs-select-contrast-primary` CSS variable.
|
|
262
262
|
|
|
263
|
-
```
|
|
263
|
+
```jsx
|
|
264
264
|
import { useState } from 'react';
|
|
265
265
|
import { Select } from '@rescui/select';
|
|
266
266
|
|
|
@@ -314,7 +314,7 @@ To work around this, we can use the `renderInTrigger` prop to render the popover
|
|
|
314
314
|
|
|
315
315
|
Also use `disableFlip` prop and `overflow: visible` css on the dialog if options will overflow it.
|
|
316
316
|
|
|
317
|
-
```
|
|
317
|
+
```jsx
|
|
318
318
|
import { useState } from 'react';
|
|
319
319
|
import { Select } from '@rescui/select';
|
|
320
320
|
|
|
@@ -369,7 +369,7 @@ render(
|
|
|
369
369
|
|
|
370
370
|
#### Example:
|
|
371
371
|
|
|
372
|
-
```
|
|
372
|
+
```jsx
|
|
373
373
|
import { useState } from 'react';
|
|
374
374
|
import { NativeSelect } from '@rescui/select';
|
|
375
375
|
|
|
@@ -401,7 +401,7 @@ render(<MySelect />);
|
|
|
401
401
|
|
|
402
402
|
#### Custom trigger for NativeSelect
|
|
403
403
|
|
|
404
|
-
```
|
|
404
|
+
```jsx
|
|
405
405
|
import { useState } from 'react';
|
|
406
406
|
import { NativeSelect } from '@rescui/select';
|
|
407
407
|
|
|
@@ -457,7 +457,7 @@ render(<MySelect />);
|
|
|
457
457
|
|
|
458
458
|
Use the controls to see the effect at different viewport widths.
|
|
459
459
|
|
|
460
|
-
```
|
|
460
|
+
```jsx
|
|
461
461
|
import { useState } from 'react';
|
|
462
462
|
import { Select } from '@rescui/select';
|
|
463
463
|
|
|
@@ -524,7 +524,7 @@ Check out [this example](/components/select/#contrast-primary-color) for contras
|
|
|
524
524
|
|
|
525
525
|
Use the controls to see the effect at different viewport widths.
|
|
526
526
|
|
|
527
|
-
```
|
|
527
|
+
```jsx
|
|
528
528
|
import { useState } from 'react';
|
|
529
529
|
import { NativeSelect } from '@rescui/select';
|
|
530
530
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@rescui/dropdown": "^0.13.
|
|
19
|
+
"@rescui/dropdown": "^0.13.4",
|
|
20
20
|
"@rescui/form-field": "^0.3.3",
|
|
21
|
-
"@rescui/tag": "^0.16.
|
|
21
|
+
"@rescui/tag": "^0.16.3",
|
|
22
22
|
"@rescui/use-resize-observer": "^0.5.0",
|
|
23
23
|
"classnames": "^2.2.6",
|
|
24
24
|
"downshift": "^9.4.0",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
43
43
|
},
|
|
44
44
|
"nx": {},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "de39487aaf7fa1351451b7a4c73b0f6024551e5a"
|
|
46
46
|
}
|