@radix-ui/react-one-time-password-field 0.1.0-rc.1744661316162 → 0.1.0-rc.1744830756566

package/src/one-time-password-field.tsx

@@ -1,4 +1,4 @@
-import { Primitive } from '@radix-ui/react-primitive';
+import * as Primitive from '@radix-ui/react-primitive';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { composeEventHandlers } from '@radix-ui/primitive';
@@ -14,35 +14,7 @@ import { useDirection } from '@radix-ui/react-direction';
 import { clamp } from '@radix-ui/number';
 import { useEffectEvent } from '@radix-ui/react-use-effect-event';
 
-type InputType = 'password' | 'text';
-type AutoComplete = 'off' | 'one-time-code';
-
-type KeyboardActionDetails =
-  | {
-      type: 'keydown';
-      key: 'Backspace' | 'Delete' | 'Char';
-      metaKey: boolean;
-      ctrlKey: boolean;
-    }
-  | { type: 'cut' };
-
-type UpdateAction =
-  | {
-      type: 'SET_CHAR';
-      char: string;
-      index: number;
-      event: React.KeyboardEvent | React.ChangeEvent;
-    }
-  | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }
-  | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' }
-  | { type: 'PASTE'; value: string };
-type Dispatcher = React.Dispatch<UpdateAction>;
-
 type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
-type InputValidation = Record<
-  Exclude<InputValidationType, 'none'>,
-  { type: InputValidationType; regexp: RegExp; pattern: string; inputMode: string }
->;
 
 const INPUT_VALIDATION_MAP = {
   numeric: {
@@ -63,33 +35,38 @@ const INPUT_VALIDATION_MAP = {
     pattern: '[a-zA-Z0-9]{1}',
     inputMode: 'text',
   },
+  none: null,
 } satisfies InputValidation;
 
+/* -------------------------------------------------------------------------------------------------
+ * OneTimePasswordFieldProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
+
 interface OneTimePasswordFieldContextValue {
-  value: string[];
   attemptSubmit: () => void;
-  hiddenInputRef: React.RefObject<HTMLInputElement | null>;
-  validationType: InputValidationType;
-  disabled: boolean;
-  readOnly: boolean;
   autoComplete: AutoComplete;
   autoFocus: boolean;
+  disabled: boolean;
+  dispatch: Dispatcher;
   form: string | undefined;
+  hiddenInputRef: React.RefObject<HTMLInputElement | null>;
+  isHydrated: boolean;
   name: string | undefined;
+  orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;
   placeholder: string | undefined;
-  required: boolean;
+  preHydrationIndexTracker: React.RefObject<number>;
+  readOnly: boolean;
   type: InputType;
   userActionRef: React.RefObject<KeyboardActionDetails | null>;
-  dispatch: Dispatcher;
-  orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;
-  preHydrationIndexTracker: React.RefObject<number>;
-  isHydrated: boolean;
+  validationType: InputValidationType;
+  value: string[];
 }
 
 const ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';
-const [Collection, useCollection, createCollectionScope] = createCollection<HTMLInputElement>(
-  ONE_TIME_PASSWORD_FIELD_NAME
-);
+const [Collection, { useCollection, createCollectionScope, useInitCollection }] =
+  createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);
 const [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [
   createCollectionScope,
   createRovingFocusGroupScope,
@@ -99,59 +76,131 @@ const useRovingFocusGroupScope = createRovingFocusGroupScope();
 const [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =
   createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);
 
-type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+/* -------------------------------------------------------------------------------------------------
+ * OneTimePasswordField
+ * -----------------------------------------------------------------------------------------------*/
 
 interface OneTimePasswordFieldOwnProps {
-  onValueChange?: (value: string) => void;
-  id?: string;
-  value?: string;
-  defaultValue?: string;
-  autoSubmit?: boolean;
-  onAutoSubmit?: (value: string) => void;
-  validationType?: InputValidationType;
-  disabled?: boolean;
-  readOnly?: boolean;
+  /**
+   * Specifies what—if any—permission the user agent has to provide automated
+   * assistance in filling out form field values, as well as guidance to the
+   * browser as to the type of information expected in the field. Allows
+   * `"one-time-code"` or `"off"`.
+   *
+   * @defaultValue `"one-time-code"`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
   autoComplete?: AutoComplete;
+  /**
+   * Whether or not the first fillable input should be focused on page-load.
+   *
+   * @defaultValue `false`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus
+   */
   autoFocus?: boolean;
+  /**
+   * Whether or not the component should attempt to automatically submit when
+   * all fields are filled. If the field is associated with an HTML `form`
+   * element, the form's `requestSubmit` method will be called.
+   *
+   * @defaultValue `false`
+   */
+  autoSubmit?: boolean;
+  /**
+   * The initial value of the uncontrolled field.
+   */
+  defaultValue?: string;
+  /**
+   * Indicates the horizontal directionality of the parent element's text.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir
+   */
+  dir?: RovingFocusGroupProps['dir'];
+  /**
+   * Whether or not the the field's input elements are disabled.
+   */
+  disabled?: boolean;
+  /**
+   * A string specifying the `form` element with which the input is associated.
+   * This string's value, if present, must match the id of a `form` element in
+   * the same document.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form
+   */
   form?: string | undefined;
+  /**
+   * A string specifying a name for the input control. This name is submitted
+   * along with the control's value when the form data is submitted.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name
+   */
   name?: string | undefined;
+  /**
+   * When the `autoSubmit` prop is set to `true`, this callback will be fired
+   * before attempting to submit the associated form. It will be called whether
+   * or not a form is located, or if submission is not allowed.
+   */
+  onAutoSubmit?: (value: string) => void;
+  /**
+   * A callback fired when the field's value changes. When the component is
+   * controlled, this should update the state passed to the `value` prop.
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * Indicates the vertical directionality of the input elements.
+   *
+   * @defaultValue `"horizontal"`
+   */
+  orientation?: RovingFocusGroupProps['orientation'];
+  /**
+   * Defines the text displayed in a form control when the control has no value.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder
+   */
   placeholder?: string | undefined;
-  required?: boolean;
+  /**
+   * Whether or not the input elements can be updated by the user.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Function for custom sanitization when `validationType` is set to `"none"`.
+   * This function will be called before updating values in response to user
+   * interactions.
+   */
+  sanitizeValue?: (value: string) => string;
+  /**
+   * The input type of the field's input elements. Can be `"password"` or `"text"`.
+   */
   type?: InputType;
-  //
-  dir?: RovingFocusGroupProps['dir'];
-  orientation?: RovingFocusGroupProps['orientation'];
+  /**
+   * Specifies the type of input validation to be used. Can be `"alpha"`,
+   * `"numeric"`, `"alphanumeric"` or `"none"`.
+   *
+   * @defaultValue `"numeric"`
+   */
+  validationType?: InputValidationType;
+  /**
+   * The controlled value of the field.
+   */
+  value?: string;
 }
 
 type ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };
 
