@coreui/react-pro 5.13.0 → 5.14.0

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/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>)

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

@@ -1,7 +1,8 @@
 import React from 'react' //  useState,
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToaster, CToastBody, CToastHeader, CButton } from '../../../index'
+import { CButton } from '../../button'
+import { CToast, CToaster, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToaster component', async () => {
   const { container } = render(<CToaster>Test</CToaster>)

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

@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { act } from 'react-dom/test-utils'
-import { fireEvent, render } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTooltip, CLink } from '../../../index'
+import { CLink } from '../../link'
+import { CTooltip } from '../index'
+import { CButton } from '../../button'
 
 let container: HTMLDivElement | null
 
@@ -20,44 +21,64 @@ test('loads and displays CTooltip component', async () => {
   const { container } = render(
     <CTooltip content="content">
       <CLink>Test</CLink>
-    </CTooltip>,
+    </CTooltip>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CTooltip customize', async () => {
-  const { container } = render(
+  jest.useFakeTimers()
+
+  render(
     <CTooltip trigger="hover" placement="right" content="content">
-      <CLink className="link">Test</CLink>
-    </CTooltip>,
+      <CLink href="#">Test</CLink>
+    </CTooltip>
   )
-  const link = document.querySelector('.link')
+
+  const link = screen.getByText('Test')
+
   act(() => {
-    if (link !== null) {
-      fireEvent.mouseOver(link)
-    }
+    fireEvent.mouseOver(link)
+    jest.runAllTimers()
   })
-  expect(container).toMatchSnapshot()
+
+  expect(document.querySelector('.tooltip')).toBeInTheDocument()
+
+  jest.useRealTimers()
 })
 
-// test('CTooltip on toggle', async () => {
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CTooltip
-//       trigger="click"
-//       placement="right-end"
-//       content="content"
-//       visible={true}
-//       onToggle={onToggle}
-//     >
-//       <CButton>Test</CButton>
-//     </CTooltip>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   const btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-// })
+test('CTooltip onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  render(
+    <CTooltip trigger="click" placement="right" content="content" onShow={onShow} onHide={onHide}>
+      <CButton>Test</CButton>
+    </CTooltip>
+  )
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})

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

@@ -1,15 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CTooltip customize 1`] = `
-<div>
-  <a
-    class="link"
-  >
-    Test
-  </a>
-</div>
-`;
-
 exports[`loads and displays CTooltip component 1`] = `
 <div>
   <a