@salutejs/plasma-new-hope 0.141.0-canary.1421.10719019658.0 → 0.141.0-canary.1422.10737462879.0

package/styled-components/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx

@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { mergeConfig } from '../../../../../engines';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import { comboboxOldConfig } from '../../../../../components/Combobox';
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { IconDone } from '../../../../../components/_Icon';
+
+import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
+import { config } from './Combobox.config';
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
+
+type ComboboxPrimitiveValue = string | number | boolean;
+
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_web/Combobox',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        enumerationType: {
+            options: enumerations,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(comboboxOldConfig, config)),
+    },
+    args: {
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        placeholder: 'Placeholder',
+        enumerationType: 'comma',
+        size: 'm',
+        view: 'default',
+        placement: 'bottom',
+    },
+};
+
+export default meta;
+
+const onChangeAction = action('onChange');
+
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
+};
+
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
+};
+
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const SingleDemo = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%', margin: '3rem 0' }}>
+            <h4>Combobox с единичным выбором</h4>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+const MultipleDemo = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
+
+    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
+
+    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%', marginBottom: '3rem' }}>
+            <h4>Combobox с множественным выбором</h4>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                enumerationType={enumerationType}
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+const AddCustomItemDemo = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [opened, setOpened] = useState(false);
+    const [items, setItems] = useState(getSelectItems('item', 1));
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { code } = event;
+
+        if (code === 'Enter') {
+            const newValue = (event.target as HTMLInputElement).value;
+            const newItems = [...items];
+
+            if (newItems.find((item) => item.child === newValue)) {
+                return;
+            }
+
+            newItems.push({
+                value: `${newValue}_`,
+                child: (newValue || '').toString(),
+            });
+
+            setOpened(false);
+            setItems(newItems);
+        }
+    };
+
+    const filterFunction = () => true;
+
+    return (
+        <div style={{ width: '50%' }}>
+            <h4>Combobox с добавлением пользовательского элемента</h4>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                opened={opened}
+                onToggle={onToggle}
+                onChangeValue={onChangeValue}
+                onKeyDown={onKeyDown}
+                filterFunction={filterFunction}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxDivider />
+                {items.map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Legacy: StoryObj<StorySelectProps> = {
+    render: (args) => (
+        <>
+            <h3>Combobox на композиционной архитектуре (deprecated)</h3>
+            <SingleDemo {...args} />
+            <MultipleDemo {...args} />
+            <AddCustomItemDemo {...args} />
+        </>
+    ),
+};

package/styled-components/es/components/Combobox/Combobox.template-doc.mdx

@@ -0,0 +1,344 @@
+---
+id: combobox
+title: Combobox
+---
+
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Combobox
+
+<Description name="Combobox" />
+<PropsTable name="Combobox" />
+
+## Использование
+Обязательным параметром является только `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
+
+```tsx
+type Items = Array<{
+        /**
+         *  Значение у item
+         */
+        value: string;
+        /**
+         * Метка-подпись к item
+         */
+        label: string;
+        /**
+         * Список дочерних items.
+         */
+        items?: Array<ItemOption>;
+        /**
+         * Item не активен
+         */
+        disabled?: boolean;
+        /**
+         * Слот для контента слева
+         */
+        contentLeft?: ReactNode;
+        /**
+         * Слот для контента справа
+         */
+        contentRight?: ReactNode;
+    }>;
+```
+
+Тип выбора комбобокса - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
+
+
+## Примеры
+
+<Tabs>
+    <TabItem value="single" label="Single" default>
+        ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [value, setValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            items={items}
+                            value={value}
+                            onChange={setValue}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="multiple" label="Multiple">
+        ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [value, setValue] = useState([]);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            multiple
+                            items={items}
+                            value={value}
+                            onChange={setValue}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="predefined" label="Predefined">
+        Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
+
+        ```tsx live
+        import React from 'react';
+        import { Combobox, Button } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            multiple
+                            items={items}
+                            value={multipleValue}
+                            onChange={setMultipleValue}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+
+                    <Button onClick={() => setMultipleValue([])}>Очистить</Button>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="portal" label="Portal">
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
+        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+
+        ```tsx live
+        import React, { useRef } from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [value, setValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            const ref = useRef(null)
+
+            return (
+                <div style=\{{ height: '300px' }} ref={ref}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            items={items}
+                            value={value}
+                            onChange={setValue}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                            portal={ref}
+                            listWidth="300px"
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="uncontrolled" label="Uncontrolled">
+        `value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
+
+       ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            items={items}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="alwaysOpened" label="Always opened">
+        Свойство alwaysOpened позволяет отображать Combobox всегда открытым. При этом closeAfterSelect игнорируется.
+
+       ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Combobox
+                            items={items}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                            alwaysOpened
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+</Tabs>
+
+## Клавиатурная навигация
+
+Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js

@@ -1,4 +1,4 @@
-var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "filter", "closeAfterSelect"];
+var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -58,6 +58,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$alwaysOpened = props.alwaysOpened,
+      alwaysOpened = _props$alwaysOpened === void 0 ? false : _props$alwaysOpened,
       filter = props.filter,
       outerCloseAfterSelect = props.closeAfterSelect,
       rest = _objectWithoutProperties(props, _excluded);
@@ -107,7 +109,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       checked = _useState6[0],
       setChecked = _useState6[1];
-    var isCurrentListOpen = Boolean(path[0]);
+    var isCurrentListOpen = alwaysOpened || Boolean(path[0]);
     var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
     var withArrowInverse = isCurrentListOpen ? classes.arrowInverse : undefined;
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !multiple;
@@ -217,7 +219,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
           newValues.push(item.value);
         }
       });
-      if (closeAfterSelect) {
+      if (!alwaysOpened && closeAfterSelect) {
         dispatchPath({
           type: 'reset'
         });
@@ -262,7 +264,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         updateSingleAncestors(item, checkedCopy, 'dot');
       }
       setTextValue(isCurrentChecked ? '' : item.label);
-      if (closeAfterSelect) {
+      if (!alwaysOpened && closeAfterSelect) {
         dispatchPath({
           type: 'reset'
         });