@sap-ux/ui-components/dist/components/UIDropdown/UIDropdown.d.ts

SAP UI Components Library

import React from 'react';
import type { IDropdownProps, ICalloutContentStyleProps, ICalloutContentStyles, IDropdownOption } from '@fluentui/react';
import { DropdownMenuItemType } from '@fluentui/react';
import type { UIMessagesExtendedProps } from '../../helper/ValidationMessage/index.js';
import './UIDropdown.scss';
export type { IDropdownOption as UIDropdownOption } from '@fluentui/react';
export { DropdownMenuItemType as UIDropdownMenuItemType };
export interface UIDropdownProps extends IDropdownProps, UIMessagesExtendedProps {
    /**
     * An optional callback function to handle change.
     *
     * @param option - The selected option.
     * @param index - The index of the selected option.
     */
    onHandleChange?(option: IDropdownOption, index: number): void;
    /**
     * An optional callback function to handle open event.
     */
    onHandleOpen?(): void;
    /**
     * An optional callback function to render the title of the dropdown.
     *
     * @param items - The options of the dropdown.
     * @returns The JSX element representing the title.
     */
    onHandleRenderTitle?(items: IDropdownOption[] | undefined): JSX.Element;
    useDropdownAsMenuMinWidth?: boolean;
    readOnly?: boolean;
    calloutCollisionTransformation?: boolean;
}
export interface UIDropdownState {
    options: IDropdownOption[];
    isOpen: boolean;
}
/**
 * UIDropdown component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
 *
 * @exports
 * @class UIDropdown
 * @extends {React.Component<UIDropdownProps, UIDropdownState>}
 */
export declare class UIDropdown extends React.Component<UIDropdownProps, UIDropdownState> {
    private readonly dropdownDomRef;
    private readonly menuDomRef;
    private readonly calloutCollisionTransform;
    /**
     * Initializes component properties.
     *
     * @param {UIDropdownProps} props
     */
    constructor(props: UIDropdownProps);
    onRenderCaretDown: () => JSX.Element;
    onRenderTitle: (items: IDropdownOption[] | undefined) => JSX.Element;
    onClick: () => void;
    onChange: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
    /**
     * Method stops event propagation.
     *
     * @param {React.MouseEvent<HTMLDivElement>} event Mouse event.
     */
    stopEventPropagation: (event: React.MouseEvent<HTMLDivElement>) => void;
    /**
     * Method used as workaround to separate focus and hover.
     * Default behaviour of fluent ui is that focus follows hover, but we need separe them.
     *
     * @param {IDropdownOption} [props] Dropdown props.
     * @param {(props?: IDropdownOption) => JSX.Element | null} [defaultRender] Default option renderer.
     * @returns {JSX.Element | null} Returns dropdown option element.
     */
    private readonly _onRenderOption;
    /**
     * Render dropdown menu option.
     *
     * @param {IDropdownOption} [props] Dropdown props.
     * @param {(props?: IDropdownOption) => JSX.Element | null} [defaultRender] Default option renderer.
     * @returns {JSX.Element | null} Returns dropdown option element.
     */
    private readonly onRenderOption;
    /**
     * Method called on combobox item render.
     * We should pass query to it and avoid rendering if it is hidden.
     *
     * @param {IComboBoxOption} props Combobox item props.
     * @param {Function} defaultRender Combobox item default renderer.
     * @returns {JSX.Element | null} Element to render.
     */
    private readonly _onRenderItem;
    /**
     * Render dropdown menu item.
     *
     * @param {IComboBoxOption} props Combobox item props.
     * @param {Function} defaultRender Combobox item default renderer.
     * @returns {JSX.Element | null} Element to render.
     */
    private readonly onRenderItem;
    /**
     * Method returns styles for callout to support property 'useDropdownAsMenuMinWidth'.
     * States:
     * 1. Min width of callout is equals to width of droipdown input box;
     * 2. Max width equals to windows size minus 10px;
     * 3. Width is auto - it allows to make callout wider if menu option size exceeds size of dropdown input(min-width).
     *
     * @param {ICalloutContentStyleProps} calloutStyleProps Current callout styles.
     * @returns {Partial<ICalloutContentStyles>} Styles for callout.
     */
    getCalloutStylesForUseAsMinWidth(calloutStyleProps: ICalloutContentStyleProps): Partial<ICalloutContentStyles>;
    /**
     * Method returns class names string depending on props and component state.
     *
     * @param {InputValidationMessageInfo} messageInfo Error/warning message if applied
     * @returns {string} Class names of root dropdown element.
     */
    private getClassNames;
    /**
     * Method returns additional component properties for accessibility.
     *
     * @returns {AccessibilityProps} Additional properties.
     */
    private getAccessibilityProps;
    /**
     * @returns {JSX.Element}
     */
    render(): JSX.Element;
}
//# sourceMappingURL=UIDropdown.d.ts.map