/**
 * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */
import React from 'react';
import ClayDropDown from './DropDown';
import Menu from './Menu';
import type { AlignPoints, InternalDispatch } from '@clayui/shared';
import type { Item } from './Items';
import type { IProps as SearchProps } from './Search';
export declare type Props = {
    /**
     * Flag to indicate if the DropDown menu is active or not (controlled).
     */
    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;
    /**
     * Informational text that appears at the end or above the `footerContent` prop.
     */
    caption?: string;
    className?: string;
    closeOnClickOutside?: boolean;
    /**
     * HTML element tag that the container should render.
     */
    containerElement?: React.ComponentProps<typeof ClayDropDown>['containerElement'];
    /**
     * Property to set the initial value of `active` (uncontrolled).
     */
    defaultActive?: boolean;
    /**
     * Add an action button or any other element you want to be fixed position to the
     * footer from the DropDown.
     */
    footerContent?: React.ReactElement;
    /**
     * Add informational text at the top of DropDown.
     */
    helpText?: string;
    /**
     * List of items to display in drop down menu
     */
    items: Array<Item>;
    /**
     * 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';
    /**
     * Prop to use language keys.
     */
    messages?: string;
    /**
     * Function for setting the offset of the menu from the trigger.
     */
    offsetFn?: (points: AlignPoints) => [number, number];
    /**
     * Callback for when the active state changes (controlled).
     */
    onActiveChange?: InternalDispatch<boolean>;
    /**
     * Callback will always be called when the user is interacting with search.
     */
    onSearchValueChange?: (newValue: string) => void;
    /**
     * Flag indicating if the menu should be rendered lazily
     */
    renderMenuOnClick?: boolean;
    /**
     * Pass the props to the Search component.
     */
    searchProps?: SearchProps;
    /**
     * The value that will be passed to the search input element.
     */
    searchValue?: string;
    /**
     * Flag to show search at the top of the DropDown.
     */
    searchable?: boolean;
    /**
     * The path to the SVG spritemap file containing the icons.
     */
    spritemap?: string;
    /**
     * Element that is used as the trigger which will activate the dropdown on click.
     */
    trigger: React.ReactElement & {
        ref?: (node: HTMLButtonElement | null) => void;
    };
    /**
     * Flag indicating if the caret icon should be displayed on the right side.
     */
    triggerIcon?: string | null;
};
export declare function ClayDropDownWithItems({ active, alignmentByViewport, alignmentPosition, caption, className, closeOnClickOutside, containerElement, defaultActive, footerContent, helpText, items, menuElementAttrs, menuHeight, menuWidth, offsetFn, onActiveChange, onSearchValueChange, renderMenuOnClick, searchable, searchProps, searchValue, triggerIcon, spritemap, trigger, }: Props): React.JSX.Element;
export declare namespace ClayDropDownWithItems {
    var displayName: string;
}