@salutejs/plasma-new-hope 0.78.0-canary.1185.8922773956.0 → 0.78.0-canary.1194.8928682263.0

package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Slider } from './Slider';
+
+const sizes = ['l', 'm', 's'];
+const views = ['default', 'accent', 'gradient'];
+const labelPlacements = ['outer', 'inner'];
+const rangeValuesPlacement = ['outer', 'inner'];
+
+const meta: Meta<typeof Slider> = {
+    title: 'plasma_web/Slider',
+    component: Slider,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps([
+            'value',
+            'onChangeCommitted',
+            'ariaLabel',
+            'onChange',
+            'fontSizeMultiplier',
+            'gap',
+            'settings',
+            'hasHoverAnimation',
+        ]),
+    },
+};
+
+export default meta;
+
+type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
+type StorySingleProps = StoryProps;
+
+type StorySingle = StoryObj<StorySingleProps>;
+type StoryDouble = StoryObj<StoryProps>;
+
+const SliderWrapper = styled.div`
+    width: 25rem;
+`;
+
+const StoryDefault = (args: StorySingleProps) => {
+    const [value, setValue] = useState(30);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const Default: StorySingle = {
+    argTypes: {
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        rangeValuesPlacement: {
+            options: rangeValuesPlacement,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        ariaLabel: 'Цена товара',
+        multipleStepSize: 10,
+        label: 'Цена товара',
+        labelPlacement: 'outer',
+        rangeValuesPlacement: 'outer',
+        showRangeValues: true,
+        showCurrentValue: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryMultipleValues = (args: StoryProps) => {
+    const [value, setValue] = useState([10, 80]);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const MultipleValues: StoryDouble = {
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        label: 'Цена товара',
+        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
+        multipleStepSize: 10,
+    },
+    render: (args) => <StoryMultipleValues {...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/styled-components/es/hooks/index.js

@@ -1,4 +1,5 @@
 export { useUniqId } from './useUniqId';
 export { usePreviousValue } from './usePreviousValue';
 export { useForceUpdate } from './useForceUpdate';
-export { useDidMountEffect } from './useDidMountEffect';
+export { useDidMountEffect } from './useDidMountEffect';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/styled-components/es/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,7 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { canUseDOM } from '../utils';
+
+/**
+ * Runs effect safely on server.
+ */
+export var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/styled-components/es/index.js

@@ -44,4 +44,5 @@ export * from './components/Grid';
 export * from './components/Progress';
 export * from './components/Select';
 export * from './components/Divider';
-export * from './components/Toolbar';
+export * from './components/Toolbar';
+export * from './components/Slider';

package/styled-components/es/utils/canUseDOM.js

@@ -0,0 +1,5 @@
+/**
+ * This constant tells you whether can DOM be used.
+ * https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+ */
+export var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');

package/styled-components/es/utils/index.js

@@ -1,3 +1,4 @@
+export { canUseDOM } from './canUseDOM';
 export { extractTextFrom } from './extractTextFrom';
 export { getSizeValueFromProp } from './getSizeValueFromProp';
 export { IS_REACT_18, safeUseId } from './react';

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts

@@ -1,43 +1,41 @@
-import React from 'react';
-import type { RootProps } from '../../../../engines';
-import { ComboboxItemProps } from './ComboboxItem.type';
-export declare const comboboxItemRoot: (Root: RootProps<HTMLDivElement, ComboboxItemProps>) => React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+/// <reference types="react" />
+export declare const comboboxItemRoot: (Root: import("../../../..").RootProps<HTMLDivElement, import("../../../Dropdown/ui/DropdownItem/DropdownItem.type").DropdownItemProps>) => import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onSelect"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
-    label?: React.ReactNode;
+    label?: import("react").ReactNode;
     role?: string | undefined;
-    contentLeft?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
-    contentRight?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
+    contentLeft?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
+    contentRight?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
     name?: string | undefined;
     checked?: boolean | undefined;
     text?: string | undefined;
     value?: string | number | boolean | undefined;
     isSelected?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
     onSelect?: ((value?: any, text?: any) => void) | undefined;
     size?: string | undefined;
     view?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const comboboxItemConfig: {
     name: string;
     tag: string;
-    layout: (Root: RootProps<HTMLDivElement, ComboboxItemProps>) => React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    layout: (Root: import("../../../..").RootProps<HTMLDivElement, import("../../../Dropdown/ui/DropdownItem/DropdownItem.type").DropdownItemProps>) => import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onSelect"> & {
         id?: string | undefined;
         disabled?: boolean | undefined;
-        label?: React.ReactNode;
+        label?: import("react").ReactNode;
         role?: string | undefined;
-        contentLeft?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
-        contentRight?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
+        contentLeft?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
+        contentRight?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
         name?: string | undefined;
         checked?: boolean | undefined;
         text?: string | undefined;
         value?: string | number | boolean | undefined;
         isSelected?: boolean | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         onSelect?: ((value?: any, text?: any) => void) | undefined;
         size?: string | undefined;
         view?: string | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {
         view: {

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;wCA4G9E,CAAC;AAEN,eAAO,MAAM,kBAAkB;;;mBA9GQ,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HlF,CAAC"}
+{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;kDAAmB,CAAC;AAEjD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB9B,CAAC"}

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts

@@ -1,7 +1,3 @@
-/// <reference types="react" />
-export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const StyledText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const baseContent: string;
+export declare const mappingOverride: string;
 export declare const base: import("@linaria/core").LinariaClassName;
 //# sourceMappingURL=ComboboxItem.styles.d.ts.map

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,iBAAiB,qKAK7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAM9B,CAAC;AAEF,eAAO,MAAM,UAAU,qKAEtB,CAAC;AAGF,eAAO,MAAM,WAAW,QA0DvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAEhB,CAAC"}
+{"version":3,"file":"ComboboxItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,QA+B3B,CAAC;AAEF,eAAO,MAAM,IAAI,0CAGhB,CAAC"}

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts

@@ -1,60 +1,3 @@
-import type { HTMLAttributes, ReactNode, MouseEvent, ElementType } from 'react';
-declare type ComboboxItemCustomProps = {
-    /**
-     * Уникальный идентификатор элемента
-     */
-    id?: string;
-    /**
-     * Компонент не активен
-     */
-    disabled?: boolean;
-    /**
-     * Метка-подпись к элементу
-     */
-    label?: ReactNode;
-    /**
-     * WAI-ARIA role элемента меню
-     */
-    role?: string;
-    /**
-     * Слот для контента слева
-     */
-    contentLeft?: ElementType | ReactNode;
-    /**
-     * Слот для контента справа
-     */
-    contentRight?: ElementType | ReactNode;
-    /**
-     *  Название слота контента
-     */
-    name?: string;
-    /**
-     *  Отмечен ли данный элемент
-     */
-    checked?: boolean;
-    /**
-     *  Содержимое контента
-     */
-    text?: string;
-    /**
-     *  Значение контента
-     */
-    value?: string | number | boolean;
-    /**
-     *  Значение контента
-     */
-    isSelected?: boolean;
-    /**
-     *  Коллбек при клике на элемент
-     */
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     *  Коллбек при выборе элемента
-     */
-    onSelect?: (value?: any, text?: any) => void;
-    size?: string;
-    view?: string;
-};
-export declare type ComboboxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & ComboboxItemCustomProps;
-export {};
+import { DropdownItemProps } from '../../../Dropdown/ui/DropdownItem/DropdownItem.type';
+export declare type ComboboxItemProps = DropdownItemProps;
 //# sourceMappingURL=ComboboxItem.type.d.ts.map

package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEhF,aAAK,uBAAuB,GAAG;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"ComboboxItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,oBAAY,iBAAiB,GAAG,iBAAiB,CAAC"}