@coreui/react-pro 5.18.0 → 5.20.0

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

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { CElementCover } from '../element-cover'
 import { CVirtualScroller } from '../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './utils'
+import { getNextSibling, getPreviousSibling } from '../../utils'
 import type { Option, OptionsGroup } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
@@ -38,12 +38,12 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       virtualScroller,
       visibleItems = 10,
     },
-    ref,
+    ref
   ) => {
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, option: Option) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        onOptionOnClick && onOptionOnClick(option)
+        onOptionOnClick?.(option)
       }
 
       if (event.key === 'Down' || event.key === 'ArrowDown') {
@@ -77,6 +77,9 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
               onClick={() => onOptionOnClick && onOptionOnClick(option as Option)}
               onKeyDown={(event) => handleKeyDown(event, option as Option)}
               tabIndex={0}
+              role="option"
+              aria-selected={selected.some((_option) => _option.value === option.value)}
+              aria-disabled={Boolean(option.disabled)}
             >
               {optionsTemplate ? optionsTemplate(option as Option) : option.label}
             </div>
@@ -84,7 +87,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
             <div className="form-multi-select-optgroup-label" key={index}>
               {optionsGroupsTemplate ? optionsGroupsTemplate(option as OptionsGroup) : option.label}
             </div>
-          ),
+          )
         )
       ) : (
         <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
@@ -116,7 +119,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         {loading && <CElementCover />}
       </>
     )
-  },
+  }
 )
 
 CMultiSelectOptions.propTypes = {

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

@@ -29,7 +29,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
       selectionType,
       selectionTypeCounterText,
     },
-    ref,
+    ref
   ) => {
     return (
       <span
@@ -56,7 +56,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                       className="form-multi-select-tag-delete"
                       type="button"
                       aria-label="Close"
-                      onClick={() => onRemove && onRemove(option)}
+                      onClick={() => onRemove?.(option)}
                     />
                   )}
                 </span>
@@ -76,7 +76,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
         {children}
       </span>
     )
-  },
+  }
 )
 
 CMultiSelectSelection.propTypes = {

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

@@ -66,46 +66,12 @@ export const flattenOptionsArray = (
   return optionsList
 }
 
-export const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.nextElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-
-  return
-}
-
 export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
   return Array.from(
     container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
   )
 }
 
-export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.previousElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.previousElementSibling
-  }
-
-  return
-}
-
 export const isExternalSearch = (search: Search): boolean => {
   return (
     (typeof search === 'string' && search === 'external') ||