You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

258 lines
9.9 KiB

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