@docsvision/webclient 5.17.0-beta.9 → 5.17.1

package/Helpers/Breadcrumbs/BreadcrumbsView.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IReadonlyAccessor } from '@docsvision/webclient/Helpers/DynamicModel/IReadonlyAccessor';
+/** @internal */
+export interface IBreadcrumbsViewProps<T> {
+    predefinedItem?: T;
+    path: T[];
+    readonly?: boolean;
+    itemId: IReadonlyAccessor<T, string>;
+    itemName: IReadonlyAccessor<T, string>;
+    itemTip: IReadonlyAccessor<T, string>;
+    rootLabel: string;
+    rootTip?: string;
+    /** При выборе элемента */
+    onItemClick?: (item: T | null) => void;
+}
+/** @internal */
+export declare function BreadcrumbsView<T>(props: IBreadcrumbsViewProps<T>): JSX.Element;

package/Helpers/Breadcrumbs/BreadcrumbsViewComponents.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/** @review Свойства для {@link LinkItemViewWithSeparator}  */
+export interface IPredefinedLinkItemViewProps {
+    /** Является ли элемент первым в списке */
+    first?: boolean;
+}
+export declare const PredefinedLinkItemView: 
+import("styled-components").StyledComponent<any, any, object & IPredefinedLinkItemViewProps, string>;
+export declare const PredefinedSeparator: 
+import("styled-components").StyledComponent<any, any, object, string>;
+export declare const Item: 
+import("styled-components").StyledComponent<(props: 
+import("./ButtonItem").IBreadcrumbsItemProps) => JSX.Element, any, {}, never>;
+export declare const ReadonlyLinkItemView: 
+import("styled-components").StyledComponent<any, any, object, string>;

package/Helpers/Breadcrumbs/ButtonItem.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+/** @review Свойства для {@link ButtonItem}  */
+export interface IBreadcrumbsItemProps {
+    /** Дополнительный класс */
+    className?: string;
+    style?: React.CSSProperties;
+    /** TabIndex элемента */
+    tabIndex?: number;
+    /** Содержимое */
+    children?: React.ReactNode;
+    /** При выборе элемента */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Called on button focus */
+    onFocus?: (ev?: any) => void;
+    /** Called on button blur */
+    onBlur?: (ev?: any) => void;
+}
+/**
+ * @review Элемент хлебных крошек с произвольным обработчиком клика.
+ *
+ * Пример использования:
+ *
+ *     let Item = Breadcrumbs.ButtonItem;
+ *     let ItemView = Breadcrumbs.LinkItemView;
+ *     let Separator = Breadcrumbs.LinkSeparator;
+ *
+ *      <div className="padding-v-7">
+ *           <Item onClick={() => console.log('Выбран Север')}>
+ *               <ItemView>Север</ItemView>
+ *           </Item>
+ *           <Separator />
+ *           <Item onClick={() => console.log('Выбрана Северная верфь')}>
+ *               <ItemView>Северная верфь</ItemView>
+ *           </Item>
+ *      </div>
+ *
+ * Пример использования в случае, когда элементы заданы в виде массива:
+ *
+ *     let Item = Breadrcumbs.ButtonItem;
+ *     let ItemView = Breadrcumbs.LinkItemView;
+ *     let Separator = Breadcrumbs.LinkSeparator;
+ *
+ *     <div className="padding-v-7">
+ *         {["Север", "Северная гавань"].map((item, index) =>
+ *             <Item onClick={() => console.log('Выбран ' + item)} key={index}>
+ *                 {index > 0 && < Separator />}
+ *                 <ItemView>{item}</ItemView>
+ *             </Item>
+ *         )}
+ *     </div>
+ *
+ */
+export declare const ButtonItem: (props: IBreadcrumbsItemProps) => JSX.Element;

package/Helpers/Breadcrumbs/LinkView/LinkItemView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * См. {@link Breadcrumbs.ButtonItem}
+ */
+export declare const LinkItemView: 
+import("styled-components").StyledComponent<"div", any, any, string>;

