https://pastein.ru/t/EHg
Загрузка данных
import { AccordionTabChangeEvent } from 'primereact/accordion';
import { AppendToType } from 'primereact/api';
import { ButtonHTMLAttributes } from 'react';
import type { CalendarProps as CalendarProps_2 } from 'primereact/calendar';
import { ChangeEventHandler } from 'react';
import { CheckboxChangeEvent as CheckboxChangeEvent_2 } from 'primereact/checkbox';
import { ComponentType } from 'react';
import { ConfirmDialogProps } from 'primereact/confirmdialog';
import { FC } from 'react';
import { FocusEventHandler } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { HTMLAttributeAnchorTarget } from 'react';
import { HTMLAttributes } from 'react';
import { InputHTMLAttributes } from 'react';
import { InputMaskProps } from 'primereact/inputmask';
import { InputSwitchChangeEvent } from 'primereact/inputswitch';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { JSXElementConstructor } from 'react';
import { ListBoxProps } from 'primereact/listbox';
import { MemoExoticComponent } from 'react';
import { MenuItem } from 'primereact/menuitem';
import { MouseEventHandler } from 'react';
import { MutableRefObject } from 'react';
import { PropsWithChildren } from 'react';
import { PropsWithoutRef } from 'react';
import { RadioButtonChangeEvent } from 'primereact/radiobutton';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { Select } from './Select';
import { SyntheticEvent } from 'react';
import { TabViewTabChangeEvent } from 'primereact/tabview';
import { TextareaHTMLAttributes } from 'react';
import { ToasterProps as ToasterProps_2 } from 'sonner';
declare type Action = typeof Actions.type;
export declare const ActionMenu: MemoExoticComponent<({ size, options, popup, actionMenuRef, radius, openSubmenuLeft, position, targetRef, ...props }: ActionMenuProps) => JSX_2.Element>;
export declare type ActionMenuProps = E_6 & {
/**
* Размер Action Menu
* @type { 'sm' | 'md' }
*/
size: 'sm' | 'md';
/**
* Вариант использования меню
* @type { 'boolean }
* @default false
*/
popup: boolean;
/**
* useRef элемента меню
* @type { MutableRefObject<null> }
*/
actionMenuRef: MutableRefObject<null>;
/**
* Массив элементов меню
*/
options?: ElementMenuProps[];
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg'}
* @default 'xxs'
*/
radius?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
/**
* Открытие вложенного меню влево
* @type { boolean }
* @default false
*/
openSubmenuLeft?: boolean;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Позиционирование меню для popup={true}
* @type { 'left' | 'right' }
* @default 'left'
*/
position?: 'left' | 'right';
/**
* targetRef элемента, который открывает ActionMenu при position !== 'left'
* Данный пропс обязательный для position !== 'left'
* @type { MutableRefObject<null> }
*/
targetRef?: MutableRefObject<null>;
/**
* Событие фокуса на меню
* @type { (e: React.SyntheticEvent) => void }
*/
onFocus?: (e: React.SyntheticEvent) => void;
/**
* Событие blur для меню или закрытия Popup меню
* @type { (e: React.SyntheticEvent) => void }
*/
onBlur?: (e: React.SyntheticEvent) => void;
/**
* Событие открытия Popup меню
* @type { (e: React.SyntheticEvent) => void }
*/
onShow?: (e: React.SyntheticEvent) => void;
/**
* Событие закрытия Popup меню
* @type { (e: React.SyntheticEvent) => void }
*/
onHide?: (e: React.SyntheticEvent) => void;
};
declare type ActionProps = {
/**
* Тип элемента ListItem
*/
type: 'action';
/**
* Текст элемента action
*/
text: string;
/**
* Иконка слева
*/
icon?: IconName;
/**
* Состояние disabled
*/
disabled?: boolean;
/**
* onClick
*/
onClick?: () => void;
};
declare const Actions: {
Slot: FC<{
children?: ReactNode | undefined;
}>;
resolve: (children: ReactNode, extraProps?: Partial<{
children?: ReactNode | undefined;
}> | undefined) => ReactElement<{
children?: ReactNode | undefined;
}, string | JSXElementConstructor<any>> | null;
type: ReactElement<{
children?: ReactNode | undefined;
}, FC<{
children?: ReactNode | undefined;
}>>;
};
export declare const ActionToast: ForwardRefExoticComponent<Omit<ActionToastProps, "ref"> & RefAttributes<ActionToastRefMethods>>;
export declare type ActionToastProps = E_10 & {
/**
* Размер Action Toast
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: 'sm' | 'md';
/**
* Расположение Action Toast. Для custom необходимо определить координаты через ref
* @type { 'top' | 'bottom' | 'custom' }
* @default 'bottom'
*/
location?: 'top' | 'bottom' | 'custom';
/**
* useRef элемента Action Toast
* @type { MutableRefObject<null> }
*/
ref: MutableRefObject<null>;
/**
* Массив элементов Action Toast
*/
options: ElementActionToastProps[];
/**
* Пользовательские css классы для компонента Action Toast
* @type { string }
*/
className?: string;
/**
* Кнопка закрытия Action Toast
* @type { boolean }
* @default false
*/
close?: boolean;
/**
* Управление расположением ActionToast
* @type { boolean }
* @default false
*/
useTracking?: boolean;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Расстояние от нижней или верхней части экрана
* @type { 16 | 24 | 32 | 40 | 48 | 56 }
* @default 24
*/
offsetDisplay?: 16 | 24 | 32 | 40 | 48 | 56;
/**
* onRemove при закрытии ActionToast
* @type { () => void }
*/
onRemove?: () => void;
/**
* Кастомное позиционирование
* @type {{ left: string, right: string }}
*/
customPosition?: {
/**
* Отступ слева в px
* @type { string }
*/
left?: string;
/**
* Отступ справа в px
* @type { string }
*/
right?: string;
/**
* transform стили
* @type { string }
*/
transform?: string;
};
};
declare type ActionToastRefMethods = {
/**
* Функция для управления состоянием Action Toast. При добавлении в toggle(e) event, - компонент будет позиционироваться относительно элемента, на котором произошло событие.
* @type { (e?) => ref.current.toggle(e) }
*/
toggle?: (e?: any) => void;
/**
* Функция для открытия Action Toast. При добавлении в toggle(e) event, - компонент будет позиционироваться относительно элемента, на котором произошло событие.
* @type { (e?) => ref.current.show(e) }
*/
show?: (e?: any) => void;
/**
* Функция для закрытия Action Toast
* @type { () => ref.current.hide() }
*/
hide?: () => void;
/**
* Функция для установки позиции Action Toast. Для использования данного метода требуется установить location='custom'
* @type { (x: number, y: number) => ref.current.setPosition(x, y) }
* @deprecated
* @see customPosition
*/
setPosition?: (x: number, y: number) => void;
/**
* Компонент Action Toast
*/
getElement?: () => HTMLElement;
/**
* Состояние компонента ActionToast
*/
visible?: () => boolean;
};
export declare function addToast({ title, description, duration, variant, actions, }: OptionsWithAction): string | number;
export declare function addToasts(toasts: OptionsWithAction[]): (string | number)[];
export declare const Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<AlertRef>>;
export declare type AlertProps = {
/**
* Заголовок
* @type { string }
*/
title?: string;
/**
* Текст - дополнительное описание
* @type { string }
*/
message?: string | ReactElement;
/**
* Тип алерта
* @type {'success' | 'info' | 'warning' | 'error'}
*/
severity: LiteralUnion<'success' | 'info' | 'warning' | 'error'>;
/**
* Параметры дополнительной кнопки
*/
buttonProps?: Omit<ButtonProps, 'variant' | 'typeColor' | 'size'>;
/**
* Параметры ссылки
*/
linkProps?: Pick<LinkTextProps, 'label' | 'target' | 'href'>;
/**
* Коллбэк при закрытии алерта
*/
onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
/**
* Дополнительные классы для обертки компонента
*/
className?: string;
/**
* Настройка отображения/скрытия кнопки крестика в компоненте
* @type { boolean }
* @default true
*/
buttonClose?: boolean;
};
declare interface AlertRef {
getMessageElement: () => HTMLDivElement | null;
}
export declare const AutoComplete: ForwardRefExoticComponent<AutoCompleteProps & RefAttributes<unknown>>;
/**
* Группа выпадающего списка
*/
declare interface AutoCompleteGroup {
/**
* Название группы
* @type string
*/
label?: string;
/**
* Элементы группы
* @type AutoCompleteItem[]
*/
items?: AutoCompleteItem[];
}
/**
* Элемент выпадающего списка
*/
export declare interface AutoCompleteItem {
/**
* Отображаемое название элемента
* @type string
*/
label?: string;
/**
* Ключ для элемента
* @type string | number
*/
value?: string | number;
/**
* Иконка для элемента из иконочного сета
* @type string
*/
icon?: string;
/**
* Подсказка для элемента
* @type string
*/
caption?: string;
/**
* Элемент заблокирован для выбора
* @type boolean
* @default false
*/
disabled?: boolean;
/**
* Идентификатор элемента
* @type string
*/
id?: string;
}
/**
* Элементы выпадающего списка
*/
export declare type AutoCompleteOptions = AutoCompleteItem[] | AutoCompleteGroup[];
/**
* Свойства для AutoComplete
*/
export declare interface AutoCompleteProps {
/**
* Значение для поля ввода
* @type { string | AutoCompleteItem }
*/
value: string | AutoCompleteItem | undefined;
/**
* Список предложений
* @type { AutoCompleteOptions }
*/
suggestions?: AutoCompleteOptions;
/**
* Список предложений в виде групп
* @type { boolean }
* @default false
*/
group?: boolean;
/**
* Позиция выпадающего списка
* @type 'bottom' | 'auto'
* @default 'bottom'
*/
menuPlacement?: 'bottom' | 'auto';
/**
* Заголовок для поля ввода
* @type { string | undefined }
* @default ''
*/
label?: string;
/**
* Размер текстового поля
* Для label внутри input используется только 'lg' и 'xl
* @type {'sm' | 'md' | 'lg' | 'xl' }
* @default 'lg'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Подсказка к полю
* @type { string }
* @default ''
*/
caption?: string;
/**
* Заполнение к полю
* @type { string }
* @default ''
*/
placeholder?: string;
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Обязательное поле (отображение знака *)
* @type { boolean }
* @default false
*/
required?: boolean;
/**
* Ошибка валидации
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Статус валидации "Обратить внимание"
* @type { boolean }
* @default false
*/
warning?: boolean;
/**
* Успешная валидация
* @type { boolean }
* @default false
*/
success?: boolean;
/**
* Расположение label
* @type { 'inside' | 'top' }
* @default 'inside'
*/
labelPos?: 'inside' | 'top';
/**
* Метод поиска вариантов для автозаполнения по запросу
* @param { query: string } строка из инпута
*/
completeMethod: ({ query: string }: {
query: any;
}) => void;
/**
* Событие изменения ввода текста
* @param value: строка или обьект AutoCompleteItem
*/
onChange?: (value: string | AutoCompleteItem) => void;
/**
* Событие выбора элемента из списка
* @param value: AutoCompleteItem выбраннный элемент из списка
*/
onSelect?: (value: AutoCompleteItem) => void;
/**
* Событие фокуса инпута
*/
onFocus?: () => void;
/**
* Событие потери фокуса инпута
*/
onBlur?: () => void;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
/**
* Иконка для Input left
* @type { string }
* @default ''
*/
iconLeft?: string;
/**
* Иконка для Input right первая
* @type { string }
* @default ''
*/
iconRightFirst?: string;
/**
* InputText ref
* @type { MutableRefObject<null> }
*/
inputTextRef?: MutableRefObject<null>;
/**
* Placeholder для поля фильтра в списке
* @type { string }
* @default 'Поиск'
*/
filterInputPlaceholder?: string;
}
export declare const AutoSelect: ({ value, options, group, disabled, onChange, label, caption, placeholder, success, error, required, size, type, radius, menuPlacement, showDropdownOnFocus, }: AutoSelectProps) => JSX_2.Element;
declare type AutoSelectInputProps = Pick<InputTextProps, 'size' | 'label' | 'disabled' | 'required' | 'error' | 'success' | 'placeholder'> & {
type?: LiteralUnion<'brand' | 'neutral'>;
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
caption?: string;
};
export declare type AutoSelectProps = AutoSelectInputProps & SelectDropdownMenuProps_2 & {
/**
* Выбранное значение для выпадающего списка
*/
value?: string;
/**
* Событие обновления значения выпадающего списка
* @param value: string ключ значения из списка
*
*/
onChange?: (value: string) => void;
/**
* Позиция выпадающего списка
* @type 'bottom' | 'auto'
* @default 'bottom'
*/
menuPlacement?: 'bottom' | 'auto';
/**
* Показывать dropdown при фокусе или только после ввода текста
* @type boolean
* @default true
*/
showDropdownOnFocus?: boolean;
};
export declare const Avatar: ({ size, type, content, badge, label, caption, rounded, imageAlt, whiteBg, ...props }: AvatarProps) => JSX_2.Element | null;
export declare type AvatarProps = {
/**
* Размер Avatar
* @type { 'xs' | 'sm' | 'md' | 'lg' }
* @default 'sm'
*/
size?: LiteralUnion<'xs' | 'sm' | 'md' | 'lg'>;
/**
* Вариант компонента
* @type { 'text' | 'icon' | 'image' }
* @default 'text'
*/
type?: 'text' | 'icon' | 'image';
/**
* Основной блок (текст, иконка или картинка)
* @type { string | IconName }
*/
content: string | IconName;
/**
* Badge
* @type { boolean }
* @default false
*/
badge?: boolean;
/**
* Label аватара
* @type { string }
*/
label?: string;
/**
* Caption аватара
* @type { string }
*/
caption?: string;
/**
* Круглый аватар
* @default false
*/
rounded?: boolean;
/**
* Alt текст для картинки аватара с type='image'
*/
imageAlt?: string;
/**
* Белый фон
* @type { boolean }
* @default false
*/
whiteBg?: boolean;
/**
* Событие нажатия на аватар
* @type { Function }
*/
onClickAvatar?: () => void;
};
export declare const Badge: (props: BadgeProps) => JSX_2.Element;
export declare interface BadgeProps extends Omit<React_3.DetailedHTMLProps<React_3.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
/**
* Значение отображаемое внутри байджа.
*/
value?: string | null;
/**
* Типа бейджа.
* @type {'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error'}
*/
type: BadgeType;
/**
* Вариант бейджа.
* @type { 'dot' | 'soft' | 'solid' } // Новый варианты badge для APCA
*/
variant: BadgeVariant;
/**
* Размер бейджа.
* @type {'sm' | 'md'}
*/
size: BadgeSize;
/**
* Не активное отображение бейджа.
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg'}
* @default 'lg'
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
}
declare type BadgeSize = LiteralUnion<'sm' | 'md'>;
declare type BadgeType = LiteralUnion<'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error'>;
declare type BadgeVariant = LiteralUnion<'dot' | 'soft' | 'solid'>;
declare type BaseGroupButtonProps = {
/**
* Размер кнопки (например, 'sm', 'md', 'lg', 'xl')
*/
size: 'sm' | 'md' | 'lg' | 'xl';
variant: Pick<ButtonProps, 'variant'>;
typeColor: Pick<ButtonProps, 'typeColor'>;
};
declare type BaseProps = {
/**
* Размер
*/
size: 'sm' | 'md';
/**
* Кастомные стили для компонента
*/
className?: string;
};
export declare const BottomSheet: ({ label, subtitle, footer, children, open, visibleHeader, headerTemplate, openMaxHeight, setOpen, checkMaxHeight, classNames, }: BottomSheetProps) => JSX_2.Element;
export declare type BottomSheetProps = {
/**
* Заголовок BottomSheet
* @type {string}
* @default ''
*/
label: string;
/**
* Подзаголовок BottomSheet
* @type {string}
* @default ''
*/
subtitle?: string;
/**
* Дочерние компоненты или текстовая строка
* @type {React.ReactElement | string}
*/
children: React.ReactElement | string;
/**
* Состояние BottomSheet
* @type { boolean }
* @default false
*/
open: boolean;
/**
* Дополнительный header template
* @type {React.ReactElement | string}
*/
headerTemplate?: React.ReactElement | string;
/**
* Header в BottomSheet
* @type { boolean }
*/
visibleHeader?: boolean;
/**
* Окрыть по умолчанию BottomSheet на 100%
* @type { boolean }
* @default false
*/
openMaxHeight?: boolean;
/**
* Функция для изменения состояния BottomSheet
*/
setOpen: (value: boolean) => void;
/**
* Передача кастомного элемента для отображение в футере.
*/
footer?: ReactNode;
/**
* Функция которая возвращает true, если BottomSheet открыт на 100%
*/
checkMaxHeight?: (isMaxHeight: boolean) => void;
/**
* Кастомные классы
*/
classNames?: {
/**
* Доп. классы для children wrapper
*/
childrenWrapper?: string;
headerWrapper?: string;
/**
* Доп. классы для footer wrapper
*/
footerWrapper?: string;
};
};
export declare const Breadcrumb: (props: BreadcrumbProps) => JSX_2.Element;
export declare type BreadcrumbMenuItem = MenuItem & {
/**
* Является ли элемент меню выбранным
* @type { boolean }
* @default false
*/
selected?: boolean;
/**
* Является ли элемент кнопкой для выпадающего меню
* @type { boolean }
* @default false
*/
isOverflowMenu?: boolean;
};
export declare type BreadcrumbProps = {
/**
* Класс root элемента
* @type { string }
* @default undefined
*/
className?: string;
/**
* Корневой элемент хлебных крошек
* @type { BreadcrumbMenuItem }
*/
home?: BreadcrumbMenuItem;
/**
* Массив элементов хлебных крошек
* @type { BreadcrumbMenuItem[] }
* @default []
*/
model?: BreadcrumbMenuItem[];
/**
* Временная задержка в мс при закрытии Tooltip, открытого наведением курсора на элемент
* @type { number }
*/
enterHoverDelay?: number;
};
declare type Breakpoints = {
/**
* Количество колонок при ширине экрана 360 - 767px. Максимальное количество - 8
* @type { CountCol_8 }
*/
xs: CountCol_8;
/**
* Количество колонок при ширине экрана 768 - 1023px. Максимальное количество - 12
* @type { CountCol_12 }
*/
sm: CountCol_12;
/**
* Количество колонок при ширине экрана 1024 - 1439px. Максимальное количество - 12
* @type { CountCol_12 }
*/
md?: CountCol_12;
/**
* Количество колонок при ширине экрана 1440 - 1599px. Максимальное количество - 12
* @type { CountCol_12 }
*/
lg?: CountCol_12;
/**
* Количество колонок при ширине экрана 1600 + px. Максимальное количество - 12
* @type { CountCol_12 }
*/
xl?: CountCol_12;
};
declare const BTextContainer: ForwardRefExoticComponent<SharedTooltipProps & {
children: string | React.ReactElement;
className?: string;
style?: React.CSSProperties;
type?: "width" | "length" | "showAlways" | "lineClamp";
stringLength?: number;
lineClampCount?: number;
dependencies?: Array<string | number | boolean>;
classNames?: BTextContainerClassNames;
} & RefAttributes<HTMLDivElement>>;
export { BTextContainer }
export { BTextContainer as TruncatedText }
/**
* Слоты для точечной настройки стилей (Slots Pattern)
*/
declare type BTextContainerClassNames = {
/** Корневой элемент */
base?: string;
/** Элемент с текстом (p) */
text?: string;
};
/**
* Входные параметры для компонента BTextContainer
*/
declare type BTextContainerProps = SharedTooltipProps & {
/**
* Текст, который необходимо обернуть в контейнер.
* ReactElement используется только для параметра type='showAlways'.
* При использование для параметра type='width'|'length', компонент будет работать с ошибкой
* @type { string | React.ReactElement}
*/
children: string | React.ReactElement;
/**
* Класс children элемента
* @type { string }
* @default undefined
*/
className?: string;
/**
* Стили для children элемента
* @type { React.CSSProperties }
*/
style?: React.CSSProperties;
/**
* Тип контейнера для текста. По ширине блока, по количеству символов в стороке или всегда показывать Tooltip для текста
* @type { 'width' | 'length' | 'showAlways' | 'lineClamp' }
* @default 'width'
*/
type?: 'width' | 'length' | 'showAlways' | 'lineClamp';
/**
* Длина допустимого текста. Данный параметр используется для type = 'length'
* @type { number }
*/
stringLength?: number;
/**
* Количество строк. Данный параметр используется для type = 'lineClamp'
* @type { number }
* @default 2
*/
lineClampCount?: number;
/**
* Массив зависимостей, которые управляют отображением тултипа
* @type { Array<string | number | boolean> }
*/
dependencies?: Array<string | number | boolean>;
/**
* Точечная настройка стилей по слотам
* @type { BTextContainerClassNames }
*/
classNames?: BTextContainerClassNames;
};
export { BTextContainerProps }
export { BTextContainerProps as TruncatedTextProps }
export declare const Button: ({ variant, size, label, icon, iconPos, loading, href, target, style, badgeLabel, radius, typeColor, iconColor, isActive, startContent, endContent, ...props }: ButtonProps) => JSX_2.Element;
export declare type ButtonProps = E & {
/**
* Текст кнопки.
* @type { string | ReactElement}
*/
label?: string | ReactElement;
/**
* Размер кнопки.
* @type {'sm' | 'md' | 'lg' | 'xl'}
* @default 'md'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Вариант кнопки.
* @type {'solid' | 'soft' | 'outline' | 'ghost'}
* @default 'solid'
*/
variant?: LiteralUnion<'solid' | 'soft' | 'outline' | 'ghost'>;
/**
* Имя кнопки из иконочного сета
* @type { JSX.Element }
* @default ''
*/
icon?: IconName;
/**
* Позиция иконки в кнопке. Применяется когда установлено свойство icon.
* @type { 'left' | 'right' }
* @default left
*/
iconPos?: LiteralUnion<'left' | 'right'>;
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @default false
*/
loading?: boolean;
/**
* Элемент в состоянии не активный
* @default false
*/
disabled?: boolean;
/**
* Применить закругление у кнопки.
* @default false
*/
rounded?: boolean;
/**
* Ссылка для перехода при нажатии
* @default undefined
*/
href?: string;
/**
* target атрибут для ссылок
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Label Бейджик в кнопке.
* @type { string }
*/
badgeLabel?: string;
/**
* Радиус скругления. По умолчанию radius для 'sm' = 8px, 'md' и 'lg' = 12px, 'xl' = 16px
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | 'xl'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
/**
* Тип кнопки
* @type {'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'error'}
* @default 'brand'
*/
typeColor?: LiteralUnion<'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'error'>;
/**
* Кастомный токен цвета для иконки в кнопке. по умолчанию цвет иконки и цвет текста одинаковые
* @type { ColorToken }
*/
iconColor?: ColorToken;
/**
* Если true - имитируется нажатие на кнопки. Полезно, когда необходимо показать, что кнопка активна (без участия пользователя)
*/
isActive?: boolean;
/**
* Children для компонента Button
* @deprecated Use 'startContent' or 'endContent'
* @see startContent
*/
children?: ReactNode;
/**
* Дополнительный контент для кнопки слева
*/
startContent?: ReactNode;
/**
* Дополнительный контент для кнопки справа
*/
endContent?: ReactNode;
};
export declare const ButtonScrollTop: (props: ButtonScrollTopProps) => JSX_2.Element;
export declare interface ButtonScrollTopProps {
/**
* Размер кнопки.
* @type {'md' | 'lg' | 'xl'}
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg' | 'xl'>;
/**
* Тип кнопки
* @type {'brand' | 'neutral'}
* @default 'neutral'
*/
typeColor?: LiteralUnion<'brand' | 'neutral'>;
/**
* Применить закругление у кнопки.
* @default false
*/
rounded?: boolean;
/**
* Target элемента
* При target = 'parent-footer', для контейнера необходимо добавить класс relative
* @type { 'window' | 'parent' | 'parent-footer' }
* @default 'window'
*/
target?: 'window' | 'parent' | 'parent-footer';
/**
* Значение скролла в пикселях, после которого появляется кнопка
* @type { number }
* @default 400
*/
scrollValueY?: number;
/**
* Расположение кнопки
* @default bottom: 24, right: 24
*/
buttonPosition?: {
bottom?: number;
right?: number;
};
}
export declare const Calendar: ForwardRefExoticComponent<CalendarProps & RefAttributes<CalendarRef>>;
export declare const CalendarCard: (props: CalendarCardProps) => JSX_2.Element;
export declare type CalendarCardProps = {
/**
* Тип карточки
* @type { 'moex' | 'nsd' }
*/
type: 'moex' | 'nsd';
/**
* Дата события/мероприятия
* @type { Date }
*/
date: Date;
/**
* Текст для варианта события
* @type { string }
*/
typeEventText?: string;
/**
* Заголовок события
* @type { string }
*/
headingText: string;
/**
* Место проведения события
* @type { string }
*/
locationText?: string;
/**
* Rounded карточки
* @type { 'none' | 'left' | 'right' | 'top' | 'bottom' | 'lowerLeft' | 'lowerRight' | 'upperLeft' | 'upperRight' | 'full' }
* @default 'none'
*/
rounded?: 'none' | 'left' | 'right' | 'top' | 'bottom' | 'lowerLeft' | 'lowerRight' | 'upperLeft' | 'upperRight' | 'full';
/**
* Текст кнопки
* @type { string }
*/
buttonText: string;
/**
* Локализация
* @type { 'ru' | 'en' }
* @default 'ru'
*/
locale?: 'ru' | 'en';
/**
* Дополнительные классы для контейнера карточки
* @type { string }
*/
className?: string;
/**
* Предварительная дата мероприятия
* @type { boolean }
* @default false
*/
preDate?: boolean;
/**
* Текст для предварительной даты мероприятия
* @type { string }
* @default 'Дата предварительная'
*/
preDateText?: string;
/**
* Событие клика по карточке
* @type { () => void }
*/
onClick?: () => void;
};
export declare type CalendarProps = CalendarProps_2 & {
label?: string;
/**
* Обновление локали компонента календарь
* Динамическое обновление локали не поддерживается. Необходимо удалить исходный компонент и создать новый с необходимыми параметрами
* Для обновление локализации лучше использовать пропс language в провайдере
* @type { 'ru' | 'en' }
*/
locale?: Locale;
inline?: boolean;
/**
* Показывать input для ввода даты в режиме inline
*/
showInlineInput?: boolean;
showButtonBar?: boolean;
showTime?: boolean;
hideDays?: boolean;
showSeconds?: boolean;
disabled?: boolean;
labelPos?: 'inside' | 'top';
onChange?: (value: {
value: Date | Date[] | null | null[] | undefined;
}) => void;
required?: InputTextMaskProps['required'];
inputSize?: InputTextMaskProps['size'];
inputCaption?: InputTextMaskProps['caption'];
inputSuccess?: InputTextMaskProps['success'];
inputError?: InputTextMaskProps['error'];
/**
* Если передано значение true - календарь будет открыт
* в компоненте BottomSheet, полезно для работы с маленькими экранами (мобильный, планшет)
*/
openInBottomSheet?: boolean;
/**
* Доп. классы для BottomSheet
*/
bottomSheetClassNames?: BottomSheetProps['classNames'];
/**
* Если передано значение true - значнеие даты нельзя вводить через клавиатуру
*/
readOnlyInput?: boolean;
/**
* Регистр текстовой маски для календаря
* Динамическое обновление регистра текстовой маски не поддерживается. Необходимо удалить исходный компонент и создать новый с необходимыми параметрами
* @type { 'lowerCase' | 'upperCase' }
* @default 'upperCase'
*/
maskCase: LiteralUnion<'lowerCase' | 'upperCase'>;
minDate?: Date;
maxDate?: Date;
/**
* Позиция монтирования компонента календаря в режиме inline === false. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
};
export declare type CalendarRef = {
getElement: () => HTMLElement;
getCalendarElementRef: () => HTMLElement;
};
declare interface Callback {
/**
* Событие нажатия
* @param event
*/
onClick?: (event: React_2.SyntheticEvent<HTMLAnchorElement>) => void;
}
declare type Callbacks = Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'placeholder' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick'>;
declare type Callbacks_2 = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'name' | 'placeholder' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick'>;
declare type Callbacks_3 = Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
declare type Callbacks_4 = Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'placeholder' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick'>;
declare type Callbacks_5 = Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'placeholder' | 'onFocus' | 'onBlur' | 'onClick'>;
export declare const Checkbox: (props: CheckboxProps) => JSX_2.Element;
/**
* Тип события onChange для компонента Checkbox
*/
export declare type CheckboxChangeEvent = Partial<CheckboxChangeEvent_2>;
export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX_2.Element;
export declare type CheckboxGroupItem = CheckboxItem;
/**
* Api CheckboxGroup
*/
export declare type CheckboxGroupProps = {
label?: string;
caption?: string;
options: CheckboxItem[];
values: string[];
/**
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
tooltipIcon?: 'left' | 'right';
/**
* Состояние Error для CheckBox Group
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Элементы группы в состоянии не активный
* @type { boolean }
*/
disabled?: boolean;
onChange?: (selectedItems: CheckboxChangeEvent) => void;
};
declare type CheckboxItem = {
value: string;
subItems?: CheckboxItem[];
} & CheckboxProps;
export declare type CheckboxProps = {
/** Checkbox */
/**
* @default true
*/
animation?: boolean;
/**
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* @default false
*/
disabled?: boolean;
label?: string;
caption?: string;
/**
* @default false
*/
accesabilityHover?: boolean;
/**
* @default false
*/
checked?: boolean;
/**
* @default false
*/
isIndeterminate?: boolean;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
tooltipIcon?: 'left' | 'right';
/** Tooltip */
/**
* @default 'sm'
*/
sizeTooltip?: SharedTooltipProps['sizeTooltip'];
labelTooltip?: SharedTooltipProps['labelTooltip'];
/**
* @default 'top'
*/
locationTooltip?: SharedTooltipProps['locationTooltip'];
/**
* @default true
*/
directionTooltip?: SharedTooltipProps['directionTooltip'];
contrastTooltip?: SharedTooltipProps['contrastTooltip'];
enterHoverDelayTooltip?: SharedTooltipProps['enterHoverDelay'];
/** Popover */
titlePopover?: SharedPopoverProps['titlePopover'];
subTitlePopover?: SharedPopoverProps['subTitlePopover'];
/**
* @default top
*/
locationPopover?: SharedPopoverProps['locationPopover'];
childrenPopover?: SharedPopoverProps['childrenPopover'];
labelButtonPopover?: SharedPopoverProps['labelButtonPopover'];
iconButtonPopover?: SharedPopoverProps['iconButtonPopover'];
iconPosButtonPopover?: SharedPopoverProps['iconPosButtonPopover'];
loadingButtonPopover?: SharedPopoverProps['loadingButtonPopover'];
disabledButtonPopover?: SharedPopoverProps['disabledButtonPopover'];
onClickButtonPopover?: () => void;
labelLinkPopover?: SharedPopoverProps['labelLinkPopover'];
hrefPopover?: SharedPopoverProps['hrefPopover'];
targetPopover?: SharedPopoverProps['targetPopover'];
buttonClosePopover?: SharedPopoverProps['buttonClosePopover'];
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/** Handlers */
onChange?: (event: CheckboxChangeEvent) => void;
/**
* Не валидное состояние у кнопки
* @type { boolean }
* @default false
*/
error?: boolean | undefined;
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
export declare const Chip: ({ size, label, badge, icon, iconActive, clear, avatar, disabled, active, onClick, onClear, className, type, variant, radiusBadge, widthRestrict, ...props }: ChipProps) => false | JSX_2.Element;
export declare const ChipGroup: ({ value, multiple, size, sizeTooltip, locationTooltip, directionTooltip, contrastTooltip, options, onClick, type, variant, radiusBadge, widthRestrict, spacing, }: ChipGroupProps) => JSX_2.Element;
declare type ChipGroupOptions = Omit<ChipProps, 'size' | 'sizeTooltip' | 'locationTooltip' | 'labelTooltip' | 'directionTooltip' | 'contrastTooltip' | 'type' | 'variant' | 'radiusBadge' | 'widthRestrict'>;
export declare type ChipGroupProps = SharedTooltipProps & {
/**
* Значение выбранного значения или выбранных значений в группе.
* @type { string | string[] }
*/
value?: string | string[];
/**
* Размер Chip в группе.
* @type { 'md' | 'lg' }
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* Элементы группы.
* @type { ChipGroupOptions[] }
* @default '[]'
*/
options: ChipGroupOptions[];
/**
* Вариант выбора в группе компонентов Chip
* @type { boolean }
* @default false
*/
multiple?: boolean;
/**
* Функция для управления состоянием Chip
* @param { string } id - значение ChipId
* @type { Function }
*/
onClick?: (id: string) => void;
/**
* Тип Chip
* @type {'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'inverted'}
* @default 'neutral'
*/
type?: LiteralUnion<'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'inverted'>;
/**
* Вариант Chip.
* @type {'soft' | 'outline'}
* @default 'soft'
*/
variant?: LiteralUnion<'soft' | 'outline'>;
/**
* Радиус скругления для Badge
* @type { 'xxs'|'xs'|'sm'|'md'|'lg' }
*/
radiusBadge?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
/**
* Ограничения ширины Chip по правилам ЕДС
* @type { boolean }
* @default true
*/
widthRestrict?: boolean;
/**
* Расстояние между элементами (значение токена)
* @type { string }
* @default 0250
*/
spacing?: string;
};
export declare type ChipProps = SharedTooltipProps & {
/**
* id компонента Chip
* @type { string }
* @default ''
*/
id: string;
/**
* Размер элемента Chip
* @type { 'md' | 'lg' }
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* Текст в элементе Chip
* @type { string }
*/
label: string;
/**
* Текст бейджика
* @type { string | undefined }
* @default ''
*/
badge?: string;
/**
* Иконка слева из иконочного сета
* @type { JSX.Element }
* @default false
*/
icon?: IconName | undefined;
/**
* Использовать иконку только в состоянии active
* @type { boolean | undefined }
* @default false
*/
iconActive?: boolean;
/**
* Использовать иконку удаления чипса
* @type { boolean }
*/
clear: boolean;
/**
* Функция, которая выполняется при удалении чипса.
* @type { Function }
*/
onClear?: () => void;
/**
* Использовать аватар в Chip
* @type { string | undefined }
* @default ''
*/
avatar?: string;
/**
* Элемент в состоянии не активный
* @type { boolean | undefined }
* @default false
*/
disabled?: boolean;
/**
* Состояние компонента Chip
* @type { boolean }
* @default false
*/
active?: boolean;
/**
* Функция для изменения состояния компонента Chip
* @type { Function }
*/
onClick?: () => void;
/**
* Тип Chip
* @type {'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'inverted'}
* @default 'neutral'
*/
type?: LiteralUnion<'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'inverted'>;
/**
* Вариант Chip.
* @type {'soft' | 'outline'}
* @default 'soft'
*/
variant?: LiteralUnion<'soft' | 'outline'>;
/**
* Радиус скругления для Badge
* @type { 'xxs'|'xs'|'sm'|'md'|'lg' }
* @default
*/
radiusBadge?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
/**
* Ограничения ширины Chip по правилам ЕДС
* @type { boolean }
* @default true
*/
widthRestrict?: boolean;
/**
* Класс компонента
* @type { string | undefined }
* @default undefined
*/
className?: string;
};
export declare const ChipsFilter: (props: ChipsFilterProps) => JSX_2.Element;
export declare type ChipsFilterOptions = {
/**
* id елемента
* @type { string }
*/
id: string;
/**
* value опции.
* Дополнение: в массиве Array<string | null> null используется только для диапазона дат
* @type { string | Array<string | null> }
*/
value: string | Array<string>;
};
export declare type ChipsFilterProps = {
/**
* Размер компонентов Chip
* @type { 'md' | 'lg' }
* @default 'md'
*/
size?: 'md' | 'lg';
/**
* Список опций
* @type { Array<ChipsFilterOptions> }
* @default 'Дата предварительная'
*/
options: Array<ChipsFilterOptions>;
/**
* Использовать divider для разделения опций
* @type { boolean }
* @default true
*/
divider?: boolean;
/**
* Расстояние между элементами (значение токена)
* @type { '0125' | '0250' | '0375' | '0500' | '0625' | '0750' | '0875' | '1000' }
* @default '0250'
*/
spacing?: '0125' | '0250' | '0375' | '0500' | '0625' | '0750' | '0875' | '1000';
/**
* Показывать счётчик. Элементы расположены в одну строку
* @type { boolean }
* @default true
*/
visibleCounterChip?: boolean;
/**
* onChange обновления списка опций
* @type { (item: ChipsFilterOptions[]) => void }
*/
onChange: (item: ChipsFilterOptions[]) => void;
};
export declare function clearToasts(): void;
export declare const Col: ({ type, layoutType, breakpoints, offsets, offsetsRight, children, ...attributes }: ColProps) => JSX_2.Element;
export declare const Collapse: ForwardRefExoticComponent<CollapseProps & RefAttributes<unknown>>;
declare interface CollapseCallbacks {
/**
* Обработчик изменения значения.
* @type {Event}
*/
onTabChange?: Event_2;
/**
* Событие закрытия вкладки.
* Вызывается, когда элемент коллапса закрывается.
* @type {Event}
*/
onTabClose?: Event_2;
/**
* Событие открытия вкладки.
* Вызывается, когда элемент коллапса открывается.
* @type {Event}
*/
onTabOpen?: Event_2;
}
declare interface CollapseCallbacks_2 {
/**
* Обработчик изменения значения.
* @type {Event}
*/
onTabChange?: Event_4;
/**
* Событие закрытия вкладки.
* Вызывается, когда элемент коллапса закрывается.
* @type {Event}
*/
onTabClose?: Event_4;
/**
* Событие открытия вкладки.
* Вызывается, когда элемент коллапса открывается.
* @type {Event}
*/
onTabOpen?: Event_4;
}
/**
* Тип, представляющий событие изменения вкладки в компоненте Collapse.
*
* CollapseEvent является синонимом AccordionTabChangeEvent и используется для
* обработки событий, связанных с изменением состояния вкладок в компоненте коллапса.
* Это может включать открытие или закрытие одной или нескольких вкладок.
*
* @type {AccordionTabChangeEvent}
*/
export declare type CollapseEvent = AccordionTabChangeEvent;
/**
* Тип, представляющий событие изменения вкладки в компоненте Collapse.
*
* CollapseEvent является синонимом AccordionTabChangeEvent и используется для
* обработки событий, связанных с изменением состояния вкладок в компоненте коллапса.
* Это может включать открытие или закрытие одной или нескольких вкладок.
*
* @type {AccordionTabChangeEvent}
*/
declare type CollapseEvent_2 = AccordionTabChangeEvent;
export declare const CollapseGhost: ForwardRefExoticComponent<CollapseGhostProps & RefAttributes<CollapseGhostMethods>>;
export declare type CollapseGhostEvent = CollapseEvent_2;
export declare type CollapseGhostMethods = {
getElement: () => HTMLElement | undefined;
/**
* Метод для программного открытия коллапса
*/
openCollapse: () => void;
/**
* Метод для программного закрытия коллапса
*/
closeCollapse: () => void;
};
export declare interface CollapseGhostProps extends CollapseCallbacks_2 {
/**
* Заголовок группы компонента Collapse
* @type { string }
*/
header: string;
/**
* Состояние disabled
* @type { boolean }
*/
disabled?: boolean;
/**
* Опции элемента коллапса.
* Содержит массив объектов, определяющих заголовок, контент и дополнительные параметры для каждого элемента коллапса.
* @type {CollapseOptionProps[]}
*/
options: CollapseOptionProps_2[];
/**
* Индекс активного таба.
* Определяет, какой из элементов коллапса в данный момент открыт. Может быть числом, массивом чисел или отсутствовать.
* @type {null | undefined | number | number[]}
*/
activeIndex?: null | undefined | number | number[];
/**
* Множественный выбор.
* Если установлено в true, позволяет открывать несколько элементов коллапса одновременно.
* @type {boolean | undefined}
*/
multiple?: boolean | undefined;
/**
* Размер.
* Определяет размер компонента коллапса. Значение по умолчанию — 'md'.
* @type {'sm' | 'md' | 'lg'}
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Свойства кнопки 1
*/
actionButtonPropsFirst?: Omit<ButtonProps, 'size' | 'variant'>;
/**
* Свойства кнопки 2
*/
actionButtonPropsSecond?: Omit<ButtonProps, 'size' | 'variant'>;
/**
* Позиция иконки expand/collapse.
* @type {boolean}
*/
iconPosition?: 'left' | 'right';
/**
* Свойство для рендера пользовательского контента в коллапс.
* Если определен данный элемент опции коллапса НЕ рендерятся.
*/
customContent?: ReactElement | (() => ReactElement);
}
declare type CollapseOptionProps = {
/**
* Заголовок, описывающий краткое содержание скрытого контента.
* @type {string}
*/
header: string;
/**
* Скрытый контент.
* @type {React.ReactNode}
*/
content: React.ReactNode;
/**
* Статусное уведомление.
* @type {string}
*/
badge?: string;
/**
* Вариант статусного уведомления
* @type {string}
*/
badgeType?: BadgeProps['type'];
/**
* Tag для Collpase. При одновременном использовании badge и tag, приоритет badge выше
* @type { label: TagProps['label']; icon?: TagProps['icon']; type?: TagProps['type'] }
*/
tag?: {
label: TagProps['label'];
icon?: TagProps['icon'];
type?: TagProps['type'];
};
/**
* Заблокированный элемент.
* @type {boolean}
*/
disabled?: boolean;
/**
* Свойства switcher
* При одновременном использовании actionButtonProps и switcherProps, приоритет у actionButtonProps выше
* onChange: (index: number) => void
*/
switcherProps?: Omit<SwitcherProps, 'id' | 'size' | 'type' | 'caption' | 'icon'>;
};
declare type CollapseOptionProps_2 = {
/**
* Заголовок, описывающий краткое содержание скрытого контента.
* @type {string}
*/
header: string;
/**
* Скрытый контент.
* @type {React.ReactNode}
*/
content: React.ReactNode;
/**
* Статусное уведомление.
* @type {string}
*/
badge?: string;
/**
* Заблокированный элемент.
* @type {boolean}
*/
disabled?: boolean;
};
export declare interface CollapseProps extends CollapseCallbacks {
/**
* Опции элемента коллапса.
* Содержит массив объектов, определяющих заголовок, контент и дополнительные параметры для каждого элемента коллапса.
* @type {CollapseOptionProps[]}
*/
options: CollapseOptionProps[];
/**
* Индекс активного таба.
* Определяет, какой из элементов коллапса в данный момент открыт. Может быть числом, массивом чисел или отсутствовать.
* @type {null | undefined | number | number[]}
*/
activeIndex?: null | undefined | number | number[];
/**
* Множественный выбор.
* Если установлено в true, позволяет открывать несколько элементов коллапса одновременно.
* @type {boolean | undefined}
*/
multiple?: boolean | undefined;
/**
* Размер.
* Определяет размер компонента коллапса. Значение по умолчанию — 'md'.
* @type {'sm' | 'md' | 'lg'}
* @default 'sm'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Позиция иконки expand/collapse.
* @type {boolean}
*/
iconPosition?: 'left' | 'right';
/**
* Свойства кнопки
*/
actionButtonProps?: Omit<ButtonProps, 'size' | 'variant'>;
/**
* Список активных элементов switcher
* @type { number[] }
*/
activeSwitches?: number[];
/**
* Ограничение количества строк в компоненте
* @type { boolean }
* @default false
*/
limitHeightLabel?: boolean;
}
declare type ColorToken = `brand${ContrastColorToken}-${number}` | `neutral-${number}` | `info${ContrastColorToken}-${number}` | `success${ContrastColorToken}-${number}` | `warning${ContrastColorToken}-${number}` | `error${ContrastColorToken}-${number}`;
export declare type ColProps = HTMLAttributes<HTMLDivElement> & {
/**
* Поведение сетки. Необходимо устанавливать только при отсутствии sidebar в контейнере Grid ("sidebar = false") или в этом случае установить "type = 'fluid'"
* @type { 'fixed' | 'fluid' }
* @default 'fluid'
*/
type?: 'fixed' | 'fluid';
/**
* Тип компоновки
* @type { 'compact' | 'standard' | 'sparse' }
*/
layoutType: 'compact' | 'standard' | 'sparse';
/**
* Количество колонок, занимаемых элементом для каждого брейкпоинта
* @type { Breakpoints }
*/
breakpoints: Breakpoints;
/**
* margin-left у элемента для каждого брейкпоинта.
*/
offsets?: Offsets;
/**
* margin-right у элемента для каждого брейкпоинта
*/
offsetsRight?: Offsets;
/**
* Children колонки в сетке
*/
children?: React.ReactElement | React.ReactElement[];
};
declare type Column = {
/**
* ID колонки
* @type { string }
*/
id: string;
/**
* Заголовок колонки.
* @type { string }
*/
header: string;
/**
* Visible колонки
* @type { boolean }
*/
visible?: boolean;
/**
* Disabled для колонок (колонки нельзя скрыть, но можно перемещать)
* @type { boolean }
*/
disabled?: boolean;
/**
* Дочерние элементы (группы колонок)
*/
children?: Column[];
/**
* Дополнительные поля
*/
[key: string]: any;
};
declare type ContrastColorToken = '-contrast' | '';
declare type CountCol_12 = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
declare type CountCol_8 = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
declare type CustomPositionProps = {
/**
* Координата x
* @type { number }
*/
x?: number;
/**
* Координата y
* @type { number }
*/
y?: number;
};
declare type CustomPositionProps_2 = {
/**
* Координата x
* @type { number }
*/
x?: number;
/**
* Координата y
* @type { number }
*/
y?: number;
};
declare type CustomPositionProps_3 = {
/**
* Координата x
* @type { number }
*/
x?: number;
/**
* Координата y
* @type { number }
*/
y?: number;
};
export declare function DataRow(props: DataRowProps): JSX_2.Element;
export declare namespace DataRow {
var Label: typeof DataRowLabel;
var Value: typeof DataRowValue;
}
export declare const DataRowGroup: (props: DataRowGroupProps) => JSX_2.Element;
declare type DataRowGroupProps = {
size: DataRowProps['size'];
} & PropsWithChildren;
declare function DataRowLabel(props: DataRowLabelProps): JSX_2.Element | null;
export declare type DataRowLabelProps = {
text?: string;
tooltip?: TooltipProps;
};
export declare type DataRowProps = {
size: 'compact' | 'sm' | 'md';
label?: () => React_2.ReactNode;
value?: () => React_2.ReactNode;
className?: string;
} & PropsWithChildren;
declare function DataRowValue(props: DataRowValueProps): JSX_2.Element;
export declare type DataRowValueProps = {
text?: string;
additionalContent?: () => React_2.ReactNode;
};
declare type DecorateProps = {
/**
* Номер ошибки (для type === 'error')
* @type { string }
* @default ''
*/
label?: string;
/**
* Картинка
* Если указан параметр для изображения, то приоритет изображения выше
* @type { string }
*/
imgSrc?: string;
};
declare type DescriptionProps = {
type: 'description';
text: string;
icon?: IconName;
/**
* Классы иконки. Полезно для передачи класса анимации
*/
iconClassName?: string;
/**
* Элемент загрузки
* @type { boolean }
*/
loader?: boolean;
};
declare type Device = 'mobile' | 'tablet' | 'desktop' | 'desktopLG' | 'desktopXL';
export declare const Divider: ForwardRefExoticComponent<DividerProps_2 & RefAttributes<unknown>>;
export declare type DividerProps = {
/**
* Направление разделителя.
* - 'horizontal' (по умолчанию): горизонтальный разделитель.
* - 'vertical': вертикальный разделитель.
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* Объект для настройки отступов (padding) и стилей.
* - `divider`: Стили для самой линии разделителя.
*/
pt?: {
divider?: {
className?: string;
};
};
/**
* Отступы.
* В случае, если был передан объект - можно задавать отступы по вертикали и горизонтали отдельно.
* В ином случае оступы будут заданы одинаковы как по горизонтали, так и по вертикали.
* Значениями являются токены space из дизайн системы.
* Пример:
* - 0500
* - 1500
* - 0250
* @type{spacing: string | {vertical: string: horizontal: string}}
*/
spacing?: string | {
vertical: string;
horizontal: string;
};
/**
* Явное указание является ли разделитель flex элементом.
* В случае, если контейнер имеет свойство display:block, необходимо указать flexItem:false для корректного поведения.
* @default false
*/
flexItem?: boolean;
};
declare type DividerProps_2 = {
/**
* Направление разделителя.
* - 'horizontal' (по умолчанию): горизонтальный разделитель.
* - 'vertical': вертикальный разделитель.
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* Объект для настройки отступов (padding) и стилей.
* - `divider`: Стили для самой линии разделителя.
*/
pt?: {
divider?: {
className?: string;
};
};
/**
* Отступы.
* В случае, если был передан объект - можно задавать отступы по вертикали и горизонтали отдельно.
* В ином случае оступы будут заданы одинаковы как по горизонтали, так и по вертикали.
* Значениями являются токены space из дизайн системы.
* Пример:
* - 0500
* - 1500
* - 0250
* @type{spacing: string | {vertical: string: horizontal: string}}
*/
spacing?: string | {
vertical: string;
horizontal: string;
};
/**
* Явное указание является ли разделитель flex элементом.
* В случае, если контейнер имеет свойство display:block, необходимо указать flexItem:false для корректного поведения.
* @default false
*/
flexItem?: boolean;
};
export declare const DocumentCard: (props: DocumentCardProps) => JSX_2.Element;
export declare type DocumentCardProps = {
/**
* Заголовок карточки
* @type {string}
*/
label: string;
/**
* Описание карточки
* @type {string}
*/
description?: string;
/**
* Дата создания карточки
* @type {string}
*/
date?: string;
/**
* Название раздела
* @type {string}
*/
section?: string;
/**
* Событие нажатия на раздел
* @type {() => void}
*/
onClickSection?: () => void;
/**
* Tag success
* @type {boolean}
*/
tagSuccess?: boolean;
/**
* Tag success текст
* @type { string }
* @default 'Новая редакция'
*/
tagSuccessText?: string;
/**
* Tag neutral
* @type {boolean}
*/
tagNeutral?: boolean;
/**
* Tag success текст
* @type { string }
* @default 'Архив'
*/
tagNeutralText?: string;
/**
* Событие кнопки скачать
* @type {() => void}
*/
download?: () => void;
/**
* Событие кнопки скопировать ссылку на документ
* @type {() => void}
*/
copyLink?: () => void;
/**
* Заголовок Collapse
* @type {string}
*/
collapseHeader?: string;
/**
* Описание Collapse
* @type {string}
*/
collapseDescription?: string;
/**
* Показать checkbox
* @type {boolean}
*/
showCheckbox?: boolean;
/**
* Состояние checkbox
* @type {boolean}
*/
checkboxState?: boolean;
/**
* Событие кнопки checkbox
* @type {() => void}
*/
onChangeCheckbox?: (state: boolean) => void;
/**
* ссылка при нажатии на заголовок
* @type {string}
*/
link?: string;
/**
* Target при нажатии на заголовок
* @type {string}
*/
linkTarget?: string;
/**
* Добавить border к карточке
* @type {boolean}
*/
borderCard?: boolean;
/**
* Смещать контент при отсутствии checkbox
* @type { boolean }
*/
offsetContentWithoutCheckbox?: boolean;
};
export declare const Documents: (props: DocumentsProps) => JSX_2.Element;
declare type DocumentsOptionsProps = Omit<DocumentCardProps, 'checkboxState' | 'onChangeCheckbox'> & {
/**
* Value документа
* @type { string }
*/
value: string;
};
export declare type DocumentsProps = {
/**
* Список документов
* @type { DocumentsOptionsProps[] }
*/
options: DocumentsOptionsProps[];
/**
* Выбранные документы
* @type { string[] }
*/
values: string[];
/**
* Событие обновления values
* @type { (string[]) => void }
*/
onChangeDocument: (value: string[]) => void;
/**
* Событие download
* @type { () => void }
*/
download: () => void;
};
export declare const Drawer: (props: DrawerProps) => JSX_2.Element;
declare type DrawerButtonLinkProps = {
/**
* Label Кнопки
* @type { string }
*/
label: LinkTextProps['label'];
/**
* Имя иконки из иконочного сета
*/
iconAfter?: LinkTextProps['iconAfter'];
/**
* Имя иконки из иконочного сета
*/
iconBefore?: LinkTextProps['iconBefore'];
/**
* Элемент в состоянии не активный
*/
disabled?: LinkTextProps['disabled'];
/**
* Функция, которую необходимо вызвать, при нажатии на элемент
* @type { void }
*/
onClick: () => void;
};
declare type DrawerButtonProps = {
/**
* Label Кнопки
* @type { string }
*/
label: ButtonProps['label'];
/**
* Имя иконки из иконочного сета
*/
icon?: ButtonProps['icon'];
/**
* Расположение иконки в кнопке
*/
iconPos?: ButtonProps['iconPos'];
/**
* Состояние загрузки
*/
loading?: ButtonProps['loading'];
/**
* Элемент в состоянии не активный
*/
disabled?: ButtonProps['disabled'];
/**
* Функция, которую необходимо вызвать, при нажатии на элемент
* @type { void }
*/
onClick: () => void;
form?: string | undefined;
role?: string | undefined;
type?: 'submit' | 'reset' | 'button' | undefined;
};
export declare type DrawerProps = E_11 & {
/**
* Размер Drawer
* @type { 'sm' | 'md' | 'lg' | '75%' }
* @default 'sm'
*/
size?: 'sm' | 'md' | 'lg' | '75%';
/**
* Заголовок Drawer
* @type { string }
*/
label?: string;
/**
* Дополнительный текст
* @type { string }
*/
description?: string;
/**
* Пользовательские css классы для Drawer
* @type { string }
*/
className?: string;
/**
* Кнопка закрытия Drawer
* @type { boolean }
* @default false
*/
close?: boolean;
/**
* Кнопка Назад
* @type { boolean }
*/
buttonBack?: boolean;
/**
* Callback нажатия на кнопку buttonBack
*/
buttonBackClick?: () => void;
/**
* Children для Drawer
* @type { string | ReactNode }
*/
children: string | ReactNode;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Состояние Drawer
* @type { boolean }
*/
visible: boolean;
/**
* onHide при закрытии Drawer
* @type { () => void }
*/
onHide: () => void;
/**
* Props для кнопки призрака
* @type { DrawerButtonLinkProps }
*/
ghostButtonProps?: DrawerButtonLinkProps;
/**
* Props для кнопки отмены
* @type { DrawerButtonProps }
*/
rejectButtonProps?: DrawerButtonProps;
/**
* Props для кнопки принять
* @type { DrawerButtonProps }
*/
acceptButtonProps?: DrawerButtonProps;
/**
* Закрывать компонент при клике вне области Drawer
* @type { boolean }
* @default true
*/
closeClickOutside?: boolean;
};
export declare const Dropdown: ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & RefAttributes<DropdownRefMethods>>;
export declare type DropdownItem = DropdownOptions;
declare type DropdownOptions = {
/**
* label элемента
* @type { string }
*/
label: string;
/**
* Значение (ключ) элемента
* @type { string }
*/
value: string;
};
export declare type DropdownProps = {
/**
* Размер компонента Dropdown
* @type { 'md' | 'lg' }
* @default 'md'
*/
size?: 'md' | 'lg';
/**
* Выбранное значение в компоненте
* @type { string }
*/
value: string;
/**
* Набор опций для компонента Dropdown
*/
options: DropdownOptions[];
/**
* Иконка слева
* @type { string }
*/
icon?: string;
/**
* Радиус скругления
* @type { 'xxs'| 'xs' | 'sm' | 'md' | 'lg' }
* @default 'lg'
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
/**
* Пользовательские CSS классы для кнопки
*/
className?: string;
/**
* Состояние disabled для Dropdown
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Событие обновления значения
* @param value: string ключ значения из списка
*
*/
onChange: (value: string) => void;
/**
* Callback события focus на кнопке
*/
onFocus?: () => void;
/**
* Callback события blur на кнопке
*/
onBlur?: () => void;
/**
* Callback открытия списка
*/
onShow?: () => void;
/**
* Callback закрытия СПИСКА
*/
onHide?: () => void;
/**
* useRef PanelOverlay элемента
* @type { MutableRefObject<null> }
*/
ref?: MutableRefObject<null>;
/**
* Кастомная позиционирование компонента
* @type { CustomPositionProps }
*/
customPosition?: CustomPositionProps_3;
/**
* Позиция монтирования выпадающего меню. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
};
export declare type DropdownRefMethods = {
dropdownRootRef?: HTMLDivElement;
panelOverlayRef?: any;
dropdownMenuRef?: any;
};
/**
* Опции компонента Button Apca
*/
declare type E = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
declare type E_10 = HTMLAttributes<HTMLMenuElement>;
declare type E_11 = HTMLAttributes<HTMLMenuElement>;
declare type E_2 = Callbacks & HTMLAttributes<HTMLInputElement>;
declare type E_3 = Callbacks_2 & HTMLAttributes<HTMLTextAreaElement>;
declare type E_4 = React_2.ButtonHTMLAttributes<HTMLAnchorElement>;
declare type E_5 = React_2.ButtonHTMLAttributes<HTMLAnchorElement>;
declare type E_6 = HTMLAttributes<HTMLMenuElement>;
declare type E_7 = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
declare type E_8 = Callbacks_4 & HTMLAttributes<HTMLInputElement>;
declare type E_9 = Callbacks_5 & HTMLAttributes<HTMLInputElement>;
declare type ElementActionToastProps = {
/**
* Тип элемента item (type компонента ListItem) + 'divider'
* @type { 'action' | 'item' | 'label' | 'divider' }
*/
type: 'action' | 'item' | 'label' | 'divider';
/**
* Текст элемента Action Toast
* @type { string }
*/
label: string;
/**
* Имя иконки из иконочного сета
* @type { string }
* @default ''
*/
icon?: IconName;
/**
* Элемент меню в состоянии не активный
* @type { boolean | undefined }
*/
disabled?: boolean;
/**
* Использовать только иконку
* @type { boolean }
*/
onlyIcon?: boolean;
/**
* Активная опция
* @type { boolean }
*/
selected?: boolean;
/**
* Tooltip для опции, где onlyIcon === false
* @type { string }
*/
tooltip?: string;
/**
* Функция, которую необходимо вызвать, при нажатии на элемент
* @type { void }
*/
onClick?: () => void;
};
declare type ElementMenuProps = {
/**
* Текст элемента меню
* @type { string | undefined }
*/
label?: string;
/**
* Имя иконки из иконочного сета
* @type { string | undefined }
* @default ''
*/
icon?: IconName;
/**
* Текст в бейджике для работы с клавиатурой
* @type { string | undefined }
* @default false
*/
shortcut?: string;
/**
* Текст в бейджике с сообщением
* @type { string | undefined }
* @default false
*/
message?: string;
/**
* Вложенное меню
*/
items?: ElementMenuProps[] | ElementMenuProps[][];
/**
* Элемент меню в состоянии не активный
* @type { boolean | undefined }
* @default false
*/
disabled?: boolean;
/**
* Текст ссылки
* @type { string | undefined }
* @default undefined
*/
href?: string;
/**
* target атрибут для ссылки Link
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Функция, которую необходимо вызвать, при нажатии на элемент
* @type { void | undefined }
*
*/
command?: () => void;
/**
* Разделение элементов в меню
* @type { boolean | undefined }
* @default false
*/
separator?: boolean;
/**
* Tooltip
* @type { string }
*/
tooltip?: string;
};
declare type ElementMenuProps_2 = {
/**
* Текст элемента меню
* @type { string | undefined }
*/
label?: string | undefined;
/**
* Имя иконки из иконочного сета
* @type { string }
* @default ''
*/
icon?: IconName | undefined;
/**
* Текст в бейджике для работы с клавиатурой
* @type { string }
* @default false
*/
shortcut?: string | undefined;
/**
* Текст в бейджике с сообщением
* @type { string }
* @default false
*/
message?: string | undefined;
/**
* Вложенное меню
*/
items?: ElementMenuProps_2[] | ElementMenuProps_2[][] | undefined;
/**
* Элемент меню в состоянии не активный
* @default false
*/
disabled?: boolean | undefined;
/**
* Текст ссылки
* @type { string }
* @default undefined
*/
href?: string;
/**
* target атрибут для ссылки Link
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Функция, которую необходимо вызвать, при нажатии на элемент
* @type { void }
*
*/
command?: void;
/**
* Разделение элементов в меню
* @type { boolean }
* @default false
*/
separator?: boolean | undefined;
};
/**
* Событие
* @param e
* @type {CollapseEvent}
*/
declare type Event_2 = (e: CollapseEvent) => void | undefined;
/**
* Событие
* @type ModalDialogEvent
*/
declare type Event_3 = () => void;
/**
* Событие
* @param e
* @type {CollapseEvent}
*/
declare type Event_4 = (e: CollapseEvent_2) => void | undefined;
/**
* Событие
* @type PopupEvent
*/
declare type Event_5 = () => void;
declare interface Events {
/**
* Событие выбора активной вкладки.
* @param event
* @type TabViewTabChangeEvent
*/
onTabChange?: (event: TabViewTabChangeEvent) => void;
}
export declare const ExchangeElementsProvider: (props: Props) => JSX_2.Element;
declare type FileItemActionList = Omit<ElementMenuProps, 'command'> & {
onClick?: (file: UploadedFile, fileIndex: number) => void;
};
export declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<unknown>>;
export declare interface FileUploadProps {
/**
* Режим отображения компонента загрузки файлов
* @type {'button' | 'dropzone'}
* @default 'button'
*/
mode: 'button' | 'dropzone';
/**
* Флаг, указывающий возможность загрузки нескольких файлов
* @type {boolean}
* @default false
*/
multiple: boolean;
/**
* Размер компонента загрузки
* @type {'md' | 'lg'}
* @default 'md'
*/
size: 'md' | 'lg';
/**
* Текст заголовка
* @type {string}
* @default undefined
*/
titleText?: string;
/**
* Текст описания
* @type {string}
* @default undefined
*/
descriptionText?: string;
/**
* Текст кнопки
* @type {string}
* @default undefined
*/
buttonLabel?: string;
/**
* Флаг, указывающий на отключенное состояние компонента
* @type {boolean}
* @default false
*/
disabled?: boolean;
/**
* Состояние компонента
* @type {'error' | 'default'}
* @default 'default'
*/
state: 'error' | 'default';
/**
* Функция для рендеринга дополнительных действий для файла
* @type {(file: UploadedFile, fileIndex: number) => ReactElement}
* @default undefined
* @deprecated
* @see fileItemActionList
*/
moreActionElement?: (file: UploadedFile, fileIndex: number) => ReactElement;
/**
* Список дополнительных действий для файла
* @new
* @type {(file: UploadedFile, fileIndex: number) => FileItemActionList[]}
*/
fileItemActionList?: (file: UploadedFile, fileIndex: number) => FileItemActionList[];
/**
* Обработчик события изменения списка файлов
* @type {(files: UploadedFile[]) => void}
* @default undefined
*/
onChange?: (files: UploadedFile[]) => void;
/**
* Отложенное удаление файла, через backend. Список не обновляется на фронтенде.
* Обновление необходимо выполнить после удаления с backend
* @type { boolean }
* @default {false}
*/
backendRemove?: boolean;
/**
* Обработчик события удаления файла
* @type {(file: UploadedFile, index: number) => void}
* @default undefined
*/
onRemove?: (file: UploadedFile, index: number) => void;
/**
* Обработчик события отмены загрузки файла
* @type {(file: UploadedFile, index: number) => void}
* @default undefined
*/
onCancel?: (file: UploadedFile, index: number) => void;
/**
* CSS класс для списка файлов
* @type {string}
* @default ''
*/
listClassName?: string;
/**
* Допустимые расширения для файлов. Например: ['.pdf']
* @type { string[] }
*/
fileExtension?: string[];
/**
* Максимальный размер файла в МБ
* @type { number }
*/
maxFileSize?: number;
/**
* Допустимое количество файлов
* @type { number }
*/
maxFileCount?: number;
/**
* Обновление локали компонента FileUpload
* @type { 'ru' | 'en' }
* @default 'ru'
*/
locale?: 'ru' | 'en';
}
export declare interface FileUploadRef {
/**
* Метод для получения файлов, для дальнейшей их обработки
* @returns
*/
getFiles: () => UploadedFile[];
/**
* Метод для установки значения файлов, позволяет задать состояние по умолчанию
* @param files
* @returns
*/
setFiles: (files: InitialUploadedFile[]) => void;
}
export declare const Flex: ({ children, direction, alignItems, justifyContent, wrap, spacing, divider, pt, ...props }: FlexProps) => JSX_2.Element;
export declare type FlexProps = {
/**
* Дочерние элементы компонента
* @type {ReactNode | ReactNode[]}
*/
children?: ReactNode | ReactNode[];
/**
* Направление flex-контейнера
* @type {'row' | 'column' | 'row-reverse' | 'column-reverse'}
*/
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
/**
* Выравнивание элементов по поперечной оси
* @type {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'}
*/
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
/**
* Выравнивание элементов по главной оси
* @type {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'}
*/
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
/**
* Расстояние между элементами (значения токена). Пример
* spacing: '0250'
* @type {string}
*/
spacing?: string;
/**
* Перенос элементов на новую строку/столбец
* @type {'nowrap' | 'wrap' | 'wrap-reverse'}
*/
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
/**
* Разделитель между элементами
* @type {ReactNode}
*/
divider?: ReactNode;
/**
* Пропс для передачи классов через pt (pass through)
* @type {{ root?: { className?: string }; item?: { className?: string } }}
*/
pt?: {
root?: {
className?: string;
};
item?: {
className?: string;
};
};
};
export declare const FloatingButton: (props: FloatingButtonProps) => JSX_2.Element;
export declare type FloatingButtonActionMenuProps = {
/**
* Иконка
* @type { IconName }
*/
icon?: IconName;
/**
* Текст опции
* @type { string }
*/
label?: string;
/**
* Элемент в состоянии не активный
* @default false
*/
disabled?: boolean;
/**
* Разделение группы
* @type { boolean }
*/
separator?: boolean;
/**
* Событие нажатия кнопки
* @type { () => void }
*/
command?: () => void;
};
export declare type FloatingButtonListProps = {
/**
* Иконка
* @type { IconName }
*/
icon: IconName;
/**
* Текст опции
* @type { string }
*/
label?: string;
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @default false
*/
loading?: boolean;
/**
* Элемент в состоянии не активный
* @default false
*/
disabled?: boolean;
/**
* Событие нажатия кнопки
* @type { () => void }
*/
onClick?: () => void;
};
export declare type FloatingButtonProps = {
/**
* Размер кнопки.
* @type {'md' | 'lg' | 'xl'}
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg' | 'xl'>;
/**
* Тип кнопки
* @type {'brand' | 'neutral'}
* @default 'brand'
*/
typeColor?: LiteralUnion<'brand' | 'neutral'>;
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @default false
*/
loading?: boolean;
/**
* Применить закругление у кнопки.
* @default false
*/
rounded?: boolean;
/**
* Вариант списка
* @type { 'actionMenu' | 'button' }
* @default 'button'
*/
listVariant?: 'actionMenu' | 'button';
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Список опций
* @type { FloatingButtonListProps[] | FloatingButtonActionMenuProps[] }
*/
options: FloatingButtonListProps[] | FloatingButtonActionMenuProps[];
};
export declare const FullScreen: (props: FullScreenProps) => JSX_2.Element;
export declare type FullScreenOptionsProps = {
/**
* Id элемента
* @type { string }
*/
id: string;
/**
* Ссылка на изображение
* @type { string }
*/
src: string;
/**
* label изображения
* @type { string }
*/
label?: string;
/**
* FullScreen Template
* @type { ReactNode }
*/
fullScreenTemplate?: ReactNode;
};
export declare type FullScreenProps = {
/**
* Состояние компонента FullScreen
* @type { boolean }
*/
visible?: boolean;
/**
* Номер текущего элемента в списке
* @type { number }
*/
activeIndex?: number;
/**
* Набор элементов
* @type { FullScreenOptionsProps[] }
*/
options: FullScreenOptionsProps[];
/**
* Callback обновления index изображения
* @type { (index: number) => void }
*/
onUpdateActiveIndex?: () => void;
/**
* Callback клика по кнопке назад
* @type { () => void }
*/
onClickPrevButton?: () => void;
/**
* Callback клика по кнопке вперёд
* @type { () => void }
*/
onClickNextButton?: () => void;
/**
* Callback по кнопке закрыть fullscreen
* @type { () => void }
*/
onClickCloseButton?: () => void;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Loop цикл (Beta)
* @type { boolean }
* @default true
*/
loop?: boolean;
};
export declare const Grid: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
type?: "fixed" | "fluid";
sidebar?: boolean;
layoutType?: "compact" | "standard" | "sparse";
children?: React.ReactElement | React.ReactElement[];
} & RefAttributes<unknown>>;
export declare type GridProps = HTMLAttributes<HTMLDivElement> & {
/**
* Поведение сетки. Устанавливается только для параметра "sidebar = false"
* @type { 'fixed' | 'fluid' }
* @default 'fluid'
*/
type?: 'fixed' | 'fluid';
/**
* Использовать sidebar
* @type { 'boolean' }
* @default false
*/
sidebar?: boolean;
/**
* Тип компоновки
* @type { 'compact' | 'standard' | 'sparse' }
*/
layoutType?: 'compact' | 'standard' | 'sparse';
/**
* Children сетки. При использовании опции "sidebar = true", в компонент Grid необходимо передать 2 Children (children[0] - Sidebar, children[1] - MainContent(Компоненты "Row") ). min-width siidebar = 48px, max-width = 248px
*/
children?: React.ReactElement | React.ReactElement[];
};
export declare const GroupButton: (props: GroupButtonProps) => JSX_2.Element | undefined;
declare type GroupButtonComponentProps = {
/**
* Тип компонента - группа кнопок
*/
type: 'group';
/**
* Массив кнопок группы, без свойств размера, варианта и цветовой схемы
*/
buttons: Omit<ButtonProps, 'size' | 'variant' | 'typeColor'>[];
};
export declare type GroupButtonProps = BaseGroupButtonProps & (SplitButtonComponentProps | GroupButtonComponentProps);
export declare const Heading: (props: HeadingProps) => JSX_2.Element;
export declare type HeadingProps = {
variant: Variant;
children: ReactNode;
className?: string;
};
export declare const Icon: {
readonly Receipt: ({ size }: IconProps) => JSX_2.Element;
readonly Line: ({ size }: IconProps) => JSX_2.Element;
readonly Bar: ({ size }: IconProps) => JSX_2.Element;
readonly Candle: ({ size }: IconProps) => JSX_2.Element;
readonly Indicator: ({ size }: IconProps) => JSX_2.Element;
readonly Setting: ({ size }: IconProps) => JSX_2.Element;
readonly Camera: ({ size }: IconProps) => JSX_2.Element;
readonly Fullscreen: ({ size }: IconProps) => JSX_2.Element;
readonly Unfullscreen: ({ size }: IconProps) => JSX_2.Element;
readonly Pin: ({ size }: IconProps) => JSX_2.Element;
readonly PinFill: ({ size }: IconProps) => JSX_2.Element;
readonly Filter: ({ size }: IconProps) => JSX_2.Element;
readonly FilterClear: ({ size }: IconProps) => JSX_2.Element;
readonly FilterAlert: ({ size }: IconProps) => JSX_2.Element;
readonly Telegram: ({ size }: IconProps) => JSX_2.Element;
readonly Vkontakte: ({ size }: IconProps) => JSX_2.Element;
readonly Youtube: ({ size }: IconProps) => JSX_2.Element;
readonly Dzen: ({ size }: IconProps) => JSX_2.Element;
readonly Habr: ({ size }: IconProps) => JSX_2.Element;
readonly Rutube: ({ size }: IconProps) => JSX_2.Element;
readonly Max: ({ size }: IconProps) => JSX_2.Element;
readonly InfoCircle: ({ size }: IconProps) => JSX_2.Element;
readonly WarningCircle: ({ size }: IconProps) => JSX_2.Element;
readonly HelperCircle: ({ size }: IconProps) => JSX_2.Element;
readonly Indete: ({ size }: IconProps) => JSX_2.Element;
readonly Check: ({ size }: IconProps) => JSX_2.Element;
readonly CloseCircle: ({ size }: IconProps) => JSX_2.Element;
readonly CloseSmall: ({ size }: IconProps) => JSX_2.Element;
readonly Close: ({ size }: IconProps) => JSX_2.Element;
readonly CheckCircle: ({ size }: IconProps) => JSX_2.Element;
readonly Eye: ({ size }: IconProps) => JSX_2.Element;
readonly CloseEye: ({ size }: IconProps) => JSX_2.Element;
readonly Circle: ({ size }: IconProps) => JSX_2.Element;
readonly Dot: ({ size }: IconProps) => JSX_2.Element;
readonly Download: ({ size }: IconProps) => JSX_2.Element;
readonly Upload: ({ size }: IconProps) => JSX_2.Element;
readonly MoreHorizontal: ({ size }: IconProps) => JSX_2.Element;
readonly MoreVertical: ({ size }: IconProps) => JSX_2.Element;
readonly Day: ({ size }: IconProps) => JSX_2.Element;
readonly Night: ({ size }: IconProps) => JSX_2.Element;
readonly Minus: ({ size }: IconProps) => JSX_2.Element;
readonly Plus: ({ size }: IconProps) => JSX_2.Element;
readonly Search: ({ size }: IconProps) => JSX_2.Element;
readonly Trash: ({ size }: IconProps) => JSX_2.Element;
readonly User: ({ size }: IconProps) => JSX_2.Element;
readonly Copy: ({ size }: IconProps) => JSX_2.Element;
readonly Menu: ({ size }: IconProps) => JSX_2.Element;
readonly Grid: ({ size }: IconProps) => JSX_2.Element;
readonly BasketEmpty: ({ size }: IconProps) => JSX_2.Element;
readonly BasketFull: ({ size }: IconProps) => JSX_2.Element;
readonly NotificationEmpty: ({ size }: IconProps) => JSX_2.Element;
readonly NotificationAlert: ({ size }: IconProps) => JSX_2.Element;
readonly Image: ({ size }: IconProps) => JSX_2.Element;
readonly Edit: ({ size }: IconProps) => JSX_2.Element;
readonly Play: () => JSX_2.Element;
readonly File: ({ size }: IconProps) => JSX_2.Element;
readonly GripVert: ({ size }: IconProps) => JSX_2.Element;
readonly Time: ({ size }: IconProps) => JSX_2.Element;
readonly Link: ({ size }: IconProps) => JSX_2.Element;
readonly Star: ({ size }: IconProps) => JSX_2.Element;
readonly StarFill: ({ size }: IconProps) => JSX_2.Element;
readonly DocumentCheck: ({ size }: IconProps) => JSX_2.Element;
readonly Lock: ({ size }: IconProps) => JSX_2.Element;
readonly Unlock: ({ size }: IconProps) => JSX_2.Element;
readonly Gear: ({ size }: IconProps) => JSX_2.Element;
readonly Mail: ({ size }: IconProps) => JSX_2.Element;
readonly Tools: ({ size }: IconProps) => JSX_2.Element;
readonly Document: ({ size }: IconProps) => JSX_2.Element;
readonly GraficArrow: ({ size }: IconProps) => JSX_2.Element;
readonly Dashboard: ({ size }: IconProps) => JSX_2.Element;
readonly Refresh: ({ size }: IconProps) => JSX_2.Element;
readonly PieChart: ({ size }: IconProps) => JSX_2.Element;
readonly Key: ({ size }: IconProps) => JSX_2.Element;
readonly Folder: ({ size }: IconProps) => JSX_2.Element;
readonly ChevronRight: ({ size }: IconProps) => JSX_2.Element;
readonly ChevronDown: ({ size }: IconProps) => JSX_2.Element;
readonly ChevronUp: ({ size }: IconProps) => JSX_2.Element;
readonly ChevronLeft: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowUpRight: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowRight: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowLeft: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowUp: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowDown: ({ size }: IconProps) => JSX_2.Element;
readonly ArrowsOff: ({ size }: IconProps) => JSX_2.Element;
readonly Expand: ({ size }: IconProps) => JSX_2.Element;
readonly Collapse: ({ size }: IconProps) => JSX_2.Element;
readonly Placeholder: ({ size }: IconProps) => JSX_2.Element;
readonly Calendar: ({ size }: IconProps) => JSX_2.Element;
readonly Load: ({ size }: IconProps) => JSX_2.Element;
};
declare type IconName = keyof typeof Icon;
export declare type IconProps = {
/**
* Размер иконки
* @type '16' | '24'
* @default '16'
*/
size: 16 | 24 | 32;
};
declare type Id = string | number;
declare interface InitialUploadedFile {
/**
* Статус загрузки файла
* @type {'default' | 'loading' | 'error'}
* @default 'default'
*/
status?: 'default' | 'loading' | 'error';
/**
* Имя файла. Например File.pdf или File
* @type { string }
*/
name: string;
/**
* Расширение файла. Например image/png или png
* @type { string }
*/
type: string;
/**
* Размер файла в байтах
* @type { number }
*/
size: number;
/**
* Ссылка на файл
* Логику загрузки файла необходимо добавить через `moreActionElement`
* @type { string }
*/
url?: string;
/**
* Caption text для файла. Используется для отображения текста ошибки. Данный текст располагается вместо расширения и размера файла.
* @type { string }
*/
caption?: string;
}
declare type InputMaskRef = {
inputContainerRef: HTMLElement | null;
inputRef: HTMLInputElement | null;
focus: () => never;
blur: () => never;
};
export declare const InputNumber: ({ size, label, caption, state, disabled, required, value, placeholder, onClick, className, labelPos, showButtons, step, maxFractionDigits, separator, onChange, radius, prevClick, nextClick, autoComplete, ...props }: InputNumberProps) => JSX_2.Element | null;
/**
* Входные параметры для компонента InputNumber
*/
export declare type InputNumberProps = E_9 & {
/**
* Размер InputNumber
* Для label внутри input используется только 'lg' и 'xl
* @type { 'sm' | 'md' | 'lg' | 'xl' }
* @default 'lg'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Label для InputNumber
* @type { string }
* @default ''
*/
label?: string;
/**
* Подсказка для InputNumber
* @type { string }
* @default ''
*/
caption?: string;
/**
* Состояние компонента
* @type { 'default' | 'error' | 'warning' | 'success' }
* @default 'default'
*/
state?: 'default' | 'error' | 'warning' | 'success';
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Расположение label
* @type 'inside' | 'top'
* @default 'inside'
*/
labelPos?: LiteralUnion<'inside' | 'top'>;
/**
* Минимальное значение для InputNumber
* @type { number }
*/
min?: number;
/**
* Максимальное значение для InputNumber
* @type { number }
*/
max?: number;
/**
* Шаг значения при нажатии на кнопки InputNumber
* @type { number }
* @default 1
*/
step?: number;
/**
* Текст перед значением в InputNumber
* @type { string }
* @default ''
*/
prefix?: string;
/**
* Текст после значения в InputNumber
* @type { string }
* @default ''
*/
suffix?: string;
/**
* Обязательное поле (отображение знака *)
* @type boolean
* @default false
*/
required?: boolean;
/**
* Показывать кнопки для управления значением в InputNumber
* @type { boolean }
* @default false
*/
showButtons?: boolean;
/**
* Позволяет контролировать поведение свойства autocomplete
* @default "off"
*/
autoComplete?: HTMLInputElement['autocomplete'];
/**
* Количество символов после запятой
* @type { number }
* @default 0
*/
maxFractionDigits?: number;
/**
* Разделитель между 1000
* @type { 'comma' | 'space' }
* @default 'comma'
*/
separator?: LiteralUnion<'comma' | 'space'>;
/**
* Value для InputNumber
*/
value: number | null;
/**
* Обработчик изменения значения InputNumber
*/
onChange?: (item: number, event?: SyntheticEvent) => void;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
/**
* Функция для иконки minus
* @type { Function }
*/
prevClick?: () => void;
/**
* Функция для иконки plus
* @type { Function }
*/
nextClick?: () => void;
};
export declare const InputPassword: ({ size, label, caption, error, warning, success, disabled, strengthCheck, textCondData, value, onClick, className, labelPos, radius, description, typePassword, ...props }: InputPasswordProps) => JSX_2.Element | null;
export declare type InputPasswordProps = E_8 & {
/**
* Размер InputPassword
* Для label внутри input используется только 'lg' и 'xl
* @type {'sm' | 'md' | 'lg' | 'xl'}
* @default 'md'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Label для InputPassword
* @type { string }
* @default ''
*/
label?: string;
/**
* Подсказка для InputPassword
* @type {string}
* @default ''
*/
caption?: string;
/**
* Статус валидации "Ошибка"
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Статус валидации "Обратить внимание"
* @type { boolean }
* @default false
*/
warning?: boolean;
/**
* Статус валидации "Успешно"
* @type { boolean }
* @default false
*/
success?: boolean;
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Видимость индикатора надежности пароля
* @type { boolean }
* @default false
*/
strengthCheck?: boolean;
/**
* Требования к паролю
* @type { TextCondData[] }
* @default []
*/
textCondData?: TextCondData[];
/**
* Расположение label
* @type 'inside' | 'top'
* @default 'inside'
*/
labelPos?: LiteralUnion<'inside' | 'top'>;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
/**
* Description для пароля
* @type { string }
*/
description?: string;
/**
* Тип пароля. Beta
* @type { 'new-password' | 'current-password' }
* @default 'new-password'
*/
typePassword?: 'new-password' | 'current-password';
};
export declare const InputSearch: ({ value, size, iconPosition, onChange, ...props }: InputSearchProps) => JSX_2.Element;
/**
* Пропсы для поля ввода
*/
export declare type InputSearchProps = Omit<AutoCompleteProps, 'iconLeft' | 'caption' | 'required' | 'readonly' | 'iconPos' | 'clickable' | 'labelPos' | 'completeMethod'> & {
/**
* Выбор расположения иконки для открытия InputSearch
* @type { 'left' | 'right' }
* @default 'left'
*/
iconPosition?: 'left' | 'right';
/**
* className для контейнера компонента
* @type { string }
*/
className?: string;
/**
* Метод поиска вариантов для автозаполнения по запросу
* @param { query: string } строка из инпута
*/
completeMethod?: ({ query: string }: {
query: any;
}) => void;
/**
* Callback клика на кнопку очистки поля
*/
onRemove?: () => void;
};
export declare const InputText: ForwardRefExoticComponent<{
id?: string | undefined | undefined;
onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
onClick?: MouseEventHandler<HTMLInputElement> | undefined;
name?: string | undefined | undefined;
placeholder?: string | undefined | undefined;
} & HTMLAttributes<HTMLInputElement> & SharedTooltipProps & {
value: string | number | readonly string[] | undefined;
size?: LiteralUnion<"sm" | "md" | "lg" | "xl">;
caption?: string;
error?: boolean;
warning?: boolean;
success?: boolean;
label?: string;
disabled?: boolean;
readonly?: boolean;
required?: boolean;
iconLeft?: IconName;
iconRightFirst?: IconName;
iconRightSecond?: IconName;
iconRightFirstClick?: () => void;
iconRightSecondClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
clickable?: boolean;
labelPos?: LiteralUnion<"inside" | "top">;
tooltipLocation?: LiteralUnion<"top" | "bottom">;
type?: LiteralUnion<"brand" | "neutral">;
radius?: LiteralUnion<"xxs" | "xs" | "sm" | "md" | "lg" | "2lg">;
inputClassNames?: string;
} & RefAttributes<InputTextRef>>;
export declare const InputTextArea: ({ size, label, caption, useCounter, value, counter, error, success, disabled, required, onClick, clickable, className, labelPos, textAreaClassName, radius, ...props }: InputTextAreaProps) => JSX_2.Element;
export declare type InputTextAreaProps = E_3 & {
/**
* Value для поля
* @type { string | number | readonly string[] | undefined }
*/
value: string | number | readonly string[] | undefined;
/**
* Размер inputTextArea
* @type {'md' | 'lg'}
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* Подсказка
* @type {string}
* @default ''
*/
caption?: string;
/**
* Поле со счётчиком
* @type {boolean}
* @default false
*/
useCounter?: boolean;
/**
* Счётчик
* @type {number}
* @default 0
*/
counter?: number;
/**
* Ошибка валидации
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Успешная валидация
* @type { boolean }
* @default false
*/
success?: boolean;
/**
* Описание TextArea
* @type { string }
* @default ''
*/
label?: string;
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Обязательное поле (отображение знака *)
* @type { boolean }
* @default false
*/
required?: boolean;
/**
* Иконка
* @type { string }
* @default ''
*/
/**
* Добавить `cursor: pointer` и `pointer-events: none`
*/
clickable?: boolean;
/**
* Расположение label
* @type 'inside' | 'top'
* @default 'inside'
*/
labelPos?: LiteralUnion<'inside' | 'top'>;
/**
* Радиус скругления. По умолчанию radius для 'md' = 12px, 'lg' = 14px
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
/**
* Кастомные классы для внутреннеого компонента textArea
* Можно задать пользовательские размеры компонента (к примеру min-height, max-height)
*/
textAreaClassName?: string;
};
export declare const InputTextMask: ForwardRefExoticComponent<{
id?: string | undefined | undefined;
onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
onClick?: MouseEventHandler<HTMLInputElement> | undefined;
name?: string | undefined | undefined;
placeholder?: string | undefined | undefined;
} & HTMLAttributes<HTMLInputElement> & SharedTooltipProps & {
value: string | number | readonly string[] | undefined;
size?: LiteralUnion<"sm" | "md" | "lg" | "xl">;
caption?: string;
error?: boolean;
warning?: boolean;
success?: boolean;
label?: string;
disabled?: boolean;
readonly?: boolean;
required?: boolean;
iconLeft?: IconName;
iconRightFirst?: IconName;
iconRightSecond?: IconName;
iconRightFirstClick?: () => void;
iconRightSecondClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
clickable?: boolean;
labelPos?: LiteralUnion<"inside" | "top">;
tooltipLocation?: LiteralUnion<"top" | "bottom">;
type?: LiteralUnion<"brand" | "neutral">;
radius?: LiteralUnion<"xxs" | "xs" | "sm" | "md" | "lg" | "2lg">;
inputClassNames?: string;
} & InputMaskProps & {
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
onChange?: (event: any) => void;
slotChar?: string;
} & RefAttributes<InputMaskRef>>;
export declare type InputTextMaskProps = InputTextProps & InputMaskProps & {
/**
* Событие клика на элемент.
* Может быть полезно когда используется в комбинации с другими элементами. Например, компонент Calendar
* Нужно событие чтобы показать календарь на выпадающей панеле.
* @type { boolean }
**/
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
/**
* Событие изменения значения
* @param event
*/
onChange?: (event: any) => void;
/**
* Строка, которая отображается при фокусировке на поле и соответствует строке в mask
* Например, для mask = 99.99.9999 и slotChar = ДД.ММ.ГГГГ при фокусировке текст в поле будет изначально заполнен ДД.ММ.ГГГГ
* По мере заполнения поля, строка slotChar будет заменяться на value
* @type { string }
*/
slotChar?: string;
};
export declare type InputTextProps = E_2 & SharedTooltipProps & {
/**
* Value для поля
* @type { string | number | readonly string[] | undefined }
*/
value: string | number | readonly string[] | undefined;
/**
* Размер текстового поля.
* Для label внутри input используется только 'lg' и 'xl
* @type { 'sm' | 'md' | 'lg' | 'xl' }
* @default 'lg'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Подсказка к полю
* @type { string }
* @default ''
*/
caption?: string;
/**
* Ошибка валидации
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Статус валидации "Обратить внимание"
* @type { boolean }
* @default false
*/
warning?: boolean;
/**
* Успешная валидация
* @type { boolean }
* @default false
*/
success?: boolean;
/**
* Ошибка валидации
* @type { boolean }
* @default false
*/
label?: string;
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Поле только для чтения
* @type { boolean }
* @default false
*/
readonly?: boolean;
/**
* Обязательное поле (отображение знака *)
* @type { boolean }
* @default false
*/
required?: boolean;
/**
* Иконка для Input left
* @type { IconName }
* @default ''
*/
iconLeft?: IconName;
/**
* Иконка для Input right первая
* @type { IconName }
* @default ''
*/
iconRightFirst?: IconName;
/**
* Иконка для Input right вторая
* @type { IconName }
* @default ''
*/
iconRightSecond?: IconName;
/**
* Функция для превой иконки Input right
* @type { Function }
*/
iconRightFirstClick?: () => void;
/**
* Функция для второй иконки Input right
* @type { Function }
*/
iconRightSecondClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
/**
* Добавить `cursor: pointer` и `pointer-events: none`
*/
clickable?: boolean;
/**
* Расположение label
* @type 'inside' | 'top'
* @default 'inside'
*/
labelPos?: LiteralUnion<'inside' | 'top'>;
/**
* Расположение Tooltip для InputText
* @type { 'top' | 'bottom' }
* @default 'bottom'
*/
tooltipLocation?: LiteralUnion<'top' | 'bottom'>;
/**
* Тип InputText
* @type {'brand' | 'neutral'}
* @default 'neutral'
*/
type?: LiteralUnion<'brand' | 'neutral'>;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg'>;
/**
* Пользовательские классы для элемента input
*/
inputClassNames?: string;
};
export declare type InputTextRef = {
inputContainerRef: HTMLElement | null;
inputRef: HTMLInputElement | null;
};
declare type ItemProps = {
type: 'item';
/**
* Свойства для checkboxs, доступен только колбэк на изменение.
*/
checkbox?: Pick<CheckboxProps, 'onChange' | 'checked' | 'isIndeterminate'>;
/**
* Иконка слева элемента.
*/
iconBefore?: IconName;
/**
* Текст заголовка
*/
textLabel?: string;
/**
* Текст дополнительного описания
*/
textCaption?: string;
/**
* Значение для компонента Badge
*/
badge?: Pick<BadgeProps, 'value'>;
/**
* Label для Tag
*/
tag?: Pick<TagProps, 'label'>;
/**
* Икнока в правой части List item
*/
iconAfter?: IconName;
/**
* Состояние disabled
*/
disabled?: boolean;
/**
* onClick
*/
onClick?: () => void;
/**
*
*/
rightSlot?: () => ReactNode;
/**
* Элемент слева от текста, рядом с иконкой
*/
leftSlot?: () => ReactNode;
/**
* Переопределение стилей для комонента типа ListItem
*/
attrOverrides?: {
icon?: HTMLAttributes<HTMLDivElement>;
wrapper?: HTMLAttributes<HTMLDivElement>;
leftSlot?: HTMLAttributes<HTMLDivElement>;
rightSlot?: HTMLAttributes<HTMLDivElement>;
iconAfter?: HTMLAttributes<HTMLDivElement>;
textLabel?: HTMLAttributes<HTMLDivElement>;
};
/**
* Дополнительный текст Tooltip на весь котейнер. Приоритет над другими тултипами
* @type { string }
*/
mainTooltip?: string;
};
declare type LabelProps = {
type: 'label';
text: string;
};
declare type LegacyToastMessage = {
severity?: 'success' | 'info' | 'warning' | 'error';
title?: string;
detail?: string;
life?: number;
sticky?: boolean;
buttonProps?: {
label?: string;
onClick?: () => void;
};
};
export declare const Link: ({ label, size, variant, onlyIcon, icon, iconPos, disabled, href, target, style, }: LinkProps) => JSX_2.Element;
export declare type LinkProps = E_4 & {
/**
* Текст Link
* @type { string | undefined }
*/
label?: string | undefined;
/**
* Размер Link
* @type { 'xxs' | 'xs' }
* @default 'xxs'
*/
size?: 'xxs' | 'xs';
/**
* Вариант Link
* @type { 'brand' | 'neutral' }
* @default 'brand'
*/
variant?: 'brand' | 'neutral';
/**
* Использоватть только иконку без текста
* @type { boolean }
* @default false
*/
onlyIcon?: boolean;
/**
* Имя иконки из икиночного сета
* @type { JSX.Element }
* @default ''
*/
icon?: IconName | undefined;
/**
* Позиция иконки в Link
* @type { 'left' | 'right' }
* @default 'left'
*/
iconPos?: 'left' | 'right' | undefined;
/**
* Неактивное состояние Link
* @type { boolean }
* @default false
*/
disabled?: boolean | undefined;
/**
* Ссылка для перехода при нажатии Link
* @type { string }
* @default undefined
*/
href: string;
/**
* target атрибут для ссылки Link
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
};
export declare const LinkText: ({ label, size, iconBefore, iconAfter, disabled, href, target, style, clickEffect, visitedEffect, ...props }: LinkTextProps) => JSX_2.Element;
export declare type LinkTextProps = E_5 & {
/**
* Текстовая ссылка LinkText
* @type { string | undefined }
*/
label: string;
/**
* Размер Link
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: LiteralUnion<'sm' | 'md'>;
/**
* Имя иконки (перед лейблом) из икиночного сета
* @type { JSX.Element }
* @default ''
*/
iconBefore?: IconName | undefined;
/**
* Имя иконки (после лейбла) из икиночного сета
* @type { JSX.Element }
* @default ''
*/
iconAfter?: IconName | undefined;
/**
* Неактивное состояние LinkText
* @type { boolean }
* @default false
*/
disabled?: boolean | undefined;
/**
* Ссылка для перехода при нажатии Link
* @type { string }
* @default undefined
*/
href: string;
/**
* target атрибут для ссылки Link
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Наличие hover и active эффекта
* @type { boolean }
* @default true
*/
clickEffect?: boolean;
/**
* Наличие псевдокласса :visited у ссылки
* @type { boolean }
* @default true
*/
visitedEffect?: boolean;
onClick?: (e: React_2.MouseEvent<HTMLLinkElement> | React_2.KeyboardEvent<HTMLLinkElement>) => void;
};
export declare const ListItem: (props: ListItemProps) => JSX_2.Element | null;
/**
* Discriminated Union. В зависимости от свойства type для компонента будут допустимы разные пропсы.
*/
export declare type ListItemProps = BaseProps & (ActionProps | LabelProps | DescriptionProps | ItemProps);
declare type LiteralUnion<T extends string> = T | (string & {});
export declare const Loader: ({ size, description }: LoaderProps) => JSX_2.Element;
export declare interface LoaderProps {
/**
* Размер
* @type 'sm' | 'md' | 'xs' | 'xxs'
* @default 'sm'
*/
size: LoaderSizes;
/**
* Текст описания
* @type { string }
*/
description?: string;
}
declare type LoaderSizes = 'sm' | 'md' | 'xs' | 'xxs';
declare type Locale = 'ru' | 'en';
declare type Margin = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11';
declare type Margin_XS = '1' | '2' | '3' | '4' | '5' | '6' | '7';
declare type ModalButtonProps = Omit<ButtonProps, 'size' | 'rounded' | 'badge' | 'title'>;
export declare const ModalDialog: ForwardRefExoticComponent<ModalDialogProps & RefAttributes<ModalDialogRef>>;
export declare type ModalDialogProps = {
/**
* Текст заголовка
* @type { string | ReactElement}
*/
title: string | ReactElement;
/**
* Текст подзаголовка
* @type { string | ReactElement }
*/
subTitle: string | ReactElement;
/**
* Класс корневого контейнера модального окна
* @type { string }
* @default undefined
*/
className?: string;
/**
/**
* Класс подложки за модальным окном
* @type { string }
* @default undefined
*/
maskClassName?: string;
/**
/**
* Состояние видимости модального окна
* @type { boolean }
*/
visible: boolean;
/**
* Положение модального окна
* @type { ModalPosition }
*/
position?: ModalPosition;
/**
* Событие при нажатии на иконку закрытия окна без действий
* @type { Event }
*/
onHide: Event_3;
/**
* Событие при нажатии на кнопку согласия
* @type { Event }
*/
onAccept?: () => void;
/**
* Событие при нажатии на кнопку отмены
* @type { Event }
*/
onReject?: () => void;
/**
* Событие при нажатии на кнопку призрак
* @type { Event }
*/
onGhost?: () => void;
/**
* Текст кнопки согласия
* @type { string }
*/
acceptLabel: string;
/**
* Текст кнопки отмены
* @type { string }
*/
rejectLabel: string;
/**
* Текст кнопки призрак
* @type { string | undefined }
*/
ghostLabel?: string;
/**
* Props для кнопки призрака (визуал, иконки, состояния)
* Для компонента в десктоп версии используется компонент LinkText
* @type { ModalButtonProps | ModalLinkTextProps }
*/
ghostButtonProps?: ModalButtonProps | ModalLinkTextProps;
/**
* Props для кнопки отмены (визуал, иконки, состояния)
* @type { ModalButtonProps }
*/
rejectButtonProps?: ModalButtonProps;
/**
* Props для кнопки принять (визуал, иконки, состояния)
* @type { ModalButtonProps }
*/
acceptButtonProps?: ModalButtonProps;
/**
* Размер (ширина) модального окна
* @type { 'sm' | 'md' | 'lg' | '80vw' }
* @default 'md'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | '80vw'>;
/**
* Инстанс элемента DOM, куда будет монтирован компонент ModalDialog.
* Допустимые значения — любой элемент DOM и "self".
* Значение "self" используется для рендеринга компонента там, где он расположен.
*/
appendTo?: AppendToType;
/**
* Дочерние компоненты или текстовая строка
* @type { string | ReactNode }
*/
children?: ReactNode | string;
/**
* Закрывать ModalDialog при нажатии вне компонента
* @type { boolean }
* @default true
*/
dismissableMask?: boolean;
/**
* ModalDialod c иконкой статуса (Alert)
* @type { 'info' | 'success' | 'warning' | 'error' }
*/
typeIconAlert?: 'info' | 'success' | 'warning' | 'error';
};
declare type ModalDialogRef = {
/**
* Скрывать иконку закрытия
*/
removeCloseButton?: () => void;
/**
* Скрывать footer
*/
hideFooter?: () => void;
/**
* Показывать иконку закрытия
* @default true
*/
displayCloseButton?: () => void;
/**
* Получить контейнер компонента ModalDialog
*/
getElement?: () => void;
};
declare type ModalLinkTextProps = Omit<LinkTextProps, 'label' | 'size' | 'contrast' | 'href' | 'target'>;
declare type ModalPosition = ConfirmDialogProps['position'];
export declare const MultiSelect: ({ label, caption, placeholder, size, disabled, value, options, group, state, icon, labelPos, required, menuPlacement, filter, footerText, footerTemplate: propsFooterTemplate, iconClose, visiblePanelOverlayWithChips, scrollHeight, filterInputPlaceholder, visibleHeaderCheckboxAll, virtualScroller, onChange, onFocus, onBlur, ...props }: MultiSelectProps) => JSX_2.Element;
/**
* Группа выпадающего списка
*/
declare interface MultiSelectGroup {
/**
* Название группы
* @type string
*/
label?: string;
/**
* Элементы группы
* @type AutoCompleteItem[]
*/
items?: MultiSelectItem[];
}
/**
* Элемент выпадающего списка
*/
export declare interface MultiSelectItem {
/**
* Отображаемое название элемента
* @type string
*/
label: string;
/**
* Ключ для элемента
* @type string
*/
value: string;
/**
* Подсказка для элемента
* @type string
*/
caption?: string;
/**
* Элемент заблокирован для выбора
* @type boolean
* @default false
*/
disabled?: boolean;
/**
* Идентификатор элемента
* @type string
*/
id?: string;
}
/**
* Элементы выпадающего списка
*/
export declare type MultiSelectOptions = MultiSelectItem[] | MultiSelectGroup[];
/**
* Свойства для MultiSelect
*/
export declare interface MultiSelectProps {
/**
* Значение MultiSelect useState
* @type { MultiSelectItem[] }
*/
value: MultiSelectItem[] | [];
/**
* Список предложений
* @type { MultiSelectOptions }
*/
options?: MultiSelectOptions;
/**
* Список предложений в виде групп
* @type { boolean }
* @default false
*/
group?: boolean;
/**
* Позиция выпадающего списка
* @type 'bottom' | 'auto'
* @default 'auto'
*/
menuPlacement?: 'bottom' | 'auto';
/**
* Заголовок для поля ввода
* @type { string | undefined }
* @default ''
*/
label?: string;
/**
* Размер текстового поля
* @type { 'sm' | md' | 'lg' | 'xl' }
* @default 'lg'
*/
size?: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Подсказка к полю
* @type { string }
* @default ''
*/
caption?: string;
/**
* Заполнение к полю
* @type { string }
* @default ''
*/
placeholder?: string;
/**
* Неактивное поле
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Обязательное поле (отображение знака *)
* @type { boolean }
* @default false
*/
required?: boolean;
/**
* Иконка
* @type { string }
* @default ''
*/
icon?: string;
/**
* Состояние компонента
* @type { 'default' | 'error' | 'warning' | 'success' }
* @default 'default'
*/
state?: 'default' | 'error' | 'warning' | 'success';
/**
* Расположение label
* @type { 'inside' | 'top' }
* @default 'inside'
*/
labelPos?: 'inside' | 'top';
/**
* Показывать Filter для поиска элементов
* @type { boolean }
* @default false
*/
filter?: boolean;
/**
* Текст footer
* @type { string }
* @default: ''
*/
footerText?: string;
/**
* Template footer
* @type { React.ReactElement | string }
*/
footerTemplate?: React.ReactElement | string;
/**
* Иконка удаления всех элементов из поля
* @type { boolean }
*/
iconClose?: boolean;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Высота списка с опциями. Пример scrollHeight='400px'
* @type { string }
*/
scrollHeight?: string;
/**
* Показывать PanelOverlay при клике на счётчик в компоненте (Beta)
* @type { boolean }
* @default false
*/
visiblePanelOverlayWithChips?: boolean;
/**
* Placeholder для поля фильтра в списке
* @type { string }
* @default 'Поиск'
*/
filterInputPlaceholder?: string;
/**
* Checkbox для выбора всех элементов
* @type { boolean }
* @default true
*/
visibleHeaderCheckboxAll?: boolean;
/**
* Функция для обновления состояния useState
* @param value: MultiSelectItem выбраннный элемент из списка
*/
onChange: (value: MultiSelectItem | MultiSelectItem[]) => void;
/**
* Событие фокуса инпута
*/
onFocus?: () => void;
/**
* Событие потери фокуса инпута
*/
onBlur?: () => void;
/**
* Виртуализация списка
* @type { boolean }
* @default true
*/
virtualScroller?: boolean;
}
declare type Offsets = {
/**
* Margin элемента. Максимум 7 колонок
* @type { Margin_XS }
*/
xs?: Margin_XS;
/**
* Margin элемента. Максимум 11 колонок
* @type { Margin }
*/
sm?: Margin;
/**
* Margin элемента. Максимум 11 колонок
* @type { Margin }
*/
md?: Margin;
/**
* Margin элемента. Максимум 11 колонок
* @type { Margin }
*/
lg?: Margin;
/**
* Margin элемента. Максимум 11 колонок
* @type { Margin }
*/
xl?: Margin;
};
declare type OptionsWithAction = ToasterProps & {
actions?: Action;
};
/**
* Компонент Pagination для постраничной навигации
*/
export declare const Pagination: React_2.ForwardRefExoticComponent<PaginationProps & React_2.RefAttributes<PaginationRefHandle>>;
export declare interface PaginationProps {
/**
* Общее количество записей
*/
totalRecords: number;
/**
* Начальный номер страницы
*/
defaultPage?: number;
/**
* Количество записей на странице
*/
rows: number;
/**
* Текущая первая запись (для пагинации)
*/
first: number;
/**
* Обработчик изменения страницы
*/
onPageChange: (event: {
first: number;
rows: number;
page: number;
pageCount: number;
}) => void;
/**
* Массив вариантов количества записей на странице
*/
rowsPerPageOptions?: {
label: string;
value: number;
}[];
/**
* Дополнительные классы для компонента
*/
className?: string;
/**
* Управление отображением инпута в пагинации
* @type { boolean }
* @default true
*/
visibleInput?: boolean;
/**
* Управление отображением текста диапазона строк в пагинации
* @type { boolean }
* @default true
*/
visibleTextRange?: boolean;
/**
* Управление отображением списка видимых элементов на странице в пагинации
* @type { boolean }
* @default true
*/
visibleDropdown?: boolean;
/**
* Скрывать список страниц и поле ввода страниц, если для выбора доступна 1 страница
* @type { boolean }
*/
hiddenInterfaceForOnePage?: boolean;
/**
* Позиция монтирования компонента rowsPerPage (выпадающего списка для выбора количества страниц)
* Если не задано - по умолчанию компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
}
/**
* Интерфейс для доступа к методам и состоянию компонента Pagination через ref
*/
declare interface PaginationRefHandle {
/**
* Объект с текущим состоянием пагинации
*/
state: {
/** Текущая страница */
currentPage: number;
/** Общее количество записей */
totalRecords: number;
/** Количество записей на странице */
rowsPerPage: number;
/** Индекс первой записи на текущей странице */
firstRowIndex: number;
/** Общее количество страниц */
totalPages: number;
};
/**
* Метод для установки текущей страницы
*/
setPage: (page: number) => void;
/**
* Метод для установки количества записей на странице
*/
setRowsPerPage: (rows: number) => void;
}
export declare const PanelOverlay: ({ children, panelOverlayRef, visibleShadow, alignOnScroll, customPosition, hideOnScroll, ...props }: PanelOverlayProps) => JSX_2.Element;
export declare type PanelOverlayMethods = {
/**
* Функция для управления состоянием PanelOverlay
* @type { (e) => ref.current.toggle(e) }
*/
toggle: (e: Event) => void;
/**
* Функция для открытия PanelOverlay
* @type { (e) => ref.current.show(e) }
*/
show: (e: Event) => void;
/**
* Функция для закрытия PanelOverlay
* @type { () => ref.current.hide() }
*/
hide: (e: Event) => void;
/**
* Пересчет положения выпадающей панели
* @type { () => ref.current.hide() }
*/
align: () => void;
};
export declare type PanelOverlayProps = {
/**
* useRef PanelOverlay элемента
* @type { MutableRefObject<PanelOverlayMethods | null> }
*/
panelOverlayRef: MutableRefObject<PanelOverlayMethods | null>;
/**
* Дочерние компоненты PanelOverlay
* @type { ReactNode }
*/
children: ReactNode;
/**
* Показать тень для PanelOverlay
* @type { boolean }
* @default false
*/
visibleShadow?: boolean;
/**
* Пользовательские CSS классы
*/
className?: string;
/**
* Пересчет положения выпадающей панели при скролле
* @type { boolean }
* @default true
*/
alignOnScroll?: boolean;
/**
* Callback открытия PanelOverlay
*/
onShow?: () => void;
/**
* Callback закрытия PanelOverlay
*/
onHide?: () => void;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Кастомная позиционирование компонента
* @type { CustomPositionProps }
*/
customPosition?: CustomPositionProps_2;
/**
* Закрывать PanelOverlay при скролле
* @type { boolean }
* @default false
*/
hideOnScroll?: boolean;
};
export declare const Popover: React_2.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React_2.RefAttributes<PopoverRefMethods>>;
export declare type PopoverProps = {
/**
* Текст заголовка
* @type { string }
*/
title: string;
/**
* Текст подзаголовка
* @type { string }
*/
subTitle?: string;
/**
* Дочерние компоненты PanelOverlay
* @type { string | React.ReactElement }
*/
children?: React.ReactElement | string;
/**
* Показать тень для PanelOverlay
* @type { boolean }
* @default false
*/
visibleShadow?: boolean;
/**
* Расположение Popover
* @type { 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' |
* 'bottom-right' | 'left-top' | 'left' | 'left-bottom' | 'right-top' | 'right' | 'right-bottom' }
*/
location?: LiteralUnion<'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left-top' | 'left' | 'left-bottom' | 'right-top' | 'right' | 'right-bottom'>;
/**
* Event элемента, который открывает Popover. Данный параметр необходимо передать при выборе расположения компонента Popover (location)
* Пример использования:
* const [event, setEvent] = useState(null);
* <Элемент открывающий Popover onClick={(e) => { setEvent(e); ref.current.toggle(e); }}/>
* <Popover event={event} {...args} />
* @type { React.SyntheticEvent }
*/
event: React.SyntheticEvent;
/**
* Текст для кнопки Popover
* @type { string }
* @default ''
*/
labelButton?: ButtonProps['label'];
/**
* Событие onClick для кнопки Button в Popover
* @type { () => void }
*/
onClickButton?: ButtonProps['onClick'];
/**
* Имя кнопки из иконочного сета
* @type { JSX.Element }
* @default ''
*/
iconButton?: ButtonProps['icon'];
/**
* Позиция иконки в кнопке. Применяется когда установлено свойство icon.
* @type { 'left' | 'right' }
* @default left
*/
iconPosButton?: ButtonProps['iconPos'];
/**
* Элемент в состоянии не активный
* @default false
*/
disabledButton?: ButtonProps['disabled'];
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @default false
*/
loadingButton?: ButtonProps['loading'];
/**
* Текст для ссылки в Popover
* @type { string }
* @default ''
*/
labelLink?: string;
/**
* Ссылка для перехода при нажатии Link в Popover
* @type { string }
* @default undefined
*/
href?: string;
/**
* target атрибут для ссылки Link в Popover
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Callback открытия PanelOverlay
*/
onShow?: () => void;
/**
* Callback закрытия PanelOverlay
*/
onHide?: () => void;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Кнопка закрытия Popover
* @type { boolean }
* @default true
*/
buttonClose?: boolean;
/**
* useRef PanelOverlay элемента
* @type { MutableRefObject<null> }
*/
ref: MutableRefObject<null>;
};
export declare type PopoverRefMethods = {
/**
* Функция для управления состоянием PanelOverlay
* @type { (e) => ref.current.toggle(e) }
*/
toggle?: (e: any) => void;
/**
* Функция для открытия PanelOverlay
* @type { (e) => ref.current.show(e) }
*/
show?: (e: any) => void;
/**
* Функция для закрытия PanelOverlay
* @type { () => ref.current.hide() }
*/
hide?: () => void;
/**
* Компонент Popover
*/
getElement?: () => HTMLElement;
};
export declare const Popup: React_2.ForwardRefExoticComponent<PopupProps & React_2.RefAttributes<unknown>>;
export declare type PopupProps = {
/**
* Состояние видимости popup
* @type { boolean }
*/
visible: boolean;
/**
* Положение popup
* @type { 'center' | 'left' | 'top' | 'bottom' | 'right' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' }
*/
position?: LiteralUnion<'center' | 'left' | 'top' | 'bottom' | 'right' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'>;
/**
* Размер (ширина) popup
* @type { string }
*/
size: LiteralUnion<'sm' | 'md' | 'lg'>;
/**
* Инстанс элемента DOM, куда будет монтирован компонент popup.
* Допустимые значения — любой элемент DOM и "self".
* Значение "self" используется для рендеринга компонента там, где он расположен.
*/
appendTo?: AppendToType;
/**
* Дочерние компоненты или текстовая строка
* @type { string | React.ReactElement }
*/
children?: React.ReactElement | string;
/**
* className для компонента Popup
* @type { string }
*/
className?: string;
/**
* Событие при нажатии на иконку закрытия окна без действий
* @type { Event }
*/
onHide?: Event_5;
};
export declare const Portal: (props: PortalProps) => JSX_2.Element | null;
export declare type PortalProps = {
appendTo?: AppendToType;
children?: React.ReactNode;
};
export declare const ProgressBar: ({ size, type, label, loadPercentage, hiddenTextPercentage, ...props }: ProgressBarProps) => JSX_2.Element;
export declare type ProgressBarProps = HTMLAttributes<HTMLDivElement> & {
/**
* Размер ProgresBar
* @type { 'md' | 'lg' }
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* Тип компонента ProgresBar
* @default 'default'
*/
type?: LiteralUnion<'default' | 'error' | 'warning' | 'success' | 'loading' | 'loop-loading'>;
/**
* Label ProgresBar
* @type { string }
*/
label?: string;
/**
* % загрузки
* @type { number }
*/
loadPercentage?: number;
/**
* Скрыть текст с отображением процента загрузки
* @type { boolean }
*/
hiddenTextPercentage?: boolean;
};
declare type Props = {
value: Pick<StateValue, 'theme'> & Partial<StateValue>;
children?: ReactNode | undefined;
};
declare interface Props_2 extends ListBoxProps {
/**
* Размер Action Menu
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size: LiteralUnion<'sm' | 'md'>;
/**
* Поиск в списке
* @type { boolean }
* @default false
*/
filter?: boolean | undefined;
/**
* Конпка сброса фильтра
* @type { boolean }
* @default false
*/
clearFilter?: boolean | undefined;
/**
* Список с группой
* @type { boolean }
* @default false
*/
group?: boolean | undefined;
/**
* Аргумент который принимает значение "True", при использовании компонента AutoSelect
* @type { boolean }
*/
autoComplete?: boolean;
/**
* Показать состояние загрузки
* @type { boolean }
* @default false
*/
loading?: boolean;
}
export declare const RadioButton: (props: RadioButtonProps) => JSX_2.Element;
export declare const RadioButtonGroup: (props: RadioButtonGroupProps) => JSX_2.Element;
export declare type RadioButtonGroupProps = {
label?: string;
caption?: string;
options: RadioButtonProps[];
value: string | number;
animation?: boolean;
onChange?: (value: Partial<RadioButtonChangeEvent>) => void;
/**
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* @default 'column'
*/
direction?: LiteralUnion<'column' | 'row'>;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
tooltipIcon?: 'left' | 'right';
/**
* Состояние Error для CheckBox Group
* @type { boolean }
* @default false
*/
error?: boolean;
/**
* Элементы группы в состоянии не активный
* @type { boolean }
*/
disabled?: boolean;
/**
* Имя группы радиокнопок.
* @type { string }
*/
name?: string | undefined;
};
export declare type RadioButtonProps = {
/** RadioButton */
/**
* @default 'md'
*/
size?: LiteralUnion<'md' | 'lg'>;
/**
* @default false
*/
disabled?: boolean;
label?: string;
caption?: string;
/**
* @default false
*/
showHelpIcon?: boolean;
/**
* @default false
*/
accesabilityHover?: boolean;
value: string | number;
/**
* @default false
*/
checked?: boolean;
/**
* @default true
*/
animation?: boolean;
/**
* Состояние error для компонента
* @type { boolean }
*/
error?: boolean;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
tooltipIcon?: 'left' | 'right';
/** Tooltip */
/**
* @default 'sm
*/
sizeTooltip?: SharedTooltipProps['sizeTooltip'];
labelTooltip?: SharedTooltipProps['labelTooltip'];
/**
* @default 'top'
*/
locationTooltip?: SharedTooltipProps['locationTooltip'];
/**
* @default true
*/
directionTooltip?: SharedTooltipProps['directionTooltip'];
contrastTooltip?: SharedTooltipProps['contrastTooltip'];
enterHoverDelayTooltip?: SharedTooltipProps['enterHoverDelay'];
/** Popover */
titlePopover?: SharedPopoverProps['titlePopover'];
subTitlePopover?: SharedPopoverProps['subTitlePopover'];
/**
* @default top
*/
locationPopover?: SharedPopoverProps['locationPopover'];
childrenPopover?: SharedPopoverProps['childrenPopover'];
labelButtonPopover?: SharedPopoverProps['labelButtonPopover'];
iconButtonPopover?: SharedPopoverProps['iconButtonPopover'];
iconPosButtonPopover?: SharedPopoverProps['iconPosButtonPopover'];
loadingButtonPopover?: SharedPopoverProps['loadingButtonPopover'];
disabledButtonPopover?: SharedPopoverProps['disabledButtonPopover'];
onClickButtonPopover?: () => void;
labelLinkPopover?: SharedPopoverProps['labelLinkPopover'];
hrefPopover?: SharedPopoverProps['hrefPopover'];
targetPopover?: SharedPopoverProps['targetPopover'];
buttonClosePopover?: SharedPopoverProps['buttonClosePopover'];
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/** Handlers */
onChange?: (state: boolean) => void;
};
export declare function removeToast(id: Id): void;
export declare function removeToasts(ids: Id[]): void;
export declare const Row: ({ children, ...attributes }: RowProps) => JSX_2.Element;
export declare type RowProps = HTMLAttributes<HTMLDivElement> & {
/**
* Children для строки ( Компоненты "Col" ).
*/
children?: React.ReactElement | React.ReactElement[];
};
export declare const SearchList: ({ onQueryChange, options, onSelect, query, setQuery, selectedOption, setSelectedOption, }: SearchListProps) => JSX_2.Element;
export declare type SearchListProps = {
onQueryChange?: (query: string) => void;
onSelect?: (value: string) => void;
options?: Array<{
label: string;
value: string;
}>;
query?: string;
setQuery: (query: string) => void;
selectedOption: string;
setSelectedOption: (option: string) => void;
};
export { Select }
declare interface SelectClassNames {
/**
* CSS-класс корневого контейнера Select
*/
root?: string;
/**
* CSS-класс выпадающего меню
*/
dropdown?: string;
/**
* CSS-класс контейнера поля ввода
*/
input?: string;
}
export declare const SelectControl: React_2.ForwardRefExoticComponent<SelectControlProps & React_2.RefAttributes<unknown>>;
declare interface SelectControlCallbacks {
/**
* Обработчик изменения значения
* @type (value: SelectControlStateType) => void
*/
onChange?: (value: SelectControlStateType) => void;
}
/**
* Опции компонента SelectControl
*/
export declare interface SelectControlOptions {
/**
* Значение
* @type SelectControlStateType
*/
value: SelectControlStateType;
/**
* Название лейбла или название иконки из иконочного сета, когда onlyIcon = true
*/
name: string;
/**
* Заблокированный элемент
* @type boolean
*/
disabled?: boolean;
/**
* Всплывающая подсказка
* @type string
*/
tooltip?: string;
/**
* Badge
* @type { string }
*/
badge?: string;
}
/**
* Входные параметры для компонента SelectControl
*/
export declare interface SelectControlProps extends SelectControlCallbacks {
/**
* Размеры компонента
* @type 'sm' | 'md' | 'lg' | 'xl'
* @default 'md'
*/
size: LiteralUnion<'sm' | 'md' | 'lg' | 'xl'>;
/**
* Значение выбранного элемента
* @type SelectControlStateType
* @default ''
*/
value: SelectControlStateType;
/**
* Набор элементов в списке
* @type SelectControlOptions[]
* @default []
*/
options: SelectControlOptions[];
/**
* Отображение в виде иконок
* @type boolean
* @default false
*/
onlyIcon?: boolean;
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg' | '2lg'}
* @default 'xxs'
*/
radius?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | '2lg';
/**
* Вариант цвета компонента
* @type { 'default' | 'contrast' }
* @default 'default'
*/
variant?: LiteralUnion<'default' | 'contrast'>;
/**
* Компонент используется как switch.
* Данная опция является внутренним параметром компонента и не добавляется пропсом при использовании
* @type { boolean }
* @default false
*/
selectControlSwitch?: boolean;
/**
* Пользовательские CSS классы для контейнера
*/
className?: string;
/**
* Ширина опции в SelectControl
* @type { 'equal' | 'content' }
* @default 'equal'
*/
typeWidthItem?: 'equal' | 'content';
}
/**
* Тип состояния компонента SelectControl
*/
export declare type SelectControlStateType = string;
export declare const SelectControlSwitch: ForwardRefExoticComponent<SelectControlSwitchProps & RefAttributes<unknown>>;
/**
* Кортеж, в качестве опций в данный компонент может быть передано ровно два элемента.
*/
export declare type SelectControlSwitchOptions = [SelectControlOptions, SelectControlOptions];
/**
* Пропсы полностью идентичны пропсам компонента SelectControl
*/
export declare interface SelectControlSwitchProps extends SelectControlProps {
options: SelectControlSwitchOptions;
}
declare type SelectDropdownMenuProps = Pick<Props_2, 'options'> & Partial<Pick<Props_2, 'group' | 'filter' | 'clearFilter'>>;
declare type SelectDropdownMenuProps_2 = Pick<Props_2, 'options'> & Partial<Pick<Props_2, 'group'>>;
declare type SelectInputProps = Pick<InputTextProps, 'size' | 'label' | 'labelPos' | 'readonly' | 'iconLeft' | 'radius' | 'inputClassNames'> & Partial<Pick<Props_2, 'caption' | 'placeholder' | 'disabled' | 'required' | 'error' | 'warning' | 'success'>>;
export declare type SelectProps = SelectInputProps & SelectDropdownMenuProps & {
/**
* Выбранное значение для выпадающего списка
*/
value?: string | undefined;
/**
* CSS-классы для внутренних частей компонента Select
*/
classNames?: SelectClassNames;
/**
* Событие обновления значения выпадающего списка
* @param value: string ключ значения из списка
*
*/
onChange: (value: string) => void;
/**
* Позиция выпадающего списка
* @type 'bottom' | 'auto'
* @default 'auto'
*/
menuPlacement?: LiteralUnion<'bottom' | 'auto'>;
/**
* Кастомное сообщение в случае отстутствия опций в выпадающем списке
* @type { string }
*/
emptyMessage?: string;
/**
* Кнопка очистки поля
* @type { boolean }
*/
clearIcon?: boolean;
/**
* Placeholder для поля фильтра в списке
* @type { string }
* @default 'Поиск'
*/
filterInputPlaceholder?: string;
/**
* Callback нажатия на кнопку очистки поля
*/
clearIconChange?: () => void;
/**
* Кастомная позиционирование компонента
* @type { CustomPositionProps }
*/
customPosition?: CustomPositionProps;
/**
* Высота списка
* @type { 'default' | 'w-fit' }
* @default 'default'
*/
listHeight?: 'default' | 'w-fit';
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
};
declare type SharedPopoverProps = {
/**
* Текст заголовка
* @type { string }
*/
titlePopover?: string;
/**
* Текст подзаголовка
* @type { string }
*/
subTitlePopover?: string;
/**
* Дочерние компоненты PanelOverlay
* @type { string | React.ReactElement }
*/
childrenPopover?: React.ReactElement | string;
/**
* Расположение Popover
* @type { 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' |
* 'bottom-right' | 'left-top' | 'left' | 'left-bottom' | 'right-top' | 'right' | 'right-bottom' }
*/
locationPopover?: LiteralUnion<'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left-top' | 'left' | 'left-bottom' | 'right-top' | 'right' | 'right-bottom'>;
/**
* Текст для кнопки Popover
* @type { string }
* @default ''
*/
labelButtonPopover?: ButtonProps['label'];
/**
* Событие onClick для кнопки Button в Popover
* @type { () => void }
*/
onClickButtonPopover?: ButtonProps['onClick'];
/**
* Имя кнопки из иконочного сета
* @type { JSX.Element }
* @default ''
*/
iconButtonPopover?: ButtonProps['icon'];
/**
* Позиция иконки в кнопке. Применяется когда установлено свойство icon.
* @type { 'left' | 'right' }
* @default left
*/
iconPosButtonPopover?: ButtonProps['iconPos'];
/**
* Элемент в состоянии не активный
* @default false
*/
disabledButtonPopover?: ButtonProps['disabled'];
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @default false
*/
loadingButtonPopover?: ButtonProps['loading'];
/**
* Текст для ссылки в Popover
* @type { string }
* @default ''
*/
labelLinkPopover?: string;
/**
* Ссылка для перехода при нажатии Link в Popover
* @type { string }
* @default undefined
*/
hrefPopover?: string;
/**
* target атрибут для ссылки Link в Popover
* @default _self
*/
targetPopover?: HTMLAttributeAnchorTarget;
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Кнопка закрытия Popover
* @type { boolean }
* @default true
*/
buttonClosePopover?: boolean;
};
declare type SharedTooltipProps = {
/**
* Размер Tooltip
* @type { 'xs' | 'sm' }
* @default 'xs'
*/
sizeTooltip?: 'xs' | 'sm';
/**
* Текст подсказки Tooltip
* @type { string | undefined }
* @default ''
*/
labelTooltip?: string;
/**
* Расположение подсказки Tooltip
* @type { 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' |
* 'bottom-right' | 'right-top' | 'right' | 'right-bottom' }
* @default 'top'
*/
locationTooltip?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right-top' | 'right' | 'right-bottom';
/**
* Фон Tooltip
* @type { boolean | undefined }
* @default false
*/
contrastTooltip?: boolean;
/**
* Tooltip с указателем
* @type { boolean | undefined }
* @default true
*/
directionTooltip?: boolean;
/**
* Временная задержка в мс при закрытии Tooltip, открытого наведением курсора на элемент
* @type { number }
*/
enterHoverDelay?: number;
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Расположение текста в элементе
* @type { 'start' | 'center' }
* @default 'start'
*/
textCentering?: 'start' | 'center';
};
declare function SideBtn(props: SideBtnProps): JSX_2.Element;
/**
* Пропсы compound-компонента `SideMenu.Button`.
* @type {ButtonProps}
*/
declare type SideBtnProps = ButtonProps;
export declare function SideMenu({ isExpanded, rounded, roundedBorder, header, navList, footer, transparentBackground, activeMenuId, setActiveMenuId, }: SideMenuProps): JSX_2.Element;
export declare namespace SideMenu {
var Toggle: typeof Toggle;
var Item: typeof Item;
var Button: typeof SideBtn;
var Logo: typeof Logo;
var Search: typeof Search;
var UserInfo: typeof UserInfo;
var Divider: () => JSX_2.Element;
}
/**
* Пропсы основного компонента `SideMenu`.
* @type {SideMenuProps}
*/
export declare type SideMenuProps = {
/**
* Скругление углов меню.
* @type {boolean}
*/
rounded: boolean;
/**
* Состояние раскрытия меню.
* @type {boolean}
*/
isExpanded: boolean;
/**
* Прозрачный фон контейнера.
* @type {boolean | undefined}
* @default false
*/
transparentBackground?: boolean;
/**
* Идентификатор активного пункта.
* @type {string | undefined}
*/
activeMenuId: string | undefined;
/**
* Рисовать границу при `rounded`.
* @type {boolean | undefined}
* @default true
*/
roundedBorder?: boolean;
/**
* Сеттер активного пункта.
* @type {(id: string | undefined) => void}
*/
setActiveMenuId: (id: string | undefined) => void;
/**
* Обработчик переключения состояния меню.
* @type {(() => void) | undefined}
*/
toggle?: () => void;
/**
* Слот верхней области.
* @type {(() => ReactNode) | undefined}
*/
header?: () => ReactNode;
/**
* Слот основного списка навигации.
* @type {(() => ReactNode) | undefined}
*/
navList?: () => ReactNode;
/**
* Слот нижней области.
* @type {(() => ReactNode) | undefined}
*/
footer?: () => ReactNode;
} & PropsWithChildren;
export declare const SkeletonAvatar: ({ size, rounded, className, ...props }: SkeletonAvatarProps) => JSX_2.Element;
/**
* Входные параметры для компонента SkeletonAvatarProps
*/
export declare type SkeletonAvatarProps = HTMLAttributes<HTMLDivElement> & {
/**
* Размер Skeleton
* @type { 'xs' | 'sm' | 'md' | 'lg' }
*/
size: LiteralUnion<'xs' | 'sm' | 'md' | 'lg'>;
/**
* Радиус скругления
* @type { boolean }
* @default false
*/
rounded?: boolean;
/**
* Пользовательские CSS классы
*/
className?: string;
};
export declare const SkeletonBlock: ({ rounded, className, ...props }: SkeletonBlockProps) => JSX_2.Element;
/**
* Входные параметры для компонента SkeletonBlockProps
*/
export declare type SkeletonBlockProps = HTMLAttributes<HTMLDivElement> & {
/**
* Радиус скругления
* @type { boolean }
* @default false
*/
rounded?: boolean;
/**
* Пользовательские CSS классы
*/
className?: string;
};
export declare const SkeletonText: ({ size, className, ...props }: SkeletonTextProps) => JSX_2.Element;
/**
* Входные параметры для компонента SkeletonTextProps
*/
export declare type SkeletonTextProps = HTMLAttributes<HTMLDivElement> & {
/**
* Размер Skeleton
* @type { '12-14' | '12-16' | '14-16' | '14-20' | '16-20' |
* '16-24' | '18-24' | '20-28' | '24-32' | '28-36' | '32-40' | '36-44' |
* '40-48' | '44-52' | '48-56' | '56-64' | '80-88' }
*/
size: LiteralUnion<'12-14' | '12-16' | '14-16' | '14-20' | '16-20' | '16-24' | '18-24' | '20-28' | '24-32' | '28-36' | '32-40' | '36-44' | '40-48' | '44-52' | '48-56' | '56-64' | '80-88'>;
/**
* Пользовательские CSS классы
*/
className?: string;
};
export declare const Slider: (props: SliderProps) => JSX_2.Element;
export declare type SliderOptionsProps = {
/**
* Id элемента
* @type { string }
*/
id: string;
/**
* Ссылка на изображение
* @type { string }
*/
src: string;
/**
* label изображения
* @type { string }
*/
label?: string;
/**
* FullScreen Template
* @type { ReactNode }
*/
fullScreenTemplate?: ReactNode;
};
export declare type SliderProps = {
/**
* Показывать текст описания карточки
* @type { boolean }
* @default {true}
*/
visibleDescriptionText?: boolean;
/**
* Опции компонента
* @type { SliderOptionsProps[] }
*/
options: SliderOptionsProps[];
/**
* Callback клика по картинке
* @type { (item: SliderOptionsProps, index: number) => void }
*/
onImageClick?: (item: SliderOptionsProps, index: number) => void;
/**
* Показывать картинки в FullScreen режиме, после клика на изображения
* @type { boolean }
*/
visibleFullScreen?: boolean;
};
export declare const SplitButton: ({ label, size, variant, icon, loading, disabled, href, target, options, sizeMenu, onClick, style, radius, }: SplitButtonProps) => JSX_2.Element;
declare type SplitButtonComponentProps = {
/**
* Тип компонента - split button
*/
type: 'split';
/**
* Основная кнопка компонента
*/
button: ButtonProps;
/**
* Массив элементов меню
*/
options: ElementMenuProps[];
/**
* Размер компонента ActionMenu
* @type { 'sm' | 'md' }
*/
sizeMenu: 'sm' | 'md';
};
export declare type SplitButtonProps = E_7 & {
/**
* Текст кнопки
* @type { string | undefined }
* @default ''
*/
label?: string | undefined;
/**
* Размер кнопки
* @type {'sm' | 'md' | 'lg' | 'xl'}
* @default 'md'
*/
size: 'sm' | 'md' | 'lg' | 'xl';
/**
* Имя иконки из иконочного сета
* @type { JSX.Element }
* @default ''
*/
icon?: IconName | undefined;
/**
* Отображать иконку загрузки и перевести кнопку в состояние загрузка
* @type { boolean }
* @default false
*/
loading?: boolean | undefined;
/**
* Элемент в состоянии не активный
* @type { boolean }
* @default false
*/
disabled?: boolean | undefined;
/**
* Ссылка для перехода при нажатии
* @type { string }
* @default undefined
*/
href?: string;
/**
* target атрибут для ссылок
* @default _self
*/
target?: HTMLAttributeAnchorTarget;
/**
* Массив элементов меню
*/
options: ElementMenuProps_2[];
/**
* Размер компонента ActionMenu
* @type { 'sm' | 'md' }
*/
sizeMenu: 'sm' | 'md';
/**
* Стили для блока кнопок
*/
style?: React_2.CSSProperties;
/**
* Вариант кнопки
* @type {'solid' | 'soft' | 'outline' | 'ghost'}
* @default 'solid'
*/
variant: 'solid' | 'soft' | 'outline' | 'ghost';
/**
* Радиус скругления
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg'}
* @default 'xxs'
*/
radius?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
};
declare type StateValue = {
theme: string;
dark: boolean;
fontFamily: string;
appendTo: AppendToType;
appendThemeTo: React.RefObject<HTMLElement>;
language: 'ru' | 'en';
};
export declare const StatusMessage: (props: StatusMessageProps) => JSX_2.Element;
declare type StatusMessageButtonProps = Omit<ButtonProps, 'size' | 'vatiant' | 'typeColor'>;
export declare type StatusMessageProps = {
type?: 'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
/**
* Параметры декоративного элемента
* @type { DecorateProps }
*/
decorate?: DecorateProps;
/**
* Текст Label
* @type { string }
*/
label: string;
/**
* Текст description
* @type { string }
*/
description: string;
/**
* Дополнительный текст description
* @type { string }
*/
addDescription?: string;
/**
* Параметры для компонента LinkText в StatusMessage
* @type { LinkTextProps }
*/
linkProps?: LinkTextProps;
/**
* Параметры для кнопки ghost
* @type { StatusMessageButtonProps }
*/
ghostButtonProps?: StatusMessageButtonProps;
/**
* Параметры для кнопки outline
* @type { StatusMessageButtonProps }
*/
outlineButtonProps?: StatusMessageButtonProps;
/**
* Параметры для кнопки solid
* @type { StatusMessageButtonProps }
*/
solidButtonProps?: StatusMessageButtonProps;
};
export declare const Stepper: ({ size, variant, position, options, className, children, mobile, minHeight, stepClick, onChange, ...props }: StepperProps) => JSX_2.Element;
export declare const StepperLine: ({ size, options, }: StepperLineProps) => JSX_2.Element;
/**
* Опции компонента StepperLine
*/
export declare interface StepperLineOptions {
/**
* id шага
* @type { string }
*/
id: string;
/**
* Название шага в StepperLine
*/
label: string;
/**
* Описание шага в StepperLine
*/
caption?: string;
/**
* Состояние шага в StepperLine
* @type { 'wait' | 'process' | 'error' | 'done' | 'disabled' | 'loading' }
*/
state: 'wait' | 'process' | 'error' | 'done' | 'disabled';
/**
* Активная стадия в StepperLine
* @type { boolean }
*/
currentStage: boolean;
}
/**
* Входные параметры для компонента StepperLine
*/
export declare type StepperLineProps = {
/**
* Размеры компонента
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: LiteralUnion<'sm' | 'md'>;
/**
* Набор элементов в списке
* @type StepperLineOptions[]
* @default []
*/
options: StepperLineOptions[];
};
/**
* Опции компонента Stepper
*/
export declare interface StepperOptions {
/**
* id шага
* @type { string }
*/
id: string;
/**
* Название шага в Stepper
* @type { string | ReactElement }
*/
label: string | ReactElement;
/**
* Описание шага в Stepper
* @type { string | ReactElement }
*/
caption?: string | ReactElement;
/**
* Состояние шага в Stepper
* @type { 'wait' | 'process' | 'error' | 'done' | 'disabled' | 'loading' | 'disabled-error' | 'disabled-done' | 'process-error' | 'selected' }
*/
state: LiteralUnion<'wait' | 'process' | 'error' | 'done' | 'disabled' | 'loading' | 'disabled-error' | 'disabled-done' | 'process-error' | 'selected'>;
/**
* Активная стадия в StepperLine
* @type { boolean }
*/
currentStage: boolean;
/**
* Событие нажатия на шаг, при stepClick === true
* Рекомендуется использовать при клике на шаг в Stepper
*/
onClick?: () => void;
}
/**
* Входные параметры для компонента Stepper
*/
export declare type StepperProps = SharedTooltipProps & {
/**
* Размеры компонента
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: LiteralUnion<'xs' | 'sm'>;
/**
* Тип Stepper
* @type { 'icon' | 'dot' | 'longlist' }
* @default 'icon'
*/
variant?: LiteralUnion<'icon' | 'dot'>;
/**
* Расположение компонента Stepper.
* @type { 'vertically' | 'horizontally' }
* @default 'horizontally'
*/
position?: LiteralUnion<'vertically' | 'horizontally'>;
/**
* Набор элементов в списке
* @type StepperOptions[]
* @default []
*/
options: StepperOptions[];
/**
* Панель для отображения контента в Stepper для конкретного шага
* @type { ReactNode }
*/
children?: ReactNode;
/**
* Класс Stepper элемента
* @type { string }
* @default undefined
*/
className?: string;
/**
* Мобильная версия Stepper. Используется для position = 'vertically'
* @type { boolean }
* @default false
*/
mobile?: boolean;
/**
* Минимальная высота компонента для position = 'horizontally'
* @type { boolean }
* @default false
*/
minHeight?: boolean;
/**
* Возможность клика на опции в степпере
* @type { boolean }
* @default false
*/
stepClick?: boolean;
/**
* [Beta] onChange при клике на опцию в степпере
* Логика обновления state шага в самом компоненте Stepper.
* Для создания дополнительной логики обработки шага рекомендуется использовать onClick для каждого шага
* @type { (list: StepperOptions[]) => void }
*/
onChange?: (list: StepperOptions[]) => void;
};
export declare const Switcher: (props: SwitcherProps) => JSX_2.Element;
export declare const SwitcherGroup: (props: SwitcherGroupProps) => JSX_2.Element;
declare type SwitcherGroupOptions = Omit<SwitcherProps, 'size' | 'position' | 'accesabilityHover' | 'animation' | 'appendTo' | 'withContainerPadding' | 'type'>;
export declare type SwitcherGroupProps = Callbacks_3 & {
/**
* Текст заголовка группы.
* @type { string }
*/
label: string;
/**
* Текст подписи для заголовка группы.
* @type { string | undefined }
*/
caption?: string;
/**
* Значения выбранных значений в группе.
* @type { string[] }
*/
values: string[];
/**
* Имя группы Switcher кнопок.
* @type { string | undefined }
* @default 'uuid()'
*/
name?: string;
/**
* Размер кнопок в группе.
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: LiteralUnion<'sm' | 'md'>;
/**
* Элементы группы.
* @type { SwitcherGroupOptions[] }
* @default '[]'
*/
options: SwitcherGroupOptions[];
/**
* Расположение кнопок Switcher в группе
* @type { 'left' | 'right' }
* @default 'left'
*/
position?: LiteralUnion<'left' | 'right'>;
/**
* @default false
*/
accesabilityHover?: boolean;
/**
* @default true
*/
animation?: boolean;
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
helpIconPosition?: 'left' | 'right';
/** Handlers */
onChange?: (event: InputSwitchChangeEvent) => void;
};
export declare type SwitcherProps = SharedTooltipProps & SharedPopoverProps & {
/**
* id элемента Switcher
* @type { string | undefined }
*/
id: string;
/**
* Размер элемента Switcher
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size: LiteralUnion<'sm' | 'md'>;
/**
* Состояние Switcher активен или нет
* @type { boolean | undefined }
* @default false
*/
checked?: boolean;
/**
* Label текст для Switcher
* @type { string | undefined }
* @default ''
*/
label?: string;
/**
* Caption текст подсказки для Switcher. Используется без иконки
* @type { string | undefined }
* @default ''
*/
caption?: string;
/**
* @default false
*/
showHelpIcon?: boolean;
/**
* Расположение Switcher
* @type { 'left' | 'right' | undefined }
*/
position?: LiteralUnion<'left' | 'right'>;
/**
* Элемент в состоянии не активный
* @type { boolean | undefined }
* @default false
*/
disabled?: boolean;
/**
* Имя элемента switcher.
* @type { string | undefined }
*/
name?: string;
/**
* @default false
*/
accesabilityHover?: boolean;
/**
* @default true
*/
animation?: boolean;
/**
* @type { 'left' | 'right' }
* @default 'right'
*/
helpIconPosition?: 'left' | 'right';
/**
* Позиция монтирования компонента Tooltip или Popover. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Отступы у контейнера Switcher
* @type { boolean }
* @default true
*/
withContainerPadding?: boolean;
/** Handlers */
onChange?: (event: InputSwitchChangeEvent) => void;
};
export declare type TableContolDrawerItem = {
id: string;
header: string;
isVisible: boolean;
isPinned: 'left' | 'right' | false;
columns?: TableContolDrawerItem[];
};
export declare const TableControlDrawer: ForwardRefExoticComponent<TableControlDrawerProps & RefAttributes<TableControlDrawerRefMethods>>;
export declare type TableControlDrawerProps = {
items: TableContolDrawerItem[];
onItemsChanged: (items: TableContolDrawerItem[]) => void;
};
export declare type TableControlDrawerRefMethods = {
show: () => void;
hide: () => void;
toggle: () => void;
};
export declare const TableControlPanel: ForwardRefExoticComponent<Omit<TableControlPanelProps, "ref"> & RefAttributes<TableControlPanelRefMethods>>;
export declare type TableControlPanelProps = {
/**
* Массив объектов конфигурации колонок таблицы
* @type {Column[]}
*/
columns: Column[];
/**
* onChange обновления конфигурации колонок
*/
setColumnsConfig: (columns: Column[]) => void;
/**
* useRef элемента
* @type { MutableRefObject<null> }
*/
ref: MutableRefObject<null>;
/**
* Дополнительные CSS-классы для обёртки строк панели управления колонками.
* Позволяет кастомизировать внешний вид контейнера, содержащего
* элементы настройки колонок
*/
rowsWrapperClassNames?: string;
};
declare type TableControlPanelRefMethods = {
/**
* Функция для управления состоянием TableControlPanel.
* @type { (e) => ref.current.toggle(e) }
*/
toggle?: (e: any) => void;
/**
* Функция для открытия TableControlPanel.
* @type { (e) => ref.current.show(e) }
*/
show?: (e: any) => void;
/**
* Функция для закрытия TableControlPanel
* @type { () => ref.current.hide() }
*/
hide?: () => void;
};
declare type TabOption = Omit<TabProps, 'type' | 'size' | 'selected'>;
declare interface TabProps extends Callback {
/**
* Текст таба.
* @type { string | undefined }
*/
label?: string | undefined;
/**
* Тип таба.
* @type { 'horizontal' | 'vertical' }
* @default horizontal
*/
type: TabType;
/**
* Размер таба.
* @type { 'sm' | 'md' | 'lg' }
* @default sm
*/
size: TabSize;
/**
* Имя кнопки из иконочного сета
* @type { JSX.Element }
* @default ''
*/
iconLeft?: IconName | undefined;
/**
* Бейджик в кнопке.
*/
badge?: string | React_2.ReactNode | undefined;
/**
* Вкладка выбрана.
* @type { boolean }
* @default false
*/
selected?: boolean | undefined;
/**
* Элемент в состоянии не активный
* @default false
*/
disabled?: boolean | undefined;
}
export declare const Tabs: (props: TabsProps) => JSX_2.Element;
declare type TabSize = 'sm' | 'md' | 'lg';
export declare interface TabsProps extends Events {
/**
* Индекс актианой вкладки.
*/
activeIndex: number;
/**
* Размер.
* @type {'sm' | 'md' | 'lg' }
*/
size: TabSize;
/**
* Тип.
* @type { 'horizontal' | 'vertical' }
*/
type: TabType;
/**
* Опции
*/
options?: TabOption[];
/**
* Bottom Divider для type='horizontal'
* @type { boolean }
* @default false
*/
bottomDivider?: boolean;
}
declare type TabType = 'horizontal' | 'vertical';
export declare const Tag: ForwardRefExoticComponent<SharedTooltipProps & {
id: string;
interactive?: boolean;
value?: boolean;
size?: LiteralUnion<"sm" | "md">;
label: string;
icon?: string | null;
iconClose?: boolean;
type?: LiteralUnion<"neutral" | "brand" | "info" | "success" | "warning" | "error">;
variant?: LiteralUnion<"soft" | "outline">;
disabled?: boolean;
radius?: LiteralUnion<"xxs" | "xs" | "sm" | "md" | "lg">;
className?: string;
truncateLabel?: boolean;
onChange?: () => void;
onRemove?: () => void;
onFocus?: () => void;
onBlur?: () => void;
} & RefAttributes<unknown>>;
export declare const TagGroup: ({ value, size, type, variant, interactive, sizeTooltip, locationTooltip, directionTooltip, contrastTooltip, options, radius, onChange, }: TagGroupProps) => JSX_2.Element;
declare type TagGroupOptions = Omit<TagProps, 'size' | 'value' | 'interactive' | 'variant' | 'type' | 'radius' | 'sizeTooltip' | 'locationTooltip' | 'labelTooltip' | 'directionTooltip' | 'contrastTooltip' | 'onChange'>;
export declare type TagGroupProps = SharedTooltipProps & {
/**
* Значение выбранного значения или выбранных значений в группе.
* @type { string | string[] }
*/
value?: string | string[];
/**
* Размер Tag в группе.
* @type { 'sm' | 'md' }
* @default 'sm'
*/
size?: 'sm' | 'md';
/**
* Элементы группы.
* @type { TagGroupOptions[] }
* @default '[]'
*/
options: TagGroupOptions[];
/**
* Интерактивные Tag
* @type { boolean }
* @default false
*/
interactive?: boolean;
/**
* Тип Tag
* @type { 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' }
* @default 'neutral
*/
type?: LiteralUnion<'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error'>;
/**
* Вариант Tag
* @type { 'shade' | 'outline' }
* @default 'shade'
*/
variant?: LiteralUnion<'soft' | 'outline'>;
/**
* Функция для управления состоянием Tag
* @type { Function }
*/
onChange?: (id: string) => void;
/**
* Радиус скругления. По умолчанию radius для 'sm' = 4px, 'md' = 6px
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
};
/**
* Входные параметры для компонента Tag
*/
export declare type TagProps = SharedTooltipProps & {
/**
* id компонента Tag
* @type { string }
*/
id: string;
/**
* Интерактивный компонент
* @type { boolean }
* @default false
*/
interactive?: boolean;
/**
* Состояние компонента. Используется для интерактивного Tag
* @type { boolean }
* @default false
*/
value?: boolean;
/**
* Размеры компонента
* @type 'sm' | 'md'
* @default 'sm'
*/
size?: LiteralUnion<'sm' | 'md'>;
/**
* Текст Tag
* @type { string }
*/
label: string;
/**
* Иконка. При одновременной передаче иконки и бейджа, приоритет бейджа выше
* Если значение null - тэг отображается без иконки или бейджа.
* @type { string | null }
* @default ''
*/
icon?: string | null;
/**
* Иконка закрытия. Используется для интерактивного Tag
* @type { boolean }
* @default false
*/
iconClose?: boolean;
/**
* Тип Tag
* @type { 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error' }
* @default 'neutral
*/
type?: LiteralUnion<'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'error'>;
/**
* Вариант Tag
* @type { 'soft' | 'outline' }
* @default 'soft'
*/
variant?: LiteralUnion<'soft' | 'outline'>;
/**
* Заблокированный элемент
* @type { boolean }
* @default false
*/
disabled?: boolean;
/**
* Радиус скругления. По умолчанию radius для 'sm' = 4px, 'md' = 6px
* @type {'xxs'| 'xs' | 'sm' | 'md' | 'lg'}
*/
radius?: LiteralUnion<'xxs' | 'xs' | 'sm' | 'md' | 'lg'>;
/**
* Дополнительные классы для компонента Tag
*/
className?: string;
/**
* Свойство управляет поведением текста внутри Tag.
* По умолчанию true, при слишокм длинном значении текст обрезвается.
* @type {boolean}
* @default {true}
*/
truncateLabel?: boolean;
/**
* Обработчик изменения значения Tag. Используется для интерактивного Tag
*/
onChange?: () => void;
/**
* Событие удаления Tag.
*/
onRemove?: () => void;
/**
* Событие фокуса инпута. Используется для интерактивного Tag
*/
onFocus?: () => void;
/**
* Событие потери фокуса инпута. Используется для интерактивного Tag
*/
onBlur?: () => void;
};
declare type TextCondData = {
/**
* Value для поля
* @type { string | number | readonly string[] | undefined }
*/
value: string | number | readonly string[] | undefined;
/**
* Id элемента списка
* @type { string }
*/
id: string;
/**
* Статус требования к паролю
* @type { 'neutral | 'success' }
*/
status: LiteralUnion<'neutral' | 'success'>;
/**
* Текст
* @type { string }
*/
label: string;
};
export declare function Toaster({ visibleToasts, ...props }: ToasterProps_2): JSX_2.Element;
export declare namespace Toaster {
var Actions: FC<{
children?: ReactNode | undefined;
}>;
var ActionButton: FC<ButtonHTMLAttributes<HTMLButtonElement> & {
label?: string | ReactElement;
size?: LiteralUnion<"sm" | "md" | "lg" | "xl">;
variant?: LiteralUnion<"solid" | "soft" | "outline" | "ghost">;
icon?: IconName;
iconPos?: LiteralUnion<"left" | "right">;
loading?: boolean;
disabled?: boolean;
rounded?: boolean;
href?: string;
target?: HTMLAttributeAnchorTarget;
badgeLabel?: string;
radius?: LiteralUnion<"xxs" | "xs" | "sm" | "md" | "lg" | "xl">;
typeColor?: LiteralUnion<"brand" | "neutral" | "info" | "success" | "warning" | "error">;
iconColor?: `brand-${number}` | `brand-contrast-${number}` | `neutral-${number}` | `info-${number}` | `info-contrast-${number}` | `success-${number}` | `success-contrast-${number}` | `warning-${number}` | `warning-contrast-${number}` | `error-${number}` | `error-contrast-${number}`;
isActive?: boolean;
children?: ReactNode;
startContent?: ReactNode;
endContent?: ReactNode;
}>;
var ActionLink: FC<ButtonHTMLAttributes<HTMLAnchorElement> & {
label: string;
size?: LiteralUnion<"sm" | "md">;
iconBefore?: IconName | undefined;
iconAfter?: IconName | undefined;
disabled?: boolean | undefined;
href: string;
target?: HTMLAttributeAnchorTarget;
clickEffect?: boolean;
visitedEffect?: boolean;
onClick?: (e: React.MouseEvent<HTMLLinkElement> | React.KeyboardEvent<HTMLLinkElement>) => void;
}>;
}
export declare type ToasterProps = {
title: string;
description?: string;
duration?: number;
variant?: Variant_3;
};
declare type ToastRefHandle = {
show: (message: LegacyToastMessage | LegacyToastMessage[]) => void;
clear: () => void;
getToastElement: () => null;
};
export declare const Tooltip: ({ size, location, label, contrast, direction, tracking, templateOnly, children, className, tooltipClassName, widthContainer, clickState, clickMessage, enterClickDelay, enterHoverDelay, showMessageOnFocus, textCentering, ...props }: TooltipProps) => JSX_2.Element | null;
export declare type TooltipProps = {
/**
* Размер Tooltip
* @type { 'xs' | 'sm' }
* @default 'xs'
*/
size?: LiteralUnion<'xs' | 'sm'>;
/**
* Расположение подсказки Tooltip
* @type { 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' |
* 'bottom-right' | 'right-top' | 'right' | 'right-bottom' }
* @default 'top'
* location + 'left-top' | 'left' | 'left-bottom': This option of using the tooltip is currently not being solved
*/
location?: LiteralUnion<'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right-top' | 'right' | 'right-bottom'>;
/**
* Текст подсказки Tooltip
* @type { string | React.ReactElement | undefined }
* @default ''
*/
label?: string | React.ReactElement;
/**
* Фон Tooltip
* @type { boolean | undefined }
* @default false
*/
contrast?: boolean;
/**
* Tooltip с указателем
* @type { boolean | undefined }
* @default true
*/
direction?: boolean;
/**
* Отслеживание положения курсора
* @type { boolean | undefined }
* @default false
*/
tracking?: boolean;
/**
* Елемент, к которому применяется Tooltip
* @type { React.ReactElement | string | undefined }
*/
children?: React.ReactElement | string;
/**
* Только шаблон Tooltip
* @type { boolean | undefined }
* @default false
*/
templateOnly?: boolean;
/**
* Класс компонента
* @type { string | undefined }
* @default undefined
*/
className?: string;
/**
* Кастомный класс для tooltip
* @type { string | undefined }
* @default undefined
*/
tooltipClassName?: string;
/**
* Ширина контейнера контента для которого отображается Tooltip
* @type { 'w-full' | 'w-fit' }
* @default 'w-fit'
*/
widthContainer?: 'w-full' | 'w-fit';
/**
* Показывать дополнительный текст после нажатия на элемент
* @type { boolean }
* @default false
*/
clickState?: boolean;
/**
* Текст подсказки, который отображается по нажатию на элемент
* @type { string }
* @default 'Скопировано'
*/
clickMessage?: string;
/**
* Временная задержка в мс при закрытии Tooltip, открытого по клику
* @type { number }
* @default 700
*/
enterClickDelay?: number;
/**
* Временная задержка в мс при закрытии Tooltip, открытого наведением курсора на элемент
* @type { number }
* @default 0
*/
enterHoverDelay?: number;
/**
* Показывать Tooltip при фокусе на элементе
* @type { boolean }
* @default true
*/
showMessageOnFocus?: boolean;
/**
* Позиция монтирования компонента. Если не задано - по умолчанию
* компонент будет монтироваться в document.body
* @type { AppendToType }
* @default document.body
*/
appendTo?: AppendToType;
/**
* Расположение текста в элементе
* @type { 'start' | 'center' }
* @default 'start'
*/
textCentering?: 'start' | 'center';
};
export declare const Typography: (props: TypographyProps) => JSX_2.Element;
export declare type TypographyProps = {
/**
* Вариант текста
* @type {Variant}
* @default 'body1'
*/
variant: Variant_2;
/**
* Тег для отображени текста
* @type {string}
* @default 'p'
*/
tag?: string;
children: ReactNode;
className?: string;
/**
* Сематическая связь для label
*/
htmlFor?: string;
};
export declare interface UploadedFile extends File {
/**
* Статус загрузки файла
* @type {'default' | 'loading' | 'error'}
* @default 'default'
*/
status: 'default' | 'loading' | 'error';
/**
* Caption text для файла. Используется для отображения текста ошибки. Данный текст располагается вместо расширения и размера файла.
* @type { string }
*/
caption?: string;
}
export declare const useAppendTo: (appendTo?: AppendToType) => {
appendTo: AppendToType;
};
export declare const useCSSTokens: (cssTokens: string[]) => Record<string, string>;
export declare const useDeviceType: () => {
deviceType: Device;
windowWidth: number;
isMobile: boolean;
isTablet: boolean;
isDesktop: boolean;
isDesktopLG: boolean;
isDesktopXl: boolean;
};
export declare const useExchangeContext: () => StateValue;
export declare const useMounted: () => {
isMounted: boolean;
};
export declare const useMutationObserver: (domNodeSelector: any, observerOptions: any, cb: any) => void;
export declare const useTheme: () => string | null;
export declare const useWindowSize: () => [number, number];
declare type Variant = 'd1-bold' | 'd2-bold' | 'h1-bold' | 'h1-regular' | 'h2-bold' | 'h2-regular' | 'h3-bold' | 'h4-bold' | 'h5-bold';
declare type Variant_2 = 'body1' | 'body2' | 'body3' | 'caption';
declare type Variant_3 = 'info' | 'success' | 'error' | 'warning';
export declare function withToastAdapter<T extends object>(WrappedComponent: ComponentType<T>): ForwardRefExoticComponent<PropsWithoutRef<T & Partial<ToasterProps_2>> & RefAttributes<ToastRefHandle>>;
export { }
import { TooltipProps } from './index';
import { classList as cn } from '@/utils';
import { useState, useEffect, useRef, useMemo } from 'react';
import './Tooltip.css';
import { calculateTooltipPosition } from '@/shared/component/tooltip/calculateTooltipPosition';
import { useAppendTo } from '@/hooks';
import { createPortal } from 'react-dom';
const Tooltip = ({
size = 'xs',
location = 'top',
label = '',
contrast = false,
direction = true,
tracking = false,
templateOnly = false,
className,
tooltipClassName,
children,
// Пропс ширины контейнера контента для которого отображается Tooltip
widthContainer = 'w-fit',
clickState = false,
clickMessage = 'Скопировано',
enterClickDelay = 700,
enterHoverDelay = 0,
showMessageOnFocus = true,
...props
}: TooltipProps) => {
const [active, setActive] = useState(false);
const [hideTooltipState, setHideTooltipState] = useState(false);
const tooltipMain = useRef<HTMLInputElement>(null);
const tooltipHint = useRef<HTMLInputElement>(null);
const [transferTooltip, setTransferTooltip] = useState(false);
const heightArrow = 6;
const marginBetweenTooltipAndElement = 4;
const distBetweenElementAndTooltip = marginBetweenTooltipAndElement + heightArrow;
const [textTooltip, setTextTooltip] = useState(label);
const distBetweenSideAndArrowHorizontal = size === 'xs' ? 14 : 18;
const distBetweenSideAndArrowVertical = size === 'xs' ? 10 : 12;
const { appendTo } = useAppendTo(props?.appendTo);
useEffect(() => {
setTextTooltip(label);
}, [label]);
useEffect(() => {
if (!active && clickState) {
setTextTooltip(label);
}
}, [active, clickState]);
const showMessage = () => {
setHideTooltipState(false);
setActive(true);
};
useEffect(() => {
let timer: number;
if (hideTooltipState) {
if (tooltipHint.current) {
tooltipHint.current.style.bottom = 'null';
}
setTransferTooltip(false);
if (enterClickDelay && textTooltip === clickMessage) {
timer = setTimeout(() => {
setActive(false);
}, enterClickDelay);
} else if (enterHoverDelay && textTooltip !== clickMessage) {
timer = setTimeout(() => {
setActive(false);
}, enterHoverDelay);
} else {
setActive(false);
}
}
return () => {
clearTimeout(timer);
};
}, [hideTooltipState]);
const hideTooltipAfterScroll = () => {
setHideTooltipState(true);
};
useEffect(() => {
if (active) {
const maxZIndex = [...document.body.querySelectorAll('*')]
.map((el) => parseFloat(window.getComputedStyle(el).zIndex) || 0)
.reduce((max, index) => Math.max(max, index), 0);
if (tooltipHint.current) {
tooltipHint.current.style.zIndex = `${maxZIndex + 1}`;
}
document.addEventListener('scroll', () => hideTooltipAfterScroll());
} else {
document.removeEventListener('scroll', () => hideTooltipAfterScroll());
}
}, [active]);
const moveTooltip = (e) => {
if (tracking && tooltipMain.current && tooltipHint.current) {
const tooltipWidth = tooltipHint.current?.offsetWidth;
const x = e.clientX - tooltipWidth / 2 + window.scrollX;
const y = e.clientY + 10 + window.scrollY;
tooltipHint.current.style.top = `${y}px`;
tooltipHint.current.style.left = `${x}px`;
}
};
useEffect(() => {
if (tooltipMain.current && tooltipHint.current) {
if (active && (location === 'top' || location === 'top-left' || location === 'top-right')) {
const positionChildrenElement = tooltipMain.current.getBoundingClientRect();
if (
positionChildrenElement.top -
tooltipHint.current?.offsetHeight -
distBetweenElementAndTooltip <
0
) {
setTransferTooltip(true);
}
} else if (
active &&
(location === 'bottom' || location === 'bottom-left' || location === 'bottom-right')
) {
const positionChildrenElement = tooltipMain.current.getBoundingClientRect();
if (
window.innerHeight -
(positionChildrenElement.top +
positionChildrenElement.height +
distBetweenElementAndTooltip) <
tooltipHint.current?.offsetHeight
) {
setTransferTooltip(true);
}
}
}
}, [active, textTooltip]);
useEffect(() => {
if (!tracking && tooltipHint.current && tooltipMain.current) {
calculateTooltipPosition(
tooltipMain,
tooltipHint,
location,
direction,
distBetweenElementAndTooltip,
distBetweenSideAndArrowHorizontal,
distBetweenSideAndArrowVertical,
marginBetweenTooltipAndElement,
transferTooltip,
);
}
}, [
active,
textTooltip,
location,
transferTooltip,
direction,
tracking,
distBetweenElementAndTooltip,
distBetweenSideAndArrowHorizontal,
distBetweenSideAndArrowVertical,
tooltipHint,
]);
const tooltipContainerChildren = useMemo(() => {
return cn('relative', widthContainer);
}, [widthContainer]);
const tooltipItemCn = useMemo(() => {
return cn(
`
tooltip
${location}
${size}
tooltip-focusShadow-color
tooltip-${size}-height
tooltip-max-width
tooltip-${size}-padding-horizontal
tooltip-${size}-padding-vertical
tooltip-${location}-arrow-margin
tooltip-border-radius
tooltip-${size}-default-contast-text-color
`,
{
['absolute']: !templateOnly,
['no-direction']: !direction,
['tooltip-default-color']: !contrast,
['tooltip-default-bg']: !contrast,
['tooltip-contrast-color']: contrast,
['tooltip-contrast-bg']: contrast,
['tooltip-animation']: active,
},
tooltipClassName,
);
}, [active, contrast, location, size, transferTooltip]);
const tooltipLimitContentCn = useMemo(() => {
return cn({
[` ${location}`]: !transferTooltip,
['top']: transferTooltip && location === 'bottom',
['top-left']: transferTooltip && location === 'bottom-left',
['top-right']: transferTooltip && location === 'bottom-right',
['bottom']: transferTooltip && location === 'top',
['bottom-left']: transferTooltip && location === 'top-left',
['bottom-right']: transferTooltip && location === 'top-right',
});
}, [transferTooltip, location]);
const tooltipArrowCn = useMemo(() => {
return cn(
`
tooltip-arrow
tooltip-arrow-size
${size}
${tooltipLimitContentCn}`,
{
['tooltip-border-rigth-color']: !contrast,
['tooltip-contrast-border-rigth-color']: contrast,
},
);
}, [active, size, contrast, tooltipLimitContentCn]);
const tooltipElement = useMemo(() => {
if (textTooltip) {
return (
<div className={`${tooltipItemCn}`} ref={tooltipHint}>
{textTooltip}
{direction && !tracking && <div className={`${tooltipArrowCn}`}></div>}
</div>
);
} else {
return null;
}
}, [textTooltip, tooltipItemCn, tooltipHint, direction, tracking, tooltipArrowCn]);
if (templateOnly) {
return tooltipElement;
}
return (
<div
className={cn(tooltipContainerChildren, className)}
ref={tooltipMain}
onClick={() => clickState && setTextTooltip(clickMessage)}
onMouseEnter={showMessage}
onMouseLeave={() => setHideTooltipState(true)}
onMouseMove={moveTooltip}
onFocus={() => {
if (showMessageOnFocus) showMessage();
}}
onBlur={() => setHideTooltipState(true)}
>
{children}
{active && createPortal(tooltipElement, appendTo as HTMLElement)}
</div>
);
};
export default Tooltip;
