@coreui/react-pro 5.24.1 → 5.26.0

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { CChip } from '../../chip'
 import { CChipInput } from '../index'
 
 test('loads and displays CChipInput component', async () => {
@@ -52,7 +53,9 @@ test('CChipInput removes chip via remove button', async () => {
 
 test('CChipInput selectable chips', async () => {
   const onSelect = jest.fn()
-  const { container } = render(<CChipInput defaultValue={['React']} selectable onSelect={onSelect} />)
+  const { container } = render(
+    <CChipInput defaultValue={['React']} selectable onSelect={onSelect} />
+  )
 
   const chip = container.querySelector('.chip') as HTMLElement
   fireEvent.click(chip)
@@ -60,3 +63,66 @@ test('CChipInput selectable chips', async () => {
   expect(chip).toHaveClass('active')
   expect(onSelect).toHaveBeenCalledWith(['React'])
 })
+
+test('CChipInput always renders a hidden input for form submission', async () => {
+  const { container } = render(<CChipInput defaultValue={['React']} />)
+
+  const hidden = container.querySelector('input[type="hidden"]')
+  expect(hidden).not.toBeNull()
+  expect(hidden).toHaveAttribute('name')
+  expect(hidden).toHaveValue('React')
+})
+
+test('CChipInput single selection deselects siblings', async () => {
+  const { container } = render(
+    <CChipInput defaultValue={['React', 'Vue']} selectable selectionMode="single" />
+  )
+
+  const chips = container.querySelectorAll<HTMLElement>('.chip')
+  fireEvent.click(chips[0])
+  fireEvent.click(chips[1])
+
+  expect(chips[0]).not.toHaveClass('active')
+  expect(chips[1]).toHaveClass('active')
+})
+
+test('CChipInput ArrowRight on the last chip moves focus to the input', async () => {
+  const { container } = render(<CChipInput defaultValue={['React', 'Vue']} />)
+
+  const chips = container.querySelectorAll<HTMLElement>('.chip')
+  const lastChip = chips[chips.length - 1]
+  const input = container.querySelector('.chip-input-field') as HTMLInputElement
+  lastChip.focus()
+
+  fireEvent.keyDown(lastChip, { key: 'ArrowRight' })
+  expect(input).toHaveFocus()
+})
+
+test('CChipInput ArrowLeft on the last chip moves focus to the input in RTL', async () => {
+  document.documentElement.dir = 'rtl'
+
+  const { container } = render(<CChipInput defaultValue={['React', 'Vue']} />)
+
+  const chips = container.querySelectorAll<HTMLElement>('.chip')
+  const lastChip = chips[chips.length - 1]
+  const input = container.querySelector('.chip-input-field') as HTMLInputElement
+  lastChip.focus()
+
+  fireEvent.keyDown(lastChip, { key: 'ArrowLeft' })
+  expect(input).toHaveFocus()
+
+  document.documentElement.dir = ''
+})
+
+test('CChipInput seeds initial chips from CChip children', () => {
+  const { container, getByText } = render(
+    <CChipInput>
+      <CChip value="React">React</CChip>
+      <CChip value="Vue">Vue</CChip>
+    </CChipInput>
+  )
+
+  expect(container.querySelectorAll('.chip')).toHaveLength(2)
+  expect(getByText('React')).toBeInTheDocument()
+  expect(getByText('Vue')).toBeInTheDocument()
+})

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__/CChipInput.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`loads and displays CChipInput component 1`] = `
     <span
       class="chip"
       data-coreui-chip-focusable="true"
+      data-coreui-chip-value="React"
       tabindex="0"
     >
       React
@@ -45,6 +46,7 @@ exports[`loads and displays CChipInput component 1`] = `
     <span
       class="chip"
       data-coreui-chip-focusable="true"
+      data-coreui-chip-value="TypeScript"
       tabindex="0"
     >
       TypeScript
@@ -86,6 +88,11 @@ exports[`loads and displays CChipInput component 1`] = `
       type="text"
       value=""
     />
+    <input
+      name=":r0:"
+      type="hidden"
+      value="React,TypeScript"
+    />
   </div>
 </div>
 `;

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/grid/CContainer.tsx

@@ -50,7 +50,9 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
       const breakpoint = rest[bp]
       delete rest[bp]
 
-      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
+      if (breakpoint) {
+        repsonsiveClassNames.push(`container-${bp}`)
+      }
     })
 
     return (

package/src/components/header/CHeaderBrand.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CHeaderBrandProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+export interface CHeaderBrandProps extends AnchorHTMLAttributes<
+  HTMLAnchorElement | HTMLSpanElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './callout'
 export * from './card'
 export * from './carousel'
 export * from './chip'
+export * from './chip-set'
 export * from './close-button'
 export * from './collapse'
 export * from './conditional-portal'
@@ -41,6 +42,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/link/CLink.tsx

@@ -4,8 +4,10 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CLinkProps
-  extends Omit<AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'as'> {
+export interface CLinkProps extends Omit<
+  AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+  'as'
+> {
   /**
    * Toggle the active state for the component.
    */
@@ -40,8 +42,9 @@ export const CLink: PolymorphicRefForwardingComponent<'a', CLinkProps> = forward
       {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
       {...((Component === 'a' || Component === 'button') && {
         onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-          event.preventDefault
-          !disabled && rest.onClick && rest.onClick(event)
+          if (!disabled) {
+            rest.onClick?.(event)
+          }
         },
       })}
       disabled={disabled}

package/src/components/list-group/CListGroupItem.tsx

@@ -8,8 +8,9 @@ import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+export interface CListGroupItemProps extends AnchorHTMLAttributes<
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement
+> {
   /**
    * Toggle the active state for the component.
    */

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/modal/CModal.tsx

@@ -120,6 +120,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     ref
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const mouseDownTarget = useRef<EventTarget | null>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -136,11 +137,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     useEffect(() => {
       if (_visible) {
+        document.addEventListener('mousedown', handleMouseDown)
         document.addEventListener('mouseup', handleClickOutside)
         document.addEventListener('keydown', handleKeyDown)
       }
 
       return () => {
+        document.removeEventListener('mousedown', handleMouseDown)
         document.removeEventListener('mouseup', handleClickOutside)
         document.removeEventListener('keydown', handleKeyDown)
       }
@@ -155,8 +158,14 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }
 
     useLayoutEffect(() => {
+      if (!staticBackdrop) {
+        return
+      }
+
       onClosePrevented?.()
-      setTimeout(() => setStaticBackdrop(false), duration)
+      const timeout = setTimeout(() => setStaticBackdrop(false), duration)
+
+      return () => clearTimeout(timeout)
     }, [staticBackdrop])
 
     // Set focus to modal after open
@@ -186,8 +195,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
     }, [_visible])
 
+    const handleMouseDown = (event: Event) => {
+      mouseDownTarget.current = event.target
+    }
+
     const handleClickOutside = (event: Event) => {
-      if (modalRef.current && modalRef.current == event.target) {
+      if (
+        modalRef.current &&
+        modalRef.current == event.target &&
+        mouseDownTarget.current == event.target
+      ) {
         handleDismiss()
       }
     }

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -48,6 +48,49 @@ test('CModal dialog close on press ESC', async () => {
   }
 })
 
+test('CModal calls onClosePrevented only when closing is actually prevented', async () => {
+  const onClosePrevented = jest.fn()
+
+  render(
+    <CModal backdrop="static" onClosePrevented={onClosePrevented} portal={false} visible>
+      Test
+    </CModal>
+  )
+
+  expect(onClosePrevented).toHaveBeenCalledTimes(0)
+
+  const modal = screen.getByText('Test').closest('.modal') as HTMLElement
+  fireEvent.keyDown(modal, { key: 'Escape' })
+
+  await waitFor(() => {
+    expect(onClosePrevented).toHaveBeenCalledTimes(1)
+    expect(modal).toHaveClass('modal-static')
+  })
+})
+
+test('CModal does not close when a press started inside the dialog is released over the backdrop area', async () => {
+  const onClose = jest.fn()
+
+  render(
+    <CModal onClose={onClose} portal={false} visible>
+      <div data-testid="content">Test</div>
+    </CModal>
+  )
+
+  const modal = screen.getByText('Test').closest('.modal') as HTMLElement
+  const content = screen.getByTestId('content')
+
+  fireEvent.mouseDown(content)
+  fireEvent.mouseUp(modal)
+  expect(onClose).toHaveBeenCalledTimes(0)
+
+  fireEvent.mouseDown(modal)
+  fireEvent.mouseUp(modal)
+  await waitFor(() => {
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})
+
 // test('CModal dialog closes when clicking outside the modal', async () => {
 //   const onClose = jest.fn()