@coreui/react-pro 4.11.0-next.1 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.11.0-next.1",
+  "version": "4.11.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -64,7 +64,7 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.4.4",
+    "@coreui/coreui-pro": ">=4.5.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/accordion/index.ts

@@ -1,7 +1,6 @@
 import { CAccordion } from './CAccordion'
 import { CAccordionBody } from './CAccordionBody'
 import { CAccordionButton } from './CAccordionButton'
-import { CAccordionCollapse } from './CAccordionCollapse'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
@@ -9,7 +8,6 @@ export {
   CAccordion,
   CAccordionBody,
   CAccordionButton,
-  CAccordionCollapse,
   CAccordionHeader,
   CAccordionItem,
 }

package/src/components/calendar/CCalendar.tsx

@@ -106,13 +106,13 @@ export interface CCalendarProps {
   /**
    * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
    *
-   * @since 4.11.0-next.0
+   * @since 4.11.0
    */
   selectAdjacementDays?: boolean
   /**
    * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
    *
-   * @since 4.11.0-next.0
+   * @since 4.11.0
    */
   showAdjacementDays?: boolean
   /**

package/src/components/dropdown/CDropdown.tsx

@@ -78,6 +78,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * If you want to disable dynamic positioning set this property to `true`.
    */
   popper?: boolean
+  /**
+   * Generates dropdown menu using createPortal.
+   *
+   * @since 4.8.0
+   */
+  portal?: boolean
   /**
    * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
    */
@@ -88,13 +94,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
-const PopperManagerWrapper = ({
-  children,
-  popper,
-}: {
-  children: ReactNode
-  popper: boolean
-}) => {
+const PopperManagerWrapper = ({ children, popper }: { children: ReactNode; popper: boolean }) => {
   return popper ? <Manager>{children}</Manager> : <>{children}</>
 }
 
@@ -102,6 +102,7 @@ interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  portal: boolean
 }
 
 export const CDropdownContext = createContext({} as ContextProps)
@@ -119,6 +120,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       onShow,
       placement = 'bottom-start',
       popper = true,
+      portal = false,
       variant = 'btn-group',
       component = 'div',
       visible = false,
@@ -146,6 +148,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       dropdownToggleRef,
       placement: placement,
       popper,
+      portal: portal,
       variant,
       visible: _visible,
       setVisible,
@@ -172,7 +175,8 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
                 {
                   'dropdown-center': direction === 'center',
                   'dropup dropup-center': direction === 'dropup-center',
-                  direction: direction && direction !== 'center' && direction !== 'dropup-center',
+                  [`${direction}`]:
+                    direction && direction !== 'center' && direction !== 'dropup-center',
                   show: _visible,
                 },
                 className,
@@ -215,6 +219,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,
 }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
 
@@ -30,6 +31,21 @@ export interface CDropdownMenuProps
   component?: string | ElementType
 }
 
+const alignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    Object.keys(alignment).map((key) => {
+      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+    })
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+
+  return classNames
+}
+
 export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   children,
   className,
@@ -44,6 +60,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     dropdownToggleRef,
     placement,
     popper,
+    portal,
     visible,
     setVisible,
   } = useContext(CDropdownContext)
@@ -111,48 +128,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     _placement = 'bottom-end'
   }
 
-  const alignmentClassNames = (alignment: Alignments) => {
-    const classNames: string[] = []
-    if (typeof alignment === 'object') {
-      Object.keys(alignment).map((key) => {
-        classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-      })
-    }
-
-    if (typeof alignment === 'string') {
-      classNames.push(`dropdown-menu-${alignment}`)
-    }
-
-    return classNames
-  }
-
   const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
