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

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.1
+   */
+  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,
 }

package/src/components/sidebar/CSidebarNav.tsx

@@ -1,8 +1,24 @@
-import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
+import React, {
+  createContext,
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CSidebarNavProps extends HTMLAttributes<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.
    */
@@ -16,33 +32,61 @@ interface ContextProps {
 
 export const CNavContext = createContext({} as ContextProps)
 
-export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
-  ({ children, className, ...rest }, ref) => {
-    const [visibleGroup, setVisibleGroup] = useState('')
-    const CNavContextValues = {
-      visibleGroup,
-      setVisibleGroup,
+const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
+  return React.Children.map(children, (child: ReactNode, index: number) => {
+    if (
+      !React.isValidElement(child) ||
+      // @ts-expect-error the `children` exist in each component. TODO: resolve
+      (child.type.displayName !== 'CNavGroup' &&
+        // @ts-expect-error the `children` exist in each component. TODO: resolve
+        child.type.displayName !== 'CNavLink' &&
+        // @ts-expect-error the `children` exist in each component. TODO: resolve
+        child.type.displayName !== 'CNavItem')
+    ) {
+      return child
     }
 
-    return (
-      <ul className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
-        <CNavContext.Provider value={CNavContextValues}>
-          {React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child)) {
-              return React.cloneElement(child as React.ReactElement<any>, {
-                key: index,
-                idx: `${index}`,
-              })
-            }
-            return
-          })}
-        </CNavContext.Provider>
-      </ul>
-    )
-  },
-)
+    const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
+
+    if (child.props && child.props.children) {
+      return React.cloneElement(child as ReactElement<any>, {
+        idx: _id,
+        children: recursiveClone(
+          child.props.children,
+          _id,
+          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
+          child.type.displayName === 'CNavItem' ? false : true,
+        ),
+      })
+    }
+
+    return React.cloneElement(child as ReactElement<any>, {
+      idx: _id,
+    })
+  })
+}
+
+export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
+  HTMLUListElement,
+  CSidebarNavProps
+>(({ children, as: Component = 'ul', className, ...rest }, ref) => {
+  const [visibleGroup, setVisibleGroup] = useState('')
+  const CNavContextValues = {
+    visibleGroup,
+    setVisibleGroup,
+  }
+
+  return (
+    <CNavContext.Provider value={CNavContextValues}>
+      <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
+        {recursiveClone(children)}
+      </Component>
+    </CNavContext.Provider>
+  )
+})
 
 CSidebarNav.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`CSidebar customize hide 1`] = `
 exports[`CSidebar customize show 1`] = `
 <div>
   <div
-    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable bazinga"
+    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable show bazinga"
   >
     Test
   </div>

package/src/components/spinner/CSpinner.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 CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * 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.
    */
@@ -16,10 +21,6 @@ export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanE
    * @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 small.
    */
@@ -34,12 +35,15 @@ export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanE
   visuallyHiddenLabel?: string
 }
 
