@coreui/react 4.0.0-rc.1

package/src/components/dropdown/CDropdown.tsx

@@ -0,0 +1,205 @@
+import React, {
+  createContext,
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Manager } from 'react-popper'
+
+import { Placements, placementPropType } from '../Types'
+import { useForkedRef } from '../../utils/hooks'
+
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints
+
+export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
+  /**
+   * @type { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
+   */
+  alignment?: Alignments
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'div'
+   */
+  component?: string | ElementType
+  /**
+   * Sets a darker color scheme to match a dark navbar.
+   */
+  dark?: boolean
+  /**
+   * Sets a specified  direction and location of the dropdown menu. [docs]
+   *
+   * @type 'dropup' | 'dropend' | 'dropstart'
+   */
+  direction?: 'dropup' | 'dropend' | 'dropstart'
+  /**
+   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. [docs]
+   *
+   * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+   * @default 'bottom-start'
+   */
+  placement?: Placements
+  /**
+   * If you want to disable dynamic positioning set this property to `true`.
+   */
+  popper?: boolean
+  /**
+   * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. [docs]
+   *
+   * @default 'btn-group'
+   */
+  variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+  /**
+   * Toggle the visibility of dropdown menu component. [docs]
+   *
+   * @default false
+   */
+  visible?: boolean
+}
+
+interface ContextProps extends CDropdownProps {
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CDropdownContext = createContext({} as ContextProps)
+
+export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownProps>(
+  (
+    {
+      children,
+      alignment,
+      className,
+      dark,
+      direction,
+      placement = 'bottom-start',
+      popper = true,
+      variant = 'btn-group',
+      component = 'div',
+      visible = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, dropdownRef)
+
+    const Component = variant === 'nav-item' ? 'li' : component
+
+    // Disable popper if responsive aligment is set.
+    if (typeof alignment === 'object') {
+      popper = false
+    }
+
+    const contextValues = {
+      alignment,
+      dark,
+      direction: direction,
+      placement: placement,
+      popper,
+      variant,
+      visible: _visible,
+      setVisible,
+    }
+
+    const _className = classNames(
+      variant === 'nav-item' ? 'nav-item dropdown' : variant,
+      {
+        show: _visible,
+      },
+      direction,
+      className,
+    )
+
+    useEffect(() => {
+      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('keyup', handleKeyup)
+
+      return () => {
+        window.removeEventListener('click', handleClickOutside)
+        window.removeEventListener('keyup', handleKeyup)
+      }
+    })
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const handleKeyup = (event: Event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as HTMLElement)) {
+        setVisible(false)
+      }
+    }
+    const handleClickOutside = (event: Event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as HTMLElement)) {
+        setVisible(false)
+      }
+    }
+
+    return popper ? (
+      <CDropdownContext.Provider value={contextValues}>
+        <Manager>
+          {/* TODO: find solution how to handle click outside */}
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <Component className={_className} {...rest} ref={forkedRef}>
+              {children}
+            </Component>
+          )}
+        </Manager>
+      </CDropdownContext.Provider>
+    ) : (
+      <CDropdownContext.Provider value={contextValues}>
+        <Component className={_className} {...rest} ref={forkedRef}>
+          {children}
+        </Component>
+      </CDropdownContext.Provider>
+    )
+  },
+)
+
+const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
+
+CDropdown.propTypes = {
+  // @ts-expect-error TODO: we have to find a solution
+  alignment: PropTypes.oneOfType([
+    alignmentDirection,
+    PropTypes.shape({ xs: alignmentDirection }),
+    PropTypes.shape({ sm: alignmentDirection }),
+    PropTypes.shape({ md: alignmentDirection }),
+    PropTypes.shape({ lg: alignmentDirection }),
+    PropTypes.shape({ xl: alignmentDirection }),
+    PropTypes.shape({ xxl: alignmentDirection }),
+  ]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  dark: PropTypes.bool,
+  direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+  placement: placementPropType,
+  popper: PropTypes.bool,
+  variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
+  visible: PropTypes.bool,
+}
+
+CDropdown.displayName = 'CDropdown'

package/src/components/dropdown/CDropdownDivider.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+}
+
+export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
+  ({ className, ...rest }, ref) => {
+    const _className = classNames('dropdown-divider', className)
+
+    return <hr className={_className} {...rest} ref={ref} />
+  },
+)
+
+CDropdownDivider.propTypes = {
+  className: PropTypes.string,
+}
+
+CDropdownDivider.displayName = 'CDropdownDivider'

