@coreui/react-pro 5.12.0 → 5.13.0

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

@@ -188,6 +188,12 @@ export interface CMultiSelectProps
    * Size the component small or large.
    */
   size?: 'sm' | 'lg'
+  /**
+   * Sets the initially selected values for the multi-select component.
+   *
+   * @since 5.13.0
+   */
+  value?: string | number | (string | number)[]
   /**
    * Enable virtual scroller for the options list.
    *
@@ -248,12 +254,13 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       text,
       tooltipFeedback,
       valid,
+      value,
       virtualScroller,
       visible = false,
       visibleItems = 10,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const {
       dropdownMenuElement,
@@ -278,18 +285,38 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           isExternalSearch(search)
             ? [...options, ...filterOptionsList(searchValue, userOptions)]
             : filterOptionsList(searchValue, [...options, ...userOptions]),
-          true,
+          true
         ),
-      [options, searchValue, userOptions],
+      [options, searchValue, userOptions]
     )
 
-    const flattenedOptions = useMemo(() => flattenOptionsArray(options), [options])
+    const flattenedOptions = useMemo(
+      () =>
+        flattenOptionsArray(options).map((option) => {
+          if (value && Array.isArray(value)) {
+            return {
+              ...option,
+              selected: value.includes(option.value),
+            }
+          }
+
+          if (value === option.value) {
+            return {
+              ...option,
+              selected: true,
+            }
+          }
+
+          return option
+        }),
+      [options, value]
+    )
 
     const userOption = useMemo(() => {
       if (
         allowCreateOptions &&
         filteredOptions.some(
-          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase(),
+          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase()
         )
       ) {
         return false
@@ -305,7 +332,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
       const _selected = flattenedOptions.filter((option: Option) => option.selected === true)
       const deselected = flattenedOptions.filter(
-        (option: Option) => option.selected === false,
+        (option: Option) => option.selected === false
       ) as Option[]
 
       if (_selected.length > 0) {
@@ -314,7 +341,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }, [flattenedOptions])
 
     useEffect(() => {
-      !isInitialMount.current && onFilterChange && onFilterChange(searchValue)
+      if (!isInitialMount.current && onFilterChange) {
+        onFilterChange(searchValue)
+      }
     }, [searchValue])
 
     useEffect(() => {
@@ -378,7 +407,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
         return
       }
@@ -395,7 +424,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           setSelected([
             ...selected,
             filteredOptions.find(
-              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase()
             ) as Option,
           ])
         }
@@ -437,7 +466,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
       }
     }
@@ -488,8 +517,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         selectOptions(
           multiple,
           [...flattenedOptions.filter((option: Option) => !option.disabled), ...userOptions],
-          selected,
-        ),
+          selected
+        )
       )
     }
 
@@ -534,7 +563,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
               'is-valid': valid,
               show: isOpen,
             },
-            className,
+            className
           )}
           onKeyDown={handleGlobalSearch}
           aria-expanded={isOpen}
@@ -646,7 +675,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         </div>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CMultiSelect.propTypes = {
@@ -687,6 +716,12 @@ CMultiSelect.propTypes = {
   selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),
   selectionTypeCounterText: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   virtualScroller: PropTypes.bool,
   visible: PropTypes.bool,
   visibleItems: PropTypes.number,

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

@@ -0,0 +1,164 @@
+import React, {
+  ChangeEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
+
+export interface CPasswordInputProps
+  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"`.
+   */
+  ariaLabelToggler?: string
+
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+
+  /**
+   * Enables delayed `onChange` execution for improved performance in React password inputs.
+   * - `true` delays the `onChange` callback by 500ms.
+   * - You can also pass a custom delay (in milliseconds) as a number.
+   */
+  delay?: boolean | number
+
+  /**
+   * Disables the password input field. When `true`, the user cannot interact with the field.
+   */
+  disabled?: boolean
+
+  /**
+   * Callback triggered when the value of the password input changes. If `delay` is set, the callback is called after the specified timeout.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+
+  /**
+   * Makes the React password input read-only. Prevents user input but allows text selection.
+   */
+  readOnly?: boolean
+
+  /**
+   * Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows **toggling password visibility** in React forms.
+   */
+  showPassword?: boolean
+
+  /**
+   * Sets the visual size of the password input. Use `'sm'` for small or `'lg'` for large input fields.
+   */
+  size?: 'sm' | 'lg'
+
+  /**
+   * The value of the password input field. To make the input controlled, pair this with the `onChange` handler.
+   */
+  value?: string | string[] | number
+}
+
+export const CPasswordInput = forwardRef<HTMLInputElement, CPasswordInputProps>(
+  (
+    {
+      children,
+      ariaLabelToggler = 'Toggle password visibility',
+      className,
+      delay = false,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingClassName,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      onChange,
+      showPassword: showPasswordProp = false,
+      size,
+      text,
+      tooltipFeedback,
+      valid,
+      ...rest
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
+    const [showPassword, setShowPassword] = useState<boolean>(showPasswordProp)
+
+    useEffect(() => {
+      const timeOutId = setTimeout(
+        () => value && onChange && onChange(value),
+        typeof delay === 'number' ? delay : 500
+      )
+
+      return () => clearTimeout(timeOutId)
+    }, [value])
+
+    useEffect(() => {
+      setShowPassword(showPasswordProp)
+    }, [showPasswordProp])
+
+    return (
+      <CFormControlWrapper
+        describedby={rest['aria-describedby']}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
+        floatingLabel={floatingLabel}
+        id={id}
+        invalid={invalid}
+        label={label}
+        text={text}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      >
+        <div className="form-password">
+          <input
+            className={classNames(
+              'form-control',
+              {
+                [`form-control-${size}`]: size,
+                'is-invalid': invalid,
+                'is-valid': valid,
+              },
+              className
+            )}
+            id={id}
+            type={showPassword ? 'text' : 'password'}
+            onChange={(event) => (delay ? setValue(event) : onChange && onChange(event))}
+            {...rest}
+            ref={ref}
+          >
+            {children}
+          </input>
+          <button
+            type="button"
+            className="form-password-action"
+            data-coreui-toggle="password"
+            aria-label={ariaLabelToggler}
+            onClick={() => setShowPassword((prev) => !prev)}
+          >
+            <span className="form-password-action-icon"></span>
+          </button>
+        </div>
+      </CFormControlWrapper>
+    )
+  }
+)
+
+CPasswordInput.propTypes = {
+  ariaLabelToggler: PropTypes.string,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  showPassword: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  ...CFormControlWrapper.propTypes,
+}
+
+CPasswordInput.displayName = 'CPasswordInput'

package/src/components/password-input/index.ts

@@ -0,0 +1,3 @@
+import { CPasswordInput } from './CPasswordInput'
+
+export { CPasswordInput }

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

@@ -200,7 +200,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const formRef = useRef<HTMLFormElement>()
     const inputRef = useRef<HTMLInputElement>(null)
@@ -239,8 +239,9 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             })
           : ''
       }