package/Helpers/Breadcrumbs/LinkView/LinkItemViewWithSeparator.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/** @review Свойства для {@link LinkItemViewWithSeparator}  */
+export interface ILinkItemViewWithSeparatorProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Является ли элемент первым в списке */
+    first?: boolean;
+    /** Текст элемента */
+    title?: string;
+    /** @internal */
+    children?: React.ReactNode;
+    ref?: React.RefObject<HTMLDivElement>;
+}
+/** @review Отображает {@link LinkItemView} c {@link LinkSeparator} перед ним, если элемент первый в списке. */
+export declare const LinkItemViewWithSeparator: React.ForwardRefExoticComponent<Pick<ILinkItemViewWithSeparatorProps, "title" | "children" | "className" | "first"> & React.RefAttributes<HTMLDivElement>>;

package/Helpers/Breadcrumbs/LinkView/LinkSeparator.d.ts

@@ -0,0 +1,5 @@
+/** @review См. {@link ButtonItem} */
+export declare const LinkSeparator: 
+import("styled-components").StyledComponent<"div", any, {
+    className: "breadcrumbs-link-separator-helper";
+}, "className">;

package/Helpers/Breadcrumbs/SimpleView/SimpleItemView.d.ts

@@ -0,0 +1,5 @@
+/** @review Аналог {@link LinkItemView}, но без стилизации в виде ссылки. */
+export declare const SimpleItemView: 
+import("styled-components").StyledComponent<"div", any, {
+    className: "breadcrumbs-simple-item-view-helper text-trim";
+}, "className">;

package/Helpers/Breadcrumbs/SimpleView/SimpleItemViewWithSeparator.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+/** @review Свойства для {@link SimpleItemViewWithSeparator}  */
+export interface ISimpleItemViewWithSeparatorProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Является ли элемент первым в списке */
+    first: boolean;
+    /** Текст элемента */
+    title?: string;
+    /** @internal */
+    children?: React.ReactNode;
+}
+/** @review Аналог {@link LinkItemViewWithSeparator}, но без стилизации в виде ссылки. */
+export declare const SimpleItemViewWithSeparator: (props: ISimpleItemViewWithSeparatorProps) => JSX.Element;

package/Helpers/Breadcrumbs/SimpleView/SimpleSeparator.d.ts

@@ -0,0 +1,5 @@
+/** @review Аналог {@link LinkSeparator}, но без стилизации в виде ссылки. */
+export declare const SimpleSeparator: 
+import("styled-components").StyledComponent<"div", any, {
+    className: "breadcrumbs-simple-separator-helper";
+}, "className">;

