UNPKG

4.59 kBTypeScriptView Raw
1import * as Popper from "@popperjs/core";
2import BaseComponent, { GetInstanceFactory, GetOrCreateInstanceFactory } from "./base-component";
3import Tooltip from "./tooltip";
4
5declare class Dropdown extends BaseComponent {
6 /**
7 * Static method which allows you to get the dropdown instance associated
8 * with a DOM element.
9 */
10 static getInstance: GetInstanceFactory<Dropdown>;
11
12 /**
13 * Static method which returns a dropdown instance associated to a DOM element or
14 * create a new one in case it wasn't initialised.
15 * You can use it like this: bootstrap.Dropdown.getOrCreateInstance(element)
16 */
17 static getOrCreateInstance: GetOrCreateInstanceFactory<Dropdown, Partial<Dropdown.Options>>;
18
19 static jQueryInterface: Dropdown.jQueryInterface;
20
21 /**
22 * Default settings of this plugin
23 *
24 * @link https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings
25 */
26 static Default: Dropdown.Options;
27
28 static DefaultType: Record<keyof Dropdown.Options, string>;
29
30 constructor(element: string | Element, options?: Partial<Dropdown.Options>);
31
32 /**
33 * Toggles the dropdown menu of a given navbar or tabbed navigation.
34 */
35 toggle(): void;
36
37 /**
38 * Shows the dropdown menu of a given navbar or tabbed navigation.
39 */
40 show(): void;
41
42 /**
43 * Hides the dropdown menu of a given navbar or tabbed navigation.
44 */
45 hide(): void;
46
47 /**
48 * Updates the position of an element's dropdown.
49 */
50 update(): void;
51}
52
53declare namespace Dropdown {
54 enum Events {
55 /**
56 * Fires immediately when the show instance method is called.
57 */
58 show = "show.bs.dropdown",
59
60 /**
61 * Fired when the dropdown has been made visible to the user and CSS
62 * transitions have completed.
63 */
64 shown = "shown.bs.dropdown",
65
66 /**
67 * Fires immediately when the hide instance method has been called.
68 */
69 hide = "hide.bs.dropdown",
70
71 /**
72 * Fired when the dropdown has finished being hidden from the user and
73 * CSS transitions have completed.
74 */
75 hidden = "hidden.bs.dropdown",
76 }
77
78 type Offset = [number, number];
79
80 type OffsetFunction = () => Offset;
81
82 interface Options extends Pick<Tooltip.Options, "popperConfig"> {
83 /**
84 * Offset of the dropdown relative to its target. You can pass a string
85 * in data attributes with comma separated values like:
86 * data-bs-offset="10,20"
87 *
88 * When a function is used to determine the offset, it is called with an
89 * object containing the popper placement, the reference, and popper
90 * rects as its first argument. The triggering element DOM node is
91 * passed as the second argument. The function must return an array with
92 * two numbers: [skidding, distance].
93 *
94 * For more information refer to Popper's offset docs.
95 *
96 * @default [0, 2]
97 */
98 offset: Offset | string | OffsetFunction;
99
100 /**
101 * Overflow constraint boundary of the dropdown menu. Accepts the values
102 * of 'viewport', 'window', 'scrollParent', or an HTMLElement reference
103 * (JavaScript only). For more information refer to Popper.js's
104 * preventOverflow docs.
105 *
106 * @see {@link https://popper.js.org/docs/v2/modifiers/prevent-overflow/#boundary}
107 * @default "scrollParent"
108 */
109 boundary: Popper.Boundary | Element;
110
111 /**
112 * Reference element of the dropdown menu. Accepts the values of
113 * 'toggle', 'parent', an HTMLElement reference or an object providing
114 * getBoundingClientRect. For more information refer to Popper.js's
115 * referenceObject docs.
116 *
117 * @see {@link https://popper.js.org/docs/v2/constructors/#createpopper}
118 * @default "toggle"
119 */
120 reference: "toggle" | "parent" | Element | Popper.Rect;
121
122 /**
123 * By default, we use Popper.js for dynamic positioning. Disable this
124 * with static.
125 *
126 * @default "dynamic"
127 */
128 display: "dynamic" | "static";
129
130 /**
131 * Configure the auto close behavior of the dropdown
132 *
133 * @default true
134 */
135 autoClose: boolean | "inside" | "outside";
136 }
137
138 type jQueryInterface = (config?: Partial<Options> | "toggle" | "show" | "hide" | "update" | "dispose") => JQuery;
139}
140
141export default Dropdown;