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

ClayDropDown component

/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
import { IPortalBaseProps } from '@clayui/shared';
import React from 'react';
import type { AlignPoints } from '@clayui/shared';
export declare const Align: {
    readonly BottomCenter: 4;
    readonly BottomLeft: 5;
    readonly BottomRight: 3;
    readonly LeftBottom: 11;
    readonly LeftCenter: 6;
    readonly LeftTop: 10;
    readonly RightBottom: 9;
    readonly RightCenter: 2;
    readonly RightTop: 8;
    readonly TopCenter: 0;
    readonly TopLeft: 7;
    readonly TopRight: 1;
};
export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Flag to indicate if menu is showing or not.
     */
    active?: boolean;
    /**
     * HTML element that the menu should be aligned to
     */
    alignElementRef: React.RefObject<HTMLElement>;
    /**
     * Flag to align the DropDown menu within the viewport.
     */
    alignmentByViewport?: boolean;
    /**
     * Flag to suggest or not the best region to align menu element.
     */
    autoBestAlign?: 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;
    /**
     * Flag to indicate if clicking outside of the menu should automatically close it.
     */
    closeOnClickOutside?: boolean;
    /**
     * Props to add to the outer most container.
     */
    containerProps?: IPortalBaseProps;
    /**
     * @ignore
     */
    deps?: Array<any>;
    /**
     * Flag to indicate if menu is displaying a clay-icon on the left.
     */
    hasLeftSymbols?: boolean;
    /**
     * Flag to indicate if menu is displaying a clay-icon on the right.
     */
    hasRightSymbols?: boolean;
    /**
     * Adds utility class name `dropdown-menu-height-${height}`
     */
    height?: 'auto';
    /**
     * Flag to lock focus within the scope.
     */
    lock?: boolean;
    /**
     * Element ref to call focus() on after menu is closed via Escape key
     * @deprecated since v3.80.0 - use `triggerRef` instead.
     */
    focusRefOnEsc?: React.RefObject<HTMLElement>;
    /**
     * Function for setting the offset of the menu from the trigger.
     */
    offsetFn?: (points: AlignPoints) => [number, number];
    /**
     * Callback function for when active state changes.
     */
    onActiveChange?: (value: boolean) => void;
    /**
     * Callback function for when active state changes.
     * @deprecated since v3.52.0 - use `onActiveChange` instead.
     */
    onSetActive?: (value: boolean) => void;
    /**
     * Defines the reference of the elements that must be suppressed by the
     * screen reader when the menu is opened.
     */
    suppress?: Array<React.RefObject<HTMLElement>>;
    /**
     * Reference of the element that triggers the Menu.
     */
    triggerRef?: React.RefObject<HTMLElement>;
    /**
     * 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.
     */
    width?: 'sm' | 'shrink' | 'full';
}
declare const Menu: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
export default Menu;