@salutejs/plasma-new-hope 0.137.1-dev.0 → 0.138.0-canary.1406.10666365265.0

package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx

@@ -0,0 +1,254 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { mergeConfig } from '../../../../../engines';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import { comboboxOldConfig } from '../../../../../components/Combobox';
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { IconDone } from '../../../../../components/_Icon';
+
+import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
+import { config } from './Combobox.config';
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
+
+type ComboboxPrimitiveValue = string | number | boolean;
+
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_b2c/ComboboxOld',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        enumerationType: {
+            options: enumerations,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(comboboxOldConfig, config)),
+    },
+    args: {
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        placeholder: 'Placeholder',
+        enumerationType: 'comma',
+        size: 'm',
+        view: 'default',
+        placement: 'bottom',
+    },
+};
+
+export default meta;
+
+const onChangeAction = action('onChange');
+
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
+};
+
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
+};
+
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StorySingle = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <StorySingle {...args} />,
+};
+
+const StoryMultiple = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
+
+    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
+
+    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                enumerationType={enumerationType}
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryMultiple {...args} />,
+};
+
+const StoryAddCustomItem = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [opened, setOpened] = useState(false);
+    const [items, setItems] = useState(getSelectItems('item', 1));
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { code } = event;
+
+        if (code === 'Enter') {
+            const newValue = (event.target as HTMLInputElement).value;
+            const newItems = [...items];
+
+            if (newItems.find((item) => item.child === newValue)) {
+                return;
+            }
+
+            newItems.push({
+                value: `${newValue}_`,
+                child: (newValue || '').toString(),
+            });
+
+            setOpened(false);
+            setItems(newItems);
+        }
+    };
+
+    const filterFunction = () => true;
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                opened={opened}
+                onToggle={onToggle}
+                onChangeValue={onChangeValue}
+                onKeyDown={onKeyDown}
+                filterFunction={filterFunction}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxDivider />
+                {items.map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const AddCustomItem: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryAddCustomItem {...args} />,
+};