-const OneTimePasswordFieldCollectionProvider = ({
-  __scopeOneTimePasswordField,
-  children,
-}: ScopedProps<{ children: React.ReactNode }>) => {
-  return (
-    <Collection.Provider scope={__scopeOneTimePasswordField}>
-      <Collection.Slot scope={__scopeOneTimePasswordField}>{children}</Collection.Slot>
-    </Collection.Provider>
-  );
-};
-
 interface OneTimePasswordFieldProps
   extends OneTimePasswordFieldOwnProps,
-    Omit<
-      React.ComponentPropsWithoutRef<typeof Primitive.div>,
-      keyof OneTimePasswordFieldOwnProps
-    > {}
+    Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}
 
-const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(
+const OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(
   function OneTimePasswordFieldImpl(
     {
       __scopeOneTimePasswordField,
-      id,
       defaultValue,
       value: valueProp,
       onValueChange,
-      autoSubmit,
+      autoSubmit = false,
       children,
       onPaste,
       onAutoSubmit,
@@ -162,34 +211,58 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
       form,
       name,
       placeholder,
-      required = false,
       type = 'password',
       // TODO: Change default to vertical when inputs use vertical writing mode
       orientation = 'horizontal',
       dir,
       validationType = 'numeric',
+      sanitizeValue: sanitizeValueProp,
       ...domProps
     }: ScopedProps<OneTimePasswordFieldProps>,
     forwardedRef
   ) {
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
     const direction = useDirection(dir);
-    const collection = useCollection(__scopeOneTimePasswordField);
+    const collectionState = useInitCollection();
+    const [collection] = collectionState;
 
-    const validation =
-      validationType in INPUT_VALIDATION_MAP
-        ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]
-        : undefined;
+    const validation = INPUT_VALIDATION_MAP[validationType]
+      ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]
+      : null;
+
+    const sanitizeValue = React.useCallback(
+      (value: string | string[]) => {
+        if (Array.isArray(value)) {
+          value = value.map(removeWhitespace).join('');
+        } else {
+          value = removeWhitespace(value);
+        }
+
+        if (validation) {
+          // global regexp is stateful, so we clone it for each call
+          const regexp = new RegExp(validation.regexp);
+          value = value.replace(regexp, '');
+        } else if (sanitizeValueProp) {
+          value = sanitizeValueProp(value);
+        }
+
+        return value.split('');
+      },
+      [validation, sanitizeValueProp]
+    );
 
     const controlledValue = React.useMemo(() => {
-      return valueProp != null ? sanitizeValue(valueProp, validation?.regexp) : undefined;
-    }, [valueProp, validation?.regexp]);
+      return valueProp != null ? sanitizeValue(valueProp) : undefined;
+    }, [valueProp, sanitizeValue]);
 
     const [value, setValue] = useControllableState({
       caller: 'OneTimePasswordField',
       prop: controlledValue,
-      defaultProp: defaultValue != null ? sanitizeValue(defaultValue, validation?.regexp) : [],
-      onChange: (value) => onValueChange?.(value.filter(Boolean).join('')),
+      defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],
+      onChange: React.useCallback(
+        (value: string[]) => onValueChange?.(value.join('')),
+        [onValueChange]
+      ),
     });
 
     // Update function *specifically* for event handlers.
