@salutejs/plasma-new-hope 0.326.0-canary.1973.15344107057.0 → 0.326.0-canary.1973.15492799823.0

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

@@ -22,7 +22,7 @@ import cls from 'classnames';
 import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
-import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
+import { getCodeInputViewClass, getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
 import { classes } from "./CodeInput.tokens";
 import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator, ItemWrapper, ItemCircle } from "./CodeInput.styles";
 import { base as viewCSS } from "./variations/_view/base";
@@ -73,7 +73,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
     var fieldPattern = getFieldPattern(allowedSymbols);
     var placeholderValue = getPlaceholderValue(codeLength, placeholder);
     var parts = codeLength === 6 ? 2 : 1;
-    var screenClass = classes["".concat(screen, "Screen")];
+    var viewClass = getCodeInputViewClass(view || 'default');
     var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
     var getLastActiveIndex = function getLastActiveIndex() {
       if (code.length && code.length < codeLength) {
@@ -117,14 +117,36 @@ export var codeInputRoot = function codeInputRoot(Root) {
       }
     };
     var handleChange = function handleChange(event, index) {
-      var _inputRefs$current$in;
       if (disabled) {
         return;
       }
       var rawSymbol = event.currentTarget.value;
       var symbol = rawSymbol.charAt(rawSymbol.length - 1);
+      handleAddSymbol(symbol, index);
+    };
+    var handleOnKeyDownCircle = function handleOnKeyDownCircle(event, index) {
+      var _inputRefs$current$in;
+      if (disabled) {
+        return;
+      }
+      var key = event.key;
+      if (FORBIDDEN_KEYS.includes(key)) {
+        event.preventDefault();
+        return;
+      }
+      if (key === BACKSPACE_KEY) {
+        if (index > 0 && code[index] === '') {
+          var _inputRefs$current2;
+          (_inputRefs$current2 = inputRefs.current[index - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
+        }
+      }
+      handleAddSymbol(key, index);
+      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.focus();
+    };
+    var handleAddSymbol = function handleAddSymbol(symbol, index) {
+      var _inputRefs$current$in2;
       var newCode = _toConsumableArray(code);
-      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.remove(classes.itemError);
+      (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(classes.itemError);
       if (isError) {
         var _captionRef$current;
         (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.remove(classes.captionError);
@@ -140,8 +162,8 @@ export var codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol;
         codeSetter(newCode);
         if (symbol && index < codeLength - 1) {
-          var _inputRefs$current2;
-          (_inputRefs$current2 = inputRefs.current[index + 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
+          var _inputRefs$current3;
+          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
         }
         return;
       }
@@ -154,8 +176,8 @@ export var codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol.charAt(symbol.length - 1);
         codeSetter(newCode);
         if (index < codeLength - 1) {
-          var _inputRefs$current3;
-          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
+          var _inputRefs$current4;
+          (_inputRefs$current4 = inputRefs.current[index + 1]) === null || _inputRefs$current4 === void 0 || _inputRefs$current4.focus();
         }
       } else {
         newCode[index] = symbol.charAt(symbol.length - 1);
@@ -165,6 +187,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
           index: index,
           newCode: newCode,
           inputRefs: inputRefs,
+          inputContainerRef: inputContainerRef,
           setCode: setCode,
           codeSetter: codeSetter
         });
@@ -172,6 +195,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
     };
     var handlePaste = function handlePaste(event) {
       var _inputRefs$current$ac;
+      var newCode = _toConsumableArray(code);
       if (disabled) {
         return;
       }
@@ -181,9 +205,12 @@ export var codeInputRoot = function codeInputRoot(Root) {
         var _symb$match;
         return ((_symb$match = symb.match(fieldPattern)) === null || _symb$match === void 0 ? void 0 : _symb$match[0]) || '';
       }).filter(Boolean) || [] : rawData.split('')).slice(0, codeLength);
+      pastedData.forEach(function (element, index) {
+        newCode[index] = element;
+      });
       var activeIndex = Math.min(pastedData.length, codeLength - 1);
       (_inputRefs$current$ac = inputRefs.current[activeIndex]) === null || _inputRefs$current$ac === void 0 || _inputRefs$current$ac.focus();
-      codeSetter(pastedData);
+      codeSetter(newCode);
     };
     var handleFullCodeEnter = useCallback(function (fullCode) {
       if (onFullCodeEnter) {
@@ -226,7 +253,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
       disabled: disabled,
       screen: screen,
       onClick: handleClick,
-      className: cls(className, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
+      className: cls(className, viewClass, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
     }, rest), /*#__PURE__*/React.createElement(CodeWrapper, {
       ref: inputContainerRef
     }, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
@@ -237,15 +264,22 @@ export var codeInputRoot = function codeInputRoot(Root) {
       }, _toConsumableArray(Array(codeLength / parts)).map(function (_, i) {
         var inputCorrectIndex = i + codeLength / parts * partIndex;
         return /*#__PURE__*/React.createElement(ItemWrapper, {
-          key: partIndex + i + partIndex * i,
-          className: screenClass
-        }, /*#__PURE__*/React.createElement(ItemInput, _extends({
+          key: partIndex + i + partIndex * i
+        }, (!code[inputCorrectIndex] || !!code[inputCorrectIndex] && hidden) && /*#__PURE__*/React.createElement(ItemCircle, {
+          role: "tab",
+          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
+          onKeyDown: function onKeyDown(e) {
+            handleOnKeyDownCircle(e, inputCorrectIndex);
+          },
+          className: cls([!!code[inputCorrectIndex] && hidden ? classes.itemCirlceFilled : '', "".concat(classes.itemCircle, "-").concat(inputCorrectIndex)])
+        }), /*#__PURE__*/React.createElement(ItemInput, _extends({
           ref: function ref(element) {
             inputRefs.current[inputCorrectIndex] = element;
           },
           className: cls(_defineProperty({}, classes.hoverEnabled, inputCorrectIndex >= originalValue.length)),
           hide: hidden,
           value: code[inputCorrectIndex] || '',
+          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
           autoComplete: autoComplete,
           onChange: function onChange(e) {
             handleChange(e, inputCorrectIndex);
@@ -253,13 +287,10 @@ export var codeInputRoot = function codeInputRoot(Root) {
           onKeyDown: function onKeyDown(e) {
             handleOnKeyDown(e, inputCorrectIndex);
           },
-          onPaste: handlePaste,
-          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1
+          onPaste: handlePaste
         }, placeholderValue && {
           placeholder: placeholderValue[inputCorrectIndex]
-        })), (!code[inputCorrectIndex] || !!code[inputCorrectIndex] && hidden) && /*#__PURE__*/React.createElement(ItemCircle, {
-          className: !!code[inputCorrectIndex] && hidden ? classes.itemCirlceFilled : ''
-        }));
+        })));
       })), partIndex !== parts - 1 && (_Separator || (_Separator = /*#__PURE__*/React.createElement(Separator, null))));
     })), caption && /*#__PURE__*/React.createElement(CaptionWrapper, {
       ref: captionRef,

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

@@ -24,7 +24,7 @@ export var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;"]);
 export var ItemCircle = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1lsnhbl-5"
-})(["position:absolute;top:calc(50% - calc(var(", ") / 2));left:calc(50% - calc(var(", ") / 2));width:var(", ");height:var(", ");box-sizing:border-box;border:var(", ") solid var(", ");border-radius:100%;background-color:'transparent';&.", "{background-color:var(", ");}"], tokens.codeItemCircleSize, tokens.codeItemCircleSize, tokens.codeItemCircleSize, tokens.codeItemCircleSize, tokens.codeItemCircleBorderWidth, tokens.codeColor, classes.itemCirlceFilled, tokens.codeColor);
+})(["position:absolute;top:calc(50% - calc(var(", ") / 2));left:calc(50% - calc(var(", ") / 2));width:var(", ");height:var(", ");box-sizing:border-box;border-radius:100%;background-color:'transparent';"], tokens.codeItemCircleSize, tokens.codeItemCircleSize, tokens.codeItemCircleSize, tokens.codeItemCircleSize);
 export var CaptionWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1lsnhbl-6"
 })(["text-align:", ";align-self:", ";width:", ";white-space:pre-line;"], function (_ref2) {

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

@@ -2,7 +2,10 @@ export var classes = {
   itemError: 'codeinput-item-error',
   itemErrorAnimation: 'codeinput-item-error-animation',
   itemErrorFade: 'codeinput-item-error-fade',
+  itemCircle: 'codeinput-item-circle',
   itemCirlceFilled: 'codeinput-item-circle-filled',
+  itemCircleError: 'codeinput-item-circle-error',
+  itemCircleErrorAnimation: 'codeinput-item-circle-error-animation',
   captionError: 'codeinput-caption-error',
   codeError: 'codeinput-code-error',
   codeErrorAnimation: 'codeinput-code-error-animation',
@@ -11,33 +14,54 @@ export var classes = {
   hoverEnabled: 'codeinput-item-hover-enabled',
   segmented: 'codeinput-shape-segmented',
   "default": 'codeinput-shape-default',
-  largeScreen: 'codeinput-large-screen',
-  mediumScreen: 'codeinput-medium-screen',
-  smallScreen: 'codeinput-small-screen',
+  largeMScreen: 'codeinput-large-m-screen',
+  largeSScreen: 'codeinput-large-s-screen',
+  mediumMScreen: 'codeinput-medium-m-screen',
+  mediumSScreen: 'codeinput-medium-s-screen',
+  smallMScreen: 'codeinput-small-m-screen',
   disabled: 'codeinput-disabled'
 };
+export var privateTokens = {
+  itemWidth: '--private-codeinput-item-width',
+  itemHeight: '--private-codeinput-item-hieght',
+  fontSize: '--private-codeinput-font-size',
+  lineHeight: '--private-codeinput-line-height'
+};
 export var tokens = {
   captionGap: '--plasma-codeinput-caption-gap',
   codeItemsGap: '--plasma-codeinput-code-item-gap',
+  smallMMinWidth: '--plasma-codeinput-smallM-min-width',
+  mediumSMinWidth: '--plasma-codeinput-mediumS-min-width',
+  mediumMMinWidth: '--plasma-codeinput-mediumM-min-width',
+  largeSMinWidth: '--plasma-codeinput-largeS-min-width',
+  largeMMinWidth: '--plasma-codeinput-largeM-min-width',
   separatorWidth: '--plasma-codeinput-separator-width',
-  codeItemLargeWidth: '--plasma-codeinput-item-large-width',
-  codeItemLargeHeight: '--plasma-codeinput-item-large-height',
-  codeItemMediumWidth: '--plasma-codeinput-item-medium-width',
-  codeItemMediumHeight: '--plasma-codeinput-item-medium-height',
-  codeItemSmallWidth: '--plasma-codeinput-item-small-width',
-  codeItemSmallHeight: '--plasma-codeinput-item-small-height',
+  largeMCodeItemWidth: '--plasma-codeinput-item-large-m-width',
+  largeMCodeItemHeight: '--plasma-codeinput-item-large-m-height',
+  largeSCodeItemWidth: '--plasma-codeinput-item-large-s-width',
+  largeSCodeItemHeight: '--plasma-codeinput-item-large-s-height',
+  mediumMCodeItemWidth: '--plasma-codeinput-item-medium-m-width',
+  mediumMCodeItemHeight: '--plasma-codeinput-item-medium-m-height',
+  mediumSCodeItemWidth: '--plasma-codeinput-item-medium-s-width',
+  mediumSCodeItemHeight: '--plasma-codeinput-item-medium-s-height',
+  smallMCodeItemWidth: '--plasma-codeinput-item-small-m-width',
+  smallMCodeItemHeight: '--plasma-codeinput-item-small-m-height',
   codeItemCircleSize: '--plasma-codeinput-item-circle-size',
   codeItemCircleBorderWidth: '--plasma-codeinput-item-circle-border-width',
   fontStyle: '--plasma-codeinput-font-style',
   fontFamily: '--plasma-codeinput-font-family',
   fontWeight: '--plasma-codeinput-font-weight',
   letterSpacing: '--plasma-codeinput-letter-spacing',
-  largeScreenFontSize: '--plasma-codeinput-large-screen-font-size',
-  largeScreenLineHeight: '--plasma-codeinput-large-screen-line-height',
-  mediumScreenFontSize: '--plasma-codeinput-medium-screen-font-size',
-  mediumScreenLineHeight: '--plasma-codeinput-medium-screen-line-height',
-  smallScreenFontSize: '--plasma-codeinput-small-screen-font-size',
-  smallScreenLineHeight: '--plasma-codeinput-small-screen-line-height',
+  largeMFontSize: '--plasma-codeinput-large-m-font-size',
+  largeMLineHeight: '--plasma-codeinput-large-m-line-height',
+  largeSFontSize: '--plasma-codeinput-large-s-font-size',
+  largeSLineHeight: '--plasma-codeinput-large-s-line-height',
+  mediumMFontSize: '--plasma-codeinput-medium-m-font-size',
+  mediumMLineHeight: '--plasma-codeinput-medium-m-line-height',
+  mediumSFontSize: '--plasma-codeinput-medium-s-font-size',
+  mediumSLineHeight: '--plasma-codeinput-medium-s-line-height',
+  smallMFontSize: '--plasma-codeinput-small-m-font-size',
+  smallMLineHeight: '--plasma-codeinput-small-m-line-height',
   captionFontFamily: '--plasma-codeinput-caption-font-family',
   captionFontSize: '--plasma-codeinput-caption-font-style',
   captionFontStyle: '--plasma-codeinput-caption-font-size',

package/styled-components/es/components/CodeInput/index.js

@@ -1,2 +1,3 @@
 export { codeInputRoot, codeInputConfig } from "./CodeInput";
-export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";
+export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";
+export { getCodeInputView } from "./utils";

package/styled-components/es/components/CodeInput/utils/constants.js

@@ -1,6 +1,6 @@
 export var ONLY_DIGITS_PATTERN = '^\\d+$';
 export var ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
 export var ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
-export var FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'];
+export var FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Tab'];
 export var BACKSPACE_KEY = 'Backspace';
 export var ANIMATION_TIMEOUT = 300;

package/styled-components/es/components/CodeInput/utils/generateMediaQuery.js

@@ -0,0 +1,39 @@
+import { privateTokens, tokens } from "../CodeInput.tokens";
+export var getCodeInputViewClass = function getCodeInputViewClass(view) {
+  return "codeinput-".concat(view, "-view");
+};
+var tokenPrefix = '--plasma-codeinput-';
+export var gridSizes = ['smallXXS', 'smallXS', 'smallS', 'smallM', 'smallL', 'smallXL', 'smallXXL', 'mediumXXS', 'mediumXS', 'mediumS', 'mediumM', 'mediumL', 'mediumXL', 'mediumXXL', 'largeXXS', 'largeXS', 'largeS', 'largeM', 'largeL', 'largeXL', 'largeXXL'];
+
+/**
+ * Генерирует набор медиа-запросов под различную ширину вьюпорта
+ *
+ * @param {GridToken} cssTokens - объект view с набором токенов ширины вьюпорта
+ * @return {string} сгенерированный набор медиа-запросов
+ */
+var gridMediaQueryTemplate = function gridMediaQueryTemplate(breakpoints) {
+  return gridSizes.map(function (size) {
+    if (!String(breakpoints["".concat(tokenPrefix).concat(size, "-min-width")])) {
+      return;
+    }
+    var minWidth = breakpoints["".concat(tokenPrefix).concat(size, "-min-width")];
+    var itemWidth = tokens["".concat(size, "CodeItemWidth")];
+    var itemHeight = tokens["".concat(size, "CodeItemHeight")];
+    var fontSize = tokens["".concat(size, "FontSize")];
+    var lineHeight = tokens["".concat(size, "LineHeight")];
+    return "\n                @media (min-width: ".concat(minWidth, ") {\n                    ").concat(privateTokens.fontSize, ": var(").concat(fontSize, ");\n                    ").concat(privateTokens.lineHeight, ": var(").concat(lineHeight, ");\n                    ").concat(privateTokens.itemWidth, ": var(").concat(itemWidth, ");\n                    ").concat(privateTokens.itemHeight, ": var(").concat(itemHeight, ");\n                }\n            ");
+  }).filter(function (style) {
+    return style;
+  }).join('\n');
+};
+
+/**
+ * Генерирует строку со стилями для обертки Grid и набором медиа-запросов
+ *
+ * @param {BreakpointToken} breakponts - объект view с набором токенов ширины вьюпорта
+ * @param {string} viewName - название view из конфига
+ * @return {string} стили для обертки Grid
+ */
+export var getCodeInputView = function getCodeInputView(breakponts, viewName) {
+  return "\n        &.".concat(getCodeInputViewClass(viewName), " {\n            ").concat(gridMediaQueryTemplate(breakponts), "\n        }\n    ");
+};

package/styled-components/es/components/CodeInput/utils/handleItemError.js

@@ -7,21 +7,28 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { classes } from "../CodeInput.tokens";
 import { ANIMATION_TIMEOUT } from "./constants";
 export var handleItemError = function handleItemError(_ref) {
-  var _inputRefs$current$in, _inputRefs$current$in4;
+  var _inputContainerRef$cu, _inputRefs$current$in, _inputRefs$current$in4;
   var currentSymbol = _ref.currentSymbol,
     itemErrorBehavior = _ref.itemErrorBehavior,
     index = _ref.index,
     newCode = _ref.newCode,
     inputRefs = _ref.inputRefs,
+    inputContainerRef = _ref.inputContainerRef,
     setCode = _ref.setCode,
     codeSetter = _ref.codeSetter;
   if (!inputRefs.current[index] || currentSymbol === ' ') {
     return;
   }
+  var circleElement = (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.querySelector(".".concat(classes.itemCircle, "-").concat(index));
   switch (itemErrorBehavior) {
     case 'keep':
       setCode(newCode);
       (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.add(classes.itemError, classes.itemErrorAnimation);
+      if (circleElement) {
+        setTimeout(function () {
+          circleElement.classList.add(classes.itemCircleError, classes.itemCircleErrorAnimation);
+        }, 0);
+      }
       setTimeout(function () {
         var _inputRefs$current$in2;
         (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(classes.itemErrorAnimation);
@@ -39,12 +46,22 @@ export var handleItemError = function handleItemError(_ref) {
     default:
       setCode(newCode);
       (_inputRefs$current$in4 = inputRefs.current[index]) === null || _inputRefs$current$in4 === void 0 || _inputRefs$current$in4.classList.add(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
+      if (circleElement) {
+        setTimeout(function () {
+          circleElement.classList.add(classes.itemCircleError, classes.itemCircleErrorAnimation);
+        }, 0);
+      }
       setTimeout(function () {
         var _inputRefs$current$in5;
         var updatedCode = _toConsumableArray(newCode);
         updatedCode[index] = '';
         codeSetter(updatedCode);
         (_inputRefs$current$in5 = inputRefs.current[index]) === null || _inputRefs$current$in5 === void 0 || _inputRefs$current$in5.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
+        if (circleElement) {
+          setTimeout(function () {
+            circleElement.classList.remove(classes.itemCircleError, classes.itemCircleErrorAnimation);
+          }, 0);
+        }
       }, ANIMATION_TIMEOUT);
   }
 };

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

@@ -1,3 +1,4 @@
 export { getFieldPattern, getPlaceholderValue, getCodeValue } from "./initialValuesHelper";
 export { handleItemError } from "./handleItemError";
-export { handleCodeError } from "./handleCodeError";
+export { handleCodeError } from "./handleCodeError";
+export * from "./generateMediaQuery";

package/styled-components/es/components/CodeInput/utils/types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/CodeInput/variations/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { CaptionWrapper, CodeGroup, CodeWrapper, ItemInput } from "../../CodeInput.styles";
-import { tokens, classes } from "../../CodeInput.tokens";
-export var base = /*#__PURE__*/css(["gap:var(", ");", ",", "{gap:var(", ");}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.captionGap, CodeWrapper, CodeGroup, tokens.codeItemsGap, classes.largeScreen, ItemInput, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, classes.mediumScreen, ItemInput, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, classes.smallScreen, ItemInput, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, ItemInput, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);
+import { tokens, privateTokens } from "../../CodeInput.tokens";
+export var base = /*#__PURE__*/css(["gap:var(", ");", ",", "{gap:var(", ");}", "{font-size:var(", ");font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");width:var(", ");height:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.captionGap, CodeWrapper, CodeGroup, tokens.codeItemsGap, ItemInput, privateTokens.fontSize, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, privateTokens.lineHeight, privateTokens.itemWidth, privateTokens.itemHeight, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);

package/styled-components/es/components/CodeInput/variations/_view/base.js

@@ -1,4 +1,10 @@
 import { css } from 'styled-components';
 import { CaptionWrapper, ItemInput, ItemCircle } from "../../CodeInput.styles";
 import { classes, tokens } from "../../CodeInput.tokens";
-export var base = /*#__PURE__*/css(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], CaptionWrapper, tokens.captionColor, classes.captionError, tokens.captionColorError, ItemInput, tokens.codeColor, tokens.backgroundColor, tokens.borderWidth, tokens.borderColor, classes.hoverEnabled, tokens.backgroundColorHover, tokens.borderWidth, tokens.borderColorHover, ItemInput, tokens.backgroundColorFocus, tokens.borderWidth, tokens.borderColorFocus, classes.codeErrorAnimation, classes.codeError, ItemInput, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, ItemCircle, tokens.codeItemCircleBorderWidth, tokens.codeColorError, classes.itemCirlceFilled, tokens.codeColorError, ItemInput, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, ItemInput, classes.itemErrorAnimation, classes.itemError, classes.itemError, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, tokens.codeColorError);
+import { addFocus } from "../../../../mixins";
+export var base = /*#__PURE__*/css(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");background-color:'transparent';&.", "{background-color:var(", ");}&.", "{animation:shakingError 0.3s forwards;}&.", "{background-color:var(", ");border:var(", ") solid var(", ");}&:focus-visible{outline:none;}&[data-focus-visible-added]{", " border:none;position:absolute;}}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], CaptionWrapper, tokens.captionColor, classes.captionError, tokens.captionColorError, ItemInput, tokens.codeColor, tokens.backgroundColor, tokens.borderWidth, tokens.borderColor, ItemCircle, tokens.codeItemCircleBorderWidth, tokens.codeColor, classes.itemCirlceFilled, tokens.codeColor, classes.itemCircleErrorAnimation, classes.itemCircleError, tokens.codeColorError, tokens.codeItemCircleBorderWidth, tokens.codeColorError, /*#__PURE__*/addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '1rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.borderColorFocus, ")")
+}), classes.hoverEnabled, tokens.backgroundColorHover, tokens.borderWidth, tokens.borderColorHover, ItemInput, tokens.borderWidth, tokens.borderColorFocus, classes.codeErrorAnimation, classes.codeError, ItemInput, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, ItemCircle, tokens.codeItemCircleBorderWidth, tokens.codeColorError, classes.itemCirlceFilled, tokens.codeColorError, ItemInput, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, ItemInput, classes.itemErrorAnimation, classes.itemError, classes.itemError, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, tokens.codeColorError);

package/styled-components/es/components/Combobox/Combobox.template-doc.mdx

@@ -436,6 +436,64 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="selectAll" label="Выбрать всё">
+        Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiple`:
+        ```tsx
+        type SelectAllProps = {
+            checked?: boolean;
+            indeterminate?: boolean;
+            label?: string;
+            onClick?: () => void;
+            sticky?: boolean;
+        };
+        ```
+        Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
+
+        ```tsx live
+        import React, { useState } from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [checked, setChecked] = useState(false);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
+                    <Combobox
+                        label="Label"
+                        placeholder="Placeholder"
+                        items={items}
+                        multiple
+                        selectAllOptions={{
+                            checked,
+                            onClick: () => setChecked(prev => !prev)
+                        }}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 ## Использование с React Hook Form и нативной формой

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

@@ -22,10 +22,10 @@ import { classes } from "./Combobox.tokens";
 import { FloatingPopover } from "./FloatingPopover";
 import { useKeyNavigation, getItemByFocused } from "./hooks/useKeyboardNavigation";
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, filterItems, getItemId, getRemovedElement } from "./utils";
-import { Inner, StyledTextField, VirtualList } from "./ui";
+import { Inner, StyledTextField, VirtualList, SelectAll } from "./ui";
 import { pathReducer, focusedPathReducer } from "./reducers";
 import { getPathMap, getTreeMaps } from "./hooks/getPathMaps";
-import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState, StyledLeftHelper } from "./Combobox.styles";
+import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState, StyledLeftHelper, ListWrapper } from "./Combobox.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { SelectNative } from "./ui/SelectNative/SelectNative";
@@ -521,7 +521,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
           _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         }));
       },
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/React.createElement(Root, {
       size: size,
       view: view,
@@ -529,12 +530,13 @@ export var comboboxRoot = function comboboxRoot(Root) {
       disabled: disabled,
       readOnly: readOnly,
       name: name
+    }, /*#__PURE__*/React.createElement(ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/React.createElement(Ul, {
       role: "tree",
       id: "".concat(treeId, "_tree_level_1"),
       "aria-multiselectable": Boolean(multiple),
       listMaxHeight: listMaxHeight || listHeight,
-      listWidth: listWidth,
       ref: targetRef,
       virtual: virtual,
       listOverflow: listOverflow,
@@ -543,7 +545,13 @@ export var comboboxRoot = function comboboxRoot(Root) {
       className: classes.emptyStateWrapper,
       size: size,
       description: emptyStateDescription || 'Ничего не найдено'
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, props.multiple && props.selectAllOptions &&
+    /*#__PURE__*/
+    // TODO: #2004
+    React.createElement(SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
       items: filteredItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll
@@ -557,7 +565,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    })), afterList))))));
+    })), afterList)))))));
   });
 };
 export var comboboxConfig = {

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

@@ -6,12 +6,15 @@ import { component, mergeConfig } from "../../../engines";
 import { tokens, constants, classes } from "./Combobox.tokens";
 var mergedConfig = /*#__PURE__*/mergeConfig(emptyStateConfig);
 var EmptyState = /*#__PURE__*/component(mergedConfig);
-export var Ul = /*#__PURE__*/styled.ul.withConfig({
+export var ListWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2kddkg-0"
-})(["background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";max-height:", ";overflow-y:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
+})(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0rem) var(", ",transparent);"], function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, function (_ref2) {
+}, tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
+export var Ul = /*#__PURE__*/styled.ul.withConfig({
+  componentId: "plasma-new-hope__sc-2kddkg-1"
+})(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;.", "{box-shadow:none;}"], function (_ref2) {
   var virtual = _ref2.virtual,
     listMaxHeight = _ref2.listMaxHeight;
   return virtual ? 'auto' : listMaxHeight || 'auto';
@@ -19,17 +22,14 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
   var virtual = _ref3.virtual,
     listOverflow = _ref3.listOverflow;
   return virtual ? 'visible' : listOverflow || 'visible';
-}, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : "var(".concat(tokens.margin, ") 0 0 0");
-}, tokens.padding, classes.emptyStateWrapper);
+}, tokens.borderRadius, tokens.dropdownBorderWidth, classes.emptyStateWrapper);
 export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-1"
-})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref5) {
-  var disabled = _ref5.disabled;
+  componentId: "plasma-new-hope__sc-2kddkg-2"
+})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled ? 'inherit' : 'pointer';
-}, classes.arrowInverse, function (_ref6) {
-  var disabled = _ref6.disabled;
+}, classes.arrowInverse, function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
 });
 
@@ -39,20 +39,20 @@ export var sizeMap = {
   s: '1.5rem'
 };
 export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-2"
-})(["width:", ";height:", ";"], function (_ref7) {
+  componentId: "plasma-new-hope__sc-2kddkg-3"
+})(["width:", ";height:", ";"], function (_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'xs' : _ref6$size;
+  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref7) {
   var _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 'xs' : _ref7$size;
   return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref8) {
-  var _ref8$size = _ref8.size,
-    size = _ref8$size === void 0 ? 'xs' : _ref8$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 export var base = /*#__PURE__*/css([""]);
 export var StyledEmptyState = /*#__PURE__*/styled(EmptyState).withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-3"
+  componentId: "plasma-new-hope__sc-2kddkg-4"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], 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 = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-4"
+  componentId: "plasma-new-hope__sc-2kddkg-5"
 })(["margin:0;padding:0;"]);