@coreui/react-pro 4.13.1 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.13.1",
+  "version": "4.14.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -11,6 +11,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
+import { useDebouncedCallback } from '../../hooks'
 import { Colors } from '../../types'
 import { getLocalDateFromString } from './utils'
 
@@ -101,6 +102,24 @@ export interface CDateRangePickerProps
    * Toggle visibility or set the content of the input indicator.
    */
   indicator?: ReactNode | boolean
+  /**
+   * Custom function to format the selected date into a string according to a custom format.
+   *
+   * @since v4.14.0
+   */
+  inputDateFormat?: (date: Date) => string
+  /**
+   * Custom function to parse the input value into a valid Date object.
+   *
+   * @since v4.14.0
+   */
+  inputDateParse?: (date: string | Date) => Date
+  /**
+   * Defines the delay (in milliseconds) for the input field's onChange event.
+   *
+   * @since v4.14.0
+   */
+  inputOnChangeDelay?: number
   /**
    * Toggle the readonly state for the component.
    */
@@ -190,7 +209,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       confirmButtonColor = 'primary',
       confirmButtonSize = 'sm',
       confirmButtonVariant,
-      indicator = true,
       dayFormat,
       disabled,
       disabledDates,
@@ -202,6 +220,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       format,
       footer,
       id,
+      indicator = true,
+      inputDateFormat,
+      inputDateParse,
+      inputOnChangeDelay = 750,
       inputReadOnly,
       invalid,
       label,
@@ -270,17 +292,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [valid, invalid])
 
     useEffect(() => {
-      if (startDate) {
-        setStartDate(new Date(startDate))
-        setCalendarDate(new Date(startDate))
-      }
+      setStartDate(startDate ? new Date(startDate) : null)
+      setCalendarDate(startDate ? new Date(startDate) : new Date())
     }, [startDate])
 
     useEffect(() => {
-      if (endDate) {
-        setEndDate(new Date(endDate))
-        setCalendarDate(new Date(endDate))
-      }
+      setEndDate(endDate ? new Date(endDate) : null)
+      setCalendarDate(endDate ? new Date(endDate) : new Date())
     }, [endDate])
 
     useEffect(() => {
@@ -326,7 +344,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [formRef, _startDate, _endDate])
 
     const formatDate = (date: Date) => {
-      return format
+      return inputDateFormat
+        ? inputDateFormat(date)
+        : format
         ? dateFormat(date, format)
         : timepicker
         ? date.toLocaleString(locale)
@@ -402,6 +422,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }
 
+    const handleOnChange = useDebouncedCallback((value: string, input: string) => {
+      const date = inputDateParse
+        ? inputDateParse(value)
+        : getLocalDateFromString(value, locale, timepicker)
+      if (date instanceof Date && date.getTime()) {
+        setCalendarDate(date)
+        input === 'start' ? setStartDate(date) : setEndDate(date)
+      }
+    }, inputOnChangeDelay)
+
     const InputGroup = () => (
       <div
         className={classNames('input-group', 'picker-input-group', {
@@ -419,11 +449,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           readOnly={inputReadOnly || typeof format === 'string'}
           required={required}
           onChange={(event) => {
-            const date = getLocalDateFromString(event.target.value, locale, timepicker)
-            if (date instanceof Date && date.getTime()) {
-              setCalendarDate(date)
-              setStartDate(date)
-            }
+            handleOnChange(event.target.value, 'start')
           }}
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
@@ -439,18 +465,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className={classNames('form-control date-picker-input', {
               hover: inputEndHoverValue,
             })}
-
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
             readOnly={inputReadOnly || typeof format === 'string'}
             required={required}
             onChange={(event) => {
-              const date = getLocalDateFromString(event.target.value, locale, timepicker)
-              if (date instanceof Date && date.getTime()) {
-                setCalendarDate(date)
-                setEndDate(date)
-              }
+              handleOnChange(event.target.value, 'end')
             }}
             onClick={() => setSelectEndDate(true)}
             ref={inputEndRef}
@@ -692,6 +713,9 @@ CDateRangePicker.propTypes = {
   confirmButtonVariant: CButton.propTypes?.variant,
   id: PropTypes.string,
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  inputDateFormat: PropTypes.func,
+  inputDateParse: PropTypes.func,
+  inputOnChangeDelay: PropTypes.number,
   inputReadOnly: PropTypes.bool,
   placeholder: PropTypes.oneOfType([
     PropTypes.string,

package/src/components/popover/CPopover.tsx

@@ -1,10 +1,10 @@
-import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
 
-import { usePopper } from '../../hooks'
+import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
 import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -68,132 +68,141 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   visible?: boolean
 }
 
-export const CPopover: FC<CPopoverProps> = ({
-  children,
-  animation = true,
-  className,
-  content,
-  delay = 0,
-  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-  offset = [0, 8],
-  onHide,
-  onShow,
-  placement = 'top',
-  title,
-  trigger = 'click',
-  visible,
-  ...rest
-}) => {
-  const popoverRef = useRef(null)
-  const togglerRef = useRef(null)
-  const { initPopper, destroyPopper } = usePopper()
-  const [_visible, setVisible] = useState(visible)
+export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
+  (
+    {
+      children,
+      animation = true,
+      className,
+      content,
+      delay = 0,
+      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
+      offset = [0, 8],
+      onHide,
+      onShow,
+      placement = 'top',
+      title,
+      trigger = 'click',
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const popoverRef = useRef(null)
+    const togglerRef = useRef(null)
+    const forkedRef = useForkedRef(ref, popoverRef)
 
-  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const { initPopper, destroyPopper } = usePopper()
+    const [_visible, setVisible] = useState(visible)
 
-  const popperConfig = {
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.popover-arrow',
+    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.popover-arrow',
+          },
         },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: fallbackPlacements,
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: fallbackPlacements,
+          },
         },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
         },
-      },
-    ],
-    placement: getRTLPlacement(placement, togglerRef.current),
-  }
+      ],
+      placement: getRTLPlacement(placement, togglerRef.current),
+    }
 
-  useEffect(() => {
-    setVisible(visible)
-  }, [visible])
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
 
-  useEffect(() => {
-    if (_visible && togglerRef.current && popoverRef.current) {
-      initPopper(togglerRef.current, popoverRef.current, popperConfig)
-    }
+    useEffect(() => {
+      if (_visible && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, popperConfig)
+      }
 
-    return () => {
-      destroyPopper()
-    }
-  }, [_visible])
+      return () => {
+        destroyPopper()
+      }
+    }, [_visible])
 
