|
|
import getCompositeRect from "./dom-utils/getCompositeRect.js";
|
|
|
import getLayoutRect from "./dom-utils/getLayoutRect.js";
|
|
|
import listScrollParents from "./dom-utils/listScrollParents.js";
|
|
|
import getOffsetParent from "./dom-utils/getOffsetParent.js";
|
|
|
import getComputedStyle from "./dom-utils/getComputedStyle.js";
|
|
|
import orderModifiers from "./utils/orderModifiers.js";
|
|
|
import debounce from "./utils/debounce.js";
|
|
|
import validateModifiers from "./utils/validateModifiers.js";
|
|
|
import uniqueBy from "./utils/uniqueBy.js";
|
|
|
import getBasePlacement from "./utils/getBasePlacement.js";
|
|
|
import mergeByName from "./utils/mergeByName.js";
|
|
|
import detectOverflow from "./utils/detectOverflow.js";
|
|
|
import { isElement } from "./dom-utils/instanceOf.js";
|
|
|
import { auto } from "./enums.js";
|
|
|
var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
|
|
|
var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
|
|
|
var DEFAULT_OPTIONS = {
|
|
|
placement: 'bottom',
|
|
|
modifiers: [],
|
|
|
strategy: 'absolute'
|
|
|
};
|
|
|
|
|
|
function areValidElements() {
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
|
args[_key] = arguments[_key];
|
|
|
}
|
|
|
|
|
|
return !args.some(function (element) {
|
|
|
return !(element && typeof element.getBoundingClientRect === 'function');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
export function popperGenerator(generatorOptions) {
|
|
|
if (generatorOptions === void 0) {
|
|
|
generatorOptions = {};
|
|
|
}
|
|
|
|
|
|
var _generatorOptions = generatorOptions,
|
|
|
_generatorOptions$def = _generatorOptions.defaultModifiers,
|
|
|
defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
|
|
|
_generatorOptions$def2 = _generatorOptions.defaultOptions,
|
|
|
defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
|
|
|
return function createPopper(reference, popper, options) {
|
|
|
if (options === void 0) {
|
|
|
options = defaultOptions;
|
|
|
}
|
|
|
|
|
|
var state = {
|
|
|
placement: 'bottom',
|
|
|
orderedModifiers: [],
|
|
|
options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
|
|
|
modifiersData: {},
|
|
|
elements: {
|
|
|
reference: reference,
|
|
|
popper: popper
|
|
|
},
|
|
|
attributes: {},
|
|
|
styles: {}
|
|
|
};
|
|
|
var effectCleanupFns = [];
|
|
|
var isDestroyed = false;
|
|
|
var instance = {
|
|
|
state: state,
|
|
|
setOptions: function setOptions(setOptionsAction) {
|
|
|
var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
|
|
|
cleanupModifierEffects();
|
|
|
state.options = Object.assign({}, defaultOptions, state.options, options);
|
|
|
state.scrollParents = {
|
|
|
reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
|
|
|
popper: listScrollParents(popper)
|
|
|
}; // Orders the modifiers based on their dependencies and `phase`
|
|
|
// properties
|
|
|
|
|
|
var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
|
|
|
|
|
|
state.orderedModifiers = orderedModifiers.filter(function (m) {
|
|
|
return m.enabled;
|
|
|
}); // Validate the provided modifiers so that the consumer will get warned
|
|
|
// if one of the modifiers is invalid for any reason
|
|
|
|
|
|
if (process.env.NODE_ENV !== "production") {
|
|
|
var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
|
|
|
var name = _ref.name;
|
|
|
return name;
|
|
|
});
|
|
|
validateModifiers(modifiers);
|
|
|
|
|
|
if (getBasePlacement(state.options.placement) === auto) {
|
|
|
var flipModifier = state.orderedModifiers.find(function (_ref2) {
|
|
|
var name = _ref2.name;
|
|
|
return name === 'flip';
|
|
|
});
|
|
|
|
|
|
if (!flipModifier) {
|
|
|
console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var _getComputedStyle = getComputedStyle(popper),
|
|
|
marginTop = _getComputedStyle.marginTop,
|
|
|
marginRight = _getComputedStyle.marginRight,
|
|
|
marginBottom = _getComputedStyle.marginBottom,
|
|
|
marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
|
|
|
// cause bugs with positioning, so we'll warn the consumer
|
|
|
|
|
|
|
|
|
if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
|
|
|
return parseFloat(margin);
|
|
|
})) {
|
|
|
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(' '));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
runModifierEffects();
|
|
|
return instance.update();
|
|
|
},
|
|
|
// Sync update – it will always be executed, even if not necessary. This
|
|
|
// is useful for low frequency updates where sync behavior simplifies the
|
|
|
// logic.
|
|
|
// For high frequency updates (e.g. `resize` and `scroll` events), always
|
|
|
// prefer the async Popper#update method
|
|
|
forceUpdate: function forceUpdate() {
|
|
|
if (isDestroyed) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var _state$elements = state.elements,
|
|
|
reference = _state$elements.reference,
|
|
|
popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
|
|
|
// anymore
|
|
|
|
|
|
if (!areValidElements(reference, popper)) {
|
|
|
if (process.env.NODE_ENV !== "production") {
|
|
|
console.error(INVALID_ELEMENT_ERROR);
|
|
|
}
|
|
|
|
|
|
return;
|
|
|
} // Store the reference and popper rects to be read by modifiers
|
|
|
|
|
|
|
|
|
state.rects = {
|
|
|
reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
|
|
|
popper: getLayoutRect(popper)
|
|
|
}; // Modifiers have the ability to reset the current update cycle. The
|
|
|
// most common use case for this is the `flip` modifier changing the
|
|
|
// placement, which then needs to re-run all the modifiers, because the
|
|
|
// logic was previously ran for the previous placement and is therefore
|
|
|
// stale/incorrect
|
|
|
|
|
|
state.reset = false;
|
|
|
state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
|
|
|
// is filled with the initial data specified by the modifier. This means
|
|
|
// it doesn't persist and is fresh on each update.
|
|
|
// To ensure persistent data, use `${name}#persistent`
|
|
|
|
|
|
state.orderedModifiers.forEach(function (modifier) {
|
|
|
return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
|
|
|
});
|
|
|
var __debug_loops__ = 0;
|
|
|
|
|
|
for (var index = 0; index < state.orderedModifiers.length; index++) {
|
|
|
if (process.env.NODE_ENV !== "production") {
|
|
|
__debug_loops__ += 1;
|
|
|
|
|
|
if (__debug_loops__ > 100) {
|
|
|
console.error(INFINITE_LOOP_ERROR);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (state.reset === true) {
|
|
|
state.reset = false;
|
|
|
index = -1;
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
var _state$orderedModifie = state.orderedModifiers[index],
|
|
|
fn = _state$orderedModifie.fn,
|
|
|
_state$orderedModifie2 = _state$orderedModifie.options,
|
|
|
_options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
|
|
|
name = _state$orderedModifie.name;
|
|
|
|
|
|
if (typeof fn === 'function') {
|
|
|
state = fn({
|
|
|
state: state,
|
|
|
options: _options,
|
|
|
name: name,
|
|
|
instance: instance
|
|
|
}) || state;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// Async and optimistically optimized update – it will not be executed if
|
|
|
// not necessary (debounced to run at most once-per-tick)
|
|
|
update: debounce(function () {
|
|
|
return new Promise(function (resolve) {
|
|
|
instance.forceUpdate();
|
|
|
resolve(state);
|
|
|
});
|
|
|
}),
|
|
|
destroy: function destroy() {
|
|
|
cleanupModifierEffects();
|
|
|
isDestroyed = true;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
if (!areValidElements(reference, popper)) {
|
|
|
if (process.env.NODE_ENV !== "production") {
|
|
|
console.error(INVALID_ELEMENT_ERROR);
|
|
|
}
|
|
|
|
|
|
return instance;
|
|
|
}
|
|
|
|
|
|
instance.setOptions(options).then(function (state) {
|
|
|
if (!isDestroyed && options.onFirstUpdate) {
|
|
|
options.onFirstUpdate(state);
|
|
|
}
|
|
|
}); // Modifiers have the ability to execute arbitrary code before the first
|
|
|
// update cycle runs. They will be executed in the same order as the update
|
|
|
// cycle. This is useful when a modifier adds some persistent data that
|
|
|
// other modifiers need to use, but the modifier is run after the dependent
|
|
|
// one.
|
|
|
|
|
|
function runModifierEffects() {
|
|
|
state.orderedModifiers.forEach(function (_ref3) {
|
|
|
var name = _ref3.name,
|
|
|
_ref3$options = _ref3.options,
|
|
|
options = _ref3$options === void 0 ? {} : _ref3$options,
|
|
|
effect = _ref3.effect;
|
|
|
|
|
|
if (typeof effect === 'function') {
|
|
|
var cleanupFn = effect({
|
|
|
state: state,
|
|
|
name: name,
|
|
|
instance: instance,
|
|
|
options: options
|
|
|
});
|
|
|
|
|
|
var noopFn = function noopFn() {};
|
|
|
|
|
|
effectCleanupFns.push(cleanupFn || noopFn);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function cleanupModifierEffects() {
|
|
|
effectCleanupFns.forEach(function (fn) {
|
|
|
return fn();
|
|
|
});
|
|
|
effectCleanupFns = [];
|
|
|
}
|
|
|
|
|
|
return instance;
|
|
|
};
|
|
|
}
|
|
|
export var createPopper = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line import/no-unused-modules
|
|
|
|
|
|
export { detectOverflow }; |
