From b77ef42ab997233a47d2e693ee3cb22ca4d3cdd4 Mon Sep 17 00:00:00 2001
From: Alena Shpakova <53817236+alena-shp@users.noreply.github.com>
Date: Wed, 19 Feb 2025 17:29:02 +0400
Subject: [PATCH] task(AP-10341): select decomposition

---
 .../__tests__/__snapshots__/index.tsx.snap    |  26 +-
 .../src/components/select/__tests__/index.tsx |  27 +-
 .../components/container/index.module.pcss    |  17 +
 .../container/index.module.pcss.d.ts          |  12 +
 .../select/components/container/index.tsx     |  26 +
 .../indicators-container/index.module.pcss    |  19 +
 .../index.module.pcss.d.ts                    |  12 +
 .../components/indicators-container/index.tsx |  30 ++
 .../components/no-options/index.module.pcss   |   8 +
 .../no-options/index.module.pcss.d.ts         |  10 +
 .../select/components/no-options/index.tsx    |  22 +
 .../components/option/index.module.pcss       |  10 +
 .../components/option/index.module.pcss.d.ts  |  11 +
 .../select/components/option/index.tsx        |  42 ++
 .../select/components/single-value/index.tsx  |  21 +
 .../select/hooks/use-get-classnames.ts        |  30 ++
 .../components/select/hooks/use-options.ts    |  54 ++
 .../src/components/select/index.module.pcss   |  43 --
 .../components/select/index.module.pcss.d.ts  |  10 -
 .../ui-react/src/components/select/index.tsx  | 499 +++---------------
 .../ui-react/src/components/select/types.ts   | 237 +++++++++
 .../src/components/select/utils/get-params.ts |  17 +
 22 files changed, 675 insertions(+), 508 deletions(-)
 create mode 100644 packages/ui-react/src/components/select/components/container/index.module.pcss
 create mode 100644 packages/ui-react/src/components/select/components/container/index.module.pcss.d.ts
 create mode 100644 packages/ui-react/src/components/select/components/container/index.tsx
 create mode 100644 packages/ui-react/src/components/select/components/indicators-container/index.module.pcss
 create mode 100644 packages/ui-react/src/components/select/components/indicators-container/index.module.pcss.d.ts
 create mode 100644 packages/ui-react/src/components/select/components/indicators-container/index.tsx
 create mode 100644 packages/ui-react/src/components/select/components/no-options/index.module.pcss
 create mode 100644 packages/ui-react/src/components/select/components/no-options/index.module.pcss.d.ts
 create mode 100644 packages/ui-react/src/components/select/components/no-options/index.tsx
 create mode 100644 packages/ui-react/src/components/select/components/option/index.module.pcss
 create mode 100644 packages/ui-react/src/components/select/components/option/index.module.pcss.d.ts
 create mode 100644 packages/ui-react/src/components/select/components/option/index.tsx
 create mode 100644 packages/ui-react/src/components/select/components/single-value/index.tsx
 create mode 100644 packages/ui-react/src/components/select/hooks/use-get-classnames.ts
 create mode 100644 packages/ui-react/src/components/select/hooks/use-options.ts
 create mode 100644 packages/ui-react/src/components/select/types.ts
 create mode 100644 packages/ui-react/src/components/select/utils/get-params.ts

diff --git a/packages/ui-react/src/components/select/__tests__/__snapshots__/index.tsx.snap b/packages/ui-react/src/components/select/__tests__/__snapshots__/index.tsx.snap
index d50e8bb..de20f02 100644
--- a/packages/ui-react/src/components/select/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui-react/src/components/select/__tests__/__snapshots__/index.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Default 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -74,7 +74,7 @@ exports[`Default 1`] = `
 
 exports[`Default async 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -146,7 +146,7 @@ exports[`Default async 1`] = `
 
 exports[`Default async menu open 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -241,7 +241,7 @@ exports[`Default async menu open 1`] = `
 
 exports[`Default async value 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -336,7 +336,7 @@ exports[`Default async value 1`] = `
 
 exports[`Default menu open 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -621,7 +621,7 @@ exports[`Default menu open 1`] = `
 
 exports[`Default value 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -919,7 +919,7 @@ exports[`Default value 1`] = `
 
 exports[`Disabled 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-3iigni-container"
@@ -992,7 +992,7 @@ exports[`Disabled 1`] = `
 
 exports[`Disabled async 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-3iigni-container"
@@ -1065,7 +1065,7 @@ exports[`Disabled async 1`] = `
 
 exports[`Error 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -1137,7 +1137,7 @@ exports[`Error 1`] = `
 
 exports[`Error async 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <div
     className=" css-b62m3t-container"
@@ -1209,7 +1209,7 @@ exports[`Error async 1`] = `
 
 exports[`Label 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <span
     className="select__label"
