@coreui/react 5.9.1 → 5.10.0

package/src/components/chip/CChip.tsx

@@ -0,0 +1,372 @@
+import React, {
+  ElementType,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
+export interface CChipProps extends HTMLAttributes<HTMLSpanElement | HTMLButtonElement> {
+  /**
+   * Toggles the active state of the React Chip component for non-selectable usage.
+   */
+  active?: boolean
+  /**
+   * Provides an accessible label for the remove button in the React Chip component.
+   */
+  ariaRemoveLabel?: string
+  /**
+   * Specifies the root element or custom component used by the React Chip component.
+   */
+  as?: ElementType
+  /**
+   * Adds custom classes to the React Chip root element.
+   */
+  className?: string
+  /**
+   * Enables interactive hover styling and pointer cursor for the React Chip component.
+   */
+  clickable?: boolean
+  /**
+   * Sets the contextual color of the React Chip component using CoreUI theme colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Disables the React Chip component and removes interactive behavior.
+   */
+  disabled?: boolean
+  /**
+   * Callback fired when the React Chip component becomes deselected.
+   */
+  onDeselect?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void
+  /**
+   * Callback fired when the React Chip component requests removal by button click or keyboard action.
+   */
+  onRemove?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLElement>) => void
+  /**
+   * Callback fired when the React Chip component becomes selected.
+   */
+  onSelect?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void
+  /**
+   * Callback fired when the selected state of the React Chip component changes.
+   */
+  onSelectedChange?: (
+    selected: boolean,
+    event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+  ) => void
+  /**
+   * Displays a remove button inside the React Chip component.
+   */
+  removable?: boolean
+  /**
+   * Replaces the default remove icon with a custom icon node in the React Chip component.
+   */
+  removeIcon?: ReactNode
+  /**
+   * Enables selectable behavior and keyboard toggle support for the React Chip component.
+   */
+  selectable?: boolean
+  /**
+   * Controls the selected state of a selectable React Chip component.
+   */
+  selected?: boolean
+  /**
+   * Sets the size of the React Chip component to small or large.
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Sets the visual variant of the React Chip component to outline style.
+   */
+  variant?: 'outline'
+}
+
+const SELECTOR_FOCUSABLE_ITEMS = '[data-coreui-chip-focusable="true"]:not(.disabled)'
+
+export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forwardRef<
+  HTMLSpanElement | HTMLButtonElement,
+  CChipProps
+>(
+  (
+    {
+      active,
+      ariaRemoveLabel = 'Remove',
+      children,
+      as: Component = 'span',
+      className,
+      clickable,
+      color,
+      disabled,
+      onClick,
+      onDeselect,
+      onKeyDown,
+      onRemove,
+      onSelect,
+      onSelectedChange,
+      removable,
+      removeIcon,
+      selectable,
+      selected,
+      size,
+      tabIndex,
+      variant,
+      ...rest
+    },
+    ref
+  ) => {
+    const chipRef = useRef<HTMLSpanElement | HTMLButtonElement>(null)
+    const forkedRef = useForkedRef(ref, chipRef)
+    const isSelectedControlled = selected !== undefined
+    const [_selected, setSelected] = useState(Boolean(selected))
+    const selectedState = isSelectedControlled ? Boolean(selected) : _selected
+
+    useEffect(() => {
+      if (isSelectedControlled) {
+        setSelected(Boolean(selected))
+      }
+    }, [isSelectedControlled, selected])
+
+    const isFocusable = useMemo(
+      () => Boolean(!disabled && (selectable || removable)),
+      [disabled, selectable, removable]
+    )
+
+    const getFocusableSibling = (shouldGetNext: boolean) => {
+      const currentElement = chipRef.current
+      if (!currentElement?.parentElement) {
+        return null
+      }
+
+      const chips = Array.from(
+        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS)
+      )
+
+      const index = chips.indexOf(currentElement as unknown as HTMLElement)
+      if (index === -1 || chips.length <= 1) {
+        return null
+      }
+
+      const targetIndex = shouldGetNext ? index + 1 : index - 1
+      return chips[targetIndex] ?? null
+    }
+
+    const navigateToEdge = (targetIndex: 0 | -1) => {
+      const currentElement = chipRef.current
+      if (!currentElement?.parentElement) {
+        return
+      }
+
+      const chips = Array.from(
+        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS)
+      )
+      const edgeChip = targetIndex === -1 ? chips[chips.length - 1] : chips[0]
+      edgeChip?.focus()
+    }
+
+    const setSelectableState = (
+      nextSelected: boolean,
+      event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+    ) => {
+      if (!selectable || disabled || nextSelected === selectedState) {
+        return
+      }
+
+      if (!isSelectedControlled) {
+        setSelected(nextSelected)
+      }
+
+      if (nextSelected) {
+        onSelect?.(event)
+      } else {
+        onDeselect?.(event)
+      }
+
+      onSelectedChange?.(nextSelected, event)
+    }
+
+    const toggleSelectedState = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+      setSelectableState(!selectedState, event)
+    }
+
+    const handleRemove = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLElement>) => {
+      onRemove?.(event)
+    }
+
+    const handleRemoveClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+      handleRemove(event)
+    }
+
+    const handleClick = (event: MouseEvent<HTMLElement>) => {
+      if (disabled) {
+        return
+      }
+
+      if ((event.target as HTMLElement).closest('.chip-remove')) {
+        return
+      }
+
+      if (selectable) {
+        toggleSelectedState(event)
+      }
+
+      onClick?.(event)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+      if (disabled) {
+        onKeyDown?.(event)
+        return
+      }
+
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+        case 'Spacebar': {
+          if (selectable) {
+            event.preventDefault()
+            toggleSelectedState(event)
+          }
+          break
+        }
+
+        case 'Backspace':
+        case 'Delete': {
+          if (removable) {
+            event.preventDefault()
+            const sibling = getFocusableSibling(false) || getFocusableSibling(true)
+            sibling?.focus()
+            handleRemove(event)
+          }
+          break
+        }
+
+        case 'ArrowLeft': {
+          event.preventDefault()
+          const sibling = getFocusableSibling(false)
+          sibling?.focus()
+          if (selectedState && event.shiftKey) {
+            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
+          }
+          break
+        }
+
+        case 'ArrowRight': {
+          event.preventDefault()
+          const sibling = getFocusableSibling(true)
+          sibling?.focus()
+          if (selectedState && event.shiftKey) {
+            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
+          }
+          break
+        }
+
+        case 'Home': {
+          event.preventDefault()
+          navigateToEdge(0)
+          break
+        }
+
+        case 'End': {
+          event.preventDefault()
+          navigateToEdge(-1)
+          break
+        }
+
+        // No default
+      }
+
+      onKeyDown?.(event)
+    }
+
+    return (
+      <Component
+        className={classNames(
+          'chip',
+          {
+            active: selectable ? selectedState : active,
+            disabled,
+            [`chip-${color}`]: color,
+            [`chip-${size}`]: size,
+            'chip-clickable': clickable || selectable || Boolean(onClick),
+            'chip-outline': variant === 'outline',
+          },
+          className
+        )}
+        data-coreui-chip-focusable={isFocusable || undefined}
+        {...(disabled && { 'aria-disabled': true })}
+        {...(selectable && { 'aria-selected': selectedState })}
+        {...(isFocusable && tabIndex === undefined && { tabIndex: 0 })}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...(Component === 'button' && { disabled })}
+        {...rest}
+        ref={forkedRef}
+      >
+        {children}
+        {removable && (
+          <button
+            type="button"
+            className="chip-remove"
+            aria-label={ariaRemoveLabel}
+            onClick={handleRemoveClick}
+            tabIndex={-1}
+            disabled={disabled}
+          >
+            {removeIcon ?? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              >
+                <line x1="4" y1="4" x2="12" y2="12" />
+                <line x1="12" y1="4" x2="4" y2="12" />
+              </svg>
+            )}
+          </button>
+        )}
+      </Component>
+    )
+  }
+)
+
+CChip.propTypes = {
+  active: PropTypes.bool,
+  ariaRemoveLabel: PropTypes.string,
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  clickable: PropTypes.bool,
+  color: colorPropType,
+  disabled: PropTypes.bool,
+  onDeselect: PropTypes.func,
+  onRemove: PropTypes.func,
+  onSelect: PropTypes.func,
+  onSelectedChange: PropTypes.func,
+  removable: PropTypes.bool,
+  removeIcon: PropTypes.node,
+  selectable: PropTypes.bool,
+  selected: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  variant: PropTypes.oneOf(['outline']),
+}
+
+CChip.displayName = 'CChip'

