@salutejs/plasma-new-hope 0.326.0-canary.2002.15300192913.0 → 0.326.0-canary.2006.15549711826.0

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;"]);

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

@@ -217,14 +217,21 @@ export var 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'
 };
 export var 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',
@@ -238,5 +245,5 @@ export var 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/es/components/Combobox/ComboboxNew/FloatingPopover.js

@@ -7,6 +7,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { flip, shift, size, useFloating, FloatingPortal, offset as offsetMiddleware, autoUpdate } from '@floating-ui/react';
 import React, { forwardRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
+// TODO: #2003
+var LIST_PADDING = 2;
 var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var target = _ref.target,
     children = _ref.children,
@@ -15,9 +17,8 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 = useFloating({
       whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
         return autoUpdate(referenceEl, floatingEl, update, {
@@ -28,14 +29,17 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       placement: placement,
       open: opened,
-      middleware: [offsetMiddleware(offset), flip({
+      middleware: [offsetMiddleware({
+        mainAxis: isInner ? LIST_PADDING * 2 : 0,
+        alignmentAxis: isInner ? -LIST_PADDING : 0
+      }), flip({
         fallbackAxisSideDirection: 'end'
       }), shift(), 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/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
 import { FloatingPopover } from "../../FloatingPopover";
 import { isEmpty } from "../../../../../utils";
-import { Ul } from "../../Combobox.styles";
+import { Ul, ListWrapper } from "../../Combobox.styles";
 import { Item } from "./ui";
 export var Inner = function Inner(_ref) {
   var item = _ref.item,
@@ -35,7 +35,6 @@ export var 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.createElement(Item, {
         item: item,
         path: path,
@@ -45,12 +44,13 @@ export var Inner = function Inner(_ref) {
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
         ariaLabel: item.label
-      })
+      }),
+      isInner: true
+    }, /*#__PURE__*/React.createElement(ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/React.createElement(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.createElement(Inner, {
@@ -62,7 +62,7 @@ export var Inner = function Inner(_ref) {
         index: innerIndex,
         listWidth: listWidth
       });
-    })));
+    }))));
   }
   return /*#__PURE__*/React.createElement(Item, {
     item: item,

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

@@ -75,16 +75,16 @@ export var StyledText = /*#__PURE__*/styled.div.withConfig({
 })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
 export var Wrapper = /*#__PURE__*/styled.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;}", ";"], 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;}", ";"], tokens.itemHeight, function (_ref7) {
   var variant = _ref7.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
-  outlineSize: '0.0625rem',
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+  outlineSize: '0',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
 }));
 export var StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-1n1xg1s-12"

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IconWrapper, StyledCell, StyledCheckbox, StyledCheckboxWrapper, StyledWrapper, Wrapper as ItemWrapper } from "../Inner/ui/Item/Item.styles";
+import { Divider, Wrapper, DividerWrapper } from "./SelectAll.styles";
+export var SelectAll = function SelectAll(_ref) {
+  var variant = _ref.variant,
+    selectAllOptions = _ref.selectAllOptions;
+  return /*#__PURE__*/React.createElement(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.createElement(ItemWrapper, {
+    variant: variant
+  }, /*#__PURE__*/React.createElement(IconWrapper, {
+    variant: variant
+  }, /*#__PURE__*/React.createElement(StyledCheckboxWrapper, {
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(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.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell
+  // TODO: #1548
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , {
+    title: /*#__PURE__*/React.createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
+  }))), /*#__PURE__*/React.createElement(DividerWrapper, null, /*#__PURE__*/React.createElement(Divider, {
+    variant: variant
+  })));
+};

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { tokens, constants } from "../../Combobox.tokens";
+export var Wrapper = /*#__PURE__*/styled.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';
+}, constants.background, function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
+}, tokens.borderRadius, tokens.dropdownBorderWidth, tokens.borderRadius, tokens.dropdownBorderWidth);
+export var DividerWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-1"
+})(["background:var(", ");"], constants.background);
+export var Divider = /*#__PURE__*/styled.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' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
+}, tokens.dividerMarginRight, tokens.dividerMarginLeft, tokens.dividerColor);

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

@@ -1,3 +1,4 @@
 export * from "./Inner/Inner";
 export * from "./Target/Target";
-export * from "./VirtualList/VirtualList";
+export * from "./VirtualList/VirtualList";
+export * from "./SelectAll/SelectAll";

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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 + ""; }
@@ -89,6 +89,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
+      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
+      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
       calendarContainerWidth = _ref.calendarContainerWidth,
       calendarContainerHeight = _ref.calendarContainerHeight,