@@ -229,12 +302,8 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
             return;
           }
 
-          const newValue = [
-            //
-            ...value.slice(0, index),
-            char,
-            ...value.slice(index),
-          ];
+          const newValue = [...value];
+          newValue[index] = char;
 
           const lastElement = collection.at(-1)?.element;
           flushSync(() => setValue(newValue));
@@ -282,7 +351,7 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
 
         case 'PASTE': {
           const { value: pastedValue } = action;
-          const value = sanitizeValue(pastedValue, validation?.regexp);
+          const value = sanitizeValue(pastedValue);
           if (!value) {
             return;
           }
@@ -303,9 +372,9 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
 
       if (validationTypeRef.current?.type !== validation.type) {
         validationTypeRef.current = validation;
-        setValue(sanitizeValue(value, validation.regexp));
+        setValue(sanitizeValue(value.join('')));
       }
-    }, [setValue, validation, value]);
+    }, [sanitizeValue, setValue, validation, value]);
 
     const hiddenInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -380,7 +449,6 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
         form={form}
         name={name}
         placeholder={placeholder}
-        required={required}
         type={type}
         hiddenInputRef={hiddenInputRef}
         userActionRef={userActionRef}
@@ -390,46 +458,44 @@ const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswor
         preHydrationIndexTracker={preHydrationIndexTracker}
         isHydrated={isHydrated}
       >
-        <RovingFocusGroup.Root
-          asChild
-          {...rovingFocusGroupScope}
-          orientation={orientation}
-          dir={direction}
-        >
-          <Primitive.div
-            {...domProps}
-            role="group"
-            ref={composedRefs}
-            onPaste={composeEventHandlers(
-              onPaste,
-              (event: React.ClipboardEvent<HTMLDivElement>) => {
-                event.preventDefault();
-                const pastedValue = event.clipboardData.getData('Text');
-                const value = sanitizeValue(pastedValue, validation?.regexp);
-                if (!value) {
-                  return;
-                }
-                dispatch({ type: 'PASTE', value: pastedValue });
-              }
-            )}
-          >
-            {children}
-          </Primitive.div>
-        </RovingFocusGroup.Root>
+        <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>
+          <Collection.Slot scope={__scopeOneTimePasswordField}>
+            <RovingFocusGroup.Root
+              asChild
+              {...rovingFocusGroupScope}
+              orientation={orientation}
+              dir={direction}
+            >
+              <Primitive.Root.div
+                {...domProps}
+                role="group"
+                ref={composedRefs}
+                onPaste={composeEventHandlers(
+                  onPaste,
+                  (event: React.ClipboardEvent<HTMLDivElement>) => {
+                    event.preventDefault();
+                    const pastedValue = event.clipboardData.getData('Text');
+                    const value = sanitizeValue(pastedValue);
+                    if (!value) {
+                      return;
+                    }
+                    dispatch({ type: 'PASTE', value: pastedValue });
+                  }
+                )}
+              >
+                {children}
+              </Primitive.Root.div>
+            </RovingFocusGroup.Root>
+          </Collection.Slot>
+        </Collection.Provider>
       </OneTimePasswordFieldContext>
     );
   }
 );
 
