@coreui/react-pro 5.5.0 → 5.6.0

package/src/components/breadcrumb/CBreadcrumbItem.tsx

@@ -1,14 +1,22 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLink } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
   /**
    * Toggle the active state for the component.
    */
   active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.4.0
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the base component.
    */
@@ -19,26 +27,33 @@ export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
   href?: string
 }
 
-export const CBreadcrumbItem = forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
-  ({ children, active, className, href, ...rest }, ref) => {
-    return (
-      <li
-        className={classNames(
-          'breadcrumb-item',
-          {
-            active: active,
-          },
-          className,
-        )}
-        {...(active && { 'aria-current': 'page' })}
-        {...rest}
-        ref={ref}
-      >
-        {href ? <CLink href={href}>{children}</CLink> : children}
-      </li>
-    )
-  },
-)
+export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrumbItemProps> =
+  forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
+    ({ children, active, as, className, href, ...rest }, ref) => {
+      return (
+        <li
+          className={classNames(
+            'breadcrumb-item',
+            {
+              active: active,
+            },
+            className,
+          )}
+          {...(active && { 'aria-current': 'page' })}
+          {...rest}
+          ref={ref}
+        >
+          {href ? (
+            <CLink as={as} href={href}>
+              {children}
+            </CLink>
+          ) : (
+            children
+          )}
+        </li>
+      )
+    },
+  )
 
 CBreadcrumbItem.propTypes = {
   active: PropTypes.bool,

package/src/components/form/CFormSelect.tsx

@@ -7,6 +7,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWra
 type Option = {
   disabled?: boolean
   label?: string
+  selected?: boolean
   value?: string
 }
 

package/src/components/grid/CRow.tsx

@@ -91,7 +91,7 @@ export const CRow = forwardRef<HTMLDivElement, CRowProps>(
     })
 
     return (
-      <div className={classNames('row', repsonsiveClassNames, className)} ref={ref}>
+      <div className={classNames('row', repsonsiveClassNames, className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/picker/CPicker.tsx

@@ -176,4 +176,5 @@ CPicker.propTypes = {
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   toggler: PropTypes.node,
+  visible: PropTypes.bool,
 }

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

@@ -39,7 +39,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       elementCover,
       footer,
       header = true,
-      items,
+      items = [],
       itemsNumber,
       itemsPerPage = 10,
       itemsPerPageLabel = 'Items per page:',
@@ -71,7 +71,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       tableFilter,
       tableFilterLabel = 'Filter:',
       tableFilterPlaceholder = 'type string...',
-      tableFilterValue, // TODO: consider to use only tableFilter prop
+      tableFilterValue,
       tableHeadProps,
       tableProps,
       ...rest
@@ -79,46 +79,45 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     ref,
   ) => {
     const mountedRef = useRef(false)
+
     const [_activePage, setActivePage] = useState(activePage)
     const [_items, setItems] = useState<Item[]>([])
-    const [_itemsNumber, setItemsNumber] = useState(itemsNumber)
     const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
     const [_selected, setSelected] = useState<Item[]>([])
     const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>({})
     const [selectedAll, setSelectedAll] = useState<boolean | string>()
-    const [sorterState, setSorterState] = useState<SorterValue>({})
+    const [sorterState, setSorterState] = useState<SorterValue[]>([])
     const [tableFilterState, setTableFilterState] = useState<string>(tableFilterValue ?? '')
 
+    const _itemsNumber = useMemo(() => itemsNumber ?? items.length, [itemsNumber, items.length])
+
     useEffect(() => {
       setActivePage(activePage)
     }, [activePage])
 
     useEffect(() => {
-      if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+      if (items.length < _itemsPerPage * _activePage - _itemsPerPage) {
         setActivePage(1)
       }
 
       const selected: Item[] = []
 
-      items &&
-        items.forEach((item: Item) => {
-          if (item._selected) {
-            const _item = { ...item }
-            for (const key of ITEM_INTERNAL_KEYS ) {
-              delete _item[key]
-            }
-            selected.push(_item)
+      for (const item of items) {
+        if (item._selected) {
+          const _item = { ...item }
+          for (const key of ITEM_INTERNAL_KEYS) {
+            delete _item[key] // Remove internal keys
           }
-        })
+          selected.push(_item) // Add cleaned item to selected array
+        }
+      }
 
       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)
+        setItems([...items])
       }
     }, [JSON.stringify(items)])
 
@@ -126,16 +125,12 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       Array.isArray(selected) && setSelected(selected)
     }, [JSON.stringify(selected)])
 
