@coreui/react 5.4.1 → 5.6.0

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -1,84 +1,92 @@
 import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
+import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPopover, CButton } from '../../../index'
+
+import { CButton } from '../../button'
+import { CPopover } from '../index'
+
+let container: HTMLDivElement | null = null
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  cleanup()
+})
 
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
       <CButton color="primary">Test</CButton>
-    </CPopover>,
+    </CPopover>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CPopover customize', async () => {
   jest.useFakeTimers()
-  let arr, element
-  const { container } = render(
+
+  render(
     <CPopover content="content" title="title" trigger="click" placement="right">
       <CButton color="primary">Test</CButton>
     </CPopover>,
-    { container: document.body },
+    { container: container! }
   )
-  const btn = document.querySelector('.btn')
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
   act(() => {
-    if (btn !== null) {
-      fireEvent.click(btn)
-    }
+    fireEvent.click(btn)
+    jest.runAllTimers()
   })
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  let arrLength = container.getElementsByClassName('popover').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-end').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-arrow').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-header').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-body').length
-  expect(arrLength).toBe(1)
-  arr = container.getElementsByClassName('popover-header')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('title')
-  } else {
-    expect(true).toBe(false)
-  }
-  arr = container.getElementsByClassName('popover-body')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('content')
-  } else {
-    expect(true).toBe(false)
-  }
+
+  expect(document.querySelector('.popover')).toBeInTheDocument()
+  expect(document.querySelector('.bs-popover-auto')).toBeInTheDocument()
+  expect(document.querySelector('.popover-arrow')).toBeInTheDocument()
+  expect(document.querySelector('.popover-header')).toBeInTheDocument()
+  expect(document.querySelector('.popover-body')).toBeInTheDocument()
+
+  expect(document.querySelector('.popover-header')?.innerHTML).toBe('title')
+  expect(document.querySelector('.popover-body')?.innerHTML).toBe('content')
+
   jest.useRealTimers()
 })
 
-// test('CPopover onToggle', async () => {
-//   let btn
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CPopover onToggle={onToggle} content="content" trigger="click">
-//       <CButton>Test</CButton>
-//     </CPopover>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(2)
-//   jest.useRealTimers()
-// })
-
-//TODO: test visible on focus, click and mouseEnter
+test('CPopover onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
+      <CButton color="primary">Test</CButton>
+    </CPopover>,
+    { container: container! }
+  )
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -1,38 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CPopover customize 1`] = `
-<body>
-  <button
-    aria-describedby="popover744956"
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-  <div
-    class="popover bs-popover-auto fade show"
-    id="popover744956"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-  >
-    <div
-      class="popover-arrow"
-      style="position: absolute;"
-    />
-    <div
-      class="popover-header"
-    >
-      title
-    </div>
-    <div
-      class="popover-body"
-    >
-      content
-    </div>
-  </div>
-</body>
-`;
-
 exports[`loads and displays CPopover component 1`] = `
 <div>
   <button

package/src/components/progress/CProgress.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
+import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
@@ -17,7 +17,7 @@ export interface CProgressProps
    */
   height?: number
   /**
-   * A string of all className you want applied to the <CProgressBar/> component.
+   * A string of all className you want applied to the `<CProgressBar/>` component.
    *
    * @since 4.9.0
    */

package/src/components/progress/CProgressBar.tsx

@@ -2,10 +2,11 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Use to animate the stripes right to left via CSS3 animations.

