@salutejs/plasma-new-hope 0.325.0-dev.0 → 0.326.0-canary.1986.15321507276.0

package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx

@@ -13,6 +13,8 @@ import { Select } from './Select';
 type StorySelectProps = ComponentProps<typeof Select> & {
     enableContentLeft?: boolean;
     hasHint?: boolean;
+    selectAllLabel?: string;
+    selectAllSticky?: boolean;
 };
 
 const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white'];
@@ -997,3 +999,187 @@ export const Common: StoryObj<StorySelectProps> = {
     },
     render: (args) => <CommonStory {...args} />,
 };
+
+const flatItems = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'rio_de_janeiro',
+        label: 'Рио-де-Жанейро',
+    },
+    {
+        value: 'sao_paulo',
+        label: 'Сан-Паулу',
+    },
+    {
+        value: 'buenos_aires',
+        label: 'Буэнос-Айрес',
+    },
+    {
+        value: 'cordoba',
+        label: 'Кордова',
+    },
+    {
+        value: 'bogota',
+        label: 'Богота',
+    },
+    {
+        value: 'medellin',
+        label: 'Медельин',
+    },
+    {
+        value: 'paris',
+        label: 'Париж',
+    },
+    {
+        value: 'lyon',
+        label: 'Лион',
+    },
+    {
+        value: 'berlin',
+        label: 'Берлин',
+    },
+    {
+        value: 'munich',
+        label: 'Мюнхен',
+    },
+    {
+        value: 'rome',
+        label: 'Рим',
+    },
+    {
+        value: 'milan',
+        label: 'Милан',
+    },
+    {
+        value: 'madrid',
+        label: 'Мадрид',
+    },
+    {
+        value: 'barcelona',
+        label: 'Барселона',
+    },
+    {
+        value: 'london',
+        label: 'Лондон',
+    },
+    {
+        value: 'manchester',
+        label: 'Манчестер',
+    },
+    {
+        value: 'beijing',
+        label: 'Пекин',
+    },
+    {
+        value: 'shanghai',
+        label: 'Шанхай',
+    },
+    {
+        value: 'tokyo',
+        label: 'Токио',
+    },
+    {
+        value: 'osaka',
+        label: 'Осака',
+    },
+    {
+        value: 'delhi',
+        label: 'Дели',
+    },
+    {
+        value: 'mumbai',
+        label: 'Мумбаи',
+    },
+    {
+        value: 'seoul',
+        label: 'Сеул',
+    },
+    {
+        value: 'busan',
+        label: 'Пусан',
+    },
+    {
+        value: 'bangkok',
+        label: 'Бангкок',
+    },
+    {
+        value: 'phuket',
+        label: 'Пхукет',
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+    },
+];
+
+const SelectAllStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState([]);
+    const [checked, setChecked] = useState(false);
+    const [indeterminate, setIndeterminate] = useState(false);
+
+    const handleClick = () => {
+        if (checked && !indeterminate) {
+            setValue([]);
+        } else {
+            setValue(flatItems.map((item) => item.value));
+        }
+    };
+
+    React.useEffect(() => {
+        if (value.length === 0) {
+            setChecked(false);
+            setIndeterminate(false);
+        } else if (value.length === flatItems.length) {
+            setChecked(true);
+            setIndeterminate(false);
+        } else {
+            setChecked(true);
+            setIndeterminate(true);
+        }
+    }, [value]);
+
+    return (
+        <div style={{ width: '400px' }}>
+            <Select
+                placeholder="Placeholder"
+                multiselect
+                items={flatItems}
+                value={value}
+                onChange={setValue}
+                listOverflow="auto"
+                listMaxHeight="300px"
+                selectAllOptions={{
+                    sticky: args?.selectAllSticky || false,
+                    label: args?.selectAllLabel,
+                    checked,
+                    indeterminate,
+                    onClick: handleClick,
+                }}
+            />
+        </div>
+    );
+};
+
+export const SelectAll: StoryObj<StorySelectProps> = {
+    render: (args) => <SelectAllStory {...args} />,
+    argTypes: {
+        selectAllSticky: {
+            control: 'boolean',
+        },
+        selectAllLabel: {
+            control: 'text',
+        },
+    },
+    args: {
+        selectAllSticky: false,
+        selectAllLabel: 'Выбрать все',
+    },
+    parameters: {
+        controls: {
+            include: ['selectAllSticky', 'selectAllLabel'],
+        },
+    },
+};

package/emotion/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/emotion/es/components/Combobox/ComboboxNew/Combobox.js

