@coreui/react-pro 5.17.1 → 5.19.0

package/src/components/autocomplete/utils.ts

@@ -0,0 +1,125 @@
+import type { Option, OptionsGroup, Search } from './types'
+
+export const filterOptions = (
+  options: (Option | OptionsGroup)[],
+  search: string
+): (Option | OptionsGroup)[] => {
+  const result: (Option | OptionsGroup)[] = []
+
+  options.forEach((item: Option | OptionsGroup) => {
+    if (typeof item !== 'string' && 'options' in item && Array.isArray(item.options)) {
+      const filteredOptions = filterOptions(item.options, search)
+      if (filteredOptions.length > 0) {
+        result.push({ ...item, options: filteredOptions })
+      }
+    } else if (getOptionLabel(item).toLowerCase().includes(search.toLowerCase())) {
+      result.push(item)
+    }
+  })
+
+  return result
+}
+
+export const flattenOptionsArray = (
+  options: (Option | OptionsGroup)[]
+): (Option | OptionsGroup)[] => {
+  const optionsList: (Option | OptionsGroup)[] = []
+
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      optionsList.push(...option.options)
+    } else {
+      optionsList.push(option)
+    }
+  }
+
+  return optionsList
+}
+
+export const isExternalSearch = (search: Search | undefined): boolean => {
+  return (
+    (typeof search === 'string' && search === 'external') ||
+    (typeof search === 'object' && search.external === true)
+  )
+}
+
+export const isGlobalSearch = (search: Search | undefined): boolean => {
+  return (
+    (typeof search === 'string' && search === 'global') ||
+    (typeof search === 'object' && search.global === true)
+  )
+}
+
+export const getOptionLabel = (option: Option) =>
+  typeof option === 'string' ? option : option.label
+
+export const highlightSubstring = (string: string, query?: string) => {
+  if (query) {
+    const regex = new RegExp(query, 'gi')
+    return string.replace(regex, (string) => `<strong>${string}</strong>`)
+  }
+
+  return string
+}
+
+export const isOptionDisabled = (option: Option | OptionsGroup | string) =>
+  typeof option === 'string' ? false : option.disabled
+
+export const isOptionSelected = (
+  option: Option | OptionsGroup | string,
+  selected: Option | null
+) => {
+  if (!selected) {
+    return false
+  }
+
+  if (typeof option === 'string' && typeof selected === 'string') {
+    return selected === option
+  }
+
+  if (typeof option !== 'string' && typeof selected !== 'string') {
+    return selected.label === option.label
+  }
+
+  return false
+}
+
+export const getFirstOptionByLabel = (
+  value: string,
+  options: (Option | OptionsGroup)[]
+): Option | null => {
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      const found = getFirstOptionByLabel(value, option.options)
+      if (found) {
+        return found
+      }
+    }
+
+    if (getOptionLabel(option).toLowerCase() === value.toLowerCase()) {
+      return option
+    }
+  }
+
+  return null
+}
+
+export const getFirstOptionByValue = (
+  value: number,
+  options: (Option | OptionsGroup)[]
+): Option | null => {
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      const found = getFirstOptionByValue(value, option.options)
+      if (found) {
+        return found
+      }
+    }
+
+    if (typeof option !== 'string' && 'value' in option && option.value === value) {
+      return option
+    }
+  }
+
+  return null
+}

