@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/sidebar/CSidebar.tsx

@@ -92,7 +92,7 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const sidebarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, sidebarRef)
@@ -101,46 +101,65 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
     const [mobile, setMobile] = useState(false)
     const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
     const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
-      visible !== undefined ? visible : overlaid ? false : true,
+      visible === undefined ? !overlaid : visible
     )
 
     useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      visible !== undefined && handleVisibleChange(visible)
+      if (sidebarRef.current) {
+        setMobile(isOnMobile(sidebarRef.current))
+      }
+
+      if (visible !== undefined) {
+        handleVisibleChange(visible)
+      }
     }, [visible])
 
     useEffect(() => {
-      inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport)
-      !inViewport && onHide && onHide()
-      inViewport && onShow && onShow()
+      if (inViewport !== undefined) {
+        onVisibleChange?.(inViewport)
+      }
+
+      if (inViewport) {
+        onShow?.()
+      } else {
+        onHide?.()
+      }
     }, [inViewport])
 
     useEffect(() => {
-      mobile && setVisibleMobile(false)
+      if (mobile) {
+        setVisibleMobile(false)
+      }
     }, [mobile])
 
     useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
+      const element = sidebarRef.current
+
+      if (element) {
+        setMobile(isOnMobile(element))
+        setInViewport(isInViewport(element))
+      }
+
+      const handleTransitionEnd = () => {
+        if (element) {
+          setInViewport(isInViewport(element))
+        }
+      }
 
       window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
-      sidebarRef.current?.addEventListener('mouseup', handleOnClick)
-      sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-      })
+      element?.addEventListener('mouseup', handleOnClick)
+      element?.addEventListener('transitionend', handleTransitionEnd)
 
       return () => {
         window.removeEventListener('resize', handleResize)
         window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
 
-        sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
-        sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-        })
+        element?.removeEventListener('mouseup', handleOnClick)
+        element?.removeEventListener('transitionend', handleTransitionEnd)
       }
     })
 
@@ -158,8 +177,10 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
     }
 
     const handleResize = () => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
+      if (sidebarRef.current) {
+        setMobile(isOnMobile(sidebarRef.current))
+        setInViewport(isInViewport(sidebarRef.current))
+      }
     }
 
     const handleKeyup = (event: Event) => {
@@ -183,11 +204,15 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
 
     const handleOnClick = (event: Event) => {
       const target = event.target as HTMLAnchorElement
-      target &&
+
+      if (
+        target &&
         target.classList.contains('nav-link') &&
         !target.classList.contains('nav-group-toggle') &&
-        mobile &&
+        mobile
+      ) {
         handleHide()
+      }
     }
 
     return (
@@ -206,7 +231,7 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
               show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
               hide: visibleDesktop === false && !mobile && !overlaid,
             },
-            className,
+            className
           )}
           {...rest}
           ref={forkedRef}
@@ -217,11 +242,11 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
           mobile &&
           createPortal(
             <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
-            document.body,
+            document.body
           )}
       </>
     )
-  },
+  }
 )
 
 CSidebar.propTypes = {
@@ -241,4 +266,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'

package/src/components/sidebar/CSidebarNav.tsx

@@ -2,18 +2,14 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
-  ReactElement,
-  ReactNode,
+  useCallback,
+  useMemo,
   useState,
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import type { CNavGroupProps } from '../nav/CNavGroup'
-import type { CNavLinkProps } from '../nav/CNavLink'
-import type { CNavItemProps } from '../nav/CNavItem'
-
-import { CSidebarNavContext } from './CSidebarNavContext'
+import { CNavGroupContext, CNavGroupContextValue } from '../nav/CNavGroupContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
@@ -42,54 +38,19 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   variant?: 'tree'
 }
 
