UNPKG

10.1 kBJavaScriptView Raw
1import getCompositeRect from "./dom-utils/getCompositeRect.js";
2import getLayoutRect from "./dom-utils/getLayoutRect.js";
3import listScrollParents from "./dom-utils/listScrollParents.js";
4import getOffsetParent from "./dom-utils/getOffsetParent.js";
5import getComputedStyle from "./dom-utils/getComputedStyle.js";
6import orderModifiers from "./utils/orderModifiers.js";
7import debounce from "./utils/debounce.js";
8import validateModifiers from "./utils/validateModifiers.js";
9import uniqueBy from "./utils/uniqueBy.js";
10import getBasePlacement from "./utils/getBasePlacement.js";
11import mergeByName from "./utils/mergeByName.js";
12import detectOverflow from "./utils/detectOverflow.js";
13import { isElement } from "./dom-utils/instanceOf.js";
14import { auto } from "./enums.js";
15var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
16var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
17var DEFAULT_OPTIONS = {
18 placement: 'bottom',
19 modifiers: [],
20 strategy: 'absolute'
21};
22
23function areValidElements() {
24 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
25 args[_key] = arguments[_key];
26 }
27
28 return !args.some(function (element) {
29 return !(element && typeof element.getBoundingClientRect === 'function');
30 });
31}
32
33export function popperGenerator(generatorOptions) {
34 if (generatorOptions === void 0) {
35 generatorOptions = {};
36 }
37
38 var _generatorOptions = generatorOptions,
39 _generatorOptions$def = _generatorOptions.defaultModifiers,
40 defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
41 _generatorOptions$def2 = _generatorOptions.defaultOptions,
42 defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
43 return function createPopper(reference, popper, options) {
44 if (options === void 0) {
45 options = defaultOptions;
46 }
47
48 var state = {
49 placement: 'bottom',
50 orderedModifiers: [],
51 options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
52 modifiersData: {},
53 elements: {
54 reference: reference,
55 popper: popper
56 },
57 attributes: {},
58 styles: {}
59 };
60 var effectCleanupFns = [];
61 var isDestroyed = false;
62 var instance = {
63 state: state,
64 setOptions: function setOptions(setOptionsAction) {
65 var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
66 cleanupModifierEffects();
67 state.options = Object.assign({}, defaultOptions, state.options, options);
68 state.scrollParents = {
69 reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
70 popper: listScrollParents(popper)
71 }; // Orders the modifiers based on their dependencies and `phase`
72 // properties
73
74 var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
75
76 state.orderedModifiers = orderedModifiers.filter(function (m) {
77 return m.enabled;
78 }); // Validate the provided modifiers so that the consumer will get warned
79 // if one of the modifiers is invalid for any reason
80
81 if (process.env.NODE_ENV !== "production") {
82 var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
83 var name = _ref.name;
84 return name;
85 });
86 validateModifiers(modifiers);
87
88 if (getBasePlacement(state.options.placement) === auto) {
89 var flipModifier = state.orderedModifiers.find(function (_ref2) {
90 var name = _ref2.name;
91 return name === 'flip';
92 });
93
94 if (!flipModifier) {
95 console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
96 }
97 }
98
99 var _getComputedStyle = getComputedStyle(popper),
100 marginTop = _getComputedStyle.marginTop,
101 marginRight = _getComputedStyle.marginRight,
102 marginBottom = _getComputedStyle.marginBottom,
103 marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
104 // cause bugs with positioning, so we'll warn the consumer
105
106
107 if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
108 return parseFloat(margin);
109 })) {
110 console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
111 }
112 }
113
114 runModifierEffects();
115 return instance.update();
116 },
117 // Sync update – it will always be executed, even if not necessary. This
118 // is useful for low frequency updates where sync behavior simplifies the
119 // logic.
120 // For high frequency updates (e.g. `resize` and `scroll` events), always
121 // prefer the async Popper#update method
122 forceUpdate: function forceUpdate() {
123 if (isDestroyed) {
124 return;
125 }
126
127 var _state$elements = state.elements,
128 reference = _state$elements.reference,
129 popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
130 // anymore
131
132 if (!areValidElements(reference, popper)) {
133 if (process.env.NODE_ENV !== "production") {
134 console.error(INVALID_ELEMENT_ERROR);
135 }
136
137 return;
138 } // Store the reference and popper rects to be read by modifiers
139
140
141 state.rects = {
142 reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
143 popper: getLayoutRect(popper)
144 }; // Modifiers have the ability to reset the current update cycle. The
145 // most common use case for this is the `flip` modifier changing the
146 // placement, which then needs to re-run all the modifiers, because the
147 // logic was previously ran for the previous placement and is therefore
148 // stale/incorrect
149
150 state.reset = false;
151 state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
152 // is filled with the initial data specified by the modifier. This means
153 // it doesn't persist and is fresh on each update.
154 // To ensure persistent data, use `${name}#persistent`
155
156 state.orderedModifiers.forEach(function (modifier) {
157 return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
158 });
159 var __debug_loops__ = 0;
160
161 for (var index = 0; index < state.orderedModifiers.length; index++) {
162 if (process.env.NODE_ENV !== "production") {
163 __debug_loops__ += 1;
164
165 if (__debug_loops__ > 100) {
166 console.error(INFINITE_LOOP_ERROR);
167 break;
168 }
169 }
170
171 if (state.reset === true) {
172 state.reset = false;
173 index = -1;
174 continue;
175 }
176
177 var _state$orderedModifie = state.orderedModifiers[index],
178 fn = _state$orderedModifie.fn,
179 _state$orderedModifie2 = _state$orderedModifie.options,
180 _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
181 name = _state$orderedModifie.name;
182
183 if (typeof fn === 'function') {
184 state = fn({
185 state: state,
186 options: _options,
187 name: name,
188 instance: instance
189 }) || state;
190 }
191 }
192 },
193 // Async and optimistically optimized update – it will not be executed if
194 // not necessary (debounced to run at most once-per-tick)
195 update: debounce(function () {
196 return new Promise(function (resolve) {
197 instance.forceUpdate();
198 resolve(state);
199 });
200 }),
201 destroy: function destroy() {
202 cleanupModifierEffects();
203 isDestroyed = true;
204 }
205 };
206
207 if (!areValidElements(reference, popper)) {
208 if (process.env.NODE_ENV !== "production") {
209 console.error(INVALID_ELEMENT_ERROR);
210 }
211
212 return instance;
213 }
214
215 instance.setOptions(options).then(function (state) {
216 if (!isDestroyed && options.onFirstUpdate) {
217 options.onFirstUpdate(state);
218 }
219 }); // Modifiers have the ability to execute arbitrary code before the first
220 // update cycle runs. They will be executed in the same order as the update
221 // cycle. This is useful when a modifier adds some persistent data that
222 // other modifiers need to use, but the modifier is run after the dependent
223 // one.
224
225 function runModifierEffects() {
226 state.orderedModifiers.forEach(function (_ref3) {
227 var name = _ref3.name,
228 _ref3$options = _ref3.options,
229 options = _ref3$options === void 0 ? {} : _ref3$options,
230 effect = _ref3.effect;
231
232 if (typeof effect === 'function') {
233 var cleanupFn = effect({
234 state: state,
235 name: name,
236 instance: instance,
237 options: options
238 });
239
240 var noopFn = function noopFn() {};
241
242 effectCleanupFns.push(cleanupFn || noopFn);
243 }
244 });
245 }
246
247 function cleanupModifierEffects() {
248 effectCleanupFns.forEach(function (fn) {
249 return fn();
250 });
251 effectCleanupFns = [];
252 }
253
254 return instance;
255 };
256}
257export var createPopper = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line import/no-unused-modules
258
259export { detectOverflow };
\No newline at end of file