@coreui/react-pro 5.0.0-alpha.3 → 5.0.0-beta.1

package/src/components/popover/CPopover.tsx

@@ -1,10 +1,11 @@
-import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+// import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
 
-import { usePopper } from '../../hooks'
+import { CConditionalPortal } from '../conditional-portal'
+import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
 import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -20,6 +21,12 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Content node for your component.
    */
@@ -68,94 +75,100 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   visible?: boolean
 }
 
-export const CPopover: FC<CPopoverProps> = ({
-  children,
-  animation = true,
-  className,
-  content,
-  delay = 0,
-  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-  offset = [0, 8],
-  onHide,
-  onShow,
-  placement = 'top',
-  title,
-  trigger = 'click',
-  visible,
-  ...rest
-}) => {
-  const popoverRef = useRef(null)
-  const togglerRef = useRef(null)
-  const { initPopper, destroyPopper } = usePopper()
-  const [_visible, setVisible] = useState(visible)
+export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
+  (
+    {
+      children,
+      animation = true,
+      className,
+      container,
+      content,
+      delay = 0,
+      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
+      offset = [0, 8],
+      onHide,
+      onShow,
+      placement = 'top',
+      title,
+      trigger = 'click',
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const popoverRef = useRef(null)
+    const togglerRef = useRef(null)
+    const forkedRef = useForkedRef(ref, popoverRef)
 
-  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const { initPopper, destroyPopper } = usePopper()
+    const [_visible, setVisible] = useState(visible)
 
-  const popperConfig = {
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.popover-arrow',
+    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.popover-arrow',
+          },
         },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: fallbackPlacements,
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: fallbackPlacements,
+          },
         },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
         },
-      },
-    ],
-    placement: getRTLPlacement(placement, togglerRef.current),
-  }
+      ],
+      placement: getRTLPlacement(placement, togglerRef.current),
+    }
 
-  useEffect(() => {
-    setVisible(visible)
-  }, [visible])
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
 
-  useEffect(() => {
-    if (_visible && togglerRef.current && popoverRef.current) {
-      initPopper(togglerRef.current, popoverRef.current, popperConfig)
-    }
+    useEffect(() => {
+      if (_visible && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, popperConfig)
+      }
 
-    return () => {
-      destroyPopper()
-    }
-  }, [_visible])
+      return () => {
+        destroyPopper()
+      }
+    }, [_visible])
 
-  const toggleVisible = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => setVisible(true), _delay.show)
-      return
-    }
+    const toggleVisible = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => setVisible(true), _delay.show)
+        return
+      }
 
-    setTimeout(() => setVisible(false), _delay.hide)
-  }
+      setTimeout(() => setVisible(false), _delay.hide)
+    }
 
-  return (
-    <>
-      {React.cloneElement(children as React.ReactElement<any>, {
-        ref: togglerRef,
-        ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => toggleVisible(!_visible),
-        }),
-        ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => toggleVisible(true),
-          onBlur: () => toggleVisible(false),
-        }),
-        ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => toggleVisible(true),
-          onMouseLeave: () => toggleVisible(false),
-        }),
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          ref: togglerRef,
+          ...((trigger === 'click' || trigger.includes('click')) && {
+            onClick: () => toggleVisible(!_visible),
+          }),
+          ...((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: () => toggleVisible(true),
+            onBlur: () => toggleVisible(false),
+          }),
+          ...((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: () => toggleVisible(true),
+            onMouseLeave: () => toggleVisible(false),
+          }),
+        })}
+        <CConditionalPortal container={container} portal={true}>
           <Transition
             in={_visible}
             mountOnEnter
@@ -164,7 +177,9 @@ export const CPopover: FC<CPopoverProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
+              exit: popoverRef.current
+                ? getTransitionDurationFromElement(popoverRef.current) + 50
+                : 200,
             }}
             unmountOnExit
           >
@@ -179,7 +194,7 @@ export const CPopover: FC<CPopoverProps> = ({
                   },
                   className,
                 )}
-                ref={popoverRef}
+                ref={forkedRef}
                 role="tooltip"
                 {...rest}
               >
@@ -188,17 +203,18 @@ export const CPopover: FC<CPopoverProps> = ({
                 <div className="popover-body">{content}</div>
               </div>
             )}
