@salutejs/plasma-new-hope 0.77.1-canary.1199.8844794649.0 → 0.78.0-canary.1185.8884845022.0

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -1,195 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-
-import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
-import { mergeConfig } from '../../../../../engines';
-import { dropdownConfig } from '../../../../../components/Dropdown';
-import { Button } from '../../Button/Button';
-import { Radiobox } from '../../Radiobox/Radiobox';
-import { Checkbox } from '../../Checkbox/Checkbox';
-import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
-
-import { Dropdown, DropdownItem } from './Dropdown';
-import { config } from './Dropdown.config';
-
-const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
-const triggers: Array<DropdownTrigger> = ['click', 'hover'];
-
-type StoryDropdownPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
-
-const meta: Meta<StoryDropdownProps> = {
-    title: 'plasma_web/Dropdown',
-    decorators: [WithTheme],
-    component: Dropdown,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        trigger: {
-            options: triggers,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
-    },
-    args: {
-        placement: 'bottom',
-        trigger: 'click',
-        closeOnOverlayClick: false,
-        closeOnEsc: true,
-        isFocusTrapped: true,
-        skidding: 0,
-        distance: 0,
-    },
-};
-
-export default meta;
-
-const onSelect = action('onSelect');
-const onClick = action('onClick');
-const onChange = action('onChange');
-
-const getDropdownItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StyledRadiobox = styled(Radiobox)`
-    margin-right: 0.5rem;
-`;
-
-const StyledCheckbox = styled(Checkbox)`
-    margin-left: auto;
-`;
-
-const StyledDisclosureRightIcon = styled.div`
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-left: auto;
-`;
-
-const DisclosureRightIcon = (props) => (
-    <StyledDisclosureRightIcon>
-        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-            <path
-                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
-                fill="currentColor"
-            />
-        </svg>
-    </StyledDisclosureRightIcon>
-);
-
-const StoryTight = (args: StoryDropdownProps) => {
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
-
-    const { skidding, distance, placement, ...rest } = args;
-
-    const onMainClose = () => {
-        setIsOpen(false);
-        setIsOpenDropdown2(false);
-    };
-
-    const onMainToggle = (openValue: boolean) => {
-        setIsOpen(openValue);
-
-        if (!openValue) {
-            onMainClose();
-        }
-    };
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        onSelect(value, text);
-        setIsOpen(false);
-    };
-
-    return (
-        <div>
-            <h3>This is header</h3>
-            <Dropdown
-                target={<Button>Target</Button>}
-                isOpen={isOpen}
-                onToggle={onMainToggle}
-                offset={[Number(skidding), Number(distance)]}
-                placement={placement}
-                {...rest}
-            >
-                {getDropdownItems('item', 6).map((item) => (
-                    <DropdownItem
-                        key={item.value}
-                        isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
-                        onClick={onClick}
-                        value={item.value}
-                    >
-                        {item.child}
-                    </DropdownItem>
-                ))}
-                <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
-                    onToggle={(is) => setIsOpenDropdown2(is)}
-                    isOpen={isOpenDropdown2}
-                    offset={[0, 0]}
-                    isNested
-                    {...rest}
-                >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
-                    {getDropdownItems('nested', 4).map((item) => (
-                        <DropdownItem
-                            key={item.value}
-                            isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
-                            onClick={onClick}
-                            value={item.value}
-                        >
-                            {item.child}
-                        </DropdownItem>
-                    ))}
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="1"
-                        onChange={onChange}
-                        text="Radiobox 1"
-                    />
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="2"
-                        onChange={onChange}
-                        text="Radiobox 2"
-                    />
-                </Dropdown>
-
-                <DropdownItem
-                    isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
-                    onClick={onClick}
-                    value="disabled"
-                    disabled
-                >
-                    disabled
-                </DropdownItem>
-            </Dropdown>
-        </div>
-    );
-};
-
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
-};

