@salutejs/plasma-new-hope 0.325.0-dev.0 → 0.325.1-canary.2005.15439910438.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.325.0-dev.0",
+  "version": "0.325.1-canary.2005.15439910438.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -79,8 +79,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.198.0-dev.0",
-    "@salutejs/plasma-themes": "0.33.0",
+    "@salutejs/plasma-sb-utils": "0.198.1-canary.2005.15439910438.0",
+    "@salutejs/plasma-themes": "0.33.1-canary.2005.15439910438.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/manager-api": "8.6.12",
@@ -117,7 +117,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.197.0-dev.0",
+    "@salutejs/plasma-core": "1.197.1-canary.2005.15439910438.0",
     "@salutejs/react-maskinput": "3.2.6",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "f6b8477a603994f0831cbdcc88405dc549035fd4"
+  "gitHead": "16fdf0c3eadb3a06b37c0769341a3994e9217b7c"
 }

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

@@ -191,7 +191,7 @@ var autocompleteRoot = exports.autocompleteRoot = function autocompleteRoot(Root
       labelPlacement: labelPlacement,
       disabled: disabled,
       readOnly: readOnly
-    }, /*#__PURE__*/_react["default"].createElement(_Autocomplete.Ul, {
+    }, /*#__PURE__*/_react["default"].createElement(_Autocomplete.ListWrapper, null, /*#__PURE__*/_react["default"].createElement(_Autocomplete.Ul, {
       ref: targetRef,
       id: listId,
       role: "listbox",
@@ -215,7 +215,7 @@ var autocompleteRoot = exports.autocompleteRoot = function autocompleteRoot(Root
         focused: focused === index,
         renderItem: renderItem
       });
-    }), afterList), renderListEnd && /*#__PURE__*/_react["default"].createElement(_Autocomplete.InfiniteLoaderWrapper, null, renderListEnd())))));
+    }), afterList), renderListEnd && /*#__PURE__*/_react["default"].createElement(_Autocomplete.InfiniteLoaderWrapper, null, renderListEnd()))))));
   });
 };
 var autocompleteConfig = exports.autocompleteConfig = {

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

@@ -4,22 +4,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Ul = exports.StyledLeftHelper = exports.InfiniteLoaderWrapper = void 0;
+exports.base = exports.Ul = exports.StyledLeftHelper = exports.ListWrapper = exports.InfiniteLoaderWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
 var _Autocomplete = /*#__PURE__*/require("./Autocomplete.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
-var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+var ListWrapper = exports.ListWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-ff6pwi-0"
-})(["background:var(", ");box-shadow:var(", ");border-radius:var(", ");height:auto;max-height:", ";overflow:auto;border:var(", ") solid var(", ");margin:var(", ") 0 0 0;padding:var(", ");"], _Autocomplete.tokens.background, _Autocomplete.tokens.boxShadow, _Autocomplete.tokens.borderRadius, function (_ref) {
+})(["margin:var(", ") 0 0 0;padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:var(", "),inset 0 0 0 var(", ",0rem) var(", ",transparent);"], _Autocomplete.tokens.margin, _Autocomplete.tokens.padding, _Autocomplete.tokens.dropdownBorderWidth, _Autocomplete.tokens.borderRadius, _Autocomplete.tokens.background, _Autocomplete.tokens.boxShadow, _Autocomplete.tokens.dropdownBorderWidth, _Autocomplete.tokens.dropdownBorderColor);
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  componentId: "plasma-new-hope__sc-ff6pwi-1"
+})(["border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));height:auto;max-height:", ";overflow:auto;margin:0;padding:0;"], _Autocomplete.tokens.borderRadius, _Autocomplete.tokens.dropdownBorderWidth, function (_ref) {
   var virtual = _ref.virtual,
     listMaxHeight = _ref.listMaxHeight;
   return virtual ? 'auto' : listMaxHeight || 'auto';
-}, _Autocomplete.tokens.dropdownBorderWidth, _Autocomplete.tokens.dropdownBorderColor, _Autocomplete.tokens.margin, _Autocomplete.tokens.padding);
+});
 var InfiniteLoaderWrapper = exports.InfiniteLoaderWrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
-  componentId: "plasma-new-hope__sc-ff6pwi-1"
+  componentId: "plasma-new-hope__sc-ff6pwi-2"
 })(["display:flex;align-items:center;justify-content:center;box-sizing:content-box;min-height:var(", ");"], _Autocomplete.tokens.textFieldHeight);
 var StyledLeftHelper = exports.StyledLeftHelper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-ff6pwi-2"
