@coreui/react-pro 4.9.0-next.0 → 4.9.0-next.1

package/src/components/table/CTableDataCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, TdHTMLAttributes, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableDataCellProps
   extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,

package/src/components/table/CTableFoot.tsx

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes } from 'react'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**

package/src/components/table/CTableHead.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
   /**

package/src/components/table/CTableHeaderCell.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   /**

package/src/components/table/CTableRow.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /**

package/src/components/table/types.ts

@@ -0,0 +1,20 @@
+import { CTableDataCellProps } from '../table/CTableDataCell'
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
+import { CTableRowProps } from '../table/CTableRow'
+
+export type Column = {
+  label?: string
+  key: string
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
+export type FooterItem = {
+  label?: string
+  _props?: CTableDataCellProps
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  _props?: CTableRowProps
+}

package/src/components/table/utils.ts

@@ -0,0 +1,29 @@
+import type { Column, Item } from './types'
+
+export const pretifyName = (name: string) => {
+  return name
+    .replace(/[-_.]/g, ' ')
+    .replace(/ +/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export const getColumnLabel = (column: Column | string) =>
+  typeof column === 'object'
+    ? column.label !== undefined
+      ? column.label
+      : pretifyName(column.key)
+    : pretifyName(column)
+
+export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
+  columns
+    ? columns.map((column: Column | string) => {
+        if (typeof column === 'object') return column.key
+        else return column
+      })
+    : items && getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')

package/src/components/tabs/CTabPane.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
 import { useForkedRef } from '../../hooks'
+
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

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

@@ -127,15 +127,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       hour12: false,
     })
 
-    useEffect(() => {
-      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
-    }, [date])
-
     useEffect(() => {
       setDate(convertTimeToDate(time))
     }, [time])
 
     useEffect(() => {
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {

package/src/components/toast/CToast.tsx

@@ -6,13 +6,13 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
-import { Colors, colorPropType } from '../Types'
+import { Transition } from 'react-transition-group'
 
 import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/toast/CToastClose.tsx

@@ -1,9 +1,9 @@
 import React, { ElementType, forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { CToastContext } from './CToast'
-import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
-import type { CButtonProps } from '../button/CButton'
+import { CButtonProps } from '../button/CButton'
+import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
 type CombineButtonProps = CCloseButtonProps & CButtonProps
 export interface CToastCloseProps extends CombineButtonProps {

package/src/components/toast/CToaster.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/tooltip/CTooltip.tsx

@@ -1,11 +1,12 @@
 import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -9,14 +9,6 @@ export interface CVirtualScrollerProps extends Omit<HTMLAttributes<HTMLDivElemen
    * A string of all className you want applied to the base component.
    */
   className?: string
-  /**
-   * Single item height.
-   */
-  itemHeight?: number | 'auto'
-  /**
-   * Number of items.
-   */
-  itemsNumber?: number
   /**
    * Event fires when the component has been scrolled.
    */
@@ -28,23 +20,20 @@ export interface CVirtualScrollerProps extends Omit<HTMLAttributes<HTMLDivElemen
 }
 
 export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps>(
-  ({ children, className, itemHeight = 'auto', visibleItems, itemsNumber, onScroll }, ref) => {
+  ({ children, className, visibleItems, onScroll }, ref) => {
     const virtualScrollRef = useRef<HTMLDivElement>(null)
     const virtualScrollContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, virtualScrollRef)
 
-    const [currentItemIndex, setCurrentItemIndex] = useState(0)
-    const [_itemHeight, setItemHeight] = useState<number>(itemHeight === 'auto' ? 0 : itemHeight)
-    const [_itemsNumber, setItemsNumber] = useState(itemsNumber || React.Children.count(children))
+    const [buffer, setBuffer] = useState(Math.floor(visibleItems / 2))
+    const [currentItemIndex, setCurrentItemIndex] = useState(1)
+    const [itemHeight, setItemHeight] = useState(0)
+    const [itemsNumber, setItemsNumber] = useState(React.Children.count(children))
     const [viewportPadding, setViewportPadding] = useState(0)
     const [viewportHeight, setViewportHeight] = useState(
-      visibleItems * _itemHeight + 2 * viewportPadding,
+      visibleItems * itemHeight + 2 * viewportPadding,
     )
-    const [maxHeight, setMaxHeight] = useState(_itemsNumber * _itemHeight + 2 * viewportPadding)
-    const [topPadding, setTopPadding] = useState(0)
-    const [bottomPadding, setBottomPadding] = useState(0)
-
-    const [contentHeight, setContentHeight] = useState(0)
+    const [maxHeight, setMaxHeight] = useState(itemsNumber * itemHeight + 2 * viewportPadding)
 
     useEffect(() => {
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
@@ -58,33 +47,20 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
     }, [children, itemsNumber])
 
     useEffect(() => {
-      setViewportHeight(visibleItems * _itemHeight + 2 * viewportPadding)
-    }, [viewportPadding, visibleItems, _itemHeight])
+      setViewportHeight(visibleItems * itemHeight + 2 * viewportPadding)
+    }, [viewportPadding, visibleItems, itemHeight])
 
     useEffect(() => {
-      setMaxHeight(_itemsNumber * _itemHeight + 2 * viewportPadding)
+      setMaxHeight(itemsNumber * itemHeight + 2 * viewportPadding)
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
-      setTopPadding(0)
-    }, [_itemsNumber, _itemHeight])
+    }, [itemsNumber, itemHeight])
 
