@salutejs/plasma-new-hope 0.242.0-canary.1702.12829190112.0 → 0.242.0-canary.1709.12829247465.0

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -104,8 +104,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
-      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
@@ -158,14 +156,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
-    var _useState15 = (0, _react.useState)(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = (0, _react.useState)(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
     var setFirstInputValue = function setFirstInputValue(value) {
       setInputFirstValue(value);
       if (onChange) {
@@ -226,12 +216,12 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleCommitSecondDate = _useDatePicker2.handleCommitDate;
-    var handleToggle = function handleToggle(currentOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== _useKeyboardNavigation.keys.Escape ? true : currentOpened;
+      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null)) && event.code !== _useKeyboardNavigation.keys.Escape ? true : opened;
       if (!isCalendarOpen) {
         if (calendarFirstValue && !calendarSecondValue) {
           var _secondInputRef$curre2;
@@ -242,22 +232,11 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
       }
-      if (!isCalendarOpen) {
-        setSecondTextFieldClicked(false);
-      }
       if (onToggle) {
         return onToggle(isCalendarOpen, event);
       }
       setIsInnerOpen(isCalendarOpen);
     };
-    var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
-      onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
-      setSecondTextFieldClicked(false);
-    };
-    var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
-      onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
-      setSecondTextFieldClicked(true);
-    };
     var handleBlur = function handleBlur(event, outerHandler) {
       if (!inputFirstValue || !inputSecondValue) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
@@ -297,37 +276,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
-      if (!fullDateEntered) {
-        handleCommitFirstDate(chosenDate, false, true, dateInfo);
-        handleCommitSecondDate('');
-        return;
-      }
-      var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
-      var _getSortedValues3 = (0, _utils2.getSortedValues)([prevValue, chosenDate]),
-        _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
-        first = _getSortedValues4[0],
-        second = _getSortedValues4[1];
-      handleCommitFirstDate(first, false, true, dateInfo);
-      handleCommitSecondDate(second, false, true, dateInfo);
-      if (!firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
-      if (firstDate) {
-        handleCommitFirstDate(firstDate, false, true, dateInfo);
-      }
-      if (secondDate) {
-        handleCommitSecondDate(secondDate, false, true, dateInfo);
-      }
-      if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
     var RangeComponent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeDate.StyledRange, {
       ref: rangeRef,
       autoComplete: autoComplete,
@@ -373,8 +321,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
         }
       },
-      onFocusFirstTextfield: handleFocusFirstTextField,
-      onFocusSecondTextfield: handleFocusSecondTextField,
+      onFocusFirstTextfield: onFocusFirstTextfield,
+      onFocusSecondTextfield: onFocusSecondTextfield,
       onBlurFirstTextfield: function onBlurFirstTextfield(event) {
         return handleBlur(event, _onBlurFirstTextfield);
       },
@@ -423,13 +371,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         lang: lang
       }));
     }, [format, lang]);