+  componentId: "plasma-new-hope__sc-ff6pwi-3"
 })(["margin:0;padding:0;"]);

package/styled-components/cjs/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js

@@ -14,10 +14,10 @@ var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-1m9plqu-1"
 })(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover{cursor:pointer;background:var(", ");}:focus{outline:none;}", ";"], _Autocomplete.tokens.itemPadding, _Autocomplete.tokens.itemFontFamily, _Autocomplete.tokens.itemFontSize, _Autocomplete.tokens.itemFontStyle, _Autocomplete.tokens.itemFontWeight, _Autocomplete.tokens.itemFontLetterSpacing, _Autocomplete.tokens.itemFontLineHeight, _Autocomplete.tokens.itemBackground, _Autocomplete.tokens.itemColor, _Autocomplete.tokens.itemBorderRadius, _Autocomplete.tokens.itemBackgroundHover, /*#__PURE__*/(0, _mixins.addFocus)({
-  outlineSize: '0.0625rem',
+  outlineSize: '0',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Autocomplete.tokens.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(_Autocomplete.tokens.itemBorderRadius, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Autocomplete.tokens.borderRadius, ") - 0.125rem - var(").concat(_Autocomplete.tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Autocomplete.classes.suggestionItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Autocomplete.tokens.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Autocomplete.classes.suggestionItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(_Autocomplete.tokens.focusColor, ");\n            }\n        ")
 }));

package/styled-components/cjs/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/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -528,7 +528,8 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
           _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         }));
       },
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/_react["default"].createElement(Root, {
       size: size,
       view: view,
@@ -536,12 +537,13 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
       disabled: disabled,
       readOnly: readOnly,
       name: name
+    }, /*#__PURE__*/_react["default"].createElement(_Combobox2.ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/_react["default"].createElement(_Combobox2.Ul, {
       role: "tree",
       id: "".concat(treeId, "_tree_level_1"),
       "aria-multiselectable": Boolean(multiple),
       listMaxHeight: listMaxHeight || listHeight,
-      listWidth: listWidth,
       ref: targetRef,
       virtual: virtual,
       listOverflow: listOverflow,
@@ -550,7 +552,13 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
       className: _Combobox.classes.emptyStateWrapper,
       size: size,
       description: emptyStateDescription || 'Ничего не найдено'
-    }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
+    }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.multiple && props.selectAllOptions &&
+    /*#__PURE__*/
+    // TODO: #2004
+    _react["default"].createElement(_ui.SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
       items: filteredItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll
@@ -564,7 +572,7 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    })), afterList))))));
+    })), afterList)))))));
   });
 };
 var comboboxConfig = exports.comboboxConfig = {

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeMap = exports.base = exports.Ul = exports.StyledLeftHelper = exports.StyledEmptyState = exports.StyledArrow = exports.IconArrowWrapper = void 0;
+exports.sizeMap = exports.base = exports.Ul = exports.StyledLeftHelper = exports.StyledEmptyState = exports.StyledArrow = exports.ListWrapper = exports.IconArrowWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
 var _EmptyState = /*#__PURE__*/require("../../EmptyState");
 var _Icon = /*#__PURE__*/require("../../_Icon");
@@ -14,12 +14,15 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_EmptyState.emptyStateConfig);
 var EmptyState = /*#__PURE__*/(0, _engines.component)(mergedConfig);
-var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+var ListWrapper = exports.ListWrapper = /*#__PURE__*/_styledComponents["default"].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;}"], _Combobox.constants.background, _Combobox.constants.boxShadow, _Combobox.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) {
+}, _Combobox.tokens.padding, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.borderRadius, _Combobox.constants.background, _Combobox.constants.boxShadow, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.dropdownBorderColor);
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].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';
@@ -27,17 +30,14 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   var virtual = _ref3.virtual,
     listOverflow = _ref3.listOverflow;
   return virtual ? 'visible' : listOverflow || 'visible';
-}, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.dropdownBorderColor, function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(_Combobox.tokens.padding, ") * -1) 0 0 0") : "var(".concat(_Combobox.tokens.margin, ") 0 0 0");
-}, _Combobox.tokens.padding, _Combobox.classes.emptyStateWrapper);
+}, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth, _Combobox.classes.emptyStateWrapper);
 var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-1"
-})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], _Combobox.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:", ";}"], _Combobox.tokens.disclosureIconColor, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled ? 'inherit' : 'pointer';
-}, _Combobox.classes.arrowInverse, function (_ref6) {
-  var disabled = _ref6.disabled;
+}, _Combobox.classes.arrowInverse, function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "var(".concat(_Combobox.tokens.disclosureIconColor, ")") : "var(".concat(_Combobox.tokens.disclosureIconColorHover, ")");
 });
 
