@salutejs/plasma-new-hope 0.78.0-canary.1201.8968491632.0 → 0.78.0-canary.1203.8970261959.0

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

@@ -0,0 +1,195 @@
+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/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx

@@ -79,7 +79,7 @@ const baseEvents = [
 ];
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
         max: new Date(2023, 11, 24),
         isDouble: false,
         isRange: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
 
     const handleOnChange = useCallback((newValue: Date) => {
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryDouble = (args: CalendarDoubleProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const handleOnChange = useCallback((newValue: Date) => {
         setValue(newValue);
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDouble {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryRange {...args} />,
 };
 
 const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryRangeDouble {...args} />,
 };
 
 const StoryWithPopover = (args: CalendarProps) => {
-    const { isDouble, min, max } = args;
+    const { isDouble, min, max, includeEdgeDates } = args;
     const [isOpen, setIsOpen] = useState(false);
     const [textValue, setTextValue] = useState('2023-10-16');
     const [value, setValue] = useState(new Date(textValue));
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
                 disabledList={disabledDays}
                 min={min}
                 max={max}
+                includeEdgeDates={includeEdgeDates}
                 isDouble={isDouble}
                 isRange={false}
                 onChangeValue={handleOnChange}
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
         min: new Date(2023, 9, 1),
         max: new Date(2023, 11, 24),
         isDouble: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryWithPopover {...args} />,
 };

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

@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+import { dropdownTokens } from '../../../../components/Dropdown';
+export var config = {
+  defaults: {
+    view: 'primary',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/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);"], dropdownTokens.width, dropdownTokens.height, dropdownTokens.borderRadius, dropdownTokens.paddingTop, dropdownTokens.paddingRight, dropdownTokens.paddingBottom, dropdownTokens.paddingLeft, dropdownTokens.headerWidth, dropdownTokens.headerHeight, dropdownTokens.headerPaddingTop, dropdownTokens.headerPaddingRight, dropdownTokens.headerPaddingBottom, dropdownTokens.headerPaddingLeft, dropdownTokens.headerMarginTop, dropdownTokens.headerMarginRight, dropdownTokens.headerMarginBottom, dropdownTokens.headerMarginLeft, dropdownTokens.headerFontFamily, dropdownTokens.headerFontSize, dropdownTokens.headerFontStyle, dropdownTokens.headerFontWeightBold, dropdownTokens.headerFontLetterSpacing, dropdownTokens.headerFontLineHeight, dropdownTokens.itemWidth, dropdownTokens.itemHeight, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemMarginTop, dropdownTokens.itemMarginRight, dropdownTokens.itemMarginBottom, dropdownTokens.itemMarginLeft, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight, dropdownTokens.dividerWidth, dropdownTokens.dividerHeight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.groupWidth, dropdownTokens.groupPaddingTop, dropdownTokens.groupPaddingRight, dropdownTokens.groupPaddingBottom, dropdownTokens.groupPaddingLeft, dropdownTokens.groupMarginTop, dropdownTokens.groupMarginRight, dropdownTokens.groupMarginBottom, dropdownTokens.groupMarginLeft, dropdownTokens.groupLabelPaddingTop, dropdownTokens.groupLabelPaddingRight, dropdownTokens.groupLabelPaddingBottom, dropdownTokens.groupLabelPaddingLeft, dropdownTokens.groupLabelMarginTop, dropdownTokens.groupLabelMarginRight, dropdownTokens.groupLabelMarginBottom, dropdownTokens.groupLabelMarginLeft, dropdownTokens.groupLabelFontFamily, dropdownTokens.groupLabelFontSize, dropdownTokens.groupLabelFontStyle, dropdownTokens.groupLabelFontWeight, dropdownTokens.groupLabelLetterSpacing, dropdownTokens.groupLabelLineHeight, dropdownTokens.footerWidth, dropdownTokens.footerHeight, dropdownTokens.footerPaddingTop, dropdownTokens.footerPaddingRight, dropdownTokens.footerPaddingBottom, dropdownTokens.footerPaddingLeft, dropdownTokens.footerMarginTop, dropdownTokens.footerMarginRight, dropdownTokens.footerMarginBottom, dropdownTokens.footerMarginLeft, dropdownTokens.footerFontFamily, dropdownTokens.footerFontSize, dropdownTokens.footerFontStyle, dropdownTokens.footerFontWeightBold, dropdownTokens.footerFontLetterSpacing, dropdownTokens.footerFontLineHeight)
+    },
+    view: {
+      primary: /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.headerBackground, dropdownTokens.itemBackground, dropdownTokens.itemColor, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.dividerColor, dropdownTokens.footerBackground, dropdownTokens.groupBackground, dropdownTokens.groupLabelColor)
+    }
+  }
+};

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

@@ -0,0 +1,15 @@
+import { dropdownConfig, dropdownDividerConfig, dropdownFooterConfig, dropdownGroupConfig, dropdownHeaderConfig, dropdownItemConfig } from '../../../../components/Dropdown';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Dropdown.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
+export var Dropdown = /*#__PURE__*/component(mergedConfig);
+var mergedDividerConfig = /*#__PURE__*/mergeConfig(dropdownDividerConfig);
+export var DropdownDivider = /*#__PURE__*/component(mergedDividerConfig);
+var mergedFooterConfig = /*#__PURE__*/mergeConfig(dropdownFooterConfig);
+export var DropdownFooter = /*#__PURE__*/component(mergedFooterConfig);
+var mergedGroupConfig = /*#__PURE__*/mergeConfig(dropdownGroupConfig);
+export var DropdownGroup = /*#__PURE__*/component(mergedGroupConfig);
+var mergedHeaderConfig = /*#__PURE__*/mergeConfig(dropdownHeaderConfig);
+export var DropdownHeader = /*#__PURE__*/component(mergedHeaderConfig);
+var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
+export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);

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

@@ -0,0 +1,277 @@
+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/types/components/Calendar/Calendar.types.d.ts

@@ -84,6 +84,10 @@ export interface Calendar extends HTMLAttributes<HTMLDivElement> {
      * Максимальное значение даты.
      */
     max?: Date;
+    /**
+     * Должны ли значения минимального и максимального дня включаться в диапазон.
+     */
+    includeEdgeDates?: boolean;
     /**
      * Список событий.
      */