@coreui/react-pro 5.9.2 → 5.11.0

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

@@ -89,8 +89,8 @@ export interface CDateRangePickerProps
    * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
    *
    * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:
-   * - \{id\}-start-date
-   * - \{id\}-end-date
+   * - `{id}-start-date`
+   * - `{id}-end-date`
    */
   id?: string | [string, string]
   /**
@@ -304,12 +304,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
 
     useEffect(() => {
       setStartDate(startDate ? startDate : null)
-      setCalendarDate(startDate ? startDate : null)
     }, [startDate])
 
     useEffect(() => {
       setEndDate(endDate ? endDate : null)
-      range && setCalendarDate(endDate ? endDate : null)
     }, [endDate])
 
     useEffect(() => {

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

@@ -1,3 +1,11 @@
+/**
+ * Generates input IDs or names based on the provided attributes, range, and position.
+ *
+ * @param attribute - A single string or a tuple of two strings representing the attribute names.
+ * @param range - A boolean indicating whether the input is part of a range.
+ * @param position - Optional. Specifies the position ('start' or 'end') when `range` is true.
+ * @returns A string representing the input ID or name.
+ */
 export const getInputIdOrName = (
   attribute: string | [string, string],
   range: boolean,
@@ -14,7 +22,19 @@ export const getInputIdOrName = (
   return attribute
 }
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+/**
+ * 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 => {
   if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string))
   }
@@ -48,9 +68,9 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
           Number(partials.groups['month']) - 1,
           Number(partials.groups['day']),
           partials.groups['ampm']
-            ? (partials.groups['ampm'] === 'PM'
+            ? partials.groups['ampm'] === 'PM'
               ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour']))
+              : Number(partials.groups['hour'])
             : Number(partials.groups['hour']),
           Number(partials.groups['minute']),
           Number(partials.groups['second']),

package/src/components/dropdown/CDropdownToggle.tsx

@@ -90,7 +90,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
 
     if (variant === 'nav-item' && navLink) {
       return (
-        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
+        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
           {children}
         </a>
       )

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CDropdown,
@@ -52,26 +52,50 @@ test('CDropdown customize', async () => {
 //   jest.useRealTimers()
 // })
 
-test('CDropdown click', async () => {
+test('CDropdown opens on toggle click and closes on clicking outside', async () => {
   render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownItem>A</CDropdownItem>
-        <CDropdownItem>B</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>,
+    <div>
+      {/* External element to simulate clicking outside the dropdown */}
+      <div data-testid="external-area">External Area</div>
+
+      {/* The dropdown component */}
+      <CDropdown>
+        <CDropdownToggle>Test</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem>A</CDropdownItem>
+          <CDropdownItem>B</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </div>,
   )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  const el = screen.getByText('Test')
