@coreui/react 4.0.0-rc.1

package/src/components/offcanvas/COffcanvas.tsx

@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Transition } from 'react-transition-group'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+import { CBackdrop } from '../backdrop/CBackdrop'
+
+export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Apply a backdrop on body while offcanvas is open. [docs]
+   *
+   * @default true
+   */
+  backdrop?: boolean
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Closes the offcanvas when escape key is pressed [docs]
+   *
+   * @default true
+   */
+  keyboard?: boolean
+  /**
+   * Method called before the dissmiss animation has started. [docs]
+   */
+  onDismiss?: () => void
+  /**
+   * Components placement, there’s no default placement. [docs]
+   * @type 'start' | 'end' | 'top' | 'bottom'
+   */
+  placement: 'start' | 'end' | 'top' | 'bottom'
+  /**
+   * Generates modal using createPortal. [docs]
+   */
+  portal?: boolean
+  /**
+   * Toggle the visibility of offcanvas component. [docs]
+   */
+  visible?: boolean
+}
+
+export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
+  (
+    {
+      children,
+      backdrop = true,
+      className,
+      keyboard = true,
+      onDismiss,
+      placement,
+      portal = true,
+      visible = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState<boolean>(visible)
+    const offcanvasRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, offcanvasRef)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const _className = classNames(
+      'offcanvas',
+      {
+        [`offcanvas-${placement}`]: placement,
+        show: _visible,
+      },
+      className,
+    )
+
+    const transitionStyles = {
+      entering: { visibility: 'visible' },
+      entered: { visibility: 'visible' },
+      exiting: { visibility: 'visible' },
+      exited: { visibility: 'hidden' },
+    }
+
+    const handleDismiss = () => {
+      setVisible(false)
+      return onDismiss && onDismiss()
+    }
+
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === 'Escape' && keyboard) {
+          return handleDismiss()
+        }
+      },
+      [ref, handleDismiss],
+    )
+
+    const offcanvas = (ref: React.Ref<HTMLDivElement>, state: string) => {
+      return (
+        <>
+          <div
+            className={_className}
+            style={{ ...transitionStyles[state] }}
+            tabIndex={-1}
+            onKeyDown={handleKeyDown}
+            {...rest}
+            ref={ref}
+          >
+            {children}
+          </div>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <Transition in={_visible} timeout={300} onEntered={() => offcanvasRef.current?.focus()}>
+          {(state) => {
+            return typeof window !== 'undefined' && portal
+              ? createPortal(offcanvas(forkedRef, state), document.body)
+              : offcanvas(forkedRef, state)
+          }}
+        </Transition>
+        {typeof window !== 'undefined' && portal
+          ? backdrop &&
+            createPortal(<CBackdrop visible={visible} onClick={handleDismiss} />, document.body)
+          : backdrop && <CBackdrop visible={visible} onClick={handleDismiss} />}
+      </>
+    )
+  },
+)
+
+COffcanvas.propTypes = {
+  backdrop: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  keyboard: PropTypes.bool,
+  onDismiss: PropTypes.func,
+  placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
+    .isRequired,
+  portal: PropTypes.bool,
+  visible: PropTypes.bool,
+}
+
+COffcanvas.displayName = 'COffcanvas'

package/src/components/offcanvas/COffcanvasBody.tsx

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

package/src/components/offcanvas/COffcanvasHeader.tsx

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

package/src/components/offcanvas/COffcanvasTitle.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface COffcanvasTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'h5'
+   */
+  component?: string | ElementType
+}
+
+export const COffcanvasTitle = forwardRef<HTMLHeadingElement, COffcanvasTitleProps>(
+  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
+    const _className = classNames('offcanvas-title', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+COffcanvasTitle.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+COffcanvasTitle.displayName = 'COffcanvasTitle'

package/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { COffcanvas } from '../../../index'
+
+test('loads and displays COffcanvas component', async () => {
+  const { container } = render(<COffcanvas placement="top" />)
+  expect(container).toMatchSnapshot()
+})
+
+test('COffcanvas customize one', async () => {
+  const { container } = render(
+    <COffcanvas
+      className="bazinga"
+      backdrop={false}
+      keyboard={false}
+      placement="start"
+      portal={false}
+      visible={false}
+    >
+      Test
+    </COffcanvas>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('offcanvas')
+  expect(container.firstChild).toHaveClass('offcanvas-start')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveTextContent('Test')
+})
+
+test('COffcanvas customize and event on click backdrop', async () => {
+  jest.useFakeTimers()
+  const onDismiss = jest.fn()
+  const { container } = render(
+    <COffcanvas
+      className="bazinga"
+      backdrop={true}
+      keyboard={true}
+      placement="end"
+      portal={false}
+      visible={true}
+      onDismiss={onDismiss}
+    >
+      Test
+    </COffcanvas>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('offcanvas')
+  expect(container.firstChild).toHaveClass('offcanvas-end')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('show')
+  expect(container.firstChild).toHaveTextContent('Test')
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const backdrop = document.querySelector('.modal-backdrop')
+  if (backdrop !== null) {
+    fireEvent.click(backdrop)
+  }
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).not.toHaveClass('show')
+})
+
+test('COffcanvas customize and event on keypress', async () => {
+  jest.useFakeTimers()
+  const onDismiss = jest.fn()
+  const { container } = render(
+    <COffcanvas
+      className="bazinga"
+      backdrop={true}
+      keyboard={true}
+      placement="end"
+      portal={false}
+      visible={true}
+      onDismiss={onDismiss}
+    >
+      Test
+    </COffcanvas>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('offcanvas')
+  expect(container.firstChild).toHaveClass('offcanvas-end')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('show')
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const canvas = document.querySelector('.offcanvas')
+  if (canvas === null) {
+    expect(true).toBe(false)
+  } else {
+    fireEvent.keyDown(canvas, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    })
+  }
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).not.toHaveClass('show')
+})

package/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COffcanvas customize and event on click backdrop 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-end show bazinga"
+    style="visibility: visible;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+  <div
+    class="modal-backdrop fade show"
+  />
+</div>
+`;
+
+exports[`COffcanvas customize and event on keypress 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-end show bazinga"
+    style="visibility: visible;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+  <div
+    class="modal-backdrop fade show"
+  />
+</div>
+`;
+
+exports[`COffcanvas customize one 1`] = `
+<div>
+  <div
+    class="offcanvas offcanvas-start bazinga"
+    style="visibility: hidden;"
+    tabindex="-1"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays COffcanvas component 1`] = `<div />`;

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COffcanvasTitle customize 1`] = `
+<div>
+  <div
+    class="offcanvas-title bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays COffcanvasTitle component 1`] = `
+<div>
+  <h5
+    class="offcanvas-title"
+  />
+</div>
+`;