@@ -47,20 +47,20 @@ var sizeMap = exports.sizeMap = {
   s: '1.5rem'
 };
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.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(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref7) {
   var _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 'xs' : _ref7$size;
   return "var(".concat(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref8) {
-  var _ref8$size = _ref8.size,
-    size = _ref8$size === void 0 ? 'xs' : _ref8$size;
-  return "var(".concat(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
 var StyledEmptyState = exports.StyledEmptyState = /*#__PURE__*/(0, _styledComponents["default"])(EmptyState).withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-3"
+  componentId: "plasma-new-hope__sc-2kddkg-4"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _EmptyState.emptyStateTokens.borderRadius, _Combobox.tokens.textFieldBorderRadius, _EmptyState.emptyStateTokens.padding, _Combobox.tokens.emptyStatePadding, _EmptyState.emptyStateTokens.fontFamily, _Combobox.tokens.textFieldFontFamily, _EmptyState.emptyStateTokens.fontSize, _Combobox.tokens.textFieldFontSize, _EmptyState.emptyStateTokens.fontStyle, _Combobox.tokens.textFieldFontStyle, _EmptyState.emptyStateTokens.fontWeight, _Combobox.tokens.textFieldFontWeight, _EmptyState.emptyStateTokens.fontLetterSpacing, _Combobox.tokens.textFieldLetterSpacing, _EmptyState.emptyStateTokens.fontLineHeight, _Combobox.tokens.textFieldLineHeight);
 var StyledLeftHelper = exports.StyledLeftHelper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-4"
+  componentId: "plasma-new-hope__sc-2kddkg-5"
 })(["margin:0;padding:0;"]);

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

