@coreui/react-pro 4.0.0-rc.1

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

package/src/components/modal/__tests__/CModalHeader.spec.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModalHeader } from '../../../index'
+
+test('loads and displays CModalHeader component', async () => {
+  const { container } = render(<CModalHeader>Test</CModalHeader>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalHeader customize', async () => {
+  const { container } = render(<CModalHeader className="bazinga">Test</CModalHeader>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-header')
+})
+
+test('CModalHeader has a close button', async () => {
+  const onDismiss = jest.fn()
+  render(<CModalHeader className="bazinga">Test</CModalHeader>)
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const btn = document.querySelector('.btn-close')
+  expect(btn).toBeTruthy()
+})

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

package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModal customize 1`] = `
+<div>
+  <div />
+</div>
+`;
+
+exports[`loads and displays CModal component 1`] = `
+<div>
+  <div />
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalDialog customize 1`] = `
+<div>
+  <div
+    class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-xl bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalDialog component 1`] = `
+<div>
+  <div
+    class="modal-dialog"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalHeader customize 1`] = `
+<div>
+  <div
+    class="modal-header bazinga"
+  >
+    Test
+    <button
+      aria-label="Close"
+      class="btn btn-close"
+    />
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalHeader component 1`] = `
+<div>
+  <div
+    class="modal-header"
+  >
+    Test
+    <button
+      aria-label="Close"
+      class="btn btn-close"
+    />
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalTitle customize 1`] = `
+<div>
+  <h3
+    class="modal-title bazinga"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`loads and displays CModalTitle component 1`] = `
+<div>
+  <h5
+    class="modal-title"
+  >
+    Test
+  </h5>
+</div>
+`;

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

@@ -0,0 +1,399 @@
+import React, {
+  FormEvent,
+  forwardRef,
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+  useEffect,
+  useState,
+  useRef,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+
+import { CMultiSelectCleaner } from './CMultiSelectCleaner'
+import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
+import { CMultiSelectOptions } from './CMultiSelectOptions'
+import { CMultiSelectSearchInput } from './CMultiSelectSearchInput'
+import { CMultiSelectSelectAllButton } from './CMultiSelectSelectAllButton'
+import { CMultiSelectSelection } from './CMultiSelectSelection'
+
+export interface CMultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Enables selection cleaner element. [docs]
+   *
+   * @default true
+   */
+  cleaner?: boolean
+  /**
+   * It specifies that multiple options can be selected at once. [docs]
+   *
+   * @default true
+   */
+  multiple?: boolean
+  /**
+   * Execute a function when a user changes the selected option. [docs]
+   */
+  onChange?: (selected: Option[]) => void
+  /**
+   * List of option elements. [docs]
+   */
+  options: Option[]
+  /**
+   * Sets maxHeight of options list. [docs]
+   *
+   * @default 'auto'
+   */
+  optionsMaxHeight?: number | string
+  /**
+   * Sets option style. [docs]
+   *
+   * @default 'checkbox'
+   */
+  optionsStyle?: 'checkbox' | 'text'
+  /**
+   * Specifies a short hint that is visible in the search input. [docs]
+   *
+   * @default 'Select...''
+   */
+  placeholder?: string
+  /**
+   * Enables search input element. [docs]
+   */
+  search?: boolean
+  /**
+   * Sets the label for no results when filtering. [docs]
+   */
+  searchNoResultsLabel?: string | ReactNode
+  /**
+   * Enables select all button. [docs]
+   *
+   * @default true
+   */
+  selectAll?: boolean
+  /**
+   * Sets the select all button label. [docs]
+   *
+   * @default 'Select all options'
+   */
+  selectAllLabel?: string | ReactNode
+  /**
+   * Sets the selection style. [docs]
+   *
+   * @default 'tags'
+   */
+  selectionType?: 'counter' | 'tags' | 'text'
+  /**
+   * Sets the counter selection label. [docs]
+   *
+   * @default 'item(s) selected'
+   */
+  selectionTypeCounterText?: string
+  /**
+   * Toggle the visibility of multi select dropdown. [docs]
+   *
+   * @default false
+   */
+  visible?: boolean
+}
+
+export interface Option {
+  disabled?: boolean
+  label?: string
+  options?: Option[]
+  order?: number
+  selected?: boolean
+  text: string
+  value: number | string
+}
+
+const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
+const getSelectedOptions = (options: Option[]) => {
+  return flattenArray(options).filter((option: Option) => {
+    if (option.selected) {
+      return option
+    }
+    return
+  })
+}
+
+export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
+  (
+    {
+      className,
+      cleaner = true,
+      multiple = true,
+      onChange,
+      options,
+      optionsMaxHeight = 'auto',
+      optionsStyle = 'checkbox',
+      placeholder = 'Select...',
+      search = true,
+      searchNoResultsLabel = 'No results found',
+      selectAll = true,
+      selectAllLabel = 'Select all options',
+      selectionType = 'tags',
+      selectionTypeCounterText = 'item(s) selected',
+      visible = false,
+    },
+    ref,
+  ) => {
+    const multiSelectRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, multiSelectRef)
+
+    const nativeSelectRef = useRef<HTMLSelectElement>(null)
+    const searchRef = useRef<HTMLInputElement>(null)
+
+    const [_options, setOptions] = useState<Option[]>(options)
+    const [_vOptions, setVOptions] = useState<Option[]>(options)
+    const [_search, setSearch] = useState('')
+    const [_visible, setVisible] = useState(visible)
+
+    const [selected, setSelected] = useState<Option[]>([])
+    const [count, setCount] = useState<number>(0)
+
+    useEffect(() => {
+      const selected = _options && getSelectedOptions(_options)
+
+      selected.sort((a: Option, b: Option) => {
+        if (typeof a.order === 'undefined') {
+          return -1
+        }
+        if (b.order && a.order > b.order) return 1
+        if (b.order && a.order < b.order) return -1
+        return 0
+      })
+      setSelected(selected)
+    }, [_options, options])
+
+    useEffect(() => {
+      setVOptions(filterOptionsList(_search, _options))
+    }, [_options, _search])
+
+    useEffect(() => {
+      nativeSelectRef.current &&
+        nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
+    }, [selected])
+
+    useEffect(() => {
+      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('keyup', handleKeyup)
+
+      return () => {
+        window.removeEventListener('click', handleClickOutside)
+        window.removeEventListener('keyup', handleKeyup)
+      }
+    })
+
+    const _className = classNames(
+      'form-multi-select',
+      {
+        show: _visible,
+        'form-multi-select-selection-tags': multiple && selectionType === 'tags',
+      },
+      className,
+    )
+
+    const updateOptions = (value: number | string, options: Option[] = _options): Option[] => {
+      return multiple && options
+        ? options &&
+            options.map((option: Option) => {
+              setCount(count + 1)
+              return option.options
+                ? { ...option, options: updateOptions(value, option.options) }
+                : option.value == value // TODO: find solution
+                ? { ...option, selected: !option.selected, order: count }
+                : { ...option }
+            })
+        : options &&
+            options.map((option: Option) => {
+              return option.options
+                ? { ...option, options: updateOptions(value, option.options) }
+                : option.value == value // TODO: find solution
+                ? { ...option, selected: true }
+                : { ...option, selected: false }
+            })
+    }
+
+    const toggleAllOptions = (
+      options: Option[],
+      selected: boolean,
+      counter: number = count,
+    ): Option[] => {
+      return options.map((option: Option) => {
+        !option.selected && counter++
+        setCount(counter)
+        if (option.options) {
+          return {
+            ...option,
+            options: toggleAllOptions(option.options, selected, counter),
+          }
+        }
+        return option.disabled
+          ? { ...option }
+          : selected && !option.selected
+          ? { ...option, selected: selected, order: counter }
+          : { ...option, selected: selected }
+      })
+    }
+
+    const filterOptionsList = (search: string, options = _vOptions) => {
+      return search.length
+        ? options &&
+            options.reduce((acc: Option[], val: Option) => {
+              const options =
+                val.options &&
+                val.options.filter(
+                  (element) =>
+                    element.text && element.text.toLowerCase().includes(search.toLowerCase()),
+                )
+
+              if (
+                (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
+                (options && options.length)
+              ) {
+                acc.push(Object.assign({}, val, options && options.length && { options }))
+              }
+
+              return acc
+            }, [])
+        : _options
+    }
+
+    const handleKeyup = (event: Event) => {
+      if (multiSelectRef.current && !multiSelectRef.current.contains(event.target as HTMLElement)) {
+        setVisible(false)
+      }
+    }
+    const handleClickOutside = (event: Event) => {
+      if (multiSelectRef.current && !multiSelectRef.current.contains(event.target as HTMLElement)) {
+        setVisible(false)
+      }
+    }
+
+    const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
+      const target = event.target as HTMLInputElement
+      setSearch(target.value.toLowerCase())
+    }
+
+    const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      if (_search.length) return
+
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        const last = selected.filter((option: Option) => !option.disabled).pop()
+        last && setSelected(selected.filter((option: Option) => option.value !== last.value))
+        last && setOptions(updateOptions(last.value))
+      }
+    }
+
+    const handleOptionOnClick = (option: Option) => {
+      setOptions(updateOptions(option.value))
+    }
+
+    const handleSelectAll = () => {
+      setOptions(toggleAllOptions(_options, true))
+    }
+
+    const handleDeselectAll = () => {
+      setOptions(toggleAllOptions(_options, false))
+    }
+
+    return (
+      <>
+        <CMultiSelectNativeSelect
+          multiple={multiple}
+          options={_options}
+          value={
+            multiple
+              ? selected.map((option: Option) => option.value.toString())
+              : selected.map((option: Option) => option.value)[0]
+          }
+          onChange={() => onChange && onChange(selected)}
+          ref={nativeSelectRef}
+        />
+        <div
+          className={_className}
+          ref={forkedRef}
+          onClick={() => {
+            setVisible(true)
+            search && searchRef.current?.focus()
+          }}
+        >
+          <CMultiSelectSelection
+            multiple={multiple}
+            onRemove={(option) => handleOptionOnClick(option)}
+            search={search}
+            selected={selected}
+            selectionType={selectionType}
+            selectionTypeCounterText={selectionTypeCounterText}
+          />
+          {multiple && cleaner && selected.length > 0 && (
+            <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
+          )}
+          {search && (
+            <CMultiSelectSearchInput
+              {...(selected.length === 0 && { placeholder: placeholder })}
+              {...(selected.length &&
+                selectionType === 'counter' && {
+                  placeholder: `${selected.length} ${selectionTypeCounterText}`,
+                })}
+              {...(selected.length &&
+                !multiple && { placeholder: selected.map((option) => option.text)[0] })}
+              onChange={(event) => handleSearchChange(event)}
+              onKeyDown={(event) => handleSearchKeyDown(event)}
+              {...(multiple &&
+                selected.length &&
+                selectionType !== 'counter' && { size: _search.length + 2 })}
+              ref={searchRef}
+            />
+          )}
+          <div className="form-multi-select-dropdown">
+            {multiple && selectAll && (
+              <CMultiSelectSelectAllButton onClick={() => handleSelectAll()}>
+                {selectAllLabel}
+              </CMultiSelectSelectAllButton>
+            )}
+            <CMultiSelectOptions
+              handleOptionOnClick={(option) => handleOptionOnClick(option)}
+              options={_vOptions}
+              optionsMaxHeight={optionsMaxHeight}
+              optionsStyle={optionsStyle}
+              searchNoResultsLabel={searchNoResultsLabel}
+            />
+          </div>
+        </div>
+      </>
+    )
+  },
+)
+
+CMultiSelect.propTypes = {
+  className: PropTypes.string,
+  cleaner: PropTypes.bool,
+  multiple: PropTypes.bool,
+  onChange: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
+  placeholder: PropTypes.string,
+  search: PropTypes.bool,
+  searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  selectAll: PropTypes.bool,
+  selectAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),
+  selectionTypeCounterText: PropTypes.string,
+  visible: PropTypes.bool,
+}
+
+CMultiSelect.displayName = 'CMultiSelect'

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

