@salutejs/plasma-new-hope 0.335.0-canary.2194.17367251959.0 → 0.335.0-canary.2197.17377664818.0

package/styled-components/cjs/components/Popup/PopupContext.js

@@ -130,7 +130,7 @@ var usePopupContext = function() {
     return (0, _react.useContext)(PopupContext);
 };
 var PopupProvider = function(param) {
-    var children = param.children, providerFrame = param.providerFrame, UNSAFE_SSR_ENABLED = param.UNSAFE_SSR_ENABLED;
+    var children = param.children, UNSAFE_SSR_ENABLED = param.UNSAFE_SSR_ENABLED;
     var prevBodyOverflowY = (0, _react.useRef)(_utils.canUseDOM ? document.body.style.overflowY : '');
     var _useState = _sliced_to_array((0, _react.useState)(initialItems), 2), items = _useState[0], setItems = _useState[1];
     var uuid = (0, _utils.safeUseId)();
@@ -173,32 +173,13 @@ var PopupProvider = function(param) {
         register: register,
         unregister: unregister
     };
-    var getDefaultPortal = function() {
-        if (typeof providerFrame !== 'string' && providerFrame && providerFrame.current && _utils.canUseDOM) {
-            return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
-                container: providerFrame.current
-            }, /*#__PURE__*/ _react.default.createElement(_Popupstyles.StyledPortal, {
-                id: rootId
-            }));
-        }
-        var withFrameId = typeof providerFrame === 'string' && providerFrame !== 'document';
-        var containerElement = withFrameId && _utils.canUseDOM && document.getElementById(providerFrame);
-        if (containerElement) {
-            return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
-                container: containerElement
-            }, /*#__PURE__*/ _react.default.createElement(_Popupstyles.StyledPortal, {
-                id: rootId
-            }));
-        }
-        return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
-            container: document.body
-        }, /*#__PURE__*/ _react.default.createElement(_Popupstyles.StyledPortal, {
-            id: rootId
-        }));
-    };
     return /*#__PURE__*/ _react.default.createElement(PopupContext.Provider, {
         value: context
     }, children, UNSAFE_SSR_ENABLED ? /*#__PURE__*/ _react.default.createElement(_ClientOnlyPortal.ClientOnlyPortal, null, /*#__PURE__*/ _react.default.createElement(_Popupstyles.StyledPortal, {
         id: rootId
-    })) : getDefaultPortal());
+    })) : /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
+        container: document.body
+    }, /*#__PURE__*/ _react.default.createElement(_Popupstyles.StyledPortal, {
+        id: rootId
+    })));
 };

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

@@ -267,6 +267,7 @@ var selectRoot = function(Root) {
         var activeDescendantItemValue = ((_getItemByFocused = (0, _useKeyboardNavigation.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
         var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
         var treeId = (0, _utils.safeUseId)();
+        var listWrapperRef = (0, _react.useRef)(null);
         var view = target === 'textfield-like' && (disabled || readOnly) ? 'default' : (0, _utils1.getView)(status, outerView);
         // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
         var requiredProps = props.target === 'button-like' ? undefined : {
@@ -553,12 +554,12 @@ var selectRoot = function(Root) {
             disabled: disabled,
             readOnly: readOnly
         }, rest), /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.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,
@@ -579,7 +580,8 @@ var selectRoot = function(Root) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }), afterList))))));
     });

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

@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Select.styles__ListWrapper",
-    componentId: "sc-30266665-0"
+    componentId: "sc-23c571db-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -82,7 +82,7 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
 }, _Selecttokens.tokens.padding, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.borderRadius, _Selecttokens.constants.background, _Selecttokens.constants.boxShadow, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.dropdownBorderColor);
 var Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Select.styles__Ul",