-const OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(
-  function OneTimePasswordField(props, ref) {
-    return (
-      <OneTimePasswordFieldCollectionProvider>
-        <OneTimePasswordFieldImpl {...props} ref={ref} />
-      </OneTimePasswordFieldCollectionProvider>
-    );
-  }
-);
+/* -------------------------------------------------------------------------------------------------
+ * OneTimePasswordFieldHiddenInput
+ * -----------------------------------------------------------------------------------------------*/
 
 interface OneTimePasswordFieldHiddenInputProps
   extends Omit<
@@ -451,7 +517,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
   { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,
   forwardedRef
 ) {
-  const { value, hiddenInputRef } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
     'OneTimePasswordFieldHiddenInput',
     __scopeOneTimePasswordField
   );
@@ -459,9 +525,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
   return (
     <input
       ref={ref}
-      {...props}
-      type="hidden"
-      readOnly
+      name={name}
       value={value.join('').trim()}
       autoComplete="off"
       autoFocus={false}
@@ -469,23 +533,46 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
       autoCorrect="off"
       autoSave="off"
       spellCheck={false}
+      {...props}
+      type="hidden"
+      readOnly
     />
   );
 });
 
-interface OneTimePasswordFieldInputOwnProps {
-  autoComplete?: 'one-time-code' | 'off';
-}
+/* -------------------------------------------------------------------------------------------------
+ * OneTimePasswordFieldInput
+ * -----------------------------------------------------------------------------------------------*/
 
 interface OneTimePasswordFieldInputProps
-  extends OneTimePasswordFieldInputOwnProps,
-    Omit<React.ComponentProps<typeof Primitive.input>, keyof OneTimePasswordFieldInputOwnProps> {}
+  extends Omit<
+    Primitive.PrimitivePropsWithRef<'input'>,
+    | 'value'
+    | 'defaultValue'
+    | 'disabled'
+    | 'readOnly'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'form'
+    | 'name'
+    | 'placeholder'
+    | 'type'
+  > {
+  /**
+   * Callback fired when the user input fails native HTML input validation.
+   */
+  onInvalidChange?: (character: string) => void;
+}
 
 const OneTimePasswordFieldInput = React.forwardRef<
   HTMLInputElement,
   OneTimePasswordFieldInputProps
 >(function OneTimePasswordFieldInput(
-  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldInputProps>,
+  {
+    __scopeOneTimePasswordField,
+    onInvalidChange,
+    ...props
+  }: ScopedProps<OneTimePasswordFieldInputProps>,
   forwardedRef
 ) {
   // TODO: warn if these values are passed
@@ -499,10 +586,9 @@ const OneTimePasswordFieldInput = React.forwardRef<
     form: _form,
     name: _name,
     placeholder: _placeholder,
-    required: _required,
     type: _type,
     ...domProps
-  } = props as any;
+  } = props as Primitive.PrimitivePropsWithRef<'input'>;
 
   const context = useOneTimePasswordFieldContext(
     'OneTimePasswordFieldInput',
@@ -515,12 +601,18 @@ const OneTimePasswordFieldInput = React.forwardRef<
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [element, setElement] = React.useState<HTMLInputElement | null>(null);
 
+  let placeholder: string | undefined;
   let index: number;
   if (!isHydrated) {
     index = preHydrationIndexTracker.current;
     preHydrationIndexTracker.current++;
   } else {
     index = element ? collection.indexOf(element) : -1;
+    if (context.placeholder && context.value.length === 0) {
+      // only set placeholder after hydration to prevent flickering when indices
+      // are re-calculated
+      placeholder = context.placeholder[index];
+    }
   }
 
   const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);
