@coreui/react-pro 5.24.1 → 5.26.0

package/src/components/carousel/CCarousel.tsx

@@ -1,16 +1,8 @@
-import React, {
-  Children,
-  forwardRef,
-  HTMLAttributes,
-  TouchEvent,
-  useState,
-  useEffect,
-  useRef,
-} from 'react'
+import React, { Children, forwardRef, HTMLAttributes, useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isInViewport } from '../../utils'
+import { isInViewport, isRTL, Swipe } from '../../utils'
 import { useForkedRef } from '../../hooks'
 
 import { CCarouselContext } from './CCarouselContext'
@@ -95,27 +87,32 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
     const data = useRef<DataType>({}).current
+    const handleControlClickRef = useRef<(direction: string) => void>(() => undefined)
 
     const [active, setActive] = useState<number>(activeIndex)
     const [animating, setAnimating] = useState<boolean>(false)
     const [customInterval, setCustomInterval] = useState<boolean | number>()
     const [direction, setDirection] = useState<string>('next')
     const [itemsNumber, setItemsNumber] = useState<number>(0)
-    const [touchPosition, setTouchPosition] = useState<number | null>(null)
     const [visible, setVisible] = useState<boolean>()
 
     useEffect(() => {
       setItemsNumber(Children.toArray(children).length)
-    })
+    }, [children])
 
     useEffect(() => {
-      visible && cycle()
+      if (visible) {
+        cycle()
+      }
     }, [visible])
 
     useEffect(() => {
-      !animating && cycle()
-      !animating && onSlid && onSlid(active, direction)
-      animating && onSlide && onSlide(active, direction)
+      if (animating) {
+        onSlide?.(active, direction)
+      } else {
+        cycle()
+        onSlid?.(active, direction)
+      }
     }, [animating])
 
     useEffect(() => {
@@ -124,10 +121,34 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       return () => {
         window.removeEventListener('scroll', handleScroll)
       }
-    })
+    }, [])
+
+    useEffect(() => {
+      if (!touch || !carouselRef.current) {
+        return
+      }
+
+      const swipe = new Swipe(carouselRef.current, {
+        onLeft: () => handleControlClickRef.current(isRTL(carouselRef.current) ? 'prev' : 'next'),
+        onRight: () => handleControlClickRef.current(isRTL(carouselRef.current) ? 'next' : 'prev'),
+      })
+
+      return () => swipe.dispose()
+    }, [touch])
+
+    useEffect(() => {
+      return () => clearCycleTimeout()
+    }, [])
+
+    const clearCycleTimeout = () => {
+      if (data.timeout) {
+        clearTimeout(data.timeout)
+        data.timeout = null
+      }
+    }
 
     const cycle = () => {
-      _pause()
+      clearCycleTimeout()
       if (!wrap && active === itemsNumber - 1) {
         return
       }
@@ -139,7 +160,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         )
       }
     }
-    const _pause = () => pause && data.timeout && clearTimeout(data.timeout)
+    const _pause = () => pause && clearCycleTimeout()
 
     const nextItemWhenVisible = () => {
       // Don't call next when the page isn't visible
@@ -158,11 +179,12 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       }
       setDirection(direction)
       if (direction === 'next') {
-        active === itemsNumber - 1 ? setActive(0) : setActive(active + 1)
+        setActive(active === itemsNumber - 1 ? 0 : active + 1)
       } else {
-        active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1)
+        setActive(active === 0 ? itemsNumber - 1 : active - 1)
       }
     }
+    handleControlClickRef.current = handleControlClick
 
     const handleIndicatorClick = (index: number) => {
       if (active === index) {
@@ -189,32 +211,6 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       }
     }
 
