@ui5/webcomponents-react/wrappers/components/SelectDialog/index.d.ts

React Wrapper for UI5 Web Components and additional components

import type ListItemBase from '@ui5/webcomponents/dist/ListItemBase.js';
import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
import type { ReactNode } from 'react';
import type { Ui5CustomEvent } from '../../types/index.js';
import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/Button/index.js';
import type { DialogDomRef, DialogPropTypes } from '../../webComponents/Dialog/index.js';
import type { IconDomRef } from '../../webComponents/Icon/index.js';
import type { InputDomRef } from '../../webComponents/Input/index.js';
import type { ListDomRef, ListPropTypes } from '../../webComponents/List/index.js';
import type { ListItemStandardDomRef } from '../../webComponents/ListItemStandard/index.js';
export interface SelectDialogPropTypes extends Omit<DialogPropTypes, 'header' | 'headerText' | 'footer' | 'children' | 'state' | 'accessibleName'>, Pick<ListPropTypes, 'growing' | 'onLoadMore'> {
    /**
     * Defines the accessible name of the component.
     *
     * __Note:__ If not set, the dialog uses the `headerText` for its accessible name.
     *
     * @default undefined
     */
    accessibleName?: DialogPropTypes['accessibleName'];
    /**
     * Defines the list items of the component.
     *
     * __Note:__ Although this prop accepts all HTML Elements and therefore also all list items, it is strongly recommended that you only use `ListItemStandard` in order to preserve the intended design.
     */
    children?: ReactNode | ReactNode[];
    /**
     * This flag controls whether the Clear button is shown. When set to `true`, it provides a way to clear selections. We recommend enabling the Clear button in cases where a mechanism to delete the selection is required: In single selection mode (default mode) or when `rememberSelections` is set to `true`.
     */
    showClearButton?: boolean;
    /**
     * Defines the header text.
     */
    headerText?: string;
    /**
     * Specifies the `headerText` alignment.
     */
    headerTextAlignCenter?: boolean;
    /**
     * Defines the aria-level of the `headerText`.
     * Available options are: `"H1"` to `"H6"`.
     * This property does not influence the style of the `headerText`.
     *
     * @default "H1"
     */
    headerTextLevel?: TitleLevel | keyof typeof TitleLevel;
    /**
     * Overwrites the default text for the confirmation button.
     */
    confirmButtonText?: string;
    /**
     * This flag controls whether the dialog clears the selection after the confirm event has been fired. If the dialog needs to be opened multiple times in the same context to allow for corrections of previous user inputs, set this flag to `true`.
     *
     * __Note:__ This won't work if the dialog is unmounted, if you want to unmount the dialog when closed, you need to persist the selection yourself.
     */
    rememberSelections?: boolean;
    /**
     * Defines the number of selected list items displayed above the list in `MultiSelect` mode. Programmatically setting the counter is necessary if all previously selected elements are to remain selected during search.
     */
    numberOfSelectedItems?: number;
    /**
     * Defines the mode of the SelectDialog list.
     *
     * __Note:__ Although this prop accepts all `ListSelectionMode`s, it is strongly recommended that you only use `Single` or `Multiple` in order to preserve the intended design.
     *
     * @default ListSelectionMode.Single
     */
    selectionMode?: ListPropTypes['selectionMode'];
    /**
     * Defines props you can pass to the internal `List` component.
     *
     * __Note:__ `selectionMode`, `children`, `growing`, `onLoadMore` and `footerText` are not supported.
     *
     * @default {}
     */
    listProps?: Omit<ListPropTypes, 'selectionMode' | 'children' | 'footerText' | 'growing' | 'onLoadMore'>;
    /**
     * Defines the props of the confirm button.
     *
     * __Note:__`onClick` and `design` are not supported.
     *
     * @since 1.25.0
     */
    confirmButtonProps?: Omit<ButtonPropTypes, 'onClick' | 'design'>;
    /**
     *
     * Allows overriding the SearchField's default placeholder text. If not set, the word "Search" in the current local language or English will be used as a placeholder.
     *
     * __Note:__ The placeholder is used as accessible-name of the input for screen reader support.
     *
     * @since 2.23.0
     */
    searchPlaceholder?: string;
    /**
     * This event will be fired when the value of the search field is changed by a user - e.g. at each key press
     */
    onSearchInput?: (event: Ui5CustomEvent<InputDomRef, {
        value: string;
    }>) => void;
    /**
     * This event will be fired when the search button has been clicked or the ENTER key has been pressed in the search field.
     */
    onSearch?: ((event: Ui5CustomEvent<InputDomRef, {
        value: string;
    }>) => void) | ((event: Ui5CustomEvent<IconDomRef, {
        value: string;
    }>) => void);
    /**
     * This event will be fired when the reset button has been clicked in the search field or when the dialog is closed.
     */
    onSearchReset?: (event: Ui5CustomEvent<{
        prevValue: string;
        nativeDetail?: number;
    }>) => void;
    /**
     * This event will be fired when the clear button has been clicked.
     */
    onClear?: (event: Ui5CustomEvent<ButtonDomRef, {
        prevSelectedItems: ListItemStandardDomRef[];
        nativeDetail: number;
    }>) => void;
    /**
     * This event will be fired when the dialog is confirmed by selecting an item in single selection mode or by pressing the confirmation button in multi selection mode.
     */
    onConfirm?: (event: Ui5CustomEvent<ListDomRef | ButtonDomRef, {
        selectedItems: ListItemBase[];
    }>) => void;
    /**
     * This event will be fired when the cancel button is clicked or ESC key is pressed.
     */
    onCancel?: ButtonPropTypes['onClick'] | DialogPropTypes['onBeforeClose'];
}
/**
 * The SelectDialog enables users to filter a comprehensive list via a search field and to select one or more items.
 */
declare const SelectDialog: import("react").ForwardRefExoticComponent<SelectDialogPropTypes & import("react").RefAttributes<DialogDomRef>>;
export { SelectDialog };