-    (0, _react.useEffect)(function () {
-      if (calendarFirstValue && calendarSecondValue) {
-        setFullDateEntered(true);
-      }
-    }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = (0, _react.useCallback)(function (_ref4) {
-      var children = _ref4.children;
+    var RootWrapper = (0, _react.useCallback)(function (_ref2) {
+      var children = _ref2.children;
       return /*#__PURE__*/_react["default"].createElement(Root, {
         view: view,
         size: size,
@@ -471,8 +414,20 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
-      onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
+        handleCommitSecondDate('');
+      },
+      onChangeValue: function onChangeValue(_ref3, dateInfo) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          firstDate = _ref4[0],
+          secondDate = _ref4[1];
+        firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
+        secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
+        if (firstDate && secondDate && !firstValueError && !secondValueError) {
+          setIsInnerOpen(false);
+        }
+      }
     }), leftHelper && /*#__PURE__*/_react["default"].createElement(_RangeDate.LeftHelper, null, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({
       name: name,
       type: "hidden",

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

@@ -29,6 +29,10 @@ type Items = Array<{
          * Метка-подпись к item
          */
         label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        */
+        placement: DropdownPlacement;
         /**
          * Список дочерних items.
          */

package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -9,6 +9,7 @@ var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _DropdownItem = /*#__PURE__*/require("../DropdownItem/DropdownItem");
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.styles");
 var _FloatingPopover = /*#__PURE__*/require("../../FloatingPopover");
+var _utils = /*#__PURE__*/require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
   var item = _ref.item,
@@ -40,7 +41,7 @@ var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
     return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
-      placement: "right-start",
+      placement: (0, _utils.getPlacement)((item === null || item === void 0 ? void 0 : item.placement) || 'right'),
       opened: isCurrentListOpen,
       onToggle: handleToggle,
       trigger: trigger,

package/styled-components/cjs/components/Select/Select.template-doc.mdx

@@ -0,0 +1,441 @@
+---
+id: select
+title: Select
+---
+
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Select
+
+<Description name="Select" />
+<PropsTable name="Select" />
+
+## Использование
+Обязательным параметром являются: `items`, `value` и `onChange`. Внутри items может быть такой же вложенный массив items. Формат следующий:
+
+```tsx
+type Items = Array<{
+        /**
+         *  Значение у item
+         */
+        value: string;
+        /**
+         * Метка-подпись к item
+         */
+        label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        */
+        placement: SelectPlacement | Array<SelectPlacementBasic>;
+        /**
+         * Список дочерних items.
+         */
+        items?: Array<ItemOption>;
+        /**
+         * Item не активен
+         */
+        disabled?: boolean;
+        /**
+         * Слот для контента слева
+         */
+        contentLeft?: ReactNode;
+        /**
+         * Слот для контента справа
+         */
+        contentRight?: ReactNode;
+        /**
+         * Выбранный item.
+         * @deprecated
+         */
+        isActive?: boolean;
+        /**
+         * Кастомный цвет текста
+         * @deprecated
+         */
+        color?: string;
+        /**
+         * Айтем не активен
+         * @deprecated использовать disabled
+         */
+        isDisabled?: boolean;
+    }>;
+```
+
+Тип выбора селекта - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.
+Select может выглядеть как Button и как Textfield. За это отвечает пропс - `target`.\
+Есть возможность прокидывать компонент `EmptyState` в пропс `renderList` для изменения содержимого выпадающего окна.\
+Это нужно в случаях, когда произошла ошибка при загрузке `items`, либо когда `items` пустой. Более подробно в примерах.
+
+## Примеры
+
+<Tabs>
+    <TabItem value="textfield" label="Textfield" default>
+        В режиме `textfield` доступны только следующие варианты `view`: `default`, `warning`, `positive` и `negative`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+            const [multipleValue, setMultipleValue] = 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'}}>
+                        <Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
+                    </div>
+
+                    <div style=\{{width: '300px'}}>
+                        <Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="button" label="Button">
+        В режиме `button` недоступны следующие пропсы: `contentLeft`, `label`, `labelPlacement`, `placeholder` и `helperText`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+            const [multipleValue, setMultipleValue] = 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'}}>
+                        <Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
+                    </div>
+
+                    <div style=\{{width: '300px'}}>
+                        <Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="predefined" label="Predefined">
+        Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
+
+        ```tsx live
+        import React from 'react';
+        import { Select, 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'}}>
+                        <Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
+                    </div>
+
+                    <Button onClick={() => setMultipleValue([])}>Очистить</Button>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="renderValue" label="Render value">
+        Пропс `renderValue` для кастомной настройки `value` внутри таргета. Принимает коллбэк с двумя параметрами: `value` и `label`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            const renderValue = (itemData): string => {
+                if (!Array.isArray(itemData)) {
+                    return `${itemData.value} - ${itemData.label}`;
+                }
+
+                return '';
+            };
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            label="Label"
+                            placeholder="Placeholder"
+                            value={singleValue}
+                            onChange={setSingleValue}
+                            renderValue={renderValue}
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="renderItem" label="Render item">
+        `renderTarget` - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром: `value`.
+        Пропс `renderItem` для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами: `value` и `label`.
+        В примере использован другой наш компонент - Cell.
+
+        ```tsx live
+        import React from 'react';
+        import { Select, Cell } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [multipleValue, setMultipleValue] = useState([]);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                },
+            ];
+
+            const renderTarget = (itemData) => {
+                if (Array.isArray(itemData)) {
+                    if (itemData.length === 0) {
+                        return (
+                            <div style=\{{ padding: '0.5rem 0' }}>
+                                <Cell
+                                    view="default"
+                                    title="Выберите страну"
+                                    subtitle="Subtitle"
+                                    label="Label"
+                                />
+                            </div>
+                        );
+                    }
+
+                    const title = itemData.map((item) => item.label).join(', ');
+
+                    return (
+                        <div style=\{{ padding: '0.5rem 0.75rem' }}>
+                            <Cell view="default" title={title} subtitle="Subtitle" label="Label" />
+                        </div>
+                    );
+                }
+            }
+
+            const renderItem = ({ value, label }) => (
+                <Cell
+                    view="default"
+                    title={label}
+                    label="Top left"
+                    contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
+                />
+            )
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                   <div style=\{{ width: '400px' }}>
+                        <Select
+                            items={items}
+                            value={multipleValue}
+                            onChange={setMultipleValue}
+                            multiselect
+                            renderTarget={renderTarget}
+                            renderItem={renderItem}
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="portal" label="Portal">
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
+        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+
+        ```tsx live
+        import React, { useRef } from 'react';
+        import { Select } 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=\{{ position: "relative", height: "300px" }} ref={ref}>
+                    <div style=\{{width: '300px'}}>
+                        <Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="uncontrolled" label="Uncontrolled">
+        `value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
+
+       ```tsx live
+        import React from 'react';
+        import { Select } 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'}}>
+                        <Select items={items} label="Label" placeholder="Placeholder" />
+                    </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/).
+
+- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
+- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
+- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
+- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
+- `End` - открывает дропдаун и перемещает фокус на последний элемент;
+- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
+- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
+- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
+- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
+- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
+- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
+- `Backspace` - только если фокус на чипе - снимает выбор с текущего значения;
+

package/styled-components/cjs/components/Select/ui/Inner/Inner.js

@@ -39,7 +39,7 @@ var Inner = exports.Inner = function Inner(_ref) {
   if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
     var _item$items;
     return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
-      placement: "right",
+      placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
       opened: isCurrentListOpen,
       onToggle: handleToggle,
       offset: 2,