@coreui/coreui 4.0.4 → 4.1.1

package/js/src/collapse.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): collapse.js
+ * CoreUI (v4.1.1): collapse.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's collapse.js
@@ -35,12 +35,12 @@ const DATA_API_KEY = '.data-api'
 
 const Default = {
   toggle: true,
-  parent: ''
+  parent: null
 }
 
 const DefaultType = {
   toggle: 'boolean',
-  parent: '(string|element)'
+  parent: '(null|element)'
 }
 
 const EVENT_SHOW = `show${EVENT_KEY}`
@@ -53,11 +53,13 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_COLLAPSE = 'collapse'
 const CLASS_NAME_COLLAPSING = 'collapsing'
 const CLASS_NAME_COLLAPSED = 'collapsed'
+const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
+const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
 
 const WIDTH = 'width'
 const HEIGHT = 'height'
 
-const SELECTOR_ACTIVES = '.show, .collapsing'
+const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
 const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="collapse"]'
 
 /**
@@ -72,10 +74,7 @@ class Collapse extends BaseComponent {
 
     this._isTransitioning = false
     this._config = this._getConfig(config)
-    this._triggerArray = SelectorEngine.find(
-      `${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` +
-      `${SELECTOR_DATA_TOGGLE}[data-coreui-target="#${this._element.id}"]`
-    )
+    this._triggerArray = []
 
     const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
 
@@ -91,10 +90,10 @@ class Collapse extends BaseComponent {
       }
     }
 
-    this._parent = this._config.parent ? this._getParent() : null
+    this._initializeChildren()
 
     if (!this._config.parent) {
-      this._addAriaAndCollapsedClass(this._element, this._triggerArray)
+      this._addAriaAndCollapsedClass(this._triggerArray, this._isShown())
     }
 
     if (this._config.toggle) {
@@ -115,7 +114,7 @@ class Collapse extends BaseComponent {
   // Public
 
   toggle() {
-    if (this._element.classList.contains(CLASS_NAME_SHOW)) {
+    if (this._isShown()) {
       this.hide()
     } else {
       this.show()
@@ -123,30 +122,20 @@ class Collapse extends BaseComponent {
   }
 
   show() {
-    if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW)) {
+    if (this._isTransitioning || this._isShown()) {
       return
     }
 
-    let actives
+    let actives = []
     let activesData
 
-    if (this._parent) {
-      actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent)
-        .filter(elem => {
-          if (typeof this._config.parent === 'string') {
-            return elem.getAttribute('data-coreui-parent') === this._config.parent
-          }
-
-          return elem.classList.contains(CLASS_NAME_COLLAPSE)
-        })
-
-      if (actives.length === 0) {
-        actives = null
-      }
+    if (this._config.parent) {
+      const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
+      actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth
     }
 
     const container = SelectorEngine.findOne(this._selector)
-    if (actives) {
+    if (actives.length) {
       const tempActiveData = actives.find(elem => container !== elem)
       activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null
 
@@ -160,17 +149,15 @@ class Collapse extends BaseComponent {
       return
     }
 
-    if (actives) {
-      actives.forEach(elemActive => {
-        if (container !== elemActive) {
-          Collapse.collapseInterface(elemActive, 'hide')
-        }
+    actives.forEach(elemActive => {
+      if (container !== elemActive) {
+        Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide()
+      }
 
-        if (!activesData) {
-          Data.set(elemActive, DATA_KEY, null)
-        }
-      })
-    }
+      if (!activesData) {
+        Data.set(elemActive, DATA_KEY, null)
+      }
+    })
 
     const dimension = this._getDimension()
 
@@ -179,23 +166,17 @@ class Collapse extends BaseComponent {
 
     this._element.style[dimension] = 0
 
-    if (this._triggerArray.length) {
-      this._triggerArray.forEach(element => {
-        element.classList.remove(CLASS_NAME_COLLAPSED)
-        element.setAttribute('aria-expanded', true)
-      })
-    }
-
-    this.setTransitioning(true)
+    this._addAriaAndCollapsedClass(this._triggerArray, true)
+    this._isTransitioning = true
 
     const complete = () => {
+      this._isTransitioning = false
+
       this._element.classList.remove(CLASS_NAME_COLLAPSING)
       this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
 
       this._element.style[dimension] = ''
 
-      this.setTransitioning(false)
-
       EventHandler.trigger(this._element, EVENT_SHOWN)
     }
 
@@ -207,7 +188,7 @@ class Collapse extends BaseComponent {
   }
 
   hide() {
-    if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) {
+    if (this._isTransitioning || !this._isShown()) {
       return
     }
 
@@ -226,22 +207,19 @@ class Collapse extends BaseComponent {
     this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
 
     const triggerArrayLength = this._triggerArray.length
-    if (triggerArrayLength > 0) {
-      for (let i = 0; i < triggerArrayLength; i++) {
-        const trigger = this._triggerArray[i]
-        const elem = getElementFromSelector(trigger)
-
-        if (elem && !elem.classList.contains(CLASS_NAME_SHOW)) {
-          trigger.classList.add(CLASS_NAME_COLLAPSED)
-          trigger.setAttribute('aria-expanded', false)
-        }
+    for (let i = 0; i < triggerArrayLength; i++) {
+      const trigger = this._triggerArray[i]
+      const elem = getElementFromSelector(trigger)
+
+      if (elem && !this._isShown(elem)) {
+        this._addAriaAndCollapsedClass([trigger], false)
       }
     }
 
-    this.setTransitioning(true)
+    this._isTransitioning = true
 
     const complete = () => {
-      this.setTransitioning(false)
+      this._isTransitioning = false
       this._element.classList.remove(CLASS_NAME_COLLAPSING)
       this._element.classList.add(CLASS_NAME_COLLAPSE)
       EventHandler.trigger(this._element, EVENT_HIDDEN)
@@ -252,8 +230,8 @@ class Collapse extends BaseComponent {
     this._queueCallback(complete, this._element, true)
   }
 
-  setTransitioning(isTransitioning) {
-    this._isTransitioning = isTransitioning
+  _isShown(element = this._element) {
+    return element.classList.contains(CLASS_NAME_SHOW)
   }
 
   // Private
@@ -261,44 +239,40 @@ class Collapse extends BaseComponent {
   _getConfig(config) {
     config = {
       ...Default,
+      ...Manipulator.getDataAttributes(this._element),
       ...config
     }
     config.toggle = Boolean(config.toggle) // Coerce string values
+    config.parent = getElement(config.parent)
     typeCheckConfig(NAME, config, DefaultType)
     return config
   }
 
   _getDimension() {
-    return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT
+    return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT
   }
 
-  _getParent() {
-    let { parent } = this._config
-
-    parent = getElement(parent)
-
-    const selector = `${SELECTOR_DATA_TOGGLE}[data-coreui-parent="${parent}"]`
+  _initializeChildren() {
+    if (!this._config.parent) {
+      return
+    }
 
-    SelectorEngine.find(selector, parent)
+    const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
+    SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem))
       .forEach(element => {
         const selected = getElementFromSelector(element)
 
-        this._addAriaAndCollapsedClass(
-          selected,
-          [element]
-        )
+        if (selected) {
+          this._addAriaAndCollapsedClass([element], this._isShown(selected))
+        }
       })
-
-    return parent
   }
 
-  _addAriaAndCollapsedClass(element, triggerArray) {
-    if (!element || !triggerArray.length) {
+  _addAriaAndCollapsedClass(triggerArray, isOpen) {
+    if (!triggerArray.length) {
       return
     }
 
-    const isOpen = element.classList.contains(CLASS_NAME_SHOW)
-
     triggerArray.forEach(elem => {
       if (isOpen) {
         elem.classList.remove(CLASS_NAME_COLLAPSED)
@@ -312,34 +286,22 @@ class Collapse extends BaseComponent {
 
   // Static
 
-  static collapseInterface(element, config) {
-    let data = Collapse.getInstance(element)
-    const _config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(element),
-      ...(typeof config === 'object' && config ? config : {})
-    }
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const _config = {}
+      if (typeof config === 'string' && /show|hide/.test(config)) {
+        _config.toggle = false
+      }
 
-    if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) {
-      _config.toggle = false
-    }
+      const data = Collapse.getOrCreateInstance(this, _config)
 
-    if (!data) {
-      data = new Collapse(element, _config)
-    }
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-    if (typeof config === 'string') {
-      if (typeof data[config] === 'undefined') {
-        throw new TypeError(`No method named "${config}"`)
+        data[config]()
       }
-
-      data[config]()
-    }
-  }
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      Collapse.collapseInterface(this, config)
     })
   }
 }
@@ -356,26 +318,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     event.preventDefault()
   }
 
-  const triggerData = Manipulator.getDataAttributes(this)
   const selector = getSelectorFromElement(this)
   const selectorElements = SelectorEngine.find(selector)
 
   selectorElements.forEach(element => {
-    const data = Collapse.getInstance(element)
-    let config
-    if (data) {
-      // update parent attribute
-      if (data._parent === null && typeof triggerData.parent === 'string') {
-        data._config.parent = triggerData.parent
-        data._parent = data._getParent()
-      }
-
-      config = 'toggle'
-    } else {
-      config = triggerData
-    }
-
-    Collapse.collapseInterface(element, config)
+    Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
   })
 })
 

package/js/src/dom/data.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): dom/data.js
+ * CoreUI (v4.1.1): dom/data.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's dom/data.js

package/js/src/dom/event-handler.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): dom/event-handler.js
+ * CoreUI (v4.1.1): dom/event-handler.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's  dom/event-handler.js
@@ -116,7 +116,6 @@ function bootstrapDelegationHandler(element, selector, fn) {
           event.delegateTarget = target
 
           if (handler.oneOff) {
-            // eslint-disable-next-line unicorn/consistent-destructuring
             EventHandler.off(element, event.type, selector, fn)
           }
 

package/js/src/dom/manipulator.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): dom/manipulator.js
+ * CoreUI (v4.1.1): dom/manipulator.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's  dom/manipulator.js
@@ -67,8 +67,8 @@ const Manipulator = {
     const rect = element.getBoundingClientRect()
 
     return {
-      top: rect.top + document.body.scrollTop,
-      left: rect.left + document.body.scrollLeft
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset
     }
   },
 

package/js/src/dom/selector-engine.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): dom/selector-engine.js
+ * CoreUI (v4.1.1): dom/selector-engine.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's  dom/selector-engine.js
@@ -14,6 +14,8 @@
  * ------------------------------------------------------------------------
  */
 
