@coreui/react-pro 4.11.3 → 4.12.0-beta.0

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

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { cilArrowBottom, cilArrowTop, cilSwapVertical } from '@coreui/icons'
+import { cilArrowBottom, cilArrowTop, cilFilterX, cilSwapVertical } from '@coreui/icons'
 import CIcon from '@coreui/icons-react'
 
 import { CElementCover } from '../element-cover'
@@ -9,15 +9,13 @@ import { CFormInput, CFormLabel, CFormSelect } from '../form'
 import { CSmartPagination } from '../smart-pagination'
 import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table'
 
-import { CSmartTableProps } from './CSmartTableInterface'
-import type { ColumnFilterValue, FooterItem, Item, SorterValue } from './types'
-
 import { CSmartTableBody } from './CSmartTableBody'
-import { CSmartTableCleaner } from './CSmartTableCleaner'
 import { CSmartTableHead } from './CSmartTableHead'
+import { CSmartTableProps } from './CSmartTableInterface'
 
 import { isObjectInArray } from '../../utils'
 
+import type { ColumnFilterValue, FooterItem, Item, SorterValue } from './types'
 import {
   filterColumns,
   filterTable,
@@ -99,6 +97,8 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         setActivePage(1)
       }
 
+      const selected: Item[] = []
+
       items &&
         items.forEach((item: Item) => {
           if (item._selected) {
@@ -106,12 +106,17 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
             delete _item['_cellProps']
             delete _item['_props']
             delete _item['_selected']
-            setSelected([..._selected, _item])
+            selected.push(_item)
           }
         })
 
+      if (selected.length > 0) {
+        setSelected([..._selected, ...selected])
+      }
+
       if (Array.isArray(items)) {
         setItems(items)
+        // eslint-disable-next-line unicorn/explicit-length-check
         setItemsNumber(itemsNumber || items.length)
       }
     }, [JSON.stringify(items)])
@@ -351,17 +356,24 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                   </div>
                   <div className="col-auto p-0">
                     {cleaner && (
-                      <CSmartTableCleaner
-                        isFiltered={
+                      <button
+                        type="button"
+                        className="btn btn-transparent"
+                        {...(!(
                           tableFilterState ||
                           sorterState?.column ||
                           Object.values(columnFilterState).join('')
-                        }
+                        ) && {
+                          disabled: true,
+                          tabIndex: -1,
+                        })}
                         onClick={() => handleClean()}
                         onKeyDown={(event) => {
                           if (event.key === 'Enter') handleClean()
                         }}
-                      />
+                      >
+                        <CIcon width={18} icon={cilFilterX} />
+                      </button>
                     )}
                   </div>
                 </>

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

@@ -5,10 +5,9 @@ import { CTableBody, CTableBodyProps } from '../table/CTableBody'
 import { CFormCheck } from '../form'
 import { CTableDataCell, CTableRow } from '../table'
 
-import type { Item, ScopedColumns } from './types'
-
 import { isObjectInArray } from '../../utils'
 
+import type { Item, ScopedColumns } from './types'
 import { getClickedColumnName, getTableDataCellProps } from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
@@ -95,10 +94,9 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                             key: index,
                           },
                         )) ||
-                      // eslint-disable-next-line unicorn/no-typeof-undefined
-                      (typeof item[colName] !== 'undefined' && (
+                      (item[colName] !== undefined && (
                         <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
-                          {String(item[colName])}
+                          {item[colName]}
                         </CTableDataCell>
                       ))
                     )

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

@@ -13,6 +13,7 @@ import { CFormCheck, CFormInput } from '../form'
 import { CTableHeaderCell, CTableRow } from '../table'
 import { CTableHead, CTableHeadProps } from '../table/CTableHead'
 
+import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
 import {
   getColumnKey,
   getColumnLabel,
@@ -24,8 +25,6 @@ import {
   getTableHeaderCellStyles,
 } from './utils'
 
-import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
-
 export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilter?: boolean | ColumnFilter
   columnFilterState?: ColumnFilterValue
@@ -155,9 +154,9 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                 <div className="d-inline">{getColumnLabel(column)}</div>
                 {columnSorter &&
                   (typeof column === 'object'
-                    ? typeof column.sorter === 'undefined'
+                    ? (column.sorter === undefined
                       ? true
-                      : column.sorter
+                      : column.sorter)
                     : true) &&
                   columnSorterIcon(column)}
               </CTableHeaderCell>
@@ -172,9 +171,9 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                 <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
                   {(
                     typeof column === 'object'
-                      ? column.filter === undefined
+                      ? (column.filter === undefined
                         ? true
-                        : column.filter
+                        : column.filter)
                       : true
                   ) ? (
                     typeof column !== 'string' && typeof column.filter === 'function' ? (

package/src/components/smart-table/__tests__/CSmartTable.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { CBadge, CSmartTable } from '../../../index'
-import { Item } from '../CSmartTableInterface'
+import { Item } from '../types'
 
 test('loads and displays CSpinner component', async () => {
   const columns = [