@@ -1286,7 +1286,7 @@ exports[`Label 1`] = `
 
 exports[`Label 2`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <span
     className="select__label"
@@ -1363,7 +1363,7 @@ exports[`Label 2`] = `
 
 exports[`Label async 1`] = `
 <label
-  className="select"
+  className="select__container"
 >
   <span
     className="select__label"
diff --git a/packages/ui-react/src/components/select/__tests__/index.tsx b/packages/ui-react/src/components/select/__tests__/index.tsx
index e6dc34d..757afc6 100644
--- a/packages/ui-react/src/components/select/__tests__/index.tsx
+++ b/packages/ui-react/src/components/select/__tests__/index.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
 
-import { IOption, Select } from '..';
+import { Select } from '..';
 import { IconVideo } from '../../icons/video';
 import { IconSearch } from '../../icons/search';
 import { IconDownload } from '../../icons/download';
 import { IconCalendar } from '../../icons/calendar';
 import { IconBox } from '../../icons/box';
 import { IconInfo } from '../../icons/info';
+import { IOption } from '../types';
 
 const OPTIONS: Array<IOption> = [{
     label: 'Мали',
@@ -135,8 +136,8 @@ test('Default async', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             options={[]}
         />
     );
@@ -148,8 +149,8 @@ test('Default async menu open', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             defaultMenuIsOpen={true}
             options={OPTIONS}
         />
@@ -162,8 +163,8 @@ test('Error async', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             isError={true}
             options={OPTIONS}
         />
@@ -176,8 +177,8 @@ test('Disabled async', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             isDisabled={true}
             options={OPTIONS}
         />
@@ -190,8 +191,8 @@ test('Default async value', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             defaultMenuIsOpen={true}
             defaultValue={[OPTIONS[0]]}
             options={OPTIONS}
@@ -205,8 +206,8 @@ test('Label async', () => {
     const tree = create(
         <Select
             typeComponent="async"
-            hasMore={false}
-            loadCallback={sleep}
+            isOptionsForFetch={false}
+            fetchOptions={sleep}
             label="Label field"
             options={OPTIONS}
         />
diff --git a/packages/ui-react/src/components/select/components/container/index.module.pcss b/packages/ui-react/src/components/select/components/container/index.module.pcss
new file mode 100644
index 0000000..928b3f5
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/container/index.module.pcss
@@ -0,0 +1,17 @@
+.select {
+
+    &__container {
+        display: grid;
+        font-family: var(--font-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        grid-row-gap: 6px;
+    }
+
+    &__label {
+        color: #4e4e53;
+        line-height: 20px;
+        display: block;
+    }
+}
diff --git a/packages/ui-react/src/components/select/components/container/index.module.pcss.d.ts b/packages/ui-react/src/components/select/components/container/index.module.pcss.d.ts
new file mode 100644
index 0000000..99ebe76
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/container/index.module.pcss.d.ts
@@ -0,0 +1,12 @@
+export const select__container: string
+export const select__label: string
+
+
+interface Stylesheet {
+    'select__container': string
+    'select__label': string
+}
+
+
+declare const stylesheet: Stylesheet
+export default stylesheet
diff --git a/packages/ui-react/src/components/select/components/container/index.tsx b/packages/ui-react/src/components/select/components/container/index.tsx
new file mode 100644
index 0000000..488cd7d
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/container/index.tsx
@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+import { useClassnames } from '../../../../hooks/use-classnames';
+
+import style from './index.module.pcss';
+
+interface IProps {
+    readonly children: ReactNode,
+    readonly label?: ReactNode
+}
+
+export const Container = ({ children, label }: IProps) => {
+    const cn = useClassnames(style);
+
+    return (
+        <label className={cn('select__container')}>
+            {label ? (
+                <span
+                    className={cn('select__label')}
+                    children={label}
+                />
+            ) : null}
+            {children}
+        </label>
+    );
+};
\ No newline at end of file
diff --git a/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss b/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss
new file mode 100644
index 0000000..218405a
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss
@@ -0,0 +1,19 @@
+.select {
+
+    &__icon-arrow-bottom {
+        width: 24px;
+        height: 24px;
+        fill: #000;
+
+        &_open {
+            transform: rotateX(180deg);
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+
+            &:hover:not(&_disabled) {
+                cursor: pointer;
+            }
+        }
+    }
+}
diff --git a/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss.d.ts b/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss.d.ts
new file mode 100644
index 0000000..4f6f3dd
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/indicators-container/index.module.pcss.d.ts
@@ -0,0 +1,12 @@
+
+
+
+interface Stylesheet {
+    'select__icon-arrow-bottom': string
+    'select__icon-arrow-bottom_disabled': string
+    'select__icon-arrow-bottom_open': string
+}
+
+
+declare const stylesheet: Stylesheet
+export default stylesheet
diff --git a/packages/ui-react/src/components/select/components/indicators-container/index.tsx b/packages/ui-react/src/components/select/components/indicators-container/index.tsx
new file mode 100644
index 0000000..54ae420
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/indicators-container/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import  { components, IndicatorsContainerProps, GroupBase } from 'react-select';
+
+import { IconArrowsChevronBottom } from '../../../icons/arrows/chevron-bottom';
+import { IOption, TSelectProps } from '../../types';
+import { type TStyle, useClassnames } from '../../../../hooks/use-classnames';
+
+import style from './index.module.pcss';
+
+interface IProps<IsMulti extends boolean = boolean> extends Omit<TSelectProps<IsMulti>, 'className'> {
+    readonly option: IndicatorsContainerProps<IOption, IsMulti, GroupBase<IOption>>,
+    readonly className?: string | TStyle
+}
+
+export const IndicatorsContainer = ({ option, className }: IProps) => {
+    const cn = useClassnames(style, className);
+
+    return (
+        <components.IndicatorsContainer {...option}>
+            <IconArrowsChevronBottom
+                svg={{
+                    className: cn('select__icon-arrow-bottom', {
+                        'select__icon-arrow-bottom_disabled': option.isDisabled,
+                        'select__icon-arrow-bottom_open': option.selectProps.menuIsOpen
+                    })
+                }}
+            />
+        </components.IndicatorsContainer>
+    );
+};
diff --git a/packages/ui-react/src/components/select/components/no-options/index.module.pcss b/packages/ui-react/src/components/select/components/no-options/index.module.pcss
new file mode 100644
index 0000000..8d4bc56
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/no-options/index.module.pcss
@@ -0,0 +1,8 @@
+.select {
+
+    &__no-options {
+        display: flex;
+        justify-content: center;
+        padding: 10px 0;
+    }
+}
diff --git a/packages/ui-react/src/components/select/components/no-options/index.module.pcss.d.ts b/packages/ui-react/src/components/select/components/no-options/index.module.pcss.d.ts
new file mode 100644
index 0000000..c6f87c4
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/no-options/index.module.pcss.d.ts
@@ -0,0 +1,10 @@
+
+
+
+interface Stylesheet {
+    'select__no-options': string
+}
+
+
+declare const stylesheet: Stylesheet
+export default stylesheet
diff --git a/packages/ui-react/src/components/select/components/no-options/index.tsx b/packages/ui-react/src/components/select/components/no-options/index.tsx
new file mode 100644
index 0000000..55ed0f5
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/no-options/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Text } from '../../../typography/v2/text';
+import { useClassnames } from '../../../../hooks/use-classnames';
+
+import style from './index.module.pcss';
+
+interface IProps {
+    readonly noOptionsText?: string
+}
+
+export const NoOptions = ({ noOptionsText }: IProps) => {
+    const cn = useClassnames(style);
+
+    return (
+        <div className={cn('select__no-options')}>
+            <Text presetColor="secondary">
+                {noOptionsText ?? 'No options'}
+            </Text>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/packages/ui-react/src/components/select/components/option/index.module.pcss b/packages/ui-react/src/components/select/components/option/index.module.pcss
new file mode 100644
index 0000000..b2d034a
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/option/index.module.pcss
@@ -0,0 +1,10 @@
+.select {
+
+    &__icon-check-mark {
+        fill: #3a0078;
+
+        &_disabled {
+            fill: #b8b6bf;
+        }
+    }
+}
diff --git a/packages/ui-react/src/components/select/components/option/index.module.pcss.d.ts b/packages/ui-react/src/components/select/components/option/index.module.pcss.d.ts
new file mode 100644
index 0000000..5ba03e9
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/option/index.module.pcss.d.ts
@@ -0,0 +1,11 @@
+
+
+
+interface Stylesheet {
+    'select__icon-check-mark': string
+    'select__icon-check-mark_disabled': string
+}
+
+
+declare const stylesheet: Stylesheet
+export default stylesheet
diff --git a/packages/ui-react/src/components/select/components/option/index.tsx b/packages/ui-react/src/components/select/components/option/index.tsx
new file mode 100644
index 0000000..0568994
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/option/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import  { components, OptionProps, GroupBase } from 'react-select';
+
+import { IconCheckMark } from '../../../icons/check-mark';
+import { IOption, TSelectProps } from '../../types';
+import { useOption } from '../../hooks/use-options';
+import { type TStyle, useClassnames } from '../../../../hooks/use-classnames';
+
+import style from './index.module.pcss';
+
+interface IProps<IsMulti extends boolean = boolean> extends Omit<TSelectProps<IsMulti>, 'className'> {
+    readonly option: OptionProps<IOption, IsMulti, GroupBase<IOption>>,
+    readonly className?: string | TStyle
+}
+
+export const Option = ({ option, className }: IProps) => {
+    const cn = useClassnames(style, className);
+    const { getOptionBefore, getOptionAfter } = useOption({});
+
+    const elSelected = () => {
+        if(option.isSelected) {
+            return (
+                <IconCheckMark
+                    svg={{
+                        className: cn('select__icon-check-mark', {
+                            'select__icon-check-mark_disabled': option.isDisabled
+                        })
+                    }}
+                />
+            ); 
+        }
+    };
+
+    return (
+        <components.Option {...option}>
+            {elSelected()}
+            {getOptionBefore(option)}
+            {option.children}
+            {getOptionAfter(option)}
+        </components.Option>
+    );
+};
diff --git a/packages/ui-react/src/components/select/components/single-value/index.tsx b/packages/ui-react/src/components/select/components/single-value/index.tsx
new file mode 100644
index 0000000..a29dd87
--- /dev/null
+++ b/packages/ui-react/src/components/select/components/single-value/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import  { components, GroupBase, SingleValueProps } from 'react-select';
+
+import { IOption, TSelectProps } from '../../types';
+import { useOption } from '../../hooks/use-options';
+
+interface IProps<IsMulti extends boolean = boolean> extends TSelectProps<IsMulti> {
+    readonly option: SingleValueProps<IOption, IsMulti, GroupBase<IOption>>
+}
+
+export const SingleValue = ({ option }: IProps) => {
+    const { getOptionBefore, getOptionAfter } = useOption({});
+
+    return (
+        <components.SingleValue {...option}>
+            {getOptionBefore(option)}
+            {option.children}
+            {getOptionAfter(option)}
+        </components.SingleValue>
+    );
+};
diff --git a/packages/ui-react/src/components/select/hooks/use-get-classnames.ts b/packages/ui-react/src/components/select/hooks/use-get-classnames.ts
new file mode 100644
index 0000000..9fc19cd
--- /dev/null
+++ b/packages/ui-react/src/components/select/hooks/use-get-classnames.ts
@@ -0,0 +1,30 @@
+import { type TStyle, useClassnames } from '../../../hooks/use-classnames';
+import style from '../index.module.pcss';
+
+interface IProps {
+    readonly isError?: boolean,
+    readonly className?: string | TStyle
+}
+
+export const useGetClassnames = ({ isError, className }: IProps) => {
+    const cn = useClassnames(style, className);
+
+    return {
+        classNames: {
+            menu: () => cn('select__menu'),
+            menuList: () => cn('select__menu-list'),
+            singleValue: () => cn('select__single-value'),
+            control: (option: { isDisabled: boolean }) => cn('select__control', {
+                'select__control_disabled': option.isDisabled,
+                'select__control_error': isError
+            }),
+            valueContainer: () => cn('select__value-container'),
+            placeholder: () => cn('select__placeholder'),
+            option: (option: { isDisabled: boolean, isFocused: boolean, isSelected: boolean }) => cn('select__option', {
+                'select__option_focused': option.isFocused,
+                'select__option_disabled': option.isDisabled,
+                'select__option_selected': option.isSelected
+            })
+        } 
+    };
+};
\ No newline at end of file
diff --git a/packages/ui-react/src/components/select/hooks/use-options.ts b/packages/ui-react/src/components/select/hooks/use-options.ts
new file mode 100644
index 0000000..3a7aa29
--- /dev/null
+++ b/packages/ui-react/src/components/select/hooks/use-options.ts
@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { GroupBase } from 'react-select';
+
+import { IOption, TOptionOrSingleValueProps, TArrayOptions } from '../types';
+
+interface IProps {
+    readonly isOptionsForFetch?: boolean,
+    readonly fetchOptions?: (search?: string) => Promise<TArrayOptions>
+}
+
+export const useOption = ({ isOptionsForFetch = false, fetchOptions }: IProps) => {
+    const getOptionBefore = useCallback(<IsMulti extends boolean = false>(option: TOptionOrSingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => {
+        if(option.data.elBefore) {
+            if(typeof option.data.elBefore === 'function') {
+                return option.data.elBefore(option);
+            }
+        
+            return option.data.elBefore;
+        }
+    }, []);
+        
+    const getOptionAfter = useCallback(<IsMulti extends boolean = false>(option: TOptionOrSingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => {
+        if(option.data.elAfter) {
+            if(typeof option.data.elAfter === 'function') {
+                return option.data.elAfter(option);
+            }
+        
+            return option.data.elAfter;
+        }
+    }, []);
+
+    const getLoadOptions = useCallback(async (
+        search: string
+    ): Promise<{ options: Array<IOption | GroupBase<IOption>>, hasMore: boolean }> => {
+        let options: Array<IOption | GroupBase<IOption>> = [];
+    
+        if(fetchOptions) {
+            options = await fetchOptions(search);
+        }
+    
+        return {
+            // новые опции для списка
+            options,
+            // есть ли еще данные для загрузки
+            hasMore: isOptionsForFetch
+        };
+    }, [isOptionsForFetch, fetchOptions]);
+
+    return {
+        getOptionBefore,
+        getOptionAfter,
+        getLoadOptions 
+    };
+};
\ No newline at end of file
diff --git a/packages/ui-react/src/components/select/index.module.pcss b/packages/ui-react/src/components/select/index.module.pcss
index abb24bb..3e466c1 100644
--- a/packages/ui-react/src/components/select/index.module.pcss
+++ b/packages/ui-react/src/components/select/index.module.pcss
@@ -1,16 +1,4 @@
 .select {
-    display: grid;
-    font-family: var(--font-family-primary);
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    grid-row-gap: 6px;
-
-    &__label {
-        color: #4e4e53;
-        line-height: 20px;
-        display: block;
-    }
 
     &__menu {
         /* stylelint-disable-next-line declaration-no-important */
@@ -29,14 +17,6 @@
         padding: 0 !important;
     }
 
-    &__icon-check-mark {
-        fill: #3a0078;
-
-        &_disabled {
-            fill: #b8b6bf;
-        }
-    }
-
     &__option,
     &__single-value {
         /* stylelint-disable-next-line declaration-no-important */
@@ -140,32 +120,9 @@
         color: #b8b6bf !important;
     }
 
-    &__icon-arrow-bottom {
-        width: 24px;
-        height: 24px;
-        fill: #000;
-
-        &_open {
-            transform: rotateX(180deg);
-        }
-
-        @media (hover: hover) and (pointer: fine) {
-
-            &:hover:not(&_disabled) {
-                cursor: pointer;
-            }
-        }
-    }
-
     &__loading {
         display: flex;
         justify-content: center;
         width: 100%;
     }
-
-    &__no-options {
-        display: flex;
-        justify-content: center;
-        padding: 10px 0;
-    }
 }
diff --git a/packages/ui-react/src/components/select/index.module.pcss.d.ts b/packages/ui-react/src/components/select/index.module.pcss.d.ts
index efd317f..62d96ea 100644
--- a/packages/ui-react/src/components/select/index.module.pcss.d.ts
+++ b/packages/ui-react/src/components/select/index.module.pcss.d.ts
@@ -1,8 +1,6 @@
-export const select: string
 export const select__control: string
 export const select__control_disabled: string
 export const select__control_error: string
-export const select__label: string
 export const select__loading: string
 export const select__menu: string
 export const select__option: string
@@ -13,20 +11,12 @@ export const select__placeholder: string
 
 
 interface Stylesheet {
-    'select': string
     'select__control': string
     'select__control_disabled': string
     'select__control_error': string
-    'select__icon-arrow-bottom': string
-    'select__icon-arrow-bottom_disabled': string
-    'select__icon-arrow-bottom_open': string
-    'select__icon-check-mark': string
-    'select__icon-check-mark_disabled': string
-    'select__label': string
     'select__loading': string
     'select__menu': string
     'select__menu-list': string
-    'select__no-options': string
     'select__option': string
     'select__option_disabled': string
     'select__option_focused': string
diff --git a/packages/ui-react/src/components/select/index.tsx b/packages/ui-react/src/components/select/index.tsx
index 2789491..aea77a2 100644
--- a/packages/ui-react/src/components/select/index.tsx
+++ b/packages/ui-react/src/components/select/index.tsx
@@ -1,248 +1,23 @@
-import React, { ReactNode, useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import SelectSource, {
     components,
     IndicatorsContainerProps,
     OptionProps,
-    SingleValueProps,
-    Props,
     GroupBase,
-    PropsValue,
-    ActionMeta,
-    OptionsOrGroups,
-    OnChangeValue
+    SingleValueProps,
+    InputActionMeta
 } from 'react-select';
 import { AsyncPaginate } from 'react-select-async-paginate';
 
-import { type TStyle, useClassnames } from '../../hooks/use-classnames';
-import { IconCheckMark } from '../icons/check-mark';
-import { IconArrowsChevronBottom } from '../icons/arrows/chevron-bottom';
-import { Text } from '../typography/v2/text';
-
-import style from './index.module.pcss';
-
-export declare type TOptionOrSingleValueProps<Option, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> =
-    OptionProps<Option, IsMulti, Group>
-    | SingleValueProps<Option, IsMulti, Group>;
-
-export interface IOption {
-    label: string,
-    value: string,
-    elBefore?: ReactNode | ((option: TOptionOrSingleValueProps<IOption>) => ReactNode),
-    elAfter?: ReactNode | ((option: TOptionOrSingleValueProps<IOption>) => ReactNode),
-    disabled?: boolean
-}
-
-interface ICallbackParams {
-    [key: string | number]: string | number | boolean | null | undefined | ICallbackParams
-}
-
-type TSelectProps<IsMulti extends boolean = boolean> = Partial<Props<IOption, IsMulti, GroupBase<IOption>>>;
-
-export type TArrayOptions = Array<IOption | GroupBase<IOption>>;
-
-export interface IProps<IsMulti extends boolean = boolean> extends Omit<TSelectProps<IsMulti>, 'className'> {
-    /**
-     * Определяет позицию меню fixed или absolute
-     **/
-    readonly menuPosition?: TSelectProps['menuPosition'],
-    /**
-     * Включает возможность выбора нескольких опций
-     **/
-    readonly isMulti?: IsMulti,
-    /**
-     * Определяет CSS-классы, которые будут применены к корневому элементу или CSS модулю
-     **/
-    readonly className?: string | TStyle,
-    /**
-     * Коллеция выбранных значений
-     **/
-    readonly value?: PropsValue<IOption>,
-    /**
-     * Коллекция опций
-     **/
-    readonly options: OptionsOrGroups<IOption, GroupBase<IOption>>,
-    /**
-     * Срабатывает при изменении значения
-     **/
-    readonly onChange?: (newValue: OnChangeValue<IOption, IsMulti>, actionMeta: ActionMeta<IOption>) => void,
-    /**
-     * Выбранные опции по умолчанию
-     **/
-    readonly defaultValue?: PropsValue<IOption>,
-    /**
-     * Фильтрация опций
-     **/
-    /**
-     * Приводит компонент в состояние ошибки
-     **/
-    readonly isError?: boolean,
-    /**
-     * Лейбл поля
-     **/
-    readonly label?: ReactNode,
-    /**
-     * Значение инпута по умолчанию
-     **/
-    readonly defaultInputValue?: TSelectProps['defaultInputValue'],
-    /**
-     * Скрывать выбранные опции
-     **/
-    readonly hideSelectedOptions?: TSelectProps['hideSelectedOptions'],
-    /**
-     * Открывает меню выбора
-     **/
-    readonly menuIsOpen?: TSelectProps['menuIsOpen'],
-    /**
-     * Открывать меню при первом рендере компонента
-     **/
-    readonly defaultMenuIsOpen?: TSelectProps['defaultMenuIsOpen'],
-    /**
-     * Режим чтения справа налево
-     **/
-    readonly isRtl?: TSelectProps['isRtl'],
-    /**
-     * Отображается пока не выбран не один элемент
-     **/
-    readonly placeholder?: TSelectProps['placeholder'],
-    /**
-     * Срабатывает при потере фокуса на элемента
-     **/
-    readonly onBlur?: TSelectProps['onBlur'],
-    /**
-     * Срабатывает при фокусе элемента
-     **/
-    readonly onFocus?: TSelectProps['onFocus'],
-    /**
-     * Срабатывает при нажатии кнопки
-     **/
-    readonly onKeyDown?: TSelectProps['onKeyDown'],
-    /**
-     * Срабатывает когда пользователь прокрутил меню до начала
-     **/
-    readonly onMenuScrollToTop?: TSelectProps['onMenuScrollToTop'],
-    /**
-     * Срабатывает когда пользователь прокрутил меню до конца
-     **/
-    readonly onMenuScrollToBottom?: TSelectProps['onMenuScrollToBottom'],
-    /**
-     * Открывать меню при фокусе на элемент
-     **/
-    readonly openMenuOnFocus?: TSelectProps['openMenuOnFocus'],
-    /**
-     * Открывать меню при клике
-     **/
-    readonly openMenuOnClick?: TSelectProps['openMenuOnClick'],
-    /**
-     * Количество элементов при нажатии клавиш вверх/вниз
-     **/
-    readonly pageSize?: TSelectProps['pageSize'],
-    /**
-     * Параметр `required` указывает, что данное поле является обязательным для заполнения перед отправкой формы
-     */
-    readonly required?: TSelectProps['required'],
-    /**
-     * Устанавливает порядок перехода по кнопке с помощью клавиши `Tab`.
-     **/
-    readonly tabIndex?: TSelectProps['tabIndex'],
-    /**
-     * Название инпута
-     **/
-    readonly name?: TSelectProps['name'],
-    /**
-     * Прокрутка меню при открытии
-     **/
-    readonly menuShouldScrollIntoView?: TSelectProps['menuShouldScrollIntoView'],
-    /**
-     * Блокировка прокрутки при открытом меню
-     **/
-    readonly menuShouldBlockScroll?: TSelectProps['menuShouldBlockScroll'],
-    /**
-     * Включает возможность поиска по опциям
-     **/
-    readonly isSearchable?: TSelectProps['isSearchable'],
-    /**
-     * Включает возможность очистки выбранного значения
-     **/
-    readonly isClearable?: TSelectProps['isClearable'],
-    /**
-     * Устанавливает фокус на элемент при первом рендере компонента
-     **/
-    readonly autoFocus?: TSelectProps['autoFocus'],
-    /**
-     * Удалять выбранную в данный момент опцию, когда пользователь нажимает клавишу Backspace при выборе isClearable или isMulti.
-     **/
-    readonly backspaceRemovesValue?: TSelectProps['backspaceRemovesValue'],
-    /**
-     * Удалять фокус ввода, когда пользователь выбирает опцию (удобно для отключения клавиатуры на сенсорных устройствах).
-     **/
-    readonly blurInputOnSelect?: TSelectProps['blurInputOnSelect'],
-    /**
-     * Когда пользователь достигает верхней/нижней части меню, запретите прокрутку родительского элемента прокрутки.
-     **/
-    readonly captureMenuScroll?: TSelectProps['captureMenuScroll'],
-    /**
-     * Закрывать меню выбора, когда пользователь выбирает опцию
-     **/
-    readonly closeMenuOnSelect?: TSelectProps['closeMenuOnSelect'],
-    /**
-     * Если `true`, закроет меню выбора, когда пользователь прокручивает `document/body`.
-     *
-     * Если `function` принимает стандартное событие `ScrollEvent`, вы возвращаете логическое значение: `true` - Меню закрывается, `false` - Меню остается открытым.
-     *
-     * Это полезно, когда у вас есть прокручиваемое модальное окно и вы хотите перенести меню, но хотите избежать артефактов.
-     **/
-    readonly closeMenuOnScroll?: TSelectProps['closeMenuOnScroll'],
-    /**
-     * Показывать ли значение в элементе Control
-     **/
-    readonly controlShouldRenderValue?: TSelectProps['controlShouldRenderValue'],
-    /**
-     * Очистить все значения и закрыть меню при нажатии `esc`
-     **/
-    readonly escapeClearsValue?: TSelectProps['escapeClearsValue'],
-    /**
-     * Фильтрация опций
-     **/
-    readonly filterOption?: TSelectProps['filterOption'],
-    readonly classNames?: TSelectProps['classNames'],
-    // readonly components?: TSelectProps['components'],
-    readonly formatGroupLabel?: TSelectProps['formatGroupLabel'],
-    readonly getOptionLabel?: TSelectProps['getOptionLabel'],
-    readonly getOptionValue?: TSelectProps['getOptionValue'],
-    readonly inputValue?: TSelectProps['inputValue'],
-    readonly isDisabled?: TSelectProps['isDisabled'],
-    readonly isLoading?: TSelectProps['isLoading'],
-    readonly isOptionDisabled?: TSelectProps['isOptionDisabled'],
-    readonly loadingMessage?: TSelectProps['loadingMessage'],
-    readonly maxMenuHeight?: TSelectProps['maxMenuHeight'],
-    readonly menuPlacement?: TSelectProps['menuPlacement'],
-    readonly minMenuHeight?: TSelectProps['minMenuHeight'],
-    readonly noOptionsMessage?: TSelectProps['noOptionsMessage'],
-    readonly onInputChange?: TSelectProps['onInputChange'],
-    readonly onMenuClose?: TSelectProps['onMenuClose'],
-    readonly onMenuOpen?: TSelectProps['onMenuOpen'],
-    readonly screenReaderStatus?: TSelectProps['screenReaderStatus'],
-    readonly styles?: TSelectProps['styles'],
-    readonly tabSelectsValue?: TSelectProps['tabSelectsValue'],
-    readonly unstyled?: TSelectProps['unstyled'],
-    readonly noOptionsText?: string
-}
-
-type TAsyncSelectProps<IsMulti extends boolean> = IProps<IsMulti> & {
-    readonly typeComponent: 'async',
-    readonly loadCallback: (callbackParams?: ICallbackParams) => Promise<TArrayOptions>,
-    readonly hasMore: boolean,
-    readonly callbackParams?: ICallbackParams
-};
-
-type TSyncSelectProps<IsMulti extends boolean> = IProps<IsMulti> & {
-    readonly typeComponent?: 'sync',
-    readonly loadCallback?: never,
-    readonly hasMore?: never,
-    readonly callbackParams?: never
-};
-
-type TComponentSelectProps<IsMulti extends boolean> = TAsyncSelectProps<IsMulti> | TSyncSelectProps<IsMulti>;
+import { TComponentSelectProps, IOption } from './types';
+import { useOption } from './hooks/use-options';
+import { useGetClassnames } from './hooks/use-get-classnames';
+import { NoOptions } from './components/no-options';
+import { getParams } from './utils/get-params';
+import { Option } from './components/option';
+import { SingleValue } from './components/single-value';
+import { IndicatorsContainer } from './components/indicators-container';
+import { Container } from './components/container';
 
 const DEFAULT_PAGE_SIZE = 10;
 
@@ -256,216 +31,82 @@ export const Select = <IsMulti extends boolean = false>({
     pageSize = DEFAULT_PAGE_SIZE,
     ...props
 }: TComponentSelectProps<IsMulti>) => {
-    const cn = useClassnames(style, props.className);
-
-    const elOptionSelected = useCallback((option: OptionProps<IOption, IsMulti, GroupBase<IOption>>) => {
-        if(option.isSelected) {
-            return (
-                <IconCheckMark
-                    svg={{
-                        className: cn('select__icon-check-mark', {
-                            'select__icon-check-mark_disabled': option.isDisabled
-                        })
-                    }}
-                />
-            );
-        }
-    }, []);
-
-    const elOptionBefore = useCallback((option: TOptionOrSingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => {
-        if(option.data.elBefore) {
-            if(typeof option.data.elBefore === 'function') {
-                return option.data.elBefore(option);
-            }
+    const { classNames } = useGetClassnames({
+        className: props.className,
+        isError: props.isError 
+    });
 
-            return option.data.elBefore;
-        }
-    }, []);
-
-    const elOptionAfter = useCallback((option: TOptionOrSingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => {
-        if(option.data.elAfter) {
-            if(typeof option.data.elAfter === 'function') {
-                return option.data.elAfter(option);
-            }
-
-            return option.data.elAfter;
-        }
-    }, []);
+    const { getLoadOptions } = useOption({
+        isOptionsForFetch: props.isOptionsForFetch,
+        fetchOptions: props.fetchOptions 
+    });
 
     const componentOption = useCallback((option: OptionProps<IOption, IsMulti, GroupBase<IOption>>) => (
-        <components.Option {...option}>
-            {elOptionSelected(option)}
-            {elOptionBefore(option)}
-            {option.children}
-            {elOptionAfter(option)}
-        </components.Option>
-    ), []);
+        <Option
+            option={option}
+            className={props.className}
+        />
+    ), [props.className]);
 
-    const componentSingleValue = useCallback((option: SingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => (
-        <components.SingleValue {...option}>
-            {elOptionBefore(option)}
-            {option.children}
-            {elOptionAfter(option)}
-        </components.SingleValue>
-    ), []);
+    const componentSingleValue = useCallback((option: SingleValueProps<IOption, IsMulti, GroupBase<IOption>>) => <SingleValue option={option} />, []);
 
     const componentIndicatorsContainer = useCallback((option: IndicatorsContainerProps<IOption, IsMulti, GroupBase<IOption>>) => (
-        <components.IndicatorsContainer {...option}>
-            <IconArrowsChevronBottom
-                svg={{
-                    className: cn('select__icon-arrow-bottom', {
-                        'select__icon-arrow-bottom_disabled': option.isDisabled,
-                        'select__icon-arrow-bottom_open': option.selectProps.menuIsOpen
-                    })
-                }}
-            />
-        </components.IndicatorsContainer>
-    ), []);
-
-    const componentNoOptions = useCallback(() => (
-        <div className={cn('select__no-options')}>
-            <Text presetColor="secondary">
-                {props.noOptionsText ?? 'No options'}
-            </Text>
-        </div>
-    ), [props.noOptionsText]);
-
-    const elLabel = useMemo(() => {
-        if(props.label) {
-            return (
-                <span
-                    className={cn('select__label')}
-                    children={props.label}
-                />
-            );
-        }
-    }, [props.label]);
-
-    const elContainer = useCallback((children: ReactNode) => {
-        return (
-            <label className={cn('select')}>
-                {elLabel}
-                {children}
-            </label>
-        );
-    }, []);
-
-    const loadOptions = useCallback(async (
-        search: string
-    ): Promise<{ options: Array<IOption | GroupBase<IOption>>, hasMore: boolean }> => {
-        let options: Array<IOption | GroupBase<IOption>> = [];
+        <IndicatorsContainer
+            option={option}
+            className={props.className}
+        />
+    ), [props.className]);
 
-        const params = {
-            ...props.callbackParams,
-            search
-        };
+    const componentNoOptions = useCallback(() => <NoOptions noOptionsText={props.noOptionsText} />, [props.noOptionsText]);
 
-        if(props.loadCallback) {
-            options = await props.loadCallback(params);
+    const onInputChange = (newValue: string, actionMeta: InputActionMeta) => {
+        if(newValue && props.onInputChange) {
+            props.onInputChange(newValue, actionMeta);
         }
-
-        return {
-            options,
-            hasMore: props.hasMore ?? false
-        };
-    }, [props.options, props.hasMore, props.callbackParams]);
-
-    const params = {
-        placeholder: props.placeholder ?? '',
-        isMulti: props.isMulti,
-        hideSelectedOptions: props.hideSelectedOptions,
-        menuIsOpen: props.menuIsOpen,
-        defaultMenuIsOpen: props.defaultMenuIsOpen,
-        defaultValue: props.defaultValue,
-        filterOption: props.filterOption,
-        isSearchable: isSearchable,
-        name: props.name,
-        isClearable: props.isClearable,
-        escapeClearsValue: props.escapeClearsValue,
-        value: props.value,
-        autoFocus: props.autoFocus,
-        isRtl: props.isRtl,
-        backspaceRemovesValue: props.backspaceRemovesValue,
-        blurInputOnSelect: props.blurInputOnSelect,
-        captureMenuScroll: props.captureMenuScroll,
-        closeMenuOnSelect: props.closeMenuOnSelect,
-        closeMenuOnScroll: props.closeMenuOnScroll,
-        controlShouldRenderValue: props.controlShouldRenderValue,
-        isDisabled: props.isDisabled,
-        defaultInputValue: props.defaultInputValue,
-        menuShouldBlockScroll: props.menuShouldBlockScroll,
-        menuShouldScrollIntoView: props.menuShouldScrollIntoView,
-        onBlur: props.onBlur,
-        onFocus: props.onFocus,
-        onKeyDown: props.onKeyDown,
-        onMenuScrollToTop: props.onMenuScrollToTop,
-        onMenuScrollToBottom: props.onMenuScrollToBottom,
-        onChange: props.onChange,
-        openMenuOnFocus: props.openMenuOnFocus,
-        openMenuOnClick: props.openMenuOnClick,
-        pageSize: pageSize,
-        tabIndex: props.tabIndex,
-        menuPortalTarget: props.menuPortalTarget,
-        menuPosition: props.menuPosition,
-        getOptionLabel: (option: IOption) => option.label,
-        isOptionDisabled: (option: IOption) => !!option.disabled
     };
 
-    const classNames = {
-        menu: () => cn('select__menu'),
-        menuList: () => cn('select__menu-list'),
-        singleValue: () => cn('select__single-value'),
-        control: (option: { isDisabled: boolean }) => cn('select__control', {
-            'select__control_disabled': option.isDisabled,
-            'select__control_error': props.isError
-        }),
-        valueContainer: () => cn('select__value-container'),
-        placeholder: () => cn('select__placeholder'),
-        option: (option: { isDisabled: boolean, isFocused: boolean, isSelected: boolean }) => cn('select__option', {
-            'select__option_focused': option.isFocused,
-            'select__option_disabled': option.isDisabled,
-            'select__option_selected': option.isSelected
-        })
-    };
+    const params = getParams({
+        ...props,
+        isSearchable,
+        pageSize 
+    });
 
     if(typeComponent === 'async') {
-        return elContainer(
-            <AsyncPaginate<IOption, GroupBase<IOption>, unknown, IsMulti>
-                loadOptions={loadOptions}
-                isLoading={isLoading}
+        return (
+            <Container label={props.label}>
+                <AsyncPaginate<IOption, GroupBase<IOption>, unknown, IsMulti>
+                    loadOptions={getLoadOptions}
+                    isLoading={isLoading}
+                    classNames={classNames}
+                    onInputChange={onInputChange}
+                    components={{
+                        Option: (option) => componentOption(option),
+                        SingleValue: (option) => componentSingleValue(option),
+                        IndicatorSeparator: null,
+                        IndicatorsContainer: (option) => componentIndicatorsContainer(option),
+                        LoadingIndicator: components.LoadingIndicator,
+                        NoOptionsMessage: componentNoOptions
+                    }}
+                    debounceTimeout={300}
+                    {...params}
+                />
+            </Container>
+        );
+    }
+
+    return (
+        <Container label={props.label}>
+            <SelectSource
                 classNames={classNames}
-                onInputChange={(newValue, actionMeta) => {
-                    if(newValue && props.onInputChange) {
-                        props.onInputChange(newValue, actionMeta);
-                    }
-                }}
                 components={{
-                    /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
-                    Option: (option) => componentOption(option as OptionProps<IOption, IsMulti, GroupBase<IOption>>),
-                    SingleValue: (option) => componentSingleValue(option as SingleValueProps<IOption, IsMulti, GroupBase<IOption>>),
+                    Option: componentOption,
+                    SingleValue: componentSingleValue,
                     IndicatorSeparator: null,
-                    IndicatorsContainer: (option) => componentIndicatorsContainer(option as IndicatorsContainerProps<IOption, IsMulti, GroupBase<IOption>>),
-                    LoadingIndicator: components.LoadingIndicator,
-                    NoOptionsMessage: componentNoOptions
-                    /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion */
+                    IndicatorsContainer: componentIndicatorsContainer
                 }}
-                debounceTimeout={300}
+                options={props.options}
                 {...params}
             />
-        );
-    }
-
-    return elContainer(
-        <SelectSource
-            classNames={classNames}
-            components={{
-                Option: componentOption,
-                SingleValue: componentSingleValue,
-                IndicatorSeparator: null,
-                IndicatorsContainer: componentIndicatorsContainer
-            }}
-            options={props.options}
-            {...params}
-        />
+        </Container>
     );
 };
diff --git a/packages/ui-react/src/components/select/types.ts b/packages/ui-react/src/components/select/types.ts
new file mode 100644
index 0000000..150beea
--- /dev/null
+++ b/packages/ui-react/src/components/select/types.ts
@@ -0,0 +1,237 @@
+import { ReactNode } from 'react';
+import {
+    OptionProps,
+    SingleValueProps,
+    Props,
+    GroupBase,
+    PropsValue,
+    ActionMeta,
+    OptionsOrGroups,
+    OnChangeValue
+} from 'react-select';
+
+import type { TStyle } from '../../hooks/use-classnames';
+
+export declare type TOptionOrSingleValueProps<Option, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> =
+    OptionProps<Option, IsMulti, Group>
+    | SingleValueProps<Option, IsMulti, Group>;
+
+export interface IOption {
+    label: string,
+    value: string,
+    elBefore?: ReactNode | ((option: TOptionOrSingleValueProps<IOption>) => ReactNode),
+    elAfter?: ReactNode | ((option: TOptionOrSingleValueProps<IOption>) => ReactNode),
+    disabled?: boolean
+}
+
+export type TSelectProps<IsMulti extends boolean = boolean> = Partial<Props<IOption, IsMulti, GroupBase<IOption>>>;
+
+export type TArrayOptions = Array<IOption | GroupBase<IOption>>;
+
+export interface IProps<IsMulti extends boolean = boolean> extends Omit<TSelectProps<IsMulti>, 'className'> {
+    /**
+     * Определяет позицию меню fixed или absolute
+     **/
+    readonly menuPosition?: TSelectProps['menuPosition'],
+    /**
+     * Включает возможность выбора нескольких опций
+     **/
+    readonly isMulti?: IsMulti,
+    /**
+     * Определяет CSS-классы, которые будут применены к корневому элементу или CSS модулю
+     **/
+    readonly className?: string | TStyle,
+    /**
+     * Коллеция выбранных значений
+     **/
+    readonly value?: PropsValue<IOption>,
+    /**
+     * Коллекция опций
+     **/
+    readonly options?: OptionsOrGroups<IOption, GroupBase<IOption>>,
+    /**
+     * Срабатывает при изменении значения
+     **/
+    readonly onChange?: (newValue: OnChangeValue<IOption, IsMulti>, actionMeta: ActionMeta<IOption>) => void,
+    /**
+     * Выбранные опции по умолчанию
+     **/
+    readonly defaultValue?: PropsValue<IOption>,
+    /**
+     * Фильтрация опций
+     **/
+    /**
+     * Приводит компонент в состояние ошибки
+     **/
+    readonly isError?: boolean,
+    /**
+     * Лейбл поля
+     **/
+    readonly label?: ReactNode,
+    /**
+     * Значение инпута по умолчанию
+     **/
+    readonly defaultInputValue?: TSelectProps['defaultInputValue'],
+    /**
+     * Скрывать выбранные опции
+     **/
+    readonly hideSelectedOptions?: TSelectProps['hideSelectedOptions'],
+    /**
+     * Открывает меню выбора
+     **/
+    readonly menuIsOpen?: TSelectProps['menuIsOpen'],
+    /**
+     * Открывать меню при первом рендере компонента
+     **/
+    readonly defaultMenuIsOpen?: TSelectProps['defaultMenuIsOpen'],
+    /**
+     * Режим чтения справа налево
+     **/
+    readonly isRtl?: TSelectProps['isRtl'],
+    /**
+     * Отображается пока не выбран не один элемент
+     **/
+    readonly placeholder?: TSelectProps['placeholder'],
+    /**
+     * Срабатывает при потере фокуса на элемента
+     **/
+    readonly onBlur?: TSelectProps['onBlur'],
+    /**
+     * Срабатывает при фокусе элемента
+     **/
+    readonly onFocus?: TSelectProps['onFocus'],
+    /**
+     * Срабатывает при нажатии кнопки
+     **/
+    readonly onKeyDown?: TSelectProps['onKeyDown'],
+    /**
+     * Срабатывает когда пользователь прокрутил меню до начала
+     **/
+    readonly onMenuScrollToTop?: TSelectProps['onMenuScrollToTop'],
+    /**
+     * Срабатывает когда пользователь прокрутил меню до конца
+     **/
+    readonly onMenuScrollToBottom?: TSelectProps['onMenuScrollToBottom'],
+    /**
+     * Открывать меню при фокусе на элемент
+     **/
+    readonly openMenuOnFocus?: TSelectProps['openMenuOnFocus'],
+    /**
+     * Открывать меню при клике
+     **/
+    readonly openMenuOnClick?: TSelectProps['openMenuOnClick'],
+    /**
+     * Количество элементов при нажатии клавиш вверх/вниз
+     **/
+    readonly pageSize?: TSelectProps['pageSize'],
+    /**
+     * Параметр `required` указывает, что данное поле является обязательным для заполнения перед отправкой формы
+     */
+    readonly required?: TSelectProps['required'],
+    /**
+     * Устанавливает порядок перехода по кнопке с помощью клавиши `Tab`.
+     **/
+    readonly tabIndex?: TSelectProps['tabIndex'],
+    /**
+     * Название инпута
+     **/
+    readonly name?: TSelectProps['name'],
+    /**
+     * Прокрутка меню при открытии
+     **/
+    readonly menuShouldScrollIntoView?: TSelectProps['menuShouldScrollIntoView'],
+    /**
+     * Блокировка прокрутки при открытом меню
+     **/
+    readonly menuShouldBlockScroll?: TSelectProps['menuShouldBlockScroll'],
+    /**
+     * Включает возможность поиска по опциям
+     **/
+    readonly isSearchable?: TSelectProps['isSearchable'],
+    /**
+     * Включает возможность очистки выбранного значения
+     **/
+    readonly isClearable?: TSelectProps['isClearable'],
+    /**
+     * Устанавливает фокус на элемент при первом рендере компонента
+     **/
+    readonly autoFocus?: TSelectProps['autoFocus'],
+    /**
+     * Удалять выбранную в данный момент опцию, когда пользователь нажимает клавишу Backspace при выборе isClearable или isMulti.
+     **/
+    readonly backspaceRemovesValue?: TSelectProps['backspaceRemovesValue'],
+    /**
+     * Удалять фокус ввода, когда пользователь выбирает опцию (удобно для отключения клавиатуры на сенсорных устройствах).
+     **/
+    readonly blurInputOnSelect?: TSelectProps['blurInputOnSelect'],
+    /**
+     * Когда пользователь достигает верхней/нижней части меню, запретите прокрутку родительского элемента прокрутки.
+     **/
+    readonly captureMenuScroll?: TSelectProps['captureMenuScroll'],
+    /**
+     * Закрывать меню выбора, когда пользователь выбирает опцию
+     **/
+    readonly closeMenuOnSelect?: TSelectProps['closeMenuOnSelect'],
+    /**
+     * Если `true`, закроет меню выбора, когда пользователь прокручивает `document/body`.
+     *
+     * Если `function` принимает стандартное событие `ScrollEvent`, вы возвращаете логическое значение: `true` - Меню закрывается, `false` - Меню остается открытым.
+     *
+     * Это полезно, когда у вас есть прокручиваемое модальное окно и вы хотите перенести меню, но хотите избежать артефактов.
+     **/
+    readonly closeMenuOnScroll?: TSelectProps['closeMenuOnScroll'],
+    /**
+     * Показывать ли значение в элементе Control
+     **/
+    readonly controlShouldRenderValue?: TSelectProps['controlShouldRenderValue'],
+    /**
+     * Очистить все значения и закрыть меню при нажатии `esc`
+     **/
+    readonly escapeClearsValue?: TSelectProps['escapeClearsValue'],
+    /**
+     * Фильтрация опций
+     **/
+    readonly filterOption?: TSelectProps['filterOption'],
+    readonly classNames?: TSelectProps['classNames'],
+    // readonly components?: TSelectProps['components'],
+    readonly formatGroupLabel?: TSelectProps['formatGroupLabel'],
+    readonly getOptionLabel?: TSelectProps['getOptionLabel'],
+    readonly getOptionValue?: TSelectProps['getOptionValue'],
+    readonly inputValue?: TSelectProps['inputValue'],
+    readonly isDisabled?: TSelectProps['isDisabled'],
+    readonly isLoading?: TSelectProps['isLoading'],
+    readonly isOptionDisabled?: TSelectProps['isOptionDisabled'],
+    readonly loadingMessage?: TSelectProps['loadingMessage'],
+    readonly maxMenuHeight?: TSelectProps['maxMenuHeight'],
+    readonly menuPlacement?: TSelectProps['menuPlacement'],
+    readonly minMenuHeight?: TSelectProps['minMenuHeight'],
+    readonly noOptionsMessage?: TSelectProps['noOptionsMessage'],
+    readonly onInputChange?: TSelectProps['onInputChange'],
+    readonly onMenuClose?: TSelectProps['onMenuClose'],
+    readonly onMenuOpen?: TSelectProps['onMenuOpen'],
+    readonly screenReaderStatus?: TSelectProps['screenReaderStatus'],
+    readonly styles?: TSelectProps['styles'],
+    readonly tabSelectsValue?: TSelectProps['tabSelectsValue'],
+    readonly unstyled?: TSelectProps['unstyled'],
+    readonly noOptionsText?: string
+}
+
+type TAsyncSelectProps<IsMulti extends boolean> = IProps<IsMulti> & {
+    readonly typeComponent: 'async',
+    /**
+     * функция, загружающая асинхронно новые опции
+     **/
+    readonly fetchOptions: (search?: string) => Promise<TArrayOptions>,
+    /**
+     * параметр, который указывает, есть ли еще данные для подгрузки
+     **/
+    readonly isOptionsForFetch: boolean
+};
+
+type TSyncSelectProps<IsMulti extends boolean> = IProps<IsMulti> & {
+    readonly typeComponent?: 'sync',
+    readonly fetchOptions?: never,
+    readonly isOptionsForFetch?: never
+};
+
+export type TComponentSelectProps<IsMulti extends boolean> = TAsyncSelectProps<IsMulti> | TSyncSelectProps<IsMulti>;
diff --git a/packages/ui-react/src/components/select/utils/get-params.ts b/packages/ui-react/src/components/select/utils/get-params.ts
new file mode 100644
index 0000000..dafb4b4
--- /dev/null
+++ b/packages/ui-react/src/components/select/utils/get-params.ts
@@ -0,0 +1,17 @@
+import { IProps, IOption } from '../types';
+
+export const getParams = <IsMulti extends boolean = false>(props: IProps<IsMulti>) => {
+    const {
+        placeholder = '',  
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        isLoading, className, classNames, onInputChange, options,
+        ...restProps 
+    } = props;
+
+    return {
+        placeholder,
+        ...restProps,
+        getOptionLabel: (option: IOption) => option.label,
+        isOptionDisabled: (option: IOption) => !!option.disabled
+    };
+};
\ No newline at end of file