|
|
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 };
|