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

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',

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

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import { CLink } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
@@ -13,6 +14,10 @@ export interface CListGroupItemProps
    * 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 component.
    */
@@ -27,55 +32,51 @@ export interface CListGroupItemProps
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
 }
 
-export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
-  CListGroupItemProps
->(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
-  const Component = component === 'a' || component === 'button' ? CLink : component
+export const CListGroupItem: PolymorphicRefForwardingComponent<'li', CListGroupItemProps> =
+  forwardRef<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement, CListGroupItemProps>(
+    ({ children, active, as = 'li', className, disabled, color, ...rest }, ref) => {
+      const Component = as === 'a' || as === 'button' ? CLink : as
 
-  rest = {
-    ...((component === 'a' || component === 'button') && {
-      active,
-      disabled,
-      component,
-      ref: ref,
-    }),
-    ...(active && { 'aria-current': true }),
-    ...(disabled && { 'aria-disabled': true }),
-    ...rest,
-  }
-
-  return (
-    <Component
-      className={classNames(
-        'list-group-item',
-        {
-          [`list-group-item-${color}`]: color,
-          'list-group-item-action': component === 'a' || component === 'button',
+      rest = {
+        ...((as === 'a' || as === 'button') && {
           active,
           disabled,
-        },
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </Component>
+          as,
+          ref: ref,
+        }),
+        ...(active && { 'aria-current': true }),
+        ...(disabled && { 'aria-disabled': true }),
+        ...rest,
+      }
+
+      return (
+        <Component
+          className={classNames(
+            'list-group-item',
+            {
+              [`list-group-item-${color}`]: color,
+              'list-group-item-action': as === 'a' || as === 'button',
+              active,
+              disabled,
+            },
+            className,
+          )}
+          {...rest}
+        >
+          {children}
+        </Component>
+      )
+    },
   )
-})
 
 CListGroupItem.propTypes = {
   active: PropTypes.bool,
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.elementType,
   disabled: PropTypes.bool,
 }
 

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

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

package/src/components/list-group/__tests__/CListGroupItem.spec.tsx

@@ -10,13 +10,7 @@ test('loads and displays CListGroupItem component', async () => {
 
 test('CListGroupItem customize', async () => {
   const { container } = render(
-    <CListGroupItem
-      className="bazinga"
-      active={true}
-      color="warning"
-      disabled={true}
-      component="button"
-    >
+    <CListGroupItem className="bazinga" active={true} color="warning" disabled={true} as="button">
       Test
     </CListGroupItem>,
   )

package/src/components/modal/CModal.tsx

@@ -200,10 +200,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }, [_visible])
 
     const handleClickOutside = (event: Event) => {
-      if (
-        modalContentRef.current &&
-        !modalContentRef.current.contains(event.target as HTMLElement)
-      ) {
+      if (modalRef.current && modalRef.current == event.target) {
         handleDismiss()
       }
     }

package/src/components/modal/CModalTitle.tsx

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

package/src/components/modal/__tests__/CModalTitle.spec.tsx

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

package/src/components/nav/CNav.tsx

@@ -2,16 +2,18 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CNavProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
   /**
-   * 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
   /**
    * Specify a layout type for component.
    */
@@ -22,32 +24,33 @@ export interface CNavProps
   variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
-export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
-  ({ children, className, component: Component = 'ul', layout, variant, ...rest }, ref) => {
-    return (
-      <Component
-        className={classNames(
-          'nav',
-          {
-            [`nav-${layout}`]: layout,
-            [`nav-${variant}`]: variant,
-          },
-          className,
-        )}
-        role="navigation"
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
+  HTMLDivElement | HTMLUListElement | HTMLOListElement,
+  CNavProps
+>(({ children, as: Component = 'ul', className, layout, variant, ...rest }, ref) => {
+  return (
+    <Component
+      className={classNames(
+        'nav',
+        {
+          [`nav-${layout}`]: layout,
+          [`nav-${variant}`]: variant,
+        },
+        className,
+      )}
+      role="navigation"
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  )
+})
 
 CNav.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
   variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
 }