@coreui/react-pro 5.12.0 → 5.13.0

package/src/components/calendar/CCalendar.tsx

@@ -12,10 +12,11 @@ import {
   isDateDisabled,
   isDisableDateInRange,
   isSameDateAs,
+  setTimeFromDate,
 } from './utils'
 import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
 
-import { useForkedRef, useStateWithCallback } from '../../hooks'
+import { useForkedRef } from '../../hooks'
 import { CCalendarPanel } from './CCalendarPanel'
 
 export interface CCalendarProps {
@@ -284,11 +285,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onSelectEndChange,
       onViewChanged,
     },
-    ref,
+    ref
   ) => {
     const calendarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, calendarRef)
-    const isInitialMount = useRef(true)
     const [_calendarDate, setCalendarDate] = useState<Date | null>(null)
 
     useEffect(() => {
@@ -299,7 +299,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         year: 'years',
       }
 
-      setView((viewMap[selectionType] as ViewTypes) || 'days')
+      handleViewChange((viewMap[selectionType] as ViewTypes) || 'days')
     }, [selectionType])
 
     useEffect(() => {
@@ -310,31 +310,30 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       if (calendarDate) {
         const date = convertToDateObject(calendarDate, selectionType)
-        !isSameDateAs(_calendarDate, date) && setCalendarDate(date)
+        if (!isSameDateAs(_calendarDate, date)) {
+          setCalendarDate(date)
+        }
       }
     }, [calendarDate])
 
