@utilitywarehouse/hearth-react-native 0.21.0 → 0.22.1

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,7 @@
-import { forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Platform, TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
-import { useVerificationInput } from './useVerificationInput';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
@@ -28,30 +27,147 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
     ref
   ) => {
     const length = 6;
-    const {
-      inputRefs,
-      displayValue,
-      focusedIndex,
-      handleFocus,
-      handleBlur,
-      handleChangeText,
-      handleKeyPress,
-    } = useVerificationInput({
-      value,
-      onChangeText,
-    });
+    const inputRef = useRef<TextInput>(null);
+    const latestValueRef = useRef(value);
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [selection, setSelection] = useState({ start: 0, end: 0 });
+    const latestSelectionRef = useRef(selection);
+    const ignoreNextSelectionRef = useRef(false);
+    const pendingFocusIndexRef = useRef<number | null>(null);
+
+    useEffect(() => {
+      if (value !== latestValueRef.current) {
+        const trimmedValue = value.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        const nextPos = Math.min(trimmedValue.length, length);
+        const nextSelection = { start: nextPos, end: nextPos };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+      }
+    }, [length, value]);
+
+    const updateValue = (nextValue: string) => {
+      const trimmedValue = nextValue.slice(0, length);
+      latestValueRef.current = trimmedValue;
+      setDisplayValue(trimmedValue);
+      onChangeText?.(trimmedValue);
+    };
+
+    const setSelectionIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const hasChar = !!latestValueRef.current[clampedIndex];
+      const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
+      const nextSelection = { start: clampedIndex, end: endIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+
+    const setCaretIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const nextSelection = { start: clampedIndex, end: clampedIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+
+    const findDiffIndex = (prevValue: string, nextValue: string) => {
+      const minLength = Math.min(prevValue.length, nextValue.length);
+      for (let i = 0; i < minLength; i += 1) {
+        if (prevValue[i] !== nextValue[i]) {
+          return i;
+        }
+      }
+      return minLength;
+    };
+
+    const handleChangeText = (text: string) => {
+      const prevValue = latestValueRef.current;
+      const nextValue = text.slice(0, length);
+      const prevLength = prevValue.length;
+      const nextLength = nextValue.length;
+      const diff = nextLength - prevLength;
+      const isBulkInsert = text.length > 1 && diff > 1;
+      const shouldBlur = nextLength >= length;
+      let nextIndex = Math.max(
+        0,
+        Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length)
+      );
+      if (Platform.OS === 'android') {
+        const editedIndex = findDiffIndex(prevValue, nextValue);
+        nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
+      }
+      updateValue(nextValue);
+      if (isBulkInsert) {
+        setCaretIndex(Math.min(nextLength, length));
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+      if (nextIndex >= length) {
+        setCaretIndex(nextIndex);
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+
+      if (nextLength >= length) {
+        setSelectionIndex(nextIndex);
+        inputRef.current?.blur();
+        return;
+      }
+
+      const hasNextChar = !!nextValue[nextIndex];
+      if (hasNextChar) {
+        setSelectionIndex(nextIndex);
+      } else {
+        setCaretIndex(nextIndex);
+      }
+    };
+
+    const handleFocus = () => {
+      if (pendingFocusIndexRef.current !== null) {
+        setSelectionIndex(pendingFocusIndexRef.current);
+        pendingFocusIndexRef.current = null;
+        return;
+      }
+      setFocusedIndex(Math.min(selection.start, length - 1));
+    };
+
+    const handleBlur = () => {
+      setFocusedIndex(null);
+    };
 
     useImperativeHandle(
       ref,
       () => ({
-        focus: () => inputRefs.current[0]?.focus(),
-        blur: () => {
-          inputRefs.current.forEach(input => input?.blur());
+        focus: () => {
+          inputRef.current?.focus();
+          const nextIndex = Math.min(latestValueRef.current.length, length - 1);
+          if (latestValueRef.current.length >= length) {
+            setSelectionIndex(nextIndex);
+          } else {
+            setCaretIndex(nextIndex);
+          }
+        },
+        blur: () => inputRef.current?.blur(),
+        clear: () => {
+          updateValue('');
+          setSelectionIndex(0);
+          inputRef.current?.blur();
+          setFocusedIndex(null);
         },
-        clear: () => onChangeText?.(''),
         focusIndex: (index: number) => {
           if (index >= 0 && index < length) {
-            inputRefs.current[index]?.focus();
+            inputRef.current?.focus();
+            setSelectionIndex(index);
           }
         },
       }),
@@ -60,6 +176,29 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
 
     const slots = Array.from({ length }, (_, index) => index);
 
+    const getAccessibilityLabel = () => {
+      return label || props.accessibilityLabel;
+    };
+
+    const getAccessibilityHint = () => {
+      let accessibilityHint = '';
+      if (helperText) {
+        accessibilityHint = accessibilityHint + helperText;
+      }
+      if (validationStatus !== 'initial') {
+        if (accessibilityHint.length > 0) {
+          accessibilityHint = accessibilityHint + ', ';
+        }
+        if (validationStatus === 'invalid' && invalidText) {
+          accessibilityHint = accessibilityHint + invalidText;
+        }
+        if (validationStatus === 'valid' && validText) {
+          accessibilityHint = accessibilityHint + validText;
+        }
+      }
+      return accessibilityHint || props.accessibilityHint;
+    };
+
     return (
       <FormField
         label={label}
@@ -71,31 +210,70 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
         invalidText={invalidText}
         disabled={disabled}
         readonly={readonly}
+        accessibilityHandledByChildren
         style={[styles.root, style]}
         {...props}
       >
         <View style={styles.slotsContainer}>
+          <TextInput
+            ref={inputRef}
+            value={displayValue}
+            autoFocus={autoFocus}
+            editable={!disabled && !readonly}
+            accessibilityLabel={getAccessibilityLabel()}
+            accessibilityHint={getAccessibilityHint()}
+            accessibilityState={{ disabled: disabled || readonly }}
+            importantForAccessibility="yes"
+            onChangeText={handleChangeText}
+            onSelectionChange={event => {
+              const nextSelection = event.nativeEvent.selection;
+              if (
+                ignoreNextSelectionRef.current &&
+                (nextSelection.start !== latestSelectionRef.current.start ||
+                  nextSelection.end !== latestSelectionRef.current.end)
+              ) {
+                return;
+              }
+              if (pendingFocusIndexRef.current !== null) {
+                return;
+              }
+              ignoreNextSelectionRef.current = false;
+              latestSelectionRef.current = nextSelection;
+              setSelection(nextSelection);
+              setFocusedIndex(Math.min(nextSelection.start, length - 1));
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            selection={selection}
+            keyboardType="number-pad"
+            textContentType="oneTimeCode"
+            autoComplete="sms-otp"
+            secureTextEntry={secureTextEntry}
+            maxLength={length}
+            caretHidden
+            style={styles.hiddenInput}
+            pointerEvents="none"
+          />
           {slots.map(index => {
             const char = displayValue[index] || '';
             const isActive = focusedIndex === index;
+            const displayChar = secureTextEntry && char ? '*' : char;
 
             return (
               <VerificationInputSlot
                 key={index}
-                ref={inputRef => {
-                  inputRefs.current[index] = inputRef;
-                }}
-                autoFocus={index === 0 && autoFocus}
-                value={char}
+                value={displayChar}
                 isActive={isActive}
+                showCaret={isActive && !displayChar}
                 validationStatus={validationStatus}
                 disabled={disabled}
                 readonly={readonly}
                 secureTextEntry={secureTextEntry}
-                onChangeText={text => handleChangeText(text, index)}
-                onKeyPress={e => handleKeyPress(e, index)}
-                onFocus={() => handleFocus(index)}
-                onBlur={handleBlur}
+                onPress={() => {
+                  pendingFocusIndexRef.current = index;
+                  inputRef.current?.focus();
+                  setSelectionIndex(index);
+                }}
               />
             );
           })}
@@ -115,6 +293,17 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     gap: theme.components.input.verification.gap,
     width: '100%',
+    position: 'relative',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    left: 0,
+    top: 0,
+    color: 'transparent',
+    fontSize: 1,
+    opacity: 0.1,
   },
 }));
 

package/src/components/VerificationInput/VerificationInputSlot.tsx

@@ -1,33 +1,84 @@
-import { forwardRef } from 'react';
-import { TextInput, TextInputProps } from 'react-native';
+import { forwardRef, useEffect } from 'react';
+import { Pressable, Text, View, ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
-import InputField from '../Input/InputField';
 
-interface VerificationInputSlotProps extends TextInputProps {
+interface VerificationInputSlotProps extends ViewProps {
+  value: string;
   isActive: boolean;
+  showCaret?: boolean;
   validationStatus: 'initial' | 'valid' | 'invalid';
   disabled?: boolean;
   readonly?: boolean;
+  onPress?: () => void;
+  secureTextEntry?: boolean;
 }
 
-export const VerificationInputSlot = forwardRef<TextInput, VerificationInputSlotProps>(
-  ({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+export const VerificationInputSlot = forwardRef<View, VerificationInputSlotProps>(
+  (
+    {
+      value,
+      isActive,
+      showCaret,
+      validationStatus,
+      disabled,
+      readonly,
+      style,
+      onPress,
+      secureTextEntry,
+      ...props
+    },
+    ref
+  ) => {
     styles.useVariants({
       disabled,
       readonly,
       validationStatus,
       active: isActive,
+      secureTextEntry,
     });
 
+    const caretOpacity = useSharedValue(0);
+    const animatedCaretStyle = useAnimatedStyle(() => ({
+      opacity: caretOpacity.value,
+    }));
+
+    useEffect(() => {
+      if (showCaret && !disabled && !readonly) {
+        caretOpacity.value = withRepeat(
+          withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }),
+          -1,
+          true
+        );
+        return;
+      }
+
+      caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
+    }, [caretOpacity, disabled, readonly, showCaret]);
+
     return (
-      <InputField
+      <Pressable
         ref={ref}
-        {...props}
-        editable={!disabled && !readonly}
-        selectTextOnFocus
-        keyboardType="number-pad"
+        onPress={onPress}
+        disabled={disabled || readonly}
         style={[styles.slot, style]}
-      />
+        accessibilityRole="button"
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...props}
+      >
+        <Text style={styles.slotText}>{value}</Text>
+        {showCaret && !disabled && !readonly && (
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
+        )}
+      </Pressable>
     );
   }
 );
@@ -36,15 +87,20 @@ VerificationInputSlot.displayName = 'VerificationInputSlot';
 
 const styles = StyleSheet.create(theme => ({
   slot: {
-    flex: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     width: theme.components.input.height,
     height: theme.components.input.height,
+    minWidth: theme.components.input.height,
+    minHeight: theme.components.input.height,
     borderWidth: theme.components.input.borderWidth,
     borderColor: theme.color.border.strong,
     borderRadius: theme.components.input.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 0,
+    position: 'relative',
     variants: {
       disabled: {
         true: {
@@ -91,4 +147,24 @@ const styles = StyleSheet.create(theme => ({
       },
     ],
   },
+  slotText: {
+    color: theme.color.text.primary,
+    fontSize: theme.typography.mobile.bodyText.md.fontSize,
+    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
+    textAlign: 'center',
+    variants: {
+      secureTextEntry: {
+        true: {
+          paddingTop: 5,
+        },
+      },
+    },
+  },
+  caret: {
+    position: 'absolute',
+    width: 2,
+    height: '55%',
+    backgroundColor: theme.color.text.brand,
+  },
 }));

package/build/components/VerificationInput/useVerificationInput.d.ts

@@ -1,15 +0,0 @@
-import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
-interface UseVerificationInputProps {
-    value: string;
-    onChangeText?: (text: string) => void;
-}
-export declare const useVerificationInput: ({ value, onChangeText }: UseVerificationInputProps) => {
-    inputRefs: import("react").RefObject<(TextInput | null)[]>;
-    displayValue: string;
-    focusedIndex: number | null;
-    handleFocus: (index: number) => void;
-    handleBlur: () => void;
-    handleChangeText: (text: string, index: number) => void;
-    handleKeyPress: (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => void;
-};
-export {};

package/build/components/VerificationInput/useVerificationInput.js

@@ -1,73 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-export const useVerificationInput = ({ value, onChangeText }) => {
-    const length = 6;
-    const inputRefs = useRef([]);
-    const latestValueRef = useRef(value);
-    const [displayValue, setDisplayValue] = useState(value);
-    const [focusedIndex, setFocusedIndex] = useState(null);
-    useEffect(() => {
-        if (value !== latestValueRef.current) {
-            latestValueRef.current = value;
-            setDisplayValue(value);
-        }
-    }, [value]);
-    const handleFocus = (index) => {
-        setFocusedIndex(index);
-    };
-    const handleBlur = () => {
-        setFocusedIndex(null);
-    };
-    const updateValue = (nextValue) => {
-        latestValueRef.current = nextValue;
-        setDisplayValue(nextValue);
-        onChangeText?.(nextValue);
-    };
-    const handleChangeText = (text, index) => {
-        const currentValue = latestValueRef.current;
-        const chars = Array(length).fill('');
-        for (let i = 0; i < currentValue.length && i < length; i++) {
-            chars[i] = currentValue[i];
-        }
-        if (text.length > 1) {
-            // Handle paste
-            const pastedChars = text.slice(0, length - index).split('');
-            for (let i = 0; i < pastedChars.length; i++) {
-                chars[index + i] = pastedChars[i];
-            }
-            const nextIndex = Math.min(index + pastedChars.length, length - 1);
-            inputRefs.current[nextIndex]?.focus();
-        }
-        else {
-            // Handle single char input
-            chars[index] = text;
-            if (text.length === 1 && index < length - 1) {
-                inputRefs.current[index + 1]?.focus();
-            }
-        }
-        updateValue(chars.join(''));
-    };
-    const handleKeyPress = (e, index) => {
-        if (e.nativeEvent.key === 'Backspace') {
-            const currentValue = latestValueRef.current;
-            if (!currentValue[index] && index > 0) {
-                e.preventDefault();
-                inputRefs.current[index - 1]?.focus();
-                const chars = Array(length).fill('');
-                for (let i = 0; i < currentValue.length && i < length; i++) {
-                    chars[i] = currentValue[i];
-                }
-                chars[index - 1] = '';
-                updateValue(chars.join(''));
-            }
-        }
-    };
-    return {
-        inputRefs,
-        displayValue,
-        focusedIndex,
-        handleFocus,
-        handleBlur,
-        handleChangeText,
-        handleKeyPress,
-    };
-};

package/src/components/VerificationInput/useVerificationInput.ts

@@ -1,88 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
-
-interface UseVerificationInputProps {
-  value: string;
-  onChangeText?: (text: string) => void;
-}
-
-export const useVerificationInput = ({ value, onChangeText }: UseVerificationInputProps) => {
-  const length = 6;
-  const inputRefs = useRef<(TextInput | null)[]>([]);
-  const latestValueRef = useRef(value);
-  const [displayValue, setDisplayValue] = useState(value);
-  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (value !== latestValueRef.current) {
-      latestValueRef.current = value;
-      setDisplayValue(value);
-    }
-  }, [value]);
-
-  const handleFocus = (index: number) => {
-    setFocusedIndex(index);
-  };
-
-  const handleBlur = () => {
-    setFocusedIndex(null);
-  };
-
-  const updateValue = (nextValue: string) => {
-    latestValueRef.current = nextValue;
-    setDisplayValue(nextValue);
-    onChangeText?.(nextValue);
-  };
-
-  const handleChangeText = (text: string, index: number) => {
-    const currentValue = latestValueRef.current;
-    const chars = Array(length).fill('');
-    for (let i = 0; i < currentValue.length && i < length; i++) {
-      chars[i] = currentValue[i];
-    }
-
-    if (text.length > 1) {
-      // Handle paste
-      const pastedChars = text.slice(0, length - index).split('');
-      for (let i = 0; i < pastedChars.length; i++) {
-        chars[index + i] = pastedChars[i];
-      }
-      const nextIndex = Math.min(index + pastedChars.length, length - 1);
-      inputRefs.current[nextIndex]?.focus();
-    } else {
-      // Handle single char input
-      chars[index] = text;
-      if (text.length === 1 && index < length - 1) {
-        inputRefs.current[index + 1]?.focus();
-      }
-    }
-    updateValue(chars.join(''));
-  };
-
-  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
-    if (e.nativeEvent.key === 'Backspace') {
-      const currentValue = latestValueRef.current;
-      if (!currentValue[index] && index > 0) {
-        e.preventDefault();
-        inputRefs.current[index - 1]?.focus();
-
-        const chars = Array(length).fill('');
-        for (let i = 0; i < currentValue.length && i < length; i++) {
-          chars[i] = currentValue[i];
-        }
-        chars[index - 1] = '';
-        updateValue(chars.join(''));
-      }
-    }
-  };
-
-  return {
-    inputRefs,
-    displayValue,
-    focusedIndex,
-    handleFocus,
-    handleBlur,
-    handleChangeText,
-    handleKeyPress,
-  };
-};