@coreui/react-pro 4.11.0-next.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.11.0-next.0",
+  "version": "4.11.0",
   "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
   /**
@@ -174,8 +174,10 @@ const Calendar = (props: {
   onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCellMouseEnter: (date: Date) => void
   onCellMouseLeave: () => void
-  onMonthClick: (month: number, view: string) => void
-  onYearClick: (date: Date, view: string) => void
+  onMonthClick: (month: number) => void
+  onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
+  onYearClick: (date: Date) => void
+  onYearKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
   showAdjacementDays: boolean
@@ -199,7 +201,9 @@ const Calendar = (props: {
     onCellMouseEnter,
     onCellMouseLeave,
     onMonthClick,
+    onMonthKeyDown,
     onYearClick,
+    onYearKeyDown,
     selectAdjacementDays,
     selectEndDate,
     showAdjacementDays,
@@ -258,6 +262,7 @@ const Calendar = (props: {
                         today: month === 'current' && isToday(date),
                         disabled: isDateDisabled(date, minDate, maxDate, disabledDates),
                         [month]: true,
+                        clickable: month !== 'current' && selectAdjacementDays,
                         last: isLastDayOfMonth(date),
                         'range-hover':
                           month === 'current' &&
@@ -270,7 +275,12 @@ const Calendar = (props: {
                         end: isEndDate(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={0}
+                      tabIndex={
+                        (month === 'current' || selectAdjacementDays) &&
+                        !isDateDisabled(date, minDate, maxDate, disabledDates)
+                          ? 0
+                          : -1
+                      }
                       title={date.toLocaleDateString(locale)}
                       {...((month === 'current' || selectAdjacementDays) && {
                         onBlur: () => onCellMouseLeave(),
@@ -305,9 +315,11 @@ const Calendar = (props: {
                 {row.map((month, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell month"
-                      onClick={() => onMonthClick(index * 3 + idx - addMonths, 'days')}
+                      key={idx}
+                      onClick={() => onMonthClick(index * 3 + idx - addMonths)}
+                      onKeyDown={(event) => onMonthKeyDown(event, index * 3 + idx - addMonths)}
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">{month}</div>
                     </td>
@@ -323,14 +335,18 @@ const Calendar = (props: {
                 {row.map((year, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell year"
+                      key={idx}
                       onClick={() =>
-                        onYearClick(
+                        onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()))
+                      }
+                      onKeyDown={(event) =>
+                        onYearKeyDown(
+                          event,
                           new Date(year, date.getMonth() - addMonths, date.getDate()),
-                          'months',
                         )
                       }
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">
                         {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
@@ -648,6 +664,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
+    const handleMonthClick = (month: number) => {
+      setCalendarPage(0, 0, month)
+      setView('days')
+    }
+
+    const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarPage(0, 0, month)
+        setView('days')
+      }
+    }
+
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
@@ -679,6 +707,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
+    const handleYearClick = (date: Date) => {
+      setCalendarDate(date)
+      setView('months')
+    }
+
+    const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarDate(date)
+        setView('months')
+      }
+    }
+
     return (
       <div className={classNames('calendars', className)}>
         {_calendarDate &&
@@ -714,14 +754,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 onCellKeyDown={(event, date) => handleCellKeyDown(event, date, index)}
                 onCellMouseEnter={handleCellMouseEnter}
                 onCellMouseLeave={handleCellMouseLeave}
-                onMonthClick={(month, view) => {
-                  setCalendarPage(0, 0, month)
-                  setView(view)
-                }}
-                onYearClick={(date, view) => {
-                  setCalendarDate(date)
-                  setView(view)
-                }}
+                onMonthClick={handleMonthClick}
+                onMonthKeyDown={handleMonthKeyDown}
+                onYearClick={handleYearClick}
+                onYearKeyDown={handleYearKeyDown}
                 selectEndDate={_selectEndDate}
                 selectAdjacementDays={selectAdjacementDays}
                 showAdjacementDays={showAdjacementDays}

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
   /**
@@ -249,6 +249,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+        event.preventDefault()
+
         if (userOption) {
           setSelected([...selected, ...userOption])
           setUserOptions([...userOptions, ...userOption])

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,12 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           {
                             key: index,
                           },
-                        )) || (
+                        )) ||
+                      (item[colName] && (
                         <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