@coreui/react 4.5.2 → 4.7.0

package/src/components/form/CFormTextarea.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
@@ -57,14 +56,6 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
     },
     ref,
   ) => {
-    const _className = classNames(
-      plainText ? 'form-control-plaintext' : 'form-control',
-      {
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -80,7 +71,19 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         tooltipFeedback={tooltipFeedback}
         valid={valid}
       >
-        <textarea className={_className} id={id} {...rest} ref={ref}>
+        <textarea
+          className={classNames(
+            plainText ? 'form-control-plaintext' : 'form-control',
+            {
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
+          id={id}
+          {...rest}
+          ref={ref}
+        >
           {children}
         </textarea>
       </CFormControlWrapper>

package/src/components/form/CInputGroup.tsx

@@ -15,15 +15,18 @@ export interface CInputGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
   ({ children, className, size, ...rest }, ref) => {
-    const _className = classNames(
-      'input-group',
-      {
-        [`input-group-${size}`]: size,
-      },
-      className,
-    )
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'input-group',
+          {
+            [`input-group-${size}`]: size,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/form/CInputGroupText.tsx

@@ -16,9 +16,8 @@ export interface CInputGroupTextProps
 
 export const CInputGroupText = forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
   ({ children, className, component: Component = 'span', ...rest }, ref) => {
-    const _className = classNames('input-group-text', className)
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('input-group-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/form/__tests__/CFormRange.spec.tsx

@@ -27,7 +27,7 @@ test('CFormRange customize', async () => {
   expect(container.firstChild).toHaveAttribute('max', '150')
   expect(container.firstChild).toHaveAttribute('min', '20')
   expect(container.firstChild).toHaveAttribute('readonly', '')
-  expect(container.firstChild).toHaveAttribute('steps', '2')
+  expect(container.firstChild).toHaveAttribute('step', '2')
   expect(container.firstChild).toHaveAttribute('type', 'range')
   expect(container.firstChild).toHaveAttribute('value', '80')
 })

package/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap

@@ -12,9 +12,7 @@ exports[`CForm customize 1`] = `
 
 exports[`CForm example 1`] = `
 <div>
-  <form
-    class=""
-  >
+  <form>
     <label
       class="form-label"
     >
@@ -55,9 +53,7 @@ exports[`CForm example 1`] = `
 
 exports[`loads and displays CForm component 1`] = `
 <div>
-  <form
-    class=""
-  >
+  <form>
     Test
   </form>
 </div>

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CFormRange customize 1`] = `
     max="150"
     min="20"
     readonly=""
-    steps="2"
+    step="2"
     type="range"
     value="80"
   />
@@ -19,7 +19,7 @@ exports[`loads and displays CFormRange component 1`] = `
 <div>
   <input
     class="form-range"
-    steps="3"
+    step="3"
     type="range"
   />
 </div>

package/src/components/grid/CCol.tsx

@@ -101,13 +101,15 @@ export const CCol = forwardRef<HTMLDivElement, CColProps>(
       }
     })
 
-    const _className = classNames(
-      repsonsiveClassNames.length ? repsonsiveClassNames : 'col',
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col',
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/grid/CContainer.tsx

@@ -53,13 +53,15 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
       breakpoint && repsonsiveClassNames.push(`container-${bp}`)
     })
 
-    const _className = classNames(
-      repsonsiveClassNames.length ? repsonsiveClassNames : 'container',
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container',
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/grid/CRow.tsx

@@ -75,22 +75,23 @@ export const CRow = forwardRef<HTMLDivElement, CRowProps>(
         if (breakpoint.cols) {
           repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
         }
+
         if (typeof breakpoint.gutter === 'number') {
           repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
         }
+
         if (typeof breakpoint.gutterX === 'number') {
           repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
         }
+
         if (typeof breakpoint.gutterY === 'number') {
           repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
         }
       }
     })
 
-    const _className = classNames('row', repsonsiveClassNames, className)
-
     return (
-      <div className={_className} ref={ref}>
+      <div className={classNames('row', repsonsiveClassNames, className)} ref={ref}>
         {children}
       </div>
     )

package/src/components/header/CHeader.tsx

@@ -19,20 +19,19 @@ export interface CHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CHeader = forwardRef<HTMLDivElement, CHeaderProps>(
   ({ children, className, container, position, ...rest }, ref) => {
-    const _className = classNames('header', { [`header-${position}`]: position }, className)
-
-    let content
-    if (container) {
-      content = (
-        <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>
-      )
-    } else {
-      content = children
-    }
-
     return (
-      <div className={_className} {...rest} ref={ref}>
-        {content}
+      <div
+        className={classNames('header', { [`header-${position}`]: position }, className)}
+        {...rest}
+        ref={ref}
+      >
+        {container ? (
+          <div className={typeof container === 'string' ? `container-${container}` : 'container'}>
+            {children}
+          </div>
+        ) : (
+          <>{children}</>
+        )}
       </div>
     )
   },

package/src/components/header/CHeaderBrand.tsx

@@ -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 './dropdown'
 export * from './footer'
 export * from './form'

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

@@ -2,9 +2,11 @@ import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
   extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**
@@ -35,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 = {
@@ -61,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/modal/CModal.tsx

@@ -2,23 +2,22 @@ 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 { useForkedRef } from '../../utils/hooks'
-
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
 
+import { useForkedRef } from '../../hooks'
+
 export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Align the modal in the center or top of the screen.
@@ -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>
+        )}
       </>
     )
   },