@coreui/react 4.1.1 → 4.2.1

package/src/components/form/index.ts

@@ -0,0 +1,29 @@
+import { CForm } from './CForm'
+import { CFormCheck } from './CFormCheck'
+import { CFormFeedback } from './CFormFeedback'
+import { CFormFloating } from './CFormFloating'
+import { CFormInput } from './CFormInput'
+import { CFormLabel } from './CFormLabel'
+import { CFormRange } from './CFormRange'
+import { CFormSelect } from './CFormSelect'
+import { CFormSwitch } from './CFormSwitch'
+import { CFormText } from './CFormText'
+import { CFormTextarea } from './CFormTextarea'
+import { CInputGroup } from './CInputGroup'
+import { CInputGroupText } from './CInputGroupText'
+
+export {
+  CForm,
+  CFormCheck,
+  CFormFeedback,
+  CFormFloating,
+  CFormInput,
+  CFormLabel,
+  CFormRange,
+  CFormSelect,
+  CFormSwitch,
+  CFormText,
+  CFormTextarea,
+  CInputGroup,
+  CInputGroupText,
+}

package/src/components/grid/index.ts

@@ -0,0 +1,5 @@
+import { CCol } from './CCol'
+import { CContainer } from './CContainer'
+import { CRow } from './CRow'
+
+export { CCol, CContainer, CRow }

package/src/components/header/index.ts

@@ -0,0 +1,8 @@
+import { CHeader } from './CHeader'
+import { CHeaderBrand } from './CHeaderBrand'
+import { CHeaderDivider } from './CHeaderDivider'
+import { CHeaderNav } from './CHeaderNav'
+import { CHeaderText } from './CHeaderText'
+import { CHeaderToggler } from './CHeaderToggler'
+
+export { CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler }

package/src/components/image/index.ts

@@ -0,0 +1,3 @@
+import { CImage } from './CImage'
+
+export { CImage }

package/src/components/index.ts

@@ -1 +1,36 @@
+export * from './accordion'
+export * from './alert'
+export * from './avatar'
+export * from './backdrop'
+export * from './badge'
+export * from './breadcrumb'
+export * from './button'
+export * from './button-group'
+export * from './callout'
+export * from './card'
+export * from './carousel'
+export * from './close-button'
+export * from './collapse'
+export * from './dropdown'
+export * from './footer'
+export * from './form'
+export * from './grid'
+export * from './header'
+export * from './image'
+export * from './link'
+export * from './list-group'
+export * from './modal'
+export * from './nav'
+export * from './navbar'
+export * from './offcanvas'
+export * from './pagination'
+export * from './placeholder'
+export * from './progress'
+export * from './popover'
+export * from './sidebar'
+export * from './spinner'
+export * from './table'
+export * from './tabs'
+export * from './toast'
+export * from './tooltip'
 export * from './widgets'

package/src/components/link/index.ts

@@ -0,0 +1,3 @@
+import { CLink } from './CLink'
+
+export { CLink }

package/src/components/list-group/index.ts

@@ -0,0 +1,4 @@
+import { CListGroup } from './CListGroup'
+import { CListGroupItem } from './CListGroupItem'
+
+export { CListGroup, CListGroupItem }

package/src/components/modal/CModal.tsx

@@ -72,6 +72,10 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * Remove animation to create modal that simply appear rather than fade in to view.
    */
   transition?: boolean
+  /**
+   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+   */
+  unmountOnClose?: boolean
   /**
    * Toggle the visibility of modal component.
    */
@@ -102,11 +106,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       scrollable,
       size,
       transition = true,
+      unmountOnClose = true,
       visible,
     },
     ref,
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -121,6 +127,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setVisible,
     }
 
