1 | import PropTypes from 'prop-types';
|
2 | import React from 'react';
|
3 | import { DropdownContextValue } from './DropdownContext';
|
4 | import { UsePopperOptions, Offset, UsePopperState } from './usePopper';
|
5 | import { RootCloseOptions } from './useRootClose';
|
6 | export 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 | }
|
16 | export declare type UserDropdownMenuProps = Record<string, any> & {
|
17 | ref: React.RefCallback<HTMLElement>;
|
18 | style?: React.CSSProperties;
|
19 | 'aria-labelledby'?: string;
|
20 | };
|
21 | export declare type UserDropdownMenuArrowProps = Record<string, any> & {
|
22 | ref: React.RefCallback<HTMLElement>;
|
23 | style: React.CSSProperties;
|
24 | };
|
25 | export 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 | */
|
43 | export declare function useDropdownMenu(options?: UseDropdownMenuOptions): readonly [UserDropdownMenuProps, UseDropdownMenuMetadata];
|
44 | export 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 | */
|
53 | declare function DropdownMenu({ children, ...options }: DropdownMenuProps): JSX.Element;
|
54 | declare 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 */
|
113 | export default DropdownMenu;
|