@salutejs/plasma-new-hope 0.336.0-canary.2214.17542835950.0 → 0.336.0-canary.2214.17665690388.0

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

@@ -119,7 +119,7 @@ import { Context } from "./Dropdown.context";
  * Выпадающий список.
  */ export var dropdownRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var items = _param.items, children = _param.children, placement = _param.placement, offset = _param.offset, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, onToggle = _param.onToggle, size = _param.size, view = _param.view, _param_itemRole = _param.itemRole, itemRole = _param_itemRole === void 0 ? 'treeitem' : _param_itemRole, className = _param.className, listMaxHeight = _param.listMaxHeight, listWidth = _param.listWidth, listHeight = _param.listHeight, listOverflow = _param.listOverflow, _param_closeOnSelect = _param.closeOnSelect, closeOnSelect = _param_closeOnSelect === void 0 ? true : _param_closeOnSelect, onHover = _param.onHover, onItemSelect = _param.onItemSelect, onItemClick = _param.onItemClick, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, _param_openByRightClick = _param.openByRightClick, openByRightClick = _param_openByRightClick === void 0 ? false : _param_openByRightClick, _param_variant = _param.variant, variant = _param_variant === void 0 ? 'normal' : _param_variant, _param_hasArrow = _param.hasArrow, hasArrow = _param_hasArrow === void 0 ? true : _param_hasArrow, _param_alwaysOpened = _param.alwaysOpened, alwaysOpened = _param_alwaysOpened === void 0 ? false : _param_alwaysOpened, portal = _param.portal, renderItem = _param.renderItem, zIndex = _param.zIndex, beforeList = _param.beforeList, afterList = _param.afterList, rest = _object_without_properties(_param, [
+        var items = _param.items, children = _param.children, placement = _param.placement, offset = _param.offset, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, onToggle = _param.onToggle, size = _param.size, view = _param.view, _param_itemRole = _param.itemRole, itemRole = _param_itemRole === void 0 ? 'treeitem' : _param_itemRole, className = _param.className, listMaxHeight = _param.listMaxHeight, listWidth = _param.listWidth, listHeight = _param.listHeight, _param_closeOnSelect = _param.closeOnSelect, closeOnSelect = _param_closeOnSelect === void 0 ? true : _param_closeOnSelect, onHover = _param.onHover, onItemSelect = _param.onItemSelect, onItemClick = _param.onItemClick, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, _param_openByRightClick = _param.openByRightClick, openByRightClick = _param_openByRightClick === void 0 ? false : _param_openByRightClick, _param_variant = _param.variant, variant = _param_variant === void 0 ? 'normal' : _param_variant, _param_hasArrow = _param.hasArrow, hasArrow = _param_hasArrow === void 0 ? true : _param_hasArrow, _param_alwaysOpened = _param.alwaysOpened, alwaysOpened = _param_alwaysOpened === void 0 ? false : _param_alwaysOpened, portal = _param.portal, renderItem = _param.renderItem, zIndex = _param.zIndex, beforeList = _param.beforeList, afterList = _param.afterList, rest = _object_without_properties(_param, [
             "items",
             "children",
             "placement",
@@ -133,7 +133,6 @@ import { Context } from "./Dropdown.context";
             "listMaxHeight",
             "listWidth",
             "listHeight",
-            "listOverflow",
             "closeOnSelect",
             "onHover",
             "onItemSelect",
@@ -159,6 +158,7 @@ import { Context } from "./Dropdown.context";
         var _useHashMaps = _sliced_to_array(useHashMaps(items), 2), pathMap = _useHashMaps[0], focusedToValueMap = _useHashMaps[1];
         var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
         var floatingPopoverRef = useRef(null);
+        var listWrapperRef = useRef(null);
         var treeId = safeUseId();
         // Логика работы при клике за пределами выпадающего списка
         var targetRef = useOutsideClick(function(event) {
@@ -252,17 +252,14 @@ import { Context } from "./Dropdown.context";
             className: cx(className, classes.dropdownRoot),
             ref: ref,
             view: view,
-            size: size,
-            style: {
-                display: 'inline-block'
-            }
+            size: size
         }, rest), /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
             ref: targetRef,
             id: "".concat(treeId, "_tree_level_1"),
             role: "tree",
-            listOverflow: listOverflow,
             listMaxHeight: listMaxHeight || listHeight
         }, beforeList, items.map(function(item, index) {
             return /*#__PURE__*/ React.createElement(DropdownInner, {
@@ -273,9 +270,8 @@ import { Context } from "./Dropdown.context";
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listOverflow: listOverflow,
-                listMaxHeight: listMaxHeight || listHeight,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }), afterList)))));
     });

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

