@coreui/react-pro 5.17.1 → 5.19.0

package/src/components/autocomplete/CAutocompleteOptions.tsx

@@ -0,0 +1,165 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CElementCover } from '../element-cover'
+import { CVirtualScroller } from '../virtual-scroller'
+
+import { getNextSibling, getPreviousSibling } from '../../utils'
+
+import type { Option, OptionsGroup } from './types'
+import { getOptionLabel, highlightSubstring, isOptionDisabled, isOptionSelected } from './utils'
+
+export interface CAutocompleteOptionsProps extends HTMLAttributes<HTMLDivElement> {
+  highlightOptionsOnSearch?: boolean
+  loading?: boolean
+  onOptionClick?: (option: Option) => void
+  options: (Option | OptionsGroup)[]
+  optionsMaxHeight?: number | string
+  optionsTemplate?: (option: Option) => ReactNode
+  optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
+  searchNoResultsLabel?: boolean | string | ReactNode
+  searchValue?: string
+  selected: Option | null
+  virtualScroller?: boolean
+  visibleItems?: number
+}
+
+export const CAutocompleteOptions = forwardRef<HTMLDivElement, CAutocompleteOptionsProps>(
+  (
+    {
+      highlightOptionsOnSearch,
+      loading,
+      onOptionClick,
+      options,
+      optionsMaxHeight,
+      optionsTemplate,
+      optionsGroupsTemplate,
+      searchNoResultsLabel,
+      searchValue,
+      selected,
+      virtualScroller,
+      visibleItems = 10,
+    },
+    ref
+  ) => {
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, option: Option) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        onOptionClick?.(option)
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const next = getNextSibling(
+          target,
+          '.autocomplete-option:not(.disabled):not(:disabled)'
+        ) as HTMLElement | null
+
+        if (next) {
+          next.focus()
+        }
+      }
+
+      if (event.key === 'Up' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const prev = getPreviousSibling(
+          target,
+          '.autocomplete-option:not(.disabled):not(:disabled)'
+        ) as HTMLElement | null
+
+        if (prev) {
+          prev.focus()
+        }
+      }
+    }
+
+    const createOption = (option: Option, index: number) => (
+      <div
+        className={classNames('autocomplete-option', {
+          disabled: isOptionDisabled(option),
+          selected: isOptionSelected(option, selected),
+        })}
+        key={index}
+        onClick={() => onOptionClick && onOptionClick(option as Option)}
+        onKeyDown={(event) => handleKeyDown(event, option as Option)}
+        tabIndex={0}
+      >
+        {optionsTemplate ? (
+          optionsTemplate(option as Option)
+        ) : highlightOptionsOnSearch ? (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: highlightSubstring(getOptionLabel(option), searchValue),
+            }}
+          ></div>
+        ) : (
+          getOptionLabel(option)
+        )}
+      </div>
+    )
+
+    const createOptions = (options: (Option | OptionsGroup)[]): JSX.Element | JSX.Element[] =>
+      options.length > 0 ? (
+        options.map((option: Option | OptionsGroup | string, index: number) =>
+          typeof option !== 'string' && 'options' in option ? (
+            <React.Fragment key={index}>
+              <div className="autocomplete-optgroup-label">
+                {optionsGroupsTemplate
+                  ? optionsGroupsTemplate(option as OptionsGroup)
+                  : option.label}
+              </div>
+              {option.options.map((option: Option, index: number) => createOption(option, index))}
+            </React.Fragment>
+          ) : (
+            createOption(option as Option, index)
+          )
+        )
+      ) : (
+        <div className="autocomplete-options-empty">{searchNoResultsLabel}</div>
+      )
+
+    return (
+      <>
+        {virtualScroller ? (
+          <CVirtualScroller
+            className="autocomplete-options"
+            visibleItems={visibleItems}
+            role="listbox"
+            ref={ref}
+          >
+            {createOptions(options)}
+          </CVirtualScroller>
+        ) : (
+          <div
+            className="autocomplete-options"
+            {...(optionsMaxHeight !== 'auto' && {
+              style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+            })}
+            role="listbox"
+            ref={ref}
+          >
+            {createOptions(options)}
+          </div>
+        )}
+        {loading && <CElementCover />}
+      </>
+    )
+  }
+)
+
+CAutocompleteOptions.propTypes = {
+  loading: PropTypes.bool,
+  onOptionClick: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  optionsTemplate: PropTypes.func,
+  optionsGroupsTemplate: PropTypes.func,
+  searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  virtualScroller: PropTypes.bool,
+  visibleItems: PropTypes.number,
+}
+
+CAutocompleteOptions.displayName = 'CAutocompleteOptions'