@@ -550,7 +642,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
         focusable={!context.disabled && isFocusable}
         active={index === lastSelectableIndex}
       >
-        <Primitive.input
+        <Primitive.Root.input
           ref={composedInputRef}
           type="text"
           aria-label={`Character ${index + 1} of ${collection.size}`}
@@ -560,6 +652,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
           pattern={validation?.pattern}
           readOnly={context.readOnly}
           value={char}
+          placeholder={placeholder}
           data-radix-otp-input=""
           data-radix-index={index}
           {...domProps}
@@ -605,7 +698,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
 
                   const isClearing =
                     action.key === 'Backspace' && (action.metaKey || action.ctrlKey);
-                  if (isClearing) {
+                  if (action.key === 'Clear' || isClearing) {
                     dispatch({ type: 'CLEAR', reason: 'Backspace' });
                   } else {
                     dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });
@@ -635,6 +728,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
               }
             } else {
               const element = event.target;
+              onInvalidChange?.(element.value);
               requestAnimationFrame(() => {
                 if (element.ownerDocument.activeElement === element) {
                   element.select();
@@ -644,6 +738,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
           })}
           onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
             switch (event.key) {
+              case 'Clear':
               case 'Delete':
               case 'Backspace': {
                 const currentValue = event.currentTarget.value;
@@ -652,7 +747,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
                   // if the user presses delete when there is no value, noop
                   if (event.key === 'Delete') return;
 
-                  const isClearing = event.metaKey || event.ctrlKey;
+                  const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;
                   if (isClearing) {
                     dispatch({ type: 'CLEAR', reason: 'Backspace' });
                   } else {
@@ -769,18 +864,14 @@ const OneTimePasswordFieldInput = React.forwardRef<
   );
 });
 
-const Root = OneTimePasswordField;
-const Input = OneTimePasswordFieldInput;
-const HiddenInput = OneTimePasswordFieldHiddenInput;
-
 export {
   OneTimePasswordField,
   OneTimePasswordFieldInput,
   OneTimePasswordFieldHiddenInput,
   //
-  Root,
-  Input,
-  HiddenInput,
+  OneTimePasswordField as Root,
+  OneTimePasswordFieldInput as Input,
+  OneTimePasswordFieldHiddenInput as HiddenInput,
 };
 export type {
   OneTimePasswordFieldProps,
@@ -789,20 +880,14 @@ export type {
   InputValidationType,
 };
 
+/* -----------------------------------------------------------------------------------------------*/
+
 function isFormElement(element: Element | null | undefined): element is HTMLFormElement {
   return element?.tagName === 'FORM';
 }
 
-function sanitizeValue(value: string | string[], regexp: RegExp | undefined | null) {
-  if (Array.isArray(value)) {
-    value = value.join('');
-  }
-  if (regexp) {
-    // global regexp is stateful, so we clone it for each call
-    regexp = new RegExp(regexp);
-    return value.replace(regexp, '').split('').filter(Boolean);
-  }
-  return value.split('').filter(Boolean);
+function removeWhitespace(value: string) {
+  return value.replace(/\s/g, '');
 }
 
 function focusInput(element: HTMLInputElement | null | undefined) {
@@ -821,3 +906,35 @@ function focusInput(element: HTMLInputElement | null | undefined) {
 function isInputEvent(event: Event): event is InputEvent {
   return event.type === 'input';
 }
+
+type InputType = 'password' | 'text';
+type AutoComplete = 'off' | 'one-time-code';
+type KeyboardActionDetails =
+  | {
+      type: 'keydown';
+      key: 'Backspace' | 'Delete' | 'Clear' | 'Char';
+      metaKey: boolean;
+      ctrlKey: boolean;
+    }
+  | { type: 'cut' };
+
+type UpdateAction =
+  | {
+      type: 'SET_CHAR';
+      char: string;
+      index: number;
+      event: React.KeyboardEvent | React.ChangeEvent;
+    }
+  | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }
+  | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }
+  | { type: 'PASTE'; value: string };
+type Dispatcher = React.Dispatch<UpdateAction>;
+type InputValidation = Record<
+  InputValidationType,
+  {
+    type: InputValidationType;
+    regexp: RegExp;
+    pattern: string;
+    inputMode: 'text' | 'numeric';
+  } | null
+>;