-    const handleScroll = (scrollTop: number) => {
-      const _currentItemIndex = Math.min(
-        Math.max(
-          1 +
-            Math.max(Math.floor(scrollTop / _itemHeight), 0) -
-            Math.min(
-              Math.floor(visibleItems / 2) - (Math.floor(visibleItems / 2) - currentItemIndex) - 1,
-              Math.floor(visibleItems / 2),
-            ),
-          1,
-        ),
-        _itemsNumber - visibleItems + 1,
-      )
+    useEffect(() => {
+      setBuffer(Math.floor(visibleItems / 2))
+    }, [visibleItems])
 
-      virtualScrollContentRef.current &&
-        setContentHeight(virtualScrollContentRef.current.offsetHeight)
-      setTopPadding(Math.max(_currentItemIndex * _itemHeight - _itemHeight, 0))
-      setBottomPadding(Math.max(maxHeight - topPadding - contentHeight, 0))
+    const handleScroll = (scrollTop: number) => {
+      const _currentItemIndex = itemHeight && Math.max(Math.ceil(scrollTop / itemHeight), 1)
       setCurrentItemIndex(_currentItemIndex)
       onScroll && onScroll(_currentItemIndex)
     }
@@ -103,23 +79,31 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
           overflowY: 'auto',
         }}
       >
