@coreui/react-pro 5.12.0 → 5.14.0

package/src/components/tabs/CTabPanel.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { TabsContext } from './CTabs'
+import { CTabsContext } from './CTabsContext'
 import { useForkedRef } from '../../hooks'
 import { getTransitionDurationFromElement } from '../../utils'
 
@@ -36,9 +36,9 @@ export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
   ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const { _activeItemKey, id } = useContext(TabsContext)
+    const { _activeItemKey, id } = useContext(CTabsContext)
 
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)

package/src/components/tabs/CTabs.tsx

@@ -1,53 +1,86 @@
-import React, { createContext, forwardRef, HTMLAttributes, useEffect, useId, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useId, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CTabsContext } from './CTabsContext'
+
 export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
-   * The active item key.
+   * Controls the currently active tab.
+   *
+   * When provided, the component operates in a controlled mode.
+   * You must handle tab switching manually by updating this prop.
+   *
+   * @example
+   * const [activeTab, setActiveTab] = useState(0);
+   * <CTabs activeItemKey={activeTab} onChange={setActiveTab} />
    */
-  activeItemKey: number | string
+  activeItemKey?: number | string
+
   /**
    * A string of all className you want applied to the base component.
    */
   className?: string
+
   /**
-   * The callback is fired when the active tab changes.
+   * Sets the initially active tab when the component mounts.
+   *
+   * After initialization, the component manages active tab changes internally.
+   *
+   * Use `defaultActiveItemKey` for uncontrolled usage.
+   *
+   * @example
+   * <CTabs defaultActiveItemKey={1} />
    */
-  onChange?: (value: number | string) => void
-}
+  defaultActiveItemKey?: number | string
 
-export interface TabsContextProps {
-  _activeItemKey?: number | string
-  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-  id?: string
+  /**
+   * Callback fired when the active tab changes.
+   *
+   * - In controlled mode (`activeItemKey` provided), you must update `activeItemKey` yourself based on the value received.
+   * - In uncontrolled mode, this callback is called after internal state updates.
+   *
+   * @param value - The newly selected tab key.
+   *
+   * @example
+   * <CTabs onChange={(key) => console.log('Tab changed to', key)} />
+   */
+  onChange?: (value: number | string) => void
 }
 
-export const TabsContext = createContext({} as TabsContextProps)
-
 export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
-  ({ children, activeItemKey, className, onChange }, ref) => {
+  ({ children, activeItemKey, className, defaultActiveItemKey, onChange }, ref) => {
     const id = useId()
-    const [_activeItemKey, setActiveItemKey] = useState(activeItemKey)
+    const isControlled = activeItemKey !== undefined
+    const [internalActiveItemKey, setInternalActiveItemKey] = useState<number | string | undefined>(
+      () => (isControlled ? undefined : defaultActiveItemKey)
+    )
+
+    const currentActiveItemKey = isControlled ? activeItemKey : internalActiveItemKey
+
+    const setActiveItemKey = (value: number | string) => {
+      if (!isControlled) {
+        setInternalActiveItemKey(value)
+      }
 
-    useEffect(() => {
-      _activeItemKey && onChange && onChange(_activeItemKey)
-    }, [_activeItemKey])
+      onChange?.(value)
+    }
 
     return (
-      <TabsContext.Provider value={{ _activeItemKey, setActiveItemKey, id }}>
+      <CTabsContext.Provider value={{ _activeItemKey: currentActiveItemKey, setActiveItemKey, id }}>
         <div className={classNames('tabs', className)} ref={ref}>
           {children}
         </div>
-      </TabsContext.Provider>
+      </CTabsContext.Provider>
     )
-  },
+  }
 )
 
 CTabs.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
+  defaultActiveItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onChange: PropTypes.func,
 }
 

package/src/components/tabs/CTabsContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CTabsContextProps {
+  _activeItemKey?: number | string
+  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+  id?: string
+}
+
+export const CTabsContext = createContext({} as CTabsContextProps)