+import { isDisabled, isVisible } from '../util/index'
+
 const NODE_TEXT = 3
 
 const SelectorEngine = {
@@ -72,6 +74,21 @@ const SelectorEngine = {
     }
 
     return []
+  },
+
+  focusableChildren(element) {
+    const focusables = [
+      'a',
+      'button',
+      'input',
+      'textarea',
+      'select',
+      'details',
+      '[tabindex]',
+      '[contenteditable="true"]'
+    ].map(selector => `${selector}:not([tabindex^="-"])`).join(', ')
+
+    return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
   }
 }
 

package/js/src/dropdown.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.4): dropdown.js
+ * CoreUI (v4.1.1): dropdown.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's dropdown.js
@@ -14,12 +14,12 @@ import {
   defineJQueryPlugin,
   getElement,
   getElementFromSelector,
+  getNextActiveElement,
   isDisabled,
   isElement,
-  isVisible,
   isRTL,
+  isVisible,
   noop,
-  getNextActiveElement,
   typeCheckConfig
 } from './util/index'
 import EventHandler from './dom/event-handler'
@@ -51,7 +51,6 @@ const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
 const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
-const EVENT_CLICK = `click${EVENT_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
@@ -106,8 +105,6 @@ class Dropdown extends BaseComponent {
     this._config = this._getConfig(config)
     this._menu = this._getMenuElement()
     this._inNavbar = this._detectNavbar()
-
-    this._addEventListeners()
   }
 
   // Getters
@@ -127,26 +124,14 @@ class Dropdown extends BaseComponent {
   // Public
 
   toggle() {
-    if (isDisabled(this._element)) {
-      return
-    }
-
-    const isActive = this._element.classList.contains(CLASS_NAME_SHOW)
-
-    if (isActive) {
-      this.hide()
-      return
-    }
-
-    this.show()
+    return this._isShown() ? this.hide() : this.show()
   }
 
   show() {
-    if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW)) {
+    if (isDisabled(this._element) || this._isShown(this._menu)) {
       return
     }
 
-    const parent = Dropdown.getParentFromElement(this._element)
     const relatedTarget = {
       relatedTarget: this._element
     }
@@ -157,32 +142,12 @@ class Dropdown extends BaseComponent {
       return
     }
 
+    const parent = Dropdown.getParentFromElement(this._element)
     // Totally disable Popper for Dropdowns in Navbar
     if (this._inNavbar) {
       Manipulator.setDataAttribute(this._menu, 'popper', 'none')
     } else {
-      if (typeof Popper === 'undefined') {
-        throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
-      }
-
-      let referenceElement = this._element
-
-      if (this._config.reference === 'parent') {
-        referenceElement = parent
-      } else if (isElement(this._config.reference)) {
-        referenceElement = getElement(this._config.reference)
-      } else if (typeof this._config.reference === 'object') {
-        referenceElement = this._config.reference
-      }
-
-      const popperConfig = this._getPopperConfig()
-      const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
-
-      this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
-
-      if (isDisplayStatic) {
-        Manipulator.setDataAttribute(this._menu, 'popper', 'static')
-      }
+      this._createPopper(parent)
     }
 
     // If this is a touch-enabled device we add extra
@@ -198,13 +163,13 @@ class Dropdown extends BaseComponent {
     this._element.focus()
     this._element.setAttribute('aria-expanded', true)
 
-    this._menu.classList.toggle(CLASS_NAME_SHOW)
-    this._element.classList.toggle(CLASS_NAME_SHOW)
+    this._menu.classList.add(CLASS_NAME_SHOW)
+    this._element.classList.add(CLASS_NAME_SHOW)
     EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget)
   }
 
   hide() {
-    if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW)) {
+    if (isDisabled(this._element) || !this._isShown(this._menu)) {
       return
     }
 
@@ -232,13 +197,6 @@ class Dropdown extends BaseComponent {
 
   // Private
 
-  _addEventListeners() {
-    EventHandler.on(this._element, EVENT_CLICK, event => {
-      event.preventDefault()
-      this.toggle()
-    })
-  }
-
   _completeHide(relatedTarget) {
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
     if (hideEvent.defaultPrevented) {
@@ -282,6 +240,35 @@ class Dropdown extends BaseComponent {
     return config
   }
 
+  _createPopper(parent) {
+    if (typeof Popper === 'undefined') {
+      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
+    }
+
+    let referenceElement = this._element
+
+    if (this._config.reference === 'parent') {
+      referenceElement = parent
+    } else if (isElement(this._config.reference)) {
+      referenceElement = getElement(this._config.reference)
+    } else if (typeof this._config.reference === 'object') {
+      referenceElement = this._config.reference
+    }
+
+    const popperConfig = this._getPopperConfig()
+    const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
+
+    this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
+
+    if (isDisplayStatic) {
+      Manipulator.setDataAttribute(this._menu, 'popper', 'static')
+    }
+  }
+
+  _isShown(element = this._element) {
+    return element.classList.contains(CLASS_NAME_SHOW)
+  }
+
   _getMenuElement() {
     return SelectorEngine.next(this._element, SELECTOR_MENU)[0]
   }
@@ -370,21 +357,19 @@ class Dropdown extends BaseComponent {
 
   // Static
 
-  static dropdownInterface(element, config) {
-    const data = Dropdown.getOrCreateInstance(element, config)
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Dropdown.getOrCreateInstance(this, config)
+
+      if (typeof config !== 'string') {
+        return
+      }
 
-    if (typeof config === 'string') {
       if (typeof data[config] === 'undefined') {
         throw new TypeError(`No method named "${config}"`)
       }
 
       data[config]()
-    }
-  }
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      Dropdown.dropdownInterface(this, config)
     })
   }
 
@@ -401,7 +386,7 @@ class Dropdown extends BaseComponent {
         continue
       }
 
-      if (!context._element.classList.contains(CLASS_NAME_SHOW)) {
+      if (!context._isShown()) {
         continue
       }
 
@@ -467,20 +452,20 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
+    const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
+    const instance = Dropdown.getOrCreateInstance(getToggleButton)
 
     if (event.key === ESCAPE_KEY) {
-      getToggleButton().focus()
-      Dropdown.clearMenus()
+      instance.hide()
       return
     }
 
     if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
       if (!isActive) {
-        getToggleButton().click()
+        instance.show()
       }
 
-      Dropdown.getInstance(getToggleButton())._selectMenuItem(event)
+      instance._selectMenuItem(event)
       return
     }
 
@@ -502,7 +487,7 @@ 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.dropdownInterface(this)
+  Dropdown.getOrCreateInstance(this).toggle()
 })
 
 /**