-    useEffect(() => {
-      itemsNumber && setItemsNumber(itemsNumber)
-    }, [itemsNumber])
-
     useEffect(() => {
       columnFilterValue && setColumnFilterState(columnFilterValue)
     }, [JSON.stringify(columnFilterValue)])
 
     useEffect(() => {
-      setSorterState({ ...sorterValue })
+      sorterValue && setSorterState(Array.isArray(sorterValue) ? sorterValue : [sorterValue])
     }, [JSON.stringify(sorterValue)])
 
     useEffect(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
@@ -150,8 +145,12 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }, [_itemsPerPage])
 
     useEffect(() => {
-      mountedRef.current && sorterState && onSorterChange && onSorterChange(sorterState)
-    }, [JSON.stringify(sorterState)])
+      const multiple = typeof columnSorter === 'object' && columnSorter.multiple
+      mountedRef.current &&
+        sorterState &&
+        onSorterChange &&
+        onSorterChange(multiple ? sorterState : sorterState[0])
+    }, [sorterState])
 
     useEffect(() => {
       mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState)
@@ -164,6 +163,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     useEffect(() => {
       if (selectable) {
         onSelectedItemsChange && onSelectedItemsChange(_selected)
+
         if (_selected.length === _itemsNumber) {
           setSelectedAll(true)
           return
@@ -189,23 +189,17 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
     const filteredColumns: Item[] = useMemo(
       () => filterColumns(_items, columnFilter, columnFilterState, itemsDataColumns),
-      [columnFilterState, JSON.stringify(_items)],
+      [columnFilterState, _items],
     )
 
     const filteredTable: Item[] = useMemo(
       () => filterTable(filteredColumns, tableFilter, tableFilterState, itemsDataColumns),
-      [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)],
+      [tableFilterState, tableFilterValue, filteredColumns],
     )
 
     const sortedItems: Item[] = useMemo(
-      () => sortItems(columnSorter, filteredTable, itemsDataColumns, sorterState),
-      [
-        JSON.stringify(filteredTable),
-        JSON.stringify(sorterState),
-        JSON.stringify(columnSorter),
-        JSON.stringify(filteredColumns),
-        JSON.stringify(_items),
-      ],
+      () => sortItems(columns, columnSorter, filteredTable, itemsDataColumns, sorterState),
+      [columnSorter, sorterState, filteredTable],
     )
 
     const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
@@ -223,7 +217,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const handleClean = (): void => {
       setTableFilterState('')
       setColumnFilterState({})
-      setSorterState({})
+      setSorterState([])
     }
 
     const handleColumnFilterChange = (colName: string, value: any, type?: string): void => {
@@ -232,9 +226,17 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
 
-      const newState = { ...columnFilterState, [`${colName}`]: value }
       setActivePage(1)
-      setColumnFilterState(newState)
+      setColumnFilterState((prevState) => {
+        const newState = { ...prevState }
+        if (value === '') {
+          delete newState[colName]
+        } else {
+          newState[colName] = value
+        }
+
+        return newState
+      })
     }
 
     const handleItemsPerPageChange = (event: ChangeEvent<HTMLSelectElement>): void => {
@@ -247,19 +249,13 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }
 
     const handleRowChecked = (item: Item, value: boolean) => {
-      if (
-        value &&
-        !isObjectInArray(_selected, item, ITEM_INTERNAL_KEYS)
-      ) {
-        setSelected([..._selected, item])
+      if (value && !isObjectInArray(_selected, item, ITEM_INTERNAL_KEYS)) {
+        setSelected((prevSelected) => [...prevSelected, item])
         return
       }
 
-      setSelected(
-        _selected.filter(
-          (_item: Item) =>
-            !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS),
-        ),
+      setSelected((prevSelected) =>
+        prevSelected.filter((_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS)),
       )
     }
 
@@ -275,7 +271,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
 
-      const selectable = _items.filter((item) => item._selectable !== false || item._selected === true)
+      const selectable = _items.filter(
+        (item) => item._selectable !== false || item._selected === true,
+      )
 
       if (selectable.length === _selected.length) {
         setSelected(_items.filter((item) => item._selectable === false && item._selected === true))
@@ -288,10 +286,10 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
       setSelected(
         selected.map((item) => {
-          for (const key of ITEM_INTERNAL_KEYS ) {
+          for (const key of ITEM_INTERNAL_KEYS) {
             delete item[key]
           }
-          
+
           return item
         }),
       )
@@ -302,29 +300,42 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
 
-      //if column changed or sort was descending change asc to true
-      const state = sorterState ?? { column: '', state: '' }
+      const existingColumnState = sorterState.find((x) => x.column === column)
+      const multiple = typeof columnSorter === 'object' && columnSorter.multiple
 
-      if (order) {
-        state.state = order
-      }
+      // If the column already has a sort state
+      if (existingColumnState) {
+        // No need to update if the order is already the same
+        if (existingColumnState.state === order) {
+          return
+        }
 
-      if (state.column === column) {
-        if (order) {
-          state.state = order
-        } else if (state.state === 0) {
-          state.state = 'asc'
-        } else if (state.state === 'asc') {
-          state.state = 'desc'
+        // Remove the column from sorting if resetable and descending
+        if (
+          typeof columnSorter === 'object' &&
+          columnSorter.resetable &&
+          existingColumnState.state === 'desc' &&
+          order !== 'asc'
+        ) {
+          setSorterState(multiple ? sorterState.filter((x) => x.column !== column) : [])
         } else {
-          state.state = typeof columnSorter === 'object' && !columnSorter.resetable ? 'asc' : 0
+          // Toggle between ascending and descending
+          const newState = {
+            column,
+            state: order || (existingColumnState.state === 'asc' ? 'desc' : 'asc'),
+          }
+
+          setSorterState(
+            multiple
+              ? sorterState.map((item) => (item.column === column ? newState : item))
+              : [newState],
+          )
         }
       } else {
-        state.column = column
-        state.state = order || 'asc'
+        // If the column is not yet sorted, add it with the default or provided order
+        const newSorter = { column, state: order || 'asc' }
+        setSorterState(multiple ? [...sorterState, newSorter] : [newSorter])
       }
-
-      setSorterState({ ...state })
     }
 
     const handleTableFilterChange = (value: string, type: string): void => {
@@ -379,7 +390,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                         className="btn btn-transparent"
                         {...(!(
                           tableFilterState ||
-                          sorterState?.column ||
+                          sorterState.length > 0 ||
                           Object.values(columnFilterState).join('')
                         ) && {
                           disabled: true,
@@ -486,7 +497,8 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         {(pagination || itemsPerPageSelect) && (
           <div className="row">
             <div className="col">
-              {((pagination && numberOfPages > 1) || (paginationProps && paginationProps.pages > 1)) && (
+              {((pagination && numberOfPages > 1) ||
+                (paginationProps && paginationProps.pages > 1)) && (
                 <CSmartPagination
                   activePage={_activePage}
                   onActivePageChange={(page) => {
@@ -556,7 +568,7 @@ CSmartTable.propTypes = {
   onRowClick: PropTypes.func,
   onSelectAll: PropTypes.func,
   onSelectedItemsChange: PropTypes.func,
-  onSorterChange: PropTypes.func, // TODO: change to `onColumnSorterChange` in v5
+  onSorterChange: PropTypes.func, // TODO: change to `onColumnSorterChange` in v6
   onTableFilterChange: PropTypes.func,
   pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   paginationProps: PropTypes.any, // TODO: update
@@ -564,7 +576,18 @@ CSmartTable.propTypes = {
   selectable: PropTypes.bool,
   selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   selected: PropTypes.array,
-  sorterValue: PropTypes.object,
+  sorterValue: PropTypes.oneOfType([
+    PropTypes.shape({
+      column: PropTypes.string.isRequired,
+      state: PropTypes.oneOf<SorterValue['state']>(['asc', 'desc', 0]).isRequired,
+    }),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        column: PropTypes.string.isRequired,
+        state: PropTypes.oneOf<SorterValue['state']>(['asc', 'desc', 0]).isRequired,
+      }).isRequired,
+    ),
+  ]),
   sortingIcon: PropTypes.node,
   sortingIconAscending: PropTypes.node,
   sortingIconDescending: PropTypes.node,

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

@@ -72,7 +72,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       item,
                       trIndex + firstItemOnActivePageIndex,
                       getClickedColumnName(
-                        event.target as HTMLTextAreaElement,
+                        event.target as HTMLElement,
                         columnNames,
                         selectable,
                       ),
@@ -153,6 +153,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
 
 CSmartTableBody.propTypes = {
   clickableRows: PropTypes.bool,
+  columns: PropTypes.array.isRequired,
   currentItems: PropTypes.array.isRequired,
   firstItemOnActivePageIndex: PropTypes.number.isRequired,
   noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

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

@@ -42,7 +42,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   selectAll?: boolean | { external?: boolean }
   selectedAll?: boolean | string
   showGroups?: boolean
-  sorterState?: SorterValue
+  sorterState?: SorterValue[]
   sortingIcon?: ReactNode
   sortingIconAscending?: ReactNode
   sortingIconDescending?: ReactNode
@@ -250,14 +250,17 @@ CSmartTableHead.propTypes = {
   columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   children: PropTypes.node,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired, // TODO: improve this Prop Type,
+  handleOnCustomFilterChange: PropTypes.func,
   handleFilterOnChange: PropTypes.func,
   handleFilterOnInput: PropTypes.func,
   handleSelectAllChecked: PropTypes.func,
   handleSort: PropTypes.func,
+  items: PropTypes.array,
   selectable: PropTypes.bool,
   selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   selectedAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  sorterState: PropTypes.object,
+  showGroups: PropTypes.bool,
+  sorterState: PropTypes.array,
   sortingIcon: PropTypes.node,
   sortingIconAscending: PropTypes.node,
   sortingIconDescending: PropTypes.node,

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

@@ -64,8 +64,9 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
    *
    * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
-   * - external (Boolean) - Disables automatic sorting inside component.
-   * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
+   * - external (Boolean) - Disables automatic sorting inside the component, allowing for external sorting control.
+   * - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order will be maintained across multiple columns based on the order of interaction.
+   * - resetable (Boolean) - If set to true, clicking on the sorter cycles through three states: ascending, descending, and null (no sorting). The third click on the sorter will reset the sorting and restore the table to its original order.
    */
   columnSorter?: boolean | Sorter
   /**
@@ -159,7 +160,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Sorter value change callback.
    */
-  onSorterChange?: (value: SorterValue) => void
+  onSorterChange?: (value: SorterValue | SorterValue[]) => void
   /**
    * Table filter change callback.
    */
@@ -200,7 +201,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
    */
-  sorterValue?: SorterValue
+  sorterValue?: SorterValue | SorterValue[]
   /**
    * Sorter icon when items are unsorted.
    */

package/src/components/smart-table/types.ts

@@ -10,7 +10,7 @@ export type Column = {
   group?: string
   key: string
   label?: string
-  sorter?: boolean
+  sorter?: boolean | ((a: any, b: any) => number)
   _style?: any
   _props?: CTableHeaderCellProps
   _colStyle?: any
@@ -59,8 +59,9 @@ export type Pagination = {
 }
 
 export type Sorter = {
-  resetable?: boolean
   external?: boolean
+  multiple?: boolean
+  resetable?: boolean
 }
 
 export type ScopedColumns = {
@@ -69,8 +70,8 @@ export type ScopedColumns = {
 }
 
 export type SorterValue = {
-  column?: string
-  state?: number | string
+  column: string
+  state: 'asc' | 'desc' | 0
 }
 
 export type TableFilter = {