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

package/dist/props.d.ts

@@ -5,4 +5,4 @@ export declare const gradientsPropType: PropTypes.Requireable<string>;
 export declare const placementPropType: PropTypes.Requireable<Placements>;
 export declare const shapePropType: PropTypes.Requireable<string>;
 export declare const textColorsPropType: PropTypes.Requireable<string>;
-export declare const triggerPropType: PropTypes.Requireable<Triggers>;
+export declare const triggerPropType: PropTypes.Requireable<NonNullable<Triggers | NonNullable<Triggers>[] | null | undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.12.0-alpha.0",
+  "version": "4.12.0-beta.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,34 +37,34 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@coreui/icons": "^3.0.0",
+    "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.2.6",
+    "@types/react": "18.2.11",
     "@types/react-dom": "^18.2.4",
     "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-device-detect": "^2.2.2",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.21.6",
-    "tslib": "^2.5.0",
+    "rollup": "^3.25.0",
+    "tslib": "^2.5.3",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.6.0-alpha.0",
+    "@coreui/coreui-pro": ">=4.6.0-beta.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/accordion/index.ts

@@ -4,10 +4,4 @@ import { CAccordionButton } from './CAccordionButton'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
-export {
-  CAccordion,
-  CAccordionBody,
-  CAccordionButton,
-  CAccordionHeader,
-  CAccordionItem,
-}
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem }

package/src/components/calendar/CCalendar.tsx

