@coreui/react-pro 5.28.1 → 5.29.0

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

@@ -10,6 +10,7 @@ import {
   convertToDateObject,
   getDateBySelectionType,
   getLocalDateFromString,
+  getTimeFormatOptions,
   isDateDisabled,
 } from '../calendar/utils'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
@@ -91,6 +92,12 @@ export interface CDateRangePickerProps
    * Set the confirm button variant to an outlined button or a ghost button.
    */
   confirmButtonVariant?: 'outline' | 'ghost'
+  /**
+   * Specify a list of available hours using an array, or customize the filtering of hours through a function. Requires the `timepicker` property.
+   *
+   * @since 5.29.0
+   */
+  hours?: number[] | ((hour: number) => boolean)
   /**
    * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
    *
@@ -125,6 +132,12 @@ export interface CDateRangePickerProps
    * Toggle the readonly state for the component.
    */
   inputReadOnly?: boolean
+  /**
+   * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function. Requires the `timepicker` property.
+   *
+   * @since 5.29.0
+   */
+  minutes?: boolean | number[] | ((minute: number) => boolean)
   /**
    * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.
    *
@@ -175,6 +188,12 @@ export interface CDateRangePickerProps
    * @since 4.10.0
    */
   required?: boolean
+  /**
+   * Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function. Requires the `timepicker` property.
+   *
+   * @since 5.29.0
+   */
+  seconds?: boolean | number[] | ((second: number) => boolean)
   /**
    * Default icon or character character that separates two dates.
    */
@@ -240,6 +259,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       feedbackValid,
       firstDayOfWeek,
       footer,
+      hours,
       id,
       indicator = true,
       inputDateFormat,
@@ -251,6 +271,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       locale = 'default',
       maxDate,
       minDate,
+      minutes = true,
       monthFormat,
       name,
       navigation,
@@ -273,6 +294,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       renderQuarterCell,
       renderYearCell,
       required,
+      seconds = true,
       separator = true,
       selectAdjacementDays,
       selectionType = 'day',
@@ -397,7 +419,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         return ''
       }
 
-      return timepicker ? _date.toLocaleString(locale) : _date.toLocaleDateString(locale)
+      if (!timepicker) {
+        return _date.toLocaleDateString(locale)
+      }
+
+      return _date.toLocaleString(locale, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        ...getTimeFormatOptions(minutes, seconds),
+      })
     }
 
     const setInputValue = (el: HTMLInputElement | null, date: Date | string | null) => {
@@ -483,7 +514,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       if (inputDateParse) {
         date = inputDateParse(value)
       } else if (selectionType === 'day') {
-        date = getLocalDateFromString(value, locale, timepicker)
+        date = getLocalDateFromString(
+          value,
+          locale,
+          timepicker,
+          selectionType,
+          getTimeFormatOptions(minutes, seconds)
+        )
       } else {
         date = convertToDateObject(value, selectionType)
       }
@@ -775,16 +812,22 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                     <CTimePicker
                       container="inline"
                       disabled={_startDate === null ? true : false}
+                      hours={hours}
                       locale={locale}
+                      minutes={minutes}
                       onTimeChange={(_, __, date) => date && handleStartDateChange(date)}
+                      seconds={minutes && seconds}
                       time={_startDate && new Date(_startDate)}
                       variant="select"
                     />
                     <CTimePicker
                       container="inline"
                       disabled={_endDate === null ? true : false}
+                      hours={hours}
                       locale={locale}
+                      minutes={minutes}
                       onTimeChange={(_, __, date) => date && handleEndDateChange(date)}
+                      seconds={minutes && seconds}
                       time={_endDate && new Date(_endDate)}
                       variant="select"
                     />
@@ -802,13 +845,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                             ? true
                             : false
                       }
+                      hours={hours}
                       key={index}
                       locale={locale}
+                      minutes={minutes}
                       onTimeChange={(_, __, date) =>
                         index === 0
                           ? date && handleStartDateChange(date)
                           : date && handleEndDateChange(date)
                       }