-
-      date && setAmPm(getAmPm(new Date(date), locale))
+      if (date) {
+        setAmPm(getAmPm(new Date(date), locale))
+      }
     }, [date])
 
     useEffect(() => {
@@ -262,7 +263,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
       setDate(null)
-      onTimeChange && onTimeChange(null)
+      onTimeChange?.(null)
     }
 
     const handleFormValidation = (form: HTMLFormElement) => {
@@ -279,7 +280,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
     const handleOnChange = useDebouncedCallback(
       (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
-      inputOnChangeDelay,
+      inputOnChangeDelay
     )
 
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
@@ -311,7 +312,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       setDate(new Date(_date))
-      onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+      onTimeChange?.(_date.toTimeString(), _date.toLocaleTimeString(), _date)
     }
 
     const InputGroup = () => (
@@ -456,7 +457,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               'is-invalid': isValid === false ? true : false,
               'is-valid': isValid,
             },
-            className,
+            className
           )}
           container={container}
           disabled={disabled}
@@ -470,7 +471,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   size={cancelButtonSize}
                   variant={cancelButtonVariant}
                   onClick={() => {
-                    initialDate && setDate(new Date(initialDate))
+                    if (initialDate) {
+                      setDate(new Date(initialDate))
+                    }
+
                     setVisible(false)
                   }}
                 >
