@coreui/react 4.5.2 → 4.7.0

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}

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -16,13 +16,13 @@ test('CPagination customize', async () => {
   )
   expect(container).toMatchSnapshot()
   let element = container.firstChild
-  if (element !== null) {
+  if (element === null) {
+    expect(true).toBe(false)
+  } else {
     element = element.firstChild
     expect(element).toHaveClass('bazinga')
     expect(element).toHaveClass('pagination')
     expect(element).toHaveClass('pagination-lg')
-  } else {
-    expect(true).toBe(false)
   }
 })
 

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -20,10 +20,10 @@ test('CPaginationItem customize', async () => {
   expect(container.firstChild).toHaveClass('active')
   expect(container.firstChild).toHaveClass('disabled')
   let element = container.firstChild
-  if (element !== null) {
+  if (element === null) {
+    expect(true).toBe(false)
+  } else {
     element = element.firstChild
     expect(element).toHaveClass('page-link')
-  } else {
-    expect(true).toBe(false)
   }
 })

package/src/components/placeholder/CPlaceholder.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 CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
   /**
@@ -84,18 +85,20 @@ export const CPlaceholder = forwardRef<HTMLSpanElement, CPlaceholderProps>(
       }
     })
 
-    const _className = classNames(
-      animation ? `placeholder-${animation}` : 'placeholder',
-      {
-        [`bg-${color}`]: color,
-        [`placeholder-${size}`]: size,
-      },
-      repsonsiveClassNames,
-      className,
-    )
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          animation ? `placeholder-${animation}` : 'placeholder',
+          {
+            [`bg-${color}`]: color,
+            [`placeholder-${size}`]: size,
+          },
+          repsonsiveClassNames,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/popover/CPopover.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -84,16 +85,6 @@ export const CPopover: FC<CPopoverProps> = ({
     setVisible(visible)
   }, [visible])
 
-  const getTransitionClass = (state: string) => {
-    return state === 'entering'
-      ? 'fade'
-      : state === 'entered'
-      ? 'fade show'
-      : state === 'exiting'
-      ? 'fade'
-      : 'fade'
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
@@ -124,29 +115,28 @@ export const CPopover: FC<CPopoverProps> = ({
             }}
             unmountOnExit
           >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <div
-                  className={classNames(
-                    `popover bs-popover-${
-                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                    }`,
-                    className,
-                    transitionClass,
-                  )}
-                  ref={setPopperElement}
-                  role="tooltip"
-                  style={styles.popper}
-                  {...attributes.popper}
-                  {...rest}
-                >
-                  <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
-                  <div className="popover-header">{title}</div>
-                  <div className="popover-body">{content}</div>
-                </div>
-              )
-            }}
+            {(state) => (
+              <div
+                className={classNames(
+                  'popover',
+                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  'fade',
+                  {
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                ref={setPopperElement}
+                role="tooltip"
+                style={styles.popper}
+                {...attributes.popper}
+                {...rest}
+              >
+                <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div className="popover-header">{title}</div>
+                <div className="popover-body">{content}</div>
+              </div>
+            )}
           </Transition>,
           document.body,
         )}

package/src/components/progress/CProgress.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
@@ -30,17 +31,19 @@ export interface CProgressProps
 
 export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
   ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
-    const _className = classNames(
-      'progress',
-      {
-        'progress-thin': thin,
-        'progress-white': white,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} style={height ? { height: `${height}px` } : {}} ref={ref}>
+      <div
+        className={classNames(
+          'progress',
+          {
+            'progress-thin': thin,
+            'progress-white': white,
+          },
+          className,
+        )}
+        style={height ? { height: `${height}px` } : {}}
+        ref={ref}
+      >
         {value ? (
           <CProgressBar value={value} {...rest}>
             {children}

package/src/components/progress/CProgressBar.tsx

@@ -2,7 +2,9 @@ import React, { 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 CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Use to animate the stripes right to left via CSS3 animations.
@@ -30,19 +32,17 @@ export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
   ({ children, animated, className, color, value = 0, variant, ...rest }, ref) => {
-    const _className = classNames(
-      'progress-bar',
-      {
-        [`bg-${color}`]: color,
-        [`progress-bar-${variant}`]: variant,
-        'progress-bar-animated': animated,
-      },
-      className,
-    )
-
     return (
       <div
-        className={_className}
+        className={classNames(
+          'progress-bar',
+          {
+            [`bg-${color}`]: color,
+            [`progress-bar-${variant}`]: variant,
+            'progress-bar-animated': animated,
+          },
+          className,
+        )}
         role="progressbar"
         style={{ width: `${value}%` }}
         aria-valuenow={value}

package/src/components/sidebar/CSidebar.tsx

@@ -3,10 +3,11 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
+import { isInViewport } from '../../utils'
+import { useForkedRef } from '../../hooks'
+
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -84,7 +85,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     }, [visible])
 
     useEffect(() => {
-      typeof inViewport !== 'undefined' && onVisibleChange && onVisibleChange(inViewport)
+      inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport)
       !inViewport && onHide && onHide()
       inViewport && onShow && onShow()
     }, [inViewport])
@@ -155,23 +156,25 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
         handleHide()
     }
 
-    const _className = classNames(
-      'sidebar',
-      {
-        'sidebar-narrow': narrow,
-        'sidebar-overlaid': overlaid,
-        [`sidebar-${position}`]: position,
-        [`sidebar-${size}`]: size,
-        'sidebar-narrow-unfoldable': unfoldable,
-        show: _visible === true && mobile,
-        hide: _visible === false && !mobile,
-      },
-      className,
-    )
-
     return (
       <>
-        <div className={_className} {...rest} ref={forkedRef}>
+        <div
+          className={classNames(
+            'sidebar',
+            {
+              'sidebar-narrow': narrow,
+              'sidebar-overlaid': overlaid,
+              [`sidebar-${position}`]: position,
+              [`sidebar-${size}`]: size,
+              'sidebar-narrow-unfoldable': unfoldable,
+              show: _visible === true && mobile,
+              hide: _visible === false && !mobile,
+            },
+            className,
+          )}
+          {...rest}
+          ref={forkedRef}
+        >
           {children}
         </div>
         {typeof window !== 'undefined' &&

package/src/components/sidebar/CSidebarBrand.tsx

@@ -11,9 +11,8 @@ export interface CSidebarBrandProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CSidebarBrand = forwardRef<HTMLDivElement, CSidebarBrandProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('sidebar-brand', className)
     return (
-      <div className={_className} ref={ref} {...rest}>
+      <div className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
         {children}
       </div>
     )

package/src/components/sidebar/CSidebarFooter.tsx

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

package/src/components/sidebar/CSidebarHeader.tsx

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

package/src/components/sidebar/CSidebarNav.tsx

@@ -23,9 +23,9 @@ export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
       visibleGroup,
       setVisibleGroup,
     }
-    const classes = classNames('sidebar-nav', className)
+
     return (
-      <ul className={classes} ref={ref} {...rest}>
+      <ul className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         <CNavContext.Provider value={CNavContextValues}>
           {React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {

package/src/components/sidebar/CSidebarToggler.tsx

@@ -11,9 +11,8 @@ export interface CSidebarTogglerProps extends HTMLAttributes<HTMLButtonElement>
 
 export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('sidebar-toggler', className)
     return (
-      <button className={_className} ref={ref} {...rest}>
+      <button className={classNames('sidebar-toggler', className)} ref={ref} {...rest}>
         {children}
       </button>
     )

package/src/components/spinner/CSpinner.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 CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
@@ -46,15 +47,18 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
     },
     ref,
   ) => {
-    const _className = classNames(
-      `spinner-${variant}`,
-      `text-${color}`,
-      size && `spinner-${variant}-${size}`,
-      className,
-    )
-
     return (
-      <Component className={_className} role="status" {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          `spinner-${variant}`,
+          `text-${color}`,
+          size && `spinner-${variant}-${size}`,
+          className,
+        )}
+        role="status"
+        {...rest}
+        ref={ref}
+      >
         <span className="visually-hidden">{visuallyHiddenLabel}</span>
       </Component>
     )