@coreui/react-pro 5.24.1 → 5.26.0

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

@@ -2,37 +2,42 @@
 
 exports[`CMultiSelect customize 1`] = `
 <div>
-  <select
-    class="multi-select-new"
-    multiple=""
-    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
-      class="form-multi-select-toggler"
+      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
@@ -40,30 +45,20 @@ exports[`CMultiSelect customize 1`] = `
         >
           Bootstrap
           <button
-            aria-label="Close"
+            aria-label="Remove Bootstrap"
             class="form-multi-select-tag-delete"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ×
-            </span>
-          </button>
+            type="button"
+          />
         </span>
         <span
           class="form-multi-select-tag"
         >
           Vue.js
           <button
-            aria-label="Close"
+            aria-label="Remove Vue.js"
             class="form-multi-select-tag-delete"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ×
-            </span>
-          </button>
+            type="button"
+          />
         </span>
         <span
           class="form-multi-select-tag"
@@ -71,8 +66,13 @@ 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:"
+          name="search:r1:"
           size="2"
           type="text"
         />
@@ -81,50 +81,70 @@ exports[`CMultiSelect customize 1`] = `
         class="form-multi-select-buttons"
       >
         <button
+          aria-label="Clear all selections"
           class="form-multi-select-cleaner"
           type="button"
         />
         <button
+          aria-label="Toggle visibility of options menu"
           class="form-multi-select-indicator"
           type="button"
         />
       </div>
     </div>
     <div
+      aria-multiselectable="true"
       class="form-multi-select-dropdown"
-      role="menu"
+      id="multiselect-listbox-:r1:"
+      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;"
       >
         <div
+          aria-disabled="false"
+          aria-selected="false"
           class="form-multi-select-option form-multi-select-option-with-checkbox"
+          role="option"
           tabindex="0"
         >
           Angular
         </div>
         <div
+          aria-disabled="false"
+          aria-selected="true"
           class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected"
+          role="option"
           tabindex="0"
         >
           Bootstrap
         </div>
         <div
+          aria-disabled="false"
+          aria-selected="false"
           class="form-multi-select-option form-multi-select-option-with-checkbox"
+          role="option"
           tabindex="0"
         >
           React.js
         </div>
         <div
+          aria-disabled="false"
+          aria-selected="true"
           class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected"
+          role="option"
           tabindex="0"
         >
           Vue.js
@@ -135,19 +155,28 @@ exports[`CMultiSelect customize 1`] = `
           backend
         </div>
         <div
+          aria-disabled="false"
+          aria-selected="false"
           class="form-multi-select-option form-multi-select-option-with-checkbox"
+          role="option"
           tabindex="0"
         >
           Django
         </div>
         <div
+          aria-disabled="false"
+          aria-selected="false"
           class="form-multi-select-option form-multi-select-option-with-checkbox"
+          role="option"
           tabindex="0"
         >
           Laravel
         </div>
         <div
+          aria-disabled="true"
+          aria-selected="true"
           class="form-multi-select-option form-multi-select-option-with-checkbox form-multi-selected disabled"
+          role="option"
           tabindex="0"
         >
           Node.js
@@ -160,25 +189,35 @@ exports[`CMultiSelect customize 1`] = `
 
 exports[`loads and displays CMultiSelect component 1`] = `
 <div>
-  <select
-    class="multi-select-new"
-    multiple=""
-    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
-      class="form-multi-select-toggler"
+      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:"
+          name="search:r0:"
           placeholder="Select..."
           type="text"
         />
@@ -187,26 +226,34 @@ exports[`loads and displays CMultiSelect component 1`] = `
         class="form-multi-select-buttons"
       >
         <button
+          aria-label="Toggle visibility of options menu"
           class="form-multi-select-indicator"
           type="button"
         />
       </div>
     </div>
     <div
+      aria-multiselectable="true"
       class="form-multi-select-dropdown"
-      role="menu"
+      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,9 +3,8 @@
 exports[`CMultiSelectNativeSelect customize 1`] = `
 <div>
   <select
-    class="multi-select-new"
+    class="form-multi-select"
     multiple=""
-    style="display: none;"
     tabindex="-1"
   >
     <option
@@ -31,8 +30,7 @@ exports[`CMultiSelectNativeSelect customize 1`] = `
 exports[`loads and displays CMultiSelectNativeSelect component 1`] = `
 <div>
   <select
-    class="multi-select-new"
-    style="display: none;"
+    class="form-multi-select"
     tabindex="-1"
   />
 </div>

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

@@ -7,13 +7,19 @@ exports[`CMultiSelectOptions customize 1`] = `
     style="max-height: 200; overflow: scroll;"
   >
     <div
+      aria-disabled="true"
+      aria-selected="false"
       class="form-multi-select-option form-multi-select-option-with-checkbox disabled"
+      role="option"
       tabindex="0"
     >
       text1
     </div>
     <div
+      aria-disabled="false"
+      aria-selected="false"
       class="form-multi-select-option form-multi-select-option-with-checkbox"
+      role="option"
       tabindex="0"
     >
       text3
@@ -30,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,15 +22,10 @@ exports[`CMultiSelectSelection customize tags 1`] = `
     >
       text1
       <button
-        aria-label="Close"
+        aria-label="Remove text1"
         class="form-multi-select-tag-delete"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
+        type="button"
+      />
     </span>
     <span
       class="form-multi-select-tag"
@@ -42,9 +39,18 @@ exports[`CMultiSelectSelection customize tags 1`] = `
 exports[`CMultiSelectSelection customize text 1`] = `
 <div>
   <span
+    aria-live="polite"
     class="form-multi-select-selection"
   >
-    text1, text2
+    <span>
+      text1
+      ,
+       
+    </span>
+    <span>
+      text2
+       
+    </span>
   </span>
 </div>
 `;
@@ -52,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.
    */