react-elegant-ui/esm/components/Menu/Menu.d.ts

Elegant UI components, made by BEM best practices for react

import { FC, HTMLAttributes, ReactNode, Ref } from 'react';
import { IComponentHTMLElement, IComponentWithAddonNodes } from '../../types/IComponent';
import './Menu.css';
export type MenuItem = {
    /**
     * Value of item
     */
    id: string;
    /**
     * Disable state of item
     */
    disabled?: boolean;
    /**
     * It's work as `disabled`, but also don't show item
     */
    hidden?: boolean;
    raw?: boolean;
    addonProps?: HTMLAttributes<HTMLElement>;
} & ({
    /**
     * Text content of item
     */
    content: string;
} | {
    /**
     * Complexity content of item
     */
    content: ReactNode;
    /**
     * Text content of item
     *
     * It used for present for user
     */
    textContent: string;
});
export type MenuGroup = {
    /**
     * Title of group
     */
    title?: string;
    /**
     * Item list
     */
    items: (MenuItem | MenuGroup)[];
    /**
     * Don't show group
     */
    hidden?: boolean;
};
export type MenuMixedItem = MenuItem | MenuGroup;
export interface IMenuProps<T extends HTMLElement = HTMLDivElement> extends IComponentHTMLElement<T>, IComponentWithAddonNodes {
    /**
     * Item list
     */
    items: MenuMixedItem[];
    /**
     * Handler for item pick
     */
    onPick?: (id: string, index: number) => void;
    disabled?: boolean;
    /**
     * Define render hidden items with mod `hidden` or ignore
     */
    isRenderHidden?: boolean;
    /**
     * Menu navigation is active by focuse
     */
    isFocused?: boolean;
    /**
     * Hook for update `isFocused`
     */
    setFocus?: (isFocused: boolean) => void;
    /**
     * Absolute index of focused item
     *
     * Under absolute meaning index from flatten item list
     */
    cursorIndex?: number;
    /**
     * Hook for update `cursorIndex`
     */
    setCursorIndex?: (index: number) => void;
    /**
     * Ref to hovered item
     */
    cursorRef?: Ref<T>;
    /**
     * Ref to hovered item id attribute
     *
     * It useful to use in "aria" attributes, for example in `aria-activedescendant`
     */
    cursorIdRef?: Ref<string | null>;
}
export declare const isGroup: (item: MenuMixedItem) => item is MenuGroup;
export declare const getTextOfItem: (item: MenuItem) => string;
export declare const isAvailableItem: (item?: MenuItem) => item is MenuItem;
/**
 * Return flat item array
 * @param isRemoveHiddenGroups while `true` ignore items from hidden groups
 */
export declare const flattenItems: (items: readonly MenuMixedItem[], isRemoveHiddenGroups?: boolean) => MenuItem[];
/**
 * Return flat item array without items from hidden groups
 */
export declare const flattenItemsWithoutEmptyGroups: (items: readonly MenuMixedItem[]) => MenuItem[];
export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
export declare const Menu: FC<IMenuProps>;