@coreui/react-pro 5.23.5 → 5.24.0

package/src/components/autocomplete/CAutocomplete.tsx

@@ -34,7 +34,8 @@ import {
 } from './utils'
 
 export interface CAutocompleteProps
-  extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
+  extends
+    Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
   /**
    * Only allow selection of predefined options.
@@ -484,6 +485,32 @@ export const CAutocomplete = forwardRef<HTMLDivElement, CAutocompleteProps>(
       }
     }
 
+    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+      const inputValue = event.target.value
+
+      if (inputValue.length === 0) {
+        return
+      }
+
+      const inputValueLower = inputValue.toLowerCase()
+      const exactMatches = flattenOptionsArray(options).filter(
+        (option) => getOptionLabel(option).toLowerCase() === inputValueLower
+      )
+
+      if (exactMatches.length === 1) {
+        handleSelect(exactMatches[0] as Option)
+        return
+      }
+
+      if (allowOnlyDefinedOptions) {
+        handleClear()
+        return
+      }
+
+      setHint(undefined)
+      onChange?.(inputValue)
+    }
+
     const handleInputChange = (event: FormEvent<HTMLInputElement>) => {
       const value = (event.target as HTMLInputElement).value
       handleSearch(value)
@@ -716,13 +743,7 @@ export const CAutocomplete = forwardRef<HTMLDivElement, CAutocompleteProps>(
               disabled={disabled}
               id={id || `autocomplete-${uniqueId}`}
               name={name || `autocomplete-${uniqueId}`}
-              onBlur={(event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                if (allowOnlyDefinedOptions && selected === null && filteredOptions.length === 0) {
-                  handleClear()
-                }
-              }}
+              onBlur={handleInputBlur}
               onChange={handleInputChange}
               onKeyDown={handleInputKeyDown}
               placeholder={placeholder}

package/src/components/autocomplete/CAutocompleteOptions.tsx

@@ -111,7 +111,7 @@ export const CAutocompleteOptions = forwardRef<HTMLDivElement, CAutocompleteOpti
                   ? optionsGroupsTemplate(option as OptionsGroup)
                   : option.label}
               </div>
-              {option.options.map((option: Option, index: number) => createOption(option, index))}
+              {option.options?.map((option: Option, index: number) => createOption(option, index))}
             </React.Fragment>
           ) : (
             createOption(option as Option, index)

package/src/components/calendar/CCalendar.tsx

@@ -69,7 +69,7 @@ export interface CCalendarProps {
   className?: string
 
   /**
-   * Sets the format for day names. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day.
+   * Sets the format for days. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day.
    *
    * @default 'numeric'
    * @since 4.3.0
@@ -117,6 +117,14 @@ export interface CCalendarProps {
    */
   minDate?: Date | string | null
 
+  /**
+   * Sets the format for month names. Accepts built-in formats ('long', 'narrow', 'short', 'numeric', '2-digit').
+   *
+   * @since 5.24.0
+   * @default 'short'
+   */
+  monthFormat?: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit'
+
   /**
    * Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically.
    */