@@ -22,7 +22,7 @@ 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";
@@ -543,7 +543,10 @@ 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__*/React.createElement(SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
       items: filteredItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll

package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -217,7 +217,14 @@ 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',

package/emotion/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/emotion/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js

@@ -0,0 +1,23 @@
+import _styled from "@emotion/styled/base";
+import { tokens, constants } from "../../Combobox.tokens";
+export var Wrapper = /*#__PURE__*/_styled("div", {
+  target: "e1syfhrs2",
+  label: "plasma-new-hope__Wrapper"
+})("position:", function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'static';
+}, ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", constants.background, ");margin-bottom:", function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
+}, ";border-top-left-radius:calc(var(", tokens.borderRadius, ") - 0.125rem - var(", tokens.dropdownBorderWidth, ", 0rem));border-top-right-radius:calc(var(", tokens.borderRadius, ") - 0.125rem - var(", tokens.dropdownBorderWidth, ", 0rem));" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0QWxsL1NlbGVjdEFsbC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzBGIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0QWxsL1NlbGVjdEFsbC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IENvbWJvYm94UHJvcHMgfSBmcm9tICcuLi8uLi9Db21ib2JveC50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMsIGNvbnN0YW50cyB9IGZyb20gJy4uLy4uL0NvbWJvYm94LnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdjx7IHZhcmlhbnQ6IENvbWJvYm94UHJvcHNbJ3ZhcmlhbnQnXTsgc3RpY2t5PzogYm9vbGVhbiB9PmBcbiAgICBwb3NpdGlvbjogJHsoeyBzdGlja3kgfSkgPT4gKHN0aWNreSA/ICdzdGlja3knIDogJ3N0YXRpYycpfTtcbiAgICB6LWluZGV4OiAxMDtcbiAgICB0b3A6IDA7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGJhY2tncm91bmQ6IHZhcigke2NvbnN0YW50cy5iYWNrZ3JvdW5kfSk7XG4gICAgbWFyZ2luLWJvdHRvbTogJHsoeyB2YXJpYW50IH0pID0+XG4gICAgICAgIGB2YXIoJHt2YXJpYW50ID09PSAndGlnaHQnID8gdG9rZW5zLmRpdmlkZXJNYXJnaW5Cb3R0b21UaWdodCA6IHRva2Vucy5kaXZpZGVyTWFyZ2luQm90dG9tfSlgfTtcbiAgICBib3JkZXItdG9wLWxlZnQtcmFkaXVzOiBjYWxjKHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KSAtIDAuMTI1cmVtIC0gdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG4gICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IGNhbGModmFyKCR7dG9rZW5zLmJvcmRlclJhZGl1c30pIC0gMC4xMjVyZW0gLSB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luOiAwIGNhbGMoMC4xMjVyZW0gKyB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IERpdmlkZXIgPSBzdHlsZWQuZGl2PHsgdmFyaWFudDogQ29tYm9ib3hQcm9wc1sndmFyaWFudCddIH0+YFxuICAgIGhlaWdodDogMC4wNjI1cmVtO1xuICAgIG1hcmdpbi10b3A6ICR7KHsgdmFyaWFudCB9KSA9PlxuICAgICAgICBgdmFyKCR7dmFyaWFudCA9PT0gJ3RpZ2h0JyA/IHRva2Vucy5kaXZpZGVyTWFyZ2luVG9wVGlnaHQgOiB0b2tlbnMuZGl2aWRlck1hcmdpblRvcH0pYH07XG4gICAgbWFyZ2luLXJpZ2h0OiB2YXIoJHt0b2tlbnMuZGl2aWRlck1hcmdpblJpZ2h0fSk7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5kaXZpZGVyTWFyZ2luTGVmdH0pO1xuICAgIGJhY2tncm91bmQ6IHZhcigke3Rva2Vucy5kaXZpZGVyQ29sb3J9KTtcbmA7XG4iXX0= */"));
+export var DividerWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1syfhrs1",
+  label: "plasma-new-hope__DividerWrapper"
+})("margin:0 calc(0.125rem + var(", tokens.dropdownBorderWidth, ", 0rem));background:var(", constants.background, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0QWxsL1NlbGVjdEFsbC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0J3QyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvbWJvYm94L0NvbWJvYm94TmV3L3VpL1NlbGVjdEFsbC9TZWxlY3RBbGwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBDb21ib2JveFByb3BzIH0gZnJvbSAnLi4vLi4vQ29tYm9ib3gudHlwZXMnO1xuaW1wb3J0IHsgdG9rZW5zLCBjb25zdGFudHMgfSBmcm9tICcuLi8uLi9Db21ib2JveC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXY8eyB2YXJpYW50OiBDb21ib2JveFByb3BzWyd2YXJpYW50J107IHN0aWNreT86IGJvb2xlYW4gfT5gXG4gICAgcG9zaXRpb246ICR7KHsgc3RpY2t5IH0pID0+IChzdGlja3kgPyAnc3RpY2t5JyA6ICdzdGF0aWMnKX07XG4gICAgei1pbmRleDogMTA7XG4gICAgdG9wOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuICAgIG1hcmdpbi1ib3R0b206ICR7KHsgdmFyaWFudCB9KSA9PlxuICAgICAgICBgdmFyKCR7dmFyaWFudCA9PT0gJ3RpZ2h0JyA/IHRva2Vucy5kaXZpZGVyTWFyZ2luQm90dG9tVGlnaHQgOiB0b2tlbnMuZGl2aWRlck1hcmdpbkJvdHRvbX0pYH07XG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogY2FsYyh2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSkgLSAwLjEyNXJlbSAtIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkpO1xuICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiBjYWxjKHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KSAtIDAuMTI1cmVtIC0gdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG5gO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbjogMCBjYWxjKDAuMTI1cmVtICsgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7Y29uc3RhbnRzLmJhY2tncm91bmR9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyID0gc3R5bGVkLmRpdjx7IHZhcmlhbnQ6IENvbWJvYm94UHJvcHNbJ3ZhcmlhbnQnXSB9PmBcbiAgICBoZWlnaHQ6IDAuMDYyNXJlbTtcbiAgICBtYXJnaW4tdG9wOiAkeyh7IHZhcmlhbnQgfSkgPT5cbiAgICAgICAgYHZhcigke3ZhcmlhbnQgPT09ICd0aWdodCcgPyB0b2tlbnMuZGl2aWRlck1hcmdpblRvcFRpZ2h0IDogdG9rZW5zLmRpdmlkZXJNYXJnaW5Ub3B9KWB9O1xuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLmRpdmlkZXJNYXJnaW5SaWdodH0pO1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoJHt0b2tlbnMuZGl2aWRlck1hcmdpbkxlZnR9KTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuZGl2aWRlckNvbG9yfSk7XG5gO1xuIl19 */"));
+export var Divider = /*#__PURE__*/_styled("div", {
+  target: "e1syfhrs0",
+  label: "plasma-new-hope__Divider"
+})("height:0.0625rem;margin-top:", function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
+}, ";margin-right:var(", tokens.dividerMarginRight, ");margin-left:var(", tokens.dividerMarginLeft, ");background:var(", tokens.dividerColor, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0QWxsL1NlbGVjdEFsbC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJ3RSIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvbWJvYm94L0NvbWJvYm94TmV3L3VpL1NlbGVjdEFsbC9TZWxlY3RBbGwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBDb21ib2JveFByb3BzIH0gZnJvbSAnLi4vLi4vQ29tYm9ib3gudHlwZXMnO1xuaW1wb3J0IHsgdG9rZW5zLCBjb25zdGFudHMgfSBmcm9tICcuLi8uLi9Db21ib2JveC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXY8eyB2YXJpYW50OiBDb21ib2JveFByb3BzWyd2YXJpYW50J107IHN0aWNreT86IGJvb2xlYW4gfT5gXG4gICAgcG9zaXRpb246ICR7KHsgc3RpY2t5IH0pID0+IChzdGlja3kgPyAnc3RpY2t5JyA6ICdzdGF0aWMnKX07XG4gICAgei1pbmRleDogMTA7XG4gICAgdG9wOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuICAgIG1hcmdpbi1ib3R0b206ICR7KHsgdmFyaWFudCB9KSA9PlxuICAgICAgICBgdmFyKCR7dmFyaWFudCA9PT0gJ3RpZ2h0JyA/IHRva2Vucy5kaXZpZGVyTWFyZ2luQm90dG9tVGlnaHQgOiB0b2tlbnMuZGl2aWRlck1hcmdpbkJvdHRvbX0pYH07XG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogY2FsYyh2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSkgLSAwLjEyNXJlbSAtIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkpO1xuICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiBjYWxjKHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KSAtIDAuMTI1cmVtIC0gdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG5gO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbjogMCBjYWxjKDAuMTI1cmVtICsgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7Y29uc3RhbnRzLmJhY2tncm91bmR9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyID0gc3R5bGVkLmRpdjx7IHZhcmlhbnQ6IENvbWJvYm94UHJvcHNbJ3ZhcmlhbnQnXSB9PmBcbiAgICBoZWlnaHQ6IDAuMDYyNXJlbTtcbiAgICBtYXJnaW4tdG9wOiAkeyh7IHZhcmlhbnQgfSkgPT5cbiAgICAgICAgYHZhcigke3ZhcmlhbnQgPT09ICd0aWdodCcgPyB0b2tlbnMuZGl2aWRlck1hcmdpblRvcFRpZ2h0IDogdG9rZW5zLmRpdmlkZXJNYXJnaW5Ub3B9KWB9O1xuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLmRpdmlkZXJNYXJnaW5SaWdodH0pO1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoJHt0b2tlbnMuZGl2aWRlck1hcmdpbkxlZnR9KTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuZGl2aWRlckNvbG9yfSk7XG5gO1xuIl19 */"));

package/emotion/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/emotion/es/components/Select/FloatingPopover.js

@@ -8,6 +8,8 @@ import { flip, shift, size, useFloating, FloatingPortal, offset as offsetMiddlew
 import React, { forwardRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
 import { getPlacement, getFallbackPlacements } from "./utils";
+// TODO: #2003
+var LIST_PADDING = 2;
 var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var target = _ref.target,
     children = _ref.children,
@@ -16,9 +18,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, {
@@ -29,14 +30,17 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       placement: getPlacement(placement),
       open: opened,
-      middleware: [offsetMiddleware(offset), flip({
+      middleware: [offsetMiddleware({
+        mainAxis: isInner ? 4 : 0,
+        alignmentAxis: isInner ? -LIST_PADDING : 0
+      }), flip({
         fallbackPlacements: getFallbackPlacements(placement)
       }), 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/emotion/es/components/Select/Select.js

@@ -15,10 +15,10 @@ import { isEmpty } from "../../utils";
 import { useOutsideClick } from "../../hooks";
 import { useKeyNavigation, getItemByFocused } from "./hooks/useKeyboardNavigation";
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView } from "./utils";
-import { Inner, Target, VirtualList } from "./ui";
+import { Inner, Target, VirtualList, SelectAll } from "./ui";
 import { pathReducer, focusedPathReducer } from "./reducers";
 import { usePathMaps } from "./hooks/usePathMaps";
-import { Ul, base } from "./Select.styles";
+import { Ul, base, ListWrapper } from "./Select.styles";
 import { FloatingPopover } from "./FloatingPopover";
 import { SelectNative } from "./ui/SelectNative/SelectNative";
 import { Context } from "./Select.context";
@@ -402,7 +402,8 @@ export var selectRoot = function selectRoot(Root) {
           hintProps: hintProps
         });
       },
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
@@ -410,17 +411,24 @@ export var selectRoot = function selectRoot(Root) {
       chipView: chipView,
       disabled: disabled,
       readOnly: readOnly
-    }, rest), /*#__PURE__*/React.createElement(Ul, {
+    }, rest), /*#__PURE__*/React.createElement(ListWrapper, {
+      listWidth: listWidth
+    }, /*#__PURE__*/React.createElement(Ul, {
       role: "tree",
       id: "".concat(treeId, "_tree_level_1"),
       "aria-multiselectable": Boolean(props.multiselect),
       listOverflow: listOverflow,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: virtual ? undefined : handleScroll,
-      listWidth: listWidth,
       ref: targetRef,
       virtual: virtual
-    }, beforeList, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+    }, beforeList, props.multiselect && props.selectAllOptions &&
+    /*#__PURE__*/
+    // TODO: #2004
+    React.createElement(SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
       items: transformedItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll
@@ -434,7 +442,7 @@ export var selectRoot = function selectRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    }), afterList)))));
+    }), afterList))))));
   });
 };
 export var selectConfig = {

package/emotion/es/components/Select/Select.styles.js

@@ -2,13 +2,17 @@ import _styled from "@emotion/styled/base";
 import { css } from '@emotion/react';
 import { getCorrectHeight } from "./utils";
 import { tokens, constants } from "./Select.tokens";
+export var ListWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1ea4cwt1",
+  label: "plasma-new-hope__ListWrapper"
+})("width:", function (_ref) {
+  var listWidth = _ref.listWidth;
+  return listWidth || '100%';
+}, ";padding:calc(var(", tokens.padding, ") + var(", tokens.dropdownBorderWidth, ", 0rem));border-radius:var(", tokens.borderRadius, ");box-sizing:border-box;background:var(", constants.background, ");box-shadow:", constants.boxShadow, ",inset 0 0 0 var(", tokens.dropdownBorderWidth, ", 0rem) var(", tokens.dropdownBorderColor, ", transparent);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU0UiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9TZWxlY3QvU2VsZWN0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgZ2V0Q29ycmVjdEhlaWdodCB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgU2VsZWN0UHJvcHMgfSBmcm9tICcuL1NlbGVjdC50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMsIGNvbnN0YW50cyB9IGZyb20gJy4vU2VsZWN0LnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBMaXN0V3JhcHBlciA9IHN0eWxlZC5kaXY8e1xuICAgIGxpc3RXaWR0aD86IFNlbGVjdFByb3BzWydsaXN0V2lkdGgnXTtcbn0+YFxuICAgIHdpZHRoOiAkeyh7IGxpc3RXaWR0aCB9KSA9PiBsaXN0V2lkdGggfHwgJzEwMCUnfTtcbiAgICBwYWRkaW5nOiBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKyB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6ICR7Y29uc3RhbnRzLmJveFNoYWRvd30sXG4gICAgICAgIGluc2V0IDAgMCAwIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyQ29sb3J9LCB0cmFuc3BhcmVudCk7XG5gO1xuXG5leHBvcnQgY29uc3QgVWwgPSBzdHlsZWQudWw8e1xuICAgIHZpcnR1YWw6IFNlbGVjdFByb3BzWyd2aXJ0dWFsJ107XG4gICAgbGlzdE92ZXJmbG93PzogU2VsZWN0UHJvcHNbJ2xpc3RPdmVyZmxvdyddO1xuICAgIGxpc3RNYXhIZWlnaHQ/OiBTZWxlY3RQcm9wc1snbGlzdE1heEhlaWdodCddO1xuICAgIGlzSW5uZXJVbD86IGJvb2xlYW47XG59PmBcbiAgICBtYXgtaGVpZ2h0OiAkeyh7IHZpcnR1YWwsIGxpc3RNYXhIZWlnaHQgfSkgPT5cbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLW5lc3RlZC10ZXJuYXJ5XG4gICAgICAgIHZpcnR1YWwgPyAnYXV0bycgOiBsaXN0TWF4SGVpZ2h0ID8gZ2V0Q29ycmVjdEhlaWdodChsaXN0TWF4SGVpZ2h0KSA6ICdhdXRvJ307XG4gICAgb3ZlcmZsb3cteTogJHsoeyB2aXJ0dWFsLCBsaXN0T3ZlcmZsb3cgfSkgPT4gKHZpcnR1YWwgPyAndmlzaWJsZScgOiBsaXN0T3ZlcmZsb3cgfHwgJ3Zpc2libGUnKX07XG4gICAgYm9yZGVyLXJhZGl1czogY2FsYyh2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSkgLSAwLjEyNXJlbSAtIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkpO1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));
 export var Ul = /*#__PURE__*/_styled("ul", {
   target: "e1ea4cwt0",
   label: "plasma-new-hope__Ul"
-})("background:var(", constants.background, ");box-shadow:", constants.boxShadow, ",inset 0 0 0 var(", tokens.dropdownBorderWidth, ", 0rem) var(", tokens.dropdownBorderColor, ", transparent);border-radius:var(", tokens.borderRadius, ");width:", function (_ref) {
-  var listWidth = _ref.listWidth;
-  return listWidth || '100%';
-}, ";max-height:", function (_ref2) {
+})("max-height:", function (_ref2) {
   var virtual = _ref2.virtual,
     listMaxHeight = _ref2.listMaxHeight;
   return (
@@ -19,8 +23,5 @@ export var Ul = /*#__PURE__*/_styled("ul", {
   var virtual = _ref3.virtual,
     listOverflow = _ref3.listOverflow;
   return virtual ? 'visible' : listOverflow || 'visible';
-}, ";margin:", function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : "var(".concat(tokens.margin, ") 0 0 0");
-}, ";padding:calc(var(", tokens.padding, ") + var(", tokens.dropdownBorderWidth, ", 0rem)) 0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYUUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9TZWxlY3QvU2VsZWN0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgZ2V0Q29ycmVjdEhlaWdodCB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgU2VsZWN0UHJvcHMgfSBmcm9tICcuL1NlbGVjdC50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMsIGNvbnN0YW50cyB9IGZyb20gJy4vU2VsZWN0LnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBVbCA9IHN0eWxlZC51bDx7XG4gICAgdmlydHVhbDogU2VsZWN0UHJvcHNbJ3ZpcnR1YWwnXTtcbiAgICBsaXN0T3ZlcmZsb3c/OiBTZWxlY3RQcm9wc1snbGlzdE92ZXJmbG93J107XG4gICAgbGlzdE1heEhlaWdodD86IFNlbGVjdFByb3BzWydsaXN0TWF4SGVpZ2h0J107XG4gICAgbGlzdFdpZHRoPzogU2VsZWN0UHJvcHNbJ2xpc3RXaWR0aCddO1xuICAgIGlzSW5uZXJVbD86IGJvb2xlYW47XG59PmBcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6ICR7Y29uc3RhbnRzLmJveFNoYWRvd30sXG4gICAgICAgIGluc2V0IDAgMCAwIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyQ29sb3J9LCB0cmFuc3BhcmVudCk7XG5cbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG4gICAgd2lkdGg6ICR7KHsgbGlzdFdpZHRoIH0pID0+IGxpc3RXaWR0aCB8fCAnMTAwJSd9O1xuXG4gICAgbWF4LWhlaWdodDogJHsoeyB2aXJ0dWFsLCBsaXN0TWF4SGVpZ2h0IH0pID0+XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1uZXN0ZWQtdGVybmFyeVxuICAgICAgICB2aXJ0dWFsID8gJ2F1dG8nIDogbGlzdE1heEhlaWdodCA/IGdldENvcnJlY3RIZWlnaHQobGlzdE1heEhlaWdodCkgOiAnYXV0byd9O1xuICAgIG92ZXJmbG93LXk6ICR7KHsgdmlydHVhbCwgbGlzdE92ZXJmbG93IH0pID0+ICh2aXJ0dWFsID8gJ3Zpc2libGUnIDogbGlzdE92ZXJmbG93IHx8ICd2aXNpYmxlJyl9O1xuXG4gICAgbWFyZ2luOiAkeyh7IGlzSW5uZXJVbCB9KSA9PlxuICAgICAgICBpc0lubmVyVWwgPyBgY2FsYyh2YXIoJHt0b2tlbnMucGFkZGluZ30pICogLTEpIDAgMCAwYCA6IGB2YXIoJHt0b2tlbnMubWFyZ2lufSkgMCAwIDBgfTtcbiAgICBwYWRkaW5nOiBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKyB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pKSAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));
-export var base = /*#__PURE__*/css(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0J1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlbGVjdC9TZWxlY3Quc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBnZXRDb3JyZWN0SGVpZ2h0IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyBTZWxlY3RQcm9wcyB9IGZyb20gJy4vU2VsZWN0LnR5cGVzJztcbmltcG9ydCB7IHRva2VucywgY29uc3RhbnRzIH0gZnJvbSAnLi9TZWxlY3QudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IFVsID0gc3R5bGVkLnVsPHtcbiAgICB2aXJ0dWFsOiBTZWxlY3RQcm9wc1sndmlydHVhbCddO1xuICAgIGxpc3RPdmVyZmxvdz86IFNlbGVjdFByb3BzWydsaXN0T3ZlcmZsb3cnXTtcbiAgICBsaXN0TWF4SGVpZ2h0PzogU2VsZWN0UHJvcHNbJ2xpc3RNYXhIZWlnaHQnXTtcbiAgICBsaXN0V2lkdGg/OiBTZWxlY3RQcm9wc1snbGlzdFdpZHRoJ107XG4gICAgaXNJbm5lclVsPzogYm9vbGVhbjtcbn0+YFxuICAgIGJhY2tncm91bmQ6IHZhcigke2NvbnN0YW50cy5iYWNrZ3JvdW5kfSk7XG4gICAgYm94LXNoYWRvdzogJHtjb25zdGFudHMuYm94U2hhZG93fSxcbiAgICAgICAgaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJDb2xvcn0sIHRyYW5zcGFyZW50KTtcblxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcbiAgICB3aWR0aDogJHsoeyBsaXN0V2lkdGggfSkgPT4gbGlzdFdpZHRoIHx8ICcxMDAlJ307XG5cbiAgICBtYXgtaGVpZ2h0OiAkeyh7IHZpcnR1YWwsIGxpc3RNYXhIZWlnaHQgfSkgPT5cbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLW5lc3RlZC10ZXJuYXJ5XG4gICAgICAgIHZpcnR1YWwgPyAnYXV0bycgOiBsaXN0TWF4SGVpZ2h0ID8gZ2V0Q29ycmVjdEhlaWdodChsaXN0TWF4SGVpZ2h0KSA6ICdhdXRvJ307XG4gICAgb3ZlcmZsb3cteTogJHsoeyB2aXJ0dWFsLCBsaXN0T3ZlcmZsb3cgfSkgPT4gKHZpcnR1YWwgPyAndmlzaWJsZScgOiBsaXN0T3ZlcmZsb3cgfHwgJ3Zpc2libGUnKX07XG5cbiAgICBtYXJnaW46ICR7KHsgaXNJbm5lclVsIH0pID0+XG4gICAgICAgIGlzSW5uZXJVbCA/IGBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKiAtMSkgMCAwIDBgIDogYHZhcigke3Rva2Vucy5tYXJnaW59KSAwIDAgMGB9O1xuICAgIHBhZGRpbmc6IGNhbGModmFyKCR7dG9rZW5zLnBhZGRpbmd9KSArIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkpIDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BgO1xuIl19 */"));
+}, ";border-radius:calc(var(", tokens.borderRadius, ") - 0.125rem - var(", tokens.dropdownBorderWidth, ", 0rem));margin:0;padding:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGdldENvcnJlY3RIZWlnaHQgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IFNlbGVjdFByb3BzIH0gZnJvbSAnLi9TZWxlY3QudHlwZXMnO1xuaW1wb3J0IHsgdG9rZW5zLCBjb25zdGFudHMgfSBmcm9tICcuL1NlbGVjdC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgTGlzdFdyYXBwZXIgPSBzdHlsZWQuZGl2PHtcbiAgICBsaXN0V2lkdGg/OiBTZWxlY3RQcm9wc1snbGlzdFdpZHRoJ107XG59PmBcbiAgICB3aWR0aDogJHsoeyBsaXN0V2lkdGggfSkgPT4gbGlzdFdpZHRoIHx8ICcxMDAlJ307XG4gICAgcGFkZGluZzogY2FsYyh2YXIoJHt0b2tlbnMucGFkZGluZ30pICsgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLmJvcmRlclJhZGl1c30pO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7Y29uc3RhbnRzLmJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiAke2NvbnN0YW50cy5ib3hTaGFkb3d9LFxuICAgICAgICBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlckNvbG9yfSwgdHJhbnNwYXJlbnQpO1xuYDtcblxuZXhwb3J0IGNvbnN0IFVsID0gc3R5bGVkLnVsPHtcbiAgICB2aXJ0dWFsOiBTZWxlY3RQcm9wc1sndmlydHVhbCddO1xuICAgIGxpc3RPdmVyZmxvdz86IFNlbGVjdFByb3BzWydsaXN0T3ZlcmZsb3cnXTtcbiAgICBsaXN0TWF4SGVpZ2h0PzogU2VsZWN0UHJvcHNbJ2xpc3RNYXhIZWlnaHQnXTtcbiAgICBpc0lubmVyVWw/OiBib29sZWFuO1xufT5gXG4gICAgbWF4LWhlaWdodDogJHsoeyB2aXJ0dWFsLCBsaXN0TWF4SGVpZ2h0IH0pID0+XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1uZXN0ZWQtdGVybmFyeVxuICAgICAgICB2aXJ0dWFsID8gJ2F1dG8nIDogbGlzdE1heEhlaWdodCA/IGdldENvcnJlY3RIZWlnaHQobGlzdE1heEhlaWdodCkgOiAnYXV0byd9O1xuICAgIG92ZXJmbG93LXk6ICR7KHsgdmlydHVhbCwgbGlzdE92ZXJmbG93IH0pID0+ICh2aXJ0dWFsID8gJ3Zpc2libGUnIDogbGlzdE92ZXJmbG93IHx8ICd2aXNpYmxlJyl9O1xuICAgIGJvcmRlci1yYWRpdXM6IGNhbGModmFyKCR7dG9rZW5zLmJvcmRlclJhZGl1c30pIC0gMC4xMjVyZW0gLSB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJXaWR0aH0sIDByZW0pKTtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYGA7XG4iXX0= */"));
+export var base = /*#__PURE__*/css(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0N1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlbGVjdC9TZWxlY3Quc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBnZXRDb3JyZWN0SGVpZ2h0IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyBTZWxlY3RQcm9wcyB9IGZyb20gJy4vU2VsZWN0LnR5cGVzJztcbmltcG9ydCB7IHRva2VucywgY29uc3RhbnRzIH0gZnJvbSAnLi9TZWxlY3QudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IExpc3RXcmFwcGVyID0gc3R5bGVkLmRpdjx7XG4gICAgbGlzdFdpZHRoPzogU2VsZWN0UHJvcHNbJ2xpc3RXaWR0aCddO1xufT5gXG4gICAgd2lkdGg6ICR7KHsgbGlzdFdpZHRoIH0pID0+IGxpc3RXaWR0aCB8fCAnMTAwJSd9O1xuICAgIHBhZGRpbmc6IGNhbGModmFyKCR7dG9rZW5zLnBhZGRpbmd9KSArIHZhcigke3Rva2Vucy5kcm9wZG93bkJvcmRlcldpZHRofSwgMHJlbSkpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJhY2tncm91bmQ6IHZhcigke2NvbnN0YW50cy5iYWNrZ3JvdW5kfSk7XG4gICAgYm94LXNoYWRvdzogJHtjb25zdGFudHMuYm94U2hhZG93fSxcbiAgICAgICAgaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSB2YXIoJHt0b2tlbnMuZHJvcGRvd25Cb3JkZXJDb2xvcn0sIHRyYW5zcGFyZW50KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBVbCA9IHN0eWxlZC51bDx7XG4gICAgdmlydHVhbDogU2VsZWN0UHJvcHNbJ3ZpcnR1YWwnXTtcbiAgICBsaXN0T3ZlcmZsb3c/OiBTZWxlY3RQcm9wc1snbGlzdE92ZXJmbG93J107XG4gICAgbGlzdE1heEhlaWdodD86IFNlbGVjdFByb3BzWydsaXN0TWF4SGVpZ2h0J107XG4gICAgaXNJbm5lclVsPzogYm9vbGVhbjtcbn0+YFxuICAgIG1heC1oZWlnaHQ6ICR7KHsgdmlydHVhbCwgbGlzdE1heEhlaWdodCB9KSA9PlxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tbmVzdGVkLXRlcm5hcnlcbiAgICAgICAgdmlydHVhbCA/ICdhdXRvJyA6IGxpc3RNYXhIZWlnaHQgPyBnZXRDb3JyZWN0SGVpZ2h0KGxpc3RNYXhIZWlnaHQpIDogJ2F1dG8nfTtcbiAgICBvdmVyZmxvdy15OiAkeyh7IHZpcnR1YWwsIGxpc3RPdmVyZmxvdyB9KSA9PiAodmlydHVhbCA/ICd2aXNpYmxlJyA6IGxpc3RPdmVyZmxvdyB8fCAndmlzaWJsZScpfTtcbiAgICBib3JkZXItcmFkaXVzOiBjYWxjKHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KSAtIDAuMTI1cmVtIC0gdmFyKCR7dG9rZW5zLmRyb3Bkb3duQm9yZGVyV2lkdGh9LCAwcmVtKSk7XG4gICAgbWFyZ2luOiAwO1xuICAgIHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BgO1xuIl19 */"));

package/emotion/es/components/Select/Select.template-doc.mdx

@@ -508,6 +508,64 @@ Select может выглядеть как Button и как Textfield. За э
         }
         ```
     </TabItem>
+    <TabItem value="selectAll" label="Выбрать всё">
+        Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiselect`:
+        ```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" }}>
+                    <Select
+                        label="Label"
+                        placeholder="Placeholder"
+                        items={items}
+                        multiselect
+                        selectAllOptions={{
+                            checked,
+                            onClick: () => setChecked(prev => !prev)
+                        }}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 

package/emotion/es/components/Select/Select.tokens.js

@@ -55,6 +55,13 @@ export var tokens = {
   checkboxTriggerBorderWidth: '--plasma-select-checkbox-trigger-border-width',
   indicatorSize: '--plasma-select-indicator-size',
   targetHeight: '--plasma-select-target-height',
+  dividerMarginTop: '--plasma-select-divider-margin-top',
+  dividerMarginTopTight: '--plasma-select-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-select-divider-margin-right',
+  dividerMarginBottom: '--plasma-select-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-select-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-select-divider-margin-left',
+  dividerColor: '--plasma-select-divider-color',
   // Токены для Button
   buttonColor: '--plasma-select-button-color',
   buttonColorHover: '--plasma-select-button-color-hover',
@@ -228,7 +235,7 @@ export var constants = {
   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',
@@ -241,5 +248,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/emotion/es/components/Select/hooks/useKeyboardNavigation.js

@@ -142,7 +142,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
             });
             break;
           }
-          if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled) {
+          if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
             break;
           }
           handlePressDown(_currentItem);
@@ -152,7 +152,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
         {
           event.preventDefault();
           var _currentItem2 = getItemByFocused(focusedPath, focusedToValueMap);
-          if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
+          if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
             break;
           }
           if (!path[0]) {