@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/nav/CNavGroupContext.ts

@@ -0,0 +1,27 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+export interface CNavGroupContextValue {
+  /**
+   * The id of the currently open child group at this level, or `undefined` when none is open.
+   * Each `CNavGroup` keeps its own accordion state, so collapsing an ancestor never discards the
+   * open/closed state of its descendants—reopening the ancestor restores them.
+   */
+  activeId: string | undefined
+  /**
+   * Open (or, with `undefined`, close) a child group at this level. Opening a group collapses its
+   * siblings, mirroring the vanilla `groupsAutoCollapse` behavior.
+   */
+  setActiveId: Dispatch<SetStateAction<string | undefined>>
+  /**
+   * Open the whole branch from the parent group up to the root. Used by an active nav link to
+   * reveal every ancestor group.
+   */
+  openBranch: () => void
+}
+
+/**
+ * Provides the per-level accordion state to the direct children (`CNavGroup`, `CNavLink`) of a
+ * `CSidebarNav` or a parent `CNavGroup`. `null` means the consumer is rendered outside a sidebar
+ * navigation, in which case groups fall back to their own local state.
+ */
+export const CNavGroupContext = createContext<CNavGroupContextValue | null>(null)

package/src/components/nav/CNavLink.tsx

@@ -3,16 +3,12 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
+import { CNavGroupContext } from './CNavGroupContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
 
-export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
-  /**
-   * @ignore
-   */
-  idx?: string
+export interface CNavLinkProps extends CLinkProps {
   /**
    * @ignore
    */
@@ -22,16 +18,35 @@ export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
 export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   CNavLinkProps
->(({ children, className, idx, ...rest }, ref) => {
+>(({ children, className, ...rest }, ref) => {
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CSidebarNavContext)
+  const openBranch = useContext(CNavGroupContext)?.openBranch
 
   useEffect(() => {
-    rest.active = navLinkRef.current?.classList.contains('active')
-    idx && rest.active && setVisibleGroup(idx)
-  }, [rest.active, className])
+    const element = navLinkRef.current
+
+    if (!element || !openBranch) {
+      return
+    }
+
+    let wasActive = false
+    const sync = () => {
+      const active = element.classList.contains('active')
+      if (active && !wasActive) {
+        openBranch()
+      }
+
+      wasActive = active
+    }
+
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(element, { attributes: true, attributeFilter: ['class'] })
+
+    return () => observer.disconnect()
+  }, [openBranch])
 
   return (
     <CLink className={classNames('nav-link', className)} {...rest} ref={forkedRef}>
@@ -46,7 +61,6 @@ CNavLink.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   disabled: PropTypes.bool,
-  idx: PropTypes.string,
 }
 
 CNavLink.displayName = 'CNavLink'

package/src/components/one-time-password-input/COneTimePasswordInput.tsx

@@ -14,7 +14,7 @@ export const COneTimePasswordInput = forwardRef<HTMLInputElement, COneTimePasswo
       <input
         className={classNames('form-otp-control', className)}
         maxLength={1}
-        autoComplete="off"
+        autoComplete="one-time-code"
         ref={ref}
         {...rest}
       />

package/src/components/password-input/CPasswordInput.tsx

@@ -11,8 +11,7 @@ import classNames from 'classnames'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 
 export interface CPasswordInputProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
    * Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`.
    */
@@ -127,6 +126,7 @@ export const CPasswordInput = forwardRef<HTMLInputElement, CPasswordInputProps>(
           className="form-password-action"
           data-coreui-toggle="password"
           aria-label={ariaLabelToggler}
+          aria-pressed={showPassword}
           onClick={() => setShowPassword((prev) => !prev)}
         >
           <span className="form-password-action-icon"></span>

package/src/components/picker/CPicker.tsx

@@ -164,7 +164,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
             >
               {toggler &&
                 React.isValidElement(toggler) &&
-                React.cloneElement(toggler as React.ReactElement<any>, {
+                React.cloneElement(toggler as React.ReactElement<Record<string, unknown>>, {
                   ref: togglerRef,
                 })}
               <CConditionalPortal portal={portal}>

package/src/components/popover/CPopover.tsx

@@ -182,6 +182,14 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const { initPopper, destroyPopper } = usePopper()
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+    const clearTimer = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+        timer.current = undefined
+      }
+    }
 
     const defaultPopperConfig: Partial<Options> = {
       modifiers: [
@@ -198,12 +206,23 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     }
 
     const handleShow = () => {
-      setMounted(true)
+      clearTimer()
+
+      if (mounted) {
+        timer.current = setTimeout(() => {
+          setVisible(true)
+        }, _delay.show)
+      } else {
+        setMounted(true)
+      }
+
       onShow?.()
     }
 
     const handleHide = () => {
-      setTimeout(() => {
+      clearTimer()
+
+      timer.current = setTimeout(() => {
         setVisible(false)
         onHide?.()
       }, _delay.hide)
@@ -220,7 +239,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     useEffect(() => {
       if (mounted && togglerRef.current && popoverRef.current) {
         initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -232,6 +251,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && popoverRef.current) {
         executeAfterTransition(() => {
@@ -240,23 +266,67 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [_visible])
 
+    useEffect(() => {
+      if (!_visible) {
+        return
+      }
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          handleHide()
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown, true)
+
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown, true)
+      }
+    }, [_visible])
+
+    const child = children as React.ReactElement<
+      React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }
+    >
+
     return (
       <>
-        {React.cloneElement(children as React.ReactElement<any>, {
+        {React.cloneElement(child, {
           ...(_visible && {
             'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => (_visible ? handleHide() : handleShow()),
+            onClick: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onClick?.(event)
+
+              if (_visible) {
+                handleHide()
+              } else {
+                handleShow()
+              }
+            },
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => handleShow(),
-            onBlur: () => handleHide(),
+            onFocus: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onFocus?.(event)
+              handleShow()
+            },
+            onBlur: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onBlur?.(event)
+              handleHide()
+            },
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => handleShow(),
-            onMouseLeave: () => handleHide(),
+            onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseEnter?.(event)
+              handleShow()
+            },
+            onMouseLeave: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseLeave?.(event)
+              handleHide()
+            },
           }),
         })}
         <CConditionalPortal container={container} portal={true}>

package/src/components/progress/CProgress.tsx

@@ -6,8 +6,7 @@ import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>,
-    CProgressBarProps {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CProgressBarProps {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/range-slider/CRangeSlider.tsx

@@ -28,6 +28,12 @@ import {
 } from './utils'
 
 export interface CRangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Accessible labels (`aria-label`) for the slider handles, one per thumb, applied only to multi-thumb sliders to distinguish otherwise identically-announced handles. When omitted, two-thumb sliders default to `"Minimum value"` / `"Maximum value"` and sliders with more thumbs to `"Value {n}"`.
+   *
+   * @since 5.27.0
+   */
+  ariaLabels?: string[]
   /**
    * Customize the styling of your React Range Slider by adding a custom `className`.
    * This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets.
@@ -104,9 +110,12 @@ export interface CRangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>,
   vertical?: boolean
 }
 
+const DEFAULT_VALUE: number[] = [0]
+
 export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
   (
     {
+      ariaLabels,
       className,
       clickableLabels = true,
       disabled = false,
@@ -116,7 +125,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
       max = 100,
       name,
       step = 1,
-      value = [],
+      value = DEFAULT_VALUE,
       onChange,
       tooltips = true,
       tooltipsFormat,
@@ -124,7 +133,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
       vertical = false,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const rangeSliderRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, rangeSliderRef)
@@ -134,7 +143,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
     const trackRef = useRef<HTMLDivElement>(null)
 
     const [currentValue, setCurrentValue] = useState<number[]>(
-      Array.isArray(value) ? value : [value],
+      Array.isArray(value) ? value : [value]
     )
     const [isDragging, setIsDragging] = useState(false)
     const [_isRTL, setIsRTL] = useState(false)
@@ -154,7 +163,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
 
     useEffect(() => {
       const maxSize = Math.max(
-        ...labelsRef.current.map((label) => (vertical ? label.offsetWidth : label.offsetHeight)),
+        ...labelsRef.current.map((label) => (vertical ? label.offsetWidth : label.offsetHeight))
       )
 
       if (labelsContainerRef.current) {
@@ -223,7 +232,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         max,
         step,
         vertical,
-        _isRTL,
+        _isRTL
       )
 
       const index = getNearestValueIndex(clickValue, currentValue)
@@ -253,7 +262,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         max,
         step,
         vertical,
-        _isRTL,
+        _isRTL
       )
 
       const newCurrentValue = updateValue(moveValue, currentValue, distance, dragIndex)
@@ -279,42 +288,57 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         ref={forkedRef}
       >
         <div className="range-slider-inputs-container" onMouseDown={handleInputsContainerMouseDown}>
-          {currentValue.map((value, index) => (
-            <React.Fragment key={index}>
-              <input
-                className="range-slider-input"
-                type="range"
-                min={min}
-                max={max}
-                step={step}
-                value={value}
-                name={Array.isArray(name) ? name[index] : `${name || ''}-${index}}`}
-                role="slider"
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-valuenow={value}
-                aria-orientation={vertical ? 'vertical' : 'horizontal'}
-                disabled={disabled}
-                onChange={(event) => handleInputChange(event, index)}
-                ref={(el: HTMLInputElement) => {
-                  inputsRef.current[index] = el
-                }}
-              />
-              {tooltips && (
-                <div
-                  className="range-slider-tooltip"
-                  {...(thumbSize && {
-                    style: calculateTooltipPosition(min, max, value, thumbSize, vertical, _isRTL),
-                  })}
-                >
-                  <div className="range-slider-tooltip-inner">
-                    {tooltipsFormat ? tooltipsFormat(value) : value}
+          {currentValue.map((value, index) => {
+            const formatted = tooltipsFormat ? tooltipsFormat(value) : undefined
+            const valueText =
+              typeof formatted === 'string' || typeof formatted === 'number'
+                ? String(formatted)
+                : undefined
+            const ariaLabel =
+              ariaLabels?.[index] ??
+              (currentValue.length === 2
+                ? index === 0
+                  ? 'Minimum value'
+                  : 'Maximum value'
+                : `Value ${index + 1}`)
+
+            return (
+              <React.Fragment key={index}>
+                <input
+                  className="range-slider-input"
+                  type="range"
+                  min={min}
+                  max={max}
+                  step={step}
+                  value={value}
+                  name={Array.isArray(name) ? name[index] : name ? `${name}-${index}` : undefined}
+                  role="slider"
+                  aria-valuemin={min}
+                  aria-valuemax={max}
+                  aria-valuenow={value}
+                  aria-valuetext={valueText}
+                  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+                  {...(currentValue.length > 1 && { 'aria-label': ariaLabel })}
+                  disabled={disabled}
+                  onChange={(event) => handleInputChange(event, index)}
+                  ref={(el: HTMLInputElement) => {
+                    inputsRef.current[index] = el
+                  }}
+                />
+                {tooltips && (
+                  <div
+                    className="range-slider-tooltip"
+                    {...(thumbSize && {
+                      style: calculateTooltipPosition(min, max, value, thumbSize, vertical, _isRTL),
+                    })}
+                  >
+                    <div className="range-slider-tooltip-inner">{formatted ?? value}</div>
+                    <div className="range-slider-tooltip-arrow"></div>
                   </div>
-                  <div className="range-slider-tooltip-arrow"></div>
-                </div>
-              )}
-            </React.Fragment>
-          ))}
+                )}
+              </React.Fragment>
+            )
+          })}
           <div
             className="range-slider-track"
             {...(track && {
@@ -335,7 +359,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
                     : _isRTL
                       ? { right: labelPosition }
                       : { left: labelPosition },
-                  typeof label === 'object' && 'style' in label && label.style,
+                  typeof label === 'object' && 'style' in label && label.style
                 )
                 return (
                   <div
@@ -344,7 +368,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
                       {
                         clickable: clickableLabels,
                       },
-                      typeof label === 'object' && 'className' in label && label.className,
+                      typeof label === 'object' && 'className' in label && label.className
                     )}
                     style={labelStyle}
                     onMouseDown={(event) => handleLabelClick(event, labelValue)}
@@ -361,10 +385,11 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         )}
       </div>
     )
-  },
+  }
 )
 
 CRangeSlider.propTypes = {
+  ariaLabels: PropTypes.arrayOf(PropTypes.string.isRequired),
   clickableLabels: PropTypes.bool,
   disabled: PropTypes.bool,
   distance: PropTypes.number,

package/src/components/range-slider/utils.ts

@@ -8,7 +8,7 @@ export const calculateClickValue = (
   max: number,
   step: number,
   vertical: boolean,
-  rtl: boolean,
+  rtl: boolean
 ) => {
   const clickPosition = getClickPosition(event, container, vertical, rtl)
   const value = min + clickPosition * (max - min)
@@ -22,7 +22,7 @@ export const calculateMoveValue = (
   max: number,
   step: number,
   vertical: boolean,
-  rtl: boolean,
+  rtl: boolean
 ) => {
   const rect = container.getBoundingClientRect()
   const position = vertical
@@ -68,7 +68,7 @@ export const calculateLabelPosition = (
   max: number,
   labels: Label[],
   label: Label,
-  index: number,
+  index: number
 ) => {
   if (typeof label === 'object' && 'value' in label) {
     return `${((label.value - min) / (max - min)) * 100}%`
@@ -83,7 +83,7 @@ export const calculateTooltipPosition = (
   value: number,
   thumbSize: ThumbSize,
   vertical: boolean,
-  rtl: boolean,
+  rtl: boolean
 ) => {
   const percent = (value - min) / (max - min)
   const margin =
@@ -107,7 +107,7 @@ export const getClickPosition = (
   event: React.MouseEvent,
   container: HTMLDivElement,
   vertical: boolean,
-  rtl: boolean,
+  rtl: boolean
 ) => {
   // MouseEvent doesn't have `offsetX`/`offsetY`, so we need to use `event.nativeEvent` instead
   const { offsetX, offsetY } = event.nativeEvent
@@ -125,7 +125,7 @@ export const getLabelValue = (
   max: number,
   labels: Label[],
   label: Label,
-  index: number,
+  index: number
 ) =>
   typeof label === 'object' && 'value' in label
     ? label.value
@@ -153,7 +153,7 @@ export const getThumbSize = (element: HTMLDivElement, vertical: boolean): ThumbS
   const value = globalThis
     .getComputedStyle(element, null)
     .getPropertyValue(
-      vertical ? '--cui-range-slider-thumb-height' : '--cui-range-slider-thumb-width',
+      vertical ? '--cui-range-slider-thumb-height' : '--cui-range-slider-thumb-width'
     )
 
   const regex = /^(\d+\.?\d*)([%a-z]*)$/i
@@ -179,7 +179,7 @@ export const updateGradient = (
   max: number,
   values: number[],
   vertical: boolean,
-  rtl: boolean,
+  rtl: boolean
 ) => {
   const minVal = Math.min(...values)
   const maxVal = Math.max(...values)

package/src/components/rating/CRating.tsx

@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   Fragment,
   HTMLAttributes,
+  JSX,
   ReactNode,
   useEffect,
   useId,
@@ -24,6 +25,12 @@ export interface CRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
    * Enables the clearing upon clicking the selected item again.
    */
   allowClear?: boolean
+  /**
+   * A function that returns the accessible label (`aria-label`) for each rating item's radio input. Receives the item's value and the total item count.
+   *
+   * @since 5.27.0
+   */
+  ariaLabel?: (value: number, itemCount: number) => string
   /**
    * A string of all className you want applied to the component.
    */
@@ -103,6 +110,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
     {
       activeIcon,
       allowClear,
+      ariaLabel = (value, itemCount) => `${value} of ${itemCount}`,
       className,
       disabled,
       highlightOnlySelected,
@@ -118,13 +126,14 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
       value,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [cleared, setCleared] = useState(false)
     const [currentValue, setCurrentValue] = useState(value ?? null)
     const [hoverValue, setHoverValue] = useState<number | null>(null)
     const [tooltipValue, setTooltipValue] = useState<number | string | null>(null)
-    const _name = name || useId()
+    const generatedId = useId()
+    const _name = name || generatedId
 
     useEffect(() => {
       value !== undefined && setCurrentValue(value)
@@ -185,7 +194,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
             disabled: disabled,
             readonly: readOnly,
           },
-          className,
+          className
         )}
         role="radiogroup"
         {...rest}
@@ -211,7 +220,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
                   const isNotLastItem = _index + 1 < numberOfRadios
                   const value =
                     numberOfRadios === 1 ? index + 1 : index + (_index + 1) * (1 * precision)
-                  const id = useId()
+                  const id = `${generatedId}-${index}-${_index}`
 
                   const isItemChecked = () => value === currentValue
 
@@ -270,6 +279,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
                         )}
                       </label>
                       <input
+                        aria-label={ariaLabel(value, itemCount)}
                         className="rating-item-input"
                         checked={isItemChecked()}
                         disabled={disabled || readOnly}
@@ -290,13 +300,14 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
         })}
       </div>
     )
-  },
+  }
 )
 
 CRating.propTypes = {
   children: PropTypes.node,
   activeIcon: PropTypes.any,
   allowClear: PropTypes.bool,
+  ariaLabel: PropTypes.func,
   disabled: PropTypes.bool,
   highlightOnlySelected: PropTypes.bool,
   icon: PropTypes.any,