@coreui/react-pro 4.11.2 → 4.12.0-alpha.0

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

@@ -1,19 +1,21 @@
-import React, { forwardRef, Fragment, HTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CVirtualScroller } from './../virtual-scroller'
+import { CElementCover } from '../element-cover'
+import { CVirtualScroller } from '../virtual-scroller'
 
 import { getNextSibling, getPreviousSibling } from './utils'
-import type { Option } from './types'
-import { CElementCover } from '../element-cover'
+import type { Option, OptionsGroup } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void
   loading?: boolean
-  options: Option[]
+  options: (Option | OptionsGroup)[]
   optionsMaxHeight?: number | string
   optionsStyle?: 'checkbox' | 'text'
+  optionsTemplate?: (option: Option) => ReactNode
+  optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   searchNoResultsLabel?: string | ReactNode
   selected: Option[]
   virtualScroller?: boolean
@@ -28,6 +30,8 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       options,
       optionsMaxHeight,
       optionsStyle,
+      optionsTemplate,
+      optionsGroupsTemplate,
       searchNoResultsLabel,
       selected,
       virtualScroller,
@@ -39,37 +43,29 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
         handleOptionOnClick && handleOptionOnClick(option)
-        return
       }
 
       if (event.key === 'Down' || event.key === 'ArrowDown') {
         event.preventDefault()
         const target = event.target as HTMLElement
         const next = getNextSibling(target, '.form-multi-select-option')
-        if (next) {
-          ;(next as HTMLElement).focus() // eslint-disable-line prettier/prettier
-        }
+
+        next && (next as HTMLElement).focus()
       }
 
       if (event.key === 'Up' || event.key === 'ArrowUp') {
         event.preventDefault()
         const target = event.target as HTMLElement
         const prev = getPreviousSibling(target, '.form-multi-select-option')
-        if (prev) {
-          ;(prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
-        }
+
+        prev && (prev as HTMLElement).focus()
       }
     }
 
