@coreui/react-pro 5.12.0 → 5.14.0

package/src/components/accordion/__tests__/CAccordion.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionBody.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionButton.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionCollapse.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionHeader.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionItem.spec.tsx

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

package/src/components/alert/__tests__/CAlert.spec.tsx

@@ -1,41 +1,62 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { act, render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAlert } from '../../../index'
+import { CAlert } from '../index'
 
 test('loads and displays CAlert component', async () => {
-  const { container } = render(<CAlert color="primary">Test</CAlert>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CAlert color="primary">Test</CAlert>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CAlert customize', async () => {
-  const { container } = render(
-    <CAlert color="secondary" className="bazinga" dismissible={true} variant="solid" visible={true}>
-      Test
-    </CAlert>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('bg-secondary')
-  expect(container.firstChild).toHaveClass('text-white')
-  expect(container.firstChild).toHaveClass('alert-dismissible')
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(
+      <CAlert
+        color="secondary"
+        className="bazinga"
+        dismissible={true}
+        variant="solid"
+        visible={true}
+      >
+        Test
+      </CAlert>
+    )
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
+  expect(container!.firstChild).toHaveClass('bazinga')
+  expect(container!.firstChild).toHaveClass('bg-secondary')
+  expect(container!.firstChild).toHaveClass('text-white')
+  expect(container!.firstChild).toHaveClass('alert-dismissible')
 })
 
 test('CAlert click close button', async () => {
   jest.useFakeTimers()
+
   const onClose = jest.fn()
   render(
     <CAlert color="primary" dismissible onClose={onClose}>
       Test
-    </CAlert>,
+    </CAlert>
   )
+
   expect(onClose).toHaveBeenCalledTimes(0)
+
   const btn = document.querySelector('.btn-close')
+
   if (btn !== null) {
-    fireEvent.click(btn)
+    act(() => {
+      fireEvent.click(btn)
+      jest.runAllTimers()
+    })
   }
+
   expect(onClose).toHaveBeenCalledTimes(1)
-  jest.runAllTimers()
-  expect(onClose).toHaveBeenCalledTimes(1)
+
   jest.useRealTimers()
 })

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

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

package/src/components/alert/__tests__/CAlertLink.spec.tsx

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

package/src/components/avatar/__tests__/CAvatar.spec.tsx

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

package/src/components/backdrop/__tests__/CBackdrop.spec.tsx

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

package/src/components/badge/__tests__/CBadge.spec.tsx

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

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

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

package/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx

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

package/src/components/button/__tests__/CButton.spec.tsx

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

package/src/components/button-group/__tests__/CButtonGroup.spec.tsx

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

package/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

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

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'