package/src/components/tabs/__tests__/CTabContent.spec.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTabContent } from '../../../index'
+import { CTabContent } from '../index'
 
 test('loads and displays CTabContent component', async () => {
-  const { container } = render(<CTabContent>Test</CTabContent>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabContent>Test</CTabContent>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabContent customize', async () => {
-  const { container } = render(<CTabContent className="bazinga">Test</CTabContent>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('tab-content')
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabContent className="bazinga">Test</CTabContent>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
+  expect(container!.firstChild).toHaveClass('bazinga')
+  expect(container!.firstChild).toHaveClass('tab-content')
 })

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -1,48 +1,67 @@
 import * as React from 'react'
-import { render, screen } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTabPane, CTabContent } from '../../../index'
+import { CTabPane, CTabContent } from '../index'
 
 test('loads and displays CTabPane component', async () => {
-  const { container } = render(<CTabPane>Test</CTabPane>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabPane>Test</CTabPane>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabPane customize', async () => {
-  const { container } = render(
-    <CTabPane className="bazinga" visible={true}>
-      Test
-    </CTabPane>,
-  )
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(
+      <CTabPane className="bazinga" visible={true}>
+        Test
+      </CTabPane>
+    )
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabContent use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(
     <CTabContent>
       <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={true}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
+    </CTabContent>
   )
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={true}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText('Test')).toHaveClass('active')
+    expect(screen.getByText('Test')).toHaveClass('show')
+  })
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={false}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
+
+  jest.useRealTimers()
 })

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

@@ -200,7 +200,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const formRef = useRef<HTMLFormElement>()
     const inputRef = useRef<HTMLInputElement>(null)
@@ -239,8 +239,9 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             })
           : ''
       }
-
-      date && setAmPm(getAmPm(new Date(date), locale))
+      if (date) {
+        setAmPm(getAmPm(new Date(date), locale))
+      }
     }, [date])
 
     useEffect(() => {
@@ -262,7 +263,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
       setDate(null)
-      onTimeChange && onTimeChange(null)
+      onTimeChange?.(null)
     }
 
     const handleFormValidation = (form: HTMLFormElement) => {
@@ -279,7 +280,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
     const handleOnChange = useDebouncedCallback(
       (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
-      inputOnChangeDelay,
+      inputOnChangeDelay
     )
 
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
@@ -311,7 +312,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       setDate(new Date(_date))
-      onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+      onTimeChange?.(_date.toTimeString(), _date.toLocaleTimeString(), _date)
     }
 
     const InputGroup = () => (
@@ -456,7 +457,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               'is-invalid': isValid === false ? true : false,
               'is-valid': isValid,
             },
-            className,
+            className
           )}
           container={container}
           disabled={disabled}
@@ -470,7 +471,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   size={cancelButtonSize}
                   variant={cancelButtonVariant}
                   onClick={() => {
-                    initialDate && setDate(new Date(initialDate))
+                    if (initialDate) {
+                      setDate(new Date(initialDate))
+                    }
+
                     setVisible(false)
                   }}
                 >
@@ -493,12 +497,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           }
           onHide={() => {
             setVisible(false)
-            onHide && onHide()
+            onHide?.()
           }}
           onShow={() => {
-            date && setInitialDate(new Date(date))
+            if (date) {
+              setInitialDate(new Date(date))
+            }
+
             setVisible(true)
-            onShow && onShow()
+            onShow?.()
           }}
           portal={portal}
           toggler={InputGroup()}
@@ -550,7 +557,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         </CPicker>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CTimePicker.propTypes = {

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

@@ -65,12 +65,12 @@ export const getAmPm = (date: Date, locale: string): AmPm => {
 export const formatTimePartials = (
   values: number[],
   locale: string,
-  partial: 'hour' | 'minute' | 'second',
+  partial: 'hour' | 'minute' | 'second'
 ): FormattedPartial[] => {
   const date = new Date()
-
+  const forceTwoDigit = shouldUseTwoDigitHour(locale)
   const formatter = new Intl.DateTimeFormat(locale, {
-    hour: 'numeric',
+    hour: forceTwoDigit ? '2-digit' : 'numeric',
     minute: '2-digit',
     second: '2-digit',
   })
@@ -109,32 +109,32 @@ export const getLocalizedTimePartials = (
   ampm: 'auto' | boolean = 'auto',
   hours: boolean | number[] | ((hour: number) => number[]) = [],
   minutes: boolean | number[] | ((minute: number) => number[]) = [],
-  seconds: boolean | number[] | ((second: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = []
 ): LocalizedTimePartials => {
   const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true
 
   const listOfHours =
     Array.isArray(hours) && hours.length > 0
       ? hours
-      : (typeof hours === 'function'
+      : typeof hours === 'function'
         ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) =>
-            hours(hour),
+            hours(hour)
           )
-        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)))
+        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i))
 
   const listOfMinutes =
     Array.isArray(minutes) && minutes.length > 0
       ? minutes