-        <div style={{ height: topPadding }} />
-        <div className="virtual-scroller-content" ref={virtualScrollContentRef}>
+        <div
+          className="virtual-scroller-content"
+          style={{
+            height: maxHeight,
+          }}
+          ref={virtualScrollContentRef}
+        >
           {React.Children.map(children, (child, index) => {
-            const _index = index + 1
             if (
               React.isValidElement(child) &&
-              _index >= Math.max(currentItemIndex - Math.floor(visibleItems / 2), 0) &&
-              _index <= currentItemIndex + visibleItems + Math.floor(visibleItems / 2)
+              index + 1 > Math.max(currentItemIndex - buffer, 0) &&
+              index + 1 <= currentItemIndex + visibleItems + buffer
             ) {
               return React.cloneElement(child as React.ReactElement<any>, {
                 className: classNames(child.props.className, {
                   'virtual-scroller-item-preload':
-                    _index > currentItemIndex + visibleItems || _index < currentItemIndex,
+                    index + 1 > currentItemIndex + visibleItems || index + 1 < currentItemIndex,
                 }),
                 key: index,
+                style: {
+                  ...(currentItemIndex > buffer && {
+                    transform: `translateY(${(currentItemIndex - buffer) * itemHeight}px)`,
+                  }),
+                },
                 ref: (node: HTMLElement) =>
-                  itemHeight === 'auto' &&
                   node &&
                   node.offsetHeight &&
                   setItemHeight(
@@ -132,19 +116,12 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
             return
           })}
         </div>
-        <div
-          style={{
-            height: bottomPadding,
-          }}
-        />
       </div>
     )
   },
 )
 
 CVirtualScroller.propTypes = {
-  itemHeight: PropTypes.number,
-  itemsNumber: PropTypes.number,
   onScroll: PropTypes.func,
   visibleItems: PropTypes.number.isRequired,
 }

package/src/components/widgets/CWidgetStatsA.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { CCard, CCardBody } from '../card'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/widgets/CWidgetStatsB.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 import { CProgress, CProgressProps } from '../progress/CProgress'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CWidgetStatsBProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/widgets/CWidgetStatsC.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 import { CProgress, CProgressProps } from '../progress/CProgress'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/widgets/CWidgetStatsD.tsx

@@ -2,13 +2,12 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
-
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
-import { CCardHeader } from '../card/CCardHeader'
+import { CCard, CCardBody, CCardHeader } from '../card'
 import { CCol } from '../grid/CCol'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 type Value = {
   title?: string | ReactNode
   value?: number | string | ReactNode

package/src/components/widgets/CWidgetStatsE.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
+import { CCard, CCardBody } from '../card'
 
 export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/widgets/CWidgetStatsF.tsx

@@ -2,11 +2,10 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { CCard, CCardBody, CCardFooter } from '../card'
 
-import { CCard } from '../card/CCard'
-import { CCardBody } from '../card/CCardBody'
-import { CCardFooter } from '../card/CCardFooter'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/{components/Types.tsx → props.ts}

@@ -1,17 +1,6 @@
 import PropTypes from 'prop-types'
 
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-
-export type Colors =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'dark'
-  | 'light'
-  | string
+import type { Placements, Triggers } from './types'
 
 export const colorPropType = PropTypes.oneOfType([
   PropTypes.oneOf([
@@ -27,16 +16,6 @@ export const colorPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type Gradients =
-  | 'primary-gradient'
-  | 'secondary-gradient'
-  | 'success-gradient'
-  | 'danger-gradient'
-  | 'warning-gradient'
-  | 'info-gradient'
-  | 'dark-gradient'
-  | 'light-gradient'
-
 export const gradientsPropType = PropTypes.oneOf([
   'primary-gradient',
   'secondary-gradient',
@@ -48,24 +27,6 @@ export const gradientsPropType = PropTypes.oneOf([
   'light-gradient',
 ])
 
-export type Placements =
-  | 'auto'
-  | 'auto-start'
-  | 'auto-end'
-  | 'top-end'
-  | 'top'
-  | 'top-start'
-  | 'bottom-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'right-start'
-  | 'right'
-  | 'right-end'
-  | 'left-start'
-  | 'left'
-  | 'left-end'
-  | undefined
-
 export const placementPropType = PropTypes.oneOf<Placements>([
   'auto',
   'auto-start',
@@ -84,20 +45,6 @@ export const placementPropType = PropTypes.oneOf<Placements>([
   'left-end',
 ])
 
-export type Shapes =
-  | 'rounded'
-  | 'rounded-top'
-  | 'rounded-end'
-  | 'rounded-bottom'
-  | 'rounded-start'
-  | 'rounded-circle'
-  | 'rounded-pill'
-  | 'rounded-0'
-  | 'rounded-1'
-  | 'rounded-2'
-  | 'rounded-3'
-  | string
-
 export const shapePropType = PropTypes.oneOfType([
   PropTypes.oneOf([
     'rounded',
@@ -115,24 +62,10 @@ export const shapePropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type TextColors =
-  | Colors
-  | 'white'
-  | 'muted'
-  | 'high-emphasis'
-  | 'medium-emphasis'
-  | 'disabled'
-  | 'high-emphasis-inverse'
-  | 'medium-emphasis-inverse'
-  | 'disabled-inverse'
-  | string
-
 export const textColorsPropType = PropTypes.oneOfType([
   colorPropType,
   PropTypes.oneOf(['white', 'muted']),
   PropTypes.string,
 ])
 
-export type Triggers = 'hover' | 'focus' | 'click'
-
 export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])

package/src/types.ts

@@ -0,0 +1,68 @@
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+export type Colors =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | string
+
+export type Gradients =
+  | 'primary-gradient'
+  | 'secondary-gradient'
+  | 'success-gradient'
+  | 'danger-gradient'
+  | 'warning-gradient'
+  | 'info-gradient'
+  | 'dark-gradient'
+  | 'light-gradient'
+
+export type Placements =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top-end'
+  | 'top'
+  | 'top-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'left-start'
+  | 'left'
+  | 'left-end'
+  | undefined
+
+export type Shapes =
+  | 'rounded'
+  | 'rounded-top'
+  | 'rounded-end'
+  | 'rounded-bottom'
+  | 'rounded-start'
+  | 'rounded-circle'
+  | 'rounded-pill'
+  | 'rounded-0'
+  | 'rounded-1'
+  | 'rounded-2'
+  | 'rounded-3'
+  | string
+
+export type TextColors =
+  | Colors
+  | 'white'
+  | 'muted'
+  | 'high-emphasis'
+  | 'medium-emphasis'
+  | 'disabled'
+  | 'high-emphasis-inverse'
+  | 'medium-emphasis-inverse'
+  | 'disabled-inverse'
+  | string
+
+export type Triggers = 'hover' | 'focus' | 'click'

package/src/utils/index.ts

@@ -1,6 +1,4 @@
-import getNextSibling from './getNextSibling'
-import getPreviousSibling from './getPreviousSibling'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 
-export { getNextSibling, getPreviousSibling, isInViewport, isObjectInArray }
+export { isInViewport, isObjectInArray }

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

@@ -1,18 +0,0 @@
-// TODO: check if component property is necessary.
-
-import React, { forwardRef, HTMLAttributes } from 'react'
-
-export const CMultiSelectCleaner = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  (props, ref) => {
-    return (
-      <button
-        type="button"
-        className="form-multi-select-selection-cleaner"
-        {...props}
-        ref={ref}
-      ></button>
-    )
-  },
-)
-
-CMultiSelectCleaner.displayName = 'CMultiSelectCleaner'

package/src/utils/getNextSibling.ts

@@ -1,18 +0,0 @@
-const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.nextElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-
-  return
-}
-
-export default getNextSibling