@coreui/react 5.0.0-alpha.3 → 5.0.0-beta.1

package/src/components/dropdown/utils.ts

@@ -0,0 +1,72 @@
+import type { Placement } from '@popperjs/core'
+import type { Placements } from '../../types'
+import type { Alignments, Breakpoints } from './types'
+
+export const getAlignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+
+    for (const key in alignment) {
+      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`)
+    }
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+  
+  return classNames
+}
+
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export const getPlacement = (
+  placement: Placement,
+  direction: string | undefined,
+  alignment: Alignments | string | undefined,
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}

package/src/components/footer/__tests__/CFooter.spec.tsx

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

package/src/components/form/__tests__/CForm.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck, CButton } from '../../../index'
 
 test('loads and displays CForm component', async () => {

package/src/components/form/__tests__/CFormCheck.spec.tsx

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

package/src/components/form/__tests__/CFormControl.spec.tsx

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

package/src/components/form/__tests__/CFormFeedback.spec.tsx

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

package/src/components/form/__tests__/CFormFloating.spec.tsx

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

package/src/components/form/__tests__/CFormInput.spec.tsx

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

package/src/components/form/__tests__/CFormLabel.spec.tsx

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

package/src/components/form/__tests__/CFormRange.spec.tsx

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

package/src/components/form/__tests__/CFormSelect.spec.tsx

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

package/src/components/form/__tests__/CFormSwitch.spec.tsx

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

package/src/components/form/__tests__/CFormText.spec.tsx

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

package/src/components/form/__tests__/CFormTextarea.spec.tsx

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

package/src/components/form/__tests__/CInputGroup.spec.tsx

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

package/src/components/form/__tests__/CInputGroupText.spec.tsx

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

package/src/components/grid/__tests__/CCol.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CCol } from '../../../index'
 
 test('CCol no-breakpoints', async () => {

package/src/components/grid/__tests__/CContainer.spec.tsx

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

package/src/components/grid/__tests__/CRow.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CRow } from '../../../index'
 
 test('CRow not-customize', async () => {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline'
+  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
 }
 
 CNav.displayName = 'CNav'

package/src/components/nav/CNavGroup.tsx

@@ -10,6 +10,7 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
+import type { TransitionStatus } from 'react-transition-group'
 
 import { CNavContext } from '../sidebar/CSidebarNav'
 export interface CNavGroupProps {
@@ -51,9 +52,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
     const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
 
     const [_visible, setVisible] = useState(
-      Boolean(
-        visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)),
-      ),
+      Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
     )
 
     useEffect(() => {
@@ -100,6 +99,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
       entered: { display: 'block', height: height },
       exiting: { display: 'block', height: height },
       exited: { height: height },
+      unmounted: {}
     }
 
     return (
@@ -124,7 +124,10 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
               className={classNames('nav-group-items', {
                 compact: compact,
               })}
-              style={{ ...style, ...transitionStyles[state] }}
+              style={{
+                ...style,
+                ...transitionStyles[state as TransitionStatus],
+              }}
               ref={navItemsRef}
             >
               {React.Children.map(children, (child, index) => {

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CNav,
   CNavItem,

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

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

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

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

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

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

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

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

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

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

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

@@ -41,14 +41,14 @@ exports[`CNav example 1`] = `
     <li
       class="nav-item dropdown"
     >
-      <button
+      <a
         aria-expanded="false"
-        class="btn btn-primary dropdown-toggle"
-        tabindex="0"
-        type="button"
+        class="nav-link dropdown-toggle"
+        href="#"
+        role="button"
       >
         A
-      </button>
+      </a>
       <ul
         aria-hidden="true"
         class="dropdown-menu"

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CNavbarToggler } from '../../../index'
 
 test('CNavbarToggler witch children', async () => {

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/placeholder/__tests__/CPlaceholder.spec.tsx

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