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

package/src/components/header/CHeaderBrand.tsx

@@ -22,10 +22,8 @@ export const CHeaderBrand = forwardRef<
   HTMLAnchorElement | HTMLLinkElement | HTMLSpanElement,
   CHeaderBrandProps
 >(({ children, component: Component = 'a', className, ...rest }, ref) => {
-  const _className = classNames('header-brand', className)
-
   return (
-    <Component className={_className} {...rest} ref={ref}>
+    <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
       {children}
     </Component>
   )

package/src/components/header/CHeaderBrand.tsx~HEAD

@@ -16,10 +16,8 @@ export interface CHeaderBrandProps
 
 export const CHeaderBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CHeaderBrandProps>(
   ({ children, component: Component = 'a', className, ...rest }, ref) => {
-    const _className = classNames('header-brand', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/header/CHeaderDivider.tsx

@@ -11,9 +11,7 @@ export interface CHeaderDividerProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CHeaderDivider = forwardRef<HTMLDivElement, CHeaderDividerProps>(
   ({ className, ...rest }, ref) => {
-    const _className = classNames('header-divider', className)
-
-    return <div className={_className} {...rest} ref={ref} />
+    return <div className={classNames('header-divider', className)} {...rest} ref={ref} />
   },
 )
 

package/src/components/header/CHeaderNav.tsx

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

package/src/components/header/CHeaderText.tsx

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

package/src/components/header/CHeaderToggler.tsx

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

package/src/components/image/CImage.tsx

@@ -27,17 +27,24 @@ export interface CImageProps extends ImgHTMLAttributes<HTMLOrSVGImageElement> {
 
 export const CImage = forwardRef<HTMLImageElement, CImageProps>(
   ({ align, className, fluid, rounded, thumbnail, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`float-${align}`]: align && (align === 'start' || align === 'end'),
-        'd-block mx-auto': align && align === 'center',
-        'img-fluid': fluid,
-        rounded: rounded,
-        'img-thumbnail': thumbnail,
-      },
-      className,
+    return (
+      <img
+        className={
+          classNames(
+            {
+              [`float-${align}`]: align && (align === 'start' || align === 'end'),
+              'd-block mx-auto': align && align === 'center',
+              'img-fluid': fluid,
+              rounded: rounded,
+              'img-thumbnail': thumbnail,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      />
     )
-    return <img className={_className} {...rest} ref={ref} />
   },
 )
 

package/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap

@@ -18,8 +18,6 @@ exports[`CImage customize two 1`] = `
 
 exports[`loads and displays CImage component 1`] = `
 <div>
-  <img
-    class=""
-  />
+  <img />
 </div>
 `;

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-portal'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'

package/src/components/link/CLink.tsx

@@ -27,12 +27,10 @@ export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAn
 
 export const CLink = forwardRef<HTMLButtonElement | HTMLAnchorElement, CLinkProps>(
   ({ children, active, className, component: Component = 'a', disabled, ...rest }, ref) => {
-    // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-    const _className = classNames(className, { active, disabled })
-
     return (
       <Component
-        className={_className}
+        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+        className={classNames(className, { active, disabled })}
         {...(active && { 'aria-current': 'page' })}
         {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
         {...((Component === 'a' || Component === 'button') && {

package/src/components/list-group/CListGroup.tsx

@@ -29,17 +29,18 @@ export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLULi
 
 export const CListGroup = forwardRef<HTMLDivElement | HTMLUListElement, CListGroupProps>(
   ({ children, className, component: Component = 'ul', flush, layout }, ref) => {
-    const _className = classNames(
-      'list-group',
-      {
-        'list-group-flush': flush,
-        [`list-group-${layout}`]: layout,
-      },
-      className,
-    )
-
     return (
-      <Component className={_className} ref={ref}>
+      <Component
+        className={classNames(
+          'list-group',
+          {
+            'list-group-flush': flush,
+            [`list-group-${layout}`]: layout,
+          },
+          className,
+        )}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/list-group/CListGroupItem.tsx

@@ -37,17 +37,6 @@ export const CListGroupItem = forwardRef<
   HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
   CListGroupItemProps
 >(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
-  const _className = classNames(
-    'list-group-item',
-    {
-      [`list-group-item-${color}`]: color,
-      'list-group-item-action': component === 'a' || component === 'button',
-      active,
-      disabled,
-    },
-    className,
-  )
-
   const Component = component === 'a' || component === 'button' ? CLink : component
 
   rest = {
@@ -63,7 +52,19 @@ export const CListGroupItem = forwardRef<
   }
 
   return (
-    <Component className={_className} {...rest}>
+    <Component
+      className={classNames(
+        'list-group-item',
+        {
+          [`list-group-item-${color}`]: color,
+          'list-group-item-action': component === 'a' || component === 'button',
+          active,
+          disabled,
+        },
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </Component>
   )

package/src/components/loading-button/CLoadingButton.tsx

@@ -60,11 +60,9 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
       }
     }
 
-    const _className = classNames('btn-loading', _loading && 'is-loading', className)
-
     return (
       <CButton
-        className={_className}
+        className={classNames('btn-loading', _loading && 'is-loading', className)}
         {...(disabledOnLoading && _loading && { disabled: true })}
         onClick={handleOnClick}
         {...rest}

package/src/components/modal/CModal.tsx

@@ -2,18 +2,17 @@ import React, {
   createContext,
   forwardRef,
   HTMLAttributes,
-  useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react'
-import { createPortal } from 'react-dom'
 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 { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
 
@@ -119,22 +118,22 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     const [_visible, setVisible] = useState(visible)
     const [staticBackdrop, setStaticBackdrop] = useState(false)
 
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
     const contextValues = {
       visible: _visible,
       setVisible,
     }
 
     useEffect(() => {
-      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
-      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+      setVisible(visible)
+    }, [visible])
+
+    useEffect(() => {
+      document.addEventListener('click', handleClickOutside)
+      document.addEventListener('keydown', handleKeyDown)
 
       return () => {
-        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
-        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('keydown', handleKeyDown)
       }
     }, [_visible])
 
@@ -142,6 +141,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
       }
+
       return onClose && onClose()
     }
 
@@ -150,24 +150,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setTimeout(() => setStaticBackdrop(false), duration)
     }, [staticBackdrop])
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'd-block'
-        : state === 'entered'
-        ? 'show d-block'
-        : state === 'exiting'
-        ? 'd-block'
-        : ''
-    }
-    const _className = classNames(
-      'modal',
-      {
-        'modal-static': staticBackdrop,
-        fade: transition,
-      },
-      className,
-    )
-
     // Set focus to modal after open
     useLayoutEffect(() => {
       if (_visible) {
@@ -182,7 +164,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           () => {
             modalRef.current?.focus()
           },
-          !transition ? 0 : duration,
+          transition ? duration : 0,
         )
       } else {
         document.body.classList.remove('modal-open')
@@ -210,37 +192,10 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
     }
 
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent) => {
-        if (event.key === 'Escape' && keyboard) {
-          return handleDismiss()
-        }
-      },
-      [modalRef, handleDismiss],
-    )
-
-    const modal = (ref?: React.Ref<HTMLDivElement>, transitionClass?: string) => {
-      return (
-        <CModalContext.Provider value={contextValues}>
-          <div
-            className={classNames(_className, transitionClass)}
-            tabIndex={-1}
-            role="dialog"
-            ref={ref}
-          >
-            <CModalDialog
-              alignment={alignment}
-              fullscreen={fullscreen}
-              scrollable={scrollable}
-              size={size}
-            >
-              <CModalContent {...rest} ref={modalContentRef}>
-                {children}
-              </CModalContent>
-            </CModalDialog>
-          </div>
-        </CModalContext.Provider>
-      )
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && keyboard) {
+        handleDismiss()
+      }
     }
 
     return (
@@ -252,18 +207,48 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           onEnter={onShow}
           onExit={onClose}
           unmountOnExit={unmountOnClose}
-          timeout={!transition ? 0 : duration}
+          timeout={transition ? duration : 0}
         >
-          {(state) => {
-            const transitionClass = getTransitionClass(state)
-            return typeof window !== 'undefined' && portal
-              ? createPortal(modal(forkedRef, transitionClass), document.body)
-              : modal(forkedRef, transitionClass)
-          }}
+          {(state) => (
+            <CConditionalPortal portal={portal}>
+              <CModalContext.Provider value={contextValues}>
+                <div
+                  className={classNames(
+                    'modal',
+                    {
+                      'modal-static': staticBackdrop,
+                      fade: transition,
+                      show: state === 'entered',
+                    },
+                    className,
+                  )}
+                  tabIndex={-1}
+                  role="dialog"
+                  style={{
+                    ...(state !== 'exited' && { display: 'block' }),
+                  }}
+                  ref={forkedRef}
+                >
+                  <CModalDialog
+                    alignment={alignment}
+                    fullscreen={fullscreen}
+                    scrollable={scrollable}
+                    size={size}
+                  >
+                    <CModalContent {...rest} ref={modalContentRef}>
+                      {children}
+                    </CModalContent>
+                  </CModalDialog>
+                </div>
+              </CModalContext.Provider>
+            </CConditionalPortal>
+          )}
         </Transition>
-        {typeof window !== 'undefined' && portal
-          ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
-          : backdrop && <CBackdrop visible={_visible} />}
+        {backdrop && (
+          <CConditionalPortal portal={portal}>
+            <CBackdrop visible={_visible} />
+          </CConditionalPortal>
+        )}
       </>
     )
   },

package/src/components/modal/CModalBody.tsx

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

package/src/components/modal/CModalContent.tsx

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

package/src/components/modal/CModalDialog.tsx

@@ -27,21 +27,23 @@ export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
   ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {
-    const _className = classNames(
-      'modal-dialog',
-      {
-        'modal-dialog-centered': alignment === 'center',
-        [typeof fullscreen === 'boolean'
-          ? 'modal-fullscreen'
-          : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
-        'modal-dialog-scrollable': scrollable,
-        [`modal-${size}`]: size,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'modal-dialog',
+          {
+            'modal-dialog-centered': alignment === 'center',
+            [typeof fullscreen === 'boolean'
+              ? 'modal-fullscreen'
+              : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
+            'modal-dialog-scrollable': scrollable,
+            [`modal-${size}`]: size,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/modal/CModalFooter.tsx

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

package/src/components/modal/CModalHeader.tsx

@@ -19,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/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>