@coreui/react-pro 5.0.0-rc.0 → 5.0.0-rc.2

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

@@ -1,134 +1,194 @@
 import type { LocalizedTimePartials } from './types'
 
+/**
+ * Converts a 12-hour time format to a 24-hour time format.
+ * @param {('am' | 'pm')} abbr The abbreviation indicating AM or PM.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 24-hour format.
+ */
 export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
   if (abbr === 'am' && hour === 12) {
     return 0
   }
+
   if (abbr === 'am') {
     return hour
   }
+
   if (abbr === 'pm' && hour === 12) {
     return 12
   }
+
   return hour + 12
 }
 
+/**
+ * Converts a 24-hour time format to a 12-hour format.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 12-hour format.
+ */
 export const convert24hTo12h = (hour: number) => hour % 12 || 12
 
+/**
+ * Converts a time input into a Date object.
+ * @param {Date | string | null | undefined} time The time input to be converted.
+ * @returns {Date | null} The converted Date object or null if the input is falsy.
+ */
 export const convertTimeToDate = (time: Date | string | null | undefined) =>
-  time
-    ? time instanceof Date
-      ? time
-      : new Date(`1970-01-01 ${time}`)
-    : null
+  time ? (time instanceof Date ? time : new Date(`1970-01-01 ${time}`)) : null
 
+/**
+ * Retrieves the AM/PM part of the specified date according to the given locale.
+ * @param {Date} date The date from which to extract the AM/PM part.
+ * @param {string} locale The locale to use for formatting.
+ * @returns {string} 'am' or 'pm' based on the given date and locale.
+ */
 export const getAmPm = (date: Date, locale: string) => {
   if (date.toLocaleTimeString(locale).includes('AM')) {
     return 'am'
   }
+
   if (date.toLocaleTimeString(locale).includes('PM')) {
     return 'pm'
   }
+
   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 {
-      value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
-      label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(
-        locale,
-      ),
-    }
+/**
+ * Formats an array of time values (hours, minutes, or seconds) according to the specified locale and partial.
+ * @param {number[]} values An array of time values to format.
+ * @param {string} locale The locale to use for formatting.
+ * @param {('hour' | 'minute' | 'second')} partial The type of time value to format.
+ * @returns {Array} An array of objects with the original value and its localized label.
+ */
+export const formatTimePartials = (
+  values: number[],
+  locale: string,
+  partial: 'hour' | 'minute' | 'second',
+) => {
+  const date = new Date()
+
+  const formatter = new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
   })
 
-// TODO: clean-up
-export const getListOfMinutes = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setMinutes(i)
-    return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+  return values.map((value) => {
+    if (partial === 'hour') {
+      date.setHours(value)
+    }
+
+    if (partial === 'minute') {
+      date.setMinutes(value)
+    }
+
+    if (partial === 'second') {
+      date.setSeconds(value)
     }
-  })
 
-// TODO: clean-up
-export const getListOfSeconds = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setSeconds(i)
     return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+      value,
+      label: formatter.formatToParts(date).find((part) => part.type === partial)?.value || '',
     }
   })
+}
 
