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

package/src/components/accordion/__tests__/CAccordionHeader.spec.tsx

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

package/src/components/accordion/__tests__/CAccordionItem.spec.tsx

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

package/src/components/alert/__tests__/CAlert.spec.tsx

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

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

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

package/src/components/alert/__tests__/CAlertLink.spec.tsx

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

package/src/components/avatar/__tests__/CAvatar.spec.tsx

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

package/src/components/backdrop/__tests__/CBackdrop.spec.tsx

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

package/src/components/badge/__tests__/CBadge.spec.tsx

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

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

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

package/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx

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

package/src/components/button/__tests__/CButton.spec.tsx

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

package/src/components/button/__tests__/CButtonClose.spec.tsx

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

package/src/components/button-group/__tests__/CButtonGroup.spec.tsx

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

package/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

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

package/src/components/callout/__tests__/CCallout.spec.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/conditional-portal/CConditionalPortal.tsx

@@ -1,21 +1,45 @@
-import React, { FC, ReactNode } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 
+const getContainer = (container?: Element | (() => Element | null) | null) => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return document.body
+}
+
 export interface CConditionalPortalProps {
   /**
    * @ignore
    */
   children: ReactNode
+  /**
+   * An HTML element or function that returns a single element, with `document.body` as the default.
+   * 
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Render some children into a different part of the DOM
    */
-  portal: boolean
+  portal: boolean | any
 }
 
-export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, portal }) => {
-  return typeof window !== 'undefined' && portal ? (
-    createPortal(children, document.body)
+export const CConditionalPortal: FC<CConditionalPortalProps> = ({
+  children,
+  container,
+  portal,
+}) => {
+  const [_container, setContainer] = useState<ReturnType<typeof getContainer>>(null)
+
+  useEffect(() => {
+    portal && setContainer(getContainer(container) || document.body)
+  }, [container, portal])
+
+  return typeof window !== 'undefined' && portal && _container ? (
+    createPortal(children, _container)
   ) : (
     <>{children}</>
   )
@@ -23,7 +47,8 @@ export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, port
 
 CConditionalPortal.propTypes = {
   children: PropTypes.node,
-  portal: PropTypes.bool.isRequired,
+  container: PropTypes.any, // HTMLElement
+  portal: PropTypes.bool,
 }
 
 CConditionalPortal.displayName = 'CConditionalPortal'

package/src/components/dropdown/CDropdown.tsx

@@ -16,17 +16,8 @@ import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
 import { isRTL } from '../../utils'
 
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
+import type { Alignments, Directions } from './types'
+import { getNextActiveElement, getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -51,6 +42,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
+  /**
+   * 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`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Sets a darker color scheme to match a dark navbar.
    */
@@ -107,59 +104,6 @@ interface ContextProps extends CDropdownProps {
   portal: boolean
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
-const getPlacement = (
-  placement: Placements,
-  direction: CDropdownProps['direction'],
-  alignment: CDropdownProps['alignment'],
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
-
 export const CDropdownContext = createContext({} as ContextProps)
 
 export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownProps>(
@@ -169,6 +113,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       alignment,
       autoClose = true,
       className,
+      container,
       dark,
       direction,
       offset = [0, 2],
@@ -201,6 +146,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      container,
       dark,
       dropdownToggleRef,
       dropdownMenuRef,
@@ -251,15 +197,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     }, [_visible])
 
     const handleKeydown = (event: KeyboardEvent) => {
-      if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-        const target = event.target as HTMLElement
+      if (_visible && dropdownMenuRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
         event.preventDefault()
-        const items = [].concat(
-          ...Element.prototype.querySelectorAll.call(
-            dropdownMenuRef.current,
-            '.dropdown-item:not(.disabled):not(:disabled)',
-          ),
-        )
+        const target = event.target as HTMLElement
+        const items: HTMLElement[] = Array.from(dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'))
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
     }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -2,11 +2,14 @@ import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Alignments, CDropdownContext } from './CDropdown'
+import { CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
 
+import { getAlignmentClassNames } from './utils'
+
+
 export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -18,37 +21,22 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
   component?: string | ElementType
 }
 
-const alignmentClassNames = (alignment: Alignments) => {
-  const classNames: string[] = []
-  if (typeof alignment === 'object') {
-    Object.keys(alignment).map((key) => {
-      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-    })
-  }
-
-  if (typeof alignment === 'string') {
-    classNames.push(`dropdown-menu-${alignment}`)
-  }
-
-  return classNames
-}
-
 export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
   ({ children, className, component: Component = 'ul', ...rest }, ref) => {
-    const { alignment, dark, dropdownMenuRef, popper, portal, visible } =
+    const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
       useContext(CDropdownContext)
 
     const forkedRef = useForkedRef(ref, dropdownMenuRef)
 
     return (
-      <CConditionalPortal portal={portal ?? false}>
+      <CConditionalPortal container={container} portal={portal ?? false}>
         <Component
           className={classNames(
             'dropdown-menu',
             {
               show: visible,
             },
-            alignment && alignmentClassNames(alignment),
+            alignment && getAlignmentClassNames(alignment),
             className,
           )}
           ref={forkedRef}

package/src/components/dropdown/CDropdownToggle.tsx

@@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
    * 
-   * @since v5.0.0-alpha.3
+   * @since v5.0.0-beta.1
    */
   navLink?: boolean
   /**

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CDropdown,
   CDropdownToggle,
@@ -37,7 +37,6 @@ test('CDropdown customize', async () => {
   expect(container.firstChild).toHaveClass('nav-item')
   expect(container.firstChild).toHaveClass('dropdown')
   expect(container.firstChild).toHaveClass('dropstart')
-  expect(container.firstChild).toHaveClass('show')
 })
 
 test('CDropdown change visible prop', async () => {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 exports[`CDropdown customize 1`] = `
 <div>
   <li
-    class="nav-item dropdown dropstart show bazinga"
+    class="nav-item dropdown dropstart bazinga"
   >
     Test
   </li>

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

@@ -3,7 +3,7 @@
 exports[`CDropdownMenu customize 1`] = `
 <div>
   <div
-    class="btn-group show"
+    class="btn-group"
   >
     <div
       aria-hidden="false"

package/src/components/dropdown/types.ts

@@ -0,0 +1,11 @@
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints