@coreui/react-pro 5.25.0 → 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

@@ -68,16 +68,20 @@ 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')

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

@@ -2,41 +2,42 @@
 
 exports[`CMultiSelect customize 1`] = `
 <div>
-  <select
-    id=":r1:"
-    multiple=""
-    name=":r1:"
-    style="display: none;"
-    tabindex="-1"
-  >
-    <option
-      value="1"
-    >
-      Bootstrap
-    </option>
-    <option
-      value="3"
-    >
-      Vue.js
-    </option>
-    <option
-      disabled=""
-      value="6"
-    >
-      Node.js
-    </option>
-  </select>
   <div
-    aria-expanded="true"
     class="form-multi-select show bazinga"
   >
+    <select
+      class="form-multi-select"
+      id=":r1:"
+      multiple=""
+      name=":r1:"
+      tabindex="-1"
+    >
+      <option
+        value="1"
+      >
+        Bootstrap
+      </option>
+      <option
+        value="3"
+      >
+        Vue.js
+      </option>
+      <option
+        disabled=""
+        value="6"
+      >
+        Node.js
+      </option>
+    </select>
     <div
+      aria-controls="multiselect-listbox-:r1:"
       aria-expanded="true"
       aria-haspopup="listbox"
       class="form-multi-select-input-group"
       role="combobox"
     >
       <span
+        aria-live="polite"
         class="form-multi-select-selection form-multi-select-selection-tags"
       >
         <span
@@ -44,7 +45,7 @@ exports[`CMultiSelect customize 1`] = `
         >
           Bootstrap
           <button
-            aria-label="Close"
+            aria-label="Remove Bootstrap"
             class="form-multi-select-tag-delete"
             type="button"
           />
@@ -54,7 +55,7 @@ exports[`CMultiSelect customize 1`] = `
         >
           Vue.js
           <button
-            aria-label="Close"
+            aria-label="Remove Vue.js"
             class="form-multi-select-tag-delete"
             type="button"
           />
@@ -65,6 +66,9 @@ exports[`CMultiSelect customize 1`] = `
           Node.js
         </span>
         <input
+          aria-autocomplete="list"
+          aria-controls="multiselect-listbox-:r1:"
+          aria-label="Search"
           autocomplete="off"
           class="form-multi-select-search"
           id="search:r1:"
@@ -95,12 +99,16 @@ exports[`CMultiSelect customize 1`] = `
       role="listbox"
       style="position: absolute; left: 0px; top: 0px; margin: 0px;"
     >
-      <button
-        class="form-multi-select-all"
-        type="button"
+      <div
+        class="form-multi-select-dropdown-header"
       >
-        selectAllLabel
-      </button>
+        <button
+          class="form-multi-select-all form-multi-select-all-with-checkbox form-multi-select-indeterminate"
+          type="button"
+        >
+          selectAllLabel
+        </button>
+      </div>
       <div
         class="form-multi-select-options"
         style="max-height: 150px; overflow: scroll;"
@@ -181,27 +189,31 @@ exports[`CMultiSelect customize 1`] = `
 
 exports[`loads and displays CMultiSelect component 1`] = `
 <div>
-  <select
-    id=":r0:"
-    multiple=""
-    name=":r0:"
-    style="display: none;"
-    tabindex="-1"
-  />
   <div
-    aria-expanded="false"
     class="form-multi-select"
   >
+    <select
+      class="form-multi-select"
+      id=":r0:"
+      multiple=""
+      name=":r0:"
+      tabindex="-1"
+    />
     <div
+      aria-controls="multiselect-listbox-:r0:"
       aria-expanded="false"
       aria-haspopup="listbox"
       class="form-multi-select-input-group"
       role="combobox"
     >
       <span
+        aria-live="polite"
         class="form-multi-select-selection form-multi-select-selection-tags"
       >
         <input
+          aria-autocomplete="list"
+          aria-controls="multiselect-listbox-:r0:"
+          aria-label="Search"
           autocomplete="off"
           class="form-multi-select-search"
           id="search:r0:"
@@ -226,17 +238,22 @@ exports[`loads and displays CMultiSelect component 1`] = `
       id="multiselect-listbox-:r0:"
       role="listbox"
     >
-      <button
-        class="form-multi-select-all"
-        type="button"
+      <div
+        class="form-multi-select-dropdown-header"
       >
-        Select all options
-      </button>
+        <button
+          class="form-multi-select-all form-multi-select-all-with-checkbox"
+          type="button"
+        >
+          Select all
+        </button>
+      </div>
       <div
         class="form-multi-select-options"
       >
         <div
           class="form-multi-select-options-empty"
+          role="status"
         >
           No results found
         </div>

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

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

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

@@ -36,6 +36,7 @@ exports[`loads and displays CMultiSelectOptions component 1`] = `
   >
     <div
       class="form-multi-select-options-empty"
+      role="status"
     >
       some no result label
     </div>

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

@@ -3,6 +3,7 @@
 exports[`CMultiSelectSelection customize counter 1`] = `
 <div>
   <span
+    aria-live="polite"
     class="form-multi-select-selection"
   >
     2 text
@@ -13,6 +14,7 @@ exports[`CMultiSelectSelection customize counter 1`] = `
 exports[`CMultiSelectSelection customize tags 1`] = `
 <div>
   <span
+    aria-live="polite"
     class="form-multi-select-selection form-multi-select-selection-tags"
   >
     <span
@@ -20,7 +22,7 @@ exports[`CMultiSelectSelection customize tags 1`] = `
     >
       text1
       <button
-        aria-label="Close"
+        aria-label="Remove text1"
         class="form-multi-select-tag-delete"
         type="button"
       />
@@ -37,6 +39,7 @@ exports[`CMultiSelectSelection customize tags 1`] = `
 exports[`CMultiSelectSelection customize text 1`] = `
 <div>
   <span
+    aria-live="polite"
     class="form-multi-select-selection"
   >
     <span>
@@ -55,6 +58,7 @@ exports[`CMultiSelectSelection customize text 1`] = `
 exports[`loads and displays CMultiSelectSelection component 1`] = `
 <div>
   <span
+    aria-live="polite"
     class="form-multi-select-selection"
   />
 </div>

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

@@ -28,3 +28,17 @@ export type SelectedOption = {
   value: number | string
   [key: string]: number | string | any
 }
+
+export type SelectionState = {
+  selected: number
+  total: number
+  filtered: number
+  filteredSelected: number
+}
+
+export type SelectionActions = {
+  selectAll: () => void
+  deselectAll: () => void
+  selectFiltered: () => void
+  deselectFiltered: () => void
+}

package/src/components/nav/CNav.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CNavProps
-  extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
+export interface CNavProps extends HTMLAttributes<
+  HTMLDivElement | HTMLUListElement | HTMLOListElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */