UNPKG

3.1 kBTypeScriptView Raw
1import * as React from 'react';
2import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
3import { PortalProps } from '../Portal';
4
5export type PopperPlacementType = Options['placement'];
6
7export interface PopperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
8 ref?: React.Ref<HTMLDivElement>;
9 /**
10 * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
11 * or a function that returns either.
12 * It's used to set the position of the popper.
13 * The return value will passed as the reference object of the Popper instance.
14 */
15 anchorEl?: null | VirtualElement | (() => VirtualElement);
16 /**
17 * Popper render function or node.
18 */
19 children?:
20 | React.ReactNode
21 | ((props: {
22 placement: PopperPlacementType;
23 TransitionProps?: {
24 in: boolean;
25 onEnter: () => {};
26 onExited: () => {};
27 };
28 }) => React.ReactNode);
29 /**
30 * An HTML element or function that returns one.
31 * The `container` will have the portal children appended to it.
32 *
33 * By default, it uses the body of the top-level document object,
34 * so it's simply `document.body` most of the time.
35 */
36 container?: PortalProps['container'];
37 /**
38 * The `children` will be under the DOM hierarchy of the parent component.
39 * @default false
40 */
41 disablePortal?: PortalProps['disablePortal'];
42 /**
43 * Always keep the children in the DOM.
44 * This prop can be useful in SEO situation or
45 * when you want to maximize the responsiveness of the Popper.
46 * @default false
47 */
48 keepMounted?: boolean;
49 /**
50 * Popper.js is based on a "plugin-like" architecture,
51 * most of its features are fully encapsulated "modifiers".
52 *
53 * A modifier is a function that is called each time Popper.js needs to
54 * compute the position of the popper.
55 * For this reason, modifiers should be very performant to avoid bottlenecks.
56 * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
57 */
58 modifiers?: Options['modifiers'];
59 /**
60 * If `true`, the component is shown.
61 */
62 open: boolean;
63 /**
64 * Popper placement.
65 * @default 'bottom'
66 */
67 placement?: PopperPlacementType;
68 /**
69 * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
70 * @default {}
71 */
72 popperOptions?: Partial<OptionsGeneric<any>>;
73 /**
74 * A ref that points to the used popper instance.
75 */
76 popperRef?: React.Ref<Instance>;
77 /**
78 * Help supporting a react-transition-group/Transition component.
79 * @default false
80 */
81 transition?: boolean;
82}
83
84/**
85 * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
86 *
87 * Demos:
88 *
89 * - [Autocomplete](https://mui.com/components/autocomplete/)
90 * - [Menus](https://mui.com/components/menus/)
91 * - [Popper](https://mui.com/components/popper/)
92 *
93 * API:
94 *
95 * - [Popper API](https://mui.com/api/popper/)
96 */
97export default function Popper(props: PopperProps): JSX.Element;
98
\No newline at end of file