@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/InputsV2/OTPInputV2/OTPInputV2.tsx

@@ -0,0 +1,327 @@
+import {
+    type ChangeEvent,
+    type ClipboardEvent,
+    type FocusEvent,
+    type KeyboardEvent,
+    type MouseEvent,
+    forwardRef,
+    useEffect,
+    useId,
+    useRef,
+    useState,
+} from 'react'
+import Block from '../../Primitives/Block/Block'
+import InputFooterV2 from '../utils/InputFooter/InputFooterV2'
+import InputLabelsV2 from '../utils/InputLabels/InputLabelsV2'
+import PrimitiveInput from '../../Primitives/PrimitiveInput/PrimitiveInput'
+import { InputStateV2, type AnyRef } from '../inputV2.types'
+import { FOCUS_RING_STYLES, TRANSITION } from '../TextInputV2/utils'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import { filterBlockedProps } from '../../../utils/prop-helpers'
+import type { OTPInputV2Props } from './OTPInputV2.types'
+import type { OTPInputV2TokensType } from './OTPInputV2.tokens'
+import {
+    buildOtpAriaDescribedBy,
+    buildOtpCellAriaLabel,
+    buildOtpGroupAriaLabel,
+    clampOtpSlotLength,
+    getOtpKeyNavigation,
+    getOtpPasteFocusIndex,
+    moveCaretToEnd,
+    otpCharsToPaddedArray,
+    parsePastedOtpText,
+    processOtpCellValueChange,
+} from './otpInputV2Utils'
+import { generateAccessibilityIds, setExternalRef } from '../utils/utils'
+
+const OTPInputV2 = forwardRef<HTMLInputElement, OTPInputV2Props>(
+    (
+        {
+            label,
+            sublabel,
+            disabled,
+            helpIconHintText,
+            name,
+            required,
+            error,
+            errorMessage,
+            hintText,
+            value = '',
+            length = 6,
+            autoFocus = false,
+            onChange,
+            form,
+            id: providedId,
+            ...rest
+        },
+        ref
+    ) => {
+        const {
+            onKeyDown: restOnKeyDown,
+            onFocus: restOnFocus,
+            onClick: restOnClick,
+            ...restWithoutForwardedHandlers
+        } = rest
+        const filteredRest = filterBlockedProps(restWithoutForwardedHandlers)
+        const slotLength = clampOtpSlotLength(length)
+        const otpInputTokens =
+            useResponsiveTokens<OTPInputV2TokensType>('OTP_INPUTV2')
+        const [otp, setOtp] = useState<string[]>(() =>
+            otpCharsToPaddedArray(value, slotLength)
+        )
+        const inputRefs = useRef<Array<HTMLInputElement | undefined>>([])
+
+        const generatedId = useId()
+        const baseId = providedId || generatedId
+
+        const { errorId, hintId, groupId, firstInputId } =
+            generateAccessibilityIds(baseId)
+
+        const ariaDescribedBy = buildOtpAriaDescribedBy({
+            hintText,
+            error: Boolean(error),
+            errorMessage,
+            hintId,
+            errorId,
+        })
+
+        useEffect(() => {
+            const nextOtp = otpCharsToPaddedArray(value || '', slotLength)
+            setOtp((prevOtp) => {
+                if (prevOtp.join('') === nextOtp.join('')) return prevOtp
+                return nextOtp
+            })
+        }, [value, slotLength])
+
+        useEffect(() => {
+            setOtp((prevOtp) => {
+                if (prevOtp.length === slotLength) return prevOtp
+                const newOtp = prevOtp.slice(0, slotLength)
+                return otpCharsToPaddedArray(newOtp.join(''), slotLength)
+            })
+        }, [slotLength])
+
+        useEffect(() => {
+            if (autoFocus && inputRefs.current[0] && !disabled) {
+                inputRefs.current[0].focus()
+            }
+        }, [autoFocus, disabled])
+
+        const handleChange = (index: number, val: string) => {
+            if (disabled) return
+
+            const result = processOtpCellValueChange(
+                otp,
+                index,
+                val,
+                slotLength
+            )
+            if (result.kind === 'noop') return
+
+            setOtp(result.newOtp)
+            onChange?.(result.newOtp.join(''))
+            if (result.focusIndex !== undefined) {
+                inputRefs.current[result.focusIndex]?.focus()
+            }
+        }
+
+        const handleKeyDown = (
+            index: number,
+            e: KeyboardEvent<HTMLInputElement>
+        ) => {
+            if (disabled) return
+
+            const nav = getOtpKeyNavigation(
+                e.key,
+                index,
+                otp[index] ?? '',
+                slotLength
+            )
+            if (nav.action === 'none') return
+            if (nav.preventDefault) e.preventDefault()
+            inputRefs.current[nav.targetIndex]?.focus()
+        }
+
+        const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+            if (disabled) return
+
+            e.preventDefault()
+            const pastedData = parsePastedOtpText(
+                e.clipboardData.getData('text'),
+                slotLength
+            )
+            const newOtp = otpCharsToPaddedArray(pastedData, slotLength)
+            setOtp(newOtp)
+            onChange?.(newOtp.join(''))
+
+            const nextIndex = getOtpPasteFocusIndex(
+                pastedData.length,
+                slotLength
+            )
+            inputRefs.current[nextIndex]?.focus()
+        }
+
+        const inputTokens = otpInputTokens.inputContainer.input
+        const labelState: InputStateV2 = disabled
+            ? InputStateV2.DISABLED
+            : error
+              ? InputStateV2.ERROR
+              : InputStateV2.DEFAULT
+
+        const inputState = disabled ? 'disabled' : error ? 'error' : 'default'
+        const borderState = inputState
+        const bgState = inputState
+        const colorState = inputState
+        const focusBorderState = error ? 'error' : 'focus'
+
+        return (
+            <Block
+                data-otpinput={label ?? ''}
+                data-status={disabled ? 'disabled' : 'enabled'}
+                display="flex"
+                flexDirection="column"
+                gap={otpInputTokens.gap}
+                width="100%"
+            >
+                <InputLabelsV2
+                    label={label}
+                    sublabel={sublabel}
+                    helpIconText={helpIconHintText}
+                    name={name}
+                    inputId={firstInputId}
+                    required={required}
+                    state={labelState}
+                    tokens={otpInputTokens.topContainer}
+                />
+                <Block
+                    id={groupId}
+                    role="group"
+                    aria-label={buildOtpGroupAriaLabel(
+                        label,
+                        sublabel,
+                        required
+                    )}
+                    aria-describedby={ariaDescribedBy}
+                    data-element="otp-input-container"
+                    display="flex"
+                    gap={otpInputTokens.inputContainer.gap}
+                    width="100%"
+                    flexWrap="wrap"
+                >
+                    {otp.map((digit, index) => {
+                        const inputId = `${baseId}-${index}`
+                        const ariaLabel = buildOtpCellAriaLabel(
+                            label,
+                            index,
+                            slotLength
+                        )
+
+                        return (
+                            <PrimitiveInput
+                                {...(index === 0 ? filteredRest : {})}
+                                ref={(el: HTMLInputElement | null) => {
+                                    inputRefs.current[index] = el ?? undefined
+                                    if (index === 0) {
+                                        setExternalRef(
+                                            ref as AnyRef<HTMLInputElement>,
+                                            el
+                                        )
+                                    }
+                                }}
+                                key={index}
+                                id={inputId}
+                                value={digit}
+                                maxLength={1}
+                                disabled={disabled}
+                                required={required}
+                                data-element={`otp-input-${index}`}
+                                form={form}
+                                name={name ? `${name}-${index}` : undefined}
+                                type="text"
+                                inputMode="numeric"
+                                pattern="[0-9]"
+                                autoComplete={
+                                    index === 0 ? 'one-time-code' : undefined
+                                }
+                                width={inputTokens.width}
+                                height={inputTokens.height}
+                                borderRadius={inputTokens.borderRadius}
+                                style={{ textAlign: 'center' }}
+                                fontSize={inputTokens.fontSize}
+                                fontWeight={inputTokens.fontWeight}
+                                border={inputTokens.border[borderState]}
+                                outline="none"
+                                color={inputTokens.color[colorState]}
+                                backgroundColor={
+                                    inputTokens.backgroundColor[bgState]
+                                }
+                                transition={TRANSITION}
+                                _hover={{
+                                    border: error
+                                        ? inputTokens.border.error
+                                        : inputTokens.border.hover,
+                                    backgroundColor: error
+                                        ? inputTokens.backgroundColor.error
+                                        : inputTokens.backgroundColor.hover,
+                                }}
+                                _focus={{
+                                    border: error
+                                        ? inputTokens.border.error
+                                        : inputTokens.border[focusBorderState],
+                                    boxShadow: FOCUS_RING_STYLES.boxShadow,
+                                    backgroundColor: error
+                                        ? inputTokens.backgroundColor.error
+                                        : FOCUS_RING_STYLES.backgroundColor,
+                                }}
+                                _disabled={{
+                                    backgroundColor:
+                                        inputTokens.backgroundColor.disabled,
+                                    border: inputTokens.border.disabled,
+                                    cursor: 'not-allowed',
+                                }}
+                                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                    handleChange(index, e.target.value)
+                                }
+                                onPaste={(
+                                    e: ClipboardEvent<HTMLInputElement>
+                                ) => {
+                                    handlePaste(e)
+                                    rest.onPaste?.(e)
+                                }}
+                                onKeyDown={(
+                                    e: KeyboardEvent<HTMLInputElement>
+                                ) => {
+                                    handleKeyDown(index, e)
+                                    restOnKeyDown?.(e)
+                                }}
+                                onFocus={(e: FocusEvent<HTMLInputElement>) => {
+                                    moveCaretToEnd(e.target)
+                                    if (index === 0) restOnFocus?.(e)
+                                }}
+                                onClick={(e: MouseEvent<HTMLInputElement>) => {
+                                    moveCaretToEnd(e.currentTarget)
+                                    if (index === 0) restOnClick?.(e)
+                                }}
+                                aria-label={ariaLabel}
+                                aria-required={required ? 'true' : undefined}
+                                aria-invalid={error ? 'true' : 'false'}
+                                aria-describedby={ariaDescribedBy}
+                            />
+                        )
+                    })}
+                </Block>
+                <InputFooterV2
+                    hintText={hintText}
+                    error={error}
+                    errorMessage={errorMessage}
+                    errorId={errorId}
+                    hintId={hintId}
+                    tokens={otpInputTokens.bottomContainer}
+                />
+            </Block>
+        )
+    }
+)
+
+OTPInputV2.displayName = 'OTPInputV2'
+export default OTPInputV2