package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = void 0;
-var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Dropdown = /*#__PURE__*/require("../../../../components/Dropdown");
-var config = exports.config = {
-  defaults: {
-    view: 'primary',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":auto;", ":0;", ":0.5rem;", ":0;", ":0.5rem;", ":0;", ":auto;", ":1.25rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":auto;", ":0.3125rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":0.063rem;", ":0;", ":0;", ":0;", ":0;", ":auto;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0.25rem;", ":0;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.height, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.paddingTop, _Dropdown.dropdownTokens.paddingRight, _Dropdown.dropdownTokens.paddingBottom, _Dropdown.dropdownTokens.paddingLeft, _Dropdown.dropdownTokens.headerWidth, _Dropdown.dropdownTokens.headerHeight, _Dropdown.dropdownTokens.headerPaddingTop, _Dropdown.dropdownTokens.headerPaddingRight, _Dropdown.dropdownTokens.headerPaddingBottom, _Dropdown.dropdownTokens.headerPaddingLeft, _Dropdown.dropdownTokens.headerMarginTop, _Dropdown.dropdownTokens.headerMarginRight, _Dropdown.dropdownTokens.headerMarginBottom, _Dropdown.dropdownTokens.headerMarginLeft, _Dropdown.dropdownTokens.headerFontFamily, _Dropdown.dropdownTokens.headerFontSize, _Dropdown.dropdownTokens.headerFontStyle, _Dropdown.dropdownTokens.headerFontWeightBold, _Dropdown.dropdownTokens.headerFontLetterSpacing, _Dropdown.dropdownTokens.headerFontLineHeight, _Dropdown.dropdownTokens.itemWidth, _Dropdown.dropdownTokens.itemHeight, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemMarginTop, _Dropdown.dropdownTokens.itemMarginRight, _Dropdown.dropdownTokens.itemMarginBottom, _Dropdown.dropdownTokens.itemMarginLeft, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight, _Dropdown.dropdownTokens.dividerWidth, _Dropdown.dropdownTokens.dividerHeight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.groupWidth, _Dropdown.dropdownTokens.groupPaddingTop, _Dropdown.dropdownTokens.groupPaddingRight, _Dropdown.dropdownTokens.groupPaddingBottom, _Dropdown.dropdownTokens.groupPaddingLeft, _Dropdown.dropdownTokens.groupMarginTop, _Dropdown.dropdownTokens.groupMarginRight, _Dropdown.dropdownTokens.groupMarginBottom, _Dropdown.dropdownTokens.groupMarginLeft, _Dropdown.dropdownTokens.groupLabelPaddingTop, _Dropdown.dropdownTokens.groupLabelPaddingRight, _Dropdown.dropdownTokens.groupLabelPaddingBottom, _Dropdown.dropdownTokens.groupLabelPaddingLeft, _Dropdown.dropdownTokens.groupLabelMarginTop, _Dropdown.dropdownTokens.groupLabelMarginRight, _Dropdown.dropdownTokens.groupLabelMarginBottom, _Dropdown.dropdownTokens.groupLabelMarginLeft, _Dropdown.dropdownTokens.groupLabelFontFamily, _Dropdown.dropdownTokens.groupLabelFontSize, _Dropdown.dropdownTokens.groupLabelFontStyle, _Dropdown.dropdownTokens.groupLabelFontWeight, _Dropdown.dropdownTokens.groupLabelLetterSpacing, _Dropdown.dropdownTokens.groupLabelLineHeight, _Dropdown.dropdownTokens.footerWidth, _Dropdown.dropdownTokens.footerHeight, _Dropdown.dropdownTokens.footerPaddingTop, _Dropdown.dropdownTokens.footerPaddingRight, _Dropdown.dropdownTokens.footerPaddingBottom, _Dropdown.dropdownTokens.footerPaddingLeft, _Dropdown.dropdownTokens.footerMarginTop, _Dropdown.dropdownTokens.footerMarginRight, _Dropdown.dropdownTokens.footerMarginBottom, _Dropdown.dropdownTokens.footerMarginLeft, _Dropdown.dropdownTokens.footerFontFamily, _Dropdown.dropdownTokens.footerFontSize, _Dropdown.dropdownTokens.footerFontStyle, _Dropdown.dropdownTokens.footerFontWeightBold, _Dropdown.dropdownTokens.footerFontLetterSpacing, _Dropdown.dropdownTokens.footerFontLineHeight)
-    },
-    view: {
-      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--plasma-colors-white);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);", ":rgba(12,143,230,0.12);", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--plasma-colors-overlay-blur);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.headerBackground, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemColor, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.dividerColor, _Dropdown.dropdownTokens.footerBackground, _Dropdown.dropdownTokens.groupBackground, _Dropdown.dropdownTokens.groupLabelColor)
-    }
-  }
-};

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

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownItem = exports.DropdownHeader = exports.DropdownGroup = exports.DropdownFooter = exports.DropdownDivider = exports.Dropdown = void 0;
-var _Dropdown = /*#__PURE__*/require("../../../../components/Dropdown");
-var _engines = /*#__PURE__*/require("../../../../engines");
-var _Dropdown2 = /*#__PURE__*/require("./Dropdown.config");
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownConfig, _Dropdown2.config);
-var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _engines.component)(mergedConfig);
-var mergedDividerConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownDividerConfig);
-var DropdownDivider = exports.DropdownDivider = /*#__PURE__*/(0, _engines.component)(mergedDividerConfig);
-var mergedFooterConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownFooterConfig);
-var DropdownFooter = exports.DropdownFooter = /*#__PURE__*/(0, _engines.component)(mergedFooterConfig);
-var mergedGroupConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownGroupConfig);
-var DropdownGroup = exports.DropdownGroup = /*#__PURE__*/(0, _engines.component)(mergedGroupConfig);
-var mergedHeaderConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownHeaderConfig);
-var DropdownHeader = exports.DropdownHeader = /*#__PURE__*/(0, _engines.component)(mergedHeaderConfig);
-var mergedItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownItemConfig);
-var DropdownItem = exports.DropdownItem = /*#__PURE__*/(0, _engines.component)(mergedItemConfig);