-    <Component
-      className={classNames(
-        'dropdown-menu',
-        {
-          'dropdown-menu-dark': dark,
-          show: visible,
-        },
-        alignment && alignmentClassNames(alignment),
-        className,
-      )}
-      ref={ref}
-      style={style}
-      role="menu"
-      aria-hidden={!visible}
-      {...(!popper && { 'data-coreui-popper': 'static' })}
-      {...rest}
-    >
-      {Component === 'ul'
-        ? React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child)) {
-              return <li key={index}>{React.cloneElement(child)}</li>
-            }
-            return
-          })
-        : children}
-    </Component>
+    <CConditionalPortal portal={portal ?? false}>
+      <Component
+        className={classNames(
+          'dropdown-menu',
+          {
+            'dropdown-menu-dark': dark,
+            show: visible,
+          },
+          alignment && alignmentClassNames(alignment),
+          className,
+        )}
+        ref={ref}
+        style={style}
+        role="menu"
+        aria-hidden={!visible}
+        {...(!popper && { 'data-coreui-popper': 'static' })}
+        {...rest}
+      >
+        {Component === 'ul'
+          ? React.Children.map(children, (child, index) => {
+              if (React.isValidElement(child)) {
+                return <li key={index}>{React.cloneElement(child)}</li>
+              }
+              return
+            })
+          : children}
+      </Component>
+    </CConditionalPortal>
   )
 
   return popper && visible ? (

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

@@ -29,7 +29,7 @@ export interface CMultiSelectProps
   /**
    * Allow users to create options if they are not in the list of options.
    *
-   * @since 4.11.0-next.0
+   * @since 4.11.0
    */
   allowCreateOptions?: boolean
   /**
@@ -43,7 +43,7 @@ export interface CMultiSelectProps
   /**
    * Clear current search on selecting an item.
    *
-   * @since 4.11.0-next.0
+   * @since 4.11.0
    */
   clearSearchOnSelect?: boolean
   /**
@@ -53,7 +53,7 @@ export interface CMultiSelectProps
   /**
    * When set, the options list will have a loading style: loading spinner and reduced opacity.
    *
-   * @since 4.11.0-next.0
+   * @since 4.11.0
    */
   loading?: boolean
   /**

package/src/components/offcanvas/COffcanvas.tsx

@@ -80,11 +80,9 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        if (!scroll) {
-          document.body.style.overflow = 'hidden'
-          document.body.style.paddingRight = '0px'
-        }
+      if (_visible && !scroll) {
+        document.body.style.overflow = 'hidden'
+        document.body.style.paddingRight = '0px'
         return
       }
 

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

@@ -88,9 +88,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>({})
     const [selectedAll, setSelectedAll] = useState<boolean | string>()
     const [sorterState, setSorterState] = useState<SorterValue>({})
-    const [tableFilterState, setTableFilterState] = useState<string>(
-      tableFilterValue ? tableFilterValue : '',
-    )
+    const [tableFilterState, setTableFilterState] = useState<string>(tableFilterValue ?? '')
 
     useEffect(() => {
       setActivePage(activePage)
@@ -170,7 +168,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
           return
         }
 
-        if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+        if (_selected.length > 0 && _selected.length !== _itemsNumber) {
           setSelectedAll('indeterminate')
         }
       }
@@ -420,6 +418,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 selectable={selectable}
                 selectAll={selectAll}
                 selectedAll={selectedAll}
+                showGroups={false}
               />
             )}
             {Array.isArray(footer) && (

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

@@ -51,7 +51,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.length ? (
+        {currentItems.length > 0 ? (
           currentItems.map((item: Item, trIndex) => {
             return (
               <React.Fragment key={trIndex}>
@@ -94,11 +94,13 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           {
                             key: index,
                           },
-                        )) || (
+                        )) ||
+                      // eslint-disable-next-line unicorn/no-typeof-undefined
+                      (typeof item[colName] !== 'undefined' && (
                         <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
                           {String(item[colName])}
                         </CTableDataCell>
-                      )
+                      ))
                     )
                   })}
                 </CTableRow>

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

@@ -1,4 +1,12 @@
-import React, { ElementType, forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 
 import { CFormCheck, CFormInput } from '../form'
@@ -8,6 +16,8 @@ import { CTableHead, CTableHeadProps } from '../table/CTableHead'
 import {
   getColumnKey,
   getColumnLabel,
+  getColumnGroups,
+  getColumns,
   getColumnSorterState,
   getColumnValues,
   getTableHeaderCellProps,
@@ -31,6 +41,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   selectable?: boolean
   selectAll?: boolean | { external?: boolean }
   selectedAll?: boolean | string
+  showGroups?: boolean
   sorterState?: SorterValue
   sortingIcon?: ReactNode
   sortingIconAscending?: ReactNode
@@ -54,6 +65,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
       selectable,
       selectAll,
       selectedAll,
+      showGroups = true,
       sorterState,
       sortingIcon,
       sortingIconAscending,
@@ -65,6 +77,9 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
     const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
     const [refresh, setRefresh] = useState(false)
 
+    const _columns = useMemo(() => getColumns(columns), [columns])
+    const groups = useMemo(() => getColumnGroups(columns), [columns])
+
     useEffect(() => {
       if (selectedAll === 'indeterminate') {
         if (selectAllcheckboxRef.current) selectAllcheckboxRef.current.indeterminate = true
@@ -107,6 +122,23 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
 
     return (
       <Component {...rest} ref={ref}>
+        {showGroups &&
+          groups &&
+          groups.length > 0 &&
+          groups.map((row, index) => (
+            <CTableRow key={index}>
+              {selectable && <CTableHeaderCell></CTableHeaderCell>}
+              {row.map((cell, index) => (
+                <CTableHeaderCell
+                  colSpan={cell.colspan}
+                  {...getTableHeaderCellProps(cell)}
+                  key={index}
+                >
+                  {cell.label}
+                </CTableHeaderCell>
+              ))}
+            </CTableRow>
+          ))}
         <CTableRow>
           {selectable && (
             <CTableHeaderCell>
@@ -119,7 +151,7 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
               )}
             </CTableHeaderCell>
           )}
-          {columns.map((column: Column | string, index: number) => {
+          {_columns.map((column: Column | string, index: number) => {
             return (
               <CTableHeaderCell
                 {...getTableHeaderCellProps(column)}
@@ -129,11 +161,11 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
               >
                 <div className="d-inline">{getColumnLabel(column)}</div>
                 {columnSorter &&
-                  (typeof column !== 'object'
+                  (typeof column === 'object'
+                    ? typeof column.sorter === 'undefined'
                     ? true
-                    : typeof column.sorter === 'undefined'
-                    ? true
-                    : column.sorter) &&
+                    : column.sorter
+                    : true) &&
                   columnSorterIcon(column)}
               </CTableHeaderCell>
             )
@@ -142,15 +174,15 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
         {columnFilter && (
           <CTableRow>
             {selectable && <CTableHeaderCell></CTableHeaderCell>}
-            {columns.map((column: Column | string, index: number) => {
+            {_columns.map((column: Column | string, index: number) => {
               return (
                 <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
                   {(
-                    typeof column !== 'object'
-                      ? true
-                      : typeof column.filter === 'undefined'
+                    typeof column === 'object'
+                      ? column.filter === undefined
                       ? true
                       : column.filter
+                      : true
                   ) ? (
                     typeof column !== 'string' && typeof column.filter === 'function' ? (
                       !refresh &&

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

@@ -5,7 +5,9 @@ import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
 import { CTableRowProps } from '../table/CTableRow'
 
 export type Column = {
+  children?: Column[]
   filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode)
+  group?: string
   key: string
   label?: string
   sorter?: boolean
@@ -27,6 +29,17 @@ export type FooterItem = {
   _props?: CTableDataCellProps
 }
 
+export type Group = {
+  children?: Group[] | Column[]
+  colspan?: number
+  deep?: number
+  group?: string
+  key: string
+  label?: string
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
 export type Item = {
   [key: string]: number | string | any
   _cellProps?: any

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

@@ -2,6 +2,7 @@ import type {
   Column,
   ColumnFilter,
   ColumnFilterValue,
+  Group,
   Item,
   Sorter,
   SorterValue,
@@ -77,12 +78,130 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
-export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
-  columns
-    ? columns.map((column: Column | string) => {
-        return typeof column === 'object' ? column.key : column
+// export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
+//   columns
+//     ? columns.map((column: Column | string) => {
+//         return typeof column === 'object' ? column.key : column
+//       })
+//     : getColumnNamesFromItems(items)
+
+export const getColumnNames = (
+  columns: (string | Column)[] | undefined,
+  items: Item[],
+): string[] => {
+  if (columns) {
+    const _columns = []
+
+    for (const column of columns) {
+      if (typeof column === 'object' && column.children) {
+        _columns.push(...getColumnNames(column.children, []))
+        continue
+      }
+
+      typeof column === 'object' ? _columns.push(column.key) : _columns.push(column)
+    }
+
+    return _columns
+  }
+
+  return getColumnNamesFromItems(items)
+}
+
+export const getColumns = (_columns: (Column | Group | string)[]): (Column | string)[] => {
+  const columns = []
+
+  for (const column of _columns) {
+    if (typeof column === 'object' && column.group && column.children) {
+      columns.push(...getColumns(column.children))
+      continue
+    }
+
+    if (typeof column === 'object' && column.children) {
+      columns.push(...getColumns(column.children))
+    }
+
+    columns.push(column)
+  }
+
+  return columns
+}
+
+export const countColumns = (columns: Column[], counter = 0) => {
+  let _counter = counter
+  for (const column of columns) {
+    if (!column.children) {
+      _counter++
+    }
+
+    if (column.children) {
+      _counter = countColumns(column.children, _counter)
+    }
+  }
+
+  return _counter
+}
+
+export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
+  const groups = []
+
+  const traverseColumns = (column: Column, deep = 0, colSpan = 0): Group[] => {
+    const groups = []
+
+    if (column.children) {
+      for (const _column of column.children) {
+        if (!_column.group) {
+          colSpan++
+        }
+        groups.push(...traverseColumns(_column, deep + 1, colSpan))
+      }
+    }
+
+    if (typeof column === 'object' && column.group) {
+      const { children, group, ...rest } = column
+      groups.push({
+        deep: deep,
+        label: group,
+        ...(children && { colspan: countColumns(children) }),
+        ...rest,
       })
-    : getColumnNamesFromItems(items)
+    }
+
+    return groups
+  }
+
+  if (columns) {
+    for (const column of columns) {
+      if (typeof column === 'object' && column.group) {
+        const objects = traverseColumns(column)
+
+        if (objects) {
+          for (const object of objects) {
+            const { deep, ...rest } = object
+
+            if (deep === undefined) {
+              continue
+            }
+
+            for (let i = 0; i < deep; i++) {
+              if (groups[i]) {
+                continue
+              }
+
+              groups.push([])
+            }
+
+            if (groups[deep]) {
+              groups[deep].push(rest)
+            } else {
+              groups.push([rest])
+            }
+          }
+        }
+      }
+    }
+  }
+  return groups
+}
 
 export const getColumnNamesFromItems = (items: Item[]) =>
   Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')