@coreui/react-pro 5.24.1 → 5.26.0

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, HTMLAttributes, JSX, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -10,11 +10,14 @@ import type { Option, OptionsGroup } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   loading?: boolean
+  onGroupOnClick?: (group: OptionsGroup) => void
   onOptionOnClick?: (option: Option) => void
   options: (Option | OptionsGroup)[]
   optionsMaxHeight?: number | string
   optionsStyle?: 'checkbox' | 'text'
   optionsTemplate?: (option: Option) => ReactNode
+  optionsGroupsSelectable?: boolean
+  optionsGroupsStyle?: 'checkbox' | 'text'
   optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   searchNoResultsLabel?: string | ReactNode
   selected: Option[]
@@ -26,12 +29,15 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
   (
     {
       loading,
+      onGroupOnClick,
       onKeyDown,
       onOptionOnClick,
       options,
       optionsMaxHeight,
       optionsStyle,
       optionsTemplate,
+      optionsGroupsSelectable,
+      optionsGroupsStyle,
       optionsGroupsTemplate,
       searchNoResultsLabel,
       selected,
@@ -63,6 +69,44 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       }
     }
 
+    const handleGroupKeyDown = (
+      event: React.KeyboardEvent<HTMLDivElement>,
+      group: OptionsGroup
+    ) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        onGroupOnClick?.(group)
+        return
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const next = getNextSibling(event.target as HTMLElement, '.form-multi-select-option')
+
+        next && (next as HTMLElement).focus()
+      }
+
+      if (event.key === 'Up' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        const prev = getPreviousSibling(event.target as HTMLElement, '.form-multi-select-option')
+
+        prev && (prev as HTMLElement).focus()
+      }
+    }
+
+    const getGroupCheckboxState = (group: OptionsGroup) => {
+      const groupOptions = (group.options ?? []).filter((option) => !option.disabled)
+      const selectedCount = groupOptions.filter((option) =>
+        selected.some((_option) => _option.value === option.value)
+      ).length
+
+      if (groupOptions.length > 0 && selectedCount >= groupOptions.length) {
+        return 'all'
+      }
+
+      return selectedCount === 0 ? 'none' : 'indeterminate'
+    }
+
     const createOptions = (options: (Option | OptionsGroup)[]): JSX.Element | JSX.Element[] =>
       options.length > 0 ? (
         options.map((option: Option | OptionsGroup, index: number) =>
@@ -84,13 +128,37 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
               {optionsTemplate ? optionsTemplate(option as Option) : option.label}
             </div>
           ) : (
-            <div className="form-multi-select-optgroup-label" key={index}>
+            <div
+              className={classNames('form-multi-select-optgroup-label', {
+                'form-multi-select-optgroup-label-with-checkbox':
+                  optionsGroupsSelectable && optionsGroupsStyle === 'checkbox',
+                'form-multi-selected':
+                  optionsGroupsSelectable &&
+                  optionsGroupsStyle === 'checkbox' &&
+                  getGroupCheckboxState(option as OptionsGroup) === 'all',
+                'form-multi-select-indeterminate':
+                  optionsGroupsSelectable &&
+                  optionsGroupsStyle === 'checkbox' &&
+                  getGroupCheckboxState(option as OptionsGroup) === 'indeterminate',
+              })}
+              key={index}
+              {...(optionsGroupsSelectable &&
+                optionsGroupsStyle === 'checkbox' && {
+                  onClick: () => onGroupOnClick?.(option as OptionsGroup),
+                  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) =>
+                    handleGroupKeyDown(event, option as OptionsGroup),
+                  tabIndex: 0,
+                  role: 'button',
+                })}
+            >
               {optionsGroupsTemplate ? optionsGroupsTemplate(option as OptionsGroup) : option.label}
             </div>
           )
         )
       ) : (
-        <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
+        <div className="form-multi-select-options-empty" role="status">
+          {searchNoResultsLabel}
+        </div>
       )
 
     return (
@@ -124,11 +192,14 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
 
 CMultiSelectOptions.propTypes = {
   loading: PropTypes.bool,
+  onGroupOnClick: PropTypes.func,
   onOptionOnClick: PropTypes.func,
   options: PropTypes.array.isRequired,
   optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
   optionsTemplate: PropTypes.func,
+  optionsGroupsSelectable: PropTypes.bool,
+  optionsGroupsStyle: PropTypes.oneOf(['checkbox', 'text']),
   optionsGroupsTemplate: PropTypes.func,
   searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   virtualScroller: PropTypes.bool,

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
 import type { Search, SelectedOption } from './types'
 
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
+  ariaTagDeleteLabel?: string
   disabled?: boolean
   multiple?: boolean
   onRemove?: (option: SelectedOption) => void
@@ -19,6 +20,7 @@ export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanEleme
 export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSelectionProps>(
   (
     {
+      ariaTagDeleteLabel = 'Remove',
       children,
       disabled,
       multiple,
@@ -36,6 +38,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
         className={classNames('form-multi-select-selection', {
           'form-multi-select-selection-tags': multiple && selectionType === 'tags',
         })}
+        aria-live="polite"
         ref={ref}
       >
         {multiple && selectionType === 'counter' && !search && selected.length === 0 && placeholder}
@@ -55,7 +58,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                     <button
                       className="form-multi-select-tag-delete"
                       type="button"
-                      aria-label="Close"
+                      aria-label={`${ariaTagDeleteLabel} ${option.label}`.trim()}
                       onClick={() => onRemove?.(option)}
                     />
                   )}
@@ -80,6 +83,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
 )
 
 CMultiSelectSelection.propTypes = {
+  ariaTagDeleteLabel: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,
   multiple: PropTypes.bool,

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

@@ -1,25 +1,25 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CMultiSelect } from '../index'
 
 const options = [
   {
     value: 0,
-    text: 'Angular',
+    label: 'Angular',
   },
   {
     value: 1,
-    text: 'Bootstrap',
+    label: 'Bootstrap',
     selected: true,
   },
   {
     value: 2,
-    text: 'React.js',
+    label: 'React.js',
   },
   {
     value: 3,
-    text: 'Vue.js',
+    label: 'Vue.js',
     selected: true,
   },
   {
@@ -27,15 +27,15 @@ const options = [
     options: [
       {
         value: 4,
-        text: 'Django',
+        label: 'Django',
       },
       {
         value: 5,
-        text: 'Laravel',
+        label: 'Laravel',
       },
       {
         value: 6,
-        text: 'Node.js',
+        label: 'Node.js',
         disabled: true,
         selected: true,
       },
@@ -68,74 +68,32 @@ test('CMultiSelect customize', async () => {
     />,
   )
   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) {
+  const nativeSelect = container.querySelector('select')
+  expect(nativeSelect).toBeInTheDocument()
+  expect(nativeSelect).toHaveAttribute('multiple', '')
+  expect(nativeSelect).not.toHaveStyle('display: none')
+  expect(nativeSelect).toHaveAttribute('tabindex', '-1')
+  expect(nativeSelect).toHaveClass('form-multi-select')
+  expect(nativeSelect?.parentElement).toHaveClass('form-multi-select')
+  if (nativeSelect === null) {
     expect(true).toBe(false)
   } else {
-    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(nativeSelect.firstChild).toHaveAttribute('value', '1')
+    expect(nativeSelect.firstChild).toHaveTextContent('Bootstrap')
+    expect(nativeSelect.lastChild).toHaveAttribute('value', '6')
+    expect(nativeSelect.lastChild).toHaveTextContent('Node.js')
   }
   expect(container.lastChild).toHaveClass('form-multi-select')
   expect(container.lastChild).toHaveClass('show')
   expect(container.lastChild).toHaveClass('bazinga')
 
-  if (container.lastChild === null) {
-    expect(true).toBe(false)
-  } else {
-    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-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) {
-      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('Angular')
-        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('Node.js')
-      }
-    }
-  }
+  expect(container.querySelector('.form-multi-select-tag')).toBeInTheDocument()
+  expect(container.querySelector('.form-multi-select-tag')).toHaveTextContent('Bootstrap')
+  expect(container.querySelector('.form-multi-select-dropdown')).toBeInTheDocument()
+  expect(container.querySelector('.form-multi-select-all')).toHaveTextContent('selectAllLabel')
+  expect(container.querySelector('.form-multi-select-options')).toBeInTheDocument()
+  const firstOption = container.querySelector('.form-multi-select-option')
+  expect(firstOption).toHaveClass('form-multi-select-option-with-checkbox')
 })
 
 test('CMultiSelect fire events', async () => {

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

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

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

@@ -1,18 +1,18 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CMultiSelectOptions } from '../CMultiSelectOptions'
 import { Option } from '../types'
 
 const options: Option[] = [
   {
-    text: 'text1',
+    label: 'text1',
     value: 'value1',
     selected: true,
     disabled: true,
   },
   {
-    text: 'text3',
+    label: 'text3',
     value: 'value3',
   },
 ]
@@ -59,7 +59,7 @@ test('CMultiSelectOptions customize', async () => {
 
 test('CMultiSelectOptions handle on click', async () => {
   const onClick = jest.fn()
-  render(<CMultiSelectOptions options={options} handleOptionOnClick={onClick} selected={[]} />)
+  render(<CMultiSelectOptions options={options} onOptionOnClick={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

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CMultiSelectSelection } from '../CMultiSelectSelection'
 
 const selected = [
   {
-    text: 'text1',
+    label: 'text1',
     value: 'value1',
   },
   {
-    text: 'text2',
+    label: 'text2',
     value: 'value2',
     disabled: true,
   },
@@ -32,27 +32,10 @@ test('CMultiSelectSelection customize tags', async () => {
   )
   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).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('×')
-      }
-    }
-  }
+  const tags = container.querySelectorAll('.form-multi-select-tag')
+  expect(tags.length).toBeGreaterThanOrEqual(2)
+  const deleteBtn = container.querySelector('.form-multi-select-tag-delete')
+  expect(deleteBtn).toBeInTheDocument()
 })
 
 test('CMultiSelectSelection customize counter', async () => {