-  if (el !== null) {
-    fireEvent.click(el) //click on element
-  }
-  jest.runAllTimers()
-  expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.mouseUp(document.body) //click outside
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
+
+  // Ensure the dropdown is initially closed
+  const toggleButton = screen.getByText('Test')
+  expect(toggleButton).toBeInTheDocument()
+
+  // Assuming the 'show' class is applied to the CDropdownMenu
+  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+  expect(dropdownMenu).not.toHaveClass('show')
+
+  // Click on the toggle to open the dropdown
+  fireEvent.click(toggleButton)
+
+  // Wait for the dropdown menu to become visible
+  await waitFor(() => {
+    const openedMenu = screen.getByRole('menu') // Adjust role if different
+    expect(openedMenu).toBeVisible()
+    expect(openedMenu).toHaveClass('show')
+  })
+
+  // Click outside the dropdown to close it
+  const externalArea = screen.getByTestId('external-area')
+  fireEvent.mouseUp(externalArea)
+
+  // Wait for the dropdown menu to be hidden
+  await waitFor(() => {
+    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+    expect(closedMenu).not.toHaveClass('show')
+  })
 })
 
 test('CDropdown example', async () => {

package/src/components/modal/CModal.tsx

@@ -163,8 +163,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
 
       setVisible(false)
-
-      return onClose && onClose()
     }
 
     useLayoutEffect(() => {

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
@@ -33,34 +33,42 @@ test('CModal dialog close on press ESC', async () => {
     </CModal>,
   )
   expect(onClose).toHaveBeenCalledTimes(0)
-  const modal = document.querySelector('.modal')
+
+  const modal = screen.getByText('Test').closest('.modal')
+  expect(modal).toBeInTheDocument()
+
   if (modal !== null) {
     fireEvent.keyDown(modal, {
       key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
     })
-  }
-  await new Promise((r) => setTimeout(r, 1000))
-  console.log(modal)
-  expect(onClose).toHaveBeenCalledTimes(1)
-})
 
-test('CModal dialog close on backdrop', async () => {
-  jest.useFakeTimers()
-  const onClose = jest.fn()
-  render(
-    <CModal onClose={onClose} portal={false} visible={true}>
-      Test
-    </CModal>,
-  )
-  expect(onClose).toHaveBeenCalledTimes(0)
-  const backdrop = document.querySelector('.modal-backdrop')
-  if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
   }
-  jest.runAllTimers()
-  expect(onClose).toHaveBeenCalledTimes(1)
-  jest.useRealTimers()
 })
+
+// test('CModal dialog closes when clicking outside the modal', async () => {
+//   const onClose = jest.fn()
+
+//   render(
+//     <CModal onClose={onClose} portal={false} visible>
+//       Test
+//     </CModal>,
+//   )
+
+//   // Ensure onClose hasn't been called yet
+//   expect(onClose).not.toHaveBeenCalled()
+
+//   // Optionally, verify that the modal is in the document
+//   const modal = screen.getByText('Test').closest('.modal')
+//   expect(modal).toBeInTheDocument()
+
+//   // Simulate a click on the external area (outside the modal)
+//   fireEvent.mouseDown(document.body)
+
+//   // Wait for onClose to be called once
+//   await waitFor(() => {
+//     expect(onClose).toHaveBeenCalledTimes(1)
+//   })
+// })

package/src/components/nav/CNavGroup.tsx

@@ -124,7 +124,11 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
       ref={ref}
     >
       {toggler && (
-        <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
+        <a
+          className="nav-link nav-group-toggle"
+          href="#"
+          onClick={(event) => handleTogglerOnCLick(event)}
+        >
           {toggler}
         </a>
       )}

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap

@@ -7,12 +7,13 @@ exports[`CNavGroup customize 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
-      style="display: block; height: 0px;"
+      style="height: 0px; display: block;"
     />
   </li>
 </div>
@@ -25,11 +26,13 @@ exports[`loads and displays CNavGroup component 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
+      style="height: 0px;"
     />
   </li>
 </div>

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -31,7 +31,7 @@ test('CPopover customize', async () => {
   expect(container).toMatchSnapshot()
   let arrLength = container.getElementsByClassName('popover').length
   expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-end').length
+  arrLength = container.getElementsByClassName('bs-popover-auto').length
   expect(arrLength).toBe(1)
   arrLength = container.getElementsByClassName('popover-arrow').length
   expect(arrLength).toBe(1)

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,15 +3,14 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
-    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
   <div
-    class="popover bs-popover-auto fade show"
-    id="popover744956"
+    class="popover bs-popover-auto fade"
+    id="popover:r1:"
     role="tooltip"
     style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >

package/src/components/progress/CProgress.tsx

@@ -17,7 +17,7 @@ export interface CProgressProps
    */
   height?: number
   /**
-   * A string of all className you want applied to the <CProgressBar/> component.
+   * A string of all className you want applied to the `<CProgressBar/>` component.
    *
    * @since 4.9.0
    */

package/src/components/range-slider/CRangeSlider.tsx

@@ -207,7 +207,12 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
     }
 
     const handleInputsContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-      if (trackRef.current === null || event.button !== 0) {
+      if (trackRef.current === null || event.button !== 0 || disabled) {
+        return
+      }
+
+      const target = event.target as HTMLDivElement | HTMLInputElement
+      if (!(target instanceof HTMLInputElement) && target !== trackRef.current) {
         return
       }
 
@@ -237,7 +242,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
     }
 
     const handleMouseMove = (event: MouseEvent) => {
-      if (!isDragging || trackRef.current === null) {
+      if (!isDragging || trackRef.current === null || disabled) {
         return
       }
 

package/src/components/sidebar/CSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
+export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
+  HTMLDivElement,
+  CSidebarProps
+>(
   (
     {
       children,
+      as: Component = 'div',
       className,
       colorScheme,
       narrow,
@@ -183,7 +192,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     return (
       <>
-        <div
+        <Component
           className={classNames(
             'sidebar',
             {
@@ -203,7 +212,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
           ref={forkedRef}
         >
           {children}
-        </div>
+        </Component>
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
@@ -216,6 +225,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 )
 
 CSidebar.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   colorScheme: PropTypes.oneOf(['dark', 'light']),
@@ -231,4 +241,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'

package/src/components/smart-pagination/CSmartPagination.tsx

@@ -26,27 +26,19 @@ export interface CSmartPaginationProps extends HTMLAttributes<HTMLUListElement>
    */
   doubleArrows?: boolean
   /**
-   * The content of 'firstButton' button.
-   *
-   * @default '<React.Fragment>&laquo;</React.Fragment>''
+   * The content of `firstButton` button.
    */
   firstButton?: ReactNode | string
   /**
-   * The content of 'previousButton' button.
-   *
-   * @default '<React.Fragment>&lsaquo;</React.Fragment>'
+   * The content of `previousButton` button.
    */
   previousButton?: ReactNode | string
   /**
-   * The content of 'nextButton' button.
-   *
-   * @default '<React.Fragment>&rsaquo;</React.Fragment>''
+   * The content of `nextButton` button.
    */
   nextButton?: ReactNode | string
   /**
-   * The content of 'lastButton' button.
-   *
-   * @default '<React.Fragment>&raquo;</React.Fragment>'
+   * The content of `lastButton` button.
    */
   lastButton?: ReactNode | string
   /**

package/src/components/smart-table/CSmartTableHead.tsx

@@ -1,12 +1,4 @@
-import React, {
-  ElementType,
-  forwardRef,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { ElementType, forwardRef, ReactNode, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { CFormCheck, CFormInput } from '../form'
@@ -76,27 +68,9 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
       ref,
     ) => {
       const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
-      const [refresh, setRefresh] = useState(false)
-
       const _columns = useMemo(() => getColumns(columns), [columns])
       const groups = useMemo(() => getColumnGroups(columns), [columns])
 
-      useEffect(() => {
-        if (columnFilterState && Object.keys(columnFilterState).length === 0) {
-          setRefresh(true)
-        }
-      }, [columnFilterState])
-
-      useEffect(() => {
-        setRefresh(true)
-      }, [items])
-
-      useEffect(() => {
-        if (setRefresh) {
-          setRefresh(false)
-        }
-      }, [refresh])
-
       const columnSorterIcon = (column: Column | string) => {
         if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
           return <span className="opacity-25 float-end me-1">{sortingIcon}</span>
@@ -161,18 +135,18 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                   {...(isSortable && {
                     onClick: () => handleSort && handleSort(getColumnKey(column), index),
                     onKeyDown: (event) => {
-                      if (event.key === 'Enter') {
-                        handleSort && handleSort(getColumnKey(column), index)
+                      if (event.key === 'Enter' && handleSort) {
+                        handleSort(getColumnKey(column), index)
                       }
 
-                      if (event.key === 'ArrowUp') {
+                      if (event.key === 'ArrowUp' && handleSort) {
                         event.preventDefault()
-                        handleSort && handleSort(getColumnKey(column), index, 'asc')
+                        handleSort(getColumnKey(column), index, 'asc')
                       }
 
-                      if (event.key === 'ArrowDown') {
+                      if (event.key === 'ArrowDown' && handleSort) {
                         event.preventDefault()
-                        handleSort && handleSort(getColumnKey(column), index, 'desc')
+                        handleSort(getColumnKey(column), index, 'desc')
                       }
                     },
                     tabIndex: 0,
@@ -198,7 +172,6 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                         : true
                     ) ? (
                       typeof column !== 'string' && typeof column.filter === 'function' ? (
-                        !refresh &&
                         column.filter(
                           getColumnValues(items, getColumnKey(column)),
                           (value: any) =>

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

@@ -19,7 +19,7 @@ import {
 } from './utils'
 
 import { Colors } from '../../types'
-import type { LocalizedTimePartials } from './types'
+import type { AmPm, LocalizedTimePartials } from './types'
 import { useDebouncedCallback } from '../../hooks'
 
 export interface CTimePickerProps
@@ -139,7 +139,7 @@ export interface CTimePickerProps
    *
    * @since 4.8.0
    */
-  seconds?: boolean | number[] | ((second: number) => number[])
+  seconds?: boolean | number[] | ((second: number) => boolean)
   /**
    * Size the component small or large.
    */
@@ -208,7 +208,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
     const [initialDate, setInitialDate] = useState<Date | null>(null)
     const [isValid, setIsValid] = useState(valid ?? (invalid === true ? false : undefined))
-    const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
+    const [_ampm, setAmPm] = useState<AmPm>(date ? getAmPm(new Date(date), locale) : 'am')
     const [_visible, setVisible] = useState(visible)
 
     const [localizedTimePartials, setLocalizedTimePartials] = useState<LocalizedTimePartials>({

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

@@ -1,3 +1,10 @@
+export type AmPm = 'am' | 'pm'
+
+export type FormattedPartial = {
+  value: number
+  label: string
+}
+
 export type LocalizedTimePartials = {
   listOfHours: {
     value: number

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

@@ -1,4 +1,4 @@
-import type { LocalizedTimePartials } from './types'
+import type { AmPm, FormattedPartial, LocalizedTimePartials } from './types'
 
 /**
  * Converts a 12-hour time format to a 24-hour time format.
@@ -6,7 +6,7 @@ import type { LocalizedTimePartials } from './types'
  * @param {number} hour The hour to be converted.
  * @returns {number} The hour in 24-hour format.
  */
-export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
+export const convert12hTo24h = (abbr: AmPm, hour: number): number => {
   if (abbr === 'am' && hour === 12) {
     return 0
   }
@@ -27,14 +27,14 @@ export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
  * @param {number} hour The hour to be converted.
  * @returns {number} The hour in 12-hour format.
  */
-export const convert24hTo12h = (hour: number) => hour % 12 || 12
+export const convert24hTo12h = (hour: number): 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) =>
+export const convertTimeToDate = (time: Date | string | null | undefined): Date | null =>
   time ? (time instanceof Date ? time : new Date(`1970-01-01 ${time}`)) : null
 
 /**
@@ -43,7 +43,7 @@ export const convertTimeToDate = (time: Date | string | null | undefined) =>
  * @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) => {
+export const getAmPm = (date: Date, locale: string): AmPm => {
   if (date.toLocaleTimeString(locale).includes('AM')) {
     return 'am'
   }
@@ -66,7 +66,7 @@ export const formatTimePartials = (
   values: number[],
   locale: string,
   partial: 'hour' | 'minute' | 'second',
-) => {
+): FormattedPartial[] => {
   const date = new Date()
 
   const formatter = new Intl.DateTimeFormat(locale, {
@@ -155,7 +155,7 @@ export const getSelectedHour = (
   date: Date | null,
   locale: string,
   ampm: 'auto' | boolean = 'auto',
-) =>
+): number | string =>
   date
     ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
@@ -167,21 +167,23 @@ export const getSelectedHour = (
  * @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() : '')
+export const getSelectedMinutes = (date: Date | null): number | string =>
+  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() : '')
+export const getSelectedSeconds = (date: Date | null): number | string =>
+  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) =>
+export const isAmPm = (locale: string): boolean =>
   ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
 
 /**
@@ -189,7 +191,7 @@ export const isAmPm = (locale: string) =>
  * @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()
+export const isValidTime = (time: string): boolean => {
+  const d = new Date(`1970-01-01T${time}`)
+  return d instanceof Date && !Number.isNaN(d.getTime())
 }

package/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
-    aria-describedby="tooltip97108"
     class="link"
   >
     Test