@coreui/react 5.5.0 → 5.6.0

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableDataCell, CTableRow } from '../../../index'
+import { CTableBody, CTableDataCell, CTableRow } from '../index'
 
 test('loads and displays CTableBody component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableCaption.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableCaption } from '../../../index'
+import { CTableCaption } from '../index'
 
 test('loads and displays CTableCaption component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableDataCell } from '../../../index'
+import { CTableDataCell } from '../index'
 import { CTableBody } from '../CTableBody'
 import { CTableRow } from '../CTableRow'
 

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableFoot, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableFoot component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableHead.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHead component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableHeaderCell.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHeaderCell component', async () => {
   const table = document.createElement('table')

package/src/components/table/__tests__/CTableRow.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableBody, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableRow component', async () => {
   const table = document.createElement('table')

package/src/components/tabs/CTab.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { TabsContext } from './CTabs'
+import { CTabsContext } from './CTabsContext'
 
 export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
   /**
@@ -21,7 +21,7 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
+    const { _activeItemKey, setActiveItemKey, id } = useContext(CTabsContext)
 
     const isActive = () => itemKey === _activeItemKey
 

package/src/components/tabs/CTabPane.tsx

@@ -32,7 +32,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     return (

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,25 @@
 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,68 @@
 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/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 = {

package/src/components/toast/__tests__/CToast.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor } from '@testing-library/react'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToastBody, CToastHeader } from '../../../index'
+import { CToast, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToast component', async () => {
   const { container } = render(<CToast>Test</CToast>)
@@ -10,16 +10,9 @@ test('loads and displays CToast component', async () => {
 
 test('CToast customize', async () => {
   const { container } = render(
-    <CToast
-      className="bazinga"
-      autohide={false}
-      color="warning"
-      delay={100}
-      visible={true}
-      //onClose
-    >
+    <CToast className="bazinga" autohide={false} color="warning" delay={100} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
   await waitFor(() => {
     expect(container).toMatchSnapshot()
@@ -32,7 +25,8 @@ test('CToast customize', async () => {
 })
 
 test('CToast click on dismiss button', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onClose = jest.fn()
   const { container } = render(
     <CToast
@@ -59,41 +53,52 @@ test('CToast click on dismiss button', async () => {
         <small>7 min ago</small>
       </CToastHeader>
       <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>,
+    </CToast>
   )
+
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
   expect(onClose).toHaveBeenCalledTimes(0)
+
   const btn = document.querySelector('.btn-close')
+
   if (btn !== null) {
-    fireEvent.click(btn)
+    act(() => {
+      fireEvent.click(btn)
+      jest.runAllTimers()
+    })
   }
-  jest.runAllTimers()
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(onClose).toHaveBeenCalledTimes(1)
-  expect(container.firstChild).toBeNull()
+
+  await waitFor(() => {
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(container.firstChild).toBeNull()
+  })
+
   jest.useRealTimers()
 })
 
 test('CToast test autohide', async () => {
+  jest.useFakeTimers()
+
   const { container } = render(
     <CToast autohide={true} delay={1000} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
 
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
-  await waitFor(
-    () => {
-      expect(container.firstChild).toBeNull()
-    },
-    {
-      timeout: 5000,
-    },
-  )
+  act(() => {
+    jest.advanceTimersByTime(1000)
+  })
+
+  await waitFor(() => {
+    expect(container.firstChild).toBeNull()
+  })
+
+  jest.useRealTimers()
 })

package/src/components/toast/__tests__/CToastBody.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToastBody } from '../../../index'
+import { CToastBody } from '../index'
 
 test('loads and displays CToastBody component', async () => {
   const { container } = render(<CToastBody>Test</CToastBody>)

package/src/components/toast/__tests__/CToastHeader.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToastHeader } from '../../../index'
+import { CToastHeader } from '../index'
 
 test('loads and displays CToastHeader component', async () => {
   const { container } = render(<CToastHeader>Test</CToastHeader>)