@coreui/react 5.5.0 → 5.6.0

package/src/components/card/__tests__/CCardImage.spec.tsx

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

package/src/components/card/__tests__/CCardImageOverlay.spec.tsx

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

package/src/components/card/__tests__/CCardLink.spec.tsx

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

package/src/components/card/__tests__/CCardSubtitle.spec.tsx

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

package/src/components/card/__tests__/CCardText.spec.tsx

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

package/src/components/card/__tests__/CCardTitle.spec.tsx

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

package/src/components/carousel/CCarousel.tsx

@@ -1,6 +1,5 @@
 import React, {
   Children,
-  createContext,
   forwardRef,
   HTMLAttributes,
   TouchEvent,
@@ -14,6 +13,8 @@ import classNames from 'classnames'
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
 
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * index of the active item.
@@ -71,13 +72,6 @@ interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface ContextProps {
-  setAnimating: (a: boolean) => void
-  setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as ContextProps)
-
 export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
   (
     {
@@ -96,7 +90,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       wrap = true,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
@@ -141,7 +135,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       if (typeof interval === 'number') {
         data.timeout = setTimeout(
           () => nextItemWhenVisible(),
-          typeof customInterval === 'number' ? customInterval : interval,
+          typeof customInterval === 'number' ? customInterval : interval
         )
       }
     }
@@ -228,7 +222,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           {
             'carousel-fade': transition === 'crossfade',
           },
-          className,
+          className
         )}
         {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
@@ -288,7 +282,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         </CCarouselContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CCarousel.propTypes = {

package/src/components/carousel/CCarouselCaption.tsx

@@ -12,7 +12,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
 export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
   ({ className, ...rest }, ref) => {
     return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CCarouselCaption.propTypes = {

package/src/components/carousel/CCarouselContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CCarouselContextProps {
+  setAnimating: (a: boolean) => void
+  setCustomInterval: (a: boolean | number) => void
+}
+
+export const CCarouselContext = createContext({} as CCarouselContextProps)

package/src/components/carousel/CCarouselItem.tsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef } from '../../hooks'
-import { CCarouselContext } from './CCarousel'
+
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * @ignore
@@ -29,7 +31,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
     const carouselItemRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselItemRef)
 
-    const prevActive = useRef<boolean>()
+    const prevActive = useRef<boolean>(undefined)
     const [directionClassName, setDirectionClassName] = useState<string>()
     const [orderClassName, setOrderClassName] = useState<string>()
     const [activeClassName, setActiveClassName] = useState(active && 'active')
@@ -101,7 +103,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
           activeClassName,
           directionClassName,
           orderClassName,
-          className,
+          className
         )}
         ref={forkedRef}
         {...rest}
@@ -109,7 +111,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCarouselItem.propTypes = {

package/src/components/carousel/__tests__/CCarousel.spec.tsx

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

package/src/components/close-button/__tests__/CCloseButton.spec.tsx

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

package/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCollapse } from '../../../index'
+import { CCollapse } from '../index'
 
 test('loads and displays CCollapse component', async () => {
   const { container } = render(<CCollapse>Test</CCollapse>)
@@ -15,26 +15,45 @@ test('CCollapse customize', async () => {
 })
 
 test('CCollapse use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={true}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={true}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={false}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={false}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  jest.runAllTimers()
+
   jest.useRealTimers()
 })

package/src/components/dropdown/CDropdown.tsx

@@ -1,17 +1,10 @@
-import React, {
-  createContext,
-  ElementType,
-  forwardRef,
-  HTMLAttributes,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import type { Options } from '@popperjs/core'
 
+import { CDropdownContext } from './CDropdownContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
 import { placementPropType } from '../../props'
@@ -169,16 +162,6 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
-interface ContextProps extends CDropdownProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | undefined>
-  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-  portal: boolean
-}
-
-export const CDropdownContext = createContext({} as ContextProps)
-
 export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef<
   HTMLDivElement | HTMLLIElement,
   CDropdownProps
@@ -207,8 +190,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const dropdownToggleRef = useRef<any>(null)
+    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
     const [_visible, setVisible] = useState(visible)
@@ -256,28 +238,45 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     }, [visible])
 
     useEffect(() => {
-      if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
-        dropdownToggleRef.current.focus()
-        popper &&
-          initPopper(dropdownToggleRef.current, dropdownMenuRef.current, computedPopperConfig)
+      const toggleElement = dropdownToggleRef.current
+      const menuElement = dropdownMenuRef.current
+
+      if (_visible && toggleElement && menuElement) {
+        if (popper) {
+          initPopper(toggleElement, menuElement, computedPopperConfig)
+        }
+
+        toggleElement.focus()
+        toggleElement.addEventListener('keydown', handleKeydown)
+        menuElement.addEventListener('keydown', handleKeydown)
+
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current.addEventListener('keydown', handleKeydown)
-        onShow && onShow()
+
+        onShow?.()
       }
 
       return () => {
-        popper && destroyPopper()
+        if (popper) {
+          destroyPopper()
+        }
+
+        toggleElement?.removeEventListener('keydown', handleKeydown)
+        menuElement?.removeEventListener('keydown', handleKeydown)
+
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current &&
-          dropdownToggleRef.current.removeEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current &&
-          dropdownMenuRef.current.removeEventListener('keydown', handleKeydown)
-        onHide && onHide()
+
+        onHide?.()
       }
-    }, [_visible])
+    }, [
+      computedPopperConfig,
+      destroyPopper,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      initPopper,
+      _visible,
+    ])
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (

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