@salutejs/plasma-new-hope 0.142.2-canary.1431.10830104806.0 → 0.143.0-canary.1422.10814333858.0

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js

@@ -14,10 +14,10 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),

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

@@ -4,7 +4,6 @@ import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { IconChevronLeft } from '../../../../components/_Icon';
 
 import { TextField } from './TextField';
 
@@ -186,7 +185,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? <IconChevronLeft color="inherit" size={iconSize} /> : undefined}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             view={view}
             onChange={(e) => {

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

@@ -0,0 +1,347 @@
+---
+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, { useState } from 'react';
+        import { Combobox, Button } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [alwaysOpened, setAlwaysOpened] = useState(false);
+
+            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" }}>
+                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style={{ marginBottom: '1rem' }} />
+                        <Combobox
+                            items={items}
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                            alwaysOpened={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'
         });
@@ -422,7 +424,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
         path: path,
         dispatchPath: dispatchPath,
         index: index,
-        listWidth: listWidth
+        listWidth: listWidth,
+        disabled: disabled
       });
     })))))));
   });

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

@@ -10,8 +10,12 @@ export var Inner = function Inner(_ref) {
     path = _ref.path,
     dispatchPath = _ref.dispatchPath,
     index = _ref.index,
-    listWidth = _ref.listWidth;
+    listWidth = _ref.listWidth,
+    commonDisabled = _ref.disabled;
   var handleToggle = function handleToggle(opened) {
+    if (commonDisabled) {
+      return;
+    }
     if (opened) {
       dispatchPath({
         type: 'changed_on_level',
@@ -44,7 +48,8 @@ export var Inner = function Inner(_ref) {
         ariaControls: listId,
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
-        ariaLabel: item.label
+        ariaLabel: item.label,
+        disabled: commonDisabled
       })
     }, /*#__PURE__*/React.createElement(Ul, {
       role: "group",
@@ -59,7 +64,8 @@ export var Inner = function Inner(_ref) {
         path: path,
         dispatchPath: dispatchPath,
         index: innerIndex,
-        listWidth: listWidth
+        listWidth: listWidth,
+        disabled: commonDisabled
       });
     })));
   }
@@ -68,6 +74,7 @@ export var Inner = function Inner(_ref) {
     path: path,
     index: index,
     currentLevel: currentLevel,
-    ariaLevel: nextLevel
+    ariaLevel: nextLevel,
+    disabled: commonDisabled
   });
 };

package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js

@@ -12,6 +12,7 @@ export var Item = function Item(_ref) {
     path = _ref.path,
     currentLevel = _ref.currentLevel,
     index = _ref.index,
+    outerDisabled = _ref.disabled,
     ariaControls = _ref.ariaControls,
     ariaExpanded = _ref.ariaExpanded,
     ariaLevel = _ref.ariaLevel,
@@ -21,6 +22,7 @@ export var Item = function Item(_ref) {
     disabled = item.disabled,
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
+  var commonDisabled = outerDisabled || disabled;
   var ref = useRef(null);
   var _useContext = useContext(Context),
     focusedPath = _useContext.focusedPath,
@@ -33,7 +35,7 @@ export var Item = function Item(_ref) {
     renderItem = _useContext.renderItem,
     valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
-  var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
+  var disabledClassName = commonDisabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
   useDidMountEffect(function () {
@@ -46,12 +48,12 @@ export var Item = function Item(_ref) {
     }
   }, [focusedClass]);
   var handleChange = function handleChange(e) {
-    if (disabled) return;
+    if (commonDisabled) return;
     e.stopPropagation();
     handleCheckboxChange(item);
   };
   var handleClick = function handleClick(e) {
-    if (disabled) {
+    if (commonDisabled) {
       e.stopPropagation();
       return;
     }

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

@@ -1,4 +1,4 @@
-var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "placement", "onToggle", "onKeyDown", "filterFunction"];
+var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "alwaysOpened", "placement", "onToggle", "onKeyDown", "filterFunction"];
 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."); }
@@ -43,6 +43,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
       enumerationType = _ref$enumerationType === void 0 ? 'comma' : _ref$enumerationType,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      _ref$alwaysOpened = _ref.alwaysOpened,
+      alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
       onToggle = _ref.onToggle,
@@ -73,7 +75,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       itemsRefs: itemsRefs,
       inputRef: inputRef
     };
-    var _useState3 = useState(opened),
+    var _useState3 = useState(alwaysOpened || opened),
       _useState4 = _slicedToArray(_useState3, 2),
       isVisible = _useState4[0],
       setIsVisible = _useState4[1];
@@ -99,11 +101,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
       if (disabled || readOnly) {
         return;
       }
-      setIsVisible(opened);
-    }, [opened, disabled, readOnly]);
+      setIsVisible(alwaysOpened || opened);
+    }, [opened, alwaysOpened, disabled, readOnly]);
     useEffect(function () {
       // INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
-      if (opened) {
+      if (alwaysOpened || opened) {
         setFilterValue('');
       }
     }, []);
@@ -117,10 +119,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
         setFilterValue('');
       }
       if (onToggle) {
-        onToggle(openValue, event);
+        onToggle(alwaysOpened || openValue, event);
         return;
       }
-      setIsVisible(openValue);
+      setIsVisible(alwaysOpened || openValue);
     };
     var closedWithoutChanges = useRef(true);
     var updateValue = function updateValue(item, event) {
@@ -134,7 +136,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       }
       var newSelected = getNewSelected(rest.value, newValue, 'single');
       (_rest$onChangeValue2 = rest.onChangeValue) === null || _rest$onChangeValue2 === void 0 || _rest$onChangeValue2.call(rest, newSelected);
-      onInnerToggle === null || onInnerToggle === void 0 || onInnerToggle(false, event);
+      onInnerToggle === null || onInnerToggle === void 0 || onInnerToggle(alwaysOpened || false, event);
       closedWithoutChanges.current = false;
     };
     var onClickChildrenItem = function onClickChildrenItem(event) {
@@ -178,6 +180,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
       onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
       onKeyDownTarget(event);
     };
+    useEffect(function () {
+      if (alwaysOpened && rest.valueType === 'single') {
+        setSearch(String(value));
+      }
+    }, [value, alwaysOpened]);
     return /*#__PURE__*/React.createElement(StyledRoot, {
       ref: comboboxRef
     }, /*#__PURE__*/React.createElement(StyledNativeSelect, {

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

@@ -21,7 +21,7 @@ export var gridRoot = function gridRoot(Root) {
       style = props.style,
       maxWidth = props.maxWidth,
       rest = _objectWithoutProperties(props, _excluded);
-    var viewClass = getGridViewClass(view || 'default');
+    var viewClass = getGridViewClass(view || 'deafult');
     var maxWidthValue = view === 'legacy' ? '90rem' : null;
     var maxWidthToken = maxWidthValue || maxWidth ? {
       '--plasma_private-grid-max-width': maxWidth || maxWidthValue

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

@@ -183,7 +183,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     }, required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.outerLabelPlacement, requiredPlacementClass)
     }), innerLabelValue, optionalTextNode), /*#__PURE__*/React.createElement(InputWrapper
-    // Ref для внутреннего использования. Не отдается наружу.
+    // Рефка для внутреннего использования. Не отдается наружу.
     , {
       ref: rest.inputWrapperRef,
       className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)