@@ -163,14 +165,14 @@ export var datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCalendarPick = _useDatePicker.handleCalendarPick,
+      onCalendarPick = _useDatePicker.handleCalendarPick,
       handleSearch = _useDatePicker.handleSearch,
       updateExternalDate = _useDatePicker.updateExternalDate;
     var handleToggle = function handleToggle(innerOpened, event) {
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== keys.Escape ? true : innerOpened;
+      var isCalendarOpen = (event === null || event === void 0 ? void 0 : event.target) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== keys.Escape ? true : innerOpened;
       if (!innerOpened && !calendarValue) {
         setCalendarValue(function (prevValue) {
           return prevValue === undefined ? null : undefined;
@@ -211,6 +213,13 @@ export var datePickerRoot = function datePickerRoot(Root) {
         onBlur(event);
       }
     };
+    var handleCalendarPick = function handleCalendarPick(date, dateInfo) {
+      onCalendarPick(date, dateInfo);
+      if (closeAfterDateSelect) {
+        setIsInnerOpen(false);
+        handleToggle(false);
+      }
+    };
     var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, {
       ref: inputRef,
       className: cls(datePickerErrorClass, datePickerSuccessClass),

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

@@ -17,7 +17,7 @@ import { focusedPathReducer } from "./reducers/focusedPathReducer";
 import { DropdownInner } from "./ui";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { Ul, base } from "./Dropdown.styles";
+import { Ul, base, ListWrapper } from "./Dropdown.styles";
 import { childrenWithProps, getItemByFocused, getItemId, getPlacement } from "./utils";
 import { classes } from "./Dropdown.tokens";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
@@ -168,7 +168,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onKeyDown: onKeyDown,
         onContextMenu: openByRightClick ? onContextMenu : undefined
       }),
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/React.createElement(Root, _extends({
       className: cx(className, classes.dropdownRoot),
       ref: ref,
@@ -177,13 +178,14 @@ export var dropdownRoot = function dropdownRoot(Root) {
       style: {
         display: 'inline-block'
       }
-    }, rest), /*#__PURE__*/React.createElement(Ul, {
+    }, rest), /*#__PURE__*/React.createElement(ListWrapper, {
+      listWidth: listWidth
+    }, /*#__PURE__*/React.createElement(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.createElement(DropdownInner, {
         key: "".concat(index, "/0"),
@@ -197,7 +199,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
         listMaxHeight: listMaxHeight || listHeight,
         listWidth: listWidth
       });
-    }), afterList))));
+    }), afterList)))));
   });
 };
 export var dropdownConfig = {

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

@@ -2,19 +2,19 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { getCorrectHeight } from "./utils";
 import { tokens, constants } from "./Dropdown.tokens";
-export var Ul = /*#__PURE__*/styled.ul.withConfig({
+export var ListWrapper = /*#__PURE__*/styled.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(tokens.width, ")");
-}, function (_ref2) {
+}, tokens.padding, tokens.borderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.borderWidth, tokens.borderColor);
+export var Ul = /*#__PURE__*/styled.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 ? getCorrectHeight(listMaxHeight) : 'auto';
 }, function (_ref3) {
-  var isInnerUl = _ref3.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0.125rem 0") : 0;
-}, tokens.padding, function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+  var listOverflow = _ref3.listOverflow;
   return listOverflow || 'visible';
-}, constants.background, constants.boxShadow, tokens.borderRadius, tokens.borderWidth, tokens.borderColor);
+}, tokens.borderRadius, tokens.borderWidth);
 export var base = /*#__PURE__*/css([""]);

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

@@ -163,8 +163,8 @@ export var 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'
 };

package/styled-components/es/components/Dropdown/FloatingPopover.js

@@ -7,6 +7,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { flip, shift, useFloating, FloatingPortal, offset as offsetMiddleware, autoPlacement, autoUpdate } from '@floating-ui/react';
 import React, { forwardRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
+// TODO: #2003
+var LIST_PADDING = 2;
 var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var target = _ref.target,
     children = _ref.children,
@@ -14,8 +16,7 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onToggle = _ref.onToggle,
     placement = _ref.placement,
     portal = _ref.portal,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
+    offset = _ref.offset,
     isInner = _ref.isInner,
     trigger = _ref.trigger,
     zIndex = _ref.zIndex;
@@ -30,8 +31,8 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
       placement: placement === 'auto' ? undefined : placement,
       open: opened,
       middleware: [placement === 'auto' && autoPlacement(), offsetMiddleware({
-        mainAxis: offset[1],
-        crossAxis: offset[0]
+        mainAxis: (offset === null || offset === void 0 ? void 0 : offset[1]) || (isInner ? LIST_PADDING * 2 : 0),
+        crossAxis: (offset === null || offset === void 0 ? void 0 : offset[0]) || (isInner ? -LIST_PADDING : 0)
       }), flip({
         fallbackAxisSideDirection: 'end'
       }), shift()]

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
 import { DropdownItem } from "../DropdownItem/DropdownItem";
-import { Ul } from "../../Dropdown.styles";
+import { Ul, ListWrapper } from "../../Dropdown.styles";
 import { FloatingPopover } from "../../FloatingPopover";
 import { getPlacement } from "../../utils";
 var DropdownInner = function DropdownInner(_ref) {
@@ -49,13 +49,13 @@ var DropdownInner = function DropdownInner(_ref) {
         ariaLabel: item.label
       }),
       isInner: true
+    }, /*#__PURE__*/React.createElement(ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/React.createElement(Ul, {
       id: listId,
       role: "group",
-      isInnerUl: true,
       listMaxHeight: listMaxHeight,
-      listOverflow: listOverflow,
-      listWidth: listWidth
+      listOverflow: listOverflow
     }, item.items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/React.createElement(DropdownInner, {
         key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -69,7 +69,7 @@ var DropdownInner = function DropdownInner(_ref) {
         listOverflow: listOverflow,
         listWidth: listWidth
       });
-    })));
+    }))));
   }
   return /*#__PURE__*/React.createElement(DropdownItem, {
     item: item,