UNPKG

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