-          </Transition>,
-          document.body,
-        )}
-    </>
-  )
-}
+          </Transition>
+        </CConditionalPortal>
+      </>
+    )
+  },
+)
 
 CPopover.propTypes = {
   animation: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  container: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   delay: PropTypes.oneOfType([
     PropTypes.number,

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { act, render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CPopover, CButton } from '../../../index'
 
 test('loads and displays CPopover component', async () => {

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CProgress } from '../../../index'
 
 test('loads and displays CProgress component', async () => {

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CProgressBar } from '../../../index'
 
 test('loads and displays CProgressBar component', async () => {

package/src/components/sidebar/CSidebar.tsx

@@ -87,14 +87,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
   ) => {
     const sidebarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, sidebarRef)
-    const [mobile, setMobile] = useState(false)
-    const [_visible, setVisible] = useState(visible)
+
     const [inViewport, setInViewport] = useState<boolean>()
+    const [mobile, setMobile] = useState(false)
+    const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
+    const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
+      visible !== undefined ? visible : overlaid ? false : true,
+    )
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-
-      setVisible(visible)
+      visible !== undefined && handleVisibleChange(visible)
     }, [visible])
 
     useEffect(() => {
@@ -104,7 +107,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     }, [inViewport])
 
     useEffect(() => {
-      mobile && visible && setVisible(false)
+      mobile && setVisibleMobile(false)
     }, [mobile])
 
     useEffect(() => {
@@ -132,8 +135,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       }
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile) {
+        setVisibleMobile(visible)
+        return
+      }
+
+      setVisibleDesktop(visible)
+    }
+
     const handleHide = () => {
-      setVisible(false)
+      handleVisibleChange(false)
     }
 
     const handleResize = () => {
@@ -182,8 +194,8 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
               [`sidebar-${position}`]: position,
               [`sidebar-${size}`]: size,
               'sidebar-narrow-unfoldable': unfoldable,
-              show: _visible === true && mobile,
-              hide: _visible === false && !mobile,
+              show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
+              hide: visibleDesktop === false && !mobile && !overlaid,
             },
             className,
           )}
