@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COffcanvas customize and event on click backdrop 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-end show bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-  <div
-    class="offcanvas-backdrop fade show"
-  />
-</div>
-`;
-
-exports[`COffcanvas customize and event on keypress 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-end show bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-  <div
-    class="offcanvas-backdrop fade show"
-  />
-</div>
-`;
-
-exports[`COffcanvas customize one 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-start bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays COffcanvas component 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-top"
-    role="dialog"
-    tabindex="-1"
-  />
-</div>
-`;

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap

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

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap

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

package/src/components/one-time-password-input/__tests__/COneTimePassword.spec.tsx

@@ -1,361 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { COneTimePassword } from '../COneTimePassword'
-import { COneTimePasswordInput } from '../COneTimePasswordInput'
-
-// Test helpers
-const customAriaLabel = (index: number, total: number) => `Code digit ${index + 1} of ${total}`
-
-// Helper to render OTP with default inputs
-const renderOTP = (props = {}) => {
-  return render(
-    <COneTimePassword {...props}>
-      <COneTimePasswordInput />
-      <COneTimePasswordInput />
-      <COneTimePasswordInput />
-      <COneTimePasswordInput />
-    </COneTimePassword>
-  )
-}
-
-describe('COneTimePassword', () => {
-  // Snapshot tests
-  test('loads and displays COneTimePassword component', () => {
-    const { container } = renderOTP()
-    expect(container).toMatchSnapshot()
-  })
-
-  test('COneTimePassword customize props', () => {
-    const { container } = renderOTP({
-      className: 'custom-otp',
-      size: 'lg',
-      disabled: true,
-      readOnly: true,
-      placeholder: '•',
-      type: 'text',
-    })
-    expect(container).toMatchSnapshot()
-    expect(container.querySelector('.form-otp')).toHaveClass('custom-otp')
-    expect(container.querySelector('.form-otp')).toHaveClass('form-otp-lg')
-  })
-
-  // Controlled pattern tests
-  test('works as controlled component with value prop', async () => {
-    const onChange = jest.fn()
-    const { rerender } = renderOTP({ value: '12', onChange })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveValue('1')
-    expect(inputs[1]).toHaveValue('2')
-    expect(inputs[2]).toHaveValue('')
-    expect(inputs[3]).toHaveValue('')
-
-    // Update value prop
-    rerender(
-      <COneTimePassword value="1234" onChange={onChange}>
-        <COneTimePasswordInput />
-        <COneTimePasswordInput />
-        <COneTimePasswordInput />
-        <COneTimePasswordInput />
-      </COneTimePassword>
-    )
-
-    expect(inputs[0]).toHaveValue('1')
-    expect(inputs[1]).toHaveValue('2')
-    expect(inputs[2]).toHaveValue('3')
-    expect(inputs[3]).toHaveValue('4')
-  })
-
-  test('controlled component calls onChange when value changes', () => {
-    const onChange = jest.fn()
-    renderOTP({ value: '', onChange })
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: '5' } })
-
-    expect(onChange).toHaveBeenCalledWith('5')
-  })
-
-  // Uncontrolled pattern tests
-  test('works as uncontrolled component without value prop', () => {
-    const onChange = jest.fn()
-    renderOTP({ onChange })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveValue('')
-
-    fireEvent.input(inputs[0], { target: { value: '7' } })
-    expect(inputs[0]).toHaveValue('7')
-    expect(onChange).toHaveBeenCalledWith('7')
-  })
-
-  test('works with defaultValue prop for uncontrolled mode', () => {
-    const onChange = jest.fn()
-    renderOTP({ defaultValue: '9876', onChange })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveValue('9')
-    expect(inputs[1]).toHaveValue('8')
-    expect(inputs[2]).toHaveValue('7')
-    expect(inputs[3]).toHaveValue('6')
-  })
-
-  test('defaultValue works with partial values', () => {
-    renderOTP({ defaultValue: '42' })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveValue('4')
-    expect(inputs[1]).toHaveValue('2')
-    expect(inputs[2]).toHaveValue('')
-    expect(inputs[3]).toHaveValue('')
-  })
-
-  test('controlled mode overrides defaultValue', () => {
-    renderOTP({ defaultValue: '1111', value: '2222' })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveValue('2')
-    expect(inputs[1]).toHaveValue('2')
-    expect(inputs[2]).toHaveValue('2')
-    expect(inputs[3]).toHaveValue('2')
-  })
-
-  // Focus and navigation tests
-  test('auto-focuses next input on valid entry', () => {
-    renderOTP()
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: '1' } })
-
-    expect(inputs[1]).toHaveFocus()
-  })
-
-  test('backspace moves to previous input when current is empty', () => {
-    renderOTP({ defaultValue: '12' })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs[2].focus()
-
-    fireEvent.keyDown(inputs[2], { key: 'Backspace' })
-    expect(inputs[1]).toHaveFocus()
-    expect(inputs[1]).toHaveValue('')
-  })
-
-  test('arrow key navigation works', () => {
-    renderOTP({ defaultValue: '1234' })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs[1].focus()
-
-    fireEvent.keyDown(inputs[1], { key: 'ArrowRight' })
-    expect(inputs[2]).toHaveFocus()
-
-    fireEvent.keyDown(inputs[2], { key: 'ArrowLeft' })
-    expect(inputs[1]).toHaveFocus()
-  })
-
-  test('linear mode prevents out-of-order focus', () => {
-    renderOTP({ linear: true })
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.focus(inputs[2]) // Try to focus third input
-
-    expect(inputs[0]).toHaveFocus() // Should focus first empty input instead
-  })
-
-  // Paste functionality tests
-  test('paste distributes characters across inputs', () => {
-    const onChange = jest.fn()
-    renderOTP({ onChange })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs[0].focus()
-
-    fireEvent.paste(inputs[0], { clipboardData: { getData: () => '5678' } })
-
-    expect(inputs[0]).toHaveValue('5')
-    expect(inputs[1]).toHaveValue('6')
-    expect(inputs[2]).toHaveValue('7')
-    expect(inputs[3]).toHaveValue('8')
-    expect(onChange).toHaveBeenLastCalledWith('5678')
-  })
-
-  test('paste from middle input distributes remaining characters', () => {
-    renderOTP({ defaultValue: '12' })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs[1].focus()
-
-    fireEvent.paste(inputs[1], { clipboardData: { getData: () => '99' } })
-
-    expect(inputs[0]).toHaveValue('1')
-    expect(inputs[1]).toHaveValue('9')
-    expect(inputs[2]).toHaveValue('9')
-    expect(inputs[3]).toHaveValue('')
-  })
-
-  test('paste respects input type validation', () => {
-    renderOTP({ type: 'number' })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs[0].focus()
-
-    fireEvent.paste(inputs[0], { clipboardData: { getData: () => 'a1b2' } })
-
-    expect(inputs[0]).toHaveValue('1')
-    expect(inputs[1]).toHaveValue('2')
-    expect(inputs[2]).toHaveValue('')
-    expect(inputs[3]).toHaveValue('')
-  })
-
-  // Validation and type tests
-  test('number type only accepts digits', () => {
-    renderOTP({ type: 'number' })
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: 'a' } })
-
-    expect(inputs[0]).toHaveValue('')
-  })
-
-  test('text type accepts any character', () => {
-    renderOTP({ type: 'text' })
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: 'a' } })
-
-    expect(inputs[0]).toHaveValue('a')
-  })
-
-  // Completion and submission tests
-  test('calls onComplete when all fields are filled', () => {
-    const onComplete = jest.fn()
-    renderOTP({ onComplete })
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: '1' } })
-    fireEvent.input(inputs[1], { target: { value: '2' } })
-    fireEvent.input(inputs[2], { target: { value: '3' } })
-    fireEvent.input(inputs[3], { target: { value: '4' } })
-
-    expect(onComplete).toHaveBeenCalledWith('1234')
-  })
-
-  test('autoSubmit submits form when complete', async () => {
-    const onSubmit = jest.fn((e) => e.preventDefault())
-
-    render(
-      <form onSubmit={onSubmit}>
-        <COneTimePassword autoSubmit>
-          <COneTimePasswordInput />
-          <COneTimePasswordInput />
-          <COneTimePasswordInput />
-          <COneTimePasswordInput />
-        </COneTimePassword>
-      </form>
-    )
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: '1' } })
-    fireEvent.input(inputs[1], { target: { value: '2' } })
-    fireEvent.input(inputs[2], { target: { value: '3' } })
-    fireEvent.input(inputs[3], { target: { value: '4' } })
-
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalled()
-    })
-  })
-
-  // Disabled and readonly tests
-  test('disabled prop disables all inputs', () => {
-    renderOTP({ disabled: true })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs.forEach((input) => {
-      expect(input).toBeDisabled()
-    })
-  })
-
-  test('readOnly prop makes all inputs readonly', () => {
-    renderOTP({ readOnly: true })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs.forEach((input) => {
-      expect(input).toHaveAttribute('readonly')
-    })
-  })
-
-  // Masked input tests
-  test('masked prop sets input type to password', () => {
-    renderOTP({ masked: true })
-
-    const inputs = document.querySelectorAll('input[type="password"]')
-    expect(inputs).toHaveLength(4)
-    inputs.forEach((input) => {
-      expect(input).toHaveAttribute('type', 'password')
-    })
-  })
-
-  // Hidden input tests
-  test('creates hidden input with combined value', () => {
-    renderOTP({ name: 'otp', id: 'test-otp' })
-
-    const hiddenInput = document.querySelector('input[type="hidden"]')
-    expect(hiddenInput).toBeInTheDocument()
-    expect(hiddenInput).toHaveAttribute('name', 'otp')
-    expect(hiddenInput).toHaveAttribute('id', 'test-otp')
-
-    const inputs = screen.getAllByRole('textbox')
-    fireEvent.input(inputs[0], { target: { value: '9' } })
-
-    expect(hiddenInput).toHaveValue('9')
-  })
-
-  // Accessibility tests
-  test('provides proper ARIA labels', () => {
-    renderOTP()
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveAttribute('aria-label', 'Digit 1 of 4')
-    expect(inputs[1]).toHaveAttribute('aria-label', 'Digit 2 of 4')
-    expect(inputs[2]).toHaveAttribute('aria-label', 'Digit 3 of 4')
-    expect(inputs[3]).toHaveAttribute('aria-label', 'Digit 4 of 4')
-  })
-
-  test('custom ariaLabel function works', () => {
-    renderOTP({ ariaLabel: customAriaLabel })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveAttribute('aria-label', 'Code digit 1 of 4')
-  })
-
-  test('applies form validation classes', () => {
-    renderOTP({ invalid: true })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs.forEach((input) => {
-      expect(input).toHaveClass('is-invalid')
-    })
-  })
-
-  // Placeholder tests
-  test('single character placeholder applies to all inputs', () => {
-    renderOTP({ placeholder: '•' })
-
-    const inputs = screen.getAllByRole('textbox')
-    inputs.forEach((input) => {
-      expect(input).toHaveAttribute('placeholder', '•')
-    })
-  })
-
-  test('multi-character placeholder distributes by index', () => {
-    renderOTP({ placeholder: 'ABCD' })
-
-    const inputs = screen.getAllByRole('textbox')
-    expect(inputs[0]).toHaveAttribute('placeholder', 'A')
-    expect(inputs[1]).toHaveAttribute('placeholder', 'B')
-    expect(inputs[2]).toHaveAttribute('placeholder', 'C')
-    expect(inputs[3]).toHaveAttribute('placeholder', 'D')
-  })
-})

package/src/components/one-time-password-input/__tests__/__snapshots__/COneTimePassword.spec.tsx.snap

@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COneTimePassword COneTimePassword customize props 1`] = `
-<div>
-  <div
-    class="form-otp form-otp-lg custom-otp"
-    role="group"
-  >
-    <input
-      aria-label="Digit 1 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      disabled=""
-      inputmode="text"
-      maxlength="1"
-      pattern=".*"
-      placeholder="•"
-      readonly=""
-      tabindex="0"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 2 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      disabled=""
-      inputmode="text"
-      maxlength="1"
-      pattern=".*"
-      placeholder="•"
-      readonly=""
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 3 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      disabled=""
-      inputmode="text"
-      maxlength="1"
-      pattern=".*"
-      placeholder="•"
-      readonly=""
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 4 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      disabled=""
-      inputmode="text"
-      maxlength="1"
-      pattern=".*"
-      placeholder="•"
-      readonly=""
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      disabled=""
-      type="hidden"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`COneTimePassword loads and displays COneTimePassword component 1`] = `
-<div>
-  <div
-    class="form-otp"
-    role="group"
-  >
-    <input
-      aria-label="Digit 1 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      inputmode="numeric"
-      maxlength="1"
-      pattern="[0-9]*"
-      tabindex="0"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 2 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      inputmode="numeric"
-      maxlength="1"
-      pattern="[0-9]*"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 3 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      inputmode="numeric"
-      maxlength="1"
-      pattern="[0-9]*"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      aria-label="Digit 4 of 4"
-      autocomplete="off"
-      class="form-otp-control"
-      inputmode="numeric"
-      maxlength="1"
-      pattern="[0-9]*"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
-    <input
-      type="hidden"
-      value=""
-    />
-  </div>
-</div>
-`;

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CPagination, CPaginationItem } from '../index'
-
-test('loads and displays CPagination component', async () => {
-  const { container } = render(<CPagination>Test</CPagination>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CPagination customize', async () => {
-  const { container } = render(
-    <CPagination className="bazinga" aria-label="ariaLabel" size="lg">
-      Test
-    </CPagination>
-  )
-  expect(container).toMatchSnapshot()
-  let element = container.firstChild
-  if (element === null) {
-    expect(true).toBe(false)
-  } else {
-    element = element.firstChild
-    expect(element).toHaveClass('bazinga')
-    expect(element).toHaveClass('pagination')
-    expect(element).toHaveClass('pagination-lg')
-  }
-})
-
-test('CPagination example', async () => {
-  const { container } = render(
-    <CPagination>
-      <CPaginationItem>A</CPaginationItem>
-      <CPaginationItem>B</CPaginationItem>
-      <CPaginationItem>C</CPaginationItem>
-    </CPagination>
-  )
-  expect(container).toMatchSnapshot()
-})

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CPaginationItem } from '../index'
-
-test('loads and displays CPaginationItem component', async () => {
-  const { container } = render(<CPaginationItem>Test</CPaginationItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CPaginationItem customize', async () => {
-  const { container } = render(
-    <CPaginationItem className="bazinga" active={true} as="h3" disabled={true}>
-      Test
-    </CPaginationItem>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('page-item')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveClass('disabled')
-  let element = container.firstChild
-  if (element === null) {
-    expect(true).toBe(false)
-  } else {
-    element = element.firstChild
-    expect(element).toHaveClass('page-link')
-  }
-})