-  const toggleVisible = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => setVisible(true), _delay.show)
-      return
-    }
+    const toggleVisible = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => setVisible(true), _delay.show)
+        return
+      }
 
-    setTimeout(() => setVisible(false), _delay.hide)
-  }
+      setTimeout(() => setVisible(false), _delay.hide)
+    }
 
-  return (
-    <>
-      {React.cloneElement(children as React.ReactElement<any>, {
-        ref: togglerRef,
-        ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => toggleVisible(!_visible),
-        }),
-        ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => toggleVisible(true),
-          onBlur: () => toggleVisible(false),
-        }),
-        ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => toggleVisible(true),
-          onMouseLeave: () => toggleVisible(false),
-        }),
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
-          <Transition
-            in={_visible}
-            mountOnEnter
-            nodeRef={popoverRef}
-            onEnter={onShow}
-            onExit={onHide}
-            timeout={{
-              enter: 0,
-              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
-            }}
-            unmountOnExit
-          >
-            {(state) => (
-              <div
-                className={classNames(
-                  'popover',
-                  'bs-popover-auto',
-                  {
-                    fade: animation,
-                    show: state === 'entered',
-                  },
-                  className,
-                )}
-                ref={popoverRef}
-                role="tooltip"
-                {...rest}
-              >
-                <div className="popover-arrow"></div>
-                <div className="popover-header">{title}</div>
-                <div className="popover-body">{content}</div>
-              </div>
-            )}
-          </Transition>,
-          document.body,
-        )}
-    </>
-  )
-}
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          ref: togglerRef,
+          ...((trigger === 'click' || trigger.includes('click')) && {
+            onClick: () => toggleVisible(!_visible),
+          }),
+          ...((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: () => toggleVisible(true),
+            onBlur: () => toggleVisible(false),
+          }),
+          ...((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: () => toggleVisible(true),
+            onMouseLeave: () => toggleVisible(false),
+          }),
+        })}
+        {typeof window !== 'undefined' &&
+          createPortal(
+            <Transition
+              in={_visible}
+              mountOnEnter
+              nodeRef={popoverRef}
+              onEnter={onShow}
+              onExit={onHide}
+              timeout={{
+                enter: 0,
+                exit: popoverRef.current
+                  ? getTransitionDurationFromElement(popoverRef.current) + 50
+                  : 200,
+              }}
+              unmountOnExit
+            >
+              {(state) => (
+                <div
+                  className={classNames(
+                    'popover',
+                    'bs-popover-auto',
+                    {
+                      fade: animation,
+                      show: state === 'entered',
+                    },
+                    className,
+                  )}
+                  ref={forkedRef}
+                  role="tooltip"
+                  {...rest}
+                >
+                  <div className="popover-arrow"></div>
+                  <div className="popover-header">{title}</div>
+                  <div className="popover-body">{content}</div>
+                </div>
+              )}
+            </Transition>,
+            document.body,
+          )}
+      </>
+    )
+  },
+)
 
 CPopover.propTypes = {
   animation: PropTypes.bool,

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

@@ -183,7 +183,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     })
 
     useEffect(() => {
-      setDate(convertTimeToDate(time))
+      setDate(time ? convertTimeToDate(time) : null)
     }, [time])
 
     useEffect(() => {
@@ -390,38 +390,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       )
     }
 
