@coreui/react-pro 5.25.0 → 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__/__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/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'

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/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()