@coreui/react-pro 4.9.0-next.1 → 4.9.0

package/src/components/multi-select/utils.ts

@@ -1,7 +1,7 @@
 import type { Option, SelectedOption } from './types'
 
 export const filterOptionsList = (search: string, _options: Option[]) => {
-  return search.length
+  return search.length > 0
     ? _options &&
         _options.reduce((acc: Option[], val: Option) => {
           const options =
@@ -13,9 +13,9 @@ export const filterOptionsList = (search: string, _options: Option[]) => {
 
           if (
             (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-            (options && options.length)
+            (options && options.length > 0)
           ) {
-            acc.push(Object.assign({}, val, options && options.length && { options }))
+            acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
           }
 
           return acc

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

@@ -6,17 +6,15 @@ 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

@@ -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

@@ -53,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,10 +1,10 @@
-import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
 
@@ -94,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)
     }
@@ -122,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 (
@@ -158,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}

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/picker/CPicker.tsx

@@ -150,16 +150,15 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       </>
     )
 
-    const _className = classNames('picker', className)
-
     switch (container) {
-      case 'inline':
-        return <div className={_className}>{children}</div>
-      default:
+      case 'inline': {
+        return <div className={classNames('picker', className)}>{children}</div>
+      }
+      default: {
         return (
           <CDropdown
             autoClose="outside"
-            className={_className}
+            className={classNames('picker', className)}
             onHide={() => {
               setVisible(false)
               onHide && onHide()
@@ -186,6 +185,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
             </CDropdownMenu>
           </CDropdown>
         )
+      }
     }
   },
 )

package/src/components/placeholder/CPlaceholder.tsx

@@ -85,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>
     )