@coreui/react-pro 5.26.0 → 5.27.1

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -21,7 +21,8 @@ import { Colors } from '../../types'
 import { getInputIdOrName } from './utils'
 
 export interface CDateRangePickerProps
-  extends Omit<CFormControlWrapperProps, 'floatingLabel' | 'id'>,
+  extends
+    Omit<CFormControlWrapperProps, 'floatingLabel' | 'id'>,
     Omit<CPickerProps, 'placeholder' | 'id'>,
     Omit<CCalendarProps, 'onDayHover' | 'onCalendarDateChange'> {
   /**
@@ -250,6 +251,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       locale = 'default',
       maxDate,
       minDate,
+      monthFormat,
       name,
       navigation,
       navYearFirst,
@@ -257,6 +259,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       onHide,
       onStartDateChange,
       onShow,
+      onViewChanged,
       placeholder = ['Start date', 'End date'],
       portal = true,
       previewDateOnHover = true,
@@ -265,6 +268,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       rangesButtonsColor = 'secondary',
       rangesButtonsSize,
       rangesButtonsVariant = 'ghost',
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       required,
       separator = true,
       selectAdjacementDays,
@@ -285,6 +292,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       visible,
       weekdayFormat,
       weekNumbersLabel,
+      yearFormat,
       calendarDate = startDate || endDate || null,
       ...rest
     },
@@ -317,6 +325,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     useEffect(() => {
       if (startDate) {
         setStartDate(startDate)
+        setCalendarDate(startDate)
         setInputValue(inputStartRef.current, startDate)
       }
     }, [startDate])
@@ -347,12 +356,20 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [inputStartRef])
 
     useEffect(() => {
-      if (formRef.current) {
-        formRef.current.addEventListener('submit', (event) => {
-          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
-        })
+      const form = formRef.current
+      if (!form) {
+        return
+      }
+
+      const handleSubmit = (event: Event) => {
+        setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+      }
+
+      form.addEventListener('submit', handleSubmit)
+      handleFormValidation(form)
 
-        handleFormValidation(formRef.current)
+      return () => {
+        form.removeEventListener('submit', handleSubmit)
       }
     }, [formRef, _startDate, _endDate])
 
@@ -586,7 +603,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             <div className="date-picker-cleaner" onClick={(event) => handleClear(event)} />
           ) : (
             React.isValidElement(cleaner) &&
-            React.cloneElement(cleaner as React.ReactElement<any>, {
+            React.cloneElement(cleaner as React.ReactElement<Record<string, unknown>>, {
               onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
             })
           ))}
@@ -626,6 +643,15 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                 <CButton
                   className="me-auto"
                   color={todayButtonColor}
+                  disabled={isDateDisabled(
+                    // today at midnight — with the current time of day, a
+                    // `maxDate` of today (converted to midnight) would
+                    // disable the button
+                    new Date(new Date().setHours(0, 0, 0, 0)),
+                    _minDate ? convertToDateObject(_minDate, selectionType) : null,
+                    _maxDate ? convertToDateObject(_maxDate, selectionType) : null,
+                    disabledDates
+                  )}
                   size={todayButtonSize}
                   variant={todayButtonVariant}
                   onClick={() => {
@@ -718,9 +744,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               locale={locale}
               maxDate={_maxDate}
               minDate={_minDate}
+              monthFormat={monthFormat}
               navigation={navigation}
               navYearFirst={navYearFirst}
               range={range}
+              renderDayCell={renderDayCell}
+              renderMonthCell={renderMonthCell}
+              renderQuarterCell={renderQuarterCell}
+              renderYearCell={renderYearCell}
               selectAdjacementDays={selectAdjacementDays}
               selectEndDate={selectEndDate}
               selectionType={selectionType}
@@ -729,11 +760,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               startDate={_startDate}
               weekdayFormat={weekdayFormat}
               weekNumbersLabel={weekNumbersLabel}
+              yearFormat={yearFormat}
               onDateHover={(date) => handleDateHover(date)}
               onCalendarDateChange={(date) => setCalendarDate(date)}
               onStartDateChange={(date) => handleStartDateChange(date)}
               onEndDateChange={(date) => handleEndDateChange(date)}
               onSelectEndChange={(value) => setSelectEndDate(value)}
+              onViewChanged={onViewChanged}
             />
             {timepicker && (
               <div className="date-picker-timepickers">

package/src/components/dropdown/CDropdownToggle.tsx

@@ -8,7 +8,7 @@ import { CDropdownContext } from './CDropdownContext'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
+export interface CDropdownToggleProps extends Omit<CButtonProps, 'toggle' | 'type'> {
   /**
    * Enables pseudo element caret on toggler.
    */

package/src/components/element-cover/CElementCover.tsx

@@ -44,15 +44,15 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         return {}
       }
 
