@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/{timepicker → time-picker}/CTimePicker.tsx

@@ -10,7 +10,19 @@ import { CInputGroupText } from '../form/CInputGroupText'
 
 import { CTimePickerRollCol } from './CTimePickerRollCol'
 import { CPicker, CPickerProps } from './../picker/CPicker'
-import { convert12hTo24h, convert24hTo12h, getAmPm, isAmPm } from './CTimePicker.utils'
+import {
+  convert12hTo24h,
+  convertTimeToDate,
+  getAmPm,
+  getListOfHours,
+  getListOfMinutes,
+  getListOfSeconds,
+  getSelectedHour,
+  getSelectedMinutes,
+  getSelectedSeconds,
+  isAmPm,
+  isValidTime,
+} from '../../utils/time'
 
 export interface CTimePickerProps
   extends Omit<
@@ -22,29 +34,25 @@ export interface CTimePickerProps
    */
   className?: string
   /**
-   * Enables selection cleaner element.
+   * Toggle visibility or set the content of the cleaner button.
    */
-  cleaner?: boolean
+  cleaner?: ReactNode | boolean
   /**
-   * Cleaner icon.
+   * Toggle visibility or set the content of the input indicator.
    */
-  cleanerIcon?: ReactNode | boolean
-  /**
-   * Default input icon.
-   */
-  defaultIcon?: ReactNode | boolean
+  indicator?: ReactNode | boolean
   /**
    * Toggle the readonly state for the component.
    */
   inputReadOnly?: boolean
   /**
-   * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+   * Sets the default locale for components. If not set, it is inherited from the browser.
    */
   locale?: string
   /**
-   * Callback fired when the user hovers over the calendar cell.
+   * Callback fired when the time changed.
    */
-  onChange?: (timeString: string, localeTimeString: string, date: Date) => void
+  onTimeChange?: (timeString: string, localeTimeString: string, date: Date) => void
   /**
    * Specifies a short hint that is visible in the input.
    */
@@ -54,9 +62,9 @@ export interface CTimePickerProps
    */
   size?: 'sm' | 'lg'
   /**
-   * Default value of the component
+   * Initial selected time.
    */
-  value?: Date | string | null
+  time?: Date | string | null
   /**
    * Set the time picker variant to a roll or select.
    */
@@ -68,65 +76,39 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     {
       className,
       cleaner = true,
-      cleanerIcon,
       container = 'dropdown',
-      defaultIcon,
       disabled,
       footer = true,
+      indicator = true,
       inputReadOnly,
-      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
-      onChange,
+      locale = 'default',
+      onTimeChange,
+      onHide,
+      onShow,
       placeholder = 'Select time',
       size,
-      value,
+      time,
       variant = 'roll',
       ...rest
     },
     ref,
   ) => {
     const inputRef = useRef<HTMLInputElement>(null)
-    const [date, setDate] = useState<Date | null>(
-      value ? (value instanceof Date ? new Date(value) : new Date(`1970-01-01 ${value}`)) : null,
-    )
+    const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
+    const [initialDate, setInitialDate] = useState<Date | null>(null)
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
 
     useEffect(() => {
-      setDate(
-        value ? (value instanceof Date ? new Date(value) : new Date(`1970-01-01 ${value}`)) : null,
-      )
-    }, [value])
+      setDate(convertTimeToDate(time))
+    }, [time])
 
     useEffect(() => {
       if (inputRef.current) {
         inputRef.current.value = date ? date.toLocaleTimeString(locale) : ''
       }
-    }, [date])
-
-    const getHours = (locale: string) =>
-      Array.from(new Array(isAmPm(locale) ? 12 : 24), (_, i) => {
-        return {
-          value: isAmPm(locale) ? i + 1 : i,
-          label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
-        }
-      })
-
-    const getMinutesOrSeconds = (locale: string) =>
-      Array.from(new Array(60), (_, i) => {
-        return {
-          value: i,
-          label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
-        }
-      })
 
