CoreUI PRO for React v5.22.0

We are pleased to announce CoreUI PRO for React v5.22.0 — a comprehensive release that introduces enhanced time picker functionality with improved keyboard navigation, advanced accessibility features for dropdown components, and significant bug fixes for better user experience.

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.22.0, follow these steps:

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

🚀 What’s New

✨ New Features

CTimePicker

• Arrow Key Navigation: Added support for arrow keys when selecting time parts
  • Navigate between hours, minutes, seconds, and meridiem using arrow keys
  • Intuitive keyboard navigation for better user experience
  • Enhanced accessibility for keyboard-only users
  • Seamless integration with existing time picker functionality

// Enhanced keyboard navigation
<CTimePicker
  // Arrow keys now work for time part selection
  // Up/Down arrows increment/decrement values
  // Left/Right arrows move between time parts
/>

Advanced Accessibility Features

• Configurable ARIA Labels: Added comprehensive aria-label options for time picker
  • ariaSelectHoursLabel - Custom label for hours selection
  • ariaSelectMinutesLabel - Custom label for minutes selection
  • ariaSelectSecondsLabel - Custom label for seconds selection
  • ariaSelectMeridiemLabel - Custom label for AM/PM selection
  • Enhanced screen reader support with proper ARIA roles and attributes
  • Added listbox, option, aria-selected, and aria-label attributes
  • Improved keyboard navigation with Home/End key support

<CTimePicker
  ariaSelectHoursLabel="Select hours"
  ariaSelectMinutesLabel="Select minutes"
  ariaSelectSecondsLabel="Select seconds"
  ariaSelectMeridiemLabel="Select AM or PM"
/>

CDropdown Enhanced Features

• Reference Prop: Added reference prop for custom positioning targets

  • Allows dropdown positioning relative to custom elements
  • Enhanced flexibility for complex layouts
  • Better integration with dynamic content

• Split Button Accessibility: Added splitLabel prop to CDropdownToggle

  • Customizable screen reader text for split buttons
  • Improved accessibility for dropdown button combinations
  • Better ARIA support for complex dropdown scenarios

<CDropdown>
  <CDropdownToggle
    split
    splitLabel="Toggle dropdown options"
  >
    Button
  </CDropdownToggle>
</CDropdown>

<CDropdown reference={customElement}>
  <CDropdownMenu>
    {/* Positioned relative to customElement */}
  </CDropdownMenu>
</CDropdown>

🛠 Component Improvements

CTimePicker

• Meridiem Handling Fix: Corrected AM/PM switching logic to prevent hour conversion errors
  • Fixed 12h/24h format conversion issues
  • Added bounds checking to prevent invalid hour values (0-23 range)
  • Prevented double conversion errors when switching meridiem multiple times
  • Ensured accurate time representation during AM/PM toggling

CDropdown

• Scrollbar Click Fix: Resolved issue where clicking on scrollbars closed the dropdown menu
• Focus Trap Implementation: Added focus trap functionality when used with portal
• Performance Optimizations: Improved performance with useMemo for context and proper cleanup on unmount

Date Picker Components

• Indicator Fix: Corrected disabled condition for date and time picker indicators
  • Fixed CDatePicker and CDateRangePicker indicator behavior
  • Properly handles disabled state for picker indicators
  • Consistent behavior across all date/time picker variants

CCalendar

• Navigation Button Fix: Added proper button type to prevent unintended form submission
  • Navigation buttons now have type="button" to prevent form submission
  • Better integration within form contexts
  • Improved user experience in form-heavy applications

🛠 Code Quality Improvements

• Documentation Updates: Updated roadmap links and comprehensive component documentation
• Performance Enhancements: Optimized component rendering and memory usage
• TypeScript Support: Enhanced type definitions for new props and accessibility features

📦 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
• Updated @coreui/react from ^5.8.0 to ^5.9.0

Development Tools

• Updated @docsearch/css from ^3.9.0 to ^4.0.1
• Updated @docsearch/react from ^3.9.0 to ^4.0.1
• Updated @types/react from ^19.1.12 to ^19.1.13
• Updated @typescript-eslint/parser from ^8.42.0 to ^8.44.0
• Updated eslint from ^9.34.0 to ^9.35.0
• Updated eslint-plugin-unicorn from ^60.0.0 to ^61.0.2
• Updated globals from ^16.3.0 to ^16.4.0
• Updated lerna from ^8.2.3 to ^8.2.4
• Updated rollup from ^4.50.0 to ^4.50.2
• Updated sass from ^1.91.0 to ^1.92.1
• Updated ts-jest from ^29.4.1 to ^29.4.2
• Updated typescript-eslint from ^8.42.0 to ^8.44.0

🎯 Enhanced User Experience

Keyboard Navigation Improvements

The enhanced keyboard navigation provides:

• Arrow Key Support: Navigate time parts with arrow keys in time picker
• Home/End Keys: Jump to beginning/end of time ranges
• Tab Navigation: Improved focus management between components
• Screen Reader Support: Better ARIA announcements and navigation cues

Accessibility Enhancements

Enhanced accessibility features include:

• Configurable ARIA Labels: Custom labels for all time picker components
• Focus Trap: Proper focus management in dropdown portals
• WCAG 2.1 Compliance: Enhanced keyboard navigation and screen reader support
• Split Button Accessibility: Improved accessibility for complex dropdown scenarios

Bug Fixes and Stability

Key stability improvements:

• Meridiem Conversion: Fixed AM/PM switching errors in time picker
• Dropdown Interaction: Resolved scrollbar click issues
• Form Integration: Prevented unintended form submission from calendar navigation
• Indicator States: Corrected disabled state handling for picker indicators

💡 Migration Notes

New Props

The following new props are available:

// Time Picker with custom ARIA labels
<CTimePicker
  ariaSelectHoursLabel="Select hours"
  ariaSelectMinutesLabel="Select minutes"
  ariaSelectSecondsLabel="Select seconds"
  ariaSelectMeridiemLabel="Select AM or PM"
  // Arrow key navigation automatically enabled
/>

// Dropdown with custom positioning
<CDropdown reference={customElement}>
  <CDropdownMenu>Content</CDropdownMenu>
</CDropdown>

// Split button with custom accessibility label
<CDropdownToggle
  split
  splitLabel="Open additional options"
>
  Primary Action
</CDropdownToggle>

No Breaking Changes

All changes are backward compatible. Existing implementations will continue to work without modifications while benefiting from:

• Enhanced keyboard navigation in time pickers
• Improved accessibility features
• Better dropdown interaction handling
• Fixed meridiem conversion logic

📖 Technical Details

Arrow Key Navigation Implementation

The arrow key support includes:

• Up/Down arrows increment/decrement time values
• Left/Right arrows move between time parts (hours → minutes → seconds → meridiem)
• Proper value wrapping (24 hours, 60 minutes/seconds)
• Integration with existing validation and formatting

Focus Trap Enhancement

The dropdown focus trap provides:

• Automatic focus containment within dropdown portals
• Proper focus restoration when closing dropdowns
• Escape key handling for accessibility
• Integration with existing keyboard navigation

Performance Optimizations

Performance improvements include:

• Optimized context usage with useMemo
• Proper cleanup on component unmount
• Reduced re-renders in dropdown components
• Memory-efficient event handling

Upgrade to CoreUI PRO for React v5.22.0 today to provide your users with enhanced keyboard navigation, improved accessibility, and more stable dropdown interactions. This release demonstrates our continued commitment to delivering high-quality, accessible UI components.

📚 Learn More

For detailed documentation and implementation examples, visit:

• CoreUI React PRO Documentation