@coreui/react-pro 5.12.0 → 5.14.0

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/callout/__tests__/CCallout.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCallout } from '../../../index'
+import { CCallout } from '../index'
 
 test('loads and displays CCallout component', async () => {
   const { container } = render(<CCallout>Test</CCallout>)

package/src/components/card/__tests__/CCard.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCard } from '../../../index'
+import { CCard } from '../index'
 
 test('loads and displays CCard component', async () => {
   const { container } = render(<CCard>Test</CCard>)

package/src/components/card/__tests__/CCardBody.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardBody } from '../../../index'
+import { CCardBody } from '../index'
 
 test('loads and displays CCardBody component', async () => {
   const { container } = render(<CCardBody>Test</CCardBody>)

package/src/components/card/__tests__/CCardFooter.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardFooter } from '../../../index'
+import { CCardFooter } from '../index'
 
 test('loads and displays CCardFooter component', async () => {
   const { container } = render(<CCardFooter>Test</CCardFooter>)

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -12,7 +12,7 @@ import {
   CCardTitle,
   CCardText,
   CCardGroup,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CCardGroup component', async () => {
   const { container } = render(<CCardGroup>Test</CCardGroup>)

package/src/components/card/__tests__/CCardHeader.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardHeader } from '../../../index'
+import { CCardHeader } from '../index'
 
 test('loads and displays CCardHeader component', async () => {
   const { container } = render(<CCardHeader>Test</CCardHeader>)

package/src/components/card/__tests__/CCardImage.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardImage } from '../../../index'
+import { CCardImage } from '../index'
 
 test('loads and displays CCardImage component', async () => {
   const { container } = render(<CCardImage />)

package/src/components/card/__tests__/CCardImageOverlay.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardImageOverlay } from '../../../index'
+import { CCardImageOverlay } from '../index'
 
 test('loads and displays CCardImageOverlay component', async () => {
   const { container } = render(<CCardImageOverlay />)

package/src/components/card/__tests__/CCardLink.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardLink } from '../../../index'
+import { CCardLink } from '../index'
 
 test('loads and displays CCardLink component', async () => {
   const { container } = render(<CCardLink>Test</CCardLink>)

package/src/components/card/__tests__/CCardSubtitle.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardSubtitle } from '../../../index'
+import { CCardSubtitle } from '../index'
 
 test('loads and displays CCardSubtitle component', async () => {
   const { container } = render(<CCardSubtitle>Test</CCardSubtitle>)

package/src/components/card/__tests__/CCardText.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardText } from '../../../index'
+import { CCardText } from '../index'
 
 test('loads and displays CCardText component', async () => {
   const { container } = render(<CCardText>Test</CCardText>)

package/src/components/card/__tests__/CCardTitle.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardTitle } from '../../../index'
+import { CCardTitle } from '../index'
 
 test('loads and displays CCardTitle component', async () => {
   const { container } = render(<CCardTitle>Test</CCardTitle>)

package/src/components/carousel/CCarousel.tsx

@@ -1,6 +1,5 @@
 import React, {
   Children,
-  createContext,
   forwardRef,
   HTMLAttributes,
   TouchEvent,
@@ -14,6 +13,8 @@ import classNames from 'classnames'
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
 
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * index of the active item.
@@ -71,13 +72,6 @@ interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface ContextProps {
-  setAnimating: (a: boolean) => void
-  setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as ContextProps)
-
 export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
   (
     {
@@ -96,7 +90,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       wrap = true,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
@@ -141,7 +135,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       if (typeof interval === 'number') {
         data.timeout = setTimeout(
           () => nextItemWhenVisible(),
-          typeof customInterval === 'number' ? customInterval : interval,
+          typeof customInterval === 'number' ? customInterval : interval
         )
       }
     }
@@ -228,7 +222,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           {
             'carousel-fade': transition === 'crossfade',
           },
-          className,
+          className
         )}
         {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
@@ -288,7 +282,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         </CCarouselContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CCarousel.propTypes = {

package/src/components/carousel/CCarouselCaption.tsx

@@ -12,7 +12,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
 export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
   ({ className, ...rest }, ref) => {
     return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CCarouselCaption.propTypes = {

package/src/components/carousel/CCarouselContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CCarouselContextProps {
+  setAnimating: (a: boolean) => void
+  setCustomInterval: (a: boolean | number) => void
+}
+
+export const CCarouselContext = createContext({} as CCarouselContextProps)

package/src/components/carousel/CCarouselItem.tsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef } from '../../hooks'
-import { CCarouselContext } from './CCarousel'
+
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * @ignore
@@ -29,7 +31,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
     const carouselItemRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselItemRef)
 
-    const prevActive = useRef<boolean>()
+    const prevActive = useRef<boolean>(undefined)
     const [directionClassName, setDirectionClassName] = useState<string>()
     const [orderClassName, setOrderClassName] = useState<string>()
     const [activeClassName, setActiveClassName] = useState(active && 'active')
@@ -101,7 +103,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
           activeClassName,
           directionClassName,
           orderClassName,
-          className,
+          className
         )}
         ref={forkedRef}
         {...rest}
@@ -109,7 +111,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCarouselItem.propTypes = {

package/src/components/carousel/__tests__/CCarousel.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, fireEvent, getByText } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index'
+import { CCarousel, CCarouselCaption, CCarouselItem } from '../index'
 
 test('loads and displays CCarousel component', async () => {
   const { container } = render(

package/src/components/close-button/__tests__/CCloseButton.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCloseButton } from '../../../index'
+import { CCloseButton } from '../index'
 
 test('loads and displays CCloseButton component', async () => {
   const { container } = render(<CCloseButton />)

package/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCollapse } from '../../../index'
+import { CCollapse } from '../index'
 
 test('loads and displays CCollapse component', async () => {
   const { container } = render(<CCollapse>Test</CCollapse>)
@@ -15,26 +15,45 @@ test('CCollapse customize', async () => {
 })
 
 test('CCollapse use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={true}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={true}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={false}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={false}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  jest.runAllTimers()
+
   jest.useRealTimers()
 })

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'