-    const handleTouchMove = (e: TouchEvent) => {
-      const touchDown = touchPosition
-
-      if (touchDown === null) {
-        return
-      }
-
-      const currentTouch = e.touches[0].clientX
-      const diff = touchDown - currentTouch
-
-      if (diff > 5) {
-        handleControlClick('next')
-      }
-
-      if (diff < -5) {
-        handleControlClick('prev')
-      }
-
-      setTouchPosition(null)
-    }
-
-    const handleTouchStart = (e: TouchEvent) => {
-      const touchDown = e.touches[0].clientX
-      setTouchPosition(touchDown)
-    }
-
     return (
       <div
         className={classNames(
@@ -227,7 +223,6 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
-        {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}
         {...rest}
         ref={forkedRef}
       >
@@ -244,7 +239,9 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
                   <button
                     key={`indicator${index}`}
                     onClick={() => {
-                      !animating && handleIndicatorClick(index)
+                      if (!animating) {
+                        handleIndicatorClick(index)
+                      }
                     }}
                     className={classNames({
                       active: active === index,
@@ -260,8 +257,8 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {
               if (React.isValidElement(child)) {
-                return React.cloneElement(child as React.ReactElement<any>, {
-                  active: active === index ? true : false,
+                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+                  active: active === index,
                   direction: direction,
                   key: index,
                 })

package/src/components/carousel/CCarouselContext.ts

@@ -5,4 +5,4 @@ export interface CCarouselContextProps {
   setCustomInterval: (a: boolean | number) => void
 }
 
-export const CCarouselContext = createContext({} as CCarouselContextProps)
+export const CCarouselContext = createContext({} as CCarouselContextProps)

package/src/components/carousel/CCarouselItem.tsx

@@ -64,37 +64,36 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
     }, [active])
 
     useEffect(() => {
-      carouselItemRef.current?.addEventListener('transitionstart', () => {
-        active && setAnimating(true)
-      })
-      carouselItemRef.current?.addEventListener('transitionend', () => {
-        active && setAnimating(false)
-        setDirectionClassName('')
-        setOrderClassName('')
+      const element = carouselItemRef.current
+
+      if (!element) {
+        return
+      }
+
+      const handleTransitionStart = () => {
         if (active) {
-          setActiveClassName('active')
+          setAnimating(true)
         }
-        if (!active) {
-          setActiveClassName('')
+      }
+
+      const handleTransitionEnd = () => {
+        if (active) {
+          setAnimating(false)
         }
-      })
+
+        setDirectionClassName('')
+        setOrderClassName('')
+        setActiveClassName(active ? 'active' : '')
+      }
+
+      element.addEventListener('transitionstart', handleTransitionStart)
+      element.addEventListener('transitionend', handleTransitionEnd)
+
       return () => {
-        carouselItemRef.current?.removeEventListener('transitionstart', () => {
-          active && setAnimating(true)
-        })
-        carouselItemRef.current?.removeEventListener('transitionend', () => {
-          active && setAnimating(false)
-          setDirectionClassName('')
-          setOrderClassName('')
-          if (active) {
-            setActiveClassName('active')
-          }
-          if (!active) {
-            setActiveClassName('')
-          }
-        })
+        element.removeEventListener('transitionstart', handleTransitionStart)
+        element.removeEventListener('transitionend', handleTransitionEnd)
       }
-    })
+    }, [active])
 
     return (
       <div

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

@@ -59,6 +59,49 @@ test('loads and displays CCarousel component', async () => {
   expect(container).toMatchSnapshot()
 })
 
+test('CCarousel does not stack cycle timeouts when pause is disabled', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CCarousel interval={1000} pause={false}>
+      <CCarouselItem>Item-1</CCarouselItem>
+      <CCarouselItem>Item-2</CCarouselItem>
+      <CCarouselItem>Item-3</CCarouselItem>
+    </CCarousel>
+  )
+
+  const carousel = document.querySelector('.carousel') as HTMLElement
+  const baseTimerCount = jest.getTimerCount()
+
+  fireEvent.mouseLeave(carousel)
+  fireEvent.mouseLeave(carousel)
+  fireEvent.mouseLeave(carousel)
+
+  expect(jest.getTimerCount()).toBe(baseTimerCount)
+
+  jest.useRealTimers()
+})
+
+test('CCarousel clears the pending cycle timeout on unmount', async () => {
+  jest.useFakeTimers()
+
+  const { unmount } = render(
+    <CCarousel interval={1000}>
+      <CCarouselItem>Item-1</CCarouselItem>
+      <CCarouselItem>Item-2</CCarouselItem>
+    </CCarousel>
+  )
+
+  const baseTimerCount = jest.getTimerCount()
+  expect(baseTimerCount).toBeGreaterThan(0)
+
+  unmount()
+
+  expect(jest.getTimerCount()).toBe(baseTimerCount - 1)
+
+  jest.useRealTimers()
+})
+
 test('CCarousel click on indicator', async () => {
   const { container } = render(
     <CCarousel controls indicators>
@@ -86,7 +129,7 @@ test('CCarousel click on indicator', async () => {
 
   // click
   const ci = document.querySelector('.carousel-indicators')
-  ci && fireEvent.click(ci.children[1])
+  fireEvent.click(ci!.children[1])
   fireEvent.transitionEnd(item1)
   fireEvent.transitionEnd(item2)
 
@@ -94,7 +137,7 @@ test('CCarousel click on indicator', async () => {
   expect(item2).toHaveClass('active')
 
   // goback-click
-  ci && fireEvent.click(ci.children[0])
+  fireEvent.click(ci!.children[0])
   fireEvent.transitionEnd(item1)
   fireEvent.transitionEnd(item2)
 
@@ -130,7 +173,7 @@ test('CCarousel click on button', async () => {
 
   // click
   const buttonNext = document.querySelector('.carousel-control-next')
-  buttonNext && fireEvent.click(buttonNext)
+  fireEvent.click(buttonNext!)
   fireEvent.transitionEnd(item1)
   fireEvent.transitionEnd(item2)
 
@@ -139,7 +182,7 @@ test('CCarousel click on button', async () => {
 
   // goback-click
   const buttonPrev = document.querySelector('.carousel-control-prev')
-  buttonPrev && fireEvent.click(buttonPrev)
+  fireEvent.click(buttonPrev!)
   fireEvent.transitionEnd(item1)
   fireEvent.transitionEnd(item2)
 

package/src/components/carousel/__tests__/CCarouselItem.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CCarousel, CCarouselItem } from '../index'
+
+const isTransition = (type: string) => type === 'transitionstart' || type === 'transitionend'
+
+test('CCarouselItem removes the exact transition listener references on cleanup', async () => {
+  const addSpy = jest.spyOn(HTMLElement.prototype, 'addEventListener')
+  const removeSpy = jest.spyOn(HTMLElement.prototype, 'removeEventListener')
+
+  const { container, unmount } = render(
+    <CCarousel>
+      <CCarouselItem>Item-1</CCarouselItem>
+      <CCarouselItem>Item-2</CCarouselItem>
+    </CCarousel>
+  )
+  const items = new Set<EventTarget>(container.querySelectorAll('.carousel-item'))
+  unmount()
+
+  const handlersOn = (spy: jest.SpyInstance) =>
+    spy.mock.calls
+      .map((args, index) => ({ args, context: spy.mock.contexts[index] }))
+      .filter(({ args, context }) => isTransition(args[0]) && items.has(context as EventTarget))
+      .map(({ args }) => args[1])
+
+  const added = handlersOn(addSpy)
+  const removed = handlersOn(removeSpy)
+
+  expect(added.length).toBeGreaterThan(0)
+  for (const handler of added) {
+    expect(removed).toContain(handler)
+  }
+
+  addSpy.mockRestore()
+  removeSpy.mockRestore()
+})

package/src/components/chip/CChip.tsx

@@ -49,6 +49,10 @@ export interface CChipProps extends HTMLAttributes<HTMLSpanElement | HTMLButtonE
    * Disables the React Chip component and removes interactive behavior.
    */
   disabled?: boolean
+  /**
+   * Turns the React Chip component into a filter chip. A filter chip is selectable and shows a leading check icon while selected.
+   */
+  filter?: boolean
   /**
    * Callback fired when the React Chip component becomes deselected.
    */
@@ -84,18 +88,24 @@ export interface CChipProps extends HTMLAttributes<HTMLSpanElement | HTMLButtonE
    * Controls the selected state of a selectable React Chip component.
    */
   selected?: boolean
+  /**
+   * Replaces the default selected icon shown by a filter React Chip component with a custom icon node.
+   */
+  selectedIcon?: ReactNode
   /**
    * Sets the size of the React Chip component to small or large.
    */
   size?: 'sm' | 'lg'
+  /**
+   * Sets the value associated with the React Chip component, used by `CChipSet` to track selection.
+   */
+  value?: string
   /**
    * Sets the visual variant of the React Chip component to outline style.
    */
   variant?: 'outline'
 }
 
-const SELECTOR_FOCUSABLE_ITEMS = '[data-coreui-chip-focusable="true"]:not(.disabled)'
-
 export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forwardRef<
   HTMLSpanElement | HTMLButtonElement,
   CChipProps
@@ -110,6 +120,7 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
       clickable,
       color,
       disabled,
+      filter,
       onClick,
       onDeselect,
       onKeyDown,
@@ -120,13 +131,17 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
       removeIcon,
       selectable,
       selected,
+      selectedIcon,
       size,
       tabIndex,
+      value,
       variant,
       ...rest
     },
     ref
   ) => {
+    // A filter chip is selectable by definition.
+    const isSelectable = Boolean(selectable || filter)
     const chipRef = useRef<HTMLSpanElement | HTMLButtonElement>(null)
     const forkedRef = useForkedRef(ref, chipRef)
     const isSelectedControlled = selected !== undefined
@@ -140,47 +155,15 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
     }, [isSelectedControlled, selected])
 
     const isFocusable = useMemo(
-      () => Boolean(!disabled && (selectable || removable)),
-      [disabled, selectable, removable]
+      () => Boolean(!disabled && (isSelectable || removable)),
+      [disabled, isSelectable, removable]
     )
 
-    const getFocusableSibling = (shouldGetNext: boolean) => {
-      const currentElement = chipRef.current
-      if (!currentElement?.parentElement) {
-        return null
-      }
-
-      const chips = Array.from(
-        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS)
-      )
-
-      const index = chips.indexOf(currentElement as unknown as HTMLElement)
-      if (index === -1 || chips.length <= 1) {
-        return null
-      }
-
-      const targetIndex = shouldGetNext ? index + 1 : index - 1
-      return chips[targetIndex] ?? null
-    }
-
-    const navigateToEdge = (targetIndex: 0 | -1) => {
-      const currentElement = chipRef.current
-      if (!currentElement?.parentElement) {
-        return
-      }
-
-      const chips = Array.from(
-        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS)
-      )
-      const edgeChip = targetIndex === -1 ? chips[chips.length - 1] : chips[0]
-      edgeChip?.focus()
-    }
-
     const setSelectableState = (
       nextSelected: boolean,
       event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
     ) => {
-      if (!selectable || disabled || nextSelected === selectedState) {
+      if (!isSelectable || disabled || nextSelected === selectedState) {
         return
       }
 
@@ -219,7 +202,7 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
         return
       }
 
-      if (selectable) {
+      if (isSelectable) {
         toggleSelectedState(event)
       }
 
@@ -236,7 +219,7 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
         case 'Enter':
         case ' ':
         case 'Spacebar': {
-          if (selectable) {
+          if (isSelectable) {
             event.preventDefault()
             toggleSelectedState(event)
           }
@@ -247,45 +230,11 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
         case 'Delete': {
           if (removable) {
             event.preventDefault()
-            const sibling = getFocusableSibling(false) || getFocusableSibling(true)
-            sibling?.focus()
             handleRemove(event)
           }
           break
         }
 
-        case 'ArrowLeft': {
-          event.preventDefault()
-          const sibling = getFocusableSibling(false)
-          sibling?.focus()
-          if (selectedState && event.shiftKey) {
-            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
-          }
-          break
-        }
-
-        case 'ArrowRight': {
-          event.preventDefault()
-          const sibling = getFocusableSibling(true)
-          sibling?.focus()
-          if (selectedState && event.shiftKey) {
-            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
-          }
-          break
-        }
-
-        case 'Home': {
-          event.preventDefault()
-          navigateToEdge(0)
-          break
-        }
-
-        case 'End': {
-          event.preventDefault()
-          navigateToEdge(-1)
-          break
-        }
-
         // No default
       }
 
@@ -297,18 +246,19 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
         className={classNames(
           'chip',
           {
-            active: selectable ? selectedState : active,
+            active: isSelectable ? selectedState : active,
             disabled,
             [`chip-${color}`]: color,
             [`chip-${size}`]: size,
-            'chip-clickable': clickable || selectable || Boolean(onClick),
+            'chip-clickable': clickable || isSelectable || Boolean(onClick),
             'chip-outline': variant === 'outline',
           },
           className
         )}
         data-coreui-chip-focusable={isFocusable || undefined}
+        data-coreui-chip-value={value}
         {...(disabled && { 'aria-disabled': true })}
-        {...(selectable && { 'aria-selected': selectedState })}
+        {...(isSelectable && { 'aria-selected': selectedState })}
         {...(isFocusable && tabIndex === undefined && { tabIndex: 0 })}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
@@ -316,15 +266,29 @@ export const CChip: PolymorphicRefForwardingComponent<'span', CChipProps> = forw
         {...rest}
         ref={forkedRef}
       >
+        {filter && selectedState && (
+          <span className="chip-check" aria-hidden="true">
+            {selectedIcon ?? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+              >
+                <path d="M425.373 89.373 196 318.745 86.627 209.373l-45.254 45.254L196 409.255l274.627-274.628z" />
+              </svg>
+            )}
+          </span>
+        )}
         {children}
-        {removable && (
+        {removable && !disabled && (
           <button
             type="button"
             className="chip-remove"
             aria-label={ariaRemoveLabel}
             onClick={handleRemoveClick}
             tabIndex={-1}
-            disabled={disabled}
           >
             {removeIcon ?? (
               <svg
@@ -357,6 +321,7 @@ CChip.propTypes = {
   clickable: PropTypes.bool,
   color: colorPropType,
   disabled: PropTypes.bool,
+  filter: PropTypes.bool,
   onDeselect: PropTypes.func,
   onRemove: PropTypes.func,
   onSelect: PropTypes.func,
@@ -365,7 +330,9 @@ CChip.propTypes = {
   removeIcon: PropTypes.node,
   selectable: PropTypes.bool,
   selected: PropTypes.bool,
+  selectedIcon: PropTypes.node,
   size: PropTypes.oneOf(['sm', 'lg']),
+  value: PropTypes.string,
   variant: PropTypes.oneOf(['outline']),
 }
 

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

@@ -55,7 +55,7 @@ test('CChip selectable', async () => {
   const { getByText } = render(
     <CChip selectable={true} onSelect={onSelect} onDeselect={onDeselect}>
       Selectable
-    </CChip>,
+    </CChip>
   )
   const chip = getByText('Selectable')
 
@@ -71,28 +71,35 @@ test('CChip selectable', async () => {
   expect(onDeselect).toHaveBeenCalledTimes(1)
 })
 
-test('CChip keyboard navigation', async () => {
-  const { getByText } = render(
-    <div>
-      <CChip selectable={true}>First</CChip>
-      <CChip selectable={true}>Second</CChip>
-      <CChip selectable={true}>Third</CChip>
-    </div>,
+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')
 
-  const first = getByText('First')
-  const second = getByText('Second')
-  const third = getByText('Third')
+  expect(chip).toHaveAttribute('aria-selected', 'false')
+  expect(container.querySelector('.chip-check')).not.toBeInTheDocument()
 
-  first.focus()
-  fireEvent.keyDown(first, { key: 'ArrowRight' })
-  expect(second).toHaveFocus()
+  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()
+})
 
-  fireEvent.keyDown(second, { key: 'End' })
-  expect(third).toHaveFocus()
+test('CChip filter renders a custom selectedIcon', async () => {
+  const { container } = render(
+    <CChip filter={true} selected={true} selectedIcon={<span data-testid="custom-check" />}>
+      Filter
+    </CChip>
+  )
 
-  fireEvent.keyDown(third, { key: 'Home' })
-  expect(first).toHaveFocus()
+  expect(container.querySelector('.chip-check [data-testid="custom-check"]')).toBeInTheDocument()
 })
 
 test('CChip delete triggers remove callback', async () => {
@@ -103,7 +110,7 @@ test('CChip delete triggers remove callback', async () => {
         First
       </CChip>
       <CChip removable={true}>Second</CChip>
-    </div>,
+    </div>
   )
 
   const first = getByText('First')