-    const selectedHour = date
-      ? isAmPm(locale)
-        ? convert24hTo12h(date.getHours())
-        : date.getHours()
-      : null
-
-    const selectedMinutes = date ? date.getMinutes() : null
-
-    const selectedSeconds = date ? date.getSeconds() : null
+      date && setAmPm(getAmPm(new Date(date), locale))
+    }, [date])
 
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
@@ -138,11 +120,9 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
       if (set === 'toggle') {
         if (value === 'am') {
-          setAmPm('am')
           _date.setHours(_date.getHours() - 12)
         }
         if (value === 'pm') {
-          setAmPm('pm')
           _date.setHours(_date.getHours() + 12)
         }
       }
@@ -164,25 +144,29 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       setDate(new Date(_date))
-      onChange && onChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+      onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
     }
 
     const InputGroup = () => (
       <CInputGroup className="picker-input-group" size={size}>
         <CFormInput
+          delay={true}
           disabled={disabled}
+          onChange={(event) =>
+            isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
+          }
           placeholder={placeholder}
           readOnly={inputReadOnly}
           ref={inputRef}
         />
-        {(defaultIcon !== false || cleaner) && (
+        {(indicator || cleaner) && (
           <CInputGroupText>
-            {defaultIcon !== false && (
+            {indicator && (
               <span className="picker-input-group-indicator">
-                {defaultIcon ? (
-                  defaultIcon
-                ) : (
+                {typeof indicator === 'boolean' ? (
                   <span className="picker-input-group-icon time-picker-input-icon" />
+                ) : (
+                  indicator
                 )}
               </span>
             )}
@@ -192,10 +176,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                 role="button"
                 onClick={(event) => handleClear(event)}
               >
-                {cleanerIcon ? (
-                  cleanerIcon
-                ) : (
+                {typeof cleaner === 'boolean' ? (
                   <span className="picker-input-group-icon time-picker-cleaner-icon" />
+                ) : (
+                  cleaner
                 )}
               </span>
             )}
@@ -210,7 +194,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <span className="time-picker-inline-icon" />
           <CFormSelect
             disabled={disabled}
-            options={getHours(locale).map((option) => {
+            options={getListOfHours(locale).map((option) => {
               return {
                 value: option.value.toString(),
                 label: option.label,
@@ -219,35 +203,27 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
             }
-            value={selectedHour ? selectedHour : '0'}
+            value={getSelectedHour(date, locale)}
           />
-          <span className="px-1">:</span>
+          <>:</>
           <CFormSelect
             disabled={disabled}
-            options={Array.from(new Array(60), (_, i) => {
-              return {
-                value: i.toString(),
-                label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
-              }
-            })}
+            // @ts-expect-error the getListOfMinutes function returns corect type
+            options={getListOfMinutes(locale, true)}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
             }
-            value={selectedMinutes ? selectedMinutes : '0'}
+            value={getSelectedMinutes(date)}
           />
-          <span className="px-1">:</span>
+          <>:</>
           <CFormSelect
             disabled={disabled}
-            options={Array.from(new Array(60), (_, i) => {
-              return {
-                value: i.toString(),
-                label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
-              }
-            })}
+            // @ts-expect-error the getListOfSeconds function returns corect type
+            options={getListOfSeconds(locale, true)}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('seconds', event.target.value)
             }
-            value={selectedSeconds ? selectedSeconds : '0'}
+            value={getSelectedSeconds(date)}
           />
           {isAmPm(locale) && (
             <CFormSelect
@@ -269,19 +245,19 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const TimePickerRoll = () => (
       <>
         <CTimePickerRollCol
-          elements={getHours(locale)}
+          elements={getListOfHours(locale)}
           onClick={(index: number) => handleTimeChange('hours', index.toString())}
-          selected={selectedHour}
+          selected={getSelectedHour(date, locale)}
         />
         <CTimePickerRollCol
-          elements={getMinutesOrSeconds(locale)}
-          selected={selectedMinutes}
+          elements={getListOfMinutes(locale)}
           onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+          selected={getSelectedMinutes(date)}
         />
         <CTimePickerRollCol
-          elements={getMinutesOrSeconds(locale)}
-          selected={selectedSeconds}
+          elements={getListOfSeconds(locale)}
           onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+          selected={getSelectedSeconds(date)}
         />
         {isAmPm(locale) && (
           <CTimePickerRollCol
@@ -289,8 +265,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               { value: 'am', label: 'AM' },
               { value: 'pm', label: 'PM' },
             ]}
-            selected={_ampm}
             onClick={(value: string) => handleTimeChange('toggle', value)}
+            selected={_ampm}
           />
         )}
       </>
@@ -304,14 +280,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         container={container}
         disabled={disabled}
         footer={footer}
-        onCancelClick={() => {
-          setDate(
-            value
-              ? value instanceof Date
-                ? new Date(value)
-                : new Date(`1970-01-01 ${value}`)
-              : new Date(),
-          )
+        onCancel={() => initialDate && setDate(new Date(initialDate))}
+        onHide={() => onHide && onHide()}
+        onShow={() => {
+          date && setInitialDate(new Date(date))
+          onShow && onShow()
         }}
         toggler={InputGroup()}
         {...rest}
@@ -333,8 +306,8 @@ CTimePicker.propTypes = {
   ...CPicker.propTypes,
   className: PropTypes.string,
   locale: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  onTimeChange: PropTypes.func,
+  time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),
 }
 

package/src/components/{timepicker → time-picker}/CTimePickerRollCol.tsx

@@ -17,14 +17,20 @@ export interface CTimePickerRollColProps {
 
 export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColProps>(
   ({ elements, onClick, selected }, ref) => {
+    const init = useRef(true)
     const colRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, colRef)
 
     useEffect(() => {
       const nodeEl = colRef.current?.querySelector('.selected')
       if (nodeEl && nodeEl instanceof HTMLElement) {
-        colRef.current?.scrollTo({ top: nodeEl.offsetTop, behavior: 'smooth' })
+        colRef.current?.scrollTo({
+          top: nodeEl.offsetTop,
+          behavior: init.current ? 'auto' : 'smooth',
+        })
       }
+
+      init.current = false
     }, [selected])
 
     return (

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

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTimePicker } from '../CTimePicker'
+
+test('loads and displays CTimePicker component', async () => {
+  const { container } = render(<CTimePicker />)
+  expect(container).toMatchSnapshot()
+})

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

@@ -0,0 +1,3 @@
+import { CTimePicker } from './CTimePicker'
+
+export { CTimePicker }

package/src/components/toast/CToast.tsx

@@ -12,6 +12,8 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * Apply a CSS fade transition to the toast.
@@ -82,6 +84,8 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     },
     ref,
   ) => {
+    const toastRef = useRef()
+    const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
     const timeout = useRef<number>()
 
@@ -133,6 +137,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     return (
       <Transition
         in={_visible}
+        nodeRef={toastRef}
         onEnter={() => onShow && onShow(index ? index : null)}
         onExited={() => onClose && onClose(index ? index : null)}
         timeout={250}
@@ -151,7 +156,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                 onMouseLeave={() => _autohide}
                 {...rest}
                 key={key}
-                ref={ref}
+                ref={forkedRef}
               >
                 {children}
               </div>

package/src/components/toast/index.ts

@@ -0,0 +1,7 @@
+import { CToast } from './CToast'
+import { CToastBody } from './CToastBody'
+import { CToastClose } from './CToastClose'
+import { CToastHeader } from './CToastHeader'
+import { CToaster } from './CToaster'
+
+export { CToast, CToastBody, CToastClose, CToastHeader, CToaster }

package/src/components/tooltip/CTooltip.tsx

@@ -1,19 +1,24 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
-import { Manager, Popper, Reference } from 'react-popper'
+import PropTypes from 'prop-types'
+import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-// import { CTooltipContent } from './CTooltipContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CTooltipProps {
-  children: ReactElement
+  // TODO: find solution to not use any
+  children: any
   /**
    * Content node for your component.
    */
   content: ReactNode | string
+  /**
+   * Offset of the popover relative to its target.
+   */
+  offset?: [number, number]
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -41,15 +46,33 @@ export interface CTooltipProps {
 export const CTooltip: FC<CTooltipProps> = ({
   children,
   content,
-  placement = 'top',
+  offset = [0, 0],
   onHide,
   onShow,
+  placement = 'top',
   trigger = 'hover',
   visible,
   ...rest
 }) => {
+  const tooltipRef = useRef()
   const [_visible, setVisible] = useState(visible)
 
+  const [referenceElement, setReferenceElement] = useState(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: placement,
+  })
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -61,30 +84,27 @@ export const CTooltip: FC<CTooltipProps> = ({
   }
 
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) =>
-          React.cloneElement(children, {
-            ref: ref,
-            ...((trigger === 'click' || trigger.includes('click')) && {
-              onClick: () => setVisible(!_visible),
-            }),
-            ...((trigger === 'focus' || trigger.includes('focus')) && {
-              onFocus: () => setVisible(true),
-              onBlur: () => setVisible(false),
-            }),
-            ...((trigger === 'hover' || trigger.includes('hover')) && {
-              onMouseEnter: () => setVisible(true),
-              onMouseLeave: () => setVisible(false),
-            }),
-          })
-        }
-      </Reference>
+    <>
+      {React.cloneElement(children, {
+        ref: setReferenceElement,
+        ...((trigger === 'click' || trigger.includes('click')) && {
+          onClick: () => setVisible(!_visible),
+        }),
+        ...((trigger === 'focus' || trigger.includes('focus')) && {
+          onFocus: () => setVisible(true),
+          onBlur: () => setVisible(false),
+        }),
+        ...((trigger === 'hover' || trigger.includes('hover')) && {
+          onMouseEnter: () => setVisible(true),
+          onMouseLeave: () => setVisible(false),
+        }),
+      })}
       {typeof window !== 'undefined' &&
         createPortal(
           <Transition
             in={_visible}
             mountOnEnter
+            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
@@ -96,40 +116,38 @@ export const CTooltip: FC<CTooltipProps> = ({
             {(state) => {
               const transitionClass = getTransitionClass(state)
               return (
-                <Popper placement={placement}>
-                  {({ arrowProps, style, ref }) => (
-                    <div
-                      className={classNames(
-                        `tooltip bs-tooltip-${
-                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                        }`,
-                        transitionClass,
-                      )}
-                      ref={ref}
-                      role="tooltip"
-                      style={style}
-                      {...rest}
-                    >
-                      <div className="tooltip-arrow" {...arrowProps}></div>
-                      <div className="tooltip-inner">{content}</div>
-                    </div>
+                <div
+                  className={classNames(
+                    `tooltip bs-tooltip-${
+                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                    }`,
+                    transitionClass,
                   )}
-                </Popper>
+                  ref={setPopperElement}
+                  role="tooltip"
+                  style={styles.popper}
+                  {...attributes.popper}
+                  {...rest}
+                >
+                  <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                  <div className="tooltip-inner">{content}</div>
+                </div>
               )
             }}
           </Transition>,
           document.body,
         )}
-    </Manager>
+    </>
   )
 }
 
 CTooltip.propTypes = {
   children: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }

package/src/components/tooltip/index.ts

@@ -0,0 +1,3 @@
+import { CTooltip } from './CTooltip'
+
+export { CTooltip }