+/**
+ * Generates localized time partials (hours, minutes, seconds) based on the given parameters.
+ * @param {string} locale The locale to use for generating localized time partials.
+ * @param {'auto' | boolean} ampm Determines whether to use 12-hour or 24-hour format. 'auto' decides based on locale.
+ * @param {boolean | number[] | Function} hours An array of hours, a boolean, or a function to generate hours.
+ * @param {boolean | number[] | Function} minutes An array of minutes, a boolean, or a function to generate minutes.
+ * @param {boolean | number[] | Function} seconds An array of seconds, a boolean, or a function to generate seconds.
+ * @returns {LocalizedTimePartials} An object containing arrays of localized time partials and a boolean indicating if 12-hour format is used.
+ */
 export const getLocalizedTimePartials = (
   locale: string,
   ampm: 'auto' | boolean = 'auto',
+  hours: boolean | number[] | ((hour: number) => number[]) = [],
+  minutes: boolean | number[] | ((minute: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = [],
 ): 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],
-    }
-  })
+  const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true
+
+  const listOfHours =
+    Array.isArray(hours) && hours.length > 0
+      ? hours
+      : (typeof hours === 'function'
+        ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) =>
+            hours(hour),
+          )
+        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)))
+
+  const listOfMinutes =
+    Array.isArray(minutes) && minutes.length > 0
+      ? minutes
+      : (typeof minutes === 'function'
+        ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
+        : Array.from({ length: 60 }, (_, i) => i))
+
+  const listOfSeconds =
+    Array.isArray(seconds) && seconds.length > 0
+      ? seconds
+      : (typeof seconds === 'function'
+        ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
+        : Array.from({ length: 60 }, (_, i) => i))
 
   return {
-    listOfHours,
-    listOfMinutes: listOfMinutesSeconds,
-    listOfSeconds: listOfMinutesSeconds,
+    listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
+    listOfMinutes: formatTimePartials(listOfMinutes, locale, 'minute'),
+    listOfSeconds: formatTimePartials(listOfSeconds, locale, 'second'),
     hour12,
   }
 }
 
+/**
+ * Gets the selected hour from a date object in either 12-hour or 24-hour format based on locale and preference.
+ * @param {Date | null} date The date object from which to extract the hour. If null, the function returns an empty string.
+ * @param {string} locale The locale to use when determining whether to return in 12-hour or 24-hour format.
+ * @param {'auto' | boolean} ampm Determines the format of the hour returned. 'auto' decides based on locale, true forces 12-hour format, and false forces 24-hour format.
+ * @returns {string | number} The hour in the specified format or an empty string if the date is null.
+ */
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
   ampm: 'auto' | boolean = 'auto',
 ) =>
   date
-    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
-      : date.getHours()
+      : date.getHours())
     : ''
 
+/**
+ * Gets the selected minutes from a date object.
+ * @param {Date | null} date The date object from which to extract the minutes. If null, the function returns an empty string.
+ * @returns {string | number} The minutes from the date or an empty string if the date is null.
+ */
 export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')
 
+/**
+ * Gets the selected seconds from a date object.
+ * @param {Date | null} date The date object from which to extract the seconds. If null, the function returns an empty string.
+ * @returns {string | number} The seconds from the date or an empty string if the date is null.
+ */
 export const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')
 
+/**
+ * Determines if the given locale uses AM/PM format.
+ * @param {string} locale The locale to check.
+ * @returns {boolean} True if the locale uses AM/PM format, otherwise false.
+ */
 export const isAmPm = (locale: string) =>
   ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
 
+/**
+ * Validates if the given string represents a valid time.
+ * @param {string} time The time string to validate.
+ * @returns {boolean} True if the string is a valid time, otherwise false.
+ */
 export const isValidTime = (time: string) => {
   const d = new Date(`1970-01-01 ${time}`)
   return d instanceof Date && d.getTime()

package/src/components/toast/CToastClose.tsx

@@ -6,17 +6,19 @@ import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
 import { CToastContext } from './CToast'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 type CombineButtonProps = CCloseButtonProps & CButtonProps
 
-export interface CToastCloseProps extends CombineButtonProps {
+export interface CToastCloseProps extends Omit<CombineButtonProps, 'as'> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  component?: string | ElementType
+  as?: string | ElementType
 }
 
-export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
-  ({ children, component: Component, ...rest }, ref) => {
+export const CToastClose: PolymorphicRefForwardingComponent<'button', CToastCloseProps> =
+  forwardRef<HTMLButtonElement, CToastCloseProps>(({ children, as: Component, ...rest }, ref) => {
     const { setVisible } = useContext(CToastContext)
     return Component ? (
       <Component onClick={() => setVisible(false)} {...rest} ref={ref}>
@@ -25,12 +27,11 @@ export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
     ) : (
       <CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
     )
-  },
-)
+  })
 
 CToastClose.propTypes = {
   ...CCloseButton.propTypes,
-  component: PropTypes.elementType,
+  as: PropTypes.elementType,
 }
 
 CToastClose.displayName = 'CToastClose'

