@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/smart-table/utils.ts

@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'react'
+
 import type {
   Column,
   ColumnFilter,
@@ -13,7 +15,7 @@ export const filterColumns = (
   items: Item[],
   columnFilter: boolean | ColumnFilter | undefined,
   columnFilterState: ColumnFilterValue,
-  itemsDataColumns: string[],
+  itemsDataColumns: string[]
 ): Item[] => {
   if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
     return items
@@ -32,7 +34,7 @@ export const filterColumns = (
       const columnFilterValue = String(value).toLowerCase()
       if (columnFilterValue && itemsDataColumns.includes(key)) {
         filteredItems = filteredItems.filter((item) =>
-          String(item[key]).toLowerCase().includes(columnFilterValue),
+          String(item[key]).toLowerCase().includes(columnFilterValue)
         )
       }
     }
@@ -45,7 +47,7 @@ export const filterTable = (
   items: Item[],
   tableFilter: boolean | TableFilter | undefined,
   tableFilterState: string,
-  itemsDataColumns: string[],
+  itemsDataColumns: string[]
 ): Item[] => {
   if (
     !tableFilterState ||
@@ -57,14 +59,14 @@ export const filterTable = (
   const filter = tableFilterState.toLowerCase()
 
   return items.filter((item) =>
-    itemsDataColumns.some((key) => String(item[key]).toLowerCase().includes(filter)),
+    itemsDataColumns.some((key) => String(item[key]).toLowerCase().includes(filter))
   )
 }
 
 export const getClickedColumnName = (
   target: HTMLElement,
   columnNames: string[],
-  selectable?: boolean,
+  selectable?: boolean
 ): string => {
   const clickedCell = target.closest('td')
   if (!clickedCell) {
@@ -97,7 +99,7 @@ export const getColumnName = (column: Column | string): string =>
 
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
-  items: Item[],
+  items: Item[]
 ): string[] => {
   if (columns) {
     const _columns = []
@@ -234,13 +236,10 @@ export const getColumnSorterState = (key: string, sorterState?: SorterValue[]):
   return state ? state.state : 0
 }
 
-export const getColumnValues = (items: Item[], key: string): any[] => items.map((item) => item[key])
+export const getColumnValues = (items: Item[], key: string): unknown[] =>
+  items.map((item) => item[key])
 
-export const getTableDataCellProps = (
-  column: Column | string,
-  item: Item,
-  colName: string,
-): Record<string, any> => {
+export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
   const props = {
     ...(typeof column === 'object' && column._colProps),
     ...item._cellProps?.all,
@@ -250,11 +249,7 @@ export const getTableDataCellProps = (
   return props
 }
 
-export const getTableDataCellStyles = (
-  column: Column | string,
-  item: Item,
-  colName: string,
-): Record<string, any> => {
+export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
   const styles = {
     ...(typeof column === 'object' && column._colStyle),
     ...item._cellStyle?.all,
@@ -269,9 +264,9 @@ export const getTableHeaderCellProps = (column: Column | string) =>
 
 export const getTableHeaderCellStyles = (
   column: Column | string,
-  columnSorter: boolean | Sorter | undefined,
-): Record<string, any> => {
-  const style: Record<string, any> = {}
+  columnSorter: boolean | Sorter | undefined
+): CSSProperties => {
+  const style: CSSProperties = {}
 
   const isSortable =
     columnSorter &&
@@ -294,7 +289,7 @@ export const isSortable = (
   columns: (string | Column)[] | undefined,
   columnSorter: boolean | Sorter | undefined,
   itemsDataColumns: string[],
-  columnNames: string[],
+  columnNames: string[]
 ): boolean => {
   const key = columnNames[index]
   const isDataColumn = itemsDataColumns.includes(key)
@@ -311,9 +306,9 @@ export const isSortable = (
 
 export const pretifyName = (name: string): string => {
   return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replaceAll(/[-_.]/g, ' ')
+    .replaceAll(/ +/g, ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
     .split(' ')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ')
@@ -323,11 +318,11 @@ export const sortBy = (
   column: Column | undefined,
   items: Item[],
   key: string,
-  order: SorterValue['state'],
+  order: SorterValue['state']
 ): Item[] => {
   const sorterFunction = getColumnSorterFunction(column)
 
-  const sortedItems = [...items].sort(
+  const sortedItems = items.toSorted(
     sorterFunction ||
       ((a, b) => {
         const valA = a[key]
@@ -335,10 +330,10 @@ export const sortBy = (
         const aValue = typeof valA === 'number' ? valA : String(valA).toLowerCase()
         const bValue = typeof valB === 'number' ? valB : String(valB).toLowerCase()
         return aValue > bValue ? 1 : bValue > aValue ? -1 : 0
-      }),
+      })
   )
 
-  return order === 'desc' ? sortedItems.reverse() : sortedItems
+  return order === 'desc' ? sortedItems.toReversed() : sortedItems
 }
 
 export const sortItems = (
@@ -346,7 +341,7 @@ export const sortItems = (
   columnSorter: boolean | Sorter | undefined,
   items: Item[],
   itemsDataColumns: string[],
-  sorterState: SorterValue[],
+  sorterState: SorterValue[]
 ): Item[] => {
   if (
     (columnSorter && typeof columnSorter === 'object' && columnSorter.external) ||
@@ -357,14 +352,13 @@ export const sortItems = (
 
   let sortedItems = [...items]
 
-  for (const sorter of [...sorterState].reverse()) {
+  for (const sorter of sorterState.toReversed()) {
     const key = sorter.column
     const order = sorter.state
     const column =
       columns &&
       (columns.find((column) => typeof column === 'object' && column.key === key) as
-        | Column
-        | undefined)
+        Column | undefined)
 
     if (!key || !itemsDataColumns.includes(key)) {
       continue

package/src/components/table/CTable.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, TableHTMLAttributes, useMemo } from 'react'
+import React, { forwardRef, ReactNode, TableHTMLAttributes, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -210,7 +210,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
                           })}
                           key={index}
                         >
-                          {item[colName]}
+                          {item[colName] as ReactNode}
                         </CTableDataCell>
                       ) : null
                     })}

package/src/components/table/CTableDataCell.tsx

@@ -6,7 +6,8 @@ import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CTableDataCellProps
-  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
+  extends
+    Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
     Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
   /**
    * Highlight a table row or cell.

package/src/components/table/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react'
+
 import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
 import { CTableRowProps } from '../table/CTableRow'
@@ -5,7 +7,7 @@ import { CTableRowProps } from '../table/CTableRow'
 export type Column = {
   label?: string
   key: string
-  _style?: any
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
 }
 
@@ -15,6 +17,7 @@ export type FooterItem = {
 }
 
 export type Item = {
-  [key: string]: number | string | any
+  _cellProps?: Record<string, CTableDataCellProps | undefined>
   _props?: CTableRowProps
+  [key: string]: unknown
 }

package/src/components/table/utils.ts

@@ -2,16 +2,16 @@ import type { Column, Item } from './types'
 
 export const pretifyName = (name: string) => {
   return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replaceAll(/[-_.]/g, ' ')
+    .replaceAll(/ +/g, ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
     .split(' ')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ')
 }
 
 export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
   columns

package/src/components/tabs/CTabList.tsx

@@ -37,7 +37,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
       ) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        // eslint-disable-next-line unicorn/prefer-spread
+
         const items: HTMLElement[] = Array.from(
           tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
         )

package/src/components/tabs/CTabPanel.tsx

@@ -44,7 +44,9 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
 
     useEffect(() => {
-      visible !== undefined && setVisible(visible)
+      if (visible !== undefined) {
+        setVisible(visible)
+      }
     }, [visible])
 
     useEffect(() => {

package/src/components/tabs/CTabsContext.ts

@@ -6,4 +6,4 @@ export interface CTabsContextProps {
   id?: string
 }
 
-export const CTabsContext = createContext({} as CTabsContextProps)
+export const CTabsContext = createContext({} as CTabsContextProps)

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

@@ -280,12 +280,20 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }, [inputRef])
 
     useEffect(() => {
-      if (formRef.current) {
-        formRef.current.addEventListener('submit', (event) => {
-          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
-        })
+      const form = formRef.current
+      if (!form) {
+        return
+      }
+
+      const handleSubmit = (event: Event) => {
+        setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+      }
+
+      form.addEventListener('submit', handleSubmit)
+      handleFormValidation(form)
 
-        handleFormValidation(formRef.current)
+      return () => {
+        form.removeEventListener('submit', handleSubmit)
       }
     }, [formRef, date])
 
@@ -402,7 +410,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             <div className="time-picker-cleaner" onClick={(event) => handleClear(event)} />
           ) : (
             React.isValidElement(cleaner) &&
-            React.cloneElement(cleaner as React.ReactElement<any>, {
+            React.cloneElement(cleaner as React.ReactElement<Record<string, unknown>>, {
               onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
             })
           ))}

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

@@ -60,19 +60,26 @@ export const getAmPm = (date: Date, locale: string): AmPm => {
  * @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.
+ * @param {boolean} [hour12] Whether the hour labels should use the 12-hour cycle. When omitted the formatter falls back to the locale's default cycle.
  * @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'
+  partial: 'hour' | 'minute' | 'second',
+  hour12?: boolean
 ): FormattedPartial[] => {
   const date = new Date()
   const forceTwoDigit = shouldUseTwoDigitHour(locale)
+  // `hour12: false` lets ICU pick either h23 (00–23) or h24 (01–24), so older
+  // engines label midnight as "24"; pin the cycle explicitly to stay stable.
+  const hourCycle: Intl.DateTimeFormatOptions['hourCycle'] =
+    hour12 === undefined ? undefined : hour12 ? 'h12' : 'h23'
   const formatter = new Intl.DateTimeFormat(locale, {
     hour: forceTwoDigit ? '2-digit' : 'numeric',
     minute: '2-digit',
     second: '2-digit',
+    hourCycle,
   })
 
   return values.map((value) => {
@@ -137,7 +144,7 @@ export const getLocalizedTimePartials = (
         : Array.from({ length: 60 }, (_, i) => i)
 
   return {
-    listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
+    listOfHours: formatTimePartials(listOfHours, locale, 'hour', hour12),
     listOfMinutes: formatTimePartials(listOfMinutes, locale, 'minute'),
     listOfSeconds: formatTimePartials(listOfSeconds, locale, 'second'),
     hour12,
@@ -192,7 +199,10 @@ export const isAmPm = (locale: string): boolean =>
  * @returns {boolean} True if the string is a valid time, otherwise false.
  */
 export const isValidTime = (time: string): boolean => {
-  const d = new Date(`1970-01-01T${time}`)
+  // Use a space separator (not the ISO "T") so AM/PM strings such as
+  // "10:30:00 AM" parse — these are exactly what the input displays in
+  // 12-hour locales, and what `convertTimeToDate` accepts.
+  const d = new Date(`1970-01-01 ${time}`)
   return d instanceof Date && !Number.isNaN(d.getTime())
 }
 

package/src/components/toast/CToastClose.tsx

@@ -1,15 +1,12 @@
 import React, { ElementType, forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { CButtonProps } from '../button/CButton'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 import { CToastContext } from './CToastContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-type CombineButtonProps = CCloseButtonProps & CButtonProps
-
-export interface CToastCloseProps extends Omit<CombineButtonProps, 'as'> {
+export interface CToastCloseProps extends CCloseButtonProps {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

package/src/components/toast/CToastHeader.tsx

@@ -5,6 +5,12 @@ import classNames from 'classnames'
 import { CToastClose } from './CToastClose'
 
 export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Sets the `aria-label` of the close button.
+   *
+   * @since 5.13.0
+   */
+  ariaCloseLabel?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -16,17 +22,18 @@ export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 
 export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
-  ({ children, className, closeButton, ...rest }, ref) => {
+  ({ children, ariaCloseLabel, className, closeButton, ...rest }, ref) => {
     return (
       <div className={classNames('toast-header', className)} {...rest} ref={ref}>
         {children}
-        {closeButton && <CToastClose />}
+        {closeButton && <CToastClose aria-label={ariaCloseLabel} />}
       </div>
     )
   }
 )
 
 CToastHeader.propTypes = {
+  ariaCloseLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   closeButton: PropTypes.bool,

package/src/components/tooltip/CTooltip.tsx

@@ -173,6 +173,14 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     const { initPopper, destroyPopper, updatePopper } = usePopper()
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+    const clearTimer = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+        timer.current = undefined
+      }
+    }
 
     const defaultPopperConfig: Partial<Options> = {
       modifiers: [
@@ -189,12 +197,23 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     }
 
     const handleShow = () => {
-      setMounted(true)
+      clearTimer()
+
+      if (mounted) {
+        timer.current = setTimeout(() => {
+          setVisible(true)
+        }, _delay.show)
+      } else {
+        setMounted(true)
+      }
+
       onShow?.()
     }
 
     const handleHide = () => {
-      setTimeout(() => {
+      clearTimer()
+
+      timer.current = setTimeout(() => {
         setVisible(false)
         onHide?.()
       }, _delay.hide)
@@ -211,7 +230,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     useEffect(() => {
       if (mounted && togglerRef.current && tooltipRef.current) {
         initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -223,6 +242,13 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && tooltipRef.current) {
         executeAfterTransition(() => {
@@ -231,27 +257,71 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [_visible])
 
+    useEffect(() => {
+      if (!_visible) {
+        return
+      }
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          handleHide()
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown, true)
+
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown, true)
+      }
+    }, [_visible])
+
     useEffect(() => {
       updatePopper()
     }, [content])
 
+    const child = children as React.ReactElement<
+      React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }
+    >
+
     return (
       <>
-        {React.cloneElement(children as React.ReactElement<any>, {
+        {React.cloneElement(child, {
           ...(_visible && {
             'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => (_visible ? handleHide() : handleShow()),
+            onClick: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onClick?.(event)
+
+              if (_visible) {
+                handleHide()
+              } else {
+                handleShow()
+              }
+            },
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => handleShow(),
-            onBlur: () => handleHide(),
+            onFocus: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onFocus?.(event)
+              handleShow()
+            },
+            onBlur: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onBlur?.(event)
+              handleHide()
+            },
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => handleShow(),
-            onMouseLeave: () => handleHide(),
+            onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseEnter?.(event)
+              handleShow()
+            },
+            onMouseLeave: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseLeave?.(event)
+              handleHide()
+            },
           }),
         })}
         <CConditionalPortal container={container} portal={true}>

package/src/helpers/polymorphicComponent.ts

@@ -8,7 +8,7 @@ export interface AsProp<As extends ElementType = ElementType> {
   as?: As
 }
 
-export interface Props<As extends ElementType = ElementType> extends AsProp<As> {}
+export type Props<As extends ElementType = ElementType> = AsProp<As>
 
 export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
   <As extends ElementType = TInitial>(

package/src/hooks/useColorModes.ts

@@ -37,10 +37,10 @@ const setTheme = (colorMode: string) => {
 }
 
 export const useColorModes = (
-  localStorageItemName = 'coreui-react-color-scheme',
+  localStorageItemName = 'coreui-react-color-scheme'
 ): UseColorModesOutput => {
   const [colorMode, setColorMode] = useState<string | undefined>(
-    getPreferredColorScheme(localStorageItemName),
+    getPreferredColorScheme(localStorageItemName)
   )
 
   useEffect(() => {
@@ -51,13 +51,17 @@ export const useColorModes = (
   }, [colorMode])
 
   useEffect(() => {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
       const storedTheme = getStoredTheme(localStorageItemName)
       if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
         setTheme(colorMode)
       }
-    })
-  })
+    }
+
+    mql.addEventListener('change', handleChange)
+    return () => mql.removeEventListener('change', handleChange)
+  }, [colorMode, localStorageItemName])
 
   return {
     colorMode,

package/src/hooks/useDebouncedCallback.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 export const useDebouncedCallback = <A extends unknown[]>(
   callback: (...args: A) => void,
@@ -6,6 +6,8 @@ export const useDebouncedCallback = <A extends unknown[]>(
 ) => {
   const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
+  useEffect(() => () => clearTimeout(timeout.current), [])
+
   return useCallback(
     (...args: A) => {
       const handler = () => {

package/src/hooks/useDropdownWithPopper.ts

@@ -5,7 +5,7 @@ import { usePopper } from './usePopper'
 import { isRTL } from '../utils'
 
 export const useDropdownWithPopper = <T extends HTMLElement = never>(
-  popperConfig?: Partial<Options>,
+  popperConfig?: Partial<Options>
 ) => {
   const dropdownRefElement = useRef<T>(null)
   const dropdownMenuElement = useRef<HTMLDivElement | null>(null)