@coreui/react 4.5.2 → 4.7.0

package/dist/props.d.ts

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+import type { Placements, Triggers } from './types';
+export declare const colorPropType: PropTypes.Requireable<string>;
+export declare const placementPropType: PropTypes.Requireable<Placements>;
+export declare const shapePropType: PropTypes.Requireable<string>;
+export declare const textColorsPropType: PropTypes.Requireable<string>;
+export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.5.2",
+  "version": "4.7.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -32,27 +32,32 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "test": "jest --coverage",
+    "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@popperjs/core": "^2.11.6",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "^18.0.6",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-transition-group": "^4.4.5",
     "classnames": "^2.3.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.7.5",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "rollup": "^3.19.1",
+    "tslib": "^2.5.0",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/accordion/CAccordion.tsx

@@ -30,11 +30,15 @@ export interface CAccordionContextProps {
 export const CAccordionContext = createContext({} as CAccordionContextProps)
 
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-  ({ children, activeItemKey = undefined, alwaysOpen = false, className, flush, ...rest }, ref) => {
+  ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
-    const _className = classNames('accordion', { 'accordion-flush': flush }, className)
+
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames('accordion', { 'accordion-flush': flush }, className)}
+        {...rest}
+        ref={ref}
+      >
         <CAccordionContext.Provider value={{ _activeItemKey, alwaysOpen, setActiveKey }}>
           {children}
         </CAccordionContext.Provider>

package/src/components/accordion/CAccordionBody.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { CAccordionItemContext } from './CAccordionItem'
 
 import { CCollapse } from './../collapse/CCollapse'
+
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -15,11 +16,10 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
     const { visible } = useContext(CAccordionItemContext)
-    const _className = classNames('accordion-body', className)
 
     return (
       <CCollapse className="accordion-collapse" visible={visible}>
-        <div className={_className} {...rest} ref={ref}>
+        <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>

package/src/components/accordion/CAccordionButton.tsx

@@ -15,12 +15,10 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
   ({ children, className, ...rest }, ref) => {
     const { visible, setVisible } = useContext(CAccordionItemContext)
 
-    const _className = classNames('accordion-button', { collapsed: !visible }, className)
-
     return (
       <button
         type="button"
-        className={_className}
+        className={classNames('accordion-button', { collapsed: !visible }, className)}
         aria-expanded={!visible}
         onClick={() => setVisible(!visible)}
         {...rest}

package/src/components/accordion/CAccordionCollapse.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+
 import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
 
 export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(

package/src/components/accordion/CAccordionHeader.tsx

@@ -13,10 +13,8 @@ export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('accordion-header', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('accordion-header', className)} {...rest} ref={ref}>
         <CAccordionButton>{children}</CAccordionButton>
       </div>
     )

package/src/components/accordion/CAccordionItem.tsx

@@ -32,7 +32,7 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const _itemKey = useRef(itemKey ? itemKey : Math.random().toString(36).substr(2, 9))
+    const _itemKey = useRef(itemKey ?? Math.random().toString(36).slice(2, 11))
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
@@ -45,10 +45,8 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
       setVisible(Boolean(_activeItemKey === _itemKey.current))
     }, [_activeItemKey])
 
-    const _className = classNames('accordion-item', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
         <CAccordionItemContext.Provider value={{ setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>

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

@@ -3,7 +3,7 @@
 exports[`CAccordionBody customize 1`] = `
 <div>
   <div
-    class="accordion-collpase collapse"
+    class="accordion-collapse collapse"
   >
     <div
       class="accordion-body"
@@ -17,7 +17,7 @@ exports[`CAccordionBody customize 1`] = `
 exports[`loads and displays CAccordionBody component 1`] = `
 <div>
   <div
-    class="accordion-collpase collapse"
+    class="accordion-collapse collapse"
   >
     <div
       class="accordion-body"

package/src/components/alert/CAlert.tsx

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -59,19 +60,6 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       setVisible(visible)
     }, [visible])
 
-    const _className = classNames(
-      'alert',
-      variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
-      {
-        'alert-dismissible fade': dismissible,
-      },
-      className,
-    )
-
-    const getTransitionClass = (state: string) => {
-      return state === 'entered' && 'show'
-    }
-
     return (
       <Transition
         in={_visible}
@@ -81,20 +69,25 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
         timeout={150}
         unmountOnExit
       >
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <div
-              className={classNames(_className, transitionClass)}
-              role="alert"
-              {...rest}
-              ref={forkedRef}
-            >
-              {children}
-              {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
-            </div>
-          )
-        }}
+        {(state) => (
+          <div
+            className={classNames(
+              'alert',
+              variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
+              {
+                'alert-dismissible fade': dismissible,
+                show: state === 'entered',
+              },
+              className,
+            )}
+            role="alert"
+            {...rest}
+            ref={forkedRef}
+          >
+            {children}
+            {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
+          </div>
+        )}
       </Transition>
     )
   },

package/src/components/alert/CAlertHeading.tsx

@@ -15,10 +15,8 @@ export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export const CAlertHeading = forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
   ({ children, className, component: Component = 'h4', ...rest }, ref) => {
-    const _className = classNames('alert-heading', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/alert/CAlertLink.tsx

@@ -13,10 +13,8 @@ export interface CAlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('alert-link', className)
-
     return (
-      <CLink className={_className} {...rest} ref={ref}>
+      <CLink className={classNames('alert-link', className)} {...rest} ref={ref}>
         {children}
       </CLink>
     )

package/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CAlert customize 1`] = `
 <div>
   <div
-    class="alert bg-secondary text-white alert-dismissible fade bazinga show"
+    class="alert bg-secondary text-white alert-dismissible fade show bazinga"
     role="alert"
   >
     Test

package/src/components/avatar/CAvatar.tsx

@@ -2,14 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import {
-  Colors,
-  Shapes,
-  TextColors,
-  colorPropType,
-  shapePropType,
-  textColorsPropType,
-} from '../Types'
+import { colorPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Shapes, TextColors } from '../../types'
 
 export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -52,20 +46,23 @@ export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
   ({ children, className, color, shape, size, src, status, textColor, ...rest }, ref) => {
-    const _className = classNames(
-      'avatar',
-      {
-        [`bg-${color}`]: color,
-        [`avatar-${size}`]: size,
-        [`text-${textColor}`]: textColor,
-      },
-      shape,
-      className,
-    )
     const statusClassName = status && classNames('avatar-status', `bg-${status}`)
 
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'avatar',
+          {
+            [`bg-${color}`]: color,
+            [`avatar-${size}`]: size,
+            [`text-${textColor}`]: textColor,
+          },
+          shape,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {src ? <img src={src} className="avatar-img" /> : children}
         {status && <span className={statusClassName}></span>}
       </div>

package/src/components/backdrop/CBackdrop.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, HTMLAttributes, useRef } from 'react'
-import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -21,20 +21,17 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
     const backdropRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, backdropRef)
 
-    const _className = classNames(className, 'fade')
-
-    const getTransitionClass = (state: string) => {
-      return state === 'entered' && 'show'
-    }
-
     return (
       <Transition in={visible} mountOnEnter nodeRef={backdropRef} timeout={150} unmountOnExit>
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef} />
-          )
-        }}
+        {(state) => (
+          <div
+            className={classNames(className, 'fade', {
+              show: state === 'entered',
+            })}
+            {...rest}
+            ref={forkedRef}
+          />
+        )}
       </Transition>
     )
   },

package/src/components/badge/CBadge.tsx

@@ -2,14 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import {
-  Colors,
-  Shapes,
-  TextColors,
-  colorPropType,
-  shapePropType,
-  textColorsPropType,
-} from '../Types'
+import { colorPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Shapes, TextColors } from '../../types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
@@ -62,24 +56,26 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
     },
     ref,
   ) => {
-    const _className = classNames(
-      'badge',
-      {
-        [`bg-${color}`]: color,
-        'position-absolute translate-middle': position,
-        'top-0': position?.includes('top'),
-        'top-100': position?.includes('bottom'),
-        'start-100': position?.includes('end'),
-        'start-0': position?.includes('start'),
-        [`badge-${size}`]: size,
-        [`text-${textColor}`]: textColor,
-      },
-      shape,
-      className,
-    )
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          'badge',
+          {
+            [`bg-${color}`]: color,
+            'position-absolute translate-middle': position,
+            'top-0': position?.includes('top'),
+            'top-100': position?.includes('bottom'),
+            'start-100': position?.includes('end'),
+            'start-0': position?.includes('start'),
+            [`badge-${size}`]: size,
+            [`text-${textColor}`]: textColor,
+          },
+          shape,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/breadcrumb/CBreadcrumb.tsx

@@ -11,10 +11,9 @@ export interface CBreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
 
 export const CBreadcrumb = forwardRef<HTMLOListElement, CBreadcrumbProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('breadcrumb', className)
     return (
       <nav aria-label="breadcrumb">
-        <ol className={_className} {...rest} ref={ref}>
+        <ol className={classNames('breadcrumb', className)} {...rest} ref={ref}>
           {children}
         </ol>
       </nav>

package/src/components/breadcrumb/CBreadcrumbItem.tsx

@@ -21,15 +21,19 @@ export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
 
 export const CBreadcrumbItem = forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
   ({ children, active, className, href, ...rest }, ref) => {
-    const _className = classNames(
-      'breadcrumb-item',
-      {
-        active: active,
-      },
-      className,
-    )
     return (
-      <li className={_className} {...(active && { 'aria-current': 'page' })} {...rest} ref={ref}>
+      <li
+        className={classNames(
+          'breadcrumb-item',
+          {
+            active: active,
+          },
+          className,
+        )}
+        {...(active && { 'aria-current': 'page' })}
+        {...rest}
+        ref={ref}
+      >
         {href ? <CLink href={href}>{children}</CLink> : children}
       </li>
     )

package/src/components/button/CButton.tsx

@@ -2,9 +2,11 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes, colorPropType } from '../Types'
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors, Shapes } from '../../types'
+
 export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   /**
    * Toggle the active state for the component.
@@ -72,19 +74,17 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
     },
     ref,
   ) => {
-    const _className = classNames(
-      'btn',
-      variant ? `btn-${variant}-${color}` : `btn-${color}`,
-      { [`btn-${size}`]: size },
-      shape,
-      className,
-    )
-
     return (
       <CLink
         component={rest.href ? 'a' : component}
         type={type}
-        className={_className}
+        className={classNames(
+          'btn',
+          variant ? `btn-${variant}-${color}` : `btn-${color}`,
+          { [`btn-${size}`]: size },
+          shape,
+          className,
+        )}
         {...rest}
         ref={ref}
       >

package/src/components/button-group/CButtonGroup.tsx

@@ -19,14 +19,16 @@ export interface CButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
   ({ children, className, size, vertical, ...rest }, ref) => {
-    const _className = classNames(
-      vertical ? 'btn-group-vertical' : 'btn-group',
-      { [`btn-group-${size}`]: size },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          vertical ? 'btn-group-vertical' : 'btn-group',
+          { [`btn-group-${size}`]: size },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/button-group/CButtonToolbar.tsx

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

package/src/components/callout/CCallout.tsx

@@ -2,7 +2,8 @@ import React, { 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 CCalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,16 +20,18 @@ export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      'callout',
-      {
-        [`callout-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'callout',
+          {
+            [`callout-${color}`]: color,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/card/CCard.tsx

@@ -2,7 +2,8 @@ import React, { 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 CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -25,17 +26,19 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCard = forwardRef<HTMLDivElement, CCardProps>(
   ({ children, className, color, textColor, ...rest }, ref) => {
-    const _className = classNames(
-      'card',
-      {
-        [`bg-${color}`]: color,
-        [`text-${textColor}`]: textColor,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'card',
+          {
+            [`bg-${color}`]: color,
+            [`text-${textColor}`]: textColor,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/card/CCardBody.tsx

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