-    const TimePickerRoll = () => (
-      <>
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfHours}
-          onClick={(index: number) => handleTimeChange('hours', index.toString())}
-          selected={getSelectedHour(date, locale, ampm)}
-        />
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
-          onClick={(index: number) => handleTimeChange('minutes', index.toString())}
-          selected={getSelectedMinutes(date)}
-        />
-        {seconds && (
-          <CTimePickerRollCol
-            elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
-            onClick={(index: number) => handleTimeChange('seconds', index.toString())}
-            selected={getSelectedSeconds(date)}
-          />
-        )}
-        {localizedTimePartials && localizedTimePartials.hour12 && (
-          <CTimePickerRollCol
-            elements={[
-              { value: 'am', label: 'AM' },
-              { value: 'pm', label: 'PM' },
-            ]}
-            onClick={(value: string) => handleTimeChange('toggle', value)}
-            selected={_ampm}
-          />
-        )}
-      </>
-    )
-
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -499,7 +467,39 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               ['time-picker-roll']: variant === 'roll',
             })}
           >
-            {variant === 'select' ? <TimePickerSelect /> : TimePickerRoll()}
+            {variant === 'select' ? (
+              <TimePickerSelect />
+            ) : (
+              <>
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfHours}
+                  onClick={(index: number) => handleTimeChange('hours', index.toString())}
+                  selected={getSelectedHour(date, locale, ampm)}
+                />
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
+                  onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                  selected={getSelectedMinutes(date)}
+                />
+                {seconds && (
+                  <CTimePickerRollCol
+                    elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
+                    onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+                    selected={getSelectedSeconds(date)}
+                  />
+                )}
+                {localizedTimePartials && localizedTimePartials.hour12 && (
+                  <CTimePickerRollCol
+                    elements={[
+                      { value: 'am', label: 'AM' },
+                      { value: 'pm', label: 'PM' },
+                    ]}
+                    onClick={(value: string) => handleTimeChange('toggle', value)}
+                    selected={_ampm}
+                  />
+                )}
+              </>
+            )}
           </div>
         </CPicker>
       </CFormControlWrapper>

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 '../../hooks'
+import { useForkedRef, useIsVisible } from '../../hooks'
 
 export interface Element {
   value: number | string
@@ -20,18 +20,21 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
     const init = useRef(true)
     const colRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, colRef)
+    const isVisible = useIsVisible(colRef)
 
     useEffect(() => {
       const nodeEl = colRef.current?.querySelector('.selected')
-      if (nodeEl && nodeEl instanceof HTMLElement) {
+      if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.current?.scrollTo({
           top: nodeEl.offsetTop,
           behavior: init.current ? 'auto' : 'smooth',
         })
       }
 
-      init.current = false
-    }, [selected])
+      if (isVisible) {
+        init.current = false
+      }
+    }, [isVisible, selected])
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {