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

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

@@ -2,10 +2,10 @@ import React, { forwardRef, Fragment, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Option } from './CMultiSelect'
 import { CVirtualScroller } from './../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './../../utils'
+import { getNextSibling, getPreviousSibling } from './utils'
+import type { Option } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import type { SelectedOption } from './CMultiSelect'
+import type { SelectedOption } from './types'
 
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
   multiple?: boolean

package/src/components/multi-select/types.ts

@@ -0,0 +1,15 @@
+export type Option = {
+  disabled?: boolean
+  label?: string
+  options?: Option[]
+  order?: number
+  selected?: boolean
+  text: string
+  value: number | string
+}
+
+export type SelectedOption = {
+  disabled?: boolean
+  text: string
+  value: number | string
+}

package/src/components/multi-select/utils.ts

@@ -0,0 +1,92 @@
+import type { Option, SelectedOption } from './types'
+
+export const filterOptionsList = (search: string, _options: Option[]) => {
+  return search.length
+    ? _options &&
+        _options.reduce((acc: Option[], val: Option) => {
+          const options =
+            val.options &&
+            val.options.filter(
+              (element) =>
+                element.text && element.text.toLowerCase().includes(search.toLowerCase()),
+            )
+
+          if (
+            (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
+            (options && options.length)
+          ) {
+            acc.push(Object.assign({}, val, options && options.length && { options }))
+          }
+
+          return acc
+        }, [])
+    : _options
+}
+
+export const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export const selectOptions = (
+  options: Option[],
+  selected: SelectedOption[],
+  deselected?: Option[],
+) => {
+  let _selected = [...selected, ...options]
+
+  if (deselected) {
+    _selected = _selected.filter(
+      (selectedOption) =>
+        !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+    )
+  }
+
+  const deduplicated = _selected.reduce((unique: Option[], option) => {
+    if (!unique.some((obj) => obj.value === option.value)) {
+      unique.push({
+        value: option.value,
+        text: option.text,
+        ...(option.disabled && { disabled: option.disabled }),
+      })
+    }
+    return unique
+  }, []) as SelectedOption[]
+
+  return deduplicated
+}

package/src/components/nav/CNavItem.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CNavLink, CNavLinkProps } from './CNavLink'
 
 export const CNavItem = forwardRef<HTMLLIElement, CNavLinkProps>(

package/src/components/nav/CNavLink.tsx

@@ -2,10 +2,10 @@ import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
-
-import { CNavContext } from '../sidebar/CSidebarNav'
 import { CLinkProps, CLink } from '../link/CLink'
+import { CNavContext } from '../sidebar/CSidebarNav'
+
+import { useForkedRef } from '../../hooks'
 
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   /**

package/src/components/navbar/CNavbar.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 CNavbarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/offcanvas/COffcanvas.tsx

@@ -1,12 +1,13 @@
-import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Transition } from 'react-transition-group'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
+import { useForkedRef } from '../../hooks'
+
 export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Apply a backdrop on body while offcanvas is open.

package/src/components/picker/CPicker.tsx

@@ -7,7 +7,7 @@ import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
 import { CDropdownMenu } from '../dropdown/CDropdownMenu'
 import { CDropdownToggle } from '../dropdown/CDropdownToggle'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 
 export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
   /**

package/src/components/placeholder/CPlaceholder.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 CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
   /**

package/src/components/popover/CPopover.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/progress/CProgress.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps

package/src/components/progress/CProgressBar.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Gradients, colorPropType, gradientsPropType } from '../Types'
+import { colorPropType, gradientsPropType } from '../../props'
+import type { Colors, Gradients } from '../../types'
 
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/sidebar/CSidebar.tsx

@@ -3,9 +3,10 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CBackdrop } from '../backdrop/CBackdrop'
+
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
-import { CBackdrop } from '../backdrop/CBackdrop'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**

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

@@ -360,7 +360,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                           Object.values(columnFilterState).join('')
                         }
                         onClick={() => handleClean()}
-                        onKeyUp={(event) => {
+                        onKeyDown={(event) => {
                           if (event.key === 'Enter') handleClean()
                         }}
                       />

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

@@ -51,89 +51,90 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.map((item: Item, trIndex) => {
-          return (
-            <React.Fragment key={trIndex}>
-              <CTableRow
-                {...(item._props && { ...item._props })}
-                {...(clickableRows && { tabIndex: 0 })}
-                onClick={(event) =>
-                  onRowClick &&
-                  onRowClick(
-                    item,
-                    trIndex + firstItemOnActivePageIndex,
-                    getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
-                    event,
-                  )
-                }
-              >
-                {selectable && (
-                  <CTableDataCell>
-                    <CFormCheck
-                      checked={
-                        selected &&
-                        isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
-                      }
-                      onChange={(event) => {
-                        const _item = { ...item }
-                        delete _item['_cellProps']
-                        delete _item['_props']
-                        delete _item['_selected']
-                        onRowChecked && onRowChecked(_item, event.target.checked)
-                      }}
-                    />
-                  </CTableDataCell>
-                )}
-                {columnNames.map((colName, index) => {
-                  return (
-                    (scopedColumns &&
-                      scopedColumns[colName] &&
-                      React.cloneElement(
-                        scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
-                        {
-                          key: index,
-                        },
-                      )) || (
-                      <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
-                        {String(item[colName])}
-                      </CTableDataCell>
+        {currentItems.length ? (
+          currentItems.map((item: Item, trIndex) => {
+            return (
+              <React.Fragment key={trIndex}>
+                <CTableRow
+                  {...(item._props && { ...item._props })}
+                  {...(clickableRows && { tabIndex: 0 })}
+                  onClick={(event) =>
+                    onRowClick &&
+                    onRowClick(
+                      item,
+                      trIndex + firstItemOnActivePageIndex,
+                      getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
+                      event,
                     )
-                  )
-                })}
-              </CTableRow>
-              {scopedColumns && scopedColumns.details && (
-                <>
-                  <CTableRow>
-                    <CTableDataCell
-                      colSpan={colspan}
-                      className="p-0"
-                      style={{ borderBottomWidth: 0 }}
-                      tabIndex={-1}
-                    ></CTableDataCell>
-                  </CTableRow>
-                  <CTableRow
-                    onClick={(event) =>
-                      onRowClick &&
-                      onRowClick(
-                        item,
-                        trIndex + firstItemOnActivePageIndex,
-                        getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
-                        true,
-                      )
-                    }
-                    className="p-0"
-                    key={`details${trIndex}`}
-                  >
-                    <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
-                      {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
+                  }
+                >
+                  {selectable && (
+                    <CTableDataCell>
+                      <CFormCheck
+                        checked={
+                          selected &&
+                          isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
+                        }
+                        onChange={(event) => {
+                          const _item = { ...item }
+                          delete _item['_cellProps']
+                          delete _item['_props']
+                          delete _item['_selected']
+                          onRowChecked && onRowChecked(_item, event.target.checked)
+                        }}
+                      />
                     </CTableDataCell>
-                  </CTableRow>
-                </>
-              )}
-            </React.Fragment>
-          )
-        })}
-        {!currentItems.length && (
+                  )}
+                  {columnNames.map((colName, index) => {
+                    return (
+                      (scopedColumns &&
+                        scopedColumns[colName] &&
+                        React.cloneElement(
+                          scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
+                          {
+                            key: index,
+                          },
+                        )) || (
+                        <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
+                          {String(item[colName])}
+                        </CTableDataCell>
+                      )
+                    )
+                  })}
+                </CTableRow>
+                {scopedColumns && scopedColumns.details && (
+                  <>
+                    <CTableRow>
+                      <CTableDataCell
+                        colSpan={colspan}
+                        className="p-0"
+                        style={{ borderBottomWidth: 0 }}
+                        tabIndex={-1}
+                      ></CTableDataCell>
+                    </CTableRow>
+                    <CTableRow
+                      onClick={(event) =>
+                        onRowClick &&
+                        onRowClick(
+                          item,
+                          trIndex + firstItemOnActivePageIndex,
+                          getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
+                          true,
+                        )
+                      }
+                      className="p-0"
+                      key={`details${trIndex}`}
+                    >
+                      <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
+                        {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
+                      </CTableDataCell>
+                    </CTableRow>
+                  </>
+                )}
+              </React.Fragment>
+            )
+          })
+        ) : (
           <CTableRow>
             <CTableDataCell colSpan={colspan}>{noItemsLabel}</CTableDataCell>
           </CTableRow>

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,7 +79,7 @@ export const getColumnLabel = (column: Column | string) =>
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
   columns
-    ? columns.map((column: Column) => {
+    ? columns.map((column: Column | string) => {
         if (typeof column === 'object') return column.key
         else return column
       })

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> {
   /**

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>(
   (
     {
@@ -183,29 +170,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       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}>
@@ -222,7 +187,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
                     {...(column._style && { style: { ...column._style } })}
                     key={index}
                   >
-                    {label(column)}
+                    {getColumnLabel(column)}
                   </CTableHeaderCell>
                 ))}
               </CTableRow>
@@ -232,19 +197,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> {
   /**