@coreui/react-pro 4.0.0-rc.1

package/src/components/dropdown/CDropdownToggle.tsx

@@ -0,0 +1,91 @@
+import React, { FC, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Reference } from 'react-popper'
+
+import { Triggers, triggerPropType } from '../Types'
+
+import { CButton, CButtonProps } from '../button/CButton'
+import { CDropdownContext } from './CDropdown'
+
+export interface CDropdownToggleProps extends CButtonProps {
+  /**
+   * Enables pseudo element caret on toggler. [docs]
+   *
+   * @default true
+   */
+  caret?: boolean
+  /**
+   * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. [docs]
+   */
+  split?: boolean
+  /**
+   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. [docs]
+   */
+  trigger?: Triggers | Triggers[]
+}
+
+export const CDropdownToggle: FC<CDropdownToggleProps> = ({
+  children,
+  caret = true,
+  className,
+  split,
+  trigger = 'click',
+  ...rest
+}) => {
+  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const _className = classNames(
+    {
+      'dropdown-toggle': caret,
+      'dropdown-toggle-split': split,
+      'nav-link': variant === 'nav-item',
+    },
+    className,
+  )
+
+  const triggers = {
+    ...((trigger === 'click' || trigger.includes('click')) && {
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault()
+        setVisible(!visible)
+      },
+    }),
+    ...((trigger === 'focus' || trigger.includes('focus')) && {
+      onFocus: () => setVisible(true),
+      onBlur: () => setVisible(false),
+    }),
+  }
+
+  const togglerProps = {
+    className: _className,
+    'aria-expanded': visible,
+    ...triggers,
+  }
+
+  // We use any because Toggler can be `a` as well as `button`.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Toggler = (ref?: React.Ref<any>) => {
+    return variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={ref}>
+        {children}
+      </a>
+    ) : (
+      <CButton {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+        {children}
+        {split && <span className="visually-hidden">Toggle Dropdown</span>}
+      </CButton>
+    )
+  }
+
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+}
+
+CDropdownToggle.propTypes = {
+  caret: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  split: PropTypes.bool,
+  trigger: triggerPropType,
+}
+
+CDropdownToggle.displayName = 'CDropdownToggle'

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CDropdown,
+  CDropdownToggle,
+  CDropdownMenu,
+  CDropdownItem,
+  CDropdownItemPlain,
+  CDropdownHeader,
+  CDropdownDivider,
+} from '../../../index'
+
+test('loads and displays CDropdown component', async () => {
+  const { container } = render(<CDropdown>Test</CDropdown>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdown customize', async () => {
+  const { container } = render(
+    <CDropdown
+      alignment={{ lg: 'start' }}
+      className="bazinga"
+      component="h3"
+      dark={true}
+      direction="dropstart"
+      placement="right-end"
+      popper={true}
+      variant="nav-item"
+      visible={true}
+    >
+      Test
+    </CDropdown>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('nav-item')
+  expect(container.firstChild).toHaveClass('dropdown')
+  expect(container.firstChild).toHaveClass('dropstart')
+  expect(container.firstChild).toHaveClass('show')
+})
+
+test('CDropdown change visible prop', async () => {
+  jest.useFakeTimers()
+  const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  rerender(<CDropdown visible={true}>Test</CDropdown>)
+  jest.runAllTimers()
+  expect(screen.getByText('Test')).toHaveClass('show')
+  rerender(<CDropdown visible={false}>Test</CDropdown>)
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  jest.runAllTimers()
+  jest.useRealTimers()
+})
+
+test('CDropdown click', async () => {
+  jest.useFakeTimers()
+  render(
+    <CDropdown>
+      <CDropdownToggle>Test</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem>A</CDropdownItem>
+        <CDropdownItem>B</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>,
+  )
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  const el = screen.getByText('Test')
+  if (el !== null) {
+    fireEvent.click(el) //click on element
+  }
+  jest.runAllTimers()
+  expect(screen.getByText('Test').closest('div')).toHaveClass('show')
+  fireEvent.click(document) //click outside
+  expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
+  jest.runAllTimers()
+  jest.useRealTimers()
+})
+
+test('CDropdown example', async () => {
+  jest.useFakeTimers()
+  const { container } = render(
+    <CDropdown>
+      <CDropdownToggle>Test</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownHeader>A</CDropdownHeader>
+        <CDropdownItem>B</CDropdownItem>
+        <CDropdownItemPlain>C</CDropdownItemPlain>
+        <CDropdownDivider />
+        <CDropdownItem>D</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/dropdown/__tests__/CDropdownDivider.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 { CDropdownDivider } from '../../../index'
+
+test('loads and displays CDropdownDivider component', async () => {
+  const { container } = render(<CDropdownDivider />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdownDivider customize', async () => {
+  const { container } = render(<CDropdownDivider className="bazinga" />)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('dropdown-divider')
+})

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

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

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CDropdown, CDropdownMenu } from '../../../index'
+
+test('loads and displays CDropdownMenu component', async () => {
+  const { container } = render(<CDropdownMenu>Test</CDropdownMenu>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdownMenu customize', async () => {
+  const { container } = render(
+    <CDropdown visible={true}>
+      <CDropdownMenu className="bazinga" component="div">
+        Test
+      </CDropdownMenu>
+    </CDropdown>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild).toHaveClass('dropdown-menu')
+  expect(container.firstChild?.firstChild).toHaveClass('show')
+})

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CDropdownToggle } from '../../../index'
+
+test('loads and displays CDropdownToggle component', async () => {
+  const { container } = render(<CDropdownToggle>Test</CDropdownToggle>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdownToggle customize', async () => {
+  const { container } = render(
+    <CDropdownToggle caret={true} split={true} trigger="focus">
+      Test
+    </CDropdownToggle>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('dropdown-toggle')
+  expect(container.firstChild).toHaveClass('dropdown-toggle-split')
+})

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdown customize 1`] = `
+<div>
+  <li
+    class="nav-item dropdown show dropstart bazinga"
+  >
+    Test
+  </li>
+</div>
+`;
+
+exports[`CDropdown example 1`] = `
+<div>
+  <div
+    class="btn-group"
+  >
+    <button
+      aria-expanded="false"
+      class="btn btn-primary dropdown-toggle"
+      tabindex="0"
+      type="button"
+    >
+      Test
+    </button>
+    <ul
+      aria-hidden="true"
+      class="dropdown-menu"
+      role="menu"
+    >
+      <li>
+        <h6
+          class="dropdown-header"
+        >
+          A
+        </h6>
+      </li>
+      <li>
+        <a
+          class="dropdown-item"
+        >
+          B
+        </a>
+      </li>
+      <li>
+        <span
+          class="dropdown-item-text"
+        >
+          C
+        </span>
+      </li>
+      <li>
+        <hr
+          class="dropdown-divider"
+        />
+      </li>
+      <li>
+        <a
+          class="dropdown-item"
+        >
+          D
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CDropdown component 1`] = `
+<div>
+  <div
+    class="btn-group"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownDivider customize 1`] = `
+<div>
+  <hr
+    class="dropdown-divider bazinga"
+  />
+</div>
+`;
+
+exports[`loads and displays CDropdownDivider component 1`] = `
+<div>
+  <hr
+    class="dropdown-divider"
+  />
+</div>
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownMenu customize 1`] = `
+<div>
+  <div
+    class="btn-group show"
+  >
+    <div
+      aria-hidden="false"
+      class="dropdown-menu show bazinga"
+      role="menu"
+      style="position: absolute; left: 0px; top: 0px;"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CDropdownMenu component 1`] = `
+<div>
+  <ul
+    aria-hidden="true"
+    class="dropdown-menu"
+    data-coreui-popper="static"
+    role="menu"
+  />
+</div>
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownToggle customize 1`] = `
+<div>
+  <button
+    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+    tabindex="0"
+    type="button"
+  >
+    Test
+    <span
+      class="visually-hidden"
+    >
+      Toggle Dropdown
+    </span>
+  </button>
+</div>
+`;
+
+exports[`loads and displays CDropdownToggle component 1`] = `
+<div>
+  <button
+    class="btn btn-primary dropdown-toggle"
+    tabindex="0"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/element-cover/CElementCover.tsx

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types'
+import React, {
+  CSSProperties,
+  forwardRef,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+import { CSpinner } from '../spinner/CSpinner'
+
+interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
+   * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
+   * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
+   *
+   * @type {sides: string[], query: string}[]
+   */
+  boundaries?: { sides: string[]; query: string }[] // TODO: check if this is correct, TJ
+  /**
+   * Opacity of the cover. [docs]
+   *
+   * @type number
+   */
+  opacity?: number
+}
+export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
+  ({ children, className, boundaries, opacity = 0.4, ...rest }, ref) => {
+    const elementCoverRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, elementCoverRef)
+
+    const [customBoundaries, setCustomBoundaries] = useState({})
+
+    const getCustomBoundaries = () => {
+      if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
+        return {}
+      }
+      const parent = elementCoverRef.current.parentElement
+      if (!parent) {
+        return {}
+      }
+      const parentCoords = parent.getBoundingClientRect()
+      const customBoundaries = {}
+      boundaries.forEach(({ sides, query }) => {
+        const element = parent.querySelector(query)
+        if (!element || !sides) {
+          return
+        }
+        const coords = element.getBoundingClientRect()
+        sides.forEach((side) => {
+          const sideMargin = Math.abs(coords[side] - parentCoords[side])
+          customBoundaries[side] = `${sideMargin}px`
+        })
+      })
+      return customBoundaries
+    }
+
+    useEffect(() => {
+      setCustomBoundaries(getCustomBoundaries())
+    }, [JSON.stringify(getCustomBoundaries())])
+
+    //render
+
+    const classes = classNames(className)
+
+    const containerCoords = {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      ...customBoundaries,
+    }
+
+    const coverStyles: CSSProperties = {
+      ...containerCoords,
+      position: 'absolute',
+      backgroundColor: `rgb(255,255,255,${opacity})`,
+    }
+
+    return (
+      <div className={classes} style={coverStyles} {...rest} ref={forkedRef}>
+        {children || (
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translateX(-50%) translateY(-50%)',
+            }}
+          >
+            <CSpinner variant="grow" color="primary" />
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+CElementCover.propTypes = {
+  boundaries: PropTypes.array,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  opacity: PropTypes.number,
+}
+
+CElementCover.displayName = 'CElementCover'

package/src/components/footer/CFooter.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Place footer in non-static positions. [docs]
+   */
+  position?: 'fixed' | 'sticky'
+}
+
+export const CFooter = forwardRef<HTMLDivElement, CFooterProps>(
+  ({ children, className, position, ...rest }, ref) => {
+    const _className = classNames('footer', { [`footer-${position}`]: position }, className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CFooter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  position: PropTypes.oneOf(['fixed', 'sticky']),
+}
+
+CFooter.displayName = 'CFooter'