@coreui/react 4.0.0-rc.1

package/src/components/nav/CNavGroup.tsx

@@ -0,0 +1,147 @@
+import React, {
+  CSSProperties,
+  forwardRef,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+import { CNavContext } from '../sidebar/CSidebarNav'
+export interface CNavGroupProps {
+  children?: ReactNode
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Make nav group more compact by cutting all `padding` in half. [docs]
+   */
+  compact?: boolean
+  /**
+   * Set group toggler label. [docs]
+   */
+  toggler?: string | ReactNode
+  /**
+   * Show nav group items. [docs]
+   */
+  visible?: boolean
+  /**
+   * @ignore
+   */
+  idx?: string
+}
+
+export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
+  ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {
+    const [height, setHeight] = useState<number | string>()
+    const navItemsRef = useRef<HTMLUListElement>(null)
+
+    const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+
+    const [_visible, setVisible] = useState(
+      Boolean(
+        visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())),
+      ),
+    )
+
+    useEffect(() => {
+      setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))
+    }, [visibleGroup])
+
+    const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
+      event.preventDefault()
+      setVisibleGroup(
+        _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,
+      )
+      setVisible(!_visible)
+    }
+
+    const style: CSSProperties = {
+      height: 0,
+    }
+
+    const onEntering = () => {
+      navItemsRef && navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
+    }
+
+    const onEntered = () => {
+      setHeight('auto')
+    }
+
+    const onExit = () => {
+      navItemsRef && navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
+    }
+
+    const onExiting = () => {
+      // @ts-expect-error reflow is necessary to get correct height of the element
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const reflow = navItemsRef && navItemsRef.current && navItemsRef.current.offsetHeight
+      setHeight(0)
+    }
+
+    const onExited = () => {
+      setHeight(0)
+    }
+
+    const transitionStyles = {
+      entering: { display: 'block', height: height },
+      entered: { display: 'block', height: height },
+      exiting: { display: 'block', height: height },
+      exited: { height: height },
+    }
+
+    const _className = classNames('nav-group', { show: _visible }, className)
+
+    return (
+      <li className={_className} {...rest} ref={ref}>
+        {toggler && (
+          <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
+            {toggler}
+          </a>
+        )}
+        <Transition
+          in={_visible}
+          timeout={300}
+          onEntering={onEntering}
+          onEntered={onEntered}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={onExited}
+        >
+          {(state) => (
+            <ul
+              className={classNames('nav-group-items', {
+                compact: compact,
+              })}
+              style={{ ...style, ...transitionStyles[state] }}
+              ref={navItemsRef}
+            >
+              {React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                  return React.cloneElement(child, { key: index, idx: `${idx}.${index}` })
+                }
+                return
+              })}
+            </ul>
+          )}
+        </Transition>
+      </li>
+    )
+  },
+)
+
+CNavGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  compact: PropTypes.bool,
+  idx: PropTypes.string,
+  toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  visible: PropTypes.bool,
+}
+
+CNavGroup.displayName = 'CNavGroup'

package/src/components/nav/CNavGroupItems.tsx

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

package/src/components/nav/CNavItem.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CNavLink, CNavLinkProps } from './CNavLink'
+
+export const CNavItem = forwardRef<HTMLLIElement, CNavLinkProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('nav-item', className)
+    if (rest.href || rest.to) {
+      children = (
+        <CNavLink className={className} {...rest}>
+          {children}
+        </CNavLink>
+      )
+    }
+    return (
+      <li className={_className} ref={ref}>
+        {children}
+      </li>
+    )
+  },
+)
+
+CNavItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CNavItem.displayName = 'CNavItem'

package/src/components/nav/CNavLink.tsx

@@ -0,0 +1,66 @@
+import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+
+import { CNavContext } from '../sidebar/CSidebarNav'
+import { CLinkProps, CLink } from '../link/CLink'
+export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * 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
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * @ignore
+   */
+  idx?: string
+  /**
+   * @ignore
+   */
+  to?: string
+}
+
+export const CNavLink = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement | HTMLLIElement,
+  CNavLinkProps
+>(({ children, className, idx, ...rest }, ref) => {
+  const navLinkRef = useRef<HTMLAnchorElement>(null)
+  const forkedRef = useForkedRef(ref, navLinkRef)
+
+  const { setVisibleGroup } = useContext(CNavContext)
+  const _className = classNames('nav-link', className)
+
+  useEffect(() => {
+    rest.active = navLinkRef.current?.classList.contains('active')
+    idx && rest.active && setVisibleGroup(idx)
+  }, [rest.active, className])
+
+  return (
+    <CLink className={_className} {...rest} ref={forkedRef}>
+      {children}
+    </CLink>
+  )
+})
+
+CNavLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  idx: PropTypes.string,
+}
+
+CNavLink.displayName = 'CNavLink'