package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx

@@ -1,277 +0,0 @@
-import React, { useRef, useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import styled from 'styled-components';
-import { css } from 'styled-components';
-import { action } from '@storybook/addon-actions';
-
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { mergeConfig } from '../../../../engines';
-import { dropdownConfig } from '../../../../components/Dropdown';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { Radiobox } from '../Radiobox/Radiobox';
-import { Button } from '../Button/Button';
-
-import { Dropdown, DropdownDivider, DropdownFooter, DropdownGroup, DropdownHeader, DropdownItem } from './Dropdown';
-import { config } from './Dropdown.config';
-
-type StoryDropdownPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
-
-const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
-const triggers: Array<string> = ['click', 'hover'];
-
-const meta: Meta<StoryDropdownProps> = {
-    title: 'sds_engineer/Dropdown',
-    decorators: [WithTheme],
-    component: Dropdown,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        trigger: {
-            options: triggers,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
-    },
-    args: {
-        placement: 'bottom',
-        trigger: 'click',
-        closeOnOverlayClick: true,
-        closeOnEsc: true,
-        isFocusTrapped: true,
-        skidding: 0,
-        distance: 6,
-    },
-};
-
-export default meta;
-
-const StyledCheckbox = styled(Checkbox)`
-    margin-left: 0rem;
-    margin-bottom: 0rem;
-`;
-
-const StyledRadiobox = styled(Radiobox)`
-    margin-left: 0rem;
-    margin-bottom: 0rem;
-`;
-
-const headerClass = css`
-    text-transform: uppercase;
-    color: rgba(23, 23, 23, 0.56);
-`;
-
-const TrashIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-const StyledTrashIcon = styled(TrashIcon)`
-    width: 1.25rem;
-    height: 1.25rem;
-`;
-
-const onChange = action('onChange');
-const onSelect = action('onSelect');
-const onClick = action('onClick');
-
-const dropdownItems = [...Array(4).keys()].map((num) => ({
-    value: `item_${num}`,
-    child: `Item ${num}`,
-}));
-
-const StoryDefault = (args: StoryDropdownProps) => {
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
-
-    const onMainClose = () => {
-        setIsOpen(false);
-        setIsOpenDropdown2(false);
-    };
-
-    const onMainToggle = (openValue: boolean) => {
-        setIsOpen(openValue);
-
-        if (!openValue) {
-            onMainClose();
-        }
-    };
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        onSelect(value, text);
-    };
-
-    return (
-        <div>
-            <h3>This is header</h3>
-            <Dropdown target={<Button>Target</Button>} isOpen={isOpen} onToggle={onMainToggle} {...args}>
-                <DropdownHeader className={headerClass}>Header</DropdownHeader>
-                <DropdownDivider />
-                {dropdownItems.map((item) => (
-                    <DropdownItem
-                        key={item.value}
-                        isSelected={item.value === selected}
-                        onSelect={() => handleSelect(item.value, item.child)}
-                        onClick={onClick}
-                        value={item.value}
-                    >
-                        {item.child}
-                    </DropdownItem>
-                ))}
-                <Dropdown
-                    target={<DropdownItem>Nested dropdown ➞</DropdownItem>}
-                    onToggle={(is) => setIsOpenDropdown2(is)}
-                    isOpen={isOpenDropdown2}
-                    offset={[0, 0]}
-                >
-                    <DropdownGroup label="This is radiogroup">
-                        <DropdownItem
-                            contentLeft={StyledRadiobox}
-                            name="test"
-                            value="1"
-                            onChange={onChange}
-                            text="Nested 1"
-                        />
-
-                        <DropdownItem
-                            contentLeft={StyledRadiobox}
-                            name="test"
-                            value="2"
-                            onChange={onChange}
-                            text="Nested 2"
-                        />
-                        <DropdownItem
-                            contentLeft={StyledRadiobox}
-                            name="test"
-                            value="3"
-                            onChange={onChange}
-                            text="Nested 3"
-                        />
-                    </DropdownGroup>
-                    <DropdownItem contentLeft={StyledCheckbox} text="Nested 4" />
-                    <DropdownItem contentRight={StyledCheckbox} text="Nested 5" />
-
-                    <DropdownItem contentLeft={StyledTrashIcon} text="Nested 6" />
-                    <Button onClick={() => setIsOpenDropdown2(false)}>Close nested</Button>
-                </Dropdown>
-
-                <DropdownItem onClick={onClick} value="disabled" disabled>
-                    disabled
-                </DropdownItem>
-
-                <DropdownGroup label="Group">
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="test"
-                        value="1"
-                        disabled
-                        onChange={onChange}
-                        text="Disabled 1"
-                    />
-
-                    <DropdownItem name="test" value="2" disabled text="Disabled group 2" />
-                </DropdownGroup>
-
-                <DropdownDivider />
-                <DropdownFooter className={headerClass}>Footer</DropdownFooter>
-            </Dropdown>
-        </div>
-    );
-};
-
-export const Default: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryContextMenu = (args: StoryDropdownProps) => {
-    const [contextPosition, setContextPosition] = useState([0, 0]);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-
-    const onMainToggle = (openValue: boolean) => {
-        setIsOpen(openValue);
-    };
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        onSelect(value, text);
-        setIsOpen(false);
-    };
-
-    const onClickAway = (event: React.MouseEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        if (dropdownRef?.current && !dropdownRef.current?.contains(event.target as Element)) {
-            setIsOpen(false);
-        }
-    };
-
-    const onContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-        event.preventDefault();
-
-        const { clientX, clientY } = event;
-
-        setContextPosition([clientX, clientY]);
-        setIsOpen(true);
-    };
-
-    return (
-        <div
-            style={{
-                width: '100%',
-                height: '100%',
-                background: 'gainsboro',
-            }}
-            onClick={onClickAway}
-            onContextMenu={onContextMenu}
-        >
-            <div>Right-click the mouse button - to open</div>
-            <div>Left-click the mouse button - to close</div>
-            <div
-                ref={dropdownRef}
-                style={{ position: 'absolute', top: `${contextPosition[1]}px`, left: `${contextPosition[0]}px` }}
-            >
-                <Dropdown isOpen={isOpen} onToggle={onMainToggle} {...args}>
-                    <DropdownHeader className={headerClass}>Header</DropdownHeader>
-                    <DropdownDivider />
-                    {dropdownItems.map((item) => (
-                        <DropdownItem
-                            key={item.value}
-                            isSelected={item.value === selected}
-                            onSelect={() => handleSelect(item.value, item.child)}
-                            onClick={onClick}
-                            value={item.value}
-                        >
-                            {item.child}
-                        </DropdownItem>
-                    ))}
-                    <DropdownDivider />
-                    <DropdownFooter className={headerClass}>Footer</DropdownFooter>
-                </Dropdown>
-            </div>
-        </div>
-    );
-};
-
-export const ContextMenu: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryContextMenu {...args} />,
-};