@@ -223,14 +223,21 @@ var tokens = exports.tokens = {
   disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
   disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover',
   disclosureIconSize: '--plasma-select-disclosure-icon-size',
-  disclosureIconMargin: '--plasma-select-disclosure-icon-margin'
+  disclosureIconMargin: '--plasma-select-disclosure-icon-margin',
+  dividerMarginTop: '--plasma-combobox-divider-margin-top',
+  dividerMarginTopTight: '--plasma-combobox-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-combobox-divider-margin-right',
+  dividerMarginBottom: '--plasma-combobox-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-combobox-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-combobox-divider-margin-left',
+  dividerColor: '--plasma-combobox-divider-color'
 };
 var constants = exports.constants = {
   focusColor: '--surface-accent',
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
   boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
-  itemBackground: '--plasma-colors-transparent',
+  itemBackground: '--surface-clear',
   textfieldTargetColor: '--text-primary',
   textfieldOuterLabelColor: '--text-primary',
   textfieldInnerLabelColor: '--text-secondary',
@@ -244,5 +251,5 @@ var constants = exports.constants = {
   fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
   fontLineHeight: '--plasma-typo-body-xs-line-height',
   cellTitleColor: '--text-primary',
-  cellBackgroundColor: '--plasma-colors-transparent'
+  cellBackgroundColor: '--surface-clear'
 };

package/styled-components/cjs/components/Combobox/ComboboxNew/FloatingPopover.js

@@ -15,6 +15,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// TODO: #2003
+var LIST_PADDING = 2;
 var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var target = _ref.target,
     children = _ref.children,
@@ -23,9 +25,8 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
     placement = _ref.placement,
     portal = _ref.portal,
     listWidth = _ref.listWidth,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 0 : _ref$offset,
-    zIndex = _ref.zIndex;
+    zIndex = _ref.zIndex,
+    isInner = _ref.isInner;
   var _useFloating = (0, _react.useFloating)({
       whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
         return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
@@ -36,14 +37,17 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
       },
       placement: placement,
       open: opened,
-      middleware: [(0, _react.offset)(offset), (0, _react.flip)({
+      middleware: [(0, _react.offset)({
+        mainAxis: isInner ? LIST_PADDING * 2 : 0,
+        alignmentAxis: isInner ? -LIST_PADDING : 0
+      }), (0, _react.flip)({
         fallbackAxisSideDirection: 'end'
       }), (0, _react.shift)(), (0, _react.size)({
         apply: function apply(_ref2) {
           var rects = _ref2.rects,
             elements = _ref2.elements;
           Object.assign(elements.floating.style, {
-            width: listWidth || "".concat(rects.reference.width, "px")
+            width: listWidth || "".concat(isInner ? rects.reference.width + LIST_PADDING * 2 : rects.reference.width, "px")
           });
         }
       })]

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

@@ -42,7 +42,6 @@ var Inner = exports.Inner = function Inner(_ref) {
       placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
       opened: isCurrentListOpen,
       onToggle: handleToggle,
-      offset: 2,
       target: /*#__PURE__*/_react["default"].createElement(_ui.Item, {
         item: item,
         path: path,
@@ -52,12 +51,13 @@ var Inner = exports.Inner = function Inner(_ref) {
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
         ariaLabel: item.label
-      })
+      }),
+      isInner: true
+    }, /*#__PURE__*/_react["default"].createElement(_Combobox.ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/_react["default"].createElement(_Combobox.Ul, {
       role: "group",
       id: listId,
-      isInnerUl: true,
-      listWidth: listWidth,
       virtual: false
     }, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/_react["default"].createElement(Inner, {
@@ -69,7 +69,7 @@ var Inner = exports.Inner = function Inner(_ref) {
         index: innerIndex,
         listWidth: listWidth
       });
-    })));
+    }))));
   }
   return /*#__PURE__*/_react["default"].createElement(_ui.Item, {
     item: item,

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js

@@ -82,16 +82,16 @@ var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].
 })(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-1n1xg1s-11"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;border-right:2px solid transparent;border-left:2px solid transparent;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Combobox.tokens.itemHeight, function (_ref7) {
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Combobox.tokens.itemHeight, function (_ref7) {
   var variant = _ref7.variant;
   return "var(".concat(variant === 'tight' ? _Combobox.tokens.itemPaddingTight : _Combobox.tokens.itemPadding, ")");
-}, _Combobox.tokens.fontFamily, _Combobox.tokens.fontSize, _Combobox.tokens.fontStyle, _Combobox.tokens.fontWeight, _Combobox.tokens.fontLetterSpacing, _Combobox.tokens.fontLineHeight, _Combobox.constants.itemBackground, _Combobox.tokens.borderRadius, _Combobox.classes.dropdownItemIsDisabled, _Combobox.tokens.itemBackgroundHover, _Combobox.classes.dropdownItemIsActive, _Combobox.tokens.itemBackgroundHover, _Combobox.classes.dropdownItemIsDisabled, _Combobox.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
-  outlineSize: '0.0625rem',
+}, _Combobox.tokens.fontFamily, _Combobox.tokens.fontSize, _Combobox.tokens.fontStyle, _Combobox.tokens.fontWeight, _Combobox.tokens.fontLetterSpacing, _Combobox.tokens.fontLineHeight, _Combobox.constants.itemBackground, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth, _Combobox.classes.dropdownItemIsDisabled, _Combobox.tokens.itemBackgroundHover, _Combobox.classes.dropdownItemIsActive, _Combobox.tokens.itemBackgroundHover, _Combobox.classes.dropdownItemIsDisabled, _Combobox.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineSize: '0',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Combobox.constants.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(_Combobox.tokens.itemBorderRadius, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Combobox.tokens.borderRadius, ") - 0.125rem - var(").concat(_Combobox.tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Combobox.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Combobox.constants.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Combobox.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(_Combobox.constants.focusColor, ");\n            }\n        ")
 }));
 var StyledCheckboxWrapper = exports.StyledCheckboxWrapper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-1n1xg1s-12"

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectAll = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _Item = /*#__PURE__*/require("../Inner/ui/Item/Item.styles");
+var _SelectAll = /*#__PURE__*/require("./SelectAll.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SelectAll = exports.SelectAll = function SelectAll(_ref) {
+  var variant = _ref.variant,
+    selectAllOptions = _ref.selectAllOptions;
+  return /*#__PURE__*/_react["default"].createElement(_SelectAll.Wrapper, {
+    variant: variant,
+    onClick: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.onClick,
+    sticky: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.sticky
+  }, /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.IconWrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckboxWrapper, {
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckbox, {
+    checked: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.checked,
+    indeterminate: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.indeterminate,
+    appearance: "default"
+  }))), /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell
+  // TODO: #1548
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , {
+    title: /*#__PURE__*/_react["default"].createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
+  }))), /*#__PURE__*/_react["default"].createElement(_SelectAll.DividerWrapper, null, /*#__PURE__*/_react["default"].createElement(_SelectAll.Divider, {
+    variant: variant
+  })));
+};

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.DividerWrapper = exports.Divider = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _Combobox = /*#__PURE__*/require("../../Combobox.tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-0"
+})(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-bottom:", ";border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));"], function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'static';
+}, _Combobox.constants.background, function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? _Combobox.tokens.dividerMarginBottomTight : _Combobox.tokens.dividerMarginBottom, ")");
+}, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth);
+var DividerWrapper = exports.DividerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-1"
+})(["background:var(", ");"], _Combobox.constants.background);
+var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-2"
+})(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? _Combobox.tokens.dividerMarginTopTight : _Combobox.tokens.dividerMarginTop, ")");
+}, _Combobox.tokens.dividerMarginRight, _Combobox.tokens.dividerMarginLeft, _Combobox.tokens.dividerColor);

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/index.js

