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

SAP UI Components Library

import React from 'react';
import type { IContextualMenuProps, IContextualMenuItem, IContextualMenuListProps, IRenderFunction, IContextualMenuItemProps, IContextualMenuItemRenderFunctions } from '@fluentui/react';
import { DirectionalHint } from '@fluentui/react';
import type { UIMessagesExtendedProps } from '../../helper/ValidationMessage';
import './UITreeDropdown.scss';
export { DirectionalHint as UIDirectionalHint };
export interface ItemsProps {
    label: string;
    value: string;
    children?: ItemsProps[];
    subMenuProps?: IContextualMenuProps;
    split?: boolean;
}
export interface UITreeDropdownProps extends UIMessagesExtendedProps {
    label?: string;
    disabled?: boolean;
    required?: boolean;
    value?: string;
    items: ItemsProps[];
    /**
     * Callback function to handle parameter value changes.
     *
     * @param value - The new value of the parameter.
     */
    onParameterValueChange(value: string): void;
    placeholderText: string;
    valueSeparator?: string;
    directionalHint?: DirectionalHint;
    maxWidth?: number;
    useTargetWidth?: string;
    errorMessage?: string;
    readOnly?: boolean;
}
interface TreeItemInfo {
    level: number;
    item: IContextualMenuItem;
    index: number;
    parent?: TreeItemInfo;
}
export interface UITreeDropdownState {
    originalItems: IContextualMenuItem[];
    isHidden: boolean;
    value?: string;
    query: string;
    items: IContextualMenuItem[];
    valueSeparator: string;
    uiidInput: string;
    isDisabled: boolean;
    isMenuOpen: boolean;
    valueChanged: boolean;
}
export declare enum EdgePosition {
    First = "First",
    Last = "Last"
}
/**
 * UITreeDropdown component.
 *
 * @exports
 * @class UIVerticalDivider
 * @extends {React.Component<UITreeDropdownProps, UITreeDropdownState>}
 */
