@coreui/react-pro 5.0.0-rc.0 → 5.0.0-rc.2

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

@@ -13,6 +13,7 @@ import { CFormCheck, CFormInput } from '../form'
 import { CTableHeaderCell, CTableRow } from '../table'
 import { CTableHead, CTableHeadProps } from '../table/CTableHead'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types'
 import {
   getColumnKey,
@@ -26,10 +27,10 @@ import {
 } from './utils'
 
 export interface CSmartTableHeadProps extends CTableHeadProps {
+  as?: ElementType
   columnFilter?: boolean | ColumnFilter
   columnFilterState?: ColumnFilterValue
   columnSorter?: boolean | Sorter
-  component?: string | ElementType
   columns: (Column | string)[]
   handleOnCustomFilterChange?: (key: string, value: any) => void
   handleFilterOnChange?: (key: string, value: string) => void
@@ -47,205 +48,206 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   sortingIconDescending?: ReactNode
 }
 
-export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHeadProps>(
-  (
-    {
-      columnFilter,
-      columnFilterState,
-      columnSorter,
-      component: Component = CTableHead,
-      columns,
-      handleOnCustomFilterChange,
-      handleFilterOnChange,
-      handleFilterOnInput,
-      handleSelectAllChecked,
-      handleSort,
-      items,
-      selectable,
-      selectAll,
-      selectedAll,
-      showGroups = true,
-      sorterState,
-      sortingIcon,
-      sortingIconAscending,
-      sortingIconDescending,
-      ...rest
-    },
-    ref,
-  ) => {
-    const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
-    const [refresh, setRefresh] = useState(false)
+export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartTableHeadProps> =
+  forwardRef<HTMLTableSectionElement, CSmartTableHeadProps>(
+    (
+      {
+        as: Component = CTableHead,
+        columnFilter,
+        columnFilterState,
+        columnSorter,
+        columns,
+        handleOnCustomFilterChange,
+        handleFilterOnChange,
+        handleFilterOnInput,
+        handleSelectAllChecked,
+        handleSort,
+        items,
+        selectable,
+        selectAll,
+        selectedAll,
+        showGroups = true,
+        sorterState,
+        sortingIcon,
+        sortingIconAscending,
+        sortingIconDescending,
+        ...rest
+      },
+      ref,
+    ) => {
+      const selectAllcheckboxRef = useRef<HTMLInputElement>(null)
+      const [refresh, setRefresh] = useState(false)
+
+      const _columns = useMemo(() => getColumns(columns), [columns])
+      const groups = useMemo(() => getColumnGroups(columns), [columns])
 
-    const _columns = useMemo(() => getColumns(columns), [columns])
-    const groups = useMemo(() => getColumnGroups(columns), [columns])
+      useEffect(() => {
+        if (columnFilterState && Object.keys(columnFilterState).length === 0) {
+          setRefresh(true)
+        }
+      }, [columnFilterState])
 
-    useEffect(() => {
-      if (columnFilterState && Object.keys(columnFilterState).length === 0) {
+      useEffect(() => {
         setRefresh(true)
-      }
-    }, [columnFilterState])
+      }, [items])
 
-    useEffect(() => {
-      setRefresh(true)
-    }, [items])
+      useEffect(() => {
+        if (setRefresh) {
+          setRefresh(false)
+        }
+      }, [refresh])
 
-    useEffect(() => {
-      if (setRefresh) {
-        setRefresh(false)
-      }
-    }, [refresh])
+      const columnSorterIcon = (column: Column | string) => {
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
+          return <span className="opacity-25 float-end me-1">{sortingIcon}</span>
+        }
 
-    const columnSorterIcon = (column: Column | string) => {
-      if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
-        return <span className="opacity-25 float-end me-1">{sortingIcon}</span>
-      }
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
+          return <span className="float-end me-1">{sortingIconAscending}</span>
+        }
 
-      if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
-        return <span className="float-end me-1">{sortingIconAscending}</span>
-      }
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
+          return <span className="float-end me-1">{sortingIconDescending}</span>
+        }
 
-      if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
-        return <span className="float-end me-1">{sortingIconDescending}</span>
+        return
       }
 
-      return
-    }
-
-    return (
-      <Component {...rest} ref={ref}>
-        {showGroups &&
-          groups &&
-          groups.length > 0 &&
-          groups.map((row, index) => (
-            <CTableRow key={index}>
-              {selectable && <CTableHeaderCell></CTableHeaderCell>}
-              {row.map((cell, index) => (
+      return (
+        <Component {...rest} ref={ref}>
+          {showGroups &&
+            groups &&
+            groups.length > 0 &&
+            groups.map((row, index) => (
+              <CTableRow key={index}>
+                {selectable && <CTableHeaderCell></CTableHeaderCell>}
+                {row.map((cell, index) => (
+                  <CTableHeaderCell
+                    colSpan={cell.colspan}
+                    {...getTableHeaderCellProps(cell)}
+                    key={index}
+                  >
+                    {cell.label}
+                  </CTableHeaderCell>
+                ))}
+              </CTableRow>
+            ))}
+          <CTableRow>
+            {selectable && (
+              <CTableHeaderCell>
+                {selectAll && (
+                  <CFormCheck
+                    checked={typeof selectedAll === 'boolean' ? selectedAll : false}
+                    indeterminate={selectedAll === 'indeterminate' ? true : false}
+                    onChange={() => handleSelectAllChecked && handleSelectAllChecked()}
+                    ref={selectAllcheckboxRef}
+                  />
+                )}
+              </CTableHeaderCell>
+            )}
+            {_columns.map((column: Column | string, index: number) => {
+              const isSortable =
+                columnSorter &&
+                (typeof column === 'object'
+                  ? column.sorter === undefined
+                    ? true
+                    : column.sorter
+                  : true)
+              return (
                 <CTableHeaderCell
-                  colSpan={cell.colspan}
-                  {...getTableHeaderCellProps(cell)}
+                  {...getTableHeaderCellProps(column)}
+                  style={getTableHeaderCellStyles(column, columnSorter)}
                   key={index}
-                >
-                  {cell.label}
-                </CTableHeaderCell>
-              ))}
-            </CTableRow>
-          ))}
-        <CTableRow>
-          {selectable && (
-            <CTableHeaderCell>
-              {selectAll && (
-                <CFormCheck
-                  checked={typeof selectedAll === 'boolean' ? selectedAll : false}
-                  indeterminate={selectedAll === 'indeterminate' ? true : false}
-                  onChange={() => handleSelectAllChecked && handleSelectAllChecked()}
-                  ref={selectAllcheckboxRef}
-                />
-              )}
-            </CTableHeaderCell>
-          )}
-          {_columns.map((column: Column | string, index: number) => {
-            const isSortable =
-              columnSorter &&
-              (typeof column === 'object'
-                ? column.sorter === undefined
-                  ? true
-                  : column.sorter
-                : true)
-            return (
-              <CTableHeaderCell
-                {...getTableHeaderCellProps(column)}
-                style={getTableHeaderCellStyles(column, columnSorter)}
-                key={index}
-                {...(isSortable && {
-                  onClick: () => handleSort && handleSort(getColumnKey(column), index),
-                  onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                      handleSort && handleSort(getColumnKey(column), index)
-                    }
+                  {...(isSortable && {
+                    onClick: () => handleSort && handleSort(getColumnKey(column), index),
+                    onKeyDown: (event) => {
+                      if (event.key === 'Enter') {
+                        handleSort && handleSort(getColumnKey(column), index)
+                      }
 
-                    if (event.key === 'ArrowUp') {
-                      event.preventDefault()
-                      handleSort && handleSort(getColumnKey(column), index, 'asc')
-                    }
+                      if (event.key === 'ArrowUp') {
+                        event.preventDefault()
+                        handleSort && handleSort(getColumnKey(column), index, 'asc')
+                      }
 
-                    if (event.key === 'ArrowDown') {
-                      event.preventDefault()
-                      handleSort && handleSort(getColumnKey(column), index, 'desc')
-                    }
-                  },
-                  tabIndex: 0,
-                })}
-              >
-                <div className="d-inline">{getColumnLabel(column)}</div>
-                {isSortable && columnSorterIcon(column)}
-              </CTableHeaderCell>
-            )
-          })}
-        </CTableRow>
-        {columnFilter && (
-          <CTableRow>
-            {selectable && <CTableHeaderCell></CTableHeaderCell>}
-            {_columns.map((column: Column | string, index: number) => {
-              return (
-                <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
-                  {(
-                    typeof column === 'object'
-                      ? column.filter === undefined
-                        ? true
-                        : column.filter
-                      : true
-                  ) ? (
-                    typeof column !== 'string' && typeof column.filter === 'function' ? (
-                      !refresh &&
-                      column.filter(
-                        getColumnValues(items, getColumnKey(column)),
-                        (value: any) =>
-                          handleOnCustomFilterChange &&
-                          handleOnCustomFilterChange(getColumnKey(column), value),
-                      )
-                    ) : (
-                      <CFormInput
-                        size="sm"
-                        onInput={(event) =>
-                          handleFilterOnInput &&
-                          handleFilterOnInput(
-                            getColumnKey(column),
-                            (event.target as HTMLInputElement).value,
-                          )
-                        }
-                        onChange={(event) =>
-                          handleFilterOnChange &&
-                          handleFilterOnChange(
-                            getColumnKey(column),
-                            (event.target as HTMLInputElement).value,
-                          )
-                        }
-                        value={
-                          columnFilterState && columnFilterState[getColumnKey(column)]
-                            ? columnFilterState[getColumnKey(column)]
-                            : ''
-                        }
-                        aria-label={`column name: '${getColumnLabel(column)}' filter input`}
-                      />
-                    )
-                  ) : (
-                    ''
-                  )}
+                      if (event.key === 'ArrowDown') {
+                        event.preventDefault()
+                        handleSort && handleSort(getColumnKey(column), index, 'desc')
+                      }
+                    },
+                    tabIndex: 0,
+                  })}
+                >
+                  <div className="d-inline">{getColumnLabel(column)}</div>
+                  {isSortable && columnSorterIcon(column)}
                 </CTableHeaderCell>
               )
             })}
           </CTableRow>
-        )}
-      </Component>
-    )
-  },
-)
+          {columnFilter && (
+            <CTableRow>
+              {selectable && <CTableHeaderCell></CTableHeaderCell>}
+              {_columns.map((column: Column | string, index: number) => {
+                return (
+                  <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
+                    {(
+                      typeof column === 'object'
+                        ? column.filter === undefined
+                          ? true
+                          : column.filter
+                        : true
+                    ) ? (
+                      typeof column !== 'string' && typeof column.filter === 'function' ? (
+                        !refresh &&
+                        column.filter(
+                          getColumnValues(items, getColumnKey(column)),
+                          (value: any) =>
+                            handleOnCustomFilterChange &&
+                            handleOnCustomFilterChange(getColumnKey(column), value),
+                        )
+                      ) : (
+                        <CFormInput
+                          size="sm"
+                          onInput={(event) =>
+                            handleFilterOnInput &&
+                            handleFilterOnInput(
+                              getColumnKey(column),
+                              (event.target as HTMLInputElement).value,
+                            )
+                          }
+                          onChange={(event) =>
+                            handleFilterOnChange &&
+                            handleFilterOnChange(
+                              getColumnKey(column),
+                              (event.target as HTMLInputElement).value,
+                            )
+                          }
+                          value={
+                            columnFilterState && columnFilterState[getColumnKey(column)]
+                              ? columnFilterState[getColumnKey(column)]
+                              : ''
+                          }
+                          aria-label={`column name: '${getColumnLabel(column)}' filter input`}
+                        />
+                      )
+                    ) : (
+                      ''
+                    )}
+                  </CTableHeaderCell>
+                )
+              })}
+            </CTableRow>
+          )}
+        </Component>
+      )
+    },
+  )
 
 CSmartTableHead.propTypes = {
+  as: PropTypes.elementType,
   columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   columnFilterState: PropTypes.object,
   columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  component: PropTypes.elementType,
   children: PropTypes.node,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired, // TODO: improve this Prop Type,
   handleFilterOnChange: PropTypes.func,

package/src/components/spinner/CSpinner.tsx

@@ -2,10 +2,15 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -16,10 +21,6 @@ export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanE
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Size the component small.
    */
@@ -34,12 +35,15 @@ export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanE
   visuallyHiddenLabel?: string
 }
 
