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