package/src/components/calendar/CCalendarPanel.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, KeyboardEvent, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import {
-  convertToDateObject,
   createGroupsInArray,
   getMonthDetails,
   getMonthsNames,
@@ -120,16 +119,11 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
         )}
         <tbody>
           {view === 'days' &&
-            monthDetails.map((week, index) => {
-              const date = convertToDateObject(
-                week.weekNumber === 0
-                  ? `${calendarDate.getFullYear()}W53`
-                  : `${calendarDate.getFullYear()}W${week.weekNumber}`,
-                selectionType
-              )
+            monthDetails.map(({ week, days }, index) => {
+              const { date } = days[0]
               const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
               const isSelected = isDateSelected(date, startDate, endDate)
-              const current = week.days.some((day) => day.month === 'current')
+              const current = days.some((day) => day.month === 'current')
               return (
                 <tr
                   className={classNames('calendar-row', {
@@ -154,12 +148,8 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                       onMouseLeave: () => onCalendarMouseLeave(),
                     })}
                 >
-                  {showWeekNumber && (
-                    <th className="calendar-cell-week-number">
-                      {week.weekNumber === 0 ? 53 : week.weekNumber}
-                    </th>
-                  )}
-                  {week.days.map(({ date, month }: { date: Date; month: string }, idx: number) => {
+                  {showWeekNumber && <th className="calendar-cell-week-number">{week.number}</th>}
+                  {days.map(({ date, month }: { date: Date; month: string }, idx: number) => {
                     const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
                     const isSelected = isDateSelected(date, startDate, endDate)
                     return month === 'current' || showAdjacementDays ? (

package/src/components/calendar/utils.ts

@@ -87,7 +87,8 @@ export const getDateBySelectionType = (
   }
 
   if (selectionType === 'week') {
-    return `${date.getFullYear()}W${getWeekNumber(date)}`
+    const { year, weekNumber } = getISOWeekNumberAndYear(date)
+    return `${year}W${weekNumber.toString().padStart(2, '0')}`
   }
 
   if (selectionType === 'month') {
@@ -254,12 +255,20 @@ const getTrailingDays = (
 }
 
 /**
- * Calculates the ISO week number for a given date.
- * @param date - The date to calculate the week number for.
- * @returns The ISO week number.
+ * Calculates the ISO 8601 week number and year for a given date.
+ *
+ * In the ISO 8601 standard:
+ * - Weeks start on Monday.
+ * - The first week of the year is the one that contains January 4th.
+ * - The year of the week may differ from the calendar year (e.g., Dec 29, 2025 is in ISO year 2026).
+ *
+ * @param {Date} date - The date for which to calculate the ISO week number and year.
+ * @returns {{ weekNumber: number, year: number }} An object containing:
+ *   - `weekNumber`: the ISO week number (1–53),
+ *   - `year`: the ISO year (may differ from the calendar year of the date).
  */
-export const getWeekNumber = (date: Date): number => {
-  const tempDate = new Date(date.getTime())
+export const getISOWeekNumberAndYear = (date: Date): { weekNumber: number; year: number } => {
+  const tempDate = new Date(date)
   tempDate.setHours(0, 0, 0, 0)
 
   // Thursday in current week decides the year
@@ -270,7 +279,7 @@ export const getWeekNumber = (date: Date): number => {
   // Calculate full weeks to the date
   const weekNumber = 1 + Math.round((tempDate.getTime() - week1.getTime()) / 86_400_000 / 7)
 
-  return weekNumber
+  return { weekNumber, year: tempDate.getFullYear() }
 }
 
 /**
@@ -284,22 +293,27 @@ export const getMonthDetails = (
   year: number,
   month: number,
   firstDayOfWeek: number
-): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
+): { week: { number: number; year: number }; days: { date: Date; month: string }[] }[] => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
   const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
   const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
-  const weeks: { weekNumber?: number; days: { date: Date; month: string }[] }[] = []
+  const weeks: {
+    week: { number: number; year: number }
+    days: { date: Date; month: string }[]
+  }[] = []
 
   days.forEach((day, index) => {
     if (index % 7 === 0 || weeks.length === 0) {
       weeks.push({
+        week: { number: 0, year: 0 },
         days: [],
       })
     }
 
     if ((index + 1) % 7 === 0) {
-      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
+      const { weekNumber, year } = getISOWeekNumberAndYear(day.date)
+      weeks[weeks.length - 1].week = { number: weekNumber, year }
     }
 
     weeks[weeks.length - 1].days.push(day)

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -401,6 +401,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       event.stopPropagation()
       setStartDate(null)
       setEndDate(null)
+      onStartDateChange?.(null)
+      onEndDateChange?.(null)
     }
 
     const handleEndDateChange = (date: Date | string | null) => {
@@ -447,15 +449,17 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       const date = inputDateParse
         ? inputDateParse(value)
         : getLocalDateFromString(value, locale, timepicker)
+
       if (date instanceof Date && date.getTime()) {
         setCalendarDate(date)
-        if (input === 'start') {
-          setStartDate(date)
-          onStartDateChange?.(date)
-        } else {
-          setEndDate(date)
-          onEndDateChange?.(date)
-        }
+      }
+
+      if (input === 'start') {
+        setStartDate(date ?? null)
+        onStartDateChange?.(date ?? null)
+      } else {
+        setEndDate(date ?? null)
+        onEndDateChange?.(date ?? null)
       }
     }, inputOnChangeDelay)
 

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './alert'
+export * from './autocomplete'
 export * from './avatar'
 export * from './backdrop'
 export * from './badge'

package/src/components/multi-select/CMultiSelect.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
   useRef,
   useMemo,
+  useId,
 } from 'react'
 
 import classNames from 'classnames'
@@ -46,6 +47,12 @@ export interface CMultiSelectProps
    * @since 5.8.0
    */
   ariaCleanerLabel?: string
+  /**
+   * A string that provides an accessible label for the indicator button. This label is read by screen readers to describe the action associated with the button.
+   *
+   * @since 5.19.0
+   */
+  ariaIndicatorLabel?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -217,6 +224,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     {
       allowCreateOptions,
       ariaCleanerLabel = 'Clear all selections',
+      ariaIndicatorLabel = 'Toggle visibility of options menu',
       className,
       cleaner = true,
       clearSearchOnSelect,
@@ -274,6 +282,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const nativeSelectRef = useRef<HTMLSelectElement>(null)
     const searchRef = useRef<HTMLInputElement>(null)
     const isInitialMount = useRef(true)
+    const uniqueId = useId()
 
     const [searchValue, setSearchValue] = useState('')
     const [selected, setSelected] = useState<SelectedOption[]>([])
@@ -532,7 +541,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
-        id={id}
+        id={id ?? uniqueId}
         invalid={invalid}
         label={label}
         text={text}
@@ -540,9 +549,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         valid={valid}
       >
         <CMultiSelectNativeSelect
-          id={id}
+          id={id ?? uniqueId}
           multiple={multiple}
-          name={name}
+          name={name ?? uniqueId}
           options={selected}
           required={required}
           value={
@@ -574,6 +583,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
             {...(!search && !disabled && { tabIndex: 0 })}
             onClick={() => !disabled && openDropdown()}
             onKeyDown={handleTogglerKeyDown}
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded={isOpen}
+            {...(portal && { 'aria-owns': `multiselect-listbox-${uniqueId}` })}
             ref={dropdownRefElement}
           >
             <CMultiSelectSelection
@@ -591,6 +604,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   type="text"
                   className="form-multi-select-search"
                   disabled={disabled}
+                  id={`search${id ?? uniqueId}`}
+                  name={`search${name ?? uniqueId}`}
                   autoComplete="off"
                   onChange={handleSearchChange}
                   onKeyDown={handleSearchKeyDown}
@@ -632,6 +647,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   }
                 }}
                 {...(disabled && { tabIndex: -1 })}
+                aria-label={ariaIndicatorLabel}
               ></button>
             </div>
           </div>
@@ -640,8 +656,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
               className={classNames('form-multi-select-dropdown', {
                 show: portal && isOpen,
               })}
+              id={`multiselect-listbox-${uniqueId}`}
               onKeyDown={handleGlobalSearch}
-              role="menu"
+              role="listbox"
+              aria-multiselectable={multiple}
               ref={dropdownMenuElement}
             >
               {multiple && selectAll && (
@@ -681,6 +699,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 CMultiSelect.propTypes = {
   allowCreateOptions: PropTypes.bool,
   ariaCleanerLabel: PropTypes.string,
+  ariaIndicatorLabel: PropTypes.string,
   className: PropTypes.string,
   cleaner: PropTypes.bool,
   clearSearchOnSelect: PropTypes.bool,

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { CElementCover } from '../element-cover'
 import { CVirtualScroller } from '../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './utils'
+import { getNextSibling, getPreviousSibling } from '../../utils'
 import type { Option, OptionsGroup } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
@@ -38,12 +38,12 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       virtualScroller,
       visibleItems = 10,
     },
-    ref,
+    ref
   ) => {
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, option: Option) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        onOptionOnClick && onOptionOnClick(option)
+        onOptionOnClick?.(option)
       }
 
       if (event.key === 'Down' || event.key === 'ArrowDown') {
@@ -77,6 +77,9 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
               onClick={() => onOptionOnClick && onOptionOnClick(option as Option)}
               onKeyDown={(event) => handleKeyDown(event, option as Option)}
               tabIndex={0}
+              role="option"
+              aria-selected={selected.some((_option) => _option.value === option.value)}
+              aria-disabled={Boolean(option.disabled)}
             >
               {optionsTemplate ? optionsTemplate(option as Option) : option.label}
             </div>
@@ -84,7 +87,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
             <div className="form-multi-select-optgroup-label" key={index}>
               {optionsGroupsTemplate ? optionsGroupsTemplate(option as OptionsGroup) : option.label}
             </div>
-          ),
+          )
         )
       ) : (
         <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
@@ -116,7 +119,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         {loading && <CElementCover />}
       </>
     )
-  },
+  }
 )
 
 CMultiSelectOptions.propTypes = {

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -29,7 +29,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
       selectionType,
       selectionTypeCounterText,
     },
-    ref,
+    ref
   ) => {
     return (
       <span
@@ -56,7 +56,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                       className="form-multi-select-tag-delete"
                       type="button"
                       aria-label="Close"
-                      onClick={() => onRemove && onRemove(option)}
+                      onClick={() => onRemove?.(option)}
                     />
                   )}
                 </span>
@@ -76,7 +76,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
         {children}
       </span>
     )
-  },
+  }
 )
 
 CMultiSelectSelection.propTypes = {

package/src/components/multi-select/utils.ts

@@ -66,46 +66,12 @@ export const flattenOptionsArray = (
   return optionsList
 }
 
-export const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.nextElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-
-  return
-}
-
 export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
   return Array.from(
     container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
   )
 }
 
-export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.previousElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.previousElementSibling
-  }
-
-  return
-}
-
 export const isExternalSearch = (search: Search): boolean => {
   return (
     (typeof search === 'string' && search === 'external') ||

package/src/components/time-picker/CTimePicker.tsx

@@ -278,10 +278,20 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       setIsValid(false)
     }
 
-    const handleOnChange = useDebouncedCallback(
-      (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
-      inputOnChangeDelay
-    )
+    const handleOnChange = useDebouncedCallback((value: string) => {
+      if (isValidTime(value)) {
+        const date = convertTimeToDate(value)
+        setDate(date)
+
+        if (date) {
+          onTimeChange?.(date.toTimeString(), date.toLocaleTimeString(), date)
+        } else {
+          onTimeChange?.(null)
+        }
+      } else {
+        onTimeChange?.(null)
+      }
+    }, inputOnChangeDelay)
 
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
       const _date = date || new Date('1970-01-01')

package/src/utils/getNextSibling.ts

@@ -0,0 +1,18 @@
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export default getNextSibling

package/src/utils/getPreviousSibling.ts

@@ -0,0 +1,18 @@
+const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export default getPreviousSibling

package/src/utils/index.ts

@@ -1,5 +1,7 @@
 import executeAfterTransition from './executeAfterTransition'
 import getNextActiveElement from './getNextActiveElement'
+import getNextSibling from './getNextSibling'
+import getPreviousSibling from './getPreviousSibling'
 import getRTLPlacement from './getRTLPlacement'
 import getTransitionDurationFromElement from './getTransitionDurationFromElement'
 import isInViewport from './isInViewport'
@@ -10,6 +12,8 @@ import mergeClassNames from './mergeClassNames'
 export {
   executeAfterTransition,
   getNextActiveElement,
+  getNextSibling,
+  getPreviousSibling,
   getRTLPlacement,
   getTransitionDurationFromElement,
   isInViewport,