@coreui/react 4.6.0 → 4.7.0

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

@@ -12,8 +12,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'
 
@@ -114,10 +115,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
 
@@ -139,19 +140,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       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 +149,38 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const dropdownContent = () => {
+    const DropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
       ) : (
-        <Component className={_className} {...rest} ref={forkedRef}>
+        <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>
       )
     }
 
-    return popper ? (
-      <CDropdownContext.Provider value={contextValues}>
-        <Manager>{dropdownContent()}</Manager>
-      </CDropdownContext.Provider>
-    ) : (
+    return (
       <CDropdownContext.Provider value={contextValues}>
-        {dropdownContent()}
+        {popper ? (
+          <Manager>
+            <DropdownContent />
+          </Manager>
+        ) : (
+          <DropdownContent />
+        )}
       </CDropdownContext.Provider>
     )
   },

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,9 +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 type { Placements } from '../../types'
+
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
     Omit<
@@ -125,39 +126,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     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>) => (
+    <Component
+      className={classNames(
+        'dropdown-menu',
+        {
+          'dropdown-menu-dark': dark,
+          show: visible,
+        },
+        alignment && alignmentClassNames(alignment),
+        className,
+      )}
+      ref={ref}
+      style={style}
+      role="menu"
+      aria-hidden={!visible}
+      {...(!popper && { 'data-coreui-popper': 'static' })}
+      {...rest}
+    >
+      {Component === 'ul'
+        ? React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+              return <li key={index}>{React.cloneElement(child)}</li>
+            }
+            return
+          })
+        : children}
+    </Component>
   )
 
-  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => {
-    return (
-      <Component
-        className={_className}
-        ref={ref}
-        style={style}
-        role="menu"
-        aria-hidden={!visible}
-        {...(!popper && { 'data-coreui-popper': 'static' })}
-        {...rest}
-      >
-        {Component === 'ul'
-          ? React.Children.map(children, (child, index) => {
-              if (React.isValidElement(child)) {
-                return <li key={index}>{React.cloneElement(child)}</li>
-              }
-              return
-            })
-          : children}
-      </Component>
-    )
-  }
-
   return popper && visible ? (
     <Popper innerRef={dropdownMenuRef} placement={_placement}>
       {({ ref, style }) => dropdownMenuComponent(style, ref)}

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { useForkedRef } from '../../hooks'
-
-import { Triggers, triggerPropType } from '../Types'
-
 import { CButton, CButtonProps } from '../button/CButton'
+
 import { CDropdownContext } from './CDropdown'
 
+import { useForkedRef } from '../../hooks'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
+
 export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * Enables pseudo element caret on toggler.
@@ -41,14 +42,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   ...rest
 }) => {
   const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
-  const _className = classNames(
-    {
-      'dropdown-toggle': caret,
-      'dropdown-toggle-split': split,
-      'nav-link': variant === 'nav-item',
-    },
-    className,
-  )
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -64,28 +57,42 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   }
 
   const togglerProps = {
-    className: _className,
+    className: classNames(
+      {
+        'dropdown-toggle': caret,
+        'dropdown-toggle-split': split,
+        'nav-link': variant === 'nav-item',
+      },
+      className,
+    ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),
-    ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return custom && React.isValidElement(children) ? (
-      <>
-        {React.cloneElement(children as React.ReactElement<any>, {
-          'aria-expanded': visible,
-          ...(!rest.disabled && { ...triggers }),
-          ref: useForkedRef(ref, dropdownToggleRef),
-        })}
-      </>
-    ) : variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
-        {children}
-      </a>
-    ) : (
+    if (custom && React.isValidElement(children)) {
+      return (
+        <>
+          {React.cloneElement(children as React.ReactElement<any>, {
+            'aria-expanded': visible,
+            ...(!rest.disabled && { ...triggers }),
+            ref: useForkedRef(ref, dropdownToggleRef),
+          })}
+        </>
+      )
+    }
+
+    if (variant === 'nav-item') {
+      return (
+        <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
+          {children}
+        </a>
+      )
+    }
+
+    return (
       <CButton
         type="button"
         {...togglerProps}