+    useEffect(() => {
+      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
+      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+
+      return () => {
+        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
+        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+      }
+    }, [_visible])
+
     const handleDismiss = () => {
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
@@ -167,6 +183,15 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
+    const handleClickOutside = (event: Event) => {
+      if (
+        modalContentRef.current &&
+        !modalContentRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleDismiss()
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event) => {
         if (event.key === 'Escape' && keyboard) {
@@ -190,9 +215,8 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               fullscreen={fullscreen}
               scrollable={scrollable}
               size={size}
-              onClick={(event) => event.stopPropagation()}
             >
-              <CModalContent>{children}</CModalContent>
+              <CModalContent ref={modalContentRef}>{children}</CModalContent>
             </CModalDialog>
           </div>
         </CModalContext.Provider>
@@ -201,23 +225,22 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     return (
       <>
-        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
-          <Transition
-            in={_visible}
-            mountOnEnter
-            onEnter={onShow}
-            onExit={onClose}
-            unmountOnExit
-            timeout={!transition ? 0 : duration}
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return typeof window !== 'undefined' && portal
-                ? createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass)
-            }}
-          </Transition>
-        </div>
+        <Transition
+          in={_visible}
+          mountOnEnter
+          nodeRef={modalRef}
+          onEnter={onShow}
+          onExit={onClose}
+          unmountOnExit={unmountOnClose}
+          timeout={!transition ? 0 : duration}
+        >
+          {(state) => {
+            const transitionClass = getTransitionClass(state)
+            return typeof window !== 'undefined' && portal
+              ? createPortal(modal(forkedRef, transitionClass), document.body)
+              : modal(forkedRef, transitionClass)
+          }}
+        </Transition>
         {typeof window !== 'undefined' && portal
           ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
           : backdrop && <CBackdrop visible={_visible} />}
@@ -244,6 +267,7 @@ CModal.propTypes = {
   scrollable: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg', 'xl']),
   transition: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
   visible: PropTypes.bool,
 }
 

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -36,7 +36,7 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyDown(modal, {
+    fireEvent.keyUp(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,

package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CModal customize 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`CModal customize 1`] = `<div />`;
 
-exports[`loads and displays CModal component 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`loads and displays CModal component 1`] = `<div />`;

package/src/components/modal/index.ts

@@ -0,0 +1,9 @@
+import { CModal } from './CModal'
+import { CModalBody } from './CModalBody'
+import { CModalContent } from './CModalContent'
+import { CModalDialog } from './CModalDialog'
+import { CModalFooter } from './CModalFooter'
+import { CModalHeader } from './CModalHeader'
+import { CModalTitle } from './CModalTitle'
+
+export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle }

package/src/components/nav/CNavGroup.tsx

@@ -106,6 +106,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
         )}
         <Transition
           in={_visible}
+          nodeRef={navItemsRef}
           onEntering={onEntering}
           onEntered={onEntered}
           onExit={onExit}

package/src/components/nav/index.ts

@@ -0,0 +1,8 @@
+import { CNav } from './CNav'
+import { CNavGroupItems } from './CNavGroupItems'
+import { CNavGroup } from './CNavGroup'
+import { CNavItem } from './CNavItem'
+import { CNavLink } from './CNavLink'
+import { CNavTitle } from './CNavTitle'
+
+export { CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }

package/src/components/navbar/index.ts

@@ -0,0 +1,7 @@
+import { CNavbar } from './CNavbar'
+import { CNavbarBrand } from './CNavbarBrand'
+import { CNavbarNav } from './CNavbarNav'
+import { CNavbarText } from './CNavbarText'
+import { CNavbarToggler } from './CNavbarToggler'
+
+export { CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler }

package/src/components/offcanvas/COffcanvas.tsx

@@ -137,6 +137,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       <>
         <Transition
           in={_visible}
+          nodeRef={offcanvasRef}
           onEnter={onShow}
           onEntered={() => offcanvasRef.current?.focus()}
           onExit={onHide}

package/src/components/offcanvas/index.ts

@@ -0,0 +1,6 @@
+import { COffcanvas } from './COffcanvas'
+import { COffcanvasBody } from './COffcanvasBody'
+import { COffcanvasHeader } from './COffcanvasHeader'
+import { COffcanvasTitle } from './COffcanvasTitle'
+
+export { COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle }

package/src/components/pagination/index.ts

@@ -0,0 +1,4 @@
+import { CPagination } from './CPagination'
+import { CPaginationItem } from './CPaginationItem'
+
+export { CPagination, CPaginationItem }

package/src/components/placeholder/index.ts

@@ -0,0 +1,3 @@
+import { CPlaceholder } from './CPlaceholder'
+
+export { CPlaceholder }

package/src/components/popover/CPopover.tsx

@@ -1,15 +1,16 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
-import { Manager, Popper, Reference } from 'react-popper'
+import PropTypes from 'prop-types'
+import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-// import { CPopoverContent } from './CPopoverContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CPopoverProps {
-  children: ReactElement
+  // TODO: find solution to not use any
+  children: any
   /**
    * Content node for your component.
    */
@@ -49,16 +50,33 @@ export interface CPopoverProps {
 export const CPopover: FC<CPopoverProps> = ({
   children,
   content,
-  placement = 'top',
   offset = [0, 8],
   onHide,
   onShow,
+  placement = 'top',
   title,
   trigger = 'click',
   visible,
   ...rest
 }) => {
   const [_visible, setVisible] = useState(visible)
+  const popoverRef = useRef()
+
+  const [referenceElement, setReferenceElement] = useState(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: placement,
+  })
 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
@@ -71,32 +89,29 @@ export const CPopover: FC<CPopoverProps> = ({
   }
 
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) =>
-          React.cloneElement(children, {
-            ref: ref,
-            ...((trigger === 'click' || trigger.includes('click')) && {
-              onClick: () => setVisible(!_visible),
-            }),
-            ...((trigger === 'focus' || trigger.includes('focus')) && {
-              onFocus: () => setVisible(true),
-              onBlur: () => setVisible(false),
-            }),
-            ...((trigger === 'hover' || trigger.includes('hover')) && {
-              onMouseEnter: () => setVisible(true),
-              onMouseLeave: () => setVisible(false),
-            }),
-          })
-        }
-      </Reference>
+    <>
+      {React.cloneElement(children, {
+        ref: setReferenceElement,
+        ...((trigger === 'click' || trigger.includes('click')) && {
+          onClick: () => setVisible(!_visible),
+        }),
+        ...((trigger === 'focus' || trigger.includes('focus')) && {
+          onFocus: () => setVisible(true),
+          onBlur: () => setVisible(false),
+        }),
+        ...((trigger === 'hover' || trigger.includes('hover')) && {
+          onMouseEnter: () => setVisible(true),
+          onMouseLeave: () => setVisible(false),
+        }),
+      })}
       {typeof window !== 'undefined' &&
         createPortal(
           <Transition
             in={_visible}
+            mountOnEnter
+            nodeRef={popoverRef}
             onEnter={onShow}
             onExit={onHide}
-            mountOnEnter
             timeout={{
               enter: 0,
               exit: 200,
@@ -106,52 +121,39 @@ export const CPopover: FC<CPopoverProps> = ({
             {(state) => {
               const transitionClass = getTransitionClass(state)
               return (
-                <Popper
-                  placement={placement}
-                  modifiers={[
-                    {
-                      name: 'offset',
-                      options: {
-                        offset: offset,
-                      },
-                    },
-                  ]}
-                >
-                  {({ arrowProps, style, ref }) => (
-                    <div
-                      className={classNames(
-                        `popover bs-popover-${
-                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                        }`,
-                        transitionClass,
-                      )}
-                      ref={ref}
-                      role="tooltip"
-                      style={style}
-                      {...rest}
-                    >
-                      <div className="popover-arrow" {...arrowProps}></div>
-                      <div className="popover-header">{title}</div>
-                      <div className="popover-body">{content}</div>
-                    </div>
+                <div
+                  className={classNames(
+                    `popover bs-popover-${
+                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                    }`,
+                    transitionClass,
                   )}
-                </Popper>
+                  ref={setPopperElement}
+                  role="tooltip"
+                  style={styles.popper}
+                  {...attributes.popper}
+                  {...rest}
+                >
+                  <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                  <div className="popover-header">{title}</div>
+                  <div className="popover-body">{content}</div>
+                </div>
               )
             }}
           </Transition>,
           document.body,
         )}
-    </Manager>
+    </>
   )
 }
 
 CPopover.propTypes = {
   children: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

package/src/components/popover/index.ts

@@ -0,0 +1,3 @@
+import { CPopover } from './CPopover'
+
+export { CPopover }

package/src/components/progress/index.ts

@@ -0,0 +1,4 @@
+import { CProgress } from './CProgress'
+import { CProgressBar } from './CProgressBar'
+
+export { CProgress, CProgressBar }

package/src/components/sidebar/index.ts

@@ -0,0 +1,8 @@
+import { CSidebar } from './CSidebar'
+import { CSidebarBrand } from './CSidebarBrand'
+import { CSidebarFooter } from './CSidebarFooter'
+import { CSidebarToggler } from './CSidebarToggler'
+import { CSidebarHeader } from './CSidebarHeader'
+import { CSidebarNav } from './CSidebarNav'
+
+export { CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav }

package/src/components/spinner/index.ts

@@ -0,0 +1,3 @@
+import { CSpinner } from './CSpinner'
+
+export { CSpinner }

package/src/components/table/index.ts

@@ -0,0 +1,19 @@
+import { CTable } from './CTable'
+import { CTableBody } from './CTableBody'
+import { CTableCaption } from './CTableCaption'
+import { CTableDataCell } from './CTableDataCell'
+import { CTableFoot } from './CTableFoot'
+import { CTableHead } from './CTableHead'
+import { CTableHeaderCell } from './CTableHeaderCell'
+import { CTableRow } from './CTableRow'
+
+export {
+  CTable,
+  CTableBody,
+  CTableCaption,
+  CTableDataCell,
+  CTableFoot,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
+}

package/src/components/tabs/CTabPane.tsx

@@ -1,8 +1,9 @@
-import React, { HTMLAttributes, forwardRef } from 'react'
+import React, { HTMLAttributes, forwardRef, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { useForkedRef } from '../../utils/hooks'
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -24,6 +25,9 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+    const tabPaneRef = useRef()
+    const forkedRef = useForkedRef(ref, tabPaneRef)
+
     const getTransitionClass = (state: string) => {
       return state === 'entered' && 'show'
     }
@@ -37,11 +41,11 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
       className,
     )
     return (
-      <Transition in={visible} onEnter={onShow} onExit={onHide} timeout={150}>
+      <Transition in={visible} nodeRef={tabPaneRef} onEnter={onShow} onExit={onHide} timeout={150}>
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
-            <div className={classNames(_className, transitionClass)} {...rest} ref={ref}>
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef}>
               {children}
             </div>
           )

package/src/components/tabs/index.ts

@@ -0,0 +1,4 @@
+import { CTabContent } from './CTabContent'
+import { CTabPane } from './CTabPane'
+
+export { CTabContent, CTabPane }

package/src/components/toast/CToast.tsx

@@ -12,6 +12,8 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * Apply a CSS fade transition to the toast.
@@ -82,6 +84,8 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     },
     ref,
   ) => {
+    const toastRef = useRef()
+    const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
     const timeout = useRef<number>()
 
@@ -133,6 +137,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     return (
       <Transition
         in={_visible}
+        nodeRef={toastRef}
         onEnter={() => onShow && onShow(index ? index : null)}
         onExited={() => onClose && onClose(index ? index : null)}
         timeout={250}
@@ -151,7 +156,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                 onMouseLeave={() => _autohide}
                 {...rest}
                 key={key}
-                ref={ref}
+                ref={forkedRef}
               >
                 {children}
               </div>

package/src/components/toast/index.ts

@@ -0,0 +1,7 @@
+import { CToast } from './CToast'
+import { CToastBody } from './CToastBody'
+import { CToastClose } from './CToastClose'
+import { CToastHeader } from './CToastHeader'
+import { CToaster } from './CToaster'
+
+export { CToast, CToastBody, CToastClose, CToastHeader, CToaster }