@coreui/react 4.5.2 → 4.7.0

package/src/components/toast/CToast.tsx

@@ -6,13 +6,13 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
-import { Colors, colorPropType } from '../Types'
-
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -114,55 +114,42 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       }
     }
 
-    const _className = classNames(
-      'toast',
-      {
-        fade: animation,
-        [`bg-${color}`]: color,
-        'border-0': color,
-      },
-      className,
-    )
-
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'showing'
-        : state === 'entered'
-        ? 'show'
-        : state === 'exiting'
-        ? 'showing'
-        : 'fade'
-    }
-
     return (
       <Transition
         in={_visible}
         nodeRef={toastRef}
-        onEnter={() => onShow && onShow(index ? index : null)}
-        onExited={() => onClose && onClose(index ? index : null)}
+        onEnter={() => onShow && onShow(index ?? null)}
+        onExited={() => onClose && onClose(index ?? null)}
         timeout={250}
         unmountOnExit
       >
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <CToastContext.Provider value={contextValues}>
-              <div
-                className={classNames(_className, transitionClass)}
-                aria-live="assertive"
-                aria-atomic="true"
-                role="alert"
-                onMouseEnter={() => clearTimeout(timeout.current)}
-                onMouseLeave={() => _autohide()}
-                {...rest}
-                key={key}
-                ref={forkedRef}
-              >
-                {children}
-              </div>
-            </CToastContext.Provider>
-          )
-        }}
+        {(state) => (
+          <CToastContext.Provider value={contextValues}>
+            <div
+              className={classNames(
+                'toast',
+                {
+                  fade: animation,
+                  [`bg-${color}`]: color,
+                  'border-0': color,
+                  'show showing': state === 'entering' || state === 'exiting',
+                  show: state === 'entered',
+                },
+                className,
+              )}
+              aria-live="assertive"
+              aria-atomic="true"
+              role="alert"
+              onMouseEnter={() => clearTimeout(timeout.current)}
+              onMouseLeave={() => _autohide()}
+              {...rest}
+              key={key}
+              ref={forkedRef}
+            >
+              {children}
+            </div>
+          </CToastContext.Provider>
+        )}
       </Transition>
     )
   },

package/src/components/toast/CToastBody.tsx

@@ -11,9 +11,8 @@ export interface CToastBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CToastBody = forwardRef<HTMLDivElement, CToastBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('toast-body', className)
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('toast-body', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/toast/CToastClose.tsx

@@ -1,11 +1,13 @@
 import React, { ElementType, forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CToastContext } from './CToast'
+
+import { CButtonProps } from '../button/CButton'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
-import type { CButtonProps } from '../button/CButton'
+import { CToastContext } from './CToast'
 
 type CombineButtonProps = CCloseButtonProps & CButtonProps
+
 export interface CToastCloseProps extends CombineButtonProps {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.

package/src/components/toast/CToastHeader.tsx

@@ -17,9 +17,8 @@ export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
   ({ children, className, closeButton, ...rest }, ref) => {
-    const _className = classNames('toast-header', className)
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('toast-header', className)} {...rest} ref={ref}>
         {children}
         {closeButton && <CToastClose />}
       </div>

package/src/components/toast/CToaster.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'
 import PropTypes from 'prop-types'
-import { createPortal } from 'react-dom'
 import classNames from 'classnames'
+import { CConditionalPortal } from '../conditional-portal'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -51,32 +52,32 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
       ])
     }
 
