@salutejs/plasma-new-hope 0.324.1-canary.1986.15225454757.0 → 0.324.1-canary.1986.15255471728.0

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

@@ -13,7 +13,7 @@ import { Select } from './Select';
 type StorySelectProps = ComponentProps<typeof Select> & {
     enableContentLeft?: boolean;
     hasHint?: boolean;
-    enableSelectAll?: boolean;
+    selectAllLabel?: string;
     selectAllSticky?: boolean;
 };
 
@@ -198,13 +198,6 @@ const meta: Meta<StorySelectProps> = {
             options: ['default', 'text'],
             if: { arg: 'target', eq: 'textfield-like' },
         },
-        enableSelectAll: {
-            control: 'boolean',
-        },
-        selectAllSticky: {
-            control: 'boolean',
-            if: { arg: 'enableSelectAll', truthy: true },
-        },
     },
     args: {
         target: 'textfield-like',
@@ -234,8 +227,6 @@ const meta: Meta<StorySelectProps> = {
         hintPlacement: 'auto',
         hintWidth: '10rem',
         hintHasArrow: true,
-        enableSelectAll: false,
-        selectAllSticky: false,
     },
     parameters: {
         controls: {
@@ -271,8 +262,6 @@ const meta: Meta<StorySelectProps> = {
                 'hintPlacement',
                 'hintWidth',
                 'hintHasArrow',
-                'enableSelectAll',
-                'selectAllSticky',
             ],
         },
     },
@@ -511,7 +500,7 @@ const SingleStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
 export const Single: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['chipView', 'isTargetAmount', 'chipType', 'enableSelectAll'],
+            exclude: ['chipView', 'isTargetAmount', 'chipType'],
         },
     },
     render: (args) => <SingleStory {...args} />,
@@ -520,7 +509,7 @@ export const Single: StoryObj<StorySelectProps> = {
     },
 };
 
-const MultiselectStory = ({ enableContentLeft, enableSelectAll, selectAllSticky, ...args }: StorySelectProps) => {
+const MultiselectStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
     const [value, setValue] = useState<Array<string>>([]);
 
     return (
@@ -531,7 +520,6 @@ const MultiselectStory = ({ enableContentLeft, enableSelectAll, selectAllSticky,
                 value={value}
                 onChange={setValue}
                 contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
-                selectAllOptions={enableSelectAll ? { sticky: selectAllSticky || false } : undefined}
             />
         </div>
     );
@@ -574,11 +562,6 @@ const PredefinedStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
 };
 
 export const Predefined: StoryObj<StorySelectProps> = {
-    parameters: {
-        controls: {
-            exclude: ['enableSelectAll'],
-        },
-    },
     render: (args) => <PredefinedStory {...args} />,
 };
 
@@ -1002,7 +985,7 @@ const CommonStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
 export const Common: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['target', 'view', 'enableSelectAll'],
+            exclude: ['target', 'view'],
         },
     },
     argTypes: {
@@ -1016,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/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx

@@ -11,7 +11,7 @@ import { Combobox } from './Combobox';
 type StorySelectProps = ComponentProps<typeof Combobox> & {
     enableContentLeft?: boolean;
     hasHint?: boolean;
-    enableSelectAll?: boolean;
+    selectAllLabel?: string;
     selectAllSticky?: boolean;
 };
 
@@ -175,13 +175,6 @@ const meta: Meta<StorySelectProps> = {
         emptyStateDescription: {
             control: { type: 'text' },
         },
-        enableSelectAll: {
-            control: 'boolean',
-        },
-        selectAllSticky: {
-            control: 'boolean',
-            if: { arg: 'enableSelectAll', truthy: true },
-        },
     },
     args: {
         label: 'Label',
@@ -211,8 +204,6 @@ const meta: Meta<StorySelectProps> = {
         hintWidth: '10rem',
         hintHasArrow: true,
         emptyStateDescription: '',
-        enableSelectAll: false,
-        selectAllSticky: false,
     },
     parameters: {
         controls: {
@@ -248,8 +239,6 @@ const meta: Meta<StorySelectProps> = {
                 'hintWidth',
                 'hintHasArrow',
                 'emptyStateDescription',
-                'enableSelectAll',
-                'selectAllSticky',
             ],
         },
     },
@@ -491,12 +480,12 @@ export const Single: StoryObj<StorySelectProps> = {
     },
     parameters: {
         controls: {
-            exclude: ['isTargetAmount', 'enableSelectAll'],
+            exclude: ['isTargetAmount'],
         },
     },
 };
 
-const MultipleStory = ({ enableSelectAll, selectAllSticky, ...args }: StorySelectProps) => {
+const MultipleStory = (args: StorySelectProps) => {
     const [value, setValue] = useState([]);
 
     return (
@@ -508,7 +497,6 @@ const MultipleStory = ({ enableSelectAll, selectAllSticky, ...args }: StorySelec
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                selectAllOptions={enableSelectAll ? { sticky: selectAllSticky || false } : undefined}
             />
         </div>
     );
@@ -520,3 +508,187 @@ export const Multiple: StoryObj<StorySelectProps> = {
         closeAfterSelect: false,
     },
 };
+
+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' }}>
+            <Combobox
+                placeholder="Placeholder"
+                multiple
+                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'],
+        },
+    },
+};