@coreui/react-pro 5.26.0 → 5.27.1

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CCarousel component 1`] = `
-<div>
-  <div
-    class="carousel slide"
-  >
-    <div
-      class="carousel-indicators"
-    >
-      <button
-        aria-current="true"
-        aria-label="Slide 1"
-        class="active"
-        data-coreui-target=""
-      />
-      <button
-        aria-label="Slide 2"
-        class=""
-        data-coreui-target=""
-      />
-      <button
-        aria-label="Slide 3"
-        class=""
-        data-coreui-target=""
-      />
-    </div>
-    <div
-      class="carousel-inner"
-    >
-      <div
-        class="carousel-item active"
-      >
-        Item-1
-        <div
-          class="carousel-caption"
-        >
-          Caption-1
-        </div>
-      </div>
-      <div
-        class="carousel-item"
-      >
-        Item-2
-        <div
-          class="carousel-caption"
-        >
-          Caption-2
-        </div>
-      </div>
-      <div
-        class="carousel-item"
-      >
-        Item-3
-        <div
-          class="carousel-caption"
-        >
-          Caption-3
-        </div>
-      </div>
-    </div>
-    <button
-      class="carousel-control-prev"
-    >
-      <span
-        aria-label="prev"
-        class="carousel-control-prev-icon"
-      />
-    </button>
-    <button
-      class="carousel-control-next"
-    >
-      <span
-        aria-label="next"
-        class="carousel-control-next-icon"
-      />
-    </button>
-  </div>
-</div>
-`;

package/src/components/chip/__tests__/CChip.spec.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CChip } from '../index'
-
-test('loads and displays CChip component', async () => {
-  const { container } = render(<CChip>Test</CChip>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CChip customize', async () => {
-  const { container } = render(
-    <CChip
-      active={true}
-      className="bazinga"
-      clickable={true}
-      color="warning"
-      as="button"
-      disabled={true}
-      size="lg"
-      variant="outline"
-    >
-      Test
-    </CChip>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('chip')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveClass('chip-clickable')
-  expect(container.firstChild).toHaveClass('chip-warning')
-  expect(container.firstChild).toHaveClass('chip-lg')
-  expect(container.firstChild).toHaveClass('chip-outline')
-  expect(container.firstChild).toHaveClass('disabled')
-})
-
-test('CChip removable', async () => {
-  const onRemove = jest.fn()
-  const { container } = render(
-    <CChip removable={true} ariaRemoveLabel="Remove test" onRemove={onRemove}>
-      Test
-    </CChip>
-  )
-
-  const removeButton = container.querySelector('.chip-remove')
-  expect(container).toMatchSnapshot()
-  expect(removeButton).toBeInTheDocument()
-  removeButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-  expect(onRemove).toHaveBeenCalled()
-})
-
-test('CChip selectable', async () => {
-  const onSelect = jest.fn()
-  const onDeselect = jest.fn()
-  const { getByText } = render(
-    <CChip selectable={true} onSelect={onSelect} onDeselect={onDeselect}>
-      Selectable
-    </CChip>
-  )
-  const chip = getByText('Selectable')
-
-  expect(chip).toHaveAttribute('aria-selected', 'false')
-  fireEvent.click(chip)
-  expect(chip).toHaveClass('active')
-  expect(chip).toHaveAttribute('aria-selected', 'true')
-  expect(onSelect).toHaveBeenCalledTimes(1)
-
-  fireEvent.keyDown(chip, { key: 'Enter' })
-  expect(chip).not.toHaveClass('active')
-  expect(chip).toHaveAttribute('aria-selected', 'false')
-  expect(onDeselect).toHaveBeenCalledTimes(1)
-})
-
-test('CChip filter shows a check icon while selected and implies selectable', async () => {
-  const onSelect = jest.fn()
-  const { getByText, container } = render(
-    <CChip filter={true} onSelect={onSelect}>
-      Filter
-    </CChip>
-  )
-  const chip = getByText('Filter')
-
-  expect(chip).toHaveAttribute('aria-selected', 'false')
-  expect(container.querySelector('.chip-check')).not.toBeInTheDocument()
-
-  fireEvent.click(chip)
-  expect(chip).toHaveClass('active')
-  expect(onSelect).toHaveBeenCalledTimes(1)
-  expect(container.querySelector('.chip-check')).toBeInTheDocument()
-
-  fireEvent.click(chip)
-  expect(container.querySelector('.chip-check')).not.toBeInTheDocument()
-})
-
-test('CChip filter renders a custom selectedIcon', async () => {
-  const { container } = render(
-    <CChip filter={true} selected={true} selectedIcon={<span data-testid="custom-check" />}>
-      Filter
-    </CChip>
-  )
-
-  expect(container.querySelector('.chip-check [data-testid="custom-check"]')).toBeInTheDocument()
-})
-
-test('CChip delete triggers remove callback', async () => {
-  const onRemove = jest.fn()
-  const { getByText } = render(
-    <div>
-      <CChip removable={true} onRemove={onRemove}>
-        First
-      </CChip>
-      <CChip removable={true}>Second</CChip>
-    </div>
-  )
-
-  const first = getByText('First')
-  first.focus()
-  fireEvent.keyDown(first, { key: 'Delete' })
-  expect(onRemove).toHaveBeenCalledTimes(1)
-})

package/src/components/chip/__tests__/__snapshots__/CChip.spec.tsx.snap

@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CChip customize 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    class="chip active disabled chip-warning chip-lg chip-clickable chip-outline bazinga"
-    disabled=""
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`CChip removable 1`] = `
-<div>
-  <span
-    class="chip"
-    data-coreui-chip-focusable="true"
-    tabindex="0"
-  >
-    Test
-    <button
-      aria-label="Remove test"
-      class="chip-remove"
-      tabindex="-1"
-      type="button"
-    >
-      <svg
-        fill="none"
-        height="16"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="2"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <line
-          x1="4"
-          x2="12"
-          y1="4"
-          y2="12"
-        />
-        <line
-          x1="12"
-          x2="4"
-          y1="4"
-          y2="12"
-        />
-      </svg>
-    </button>
-  </span>
-</div>
-`;
-
-exports[`loads and displays CChip component 1`] = `
-<div>
-  <span
-    class="chip"
-  >
-    Test
-  </span>
-</div>
-`;

package/src/components/chip-set/__tests__/CChipSet.spec.tsx

@@ -1,215 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CChip } from '../../chip'
-import { CChipSet } from '../index'
-
-test('loads and displays CChipSet component', async () => {
-  const { container } = render(
-    <CChipSet>
-      <CChip value="a">A</CChip>
-      <CChip value="b">B</CChip>
-    </CChipSet>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('chip-set')
-})
-
-test('CChipSet passes selectable down to its chips', async () => {
-  const { getByText } = render(
-    <CChipSet selectable={true}>
-      <CChip value="a">A</CChip>
-      <CChip value="b">B</CChip>
-    </CChipSet>
-  )
-
-  expect(getByText('A')).toHaveAttribute('aria-selected', 'false')
-  fireEvent.click(getByText('A'))
-  expect(getByText('A')).toHaveClass('active')
-})
-
-test('CChipSet allows multiple selected chips by default', async () => {
-  const onSelect = jest.fn()
-  const { getByText } = render(
-    <CChipSet selectable={true} onSelect={onSelect}>
-      <CChip value="a">A</CChip>
-      <CChip value="b">B</CChip>
-    </CChipSet>
-  )
-
-  fireEvent.click(getByText('A'))
-  fireEvent.click(getByText('B'))
-
-  expect(getByText('A')).toHaveClass('active')
-  expect(getByText('B')).toHaveClass('active')
-  expect(onSelect).toHaveBeenLastCalledWith(['a', 'b'])
-})
-
-test('CChipSet deselects siblings in single selection mode', async () => {
-  const onSelect = jest.fn()
-  const { getByText } = render(
-    <CChipSet selectable={true} selectionMode="single" onSelect={onSelect}>
-      <CChip value="a">A</CChip>
-      <CChip value="b">B</CChip>
-    </CChipSet>
-  )
-
-  fireEvent.click(getByText('A'))
-  fireEvent.click(getByText('B'))
-
-  expect(getByText('A')).not.toHaveClass('active')
-  expect(getByText('B')).toHaveClass('active')
-  expect(onSelect).toHaveBeenLastCalledWith(['b'])
-})
-
-test('CChipSet honors a controlled selected', async () => {
-  const { getByText } = render(
-    <CChipSet selectable={true} selected={['b']}>
-      <CChip value="a">A</CChip>
-      <CChip value="b">B</CChip>
-    </CChipSet>
-  )
-
-  expect(getByText('A')).not.toHaveClass('active')
-  expect(getByText('B')).toHaveClass('active')
-})
-
-test('CChipSet forwards filter so a selected chip shows a check icon', async () => {
-  const { getByText, container } = render(
-    <CChipSet filter={true} selected={['a']}>
-      <CChip value="a">A</CChip>
-    </CChipSet>
-  )
-
-  expect(getByText('A')).toHaveClass('active')
-  expect(container.querySelector('.chip-check')).toBeInTheDocument()
-})
-
-test('CChipSet moves focus between chips with the keyboard', async () => {
-  const { getByText } = render(
-    <CChipSet selectable>
-      <CChip value="first">First</CChip>
-      <CChip value="second">Second</CChip>
-      <CChip value="third">Third</CChip>
-    </CChipSet>
-  )
-
-  const first = getByText('First')
-  const second = getByText('Second')
-  const third = getByText('Third')
-
-  first.focus()
-  fireEvent.keyDown(first, { key: 'ArrowRight' })
-  expect(second).toHaveFocus()
-
-  fireEvent.keyDown(second, { key: 'End' })
-  expect(third).toHaveFocus()
-
-  fireEvent.keyDown(third, { key: 'Home' })
-  expect(first).toHaveFocus()
-
-  // No cycling past the first chip.
-  fireEvent.keyDown(first, { key: 'ArrowLeft' })
-  expect(first).toHaveFocus()
-})
-
-test('CChipSet mirrors arrow keys in RTL', async () => {
-  document.documentElement.dir = 'rtl'
-
-  const { getByText } = render(
-    <CChipSet selectable>
-      <CChip value="first">First</CChip>
-      <CChip value="second">Second</CChip>
-    </CChipSet>
-  )
-
-  const first = getByText('First')
-  const second = getByText('Second')
-
-  first.focus()
-  // In RTL, ArrowLeft moves to the next chip.
-  fireEvent.keyDown(first, { key: 'ArrowLeft' })
-  expect(second).toHaveFocus()
-
-  fireEvent.keyDown(second, { key: 'ArrowRight' })
-  expect(first).toHaveFocus()
-
-  document.documentElement.dir = ''
-})
-
-test('CChipSet fires onRemove so the parent can drop the chip', async () => {
-  const onRemove = jest.fn()
-
-  const Example = () => {
-    const [values, setValues] = React.useState(['a', 'b'])
-    return (
-      <CChipSet
-        removable
-        onRemove={(value) => {
-          onRemove(value)
-          setValues((prev) => prev.filter((item) => item !== value))
-        }}
-      >
-        {values.map((value) => (
-          <CChip key={value} value={value}>
-            {value.toUpperCase()}
-          </CChip>
-        ))}
-      </CChipSet>
-    )
-  }
-
-  const { getByText, queryByText } = render(<Example />)
-
-  const removeButton = getByText('A').querySelector('.chip-remove')
-  fireEvent.click(removeButton as Element)
-
-  expect(onRemove).toHaveBeenCalledWith('a')
-  expect(queryByText('A')).not.toBeInTheDocument()
-  expect(getByText('B')).toBeInTheDocument()
-})
-
-test('CChipSet with defaultChips removes the chip itself (uncontrolled list)', async () => {
-  const onRemove = jest.fn()
-  const { getByText, queryByText } = render(
-    <CChipSet removable defaultChips={['a', { value: 'b', label: 'B' }]} onRemove={onRemove} />
-  )
-
-  fireEvent.click(getByText('a').querySelector('.chip-remove') as Element)
-
-  expect(onRemove).toHaveBeenCalledWith('a')
-  expect(queryByText('a')).not.toBeInTheDocument()
-  expect(getByText('B')).toBeInTheDocument()
-})
-
-test('CChipSet renders chips from the chips prop (strings and objects)', async () => {
-  const { getByText, container } = render(
-    <CChipSet
-      selectable
-      chips={[
-        'react',
-        { value: 'vue', label: 'Vue' },
-        { value: 'ng', label: 'Angular', selectable: false },
-      ]}
-    />
-  )
-
-  expect(container.querySelectorAll('.chip')).toHaveLength(3)
-  expect(getByText('react')).toBeInTheDocument()
-  expect(getByText('Vue')).toBeInTheDocument()
-
-  // Per-item override still works with the data-driven API.
-  fireEvent.click(getByText('Angular'))
-  expect(getByText('Angular')).not.toHaveClass('active')
-})
-
-test('CChipSet disables every chip', async () => {
-  const { getByText } = render(
-    <CChipSet disabled={true} removable={true}>
-      <CChip value="a">A</CChip>
-    </CChipSet>
-  )
-
-  expect(getByText('A')).toHaveClass('disabled')
-  expect(getByText('A').querySelector('.chip-remove')).toBeNull()
-})

package/src/components/chip-set/__tests__/__snapshots__/CChipSet.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CChipSet component 1`] = `
-<div>
-  <div
-    class="chip-set"
-  >
-    <span
-      class="chip"
-      data-coreui-chip-value="a"
-    >
-      A
-    </span>
-    <span
-      class="chip"
-      data-coreui-chip-value="b"
-    >
-      B
-    </span>
-  </div>
-</div>
-`;

