CoreUI PRO for React v5.21.0

We are pleased to announce CoreUI PRO for React v5.21.0 — a comprehensive release that introduces enhanced date picker functionality with input delay options, improved accessibility features, performance optimizations, and dependency updates for better stability and security.

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 Upgrade

To update your project to CoreUI PRO for React v5.21.0, follow these steps:

1. Open your package.json.
2. Update the following dependencies:
   • @coreui/react-pro to 5.21.0
   • @coreui/coreui-pro to 5.20.0
3. Save the file.
4. Run your package manager:
   • npm: npm install
   • yarn: yarn install

🚀 What’s New

✨ New Features

CDatePicker & CDateRangePicker & CTimePicker

• Input Change Delay: Added inputOnChangeDelay prop with 750ms default for better user experience
  • Reduces excessive API calls during manual input
  • Configurable delay timing for different use cases
  • Improved performance for real-time validation scenarios
  • Better handling of user typing patterns

// Customize input delay for different scenarios
<CDatePicker inputOnChangeDelay={1000} />

// Faster response for simple validation
<CDateRangePicker inputOnChangeDelay={500} />

// Use default 750ms delay
<CTimePicker />

Enhanced Focus Management

• Focus Trap Implementation: Added comprehensive focus trap functionality for better accessibility
  • Improved keyboard navigation in date picker modals
  • Better screen reader support
  • WCAG 2.1 compliance enhancements
  • Seamless focus management between calendar and input elements

🛠 Component Improvements

Date and Time Components

• Robust Date Parsing: Enhanced locale-aware date parsing for manual input
• Input Validation: Improved validation for user-typed dates with better error handling
• Calendar Optimization: Optimized calendar cell attribute calculations for better performance
• UI Refinements: Enhanced styling for calendar navigation buttons and input groups

General Components

• Performance Optimizations: Reduced rendering overhead across all components
• Cross-browser Compatibility: Enhanced compatibility with latest browser versions
• TypeScript Support: Improved type definitions for new props and features

🛠 Code Quality Improvements

• Component Architecture: Enhanced internal structure for better maintainability
• Documentation Updates: Comprehensive updates to component documentation and examples
• Code Cleanup: General maintenance and optimization across all components
• Testing Coverage: Expanded test coverage for new features and edge cases

📦 Dependency Updates

This release includes important dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

• Updated @coreui/coreui-pro from ^5.19.0 to ^5.20.0

Development Tools

• Updated @typescript-eslint/parser from ^8.39.0 to ^8.40.0
• Updated eslint from ^9.33.0 to ^9.35.0
• Updated eslint-plugin-prettier from ^5.5.4 to ^5.6.0
• Updated gatsby from ^5.14.6 to ^5.15.0
• Updated typescript-eslint from ^8.39.0 to ^8.40.0
• Updated sass from ^1.90.0 to ^1.78.0
• Updated rollup from ^4.20.0 to ^4.21.0

🎯 Enhanced User Experience

Input Change Delay Feature

The new inputOnChangeDelay provides:

• Debounced Input Handling: Reduces unnecessary onChange events while users are typing
• API Call Optimization: Prevents excessive API requests during manual date entry
• Configurable Timing: Developers can adjust delay based on their specific requirements
• Performance Benefits: Improved responsiveness in data-heavy applications

Accessibility Enhancements

Enhanced accessibility features include:

• Focus Trap Implementation: Proper focus management in modal contexts
• Keyboard Navigation: Improved arrow key and tab navigation
• Screen Reader Support: Better ARIA labels and announcements
• WCAG 2.1 Compliance: Enhanced color contrast and interaction patterns

💡 Migration Notes

New Props

The following new prop is available for date and time picker components:

// Date Picker with custom input delay
<CDatePicker
  inputOnChangeDelay={1000}  // Custom 1-second delay
  // ... other props
/>

// Time Picker with default delay
<CTimePicker
  inputOnChangeDelay={750}   // Default 750ms delay
  // ... other props
/>

// Date Range Picker with faster response
<CDateRangePicker
  inputOnChangeDelay={250}   // Quick 250ms delay
  // ... other props
/>

No Breaking Changes

All changes are backward compatible. Existing date picker implementations will continue to work without modifications while benefiting from the new input delay functionality with sensible defaults.

📖 Technical Details

The inputOnChangeDelay feature is implemented with:

• Optimized debouncing mechanism for smooth user interactions
• Proper cleanup of pending timeouts during component lifecycle
• Integration with existing validation and formatting logic
• Support for all date and time picker variants
• Memory-efficient implementation with minimal overhead

Focus Trap Implementation

The enhanced focus management provides:

• Automatic focus trapping within date picker modals
• Proper focus restoration when closing components
• Support for escape key handling
• Integration with existing keyboard navigation

Upgrade to CoreUI PRO for React v5.21.0 today to provide your users with enhanced date and time selection experiences. This release demonstrates our commitment to continuously improving user interface components with thoughtful, performance-focused features.

📚 Learn More

For detailed documentation and implementation examples, visit:

• CoreUI React PRO Documentation