@coreui/react 4.5.2 → 4.7.0

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

@@ -1,9 +1,10 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CModalContext } from './CModal'
-import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
+import { CCloseButton } from '../close-button/CCloseButton'
+import { CModalContext } from './CModal'
+
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -18,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/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

@@ -1,21 +1,20 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 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

@@ -2,10 +2,11 @@ import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
-
-import { CNavContext } from '../sidebar/CSidebarNav'
 import { CLinkProps, CLink } from '../link/CLink'
+import { CNavContext } from '../sidebar/CSidebarNav'
+
+import { useForkedRef } from '../../hooks'
+
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   /**
    * Toggle the active state for the component.
@@ -41,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')
@@ -49,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

@@ -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 CNavbarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -52,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,17 +1,18 @@
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { Transition } from 'react-transition-group'
 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 { useForkedRef } from '../../hooks'
 
 export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Apply a backdrop on body while offcanvas is open.
    */
-  backdrop?: boolean
+  backdrop?: boolean | 'static'
   /**
    * A string of all className you want applied to the base component.
    */
@@ -36,6 +37,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * Generates modal using createPortal.
    */
   portal?: boolean
+  /**
+   * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+   *
+   * @since 4.6.0
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * Allow body scrolling while offcanvas is open
    */
@@ -56,7 +63,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       onHide,
       onShow,
       placement,
-      portal = true,
+      portal = false,
+      responsive = true,
       scroll = false,
       visible = false,
       ...rest
@@ -86,51 +94,20 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }, [_visible])
 
-    const _className = classNames(
-      'offcanvas',
-      {
-        [`offcanvas-${placement}`]: placement,
-        show: _visible,
-      },
-      className,
-    )
-
-    const transitionStyles = {
-      entering: { visibility: 'visible' },
-      entered: { visibility: 'visible' },
-      exiting: { visibility: 'visible' },
-      exited: { visibility: 'hidden' },
-    }
-
     const handleDismiss = () => {
       setVisible(false)
     }
 
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Escape' && keyboard) {
-          return handleDismiss()
-        }
-      },
-      [ref, handleDismiss],
-    )
+    const handleBackdropDismiss = () => {
+      if (backdrop !== 'static') {
+        setVisible(false)
+      }
+    }
 
-    const offcanvas = (ref: React.Ref<HTMLDivElement>, state: string) => {
-      return (
-        <>
-          <div
-            className={_className}
-            role="dialog"
-            style={{ ...transitionStyles[state] }}
-            tabIndex={-1}
-            onKeyDown={handleKeyDown}
-            {...rest}
-            ref={ref}
-          >
-            {children}
-          </div>
-        </>
-      )
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape' && keyboard) {
+        return handleDismiss()
+      }
     }
 
     return (
@@ -143,36 +120,47 @@ 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={handleDismiss}
-                visible={_visible}
-              />,
-              document.body,
-            )
-          : backdrop && (
-              <CBackdrop
-                className="offcanvas-backdrop"
-                onClick={handleDismiss}
-                visible={_visible}
-              />
-            )}
+        {backdrop && (
+          <CConditionalPortal portal={portal}>
+            <CBackdrop
+              className="offcanvas-backdrop"
+              onClick={handleBackdropDismiss}
+              visible={_visible}
+            />
+          </CConditionalPortal>
+        )}
       </>
     )
   },
 )
 
 COffcanvas.propTypes = {
-  backdrop: PropTypes.bool,
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
   keyboard: PropTypes.bool,
@@ -181,6 +169,10 @@ COffcanvas.propTypes = {
   placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
     .isRequired,
   portal: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
   scroll: PropTypes.bool,
   visible: PropTypes.bool,
 }

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