@coreui/react 5.0.0-beta.1 → 5.0.0-rc.1

package/src/components/dropdown/CDropdownToggle.tsx

@@ -20,8 +20,8 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   custom?: boolean
   /**
    * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
-   * 
-   * @since v5.0.0-beta.1
+   *
+   * @since v5.0.0-rc.1
    */
   navLink?: boolean
   /**

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -21,7 +21,7 @@ test('CDropdown customize', async () => {
     <CDropdown
       alignment={{ lg: 'start' }}
       className="bazinga"
-      component="h3"
+      as="h3"
       dark={true}
       direction="dropstart"
       placement="right-end"
@@ -39,18 +39,18 @@ test('CDropdown customize', async () => {
   expect(container.firstChild).toHaveClass('dropstart')
 })
 
-test('CDropdown change visible prop', async () => {
-  jest.useFakeTimers()
-  const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  rerender(<CDropdown visible={true}>Test</CDropdown>)
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('show')
-  rerender(<CDropdown visible={false}>Test</CDropdown>)
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  jest.runAllTimers()
-  jest.useRealTimers()
-})
+// test('CDropdown change visible prop', async () => {
+//   jest.useFakeTimers()
+//   const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
+//   expect(screen.getByText('Test')).not.toHaveClass('show')
+//   rerender(<CDropdown visible={true}>Test</CDropdown>)
+//   jest.runAllTimers()
+//   expect(screen.getByText('Test')).toHaveClass('show')
+//   rerender(<CDropdown visible={false}>Test</CDropdown>)
+//   expect(screen.getByText('Test')).not.toHaveClass('show')
+//   jest.runAllTimers()
+//   jest.useRealTimers()
+// })
 
 test('CDropdown click', async () => {
   render(

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -11,7 +11,7 @@ test('loads and displays CDropdownMenu component', async () => {
 test('CDropdownMenu customize', async () => {
   const { container } = render(
     <CDropdown visible={true}>
-      <CDropdownMenu className="bazinga" component="div">
+      <CDropdownMenu className="bazinga" as="div">
         Test
       </CDropdownMenu>
     </CDropdown>,

package/src/components/dropdown/types.ts

@@ -8,4 +8,4 @@ export type Breakpoints =
   | { xl: Directions }
   | { xxl: Directions }
 
-export type Alignments = Directions | Breakpoints
+export type Alignments = Directions | Breakpoints

package/src/components/dropdown/utils.ts

@@ -5,16 +5,17 @@ import type { Alignments, Breakpoints } from './types'
 export const getAlignmentClassNames = (alignment: Alignments) => {
   const classNames: string[] = []
   if (typeof alignment === 'object') {
-
     for (const key in alignment) {
-      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`)
+      classNames.push(
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+      )
     }
   }
 
   if (typeof alignment === 'string') {
     classNames.push(`dropdown-menu-${alignment}`)
   }
-  
+
   return classNames
 }
 
@@ -69,4 +70,4 @@ export const getPlacement = (
   }
 
   return _placement
-}
+}

package/src/components/form/CFormFeedback.tsx

@@ -2,15 +2,18 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CFormFeedbackProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
-   * 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
+
   /**
    * Method called immediately after the `value` prop changes.
    */
@@ -25,33 +28,31 @@ export interface CFormFeedbackProps extends HTMLAttributes<HTMLDivElement | HTML
   valid?: boolean
 }
 
