@coreui/react 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,25 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@popperjs/core": "^2.11.5",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.4",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "^17.0.15",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.60.1",
+    "rollup": "^2.70.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.2"
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/accordion/CAccordionButton.tsx

@@ -19,10 +19,11 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
 
     return (
       <button
+        type="button"
         className={_className}
-        {...rest}
         aria-expanded={!visible}
         onClick={() => setVisible(!visible)}
+        {...rest}
         ref={ref}
       >
         {children}

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -5,6 +5,7 @@ exports[`CAccordionButton customize 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed bazinga"
+    type="button"
   >
     Test
   </button>
@@ -16,6 +17,7 @@ exports[`loads and displays CAccordionButton component 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed"
+    type="button"
   >
     Test
   </button>

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`CAccordionHeader customize 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>
@@ -23,6 +24,7 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>

package/src/components/accordion/index.ts

@@ -0,0 +1,15 @@
+import { CAccordion } from './CAccordion'
+import { CAccordionBody } from './CAccordionBody'
+import { CAccordionButton } from './CAccordionButton'
+import { CAccordionCollapse } from './CAccordionCollapse'
+import { CAccordionHeader } from './CAccordionHeader'
+import { CAccordionItem } from './CAccordionItem'
+
+export {
+  CAccordion,
+  CAccordionBody,
+  CAccordionButton,
+  CAccordionCollapse,
+  CAccordionHeader,
+  CAccordionItem,
+}

package/src/components/alert/CAlert.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
@@ -6,6 +6,8 @@ import { Transition } from 'react-transition-group'
 import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -49,6 +51,8 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     },
     ref,
   ) => {
+    const alertRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, alertRef)
     const [_visible, setVisible] = useState(visible)
 
     useEffect(() => {
@@ -69,7 +73,14 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     }
 
     return (
-      <Transition in={_visible} mountOnEnter onExit={onClose} timeout={150} unmountOnExit>
+      <Transition
+        in={_visible}
+        mountOnEnter
+        nodeRef={alertRef}
+        onExit={onClose}
+        timeout={150}
+        unmountOnExit
+      >
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
@@ -77,7 +88,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
               className={classNames(_className, transitionClass)}
               role="alert"
               {...rest}
-              ref={ref}
+              ref={forkedRef}
             >
               {children}
               {dismissible && <CCloseButton onClick={() => setVisible(false)} />}

package/src/components/alert/index.ts

@@ -0,0 +1,5 @@
+import { CAlert } from './CAlert'
+import { CAlertHeading } from './CAlertHeading'
+import { CAlertLink } from './CAlertLink'
+
+export { CAlert, CAlertHeading, CAlertLink }

package/src/components/avatar/index.ts

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

package/src/components/backdrop/CBackdrop.tsx

@@ -1,8 +1,10 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -16,6 +18,9 @@ export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
   ({ className = 'modal-backdrop', visible, ...rest }, ref) => {
+    const backdropRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, backdropRef)
+
     const _className = classNames(className, 'fade')
 
     const getTransitionClass = (state: string) => {
@@ -23,10 +28,12 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
     }
 
     return (
-      <Transition in={visible} mountOnEnter timeout={150} unmountOnExit>
+      <Transition in={visible} mountOnEnter nodeRef={backdropRef} timeout={150} unmountOnExit>
         {(state) => {
           const transitionClass = getTransitionClass(state)
-          return <div className={classNames(_className, transitionClass)} {...rest} ref={ref} />
+          return (
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef} />
+          )
         }}
       </Transition>
     )

package/src/components/backdrop/index.ts

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

package/src/components/badge/index.ts

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

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,4 @@
+import { CBreadcrumb } from './CBreadcrumb'
+import { CBreadcrumbItem } from './CBreadcrumbItem'
+
+export { CBreadcrumb, CBreadcrumbItem }

package/src/components/button/index.ts

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

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

@@ -0,0 +1,4 @@
+import { CButtonToolbar } from './CButtonToolbar'
+import { CButtonGroup } from './CButtonGroup'
+
+export { CButtonToolbar, CButtonGroup }

package/src/components/callout/index.ts

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

package/src/components/card/index.ts

@@ -0,0 +1,25 @@
+import { CCard } from './CCard'
+import { CCardBody } from './CCardBody'
+import { CCardFooter } from './CCardFooter'
+import { CCardGroup } from './CCardGroup'
+import { CCardHeader } from './CCardHeader'
+import { CCardImage } from './CCardImage'
+import { CCardImageOverlay } from './CCardImageOverlay'
+import { CCardLink } from './CCardLink'
+import { CCardSubtitle } from './CCardSubtitle'
+import { CCardText } from './CCardText'
+import { CCardTitle } from './CCardTitle'
+
+export {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardGroup,
+  CCardHeader,
+  CCardImage,
+  CCardImageOverlay,
+  CCardLink,
+  CCardSubtitle,
+  CCardText,
+  CCardTitle,
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,5 @@
+import { CCarousel } from './CCarousel'
+import { CCarouselCaption } from './CCarouselCaption'
+import { CCarouselItem } from './CCarouselItem'
+
+export { CCarousel, CCarouselCaption, CCarouselItem }

package/src/components/close-button/index.ts

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

package/src/components/collapse/CCollapse.tsx

@@ -98,6 +98,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     return (
       <CSSTransition
         in={visible}
+        nodeRef={collapseRef}
         onEntering={onEntering}
         onEntered={onEntered}
         onExit={onExit}

package/src/components/collapse/index.ts

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

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -33,6 +34,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Configure the auto close behavior of the dropdown:
+   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   */
+  autoClose?: 'inside' | 'outside' | boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -80,6 +89,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 }
 
 interface ContextProps extends CDropdownProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }
 
@@ -90,6 +101,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     {
       children,
       alignment,
+      autoClose = true,
       className,
       dark,
       direction,
@@ -106,6 +118,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
   ) => {
     const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
+    const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
 
     const Component = variant === 'nav-item' ? 'li' : component
@@ -117,8 +130,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      autoClose,
       dark,
       direction: direction,
+      dropdownToggleRef,
       placement: placement,
       popper,
       variant,
@@ -135,19 +150,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
     )
 
-    useEffect(() => {
-      _visible &&
-        setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
-          window.addEventListener('keyup', handleKeyup)
-        })
-
-      return () => {
-        window.removeEventListener('click', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-      }
-    }, [_visible])
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -157,17 +159,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const handleKeyup = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-
     const dropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
@@ -203,6 +194,10 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection }),
     PropTypes.shape({ xxl: alignmentDirection }),
   ]),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+  ]),
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,

package/src/components/dropdown/CDropdownItem.tsx

@@ -21,7 +21,7 @@ export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, C
     const _className = classNames('dropdown-item', className)
 
     return (
-      <CLink component={component} {...rest} className={_className} ref={ref}>
+      <CLink className={_className} component={component} {...rest} ref={ref}>
         {children}
       </CLink>
     )

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,19 +35,69 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   component: Component = 'ul',
   ...rest
 }) => {
-  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+  const {
+    alignment,
+    autoClose,
+    dark,
+    direction,
+    dropdownToggleRef,
+    placement,
+    popper,
+    visible,
+    setVisible,
+  } = useContext(CDropdownContext)
+
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    visible && window.addEventListener('mouseup', handleMouseUp)
+    visible && window.addEventListener('keyup', handleKeyup)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    }
+  }, [visible])
+
+  const handleKeyup = (event: KeyboardEvent) => {
+    if (autoClose === false) {
+      return
+    }
+
+    if (event.key === 'Escape') {
+      setVisible(false)
+    }
+  }
+
+  const handleMouseUp = (event: Event) => {
+    if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+
+    if (
+      autoClose === true ||
+      (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) ||
+      (autoClose === 'outside' && !dropdownMenuRef.current?.contains(event.target as HTMLElement))
+    ) {
+      setTimeout(() => setVisible(false), 1)
+      return
+    }
+  }
 
   let _placement: Placements = placement
 
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }
+
   if (direction === 'dropstart') {
     _placement = 'left-start'
   }
+
   if (alignment === 'end') {
     _placement = 'bottom-end'
   }
@@ -101,7 +151,9 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   return popper && visible ? (
-    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+    <Popper innerRef={dropdownMenuRef} placement={_placement}>
+      {({ ref, style }) => dropdownMenuComponent(style, ref)}
+    </Popper>
   ) : (
     dropdownMenuComponent()
   )

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
+import { useForkedRef } from '../../utils/hooks'
+
 import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
@@ -13,6 +15,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+  /**
+   * Create a custom toggler which accepts any content.
+   */
+  custom?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -28,12 +34,13 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
 export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   children,
   caret = true,
+  custom,
   className,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
   const _className = classNames(
     {
       'dropdown-toggle': caret,
@@ -59,31 +66,47 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: _className,
     'aria-expanded': visible,
+    ...(!rest.disabled && { ...triggers }),
     ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={ref}>
+    return custom && React.isValidElement(children) ? (
+      <>
+        {React.cloneElement(children, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: useForkedRef(ref, dropdownToggleRef),
+        })}
+      </>
+    ) : variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
         {children}
       </a>
     ) : (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+      <CButton
+        type="button"
+        {...togglerProps}
+        tabIndex={0}
+        {...rest}
+        ref={useForkedRef(ref, dropdownToggleRef)}
+      >
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
 }
 
 CDropdownToggle.propTypes = {
   caret: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  custom: PropTypes.bool,
   split: PropTypes.bool,
   trigger: triggerPropType,
 }

package/src/components/dropdown/index.ts

@@ -0,0 +1,17 @@
+import { CDropdown } from './CDropdown'
+import { CDropdownDivider } from './CDropdownDivider'
+import { CDropdownHeader } from './CDropdownHeader'
+import { CDropdownItem } from './CDropdownItem'
+import { CDropdownItemPlain } from './CDropdownItemPlain'
+import { CDropdownMenu } from './CDropdownMenu'
+import { CDropdownToggle } from './CDropdownToggle'
+
+export {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownHeader,
+  CDropdownItem,
+  CDropdownItemPlain,
+  CDropdownMenu,
+  CDropdownToggle,
+}

package/src/components/footer/index.ts

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

package/src/components/form/CForm.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, FormHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CFormProps extends HTMLAttributes<HTMLFormElement> {
+export interface CFormProps extends FormHTMLAttributes<HTMLFormElement> {
   /**
    * A string of all className you want applied to the component.
    */