package/src/components/nav/CNavTitle.tsx

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

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CNav,
+  CNavItem,
+  CNavLink,
+  CDropdown,
+  CDropdownToggle,
+  CDropdownMenu,
+  CDropdownItem,
+} from '../../../index'
+
+test('loads and displays CNav component', async () => {
+  const { container } = render(<CNav>Test</CNav>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNav customize', async () => {
+  const { container } = render(
+    <CNav className="bazinga" component="h3" layout="justified" variant="pills">
+      Test
+    </CNav>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('nav')
+  expect(container.firstChild).toHaveClass('nav-justified')
+  expect(container.firstChild).toHaveClass('nav-pills')
+  expect(container.firstChild).toHaveClass('bazinga')
+})
+
+test('CNav example', async () => {
+  const { container } = render(
+    <CNav>
+      <CNavItem>
+        <CNavLink href="#" active>
+          Active
+        </CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CDropdown variant="nav-item">
+        <CDropdownToggle>A</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">B</CDropdownItem>
+          <CDropdownItem href="#">C</CDropdownItem>
+          <CDropdownItem href="#">D</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>
+          Disabled
+        </CNavLink>
+      </CNavItem>
+    </CNav>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/nav/__tests__/CNavGroup.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CNavGroup } from '../../../index'
+
+test('loads and displays CNavGroup component', async () => {
+  const { container } = render(<CNavGroup toggler="anchorText" />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNavGroup customize', async () => {
+  const { container } = render(
+    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('nav-group')
+  expect(container.firstChild).toHaveClass('bazinga')
+  const arr = container.getElementsByClassName('nav-link')
+  if (arr.length > 0) {
+    //expect(arr[0].innerText).toHaveTextContent('anchorText')
+    expect(arr[0].innerHTML).toBe('anchorText')
+  } else {
+    expect(true).toBe(false)
+  }
+})

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

package/src/components/nav/__tests__/CNavItem.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CNavItem } from '../../../index'
+
+test('loads and displays CNavItem component', async () => {
+  const { container } = render(<CNavItem>Test</CNavItem>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNavItem customize', async () => {
+  const { container } = render(
+    <CNavItem active={true} className="bazinga" component="h3" disabled={true} href="/bazinga">
+      Test
+    </CNavItem>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild).toHaveClass('nav-link')
+  expect(container.firstChild).toHaveClass('nav-item')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container).toMatchSnapshot()
+})

package/src/components/nav/__tests__/CNavLink.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CNavLink } from '../../../index'
+
+test('loads and displays CNavLink component', async () => {
+  const { container } = render(<CNavLink>Test</CNavLink>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNavLink customize', async () => {
+  const { container } = render(
+    <CNavLink active={true} className="bazinga" component="h3" disabled={true} href="/bazinga">
+      Test
+    </CNavLink>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('nav-link')
+  expect(container.firstChild).toHaveClass('bazinga')
+})
+
+test('CNavLink witch "to" prop', async () => {
+  const { container } = render(<CNavLink to="/bazinga">Test</CNavLink>)
+  expect(container).toMatchSnapshot()
+})

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

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNav customize 1`] = `
+<div>
+  <h3
+    class="nav nav-justified nav-pills bazinga"
+    role="navigation"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`CNav example 1`] = `
+<div>
+  <ul
+    class="nav"
+    role="navigation"
+  >
+    <li
+      class="nav-item"
+    >
+      <a
+        aria-current="page"
+        class="nav-link active"
+        href="#"
+      >
+        Active
+      </a>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        href="#"
+      >
+        Link
+      </a>
+    </li>
+    <li
+      class="nav-item dropdown"
+    >
+      <a
+        aria-expanded="false"
+        class="dropdown-toggle nav-link"
+        href="#"
+      >
+        A
+      </a>
+      <ul
+        aria-hidden="true"
+        class="dropdown-menu"
+        role="menu"
+      >
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            B
+          </a>
+        </li>
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            C
+          </a>
+        </li>
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            D
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        href="#"
+      >
+        Link
+      </a>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        aria-disabled="true"
+        class="nav-link disabled"
+        disabled=""
+        href="#"
+        tabindex="-1"
+      >
+        Disabled
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`loads and displays CNav component 1`] = `
+<div>
+  <ul
+    class="nav"
+    role="navigation"
+  >
+    Test
+  </ul>
+</div>
+`;

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavGroup customize 1`] = `
+<div>
+  <li
+    class="nav-group bazinga"
+  >
+    <a
+      class="nav-link nav-group-toggle"
+    >
+      anchorText
+    </a>
+    <ul
+      class="nav-group-items"
+      style="display: block; height: 0px;"
+    />
+  </li>
+</div>
+`;
+
+exports[`loads and displays CNavGroup component 1`] = `
+<div>
+  <li
+    class="nav-group"
+  >
+    <a
+      class="nav-link nav-group-toggle"
+    >
+      anchorText
+    </a>
+    <ul
+      class="nav-group-items"
+    />
+  </li>
+</div>
+`;

package/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap

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

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavItem customize 1`] = `
+<div>
+  <li
+    class="nav-item bazinga"
+  >
+    <h3
+      aria-current="page"
+      class="nav-link bazinga active disabled"
+      disabled=""
+      href="/bazinga"
+    >
+      Test
+    </h3>
+  </li>
+</div>
+`;
+
+exports[`CNavItem customize 2`] = `
+<div>
+  <li
+    class="nav-item bazinga"
+  >
+    <h3
+      aria-current="page"
+      class="nav-link bazinga active disabled"
+      disabled=""
+      href="/bazinga"
+    >
+      Test
+    </h3>
+  </li>
+</div>
+`;
+
+exports[`loads and displays CNavItem component 1`] = `
+<div>
+  <li
+    class="nav-item"
+  >
+    Test
+  </li>
+</div>
+`;