@sap-ux/ui-components 1.8.2 → 1.8.4

package/dist/components/UITreeDropdown/UITreeDropdown.d.ts

@@ -1,266 +1,266 @@
-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[];
-    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 {
-    hasSelected: boolean;
-    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?;
-    /**
-     * 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=0] 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;
-}
+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[];
+    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 {
+    hasSelected: boolean;
+    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?;
+    /**
+     * 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