export default Popper; /** * Create a new Popper.js instance * @constructor Popper * @param {HTMLElement} reference - The reference element used to position the popper * @param {HTMLElement|Object} popper * The HTML element used as popper, or a configuration used to generate the popper. * @param {String} [popper.tagName='div'] The tag name of the generated popper. * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper. * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it. * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string. * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`. * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is. * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element. * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element. * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element. * @param {Object} options * @param {String} [options.placement=bottom] * Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right), * left(-start, -end)` * * @param {HTMLElement|String} [options.arrowElement='[x-arrow]'] * The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of * its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its * reference element. * By default, it will look for a child node of the popper with the `x-arrow` attribute. * * @param {Boolean} [options.gpuAcceleration=true] * When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the * browser to use the GPU to accelerate the rendering. * If set to false, the popper will be placed using `top` and `left` properties, not using the GPU. * * @param {Number} [options.offset=0] * Amount of pixels the popper will be shifted (can be negative). * * @param {String|Element} [options.boundariesElement='viewport'] * The element which will define the boundaries of the popper position, the popper will never be placed outside * of the defined boundaries (except if `keepTogether` is enabled) * * @param {Number} [options.boundariesPadding=5] * Additional padding for the boundaries * * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']] * Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order, * this means that the last ones will never overflow * * @param {String|Array} [options.flipBehavior='flip'] * The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to * overlap its reference element. Defining `flip` as value, the placement will be flipped on * its axis (`right - left`, `top - bottom`). * You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify * how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left, * then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top) * * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']] * List of functions used to modify the data before they are applied to the popper, add your custom functions * to this array to edit the offsets and placement. * The function should reflect the @params and @returns of preventOverflow * * @param {Array} [options.modifiersIgnored=[]] * Put here any built-in modifier name you want to exclude from the modifiers list * The function should reflect the @params and @returns of preventOverflow * * @param {Boolean} [options.removeOnDestroy=false] * Set to true if you want to automatically remove the popper when you call the `destroy` method. */ declare function Popper(reference: HTMLElement, popper: HTMLElement | Object, options: { placement?: string | undefined; arrowElement?: string | HTMLElement | undefined; gpuAcceleration?: boolean | undefined; offset?: number | undefined; boundariesElement?: string | Element | undefined; boundariesPadding?: number | undefined; preventOverflowOrder?: any[] | undefined; flipBehavior?: string | any[] | undefined; modifiers?: any[] | undefined; }): this; declare class Popper { /** * Create a new Popper.js instance * @constructor Popper * @param {HTMLElement} reference - The reference element used to position the popper * @param {HTMLElement|Object} popper * The HTML element used as popper, or a configuration used to generate the popper. * @param {String} [popper.tagName='div'] The tag name of the generated popper. * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper. * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it. * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string. * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`. * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is. * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element. * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element. * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element. * @param {Object} options * @param {String} [options.placement=bottom] * Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right), * left(-start, -end)` * * @param {HTMLElement|String} [options.arrowElement='[x-arrow]'] * The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of * its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its * reference element. * By default, it will look for a child node of the popper with the `x-arrow` attribute. * * @param {Boolean} [options.gpuAcceleration=true] * When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the * browser to use the GPU to accelerate the rendering. * If set to false, the popper will be placed using `top` and `left` properties, not using the GPU. * * @param {Number} [options.offset=0] * Amount of pixels the popper will be shifted (can be negative). * * @param {String|Element} [options.boundariesElement='viewport'] * The element which will define the boundaries of the popper position, the popper will never be placed outside * of the defined boundaries (except if `keepTogether` is enabled) * * @param {Number} [options.boundariesPadding=5] * Additional padding for the boundaries * * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']] * Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order, * this means that the last ones will never overflow * * @param {String|Array} [options.flipBehavior='flip'] * The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to * overlap its reference element. Defining `flip` as value, the placement will be flipped on * its axis (`right - left`, `top - bottom`). * You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify * how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left, * then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top) * * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']] * List of functions used to modify the data before they are applied to the popper, add your custom functions * to this array to edit the offsets and placement. * The function should reflect the @params and @returns of preventOverflow * * @param {Array} [options.modifiersIgnored=[]] * Put here any built-in modifier name you want to exclude from the modifiers list * The function should reflect the @params and @returns of preventOverflow * * @param {Boolean} [options.removeOnDestroy=false] * Set to true if you want to automatically remove the popper when you call the `destroy` method. */ constructor(reference: HTMLElement, popper: HTMLElement | Object, options: { placement?: string | undefined; arrowElement?: string | HTMLElement | undefined; gpuAcceleration?: boolean | undefined; offset?: number | undefined; boundariesElement?: string | Element | undefined; boundariesPadding?: number | undefined; preventOverflowOrder?: any[] | undefined; flipBehavior?: string | any[] | undefined; modifiers?: any[] | undefined; }); _reference: any; state: {}; _popper: any; _options: { placement: string; gpuAcceleration: boolean; offset: number; boundariesElement: string; boundariesPadding: number; preventOverflowOrder: string[]; flipBehavior: string; arrowElement: string; arrowOffset: number; modifiers: string[]; modifiersIgnored: never[]; forceAbsolute: boolean; forceFixed: boolean; } & { placement?: string | undefined; arrowElement?: string | HTMLElement | undefined; gpuAcceleration?: boolean | undefined; offset?: number | undefined; boundariesElement?: string | Element | undefined; boundariesPadding?: number | undefined; preventOverflowOrder?: any[] | undefined; flipBehavior?: string | any[] | undefined; modifiers?: any[] | undefined; }; /** * Destroy the popper * @method * @memberof Popper */ destroy(): Popper; /** * Updates the position of the popper, computing the new offsets and applying the new style * @method * @memberof Popper */ update(): void; /** * If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance. * @method * @memberof Popper * @param {Function} callback */ onCreate(callback: Function): Popper; /** * If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations * used to style popper and its arrow. * NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor! * @method * @memberof Popper * @param {Function} callback */ onUpdate(callback: Function): Popper; /** * Helper used to generate poppers from a configuration file * @method * @memberof Popper * @param config {Object} configuration * @returns {HTMLElement} popper */ parse(config: Object): HTMLElement; /** * Helper used to get the position which will be applied to the popper * @method * @memberof Popper * @param config {HTMLElement} popper element * @param reference {HTMLElement} reference element * @returns {String} position */ _getPosition(popper: any, reference: HTMLElement): string; /** * Get offsets to the popper * @method * @memberof Popper * @access private * @param {Element} popper - the popper element * @param {Element} reference - the reference element (the popper will be relative to this) * @returns {Object} An object containing the offsets which will be applied to the popper */ _getOffsets(popper: Element, reference: Element, placement: any): Object; /** * Setup needed event listeners used to update the popper position * @method * @memberof Popper * @access private */ _setupEventListeners(): void; /** * Remove event listeners used to update the popper position * @method * @memberof Popper * @access private */ _removeEventListeners(): void; /** * Computed the boundaries limits and return them * @method * @memberof Popper * @access private * @param {Object} data - Object containing the property "offsets" generated by `_getOffsets` * @param {Number} padding - Boundaries padding * @param {Element} boundariesElement - Element used to define the boundaries * @returns {Object} Coordinates of the boundaries */ _getBoundaries(data: Object, padding: number, boundariesElement: Element): Object; /** * Loop trough the list of modifiers and run them in order, each of them will then edit the data object * @method * @memberof Popper * @access public * @param {Object} data * @param {Array} modifiers * @param {Function} ends */ runModifiers(data: Object, modifiers: any[], ends: Function): Object; /** * Helper used to know if the given modifier depends from another one. * @method * @memberof Popper * @param {String} requesting - name of requesting modifier * @param {String} requested - name of requested modifier * @returns {Boolean} */ isModifierRequired(requesting: string, requested: string): boolean; /** * Modifiers list * @namespace Popper.modifiers * @memberof Popper * @type {Object} */ modifiers: Object; } declare namespace Popper { namespace prototype { namespace modifiers { /** * Apply the computed styles to the popper element * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by `update` method * @returns {Object} The same data object */ function applyStyle(data: Object): Object; /** * Modifier used to shift the popper on the start or end of its reference element side * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by `update` method * @returns {Object} The data object, properly modified */ function shift(data: Object): Object; /** * Modifier used to make sure the popper does not overflows from it's boundaries * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by `update` method * @returns {Object} The data object, properly modified */ function preventOverflow(data: Object): Object; /** * Modifier used to make sure the popper is always near its reference * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by _update method * @returns {Object} The data object, properly modified */ function keepTogether(data: Object): Object; /** * Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element. * Requires the `preventOverflow` modifier before it in order to work. * **NOTE:** This modifier will run all its previous modifiers everytime it tries to flip the popper! * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by _update method * @returns {Object} The data object, properly modified */ function flip(data: Object): Object; /** * Modifier used to add an offset to the popper, useful if you more granularity positioning your popper. * The offsets will shift the popper on the side of its reference element. * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by _update method * @returns {Object} The data object, properly modified */ function offset(data: Object): Object; /** * Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element * It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed * @method * @memberof Popper.modifiers * @argument {Object} data - The data object generated by _update method * @returns {Object} The data object, properly modified */ function arrow(data: Object): Object; } } }