package/src/components/autocomplete/__tests__/CAutocomplete.spec.tsx

@@ -0,0 +1,244 @@
+import * as React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CAutocomplete } from '../CAutocomplete'
+
+const mockOptions = [
+  { label: 'Apple', value: 1 },
+  { label: 'Banana', value: 2 },
+  { label: 'Cherry', value: 3 },
+  { label: 'Date', value: 4 },
+]
+
+const mockOptionsWithGroups = [
+  {
+    label: 'Fruits',
+    options: [
+      { label: 'Apple', value: 1 },
+      { label: 'Banana', value: 2 },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { label: 'Carrot', value: 3 },
+      { label: 'Spinach', value: 4 },
+    ],
+  },
+]
+
+test('loads and displays CAutocomplete component', async () => {
+  const { container } = render(<CAutocomplete options={mockOptions} />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CAutocomplete customize', async () => {
+  const { container } = render(
+    <CAutocomplete
+      className="bazinga"
+      disabled={true}
+      size="lg"
+      placeholder="Select option"
+      options={mockOptions}
+      cleaner={true}
+      indicator={true}
+    />
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.querySelector('.autocomplete')).toHaveClass('bazinga')
+  expect(container.querySelector('.autocomplete')).toHaveClass('autocomplete-lg')
+  expect(container.querySelector('.autocomplete')).toHaveClass('disabled')
+})
+
+test('CAutocomplete renders input with placeholder', async () => {
+  render(<CAutocomplete options={mockOptions} placeholder="Type to search..." />)
+  const input = screen.getByRole('combobox')
+  expect(input).toHaveAttribute('placeholder', 'Type to search...')
+})
+
+test('CAutocomplete opens dropdown on input click', async () => {
+  render(<CAutocomplete options={mockOptions} />)
+  const input = screen.getByRole('combobox')
+
+  fireEvent.click(input)
+
+  await waitFor(() => {
+    const listbox = screen.getByRole('listbox')
+    expect(listbox).toBeVisible()
+  })
+})
+
+test('CAutocomplete filters options on input change', async () => {
+  render(<CAutocomplete options={mockOptions} />)
+  const input = screen.getByRole('combobox')
+
+  fireEvent.change(input, { target: { value: 'app' } })
+
+  await waitFor(() => {
+    const option = screen.getByText('Apple')
+    expect(option).toBeVisible()
+    expect(screen.queryByText('Banana')).not.toBeInTheDocument()
+  })
+})
+
+test('CAutocomplete selects option on click', async () => {
+  const onChange = jest.fn()
+  render(<CAutocomplete options={mockOptions} onChange={onChange} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.click(input)
+
+  await waitFor(() => {
+    const option = screen.getByText('Apple')
+    fireEvent.click(option)
+    expect(onChange).toHaveBeenCalledWith(mockOptions[0])
+  })
+})
+
+test('CAutocomplete selects option on Enter key', async () => {
+  const onChange = jest.fn()
+  render(<CAutocomplete options={mockOptions} onChange={onChange} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'Apple' } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+
+  expect(onChange).toHaveBeenCalledWith(mockOptions[0])
+})
+
+test('CAutocomplete closes dropdown on Escape key', async () => {
+  render(<CAutocomplete options={mockOptions} />)
+  const input = screen.getByRole('combobox')
+
+  fireEvent.click(input)
+
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toBeVisible()
+  })
+
+  fireEvent.keyDown(input, { key: 'Escape' })
+
+  await waitFor(() => {
+    expect(input).toHaveAttribute('aria-expanded', 'false')
+  })
+})
+
+test('CAutocomplete navigates options with arrow keys', async () => {
+  render(<CAutocomplete options={mockOptions} />)
+  const input = screen.getByRole('combobox')
+
+  fireEvent.click(input)
+
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toBeVisible()
+  })
+
+  fireEvent.keyDown(input, { key: 'ArrowDown' })
+
+  const firstOption = screen.getByText('Apple')
+  expect(firstOption).toHaveFocus()
+})
+
+test('CAutocomplete shows cleaner button when option selected', async () => {
+  render(<CAutocomplete options={mockOptions} cleaner={true} value={1} />)
+
+  const cleanerButton = screen.getByRole('button', { name: '' })
+  expect(cleanerButton).toHaveClass('autocomplete-cleaner')
+})
+
+test('CAutocomplete clears selection when cleaner clicked', async () => {
+  const onChange = jest.fn()
+  render(<CAutocomplete options={mockOptions} cleaner={true} value={1} onChange={onChange} />)
+
+  const cleanerButton = screen.getByRole('button', { name: '' })
+  fireEvent.click(cleanerButton)
+
+  expect(onChange).toHaveBeenCalledWith(undefined)
+})
+
+test('CAutocomplete shows no results message', async () => {
+  render(<CAutocomplete options={mockOptions} searchNoResultsLabel="No options found" />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'xyz' } })
+
+  await waitFor(() => {
+    expect(screen.getByText('No options found')).toBeVisible()
+  })
+})
+
+test('CAutocomplete renders option groups', async () => {
+  render(<CAutocomplete options={mockOptionsWithGroups} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.click(input)
+
+  await waitFor(() => {
+    expect(screen.getByText('Fruits')).toBeVisible()
+    expect(screen.getByText('Vegetables')).toBeVisible()
+    expect(screen.getByText('Apple')).toBeVisible()
+    expect(screen.getByText('Carrot')).toBeVisible()
+  })
+})
+
+test('CAutocomplete shows hint when enabled', async () => {
+  render(<CAutocomplete options={mockOptions} showHints={true} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'ap' } })
+
+  await waitFor(() => {
+    const hintInput = screen.getByDisplayValue('apple')
+    expect(hintInput).toHaveClass('autocomplete-selection-hint')
+  })
+})
+
+test('CAutocomplete allows custom values when allowOnlyDefinedOptions is false', async () => {
+  const onChange = jest.fn()
+  render(
+    <CAutocomplete options={mockOptions} onChange={onChange} allowOnlyDefinedOptions={false} />
+  )
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'Custom Value' } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+
+  expect(onChange).toHaveBeenCalledWith('Custom Value')
+})
+
+test('CAutocomplete prevents custom values when allowOnlyDefinedOptions is true', async () => {
+  const onChange = jest.fn()
+  render(<CAutocomplete options={mockOptions} onChange={onChange} allowOnlyDefinedOptions={true} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'Custom Value' } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+
+  expect(onChange).not.toHaveBeenCalled()
+})
+
+test('CAutocomplete highlights search matches', async () => {
+  render(<CAutocomplete options={mockOptions} highlightOptionsOnSearch={true} />)
+
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'app' } })
+
+  await waitFor(() => {
+    const option = screen.getByText('Apple')
+    expect(option.closest('.autocomplete-option')).toBeInTheDocument()
+  })
+})
+
+test('CAutocomplete is disabled when disabled prop is true', async () => {
+  render(<CAutocomplete options={mockOptions} disabled={true} />)
+
+  const input = screen.getByRole('combobox')
+  expect(input).toBeDisabled()
+})
+
+test('CAutocomplete is readonly when readOnly prop is true', async () => {
+  render(<CAutocomplete options={mockOptions} readOnly={true} />)
+
+  const input = screen.getByRole('combobox')
+  expect(input).toHaveAttribute('readonly')
+})