@@ -4,7 +4,7 @@ import { getCorrectHeight } from "./utils";
 import { tokens, constants } from "./Dropdown.tokens";
 export var ListWrapper = styled.div.withConfig({
     displayName: "Dropdown.styles__ListWrapper",
-    componentId: "sc-eabc61b1-0"
+    componentId: "sc-768e302d-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -21,19 +21,15 @@ export var ListWrapper = styled.div.withConfig({
 }, tokens.padding, tokens.borderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.borderWidth, tokens.borderColor);
 export var Ul = styled.ul.withConfig({
     displayName: "Dropdown.styles__Ul",
-    componentId: "sc-eabc61b1-1"
+    componentId: "sc-768e302d-1"
 })([
     "max-height:",
-    ";overflow-y:",
-    ";border-radius:calc(var(",
+    ";overflow-x:hidden;overflow-y:auto;border-radius:calc(var(",
     ") - 0.125rem - var(",
     ",0rem));margin:0;padding:0;"
 ], function(param) {
     var listMaxHeight = param.listMaxHeight;
     return listMaxHeight ? getCorrectHeight(listMaxHeight) : 'auto';
-}, function(param) {
-    var listOverflow = param.listOverflow;
-    return listOverflow || 'visible';
 }, tokens.borderRadius, tokens.borderWidth);
 export var base = css([
     ""

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

@@ -11,13 +11,6 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _instanceof(left, right) {
-    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -57,7 +50,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { flip, shift, useFloating, FloatingPortal, offset as offsetMiddleware, autoPlacement, autoUpdate } from "@floating-ui/react";
+import { flip, shift, useFloating, FloatingPortal, offset as offsetMiddleware, autoPlacement, autoUpdate, useHover, useInteractions, safePolygon, useClick } from "@floating-ui/react";
 import React, { forwardRef } from "react";
 import { safeUseId } from "../../utils";
 // TODO: #2003
@@ -77,6 +70,7 @@ var FloatingPopover = /*#__PURE__*/ forwardRef(function(param, ref) {
         },
         placement: placement === 'auto' ? undefined : placement,
         open: opened,
+        onOpenChange: onToggle,
         middleware: [
             placement === 'auto' && autoPlacement(),
             offsetMiddleware({
@@ -88,40 +82,26 @@ var FloatingPopover = /*#__PURE__*/ forwardRef(function(param, ref) {
             }),
             shift()
         ]
-    }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles;
+    }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, context = _useFloating.context;
     var wrappedId = safeUseId();
-    var handleTargetClick = function(event) {
-        if (trigger === 'hover') {
-            return;
-        }
-        if (onToggle) {
-            onToggle(!opened, event);
-        }
-    };
-    var handleTargetMouseEnter = function(event) {
-        if (trigger === 'click' || opened) {
-            return;
-        }
-        onToggle(true, event);
-    };
-    var handleTargetMouseLeave = function(event) {
-        if (_instanceof(event.relatedTarget, HTMLElement) && _instanceof(refs.floating.current, HTMLElement)) {
-            var _refs_floating_current;
-            if (trigger === 'click' || !opened || event.relatedTarget && refs.floating && ((_refs_floating_current = refs.floating.current) === null || _refs_floating_current === void 0 ? void 0 : _refs_floating_current.contains(event.relatedTarget))) {
-                return;
-            }
-            onToggle(false, event);
-        }
-    };
-    var handleFloatingMouseLeave = function(event) {
-        if (_instanceof(event.relatedTarget, HTMLElement) && _instanceof(refs.reference.current, HTMLElement)) {
-            var _refs_reference_current;
-            if (trigger === 'click' || !opened || event.relatedTarget && refs.reference && ((_refs_reference_current = refs.reference.current) === null || _refs_reference_current === void 0 ? void 0 : _refs_reference_current.contains(event.relatedTarget))) {
-                return;
-            }
-            onToggle(false, event);
-        }
-    };
+    var hover = useHover(context, {
+        enabled: trigger === 'hover',
+        delay: {
+            open: 0,
+            close: 50
+        },
+        handleClose: safePolygon({
+            requireIntent: false
+        })
+    });
+    var click = useClick(context, {
+        stickIfOpen: false,
+        ignoreMouse: trigger === 'hover'
+    });
+    var getReferenceProps = useInteractions([
+        hover,
+        click
+    ]).getReferenceProps;
     return /*#__PURE__*/ React.createElement("div", {
         ref: ref,
         id: wrappedId,
@@ -129,14 +109,10 @@ var FloatingPopover = /*#__PURE__*/ forwardRef(function(param, ref) {
             position: 'relative',
             display: isInner ? 'block' : 'inline-block'
         }
-    }, /*#__PURE__*/ React.createElement("div", {
-        ref: refs.setReference,
-        onClick: handleTargetClick,
-        onMouseEnter: handleTargetMouseEnter,
-        onMouseLeave: handleTargetMouseLeave
-    }, target), opened && /*#__PURE__*/ React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", _object_spread({
+        ref: refs.setReference
+    }, getReferenceProps()), target), opened && /*#__PURE__*/ React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ React.createElement("div", {
         ref: refs.setFloating,
-        onMouseLeave: handleFloatingMouseLeave,
         style: _object_spread_props(_object_spread({}, floatingStyles), {
             zIndex: zIndex || 1000
         })

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

@@ -162,13 +162,9 @@ export var useKeyNavigation = function(param) {
             case keys.Tab:
             case keys.Escape:
                 {
-                    dispatchFocusedPath({
-                        type: 'reset'
-                    });
-                    dispatchPath({
-                        type: 'reset'
-                    });
-                    handleGlobalToggle(false, event);
+                    if (path[0]) {
+                        handleGlobalToggle(false, event);
+                    }
                     break;
                 }
             case keys.Home:

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

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 import { safeUseId } from "../../../../utils";
 import { DropdownItem } from "../DropdownItem/DropdownItem";
 import { Ul, ListWrapper } from "../../Dropdown.styles";
 import { FloatingPopover } from "../../FloatingPopover";
 import { getPlacement } from "../../utils";
 var DropdownInner = function(param) {
-    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, trigger = param.trigger, listMaxHeight = param.listMaxHeight, listOverflow = param.listOverflow, listWidth = param.listWidth;
+    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, trigger = param.trigger, listWidth = param.listWidth, portal = param.portal;
     var handleToggle = function(opened) {
         if (opened) {
             dispatchPath({
@@ -20,6 +20,7 @@ var DropdownInner = function(param) {
             });
         }
     };
+    var listWrapperRef = useRef(null);
     var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
     var treeId = safeUseId();
     var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -40,14 +41,15 @@ var DropdownInner = function(param) {
                 ariaLevel: nextLevel,
                 ariaLabel: item.label
             }),
-            isInner: true
+            isInner: true,
+            portal: portal
         }, /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
             id: listId,
             role: "group",
-            listMaxHeight: listMaxHeight,
-            listOverflow: listOverflow
+            listMaxHeight: item.listMaxHeight
         }, item.items.map(function(innerItem, innerIndex) {
             return /*#__PURE__*/ React.createElement(DropdownInner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -57,9 +59,8 @@ var DropdownInner = function(param) {
                 dispatchPath: dispatchPath,
                 index: innerIndex,
                 trigger: trigger,
-                listMaxHeight: listMaxHeight,
-                listOverflow: listOverflow,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }

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

@@ -133,7 +133,7 @@ export var DropdownItem = function(param) {
     };
     var handleHover = function() {
         if (onHover) {
-            onHover(index);
+            onHover(index, item);
         }
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, dividerBefore && /*#__PURE__*/ React.createElement(Divider, {

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

@@ -121,7 +121,7 @@ import { Context } from "./Select.context";
     return /*#__PURE__*/ forwardRef(function(props, ref) {
         var _getItemByFocused;
         var // eslint-disable-block @typescript-eslint/ban-ts-comment
-        id = props.id, outerValue = props.value, outerOnChange = props.onChange, _props_target = props.target, target = _props_target === void 0 ? 'textfield-like' : _props_target, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom' : _props_placement, label = props.label, labelPlacement = props.labelPlacement, placeholder = props.placeholder, helperText = props.helperText, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, outerView = props.view, size = props.size, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, contentLeft = props.contentLeft, onScrollBottom = props.onScrollBottom, onScroll = props.onScroll, chipView = props.chipView, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, portal = props.portal, renderValue = props.renderValue, renderItem = props.renderItem, status = props.status, onItemSelect = props.onItemSelect, separator = props.separator, outerCloseAfterSelect = props.closeAfterSelect, isTargetAmount = props.isTargetAmount, beforeList = props.beforeList, afterList = props.afterList, zIndex = props.zIndex, name = props.name, defaultValue = props.defaultValue, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, onToggle = props.onToggle, chipType = props.chipType, multiselect = props.multiselect, // @ts-ignore
+        id = props.id, outerValue = props.value, outerOnChange = props.onChange, _props_target = props.target, target = _props_target === void 0 ? 'textfield-like' : _props_target, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom' : _props_placement, label = props.label, labelPlacement = props.labelPlacement, placeholder = props.placeholder, helperText = props.helperText, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, outerView = props.view, size = props.size, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, contentLeft = props.contentLeft, onScrollBottom = props.onScrollBottom, onScroll = props.onScroll, chipView = props.chipView, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, portal = props.portal, renderValue = props.renderValue, renderItem = props.renderItem, status = props.status, onItemSelect = props.onItemSelect, separator = props.separator, outerCloseAfterSelect = props.closeAfterSelect, isTargetAmount = props.isTargetAmount, beforeList = props.beforeList, afterList = props.afterList, zIndex = props.zIndex, name = props.name, defaultValue = props.defaultValue, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, onToggle = props.onToggle, chipType = props.chipType, multiselect = props.multiselect, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, // @ts-ignore
         _offset = props._offset, // Извлекаем пропсы для required и hint, чтобы они не попадали в DOM.
         // @ts-ignore
         required = props.required, // @ts-ignore
@@ -177,6 +177,7 @@ import { Context } from "./Select.context";
             "onToggle",
             "chipType",
             "multiselect",
+            "mode",
             "_offset",
             "required",
             "requiredPlacement",
@@ -210,6 +211,7 @@ import { Context } from "./Select.context";
         var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
         var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
         var treeId = safeUseId();
+        var listWrapperRef = useRef(null);
         var view = target === 'textfield-like' && (disabled || readOnly) ? 'default' : getView(status, outerView);
         // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
         var requiredProps = props.target === 'button-like' ? undefined : {
@@ -339,6 +341,10 @@ import { Context } from "./Select.context";
                     type: 'reset'
                 });
             }
+            // Закрываем список, если элемент уже выбран.
+            if (mode === 'radio' && isCurrentChecked) {
+                return;
+            }
             if (onChange) {
                 onChange(isCurrentChecked ? '' : item.value, item);
             }
@@ -496,12 +502,12 @@ import { Context } from "./Select.context";
             disabled: disabled,
             readOnly: readOnly
         }, rest), /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
             role: "tree",
             id: "".concat(treeId, "_tree_level_1"),
             "aria-multiselectable": Boolean(props.multiselect),
-            listOverflow: listOverflow,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: virtual ? undefined : handleScroll,
             ref: targetRef,
@@ -522,7 +528,8 @@ import { Context } from "./Select.context";
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }), afterList))))));
     });

