base-ui/packages/react/src/otp-field/root/OTPFieldRoot.spec.tsx at 0ef1b0825531b60fa938c5153866e6a240984a23 · mui/base-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { expectType } from '#test-utils';
import { OTPField } from '@base-ui/react/otp-field';
import { REASONS } from '../../internals/reasons';

type OTPFieldChangeHandler = NonNullable<OTPField.Root.Props['onValueChange']>;
type OTPFieldChangeDetails = Parameters<OTPFieldChangeHandler>[1];
type OTPFieldInvalidHandler = NonNullable<OTPField.Root.Props['onValueInvalid']>;
type OTPFieldInvalidDetails = Parameters<OTPFieldInvalidHandler>[1];
type OTPFieldCompleteHandler = NonNullable<OTPField.Root.Props['onValueComplete']>;
type OTPFieldCompleteDetails = Parameters<OTPFieldCompleteHandler>[1];

function assertOTPFieldChange(details: OTPFieldChangeDetails) {
  if (details.reason === REASONS.inputPaste) {
    const event: ClipboardEvent = details.event;
    void event;
  }

  if (details.reason === REASONS.keyboard) {
    const event: KeyboardEvent = details.event;
    void event;
  }

  if (details.reason === REASONS.inputChange) {
    const event: InputEvent | Event = details.event;
    void event;
  }

  if (details.reason === REASONS.inputClear) {
    const event: InputEvent | FocusEvent | Event = details.event;
    void event;
    // @ts-expect-error keyboard events are not emitted for input-clear
    const keyboardEvent: KeyboardEvent = details.event;
    void keyboardEvent;
  }
}

const handleOTPFieldChange: OTPFieldChangeHandler = (value, details) => {
  expectType<string, typeof value>(value);
  assertOTPFieldChange(details);
};

function assertOTPFieldInvalid(details: OTPFieldInvalidDetails) {
  if (details.reason === REASONS.inputPaste) {
    const event: ClipboardEvent = details.event;
    void event;
  }

  if (details.reason === REASONS.inputChange) {
    const event: InputEvent | Event = details.event;
    void event;
  }
}

const handleOTPFieldInvalid: OTPFieldInvalidHandler = (value, details) => {
  expectType<string, typeof value>(value);
  assertOTPFieldInvalid(details);
};

function assertOTPFieldComplete(details: OTPFieldCompleteDetails) {
  if (details.reason === REASONS.inputPaste) {
    const event: ClipboardEvent = details.event;
    void event;
  }

  if (details.reason === REASONS.inputChange) {
    const event: InputEvent | Event = details.event;
    void event;
  }
}

const handleOTPFieldComplete: OTPFieldCompleteHandler = (value, details) => {
  expectType<string, typeof value>(value);
  assertOTPFieldComplete(details);
};

const otpFieldEventNarrowing = (
  <OTPField.Root
    length={6}
    form="verification-form"
    mask
    validationType="alphanumeric"
    normalizeValue={(value) => value.toUpperCase()}
    onValueChange={handleOTPFieldChange}
    onValueInvalid={handleOTPFieldInvalid}
    onValueComplete={handleOTPFieldComplete}
  />
);
void otpFieldEventNarrowing;

// @ts-expect-error - length is required
const requiresLength = <OTPField.Root />;
void requiresLength;

const customInputModeWithCustomValidation = (
  <OTPField.Root length={6} validationType="none" inputMode="numeric" />
);
void customInputModeWithCustomValidation;

const customInputModeWithBuiltInValidation = (
  <OTPField.Root length={6} validationType="numeric" inputMode="tel" />
);
void customInputModeWithBuiltInValidation;

const normalizesValue = (
  <OTPField.Root length={6} validationType="alphanumeric" normalizeValue={(value) => value} />
);
void normalizesValue;

const removedSanitizeValue = (
  // @ts-expect-error - sanitizeValue was renamed to normalizeValue
  <OTPField.Root length={6} validationType="alphanumeric" sanitizeValue={(value) => value} />
);
void removedSanitizeValue;