UNPKG

3.54 kBTypeScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import { DropDirection } from './DropdownContext';
4import DropdownMenu from './DropdownMenu';
5import DropdownToggle from './DropdownToggle';
6export interface DropdownInjectedProps {
7 onKeyDown: React.KeyboardEventHandler;
8}
9export interface DropdownProps {
10 drop?: DropDirection;
11 alignEnd?: boolean;
12 defaultShow?: boolean;
13 show?: boolean;
14 onToggle: (nextShow: boolean, event?: React.SyntheticEvent | Event) => void;
15 itemSelector?: string;
16 focusFirstItemOnShow?: false | true | 'keyboard';
17 children: React.ReactNode;
18}
19/**
20 * @displayName Dropdown
21 * @public
22 */
23declare function Dropdown({ drop, alignEnd, defaultShow, show: rawShow, onToggle: rawOnToggle, itemSelector, focusFirstItemOnShow, children, }: DropdownProps): JSX.Element;
24declare namespace Dropdown {
25 var displayName: string;
26 var propTypes: {
27 /**
28 * A render prop that returns the root dropdown element. The `props`
29 * argument should spread through to an element containing _both_ the
30 * menu and toggle in order to handle keyboard events for focus management.
31 *
32 * @type {Function ({
33 * props: {
34 * onKeyDown: (SyntheticEvent) => void,
35 * },
36 * }) => React.Element}
37 */
38 children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
39 /**
40 * Determines the direction and location of the Menu in relation to it's Toggle.
41 */
42 drop: PropTypes.Requireable<string>;
43 /**
44 * Controls the focus behavior for when the Dropdown is opened. Set to
45 * `true` to always focus the first menu item, `keyboard` to focus only when
46 * navigating via the keyboard, or `false` to disable completely
47 *
48 * The Default behavior is `false` **unless** the Menu has a `role="menu"`
49 * where it will default to `keyboard` to match the recommended [ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
50 */
51 focusFirstItemOnShow: PropTypes.Requireable<string | boolean>;
52 /**
53 * A css slector string that will return __focusable__ menu items.
54 * Selectors should be relative to the menu component:
55 * e.g. ` > li:not('.disabled')`
56 */
57 itemSelector: PropTypes.Requireable<string>;
58 /**
59 * Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is `top-start` or `bottom-start`.
60 */
61 alignEnd: PropTypes.Requireable<boolean>;
62 /**
63 * Whether or not the Dropdown is visible.
64 *
65 * @controllable onToggle
66 */
67 show: PropTypes.Requireable<boolean>;
68 /**
69 * Sets the initial show position of the Dropdown.
70 */
71 defaultShow: PropTypes.Requireable<boolean>;
72 /**
73 * A callback fired when the Dropdown wishes to change visibility. Called with the requested
74 * `show` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
75 *
76 * ```ts static
77 * function(
78 * isOpen: boolean,
79 * event: SyntheticEvent,
80 * ): void
81 * ```
82 *
83 * @controllable show
84 */
85 onToggle: PropTypes.Requireable<(...args: any[]) => any>;
86 };
87 var Menu: typeof DropdownMenu;
88 var Toggle: typeof DropdownToggle;
89}
90export default Dropdown;