@coreui/react-pro 4.1.0 → 4.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.0",
+  "version": "4.1.4",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,26 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@coreui/icons-pro": "^2.0.3",
+    "@coreui/icons-react": "^2.0.0",
+    "@popperjs/core": "^2.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.60.1",
+    "rollup": "^2.67.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/Types.tsx

@@ -133,6 +133,6 @@ export const textColorsPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type Triggers = 'hover' | 'focus' | 'click'
+export type Triggers = 'hover' | 'focus' | 'click' | 'click-init'
 
-export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])
+export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click', 'click-init'])

package/src/components/dropdown/CDropdown.tsx

@@ -138,12 +138,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     useEffect(() => {
       _visible &&
         setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
+          window.addEventListener('mouseup', handleClickOutside)
           window.addEventListener('keyup', handleKeyup)
         })
 
       return () => {
-        window.removeEventListener('click', handleClickOutside)
+        window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
       }
     }, [_visible])

package/src/components/dropdown/CDropdownToggleCustom.tsx

@@ -0,0 +1,81 @@
+import React, { FC, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Reference } from 'react-popper'
+
+import { Triggers, triggerPropType } from '../Types'
+
+import { CDropdownContext } from './CDropdown'
+
+export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   *
+   * @type 'hover' | 'focus' | 'click'
+   */
+  trigger?: Triggers | Triggers[]
+}
+
+export const CDropdownToggleCustom: FC<CDropdownToggleCustomProps> = ({
+  children,
+  className,
+  disabled,
+  trigger = 'click',
+  ...rest
+}) => {
+  const { popper, visible, setVisible } = useContext(CDropdownContext)
+  const _className = classNames(className)
+
+  const triggers = {
+    ...((trigger === 'click' || trigger.includes('click')) &&
+      !disabled && {
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          event.preventDefault()
+          setVisible(!visible)
+        },
+      }),
+    ...((trigger === 'click-init' || trigger.includes('click-init')) &&
+      !disabled && {
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          event.preventDefault()
+          setVisible(true)
+        },
+      }),
+    ...((trigger === 'focus' || trigger.includes('focus')) &&
+      !disabled && {
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+      }),
+  }
+
+  const togglerProps = {
+    className: _className,
+    'aria-expanded': visible,
+    ...triggers,
+  }
+
+  // We use any because Toggler can be `a` as well as `button`.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Toggler = (ref?: React.Ref<any>) => {
+    return (
+      <div {...togglerProps} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  }
+
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+}
+
+CDropdownToggleCustom.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  trigger: triggerPropType,
+}
+
+CDropdownToggleCustom.displayName = 'CDropdownToggleCustom'

package/src/components/modal/CModal.tsx

@@ -72,6 +72,10 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * Remove animation to create modal that simply appear rather than fade in to view.
    */
   transition?: boolean
+  /*
+   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false
+   */
+  unmountOnClose?: boolean
   /**
    * Toggle the visibility of modal component.
    */
@@ -102,11 +106,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       scrollable,
       size,
       transition = true,
+      unmountOnClose = true,
       visible,
     },
     ref,
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -121,6 +127,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setVisible,
     }
 
