@coreui/react-pro 5.26.0 → 5.27.1

package/src/components/popover/CPopover.tsx

@@ -266,6 +266,26 @@ 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> }
     >

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

@@ -25,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.
    */
@@ -104,6 +110,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
     {
       activeIcon,
       allowClear,
+      ariaLabel = (value, itemCount) => `${value} of ${itemCount}`,
       className,
       disabled,
       highlightOnlySelected,
@@ -119,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)
@@ -186,7 +194,7 @@ export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
             disabled: disabled,
             readonly: readOnly,
           },
-          className,
+          className
         )}
         role="radiogroup"
         {...rest}
@@ -212,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
 
@@ -271,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}
@@ -291,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,

package/src/components/smart-pagination/CSmartPagination.tsx

@@ -82,7 +82,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
       size,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const showDots: boolean = (() => {
       return dots && limit > 4 && limit < pages
@@ -117,7 +117,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
     })()
 
     const itemsAmount: number = (() => {
-      return pages < computedLimit ? pages : computedLimit
+      return Math.min(pages, computedLimit)
     })()
 
     const items: number[] = (() => {
@@ -126,7 +126,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
             {
               length: itemsAmount,
             },
-            (_v, i) => i + 1,
+            (_v, i) => i + 1
           )
         : Array.from(
             {
@@ -134,8 +134,8 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
             },
             (_v, i) => {
               return lastItem - i
-            },
-          ).reverse()
+            }
+          ).toReversed()
     })()
 
     const setPage = (number: number): void => {
@@ -216,7 +216,7 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
         )}
       </CPagination>
     )
-  },
+  }
 )
 
 CSmartPagination.propTypes = {

package/src/components/smart-table/CSmartTable.tsx

@@ -222,7 +222,11 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       setSorterState([])
     }
 
-    const handleColumnFilterChange = (colName: string, value: any, type?: string): void => {
+    const handleColumnFilterChange = (
+      colName: string,
+      value: string | number,
+      type?: string
+    ): void => {
       const isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return

package/src/components/smart-table/CSmartTableBody.tsx

@@ -47,7 +47,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
       selected,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const colspan: number = selectable ? columns.length + 1 : columns.length
     const _columns = useMemo(() => getColumns(columns), [columns])
@@ -71,26 +71,19 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                     onRowClick(
                       item,
                       trIndex + firstItemOnActivePageIndex,
-                      getClickedColumnName(
-                        event.target as HTMLElement,
-                        columnNames,
-                        selectable,
-                      ),
-                      event,
+                      getClickedColumnName(event.target as HTMLElement, columnNames, selectable),
+                      event
                     )
                   }
                 >
                   {selectable && (
                     <CTableDataCell>
                       <CFormCheck
-                        checked={
-                          selected &&
-                          isObjectInArray(selected, item, ITEM_INTERNAL_KEYS)
-                        }
+                        checked={selected && isObjectInArray(selected, item, ITEM_INTERNAL_KEYS)}
                         disabled={item._selectable === false}
                         onChange={(event) => {
                           const _item = { ...item }
-                          for (const key of ITEM_INTERNAL_KEYS ) {
+                          for (const key of ITEM_INTERNAL_KEYS) {
                             delete _item[key]
                           }
                           onRowChecked && onRowChecked(_item, event.target.checked)
@@ -104,10 +97,13 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       (scopedColumns &&
                         scopedColumns[colName] &&
                         React.cloneElement(
-                          scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
+                          scopedColumns[colName]!(
+                            item,
+                            trIndex + firstItemOnActivePageIndex
+                          ) as React.ReactElement,
                           {
                             key: index,
-                          },
+                          }
                         )) ||
                       (item[colName] !== undefined && (
                         <CTableDataCell
@@ -115,7 +111,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           style={getTableDataCellStyles(column, item, colName)}
                           key={index}
                         >
-                          {item[colName]}
+                          {item[colName] as React.ReactNode}
                         </CTableDataCell>
                       ))
                     )
@@ -148,7 +144,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         )}
       </CTableBody>
     )
-  },
+  }
 )
 
 CSmartTableBody.propTypes = {

package/src/components/smart-table/CSmartTableFilter.tsx

@@ -19,7 +19,7 @@ export const CSmartTableFilter = forwardRef<HTMLInputElement, CSmartTableFilterP
         </div>
       </div>
     )
