@sap-ux/ui-components 1.0.0

package/dist/components/UITooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UITooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8CAA4B;AAC5B,mDAAiC"}

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

@@ -0,0 +1,255 @@
+import React from 'react';
+import type { IContextualMenuProps, IContextualMenuItem, IContextualMenuListProps, IRenderFunction, IContextualMenuItemProps, IContextualMenuItemRenderFunctions } from '@fluentui/react';
+import { DirectionalHint } from '@fluentui/react';
+import './UITreeDropdown.scss';
+export { DirectionalHint as UIDirectionalHint };
+export interface ItemsProps {
+    label: string;
+    value: string;
+    children?: ItemsProps[];
+    subMenuProps?: IContextualMenuProps;
+    split?: boolean;
+}
+export interface UITreeDropdownProps {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    items: ItemsProps[];
+    onParameterValueChange(value: string): void;
+    placeholderText: string;
+    valueSeparator?: string;
+    directionalHint?: DirectionalHint;
+    maxWidth?: number;
+    useTargetWidth?: string;
+}
+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 | undefined) => 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 | undefined, defaultRender?: IRenderFunction<IContextualMenuListProps> | undefined) => JSX.Element | null;
+    /**
+     * Handle on/off ContextualMenu.
+     *
+     * @param {boolean} status
+     * @param {React.KeyboardEvent<HTMLInputElement>} event
+     */
+    toggleMenu: (status: boolean, event?: React.KeyboardEvent<HTMLInputElement> | undefined) => 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<Element> | undefined) => 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 | undefined, items?: IContextualMenuItem[], parent?: TreeItemInfo | undefined, 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 | undefined, 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;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UITreeDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UITreeDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/UITreeDropdown/UITreeDropdown.tsx"],"names":[],"mappings":"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"}