@@ -195,7 +207,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
-            <CBackdrop className="sidebar-backdrop" visible={_visible} />,
+            <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
             document.body,
           )}
       </>

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
 } from '../../../index'

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarBrand } from '../../../index'
 
 test('loads and displays CSidebarBrand component', async () => {

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarFooter } from '../../../index'
 
 test('loads and displays CSidebarFooter component', async () => {

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarHeader } from '../../../index'
 
 test('loads and displays CSidebarHeader component', async () => {

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarNav } from '../../../index'
 
 test('loads and displays CSidebarNav component', async () => {

package/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarToggler } from '../../../index'
 
 test('loads and displays CSidebarToggler component', async () => {

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

@@ -25,6 +25,8 @@ import {
   sortItems,
 } from './utils'
 
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']
+
 export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
   (
     {
@@ -103,9 +105,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         items.forEach((item: Item) => {
           if (item._selected) {
             const _item = { ...item }
-            delete _item['_cellProps']
-            delete _item['_props']
-            delete _item['_selected']
+            for (const key of ITEM_INTERNAL_KEYS ) {
+              delete _item[key]
+            }
             selected.push(_item)
           }
         })
@@ -246,21 +248,25 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }
 
     const handleRowChecked = (item: Item, value: boolean) => {
-      if (value && !isObjectInArray(_selected, item, ['_cellProps', '_props', '_selected'])) {
+      if (
+        value &&
+        !isObjectInArray(_selected, item, ITEM_INTERNAL_KEYS)
+      ) {
         setSelected([..._selected, item])
         return
       }
 
       setSelected(
         _selected.filter(
-          (_item: Item) => !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']),
+          (_item: Item) =>
+            !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS),
         ),
       )
     }
 
     const handleSelectAllChecked = () => {
       if (selectedAll === true) {
-        setSelected([])
+        setSelected(_items.filter((item) => item._selectable === false))
         return
       }
 
@@ -270,16 +276,23 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return
       }
 
-      const selected = _items.map((item) => {
+      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))
+        return
+      }
+
+      const selected = selectable.map((item) => {
         return { ...item }
       })
 
       setSelected(
         selected.map((item) => {
-          delete item['_cellProps']
-          delete item['_props']
-          delete item['_selected']
-
+          for (const key of ITEM_INTERNAL_KEYS ) {
+            delete item[key]
+          }
+          
           return item
         }),
       )
@@ -315,7 +328,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       setSorterState({ ...state })
     }
 
-    const handleTableFilterChange = (value: string, type: string): void => {to
+    const handleTableFilterChange = (value: string, type: string): void => {
       const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return
@@ -474,7 +487,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         {(pagination || itemsPerPageSelect) && (
           <div className="row">
             <div className="col">
-              {((pagination && numberOfPages > 1) || paginationProps) && (
+              {((pagination && numberOfPages > 1) || (paginationProps && paginationProps.pages > 1)) && (
                 <CSmartPagination
                   activePage={_activePage}
                   onActivePageChange={(page) => {

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

@@ -1,14 +1,21 @@
-import React, { forwardRef, MouseEvent, ReactNode } from 'react'
+import React, { forwardRef, MouseEvent, ReactNode, useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 import { CTableBody, CTableBodyProps } from '../table/CTableBody'
 import { CFormCheck } from '../form'
 import { CTableDataCell, CTableRow } from '../table'
+import { ITEM_INTERNAL_KEYS } from './CSmartTable'
 
 import { isObjectInArray } from '../../utils'
 
 import type { Column, Item, ScopedColumns } from './types'
-import { getClickedColumnName, getColumnName, getTableDataCellProps, getTableDataCellStyles } from './utils'
+import {
+  getClickedColumnName,
+  getColumnName,
+  getColumns,
+  getTableDataCellProps,
+  getTableDataCellStyles,
+} from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
@@ -43,7 +50,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     ref,
   ) => {
     const colspan: number = selectable ? columns.length + 1 : columns.length
-
+    const _columns = useMemo(() => getColumns(columns), [columns])
     return (
       <CTableBody
         {...(clickableRows && {
@@ -64,7 +71,11 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                     onRowClick(
                       item,
                       trIndex + firstItemOnActivePageIndex,
-                      getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
+                      getClickedColumnName(
+                        event.target as HTMLTextAreaElement,
+                        columnNames,
+                        selectable,
+                      ),
                       event,
                     )
                   }
@@ -74,19 +85,20 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       <CFormCheck
                         checked={
                           selected &&
-                          isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
+                          isObjectInArray(selected, item, ITEM_INTERNAL_KEYS)
                         }
+                        disabled={item._selectable === false}
                         onChange={(event) => {
                           const _item = { ...item }
-                          delete _item['_cellProps']
-                          delete _item['_props']
-                          delete _item['_selected']
+                          for (const key of ITEM_INTERNAL_KEYS ) {
+                            delete _item[key]
+                          }
                           onRowChecked && onRowChecked(_item, event.target.checked)
                         }}
                       />
                     </CTableDataCell>
                   )}
-                  {columns.map((column, index) => {
+                  {_columns.map((column, index) => {
                     const colName = getColumnName(column)
                     return (
                       (scopedColumns &&
@@ -98,10 +110,11 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           },
                         )) ||
                       (item[colName] !== undefined && (
-                        <CTableDataCell 
+                        <CTableDataCell
                           {...getTableDataCellProps(column, item, colName)}
                           style={getTableDataCellStyles(column, item, colName)}
-                          key={index}>
+                          key={index}
+                        >
                           {item[colName]}
                         </CTableDataCell>
                       ))
@@ -118,19 +131,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                         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}`}
-                    >
+                    <CTableRow className="p-0" key={`details${trIndex}`}>
                       <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
                         {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
                       </CTableDataCell>

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

@@ -154,7 +154,6 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
             return (
               <CTableHeaderCell
                 {...getTableHeaderCellProps(column)}
-                // onClick={() => handleSort && handleSort(getColumnKey(column), index)}
                 style={getTableHeaderCellStyles(column, columnSorter)}
                 key={index}
                 {...(isSortable && {

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

@@ -46,6 +46,7 @@ export type Item = {
   [key: string]: number | string | any
   _cellProps?: any
   _props?: CTableRowProps
+  _selectable?: boolean
   _selected?: boolean
 }
 

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

@@ -61,11 +61,12 @@ export const filterTable = (
 export const getClickedColumnName = (
   target: HTMLTextAreaElement,
   columnNames: string[],
+  selectable: boolean | undefined
 ): string => {
   const closest = target.closest('tr')
   const children = closest ? Array.from(closest.children) : []
   const clickedCell = children.filter((child) => child.contains(target))[0]
-  return columnNames[children.indexOf(clickedCell) - 1]
+  return selectable ? columnNames[children.indexOf(clickedCell) - 1]  : columnNames[children.indexOf(clickedCell)]
 }
 
 export const getColumnKey = (column: Column | string) =>
@@ -280,7 +281,7 @@ export const getTableHeaderCellStyles = (
     (typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
   ) {
-    style['cursor'] = 'pointer'
+    (style as { [key: string]: string })['cursor'] = 'pointer'
   }
 
   if (typeof column === 'object' && column._style) {

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSpinner } from '../../../index'
 
 test('loads and displays CSpinner component', async () => {