-    const _className = classNames(
-      'toaster toast-container p-3',
-      {
-        'position-fixed': placement,
-        'top-0': placement && placement.includes('top'),
-        'top-50 translate-middle-y': placement && placement.includes('middle'),
-        'bottom-0': placement && placement.includes('bottom'),
-        'start-0': placement && placement.includes('start'),
-        'start-50 translate-middle-x': placement && placement.includes('center'),
-        'end-0': placement && placement.includes('end'),
-      },
-      className,
+    return (
+      <CConditionalPortal portal={typeof placement === 'string'}>
+        {toasts.length > 0 || children ? (
+          <div
+            className={classNames(
+              'toaster toast-container p-3',
+              {
+                'position-fixed': placement,
+                'top-0': placement && placement.includes('top'),
+                'top-50 translate-middle-y': placement && placement.includes('middle'),
+                'bottom-0': placement && placement.includes('bottom'),
+                'start-0': placement && placement.includes('start'),
+                'start-50 translate-middle-x': placement && placement.includes('center'),
+                'end-0': placement && placement.includes('end'),
+              },
+              className,
+            )}
+            {...rest}
+            ref={ref}
+          >
+            {children}
+            {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+          </div>
+        ) : null}
+      </CConditionalPortal>
     )
-
-    const toaster = (ref?: React.Ref<HTMLDivElement>) => {
-      return toasts.length > 0 || children ? (
-        <div className={_className} {...rest} ref={ref}>
-          {children}
-          {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
-        </div>
-      ) : null
-    }
-
-    return typeof window !== 'undefined' && placement
-      ? createPortal(toaster(ref), document.body)
-      : toaster(ref)
   },
 )
 

package/src/components/toast/__tests__/CToast.spec.tsx

@@ -32,7 +32,7 @@ test('CToast customize', async () => {
 })
 
 test('CToast click on dismiss button', async () => {
-  jest.useFakeTimers()
+  // jest.useFakeTimers()
   const onClose = jest.fn()
   const { container } = render(
     <CToast
@@ -71,6 +71,7 @@ test('CToast click on dismiss button', async () => {
     fireEvent.click(btn)
   }
   jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(onClose).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toBeNull()
   jest.useRealTimers()

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

@@ -5,72 +5,7 @@ exports[`CToast customize 1`] = `
   <div
     aria-atomic="true"
     aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga showing"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CToast customize 2`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga showing"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CToast customize 3`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga showing"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CToast customize 4`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga showing"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CToast customize 5`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga showing"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CToast customize 6`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga show"
+    class="toast fade bg-warning border-0 show showing bazinga"
     role="alert"
   >
     Test

package/src/components/tooltip/CTooltip.tsx

@@ -1,11 +1,12 @@
 import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -79,16 +80,6 @@ export const CTooltip: FC<CTooltipProps> = ({
     setVisible(visible)
   }, [visible])
 
-  const getTransitionClass = (state: string) => {
-    return state === 'entering'
-      ? 'fade'
-      : state === 'entered'
-      ? 'fade show'
-      : state === 'exiting'
-      ? 'fade'
-      : 'fade'
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
@@ -119,28 +110,27 @@ export const CTooltip: FC<CTooltipProps> = ({
             }}
             unmountOnExit
           >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <div
-                  className={classNames(
-                    `tooltip bs-tooltip-${
-                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                    }`,
-                    className,
-                    transitionClass,
-                  )}
-                  ref={setPopperElement}
-                  role="tooltip"
-                  style={styles.popper}
-                  {...attributes.popper}
-                  {...rest}
-                >
-                  <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
-                  <div className="tooltip-inner">{content}</div>
-                </div>
-              )
-            }}
+            {(state) => (
+              <div
+                className={classNames(
+                  'tooltip',
+                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  'fade',
+                  {
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                ref={setPopperElement}
+                role="tooltip"
+                style={styles.popper}
+                {...attributes.popper}
+                {...rest}
+              >
+                <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div className="tooltip-inner">{content}</div>
+              </div>
+            )}
           </Transition>,
           document.body,
         )}

package/src/components/widgets/CWidgetStatsA.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { CCard, CCardBody } from '../card'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -38,13 +38,15 @@ export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
-    const _className = classNames(
-      { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
-      className,
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard
+        className={classNames(
+          { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
           <div>
             {value && <div className="fs-4 fw-semibold">{value}</div>}

package/src/components/widgets/CWidgetStatsB.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 import { CProgress, CProgressProps } from '../progress/CProgress'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CWidgetStatsBProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/widgets/CWidgetStatsC.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 import { CProgress, CProgressProps } from '../progress/CProgress'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/widgets/CWidgetStatsD.tsx

@@ -2,13 +2,12 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
-import { CCardHeader } from '../card/CCardHeader'
+import { CCard, CCardBody, CCardHeader } from '../card'
 import { CCol } from '../grid/CCol'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 type Value = {
   title?: string | ReactNode
   value?: number | string | ReactNode
@@ -41,17 +40,16 @@ export interface CWidgetStatsDProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
   ({ className, chart, color, icon, values, ...rest }, ref) => {
-    const _className = classNames(className)
-    const classNameHeader = classNames(
-      'position-relative d-flex justify-content-center align-items-center',
-      {
-        [`bg-${color}`]: color,
-      },
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
-        <CCardHeader className={classNameHeader}>
+      <CCard className={className} {...rest} ref={ref}>
+        <CCardHeader
+          className={classNames(
+            'position-relative d-flex justify-content-center align-items-center',
+            {
+              [`bg-${color}`]: color,
+            },
+          )}
+        >
           {icon}
           {chart}
         </CCardHeader>

package/src/components/widgets/CWidgetStatsE.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 
 export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -26,10 +25,8 @@ export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
   ({ chart, className, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={classNames(className)} {...rest} ref={ref}>
         <CCardBody className="text-center">
           {title && (
             <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>

package/src/components/widgets/CWidgetStatsF.tsx

@@ -1,12 +1,10 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { CCard, CCardBody, CCardFooter } from '../card'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
-import { CCardFooter } from '../card/CCardFooter'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -43,10 +41,8 @@ export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
   ({ className, color, footer, icon, padding = true, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={className} {...rest} ref={ref}>
         <CCardBody className={`d-flex align-items-center ${padding === false && 'p-0'}`}>
           <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
           <div>

package/src/{components/Types.tsx → props.ts}

@@ -1,17 +1,6 @@
 import PropTypes from 'prop-types'
 
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-
-export type Colors =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'dark'
-  | 'light'
-  | string
+import type { Placements, Triggers } from './types'
 
 export const colorPropType = PropTypes.oneOfType([
   PropTypes.oneOf([
@@ -27,24 +16,6 @@ export const colorPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type Placements =
-  | 'auto'
-  | 'auto-start'
-  | 'auto-end'
-  | 'top-end'
-  | 'top'
-  | 'top-start'
-  | 'bottom-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'right-start'
-  | 'right'
-  | 'right-end'
-  | 'left-start'
-  | 'left'
-  | 'left-end'
-  | undefined
-
 export const placementPropType = PropTypes.oneOf<Placements>([
   'auto',
   'auto-start',
@@ -63,20 +34,6 @@ export const placementPropType = PropTypes.oneOf<Placements>([
   'left-end',
 ])
 
-export type Shapes =
-  | 'rounded'
-  | 'rounded-top'
-  | 'rounded-end'
-  | 'rounded-bottom'
-  | 'rounded-start'
-  | 'rounded-circle'
-  | 'rounded-pill'
-  | 'rounded-0'
-  | 'rounded-1'
-  | 'rounded-2'
-  | 'rounded-3'
-  | string
-
 export const shapePropType = PropTypes.oneOfType([
   PropTypes.oneOf([
     'rounded',
@@ -94,24 +51,10 @@ export const shapePropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type TextColors =
-  | Colors
-  | 'white'
-  | 'muted'
-  | 'high-emphasis'
-  | 'medium-emphasis'
-  | 'disabled'
-  | 'high-emphasis-inverse'
-  | 'medium-emphasis-inverse'
-  | 'disabled-inverse'
-  | string
-
 export const textColorsPropType = PropTypes.oneOfType([
   colorPropType,
   PropTypes.oneOf(['white', 'muted']),
   PropTypes.string,
 ])
 
-export type Triggers = 'hover' | 'focus' | 'click'
-
 export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])