@coreui/react 5.5.0 → 5.7.0

package/src/components/dropdown/CDropdownContext.ts

@@ -0,0 +1,18 @@
+import { createContext, RefObject } from 'react'
+import { Alignments } from './types'
+
+export interface CDropdownContextProps {
+  alignment?: Alignments
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+  dark?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any | null>
+  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  popper?: boolean
+  portal?: boolean
+  variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+  visible?: boolean
+}
+
+export const CDropdownContext = createContext({} as CDropdownContextProps)

package/src/components/dropdown/CDropdownDivider.tsx

@@ -12,7 +12,7 @@ export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
 export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
   ({ className, ...rest }, ref) => {
     return <hr className={classNames('dropdown-divider', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CDropdownDivider.propTypes = {

package/src/components/dropdown/CDropdownHeader.tsx

@@ -23,7 +23,7 @@ export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownH
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CDropdownHeader.propTypes = {

package/src/components/dropdown/CDropdownItemPlain.tsx

@@ -25,7 +25,7 @@ export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CDropdownItemPlain.propTypes = {

package/src/components/dropdown/CDropdownMenu.tsx

@@ -2,8 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
+import { CDropdownContext } from './CDropdownContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -38,7 +38,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
                 show: visible,
               },
               alignment && getAlignmentClassNames(alignment),
-              className,
+              className
             )}
             ref={forkedRef}
             role="menu"
@@ -57,7 +57,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
           </Component>
         </CConditionalPortal>
       )
-    },
+    }
   )
 
 CDropdownMenu.propTypes = {

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CButton, CButtonProps } from '../button/CButton'
-
-import { CDropdownContext } from './CDropdown'
+import { CDropdownContext } from './CDropdownContext'
 
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
@@ -69,7 +68,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
         'dropdown-toggle-split': split,
         show: visible,
       },
-      className,
+      className
     ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -9,7 +9,7 @@ import {
   CDropdownItemPlain,
   CDropdownHeader,
   CDropdownDivider,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CDropdown component', async () => {
   const { container } = render(<CDropdown>Test</CDropdown>)

package/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -24,7 +24,6 @@ exports[`CDropdown example 1`] = `
       Test
     </button>
     <ul
-      aria-hidden="true"
       class="dropdown-menu"
       role="menu"
     >

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -6,7 +6,6 @@ exports[`CDropdownMenu customize 1`] = `
     class="btn-group"
   >
     <div
-      aria-hidden="false"
       class="dropdown-menu show bazinga"
       role="menu"
     >
@@ -19,7 +18,6 @@ exports[`CDropdownMenu customize 1`] = `
 exports[`loads and displays CDropdownMenu component 1`] = `
 <div>
   <ul
-    aria-hidden="true"
     class="dropdown-menu"
     data-coreui-popper="static"
     role="menu"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/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/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>)