package/lib/components/InputsV2/OTPInputV2/OTPInputV2.types.ts

@@ -0,0 +1,16 @@
+export type OTPInputV2Props = {
+    label?: string
+    sublabel?: string
+    helpIconHintText?: string
+    error?: boolean
+    errorMessage?: string
+    hintText?: string
+    value?: string
+    length?: number
+    autoFocus?: boolean
+    onChange?: (value: string) => void
+    form?: string
+} & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'style' | 'className' | 'onChange' | 'placeholder'
+>

package/lib/components/InputsV2/OTPInputV2/index.ts

@@ -0,0 +1,3 @@
+export { default as OTPInputV2 } from './OTPInputV2'
+export * from './OTPInputV2.tokens'
+export * from './OTPInputV2.types'

package/lib/components/InputsV2/OTPInputV2/otpInputV2Utils.ts

@@ -0,0 +1,177 @@
+/** Pads or truncates character splits to a fixed-length OTP cell array. */
+export function otpCharsToPaddedArray(value: string, length: number): string[] {
+    const initial = (value || '').split('').slice(0, length)
+    return [
+        ...initial,
+        ...new Array(Math.max(length - initial.length, 0)).fill(''),
+    ]
+}
+
+export const OTP_SLOT_MIN = 1
+export const OTP_SLOT_MAX = 32
+
+export function clampOtpSlotLength(
+    length: number | undefined,
+    fallback = 6
+): number {
+    return Math.max(OTP_SLOT_MIN, Math.min(length ?? fallback, OTP_SLOT_MAX))
+}
+
+/**
+ * Applies a run of digits from `raw` into consecutive OTP cells starting at
+ * `startIndex` (SMS autofill / IME). Non-digits are stripped; overflow past
+ * the last slot is truncated.
+ */
+export function mergeDigitRunIntoOtp(
+    otp: string[],
+    startIndex: number,
+    raw: string,
+    slotLength: number
+): { newOtp: string[]; digitCount: number } {
+    const maxDigits = Math.max(0, slotLength - startIndex)
+    const digits = raw.replace(/\D/g, '').slice(0, maxDigits)
+    const newOtp = [...otp]
+    for (let i = 0; i < digits.length; i++) {
+        newOtp[startIndex + i] = digits[i]!
+    }
+    return { newOtp, digitCount: digits.length }
+}
+
+export function buildOtpAriaDescribedBy(options: {
+    hintText?: string
+    error: boolean
+    errorMessage?: string
+    hintId: string
+    errorId: string
+}): string | undefined {
+    const { hintText, error, errorMessage, hintId, errorId } = options
+    const ids = [
+        hintText && !error ? hintId : null,
+        error && errorMessage ? errorId : null,
+    ]
+        .filter(Boolean)
+        .join(' ')
+    return ids || undefined
+}
+
+export function buildOtpGroupAriaLabel(
+    label: string | undefined,
+    sublabel: string | undefined,
+    required: boolean | undefined
+): string | undefined {
+    if (!label) return undefined
+    return `${label}${sublabel ? ` ${sublabel}` : ''}${
+        required ? ' (required)' : ''
+    }`
+}
+
+export function buildOtpCellAriaLabel(
+    label: string | undefined,
+    index: number,
+    slotLength: number
+): string {
+    return label
+        ? `${label} digit ${index + 1} of ${slotLength}`
+        : `Digit ${index + 1} of ${slotLength}`
+}
+
+export function parsePastedOtpText(raw: string, slotLength: number): string {
+    return raw.replace(/\D/g, '').slice(0, slotLength)
+}
+
+export function getOtpPasteFocusIndex(
+    pastedDigitCount: number,
+    slotLength: number
+): number {
+    return Math.min(pastedDigitCount, slotLength - 1)
+}
+
+export function moveCaretToEnd(input: HTMLInputElement): void {
+    const len = input.value.length
+    input.setSelectionRange(len, len)
+}
+
+export type OtpCellChangeResult =
+    | { kind: 'noop' }
+    | {
+          kind: 'update'
+          newOtp: string[]
+          /** Focus this cell after update, if defined */
+          focusIndex?: number
+      }
+
+/**
+ * Pure counterpart to the per-cell `onChange` path: clear, multi-digit merge,
+ * or single digit with optional advance to the next cell.
+ */
+export function processOtpCellValueChange(
+    otp: string[],
+    index: number,
+    val: string,
+    slotLength: number
+): OtpCellChangeResult {
+    if (val.length === 0) {
+        const newOtp = [...otp]
+        newOtp[index] = ''
+        return { kind: 'update', newOtp }
+    }
+
+    if (val.length > 1) {
+        const { newOtp, digitCount } = mergeDigitRunIntoOtp(
+            otp,
+            index,
+            val,
+            slotLength
+        )
+        if (digitCount === 0) return { kind: 'noop' }
+        const focusIndex = Math.min(index + digitCount - 1, slotLength - 1)
+        return { kind: 'update', newOtp, focusIndex }
+    }
+
+    const newVal = val.slice(-1)
+    if (newVal && !/^\d$/.test(newVal)) return { kind: 'noop' }
+
+    const newOtp = [...otp]
+    newOtp[index] = newVal
+
+    const focusIndex = newVal && index < slotLength - 1 ? index + 1 : undefined
+
+    return { kind: 'update', newOtp, focusIndex }
+}
+
+export type OtpKeyNavigation =
+    | { action: 'none' }
+    | {
+          action: 'focus'
+          targetIndex: number
+          preventDefault?: boolean
+      }
+
+export function getOtpKeyNavigation(
+    key: string,
+    index: number,
+    cellValue: string,
+    slotLength: number
+): OtpKeyNavigation {
+    if (key === 'Backspace') {
+        if (!cellValue && index > 0) {
+            return { action: 'focus', targetIndex: index - 1 }
+        }
+        return { action: 'none' }
+    }
+    if ((key === 'ArrowLeft' || key === 'Left') && index > 0) {
+        return {
+            action: 'focus',
+            targetIndex: index - 1,
+            preventDefault: true,
+        }
+    }
+    if ((key === 'ArrowRight' || key === 'Right') && index < slotLength - 1) {
+        return {
+            action: 'focus',
+            targetIndex: index + 1,
+            preventDefault: true,
+        }
+    }
+    return { action: 'none' }
+}