-export const CFormFeedback = forwardRef<HTMLDivElement | HTMLSpanElement, CFormFeedbackProps>(
-  (
-    { children, className, component: Component = 'div', invalid, tooltip, valid, ...rest },
-    ref,
-  ) => {
-    return (
-      <Component
-        className={classNames(
-          {
-            [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
-            [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
-          },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedbackProps> =
+  forwardRef<HTMLDivElement | HTMLSpanElement, CFormFeedbackProps>(
+    ({ children, as: Component = 'div', className, invalid, tooltip, valid, ...rest }, ref) => {
+      return (
+        <Component
+          className={classNames(
+            {
+              [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
+              [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
+            },
+            className,
+          )}
+          {...rest}
+          ref={ref}
+        >
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CFormFeedback.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   invalid: PropTypes.bool,
   tooltip: PropTypes.bool,
   valid: PropTypes.bool,

package/src/components/form/CFormText.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 CFormTextProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
-   * 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 CFormText = forwardRef<HTMLDivElement | HTMLSpanElement, CFormTextProps>(
-  ({ children, className, component: Component = 'div', ...rest }, ref) => {
-    return (
-      <Component className={classNames('form-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CFormText: PolymorphicRefForwardingComponent<'div', CFormTextProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CFormTextProps
+>(({ children, as: Component = 'div', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('form-text', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CFormText.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CFormText.displayName = 'CFormText'

package/src/components/form/CInputGroupText.tsx

@@ -2,32 +2,35 @@ import React, { ElementType, forwardRef, LabelHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CInputGroupTextProps
   extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
   /**
-   * 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 CInputGroupText = forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
-  ({ children, className, component: Component = 'span', ...rest }, ref) => {
-    return (
-      <Component className={classNames('input-group-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CInputGroupText: PolymorphicRefForwardingComponent<'span', CInputGroupTextProps> =
+  forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
+    ({ children, as: Component = 'span', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('input-group-text', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CInputGroupText.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CInputGroupText.displayName = 'CInputGroupText'

package/src/components/form/__tests__/CFormText.spec.tsx

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

package/src/components/form/__tests__/CInputGroupText.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CInputGroupText component', async () => {
 
 test('renders CInputGroupText component as a label', async () => {
   const { container } = render(
-    <CInputGroupText component="label" htmlFor="input">
+    <CInputGroupText as="label" htmlFor="input">
       Test
     </CInputGroupText>,
   )

package/src/components/header/CHeaderBrand.tsx

@@ -2,32 +2,35 @@ import React, { ElementType, forwardRef, AnchorHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CHeaderBrandProps
   extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
   /**
-   * 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 CHeaderBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CHeaderBrandProps>(
-  ({ children, component: Component = 'a', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CHeaderBrand: PolymorphicRefForwardingComponent<'a', CHeaderBrandProps> = forwardRef<
+  HTMLAnchorElement | HTMLSpanElement,
+  CHeaderBrandProps
+>(({ children, as: Component = 'a', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CHeaderBrand.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CHeaderBrand.displayName = 'CHeaderBrand'

package/src/components/header/CHeaderNav.tsx

@@ -2,36 +2,39 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CHeaderNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
-   * 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 CHeaderNav = forwardRef<HTMLDivElement | HTMLUListElement, CHeaderNavProps>(
-  ({ children, component: Component = 'ul', className, ...rest }, ref) => {
-    return (
-      <Component
-        className={classNames('header-nav', className)}
-        role="navigation"
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CHeaderNav: PolymorphicRefForwardingComponent<'ul', CHeaderNavProps> = forwardRef<
+  HTMLDivElement | HTMLUListElement,
+  CHeaderNavProps
+>(({ children, as: Component = 'ul', className, ...rest }, ref) => {
+  return (
+    <Component
+      className={classNames('header-nav', className)}
+      role="navigation"
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  )
+})
 
 CHeaderNav.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CHeaderNav.displayName = 'CHeaderNav'

package/src/components/header/__tests__/CHeaderBrand.spec.tsx

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

package/src/components/header/__tests__/CHeaderNav.spec.tsx

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

package/src/components/link/CLink.tsx

@@ -2,19 +2,22 @@ import React, { AllHTMLAttributes, ElementType, forwardRef, MouseEvent } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
+export interface CLinkProps
+  extends Omit<AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'as'> {
   /**
    * Toggle the active state for the component.
    */
   active?: boolean
   /**
-   * 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
   /**
    * Toggle the disabled state for the component.
    */
@@ -25,35 +28,36 @@ export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAn
   href?: string
 }
 
-export const CLink = forwardRef<HTMLButtonElement | HTMLAnchorElement, CLinkProps>(
-  ({ children, active, className, component: Component = 'a', disabled, ...rest }, ref) => {
-    return (
-      <Component
-        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-        className={classNames(className, { active, disabled })}
-        {...(active && { 'aria-current': 'page' })}
-        {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
-        {...((Component === 'a' || Component === 'button') && {
-          onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-            event.preventDefault
-            !disabled && rest.onClick && rest.onClick(event)
-          },
-        })}
-        disabled={disabled}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CLink: PolymorphicRefForwardingComponent<'a', CLinkProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  CLinkProps
+>(({ children, active, as: Component = 'a', className, disabled, ...rest }, ref) => {
+  return (
+    <Component
+      // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+      className={classNames(className, { active, disabled })}
+      {...(active && { 'aria-current': 'page' })}
+      {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
+      {...((Component === 'a' || Component === 'button') && {
+        onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+          event.preventDefault
+          !disabled && rest.onClick && rest.onClick(event)
+        },
+      })}
+      disabled={disabled}
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  )
+})
 
 CLink.propTypes = {
   active: PropTypes.bool,
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   disabled: PropTypes.bool,
 }
 

package/src/components/link/__tests__/CLink.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CLink component', async () => {
 
 test('CLink customize', async () => {
   const { container } = render(
-    <CLink className="bazinga" active={true} component="button" disabled type="submit">
+    <CLink className="bazinga" active={true} as="button" disabled type="submit">
       Test
     </CLink>,
   )
@@ -38,7 +38,7 @@ test('CLink click on button', async () => {
 test('CLink click on disabled button', async () => {
   const click = jest.fn()
   render(
-    <CLink onClick={click} className="bazinga" component="button" disabled>
+    <CLink onClick={click} className="bazinga" as="button" disabled>
       Test
     </CLink>,
   )

package/src/components/list-group/CListGroup.tsx

@@ -2,15 +2,17 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
-   * 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
   /**
    * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`).
    */
@@ -27,30 +29,31 @@ export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLULi
     | 'horizontal-xxl'
 }
 
-export const CListGroup = forwardRef<HTMLDivElement | HTMLUListElement, CListGroupProps>(
-  ({ children, className, component: Component = 'ul', flush, layout }, ref) => {
-    return (
-      <Component
-        className={classNames(
-          'list-group',
-          {
-            'list-group-flush': flush,
-            [`list-group-${layout}`]: layout,
-          },
-          className,
-        )}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CListGroup: PolymorphicRefForwardingComponent<'ul', CListGroupProps> = forwardRef<
+  HTMLDivElement | HTMLUListElement,
+  CListGroupProps
+>(({ children, as: Component = 'ul', className, flush, layout }, ref) => {
+  return (
+    <Component
+      className={classNames(
+        'list-group',
+        {
+          'list-group-flush': flush,
+          [`list-group-${layout}`]: layout,
+        },
+        className,
+      )}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  )
+})
 
 CListGroup.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   flush: PropTypes.bool,
   layout: PropTypes.oneOf([
     'horizontal',