package/Helpers/Button.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+/** @internal Свойства для {@link Button} */
+export interface IButtonProperties {
+    /** Отображаемый текст. */
+    text?: string;
+    /**
+     * Позволяет показать указанную иконку слева от текста.
+     * Класс должен оределять ширину и высоту фона, представляющего собой иконку.
+     * Предпочтительная ширина иконка - 18px (это ширина иконки загрузки), но можно использовать и иконку любых других размеров.
+     * Если размер иконки не 18x18, то вы должны установить в свойстве loadingIconClass свою загрузочную иконку,
+     * иначе текст будет прыгать во время загрузки.
+     * По умолчанию: null.
+     */
+    iconClass?: string;
+    /**
+     * Показывать ли иконку загрузки во время загрузки вместо иконки указанной в свойстве iconClass.
+     * По умолчанию: false.
+     */
+    loading?: boolean;
+    /**
+     * Пользовательский класс для загрузочной иконки (свойство loading должно быть истинно).
+     * По умолчанию: "dv-ico icon-spin loader-animate".
+     */
+    loadingIconClass?: string;
+    /** Видна ли кнопка. По умолчанию: true. */
+    visible?: boolean;
+    /** Дополнительный класс. */
+    className?: string;
+    /** Событие клика. Оно Вызывается также при нажатии клавиш Enter или Space (пробел), когда кнопка находится в фокусе. */
+    onClick?: (ev: React.MouseEvent<any>) => void;
+    /** Флаг, указывающий на то, что событие нажатия на кнопку мыши сработает в обработчике событий onClick (по умолчанию в onMouseUp) */
+    eventOnClick?: boolean;
+    /** Обработчик нажатия клавиши. */
+    onKeyDown?: (ev?: any) => void;
+    /** Вызывается при получении кнопкой фокуса. */
+    onFocus?: (ev?: any) => void;
+    /** Вызывается при потери кнопкой фокуса. */
+    onBlur?: (ev?: any) => void;
+    /**
+     * Должна ли кнопка иметь ширину 100% или нет.
+     * По умолчанию: true.
+     */
+    stretchWidth?: boolean;
+    /** Всплывающая подсказка. */
+    title?: string;
+    /**
+     * Отображать кнопку с указанным стилем Primary.
+     * По умолчанию: false
+     */
+    primaryButton?: boolean;
+    /**
+     * Как текст кнопки и её иконка должны быть выровнены.
+     * По умолчанию: ButtonAlignModes.Center
+     */
+    align?: ButtonAlignModes;
+    /** Значение свойства TabIndex для навигации по клавише Tab. */
+    tabIndex?: number;
+    /** Содержимое кнопки (может быть использовано вместо свойства text). */
+    children?: any;
+    /** Поддержка для присоединения к корневому элементу. */
+    attach?: (instance: HTMLElement) => any;
+    /** Значение атрибута data-button-name для автотестирования. */
+    name?: string;
+    /**
+     * Выключена ли конпка или включена.
+     * Если кнопка выключена, то она будет иметь особый внешний вид и событие onClick не будет вызываться.
+     * По умолчанию: false.
+     */
+    disabled?: boolean;
+    /**
+     * Цвет кнопки (переписывает цвет, установленный в соответсвии сосвойством primaryButton
+     * при необходимости, например, для кнопок завершения задания)
+     */
+    backgroundColor?: string;
+    /** Цвет текста кнопки. */
+    textColor?: string;
+}
+/** @internal Режимы выравнивания кнопки. */
+export declare enum ButtonAlignModes {
+    Center = 0,
+    Left = 1
+}
+/** @internal Представляет собой кнопку с иконкой. */
+export declare const Button: (props: IButtonProperties) => JSX.Element;

package/Helpers/Button.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: (props: 
+import("./Button").IButtonProperties) => JSX.Element;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/Helpers/ComandBarButton.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/** @internal Свойства для {@link CommandBarButton} */
+export interface ICommandBarButtonProps {
+    /**
+     * Предполагается, что по умолчанию expanded = false. В этом случае кнопка выглядит как "+".
+     * При изменении значения на true инициируется анимация поворота и кнопка превращается в "x".
+     */
+    expanded?: boolean;
+    /** При нажатии на кнопку. В большинстве случаев, свойство expanded меняется именно в этом обработчике. */
+    onClick(event: React.MouseEvent): void;
+    /** Дополнительный класс. */
+    className?: string;
+    /** Видна ли кнопка */
+    visible?: boolean;
+    /** значение атрибута data-button-name для автотестирования. */
+    name?: string;
+    /** Всплывающая подсказка. */
+    title?: string;
+    /** TabIndex элемента */
+    tabIndex?: number;
+    /** Класс иконки. */
+    iconClassName?: string;
+}
+/**
+ * @internal Представляет собой анимированную кнопку, которая выглядит как знак "+" в свёрнутом состоянии, и как "x" в развёрнутом.
+ *
+ * Смотрите также: {@link CommandBarHelper}.
+ */
+export declare const CommandBarButton: (props: ICommandBarButtonProps) => JSX.Element;

