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

package/src/components/tabs/CTabPane.tsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+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

@@ -4,22 +4,21 @@ import classNames from 'classnames'
 
 import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
+import { CPicker, CPickerProps } from './../picker/CPicker'
 
 import { CTimePickerRollCol } from './CTimePickerRollCol'
-import { CPicker, CPickerProps } from './../picker/CPicker'
 import {
   convert12hTo24h,
   convertTimeToDate,
   getAmPm,
-  getListOfHours,
-  getListOfMinutes,
-  getListOfSeconds,
+  getLocalizedTimePartials,
   getSelectedHour,
   getSelectedMinutes,
   getSelectedSeconds,
-  isAmPm,
   isValidTime,
-} from '../../utils/time'
+} from './utils'
+
+import type { LocalizedTimePartials } from './types'
 
 export interface CTimePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
@@ -121,15 +120,24 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
     const [_visible, setVisible] = useState(visible)
 
+    const [localizedTimePartials, setLocalizedTimePartials] = useState<LocalizedTimePartials>({
+      listOfHours: [],
+      listOfMinutes: [],
+      listOfSeconds: [],
+      hour12: false,
+    })
+
     useEffect(() => {
       setDate(convertTimeToDate(time))
     }, [time])
 
     useEffect(() => {
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {
-              hour12: (ampm === 'auto' && isAmPm(locale)) || (typeof ampm === 'boolean' && ampm),
+              hour12: localizedTimePartials && localizedTimePartials.hour12,
               ...(!seconds && { timeStyle: 'short' }),
             })
           : ''
@@ -157,7 +165,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       if (set === 'hours') {
-        if ((ampm === 'auto' && isAmPm(locale)) || ampm === true) {
+        if (localizedTimePartials && localizedTimePartials.hour12) {
           _date.setHours(convert12hTo24h(_ampm, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -224,12 +232,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <span className="time-picker-inline-icon" />
           <CFormSelect
             disabled={disabled}
-            options={getListOfHours(locale).map((option) => {
-              return {
-                value: option.value.toString(),
-                label: option.label,
-              }
-            })}
+            options={
+              localizedTimePartials &&
+              localizedTimePartials.listOfHours?.map((option) => {
+                return {
+                  value: option.value.toString(),
+                  label: option.label,
+                }
+              })
+            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
             }
@@ -238,8 +249,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <>:</>
           <CFormSelect
             disabled={disabled}
-            // @ts-expect-error the getListOfMinutes function returns corect type
-            options={getListOfMinutes(locale, true)}
+            options={
+              localizedTimePartials &&
+              localizedTimePartials.listOfMinutes.map((option) => {
+                return {
+                  value: option.value.toString(),
+                  label: option.label,
+                }
+              })
+            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
             }
@@ -250,8 +268,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               <>:</>
               <CFormSelect
                 disabled={disabled}
-                // @ts-expect-error the getListOfSeconds function returns corect type
-                options={getListOfSeconds(locale, true)}
+                options={
+                  localizedTimePartials &&
+                  localizedTimePartials.listOfSeconds.map((option) => {
+                    return {
+                      value: option.value.toString(),
+                      label: option.label,
+                    }
+                  })
+                }
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   handleTimeChange('seconds', event.target.value)
                 }
@@ -259,7 +284,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               />
             </>
           )}
-          {isAmPm(locale) && (
+          {localizedTimePartials && localizedTimePartials.hour12 && (
             <CFormSelect
               disabled={disabled}
               options={[
@@ -279,23 +304,23 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const TimePickerRoll = () => (
       <>
         <CTimePickerRollCol
-          elements={getListOfHours(locale, ampm)}
+          elements={localizedTimePartials && localizedTimePartials.listOfHours}
           onClick={(index: number) => handleTimeChange('hours', index.toString())}
           selected={getSelectedHour(date, locale, ampm)}
         />
         <CTimePickerRollCol
-          elements={getListOfMinutes(locale)}
+          elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
           onClick={(index: number) => handleTimeChange('minutes', index.toString())}
           selected={getSelectedMinutes(date)}
         />
         {seconds && (
           <CTimePickerRollCol
-            elements={getListOfSeconds(locale)}
+            elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
             onClick={(index: number) => handleTimeChange('seconds', index.toString())}
             selected={getSelectedSeconds(date)}
           />
         )}
-        {((ampm === 'auto' && isAmPm(locale)) || ampm === true) && (
+        {localizedTimePartials && localizedTimePartials.hour12 && (
           <CTimePickerRollCol
             elements={[
               { value: 'am', label: 'AM' },

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface Element {
   value: number | string

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

@@ -0,0 +1,15 @@
+export type LocalizedTimePartials = {
+  listOfHours: {
+    value: number
+    label: string
+  }[]
+  listOfMinutes: {
+    value: number
+    label: string
+  }[]
+  listOfSeconds: {
+    value: number
+    label: string
+  }[]
+  hour12: boolean
+}

package/src/{utils/time.ts → components/time-picker/utils.ts}

@@ -1,3 +1,5 @@
+import type { LocalizedTimePartials } from './types'
+
 export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
   if (abbr === 'am' && hour === 12) {
     return 0
@@ -26,6 +28,7 @@ export const getAmPm = (date: Date, locale: string) => {
   return date.getHours() >= 12 ? 'pm' : 'am'
 }
 
+// TODO: clean-up
 export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>
   Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
     return {
@@ -36,6 +39,7 @@ export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto')
     }
   })
 
+// TODO: clean-up
 export const getListOfMinutes = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -47,10 +51,11 @@ export const getListOfMinutes = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[0],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
     }
   })
 
+// TODO: clean-up
 export const getListOfSeconds = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -62,10 +67,46 @@ export const getListOfSeconds = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[1],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+    }
+  })
+
+export const getLocalizedTimePartials = (
+  locale: string,
+  ampm: 'auto' | boolean = 'auto',
+): LocalizedTimePartials => {
+  const date = new Date()
+  const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el))
+  const listOfHours = Array.from(
+    { length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 },
+    (_, i) => {
+      return {
+        value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
+        label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
+      }
+    },
+  )
+  const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
+    date.setMinutes(i)
+    return {
+      value: i,
+      label: date
+        .toLocaleTimeString(locale, {
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
     }
   })
 
+  return {
+    listOfHours,
+    listOfMinutes: listOfMinutesSeconds,
+    listOfSeconds: listOfMinutesSeconds,
+    hour12,
+  }
+}
+
 export const getSelectedHour = (
   date: Date | null,
   locale: string,

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 { Transition } from 'react-transition-group'
 
-import { Colors, colorPropType } from '../Types'
-
-import { useForkedRef } from '../../utils/hooks'
+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

@@ -2,21 +2,13 @@ import React, { forwardRef, HTMLAttributes, UIEvent, useEffect, useRef, useState
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CVirtualScrollerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {
   /**
    * 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'> {
   /**