-    const createOptions = (options: Option[]): JSX.Element | JSX.Element[] =>
+    const createOptions = (options: (Option | OptionsGroup)[]): JSX.Element | JSX.Element[] =>
       options.length > 0 ? (
-        options.map((option: Option, index: number) =>
-          option.options ? (
-            <Fragment key={index}>
-              <div className="form-multi-select-optgroup-label">{option.label}</div>
-              {createOptions(option.options)}
-            </Fragment>
-          ) : (
+        options.map((option: Option | OptionsGroup, index: number) =>
+          'value' in option ? (
             <div
               className={classNames('form-multi-select-option', {
                 'form-multi-select-option-with-checkbox': optionsStyle === 'checkbox',
@@ -77,11 +73,15 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
                 disabled: option.disabled,
               })}
               key={index}
-              onClick={() => handleOptionOnClick && handleOptionOnClick(option)}
-              onKeyDown={(event) => handleKeyDown(event, option)}
+              onClick={() => handleOptionOnClick && handleOptionOnClick(option as Option)}
+              onKeyDown={(event) => handleKeyDown(event, option as Option)}
               tabIndex={0}
             >
-              {option.text}
+              {optionsTemplate ? optionsTemplate(option as Option) : option.text}
+            </div>
+          ) : (
+            <div className="form-multi-select-optgroup-label" key={index}>
+              {optionsGroupsTemplate ? optionsGroupsTemplate(option as OptionsGroup) : option.label}
             </div>
           ),
         )
@@ -122,6 +122,8 @@ CMultiSelectOptions.propTypes = {
   options: PropTypes.array.isRequired,
   optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
+  optionsTemplate: PropTypes.func,
+  optionsGroupsTemplate: PropTypes.func,
   searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   virtualScroller: PropTypes.bool,
   visibleItems: PropTypes.number,

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

@@ -1,4 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
+
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
 import type { SelectedOption } from './types'
@@ -6,6 +8,7 @@ import type { SelectedOption } from './types'
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
   multiple?: boolean
   onRemove?: (option: SelectedOption) => void
+  placeholder?: string
   search?: boolean | 'external'
   selected?: SelectedOption[]
   selectionType?: 'counter' | 'tags' | 'text'
@@ -13,12 +16,31 @@ export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanEleme
 }
 
 export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSelectionProps>(
-  ({ multiple, onRemove, search, selected = [], selectionType, selectionTypeCounterText }, ref) => {
+  (
+    {
+      children,
+      multiple,
+      placeholder,
+      onRemove,
+      search,
+      selected = [],
+      selectionType,
+      selectionTypeCounterText,
+    },
+    ref,
+  ) => {
     return (
-      <span className="form-multi-select-selection" ref={ref}>
+      <span
+        className={classNames('form-multi-select-selection', {
+          'form-multi-select-selection-tags': multiple && selectionType === 'tags',
+        })}
+        ref={ref}
+      >
+        {multiple && selectionType === 'counter' && !search && selected.length === 0 && placeholder}
         {multiple &&
           selectionType === 'counter' &&
           !search &&
+          selected.length > 0 &&
           `${selected.length} ${selectionTypeCounterText}`}
         {multiple &&
           selectionType === 'tags' &&
@@ -29,20 +51,26 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                   {option.text}
                   {!option.disabled && (
                     <button
-                      className="form-multi-select-tag-delete close"
+                      className="form-multi-select-tag-delete"
                       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 &&
+          selectionType === 'text' &&
+          selected.map((option, index) => (
+            <span key={index}>
+              {option.text}
+              {index === selected.length - 1 ? '' : ','}&nbsp;
+            </span>
+          ))}
         {!multiple && !search && selected.map((option) => option.text)[0]}
+        {children}
       </span>
     )
   },
@@ -51,6 +79,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
 CMultiSelectSelection.propTypes = {
   multiple: PropTypes.bool,
   onRemove: PropTypes.func,
+  placeholder: PropTypes.string,
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'external'>(['external'])]),
   selected: PropTypes.array,
   selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),

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

@@ -11,15 +11,16 @@ const options = [
   {
     value: 1,
     text: 'Bootstrap',
+    selected: true,
   },
   {
     value: 2,
     text: 'React.js',
-    selected: true,
   },
   {
     value: 3,
     text: 'Vue.js',
+    selected: true,
   },
   {
     label: 'backend',
@@ -35,6 +36,8 @@ const options = [
       {
         value: 6,
         text: 'Node.js',
+        disabled: true,
+        selected: true,
       },
     ],
   },
@@ -71,25 +74,33 @@ test('CMultiSelect customize', async () => {
   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.firstChild.firstChild).toHaveAttribute('value', '1')
+    expect(container.firstChild.firstChild).toHaveTextContent('Bootstrap')
+    expect(container.firstChild.lastChild).toHaveAttribute('value', '6')
+    expect(container.firstChild.lastChild).toHaveTextContent('Node.js')
   }
   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')
+    expect(container.lastChild.firstChild).toHaveClass('form-multi-select-toggler')
     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.firstChild.firstChild).toHaveClass(
+        'form-multi-select-selection-tags',
+      )
+      if (container.lastChild.firstChild.firstChild === null) {
+        expect(true).toBe(false)
+      } else {
+        expect(container.lastChild.firstChild.firstChild.firstChild).toHaveClass(
+          'form-multi-select-tag',
+        )
+        expect(container.lastChild.firstChild.firstChild.firstChild).toHaveTextContent('Bootstrap')
+      }
     }
     expect(container.lastChild.lastChild).toHaveClass('form-multi-select-dropdown')
     if (container.lastChild.lastChild === null) {
@@ -112,7 +123,7 @@ test('CMultiSelect customize', async () => {
         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.firstChild).toHaveTextContent('Angular')
         expect(container.lastChild.lastChild.lastChild.lastChild).toHaveClass(
           'form-multi-select-option',
         )
@@ -121,7 +132,7 @@ test('CMultiSelect customize', async () => {
         )
         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')
+        expect(container.lastChild.lastChild.lastChild.lastChild).toHaveTextContent('Node.js')
       }
     }
   }
@@ -149,15 +160,15 @@ test('CMultiSelect fire events', async () => {
       onChange={event}
     />,
   )
-  expect(event).toHaveBeenCalledTimes(2)
+  expect(event).toHaveBeenCalledTimes(1)
   const option = document.querySelector('.form-multi-select-option')
   if (option !== null) {
     fireEvent.click(option)
   }
-  expect(event).toHaveBeenCalledTimes(3)
+  expect(event).toHaveBeenCalledTimes(2)
   const removeButton = document.querySelector('.form-multi-select-tag-delete')
   if (removeButton !== null) {
     fireEvent.click(removeButton)
   }
-  expect(event).toHaveBeenCalledTimes(4)
+  expect(event).toHaveBeenCalledTimes(3)
 })

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

@@ -2,7 +2,7 @@ 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'
+import { Option } from '../types'
 
 test('loads and displays CMultiSelectNativeSelect component', async () => {
   const { container } = render(<CMultiSelectNativeSelect options={[]} />)

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

@@ -2,7 +2,7 @@ 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'
+import { Option } from '../types'
 
 const options: Option[] = [
   {
@@ -19,7 +19,7 @@ const options: Option[] = [
 
 test('loads and displays CMultiSelectOptions component', async () => {
   const { container } = render(
-    <CMultiSelectOptions options={[]} searchNoResultsLabel="some no result label" />,
+    <CMultiSelectOptions options={[]} searchNoResultsLabel="some no result label" selected={[]} />,
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('form-multi-select-options')
@@ -38,6 +38,7 @@ test('CMultiSelectOptions customize', async () => {
       optionsMaxHeight="200"
       optionsStyle="checkbox"
       searchNoResultsLabel="some - searchNoResultsLabel"
+      selected={[]}
     />,
   )
   expect(container).toMatchSnapshot()
@@ -48,7 +49,6 @@ test('CMultiSelectOptions customize', async () => {
   } 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')
@@ -59,7 +59,7 @@ test('CMultiSelectOptions customize', async () => {
 
 test('CMultiSelectOptions handle on click', async () => {
   const onClick = jest.fn()
-  render(<CMultiSelectOptions options={options} handleOptionOnClick={onClick} />)
+  render(<CMultiSelectOptions options={options} handleOptionOnClick={onClick} selected={[]} />)
   expect(onClick).toHaveBeenCalledTimes(0)
   const option = document.querySelector('.form-multi-select-option')
   if (option !== null) {

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

@@ -41,7 +41,6 @@ test('CMultiSelectSelection customize tags', async () => {
       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)

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

@@ -3,45 +3,97 @@
 exports[`CMultiSelect customize 1`] = `
 <div>
   <select
+    class="multi-select-new"
     multiple=""
     style="display: none;"
     tabindex="-1"
   >
     <option
-      value="value1"
+      value="1"
     >
-      text1
+      Bootstrap
+    </option>
+    <option
+      value="3"
+    >
+      Vue.js
     </option>
     <option
       disabled=""
-      value="value3"
+      value="6"
     >
-      text3
+      Node.js
     </option>
   </select>
   <div
-    class="form-multi-select show form-multi-select-selection-tags bazinga"
+    aria-expanded="true"
+    class="form-multi-select show bazinga"
   >
-    <span
-      class="form-multi-select-selection"
+    <div
+      class="form-multi-select-toggler"
     >
       <span
-        class="form-multi-select-tag"
+        class="form-multi-select-selection form-multi-select-selection-tags"
       >
-        text3
+        <span
+          class="form-multi-select-tag"
+        >
+          Bootstrap
+          <button
+            aria-label="Close"
+            class="form-multi-select-tag-delete"
+          >
+            <span
+              aria-hidden="true"
+            >
+              ×
+            </span>
+          </button>
+        </span>
+        <span
+          class="form-multi-select-tag"
+        >
+          Vue.js
+          <button
+            aria-label="Close"
+            class="form-multi-select-tag-delete"
+          >
+            <span
+              aria-hidden="true"
+            >
+              ×
+            </span>
+          </button>
+        </span>
+        <span
+          class="form-multi-select-tag"
+        >
+          Node.js
+        </span>
+        <input
+          autocomplete="off"
+          class="form-multi-select-search"
+          size="2"
+          type="text"
+        />
       </span>
-    </span>
-    <button
-      class="form-multi-select-selection-cleaner"
-      type="button"
-    />
-    <input
-      class="form-multi-select-search"
-      size="2"
-      type="text"
-    />
+      <div
+        class="form-multi-select-buttons"
+      >
+        <button
+          class="form-multi-select-cleaner"
+          type="button"
+        />
+        <button
+          class="form-multi-select-indicator"
+          type="button"
+        />
+      </div>
+    </div>
     <div
       class="form-multi-select-dropdown"
+      role="menu"
+      style="position: absolute; left: 0px; top: 0px; margin: 0px;"
     >
       <button
         class="form-multi-select-all"
@@ -55,13 +107,50 @@ exports[`CMultiSelect customize 1`] = `
       >
         <div
           class="form-multi-select-option form-multi-select-option-with-checkbox"
+          tabindex="0"
+        >
+          Angular
+        </div>
+        <div
+          class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected"
+          tabindex="0"
+        >
+          Bootstrap
+        </div>
+        <div
+          class="form-multi-select-option form-multi-select-option-with-checkbox"
+          tabindex="0"
+        >
+          React.js
+        </div>
+        <div
+          class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected"
+          tabindex="0"
         >
-          text1
+          Vue.js
+        </div>
+        <div
+          class="form-multi-select-optgroup-label"
+        >
+          backend
+        </div>
+        <div
+          class="form-multi-select-option form-multi-select-option-with-checkbox"
+          tabindex="0"
+        >
+          Django
+        </div>
+        <div
+          class="form-multi-select-option form-multi-select-option-with-checkbox"
+          tabindex="0"
+        >
+          Laravel
         </div>
         <div
           class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected disabled"
+          tabindex="0"
         >
-          text3
+          Node.js
         </div>
       </div>
     </div>
@@ -72,23 +161,40 @@ exports[`CMultiSelect customize 1`] = `
 exports[`loads and displays CMultiSelect component 1`] = `
 <div>
   <select
+    class="multi-select-new"
     multiple=""
     style="display: none;"
     tabindex="-1"
   />
   <div
-    class="form-multi-select form-multi-select-selection-tags"
+    aria-expanded="false"
+    class="form-multi-select"
   >
-    <span
-      class="form-multi-select-selection"
-    />
-    <input
-      class="form-multi-select-search"
-      placeholder="Select..."
-      type="text"
-    />
+    <div
+      class="form-multi-select-toggler"
+    >
+      <span
+        class="form-multi-select-selection form-multi-select-selection-tags"
+      >
+        <input
+          autocomplete="off"
+          class="form-multi-select-search"
+          placeholder="Select..."
+          type="text"
+        />
+      </span>
+      <div
+        class="form-multi-select-buttons"
+      >
+        <button
+          class="form-multi-select-indicator"
+          type="button"
+        />
+      </div>
+    </div>
     <div
       class="form-multi-select-dropdown"
+      role="menu"
     >
       <button
         class="form-multi-select-all"

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

@@ -3,6 +3,7 @@
 exports[`CMultiSelectNativeSelect customize 1`] = `
 <div>
   <select
+    class="multi-select-new"
     multiple=""
     style="display: none;"
     tabindex="-1"
@@ -30,6 +31,7 @@ exports[`CMultiSelectNativeSelect customize 1`] = `
 exports[`loads and displays CMultiSelectNativeSelect component 1`] = `
 <div>
   <select
+    class="multi-select-new"
     style="display: none;"
     tabindex="-1"
   />

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

@@ -7,12 +7,14 @@ exports[`CMultiSelectOptions customize 1`] = `
     style="max-height: 200; overflow: scroll;"
   >
     <div
-      class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected disabled"
+      class="form-multi-select-option form-multi-select-option-with-checkbox disabled"
+      tabindex="0"
     >
       text1
     </div>
     <div
       class="form-multi-select-option form-multi-select-option-with-checkbox"
+      tabindex="0"
     >
       text3
     </div>

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

@@ -13,7 +13,7 @@ exports[`CMultiSelectSelection customize counter 1`] = `
 exports[`CMultiSelectSelection customize tags 1`] = `
 <div>
   <span
-    class="form-multi-select-selection"
+    class="form-multi-select-selection form-multi-select-selection-tags"
   >
     <span
       class="form-multi-select-tag"
@@ -21,7 +21,7 @@ exports[`CMultiSelectSelection customize tags 1`] = `
       text1
       <button
         aria-label="Close"
-        class="form-multi-select-tag-delete close"
+        class="form-multi-select-tag-delete"
       >
         <span
           aria-hidden="true"

package/src/components/multi-select/types.ts

@@ -1,16 +1,21 @@
 export type Option = {
   custom?: boolean
   disabled?: boolean
-  label?: string
-  options?: Option[]
-  order?: number
   selected?: boolean
-  text: string
+  text: string // TODO: change to label in v5
   value: number | string
+  [key: string]: number | string | any
+}
+
+export type OptionsGroup = {
+  label: string
+  options?: Option[]
+  [key: string]: number | string | any
 }
 
 export type SelectedOption = {
   disabled?: boolean
   text: string
   value: number | string
+  [key: string]: number | string | any
 }