@coreui/react-pro 5.25.0 → 5.27.0

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

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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"
-  >
-    <div
-      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"
-      >
-        <span
-          class="form-multi-select-tag"
-        >
-          Bootstrap
-          <button
-            aria-label="Close"
-            class="form-multi-select-tag-delete"
-            type="button"
-          />
-        </span>
-        <span
-          class="form-multi-select-tag"
-        >
-          Vue.js
-          <button
-            aria-label="Close"
-            class="form-multi-select-tag-delete"
-            type="button"
-          />
-        </span>
-        <span
-          class="form-multi-select-tag"
-        >
-          Node.js
-        </span>
-        <input
-          autocomplete="off"
-          class="form-multi-select-search"
-          id="search:r1:"
-          name="search:r1:"
-          size="2"
-          type="text"
-        />
-      </span>
-      <div
-        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"
-      id="multiselect-listbox-:r1:"
-      role="listbox"
-      style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-    >
-      <button
-        class="form-multi-select-all"
-        type="button"
-      >
-        selectAllLabel
-      </button>
-      <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
-        </div>
-        <div
-          class="form-multi-select-optgroup-label"
-        >
-          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
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-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"
-  >
-    <div
-      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"
-      >
-        <input
-          autocomplete="off"
-          class="form-multi-select-search"
-          id="search:r0:"
-          name="search:r0:"
-          placeholder="Select..."
-          type="text"
-        />
-      </span>
-      <div
-        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"
-      id="multiselect-listbox-:r0:"
-      role="listbox"
-    >
-      <button
-        class="form-multi-select-all"
-        type="button"
-      >
-        Select all options
-      </button>
-      <div
-        class="form-multi-select-options"
-      >
-        <div
-          class="form-multi-select-options-empty"
-        >
-          No results found
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectNativeSelect customize 1`] = `
-<div>
-  <select
-    multiple=""
-    style="display: none;"
-    tabindex="-1"
-  >
-    <option
-      value="value1"
-    >
-      text1
-    </option>
-    <option
-      disabled=""
-      value="value2"
-    >
-      text2
-    </option>
-    <option
-      value="value3"
-    >
-      text3
-    </option>
-  </select>
-</div>
-`;
-
-exports[`loads and displays CMultiSelectNativeSelect component 1`] = `
-<div>
-  <select
-    style="display: none;"
-    tabindex="-1"
-  />
-</div>
-`;

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

@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectOptions customize 1`] = `
-<div>
-  <div
-    class="form-multi-select-options"
-    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
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CMultiSelectOptions component 1`] = `
-<div>
-  <div
-    class="form-multi-select-options"
-    style="overflow: scroll;"
-  >
-    <div
-      class="form-multi-select-options-empty"
-    >
-      some no result label
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectSelection customize counter 1`] = `
-<div>
-  <span
-    class="form-multi-select-selection"
-  >
-    2 text
-  </span>
-</div>
-`;
-
-exports[`CMultiSelectSelection customize tags 1`] = `
-<div>
-  <span
-    class="form-multi-select-selection form-multi-select-selection-tags"
-  >
-    <span
-      class="form-multi-select-tag"
-    >
-      text1
-      <button
-        aria-label="Close"
-        class="form-multi-select-tag-delete"
-        type="button"
-      />
-    </span>
-    <span
-      class="form-multi-select-tag"
-    >
-      text2
-    </span>
-  </span>
-</div>
-`;
-
-exports[`CMultiSelectSelection customize text 1`] = `
-<div>
-  <span
-    class="form-multi-select-selection"
-  >
-    <span>
-      text1
-      ,
-       
-    </span>
-    <span>
-      text2
-       
-    </span>
-  </span>
-</div>
-`;
-
-exports[`loads and displays CMultiSelectSelection component 1`] = `
-<div>
-  <span
-    class="form-multi-select-selection"
-  />
-</div>
-`;

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
-import { CNav, CNavItem, CNavLink } from '../index'
-
-test('loads and displays CNav component', async () => {
-  const { container } = render(<CNav>Test</CNav>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNav customize', async () => {
-  const { container } = render(
-    <CNav className="bazinga" as="h3" layout="justified" variant="pills">
-      Test
-    </CNav>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav')
-  expect(container.firstChild).toHaveClass('nav-justified')
-  expect(container.firstChild).toHaveClass('nav-pills')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CNav example', async () => {
-  const { container } = render(
-    <CNav>
-      <CNavItem>
-        <CNavLink href="#" active>
-          Active
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CDropdown variant="nav-item">
-        <CDropdownToggle>A</CDropdownToggle>
-        <CDropdownMenu>
-          <CDropdownItem href="#">B</CDropdownItem>
-          <CDropdownItem href="#">C</CDropdownItem>
-          <CDropdownItem href="#">D</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>
-          Disabled
-        </CNavLink>
-      </CNavItem>
-    </CNav>
-  )
-  expect(container).toMatchSnapshot()
-})

package/src/components/nav/__tests__/CNavGroup.spec.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavGroup } from '../index'
-import { CSidebarNavContext } from '../../sidebar/CSidebarNavContext'
-
-test('loads and displays CNavGroup component', async () => {
-  const { container } = render(<CNavGroup toggler="anchorText" />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavGroup customize', async () => {
-  const { container } = render(
-    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-group')
-  expect(container.firstChild).toHaveClass('bazinga')
-  const arr = container.getElementsByClassName('nav-link')
-  if (arr.length > 0) {
-    //expect(arr[0].innerText).toHaveTextContent('anchorText')
-    expect(arr[0].innerHTML).toBe('anchorText')
-  } else {
-    expect(true).toBe(false)
-  }
-})
-
-test('CNavGroup stays expanded when visible prop is set', async () => {
-  render(
-    <CSidebarNavContext.Provider value={{ visibleGroup: '', setVisibleGroup: jest.fn() }}>
-      <CNavGroup idx="1" toggler="anchorText" visible={true} />
-    </CSidebarNavContext.Provider>
-  )
-
-  expect(screen.getByRole('listitem')).toHaveClass('show')
-})
-
-test('CNavGroup toggler render function receives visible state', async () => {
-  render(
-    <CSidebarNavContext.Provider value={{ visibleGroup: '1', setVisibleGroup: jest.fn() }}>
-      <CNavGroup
-        idx="1"
-        toggler={({ visible }) => <span>{visible ? 'expanded' : 'collapsed'}</span>}
-      />
-    </CSidebarNavContext.Provider>
-  )
-
-  expect(screen.getByText('expanded')).toBeInTheDocument()
-
-  fireEvent.click(screen.getByRole('link'))
-
-  expect(screen.getByText('collapsed')).toBeInTheDocument()
-})

package/src/components/nav/__tests__/CNavGroupItems.spec.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavGroupItems } from '../index'
-
-test('loads and displays CNavGroupItems component', async () => {
-  const { container } = render(<CNavGroupItems>Test</CNavGroupItems>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavGroupItems customize', async () => {
-  const { container } = render(<CNavGroupItems className="bazinga">Test</CNavGroupItems>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-group-items')
-  expect(container.firstChild).toHaveClass('bazinga')
-})

package/src/components/nav/__tests__/CNavItem.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavItem } from '../index'
-
-test('loads and displays CNavItem component', async () => {
-  const { container } = render(<CNavItem>Test</CNavItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavItem customize', async () => {
-  const { container } = render(
-    <CNavItem active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
-      Test
-    </CNavItem>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild).toHaveClass('nav-link')
-  expect(container.firstChild).toHaveClass('nav-item')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})

package/src/components/nav/__tests__/CNavLink.spec.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavLink } from '../index'
-
-test('loads and displays CNavLink component', async () => {
-  const { container } = render(<CNavLink>Test</CNavLink>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavLink customize', async () => {
-  const { container } = render(
-    <CNavLink active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
-      Test
-    </CNavLink>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-link')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CNavLink witch "to" prop', async () => {
-  const { container } = render(<CNavLink to="/bazinga">Test</CNavLink>)
-  expect(container).toMatchSnapshot()
-})

package/src/components/nav/__tests__/CNavTitle.spec.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavTitle } from '../index'
-
-test('loads and displays CNavTitle component', async () => {
-  const { container } = render(<CNavTitle>Test</CNavTitle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavTitle customize', async () => {
-  const { container } = render(<CNavTitle className="bazinga">Test</CNavTitle>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-title')
-  expect(container.firstChild).toHaveClass('bazinga')
-})

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -1,118 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNav customize 1`] = `
-<div>
-  <h3
-    class="nav nav-justified nav-pills bazinga"
-    role="navigation"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`CNav example 1`] = `
-<div>
-  <ul
-    class="nav"
-    role="navigation"
-  >
-    <li
-      class="nav-item"
-    >
-      <a
-        aria-current="page"
-        class="nav-link active"
-        href="#"
-      >
-        Active
-      </a>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        class="nav-link"
-        href="#"
-      >
-        Link
-      </a>
-    </li>
-    <li
-      class="nav-item dropdown"
-    >
-      <a
-        aria-expanded="false"
-        class="nav-link dropdown-toggle"
-        href="#"
-        role="button"
-      >
-        A
-      </a>
-      <ul
-        class="dropdown-menu"
-        role="menu"
-      >
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            B
-          </a>
-        </li>
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            C
-          </a>
-        </li>
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            D
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        class="nav-link"
-        href="#"
-      >
-        Link
-      </a>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        aria-disabled="true"
-        class="nav-link disabled"
-        disabled=""
-        href="#"
-        tabindex="-1"
-      >
-        Disabled
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`loads and displays CNav component 1`] = `
-<div>
-  <ul
-    class="nav"
-    role="navigation"
-  >
-    Test
-  </ul>
-</div>
-`;