package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx

@@ -1,80 +0,0 @@
----
-id: dropdown
-title: Dropdown
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Dropdown
-Набор компонентов для создания выпадающих списков. 
-
-<Description name="Dropdown" />
-<PropsTable name="Dropdown" exclude={['css']} />
-
-# DropdownItem
-
-<Description name="DropdownItem" />
-<PropsTable name="DropdownItem" exclude={['css']} />
-
-## Использование
-
-```tsx live
-import React, { useState } from 'react';
-import { Dropdown, DropdownItem } from '@salutejs/{{ package }}';
-import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
-
-export function App() {
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        setIsOpen(false);
-    };
-
-    const getDropdownItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-    return (
-        <div style=\{{height: "400px", background: surfaceSolidSecondary, padding: "1rem" }}>
-            <Dropdown
-                    target={<Button>Target</Button>}
-                    isOpen={isOpen}
-                    onToggle={() => {
-                        setIsOpen(!isOpen);
-                    }}
-                    offset={[10, 15]}
-                    view="primary"
-                    size="m"
-                    placement="right"
-                    trigger="click"
-                    closeOnOverlayClick={false}
-                    closeOnEsc
-                    isFocusTrapped
-                >
-                    {getDropdownItems('item', 6).map((item) => (
-                        <DropdownItem
-                            key={item.value}
-                            isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
-                            value={item.value}
-                        >
-                            {item.child}
-                        </DropdownItem>
-                    ))}
-                    <DropdownItem
-                        isSelected={selected === 'disabled'}
-                        onSelect={() => handleSelect('disabled', 'disabled')}
-                        value="disabled"
-                        disabled
-                    >
-                        disabled
-                    </DropdownItem>
-                </Dropdown>
-            </div>
-    );
-}
-```

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js

