@coreui/react-pro 5.20.0 → 5.22.0

package/src/components/callout/CCallout.tsx

@@ -27,7 +27,7 @@ export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
           {
             [`callout-${color}`]: color,
           },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -35,7 +35,7 @@ export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCallout.propTypes = {

package/src/components/callout/__tests__/CCallout.spec.tsx

@@ -12,7 +12,7 @@ test('CCallout customize', async () => {
   const { container } = render(
     <CCallout className="bazinga" color="primary">
       Test
-    </CCallout>,
+    </CCallout>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/CCard.tsx

@@ -42,7 +42,7 @@ export const CCard = forwardRef<HTMLDivElement, CCardProps>(
             [`text-${textColor}`]: textColor,
             [`text-bg-${textBgColor}`]: textBgColor,
           },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -50,7 +50,7 @@ export const CCard = forwardRef<HTMLDivElement, CCardProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCard.propTypes = {

package/src/components/card/CCardBody.tsx

@@ -16,7 +16,7 @@ export const CCardBody = forwardRef<HTMLDivElement, CCardBodyProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCardBody.propTypes = {

package/src/components/card/CCardFooter.tsx

@@ -16,7 +16,7 @@ export const CCardFooter = forwardRef<HTMLDivElement, CCardFooterProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCardFooter.propTypes = {

package/src/components/card/CCardGroup.tsx

@@ -16,7 +16,7 @@ export const CCardGroup = forwardRef<HTMLDivElement, CCardGroupProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCardGroup.propTypes = {

package/src/components/card/CCardImageOverlay.tsx

@@ -16,7 +16,7 @@ export const CCardImageOverlay = forwardRef<HTMLDivElement, CCardImageOverlayPro
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCardImageOverlay.propTypes = {

package/src/components/card/CCardLink.tsx

@@ -22,7 +22,7 @@ export const CCardLink = forwardRef<HTMLAnchorElement, CCardLinkProps>(
         {children}
       </CLink>
     )
-  },
+  }
 )
 
 CCardLink.propTypes = {

package/src/components/card/CCardSubtitle.tsx

@@ -23,7 +23,7 @@ export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitl
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CCardSubtitle.propTypes = {

package/src/components/card/__tests__/CCard.spec.tsx

@@ -12,7 +12,7 @@ test('CCard customize', async () => {
   const { container } = render(
     <CCard className="bazinga" color="primary" textColor="warning">
       Test
-    </CCard>,
+    </CCard>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -45,7 +45,7 @@ test('CCardGroup full example', async () => {
           <CCardTitle>Card Title</CCardTitle>
         </CCardBody>
       </CCard>
-    </CCardGroup>,
+    </CCardGroup>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/card/__tests__/CCardHeader.spec.tsx

@@ -12,7 +12,7 @@ test('CCardHeader customize', async () => {
   const { container } = render(
     <CCardHeader className="bazinga" as="h3">
       Test
-    </CCardHeader>,
+    </CCardHeader>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/__tests__/CCardLink.spec.tsx

@@ -12,7 +12,7 @@ test('CCardLink customize', async () => {
   const { container } = render(
     <CCardLink className="bazinga" href="/bazinga">
       Test
-    </CCardLink>,
+    </CCardLink>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/__tests__/CCardSubtitle.spec.tsx

@@ -12,7 +12,7 @@ test('CCardSubtitle customize', async () => {
   const { container } = render(
     <CCardSubtitle className="bazinga" as="h3">
       Test
-    </CCardSubtitle>,
+    </CCardSubtitle>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/__tests__/CCardText.spec.tsx

@@ -12,7 +12,7 @@ test('CCardText customize', async () => {
   const { container } = render(
     <CCardText className="bazinga" as="h3">
       Test
-    </CCardText>,
+    </CCardText>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/card/__tests__/CCardTitle.spec.tsx

@@ -12,7 +12,7 @@ test('CCardTitle customize', async () => {
   const { container } = render(
     <CCardTitle className="bazinga" as="h3">
       Test
-    </CCardTitle>,
+    </CCardTitle>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/carousel/__tests__/CCarousel.spec.tsx

@@ -18,7 +18,7 @@ test('loads and displays CCarousel component', async () => {
         Item-3
         <CCarouselCaption>Caption-3</CCarouselCaption>
       </CCarouselItem>
-    </CCarousel>,
+    </CCarousel>
   )
 
   const carousel = document.querySelector('.carousel')
@@ -74,7 +74,7 @@ test('CCarousel click on indicator', async () => {
         Item-3
         <CCarouselCaption>Caption-3</CCarouselCaption>
       </CCarouselItem>
-    </CCarousel>,
+    </CCarousel>
   )
   const item1 = getByText(container, 'Item-1')
   const item2 = getByText(container, 'Item-2')
@@ -118,7 +118,7 @@ test('CCarousel click on button', async () => {
         Item-3
         <CCarouselCaption>Caption-3</CCarouselCaption>
       </CCarouselItem>
-    </CCarousel>,
+    </CCarousel>
   )
   const item1 = getByText(container, 'Item-1')
   const item2 = getByText(container, 'Item-2')

package/src/components/close-button/CCloseButton.tsx

@@ -35,7 +35,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
             'btn-close-white': white,
           },
           disabled,
-          className,
+          className
         )}
         aria-label="Close"
         disabled={disabled}
@@ -44,7 +44,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
         ref={ref}
       />
     )
-  },
+  }
 )
 
 CCloseButton.propTypes = {

package/src/components/collapse/CCollapse.tsx

@@ -111,7 +111,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
         }}
       </CSSTransition>
     )
-  },
+  }
 )
 
 CCollapse.propTypes = {

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

@@ -6,14 +6,19 @@ import { isMobile } from 'react-device-detect'
 
 import { CButton } from '../button'
 import { CCalendar, CCalendarProps } from '../calendar/CCalendar'
-import { convertToDateObject } from '../calendar/utils'
+import {
+  convertToDateObject,
+  getDateBySelectionType,
+  getLocalDateFromString,
+  isDateDisabled,
+} from '../calendar/utils'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
 import { useDebouncedCallback } from '../../hooks'
 import { Colors } from '../../types'
-import { getInputIdOrName, getLocalDateFromString } from './utils'
+import { getInputIdOrName } from './utils'
 
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel' | 'id'>,
@@ -312,12 +317,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     useEffect(() => {
       if (startDate) {
         setStartDate(startDate)
+        setInputValue(inputStartRef.current, startDate)
       }
     }, [startDate])
 
     useEffect(() => {
       if (endDate) {
         setEndDate(endDate)
+        setInputValue(inputEndRef.current, endDate)
       }
     }, [endDate])
 
@@ -333,24 +340,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }, [minDate])
 
-    useEffect(() => {
-      if (inputStartHoverValue) {
-        setInputValue(inputStartRef.current, inputStartHoverValue)
-        return
-      }
-
-      setInputValue(inputStartRef.current, _startDate)
-    }, [inputStartHoverValue, _startDate])
-
-    useEffect(() => {
-      if (inputEndHoverValue) {
-        setInputValue(inputEndRef.current, inputEndHoverValue)
-        return
-      }
-
-      setInputValue(inputEndRef.current, _endDate)
-    }, [inputEndHoverValue, _endDate])
-
     useEffect(() => {
       if (inputStartRef.current && inputStartRef.current.form) {
         formRef.current = inputStartRef.current.form
@@ -369,9 +358,17 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
 
     const formatDate = (date: Date | string) => {
       if (inputDateFormat) {
-        return inputDateFormat(
+        const convertedDate =
           date instanceof Date ? new Date(date) : convertToDateObject(date, selectionType)
-        )
+
+        if (
+          !convertedDate ||
+          (convertedDate instanceof Date && Number.isNaN(convertedDate.getTime()))
+        ) {
+          return ''
+        }
+
+        return inputDateFormat(convertedDate)
       }
 
       if (selectionType !== 'day') {
@@ -379,6 +376,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
 
       const _date = new Date(date)
+      if (Number.isNaN(_date.getTime())) {
+        return ''
+      }
 
       return timepicker ? _date.toLocaleString(locale) : _date.toLocaleDateString(locale)
     }
@@ -412,12 +412,15 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       event.stopPropagation()
       setStartDate(null)
       setEndDate(null)
+      setInputValue(inputStartRef.current, null)
+      setInputValue(inputEndRef.current, null)
       onStartDateChange?.(null)
       onEndDateChange?.(null)
     }
 
     const handleEndDateChange = (date: Date | string | null) => {
       setEndDate(date)
+      setInputValue(inputEndRef.current, date)
       setInputEndHoverValue(null)
       onEndDateChange?.(date)
 
@@ -444,6 +447,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
 
     const handleStartDateChange = (date: Date | string | null) => {
       setStartDate(date)
+      setInputValue(inputStartRef.current, date)
       setInputStartHoverValue(null)
       onStartDateChange?.(date)
 
@@ -457,71 +461,113 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }
 
     const handleOnChange = useDebouncedCallback((value: string, input: string) => {
-      const date = inputDateParse
-        ? inputDateParse(value)
-        : getLocalDateFromString(value, locale, timepicker)
+      let date: Date | string | null = null
 
-      if (date instanceof Date && date.getTime()) {
-        setCalendarDate(date)
+      if (inputDateParse) {
+        date = inputDateParse(value)
+      } else if (selectionType === 'day') {
+        date = getLocalDateFromString(value, locale, timepicker)
+      } else {
+        date = convertToDateObject(value, selectionType)
       }
 
-      if (input === 'start') {
-        setStartDate(date ?? null)
-        onStartDateChange?.(date ?? null)
-      } else {
-        setEndDate(date ?? null)
-        onEndDateChange?.(date ?? null)
+      if (
+        date instanceof Date &&
+        isDateDisabled(
+          date,
+          _minDate ? convertToDateObject(_minDate, selectionType) : null,
+          _maxDate ? convertToDateObject(_maxDate, selectionType) : null,
+          disabledDates
+        )
+      ) {
+        return // Don't update if date is disabled
+      }
+
+      const isStartInput = input === 'start'
+      const inputRef = isStartInput ? inputStartRef : inputEndRef
+      const setDate = isStartInput ? setStartDate : setEndDate
+      const onChange = isStartInput ? onStartDateChange : onEndDateChange
+      const validDate = date ?? null
+      let formatedDate: Date | string | null = validDate
+
+      // Update calendar date for valid dates
+      if (validDate instanceof Date && validDate.getTime()) {
+        if (selectionType !== 'day') {
+          formatedDate = getDateBySelectionType(validDate, selectionType)
+        }
+
+        setCalendarDate(formatedDate)
+        setInputValue(inputRef.current, formatedDate)
       }
+
+      // Update state and input
+      setDate(formatedDate)
+      onChange?.(formatedDate)
     }, inputOnChangeDelay)
 
-    const InputGroup = () => (
-      <div className="date-picker-input-group">
+    const renderInput = (type: 'start' | 'end') => {
+      const isStart = type === 'start'
+      const hoverValue = isStart ? inputStartHoverValue : inputEndHoverValue
+      const inputRef = isStart ? inputStartRef : inputEndRef
+      const placeholderText = isStart
+        ? Array.isArray(placeholder)
+          ? placeholder[0]
+          : placeholder
+        : placeholder[1]
+
+      const inputElement = (
         <input
           autoComplete="off"
           className={classNames('date-picker-input', {
-            hover: inputStartHoverValue,
+            hover: hoverValue,
           })}
           disabled={disabled}
-          {...(id && { id: getInputIdOrName(id, range, 'start') })}
-          {...(name && { name: getInputIdOrName(name, range, 'start') })}
+          {...(id && { id: getInputIdOrName(id, range, type) })}
+          {...(name && { name: getInputIdOrName(name, range, type) })}
           {...(id &&
             !Array.isArray(id) &&
-            !name && { name: range ? `${id}-start-date` : `${id}-date` })} // TODO: remove in v6
-          placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
+            !name && {
+              name: isStart ? (range ? `${id}-start-date` : `${id}-date`) : `${id}-end-date`,
+            })} // TODO: remove in v6
+          placeholder={placeholderText}
           readOnly={inputReadOnly}
           required={required}
           onChange={(event) => {
-            handleOnChange(event.target.value, 'start')
+            handleOnChange(event.target.value, type)
           }}
-          onClick={() => setSelectEndDate(false)}
-          ref={inputStartRef}
+          onClick={() => setSelectEndDate(!isStart)}
+          ref={inputRef}
         />
+      )
+
+      if (previewDateOnHover && !disabled) {
+        return (
+          <div className="date-picker-input-wrapper">
+            {inputElement}
+            {hoverValue && (
+              <input
+                className="date-picker-input date-picker-input-preview"
+                readOnly
+                value={formatDate(hoverValue) as string}
+              />
+            )}
+          </div>
+        )
+      }
+
+      return inputElement
+    }
+
+    const InputGroup = () => (
+      <div className="date-picker-input-group">
+        {renderInput('start')}
         {range && separator !== false && <div className="date-picker-separator" />}
-        {range && (
-          <input
-            autoComplete="off"
-            className={classNames('date-picker-input', {
-              hover: inputEndHoverValue,
-            })}
-            disabled={disabled}
-            {...(id && { id: getInputIdOrName(id, range, 'end') })}
-            {...(name && { name: getInputIdOrName(name, range, 'end') })}
-            {...(id && !Array.isArray(id) && !name && { name: `${id}-end-date` })} // TODO: remove in v6
-            placeholder={placeholder[1]}
-            readOnly={inputReadOnly}
-            required={required}
-            onChange={(event) => {
-              handleOnChange(event.target.value, 'end')
-            }}
-            onClick={() => setSelectEndDate(true)}
-            ref={inputEndRef}
-          />
-        )}
+        {range && renderInput('end')}
         {indicator &&
           (typeof indicator === 'boolean' ? (
             <div
               className="date-picker-indicator"
-              {...(disabled !== false && {
+              {...(!disabled && {
                 onClick: () => setVisible(!_visible),
                 onKeyDown: (event) => {
                   if (event.key === 'Enter') {

package/src/components/date-range-picker/utils.ts

@@ -21,61 +21,3 @@ export const getInputIdOrName = (
 
   return attribute
 }
-
-/**
- * Parses a date string into a Date object based on the provided locale and time inclusion.
- *
- * @param dateString - The date string to parse.
- * @param locale - The locale to use for parsing the date string.
- * @param includeTime - Optional. Determines whether to include time in the parsed Date object.
- * @returns A Date object representing the parsed date and time, or `undefined` if parsing fails.
- */
-export const getLocalDateFromString = (
-  string: string,
-  locale: string,
-  time?: boolean
-): Date | undefined => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-    .replace('2013', '(?<year>[0-9]{2,4})')
-    .replace('12', '(?<month>[0-9]{1,2})')
-    .replace('31', '(?<day>[0-9]{1,2})')
-
-  if (time) {
-    regex = regex
-      .replace('5', '(?<hour>[0-9]{1,2})')
-      .replace('17', '(?<hour>[0-9]{1,2})')
-      .replace('19', '(?<minute>[0-9]{1,2})')
-      .replace('22', '(?<second>[0-9]{1,2})')
-      .replace('PM', '(?<ampm>[A-Z]{2})')
-  }
-
-  const rgx = new RegExp(`${regex}`)
-  const partials = string.match(rgx)
-
-  if (partials === null) return
-
-  const newDate =
-    partials.groups &&
-    (time
-      ? new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-          partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
-              ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
-            : Number(partials.groups['hour']),
-          Number(partials.groups['minute']),
-          Number(partials.groups['second'])
-        )
-      : new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day'])
-        ))
-
-  return newDate
-}