@@ -0,0 +1,18 @@
+// TODO: check if component property is necessary.
+
+import React, { forwardRef, HTMLAttributes } from 'react'
+
+export const CMultiSelectCleaner = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  (props, ref) => {
+    return (
+      <button
+        type="button"
+        className="form-multi-select-selection-cleaner"
+        {...props}
+        ref={ref}
+      ></button>
+    )
+  },
+)
+
+CMultiSelectCleaner.displayName = 'CMultiSelectCleaner'

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

@@ -0,0 +1,44 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+import { Option } from './CMultiSelect'
+
+export interface CMultiSelectNativeSelectProps
+  extends Omit<HTMLAttributes<HTMLSelectElement>, 'options'> {
+  multiple?: boolean
+  options: Option[] | undefined
+  value?: string | number | readonly string[]
+}
+
+export const CMultiSelectNativeSelect = forwardRef<
+  HTMLSelectElement,
+  CMultiSelectNativeSelectProps
+>(({ multiple, options, ...rest }, ref) => {
+  const createNativeOptions = (options: Option[]) => {
+    return options.map((option: Option, index: number) => {
+      return option.options ? (
+        <optgroup label={option.label} key={index}>
+          {createNativeOptions(option.options)}
+        </optgroup>
+      ) : (
+        <option value={option.value} key={index} disabled={option.disabled}>
+          {option.text}
+        </option>
+      )
+    })
+  }
+
+  return (
+    <select multiple={multiple} tabIndex={-1} style={{ display: 'none' }} {...rest} ref={ref}>
+      {options && createNativeOptions(options)}
+    </select>
+  )
+})
+
+CMultiSelectNativeSelect.propTypes = {
+  multiple: PropTypes.any, // TODO: update
+  options: PropTypes.array.isRequired,
+  value: PropTypes.any, // TODO: update
+}
+
+CMultiSelectNativeSelect.displayName = 'CMultiSelectNativeSelect'