-    const [_startDate, setStartDate] = useStateWithCallback<Date | null>(
-      startDate ? convertToDateObject(startDate, selectionType) : null,
-      () =>
-        onStartDateChange && onStartDateChange(getDateBySelectionType(_startDate, selectionType)),
-      !isInitialMount.current,
+    const [_startDate, setStartDate] = useState<Date | null>(
+      startDate ? convertToDateObject(startDate, selectionType) : null
+    )
+
+    const [_endDate, setEndDate] = useState<Date | null>(
+      endDate ? convertToDateObject(endDate, selectionType) : null
     )
+
     useEffect(() => {
       const date = startDate ? convertToDateObject(startDate, selectionType) : null
-      if (!isSameDateAs(date, _startDate)) {
+      if (date?.getTime() !== _startDate?.getTime()) {
         setStartDate(date)
       }
     }, [startDate])
 
-    const [_endDate, setEndDate] = useStateWithCallback<Date | null>(
-      endDate ? convertToDateObject(endDate, selectionType) : null,
-      () => onEndDateChange && onEndDateChange(getDateBySelectionType(_endDate, selectionType)),
-      !isInitialMount.current,
-    )
     useEffect(() => {
       const date = endDate ? convertToDateObject(endDate, selectionType) : null
-      if (!isSameDateAs(date, _endDate)) {
+      if (date?.getTime() !== _endDate?.getTime()) {
         setEndDate(date)
       }
     }, [endDate])
@@ -342,34 +341,25 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     const [_hoverDate, setHoverDate] = useState<Date | null>(null)
 
     const [_maxDate, setMaxDate] = useState<Date | null>(
-      maxDate ? convertToDateObject(maxDate, selectionType) : null,
+      maxDate ? convertToDateObject(maxDate, selectionType) : null
     )
     useEffect(() => {
-      maxDate && setMaxDate(convertToDateObject(maxDate, selectionType))
+      setMaxDate(maxDate ? convertToDateObject(maxDate, selectionType) : null)
     }, [maxDate])
 
     const [_minDate, setMinDate] = useState<Date | null>(
-      minDate ? convertToDateObject(minDate, selectionType) : null,
+      minDate ? convertToDateObject(minDate, selectionType) : null
     )
     useEffect(() => {
-      minDate && setMinDate(convertToDateObject(minDate, selectionType))
+      setMinDate(minDate ? convertToDateObject(minDate, selectionType) : null)
     }, [minDate])
 
-    const [_selectEndDate, setSelectEndDate] = useStateWithCallback(
-      selectEndDate,
-      onSelectEndChange,
-    )
+    const [_selectEndDate, setSelectEndDate] = useState(selectEndDate)
     useEffect(() => {
       setSelectEndDate(selectEndDate)
     }, [selectEndDate])
 
-    useEffect(() => {
-      if (!isInitialMount.current && typeof _selectEndDate === 'boolean') {
-        onSelectEndChange?.(_selectEndDate)
-      }
-    }, [_selectEndDate])
-
-    const [view, setView] = useStateWithCallback<ViewTypes>('days', onViewChanged)
+    const [view, setView] = useState<ViewTypes>('days')
     const [focusOn, setFocusOn] = useState<number | undefined>()
 
     useEffect(() => {
@@ -380,10 +370,6 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }, [view])
 
-    useEffect(() => {
-      isInitialMount.current = false
-    }, [])
-
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
       if (_calendarDate === null) {
         return
@@ -409,6 +395,36 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarDateChange?.(d)
     }
 
+    const handleStartDateChange = (date: Date | null) => {
+      date = date ? convertToDateObject(date, selectionType) : null
+      if (date) {
+        date = setTimeFromDate(date, _startDate)
+      }
+
+      setStartDate(date)
+      onStartDateChange?.(getDateBySelectionType(date, selectionType))
+    }
+
+    const handleEndDateChange = (date: Date | null) => {
+      date = date ? convertToDateObject(date, selectionType) : null
+      if (date) {
+        date = setTimeFromDate(date, _endDate)
+      }
+
+      setEndDate(date)
+      onEndDateChange?.(getDateBySelectionType(date, selectionType))
+    }
+
+    const handleSelectEndDateChange = (value: boolean) => {
+      setSelectEndDate(value)
+      onSelectEndChange?.(value)
+    }
+
+    const handleViewChange = (value: ViewTypes) => {
+      setView(value)
+      onViewChanged?.(value)
+    }
+
     const handleCalendarClick = (date: Date, index?: number) => {
       const _date = new Date(date)
 
@@ -418,13 +434,13 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       if (view === 'months' && selectionType !== 'month') {
         setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
-        setView('days')
+        handleViewChange('days')
         return
       }
 
       if (view === 'years' && selectionType !== 'year') {
         setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date)
-        setView('months')
+        handleViewChange('months')
         return
       }
 
@@ -435,48 +451,48 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       if (range) {
         if (_selectEndDate) {
-          setSelectEndDate(false)
+          handleSelectEndDateChange(false)
 
           if (_startDate && _startDate > date) {
-            setStartDate(null)
-            setEndDate(null)
+            handleStartDateChange(null)
+            handleEndDateChange(null)
             return
           }
 
           if (isDisableDateInRange(_startDate, date, disabledDates)) {
-            setStartDate(null)
-            setEndDate(null)
+            handleStartDateChange(null)
+            handleEndDateChange(null)
             return
           }
 
-          setEndDate(date)
+          handleEndDateChange(date)
           return
         }
 
         if (_endDate && _endDate < date) {
-          setStartDate(null)
-          setEndDate(null)
+          handleStartDateChange(null)
+          handleEndDateChange(null)
           return
         }
 
         if (isDisableDateInRange(date, _endDate, disabledDates)) {
-          setStartDate(null)
-          setEndDate(null)
+          handleStartDateChange(null)
+          handleEndDateChange(null)
           return
         }
 
-        setSelectEndDate(true)
-        setStartDate(date)
+        handleSelectEndDateChange(true)
+        handleStartDateChange(date)
         return
       }
 
-      setStartDate(date)
+      handleStartDateChange(date)
     }
 
     const handleCalendarKeyDown = (
       event: React.KeyboardEvent<HTMLDivElement>,
       date: Date,
-      index?: number,
+      index?: number
     ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
@@ -602,6 +618,8 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         return
       }
 
+      date = setTimeFromDate(date, selectEndDate ? _endDate : _startDate)
+
       setHoverDate(date)
 
       if (date) {
@@ -654,7 +672,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
             [`select-${selectionType}`]: selectionType && view === 'days',
             'show-week-numbers': showWeekNumber,
           },
-          className,
+          className
         )}
         ref={forkedRef}
       >