-export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerProps>(
+export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CSpinnerProps
+>(
   (
     {
+      as: Component = 'div',
       className,
       color,
-      component: Component = 'div',
       size,
       variant = 'border',
       visuallyHiddenLabel = 'Loading...',
@@ -68,9 +72,9 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
 )
 
 CSpinner.propTypes = {
+  as: PropTypes.string,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.string,
   size: PropTypes.oneOf(['sm']),
   variant: PropTypes.oneOf(['border', 'grow']),
   visuallyHiddenLabel: PropTypes.string,

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CSpinner component', async () => {
 
 test('CSpinner customize', async () => {
   const { container } = render(
-    <CSpinner className="bazinga" color="warning" component="h3" size="sm" variant="grow">
+    <CSpinner className="bazinga" color="warning" as="h3" size="sm" variant="grow">
       Test
     </CSpinner>,
   )

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

@@ -20,6 +20,7 @@ import {
 
 import { Colors } from '../../types'
 import type { LocalizedTimePartials } from './types'
+import { useDebouncedCallback } from '../../hooks'
 
 export interface CTimePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
@@ -77,10 +78,22 @@ export interface CTimePickerProps
    * 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.
+   *
+   * @since 5.0.0-rc.2
+   */
+  hours?: number[] | ((hour: number) => number[])
   /**
    * Toggle visibility or set the content of the input indicator.
    */
   indicator?: ReactNode | boolean
+  /**
+   * Defines the delay (in milliseconds) for the input field's onChange event.
+   *
+   * @since v5.0.0-rc.2
+   */
+  inputOnChangeDelay?: number
   /**
    * Toggle the readonly state for the component.
    */
@@ -89,6 +102,12 @@ export interface CTimePickerProps
    * Sets the default locale for components. If not set, it is inherited from the browser.
    */
   locale?: string
+  /**
+   * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.
+   *
+   * @since 5.0.0-rc.2
+   */
+  minutes?: boolean | number[] | ((minute: number) => number[])
   /**
    * Callback fired when the time changed.
    */
@@ -104,11 +123,11 @@ export interface CTimePickerProps
    */
   required?: boolean
   /**
-   * Show seconds.
+   * Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.
    *
    * @since 4.8.0
    */
-  seconds?: boolean
+  seconds?: boolean | number[] | ((second: number) => number[])
   /**
    * Size the component small or large.
    */
@@ -143,12 +162,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       feedbackInvalid,
       feedbackValid,
       footer = true,
+      hours,
       id,
       indicator = true,
+      inputOnChangeDelay = 750,
       inputReadOnly,
       invalid,
       label,
       locale = 'default',
+      minutes = true,
       onTimeChange,
       onHide,
       onShow,
@@ -191,13 +213,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }, [valid, invalid])
 
     useEffect(() => {
-      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
+      setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm, hours, minutes, seconds))
 
       if (inputRef.current) {
         inputRef.current.value = date
           ? date.toLocaleTimeString(locale, {
               hour12: localizedTimePartials && localizedTimePartials.hour12,
-              ...(!seconds && { timeStyle: 'short' }),
+              hour: 'numeric',
+              ...(minutes && { minute: 'numeric' }),
+              ...(seconds && { second: 'numeric' }),
             })
           : ''
       }
@@ -239,6 +263,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       setIsValid(false)
     }
 
+    const handleOnChange = useDebouncedCallback(
+      (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
+      inputOnChangeDelay,
+    )
+
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
       const _date = date || new Date('1970-01-01')
 
@@ -276,11 +305,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         <input
           autoComplete="off"
           className="time-picker-input"
-          // delay={true}
           disabled={disabled}
-          onChange={(event) =>
-            isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
-          }
+          onChange={(event) => handleOnChange(event.target.value)}
           placeholder={placeholder}
           readOnly={inputReadOnly}
           required={required}
@@ -320,22 +346,26 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                 </option>
               ))}
           </select>
-          <>:</>
-          <select
-            className="time-picker-inline-select"
-            disabled={disabled}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-              handleTimeChange('minutes', event.target.value)
-            }
-            value={getSelectedMinutes(date)}
-          >
-            {localizedTimePartials &&
-              localizedTimePartials.listOfMinutes.map((option, index) => (
-                <option value={option.value.toString()} key={index}>
-                  {option.label}
-                </option>
-              ))}
-          </select>
+          {minutes && (
+            <>
+              <>:</>
+              <select
+                className="time-picker-inline-select"
+                disabled={disabled}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                  handleTimeChange('minutes', event.target.value)
+                }
+                value={getSelectedMinutes(date)}
+              >
+                {localizedTimePartials &&
+                  localizedTimePartials.listOfMinutes.map((option, index) => (
+                    <option value={option.value.toString()} key={index}>
+                      {option.label}
+                    </option>
+                  ))}
+              </select>
+            </>
+          )}
           {seconds && (
             <>
               <>:</>
@@ -459,11 +489,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   onClick={(index: number) => handleTimeChange('hours', index.toString())}
                   selected={getSelectedHour(date, locale, ampm)}
                 />
-                <CTimePickerRollCol
-                  elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
-                  onClick={(index: number) => handleTimeChange('minutes', index.toString())}
-                  selected={getSelectedMinutes(date)}
-                />
+                {minutes && (
+                  <CTimePickerRollCol
+                    elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
+                    onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                    selected={getSelectedMinutes(date)}
+                  />
+                )}
                 {seconds && (
                   <CTimePickerRollCol
                     elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
@@ -503,10 +535,21 @@ CTimePicker.propTypes = {
   confirmButtonColor: CButton.propTypes?.color,
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
+  hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]),
+  inputOnChangeDelay: PropTypes.number,
   locale: PropTypes.string,
+  minutes: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   onTimeChange: PropTypes.func,
   required: PropTypes.bool,
-  seconds: PropTypes.bool,
+  seconds: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.number.isRequired),
+    PropTypes.func,
+  ]),
   time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),
 }