@coreui/react 4.6.0 → 4.8.0

package/src/components/card/CCardBody.tsx

@@ -11,10 +11,8 @@ export interface CCardBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardBody = forwardRef<HTMLDivElement, CCardBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-body', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-body', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardFooter.tsx

@@ -11,10 +11,8 @@ export interface CCardFooterProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardFooter = forwardRef<HTMLDivElement, CCardFooterProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-footer', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-footer', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardGroup.tsx

@@ -11,10 +11,8 @@ export interface CCardGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardGroup = forwardRef<HTMLDivElement, CCardGroupProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-group', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-group', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardHeader.tsx

@@ -15,10 +15,8 @@ export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
   ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    const _className = classNames('card-header', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardImage.tsx

@@ -22,10 +22,12 @@ export const CCardImage = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
 >(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
-  const _className = classNames(orientation ? `card-img-${orientation}` : 'card-img', className)
-
   return (
-    <Component className={_className} {...rest} ref={ref}>
+    <Component
+      className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
+      {...rest}
+      ref={ref}
+    >
       {children}
     </Component>
   )

package/src/components/card/CCardImageOverlay.tsx

@@ -11,10 +11,8 @@ export interface CCardImageOverlayProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardImageOverlay = forwardRef<HTMLDivElement, CCardImageOverlayProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-img-overlay', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-img-overlay', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardLink.tsx

@@ -17,10 +17,8 @@ export interface CCardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const CCardLink = forwardRef<HTMLAnchorElement, CCardLinkProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-link', className)
-
     return (
-      <CLink className={_className} {...rest} ref={ref}>
+      <CLink className={classNames('card-link', className)} {...rest} ref={ref}>
         {children}
       </CLink>
     )

package/src/components/card/CCardSubtitle.tsx

@@ -14,10 +14,8 @@ export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 export const CCardSubtitle = forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
   ({ children, component: Component = 'h6', className, ...rest }, ref) => {
-    const _className = classNames('card-subtitle', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardText.tsx

@@ -15,10 +15,8 @@ export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
 
 export const CCardText = forwardRef<HTMLParagraphElement, CCardTextProps>(
   ({ children, component: Component = 'p', className, ...rest }, ref) => {
-    const _className = classNames('card-text', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardTitle.tsx

@@ -15,10 +15,8 @@ export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export const CCardTitle = forwardRef<HTMLHeadingElement, CCardTitleProps>(
   ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    const _className = classNames('card-title', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-title', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/carousel/CCarousel.tsx

@@ -132,13 +132,6 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       }
     })
 
-    const _className = classNames(
-      'carousel slide',
-      transition === 'crossfade' && 'carousel-fade',
-      dark && 'carousel-dark',
-      className,
-    )
-
     const cycle = () => {
       _pause()
       if (!wrap && active === itemsNumber - 1) {
@@ -230,7 +223,14 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
 
     return (
       <div
-        className={_className}
+        className={classNames(
+          'carousel slide',
+          {
+            'carousel-dark': dark,
+            'carousel-fade': transition === 'crossfade',
+          },
+          className,
+        )}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
         {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}

package/src/components/carousel/CCarouselCaption.tsx

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

package/src/components/carousel/CCarouselItem.tsx

@@ -94,16 +94,18 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
       }
     })
 
-    const _className = classNames(
-      'carousel-item',
-      activeClassName,
-      directionClassName,
-      orderClassName,
-      className,
-    )
-
     return (
-      <div className={_className} ref={forkedRef} {...rest}>
+      <div
+        className={classNames(
+          'carousel-item',
+          activeClassName,
+          directionClassName,
+          orderClassName,
+          className,
+        )}
+        ref={forkedRef}
+        {...rest}
+      >
         {children}
       </div>
     )

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

@@ -19,19 +19,18 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
   ({ className, disabled, white, ...rest }, ref) => {
-    const _className = classNames(
-      'btn',
-      'btn-close',
-      {
-        'btn-close-white': white,
-      },
-      disabled,
-      className,
-    )
     return (
       <button
         type="button"
-        className={_className}
+        className={classNames(
+          'btn',
+          'btn-close',
+          {
+            'btn-close-white': white,
+          },
+          disabled,
+          className,
+        )}
         aria-label="Close"
         disabled={disabled}
         {...rest}

package/src/components/collapse/CCollapse.tsx

@@ -30,20 +30,11 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
   ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
-    const [height, setHeight] = useState<number>()
-    const [width, setWidth] = useState<number>()
     const collapseRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, collapseRef)
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'collapsing'
-        : state === 'entered'
-        ? 'collapse show'
-        : state === 'exiting'
-        ? 'collapsing'
-        : 'collapse'
-    }
+    const [height, setHeight] = useState<number>()
+    const [width, setWidth] = useState<number>()
 
     const onEntering = () => {
       onShow && onShow()
@@ -88,13 +79,6 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
       setHeight(0)
     }
 
-    const _className = classNames(
-      {
-        'collapse-horizontal': horizontal,
-      },
-      className,
-    )
-
     return (
       <CSSTransition
         in={visible}
@@ -107,12 +91,16 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
         timeout={350}
       >
         {(state) => {
-          const transitionClass = getTransitionClass(state)
           const currentHeight = height === 0 ? null : { height }
           const currentWidth = width === 0 ? null : { width }
           return (
             <div
-              className={classNames(_className, transitionClass)}
+              className={classNames(className, {
+                'collapse-horizontal': horizontal,
+                collapsing: state === 'entering' || state === 'exiting',
+                'collapse show': state === 'entered',
+                collapse: state === 'exited',
+              })}
               style={{ ...currentHeight, ...currentWidth }}
               {...rest}
               ref={forkedRef}

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

@@ -15,7 +15,6 @@ 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')
@@ -24,7 +23,7 @@ test('CCollapse use case test', async () => {
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
@@ -32,7 +31,7 @@ test('CCollapse use case test', async () => {
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')

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

@@ -0,0 +1,29 @@
+import React, { FC, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+
+export interface CConditionalPortalProps {
+  /**
+   * @ignore
+   */
+  children: ReactNode
+  /**
+   * Render some children into a different part of the DOM
+   */
+  portal: boolean
+}
+
+export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, portal }) => {
+  return typeof window !== 'undefined' && portal ? (
+    createPortal(children, document.body)
+  ) : (
+    <>{children}</>
+  )
+}
+
+CConditionalPortal.propTypes = {
+  children: PropTypes.node,
+  portal: PropTypes.bool.isRequired,
+}
+
+CConditionalPortal.displayName = 'CConditionalPortal'

package/src/components/conditional-portal/index.ts

@@ -0,0 +1,3 @@
+import { CConditionalPortal } from './CConditionalPortal'
+
+export { CConditionalPortal }

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -12,8 +13,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
-import { Placements, placementPropType } from '../Types'
 import { useForkedRef } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
 
 export type Directions = 'start' | 'end'
 
@@ -76,6 +78,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * If you want to disable dynamic positioning set this property to `true`.
    */
   popper?: boolean
+  /**
+   * Generates dropdown menu using createPortal.
+   *
+   * @since 4.8.0
+   */
+  portal?: boolean
   /**
    * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
    */
@@ -86,10 +94,15 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
+const PopperManagerWrapper = ({ children, popper }: { children: ReactNode; popper: boolean }) => {
+  return popper ? <Manager>{children}</Manager> : <>{children}</>
+}
+
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  portal: boolean
 }
 
 export const CDropdownContext = createContext({} as ContextProps)
@@ -107,6 +120,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       onShow,
       placement = 'bottom-start',
       popper = true,
+      portal = false,
       variant = 'btn-group',
       component = 'div',
       visible = false,
@@ -114,10 +128,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     },
     ref,
   ) => {
-    const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
     const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [_visible, setVisible] = useState(visible)
 
     const Component = variant === 'nav-item' ? 'li' : component
 
@@ -134,24 +148,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       dropdownToggleRef,
       placement: placement,
       popper,
+      portal: portal,
       variant,
       visible: _visible,
       setVisible,
     }
 
-    const _className = classNames(
-      variant === 'nav-item' ? 'nav-item dropdown' : variant,
-      {
-        show: _visible,
-      },
-      direction === 'center'
-        ? 'dropdown-center'
-        : direction === 'dropup-center'
-        ? 'dropup dropup-center'
-        : direction,
-      className,
-    )
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -161,23 +163,31 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const dropdownContent = () => {
-      return variant === 'input-group' ? (
-        <>{children}</>
-      ) : (
-        <Component className={_className} {...rest} ref={forkedRef}>
-          {children}
-        </Component>
-      )
-    }
-
-    return popper ? (
-      <CDropdownContext.Provider value={contextValues}>
-        <Manager>{dropdownContent()}</Manager>
-      </CDropdownContext.Provider>
-    ) : (
+    return (
       <CDropdownContext.Provider value={contextValues}>
-        {dropdownContent()}
+        <PopperManagerWrapper popper={popper}>
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <Component
+              className={classNames(
+                variant === 'nav-item' ? 'nav-item dropdown' : variant,
+                {
+                  'dropdown-center': direction === 'center',
+                  'dropup dropup-center': direction === 'dropup-center',
+                  [`${direction}`]:
+                    direction && direction !== 'center' && direction !== 'dropup-center',
+                  show: _visible,
+                },
+                className,
+              )}
+              {...rest}
+              ref={forkedRef}
+            >
+              {children}
+            </Component>
+          )}
+        </PopperManagerWrapper>
       </CDropdownContext.Provider>
     )
   },
@@ -209,6 +219,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,
 }

package/src/components/dropdown/CDropdownDivider.tsx

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

package/src/components/dropdown/CDropdownHeader.tsx

@@ -15,10 +15,8 @@ export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement>
 
 export const CDropdownHeader = forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
   ({ children, className, component: Component = 'h6', ...rest }, ref) => {
-    const _className = classNames('dropdown-header', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('dropdown-header', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/dropdown/CDropdownItem.tsx

@@ -2,8 +2,7 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CLinkProps } from '../link/CLink'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
 
 export interface CDropdownItemProps extends CLinkProps {
   /**
@@ -18,10 +17,13 @@ export interface CDropdownItemProps extends CLinkProps {
 
 export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, CDropdownItemProps>(
   ({ children, className, component = 'a', ...rest }, ref) => {
-    const _className = classNames('dropdown-item', className)
-
     return (
-      <CLink className={_className} component={component} {...rest} ref={ref}>
+      <CLink
+        className={classNames('dropdown-item', className)}
+        component={component}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </CLink>
     )

package/src/components/dropdown/CDropdownItemPlain.tsx

@@ -15,10 +15,8 @@ export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement>
 
 export const CDropdownItemPlain = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
   ({ children, className, component: Component = 'span', ...rest }, ref) => {
-    const _className = classNames('dropdown-item-text', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('dropdown-item-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/dropdown/CDropdownMenu.tsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
-import { Placements } from '../Types'
 import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
+
+import type { Placements } from '../../types'
 
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
@@ -29,6 +31,21 @@ export interface CDropdownMenuProps
   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: FC<CDropdownMenuProps> = ({
   children,
   className,
@@ -43,6 +60,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     dropdownToggleRef,
     placement,
     popper,
+    portal,
     visible,
     setVisible,
   } = useContext(CDropdownContext)
@@ -110,35 +128,18 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     _placement = 'bottom-end'
   }
 
-  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
-  }
-
-  const _className = classNames(
-    'dropdown-menu',
-    {
-      'dropdown-menu-dark': dark,
-      show: visible,
-    },
-    alignment && alignmentClassNames(alignment),
-    className,
-  )
-
-  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => {
-    return (
+  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
+    <CConditionalPortal portal={portal ?? false}>
       <Component
-        className={_className}
+        className={classNames(
+          'dropdown-menu',
+          {
+            'dropdown-menu-dark': dark,
+            show: visible,
+          },
+          alignment && alignmentClassNames(alignment),
+          className,
+        )}
         ref={ref}
         style={style}
         role="menu"
@@ -155,8 +156,8 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
             })
           : children}
       </Component>
-    )
-  }
+    </CConditionalPortal>
+  )
 
   return popper && visible ? (
     <Popper innerRef={dropdownMenuRef} placement={_placement}>