-export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerProps>(
+export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CSpinnerProps
+>(
   (
     {
+      as: Component = 'div',
       className,
       color,
-      component: Component = 'div',
       size,
       variant = 'border',
       visuallyHiddenLabel = 'Loading...',
@@ -68,9 +72,9 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
 )
 
 CSpinner.propTypes = {
+  as: PropTypes.string,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.string,
   size: PropTypes.oneOf(['sm']),
   variant: PropTypes.oneOf(['border', 'grow']),
   visuallyHiddenLabel: PropTypes.string,

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CSpinner component', async () => {
 
 test('CSpinner customize', async () => {
   const { container } = render(
-    <CSpinner className="bazinga" color="warning" component="h3" size="sm" variant="grow">
+    <CSpinner className="bazinga" color="warning" as="h3" size="sm" variant="grow">
       Test
     </CSpinner>,
   )

package/src/components/toast/CToastClose.tsx

@@ -6,17 +6,19 @@ import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
 import { CToastContext } from './CToast'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 type CombineButtonProps = CCloseButtonProps & CButtonProps
 
-export interface CToastCloseProps extends CombineButtonProps {
+export interface CToastCloseProps extends Omit<CombineButtonProps, 'as'> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  component?: string | ElementType
+  as?: string | ElementType
 }
 
-export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
-  ({ children, component: Component, ...rest }, ref) => {
+export const CToastClose: PolymorphicRefForwardingComponent<'button', CToastCloseProps> =
+  forwardRef<HTMLButtonElement, CToastCloseProps>(({ children, as: Component, ...rest }, ref) => {
     const { setVisible } = useContext(CToastContext)
     return Component ? (
       <Component onClick={() => setVisible(false)} {...rest} ref={ref}>
@@ -25,12 +27,11 @@ export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
     ) : (
       <CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
     )
-  },
-)
+  })
 
 CToastClose.propTypes = {
   ...CCloseButton.propTypes,
-  component: PropTypes.elementType,
+  as: PropTypes.elementType,
 }
 
 CToastClose.displayName = 'CToastClose'

package/src/components/toast/CToaster.tsx

@@ -57,7 +57,7 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
         {toasts.length > 0 || children ? (
           <div
             className={classNames(
-              'toaster toast-container p-3',
+              'toaster toast-container',
               {
                 'position-fixed': placement,
                 'top-0': placement && placement.includes('top'),

package/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CToaster customize 1`] = `
 <div>
   <div
-    class="toaster toast-container p-3 bazinga"
+    class="toaster toast-container bazinga"
   />
   <button
     class="btn btn-primary"
@@ -17,7 +17,7 @@ exports[`CToaster customize 1`] = `
 exports[`loads and displays CToaster component 1`] = `
 <div>
   <div
-    class="toaster toast-container p-3"
+    class="toaster toast-container"
   >
     Test
   </div>

package/src/components/tooltip/CTooltip.tsx

@@ -90,9 +90,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     },
     ref,
   ) => {
-    const tooltipRef = useRef(null)
+    const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, tooltipRef)
+    const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
     const [_visible, setVisible] = useState(visible)
@@ -127,16 +128,6 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       setVisible(visible)
     }, [visible])
 
-    useEffect(() => {
-      if (_visible && togglerRef.current && tooltipRef.current) {
-        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-      }
-
-      return () => {
-        destroyPopper()
-      }
-    }, [_visible])
-
     const toggleVisible = (visible: boolean) => {
       if (visible) {
         setTimeout(() => setVisible(true), _delay.show)
@@ -149,6 +140,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
+          ...(_visible && {
+            'aria-describedby': uID.current,
+          }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
             onClick: () => toggleVisible(!_visible),
@@ -167,8 +161,22 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             in={_visible}
             mountOnEnter
             nodeRef={tooltipRef}
-            onEnter={onShow}
+            onEnter={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+              }
+
+              onShow
+            }}
+            onEntering={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                tooltipRef.current.style.display = 'initial'
+              }
+            }}
             onExit={onHide}
+            onExited={() => {
+              destroyPopper()
+            }}
             timeout={{
               enter: 0,
               exit: tooltipRef.current
@@ -188,8 +196,12 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
                   },
                   className,
                 )}
+                id={uID.current}
                 ref={forkedRef}
                 role="tooltip"
+                style={{
+                  display: 'none',
+                }}
                 {...rest}
               >
                 <div className="tooltip-arrow"></div>

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CTooltip, CLink } from '../../../index'
 
@@ -18,24 +17,20 @@ afterEach(() => {
 })
 
 test('loads and displays CTooltip component', async () => {
-  ReactDOM.render(
+  const { container } = render(
     <CTooltip content="content">
       <CLink>Test</CLink>
     </CTooltip>,
-    container,
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CTooltip customize', async () => {
-  act(() => {
-    ReactDOM.render(
-      <CTooltip trigger="hover" placement="right" content="content">
-        <CLink className="link">Test</CLink>
-      </CTooltip>,
-      container,
-    )
-  })
+  const { container } = render(
+    <CTooltip trigger="hover" placement="right" content="content">
+      <CLink className="link">Test</CLink>
+    </CTooltip>,
+  )
   const link = document.querySelector('.link')
   act(() => {
     if (link !== null) {

package/src/components/widgets/CWidgetStatsA.tsx

@@ -40,10 +40,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
     return (
       <CCard
-        className={classNames(
-          { [`bg-${color}`]: color, 'text-white': color },
-          className,
-        )}
+        className={classNames({ [`bg-${color}`]: color, 'text-white': color }, className)}
         {...rest}
         ref={ref}
       >

package/src/components/widgets/CWidgetStatsC.tsx

@@ -6,6 +6,7 @@ import { CProgress, CProgressProps } from '../progress/CProgress'
 
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
+import classNames from 'classnames'
 
 export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -53,7 +54,16 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
         ref={ref}
       >
         <CCardBody>
-          {icon && <div className="text-end mb-4">{icon}</div>}
+          {icon && (
+            <div
+              className={classNames(
+                'text-end mb-4',
+                inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
+              )}
+            >
+              {icon}
+            </div>
+          )}
           {value && <div className="fs-4 fw-semibold">{value}</div>}
           {title && (
             <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -41,9 +41,7 @@ test('CWidgetStatsD customize', async () => {
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveClass('fw-semibold')
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
-        'text-body-secondary',
-      )
+      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-body-secondary')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')
     }

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+import { PolymorphicRefForwardingComponent } from './polymorphicComponent'
+
+export { PolymorphicRefForwardingComponent }

package/src/helpers/polymorphicComponent.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ElementType, PropsWithChildren, ReactNode } from 'react'
+
+export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>
+
+export type ReplaceProps<Inner extends ElementType, P> = Omit<ComponentPropsWithRef<Inner>, P> & P
+
+export interface AsProp<As extends ElementType = ElementType> {
+  as?: As
+}
+
+export interface Props<As extends ElementType = ElementType> extends AsProp<As> {}
+
+export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
+  <As extends ElementType = TInitial>(
+    props: PropsWithChildren<ReplaceProps<As, Props<As> & P>>,
+    context?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  ): ReactNode | null
+  propTypes?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  defaultProps?: Partial<P>
+  displayName?: string
+}

package/src/utils/getTransitionDurationFromElement.ts

@@ -21,4 +21,4 @@ const getTransitionDurationFromElement = (element: HTMLElement) => {
   return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
 }
 
-export default getTransitionDurationFromElement
+export default getTransitionDurationFromElement