@coreui/react-pro 5.0.0-rc.0 → 5.0.0-rc.2

package/src/components/badge/CBadge.tsx

@@ -2,10 +2,15 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType, gradientsPropType, shapePropType, textColorsPropType } from '../../props'
 import type { Colors, Gradients, Shapes, TextColors } from '../../types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -16,10 +21,6 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string
    */
   color?: Colors | Gradients
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Position badge in one of the corners of a link or button.
    */
@@ -41,13 +42,16 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    */
   textColor?: TextColors
 }
-export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
+export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CBadgeProps
+>(
   (
     {
       children,
+      as: Component = 'span',
       className,
       color,
-      component: Component = 'span',
       position,
       shape,
       size,
@@ -61,7 +65,7 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
         className={classNames(
           'badge',
           {
-            [`bg-${color}`]: color,
+            [`text-bg-${color}`]: color,
             'position-absolute translate-middle': position,
             'top-0': position?.includes('top'),
             'top-100': position?.includes('bottom'),
@@ -83,10 +87,10 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
 )
 
 CBadge.propTypes = {
+  as: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOfType([colorPropType, gradientsPropType]),
-  component: PropTypes.string,
   position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
   shape: shapePropType,
   size: PropTypes.oneOf(['sm']),

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

@@ -10,7 +10,7 @@ test('loads and displays CBadge component', async () => {
 
 test('CBadge customize', async () => {
   const { container } = render(
-    <CBadge className="bazinga" color="warning" component="div" shape="rounded" textColor="white">
+    <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
       Test
     </CBadge>,
   )

package/src/components/button/CButton.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors, Shapes } from '../../types'
 
@@ -12,6 +13,10 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * Toggle the active state for the component.
    */
   active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the base component.
    */
@@ -22,10 +27,6 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Toggle the disabled state for the component.
    */
@@ -59,24 +60,17 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   variant?: 'outline' | 'ghost'
 }
 
-export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButtonProps>(
+export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  CButtonProps
+>(
   (
-    {
-      children,
-      className,
-      color,
-      component = 'button',
-      shape,
-      size,
-      type = 'button',
-      variant,
-      ...rest
-    },
+    { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
     ref,
   ) => {
     return (
       <CLink
-        component={rest.href ? 'a' : component}
+        as={rest.href ? 'a' : as}
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
@@ -95,10 +89,10 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
 )
 
 CButton.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.elementType,
   shape: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),

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

@@ -10,7 +10,7 @@ test('loads and displays CButton component', async () => {
 
 test('CButton customize witch href', async () => {
   const { container } = render(
-    <CButton color="primary" component="span" href="/bazinga">
+    <CButton color="primary" as="span" href="/bazinga">
       Test
     </CButton>,
   )
@@ -23,7 +23,7 @@ test('CButton customize', async () => {
       active={true}
       className="bazinga"
       color="warning"
-      component="span"
+      as="span"
       disabled={true}
       role="bazinga"
       shape="rounded"

package/src/components/calendar/CCalendar.tsx

@@ -122,7 +122,7 @@ export interface CCalendarProps {
   /**
    * Set whether to display week numbers in the calendar.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.2
    */
   showWeekNumber?: boolean
   /**
@@ -132,7 +132,7 @@ export interface CCalendarProps {
   /**
    * Specify the type of date selection as day, week, month, or year.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.2
    */
   selectionType?: 'day' | 'week' | 'month' | 'year'
   /**
@@ -148,7 +148,7 @@ export interface CCalendarProps {
   /**
    * Label displayed over week numbers in the calendar.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.2
    */
   weekNumbersLabel?: string
   /**
@@ -256,8 +256,10 @@ const Calendar = (props: {
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
                     : typeof weekdayFormat === 'string'
-                    ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}
+                      ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                      : date
+                          .toLocaleDateString(locale, { weekday: 'long' })
+                          .slice(0, weekdayFormat)}
                 </div>
               </th>
             ))}
@@ -379,7 +381,7 @@ const Calendar = (props: {
                         range: isDateInRange(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={!isDisabled ? 0 : -1}
+                      tabIndex={isDisabled ? -1 : 0}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -416,7 +418,7 @@ const Calendar = (props: {
                         range: isDateInRange(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={!isDisabled ? 0 : -1}
+                      tabIndex={isDisabled ? -1 : 0}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -777,7 +779,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         const list: HTMLElement[] = [].concat(
           ...Element.prototype.querySelectorAll.call(
             calendarRef.current,
-            selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
+            selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
           ),
         )
 
@@ -823,19 +825,19 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
               ),
             )
 
-            if (_list.length && event.key === 'ArrowRight') {
+            if (_list.length > 0 && event.key === 'ArrowRight') {
               _list[0].focus()
             }
 
-            if (_list.length && event.key === 'ArrowLeft') {
+            if (_list.length > 0 && event.key === 'ArrowLeft') {
               _list[_list.length - 1].focus()
             }
 
-            if (_list.length && event.key === 'ArrowDown') {
+            if (_list.length > 0 && event.key === 'ArrowDown') {
               _list[gap['ArrowDown'] - (list.length - index)].focus()
             }
 
-            if (_list.length && event.key === 'ArrowUp') {
+            if (_list.length > 0 && event.key === 'ArrowUp') {
               _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus()
             }
           }, 1)
@@ -848,7 +850,11 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           return
         }
 
-        for (let i = index; i < list.length; event.key === 'ArrowRight' || event.key === 'ArrowDown'? i++ : i--) {
+        for (
+          let i = index;
+          i < list.length;
+          event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--
+        ) {
           if (list[i + gap[event.key]].tabIndex === 0) {
             list[i + gap[event.key]].focus()
             break

package/src/components/card/CCardHeader.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
-  ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardHeader: PolymorphicRefForwardingComponent<'div', CCardHeaderProps> = forwardRef<
+  HTMLDivElement,
+  CCardHeaderProps
+>(({ children, as: Component = 'div', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-header', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardHeader.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardHeader.displayName = 'CCardHeader'

package/src/components/card/CCardImage.tsx

@@ -2,26 +2,28 @@ import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardImageProps
   extends ImgHTMLAttributes<HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
   /**
    * Optionally orientate the image to the top, bottom, or make it overlaid across the card.
    */
   orientation?: 'top' | 'bottom'
 }
 
-export const CCardImage = forwardRef<
+export const CCardImage: PolymorphicRefForwardingComponent<'img', CCardImageProps> = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
->(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
+>(({ children, as: Component = 'img', className, orientation, ...rest }, ref) => {
   return (
     <Component
       className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
@@ -34,9 +36,9 @@ export const CCardImage = forwardRef<
 })
 
 CCardImage.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   orientation: PropTypes.oneOf(['top', 'bottom']),
 }
 

package/src/components/card/CCardSubtitle.tsx

@@ -2,30 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
-export const CCardSubtitle = forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
-  ({ children, component: Component = 'h6', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+
+export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitleProps> =
+  forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
+    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CCardSubtitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardSubtitle.displayName = 'CCardSubtitle'

package/src/components/card/CCardText.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardText = forwardRef<HTMLParagraphElement, CCardTextProps>(
-  ({ children, component: Component = 'p', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardText: PolymorphicRefForwardingComponent<'p', CCardTextProps> = forwardRef<
+  HTMLParagraphElement,
+  CCardTextProps
+>(({ children, as: Component = 'p', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-text', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardText.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardText.displayName = 'CCardText'

package/src/components/card/CCardTitle.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardTitle = forwardRef<HTMLHeadingElement, CCardTitleProps>(
-  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-title', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardTitle: PolymorphicRefForwardingComponent<'h5', CCardTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  CCardTitleProps
+>(({ children, as: Component = 'h5', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-title', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardTitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardTitle.displayName = 'CCardTitle'

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -30,7 +30,7 @@ test('CCardGroup full example', async () => {
   const { container } = render(
     <CCardGroup className="bazinga">
       <CCard>
-        <CCardImage component="svg">Image</CCardImage>
+        <CCardImage as="svg">Image</CCardImage>
         <CCardHeader>Header</CCardHeader>
         <CCardBody>
           <CCardTitle>Title</CCardTitle>

package/src/components/card/__tests__/CCardHeader.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CCardHeader component', async () => {
 
 test('CCardHeader customize', async () => {
   const { container } = render(
-    <CCardHeader className="bazinga" component="h3">
+    <CCardHeader className="bazinga" as="h3">
       Test
     </CCardHeader>,
   )

package/src/components/card/__tests__/CCardImage.spec.tsx

@@ -9,9 +9,7 @@ test('loads and displays CCardImage component', async () => {
 })
 
 test('CCardImage customize', async () => {
-  const { container } = render(
-    <CCardImage className="bazinga" component="div" orientation="bottom" />,
-  )
+  const { container } = render(<CCardImage className="bazinga" as="div" orientation="bottom" />)
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('card-img-bottom')

package/src/components/card/__tests__/CCardSubtitle.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CCardSubtitle component', async () => {
 
 test('CCardSubtitle customize', async () => {
   const { container } = render(
-    <CCardSubtitle className="bazinga" component="h3">
+    <CCardSubtitle className="bazinga" as="h3">
       Test
     </CCardSubtitle>,
   )

package/src/components/card/__tests__/CCardText.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CCardText component', async () => {
 
 test('CCardText customize', async () => {
   const { container } = render(
-    <CCardText className="bazinga" component="h3">
+    <CCardText className="bazinga" as="h3">
       Test
     </CCardText>,
   )

package/src/components/card/__tests__/CCardTitle.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CCardTitle component', async () => {
 
 test('CCardTitle customize', async () => {
   const { container } = render(
-    <CCardTitle className="bazinga" component="h3">
+    <CCardTitle className="bazinga" as="h3">
       Test
     </CCardTitle>,
   )

package/src/components/conditional-portal/CConditionalPortal.tsx

@@ -17,7 +17,7 @@ export interface CConditionalPortalProps {
   children: ReactNode
   /**
    * An HTML element or function that returns a single element, with `document.body` as the default.
-   * 
+   *
    * @since v4.11.0
    */
   container?: Element | (() => Element | null) | null

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -98,20 +98,20 @@ export interface CDateRangePickerProps
   indicator?: ReactNode | boolean
   /**
    * Custom function to format the selected date into a string according to a custom format.
-   * 
-   * @since v5.0.0-rc.0
+   *
+   * @since v5.0.0-rc.2
    */
   inputDateFormat?: (date: Date) => string
   /**
    * Custom function to parse the input value into a valid Date object.
-   * 
-   * @since v5.0.0-rc.0
+   *
+   * @since v5.0.0-rc.2
    */
   inputDateParse?: (date: string | Date) => Date
   /**
    * Defines the delay (in milliseconds) for the input field's onChange event.
-   * 
-   * @since v5.0.0-rc.0
+   *
+   * @since v5.0.0-rc.2
    */
   inputOnChangeDelay?: number
   /**
@@ -345,8 +345,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       return inputDateFormat
         ? inputDateFormat(_date)
         : timepicker
-        ? _date.toLocaleString(locale)
-        : _date.toLocaleDateString(locale)
+          ? _date.toLocaleString(locale)
+          : _date.toLocaleDateString(locale)
     }
 
     const setInputValue = (el: HTMLInputElement | null, date: Date | string | null) => {
@@ -512,7 +512,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                   onClick={() => {
                     const date = new Date()
                     handleStartDateChange(date)
-                    handleEndDateChange(date)
+                    range && handleEndDateChange(date)
                     setCalendarDate(date)
                   }}
                 >
@@ -526,7 +526,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                   variant={cancelButtonVariant}
                   onClick={() => {
                     handleStartDateChange(initialStartDate)
-                    handleEndDateChange(initialEndDate)
+                    range && handleEndDateChange(initialEndDate)
                     setVisible(false)
                   }}
                 >
@@ -641,8 +641,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                             ? true
                             : false
                           : _endDate === null
-                          ? true
-                          : false
+                            ? true
+                            : false
                       }
                       key={index}
                       locale={locale}