package/src/components/tooltip/CTooltip.tsx

@@ -90,9 +90,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     },
     ref,
   ) => {
-    const tooltipRef = useRef(null)
+    const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, tooltipRef)
+    const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
     const [_visible, setVisible] = useState(visible)
@@ -127,16 +128,6 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       setVisible(visible)
     }, [visible])
 
-    useEffect(() => {
-      if (_visible && togglerRef.current && tooltipRef.current) {
-        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-      }
-
-      return () => {
-        destroyPopper()
-      }
-    }, [_visible])
-
     const toggleVisible = (visible: boolean) => {
       if (visible) {
         setTimeout(() => setVisible(true), _delay.show)
@@ -149,6 +140,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
+          ...(_visible && {
+            'aria-describedby': uID.current,
+          }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
             onClick: () => toggleVisible(!_visible),
@@ -167,8 +161,22 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             in={_visible}
             mountOnEnter
             nodeRef={tooltipRef}
-            onEnter={onShow}
+            onEnter={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+              }
+
+              onShow
+            }}
+            onEntering={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                tooltipRef.current.style.display = 'initial'
+              }
+            }}
             onExit={onHide}
+            onExited={() => {
+              destroyPopper()
+            }}
             timeout={{
               enter: 0,
               exit: tooltipRef.current
@@ -188,8 +196,12 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
                   },
                   className,
                 )}
+                id={uID.current}
                 ref={forkedRef}
                 role="tooltip"
+                style={{
+                  display: 'none',
+                }}
                 {...rest}
               >
                 <div className="tooltip-arrow"></div>

package/src/helpers/index.ts

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

package/src/helpers/polymorphicComponent.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ElementType, PropsWithChildren, ReactNode } from 'react'
+
+export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>
+
+export type ReplaceProps<Inner extends ElementType, P> = Omit<ComponentPropsWithRef<Inner>, P> & P
+
+export interface AsProp<As extends ElementType = ElementType> {
+  as?: As
+}
+
+export interface Props<As extends ElementType = ElementType> extends AsProp<As> {}
+
+export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
+  <As extends ElementType = TInitial>(
+    props: PropsWithChildren<ReplaceProps<As, Props<As> & P>>,
+    context?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  ): ReactNode | null
+  propTypes?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  defaultProps?: Partial<P>
+  displayName?: string
+}

package/src/hooks/useDebouncedCallback.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback,  } from 'react'
+import { useRef, useCallback } from 'react'
 
 export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
   const timeout = useRef<ReturnType<typeof setTimeout>>()

package/src/components/list-group/CListGroupItem.tsx~HEAD

@@ -1,81 +0,0 @@
-import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
-}
-
-export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
-  CListGroupItemProps
->(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
-  const _className = classNames(
-    'list-group-item',
-    {
-      [`list-group-item-${color}`]: color,
-      'list-group-item-action': component === 'a' || component === 'button',
-      active,
-      disabled,
-    },
-    className,
-  )
-
-  const Component = component === 'a' || component === 'button' ? CLink : component
-
-  rest = {
-    ...((component === 'a' || component === 'button') && {
-      active,
-      disabled,
-      component,
-      ref: ref,
-    }),
-    ...(active && { 'aria-current': true }),
-    ...(disabled && { 'aria-disabled': true }),
-    ...rest,
-  }
-
-  return (
-    <Component className={_className} {...rest}>
-      {children}
-    </Component>
-  )
-})
-
-CListGroupItem.propTypes = {
-  active: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  component: PropTypes.elementType,
-  disabled: PropTypes.bool,
-}
-
-CListGroupItem.displayName = 'CListGroupItem'