@coreui/react-pro 4.9.0-next.1 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.9.0-next.1",
+  "version": "4.10.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -32,7 +32,9 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "test": "jest --coverage",
+    "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
     "@coreui/icons": "^3.0.0",
@@ -42,20 +44,23 @@
     "@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.10",
+    "@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",
     "date-fns": "^2.29.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.14.0",
+    "rollup": "^3.19.1",
     "tslib": "^2.5.0",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {

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

@@ -16,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/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

@@ -60,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}
@@ -82,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

@@ -46,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

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

@@ -56,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

@@ -74,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/calendar/utils.ts

@@ -6,7 +6,7 @@ export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
 
 export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
-  return new Array(numberOfGroups)
+  return Array.from({ length: numberOfGroups })
     .fill('')
     .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
@@ -147,18 +147,16 @@ export const isDateDisabled = (
   let disabled
   if (dates) {
     dates.forEach((_date: Date | Date[]) => {
-      if (Array.isArray(_date)) {
-        if (isDateInRange(date, _date[0], _date[1])) {
-          disabled = true
-        }
+      if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
+        disabled = true
       }
-      if (_date instanceof Date) {
-        if (isSameDateAs(date, _date)) {
-          disabled = true
-        }
+
+      if (_date instanceof Date && isSameDateAs(date, _date)) {
+        disabled = true
       }
     })
   }
+
   if (min && date < min) {
     disabled = true
   }

package/src/components/callout/CCallout.tsx

@@ -20,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

@@ -26,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>
     )

package/src/components/card/CCardFooter.tsx

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

package/src/components/card/CCardGroup.tsx

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

package/src/components/card/CCardHeader.tsx

@@ -15,10 +15,8 @@ export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
   ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    const _className = classNames('card-header', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardImage.tsx

@@ -22,10 +22,12 @@ export const CCardImage = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
 >(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
-  const _className = classNames(orientation ? `card-img-${orientation}` : 'card-img', className)
-
   return (
-    <Component className={_className} {...rest} ref={ref}>
+    <Component
+      className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
+      {...rest}
+      ref={ref}
+    >
       {children}
     </Component>
   )

package/src/components/card/CCardImageOverlay.tsx

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

package/src/components/card/CCardLink.tsx

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