@coreui/react-pro 5.0.0-alpha.0 → 5.0.0-alpha.1

package/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'tabs' | 'pills' | 'underline'
+  variant?: 'pills' | 'tabs' | 'underline'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['tabs', 'pills', 'underline']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 }
 
 CNav.displayName = 'CNav'

package/src/components/nav/CNavGroup.tsx

@@ -36,6 +36,13 @@ export interface CNavGroupProps {
   idx?: string
 }
 
+const isInVisibleGroup = (el1: string, el2: string) => {
+  const array1 = el1.toString().split('.')
+  const array2 = el2.toString().split('.')
+
+  return array2.every((item, index) => item === array1[index])
+}
+
 export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
   ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {
     const [height, setHeight] = useState<number | string>()
@@ -45,12 +52,12 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
 
     const [_visible, setVisible] = useState(
       Boolean(
-        visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())),
+        visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)),
       ),
     )
 
     useEffect(() => {
-      setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))
+      setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
     }, [visibleGroup])
 
     const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {

package/src/components/navbar/CNavbar.tsx

@@ -17,7 +17,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   color?: Colors
   /**
-   * Sets if the color of text should be colored for a light or dark dark background.
+   * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
   /**
@@ -59,12 +59,12 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
           'navbar',
           {
             [`bg-${color}`]: color,
-            [`navbar-${colorScheme}`]: colorScheme,
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
           className,
         )}
+        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
         ref={ref}
       >

package/src/components/offcanvas/COffcanvas.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
@@ -17,6 +17,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Sets a darker color scheme.
+   */
+  dark?: boolean
   /**
    * Closes the offcanvas when escape key is pressed.
    */
@@ -59,6 +63,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       children,
       backdrop = true,
       className,
+      dark,
       keyboard = true,
       onHide,
       onShow,
@@ -135,6 +140,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
                 role="dialog"
                 tabIndex={-1}
                 onKeyDown={handleKeyDown}
+                {...(dark && { 'data-coreui-theme': 'dark' })}
                 {...rest}
                 ref={forkedRef}
               >
@@ -161,6 +167,7 @@ COffcanvas.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  dark: PropTypes.bool,
   keyboard: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/components/popover/CPopover.tsx

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group'
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -164,7 +164,7 @@ export const CPopover: FC<CPopoverProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: 200,
+              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
             }}
             unmountOnExit
           >

package/src/components/sidebar/CSidebar.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'

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

@@ -409,6 +409,8 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
             )}
             <CSmartTableBody
               clickableRows={clickableRows}
+              columnNames={columnNames}
+              columns={columns ?? columnNames}
               currentItems={currentItems}
               firstItemOnActivePageIndex={firstItemOnActivePageIndex}
               noItemsLabel={noItemsLabel}
@@ -416,7 +418,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 clickableRows && onRowClick && onRowClick(item, index, columnName, event)
               }
               onRowChecked={(item, value) => handleRowChecked(item, value)}
-              columnNames={columnNames}
               scopedColumns={scopedColumns}
               selectable={selectable}
               selected={_selected}

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

@@ -7,12 +7,13 @@ import { CTableDataCell, CTableRow } from '../table'
 
 import { isObjectInArray } from '../../utils'
 
-import type { Item, ScopedColumns } from './types'
-import { getClickedColumnName, getTableDataCellProps } from './utils'
+import type { Column, Item, ScopedColumns } from './types'
+import { getClickedColumnName, getColumnName, getTableDataCellProps, getTableDataCellStyles } from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
   columnNames: string[]
+  columns: (Column | string)[]
   currentItems: Item[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
@@ -28,6 +29,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     {
       clickableRows,
       columnNames,
+      columns,
       currentItems,
       firstItemOnActivePageIndex,
       noItemsLabel,
@@ -40,7 +42,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     },
     ref,
   ) => {
-    const colspan: number = selectable ? columnNames.length + 1 : columnNames.length
+    const colspan: number = selectable ? columns.length + 1 : columns.length
 
     return (
       <CTableBody
@@ -84,7 +86,8 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       />
                     </CTableDataCell>
                   )}
