@coreui/react-pro 4.0.0-rc.1

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Option } from './CMultiSelect'
+
+export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
+  handleOptionOnClick?: (option: Option) => void
+  options: Option[]
+  optionsMaxHeight?: number | string
+  optionsStyle?: 'checkbox' | 'text'
+  searchNoResultsLabel?: string | ReactNode
+}
+
+export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOptionsProps>(
+  ({ handleOptionOnClick, options, optionsMaxHeight, optionsStyle, searchNoResultsLabel }, ref) => {
+    const createOptions = (options: Option[]) => {
+      return options.length > 0 ? (
+        options.map((option: Option, index: number) => {
+          return option.options ? (
+            <div className="form-multi-select-options" key={index}>
+              <div className="form-multi-select-optgroup-label">{option.label}</div>
+              {createOptions(option.options)}
+            </div>
+          ) : (
+            <div
+              className={classNames('form-multi-select-option', {
+                'form-multi-select-option-with-checkbox': optionsStyle === 'checkbox',
+                'form-multi-selected': option.selected,
+                disabled: option.disabled,
+              })}
+              key={index}
+              onClick={() => handleOptionOnClick && handleOptionOnClick(option)}
+            >
+              {option.text}
+            </div>
+          )
+        })
+      ) : (
+        <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
+      )
+    }
+    return (
+      <div
+        className="form-multi-select-options"
+        {...(optionsMaxHeight !== 'auto' && {
+          style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+        })}
+        ref={ref}
+      >
+        {createOptions(options)}
+      </div>
+    )
+  },
+)
+
+CMultiSelectOptions.propTypes = {
+  handleOptionOnClick: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
+  searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+}
+
+CMultiSelectOptions.displayName = 'CMultiSelectOptions'

package/src/components/multi-select/CMultiSelectSearchInput.tsx

@@ -0,0 +1,28 @@
+// TODO: check if component property is necessary.
+
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export interface CMultiSelectSearchInputProps extends HTMLAttributes<HTMLInputElement> {
+  placeholder?: string
+}
+
+export const CMultiSelectSearchInput = forwardRef<HTMLInputElement, CMultiSelectSearchInputProps>(
+  ({ placeholder, ...rest }, ref) => {
+    return (
+      <input
+        type="text"
+        className="form-multi-select-search"
+        placeholder={placeholder}
+        {...rest}
+        ref={ref}
+      ></input>
+    )
+  },
+)
+
+CMultiSelectSearchInput.propTypes = {
+  placeholder: PropTypes.string,
+}
+
+CMultiSelectSearchInput.displayName = 'CMultiSelectSearchInput'

package/src/components/multi-select/CMultiSelectSelectAllButton.tsx

@@ -0,0 +1,21 @@
+// TODO: check if component property is necessary.
+
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export const CMultiSelectSelectAllButton = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement>
+>(({ children, ...rest }, ref) => {
+  return (
+    <button type="button" className="form-multi-select-all" {...rest} ref={ref}>
+      {children}
+    </button>
+  )
+})
+
+CMultiSelectSelectAllButton.propTypes = {
+  children: PropTypes.node,
+}
+
+CMultiSelectSelectAllButton.displayName = 'CMultiSelectSelectAllButton'

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+import { Option } from './CMultiSelect'
+
+export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
+  multiple?: boolean
+  onRemove?: (option: Option) => void
+  search?: boolean
+  selected?: Array<Option>
+  selectionType?: 'counter' | 'tags' | 'text'
+  selectionTypeCounterText?: string
+}
+
+export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSelectionProps>(
+  ({ multiple, onRemove, search, selected = [], selectionType, selectionTypeCounterText }, ref) => {
+    return (
+      <span className="form-multi-select-selection" ref={ref}>
+        {multiple &&
+          selectionType === 'counter' &&
+          !search &&
+          `${selected.length} ${selectionTypeCounterText}`}
+        {multiple &&
+          selectionType === 'tags' &&
+          selected.map((option: Option, index: number) => {
+            if (selectionType === 'tags') {
+              return (
+                <span className="form-multi-select-tag" key={index}>
+                  {option.text}
+                  {!option.disabled && (
+                    <button
+                      className="form-multi-select-tag-delete close"
+                      aria-label="Close"
+                      onClick={() => onRemove && onRemove(option)}
+                    >
+                      <span aria-hidden="true">×</span>
+                    </button>
+                  )}
+                </span>
+              )
+            }
+            return
+          })}
+        {multiple && selectionType === 'text' && selected.map((option) => option.text).join(', ')}
+        {!multiple && !search && selected.map((option) => option.text)[0]}
+      </span>
+    )
+  },
+)
+
+CMultiSelectSelection.propTypes = {
+  multiple: PropTypes.bool,
+  onRemove: PropTypes.func,
+  search: PropTypes.bool,
+  selected: PropTypes.array,
+  selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),
+  selectionTypeCounterText: PropTypes.string,
+}
+
+CMultiSelectSelection.displayName = 'CMultiSelectSelection'

