@salutejs/plasma-new-hope 0.78.0-canary.1201.8983771283.0 → 0.78.0-canary.1201.8986419693.0

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,292 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import type { DropdownPlacement, DropdownTrigger } from '../../../../components/Dropdown/Dropdown.types';
+
+import { Dropdown } from './Dropdown';
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown>;
+
+const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<DropdownTrigger> = ['click', 'hover'];
+const size = ['xs', 's', 'm', 'l'];
+const variant = ['normal', 'tight'];
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_web/Dropdown',
+    decorators: [WithTheme],
+    component: Dropdown,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        trigger: 'click',
+        offset: [0, 0],
+        listWidth: 'auto',
+        hasArrow: true,
+        closeOnOverlayClick: true,
+        closeOnSelect: true,
+        size: 'm',
+        variant: 'normal',
+    },
+};
+
+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: 'Африка',
+        disabled: true,
+    },
+];
+
+const StoryNormal = (args: StoryDropdownProps) => {
+    return (
+        <Dropdown
+            {...args}
+            items={items}
+            onToggle={action('onToggle')}
+            onHover={action('onHover')}
+            onItemSelect={action('onItemSelect')}
+            onItemClick={action('onItemClick')}
+        >
+            <Button text="Список стран" />
+        </Dropdown>
+    );
+};
+
+export const Default: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
+};

package/styled-components/es/components/Dropdown/Dropdown.js

@@ -122,7 +122,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
       isFocusTrapped: false,
       target: childrenWithProps(children, {
         role: 'combobox',
-        'aria-controls': 'listbox1',
+        'aria-controls': 'tree_level_1',
         'aria-expanded': isCurrentListOpen,
         'aria-activedescendant': getActiveDescendant(),
         onKeyDown: onKeyDown
@@ -132,7 +132,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
       listHeight: listHeight,
       listOverflow: listOverflow,
       role: "tree",
-      id: "listbox1",
+      id: "tree_level_1",
       listWidth: listWidth
     }, items.map(function (item, index) {
       return /*#__PURE__*/React.createElement(DropdownInner, {

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

@@ -0,0 +1,339 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Dropdown
+Выпадающий многоуровневый список.
+
+<StorybookLink name="Dropdown" />
+
+<Description name="Dropdown" />
+<PropsTable name="Dropdown" />
+
+## Использование
+Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
+
+```tsx
+type Items = Array<{
+        /**
+         *  Значение у item
+         */
+        value: string | number;
+        /**
+         * Метка-подпись к item
+         */
+        label: string;
+        /**
+         * Список дочерних items.
+         */
+        items?: Items;
+        /**
+         * Item не активен
+         */
+        disabled?: boolean;
+        /**
+         * Слот для контента слева
+         */
+        contentLeft?: ReactNode;
+        /**
+         * Слот для контента справа
+         */
+        contentRight?: ReactNode;
+        /**
+         * Выбранный item.
+         * @deprecated использовать ContentLeft || ContentRight
+         */
+        isActive?: boolean;
+        /**
+         * Кастомный цвет текста
+         * @deprecated
+         */
+        color?: string;
+        /**
+         * Айтем не активен
+         * @deprecated использовать disabled
+         */
+        isDisabled?: boolean;
+    }>;
+```
+
+## Примеры
+
+<Tabs>
+    <TabItem value="default" label="Default" default>
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            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: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+
+            return (
+                <div style={{ height:"300px" }}>
+                    <Dropdown
+                        items={items}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="size" label="Size">
+        Размер `Dropdown` задается с помощью свойства `size`.<br />
+        Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            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: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                    <Dropdown
+                        items={items}
+                        size="l"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="m" // default
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="s"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="xs"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="placement" label="Placement">
+        Параметр `placement` принимает либо строку: `"top"`,  `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
+        Default value для placement - `"bottom"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            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: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                    <Dropdown
+                        items={items}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement="right"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement="left"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement={['top', 'bottom']}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="trigger" label="Trigger">
+        Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
+        Default value - `"click"`.<br />
+        Для примера показано значение `"hover"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            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: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+
+            return (
+                <div style={{ height:"300px" }}>
+                    <Dropdown
+                        items={items}
+                        trigger="hover"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+</Tabs>
+
+## Клавиатурная навигация
+
+Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+
+- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
+- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
+- `End` - открывает дропдаун и перемещает фокус на последний элемент;
+- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
+- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
+- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше. Если фокус на первом элементе - то в конец списка;
+- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже. Если фокус на последнем элементе - то в начало списка;
+- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
+- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;

package/styled-components/es/components/Dropdown/hooks/useHashMaps.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-// Данный хук рекурсивно проходится по дереву items и создаем 2 мапы: мапу путей и мапу фокусов.
-// Нужно для получения информации всей об item, зная только путь до нее.
+// Данный хук рекурсивно проходится по дереву items и создает 2 мапы: мапу путей и мапу фокусов.
+// Нужно для получения всей информации об item, зная только путь до него.
 
 export var useHashMaps = function useHashMaps(items) {
   return useMemo(function () {