package/styled-components/es/components/Select/Select.styles.js

@@ -4,7 +4,7 @@ import { getCorrectHeight } from "./utils";
 import { tokens, constants } from "./Select.tokens";
 export var ListWrapper = styled.div.withConfig({
     displayName: "Select.styles__ListWrapper",
-    componentId: "sc-30266665-0"
+    componentId: "sc-3f8cf8d4-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -21,10 +21,10 @@ export var ListWrapper = styled.div.withConfig({
 }, tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
 export var Ul = styled.ul.withConfig({
     displayName: "Select.styles__Ul",
-    componentId: "sc-30266665-1"
+    componentId: "sc-3f8cf8d4-1"
 })([
     "max-height:",
-    ";overflow-y:",
+    ";overflow-x:hidden;overflow-y:",
     ";border-radius:calc(var(",
     ") - 0.125rem - var(",
     ",0rem));margin:0;padding:0;"
@@ -33,8 +33,8 @@ export var Ul = styled.ul.withConfig({
     return(// eslint-disable-next-line no-nested-ternary
     virtual ? 'auto' : listMaxHeight ? getCorrectHeight(listMaxHeight) : 'auto');
 }, function(param) {
-    var virtual = param.virtual, listOverflow = param.listOverflow;
-    return virtual ? 'visible' : listOverflow || 'visible';
+    var virtual = param.virtual;
+    return virtual ? 'visible' : 'auto';
 }, tokens.borderRadius, tokens.dropdownBorderWidth);
 export var base = css([
     ""

package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js

@@ -177,13 +177,9 @@ export var useKeyNavigation = function(param) {
             case keys.Tab:
             case keys.Escape:
                 {
-                    dispatchFocusedPath({
-                        type: 'reset'
-                    });
-                    dispatchPath({
-                        type: 'reset'
-                    });
-                    handleListToggle(false);
+                    if (path[0]) {
+                        handleListToggle(false);
+                    }
                     break;
                 }
             case keys.Home:

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useRef } from "react";
 import { isEmpty, safeUseId } from "../../../../utils";
 import { Ul, ListWrapper } from "../../Select.styles";
 import { FloatingPopover } from "../../FloatingPopover";
 import { Item } from "./ui/Item/Item";
 export var Inner = function(param) {
-    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth;
+    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal;
     var handleToggle = function(opened) {
         if (opened) {
             dispatchPath({
@@ -19,6 +19,7 @@ export var Inner = function(param) {
             });
         }
     };
+    var listWrapperRef = useRef(null);
     var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
     var treeId = safeUseId();
     var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -39,13 +40,16 @@ export var Inner = function(param) {
                 ariaLevel: nextLevel,
                 ariaLabel: item.label
             }),
-            isInner: true
+            isInner: true,
+            portal: portal
         }, /*#__PURE__*/ React.createElement(ListWrapper, {
-            listWidth: listWidth
+            listWidth: listWidth,
+            ref: listWrapperRef
         }, /*#__PURE__*/ React.createElement(Ul, {
             role: "group",
             id: listId,
-            virtual: false
+            virtual: false,
+            listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
         }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
             return /*#__PURE__*/ React.createElement(Inner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -54,7 +58,8 @@ export var Inner = function(param) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: innerIndex,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }

package/styled-components/es/components/Tree/Tree.styles.js

@@ -5,7 +5,7 @@ import { IconDisclosureRightCentered, IconFolder } from "../_Icon";
 import { treeTokens as tokens, classes } from "./Tree.tokens";
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Tree.styles__IconArrowWrapper",
-    componentId: "sc-cfcc5086-0"
+    componentId: "sc-f49c6fa1-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -14,19 +14,19 @@ export var IconArrowWrapper = styled.div.withConfig({
 ], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Tree.styles__StyledArrow",
-    componentId: "sc-cfcc5086-1"
+    componentId: "sc-f49c6fa1-1"
 })([
     "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
 ]);
 export var StyledFolder = styled(IconFolder).withConfig({
     displayName: "Tree.styles__StyledFolder",
-    componentId: "sc-cfcc5086-2"
+    componentId: "sc-f49c6fa1-2"
 })([
     ""
 ]);
 export var TitleWrapper = styled.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-cfcc5086-3"
+    componentId: "sc-f49c6fa1-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
     ";",
@@ -37,7 +37,7 @@ export var TitleWrapper = styled.div.withConfig({
 }, applyEllipsis());
 export var Title = styled.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-cfcc5086-4"
+    componentId: "sc-f49c6fa1-4"
 })([
     "margin:var(",
     ");",
@@ -45,16 +45,16 @@ export var Title = styled.span.withConfig({
 ], tokens.iconFolderMargin, applyEllipsis());
 export var ContentRight = styled.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-cfcc5086-5"
+    componentId: "sc-f49c6fa1-5"
 })([
     "line-height:0;"
 ]);
 export var Line = styled.div.withConfig({
     displayName: "Tree.styles__Line",
-    componentId: "sc-cfcc5086-6"
+    componentId: "sc-f49c6fa1-6"
 })([
     "left:",
-    ";right:0;position:absolute;z-index:1;height:2px;background-color:var(",
+    "px;right:0;position:absolute;z-index:1;height:2px;background-color:var(",
     ");border-radius:1px;pointer-events:none;"
 ], function(param) {
     var left = param.left;

package/styled-components/es/engines/common.js

@@ -76,10 +76,23 @@ export var mergeConfig = function(baseConfig, userConfig) {
     }
     return res;
 };
+// INFO: Метод, который проводит слияние двух объектов
+// INFO: если значение явно указанно как undefined/null/пустая строка, то будет взято значение указанное в default
+function mergeWithoutNullable(defaults, componentProps) {
+    var props = Object.keys(defaults).reduce(function(acc, key) {
+        return _object_spread_props(_object_spread({}, acc), _define_property({}, key, [
+            null,
+            undefined,
+            ''
+        ].includes(componentProps[key]) ? defaults[key] : componentProps[key]));
+    }, {});
+    return _object_spread({}, componentProps, props);
+}
 export function component(config) {
     var Comp = config.layout(_component(config));
     return /*#__PURE__*/ React.forwardRef(function(props, ref) {
-        return /*#__PURE__*/ React.createElement(Comp, _object_spread_props(_object_spread({}, config === null || config === void 0 ? void 0 : config.defaults, props), {
+        var mergedProps = mergeWithoutNullable(config === null || config === void 0 ? void 0 : config.defaults, props);
+        return /*#__PURE__*/ React.createElement(Comp, _object_spread_props(_object_spread({}, mergedProps), {
             ref: ref
         }));
     });

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

@@ -0,0 +1,7 @@
+import { component, mergeConfig } from "../../../engines";
+import { comboboxNewConfig } from "../../..";
+import { config } from "./Combobox.config";
+var mergedConfig = mergeConfig(comboboxNewConfig, config);
+var ComboboxComponent = component(mergedConfig);
+var Combobox = ComboboxComponent;
+export { Combobox };

package/styled-components/es/examples/components/Tree/Tree.config.js

@@ -25,8 +25,10 @@ export var config = {
                 ":var(--text-secondary);",
                 ":var(--text-secondary);",
                 ":var(--surface-positive);",
+                ":var(--surface-solid-default);",
+                ":var(--surface-positive);",
                 ":var(--surface-solid-default);"
-            ], tokens.iconFolderColor, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColorSelected, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity, tokens.itemDisabledBorderColor, tokens.itemDisabledColor, tokens.itemDraggableBorderColor, tokens.itemDraggableLineColor)
+            ], tokens.iconFolderColor, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColorSelected, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity, tokens.itemDisabledBorderColor, tokens.itemDisabledColor, tokens.itemDraggableBorderColor, tokens.itemDraggableLineColor, tokens.itemDraggableBorderColor, tokens.itemDraggableLineColor)
         },
         size: {
             l: css([

package/types/components/Autocomplete/Autocomplete.types.d.ts

@@ -15,7 +15,7 @@ export type SuggestionItemType = {
      */
     contentRight?: ReactNode;
 };
-export type AutocompleteProps = {
+export type AutocompleteProps<T extends SuggestionItemType = SuggestionItemType> = {
     /**
      * Расположение лейбла.
      * @default outer
@@ -48,7 +48,7 @@ export type AutocompleteProps = {
     /**
      * Массив подсказок.
      */
-    suggestions?: SuggestionItemType[];
+    suggestions?: T[];
     /**
      * Минимальное число введенных символов, при котором открывается дропдаун.
      * @default 2
@@ -57,11 +57,11 @@ export type AutocompleteProps = {
     /**
      * Коллбэк фильтра подсказок.
      */
-    filter?: (data: SuggestionItemType) => boolean;
+    filter?: (data: T) => boolean;
     /**
      * Коллбэк, который срабатывает при выборе подсказки.
      */
-    onSuggestionSelect?: (data: SuggestionItemType) => void;
+    onSuggestionSelect?: (data: T) => void;
     /**
      * Коллбэк, срабатывающий при скролле.
      */
@@ -78,7 +78,7 @@ export type AutocompleteProps = {
     /**
      * Коллбэк для рендера кастомного списка подсказок.
      */
-    renderList?: (data?: SuggestionItemType[]) => ReactNode;
+    renderList?: (data?: T[]) => ReactNode;
     /**
      * Коллбэк для рендера элемента в конце выпадающего списка.
      */
@@ -86,7 +86,7 @@ export type AutocompleteProps = {
     /**
      * Callback для кастомной настройки элемента в выпадающем списке.
      */
-    renderItem?: (item: SuggestionItemType) => React.ReactNode;
+    renderItem?: (item: T) => React.ReactNode;
     /**
      * Ячейка для контента в начале выпадающего списка.
      */

package/types/components/Autocomplete/Autocomplete.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.types.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.types.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.types.ts"],"names":[],"mappings":"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"}

package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA8BxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AAEH,eAAO,MAAM,YAAY,SAAU,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,2FA6jBtF,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBA/jBQ,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;CAolB3F,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA8BxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AAEH,eAAO,MAAM,YAAY,SAAU,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,2FA2kBtF,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBA7kBQ,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;CAkmB3F,CAAC"}

package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts

@@ -4,7 +4,6 @@ export declare const ListWrapper: import("@linaria/react").StyledComponent<impor
 }>;
 export declare const Ul: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
     virtual: ComboboxProps["virtual"];
-    listOverflow?: ComboboxProps["listOverflow"];
     listMaxHeight?: ComboboxProps["listMaxHeight"];
 }>;
 export declare const IconArrowWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {