@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/button/CButton.tsx

@@ -1,8 +1,8 @@
-import React, { ElementType, forwardRef } from 'react'
+import React, { ElementType, forwardRef, MouseEvent, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CLink, CLinkProps } from '../link/CLink'
+import { CLinkProps } from '../link/CLink'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
@@ -49,6 +49,12 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * Size the component small or large.
    */
   size?: 'sm' | 'lg'
+  /**
+   * Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the `aria-pressed` attribute.
+   *
+   * @since 5.13.0
+   */
+  toggle?: boolean
   /**
    * Specifies the type of button. Always specify the type attribute for the `<button>` element.
    * Different browsers may use different default types for the `<button>` element.
@@ -65,13 +71,33 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
   CButtonProps
 >(
   (
-    { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
+    {
+      children,
+      active,
+      as = 'button',
+      className,
+      color,
+      disabled,
+      href,
+      onClick,
+      shape,
+      size,
+      toggle,
+      type = 'button',
+      variant,
+      ...rest
+    },
     ref
   ) => {
+    const Component = href ? 'a' : as
+    const [_active, setActive] = useState(active)
+
+    useEffect(() => {
+      setActive(active)
+    }, [active])
+
     return (
-      <CLink
-        as={rest.href ? 'a' : as}
-        {...(!rest.href && { type: type })}
+      <Component
         className={classNames(
           'btn',
           {
@@ -79,26 +105,44 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
             [`btn-${variant}`]: variant && !color,
             [`btn-${color}`]: !variant && color,
             [`btn-${size}`]: size,
+            active: _active,
+            disabled,
           },
           shape,
           className
         )}
+        {...((Component === 'button' || Component === 'input') && { type, disabled })}
+        {...(toggle && { 'aria-pressed': !!_active })}
+        {...(Component === 'a' && href && { href })}
+        {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
+        onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+          if (!disabled) {
+            if (toggle) {
+              event.preventDefault()
+              setActive((prevActive) => !prevActive)
+            }
+
+            onClick?.(event)
+          }
+        }}
         {...rest}
         ref={ref}
       >
         {children}
-      </CLink>
+      </Component>
     )
   }
 )
 
 CButton.propTypes = {
+  active: PropTypes.bool,
   as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
   shape: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
+  toggle: PropTypes.bool,
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
   variant: PropTypes.oneOf(['outline', 'ghost']),
 }

package/src/components/calendar/CCalendar.tsx

@@ -477,7 +477,6 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       setCalendarDate(d)
       onCalendarDateChange?.(d, view)
-      console.log('View changed to:', view)
     }
 
     const handleStartDateChange = (date: Date | null) => {

package/src/components/calendar/CCalendarPanel.tsx

@@ -224,6 +224,8 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                             : -1
                         }
                         title={date.toLocaleDateString(locale)}
+                        aria-label={date.toLocaleDateString(locale)}
+                        {...(month === 'current' && isToday(date) && { 'aria-current': 'date' })}
                         {...(isSelected && { 'aria-selected': true })}
                         {...(selectionType === 'day' &&
                           (month === 'current' || selectAdjacementDays) && {

package/src/components/card/CCardImage.tsx

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

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

@@ -51,8 +51,8 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
         setTimeout(() => {
           if (count !== 0) {
             // @ts-expect-error reflow is necessary to proper transition
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const reflow = carouselItemRef.current?.offsetHeight
+
+            const _reflow = carouselItemRef.current?.offsetHeight
             setDirectionClassName(`carousel-item-${direction === 'next' ? 'start' : 'end'}`)
           }
         }, 0)
@@ -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/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/const.ts

@@ -0,0 +1,3 @@
+// Chips advertise their own focusability via `data-coreui-chip-focusable`,
+// so containers (CChipSet, CChipInput) read it instead of re-deriving it.
+export const SELECTOR_CHIP_FOCUSABLE = '[data-coreui-chip-focusable="true"]:not(.disabled)'