package/src/components/autocomplete/__tests__/CAutocompleteOptions.spec.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CAutocompleteOptions } from '../CAutocompleteOptions'
+
+const mockOptions = [
+  { label: 'Apple', value: 1 },
+  { label: 'Banana', value: 2 },
+  { label: 'Cherry', value: 3 },
+  { label: 'Date', value: 4 },
+]
+
+const mockOptionsWithGroups = [
+  {
+    label: 'Fruits',
+    options: [
+      { label: 'Apple', value: 1 },
+      { label: 'Banana', value: 2 },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { label: 'Carrot', value: 3 },
+      { label: 'Spinach', value: 4 },
+    ],
+  },
+]
+
+test('loads and displays CAutocompleteOptions component', async () => {
+  const { container } = render(<CAutocompleteOptions options={mockOptions} selected={[]} />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CAutocompleteOptions renders all options', async () => {
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} />)
+
+  expect(screen.getByText('Apple')).toBeVisible()
+  expect(screen.getByText('Banana')).toBeVisible()
+  expect(screen.getByText('Cherry')).toBeVisible()
+  expect(screen.getByText('Date')).toBeVisible()
+})
+
+test('CAutocompleteOptions renders option groups', async () => {
+  render(<CAutocompleteOptions options={mockOptionsWithGroups} selected={[]} />)
+
+  expect(screen.getByText('Fruits')).toBeVisible()
+  expect(screen.getByText('Vegetables')).toBeVisible()
+  expect(screen.getByText('Apple')).toBeVisible()
+  expect(screen.getByText('Carrot')).toBeVisible()
+})
+
+test('CAutocompleteOptions marks selected option', async () => {
+  render(<CAutocompleteOptions options={mockOptions} selected={[mockOptions[0]]} />)
+
+  const selectedOption = screen.getByText('Apple').closest('.autocomplete-option')
+  expect(selectedOption).toHaveClass('selected')
+})
+
+test('CAutocompleteOptions calls onOptionClick when option clicked', async () => {
+  const onOptionClick = jest.fn()
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} onOptionClick={onOptionClick} />)
+
+  const option = screen.getByText('Apple')
+  fireEvent.click(option)
+
+  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
+})
+
+test('CAutocompleteOptions handles Enter key press', async () => {
+  const onOptionClick = jest.fn()
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} onOptionClick={onOptionClick} />)
+
+  const option = screen.getByText('Apple')
+  fireEvent.keyDown(option, { key: 'Enter' })
+
+  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
+})
+
+test('CAutocompleteOptions handles Space key press', async () => {
+  const onOptionClick = jest.fn()
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} onOptionClick={onOptionClick} />)
+
+  const option = screen.getByText('Apple')
+  fireEvent.keyDown(option, { code: 'Space' })
+
+  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
+})
+
+test('CAutocompleteOptions navigates with arrow keys', async () => {
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} />)
+
+  const firstOption = screen.getByText('Apple')
+  const secondOption = screen.getByText('Banana')
+
+  firstOption.focus()
+  fireEvent.keyDown(firstOption, { key: 'ArrowDown' })
+
+  expect(document.activeElement).toBe(secondOption)
+})
+
+test('CAutocompleteOptions shows no results message', async () => {
+  render(
+    <CAutocompleteOptions options={[]} selected={[]} searchNoResultsLabel="No options found" />
+  )
+
+  expect(screen.getByText('No options found')).toBeVisible()
+})
+
+test('CAutocompleteOptions highlights search matches', async () => {
+  render(
+    <CAutocompleteOptions
+      options={mockOptions}
+      selected={[]}
+      highlightOptionsOnSearch={true}
+      searchValue="app"
+    />
+  )
+
+  const option = screen.getByText('Apple').closest('.autocomplete-option')
+  expect(option).toContainHTML('dangerouslySetInnerHTML')
+})
+
+test('CAutocompleteOptions uses custom option template', async () => {
+  const customTemplate = (option) => (
+    <div className="custom-option">
+      {option.label} - {option.value}
+    </div>
+  )
+
+  render(
+    <CAutocompleteOptions options={mockOptions} selected={[]} optionsTemplate={customTemplate} />
+  )
+
+  expect(screen.getByText('Apple - 1')).toBeVisible()
+  expect(screen.getByText('Banana - 2')).toBeVisible()
+})
+
+test('CAutocompleteOptions uses custom group template', async () => {
+  const customGroupTemplate = (group) => (
+    <div className="custom-group">{group.label.toUpperCase()}</div>
+  )
+
+  render(
+    <CAutocompleteOptions
+      options={mockOptionsWithGroups}
+      selected={[]}
+      optionsGroupsTemplate={customGroupTemplate}
+    />
+  )
+
+  expect(screen.getByText('FRUITS')).toBeVisible()
+  expect(screen.getByText('VEGETABLES')).toBeVisible()
+})
+
+test('CAutocompleteOptions shows loading state', async () => {
+  const { container } = render(
+    <CAutocompleteOptions options={mockOptions} selected={[]} loading={true} />
+  )
+
+  expect(container.querySelector('.element-cover')).toBeInTheDocument()
+})
+
+test('CAutocompleteOptions renders with virtual scroller', async () => {
+  const { container } = render(
+    <CAutocompleteOptions
+      options={mockOptions}
+      selected={[]}
+      virtualScroller={true}
+      visibleItems={2}
+    />
+  )
+
+  expect(container.querySelector('.virtual-scroller')).toBeInTheDocument()
+})
+
+test('CAutocompleteOptions sets max height', async () => {
+  const { container } = render(
+    <CAutocompleteOptions options={mockOptions} selected={[]} optionsMaxHeight={200} />
+  )
+
+  const optionsContainer = container.querySelector('.autocomplete-options')
+  expect(optionsContainer).toHaveStyle('max-height: 200px')
+})
+
+test('CAutocompleteOptions marks disabled options', async () => {
+  const optionsWithDisabled = [
+    { label: 'Apple', value: 1 },
+    { label: 'Banana', value: 2, disabled: true },
+  ]
+
+  render(<CAutocompleteOptions options={optionsWithDisabled} selected={[]} />)
+
+  const disabledOption = screen.getByText('Banana').closest('.autocomplete-option')
+  expect(disabledOption).toHaveClass('disabled')
+})
+
+test('CAutocompleteOptions has correct accessibility attributes', async () => {
+  render(<CAutocompleteOptions options={mockOptions} selected={[]} />)
+
+  const listbox = screen.getByRole('listbox')
+  expect(listbox).toBeInTheDocument()
+
+  const options = screen.getAllByRole('option')
+  expect(options).toHaveLength(4)
+
+  options.forEach((option) => {
+    expect(option).toHaveAttribute('tabIndex', '0')
+  })
+})

package/src/components/autocomplete/index.ts

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

package/src/components/autocomplete/types.ts

@@ -0,0 +1,25 @@
+export type Option =
+  | string
+  | {
+      disabled?: boolean
+      label: string
+      options?: Option[]
+      custom?: boolean
+      selected?: boolean
+      value?: number | string
+      [key: string]: unknown
+    }
+
+export type OptionsGroup = {
+  label: string
+  options?: Option[]
+  [key: string]: unknown
+}
+
+export type Search =
+  | 'external'
+  | 'global'
+  | {
+      external?: boolean
+      global?: boolean
+    }