@clayui/drop-down
Version:
ClayDropDown component
119 lines (118 loc) • 3.98 kB
TypeScript
/**
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
* SPDX-License-Identifier: BSD-3-Clause
*/
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;
/**
* Element that is used as the trigger which will activate the dropdown on click.
*/
trigger: React.ReactElement & {
ref?: (node: HTMLButtonElement | null) => void;
};
/**
* Add informational text at the top of DropDown.
*/
helpText?: 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';
/**
* 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;
/**
* 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;
/**
* The path to the SVG spritemap file containing the icons.
*/
spritemap?: string;
/**
* List of items to display in drop down menu
*/
items: Array<Item>;
/**
* Flag indicating if the caret icon should be displayed on the right side.
*/
triggerIcon?: string | null;
};
export declare const 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): JSX.Element;
displayName: string;
};