@coreui/react-pro 4.1.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,22 +37,22 @@
   "devDependencies": {
     "@popperjs/core": "^2.11.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^13.1.1",
     "@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.0",
     "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.62.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "react": "^17",

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,13 @@
 import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { ColumnFilterValue, CSmartTableProps, Item, SorterValue } from './CSmartTableInterface'
+import {
+  ColumnFilterValue,
+  CSmartTableProps,
+  Item,
+  ItemInternal,
+  SorterValue,
+} from './CSmartTableInterface'
 
 import { CSmartPagination } from '../pagination/CSmartPagination'
 import { CElementCover } from '../element-cover/CElementCover'
@@ -98,7 +104,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     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 : {},
@@ -229,7 +235,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       compData.changeItems,
     ])
 
-    const columnFiltered: Item[] = useMemo(() => {
+    const columnFiltered: ItemInternal[] = useMemo(() => {
       let items = _items
       if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
         return items
@@ -245,7 +251,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       return items
     }, [compData.columnFiltered, _items])
 
-    const tableFiltered: Item[] = useMemo(() => {
+    const tableFiltered: ItemInternal[] = useMemo(() => {
       let items = columnFiltered
       if (
         !tableFilterState ||
@@ -266,7 +272,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       JSON.stringify(columnFiltered),
     ])
 
-    const sortedItems: Item[] = useMemo(() => {
+    const sortedItems: ItemInternal[] = useMemo(() => {
       const col = sorterState?.column
       if (
         !col ||
@@ -292,12 +298,12 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
     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('')
@@ -350,7 +356,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 +364,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/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,

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

@@ -8,10 +8,10 @@ import { CTableRowProps } from '../table/CTableRow'
 import { CTableHeadProps } from '../table/CTableHead'
 
 export interface Column {
-  sorter?: boolean
-  key: string
-  label?: string
   filter?: boolean
+  label?: string
+  key: string
+  sorter?: boolean
   _style?: any
   _props?: CTableHeaderCellProps
 }
@@ -27,9 +27,12 @@ export interface ColumnFilterValue {
 
 export interface Item {
   [key: string]: number | string | any
+  _props?: CTableRowProps
+  _selected?: boolean
+}
+
+export interface ItemInternal extends Item {
   _id: number
-  _props: CTableRowProps
-  _selected: boolean
 }
 
 export interface ItemsPerPageSelect {
@@ -44,6 +47,7 @@ export interface Sorter {
 }
 
 export interface ScopedColumns {
+  [key: string]: any
   details?: (a: Item, b: number) => ReactNode
 }
 
@@ -115,7 +119,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * - sorter (Boolean) - disables sorting of the column when set to false
    * - filter (Boolean) - removes filter from column when set to false.
    */
-  columns?: Column[] | string[]
+  columns?: (string | Column)[]
   /**
    * 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.
    *

package/src/components/tooltip/CTooltip.tsx

@@ -13,7 +13,7 @@ export interface CTooltipProps {
   /**
    * Content node for your component.
    */
-  content: ReactNode
+  content: ReactNode | string
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -126,7 +126,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
 CTooltip.propTypes = {
   children: PropTypes.any,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/utils/hooks/useForkedRef.ts

@@ -9,6 +9,7 @@ export type AssignableRef<ValueType> =
     }['bivarianceHack']
   | React.MutableRefObject<ValueType | null>
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useForkedRef<RefValueType = any>(
   ...refs: (AssignableRef<RefValueType> | null | undefined)[]
 ) {
@@ -16,6 +17,7 @@ export function useForkedRef<RefValueType = any>(
     if (refs.every((ref) => ref == null)) {
       return null
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (node: any) => {
       refs.forEach((ref) => {
         assignRef(ref, node)
@@ -24,8 +26,10 @@ export function useForkedRef<RefValueType = any>(
   }, refs)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function assignRef<RefValueType = any>(
   ref: AssignableRef<RefValueType> | null | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any,
 ) {
   if (ref == null) return
@@ -40,6 +44,7 @@ export function assignRef<RefValueType = any>(
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 export function isFunction(value: any): value is Function {
   return !!(value && {}.toString.call(value) == '[object Function]')
 }