@clayui/drop-down/lib/DropDownWithDrilldown.d.ts

ClayDropDown component

/**
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
import { InternalDispatch } from '@clayui/shared';
import React from 'react';
import Menu from './Menu';
import type { AlignPoints } from '@clayui/shared';
import type { Item } from './Items';
import type { IProps as SearchProps } from './Search';
declare type Messages = {
    goTo: string;
    back: string;
};
declare type TriggerElement = React.ReactElement & {
    ref?: (node: HTMLButtonElement | null) => void;
};
export declare type Props = {
    /**
     * Flag to indicate if the menu should be initially open (controlled).
     */
    active?: boolean;
    /**
     * Flag to align the DropDown menu within the viewport.
     */
    alignmentByViewport?: boolean;
    /**
     * Default position of menu element. Values come from above.
     *
     * Align.TopCenter = 0;
     * Align.TopRight = 1;
     * Align.RightCenter = 2;
     * Align.BottomRight = 3;
     * Align.BottomCenter = 4;
     * Align.BottomLeft = 5;
     * Align.LeftCenter = 6;
     * Align.TopLeft = 7;
     *
     * Defaults to BottomLeft
     *
     * You can also pass an array of strings, corresponding to the points
     * of the targetNode and sourceNode, `[sourceNode, targetNode]`.
     *
     * Points can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right).
     * For example: `['tl', 'bl']` corresponds to the bottom left alignment.
     */
    alignmentPosition?: number | AlignPoints;
    /**
     * Informational text that appears at the end or above the `footerContent` prop.
     */
    caption?: string;
    className?: string;
    /**
     * HTML element tag that the container should render.
     */
    containerElement?: React.JSXElementConstructor<any> | 'div' | 'li';
    /**
     * Property to set the initial value of `active` (uncontrolled).
     */
    defaultActive?: boolean;
    /**
     * The unique identifier of the menu that should be active on mount.
     */
    defaultActiveMenu?: string;
    /**
     * Add an action button or any other element you want to be fixed position to the
     * footer from the DropDown.
     */
    footerContent?: React.ReactElement;
    /**
     * The unique identifier of the menu that should be active on mount.
     * @deprecated since v3.51.0 - use `defaultActiveMenu` instead.
     */
    initialActiveMenu?: string;
    /**
     * Prop to pass DOM element attributes to DropDown.Menu.
     */
    menuElementAttrs?: React.HTMLAttributes<HTMLDivElement> & Pick<React.ComponentProps<typeof Menu>, 'containerProps'>;
    /**
     * Adds utility class name `dropdown-menu-height-${height}`
     */
    menuHeight?: 'auto';
    /**
     * The modifier class `dropdown-menu-width-${width}` makes the menu expand
     * the full width of the page.
     *
     * - sm makes the menu 500px wide.
     * - shrink makes the menu auto-adjust to text and max 240px wide.
     * - full makes the menu 100% wide.
     */
    menuWidth?: 'sm' | 'shrink' | 'full';
    /**
     * Messages for drilldown.
     */
    messages?: Messages;
    /**
     * Map of menus and items to be used in the drilldown. Each key should be a unique identifier for the menu.
     */
    menus: {
        [id: string]: Array<Item>;
    };
    /**
     * Function for setting the offset of the menu from the trigger.
     */
    offsetFn?: (points: AlignPoints) => [number, number];
    /**
     * Callback the will be invoked when the active prop is changed (controlled).
     */
    onActiveChange?: InternalDispatch<boolean>;
    /**
     * Path to spritemap
     */
    spritemap?: string;
    /**
     * Flag indicating if the menu should be rendered lazily
     */
    renderMenuOnClick?: boolean;
    /**
     * Element that is used as the trigger which will activate the dropdown on click.
     */
    trigger: TriggerElement;
    /**
     * Flag indicating if the caret icon should be displayed on the right side.
     */
    triggerIcon?: string | null;
    /**
     * Add informational text at the top of DropDown.
     */
    helpText?: string;
    /**
     * Callback will always be called when the user is interacting with search.
     */
    onSearchValueChange?: (newValue: string) => void;
    /**
     * Flag to show search at the top of the DropDown.
     */
    searchable?: boolean;
    /**
     * Pass the props to the Search component.
     */
    searchProps?: SearchProps;
    /**
     * The value that will be passed to the search input element.
     */
    searchValue?: string;
};
export declare const ClayDropDownWithDrilldown: {
    ({ active: externalActive, alignmentByViewport, alignmentPosition, caption, className, containerElement, defaultActive, footerContent, helpText, defaultActiveMenu, initialActiveMenu, menuElementAttrs, menuHeight, menuWidth, menus, messages, offsetFn, onActiveChange, onSearchValueChange, renderMenuOnClick, searchable, searchProps, searchValue, spritemap, trigger, triggerIcon, }: Props): JSX.Element;
    displayName: string;
};
export {};