@@ -133,14 +133,14 @@ export interface CCalendarProps {
    * @default 2
    */
   weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
-  /**
-   * Callback fired when the user hovers over the calendar cell.
-   */
-  onCalendarCellHover?: (date: Date | null) => void
   /**
    * Callback fired when the calendar date changed.
    */
   onCalendarDateChange?: (date: Date) => void
+  /**
+   * Callback fired when the user hovers over the calendar cell.
+   */
+  onDayHover?: (date: Date | null) => void
   /**
    * Callback fired when the start date changed.
    */
@@ -170,10 +170,10 @@ const Calendar = (props: {
   locale: string
   maxDate: Date | null
   minDate: Date | null
-  onCellClick: (date: Date) => void
-  onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
-  onCellMouseEnter: (date: Date) => void
-  onCellMouseLeave: () => void
+  onDayClick: (date: Date) => void
+  onDayKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onDayMouseEnter: (date: Date) => void
+  onDayMouseLeave: () => void
   onMonthClick: (month: number) => void
   onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
   onYearClick: (date: Date) => void
@@ -196,10 +196,10 @@ const Calendar = (props: {
     locale,
     maxDate,
     minDate,
-    onCellClick,
-    onCellKeyDown,
-    onCellMouseEnter,
-    onCellMouseLeave,
+    onDayClick,
+    onDayKeyDown,
+    onDayMouseEnter,
+    onDayMouseLeave,
     onMonthClick,
     onMonthKeyDown,
     onYearClick,
@@ -241,9 +241,9 @@ const Calendar = (props: {
                 <div className="calendar-header-cell-inner">
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
-                    : typeof weekdayFormat === 'string'
+                    : (typeof weekdayFormat === 'string'
                     ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}
+                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat))}
                 </div>
               </th>
             ))}
@@ -283,16 +283,16 @@ const Calendar = (props: {
                       }
                       title={date.toLocaleDateString(locale)}
                       {...((month === 'current' || selectAdjacementDays) && {
-                        onBlur: () => onCellMouseLeave(),
-                        onClick: () => onCellClick(date),
-                        onFocus: () => onCellMouseEnter(date),
-                        onKeyDown: (event) => onCellKeyDown(event, date),
-                        onMouseEnter: () => onCellMouseEnter(date),
-                        onMouseLeave: () => onCellMouseLeave(),
+                        onBlur: () => onDayMouseLeave(),
+                        onClick: () => onDayClick(date),
+                        onFocus: () => onDayMouseEnter(date),
+                        onKeyDown: (event) => onDayKeyDown(event, date),
+                        onMouseEnter: () => onDayMouseEnter(date),
+                        onMouseLeave: () => onDayMouseLeave(),
                       })}
                       {...(month !== 'current' &&
                         !selectAdjacementDays && {
-                          onMouseEnter: () => onCellMouseLeave(),
+                          onMouseEnter: () => onDayMouseLeave(),
                         })}
                     >
                       <div className="calendar-cell-inner">
@@ -408,19 +408,13 @@ const Navigation = (props: {
       {navigation && (
         <div className="calendar-nav-prev">
           <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev', true)}>
-            {navPrevDoubleIcon ? (
-              navPrevDoubleIcon
-            ) : (
+            {navPrevDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
             )}
           </CButton>
           {view === 'days' && (
             <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev')}>
-              {navPrevIcon ? (
-                navPrevIcon
-              ) : (
-                <span className="calendar-nav-icon calendar-nav-icon-prev" />
-              )}
+              {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
             </CButton>
           )}
         </div>
@@ -447,17 +441,11 @@ const Navigation = (props: {
         <div className="calendar-nav-next">
           {view === 'days' && (
             <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next')}>
-              {navNextIcon ? (
-                navNextIcon
-              ) : (
-                <span className="calendar-nav-icon calendar-nav-icon-next" />
-              )}
+              {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
             </CButton>
           )}
           <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next', true)}>
-            {navNextDoubleIcon ? (
-              navNextDoubleIcon
-            ) : (
+            {navNextDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-next" />
             )}
           </CButton>
@@ -492,7 +480,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       selectEndDate,
       showAdjacementDays = true,
       weekdayFormat = 2,
-      onCalendarCellHover,
+      onDayHover,
       onCalendarDateChange,
       onEndDateChange,
       onStartDateChange,
@@ -590,7 +578,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarDateChange && onCalendarDateChange(d)
     }
 
-    const handleCellOnClick = (date: Date, index?: number) => {
+    const handleDayClick = (date: Date, index?: number) => {
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
@@ -638,30 +626,29 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       setStartDate(date)
     }
 
-    const handleCellMouseEnter = (date: Date) => {
-      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
-        return
-      }
-
-      setHoverDate(date)
-      onCalendarCellHover && onCalendarCellHover(date)
-    }
-
-    const handleCellMouseLeave = () => {
-      setHoverDate(null)
-      onCalendarCellHover && onCalendarCellHover(null)
-    }
-
-    const handleCellKeyDown = (
+    const handleDayKeyDown = (
       event: React.KeyboardEvent<HTMLDivElement>,
       date: Date,
       index?: number,
     ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        handleCellOnClick && handleCellOnClick(date, index)
+        handleDayClick(date, index)
+      }
+    }
+
+    const handleDayMouseEnter = (date: Date) => {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
+
+      setHoverDate(date)
+      onDayHover && onDayHover(date)
+    }
+
+    const handleDayMouseLeave = () => {
+      setHoverDate(null)
+      onDayHover && onDayHover(null)
     }
 
     const handleMonthClick = (month: number) => {
@@ -671,8 +658,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
     const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
       if (event.code === 'Space' || event.key === 'Enter') {
-        setCalendarPage(0, 0, month)
-        setView('days')
+        handleMonthClick(month)
       }
     }
 
@@ -714,8 +700,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
     const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
       if (event.code === 'Space' || event.key === 'Enter') {
-        setCalendarDate(date)
-        setView('months')
+        handleYearClick(date)
       }
     }
 
@@ -750,10 +735,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 locale={locale}
                 maxDate={_maxDate}
                 minDate={_minDate}
-                onCellClick={(date) => handleCellOnClick(date, index)}
-                onCellKeyDown={(event, date) => handleCellKeyDown(event, date, index)}
-                onCellMouseEnter={handleCellMouseEnter}
-                onCellMouseLeave={handleCellMouseLeave}
+                onDayClick={(date) => handleDayClick(date, index)}
+                onDayKeyDown={(event, date) => handleDayKeyDown(event, date, index)}
+                onDayMouseEnter={handleDayMouseEnter}
+                onDayMouseLeave={handleDayMouseLeave}
                 onMonthClick={handleMonthClick}
                 onMonthKeyDown={handleMonthKeyDown}
                 onYearClick={handleYearClick}
@@ -802,7 +787,7 @@ CCalendar.propTypes = {
     PropTypes.number,
     PropTypes.oneOf<'long' | 'narrow' | 'short'>(['long', 'narrow', 'short']),
   ]),
-  onCalendarCellHover: PropTypes.func,
+  onDayHover: PropTypes.func,
   onCalendarDateChange: PropTypes.func,
   onEndDateChange: PropTypes.func,
   onSelectEndChange: PropTypes.func,

package/src/components/calendar/utils.ts

@@ -164,7 +164,7 @@ export const isDateDisabled = (
   if (max && date > max) {
     disabled = true
   }
-  
+
   return disabled
 }
 

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -17,7 +17,7 @@ import { getLocalDateFromString } from './utils'
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
     Omit<CPickerProps, 'placeholder'>,
-    Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
+    Omit<CCalendarProps, 'onDayHover' | 'onCalendarDateChange'> {
   /**
    * The number of calendars that render on desktop devices.
    */
@@ -328,9 +328,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const formatDate = (date: Date) => {
       return format
         ? dateFormat(date, format)
-        : timepicker
+        : (timepicker
         ? date.toLocaleString(locale)
-        : date.toLocaleDateString(locale)
+        : date.toLocaleDateString(locale))
     }
 
     const setInputValue = (el: HTMLInputElement | null, date: Date | null) => {
@@ -346,7 +346,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       el.value = ''
     }
 
-    const handleCalendarCellHover = (date: Date | null) => {
+    const handleDayHover = (date: Date | null) => {
       selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date)
     }
 
@@ -590,7 +590,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               selectEndDate={selectEndDate}
               showAdjacementDays={showAdjacementDays}
               startDate={_startDate}
-              onCalendarCellHover={(date) => handleCalendarCellHover(date)}
+              onDayHover={(date) => handleDayHover(date)}
               onCalendarDateChange={(date) => handleCalendarDateChange(date)}
               onStartDateChange={(date) => handleStartDateChange(date)}
               onEndDateChange={(date) => handleEndDateChange(date)}
@@ -619,17 +619,17 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                     />
                   </>
                 ) : (
-                  [...Array(calendars)].map((_, index) => (
+                  Array.from({ length: calendars }).map((_, index) => (
                     <CTimePicker
                       container="inline"
                       disabled={
                         index === 0
-                          ? _startDate === null
+                          ? (_startDate === null
                             ? true
-                            : false
-                          : _endDate === null
+                            : false)
+                          : (_endDate === null
                           ? true
-                          : false
+                          : false)
                       }
                       key={index}
                       locale={locale}

package/src/components/date-range-picker/utils.ts

@@ -32,9 +32,9 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
           Number(partials.groups['month']) - 1,
           Number(partials.groups['day']),
           partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
+            ? (partials.groups['ampm'] === 'PM'
               ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
+              : Number(partials.groups['hour']))
             : Number(partials.groups['hour']),
           Number(partials.groups['minute']),
           Number(partials.groups['second']),

package/src/components/form/CFormSelect.tsx

@@ -9,6 +9,7 @@ type Option = {
   label?: string
   value?: string
 }
+
 export interface CFormSelectProps
   extends CFormControlWrapperProps,
     Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
@@ -102,7 +103,8 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
                   <option
                     {...(typeof option === 'object' &&
                       option.disabled && { disabled: option.disabled })}
-                    {...(typeof option === 'object' && option.value && { value: option.value })}
+                    {...(typeof option === 'object' &&
+                      option.value !== undefined && { value: option.value })}
                     key={index}
                   >
                     {typeof option === 'string' ? option : option.label}

package/src/components/modal/CModal.tsx

@@ -142,6 +142,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         return setStaticBackdrop(true)
       }
 
+      setVisible(false)
       return onClose && onClose()
     }
 
@@ -174,6 +175,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           document.body.style.removeProperty('padding-right')
         }
       }
+
       return () => {
         document.body.classList.remove('modal-open')
         if (backdrop) {

package/src/components/multi-select/CMultiSelect.tsx

@@ -101,13 +101,13 @@ export interface CMultiSelectProps
   /**
    * Custom template for options.
    *
-   * @since 4.12.0-alpha.0
+   * @since 4.12.0-beta.0
    */
   optionsTemplate?: (option: Option) => ReactNode
   /**
    * Custom template for options groups.
    *
-   * @since 4.12.0-alpha.0
+   * @since 4.12.0-beta.0
    */
   optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   /**

package/src/components/popover/CPopover.tsx

@@ -51,7 +51,6 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
 }
 
 const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  console.log(element)
   switch (placement) {
     case 'right': {
       return isRTL(element) ? 'left' : 'right'

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -11,10 +11,11 @@ exports[`CPopover customize 1`] = `
   <div
     class="popover bs-popover-end fade"
     role="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >
     <div
       class="popover-arrow"
+      data-popper-arrow="true"
       style="position: absolute;"
     />
     <div

package/src/components/progress/CProgress.tsx

@@ -29,6 +29,7 @@ export interface CProgressProps
   white?: boolean
 }
 
+// TODO: update markup and add '.progress-stacked' in v5
 export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
   ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
     return (

package/src/components/sidebar/CSidebar.tsx

@@ -111,7 +111,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
       sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
-      window.addEventListener('resize', () => handleResize())
+      window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
@@ -121,7 +121,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       })
 
       return () => {
-        window.removeEventListener('resize', () => handleResize())
+        window.removeEventListener('resize', handleResize)
         window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
 

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/spinner/CSpinner.tsx

@@ -51,8 +51,10 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
       <Component
         className={classNames(
           `spinner-${variant}`,
-          `text-${color}`,
-          size && `spinner-${variant}-${size}`,
+          {
+            [`spinner-${variant}-${size}`]: size,
+            [`text-${color}`]: color,
+          },
           className,
         )}
         role="status"