package/src/components/progress/CProgressStacked.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -9,12 +11,6 @@ export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
-export interface CProgressStackedContextProps {
-  stacked?: boolean
-}
-
-export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
-
 export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
   ({ children, className, ...rest }, ref) => {
     return (
@@ -28,7 +24,7 @@ export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps
         </CProgressStackedContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CProgressStacked.propTypes = {

package/src/components/progress/CProgressStackedContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export interface CProgressStackedContextProps {
+  stacked?: boolean
+}
+
+export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)

package/src/components/progress/__tests__/CProgress.spec.tsx

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

package/src/components/progress/__tests__/CProgressBar.spec.tsx

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

package/src/components/sidebar/CSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
+export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
+  HTMLDivElement,
+  CSidebarProps
+>(
   (
     {
       children,
+      as: Component = 'div',
       className,
       colorScheme,
       narrow,
@@ -183,7 +192,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     return (
       <>
-        <div
+        <Component
           className={classNames(
             'sidebar',
             {
@@ -203,7 +212,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
           ref={forkedRef}
         >
           {children}
-        </div>
+        </Component>
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
@@ -216,6 +225,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 )
 
 CSidebar.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   colorScheme: PropTypes.oneOf(['dark', 'light']),
@@ -231,4 +241,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'

package/src/components/sidebar/CSidebarNav.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
@@ -10,6 +9,12 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import type { CNavGroupProps } from '../nav/CNavGroup'
+import type { CNavLinkProps } from '../nav/CNavLink'
+import type { CNavItemProps } from '../nav/CNavItem'
+
+import { CSidebarNavContext } from './CSidebarNavContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -25,42 +30,37 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   className?: string
 }
 
-interface ContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+const isNavElement = (
+  child: ReactNode
+): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
+  if (!React.isValidElement(child)) return false
+  const type = child.type as { displayName?: string }
+  return (
+    type.displayName === 'CNavGroup' ||
+    type.displayName === 'CNavLink' ||
+    type.displayName === 'CNavItem'
+  )
 }
 
-export const CNavContext = createContext({} as ContextProps)
-
 const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child: ReactNode, index: number) => {
-    if (
-      !React.isValidElement(child) ||
-      // @ts-expect-error the `children` exist in each component. TODO: resolve
-      (child.type.displayName !== 'CNavGroup' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavLink' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavItem')
-    ) {
+  return React.Children.map(children, (child, index) => {
+    if (!isNavElement(child)) {
       return child
     }
 
     const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
 
-    if (child.props && child.props.children) {
-      return React.cloneElement(child as ReactElement<any>, {
+    if (child.props.children) {
+      const type = child.type as { displayName?: string }
+      const shouldUpdateId = type.displayName !== 'CNavItem'
+
+      return React.cloneElement(child, {
         idx: _id,
-        children: recursiveClone(
-          child.props.children,
-          _id,
-          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
-          child.type.displayName === 'CNavItem' ? false : true,
-        ),
+        children: recursiveClone(child.props.children, _id, shouldUpdateId),
       })
     }
 
-    return React.cloneElement(child as ReactElement<any>, {
+    return React.cloneElement(child, {
       idx: _id,
     })
   })
@@ -77,11 +77,11 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
   }
 
   return (
-    <CNavContext.Provider value={CNavContextValues}>
+    <CSidebarNavContext.Provider value={CNavContextValues}>
       <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         {recursiveClone(children)}
       </Component>
-    </CNavContext.Provider>
+    </CSidebarNavContext.Provider>
   )
 })
 

package/src/components/sidebar/CSidebarNavContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CSidebarNavContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CSidebar component', async () => {
   const { container } = render(<CSidebar>Test</CSidebar>)

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx

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

package/src/components/spinner/__tests__/CSpinner.spec.tsx

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

package/src/components/table/__tests__/CTable.spec.tsx

@@ -10,7 +10,7 @@ import {
   CTableBody,
   CTableDataCell,
   CTableFoot,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CTable component', async () => {
   const { container } = render(<CTable />)

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableDataCell, CTableRow } from '../../../index'
+import { CTableBody, CTableDataCell, CTableRow } from '../index'
 
 test('loads and displays CTableBody component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableCaption.spec.tsx

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

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableDataCell } from '../../../index'
+import { CTableDataCell } from '../index'
 import { CTableBody } from '../CTableBody'
 import { CTableRow } from '../CTableRow'
 

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableFoot, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableFoot component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableHead.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHead component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableHeaderCell.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHeaderCell component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableRow.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableBody, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableRow component', async () => {
   const table = document.createElement('table')

package/src/components/tabs/CTab.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { TabsContext } from './CTabs'
+import { CTabsContext } from './CTabsContext'
 
 export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
   /**
@@ -21,7 +21,7 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
+    const { _activeItemKey, setActiveItemKey, id } = useContext(CTabsContext)
 
     const isActive = () => itemKey === _activeItemKey
 

package/src/components/tabs/CTabPane.tsx

@@ -32,7 +32,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     return (