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

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

@@ -0,0 +1,823 @@
+import { 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';
+import { unstable_createCollection as createCollection } from '@radix-ui/react-collection';
+import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
+import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
+import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import type { Scope } from '@radix-ui/react-context';
+import { createContextScope } from '@radix-ui/react-context';
+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: {
+    type: 'numeric',
+    regexp: /[^\d]/g,
+    pattern: '\\d{1}',
+    inputMode: 'numeric',
+  },
+  alpha: {
+    type: 'alpha',
+    regexp: /[^a-zA-Z]/g,
+    pattern: '[a-zA-Z]{1}',
+    inputMode: 'text',
+  },
+  alphanumeric: {
+    type: 'alphanumeric',
+    regexp: /[^a-zA-Z0-9]/g,
+    pattern: '[a-zA-Z0-9]{1}',
+    inputMode: 'text',
+  },
+} satisfies InputValidation;
+
+interface OneTimePasswordFieldContextValue {
+  value: string[];
+  attemptSubmit: () => void;
+  hiddenInputRef: React.RefObject<HTMLInputElement | null>;
+  validationType: InputValidationType;
+  disabled: boolean;
+  readOnly: boolean;
+  autoComplete: AutoComplete;
+  autoFocus: boolean;
+  form: string | undefined;
+  name: string | undefined;
+  placeholder: string | undefined;
+  required: boolean;
+  type: InputType;
+  userActionRef: React.RefObject<KeyboardActionDetails | null>;
+  dispatch: Dispatcher;
+  orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;
+  preHydrationIndexTracker: React.RefObject<number>;
+  isHydrated: boolean;
+}
+
+const ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';
+const [Collection, useCollection, createCollectionScope] = createCollection<HTMLInputElement>(
+  ONE_TIME_PASSWORD_FIELD_NAME
+);
+const [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [
+  createCollectionScope,
+  createRovingFocusGroupScope,
+]);
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+
+const [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =
+  createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);
+
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+
+interface OneTimePasswordFieldOwnProps {
+  onValueChange?: (value: string) => void;
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  autoSubmit?: boolean;
+  onAutoSubmit?: (value: string) => void;
+  validationType?: InputValidationType;
+  disabled?: boolean;
+  readOnly?: boolean;
+  autoComplete?: AutoComplete;
+  autoFocus?: boolean;
+  form?: string | undefined;
+  name?: string | undefined;
+  placeholder?: string | undefined;
+  required?: boolean;
+  type?: InputType;
+  //
+  dir?: RovingFocusGroupProps['dir'];
+  orientation?: RovingFocusGroupProps['orientation'];
+}
+
+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
+    > {}
+
+const OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(
+  function OneTimePasswordFieldImpl(
+    {
+      __scopeOneTimePasswordField,
+      id,
+      defaultValue,
+      value: valueProp,
+      onValueChange,
+      autoSubmit,
+      children,
+      onPaste,
+      onAutoSubmit,
+      disabled = false,
+      readOnly = false,
+      autoComplete = 'one-time-code',
+      autoFocus = false,
+      form,
+      name,
+      placeholder,
+      required = false,
+      type = 'password',
+      // TODO: Change default to vertical when inputs use vertical writing mode
+      orientation = 'horizontal',
+      dir,
+      validationType = 'numeric',
+      ...domProps
+    }: ScopedProps<OneTimePasswordFieldProps>,
+    forwardedRef
+  ) {
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
+    const direction = useDirection(dir);
+    const collection = useCollection(__scopeOneTimePasswordField);
+
+    const validation =
+      validationType in INPUT_VALIDATION_MAP
+        ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]
+        : undefined;
+
+    const controlledValue = React.useMemo(() => {
+      return valueProp != null ? sanitizeValue(valueProp, validation?.regexp) : undefined;
+    }, [valueProp, validation?.regexp]);
+
+    const [value, setValue] = useControllableState({
+      caller: 'OneTimePasswordField',
+      prop: controlledValue,
+      defaultProp: defaultValue != null ? sanitizeValue(defaultValue, validation?.regexp) : [],
+      onChange: (value) => onValueChange?.(value.filter(Boolean).join('')),
+    });
+
+    // Update function *specifically* for event handlers.
+    const dispatch = useEffectEvent<Dispatcher>((action) => {
+      switch (action.type) {
+        case 'SET_CHAR': {
+          const { index, char } = action;
+          const currentTarget = collection.at(index)?.element;
+          if (value[index] === char) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+
+          // empty values should be handled in the CLEAR_CHAR action
+          if (char === '') {
+            return;
+          }
+
+          if (validation) {
+            const regexp = new RegExp(validation.regexp);
+            const clean = char.replace(regexp, '');
+            if (clean !== char) {
+              // not valid; ignore
+              return;
+            }
+          }
+
+          // no more space
+          if (value.length >= collection.size) {
+            // replace current value; move to next input
+            const newValue = [...value];
+            newValue[index] = char;
+            flushSync(() => setValue(newValue));
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+
+          const newValue = [
+            //
+            ...value.slice(0, index),
+            char,
+            ...value.slice(index),
+          ];
+
+          const lastElement = collection.at(-1)?.element;
+          flushSync(() => setValue(newValue));
+          if (currentTarget !== lastElement) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+          } else {
+            currentTarget?.select();
+          }
+          return;
+        }
+
+        case 'CLEAR_CHAR': {
+          const { index, reason } = action;
+          if (!value[index]) {
+            return;
+          }
+
+          const newValue = value.filter((_, i) => i !== index);
+          const currentTarget = collection.at(index)?.element;
+          const previous = currentTarget && collection.from(currentTarget, -1)?.element;
+
+          flushSync(() => setValue(newValue));
+          if (reason === 'Backspace') {
+            focusInput(previous);
+          } else if (reason === 'Delete' || reason === 'Cut') {
+            focusInput(currentTarget);
+          }
+          return;
+        }
+
+        case 'CLEAR': {
+          if (value.length === 0) {
+            return;
+          }
+
+          if (action.reason === 'Backspace' || action.reason === 'Delete') {
+            flushSync(() => setValue([]));
+            focusInput(collection.at(0)?.element);
+          } else {
+            setValue([]);
+          }
+          return;
+        }
+
+        case 'PASTE': {
+          const { value: pastedValue } = action;
+          const value = sanitizeValue(pastedValue, validation?.regexp);
+          if (!value) {
+            return;
+          }
+
+          flushSync(() => setValue(value));
+          focusInput(collection.at(value.length - 1)?.element);
+          return;
+        }
+      }
+    });
+
+    // re-validate when the validation type changes
+    const validationTypeRef = React.useRef(validation);
+    React.useEffect(() => {
+      if (!validation) {
+        return;
+      }
+
+      if (validationTypeRef.current?.type !== validation.type) {
+        validationTypeRef.current = validation;
+        setValue(sanitizeValue(value, validation.regexp));
+      }
+    }, [setValue, validation, value]);
+
+    const hiddenInputRef = React.useRef<HTMLInputElement>(null);
+
+    const userActionRef = React.useRef<KeyboardActionDetails | null>(null);
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const composedRefs = useComposedRefs(forwardedRef, rootRef);
+
+    const firstInput = collection.at(0)?.element;
+    const locateForm = React.useCallback(() => {
+      let formElement: HTMLFormElement | null | undefined;
+      if (form) {
+        const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);
+        if (isFormElement(associatedElement)) {
+          formElement = associatedElement;
+        }
+      } else if (hiddenInputRef.current) {
+        formElement = hiddenInputRef.current.form;
+      } else if (firstInput) {
+        formElement = firstInput.form;
+      }
+
+      return formElement ?? null;
+    }, [form, firstInput]);
+
+    const attemptSubmit = React.useCallback(() => {
+      const formElement = locateForm();
+      formElement?.requestSubmit();
+    }, [locateForm]);
+
+    React.useEffect(() => {
+      const form = locateForm();
+      if (form) {
+        const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });
+        form.addEventListener('reset', reset);
+        return () => form.removeEventListener('reset', reset);
+      }
+    }, [dispatch, locateForm]);
+
+    const currentValue = value.join('');
+    const valueRef = React.useRef(currentValue);
+    const length = collection.size;
+    React.useEffect(() => {
+      const previousValue = valueRef.current;
+      valueRef.current = currentValue;
+      if (previousValue === currentValue) {
+        return;
+      }
+
+      if (autoSubmit && value.every((char) => char !== '') && value.length === length) {
+        onAutoSubmit?.(value.join(''));
+        attemptSubmit();
+      }
+    }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);
+
+    // Before hydration (and in SSR) we can track the index of an input during
+    // render, as indices calculated by the collection package should almost
+    // always align with render order anyway. This ensures that index-dependent
+    // attributes are immediately rendered, in case browser extensions rely on
+    // those for auto-complete functionality and JS has not hydrated.
+    const preHydrationIndexTracker = React.useRef<number>(0);
+    const isHydrated = useIsHydrated();
+
+    return (
+      <OneTimePasswordFieldContext
+        scope={__scopeOneTimePasswordField}
+        value={value}
+        attemptSubmit={attemptSubmit}
+        disabled={disabled}
+        readOnly={readOnly}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        form={form}
+        name={name}
+        placeholder={placeholder}
+        required={required}
+        type={type}
+        hiddenInputRef={hiddenInputRef}
+        userActionRef={userActionRef}
+        dispatch={dispatch}
+        validationType={validationType}
+        orientation={orientation}
+        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>
+      </OneTimePasswordFieldContext>
+    );
+  }
+);
+
+const OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(
+  function OneTimePasswordField(props, ref) {
+    return (
+      <OneTimePasswordFieldCollectionProvider>
+        <OneTimePasswordFieldImpl {...props} ref={ref} />
+      </OneTimePasswordFieldCollectionProvider>
+    );
+  }
+);
+
+interface OneTimePasswordFieldHiddenInputProps
+  extends Omit<
+    React.ComponentProps<'input'>,
+    | keyof 'value'
+    | 'defaultValue'
+    | 'type'
+    | 'onChange'
+    | 'readOnly'
+    | 'disabled'
+    | 'autoComplete'
+    | 'autoFocus'
+  > {}
+
+const OneTimePasswordFieldHiddenInput = React.forwardRef<
+  HTMLInputElement,
+  OneTimePasswordFieldHiddenInputProps
+>(function OneTimePasswordFieldHiddenInput(
+  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,
+  forwardedRef
+) {
+  const { value, hiddenInputRef } = useOneTimePasswordFieldContext(
+    'OneTimePasswordFieldHiddenInput',
+    __scopeOneTimePasswordField
+  );
+  const ref = useComposedRefs(hiddenInputRef, forwardedRef);
+  return (
+    <input
+      ref={ref}
+      {...props}
+      type="hidden"
+      readOnly
+      value={value.join('').trim()}
+      autoComplete="off"
+      autoFocus={false}
+      autoCapitalize="off"
+      autoCorrect="off"
+      autoSave="off"
+      spellCheck={false}
+    />
+  );
+});
+
+interface OneTimePasswordFieldInputOwnProps {
+  autoComplete?: 'one-time-code' | 'off';
+}
+
+interface OneTimePasswordFieldInputProps
+  extends OneTimePasswordFieldInputOwnProps,
+    Omit<React.ComponentProps<typeof Primitive.input>, keyof OneTimePasswordFieldInputOwnProps> {}
+
+const OneTimePasswordFieldInput = React.forwardRef<
+  HTMLInputElement,
+  OneTimePasswordFieldInputProps
+>(function OneTimePasswordFieldInput(
+  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldInputProps>,
+  forwardedRef
+) {
+  // TODO: warn if these values are passed
+  const {
+    value: _value,
+    defaultValue: _defaultValue,
+    disabled: _disabled,
+    readOnly: _readOnly,
+    autoComplete: _autoComplete,
+    autoFocus: _autoFocus,
+    form: _form,
+    name: _name,
+    placeholder: _placeholder,
+    required: _required,
+    type: _type,
+    ...domProps
+  } = props as any;
+
+  const context = useOneTimePasswordFieldContext(
+    'OneTimePasswordFieldInput',
+    __scopeOneTimePasswordField
+  );
+  const { dispatch, userActionRef, validationType, preHydrationIndexTracker, isHydrated } = context;
+  const collection = useCollection(__scopeOneTimePasswordField);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [element, setElement] = React.useState<HTMLInputElement | null>(null);
+
+  let index: number;
+  if (!isHydrated) {
+    index = preHydrationIndexTracker.current;
+    preHydrationIndexTracker.current++;
+  } else {
+    index = element ? collection.indexOf(element) : -1;
+  }
+
+  const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);
+  const char = context.value[index] ?? '';
+
+  const keyboardActionTimeoutRef = React.useRef<number | null>(null);
+  React.useEffect(() => {
+    return () => {
+      window.clearTimeout(keyboardActionTimeoutRef.current!);
+    };
+  }, []);
+
+  const totalValue = context.value.join('').trim();
+  const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);
+  const isFocusable = index <= lastSelectableIndex;
+
+  const validation =
+    validationType in INPUT_VALIDATION_MAP
+      ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]
+      : undefined;
+
+  return (
+    <Collection.ItemSlot scope={__scopeOneTimePasswordField}>
+      <RovingFocusGroup.Item
+        {...rovingFocusGroupScope}
+        asChild
+        focusable={!context.disabled && isFocusable}
+        active={index === lastSelectableIndex}
+      >
+        <Primitive.input
+          ref={composedInputRef}
+          type="text"
+          aria-label={`Character ${index + 1} of ${collection.size}`}
+          autoComplete={index === 0 ? context.autoComplete : 'off'}
+          inputMode={validation?.inputMode}
+          maxLength={1}
+          pattern={validation?.pattern}
+          readOnly={context.readOnly}
+          value={char}
+          data-radix-otp-input=""
+          data-radix-index={index}
+          {...domProps}
+          onFocus={composeEventHandlers(props.onFocus, (event) => {
+            event.currentTarget.select();
+          })}
+          onCut={composeEventHandlers(props.onCut, (event) => {
+            const currentValue = event.currentTarget.value;
+            if (currentValue !== '') {
+              // In this case the value will be cleared, but we don't want to
+              // set it directly because the user may want to prevent default
+              // behavior in the onChange handler. The userActionRef will
+              // is set temporarily so the change handler can behave correctly
+              // in response to the action.
+              userActionRef.current = {
+                type: 'cut',
+              };
+              // Set a short timeout to clear the action tracker after the change
+              // handler has had time to complete.
+              keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                userActionRef.current = null;
+              }, 10);
+            }
+          })}
+          onChange={composeEventHandlers(props.onChange, (event) => {
+            const action = userActionRef.current;
+            userActionRef.current = null;
+
+            if (action) {
+              switch (action.type) {
+                case 'cut':
+                  // TODO: do we want to assume the user wantt to clear the
+                  // entire value here and copy the code to the clipboard instead
+                  // of just the value of the given input?
+                  dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });
+                  return;
+                case 'keydown': {
+                  if (action.key === 'Char') {
+                    // update resulting from a keydown event that set a value
+                    // directly. Ignore.
+                    return;
+                  }
+
+                  const isClearing =
+                    action.key === 'Backspace' && (action.metaKey || action.ctrlKey);
+                  if (isClearing) {
+                    dispatch({ type: 'CLEAR', reason: 'Backspace' });
+                  } else {
+                    dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });
+                  }
+                  return;
+                }
+                default:
+                  return;
+              }
+            }
+
+            // Only update the value if it matches the input pattern
+            if (event.target.validity.valid) {
+              if (event.target.value === '') {
+                let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';
+                if (isInputEvent(event.nativeEvent)) {
+                  const inputType = event.nativeEvent.inputType;
+                  if (inputType === 'deleteContentBackward') {
+                    reason = 'Backspace';
+                  } else if (inputType === 'deleteByCut') {
+                    reason = 'Cut';
+                  }
+                }
+                dispatch({ type: 'CLEAR_CHAR', index, reason });
+              } else {
+                dispatch({ type: 'SET_CHAR', char: event.target.value, index, event });
+              }
+            } else {
+              const element = event.target;
+              requestAnimationFrame(() => {
+                if (element.ownerDocument.activeElement === element) {
+                  element.select();
+                }
+              });
+            }
+          })}
+          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
+            switch (event.key) {
+              case 'Delete':
+              case 'Backspace': {
+                const currentValue = event.currentTarget.value;
+                // if current value is empty, no change event will fire
+                if (currentValue === '') {
+                  // if the user presses delete when there is no value, noop
+                  if (event.key === 'Delete') return;
+
+                  const isClearing = event.metaKey || event.ctrlKey;
+                  if (isClearing) {
+                    dispatch({ type: 'CLEAR', reason: 'Backspace' });
+                  } else {
+                    const element = event.currentTarget;
+                    requestAnimationFrame(() => {
+                      focusInput(collection.from(element, -1)?.element);
+                    });
+                  }
+                } else {
+                  // In this case the value will be cleared, but we don't want
+                  // to set it directly because the user may want to prevent
+                  // default behavior in the onChange handler. The userActionRef
+                  // will is set temporarily so the change handler can behave
+                  // correctly in response to the key vs. clearing the value by
+                  // setting state externally.
+                  userActionRef.current = {
+                    type: 'keydown',
+                    key: event.key,
+                    metaKey: event.metaKey,
+                    ctrlKey: event.ctrlKey,
+                  };
+                  // Set a short timeout to clear the action tracker after the change
+                  // handler has had time to complete.
+                  keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                    userActionRef.current = null;
+                  }, 10);
+                }
+
+                return;
+              }
+              case 'Enter': {
+                event.preventDefault();
+                context.attemptSubmit();
+                return;
+              }
+              case 'ArrowDown':
+              case 'ArrowUp': {
+                if (context.orientation === 'horizontal') {
+                  // in horizontal orientation, the up/down will de-select the
+                  // input instead of moving focus
+                  event.preventDefault();
+                }
+                return;
+              }
+              // TODO: Handle left/right arrow keys in vertical writing mode
+              default: {
+                if (event.currentTarget.value === event.key) {
+                  // if current value is same as the key press, no change event
+                  // will fire. Focus the next input.
+                  const element = event.currentTarget;
+                  event.preventDefault();
+                  focusInput(collection.from(element, 1)?.element);
+                  return;
+                } else if (
+                  // input already has a value, but...
+                  event.currentTarget.value &&
+                  // the value is not selected
+                  !(
+                    event.currentTarget.selectionStart === 0 &&
+                    event.currentTarget.selectionEnd != null &&
+                    event.currentTarget.selectionEnd > 0
+                  )
+                ) {
+                  const attemptedValue = event.key;
+                  if (event.key.length > 1 || event.key === ' ') {
+                    // not a character; do nothing
+                    return;
+                  } else {
+                    // user is attempting to enter a character, but the input
+                    // will not update by default since it's limited to a single
+                    // character.
+                    const nextInput = collection.from(event.currentTarget, 1)?.element;
+                    const lastInput = collection.at(-1)?.element;
+                    if (nextInput !== lastInput && event.currentTarget !== lastInput) {
+                      // if selection is before the value, set the value of the
+                      // current input. Otherwise set the value of the next
+                      // input.
+                      if (event.currentTarget.selectionStart === 0) {
+                        dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });
+                      } else {
+                        dispatch({
+                          type: 'SET_CHAR',
+                          char: attemptedValue,
+                          index: index + 1,
+                          event,
+                        });
+                      }
+
+                      userActionRef.current = {
+                        type: 'keydown',
+                        key: 'Char',
+                        metaKey: event.metaKey,
+                        ctrlKey: event.ctrlKey,
+                      };
+                      keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                        userActionRef.current = null;
+                      }, 10);
+                    }
+                  }
+                }
+              }
+            }
+          })}
+          onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
+            if (index > lastSelectableIndex) {
+              event.preventDefault();
+              const element = collection.at(lastSelectableIndex)?.element;
+              focusInput(element);
+            }
+          })}
+        />
+      </RovingFocusGroup.Item>
+    </Collection.ItemSlot>
+  );
+});
+
+const Root = OneTimePasswordField;
+const Input = OneTimePasswordFieldInput;
+const HiddenInput = OneTimePasswordFieldHiddenInput;
+
+export {
+  OneTimePasswordField,
+  OneTimePasswordFieldInput,
+  OneTimePasswordFieldHiddenInput,
+  //
+  Root,
+  Input,
+  HiddenInput,
+};
+export type {
+  OneTimePasswordFieldProps,
+  OneTimePasswordFieldInputProps,
+  OneTimePasswordFieldHiddenInputProps,
+  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 focusInput(element: HTMLInputElement | null | undefined) {
+  if (!element) return;
+  if (element.ownerDocument.activeElement === element) {
+    // if the element is already focused, select the value in the next
+    // animation frame
+    window.requestAnimationFrame(() => {
+      element.select?.();
+    });
+  } else {
+    element.focus();
+  }
+}
+
+function isInputEvent(event: Event): event is InputEvent {
+  return event.type === 'input';
+}