feat(lib): Change PopperJs to Floating UI

.bundlewatch.config.json

@@ -10,11 +10,11 @@
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",
-      "maxSize": "9.5 kB"
+      "maxSize": "7.5 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.min.css",
-      "maxSize": "8.5 kB"
+      "maxSize": "7 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-reboot.css",
@@ -26,43 +26,43 @@
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-utilities.css",
-      "maxSize": "24.0 kB"
+      "maxSize": "23.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-utilities.min.css",
-      "maxSize": "23.25 kB"
+      "maxSize": "22.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.css",
-      "maxSize": "65.5 kB"
+      "maxSize": "65.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.min.css",
-      "maxSize": "61.75 kB"
+      "maxSize": "61.5 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",
-      "maxSize": "48.5 kB"
+      "maxSize": "46 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.min.js",
-      "maxSize": "25.5 kB"
+      "maxSize": "24 kB"
     },
     {
       "path": "./dist/js/ouds-web.esm.js",
-      "maxSize": "33.25 kB"
+      "maxSize": "32 kB"
     },
     {
       "path": "./dist/js/ouds-web.esm.min.js",
-      "maxSize": "20.5 kB"
+      "maxSize": "20 kB"
     },
     {
       "path": "./dist/js/ouds-web.js",
-      "maxSize": "34.0 kB"
+      "maxSize": "32.75 kB"
     },
     {
       "path": "./dist/js/ouds-web.min.js",
-      "maxSize": "18.25 kB"
+      "maxSize": "17.75 kB"
     }
   ],
   "ci": {

.github/dependabot.yml

@@ -37,7 +37,6 @@ updates:
       - dependency-name: "@babel/core"
       - dependency-name: "@babel/preset-env"
       - dependency-name: "@docsearch/js"
-      - dependency-name: "@popperjs/core"
       - dependency-name: "@rollup/plugin-babel"
       - dependency-name: "@rollup/plugin-commonjs"
       - dependency-name: "@rollup/plugin-node-resolve"
@@ -67,7 +66,6 @@ updates:
       - dependency-name: "image-size"
       - dependency-name: "ip"
       - dependency-name: "jasmine"
-      - dependency-name: "jquery"
       - dependency-name: "js-yaml"
       - dependency-name: "karma"
       - dependency-name: "karma-browserstack-launcher"

README.md

@@ -129,7 +129,7 @@ Within the download you’ll find the following directories and files, logically
   ```
 </details>
 
-We provide compiled CSS and JS (`ouds-web.*`), as well as compiled and minified CSS and JS (`ouds-web.min.*`). [Source maps](https://web.dev/articles/source-maps) (`ouds-web.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`ouds-web.bundle.js` and minified `ouds-web.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
+We provide compiled CSS and JS (`ouds-web.*`), as well as compiled and minified CSS and JS (`ouds-web.min.*`). [Source maps](https://web.dev/articles/source-maps) (`ouds-web.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`ouds-web.bundle.js` and minified `ouds-web.bundle.min.js`) include [Floating UI](https://floating-ui.com/).
 
 We also provide a compiled and minified CSS (`ouds-web-bootstrap.*` and `ouds-web-bootstrap.min.*`) enforcing Bootstrap compatibility.
 

build/generate-sri.mjs

@@ -53,8 +53,8 @@ for (const brand of BRANDS) {
       configPropertyName: 'js_bundle_hash'
     },
     {
-      file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',
-      configPropertyName: 'popper_hash'
+      file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js',
+      configPropertyName: 'floating_ui_hash'
     }
   ]
 

build/rollup.config.mjs

@@ -12,7 +12,7 @@ const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
 let destinationFile = `ouds-web${ESM ? '.esm' : ''}`
