@radix-ui/react-one-time-password-field 0.1.14 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -2,7 +2,23 @@ import * as Primitive from '@radix-ui/react-primitive';
2
2
  import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
3
3
  import * as React from 'react';
4
4
 
5
- type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
5
+ declare const InputValidationType: {
6
+ readonly Alpha: "alpha";
7
+ readonly Numeric: "numeric";
8
+ readonly Alphanumeric: "alphanumeric";
9
+ readonly None: "none";
10
+ };
11
+ type InputValidationType = (typeof InputValidationType)[keyof typeof InputValidationType];
12
+ declare const InputType: {
13
+ readonly Password: "password";
14
+ readonly Text: "text";
15
+ };
16
+ type InputType = (typeof InputType)[keyof typeof InputType];
17
+ declare const AutoComplete: {
18
+ readonly Off: "off";
19
+ readonly OneTimeCode: "one-time-code";
20
+ };
21
+ type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
6
22
  type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
7
23
  interface OneTimePasswordFieldOwnProps {
8
24
  /**
@@ -130,7 +146,4 @@ interface OneTimePasswordFieldInputProps extends Omit<Primitive.PrimitivePropsWi
130
146
  }
131
147
  declare const OneTimePasswordFieldInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
132
148
 
133
- type InputType = 'password' | 'text';
134
- type AutoComplete = 'off' | 'one-time-code';
135
-
136
- export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };
149
+ export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };
package/dist/index.d.ts CHANGED
@@ -2,7 +2,23 @@ import * as Primitive from '@radix-ui/react-primitive';
2
2
  import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
3
3
  import * as React from 'react';
4
4
 
5
- type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
5
+ declare const InputValidationType: {
6
+ readonly Alpha: "alpha";
7
+ readonly Numeric: "numeric";
8
+ readonly Alphanumeric: "alphanumeric";
9
+ readonly None: "none";
10
+ };
11
+ type InputValidationType = (typeof InputValidationType)[keyof typeof InputValidationType];
12
+ declare const InputType: {
13
+ readonly Password: "password";
14
+ readonly Text: "text";
15
+ };
16
+ type InputType = (typeof InputType)[keyof typeof InputType];
17
+ declare const AutoComplete: {
18
+ readonly Off: "off";
19
+ readonly OneTimeCode: "one-time-code";
20
+ };
21
+ type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
6
22
  type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
7
23
  interface OneTimePasswordFieldOwnProps {
8
24
  /**
@@ -130,7 +146,4 @@ interface OneTimePasswordFieldInputProps extends Omit<Primitive.PrimitivePropsWi
130
146
  }
131
147
  declare const OneTimePasswordFieldInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
132
148
 
133
- type InputType = 'password' | 'text';
134
- type AutoComplete = 'off' | 'one-time-code';
135
-
136
- export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };
149
+ export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };
package/dist/index.js CHANGED
@@ -56,21 +56,35 @@ var import_react_context = require("@radix-ui/react-context");
56
56
  var import_react_direction = require("@radix-ui/react-direction");
57
57
  var import_number = require("@radix-ui/number");
58
58
  var import_jsx_runtime = require("react/jsx-runtime");
59
+ var InputValidationType = {
60
+ Alpha: "alpha",
61
+ Numeric: "numeric",
62
+ Alphanumeric: "alphanumeric",
63
+ None: "none"
64
+ };
65
+ var InputType = {
66
+ Password: "password",
67
+ Text: "text"
68
+ };
69
+ var AutoComplete = {
70
+ Off: "off",
71
+ OneTimeCode: "one-time-code"
72
+ };
59
73
  var INPUT_VALIDATION_MAP = {
60
74
  numeric: {
61
- type: "numeric",
75
+ type: InputValidationType.Numeric,
62
76
  regexp: /[^\d]/g,
63
77
  pattern: "\\d{1}",
64
78
  inputMode: "numeric"
65
79
  },
66
80
  alpha: {
67
- type: "alpha",
81
+ type: InputValidationType.Alpha,
68
82
  regexp: /[^a-zA-Z]/g,
69
83
  pattern: "[a-zA-Z]{1}",
70
84
  inputMode: "text"
71
85
  },
72
86
  alphanumeric: {
73
- type: "alphanumeric",
87
+ type: InputValidationType.Alphanumeric,
74
88
  regexp: /[^a-zA-Z0-9]/g,
75
89
  pattern: "[a-zA-Z0-9]{1}",
76
90
  inputMode: "text"
@@ -98,16 +112,16 @@ var OneTimePasswordField = /* @__PURE__ */ React.forwardRef(
98
112
  onAutoSubmit,
99
113
  disabled = false,
100
114
  readOnly = false,
101
- autoComplete = "one-time-code",
115
+ autoComplete = AutoComplete.OneTimeCode,
102
116
  autoFocus = false,
103
117
  form,
104
118
  name,
105
119
  placeholder,
106
- type = "text",
120
+ type = InputType.Text,
107
121
  // TODO: Change default to vertical when inputs use vertical writing mode
108
122
  orientation = "horizontal",
109
123
  dir,
110
- validationType = "numeric",
124
+ validationType = InputValidationType.Numeric,
111
125
  sanitizeValue: sanitizeValueProp,
112
126
  ...domProps
113
127
  }, forwardedRef) {
@@ -427,7 +441,7 @@ var OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
427
441
  type: context.type,
428
442
  disabled,
429
443
  "aria-label": `Character ${index + 1} of ${collection.size}`,
430
- autoComplete: supportsAutoComplete ? context.autoComplete : "off",
444
+ autoComplete: supportsAutoComplete ? context.autoComplete : AutoComplete.Off,
431
445
  "data-1p-ignore": supportsAutoComplete ? void 0 : "true",
432
446
  "data-lpignore": supportsAutoComplete ? void 0 : "true",
433
447
  "data-protonpass-ignore": supportsAutoComplete ? void 0 : "true",
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/one-time-password-field.tsx"],
4
- "sourcesContent": ["'use client';\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n} from './one-time-password-field';\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n Root,\n Input,\n HiddenInput,\n} from './one-time-password-field';\n", "import * as Primitive from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\n\ntype InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';\n\nconst INPUT_VALIDATION_MAP = {\n numeric: {\n type: 'numeric',\n regexp: /[^\\d]/g,\n pattern: '\\\\d{1}',\n inputMode: 'numeric',\n },\n alpha: {\n type: 'alpha',\n regexp: /[^a-zA-Z]/g,\n pattern: '[a-zA-Z]{1}',\n inputMode: 'text',\n },\n alphanumeric: {\n type: 'alphanumeric',\n regexp: /[^a-zA-Z0-9]/g,\n pattern: '[a-zA-Z0-9]{1}',\n inputMode: 'text',\n },\n none: null,\n} satisfies InputValidation;\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;\n\ninterface OneTimePasswordFieldContextValue {\n attemptSubmit: () => void;\n autoComplete: AutoComplete;\n autoFocus: boolean;\n disabled: boolean;\n dispatch: Dispatcher;\n form: string | undefined;\n hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n isHydrated: boolean;\n name: string | undefined;\n orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n placeholder: string | undefined;\n readOnly: boolean;\n type: InputType;\n userActionRef: React.RefObject<KeyboardActionDetails | null>;\n validationType: InputValidationType;\n value: string[];\n sanitizeValue: (arg: string | string[]) => string[];\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, { useCollection, createCollectionScope, useInitCollection }] =\n createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordField\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldOwnProps {\n /**\n * Specifies what\u2014if any\u2014permission the user agent has to provide automated\n * assistance in filling out form field values, as well as guidance to the\n * browser as to the type of information expected in the field. Allows\n * `\"one-time-code\"` or `\"off\"`.\n *\n * @defaultValue `\"one-time-code\"`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\n */\n autoComplete?: AutoComplete;\n /**\n * Whether or not the first fillable input should be focused on page-load.\n *\n * @defaultValue `false`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus\n */\n autoFocus?: boolean;\n /**\n * Whether or not the component should attempt to automatically submit when\n * all fields are filled. If the field is associated with an HTML `form`\n * element, the form's `requestSubmit` method will be called.\n *\n * @defaultValue `false`\n */\n autoSubmit?: boolean;\n /**\n * The initial value of the uncontrolled field.\n */\n defaultValue?: string;\n /**\n * Indicates the horizontal directionality of the parent element's text.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether or not the the field's input elements are disabled.\n */\n disabled?: boolean;\n /**\n * A string specifying the `form` element with which the input is associated.\n * This string's value, if present, must match the id of a `form` element in\n * the same document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form\n */\n form?: string | undefined;\n /**\n * A string specifying a name for the input control. This name is submitted\n * along with the control's value when the form data is submitted.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name\n */\n name?: string | undefined;\n /**\n * When the `autoSubmit` prop is set to `true`, this callback will be fired\n * before attempting to submit the associated form. It will be called whether\n * or not a form is located, or if submission is not allowed.\n */\n onAutoSubmit?: (value: string) => void;\n /**\n * A callback fired when the field's value changes. When the component is\n * controlled, this should update the state passed to the `value` prop.\n */\n onValueChange?: (value: string) => void;\n /**\n * Indicates the vertical directionality of the input elements.\n *\n * @defaultValue `\"horizontal\"`\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * Defines the text displayed in a form control when the control has no value.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder\n */\n placeholder?: string | undefined;\n /**\n * Whether or not the input elements can be updated by the user.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly\n */\n readOnly?: boolean;\n /**\n * Function for custom sanitization when `validationType` is set to `\"none\"`.\n * This function will be called before updating values in response to user\n * interactions.\n */\n sanitizeValue?: (value: string) => string;\n /**\n * The input type of the field's input elements. Can be `\"password\"` or `\"text\"`.\n */\n type?: InputType;\n /**\n * Specifies the type of input validation to be used. Can be `\"alpha\"`,\n * `\"numeric\"`, `\"alphanumeric\"` or `\"none\"`.\n *\n * @defaultValue `\"numeric\"`\n */\n validationType?: InputValidationType;\n /**\n * The controlled value of the field.\n */\n value?: string;\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\ninterface OneTimePasswordFieldProps\n extends\n OneTimePasswordFieldOwnProps,\n Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}\n\nconst OneTimePasswordField = /* @__PURE__ */ React.forwardRef<\n HTMLDivElement,\n OneTimePasswordFieldProps\n>(\n // blank line to reduce diff noise\n function OneTimePasswordFieldImpl(\n {\n __scopeOneTimePasswordField,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit = false,\n children,\n onPaste,\n onAutoSubmit,\n disabled = false,\n readOnly = false,\n autoComplete = 'one-time-code',\n autoFocus = false,\n form,\n name,\n placeholder,\n type = 'text',\n // TODO: Change default to vertical when inputs use vertical writing mode\n orientation = 'horizontal',\n dir,\n validationType = 'numeric',\n sanitizeValue: sanitizeValueProp,\n ...domProps\n }: ScopedProps<OneTimePasswordFieldProps>,\n forwardedRef,\n ) {\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n const direction = useDirection(dir);\n const collectionState = useInitCollection();\n const [collection] = collectionState;\n\n const validation = INPUT_VALIDATION_MAP[validationType]\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : null;\n\n const sanitizeValue = React.useCallback(\n (value: string | string[]) => {\n if (Array.isArray(value)) {\n value = value.map(removeWhitespace).join('');\n } else {\n value = removeWhitespace(value);\n }\n\n if (validation) {\n // global regexp is stateful, so we clone it for each call\n const regexp = new RegExp(validation.regexp);\n value = value.replace(regexp, '');\n } else if (sanitizeValueProp) {\n value = sanitizeValueProp(value);\n }\n\n return value.split('');\n },\n [validation, sanitizeValueProp],\n );\n\n const controlledValue = React.useMemo(() => {\n return valueProp != null ? sanitizeValue(valueProp) : undefined;\n }, [valueProp, sanitizeValue]);\n\n const [value, setValue] = useControllableState({\n caller: 'OneTimePasswordField',\n prop: controlledValue,\n defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],\n onChange: React.useCallback(\n (value: string[]) => onValueChange?.(value.join('')),\n [onValueChange],\n ),\n });\n\n // Use a ref so dispatch always reads the latest value without needing\n // value in its dependency array (which would change its identity every\n // keystroke and cause cascading effect re-runs).\n const latestValueRef = React.useRef(value);\n latestValueRef.current = value;\n\n // Update function *specifically* for event handlers.\n const dispatch = React.useCallback<Dispatcher>(\n (action) => {\n const value = latestValueRef.current;\n switch (action.type) {\n case 'SET_CHAR': {\n const { index, char } = action;\n const currentTarget = collection.at(index)?.element;\n if (value[index] === char) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n // empty values should be handled in the CLEAR_CHAR action\n if (char === '') {\n return;\n }\n\n if (validation) {\n const regexp = new RegExp(validation.regexp);\n const clean = char.replace(regexp, '');\n if (clean !== char) {\n // not valid; ignore\n return;\n }\n }\n\n // no more space\n if (value.length >= collection.size) {\n // replace current value; move to next input\n const newValue = [...value];\n newValue[index] = char;\n flushSync(() => setValue(newValue));\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n const newValue = [...value];\n newValue[index] = char;\n\n const lastElement = collection.at(-1)?.element;\n flushSync(() => setValue(newValue));\n if (currentTarget !== lastElement) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n } else {\n currentTarget?.select();\n }\n return;\n }\n\n case 'CLEAR_CHAR': {\n const { index, reason } = action;\n if (!value[index]) {\n return;\n }\n\n const newValue = value.filter((_, i) => i !== index);\n const currentTarget = collection.at(index)?.element;\n const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n flushSync(() => setValue(newValue));\n if (reason === 'Backspace') {\n focusInput(previous);\n } else if (reason === 'Delete' || reason === 'Cut') {\n focusInput(currentTarget);\n }\n return;\n }\n\n case 'CLEAR': {\n if (value.length === 0) {\n return;\n }\n\n if (action.reason === 'Backspace' || action.reason === 'Delete') {\n flushSync(() => setValue([]));\n focusInput(collection.at(0)?.element);\n } else {\n setValue([]);\n }\n return;\n }\n\n case 'PASTE': {\n const { value: pastedValue } = action;\n const sanitizedValue = sanitizeValue(pastedValue);\n if (!sanitizedValue) {\n return;\n }\n\n const value = sanitizedValue.slice(0, collection.size);\n\n flushSync(() => setValue(value));\n focusInput(collection.at(value.length - 1)?.element);\n return;\n }\n }\n },\n [collection, sanitizeValue, setValue, validation],\n );\n\n // re-validate when the validation type changes\n const validationTypeRef = React.useRef(validation);\n React.useEffect(() => {\n if (!validation) {\n return;\n }\n\n if (validationTypeRef.current?.type !== validation.type) {\n validationTypeRef.current = validation;\n setValue(sanitizeValue(value.join('')));\n }\n }, [sanitizeValue, setValue, validation, value]);\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n const firstInput = collection.at(0)?.element;\n const locateForm = React.useCallback(() => {\n let formElement: HTMLFormElement | null | undefined;\n if (form) {\n const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n if (isFormElement(associatedElement)) {\n formElement = associatedElement;\n }\n } else if (hiddenInputRef.current) {\n formElement = hiddenInputRef.current.form;\n } else if (firstInput) {\n formElement = firstInput.form;\n }\n\n return formElement ?? null;\n }, [form, firstInput]);\n\n const attemptSubmit = React.useCallback(() => {\n const formElement = locateForm();\n formElement?.requestSubmit();\n }, [locateForm]);\n\n React.useEffect(() => {\n const form = locateForm();\n if (form) {\n const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [dispatch, locateForm]);\n\n const currentValue = value.join('');\n const valueRef = React.useRef(currentValue);\n const length = collection.size;\n React.useEffect(() => {\n const previousValue = valueRef.current;\n valueRef.current = currentValue;\n if (previousValue === currentValue) {\n return;\n }\n\n if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n onAutoSubmit?.(value.join(''));\n attemptSubmit();\n }\n }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n const isHydrated = useIsHydrated();\n\n return (\n <OneTimePasswordFieldContext\n scope={__scopeOneTimePasswordField}\n value={value}\n attemptSubmit={attemptSubmit}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n form={form}\n name={name}\n placeholder={placeholder}\n type={type}\n hiddenInputRef={hiddenInputRef}\n userActionRef={userActionRef}\n dispatch={dispatch}\n validationType={validationType}\n orientation={orientation}\n isHydrated={isHydrated}\n sanitizeValue={sanitizeValue}\n >\n <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>\n <Collection.Slot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n >\n <Primitive.Root.div\n {...domProps}\n role=\"group\"\n ref={composedRefs}\n onPaste={composeEventHandlers(\n onPaste,\n (event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text/plain');\n dispatch({ type: 'PASTE', value: pastedValue });\n },\n )}\n >\n {children}\n </Primitive.Root.div>\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </OneTimePasswordFieldContext>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldHiddenInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldHiddenInputProps extends Omit<\n React.ComponentProps<'input'>,\n | keyof 'value'\n | 'defaultValue'\n | 'type'\n | 'onChange'\n | 'readOnly'\n | 'disabled'\n | 'autoComplete'\n | 'autoFocus'\n> {}\n\nconst OneTimePasswordFieldHiddenInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n forwardedRef,\n) {\n const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldHiddenInput',\n __scopeOneTimePasswordField,\n );\n const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n return (\n <input\n ref={ref}\n name={name}\n value={value.join('').trim()}\n autoComplete=\"off\"\n autoFocus={false}\n autoCapitalize=\"off\"\n autoCorrect=\"off\"\n autoSave=\"off\"\n spellCheck={false}\n {...props}\n type=\"hidden\"\n readOnly\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldInputProps extends Omit<\n Primitive.PrimitivePropsWithRef<'input'>,\n | 'value'\n | 'defaultValue'\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'autoFocus'\n | 'form'\n | 'name'\n | 'placeholder'\n | 'type'\n> {\n /**\n * Callback fired when the user input fails native HTML input validation.\n */\n onInvalidChange?: (character: string) => void;\n /**\n * User-provided index to determine the order of the inputs. This is useful if\n * you need certain index-based attributes to be set on the initial render,\n * often to prevent flickering after hydration.\n */\n index?: number;\n}\n\nconst OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n {\n __scopeOneTimePasswordField,\n onInvalidChange,\n index: indexProp,\n ...props\n }: ScopedProps<OneTimePasswordFieldInputProps>,\n forwardedRef,\n) {\n // TODO: warn if these values are passed\n const {\n value: _value,\n defaultValue: _defaultValue,\n disabled: _disabled,\n readOnly: _readOnly,\n autoComplete: _autoComplete,\n autoFocus: _autoFocus,\n form: _form,\n name: _name,\n placeholder: _placeholder,\n type: _type,\n ...domProps\n } = props as Primitive.PrimitivePropsWithRef<'input'>;\n\n const context = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldInput',\n __scopeOneTimePasswordField,\n );\n const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;\n const collection = useCollection(__scopeOneTimePasswordField);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n const index = indexProp ?? (element ? collection.indexOf(element) : -1);\n const canSetPlaceholder = indexProp != null || isHydrated;\n let placeholder: string | undefined;\n if (canSetPlaceholder && context.placeholder && context.value.length === 0) {\n // only set placeholder after hydration to prevent flickering when indices\n // are re-calculated\n placeholder = context.placeholder[index];\n }\n\n const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n const char = context.value[index] ?? '';\n\n const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n React.useEffect(() => {\n return () => {\n if (keyboardActionTimeoutRef.current) {\n window.clearTimeout(keyboardActionTimeoutRef.current);\n }\n };\n }, []);\n\n const totalValue = context.value.join('').trim();\n const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n const isFocusable = index <= lastSelectableIndex;\n\n const validation =\n validationType in INPUT_VALIDATION_MAP\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : undefined;\n\n return (\n <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Item\n {...rovingFocusGroupScope}\n asChild\n focusable={!context.disabled && isFocusable}\n active={index === lastSelectableIndex}\n >\n {({ hasTabStop, isCurrentTabStop }) => {\n const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;\n return (\n <Primitive.Root.input\n ref={composedInputRef}\n type={context.type}\n disabled={disabled}\n aria-label={`Character ${index + 1} of ${collection.size}`}\n autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}\n data-1p-ignore={supportsAutoComplete ? undefined : 'true'}\n data-lpignore={supportsAutoComplete ? undefined : 'true'}\n data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}\n data-bwignore={supportsAutoComplete ? undefined : 'true'}\n inputMode={validation?.inputMode}\n maxLength={supportsAutoComplete ? collection.size : 1}\n pattern={validation?.pattern}\n readOnly={context.readOnly}\n value={char}\n placeholder={placeholder}\n data-radix-otp-input=\"\"\n data-radix-index={index}\n {...domProps}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n event.currentTarget.select();\n })}\n onCut={composeEventHandlers(props.onCut, (event) => {\n const currentValue = event.currentTarget.value;\n if (currentValue !== '') {\n // In this case the value will be cleared, but we don't want to\n // set it directly because the user may want to prevent default\n // behavior in the onChange handler. The userActionRef will\n // be set temporarily so the change handler can behave correctly\n // in response to the action.\n userActionRef.current = { type: 'cut' };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onInput={composeEventHandlers(props.onInput, (event) => {\n const value = event.currentTarget.value;\n if (value.length > 1) {\n // Password managers may try to insert the code into a single\n // input, in which case form validation will fail to prevent\n // additional input. Handle this the same as if a user were\n // pasting a value.\n event.preventDefault();\n userActionRef.current = { type: 'autocomplete-paste' };\n dispatch({ type: 'PASTE', value });\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onChange={composeEventHandlers(props.onChange, (event) => {\n const value = event.target.value;\n event.preventDefault();\n const action = userActionRef.current;\n userActionRef.current = null;\n\n if (action) {\n switch (action.type) {\n case 'cut':\n // TODO: do we want to assume the user wants to clear the\n // entire value here and copy the code to the clipboard instead\n // of just the value of the given input?\n dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n return;\n case 'autocomplete-paste':\n // the PASTE handler will already set the value and focus the final\n // input; we want to skip focusing the wrong element if the browser fires\n // onChange for the first input. This sometimes happens during autocomplete.\n return;\n case 'keydown': {\n if (action.key === 'Char') {\n // update resulting from a keydown event that set a value\n // directly. Ignore.\n return;\n }\n\n const isClearing =\n action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n if (action.key === 'Clear' || isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n }\n return;\n }\n default:\n action satisfies never;\n return;\n }\n }\n\n // Only update the value if it matches the input pattern\n if (event.target.validity.valid) {\n if (value === '') {\n let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n if (isInputEvent(event.nativeEvent)) {\n const inputType = event.nativeEvent.inputType;\n if (inputType === 'deleteContentBackward') {\n reason = 'Backspace';\n } else if (inputType === 'deleteByCut') {\n reason = 'Cut';\n }\n }\n dispatch({ type: 'CLEAR_CHAR', index, reason });\n } else {\n dispatch({ type: 'SET_CHAR', char: value, index, event });\n }\n } else {\n const element = event.target;\n onInvalidChange?.(element.value);\n requestAnimationFrame(() => {\n if (element.ownerDocument.activeElement === element) {\n element.select();\n }\n });\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n switch (event.key) {\n case 'Clear':\n case 'Delete':\n case 'Backspace': {\n const currentValue = event.currentTarget.value;\n // if current value is empty, no change event will fire\n if (currentValue === '') {\n // if the user presses delete when there is no value, noop\n if (event.key === 'Delete') return;\n\n const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;\n if (isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n const element = event.currentTarget;\n requestAnimationFrame(() => {\n focusInput(collection.from(element, -1)?.element);\n });\n }\n } else {\n // In this case the value will be cleared, but we don't want\n // to set it directly because the user may want to prevent\n // default behavior in the onChange handler. The userActionRef\n // will is set temporarily so the change handler can behave\n // correctly in response to the key vs. clearing the value by\n // setting state externally.\n userActionRef.current = {\n type: 'keydown',\n key: event.key,\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n\n return;\n }\n case 'Enter': {\n event.preventDefault();\n context.attemptSubmit();\n return;\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (context.orientation === 'horizontal') {\n // in horizontal orientation, the up/down will de-select the\n // input instead of moving focus\n event.preventDefault();\n }\n return;\n }\n // TODO: Handle left/right arrow keys in vertical writing mode\n default: {\n if (event.currentTarget.value === event.key) {\n // if current value is same as the key press, no change event\n // will fire. Focus the next input.\n const element = event.currentTarget;\n event.preventDefault();\n focusInput(collection.from(element, 1)?.element);\n return;\n } else if (\n // input already has a value, but...\n event.currentTarget.value &&\n // the value is not selected\n !(\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd != null &&\n event.currentTarget.selectionEnd > 0\n )\n ) {\n const attemptedValue = event.key;\n if (event.key.length > 1 || event.key === ' ') {\n // not a character; do nothing\n return;\n } else {\n // user is attempting to enter a character, but the input\n // will not update by default since it's limited to a single\n // character.\n const nextInput = collection.from(event.currentTarget, 1)?.element;\n const lastInput = collection.at(-1)?.element;\n if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n // if selection is before the value, set the value of the\n // current input. Otherwise set the value of the next\n // input.\n if (event.currentTarget.selectionStart === 0) {\n dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n } else {\n dispatch({\n type: 'SET_CHAR',\n char: attemptedValue,\n index: index + 1,\n event,\n });\n }\n\n userActionRef.current = {\n type: 'keydown',\n key: 'Char',\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n }\n }\n }\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n const indexToFocus = Math.min(index, lastSelectableIndex);\n const element = collection.at(indexToFocus)?.element;\n focusInput(element);\n })}\n />\n );\n }}\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n});\n\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n OneTimePasswordField as Root,\n OneTimePasswordFieldInput as Input,\n OneTimePasswordFieldHiddenInput as HiddenInput,\n};\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n return element?.tagName === 'FORM';\n}\n\nfunction removeWhitespace(value: string) {\n return value.replace(/\\s/g, '');\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n if (!element) return;\n if (element.ownerDocument.activeElement === element) {\n // if the element is already focused, select the value in the next\n // animation frame\n window.requestAnimationFrame(() => {\n element.select?.();\n });\n } else {\n element.focus();\n }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n return event.type === 'input';\n}\n\ntype InputType = 'password' | 'text';\ntype AutoComplete = 'off' | 'one-time-code';\ntype KeyboardActionDetails =\n | {\n type: 'keydown';\n key: 'Backspace' | 'Delete' | 'Clear' | 'Char';\n metaKey: boolean;\n ctrlKey: boolean;\n }\n | { type: 'cut' }\n | { type: 'autocomplete-paste' };\n\ntype UpdateAction =\n | {\n type: 'SET_CHAR';\n char: string;\n index: number;\n event: React.KeyboardEvent | React.ChangeEvent;\n }\n | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }\n | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\ntype InputValidation = Record<\n InputValidationType,\n {\n type: InputValidationType;\n regexp: RegExp;\n pattern: string;\n inputMode: 'text' | 'numeric';\n } | null\n>;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gBAA2B;AAC3B,gCAAgC;AAChC,0CAAqC;AACrC,uBAAqC;AACrC,8BAA8D;AAC9D,uBAAkC;AAClC,gCAA4C;AAC5C,mCAA8B;AAC9B,YAAuB;AACvB,uBAA0B;AAE1B,2BAAmC;AACnC,6BAA6B;AAC7B,oBAAsB;AAgdR;AA5cd,IAAM,uBAAuB;AAAA,EAC3B,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AACR;AA4BA,IAAM,+BAA+B;AACrC,IAAM,CAAC,YAAY,EAAE,eAAe,uBAAuB,kBAAkB,CAAC,QAC5E,wBAAAA,2BAAmC,4BAA4B;AACjE,IAAM,CAAC,iCAAiC,QAAI,yCAAmB,8BAA8B;AAAA,EAC3F;AAAA,EACA;AACF,CAAC;AACD,IAAM,+BAA2B,uDAA4B;AAE7D,IAAM,CAAC,6BAA6B,8BAA8B,IAChE,kCAAoE,4BAA4B;AAwHlG,IAAM,uBAAuC,gBAAM;AAAA;AAAA,EAKjD,gCAAS,yBACP;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,IACd;AAAA,IACA,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,wBAAwB,yBAAyB,2BAA2B;AAClF,UAAM,gBAAY,qCAAa,GAAG;AAClC,UAAM,kBAAkB,kBAAkB;AAC1C,UAAM,CAAC,UAAU,IAAI;AAErB,UAAM,aAAa,qBAAqB,cAAc,IAClD,qBAAqB,cAAuC,IAC5D;AAEJ,UAAM,gBAAsB;AAAA,MAC1B,CAACC,WAA6B;AAC5B,YAAI,MAAM,QAAQA,MAAK,GAAG;AACxB,UAAAA,SAAQA,OAAM,IAAI,gBAAgB,EAAE,KAAK,EAAE;AAAA,QAC7C,OAAO;AACL,UAAAA,SAAQ,iBAAiBA,MAAK;AAAA,QAChC;AAEA,YAAI,YAAY;AAEd,gBAAM,SAAS,IAAI,OAAO,WAAW,MAAM;AAC3C,UAAAA,SAAQA,OAAM,QAAQ,QAAQ,EAAE;AAAA,QAClC,WAAW,mBAAmB;AAC5B,UAAAA,SAAQ,kBAAkBA,MAAK;AAAA,QACjC;AAEA,eAAOA,OAAM,MAAM,EAAE;AAAA,MACvB;AAAA,MACA,CAAC,YAAY,iBAAiB;AAAA,IAChC;AAEA,UAAM,kBAAwB,cAAQ,MAAM;AAC1C,aAAO,aAAa,OAAO,cAAc,SAAS,IAAI;AAAA,IACxD,GAAG,CAAC,WAAW,aAAa,CAAC;AAE7B,UAAM,CAAC,OAAO,QAAQ,QAAI,0DAAqB;AAAA,MAC7C,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,aAAa,gBAAgB,OAAO,cAAc,YAAY,IAAI,CAAC;AAAA,MACnE,UAAgB;AAAA,QACd,CAACA,WAAoB,gBAAgBA,OAAM,KAAK,EAAE,CAAC;AAAA,QACnD,CAAC,aAAa;AAAA,MAChB;AAAA,IACF,CAAC;AAKD,UAAM,iBAAuB,aAAO,KAAK;AACzC,mBAAe,UAAU;AAGzB,UAAM,WAAiB;AAAA,MACrB,CAAC,WAAW;AACV,cAAMA,SAAQ,eAAe;AAC7B,gBAAQ,OAAO,MAAM;AAAA,UACnB,KAAK,YAAY;AACf,kBAAM,EAAE,OAAO,KAAK,IAAI;AACxB,kBAAM,gBAAgB,WAAW,GAAG,KAAK,GAAG;AAC5C,gBAAIA,OAAM,KAAK,MAAM,MAAM;AACzB,oBAAM,OAAO,iBAAiB,WAAW,KAAK,eAAe,CAAC,GAAG;AACjE,yBAAW,IAAI;AACf;AAAA,YACF;AAGA,gBAAI,SAAS,IAAI;AACf;AAAA,YACF;AAEA,gBAAI,YAAY;AACd,oBAAM,SAAS,IAAI,OAAO,WAAW,MAAM;AAC3C,oBAAM,QAAQ,KAAK,QAAQ,QAAQ,EAAE;AACrC,kBAAI,UAAU,MAAM;AAElB;AAAA,cACF;AAAA,YACF;AAGA,gBAAIA,OAAM,UAAU,WAAW,MAAM;AAEnC,oBAAMC,YAAW,CAAC,GAAGD,MAAK;AAC1B,cAAAC,UAAS,KAAK,IAAI;AAClB,8CAAU,MAAM,SAASA,SAAQ,CAAC;AAClC,oBAAM,OAAO,iBAAiB,WAAW,KAAK,eAAe,CAAC,GAAG;AACjE,yBAAW,IAAI;AACf;AAAA,YACF;AAEA,kBAAM,WAAW,CAAC,GAAGD,MAAK;AAC1B,qBAAS,KAAK,IAAI;AAElB,kBAAM,cAAc,WAAW,GAAG,EAAE,GAAG;AACvC,4CAAU,MAAM,SAAS,QAAQ,CAAC;AAClC,gBAAI,kBAAkB,aAAa;AACjC,oBAAM,OAAO,iBAAiB,WAAW,KAAK,eAAe,CAAC,GAAG;AACjE,yBAAW,IAAI;AAAA,YACjB,OAAO;AACL,6BAAe,OAAO;AAAA,YACxB;AACA;AAAA,UACF;AAAA,UAEA,KAAK,cAAc;AACjB,kBAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,gBAAI,CAACA,OAAM,KAAK,GAAG;AACjB;AAAA,YACF;AAEA,kBAAM,WAAWA,OAAM,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AACnD,kBAAM,gBAAgB,WAAW,GAAG,KAAK,GAAG;AAC5C,kBAAM,WAAW,iBAAiB,WAAW,KAAK,eAAe,EAAE,GAAG;AAEtE,4CAAU,MAAM,SAAS,QAAQ,CAAC;AAClC,gBAAI,WAAW,aAAa;AAC1B,yBAAW,QAAQ;AAAA,YACrB,WAAW,WAAW,YAAY,WAAW,OAAO;AAClD,yBAAW,aAAa;AAAA,YAC1B;AACA;AAAA,UACF;AAAA,UAEA,KAAK,SAAS;AACZ,gBAAIA,OAAM,WAAW,GAAG;AACtB;AAAA,YACF;AAEA,gBAAI,OAAO,WAAW,eAAe,OAAO,WAAW,UAAU;AAC/D,8CAAU,MAAM,SAAS,CAAC,CAAC,CAAC;AAC5B,yBAAW,WAAW,GAAG,CAAC,GAAG,OAAO;AAAA,YACtC,OAAO;AACL,uBAAS,CAAC,CAAC;AAAA,YACb;AACA;AAAA,UACF;AAAA,UAEA,KAAK,SAAS;AACZ,kBAAM,EAAE,OAAO,YAAY,IAAI;AAC/B,kBAAM,iBAAiB,cAAc,WAAW;AAChD,gBAAI,CAAC,gBAAgB;AACnB;AAAA,YACF;AAEA,kBAAMA,SAAQ,eAAe,MAAM,GAAG,WAAW,IAAI;AAErD,4CAAU,MAAM,SAASA,MAAK,CAAC;AAC/B,uBAAW,WAAW,GAAGA,OAAM,SAAS,CAAC,GAAG,OAAO;AACnD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,eAAe,UAAU,UAAU;AAAA,IAClD;AAGA,UAAM,oBAA0B,aAAO,UAAU;AACjD,IAAM,gBAAU,MAAM;AACpB,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AAEA,UAAI,kBAAkB,SAAS,SAAS,WAAW,MAAM;AACvD,0BAAkB,UAAU;AAC5B,iBAAS,cAAc,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,MACxC;AAAA,IACF,GAAG,CAAC,eAAe,UAAU,YAAY,KAAK,CAAC;AAE/C,UAAM,iBAAuB,aAAyB,IAAI;AAE1D,UAAM,gBAAsB,aAAqC,IAAI;AACrE,UAAM,UAAgB,aAA8B,IAAI;AACxD,UAAM,mBAAe,2CAAgB,cAAc,OAAO;AAE1D,UAAM,aAAa,WAAW,GAAG,CAAC,GAAG;AACrC,UAAM,aAAmB,kBAAY,MAAM;AACzC,UAAI;AACJ,UAAI,MAAM;AACR,cAAM,qBAAqB,QAAQ,SAAS,iBAAiB,UAAU,eAAe,IAAI;AAC1F,YAAI,cAAc,iBAAiB,GAAG;AACpC,wBAAc;AAAA,QAChB;AAAA,MACF,WAAW,eAAe,SAAS;AACjC,sBAAc,eAAe,QAAQ;AAAA,MACvC,WAAW,YAAY;AACrB,sBAAc,WAAW;AAAA,MAC3B;AAEA,aAAO,eAAe;AAAA,IACxB,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,UAAM,gBAAsB,kBAAY,MAAM;AAC5C,YAAM,cAAc,WAAW;AAC/B,mBAAa,cAAc;AAAA,IAC7B,GAAG,CAAC,UAAU,CAAC;AAEf,IAAM,gBAAU,MAAM;AACpB,YAAME,QAAO,WAAW;AACxB,UAAIA,OAAM;AACR,cAAM,QAAQ,6BAAM,SAAS,EAAE,MAAM,SAAS,QAAQ,QAAQ,CAAC,GAAjD;AACd,QAAAA,MAAK,iBAAiB,SAAS,KAAK;AACpC,eAAO,MAAMA,MAAK,oBAAoB,SAAS,KAAK;AAAA,MACtD;AAAA,IACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,UAAM,eAAe,MAAM,KAAK,EAAE;AAClC,UAAM,WAAiB,aAAO,YAAY;AAC1C,UAAM,SAAS,WAAW;AAC1B,IAAM,gBAAU,MAAM;AACpB,YAAM,gBAAgB,SAAS;AAC/B,eAAS,UAAU;AACnB,UAAI,kBAAkB,cAAc;AAClC;AAAA,MACF;AAEA,UAAI,cAAc,MAAM,MAAM,CAAC,SAAS,SAAS,EAAE,KAAK,MAAM,WAAW,QAAQ;AAC/E,uBAAe,MAAM,KAAK,EAAE,CAAC;AAC7B,sBAAc;AAAA,MAChB;AAAA,IACF,GAAG,CAAC,eAAe,YAAY,cAAc,QAAQ,cAAc,KAAK,CAAC;AACzE,UAAM,iBAAa,4CAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,sDAAC,WAAW,UAAX,EAAoB,OAAO,6BAA6B,OAAO,iBAC9D,sDAAC,WAAW,MAAX,EAAgB,OAAO,6BACtB;AAAA,UAAkB;AAAA,UAAjB;AAAA,YACC,SAAO;AAAA,YACN,GAAG;AAAA,YACJ;AAAA,YACA,KAAK;AAAA,YAEL;AAAA,cAAW,eAAK;AAAA,cAAf;AAAA,gBACE,GAAG;AAAA,gBACJ,MAAK;AAAA,gBACL,KAAK;AAAA,gBACL,aAAS;AAAA,kBACP;AAAA,kBACA,CAAC,UAAgD;AAC/C,0BAAM,eAAe;AACrB,0BAAM,cAAc,MAAM,cAAc,QAAQ,YAAY;AAC5D,6BAAS,EAAE,MAAM,SAAS,OAAO,YAAY,CAAC;AAAA,kBAChD;AAAA,gBACF;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,GAzSA;AA0SF;AAkBA,IAAM,kCAAkD,gBAAM,iBAG5D,gCAASC,iCACT,EAAE,6BAA6B,GAAG,MAAM,GACxC,cACA;AACA,QAAM,EAAE,OAAO,gBAAgB,KAAK,IAAI;AAAA,IACtC;AAAA,IACA;AAAA,EACF;AACA,QAAM,UAAM,2CAAgB,gBAAgB,YAAY;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,MAAM,KAAK,EAAE,EAAE,KAAK;AAAA,MAC3B,cAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,YAAY;AAAA,MACX,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,UAAQ;AAAA;AAAA,EACV;AAEJ,GAzBE,kCAyBD;AA+BD,IAAM,4BAA4C,gBAAM,iBAGtD,gCAASC,2BACT;AAAA,EACE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,cACA;AAEA,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM;AAAA,IACN,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,UAAU,eAAe,gBAAgB,YAAY,SAAS,IAAI;AAC1E,QAAM,aAAa,cAAc,2BAA2B;AAC5D,QAAM,wBAAwB,yBAAyB,2BAA2B;AAElF,QAAM,WAAiB,aAAyB,IAAI;AACpD,QAAM,CAAC,SAAS,UAAU,IAAU,eAAkC,IAAI;AAE1E,QAAM,QAAQ,cAAc,UAAU,WAAW,QAAQ,OAAO,IAAI;AACpE,QAAM,oBAAoB,aAAa,QAAQ;AAC/C,MAAI;AACJ,MAAI,qBAAqB,QAAQ,eAAe,QAAQ,MAAM,WAAW,GAAG;AAG1E,kBAAc,QAAQ,YAAY,KAAK;AAAA,EACzC;AAEA,QAAM,uBAAmB,2CAAgB,cAAc,UAAU,UAAU;AAC3E,QAAM,OAAO,QAAQ,MAAM,KAAK,KAAK;AAErC,QAAM,2BAAiC,aAAsB,IAAI;AACjE,EAAM,gBAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,yBAAyB,SAAS;AACpC,eAAO,aAAa,yBAAyB,OAAO;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,QAAQ,MAAM,KAAK,EAAE,EAAE,KAAK;AAC/C,QAAM,0BAAsB,qBAAM,WAAW,QAAQ,CAAC,GAAG,WAAW,OAAO,CAAC,CAAC;AAC7E,QAAM,cAAc,SAAS;AAE7B,QAAM,aACJ,kBAAkB,uBACd,qBAAqB,cAAuC,IAC5D;AAEN,SACE,4CAAC,WAAW,UAAX,EAAoB,OAAO,6BAC1B;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACE,GAAG;AAAA,MACJ,SAAO;AAAA,MACP,WAAW,CAAC,QAAQ,YAAY;AAAA,MAChC,QAAQ,UAAU;AAAA,MAEjB,WAAC,EAAE,YAAY,iBAAiB,MAAM;AACrC,cAAM,uBAAuB,aAAa,mBAAmB,UAAU;AACvE,eACE;AAAA,UAAW,eAAK;AAAA,UAAf;AAAA,YACC,KAAK;AAAA,YACL,MAAM,QAAQ;AAAA,YACd;AAAA,YACA,cAAY,aAAa,QAAQ,CAAC,OAAO,WAAW,IAAI;AAAA,YACxD,cAAc,uBAAuB,QAAQ,eAAe;AAAA,YAC5D,kBAAgB,uBAAuB,SAAY;AAAA,YACnD,iBAAe,uBAAuB,SAAY;AAAA,YAClD,0BAAwB,uBAAuB,SAAY;AAAA,YAC3D,iBAAe,uBAAuB,SAAY;AAAA,YAClD,WAAW,YAAY;AAAA,YACvB,WAAW,uBAAuB,WAAW,OAAO;AAAA,YACpD,SAAS,YAAY;AAAA,YACrB,UAAU,QAAQ;AAAA,YAClB,OAAO;AAAA,YACP;AAAA,YACA,wBAAqB;AAAA,YACrB,oBAAkB;AAAA,YACjB,GAAG;AAAA,YACJ,aAAS,uCAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,oBAAM,cAAc,OAAO;AAAA,YAC7B,CAAC;AAAA,YACD,WAAO,uCAAqB,MAAM,OAAO,CAAC,UAAU;AAClD,oBAAM,eAAe,MAAM,cAAc;AACzC,kBAAI,iBAAiB,IAAI;AAMvB,8BAAc,UAAU,EAAE,MAAM,MAAM;AAGtC,yCAAyB,UAAU,OAAO,WAAW,MAAM;AACzD,gCAAc,UAAU;AAAA,gBAC1B,GAAG,EAAE;AAAA,cACP;AAAA,YACF,CAAC;AAAA,YACD,aAAS,uCAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,oBAAM,QAAQ,MAAM,cAAc;AAClC,kBAAI,MAAM,SAAS,GAAG;AAKpB,sBAAM,eAAe;AACrB,8BAAc,UAAU,EAAE,MAAM,qBAAqB;AACrD,yBAAS,EAAE,MAAM,SAAS,MAAM,CAAC;AACjC,yCAAyB,UAAU,OAAO,WAAW,MAAM;AACzD,gCAAc,UAAU;AAAA,gBAC1B,GAAG,EAAE;AAAA,cACP;AAAA,YACF,CAAC;AAAA,YACD,cAAU,uCAAqB,MAAM,UAAU,CAAC,UAAU;AACxD,oBAAM,QAAQ,MAAM,OAAO;AAC3B,oBAAM,eAAe;AACrB,oBAAM,SAAS,cAAc;AAC7B,4BAAc,UAAU;AAExB,kBAAI,QAAQ;AACV,wBAAQ,OAAO,MAAM;AAAA,kBACnB,KAAK;AAIH,6BAAS,EAAE,MAAM,cAAc,OAAO,QAAQ,MAAM,CAAC;AACrD;AAAA,kBACF,KAAK;AAIH;AAAA,kBACF,KAAK,WAAW;AACd,wBAAI,OAAO,QAAQ,QAAQ;AAGzB;AAAA,oBACF;AAEA,0BAAM,aACJ,OAAO,QAAQ,gBAAgB,OAAO,WAAW,OAAO;AAC1D,wBAAI,OAAO,QAAQ,WAAW,YAAY;AACxC,+BAAS,EAAE,MAAM,SAAS,QAAQ,YAAY,CAAC;AAAA,oBACjD,OAAO;AACL,+BAAS,EAAE,MAAM,cAAc,OAAO,QAAQ,OAAO,IAAI,CAAC;AAAA,oBAC5D;AACA;AAAA,kBACF;AAAA,kBACA;AACE;AACA;AAAA,gBACJ;AAAA,cACF;AAGA,kBAAI,MAAM,OAAO,SAAS,OAAO;AAC/B,oBAAI,UAAU,IAAI;AAChB,sBAAI,SAAyC;AAC7C,sBAAI,aAAa,MAAM,WAAW,GAAG;AACnC,0BAAM,YAAY,MAAM,YAAY;AACpC,wBAAI,cAAc,yBAAyB;AACzC,+BAAS;AAAA,oBACX,WAAW,cAAc,eAAe;AACtC,+BAAS;AAAA,oBACX;AAAA,kBACF;AACA,2BAAS,EAAE,MAAM,cAAc,OAAO,OAAO,CAAC;AAAA,gBAChD,OAAO;AACL,2BAAS,EAAE,MAAM,YAAY,MAAM,OAAO,OAAO,MAAM,CAAC;AAAA,gBAC1D;AAAA,cACF,OAAO;AACL,sBAAMC,WAAU,MAAM;AACtB,kCAAkBA,SAAQ,KAAK;AAC/B,sCAAsB,MAAM;AAC1B,sBAAIA,SAAQ,cAAc,kBAAkBA,UAAS;AACnD,oBAAAA,SAAQ,OAAO;AAAA,kBACjB;AAAA,gBACF,CAAC;AAAA,cACH;AAAA,YACF,CAAC;AAAA,YACD,eAAW,uCAAqB,MAAM,WAAW,CAAC,UAAU;AAC1D,sBAAQ,MAAM,KAAK;AAAA,gBACjB,KAAK;AAAA,gBACL,KAAK;AAAA,gBACL,KAAK,aAAa;AAChB,wBAAM,eAAe,MAAM,cAAc;AAEzC,sBAAI,iBAAiB,IAAI;AAEvB,wBAAI,MAAM,QAAQ,SAAU;AAE5B,0BAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,WAAW,MAAM;AACnE,wBAAI,YAAY;AACd,+BAAS,EAAE,MAAM,SAAS,QAAQ,YAAY,CAAC;AAAA,oBACjD,OAAO;AACL,4BAAMA,WAAU,MAAM;AACtB,4CAAsB,MAAM;AAC1B,mCAAW,WAAW,KAAKA,UAAS,EAAE,GAAG,OAAO;AAAA,sBAClD,CAAC;AAAA,oBACH;AAAA,kBACF,OAAO;AAOL,kCAAc,UAAU;AAAA,sBACtB,MAAM;AAAA,sBACN,KAAK,MAAM;AAAA,sBACX,SAAS,MAAM;AAAA,sBACf,SAAS,MAAM;AAAA,oBACjB;AAGA,6CAAyB,UAAU,OAAO,WAAW,MAAM;AACzD,oCAAc,UAAU;AAAA,oBAC1B,GAAG,EAAE;AAAA,kBACP;AAEA;AAAA,gBACF;AAAA,gBACA,KAAK,SAAS;AACZ,wBAAM,eAAe;AACrB,0BAAQ,cAAc;AACtB;AAAA,gBACF;AAAA,gBACA,KAAK;AAAA,gBACL,KAAK,WAAW;AACd,sBAAI,QAAQ,gBAAgB,cAAc;AAGxC,0BAAM,eAAe;AAAA,kBACvB;AACA;AAAA,gBACF;AAAA;AAAA,gBAEA,SAAS;AACP,sBAAI,MAAM,cAAc,UAAU,MAAM,KAAK;AAG3C,0BAAMA,WAAU,MAAM;AACtB,0BAAM,eAAe;AACrB,+BAAW,WAAW,KAAKA,UAAS,CAAC,GAAG,OAAO;AAC/C;AAAA,kBACF;AAAA;AAAA,oBAEE,MAAM,cAAc;AAAA,oBAEpB,EACE,MAAM,cAAc,mBAAmB,KACvC,MAAM,cAAc,gBAAgB,QACpC,MAAM,cAAc,eAAe;AAAA,oBAErC;AACA,0BAAM,iBAAiB,MAAM;AAC7B,wBAAI,MAAM,IAAI,SAAS,KAAK,MAAM,QAAQ,KAAK;AAE7C;AAAA,oBACF,OAAO;AAIL,4BAAM,YAAY,WAAW,KAAK,MAAM,eAAe,CAAC,GAAG;AAC3D,4BAAM,YAAY,WAAW,GAAG,EAAE,GAAG;AACrC,0BAAI,cAAc,aAAa,MAAM,kBAAkB,WAAW;AAIhE,4BAAI,MAAM,cAAc,mBAAmB,GAAG;AAC5C,mCAAS,EAAE,MAAM,YAAY,MAAM,gBAAgB,OAAO,MAAM,CAAC;AAAA,wBACnE,OAAO;AACL,mCAAS;AAAA,4BACP,MAAM;AAAA,4BACN,MAAM;AAAA,4BACN,OAAO,QAAQ;AAAA,4BACf;AAAA,0BACF,CAAC;AAAA,wBACH;AAEA,sCAAc,UAAU;AAAA,0BACtB,MAAM;AAAA,0BACN,KAAK;AAAA,0BACL,SAAS,MAAM;AAAA,0BACf,SAAS,MAAM;AAAA,wBACjB;AACA,iDAAyB,UAAU,OAAO,WAAW,MAAM;AACzD,wCAAc,UAAU;AAAA,wBAC1B,GAAG,EAAE;AAAA,sBACP;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,YACD,mBAAe,uCAAqB,MAAM,eAAe,CAAC,UAAU;AAClE,oBAAM,eAAe;AACrB,oBAAM,eAAe,KAAK,IAAI,OAAO,mBAAmB;AACxD,oBAAMA,WAAU,WAAW,GAAG,YAAY,GAAG;AAC7C,yBAAWA,QAAO;AAAA,YACpB,CAAC;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF,GACF;AAEJ,GAnUE,4BAmUD;AAoBD,SAAS,cAAc,SAAiE;AACtF,SAAO,SAAS,YAAY;AAC9B;AAFS;AAIT,SAAS,iBAAiB,OAAe;AACvC,SAAO,MAAM,QAAQ,OAAO,EAAE;AAChC;AAFS;AAIT,SAAS,WAAW,SAA8C;AAChE,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,cAAc,kBAAkB,SAAS;AAGnD,WAAO,sBAAsB,MAAM;AACjC,cAAQ,SAAS;AAAA,IACnB,CAAC;AAAA,EACH,OAAO;AACL,YAAQ,MAAM;AAAA,EAChB;AACF;AAXS;AAaT,SAAS,aAAa,OAAmC;AACvD,SAAO,MAAM,SAAS;AACxB;AAFS;",
4
+ "sourcesContent": ["'use client';\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n} from './one-time-password-field';\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n Root,\n Input,\n HiddenInput,\n} from './one-time-password-field';\n", "import * as Primitive from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\n\nconst InputValidationType = {\n Alpha: 'alpha',\n Numeric: 'numeric',\n Alphanumeric: 'alphanumeric',\n None: 'none',\n} as const;\n\nconst InputType = {\n Password: 'password',\n Text: 'text',\n} as const;\n\nconst AutoComplete = {\n Off: 'off',\n OneTimeCode: 'one-time-code',\n} as const;\n\ntype InputValidationType = (typeof InputValidationType)[keyof typeof InputValidationType];\ntype InputType = (typeof InputType)[keyof typeof InputType];\ntype AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];\n\nconst INPUT_VALIDATION_MAP = {\n numeric: {\n type: InputValidationType.Numeric,\n regexp: /[^\\d]/g,\n pattern: '\\\\d{1}',\n inputMode: 'numeric',\n },\n alpha: {\n type: InputValidationType.Alpha,\n regexp: /[^a-zA-Z]/g,\n pattern: '[a-zA-Z]{1}',\n inputMode: 'text',\n },\n alphanumeric: {\n type: InputValidationType.Alphanumeric,\n regexp: /[^a-zA-Z0-9]/g,\n pattern: '[a-zA-Z0-9]{1}',\n inputMode: 'text',\n },\n none: null,\n} satisfies InputValidation;\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;\n\ninterface OneTimePasswordFieldContextValue {\n attemptSubmit: () => void;\n autoComplete: AutoComplete;\n autoFocus: boolean;\n disabled: boolean;\n dispatch: Dispatcher;\n form: string | undefined;\n hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n isHydrated: boolean;\n name: string | undefined;\n orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n placeholder: string | undefined;\n readOnly: boolean;\n type: InputType;\n userActionRef: React.RefObject<KeyboardActionDetails | null>;\n validationType: InputValidationType;\n value: string[];\n sanitizeValue: (arg: string | string[]) => string[];\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, { useCollection, createCollectionScope, useInitCollection }] =\n createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordField\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldOwnProps {\n /**\n * Specifies what\u2014if any\u2014permission the user agent has to provide automated\n * assistance in filling out form field values, as well as guidance to the\n * browser as to the type of information expected in the field. Allows\n * `\"one-time-code\"` or `\"off\"`.\n *\n * @defaultValue `\"one-time-code\"`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\n */\n autoComplete?: AutoComplete;\n /**\n * Whether or not the first fillable input should be focused on page-load.\n *\n * @defaultValue `false`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus\n */\n autoFocus?: boolean;\n /**\n * Whether or not the component should attempt to automatically submit when\n * all fields are filled. If the field is associated with an HTML `form`\n * element, the form's `requestSubmit` method will be called.\n *\n * @defaultValue `false`\n */\n autoSubmit?: boolean;\n /**\n * The initial value of the uncontrolled field.\n */\n defaultValue?: string;\n /**\n * Indicates the horizontal directionality of the parent element's text.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether or not the the field's input elements are disabled.\n */\n disabled?: boolean;\n /**\n * A string specifying the `form` element with which the input is associated.\n * This string's value, if present, must match the id of a `form` element in\n * the same document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form\n */\n form?: string | undefined;\n /**\n * A string specifying a name for the input control. This name is submitted\n * along with the control's value when the form data is submitted.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name\n */\n name?: string | undefined;\n /**\n * When the `autoSubmit` prop is set to `true`, this callback will be fired\n * before attempting to submit the associated form. It will be called whether\n * or not a form is located, or if submission is not allowed.\n */\n onAutoSubmit?: (value: string) => void;\n /**\n * A callback fired when the field's value changes. When the component is\n * controlled, this should update the state passed to the `value` prop.\n */\n onValueChange?: (value: string) => void;\n /**\n * Indicates the vertical directionality of the input elements.\n *\n * @defaultValue `\"horizontal\"`\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * Defines the text displayed in a form control when the control has no value.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder\n */\n placeholder?: string | undefined;\n /**\n * Whether or not the input elements can be updated by the user.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly\n */\n readOnly?: boolean;\n /**\n * Function for custom sanitization when `validationType` is set to `\"none\"`.\n * This function will be called before updating values in response to user\n * interactions.\n */\n sanitizeValue?: (value: string) => string;\n /**\n * The input type of the field's input elements. Can be `\"password\"` or `\"text\"`.\n */\n type?: InputType;\n /**\n * Specifies the type of input validation to be used. Can be `\"alpha\"`,\n * `\"numeric\"`, `\"alphanumeric\"` or `\"none\"`.\n *\n * @defaultValue `\"numeric\"`\n */\n validationType?: InputValidationType;\n /**\n * The controlled value of the field.\n */\n value?: string;\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\ninterface OneTimePasswordFieldProps\n extends\n OneTimePasswordFieldOwnProps,\n Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}\n\nconst OneTimePasswordField = /* @__PURE__ */ React.forwardRef<\n HTMLDivElement,\n OneTimePasswordFieldProps\n>(\n // blank line to reduce diff noise\n function OneTimePasswordFieldImpl(\n {\n __scopeOneTimePasswordField,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit = false,\n children,\n onPaste,\n onAutoSubmit,\n disabled = false,\n readOnly = false,\n autoComplete = AutoComplete.OneTimeCode,\n autoFocus = false,\n form,\n name,\n placeholder,\n type = InputType.Text,\n // TODO: Change default to vertical when inputs use vertical writing mode\n orientation = 'horizontal',\n dir,\n validationType = InputValidationType.Numeric,\n sanitizeValue: sanitizeValueProp,\n ...domProps\n }: ScopedProps<OneTimePasswordFieldProps>,\n forwardedRef,\n ) {\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n const direction = useDirection(dir);\n const collectionState = useInitCollection();\n const [collection] = collectionState;\n\n const validation = INPUT_VALIDATION_MAP[validationType]\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : null;\n\n const sanitizeValue = React.useCallback(\n (value: string | string[]) => {\n if (Array.isArray(value)) {\n value = value.map(removeWhitespace).join('');\n } else {\n value = removeWhitespace(value);\n }\n\n if (validation) {\n // global regexp is stateful, so we clone it for each call\n const regexp = new RegExp(validation.regexp);\n value = value.replace(regexp, '');\n } else if (sanitizeValueProp) {\n value = sanitizeValueProp(value);\n }\n\n return value.split('');\n },\n [validation, sanitizeValueProp],\n );\n\n const controlledValue = React.useMemo(() => {\n return valueProp != null ? sanitizeValue(valueProp) : undefined;\n }, [valueProp, sanitizeValue]);\n\n const [value, setValue] = useControllableState({\n caller: 'OneTimePasswordField',\n prop: controlledValue,\n defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],\n onChange: React.useCallback(\n (value: string[]) => onValueChange?.(value.join('')),\n [onValueChange],\n ),\n });\n\n // Use a ref so dispatch always reads the latest value without needing\n // value in its dependency array (which would change its identity every\n // keystroke and cause cascading effect re-runs).\n const latestValueRef = React.useRef(value);\n latestValueRef.current = value;\n\n // Update function *specifically* for event handlers.\n const dispatch = React.useCallback<Dispatcher>(\n (action) => {\n const value = latestValueRef.current;\n switch (action.type) {\n case 'SET_CHAR': {\n const { index, char } = action;\n const currentTarget = collection.at(index)?.element;\n if (value[index] === char) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n // empty values should be handled in the CLEAR_CHAR action\n if (char === '') {\n return;\n }\n\n if (validation) {\n const regexp = new RegExp(validation.regexp);\n const clean = char.replace(regexp, '');\n if (clean !== char) {\n // not valid; ignore\n return;\n }\n }\n\n // no more space\n if (value.length >= collection.size) {\n // replace current value; move to next input\n const newValue = [...value];\n newValue[index] = char;\n flushSync(() => setValue(newValue));\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n const newValue = [...value];\n newValue[index] = char;\n\n const lastElement = collection.at(-1)?.element;\n flushSync(() => setValue(newValue));\n if (currentTarget !== lastElement) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n } else {\n currentTarget?.select();\n }\n return;\n }\n\n case 'CLEAR_CHAR': {\n const { index, reason } = action;\n if (!value[index]) {\n return;\n }\n\n const newValue = value.filter((_, i) => i !== index);\n const currentTarget = collection.at(index)?.element;\n const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n flushSync(() => setValue(newValue));\n if (reason === 'Backspace') {\n focusInput(previous);\n } else if (reason === 'Delete' || reason === 'Cut') {\n focusInput(currentTarget);\n }\n return;\n }\n\n case 'CLEAR': {\n if (value.length === 0) {\n return;\n }\n\n if (action.reason === 'Backspace' || action.reason === 'Delete') {\n flushSync(() => setValue([]));\n focusInput(collection.at(0)?.element);\n } else {\n setValue([]);\n }\n return;\n }\n\n case 'PASTE': {\n const { value: pastedValue } = action;\n const sanitizedValue = sanitizeValue(pastedValue);\n if (!sanitizedValue) {\n return;\n }\n\n const value = sanitizedValue.slice(0, collection.size);\n\n flushSync(() => setValue(value));\n focusInput(collection.at(value.length - 1)?.element);\n return;\n }\n }\n },\n [collection, sanitizeValue, setValue, validation],\n );\n\n // re-validate when the validation type changes\n const validationTypeRef = React.useRef(validation);\n React.useEffect(() => {\n if (!validation) {\n return;\n }\n\n if (validationTypeRef.current?.type !== validation.type) {\n validationTypeRef.current = validation;\n setValue(sanitizeValue(value.join('')));\n }\n }, [sanitizeValue, setValue, validation, value]);\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n const firstInput = collection.at(0)?.element;\n const locateForm = React.useCallback(() => {\n let formElement: HTMLFormElement | null | undefined;\n if (form) {\n const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n if (isFormElement(associatedElement)) {\n formElement = associatedElement;\n }\n } else if (hiddenInputRef.current) {\n formElement = hiddenInputRef.current.form;\n } else if (firstInput) {\n formElement = firstInput.form;\n }\n\n return formElement ?? null;\n }, [form, firstInput]);\n\n const attemptSubmit = React.useCallback(() => {\n const formElement = locateForm();\n formElement?.requestSubmit();\n }, [locateForm]);\n\n React.useEffect(() => {\n const form = locateForm();\n if (form) {\n const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [dispatch, locateForm]);\n\n const currentValue = value.join('');\n const valueRef = React.useRef(currentValue);\n const length = collection.size;\n React.useEffect(() => {\n const previousValue = valueRef.current;\n valueRef.current = currentValue;\n if (previousValue === currentValue) {\n return;\n }\n\n if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n onAutoSubmit?.(value.join(''));\n attemptSubmit();\n }\n }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n const isHydrated = useIsHydrated();\n\n return (\n <OneTimePasswordFieldContext\n scope={__scopeOneTimePasswordField}\n value={value}\n attemptSubmit={attemptSubmit}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n form={form}\n name={name}\n placeholder={placeholder}\n type={type}\n hiddenInputRef={hiddenInputRef}\n userActionRef={userActionRef}\n dispatch={dispatch}\n validationType={validationType}\n orientation={orientation}\n isHydrated={isHydrated}\n sanitizeValue={sanitizeValue}\n >\n <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>\n <Collection.Slot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n >\n <Primitive.Root.div\n {...domProps}\n role=\"group\"\n ref={composedRefs}\n onPaste={composeEventHandlers(\n onPaste,\n (event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text/plain');\n dispatch({ type: 'PASTE', value: pastedValue });\n },\n )}\n >\n {children}\n </Primitive.Root.div>\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </OneTimePasswordFieldContext>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldHiddenInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldHiddenInputProps extends Omit<\n React.ComponentProps<'input'>,\n | keyof 'value'\n | 'defaultValue'\n | 'type'\n | 'onChange'\n | 'readOnly'\n | 'disabled'\n | 'autoComplete'\n | 'autoFocus'\n> {}\n\nconst OneTimePasswordFieldHiddenInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n forwardedRef,\n) {\n const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldHiddenInput',\n __scopeOneTimePasswordField,\n );\n const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n return (\n <input\n ref={ref}\n name={name}\n value={value.join('').trim()}\n autoComplete=\"off\"\n autoFocus={false}\n autoCapitalize=\"off\"\n autoCorrect=\"off\"\n autoSave=\"off\"\n spellCheck={false}\n {...props}\n type=\"hidden\"\n readOnly\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldInputProps extends Omit<\n Primitive.PrimitivePropsWithRef<'input'>,\n | 'value'\n | 'defaultValue'\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'autoFocus'\n | 'form'\n | 'name'\n | 'placeholder'\n | 'type'\n> {\n /**\n * Callback fired when the user input fails native HTML input validation.\n */\n onInvalidChange?: (character: string) => void;\n /**\n * User-provided index to determine the order of the inputs. This is useful if\n * you need certain index-based attributes to be set on the initial render,\n * often to prevent flickering after hydration.\n */\n index?: number;\n}\n\nconst OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n {\n __scopeOneTimePasswordField,\n onInvalidChange,\n index: indexProp,\n ...props\n }: ScopedProps<OneTimePasswordFieldInputProps>,\n forwardedRef,\n) {\n // TODO: warn if these values are passed\n const {\n value: _value,\n defaultValue: _defaultValue,\n disabled: _disabled,\n readOnly: _readOnly,\n autoComplete: _autoComplete,\n autoFocus: _autoFocus,\n form: _form,\n name: _name,\n placeholder: _placeholder,\n type: _type,\n ...domProps\n } = props as Primitive.PrimitivePropsWithRef<'input'>;\n\n const context = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldInput',\n __scopeOneTimePasswordField,\n );\n const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;\n const collection = useCollection(__scopeOneTimePasswordField);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n const index = indexProp ?? (element ? collection.indexOf(element) : -1);\n const canSetPlaceholder = indexProp != null || isHydrated;\n let placeholder: string | undefined;\n if (canSetPlaceholder && context.placeholder && context.value.length === 0) {\n // only set placeholder after hydration to prevent flickering when indices\n // are re-calculated\n placeholder = context.placeholder[index];\n }\n\n const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n const char = context.value[index] ?? '';\n\n const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n React.useEffect(() => {\n return () => {\n if (keyboardActionTimeoutRef.current) {\n window.clearTimeout(keyboardActionTimeoutRef.current);\n }\n };\n }, []);\n\n const totalValue = context.value.join('').trim();\n const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n const isFocusable = index <= lastSelectableIndex;\n\n const validation =\n validationType in INPUT_VALIDATION_MAP\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : undefined;\n\n return (\n <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Item\n {...rovingFocusGroupScope}\n asChild\n focusable={!context.disabled && isFocusable}\n active={index === lastSelectableIndex}\n >\n {({ hasTabStop, isCurrentTabStop }) => {\n const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;\n return (\n <Primitive.Root.input\n ref={composedInputRef}\n type={context.type}\n disabled={disabled}\n aria-label={`Character ${index + 1} of ${collection.size}`}\n autoComplete={supportsAutoComplete ? context.autoComplete : AutoComplete.Off}\n data-1p-ignore={supportsAutoComplete ? undefined : 'true'}\n data-lpignore={supportsAutoComplete ? undefined : 'true'}\n data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}\n data-bwignore={supportsAutoComplete ? undefined : 'true'}\n inputMode={validation?.inputMode}\n maxLength={supportsAutoComplete ? collection.size : 1}\n pattern={validation?.pattern}\n readOnly={context.readOnly}\n value={char}\n placeholder={placeholder}\n data-radix-otp-input=\"\"\n data-radix-index={index}\n {...domProps}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n event.currentTarget.select();\n })}\n onCut={composeEventHandlers(props.onCut, (event) => {\n const currentValue = event.currentTarget.value;\n if (currentValue !== '') {\n // In this case the value will be cleared, but we don't want to\n // set it directly because the user may want to prevent default\n // behavior in the onChange handler. The userActionRef will\n // be set temporarily so the change handler can behave correctly\n // in response to the action.\n userActionRef.current = { type: 'cut' };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onInput={composeEventHandlers(props.onInput, (event) => {\n const value = event.currentTarget.value;\n if (value.length > 1) {\n // Password managers may try to insert the code into a single\n // input, in which case form validation will fail to prevent\n // additional input. Handle this the same as if a user were\n // pasting a value.\n event.preventDefault();\n userActionRef.current = { type: 'autocomplete-paste' };\n dispatch({ type: 'PASTE', value });\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onChange={composeEventHandlers(props.onChange, (event) => {\n const value = event.target.value;\n event.preventDefault();\n const action = userActionRef.current;\n userActionRef.current = null;\n\n if (action) {\n switch (action.type) {\n case 'cut':\n // TODO: do we want to assume the user wants to clear the\n // entire value here and copy the code to the clipboard instead\n // of just the value of the given input?\n dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n return;\n case 'autocomplete-paste':\n // the PASTE handler will already set the value and focus the final\n // input; we want to skip focusing the wrong element if the browser fires\n // onChange for the first input. This sometimes happens during autocomplete.\n return;\n case 'keydown': {\n if (action.key === 'Char') {\n // update resulting from a keydown event that set a value\n // directly. Ignore.\n return;\n }\n\n const isClearing =\n action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n if (action.key === 'Clear' || isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n }\n return;\n }\n default:\n action satisfies never;\n return;\n }\n }\n\n // Only update the value if it matches the input pattern\n if (event.target.validity.valid) {\n if (value === '') {\n let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n if (isInputEvent(event.nativeEvent)) {\n const inputType = event.nativeEvent.inputType;\n if (inputType === 'deleteContentBackward') {\n reason = 'Backspace';\n } else if (inputType === 'deleteByCut') {\n reason = 'Cut';\n }\n }\n dispatch({ type: 'CLEAR_CHAR', index, reason });\n } else {\n dispatch({ type: 'SET_CHAR', char: value, index, event });\n }\n } else {\n const element = event.target;\n onInvalidChange?.(element.value);\n requestAnimationFrame(() => {\n if (element.ownerDocument.activeElement === element) {\n element.select();\n }\n });\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n switch (event.key) {\n case 'Clear':\n case 'Delete':\n case 'Backspace': {\n const currentValue = event.currentTarget.value;\n // if current value is empty, no change event will fire\n if (currentValue === '') {\n // if the user presses delete when there is no value, noop\n if (event.key === 'Delete') return;\n\n const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;\n if (isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n const element = event.currentTarget;\n requestAnimationFrame(() => {\n focusInput(collection.from(element, -1)?.element);\n });\n }\n } else {\n // In this case the value will be cleared, but we don't want\n // to set it directly because the user may want to prevent\n // default behavior in the onChange handler. The userActionRef\n // will is set temporarily so the change handler can behave\n // correctly in response to the key vs. clearing the value by\n // setting state externally.\n userActionRef.current = {\n type: 'keydown',\n key: event.key,\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n\n return;\n }\n case 'Enter': {\n event.preventDefault();\n context.attemptSubmit();\n return;\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (context.orientation === 'horizontal') {\n // in horizontal orientation, the up/down will de-select the\n // input instead of moving focus\n event.preventDefault();\n }\n return;\n }\n // TODO: Handle left/right arrow keys in vertical writing mode\n default: {\n if (event.currentTarget.value === event.key) {\n // if current value is same as the key press, no change event\n // will fire. Focus the next input.\n const element = event.currentTarget;\n event.preventDefault();\n focusInput(collection.from(element, 1)?.element);\n return;\n } else if (\n // input already has a value, but...\n event.currentTarget.value &&\n // the value is not selected\n !(\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd != null &&\n event.currentTarget.selectionEnd > 0\n )\n ) {\n const attemptedValue = event.key;\n if (event.key.length > 1 || event.key === ' ') {\n // not a character; do nothing\n return;\n } else {\n // user is attempting to enter a character, but the input\n // will not update by default since it's limited to a single\n // character.\n const nextInput = collection.from(event.currentTarget, 1)?.element;\n const lastInput = collection.at(-1)?.element;\n if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n // if selection is before the value, set the value of the\n // current input. Otherwise set the value of the next\n // input.\n if (event.currentTarget.selectionStart === 0) {\n dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n } else {\n dispatch({\n type: 'SET_CHAR',\n char: attemptedValue,\n index: index + 1,\n event,\n });\n }\n\n userActionRef.current = {\n type: 'keydown',\n key: 'Char',\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n }\n }\n }\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n const indexToFocus = Math.min(index, lastSelectableIndex);\n const element = collection.at(indexToFocus)?.element;\n focusInput(element);\n })}\n />\n );\n }}\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n});\n\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n OneTimePasswordField as Root,\n OneTimePasswordFieldInput as Input,\n OneTimePasswordFieldHiddenInput as HiddenInput,\n};\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n return element?.tagName === 'FORM';\n}\n\nfunction removeWhitespace(value: string) {\n return value.replace(/\\s/g, '');\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n if (!element) return;\n if (element.ownerDocument.activeElement === element) {\n // if the element is already focused, select the value in the next\n // animation frame\n window.requestAnimationFrame(() => {\n element.select?.();\n });\n } else {\n element.focus();\n }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n return event.type === 'input';\n}\n\ntype KeyboardActionDetails =\n | {\n type: 'keydown';\n key: 'Backspace' | 'Delete' | 'Clear' | 'Char';\n metaKey: boolean;\n ctrlKey: boolean;\n }\n | { type: 'cut' }\n | { type: 'autocomplete-paste' };\n\ntype UpdateAction =\n | {\n type: 'SET_CHAR';\n char: string;\n index: number;\n event: React.KeyboardEvent | React.ChangeEvent;\n }\n | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }\n | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\ntype InputValidation = Record<\n InputValidationType,\n {\n type: InputValidationType;\n regexp: RegExp;\n pattern: string;\n inputMode: 'text' | 'numeric';\n } | null\n>;\n"],
5
+ "mappings": "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",
6
6
  "names": ["createCollection", "value", "newValue", "form", "OneTimePasswordFieldHiddenInput", "OneTimePasswordFieldInput", "element"]
7
7
  }
package/dist/index.mjs CHANGED
@@ -17,21 +17,35 @@ import { createContextScope } from "@radix-ui/react-context";
17
17
  import { useDirection } from "@radix-ui/react-direction";
18
18
  import { clamp } from "@radix-ui/number";
19
19
  import { jsx } from "react/jsx-runtime";
20
+ var InputValidationType = {
21
+ Alpha: "alpha",
22
+ Numeric: "numeric",
23
+ Alphanumeric: "alphanumeric",
24
+ None: "none"
25
+ };
26
+ var InputType = {
27
+ Password: "password",
28
+ Text: "text"
29
+ };
30
+ var AutoComplete = {
31
+ Off: "off",
32
+ OneTimeCode: "one-time-code"
33
+ };
20
34
  var INPUT_VALIDATION_MAP = {
21
35
  numeric: {
22
- type: "numeric",
36
+ type: InputValidationType.Numeric,
23
37
  regexp: /[^\d]/g,
24
38
  pattern: "\\d{1}",
25
39
  inputMode: "numeric"
26
40
  },
27
41
  alpha: {
28
- type: "alpha",
42
+ type: InputValidationType.Alpha,
29
43
  regexp: /[^a-zA-Z]/g,
30
44
  pattern: "[a-zA-Z]{1}",
31
45
  inputMode: "text"
32
46
  },
33
47
  alphanumeric: {
34
- type: "alphanumeric",
48
+ type: InputValidationType.Alphanumeric,
35
49
  regexp: /[^a-zA-Z0-9]/g,
36
50
  pattern: "[a-zA-Z0-9]{1}",
37
51
  inputMode: "text"
@@ -59,16 +73,16 @@ var OneTimePasswordField = /* @__PURE__ */ React.forwardRef(
59
73
  onAutoSubmit,
60
74
  disabled = false,
61
75
  readOnly = false,
62
- autoComplete = "one-time-code",
76
+ autoComplete = AutoComplete.OneTimeCode,
63
77
  autoFocus = false,
64
78
  form,
65
79
  name,
66
80
  placeholder,
67
- type = "text",
81
+ type = InputType.Text,
68
82
  // TODO: Change default to vertical when inputs use vertical writing mode
69
83
  orientation = "horizontal",
70
84
  dir,
71
- validationType = "numeric",
85
+ validationType = InputValidationType.Numeric,
72
86
  sanitizeValue: sanitizeValueProp,
73
87
  ...domProps
74
88
  }, forwardedRef) {
@@ -388,7 +402,7 @@ var OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
388
402
  type: context.type,
389
403
  disabled,
390
404
  "aria-label": `Character ${index + 1} of ${collection.size}`,
391
- autoComplete: supportsAutoComplete ? context.autoComplete : "off",
405
+ autoComplete: supportsAutoComplete ? context.autoComplete : AutoComplete.Off,
392
406
  "data-1p-ignore": supportsAutoComplete ? void 0 : "true",
393
407
  "data-lpignore": supportsAutoComplete ? void 0 : "true",
394
408
  "data-protonpass-ignore": supportsAutoComplete ? void 0 : "true",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/one-time-password-field.tsx"],
4
- "sourcesContent": ["import * as Primitive from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\n\ntype InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';\n\nconst INPUT_VALIDATION_MAP = {\n numeric: {\n type: 'numeric',\n regexp: /[^\\d]/g,\n pattern: '\\\\d{1}',\n inputMode: 'numeric',\n },\n alpha: {\n type: 'alpha',\n regexp: /[^a-zA-Z]/g,\n pattern: '[a-zA-Z]{1}',\n inputMode: 'text',\n },\n alphanumeric: {\n type: 'alphanumeric',\n regexp: /[^a-zA-Z0-9]/g,\n pattern: '[a-zA-Z0-9]{1}',\n inputMode: 'text',\n },\n none: null,\n} satisfies InputValidation;\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;\n\ninterface OneTimePasswordFieldContextValue {\n attemptSubmit: () => void;\n autoComplete: AutoComplete;\n autoFocus: boolean;\n disabled: boolean;\n dispatch: Dispatcher;\n form: string | undefined;\n hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n isHydrated: boolean;\n name: string | undefined;\n orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n placeholder: string | undefined;\n readOnly: boolean;\n type: InputType;\n userActionRef: React.RefObject<KeyboardActionDetails | null>;\n validationType: InputValidationType;\n value: string[];\n sanitizeValue: (arg: string | string[]) => string[];\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, { useCollection, createCollectionScope, useInitCollection }] =\n createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordField\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldOwnProps {\n /**\n * Specifies what\u2014if any\u2014permission the user agent has to provide automated\n * assistance in filling out form field values, as well as guidance to the\n * browser as to the type of information expected in the field. Allows\n * `\"one-time-code\"` or `\"off\"`.\n *\n * @defaultValue `\"one-time-code\"`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\n */\n autoComplete?: AutoComplete;\n /**\n * Whether or not the first fillable input should be focused on page-load.\n *\n * @defaultValue `false`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus\n */\n autoFocus?: boolean;\n /**\n * Whether or not the component should attempt to automatically submit when\n * all fields are filled. If the field is associated with an HTML `form`\n * element, the form's `requestSubmit` method will be called.\n *\n * @defaultValue `false`\n */\n autoSubmit?: boolean;\n /**\n * The initial value of the uncontrolled field.\n */\n defaultValue?: string;\n /**\n * Indicates the horizontal directionality of the parent element's text.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether or not the the field's input elements are disabled.\n */\n disabled?: boolean;\n /**\n * A string specifying the `form` element with which the input is associated.\n * This string's value, if present, must match the id of a `form` element in\n * the same document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form\n */\n form?: string | undefined;\n /**\n * A string specifying a name for the input control. This name is submitted\n * along with the control's value when the form data is submitted.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name\n */\n name?: string | undefined;\n /**\n * When the `autoSubmit` prop is set to `true`, this callback will be fired\n * before attempting to submit the associated form. It will be called whether\n * or not a form is located, or if submission is not allowed.\n */\n onAutoSubmit?: (value: string) => void;\n /**\n * A callback fired when the field's value changes. When the component is\n * controlled, this should update the state passed to the `value` prop.\n */\n onValueChange?: (value: string) => void;\n /**\n * Indicates the vertical directionality of the input elements.\n *\n * @defaultValue `\"horizontal\"`\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * Defines the text displayed in a form control when the control has no value.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder\n */\n placeholder?: string | undefined;\n /**\n * Whether or not the input elements can be updated by the user.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly\n */\n readOnly?: boolean;\n /**\n * Function for custom sanitization when `validationType` is set to `\"none\"`.\n * This function will be called before updating values in response to user\n * interactions.\n */\n sanitizeValue?: (value: string) => string;\n /**\n * The input type of the field's input elements. Can be `\"password\"` or `\"text\"`.\n */\n type?: InputType;\n /**\n * Specifies the type of input validation to be used. Can be `\"alpha\"`,\n * `\"numeric\"`, `\"alphanumeric\"` or `\"none\"`.\n *\n * @defaultValue `\"numeric\"`\n */\n validationType?: InputValidationType;\n /**\n * The controlled value of the field.\n */\n value?: string;\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\ninterface OneTimePasswordFieldProps\n extends\n OneTimePasswordFieldOwnProps,\n Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}\n\nconst OneTimePasswordField = /* @__PURE__ */ React.forwardRef<\n HTMLDivElement,\n OneTimePasswordFieldProps\n>(\n // blank line to reduce diff noise\n function OneTimePasswordFieldImpl(\n {\n __scopeOneTimePasswordField,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit = false,\n children,\n onPaste,\n onAutoSubmit,\n disabled = false,\n readOnly = false,\n autoComplete = 'one-time-code',\n autoFocus = false,\n form,\n name,\n placeholder,\n type = 'text',\n // TODO: Change default to vertical when inputs use vertical writing mode\n orientation = 'horizontal',\n dir,\n validationType = 'numeric',\n sanitizeValue: sanitizeValueProp,\n ...domProps\n }: ScopedProps<OneTimePasswordFieldProps>,\n forwardedRef,\n ) {\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n const direction = useDirection(dir);\n const collectionState = useInitCollection();\n const [collection] = collectionState;\n\n const validation = INPUT_VALIDATION_MAP[validationType]\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : null;\n\n const sanitizeValue = React.useCallback(\n (value: string | string[]) => {\n if (Array.isArray(value)) {\n value = value.map(removeWhitespace).join('');\n } else {\n value = removeWhitespace(value);\n }\n\n if (validation) {\n // global regexp is stateful, so we clone it for each call\n const regexp = new RegExp(validation.regexp);\n value = value.replace(regexp, '');\n } else if (sanitizeValueProp) {\n value = sanitizeValueProp(value);\n }\n\n return value.split('');\n },\n [validation, sanitizeValueProp],\n );\n\n const controlledValue = React.useMemo(() => {\n return valueProp != null ? sanitizeValue(valueProp) : undefined;\n }, [valueProp, sanitizeValue]);\n\n const [value, setValue] = useControllableState({\n caller: 'OneTimePasswordField',\n prop: controlledValue,\n defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],\n onChange: React.useCallback(\n (value: string[]) => onValueChange?.(value.join('')),\n [onValueChange],\n ),\n });\n\n // Use a ref so dispatch always reads the latest value without needing\n // value in its dependency array (which would change its identity every\n // keystroke and cause cascading effect re-runs).\n const latestValueRef = React.useRef(value);\n latestValueRef.current = value;\n\n // Update function *specifically* for event handlers.\n const dispatch = React.useCallback<Dispatcher>(\n (action) => {\n const value = latestValueRef.current;\n switch (action.type) {\n case 'SET_CHAR': {\n const { index, char } = action;\n const currentTarget = collection.at(index)?.element;\n if (value[index] === char) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n // empty values should be handled in the CLEAR_CHAR action\n if (char === '') {\n return;\n }\n\n if (validation) {\n const regexp = new RegExp(validation.regexp);\n const clean = char.replace(regexp, '');\n if (clean !== char) {\n // not valid; ignore\n return;\n }\n }\n\n // no more space\n if (value.length >= collection.size) {\n // replace current value; move to next input\n const newValue = [...value];\n newValue[index] = char;\n flushSync(() => setValue(newValue));\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n const newValue = [...value];\n newValue[index] = char;\n\n const lastElement = collection.at(-1)?.element;\n flushSync(() => setValue(newValue));\n if (currentTarget !== lastElement) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n } else {\n currentTarget?.select();\n }\n return;\n }\n\n case 'CLEAR_CHAR': {\n const { index, reason } = action;\n if (!value[index]) {\n return;\n }\n\n const newValue = value.filter((_, i) => i !== index);\n const currentTarget = collection.at(index)?.element;\n const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n flushSync(() => setValue(newValue));\n if (reason === 'Backspace') {\n focusInput(previous);\n } else if (reason === 'Delete' || reason === 'Cut') {\n focusInput(currentTarget);\n }\n return;\n }\n\n case 'CLEAR': {\n if (value.length === 0) {\n return;\n }\n\n if (action.reason === 'Backspace' || action.reason === 'Delete') {\n flushSync(() => setValue([]));\n focusInput(collection.at(0)?.element);\n } else {\n setValue([]);\n }\n return;\n }\n\n case 'PASTE': {\n const { value: pastedValue } = action;\n const sanitizedValue = sanitizeValue(pastedValue);\n if (!sanitizedValue) {\n return;\n }\n\n const value = sanitizedValue.slice(0, collection.size);\n\n flushSync(() => setValue(value));\n focusInput(collection.at(value.length - 1)?.element);\n return;\n }\n }\n },\n [collection, sanitizeValue, setValue, validation],\n );\n\n // re-validate when the validation type changes\n const validationTypeRef = React.useRef(validation);\n React.useEffect(() => {\n if (!validation) {\n return;\n }\n\n if (validationTypeRef.current?.type !== validation.type) {\n validationTypeRef.current = validation;\n setValue(sanitizeValue(value.join('')));\n }\n }, [sanitizeValue, setValue, validation, value]);\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n const firstInput = collection.at(0)?.element;\n const locateForm = React.useCallback(() => {\n let formElement: HTMLFormElement | null | undefined;\n if (form) {\n const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n if (isFormElement(associatedElement)) {\n formElement = associatedElement;\n }\n } else if (hiddenInputRef.current) {\n formElement = hiddenInputRef.current.form;\n } else if (firstInput) {\n formElement = firstInput.form;\n }\n\n return formElement ?? null;\n }, [form, firstInput]);\n\n const attemptSubmit = React.useCallback(() => {\n const formElement = locateForm();\n formElement?.requestSubmit();\n }, [locateForm]);\n\n React.useEffect(() => {\n const form = locateForm();\n if (form) {\n const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [dispatch, locateForm]);\n\n const currentValue = value.join('');\n const valueRef = React.useRef(currentValue);\n const length = collection.size;\n React.useEffect(() => {\n const previousValue = valueRef.current;\n valueRef.current = currentValue;\n if (previousValue === currentValue) {\n return;\n }\n\n if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n onAutoSubmit?.(value.join(''));\n attemptSubmit();\n }\n }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n const isHydrated = useIsHydrated();\n\n return (\n <OneTimePasswordFieldContext\n scope={__scopeOneTimePasswordField}\n value={value}\n attemptSubmit={attemptSubmit}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n form={form}\n name={name}\n placeholder={placeholder}\n type={type}\n hiddenInputRef={hiddenInputRef}\n userActionRef={userActionRef}\n dispatch={dispatch}\n validationType={validationType}\n orientation={orientation}\n isHydrated={isHydrated}\n sanitizeValue={sanitizeValue}\n >\n <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>\n <Collection.Slot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n >\n <Primitive.Root.div\n {...domProps}\n role=\"group\"\n ref={composedRefs}\n onPaste={composeEventHandlers(\n onPaste,\n (event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text/plain');\n dispatch({ type: 'PASTE', value: pastedValue });\n },\n )}\n >\n {children}\n </Primitive.Root.div>\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </OneTimePasswordFieldContext>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldHiddenInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldHiddenInputProps extends Omit<\n React.ComponentProps<'input'>,\n | keyof 'value'\n | 'defaultValue'\n | 'type'\n | 'onChange'\n | 'readOnly'\n | 'disabled'\n | 'autoComplete'\n | 'autoFocus'\n> {}\n\nconst OneTimePasswordFieldHiddenInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n forwardedRef,\n) {\n const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldHiddenInput',\n __scopeOneTimePasswordField,\n );\n const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n return (\n <input\n ref={ref}\n name={name}\n value={value.join('').trim()}\n autoComplete=\"off\"\n autoFocus={false}\n autoCapitalize=\"off\"\n autoCorrect=\"off\"\n autoSave=\"off\"\n spellCheck={false}\n {...props}\n type=\"hidden\"\n readOnly\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldInputProps extends Omit<\n Primitive.PrimitivePropsWithRef<'input'>,\n | 'value'\n | 'defaultValue'\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'autoFocus'\n | 'form'\n | 'name'\n | 'placeholder'\n | 'type'\n> {\n /**\n * Callback fired when the user input fails native HTML input validation.\n */\n onInvalidChange?: (character: string) => void;\n /**\n * User-provided index to determine the order of the inputs. This is useful if\n * you need certain index-based attributes to be set on the initial render,\n * often to prevent flickering after hydration.\n */\n index?: number;\n}\n\nconst OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n {\n __scopeOneTimePasswordField,\n onInvalidChange,\n index: indexProp,\n ...props\n }: ScopedProps<OneTimePasswordFieldInputProps>,\n forwardedRef,\n) {\n // TODO: warn if these values are passed\n const {\n value: _value,\n defaultValue: _defaultValue,\n disabled: _disabled,\n readOnly: _readOnly,\n autoComplete: _autoComplete,\n autoFocus: _autoFocus,\n form: _form,\n name: _name,\n placeholder: _placeholder,\n type: _type,\n ...domProps\n } = props as Primitive.PrimitivePropsWithRef<'input'>;\n\n const context = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldInput',\n __scopeOneTimePasswordField,\n );\n const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;\n const collection = useCollection(__scopeOneTimePasswordField);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n const index = indexProp ?? (element ? collection.indexOf(element) : -1);\n const canSetPlaceholder = indexProp != null || isHydrated;\n let placeholder: string | undefined;\n if (canSetPlaceholder && context.placeholder && context.value.length === 0) {\n // only set placeholder after hydration to prevent flickering when indices\n // are re-calculated\n placeholder = context.placeholder[index];\n }\n\n const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n const char = context.value[index] ?? '';\n\n const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n React.useEffect(() => {\n return () => {\n if (keyboardActionTimeoutRef.current) {\n window.clearTimeout(keyboardActionTimeoutRef.current);\n }\n };\n }, []);\n\n const totalValue = context.value.join('').trim();\n const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n const isFocusable = index <= lastSelectableIndex;\n\n const validation =\n validationType in INPUT_VALIDATION_MAP\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : undefined;\n\n return (\n <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Item\n {...rovingFocusGroupScope}\n asChild\n focusable={!context.disabled && isFocusable}\n active={index === lastSelectableIndex}\n >\n {({ hasTabStop, isCurrentTabStop }) => {\n const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;\n return (\n <Primitive.Root.input\n ref={composedInputRef}\n type={context.type}\n disabled={disabled}\n aria-label={`Character ${index + 1} of ${collection.size}`}\n autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}\n data-1p-ignore={supportsAutoComplete ? undefined : 'true'}\n data-lpignore={supportsAutoComplete ? undefined : 'true'}\n data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}\n data-bwignore={supportsAutoComplete ? undefined : 'true'}\n inputMode={validation?.inputMode}\n maxLength={supportsAutoComplete ? collection.size : 1}\n pattern={validation?.pattern}\n readOnly={context.readOnly}\n value={char}\n placeholder={placeholder}\n data-radix-otp-input=\"\"\n data-radix-index={index}\n {...domProps}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n event.currentTarget.select();\n })}\n onCut={composeEventHandlers(props.onCut, (event) => {\n const currentValue = event.currentTarget.value;\n if (currentValue !== '') {\n // In this case the value will be cleared, but we don't want to\n // set it directly because the user may want to prevent default\n // behavior in the onChange handler. The userActionRef will\n // be set temporarily so the change handler can behave correctly\n // in response to the action.\n userActionRef.current = { type: 'cut' };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onInput={composeEventHandlers(props.onInput, (event) => {\n const value = event.currentTarget.value;\n if (value.length > 1) {\n // Password managers may try to insert the code into a single\n // input, in which case form validation will fail to prevent\n // additional input. Handle this the same as if a user were\n // pasting a value.\n event.preventDefault();\n userActionRef.current = { type: 'autocomplete-paste' };\n dispatch({ type: 'PASTE', value });\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onChange={composeEventHandlers(props.onChange, (event) => {\n const value = event.target.value;\n event.preventDefault();\n const action = userActionRef.current;\n userActionRef.current = null;\n\n if (action) {\n switch (action.type) {\n case 'cut':\n // TODO: do we want to assume the user wants to clear the\n // entire value here and copy the code to the clipboard instead\n // of just the value of the given input?\n dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n return;\n case 'autocomplete-paste':\n // the PASTE handler will already set the value and focus the final\n // input; we want to skip focusing the wrong element if the browser fires\n // onChange for the first input. This sometimes happens during autocomplete.\n return;\n case 'keydown': {\n if (action.key === 'Char') {\n // update resulting from a keydown event that set a value\n // directly. Ignore.\n return;\n }\n\n const isClearing =\n action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n if (action.key === 'Clear' || isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n }\n return;\n }\n default:\n action satisfies never;\n return;\n }\n }\n\n // Only update the value if it matches the input pattern\n if (event.target.validity.valid) {\n if (value === '') {\n let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n if (isInputEvent(event.nativeEvent)) {\n const inputType = event.nativeEvent.inputType;\n if (inputType === 'deleteContentBackward') {\n reason = 'Backspace';\n } else if (inputType === 'deleteByCut') {\n reason = 'Cut';\n }\n }\n dispatch({ type: 'CLEAR_CHAR', index, reason });\n } else {\n dispatch({ type: 'SET_CHAR', char: value, index, event });\n }\n } else {\n const element = event.target;\n onInvalidChange?.(element.value);\n requestAnimationFrame(() => {\n if (element.ownerDocument.activeElement === element) {\n element.select();\n }\n });\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n switch (event.key) {\n case 'Clear':\n case 'Delete':\n case 'Backspace': {\n const currentValue = event.currentTarget.value;\n // if current value is empty, no change event will fire\n if (currentValue === '') {\n // if the user presses delete when there is no value, noop\n if (event.key === 'Delete') return;\n\n const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;\n if (isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n const element = event.currentTarget;\n requestAnimationFrame(() => {\n focusInput(collection.from(element, -1)?.element);\n });\n }\n } else {\n // In this case the value will be cleared, but we don't want\n // to set it directly because the user may want to prevent\n // default behavior in the onChange handler. The userActionRef\n // will is set temporarily so the change handler can behave\n // correctly in response to the key vs. clearing the value by\n // setting state externally.\n userActionRef.current = {\n type: 'keydown',\n key: event.key,\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n\n return;\n }\n case 'Enter': {\n event.preventDefault();\n context.attemptSubmit();\n return;\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (context.orientation === 'horizontal') {\n // in horizontal orientation, the up/down will de-select the\n // input instead of moving focus\n event.preventDefault();\n }\n return;\n }\n // TODO: Handle left/right arrow keys in vertical writing mode\n default: {\n if (event.currentTarget.value === event.key) {\n // if current value is same as the key press, no change event\n // will fire. Focus the next input.\n const element = event.currentTarget;\n event.preventDefault();\n focusInput(collection.from(element, 1)?.element);\n return;\n } else if (\n // input already has a value, but...\n event.currentTarget.value &&\n // the value is not selected\n !(\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd != null &&\n event.currentTarget.selectionEnd > 0\n )\n ) {\n const attemptedValue = event.key;\n if (event.key.length > 1 || event.key === ' ') {\n // not a character; do nothing\n return;\n } else {\n // user is attempting to enter a character, but the input\n // will not update by default since it's limited to a single\n // character.\n const nextInput = collection.from(event.currentTarget, 1)?.element;\n const lastInput = collection.at(-1)?.element;\n if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n // if selection is before the value, set the value of the\n // current input. Otherwise set the value of the next\n // input.\n if (event.currentTarget.selectionStart === 0) {\n dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n } else {\n dispatch({\n type: 'SET_CHAR',\n char: attemptedValue,\n index: index + 1,\n event,\n });\n }\n\n userActionRef.current = {\n type: 'keydown',\n key: 'Char',\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n }\n }\n }\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n const indexToFocus = Math.min(index, lastSelectableIndex);\n const element = collection.at(indexToFocus)?.element;\n focusInput(element);\n })}\n />\n );\n }}\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n});\n\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n OneTimePasswordField as Root,\n OneTimePasswordFieldInput as Input,\n OneTimePasswordFieldHiddenInput as HiddenInput,\n};\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n return element?.tagName === 'FORM';\n}\n\nfunction removeWhitespace(value: string) {\n return value.replace(/\\s/g, '');\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n if (!element) return;\n if (element.ownerDocument.activeElement === element) {\n // if the element is already focused, select the value in the next\n // animation frame\n window.requestAnimationFrame(() => {\n element.select?.();\n });\n } else {\n element.focus();\n }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n return event.type === 'input';\n}\n\ntype InputType = 'password' | 'text';\ntype AutoComplete = 'off' | 'one-time-code';\ntype KeyboardActionDetails =\n | {\n type: 'keydown';\n key: 'Backspace' | 'Delete' | 'Clear' | 'Char';\n metaKey: boolean;\n ctrlKey: boolean;\n }\n | { type: 'cut' }\n | { type: 'autocomplete-paste' };\n\ntype UpdateAction =\n | {\n type: 'SET_CHAR';\n char: string;\n index: number;\n event: React.KeyboardEvent | React.ChangeEvent;\n }\n | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }\n | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\ntype InputValidation = Record<\n InputValidationType,\n {\n type: InputValidationType;\n regexp: RegExp;\n pattern: string;\n inputMode: 'text' | 'numeric';\n } | null\n>;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as Primitive from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\n\nconst InputValidationType = {\n Alpha: 'alpha',\n Numeric: 'numeric',\n Alphanumeric: 'alphanumeric',\n None: 'none',\n} as const;\n\nconst InputType = {\n Password: 'password',\n Text: 'text',\n} as const;\n\nconst AutoComplete = {\n Off: 'off',\n OneTimeCode: 'one-time-code',\n} as const;\n\ntype InputValidationType = (typeof InputValidationType)[keyof typeof InputValidationType];\ntype InputType = (typeof InputType)[keyof typeof InputType];\ntype AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];\n\nconst INPUT_VALIDATION_MAP = {\n numeric: {\n type: InputValidationType.Numeric,\n regexp: /[^\\d]/g,\n pattern: '\\\\d{1}',\n inputMode: 'numeric',\n },\n alpha: {\n type: InputValidationType.Alpha,\n regexp: /[^a-zA-Z]/g,\n pattern: '[a-zA-Z]{1}',\n inputMode: 'text',\n },\n alphanumeric: {\n type: InputValidationType.Alphanumeric,\n regexp: /[^a-zA-Z0-9]/g,\n pattern: '[a-zA-Z0-9]{1}',\n inputMode: 'text',\n },\n none: null,\n} satisfies InputValidation;\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;\n\ninterface OneTimePasswordFieldContextValue {\n attemptSubmit: () => void;\n autoComplete: AutoComplete;\n autoFocus: boolean;\n disabled: boolean;\n dispatch: Dispatcher;\n form: string | undefined;\n hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n isHydrated: boolean;\n name: string | undefined;\n orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n placeholder: string | undefined;\n readOnly: boolean;\n type: InputType;\n userActionRef: React.RefObject<KeyboardActionDetails | null>;\n validationType: InputValidationType;\n value: string[];\n sanitizeValue: (arg: string | string[]) => string[];\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, { useCollection, createCollectionScope, useInitCollection }] =\n createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordField\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldOwnProps {\n /**\n * Specifies what\u2014if any\u2014permission the user agent has to provide automated\n * assistance in filling out form field values, as well as guidance to the\n * browser as to the type of information expected in the field. Allows\n * `\"one-time-code\"` or `\"off\"`.\n *\n * @defaultValue `\"one-time-code\"`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\n */\n autoComplete?: AutoComplete;\n /**\n * Whether or not the first fillable input should be focused on page-load.\n *\n * @defaultValue `false`\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus\n */\n autoFocus?: boolean;\n /**\n * Whether or not the component should attempt to automatically submit when\n * all fields are filled. If the field is associated with an HTML `form`\n * element, the form's `requestSubmit` method will be called.\n *\n * @defaultValue `false`\n */\n autoSubmit?: boolean;\n /**\n * The initial value of the uncontrolled field.\n */\n defaultValue?: string;\n /**\n * Indicates the horizontal directionality of the parent element's text.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether or not the the field's input elements are disabled.\n */\n disabled?: boolean;\n /**\n * A string specifying the `form` element with which the input is associated.\n * This string's value, if present, must match the id of a `form` element in\n * the same document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form\n */\n form?: string | undefined;\n /**\n * A string specifying a name for the input control. This name is submitted\n * along with the control's value when the form data is submitted.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name\n */\n name?: string | undefined;\n /**\n * When the `autoSubmit` prop is set to `true`, this callback will be fired\n * before attempting to submit the associated form. It will be called whether\n * or not a form is located, or if submission is not allowed.\n */\n onAutoSubmit?: (value: string) => void;\n /**\n * A callback fired when the field's value changes. When the component is\n * controlled, this should update the state passed to the `value` prop.\n */\n onValueChange?: (value: string) => void;\n /**\n * Indicates the vertical directionality of the input elements.\n *\n * @defaultValue `\"horizontal\"`\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * Defines the text displayed in a form control when the control has no value.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder\n */\n placeholder?: string | undefined;\n /**\n * Whether or not the input elements can be updated by the user.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly\n */\n readOnly?: boolean;\n /**\n * Function for custom sanitization when `validationType` is set to `\"none\"`.\n * This function will be called before updating values in response to user\n * interactions.\n */\n sanitizeValue?: (value: string) => string;\n /**\n * The input type of the field's input elements. Can be `\"password\"` or `\"text\"`.\n */\n type?: InputType;\n /**\n * Specifies the type of input validation to be used. Can be `\"alpha\"`,\n * `\"numeric\"`, `\"alphanumeric\"` or `\"none\"`.\n *\n * @defaultValue `\"numeric\"`\n */\n validationType?: InputValidationType;\n /**\n * The controlled value of the field.\n */\n value?: string;\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\ninterface OneTimePasswordFieldProps\n extends\n OneTimePasswordFieldOwnProps,\n Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}\n\nconst OneTimePasswordField = /* @__PURE__ */ React.forwardRef<\n HTMLDivElement,\n OneTimePasswordFieldProps\n>(\n // blank line to reduce diff noise\n function OneTimePasswordFieldImpl(\n {\n __scopeOneTimePasswordField,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit = false,\n children,\n onPaste,\n onAutoSubmit,\n disabled = false,\n readOnly = false,\n autoComplete = AutoComplete.OneTimeCode,\n autoFocus = false,\n form,\n name,\n placeholder,\n type = InputType.Text,\n // TODO: Change default to vertical when inputs use vertical writing mode\n orientation = 'horizontal',\n dir,\n validationType = InputValidationType.Numeric,\n sanitizeValue: sanitizeValueProp,\n ...domProps\n }: ScopedProps<OneTimePasswordFieldProps>,\n forwardedRef,\n ) {\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n const direction = useDirection(dir);\n const collectionState = useInitCollection();\n const [collection] = collectionState;\n\n const validation = INPUT_VALIDATION_MAP[validationType]\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : null;\n\n const sanitizeValue = React.useCallback(\n (value: string | string[]) => {\n if (Array.isArray(value)) {\n value = value.map(removeWhitespace).join('');\n } else {\n value = removeWhitespace(value);\n }\n\n if (validation) {\n // global regexp is stateful, so we clone it for each call\n const regexp = new RegExp(validation.regexp);\n value = value.replace(regexp, '');\n } else if (sanitizeValueProp) {\n value = sanitizeValueProp(value);\n }\n\n return value.split('');\n },\n [validation, sanitizeValueProp],\n );\n\n const controlledValue = React.useMemo(() => {\n return valueProp != null ? sanitizeValue(valueProp) : undefined;\n }, [valueProp, sanitizeValue]);\n\n const [value, setValue] = useControllableState({\n caller: 'OneTimePasswordField',\n prop: controlledValue,\n defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],\n onChange: React.useCallback(\n (value: string[]) => onValueChange?.(value.join('')),\n [onValueChange],\n ),\n });\n\n // Use a ref so dispatch always reads the latest value without needing\n // value in its dependency array (which would change its identity every\n // keystroke and cause cascading effect re-runs).\n const latestValueRef = React.useRef(value);\n latestValueRef.current = value;\n\n // Update function *specifically* for event handlers.\n const dispatch = React.useCallback<Dispatcher>(\n (action) => {\n const value = latestValueRef.current;\n switch (action.type) {\n case 'SET_CHAR': {\n const { index, char } = action;\n const currentTarget = collection.at(index)?.element;\n if (value[index] === char) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n // empty values should be handled in the CLEAR_CHAR action\n if (char === '') {\n return;\n }\n\n if (validation) {\n const regexp = new RegExp(validation.regexp);\n const clean = char.replace(regexp, '');\n if (clean !== char) {\n // not valid; ignore\n return;\n }\n }\n\n // no more space\n if (value.length >= collection.size) {\n // replace current value; move to next input\n const newValue = [...value];\n newValue[index] = char;\n flushSync(() => setValue(newValue));\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n return;\n }\n\n const newValue = [...value];\n newValue[index] = char;\n\n const lastElement = collection.at(-1)?.element;\n flushSync(() => setValue(newValue));\n if (currentTarget !== lastElement) {\n const next = currentTarget && collection.from(currentTarget, 1)?.element;\n focusInput(next);\n } else {\n currentTarget?.select();\n }\n return;\n }\n\n case 'CLEAR_CHAR': {\n const { index, reason } = action;\n if (!value[index]) {\n return;\n }\n\n const newValue = value.filter((_, i) => i !== index);\n const currentTarget = collection.at(index)?.element;\n const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n flushSync(() => setValue(newValue));\n if (reason === 'Backspace') {\n focusInput(previous);\n } else if (reason === 'Delete' || reason === 'Cut') {\n focusInput(currentTarget);\n }\n return;\n }\n\n case 'CLEAR': {\n if (value.length === 0) {\n return;\n }\n\n if (action.reason === 'Backspace' || action.reason === 'Delete') {\n flushSync(() => setValue([]));\n focusInput(collection.at(0)?.element);\n } else {\n setValue([]);\n }\n return;\n }\n\n case 'PASTE': {\n const { value: pastedValue } = action;\n const sanitizedValue = sanitizeValue(pastedValue);\n if (!sanitizedValue) {\n return;\n }\n\n const value = sanitizedValue.slice(0, collection.size);\n\n flushSync(() => setValue(value));\n focusInput(collection.at(value.length - 1)?.element);\n return;\n }\n }\n },\n [collection, sanitizeValue, setValue, validation],\n );\n\n // re-validate when the validation type changes\n const validationTypeRef = React.useRef(validation);\n React.useEffect(() => {\n if (!validation) {\n return;\n }\n\n if (validationTypeRef.current?.type !== validation.type) {\n validationTypeRef.current = validation;\n setValue(sanitizeValue(value.join('')));\n }\n }, [sanitizeValue, setValue, validation, value]);\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n const firstInput = collection.at(0)?.element;\n const locateForm = React.useCallback(() => {\n let formElement: HTMLFormElement | null | undefined;\n if (form) {\n const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n if (isFormElement(associatedElement)) {\n formElement = associatedElement;\n }\n } else if (hiddenInputRef.current) {\n formElement = hiddenInputRef.current.form;\n } else if (firstInput) {\n formElement = firstInput.form;\n }\n\n return formElement ?? null;\n }, [form, firstInput]);\n\n const attemptSubmit = React.useCallback(() => {\n const formElement = locateForm();\n formElement?.requestSubmit();\n }, [locateForm]);\n\n React.useEffect(() => {\n const form = locateForm();\n if (form) {\n const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [dispatch, locateForm]);\n\n const currentValue = value.join('');\n const valueRef = React.useRef(currentValue);\n const length = collection.size;\n React.useEffect(() => {\n const previousValue = valueRef.current;\n valueRef.current = currentValue;\n if (previousValue === currentValue) {\n return;\n }\n\n if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n onAutoSubmit?.(value.join(''));\n attemptSubmit();\n }\n }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n const isHydrated = useIsHydrated();\n\n return (\n <OneTimePasswordFieldContext\n scope={__scopeOneTimePasswordField}\n value={value}\n attemptSubmit={attemptSubmit}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n form={form}\n name={name}\n placeholder={placeholder}\n type={type}\n hiddenInputRef={hiddenInputRef}\n userActionRef={userActionRef}\n dispatch={dispatch}\n validationType={validationType}\n orientation={orientation}\n isHydrated={isHydrated}\n sanitizeValue={sanitizeValue}\n >\n <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>\n <Collection.Slot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n >\n <Primitive.Root.div\n {...domProps}\n role=\"group\"\n ref={composedRefs}\n onPaste={composeEventHandlers(\n onPaste,\n (event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text/plain');\n dispatch({ type: 'PASTE', value: pastedValue });\n },\n )}\n >\n {children}\n </Primitive.Root.div>\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </OneTimePasswordFieldContext>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldHiddenInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldHiddenInputProps extends Omit<\n React.ComponentProps<'input'>,\n | keyof 'value'\n | 'defaultValue'\n | 'type'\n | 'onChange'\n | 'readOnly'\n | 'disabled'\n | 'autoComplete'\n | 'autoFocus'\n> {}\n\nconst OneTimePasswordFieldHiddenInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n forwardedRef,\n) {\n const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldHiddenInput',\n __scopeOneTimePasswordField,\n );\n const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n return (\n <input\n ref={ref}\n name={name}\n value={value.join('').trim()}\n autoComplete=\"off\"\n autoFocus={false}\n autoCapitalize=\"off\"\n autoCorrect=\"off\"\n autoSave=\"off\"\n spellCheck={false}\n {...props}\n type=\"hidden\"\n readOnly\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldInputProps extends Omit<\n Primitive.PrimitivePropsWithRef<'input'>,\n | 'value'\n | 'defaultValue'\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'autoFocus'\n | 'form'\n | 'name'\n | 'placeholder'\n | 'type'\n> {\n /**\n * Callback fired when the user input fails native HTML input validation.\n */\n onInvalidChange?: (character: string) => void;\n /**\n * User-provided index to determine the order of the inputs. This is useful if\n * you need certain index-based attributes to be set on the initial render,\n * often to prevent flickering after hydration.\n */\n index?: number;\n}\n\nconst OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n {\n __scopeOneTimePasswordField,\n onInvalidChange,\n index: indexProp,\n ...props\n }: ScopedProps<OneTimePasswordFieldInputProps>,\n forwardedRef,\n) {\n // TODO: warn if these values are passed\n const {\n value: _value,\n defaultValue: _defaultValue,\n disabled: _disabled,\n readOnly: _readOnly,\n autoComplete: _autoComplete,\n autoFocus: _autoFocus,\n form: _form,\n name: _name,\n placeholder: _placeholder,\n type: _type,\n ...domProps\n } = props as Primitive.PrimitivePropsWithRef<'input'>;\n\n const context = useOneTimePasswordFieldContext(\n 'OneTimePasswordFieldInput',\n __scopeOneTimePasswordField,\n );\n const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;\n const collection = useCollection(__scopeOneTimePasswordField);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n const index = indexProp ?? (element ? collection.indexOf(element) : -1);\n const canSetPlaceholder = indexProp != null || isHydrated;\n let placeholder: string | undefined;\n if (canSetPlaceholder && context.placeholder && context.value.length === 0) {\n // only set placeholder after hydration to prevent flickering when indices\n // are re-calculated\n placeholder = context.placeholder[index];\n }\n\n const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n const char = context.value[index] ?? '';\n\n const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n React.useEffect(() => {\n return () => {\n if (keyboardActionTimeoutRef.current) {\n window.clearTimeout(keyboardActionTimeoutRef.current);\n }\n };\n }, []);\n\n const totalValue = context.value.join('').trim();\n const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n const isFocusable = index <= lastSelectableIndex;\n\n const validation =\n validationType in INPUT_VALIDATION_MAP\n ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n : undefined;\n\n return (\n <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n <RovingFocusGroup.Item\n {...rovingFocusGroupScope}\n asChild\n focusable={!context.disabled && isFocusable}\n active={index === lastSelectableIndex}\n >\n {({ hasTabStop, isCurrentTabStop }) => {\n const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;\n return (\n <Primitive.Root.input\n ref={composedInputRef}\n type={context.type}\n disabled={disabled}\n aria-label={`Character ${index + 1} of ${collection.size}`}\n autoComplete={supportsAutoComplete ? context.autoComplete : AutoComplete.Off}\n data-1p-ignore={supportsAutoComplete ? undefined : 'true'}\n data-lpignore={supportsAutoComplete ? undefined : 'true'}\n data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}\n data-bwignore={supportsAutoComplete ? undefined : 'true'}\n inputMode={validation?.inputMode}\n maxLength={supportsAutoComplete ? collection.size : 1}\n pattern={validation?.pattern}\n readOnly={context.readOnly}\n value={char}\n placeholder={placeholder}\n data-radix-otp-input=\"\"\n data-radix-index={index}\n {...domProps}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n event.currentTarget.select();\n })}\n onCut={composeEventHandlers(props.onCut, (event) => {\n const currentValue = event.currentTarget.value;\n if (currentValue !== '') {\n // In this case the value will be cleared, but we don't want to\n // set it directly because the user may want to prevent default\n // behavior in the onChange handler. The userActionRef will\n // be set temporarily so the change handler can behave correctly\n // in response to the action.\n userActionRef.current = { type: 'cut' };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onInput={composeEventHandlers(props.onInput, (event) => {\n const value = event.currentTarget.value;\n if (value.length > 1) {\n // Password managers may try to insert the code into a single\n // input, in which case form validation will fail to prevent\n // additional input. Handle this the same as if a user were\n // pasting a value.\n event.preventDefault();\n userActionRef.current = { type: 'autocomplete-paste' };\n dispatch({ type: 'PASTE', value });\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n })}\n onChange={composeEventHandlers(props.onChange, (event) => {\n const value = event.target.value;\n event.preventDefault();\n const action = userActionRef.current;\n userActionRef.current = null;\n\n if (action) {\n switch (action.type) {\n case 'cut':\n // TODO: do we want to assume the user wants to clear the\n // entire value here and copy the code to the clipboard instead\n // of just the value of the given input?\n dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n return;\n case 'autocomplete-paste':\n // the PASTE handler will already set the value and focus the final\n // input; we want to skip focusing the wrong element if the browser fires\n // onChange for the first input. This sometimes happens during autocomplete.\n return;\n case 'keydown': {\n if (action.key === 'Char') {\n // update resulting from a keydown event that set a value\n // directly. Ignore.\n return;\n }\n\n const isClearing =\n action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n if (action.key === 'Clear' || isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n }\n return;\n }\n default:\n action satisfies never;\n return;\n }\n }\n\n // Only update the value if it matches the input pattern\n if (event.target.validity.valid) {\n if (value === '') {\n let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n if (isInputEvent(event.nativeEvent)) {\n const inputType = event.nativeEvent.inputType;\n if (inputType === 'deleteContentBackward') {\n reason = 'Backspace';\n } else if (inputType === 'deleteByCut') {\n reason = 'Cut';\n }\n }\n dispatch({ type: 'CLEAR_CHAR', index, reason });\n } else {\n dispatch({ type: 'SET_CHAR', char: value, index, event });\n }\n } else {\n const element = event.target;\n onInvalidChange?.(element.value);\n requestAnimationFrame(() => {\n if (element.ownerDocument.activeElement === element) {\n element.select();\n }\n });\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n switch (event.key) {\n case 'Clear':\n case 'Delete':\n case 'Backspace': {\n const currentValue = event.currentTarget.value;\n // if current value is empty, no change event will fire\n if (currentValue === '') {\n // if the user presses delete when there is no value, noop\n if (event.key === 'Delete') return;\n\n const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;\n if (isClearing) {\n dispatch({ type: 'CLEAR', reason: 'Backspace' });\n } else {\n const element = event.currentTarget;\n requestAnimationFrame(() => {\n focusInput(collection.from(element, -1)?.element);\n });\n }\n } else {\n // In this case the value will be cleared, but we don't want\n // to set it directly because the user may want to prevent\n // default behavior in the onChange handler. The userActionRef\n // will is set temporarily so the change handler can behave\n // correctly in response to the key vs. clearing the value by\n // setting state externally.\n userActionRef.current = {\n type: 'keydown',\n key: event.key,\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n // Set a short timeout to clear the action tracker after the change\n // handler has had time to complete.\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n\n return;\n }\n case 'Enter': {\n event.preventDefault();\n context.attemptSubmit();\n return;\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (context.orientation === 'horizontal') {\n // in horizontal orientation, the up/down will de-select the\n // input instead of moving focus\n event.preventDefault();\n }\n return;\n }\n // TODO: Handle left/right arrow keys in vertical writing mode\n default: {\n if (event.currentTarget.value === event.key) {\n // if current value is same as the key press, no change event\n // will fire. Focus the next input.\n const element = event.currentTarget;\n event.preventDefault();\n focusInput(collection.from(element, 1)?.element);\n return;\n } else if (\n // input already has a value, but...\n event.currentTarget.value &&\n // the value is not selected\n !(\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd != null &&\n event.currentTarget.selectionEnd > 0\n )\n ) {\n const attemptedValue = event.key;\n if (event.key.length > 1 || event.key === ' ') {\n // not a character; do nothing\n return;\n } else {\n // user is attempting to enter a character, but the input\n // will not update by default since it's limited to a single\n // character.\n const nextInput = collection.from(event.currentTarget, 1)?.element;\n const lastInput = collection.at(-1)?.element;\n if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n // if selection is before the value, set the value of the\n // current input. Otherwise set the value of the next\n // input.\n if (event.currentTarget.selectionStart === 0) {\n dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n } else {\n dispatch({\n type: 'SET_CHAR',\n char: attemptedValue,\n index: index + 1,\n event,\n });\n }\n\n userActionRef.current = {\n type: 'keydown',\n key: 'Char',\n metaKey: event.metaKey,\n ctrlKey: event.ctrlKey,\n };\n keyboardActionTimeoutRef.current = window.setTimeout(() => {\n userActionRef.current = null;\n }, 10);\n }\n }\n }\n }\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n const indexToFocus = Math.min(index, lastSelectableIndex);\n const element = collection.at(indexToFocus)?.element;\n focusInput(element);\n })}\n />\n );\n }}\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n});\n\nexport {\n OneTimePasswordField,\n OneTimePasswordFieldInput,\n OneTimePasswordFieldHiddenInput,\n //\n OneTimePasswordField as Root,\n OneTimePasswordFieldInput as Input,\n OneTimePasswordFieldHiddenInput as HiddenInput,\n};\nexport type {\n OneTimePasswordFieldProps,\n OneTimePasswordFieldInputProps,\n OneTimePasswordFieldHiddenInputProps,\n InputValidationType,\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n return element?.tagName === 'FORM';\n}\n\nfunction removeWhitespace(value: string) {\n return value.replace(/\\s/g, '');\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n if (!element) return;\n if (element.ownerDocument.activeElement === element) {\n // if the element is already focused, select the value in the next\n // animation frame\n window.requestAnimationFrame(() => {\n element.select?.();\n });\n } else {\n element.focus();\n }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n return event.type === 'input';\n}\n\ntype KeyboardActionDetails =\n | {\n type: 'keydown';\n key: 'Backspace' | 'Delete' | 'Clear' | 'Char';\n metaKey: boolean;\n ctrlKey: boolean;\n }\n | { type: 'cut' }\n | { type: 'autocomplete-paste' };\n\ntype UpdateAction =\n | {\n type: 'SET_CHAR';\n char: string;\n index: number;\n event: React.KeyboardEvent | React.ChangeEvent;\n }\n | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }\n | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\ntype InputValidation = Record<\n InputValidationType,\n {\n type: InputValidationType;\n regexp: RegExp;\n pattern: string;\n inputMode: 'text' | 'numeric';\n } | null\n>;\n"],
5
+ "mappings": "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",
6
6
  "names": ["value", "newValue", "form", "OneTimePasswordFieldHiddenInput", "OneTimePasswordFieldInput", "element"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-one-time-password-field",
3
- "version": "0.1.14",
3
+ "version": "0.1.15",
4
4
  "license": "MIT",
5
5
  "source": "./src/index.ts",
6
6
  "main": "./dist/index.js",
@@ -13,17 +13,17 @@
13
13
  "sideEffects": false,
14
14
  "dependencies": {
15
15
  "@radix-ui/number": "1.1.3",
16
- "@radix-ui/primitive": "1.1.7",
16
+ "@radix-ui/react-collection": "1.1.14",
17
17
  "@radix-ui/react-compose-refs": "1.1.4",
18
- "@radix-ui/react-collection": "1.1.13",
19
18
  "@radix-ui/react-context": "1.2.1",
20
19
  "@radix-ui/react-direction": "1.1.3",
21
- "@radix-ui/react-primitive": "2.1.8",
22
- "@radix-ui/react-roving-focus": "1.1.17",
20
+ "@radix-ui/react-primitive": "2.1.9",
23
21
  "@radix-ui/react-use-controllable-state": "1.2.5",
22
+ "@radix-ui/primitive": "1.1.7",
24
23
  "@radix-ui/react-use-effect-event": "0.0.4",
25
24
  "@radix-ui/react-use-is-hydrated": "0.1.2",
26
- "@radix-ui/react-use-layout-effect": "1.1.3"
25
+ "@radix-ui/react-use-layout-effect": "1.1.3",
26
+ "@radix-ui/react-roving-focus": "1.1.18"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react": "^19.2.17",
@@ -13,23 +13,42 @@ import { createContextScope } from '@radix-ui/react-context';
13
13
  import { useDirection } from '@radix-ui/react-direction';
14
14
  import { clamp } from '@radix-ui/number';
15
15
 
16
- type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
16
+ const InputValidationType = {
17
+ Alpha: 'alpha',
18
+ Numeric: 'numeric',
19
+ Alphanumeric: 'alphanumeric',
20
+ None: 'none',
21
+ } as const;
22
+
23
+ const InputType = {
24
+ Password: 'password',
25
+ Text: 'text',
26
+ } as const;
27
+
28
+ const AutoComplete = {
29
+ Off: 'off',
30
+ OneTimeCode: 'one-time-code',
31
+ } as const;
32
+
33
+ type InputValidationType = (typeof InputValidationType)[keyof typeof InputValidationType];
34
+ type InputType = (typeof InputType)[keyof typeof InputType];
35
+ type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
17
36
 
18
37
  const INPUT_VALIDATION_MAP = {
19
38
  numeric: {
20
- type: 'numeric',
39
+ type: InputValidationType.Numeric,
21
40
  regexp: /[^\d]/g,
22
41
  pattern: '\\d{1}',
23
42
  inputMode: 'numeric',
24
43
  },
25
44
  alpha: {
26
- type: 'alpha',
45
+ type: InputValidationType.Alpha,
27
46
  regexp: /[^a-zA-Z]/g,
28
47
  pattern: '[a-zA-Z]{1}',
29
48
  inputMode: 'text',
30
49
  },
31
50
  alphanumeric: {
32
- type: 'alphanumeric',
51
+ type: InputValidationType.Alphanumeric,
33
52
  regexp: /[^a-zA-Z0-9]/g,
34
53
  pattern: '[a-zA-Z0-9]{1}',
35
54
  inputMode: 'text',
@@ -210,16 +229,16 @@ const OneTimePasswordField = /* @__PURE__ */ React.forwardRef<
210
229
  onAutoSubmit,
211
230
  disabled = false,
212
231
  readOnly = false,
213
- autoComplete = 'one-time-code',
232
+ autoComplete = AutoComplete.OneTimeCode,
214
233
  autoFocus = false,
215
234
  form,
216
235
  name,
217
236
  placeholder,
218
- type = 'text',
237
+ type = InputType.Text,
219
238
  // TODO: Change default to vertical when inputs use vertical writing mode
220
239
  orientation = 'horizontal',
221
240
  dir,
222
- validationType = 'numeric',
241
+ validationType = InputValidationType.Numeric,
223
242
  sanitizeValue: sanitizeValueProp,
224
243
  ...domProps
225
244
  }: ScopedProps<OneTimePasswordFieldProps>,
@@ -657,7 +676,7 @@ const OneTimePasswordFieldInput = /* @__PURE__ */ React.forwardRef<
657
676
  type={context.type}
658
677
  disabled={disabled}
659
678
  aria-label={`Character ${index + 1} of ${collection.size}`}
660
- autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}
679
+ autoComplete={supportsAutoComplete ? context.autoComplete : AutoComplete.Off}
661
680
  data-1p-ignore={supportsAutoComplete ? undefined : 'true'}
662
681
  data-lpignore={supportsAutoComplete ? undefined : 'true'}
663
682
  data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}
@@ -944,8 +963,6 @@ function isInputEvent(event: Event): event is InputEvent {
944
963
  return event.type === 'input';
945
964
  }
946
965
 
947
- type InputType = 'password' | 'text';
948
- type AutoComplete = 'off' | 'one-time-code';
949
966
  type KeyboardActionDetails =
950
967
  | {
951
968
  type: 'keydown';