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

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/carousel/CCarousel.tsx

@@ -253,7 +253,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
                       !animating && handleIndicatorClick(index)
                     }}
                     className={classNames({
-                      active: active === index
+                      active: active === index,
                     })}
                     data-coreui-target=""
                     {...(active === index && { 'aria-current': true })}

package/src/components/close-button/CCloseButton.tsx

@@ -17,7 +17,7 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
   disabled?: boolean
   /**
    * Change the default color to white.
-   * 
+   *
    * @deprecated 5.0.0
    */
   white?: boolean

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/dropdown/CDropdown.tsx

@@ -11,6 +11,7 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
 import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
@@ -26,6 +27,10 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * Configure the auto close behavior of the dropdown:
    * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
@@ -38,10 +43,6 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * A string of all className you want applied to the base component.
    */
   className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
@@ -106,11 +107,15 @@ interface ContextProps extends CDropdownProps {
 
 export const CDropdownContext = createContext({} as ContextProps)
 
-export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownProps>(
+export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef<
+  HTMLDivElement | HTMLLIElement,
+  CDropdownProps
+>(
   (
     {
       children,
       alignment,
+      as = 'div',
       autoClose = true,
       className,
       container,
@@ -123,7 +128,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       popper = true,
       portal = false,
       variant = 'btn-group',
-      component = 'div',
       visible = false,
       ...rest
     },
@@ -137,7 +141,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : component
+    const Component = variant === 'nav-item' ? 'li' : as
 
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -197,10 +201,16 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     }, [_visible])
 
     const handleKeydown = (event: KeyboardEvent) => {
-      if (_visible && dropdownMenuRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      if (
+        _visible &&
+        dropdownMenuRef.current &&
+        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+      ) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        const items: HTMLElement[] = Array.from(dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'))
+        const items: HTMLElement[] = Array.from(
+          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+        )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
     }
@@ -273,13 +283,13 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection.isRequired }),
     PropTypes.shape({ xxl: alignmentDirection.isRequired }),
   ]),
+  as: PropTypes.elementType,
   autoClose: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
   ]),
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   dark: PropTypes.bool,
   direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
   offset: PropTypes.any, // TODO: find good proptype

package/src/components/dropdown/CDropdownHeader.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 CDropdownHeaderProps 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 CDropdownHeader = forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
-  ({ children, className, component: Component = 'h6', ...rest }, ref) => {
-    return (
-      <Component className={classNames('dropdown-header', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownHeaderProps> =
+  forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
+    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('dropdown-header', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CDropdownHeader.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CDropdownHeader.displayName = 'CDropdownHeader'

package/src/components/dropdown/CDropdownItem.tsx

@@ -1,39 +1,33 @@
-import React, { ElementType, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CDropdownItemProps extends CLinkProps {
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
 }
 
-export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, CDropdownItemProps>(
-  ({ children, className, component = 'a', ...rest }, ref) => {
-    return (
-      <CLink
-        className={classNames('dropdown-item', className)}
-        component={component}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </CLink>
-    )
-  },
-)
+export const CDropdownItem: PolymorphicRefForwardingComponent<'a', CDropdownItemProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  CDropdownItemProps
+>(({ children, as = 'a', className, ...rest }, ref) => {
+  return (
+    <CLink className={classNames('dropdown-item', className)} as={as} {...rest} ref={ref}>
+      {children}
+    </CLink>
+  )
+})
 
 CDropdownItem.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CDropdownItem.displayName = 'CDropdownItem'

package/src/components/dropdown/CDropdownItemPlain.tsx

@@ -2,19 +2,24 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CDropdownItemPlainProps extends HTMLAttributes<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 CDropdownItemPlain = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
-  ({ children, className, component: Component = 'span', ...rest }, ref) => {
+export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
+  'span',
+  CDropdownItemPlainProps
+> = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
+  ({ children, as: Component = 'span', className, ...rest }, ref) => {
     return (
       <Component className={classNames('dropdown-item-text', className)} {...rest} ref={ref}>
         {children}
@@ -24,9 +29,9 @@ export const CDropdownItemPlain = forwardRef<HTMLSpanElement, CDropdownItemPlain
 )
 
 CDropdownItemPlain.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CDropdownItemPlain.displayName = 'CDropdownItemPlain'

package/src/components/dropdown/CDropdownMenu.tsx

@@ -5,65 +5,66 @@ import classNames from 'classnames'
 import { CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
 
 import { getAlignmentClassNames } from './utils'
 
-
 export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
-   * 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 CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
-  ({ children, className, component: Component = 'ul', ...rest }, ref) => {
-    const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
-      useContext(CDropdownContext)
+export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMenuProps> =
+  forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
+    ({ children, as: Component = 'ul', className, ...rest }, ref) => {
+      const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
+        useContext(CDropdownContext)
 
-    const forkedRef = useForkedRef(ref, dropdownMenuRef)
+      const forkedRef = useForkedRef(ref, dropdownMenuRef)
 
-    return (
-      <CConditionalPortal container={container} portal={portal ?? false}>
-        <Component
-          className={classNames(
-            'dropdown-menu',
-            {
-              show: visible,
-            },
-            alignment && getAlignmentClassNames(alignment),
-            className,
-          )}
-          ref={forkedRef}
-          role="menu"
-          aria-hidden={!visible}
-          {...(!popper && { 'data-coreui-popper': 'static' })}
-          {...(dark && { 'data-coreui-theme': 'dark' })}
-          {...rest}
-        >
-          {Component === 'ul'
-            ? React.Children.map(children, (child, index) => {
-                if (React.isValidElement(child)) {
-                  return <li key={index}>{React.cloneElement(child)}</li>
-                }
-                return
-              })
-            : children}
-        </Component>
-      </CConditionalPortal>
-    )
-  },
-)
+      return (
+        <CConditionalPortal container={container} portal={portal ?? false}>
+          <Component
+            className={classNames(
+              'dropdown-menu',
+              {
+                show: visible,
+              },
+              alignment && getAlignmentClassNames(alignment),
+              className,
+            )}
+            ref={forkedRef}
+            role="menu"
+            aria-hidden={!visible}
+            {...(!popper && { 'data-coreui-popper': 'static' })}
+            {...(dark && { 'data-coreui-theme': 'dark' })}
+            {...rest}
+          >
+            {Component === 'ul'
+              ? React.Children.map(children, (child, index) => {
+                  if (React.isValidElement(child)) {
+                    return <li key={index}>{React.cloneElement(child)}</li>
+                  }
+                  return
+                })
+              : children}
+          </Component>
+        </CConditionalPortal>
+      )
+    },
+  )
 
 CDropdownMenu.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CDropdownMenu.displayName = 'CDropdownMenu'