@skbkontur/react-ui 5.2.0 → 5.3.0

package/cjs/components/Select/Select.d.ts

@@ -1,197 +1,199 @@
-import type { ReactNode, ReactPortal, AriaAttributes, HTMLAttributes } from 'react';
-import React from 'react';
-import type { ButtonUse } from '../Button';
-import type { Nullable } from '../../typings/utility-types';
-import type { Theme, ThemeIn } from '../../lib/theming/Theme';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { SizeProp } from '../../lib/types/props';
-import { type PopupPositionsType } from '../../internal/Popup';
-import { Item } from './Item';
-export * from './tids';
-export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-expanded'> {
-    /** Делает компонент недоступным. */
-    disabled?: boolean;
-    /** Задает лейбл. */
-    label: React.ReactNode;
-    /** Задает функцию, которая вызывается при клике на селект. */
-    onClick: () => void;
-    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    /** Определяет, открыто ли выпадающее меню. */
-    opened: boolean;
-    /** Определяет, есть ли Placeholder. */
-    isPlaceholder: boolean;
-    /** Задает размер контрола. */
-    size: SizeProp;
-}
-export declare const SelectIds: {
-    readonly menu: "Select__menu";
-};
-type SelectItem<TValue, TItem> = [TValue, TItem, React.ReactNode?] | TItem | TValue | React.ReactElement | (() => React.ReactElement);
-export interface SelectProps<TValue, TItem> extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
-    /** @ignore */
-    _icon?: React.ReactNode;
-    /** @ignore */
-    _renderButton?: (params: ButtonParams) => React.ReactNode;
-    /** @ignore */
-    corners?: React.CSSProperties;
-    /** Задает значение по умолчанию. */
-    defaultValue?: TValue;
-    menuOffset?: number;
-    /** Отключает использование портала. */
-    disablePortal?: boolean;
-    /** Делает компонент недоступным.*/
-    disabled?: boolean;
-    /** Переводит контрол в состояние валидации "ошибка". */
-    error?: boolean;
-    /** Задает функцию, которая отфильтровывает элементы по заданному паттерну. */
-    filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
-    /** Задает набор значений. Поддерживаются любые перечисляемые типы, в том числе `Array`, `Map`, `Immutable.Map`.
-     *
-     * Элементы воспринимаются следующим образом: если элемент — это массив, то первый элемент является значением,
-     * второй — отображается в списке, а третий – комментарий;
-     * если элемент не является массивом, то он используется и для отображения, и для значения.
-     *
-     * Для вставки разделителя можно использовать `Select.SEP`.
-     *
-     * Вставить невыделяемый элемент со своей разметкой можно так:
-     * @example
-     * ```
-     * <Select ...
-     *   items={[Select.staticElement(() => <div>My Element</div>)]}
-     * />
-     * ```
-     *
-     * Чтобы добавить стандартный отступ для статического элемента:
-     * @example
-     * ```
-     * <Select.Item>My Element</Select.Item>
-     * ``` */
-    items?: Array<SelectItem<TValue, TItem>>;
-    /** Задает максимальную высоту меню. */
-    maxMenuHeight?: number;
-    /** Задает максимальную ширину. */
-    maxWidth?: React.CSSProperties['maxWidth'];
-    /** Задает позиции выпадающего меню. */
-    positions?: PopupPositionsType[];
-    /** Задает текущую позицию выпадающего окна вручную. */
-    menuPos?: 'top' | 'bottom' | 'middle';
-    /** Задает выравнивание меню. */
-    menuAlign?: 'left' | 'right';
-    /** Задает ширину выпадающего меню. */
-    menuWidth?: React.CSSProperties['width'];
-    /** Задает функцию, вызывающуюся при изменении value. */
-    onValueChange?: (value: TValue) => void;
-    /** Задает функцию, которая вызывается при закрытии меню. */
-    onClose?: () => void;
-    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */
-    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
-    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
-    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
-    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
-    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
-    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-    /** Задает функцию, которая вызывается при открытии меню. */
-    onOpen?: () => void;
-    /** Задает текст, который отображается если не введено никакое значение. */
-    placeholder?: React.ReactNode;
-    /** Задает функцию, которая отображает элемент в выпадающем списке. */
-    renderItem?: (value: TValue, item?: TItem) => React.ReactNode;
-    /** Задает функцию, которая отображает выбранный элемент. */
-    renderValue?: (value: TValue, item?: TItem) => React.ReactNode;
-    /** Задает функцию сравнения `value` с элементом из `items`. */
-    areValuesEqual?: (value1: TValue, value2: TValue) => boolean;
-    /** Показывает строку поиска в списке. */
-    search?: boolean;
-    /** Задает значение. */
-    value?: TValue;
-    theme?: ThemeIn | Theme;
-    /** Задает длину контрола. */
-    width?: number | string;
-    /** Переводит контрол в состояние валидации "предупреждение". */
-    warning?: boolean;
-    /** Задаёт стиль кнопки. */
-    use?: ButtonUse;
-    /** Задает размер. */
-    size?: SizeProp;
-    /** Задаёт HTML-событие `onfocus`. */
-    onFocus?: React.FocusEventHandler<HTMLElement>;
-    /** Задаёт HTML-событие `onblur`. */
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-    /** Задает текст заголовка выпадающего меню в мобильной версии. */
-    mobileMenuHeaderText?: string;
-}
-export interface SelectState<TValue> {
-    opened: boolean;
-    searchPattern: string;
-    value: Nullable<TValue>;
-}
-type DefaultProps<TValue, TItem> = Required<Pick<SelectProps<TValue, TItem>, 'renderValue' | 'renderItem' | 'areValuesEqual' | 'filterItem' | 'use' | 'size'>>;
-/**
- * Раскрывающийся список `Select` позволяет выбрать значение из заранее известного набора вариантов.
- *
- * Используйте `Select` при:
- * * заполнении форм, например для выбора месяца.
- * * переключении состояний, например, фильтра.
- * * выборе предустановленных настроек, например, частоты уведомлений, часового пояса.
- *
- * Не используйте `Select` для выбора элементов меню. В таком случае воспользуйтесь компонентом Dropdown.
- */
-export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static defaultProps: DefaultProps<unknown, ReactNode | ReactPortal>;
-    static Item: typeof Item;
-    static SEP: () => React.JSX.Element;
-    static staticElement: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
-    state: SelectState<TValue>;
-    private theme;
-    private isMobileLayout;
-    private readonly locale;
-    private menu;
-    private menuId;
-    private buttonElement;
-    private getProps;
-    private setRootNode;
-    componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
-    render(): React.JSX.Element;
-    /**
-     * @public
-     */
-    open: () => void;
-    /**
-     * @public
-     */
-    close: () => void;
-    /**
-     * @public
-     */
-    focus: () => void;
-    private getMenuRenderer;
-    private renderMain;
-    private getDefaultButtonParams;
-    private renderLabel;
-    private getLeftIconClass;
-    private renderDefaultButton;
-    private getSelectIconGap;
-    private renderMenu;
-    private getSearch;
-    private renderMobileMenu;
-    private getMobileSearch;
-    private getMenuItems;
-    private popupGetParent;
-    private focusInput;
-    private debouncedFocusInput;
-    private refMenu;
-    private toggle;
-    private handleKey;
-    private handleSearch;
-    private select;
-    private getValue;
-    private mapItems;
-    private getItemByValue;
-    private areValuesEqual;
-    private buttonRef;
-    private getButton;
-}
+import type { ReactNode, ReactPortal, AriaAttributes, HTMLAttributes } from 'react';
+import React from 'react';
+import type { ButtonUse } from '../Button';
+import type { Nullable } from '../../typings/utility-types';
+import type { Theme, ThemeIn } from '../../lib/theming/Theme';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+import type { SizeProp } from '../../lib/types/props';
+import { type PopupPositionsType } from '../../internal/Popup';
+import { Item } from './Item';
+export * from './tids';
+export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-expanded'> {
+    /** Делает компонент недоступным. */
+    disabled?: boolean;
+    /** Задает лейбл. */
+    label: React.ReactNode;
+    /** Задает функцию, которая вызывается при клике на селект. */
+    onClick: () => void;
+    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    /** Определяет, открыто ли выпадающее меню. */
+    opened: boolean;
+    /** Определяет, есть ли Placeholder. */
+    isPlaceholder: boolean;
+    /** Задает размер контрола. */
+    size: SizeProp;
+}
+export declare const SelectIds: {
+    readonly menu: "Select__menu";
+};
+type SelectItem<TValue, TItem> = [TValue, TItem, React.ReactNode?] | TItem | TValue | React.ReactElement | (() => React.ReactElement);
+export interface SelectProps<TValue, TItem> extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
+    /** @ignore */
+    _icon?: React.ReactNode;
+    /** @ignore */
+    _renderButton?: (params: ButtonParams) => React.ReactNode;
+    /** @ignore */
+    corners?: React.CSSProperties;
+    /** Задает значение по умолчанию. */
+    defaultValue?: TValue;
+    menuOffset?: number;
+    /** Отключает использование портала. */
+    disablePortal?: boolean;
+    /** Делает компонент недоступным.*/
+    disabled?: boolean;
+    /** Переводит контрол в состояние валидации "ошибка". */
+    error?: boolean;
+    /** Задает функцию, которая отфильтровывает элементы по заданному паттерну. */
+    filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
+    /** Задает набор значений. Поддерживаются любые перечисляемые типы, в том числе `Array`, `Map`, `Immutable.Map`.
+     *
+     * Элементы воспринимаются следующим образом: если элемент — это массив, то первый элемент является значением,
+     * второй — отображается в списке, а третий – комментарий;
+     * если элемент не является массивом, то он используется и для отображения, и для значения.
+     *
+     * Для вставки разделителя можно использовать `Select.SEP`.
+     *
+     * Вставить невыделяемый элемент со своей разметкой можно так:
+     * @example
+     * ```
+     * <Select ...
+     *   items={[Select.staticElement(() => <div>My Element</div>)]}
+     * />
+     * ```
+     *
+     * Чтобы добавить стандартный отступ для статического элемента:
+     * @example
+     * ```
+     * <Select.Item>My Element</Select.Item>
+     * ``` */
+    items?: Array<SelectItem<TValue, TItem>>;
+    /** Задает максимальную высоту меню. */
+    maxMenuHeight?: number;
+    /** Задает максимальную ширину. */
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /** Задает позиции выпадающего меню. */
+    positions?: PopupPositionsType[];
+    /** Задает текущую позицию выпадающего окна вручную. */
+    menuPos?: 'top' | 'bottom' | 'middle';
+    /** Задает выравнивание меню. */
+    menuAlign?: 'left' | 'right';
+    /** Задает ширину выпадающего меню. */
+    menuWidth?: React.CSSProperties['width'];
+    /** Задает функцию, вызывающуюся при изменении value. */
+    onValueChange?: (value: TValue) => void;
+    /** Задает функцию, которая вызывается при закрытии меню. */
+    onClose?: () => void;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
+    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при открытии меню. */
+    onOpen?: () => void;
+    /** Задает текст, который отображается если не введено никакое значение. */
+    placeholder?: React.ReactNode;
+    /** Задает функцию, которая отображает элемент в выпадающем списке. */
+    renderItem?: (value: TValue, item?: TItem) => React.ReactNode;
+    /** Задает функцию, которая отображает выбранный элемент. */
+    renderValue?: (value: TValue, item?: TItem) => React.ReactNode;
+    /** Задает функцию сравнения `value` с элементом из `items`. */
+    areValuesEqual?: (value1: TValue, value2: TValue) => boolean;
+    /** Показывает строку поиска в списке. */
+    search?: boolean;
+    /** Задает значение. */
+    value?: TValue;
+    theme?: ThemeIn | Theme;
+    /** Задает длину контрола. */
+    width?: number | string;
+    /** Переводит контрол в состояние валидации "предупреждение". */
+    warning?: boolean;
+    /** Задаёт стиль кнопки. */
+    use?: ButtonUse;
+    /** Задает размер. */
+    size?: SizeProp;
+    /** Задаёт HTML-событие `onfocus`. */
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    /** Задаёт HTML-событие `onblur`. */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    /** Задает текст заголовка выпадающего меню в мобильной версии. */
+    mobileMenuHeaderText?: string;
+}
+export interface SelectState<TValue> {
+    opened: boolean;
+    searchPattern: string;
+    value: Nullable<TValue>;
+}
+type DefaultProps<TValue, TItem> = Required<Pick<SelectProps<TValue, TItem>, 'renderValue' | 'renderItem' | 'areValuesEqual' | 'filterItem' | 'use' | 'size'>>;
+/**
+ * Раскрывающийся список `Select` позволяет выбрать значение из заранее известного набора вариантов.
+ *
+ * Используйте `Select` при:
+ * * заполнении форм, например для выбора месяца.
+ * * переключении состояний, например, фильтра.
+ * * выборе предустановленных настроек, например, частоты уведомлений, часового пояса.
+ *
+ * Не используйте `Select` для выбора элементов меню. В таком случае воспользуйтесь компонентом Dropdown.
+ */
+export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps<unknown, ReactNode | ReactPortal>;
+    static Item: typeof Item;
+    static SEP: () => React.JSX.Element;
+    static staticElement: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
+    state: SelectState<TValue>;
+    private theme;
+    private isMobileLayout;
+    private readonly locale;
+    private menu;
+    private menuId;
+    private buttonElement;
+    private getProps;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
+    render(): React.JSX.Element;
+    /**
+     * @public
+     */
+    open: () => void;
+    /**
+     * @public
+     */
+    close: () => void;
+    /**
+     * @public
+     */
+    focus: () => void;
+    private getMenuRenderer;
+    private renderMain;
+    private getDefaultButtonParams;
+    private renderLabel;
+    private getLeftIconClass;
+    private renderDefaultButton;
+    private getSelectIconGap;
+    private renderMenu;
+    private getSearch;
+    private renderMobileMenu;
+    private getMobileSearch;
+    private getMenuItems;
+    private popupGetParent;
+    private focusInput;
+    private debouncedFocusInput;
+    private refMenu;
+    private toggle;
+    private handleKey;
+    private handleSearch;
+    private select;
+    private getValue;
+    private mapItems;
+    private getItemByValue;
+    private areValuesEqual;
+    private buttonRef;
+    private getButton;
+}

package/cjs/components/Select/Select.js

@@ -327,6 +327,7 @@ Select = exports.Select = (_dec = (0, _decorators.locale)('Select', _locale.Sele
 
 
 
+
 
 
     /**