+                      seconds={minutes && seconds}
                       time={
                         index === 0
                           ? _startDate && new Date(_startDate)
@@ -833,11 +879,11 @@ CDateRangePicker.propTypes = {
   ...CCalendar.propTypes,
   ...CFormControlWrapper.propTypes,
   ...CPicker.propTypes,
+  calendars: PropTypes.number,
   cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   cancelButtonColor: CButton.propTypes?.color,
   cancelButtonSize: CButton.propTypes?.size,
   cancelButtonVariant: CButton.propTypes?.variant,
-  calendars: PropTypes.number,
   className: PropTypes.string,
   cleaner: PropTypes.bool,
   closeOnSelect: PropTypes.bool,
@@ -845,12 +891,18 @@ CDateRangePicker.propTypes = {
   confirmButtonColor: CButton.propTypes?.color,
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
+  hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   inputDateFormat: PropTypes.func,
   inputDateParse: PropTypes.func,
   inputOnChangeDelay: PropTypes.number,
   inputReadOnly: PropTypes.bool,
+  minutes: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   placeholder: PropTypes.oneOfType([
     PropTypes.string,
@@ -863,6 +915,11 @@ CDateRangePicker.propTypes = {
   rangesButtonsSize: CButton.propTypes?.size,
   rangesButtonsVariant: CButton.propTypes?.variant,
   required: PropTypes.bool,
+  seconds: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   size: PropTypes.oneOf(['sm', 'lg']),
   timepicker: PropTypes.bool,

package/src/components/form/CChipInput.tsx

@@ -6,7 +6,6 @@ import React, {
   ReactNode,
   forwardRef,
   isValidElement,
-  useId,
   useMemo,
   useRef,
   useState,
@@ -65,7 +64,7 @@ export interface CChipInputProps extends Omit<
    */
   maxChips?: number | null
   /**
-   * Sets the name of the hidden input used by the React Chip Input component for form submission.
+   * Sets the name of the hidden input the component renders. Without it the hidden input carries the values but is not submitted with the form.
    */
   name?: string
   /**
@@ -199,7 +198,6 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
     )
     const [inputValue, setInputValue] = useState('')
     const inputRef = useRef<HTMLInputElement>(null)
-    const generatedName = useId()
 
     const values = useMemo(
       () => uniqueValues(isControlled ? (value as string[]) : _values),
@@ -440,8 +438,6 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
           },
           className
         )}
-        aria-disabled={disabled ? true : undefined}
-        aria-readonly={readOnly ? true : undefined}
         onClick={handleContainerClick}
         onKeyDown={handleContainerKeyDown}
         {...rest}
@@ -479,7 +475,7 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
           ref={inputRef}
         />
 
-        <input type="hidden" name={name ?? generatedName} value={values.join(',')} />
+        <input type="hidden" name={name} value={values.join(',')} />
       </div>
     )
   }

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

@@ -28,6 +28,7 @@ import {
   getOptionsList,
   isExternalSearch,
   isGlobalSearch,
+  propagateGroupDisabled,
   selectOptions,
 } from './utils'
 import type {
@@ -111,9 +112,6 @@ export interface CMultiSelectProps
   hideSelectAllOnSearchNoResults?: boolean
   /**
    * Set the id attribute for the native select element.
-   *
-   * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
-   * - `<select name="\{id\}-multi-select" />`
    */
   id?: string
   /**
@@ -311,7 +309,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       allowCreateOptions,
       ariaCleanerLabel = 'Clear all selections',
       ariaIndicatorLabel = 'Toggle visibility of options menu',
-      ariaSearchLabel = 'Search',
+      ariaSearchLabel = 'Search options',
       ariaTagDeleteLabel = 'Remove',
       className,
       cleaner = true,
@@ -336,7 +334,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       onHide,
       onSelectionLimit,
       onShow,
-      options,
+      options: optionsProp,
       optionsMaxHeight = 'auto',
       optionsStyle = 'checkbox',
       optionsTemplate,
@@ -381,12 +379,16 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const nativeSelectRef = useRef<HTMLSelectElement>(null)
     const searchRef = useRef<HTMLInputElement>(null)
     const isInitialMount = useRef(true)
+    const wasOpen = useRef(false)
     const uniqueId = useId()
 
+    const [labelledBy, setLabelledBy] = useState<string>()
     const [searchValue, setSearchValue] = useState('')
     const [selected, setSelected] = useState<SelectedOption[]>([])
     const [userOptions, setUserOptions] = useState<Option[]>([])
 
+    const options = useMemo(() => propagateGroupDisabled(optionsProp), [optionsProp])
+
     const filteredOptions = useMemo(() => {
       const source = isExternalSearch(search)
         ? [...options, ...filterOptionsList(searchValue, userOptions)]
@@ -523,6 +525,35 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       filteredSelected: countSelected(filteredSelectableOptions),
     }
 
+    useEffect(() => {
+      if (rest['aria-label'] || rest['aria-labelledby']) {
+        setLabelledBy(undefined)
+        return
+      }
+
+      const label = nativeSelectRef.current?.labels?.[0]
+
+      if (!label || label.contains(dropdownRefElement.current)) {
+        setLabelledBy(undefined)
+        return
+      }
+
+      if (label.id) {
+        setLabelledBy(label.id)
+        return
+      }
+
+      const generated = id ? `${id}-label` : `multi-select-label-${uniqueId.replaceAll(':', '')}`
+      label.id = generated
+      setLabelledBy(generated)
+
+      return () => {
+        if (label.id === generated) {
+          label.removeAttribute('id')
+        }
+      }
+    }, [id, uniqueId, rest['aria-label'], rest['aria-labelledby']])
+
     useEffect(() => {
       if (!isInitialMount.current && resetSelectionOnOptionsChange) {
         return setSelected([])
@@ -567,11 +598,13 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         }
 
         searchRef.current?.focus()
+      } else if (wasOpen.current && onHide) {
+        onHide()
       }
 
-      return () => {
-        if (onHide) onHide()
+      wasOpen.current = isOpen
 
+      return () => {
         if (isOpen) {
           const active = document.activeElement
           const menu = dropdownMenuElement.current as HTMLElement | null
@@ -618,6 +651,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         event.preventDefault()
 
         const items = getOptionsList(dropdownMenuElement.current)
+
+        if (items.length === 0) {
+          return
+        }
+
         const target = event.target as HTMLDivElement
 
         getNextActiveElement(
@@ -677,6 +715,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       if (isOpen && dropdownMenuElement.current && event.key === 'ArrowDown') {
         event.preventDefault()
         const items = getOptionsList(dropdownMenuElement.current)
+
+        if (items.length === 0) {
+          return
+        }
+
         const target = event.target as HTMLDivElement
 
         getNextActiveElement(
@@ -842,7 +885,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           <CMultiSelectNativeSelect
             id={id ?? uniqueId}
             multiple={multiple}
-            name={name ?? uniqueId}
+            name={name}
             options={selected}
             required={required}
             value={
@@ -862,6 +905,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
             role="combobox"
             aria-haspopup="listbox"
             aria-expanded={isOpen}
+            {...(rest['aria-label'] && { 'aria-label': rest['aria-label'] })}
+            {...((rest['aria-labelledby'] || labelledBy) && {
+              'aria-labelledby': rest['aria-labelledby'] || labelledBy,
+            })}
             aria-controls={`multiselect-listbox-${uniqueId}`}
             {...(portal && { 'aria-owns': `multiselect-listbox-${uniqueId}` })}
             {...(disabled && { 'aria-disabled': true })}
@@ -884,7 +931,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   className="form-multi-select-search"
                   disabled={disabled}
                   id={`search${id ?? uniqueId}`}
-                  name={`search${name ?? uniqueId}`}
                   autoComplete="off"
                   aria-label={ariaSearchLabel}
                   aria-autocomplete="list"

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

@@ -30,15 +30,7 @@ export const CMultiSelectNativeSelect = forwardRef<
   CMultiSelectNativeSelectProps
 >(({ id, name, options, ...rest }, ref) => {
   return (
-    <select
-      className="form-multi-select"
-      id={id}
-      {...(id && !name && { name: `${id}-multi-select` })} // TODO: remove in v6
-      {...(name && { name: name })}
-      tabIndex={-1}
-      {...rest}
-      ref={ref}
-    >
+    <select className="form-multi-select" id={id} name={name} tabIndex={-1} {...rest} ref={ref}>
       {options && createNativeOptions(options)}
     </select>
   )

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

@@ -85,13 +85,16 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, option: Option) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        onOptionOnClick?.(option)
+
+        if (!option.disabled) {
+          onOptionOnClick?.(option)
+        }
       }
 
       if (event.key === 'Down' || event.key === 'ArrowDown') {
         event.preventDefault()
         const target = event.target as HTMLElement
-        const next = getNextSibling(target, '.form-multi-select-option')
+        const next = getNextSibling(target, '.form-multi-select-option:not(.disabled)')
 
         next && (next as HTMLElement).focus()
       }
@@ -99,7 +102,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
       if (event.key === 'Up' || event.key === 'ArrowUp') {
         event.preventDefault()
         const target = event.target as HTMLElement
-        const prev = getPreviousSibling(target, '.form-multi-select-option')
+        const prev = getPreviousSibling(target, '.form-multi-select-option:not(.disabled)')
 
         prev && (prev as HTMLElement).focus()
       }
@@ -119,14 +122,20 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
 
       if (event.key === 'Down' || event.key === 'ArrowDown') {
         event.preventDefault()
-        const next = getNextSibling(event.target as HTMLElement, '.form-multi-select-option')
+        const next = getNextSibling(
+          event.target as HTMLElement,
+          '.form-multi-select-option:not(.disabled)'
+        )
 
         next && (next as HTMLElement).focus()
       }
 
       if (event.key === 'Up' || event.key === 'ArrowUp') {
         event.preventDefault()
-        const prev = getPreviousSibling(event.target as HTMLElement, '.form-multi-select-option')
+        const prev = getPreviousSibling(
+          event.target as HTMLElement,
+          '.form-multi-select-option:not(.disabled)'
+        )
 
         prev && (prev as HTMLElement).focus()
       }
@@ -158,9 +167,9 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
                 disabled: option.disabled,
               })}
               key={index}
-              onClick={() => onOptionOnClick && onOptionOnClick(option as Option)}
+              onClick={() => !option.disabled && onOptionOnClick?.(option as Option)}
               onKeyDown={(event) => handleKeyDown(event, option as Option)}
-              tabIndex={0}
+              tabIndex={option.disabled ? -1 : 0}
               role="option"
               aria-selected={selected.some((_option) => _option.value === option.value)}
               aria-disabled={Boolean(option.disabled)}
@@ -170,19 +179,23 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
           ) : (
             <div
               className={classNames('form-multi-select-optgroup-label', {
+                disabled: option.disabled,
                 'form-multi-select-optgroup-label-with-checkbox':
-                  optionsGroupsSelectable && optionsGroupsStyle === 'checkbox',
+                  !option.disabled && optionsGroupsSelectable && optionsGroupsStyle === 'checkbox',
                 'form-multi-selected':
+                  !option.disabled &&
                   optionsGroupsSelectable &&
                   optionsGroupsStyle === 'checkbox' &&
                   getGroupCheckboxState(option as OptionsGroup) === 'all',
                 'form-multi-select-indeterminate':
+                  !option.disabled &&
                   optionsGroupsSelectable &&
                   optionsGroupsStyle === 'checkbox' &&
                   getGroupCheckboxState(option as OptionsGroup) === 'indeterminate',
               })}
               key={index}
-              {...(optionsGroupsSelectable &&
+              {...(!option.disabled &&
+                optionsGroupsSelectable &&
                 optionsGroupsStyle === 'checkbox' && {
                   onClick: () => onGroupOnClick?.(option as OptionsGroup),
                   onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) =>

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

@@ -9,6 +9,7 @@ export type Option = {
 }
 
 export type OptionsGroup = {
+  disabled?: boolean
   label: string
   options?: Option[]
   [key: string]: unknown

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

@@ -45,19 +45,13 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
 }
 
 export const flattenOptionsArray = (
-  options: (Option | OptionsGroup)[],
-  keepGroupLabel?: boolean
+  options: (Option | OptionsGroup)[]
 ): (Option | OptionsGroup)[] => {
   const optionsList: (Option | OptionsGroup)[] = []
 
   for (const option of options) {
     if (Array.isArray(option.options)) {
-      const { options, ...rest } = option
-      if (keepGroupLabel) {
-        optionsList.push(rest)
-      }
-
-      optionsList.push(...options)
+      optionsList.push(...option.options)
     } else {
       optionsList.push(option)
     }
@@ -86,6 +80,19 @@ export const isGlobalSearch = (search: Search): boolean => {
   )
 }
 
+export const propagateGroupDisabled = (
+  options: (Option | OptionsGroup)[],
+  disabled = false
+): (Option | OptionsGroup)[] =>
+  (Array.isArray(options) ? options : []).map((option) => {
+    const isDisabled = disabled || Boolean(option.disabled)
+    const resolved = isDisabled ? { ...option, disabled: true } : option
+
+    return Array.isArray(option.options)
+      ? { ...resolved, options: propagateGroupDisabled(option.options, isDisabled) as Option[] }
+      : resolved
+  })
+
 export const selectOptions = (
   multiple: boolean,
   options: (Option | OptionsGroup)[],

package/src/components/offcanvas/COffcanvas.tsx

@@ -89,13 +89,17 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       if (_visible && !scroll) {
         document.body.style.overflow = 'hidden'
         document.body.style.paddingRight = '0px'
-        return
-      }
-
-      if (!scroll) {
+      } else if (!scroll) {
         document.body.style.removeProperty('overflow')
         document.body.style.removeProperty('padding-right')
       }
+
+      return () => {
+        if (!scroll) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
+      }
     }, [_visible])
 
     const handleDismiss = () => {

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

@@ -71,7 +71,7 @@ export interface COneTimePasswordProps
   masked?: boolean
 
   /**
-   * Name attribute for the hidden input field.
+   * Name attribute for the hidden input field. The visible slots are not named, so the code is submitted once, under this name; without it the component is not submitted at all.
    */
   name?: string
 
@@ -160,17 +160,17 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
     }, [children])
 
     const [inputValues, setInputValues] = useState<string[]>(() => {
-      const initialValue = String(value ?? defaultValue ?? '')
+      const initialValue = extractValidChars(String(value ?? defaultValue ?? ''), type)
       return Array.from({ length: inputCount }, (_, i) => initialValue[i] || '')
     })
 
     // Update input values when value prop changes (controlled mode)
     useEffect(() => {
       if (value !== undefined) {
-        const valueString = String(value)
+        const valueString = extractValidChars(String(value), type)
         setInputValues(Array.from({ length: inputCount }, (_, i) => valueString[i] || ''))
       }
-    }, [value, inputCount])
+    }, [type, value, inputCount])
 
     // Update hidden input and trigger events
     const updateValue = useCallback(
@@ -414,14 +414,15 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
                 inputChild.props.className
               ),
               id: inputChild.props.id || (id ? `${id}-${currentInputIndex}` : undefined),
-              name: inputChild.props.name || (name ? `${name}-${currentInputIndex}` : undefined),
+              name: inputChild.props.name,
               placeholder:
                 inputChild.props.placeholder ||
                 (placeholder && placeholder.length > 1
                   ? placeholder[currentInputIndex]
                   : placeholder),
               value: inputValues[currentInputIndex] || '',
-              tabIndex: currentInputIndex === 0 ? 0 : inputValues[currentInputIndex - 1] ? 0 : -1,
+              tabIndex:
+                !linear || currentInputIndex === 0 || inputValues[currentInputIndex - 1] ? 0 : -1,
               disabled: disabled || inputChild.props.disabled,
               readOnly: readOnly || inputChild.props.readOnly,
               required: required || inputChild.props.required,

package/src/components/time-picker/CTimePicker.tsx

@@ -106,7 +106,7 @@ export interface CTimePickerProps
    *
    * @since 5.0.0
    */
-  hours?: number[] | ((hour: number) => number[])
+  hours?: number[] | ((hour: number) => boolean)
   /**
    * Set the id attribute for the input element.
    *
@@ -136,7 +136,7 @@ export interface CTimePickerProps
    *
    * @since 5.0.0
    */
-  minutes?: boolean | number[] | ((minute: number) => number[])
+  minutes?: boolean | number[] | ((minute: number) => boolean)
   /**
    * Set the name attribute for the input element.
    *
@@ -162,7 +162,7 @@ export interface CTimePickerProps
    *
    * @since 4.8.0
    */
-  seconds?: boolean | number[] | ((second: number) => number[])
+  seconds?: boolean | number[] | ((second: number) => boolean)
   /**
    * Size the component small or large.
    */

package/src/components/time-picker/utils.ts

@@ -114,9 +114,9 @@ export const formatTimePartials = (
 export const getLocalizedTimePartials = (
   locale: string,
   ampm: 'auto' | boolean = 'auto',
-  hours: boolean | number[] | ((hour: number) => number[]) = [],
-  minutes: boolean | number[] | ((minute: number) => number[]) = [],
-  seconds: boolean | number[] | ((second: number) => number[]) = []
+  hours: boolean | number[] | ((hour: number) => boolean) = [],
+  minutes: boolean | number[] | ((minute: number) => boolean) = [],
+  seconds: boolean | number[] | ((second: number) => boolean) = []
 ): LocalizedTimePartials => {
   const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true