@coreui/react-pro 5.20.0 → 5.21.0

package/src/components/alert/CAlert.tsx

@@ -50,7 +50,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       onClose,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const alertRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, alertRef)
@@ -78,7 +78,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
                 'alert-dismissible fade': dismissible,
                 show: state === 'entered',
               },
-              className,
+              className
             )}
             role="alert"
             {...rest}
@@ -90,7 +90,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CAlert.propTypes = {

package/src/components/alert/CAlertHeading.tsx

@@ -23,7 +23,7 @@ export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadin
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CAlertHeading.propTypes = {

package/src/components/alert/CAlertLink.tsx

@@ -18,7 +18,7 @@ export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
         {children}
       </CLink>
     )
-  },
+  }
 )
 
 CAlertLink.propTypes = {

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

@@ -12,7 +12,7 @@ test('CAlertHeading customize', async () => {
   const { container } = render(
     <CAlertHeading as="h3" className="bazinga">
       Test
-    </CAlertHeading>,
+    </CAlertHeading>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/alert/__tests__/CAlertLink.spec.tsx

@@ -12,7 +12,7 @@ test('CAlertLink customize', async () => {
   const { container } = render(
     <CAlertLink className="bazinga" href="/bazinga">
       Test
-    </CAlertLink>,
+    </CAlertLink>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/avatar/CAvatar.tsx

@@ -58,7 +58,7 @@ export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
             [`text-${textColor}`]: textColor,
           },
           shape,
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -67,7 +67,7 @@ export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
         {status && <span className={statusClassName}></span>}
       </div>
     )
-  },
+  }
 )
 
 CAvatar.propTypes = {

package/src/components/avatar/__tests__/CAvatar.spec.tsx

@@ -20,7 +20,7 @@ test('CAvatar customize', async () => {
       textColor="white"
     >
       Test
-    </CAvatar>,
+    </CAvatar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -45,7 +45,7 @@ test('CAvatar customize image', async () => {
       src="/bazinga"
     >
       Test
-    </CAvatar>,
+    </CAvatar>
   )
   expect(container).toMatchSnapshot()
 

package/src/components/backdrop/CBackdrop.tsx

@@ -34,7 +34,7 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CBackdrop.propTypes = {

package/src/components/backdrop/__tests__/CBackdrop.spec.tsx

@@ -22,7 +22,7 @@ test('CBackdrop customize 2', async () => {
   const { container } = render(
     <CBackdrop className="bazinga" visible={true}>
       Test
-    </CBackdrop>,
+    </CBackdrop>
   )
   jest.runAllTimers()
   expect(container).toMatchSnapshot()

package/src/components/badge/CBadge.tsx

@@ -66,7 +66,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
       textColor,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <Component
@@ -84,7 +84,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
             [`text-bg-${textBgColor}`]: textBgColor,
           },
           shape,
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -92,7 +92,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CBadge.propTypes = {

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -12,7 +12,7 @@ test('CBadge customize', async () => {
   const { container } = render(
     <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
       Test
-    </CBadge>,
+    </CBadge>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/breadcrumb/CBreadcrumb.tsx

@@ -18,7 +18,7 @@ export const CBreadcrumb = forwardRef<HTMLOListElement, CBreadcrumbProps>(
         </ol>
       </nav>
     )
-  },
+  }
 )
 
 CBreadcrumb.propTypes = {

package/src/components/breadcrumb/CBreadcrumbItem.tsx

@@ -37,7 +37,7 @@ export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrum
             {
               active: active,
             },
-            className,
+            className
           )}
           {...(active && { 'aria-current': 'page' })}
           {...rest}
@@ -52,7 +52,7 @@ export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrum
           )}
         </li>
       )
-    },
+    }
   )
 
 CBreadcrumbItem.propTypes = {

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

@@ -14,7 +14,7 @@ test('CBreadcrumb customize', async () => {
       <CBreadcrumbItem>Test A</CBreadcrumbItem>
       <CBreadcrumbItem active={false}>Test B</CBreadcrumbItem>
       <CBreadcrumbItem active={true}>Test C</CBreadcrumbItem>
-    </CBreadcrumb>,
+    </CBreadcrumb>
   )
   const ol = container.querySelector('ol')
   expect(container).toMatchSnapshot()

package/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx

@@ -12,7 +12,7 @@ test('CBreadcrumbItem customize', async () => {
   const { container } = render(
     <CBreadcrumbItem active={true} className="bazinga">
       Test
-    </CBreadcrumbItem>,
+    </CBreadcrumbItem>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/button/__tests__/CButton.spec.tsx

@@ -12,7 +12,7 @@ test('CButton customize witch href', async () => {
   const { container } = render(
     <CButton color="primary" as="span" href="/bazinga">
       Test
-    </CButton>,
+    </CButton>
   )
   expect(container).toMatchSnapshot()
 })
@@ -32,7 +32,7 @@ test('CButton customize', async () => {
       variant="ghost"
     >
       Test
-    </CButton>,
+    </CButton>
   )
   expect(container).toMatchSnapshot()
 

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

@@ -24,7 +24,7 @@ export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
         className={classNames(
           vertical ? 'btn-group-vertical' : 'btn-group',
           { [`btn-group-${size}`]: size },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -32,7 +32,7 @@ export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CButtonGroup.propTypes = {

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

@@ -16,7 +16,7 @@ export const CButtonToolbar = forwardRef<HTMLDivElement, CButtonToolbarProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CButtonToolbar.propTypes = {

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

@@ -15,7 +15,7 @@ test('CButtonGroup customize', async () => {
       <CButton color="primary">Test A</CButton>
       <CButton color="primary">Test B</CButton>
       <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
+    </CButtonGroup>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -29,7 +29,7 @@ test('CButtonGroup customize vertical', async () => {
       <CButton color="primary">Test A</CButton>
       <CButton color="primary">Test B</CButton>
       <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
+    </CButtonGroup>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

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

@@ -22,7 +22,7 @@ test('CButtonToolbar customize', async () => {
         <CButton color="primary">B</CButton>
         <CButton color="primary">C</CButton>
       </CButtonGroup>
-    </CButtonToolbar>,
+    </CButtonToolbar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/calendar/CCalendarNavigation.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, ReactNode } from 'react'
-import { CButton } from '../button/CButton'
 import type { ViewTypes } from './types'
 
 export interface CCalendarNavigationProps {
@@ -47,25 +46,23 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
       <div className="calendar-nav" ref={ref}>
         {navigation && (
           <div className="calendar-nav-prev">
-            <CButton
-              color="transparent"
-              size="sm"
+            <button
+              className="calendar-nav-btn"
               aria-label={ariaNavPrevYearLabel}
               onClick={() => onNavigationClick('prev', true)}
             >
               {navPrevDoubleIcon ?? (
                 <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
               )}
-            </CButton>
+            </button>
             {view === 'days' && (
-              <CButton
-                color="transparent"
-                size="sm"
+              <button
+                className="calendar-nav-btn"
                 aria-label={ariaNavPrevMonthLabel}
                 onClick={() => onNavigationClick('prev')}
               >
                 {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
-              </CButton>
+              </button>
             )}
           </div>
         )}
@@ -75,41 +72,38 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
           {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
         >
           {view === 'days' && (
-            <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
+            <button className="calendar-nav-btn" onClick={() => navigation && onMonthClick()}>
               {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
-            </CButton>
+            </button>
           )}
-          <CButton
-            color="transparent"
-            size="sm"
+          <button
+            className="calendar-nav-btn"
             onClick={() => navigation && onYearClick()}
             {...(navYearFirst && { style: { order: '-1' } })}
           >
             {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
-          </CButton>
+          </button>
         </div>
         {navigation && (
           <div className="calendar-nav-next">
             {view === 'days' && (
-              <CButton
-                color="transparent"
-                size="sm"
+              <button
+                className="calendar-nav-btn"
                 aria-label={ariaNavNextMonthLabel}
                 onClick={() => onNavigationClick('next')}
               >
                 {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
-              </CButton>
+              </button>
             )}
-            <CButton
-              color="transparent"
-              size="sm"
+            <button
+              className="calendar-nav-btn"
               aria-label={ariaNavNextYearLabel}
               onClick={() => onNavigationClick('next', true)}
             >
               {navNextDoubleIcon ?? (
                 <span className="calendar-nav-icon calendar-nav-icon-double-next" />
               )}
-            </CButton>
+            </button>
           </div>
         )}
       </div>

package/src/components/calendar/CCalendarPanel.tsx

@@ -123,21 +123,23 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
               const { date } = days[0]
               const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
               const isSelected = isDateSelected(date, startDate, endDate)
-              const current = days.some((day) => day.month === 'current')
               return (
                 <tr
-                  className={classNames('calendar-row', {
-                    disabled: isDisabled,
-                    range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
-                    'range-hover':
-                      selectionType === 'week' && hoverDate && selectEndDate
-                        ? isDateInRange(date, startDate, hoverDate)
-                        : isDateInRange(date, hoverDate, endDate),
-                    selected: isSelected,
-                  })}
+                  className={classNames(
+                    'calendar-row',
+                    selectionType === 'week' && {
+                      disabled: isDisabled,
+                      range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
+                      'range-hover':
+                        selectionType === 'week' && hoverDate && selectEndDate
+                          ? isDateInRange(date, startDate, hoverDate)
+                          : isDateInRange(date, hoverDate, endDate),
+                      selected: isSelected,
+                    }
+                  )}
                   key={index}
-                  tabIndex={selectionType === 'week' && current && !isDisabled ? 0 : -1}
-                  {...(isSelected && { 'aria-selected': true })}
+                  // tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
+                  {...(selectionType === 'week' && isSelected && { 'aria-selected': true })}
                   {...(selectionType === 'week' &&
                     !isDisabled && {
                       onBlur: () => onCalendarMouseLeave(),