-const isNavElement = (
-  child: ReactNode
-): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
-  if (!React.isValidElement(child)) return false
-  const type = child.type as { displayName?: string }
-  return (
-    type.displayName === 'CNavGroup' ||
-    type.displayName === 'CNavLink' ||
-    type.displayName === 'CNavItem'
-  )
-}
-
-const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child, index) => {
-    if (!isNavElement(child)) {
-      return child
-    }
-
-    const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
-
-    if (child.props.children) {
-      const type = child.type as { displayName?: string }
-      const shouldUpdateId = type.displayName !== 'CNavItem'
-
-      return React.cloneElement(child, {
-        idx: _id,
-        children: recursiveClone(child.props.children, _id, shouldUpdateId),
-      })
-    }
-
-    return React.cloneElement(child, {
-      idx: _id,
-    })
-  })
-}
-
 export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
   HTMLUListElement,
   CSidebarNavProps
 >(({ children, as: Component = 'ul', className, compact, variant, ...rest }, ref) => {
-  const [visibleGroup, setVisibleGroup] = useState('')
-  const CNavContextValues = {
-    visibleGroup,
-    setVisibleGroup,
-  }
+  const [activeId, setActiveId] = useState<string | undefined>()
+  const openBranch = useCallback(() => {}, [])
+  const contextValue = useMemo<CNavGroupContextValue>(
+    () => ({ activeId, setActiveId, openBranch }),
+    [activeId, openBranch]
+  )
 
   return (
-    <CSidebarNavContext.Provider value={CNavContextValues}>
+    <CNavGroupContext.Provider value={contextValue}>
       <Component
         className={classNames(
           'sidebar-nav',
@@ -102,9 +63,9 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
         ref={ref}
         {...rest}
       >
-        {recursiveClone(children)}
+        {children}
       </Component>
-    </CSidebarNavContext.Provider>
+    </CNavGroupContext.Provider>
   )
 })
 

package/src/components/smart-pagination/CSmartPagination.tsx

@@ -82,7 +82,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
       size,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const showDots: boolean = (() => {
       return dots && limit > 4 && limit < pages
@@ -117,7 +117,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
     })()
 
     const itemsAmount: number = (() => {
-      return pages < computedLimit ? pages : computedLimit
+      return Math.min(pages, computedLimit)
     })()
 
     const items: number[] = (() => {
@@ -126,7 +126,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
             {
               length: itemsAmount,
             },
-            (_v, i) => i + 1,
+            (_v, i) => i + 1
           )
         : Array.from(
             {
@@ -134,8 +134,8 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
             },
             (_v, i) => {
               return lastItem - i
-            },
-          ).reverse()
+            }
+          ).toReversed()
     })()
 
     const setPage = (number: number): void => {
@@ -216,7 +216,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
         )}
       </CPagination>
     )
-  },
+  }
 )
 
 CSmartPagination.propTypes = {

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

@@ -222,7 +222,11 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       setSorterState([])
     }
 
-    const handleColumnFilterChange = (colName: string, value: any, type?: string): void => {
+    const handleColumnFilterChange = (
+      colName: string,
+      value: string | number,
+      type?: string
+    ): void => {
       const isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return

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

@@ -47,7 +47,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
       selected,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const colspan: number = selectable ? columns.length + 1 : columns.length
     const _columns = useMemo(() => getColumns(columns), [columns])
@@ -71,26 +71,19 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                     onRowClick(
                       item,
                       trIndex + firstItemOnActivePageIndex,
-                      getClickedColumnName(
-                        event.target as HTMLElement,
-                        columnNames,
-                        selectable,
-                      ),
-                      event,
+                      getClickedColumnName(event.target as HTMLElement, columnNames, selectable),
+                      event
                     )
                   }
                 >
                   {selectable && (
                     <CTableDataCell>
                       <CFormCheck
-                        checked={
-                          selected &&
-                          isObjectInArray(selected, item, ITEM_INTERNAL_KEYS)
-                        }
+                        checked={selected && isObjectInArray(selected, item, ITEM_INTERNAL_KEYS)}
                         disabled={item._selectable === false}
                         onChange={(event) => {
                           const _item = { ...item }
-                          for (const key of ITEM_INTERNAL_KEYS ) {
+                          for (const key of ITEM_INTERNAL_KEYS) {
                             delete _item[key]
                           }
                           onRowChecked && onRowChecked(_item, event.target.checked)
@@ -104,10 +97,13 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       (scopedColumns &&
                         scopedColumns[colName] &&
                         React.cloneElement(
-                          scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
+                          scopedColumns[colName]!(
+                            item,
+                            trIndex + firstItemOnActivePageIndex
+                          ) as React.ReactElement,
                           {
                             key: index,
-                          },
+                          }
                         )) ||
                       (item[colName] !== undefined && (
                         <CTableDataCell
@@ -115,7 +111,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           style={getTableDataCellStyles(column, item, colName)}
                           key={index}
                         >
-                          {item[colName]}
+                          {item[colName] as React.ReactNode}
                         </CTableDataCell>
                       ))
                     )
@@ -148,7 +144,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         )}
       </CTableBody>
     )
-  },
+  }
 )
 
 CSmartTableBody.propTypes = {

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

@@ -19,7 +19,7 @@ export const CSmartTableFilter = forwardRef<HTMLInputElement, CSmartTableFilterP
         </div>
       </div>
     )
