@salutejs/plasma-new-hope 0.92.0-canary.1233.9662754485.0 → 0.92.0-canary.1253.9663882094.0

package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -1,842 +1,276 @@
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { action } from '@storybook/addon-actions';
 
-import './style.css';
+import { mergeConfig } from '../../../../engines';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Button } from '../Button/Button';
+import { SelectPrimitiveValue, selectConfig } from '../../../../components/Select';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconDone, IconClose } from '../../../../components/_Icon';
 
-import { WithTheme } from '../../../_helpers';
+import { Select, SelectDivider, SelectItem } from './Select';
+import { config } from './Select.config';
 
-import { Select, SelectNotFoundContent } from './Select';
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
 
-type StorySelectProps = ComponentProps<typeof Select> & {
-    enableContentLeft?: boolean;
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
 };
 
-const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white'];
-const size = ['xs', 's', 'm', 'l'];
-const labelPlacement = ['inner', 'outer'];
-const chip = ['default', 'secondary', 'accent'];
-const variant = ['normal', 'tight'];
+type StorySelectProps = ComponentProps<typeof Select> & StorySelectPropsCustom;
 
 const meta: Meta<StorySelectProps> = {
     title: 'plasma_b2c/Select',
     decorators: [WithTheme],
     component: Select,
     argTypes: {
-        target: {
-            options: ['button', 'textfield'],
+        placement: {
+            options: placements,
             control: {
                 type: 'select',
             },
         },
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: view,
-            control: {
-                type: 'select',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacement,
-            control: {
-                type: 'select',
-            },
-        },
-        chipView: {
-            options: chip,
-            control: {
-                type: 'select',
-            },
-        },
-        variant: {
-            options: variant,
+        enumerationType: {
+            options: enumerations,
             control: {
                 type: 'select',
             },
         },
+        ...argTypesFromConfig(mergeConfig(selectConfig, config)),
     },
     args: {
-        target: 'button',
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
         label: 'Label',
-        labelPlacement: 'outer',
-        placeholder: 'Placeholder',
-        helperText: 'Helper text',
+        target: 'button-like',
+        enumerationType: 'comma',
         size: 'm',
         view: 'default',
-        chipView: 'default',
-        enableContentLeft: false,
-        isTargetAmount: false,
-        variant: 'normal',
-        disabled: false,
+        placement: 'bottom',
     },
 };
 
 export default meta;
 
-const items = [
-    {
-        value: 'north_america',
-        label: 'Северная Америка',
-    },
-    {
-        value: 'south_america',
-        label: 'Южная Америка',
-        items: [
-            {
-                value: 'brazil',
-                label: 'Бразилия',
-                items: [
-                    {
-                        value: 'rio_de_janeiro',
-                        label: 'Рио-де-Жанейро',
-                    },
-                    {
-                        value: 'sao_paulo',
-                        label: 'Сан-Паулу',
-                    },
-                ],
-            },
-            {
-                value: 'argentina',
-                label: 'Аргентина',
-                items: [
-                    {
-                        value: 'buenos_aires',
-                        label: 'Буэнос-Айрес',
-                    },
-                    {
-                        value: 'cordoba',
-                        label: 'Кордова',
-                    },
-                ],
-            },
-            {
-                value: 'colombia',
-                label: 'Колумбия',
-                items: [
-                    {
-                        value: 'bogota',
-                        label: 'Богота',
-                    },
-                    {
-                        value: 'medellin',
-                        label: 'Медельин',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'europe',
-        label: 'Европа',
-        items: [
-            {
-                value: 'france',
-                label: 'Франция',
-                items: [
-                    {
-                        value: 'paris',
-                        label: 'Париж',
-                    },
-                    {
-                        value: 'lyon',
-                        label: 'Лион',
-                    },
-                ],
-            },
-            {
-                value: 'germany',
-                label: 'Германия',
-                items: [
-                    {
-                        value: 'berlin',
-                        label: 'Берлин',
-                    },
-                    {
-                        value: 'munich',
-                        label: 'Мюнхен',
-                    },
-                ],
-            },
-            {
-                value: 'italy',
-                label: 'Италия',
-                items: [
-                    {
-                        value: 'rome',
-                        label: 'Рим',
-                    },
-                    {
-                        value: 'milan',
-                        label: 'Милан',
-                    },
-                ],
-            },
-            {
-                value: 'spain',
-                label: 'Испания',
-                items: [
-                    {
-                        value: 'madrid',
-                        label: 'Мадрид',
-                    },
-                    {
-                        value: 'barcelona',
-                        label: 'Барселона',
-                    },
-                ],
-            },
-            {
-                value: 'united_kingdom',
-                label: 'Великобритания',
-                items: [
-                    {
-                        value: 'london',
-                        label: 'Лондон',
-                    },
-                    {
-                        value: 'manchester',
-                        label: 'Манчестер',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'asia',
-        label: 'Азия',
-        items: [
-            {
-                value: 'china',
-                label: 'Китай',
-                items: [
-                    {
-                        value: 'beijing',
-                        label: 'Пекин',
-                    },
-                    {
-                        value: 'shanghai',
-                        label: 'Шанхай',
-                    },
-                ],
-            },
-            {
-                value: 'japan',
-                label: 'Япония',
-                items: [
-                    {
-                        value: 'tokyo',
-                        label: 'Токио',
-                    },
-                    {
-                        value: 'osaka',
-                        label: 'Осака',
-                    },
-                ],
-            },
-            {
-                value: 'india',
-                label: 'Индия',
-                items: [
-                    {
-                        value: 'delhi',
-                        label: 'Дели',
-                    },
-                    {
-                        value: 'mumbai',
-                        label: 'Мумбаи',
-                    },
-                ],
-            },
-            {
-                value: 'south_korea',
-                label: 'Южная Корея',
-                items: [
-                    {
-                        value: 'seoul',
-                        label: 'Сеул',
-                    },
-                    {
-                        value: 'busan',
-                        label: 'Пусан',
-                    },
-                ],
-            },
-            {
-                value: 'thailand',
-                label: 'Таиланд',
-                items: [
-                    {
-                        value: 'bangkok',
-                        label: 'Бангкок',
-                    },
-                    {
-                        value: 'phuket',
-                        label: 'Пхукет',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'africa',
-        label: 'Африка',
-        isDisabled: true,
-    },
-];
-
-const SingleStory = (args: StorySelectProps) => {
-    const [value, setValue] = useState('');
+const onChangeAction = action('onChange');
 
-    return (
-        <div style={{ width: '300px' }}>
-            <Select
-                {...args}
-                items={items}
-                value={value}
-                onChange={setValue}
-                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-            />
-        </div>
-    );
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
 };
 
-export const Single: StoryObj<StorySelectProps> = {
-    render: (args) => <SingleStory {...args} />,
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
 };
 
-const MultiselectStory = (args: StorySelectProps) => {
-    const [value, setValue] = useState<Array<string>>([]);
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StorySingle = (args: StorySelectProps) => {
+    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
+
+    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
 
     return (
-        <div style={{ width: '300px' }}>
+        <div style={{ width: '50%' }} id="portal-test">
             <Select
-                {...args}
-                items={items}
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
                 value={value}
-                onChange={setValue}
-                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-            />
+                placement={placement}
+                label={label}
+                size={size}
+                view={view}
+                target={target}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <SelectItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <SelectItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Select>
         </div>
     );
 };
 
-export const Multiselect: StoryObj<StorySelectProps> = {
-    render: (args) => <MultiselectStory {...args} />,
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <StorySingle {...args} />,
 };
 
-const PredefinedStory = (args: StorySelectProps) => {
-    const [valueSingle, setValueSingle] = useState('paris');
-    const [valueMultiple, setValueMultiple] = useState(['paris', 'north_america']);
+const StoryMultiple = (args: StorySelectProps) => {
+    const { usePortal, placement, label, readOnly, disabled, enumerationType, size = 'm', view, target } = args;
 
-    return (
-        <div style={{ width: '300px' }}>
-            <Select
-                {...args}
-                items={items}
-                value={valueSingle}
-                onChange={setValueSingle}
-                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-            />
+    const [value, setValue] = useState<Array<SelectPrimitiveValue> | undefined>(['item_2', 'item_3']);
 
-            <br />
+    const onChangeValue = (newValue?: Array<SelectPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
 
+    return (
+        <div style={{ width: '50%' }}>
             <Select
-                {...args}
-                items={items}
-                value={valueMultiple}
-                onChange={setValueMultiple}
-                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-            />
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                value={value}
+                placement={placement}
+                label={label}
+                size={size}
+                view={view}
+                target={target}
+                enumerationType={enumerationType}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                {getSelectItems('item', 6).map((item) => (
+                    <SelectItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Select>
         </div>
     );
 };
 
-export const Predefined: StoryObj<StorySelectProps> = {
-    render: (args) => <PredefinedStory {...args} />,
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryMultiple {...args} />,
 };
 
-const EmptyListStory = (args: StorySelectProps) => {
-    const [valueSingle, setValueSingle] = useState('');
+const StoryNative = (args: StorySelectProps) => {
+    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
+
+    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
 
     return (
-        <div style={{ width: '300px' }}>
+        <div style={{ width: '50%' }}>
             <Select
-                {...args}
-                items={[]}
-                value={valueSingle}
-                onChange={setValueSingle}
-                notFoundContent={
-                    <SelectNotFoundContent
-                        icon={<IconPlaceholder size="s" />}
-                        description="Description"
-                        buttonText="Label"
-                    />
-                }
-                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-            />
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="native"
+                value={value}
+                placement={placement}
+                label={label}
+                size={size}
+                view={view}
+                target={target}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                {getSelectItems('item', 6).map((item) => (
+                    <option key={item.value} value={item.value}>
+                        {item.child}
+                    </option>
+                ))}
+            </Select>
         </div>
     );
 };
 
-export const EmptyList: StoryObj<StorySelectProps> = {
-    render: (args) => <EmptyListStory {...args} />,
+export const Native: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryNative {...args} />,
 };
 
-const CommonStory = (args: StorySelectProps) => {
-    const [value, setValue] = useState('');
-    const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
+const StoryControlledOpen = (args: StorySelectProps) => {
+    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
 
-    const { enableContentLeft } = args;
-
-    return (
-        <div className="container">
-            <table>
-                <thead>
-                    <tr>
-                        <th>View &#8595;</th>
-                        <th>Single Button</th>
-                        <th>Multiple Button</th>
-                        <th>Single Textfield</th>
-                        <th>Multiple Textfield</th>
-                    </tr>
-                </thead>
+    const [opened, setOpened] = useState(true);
+    const [iconColor, setIconColor] = useState('green');
+    const [value, setV] = useState<string | number | boolean | undefined>('item_0');
 
-                <tbody>
-                    <tr>
-                        <td>Default</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="default"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="default"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="default"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="default"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Accent</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="accent"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="accent"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                    <tr>
-                        <td>Secondary</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="secondary"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="secondary"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                    <tr>
-                        <td>Clear</td>
+    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
+        setV(newValue);
+        onChangeAction(newValue);
+    };
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+    const onOpen = () => setOpened((v) => !v);
+    const onMouseEnter = () => setIconColor('red');
+    const onMouseLeave = () => setIconColor('green');
 
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="clear"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="clear"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                    <tr>
-                        <td>Positive</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="positive"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="positive"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="positive"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="positive"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Warning</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="warning"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="warning"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="warning"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="warning"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Negative</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="negative"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="negative"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="negative"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="negative"
-                                    target="textfield"
-                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Dark</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="dark"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="dark"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                    <tr>
-                        <td>Black</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="black"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="black"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                    <tr>
-                        <td>White</td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect={false}
-                                    items={items}
-                                    value={value}
-                                    onChange={setValue}
-                                    view="white"
-                                />
-                            </div>
-                        </td>
-                        <td>
-                            <div style={{ width: '200px' }}>
-                                <Select
-                                    {...args}
-                                    multiselect
-                                    items={items}
-                                    value={valueMultiple}
-                                    onChange={setValueMultiple}
-                                    view="white"
-                                />
-                            </div>
-                        </td>
-                        <td />
-                        <td />
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+    return (
+        <>
+            <Button onClick={onOpen}>Open select</Button>
+            <div style={{ width: '50%' }}>
+                <Select
+                    frame="theme-root"
+                    usePortal={usePortal}
+                    value={value}
+                    opened={opened}
+                    onToggle={onToggle}
+                    placement={placement}
+                    label={label}
+                    size={size}
+                    view={view}
+                    target={target}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    onChangeValue={onChangeValue}
+                >
+                    {getSelectItems('item', 6).map((item) => (
+                        <SelectItem
+                            key={item.value}
+                            contentLeft={
+                                item.value === value ? (
+                                    <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                                ) : undefined
+                            }
+                            value={item.value}
+                            text={item.child}
+                        />
+                    ))}
+                    <SelectDivider />
+                    <SelectItem value="custom">
+                        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+                            <IconClose color={iconColor} />
+                        </div>
+                        <div>Custom item element</div>
+                    </SelectItem>
+                </Select>
+            </div>
+        </>
     );
 };
 
-export const Common: StoryObj<StorySelectProps> = {
-    parameters: {
-        controls: {
-            include: [
-                'size',
-                'enableContentLeft',
-                'chipView',
-                'label',
-                'labelPlacement',
-                'placeholder',
-                'helperText',
-                'isTargetAmount',
-                'variant',
-                'disabled',
-            ],
-        },
-    },
-    argTypes: {
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        size: 'm',
-    },
-    render: (args) => <CommonStory {...args} />,
+export const ControlledOpen: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryControlledOpen {...args} />,
 };