package/src/components/pagination/CPagination.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * Set the alignment of pagination components. [docs]
+   */
+  align?: 'start' | 'center' | 'end'
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Size the component small or large. [docs]
+   */
+  size?: 'sm' | 'lg'
+}
+
+export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
+  ({ children, align, className, size, ...rest }, ref) => {
+    const _className = classNames(
+      'pagination',
+      {
+        [`justify-content-${align}`]: align,
+        [`pagination-${size}`]: size,
+      },
+      className,
+    )
+    return (
+      <nav ref={ref} {...rest}>
+        <ul className={_className}>{children}</ul>
+      </nav>
+    )
+  },
+)
+
+CPagination.propTypes = {
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+}
+
+CPagination.displayName = 'CPagination'

package/src/components/pagination/CPaginationItem.tsx

@@ -0,0 +1,57 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CLink } from '../link/CLink'
+
+export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   */
+  component?: string | ElementType
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+}
+
+export const CPaginationItem = forwardRef<HTMLAnchorElement, CPaginationItemProps>(
+  ({ children, className, component, ...rest }, ref) => {
+    const _className = classNames(
+      'page-item',
+      {
+        active: rest.active,
+        disabled: rest.disabled,
+      },
+      className,
+    )
+
+    const Component = component ? component : rest.active ? 'span' : 'a'
+
+    return (
+      <li className={_className} {...(rest.active && { 'aria-current': 'page' })}>
+        {Component === 'a' ? (
+          <CLink className="page-link" component={Component} {...rest} ref={ref}>
+            {children}
+          </CLink>
+        ) : (
+          <Component className="page-link" ref={ref}>
+            {children}
+          </Component>
+        )}
+      </li>
+    )
+  },
+)
+
+CPaginationItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CPaginationItem.displayName = 'CPaginationItem'

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPagination, CPaginationItem } from '../../../index'
+
+test('loads and displays CPagination component', async () => {
+  const { container } = render(<CPagination>Test</CPagination>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CPagination customize', async () => {
+  const { container } = render(
+    <CPagination className="bazinga" aria-label="ariaLabel" size="lg">
+      Test
+    </CPagination>,
+  )
+  expect(container).toMatchSnapshot()
+  let element = container.firstChild
+  if (element !== null) {
+    element = element.firstChild
+    expect(element).toHaveClass('bazinga')
+    expect(element).toHaveClass('pagination')
+    expect(element).toHaveClass('pagination-lg')
+  } else {
+    expect(true).toBe(false)
+  }
+})
+
+test('CPagination example', async () => {
+  const { container } = render(
+    <CPagination>
+      <CPaginationItem>A</CPaginationItem>
+      <CPaginationItem>B</CPaginationItem>
+      <CPaginationItem>C</CPaginationItem>
+    </CPagination>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPaginationItem } from '../../../index'
+
+test('loads and displays CPaginationItem component', async () => {
+  const { container } = render(<CPaginationItem>Test</CPaginationItem>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CPaginationItem customize', async () => {
+  const { container } = render(
+    <CPaginationItem className="bazinga" active={true} component="h3" disabled={true}>
+      Test
+    </CPaginationItem>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('page-item')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveClass('disabled')
+  let element = container.firstChild
+  if (element !== null) {
+    element = element.firstChild
+    expect(element).toHaveClass('page-link')
+  } else {
+    expect(true).toBe(false)
+  }
+})