package/src/components/multi-select/__tests__/CMultiSelect.spec.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelect } from '../../../index'
+
+const options = [
+  {
+    text: 'text1',
+    value: 'value1',
+  },
+  {
+    text: 'text3',
+    value: 'value3',
+    selected: true,
+    disabled: true,
+  },
+]
+
+test('loads and displays CMultiSelect component', async () => {
+  const { container } = render(<CMultiSelect options={[]} />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelect customize', async () => {
+  const { container } = render(
+    <CMultiSelect
+      options={options}
+      className="bazinga"
+      cleaner={true}
+      multiple={true}
+      optionsMaxHeight={150}
+      optionsStyle="checkbox"
+      placeholder="placeholder"
+      search={true}
+      searchNoResultsLabel="searchNoResultsLabel"
+      selectAll={true}
+      selectAllLabel="selectAllLabel"
+      selectionType="tags"
+      selectionTypeCounterText="selectionTypeCounterText"
+      visible={true}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveAttribute('multiple', '')
+  expect(container.firstChild).toHaveAttribute('style', 'display: none;')
+  expect(container.firstChild).toHaveAttribute('tabindex', '-1')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveAttribute('value', 'value1')
+    expect(container.firstChild.firstChild).toHaveTextContent('text1')
+    expect(container.firstChild.lastChild).toHaveAttribute('value', 'value3')
+    expect(container.firstChild.lastChild).toHaveTextContent('text3')
+  }
+  expect(container.lastChild).toHaveClass('form-multi-select')
+  expect(container.lastChild).toHaveClass('show')
+  expect(container.lastChild).toHaveClass('form-multi-select-selection-tags')
+  expect(container.lastChild).toHaveClass('bazinga')
+
+  if (container.lastChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.lastChild.firstChild).toHaveClass('form-multi-select-selection')
+    if (container.lastChild.firstChild === null) {
+      expect(true).toBe(false)
+    } else {
+      expect(container.lastChild.firstChild.firstChild).toHaveClass('form-multi-select-tag')
+      expect(container.lastChild.firstChild.firstChild).toHaveTextContent('text3')
+    }
+    expect(container.lastChild.lastChild).toHaveClass('form-multi-select-dropdown')
+    if (container.lastChild.lastChild === null) {
+      expect(true).toBe(false)
+    } else {
+      expect(container.lastChild.lastChild.firstChild).toHaveClass('form-multi-select-all')
+      expect(container.lastChild.lastChild.firstChild).toHaveAttribute('type', 'button')
+      expect(container.lastChild.lastChild.firstChild).toHaveTextContent('selectAllLabel')
+      expect(container.lastChild.lastChild.lastChild).toHaveClass('form-multi-select-options')
+      expect(container.lastChild.lastChild.lastChild).toHaveAttribute(
+        'style',
+        'max-height: 150px; overflow: scroll;',
+      )
+      if (container.lastChild.lastChild.lastChild === null) {
+        expect(true).toBe(false)
+      } else {
+        expect(container.lastChild.lastChild.lastChild.firstChild).toHaveClass(
+          'form-multi-select-option',
+        )
+        expect(container.lastChild.lastChild.lastChild.firstChild).toHaveClass(
+          'form-multi-select-option-with-checkbox',
+        )
+        expect(container.lastChild.lastChild.lastChild.firstChild).toHaveTextContent('text1')
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveClass(
+          'form-multi-select-option',
+        )
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveClass(
+          'form-multi-select-option-with-checkbox',
+        )
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveClass('form-multi-selected')
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveClass('disabled')
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveTextContent('text3')
+      }
+    }
+  }
+})
+
+test('CMultiSelect fire events', async () => {
+  const event = jest.fn()
+  expect(event).toHaveBeenCalledTimes(0)
+  render(
+    <CMultiSelect
+      options={options}
+      className="bazinga"
+      cleaner={true}
+      multiple={true}
+      optionsMaxHeight={150}
+      optionsStyle="checkbox"
+      placeholder="placeholder"
+      search={true}
+      searchNoResultsLabel="searchNoResultsLabel"
+      selectAll={true}
+      selectAllLabel="selectAllLabel"
+      selectionType="tags"
+      selectionTypeCounterText="selectionTypeCounterText"
+      visible={true}
+      onChange={event}
+    />,
+  )
+  expect(event).toHaveBeenCalledTimes(2)
+  const option = document.querySelector('.form-multi-select-option')
+  if (option !== null) {
+    fireEvent.click(option)
+  }
+  expect(event).toHaveBeenCalledTimes(3)
+  const removeButton = document.querySelector('.form-multi-select-tag-delete')
+  if (removeButton !== null) {
+    fireEvent.click(removeButton)
+  }
+  expect(event).toHaveBeenCalledTimes(4)
+})

