@salutejs/plasma-new-hope 0.66.0-canary.1107.8441154681.0 → 0.66.1-canary.1128.8446493855.0

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

@@ -0,0 +1,90 @@
+---
+id: chip
+title: Chip
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Chip
+Chips могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
+
+## Chip
+<Description name="Chip" />
+<PropsTable name="Chip" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Chip` может содержать текст, который указывается в
+свойстве `text`, или любой контент напрямую через `children`.
+
+Свойство `text` можно использовать вместе со свойствами `contentLeft` и `contentRight`.
+С их помощью можно размещать **иконку** слева или справа от текста.
+
+Так же есть свойство `contentClearButton`, которое позволяет прокинуть custom **иконку**.
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Текст" />
+
+            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip text="Текст" />
+
+            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip>
+                Текст
+            </Chip>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер Chip
+Размер Chip задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Chip" size="l" />
+            <Chip text="Chip" size="m" />
+            <Chip text="Chip" size="s" />
+            <Chip text="Chip" size="xs" />
+        </div>
+    );
+}
+```
+
+### Вид Chip
+Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – основная;
++ `"secondary"` – вторичная;
++ `"positive"` – успешное завершение;
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Chip" size="m" view="default" />
+            <Chip text="Chip" size="m" view="secondary" />
+            <Chip text="Chip" size="m" view="positive" />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,237 @@
+---
+id: combobox
+title: Combobox
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Combobox
+Компонент, отвечающий за выпадающий список с возможностью фильтрации элементов и их выбора.
+Доступен в двух режимах: единичный и множественный выбор.
+
+## Combobox
+<Description name="Combobox" />
+<PropsTable name="Combobox" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Combobox` должен содержать компоненты из следующего списка: `ComboboxDivider`, `ComboboxFooter`, `ComboboxGroup`, `ComboboxHeader`, `ComboboxItem`.
+Для управления режимом, необходимо установить свойство `valueType = 'single'` для единичного выбора и `valueType='multiple'` для множественного. 
+Так же для выбора отображения множественного режима свойство `enumerationType = 'comma'` для перечисления выбранных значений через запятую,
+и `enumerationType = 'chip'` для перечисления выбранных значений с помощью компонента `Chip`.
+
+## Клавиатурная навигация
+
+Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
+-  `Tab` - переход на таргет (инпут)
+-  `Shift` + `tab` - выход с него (теряем фокус)
+-  `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
+-  `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
+-  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
+-  Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
+-  Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
+-  В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
+-  Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
+-  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)  
+-  Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
+-  Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
+-  Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
+-  Если удалили последний чип, то фокусируемся на таргете
+-  Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
+-  Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
+-  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
+-  Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
+
+### Single 
+
+```tsx live
+import React from 'react';
+import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    const [value, setValue] = React.useState(undefined);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <Combobox value={value} onChangeValue={handleOnChange} frame="document" usePortal placeholder="Placeholder">
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxItem
+                    value="item_0"
+                    text="item 0"
+                    contentLeft={"item_0" === value ? <IconDone size="s" color="inherit" /> : undefined}
+                />
+                <ComboboxItem
+                    value="item_1"
+                    text="item 1"
+                    contentLeft={"item_1" === value ? <IconDone size="s" color="inherit" /> : undefined}
+                />
+                <ComboboxItem
+                    value="extra_item_0"
+                    text="extra item 0"
+                    contentLeft={"extra_item_0" === value ? <IconDone size="s" color="inherit" /> : undefined}
+                />
+                <ComboboxItem
+                    value="extra_item_1"
+                    text="extra item 1"
+                    contentLeft={"extra_item_1" === value ? <IconDone size="s" color="inherit" /> : undefined}
+                />
+                <ComboboxItem
+                    value="extra_item_2"
+                    text="extra item 2"
+                    contentLeft={"extra_item_2" === value ? <IconDone size="s" color="inherit" /> : undefined}
+                />
+            </Combobox>
+        </div>
+    );
+}
+```
+
+### Multiple
+
+```tsx live
+import React from 'react';
+import { Combobox, ComboboxItem, Checkbox } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = React.useState(['item_0']);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <Combobox 
+                    value={value} 
+                    onChangeValue={handleOnChange} 
+                    frame="document" 
+                    usePortal 
+                    valueType="multiple"
+                    enumerationType="chip"
+                    label="Label">
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxItem
+                    value="item_0"
+                    text="item 0"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="item_1"
+                    text="item 1"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_0"
+                    text="extra item 0"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_1"
+                    text="extra item 1"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_2"
+                    text="extra item 2"
+                    contentLeft={Checkbox}
+                />
+            </Combobox>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер Combobox
+Размер `Combobox` задается с помощью свойства `size`.
+Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`, а также соответствующие размеры компонент `Checkbox` и `IconDone`:
+
+Для иконок верно такое соответствие размеров (`Icon = Combobox`): 
+- xs = xs,
+- s = s,
+- m = s,
+- l = s,
+
+Для `Checkbox` / `Radiobox` верно такое соответствие размеров (`Checkbox / Radiobox = Combobox`): 
+- xs = s,
+- s = m,
+- m = m,
+- l = m,
+
+```tsx live
+import React from 'react';
+import { Combobox } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{flexDirection: 'column'}}>
+            <Combobox usePortal frame="document" label="Label" size="xs" />
+            <Combobox usePortal frame="document" label="Label" size="s" />
+            <Combobox usePortal frame="document" label="Label" size="m" />
+            <Combobox usePortal frame="document" label="Label" size="l" />
+        </div>
+    );
+}
+```
+
+### Применение пользовательского фильтра 
+`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
+которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
+
+```tsx live
+import React from 'react';
+import { Combobox } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = React.useState(['item_0']);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    const customFilterFunction = React.useCallback((childText, filterValue) => {
+        return childText.startWith(filterValue);
+    }, []);
+
+    return (
+        <div style=\{{flexDirection: 'column'}}>
+             <Combobox 
+                    value={value} 
+                    onChangeValue={handleOnChange} 
+                    frame="document" 
+                    usePortal 
+                    valueType="multiple"
+                    label="Label">
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxItem
+                    value="item_0"
+                    text="item 0"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="item_1"
+                    text="item 1"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_0"
+                    text="extra item 0"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_1"
+                    text="extra item 1"
+                    contentLeft={Checkbox}
+                />
+                <ComboboxItem
+                    value="extra_item_2"
+                    text="extra item 2"
+                    contentLeft={Checkbox}
+                />
+            </Combobox>
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,76 @@
+---
+id: counter
+title: Counter
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Counter
+<Description name="Counter" />
+<PropsTable name="Counter"  exclude={['css']} />
+
+## Примеры
+
+### Максимальное значение числового бейджа
+Задается с помощью свойства `maxCount`.
+
+```tsx live 
+import React from 'react';
+import { Counter } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Counter count={10} maxCount={9} />
+            <Counter count={100} maxCount={99} />
+        </div>
+    );
+}
+```
+
+### Размер числового бейджа
+Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
+
+```tsx live 
+import React from 'react';
+import { Counter } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Counter count={10} size="xs" />
+            <Counter count={10} size="xxs" />
+        </div>
+    );
+}
+```
+
+### Вид числового бейджа
+Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
+
++ `"primary"` – основной бейдж;
++ `"accent"` – бейдж акцентного цвета;
++ `"positive"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"negative"` – ошибка;
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
+
+```tsx live 
+import React from 'react';
+import { Counter } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Counter count={10} view="primary" />
+            <Counter count={10} view="accent" />
+            <Counter count={10} view="positive" />
+            <Counter count={10} view="warning" />
+            <Counter count={10} view="negative" />
+            <Counter count={10} view="dark" />
+            <Counter count={10} view="light" />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,170 @@
+---
+id: drawer
+title: Drawer
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Drawer
+<Description name="Drawer" />
+<PropsTable name="Drawer" />
+
+### Использование
+
+Перед использованием убедитесь, что `PopupProvider` подключен.
+
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { PopupProvider } from '@salutejs/{{ package }}';
+
+import { App } from './App';
+
+ReactDOM.render(
+    <PopupProvider>
+        <App />
+    </PopupProvider>,
+    document.getElementById('root')
+);
+```
+
+### Отображения Drawer
+
+Drawer можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
+Само позиционирование можно указать с помощью свойства `placement`(left - по умолчанию, right, top, bottom),
+а также определить отступы от точки с помощью `offset`.
+ 
+У компонента Drawer есть 2 режима отображения: 
+модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус; 
+немодальный - нет подложки, скролл и фокус не заблокированы.
+
+```tsx live
+import React, { useRef } from 'react';
+import { IconDone } from '@salutejs/plasma-icons';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
+
+import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+
+    const ref = useRef();
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <div style=\{{height: "500px"}}>
+                    <div style=\{{ display: "flex", flexDirection: "column" }}>
+                        <Button 
+                            text="Открыть в document" 
+                            onClick={() => setIsOpenA(true)}
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }}
+                        />
+                        <Button 
+                            text="Открыть во Frame" 
+                            onClick={() => setIsOpenB(true)}
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }}
+                        />
+                    </div>
+                    <Drawer
+                        id="drawerA"
+                        isOpen={isOpenA} 
+                        onClose={() => setIsOpenA(false)}
+                        placement="right"
+                        withBlur={false}
+                        closeOnEsc={true}
+                        closeOnOverlayClick={true}
+                        asModal={true}
+                        width="25vw"
+                        height="100vh"
+                    >
+                            <DrawerHeader
+                                hasClose={true}
+                                closePlacement="right"
+                                actions={(
+                                    <Button size="s" view="clear" style=\{{
+                                        position: "relative",
+                                        width: "1.5rem",
+                                        height: "1.5rem"
+                                    }}>
+                                        <IconDone size="s" />
+                                    </Button>
+                                )}
+                                onClose={() => setIsOpenA(false)}
+                            >
+                                <H3>Header</H3>
+                            </DrawerHeader>
+
+                            <DrawerContent>Content</DrawerContent>
+                            
+                            <DrawerFooter>
+                                <H3>Footer</H3>
+                            </DrawerFooter>
+                        </Drawer>
+                    <div 
+                        ref={ref} 
+                        style=\{{
+                            marginTop: "1rem",
+                            width: "400px",
+                            height: "500px",
+                            background: surfaceSolidSecondary,
+                            position: "absolute",
+
+                            display: "flex",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: "1rem",
+
+                            bottom: 0,
+                            right: 0
+                        }}
+                    >
+                        <>Frame</>
+                    </div>
+                    
+                    <Drawer
+                        id="drawerB"
+                        isOpen={isOpenB} 
+                        onClose={() => setIsOpenB(false)}
+                        placement="right"
+                        asModal={false}
+                        frame={ref}
+                        width="250px"
+                        height="100%"
+                    >
+                            <DrawerHeader
+                                hasClose={true}
+                                closePlacement="right"
+                                actions={(
+                                    <Button size="s" view="clear" style=\{{
+                                        position: "relative",
+                                        width: "1.5rem",
+                                        height: "1.5rem"
+                                    }}>
+                                        <IconDone size="s" />
+                                    </Button>
+                                )}
+                                onClose={() => setIsOpenB(false)}
+                            >
+                                <H3>Header</H3>
+                            </DrawerHeader>
+
+                            <DrawerContent>Content</DrawerContent>
+                            
+                            <DrawerFooter>
+                                <H3>Footer</H3>
+                            </DrawerFooter>
+                        </Drawer>
+                </div>
+            </PopupProvider>
+        </SSRProvider>
+    );
+}
+```

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

@@ -0,0 +1,80 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Dropdown
+Набор компонентов для создания выпадающих списков. 
+
+<Description name="Dropdown" />
+<PropsTable name="Dropdown" exclude={['css']} />
+
+# DropdownItem
+
+<Description name="DropdownItem" />
+<PropsTable name="DropdownItem" exclude={['css']} />
+
+## Использование
+
+```tsx live
+import React, { useState } from 'react';
+import { Dropdown, DropdownItem } from '@salutejs/{{ package }}';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
+
+export function App() {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        setIsOpen(false);
+    };
+
+    const getDropdownItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+    return (
+        <div style=\{{height: "400px", background: surfaceSolidSecondary, padding: "1rem" }}>
+            <Dropdown
+                    target={<Button>Target</Button>}
+                    isOpen={isOpen}
+                    onToggle={() => {
+                        setIsOpen(!isOpen);
+                    }}
+                    offset={[10, 15]}
+                    view="primary"
+                    size="m"
+                    placement="right"
+                    trigger="click"
+                    closeOnOverlayClick={false}
+                    closeOnEsc
+                    isFocusTrapped
+                >
+                    {getDropdownItems('item', 6).map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={Boolean(item.value === selected)}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownItem
+                        isSelected={selected === 'disabled'}
+                        onSelect={() => handleSelect('disabled', 'disabled')}
+                        value="disabled"
+                        disabled
+                    >
+                        disabled
+                    </DropdownItem>
+                </Dropdown>
+            </div>
+    );
+}
+```