@coreui/react-pro 5.24.1 → 5.25.0

package/src/components/dropdown/CDropdown.tsx

@@ -226,7 +226,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       popperConfig,
       portal = false,
       reference = 'toggle',
-      variant = 'btn-group',
+      variant = 'dropdown',
       visible = false,
       ...rest
     },

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -89,7 +89,7 @@ test('CDropdown opens on toggle click and closes on clicking outside', async ()
 
   // Click outside the dropdown to close it
   const externalArea = screen.getByTestId('external-area')
-  fireEvent.mouseUp(externalArea)
+  fireEvent.click(externalArea)
 
   // Wait for the dropdown menu to be hidden
   await waitFor(() => {

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`CDropdown customize 1`] = `
 exports[`CDropdown example 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     <button
       aria-expanded="false"
@@ -68,7 +68,7 @@ exports[`CDropdown example 1`] = `
 exports[`loads and displays CDropdown component 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     Test
   </div>

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdownMenu customize 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     <div
       class="dropdown-menu show bazinga"

package/src/components/form/__tests__/CFormInput.spec.tsx

@@ -8,11 +8,18 @@ test('loads and displays CFormInput component', async () => {
   expect(container).toMatchSnapshot()
 })
 
-test('CFormInput customize', async () => {
+test('CFormInput customize one', async () => {
+  const { container } = render(<CFormInput />)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('form-control')
+})
+
+test('CFormInput customize two', async () => {
   const { container } = render(
     <CFormInput
       className="bazinga"
       disabled={true}
+      invalid={true}
       plainText={true}
       readOnly={true}
       size="lg"
@@ -22,24 +29,14 @@ test('CFormInput customize', async () => {
     />
   )
   expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('form-control-color')
   expect(container.firstChild).toHaveClass('form-control-lg')
-})
-
-test('CFormInput change input', async () => {
-  jest.useFakeTimers()
-  const onChange = jest.fn()
-  render(<CFormInput onChange={onChange} />)
-  expect(onChange).toHaveBeenCalledTimes(0)
-  const input = document.querySelector('input')
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: 'bazinga' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(1)
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: '2' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(2)
+  expect(container.firstChild).toHaveClass('form-control-color')
+  expect(container.firstChild).toHaveClass('is-invalid')
+  expect(container.firstChild).toHaveClass('is-valid')
+  expect(container.firstChild).toHaveClass('form-control-plaintext')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveAttribute('value', '#888888')
+  expect(container.firstChild).toHaveAttribute('type', 'color')
+  expect(container.firstChild).toHaveAttribute('disabled', '')
+  expect(container.firstChild).toHaveAttribute('readonly', '')
 })

package/src/components/form/__tests__/__snapshots__/CFormInput.spec.tsx.snap

@@ -1,13 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CFormInput customize 1`] = `
+exports[`CFormInput customize one 1`] = `
 <div>
   <input
-    class="form-control-plaintext form-control-lg form-control-color bazinga"
+    class="form-control"
+    type="text"
+  />
+</div>
+`;
+
+exports[`CFormInput customize two 1`] = `
+<div>
+  <input
+    class="form-control-plaintext form-control-lg form-control-color is-invalid is-valid bazinga"
     disabled=""
     readonly=""
     type="color"
-    value="value"
+    value="#888888"
   />
 </div>
 `;

package/src/components/index.ts

@@ -41,6 +41,7 @@ export * from './progress'
 export * from './popover'
 export * from './range-slider'
 export * from './rating'
+export * from './search-button'
 export * from './smart-table'
 export * from './smart-pagination'
 export * from './sidebar'

package/src/components/loading-button/__tests__/CLoadingButton.spec.tsx

@@ -1,6 +1,6 @@
 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 { CLoadingButton } from '../index'
 
 test('loads and displays CLoadingButton component', async () => {

package/src/components/loading-button/__tests__/__snapshots__/CLoadingButton.spec.tsx.snap

@@ -3,12 +3,12 @@
 exports[`CLoadingButton customize 1`] = `
 <div>
   <button
-    class="btn btn-primary btn-loading is-loading bazinga disabled"
+    class="btn btn-loading is-loading bazinga disabled"
     disabled=""
     type="button"
   >
     <div
-      class="spinner-grow text-undefined spinner-grow-sm btn-loading-spinner"
+      class="spinner-grow spinner-grow-sm btn-loading-spinner"
       role="status"
     >
       <span
@@ -25,11 +25,11 @@ exports[`CLoadingButton customize 1`] = `
 exports[`loads and displays CLoadingButton component 1`] = `
 <div>
   <button
-    class="btn btn-primary btn-loading"
+    class="btn btn-loading"
     type="button"
   >
     <div
-      class="spinner-border text-undefined spinner-border-sm btn-loading-spinner"
+      class="spinner-border spinner-border-sm btn-loading-spinner"
       role="status"
     >
       <span

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,
       },
@@ -83,59 +83,13 @@ test('CMultiSelect customize', async () => {
   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 () => {

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

@@ -3,8 +3,9 @@
 exports[`CMultiSelect customize 1`] = `
 <div>
   <select
-    class="multi-select-new"
+    id=":r1:"
     multiple=""
+    name=":r1:"
     style="display: none;"
     tabindex="-1"
   >
@@ -30,7 +31,10 @@ exports[`CMultiSelect customize 1`] = `
     class="form-multi-select show bazinga"
   >
     <div
-      class="form-multi-select-toggler"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      class="form-multi-select-input-group"
+      role="combobox"
     >
       <span
         class="form-multi-select-selection form-multi-select-selection-tags"
@@ -42,13 +46,8 @@ exports[`CMultiSelect customize 1`] = `
           <button
             aria-label="Close"
             class="form-multi-select-tag-delete"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ×
-            </span>
-          </button>
+            type="button"
+          />
         </span>
         <span
           class="form-multi-select-tag"
@@ -57,13 +56,8 @@ exports[`CMultiSelect customize 1`] = `
           <button
             aria-label="Close"
             class="form-multi-select-tag-delete"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ×
-            </span>
-          </button>
+            type="button"
+          />
         </span>
         <span
           class="form-multi-select-tag"
@@ -73,6 +67,8 @@ exports[`CMultiSelect customize 1`] = `
         <input
           autocomplete="off"
           class="form-multi-select-search"
+          id="search:r1:"
+          name="search:r1:"
           size="2"
           type="text"
         />
@@ -81,18 +77,22 @@ 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
@@ -106,25 +106,37 @@ exports[`CMultiSelect customize 1`] = `
         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 +147,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
@@ -161,8 +182,9 @@ exports[`CMultiSelect customize 1`] = `
 exports[`loads and displays CMultiSelect component 1`] = `
 <div>
   <select
-    class="multi-select-new"
+    id=":r0:"
     multiple=""
+    name=":r0:"
     style="display: none;"
     tabindex="-1"
   />
@@ -171,7 +193,10 @@ exports[`loads and displays CMultiSelect component 1`] = `
     class="form-multi-select"
   >
     <div
-      class="form-multi-select-toggler"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="form-multi-select-input-group"
+      role="combobox"
     >
       <span
         class="form-multi-select-selection form-multi-select-selection-tags"
@@ -179,6 +204,8 @@ exports[`loads and displays CMultiSelect component 1`] = `
         <input
           autocomplete="off"
           class="form-multi-select-search"
+          id="search:r0:"
+          name="search:r0:"
           placeholder="Select..."
           type="text"
         />
@@ -187,14 +214,17 @@ 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"

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

@@ -3,7 +3,6 @@
 exports[`CMultiSelectNativeSelect customize 1`] = `
 <div>
   <select
-    class="multi-select-new"
     multiple=""
     style="display: none;"
     tabindex="-1"
@@ -31,7 +30,6 @@ 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,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