@coreui/react-pro 4.9.0-next.0 → 4.9.0

package/src/components/tabs/CTabPane.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
 import { useForkedRef } from '../../hooks'
+
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -28,28 +29,25 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
     const tabPaneRef = useRef()
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entered' && 'show'
-    }
-
-    const _className = classNames(
-      'tab-pane',
-      'fade',
-      {
-        active: visible,
-      },
-      className,
-    )
     return (
       <Transition in={visible} nodeRef={tabPaneRef} onEnter={onShow} onExit={onHide} timeout={150}>
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef}>
-              {children}
-            </div>
-          )
-        }}
+        {(state) => (
+          <div
+            className={classNames(
+              'tab-pane',
+              'fade',
+              {
+                active: visible,
+                show: state === 'entered',
+              },
+              className,
+            )}
+            {...rest}
+            ref={forkedRef}
+          >
+            {children}
+          </div>
+        )}
       </Transition>
     )
   },

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -18,7 +18,6 @@ test('CTabPane customize', async () => {
 })
 
 test('CTabContent use case test', async () => {
-  jest.useFakeTimers()
   const { rerender } = render(
     <CTabContent>
       <CTabPane visible={false}>Test</CTabPane>
@@ -33,7 +32,7 @@ test('CTabContent use case test', async () => {
   )
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('active')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('active')
   rerender(
@@ -43,9 +42,7 @@ test('CTabContent use case test', async () => {
   )
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  jest.runAllTimers()
-  jest.useRealTimers()
 })

package/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CTabPane customize 1`] = `
 <div>
   <div
-    class="tab-pane fade active bazinga show"
+    class="tab-pane fade active show bazinga"
   >
     Test
   </div>

package/src/components/time-picker/CTimePicker.tsx

@@ -127,15 +127,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       hour12: false,
     })
 
-    useEffect(() => {
-      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
-    }, [date])
-
     useEffect(() => {
       setDate(convertTimeToDate(time))
     }, [time])
 
     useEffect(() => {
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {
@@ -168,18 +166,18 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
       if (set === 'hours') {
         if (localizedTimePartials && localizedTimePartials.hour12) {
-          _date.setHours(convert12hTo24h(_ampm, parseInt(value)))
+          _date.setHours(convert12hTo24h(_ampm, Number.parseInt(value)))
         } else {
-          _date.setHours(parseInt(value))
+          _date.setHours(Number.parseInt(value))
         }
       }
 
       if (set === 'minutes') {
-        _date.setMinutes(parseInt(value))
+        _date.setMinutes(Number.parseInt(value))
       }
 
       if (set === 'seconds') {
-        _date.setSeconds(parseInt(value))
+        _date.setSeconds(Number.parseInt(value))
       }
 
       setDate(new Date(_date))
@@ -335,15 +333,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       </>
     )
 
-    const _className = classNames(
-      'time-picker',
-      {
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -358,7 +347,14 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         valid={valid}
       >
         <CPicker
-          className={_className}
+          className={classNames(
+            'time-picker',
+            {
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
           container={container}
           disabled={disabled}
           footer={footer}

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 { Colors, colorPropType } from '../Types'
+import { Transition } from 'react-transition-group'
 
 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,
         )}