release: 7.3.2

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 7.3.1
+Version: FREE 7.3.2
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

css/mdb.dark.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.dark.rtl.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.rtl.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

js/mdb.es.min.js

@@ -7340,9 +7340,13 @@ class Range extends BaseComponent2 {
     });
   }
 }
+const callbackInitState = /* @__PURE__ */ new Map();
 const alertCallback = (component, initSelector) => {
   const Alert3 = component;
-  enableDismissTrigger(Alert3, "close");
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Alert3.getOrCreateInstance(element2);
   });
@@ -7350,17 +7354,23 @@ const alertCallback = (component, initSelector) => {
 const buttonCallback = (component, initSelector) => {
   const Button3 = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
       event.preventDefault();
       const button = event.target.closest(initSelector);
       const data = Button3.getOrCreateInstance(button);
       data.toggle();
     });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Button3.getOrCreateInstance(element2);
   });
 };
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = "[data-mdb-slide], [data-mdb-slide-to]";
   const CLASS_NAME_CAROUSEL2 = "carousel";
@@ -7394,11 +7404,13 @@ const carouselCallback = (component, initSelector) => {
       Carousel3.getOrCreateInstance(carousel);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const collapseCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_TOGGLE2 = initSelector;
   const Collapse3 = component;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
       if (event.target.tagName === "A" || event.delegateTarget && event.delegateTarget.tagName === "A") {
         event.preventDefault();
@@ -7409,6 +7421,8 @@ const collapseCallback = (component, initSelector) => {
         Collapse3.getOrCreateInstance(element2, { toggle: false }).toggle();
       });
     });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(SELECTOR_DATA_TOGGLE2).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElements = SelectorEngine$1.find(selector);
@@ -7424,19 +7438,27 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_MENU2 = ".dropdown-menu";
   const SELECTOR_DATA_TOGGLE2 = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown3 = component;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(
       document,
       EVENT_KEYDOWN_DATA_API,
       SELECTOR_DATA_TOGGLE2,
       Dropdown3.dataApiKeydownHandler
     );
-  EventHandler$1.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU2, Dropdown3.dataApiKeydownHandler);
+    EventHandler$1.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_MENU2,
+      Dropdown3.dataApiKeydownHandler
+    );
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, Dropdown3.clearMenus);
     EventHandler$1.on(document, EVENT_KEYUP_DATA_API, Dropdown3.clearMenus);
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
       event.preventDefault();
       Dropdown3.getOrCreateInstance(this).toggle();
     });
+  }
+  callbackInitState.set(component.name, true);
   SelectorEngine$1.find(initSelector).forEach((el) => {
     Dropdown3.getOrCreateInstance(el);
   });
@@ -7446,6 +7468,7 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_INPUT = `${SELECTOR_DATA_INIT} input`;
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input2 = component;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
     EventHandler$1.on(document, "input", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
     EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_INPUT, Input2.deactivate(new Input2()));
@@ -7510,7 +7533,6 @@ const inputCallback = (component, initSelector) => {
         instance.update();
       });
     });
-  SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => Input2.getOrCreateInstance(element2));
     EventHandler$1.on(window, "reset", (e) => {
       SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
         const instance = Input2.getInstance(element2.parentNode);
@@ -7534,6 +7556,9 @@ const inputCallback = (component, initSelector) => {
       }
       instance.forceActive();
     });
+    callbackInitState.set(component.name, true);
+  }
+  SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => Input2.getOrCreateInstance(element2));
 };
 const modalCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
@@ -7541,6 +7566,7 @@ const modalCallback = (component, initSelector) => {
   const Modal3 = component;
   const EVENT_SHOW2 = `show.bs.${component.name}`;
   const EVENT_HIDDEN2 = `hidden.bs.${component.name}`;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
       const target = getElementFromSelector(this);
       if (["A", "AREA"].includes(this.tagName)) {
@@ -7566,6 +7592,8 @@ const modalCallback = (component, initSelector) => {
       data.toggle(this);
     });
     enableDismissTrigger(Modal3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElement = SelectorEngine$1.findOne(selector);
@@ -7573,6 +7601,9 @@ const modalCallback = (component, initSelector) => {
   });
 };
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = ".offcanvas.show";
   const Offcanvas2 = component;
@@ -7612,8 +7643,12 @@ const offcanvasCallback = (component, initSelector) => {
     });
   });
   enableDismissTrigger(Offcanvas2);
+  callbackInitState.set(component.name, true);
 };
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy3 = component;
   EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
