@salutejs/plasma-new-hope 0.336.0-canary.1906.17459907241.0 → 0.336.0-canary.2163.17581420375.0

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/Pagination/Pagination.js

@@ -99,9 +99,10 @@ 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, { useState, forwardRef, Fragment } from "react";
+import React, { useState, forwardRef, Fragment, useRef, useEffect } from "react";
+import { useForkRef } from "@salutejs/plasma-core";
 import { cx, isNumber } from "../../utils";
-import { PaginationPages, PaginationActions, PaginationButton, PaginationSection, PaginationButtonGroup, PaginationRoot, PaginationShorter } from "./Pagination.styles";
+import { PaginationPages, PaginationActions, PaginationButton, PaginationSection, PaginationButtonGroup, PaginationRoot, PaginationShorter, PaginationActionsLeft, PaginationHelperText } from "./Pagination.styles";
 import { getSections, defaultValues } from "./utils";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as typeCSS } from "./variations/_type/base";
@@ -111,9 +112,11 @@ import { PaginationQuickJumpToPage } from "./ui/PaginationQuickJumpToPage/Pagina
 import { PaginationSelectPerPage } from "./ui/PaginationSelectPerPage/PaginationSelectPerPage";
 export var paginationRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var outerValue = _param.value, defaultValue = _param.defaultValue, outerPerPage = _param.perPage, defaultPerPage = _param.defaultPerPage, _param_slots = _param.slots, slots = _param_slots === void 0 ? defaultValues.slots : _param_slots, view = _param.view, viewCurrentPage = _param.viewCurrentPage, _param_type = _param.type, type = _param_type === void 0 ? defaultValues.type : _param_type, size = _param.size, _param_pilled = _param.pilled, pilled = _param_pilled === void 0 ? defaultValues.pilled : _param_pilled, _param_square = _param.square, square = _param_square === void 0 ? defaultValues.square : _param_square, _param_disabledPages = _param.disabledPages, disabledPages = _param_disabledPages === void 0 ? defaultValues.disabledPages : _param_disabledPages, _param_count = _param.count, count = _param_count === void 0 ? defaultValues.value : _param_count, _param_hasQuickJump = _param.hasQuickJump, hasQuickJump = _param_hasQuickJump === void 0 ? defaultValues.hasQuickJump : _param_hasQuickJump, _param_hasPerPage = _param.hasPerPage, hasPerPage = _param_hasPerPage === void 0 ? defaultValues.hasPerPage : _param_hasPerPage, _param_perPageList = _param.perPageList, perPageList = _param_perPageList === void 0 ? defaultValues.perPageList : _param_perPageList, _param_isCommonButtonStyles = _param.isCommonButtonStyles, isCommonButtonStyles = _param_isCommonButtonStyles === void 0 ? defaultValues.isCommonButtonStyles : _param_isCommonButtonStyles, _param_placeholderQuickJump = _param.placeholderQuickJump, placeholderQuickJump = _param_placeholderQuickJump === void 0 ? defaultValues.placeholderQuickJump : _param_placeholderQuickJump, _param_textQuickJump = _param.textQuickJump, textQuickJump = _param_textQuickJump === void 0 ? defaultValues.textQuickJump : _param_textQuickJump, _param_textPerPage = _param.textPerPage, textPerPage = _param_textPerPage === void 0 ? defaultValues.textPerPage : _param_textPerPage, leftContent = _param.leftContent, rightContent = _param.rightContent, listWidth = _param.listWidth, onChangePageValue = _param.onChangePageValue, onChangePerPageValue = _param.onChangePerPageValue, onChange = _param.onChange, rest = _object_without_properties(_param, [
+        var outerValue = _param.value, defaultValue = _param.defaultValue, helperText = _param.helperText, helperTextEllipsis = _param.helperTextEllipsis, outerPerPage = _param.perPage, defaultPerPage = _param.defaultPerPage, _param_slots = _param.slots, slots = _param_slots === void 0 ? defaultValues.slots : _param_slots, view = _param.view, viewCurrentPage = _param.viewCurrentPage, _param_type = _param.type, type = _param_type === void 0 ? defaultValues.type : _param_type, size = _param.size, _param_pilled = _param.pilled, pilled = _param_pilled === void 0 ? defaultValues.pilled : _param_pilled, _param_square = _param.square, square = _param_square === void 0 ? defaultValues.square : _param_square, _param_disabledPages = _param.disabledPages, disabledPages = _param_disabledPages === void 0 ? defaultValues.disabledPages : _param_disabledPages, _param_count = _param.count, count = _param_count === void 0 ? defaultValues.value : _param_count, _param_hasQuickJump = _param.hasQuickJump, hasQuickJump = _param_hasQuickJump === void 0 ? defaultValues.hasQuickJump : _param_hasQuickJump, _param_hasPerPage = _param.hasPerPage, hasPerPage = _param_hasPerPage === void 0 ? defaultValues.hasPerPage : _param_hasPerPage, _param_perPageList = _param.perPageList, perPageList = _param_perPageList === void 0 ? defaultValues.perPageList : _param_perPageList, _param_isCommonButtonStyles = _param.isCommonButtonStyles, isCommonButtonStyles = _param_isCommonButtonStyles === void 0 ? defaultValues.isCommonButtonStyles : _param_isCommonButtonStyles, _param_placeholderQuickJump = _param.placeholderQuickJump, placeholderQuickJump = _param_placeholderQuickJump === void 0 ? defaultValues.placeholderQuickJump : _param_placeholderQuickJump, _param_textQuickJump = _param.textQuickJump, textQuickJump = _param_textQuickJump === void 0 ? defaultValues.textQuickJump : _param_textQuickJump, _param_textPerPage = _param.textPerPage, textPerPage = _param_textPerPage === void 0 ? defaultValues.textPerPage : _param_textPerPage, leftContent = _param.leftContent, rightContent = _param.rightContent, _param_listWidth = _param.listWidth, listWidth = _param_listWidth === void 0 ? 'fit-content' : _param_listWidth, onChangePageValue = _param.onChangePageValue, onChangePerPageValue = _param.onChangePerPageValue, onChange = _param.onChange, rest = _object_without_properties(_param, [
             "value",
             "defaultValue",
+            "helperText",
+            "helperTextEllipsis",
             "perPage",
             "defaultPerPage",
             "slots",
@@ -143,11 +146,16 @@ export var paginationRoot = function(Root) {
         var pageValue = outerValue !== null && outerValue !== void 0 ? outerValue : pageInner;
         var _useState1 = _sliced_to_array(useState(hasPerPage ? defaultPerPage || defaultValues.perPage : undefined), 2), perPageInner = _useState1[0], setPerPageInner = _useState1[1];
         var perPageValue = outerPerPage !== null && outerPerPage !== void 0 ? outerPerPage : perPageInner;
+        var pagesRef = useRef(null);
+        var _useState2 = _sliced_to_array(useState(0), 2), pagesWidth = _useState2[0], setPagesWidth = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(0), 2), rootWidth = _useState3[0], setRootWidth = _useState3[1];
+        var rootRef = useRef(null);
+        var forkRef = useForkRef(rootRef, ref);
         var pages = Math.ceil(count / (perPageValue || 1));
         var sections = getSections(pageValue, pages, slots);
         var typeClass = classes["".concat(type, "Type")];
         var roundedClass = pilled ? 'circle-circle' : 'square-square';
-        var withHasPerPageSelect = hasPerPage ? classes.withHasPerPageSelect : undefined;
+        var withHasPerPageSelect = hasPerPage && !helperText ? classes.withHasPerPageSelect : undefined;
         var withHasQuickJump = hasQuickJump ? classes.withHasQuickJump : undefined;
         var disabled = disabledPages.map(function(el) {
             return isNumber(el) ? Number(el) : null;
@@ -185,15 +193,42 @@ export var paginationRoot = function(Root) {
         var isActiveButton = function(checkPage) {
             return pageValue === checkPage ? classes.paginationPageButtonActive : '';
         };
+        useEffect(function() {
+            var observer = new ResizeObserver(function(entries) {
+                var newWidth = entries[0].contentRect.width;
+                setPagesWidth(newWidth);
+            });
+            if (pagesRef.current) {
+                observer.observe(pagesRef.current);
+            }
+            return function() {
+                return observer.disconnect();
+            };
+        }, [
+            type
+        ]);
+        useEffect(function() {
+            if (!rootRef.current) return;
+            var observer = new ResizeObserver(function(entries) {
+                var newWidth = entries[0].contentRect.width;
+                setRootWidth(newWidth);
+            });
+            observer.observe(rootRef.current);
+            return function() {
+                return observer.disconnect();
+            };
+        }, []);
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             size: size,
             view: view,
             viewCurrentPage: viewCurrentPage,
             className: cx(classes.wrapper, typeClass),
-            ref: ref
+            ref: forkRef
         }, rest), /*#__PURE__*/ React.createElement(PaginationRoot, {
             className: typeClass
-        }, /*#__PURE__*/ React.createElement(PaginationPages, null, leftContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
+        }, /*#__PURE__*/ React.createElement(PaginationPages, {
+            ref: pagesRef
+        }, leftContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
             isCommonButtonStyles: isCommonButtonStyles
         }, leftContent), sections && sections.map(function(section, indexSection) {
             return /*#__PURE__*/ React.createElement(Fragment, {
@@ -217,12 +252,24 @@ export var paginationRoot = function(Root) {
         }), rightContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
             isCommonButtonStyles: isCommonButtonStyles
         }, rightContent)), /*#__PURE__*/ React.createElement(PaginationActions, {
+            style: type === 'compact' ? {
+                minWidth: '0px'
+            } : {
+                width: "calc(100% - ".concat(pagesWidth, "px)")
+            },
             className: cx(classes.actions, typeClass, withHasPerPageSelect, withHasQuickJump)
+        }, /*#__PURE__*/ React.createElement(PaginationActionsLeft, {
+            className: typeClass
         }, hasQuickJump && /*#__PURE__*/ React.createElement(PaginationQuickJumpToPage, {
             placeholderQuickJump: placeholderQuickJump,
             textQuickJump: textQuickJump,
             onChangeValue: handleSetPage
-        }), hasPerPage && /*#__PURE__*/ React.createElement(PaginationSelectPerPage, {
+        }), helperText && /*#__PURE__*/ React.createElement(PaginationHelperText, {
+            className: cx(typeClass, helperTextEllipsis ? classes.ellipsisText : ''),
+            style: {
+                maxWidth: rootWidth
+            }
+        }, helperText)), hasPerPage && /*#__PURE__*/ React.createElement(PaginationSelectPerPage, {
             textPerPage: textPerPage,
             perPageValue: perPageValue,
             perPageList: perPageList,

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

@@ -10,37 +10,39 @@ var mergedButtonGroupConfig = mergeConfig(buttonGroupConfig);
 var ButtonGroup = component(mergedButtonGroupConfig);
 export var PaginationRoot = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationRoot",
-    componentId: "sc-123175d4-0"
+    componentId: "sc-1fcff432-0"
 })([
     "display:flex;color:var(",
     ");&.",
-    "{display:flex;flex-direction:column;gap:0.5rem;}&.",
-    "{display:flex;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:wrap;}"
+    "{display:flex;flex-direction:column;gap:0.5rem;justify-content:flex-start;}&.",
+    "{width:100%;display:flex;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:nowrap;}"
 ], tokens.paginationColor, classes.compactType, classes.defaultType);
 export var PaginationPages = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationPages",
-    componentId: "sc-123175d4-1"
+    componentId: "sc-1fcff432-1"
 })([
-    "display:flex;align-items:center;gap:0.25rem;margin:0 auto;"
+    "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
 ]);
 export var PaginationActions = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationActions",
-    componentId: "sc-123175d4-2"
+    componentId: "sc-1fcff432-2"
 })([
-    "display:flex;justify-content:space-between;flex-grow:1;gap:0.625rem;&.",
+    "display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:0.5rem var(",
+    ");flex-shrink:1;&.",
+    "{flex-direction:row;width:100%;flex-wrap:wrap;}&.",
     "{flex-direction:row;}&.",
     "{flex-direction:row-reverse;}&.",
     "{flex-direction:row;}"
-], classes.compactType, classes.withHasPerPageSelect, classes.withHasQuickJump);
+], tokens.paginationHelperTextGap, classes.compactType, classes.defaultType, classes.withHasPerPageSelect, classes.withHasQuickJump);
 export var PaginationSection = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationSection",