package/Helpers/ComboBox/ComboBoxBody.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+/** @internal Свойства для {@link ComboBoxBody} */
+export interface IComboBoxBodyProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Выключен ли комбобокс */
+    disabled?: boolean;
+    /** Раскрыт ли выпадающий список элементов или нет */
+    expanded: boolean;
+    /** Используется при закрытии по клику мышкой снаружи, разрешает клики внутри переданного контейнера (по умолчанию - корень этого компонента) */
+    boundaryTarget?: HTMLElement | string;
+    /** При закрытии выпадающего списка */
+    onClose?: () => void;
+}
+/**
+ * @internal Тело комбобокса.
+ * Пример использования см. в {@link ComboBoxWrapper}
+ */
+export declare class ComboBoxBody extends React.Component<IComboBoxBodyProps, undefined> {
+    onClose: () => void;
+    render(): JSX.Element;
+}

package/Helpers/ComboBox/ComboBoxElement.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+/** @internal Свойства для {@link ComboBoxElement} */
+export interface IComboBoxElementProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Включен ли TabIndex у элемента */
+    tabIndex?: boolean;
+    /** Выключен ли элемент */
+    disabled?: boolean;
+    /** Выбран ли элемент */
+    selected?: boolean;
+    /** Имеет ли элемент фокус в данный момент */
+    focused?: boolean;
+    /** При нажатии на элемент */
+    onMouseDown?: Function;
+    /** При выборе элемента */
+    onSelect?: () => void;
+    /** При фокусе элемента */
+    onFocus?: (event: React.FocusEvent<any>) => void;
+    /** При снятии фокуса элемента */
+    onBlur?: (event: React.FocusEvent<any>) => void;
+    /** При передачи фокуса следующему элементу */
+    onFocusNext?: () => void;
+    /** При передачи фокуса предыдущему элементу */
+    onFocusPrev?: () => void;
+    /** Идентификатор */
+    id?: string;
+}
+/**
+ * @internal Элемент выпадающего списка комбобокса.
+ * Пример использования см. в {@link ComboBoxWrapper}
+ */
+export declare class ComboBoxElement extends React.Component<IComboBoxElementProps, undefined> {
+    /**
+     * Узел элемента
+     */
+    el: HTMLElement;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: IComboBoxElementProps): void;
+    /**
+     * При выборе элемента
+     */
+    protected onSelect: () => void;
+    protected onKeyDown: (e: React.KeyboardEvent<any>) => void;
+    get tabIndex(): -1 | 0;
+    /**
+     * Фокусирует элемент
+     */
+    focus: () => void;
+    private onMouseDown;
+    render(): JSX.Element;
+}

package/Helpers/ComboBox/ComboBoxHelper.d.ts

@@ -0,0 +1,31 @@
+import { IComboBoxElement } from "@docsvision/webclient/Helpers/ComboBox/Data/ClientModels/IComboBoxElement";
+/** @internal Информация о сброшенном элементе. См. {@link ComboBoxHelper} */
+export interface IResetedElement {
+    wasReset: boolean;
+    element: IComboBoxElement;
+}
+/**
+ * @internal Хелпер со вспомогательными функциями для пользователских реализаций комбобокса
+ */
+export declare class ComboBoxHelper {
+    /**
+     * Сбрасывает элемент, если он не существует в списке элементов
+     * @param element Текущий элемент
+     * @param elements Список элементов
+     * @param allowEmpty Разрешить ли выбирать пустой элемент
+     * @param emptyElement Пустой элемент для значения null
+     */
+    static resetElementIfNotExists(element: IComboBoxElement, elements: IComboBoxElement[], allowEmpty?: boolean, emptyElement?: IComboBoxElement): IResetedElement;
+    /**
+     * Возвращает элемент по умолчанию для сброса значения
+     * @param elements Список элементов
+     * @param allowEmpty Разрешить ли выбирать пустой элемент
+     * @param emptyElement Пустой элемент для значения null
+     */
+    static resetElement(elements: IComboBoxElement[], allowEmpty?: boolean, emptyElement?: IComboBoxElement): IComboBoxElement;
+    /**
+     * Создаёт пустой элемент для значения null
+     * @param defaultTitle Заголовок по умолчанию
+     */
+    static createEmptyElement: (defaultTitle?: string) => IComboBoxElement;
+}