package/src/components/close-button/__tests__/CCloseButton.spec.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCloseButton } from '../index'
-
-test('loads and displays CCloseButton component', async () => {
-  const { container } = render(<CCloseButton />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
-  const { container } = render(<CCloseButton white={true} disabled={true} className="bazinga" />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveClass('btn-close-white')
-  expect(button).toHaveClass('bazinga')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  />
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  />
-</div>
-`;

package/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { render, screen, act } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCollapse } from '../index'
-
-test('loads and displays CCollapse component', async () => {
-  const { container } = render(<CCollapse>Test</CCollapse>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse customize', async () => {
-  const { container } = render(<CCollapse className="bazinga">Test</CCollapse>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse use case test', async () => {
-  jest.useFakeTimers()
-
-  const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={true}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={false}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  jest.useRealTimers()
-})

package/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCollapse customize 1`] = `
-<div>
-  <div
-    class="bazinga collapse"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCollapse component 1`] = `
-<div>
-  <div
-    class="collapse"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/date-picker/__tests__/CDatePicker.spec.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDatePicker } from '../CDatePicker'
-
-test('loads and displays CDatePicker component', async () => {
-  const { container } = render(<CDatePicker />)
-  expect(container).toMatchSnapshot()
-})

package/src/components/date-picker/__tests__/__snapshots__/CDatePicker.spec.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CDatePicker component 1`] = `
-<div>
-  <div
-    class="date-picker"
-  >
-    <div
-      class="date-picker-input-group"
-    >
-      <div
-        class="date-picker-input-wrapper"
-      >
-        <input
-          autocomplete="off"
-          class="date-picker-input"
-          placeholder="Select date"
-        />
-      </div>
-      <div
-        class="date-picker-indicator"
-        tabindex="0"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/date-range-picker/__tests__/CDateRangePicker.spec.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDateRangePicker } from '../CDateRangePicker'
-
-test('loads and displays CDateRangePicker component', async () => {
-  const { container } = render(<CDateRangePicker />)
-  expect(container).toMatchSnapshot()
-})