CoreUI PRO v5.16.0

We are thrilled to announce the release of CoreUI PRO v5.16.0! This major update introduces the brand new Autocomplete component, enhanced Multi-Select functionality with custom templates, significant calendar improvements, and comprehensive documentation updates with schema markup support.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To upgrade your project to CoreUI PRO v5.16.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/coreui-pro entry under dependencies and update the version number to 5.16.0.
3. Save your changes to the package.json file.
4. In your project’s root directory, execute the appropriate command:
   • For npm users: Run npm install
   • For yarn users: Run yarn install

What’s New

🚀 New Features

• Autocomplete Component: Brand new autocomplete component with comprehensive functionality

  • Built-in search and filtering capabilities
  • Keyboard navigation support with arrow keys and Enter/Escape
  • Customizable dropdown positioning and styling
  • ARIA accessibility features for screen readers
  • Support for custom data sources and dynamic loading
  • Configurable debounce timing for performance optimization

• Multi-Select Custom Templates: Enhanced Multi-Select component with template support

  • optionsTemplate for custom option rendering
  • optionsGroupsTemplate for custom group label styling
  • HTML sanitization with allowList and sanitizeFn options
  • Full customization while maintaining accessibility

🛠 Fixes & Improvements

• Calendar: Fixed year calculation for week selection using proper ISO 8601 standards
• Popover: Fixed issue where popovers with hover and click triggers would close incorrectly on mouseleave
• Date Range Picker: Enhanced event handling for start and end date changes
• Multi-Select: Improved click handling for nested elements in custom templates
• Tooltip: Fixed click trigger toggle behavior for better user experience

♻️ Major Refactors

• Calendar Utilities: Complete rewrite of week calculation system

  • Renamed getWeekNumber() to getISOWeekNumberAndYear() for ISO 8601 compliance
  • Enhanced getMonthDetails() to return proper week structure with year information
  • Improved week selection accuracy across year boundaries

• Date Picker Events: Improved event handling architecture

  • Enhanced start/end date change event triggering
  • Better event timing and consistency

📚 Documentation & Schema Updates

• Schema Markup: Added comprehensive schema markup support for better SEO
  • Structured data for components and integration guides
  • Enhanced search engine visibility
• New Component Documentation: Complete documentation for Autocomplete component
• Multi-Select Examples: Added custom template examples and usage guides
• Range Component: Added dynamic value display examples
• Laravel Integration: Enhanced integration guide with schema markup

🔧 Build & Development

• Node.js 22: Switched build system to Node.js 22 for better performance
• Sass Mixins: Added missing box-shadow mixin and consolidated multiple none values
• Test Coverage: Updated and enhanced test suites with bug fixes
• Documentation Build: Improved documentation build process and styling

📦 Dependency Updates

This release includes comprehensive dependency updates for security and performance:

Core Dependencies

• Updated @eslint/markdown from ^6.6.0 to ^7.1.0
• Updated cross-env from ^7.0.3 to ^10.0.0
• Updated eslint from ^9.30.1 to ^9.32.0
• Updated eslint-config-xo from 0.47.0 to 0.48.0
• Updated eslint-plugin-unicorn from ^59.0.1 to ^60.0.0
• Updated hugo-bin from ^0.144.9 to ^0.145.1
• Updated jasmine from ^5.8.0 to ^5.9.0
• Updated rollup from ^4.44.1 to ^4.46.0
• Updated stylelint from ^16.21.0 to ^16.22.0

🎯 Breaking Changes

Calendar Week System

• ISO 8601 Compliance: Week selection now uses proper ISO 8601 standards
• Function Rename: getWeekNumber() has been renamed to getISOWeekNumberAndYear()
• Return Type Change: The function now returns an object { weekNumber, year } instead of just a number

Multi-Select Templates

• New Template System: Custom templates now support HTML sanitization by default
• Security Enhancement: Added XSS protection for custom template content

💡 Migration Guide

Calendar Utilities

If you were using getWeekNumber() directly:

// Before
const weekNum = getWeekNumber(date)

// After
const { weekNumber, year } = getISOWeekNumberAndYear(date)

Multi-Select Custom Templates

To use the new template functionality:

new MultiSelect(element, {
  optionsTemplate: (option) => `<span class="custom-option">${option.text}</span>`,
  optionsGroupsTemplate: (group) => `<strong>${group.label}</strong>`,
  sanitize: true // Enable XSS protection (default)
})

This release represents a significant step forward in component functionality, accessibility, and developer experience. The new Autocomplete component and enhanced Multi-Select capabilities provide powerful tools for building modern, interactive web applications.