6 | 
9 |
10 |
11 |
12 | 
13 |
14 |
15 | 
16 |
17 |
18 | 
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 | 
28 |
29 |
30 | ---
31 |
32 | reaselct is a Select Component for React.
33 |
34 |
--------------------------------------------------------------------------------
/src/SelectMenu/SelectMenu.module.css:
--------------------------------------------------------------------------------
1 | .menu {
2 | background: var(--color-select-menu);
3 | text-align: center;
4 | will-change: transform, opacity;
5 | border-radius: 0 0 var(--select-border-radius) var(--select-border-radius);
6 | min-width: 112px;
7 | max-height: 300px;
8 | overflow-y: auto;
9 | text-align: left;
10 | border: solid 1px var(--color-select-menu-border);
11 | border-top: none;
12 |
13 | ul,
14 | li {
15 | list-style: none;
16 | }
17 |
18 | ul {
19 | padding: 0;
20 | margin: 0;
21 | }
22 |
23 | li {
24 | padding: 7px 10px;
25 |
26 | &:not(.disabled) {
27 | color: pointer;
28 | }
29 | }
30 |
31 | .groupItem {
32 | border: none;
33 | padding: 0;
34 |
35 | h3 {
36 | font-size: 12px;
37 | margin: 0;
38 | font-weight: bold;
39 | text-transform: uppercase;
40 | padding: 10px 0 5px 10px;
41 | color: var(--color-select-menu-group);
42 | }
43 | }
44 |
45 | .option {
46 | border: none;
47 | color: var(--color-on-select-menu-item);
48 | font-size: 14px;
49 | cursor: pointer;
50 |
51 | &:hover,
52 | &.active {
53 | color: var(--color-on-select-menu-item-active);
54 | background: var(--color-select-menu-item-active);
55 | }
56 |
57 | &.selected {
58 | color: var(--color-on-select-menu-item-selected);
59 | background: var(--color-select-menu-item-selected);
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | reaselct
7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
25 |
26 |
27 |
28 |
29 |
30 | ---
31 |
32 | reaselct is a Select Component for React.
33 |
2 |
5 | 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | ---
30 |
31 | ## Deprecated
32 | This package is deprecated and part of [https://reablocks.dev](https://reablocks.dev) now.
33 |
34 | ## ❤️ Contributors
35 | Thanks to all our contributors!
36 |
37 | reaselct
3 | Select Component for React 4 |5 | 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
23 |
24 |
25 |
26 |
27 | 
38 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import resolve from 'rollup-plugin-node-resolve';
2 | import sourceMaps from 'rollup-plugin-sourcemaps';
3 | import typescript from 'rollup-plugin-typescript2';
4 | import external from 'rollup-plugin-peer-deps-external';
5 | import postcss from 'rollup-plugin-postcss-modules';
6 | import commonjs from 'rollup-plugin-commonjs';
7 | import pkg from './package.json';
8 |
9 | export default [
10 | {
11 | input: pkg.source,
12 | output: [
13 | {
14 | file: pkg.browser,
15 | format: 'umd',
16 | name: 'reaselect'
17 | },
18 | {
19 | file: pkg.main,
20 | format: 'cjs',
21 | name: 'reaselect'
22 | },
23 | {
24 | file: pkg.module,
25 | format: 'esm'
26 | }
27 | ],
28 | plugins: [
29 | external({
30 | includeDependencies: true
31 | }),
32 | postcss({
33 | // extract: true,
34 | modules: true,
35 | // writeDefinitions: true,
36 | plugins: [
37 | require('postcss-nested'),
38 | require('postcss-preset-env')({ stage: 1 }),
39 | require('autoprefixer')
40 | ]
41 | }),
42 | typescript({
43 | clean: true,
44 | exclude: [
45 | '*.scss',
46 | '*.css',
47 | '*.test.js',
48 | '*.test.ts',
49 | '*.test.tsx',
50 | '*.d.ts',
51 | '**/*.d.ts',
52 | '**/*.story.tsx'
53 | ]
54 | }),
55 | resolve(),
56 | commonjs(),
57 | sourceMaps()
58 | ]
59 | }
60 | ];
61 |
--------------------------------------------------------------------------------
/src/utils/grouping.ts:
--------------------------------------------------------------------------------
1 | import { SelectOptionProps } from '../SelectOption';
2 | import groupBy from 'lodash/groupBy';
3 | import sumBy from 'lodash/sumBy';
4 |
5 | export interface GroupOptions {
6 | groups: GroupOption[];
7 | itemsCount: number;
8 | hasGroups: boolean;
9 | }
10 |
11 | export interface GroupOption {
12 | offset: number;
13 | index: number;
14 | items: SelectOptionProps[];
15 | name: string;
16 | }
17 |
18 | export function getGroups(options: SelectOptionProps[]): GroupOptions {
19 | if (!options?.length) {
20 | return {
21 | groups: [],
22 | itemsCount: 0,
23 | hasGroups: false
24 | };
25 | }
26 |
27 | const groupsMap = groupBy(options, t => t.group);
28 | const groupNames = Object.keys(groupsMap);
29 |
30 | if (groupNames.length === 1 && groupNames[0] === 'undefined') {
31 | return {
32 | groups: [],
33 | itemsCount: options.length,
34 | hasGroups: false
35 | };
36 | }
37 |
38 | let index = 0;
39 | const groups = Object.entries(groupsMap).map(([key, value], index) => ({
40 | offset: 0,
41 | index,
42 | items: value,
43 | name: key
44 | }));
45 |
46 | for (const group of groups) {
47 | group.offset = index;
48 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
49 | for (const _item of group.items) {
50 | index++;
51 | }
52 | }
53 |
54 | return {
55 | groups,
56 | itemsCount:
57 | groups?.length !== 0
58 | ? sumBy(groups, g => g.items.length)
59 | : options.length,
60 | hasGroups: groups?.length !== 0
61 | };
62 | }
63 |
--------------------------------------------------------------------------------
/src/SelectInput/SelectInputChip.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import { SelectOptionProps } from '../SelectOption';
3 | import ellipsize from 'ellipsize';
4 | import { CloseIcon } from '../icons/CloseIcon';
5 | import css from './SelectInputChip.module.css';
6 | import classNames from 'classnames';
7 |
8 | export interface SelectInputChipProps {
9 | option: SelectOptionProps;
10 | maxLength?: number;
11 | className?: string;
12 | disabled?: boolean;
13 | clearable?: boolean;
14 | closeIcon?: React.ReactNode;
15 | onTagKeyDown: (
16 | event: React.KeyboardEvent
10 | [ ] Regression (a behavior that used to work and stopped working in a new release)
11 | [ ] Bug report
12 | [ ] Performance issue
13 | [ ] Feature request
14 | [ ] Documentation issue or request
15 | [ ] Other... Please describe:
16 |
45 | Libs:
46 | - react version: X.Y.Z
47 | - realayers version: X.Y.Z
48 |
49 |
50 | Browser:
51 | - [ ] Chrome (desktop) version XX
52 | - [ ] Chrome (Android) version XX
53 | - [ ] Chrome (iOS) version XX
54 | - [ ] Firefox version XX
55 | - [ ] Safari (desktop) version XX
56 | - [ ] Safari (iOS) version XX
57 | - [ ] IE version XX
58 | - [ ] Edge version XX
59 |
60 | For Tooling issues:
61 | - Node version: XX
62 | - Platform:
63 |
64 | Others:
65 |
66 | -
113 | {options?.length === 0 && createable && trimmedText && !loading && (
114 |
- { 117 | event.preventDefault(); 118 | event.stopPropagation(); 119 | onSelectedChange({ 120 | value: trimmedText.toLowerCase(), 121 | children: trimmedText.toLowerCase() 122 | }); 123 | }} 124 | > 125 | Create option "{trimmedText.toLowerCase()}" 126 | 127 | )} 128 | {options?.length === 0 && 129 | !createable && 130 | filterable && 131 | trimmedText && 132 | !loading && ( 133 |
- 134 | No option(s) for "{trimmedText}" 135 | 136 | )} 137 | {options?.length === 0 && 138 | !createable && 139 | filterable && 140 | !trimmedText && 141 | !loading && ( 142 |
- No option(s) available 143 | )} 144 | {groups.hasGroups 145 | ? groups.groups.map(g => ( 146 |
-
153 |
{g.name}
154 |- {renderListItems(g.items, g)}
156 | )}
157 |
30 |
44 |
45 | );
46 | };
47 |
48 | export const Disabled = () => {
49 | const [value, setValue] = useState
52 |
66 |
67 | );
68 | };
69 |
70 | export const DefaultValue = () => {
71 | const [value, setValue] = useState
74 |
88 |
89 | );
90 | };
91 |
92 | export const CustomLabels = () => {
93 | const [value, setValue] = useState
96 |
124 |
125 | );
126 | };
127 |
128 | export const Createable = () => {
129 | const [value, setValue] = useState
133 |
148 |
149 | );
150 | };
151 |
152 | export const LongInputNames = () => {
153 | const [value, setValue] = useState
156 |
172 |
173 | );
174 | };
175 |
176 | export const MultipleValuesOverflow = () => {
177 | const [value, setValue] = useState
180 |
196 |
197 | );
198 | };
199 |
200 | export const MultipleValuesFixed = () => {
201 | const [value, setValue] = useState
204 |
220 |
221 | );
222 | };
223 |
224 | export const FluidWidth = () => {
225 | const [value, setValue] = useState
228 |
244 |
245 | );
246 | };
247 |
248 | export const Unfilterable = () => {
249 | const [value, setValue] = useState
252 |
263 |
264 | );
265 | };
266 |
267 | export const Error = () => (
268 |
269 |
270 |
271 | );
272 |
273 | export const InvalidValues = () => {
274 | const [value, setValue] = useState
277 |
288 |
289 | );
290 | };
291 |
292 | export const CreateableNoOptions = () => {
293 | const [value, setValue] = useState
297 |
315 |
316 | );
317 | };
318 |
319 | export const Async = () => {
320 | const [value, setValue] = useState
355 |
370 |
371 | );
372 | };
373 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/src/SelectInput/SelectInput.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | FC,
3 | ReactElement,
4 | Ref,
5 | RefObject,
6 | useCallback,
7 | useImperativeHandle,
8 | useMemo,
9 | useRef
10 | } from 'react';
11 | import classNames from 'classnames';
12 | import { SelectOptionProps, SelectValue } from '../SelectOption';
13 | import AutosizeInput from 'react-input-autosize';
14 | import { DownArrowIcon } from '../icons/DownArrowIcon';
15 | import { CloseIcon } from '../icons/CloseIcon';
16 | import { LoadingIcon } from '../icons/LoadingIcon';
17 | import { RefreshIcon } from '../icons/RefreshIcon';
18 | import { SelectInputChip, SelectInputChipProps } from './SelectInputChip';
19 | import { CloneElement } from 'rdk';
20 | import css from './SelectInput.module.css';
21 |
22 | export interface SelectInputProps {
23 | id?: string;
24 | name?: string;
25 | required?: boolean;
26 | options: SelectOptionProps[];
27 | disabled?: boolean;
28 | menuOpen?: boolean;
29 | fontSize?: string | number;
30 | inputText: string;
31 | closeOnSelect?: boolean;
32 | selectedOption?: SelectOptionProps | SelectOptionProps[];
33 | autoFocus?: boolean;
34 | className?: string;
35 | createable?: boolean;
36 | filterable?: boolean;
37 | multiple?: boolean;
38 | loading?: boolean;
39 | reference?: Ref
272 | {multipleOptions.map(option => (
273 |
274 | element={chip}
275 | key={option.value}
276 | option={option}
277 | clearable={clearable}
278 | disabled={disabled}
279 | closeIcon={closeIcon}
280 | onSelectedChange={onSelectedChange}
281 | onTagKeyDown={onTagKeyDown}
282 | />
283 | ))}
284 |
285 | );
286 | }
287 | } else {
288 | const singleOption = selectedOption as SelectOptionProps;
289 | if (singleOption?.inputLabel && !inputText) {
290 | return (
291 |
292 | {singleOption?.inputLabel}
293 |
294 | );
295 | }
296 | }
297 |
298 | return null;
299 | }, [
300 | chip,
301 | clearable,
302 | closeIcon,
303 | disabled,
304 | inputText,
305 | multiple,
306 | onSelectedChange,
307 | onTagKeyDown,
308 | selectedOption
309 | ]);
310 |
311 | return (
312 |
324 |
388 | );
389 | };
390 |
391 | SelectInput.defaultProps = {
392 | fontSize: 13,
393 | expandIcon:
325 | {renderPrefix()}
326 | (inputRef.current = el)}
328 | id={id}
329 | style={{ fontSize }}
330 | name={name}
331 | disabled={disabled}
332 | required={required}
333 | autoFocus={autoFocus}
334 | placeholder={placeholderText}
335 | inputClassName={classNames(css.input, 'reaselct-input-input')}
336 | value={inputTextValue}
337 | autoCorrect="off"
338 | spellCheck="false"
339 | autoComplete="off"
340 | onKeyDown={onInputKeyDown}
341 | onKeyUp={onInputKeyUp}
342 | onChange={onChange}
343 | onFocus={onInputFocus}
344 | onBlur={onBlur}
345 | />
346 |
347 |
348 | {refreshable && !loading && (
349 |
362 | )}
363 | {loading &&
387 | {loadingIcon}
}
364 | {showClear && (
365 |
374 | )}
375 | {!menuDisabled && (
376 |
385 | )}
386 |
31 |
43 |
44 | );
45 | };
46 |
47 | export const Fonts = () => {
48 | const [value, setValue] = useState
51 |
63 |
64 | );
65 | };
66 |
67 | export const NoOptions = () => (
68 |
69 |
70 |
71 | );
72 |
73 | export const ManyOptions = () => {
74 | const [value, setValue] = useState
79 |
93 |
94 | );
95 | };
96 |
97 | export const DefaultValue = () => {
98 | const [value, setValue] = useState
101 |
110 |
111 | );
112 | };
113 |
114 | export const InvalidValues = () => {
115 | const [value, setValue] = useState
118 |
127 |
128 | );
129 | };
130 |
131 | export const OptionsArray = () => {
132 | const [value, setValue] = useState
135 |
142 |
143 | );
144 | };
145 |
146 | export const Autofocus = () => {
147 | const [value, setValue] = useState
150 |
155 |
156 | );
157 | };
158 |
159 | export const LongInputNames = () => {
160 | const [value, setValue] = useState
163 |
174 |
175 | );
176 | };
177 |
178 | export const FluidWidth = () => {
179 | const [value, setValue] = useState
182 |
193 |
194 | );
195 | };
196 |
197 | export const Groups = () => {
198 | const [value, setValue] = useState
201 |
218 |
219 | );
220 | };
221 |
222 | export const LongGroupNames = () => {
223 | const [value, setValue] = useState
226 |
258 |
259 | );
260 | };
261 |
262 | export const MixedGroups = () => {
263 | const [value, setValue] = useState
266 |
281 |
282 | );
283 | };
284 |
285 | export const LoadingIcon = () => (
286 |
287 |
288 |
289 | );
290 |
291 | export const Error = () => (
292 |
293 |
294 |
295 | );
296 |
297 | export const RefreshIcon = () => (
298 |
299 |
300 |
301 | );
302 |
303 | export const Async = () => {
304 | const [value, setValue] = useState
339 |
353 |
354 | );
355 | };
356 |
357 | export const AsyncDefaultValue = () => {
358 | const [value, setValue] = useState
393 |
407 |
408 | );
409 | };
410 |
411 | export const CustomLabels = () => {
412 | const [value, setValue] = useState
415 |
442 |
443 | );
444 | };
445 |
446 | export const CustomLongLabels = () => {
447 | const [value, setValue] = useState
450 |
489 |
490 | );
491 | };
492 |
493 | export const Disabled = () => (
494 |
495 |
500 |
501 | );
502 |
503 | export const Unfilterable = () => {
504 | const [value, setValue] = useState
507 |
512 |
513 | );
514 | };
515 |
516 | export const Createable = () => {
517 | const [value, setValue] = useState
521 |
534 |
535 | );
536 | };
537 |
--------------------------------------------------------------------------------