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

package/src/components/table/CTableFoot.tsx

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

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

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

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

@@ -60,6 +60,12 @@ export interface CTimePickerProps
    * Specifies a short hint that is visible in the input.
    */
   placeholder?: string
+  /**
+   * When present, it specifies that time must be filled out before submitting the form.
+   *
+   * @since 4.10.0
+   */
+  required?: boolean
   /**
    * Show seconds.
    *
@@ -102,6 +108,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       onHide,
       onShow,
       placeholder = 'Select time',
+      required,
       seconds = true,
       size,
       text,
@@ -166,18 +173,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))
@@ -195,6 +202,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           }
           placeholder={placeholder}
           readOnly={inputReadOnly}
+          required={required}
           ref={inputRef}
         />
         {(indicator || cleaner) && (
@@ -333,15 +341,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 +355,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}
@@ -399,6 +405,7 @@ CTimePicker.propTypes = {
   className: PropTypes.string,
   locale: PropTypes.string,
   onTimeChange: PropTypes.func,
+  required: PropTypes.bool,
   seconds: PropTypes.bool,
   time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),

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