-  },
+  }
 )
 
 CSmartTableFilter.propTypes = {

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

@@ -24,7 +24,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilterState?: ColumnFilterValue
   columnSorter?: boolean | Sorter
   columns: (Column | string)[]
-  handleOnCustomFilterChange?: (key: string, value: any) => void
+  handleOnCustomFilterChange?: (key: string, value: string | number) => void
   handleFilterOnChange?: (key: string, value: string) => void
   handleFilterOnInput?: (key: string, value: string) => void
   handleSelectAllChecked?: () => void
@@ -65,7 +65,7 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
         sortingIconDescending,
         ...rest
       },
-      ref,
+      ref
     ) => {
       const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
       const _columns = useMemo(() => getColumns(columns), [columns])
@@ -174,11 +174,11 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                       typeof column !== 'string' && typeof column.filter === 'function' ? (
                         column.filter(
                           getColumnValues(items, getColumnKey(column)),
-                          (value: any) =>
+                          (value: string | number) =>
                             handleOnCustomFilterChange &&
                             handleOnCustomFilterChange(getColumnKey(column), value),
                           columnFilterState && columnFilterState[getColumnKey(column)]
-                            ? columnFilterState[getColumnKey(column)]
+                            ? (columnFilterState[getColumnKey(column)] as string | number)
                             : undefined
                         )
                       ) : (
@@ -188,19 +188,19 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                             handleFilterOnInput &&
                             handleFilterOnInput(
                               getColumnKey(column),
-                              (event.target as HTMLInputElement).value,
+                              (event.target as HTMLInputElement).value
                             )
                           }
                           onChange={(event) =>
                             handleFilterOnChange &&
                             handleFilterOnChange(
                               getColumnKey(column),
-                              (event.target as HTMLInputElement).value,
+                              (event.target as HTMLInputElement).value
                             )
                           }
                           value={
                             columnFilterState && columnFilterState[getColumnKey(column)]
-                              ? columnFilterState[getColumnKey(column)]
+                              ? (columnFilterState[getColumnKey(column)] as string | number)
                               : ''
                           }
                           aria-label={`column name: '${getColumnLabel(column)}' filter input`}
@@ -216,7 +216,7 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
           )}
         </Component>
       )
-    },
+    }
   )
 
 CSmartTableHead.propTypes = {

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

@@ -1 +1 @@
-export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 
 import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
@@ -9,17 +9,17 @@ export type Column = {
   filter?:
     | boolean
     | ((
-        values: any[],
-        onChange: (value: any) => void,
-        state: ColumnFilterValue | undefined
+        values: unknown[],
+        onChange: (value: string | number) => void,
+        state: string | number | undefined
       ) => ReactNode)
   group?: string
   key: string
   label?: string
-  sorter?: boolean | ((a: any, b: any) => number)
-  _style?: any
+  sorter?: boolean | ((a: Item, b: Item) => number)
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
-  _colStyle?: any
+  _colStyle?: CSSProperties
   _colProps?: CTableDataCellProps
 }
 
@@ -29,7 +29,7 @@ export type ColumnFilter = {
 }
 
 export type ColumnFilterValue = {
-  [key: string]: any
+  [key: string]: string | number | ((value: unknown) => boolean)
 }
 
 export type FooterItem = {
@@ -44,13 +44,14 @@ export type Group = {
   group?: string
   key: string
   label?: string
-  _style?: any
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
 }
 
 export type Item = {
-  [key: string]: number | string | any
-  _cellProps?: any
+  [key: string]: unknown
+  _cellProps?: Record<string, CTableDataCellProps | undefined>
+  _cellStyle?: Record<string, CSSProperties | undefined>
   _props?: CTableRowProps
   _selectable?: boolean
   _selected?: boolean
@@ -71,7 +72,7 @@ export type Sorter = {
 }
 
 export type ScopedColumns = {
-  [key: string]: any
+  [key: string]: ((item: Item, index: number) => ReactNode) | undefined
   details?: (a: Item, b: number) => ReactNode
 }