@salutejs/plasma-new-hope 0.335.1-canary.2207.17463055710.0 → 0.335.1-canary.2209.17629577358.0

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/engines/common.js

@@ -99,10 +99,23 @@ 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);
+}
 function component(config) {
     var Comp = config.layout((0, _styledcomponents._component)(config));
     return /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
-        return /*#__PURE__*/ _react.default.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.default.createElement(Comp, _object_spread_props(_object_spread({}, mergedProps), {
             ref: ref
         }));
     });

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

@@ -13,7 +13,8 @@ var _Avatartokens = require("../../../components/Avatar/Avatar.tokens");
 var config = {
     defaults: {
         view: 'default',
-        size: 'xxl'
+        size: 'xxl',
+        shape: 'circled'
     },
     variations: {
         view: {
@@ -34,6 +35,7 @@ var config = {
                 ":600;",
                 ":2rem;",
                 ":0.75rem;",
+                ":1.25rem;",
                 ":0.5rem;",
                 ":1.75rem;",
                 ":0 0.6875rem;",
@@ -58,7 +60,7 @@ var config = {
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
                 ":var(--plasma-typo-body-s-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             l: (0, _styledcomponents.css)([
                 "",
                 ":3rem;",
@@ -66,6 +68,7 @@ var config = {
                 ":600;",
                 ":1.25rem;",
                 ":0.5rem;",
+                ":0.75rem;",
                 ":2;",
                 ":0.375rem;",
                 ":1.25rem;",
@@ -91,7 +94,7 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             m: (0, _styledcomponents.css)([
                 "",
                 ":2.25rem;",
@@ -99,6 +102,7 @@ var config = {
                 ":600;",
                 ":0.875rem;",
                 ":0.5rem;",
+                ":0.625rem;",
                 ":2;",
                 ":0.25rem;",
                 ":1rem;",
@@ -124,7 +128,7 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             s: (0, _styledcomponents.css)([
                 "",
                 ":1.5rem;",
@@ -132,6 +136,7 @@ var config = {
                 ":600;",
                 ":0.5rem;",
                 ":0.375rem;",
+                ":0.5rem;",
                 ":1;",
                 ":1rem;",
                 ":0.75rem;",
@@ -142,15 +147,16 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             fit: (0, _styledcomponents.css)([
                 "",
                 ":100%;",
                 ":0;",
                 ":0;",
                 ":0;",
-                ":0;"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize)
+                ":0;",
+                ":50%;"
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius)
         },
         focused: {
             true: (0, _styledcomponents.css)([
@@ -160,6 +166,27 @@ var config = {
                 ":var(--surface-accent);"
             ], _Avatartokens.tokens.outlineSize, _Avatartokens.tokens.outlineOffset, _Avatartokens.tokens.outlineColor)
         },
+        shape: {
+            circled: (0, _styledcomponents.css)([
+                "",
+                ":50%;",
+                ":calc(0.867 * var(",
+                ") - var(",
+                ") / 2);",
+                ":calc(0.867 * var(",
+                ") - var(",
+                ") / 2);"
+            ], _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.statusLeft, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.statusTop, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize),
+            rounded: (0, _styledcomponents.css)([
+                "",
+                ":calc(var(",
+                ") - var(",
+                "));",
+                ":calc(var(",
+                ") - var(",
+                "));"
+            ], _Avatartokens.tokens.statusLeft, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.statusTop, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize)
+        },
         badgeView: {
             default: (0, _styledcomponents.css)([
                 "",

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

@@ -84,8 +84,9 @@ import { cx } from "../../utils";
 import { indicatorConfig, indicatorTokens } from "../Indicator";
 import { classes, tokens } from "./Avatar.tokens";
 import { base, Wrapper, Image, StatusIcon, Text, ExtraContent, ExtraCounter, ExtraBadge } from "./Avatar.styles";
-import { base as viewCSS } from "./variations/_size/base";
+import { base as sizeCSS } from "./variations/_size/base";
 import { base as focusedCSS } from "./variations/_focused/base";
+import { base as shapeCSS } from "./variations/_shape/base";
 import { extraPlacementMap, getInitialsForName } from "./utils";
 var StatusLabelsDefault = {
     active: 'Активен',
@@ -117,7 +118,7 @@ var mergedConfig = mergeConfig(indicatorConfig);
 var Indicator = component(mergedConfig);
 var StyledIndicator = styled(Indicator).withConfig({
     displayName: "Avatar__StyledIndicator",
-    componentId: "sc-7036ad13-0"
+    componentId: "sc-76e2f30f-0"
 })([
     "",
     ":var(",
@@ -130,7 +131,7 @@ var StyledIndicator = styled(Indicator).withConfig({
 });
 export var avatarRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var avatarSize = props.size, name = props.name, url = props.url, customText = props.customText, status = props.status, className = props.className, _props_focused = props.focused, focused = _props_focused === void 0 ? true : _props_focused, isScalable = props.isScalable, _props_statusLabels = props.statusLabels, statusLabels = _props_statusLabels === void 0 ? StatusLabelsDefault : _props_statusLabels, hasExtra = props.hasExtra, extraPlacement = props.extraPlacement, type = props.type, counterView = props.counterView, count = props.count, maxCount = props.maxCount, badgeView = props.badgeView, text = props.text, customColor = props.customColor, customBackgroundColor = props.customBackgroundColor, contentLeft = props.contentLeft, contentRight = props.contentRight, pilled = props.pilled, rest = _object_without_properties(props, [
+        var avatarSize = props.size, name = props.name, url = props.url, customText = props.customText, status = props.status, className = props.className, _props_focused = props.focused, focused = _props_focused === void 0 ? true : _props_focused, isScalable = props.isScalable, shape = props.shape, _props_statusLabels = props.statusLabels, statusLabels = _props_statusLabels === void 0 ? StatusLabelsDefault : _props_statusLabels, hasExtra = props.hasExtra, extraPlacement = props.extraPlacement, type = props.type, counterView = props.counterView, count = props.count, maxCount = props.maxCount, badgeView = props.badgeView, text = props.text, customColor = props.customColor, customBackgroundColor = props.customBackgroundColor, contentLeft = props.contentLeft, contentRight = props.contentRight, pilled = props.pilled, rest = _object_without_properties(props, [
             "size",
             "name",
             "url",
@@ -139,6 +140,7 @@ export var avatarRoot = function(Root) {
             "className",
             "focused",
             "isScalable",
+            "shape",
             "statusLabels",
             "hasExtra",
             "extraPlacement",
@@ -171,6 +173,7 @@ export var avatarRoot = function(Root) {
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             size: avatarSize,
+            shape: shape,
             className: cx(classes.avatarItem, className),
             "aria-label": ariaLabel,
             focused: focused
@@ -211,13 +214,17 @@ export var avatarConfig = {
     base: base,
     variations: {
         size: {
-            css: viewCSS
+            css: sizeCSS
         },
         focused: {
             css: focusedCSS
+        },
+        shape: {
+            css: shapeCSS
         }
     },
     defaults: {
-        size: 'm'
+        size: 'm',
+        shape: 'circled'
     }
 };

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

@@ -13,9 +13,9 @@ export var base = css([
 ]);
 export var Wrapper = styled.div.withConfig({
     displayName: "Avatar.styles__Wrapper",
-    componentId: "sc-5ac342c-0"
+    componentId: "sc-86d30134-0"
 })([
-    "display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;background:var(",
+    "display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(",
     ");overflow:hidden;&:hover{scale:",
     ";cursor:",
     ";}"
@@ -28,23 +28,19 @@ export var Wrapper = styled.div.withConfig({
 });
 export var StatusIcon = styled.div.withConfig({
     displayName: "Avatar.styles__StatusIcon",
-    componentId: "sc-5ac342c-1"
+    componentId: "sc-86d30134-1"
 })([
-    "position:absolute;top:calc(1.02 * 0.85 * var(",
-    ") - var(",
-    ") / 2);left:calc(1.02 * 0.85 * var(",
-    ") - var(",
-    ") / 2);"
-], tokens.avatarSize, tokens.statusIconSize, tokens.avatarSize, tokens.statusIconSize);
+    "position:absolute;"
+]);
 export var Image = styled.img.withConfig({
     displayName: "Avatar.styles__Image",
-    componentId: "sc-5ac342c-2"
+    componentId: "sc-86d30134-2"
 })([
-    "width:100%;height:100%;border-radius:50%;"
+    "width:100%;height:100%;"
 ]);
 export var Text = styled.span.withConfig({
     displayName: "Avatar.styles__Text",
-    componentId: "sc-5ac342c-3"
+    componentId: "sc-86d30134-3"
 })([
     "font-size:var(",
     ");font-family:var(",
@@ -56,7 +52,7 @@ export var Text = styled.span.withConfig({
 ], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
 export var ExtraContent = styled.div.withConfig({
     displayName: "Avatar.styles__ExtraContent",
-    componentId: "sc-5ac342c-4"
+    componentId: "sc-86d30134-4"
 })([
     "max-width:100%;display:flex;position:absolute;z-index:2;&.",
     "{top:calc(-0.063rem * var(",
@@ -74,7 +70,7 @@ export var ExtraContent = styled.div.withConfig({
 ], classes.extraPlacementTopLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementTopRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor);
 export var ExtraBadge = styled(Badge).withConfig({
     displayName: "Avatar.styles__ExtraBadge",
-    componentId: "sc-5ac342c-5"
+    componentId: "sc-86d30134-5"
 })([
     "",
     ":var(",
@@ -122,7 +118,7 @@ export var ExtraBadge = styled(Badge).withConfig({
 ], badgeTokens.background, tokens.badgeBackground, badgeTokens.color, tokens.badgeColor, badgeTokens.backgroundTransparent, tokens.badgeBackgroundTransparent, badgeTokens.colorTransparent, tokens.badgeColorTransparent, badgeTokens.colorClear, tokens.badgeColorClear, badgeTokens.backgroundClear, tokens.badgeBackgroundClear, badgeTokens.borderRadius, tokens.badgeBorderRadius, badgeTokens.pilledBorderRadius, tokens.badgePilledBorderRadius, badgeTokens.height, tokens.badgeHeight, badgeTokens.padding, tokens.badgePadding, badgeTokens.paddingIconOnly, tokens.badgePaddingIconOnly, badgeTokens.fontFamily, tokens.badgeFontFamily, badgeTokens.fontSize, tokens.badgeFontSize, badgeTokens.fontStyle, tokens.badgeFontStyle, badgeTokens.fontWeight, tokens.badgeFontWeight, badgeTokens.letterSpacing, tokens.badgeLetterSpacing, badgeTokens.lineHeight, tokens.badgeLineHeight, badgeTokens.leftContentMarginLeft, tokens.badgeLeftContentMarginLeft, badgeTokens.leftContentMarginRight, tokens.badgeLeftContentMarginRight, badgeTokens.rightContentMarginLeft, tokens.badgeRightContentMarginLeft, badgeTokens.rightContentMarginRight, tokens.badgeRightContentMarginRight);
 export var ExtraCounter = styled(Counter).withConfig({
     displayName: "Avatar.styles__ExtraCounter",
-    componentId: "sc-5ac342c-6"
+    componentId: "sc-86d30134-6"
 })([
     "",
     ":var(",

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

@@ -21,6 +21,9 @@ export var tokens = {
     outlineOffset: '--plasma-avatar-outline-offset',
     scaleHover: '--plasma-avatar-scale-hover',
     extraPlacementFactor: '--plasma-avatar-extra-placement-factor',
+    borderRadius: '--plasma-avatar-border-radius',
+    statusLeft: '--plasma-avatar-status-left',
+    statusTop: '--plasma-avatar-status-top',
     // extra badge tokens
     badgeBackground: '--plasma-avatar-extra-badge-background',
     badgeColor: '--plasma-avatar-extra-badge-color',

package/styled-components/es/components/Avatar/variations/_shape/base.js

@@ -0,0 +1,13 @@
+import { css } from "styled-components";
+import { tokens } from "../../Avatar.tokens";
+import { Image, Wrapper, StatusIcon } from "../../Avatar.styles";
+export var base = css([
+    "",
+    "{border-radius:var(",
+    ");}",
+    "{border-radius:var(",
+    ");}",
+    "{top:var(",
+    ");left:var(",
+    ");}"
+], Image, tokens.borderRadius, Wrapper, tokens.borderRadius, StatusIcon, tokens.statusTop, tokens.statusLeft);

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

@@ -161,7 +161,7 @@ import { Context } from "./Combobox.context";
  */ export var comboboxRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
         var _getItemByFocused;
-        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, // @ts-ignore
+        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, // @ts-ignore
         _offset = props._offset, rest = _object_without_properties(props, [
             "name",
             "multiple",
@@ -205,6 +205,7 @@ import { Context } from "./Combobox.context";
             "onChangeValue",
             "onScroll",
             "onToggle",
+            "mode",
             "_offset"
         ]);
         var transformedItems = useMemo(function() {
@@ -225,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() {
             return filterItems(transformedItems, textValue, getTextValue(multiple, value, valueToItemMap, renderValue), filter);
         }, [
@@ -285,22 +287,10 @@ import { Context } from "./Combobox.context";
                 setInternalValue(newValue);
             }
         };
-        var handleClickArrow = function() {
-            if (disabled || readOnly) {
-                return;
-            }
-            if (isCurrentListOpen) {
-                dispatchPath({
-                    type: 'reset'
-                });
-            } else {
-                dispatchPath({
-                    type: 'opened_first_level'
-                });
-            }
-            dispatchFocusedPath({
-                type: 'reset'
-            });
+        var handleClickArrow = function(e) {
+            handleListToggle(!isCurrentListOpen);
+            // При клике на иконку закрытия фокус не должен становиться в инпут.
+            e.stopPropagation();
         };
         // Обработчик изменения значения в инпуте
         var handleTextValueChange = function(e) {
@@ -433,10 +423,20 @@ import { Context } from "./Combobox.context";
                     type: 'reset'
                 });
             }
+            // Закрываем список, если элемент уже выбран.
+            if (mode === 'radio' && isCurrentChecked) {
+                return;
+            }
             if (onChange) {
                 onChange(isCurrentChecked ? '' : item.value, item);
             }
         };
+        // Обработчик клика на таргет
+        var handleTargetClick = function() {
+            if (!isCurrentListOpen) {
+                handleListToggle(true);
+            }
+        };
         var getChips = function() {
             if (multiple && Array.isArray(value)) {
                 if (value.length === 0) return [];
@@ -569,13 +569,14 @@ import { Context } from "./Combobox.context";
         }, /*#__PURE__*/ React.createElement(FloatingPopover, {
             ref: floatingPopoverRef,
             opened: isCurrentListOpen,
-            onToggle: handleListToggle,
             placement: placement,
             portal: portal,
             listWidth: listWidth,
             offset: _offset,
             target: function(referenceRef) {
-                return /*#__PURE__*/ React.createElement(StyledTextField, _object_spread_props(_object_spread({
+                return /*#__PURE__*/ React.createElement("div", {
+                    onClick: handleTargetClick
+                }, /*#__PURE__*/ React.createElement(StyledTextField, _object_spread_props(_object_spread({
                     ref: name ? inputRef : inputForkRef,
                     inputWrapperRef: referenceRef,
                     value: textValue,
@@ -589,7 +590,8 @@ import { Context } from "./Combobox.context";
                     contentLeft: contentLeft,
                     contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, {
                         disabled: disabled,
-                        onClick: handleClickArrow
+                        onClick: handleClickArrow,
+                        className: classes.comboboxTargetArrow
                     }, /*#__PURE__*/ React.createElement(StyledArrow, {
                         color: "inherit",
                         size: sizeToIconSize(size),
@@ -616,7 +618,7 @@ import { Context } from "./Combobox.context";
                     enumerationType: 'plain'
                 }, rest), {
                     _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
-                }));
+                })));
             },
             zIndex: zIndex,
             isInner: false
@@ -628,6 +630,7 @@ import { Context } from "./Combobox.context";
             readOnly: readOnly,
             name: name
         }, /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
             role: "tree",
@@ -636,7 +639,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,
@@ -658,7 +660,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-21c5f0bf-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -25,10 +25,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: "Combobox.styles__Ul",
-    componentId: "sc-7fefedf8-1"
+    componentId: "sc-21c5f0bf-1"
 })([
     "max-height:",
-    ";overflow-y:",
+    ";overflow-x:hidden;overflow-y:",
     ";border-radius:calc(var(",
     ") - 0.125rem - var(",
     ",0rem));margin:0;padding:0;.",
@@ -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-21c5f0bf-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-21c5f0bf-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-21c5f0bf-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-21c5f0bf-5"
 })([
     "margin:0;padding:0;"
 ]);

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

@@ -2,7 +2,7 @@ export var classes = {
     dropdownItemIsFocused: 'dropdown-item-is-focused',
     dropdownItemIsDisabled: 'dropdown-item-is-disabled',
     dropdownItemIsActive: 'dropdown-item-is-active',
-    selectTargetArrow: 'combobox-target-arrow',
+    comboboxTargetArrow: 'combobox-target-arrow',
     arrowInverse: 'arrow-inverse',
     textfieldTarget: 'combobox-textfield-target',
     selectChipIsFocused: 'combobox-chip-is-focused',

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

@@ -159,13 +159,9 @@ export var useKeyNavigation = function(param) {
             case keys.Tab:
             case keys.Escape:
                 {
-                    dispatchPath({
-                        type: 'reset'
-                    });
-                    dispatchFocusedPath({
-                        type: 'reset'
-                    });
-                    handleListToggle(false);
+                    if (path[0]) {
+                        handleListToggle(false);
+                    }
                     if (multiple) {
                         setTextValue('');
                     } else if (textValue !== value) {