@coreui/react 4.6.0 → 4.7.0

package/src/components/table/CTableFoot.tsx

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes } from 'react'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**
@@ -19,15 +20,19 @@ export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement>
 
 export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <tfoot className={_className ? _className : undefined} {...rest} ref={ref}>
+      <tfoot
+        className={
+          classNames(
+            {
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </tfoot>
     )

package/src/components/table/CTableHead.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**
@@ -19,15 +20,19 @@ export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement>
 
 export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <thead className={_className ? _className : undefined} {...rest} ref={ref}>
+      <thead
+        className={
+          classNames(
+            {
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </thead>
     )

package/src/components/table/CTableHeaderCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   /**
@@ -19,15 +20,19 @@ export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellEle
 
 export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCellProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <th className={_className ? _className : undefined} {...rest} ref={ref}>
+      <th
+        className={
+          classNames(
+            {
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </th>
     )

package/src/components/table/CTableResponsiveWrapper.tsx

@@ -2,7 +2,6 @@ import React, { FC, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 export interface CTableResponsiveWrapperProps extends HTMLAttributes<HTMLDivElement> {
-  children: any
   /**
    * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
    */
@@ -24,12 +23,12 @@ export const CTableResponsiveWrapper: FC<CTableResponsiveWrapperProps> = ({
       {children}
     </div>
   ) : (
-    children
+    <>{children}</>
   )
 }
 
 CTableResponsiveWrapper.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
   responsive: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),

package/src/components/table/CTableRow.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -27,17 +28,21 @@ export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
 
 export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
   ({ children, active, align, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`align-${align}`]: align,
-        'table-active': active,
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <tr className={_className ? _className : undefined} {...rest} ref={ref}>
+      <tr
+        className={
+          classNames(
+            {
+              [`align-${align}`]: align,
+              'table-active': active,
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </tr>
     )

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/types.ts

@@ -0,0 +1,20 @@
+import { CTableDataCellProps } from '../table/CTableDataCell'
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
+import { CTableRowProps } from '../table/CTableRow'
+
+export type Column = {
+  label?: string
+  key: string
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
+export type FooterItem = {
+  label?: string
+  _props?: CTableDataCellProps
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  _props?: CTableRowProps
+}

package/src/components/table/utils.ts

@@ -0,0 +1,24 @@
+import type { Column, Item } from './types'
+
+export const pretifyName = (name: string) => {
+  return name
+    .replace(/[-_.]/g, ' ')
+    .replace(/ +/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export const getColumnLabel = (column: Column | string) =>
+  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) => {
+        return typeof column === 'object' ? column.key : column
+      })
+    : items && getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')

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

@@ -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/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