-                  {columnNames.map((colName, index) => {
+                  {columns.map((column, index) => {
+                    const colName = getColumnName(column)
                     return (
                       (scopedColumns &&
                         scopedColumns[colName] &&
@@ -95,7 +98,10 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           },
                         )) ||
                       (item[colName] !== undefined && (
-                        <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
+                        <CTableDataCell 
+                          {...getTableDataCellProps(column, item, colName)}
+                          style={getTableDataCellStyles(column, item, colName)}
+                          key={index}>
                           {item[colName]}
                         </CTableDataCell>
                       ))

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

@@ -115,9 +115,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   itemsPerPageOptions?: number[]
   /**
    * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
-   * - label (String) - replaces default label text
-   * - values (Array) - custom array of pagination values
-   * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
+   * - external (Boolean) - disables automatic 'itemsPerPage' change.
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect
   /**

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

@@ -13,6 +13,8 @@ export type Column = {
   sorter?: boolean
   _style?: any
   _props?: CTableHeaderCellProps
+  _colStyle?: any
+  _colProps?: CTableDataCellProps
 }
 
 export type ColumnFilter = {
@@ -49,8 +51,6 @@ export type Item = {
 
 export type ItemsPerPageSelect = {
   external?: boolean
-  label?: string
-  values?: Array<number>
 }
 
 export type Pagination = {

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

@@ -65,7 +65,7 @@ export const getClickedColumnName = (
   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)]
+  return columnNames[children.indexOf(clickedCell) - 1]
 }
 
 export const getColumnKey = (column: Column | string) =>
@@ -78,6 +78,14 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
+export const getColumnName = (column: string | Column) => {
+  if (typeof column === 'object') {
+    return column.key
+  }
+
+  return column
+}
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -217,15 +225,42 @@ export const getColumnValues = (items: Item[], key: string) => {
   return items.map((item) => item[key])
 }
 
-export const getTableDataCellProps = (item: Item, colName: string) => {
-  const props = item._cellProps && {
-    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
+  const props = {}
+
+  if (typeof column === 'object' && column._colProps) {
+    Object.assign(props, column._colProps)
+  }
+
+  if (item._cellProps && item._cellProps['all']) {
+    Object.assign(props, item._cellProps['all'])
+  }
+
+  if (item._cellProps && item._cellProps[colName]) {
+    Object.assign(props, item._cellProps[colName])
   }
 
   return props
 }
 
+export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
+  const styles = {}
+
+  if (typeof column === 'object' && column._colStyle) {
+    Object.assign(styles, column._colStyle)
+  }
+
+  if (item._cellStyle && item._cellStyle['all']) {
+    Object.assign(styles, item._cellStyle['all'])
+  }
+
+  if (item._cellStyle && item._cellStyle[colName]) {
+    Object.assign(styles, item._cellStyle[colName])
+  }
+
+  return styles
+}
+
 export const getTableHeaderCellProps = (column: Column | string) => {
   if (typeof column === 'object' && column._props) {
     return column._props

package/src/components/time-picker/CTimePicker.tsx

@@ -171,7 +171,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
     const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
     const [initialDate, setInitialDate] = useState<Date | null>(null)
-    const [isValid, setIsValid] = useState(valid || (invalid && false))
+    const [isValid, setIsValid] = useState(valid ?? (invalid === true ? false : undefined))
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
     const [_visible, setVisible] = useState(visible)
 
@@ -187,7 +187,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }, [time])
 
     useEffect(() => {
-      setIsValid(valid || (invalid && false))
+      setIsValid(valid ?? (invalid === true ? false : undefined))
     }, [valid, invalid])
 
     useEffect(() => {

package/src/components/time-picker/utils.ts

@@ -16,7 +16,11 @@ export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
 export const convert24hTo12h = (hour: number) => hour % 12 || 12
 
 export const convertTimeToDate = (time: Date | string | null | undefined) =>
-  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+  time
+    ? time instanceof Date
+      ? time
+      : new Date(`1970-01-01 ${time}`)
+    : null
 
 export const getAmPm = (date: Date, locale: string) => {
   if (date.toLocaleTimeString(locale).includes('AM')) {

package/src/components/tooltip/CTooltip.tsx

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group'
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
@@ -158,7 +158,7 @@ export const CTooltip: FC<CTooltipProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: 200,
+              exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
             }}
             unmountOnExit
           >

package/src/hooks/usePopper.ts

@@ -2,6 +2,8 @@ import { useRef } from 'react'
 import { createPopper } from '@popperjs/core'
 import type { Instance, Options } from '@popperjs/core'
 
+import { executeAfterTransition } from '../utils'
+
 interface UsePopperOutput {
   popper: Instance | undefined
   initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
@@ -10,14 +12,20 @@ interface UsePopperOutput {
 
 export const usePopper = (): UsePopperOutput => {
   const _popper = useRef<Instance>()
+  const el = useRef<HTMLElement>()
 
   const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
     _popper.current = createPopper(reference, popper, options)
+    el.current = popper
   }
 
   const destroyPopper = () => {
-    if (_popper.current) {
-      _popper.current.destroy()
+    const popperInstance = _popper.current
+
+    if (popperInstance && el.current) {
+      executeAfterTransition(() => {
+        popperInstance.destroy()
+      }, el.current)
     }
 
     _popper.current = undefined

package/src/utils/executeAfterTransition.ts

@@ -0,0 +1,46 @@
+import getTransitionDurationFromElement from './getTransitionDurationFromElement'
+
+const execute = (callback: () => void) => {
+  if (typeof callback === 'function') {
+    callback()
+  }
+}
+
+const triggerTransitionEnd = (element: HTMLElement) => {
+  element.dispatchEvent(new Event('transitionend'))
+}
+
+const executeAfterTransition = (
+  callback: () => void,
+  transitionElement: HTMLElement,
+  waitForTransition = true,
+) => {
+  if (!waitForTransition) {
+    execute(callback)
+    return
+  }
+
+  const durationPadding = 5
+  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+  let called = false
+
+  const handler = ({ target }: { target: any }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener('transitionend', handler)
+    execute(callback)
+  }
+
+  transitionElement.addEventListener('transitionend', handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
+export default executeAfterTransition

package/src/utils/getTransitionDurationFromElement.ts

@@ -0,0 +1,24 @@
+const getTransitionDurationFromElement = (element: HTMLElement) => {
+  if (!element) {
+    return 0
+  }
+
+  // Get transition-duration of the element
+  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+
+  const floatTransitionDuration = Number.parseFloat(transitionDuration)
+  const floatTransitionDelay = Number.parseFloat(transitionDelay)
+
+  // Return 0 if element or transition duration is not found
+  if (!floatTransitionDuration && !floatTransitionDelay) {
+    return 0
+  }
+
+  // If multiple durations are defined, take the first
+  transitionDuration = transitionDuration.split(',')[0]
+  transitionDelay = transitionDelay.split(',')[0]
+
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
+}
+
+export default getTransitionDurationFromElement

package/src/utils/index.ts

@@ -1,6 +1,15 @@
+import executeAfterTransition from './executeAfterTransition'
 import getRTLPlacement from './getRTLPlacement'
+import getTransitionDurationFromElement from './getTransitionDurationFromElement'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
 
-export { getRTLPlacement, isInViewport, isObjectInArray, isRTL }
+export {
+  executeAfterTransition,
+  getRTLPlacement,
+  getTransitionDurationFromElement,
+  isInViewport,
+  isObjectInArray,
+  isRTL,
+}