-      : (typeof minutes === 'function'
+      : typeof minutes === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   const listOfSeconds =
     Array.isArray(seconds) && seconds.length > 0
       ? seconds
-      : (typeof seconds === 'function'
+      : typeof seconds === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   return {
     listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
@@ -154,12 +154,12 @@ export const getLocalizedTimePartials = (
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
-  ampm: 'auto' | boolean = 'auto',
+  ampm: 'auto' | boolean = 'auto'
 ): number | string =>
   date
-    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
-      : date.getHours())
+      : date.getHours()
     : ''
 
 /**
@@ -195,3 +195,19 @@ export const isValidTime = (time: string): boolean => {
   const d = new Date(`1970-01-01T${time}`)
   return d instanceof Date && !Number.isNaN(d.getTime())
 }
+
+/**
+ * Checks whether the given locale formats the hour "9" with a leading zero ("09")
+ * when using `hour: 'numeric'` in `toLocaleTimeString`.
+ *
+ * This helps determine if you should force `hour: '2-digit'` for consistent formatting.
+ *
+ * @param {string} locale - The locale code (e.g., "en-US", "pl-PL").
+ * @returns {boolean} `true` if the formatted hour starts with a leading zero, otherwise `false`.
+ */
+export const shouldUseTwoDigitHour = (locale: string): boolean => {
+  const d = new Date(2020, 0, 1, 7, 5, 7) // 7:05:07
+  const formatted = d.toLocaleTimeString(locale)
+
+  return formatted.startsWith('0') // check if the hour starts with "0"
+}

package/src/components/toast/CToast.tsx

@@ -1,15 +1,10 @@
-import React, {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { CToastContext } from './CToastContext'
+
 import { useForkedRef } from '../../hooks'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
@@ -59,13 +54,6 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   visible?: boolean
 }
 
-interface ContextProps extends CToastProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CToastContext = createContext({} as ContextProps)
-
 export const CToast = forwardRef<HTMLDivElement, CToastProps>(
   (
     {
@@ -82,12 +70,12 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       onShow,
       ...rest
     },
-    ref,
+    ref
   ) => {
-    const toastRef = useRef()
+    const toastRef = useRef(null)
     const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
-    const timeout = useRef<number>()
+    const timeout = useRef<number>(undefined)
 
     useEffect(() => {
       setVisible(visible)
@@ -135,7 +123,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                   'show showing': state === 'entering' || state === 'exiting',
                   show: state === 'entered',
                 },
-                className,
+                className
               )}
               aria-live="assertive"
               aria-atomic="true"
@@ -152,7 +140,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CToast.propTypes = {
@@ -163,10 +151,7 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  innerKey: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
+  innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

package/src/components/toast/CToastClose.tsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import { CButtonProps } from '../button/CButton'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
-
-import { CToastContext } from './CToast'
+import { CToastContext } from './CToastContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 

package/src/components/toast/CToastContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CToastContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CToastContext = createContext({} as CToastContextProps)

package/src/components/toast/CToaster.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CConditionalPortal } from '../conditional-portal'
 
+import type { CToastProps } from './CToast'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -27,20 +29,22 @@ export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Adds new `CToast` to `CToaster`.
    */
-  push?: ReactElement
+  push?: ReactElement<CToastProps>
 }
 
 export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
   ({ children, className, placement, push, ...rest }, ref) => {
-    const [toasts, setToasts] = useState<ReactElement[]>([])
+    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
     const index = useRef<number>(0)
 
     useEffect(() => {
       index.current++
-      push && addToast(push)
+      if (push) {
+        addToast(push)
+      }
     }, [push])
 
-    const addToast = (push: ReactElement) => {
+    const addToast = (push: ReactElement<CToastProps>) => {
       setToasts((state) => [
         ...state,
         React.cloneElement(push, {
@@ -67,18 +71,18 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
                 'start-50 translate-middle-x': placement && placement.includes('center'),
                 'end-0': placement && placement.includes('end'),
               },
-              className,
+              className
             )}
             {...rest}
             ref={ref}
           >
             {children}
-            {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+            {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
           </div>
         ) : null}
       </CConditionalPortal>
     )
-  },
+  }
 )
 
 CToaster.propTypes = {