package/Helpers/ComboBox/ComboBoxTitle.d.ts

@@ -0,0 +1,38 @@
+import { HandleTabSelection } from "@docsvision/webclient/System/HandleTabSelection";
+import React from "react";
+/** @internal Свойства для {@link ComboBoxTitle} */
+export interface IComboBoxTitleProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Выключен ли комбобокс */
+    disabled?: boolean;
+    /** Включен ли TabIndex у заголовка */
+    tabIndex?: boolean;
+    /** Раскрыт ли выпадающий список элементов или нет */
+    expanded?: boolean;
+    /** При клике на заголовок */
+    onClick?: () => void;
+    /** При фокусе заголовка */
+    onFocus?: (event: React.FocusEvent<any>) => void;
+    /** При снятии фокуса у заголовка */
+    onBlur?: (event: React.FocusEvent<any>) => void;
+}
+/**
+ * @internal Заголовок комбобокса.
+ * Пример использования см. в {@link ComboBoxWrapper}
+ */
+export declare class ComboBoxTitle extends React.Component<IComboBoxTitleProps, undefined> {
+    el: HTMLAnchorElement;
+    tabHandler: HandleTabSelection;
+    /**
+     * При клике на заголовок
+     */
+    protected onClick: () => void;
+    protected onKeyDown: (e: React.KeyboardEvent<any>) => void;
+    /** @internal */
+    get tabIndex(): -1 | 0;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /** @internal */
+    render(): JSX.Element;
+}

package/Helpers/ComboBox/ComboBoxWrapper.d.ts

