@coreui/react 5.4.1 → 5.6.0

package/src/components/dropdown/CDropdown.tsx

@@ -1,15 +1,9 @@
-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'
@@ -22,91 +16,152 @@ import { getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
-   * Set aligment of dropdown menu.
+   * Specifies the alignment of the React Dropdown Menu within this React Dropdown.
+   *
+   * @example
+   * // Align dropdown menu to the end on large devices, otherwise start
+   * <CDropdown alignment={{ lg: 'end', xs: 'start' }}>
+   *   <CDropdownToggle>Toggle dropdown</CDropdownToggle>
+   *   <CDropdownMenu>
+   *     <CDropdownItem>Action</CDropdownItem>
+   *     <CDropdownItem>Another Action</CDropdownItem>
+   *   </CDropdownMenu>
+   * </CDropdown>
    *
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
    */
   as?: ElementType
+
   /**
-   * Configure the auto close behavior of the dropdown:
-   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
-   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
-   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
-   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   * Configures automatic closing behavior for the React Dropdown:
+   * - `true` - Close on clicks inside or outside of the React Dropdown Menu.
+   * - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`).
+   * - `'inside'` - Close only when clicking inside the React Dropdown Menu.
+   * - `'outside'` - Close only when clicking outside the React Dropdown Menu.
+   *
+   * @example
+   * // Close only when user clicks outside of the menu
+   * <CDropdown autoClose="outside" />
    */
   autoClose?: 'inside' | 'outside' | boolean
+
   /**
-   * A string of all className you want applied to the base component.
+   * Adds custom classes to the React Dropdown root element.
    */
   className?: string
+
   /**
-   * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
+   *
+   * @example
+   * // Append the menu to a custom container
+   * const myContainer = document.getElementById('my-container')
+   *
+   * <CDropdown container={myContainer} />
    *
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Sets a darker color scheme to match a dark navbar.
+   * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
    */
   dark?: boolean
+
   /**
-   * Sets a specified  direction and location of the dropdown menu.
+   * Specifies the direction of the React Dropdown.
    */
   direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+
   /**
-   * Offset of the dropdown menu relative to its target.
+   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
+   *
+   * @example
+   * // Offset the menu 10px in X and 5px in Y direction
+   * <CDropdown offset={[10, 5]}>
+   *   ...
+   * </CDropdown>
    */
   offset?: [number, number]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Callback fired right before the React Dropdown becomes hidden.
    *
    * @since 4.9.0
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired immediately after the React Dropdown is displayed.
    */
   onShow?: () => void
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
    *
-   * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+   * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
    */
   placement?: Placements
+
   /**
-   * If you want to disable dynamic positioning set this property to `true`.
+   * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
    */
   popper?: boolean
+
   /**
-   * Generates dropdown menu using createPortal.
+   * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * // Providing a custom popper config
+   * <CDropdown
+   *   popperConfig={{
+   *     modifiers: [
+   *       {
+   *         name: 'flip',
+   *         options: { fallbackPlacements: ['bottom', 'top'] },
+   *       },
+   *     ],
+   *   }}
+   * >...</CDropdown>
+   *
+   * @since 5.5.0
+   */
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
+  /**
+   * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
    *
    * @since 4.8.0
    */
   portal?: boolean
+
   /**
-   * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+   * Defines the visual variant of the React Dropdown
    */
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+
   /**
-   * Toggle the visibility of dropdown menu component.
+   * Controls the visibility of the React Dropdown Menu:
+   * - `true` - Visible
+   * - `false` - Hidden
+   *
+   * @example
+   * // Programmatically manage the dropdown visibility
+   * const [visible, setVisible] = useState(false)
+   *
+   * <CDropdown visible={visible}>
+   *   ...
+   * </CDropdown>
+   *
    */
   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
@@ -126,16 +181,16 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       onShow,
       placement = 'bottom-start',
       popper = true,
+      popperConfig,
       portal = false,
       variant = 'btn-group',
       visible = false,
       ...rest
     },
-    ref,
+    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)
@@ -161,7 +216,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       setVisible,
     }
 
-    const popperConfig = {
+    const defaultPopperConfig = {
       modifiers: [
         {
           name: 'offset',
@@ -173,32 +228,55 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
     }
 
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
+
     useEffect(() => {
       setVisible(visible)
     }, [visible])
 
     useEffect(() => {
-      if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
-        dropdownToggleRef.current.focus()
-        popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
+      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 (
@@ -209,7 +287,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         event.preventDefault()
         const target = event.target as HTMLElement
         const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
         )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
@@ -258,7 +336,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
                 [`${direction}`]:
                   direction && direction !== 'center' && direction !== 'dropup-center',
               },
-              className,
+              className
             )}
             {...rest}
             ref={forkedRef}
@@ -268,7 +346,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         )}
       </CDropdownContext.Provider>
     )
-  },
+  }
 )
 
 const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
@@ -297,6 +375,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,

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,11 +38,10 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
                 show: visible,
               },
               alignment && getAlignmentClassNames(alignment),
-              className,
+              className
             )}
             ref={forkedRef}
             role="menu"
-            aria-hidden={!visible}
             {...(!popper && { 'data-coreui-popper': 'static' })}
             {...(dark && { 'data-coreui-theme': 'dark' })}
             {...rest}
@@ -58,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 }),
@@ -90,7 +89,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
 
     if (variant === 'nav-item' && navLink) {
       return (
-        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
+        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
           {children}
         </a>
       )

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CDropdown,
@@ -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>)
@@ -52,26 +52,50 @@ test('CDropdown customize', async () => {
 //   jest.useRealTimers()
 // })
 
-test('CDropdown click', async () => {
+test('CDropdown opens on toggle click and closes on clicking outside', async () => {
   render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownItem>A</CDropdownItem>
-        <CDropdownItem>B</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>,
+    <div>
+      {/* External element to simulate clicking outside the dropdown */}
+      <div data-testid="external-area">External Area</div>
+
+      {/* The dropdown component */}
+      <CDropdown>
+        <CDropdownToggle>Test</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem>A</CDropdownItem>
+          <CDropdownItem>B</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </div>,
   )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  const el = screen.getByText('Test')
-  if (el !== null) {
-    fireEvent.click(el) //click on element
-  }
-  jest.runAllTimers()
-  expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.mouseUp(document.body) //click outside
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
+
+  // Ensure the dropdown is initially closed
+  const toggleButton = screen.getByText('Test')
+  expect(toggleButton).toBeInTheDocument()
+
+  // Assuming the 'show' class is applied to the CDropdownMenu
+  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+  expect(dropdownMenu).not.toHaveClass('show')
+
+  // Click on the toggle to open the dropdown
+  fireEvent.click(toggleButton)
+
+  // Wait for the dropdown menu to become visible
+  await waitFor(() => {
+    const openedMenu = screen.getByRole('menu') // Adjust role if different
+    expect(openedMenu).toBeVisible()
+    expect(openedMenu).toHaveClass('show')
+  })
+
+  // Click outside the dropdown to close it
+  const externalArea = screen.getByTestId('external-area')
+  fireEvent.mouseUp(externalArea)
+
+  // Wait for the dropdown menu to be hidden
+  await waitFor(() => {
+    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+    expect(closedMenu).not.toHaveClass('show')
+  })
 })
 
 test('CDropdown example', async () => {

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