-      const parentCoords: {[key: string]: any} = parent.getBoundingClientRect()
-      const customBoundaries: {[key: string]: string} = {}
+      const parentCoords = parent.getBoundingClientRect() as unknown as Record<string, number>
+      const customBoundaries: { [key: string]: string } = {}
       boundaries.forEach(({ sides, query }) => {
         const element = parent.querySelector(query)
         if (!element || !sides) {
           return
         }
 
-        const coords: {[key: string]: any} = element.getBoundingClientRect()
+        const coords = element.getBoundingClientRect() as unknown as Record<string, number>
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
           customBoundaries[side] = `${sideMargin}px`
@@ -96,7 +96,7 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         </div>
       </div>
     )
-  },
+  }
 )
 
 CElementCover.propTypes = {

package/src/components/loading-button/CLoadingButton.tsx

@@ -43,7 +43,7 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
       timeout,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [_loading, setLoading] = useState<boolean>()
 
@@ -73,7 +73,7 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
         {children}
       </CButton>
     )
-  },
+  }
 )
 
 CLoadingButton.propTypes = {

package/src/components/modal/CModalHeader.tsx

@@ -6,6 +6,12 @@ import { CCloseButton } from '../close-button/CCloseButton'
 import { CModalContext } from './CModalContext'
 
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Sets the `aria-label` of the close button.
+   *
+   * @since 5.13.0
+   */
+  ariaCloseLabel?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -17,19 +23,22 @@ export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
-  ({ children, className, closeButton = true, ...rest }, ref) => {
+  ({ children, ariaCloseLabel, className, closeButton = true, ...rest }, ref) => {
     const { setVisible } = useContext(CModalContext)
 
     return (
       <div className={classNames('modal-header', className)} {...rest} ref={ref}>
         {children}
-        {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
+        {closeButton && (
+          <CCloseButton aria-label={ariaCloseLabel} onClick={() => setVisible(false)} />
+        )}
       </div>
     )
   }
 )
 
 CModalHeader.propTypes = {
+  ariaCloseLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   closeButton: PropTypes.bool,

package/src/components/multi-select/CMultiSelect.tsx

@@ -40,7 +40,8 @@ import type {
 } from './types'
 
 export interface CMultiSelectProps
-  extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
+  extends
+    Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * Allow users to create options if they are not in the list of options.
@@ -102,6 +103,12 @@ export interface CMultiSelectProps
    * @since 5.26.0
    */
   headerTemplate?: (state: SelectionState, actions: SelectionActions) => ReactNode
+  /**
+   * Hide the dropdown header with the built-in select all button when a search filter leaves no matching options. Set to `false` to keep the select all button visible even when there are no results.
+   *
+   * @since 5.27.0
+   */
+  hideSelectAllOnSearchNoResults?: boolean
   /**
    * Set the id attribute for the native select element.
    *
@@ -317,6 +324,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       feedbackInvalid,
       feedbackValid,
       headerTemplate,
+      hideSelectAllOnSearchNoResults = true,
       id,
       invalid,
       label,
@@ -398,7 +406,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const flattenedOptions = useMemo(
       () =>
-        flattenOptionsArray(options).map((option) => {
+        (flattenOptionsArray(options) as Option[]).map((option) => {
           if (value && Array.isArray(value)) {
             return {
               ...option,
@@ -431,6 +439,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       return searchRef.current && createOption(String(searchValue), flattenedOptions)
     }, [filteredOptions, searchValue])
 
+    const dropdownOptions =
+      filteredOptions.length === 0 && allowCreateOptions ? userOption || [] : filteredOptions
+
     const selectableOptions = useMemo(
       () =>
         flattenOptionsArray([...options, ...userOptions]).filter(
@@ -454,7 +465,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       scope.filter((option) => selectedValues.has(option.value)).length
 
     const hasSelectionLimit = multiple && typeof selectionLimit === 'number'
-    const isSelectionLimitReached = hasSelectionLimit && selected.length >= (selectionLimit as number)
+    const isSelectionLimitReached =
+      hasSelectionLimit && selected.length >= (selectionLimit as number)
     const selectableTarget = (total: number) =>
       hasSelectionLimit ? Math.min(total, selectionLimit as number) : total
 
@@ -481,7 +493,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const selectAllScope =
       selectAllMode === 'filtered'
-        ? { selected: countSelected(filteredSelectableOptions), total: filteredSelectableOptions.length }
+        ? {
+            selected: countSelected(filteredSelectableOptions),
+            total: filteredSelectableOptions.length,
+          }
         : { selected: countSelected(selectableOptions), total: selectableOptions.length }
 
     const selectAllTarget = selectableTarget(selectAllScope.total)
@@ -644,7 +659,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       }
 
       if (event.key === 'Backspace' || event.key === 'Delete') {
-        const last = selected.filter((option: Option) => !option.disabled).pop()
+        const last = selected.findLast((option: Option) => !option.disabled)
 
         if (last) {
           setSelected(selected.filter((option: Option) => option.value !== last.value))
@@ -765,9 +780,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const handleDeselectFiltered = () => {
       const filteredValues = new Set(filteredSelectableOptions.map((option) => option.value))
-      setSelected(
-        selected.filter((option) => option.disabled || !filteredValues.has(option.value))
-      )
+      setSelected(selected.filter((option) => option.disabled || !filteredValues.has(option.value)))
     }
 
     const handleSelectAllToggle = () => {
@@ -931,7 +944,14 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
               aria-multiselectable={multiple}
               ref={dropdownMenuElement}
             >
-              {(headerTemplate || (multiple && selectAll)) && (
+              {(headerTemplate ||
+                (multiple &&
+                  selectAll &&
+                  !(
+                    hideSelectAllOnSearchNoResults &&
+                    searchValue.length > 0 &&
+                    dropdownOptions.length === 0
+                  ))) && (
                 <div className="form-multi-select-dropdown-header">
                   {headerTemplate ? (
                     <div onClick={(event) => event.stopPropagation()}>
@@ -945,7 +965,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                         'form-multi-selected':
                           selectAllStyle === 'checkbox' && selectAllCheckboxState === 'all',
                         'form-multi-select-indeterminate':
-                          selectAllStyle === 'checkbox' && selectAllCheckboxState === 'indeterminate',
+                          selectAllStyle === 'checkbox' &&
+                          selectAllCheckboxState === 'indeterminate',
                       })}
                       onClick={() => handleSelectAllToggle()}
                     >
@@ -958,11 +979,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 loading={loading}
                 onGroupOnClick={(group) => !disabled && handleGroupClick(group)}
                 onOptionOnClick={(option) => !disabled && handleOnOptionClick(option)}
-                options={
-                  filteredOptions.length === 0 && allowCreateOptions
-                    ? userOption || []
-                    : filteredOptions
-                }
+                options={dropdownOptions}
                 optionsGroupsSelectable={optionsGroupsSelectable && multiple}
                 optionsGroupsStyle={optionsGroupsStyle}
                 optionsMaxHeight={optionsMaxHeight}
@@ -996,6 +1013,7 @@ CMultiSelect.propTypes = {
   deselectFilteredLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
   headerTemplate: PropTypes.func,
+  hideSelectAllOnSearchNoResults: PropTypes.bool,
   loading: PropTypes.bool,
   multiple: PropTypes.bool,
   name: PropTypes.string,

package/src/components/multi-select/CMultiSelectNativeSelect.tsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types'
 
 import type { Option } from './types'
 
-export interface CMultiSelectNativeSelectProps
-  extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'options'> {
+export interface CMultiSelectNativeSelectProps extends Omit<
+  InputHTMLAttributes<HTMLSelectElement>,
+  'options'
+> {
   options?: Option[]
   value?: string | number | string[]
 }
@@ -20,7 +22,7 @@ const createNativeOptions = (options: Option[]) =>
       <option value={option.value} key={index} disabled={option.disabled}>
         {option.label}
       </option>
-    ),
+    )
   )
 
 export const CMultiSelectNativeSelect = forwardRef<

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -46,6 +46,42 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
     },
     ref
   ) => {
+    const handleHomeEndKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'Home' && event.key !== 'End') {
+        return
+      }
+
+      event.preventDefault()
+      const target = event.target as HTMLElement
+      const container = target.closest('.form-multi-select-options') as HTMLElement | null
+
+      if (!container) {
+        return
+      }
+
+      const first = event.key === 'Home'
+      const focusEdgeOption = () => {
+        const options = container.querySelectorAll<HTMLElement>(
+          '.form-multi-select-option:not(.disabled)'
+        )
+
+        if (options.length > 0) {
+          options[first ? 0 : options.length - 1].focus()
+        }
+      }
+
+      if (virtualScroller) {
+        // The virtualized viewport only mounts a window of options — scroll it to
+        // the edge so the true first/last options render, then focus after the
+        // window has re-rendered (scroll event → state update → commit).
+        container.scrollTop = first ? 0 : container.scrollHeight
+        requestAnimationFrame(() => requestAnimationFrame(focusEdgeOption))
+        return
+      }
+
+      focusEdgeOption()
+    }
+
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, option: Option) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
@@ -67,6 +103,8 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
 
         prev && (prev as HTMLElement).focus()
       }
+
+      handleHomeEndKeyDown(event)
     }
 
     const handleGroupKeyDown = (
@@ -92,6 +130,8 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
 
         prev && (prev as HTMLElement).focus()
       }
+
+      handleHomeEndKeyDown(event)
     }
 
     const getGroupCheckboxState = (group: OptionsGroup) => {

package/src/components/multi-select/types.ts

@@ -3,14 +3,15 @@ export type Option = {
   disabled?: boolean
   selected?: boolean
   label: string
+  options?: Option[]
   value: number | string
-  [key: string]: number | string | any
+  [key: string]: unknown
 }
 
 export type OptionsGroup = {
   label: string
   options?: Option[]
-  [key: string]: number | string | any
+  [key: string]: unknown
 }
 
 export type Search =
@@ -26,7 +27,7 @@ export type SelectedOption = {
   disabled?: boolean
   label: string
   value: number | string
-  [key: string]: number | string | any
+  [key: string]: unknown
 }
 
 export type SelectionState = {

package/src/components/multi-select/utils.ts

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, Search, SelectedOption } from './types'
 
 export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
-  const value = label.toLowerCase().replace(/\s/g, '-')
+  const value = label.toLowerCase().replaceAll(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 

package/src/components/nav/CNavGroup.tsx

@@ -183,8 +183,8 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
 
     const onExiting = () => {
       // @ts-expect-error reflow is necessary to get correct height of the element
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const reflow = navItemsRef.current?.offsetHeight
+
+      const _reflow = navItemsRef.current?.offsetHeight
       setHeight(0)
     }
 

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

@@ -197,10 +197,55 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
       [autoSubmit, onChange, onComplete, inputCount]
     )
 
+    // Write `chars` across the slots starting at `startIndex`, then sync focus, the
+    // hidden form value and auto-submit. Shared by paste and by multi-character
+    // `input` events.
+    const distributeChars = useCallback(
+      (startIndex: number, chars: string) => {
+        const newValues = [...inputValues]
+
+        // A value at least as long as the field is a complete code: fill from the
+        // first slot, whichever slot happens to be focused.
+        const start = chars.length >= inputCount ? 0 : startIndex
+
+        for (let i = 0; i < chars.length && start + i < inputCount; i++) {
+          newValues[start + i] = chars[i]
+        }
+
+        setInputValues(newValues)
+        updateValue(newValues)
+
+        // Focus the next empty input or the last filled one
+        const nextEmptyIndex = start + chars.length
+        const nextInput =
+          nextEmptyIndex < inputCount ? inputRefs.current[nextEmptyIndex] : inputRefs.current.at(-1)
+
+        nextInput?.focus()
+      },
+      [inputValues, inputCount, updateValue]
+    )
+
     const handleInputChange = useCallback(
       (index: number, event: InputEvent<HTMLInputElement>) => {
         const inputValue = event.currentTarget.value
 
+        // SMS autofill, password managers, dictation and IME commits insert the
+        // whole code at once and fire `input`, not `paste`. Spread it across the
+        // slots instead of leaving it in one of them.
+        if (inputValue.length > 1) {
+          const chars = extractValidChars(inputValue, type)
+
+          // The slot is controlled, so restore what the state holds before React
+          // re-renders — an all-invalid value leaves the state untouched.
+          event.currentTarget.value = inputValues[index] || ''
+
+          if (chars) {
+            distributeChars(index, chars)
+          }
+
+          return
+        }
+
         if (inputValue.length === 1 && !isValidInput(inputValue, type)) {
           return
         }
@@ -222,7 +267,7 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
           nextInput?.focus()
         }
       },
-      [inputValues, type, updateValue]
+      [distributeChars, inputValues, type, updateValue]
     )
 
     const handleInputFocus = useCallback(
@@ -310,25 +355,9 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
 
         if (!validChars) return
 
-        const newValues = [...inputValues]
-        const startIndex = index
-
-        for (let i = 0; i < validChars.length && startIndex + i < inputCount; i++) {
-          newValues[startIndex + i] = validChars[i]
-        }
-
-        setInputValues(newValues)
-        updateValue(newValues)
-
-        // Focus the next empty input or the last filled input
-        const nextEmptyIndex = startIndex + validChars.length
-        if (nextEmptyIndex < inputCount) {
-          inputRefs.current[nextEmptyIndex]?.focus()
-        } else {
-          inputRefs.current.at(-1)?.focus()
-        }
+        distributeChars(index, validChars)
       },
-      [inputValues, type, updateValue, inputCount]
+      [distributeChars, type]
     )
 
     let inputIndex = 0
@@ -360,7 +389,7 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
           ref={ref}
           {...rest}
         >
-          {Children.map(children, (child, index) => {
+          {Children.map(children, (child) => {
             if (
               !isValidElement(child) ||
               (child.type as ComponentWithDisplayName)?.displayName !== 'COneTimePasswordInput'
@@ -401,6 +430,18 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
 
               inputMode: type === 'number' ? 'numeric' : 'text',
               pattern: type === 'number' ? '[0-9]*' : '.*',
+              // Only the first slot advertises the one-time code, so SMS autofill
+              // and password managers target a single field instead of every slot,
+              // and it has to fit a whole code while empty.
+              autoComplete:
+                inputChild.props.autoComplete ??
+                (currentInputIndex === 0 ? 'one-time-code' : 'off'),
+              maxLength:
+                inputChild.props.maxLength ??
+                (currentInputIndex === 0 && !inputValues[0] ? inputCount : 1),
+              enterKeyHint:
+                inputChild.props.enterKeyHint ??
+                (currentInputIndex === inputCount - 1 ? 'done' : 'next'),
               onInput: (event: InputEvent<HTMLInputElement>) => {
                 handleInputChange(currentInputIndex, event)
                 inputChild.props.onInput?.(event)
@@ -414,7 +455,7 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
                 inputChild.props.onKeyDown?.(event)
               },
               onPaste: (event: ClipboardEvent<HTMLInputElement>) => {
-                handlePaste(index, event)
+                handlePaste(currentInputIndex, event)
                 inputChild.props.onPaste?.(event)
               },
               ref: (el: HTMLInputElement | null) => {

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

@@ -14,7 +14,10 @@ export const COneTimePasswordInput = forwardRef<HTMLInputElement, COneTimePasswo
       <input
         className={classNames('form-otp-control', className)}
         maxLength={1}
-        autoComplete="off"
+        autoComplete="one-time-code"
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck={false}
         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}>