move to popperjs v2

twbs · Jun 25, 2020 · 797e178 · 797e178
1 parent acdeaed
commit 797e178
Show file tree

Hide file tree

Showing 24 changed files with 141 additions and 275 deletions.
diff --git a/build/build-plugins.js b/build/build-plugins.js
@@ -14,6 +14,7 @@ const rollup = require('rollup')
 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
@@ -40,7 +41,6 @@ const bsPlugins = {
   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: [
@@ -92,9 +92,9 @@ const getConfigByPluginKey = pluginKey => {
 
   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
   }
 

diff --git a/build/generate-sri.js b/build/generate-sri.js
@@ -38,7 +38,7 @@ const files = [
     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'
   }
 ]

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -3,13 +3,14 @@
 const path = require('path')
 const { babel } = require('@rollup/plugin-babel')
 const resolve = 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
@@ -19,15 +20,15 @@ const plugins = [
   })
 ]
 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(resolve())
+  delete globals['@popperjs/core']
+  plugins.push(replace({ 'process.env.NODE_ENV': '"production"' }), resolve())
 }
 
 const rollupConfig = {

diff --git a/config.yml b/config.yml
@@ -74,5 +74,5 @@ params:
     js_hash:          "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
     js_bundle:        "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"
     js_bundle_hash:   "sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl"
-    popper:           "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-    popper_hash:      "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.2/dist/umd/popper.min.js"
+    popper_hash:      "sha384-a46n7BtEJaPKKs2SeVxZzwKkapYzBUr8c7DyCLEpkRrs4LE03nlh53ZSOPgkJB7U"
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import * as Popper from '@popperjs/core'
+
 import {
   getjQuery,
   getElementFromSelector,
@@ -16,7 +18,6 @@ import {
 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'
 
 /**
@@ -56,7 +57,6 @@ const CLASS_NAME_DROPRIGHT = 'dropright'
 const CLASS_NAME_DROPLEFT = 'dropleft'
 const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
 const CLASS_NAME_NAVBAR = 'navbar'
-const CLASS_NAME_POSITION_STATIC = 'position-static'
 
 const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]'
 const SELECTOR_FORM_CHILD = '.dropdown form'
@@ -74,7 +74,7 @@ const PLACEMENT_LEFT = 'left-start'
 const Default = {
   offset: 0,
   flip: true,
-  boundary: 'scrollParent',
+  boundary: 'clippingParents',
   reference: 'toggle',
   display: 'dynamic',
   popperConfig: null
@@ -174,14 +174,7 @@ class Dropdown {
         }
       }
 
-      // 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
@@ -232,6 +225,7 @@ class Dropdown {
     EventHandler.off(this._element, EVENT_KEY)
     this._element = null
     this._menu = null
+
     if (this._popper) {
       this._popper.destroy()
       this._popper = null
@@ -241,7 +235,7 @@ class Dropdown {
   update() {
     this._inNavbar = this._detectNavbar()
     if (this._popper) {
-      this._popper.scheduleUpdate()
+      this._popper.update()
     }
   }
 
@@ -296,44 +290,25 @@ class Dropdown {
     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.js if we have a static display
     if (this._config.display === 'static') {
-      popperConfig.modifiers.applyStyle = {
-        enabled: false
-      }
+      popperConfig.modifiers = [
+        { name: 'applyStyles', enabled: false }
+      ]
     }
 
     return {