@@ -35,4 +35,15 @@ Object.keys(_VirtualList).forEach(function (key) {
       return _VirtualList[key];
     }
   });
+});
+var _SelectAll = /*#__PURE__*/require("./SelectAll/SelectAll");
+Object.keys(_SelectAll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectAll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SelectAll[key];
+    }
+  });
 });

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

@@ -176,7 +176,8 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
         onKeyDown: onKeyDown,
         onContextMenu: openByRightClick ? onContextMenu : undefined
       }),
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
       className: (0, _utils.cx)(className, _Dropdown2.classes.dropdownRoot),
       ref: ref,
@@ -185,13 +186,14 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
       style: {
         display: 'inline-block'
       }
-    }, rest), /*#__PURE__*/_react["default"].createElement(_Dropdown.Ul, {
+    }, rest), /*#__PURE__*/_react["default"].createElement(_Dropdown.ListWrapper, {
+      listWidth: listWidth
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown.Ul, {
       ref: targetRef,
       id: "".concat(treeId, "_tree_level_1"),
       role: "tree",
       listOverflow: listOverflow,
-      listMaxHeight: listMaxHeight || listHeight,
-      listWidth: listWidth
+      listMaxHeight: listMaxHeight || listHeight
     }, beforeList, items.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement(_ui.DropdownInner, {
         key: "".concat(index, "/0"),
@@ -205,7 +207,7 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
         listMaxHeight: listMaxHeight || listHeight,
         listWidth: listWidth
       });
-    }), afterList))));
+    }), afterList)))));
   });
 };
 var dropdownConfig = exports.dropdownConfig = {

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

@@ -4,25 +4,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Ul = void 0;
+exports.base = exports.Ul = exports.ListWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
 var _utils = /*#__PURE__*/require("./utils");
 var _Dropdown = /*#__PURE__*/require("./Dropdown.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+var ListWrapper = exports.ListWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-13ezpo5-0"
-})(["box-sizing:border-box;width:", ";max-height:", ";margin:", ";padding:var(", ") 0;overflow-y:", ";background:var(", ");box-shadow:", ";border-radius:var(", ");border:var(", ") solid var(", ");"], function (_ref) {
+})(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0) var(", ",transparent);"], function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || "var(".concat(_Dropdown.tokens.width, ")");
-}, function (_ref2) {
+}, _Dropdown.tokens.padding, _Dropdown.tokens.borderWidth, _Dropdown.tokens.borderRadius, _Dropdown.constants.background, _Dropdown.constants.boxShadow, _Dropdown.tokens.borderWidth, _Dropdown.tokens.borderColor);
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  componentId: "plasma-new-hope__sc-13ezpo5-1"
+})(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;"], function (_ref2) {
   var listMaxHeight = _ref2.listMaxHeight;
   return listMaxHeight ? (0, _utils.getCorrectHeight)(listMaxHeight) : 'auto';
 }, function (_ref3) {
-  var isInnerUl = _ref3.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(_Dropdown.tokens.padding, ") * -1) 0.125rem 0") : 0;
-}, _Dropdown.tokens.padding, function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+  var listOverflow = _ref3.listOverflow;
   return listOverflow || 'visible';
-}, _Dropdown.constants.background, _Dropdown.constants.boxShadow, _Dropdown.tokens.borderRadius, _Dropdown.tokens.borderWidth, _Dropdown.tokens.borderColor);
+}, _Dropdown.tokens.borderRadius, _Dropdown.tokens.borderWidth);
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js

@@ -169,8 +169,8 @@ var constants = exports.constants = {
   background: '--surface-solid-card-brightness',
   boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
   disclosureIconColor: '--text-secondary',
-  itemBackground: '--plasma-colors-transparent',
+  itemBackground: '--surface-clear',
   opacity: '0.4',
   cellTitleColor: '--text-primary',
-  cellBackgroundColor: '--plasma-colors-transparent'
+  cellBackgroundColor: '--surface-clear'
 };