export declare class UITreeDropdown extends React.Component<UITreeDropdownProps, UITreeDropdownState> {
    private readonly UITreeDropdownRef;
    private readonly UITreeDropdownFocusZoneRef;
    private inputRef;
    private submenuRefs;
    private defaultSubmenuFocus?;
    private submenuOffset;
    private lastKeyDown;
    private originalValue?;
    private hasSelected;
    /**
     * Initializes component properties.
     *
     * @param {UITreeDropdownProps} props
     */
    constructor(props: UITreeDropdownProps);
    componentDidMount: () => void;
    componentDidUpdate: (prevProps: UITreeDropdownProps) => void;
    /**
     * Map the payload.
     *
     * @param {ItemsProps[]} items
     */
    buildItems: (items: ItemsProps[]) => void;
    /**
     * Sub items values and style.
     *
     * @param {ItemsProps} item
     * @returns {ItemsProps}
     */
    buildSubItems: (item: ItemsProps) => ItemsProps;
    /**
     * Map GD payload to ContextMenu payload.
     *
     * @param {ItemsProps[]} items
     * @param {number} level
     * @returns {IContextualMenuItem[]}
     */
    mapValuesToContextMenu: (items: ItemsProps[], level?: number) => IContextualMenuItem[];
    /**
     * Handle the selected value.
     *
     * @param {string} value
     */
    handleSelection: (value: string) => void;
    /**
     * Handle the keypress value.
     *
     * @param {React.KeyboardEvent<HTMLInputElement>} event
     */
    handleKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * Handle ContextMenu focus.
     *
     * @param {React.KeyboardEvent<HTMLInputElement>} event
     * @param {string} key
     */
    focusDropdown: (event: React.KeyboardEvent<HTMLInputElement>, key?: string) => void;
    /**
     * Custom handle the render from subMenu to control the highlight and the .is-selected.
     *
     * @param {IContextualMenuListProps} props
     * @param {IContextualMenuItemRenderFunctions} defaultRenders
     * @returns { React.ReactNode | null}
     */
    handleRenderContent: (props: IContextualMenuItemProps, defaultRenders: IContextualMenuItemRenderFunctions) => React.ReactNode | null;
    /**
     * Custom handle the render to control the highlight and the .is-selected.
     *
     * @param {IContextualMenuListProps} props
     * @param {IRenderFunction<IContextualMenuListProps>} defaultRender
     * @returns {JSX.Element | null}
     */
    handleRenderMenuList: (props?: IContextualMenuListProps, defaultRender?: IRenderFunction<IContextualMenuListProps>) => JSX.Element | null;
    /**
     * Handle on/off ContextualMenu.
     *
     * @param {boolean} status
     * @param {React.KeyboardEvent<HTMLInputElement>} event
     */
    toggleMenu: (status: boolean, event?: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * Highlight the search string.
     *
     * @param {string} text
     * @param {string} query
     * @returns {JSX.Element}
     */
    highlightQuery: (text: string, query: string) => JSX.Element;
    /**
     * Filter all options that match the query string.
     *
     * @param {string} input
     * @param {IContextualMenuItem} item
     * @returns {boolean}
     */
    filterElement: (input: string, item: IContextualMenuItem) => boolean;
    /**
     * Update the query string and the prop value.
     *
     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} event
     */
    handleOnChangeValue: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    /**
     * Method resets value of dropdown input to original value, which was stored after open.
     */
    resetValue(): void;
    /**
     * Method reset states.
     *
     * @param {Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent} event
     */
    handleDismiss: (event?: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent) => void;
    /**
     * Method applies additional styling for submnu callout.
     * It is used to apply scroll width offset - in result submenu should be displayed on the edge of root menu.
     *
     * @param {IContextualMenuItem} item Context menu item.
     */
    applySubmenuPosition: (item: IContextualMenuItem) => void;
    getCalloutDomRef: (submenu?: boolean) => HTMLDivElement | null;
    /**
     * Method calculates offset size for submenus.
     * Calculated offset should be used to position submenu right to edge of root menu.
     *  - Detects if scrollbar exists.
     *  - Calculates size of scrollbar and stores it as value for offset.
     */
    calculateSubmenuOffset: () => void;
    /**
     * Method updates state, if focus visible, using arrow keys.
     *
     * @param {HTMLElement|React.FocusEvent<HTMLElement>} ev
     */
    onFocusElementChanged: (ev: any) => void;
    /**
     * Method handles window keydown event.
     * 1. Stores last keyboard pressed event.
     * 2. Disables CircularNavigation for menus.
     *
     * @param {KeyboardEvent | React.KeyboardEvent<HTMLInputElement>} event
     */
    onWindowKeyDown: (event: KeyboardEvent | React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * Method handles focus logic if arrow key was pressed.
     *
     * @param {FocusEvent} event
     */
    handleCustomDownKey: (event: FocusEvent) => void;
    /**
     * Method appends custom keydown and focus event listeners when context menu is opened.
     */
    applyCustomKeyDownHandlingEvents: () => void;
    /**
     * Method removes custom keydown and focus event listeners when context menu is dismissed.
     */
    removeCustomKeyDownHandlingEvents: () => void;
    /**
     * Method receives any menu child element and returns edge positions if item is first or last in rendered menu.
     *
     * @param {Element} itemElement Item's DOM to check position.
     * @returns {EdgePosition[]} Returns positions if element is first or last in menu - also can be both.
     */
    getEdgePosition: (itemElement: Element) => EdgePosition[];
    /**
     * Recursive method finds menu item info object in tree menu items by passed value/key of item.
     *
     * @param {string} [value] Value/key of item.
     * @param {IContextualMenuItem[]} [items] Menu items.
     * @param {TreeItemInfo} [parent] Item's parent object.
     * @param {number} [level] Level of item in tree structure.
     * @returns {TreeItemInfo | undefined} Found menu item.
     */
    findItemByValue: (value?: string, items?: IContextualMenuItem[], parent?: TreeItemInfo, level?: number) => TreeItemInfo | undefined;
    /**
     * Method finds DOM node of menu item based on received item object and container DOM.
     *
     * @param {HTMLElement} container Menu container DOM.
     * @param {TreeItemInfo} item Menu item info object.
     * @returns {HTMLElement | undefined} Found DOM element of item.
     */
    getItemTarget: (container: HTMLElement, item: TreeItemInfo) => HTMLElement | undefined;
    /**
     * Method focuses context menu item based on recieved value/key and menude data(items and hoisted object).
     * Method works with any level menu.
     *
     * @param {string} [value] Value/key of item.
     * @param {IContextualMenuItem[]} [items] Target menu items.
     */
    focusItemWithValue: (value?: string, items?: IContextualMenuItem[]) => void;
    /**
     * Generate unique id for menu component references.
     *
     * @param {string} value Value of item.
     * @param {number} level Level of item in tree structure.
     * @returns {string} Id containing value andf level in format "${value}__${level}".
     */
    getRefId: (value: string, level: number) => string;
    /**
     * Method returns class names for wrapper element depending on props and component state.
     *
     * @returns {string} Class names of wrapper element.
     */
    private getClassNames;
    /**
     * @returns {JSX.Element}
     */
    render(): JSX.Element;
}
//# sourceMappingURL=UITreeDropdown.d.ts.map