-    componentId: "sc-30266665-1"
+    componentId: "sc-23c571db-1"
 })([
     "max-height:",
     ";overflow-y:",
@@ -94,8 +94,8 @@ var Ul = _styledcomponents.default.ul.withConfig({
     return(// eslint-disable-next-line no-nested-ternary
     virtual ? 'auto' : listMaxHeight ? (0, _utils.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';
 }, _Selecttokens.tokens.borderRadius, _Selecttokens.tokens.dropdownBorderWidth);
 var base = (0, _styledcomponents.css)([
     ""

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

@@ -8,18 +8,54 @@ Object.defineProperty(exports, "Inner", {
         return Inner;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _utils = require("../../../../utils");
 var _Selectstyles = require("../../Select.styles");
 var _FloatingPopover = require("../../FloatingPopover");
 var _Item = require("./ui/Item/Item");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 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({
@@ -34,6 +70,7 @@ var Inner = function(param) {
             });
         }
     };
+    var listWrapperRef = (0, _react.useRef)(null);
     var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
     var treeId = (0, _utils.safeUseId)();
     var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -54,13 +91,16 @@ var Inner = function(param) {
                 ariaLevel: nextLevel,
                 ariaLabel: item.label
             }),
-            isInner: true
+            isInner: true,
+            portal: portal
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
-            listWidth: listWidth
+            listWidth: listWidth,
+            ref: listWrapperRef
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.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.default.createElement(Inner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -69,7 +109,8 @@ var Inner = function(param) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: innerIndex,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }

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

@@ -8,101 +8,33 @@ Object.defineProperty(exports, "VirtualList", {
         return VirtualList;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-var _reactvirtual = require("@tanstack/react-virtual");
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _rcvirtuallist = /*#__PURE__*/ _interop_require_default(require("rc-virtual-list"));
 var _utils = require("../../../../utils");
 var _ui = require("../Inner/ui");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
     };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
 }
 var VirtualList = function(param) {
     var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll;
-    var _virtualItems_;
-    var parentRef = (0, _react.useRef)(null);
-    var virtualizer = (0, _reactvirtual.useVirtualizer)({
-        count: items.length,
-        getScrollElement: function() {
-            return parentRef.current;
-        },
-        estimateSize: function() {
-            return 48;
-        }
-    });
-    var virtualItems = virtualizer.getVirtualItems();
-    var _virtualItems__start;
-    return /*#__PURE__*/ _react.default.createElement("div", {
-        ref: parentRef,
-        style: {
-            height: 'auto',
-            maxHeight: (0, _utils.getHeightAsNumber)(listMaxHeight),
-            overflowY: 'auto'
-        },
+    return /*#__PURE__*/ _react.default.createElement(_rcvirtuallist.default, {
+        data: items,
+        height: (0, _utils.getHeightAsNumber)(listMaxHeight),
+        fullHeight: false,
+        itemHeight: 100,
+        itemKey: "id",
         onScroll: onScroll
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        style: {
-            height: virtualizer.getTotalSize(),
-            width: '100%',
-            position: 'relative'
-        }
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            transform: "translateY(".concat((_virtualItems__start = (_virtualItems_ = virtualItems[0]) === null || _virtualItems_ === void 0 ? void 0 : _virtualItems_.start) !== null && _virtualItems__start !== void 0 ? _virtualItems__start : 0, "px)")
-        }
-    }, virtualItems.map(function(virtualRow) {
-        return /*#__PURE__*/ _react.default.createElement("div", {
-            key: virtualRow.key,
-            "data-index": virtualRow.index,
-            ref: virtualizer.measureElement
-        }, /*#__PURE__*/ _react.default.createElement(_ui.Item, {
-            item: items[virtualRow.index],
+    }, function(item, index, props) {
+        return /*#__PURE__*/ _react.default.createElement("div", props, /*#__PURE__*/ _react.default.createElement(_ui.Item, {
+            item: item,
             path: [
                 'root'
             ],
             currentLevel: 0,
-            index: virtualRow.index,
+            index: index,
             ariaLevel: 1
         }));
-    }))));
+    });
 };

package/styled-components/cjs/examples/components/Chip/Chip.config.js

@@ -181,27 +181,6 @@ var config = {
                 ":0.25rem;",
                 ":-0.25rem;",
                 ":0.75rem;"
-            ], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.padding, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.rightContentMarginLeft, _Chip.chipTokens.rightContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize),
-            xxs: (0, _styledcomponents.css)([
-                "",
-                ":0.375rem;",
-                ":0.625rem;",
-                ":auto;",
-                ":1.25rem;",
-                ":0 0.5rem;",
-                ":var(--plasma-typo-body-xxs-font-family);",
-                ":var(--plasma-typo-body-xxs-font-size);",
-                ":var(--plasma-typo-body-xxs-font-style);",
-                ":var(--plasma-typo-body-xxs-font-weight);",
-                ":var(--plasma-typo-body-xxs-letter-spacing);",
-                ":var(--plasma-typo-body-xxs-line-height);",
-                ":-0.125rem;",
-                ":0.125rem;",
-                ":0.125rem;",
-                ":-0.125rem;",
-                ":0.25rem;",
-                ":-0.25rem;",
-                ":0.75rem;"
             ], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.padding, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.rightContentMarginLeft, _Chip.chipTokens.rightContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize)
         },
         disabled: {

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

@@ -99,7 +99,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, useState, useReducer, useRef } from "react";
+import React, { forwardRef, useState, useReducer, useLayoutEffect, useRef } from "react";
 import { safeUseId } from "../../utils";
 import { useDidMountEffect, useOutsideClick } from "../../hooks";
 import { FloatingPopover } from "./FloatingPopover";
@@ -150,7 +150,7 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
             "_offset"
         ]);
         var _useReducer = _sliced_to_array(useReducer(focusedReducer, null), 2), focused = _useReducer[0], dispatchFocused = _useReducer[1];
-        var _useState = _sliced_to_array(useState(defaultValue || ''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var _useState = _sliced_to_array(useState(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
         var _useState1 = _sliced_to_array(useState(false), 2), isOpen = _useState1[0], setIsOpen = _useState1[1];
         var listId = safeUseId();
         var value = outerValue !== null && outerValue !== void 0 ? outerValue : innerValue;
@@ -206,6 +206,13 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
         }, [
             value
         ]);
+        useLayoutEffect(function() {
+            if (defaultValue) {
+                setInnerValue(defaultValue);
+            }
+        }, [
+            defaultValue
+        ]);
         return /*#__PURE__*/ React.createElement(Root, {
             view: view,
             size: size,

package/styled-components/es/components/Autocomplete/ui/VirtualList/VirtualList.js

@@ -1,55 +1,23 @@
-import React, { useRef } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import React from "react";
+import List from "rc-virtual-list";
 import { getHeightAsNumber } from "../../../../utils";
 import { SuggestionItem } from "../SuggestionItem/SuggestionItem";
 export var VirtualList = function(param) {
     var items = param.items, onClick = param.onClick, listId = param.listId, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, renderItem = param.renderItem;
-    var _virtualItems_;
-    var parentRef = useRef(null);
-    var virtualizer = useVirtualizer({
-        count: items.length,
-        getScrollElement: function() {
-            return parentRef.current;
-        },
-        estimateSize: function() {
-            return 48;
-        }
-    });
-    var virtualItems = virtualizer.getVirtualItems();
-    var _virtualItems__start;
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: parentRef,
-        style: {
-            height: 'auto',
-            maxHeight: getHeightAsNumber(listMaxHeight),
-            overflowY: 'auto'
-        },
+    return /*#__PURE__*/ React.createElement(List, {
+        data: items,
+        height: getHeightAsNumber(listMaxHeight),
+        fullHeight: false,
+        itemHeight: 100,
+        itemKey: "id",
         onScroll: onScroll
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            height: virtualizer.getTotalSize(),
-            width: '100%',
-            position: 'relative'
-        }
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            transform: "translateY(".concat((_virtualItems__start = (_virtualItems_ = virtualItems[0]) === null || _virtualItems_ === void 0 ? void 0 : _virtualItems_.start) !== null && _virtualItems__start !== void 0 ? _virtualItems__start : 0, "px)")
-        }
-    }, virtualItems.map(function(virtualRow) {
-        return /*#__PURE__*/ React.createElement("div", {
-            key: virtualRow.key,
-            "data-index": virtualRow.index,
-            ref: virtualizer.measureElement
-        }, /*#__PURE__*/ React.createElement(SuggestionItem, {
-            item: items[virtualRow.index],
+    }, function(item, index, props) {
+        return /*#__PURE__*/ React.createElement("div", props, /*#__PURE__*/ React.createElement(SuggestionItem, {
+            item: item,
             onClick: onClick,
-            id: "".concat(listId, "/").concat(virtualRow.index),
+            id: "".concat(listId, "/").concat(index),
             focused: false,
             renderItem: renderItem
         }));
-    }))));
+    });
 };

package/styled-components/es/components/Carousel/CarouselNew/Carousel.js

@@ -59,9 +59,9 @@ var DOTS_CENTERED_DEFAULT = false;
  * Компонент для создания списков с прокруткой.
  */ export var carouselNewRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(param, ref) {
-        var view = param.view, size = param.size, _param_scrollAlign = param.scrollAlign, scrollAlign = _param_scrollAlign === void 0 ? 'start' : _param_scrollAlign, children = param.children, _param_controlArrowsDisabled = param.controlArrowsDisabled, controlArrowsDisabled = _param_controlArrowsDisabled === void 0 ? false : _param_controlArrowsDisabled, paginationOptions = param.paginationOptions, _param_gap = param.gap, gap = _param_gap === void 0 ? '20px' : _param_gap, className = param.className, style = param.style, defaultIndex = param.defaultIndex;
+        var view = param.view, size = param.size, _param_scrollAlign = param.scrollAlign, scrollAlign = _param_scrollAlign === void 0 ? 'start' : _param_scrollAlign, children = param.children, _param_controlArrowsDisabled = param.controlArrowsDisabled, controlArrowsDisabled = _param_controlArrowsDisabled === void 0 ? false : _param_controlArrowsDisabled, paginationOptions = param.paginationOptions, _param_gap = param.gap, gap = _param_gap === void 0 ? '20px' : _param_gap, className = param.className, style = param.style;
+        var _useState = _sliced_to_array(useState(0), 2), index = _useState[0], setIndex = _useState[1];
         var slidesAmount = Children.count(children);
-        var _useState = _sliced_to_array(useState(defaultIndex && defaultIndex >= 0 ? Math.min(slidesAmount - 1, defaultIndex) : 0), 2), index = _useState[0], setIndex = _useState[1];
         var handleClickLeft = function() {
             setIndex(Math.max(0, index - 1));
         };

package/styled-components/es/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -34,7 +34,6 @@ export var useCarousel = function(param) {
     var index = param.index, scrollAlign = param.scrollAlign;
     var scrollRef = useRef(null);
     var trackRef = useRef(null);
-    var isFirstRender = useRef(true);
     // Прокрутка до нужной позиции индекса, если индекс изменился.
     useEffect(function() {
         if (!scrollRef.current || !trackRef.current) {
@@ -50,13 +49,9 @@ export var useCarousel = function(param) {
                 scrollAlign: scrollAlign
             });
             scrollRef.current.scrollTo({
-                left: pos,
-                behavior: isFirstRender.current ? 'instant' : 'smooth'
+                left: pos
             });
         }
-        if (isFirstRender.current) {
-            isFirstRender.current = false;
-        }
     }, [
         index
     ]);

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

@@ -226,6 +226,7 @@ import { Context } from "./Combobox.context";
         var floatingPopoverRef = useRef(null);
         var inputForkRef = useForkRef(inputRef, ref);
         var treeId = safeUseId();
+        var listWrapperRef = useRef(null);
         var filteredItems = useMemo(function() {
             var _valueToItemMap_get;
             return filterItems(transformedItems, textValue, ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value, filter);
@@ -646,6 +647,7 @@ import { Context } from "./Combobox.context";
             readOnly: readOnly,
             name: name
         }, /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
             role: "tree",
@@ -654,7 +656,6 @@ import { Context } from "./Combobox.context";
             listMaxHeight: listMaxHeight || listHeight,
             ref: targetRef,
             virtual: virtual,
-            listOverflow: listOverflow,
             onScroll: virtual ? undefined : onScroll
         }, beforeList, isEmpty(filteredItems) ? /*#__PURE__*/ React.createElement(StyledEmptyState, {
             className: classes.emptyStateWrapper,
@@ -676,7 +677,8 @@ import { Context } from "./Combobox.context";
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         })), afterList)))))));
     });

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js