-  },
+  }
 )
 
 CSmartTableFilter.propTypes = {

package/src/components/smart-table/CSmartTableHead.tsx

@@ -24,7 +24,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   columnFilterState?: ColumnFilterValue
   columnSorter?: boolean | Sorter
   columns: (Column | string)[]
-  handleOnCustomFilterChange?: (key: string, value: any) => void
+  handleOnCustomFilterChange?: (key: string, value: string | number) => void
   handleFilterOnChange?: (key: string, value: string) => void
   handleFilterOnInput?: (key: string, value: string) => void
   handleSelectAllChecked?: () => void
@@ -65,7 +65,7 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
         sortingIconDescending,
         ...rest
       },
-      ref,
+      ref
     ) => {
       const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
       const _columns = useMemo(() => getColumns(columns), [columns])
@@ -174,11 +174,11 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                       typeof column !== 'string' && typeof column.filter === 'function' ? (
                         column.filter(
                           getColumnValues(items, getColumnKey(column)),
-                          (value: any) =>
+                          (value: string | number) =>
                             handleOnCustomFilterChange &&
                             handleOnCustomFilterChange(getColumnKey(column), value),
                           columnFilterState && columnFilterState[getColumnKey(column)]
-                            ? columnFilterState[getColumnKey(column)]
+                            ? (columnFilterState[getColumnKey(column)] as string | number)
                             : undefined
                         )
                       ) : (
@@ -188,19 +188,19 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                             handleFilterOnInput &&
                             handleFilterOnInput(
                               getColumnKey(column),
-                              (event.target as HTMLInputElement).value,
+                              (event.target as HTMLInputElement).value
                             )
                           }
                           onChange={(event) =>
                             handleFilterOnChange &&
                             handleFilterOnChange(
                               getColumnKey(column),
-                              (event.target as HTMLInputElement).value,
+                              (event.target as HTMLInputElement).value
                             )
                           }
                           value={
                             columnFilterState && columnFilterState[getColumnKey(column)]
-                              ? columnFilterState[getColumnKey(column)]
+                              ? (columnFilterState[getColumnKey(column)] as string | number)
                               : ''
                           }
                           aria-label={`column name: '${getColumnLabel(column)}' filter input`}
@@ -216,7 +216,7 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
           )}
         </Component>
       )
-    },
+    }
   )
 
 CSmartTableHead.propTypes = {

package/src/components/smart-table/consts.ts

@@ -1 +1 @@
-export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']

package/src/components/smart-table/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 
 import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
@@ -9,17 +9,17 @@ export type Column = {
   filter?:
     | boolean
     | ((
-        values: any[],
-        onChange: (value: any) => void,
-        state: ColumnFilterValue | undefined
+        values: unknown[],
+        onChange: (value: string | number) => void,
+        state: string | number | undefined
       ) => ReactNode)
   group?: string
   key: string
   label?: string
-  sorter?: boolean | ((a: any, b: any) => number)
-  _style?: any
+  sorter?: boolean | ((a: Item, b: Item) => number)
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
-  _colStyle?: any
+  _colStyle?: CSSProperties
   _colProps?: CTableDataCellProps
 }
 
@@ -29,7 +29,7 @@ export type ColumnFilter = {
 }
 
 export type ColumnFilterValue = {
-  [key: string]: any
+  [key: string]: string | number | ((value: unknown) => boolean)
 }
 
 export type FooterItem = {
@@ -44,13 +44,14 @@ export type Group = {
   group?: string
   key: string
   label?: string
-  _style?: any
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
 }
 
 export type Item = {
-  [key: string]: number | string | any
-  _cellProps?: any
+  [key: string]: unknown
+  _cellProps?: Record<string, CTableDataCellProps | undefined>
+  _cellStyle?: Record<string, CSSProperties | undefined>
   _props?: CTableRowProps
   _selectable?: boolean
   _selected?: boolean
@@ -71,7 +72,7 @@ export type Sorter = {
 }
 
 export type ScopedColumns = {
-  [key: string]: any
+  [key: string]: ((item: Item, index: number) => ReactNode) | undefined
   details?: (a: Item, b: number) => ReactNode
 }