@@ -493,12 +497,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           }
           onHide={() => {
             setVisible(false)
-            onHide && onHide()
+            onHide?.()
           }}
           onShow={() => {
-            date && setInitialDate(new Date(date))
+            if (date) {
+              setInitialDate(new Date(date))
+            }
+
             setVisible(true)
-            onShow && onShow()
+            onShow?.()
           }}
           portal={portal}
           toggler={InputGroup()}
@@ -550,7 +557,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         </CPicker>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CTimePicker.propTypes = {

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

@@ -65,12 +65,12 @@ export const getAmPm = (date: Date, locale: string): AmPm => {
 export const formatTimePartials = (
   values: number[],
   locale: string,
-  partial: 'hour' | 'minute' | 'second',
+  partial: 'hour' | 'minute' | 'second'
 ): FormattedPartial[] => {
   const date = new Date()
-
+  const forceTwoDigit = shouldUseTwoDigitHour(locale)
   const formatter = new Intl.DateTimeFormat(locale, {
-    hour: 'numeric',
+    hour: forceTwoDigit ? '2-digit' : 'numeric',
     minute: '2-digit',
     second: '2-digit',
   })
@@ -109,32 +109,32 @@ export const getLocalizedTimePartials = (
   ampm: 'auto' | boolean = 'auto',
   hours: boolean | number[] | ((hour: number) => number[]) = [],
   minutes: boolean | number[] | ((minute: number) => number[]) = [],
-  seconds: boolean | number[] | ((second: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = []
 ): LocalizedTimePartials => {
   const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true
 
   const listOfHours =
     Array.isArray(hours) && hours.length > 0
       ? hours
-      : (typeof hours === 'function'
+      : typeof hours === 'function'
         ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) =>
-            hours(hour),
+            hours(hour)
           )
-        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)))
+        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i))
 
   const listOfMinutes =
     Array.isArray(minutes) && minutes.length > 0
       ? minutes
-      : (typeof minutes === 'function'
+      : typeof minutes === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   const listOfSeconds =
     Array.isArray(seconds) && seconds.length > 0
       ? seconds
-      : (typeof seconds === 'function'
+      : typeof seconds === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   return {
     listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
@@ -154,12 +154,12 @@ export const getLocalizedTimePartials = (
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
-  ampm: 'auto' | boolean = 'auto',
+  ampm: 'auto' | boolean = 'auto'
 ): number | string =>
   date
-    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
-      : date.getHours())
+      : date.getHours()
     : ''
 
 /**
@@ -195,3 +195,19 @@ export const isValidTime = (time: string): boolean => {
   const d = new Date(`1970-01-01T${time}`)
   return d instanceof Date && !Number.isNaN(d.getTime())
 }
+
+/**
+ * Checks whether the given locale formats the hour "9" with a leading zero ("09")
+ * when using `hour: 'numeric'` in `toLocaleTimeString`.
+ *
+ * This helps determine if you should force `hour: '2-digit'` for consistent formatting.
+ *
+ * @param {string} locale - The locale code (e.g., "en-US", "pl-PL").
+ * @returns {boolean} `true` if the formatted hour starts with a leading zero, otherwise `false`.
+ */
+export const shouldUseTwoDigitHour = (locale: string): boolean => {
+  const d = new Date(2020, 0, 1, 7, 5, 7) // 7:05:07
+  const formatted = d.toLocaleTimeString(locale)
+
+  return formatted.startsWith('0') // check if the hour starts with "0"
+}