@coreui/react-pro 5.22.0 → 5.23.0

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

@@ -0,0 +1,462 @@
+import React, {
+  ChangeEvent,
+  Children,
+  ClipboardEvent,
+  cloneElement,
+  FocusEvent,
+  forwardRef,
+  HTMLAttributes,
+  isValidElement,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  ReactElement,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
+import { COneTimePasswordInput, COneTimePasswordInputProps } from './COneTimePasswordInput'
+
+import { isValidInput, extractValidChars } from './utils'
+import { getNextActiveElement, isRTL } from '../../utils'
+
+type ComponentWithDisplayName = {
+  displayName?: string
+}
+
+export interface COneTimePasswordProps
+  extends CFormControlWrapperProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
+   */
+  ariaLabel?: (index: number, total: number) => string
+
+  /**
+   * Automatically submit the form when all one time password fields are filled.
+   */
+  autoSubmit?: boolean
+
+  /**
+   * A string of all className you want applied to the React.js OTP component.
+   */
+  className?: string
+
+  /**
+   * Initial value for uncontrolled React.js one time password input.
+   */
+  defaultValue?: string | number
+
+  /**
+   * Disable all one time password (OTP) input fields.
+   */
+  disabled?: boolean
+
+  /**
+   * ID attribute for the hidden input field.
+   */
+  id?: string
+
+  /**
+   * Enforce sequential input (users must fill fields in order).
+   */
+  linear?: boolean
+
+  /**
+   * Show input as password (masked characters).
+   */
+  masked?: boolean
+
+  /**
+   * Name attribute for the hidden input field.
+   */
+  name?: string
+
+  /**
+   * Callback triggered when the React.js one time password (OTP) value changes.
+   */
+  onChange?: (value: string) => void
+
+  /**
+   * Callback triggered when all React.js one time password (OTP) fields are filled.
+   */
+  onComplete?: (value: string) => void
+
+  /**
+   * Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
+   */
+  placeholder?: string
+
+  /**
+   * Make React.js OTP input component read-only.
+   */
+  readOnly?: boolean
+
+  /**
+   * Makes the input field required for form validation.
+   */
+  required?: boolean
+
+  /**
+   * Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
+   */
+  size?: 'sm' | 'lg'
+
+  /**
+   * Input validation type: 'number' for digits only, or 'text' for free text.
+   */
+  type?: 'number' | 'text'
+
+  /**
+   * Current value for controlled OTP input.
+   */
+  value?: string | number
+}
+
+export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps>(
+  (
+    {
+      ariaLabel = (index: number, total: number) => `Digit ${index + 1} of ${total}`,
+      autoSubmit = false,
+      children,
+      className,
+      defaultValue,
+      disabled = false,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingClassName,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      linear = true,
+      masked = false,
+      name,
+      onChange,
+      onComplete,
+      placeholder,
+      readOnly = false,
+      required = false,
+      size,
+      text,
+      tooltipFeedback,
+      type = 'number',
+      valid,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+    const hiddenInputRef = useRef<HTMLInputElement>(null)
+
+    // Count valid OTP input children
+    const inputCount = useMemo(() => {
+      return Children.count(children)
+    }, [children])
+
+    const [inputValues, setInputValues] = useState<string[]>(() => {
+      const initialValue = String(value ?? defaultValue ?? '')
+      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)
+        setInputValues(Array.from({ length: inputCount }, (_, i) => valueString[i] || ''))
+      }
+    }, [value, inputCount])
+
+    // Update hidden input and trigger events
+    const updateValue = useCallback(
+      (newValues: string[]) => {
+        const newValue = newValues.join('')
+
+        if (hiddenInputRef.current) {
+          hiddenInputRef.current.value = newValue
+        }
+
+        onChange?.(newValue)
+
+        if (newValue.length === inputCount) {
+          onComplete?.(newValue)
+
+          if (autoSubmit) {
+            const form = hiddenInputRef.current?.closest('form')
+            if (form && typeof form.requestSubmit === 'function') {
+              form.requestSubmit()
+            }
+          }
+        }
+      },
+      [autoSubmit, onChange, onComplete, inputCount]
+    )
+
+    const handleInputChange = useCallback(
+      (index: number, event: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = event.target.value
+
+        if (inputValue.length === 1 && !isValidInput(inputValue, type)) {
+          return
+        }
+
+        const newValues = [...inputValues]
+        newValues[index] = inputValue.length === 1 ? inputValue : ''
+
+        setInputValues(newValues)
+        updateValue(newValues)
+
+        if (inputValue.length === 1) {
+          const nextInput = getNextActiveElement(
+            inputRefs.current as HTMLInputElement[],
+            event.target,
+            true,
+            false
+          )
+
+          nextInput?.focus()
+        }
+      },
+      [inputValues, type, updateValue]
+    )
+
+    const handleInputFocus = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        const { target } = event
+
+        if (target.value) {
+          setTimeout(() => {
+            target.select()
+          }, 0)
+          return
+        }
+
+        if (linear) {
+          const firstEmptyInput = inputRefs.current.find((input) => !input?.value)
+          if (firstEmptyInput && firstEmptyInput !== target) {
+            firstEmptyInput.focus()
+          }
+        }
+      },
+      [linear]
+    )
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLInputElement>) => {
+        const { key, target } = event
+
+        if (key === 'Backspace' && (target as HTMLInputElement).value === '') {
+          const newValues = [...inputValues]
+          const prevInput = getNextActiveElement(
+            inputRefs.current as HTMLInputElement[],
+            target as HTMLInputElement,
+            false,
+            false
+          )
+
+          if (prevInput) {
+            const prevIndex = inputRefs.current.indexOf(prevInput as HTMLInputElement)
+            if (prevIndex !== -1) {
+              newValues[prevIndex] = ''
+              setInputValues(newValues)
+              updateValue(newValues)
+              prevInput.focus()
+            }
+          }
+
+          return
+        }
+
+        if (key === 'ArrowRight') {
+          if (linear && (target as HTMLInputElement).value === '') {
+            return
+          }
+
+          const shouldMoveNext = !isRTL(target as HTMLInputElement)
+          const nextInput = getNextActiveElement(
+            inputRefs.current as HTMLInputElement[],
+            target as HTMLInputElement,
+            shouldMoveNext,
+            false
+          )
+          nextInput?.focus()
+          return
+        }
+
+        if (key === 'ArrowLeft') {
+          const shouldMoveNext = isRTL(target as HTMLInputElement)
+          const prevInput = getNextActiveElement(
+            inputRefs.current as HTMLInputElement[],
+            target as HTMLInputElement,
+            shouldMoveNext,
+            false
+          )
+          prevInput?.focus()
+        }
+      },
+      [inputValues, linear, updateValue]
+    )
+
+    const handlePaste = useCallback(
+      (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+        event.preventDefault()
+        const pastedData = event.clipboardData.getData('text')
+        const validChars = extractValidChars(pastedData, type)
+
+        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()
+        }
+      },
+      [inputValues, type, updateValue, inputCount]
+    )
+
+    let inputIndex = 0
+
+    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={classNames(
+            'form-otp',
+            {
+              [`form-otp-${size}`]: size,
+            },
+            className
+          )}
+          role="group"
+          ref={ref}
+          {...rest}
+        >
+          {Children.map(children, (child, index) => {
+            if (
+              !isValidElement(child) ||
+              (child.type as ComponentWithDisplayName)?.displayName !== 'COneTimePasswordInput'
+            ) {
+              return child
+            }
+
+            const inputChild = child as ReactElement<
+              COneTimePasswordInputProps & React.RefAttributes<HTMLInputElement>,
+              typeof COneTimePasswordInput
+            >
+            const currentInputIndex = inputIndex++
+
+            return cloneElement(inputChild, {
+              ...inputChild.props,
+              type: masked ? 'password' : 'text',
+              className: classNames(
+                {
+                  'is-invalid': invalid,
+                  'is-valid': valid,
+                },
+                inputChild.props.className
+              ),
+              id: inputChild.props.id || (id ? `${id}-${currentInputIndex}` : undefined),
+              name: inputChild.props.name || (name ? `${name}-${currentInputIndex}` : undefined),
+              placeholder:
+                inputChild.props.placeholder ||
+                (placeholder && placeholder.length > 1
+                  ? placeholder[currentInputIndex]
+                  : placeholder),
+              value: inputValues[currentInputIndex] || '',
+              tabIndex: currentInputIndex === 0 ? 0 : inputValues[currentInputIndex - 1] ? 0 : -1,
+              disabled: disabled || inputChild.props.disabled,
+              readOnly: readOnly || inputChild.props.readOnly,
+              required: required || inputChild.props.required,
+              'aria-label':
+                inputChild.props['aria-label'] || ariaLabel(currentInputIndex, inputCount),
+
+              inputMode: type === 'number' ? 'numeric' : 'text',
+              pattern: type === 'number' ? '[0-9]*' : '.*',
+              onInput: (event: React.ChangeEvent<HTMLInputElement>) => {
+                handleInputChange(currentInputIndex, event)
+                inputChild.props.onChange?.(event)
+              },
+              onFocus: (event: React.FocusEvent<HTMLInputElement>) => {
+                handleInputFocus(event)
+                inputChild.props.onFocus?.(event)
+              },
+              onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {
+                handleKeyDown(currentInputIndex, event)
+                inputChild.props.onKeyDown?.(event)
+              },
+              onPaste: (event: React.ClipboardEvent<HTMLInputElement>) => {
+                handlePaste(index, event)
+                inputChild.props.onPaste?.(event)
+              },
+              ref: (el: HTMLInputElement | null) => {
+                inputRefs.current[currentInputIndex] = el
+              },
+            })
+          })}
+          <input
+            type="hidden"
+            id={id}
+            name={name}
+            value={inputValues.join('')}
+            disabled={disabled}
+            ref={hiddenInputRef}
+          />
+        </div>
+      </CFormControlWrapper>
+    )
+  }
+)
+
+COneTimePassword.propTypes = {
+  ariaLabel: PropTypes.func,
+  autoSubmit: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  linear: PropTypes.bool,
+  masked: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onComplete: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  type: PropTypes.oneOf(['number', 'text']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ...CFormControlWrapper.propTypes,
+}
+
+COneTimePassword.displayName = 'COneTimePassword'

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

@@ -0,0 +1,25 @@
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+export interface COneTimePasswordInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+}
+
+export const COneTimePasswordInput = forwardRef<HTMLInputElement, COneTimePasswordInputProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <input
+        className={classNames('form-otp-control', className)}
+        maxLength={1}
+        autoComplete="off"
+        ref={ref}
+        {...rest}
+      />
+    )
+  }
+)
+
+COneTimePasswordInput.displayName = 'COneTimePasswordInput'