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

package/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap

@@ -8,7 +8,6 @@ exports[`CTable customize 1`] = `
     <table
       class="table align-middle border-primary caption-top table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
     >
-      <tbody />
       <tbody>
         <tr>
           <td>
@@ -26,7 +25,6 @@ exports[`CTable full example test 1`] = `
   <table
     class="table caption-top"
   >
-    <tbody />
     <caption>
       List of users
     </caption>
@@ -194,8 +192,6 @@ exports[`loads and displays CTable component 1`] = `
 <div>
   <table
     class="table"
-  >
-    <tbody />
-  </table>
+  />
 </div>
 `;

package/src/components/table/utils.ts

@@ -11,17 +11,12 @@ export const pretifyName = (name: string) => {
 }
 
 export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object'
-    ? column.label !== undefined
-      ? column.label
-      : pretifyName(column.key)
-    : pretifyName(column)
+  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
   columns
     ? columns.map((column: Column | string) => {
-        if (typeof column === 'object') return column.key
-        else return column
+        return typeof column === 'object' ? column.key : column
       })
     : items && getColumnNamesFromItems(items)
 

package/src/components/tabs/CTabContent.tsx

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

package/src/components/tabs/CTabPane.tsx

@@ -29,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

@@ -166,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))
@@ -333,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']}
@@ -356,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

@@ -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 { 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,7 @@
 import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'
-import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { CConditionalPortal } from '../conditional-portal'
 
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -52,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

@@ -80,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>, {
@@ -120,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/virtual-scroller/CVirtualScroller.tsx

@@ -39,7 +39,7 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
 
       virtualScrollRef.current &&
-        setViewportPadding(parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
+        setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
     })
 
     useEffect(() => {
@@ -65,11 +65,9 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
       onScroll && onScroll(_currentItemIndex)
     }
 
-    const _className = classNames('virtual-scroller', className)
-
     return (
       <div
-        className={_className}
+        className={classNames('virtual-scroller', className)}
         onScroll={(event: UIEvent<HTMLDivElement>) =>
           handleScroll((event.target as HTMLDivElement).scrollTop)
         }
@@ -108,8 +106,8 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
                   node.offsetHeight &&
                   setItemHeight(
                     node.offsetHeight +
-                      parseFloat(getComputedStyle(node).marginTop) +
-                      parseFloat(getComputedStyle(node).marginBottom),
+                      Number.parseFloat(getComputedStyle(node).marginTop) +
+                      Number.parseFloat(getComputedStyle(node).marginBottom),
                   ),
               })
             }

package/src/components/widgets/CWidgetStatsA.tsx

@@ -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/CWidgetStatsD.tsx

@@ -40,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

@@ -25,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,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
 import { CCard, CCardBody, CCardFooter } from '../card'
 
@@ -42,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>