@@ -8,7 +8,7 @@ var mergedConfig = mergeConfig(emptyStateConfig);
 var EmptyState = component(mergedConfig);
 export var ListWrapper = styled.div.withConfig({
     displayName: "Combobox.styles__ListWrapper",
-    componentId: "sc-7fefedf8-0"
+    componentId: "sc-900436d4-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -25,7 +25,7 @@ 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: "Combobox.styles__Ul",
-    componentId: "sc-7fefedf8-1"
+    componentId: "sc-900436d4-1"
 })([
     "max-height:",
     ";overflow-y:",
@@ -37,12 +37,12 @@ export var Ul = styled.ul.withConfig({
     var virtual = param.virtual, listMaxHeight = param.listMaxHeight;
     return virtual ? 'auto' : 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, classes.emptyStateWrapper);
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Combobox.styles__IconArrowWrapper",
-    componentId: "sc-7fefedf8-2"
+    componentId: "sc-900436d4-2"
 })([
     "line-height:0;color:var(",
     ");cursor:",
@@ -63,7 +63,7 @@ export var sizeMap = {
 };
 export var StyledArrow = styled(IconDisclosureDownCentered).withConfig({
     displayName: "Combobox.styles__StyledArrow",
-    componentId: "sc-7fefedf8-3"
+    componentId: "sc-900436d4-3"
 })([
     "width:",
     ";height:",
@@ -80,7 +80,7 @@ export var base = css([
 ]);
 export var StyledEmptyState = styled(EmptyState).withConfig({
     displayName: "Combobox.styles__StyledEmptyState",
-    componentId: "sc-7fefedf8-4"
+    componentId: "sc-900436d4-4"
 })([
     "",
     ":var(",
@@ -102,7 +102,7 @@ export var StyledEmptyState = styled(EmptyState).withConfig({
 ], emptyStateTokens.borderRadius, tokens.textFieldBorderRadius, emptyStateTokens.padding, tokens.emptyStatePadding, emptyStateTokens.fontFamily, tokens.textFieldFontFamily, emptyStateTokens.fontSize, tokens.textFieldFontSize, emptyStateTokens.fontStyle, tokens.textFieldFontStyle, emptyStateTokens.fontWeight, tokens.textFieldFontWeight, emptyStateTokens.fontLetterSpacing, tokens.textFieldLetterSpacing, emptyStateTokens.fontLineHeight, tokens.textFieldLineHeight);
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "Combobox.styles__StyledLeftHelper",
-    componentId: "sc-7fefedf8-5"
+    componentId: "sc-900436d4-5"
 })([
     "margin:0;padding:0;"
 ]);

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

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 import { safeUseId } from "../../../../../utils";
 import { FloatingPopover } from "../../FloatingPopover";
 import { isEmpty } from "../../../../../utils";
 import { Ul, ListWrapper } from "../../Combobox.styles";
 import { Item } from "./ui";
 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({
@@ -20,6 +20,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);
@@ -40,13 +41,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),
@@ -55,7 +59,8 @@ export var Inner = function(param) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: innerIndex,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }