Drop closest from SelectorEngine (#30653)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

js/src/alert.js

@@ -14,7 +14,6 @@ import {
 } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
 
 /**
  * ------------------------------------------------------------------------
@@ -84,13 +83,7 @@ class Alert {
   // Private
 
   _getRootElement(element) {
-    let parent = getElementFromSelector(element)
+    return getElementFromSelector(element) || element.closest(`.${CLASSNAME_ALERT}`)
-
-    if (!parent) {
-      parent = SelectorEngine.closest(element, `.${CLASSNAME_ALERT}`)
-    }
-
-    return parent
   }
 
   _triggerCloseEvent(element) {

js/src/button.js

@@ -23,7 +23,6 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const CLASS_NAME_ACTIVE = 'active'
-const CLASS_NAME_BUTTON = 'btn'
 const CLASS_NAME_DISABLED = 'disabled'
 const CLASS_NAME_FOCUS = 'focus'
 
@@ -61,10 +60,7 @@ class Button {
     let triggerChangeEvent = true
     let addAriaPressed = true
 
-    const rootElement = SelectorEngine.closest(
+    const rootElement = this._element.closest(SELECTOR_DATA_TOGGLE)
-      this._element,
-      SELECTOR_DATA_TOGGLE
-    )
 
     if (rootElement) {
       const input = SelectorEngine.findOne(SELECTOR_INPUT, this._element)
@@ -143,10 +139,7 @@ class Button {
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
   event.preventDefault()
 
-  let button = event.target
+  const button = event.target.closest(SELECTOR_BUTTON)
-  if (!button.classList.contains(CLASS_NAME_BUTTON)) {
-    button = SelectorEngine.closest(button, SELECTOR_BUTTON)
-  }
 
   let data = Data.getData(button, DATA_KEY)
   if (!data) {
@@ -157,7 +150,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, eve
 })
 
 EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
-  const button = SelectorEngine.closest(event.target, SELECTOR_BUTTON)
+  const button = event.target.closest(SELECTOR_BUTTON)
 
   if (button) {
     button.classList.add(CLASS_NAME_FOCUS)
@@ -165,7 +158,7 @@ EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, eve
 })
 
 EventHandler.on(document, EVENT_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
-  const button = SelectorEngine.closest(event.target, SELECTOR_BUTTON)
+  const button = event.target.closest(SELECTOR_BUTTON)
 
   if (button) {
     button.classList.remove(CLASS_NAME_FOCUS)

js/src/dom/selector-engine.js

@@ -50,10 +50,6 @@ const SelectorEngine = {
     return parents
   },
 
-  closest(element, selector) {
-    return element.closest(selector)
-  },
-
   prev(element, selector) {
     let previous = element.previousElementSibling
 

js/src/dropdown.js

@@ -189,7 +189,7 @@ class Dropdown {
     // only needed because of broken event delegation on iOS
     // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
     if ('ontouchstart' in document.documentElement &&
-      !SelectorEngine.closest(parent, SELECTOR_NAVBAR_NAV)) {
+      !parent.closest(SELECTOR_NAVBAR_NAV)) {
       [].concat(...document.body.children)
         .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop()))
     }
@@ -297,7 +297,7 @@ class Dropdown {
   }
 
   _detectNavbar() {
-    return Boolean(SelectorEngine.closest(this._element, `.${CLASS_NAME_NAVBAR}`))
+    return Boolean(this._element.closest(`.${CLASS_NAME_NAVBAR}`))
   }
 
   _getOffset() {
@@ -445,7 +445,7 @@ class Dropdown {
     if (/input|textarea/i.test(event.target.tagName) ?
       event.key === SPACE_KEY || (event.key !== ESCAPE_KEY &&
       ((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||
-        SelectorEngine.closest(event.target, SELECTOR_MENU))) :
+        event.target.closest(SELECTOR_MENU))) :
       !REGEXP_KEYDOWN.test(event.key)) {
       return
     }

js/src/scrollspy.js

@@ -254,7 +254,7 @@ class ScrollSpy {
 
     if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
       SelectorEngine
-        .findOne(SELECTOR_DROPDOWN_TOGGLE, SelectorEngine.closest(link, SELECTOR_DROPDOWN))
+        .findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
         .classList.add(CLASS_NAME_ACTIVE)
 
       link.classList.add(CLASS_NAME_ACTIVE)

js/src/tab.js

@@ -80,7 +80,7 @@ class Tab {
 
     let previous
     const target = getElementFromSelector(this._element)
-    const listElement = SelectorEngine.closest(this._element, SELECTOR_NAV_LIST_GROUP)
+    const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP)
 
     if (listElement) {
       const itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE
@@ -186,7 +186,7 @@ class Tab {
     }
 
     if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
-      const dropdownElement = SelectorEngine.closest(element, SELECTOR_DROPDOWN)
+      const dropdownElement = element.closest(SELECTOR_DROPDOWN)
 
       if (dropdownElement) {
         SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE)

js/src/tooltip.js

@@ -227,7 +227,7 @@ class Tooltip {
     Data.removeData(this.element, this.constructor.DATA_KEY)
 
     EventHandler.off(this.element, this.constructor.EVENT_KEY)
-    EventHandler.off(SelectorEngine.closest(this.element, `.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
+    EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
 
     if (this.tip) {
       this.tip.parentNode.removeChild(this.tip)
@@ -556,7 +556,7 @@ class Tooltip {
       }
     }
 
-    EventHandler.on(SelectorEngine.closest(this.element, `.${CLASS_NAME_MODAL}`),
+    EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
       'hide.bs.modal',
       this._hideModalHandler
     )