package/src/components/chip/__tests__/CChip.spec.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CChip } from '../index'
+
+test('loads and displays CChip component', async () => {
+  const { container } = render(<CChip>Test</CChip>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CChip customize', async () => {
+  const { container } = render(
+    <CChip
+      active={true}
+      className="bazinga"
+      clickable={true}
+      color="warning"
+      as="button"
+      disabled={true}
+      size="lg"
+      variant="outline"
+    >
+      Test
+    </CChip>
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('chip')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveClass('chip-clickable')
+  expect(container.firstChild).toHaveClass('chip-warning')
+  expect(container.firstChild).toHaveClass('chip-lg')
+  expect(container.firstChild).toHaveClass('chip-outline')
+  expect(container.firstChild).toHaveClass('disabled')
+})
+
+test('CChip removable', async () => {
+  const onRemove = jest.fn()
+  const { container } = render(
+    <CChip removable={true} ariaRemoveLabel="Remove test" onRemove={onRemove}>
+      Test
+    </CChip>
+  )
+
+  const removeButton = container.querySelector('.chip-remove')
+  expect(container).toMatchSnapshot()
+  expect(removeButton).toBeInTheDocument()
+  removeButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  expect(onRemove).toHaveBeenCalled()
+})
+
+test('CChip selectable', async () => {
+  const onSelect = jest.fn()
+  const onDeselect = jest.fn()
+  const { getByText } = render(
+    <CChip selectable={true} onSelect={onSelect} onDeselect={onDeselect}>
+      Selectable
+    </CChip>,
+  )
+  const chip = getByText('Selectable')
+
+  expect(chip).toHaveAttribute('aria-selected', 'false')
+  fireEvent.click(chip)
+  expect(chip).toHaveClass('active')
+  expect(chip).toHaveAttribute('aria-selected', 'true')
+  expect(onSelect).toHaveBeenCalledTimes(1)
+
+  fireEvent.keyDown(chip, { key: 'Enter' })
+  expect(chip).not.toHaveClass('active')
+  expect(chip).toHaveAttribute('aria-selected', 'false')
+  expect(onDeselect).toHaveBeenCalledTimes(1)
+})
+
+test('CChip keyboard navigation', async () => {
+  const { getByText } = render(
+    <div>
+      <CChip selectable={true}>First</CChip>
+      <CChip selectable={true}>Second</CChip>
+      <CChip selectable={true}>Third</CChip>
+    </div>,
+  )
+
+  const first = getByText('First')
+  const second = getByText('Second')
+  const third = getByText('Third')
+
+  first.focus()
+  fireEvent.keyDown(first, { key: 'ArrowRight' })
+  expect(second).toHaveFocus()
+
+  fireEvent.keyDown(second, { key: 'End' })
+  expect(third).toHaveFocus()
+
+  fireEvent.keyDown(third, { key: 'Home' })
+  expect(first).toHaveFocus()
+})
+
+test('CChip delete triggers remove callback', async () => {
+  const onRemove = jest.fn()
+  const { getByText } = render(
+    <div>
+      <CChip removable={true} onRemove={onRemove}>
+        First
+      </CChip>
+      <CChip removable={true}>Second</CChip>
+    </div>,
+  )
+
+  const first = getByText('First')
+  first.focus()
+  fireEvent.keyDown(first, { key: 'Delete' })
+  expect(onRemove).toHaveBeenCalledTimes(1)
+})

package/src/components/chip/__tests__/__snapshots__/CChip.spec.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CChip customize 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    class="chip active disabled chip-warning chip-lg chip-clickable chip-outline bazinga"
+    disabled=""
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`CChip removable 1`] = `
+<div>
+  <span
+    class="chip"
+    data-coreui-chip-focusable="true"
+    tabindex="0"
+  >
+    Test
+    <button
+      aria-label="Remove test"
+      class="chip-remove"
+      tabindex="-1"
+      type="button"
+    >
+      <svg
+        fill="none"
+        height="16"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="2"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="4"
+          x2="12"
+          y1="4"
+          y2="12"
+        />
+        <line
+          x1="12"
+          x2="4"
+          y1="4"
+          y2="12"
+        />
+      </svg>
+    </button>
+  </span>
+</div>
+`;
+
+exports[`loads and displays CChip component 1`] = `
+<div>
+  <span
+    class="chip"
+  >
+    Test
+  </span>
+</div>
+`;

package/src/components/chip/index.ts

@@ -0,0 +1,3 @@
+import { CChip } from './CChip'
+
+export { CChip }

package/src/components/dropdown/CDropdown.tsx

@@ -368,7 +368,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         }
 
         const target = event.target as HTMLElement | null
-        const FORM_TAG_RE = /^(input|select|option|textarea|form|button|label)$/i
+        const FORM_TAG_RE = /^(input|select|option|textarea|form)$/i
 
         if (isOnMenu && target && FORM_TAG_RE.test(target.tagName)) {
           return