@coreui/react-pro 5.13.0 → 5.14.0

package/src/components/header/__tests__/CHeaderBrand.spec.tsx

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

package/src/components/header/__tests__/CHeaderDivider.spec.tsx

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

package/src/components/header/__tests__/CHeaderNav.spec.tsx

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

package/src/components/header/__tests__/CHeaderText.spec.tsx

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

package/src/components/header/__tests__/CHeaderToggler.spec.tsx

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

package/src/components/image/__tests__/CImage.spec.tsx

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

package/src/components/index.ts

@@ -41,6 +41,7 @@ export * from './smart-table'
 export * from './smart-pagination'
 export * from './sidebar'
 export * from './spinner'
+export * from './stepper'
 export * from './table'
 export * from './tabs'
 export * from './time-picker'

package/src/components/link/__tests__/CLink.spec.tsx

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

package/src/components/list-group/__tests__/CListGroup.spec.tsx

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

package/src/components/list-group/__tests__/CListGroupItem.spec.tsx

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

package/src/components/loading-button/__tests__/CLoadingButton.spec.tsx

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

package/src/components/modal/CModal.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   forwardRef,
   HTMLAttributes,
   useEffect,
@@ -14,6 +13,7 @@ import { Transition } from 'react-transition-group'
 import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
+import { CModalContext } from './CModalContext'
 import { CModalDialog } from './CModalDialog'
 
 import { useForkedRef } from '../../hooks'
@@ -93,13 +93,6 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   visible?: boolean
 }
 
-interface ModalContextProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CModalContext = createContext({} as ModalContextProps)
-
 export const CModal = forwardRef<HTMLDivElement, CModalProps>(
   (
     {
@@ -123,7 +116,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
@@ -184,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           () => {
             focus && modalRef.current?.focus()
           },
-          transition ? duration : 0,
+          transition ? duration : 0
         )
       } else {
         document.body.classList.remove('modal-open')
@@ -238,7 +231,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                       fade: transition,
                       show: state === 'entered',
                     },
-                    className,
+                    className
                   )}
                   tabIndex={-1}
                   {...(_visible
@@ -270,7 +263,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )}
       </>
     )
-  },
+  }
 )
 
 CModal.propTypes = {

package/src/components/modal/CModalContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CModalContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CModalContext = createContext({} as CModalContextProps)

package/src/components/modal/CModalHeader.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CCloseButton } from '../close-button/CCloseButton'
-import { CModalContext } from './CModal'
+import { CModalContext } from './CModalContext'
 
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/modal/__tests__/CModal.spec.tsx

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

package/src/components/modal/__tests__/CModalBody.spec.tsx

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

package/src/components/modal/__tests__/CModalContent.spec.tsx

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

package/src/components/modal/__tests__/CModalDialog.spec.tsx

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

package/src/components/modal/__tests__/CModalFooter.spec.tsx

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

package/src/components/modal/__tests__/CModalHeader.spec.tsx

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

package/src/components/modal/__tests__/CModalTitle.spec.tsx

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

package/src/components/multi-select/__tests__/CMultiSelect.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-import { CMultiSelect } from '../../../index'
+import { CMultiSelect } from '../index'
 
 const options = [
   {

package/src/components/nav/CNavGroup.tsx

@@ -16,7 +16,7 @@ import type { TransitionStatus } from 'react-transition-group'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -62,7 +62,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
-  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
     Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),

package/src/components/nav/CNavLink.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -26,7 +26,7 @@ export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = f
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CNavContext)
+  const { setVisibleGroup } = useContext(CSidebarNavContext)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -1,15 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {
-  CNav,
-  CNavItem,
-  CNavLink,
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-} from '../../../index'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
+import { CNav, CNavItem, CNavLink } from '../index'
 
 test('loads and displays CNav component', async () => {
   const { container } = render(<CNav>Test</CNav>)
@@ -20,7 +13,7 @@ test('CNav customize', async () => {
   const { container } = render(
     <CNav className="bazinga" as="h3" layout="justified" variant="pills">
       Test
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav')
@@ -56,7 +49,7 @@ test('CNav example', async () => {
           Disabled
         </CNavLink>
       </CNavItem>
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/nav/__tests__/CNavGroup.spec.tsx

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

package/src/components/nav/__tests__/CNavGroupItems.spec.tsx

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

package/src/components/nav/__tests__/CNavItem.spec.tsx

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

package/src/components/nav/__tests__/CNavLink.spec.tsx

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

package/src/components/nav/__tests__/CNavTitle.spec.tsx

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

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -50,7 +50,6 @@ exports[`CNav example 1`] = `
         A
       </a>
       <ul
-        aria-hidden="true"
         class="dropdown-menu"
         role="menu"
       >

package/src/components/navbar/__tests__/CNavbar.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarBrand.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarNav.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarText.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarToggler.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvas } from '../../../index'
+import { COffcanvas } from '../index'
 
 test('loads and displays COffcanvas component', async () => {
   const { container } = render(<COffcanvas placement="top" />)
@@ -19,7 +19,7 @@ test('COffcanvas customize one', async () => {
       visible={false}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
@@ -29,7 +29,8 @@ test('COffcanvas customize one', async () => {
 })
 
 test('COffcanvas customize and event on click backdrop', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -42,8 +43,9 @@ test('COffcanvas customize and event on click backdrop', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
@@ -51,18 +53,32 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const backdrop = document.querySelector('.offcanvas-backdrop')
+
   if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    act(() => {
+      fireEvent.click(backdrop)
+      jest.runAllTimers()
+    })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })
 
 test('COffcanvas customize and event on keypress', async () => {
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -75,28 +91,39 @@ test('COffcanvas customize and event on keypress', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('show')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const canvas = document.querySelector('.offcanvas')
-  if (canvas === null) {
-    expect(true).toBe(false)
-  } else {
-    fireEvent.keyDown(canvas, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
+
+  if (canvas !== null) {
+    act(() => {
+      fireEvent.keyDown(canvas, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      })
+      jest.runAllTimers()
     })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })

package/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

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

package/src/components/pagination/__tests__/CPagination.spec.tsx

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

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

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