@@ -155,6 +163,64 @@ export interface CCalendarProps {
    */
   range?: boolean
 
+  /**
+   * A function that allows you to customize the rendering of individual day cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles, add tooltips, or include additional content in each day cell.
+   *
+   * @since 5.24.0
+   */
+  renderDayCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInCurrentMonth: boolean
+      isInRange: boolean
+      isSelected: boolean
+      isToday: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual month cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each month cell.
+   *
+   * @since 5.24.0
+   */
+  renderMonthCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual quarter cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each quarter cell.
+   *
+   * @since 5.24.0
+   */
+  renderQuarterCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual year cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each year cell.
+   *
+   * @since 5.24.0
+   */
+  renderYearCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
   /**
    * Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`.
    *
@@ -215,10 +281,21 @@ export interface CCalendarProps {
    */
   weekNumbersLabel?: string
 
+  /**
+   * Sets the format for years. Accepts built-in formats ('numeric' or '2-digit').
+   *
+   * @default 'numeric'
+   * @since 5.24.0
+   */
+  yearFormat?: 'numeric' | '2-digit'
+
   /**
    * Callback fired when the calendar's reference date (i.e., the date indicating which month/year is currently displayed) changes. Receives the new `Date | string` as an argument for further handling.
    */
-  onCalendarDateChange?: (date: Date | string) => void
+  onCalendarDateChange?: (
+    date: Date | string,
+    view: 'days' | 'months' | 'quarters' | 'years'
+  ) => void
 
   /**
    * Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering.
@@ -264,6 +341,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       locale = 'default',
       maxDate,
       minDate,
+      monthFormat = 'short',
       navigation = true,
       navNextIcon,
       navNextDoubleIcon,
@@ -271,6 +349,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       navPrevDoubleIcon,
       navYearFirst,
       range,
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       selectAdjacementDays = false,
       selectEndDate,
       selectionType = 'day',
@@ -278,6 +360,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       showWeekNumber = false,
       weekdayFormat = 2,
       weekNumbersLabel,
+      yearFormat = 'numeric',
       onCalendarDateChange,
       onDateHover,
       onEndDateChange,
@@ -296,6 +379,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         day: 'days',
         week: 'days',
         month: 'months',
+        quarter: 'quarters',
         year: 'years',
       }
 
@@ -392,7 +476,8 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
 
       setCalendarDate(d)
-      onCalendarDateChange?.(d)
+      onCalendarDateChange?.(d, view)
+      console.log('View changed to:', view)
     }
 
     const handleStartDateChange = (date: Date | null) => {
@@ -435,12 +520,20 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       if (view === 'months' && selectionType !== 'month') {
         setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
         handleViewChange('days')
+        onCalendarDateChange?.(_date, 'days')
         return
       }
 
       if (view === 'years' && selectionType !== 'year') {
         setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date)
-        handleViewChange('months')
+        if (selectionType === 'quarter') {
+          handleViewChange('quarters')
+          onCalendarDateChange?.(_date, 'quarters')
+        } else {
+          handleViewChange('months')
+          onCalendarDateChange?.(_date, 'months')
+        }
+
         return
       }
 
@@ -564,7 +657,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
             setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
-          if (view === 'months') {
+          if (view === 'months' || view === 'quarters') {
             setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
@@ -709,11 +802,16 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   locale={locale}
                   maxDate={_maxDate}
                   minDate={_minDate}
+                  monthFormat={monthFormat}
                   onCalendarClick={(date) => handleCalendarClick(date, index)}
                   onCalendarKeyDown={(event, date) => handleCalendarKeyDown(event, date, index)}
                   onCalendarMouseEnter={handleCalendarMouseEnter}
                   onCalendarMouseLeave={handleCalendarMouseLeave}
                   order={index}
+                  renderDayCell={renderDayCell}
+                  renderMonthCell={renderMonthCell}
+                  renderQuarterCell={renderQuarterCell}
+                  renderYearCell={renderYearCell}
                   selectAdjacementDays={selectAdjacementDays}
                   selectEndDate={_selectEndDate}
                   selectionType={selectionType}
@@ -723,6 +821,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   view={view}
                   weekdayFormat={weekdayFormat}
                   weekNumbersLabel={weekNumbersLabel}
+                  yearFormat={yearFormat}
                 />
               </div>
             )
@@ -759,7 +858,7 @@ CCalendar.propTypes = {
   range: PropTypes.bool,
   selectAdjacementDays: PropTypes.bool,
   selectEndDate: PropTypes.bool,
-  selectionType: PropTypes.oneOf(['day', 'week', 'month', 'year']),
+  selectionType: PropTypes.oneOf(['day', 'week', 'month', 'quarter', 'year']),
   showAdjacementDays: PropTypes.bool,
   showWeekNumber: PropTypes.bool,
   startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),

package/src/components/calendar/CCalendarPanel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, KeyboardEvent, useEffect, useState } from 'react'
+import React, { forwardRef, KeyboardEvent, ReactNode, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import {
@@ -12,6 +12,9 @@ import {
   isMonthDisabled,
   isMonthInRange,
   isMonthSelected,
+  isQuarterDisabled,
+  isQuarterInRange,
+  isQuarterSelected,
   isToday,
   isYearDisabled,
   isYearInRange,
@@ -29,11 +32,46 @@ export interface CCalendarPanelProps {
   locale: string
   maxDate: Date | null
   minDate: Date | null
+  monthFormat?: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit'
   onCalendarClick: (date: Date) => void
   onCalendarKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCalendarMouseEnter: (date: Date) => void
   onCalendarMouseLeave: () => void
   order: number
+  renderDayCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInCurrentMonth: boolean
+      isInRange: boolean
+      isSelected: boolean
+      isToday: boolean
+    }
+  ) => ReactNode
+  renderMonthCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderQuarterCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderYearCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
   selectionType: SelectionTypes
@@ -43,6 +81,7 @@ export interface CCalendarPanelProps {
   view: ViewTypes
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
   weekNumbersLabel: string | undefined
+  yearFormat?: 'numeric' | '2-digit'
 }
 
 export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
@@ -57,10 +96,15 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       locale,
       maxDate,
       minDate,
+      monthFormat,
       onCalendarClick,
       onCalendarKeyDown,
       onCalendarMouseEnter,
       onCalendarMouseLeave,
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       selectAdjacementDays,
       selectEndDate,
       selectionType,
@@ -70,13 +114,14 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       view,
       weekdayFormat,
       weekNumbersLabel,
+      yearFormat,
     },
     ref
   ) => {
     const [listOfMonths, setListOfMonths] = useState<string[][]>([])
 
     useEffect(() => {
-      setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
+      setListOfMonths(createGroupsInArray(getMonthsNames(locale, monthFormat), 4))
     }, [])
 
     const monthDetails = getMonthDetails(
@@ -138,7 +183,6 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                     }
                   )}
                   key={index}
-                  // tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
                   {...(selectionType === 'week' && isSelected && { 'aria-selected': true })}
                   {...(selectionType === 'week' &&
                     !isDisabled && {
@@ -196,9 +240,17 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           })}
                       >
                         <div className="calendar-cell-inner">
-                          {typeof dayFormat === 'function'
-                            ? dayFormat(date)
-                            : date.toLocaleDateString(locale, { day: dayFormat })}
+                          {renderDayCell
+                            ? renderDayCell(date, {
+                                isDisabled,
+                                isInCurrentMonth: month === 'current',
+                                isInRange: isDateInRange(date, startDate, endDate),
+                                isSelected,
+                                isToday: isToday(date),
+                              })
+                            : typeof dayFormat === 'function'
+                              ? dayFormat(date)
+                              : date.toLocaleDateString(locale, { day: dayFormat })}
                         </div>
                       </td>
                     ) : (
@@ -241,13 +293,66 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           onMouseLeave: () => onCalendarMouseLeave(),
                         })}
                       >
-                        <div className="calendar-cell-inner">{month}</div>
+                        <div className="calendar-cell-inner">
+                          {renderMonthCell
+                            ? renderMonthCell(date, {
+                                isDisabled,
+                                isInRange: isMonthInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : month}
+                        </div>
                       </td>
                     )
                   })}
                 </tr>
               )
             })}
+          {view === 'quarters' && (
+            <tr>
+              {Array.from({ length: 4 }, (_, index) => {
+                const date = new Date(calendarDate.getFullYear(), index * 3, 1)
+                const isDisabled = isQuarterDisabled(date, minDate, maxDate, disabledDates)
+                const isSelected = isQuarterSelected(date, startDate, endDate)
+                return (
+                  <td
+                    className={classNames('calendar-cell quarters', {
+                      disabled: isDisabled,
+                      selected: isSelected,
+                      'range-hover':
+                        selectionType === 'quarter' &&
+                        (hoverDate && selectEndDate
+                          ? isQuarterInRange(date, startDate, hoverDate)
+                          : isQuarterInRange(date, hoverDate, endDate)),
+                      range: isQuarterInRange(date, startDate, endDate),
+                    })}
+                    key={index}
+                    tabIndex={isDisabled ? -1 : 0}
+                    {...(isSelected && { 'aria-selected': true })}
+                    {...(!isDisabled && {
+                      onBlur: () => onCalendarMouseLeave(),
+                      onClick: () => onCalendarClick(date),
+                      onFocus: () => onCalendarMouseEnter(date),
+                      onKeyDown: (event) => onCalendarKeyDown(event, date),
+                      onMouseEnter: () => onCalendarMouseEnter(date),
+                      onMouseLeave: () => onCalendarMouseLeave(),
+                    })}
+                  >
+                    <div className="calendar-cell-inner">
+                      {renderQuarterCell
+                        ? renderQuarterCell(date, {
+                            isDisabled,
+                            isInRange: isQuarterInRange(date, startDate, endDate),
+                            isSelected,
+                          })
+                        : `Q${index + 1}`}
+                    </div>
+                  </td>
+                )
+              })}
+            </tr>
+          )}
+
           {view === 'years' &&
             listOfYears.map((row, index) => {
               return (
@@ -281,7 +386,13 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                         })}
                       >
                         <div className="calendar-cell-inner">
-                          {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                          {renderYearCell
+                            ? renderYearCell(date, {
+                                isDisabled,
+                                isInRange: isYearInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : date.toLocaleDateString(locale, { year: yearFormat })}
                         </div>
                       </td>
                     )

package/src/components/calendar/types.ts

@@ -1,5 +1,5 @@
 export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
 
-export type SelectionTypes = 'day' | 'week' | 'month' | 'year'
+export type SelectionTypes = 'day' | 'week' | 'month' | 'quarter' | 'year'
 
-export type ViewTypes = 'days' | 'months' | 'years'
+export type ViewTypes = 'days' | 'months' | 'quarters' | 'years'