Merge branch 'twbs:main' into mainHEADmain

1 files changed, 34 insertions, 21 deletions

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index fb1b2776b..82b54900e 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -1,12 +1,15 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): util/backdrop.js
+ * Bootstrap util/backdrop.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
+import EventHandler from '../dom/event-handler.js'
+import Config from './config.js'
+import {
+  execute, executeAfterTransition, getElement, reflow
+} from './index.js'
 
 /**
  * Constants
@@ -19,31 +22,45 @@ const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
 
 const Default = {
   className: 'modal-backdrop',
-  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
+  clickCallback: null,
   isAnimated: false,
-  rootElement: 'body', // give the choice to place backdrop under different elements
-  clickCallback: null
+  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
+  rootElement: 'body' // give the choice to place backdrop under different elements
 }
 
 const DefaultType = {
   className: 'string',
-  isVisible: 'boolean',
+  clickCallback: '(function|null)',
   isAnimated: 'boolean',
-  rootElement: '(element|string)',
-  clickCallback: '(function|null)'
+  isVisible: 'boolean',
+  rootElement: '(element|string)'
 }
 
 /**
  * Class definition
  */
 
-class Backdrop {
+class Backdrop extends Config {
   constructor(config) {
+    super()
     this._config = this._getConfig(config)
     this._isAppended = false
     this._element = null
   }
 
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
   // Public
   show(callback) {
     if (!this._config.isVisible) {
@@ -53,11 +70,12 @@ class Backdrop {
 
     this._append()
 
+    const element = this._getElement()
     if (this._config.isAnimated) {
-      reflow(this._getElement())
+      reflow(element)
     }
 
-    this._getElement().classList.add(CLASS_NAME_SHOW)
+    element.classList.add(CLASS_NAME_SHOW)
 
     this._emulateAnimation(() => {
       execute(callback)
@@ -104,15 +122,9 @@ class Backdrop {
     return this._element
   }
 
-  _getConfig(config) {
-    config = {
-      ...Default,
-      ...(typeof config === 'object' ? config : {})
-    }
-
+  _configAfterMerge(config) {
     // use getElement() with the default "body" to get a fresh Element on each instantiation
     config.rootElement = getElement(config.rootElement)
-    typeCheckConfig(NAME, config, DefaultType)
     return config
   }
 
@@ -121,9 +133,10 @@ class Backdrop {
       return
     }
 
-    this._config.rootElement.append(this._getElement())
+    const element = this._getElement()
+    this._config.rootElement.append(element)
 
-    EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
+    EventHandler.on(element, EVENT_MOUSEDOWN, () => {
       execute(this._config.clickCallback)
     })