@coreui/react-pro 5.17.0 → 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,13 +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)
-        } else {
-          setEndDate(date)
-        }
+      }
+
+      if (input === 'start') {
+        setStartDate(date ?? null)
+        onStartDateChange?.(date ?? null)
+      } else {
+        setEndDate(date ?? null)
+        onEndDateChange?.(date ?? null)
       }
     }, inputOnChangeDelay)
 

package/src/components/dropdown/CDropdown.tsx

@@ -1,4 +1,13 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import type { Options } from '@popperjs/core'
@@ -190,59 +199,64 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [dropdownToggleElement, setDropdownToggleElement] = useState<HTMLElement | null>(null)
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : as
-
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
+    const dropdownToggleRef = useCallback((node: HTMLElement | null) => {
+      if (node) {
+        setDropdownToggleElement(node)
+      }
+    }, [])
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownToggleRef,
-      dropdownMenuRef,
-      popper,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
+    const allowPopperUse = popper && typeof alignment !== 'object'
+    const Component = variant === 'nav-item' ? 'li' : as
 
-    const defaultPopperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
+    const computedPopperConfig: Partial<Options> = useMemo(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+      }
 
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
+      return {
+        ...defaultPopperConfig,
+        ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+      }
+    }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
-      const toggleElement = dropdownToggleRef.current
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
+
+    const handleShow = () => {
+      const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
 
-      if (_visible && toggleElement && menuElement) {
-        if (popper) {
+      if (toggleElement && menuElement) {
+        setVisible(true)
+
+        if (allowPopperUse) {
           initPopper(toggleElement, menuElement, computedPopperConfig)
         }
 
@@ -255,28 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
 
         onShow?.()
       }
+    }
 
-      return () => {
-        if (popper) {
-          destroyPopper()
-        }
-
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
+    const handleHide = () => {
+      setVisible(false)
 
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
 
-        onHide?.()
+      if (allowPopperUse) {
+        destroyPopper()
       }
-    }, [
-      computedPopperConfig,
-      destroyPopper,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      initPopper,
-      _visible,
-    ])
+
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+
+      onHide?.()
+    }
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -299,16 +311,16 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       if (event.key === 'Escape') {
-        setVisible(false)
+        handleHide()
       }
     }
 
     const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+      if (!dropdownToggleElement || !dropdownMenuRef.current) {
         return
       }
 
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      if (dropdownToggleElement.contains(event.target as HTMLElement)) {
         return
       }
 
@@ -317,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
         (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
       ) {
-        setTimeout(() => setVisible(false), 1)
+        setTimeout(() => handleHide(), 1)
         return
       }
     }
 
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
         {variant === 'input-group' ? (

package/src/components/dropdown/CDropdownContext.ts

@@ -5,10 +5,10 @@ export interface CDropdownContextProps {
   alignment?: Alignments
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   dark?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | null>
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  dropdownToggleRef: (node: HTMLElement | null) => void
+  handleHide?: () => void
+  handleShow?: () => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'

package/src/components/dropdown/CDropdownToggle.tsx

@@ -45,18 +45,24 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
   }
 
@@ -74,36 +80,32 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
+  if (custom && React.isValidElement(children)) {
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: dropdownToggleRef,
+        })}
+      </>
+    )
+  }
 
+  if (variant === 'nav-item' && navLink) {
     return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
         {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
+      </a>
     )
   }
 
-  return <Toggler />
+  return (
+    <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      {children}
+      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+    </CButton>
+  )
 }
 
 CDropdownToggle.propTypes = {

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/components/time-picker/CTimePickerRollCol.tsx

@@ -39,7 +39,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        onClick && onClick(value)
+        onClick?.(value)
       }
     }
 
@@ -52,7 +52,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
                 selected: element.value === selected,
               })}
               key={index}
-              onClick={() => onClick && onClick(element.value)}
+              onClick={() => onClick?.(element.value)}
               onKeyDown={(event) => handleKeyDown(event, element.value)}
               role="button"
               tabIndex={0}