import type { HTMLAttributes, ReactNode, SyntheticEvent, CSSProperties, RefObject } from 'react'; import { FocusedPathState } from './reducers/focusedPathReducer'; export type DropdownPlacement = 'auto' | 'top' | 'right' | 'bottom' | 'left'; export type DropdownTrigger = 'hover' | 'click'; export type HandleGlobalToggleType = (opened: boolean, event?: SyntheticEvent | Event) => void; export type PlacementType = 'auto' | 'top-start' | 'right-start' | 'bottom-start' | 'left-start'; export type ItemOption = { /** * Значение у item. */ value: string | number; /** * Label у item. */ label: string; /** * Сторона открытия вложенного выпадающего списка относительно текущего элемента. */ placement?: DropdownPlacement; /** * Список дочерних items. */ items?: ItemOption[]; /** * Слот в начале дочернего выпадающего списка. */ beforeList?: ReactNode; /** * Item не активен. */ disabled?: boolean; /** * Слот для контента слева. */ contentLeft?: ReactNode; /** * Слот для контента справа. */ contentRight?: ReactNode; /** * Отобразить ли разделитель до элемента. */ dividerBefore?: boolean; /** * Отобразить ли разделитель после элемента. */ dividerAfter?: boolean; /** * Classname для item. */ className?: string; /** * Способ открытия дочернего списка. */ trigger?: DropdownTrigger; /** * Максимальная высота дочернего выпадающего списка. */ listMaxHeight?: CSSProperties['height']; /** * Скрытие элемента, а также всех его дочерних элементов. */ hidden?: boolean; }; export type DropdownProps = { /** * Список элементов. */ items: T[]; /** * Способ открытия Dropdown окна - наведение или клик мышью. * @default click */ trigger?: DropdownTrigger; /** * Сторона открытия Dropdown относительно target элемента. * @default bottom */ placement?: DropdownPlacement; /** * Target для открытия. */ children?: ReactNode; /** * Вариант: обычный или сжатый * @default normal */ variant?: 'normal' | 'tight'; /** * CSS-свойство z-index для выпадающего списка. * @default 1000 */ zIndex?: CSSProperties['zIndex']; /** * Максимальная высота выпадающего списка. */ listMaxHeight?: CSSProperties['height']; /** * Значение css width для выпадающего списка. * @example width="200px" */ listWidth?: CSSProperties['width']; /** * Портал для выпадающего списка. Принимает id контейнера или ref. */ portal?: string | RefObject; /** * Callback для кастомной настройки айтема в выпадающем списке. */ renderItem?: (item: T) => ReactNode; /** * Ячейка для контента в начале выпадающего списка. */ beforeList?: ReactNode; /** * Ячейка для контента в конце выпадающего списка. */ afterList?: ReactNode; /** * Событие сворачивания/разворачивания Dropdown. */ onToggle?: (isOpen: boolean, event?: SyntheticEvent | Event) => void; /** * Выпадающий список открыт всегда. * @default false */ alwaysOpened?: boolean; /** * Обработчик наведения на item. */ onHover?: (index: number, item: T) => void; /** * Обработчик выбора item. */ onItemSelect?: (item: T, event: SyntheticEvent) => void; /** * Открывает выпадающий список окно по правому клику мышью * @default false */ openByRightClick?: boolean; /** * Отступ выпадающего списка относительно элемента, у которого оно вызвано. * @default [0, 8] */ offset?: [number, number]; /** * Закрыть выпадающий список после выбора. * @default true */ closeOnSelect?: boolean; /** * Закрывать окно при нажатии вне области Dropdown. * @default true */ closeOnOverlayClick?: boolean; /** * WAI-ARIA role элемента меню. * @default option */ itemRole?: string; /** * Выпадающий список не активен. */ disabled?: boolean; /** * Размер компонента. */ size?: string; /** * Вид компонента. */ view?: string; } & HTMLAttributes; export type FloatingPopoverProps = { target: ReactNode; children: ReactNode; opened: boolean; onToggle: (opened: boolean, event?: SyntheticEvent | Event) => void; placement: PlacementType; trigger: DropdownProps['trigger']; isInner: boolean; portal?: DropdownProps['portal']; offset?: [number, number]; zIndex?: DropdownProps['zIndex']; }; export type ItemContext = { focusedPath: FocusedPathState; size: DropdownProps['size']; variant: DropdownProps['variant']; itemRole: DropdownProps['itemRole']; handleGlobalToggle: HandleGlobalToggleType; closeOnSelect: DropdownProps['closeOnSelect']; onHover: DropdownProps['onHover']; onItemSelect: DropdownProps['onItemSelect']; treeId: string; renderItem: DropdownProps['renderItem']; }; //# sourceMappingURL=Dropdown.types.d.ts.map