@coreui/coreui 5.5.0 → 5.6.1

package/js/src/chip.js

@@ -0,0 +1,365 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI chip.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import { defineJQueryPlugin, getNextActiveElement } from './util/index.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'chip'
+const DATA_KEY = 'coreui.chip'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_REMOVED = `removed${EVENT_KEY}`
+const EVENT_SELECT = `select${EVENT_KEY}`
+const EVENT_SELECTED = `selected${EVENT_KEY}`
+const EVENT_DESELECT = `deselect${EVENT_KEY}`
+const EVENT_DESELECTED = `deselected${EVENT_KEY}`
+
+const SELECTOR_CHIP_REMOVE = '.chip-remove'
+const SELECTOR_DATA_CHIP = '[data-coreui-chip]'
+const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)'
+
+const CLASS_NAME_CHIP_CLICKABLE = 'chip-clickable'
+const CLASS_NAME_CHIP_REMOVE = 'chip-remove'
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_DISABLED = 'disabled'
+
+const DEFAULT_REMOVE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>'
+
+const Default = {
+  ariaRemoveLabel: 'Remove',
+  disabled: false,
+  removable: false,
+  removeIcon: DEFAULT_REMOVE_ICON,
+  selectable: false,
+  selected: false
+}
+
+const DefaultType = {
+  ariaRemoveLabel: 'string',
+  disabled: 'boolean',
+  removable: 'boolean',
+  removeIcon: 'string',
+  selectable: 'boolean',
+  selected: 'boolean'
+}
+
+/**
+ * Class definition
+ */
+
+class Chip extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)
+    this._selected = this._config.selected || this._element.classList.contains(CLASS_NAME_ACTIVE)
+
+    this._ensureRemoveButton()
+    this._applyState()
+
+    if (this._config.selectable || this._config.removable) {
+      this._makeFocusable()
+    }
+
+    this._addEventListeners()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  remove() {
+    const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE)
+
+    if (removeEvent.defaultPrevented) {
+      return
+    }
+
+    this._destroyElement()
+  }
+
+  toggle() {
+    if (!this._config.selectable) {
+      return
+    }
+
+    if (this._selected) {
+      this.deselect()
+      return
+    }
+
+    this.select()
+  }
+
+  select() {
+    if (!this._config.selectable) {
+      return
+    }
+
+    if (this._selected) {
+      return
+    }
+
+    const selectEvent = EventHandler.trigger(this._element, EVENT_SELECT)
+    if (selectEvent.defaultPrevented) {
+      return
+    }
+
+    this._selected = true
+    this._applyState()
+
+    EventHandler.trigger(this._element, EVENT_SELECTED)
+  }
+
+  deselect() {
+    if (!this._config.selectable) {
+      return
+    }
+
+    if (!this._selected) {
+      return
+    }
+
+    const deselectEvent = EventHandler.trigger(this._element, EVENT_DESELECT)
+    if (deselectEvent.defaultPrevented) {
+      return
+    }
+
+    this._selected = false
+    this._applyState()
+
+    EventHandler.trigger(this._element, EVENT_DESELECTED)
+  }
+
+  // Private
+  _addEventListeners() {
+    EventHandler.on(this._element, 'keydown', event => this._handleKeydown(event))
+
+    EventHandler.on(this._element, 'click', event => {
+      if (this._disabled) {
+        return
+      }
+
+      if (event.target.closest(SELECTOR_CHIP_REMOVE)) {
+        return
+      }
+
+      this.toggle()
+    })
+
+    EventHandler.on(this._element, 'click', SELECTOR_CHIP_REMOVE, event => {
+      event.stopPropagation()
+      this.remove()
+    })
+  }
+
+  _applyState() {
+    if (!this._disabled && (this._config.clickable || this._config.selectable)) {
+      this._element.classList.add(CLASS_NAME_CHIP_CLICKABLE)
+    }
+
+    if (this._disabled) {
+      this._element.classList.add(CLASS_NAME_DISABLED)
+      this._element.setAttribute('aria-disabled', 'true')
+    } else {
+      this._element.classList.remove(CLASS_NAME_DISABLED)
+      if (this._element.getAttribute('aria-disabled') === 'true') {
+        this._element.setAttribute('aria-disabled', 'false')
+      }
+    }
+
+    if (this._config.selectable) {
+      this._element.classList.toggle(CLASS_NAME_ACTIVE, this._selected)
+      this._element.setAttribute('aria-selected', this._selected ? 'true' : 'false')
+    } else {
+      this._element.classList.remove(CLASS_NAME_ACTIVE)
+      if (this._element.getAttribute('aria-selected') === 'true') {
+        this._element.setAttribute('aria-selected', 'false')
+      }
+    }
+  }
+
+  _createRemoveButton() {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.className = CLASS_NAME_CHIP_REMOVE
+    button.setAttribute('aria-label', this._config.ariaRemoveLabel)
+    button.setAttribute('tabindex', '-1') // Not in tab order, chips handle keyboard
+    button.innerHTML = this._config.removeIcon
+    return button
+  }
+
+  _ensureRemoveButton() {
+    if (!this._config.removable) {
+      return
+    }
+
+    if (SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, this._element)) {
+      return
+    }
+
+    this._element.append(this._createRemoveButton())
+  }
+
+  _makeFocusable() {
+    if (this._element.hasAttribute('tabindex') || this._disabled) {
+      return
+    }
+
+    this._element.setAttribute('tabindex', '0')
+  }
+
+  _handleKeydown(event) {
+    const { key } = event
+    if (this._disabled) {
+      return
+    }
+
+    switch (key) {
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        if (!this._config.selectable) {
+          return
+        }
+
+        event.preventDefault()
+        this.toggle()
+        break
+      }
+
+      case 'Backspace':
+      case 'Delete': {
+        if (this._config.removable) {
+          event.preventDefault()
+          const sibling = this._getFocusableSibling(false) || this._getFocusableSibling(true)
+          sibling?.focus()
+          this.remove()
+        }
+
+        break
+      }
+
+      case 'ArrowLeft': {
+        event.preventDefault()
+        const chip = this._getFocusableSibling(false)
+        chip?.focus()
+
+        break
+      }
+
+      case 'ArrowRight': {
+        event.preventDefault()
+        const chip = this._getFocusableSibling(true)
+        chip?.focus()
+
+        break
+      }
+
+      case 'Home': {
+        event.preventDefault()
+        this._navigateToEdge(0)
+        break
+      }
+
+      case 'End': {
+        event.preventDefault()
+        this._navigateToEdge(-1)
+        break
+      }
+
+      // No default
+    }
+  }
+
+  _getFocusableSibling(shouldGetNext) {
+    const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element.parentElement)
+    const sibling = getNextActiveElement(chips, this._element, shouldGetNext, !chips.includes(this._element))
+    return sibling === this._element ? null : sibling
+  }
+
+  _navigateToEdge(targetIndex) {
+    const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element.parentElement)
+    if (chips.length === 0) {
+      return
+    }
+
+    const targetChip = chips.at(targetIndex)
+    targetChip?.focus()
+  }
+
+  _destroyElement() {
+    EventHandler.trigger(this._element, EVENT_REMOVED)
+    this._element.remove()
+    this.dispose()
+  }
+
+  // Static
+  static chipInterface(element, config) {
+    const data = Chip.getOrCreateInstance(element, config)
+
+    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 () {
+      const data = Chip.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)
+    })
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
+  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP)) {
+    Chip.chipInterface(element)
+  }
+})
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Chip)
+
+export default Chip

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@coreui/coreui",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "config": {
-    "version_short": "5.5"
+    "version_short": "5.6"
   },
   "keywords": [
     "css",
@@ -100,32 +100,32 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@docsearch/css": "^4.3.2",
-    "@docsearch/js": "^4.3.2",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@docsearch/css": "^4.6.0",
+    "@docsearch/js": "^4.6.0",
     "@eslint/markdown": "^7.5.1",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@stackblitz/sdk": "^1.11.0",
-    "autoprefixer": "^10.4.23",
+    "autoprefixer": "^10.4.27",
     "bootstrap": "^5.3.8",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.3",
     "eslint-config-xo": "0.49.0",
-    "eslint-plugin-html": "^8.1.3",
+    "eslint-plugin-html": "^8.1.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-unicorn": "^62.0.0",
     "find-unused-sass-variables": "^6.1.1",
     "globals": "^16.5.0",
-    "globby": "^16.0.0",
+    "globby": "^16.1.1",
     "hammer-simulator": "0.0.1",
     "html-entities": "^2.6.0",
     "hugo-bin": "^0.149.2",
@@ -139,24 +139,24 @@
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-jasmine-html-reporter": "^2.2.0",
     "karma-rollup-preprocessor": "7.0.8",
-    "lockfile-lint": "^4.14.1",
-    "nodemon": "^3.1.11",
+    "lockfile-lint": "^5.0.0",
+    "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.53.5",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.59.0",
     "rollup-plugin-istanbul": "^5.0.0",
-    "sass-embedded": "^1.97.0",
+    "sass-embedded": "^1.98.0",
     "sass-true": "^10.1.0",
     "shelljs": "^0.10.0",
     "stylelint": "^16.26.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "5.44.1",
-    "vnu-jar": "25.11.25"
+    "terser": "5.46.0",
+    "vnu-jar": "25.12.31"
   },
   "files": [
     "dist/{css,js}/**/*.{css,js,map}",

package/scss/_banner.scss

@@ -1,7 +1,7 @@
 $file: "" !default;
 
 /*!
- * CoreUI #{$file} v5.5.0 (https://coreui.io)
- * Copyright (c) 2025 creativeLabs Łukasz Holeczek
+ * CoreUI #{$file} v5.6.1 (https://coreui.io)
+ * Copyright (c) 2026 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */

package/scss/_chip.import.scss

@@ -0,0 +1 @@
+@forward "chip";