UNPKG

4.66 kBTypeScriptView Raw
1import PropTypes from 'prop-types';
2import React from 'react';
3import { DropdownContextValue } from './DropdownContext';
4import { UsePopperOptions, Offset, UsePopperState } from './usePopper';
5import { RootCloseOptions } from './useRootClose';
6export interface UseDropdownMenuOptions {
7 flip?: boolean;
8 show?: boolean;
9 fixed?: boolean;
10 alignEnd?: boolean;
11 usePopper?: boolean;
12 offset?: Offset;
13 rootCloseEvent?: RootCloseOptions['clickTrigger'];
14 popperConfig?: Omit<UsePopperOptions, 'enabled' | 'placement'>;
15}
16export declare type UserDropdownMenuProps = Record<string, any> & {
17 ref: React.RefCallback<HTMLElement>;
18 style?: React.CSSProperties;
19 'aria-labelledby'?: string;
20};
21export declare type UserDropdownMenuArrowProps = Record<string, any> & {
22 ref: React.RefCallback<HTMLElement>;
23 style: React.CSSProperties;
24};
25export interface UseDropdownMenuMetadata {
26 show: boolean;
27 alignEnd?: boolean;
28 hasShown: boolean;
29 toggle?: DropdownContextValue['toggle'];
30 popper: UsePopperState | null;
31 arrowProps: Partial<UserDropdownMenuArrowProps>;
32}
33/**
34 * @memberOf Dropdown
35 * @param {object} options
36 * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
37 * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
38 * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
39 * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
40 * @param {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
41 * @param {object} options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
42 */
43export declare function useDropdownMenu(options?: UseDropdownMenuOptions): readonly [UserDropdownMenuProps, UseDropdownMenuMetadata];
44export interface DropdownMenuProps extends UseDropdownMenuOptions {
45 children: (props: UserDropdownMenuProps, meta: UseDropdownMenuMetadata) => React.ReactNode;
46}
47/**
48 * Also exported as `<Dropdown.Menu>` from `Dropdown`.
49 *
50 * @displayName DropdownMenu
51 * @memberOf Dropdown
52 */
53declare function DropdownMenu({ children, ...options }: DropdownMenuProps): JSX.Element;
54declare namespace DropdownMenu {
55 var displayName: string;
56 var propTypes: {
57 /**
58 * A render prop that returns a Menu element. The `props`
59 * argument should spread through to **a component that can accept a ref**.
60 *
61 * @type {Function ({
62 * show: boolean,
63 * alignEnd: boolean,
64 * close: (?SyntheticEvent) => void,
65 * placement: Placement,
66 * update: () => void,
67 * forceUpdate: () => void,
68 * props: {
69 * ref: (?HTMLElement) => void,
70 * style: { [string]: string | number },
71 * aria-labelledby: ?string
72 * },
73 * arrowProps: {
74 * ref: (?HTMLElement) => void,
75 * style: { [string]: string | number },
76 * },
77 * }) => React.Element}
78 */
79 children: PropTypes.Validator<(...args: any[]) => any>;
80 /**
81 * Controls the visible state of the menu, generally this is
82 * provided by the parent `Dropdown` component,
83 * but may also be specified as a prop directly.
84 */
85 show: PropTypes.Requireable<boolean>;
86 /**
87 * Aligns the dropdown menu to the 'end' of it's placement position.
88 * Generally this is provided by the parent `Dropdown` component,
89 * but may also be specified as a prop directly.
90 */
91 alignEnd: PropTypes.Requireable<boolean>;
92 /**
93 * Enables the Popper.js `flip` modifier, allowing the Dropdown to
94 * automatically adjust it's placement in case of overlap with the viewport or toggle.
95 * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
96 */
97 flip: PropTypes.Requireable<boolean>;
98 usePopper: PropTypes.Requireable<boolean>;
99 /**
100 * A set of popper options and props passed directly to react-popper's Popper component.
101 */
102 popperConfig: PropTypes.Requireable<object>;
103 /**
104 * Override the default event used by RootCloseWrapper.
105 */
106 rootCloseEvent: PropTypes.Requireable<string>;
107 };
108 var defaultProps: {
109 usePopper: boolean;
110 };
111}
112/** @component */
113export default DropdownMenu;