@@ -0,0 +1,107 @@
+import React from "react";
+/** @internal Свойства для {@link ComboBoxWrapper} */
+export interface IComboBoxWrapperProps {
+    /** Дополнительный класс */
+    className?: string;
+    /** Выключен ли комбобокс */
+    disabled?: boolean;
+}
+/**
+ * @review
+ * Обёртка для комбобокса (для комбобоксов существует готовая реализация для общих случаев - {@link CommonComboBox}).
+ *
+ * Пример использования:
+ *
+ *     constructor() {
+ *         this.defaultTitle = 'Выберите элемент';
+ *         this.el = null;
+ *         this.emptyElement = {id: null, title: this.defaultTitle};
+ *         this.focusedElement = null;
+ *
+ *         this.state.disabled = false;
+ *         this.state.expanded = false;
+ *         this.state.selectedElement = '2222';
+ *         this.state.emptyAllowed = true;
+ *         this.state.elements = [{id: '1111', title: 'Один'}, {id: '2222', title: 'Два'}];
+ *     }
+ *
+ *
+ *     protected onFocusElement = (element) => this.focusedElement = element;
+ *
+ *     protected onBlurElement = (element) => (this.focusedElement && this.focusedElement.id == element.id) && (this.focusedElement = null);
+ *
+ *     // навигация по стрелочкам
+ *     protected onFocusSiblingElement = (element, mode: 'prev' | 'next') => {
+ *         let elementPosition = this.state.elements.findIndex(el => el.id == element.id);
+ *         if (elementPosition == -1 && !(this.state.emptyAllowed && element.id == null)) {
+ *             return;
+ *         }
+ *
+ *         elementPosition += (mode == 'prev') ? -1 : 1;
+ *
+ *         const siblingElement = (this.state.emptyAllowed && elementPosition == -1) ?
+ *             this.emptyElement :
+ *             this.state.elements[elementPosition];
+ *
+ *         if (siblingElement && (!this.focusedElement || this.focusedElement.id != siblingElement.id)) {
+ *             this.focusedElement = siblingElement;
+ *             this.forceUpdate();
+ *         }
+ *     }
+ *
+ *     render() {
+ *         const title = <ComboBoxTitle disabled={this.state.disabled}
+ *             expanded={this.state.expanded}
+ *             tabIndex
+ *             onClick={() => this.setState(prevState => ({ expanded: !prevState.expanded }))}>
+ *             <ComboBoxTitleContent>
+ *                 {this.state.elements[this.state.selectedElement] ? this.state.elements[this.state.selectedElement].title : this.defaultTitle}
+ *             </ComboBoxTitleContent>
+ *         </ComboBoxTitle>;
+ *
+ *         const body = <ComboBoxBody disabled={this.state.disabled}
+ *             expanded={this.state.expanded}
+ *             onClose={() => this.setState({ expanded: false })}
+ *             boundaryTarget={this.el}>
+ *             <Focusable selectorToFocus='.combobox-element-helper-selected'>
+ *                 <ComboBoxBodyContent>
+ *                     {this.state.emptyAllowed && <ComboBoxElement tabIndex
+ *                         selected={this.state.selectedElement == null}
+ *                         focused={this.focusedElement && this.focusedElement.id == null}
+ *                         onSelect={() => this.setState({ selectedElement: null, expanded: false })}
+ *                         onFocus={() => this.onFocusElement(this.emptyElement)}
+ *                         onBlur={() => this.onBlurElement(this.emptyElement)}
+ *                         onFocusNext={() => this.onFocusSiblingElement(this.emptyElement, 'next')}
+ *                         onFocusPrev={() => this.onFocusSiblingElement(this.emptyElement, 'prev')}>
+ *                             <ComboBoxElementContent>{this.defaultTitle}</ComboBoxElementContent>
+ *                     </ComboBoxElement>}
+ *
+ *                     {this.state.elements.map((element) => {
+ *                         return <ComboBoxElement key={element.id}
+ *                             tabIndex
+ *                             selected={element.id == this.state.selectedElement}
+ *                             focused={this.focusedElement && this.focusedElement.id == element.id}
+ *                             onSelect={() => this.setState({ selectedElement: element.id, expanded: false })}
+ *                             onFocus={() => this.onFocusElement(element)}
+ *                             onBlur={() => this.onBlurElement(element)}
+ *                             onFocusNext={() => this.onFocusSiblingElement(element, 'next')}
+ *                             onFocusPrev={() => this.onFocusSiblingElement(element, 'prev')}>
+ *                                 <ComboBoxElementContent>{element.title}</ComboBoxElementContent>
+ *                         </ComboBoxElement>;
+ *                     })}
+ *                 </ComboBoxBodyContent>
+ *             </Focusable>
+ *         </ComboBoxBody>;
+ *
+ *         return <div ref={el => this.el = el}>
+ *             <ComboBoxWrapper disabled={this.state.disabled}>
+ *                 <ComboBoxWrapperContent title={title} body={body}>
+ *             </ComboBoxWrapper>
+ *         </div>
+ *     }
+ *
+ */
+export declare class ComboBoxWrapper extends React.Component<IComboBoxWrapperProps, undefined> {
+    /** @internal */
+    render(): JSX.Element;
+}

package/Helpers/ComboBox/CommonComboBox.d.ts

