wildberries-tech · alena-shp · Feb 19, 2025
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+    );
+};
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
@@ -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/...ges/ui-react/src/components/select/components/indicators-container/index.module.pcss.d.ts b/...ges/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
@@ -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
@@ -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
@@ -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
@@ -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>
+    );
+};
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
@@ -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
@@ -0,0 +1,11 @@
+
+
+
+interface Stylesheet {
+    'select__icon-check-mark': string
+    'select__icon-check-mark_disabled': string
+}
+
+
+declare const stylesheet: Stylesheet
+export default stylesheet