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

package/src/components/nav/CNavGroup.tsx

@@ -1,6 +1,8 @@
 import React, {
   CSSProperties,
+  ElementType,
   forwardRef,
+  HTMLAttributes,
   ReactNode,
   useContext,
   useEffect,
@@ -12,9 +14,17 @@ import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 import type { TransitionStatus } from 'react-transition-group'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 import { CNavContext } from '../sidebar/CSidebarNav'
-export interface CNavGroupProps {
-  children?: ReactNode
+
+export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.0.0-rc.1
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -44,110 +54,111 @@ const isInVisibleGroup = (el1: string, el2: string) => {
   return array2.every((item, index) => item === array1[index])
 }
 
-export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
-  ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {
-    const [height, setHeight] = useState<number | string>()
-    const navItemsRef = useRef<HTMLUListElement>(null)
+export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps> = forwardRef<
+  HTMLDivElement | HTMLLIElement,
+  CNavGroupProps
+>(({ children, as: Component = 'li', className, compact, idx, toggler, visible, ...rest }, ref) => {
+  const [height, setHeight] = useState<number | string>()
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const navItemsRef = useRef<any>(null)
 
-    const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
 
-    const [_visible, setVisible] = useState(
-      Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
-    )
+  const [_visible, setVisible] = useState(
+    Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
+  )
 
-    useEffect(() => {
-      setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
-    }, [visibleGroup])
-
-    const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
-      event.preventDefault()
-      setVisibleGroup(
-        _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,
-      )
-      setVisible(!_visible)
-    }
-
-    const style: CSSProperties = {
-      height: 0,
-    }
-
-    const onEntering = () => {
-      navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
-    }
-
-    const onEntered = () => {
-      setHeight('auto')
-    }
-
-    const onExit = () => {
-      navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
-    }
-
-    const onExiting = () => {
-      // @ts-expect-error reflow is necessary to get correct height of the element
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const reflow = navItemsRef.current?.offsetHeight
-      setHeight(0)
-    }
-
-    const onExited = () => {
-      setHeight(0)
-    }
-
-    const transitionStyles = {
-      entering: { display: 'block', height: height },
-      entered: { display: 'block', height: height },
-      exiting: { display: 'block', height: height },
-      exited: { height: height },
-      unmounted: {}
-    }
-
-    return (
-      <li className={classNames('nav-group', { show: _visible }, className)} {...rest} ref={ref}>
-        {toggler && (
-          <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
-            {toggler}
-          </a>
-        )}
-        <Transition
-          in={_visible}
-          nodeRef={navItemsRef}
-          onEntering={onEntering}
-          onEntered={onEntered}
-          onExit={onExit}
-          onExiting={onExiting}
-          onExited={onExited}
-          timeout={300}
-        >
-          {(state) => (
-            <ul
-              className={classNames('nav-group-items', {
-                compact: compact,
-              })}
-              style={{
-                ...style,
-                ...transitionStyles[state as TransitionStatus],
-              }}
-              ref={navItemsRef}
-            >
-              {React.Children.map(children, (child, index) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child as React.ReactElement<any>, {
-                    key: index,
-                    idx: `${idx}.${index}`,
-                  })
-                }
-                return
-              })}
-            </ul>
-          )}
-        </Transition>
-      </li>
+  useEffect(() => {
+    setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
+  }, [visibleGroup])
+
+  const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    setVisibleGroup(
+      _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,
     )
-  },
-)
+    setVisible(!_visible)
+  }
+
+  const style: CSSProperties = {
+    height: 0,
+  }
+
+  const onEntering = () => {
+    navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
+  }
+
+  const onEntered = () => {
+    setHeight('auto')
+  }
+
+  const onExit = () => {
+    navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
+  }
+
+  const onExiting = () => {
+    // @ts-expect-error reflow is necessary to get correct height of the element
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const reflow = navItemsRef.current?.offsetHeight
+    setHeight(0)
+  }
+
+  const onExited = () => {
+    setHeight(0)
+  }
+
+  const transitionStyles = {
+    entering: { display: 'block', height: height },
+    entered: { display: 'block', height: height },
+    exiting: { display: 'block', height: height },
+    exited: { height: height },
+    unmounted: {},
+  }
+
+  const NavGroupItemsComponent = Component === 'li' ? 'ul' : 'div'
+
+  return (
+    <Component
+      className={classNames('nav-group', { show: _visible }, className)}
+      {...rest}
+      ref={ref}
+    >
+      {toggler && (
+        <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
+          {toggler}
+        </a>
+      )}
+      <Transition
+        in={_visible}
+        nodeRef={navItemsRef}
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExit={onExit}
+        onExiting={onExiting}
+        onExited={onExited}
+        timeout={300}
+      >
+        {(state) => (
+          <NavGroupItemsComponent
+            className={classNames('nav-group-items', {
+              compact: compact,
+            })}
+            style={{
+              ...style,
+              ...transitionStyles[state as TransitionStatus],
+            }}
+            ref={navItemsRef}
+          >
+            {children}
+          </NavGroupItemsComponent>
+        )}
+      </Transition>
+    </Component>
+  )
+})
 
 CNavGroup.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   compact: PropTypes.bool,

package/src/components/nav/CNavGroupItems.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 CNavGroupItemsProps extends HTMLAttributes<HTMLUListElement> {
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
+export interface CNavGroupItemsProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.0.0-rc.1
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
 }
 
-export const CNavGroupItems = forwardRef<HTMLUListElement, CNavGroupItemsProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <ul className={classNames('nav-group-items', className)} {...rest} ref={ref}>
-        {children}
-      </ul>
-    )
-  },
-)
+export const CNavGroupItems: PolymorphicRefForwardingComponent<'ul', CNavGroupItemsProps> =
+  forwardRef<HTMLDivElement | HTMLUListElement, CNavGroupItemsProps>(
+    ({ children, as: Component = 'ul', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('nav-group-items', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CNavGroupItems.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }

package/src/components/nav/CNavItem.tsx

@@ -1,26 +1,39 @@
-import React, { forwardRef } from 'react'
+import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CNavLink, CNavLinkProps } from './CNavLink'
 
-export const CNavItem = forwardRef<HTMLLIElement, CNavLinkProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <li className={classNames('nav-item', className)} ref={ref}>
-        {rest.href || rest.to ? (
-          <CNavLink className={className} {...rest}>
-            {children}
-          </CNavLink>
-        ) : (
-          children
-        )}
-      </li>
-    )
-  },
-)
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
+export interface CNavItemProps extends Omit<CNavLinkProps, 'component'> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.0.0-rc.1
+   */
+  as?: ElementType
+}
+
+export const CNavItem: PolymorphicRefForwardingComponent<'li', CNavItemProps> = forwardRef<
+  HTMLLIElement,
+  CNavItemProps
+>(({ children, as: Component = 'li', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('nav-item', className)} ref={ref}>
+      {rest.href || rest.to ? (
+        <CNavLink className={className} {...rest}>
+          {children}
+        </CNavLink>
+      ) : (
+        children
+      )}
+    </Component>
+  )
+})
 
 CNavItem.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }

package/src/components/nav/CNavLink.tsx

@@ -1,29 +1,14 @@
-import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'react'
+import React, { forwardRef, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
 import { CNavContext } from '../sidebar/CSidebarNav'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
 
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * 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
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
   /**
    * @ignore
    */
@@ -34,8 +19,8 @@ export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   to?: string
 }
 
-export const CNavLink = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement | HTMLLIElement,
+export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
   CNavLinkProps
 >(({ children, className, idx, ...rest }, ref) => {
   const navLinkRef = useRef<HTMLAnchorElement>(null)
@@ -56,8 +41,11 @@ export const CNavLink = forwardRef<
 })
 
 CNavLink.propTypes = {
+  active: PropTypes.bool,
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
   idx: PropTypes.string,
 }
 

package/src/components/nav/CNavTitle.tsx

@@ -1,25 +1,33 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CNavTitleProps extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * 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.
    */
   className?: string
 }
 
-export const CNavTitle = forwardRef<HTMLLIElement, CNavTitleProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <li className={classNames('nav-title', className)} {...rest} ref={ref}>
-        {children}
-      </li>
-    )
-  },
-)
+export const CNavTitle: PolymorphicRefForwardingComponent<'li', CNavTitleProps> = forwardRef<
+  HTMLLIElement,
+  CNavTitleProps
+>(({ children, as: Component = 'li', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('nav-title', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CNavTitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -18,7 +18,7 @@ test('loads and displays CNav component', async () => {
 
 test('CNav customize', async () => {
   const { container } = render(
-    <CNav className="bazinga" component="h3" layout="justified" variant="pills">
+    <CNav className="bazinga" as="h3" layout="justified" variant="pills">
       Test
     </CNav>,
   )

package/src/components/nav/__tests__/CNavItem.spec.tsx

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

package/src/components/nav/__tests__/CNavLink.spec.tsx

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

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