@@ -676,9 +694,9 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   navPrevDoubleIcon={navPrevDoubleIcon}
                   navPrevIcon={navPrevIcon}
                   navYearFirst={navYearFirst}
-                  onMonthClick={() => setView('months')}
+                  onMonthClick={() => handleViewChange('months')}
                   onNavigationClick={handleNavigationOnClick}
-                  onYearClick={() => setView('years')}
+                  onYearClick={() => handleViewChange('years')}
                   view={view}
                 />
                 <CCalendarPanel
@@ -711,7 +729,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           })}
       </div>
     )
-  },
+  }
 )
 
 CCalendar.propTypes = {

package/src/components/calendar/CCalendarNavigation.tsx

@@ -41,7 +41,7 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
       onYearClick,
       view,
     },
-    ref,
+    ref
   ) => {
     return (
       <div className="calendar-nav" ref={ref}>
@@ -114,7 +114,7 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
         )}
       </div>
     )
-  },
+  }
 )
 
 CCalendarNavigation.displayName = 'CCalendarNavigation'

package/src/components/calendar/CCalendarPanel.tsx

@@ -72,7 +72,7 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       weekdayFormat,
       weekNumbersLabel,
     },
-    ref,
+    ref
   ) => {
     const [listOfMonths, setListOfMonths] = useState<string[][]>([])
 
@@ -83,7 +83,7 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
     const monthDetails = getMonthDetails(
       calendarDate.getFullYear(),
       calendarDate.getMonth(),
-      firstDayOfWeek,
+      firstDayOfWeek
     )
     const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4)
     const weekDays = monthDetails[0].days
@@ -125,7 +125,7 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                 week.weekNumber === 0
                   ? `${calendarDate.getFullYear()}W53`
                   : `${calendarDate.getFullYear()}W${week.weekNumber}`,
-                selectionType,
+                selectionType
               )
               const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
               const isSelected = isDateSelected(date, startDate, endDate)
@@ -300,7 +300,7 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
         </tbody>
       </table>
     )
-  },
+  }
 )
 
 CCalendarPanel.displayName = 'CCalendarPanel'

package/src/components/calendar/utils.ts

@@ -80,7 +80,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
  */
 export const getDateBySelectionType = (
   date: Date | null,
-  selectionType: SelectionTypes,
+  selectionType: SelectionTypes
 ): string | Date | null => {
   if (date === null) {
     return null
@@ -116,7 +116,7 @@ export const getFirstAvailableDateInRange = (
   endDate: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): Date | null => {
   const _min = min ? new Date(Math.max(startDate.getTime(), min.getTime())) : startDate
   const _max = max ? new Date(Math.min(endDate.getTime(), max.getTime())) : endDate
@@ -158,7 +158,7 @@ export const getMonthsNames = (locale: string, format: 'short' | 'long' = 'short
  */
 export const getSelectableDates = (
   element: HTMLElement,
-  selector: string = 'tr[tabindex="0"], td[tabindex="0"]',
+  selector: string = 'tr[tabindex="0"], td[tabindex="0"]'
 ) => {
   return [...Element.prototype.querySelectorAll.call(element, selector)] as HTMLElement[]
 }
@@ -183,7 +183,7 @@ export const getYears = (year: number, range: number = 6): number[] => {
 const getLeadingDays = (
   year: number,
   month: number,
-  firstDayOfWeek: number,
+  firstDayOfWeek: number
 ): { date: Date; month: string }[] => {
   // 0: sunday
   // 1: monday
@@ -239,7 +239,7 @@ const getTrailingDays = (
   year: number,
   month: number,
   leadingDays: { date: Date; month: string }[],
-  monthDays: { date: Date; month: string }[],
+  monthDays: { date: Date; month: string }[]
 ) => {
   const dates = []
   const days = 42 - (leadingDays.length + monthDays.length)
@@ -283,7 +283,7 @@ export const getWeekNumber = (date: Date): number => {
 export const getMonthDetails = (
   year: number,
   month: number,
-  firstDayOfWeek: number,
+  firstDayOfWeek: number
 ): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
@@ -320,7 +320,7 @@ export const isDateDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): boolean => {
   if (min && date < min) {
     return true
@@ -405,7 +405,7 @@ export const isDateSelected = (date: Date, start: Date | null, end: Date | null)
 export const isDisableDateInRange = (
   startDate?: Date | null,
   endDate?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): boolean => {
   if (startDate && endDate) {
     const date = new Date(startDate)
@@ -437,7 +437,7 @@ export const isMonthDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ) => {
   const current = date.getFullYear() * 12 + date.getMonth()
   const _min = min ? min.getFullYear() * 12 + min.getMonth() : null
@@ -556,7 +556,7 @@ export const isYearDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ) => {
   const year = date.getFullYear()
   const minYear = min ? min.getFullYear() : null
@@ -638,3 +638,26 @@ export const removeTimeFromDate = (date: Date): Date => {
   clearedDate.setHours(0, 0, 0, 0)
   return clearedDate
 }
+
+/**
+ * Copies the time (hours, minutes, seconds, milliseconds) from one Date to another.
+ *
+ * @param {Date} target - The date whose time will be updated.
+ * @param {Date | null} source - The date to copy the time from.
+ * @returns {Date} A new Date instance with the date from `target` and time from `source`.
+ */
+export const setTimeFromDate = (target: Date, source: Date | null): Date => {
+  if (!(source instanceof Date)) {
+    return target
+  }
+
+  const result = new Date(target) // create a copy to avoid mutation
+  result.setHours(
+    source.getHours(),
+    source.getMinutes(),
+    source.getSeconds(),
+    source.getMilliseconds()
+  )
+
+  return result
+}

package/src/components/date-picker/CDatePicker.tsx

@@ -53,7 +53,7 @@ export const CDatePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDatePicke
         {...rest}
       />
     )
-  },
+  }
 )
 
 CDatePicker.displayName = 'CDatePicker'

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

@@ -208,7 +208,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       ariaNavPrevMonthLabel,
       ariaNavPrevYearLabel,
       calendars = 2,
-      calendarDate,
       cancelButton = 'Cancel',
       cancelButtonColor = 'primary',
       cancelButtonSize = 'sm',
@@ -274,15 +273,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       visible,
       weekdayFormat,
       weekNumbersLabel,
+      calendarDate = startDate || endDate || null,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const inputEndRef = useRef<HTMLInputElement>(null)
     const inputStartRef = useRef<HTMLInputElement>(null)
     const formRef = useRef<HTMLFormElement>()
 
-    const [_calendarDate, setCalendarDate] = useState<Date | string | null>(calendarDate ?? null)
+    const [_calendarDate, setCalendarDate] = useState<Date | string | null>(calendarDate)
     const [_endDate, setEndDate] = useState<Date | string | null>(endDate ?? null)
     const [_maxDate, setMaxDate] = useState<Date | string | null>(maxDate ?? null)
     const [_minDate, setMinDate] = useState<Date | string | null>(minDate ?? null)
@@ -290,7 +290,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const [_visible, setVisible] = useState(visible)
 
     const [initialStartDate, setInitialStartDate] = useState<Date | string | null>(
-      startDate ?? null,
+      startDate ?? null
     )
     const [initialEndDate, setInitialEndDate] = useState<Date | string | null>(endDate ?? null)
     const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | string | null>(null)
@@ -303,19 +303,27 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [valid, invalid])
 
     useEffect(() => {
-      setStartDate(startDate ? startDate : null)
+      if (startDate) {
+        setStartDate(startDate)
+      }
     }, [startDate])
 
     useEffect(() => {
-      setEndDate(endDate ? endDate : null)
+      if (endDate) {
+        setEndDate(endDate)
+      }
     }, [endDate])
 
     useEffect(() => {
-      maxDate && setMaxDate(maxDate)
+      if (maxDate) {
+        setMaxDate(maxDate)
+      }
     }, [maxDate])
 
     useEffect(() => {
-      minDate && setMinDate(minDate)
+      if (minDate) {
+        setMinDate(minDate)
+      }
     }, [minDate])
 
     useEffect(() => {
@@ -355,7 +363,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const formatDate = (date: Date | string) => {
       if (inputDateFormat) {
         return inputDateFormat(
-          date instanceof Date ? new Date(date) : convertToDateObject(date, selectionType),
+          date instanceof Date ? new Date(date) : convertToDateObject(date, selectionType)
         )
       }
 
@@ -382,7 +390,11 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }
 
     const handleDateHover = (date: Date | string | null) => {
-      selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date)
+      if (selectEndDate) {
+        setInputEndHoverValue(date)
+      } else {
+        setInputStartHoverValue(date)
+      }
     }
 
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
@@ -394,14 +406,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const handleEndDateChange = (date: Date | string | null) => {
       setEndDate(date)
       setInputEndHoverValue(null)
-      onEndDateChange && onEndDateChange(date)
+      onEndDateChange?.(date)
 
       if (timepicker || footer) {
         return
       }
 
-      if (closeOnSelect) {
-        _startDate !== null && setVisible(false)
+      if (closeOnSelect && _startDate !== null) {
+        setVisible(false)
       }
     }
 
@@ -420,7 +432,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const handleStartDateChange = (date: Date | string | null) => {
       setStartDate(date)
       setInputStartHoverValue(null)
-      onStartDateChange && onStartDateChange(date)
+      onStartDateChange?.(date)
 
       if (timepicker || footer) {
         return
@@ -437,7 +449,11 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         : getLocalDateFromString(value, locale, timepicker)
       if (date instanceof Date && date.getTime()) {
         setCalendarDate(date)
-        input === 'start' ? setStartDate(date) : setEndDate(date)
+        if (input === 'start') {
+          setStartDate(date)
+        } else {
+          setEndDate(date)
+        }
       }
     }, inputOnChangeDelay)
 
@@ -536,7 +552,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               'is-invalid': isValid === false ? true : false,
               'is-valid': isValid,
             },
-            className,
+            className
           )}
           disabled={disabled}
           dropdownClassNames="date-picker-dropdown"
@@ -552,7 +568,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                   onClick={() => {
                     const date = new Date()
                     handleStartDateChange(date)
-                    range && handleEndDateChange(date)
+                    if (range) handleEndDateChange(date)
                     setCalendarDate(date)
                   }}
                 >
@@ -566,7 +582,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                   variant={cancelButtonVariant}
                   onClick={() => {
                     handleStartDateChange(initialStartDate)
-                    range && handleEndDateChange(initialEndDate)
+                    if (range) handleEndDateChange(initialEndDate)
                     setVisible(false)
                   }}
                 >
@@ -591,13 +607,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           portal={portal}
           onHide={() => {
             setVisible(false)
-            onHide && onHide()
+            onHide?.()
           }}
           onShow={() => {
             setInitialStartDate(_startDate)
             setInitialEndDate(_endDate)
             setVisible(true)
-            onShow && onShow()
+            onShow?.()
           }}
           visible={_visible}
           {...rest}
@@ -710,7 +726,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         </CPicker>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CDateRangePicker.displayName = 'CDateRangePicker'

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './password-input'
 export * from './pagination'
 export * from './placeholder'
 export * from './progress'