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

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/components/widgets/CWidgetStatsA.tsx

@@ -41,7 +41,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
     return (
       <CCard
         className={classNames(
-          { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+          { [`bg-${color}`]: color, 'text-white': color },
           className,
         )}
         {...rest}

package/src/components/widgets/CWidgetStatsB.tsx

@@ -48,7 +48,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
       <CCard
         className={className}
         color={color}
-        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...(inverse && { textColor: 'white' })}
         {...rest}
         ref={ref}
       >
@@ -57,7 +57,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
           {title && <div>{title}</div>}
           <CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
           {text && (
-            <small className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+            <small className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
               {text}
             </small>
           )}

package/src/components/widgets/CWidgetStatsC.tsx

@@ -48,23 +48,15 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
       <CCard
         className={className}
         color={color}
-        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...(inverse && { textColor: 'white' })}
         {...rest}
         ref={ref}
       >
         <CCardBody>
-          {icon && (
-            <div className={`text-medium-emphasis${inverse ? '-inverse' : ''} text-end mb-4`}>
-              {icon}
-            </div>
-          )}
-          {value && (
-            <div className={`text-high-emphasis${inverse ? '-inverse' : ''} fs-4 fw-semibold`}>
-              {value}
-            </div>
-          )}
+          {icon && <div className="text-end mb-4">{icon}</div>}
+          {value && <div className="fs-4 fw-semibold">{value}</div>}
           {title && (
-            <div className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+            <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
               {title}
             </div>
           )}

package/src/components/widgets/CWidgetStatsD.tsx

@@ -61,7 +61,7 @@ export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
                   {index % 2 !== 0 && <div className="vr"></div>}
                   <CCol>
                     <div className="fs-5 fw-semibold">{value.value}</div>
-                    <div className="text-uppercase text-medium-emphasis small">{value.title}</div>
+                    <div className="text-uppercase text-body-secondary small">{value.title}</div>
                   </CCol>
                 </React.Fragment>
               )

package/src/components/widgets/CWidgetStatsE.tsx

@@ -29,7 +29,7 @@ export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
       <CCard className={classNames(className)} {...rest} ref={ref}>
         <CCardBody className="text-center">
           {title && (
-            <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>
+            <div className="text-body-secondary small text-uppercase fw-semibold">{title}</div>
           )}
           {value && <div className="fs-6 fw-semibold py-3">{value}</div>}
           {chart}

package/src/components/widgets/CWidgetStatsF.tsx

@@ -47,7 +47,7 @@ export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
           <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
           <div>
             <div className={`fs-6 fw-semibold text-${color}`}>{value}</div>
-            <div className="text-medium-emphasis text-uppercase fw-semibold small">{title}</div>
+            <div className="text-body-secondary text-uppercase fw-semibold small">{title}</div>
           </div>
         </CCardBody>
         {footer && <CCardFooter>{footer}</CCardFooter>}

package/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