package/src/components/dropdown/CDropdownHeader.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CDropdownHeaderProps 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 'h6'
+   */
+  component?: string | ElementType
+}
+
+export const CDropdownHeader = forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
+  ({ children, className, component: Component = 'h6', ...rest }, ref) => {
+    const _className = classNames('dropdown-header', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CDropdownHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CDropdownHeader.displayName = 'CDropdownHeader'

package/src/components/dropdown/CDropdownItem.tsx

@@ -0,0 +1,39 @@
+import React, { ElementType, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CLinkProps } from '../link/CLink'
+import { CLink } from '../link/CLink'
+
+export interface CDropdownItemProps extends CLinkProps {
+  /**
+   * 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 'a'
+   */
+  component?: string | ElementType
+}
+
+export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, CDropdownItemProps>(
+  ({ children, className, component = 'a', ...rest }, ref) => {
+    const _className = classNames('dropdown-item', className)
+
+    return (
+      <CLink component={component} {...rest} className={_className} ref={ref}>
+        {children}
+      </CLink>
+    )
+  },
+)
+
+CDropdownItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CDropdownItem.displayName = 'CDropdownItem'

package/src/components/dropdown/CDropdownItemPlain.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * 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 'span'
+   */
+  component?: string | ElementType
+}
+
+export const CDropdownItemPlain = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
+  ({ children, className, component: Component = 'span', ...rest }, ref) => {
+    const _className = classNames('dropdown-item-text', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CDropdownItemPlain.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CDropdownItemPlain.displayName = 'CDropdownItemPlain'

package/src/components/dropdown/CDropdownMenu.tsx

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types'
+import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
+import classNames from 'classnames'
+import { Popper, PopperChildrenProps } from 'react-popper'
+
+import { Placements } from '../Types'
+import { Alignments, CDropdownContext } from './CDropdown'
+
+export interface CDropdownMenuProps
+  extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
+    Omit<
+      PopperChildrenProps,
+      'arrowProps' | 'forceUpdate' | 'placement' | 'ref' | 'style' | 'update'
+    > {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'ul'
+   */
+  component?: string | ElementType
+}
+
+export const CDropdownMenu: FC<CDropdownMenuProps> = ({
+  children,
+  className,
+  component: Component = 'ul',
+  ...rest
+}) => {
+  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+
+  let _placement: Placements = placement
+
+  if (direction === 'dropup') {
+    _placement = 'top-start'
+  }
+  if (direction === 'dropend') {
+    _placement = 'right-start'
+  }
+  if (direction === 'dropstart') {
+    _placement = 'left-start'
+  }
+  if (alignment === 'end') {
+    _placement = 'bottom-end'
+  }
+
+  const alignmentClassNames = (alignment: Alignments) => {
+    const classNames: string[] = []
+    if (typeof alignment === 'object') {
+      Object.keys(alignment).map((key) => {
+        classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+      })
+    }
+
+    if (typeof alignment === 'string') {
+      classNames.push(`dropdown-menu-${alignment}`)
+    }
+
+    return classNames
+  }
+
+  const _className = classNames(
+    'dropdown-menu',
+    {
+      'dropdown-menu-dark': dark,
+      show: visible,
+    },
+    alignment && alignmentClassNames(alignment),
+    className,
+  )
+
+  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => {
+    return (
+      <Component
+        className={_className}
+        ref={ref}
+        style={style}
+        role="menu"
+        aria-hidden={!visible}
+        {...(!popper && { 'data-coreui-popper': 'static' })}
+        {...rest}
+      >
+        {Component === 'ul'
+          ? React.Children.map(children, (child, index) => {
+              if (React.isValidElement(child)) {
+                return <li key={index}>{React.cloneElement(child)}</li>
+              }
+              return
+            })
+          : children}
+      </Component>
+    )
+  }
+
+  return popper && visible ? (
+    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+  ) : (
+    dropdownMenuComponent()
+  )
+}
+
+CDropdownMenu.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CDropdownMenu.displayName = 'CDropdownMenu'

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')
+})