@@ -0,0 +1,122 @@
+import { IComboBoxElement } from "@docsvision/webclient/Helpers/ComboBox/Data/ClientModels/IComboBoxElement";
+import React from "react";
+/** @review Свойства для {@link CommonComboBox}  */
+export interface ICommonComboBoxProps {
+    /** Список элементов (вариантов выбора в выпадающем списке) */
+    elements: IComboBoxElement[];
+    /** ИД выбранного элемента */
+    selectedID?: string;
+    /** Заголовок по умолчанию */
+    defaultTitle?: string;
+    /** Разрешить ли выбирать пустой элемент */
+    allowEmpty?: boolean;
+    strictMode?: boolean;
+    /** Выключен ли комбобокс */
+    disabled?: boolean;
+    /** Раскрыто ли выпадающее меню по умолчанию */
+    expanded?: boolean;
+    /** Включен ли TabIndex у комбобокса */
+    tabIndex?: boolean;
+    /** Дополнительный класс */
+    className?: string;
+    /** При выборе нового элемента */
+    onChange?: (element: IComboBoxElement) => void;
+    /** Пользователская функция, позволяющая отрендерить обёртку */
+    renderWrapper?: (title: React.ReactNode, body: React.ReactNode) => React.ReactNode;
+    /** Пользователская функция, позволяющая отрендерить заголовок */
+    renderTitle?: (element: IComboBoxElement) => React.ReactNode;
+    /** Пользователская функция, позволяющая отрендерить список элементов */
+    renderElementList?: (element: JSX.Element, isOpen: boolean, onClose?: () => void) => React.ReactNode | React.ReactNode[];
+    /** Пользователская функция, позволяющая отрендерить элемент списка */
+    renderElement?: (element: IComboBoxElement, selected: boolean) => React.ReactNode;
+}
+/** @internal */
+export interface ICommonComboBoxState {
+    /** Раскрыт ли выпадающий список элементов или нет */
+    expanded: boolean;
+}
+/**
+ * @review Хелпер для создания комбобокса (позволяет выбирать значение из выпадающего списка)
+ *
+ * Пример использования:
+ *
+ *     constructor() {
+ *         this.state.elements = [
+ *             { id: '1', title: 'Первый элемент' },
+ *             { id: '2', title: 'Второй элемент' },
+ *             { id: '3', title: 'Третий элемент', disabled: true },
+ *             { id: '4', title: 'Четвёртый элемент' }
+ *         ];
+ *         this.state.selectedID = '2';
+ *     }
+ *
+ *     render() {
+ *         return <CommonComboBox elements={this.state.elements}
+ *             allowEmpty={true}
+ *             tabIndex
+ *             selectedID={this.state.selectedID}
+ *             defaultTitle="Выберите элемент из списка"
+ *             onChange={(selectedElement: IComboBoxElement) => {
+ *                 this.setState({ selectedID: selectedElement.id });
+ *             }} />
+ *     }
+ *
+ */
+export declare class CommonComboBox extends React.Component<ICommonComboBoxProps, ICommonComboBoxState> {
+    /**
+     * Корневой узел combobox
+     */
+    el: HTMLElement;
+    /**
+     * Текущий сфокусированный элемент списка
+     */
+    focusedElement: IComboBoxElement;
+    constructor(props: ICommonComboBoxProps);
+    /** @internal */
+    UNSAFE_componentWillMount(): void;
+    /** @internal */
+    UNSAFE_componentWillReceiveProps(nextProps: ICommonComboBoxProps): void;
+    /**
+     * При выборе элемента в выпадающем списке
+     * @param selectedID ИД выбранного элемента
+     */
+    protected onElementSelected: (selectedID: string) => void;
+    /**
+     * Ищет элемент списка по его ИД
+     * @param id ИД элемента
+     * @param disableFallbackToEmptyElement Не создавать пустой элемент, если элемент не найден по ИД
+     * @param props Пользовательские props
+     */
+    protected getElementByID: (id: string, disableFallbackToEmptyElement?: boolean, props?: ICommonComboBoxProps) => IComboBoxElement | null;
+    /**
+     * При фокусе элемента списка
+     * @param element Текущий элемент
+     */
+    protected onFocusElement: (element: IComboBoxElement) => IComboBoxElement;
+    /**
+     * При снятии фокуса у элемента списка
+     * @param element Текущий элемент
+     */
+    protected onBlurElement: (element: IComboBoxElement) => any;
+    /**
+     * При фокусе соседнего элемента в списке (навигация по стрелочкам)
+     * @param element Текущий элемент
+     * @param mode Какой из соседних элементов должен получить фокус (предыдущий или следующий)
+     */
+    protected onFocusSiblingElement: (element: IComboBoxElement, mode: 'prev' | 'next') => void;
+    /**
+     * Создаёт список элементов
+     */
+    protected createElementList(): React.ReactNode[];
+    /**
+     * Рендерит заголовок комбобокса
+     */
+    protected renderTitle(): JSX.Element;
+    protected onClose(): void;
+    /**
+     * Рендерит тело комбобокса
+     */
+    protected renderBody(): JSX.Element;
+    /** @internal */
+    render(): JSX.Element;
+}