@salutejs/plasma-new-hope 0.336.0-canary.2222.17612018746.0 → 0.336.0-canary.2224.17723650459.0

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

@@ -54,9 +54,8 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import React, { forwardRef, useMemo } from "react";
-import cls from "classnames";
 import { useForkRef } from "@salutejs/plasma-core";
-import { getSizeValueFromProp, safeUseId } from "../../utils";
+import { cx, getSizeValueFromProp, safeUseId } from "../../utils";
 import { usePopupContext } from "../Popup";
 import { Overlay } from "../Overlay";
 import { DEFAULT_Z_INDEX } from "../Popup/utils";
@@ -71,7 +70,7 @@ import { useDrawer } from "./hooks";
 // issue #823
 export var drawerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
-        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, animationInfo = _param.animationInfo, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
+        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
             "id",
             "zIndex",
             "popupInfo",
@@ -85,7 +84,6 @@ export var drawerRoot = function(Root) {
             "opened",
             "initialFocusRef",
             "focusAfterRef",
-            "animationInfo",
             "className",
             "customBackgroundColor",
             "customContentBackgroundColor",
@@ -135,11 +133,10 @@ export var drawerRoot = function(Root) {
                 onClose();
             }
         };
-        var _obj;
         return /*#__PURE__*/ React.createElement(StyledPopup, _object_spread({
             id: innerId,
             ref: asModal ? innerRef : outerRef,
-            className: cls(placementClass, className, (_obj = {}, _define_property(_obj, classes.enterCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter), _define_property(_obj, classes.exitCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit), _obj)),
+            className: cx(placementClass),
             opened: innerIsOpen,
             zIndex: zIndex,
             placement: placement,
@@ -149,7 +146,6 @@ export var drawerRoot = function(Root) {
             height: innerHeight,
             offset: offset,
             withAnimation: true,
-            drawerAnimationInfo: animationInfo,
             overlay: asModal && /*#__PURE__*/ React.createElement(Root, {
                 view: view
             }, /*#__PURE__*/ React.createElement(Overlay, {
@@ -162,7 +158,6 @@ export var drawerRoot = function(Root) {
                 onOverlayClick: onDrawerOverlayKeyDown
             }))
         }, rest), /*#__PURE__*/ React.createElement(Root, {
-            className: classes.panel,
             view: view,
             size: size,
             style: {
@@ -174,7 +169,8 @@ export var drawerRoot = function(Root) {
             width: innerWidth,
             height: innerHeight,
             customBackgroundColor: customBackgroundColor,
-            customContentBackgroundColor: customContentBackgroundColor
+            customContentBackgroundColor: customContentBackgroundColor,
+            className: className
         }, children)));
     });
 };

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { component, mergeConfig } from "../../engines";
 import { popupClasses, popupConfig } from "../Popup";
 import { panelTokens, panelConfig } from "../Panel";
-import { classes, privateTokens, tokens } from "./Drawer.tokens";
+import { classes, tokens } from "./Drawer.tokens";
 var mergedPanelConfig = mergeConfig(panelConfig);
 var Panel = component(mergedPanelConfig);
 var Popup = component(popupConfig);