-    componentId: "sc-123175d4-3"
+    componentId: "sc-1fcff432-3"
 })([
     "display:flex;gap:0.125rem;"
 ]);
 export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
     displayName: "Pagination.styles__PaginationButtonGroup",
-    componentId: "sc-123175d4-4"
+    componentId: "sc-1fcff432-4"
 })([
     "",
     ":var(",
@@ -82,7 +84,7 @@ export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
 ], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius);
 export var PaginationButton = styled(Button).withConfig({
     displayName: "Pagination.styles__PaginationButton",
-    componentId: "sc-123175d4-5"
+    componentId: "sc-1fcff432-5"
 })([
     "",
     ":var(",
@@ -148,10 +150,27 @@ export var PaginationButton = styled(Button).withConfig({
 }));
 export var PaginationShorter = styled(PaginationButton).withConfig({
     displayName: "Pagination.styles__PaginationShorter",
-    componentId: "sc-123175d4-6"
+    componentId: "sc-1fcff432-6"
 })([
     "",
     ":var(",
     ");",
     ":0;"
 ], buttonTokens.buttonWidth, tokens.buttonWidthShorter, buttonTokens.buttonPadding);
+export var PaginationActionsLeft = styled.div.withConfig({
+    displayName: "Pagination.styles__PaginationActionsLeft",
+    componentId: "sc-1fcff432-7"
+})([
+    "display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem var(",
+    ");.",
+    " &{min-width:0;flex-wrap:nowrap;flex-shrink:1;}"
+], tokens.paginationHelperTextGap, classes.defaultType);
+export var PaginationHelperText = styled.div.withConfig({
+    displayName: "Pagination.styles__PaginationHelperText",
+    componentId: "sc-1fcff432-8"
+})([
+    "color:var(",
+    ");&.",
+    "{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;}&.",
+    "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}"
+], tokens.paginationHelperTextColor, classes.defaultType, classes.ellipsisText);

package/styled-components/es/components/Pagination/Pagination.tokens.js

@@ -4,6 +4,7 @@ export var classes = {
     actions: 'pagination-actions',
     perPage: 'pagination-perpage-select',
     quickJump: 'pagination-quick-jump-page',
+    ellipsisText: 'pagination-ellipsis-text',
     selectWrapper: 'pagination-select-wrapper',
     defaultType: 'pagination-type-default',
     compactType: 'pagination-type-compact',
@@ -17,6 +18,8 @@ export var classes = {
 export var tokens = {
     paginationWidth: '--plasma-pagination-width',
     paginationColor: '--plasma-pagination-color',
+    paginationHelperTextColor: '--plasma-pagination-helper-text-color',
+    paginationHelperTextGap: '--plasma-pagination-helper-text-gap',
     buttonBackgroundColor: '--plasma-pagination-button-bg-color',
     buttonBackgroundColorHover: '--plasma-pagination-button-bg-color-hover',
     buttonBackgroundColorActive: '--plasma-pagination-button-bg-color-active',

package/styled-components/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js

@@ -2,9 +2,9 @@ import styled from "styled-components";
 import { tokens } from "../../Pagination.tokens";
 export var QuickJumpToPageRoot = styled.div.withConfig({
     displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageRoot",
-    componentId: "sc-baf7e727-0"
+    componentId: "sc-d437c7e1-0"
 })([
-    "display:flex;align-items:center;gap:0.5rem;font-family:var(",
+    "display:flex;align-items:center;gap:0.5rem;flex-shrink:0;font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
@@ -14,13 +14,13 @@ export var QuickJumpToPageRoot = styled.div.withConfig({
 ], tokens.paginationFontFamily, tokens.paginationFontSize, tokens.paginationFontStyle, tokens.paginationFontWeight, tokens.paginationLetterSpacing, tokens.paginationLineHeight);
 export var QuickJumpToPageTypography = styled.div.withConfig({
     displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageTypography",
-    componentId: "sc-baf7e727-1"
+    componentId: "sc-d437c7e1-1"
 })([
-    ""
+    "white-space:nowrap;"
 ]);
 export var QuickJumpToPageInput = styled.input.withConfig({
     displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageInput",
-    componentId: "sc-baf7e727-2"
+    componentId: "sc-d437c7e1-2"
 })([
     "background:var(",
     ");color:var(",

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/TextArea/TextArea.tokens.js

@@ -169,6 +169,5 @@ export var tokens = {
     tooltipArrowHeight: '--plasma-textarea__tooltip-arrow-height',
     tooltipArrowEdgeMargin: '--plasma-textarea__tooltip-arrow-edge-margin',
     tooltipArrowBackground: '--plasma-textarea__tooltip-arrow-background',
-    contentSlotRightOpacityReadOnly: '--plasma-textarea-right-content-opacity-readonly',
     tourBorderRadius: TOUR_BORDER_RADIUS_TOKEN
 };

package/styled-components/es/components/TextArea/variations/_read-only/base.js

@@ -1,11 +1,9 @@
 import { css } from "styled-components";
-import { StyledContainer, StyledContent, StyledHelpers, StyledTextArea, StyledTextAreaWrapper } from "../../TextArea.styles";
+import { StyledContainer, StyledHelpers, StyledTextArea, StyledTextAreaWrapper } from "../../TextArea.styles";
 import { classes, tokens } from "../../TextArea.tokens";
 export var base = css([
     "&[readonly]{",
     "{color:var(",
-    ");}",
-    "{opacity:var(",
     ");}&.",
     "{",
     "{&:before{background-color:var(",
@@ -22,4 +20,4 @@ export var base = css([
     ");border-radius:var(",
     ");opacity:var(",
     ");z-index:-1;}:hover{background:transparent;}}}}"
-], StyledTextArea, tokens.inputColorReadOnly, StyledContent, tokens.contentSlotRightOpacityReadOnly, classes.clear, StyledTextAreaWrapper, tokens.dividerColorReadOnly, classes.clear, StyledTextAreaWrapper, StyledHelpers, StyledTextAreaWrapper, tokens.borderSize, tokens.borderColorReadOnly, tokens.borderRadius, tokens.readOnlyOpacity, StyledContainer, tokens.backgroundColorReadOnly, tokens.borderRadius, tokens.readOnlyOpacity);
+], StyledTextArea, tokens.inputColorReadOnly, classes.clear, StyledTextAreaWrapper, tokens.dividerColorReadOnly, classes.clear, StyledTextAreaWrapper, StyledHelpers, StyledTextAreaWrapper, tokens.borderSize, tokens.borderColorReadOnly, tokens.borderRadius, tokens.readOnlyOpacity, StyledContainer, tokens.backgroundColorReadOnly, tokens.borderRadius, tokens.readOnlyOpacity);