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

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/multi-select/CMultiSelect.tsx

@@ -191,20 +191,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
     }, [JSON.stringify(selected)])
 
-    const _className = classNames(
-      'form-multi-select',
-      {
-        'form-multi-select-with-cleaner': cleaner,
-        [`form-multi-select-${size}`]: size,
-        show: _visible,
-        'form-multi-select-selection-tags': multiple && selectionType === 'tags',
-        disabled,
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
     useEffect(() => {
       isInitialMount.current = false
     }, [])
@@ -219,7 +205,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      if (_search.length) return
+      if (_search.length > 0) {
+        return
+      }
 
       if (event.key === 'Backspace' || event.key === 'Delete') {
         const last = selected.filter((option: Option) => !option.disabled).pop()
@@ -284,7 +272,19 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           ref={nativeSelectRef}
         />
         <CPicker
-          className={_className}
+          className={classNames(
+            'form-multi-select',
+            {
+              'form-multi-select-with-cleaner': cleaner,
+              [`form-multi-select-${size}`]: size,
+              show: _visible,
+              'form-multi-select-selection-tags': multiple && selectionType === 'tags',
+              disabled,
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
           disabled={disabled}
           id={id}
           onHide={() => setVisible(false)}
@@ -317,14 +317,14 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   onChange={(event) => handleSearchChange(event)}
                   onKeyDown={(event) => handleSearchKeyDown(event)}
                   {...(selected.length === 0 && { placeholder: placeholder })}
-                  {...(selected.length &&
+                  {...(selected.length > 0 &&
                     selectionType === 'counter' && {
                       placeholder: `${selected.length} ${selectionTypeCounterText}`,
                     })}
-                  {...(selected.length &&
+                  {...(selected.length > 0 &&
                     !multiple && { placeholder: selected.map((option) => option.text)[0] })}
                   {...(multiple &&
-                    selected.length &&
+                    selected.length > 0 &&
                     selectionType !== 'counter' && { size: _search.length + 2 })}
                   ref={searchRef}
                 ></input>

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>
     )
   },