@@ -59,7 +59,7 @@ var getAnimationStyles = function() {
 };
 export var StyledPanel = styled(Panel).withConfig({
     displayName: "Drawer.styles__StyledPanel",
-    componentId: "sc-5f1f6af-0"
+    componentId: "sc-7ba5c890-0"
 })([
     "",
     ":var(",
@@ -67,7 +67,7 @@ export var StyledPanel = styled(Panel).withConfig({
 ], panelTokens.closeColor, tokens.closeIconColor);
 export var StyledPopup = styled(Popup).withConfig({
     displayName: "Drawer.styles__StyledPopup",
-    componentId: "sc-5f1f6af-1"
+    componentId: "sc-7ba5c890-1"
 })([
     "&&.",
     "{animation:fadeIn 0.2s forwards;scrollbar-gutter:stable;}&&.",
@@ -77,21 +77,11 @@ export var StyledPopup = styled(Popup).withConfig({
     " > div{width:",
     ";height:",
     ";}",
-    " &.",
-    "{&& .",
-    "{animation:",
-    ";}}&.",
-    "{&&.",
-    " .",
-    "{animation:var(",
-    ");}}"
+    ""
 ], classes.overlay, popupClasses.endAnimation, classes.overlay, popupClasses.root, popupClasses.root, function(param) {
     var width = param.width;
     return width || 'auto';
 }, function(param) {
     var height = param.height;
     return height || 'auto';
-}, getAnimationStyles(), classes.enterCustomAnimation, popupClasses.root, function(param) {
-    var drawerAnimationInfo = param.drawerAnimationInfo;
-    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.enter) || "var(".concat(privateTokens.enterAnimation, ")");
-}, classes.exitCustomAnimation, popupClasses.endAnimation, popupClasses.root, privateTokens.customExitAnimation);
+}, getAnimationStyles());

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

@@ -3,9 +3,6 @@ export var classes = {
     header: 'drawer-header',
     footer: 'drawer-footer',
     overlay: 'drawer-overlay',
-    panel: 'drawer-panel',
-    enterCustomAnimation: 'drawer-enter-custom-animation',
-    exitCustomAnimation: 'drawer-exit-custom-animation',
     horizontal: 'drawer-horizontal',
     hasHeader: 'drawer-has-header',
     isRightClose: 'drawer-right-close-button',
@@ -14,12 +11,6 @@ export var classes = {
     rightPlacement: 'drawer-right-placement',
     leftPlacement: 'drawer-left-placement'
 };
-export var privateTokens = {
-    enterAnimation: '--plasma__private-drawer-enter-animation',
-    exitAnimation: '--plasma__private-drawer-exit-animation',
-    customEnterAnimation: '--plasma__private-drawer-custom-enter-animation',
-    customExitAnimation: '--plasma__private-drawer-custom-exit-animation'
-};
 export var tokens = {
     drawerOverlayWithBlurColor: '--plasma-drawer-overlay-with-blur-color',
     drawerOverlayColor: '--plasma-drawer-overlay-color',

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

@@ -131,7 +131,7 @@ import React, { useRef, useCallback, useEffect, useState, forwardRef, isValidEle
 import { usePopper } from "react-popper";
 import { useForkRef } from "@salutejs/plasma-core";
 import { useFocusTrap } from "../../hooks";
-import { cx } from "../../utils";
+import { cx, safeUseId } from "../../utils";
 import { Portal } from "../Portal";
 import { base as viewCSS } from "./variations/_view/base";
 import { StyledArrow, StyledPopover, StyledRoot, StyledWrapper } from "./Popover.styles";
@@ -176,6 +176,7 @@ export var POPOVER_PORTAL_ID = 'plasma-popover-root';
         var portalRef = useRef(null);
         var targetRef = useRef(null);
         var trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);
+        var uuid = safeUseId();
         var popoverForkRef = useForkRef(popoverRef, trapRef);
         var _useState = _sliced_to_array(useState(null), 2), arrowElement = _useState[0], setArrowElement = _useState[1];
         var _useState1 = _sliced_to_array(useState(false), 2), forceRender = _useState1[1];
@@ -326,8 +327,9 @@ export var POPOVER_PORTAL_ID = 'plasma-popover-root';
                 portal = rootRef.current;
             }
             if (!portal) {
+                var portalId = "".concat(POPOVER_PORTAL_ID, "-").concat(uuid);
                 portal = document.createElement('div');
-                portal.setAttribute('id', POPOVER_PORTAL_ID);
+                portal.setAttribute('id', portalId);
                 if (typeof frame === 'string' && frame !== 'document') {
                     var _document_getElementById;
                     (_document_getElementById = document.getElementById(frame)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.appendChild(portal);

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

@@ -199,7 +199,7 @@ import { Context } from "./Select.context";
             items
         ]);
         // Создаем структуры для быстрой работы с деревом
-        var _usePathMaps = _sliced_to_array(usePathMaps(transformedItems), 5), pathMap = _usePathMaps[0], focusedToValueMap = _usePathMaps[1], valueToCheckedMap = _usePathMaps[2], valueToItemMap = _usePathMaps[3], labelToItemMap = _usePathMaps[4];
+        var _usePathMaps = _sliced_to_array(usePathMaps(transformedItems), 4), pathMap = _usePathMaps[0], focusedToValueMap = _usePathMaps[1], valueToCheckedMap = _usePathMaps[2], valueToItemMap = _usePathMaps[3];
         var _useState = _sliced_to_array(useState(props.multiselect ? [] : ''), 2), internalValue = _useState[0], setInternalValue = _useState[1];
         var value = outerValue !== null && outerValue !== undefined ? outerValue : internalValue;
         var floatingPopoverRef = useRef(null);
@@ -287,14 +287,32 @@ import { Context } from "./Select.context";
                 return;
             }
             var checkedCopy = new Map(checked);
-            if (!checkedCopy.get(item.value)) {
-                checkedCopy.set(item.value, true);
-                updateDescendants(item, checkedCopy, true, valueToItemMap);
-            } else {
-                checkedCopy.set(item.value, false);
-                updateDescendants(item, checkedCopy, false);
+            switch(checkedCopy.get(item.value)){
+                // Если чекбокс в состоянии indeterminate
+                case 'indeterminate':
+                    {
+                        updateDescendants(item, checkedCopy, true, valueToItemMap);
+                        break;
+                    }
+                // Если чекбокс в состоянии checked
+                case true:
+                    {
+                        updateDescendants(item, checkedCopy, false, valueToItemMap);
+                        checkedCopy.set(item.value, false);
+                        break;
+                    }
+                // Если чекбокс в состоянии unchecked
+                case false:
+                    {
+                        updateDescendants(item, checkedCopy, true, valueToItemMap);
+                        checkedCopy.set(item.value, true);
+                        break;
+                    }
+                default:
+                    {
+                        break;
+                    }
             }
-            updateAncestors(item, checkedCopy);
             var newValues = [];
             valueToItemMap.forEach(function(item, key) {
                 if (checkedCopy.get(key)) {
@@ -485,7 +503,6 @@ import { Context } from "./Select.context";
                     activeDescendantItemValue: activeDescendantItemValue,
                     isTargetAmount: isTargetAmount,
                     onChange: onChange,
-                    labelToItemMap: labelToItemMap,
                     chipView: chipView,
                     separator: separator,
                     requiredProps: requiredProps,

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

@@ -5,18 +5,16 @@ export var usePathMaps = function(items) {
     var focusedToValueMap = new Map();
     var valueToCheckedMap = new Map();
     var valueToItemMap = new Map();
-    var labelToItemMap = new Map();
     pathMap.set('root', (items === null || items === void 0 ? void 0 : items.length) || 0);
     var rec = function(items) {
         var prevIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : '';
         items === null || items === void 0 ? void 0 : items.forEach(function(item, index) {
-            var value = item.value, label = item.label, innerItems = item.items;
+            var value = item.value, innerItems = item.items;
             var currIndex = "".concat(prevIndex, "/").concat(index).replace(/^(\/)/, '');
             focusedToValueMap.set(currIndex, item);
             valueToCheckedMap.set(value, false);
             if (isEmpty(innerItems) || !innerItems) {
                 valueToItemMap.set(value, item);
-                labelToItemMap.set(label, item);
             } else {
                 pathMap.set(value, innerItems.length);
                 rec(innerItems, currIndex);
@@ -28,7 +26,6 @@ export var usePathMaps = function(items) {
         pathMap,
         focusedToValueMap,
         valueToCheckedMap,
-        valueToItemMap,
-        labelToItemMap
+        valueToItemMap
     ];
 };

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
 import { Button, Textfield } from "./ui";
 export var Target = /*#__PURE__*/ forwardRef(function(param, ref) {
-    var value = param.value, opened = param.opened, valueToItemMap = param.valueToItemMap, label = param.label, placeholder = param.placeholder, onKeyDown = param.onKeyDown, labelPlacement = param.labelPlacement, size = param.size, contentLeft = param.contentLeft, disabled = param.disabled, readOnly = param.readOnly, renderValue = param.renderValue, selectProps = param.selectProps, inputWrapperRef = param.inputWrapperRef, multiselect = param.multiselect, view = param.view, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, isTargetAmount = param.isTargetAmount, onChange = param.onChange, labelToItemMap = param.labelToItemMap, chipView = param.chipView, separator = param.separator, requiredProps = param.requiredProps, hintProps = param.hintProps;
+    var value = param.value, opened = param.opened, valueToItemMap = param.valueToItemMap, label = param.label, placeholder = param.placeholder, onKeyDown = param.onKeyDown, labelPlacement = param.labelPlacement, size = param.size, contentLeft = param.contentLeft, disabled = param.disabled, readOnly = param.readOnly, renderValue = param.renderValue, selectProps = param.selectProps, inputWrapperRef = param.inputWrapperRef, multiselect = param.multiselect, view = param.view, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, isTargetAmount = param.isTargetAmount, onChange = param.onChange, chipView = param.chipView, separator = param.separator, requiredProps = param.requiredProps, hintProps = param.hintProps;
     var buttonRef = useForkRef(ref, inputWrapperRef);
     if (selectProps.renderTarget) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -47,7 +47,6 @@ export var Target = /*#__PURE__*/ forwardRef(function(param, ref) {
         valueToItemMap: valueToItemMap,
         renderValue: renderValue,
         onChange: onChange,
-        labelToItemMap: labelToItemMap,
         chipView: chipView,
         requiredProps: requiredProps,
         hintProps: hintProps,

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -1,11 +1,3 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -26,12 +18,6 @@ function _instanceof(left, right) {
         return left instanceof right;
     }
 }
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -71,23 +57,12 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    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 } from "react";
-import { sizeToIconSize, getItemId, getRemovedElement } from "../../../../utils";
+import { sizeToIconSize, getItemId } from "../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { IconArrowWrapper, StyledArrow, StyledTextField, StyledLeftHelper } from "./Textfield.styles";
 export var Textfield = /*#__PURE__*/ forwardRef(function(param, ref) {
-    var inputWrapperRef = param.inputWrapperRef, opened = param.opened, multiselect = param.multiselect, value = param.value, label = param.label, labelPlacement = param.labelPlacement, keepPlaceholder = param.keepPlaceholder, placeholder = param.placeholder, onKeyDown = param.onKeyDown, size = param.size, view = param.view, contentLeft = param.contentLeft, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, disabled = param.disabled, readOnly = param.readOnly, isTargetAmount = param.isTargetAmount, valueToItemMap = param.valueToItemMap, renderValue = param.renderValue, onChange = param.onChange, labelToItemMap = param.labelToItemMap, chipView = param.chipView, requiredProps = param.requiredProps, chipType = param.chipType, hintProps = param.hintProps;
+    var inputWrapperRef = param.inputWrapperRef, opened = param.opened, multiselect = param.multiselect, value = param.value, label = param.label, labelPlacement = param.labelPlacement, keepPlaceholder = param.keepPlaceholder, placeholder = param.placeholder, onKeyDown = param.onKeyDown, size = param.size, view = param.view, contentLeft = param.contentLeft, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, disabled = param.disabled, readOnly = param.readOnly, isTargetAmount = param.isTargetAmount, valueToItemMap = param.valueToItemMap, renderValue = param.renderValue, onChange = param.onChange, chipView = param.chipView, requiredProps = param.requiredProps, chipType = param.chipType, hintProps = param.hintProps;
     var withArrowInverse = opened ? classes.arrowInverse : undefined;
     var getValue = function() {
         var _valueToItemMap_get;
@@ -107,58 +82,44 @@ export var Textfield = /*#__PURE__*/ forwardRef(function(param, ref) {
             if (value.length === 0) return [];
             if (isTargetAmount) {
                 return [
-                    "Выбрано ".concat(value.length)
+                    {
+                        value: '_removeAll',
+                        label: "Выбрано ".concat(value.length),
+                        disabled: value.every(function(val) {
+                            var _valueToItemMap_get;
+                            return valueToItemMap === null || valueToItemMap === void 0 ? void 0 : (_valueToItemMap_get = valueToItemMap.get(val)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.disabled;
+                        })
+                    }
                 ];
             }
-            var renderValueMapper = renderValue && function(stringValue) {
-                return renderValue(valueToItemMap.get(stringValue) || {
-                    value: stringValue,
-                    label: stringValue.toString()
-                });
-            };
-            var valueToItemMapper = function(stringValue) {
-                var _valueToItemMap_get;
-                return ((_valueToItemMap_get = valueToItemMap.get(stringValue)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || stringValue.toString();
-            };
-            return value.map(renderValueMapper || valueToItemMapper);
+            return value.map(function(value) {
+                var _valueToItemMap_get, _valueToItemMap_get1;
+                var currentLabel = renderValue ? renderValue(valueToItemMap.get(value) || {
+                    value: value,
+                    label: value.toString()
+                }) : ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value.toString();
+                return {
+                    value: value,
+                    label: currentLabel,
+                    disabled: ((_valueToItemMap_get1 = valueToItemMap.get(value)) === null || _valueToItemMap_get1 === void 0 ? void 0 : _valueToItemMap_get1.disabled) || false
+                };
+            });
         }
         return [];
     };
     // Обработчик чипов
-    var handleChipsChange = function(chipLabels) {
+    var handleChipClick = function(chip) {
         if (!Array.isArray(value)) return;
-        // TODO: #1564
-        // Из лейблов чипов получаем value у item и далее прокидываем его в onChange.
-        if (renderValue && !isTargetAmount) {
-            var resultValues = _to_consumable_array(value);
-            value.forEach(function(_, index) {
+        if (isTargetAmount) {
+            // При закрытии чипа в режиме isTargetAmount в value оставляем только disabled-элементы
+            onChange(value.filter(function(val) {
                 var _valueToItemMap_get;
-                var stringValue = value[index];
-                var label = (_valueToItemMap_get = valueToItemMap.get(stringValue)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label;
-                var labelAfterRenderValue = renderValue(label ? labelToItemMap.get(label) : {
-                    value: stringValue,
-                    label: stringValue.toString()
-                });
-                if (!chipLabels.includes(labelAfterRenderValue)) {
-                    resultValues.splice(index, 1);
-                }
-            });
-            var removedItemValue = getRemovedElement(value, resultValues, isTargetAmount);
-            onChange(resultValues, removedItemValue ? valueToItemMap.get(removedItemValue) || {
-                value: removedItemValue,
-                label: removedItemValue.toString()
-            } : null);
+                return valueToItemMap === null || valueToItemMap === void 0 ? void 0 : (_valueToItemMap_get = valueToItemMap.get(val)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.disabled;
+            }));
         } else {
-            var newValues = chipLabels.map(function(chipLabel) {
-                var _labelToItemMap_get;
-                return ((_labelToItemMap_get = labelToItemMap.get(chipLabel)) === null || _labelToItemMap_get === void 0 ? void 0 : _labelToItemMap_get.value) || chipLabel;
-            });
-            var removedItemValue1 = getRemovedElement(value, newValues, isTargetAmount);
-            var item = removedItemValue1 ? valueToItemMap.get(removedItemValue1) || {
-                value: removedItemValue1,
-                label: removedItemValue1.toString()
-            } : null;
-            onChange(newValues, item);
+            onChange(value.filter(function(val) {
+                return val !== chip.value;
+            }), valueToItemMap.get(chip.value) || null);
         }
     };
     var helperTextStopPropagation = function(event) {
@@ -197,8 +158,8 @@ export var Textfield = /*#__PURE__*/ forwardRef(function(param, ref) {
         "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : ''
     }, multiselect ? {
         enumerationType: 'chip',
-        chips: getChips(),
-        onChangeChips: handleChipsChange,
+        _chips: getChips(),
+        _onChipClick: handleChipClick,
         chipType: chipType,
         chipView: chipView
     } : {

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

@@ -9,4 +9,3 @@ export { getView } from "./getView";
 export { getPlacement } from "./getPlacement";
 export { getFallbackPlacements } from "./getFallbackPlacements";
 export { getItemId } from "./getItemId";
-export { getRemovedElement } from "./getRemovedElement";

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

@@ -88,7 +88,7 @@ import { StyledContent, StyledDescription, StyledInput, StyledLabel, StyledTrigg
 import { classes } from "./Switch.tokens";
 export var switchRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var size = props.size, toggleSize = props.toggleSize, view = props.view, focused = props.focused, outlined = props.outlined, disabled = props.disabled, labelPosition = props.labelPosition, label = props.label, description = props.description, id = props.id, style = props.style, className = props.className, // singleLine,
+        var size = props.size, toggleSize = props.toggleSize, view = props.view, focused = props.focused, outlined = props.outlined, disabled = props.disabled, labelPosition = props.labelPosition, label = props.label, description = props.description, _props_singleLine = props.singleLine, singleLine = _props_singleLine === void 0 ? true : _props_singleLine, id = props.id, style = props.style, className = props.className, // singleLine,
         checked = props.checked, pressed = props.pressed, defaultChecked = props.defaultChecked, rest = _object_without_properties(props, [
             "size",
             "toggleSize",
@@ -99,6 +99,7 @@ export var switchRoot = function(Root) {
             "labelPosition",
             "label",
             "description",
+            "singleLine",
             "id",
             "style",
             "className",
@@ -128,7 +129,8 @@ export var switchRoot = function(Root) {
             defaultChecked: defaultChecked,
             disabled: disabled
         })), /*#__PURE__*/ React.createElement(StyledLabel, {
-            tabIndex: -1
+            tabIndex: -1,
+            className: singleLine ? classes.singleLine : ''
         }, label), /*#__PURE__*/ React.createElement(StyledTrigger, {
             "aria-hidden": true
         })), description && /*#__PURE__*/ React.createElement(StyledDescription, null, description));

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

@@ -8,7 +8,7 @@ export var base = css([
 ], tokens.verticalGap);
 export var StyledContent = styled.div.withConfig({
     displayName: "Switch.styles__StyledContent",
-    componentId: "sc-c4704e70-0"
+    componentId: "sc-6da706dd-0"
 })([
     "width:100%;position:relative;display:flex;align-items:center;&.",
     "{justify-content:space-between;",
@@ -20,7 +20,7 @@ export var StyledContent = styled.div.withConfig({
 ], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
 export var StyledDescription = styled.div.withConfig({
     displayName: "Switch.styles__StyledDescription",
-    componentId: "sc-c4704e70-1"
+    componentId: "sc-6da706dd-1"
 })([
     "position:relative;",
     " display:-webkit-box;line-clamp:var(",
@@ -29,20 +29,21 @@ export var StyledDescription = styled.div.withConfig({
 ], applyEllipsis(), tokens.descriptionMaxLines, tokens.descriptionMaxLines);
 export var StyledInput = styled.input.withConfig({
     displayName: "Switch.styles__StyledInput",
-    componentId: "sc-c4704e70-2"
+    componentId: "sc-6da706dd-2"
 })([
     "position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"
 ]);
 export var StyledLabel = styled.span.withConfig({
     displayName: "Switch.styles__StyledLabel",
-    componentId: "sc-c4704e70-3"
+    componentId: "sc-6da706dd-3"
 })([
-    "user-select:none;",
-    ""
-], applyEllipsis());
+    "user-select:none;&.",
+    "{",
+    "}"
+], classes.singleLine, applyEllipsis());
 export var StyledTrigger = styled.div.withConfig({
     displayName: "Switch.styles__StyledTrigger",
-    componentId: "sc-c4704e70-4"
+    componentId: "sc-6da706dd-4"
 })([
     "position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}",
     ":checked ~ &::after{right:0;left:auto;}"

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

@@ -46,5 +46,6 @@ export var tokens = {
 };
 export var classes = {
     beforeSwitchLabelPosition: 'switch-label-position-before',
-    afterSwitchLabelPosition: 'switch-label-position-after'
+    afterSwitchLabelPosition: 'switch-label-position-after',
+    singleLine: 'switch-single-line'
 };

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

@@ -115,7 +115,7 @@ import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base as chipViewCSS } from "./variations/_chip-view/base";
 import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper, StyledContentRightWrapper } from "./TextField.styles";
 import { classes } from "./TextField.tokens";
-import { TextFieldChip } from "./ui";
+import { TextFieldChip, TextFieldChipNew } from "./ui";
 import { useKeyNavigation } from "./hooks";
 import { HintComponent } from "./ui/Hint/Hint";
 import { getInputWidth } from "./getInputWidth";
@@ -133,7 +133,9 @@ export var textFieldRoot = function(Root) {
         contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
         hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
         view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, hasDivider = _param.hasDivider, // controlled
-        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // events
+        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
+        _chips = _param._chips, // @ts-ignore
+        _onChipClick = _param._onChipClick, // events
         onChange = _param.onChange, onChangeChips = _param.onChangeChips, onSearch = _param.onSearch, onKeyDown = _param.onKeyDown, onFocus = _param.onFocus, onBlur = _param.onBlur, onPaste = _param.onPaste, // Пропсы для внутреннего использования, не отдается наружу.
         // @ts-ignore
         _onEnterDisabled = _param._onEnterDisabled, // @ts-ignore
@@ -178,6 +180,8 @@ export var textFieldRoot = function(Root) {
             "value",
             "chips",
             "chipType",
+            "_chips",
+            "_onChipClick",
             "onChange",
             "onChangeChips",
             "onSearch",
@@ -209,7 +213,7 @@ export var textFieldRoot = function(Root) {
         var helperTextId = safeUseId();
         var isDefaultView = view === 'default' || readOnly || disabled;
         var isChipEnumeration = enumerationType === 'chip';
-        var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
+        var isChipsVisible = isChipEnumeration && Boolean((chips === null || chips === void 0 ? void 0 : chips.length) || (_chips === null || _chips === void 0 ? void 0 : _chips.length));
         var withHasChips = isChipsVisible ? classes.hasChips : undefined;
         var hasLabelValue = Boolean(label);
         var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
@@ -464,7 +468,19 @@ export var textFieldRoot = function(Root) {
             ref: contentRef,
             onKeyDown: handleContentKeyDown,
             className: withHasChips
-        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ React.createElement(StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ React.createElement(StyledChips, {
+        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ React.createElement(StyledTextBefore, null, textBefore), Boolean(_chips === null || _chips === void 0 ? void 0 : _chips.length) && /*#__PURE__*/ React.createElement(TextFieldChipNew, {
+            chips: _chips,
+            onChipClick: _onChipClick,
+            getRef: getRef,
+            handleChipKeyDown: handleChipKeyDown,
+            onChipClear: onChipClear,
+            view: chipView || view,
+            readOnly: readOnly,
+            chipType: chipType,
+            // TODO: #1547
+            // @ts-ignore
+            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+        }), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ React.createElement(StyledChips, {
             className: classes.chipsWrapper
         }, chips === null || chips === void 0 ? void 0 : chips.map(function(param, index) {
             var chipId = param.id, text = param.text;