const { babel } = require('@rollup/plugin-babel')
const banner = require('./banner.js')
+const rootPath = path.resolve(__dirname, '../js/dist/')
const plugins = [
babel({
// Only transpile our source code
Toast: path.resolve(__dirname, '../js/src/toast.js'),
Tooltip: path.resolve(__dirname, '../js/src/tooltip.js')
}
-const rootPath = path.resolve(__dirname, '../js/dist/')
const defaultPluginConfig = {
external: [
if (pluginKey === 'Dropdown' || pluginKey === 'Tooltip') {
const config = Object.assign(defaultPluginConfig)
- config.external.push(bsPlugins.Manipulator, 'popper.js')
+ config.external.push(bsPlugins.Manipulator, '@popperjs/core')
config.globals[bsPlugins.Manipulator] = 'Manipulator'
- config.globals['popper.js'] = 'Popper'
+ config.globals['@popperjs/core'] = 'Popper'
return config
}
configPropertyName: 'js_bundle_hash'
},
{
- file: 'node_modules/popper.js/dist/umd/popper.min.js',
+ file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',
configPropertyName: 'popper_hash'
}
]
const path = require('path')
const { babel } = require('@rollup/plugin-babel')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
const banner = require('./banner.js')
const BUNDLE = process.env.BUNDLE === 'true'
const ESM = process.env.ESM === 'true'
let fileDest = `bootstrap${ESM ? '.esm' : ''}`
-const external = ['popper.js']
+const external = ['@popperjs/core']
const plugins = [
babel({
// Only transpile our source code
})
]
const globals = {
- 'popper.js': 'Popper'
+ '@popperjs/core': 'Popper'
}
if (BUNDLE) {
fileDest += '.bundle'
// Remove last entry in external array to bundle Popper
external.pop()
- delete globals['popper.js']
- plugins.push(nodeResolve())
+ delete globals['@popperjs/core']
+ plugins.push(replace({ 'process.env.NODE_ENV': '"production"' }), nodeResolve())
}
const rollupConfig = {
js_hash: "sha384-supZtwqjyYg6XvvTCi4/w6J6Hm6IKqXaaeoyGhIhonCdkSvA70sSucW7OqXIo4lZ"
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"
js_bundle_hash: "sha384-G/J8d6sz9bTod37AsZzNtTwT77J24FKjJEO1YsU2vW7iPcmYP3/tznu+LcK824t9"
- popper: "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
- popper_hash: "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
+ popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.2/dist/umd/popper.min.js"
+ popper_hash: "sha384-a46n7BtEJaPKKs2SeVxZzwKkapYzBUr8c7DyCLEpkRrs4LE03nlh53ZSOPgkJB7U"
* --------------------------------------------------------------------------
*/
+import * as Popper from '@popperjs/core'
+
import {
getjQuery,
onDOMContentLoaded,
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
-import Popper from 'popper.js'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_MENUEND = 'dropdown-menu-end'
const CLASS_NAME_NAVBAR = 'navbar'
-const CLASS_NAME_POSITION_STATIC = 'position-static'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
const SELECTOR_FORM_CHILD = '.dropdown form'
const Default = {
offset: 0,
flip: true,
- boundary: 'scrollParent',
+ boundary: 'clippingParents',
reference: 'toggle',
display: 'dynamic',
popperConfig: null
}
}
- // If boundary is not `scrollParent`, then set position to `static`
- // to allow the menu to "escape" the scroll parent's boundaries
- // https://github.com/twbs/bootstrap/issues/24251
- if (this._config.boundary !== 'scrollParent') {
- parent.classList.add(CLASS_NAME_POSITION_STATIC)
- }
-
- this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig())
+ this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
}
// If this is a touch-enabled device we add extra
super.dispose()
EventHandler.off(this._element, EVENT_KEY)
this._menu = null
+
if (this._popper) {
this._popper.destroy()
this._popper = null
update() {
this._inNavbar = this._detectNavbar()
if (this._popper) {
- this._popper.scheduleUpdate()
+ this._popper.update()
}
}
return Boolean(this._element.closest(`.${CLASS_NAME_NAVBAR}`))
}
- _getOffset() {
- const offset = {}
-
- if (typeof this._config.offset === 'function') {
- offset.fn = data => {
- data.offsets = {
- ...data.offsets,
- ...(this._config.offset(data.offsets, this._element) || {})
- }
-
- return data
- }
- } else {
- offset.offset = this._config.offset
- }
-
- return offset
- }
-
_getPopperConfig() {
const popperConfig = {
placement: this._getPlacement(),
- modifiers: {
- offset: this._getOffset(),
- flip: {
- enabled: this._config.flip
- },
- preventOverflow: {
- boundariesElement: this._config.boundary
+ modifiers: [{
+ name: 'preventOverflow',
+ options: {
+ altBoundary: this._config.flip,
+ rootBoundary: this._config.boundary
}
- }
+ }]
}
// Disable Popper if we have a static display
if (this._config.display === 'static') {
- popperConfig.modifiers.applyStyle = {
+ popperConfig.modifiers = [{
+ name: 'applyStyles',
enabled: false
- }
+ }]
}
return {
* --------------------------------------------------------------------------
*/
+import * as Popper from '@popperjs/core'
+
import {
getjQuery,
onDOMContentLoaded,
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
-import Popper from 'popper.js'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
html: 'boolean',
selector: '(string|boolean)',
placement: '(string|function)',
- offset: '(number|string|function)',
container: '(string|element|boolean)',
- fallbackPlacement: '(string|array)',
+ fallbackPlacements: '(null|array)',
boundary: '(string|element)',
customClass: '(string|function)',
sanitize: 'boolean',
html: false,
selector: false,
placement: 'top',
- offset: 0,
container: false,
- fallbackPlacement: 'flip',
- boundary: 'scrollParent',
+ fallbackPlacements: null,
+ boundary: 'clippingParents',
customClass: '',
sanitize: true,
sanitizeFn: null,
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
- this._popper = new Popper(this._element, tip, this._getPopperConfig(attachment))
+ this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
tip.classList.add(CLASS_NAME_SHOW)
}
const complete = () => {
- if (this.config.animation) {
- this._fixTransition()
- }
-
const prevHoverState = this._hoverState
- this._hoverState = null
+ this._hoverState = null
EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
if (prevHoverState === HOVER_STATE_OUT) {
this._cleanTipClass()
this._element.removeAttribute('aria-describedby')
EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
- this._popper.destroy()
+
+ if (this._popper) {
+ this._popper.destroy()
+ this._popper = null
+ }
}
const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
update() {
if (this._popper !== null) {
- this._popper.scheduleUpdate()
+ this._popper.update()
}
}
// Private
_getPopperConfig(attachment) {
+ const flipModifier = {
+ name: 'flip',
+ options: {
+ altBoundary: true
+ }
+ }
+
+ if (this.config.fallbackPlacements) {
+ flipModifier.options.fallbackPlacements = this.config.fallbackPlacements
+ }
+
const defaultBsConfig = {
placement: attachment,
- modifiers: {
- offset: this._getOffset(),
- flip: {
- behavior: this.config.fallbackPlacement
+ modifiers: [
+ flipModifier,
+ {
+ name: 'preventOverflow',
+ options: {
+ rootBoundary: this.config.boundary
+ }
},
- arrow: {
- element: `.${this.constructor.NAME}-arrow`
+ {
+ name: 'arrow',
+ options: {
+ element: `.${this.constructor.NAME}-arrow`
+ }
},
- preventOverflow: {
- boundariesElement: this.config.boundary
+ {
+ name: 'onChange',
+ enabled: true,
+ phase: 'afterWrite',
+ fn: data => this._handlePopperPlacementChange(data)
}
- },
- onCreate: data => {
- if (data.originalPlacement !== data.placement) {
+ ],
+ onFirstUpdate: data => {
+ if (data.options.placement !== data.placement) {
this._handlePopperPlacementChange(data)
}
- },
- onUpdate: data => this._handlePopperPlacementChange(data)
+ }
}
return {
this.getTipElement().classList.add(`${CLASS_PREFIX}-${this.updateAttachment(attachment)}`)
}
- _getOffset() {
- const offset = {}
-
- if (typeof this.config.offset === 'function') {
- offset.fn = data => {
- data.offsets = {
- ...data.offsets,
- ...(this.config.offset(data.offsets, this._element) || {})
- }
-
- return data
- }
- } else {
- offset.offset = this.config.offset
- }
-
- return offset
- }
-
_getContainer() {
if (this.config.container === false) {
return document.body
}
_handlePopperPlacementChange(popperData) {
- this.tip = popperData.instance.popper
- this._cleanTipClass()
- this._addAttachmentClass(this._getAttachment(popperData.placement))
- }
+ const { state } = popperData
- _fixTransition() {
- const tip = this.getTipElement()
- const initConfigAnimation = this.config.animation
- if (tip.getAttribute('x-placement') !== null) {
+ if (!state) {
return
}
- tip.classList.remove(CLASS_NAME_FADE)
- this.config.animation = false
- this.hide()
- this.show()
- this.config.animation = initConfigAnimation
+ this.tip = state.elements.popper
+ this._cleanTipClass()
+ this._addAttachmentClass(this._getAttachment(state.placement))
}
// Static
-import 'popper.js'
import Tooltip from '../../dist/tooltip'
+import '../../dist/carousel'
window.addEventListener('load', () => {
[].concat(...document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-import 'popper.js'
import { Tooltip } from '../../../dist/js/bootstrap.esm.js'
window.addEventListener('load', () => {
const { babel } = require('@rollup/plugin-babel')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
module.exports = {
input: 'js/tests/integration/bundle.js',
format: 'iife'
},
plugins: [
+ replace({
+ 'process.env.NODE_ENV': '"production"'
+ }),
nodeResolve(),
babel({
exclude: 'node_modules/**',
const { babel } = require('@rollup/plugin-babel')
const istanbul = require('rollup-plugin-istanbul')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
const {
browsers,
},
rollupPreprocessor: {
plugins: [
+ replace({
+ 'process.env.NODE_ENV': '"dev"'
+ }),
istanbul({
exclude: [
'node_modules/**',
-import Popper from 'popper.js'
-
import Dropdown from '../../src/dropdown'
import EventHandler from '../../src/dom/event-handler'
})
describe('constructor', () => {
- it('should create offset modifier correctly when offset option is a function', () => {
- fixtureEl.innerHTML = [
- '<div class="dropdown">',
- ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
- ' <div class="dropdown-menu">',
- ' <a class="dropdown-item" href="#">Secondary link</a>',
- ' </div>',
- '</div>'
- ].join('')
-
- const getOffset = offsets => offsets
- const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdown = new Dropdown(btnDropdown, {
- offset: getOffset
- })
-
- const offset = dropdown._getOffset()
-
- expect(offset.offset).toBeUndefined()
- expect(typeof offset.fn).toEqual('function')
- })
-
- it('should create offset modifier correctly when offset option is not a function', () => {
- fixtureEl.innerHTML = [
- '<div class="dropdown">',
- ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
- ' <div class="dropdown-menu">',
- ' <a class="dropdown-item" href="#">Secondary link</a>',
- ' </div>',
- '</div>'
- ].join('')
-
- const myOffset = 7
- const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdown = new Dropdown(btnDropdown, {
- offset: myOffset
- })
-
- const offset = dropdown._getOffset()
-
- expect(offset.offset).toEqual(myOffset)
- expect(offset.fn).toBeUndefined()
- })
-
it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
expect(dropdown._menu).toBeDefined()
expect(dropdown._element).toBeDefined()
- spyOn(Popper.prototype, 'destroy')
-
dropdown.dispose()
expect(dropdown._popper).toBeNull()
expect(dropdown._menu).toBeNull()
expect(dropdown._element).toBeNull()
- expect(Popper.prototype.destroy).toHaveBeenCalled()
})
})
expect(dropdown._popper).toBeDefined()
- spyOn(dropdown._popper, 'scheduleUpdate')
+ spyOn(dropdown._popper, 'update')
spyOn(dropdown, '_detectNavbar')
dropdown.update()
- expect(dropdown._popper.scheduleUpdate).toHaveBeenCalled()
+ expect(dropdown._popper.update).toHaveBeenCalled()
expect(dropdown._detectNavbar).toHaveBeenCalled()
})
})
describe('data-api', () => {
- it('should not add class position-static to dropdown if boundary not set', done => {
- fixtureEl.innerHTML = [
- '<div class="dropdown">',
- ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
- ' <div class="dropdown-menu">',
- ' <a class="dropdown-item" href="#">Secondary link</a>',
- ' </div>',
- '</div>'
- ].join('')
-
- const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdownEl = fixtureEl.querySelector('.dropdown')
-
- dropdownEl.addEventListener('shown.bs.dropdown', () => {
- expect(dropdownEl.classList.contains('position-static')).toEqual(false)
- done()
- })
-
- btnDropdown.click()
- })
-
- it('should add class position-static to dropdown if boundary not scrollParent', done => {
- fixtureEl.innerHTML = [
- '<div class="dropdown">',
- ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>',
- ' <div class="dropdown-menu">',
- ' <a class="dropdown-item" href="#">Secondary link</a>',
- ' </div>',
- '</div>'
- ].join('')
-
- const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdownEl = fixtureEl.querySelector('.dropdown')
-
- dropdownEl.addEventListener('shown.bs.dropdown', () => {
- expect(dropdownEl.classList.contains('position-static')).toEqual(true)
- done()
- })
-
- btnDropdown.click()
- })
-
it('should show and hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
tooltip.show()
})
- it('should show a tooltip with offset as a function', done => {
- fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
-
- const spy = jasmine.createSpy('offset').and.returnValue({})
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- offset: spy
- })
-
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).toBeDefined()
- expect(spy).toHaveBeenCalled()
- done()
- })
-
- tooltip.show()
- })
-
it('should show a tooltip without the animation', done => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
})
describe('update', () => {
- it('should call popper schedule update', done => {
+ it('should call popper update', done => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl)
tooltipEl.addEventListener('shown.bs.tooltip', () => {
- spyOn(tooltip._popper, 'scheduleUpdate')
+ spyOn(tooltip._popper, 'update')
tooltip.update()
- expect(tooltip._popper.scheduleUpdate).toHaveBeenCalled()
+ expect(tooltip._popper.update).toHaveBeenCalled()
done()
})
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
+ </div>
+ <div class="col-sm-12 mt-4">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
</div>
<div class="row">
- <div class="col-sm-3 mt-4">
- <div class="btn-group dropdown">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="10,20">Dropdown offset</button>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- </ul>
- </div>
- </div>
<div class="col-sm-3 mt-4">
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary">Dropdown reference</button>
</div>
</div>
</div>
-
</div>
- <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+ <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../../dist/dom/event-handler.js"></script>
<script src="../../dist/dom/selector-engine.js"></script>
<script src="../../dist/dom/data.js"></script>
</button>
</div>
- <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+ <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../../dist/dom/event-handler.js"></script>
<script src="../../dist/dom/selector-engine.js"></script>
<script src="../../dist/dom/manipulator.js"></script>
<div id="customContainer"></div>
</div>
- <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+ <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../../dist/dom/selector-engine.js"></script>
<script src="../../dist/dom/event-handler.js"></script>
<script src="../../dist/dom/manipulator.js"></script>
<copyright>Copyright 2017-2020</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
- <dependency id="popper.js" version="[1.16.1,2)" />
+ <dependency id="@popperjs/core" version="[2.4.2,3)" />
</dependencies>
<tags>css mobile-first responsive front-end framework web</tags>
<contentFiles>
<copyright>Copyright 2017-2020</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
- <dependency id="popper.js" version="[1.16.1,2)" />
+ <dependency id="@popperjs/core" version="[2.4.2,3)" />
</dependencies>
<tags>css sass mobile-first responsive front-end framework web</tags>
<contentFiles>
"fastq": "^1.6.0"
}
},
+ "@popperjs/core": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.2.tgz",
+ "integrity": "sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ==",
+ "dev": true
+ },
"@rollup/plugin-babel": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz",
"resolve": "^1.19.0"
}
},
+ "@rollup/plugin-replace": {
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz",
+ "integrity": "sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==",
+ "dev": true,
+ "requires": {
+ "@rollup/pluginutils": "^3.1.0",
+ "magic-string": "^0.25.7"
+ }
+ },
"@rollup/pluginutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
"dev": true
},
- "popper.js": {
- "version": "1.16.1",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
- "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
- "dev": true
- },
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
},
"dependencies": {},
"peerDependencies": {
- "popper.js": "^1.16.1"
+ "@popperjs/core": "^2.4.2"
},
"devDependencies": {
"@babel/cli": "^7.12.8",
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
+ "@popperjs/core": "^2.4.2",
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
+ "@rollup/plugin-replace": "^2.3.4",
"autoprefixer": "^10.0.4",
"bundlewatch": "^0.3.1",
"clean-css-cli": "^4.3.0",
"lockfile-lint": "^4.3.7",
"nodemon": "^2.0.6",
"npm-run-all": "^4.1.5",
- "popper.js": "^1.16.1",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"rollup": "^2.34.0",
"shim": {
"js/bootstrap": {
"deps": [
- "popper.js"
+ "@popperjs/core"
]
}
},
"dependencies": {},
"peerDependencies": {
- "popper.js": "^1.16.1"
+ "@popperjs/core": "^2.4.2"
}
}
}
// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
- &[x-placement^="top"],
- &[x-placement^="right"],
- &[x-placement^="bottom"],
- &[x-placement^="left"] {
+ &[data-popper-placement^="top"],
+ &[data-popper-placement^="right"],
+ &[data-popper-placement^="bottom"],
+ &[data-popper-placement^="left"] {
right: auto;
bottom: auto;
left: auto;
}
.bs-popover-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^="top"] {
@extend .bs-popover-top;
}
- &[x-placement^="right"] {
+ &[data-popper-placement^="right"] {
@extend .bs-popover-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom;
}
- &[x-placement^="left"] {
+ &[data-popper-placement^="left"] {
@extend .bs-popover-start;
}
}
bottom: 0;
&::before {
- top: 0;
+ top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-top-color: $tooltip-arrow-color;
}
height: $tooltip-arrow-width;
&::before {
- right: 0 #{"/* rtl:ignore */"};
+ right: -1px #{"/* rtl:ignore */"};
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0 #{"/* rtl:ignore */"};
border-right-color: $tooltip-arrow-color #{"/* rtl:ignore */"};
}
top: 0;
&::before {
- bottom: 0;
+ bottom: -1px;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
height: $tooltip-arrow-width;
&::before {
- left: 0 #{"/* rtl:ignore */"};
+ left: -1px #{"/* rtl:ignore */"};
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height #{"/* rtl:ignore */"};
border-left-color: $tooltip-arrow-color #{"/* rtl:ignore */"};
}
}
.bs-tooltip-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^="top"] {
@extend .bs-tooltip-top;
}
- &[x-placement^="right"] {
+ &[data-popper-placement^="right"] {
@extend .bs-tooltip-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
- &[x-placement^="left"] {
+ &[data-popper-placement^="left"] {
@extend .bs-tooltip-start;
}
}
</tr>
</thead>
<tbody>
- <tr>
- <td><code>offset</code></td>
- <td>number | string | function</td>
- <td><code>0</code></td>
- <td>
- <p>Offset of the dropdown relative to its target.</p>
- <p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
- <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
- </td>
- </tr>
<tr>
<td><code>flip</code></td>
<td>boolean</td>
<td><code>true</code></td>
- <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
+ <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/">flip docs</a>.</td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>string | element</td>
<td><code>'scrollParent'</code></td>
- <td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
+ <td>Overflow constraint boundary of the dropdown menu. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
</tr>
<tr>
<td><code>reference</code></td>
<td>string | element</td>
<td><code>'toggle'</code></td>
- <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
+ <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a>.</td>
</tr>
<tr>
<td><code>display</code></td>
<p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p>
</td>
</tr>
- <tr>
- <td><code>offset</code></td>
- <td>number | string | function</td>
- <td><code>0</code></td>
- <td>
- <p>Offset of the tooltip relative to its target.</p>
- <p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
- <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
- </td>
- </tr>
<tr>
<td><code>fallbackPlacement</code></td>
- <td>string | array</td>
- <td><code>'flip'</code></td>
+ <td>null | array</td>
+ <td><code>null</code></td>
<td>Allow to specify which position Popper will use on fallback. For more information refer to
- Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
+ Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>string | element</td>
- <td><code>'scrollParent'</code></td>
- <td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
+ <td><code>'clippingParents'</code></td>
+ <td>Overflow constraint boundary of the tooltip. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
</tr>
<tr>
<td><code>customClass</code></td>
```
Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
-This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`.
+This means that you will have to make sure to add it to your `package.json` using `npm install @popperjs/core`.
## Importing Styles
- Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
+- Moved from Popper v1.x to Popper v2.x
+- Removed `offset` option from our Tooltip/Popover and Dropdown plugin, this can still be achieve using `popperConfig` parameter.
### Color system
projects / thirdparty / bootstrap.git / commitdiff
