@salutejs/plasma-new-hope 0.325.0-canary.1986.15254197327.0 → 0.325.0-canary.1992.15255012441.0

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

@@ -13,8 +13,6 @@ 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'];
@@ -999,187 +997,3 @@ 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,64 +436,6 @@ 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, SelectAll } from "./ui";
+import { Inner, StyledTextField, VirtualList } from "./ui";
 import { pathReducer, focusedPathReducer } from "./reducers";
 import { getPathMap, getTreeMaps } from "./hooks/getPathMaps";
 import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState, StyledLeftHelper } from "./Combobox.styles";
@@ -543,10 +543,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       className: classes.emptyStateWrapper,
       size: size,
       description: emptyStateDescription || 'Ничего не найдено'
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, props.multiple && props.selectAllOptions && /*#__PURE__*/React.createElement(SelectAll, {
-      selectAllOptions: props.selectAllOptions,
-      variant: variant
-    }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
       items: filteredItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll

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

@@ -217,14 +217,7 @@ 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',
-  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'
+  disclosureIconMargin: '--plasma-select-disclosure-icon-margin'
 };
 export var constants = {
   focusColor: '--surface-accent',

package/emotion/es/components/Combobox/ComboboxNew/ui/index.js

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

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

@@ -15,7 +15,7 @@ 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, SelectAll } from "./ui";
+import { Inner, Target, VirtualList } from "./ui";
 import { pathReducer, focusedPathReducer } from "./reducers";
 import { usePathMaps } from "./hooks/usePathMaps";
 import { Ul, base } from "./Select.styles";
@@ -420,10 +420,7 @@ export var selectRoot = function selectRoot(Root) {
       listWidth: listWidth,
       ref: targetRef,
       virtual: virtual
-    }, beforeList, props.multiselect && props.selectAllOptions && /*#__PURE__*/React.createElement(SelectAll, {
-      selectAllOptions: props.selectAllOptions,
-      variant: variant
-    }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+    }, beforeList, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
       items: transformedItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll

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

@@ -508,64 +508,6 @@ 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

@@ -53,13 +53,6 @@ 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',

package/emotion/es/components/Select/ui/index.js

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