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

package/src/components/smart-table/CSmartTableHead.tsx

@@ -1,8 +1,6 @@
 import React, { ElementType, forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
-
 import { CFormCheck, CFormInput } from '../form'
 import { CTableHeaderCell, CTableRow } from '../table'
 import { CTableHead, CTableHeadProps } from '../table/CTableHead'
@@ -16,6 +14,8 @@ import {
   getTableHeaderCellStyles,
 } from './utils'
 
+import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
+
 export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilter?: boolean | ColumnFilter
   columnFilterState?: ColumnFilterValue
@@ -93,12 +93,15 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
       if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
         return <span className="opacity-25 float-end me-1">{sortingIcon}</span>
       }
+
       if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
         return <span className="float-end me-1">{sortingIconAscending}</span>
       }
+
       if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
         return <span className="float-end me-1">{sortingIconDescending}</span>
       }
+
       return
     }
 

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -93,6 +93,8 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    *
    * Example item:
    * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
+   *
+   * @since 4.9.0
    */
   items?: Item[]
   /**
@@ -148,6 +150,8 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
   /**
    * Select all callback.
+   *
+   * @since 4.9.0
    */
   onSelectAll?: () => void
   /**
@@ -183,12 +187,16 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    *
    * Can be customized, by passing prop as object with additional options as keys. Available options:
    * - external (Boolean) - Disables automatic selection inside the component.
+   *
+   * @since 4.9.0
    */
   selectAll?: boolean | { external?: boolean }
   /**
    * Array of selected objects, where each object represents one item - row in table.
    *
    * Example item: `{ name: 'John' , age: 12 }`
+   *
+   * @since 4.9.0
    */
   selected?: Item[]
   /**

package/src/components/smart-table/{utils.tsx → utils.ts}

@@ -79,9 +79,8 @@ export const getColumnLabel = (column: Column | string) =>
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
   columns
-    ? columns.map((column: Column) => {
-        if (typeof column === 'object') return column.key
-        else return column
+    ? columns.map((column: Column | string) => {
+        return typeof column === 'object' ? column.key : column
       })
     : getColumnNamesFromItems(items)
 
@@ -132,7 +131,7 @@ export const getTableHeaderCellStyles = (
   if (
     columnSorter &&
     (typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
   ) {
     style['cursor'] = 'pointer'
   }
@@ -157,7 +156,7 @@ export const isSortable = (
     columnSorter &&
     (!columns ||
       typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
     isDataColumn
   )
 }

package/src/components/spinner/CSpinner.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, 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 CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**
@@ -46,15 +47,18 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
     },
     ref,
   ) => {
-    const _className = classNames(
-      `spinner-${variant}`,
-      `text-${color}`,
-      size && `spinner-${variant}-${size}`,
-      className,
-    )
-
     return (
-      <Component className={_className} role="status" {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          `spinner-${variant}`,
+          `text-${color}`,
+          size && `spinner-${variant}-${size}`,
+          className,
+        )}
+        role="status"
+        {...rest}
+        ref={ref}
+      >
         <span className="visually-hidden">{visuallyHiddenLabel}</span>
       </Component>
     )

package/src/components/table/CTable.tsx

@@ -1,17 +1,21 @@
-import React, { forwardRef, TableHTMLAttributes } from 'react'
+import React, { forwardRef, TableHTMLAttributes, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CTableHead, CTableHeadProps } from './CTableHead'
-import { CTableHeaderCell, CTableHeaderCellProps } from './CTableHeaderCell'
+import { CTableHeaderCell } from './CTableHeaderCell'
 import { CTableBody } from './CTableBody'
-import { CTableDataCell, CTableDataCellProps } from './CTableDataCell'
-import { CTableRow, CTableRowProps } from './CTableRow'
+import { CTableDataCell } from './CTableDataCell'
+import { CTableRow } from './CTableRow'
 import { CTableFoot, CTableFootProps } from './CTableFoot'
 import { CTableCaption } from './CTableCaption'
 import { CTableResponsiveWrapper } from './CTableResponsiveWrapper'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+import { getColumnLabel, getColumnNames } from './utils'
+import type { Column, FooterItem, Item } from './types'
+
 export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
   /**
    * Set the vertical aligment.
@@ -123,23 +127,6 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
   tableHeadProps?: CTableHeadProps
 }
 
-export interface Column {
-  label?: string
-  key: string
-  _style?: any
-  _props?: CTableHeaderCellProps
-}
-
-export interface Item {
-  [key: string]: number | string | any
-  _props?: CTableRowProps
-}
-
-export interface FooterItem {
-  label?: string
-  _props?: CTableDataCellProps
-}
-
 export const CTable = forwardRef<HTMLTableElement, CTableProps>(
   (
     {
@@ -166,50 +153,30 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
     },
     ref,
   ) => {
-    const _className = classNames(
-      'table',
-      {
-        [`align-${align}`]: align,
-        [`border-${borderColor}`]: borderColor,
-        [`caption-top`]: captionTop || caption === 'top',
-        'table-bordered': bordered,
-        'table-borderless': borderless,
-        [`table-${color}`]: color,
-        'table-hover': hover,
-        'table-sm': small,
-        'table-striped': striped,
-        'table-striped-columns': stripedColumns,
-      },
-      className,
-    )
-
-    const rawColumnNames = columns
-      ? columns.map((column: Column) => {
-          if (typeof column === 'object') return column.key
-          else return column
-        })
-      : Object.keys((items && items[0]) || {}).filter((el) => el.charAt(0) !== '_')
-
-    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(' ')
-    }
-
-    const label = (column: Column | string) =>
-      typeof column === 'object'
-        ? column.label !== undefined
-          ? column.label
-          : pretifyName(column.key)
-        : pretifyName(column)
+    const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
 
     return (
       <CTableResponsiveWrapper responsive={responsive}>
-        <table className={_className} {...rest} ref={ref}>
+        <table
+          className={classNames(
+            'table',
+            {
+              [`align-${align}`]: align,
+              [`border-${borderColor}`]: borderColor,
+              [`caption-top`]: captionTop || caption === 'top',
+              'table-bordered': bordered,
+              'table-borderless': borderless,
+              [`table-${color}`]: color,
+              'table-hover': hover,
+              'table-sm': small,
+              'table-striped': striped,
+              'table-striped-columns': stripedColumns,
+            },
+            className,
+          )}
+          {...rest}
+          ref={ref}
+        >
           {((caption && caption !== 'top') || captionTop) && (
             <CTableCaption>{caption || captionTop}</CTableCaption>
           )}
@@ -222,7 +189,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
                     {...(column._style && { style: { ...column._style } })}
                     key={index}
                   >
-                    {label(column)}
+                    {getColumnLabel(column)}
                   </CTableHeaderCell>
                 ))}
               </CTableRow>
@@ -232,19 +199,20 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
             <CTableBody>
               {items.map((item: Item, index: number) => (
                 <CTableRow {...(item._props && { ...item._props })} key={index}>
-                  {rawColumnNames.map((colName: string, index: number) => {
-                    return item[colName] ? (
-                      <CTableDataCell
-                        {...(item._cellProps && {
-                          ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                          ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-                        })}
-                        key={index}
-                      >
-                        {item[colName]}
-                      </CTableDataCell>
-                    ) : null
-                  })}
+                  {columnNames &&
+                    columnNames.map((colName: string, index: number) => {
+                      return item[colName] ? (
+                        <CTableDataCell
+                          {...(item._cellProps && {
+                            ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+                            ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+                          })}
+                          key={index}
+                        >
+                          {item[colName]}
+                        </CTableDataCell>
+                      ) : null
+                    })}
                 </CTableRow>
               ))}
             </CTableBody>

package/src/components/table/CTableBody.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 CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**
@@ -19,15 +20,19 @@ export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement>
 
 export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <tbody className={_className ? _className : undefined} {...rest} ref={ref}>
+      <tbody
+        className={
+          classNames(
+            {
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </tbody>
     )

package/src/components/table/CTableDataCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, TdHTMLAttributes, 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 CTableDataCellProps
   extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
@@ -33,19 +34,23 @@ export interface CTableDataCellProps
 
 export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(
   ({ children, active, align, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`align-${align}`]: align,
-        'table-active': active,
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     const Component = rest.scope ? 'th' : 'td'
 
     return (
-      <Component className={_className ? _className : undefined} {...rest} ref={ref}>
+      <Component
+        className={
+          classNames(
+            {
+              [`align-${align}`]: align,
+              'table-active': active,
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

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>
     )