@coreui/react 4.6.0 → 4.7.0

package/src/components/modal/CModalHeader.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CModalContext } from './CModal'
-import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
+import { CCloseButton } from '../close-button/CCloseButton'
+import { CModalContext } from './CModal'
+
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -18,10 +19,9 @@ export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
 export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
     const { setVisible } = useContext(CModalContext)
-    const _className = classNames('modal-header', className)
 
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('modal-header', className)} {...rest} ref={ref}>
         {children}
         {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
       </div>

package/src/components/modal/CModalTitle.tsx

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

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

@@ -26,7 +26,6 @@ test('CModal customize', async () => {
 })
 
 test('CModal dialog close on press ESC', async () => {
-  jest.useFakeTimers()
   const onClose = jest.fn()
   render(
     <CModal onClose={onClose} portal={false} visible>
@@ -36,32 +35,32 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyUp(modal, {
+    fireEvent.keyDown(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,
       charCode: 27,
     })
   }
+  await new Promise((r) => setTimeout(r, 1000))
+  console.log(modal)
+  expect(onClose).toHaveBeenCalledTimes(1)
+})
+
+test('CModal dialog close on backdrop', async () => {
+  jest.useFakeTimers()
+  const onClose = jest.fn()
+  render(
+    <CModal onClose={onClose} portal={false} visible={true}>
+      Test
+    </CModal>,
+  )
+  expect(onClose).toHaveBeenCalledTimes(0)
+  const backdrop = document.querySelector('.modal-backdrop')
+  if (backdrop !== null) {
+    fireEvent.click(backdrop)
+  }
   jest.runAllTimers()
   expect(onClose).toHaveBeenCalledTimes(1)
   jest.useRealTimers()
 })
-
-// test('CModal dialog close on backdrop', async () => {
-//   jest.useFakeTimers()
-//   const onClose = jest.fn()
-//   render(
-//     <CModal onClose={onClose} portal={false} visible={true}>
-//       Test
-//     </CModal>,
-//   )
-//   expect(onClose).toHaveBeenCalledTimes(0)
-//   const backdrop = document.querySelector('.modal-backdrop')
-//   if (backdrop !== null) {
-//     fireEvent.click(backdrop)
-//   }
-//   jest.runAllTimers()
-//   expect(onClose).toHaveBeenCalledTimes(1)
-//   jest.useRealTimers()
-// })

package/src/components/nav/CNav.tsx

@@ -24,17 +24,20 @@ export interface CNavProps
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
   ({ children, className, component: Component = 'ul', layout, variant, ...rest }, ref) => {
-    const _className = classNames(
-      'nav',
-      {
-        [`nav-${layout}`]: layout,
-        [`nav-${variant}`]: variant,
-      },
-      className,
-    )
-
     return (
-      <Component className={_className} role="navigation" {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          'nav',
+          {
+            [`nav-${layout}`]: layout,
+            [`nav-${variant}`]: variant,
+          },
+          className,
+        )}
+        role="navigation"
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/nav/CNavGroup.tsx

@@ -95,10 +95,8 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
       exited: { height: height },
     }
 
-    const _className = classNames('nav-group', { show: _visible }, className)
-
     return (
-      <li className={_className} {...rest} ref={ref}>
+      <li className={classNames('nav-group', { show: _visible }, className)} {...rest} ref={ref}>
         {toggler && (
           <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
             {toggler}

package/src/components/nav/CNavGroupItems.tsx

@@ -11,9 +11,8 @@ export interface CNavGroupItemsProps extends HTMLAttributes<HTMLUListElement> {
 
 export const CNavGroupItems = forwardRef<HTMLUListElement, CNavGroupItemsProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('nav-group-items', className)
     return (
-      <ul className={_className} {...rest} ref={ref}>
+      <ul className={classNames('nav-group-items', className)} {...rest} ref={ref}>
         {children}
       </ul>
     )

package/src/components/nav/CNavItem.tsx

@@ -1,21 +1,20 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CNavLink, CNavLinkProps } from './CNavLink'
 
 export const CNavItem = forwardRef<HTMLLIElement, CNavLinkProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('nav-item', className)
-    if (rest.href || rest.to) {
-      children = (
-        <CNavLink className={className} {...rest}>
-          {children}
-        </CNavLink>
-      )
-    }
     return (
-      <li className={_className} ref={ref}>
-        {children}
+      <li className={classNames('nav-item', className)} ref={ref}>
+        {rest.href || rest.to ? (
+          <CNavLink className={className} {...rest}>
+            {children}
+          </CNavLink>
+        ) : (
+          children
+        )}
       </li>
     )
   },

package/src/components/nav/CNavLink.tsx

@@ -2,10 +2,10 @@ import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
-
-import { CNavContext } from '../sidebar/CSidebarNav'
 import { CLinkProps, CLink } from '../link/CLink'
+import { CNavContext } from '../sidebar/CSidebarNav'
+
+import { useForkedRef } from '../../hooks'
 
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   /**
@@ -42,7 +42,6 @@ export const CNavLink = forwardRef<
   const forkedRef = useForkedRef(ref, navLinkRef)
 
   const { setVisibleGroup } = useContext(CNavContext)
-  const _className = classNames('nav-link', className)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')
@@ -50,7 +49,7 @@ export const CNavLink = forwardRef<
   }, [rest.active, className])
 
   return (
-    <CLink className={_className} {...rest} ref={forkedRef}>
+    <CLink className={classNames('nav-link', className)} {...rest} ref={forkedRef}>
       {children}
     </CLink>
   )

package/src/components/nav/CNavTitle.tsx

@@ -11,9 +11,8 @@ export interface CNavTitleProps extends HTMLAttributes<HTMLLIElement> {
 
 export const CNavTitle = forwardRef<HTMLLIElement, CNavTitleProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('nav-title', className)
     return (
-      <li className={_className} {...rest} ref={ref}>
+      <li className={classNames('nav-title', className)} {...rest} ref={ref}>
         {children}
       </li>
     )

package/src/components/navbar/CNavbar.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -52,29 +53,28 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
     },
     ref,
   ) => {
-    const _className = classNames(
-      'navbar',
-      {
-        [`bg-${color}`]: color,
-        [`navbar-${colorScheme}`]: colorScheme,
-        [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
-      },
-      placement,
-      className,
-    )
-
-    let content
-    if (container) {
-      content = (
-        <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>
-      )
-    } else {
-      content = children
-    }
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
-        {content}
+      <Component
+        className={classNames(
+          'navbar',
+          {
+            [`bg-${color}`]: color,
+            [`navbar-${colorScheme}`]: colorScheme,
+            [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
+          },
+          placement,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
+        {container ? (
+          <div className={typeof container === 'string' ? `container-${container}` : 'container'}>
+            {children}
+          </div>
+        ) : (
+          <>{children}</>
+        )}
       </Component>
     )
   },

package/src/components/navbar/CNavbarBrand.tsx

@@ -20,11 +20,10 @@ export interface CNavbarBrandProps extends HTMLAttributes<HTMLAnchorElement | HT
 
 export const CNavbarBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CNavbarBrandProps>(
   ({ children, component, className, ...rest }, ref) => {
-    const Component = component ? component : rest.href ? 'a' : 'span'
-    const _className = classNames('navbar-brand', className)
+    const Component = component ?? (rest.href ? 'a' : 'span')
 
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('navbar-brand', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/navbar/CNavbarNav.tsx

@@ -15,10 +15,13 @@ export interface CNavbarNavProps extends HTMLAttributes<HTMLDivElement | HTMLULi
 
 export const CNavbarNav = forwardRef<HTMLDivElement | HTMLUListElement, CNavbarNavProps>(
   ({ children, component: Component = 'ul', className, ...rest }, ref) => {
-    const _className = classNames('navbar-nav', className)
-
     return (
-      <Component className={_className} role="navigation" {...rest} ref={ref}>
+      <Component
+        className={classNames('navbar-nav', className)}
+        role="navigation"
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/navbar/CNavbarText.tsx

@@ -11,10 +11,8 @@ export interface CNavbarTextProps extends HTMLAttributes<HTMLSpanElement> {
 
 export const CNavbarText = forwardRef<HTMLSpanElement, CNavbarTextProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('navbar-text', className)
-
     return (
-      <span className={_className} {...rest} ref={ref}>
+      <span className={classNames('navbar-text', className)} {...rest} ref={ref}>
         {children}
       </span>
     )

package/src/components/navbar/CNavbarToggler.tsx

@@ -11,11 +11,9 @@ export interface CNavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CNavbarToggler = forwardRef<HTMLButtonElement, CNavbarTogglerProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('navbar-toggler', className)
-
     return (
-      <button type="button" className={_className} {...rest} ref={ref}>
-        {children ? children : <span className="navbar-toggler-icon"></span>}
+      <button type="button" className={classNames('navbar-toggler', className)} {...rest} ref={ref}>
+        {children ?? <span className="navbar-toggler-icon"></span>}
       </button>
     )
   },

package/src/components/offcanvas/COffcanvas.tsx

@@ -1,11 +1,12 @@
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { Transition } from 'react-transition-group'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalPortal } from '../conditional-portal'
+
+import { useForkedRef } from '../../hooks'
 
 export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -93,24 +94,6 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }, [_visible])
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'showing'
-        : state === 'entered'
-        ? 'show'
-        : state === 'exiting'
-        ? 'show hiding'
-        : ''
-    }
-
-    const _className = classNames(
-      {
-        [`offcanvas${typeof responsive !== 'boolean' ? '-' + responsive : ''}`]: responsive,
-        [`offcanvas-${placement}`]: placement,
-      },
-      className,
-    )
-
     const handleDismiss = () => {
       setVisible(false)
     }
@@ -121,30 +104,10 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }
 
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Escape' && keyboard) {
-          return handleDismiss()
-        }
-      },
-      [ref, handleDismiss],
-    )
-
-    const offcanvas = (ref: React.Ref<HTMLDivElement>, state: string) => {
-      return (
-        <>
-          <div
-            className={classNames(_className, getTransitionClass(state))}
-            role="dialog"
-            tabIndex={-1}
-            onKeyDown={handleKeyDown}
-            {...rest}
-            ref={ref}
-          >
-            {children}
-          </div>
-        </>
-      )
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape' && keyboard) {
+        return handleDismiss()
+      }
     }
 
     return (
@@ -157,29 +120,40 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
           onExit={onHide}
           timeout={300}
         >
-          {(state) => {
-            return typeof window !== 'undefined' && portal
-              ? createPortal(offcanvas(forkedRef, state), document.body)
-              : offcanvas(forkedRef, state)
-          }}
+          {(state) => (
+            <CConditionalPortal portal={portal}>
+              <div
+                className={classNames(
+                  {
+                    [`offcanvas${typeof responsive === 'string' ? '-' + responsive : ''}`]:
+                      responsive,
+                    [`offcanvas-${placement}`]: placement,
+                    showing: state === 'entering',
+                    show: state === 'entered',
+                    'show hiding': state === 'exiting',
+                  },
+                  className,
+                )}
+                role="dialog"
+                tabIndex={-1}
+                onKeyDown={handleKeyDown}
+                {...rest}
+                ref={forkedRef}
+              >
+                {children}
+              </div>
+            </CConditionalPortal>
+          )}
         </Transition>
-        {typeof window !== 'undefined' && portal
-          ? backdrop &&
-            createPortal(
-              <CBackdrop
-                className="offcanvas-backdrop"
-                onClick={handleBackdropDismiss}
-                visible={_visible}
-              />,
-              document.body,
-            )
-          : backdrop && (
-              <CBackdrop
-                className="offcanvas-backdrop"
-                onClick={handleBackdropDismiss}
-                visible={_visible}
-              />
-            )}
+        {backdrop && (
+          <CConditionalPortal portal={portal}>
+            <CBackdrop
+              className="offcanvas-backdrop"
+              onClick={handleBackdropDismiss}
+              visible={_visible}
+            />
+          </CConditionalPortal>
+        )}
       </>
     )
   },

package/src/components/offcanvas/COffcanvasBody.tsx

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

package/src/components/offcanvas/COffcanvasHeader.tsx

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

package/src/components/offcanvas/COffcanvasTitle.tsx

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

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

@@ -29,7 +29,7 @@ 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
@@ -56,11 +56,13 @@ test('COffcanvas customize and event on click backdrop', async () => {
     fireEvent.click(backdrop)
   }
   expect(onHide).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).toHaveClass('show')
+  expect(container.firstChild).toHaveClass('hiding')
+  await new Promise((r) => setTimeout(r, 1000))
   expect(container.firstChild).not.toHaveClass('show')
 })
 
 test('COffcanvas customize and event on keypress', async () => {
-  jest.useFakeTimers()
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -93,5 +95,8 @@ test('COffcanvas customize and event on keypress', async () => {
     })
   }
   expect(onHide).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).toHaveClass('show')
+  expect(container.firstChild).toHaveClass('hiding')
+  await new Promise((r) => setTimeout(r, 1000))
   expect(container.firstChild).not.toHaveClass('show')
 })

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

@@ -5,7 +5,6 @@ exports[`COffcanvas customize and event on click backdrop 1`] = `
   <div
     class="offcanvas offcanvas-end show bazinga"
     role="dialog"
-    style="visibility: visible;"
     tabindex="-1"
   >
     Test
@@ -21,7 +20,6 @@ exports[`COffcanvas customize and event on keypress 1`] = `
   <div
     class="offcanvas offcanvas-end show bazinga"
     role="dialog"
-    style="visibility: visible;"
     tabindex="-1"
   >
     Test
@@ -37,7 +35,6 @@ exports[`COffcanvas customize one 1`] = `
   <div
     class="offcanvas offcanvas-start bazinga"
     role="dialog"
-    style="visibility: hidden;"
     tabindex="-1"
   >
     Test
@@ -45,4 +42,12 @@ exports[`COffcanvas customize one 1`] = `
 </div>
 `;
 
-exports[`loads and displays COffcanvas component 1`] = `<div />`;
+exports[`loads and displays COffcanvas component 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-top"
+    role="dialog"
+    tabindex="-1"
+  />
+</div>
+`;

package/src/components/pagination/CPagination.tsx

@@ -19,17 +19,20 @@ export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
 
 export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
   ({ children, align, className, size, ...rest }, ref) => {
-    const _className = classNames(
-      'pagination',
-      {
-        [`justify-content-${align}`]: align,
-        [`pagination-${size}`]: size,
-      },
-      className,
-    )
     return (
       <nav ref={ref} {...rest}>
-        <ul className={_className}>{children}</ul>
+        <ul
+          className={classNames(
+            'pagination',
+            {
+              [`justify-content-${align}`]: align,
+              [`pagination-${size}`]: size,
+            },
+            className,
+          )}
+        >
+          {children}
+        </ul>
       </nav>
     )
   },

package/src/components/pagination/CPaginationItem.tsx

@@ -21,19 +21,20 @@ export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement>
 
 export const CPaginationItem = forwardRef<HTMLAnchorElement, CPaginationItemProps>(
   ({ children, className, component, ...rest }, ref) => {
-    const _className = classNames(
-      'page-item',
-      {
-        active: rest.active,
-        disabled: rest.disabled,
-      },
-      className,
-    )
-
-    const Component = component ? component : rest.active ? 'span' : 'a'
+    const Component = component ?? (rest.active ? 'span' : 'a')
 
     return (
-      <li className={_className} {...(rest.active && { 'aria-current': 'page' })}>
+      <li
+        className={classNames(
+          'page-item',
+          {
+            active: rest.active,
+            disabled: rest.disabled,
+          },
+          className,
+        )}
+        {...(rest.active && { 'aria-current': 'page' })}
+      >
         {Component === 'a' ? (
           <CLink className="page-link" component={Component} {...rest} ref={ref}>
             {children}