refactor: code style and improvements

src/components/Select/__stories__/Select.stories.tsx

@@ -5,6 +5,7 @@ import type {Meta, StoryFn} from '@storybook/react';
 import {Select} from '..';
 import type {SelectProps} from '..';
 
+import {SelectHooks} from './SelectHooks';
 import {SelectPopupWidthShowcase} from './SelectPopupWidthShowcase';
 import {SelectShowcase} from './SelectShowcase';
 
@@ -25,9 +26,12 @@ const ShowcaseTemplate: StoryFn<SelectProps> = (args: SelectProps) => <SelectSho
 const SelectPopupWidthShowcaseTemplate: StoryFn<SelectProps> = (args) => (
     <SelectPopupWidthShowcase {...args} />
 );
+const HooksTemplate: StoryFn<SelectProps> = (args: SelectProps) => <SelectHooks {...args} />;
+
 export const Default = DefaultTemplate.bind({});
 export const Showcase = ShowcaseTemplate.bind({});
 export const PopupWidth = SelectPopupWidthShowcaseTemplate.bind({});
+export const Hooks = HooksTemplate.bind({});
 
 Showcase.args = {
     view: 'normal',

src/components/Select/__stories__/SelectHooks.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import type {SelectProps} from '..';
+import {Select} from '..';
+import {useSelectAllFilter} from '../../../hooks';
+import {ClipboardButton} from '../../ClipboardButton';
+import {RadioButton} from '../../RadioButton';
+import {block} from '../../utils/cn';
+import {generateOptions} from '../__tests__/utils';
+
+import {Mode, radioButtonOptions} from './SelectShowcase';
+import {EXAMPLE_JSON_OPTIONS} from './constants';
+
+const b = block('select-showcase');
+
+const ExampleSelectAllItem = (props: {
+    title: string;
+    selectProps: SelectProps;
+    code?: string[];
+    children?: SelectProps['children'];
+}) => {
+    const {title, selectProps, children, code = []} = props;
+    const multiple = props.selectProps.multiple;
+    const [mode, setMode] = React.useState(Mode.VIEW);
+    const [value, setValue] = React.useState<string[]>([]);
+
+    React.useEffect(() => {
+        if (!multiple) {
+            setValue([]);
+        }
+    }, [multiple]);
+
+    const onUpdate = (nextValue: string[]) => setValue(nextValue);
+
+    const {renderFilter} = useSelectAllFilter({
+        value: value,
+        options: selectProps.options,
+        onUpdate: onUpdate,
+        hasClear: true,
+        buttonPosition: 'right',
+    });
+
+    return (
+        <div className={b('example-item')}>
+            <h3>
+                {title}
+                {Boolean(code.length) && (
+                    <RadioButton
+                        className={b('example-item-radio')}
+                        size="s"
+                        value={mode}
+                        onUpdate={(nextMode) => setMode(nextMode)}
+                    >
+                        <RadioButton.Option {...radioButtonOptions[0]} />
+                        <RadioButton.Option {...radioButtonOptions[1]} />
+                    </RadioButton>
+                )}
+            </h3>
+            {mode === Mode.VIEW ? (
+                <Select
+                    {...selectProps}
+                    value={value}
+                    onUpdate={onUpdate}
+                    renderFilter={renderFilter}
+                    filterable
+                    multiple
+                >
+                    {children}
+                </Select>
+            ) : (
+                code.map((codeItem, i) => {
+                    return (
+                        <React.Fragment key={`${title}-${i}`}>
+                            <pre>
+                                {codeItem}
+                                <ClipboardButton
+                                    className={b('copy-button')}
+                                    size={16}
+                                    text={codeItem}
+                                />
+                            </pre>
+                        </React.Fragment>
+                    );
+                })
+            )}
+        </div>
+    );
+};
+
+export const SelectHooks = (props: SelectProps) => {
+    return (
+        <div className={b()}>
+            <ExampleSelectAllItem
+                title="Select with select all hook"
+                code={[EXAMPLE_JSON_OPTIONS]}
+                selectProps={{
+                    ...props,
+                    options: generateOptions([
+                        ['val1', 'val1'],
+                        ['val11', 'val11'],
+                        ['val2', 'val2'],
+                        ['val3', 'val3'],
+                    ]),
+                }}
+            />
+        </div>
+    );
+};

src/components/Select/__stories__/SelectShowcase.tsx

@@ -3,18 +3,16 @@ import React from 'react';
 import {Plus, TrashBin} from '@gravity-ui/icons';
 import range from 'lodash/range';
 
-import {Select} from '..';
 import type {SelectOption, SelectProps} from '..';
+import {Select} from '..';
 import {Button} from '../../Button';
 import {ClipboardButton} from '../../ClipboardButton';
 import {Icon} from '../../Icon';
-import {RadioButton} from '../../RadioButton';
 import type {RadioButtonOption} from '../../RadioButton';
+import {RadioButton} from '../../RadioButton';
 import {Tooltip} from '../../Tooltip';
 import {TextInput} from '../../controls';
 import {block} from '../../utils/cn';
-import {generateOptions} from '../__tests__/utils';
-import {useSelectAllFilter} from '../hooks';
 
 import {
     EXAMPLE_CHILDREN_OPTIONS,
@@ -32,7 +30,7 @@ import {
 import './SelectShowcase.scss';
 
 const b = block('select-showcase');
-const Mode = {
+export const Mode = {
     CODE: 'code',
     VIEW: 'view',
 };
@@ -48,7 +46,7 @@ const getEscapedString = (str: string) => {
     return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
 };
 
-const radioButtonOptions: RadioButtonOption[] = [
+export const radioButtonOptions: RadioButtonOption[] = [
     {value: Mode.VIEW, content: 'View'},
     {value: Mode.CODE, content: 'Code'},
 ];
@@ -114,80 +112,6 @@ const ExampleItem = (props: {
     );
 };
 
-const ExampleSelectAllItem = (props: {
-    title: string;
-    selectProps: SelectProps;
-    code?: string[];
-    children?: SelectProps['children'];
-}) => {
-    const {title, selectProps, children, code = []} = props;
-    const multiple = props.selectProps.multiple;
-    const [mode, setMode] = React.useState(Mode.VIEW);
-    const [value, setValue] = React.useState<string[]>([]);
-
-    React.useEffect(() => {
-        if (!multiple) {
-            setValue([]);
-        }
-    }, [multiple]);
-
-    const onUpdate = (nextValue: string[]) => setValue(nextValue);
-
-    const renderFilter = useSelectAllFilter({
-        value: value,
-        options: selectProps.options,
-        onUpdate: onUpdate,
-        hasClear: true,
-        autoFocus: true,
-    });
-
-    return (
-        <div className={b('example-item')}>
-            <h3>
-                {title}
-                {Boolean(code.length) && (
-                    <RadioButton
-                        className={b('example-item-radio')}
-                        size="s"
-                        value={mode}
-                        onUpdate={(nextMode) => setMode(nextMode)}
-                    >
-                        <RadioButton.Option {...radioButtonOptions[0]} />
-                        <RadioButton.Option {...radioButtonOptions[1]} />
-                    </RadioButton>
-                )}
-            </h3>
-            {mode === Mode.VIEW ? (
-                <Select
-                    {...selectProps}
-                    value={value}
-                    onUpdate={onUpdate}
-                    renderFilter={renderFilter}
-                    filterable
-                    multiple
-                >
-                    {children}
-                </Select>
-            ) : (
-                code.map((codeItem, i) => {
-                    return (
-                        <React.Fragment key={`${title}-${i}`}>
-                            <pre>
-                                {codeItem}
-                                <ClipboardButton
-                                    className={b('copy-button')}
-                                    size={16}
-                                    text={codeItem}
-                                />
-                            </pre>
-                        </React.Fragment>
-                    );
-                })
-            )}
-        </div>
-    );
-};
-
 export const SelectShowcase = (props: SelectProps) => {
     const [matchCase, setMatchCase] = React.useState(false);
     const [matchWholeWord, setMatchWholeWord] = React.useState(false);
@@ -456,19 +380,6 @@ export const SelectShowcase = (props: SelectProps) => {
                 <Select.Option value="val3" content="Value3" />
                 <Select.Option value="val4" content="Value4" />
             </ExampleItem>
-            <ExampleSelectAllItem
-                title="Select with select all hook"
-                code={[EXAMPLE_JSON_OPTIONS]}
-                selectProps={{
-                    ...props,
-                    options: generateOptions([
-                        ['val1', 'val1'],
-                        ['val11', 'val11'],
-                        ['val2', 'val2'],
-                        ['val3', 'val3'],
-                    ]),
-                }}
-            />
         </div>
     );
 };

src/components/Select/constants.ts

@@ -36,4 +36,5 @@ export const SelectQa = {
     POPUP: 'select-popup',
     SHEET: 'select-sheet',
     CLEAR: 'select-clear',
+    SELECT_ALL: 'select-all-test-qa',
 };

src/components/Select/hooks/index.ts

@@ -1,2 +1 @@
 export {useQuickSearch} from './useQuickSearch';
-export {useSelectAllFilter} from './useSelectAllFilter/useSelectAllFilter';