@@ -1,2 +0,0 @@
-import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json

@@ -1,19 +0,0 @@
-[
-    "--plasma-dropdown-item-width",
-    "--plasma-dropdown-item-height",
-    "--plasma-dropdown-item-padding-top",
-    "--plasma-dropdown-item-padding-right",
-    "--plasma-dropdown-item-padding-bottom",
-    "--plasma-dropdown-item-padding-left",
-    "--plasma-dropdown-item-margin-top",
-    "--plasma-dropdown-item-margin-right",
-    "--plasma-dropdown-item-margin-bottom",
-    "--plasma-dropdown-item-margin-left",
-    "--plasma-dropdown-item-border-radius",
-    "--plasma-dropdown-item-font-family",
-    "--plasma-dropdown-item-font-size",
-    "--plasma-dropdown-item-font-style",
-    "--plasma-dropdown-item-letter-spacing",
-    "--plasma-dropdown-item-line-height",
-    "--plasma-dropdown-item-font-weight"
-]

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js

@@ -1,2 +0,0 @@
-import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json

@@ -1,9 +0,0 @@
-[
-    "--plasma-dropdown-item-background",
-    "--plasma-dropdown-item-color",
-    "--plasma-dropdown-item-background-hover",
-    "--plasma-dropdown-item-background-selected",
-    "--plasma-dropdown-item-color-selected",
-    "--plasma-dropdown-item-background-selected-hover",
-    "--plasma-dropdown-item-color-selected-hover"
-]

package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js

@@ -1,21 +0,0 @@
-import { css } from 'styled-components';
-import { dropdownTokens } from '../../../../../components/Dropdown';
-var dropdownSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.width, ": 12.5rem;\n    ").concat(dropdownTokens.height, ": auto;\n    ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n    ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n    ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n    ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n    ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
-var dropdownItemSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemWidth, ": auto;\n    ").concat(dropdownTokens.itemHeight, ": auto;\n    ").concat(dropdownTokens.itemMarginTop, ": 0;\n    ").concat(dropdownTokens.itemMarginRight, ": 0;\n    ").concat(dropdownTokens.itemMarginBottom, ": 0;\n    ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      xs: /*#__PURE__*/css(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      s: /*#__PURE__*/css(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      m: /*#__PURE__*/css(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      l: /*#__PURE__*/css(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
-    },
-    view: {
-      "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
-    }
-  }
-};