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

ClayDropDown component

/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
import React from 'react';
import Menu from './Menu';
import type { AlignPoints, InternalDispatch } from '@clayui/shared';
interface IProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement | HTMLLIElement>, 'children'> {
    /**
     * Children content to render a dynamic or static content.
     */
    children: React.ReactNode | ((item: T, index?: number) => React.ReactElement);
    /**
     * Property to render content with dynamic data.
     */
    items?: Array<T>;
    /**
     * Flag to indicate if the DropDown menu is active or not (controlled).
     *
     * This API is generally used in conjunction with `closeOnClickOutside=true`
     * since often we are controlling the active state by clicking another element
     * within the document.
     */
    active?: boolean;
    /**
     * Flag to align the DropDown menu within the viewport.
     */
    alignmentByViewport?: boolean;
    /**
     * Default position of menu element. Values come from `./Menu`.
     */
    alignmentPosition?: number | AlignPoints;
    /**
     * HTML element tag that the container should render.
     */
    containerElement?: React.JSXElementConstructor<any> | 'div' | 'li';
    /**
     * Flag that indicates whether to close DropDown when clicking on the item.
     */
    closeOnClick?: boolean;
    closeOnClickOutside?: boolean;
    /**
     *  Property to set the default value of `active` (uncontrolled).
     */
    defaultActive?: boolean;
    /**
     * Defines the name of the property key that is used in the items filter
     * test (Dynamic content).
     */
    filterKey?: string;
    /**
     * Flag to indicate if menu contains icon symbols on the right side.
     */
    hasRightSymbols?: boolean;
    /**
     * Flag to indicate if menu contains icon symbols on the left side.
     */
    hasLeftSymbols?: boolean;
    /**
     * 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';
    /**
     * Callback for when the active state changes (controlled).
     *
     * This API is generally used in conjunction with `closeOnClickOutside=true`
     * since often we are controlling the active state by clicking another element
     * within the document.
     */
    onActiveChange?: InternalDispatch<boolean>;
    /**
     * Function for setting the offset of the menu from the trigger.
     */
    offsetFn?: (points: AlignPoints) => [number, number];
    /**
     * Flag indicating if the menu should be rendered lazily
     */
    renderMenuOnClick?: boolean;
    /**
     * Flag indicating if the caret icon should be displayed on the right side.
     */
    triggerIcon?: string | null;
    /**
     * Element that is used as the trigger which will activate the dropdown on click.
     */
    trigger: React.ReactElement & {
        ref?: (node: HTMLButtonElement | null) => void;
    };
}
declare function DropDown<T>({ active, alignmentByViewport, alignmentPosition, children, className, closeOnClick, closeOnClickOutside, containerElement: ContainerElement, defaultActive, filterKey, hasLeftSymbols, hasRightSymbols, items, menuElementAttrs, menuHeight, menuWidth, offsetFn, onActiveChange, renderMenuOnClick, role, trigger, triggerIcon, ...otherProps }: IProps<T>): JSX.Element;
declare namespace DropDown {
    var Action: ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
    var Caption: ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
    var Divider: () => JSX.Element;
    var Group: typeof import("./Group").default;
    var Help: ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
    var Menu: React.ForwardRefExoticComponent<import("./Menu").IProps & React.RefAttributes<HTMLDivElement>>;
    var Item: React.ForwardRefExoticComponent<import("./Item").IProps & React.RefAttributes<HTMLLIElement>>;
    var ItemList: React.ForwardRefExoticComponent<import("./ItemList").IProps<unknown> & React.RefAttributes<HTMLUListElement>>;
    var Search: ({ className, defaultValue, formProps, onChange, spritemap, submitProps, value: valueProp, ...otherProps }: import("./Search").IProps) => JSX.Element;
    var Section: React.ForwardRefExoticComponent<import("./Section").IProps & React.RefAttributes<HTMLLIElement>>;
}
export default DropDown;