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

package/src/components/navbar/CNavbar.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 } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * 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.
    */
@@ -20,10 +25,6 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Defines optional container wrapping children elements.
    */
@@ -38,14 +39,17 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
   placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top'
 }
 
-export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
+export const CNavbar: PolymorphicRefForwardingComponent<'nav', CNavbarProps> = forwardRef<
+  HTMLDivElement,
+  CNavbarProps
+>(
   (
     {
       children,
+      as: Component = 'nav',
       className,
       color,
       colorScheme,
-      component: Component = 'nav',
       container,
       expand,
       placement,
@@ -81,11 +85,11 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
 )
 
 CNavbar.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
   colorScheme: PropTypes.oneOf(['dark', 'light']),
-  component: PropTypes.elementType,
   container: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([

package/src/components/navbar/CNavbarBrand.tsx

@@ -2,38 +2,41 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CNavbarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
-  /**
-   * 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
+  as?: ElementType
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * The href attribute specifies the URL of the page the link goes to.
    */
   href?: string
 }
 
-export const CNavbarBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CNavbarBrandProps>(
-  ({ children, component, className, ...rest }, ref) => {
-    const Component = component ?? (rest.href ? 'a' : 'span')
+export const CNavbarBrand: PolymorphicRefForwardingComponent<'a', CNavbarBrandProps> = forwardRef<
+  HTMLAnchorElement | HTMLSpanElement,
+  CNavbarBrandProps
+>(({ children, as, className, ...rest }, ref) => {
+  const Component = as ?? (rest.href ? 'a' : 'span')
 
-    return (
-      <Component className={classNames('navbar-brand', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+  return (
+    <Component className={classNames('navbar-brand', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CNavbarBrand.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CNavbarBrand.displayName = 'CNavbarBrand'

package/src/components/navbar/CNavbarNav.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 CNavbarNavProps 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 CNavbarNav = forwardRef<HTMLDivElement | HTMLUListElement, CNavbarNavProps>(
-  ({ children, component: Component = 'ul', className, ...rest }, ref) => {
-    return (
-      <Component
-        className={classNames('navbar-nav', className)}
-        role="navigation"
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+export const CNavbarNav: PolymorphicRefForwardingComponent<'ul', CNavbarNavProps> = forwardRef<
+  HTMLDivElement | HTMLUListElement,
+  CNavbarNavProps
+>(({ children, as: Component = 'ul', className, ...rest }, ref) => {
+  return (
+    <Component
+      className={classNames('navbar-nav', className)}
+      role="navigation"
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+})
 
 CNavbarNav.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CNavbarNav.displayName = 'CNavbarNav'

package/src/components/navbar/__tests__/CNavbar.spec.tsx

@@ -14,7 +14,7 @@ test('CNavbar customize', async () => {
       className="bazinga"
       color="warning"
       colorScheme="dark"
-      component="h3"
+      as="h3"
       container="xl"
       expand="lg"
       placement="fixed-bottom"

package/src/components/navbar/__tests__/CNavbarBrand.spec.tsx

@@ -15,7 +15,7 @@ test('CNavbarBrand witch href', async () => {
 
 test('CNavbarBrand customize', async () => {
   const { container } = render(
-    <CNavbarBrand className="bazinga" component="h3" href="/bazinga">
+    <CNavbarBrand className="bazinga" as="h3" href="/bazinga">
       Test
     </CNavbarBrand>,
   )

package/src/components/navbar/__tests__/CNavbarNav.spec.tsx

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

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

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

package/src/components/pagination/CPaginationItem.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames'
 
 import { CLink } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement> {
   /**
    * Toggle the active state for the component.
@@ -12,47 +14,48 @@ export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement>
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  component?: string | ElementType
+  as?: string | ElementType
   /**
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
 }
 
-export const CPaginationItem = forwardRef<HTMLAnchorElement, CPaginationItemProps>(
-  ({ children, className, component, ...rest }, ref) => {
-    const Component = component ?? (rest.active ? 'span' : 'a')
+export const CPaginationItem: PolymorphicRefForwardingComponent<'a', CPaginationItemProps> =
+  forwardRef<HTMLAnchorElement, CPaginationItemProps>(
+    ({ children, as, className, ...rest }, ref) => {
+      const Component = as ?? (rest.active ? 'span' : 'a')
 
-    return (
-      <li
-        className={classNames(
-          'page-item',
-          {
-            active: rest.active,
-            disabled: rest.disabled,
-          },
-          className,
-        )}
-        {...(rest.active && { 'aria-current': 'page' })}
-      >
-        {Component === 'a' ? (
-          <CLink className="page-link" component={Component} {...rest} ref={ref}>
-            {children}
-          </CLink>
-        ) : (
-          <Component className="page-link" ref={ref}>
-            {children}
-          </Component>
-        )}
-      </li>
-    )
-  },
-)
+      return (
+        <li
+          className={classNames(
+            'page-item',
+            {
+              active: rest.active,
+              disabled: rest.disabled,
+            },
+            className,
+          )}
+          {...(rest.active && { 'aria-current': 'page' })}
+        >
+          {Component === 'a' ? (
+            <CLink className="page-link" as={Component} {...rest} ref={ref}>
+              {children}
+            </CLink>
+          ) : (
+            <Component className="page-link" ref={ref}>
+              {children}
+            </Component>
+          )}
+        </li>
+      )
+    },
+  )
 
 CPaginationItem.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CPaginationItem.displayName = 'CPaginationItem'

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

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

package/src/components/placeholder/CPlaceholder.tsx

@@ -2,6 +2,7 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
@@ -10,6 +11,10 @@ export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
    * Set animation type to better convey the perception of something being actively loaded.
    */
   animation?: 'glow' | 'wave'
+  /**
+   * 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.
    */
@@ -20,10 +25,6 @@ export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
    * @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
   /**
    * Size the component extra small, small, or large.
    */
@@ -63,54 +64,52 @@ const BREAKPOINTS = [
   'xs' as const,
 ]
 
-export const CPlaceholder = forwardRef<HTMLSpanElement, CPlaceholderProps>(
-  (
-    { children, animation, className, color, component: Component = 'span', size, ...rest },
-    ref,
-  ) => {
-    const repsonsiveClassNames: string[] = []
+export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholderProps> =
+  forwardRef<HTMLSpanElement, CPlaceholderProps>(
+    ({ children, animation, as: Component = 'span', className, color, size, ...rest }, ref) => {
+      const repsonsiveClassNames: string[] = []
 
-    BREAKPOINTS.forEach((bp) => {
-      const breakpoint = rest[bp]
-      delete rest[bp]
+      BREAKPOINTS.forEach((bp) => {
+        const breakpoint = rest[bp]
+        delete rest[bp]
 
-      const infix = bp === 'xs' ? '' : `-${bp}`
+        const infix = bp === 'xs' ? '' : `-${bp}`
 
-      if (typeof breakpoint === 'number') {
-        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
-      }
+        if (typeof breakpoint === 'number') {
+          repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
+        }
 
-      if (typeof breakpoint === 'boolean') {
-        repsonsiveClassNames.push(`col${infix}`)
-      }
-    })
+        if (typeof breakpoint === 'boolean') {
+          repsonsiveClassNames.push(`col${infix}`)
+        }
+      })
 
-    return (
-      <Component
-        className={classNames(
-          animation ? `placeholder-${animation}` : 'placeholder',
-          {
-            [`bg-${color}`]: color,
-            [`placeholder-${size}`]: size,
-          },
-          repsonsiveClassNames,
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
+      return (
+        <Component
+          className={classNames(
+            animation ? `placeholder-${animation}` : 'placeholder',
+            {
+              [`bg-${color}`]: color,
+              [`placeholder-${size}`]: size,
+            },
+            repsonsiveClassNames,
+            className,
+          )}
+          {...rest}
+          ref={ref}
+        >
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CPlaceholder.propTypes = {
   animation: PropTypes.oneOf(['glow', 'wave']),
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.elementType,
   size: PropTypes.oneOf(['xs', 'sm', 'lg']),
 }
 

package/src/components/popover/CPopover.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
-// import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
@@ -96,9 +95,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     },
     ref,
   ) => {
-    const popoverRef = useRef(null)
+    const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, popoverRef)
+    const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
     const [_visible, setVisible] = useState(visible)
@@ -133,16 +133,6 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       setVisible(visible)
     }, [visible])
 
-    useEffect(() => {
-      if (_visible && togglerRef.current && popoverRef.current) {
-        initPopper(togglerRef.current, popoverRef.current, popperConfig)
-      }
-
-      return () => {
-        destroyPopper()
-      }
-    }, [_visible])
-
     const toggleVisible = (visible: boolean) => {
       if (visible) {
         setTimeout(() => setVisible(true), _delay.show)
@@ -155,6 +145,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
+          ...(_visible && {
+            'aria-describedby': uID.current,
+          }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
             onClick: () => toggleVisible(!_visible),
@@ -173,8 +166,22 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             in={_visible}
             mountOnEnter
             nodeRef={popoverRef}
-            onEnter={onShow}
+            onEnter={() => {
+              if (togglerRef.current && popoverRef.current) {
+                initPopper(togglerRef.current, popoverRef.current, popperConfig)
+              }
+
+              onShow
+            }}
+            onEntering={() => {
+              if (togglerRef.current && popoverRef.current) {
+                popoverRef.current.style.display = 'initial'
+              }
+            }}
             onExit={onHide}
+            onExited={() => {
+              destroyPopper()
+            }}
             timeout={{
               enter: 0,
               exit: popoverRef.current
@@ -194,8 +201,12 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
                   },
                   className,
                 )}
+                id={uID.current}
                 ref={forkedRef}
                 role="tooltip"
+                style={{
+                  display: 'none',
+                }}
                 {...rest}
               >
                 <div className="popover-arrow"></div>

package/src/components/sidebar/CSidebarBrand.tsx

@@ -1,25 +1,35 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CSidebarBrandProps extends HTMLAttributes<HTMLDivElement> {
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
+export interface CSidebarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.0.0-rc.2
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
 }
 
-export const CSidebarBrand = forwardRef<HTMLDivElement, CSidebarBrandProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
-        {children}
-      </div>
-    )
-  },
-)
+export const CSidebarBrand: PolymorphicRefForwardingComponent<'a', CSidebarBrandProps> = forwardRef<
+  HTMLAnchorElement | HTMLDivElement,
+  CSidebarBrandProps
+>(({ children, as: Component = 'a', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
+      {children}
+    </Component>
+  )
+})
 
 CSidebarBrand.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }