@coreui/react-pro 5.12.0 → 5.14.0

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

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

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

package/src/components/multi-select/CMultiSelect.tsx

@@ -188,6 +188,12 @@ export interface CMultiSelectProps
    * Size the component small or large.
    */
   size?: 'sm' | 'lg'
+  /**
+   * Sets the initially selected values for the multi-select component.
+   *
+   * @since 5.13.0
+   */
+  value?: string | number | (string | number)[]
   /**
    * Enable virtual scroller for the options list.
    *
@@ -248,12 +254,13 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       text,
       tooltipFeedback,
       valid,
+      value,
       virtualScroller,
       visible = false,
       visibleItems = 10,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const {
       dropdownMenuElement,
@@ -278,18 +285,38 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           isExternalSearch(search)
             ? [...options, ...filterOptionsList(searchValue, userOptions)]
             : filterOptionsList(searchValue, [...options, ...userOptions]),
-          true,
+          true
         ),
-      [options, searchValue, userOptions],
+      [options, searchValue, userOptions]
     )
 
-    const flattenedOptions = useMemo(() => flattenOptionsArray(options), [options])
+    const flattenedOptions = useMemo(
+      () =>
+        flattenOptionsArray(options).map((option) => {
+          if (value && Array.isArray(value)) {
+            return {
+              ...option,
+              selected: value.includes(option.value),
+            }
+          }
+
+          if (value === option.value) {
+            return {
+              ...option,
+              selected: true,
+            }
+          }
+
+          return option
+        }),
+      [options, value]
+    )
 
     const userOption = useMemo(() => {
       if (
         allowCreateOptions &&
         filteredOptions.some(
-          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase(),
+          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase()
         )
       ) {
         return false
@@ -305,7 +332,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
       const _selected = flattenedOptions.filter((option: Option) => option.selected === true)
       const deselected = flattenedOptions.filter(
-        (option: Option) => option.selected === false,
+        (option: Option) => option.selected === false
       ) as Option[]
 
       if (_selected.length > 0) {
@@ -314,7 +341,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }, [flattenedOptions])
 
     useEffect(() => {
-      !isInitialMount.current && onFilterChange && onFilterChange(searchValue)
+      if (!isInitialMount.current && onFilterChange) {
+        onFilterChange(searchValue)
+      }
     }, [searchValue])
 
     useEffect(() => {
@@ -378,7 +407,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
         return
       }
@@ -395,7 +424,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           setSelected([
             ...selected,
             filteredOptions.find(
-              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase()
             ) as Option,
           ])
         }
@@ -437,7 +466,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
       }
     }
@@ -488,8 +517,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         selectOptions(
           multiple,
           [...flattenedOptions.filter((option: Option) => !option.disabled), ...userOptions],
-          selected,
-        ),
+          selected
+        )
       )
     }
 
@@ -534,7 +563,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
               'is-valid': valid,
               show: isOpen,
             },
-            className,
+            className
           )}
           onKeyDown={handleGlobalSearch}
           aria-expanded={isOpen}
@@ -646,7 +675,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         </div>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CMultiSelect.propTypes = {
@@ -687,6 +716,12 @@ CMultiSelect.propTypes = {
   selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),
   selectionTypeCounterText: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   virtualScroller: PropTypes.bool,
   visible: PropTypes.bool,
   visibleItems: PropTypes.number,

package/src/components/multi-select/__tests__/CMultiSelect.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-import { CMultiSelect } from '../../../index'
+import { CMultiSelect } from '../index'
 
 const options = [
   {

package/src/components/nav/CNavGroup.tsx

@@ -16,7 +16,7 @@ import type { TransitionStatus } from 'react-transition-group'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -62,7 +62,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
-  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
     Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),

package/src/components/nav/CNavLink.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -26,7 +26,7 @@ export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = f
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CNavContext)
+  const { setVisibleGroup } = useContext(CSidebarNavContext)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')

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

@@ -1,15 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {
-  CNav,
-  CNavItem,
-  CNavLink,
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-} from '../../../index'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
+import { CNav, CNavItem, CNavLink } from '../index'
 
 test('loads and displays CNav component', async () => {
   const { container } = render(<CNav>Test</CNav>)
@@ -20,7 +13,7 @@ test('CNav customize', async () => {
   const { container } = render(
     <CNav className="bazinga" as="h3" layout="justified" variant="pills">
       Test
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav')
@@ -56,7 +49,7 @@ test('CNav example', async () => {
           Disabled
         </CNavLink>
       </CNavItem>
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
 })

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

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

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

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

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

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

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

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

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

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

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

@@ -50,7 +50,6 @@ exports[`CNav example 1`] = `
         A
       </a>
       <ul
-        aria-hidden="true"
         class="dropdown-menu"
         role="menu"
       >

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvas } from '../../../index'
+import { COffcanvas } from '../index'
 
 test('loads and displays COffcanvas component', async () => {
   const { container } = render(<COffcanvas placement="top" />)
@@ -19,7 +19,7 @@ test('COffcanvas customize one', async () => {
       visible={false}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
@@ -29,7 +29,8 @@ test('COffcanvas customize one', async () => {
 })
 
 test('COffcanvas customize and event on click backdrop', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -42,8 +43,9 @@ test('COffcanvas customize and event on click backdrop', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
@@ -51,18 +53,32 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const backdrop = document.querySelector('.offcanvas-backdrop')
+
   if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    act(() => {
+      fireEvent.click(backdrop)
+      jest.runAllTimers()
+    })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })
 
 test('COffcanvas customize and event on keypress', async () => {
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -75,28 +91,39 @@ test('COffcanvas customize and event on keypress', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('show')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const canvas = document.querySelector('.offcanvas')
-  if (canvas === null) {
-    expect(true).toBe(false)
-  } else {
-    fireEvent.keyDown(canvas, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
+
+  if (canvas !== null) {
+    act(() => {
+      fireEvent.keyDown(canvas, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      })
+      jest.runAllTimers()
     })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })

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

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

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

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

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

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