@@ -7621,6 +7656,7 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy3.getOrCreateInstance(el);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const tabCallback = (component, initSelector) => {
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
@@ -7628,6 +7664,7 @@ const tabCallback = (component, initSelector) => {
   const CLASS_NAME_ACTIVE2 = "active";
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE2}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE2}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE2}[data-mdb-toggle="list"]`;
   const Tab3 = component;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
       if (["A", "AREA"].includes(this.tagName)) {
         event.preventDefault();
@@ -7642,17 +7679,25 @@ const tabCallback = (component, initSelector) => {
         Tab3.getOrCreateInstance(element2);
       });
     });
+    callbackInitState.set(component.name, true);
+  }
 };
 const toastCallback = (component, initSelector) => {
   const Toast3 = component;
+  if (!callbackInitState.has(component.name)) {
     enableDismissTrigger(Toast3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Toast3.getOrCreateInstance(element2);
   });
 };
 const rippleCallback = (component, initSelector) => {
   const Ripple2 = component;
+  if (!callbackInitState.has(component.name)) {
     EventHandler$1.one(document, "mousedown", initSelector, Ripple2.autoInitial(new Ripple2()));
+    callbackInitState.set(component.name, true);
+  }
 };
 const defaultInitSelectors = {
   // Bootstrap Components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "type": "module",
   "main": "./js/mdb.umd.min.js",
   "module": "./js/mdb.es.min.js",

src/js/autoinit/callbacks/free.js

@@ -9,10 +9,15 @@ import {
 } from '../../mdb/util';
 import { enableDismissTrigger } from '../../bootstrap/mdb-prefix/util/component-functions';
 
+const callbackInitState = new Map();
+
 const alertCallback = (component, initSelector) => {
   const Alert = component;
 
-  enableDismissTrigger(Alert, 'close');
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -24,6 +29,7 @@ const buttonCallback = (component, initSelector) => {
   const Button = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
 
+  if (!callbackInitState.has(component.name)) {
     // BS init
     EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
       event.preventDefault();
@@ -33,6 +39,8 @@ const buttonCallback = (component, initSelector) => {
 
       data.toggle();
     });
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -41,6 +49,10 @@ const buttonCallback = (component, initSelector) => {
 };
 
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = '[data-mdb-slide], [data-mdb-slide-to]';
   const CLASS_NAME_CAROUSEL = 'carousel';
@@ -83,6 +95,8 @@ const carouselCallback = (component, initSelector) => {
       Carousel.getOrCreateInstance(carousel);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const collapseCallback = (component, initSelector) => {
@@ -90,6 +104,7 @@ const collapseCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = initSelector;
   const Collapse = component;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
       // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
       if (
@@ -107,6 +122,9 @@ const collapseCallback = (component, initSelector) => {
       });
     });
 
+    callbackInitState.set(component.name, true);
+  }
+
   SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElements = SelectorEngine.find(selector);
@@ -125,19 +143,28 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown = component;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.on(
       document,
       EVENT_KEYDOWN_DATA_API,
       SELECTOR_DATA_TOGGLE,
       Dropdown.dataApiKeydownHandler
     );
-  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
+    EventHandler.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_MENU,
+      Dropdown.dataApiKeydownHandler
+    );
     EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
     EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
     EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
       event.preventDefault();
       Dropdown.getOrCreateInstance(this).toggle();
     });
+  }
+
+  callbackInitState.set(component.name, true);
 
   SelectorEngine.find(initSelector).forEach((el) => {
     Dropdown.getOrCreateInstance(el);
@@ -150,6 +177,7 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input = component;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
     EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
     EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
@@ -221,9 +249,6 @@ const inputCallback = (component, initSelector) => {
       });
     });
 
-  // auto-init
-  SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => Input.getOrCreateInstance(element));
-
     // form reset handler
     EventHandler.on(window, 'reset', (e) => {
       SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
@@ -250,6 +275,12 @@ const inputCallback = (component, initSelector) => {
       }
       instance.forceActive();
     });
+
+    callbackInitState.set(component.name, true);
+  }
+
+  // auto-init
+  SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => Input.getOrCreateInstance(element));
 };
 
 const modalCallback = (component, initSelector) => {
@@ -259,6 +290,7 @@ const modalCallback = (component, initSelector) => {
   const EVENT_SHOW = `show.bs.${component.name}`;
   const EVENT_HIDDEN = `hidden.bs.${component.name}`;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
       const target = getElementFromSelector(this);
 
@@ -293,6 +325,8 @@ const modalCallback = (component, initSelector) => {
     });
 
     enableDismissTrigger(Modal);
+    callbackInitState.set(component.name, true);
+  }
 
   SelectorEngine.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
@@ -312,6 +346,10 @@ const popoverCallback = (component, initSelector) => {
 };
 
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = '.offcanvas.show';
   const Offcanvas = component;
@@ -362,9 +400,14 @@ const offcanvasCallback = (component, initSelector) => {
   });
 
   enableDismissTrigger(Offcanvas);
+  callbackInitState.set(component.name, true);
 };
 
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy = component;
 
@@ -373,6 +416,8 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy.getOrCreateInstance(el);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const tabCallback = (component, initSelector) => {
@@ -382,6 +427,7 @@ const tabCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE}[data-mdb-toggle="list"]`;
   const Tab = component;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
       if (['A', 'AREA'].includes(this.tagName)) {
         event.preventDefault();
@@ -399,12 +445,18 @@ const tabCallback = (component, initSelector) => {
         Tab.getOrCreateInstance(element);
       });
     });
+
+    callbackInitState.set(component.name, true);
+  }
 };
 
 const toastCallback = (component, initSelector) => {
   const Toast = component;
 
+  if (!callbackInitState.has(component.name)) {
     enableDismissTrigger(Toast);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -415,7 +467,10 @@ const toastCallback = (component, initSelector) => {
 const rippleCallback = (component, initSelector) => {
   const Ripple = component;
 
+  if (!callbackInitState.has(component.name)) {
     EventHandler.one(document, 'mousedown', initSelector, Ripple.autoInitial(new Ripple()));
+    callbackInitState.set(component.name, true);
+  }
 };
 
 export {