@coreui/react-pro 5.17.1 → 5.18.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') {
@@ -138,6 +139,32 @@ export const getFirstAvailableDateInRange = (
   return null
 }
 
+/**
+ * Returns the ISO 8601 week string (e.g., "2026W01") for a given date.
+ *
+ * The ISO week date system considers:
+ * - Weeks starting on Monday
+ * - Week 1 is the week with the first Thursday of the year
+ *
+ * @param {Date} date - The date for which to calculate the ISO week and year.
+ * @returns {string} The ISO week string in the format "YYYYWww" (e.g., "2026W01").
+ */
+export const getISOWeekString = (date: Date): string => {
+  const tempDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  // Set to nearest Thursday: current date + 4 - current day number (0 is Sunday)
+  const day = tempDate.getUTCDay()
+  const diff = day <= 4 ? 4 - day : 11 - day
+  tempDate.setUTCDate(tempDate.getUTCDate() + diff)
+
+  const yearStart = new Date(Date.UTC(tempDate.getUTCFullYear(), 0, 1))
+  const weekNumber = Math.ceil(((tempDate.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+
+  const isoYear = tempDate.getUTCFullYear()
+  const weekString = `W${weekNumber.toString().padStart(2, '0')}`
+
+  return `${isoYear}${weekString}`
+}
+
 /**
  * Retrieves an array of month names based on locale and format.
  * @param locale - The locale string (e.g., 'en-US').
@@ -254,12 +281,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 +305,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 +319,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/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,