package/src/components/multi-select/__tests__/CMultiSelectCleaner.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectCleaner } from '../CMultiSelectCleaner'
+
+test('loads and displays CMultiSelectCleaner component', async () => {
+  const { container } = render(<CMultiSelectCleaner />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelectCleaner customize', async () => {
+  const { container } = render(<CMultiSelectCleaner />)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-selection-cleaner')
+})

package/src/components/multi-select/__tests__/CMultiSelectNativeSelect.spec.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectNativeSelect } from '../CMultiSelectNativeSelect'
+import { Option } from '../CMultiSelect'
+
+test('loads and displays CMultiSelectNativeSelect component', async () => {
+  const { container } = render(<CMultiSelectNativeSelect options={[]} />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelectNativeSelect customize', async () => {
+  const options: Option[] = [
+    {
+      text: 'text1',
+      value: 'value1',
+    },
+    {
+      text: 'text2',
+      value: 'value2',
+      disabled: true,
+      label: 'label2',
+      order: 4,
+      selected: true,
+    },
+    {
+      text: 'text3',
+      value: 'value3',
+      order: 3,
+    },
+  ]
+  const { container } = render(
+    <CMultiSelectNativeSelect multiple={true} options={options} value="3" />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/multi-select/__tests__/CMultiSelectOptions.spec.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectOptions } from '../CMultiSelectOptions'
+import { Option } from '../CMultiSelect'
+
+const options: Option[] = [
+  {
+    text: 'text1',
+    value: 'value1',
+    selected: true,
+    disabled: true,
+  },
+  {
+    text: 'text3',
+    value: 'value3',
+  },
+]
+
+test('loads and displays CMultiSelectOptions component', async () => {
+  const { container } = render(
+    <CMultiSelectOptions options={[]} searchNoResultsLabel="some no result label" />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-options')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('form-multi-select-options-empty')
+    expect(container.firstChild.firstChild).toHaveTextContent('some no result label')
+  }
+})
+
+test('CMultiSelectOptions customize', async () => {
+  const { container } = render(
+    <CMultiSelectOptions
+      options={options}
+      optionsMaxHeight="200"
+      optionsStyle="checkbox"
+      searchNoResultsLabel="some - searchNoResultsLabel"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-options')
+  expect(container.firstChild).toHaveAttribute('style', 'max-height: 200; overflow: scroll;')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('form-multi-select-option')
+    expect(container.firstChild.firstChild).toHaveClass('form-multi-select-option-with-checkbox')
+    expect(container.firstChild.firstChild).toHaveClass('form-multi-selected')
+    expect(container.firstChild.firstChild).toHaveClass('disabled')
+    expect(container.firstChild.firstChild).toHaveTextContent('text1')
+    expect(container.firstChild.lastChild).toHaveClass('form-multi-select-option')
+    expect(container.firstChild.lastChild).toHaveClass('form-multi-select-option-with-checkbox')
+    expect(container.firstChild.lastChild).toHaveTextContent('text3')
+  }
+})
+
+test('CMultiSelectOptions handle on click', async () => {
+  const onClick = jest.fn()
+  render(<CMultiSelectOptions options={options} handleOptionOnClick={onClick} />)
+  expect(onClick).toHaveBeenCalledTimes(0)
+  const option = document.querySelector('.form-multi-select-option')
+  if (option !== null) {
+    fireEvent.click(option)
+  }
+  expect(onClick).toHaveBeenCalledTimes(1)
+})

package/src/components/multi-select/__tests__/CMultiSelectSearchInput.spec.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectSearchInput } from '../CMultiSelectSearchInput'
+
+test('loads and displays CMultiSelectSearchInput component', async () => {
+  const { container } = render(<CMultiSelectSearchInput />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelectSearchInput customize', async () => {
+  const { container } = render(<CMultiSelectSearchInput placeholder="some placeholder" />)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-search')
+  expect(container.firstChild).toHaveAttribute('type', 'text')
+  expect(container.firstChild).toHaveAttribute('placeholder', 'some placeholder')
+})

package/src/components/multi-select/__tests__/CMultiSelectSelectAllButton.spec.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectSelectAllButton } from '../CMultiSelectSelectAllButton'
+
+test('loads and displays CMultiSelectSelectAllButton component', async () => {
+  const { container } = render(<CMultiSelectSelectAllButton>text</CMultiSelectSelectAllButton>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelectSelectAllButton customize', async () => {
+  const { container } = render(
+    <CMultiSelectSelectAllButton placeholder="some placeholder">
+      bazinga
+    </CMultiSelectSelectAllButton>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-all')
+  expect(container.firstChild).toHaveAttribute('type', 'button')
+  expect(container.firstChild).toHaveTextContent('bazinga')
+})

package/src/components/multi-select/__tests__/CMultiSelectSelection.spec.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CMultiSelectSelection } from '../CMultiSelectSelection'
+
+const selected = [
+  {
+    text: 'text1',
+    value: 'value1',
+  },
+  {
+    text: 'text2',
+    value: 'value2',
+    disabled: true,
+  },
+]
+
+test('loads and displays CMultiSelectSelection component', async () => {
+  const { container } = render(<CMultiSelectSelection />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CMultiSelectSelection customize tags', async () => {
+  const { container } = render(
+    <CMultiSelectSelection
+      multiple={true}
+      search={true}
+      selected={selected}
+      selectionType="tags"
+      selectionTypeCounterText="text"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-selection')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('form-multi-select-tag')
+    expect(container.firstChild.lastChild).toHaveClass('form-multi-select-tag')
+    if (container.firstChild.firstChild === null) {
+      expect(true).toBe(false)
+    } else {
+      expect(container.firstChild.firstChild.lastChild).toHaveClass('form-multi-select-tag-delete')
+      expect(container.firstChild.firstChild.lastChild).toHaveClass('close')
+      expect(container.firstChild.firstChild.lastChild).toHaveAttribute('aria-label', 'Close')
+      if (container.firstChild.firstChild.lastChild === null) {
+        expect(true).toBe(false)
+      } else {
+        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveAttribute(
+          'aria-hidden',
+          'true',
+        )
+        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('×')
+      }
+    }
+  }
+})
+
+test('CMultiSelectSelection customize counter', async () => {
+  const { container } = render(
+    <CMultiSelectSelection
+      multiple={true}
+      search={false}
+      selected={selected}
+      selectionType="counter"
+      selectionTypeCounterText="text"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-selection')
+  expect(container.firstChild).toHaveTextContent('2 text')
+})
+
+test('CMultiSelectSelection customize text', async () => {
+  const { container } = render(
+    <CMultiSelectSelection
+      multiple={true}
+      search={true}
+      selected={selected}
+      selectionType="text"
+      selectionTypeCounterText="text"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-multi-select-selection')
+  expect(container.firstChild).toHaveTextContent('text1, text2')
+})
+
+test('CMultiSelectSelection test remove event', async () => {
+  const onRemove = jest.fn()
+  render(
+    <CMultiSelectSelection
+      multiple={true}
+      selected={selected}
+      selectionType="tags"
+      onRemove={onRemove}
+    />,
+  )
+  expect(onRemove).toHaveBeenCalledTimes(0)
+  const removeButton = document.querySelector('.form-multi-select-tag-delete')
+  if (removeButton !== null) {
+    fireEvent.click(removeButton)
+  }
+  expect(onRemove).toHaveBeenCalledTimes(1)
+})