+    useEffect(() => {
+      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
+      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+
+      return () => {
+        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
+        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+      }
+    }, [_visible])
+
     const handleDismiss = () => {
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
@@ -167,6 +183,15 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
+    const handleClickOutside = (event: Event) => {
+      if (
+        modalContentRef.current &&
+        !modalContentRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleDismiss()
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event) => {
         if (event.key === 'Escape' && keyboard) {
@@ -190,9 +215,8 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               fullscreen={fullscreen}
               scrollable={scrollable}
               size={size}
-              onClick={(event) => event.stopPropagation()}
             >
-              <CModalContent>{children}</CModalContent>
+              <CModalContent ref={modalContentRef}>{children}</CModalContent>
             </CModalDialog>
           </div>
         </CModalContext.Provider>
@@ -201,23 +225,21 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     return (
       <>
-        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
-          <Transition
-            in={_visible}
-            mountOnEnter
-            onEnter={onShow}
-            onExit={onClose}
-            unmountOnExit
-            timeout={!transition ? 0 : duration}
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return typeof window !== 'undefined' && portal
-                ? createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass)
-            }}
-          </Transition>
-        </div>
+        <Transition
+          in={_visible}
+          mountOnEnter
+          onEnter={onShow}
+          onExit={onClose}
+          unmountOnExit={unmountOnClose}
+          timeout={!transition ? 0 : duration}
+        >
+          {(state) => {
+            const transitionClass = getTransitionClass(state)
+            return typeof window !== 'undefined' && portal
+              ? createPortal(modal(forkedRef, transitionClass), document.body)
+              : modal(forkedRef, transitionClass)
+          }}
+        </Transition>
         {typeof window !== 'undefined' && portal
           ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
           : backdrop && <CBackdrop visible={_visible} />}
@@ -244,6 +266,7 @@ CModal.propTypes = {
   scrollable: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg', 'xl']),
   transition: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
   visible: PropTypes.bool,
 }
 

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -36,7 +36,7 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyDown(modal, {
+    fireEvent.keyUp(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,

package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CModal customize 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`CModal customize 1`] = `<div />`;
 
-exports[`loads and displays CModal component 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`loads and displays CModal component 1`] = `<div />`;

package/src/components/popover/CPopover.tsx

@@ -13,7 +13,7 @@ export interface CPopoverProps {
   /**
    * Content node for your component.
    */
-  content: ReactNode
+  content: ReactNode | string
   /**
    * Offset of the popover relative to its target.
    */
@@ -29,7 +29,7 @@ export interface CPopoverProps {
   /**
    * Title node for your component.
    */
-  title?: ReactNode
+  title?: ReactNode | string
   /**
    * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
    *
@@ -147,12 +147,12 @@ export const CPopover: FC<CPopoverProps> = ({
 
 CPopover.propTypes = {
   children: PropTypes.any,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }

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

@@ -1,7 +1,15 @@
-import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ChangeEvent, forwardRef, useEffect, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { ColumnFilterValue, CSmartTableProps, Item, SorterValue } from './CSmartTableInterface'
+import { cilArrowBottom, cilArrowTop, cilSwapVertical } from '@coreui/icons-pro'
+
+import {
+  ColumnFilterValue,
+  CSmartTableProps,
+  Item,
+  ItemInternal,
+  SorterValue,
+} from './CSmartTableInterface'
 
 import { CSmartPagination } from '../pagination/CSmartPagination'
 import { CElementCover } from '../element-cover/CElementCover'
@@ -49,36 +57,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       scopedColumns,
       selectable,
       sorterValue,
-      sortingIcon = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372" class="ci-primary"></polygon>',
-          ]}
-          key="csv"
-        />
-      ),
-      sortingIconAscending = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625" class="ci-primary"></polygon>',
-          ]}
-          key="cat"
-        />
-      ),
-      sortingIconDescending = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75" class="ci-primary"></polygon>',
-          ]}
-          key="cab"
-        />
-      ),
+      sortingIcon = <CIcon width={18} icon={cilSwapVertical} key="csv" />,
+      sortingIconAscending = <CIcon width={18} icon={cilArrowTop} key="cat" />,
+      sortingIconDescending = <CIcon width={18} icon={cilArrowBottom} key="cab" />,
       tableBodyProps,
       tableFootProps,
       tableFilter,
@@ -92,45 +73,40 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     ref,
   ) => {
     // instance data
-    const compData = useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current
-
-    const previousSorterValue = useRef<SorterValue>()
-    const previousItemsValue = useRef<Item[]>()
-
     const [_activePage, setActivePage] = useState<number>(activePage)
-    const [_items, setItems] = useState<Item[]>([])
+    const [_items, setItems] = useState<ItemInternal[]>([])
     const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
-    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
-      columnFilterValue ? columnFilterValue : {},
-    )
+    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>({})
     const [selectedAll, setSelectedAll] = useState<boolean | string>()
-    const [sorterState, setSorterState] = useState<SorterValue>(previousSorterValue.current || {})
+    const [sorterState, setSorterState] = useState<SorterValue>({})
     const [tableFilterState, setTableFilterState] = useState<string>(
       tableFilterValue ? tableFilterValue : '',
     )
 
+    // watch
     useMemo(() => {
-      if (JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue)) {
-        previousSorterValue.current = sorterValue
-        setSorterState({ ...sorterValue })
+      if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+        setActivePage(1)
       }
-    }, [sorterValue])
+
+      // Create the internal array of items
+      Array.isArray(items) &&
+        setItems(
+          items?.map((item: Item, index: number) => {
+            return { ...item, _id: index }
+          }),
+        )
+    }, [JSON.stringify(items)])
 
     useMemo(() => {
-      if (JSON.stringify(previousItemsValue.current) !== JSON.stringify(items)) {
-        if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
-          setActivePage(1)
-        }
-        previousItemsValue.current = items
-
-        Array.isArray(items) &&
-          setItems(
-            items?.map((item: Item, index: number) => {
-              return { ...item, _id: index }
-            }),
-          )
-      }
-    }, [items])
+      columnFilterValue && setColumnFilterState(columnFilterValue)
+    }, [JSON.stringify(columnFilterValue)])
+
+    useMemo(() => {
+      setSorterState({ ...sorterValue })
+    }, [JSON.stringify(sorterValue)])
+
+    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
 
     // functions
 
@@ -219,17 +195,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const itemsDataColumns = rawColumnNames.filter((name) => genCols.includes(name))
 
     // variables
-
-    useMemo(() => {
-      compData.columnFiltered++
-    }, [
-      JSON.stringify(columnFilter),
-      JSON.stringify(columnFilterState),
-      itemsDataColumns.join(''),
-      compData.changeItems,
-    ])
-
-    const columnFiltered: Item[] = useMemo(() => {
+    const filteredColumns: ItemInternal[] = useMemo(() => {
       let items = _items
       if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
         return items
@@ -243,10 +209,10 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         }
       })
       return items
-    }, [compData.columnFiltered, _items])
+    }, [JSON.stringify(columnFilterState), JSON.stringify(_items)])
 
-    const tableFiltered: Item[] = useMemo(() => {
-      let items = columnFiltered
+    const filteredTable: ItemInternal[] = useMemo(() => {
+      let items = filteredColumns
       if (
         !tableFilterState ||
         (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
@@ -259,26 +225,20 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
       })
       return items
-    }, [
-      compData.columnFiltered,
-      tableFilterState,
-      JSON.stringify(tableFilter),
-      JSON.stringify(columnFiltered),
-    ])
+    }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)])
 
-    const sortedItems: Item[] = useMemo(() => {
+    const sortedItems: ItemInternal[] = useMemo(() => {
       const col = sorterState?.column
       if (
         !col ||
         !itemsDataColumns.includes(col) ||
         (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
       ) {
-        return tableFiltered
+        return filteredTable
       }
-      //if values in column are to be sorted by numeric value they all have to be type number
-      // const flip = sorterState.asc ? 1 : -1
+
       const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-      const sorted = tableFiltered.slice().sort((item, item2) => {
+      const sorted = filteredTable.slice().sort((item, item2) => {
         const value = item[col]
         const value2 = item2[col]
         const a = typeof value === 'number' ? value : String(value).toLowerCase()
@@ -286,18 +246,24 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return a > b ? 1 * flip : b > a ? -1 * flip : 0
       })
       return sorted
-    }, [JSON.stringify(tableFiltered), JSON.stringify(sorterState), JSON.stringify(columnSorter)])
+    }, [
+      JSON.stringify(filteredTable),
+      JSON.stringify(sorterState),
+      JSON.stringify(columnSorter),
+      JSON.stringify(filteredColumns),
+      JSON.stringify(_items),
+    ])
 
     const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
 
     const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0
 
-    const itemsOnActivePage: Item[] = sortedItems.slice(
+    const itemsOnActivePage: ItemInternal[] = sortedItems.slice(
       firstItemOnActivePageIndex,
       firstItemOnActivePageIndex + _itemsPerPage,
     )
 
-    const currentItems: Item[] = _activePage ? itemsOnActivePage : sortedItems
+    const currentItems: ItemInternal[] = _activePage ? itemsOnActivePage : sortedItems
 
     const isFiltered: string =
       tableFilterState || sorterState?.column || Object.values(columnFilterState).join('')
@@ -326,21 +292,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }, [tableFilterState])
 
     useEffect(() => {
-      !compData.firstRun && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
+      onFilteredItemsChange && onFilteredItemsChange(sortedItems)
     }, [JSON.stringify(sortedItems)])
 
-    // watch
-    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
-    useMemo(
-      () =>
-        JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue) &&
-        setSorterState({ ...sorterValue }),
-      [sorterValue],
-    )
-    useMemo(() => setColumnFilterState({ ...columnFilterValue }), [columnFilterValue])
-
-    compData.firstRun = false
-
     const handleRowChecked = (id: number, value: boolean) => {
       const newArr = [..._items]
       newArr[id]._selected = value
@@ -350,7 +304,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const handleSelectAllChecked = () => {
       if (selectedAll === true) {
         setItems(
-          _items.map((item: Item) => {
+          _items.map((item: ItemInternal) => {
             return { ...item, _selected: false }
           }),
         )
@@ -358,7 +312,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
 
       setItems(
-        _items.map((item: Item) => {
+        _items.map((item: ItemInternal) => {
           return { ...item, _selected: true }
         }),
       )

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

@@ -7,15 +7,20 @@ import { CTableDataCell } from '../table/CTableDataCell'
 
 import { CFormCheck } from '../form/CFormCheck'
 
-import { Item, ScopedColumns } from './CSmartTableInterface'
+import { Item, ItemInternal, ScopedColumns } from './CSmartTableInterface'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
-  currentItems: Item[]
+  currentItems: ItemInternal[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
   onRowChecked?: (id: number, value: boolean) => void
-  onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
+  onRowClick?: (
+    item: ItemInternal,
+    index: number,
+    columnName: string,
+    event: MouseEvent | boolean,
+  ) => void
   rawColumnNames: string[]
   scopedColumns?: ScopedColumns
   selectable?: boolean
@@ -64,7 +69,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.map((item: Item, trIndex) => {
+        {currentItems.map((item: ItemInternal, trIndex) => {
           return (
             <React.Fragment key={trIndex}>
               <CTableRow

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

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 
+import { cilFilterX } from '@coreui/icons-pro'
+
 import CIcon from '@coreui/icons-react'
 
 interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
@@ -9,22 +11,7 @@ interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
-  (
-    {
-      content = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225" class="ci-primary"></polygon>',
-          ]}
-        />
-      ),
-      isFiltered,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ content = <CIcon width={18} icon={cilFilterX} />, isFiltered, ...rest }, ref) => {
     return (
       <button
         type="button"

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

@@ -205,7 +205,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
 CSmartTableHead.propTypes = {
   columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   columnFilterState: PropTypes.object,
-  columnSorter: PropTypes.bool,
+  columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   component: PropTypes.elementType,
   children: PropTypes.node,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired, // TODO: improve this Prop Type,