CoreUI for React v5.8.0

We’re excited to introduce CoreUI for React v5.8.0! This release brings a new accessibility-focused component, performance optimizations for existing components, and updated build targets for better modern browser 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.

---

How to Update

To upgrade your project to CoreUI for React v5.8.0, follow these steps:

1. Open your package.json file.
2. Update the following dependencies:
   • @coreui/react: 5.8.0
   • @coreui/coreui: 5.4.3
3. Save the file.
4. Run your package manager’s install command:
   • For npm: npm install
   • For yarn: yarn install

What’s New

✨ New Components

• CFocusTrap: New accessibility component that traps focus within a designated area
  • Essential for modal dialogs, dropdown menus, and other interactive overlays
  • Improves keyboard navigation and screen reader accessibility
  • Follows WCAG 2.1 guidelines for focus management
  • Lightweight implementation with minimal performance impact

🛠 Performance Improvements

• CDropdown: Significant optimizations for better user experience
  • Arrow Key Handling: Improved keyboard navigation with smoother arrow key interactions
  • Menu Visibility: Optimized toggling logic reduces unnecessary DOM updates
  • Re-rendering Prevention: Enhanced component lifecycle to prevent unnecessary re-renders
  • Focus Management: Better focus handling during menu interactions

🔧 Build & Development

• Build Target Update: Changed from ES5 to ES2015 for better modern browser support
  • Smaller bundle sizes for applications targeting modern browsers
  • Better performance with native ES2015 features
  • Maintained compatibility with supported browser versions
• Import Optimization: Improved internal component imports for better tree-shaking
• Documentation Updates: Enhanced API references and component documentation

Dependency Updates

This version includes updates to core and development dependencies for improved compatibility and performance:

Core Dependencies

• Updated @coreui/coreui from ^5.4.1 to ^5.4.3

Development Dependencies

• Updated @types/react to the latest version for improved TypeScript support
• Updated @typescript-eslint/parser for better TypeScript parsing
• Updated eslint with enhanced linting capabilities
• Updated rollup for improved build performance
• Updated typescript for latest language features and improvements

Technical Details

CFocusTrap Component

The new CFocusTrap component provides essential accessibility functionality by:

• Capturing focus within a specific DOM region
• Cycling focus through focusable elements using Tab/Shift+Tab
• Returning focus to the trigger element when closed
• Supporting escape key handling for modal scenarios

CDropdown Optimizations

The dropdown component now features:

• Reduced unnecessary DOM queries and updates
• Improved keyboard event handling with debounced responses
• Better memory management during component lifecycle
• Enhanced accessibility for screen readers

ES2015 Build Target

Moving to ES2015 provides:

• Native support for arrow functions, classes, and modules
• Better performance on modern browsers
• Reduced polyfill requirements for supported environments
• Smaller bundle sizes through native browser optimization

---

For a full breakdown of changes and improvements, visit the official GitHub changelog.