@@ -23,7 +23,7 @@ test('CWidgetStatsA customize', async () => {
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bg-info')
-  expect(container.firstChild).toHaveClass('text-high-emphasis-inverse')
+  expect(container.firstChild).toHaveClass('text-white')
   expect(container.firstChild).toHaveClass('bazinga')
   if (container.firstChild === null) {
     expect(true).toBe(false)

package/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

@@ -32,7 +32,7 @@ test('CWidgetStatsB customize', async () => {
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fs-4')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('value')
-    expect(container.firstChild.firstChild.lastChild).toHaveClass('text-medium-emphasis-inverse')
+    expect(container.firstChild.firstChild.lastChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.lastChild).toHaveTextContent('text')
   }
 })

package/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

@@ -29,7 +29,7 @@ test('CWidgetStatsC customize', async () => {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis-inverse')
+    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -42,7 +42,7 @@ test('CWidgetStatsD customize', async () => {
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
-        'text-medium-emphasis',
+        'text-body-secondary',
       )
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')

package/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

@@ -21,7 +21,7 @@ test('CWidgetStatsE customize', async () => {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis')
+    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-body-secondary')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('small')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-uppercase')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')

package/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

@@ -47,7 +47,7 @@ test('CWidgetStatsF customize', async () => {
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('text-info')
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('value')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass(
-          'text-medium-emphasis',
+          'text-body-secondary',
         )
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('text-uppercase')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('fw-semibold ')

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CWidgetStatsA customize 1`] = `
 <div>
   <div
-    class="card bg-info text-high-emphasis-inverse bazinga"
+    class="card bg-info text-white bazinga"
   >
     <div
       class="card-body pb-0 d-flex justify-content-between align-items-start"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CWidgetStatsB customize 1`] = `
 <div>
   <div
-    class="card bg-info text-high-emphasis-inverse bazinga"
+    class="card bg-info text-white bazinga"
   >
     <div
       class="card-body"
@@ -17,20 +17,20 @@ exports[`CWidgetStatsB customize 1`] = `
         title
       </div>
       <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="75"
         class="progress progress-white my-2"
+        role="progressbar"
         style="height: 4px;"
       >
         <div
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="75"
           class="progress-bar bg-warning"
-          role="progressbar"
           style="width: 75%;"
         />
       </div>
       <small
-        class="text-medium-emphasis-inverse"
+        class="text-white text-opacity-75"
       >
         text
       </small>
@@ -50,7 +50,12 @@ exports[`loads and displays CWidgetStatsB component 1`] = `
       <div
         class="progress my-2"
         style="height: 4px;"
-      />
+      >
+        <div
+          class="progress-bar"
+          style="width: 0%;"
+        />
+      </div>
     </div>
   </div>
 </div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap

@@ -3,36 +3,36 @@
 exports[`CWidgetStatsC customize 1`] = `
 <div>
   <div
-    class="card bg-info text-high-emphasis-inverse bazinga"
+    class="card bg-info text-white bazinga"
   >
     <div
       class="card-body"
     >
       <div
-        class="text-medium-emphasis-inverse text-end mb-4"
+        class="text-end mb-4"
       >
         icon
       </div>
       <div
-        class="text-high-emphasis-inverse fs-4 fw-semibold"
+        class="fs-4 fw-semibold"
       >
         value
       </div>
       <div
-        class="text-medium-emphasis-inverse"
+        class="text-white text-opacity-75"
       >
         title
       </div>
       <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="75"
         class="progress progress-white mt-3 mb-0"
+        role="progressbar"
         style="height: 4px;"
       >
         <div
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="75"
           class="progress-bar bg-warning"
-          role="progressbar"
           style="width: 75%;"
         />
       </div>
@@ -52,7 +52,12 @@ exports[`loads and displays CWidgetStatsC component 1`] = `
       <div
         class="progress mt-3 mb-0"
         style="height: 4px;"
-      />
+      >
+        <div
+          class="progress-bar"
+          style="width: 0%;"
+        />
+      </div>
     </div>
   </div>
 </div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CWidgetStatsD customize 1`] = `
           89K
         </div>
         <div
-          class="text-uppercase text-medium-emphasis small"
+          class="text-uppercase text-body-secondary small"
         >
           friends
         </div>
@@ -37,7 +37,7 @@ exports[`CWidgetStatsD customize 1`] = `
           459
         </div>
         <div
-          class="text-uppercase text-medium-emphasis small"
+          class="text-uppercase text-body-secondary small"
         >
           feeds
         </div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`CWidgetStatsE customize 1`] = `
       class="card-body text-center"
     >
       <div
-        class="text-medium-emphasis small text-uppercase fw-semibold"
+        class="text-body-secondary small text-uppercase fw-semibold"
       >
         title
       </div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CWidgetStatsF customize 1`] = `
           value
         </div>
         <div
-          class="text-medium-emphasis text-uppercase fw-semibold small"
+          class="text-body-secondary text-uppercase fw-semibold small"
         >
           title
         </div>
@@ -51,7 +51,7 @@ exports[`loads and displays CWidgetStatsF component 1`] = `
           class="fs-6 fw-semibold text-undefined"
         />
         <div
-          class="text-medium-emphasis text-uppercase fw-semibold small"
+          class="text-body-secondary text-uppercase fw-semibold small"
         />
       </div>
     </div>

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/types.ts

@@ -55,14 +55,21 @@ export type Shapes =
 
 export type TextColors =
   | Colors
+  | 'primary-emphasis'
+  | 'secondary-emphasis'
+  | 'success-emphasis'
+  | 'danger-emphasis'
+  | 'warning-emphasis'
+  | 'info-emphasis'
+  | 'light-emphasis'
+  | 'body'
+  | 'body-emphasis'
+  | 'body-secondary'
+  | 'body-tertiary'
+  | 'black'
+  | 'black-50'
   | 'white'
-  | 'muted'
-  | 'high-emphasis'
-  | 'medium-emphasis'
-  | 'disabled'
-  | 'high-emphasis-inverse'
-  | 'medium-emphasis-inverse'
-  | 'disabled-inverse'
+  | 'white-50'
   | string
 
 export type Triggers = 'hover' | 'focus' | 'click'

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,
+}