@coreui/react 4.0.0-rc.1

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabContent customize 1`] = `
+<div>
+  <div
+    class="tab-content bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CTabContent component 1`] = `
+<div>
+  <div
+    class="tab-content"
+  >
+    Test
+  </div>
+</div>
+`;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabPane customize 1`] = `
+<div>
+  <div
+    class="tab-pane fade bazinga show active"
+    style="transition: opacity 150ms linear;"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CTabPane component 1`] = `
+<div>
+  <div
+    class="tab-pane fade"
+    style="transition: opacity 150ms linear;"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/toast/CToast.tsx

@@ -0,0 +1,177 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { CSSTransition } from 'react-transition-group'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Apply a CSS fade transition to the toast. [docs]
+   *
+   * @default true
+   */
+  animation?: boolean
+  /**
+   * Auto hide the toast. [docs]
+   *
+   * @default true
+   */
+  autohide?: boolean
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Delay hiding the toast (ms). [docs]
+   */
+  delay?: number
+  /**
+   * @ignore
+   */
+  index?: number
+  /**
+   * @ignore
+   */
+  key?: number
+  /**
+   * Toggle the visibility of component. [docs]
+   */
+  visible?: boolean
+  /**
+   * Method called before the dissmiss animation has started. [docs]
+   */
+  onDismiss?: (index: number | null) => void
+}
+
+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>(
+  (
+    {
+      children,
+      animation = true,
+      autohide = true,
+      className,
+      color,
+      delay = 5000,
+      index,
+      key,
+      visible = false,
+      onDismiss,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(false)
+    const timeout = useRef<number>()
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const contextValues = {
+      visible: _visible,
+      setVisible,
+    }
+
+    // triggered on mount and destroy
+    useEffect(() => () => clearTimeout(timeout.current), [])
+
+    useEffect(() => {
+      _autohide()
+    }, [_visible])
+
+    const _autohide = () => {
+      if (autohide) {
+        clearTimeout(timeout.current)
+        timeout.current = window.setTimeout(() => {
+          setVisible(false)
+        }, delay)
+      }
+    }
+
+    const _className = classNames(
+      'toast',
+      {
+        fade: animation,
+        [`bg-${color}`]: color,
+        'border-0': color,
+      },
+      className,
+    )
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'showing'
+        : state === 'entered'
+        ? 'show'
+        : state === 'exiting'
+        ? 'showing'
+        : 'fade'
+    }
+
+    return (
+      <CSSTransition
+        in={_visible}
+        timeout={250}
+        onExited={() => onDismiss && onDismiss(index ? index : null)}
+        unmountOnExit
+      >
+        {(state) => {
+          const transitionClass = getTransitionClass(state)
+          return (
+            <CToastContext.Provider value={contextValues}>
+              <div
+                className={classNames(_className, transitionClass)}
+                aria-live="assertive"
+                aria-atomic="true"
+                role="alert"
+                onMouseEnter={() => clearTimeout(timeout.current)}
+                onMouseLeave={() => _autohide}
+                {...rest}
+                key={key}
+                ref={ref}
+              >
+                {children}
+              </div>
+            </CToastContext.Provider>
+          )
+        }}
+      </CSSTransition>
+    )
+  },
+)
+
+CToast.propTypes = {
+  animation: PropTypes.bool,
+  autohide: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  delay: PropTypes.number,
+  index: PropTypes.number,
+  key: PropTypes.number,
+  onDismiss: PropTypes.func,
+  visible: PropTypes.bool,
+}
+
+CToast.displayName = 'CToast'

package/src/components/toast/CToastBody.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CToastBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CToastBody = forwardRef<HTMLDivElement, CToastBodyProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('toast-body', className)
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CToastBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CToastBody.displayName = 'CToastBody'

package/src/components/toast/CToastClose.tsx

@@ -0,0 +1,31 @@
+import React, { ElementType, forwardRef, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { CToastContext } from './CToast'
+import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
+
+export interface CToastCloseProps extends CCloseButtonProps {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   */
+  component?: string | ElementType
+}
+
+export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
+  ({ children, component: Component, ...rest }, ref) => {
+    const { setVisible } = useContext(CToastContext)
+    return Component ? (
+      <Component onClick={() => setVisible(false)} {...rest} ref={ref}>
+        {children}
+      </Component>
+    ) : (
+      <CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
+    )
+  },
+)
+
+CToastClose.propTypes = {
+  ...CCloseButton.propTypes,
+  component: PropTypes.elementType,
+}
+
+CToastClose.displayName = 'CToastClose'

package/src/components/toast/CToastHeader.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CToastClose } from './CToastClose'
+
+export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Automatically add a close button to the header.
+   */
+  close?: boolean
+}
+
+export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
+  ({ children, className, close, ...rest }, ref) => {
+    const _className = classNames('toast-header', className)
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+        {close && <CToastClose />}
+      </div>
+    )
+  },
+)
+
+CToastHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  close: PropTypes.bool,
+}
+
+CToastHeader.displayName = 'CToastHeader'

package/src/components/toast/CToaster.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'
+import PropTypes from 'prop-types'
+import { createPortal } from 'react-dom'
+import classNames from 'classnames'
+export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Describes the placement of your component. [docs]
+   *
+   * @type 'top-start' | 'top' | 'top-end' | 'middle-start' | 'middle' | 'middle-end' | 'bottom-start' | 'bottom' | 'bottom-end' | string
+   */
+  placement?:
+    | 'top-start'
+    | 'top-center'
+    | 'top-end'
+    | 'middle-start'
+    | 'middle-center'
+    | 'middle-end'
+    | 'bottom-start'
+    | 'bottom-center'
+    | 'bottom-end'
+    | string
+  /**
+   * Adds new `CToast` to `CToaster`. [docs]
+   */
+  push?: ReactElement
+}
+
+export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
+  ({ children, className, placement, push, ...rest }, ref) => {
+    const [toasts, setToasts] = useState<ReactElement[]>([])
+    const index = useRef<number>(0)
+
+    useEffect(() => {
+      index.current++
+      push && addToast(push)
+    }, [push])
+
+    const addToast = (push: ReactElement) => {
+      setToasts((state) => [
+        ...state,
+        React.cloneElement(push, {
+          index: index.current,
+          key: index.current,
+          onDismiss: (index: number) =>
+            setToasts((state) => state.filter((i) => i.props.index !== index)),
+        }),
+      ])
+    }
+
+    const _className = classNames(
+      'toaster toast-container p-3',
+      {
+        'position-fixed': placement,
+        'top-0': placement && placement.includes('top'),
+        'top-50 translate-middle-y': placement && placement.includes('middle'),
+        'bottom-0': placement && placement.includes('bottom'),
+        'start-0': placement && placement.includes('start'),
+        'start-50 translate-middle-x': placement && placement.includes('center'),
+        'end-0': placement && placement.includes('end'),
+      },
+      className,
+    )
+
+    const toaster = (ref?: React.Ref<HTMLDivElement>) => {
+      return toasts.length > 0 || children ? (
+        <div className={_className} {...rest} ref={ref}>
+          {children}
+          {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+        </div>
+      ) : null
+    }
+
+    return typeof window !== 'undefined' && placement
+      ? createPortal(toaster(ref), document.body)
+      : toaster(ref)
+  },
+)
+
+CToaster.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  placement: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([
+      'top-start',
+      'top-center',
+      'top-end',
+      'middle-start',
+      'middle-center',
+      'middle-end',
+      'bottom-start',
+      'bottom-center',
+      'bottom-end',
+    ]),
+  ]),
+  push: PropTypes.any,
+}
+
+CToaster.displayName = 'CToaster'

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

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CToast, CToastBody, CToastHeader } from '../../../index'
+
+test('loads and displays CToast component', async () => {
+  const { container } = render(<CToast>Test</CToast>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CToast customize', async () => {
+  const { container } = render(
+    <CToast
+      className="bazinga"
+      autohide={false}
+      color="warning"
+      delay={100}
+      key={1}
+      visible={true}
+      //onDismiss
+    >
+      Test
+    </CToast>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('toast')
+  expect(container.firstChild).toHaveClass('fade')
+  expect(container.firstChild).toHaveClass('bg-warning')
+  expect(container.firstChild).toHaveClass('show')
+})
+
+test('CToast click on dismiss button', async () => {
+  jest.useFakeTimers()
+  const onDismiss = jest.fn()
+  const { container } = render(
+    <CToast
+      className="bazinga"
+      autohide={false}
+      color="warning"
+      delay={100}
+      key={1}
+      visible={true}
+      onDismiss={onDismiss}
+    >
+      <CToastHeader close>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <strong className="me-auto">CoreUI for React.js</strong>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>,
+  )
+  expect(container.firstChild).toHaveClass('show')
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const btn = document.querySelector('.btn-close')
+  if (btn !== null) {
+    fireEvent.click(btn)
+  }
+  jest.runAllTimers()
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).toBeNull()
+  jest.useRealTimers()
+})
+
+test('CToast test autohide', async () => {
+  jest.useFakeTimers()
+  const { container } = render(
+    <CToast autohide={true} delay={100} visible={true}>
+      Test
+    </CToast>,
+  )
+  expect(container.firstChild).toHaveClass('show')
+  jest.runAllTimers()
+  expect(container.firstChild).toBeNull()
+  jest.useRealTimers()
+})

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CToastBody } from '../../../index'
+
+test('loads and displays CToastBody component', async () => {
+  const { container } = render(<CToastBody>Test</CToastBody>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CToastBody customize', async () => {
+  const { container } = render(<CToastBody className="bazinga">Test</CToastBody>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('toast-body')
+})

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CToastHeader } from '../../../index'
+
+test('loads and displays CToastHeader component', async () => {
+  const { container } = render(<CToastHeader>Test</CToastHeader>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CToastHeader customize', async () => {
+  const { container } = render(<CToastHeader className="bazinga">Test</CToastHeader>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('toast-header')
+})

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

@@ -0,0 +1,47 @@
+import React from 'react' //  useState,
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CToast, CToaster, CToastBody, CToastHeader, CButton } from '../../../index'
+
+test('loads and displays CToaster component', async () => {
+  const { container } = render(<CToaster>Test</CToaster>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CToaster customize', async () => {
+  jest.useFakeTimers()
+  let toast = <></>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const addToast = function (t: any) {
+    toast = t
+  }
+  const { container } = render(
+    <>
+      <CToaster push={toast} className="bazinga" />
+      <CButton
+        onClick={() =>
+          addToast(
+            <>
+              <CToast autohide={false}>
+                <CToastHeader close>Lorem ipsum</CToastHeader>
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+              </CToast>
+            </>,
+          )
+        }
+      >
+        Send a toast
+      </CButton>
+    </>,
+  )
+  expect(container).toMatchSnapshot()
+  const btn = document.querySelector('.btn')
+  if (btn !== null) {
+    fireEvent.click(btn)
+  }
+  jest.runAllTimers()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('toaster')
+  expect(container.firstChild).toHaveClass('toast-container')
+  jest.useRealTimers()
+})

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToast customize 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    class="toast fade show bg-warning border-0 bazinga"
+    role="alert"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CToast component 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    class="toast fade show"
+    role="alert"
+  >
+    Test
+  </div>
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToastBody customize 1`] = `
+<div>
+  <div
+    class="toast-body bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CToastBody component 1`] = `
+<div>
+  <div
+    class="toast-body"
+  >
+    Test
+  </div>
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToastHeader customize 1`] = `
+<div>
+  <div
+    class="toast-header bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CToastHeader component 1`] = `
+<div>
+  <div
+    class="toast-header"
+  >
+    Test
+  </div>
+</div>
+`;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToaster customize 1`] = `
+<div>
+  <div
+    class="toaster toast-container p-3 bazinga"
+  />
+  <button
+    class="btn btn-primary"
+    type="button"
+  >
+    Send a toast
+  </button>
+</div>
+`;
+
+exports[`loads and displays CToaster component 1`] = `
+<div>
+  <div
+    class="toaster toast-container p-3"
+  >
+    Test
+  </div>
+</div>
+`;