|  |  |  |  | // @flow | 
					
						
							|  |  |  |  | import type { | 
					
						
							|  |  |  |  |   State, | 
					
						
							|  |  |  |  |   OptionsGeneric, | 
					
						
							|  |  |  |  |   Modifier, | 
					
						
							|  |  |  |  |   Instance, | 
					
						
							|  |  |  |  |   VirtualElement, | 
					
						
							|  |  |  |  | } from './types'; | 
					
						
							|  |  |  |  | import getCompositeRect from './dom-utils/getCompositeRect'; | 
					
						
							|  |  |  |  | import getLayoutRect from './dom-utils/getLayoutRect'; | 
					
						
							|  |  |  |  | import listScrollParents from './dom-utils/listScrollParents'; | 
					
						
							|  |  |  |  | import getOffsetParent from './dom-utils/getOffsetParent'; | 
					
						
							|  |  |  |  | import getComputedStyle from './dom-utils/getComputedStyle'; | 
					
						
							|  |  |  |  | import orderModifiers from './utils/orderModifiers'; | 
					
						
							|  |  |  |  | import debounce from './utils/debounce'; | 
					
						
							|  |  |  |  | import validateModifiers from './utils/validateModifiers'; | 
					
						
							|  |  |  |  | import uniqueBy from './utils/uniqueBy'; | 
					
						
							|  |  |  |  | import getBasePlacement from './utils/getBasePlacement'; | 
					
						
							|  |  |  |  | import mergeByName from './utils/mergeByName'; | 
					
						
							|  |  |  |  | import detectOverflow from './utils/detectOverflow'; | 
					
						
							|  |  |  |  | import { isElement } from './dom-utils/instanceOf'; | 
					
						
							|  |  |  |  | import { auto } from './enums'; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | const INVALID_ELEMENT_ERROR = | 
					
						
							|  |  |  |  |   'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; | 
					
						
							|  |  |  |  | const INFINITE_LOOP_ERROR = | 
					
						
							|  |  |  |  |   'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | const DEFAULT_OPTIONS: OptionsGeneric<any> = { | 
					
						
							|  |  |  |  |   placement: 'bottom', | 
					
						
							|  |  |  |  |   modifiers: [], | 
					
						
							|  |  |  |  |   strategy: 'absolute', | 
					
						
							|  |  |  |  | }; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | type PopperGeneratorArgs = { | 
					
						
							|  |  |  |  |   defaultModifiers?: Array<Modifier<any, any>>, | 
					
						
							|  |  |  |  |   defaultOptions?: $Shape<OptionsGeneric<any>>, | 
					
						
							|  |  |  |  | }; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | function areValidElements(...args: Array<any>): boolean { | 
					
						
							|  |  |  |  |   return !args.some( | 
					
						
							|  |  |  |  |     (element) => | 
					
						
							|  |  |  |  |       !(element && typeof element.getBoundingClientRect === 'function') | 
					
						
							|  |  |  |  |   ); | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { | 
					
						
							|  |  |  |  |   const { | 
					
						
							|  |  |  |  |     defaultModifiers = [], | 
					
						
							|  |  |  |  |     defaultOptions = DEFAULT_OPTIONS, | 
					
						
							|  |  |  |  |   } = generatorOptions; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |   return function createPopper<TModifier: $Shape<Modifier<any, any>>>( | 
					
						
							|  |  |  |  |     reference: Element | VirtualElement, | 
					
						
							|  |  |  |  |     popper: HTMLElement, | 
					
						
							|  |  |  |  |     options: $Shape<OptionsGeneric<TModifier>> = defaultOptions | 
					
						
							|  |  |  |  |   ): Instance { | 
					
						
							|  |  |  |  |     let state: $Shape<State> = { | 
					
						
							|  |  |  |  |       placement: 'bottom', | 
					
						
							|  |  |  |  |       orderedModifiers: [], | 
					
						
							|  |  |  |  |       options: { ...DEFAULT_OPTIONS, ...defaultOptions }, | 
					
						
							|  |  |  |  |       modifiersData: {}, | 
					
						
							|  |  |  |  |       elements: { | 
					
						
							|  |  |  |  |         reference, | 
					
						
							|  |  |  |  |         popper, | 
					
						
							|  |  |  |  |       }, | 
					
						
							|  |  |  |  |       attributes: {}, | 
					
						
							|  |  |  |  |       styles: {}, | 
					
						
							|  |  |  |  |     }; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     let effectCleanupFns: Array<() => void> = []; | 
					
						
							|  |  |  |  |     let isDestroyed = false; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     const instance = { | 
					
						
							|  |  |  |  |       state, | 
					
						
							|  |  |  |  |       setOptions(setOptionsAction) { | 
					
						
							|  |  |  |  |         const options = | 
					
						
							|  |  |  |  |           typeof setOptionsAction === 'function' | 
					
						
							|  |  |  |  |             ? setOptionsAction(state.options) | 
					
						
							|  |  |  |  |             : setOptionsAction; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         cleanupModifierEffects(); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         state.options = { | 
					
						
							|  |  |  |  |           // $FlowFixMe[exponential-spread] | 
					
						
							|  |  |  |  |           ...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 | 
					
						
							|  |  |  |  |         const orderedModifiers = orderModifiers( | 
					
						
							|  |  |  |  |           mergeByName([...defaultModifiers, ...state.options.modifiers]) | 
					
						
							|  |  |  |  |         ); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // Strip out disabled modifiers | 
					
						
							|  |  |  |  |         state.orderedModifiers = orderedModifiers.filter((m) => m.enabled); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // Validate the provided modifiers so that the consumer will get warned | 
					
						
							|  |  |  |  |         // if one of the modifiers is invalid for any reason | 
					
						
							|  |  |  |  |         if (false) { | 
					
						
							|  |  |  |  |           const modifiers = uniqueBy( | 
					
						
							|  |  |  |  |             [...orderedModifiers, ...state.options.modifiers], | 
					
						
							|  |  |  |  |             ({ name }) => name | 
					
						
							|  |  |  |  |           ); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           validateModifiers(modifiers); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           if (getBasePlacement(state.options.placement) === auto) { | 
					
						
							|  |  |  |  |             const flipModifier = state.orderedModifiers.find( | 
					
						
							|  |  |  |  |               ({ name }) => name === 'flip' | 
					
						
							|  |  |  |  |             ); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             if (!flipModifier) { | 
					
						
							|  |  |  |  |               console.error( | 
					
						
							|  |  |  |  |                 [ | 
					
						
							|  |  |  |  |                   'Popper: "auto" placements require the "flip" modifier be', | 
					
						
							|  |  |  |  |                   'present and enabled to work.', | 
					
						
							|  |  |  |  |                 ].join(' ') | 
					
						
							|  |  |  |  |               ); | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |           } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           const { | 
					
						
							|  |  |  |  |             marginTop, | 
					
						
							|  |  |  |  |             marginRight, | 
					
						
							|  |  |  |  |             marginBottom, | 
					
						
							|  |  |  |  |             marginLeft, | 
					
						
							|  |  |  |  |           } = getComputedStyle(popper); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           // 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((margin) => | 
					
						
							|  |  |  |  |               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() { | 
					
						
							|  |  |  |  |         if (isDestroyed) { | 
					
						
							|  |  |  |  |           return; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         const { reference, popper } = state.elements; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // Don't proceed if `reference` or `popper` are not valid elements | 
					
						
							|  |  |  |  |         // anymore | 
					
						
							|  |  |  |  |         if (!areValidElements(reference, popper)) { | 
					
						
							|  |  |  |  |           if (false) { | 
					
						
							|  |  |  |  |             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( | 
					
						
							|  |  |  |  |           (modifier) => | 
					
						
							|  |  |  |  |             (state.modifiersData[modifier.name] = { | 
					
						
							|  |  |  |  |               ...modifier.data, | 
					
						
							|  |  |  |  |             }) | 
					
						
							|  |  |  |  |         ); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         let __debug_loops__ = 0; | 
					
						
							|  |  |  |  |         for (let index = 0; index < state.orderedModifiers.length; index++) { | 
					
						
							|  |  |  |  |           if (false) { | 
					
						
							|  |  |  |  |             __debug_loops__ += 1; | 
					
						
							|  |  |  |  |             if (__debug_loops__ > 100) { | 
					
						
							|  |  |  |  |               console.error(INFINITE_LOOP_ERROR); | 
					
						
							|  |  |  |  |               break; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |           } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           if (state.reset === true) { | 
					
						
							|  |  |  |  |             state.reset = false; | 
					
						
							|  |  |  |  |             index = -1; | 
					
						
							|  |  |  |  |             continue; | 
					
						
							|  |  |  |  |           } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           const { fn, options = {}, name } = state.orderedModifiers[index]; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |           if (typeof fn === 'function') { | 
					
						
							|  |  |  |  |             state = fn({ state, options, name, 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<$Shape<State>>( | 
					
						
							|  |  |  |  |         () => | 
					
						
							|  |  |  |  |           new Promise<$Shape<State>>((resolve) => { | 
					
						
							|  |  |  |  |             instance.forceUpdate(); | 
					
						
							|  |  |  |  |             resolve(state); | 
					
						
							|  |  |  |  |           }) | 
					
						
							|  |  |  |  |       ), | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |       destroy() { | 
					
						
							|  |  |  |  |         cleanupModifierEffects(); | 
					
						
							|  |  |  |  |         isDestroyed = true; | 
					
						
							|  |  |  |  |       }, | 
					
						
							|  |  |  |  |     }; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     if (!areValidElements(reference, popper)) { | 
					
						
							|  |  |  |  |       if (false) { | 
					
						
							|  |  |  |  |         console.error(INVALID_ELEMENT_ERROR); | 
					
						
							|  |  |  |  |       } | 
					
						
							|  |  |  |  |       return instance; | 
					
						
							|  |  |  |  |     } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     instance.setOptions(options).then((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(({ name, options = {}, effect }) => { | 
					
						
							|  |  |  |  |         if (typeof effect === 'function') { | 
					
						
							|  |  |  |  |           const cleanupFn = effect({ state, name, instance, options }); | 
					
						
							|  |  |  |  |           const noopFn = () => {}; | 
					
						
							|  |  |  |  |           effectCleanupFns.push(cleanupFn || noopFn); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |       }); | 
					
						
							|  |  |  |  |     } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     function cleanupModifierEffects() { | 
					
						
							|  |  |  |  |       effectCleanupFns.forEach((fn) => fn()); | 
					
						
							|  |  |  |  |       effectCleanupFns = []; | 
					
						
							|  |  |  |  |     } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     return instance; | 
					
						
							|  |  |  |  |   }; | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | export const createPopper = popperGenerator(); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | // eslint-disable-next-line import/no-unused-modules | 
					
						
							|  |  |  |  | export { detectOverflow }; |