-const external = ['@popperjs/core']
+const external = ['@floating-ui/dom']
 const plugins = [
   babel({
     // Only transpile our source code
@@ -22,14 +22,14 @@ const plugins = [
   })
 ]
 const globals = {
-  '@popperjs/core': 'Popper'
+  '@floating-ui/dom': 'FloatingUIDOM'
 }
 
 if (BUNDLE) {
   destinationFile += '.bundle'
-  // Remove last entry in external array to bundle Popper
+  // Remove last entry in external array to bundle Floating UI
   external.pop()
-  delete globals['@popperjs/core']
+  delete globals['@floating-ui/dom']
   plugins.push(
     replace({
       'process.env.NODE_ENV': '"production"',

js/src/alert.js

@@ -8,7 +8,6 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions.js'
-import { defineJQueryPlugin } from './util/index.js'
 
 /**
  * Constants
@@ -53,23 +52,6 @@ class Alert extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_CLOSED)
     this.dispose()
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Alert.getOrCreateInstance(this)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config](this)
-    })
-  }
 }
 
 /**
@@ -78,10 +60,4 @@ class Alert extends BaseComponent {
 
 enableDismissTrigger(Alert, 'close')
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Alert)
-
 export default Alert

js/src/button.js

@@ -7,7 +7,6 @@
 
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
-import { defineJQueryPlugin } from './util/index.js'
 
 /**
  * Constants
@@ -37,17 +36,6 @@ class Button extends BaseComponent {
     // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
     this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Button.getOrCreateInstance(this)
-
-      if (config === 'toggle') {
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -63,10 +51,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
   data.toggle()
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Button)
-
 export default Button

js/src/carousel.js

@@ -10,7 +10,6 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin,
   getNextActiveElement,
   isRTL,
   isVisible,
@@ -557,25 +556,6 @@ class Carousel extends BaseComponent {
     }
   }
   // End mod
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Carousel.getOrCreateInstance(this, config)
-
-      if (typeof config === 'number') {
-        data.to(config)
-        return
-      }
-
-      if (typeof config === 'string') {
-        if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -620,10 +600,4 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   }
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Carousel)
-
 export default Carousel

js/src/collapse.js

@@ -9,7 +9,6 @@ import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin,
   getElement,
   reflow
 } from './util/index.js'
@@ -254,26 +253,6 @@ class Collapse extends BaseComponent {
       element.setAttribute('aria-expanded', isOpen)
     }
   }
-
-  // Static
-  static jQueryInterface(config) {
-    const _config = {}
-    if (typeof config === 'string' && /show|hide/.test(config)) {
-      _config.toggle = false
-    }
-
-    return this.each(function () {
-      const data = Collapse.getOrCreateInstance(this, _config)
-
-      if (typeof config === 'string') {
-        if (typeof data[config] === 'undefined') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -291,10 +270,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   }
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Collapse)
-
 export default Collapse

js/src/dom/event-handler.js

@@ -5,8 +5,6 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery } from '../util/index.js'
-
 /**
  * Constants
  */
@@ -261,37 +259,8 @@ const EventHandler = {
       return null
     }
 
-    const $ = getjQuery()
-    const typeEvent = getTypeEvent(event)
-    const inNamespace = event !== typeEvent
-
-    let jQueryEvent = null
-    let bubbles = true
-    let nativeDispatch = true
-    let defaultPrevented = false
-
-    if (inNamespace && $) {
-      jQueryEvent = $.Event(event, args)
-
-      $(element).trigger(jQueryEvent)
-      bubbles = !jQueryEvent.isPropagationStopped()
-      nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
-      defaultPrevented = jQueryEvent.isDefaultPrevented()
-    }
-
-    const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
-
-    if (defaultPrevented) {
-      evt.preventDefault()
-    }
-
-    if (nativeDispatch) {
-      element.dispatchEvent(evt)
-    }
-
-    if (evt.defaultPrevented && jQueryEvent) {
-      jQueryEvent.preventDefault()
-    }
+    const evt = hydrateObj(new Event(event, { bubbles: true, cancelable: true }), args)
+    element.dispatchEvent(evt)
 
     return evt
   }