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

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,29 +20,26 @@ 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
 
       virtualScrollRef.current &&
-        setViewportPadding(parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
+        setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
     })
 
     useEffect(() => {
@@ -58,42 +47,27 @@ 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)
     }
 
-    const _className = classNames('virtual-scroller', className)
-
     return (
       <div
-        className={_className}
+        className={classNames('virtual-scroller', className)}
         onScroll={(event: UIEvent<HTMLDivElement>) =>
           handleScroll((event.target as HTMLDivElement).scrollTop)
         }
@@ -103,48 +77,49 @@ 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(
                     node.offsetHeight +
-                      parseFloat(getComputedStyle(node).marginTop) +
-                      parseFloat(getComputedStyle(node).marginBottom),
+                      Number.parseFloat(getComputedStyle(node).marginTop) +
+                      Number.parseFloat(getComputedStyle(node).marginBottom),
                   ),
               })
             }
             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'> {
   /**
@@ -38,13 +38,15 @@ export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
-    const _className = classNames(
-      { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
-      className,
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard
+        className={classNames(
+          { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
           <div>
             {value && <div className="fs-4 fw-semibold">{value}</div>}

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
@@ -41,17 +40,16 @@ export interface CWidgetStatsDProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
   ({ className, chart, color, icon, values, ...rest }, ref) => {
-    const _className = classNames(className)
-    const classNameHeader = classNames(
-      'position-relative d-flex justify-content-center align-items-center',
-      {
-        [`bg-${color}`]: color,
-      },
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
-        <CCardHeader className={classNameHeader}>
+      <CCard className={className} {...rest} ref={ref}>
+        <CCardHeader
+          className={classNames(
+            'position-relative d-flex justify-content-center align-items-center',
+            {
+              [`bg-${color}`]: color,
+            },
+          )}
+        >
           {icon}
           {chart}
         </CCardHeader>

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'> {
   /**
@@ -26,10 +25,8 @@ export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
   ({ chart, className, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={classNames(className)} {...rest} ref={ref}>
         <CCardBody className="text-center">
           {title && (
             <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>

package/src/components/widgets/CWidgetStatsF.tsx

@@ -1,12 +1,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'> {
   /**
@@ -43,10 +41,8 @@ export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
   ({ className, color, footer, icon, padding = true, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={className} {...rest} ref={ref}>
         <CCardBody className={`d-flex align-items-center ${padding === false && 'p-0'}`}>
           <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
           <div>

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

package/src/utils/getPreviousSibling.ts

@@ -1,18 +0,0 @@
-const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.previousElementSibling
-
-  // 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.previousElementSibling
-  }
-
-  return
-}
-
-export default getPreviousSibling

package/src/components/smart-table/{types.tsx → types.ts}

@@ -6,8 +6,8 @@ import { CTableRowProps } from '../table/CTableRow'
 
 export type Column = {
   filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode)
-  label?: string
   key: string
+  label?: string
   sorter?: boolean
   _style?: any
   _props?: CTableHeaderCellProps