package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -103,6 +103,7 @@ const meta: Meta<StorySelectProps> = {
                 'placeholder',
                 'helperText',
                 'isTargetAmount',
+                'closeAfterSelect',
                 'variant',
                 'disabled',
                 'listWidth',
@@ -345,6 +346,9 @@ const SingleStory = (args: StorySelectProps) => {
 
 export const Single: StoryObj<StorySelectProps> = {
     render: (args) => <SingleStory {...args} />,
+    args: {
+        closeAfterSelect: true,
+    },
 };
 
 const MultiselectStory = (args: StorySelectProps) => {
@@ -366,6 +370,7 @@ const MultiselectStory = (args: StorySelectProps) => {
 export const Multiselect: StoryObj<StorySelectProps> = {
     args: {
         multiselect: true,
+        closeAfterSelect: false,
     },
     render: (args) => <MultiselectStory {...args} />,
 };

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

@@ -103,6 +103,7 @@ const meta: Meta<StorySelectProps> = {
                 'placeholder',
                 'helperText',
                 'isTargetAmount',
+                'closeAfterSelect',
                 'variant',
                 'disabled',
                 'listWidth',
@@ -345,6 +346,9 @@ const SingleStory = (args: StorySelectProps) => {
 
 export const Single: StoryObj<StorySelectProps> = {
     render: (args) => <SingleStory {...args} />,
+    args: {
+        closeAfterSelect: true,
+    },
 };
 
 const MultiselectStory = (args: StorySelectProps) => {
@@ -366,6 +370,7 @@ const MultiselectStory = (args: StorySelectProps) => {
 export const Multiselect: StoryObj<StorySelectProps> = {
     args: {
         multiselect: true,
+        closeAfterSelect: false,
     },
     render: (args) => <MultiselectStory {...args} />,
 };

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

@@ -1,10 +1,15 @@
 import { useEffect, useRef } from 'react';
-export var useOutsideClick = function useOutsideClick(callback) {
+export var useOutsideClick = function useOutsideClick(callback, secondaryRef) {
   var ref = useRef(null);
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback();
+      if (ref.current && !ref.current.contains(event.target)
+      // secondaryRef.current &&
+      // !secondaryRef.current.contains(event.target as Node)
+      ) {
+        if (!(secondaryRef !== null && secondaryRef !== void 0 && secondaryRef.current) || secondaryRef.current && !secondaryRef.current.contains(event.target)) {
+          callback();
+        }
       }
     };
     document.addEventListener('mouseup', handleClickOutside);

package/types/components/Combobox/ComboboxNew/Combobox.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { RootProps } from '../../../engines';
+import type { ItemContext, ComboboxProps } from './Combobox.types';
+export declare const Context: React.Context<ItemContext>;
+/**
+ * Поле ввода с выпадающим списком и возможностью фильтрации и выбора элементов.
+ */
+export declare const comboboxRoot: (Root: RootProps<HTMLInputElement, Omit<ComboboxProps, 'items'>>) => React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const comboboxConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLInputElement, Omit<ComboboxProps, 'items'>>) => React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        readOnly: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+        labelPlacement: string;
+    };
+};
+//# sourceMappingURL=Combobox.d.ts.map

package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4F,MAAM,OAAO,CAAC;AAIjH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAoB7C,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKnE,eAAO,MAAM,OAAO,4BAAgD,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,KAAK,aAAa,EAAE,OAAO,CAAC,CAAC,2FA2XtF,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBA7XQ,UAAU,gBAAgB,EAAE,KAAK,aAAa,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;CAoZ3F,CAAC"}

package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComboboxProps } from './Combobox.types';
+export declare const Ul: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
+    listOverflow?: ComboboxProps['listOverflow'];
+    listHeight?: ComboboxProps['listHeight'];
+    listWidth?: ComboboxProps['listWidth'];
+    isInnerUl?: boolean | undefined;
+}>;
+export declare const IconArrowWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledArrow: import("@linaria/react").StyledMeta & import("react").FC<import("../../_Icon/IconRoot").IconProps>;
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledEmptyState: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../engines/types").PropsType<import("../../../engines/types").Variants> & import("../../EmptyState/EmptyState.types").Props & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Combobox.styles.d.ts.map

package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,eAAO,MAAM,EAAE;mBACI,aAAa,CAAC,cAAc,CAAC;iBAC/B,aAAa,CAAC,YAAY,CAAC;gBAC5B,aAAa,CAAC,WAAW,CAAC;;EAmBzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,qKAQ5B,CAAC;AAEF,eAAO,MAAM,WAAW,oGAAuC,CAAC;AAEhE,eAAO,MAAM,IAAI,0CAAQ,CAAC;AAE1B,eAAO,MAAM,gBAAgB,oQAS5B,CAAC"}

package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts

@@ -0,0 +1,169 @@
+export declare const classes: {
+    dropdownItemIsFocused: string;
+    dropdownItemIsDisabled: string;
+    dropdownItemIsActive: string;
+    selectTargetArrow: string;
+    arrowInverse: string;
+    textfieldTarget: string;
+    selectChipIsFocused: string;
+    selectWithoutBoxShadow: string;
+    selectItemCheckbox: string;
+    selectSpinner: string;
+    emptyStateWrapper: string;
+};
+export declare const tokens: {
+    borderRadius: string;
+    padding: string;
+    focusOffset: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontLetterSpacing: string;
+    fontLineHeight: string;
+    itemHeight: string;
+    itemBorderRadius: string;
+    itemPadding: string;
+    itemPaddingTight: string;
+    itemIconSize: string;
+    itemIconSizeTight: string;
+    itemIconMargin: string;
+    cellPadding: string;
+    cellPaddingLeftContent: string;
+    cellPaddingContent: string;
+    cellPaddingRightContent: string;
+    cellTextboxGap: string;
+    cellGap: string;
+    cellTitleFontFamily: string;
+    cellTitleFontSize: string;
+    cellTitleFontStyle: string;
+    cellTitleFontWeight: string;
+    cellTitleLetterSpacing: string;
+    cellTitleLineHeight: string;
+    checkboxTriggerSize: string;
+    checkboxTriggerSizeTight: string;
+    checkboxTriggerBorderRadius: string;
+    checkboxTriggerBorderRadiusTight: string;
+    checkboxFillColor: string;
+    checkboxIconColor: string;
+    checkboxTriggerBorderColor: string;
+    indicatorSize: string;
+    targetHeight: string;
+    textFieldColor: string;
+    textFieldBackgroundColor: string;
+    textFieldBackgroundColorHover: string;
+    textFieldBackgroundColorFocus: string;
+    textFieldBorderColor: string;
+    textFieldBorderColorHover: string;
+    textFieldBorderColorFocus: string;
+    textFieldColorReadOnly: string;
+    textFieldBackgroundColorReadOnly: string;
+    textFieldBorderColorReadOnly: string;
+    textFieldPlaceholderColorReadOnly: string;
+    textFieldCaretColor: string;
+    textFieldPlaceholderColor: string;
+    textFieldHeight: string;
+    textFieldBorderWidth: string;
+    textFieldBorderRadius: string;
+    textFieldPadding: string;
+    textFieldPaddingWithChips: string;
+    textFieldLeftContentMargin: string;
+    textFieldRightContentMargin: string;
+    textFieldFontFamily: string;
+    textFieldFontStyle: string;
+    textFieldFontSize: string;
+    textFieldFontWeight: string;
+    textFieldLetterSpacing: string;
+    textFieldLineHeight: string;
+    textFieldLabelColor: string;
+    textFieldLabelColorReadOnly: string;
+    textFieldLabelOffset: string;
+    textFieldLabelFontFamily: string;
+    textFieldLabelFontStyle: string;
+    textFieldLabelFontSize: string;
+    textFieldLabelFontWeight: string;
+    textFieldLabelLetterSpacing: string;
+    textFieldLabelLineHeight: string;
+    textFieldLabelInnerFontFamily: string;
+    textFieldLabelInnerFontStyle: string;
+    textFieldLabelInnerFontSize: string;
+    textFieldLabelInnerFontWeight: string;
+    textFieldLabelInnerLetterSpacing: string;
+    textFieldLabelInnerLineHeight: string;
+    textFieldLabelInnerPadding: string;
+    textFieldContentLabelInnerPadding: string;
+    textFieldLeftHelperColor: string;
+    textFieldLeftHelperColorReadOnly: string;
+    textFieldLeftHelperOffset: string;
+    textFieldLeftHelperFontFamily: string;
+    textFieldLeftHelperFontStyle: string;
+    textFieldLeftHelperFontSize: string;
+    textFieldLeftHelperFontWeight: string;
+    textFieldLeftHelperLetterSpacing: string;
+    textFieldLeftHelperLineHeight: string;
+    textFieldTextBeforeColor: string;
+    textFieldTextAfterColor: string;
+    textFieldTextBeforeMargin: string;
+    textFieldTextAfterMargin: string;
+    textFieldDisabledOpacity: string;
+    textFieldFocusColor: string;
+    textFieldChipCloseIconColor: string;
+    textFieldChipColor: string;
+    textFieldChipBackground: string;
+    textFieldChipColorHover: string;
+    textFieldChipBackgroundHover: string;
+    textFieldChipColorActive: string;
+    textFieldChipBackgroundActive: string;
+    textFieldChipBackgroundReadOnly: string;
+    textFieldChipColorReadOnly: string;
+    textFieldChipBackgroundReadOnlyHover: string;
+    textFieldChipColorReadOnlyHover: string;
+    textFieldChipOpacityReadonly: string;
+    textFieldChipGap: string;
+    textFieldChipBorderRadius: string;
+    textFieldChipWidth: string;
+    textFieldChipHeight: string;
+    textFieldChipPaddingRight: string;
+    textFieldChipPaddingLeft: string;
+    textFieldChipClearContentMarginLeft: string;
+    textFieldChipClearContentMarginRight: string;
+    textFieldChipCloseIconSize: string;
+    textFieldChipFontFamily: string;
+    textFieldChipFontSize: string;
+    textFieldChipFontStyle: string;
+    textFieldChipFontWeight: string;
+    textFieldChipLetterSpacing: string;
+    textFieldChipLineHeight: string;
+    emptyStatePadding: string;
+    labelOffset: string;
+    innerLabelGap: string;
+    helperTextColor: string;
+    helperTextOffset: string;
+    spinnerSize: string;
+    spinnerSizeTight: string;
+};
+export declare const constants: {
+    focusColor: string;
+    focusSize: string;
+    background: string;
+    boxShadow: string;
+    disclosureIconColor: string;
+    disclosureIconColorHover: string;
+    itemBackground: string;
+    itemBackgroundHover: string;
+    textfieldTargetColor: string;
+    textfieldOuterLabelColor: string;
+    textfieldInnerLabelColor: string;
+    textfieldPlaceholderColor: string;
+    textfieldBorderSize: string;
+    opacity: string;
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontLetterSpacing: string;
+    fontLineHeight: string;
+    cellTitleColor: string;
+    cellBackgroundColor: string;
+};
+//# sourceMappingURL=Combobox.tokens.d.ts.map

package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.tokens.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJlB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC"}

package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts

@@ -0,0 +1,137 @@
+import type { CSSProperties, ButtonHTMLAttributes } from 'react';
+import React from 'react';
+import { FocusedPathState } from './reducers';
+import { ItemOption, ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types';
+import type { ValueToCheckedMapType, ValueToItemMapType } from './hooks/getPathMaps';
+declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+declare type IsMultiselect = {
+    multiple?: false;
+    value?: string;
+    onChange?: (value: string) => void;
+    /**
+     * Если включено - будет выведено общее количество выбранных элементов вместо перечисления.
+     * @default false
+     */
+    isTargetAmount?: never | false;
+} | {
+    multiple: true;
+    value?: Array<string>;
+    onChange?: (value: Array<string>) => void;
+    isTargetAmount?: boolean;
+};
+export interface BasicProps {
+    /**
+     * Список элементов.
+     */
+    items: Array<ItemOption>;
+    /**
+     * Сторона открытия дропдауна относительно target элемента.
+     * @default bottom
+     */
+    placement?: Placement;
+    /**
+     * Метка-подпись к элементу.
+     */
+    label?: string;
+    /**
+     * Placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Вспомогательный текст снизу слева для поля ввода.
+     */
+    helperText?: string;
+    /**
+     * Слот для контента слева.
+     */
+    contentLeft?: React.ReactElement;
+    /**
+     * Слот для вспомогательного текста справа.
+     */
+    textBefore?: string;
+    /**
+     * Слот для вспомогательного текста слева.
+     */
+    textAfter?: string;
+    /**
+     * Вариант: обычный или сжатый
+     * @default normal
+     */
+    variant?: 'normal' | 'tight';
+    /**
+     * Значение css overflow для выпадающего меню.
+     * @example listOverflow="scroll"
+     */
+    listOverflow?: CSSProperties['overflow'];
+    /**
+     * Значение css height для выпадающего меню.
+     */
+    listHeight?: CSSProperties['height'];
+    /**
+     * Значение css width для выпадающего списка.
+     * @example width="200px"
+     */
+    listWidth?: CSSProperties['width'];
+    /**
+     * Портал для выпадающего списка. Принимает id контейнера или ref.
+     */
+    portal?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * Callback для кастомной настройки айтема в выпадающем списке.
+     */
+    renderItem?: (item: ItemOption) => React.ReactNode;
+    /**
+     * Функция фильтрации элементов.
+     */
+    filter?: (label: string, textValue: string) => boolean;
+    /**
+     * Закрывать ли выпадающий список после выбора элемента.
+     * @default если single, то true; если multiple, то false
+     */
+    closeAfterSelect?: boolean;
+    /**
+     * Размер компонента.
+     */
+    size?: string;
+    /**
+     * Вид компонента.
+     */
+    view?: string;
+    /**
+     * Расположение лейбла.
+     * @default outer
+     */
+    labelPlacement?: 'outer' | 'inner';
+    /**
+     * Компонент доступен только для чтения.
+     */
+    readOnly?: boolean;
+    /**
+     * Компонент неактивен.
+     */
+    disabled?: boolean;
+}
+export declare type ComboboxProps = BasicProps & IsMultiselect & Omit<ButtonHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+export declare type FloatingPopoverProps = {
+    target: React.ReactNode | ((ref: React.MutableRefObject<HTMLElement | null>) => React.ReactNode);
+    children: React.ReactNode;
+    opened: boolean;
+    onToggle: (opened: boolean) => void;
+    placement: Placement;
+    portal?: BasicProps['portal'];
+    offset?: number;
+};
+export declare type ItemContext = {
+    focusedPath: FocusedPathState;
+    checked: ValueToCheckedMapType;
+    multiple: ComboboxProps['multiple'];
+    size: ComboboxProps['size'];
+    handleCheckboxChange: (item: ItemOptionTransformed) => void;
+    handleItemClick: (item: ItemOptionTransformed, e: React.MouseEvent<HTMLElement>) => void;
+    variant: ComboboxProps['variant'];
+    renderItem: ComboboxProps['renderItem'];
+    valueToItemMap: ValueToItemMapType;
+    treeId: string;
+};
+export {};
+//# sourceMappingURL=Combobox.types.d.ts.map