├── README.md
├── autocomplete.ts
├── mapped_types.ts
├── special-chars.ts
├── shorts
    └── search-replace.ts
├── literal_union.ts
├── promisify.ts
├── camelcase.ts
├── recursion.ts
├── infer.ts
├── find-types.ts
├── branded_types.ts
├── lodash-fn-pipe.ts
├── exact.ts
├── one_of.ts
├── LICENSE
├── json-typed.ts
├── console.ts
├── template_literals.ts
├── deepreplace.ts
├── never.ts
├── length.ts
├── .gitignore
├── todos.ts
├── calculator.ts
├── fetch.ts
└── improved_react_index.d.ts


/README.md:
--------------------------------------------------------------------------------
1 | # Typescript Rocks
2 | 
3 | This repository is a collection of all the hidden gems I've discovered while using typescript.
4 | 


--------------------------------------------------------------------------------
/autocomplete.ts:
--------------------------------------------------------------------------------
1 | type AutoComplete<T extends string> = T | (string & {});
2 | 
3 | type Lang = AutoComplete<"TypeScript"| "JavaScript">;
4 | 
5 | const valid: Lang = "Anything";
6 | const alsoValid: Lang = "TypeScript";
7 | //                       ^ Autocomplete suggestions from ts-server works 
8 | 


--------------------------------------------------------------------------------
/mapped_types.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | type Events = {
 4 |   add: string;
 5 |   delete: string;
 6 |   move: string;
 7 | }
 8 | 
 9 | const userActions: On<Events> = {
10 |   onAdd: () => {},
11 |   onDelete: () => {},
12 |   onMove: () => {}
13 | }
14 | 
15 | type On<T extends object> = {
16 |   [Key in keyof T as Key extends string ?
17 |     `on${Capitalize<Key>}` : never]: () => any
18 | }
19 | 


--------------------------------------------------------------------------------
/special-chars.ts:
--------------------------------------------------------------------------------
 1 | type Special = Lowercase<string> & Uppercase<string>;
 2 | type TrueIfAlphabet<T extends string> = T extends `${infer Head}${infer Tail}`
 3 |   ? Head extends Special
 4 |     ? false
 5 |     : TrueIfAlphabet<Tail>
 6 |   : true;
 7 | 
 8 | type IsAlphabet<T extends string> = TrueIfAlphabet<T> extends true ? T : never;
 9 | 
10 | 
11 | function isAlphabet<T extends string>(str: IsAlphabet<T>) {
12 |   return [...str].every(char => char.toLowerCase() != char.toUpperCase());
13 | }
14 | 
15 | isAlphabet('äa1sd');
16 | 


--------------------------------------------------------------------------------
/shorts/search-replace.ts:
--------------------------------------------------------------------------------
 1 | type Rating = {
 2 |   aBadLanguage: 'TypeScript', // FROM
 3 |   //aCoolLanguage: 'TypeScript', // TO
 4 | }
 5 | 
 6 | type Replace<
 7 |   InputStr,
 8 |   From extends string,
 9 |   To extends string
10 | > = InputStr extends
11 |   `${infer Before}${From}${infer After}`
12 |   ? `${Before}${To}${After}`
13 |   : InputStr;
14 | 
15 | type ReplaceInObject<Obj> = {
16 |   [Key in keyof Obj as
17 |     Replace<Key, 'Bad', 'Cool'>]: Obj[Key]
18 | }
19 | 
20 | type Check = ReplaceInObject<Rating>;
21 | //   ^?
22 | 


--------------------------------------------------------------------------------
/literal_union.ts:
--------------------------------------------------------------------------------
 1 | type LiteralUnion<Suggestions extends string> = Suggestions | (string & {});
 2 | 
 3 | type ImageMimiTypes =
 4 |     "image/bmp" |
 5 |     "image/gif" |
 6 |     "image/png" |
 7 |     "image/svg+xml" |
 8 |     "image/tiff" |
 9 |     "image/vnd.microsoft.icon" |
10 |     "image/webp";
11 | 
12 | let validValueWithMimeType: LiteralUnion<ImageMimiTypes> = 'image/bmp'; // this is valid and was suggested automatically
13 | let validValueWithoutMimeType: LiteralUnion<ImageMimiTypes> = ''; // this is still valid 
14 | 


--------------------------------------------------------------------------------
/promisify.ts:
--------------------------------------------------------------------------------
 1 | type Callback = ((err?: any) => void) | ((err: any, result: any) => void);
 2 | type GetResult<Cb extends Callback> = 
 3 |         Parameters<Cb>["length"] extends 2 ? Parameters<Cb>[1] : void;
 4 | 
 5 | type Promisified<Fn extends Function> = 
 6 |   Fn extends (...args: [...infer Args, infer Cb extends Callback]) => void
 7 |    ? (...args: Args) => Promise<GetResult<Cb>>
 8 |    : never;
 9 | 
10 | 
11 | function typedPromisify<Fn extends Function>(fn: Fn): Promisified<Fn> {
12 |   return promisify(fn) as Promisified<Fn>;
13 | }
14 | 


--------------------------------------------------------------------------------
/camelcase.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | // hello_youtube
 3 | type Separator = '_' | '-';
 4 | 
 5 | type UppercaseNext<T extends string, Check extends boolean> =
 6 |   Check extends true ? Uppercase<T> : T;
 7 | 
 8 | type CamelCase<T extends string, uppercaseNext extends boolean = false, Save extends string = ''> =
 9 |   T extends `${infer head}${infer tail}`
10 |     ? head extends Separator
11 |       ? CamelCase<tail, true, Save>
12 |       : CamelCase<tail,  false, `${Save}${UppercaseNext<head, uppercaseNext>}`>
13 |     : Save;
14 | 
15 | type SnakeCased = 'hello_youtube';
16 | 
17 | type CamelCased = CamelCase<SnakeCased>;
18 | //   ^?
19 | 


--------------------------------------------------------------------------------
/recursion.ts:
--------------------------------------------------------------------------------
 1 | // builtin type: Awaited
 2 | 
 3 | type Resolved = Awaited<Promise<Promise<Promise<string>>>>;
 4 | //    ^? 
 5 | 
 6 | type Tupel<Type, Length extends number, Tupel extends Type[] = []> = Tupel['length'] extends Length ? Tupel : TupelSized<Type, Length, [Type, ...Tupel]>;
 7 | 
 8 | 
 9 | type T3 = Tupel<number, 4>;
10 | //   ^?
11 | 
12 | // MAX depth 1000 
13 | 
14 | interface Form {
15 |     a: string;
16 |     b: {
17 |         c: {
18 |             d: string;
19 |         }
20 |     }
21 | }
22 | 
23 | type ArrayOrNever<T> = T extends any[] ? T : never;
24 | 
25 | type Path<T> = T extends object ? {[Key in keyof T]: [Key] | [Key, ...Path<T[Key]>]}[keyof T] : never;
26 | type R = Path<Form>;
27 | //   ^?
28 | 


--------------------------------------------------------------------------------
/infer.ts:
--------------------------------------------------------------------------------
 1 | type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
 2 | 
 3 | function add(a: number, b: number): number {
 4 |   return a + b;
 5 | }
 6 | 
 7 | type AddReturnType = MyReturnType<typeof add>;
 8 | //   ^?
 9 | 
10 | 
11 | type RgbInfer<T> = T extends `rgb(${infer first},${infer second},${infer third})`
12 | ? [first, second, third] : never;
13 | 
14 | type RgbInferNumber<T> = T extends `rgb(${infer first extends number},${infer second extends number},${infer third extends number})`
15 | ? [first, second, third] : never;
16 | 
17 | type ValidRgb = RgbInfer<'rgb(1,2,3)'>;
18 | //    ^?
19 | type ValidRgbNumber = RgbInferNumber<'rgb(1,2,3)'>;
20 | //    ^? 
21 | 
22 | 
23 | type InvalidRgb = RgbInferNumber<'rgb(1,2,a)'>;
24 | //    ^? 
25 | 
26 | 


--------------------------------------------------------------------------------
/find-types.ts:
--------------------------------------------------------------------------------
 1 | type Account = {
 2 |   id: ComplexId;
 3 |   login: string;
 4 | };
 5 | 
 6 | type FileData = {
 7 |   id: number;
 8 |   blob: string;
 9 | };
10 | 
11 | type ComplexId = {
12 |   mainId: boolean;
13 |   id: Date;
14 | };
15 | 
16 | type Person = {
17 |   id: string;
18 |   firstname: string;
19 |   lastname: string;
20 |   fileData: FileData;
21 |   account: Account;
22 | };
23 | 
24 | 
25 | type FindAllTypesForKey<SearchIn, KeyToLookFor extends PropertyKey> = 
26 | SearchIn extends object 
27 |   ? (KeyToLookFor extends keyof SearchIn ? SearchIn[KeyToLookFor]: never)
28 |     | {
29 |       [P in keyof SearchIn] : FindAllTypesForKey<SearchIn[P], KeyToLookFor>
30 |     }[keyof SearchIn]
31 |   : never;
32 | 
33 | type Id = FindAllTypesForKey<Person, 'id'>;
34 | //   ^?
35 | 


--------------------------------------------------------------------------------
/branded_types.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | declare const __brand: unique symbol;
 3 | 
 4 | type Branded<T, Brand> = T & {[__brand]: Brand};
 5 | 
 6 | const email: string = 'hi@youtube.com';
 7 | 
 8 | type Email = Branded<string, 'Email'>;
 9 | function sendEmail(
10 |   address: Email,
11 |   text :string
12 | )
13 | 
14 | {
15 |   console.log(`send email to ${address} with text ${text}`);
16 | }
17 | 
18 | function isValidEmail(input: string): input is Email {
19 |   return input.includes('@');
20 | }
21 | 
22 | 
23 | function assertValidEmail(input: string): asserts input is Email {
24 |   if(!input.includes('@')) {
25 |     throw new Error(`${input} is no email`);
26 |   }
27 | }
28 | 
29 | assertValidEmail(email);
30 | email
31 | // ^?
32 | sendEmail(email, 'our text');
33 | 
34 | 
35 | sendEmail('totally not an email', 'asdf');
36 | 


--------------------------------------------------------------------------------
/lodash-fn-pipe.ts:
--------------------------------------------------------------------------------
 1 | type PipeFn = (...args: any[]) => any;
 2 | 
 3 | type PipeChain<RemainingFns extends PipeFn[], CollectedFns extends PipeFn[] = []> = RemainingFns extends [
 4 |   infer First extends PipeFn,
 5 |   infer Second extends PipeFn,
 6 |   ...infer Rem extends PipeFn[]
 7 | ]
 8 |   ? PipeChain<[(...args: [ReturnType<First>]) => ReturnType<Second>, ...Rem], [...CollectedFns, First]>
 9 |   : [...CollectedFns, ...RemainingFns];
10 | 
11 | type LastFn<Fns extends PipeFn[]> = Fns extends [...PipeFn[], infer Last extends PipeFn] ? Last : Fns[0];
12 | 
13 | function typedPipe<FnArgs extends PipeFn[]>(...args: PipeChain<FnArgs>) {
14 |   return fp.pipe(args) as (...args: Parameters<FnArgs[0]>) => ReturnType<LastFn<FnArgs>>;
15 | }
16 | const a = (a: string) => ({a: 'a', b: 1});
17 | const b = (c: {a: string, b: number}) => true;
18 | const c = (b: boolean) => new Date();
19 | const p = typedPipe(a, b, c);
20 | //    
21 | 


--------------------------------------------------------------------------------
/exact.ts:
--------------------------------------------------------------------------------
 1 | type KeyOnlyInFirst<First, Second> = Exclude<keyof First, keyof Second>;
 2 | 
 3 | type ExactSimple<Actual, Wanted> = Actual extends Wanted 
 4 |   ? Wanted extends Actual
 5 |     ? Actual
 6 |     : never
 7 |   : never;
 8 | 
 9 | type ExactBetter<Actual extends Wanted, Wanted> = 
10 |   {
11 |     [Key in keyof Actual]: Key extends KeyOnlyInFirst<Actual, Wanted> ? never : Actual[Key]
12 |   } 
13 | 
14 | 
15 |   type Dev = {
16 |     name: string
17 |   }
18 | 
19 | function testBetter<T extends Dev>(t: ExactBetter<T, Dev>) {
20 |   return t;
21 | }
22 | 
23 | function testSimple<T extends Dev>(t: ExactSimple<T, Dev>) {
24 |   return t;
25 | }
26 | const inputWrong = {name: 'asdf', v: true};
27 | const resultWrongSimple = testSimple(inputWrong);
28 | const resultWrongBetter = testBetter(inputWrong);
29 | 
30 | const inputCorrect = {name: 'asdf'};
31 | const resultSimple = testSimple(inputCorrect);
32 | const resultBetter = testBetter(inputCorrect);
33 | 


--------------------------------------------------------------------------------
/one_of.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | type BaseMessage = { id: string, timestamp: number };
 3 | type TextMessage = BaseMessage & { text: string; };
 4 | type ImgMessage = BaseMessage & { imgPath: string };
 5 | type UrlMessage = BaseMessage & { url: string; };
 6 | 
 7 | type Message = TextMessage | UrlMessage | ImgMessage;
 8 | type MessageTypesArray = OneOf<[TextMessage, UrlMessage, ImgMessage]>;
 9 | 
10 | type MergeTypes<TypesArray extends any[], Res = {}> =
11 |   TypesArray extends [infer Head, ...infer Rem]
12 |     ? MergeTypes<Rem, Res & Head>
13 |     : Res;
14 | 
15 | type OneOf<
16 |   TypesArray extends any[],
17 |   Res = never,
18 |   AllProperties = MergeTypes<TypesArray>> =
19 |   TypesArray extends [infer Head, ...infer Rem]
20 |     ? OneOf<Rem, Res | OnlyFirst<Head, AllProperties>, AllProperties>
21 |     : Res;
22 |  
23 | type SimpleOneOf<F, S> = OnlyFirst<F, S> | OnlyFirst<S, F>;
24 | 
25 | type OnlyFirst<F, S> = F & {[Key in keyof Omit<S, keyof F>]?: never};
26 | 
27 | const message: MessageTypesArray = {
28 |   id: '1',
29 |   timestamp: new Date().getTime(),
30 | 
31 |   imgPath: 'path'
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 typed-rocks
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/json-typed.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | const obj = {
 3 |   a: 'hello',
 4 |   b: 1,
 5 |   c: undefined,
 6 |   d: {
 7 |     toJSON() {
 8 |       return 42;
 9 |     }
10 |   },
11 |   e: () => console.log('hi from e')
12 | }
13 | 
14 | const str = JSON.stringify(obj);//?
15 | //    ^?
16 | 
17 | const parsed = JSON.parse(str);
18 | //     ^?
19 | 
20 | writePersonObject('');
21 | 
22 | 
23 | function writePersonObject(str: Stringified<{firstname: string, lastname: string}>) {
24 | 
25 | }
26 | 
27 | type JsonifiedValue<T> = T extends string | number | null | boolean
28 | ? T 
29 | : T extends {toJSON(): infer R} ? R
30 | : T extends undefined | ((...args: any[]) => any) ? never
31 | : T extends object ? JsonifiedObject<T>
32 | : never;
33 | 
34 | type JsonifiedObject<T> = {
35 |   [Key in keyof T as [JsonifiedValue<T[Key]>] extends [never] ? never : Key]: JsonifiedValue<T[Key]>
36 | }
37 | 
38 | parsed.b
39 | 
40 | type Stringified<ObjType> = string & {source: ObjType};
41 | 
42 | interface JSON {
43 |   stringify<T>(value: T, replacer?: null | undefined, space?: string | number): Stringified<T>;
44 |   parse<T>(str: Stringified<T>, replacer?: null | undefined): JsonifiedObject<T>;
45 | }
46 | 


--------------------------------------------------------------------------------
/console.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | type Mapping = {
 3 |   [Key in "d" | "i" | "f"]: number
 4 | } & 
 5 | {s: string} &
 6 | {[Key in "o" | "O"]: object};
 7 | 
 8 | type AddMappedToArray<ArgsArray extends any[], Char> = 
 9 |   Char extends keyof Mapping ? [...ArgsArray, Mapping[Char]] : ArgsArray;
10 | 
11 | type FirstChar<T extends string> = T extends `${infer Head}${string}` ? Head : T;
12 | 
13 | type ArgsFromPlaceholder<
14 |   RemainingString extends string,
15 |   ArgsArray extends any[] = []
16 | > = RemainingString extends `${infer Head}${infer Tail}`
17 |   ? Head extends "%"
18 |     ? ArgsFromPlaceholder<Tail, AddMappedToArray<ArgsArray, FirstChar<Tail>>>
19 |     : ArgsFromPlaceholder<Tail, ArgsArray>
20 |   : [...ArgsArray, ...args: any[]];
21 | 
22 | type BaseTypes = string | number | object | bigint | boolean | symbol | null | undefined;
23 | 
24 | type OptionalParams<Input> = Input extends string ? ArgsFromPlaceholder<Input> : any[];
25 | 
26 | declare var console: Omit<Console, 'log'> & {
27 |   log<T extends BaseTypes>(
28 |     message?: T, ...optionalParams: OptionalParams<T>
29 |   ): void;
30 | }
31 | 
32 | console.log("%s %d, YouTube", "Hi", 5);
33 | 
34 | console.log("Hi %d, %s", "Five", "YouTube");
35 | 


--------------------------------------------------------------------------------
/template_literals.ts:
--------------------------------------------------------------------------------
 1 | type ChessLetters = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
 2 | type ChessNumbers = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 3 | 
 4 | type BoardPositions = `${ChessLetters}${ChessNumbers}`[];
 5 | 
 6 | const b: BoardPositions = ['A1'];
 7 | 
 8 | 
 9 | type RgbCss = `rgb(${number},${number},${number})`;
10 | type RgbaCss = `rgb(${number},${number},${number}${`,${number}` | ''})`;
11 | 
12 | const rgbCss: RgbCss = 'rgb(1,2,3)';
13 | const rgbaCss: RgbaCss = 'rgb(1,2,3,2)';
14 | 
15 | 
16 | type GapType = 'margin' | 'padding';
17 | type GapPosition = 'left' | 'right' | 'top' | 'bottom';
18 | type GapCss = GapType | `${GapType}-${GapPosition}`;
19 | //   ^?
20 | 
21 | type SizeType = 'rem' | 'px';
22 | type SizeCss = `${number}${SizeType}`;
23 | 
24 | type MarginPadding = {
25 |   [Key in GapCss]?: SizeCss
26 | }
27 | 
28 | const margin: MarginPadding = {
29 |   "margin-left": '1rem'
30 | }
31 | 
32 | type FirstChar<T extends string> =  T extends `${infer head}${infer tail}` ? head : '';
33 | type StartsWithNumber<T extends string> = T extends `${infer head extends number}${infer tail}` ? head : '';
34 | 
35 | type First = FirstChar<'hello youtube'>;
36 | //   ^?
37 | 
38 | type Starts = StartsWithNumber<'1asdf'>;
39 | //   ^?
40 | 


--------------------------------------------------------------------------------
/deepreplace.ts:
--------------------------------------------------------------------------------
 1 | type LegacySystemApi = {
 2 |   legacy_nameV1: string;
 3 |   legacy_nameV2: string;
 4 |   legacy_nameV3: string;
 5 |   legacy_timstampV1: string;
 6 |   new_timestampV1: string;
 7 |   legacy_userV1: {
 8 |     legacy_uuidV1: number,
 9 |     legacy_uuid_V2: string,
10 |     legacy_firstnameV1: string
11 |   }
12 | }
13 | 
14 | type OurApi = {
15 |   user: {
16 |     firstname: string;
17 |     id: string;
18 |   }
19 |   name: string;
20 |   timestamp: string;
21 | }
22 | 
23 | 
24 | type FromTo = { from: string, to: string };
25 | 
26 | type SearchAndReplace<T, From extends string, To extends string> =
27 |   T extends `${infer Before}${From}${infer After}`
28 |     ? SearchAndReplace<`${Before}${To}${After}`, From, To> : T;
29 | 
30 | type SearchAndReplaceAll<T, FromToArray extends FromTo[]> =
31 |   FromToArray extends [
32 |       { from: infer From extends string, to: infer To extends string },
33 |       ...infer Remaining extends FromTo[]
34 |     ]
35 |     ? SearchAndReplaceAll<SearchAndReplace<T, From, To>, Remaining>
36 |     : T;
37 | 
38 | type Replacements = [
39 |   { from: 'legacy_', to: '' },
40 |   { from: 'new_', to: '' },
41 |   { from: `V${number}`, to: '' },
42 |   { from: 'timstamp', to: 'timestamp' },
43 |   { from: 'uuid_', to: 'id' },
44 |   { from: 'uuid', to: 'id' },
45 | ]
46 | 
47 | 
48 | type DeepReplace<T, FromToArray extends FromTo[]> = {
49 |   [Key in keyof T as SearchAndReplaceAll<Key, FromToArray>]: DeepReplace<T[Key], FromToArray>
50 | }
51 | 
52 | type Cleaned = DeepReplace<
53 |   LegacySystemApi, Replacements
54 | >;
55 | const clean: Cleaned = {
56 |   user: {
57 |     firstname: 'Christian',
58 |     id: '1234'
59 |   },
60 |   name: "No more Legacy",
61 |   timestamp: '1111'
62 | }
63 | 


--------------------------------------------------------------------------------
/never.ts:
--------------------------------------------------------------------------------
 1 | function error(): never {
 2 | 	throw new Error('never returns');
 3 | }
 4 | 
 5 | function neverDone(): never {
 6 | 	while(true) {
 7 | 	}
 8 | }
 9 | 
10 | // without never
11 | function error() {
12 |   throw new Error('any error');
13 | }
14 | let possiblyNull: string | null = '' as any;
15 | if(!possiblyNull)  error();
16 | possiblyNull;
17 | //   ^? let possiblyNull: string | null
18 | 
19 | // with never
20 | function error(): never {
21 |   throw new Error('any error');
22 | }
23 | let possiblyNull: string | null = '' as any;
24 | if(!possiblyNull)  error();
25 | possiblyNull;
26 | //   ^? let possiblyNull: string
27 | 
28 | // or 
29 | const nonNull = possiblyNull ?? error();
30 | 
31 | function unknownLanguages(lang: never): never {
32 | 	throw new Error(`${lang} not known`);
33 | }
34 | type Languages = 'js' | 'ts';
35 | 
36 | function getRealName(language: Languages): string {
37 | 	switch(language) {
38 | 		case 'js':
39 | 			return 'JavaScript';
40 | 		case 'ts':
41 | 			return 'TypeScript';
42 | 		default:
43 | 			return unknownLanguages(language);
44 | 	}
45 | }
46 | 
47 | type ImageMessage = {
48 |   imgPath: string;
49 |   text?: never;
50 | }
51 | 
52 | type TextMessage = {
53 |   text: string;
54 |   imgPath?: never;
55 | }
56 | 
57 | type Message = {timestamp: number, sender: string} & (ImageMessage | TextMessage);
58 | 
59 | const m: Message = {
60 |   imgPath: '/path/img', 
61 |   sender: 'Christian Worz', 
62 |   text: 'A text',
63 |   timestamp: 123
64 | }
65 | 
66 | type Filter<Obj extends Object, ValueType> = {
67 |     [Key in keyof Obj 
68 |         as ValueType extends Obj[Key] ? Key : never]
69 |         : Obj[Key]
70 | }
71 | 
72 | type IsNever<T> = T extends never ? true : false;
73 | 
74 | type R = IsNever<never>;
75 | //   ^? never => never is an empty union type so nothing to check for to extend. so its never again
76 | 
77 | // Fix:
78 | 
79 | type IsNever<T> = [T] extends [never] ? true : false;
80 | 
81 | type R = IsNever<never>;
82 | //   ^?
83 | 


--------------------------------------------------------------------------------
/length.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | type Length<T extends string, Counter extends number[] = []> = 
 3 |   T extends `${string}${infer Tail}`
 4 |     ? Length<Tail, [...Counter, 0]>
 5 |     : Counter['length'];
 6 | 
 7 | // Compare<1,2>
 8 | type Compare<First extends number, Second extends number, Counter extends number[] = []> = 
 9 |   First extends Second 
10 |   ? 'equal'
11 |   : Counter['length'] extends First
12 |     ? 'less'
13 |     : Counter['length'] extends Second
14 |       ? 'greater'
15 |       : Compare<First, Second, [...Counter, 0]>;
16 | 
17 | type MaxLength<T extends string, Max extends number> =
18 |   Compare<Length<T>, Max> extends 'less' | 'equal' ? T : never;
19 | 
20 | type MinLength<T extends string, Min extends number> =
21 |   Compare<Min, Length<T>> extends 'less' | 'equal' ? T : never;
22 | 
23 | type InRange<T extends string, Min extends number, Max extends number> = 
24 |   MinLength<T, Min> & MaxLength<T, Max>;
25 | 
26 | function maxOrThrow<T extends string, Max extends number>(
27 |   str: MaxLength<T, Max>, max: Max
28 | ): string {
29 |   if(str.length > max) {
30 |     throw new Error(`${str} is longer than ${max}`);
31 |   }
32 | 
33 |   return str;
34 | }
35 | 
36 | function minOrThrow<T extends string, Min extends number>(
37 |   str: MinLength<T, Min>, min: Min
38 | ): string {
39 |   if(str.length > min) {
40 |     throw new Error(`${str} is shorter than ${min}`);
41 |   }
42 | 
43 |   return str;
44 | }
45 | 
46 | 
47 | function exactOrThrow<T extends string, Exact extends number>(
48 |   str: MinLength<T, Exact>, exact: Exact
49 | ): string {
50 |   if(str.length !== exact) {
51 |     throw new Error(`${str} is not exact ${exact}`);
52 |   }
53 | 
54 |   return str;
55 | }
56 | 
57 | function inRangeOrThrow<T extends string, Min extends number, Max extends number>(
58 |   str: InRange<T, Min, Max>, min: Min, max: Max
59 | ): string {
60 |   if(str.length > max) {
61 |     throw new Error(`${str} is longer than ${max}`);
62 |   } else if(str.length < min) {
63 |     throw new Error(`${str} is shorter than ${min}`);
64 |   }
65 | 
66 |   return str;
67 | }
68 | 
69 | 
70 | 
71 | const a = 'Test'
72 | 
73 | inRangeOrThrow(a, 1, 4);
74 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | .pnpm-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # Snowpack dependency directory (https://snowpack.dev/)
 46 | web_modules/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Optional stylelint cache
 58 | .stylelintcache
 59 | 
 60 | # Microbundle cache
 61 | .rpt2_cache/
 62 | .rts2_cache_cjs/
 63 | .rts2_cache_es/
 64 | .rts2_cache_umd/
 65 | 
 66 | # Optional REPL history
 67 | .node_repl_history
 68 | 
 69 | # Output of 'npm pack'
 70 | *.tgz
 71 | 
 72 | # Yarn Integrity file
 73 | .yarn-integrity
 74 | 
 75 | # dotenv environment variable files
 76 | .env
 77 | .env.development.local
 78 | .env.test.local
 79 | .env.production.local
 80 | .env.local
 81 | 
 82 | # parcel-bundler cache (https://parceljs.org/)
 83 | .cache
 84 | .parcel-cache
 85 | 
 86 | # Next.js build output
 87 | .next
 88 | out
 89 | 
 90 | # Nuxt.js build / generate output
 91 | .nuxt
 92 | dist
 93 | 
 94 | # Gatsby files
 95 | .cache/
 96 | # Comment in the public line in if your project uses Gatsby and not Next.js
 97 | # https://nextjs.org/blog/next-9-1#public-directory-support
 98 | # public
 99 | 
100 | # vuepress build output
101 | .vuepress/dist
102 | 
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 | 
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 | 
110 | # Serverless directories
111 | .serverless/
112 | 
113 | # FuseBox cache
114 | .fusebox/
115 | 
116 | # DynamoDB Local files
117 | .dynamodb/
118 | 
119 | # TernJS port file
120 | .tern-port
121 | 
122 | # Stores VSCode versions used for testing VSCode extensions
123 | .vscode-test
124 | 
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*
131 | 


--------------------------------------------------------------------------------
/todos.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | type Position = [number, number, string];
 3 | type isLength<T extends any[], Length extends number> = T['length'] extends Length ? true : false;
 4 | 
 5 | type Inc<T extends 0[]> = [0, ...T];
 6 | 
 7 | type InitCount<Length extends number, Count extends 0[] = []> = Count['length'] extends Length ? Count : InitCount<Length, [...Count, 0]>;
 8 | 
 9 | type WriteHorizontal<XStart extends 0[], YStart extends number, Str extends string, WriteArray extends Position[] = []> = Str extends `${infer Head extends string}${infer Rest extends string}` 
10 | ? WriteHorizontal<Inc<XStart>, YStart, Rest, [...WriteArray, [XStart['length'], YStart, Head]]>
11 | : WriteArray;
12 | 
13 | type WriteVertical<YStart extends 0[], XStart extends number, Str extends string, WriteArray extends Position[] = []> = Str extends `${infer Head extends string}${infer Rest extends string}` 
14 | ? WriteVertical<Inc<YStart>, XStart, Rest, [...WriteArray, [XStart, YStart['length'], Head]]>
15 | : WriteArray;
16 | 
17 | 
18 | type WriteWord<XStart extends number, YStart extends number, Str extends string> = WriteHorizontal<InitCount<XStart>, YStart, Str>;
19 | 
20 | type CheckBox<T extends number> = T extends 1 
21 | ? '✅' :  T extends 0 ? '🔲' : '🔥'; 
22 | 
23 | type Todo< done extends number, Todo extends string, Line extends number> = WriteWord<1, Line, `${CheckBox<done>} ${Todo}`>; 
24 | 
25 | 
26 | type GetPositionMatching<Positions extends Position[], XSearch extends number, YSearch extends number> = 
27 | Positions extends [[infer X extends number, infer Y extends number, infer Str extends string], ...infer Rest extends Position[]]
28 |   ? XSearch extends X 
29 |     ? YSearch extends Y 
30 |       ? [X, Y, Str]
31 |       : GetPositionMatching<Rest, XSearch, YSearch>
32 |     : GetPositionMatching<Rest, XSearch, YSearch>
33 |   : false;
34 | 
35 | type DrawAt<Positions extends Position[], Width extends number, Height extends number, Empty extends string, R extends string = '', XCount extends 0[] = [], YCount extends 0[] = []> =
36 | isLength<XCount, Width> extends true
37 |   ? isLength<YCount, Height> extends true
38 |     ? R
39 |     : DrawAt<Positions, Width, Height, Empty, `${R}<br>`, [], Inc<YCount>>
40 |   : GetPositionMatching<Positions, XCount['length'], YCount['length']> extends [number, number, infer Str extends string]
41 |     ? DrawAt<Positions, Width, Height, Empty, `${R}${Str}`, Inc<XCount>, YCount>
42 |     : DrawAt<Positions, Width, Height, Empty, `${R}${Empty}`, Inc<XCount>, YCount>;
43 | 
44 | type Repeat<Char extends string, Times extends number, Count extends 0[] = [], Word extends string = ''> = Count['length'] extends Times 
45 | ? Word 
46 | : Repeat<Char, Times, [...Count, 0], `${Word}${Char}`>;    
47 | type HorizontalLine<XStart extends number, YStart extends number, Length extends number> = 
48 | WriteHorizontal<InitCount<XStart>, YStart, Repeat<'-', Length>>;
49 | type VerticalLine<XStart extends number, YStart extends number, Length extends number> = 
50 | WriteVertical<InitCount<YStart>, XStart, Repeat<'|', Length>>;
51 |   
52 | 
53 | 
54 |   type block = [
55 |     ...HorizontalLine<0, 0, 23>,
56 |     ...HorizontalLine<0, 2, 25>,
57 |     ...HorizontalLine<0, 16, 25>,
58 |     ...VerticalLine<22, 1, 1>,
59 |     ...VerticalLine<0, 1, 1>,
60 |   ];
61 |   
62 | 
63 | type Todos<R extends any[]> = [
64 |   ...WriteWord<8, 1, 'Agenda'>,
65 |   ...Todo<R[0], 'mapped types', 4>,
66 |   ...Todo<R[1], 'template literals', 6>,
67 |     ...Todo<R[2], 'never/conditionals',8>,
68 |     ...Todo<R[3], 'infer', 10>,
69 |     ...Todo<R[4], 'recursion', 12>,
70 |     ...Todo<R[5], 'branded types', 14>,
71 |   ]
72 | 
73 | type State = [0,1,1,1,1,1];
74 | type Result = DrawAt<[...block, ...Todos<State>], 23, 16, ' '>;


--------------------------------------------------------------------------------
/calculator.ts:
--------------------------------------------------------------------------------
 1 | type Numbers = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 2 | type Parentheses = '(' | ')';
 3 | type Signs = '+' | '-' | '*' | '/';
 4 | 
 5 | type AfterNumbers = { [key in Numbers]: Signs | ')' | Numbers | '' };
 6 | type AfterSigns = { [key in Signs]: '(' | Numbers };
 7 | type AfterBrackets = { '(': '(' | Numbers; ')': Signs | ')' | '' };
 8 | type NextAllowed = AfterNumbers & AfterSigns & AfterBrackets;
 9 | 
10 | type AllAllowed = Numbers | Parentheses | Signs;
11 | 
12 | type AllowedStarts =
13 |   { [key in Numbers]: Signs | Numbers | '' } &
14 |   { '(': '(' | Numbers };
15 | 
16 | type IsEmpty<T extends string | any[]> = T extends '' ? true
17 |   : T['length'] extends 0 ? true : false;
18 | 
19 | type Remove<T, ToRemove extends string, Collect extends string = ''> =
20 |   T extends `${infer Head}${infer Remaining}`
21 |     ? Remove<Remaining, ToRemove, `${Collect}${Head extends ToRemove ? '' : Head}`>
22 |     : Collect;
23 | 
24 | type First<T extends string> =
25 |   IsEmpty<T> extends true
26 |     ? '' :
27 |     T extends `${infer Head extends AllAllowed}${string}` ? Head : false;
28 | 
29 | type CorrectStart<T extends string> =
30 |   T extends `${infer Head extends keyof AllowedStarts}${infer Remaining}`
31 |     ? First<Remaining> extends AllowedStarts[Head]
32 |       ? true : false
33 |     : false;
34 | 
35 | type IsNextAllowed<T extends string> =
36 |   T extends `${infer Head extends AllAllowed}${infer Remaining}`
37 |     ? First<Remaining> extends NextAllowed[Head]
38 |       ? IsNextAllowed<Remaining>
39 |       : false
40 |     : IsEmpty<T>;
41 | 
42 | type OnlyBrackets<T> = Remove<T, Exclude<AllAllowed | ' ', Parentheses>>;
43 | 
44 | type EmptyStringAndEmptyArray<S extends string, A extends any[]> =
45 |   [IsEmpty<S>, IsEmpty<A>] extends true[] ? true : false;
46 | 
47 | type ParenthesesCheck<T extends string, Stack extends Parentheses[] = []> =
48 |   T extends `(${infer Remaining}`
49 |     ? ParenthesesCheck<Remaining, ['(', ...Stack]>
50 |     : T extends `)${infer Remaining}`
51 |       ? Stack extends ['(', ...infer RemainingStack extends Parentheses[]]
52 |         ? ParenthesesCheck<Remaining, RemainingStack>
53 |         : false
54 |       : EmptyStringAndEmptyArray<T, Stack>;
55 | 
56 | type Calculator<T extends string, NoSpace extends string = Remove<T, ' '>> =
57 |   [
58 |     ParenthesesCheck<OnlyBrackets<T>>,
59 |     CorrectStart<NoSpace>,
60 |     IsNextAllowed<NoSpace>] extends true[]
61 |     ? T : never;
62 | 
63 | function validate<T extends string>(input: Calculator<T>): T {
64 |   return input;
65 | }
66 | 
67 | const v1 = validate("(1 * (2 + 3))");
68 | const v2 = validate("3 * (5 + 2) / (4 - 1)");
69 | const v3 = validate("((7 - 2) * 4) / (3 + 1)");
70 | const v4 = validate("10 - ((2 + 3) * 4)");
71 | const v5 = validate("((2 * 3) + 5) / (6 - 1)");
72 | const v6 = validate("(1 + 2) * 3 - 4 / (5 + 6)");
73 | const v7 = validate("2 * ((3 + 4) * (5 - 1)) / 6");
74 | const v8 = validate("((8 / 2) + (7 * 2)) * (9 - 1)");
75 | const v9 = validate("(2 * (3 + 4) / (5 - 1))");
76 | const v10 = validate("(10 - 2) / (3 + (5 - 4))");
77 | 
78 | 
79 | const e2 = validate("(4 * 6 + 3) / )2 - 1(");//(mismatched brackets)
80 | const e3 = validate("3 * / 2");//(missing operand)
81 | const e4 = validate("(2+3)*(4-)"); //(missing operand)
82 | const e5 = validate("5 + * 3"); // (misplaced operator)
83 | const e6 = validate("((7 - 2) * 4 / (3 + 1)"); // (missing closing bracket)
84 | const e7 = validate("2 * (3 + 4)) * (5 - 1)) / 6"); // (mismatched brackets)
85 | const e8 = validate("((8 / 2) + (7 * 2)) * (9 - 1"); // (missing closing bracket)
86 | const e9 = validate("2 * (3 + 4) / (5 - 1))"); // (mismatched brackets)
87 | const e10 = validate("(10 - 2) / (3 + (5 - 4)) + "); // (missing operand)
88 | 


--------------------------------------------------------------------------------
/fetch.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | type Todo = {userId: string, title: string, completed: boolean};
  3 | 
  4 | const apiUrl = 'any url';
  5 | 
  6 | //Issues
  7 | // 1. No Generic Responsetype
  8 | // 2. Typesafe method
  9 | // 3. Body not always allowed
 10 | // 4. type safe headers
 11 | const resp = fetch<Todo>(apiUrl, {
 12 |   method: 'PUT',
 13 |   body: 'asdf',
 14 |   headers: {
 15 |     'Content-Type': 'application/json',
 16 |     'Accept': 'application/json',
 17 |   }
 18 | })
 19 |   .then(resp => resp.json());
 20 | 
 21 | type Type = string;
 22 | 
 23 | const a =
 24 | 
 25 | fetch<Type>(apiUrl)
 26 | .then(r => r.json())
 27 | //          ^? Promise<Type>
 28 | 
 29 | type TypedHeaders = RequestInit['headers'] & PreparedHeaders;
 30 | 
 31 | type PreparedHeaders = Partial<{
 32 |   'Content-Type': MimeTypes,
 33 |   'Accept': MimeTypes,
 34 |   'Authorization': `Bearer ${string}`
 35 | }>;
 36 | 
 37 | declare function fetch<ResponseType = any>(
 38 |   input: RequestInfo | URL, init?: TypedRequestInit
 39 | ): Promise<TypedResponse<ResponseType>>;
 40 | 
 41 | type HttpVerbs = 'POST' | 'PUT' | 'DELETE' | 'UPDATE' | 'GET' | 'CONNECT' | 'HEAD' |
 42 |   'OPTIONS';
 43 | 
 44 | type WithBody = Extract<HttpVerbs, 'POST' | 'PUT' | 'DELETE' | 'UPDATE'>;
 45 | type NonBody = Exclude<HttpVerbs, WithBody>;
 46 | 
 47 | type MethodBodyCombination = {method?: WithBody, body?: RequestInit['body']} |
 48 |   {method?: NonBody, body?: never}
 49 | 
 50 | type TypedRequestInit = RequestInit & MethodBodyCombination & {headers?: TypedHeaders};
 51 | 
 52 | 
 53 | 
 54 | interface TypedResponse<T> extends Response {
 55 |   json(): Promise<T>;
 56 | }
 57 | 
 58 | type MimeTypes =
 59 |   ".jpg" |
 60 |   ".midi" |
 61 |   "XML" |
 62 |   "application/epub+zip" |
 63 |   "application/gzip" |
 64 |   "application/java-archive" |
 65 |   "application/json" |
 66 |   "application/ld+json" |
 67 |   "application/msword" |
 68 |   "application/octet-stream" |
 69 |   "application/ogg" |
 70 |   "application/pdf" |
 71 |   "application/php" |
 72 |   "application/rtf" |
 73 |   "application/vnd.amazon.ebook" |
 74 |   "application/vnd.apple.installer+xml" |
 75 |   "application/vnd.mozilla.xul+xml" |
 76 |   "application/vnd.ms-excel" |
 77 |   "application/vnd.ms-fontobject" |
 78 |   "application/vnd.ms-powerpoint" |
 79 |   "application/vnd.oasis.opendocument.presentation" |
 80 |   "application/vnd.oasis.opendocument.spreadsheet" |
 81 |   "application/vnd.oasis.opendocument.text" |
 82 |   "application/vnd.openxmlformats-officedocument.presentationml.presentation" |
 83 |   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" |
 84 |   "application/vnd.openxmlformats-officedocument.wordprocessingml.document" |
 85 |   "application/vnd.rar" |
 86 |   "application/vnd.visio" |
 87 |   "application/x-abiword" |
 88 |   "application/x-bzip" |
 89 |   "application/x-bzip2" |
 90 |   "application/x-csh" |
 91 |   "application/x-freearc" |
 92 |   "application/x-sh" |
 93 |   "application/x-shockwave-flash" |
 94 |   "application/x-tar" |
 95 |   "application/x-7z-compressed" |
 96 |   "application/xhtml+xml" |
 97 |   "application/zip" |
 98 |   "audio/aac" |
 99 |   "audio/mpeg" |
100 |   "audio/ogg" |
101 |   "audio/opus" |
102 |   "audio/wav" |
103 |   "audio/webm" |
104 |   "font/otf" |
105 |   "font/ttf" |
106 |   "font/woff" |
107 |   "font/woff2" |
108 |   "image/bmp" |
109 |   "image/gif" |
110 |   "image/png" |
111 |   "image/svg+xml" |
112 |   "image/tiff" |
113 |   "image/vnd.microsoft.icon" |
114 |   "image/webp" |
115 |   "text/calendar" |
116 |   "text/css" |
117 |   "text/csv" |
118 |   "text/html" |
119 |   "text/javascript" |
120 |   "text/plain" |
121 |   "video/3gpp" |
122 |   "video/3gpp2" |
123 |   "video/mp2t" |
124 |   "video/mpeg" |
125 |   "video/ogg" |
126 |   "video/webm" |
127 |   "video/x-msvideo";
128 | 
129 | 


--------------------------------------------------------------------------------
/improved_react_index.d.ts:
--------------------------------------------------------------------------------
   1 | // NOTE: Users of the `experimental` builds of React should add a reference
   2 | // to 'react/experimental' in their project. See experimental.d.ts's top comment
   3 | // for reference and documentation on how exactly to do it.
   4 | 
   5 | /// <reference path="global.d.ts" />
   6 | 
   7 | import * as CSS from "csstype";
   8 | 
   9 | type NativeAnimationEvent = AnimationEvent;
  10 | type NativeClipboardEvent = ClipboardEvent;
  11 | type NativeCompositionEvent = CompositionEvent;
  12 | type NativeDragEvent = DragEvent;
  13 | type NativeFocusEvent = FocusEvent;
  14 | type NativeInputEvent = InputEvent;
  15 | type NativeKeyboardEvent = KeyboardEvent;
  16 | type NativeMouseEvent = MouseEvent;
  17 | type NativeTouchEvent = TouchEvent;
  18 | type NativePointerEvent = PointerEvent;
  19 | type NativeToggleEvent = ToggleEvent;
  20 | type NativeTransitionEvent = TransitionEvent;
  21 | type NativeUIEvent = UIEvent;
  22 | type NativeWheelEvent = WheelEvent;
  23 | 
  24 | /**
  25 |  * Used to represent DOM API's where users can either pass
  26 |  * true or false as a boolean or as its equivalent strings.
  27 |  */
  28 | type Booleanish = boolean | "true" | "false";
  29 | 
  30 | /**
  31 |  * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}
  32 |  */
  33 | type CrossOrigin = "anonymous" | "use-credentials" | "" | undefined;
  34 | 
  35 | declare const UNDEFINED_VOID_ONLY: unique symbol;
  36 | 
  37 | /**
  38 |  * @internal Use `Awaited<ReactNode>` instead
  39 |  */
  40 | // Helper type to enable `Awaited<ReactNode>`.
  41 | // Must be a copy of the non-thenables of `ReactNode`.
  42 | type AwaitedReactNode =
  43 |     | React.ReactElement
  44 |     | string
  45 |     | number
  46 |     | bigint
  47 |     | Iterable<React.ReactNode>
  48 |     | React.ReactPortal
  49 |     | boolean
  50 |     | null
  51 |     | undefined
  52 |     | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
  53 |         keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
  54 |     ];
  55 | 
  56 | /**
  57 |  * The function returned from an effect passed to {@link React.useEffect useEffect},
  58 |  * which can be used to clean up the effect when the component unmounts.
  59 |  *
  60 |  * @see {@link https://react.dev/reference/react/useEffect React Docs}
  61 |  */
  62 | type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
  63 | type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
  64 | 
  65 | // eslint-disable-next-line @definitelytyped/export-just-namespace
  66 | export = React;
  67 | export as namespace React;
  68 | 
  69 | declare namespace React {
  70 |     //
  71 |     // React Elements
  72 |     // ----------------------------------------------------------------------
  73 | 
  74 |     /**
  75 |      * Used to retrieve the possible components which accept a given set of props.
  76 |      *
  77 |      * Can be passed no type parameters to get a union of all possible components
  78 |      * and tags.
  79 |      *
  80 |      * Is a superset of {@link ComponentType}.
  81 |      *
  82 |      * @template P The props to match against. If not passed, defaults to any.
  83 |      * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.
  84 |      *
  85 |      * @example
  86 |      *
  87 |      * ```tsx
  88 |      * // All components and tags (img, embed etc.)
  89 |      * // which accept `src`
  90 |      * type SrcComponents = ElementType<{ src: any }>;
  91 |      * ```
  92 |      *
  93 |      * @example
  94 |      *
  95 |      * ```tsx
  96 |      * // All components
  97 |      * type AllComponents = ElementType;
  98 |      * ```
  99 |      *
 100 |      * @example
 101 |      *
 102 |      * ```tsx
 103 |      * // All custom components which match `src`, and tags which
 104 |      * // match `src`, narrowed down to just `audio` and `embed`
 105 |      * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;
 106 |      * ```
 107 |      */
 108 |     type ElementType<P = any, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> =
 109 |         | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]
 110 |         | ComponentType<P>;
 111 | 
 112 |     /**
 113 |      * Represents any user-defined component, either as a function or a class.
 114 |      *
 115 |      * Similar to {@link JSXElementConstructor}, but with extra properties like
 116 |      * {@link FunctionComponent.defaultProps defaultProps }.
 117 |      *
 118 |      * @template P The props the component accepts.
 119 |      *
 120 |      * @see {@link ComponentClass}
 121 |      * @see {@link FunctionComponent}
 122 |      */
 123 |     type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
 124 | 
 125 |     /**
 126 |      * Represents any user-defined component, either as a function or a class.
 127 |      *
 128 |      * Similar to {@link ComponentType}, but without extra properties like
 129 |      * {@link FunctionComponent.defaultProps defaultProps }.
 130 |      *
 131 |      * @template P The props the component accepts.
 132 |      */
 133 |     type JSXElementConstructor<P> =
 134 |         | ((
 135 |             props: P,
 136 |         ) => ReactNode | Promise<ReactNode>)
 137 |         // constructor signature must match React.Component
 138 |         | (new(props: P, context: any) => Component<any, any>);
 139 | 
 140 |     /**
 141 |      * Created by {@link createRef}, or {@link useRef} when passed `null`.
 142 |      *
 143 |      * @template T The type of the ref's value.
 144 |      *
 145 |      * @example
 146 |      *
 147 |      * ```tsx
 148 |      * const ref = createRef<HTMLDivElement>();
 149 |      *
 150 |      * ref.current = document.createElement('div'); // Error
 151 |      * ```
 152 |      */
 153 |     interface RefObject<T> {
 154 |         /**
 155 |          * The current value of the ref.
 156 |          */
 157 |         current: T;
 158 |     }
 159 | 
 160 |     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
 161 |     }
 162 |     /**
 163 |      * A callback fired whenever the ref's value changes.
 164 |      *
 165 |      * @template T The type of the ref's value.
 166 |      *
 167 |      * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}
 168 |      *
 169 |      * @example
 170 |      *
 171 |      * ```tsx
 172 |      * <div ref={(node) => console.log(node)} />
 173 |      * ```
 174 |      */
 175 |     type RefCallback<T> = {
 176 |         bivarianceHack(
 177 |             instance: T | null,
 178 |         ):
 179 |             | void
 180 |             | (() => VoidOrUndefinedOnly)
 181 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[
 182 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES
 183 |             ];
 184 |     }["bivarianceHack"];
 185 | 
 186 |     /**
 187 |      * A union type of all possible shapes for React refs.
 188 |      *
 189 |      * @see {@link RefCallback}
 190 |      * @see {@link RefObject}
 191 |      */
 192 | 
 193 |     type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
 194 |     /**
 195 |      * @deprecated Use `Ref` instead. String refs are no longer supported.
 196 |      * If you're typing a library with support for React versions with string refs, use `RefAttributes<T>['ref']` instead.
 197 |      */
 198 |     type LegacyRef<T> = Ref<T>;
 199 |     /**
 200 |      * @deprecated Use `ComponentRef<T>` instead
 201 |      *
 202 |      * Retrieves the type of the 'ref' prop for a given component type or tag name.
 203 |      *
 204 |      * @template C The component type.
 205 |      *
 206 |      * @example
 207 |      *
 208 |      * ```tsx
 209 |      * type MyComponentRef = React.ElementRef<typeof MyComponent>;
 210 |      * ```
 211 |      *
 212 |      * @example
 213 |      *
 214 |      * ```tsx
 215 |      * type DivRef = React.ElementRef<'div'>;
 216 |      * ```
 217 |      */
 218 |     type ElementRef<
 219 |         C extends
 220 |             | ForwardRefExoticComponent<any>
 221 |             | { new(props: any, context: any): Component<any> }
 222 |             | ((props: any) => ReactNode)
 223 |             | keyof JSX.IntrinsicElements,
 224 |     > = ComponentRef<C>;
 225 | 
 226 |     type ComponentState = any;
 227 | 
 228 |     /**
 229 |      * A value which uniquely identifies a node among items in an array.
 230 |      *
 231 |      * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}
 232 |      */
 233 |     type Key = string | number | bigint;
 234 | 
 235 |     /**
 236 |      * @internal The props any component can receive.
 237 |      * You don't have to add this type. All components automatically accept these props.
 238 |      * ```tsx
 239 |      * const Component = () => <div />;
 240 |      * <Component key="one" />
 241 |      * ```
 242 |      *
 243 |      * WARNING: The implementation of a component will never have access to these attributes.
 244 |      * The following example would be incorrect usage because {@link Component} would never have access to `key`:
 245 |      * ```tsx
 246 |      * const Component = (props: React.Attributes) => props.key;
 247 |      * ```
 248 |      */
 249 |     interface Attributes {
 250 |         key?: Key | null | undefined;
 251 |     }
 252 |     /**
 253 |      * The props any component accepting refs can receive.
 254 |      * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.
 255 |      * ```tsx
 256 |      * const Component = forwardRef(() => <div />);
 257 |      * <Component ref={(current) => console.log(current)} />
 258 |      * ```
 259 |      *
 260 |      * You only need this type if you manually author the types of props that need to be compatible with legacy refs.
 261 |      * ```tsx
 262 |      * interface Props extends React.RefAttributes<HTMLDivElement> {}
 263 |      * declare const Component: React.FunctionComponent<Props>;
 264 |      * ```
 265 |      *
 266 |      * Otherwise it's simpler to directly use {@link Ref} since you can safely use the
 267 |      * props type to describe to props that a consumer can pass to the component
 268 |      * as well as describing the props the implementation of a component "sees".
 269 |      * {@link RefAttributes} is generally not safe to describe both consumer and seen props.
 270 |      *
 271 |      * ```tsx
 272 |      * interface Props extends {
 273 |      *   ref?: React.Ref<HTMLDivElement> | undefined;
 274 |      * }
 275 |      * declare const Component: React.FunctionComponent<Props>;
 276 |      * ```
 277 |      *
 278 |      * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.
 279 |      * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`
 280 |      * ```tsx
 281 |      * const Component = (props: React.RefAttributes) => props.ref;
 282 |      * ```
 283 |      */
 284 |     interface RefAttributes<T> extends Attributes {
 285 |         /**
 286 |          * Allows getting a ref to the component instance.
 287 |          * Once the component unmounts, React will set `ref.current` to `null`
 288 |          * (or call the ref with `null` if you passed a callback ref).
 289 |          *
 290 |          * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
 291 |          */
 292 |         ref?: Ref<T> | undefined;
 293 |     }
 294 | 
 295 |     /**
 296 |      * Represents the built-in attributes available to class components.
 297 |      */
 298 |     interface ClassAttributes<T> extends RefAttributes<T> {
 299 |     }
 300 | 
 301 |     /**
 302 |      * Represents a JSX element.
 303 |      *
 304 |      * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`
 305 |      * only represents JSX.
 306 |      *
 307 |      * @template P The type of the props object
 308 |      * @template T The type of the component or tag
 309 |      *
 310 |      * @example
 311 |      *
 312 |      * ```tsx
 313 |      * const element: ReactElement = <div />;
 314 |      * ```
 315 |      */
 316 |     interface ReactElement<
 317 |         P = unknown,
 318 |         T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
 319 |     > {
 320 |         type: T;
 321 |         props: P;
 322 |         key: string | null;
 323 |     }
 324 | 
 325 |     /**
 326 |      * @deprecated
 327 |      */
 328 |     interface ReactComponentElement<
 329 |         T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
 330 |         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, "key" | "ref">>,
 331 |     > extends ReactElement<P, Exclude<T, number>> {}
 332 | 
 333 |     /**
 334 |      * @deprecated Use `ReactElement<P, React.FunctionComponent<P>>`
 335 |      */
 336 |     interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
 337 |         /**
 338 |          * @deprecated Use `element.props.ref` instead.
 339 |          */
 340 |         ref?: ("ref" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;
 341 |     }
 342 | 
 343 |     /**
 344 |      * @deprecated Use `ReactElement<P, React.ComponentClass<P>>`
 345 |      */
 346 |     type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;
 347 |     /**
 348 |      * @deprecated Use `ReactElement<P, React.ComponentClass<P>>`
 349 |      */
 350 |     interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> {
 351 |         /**
 352 |          * @deprecated Use `element.props.ref` instead.
 353 |          */
 354 |         ref?: Ref<T> | undefined;
 355 |     }
 356 | 
 357 |     /**
 358 |      * @deprecated Use {@link ComponentElement} instead.
 359 |      */
 360 |     type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
 361 | 
 362 |     // string fallback for custom web-components
 363 |     /**
 364 |      * @deprecated Use `ReactElement<P, string>`
 365 |      */
 366 |     interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element>
 367 |         extends ReactElement<P, string>
 368 |     {
 369 |         /**
 370 |          * @deprecated Use `element.props.ref` instead.
 371 |          */
 372 |         ref: Ref<T>;
 373 |     }
 374 | 
 375 |     // ReactHTML for ReactHTMLElement
 376 |     interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> {}
 377 | 
 378 |     interface DetailedReactHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {
 379 |         type: HTMLElementType;
 380 |     }
 381 | 
 382 |     // ReactSVG for ReactSVGElement
 383 |     interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {
 384 |         type: SVGElementType;
 385 |     }
 386 | 
 387 |     interface ReactPortal extends ReactElement {
 388 |         children: ReactNode;
 389 |     }
 390 | 
 391 |     /**
 392 |      * Different release channels declare additional types of ReactNode this particular release channel accepts.
 393 |      * App or library types should never augment this interface.
 394 |      */
 395 |     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}
 396 | 
 397 |     /**
 398 |      * Represents all of the things React can render.
 399 |      *
 400 |      * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.
 401 |      *
 402 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}
 403 |      *
 404 |      * @example
 405 |      *
 406 |      * ```tsx
 407 |      * // Typing children
 408 |      * type Props = { children: ReactNode }
 409 |      *
 410 |      * const Component = ({ children }: Props) => <div>{children}</div>
 411 |      *
 412 |      * <Component>hello</Component>
 413 |      * ```
 414 |      *
 415 |      * @example
 416 |      *
 417 |      * ```tsx
 418 |      * // Typing a custom element
 419 |      * type Props = { customElement: ReactNode }
 420 |      *
 421 |      * const Component = ({ customElement }: Props) => <div>{customElement}</div>
 422 |      *
 423 |      * <Component customElement={<div>hello</div>} />
 424 |      * ```
 425 |      */
 426 |     // non-thenables need to be kept in sync with AwaitedReactNode
 427 |     type ReactNode =
 428 |         | ReactElement
 429 |         | string
 430 |         | number
 431 |         | bigint
 432 |         | Iterable<ReactNode>
 433 |         | ReactPortal
 434 |         | boolean
 435 |         | null
 436 |         | undefined
 437 |         | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
 438 |             keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
 439 |         ]
 440 |         | Promise<AwaitedReactNode>;
 441 | 
 442 |     //
 443 |     // Top Level API
 444 |     // ----------------------------------------------------------------------
 445 | 
 446 |     // DOM Elements
 447 |     // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"
 448 |     function createElement(
 449 |         type: "input",
 450 |         props?: InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement> | null,
 451 |         ...children: ReactNode[]
 452 |     ): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 453 |     function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 454 |         type: HTMLElementType,
 455 |         props?: ClassAttributes<T> & P | null,
 456 |         ...children: ReactNode[]
 457 |     ): DetailedReactHTMLElement<P, T>;
 458 |     function createElement<P extends SVGAttributes<T>, T extends SVGElement>(
 459 |         type: SVGElementType,
 460 |         props?: ClassAttributes<T> & P | null,
 461 |         ...children: ReactNode[]
 462 |     ): ReactSVGElement;
 463 |     function createElement<P extends DOMAttributes<T>, T extends Element>(
 464 |         type: string,
 465 |         props?: ClassAttributes<T> & P | null,
 466 |         ...children: ReactNode[]
 467 |     ): DOMElement<P, T>;
 468 | 
 469 |     // Custom components
 470 | 
 471 |     function createElement<P extends {}>(
 472 |         type: FunctionComponent<P>,
 473 |         props?: Attributes & P | null,
 474 |         ...children: ReactNode[]
 475 |     ): FunctionComponentElement<P>;
 476 |     function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
 477 |         type: ClassType<P, T, C>,
 478 |         props?: ClassAttributes<T> & P | null,
 479 |         ...children: ReactNode[]
 480 |     ): CElement<P, T>;
 481 |     function createElement<P extends {}>(
 482 |         type: FunctionComponent<P> | ComponentClass<P> | string,
 483 |         props?: Attributes & P | null,
 484 |         ...children: ReactNode[]
 485 |     ): ReactElement<P>;
 486 | 
 487 |     // DOM Elements
 488 |     // ReactHTMLElement
 489 |     function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 490 |         element: DetailedReactHTMLElement<P, T>,
 491 |         props?: P,
 492 |         ...children: ReactNode[]
 493 |     ): DetailedReactHTMLElement<P, T>;
 494 |     // ReactHTMLElement, less specific
 495 |     function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 496 |         element: ReactHTMLElement<T>,
 497 |         props?: P,
 498 |         ...children: ReactNode[]
 499 |     ): ReactHTMLElement<T>;
 500 |     // SVGElement
 501 |     function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>(
 502 |         element: ReactSVGElement,
 503 |         props?: P,
 504 |         ...children: ReactNode[]
 505 |     ): ReactSVGElement;
 506 |     // DOM Element (has to be the last, because type checking stops at first overload that fits)
 507 |     function cloneElement<P extends DOMAttributes<T>, T extends Element>(
 508 |         element: DOMElement<P, T>,
 509 |         props?: DOMAttributes<T> & P,
 510 |         ...children: ReactNode[]
 511 |     ): DOMElement<P, T>;
 512 | 
 513 |     // Custom components
 514 |     function cloneElement<P>(
 515 |         element: FunctionComponentElement<P>,
 516 |         props?: Partial<P> & Attributes,
 517 |         ...children: ReactNode[]
 518 |     ): FunctionComponentElement<P>;
 519 |     function cloneElement<P, T extends Component<P, ComponentState>>(
 520 |         element: CElement<P, T>,
 521 |         props?: Partial<P> & ClassAttributes<T>,
 522 |         ...children: ReactNode[]
 523 |     ): CElement<P, T>;
 524 |     function cloneElement<P>(
 525 |         element: ReactElement<P>,
 526 |         props?: Partial<P> & Attributes,
 527 |         ...children: ReactNode[]
 528 |     ): ReactElement<P>;
 529 | 
 530 |     /**
 531 |      * Describes the props accepted by a Context {@link Provider}.
 532 |      *
 533 |      * @template T The type of the value the context provides.
 534 |      */
 535 |     interface ProviderProps<T> {
 536 |         value: T;
 537 |         children?: ReactNode | undefined;
 538 |     }
 539 | 
 540 |     /**
 541 |      * Describes the props accepted by a Context {@link Consumer}.
 542 |      *
 543 |      * @template T The type of the value the context provides.
 544 |      */
 545 |     interface ConsumerProps<T> {
 546 |         children: (value: T) => ReactNode;
 547 |     }
 548 | 
 549 |     /**
 550 |      * An object masquerading as a component. These are created by functions
 551 |      * like {@link forwardRef}, {@link memo}, and {@link createContext}.
 552 |      *
 553 |      * In order to make TypeScript work, we pretend that they are normal
 554 |      * components.
 555 |      *
 556 |      * But they are, in fact, not callable - instead, they are objects which
 557 |      * are treated specially by the renderer.
 558 |      *
 559 |      * @template P The props the component accepts.
 560 |      */
 561 |     interface ExoticComponent<P = {}> {
 562 |         (props: P): ReactNode;
 563 |         readonly $$typeof: symbol;
 564 |     }
 565 | 
 566 |     /**
 567 |      * An {@link ExoticComponent} with a `displayName` property applied to it.
 568 |      *
 569 |      * @template P The props the component accepts.
 570 |      */
 571 |     interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
 572 |         /**
 573 |          * Used in debugging messages. You might want to set it
 574 |          * explicitly if you want to display a different name for
 575 |          * debugging purposes.
 576 |          *
 577 |          * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
 578 |          */
 579 |         displayName?: string | undefined;
 580 |     }
 581 | 
 582 |     /**
 583 |      * An {@link ExoticComponent} with a `propTypes` property applied to it.
 584 |      *
 585 |      * @template P The props the component accepts.
 586 |      */
 587 |     interface ProviderExoticComponent<P> extends ExoticComponent<P> {
 588 |     }
 589 | 
 590 |     /**
 591 |      * Used to retrieve the type of a context object from a {@link Context}.
 592 |      *
 593 |      * @template C The context object.
 594 |      *
 595 |      * @example
 596 |      *
 597 |      * ```tsx
 598 |      * import { createContext } from 'react';
 599 |      *
 600 |      * const MyContext = createContext({ foo: 'bar' });
 601 |      *
 602 |      * type ContextType = ContextType<typeof MyContext>;
 603 |      * // ContextType = { foo: string }
 604 |      * ```
 605 |      */
 606 |     type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;
 607 | 
 608 |     /**
 609 |      * Wraps your components to specify the value of this context for all components inside.
 610 |      *
 611 |      * @see {@link https://react.dev/reference/react/createContext#provider React Docs}
 612 |      *
 613 |      * @example
 614 |      *
 615 |      * ```tsx
 616 |      * import { createContext } from 'react';
 617 |      *
 618 |      * const ThemeContext = createContext('light');
 619 |      *
 620 |      * function App() {
 621 |      *   return (
 622 |      *     <ThemeContext.Provider value="dark">
 623 |      *       <Toolbar />
 624 |      *     </ThemeContext.Provider>
 625 |      *   );
 626 |      * }
 627 |      * ```
 628 |      */
 629 |     type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;
 630 | 
 631 |     /**
 632 |      * The old way to read context, before {@link useContext} existed.
 633 |      *
 634 |      * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}
 635 |      *
 636 |      * @example
 637 |      *
 638 |      * ```tsx
 639 |      * import { UserContext } from './user-context';
 640 |      *
 641 |      * function Avatar() {
 642 |      *   return (
 643 |      *     <UserContext.Consumer>
 644 |      *       {user => <img src={user.profileImage} alt={user.name} />}
 645 |      *     </UserContext.Consumer>
 646 |      *   );
 647 |      * }
 648 |      * ```
 649 |      */
 650 |     type Consumer<T> = ExoticComponent<ConsumerProps<T>>;
 651 | 
 652 |     /**
 653 |      * Context lets components pass information deep down without explicitly
 654 |      * passing props.
 655 |      *
 656 |      * Created from {@link createContext}
 657 |      *
 658 |      * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}
 659 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
 660 |      *
 661 |      * @example
 662 |      *
 663 |      * ```tsx
 664 |      * import { createContext } from 'react';
 665 |      *
 666 |      * const ThemeContext = createContext('light');
 667 |      * ```
 668 |      */
 669 |     interface Context<T> extends Provider<T> {
 670 |         Provider: Provider<T>;
 671 |         Consumer: Consumer<T>;
 672 |         /**
 673 |          * Used in debugging messages. You might want to set it
 674 |          * explicitly if you want to display a different name for
 675 |          * debugging purposes.
 676 |          *
 677 |          * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
 678 |          */
 679 |         displayName?: string | undefined;
 680 |     }
 681 | 
 682 |     /**
 683 |      * Lets you create a {@link Context} that components can provide or read.
 684 |      *
 685 |      * @param defaultValue The value you want the context to have when there is no matching
 686 |      * {@link Provider} in the tree above the component reading the context. This is meant
 687 |      * as a "last resort" fallback.
 688 |      *
 689 |      * @see {@link https://react.dev/reference/react/createContext#reference React Docs}
 690 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
 691 |      *
 692 |      * @example
 693 |      *
 694 |      * ```tsx
 695 |      * import { createContext } from 'react';
 696 |      *
 697 |      * const ThemeContext = createContext('light');
 698 |      * function App() {
 699 |      *   return (
 700 |      *     <ThemeContext value="dark">
 701 |      *       <Toolbar />
 702 |      *     </ThemeContext>
 703 |      *   );
 704 |      * }
 705 |      * ```
 706 |      */
 707 |     function createContext<T>(
 708 |         // If you thought this should be optional, see
 709 |         // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
 710 |         defaultValue: T,
 711 |     ): Context<T>;
 712 | 
 713 |     function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;
 714 | 
 715 |     const Children: {
 716 |         map<T, C>(
 717 |             children: C | readonly C[],
 718 |             fn: (child: C, index: number) => T,
 719 |         ): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
 720 |         forEach<C>(children: C | readonly C[], fn: (child: C, index: number) => void): void;
 721 |         count(children: any): number;
 722 |         only<C>(children: C): C extends any[] ? never : C;
 723 |         toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
 724 |     };
 725 | 
 726 |     export interface FragmentProps {
 727 |         children?: React.ReactNode;
 728 |     }
 729 |     /**
 730 |      * Lets you group elements without a wrapper node.
 731 |      *
 732 |      * @see {@link https://react.dev/reference/react/Fragment React Docs}
 733 |      *
 734 |      * @example
 735 |      *
 736 |      * ```tsx
 737 |      * import { Fragment } from 'react';
 738 |      *
 739 |      * <Fragment>
 740 |      *   <td>Hello</td>
 741 |      *   <td>World</td>
 742 |      * </Fragment>
 743 |      * ```
 744 |      *
 745 |      * @example
 746 |      *
 747 |      * ```tsx
 748 |      * // Using the <></> shorthand syntax:
 749 |      *
 750 |      * <>
 751 |      *   <td>Hello</td>
 752 |      *   <td>World</td>
 753 |      * </>
 754 |      * ```
 755 |      */
 756 |     const Fragment: ExoticComponent<FragmentProps>;
 757 | 
 758 |     /**
 759 |      * Lets you find common bugs in your components early during development.
 760 |      *
 761 |      * @see {@link https://react.dev/reference/react/StrictMode React Docs}
 762 |      *
 763 |      * @example
 764 |      *
 765 |      * ```tsx
 766 |      * import { StrictMode } from 'react';
 767 |      *
 768 |      * <StrictMode>
 769 |      *   <App />
 770 |      * </StrictMode>
 771 |      * ```
 772 |      */
 773 |     const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;
 774 | 
 775 |     /**
 776 |      * The props accepted by {@link Suspense}.
 777 |      *
 778 |      * @see {@link https://react.dev/reference/react/Suspense React Docs}
 779 |      */
 780 |     interface SuspenseProps {
 781 |         children?: ReactNode | undefined;
 782 | 
 783 |         /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
 784 |         fallback?: ReactNode;
 785 | 
 786 |         /**
 787 |          * A name for this Suspense boundary for instrumentation purposes.
 788 |          * The name will help identify this boundary in React DevTools.
 789 |          */
 790 |         name?: string | undefined;
 791 |     }
 792 | 
 793 |     /**
 794 |      * Lets you display a fallback until its children have finished loading.
 795 |      *
 796 |      * @see {@link https://react.dev/reference/react/Suspense React Docs}
 797 |      *
 798 |      * @example
 799 |      *
 800 |      * ```tsx
 801 |      * import { Suspense } from 'react';
 802 |      *
 803 |      * <Suspense fallback={<Loading />}>
 804 |      *   <ProfileDetails />
 805 |      * </Suspense>
 806 |      * ```
 807 |      */
 808 |     const Suspense: ExoticComponent<SuspenseProps>;
 809 |     const version: string;
 810 | 
 811 |     /**
 812 |      * The callback passed to {@link ProfilerProps.onRender}.
 813 |      *
 814 |      * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 815 |      */
 816 |     type ProfilerOnRenderCallback = (
 817 |         /**
 818 |          * The string id prop of the {@link Profiler} tree that has just committed. This lets
 819 |          * you identify which part of the tree was committed if you are using multiple
 820 |          * profilers.
 821 |          *
 822 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 823 |          */
 824 |         id: string,
 825 |         /**
 826 |          * This lets you know whether the tree has just been mounted for the first time
 827 |          * or re-rendered due to a change in props, state, or hooks.
 828 |          *
 829 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 830 |          */
 831 |         phase: "mount" | "update" | "nested-update",
 832 |         /**
 833 |          * The number of milliseconds spent rendering the {@link Profiler} and its descendants
 834 |          * for the current update. This indicates how well the subtree makes use of
 835 |          * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease
 836 |          * significantly after the initial mount as many of the descendants will only need to
 837 |          * re-render if their specific props change.
 838 |          *
 839 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 840 |          */
 841 |         actualDuration: number,
 842 |         /**
 843 |          * The number of milliseconds estimating how much time it would take to re-render the entire
 844 |          * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most
 845 |          * recent render durations of each component in the tree. This value estimates a worst-case
 846 |          * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare
 847 |          * {@link actualDuration} against it to see if memoization is working.
 848 |          *
 849 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 850 |          */
 851 |         baseDuration: number,
 852 |         /**
 853 |          * A numeric timestamp for when React began rendering the current update.
 854 |          *
 855 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 856 |          */
 857 |         startTime: number,
 858 |         /**
 859 |          * A numeric timestamp for when React committed the current update. This value is shared
 860 |          * between all profilers in a commit, enabling them to be grouped if desirable.
 861 |          *
 862 |          * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 863 |          */
 864 |         commitTime: number,
 865 |     ) => void;
 866 | 
 867 |     /**
 868 |      * The props accepted by {@link Profiler}.
 869 |      *
 870 |      * @see {@link https://react.dev/reference/react/Profiler React Docs}
 871 |      */
 872 |     interface ProfilerProps {
 873 |         children?: ReactNode | undefined;
 874 |         id: string;
 875 |         onRender: ProfilerOnRenderCallback;
 876 |     }
 877 | 
 878 |     /**
 879 |      * Lets you measure rendering performance of a React tree programmatically.
 880 |      *
 881 |      * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}
 882 |      *
 883 |      * @example
 884 |      *
 885 |      * ```tsx
 886 |      * <Profiler id="App" onRender={onRender}>
 887 |      *   <App />
 888 |      * </Profiler>
 889 |      * ```
 890 |      */
 891 |     const Profiler: ExoticComponent<ProfilerProps>;
 892 | 
 893 |     //
 894 |     // Component API
 895 |     // ----------------------------------------------------------------------
 896 | 
 897 |     type ReactInstance = Component<any> | Element;
 898 | 
 899 |     // Base component for plain JS classes
 900 |     interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}
 901 |     class Component<P, S> {
 902 |         /**
 903 |          * If set, `this.context` will be set at runtime to the current value of the given Context.
 904 |          *
 905 |          * @example
 906 |          *
 907 |          * ```ts
 908 |          * type MyContext = number
 909 |          * const Ctx = React.createContext<MyContext>(0)
 910 |          *
 911 |          * class Foo extends React.Component {
 912 |          *   static contextType = Ctx
 913 |          *   context!: React.ContextType<typeof Ctx>
 914 |          *   render () {
 915 |          *     return <>My context's value: {this.context}</>;
 916 |          *   }
 917 |          * }
 918 |          * ```
 919 |          *
 920 |          * @see {@link https://react.dev/reference/react/Component#static-contexttype}
 921 |          */
 922 |         static contextType?: Context<any> | undefined;
 923 | 
 924 |         /**
 925 |          * Ignored by React.
 926 |          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
 927 |          */
 928 |         static propTypes?: any;
 929 | 
 930 |         /**
 931 |          * If using React Context, re-declare this in your class to be the
 932 |          * `React.ContextType` of your `static contextType`.
 933 |          * Should be used with type annotation or static contextType.
 934 |          *
 935 |          * @example
 936 |          * ```ts
 937 |          * static contextType = MyContext
 938 |          * // For TS pre-3.7:
 939 |          * context!: React.ContextType<typeof MyContext>
 940 |          * // For TS 3.7 and above:
 941 |          * declare context: React.ContextType<typeof MyContext>
 942 |          * ```
 943 |          *
 944 |          * @see {@link https://react.dev/reference/react/Component#context React Docs}
 945 |          */
 946 |         context: unknown;
 947 | 
 948 |         // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
 949 |         constructor(props: P);
 950 |         /**
 951 |          * @param props
 952 |          * @param context value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
 953 |          * in `contextType`.
 954 |          */
 955 |         // TODO: Ideally we'd infer the constructor signatur from `contextType`.
 956 |         // Might be hard to ship without breaking existing code.
 957 |         constructor(props: P, context: any);
 958 | 
 959 |         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
 960 |         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
 961 |         // Also, the ` | S` allows intellisense to not be dumbisense
 962 |         setState<K extends keyof S>(
 963 |             state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),
 964 |             callback?: () => void,
 965 |         ): void;
 966 | 
 967 |         forceUpdate(callback?: () => void): void;
 968 |         render(): ReactNode;
 969 | 
 970 |         readonly props: Readonly<P>;
 971 |         state: Readonly<S>;
 972 |     }
 973 | 
 974 |     class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}
 975 | 
 976 |     /**
 977 |      * @deprecated Use `ClassicComponent` from `create-react-class`
 978 |      *
 979 |      * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}
 980 |      * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}
 981 |      */
 982 |     interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {
 983 |         replaceState(nextState: S, callback?: () => void): void;
 984 |         isMounted(): boolean;
 985 |         getInitialState?(): S;
 986 |     }
 987 | 
 988 |     //
 989 |     // Class Interfaces
 990 |     // ----------------------------------------------------------------------
 991 | 
 992 |     /**
 993 |      * Represents the type of a function component. Can optionally
 994 |      * receive a type argument that represents the props the component
 995 |      * receives.
 996 |      *
 997 |      * @template P The props the component accepts.
 998 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
 999 |      * @alias for {@link FunctionComponent}
1000 |      *
1001 |      * @example
1002 |      *
1003 |      * ```tsx
1004 |      * // With props:
1005 |      * type Props = { name: string }
1006 |      *
1007 |      * const MyComponent: FC<Props> = (props) => {
1008 |      *  return <div>{props.name}</div>
1009 |      * }
1010 |      * ```
1011 |      *
1012 |      * @example
1013 |      *
1014 |      * ```tsx
1015 |      * // Without props:
1016 |      * const MyComponentWithoutProps: FC = () => {
1017 |      *   return <div>MyComponentWithoutProps</div>
1018 |      * }
1019 |      * ```
1020 |      */
1021 |     type FC<P = {}> = FunctionComponent<P>;
1022 | 
1023 |     /**
1024 |      * Represents the type of a function component. Can optionally
1025 |      * receive a type argument that represents the props the component
1026 |      * accepts.
1027 |      *
1028 |      * @template P The props the component accepts.
1029 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}
1030 |      *
1031 |      * @example
1032 |      *
1033 |      * ```tsx
1034 |      * // With props:
1035 |      * type Props = { name: string }
1036 |      *
1037 |      * const MyComponent: FunctionComponent<Props> = (props) => {
1038 |      *  return <div>{props.name}</div>
1039 |      * }
1040 |      * ```
1041 |      *
1042 |      * @example
1043 |      *
1044 |      * ```tsx
1045 |      * // Without props:
1046 |      * const MyComponentWithoutProps: FunctionComponent = () => {
1047 |      *   return <div>MyComponentWithoutProps</div>
1048 |      * }
1049 |      * ```
1050 |      */
1051 |     interface FunctionComponent<P = {}> {
1052 |         (props: P): ReactNode | Promise<ReactNode>;
1053 |         /**
1054 |          * Ignored by React.
1055 |          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
1056 |          */
1057 |         propTypes?: any;
1058 |         /**
1059 |          * Used in debugging messages. You might want to set it
1060 |          * explicitly if you want to display a different name for
1061 |          * debugging purposes.
1062 |          *
1063 |          * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
1064 |          *
1065 |          * @example
1066 |          *
1067 |          * ```tsx
1068 |          *
1069 |          * const MyComponent: FC = () => {
1070 |          *   return <div>Hello!</div>
1071 |          * }
1072 |          *
1073 |          * MyComponent.displayName = 'MyAwesomeComponent'
1074 |          * ```
1075 |          */
1076 |         displayName?: string | undefined;
1077 |     }
1078 | 
1079 |     /**
1080 |      * The type of the ref received by a {@link ForwardRefRenderFunction}.
1081 |      *
1082 |      * @see {@link ForwardRefRenderFunction}
1083 |      */
1084 |     // Making T nullable is assuming the refs will be managed by React or the component impl will write it somewhere else.
1085 |     // But this isn't necessarily true. We haven't heard complains about it yet and hopefully `forwardRef` is removed from React before we do.
1086 |     type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;
1087 | 
1088 |     /**
1089 |      * The type of the function passed to {@link forwardRef}. This is considered different
1090 |      * to a normal {@link FunctionComponent} because it receives an additional argument,
1091 |      *
1092 |      * @param props Props passed to the component, if any.
1093 |      * @param ref A ref forwarded to the component of type {@link ForwardedRef}.
1094 |      *
1095 |      * @template T The type of the forwarded ref.
1096 |      * @template P The type of the props the component accepts.
1097 |      *
1098 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
1099 |      * @see {@link forwardRef}
1100 |      */
1101 |     interface ForwardRefRenderFunction<T, P = {}> {
1102 |         (props: P, ref: ForwardedRef<T>): ReactNode;
1103 |         /**
1104 |          * Used in debugging messages. You might want to set it
1105 |          * explicitly if you want to display a different name for
1106 |          * debugging purposes.
1107 |          *
1108 |          * Will show `ForwardRef(${Component.displayName || Component.name})`
1109 |          * in devtools by default, but can be given its own specific name.
1110 |          *
1111 |          * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
1112 |          */
1113 |         displayName?: string | undefined;
1114 |         /**
1115 |          * Ignored by React.
1116 |          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
1117 |          */
1118 |         propTypes?: any;
1119 |     }
1120 | 
1121 |     /**
1122 |      * Represents a component class in React.
1123 |      *
1124 |      * @template P The props the component accepts.
1125 |      * @template S The internal state of the component.
1126 |      */
1127 |     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
1128 |         // constructor signature must match React.Component
1129 |         new(
1130 |             props: P,
1131 |             /**
1132 |              * Value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
1133 |              * in `contextType`.
1134 |              */
1135 |             context?: any,
1136 |         ): Component<P, S>;
1137 |         /**
1138 |          * Ignored by React.
1139 |          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
1140 |          */
1141 |         propTypes?: any;
1142 |         contextType?: Context<any> | undefined;
1143 |         defaultProps?: Partial<P> | undefined;
1144 |         /**
1145 |          * Used in debugging messages. You might want to set it
1146 |          * explicitly if you want to display a different name for
1147 |          * debugging purposes.
1148 |          *
1149 |          * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
1150 |          */
1151 |         displayName?: string | undefined;
1152 |     }
1153 | 
1154 |     /**
1155 |      * @deprecated Use `ClassicComponentClass` from `create-react-class`
1156 |      *
1157 |      * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}
1158 |      * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}
1159 |      */
1160 |     interface ClassicComponentClass<P = {}> extends ComponentClass<P> {
1161 |         new(props: P): ClassicComponent<P, ComponentState>;
1162 |         getDefaultProps?(): P;
1163 |     }
1164 | 
1165 |     /**
1166 |      * Used in {@link createElement} and {@link createFactory} to represent
1167 |      * a class.
1168 |      *
1169 |      * An intersection type is used to infer multiple type parameters from
1170 |      * a single argument, which is useful for many top-level API defs.
1171 |      * See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue}
1172 |      * for more info.
1173 |      */
1174 |     type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
1175 |         & C
1176 |         & (new(props: P, context: any) => T);
1177 | 
1178 |     //
1179 |     // Component Specs and Lifecycle
1180 |     // ----------------------------------------------------------------------
1181 | 
1182 |     // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`,
1183 |     // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle
1184 |     // methods are present.
1185 |     interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {
1186 |         /**
1187 |          * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
1188 |          */
1189 |         componentDidMount?(): void;
1190 |         /**
1191 |          * Called to determine whether the change in props and state should trigger a re-render.
1192 |          *
1193 |          * `Component` always returns true.
1194 |          * `PureComponent` implements a shallow comparison on props and state and returns true if any
1195 |          * props or states have changed.
1196 |          *
1197 |          * If false is returned, {@link Component.render}, `componentWillUpdate`
1198 |          * and `componentDidUpdate` will not be called.
1199 |          */
1200 |         shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
1201 |         /**
1202 |          * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
1203 |          * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
1204 |          */
1205 |         componentWillUnmount?(): void;
1206 |         /**
1207 |          * Catches exceptions generated in descendant components. Unhandled exceptions will cause
1208 |          * the entire component tree to unmount.
1209 |          */
1210 |         componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
1211 |     }
1212 | 
1213 |     // Unfortunately, we have no way of declaring that the component constructor must implement this
1214 |     interface StaticLifecycle<P, S> {
1215 |         getDerivedStateFromProps?: GetDerivedStateFromProps<P, S> | undefined;
1216 |         getDerivedStateFromError?: GetDerivedStateFromError<P, S> | undefined;
1217 |     }
1218 | 
1219 |     type GetDerivedStateFromProps<P, S> =
1220 |         /**
1221 |          * Returns an update to a component's state based on its new props and old state.
1222 |          *
1223 |          * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
1224 |          */
1225 |         (nextProps: Readonly<P>, prevState: S) => Partial<S> | null;
1226 | 
1227 |     type GetDerivedStateFromError<P, S> =
1228 |         /**
1229 |          * This lifecycle is invoked after an error has been thrown by a descendant component.
1230 |          * It receives the error that was thrown as a parameter and should return a value to update state.
1231 |          *
1232 |          * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
1233 |          */
1234 |         (error: any) => Partial<S> | null;
1235 | 
1236 |     // This should be "infer SS" but can't use it yet
1237 |     interface NewLifecycle<P, S, SS> {
1238 |         /**
1239 |          * Runs before React applies the result of {@link Component.render render} to the document, and
1240 |          * returns an object to be given to {@link componentDidUpdate}. Useful for saving
1241 |          * things such as scroll position before {@link Component.render render} causes changes to it.
1242 |          *
1243 |          * Note: the presence of this method prevents any of the deprecated
1244 |          * lifecycle events from running.
1245 |          */
1246 |         getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null;
1247 |         /**
1248 |          * Called immediately after updating occurs. Not called for the initial render.
1249 |          *
1250 |          * The snapshot is only present if {@link getSnapshotBeforeUpdate} is present and returns non-null.
1251 |          */
1252 |         componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void;
1253 |     }
1254 | 
1255 |     interface DeprecatedLifecycle<P, S> {
1256 |         /**
1257 |          * Called immediately before mounting occurs, and before {@link Component.render}.
1258 |          * Avoid introducing any side-effects or subscriptions in this method.
1259 |          *
1260 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1261 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1262 |          * this from being invoked.
1263 |          *
1264 |          * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead; will stop working in React 17
1265 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
1266 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1267 |          */
1268 |         componentWillMount?(): void;
1269 |         /**
1270 |          * Called immediately before mounting occurs, and before {@link Component.render}.
1271 |          * Avoid introducing any side-effects or subscriptions in this method.
1272 |          *
1273 |          * This method will not stop working in React 17.
1274 |          *
1275 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1276 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1277 |          * this from being invoked.
1278 |          *
1279 |          * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead
1280 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
1281 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1282 |          */
1283 |         UNSAFE_componentWillMount?(): void;
1284 |         /**
1285 |          * Called when the component may be receiving new props.
1286 |          * React may call this even if props have not changed, so be sure to compare new and existing
1287 |          * props if you only want to handle changes.
1288 |          *
1289 |          * Calling {@link Component.setState} generally does not trigger this method.
1290 |          *
1291 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1292 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1293 |          * this from being invoked.
1294 |          *
1295 |          * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead; will stop working in React 17
1296 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
1297 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1298 |          */
1299 |         componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
1300 |         /**
1301 |          * Called when the component may be receiving new props.
1302 |          * React may call this even if props have not changed, so be sure to compare new and existing
1303 |          * props if you only want to handle changes.
1304 |          *
1305 |          * Calling {@link Component.setState} generally does not trigger this method.
1306 |          *
1307 |          * This method will not stop working in React 17.
1308 |          *
1309 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1310 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1311 |          * this from being invoked.
1312 |          *
1313 |          * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead
1314 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
1315 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1316 |          */
1317 |         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
1318 |         /**
1319 |          * Called immediately before rendering when new props or state is received. Not called for the initial render.
1320 |          *
1321 |          * Note: You cannot call {@link Component.setState} here.
1322 |          *
1323 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1324 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1325 |          * this from being invoked.
1326 |          *
1327 |          * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
1328 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
1329 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1330 |          */
1331 |         componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
1332 |         /**
1333 |          * Called immediately before rendering when new props or state is received. Not called for the initial render.
1334 |          *
1335 |          * Note: You cannot call {@link Component.setState} here.
1336 |          *
1337 |          * This method will not stop working in React 17.
1338 |          *
1339 |          * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}
1340 |          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
1341 |          * this from being invoked.
1342 |          *
1343 |          * @deprecated 16.3, use getSnapshotBeforeUpdate instead
1344 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}
1345 |          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
1346 |          */
1347 |         UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
1348 |     }
1349 | 
1350 |     function createRef<T>(): RefObject<T | null>;
1351 | 
1352 |     /**
1353 |      * The type of the component returned from {@link forwardRef}.
1354 |      *
1355 |      * @template P The props the component accepts, if any.
1356 |      *
1357 |      * @see {@link ExoticComponent}
1358 |      */
1359 |     interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
1360 |         /**
1361 |          * Ignored by React.
1362 |          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
1363 |          */
1364 |         propTypes?: any;
1365 |     }
1366 | 
1367 |     /**
1368 |      * Lets your component expose a DOM node to a parent component
1369 |      * using a ref.
1370 |      *
1371 |      * @see {@link https://react.dev/reference/react/forwardRef React Docs}
1372 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}
1373 |      *
1374 |      * @param render See the {@link ForwardRefRenderFunction}.
1375 |      *
1376 |      * @template T The type of the DOM node.
1377 |      * @template P The props the component accepts, if any.
1378 |      *
1379 |      * @example
1380 |      *
1381 |      * ```tsx
1382 |      * interface Props {
1383 |      *   children?: ReactNode;
1384 |      *   type: "submit" | "button";
1385 |      * }
1386 |      *
1387 |      * export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
1388 |      *   <button ref={ref} className="MyClassName" type={props.type}>
1389 |      *     {props.children}
1390 |      *   </button>
1391 |      * ));
1392 |      * ```
1393 |      */
1394 |     function forwardRef<T, P = {}>(
1395 |         render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>,
1396 |     ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
1397 | 
1398 |     /**
1399 |      * Omits the 'ref' attribute from the given props object.
1400 |      *
1401 |      * @template Props The props object type.
1402 |      */
1403 |     type PropsWithoutRef<Props> =
1404 |         // Omit would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.
1405 |         // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
1406 |         // https://github.com/Microsoft/TypeScript/issues/28339
1407 |         Props extends any ? ("ref" extends keyof Props ? Omit<Props, "ref"> : Props) : Props;
1408 |     /**
1409 |      * Ensures that the props do not include string ref, which cannot be forwarded
1410 |      * @deprecated Use `Props` directly. `PropsWithRef<Props>` is just an alias for `Props`
1411 |      */
1412 |     type PropsWithRef<Props> = Props;
1413 | 
1414 |     type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
1415 | 
1416 |     /**
1417 |      * Used to retrieve the props a component accepts. Can either be passed a string,
1418 |      * indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React
1419 |      * component.
1420 |      *
1421 |      * It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef}
1422 |      * instead of this type, as they let you be explicit about whether or not to include
1423 |      * the `ref` prop.
1424 |      *
1425 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
1426 |      *
1427 |      * @example
1428 |      *
1429 |      * ```tsx
1430 |      * // Retrieves the props an 'input' element accepts
1431 |      * type InputProps = React.ComponentProps<'input'>;
1432 |      * ```
1433 |      *
1434 |      * @example
1435 |      *
1436 |      * ```tsx
1437 |      * const MyComponent = (props: { foo: number, bar: string }) => <div />;
1438 |      *
1439 |      * // Retrieves the props 'MyComponent' accepts
1440 |      * type MyComponentProps = React.ComponentProps<typeof MyComponent>;
1441 |      * ```
1442 |      */
1443 |     type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = T extends
1444 |         JSXElementConstructor<infer Props> ? Props
1445 |         : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
1446 |         : {};
1447 | 
1448 |     /**
1449 |      * Used to retrieve the props a component accepts with its ref. Can either be
1450 |      * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the
1451 |      * type of a React component.
1452 |      *
1453 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
1454 |      *
1455 |      * @example
1456 |      *
1457 |      * ```tsx
1458 |      * // Retrieves the props an 'input' element accepts
1459 |      * type InputProps = React.ComponentPropsWithRef<'input'>;
1460 |      * ```
1461 |      *
1462 |      * @example
1463 |      *
1464 |      * ```tsx
1465 |      * const MyComponent = (props: { foo: number, bar: string }) => <div />;
1466 |      *
1467 |      * // Retrieves the props 'MyComponent' accepts
1468 |      * type MyComponentPropsWithRef = React.ComponentPropsWithRef<typeof MyComponent>;
1469 |      * ```
1470 |      */
1471 |     type ComponentPropsWithRef<T extends ElementType> = T extends JSXElementConstructor<infer Props>
1472 |         // If it's a class i.e. newable we're dealing with a class component
1473 |         ? T extends abstract new(args: any) => any ? PropsWithoutRef<Props> & RefAttributes<InstanceType<T>>
1474 |         : Props
1475 |         : ComponentProps<T>;
1476 |     /**
1477 |      * Used to retrieve the props a custom component accepts with its ref.
1478 |      *
1479 |      * Unlike {@link ComponentPropsWithRef}, this only works with custom
1480 |      * components, i.e. components you define yourself. This is to improve
1481 |      * type-checking performance.
1482 |      *
1483 |      * @example
1484 |      *
1485 |      * ```tsx
1486 |      * const MyComponent = (props: { foo: number, bar: string }) => <div />;
1487 |      *
1488 |      * // Retrieves the props 'MyComponent' accepts
1489 |      * type MyComponentPropsWithRef = React.CustomComponentPropsWithRef<typeof MyComponent>;
1490 |      * ```
1491 |      */
1492 |     type CustomComponentPropsWithRef<T extends ComponentType> = T extends JSXElementConstructor<infer Props>
1493 |         // If it's a class i.e. newable we're dealing with a class component
1494 |         ? T extends abstract new(args: any) => any ? PropsWithoutRef<Props> & RefAttributes<InstanceType<T>>
1495 |         : Props
1496 |         : never;
1497 | 
1498 |     /**
1499 |      * Used to retrieve the props a component accepts without its ref. Can either be
1500 |      * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the
1501 |      * type of a React component.
1502 |      *
1503 |      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}
1504 |      *
1505 |      * @example
1506 |      *
1507 |      * ```tsx
1508 |      * // Retrieves the props an 'input' element accepts
1509 |      * type InputProps = React.ComponentPropsWithoutRef<'input'>;
1510 |      * ```
1511 |      *
1512 |      * @example
1513 |      *
1514 |      * ```tsx
1515 |      * const MyComponent = (props: { foo: number, bar: string }) => <div />;
1516 |      *
1517 |      * // Retrieves the props 'MyComponent' accepts
1518 |      * type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef<typeof MyComponent>;
1519 |      * ```
1520 |      */
1521 |     type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef<ComponentProps<T>>;
1522 | 
1523 |     /**
1524 |      * Retrieves the type of the 'ref' prop for a given component type or tag name.
1525 |      *
1526 |      * @template C The component type.
1527 |      *
1528 |      * @example
1529 |      *
1530 |      * ```tsx
1531 |      * type MyComponentRef = React.ComponentRef<typeof MyComponent>;
1532 |      * ```
1533 |      *
1534 |      * @example
1535 |      *
1536 |      * ```tsx
1537 |      * type DivRef = React.ComponentRef<'div'>;
1538 |      * ```
1539 |      */
1540 |     type ComponentRef<T extends ElementType> = ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method
1541 |         : never;
1542 | 
1543 |     // will show `Memo(${Component.displayName || Component.name})` in devtools by default,
1544 |     // but can be given its own specific name
1545 |     type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent<CustomComponentPropsWithRef<T>> & {
1546 |         readonly type: T;
1547 |     };
1548 | 
1549 |     /**
1550 |      * Lets you skip re-rendering a component when its props are unchanged.
1551 |      *
1552 |      * @see {@link https://react.dev/reference/react/memo React Docs}
1553 |      *
1554 |      * @param Component The component to memoize.
1555 |      * @param propsAreEqual A function that will be used to determine if the props have changed.
1556 |      *
1557 |      * @example
1558 |      *
1559 |      * ```tsx
1560 |      * import { memo } from 'react';
1561 |      *
1562 |      * const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
1563 |      *   // ...
1564 |      * });
1565 |      * ```
1566 |      */
1567 |     function memo<P extends object>(
1568 |         Component: FunctionComponent<P>,
1569 |         propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean,
1570 |     ): NamedExoticComponent<P>;
1571 |     function memo<T extends ComponentType<any>>(
1572 |         Component: T,
1573 |         propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean,
1574 |     ): MemoExoticComponent<T>;
1575 | 
1576 |     interface LazyExoticComponent<T extends ComponentType<any>>
1577 |         extends ExoticComponent<CustomComponentPropsWithRef<T>>
1578 |     {
1579 |         readonly _result: T;
1580 |     }
1581 | 
1582 |     /**
1583 |      * Lets you defer loading a component’s code until it is rendered for the first time.
1584 |      *
1585 |      * @see {@link https://react.dev/reference/react/lazy React Docs}
1586 |      *
1587 |      * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a
1588 |      * then method). React will not call `load` until the first time you attempt to render the returned
1589 |      * component. After React first calls load, it will wait for it to resolve, and then render the
1590 |      * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s
1591 |      * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects,
1592 |      * React will throw the rejection reason for the nearest Error Boundary to handle.
1593 |      *
1594 |      * @example
1595 |      *
1596 |      * ```tsx
1597 |      * import { lazy } from 'react';
1598 |      *
1599 |      * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
1600 |      * ```
1601 |      */
1602 |     function lazy<T extends ComponentType<any>>(
1603 |         load: () => Promise<{ default: T }>,
1604 |     ): LazyExoticComponent<T>;
1605 | 
1606 |     //
1607 |     // React Hooks
1608 |     // ----------------------------------------------------------------------
1609 | 
1610 |     /**
1611 |      * The instruction passed to a {@link Dispatch} function in {@link useState}
1612 |      * to tell React what the next value of the {@link useState} should be.
1613 |      *
1614 |      * Often found wrapped in {@link Dispatch}.
1615 |      *
1616 |      * @template S The type of the state.
1617 |      *
1618 |      * @example
1619 |      *
1620 |      * ```tsx
1621 |      * // This return type correctly represents the type of
1622 |      * // `setCount` in the example below.
1623 |      * const useCustomState = (): Dispatch<SetStateAction<number>> => {
1624 |      *   const [count, setCount] = useState(0);
1625 |      *
1626 |      *   return setCount;
1627 |      * }
1628 |      * ```
1629 |      */
1630 |     type SetStateAction<S> = S | ((prevState: S) => S);
1631 | 
1632 |     /**
1633 |      * A function that can be used to update the state of a {@link useState}
1634 |      * or {@link useReducer} hook.
1635 |      */
1636 |     type Dispatch<A> = (value: A) => void;
1637 |     /**
1638 |      * A {@link Dispatch} function can sometimes be called without any arguments.
1639 |      */
1640 |     type DispatchWithoutAction = () => void;
1641 |     // Limit the reducer to accept only 0 or 1 action arguments
1642 |     // eslint-disable-next-line @definitelytyped/no-single-element-tuple-type
1643 |     type AnyActionArg = [] | [any];
1644 |     // Get the dispatch type from the reducer arguments (captures optional action argument correctly)
1645 |     type ActionDispatch<ActionArg extends AnyActionArg> = (...args: ActionArg) => void;
1646 |     // Unlike redux, the actions _can_ be anything
1647 |     type Reducer<S, A> = (prevState: S, action: A) => S;
1648 |     // If useReducer accepts a reducer without action, dispatch may be called without any parameters.
1649 |     type ReducerWithoutAction<S> = (prevState: S) => S;
1650 |     // types used to try and prevent the compiler from reducing S
1651 |     // to a supertype common with the second argument to useReducer()
1652 |     type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
1653 |     type DependencyList = readonly unknown[];
1654 | 
1655 |     // NOTE: callbacks are _only_ allowed to return either void, or a destructor.
1656 |     type EffectCallback = () => void | Destructor;
1657 | 
1658 |     /**
1659 |      * @deprecated Use `RefObject` instead.
1660 |      */
1661 |     interface MutableRefObject<T> {
1662 |         current: T;
1663 |     }
1664 | 
1665 |     // This will technically work if you give a Consumer<T> or Provider<T> but it's deprecated and warns
1666 |     /**
1667 |      * Accepts a context object (the value returned from `React.createContext`) and returns the current
1668 |      * context value, as given by the nearest context provider for the given context.
1669 |      *
1670 |      * @version 16.8.0
1671 |      * @see {@link https://react.dev/reference/react/useContext}
1672 |      */
1673 |     function useContext<T>(context: Context<T> /*, (not public API) observedBits?: number|boolean */): T;
1674 |     /**
1675 |      * Returns a stateful value, and a function to update it.
1676 |      *
1677 |      * @version 16.8.0
1678 |      * @see {@link https://react.dev/reference/react/useState}
1679 |      */
1680 |     function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
1681 |     // convenience overload when first argument is omitted
1682 |     /**
1683 |      * Returns a stateful value, and a function to update it.
1684 |      *
1685 |      * @version 16.8.0
1686 |      * @see {@link https://react.dev/reference/react/useState}
1687 |      */
1688 |     function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
1689 |     /**
1690 |      * An alternative to `useState`.
1691 |      *
1692 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
1693 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
1694 |      * updates because you can pass `dispatch` down instead of callbacks.
1695 |      *
1696 |      * @version 16.8.0
1697 |      * @see {@link https://react.dev/reference/react/useReducer}
1698 |      */
1699 |     function useReducer<S, A extends AnyActionArg>(
1700 |         reducer: (prevState: S, ...args: A) => S,
1701 |         initialState: S,
1702 |     ): [S, ActionDispatch<A>];
1703 |     /**
1704 |      * An alternative to `useState`.
1705 |      *
1706 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
1707 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
1708 |      * updates because you can pass `dispatch` down instead of callbacks.
1709 |      *
1710 |      * @version 16.8.0
1711 |      * @see {@link https://react.dev/reference/react/useReducer}
1712 |      */
1713 |     function useReducer<S, I, A extends AnyActionArg>(
1714 |         reducer: (prevState: S, ...args: A) => S,
1715 |         initialArg: I,
1716 |         init: (i: I) => S,
1717 |     ): [S, ActionDispatch<A>];
1718 |     /**
1719 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1720 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1721 |      *
1722 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1723 |      * value around similar to how you’d use instance fields in classes.
1724 |      *
1725 |      * @version 16.8.0
1726 |      * @see {@link https://react.dev/reference/react/useRef}
1727 |      */
1728 |     function useRef<T>(initialValue: T): RefObject<T>;
1729 |     // convenience overload for refs given as a ref prop as they typically start with a null value
1730 |     /**
1731 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1732 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1733 |      *
1734 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1735 |      * value around similar to how you’d use instance fields in classes.
1736 |      *
1737 |      * @version 16.8.0
1738 |      * @see {@link https://react.dev/reference/react/useRef}
1739 |      */
1740 |     function useRef<T>(initialValue: T | null): RefObject<T | null>;
1741 |     // convenience overload for undefined initialValue
1742 |     /**
1743 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1744 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1745 |      *
1746 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1747 |      * value around similar to how you’d use instance fields in classes.
1748 |      *
1749 |      * @version 16.8.0
1750 |      * @see {@link https://react.dev/reference/react/useRef}
1751 |      */
1752 |     function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
1753 |     /**
1754 |      * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
1755 |      * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
1756 |      * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
1757 |      *
1758 |      * Prefer the standard `useEffect` when possible to avoid blocking visual updates.
1759 |      *
1760 |      * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as
1761 |      * `componentDidMount` and `componentDidUpdate`.
1762 |      *
1763 |      * @version 16.8.0
1764 |      * @see {@link https://react.dev/reference/react/useLayoutEffect}
1765 |      */
1766 |     function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
1767 |     /**
1768 |      * Accepts a function that contains imperative, possibly effectful code.
1769 |      *
1770 |      * @param effect Imperative function that can return a cleanup function
1771 |      * @param deps If present, effect will only activate if the values in the list change.
1772 |      *
1773 |      * @version 16.8.0
1774 |      * @see {@link https://react.dev/reference/react/useEffect}
1775 |      */
1776 |     function useEffect(effect: EffectCallback, deps?: DependencyList): void;
1777 |     // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
1778 |     /**
1779 |      * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
1780 |      * `ref`. As always, imperative code using refs should be avoided in most cases.
1781 |      *
1782 |      * @version 16.8.0
1783 |      * @see {@link https://react.dev/reference/react/useImperativeHandle}
1784 |      */
1785 |     function useImperativeHandle<T, R extends T>(ref: Ref<T> | undefined, init: () => R, deps?: DependencyList): void;
1786 |     // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key
1787 |     // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.
1788 |     /**
1789 |      * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
1790 |      * has changed.
1791 |      *
1792 |      * @version 16.8.0
1793 |      * @see {@link https://react.dev/reference/react/useCallback}
1794 |      */
1795 |     // A specific function type would not trigger implicit any.
1796 |     // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.
1797 |     // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
1798 |     function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
1799 |     /**
1800 |      * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
1801 |      *
1802 |      * @version 16.8.0
1803 |      * @see {@link https://react.dev/reference/react/useMemo}
1804 |      */
1805 |     // allow undefined, but don't make it optional as that is very likely a mistake
1806 |     function useMemo<T>(factory: () => T, deps: DependencyList): T;
1807 |     /**
1808 |      * `useDebugValue` can be used to display a label for custom hooks in React DevTools.
1809 |      *
1810 |      * NOTE: We don’t recommend adding debug values to every custom hook.
1811 |      * It’s most valuable for custom hooks that are part of shared libraries.
1812 |      *
1813 |      * @version 16.8.0
1814 |      * @see {@link https://react.dev/reference/react/useDebugValue}
1815 |      */
1816 |     // the name of the custom hook is itself derived from the function name at runtime:
1817 |     // it's just the function name without the "use" prefix.
1818 |     function useDebugValue<T>(value: T, format?: (value: T) => any): void;
1819 | 
1820 |     export type TransitionFunction = () => VoidOrUndefinedOnly | Promise<VoidOrUndefinedOnly>;
1821 |     // strange definition to allow vscode to show documentation on the invocation
1822 |     export interface TransitionStartFunction {
1823 |         /**
1824 |          * State updates caused inside the callback are allowed to be deferred.
1825 |          *
1826 |          * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
1827 |          *
1828 |          * @param callback A function which causes state updates that can be deferred.
1829 |          */
1830 |         (callback: TransitionFunction): void;
1831 |     }
1832 | 
1833 |     /**
1834 |      * Returns a deferred version of the value that may “lag behind” it.
1835 |      *
1836 |      * This is commonly used to keep the interface responsive when you have something that renders immediately
1837 |      * based on user input and something that needs to wait for a data fetch.
1838 |      *
1839 |      * A good example of this is a text input.
1840 |      *
1841 |      * @param value The value that is going to be deferred
1842 |      * @param initialValue A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there’s no previous version of `value` that it can render instead.
1843 |      *
1844 |      * @see {@link https://react.dev/reference/react/useDeferredValue}
1845 |      */
1846 |     export function useDeferredValue<T>(value: T, initialValue?: T): T;
1847 | 
1848 |     /**
1849 |      * Allows components to avoid undesirable loading states by waiting for content to load
1850 |      * before transitioning to the next screen. It also allows components to defer slower,
1851 |      * data fetching updates until subsequent renders so that more crucial updates can be
1852 |      * rendered immediately.
1853 |      *
1854 |      * The `useTransition` hook returns two values in an array.
1855 |      *
1856 |      * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
1857 |      * The second is a function that takes a callback. We can use it to tell React which state we want to defer.
1858 |      *
1859 |      * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
1860 |      *
1861 |      * @see {@link https://react.dev/reference/react/useTransition}
1862 |      */
1863 |     export function useTransition(): [boolean, TransitionStartFunction];
1864 | 
1865 |     /**
1866 |      * Similar to `useTransition` but allows uses where hooks are not available.
1867 |      *
1868 |      * @param callback A function which causes state updates that can be deferred.
1869 |      */
1870 |     export function startTransition(scope: TransitionFunction): void;
1871 | 
1872 |     /**
1873 |      * Wrap any code rendering and triggering updates to your components into `act()` calls.
1874 |      *
1875 |      * Ensures that the behavior in your tests matches what happens in the browser
1876 |      * more closely by executing pending `useEffect`s before returning. This also
1877 |      * reduces the amount of re-renders done.
1878 |      *
1879 |      * @param callback A synchronous, void callback that will execute as a single, complete React commit.
1880 |      *
1881 |      * @see https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks
1882 |      */
1883 |     // NOTES
1884 |     // - the order of these signatures matters - typescript will check the signatures in source order.
1885 |     //   If the `() => VoidOrUndefinedOnly` signature is first, it'll erroneously match a Promise returning function for users with
1886 |     //   `strictNullChecks: false`.
1887 |     // - VoidOrUndefinedOnly is there to forbid any non-void return values for users with `strictNullChecks: true`
1888 |     // While act does always return Thenable, if a void function is passed, we pretend the return value is also void to not trigger dangling Promise lint rules.
1889 |     export function act(callback: () => VoidOrUndefinedOnly): void;
1890 |     export function act<T>(callback: () => T | Promise<T>): Promise<T>;
1891 | 
1892 |     export function useId(): string;
1893 | 
1894 |     /**
1895 |      * @param effect Imperative function that can return a cleanup function
1896 |      * @param deps If present, effect will only activate if the values in the list change.
1897 |      *
1898 |      * @see {@link https://github.com/facebook/react/pull/21913}
1899 |      */
1900 |     export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
1901 | 
1902 |     /**
1903 |      * @param subscribe
1904 |      * @param getSnapshot
1905 |      *
1906 |      * @see {@link https://github.com/reactwg/react-18/discussions/86}
1907 |      */
1908 |     // keep in sync with `useSyncExternalStore` from `use-sync-external-store`
1909 |     export function useSyncExternalStore<Snapshot>(
1910 |         subscribe: (onStoreChange: () => void) => () => void,
1911 |         getSnapshot: () => Snapshot,
1912 |         getServerSnapshot?: () => Snapshot,
1913 |     ): Snapshot;
1914 | 
1915 |     export function useOptimistic<State>(
1916 |         passthrough: State,
1917 |     ): [State, (action: State | ((pendingState: State) => State)) => void];
1918 |     export function useOptimistic<State, Action>(
1919 |         passthrough: State,
1920 |         reducer: (state: State, action: Action) => State,
1921 |     ): [State, (action: Action) => void];
1922 | 
1923 |     export type Usable<T> = PromiseLike<T> | Context<T>;
1924 | 
1925 |     export function use<T>(usable: Usable<T>): T;
1926 | 
1927 |     export function useActionState<State>(
1928 |         action: (state: Awaited<State>) => State | Promise<State>,
1929 |         initialState: Awaited<State>,
1930 |         permalink?: string,
1931 |     ): [state: Awaited<State>, dispatch: () => void, isPending: boolean];
1932 |     export function useActionState<State, Payload>(
1933 |         action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
1934 |         initialState: Awaited<State>,
1935 |         permalink?: string,
1936 |     ): [state: Awaited<State>, dispatch: (payload: Payload) => void, isPending: boolean];
1937 | 
1938 |     // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
1939 |     export function cache<CachedFunction extends Function>(fn: CachedFunction): CachedFunction;
1940 | 
1941 |     /**
1942 |      * Warning: Only available in development builds.
1943 |      *
1944 |      * @see {@link https://react.dev/reference/react/captureOwnerStack Reference docs}
1945 |      */
1946 |     function captureOwnerStack(): string | null;
1947 | 
1948 |     //
1949 |     // Event System
1950 |     // ----------------------------------------------------------------------
1951 |     // TODO: change any to unknown when moving to TS v3
1952 |     interface BaseSyntheticEvent<E = object, C = any, T = any> {
1953 |         nativeEvent: E;
1954 |         currentTarget: C;
1955 |         target: T;
1956 |         bubbles: boolean;
1957 |         cancelable: boolean;
1958 |         defaultPrevented: boolean;
1959 |         eventPhase: number;
1960 |         isTrusted: boolean;
1961 |         preventDefault(): void;
1962 |         isDefaultPrevented(): boolean;
1963 |         stopPropagation(): void;
1964 |         isPropagationStopped(): boolean;
1965 |         persist(): void;
1966 |         timeStamp: number;
1967 |         type: string;
1968 |     }
1969 | 
1970 |     /**
1971 |      * currentTarget - a reference to the element on which the event listener is registered.
1972 |      *
1973 |      * target - a reference to the element from which the event was originally dispatched.
1974 |      * This might be a child element to the element on which the event listener is registered.
1975 |      * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
1976 |      */
1977 |     interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
1978 | 
1979 |     interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> {
1980 |         clipboardData: DataTransfer;
1981 |     }
1982 | 
1983 |     interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
1984 |         data: string;
1985 |     }
1986 | 
1987 |     interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
1988 |         dataTransfer: DataTransfer;
1989 |     }
1990 | 
1991 |     interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {
1992 |         pointerId: number;
1993 |         pressure: number;
1994 |         tangentialPressure: number;
1995 |         tiltX: number;
1996 |         tiltY: number;
1997 |         twist: number;
1998 |         width: number;
1999 |         height: number;
2000 |         pointerType: "mouse" | "pen" | "touch";
2001 |         isPrimary: boolean;
2002 |     }
2003 | 
2004 |     interface FocusEvent<Target = Element, RelatedTarget = Element> extends SyntheticEvent<Target, NativeFocusEvent> {
2005 |         relatedTarget: (EventTarget & RelatedTarget) | null;
2006 |         target: EventTarget & Target;
2007 |     }
2008 | 
2009 |     interface FormEvent<T = Element> extends SyntheticEvent<T> {
2010 |     }
2011 | 
2012 |     interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
2013 |         target: EventTarget & T;
2014 |     }
2015 | 
2016 |     interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
2017 |         target: EventTarget & T;
2018 |     }
2019 | 
2020 |     interface InputEvent<T = Element> extends SyntheticEvent<T, NativeInputEvent> {
2021 |         data: string;
2022 |     }
2023 | 
2024 |     export type ModifierKey =
2025 |         | "Alt"
2026 |         | "AltGraph"
2027 |         | "CapsLock"
2028 |         | "Control"
2029 |         | "Fn"
2030 |         | "FnLock"
2031 |         | "Hyper"
2032 |         | "Meta"
2033 |         | "NumLock"
2034 |         | "ScrollLock"
2035 |         | "Shift"
2036 |         | "Super"
2037 |         | "Symbol"
2038 |         | "SymbolLock";
2039 | 
2040 |     interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
2041 |         altKey: boolean;
2042 |         /** @deprecated */
2043 |         charCode: number;
2044 |         ctrlKey: boolean;
2045 |         code: string;
2046 |         /**
2047 |          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
2048 |          */
2049 |         getModifierState(key: ModifierKey): boolean;
2050 |         /**
2051 |          * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
2052 |          */
2053 |         key: string;
2054 |         /** @deprecated */
2055 |         keyCode: number;
2056 |         locale: string;
2057 |         location: number;
2058 |         metaKey: boolean;
2059 |         repeat: boolean;
2060 |         shiftKey: boolean;
2061 |         /** @deprecated */
2062 |         which: number;
2063 |     }
2064 | 
2065 |     interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
2066 |         altKey: boolean;
2067 |         button: number;
2068 |         buttons: number;
2069 |         clientX: number;
2070 |         clientY: number;
2071 |         ctrlKey: boolean;
2072 |         /**
2073 |          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
2074 |          */
2075 |         getModifierState(key: ModifierKey): boolean;
2076 |         metaKey: boolean;
2077 |         movementX: number;
2078 |         movementY: number;
2079 |         pageX: number;
2080 |         pageY: number;
2081 |         relatedTarget: EventTarget | null;
2082 |         screenX: number;
2083 |         screenY: number;
2084 |         shiftKey: boolean;
2085 |     }
2086 | 
2087 |     interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {
2088 |         altKey: boolean;
2089 |         changedTouches: TouchList;
2090 |         ctrlKey: boolean;
2091 |         /**
2092 |          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
2093 |          */
2094 |         getModifierState(key: ModifierKey): boolean;
2095 |         metaKey: boolean;
2096 |         shiftKey: boolean;
2097 |         targetTouches: TouchList;
2098 |         touches: TouchList;
2099 |     }
2100 | 
2101 |     interface UIEvent<T = Element, E = NativeUIEvent> extends SyntheticEvent<T, E> {
2102 |         detail: number;
2103 |         view: AbstractView;
2104 |     }
2105 | 
2106 |     interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> {
2107 |         deltaMode: number;
2108 |         deltaX: number;
2109 |         deltaY: number;
2110 |         deltaZ: number;
2111 |     }
2112 | 
2113 |     interface AnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent> {
2114 |         animationName: string;
2115 |         elapsedTime: number;
2116 |         pseudoElement: string;
2117 |     }
2118 | 
2119 |     interface ToggleEvent<T = Element> extends SyntheticEvent<T, NativeToggleEvent> {
2120 |         oldState: "closed" | "open";
2121 |         newState: "closed" | "open";
2122 |     }
2123 | 
2124 |     interface TransitionEvent<T = Element> extends SyntheticEvent<T, NativeTransitionEvent> {
2125 |         elapsedTime: number;
2126 |         propertyName: string;
2127 |         pseudoElement: string;
2128 |     }
2129 | 
2130 |     //
2131 |     // Event Handler Types
2132 |     // ----------------------------------------------------------------------
2133 | 
2134 |     type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];
2135 | 
2136 |     type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
2137 | 
2138 |     type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
2139 |     type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
2140 |     type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
2141 |     type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
2142 |     type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
2143 |     type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
2144 |     type InputEventHandler<T = Element> = EventHandler<InputEvent<T>>;
2145 |     type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
2146 |     type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
2147 |     type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
2148 |     type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
2149 |     type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
2150 |     type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
2151 |     type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
2152 |     type ToggleEventHandler<T = Element> = EventHandler<ToggleEvent<T>>;
2153 |     type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
2154 | 
2155 |     //
2156 |     // Props / DOM Attributes
2157 |     // ----------------------------------------------------------------------
2158 | 
2159 |     interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {
2160 |     }
2161 | 
2162 |     type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;
2163 | 
2164 |     interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
2165 |     }
2166 | 
2167 |     interface SVGLineElementAttributes<T> extends SVGProps<T> {}
2168 |     interface SVGTextElementAttributes<T> extends SVGProps<T> {}
2169 | 
2170 | 
2171 |     type DomEventsWithCapture<T> = {
2172 |         // Clipboard Events
2173 |         onCopy?: ClipboardEventHandler<T> | undefined;
2174 |         onCut?: ClipboardEventHandler<T> | undefined;
2175 |         onPaste?: ClipboardEventHandler<T> | undefined;
2176 | 
2177 |         // Composition Events
2178 |         onCompositionEnd?: CompositionEventHandler<T> | undefined;
2179 |         onCompositionStart?: CompositionEventHandler<T> | undefined;
2180 |         onCompositionUpdate?: CompositionEventHandler<T> | undefined;
2181 | 
2182 |         // Focus Events
2183 |         onFocus?: FocusEventHandler<T> | undefined;
2184 |         onBlur?: FocusEventHandler<T> | undefined;
2185 | 
2186 |         // Form Events
2187 |         onChange?: FormEventHandler<T> | undefined;
2188 |         onInput?: FormEventHandler<T> | undefined;
2189 |         onReset?: FormEventHandler<T> | undefined;
2190 |         onSubmit?: FormEventHandler<T> | undefined;
2191 |         onInvalid?: FormEventHandler<T> | undefined;
2192 | 
2193 |         // Image Events
2194 |         onLoad?: ReactEventHandler<T> | undefined;
2195 |         onError?: ReactEventHandler<T> | undefined; // also a Media Event
2196 | 
2197 |         // Keyboard Events
2198 |         onKeyDown?: KeyboardEventHandler<T> | undefined;
2199 |         onKeyUp?: KeyboardEventHandler<T> | undefined;
2200 | 
2201 |         // Media Events
2202 |         onAbort?: ReactEventHandler<T> | undefined;
2203 |         onCanPlay?: ReactEventHandler<T> | undefined;
2204 |         onCanPlayThrough?: ReactEventHandler<T> | undefined;
2205 |         onDurationChange?: ReactEventHandler<T> | undefined;
2206 |         onEmptied?: ReactEventHandler<T> | undefined;
2207 |         onEncrypted?: ReactEventHandler<T> | undefined;
2208 |         onEnded?: ReactEventHandler<T> | undefined;
2209 |         onLoadedData?: ReactEventHandler<T> | undefined;
2210 |         onLoadedMetadata?: ReactEventHandler<T> | undefined;
2211 |         onLoadStart?: ReactEventHandler<T> | undefined;
2212 |         onPause?: ReactEventHandler<T> | undefined;
2213 |         onPlay?: ReactEventHandler<T> | undefined;
2214 |         onPlaying?: ReactEventHandler<T> | undefined;
2215 |         onProgress?: ReactEventHandler<T> | undefined;
2216 |         onRateChange?: ReactEventHandler<T> | undefined;
2217 |         onSeeked?: ReactEventHandler<T> | undefined;
2218 |         onSeeking?: ReactEventHandler<T> | undefined;
2219 |         onStalled?: ReactEventHandler<T> | undefined;
2220 |         onSuspend?: ReactEventHandler<T> | undefined;
2221 |         onTimeUpdate?: ReactEventHandler<T> | undefined;
2222 |         onVolumeChange?: ReactEventHandler<T> | undefined;
2223 |         onWaiting?: ReactEventHandler<T> | undefined;
2224 | 
2225 |         // MouseEvents
2226 |         onAuxClick?: MouseEventHandler<T> | undefined;
2227 |         onClick?: MouseEventHandler<T> | undefined;
2228 |         onContextMenu?: MouseEventHandler<T> | undefined;
2229 |         onDoubleClick?: MouseEventHandler<T> | undefined;
2230 |         onDrag?: DragEventHandler<T> | undefined;
2231 |         onDragEnd?: DragEventHandler<T> | undefined;
2232 |         onDragEnter?: DragEventHandler<T> | undefined;
2233 |         onDragExit?: DragEventHandler<T> | undefined;
2234 |         onDragLeave?: DragEventHandler<T> | undefined;
2235 |         onDragOver?: DragEventHandler<T> | undefined;
2236 |         onDragStart?: DragEventHandler<T> | undefined;
2237 |         onDrop?: DragEventHandler<T> | undefined;
2238 |         onMouseDown?: MouseEventHandler<T> | undefined;
2239 |         onMouseMove?: MouseEventHandler<T> | undefined;
2240 |         onMouseOut?: MouseEventHandler<T> | undefined;
2241 |         onMouseOver?: MouseEventHandler<T> | undefined;
2242 |         onMouseUp?: MouseEventHandler<T> | undefined;
2243 | 
2244 |         // Selection Events
2245 |         onSelect?: ReactEventHandler<T> | undefined;
2246 | 
2247 |         // Touch Events
2248 |         onTouchCancel?: TouchEventHandler<T> | undefined;
2249 |         onTouchEnd?: TouchEventHandler<T> | undefined;
2250 |         onTouchMove?: TouchEventHandler<T> | undefined;
2251 |         onTouchStart?: TouchEventHandler<T> | undefined;
2252 | 
2253 |         // Pointer Events
2254 |         onPointerDown?: PointerEventHandler<T> | undefined;
2255 |         onPointerMove?: PointerEventHandler<T> | undefined;
2256 |         onPointerUp?: PointerEventHandler<T> | undefined;
2257 |         onPointerCancel?: PointerEventHandler<T> | undefined;
2258 |         onPointerOver?: PointerEventHandler<T> | undefined;
2259 |         onPointerOut?: PointerEventHandler<T> | undefined;
2260 |         onGotPointerCapture?: PointerEventHandler<T> | undefined;
2261 |         onLostPointerCapture?: PointerEventHandler<T> | undefined;
2262 | 
2263 |         // UI Events
2264 |         onScroll?: UIEventHandler<T> | undefined;
2265 |         onScrollEnd?: UIEventHandler<T> | undefined;
2266 | 
2267 |         // Wheel Events
2268 |         onWheel?: WheelEventHandler<T> | undefined;
2269 | 
2270 |         // Animation Events
2271 |         onAnimationStart?: AnimationEventHandler<T> | undefined;
2272 |         onAnimationEnd?: AnimationEventHandler<T> | undefined;
2273 |         onAnimationIteration?: AnimationEventHandler<T> | undefined;
2274 | 
2275 |         // Transition Events
2276 |         onTransitionCancel?: TransitionEventHandler<T> | undefined;
2277 |         onTransitionEnd?: TransitionEventHandler<T> | undefined;
2278 |         onTransitionRun?: TransitionEventHandler<T> | undefined;
2279 |         onTransitionStart?: TransitionEventHandler<T> | undefined;
2280 |     };
2281 | 
2282 |     type WithCapture<T> = {
2283 |         [Key in keyof T as Key extends string ? Key | `${Key}Capture` : never]?: T[Key]
2284 |     }
2285 | 
2286 | 
2287 |     interface DOMAttributes<T> extends WithCapture<DomEventsWithCapture<T>> {
2288 |         children?: ReactNode | undefined;
2289 |         dangerouslySetInnerHTML?: {
2290 |             // Should be InnerHTML['innerHTML'].
2291 |             // But unfortunately we're mixing renderer-specific type declarations.
2292 |             __html: string | TrustedHTML;
2293 |         } | undefined;
2294 | 
2295 |         // No Captures
2296 |         onToggle?: ToggleEventHandler<T> | undefined;
2297 |         onBeforeToggle?: ToggleEventHandler<T> | undefined;
2298 | 
2299 |         onBeforeInput?: InputEventHandler<T> | undefined;
2300 |         onBeforeInputCapture?: FormEventHandler<T> | undefined;
2301 | 
2302 |         /** @deprecated Use `onKeyUp` or `onKeyDown` instead */
2303 |         onKeyPress?: KeyboardEventHandler<T> | undefined;
2304 |         /** @deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead */
2305 |         onKeyPressCapture?: KeyboardEventHandler<T> | undefined;
2306 | 
2307 |         onMouseEnter?: MouseEventHandler<T> | undefined;
2308 |         onMouseLeave?: MouseEventHandler<T> | undefined;
2309 | 
2310 |         onPointerEnter?: PointerEventHandler<T> | undefined;
2311 |         onPointerLeave?: PointerEventHandler<T> | undefined;
2312 |     }
2313 | 
2314 |     export interface CSSProperties extends CSS.Properties<string | number> {
2315 |         /**
2316 |          * The index signature was removed to enable closed typing for style
2317 |          * using CSSType. You're able to use type assertion or module augmentation
2318 |          * to add properties or an index signature of your own.
2319 |          *
2320 |          * For examples and more information, visit:
2321 |          * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
2322 |          */
2323 |     }
2324 | 
2325 |     // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
2326 |     interface AriaAttributes {
2327 |         /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
2328 |         "aria-activedescendant"?: string | undefined;
2329 |         /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
2330 |         "aria-atomic"?: Booleanish | undefined;
2331 |         /**
2332 |          * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
2333 |          * presented if they are made.
2334 |          */
2335 |         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
2336 |         /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
2337 |         /**
2338 |          * Defines a string value that labels the current element, which is intended to be converted into Braille.
2339 |          * @see aria-label.
2340 |          */
2341 |         "aria-braillelabel"?: string | undefined;
2342 |         /**
2343 |          * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
2344 |          * @see aria-roledescription.
2345 |          */
2346 |         "aria-brailleroledescription"?: string | undefined;
2347 |         "aria-busy"?: Booleanish | undefined;
2348 |         /**
2349 |          * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
2350 |          * @see aria-pressed @see aria-selected.
2351 |          */
2352 |         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
2353 |         /**
2354 |          * Defines the total number of columns in a table, grid, or treegrid.
2355 |          * @see aria-colindex.
2356 |          */
2357 |         "aria-colcount"?: number | undefined;
2358 |         /**
2359 |          * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
2360 |          * @see aria-colcount @see aria-colspan.
2361 |          */
2362 |         "aria-colindex"?: number | undefined;
2363 |         /**
2364 |          * Defines a human readable text alternative of aria-colindex.
2365 |          * @see aria-rowindextext.
2366 |          */
2367 |         "aria-colindextext"?: string | undefined;
2368 |         /**
2369 |          * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
2370 |          * @see aria-colindex @see aria-rowspan.
2371 |          */
2372 |         "aria-colspan"?: number | undefined;
2373 |         /**
2374 |          * Identifies the element (or elements) whose contents or presence are controlled by the current element.
2375 |          * @see aria-owns.
2376 |          */
2377 |         "aria-controls"?: string | undefined;
2378 |         /** Indicates the element that represents the current item within a container or set of related elements. */
2379 |         "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
2380 |         /**
2381 |          * Identifies the element (or elements) that describes the object.
2382 |          * @see aria-labelledby
2383 |          */
2384 |         "aria-describedby"?: string | undefined;
2385 |         /**
2386 |          * Defines a string value that describes or annotates the current element.
2387 |          * @see related aria-describedby.
2388 |          */
2389 |         "aria-description"?: string | undefined;
2390 |         /**
2391 |          * Identifies the element that provides a detailed, extended description for the object.
2392 |          * @see aria-describedby.
2393 |          */
2394 |         "aria-details"?: string | undefined;
2395 |         /**
2396 |          * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
2397 |          * @see aria-hidden @see aria-readonly.
2398 |          */
2399 |         "aria-disabled"?: Booleanish | undefined;
2400 |         /**
2401 |          * Indicates what functions can be performed when a dragged object is released on the drop target.
2402 |          * @deprecated in ARIA 1.1
2403 |          */
2404 |         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
2405 |         /**
2406 |          * Identifies the element that provides an error message for the object.
2407 |          * @see aria-invalid @see aria-describedby.
2408 |          */
2409 |         "aria-errormessage"?: string | undefined;
2410 |         /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
2411 |         "aria-expanded"?: Booleanish | undefined;
2412 |         /**
2413 |          * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
2414 |          * allows assistive technology to override the general default of reading in document source order.
2415 |          */
2416 |         "aria-flowto"?: string | undefined;
2417 |         /**
2418 |          * Indicates an element's "grabbed" state in a drag-and-drop operation.
2419 |          * @deprecated in ARIA 1.1
2420 |          */
2421 |         "aria-grabbed"?: Booleanish | undefined;
2422 |         /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
2423 |         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
2424 |         /**
2425 |          * Indicates whether the element is exposed to an accessibility API.
2426 |          * @see aria-disabled.
2427 |          */
2428 |         "aria-hidden"?: Booleanish | undefined;
2429 |         /**
2430 |          * Indicates the entered value does not conform to the format expected by the application.
2431 |          * @see aria-errormessage.
2432 |          */
2433 |         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
2434 |         /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
2435 |         "aria-keyshortcuts"?: string | undefined;
2436 |         /**
2437 |          * Defines a string value that labels the current element.
2438 |          * @see aria-labelledby.
2439 |          */
2440 |         "aria-label"?: string | undefined;
2441 |         /**
2442 |          * Identifies the element (or elements) that labels the current element.
2443 |          * @see aria-describedby.
2444 |          */
2445 |         "aria-labelledby"?: string | undefined;
2446 |         /** Defines the hierarchical level of an element within a structure. */
2447 |         "aria-level"?: number | undefined;
2448 |         /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
2449 |         "aria-live"?: "off" | "assertive" | "polite" | undefined;
2450 |         /** Indicates whether an element is modal when displayed. */
2451 |         "aria-modal"?: Booleanish | undefined;
2452 |         /** Indicates whether a text box accepts multiple lines of input or only a single line. */
2453 |         "aria-multiline"?: Booleanish | undefined;
2454 |         /** Indicates that the user may select more than one item from the current selectable descendants. */
2455 |         "aria-multiselectable"?: Booleanish | undefined;
2456 |         /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
2457 |         "aria-orientation"?: "horizontal" | "vertical" | undefined;
2458 |         /**
2459 |          * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
2460 |          * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
2461 |          * @see aria-controls.
2462 |          */
2463 |         "aria-owns"?: string | undefined;
2464 |         /**
2465 |          * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
2466 |          * A hint could be a sample value or a brief description of the expected format.
2467 |          */
2468 |         "aria-placeholder"?: string | undefined;
2469 |         /**
2470 |          * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
2471 |          * @see aria-setsize.
2472 |          */
2473 |         "aria-posinset"?: number | undefined;
2474 |         /**
2475 |          * Indicates the current "pressed" state of toggle buttons.
2476 |          * @see aria-checked @see aria-selected.
2477 |          */
2478 |         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
2479 |         /**
2480 |          * Indicates that the element is not editable, but is otherwise operable.
2481 |          * @see aria-disabled.
2482 |          */
2483 |         "aria-readonly"?: Booleanish | undefined;
2484 |         /**
2485 |          * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
2486 |          * @see aria-atomic.
2487 |          */
2488 |         "aria-relevant"?:
2489 |             | "additions"
2490 |             | "additions removals"
2491 |             | "additions text"
2492 |             | "all"
2493 |             | "removals"
2494 |             | "removals additions"
2495 |             | "removals text"
2496 |             | "text"
2497 |             | "text additions"
2498 |             | "text removals"
2499 |             | undefined;
2500 |         /** Indicates that user input is required on the element before a form may be submitted. */
2501 |         "aria-required"?: Booleanish | undefined;
2502 |         /** Defines a human-readable, author-localized description for the role of an element. */
2503 |         "aria-roledescription"?: string | undefined;
2504 |         /**
2505 |          * Defines the total number of rows in a table, grid, or treegrid.
2506 |          * @see aria-rowindex.
2507 |          */
2508 |         "aria-rowcount"?: number | undefined;
2509 |         /**
2510 |          * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
2511 |          * @see aria-rowcount @see aria-rowspan.
2512 |          */
2513 |         "aria-rowindex"?: number | undefined;
2514 |         /**
2515 |          * Defines a human readable text alternative of aria-rowindex.
2516 |          * @see aria-colindextext.
2517 |          */
2518 |         "aria-rowindextext"?: string | undefined;
2519 |         /**
2520 |          * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
2521 |          * @see aria-rowindex @see aria-colspan.
2522 |          */
2523 |         "aria-rowspan"?: number | undefined;
2524 |         /**
2525 |          * Indicates the current "selected" state of various widgets.
2526 |          * @see aria-checked @see aria-pressed.
2527 |          */
2528 |         "aria-selected"?: Booleanish | undefined;
2529 |         /**
2530 |          * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
2531 |          * @see aria-posinset.
2532 |          */
2533 |         "aria-setsize"?: number | undefined;
2534 |         /** Indicates if items in a table or grid are sorted in ascending or descending order. */
2535 |         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
2536 |         /** Defines the maximum allowed value for a range widget. */
2537 |         "aria-valuemax"?: number | undefined;
2538 |         /** Defines the minimum allowed value for a range widget. */
2539 |         "aria-valuemin"?: number | undefined;
2540 |         /**
2541 |          * Defines the current value for a range widget.
2542 |          * @see aria-valuetext.
2543 |          */
2544 |         "aria-valuenow"?: number | undefined;
2545 |         /** Defines the human readable text alternative of aria-valuenow for a range widget. */
2546 |         "aria-valuetext"?: string | undefined;
2547 |     }
2548 | 
2549 |     // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
2550 |     type AriaRole =
2551 |         | "alert"
2552 |         | "alertdialog"
2553 |         | "application"
2554 |         | "article"
2555 |         | "banner"
2556 |         | "button"
2557 |         | "cell"
2558 |         | "checkbox"
2559 |         | "columnheader"
2560 |         | "combobox"
2561 |         | "complementary"
2562 |         | "contentinfo"
2563 |         | "definition"
2564 |         | "dialog"
2565 |         | "directory"
2566 |         | "document"
2567 |         | "feed"
2568 |         | "figure"
2569 |         | "form"
2570 |         | "grid"
2571 |         | "gridcell"
2572 |         | "group"
2573 |         | "heading"
2574 |         | "img"
2575 |         | "link"
2576 |         | "list"
2577 |         | "listbox"
2578 |         | "listitem"
2579 |         | "log"
2580 |         | "main"
2581 |         | "marquee"
2582 |         | "math"
2583 |         | "menu"
2584 |         | "menubar"
2585 |         | "menuitem"
2586 |         | "menuitemcheckbox"
2587 |         | "menuitemradio"
2588 |         | "navigation"
2589 |         | "none"
2590 |         | "note"
2591 |         | "option"
2592 |         | "presentation"
2593 |         | "progressbar"
2594 |         | "radio"
2595 |         | "radiogroup"
2596 |         | "region"
2597 |         | "row"
2598 |         | "rowgroup"
2599 |         | "rowheader"
2600 |         | "scrollbar"
2601 |         | "search"
2602 |         | "searchbox"
2603 |         | "separator"
2604 |         | "slider"
2605 |         | "spinbutton"
2606 |         | "status"
2607 |         | "switch"
2608 |         | "tab"
2609 |         | "table"
2610 |         | "tablist"
2611 |         | "tabpanel"
2612 |         | "term"
2613 |         | "textbox"
2614 |         | "timer"
2615 |         | "toolbar"
2616 |         | "tooltip"
2617 |         | "tree"
2618 |         | "treegrid"
2619 |         | "treeitem"
2620 |         | (string & {});
2621 | 
2622 |     interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
2623 |         // React-specific Attributes
2624 |         defaultChecked?: boolean | undefined;
2625 |         defaultValue?: string | number | readonly string[] | undefined;
2626 |         suppressContentEditableWarning?: boolean | undefined;
2627 |         suppressHydrationWarning?: boolean | undefined;
2628 | 
2629 |         // Standard HTML Attributes
2630 |         accessKey?: string | undefined;
2631 |         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
2632 |         autoFocus?: boolean | undefined;
2633 |         className?: string | undefined;
2634 |         contentEditable?: Booleanish | "inherit" | "plaintext-only" | undefined;
2635 |         contextMenu?: string | undefined;
2636 |         dir?: string | undefined;
2637 |         draggable?: Booleanish | undefined;
2638 |         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
2639 |         hidden?: boolean | undefined;
2640 |         id?: string | undefined;
2641 |         lang?: string | undefined;
2642 |         nonce?: string | undefined;
2643 |         slot?: string | undefined;
2644 |         spellCheck?: Booleanish | undefined;
2645 |         style?: CSSProperties | undefined;
2646 |         tabIndex?: number | undefined;
2647 |         title?: string | undefined;
2648 |         translate?: "yes" | "no" | undefined;
2649 | 
2650 |         // Unknown
2651 |         radioGroup?: string | undefined; // <command>, <menuitem>
2652 | 
2653 |         // WAI-ARIA
2654 |         role?: AriaRole | undefined;
2655 | 
2656 |         // RDFa Attributes
2657 |         about?: string | undefined;
2658 |         content?: string | undefined;
2659 |         datatype?: string | undefined;
2660 |         inlist?: any;
2661 |         prefix?: string | undefined;
2662 |         property?: string | undefined;
2663 |         rel?: string | undefined;
2664 |         resource?: string | undefined;
2665 |         rev?: string | undefined;
2666 |         typeof?: string | undefined;
2667 |         vocab?: string | undefined;
2668 | 
2669 |         // Non-standard Attributes
2670 |         autoCorrect?: string | undefined;
2671 |         autoSave?: string | undefined;
2672 |         color?: string | undefined;
2673 |         itemProp?: string | undefined;
2674 |         itemScope?: boolean | undefined;
2675 |         itemType?: string | undefined;
2676 |         itemID?: string | undefined;
2677 |         itemRef?: string | undefined;
2678 |         results?: number | undefined;
2679 |         security?: string | undefined;
2680 |         unselectable?: "on" | "off" | undefined;
2681 | 
2682 |         // Popover API
2683 |         popover?: "" | "auto" | "manual" | undefined;
2684 |         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
2685 |         popoverTarget?: string | undefined;
2686 | 
2687 |         // Living Standard
2688 |         /**
2689 |          * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
2690 |          */
2691 |         inert?: boolean | undefined;
2692 |         /**
2693 |          * Hints at the type of data that might be entered by the user while editing the element or its contents
2694 |          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}
2695 |          */
2696 |         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
2697 |         /**
2698 |          * Specify that a standard HTML element should behave like a defined custom built-in element
2699 |          * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}
2700 |          */
2701 |         is?: string | undefined;
2702 |         /**
2703 |          * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}
2704 |          */
2705 |         exportparts?: string | undefined;
2706 |         /**
2707 |          * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}
2708 |          */
2709 |         part?: string | undefined;
2710 |     }
2711 | 
2712 |     /**
2713 |      * For internal usage only.
2714 |      * Different release channels declare additional types of ReactNode this particular release channel accepts.
2715 |      * App or library types should never augment this interface.
2716 |      */
2717 |     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {}
2718 | 
2719 |     interface AllHTMLAttributes<T> extends HTMLAttributes<T> {
2720 |         // Standard HTML Attributes
2721 |         accept?: string | undefined;
2722 |         acceptCharset?: string | undefined;
2723 |         action?:
2724 |             | string
2725 |             | undefined
2726 |             | ((formData: FormData) => void | Promise<void>)
2727 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
2728 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
2729 |             ];
2730 |         allowFullScreen?: boolean | undefined;
2731 |         allowTransparency?: boolean | undefined;
2732 |         alt?: string | undefined;
2733 |         as?: string | undefined;
2734 |         async?: boolean | undefined;
2735 |         autoComplete?: string | undefined;
2736 |         autoPlay?: boolean | undefined;
2737 |         capture?: boolean | "user" | "environment" | undefined;
2738 |         cellPadding?: number | string | undefined;
2739 |         cellSpacing?: number | string | undefined;
2740 |         charSet?: string | undefined;
2741 |         challenge?: string | undefined;
2742 |         checked?: boolean | undefined;
2743 |         cite?: string | undefined;
2744 |         classID?: string | undefined;
2745 |         cols?: number | undefined;
2746 |         colSpan?: number | undefined;
2747 |         controls?: boolean | undefined;
2748 |         coords?: string | undefined;
2749 |         crossOrigin?: CrossOrigin;
2750 |         data?: string | undefined;
2751 |         dateTime?: string | undefined;
2752 |         default?: boolean | undefined;
2753 |         defer?: boolean | undefined;
2754 |         disabled?: boolean | undefined;
2755 |         download?: any;
2756 |         encType?: string | undefined;
2757 |         form?: string | undefined;
2758 |         formAction?:
2759 |             | string
2760 |             | undefined
2761 |             | ((formData: FormData) => void | Promise<void>)
2762 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
2763 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
2764 |             ];
2765 |         formEncType?: string | undefined;
2766 |         formMethod?: string | undefined;
2767 |         formNoValidate?: boolean | undefined;
2768 |         formTarget?: string | undefined;
2769 |         frameBorder?: number | string | undefined;
2770 |         headers?: string | undefined;
2771 |         height?: number | string | undefined;
2772 |         high?: number | undefined;
2773 |         href?: string | undefined;
2774 |         hrefLang?: string | undefined;
2775 |         htmlFor?: string | undefined;
2776 |         httpEquiv?: string | undefined;
2777 |         integrity?: string | undefined;
2778 |         keyParams?: string | undefined;
2779 |         keyType?: string | undefined;
2780 |         kind?: string | undefined;
2781 |         label?: string | undefined;
2782 |         list?: string | undefined;
2783 |         loop?: boolean | undefined;
2784 |         low?: number | undefined;
2785 |         manifest?: string | undefined;
2786 |         marginHeight?: number | undefined;
2787 |         marginWidth?: number | undefined;
2788 |         max?: number | string | undefined;
2789 |         maxLength?: number | undefined;
2790 |         media?: string | undefined;
2791 |         mediaGroup?: string | undefined;
2792 |         method?: string | undefined;
2793 |         min?: number | string | undefined;
2794 |         minLength?: number | undefined;
2795 |         multiple?: boolean | undefined;
2796 |         muted?: boolean | undefined;
2797 |         name?: string | undefined;
2798 |         noValidate?: boolean | undefined;
2799 |         open?: boolean | undefined;
2800 |         optimum?: number | undefined;
2801 |         pattern?: string | undefined;
2802 |         placeholder?: string | undefined;
2803 |         playsInline?: boolean | undefined;
2804 |         poster?: string | undefined;
2805 |         preload?: string | undefined;
2806 |         readOnly?: boolean | undefined;
2807 |         required?: boolean | undefined;
2808 |         reversed?: boolean | undefined;
2809 |         rows?: number | undefined;
2810 |         rowSpan?: number | undefined;
2811 |         sandbox?: string | undefined;
2812 |         scope?: string | undefined;
2813 |         scoped?: boolean | undefined;
2814 |         scrolling?: string | undefined;
2815 |         seamless?: boolean | undefined;
2816 |         selected?: boolean | undefined;
2817 |         shape?: string | undefined;
2818 |         size?: number | undefined;
2819 |         sizes?: string | undefined;
2820 |         span?: number | undefined;
2821 |         src?: string | undefined;
2822 |         srcDoc?: string | undefined;
2823 |         srcLang?: string | undefined;
2824 |         srcSet?: string | undefined;
2825 |         start?: number | undefined;
2826 |         step?: number | string | undefined;
2827 |         summary?: string | undefined;
2828 |         target?: string | undefined;
2829 |         type?: string | undefined;
2830 |         useMap?: string | undefined;
2831 |         value?: string | readonly string[] | number | undefined;
2832 |         width?: number | string | undefined;
2833 |         wmode?: string | undefined;
2834 |         wrap?: string | undefined;
2835 |     }
2836 | 
2837 |     type HTMLAttributeReferrerPolicy =
2838 |         | ""
2839 |         | "no-referrer"
2840 |         | "no-referrer-when-downgrade"
2841 |         | "origin"
2842 |         | "origin-when-cross-origin"
2843 |         | "same-origin"
2844 |         | "strict-origin"
2845 |         | "strict-origin-when-cross-origin"
2846 |         | "unsafe-url";
2847 | 
2848 |     type HTMLAttributeAnchorTarget =
2849 |         | "_self"
2850 |         | "_blank"
2851 |         | "_parent"
2852 |         | "_top"
2853 |         | (string & {});
2854 | 
2855 |     interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
2856 |         download?: any;
2857 |         href?: string | undefined;
2858 |         hrefLang?: string | undefined;
2859 |         media?: string | undefined;
2860 |         ping?: string | undefined;
2861 |         target?: HTMLAttributeAnchorTarget | undefined;
2862 |         type?: string | undefined;
2863 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2864 |     }
2865 | 
2866 |     interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
2867 | 
2868 |     interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
2869 |         alt?: string | undefined;
2870 |         coords?: string | undefined;
2871 |         download?: any;
2872 |         href?: string | undefined;
2873 |         hrefLang?: string | undefined;
2874 |         media?: string | undefined;
2875 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2876 |         shape?: string | undefined;
2877 |         target?: string | undefined;
2878 |     }
2879 | 
2880 |     interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
2881 |         href?: string | undefined;
2882 |         target?: string | undefined;
2883 |     }
2884 | 
2885 |     interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
2886 |         cite?: string | undefined;
2887 |     }
2888 | 
2889 |     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
2890 |         disabled?: boolean | undefined;
2891 |         form?: string | undefined;
2892 |         formAction?:
2893 |             | string
2894 |             | ((formData: FormData) => void | Promise<void>)
2895 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
2896 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
2897 |             ]
2898 |             | undefined;
2899 |         formEncType?: string | undefined;
2900 |         formMethod?: string | undefined;
2901 |         formNoValidate?: boolean | undefined;
2902 |         formTarget?: string | undefined;
2903 |         name?: string | undefined;
2904 |         type?: "submit" | "reset" | "button" | undefined;
2905 |         value?: string | readonly string[] | number | undefined;
2906 |     }
2907 | 
2908 |     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
2909 |         height?: number | string | undefined;
2910 |         width?: number | string | undefined;
2911 |     }
2912 | 
2913 |     interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
2914 |         span?: number | undefined;
2915 |         width?: number | string | undefined;
2916 |     }
2917 | 
2918 |     interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
2919 |         span?: number | undefined;
2920 |     }
2921 | 
2922 |     interface DataHTMLAttributes<T> extends HTMLAttributes<T> {
2923 |         value?: string | readonly string[] | number | undefined;
2924 |     }
2925 | 
2926 |     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
2927 |         open?: boolean | undefined;
2928 |         name?: string | undefined;
2929 |     }
2930 | 
2931 |     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
2932 |         cite?: string | undefined;
2933 |         dateTime?: string | undefined;
2934 |     }
2935 | 
2936 |     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
2937 |         onCancel?: ReactEventHandler<T> | undefined;
2938 |         onClose?: ReactEventHandler<T> | undefined;
2939 |         open?: boolean | undefined;
2940 |     }
2941 | 
2942 |     interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
2943 |         height?: number | string | undefined;
2944 |         src?: string | undefined;
2945 |         type?: string | undefined;
2946 |         width?: number | string | undefined;
2947 |     }
2948 | 
2949 |     interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
2950 |         disabled?: boolean | undefined;
2951 |         form?: string | undefined;
2952 |         name?: string | undefined;
2953 |     }
2954 | 
2955 |     interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
2956 |         acceptCharset?: string | undefined;
2957 |         action?:
2958 |             | string
2959 |             | undefined
2960 |             | ((formData: FormData) => void | Promise<void>)
2961 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
2962 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
2963 |             ];
2964 |         autoComplete?: string | undefined;
2965 |         encType?: string | undefined;
2966 |         method?: string | undefined;
2967 |         name?: string | undefined;
2968 |         noValidate?: boolean | undefined;
2969 |         target?: string | undefined;
2970 |     }
2971 | 
2972 |     interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
2973 |         manifest?: string | undefined;
2974 |     }
2975 | 
2976 |     interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
2977 |         allow?: string | undefined;
2978 |         allowFullScreen?: boolean | undefined;
2979 |         allowTransparency?: boolean | undefined;
2980 |         /** @deprecated */
2981 |         frameBorder?: number | string | undefined;
2982 |         height?: number | string | undefined;
2983 |         loading?: "eager" | "lazy" | undefined;
2984 |         /** @deprecated */
2985 |         marginHeight?: number | undefined;
2986 |         /** @deprecated */
2987 |         marginWidth?: number | undefined;
2988 |         name?: string | undefined;
2989 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2990 |         sandbox?: string | undefined;
2991 |         /** @deprecated */
2992 |         scrolling?: string | undefined;
2993 |         seamless?: boolean | undefined;
2994 |         src?: string | undefined;
2995 |         srcDoc?: string | undefined;
2996 |         width?: number | string | undefined;
2997 |     }
2998 | 
2999 |     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {}
3000 | 
3001 |     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
3002 |         alt?: string | undefined;
3003 |         crossOrigin?: CrossOrigin;
3004 |         decoding?: "async" | "auto" | "sync" | undefined;
3005 |         fetchPriority?: "high" | "low" | "auto";
3006 |         height?: number | string | undefined;
3007 |         loading?: "eager" | "lazy" | undefined;
3008 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
3009 |         sizes?: string | undefined;
3010 |         src?:
3011 |             | string
3012 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES[
3013 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES
3014 |             ]
3015 |             | undefined;
3016 |         srcSet?: string | undefined;
3017 |         useMap?: string | undefined;
3018 |         width?: number | string | undefined;
3019 |     }
3020 | 
3021 |     interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
3022 |         cite?: string | undefined;
3023 |         dateTime?: string | undefined;
3024 |     }
3025 | 
3026 |     type HTMLInputTypeAttribute =
3027 |         | "button"
3028 |         | "checkbox"
3029 |         | "color"
3030 |         | "date"
3031 |         | "datetime-local"
3032 |         | "email"
3033 |         | "file"
3034 |         | "hidden"
3035 |         | "image"
3036 |         | "month"
3037 |         | "number"
3038 |         | "password"
3039 |         | "radio"
3040 |         | "range"
3041 |         | "reset"
3042 |         | "search"
3043 |         | "submit"
3044 |         | "tel"
3045 |         | "text"
3046 |         | "time"
3047 |         | "url"
3048 |         | "week"
3049 |         | (string & {});
3050 | 
3051 |     type AutoFillAddressKind = "billing" | "shipping";
3052 |     type AutoFillBase = "" | "off" | "on";
3053 |     type AutoFillContactField =
3054 |         | "email"
3055 |         | "tel"
3056 |         | `tel-${"area-code" | "country-code" | "extension" | "local" | "local-prefix" | "local-suffix" | "national"}`;
3057 |     type AutoFillContactKind = "home" | "mobile" | "work";
3058 |     type AutoFillCredentialField = "webauthn";
3059 |     type AutoFillNormalField =
3060 |         | "additional-name"
3061 |         | `address-level${1 | 2 | 3 | 4}`
3062 |         | `address-line${1 | 2 | 3}`
3063 |         | `bday-${"day" | "month" | "year"}`
3064 |         | `cc-${"csc" | "exp" | "exp-month" | "exp-year" | "family-name" | "given-name" | "name" | "number" | "type"}`
3065 |         | "country"
3066 |         | "country-name"
3067 |         | "current-password"
3068 |         | "family-name"
3069 |         | "given-name"
3070 |         | `honorific-${'prefix' | 'suffix'}`
3071 |         | "name"
3072 |         | "new-password"
3073 |         | "one-time-code"
3074 |         | "organization"
3075 |         | "postal-code"
3076 |         | "street-address"
3077 |         | "transaction-amount"
3078 |         | "transaction-currency"
3079 |         | "username";
3080 |     type OptionalPrefixToken<T extends string> = `${T} ` | "";
3081 |     type OptionalPostfixToken<T extends string> = ` ${T}` | "";
3082 |     type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;
3083 |     type AutoFillSection = `section-${string}`;
3084 |     type AutoFill =
3085 |         | AutoFillBase
3086 |         | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<
3087 |             AutoFillAddressKind
3088 |         >}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;
3089 |     type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});
3090 | 
3091 |     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
3092 |         accept?: string | undefined;
3093 |         alt?: string | undefined;
3094 |         autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
3095 |         capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
3096 |         checked?: boolean | undefined;
3097 |         disabled?: boolean | undefined;
3098 |         form?: string | undefined;
3099 |         formAction?:
3100 |             | string
3101 |             | ((formData: FormData) => void | Promise<void>)
3102 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
3103 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
3104 |             ]
3105 |             | undefined;
3106 |         formEncType?: string | undefined;
3107 |         formMethod?: string | undefined;
3108 |         formNoValidate?: boolean | undefined;
3109 |         formTarget?: string | undefined;
3110 |         height?: number | string | undefined;
3111 |         list?: string | undefined;
3112 |         max?: number | string | undefined;
3113 |         maxLength?: number | undefined;
3114 |         min?: number | string | undefined;
3115 |         minLength?: number | undefined;
3116 |         multiple?: boolean | undefined;
3117 |         name?: string | undefined;
3118 |         pattern?: string | undefined;
3119 |         placeholder?: string | undefined;
3120 |         readOnly?: boolean | undefined;
3121 |         required?: boolean | undefined;
3122 |         size?: number | undefined;
3123 |         src?: string | undefined;
3124 |         step?: number | string | undefined;
3125 |         type?: HTMLInputTypeAttribute | undefined;
3126 |         value?: string | readonly string[] | number | undefined;
3127 |         width?: number | string | undefined;
3128 | 
3129 |         onChange?: ChangeEventHandler<T> | undefined;
3130 |     }
3131 | 
3132 |     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
3133 |         challenge?: string | undefined;
3134 |         disabled?: boolean | undefined;
3135 |         form?: string | undefined;
3136 |         keyType?: string | undefined;
3137 |         keyParams?: string | undefined;
3138 |         name?: string | undefined;
3139 |     }
3140 | 
3141 |     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
3142 |         form?: string | undefined;
3143 |         htmlFor?: string | undefined;
3144 |     }
3145 | 
3146 |     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
3147 |         value?: string | readonly string[] | number | undefined;
3148 |     }
3149 | 
3150 |     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
3151 |         as?: string | undefined;
3152 |         blocking?: "render" | (string & {}) | undefined;
3153 |         crossOrigin?: CrossOrigin;
3154 |         fetchPriority?: "high" | "low" | "auto";
3155 |         href?: string | undefined;
3156 |         hrefLang?: string | undefined;
3157 |         integrity?: string | undefined;
3158 |         media?: string | undefined;
3159 |         imageSrcSet?: string | undefined;
3160 |         imageSizes?: string | undefined;
3161 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
3162 |         sizes?: string | undefined;
3163 |         type?: string | undefined;
3164 |         charSet?: string | undefined;
3165 | 
3166 |         // React props
3167 |         precedence?: string | undefined;
3168 |     }
3169 | 
3170 |     interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
3171 |         name?: string | undefined;
3172 |     }
3173 | 
3174 |     interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
3175 |         type?: string | undefined;
3176 |     }
3177 | 
3178 |     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {}
3179 | 
3180 |     interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
3181 |         autoPlay?: boolean | undefined;
3182 |         controls?: boolean | undefined;
3183 |         controlsList?: string | undefined;
3184 |         crossOrigin?: CrossOrigin;
3185 |         loop?: boolean | undefined;
3186 |         mediaGroup?: string | undefined;
3187 |         muted?: boolean | undefined;
3188 |         playsInline?: boolean | undefined;
3189 |         preload?: string | undefined;
3190 |         src?:
3191 |             | string
3192 |             | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES[
3193 |                 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES
3194 |             ]
3195 |             | undefined;
3196 |     }
3197 | 
3198 |     interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
3199 |         charSet?: string | undefined;
3200 |         content?: string | undefined;
3201 |         httpEquiv?: string | undefined;
3202 |         media?: string | undefined;
3203 |         name?: string | undefined;
3204 |     }
3205 | 
3206 |     interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
3207 |         form?: string | undefined;
3208 |         high?: number | undefined;
3209 |         low?: number | undefined;
3210 |         max?: number | string | undefined;
3211 |         min?: number | string | undefined;
3212 |         optimum?: number | undefined;
3213 |         value?: string | readonly string[] | number | undefined;
3214 |     }
3215 | 
3216 |     interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
3217 |         cite?: string | undefined;
3218 |     }
3219 | 
3220 |     interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
3221 |         classID?: string | undefined;
3222 |         data?: string | undefined;
3223 |         form?: string | undefined;
3224 |         height?: number | string | undefined;
3225 |         name?: string | undefined;
3226 |         type?: string | undefined;
3227 |         useMap?: string | undefined;
3228 |         width?: number | string | undefined;
3229 |         wmode?: string | undefined;
3230 |     }
3231 | 
3232 |     interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
3233 |         reversed?: boolean | undefined;
3234 |         start?: number | undefined;
3235 |         type?: "1" | "a" | "A" | "i" | "I" | undefined;
3236 |     }
3237 | 
3238 |     interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
3239 |         disabled?: boolean | undefined;
3240 |         label?: string | undefined;
3241 |     }
3242 | 
3243 |     interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
3244 |         disabled?: boolean | undefined;
3245 |         label?: string | undefined;
3246 |         selected?: boolean | undefined;
3247 |         value?: string | readonly string[] | number | undefined;
3248 |     }
3249 | 
3250 |     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
3251 |         form?: string | undefined;
3252 |         htmlFor?: string | undefined;
3253 |         name?: string | undefined;
3254 |     }
3255 | 
3256 |     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
3257 |         name?: string | undefined;
3258 |         value?: string | readonly string[] | number | undefined;
3259 |     }
3260 | 
3261 |     interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
3262 |         max?: number | string | undefined;
3263 |         value?: string | readonly string[] | number | undefined;
3264 |     }
3265 | 
3266 |     interface SlotHTMLAttributes<T> extends HTMLAttributes<T> {
3267 |         name?: string | undefined;
3268 |     }
3269 | 
3270 |     interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
3271 |         async?: boolean | undefined;
3272 |         blocking?: "render" | (string & {}) | undefined;
3273 |         /** @deprecated */
3274 |         charSet?: string | undefined;
3275 |         crossOrigin?: CrossOrigin;
3276 |         defer?: boolean | undefined;
3277 |         fetchPriority?: "high" | "low" | "auto" | undefined;
3278 |         integrity?: string | undefined;
3279 |         noModule?: boolean | undefined;
3280 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
3281 |         src?: string | undefined;
3282 |         type?: string | undefined;
3283 |     }
3284 | 
3285 |     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
3286 |         autoComplete?: string | undefined;
3287 |         disabled?: boolean | undefined;
3288 |         form?: string | undefined;
3289 |         multiple?: boolean | undefined;
3290 |         name?: string | undefined;
3291 |         required?: boolean | undefined;
3292 |         size?: number | undefined;
3293 |         value?: string | readonly string[] | number | undefined;
3294 |         onChange?: ChangeEventHandler<T> | undefined;
3295 |     }
3296 | 
3297 |     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
3298 |         height?: number | string | undefined;
3299 |         media?: string | undefined;
3300 |         sizes?: string | undefined;
3301 |         src?: string | undefined;
3302 |         srcSet?: string | undefined;
3303 |         type?: string | undefined;
3304 |         width?: number | string | undefined;
3305 |     }
3306 | 
3307 |     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
3308 |         blocking?: "render" | (string & {}) | undefined;
3309 |         media?: string | undefined;
3310 |         scoped?: boolean | undefined;
3311 |         type?: string | undefined;
3312 | 
3313 |         // React props
3314 |         href?: string | undefined;
3315 |         precedence?: string | undefined;
3316 |     }
3317 | 
3318 |     interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
3319 |         align?: "left" | "center" | "right" | undefined;
3320 |         bgcolor?: string | undefined;
3321 |         border?: number | undefined;
3322 |         cellPadding?: number | string | undefined;
3323 |         cellSpacing?: number | string | undefined;
3324 |         frame?: boolean | undefined;
3325 |         rules?: "none" | "groups" | "rows" | "columns" | "all" | undefined;
3326 |         summary?: string | undefined;
3327 |         width?: number | string | undefined;
3328 |     }
3329 | 
3330 |     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
3331 |         autoComplete?: string | undefined;
3332 |         cols?: number | undefined;
3333 |         dirName?: string | undefined;
3334 |         disabled?: boolean | undefined;
3335 |         form?: string | undefined;
3336 |         maxLength?: number | undefined;
3337 |         minLength?: number | undefined;
3338 |         name?: string | undefined;
3339 |         placeholder?: string | undefined;
3340 |         readOnly?: boolean | undefined;
3341 |         required?: boolean | undefined;
3342 |         rows?: number | undefined;
3343 |         value?: string | readonly string[] | number | undefined;
3344 |         wrap?: string | undefined;
3345 | 
3346 |         onChange?: ChangeEventHandler<T> | undefined;
3347 |     }
3348 | 
3349 |     interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
3350 |         align?: "left" | "center" | "right" | "justify" | "char" | undefined;
3351 |         colSpan?: number | undefined;
3352 |         headers?: string | undefined;
3353 |         rowSpan?: number | undefined;
3354 |         scope?: string | undefined;
3355 |         abbr?: string | undefined;
3356 |         height?: number | string | undefined;
3357 |         width?: number | string | undefined;
3358 |         valign?: "top" | "middle" | "bottom" | "baseline" | undefined;
3359 |     }
3360 | 
3361 |     interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
3362 |         align?: "left" | "center" | "right" | "justify" | "char" | undefined;
3363 |         colSpan?: number | undefined;
3364 |         headers?: string | undefined;
3365 |         rowSpan?: number | undefined;
3366 |         scope?: string | undefined;
3367 |         abbr?: string | undefined;
3368 |     }
3369 | 
3370 |     interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
3371 |         dateTime?: string | undefined;
3372 |     }
3373 | 
3374 |     interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
3375 |         default?: boolean | undefined;
3376 |         kind?: string | undefined;
3377 |         label?: string | undefined;
3378 |         src?: string | undefined;
3379 |         srcLang?: string | undefined;
3380 |     }
3381 | 
3382 |     interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
3383 |         height?: number | string | undefined;
3384 |         playsInline?: boolean | undefined;
3385 |         poster?: string | undefined;
3386 |         width?: number | string | undefined;
3387 |         disablePictureInPicture?: boolean | undefined;
3388 |         disableRemotePlayback?: boolean | undefined;
3389 | 
3390 |         onResize?: ReactEventHandler<T> | undefined;
3391 |         onResizeCapture?: ReactEventHandler<T> | undefined;
3392 |     }
3393 | 
3394 |     // this list is "complete" in that it contains every SVG attribute
3395 |     // that React supports, but the types can be improved.
3396 |     // Full list here: https://facebook.github.io/react/docs/dom-elements.html
3397 |     //
3398 |     // The three broad type categories are (in order of restrictiveness):
3399 |     //   - "number | string"
3400 |     //   - "string"
3401 |     //   - union of string literals
3402 |     interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
3403 |         // React-specific Attributes
3404 |         suppressHydrationWarning?: boolean | undefined;
3405 | 
3406 |         // Attributes which also defined in HTMLAttributes
3407 |         // See comment in SVGDOMPropertyConfig.js
3408 |         className?: string | undefined;
3409 |         color?: string | undefined;
3410 |         height?: number | string | undefined;
3411 |         id?: string | undefined;
3412 |         lang?: string | undefined;
3413 |         max?: number | string | undefined;
3414 |         media?: string | undefined;
3415 |         method?: string | undefined;
3416 |         min?: number | string | undefined;
3417 |         name?: string | undefined;
3418 |         style?: CSSProperties | undefined;
3419 |         target?: string | undefined;
3420 |         type?: string | undefined;
3421 |         width?: number | string | undefined;
3422 | 
3423 |         // Other HTML properties supported by SVG elements in browsers
3424 |         role?: AriaRole | undefined;
3425 |         tabIndex?: number | undefined;
3426 |         crossOrigin?: CrossOrigin;
3427 | 
3428 |         // SVG Specific attributes
3429 |         accentHeight?: number | string | undefined;
3430 |         accumulate?: "none" | "sum" | undefined;
3431 |         additive?: "replace" | "sum" | undefined;
3432 |         alignmentBaseline?:
3433 |             | "auto"
3434 |             | "baseline"
3435 |             | "before-edge"
3436 |             | "text-before-edge"
3437 |             | "middle"
3438 |             | "central"
3439 |             | "after-edge"
3440 |             | "text-after-edge"
3441 |             | "ideographic"
3442 |             | "alphabetic"
3443 |             | "hanging"
3444 |             | "mathematical"
3445 |             | "inherit"
3446 |             | undefined;
3447 |         allowReorder?: "no" | "yes" | undefined;
3448 |         alphabetic?: number | string | undefined;
3449 |         amplitude?: number | string | undefined;
3450 |         arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
3451 |         ascent?: number | string | undefined;
3452 |         attributeName?: string | undefined;
3453 |         attributeType?: string | undefined;
3454 |         autoReverse?: Booleanish | undefined;
3455 |         azimuth?: number | string | undefined;
3456 |         baseFrequency?: number | string | undefined;
3457 |         baselineShift?: number | string | undefined;
3458 |         baseProfile?: number | string | undefined;
3459 |         bbox?: number | string | undefined;
3460 |         begin?: number | string | undefined;
3461 |         bias?: number | string | undefined;
3462 |         by?: number | string | undefined;
3463 |         calcMode?: number | string | undefined;
3464 |         capHeight?: number | string | undefined;
3465 |         clip?: number | string | undefined;
3466 |         clipPath?: string | undefined;
3467 |         clipPathUnits?: number | string | undefined;
3468 |         clipRule?: number | string | undefined;
3469 |         colorInterpolation?: number | string | undefined;
3470 |         colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
3471 |         colorProfile?: number | string | undefined;
3472 |         colorRendering?: number | string | undefined;
3473 |         contentScriptType?: number | string | undefined;
3474 |         contentStyleType?: number | string | undefined;
3475 |         cursor?: number | string | undefined;
3476 |         cx?: number | string | undefined;
3477 |         cy?: number | string | undefined;
3478 |         d?: string | undefined;
3479 |         decelerate?: number | string | undefined;
3480 |         descent?: number | string | undefined;
3481 |         diffuseConstant?: number | string | undefined;
3482 |         direction?: number | string | undefined;
3483 |         display?: number | string | undefined;
3484 |         divisor?: number | string | undefined;
3485 |         dominantBaseline?:
3486 |             | "auto"
3487 |             | "use-script"
3488 |             | "no-change"
3489 |             | "reset-size"
3490 |             | "ideographic"
3491 |             | "alphabetic"
3492 |             | "hanging"
3493 |             | "mathematical"
3494 |             | "central"
3495 |             | "middle"
3496 |             | "text-after-edge"
3497 |             | "text-before-edge"
3498 |             | "inherit"
3499 |             | undefined;
3500 |         dur?: number | string | undefined;
3501 |         dx?: number | string | undefined;
3502 |         dy?: number | string | undefined;
3503 |         edgeMode?: number | string | undefined;
3504 |         elevation?: number | string | undefined;
3505 |         enableBackground?: number | string | undefined;
3506 |         end?: number | string | undefined;
3507 |         exponent?: number | string | undefined;
3508 |         externalResourcesRequired?: Booleanish | undefined;
3509 |         fill?: string | undefined;
3510 |         fillOpacity?: number | string | undefined;
3511 |         fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
3512 |         filter?: string | undefined;
3513 |         filterRes?: number | string | undefined;
3514 |         filterUnits?: number | string | undefined;
3515 |         floodColor?: number | string | undefined;
3516 |         floodOpacity?: number | string | undefined;
3517 |         focusable?: Booleanish | "auto" | undefined;
3518 |         fontFamily?: string | undefined;
3519 |         fontSize?: number | string | undefined;
3520 |         fontSizeAdjust?: number | string | undefined;
3521 |         fontStretch?: number | string | undefined;
3522 |         fontStyle?: number | string | undefined;
3523 |         fontVariant?: number | string | undefined;
3524 |         fontWeight?: number | string | undefined;
3525 |         format?: number | string | undefined;
3526 |         fr?: number | string | undefined;
3527 |         from?: number | string | undefined;
3528 |         fx?: number | string | undefined;
3529 |         fy?: number | string | undefined;
3530 |         g1?: number | string | undefined;
3531 |         g2?: number | string | undefined;
3532 |         glyphName?: number | string | undefined;
3533 |         glyphOrientationHorizontal?: number | string | undefined;
3534 |         glyphOrientationVertical?: number | string | undefined;
3535 |         glyphRef?: number | string | undefined;
3536 |         gradientTransform?: string | undefined;
3537 |         gradientUnits?: string | undefined;
3538 |         hanging?: number | string | undefined;
3539 |         horizAdvX?: number | string | undefined;
3540 |         horizOriginX?: number | string | undefined;
3541 |         href?: string | undefined;
3542 |         ideographic?: number | string | undefined;
3543 |         imageRendering?: number | string | undefined;
3544 |         in2?: number | string | undefined;
3545 |         in?: string | undefined;
3546 |         intercept?: number | string | undefined;
3547 |         k1?: number | string | undefined;
3548 |         k2?: number | string | undefined;
3549 |         k3?: number | string | undefined;
3550 |         k4?: number | string | undefined;
3551 |         k?: number | string | undefined;
3552 |         kernelMatrix?: number | string | undefined;
3553 |         kernelUnitLength?: number | string | undefined;
3554 |         kerning?: number | string | undefined;
3555 |         keyPoints?: number | string | undefined;
3556 |         keySplines?: number | string | undefined;
3557 |         keyTimes?: number | string | undefined;
3558 |         lengthAdjust?: number | string | undefined;
3559 |         letterSpacing?: number | string | undefined;
3560 |         lightingColor?: number | string | undefined;
3561 |         limitingConeAngle?: number | string | undefined;
3562 |         local?: number | string | undefined;
3563 |         markerEnd?: string | undefined;
3564 |         markerHeight?: number | string | undefined;
3565 |         markerMid?: string | undefined;
3566 |         markerStart?: string | undefined;
3567 |         markerUnits?: number | string | undefined;
3568 |         markerWidth?: number | string | undefined;
3569 |         mask?: string | undefined;
3570 |         maskContentUnits?: number | string | undefined;
3571 |         maskUnits?: number | string | undefined;
3572 |         mathematical?: number | string | undefined;
3573 |         mode?: number | string | undefined;
3574 |         numOctaves?: number | string | undefined;
3575 |         offset?: number | string | undefined;
3576 |         opacity?: number | string | undefined;
3577 |         operator?: number | string | undefined;
3578 |         order?: number | string | undefined;
3579 |         orient?: number | string | undefined;
3580 |         orientation?: number | string | undefined;
3581 |         origin?: number | string | undefined;
3582 |         overflow?: number | string | undefined;
3583 |         overlinePosition?: number | string | undefined;
3584 |         overlineThickness?: number | string | undefined;
3585 |         paintOrder?: number | string | undefined;
3586 |         panose1?: number | string | undefined;
3587 |         path?: string | undefined;
3588 |         pathLength?: number | string | undefined;
3589 |         patternContentUnits?: string | undefined;
3590 |         patternTransform?: number | string | undefined;
3591 |         patternUnits?: string | undefined;
3592 |         pointerEvents?: number | string | undefined;
3593 |         points?: string | undefined;
3594 |         pointsAtX?: number | string | undefined;
3595 |         pointsAtY?: number | string | undefined;
3596 |         pointsAtZ?: number | string | undefined;
3597 |         preserveAlpha?: Booleanish | undefined;
3598 |         preserveAspectRatio?: string | undefined;
3599 |         primitiveUnits?: number | string | undefined;
3600 |         r?: number | string | undefined;
3601 |         radius?: number | string | undefined;
3602 |         refX?: number | string | undefined;
3603 |         refY?: number | string | undefined;
3604 |         renderingIntent?: number | string | undefined;
3605 |         repeatCount?: number | string | undefined;
3606 |         repeatDur?: number | string | undefined;
3607 |         requiredExtensions?: number | string | undefined;
3608 |         requiredFeatures?: number | string | undefined;
3609 |         restart?: number | string | undefined;
3610 |         result?: string | undefined;
3611 |         rotate?: number | string | undefined;
3612 |         rx?: number | string | undefined;
3613 |         ry?: number | string | undefined;
3614 |         scale?: number | string | undefined;
3615 |         seed?: number | string | undefined;
3616 |         shapeRendering?: number | string | undefined;
3617 |         slope?: number | string | undefined;
3618 |         spacing?: number | string | undefined;
3619 |         specularConstant?: number | string | undefined;
3620 |         specularExponent?: number | string | undefined;
3621 |         speed?: number | string | undefined;
3622 |         spreadMethod?: string | undefined;
3623 |         startOffset?: number | string | undefined;
3624 |         stdDeviation?: number | string | undefined;
3625 |         stemh?: number | string | undefined;
3626 |         stemv?: number | string | undefined;
3627 |         stitchTiles?: number | string | undefined;
3628 |         stopColor?: string | undefined;
3629 |         stopOpacity?: number | string | undefined;
3630 |         strikethroughPosition?: number | string | undefined;
3631 |         strikethroughThickness?: number | string | undefined;
3632 |         string?: number | string | undefined;
3633 |         stroke?: string | undefined;
3634 |         strokeDasharray?: string | number | undefined;
3635 |         strokeDashoffset?: string | number | undefined;
3636 |         strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
3637 |         strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
3638 |         strokeMiterlimit?: number | string | undefined;
3639 |         strokeOpacity?: number | string | undefined;
3640 |         strokeWidth?: number | string | undefined;
3641 |         surfaceScale?: number | string | undefined;
3642 |         systemLanguage?: number | string | undefined;
3643 |         tableValues?: number | string | undefined;
3644 |         targetX?: number | string | undefined;
3645 |         targetY?: number | string | undefined;
3646 |         textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
3647 |         textDecoration?: number | string | undefined;
3648 |         textLength?: number | string | undefined;
3649 |         textRendering?: number | string | undefined;
3650 |         to?: number | string | undefined;
3651 |         transform?: string | undefined;
3652 |         u1?: number | string | undefined;
3653 |         u2?: number | string | undefined;
3654 |         underlinePosition?: number | string | undefined;
3655 |         underlineThickness?: number | string | undefined;
3656 |         unicode?: number | string | undefined;
3657 |         unicodeBidi?: number | string | undefined;
3658 |         unicodeRange?: number | string | undefined;
3659 |         unitsPerEm?: number | string | undefined;
3660 |         vAlphabetic?: number | string | undefined;
3661 |         values?: string | undefined;
3662 |         vectorEffect?: number | string | undefined;
3663 |         version?: string | undefined;
3664 |         vertAdvY?: number | string | undefined;
3665 |         vertOriginX?: number | string | undefined;
3666 |         vertOriginY?: number | string | undefined;
3667 |         vHanging?: number | string | undefined;
3668 |         vIdeographic?: number | string | undefined;
3669 |         viewBox?: string | undefined;
3670 |         viewTarget?: number | string | undefined;
3671 |         visibility?: number | string | undefined;
3672 |         vMathematical?: number | string | undefined;
3673 |         widths?: number | string | undefined;
3674 |         wordSpacing?: number | string | undefined;
3675 |         writingMode?: number | string | undefined;
3676 |         x1?: number | string | undefined;
3677 |         x2?: number | string | undefined;
3678 |         x?: number | string | undefined;
3679 |         xChannelSelector?: string | undefined;
3680 |         xHeight?: number | string | undefined;
3681 |         xlinkActuate?: string | undefined;
3682 |         xlinkArcrole?: string | undefined;
3683 |         xlinkHref?: string | undefined;
3684 |         xlinkRole?: string | undefined;
3685 |         xlinkShow?: string | undefined;
3686 |         xlinkTitle?: string | undefined;
3687 |         xlinkType?: string | undefined;
3688 |         xmlBase?: string | undefined;
3689 |         xmlLang?: string | undefined;
3690 |         xmlns?: string | undefined;
3691 |         xmlnsXlink?: string | undefined;
3692 |         xmlSpace?: string | undefined;
3693 |         y1?: number | string | undefined;
3694 |         y2?: number | string | undefined;
3695 |         y?: number | string | undefined;
3696 |         yChannelSelector?: string | undefined;
3697 |         z?: number | string | undefined;
3698 |         zoomAndPan?: string | undefined;
3699 |     }
3700 | 
3701 |     interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
3702 |         allowFullScreen?: boolean | undefined;
3703 |         allowpopups?: boolean | undefined;
3704 |         autosize?: boolean | undefined;
3705 |         blinkfeatures?: string | undefined;
3706 |         disableblinkfeatures?: string | undefined;
3707 |         disableguestresize?: boolean | undefined;
3708 |         disablewebsecurity?: boolean | undefined;
3709 |         guestinstance?: string | undefined;
3710 |         httpreferrer?: string | undefined;
3711 |         nodeintegration?: boolean | undefined;
3712 |         partition?: string | undefined;
3713 |         plugins?: boolean | undefined;
3714 |         preload?: string | undefined;
3715 |         src?: string | undefined;
3716 |         useragent?: string | undefined;
3717 |         webpreferences?: string | undefined;
3718 |     }
3719 | 
3720 |     // TODO: Move to react-dom
3721 |     type HTMLElementType =
3722 |         | "a"
3723 |         | "abbr"
3724 |         | "address"
3725 |         | "area"
3726 |         | "article"
3727 |         | "aside"
3728 |         | "audio"
3729 |         | "b"
3730 |         | "base"
3731 |         | "bdi"
3732 |         | "bdo"
3733 |         | "big"
3734 |         | "blockquote"
3735 |         | "body"
3736 |         | "br"
3737 |         | "button"
3738 |         | "canvas"
3739 |         | "caption"
3740 |         | "center"
3741 |         | "cite"
3742 |         | "code"
3743 |         | "col"
3744 |         | "colgroup"
3745 |         | "data"
3746 |         | "datalist"
3747 |         | "dd"
3748 |         | "del"
3749 |         | "details"
3750 |         | "dfn"
3751 |         | "dialog"
3752 |         | "div"
3753 |         | "dl"
3754 |         | "dt"
3755 |         | "em"
3756 |         | "embed"
3757 |         | "fieldset"
3758 |         | "figcaption"
3759 |         | "figure"
3760 |         | "footer"
3761 |         | "form"
3762 |         | "h1"
3763 |         | "h2"
3764 |         | "h3"
3765 |         | "h4"
3766 |         | "h5"
3767 |         | "h6"
3768 |         | "head"
3769 |         | "header"
3770 |         | "hgroup"
3771 |         | "hr"
3772 |         | "html"
3773 |         | "i"
3774 |         | "iframe"
3775 |         | "img"
3776 |         | "input"
3777 |         | "ins"
3778 |         | "kbd"
3779 |         | "keygen"
3780 |         | "label"
3781 |         | "legend"
3782 |         | "li"
3783 |         | "link"
3784 |         | "main"
3785 |         | "map"
3786 |         | "mark"
3787 |         | "menu"
3788 |         | "menuitem"
3789 |         | "meta"
3790 |         | "meter"
3791 |         | "nav"
3792 |         | "noscript"
3793 |         | "object"
3794 |         | "ol"
3795 |         | "optgroup"
3796 |         | "option"
3797 |         | "output"
3798 |         | "p"
3799 |         | "param"
3800 |         | "picture"
3801 |         | "pre"
3802 |         | "progress"
3803 |         | "q"
3804 |         | "rp"
3805 |         | "rt"
3806 |         | "ruby"
3807 |         | "s"
3808 |         | "samp"
3809 |         | "search"
3810 |         | "slot"
3811 |         | "script"
3812 |         | "section"
3813 |         | "select"
3814 |         | "small"
3815 |         | "source"
3816 |         | "span"
3817 |         | "strong"
3818 |         | "style"
3819 |         | "sub"
3820 |         | "summary"
3821 |         | "sup"
3822 |         | "table"
3823 |         | "template"
3824 |         | "tbody"
3825 |         | "td"
3826 |         | "textarea"
3827 |         | "tfoot"
3828 |         | "th"
3829 |         | "thead"
3830 |         | "time"
3831 |         | "title"
3832 |         | "tr"
3833 |         | "track"
3834 |         | "u"
3835 |         | "ul"
3836 |         | "var"
3837 |         | "video"
3838 |         | "wbr"
3839 |         | "webview";
3840 |         
3841 | 
3842 |     // TODO: Move to react-dom
3843 |     type SVGElementType =
3844 |         | "animate"
3845 |         | "circle"
3846 |         | "clipPath"
3847 |         | "defs"
3848 |         | "desc"
3849 |         | "ellipse"
3850 |         | "feBlend"
3851 |         | "feColorMatrix"
3852 |         | "feComponentTransfer"
3853 |         | "feComposite"
3854 |         | "feConvolveMatrix"
3855 |         | "feDiffuseLighting"
3856 |         | "feDisplacementMap"
3857 |         | "feDistantLight"
3858 |         | "feDropShadow"
3859 |         | "feFlood"
3860 |         | "feFuncA"
3861 |         | "feFuncB"
3862 |         | "feFuncG"
3863 |         | "feFuncR"
3864 |         | "feGaussianBlur"
3865 |         | "feImage"
3866 |         | "feMerge"
3867 |         | "feMergeNode"
3868 |         | "feMorphology"
3869 |         | "feOffset"
3870 |         | "fePointLight"
3871 |         | "feSpecularLighting"
3872 |         | "feSpotLight"
3873 |         | "feTile"
3874 |         | "feTurbulence"
3875 |         | "filter"
3876 |         | "foreignObject"
3877 |         | "g"
3878 |         | "image"
3879 |         | "line"
3880 |         | "linearGradient"
3881 |         | "marker"
3882 |         | "mask"
3883 |         | "metadata"
3884 |         | "path"
3885 |         | "pattern"
3886 |         | "polygon"
3887 |         | "polyline"
3888 |         | "radialGradient"
3889 |         | "rect"
3890 |         | "stop"
3891 |         | "svg"
3892 |         | "switch"
3893 |         | "symbol"
3894 |         | "text"
3895 |         | "textPath"
3896 |         | "tspan"
3897 |         | "use"
3898 |         | "view";
3899 | 
3900 |     //
3901 |     // Browser Interfaces
3902 |     // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
3903 |     // ----------------------------------------------------------------------
3904 | 
3905 |     interface AbstractView {
3906 |         styleMedia: StyleMedia;
3907 |         document: Document;
3908 |     }
3909 | 
3910 |     interface Touch {
3911 |         identifier: number;
3912 |         target: EventTarget;
3913 |         screenX: number;
3914 |         screenY: number;
3915 |         clientX: number;
3916 |         clientY: number;
3917 |         pageX: number;
3918 |         pageY: number;
3919 |     }
3920 | 
3921 |     interface TouchList {
3922 |         [index: number]: Touch;
3923 |         length: number;
3924 |         item(index: number): Touch;
3925 |         identifiedTouch(identifier: number): Touch;
3926 |     }
3927 | 
3928 |     //
3929 |     // Error Interfaces
3930 |     // ----------------------------------------------------------------------
3931 |     interface ErrorInfo {
3932 |         /**
3933 |          * Captures which component contained the exception, and its ancestors.
3934 |          */
3935 |         componentStack?: string | null;
3936 |         digest?: string | null;
3937 |     }
3938 | 
3939 |     // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts
3940 |     namespace JSX {
3941 |         // We don't just alias React.ElementType because React.ElementType
3942 |         // historically does more than we need it to.
3943 |         // E.g. it also contains .propTypes and so TS also verifies the declared
3944 |         // props type does match the declared .propTypes.
3945 |         // But if libraries declared their .propTypes but not props type,
3946 |         // or they mismatch, you won't be able to use the class component
3947 |         // as a JSX.ElementType.
3948 |         // We could fix this everywhere but we're ultimately not interested in
3949 |         // .propTypes assignability so we might as well drop it entirely here to
3950 |         //  reduce the work of the type-checker.
3951 |         // TODO: Check impact of making React.ElementType<P = any> = React.JSXElementConstructor<P>
3952 |         type ElementType = string | React.JSXElementConstructor<any>;
3953 |         interface Element extends React.ReactElement<any, any> {}
3954 |         interface ElementClass extends React.Component<any> {
3955 |             render(): React.ReactNode;
3956 |         }
3957 |         interface ElementAttributesProperty {
3958 |             props: {};
3959 |         }
3960 |         interface ElementChildrenAttribute {
3961 |             children: {};
3962 |         }
3963 | 
3964 |         // We can't recurse forever because `type` can't be self-referential;
3965 |         // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa
3966 |         type LibraryManagedAttributes<C, P> = C extends
3967 |             React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
3968 |             ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
3969 |                 ? ReactManagedAttributes<U, P>
3970 |             : ReactManagedAttributes<T, P>
3971 |             : ReactManagedAttributes<C, P>;
3972 | 
3973 |         interface IntrinsicAttributes extends React.Attributes {}
3974 |         interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {}
3975 | 
3976 |         interface IntrinsicElements {
3977 |             // HTML
3978 |             a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
3979 |             abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3980 |             address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3981 |             area: React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>;
3982 |             article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3983 |             aside: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3984 |             audio: React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
3985 |             b: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3986 |             base: React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>;
3987 |             bdi: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3988 |             bdo: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3989 |             big: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3990 |             blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
3991 |             body: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
3992 |             br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
3993 |             button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
3994 |             canvas: React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
3995 |             caption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3996 |             center: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3997 |             cite: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3998 |             code: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
3999 |             col: React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
4000 |             colgroup: React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
4001 |             data: React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>;
4002 |             datalist: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>;
4003 |             dd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4004 |             del: React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement>;
4005 |             details: React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>;
4006 |             dfn: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4007 |             dialog: React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
4008 |             div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
4009 |             dl: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>;
4010 |             dt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4011 |             em: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4012 |             embed: React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>;
4013 |             fieldset: React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>;
4014 |             figcaption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4015 |             figure: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4016 |             footer: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4017 |             form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
4018 |             h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4019 |             h2: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4020 |             h3: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4021 |             h4: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4022 |             h5: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4023 |             h6: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
4024 |             head: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>;
4025 |             header: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4026 |             hgroup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4027 |             hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
4028 |             html: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>;
4029 |             i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4030 |             iframe: React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
4031 |             img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
4032 |             input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
4033 |             ins: React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>;
4034 |             kbd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4035 |             keygen: React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement>;
4036 |             label: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
4037 |             legend: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>;
4038 |             li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
4039 |             link: React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>;
4040 |             main: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4041 |             map: React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>;
4042 |             mark: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4043 |             menu: React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement>;
4044 |             menuitem: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4045 |             meta: React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
4046 |             meter: React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
4047 |             nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4048 |             noindex: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4049 |             noscript: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4050 |             object: React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>;
4051 |             ol: React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>;
4052 |             optgroup: React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
4053 |             option: React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
4054 |             output: React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>;
4055 |             p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
4056 |             param: React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>;
4057 |             picture: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4058 |             pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>;
4059 |             progress: React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
4060 |             q: React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
4061 |             rp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4062 |             rt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4063 |             ruby: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4064 |             s: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4065 |             samp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4066 |             search: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4067 |             slot: React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>;
4068 |             script: React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>;
4069 |             section: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4070 |             select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
4071 |             small: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4072 |             source: React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>;
4073 |             span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
4074 |             strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4075 |             style: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;
4076 |             sub: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4077 |             summary: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4078 |             sup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4079 |             table: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
4080 |             template: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>;
4081 |             tbody: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
4082 |             td: React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
4083 |             textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
4084 |             tfoot: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
4085 |             th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
4086 |             thead: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
4087 |             time: React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>;
4088 |             title: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>;
4089 |             tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
4090 |             track: React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>;
4091 |             u: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4092 |             ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
4093 |             "var": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4094 |             video: React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
4095 |             wbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
4096 |             webview: React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>;
4097 | 
4098 |             // SVG
4099 |             svg: React.SVGProps<SVGSVGElement>;
4100 | 
4101 |             animate: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.
4102 |             animateMotion: React.SVGProps<SVGElement>;
4103 |             animateTransform: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now.
4104 |             circle: React.SVGProps<SVGCircleElement>;
4105 |             clipPath: React.SVGProps<SVGClipPathElement>;
4106 |             defs: React.SVGProps<SVGDefsElement>;
4107 |             desc: React.SVGProps<SVGDescElement>;
4108 |             ellipse: React.SVGProps<SVGEllipseElement>;
4109 |             feBlend: React.SVGProps<SVGFEBlendElement>;
4110 |             feColorMatrix: React.SVGProps<SVGFEColorMatrixElement>;
4111 |             feComponentTransfer: React.SVGProps<SVGFEComponentTransferElement>;
4112 |             feComposite: React.SVGProps<SVGFECompositeElement>;
4113 |             feConvolveMatrix: React.SVGProps<SVGFEConvolveMatrixElement>;
4114 |             feDiffuseLighting: React.SVGProps<SVGFEDiffuseLightingElement>;
4115 |             feDisplacementMap: React.SVGProps<SVGFEDisplacementMapElement>;
4116 |             feDistantLight: React.SVGProps<SVGFEDistantLightElement>;
4117 |             feDropShadow: React.SVGProps<SVGFEDropShadowElement>;
4118 |             feFlood: React.SVGProps<SVGFEFloodElement>;
4119 |             feFuncA: React.SVGProps<SVGFEFuncAElement>;
4120 |             feFuncB: React.SVGProps<SVGFEFuncBElement>;
4121 |             feFuncG: React.SVGProps<SVGFEFuncGElement>;
4122 |             feFuncR: React.SVGProps<SVGFEFuncRElement>;
4123 |             feGaussianBlur: React.SVGProps<SVGFEGaussianBlurElement>;
4124 |             feImage: React.SVGProps<SVGFEImageElement>;
4125 |             feMerge: React.SVGProps<SVGFEMergeElement>;
4126 |             feMergeNode: React.SVGProps<SVGFEMergeNodeElement>;
4127 |             feMorphology: React.SVGProps<SVGFEMorphologyElement>;
4128 |             feOffset: React.SVGProps<SVGFEOffsetElement>;
4129 |             fePointLight: React.SVGProps<SVGFEPointLightElement>;
4130 |             feSpecularLighting: React.SVGProps<SVGFESpecularLightingElement>;
4131 |             feSpotLight: React.SVGProps<SVGFESpotLightElement>;
4132 |             feTile: React.SVGProps<SVGFETileElement>;
4133 |             feTurbulence: React.SVGProps<SVGFETurbulenceElement>;
4134 |             filter: React.SVGProps<SVGFilterElement>;
4135 |             foreignObject: React.SVGProps<SVGForeignObjectElement>;
4136 |             g: React.SVGProps<SVGGElement>;
4137 |             image: React.SVGProps<SVGImageElement>;
4138 |             line: React.SVGLineElementAttributes<SVGLineElement>;
4139 |             linearGradient: React.SVGProps<SVGLinearGradientElement>;
4140 |             marker: React.SVGProps<SVGMarkerElement>;
4141 |             mask: React.SVGProps<SVGMaskElement>;
4142 |             metadata: React.SVGProps<SVGMetadataElement>;
4143 |             mpath: React.SVGProps<SVGElement>;
4144 |             path: React.SVGProps<SVGPathElement>;
4145 |             pattern: React.SVGProps<SVGPatternElement>;
4146 |             polygon: React.SVGProps<SVGPolygonElement>;
4147 |             polyline: React.SVGProps<SVGPolylineElement>;
4148 |             radialGradient: React.SVGProps<SVGRadialGradientElement>;
4149 |             rect: React.SVGProps<SVGRectElement>;
4150 |             set: React.SVGProps<SVGSetElement>;
4151 |             stop: React.SVGProps<SVGStopElement>;
4152 |             switch: React.SVGProps<SVGSwitchElement>;
4153 |             symbol: React.SVGProps<SVGSymbolElement>;
4154 |             text: React.SVGTextElementAttributes<SVGTextElement>;
4155 |             textPath: React.SVGProps<SVGTextPathElement>;
4156 |             tspan: React.SVGProps<SVGTSpanElement>;
4157 |             use: React.SVGProps<SVGUseElement>;
4158 |             view: React.SVGProps<SVGViewElement>;
4159 |         }
4160 |     }
4161 | }
4162 | 
4163 | type InexactPartial<T> = { [K in keyof T]?: T[K] | undefined };
4164 | 
4165 | // Any prop that has a default prop becomes optional, but its type is unchanged
4166 | // Undeclared default props are augmented into the resulting allowable attributes
4167 | // If declared props have indexed properties, ignore default props entirely as keyof gets widened
4168 | // Wrap in an outer-level conditional type to allow distribution over props that are unions
4169 | type Defaultize<P, D> = P extends any ? string extends keyof P ? P
4170 |     :
4171 |         & Pick<P, Exclude<keyof P, keyof D>>
4172 |         & InexactPartial<Pick<P, Extract<keyof P, keyof D>>>
4173 |         & InexactPartial<Pick<D, Exclude<keyof D, keyof P>>>
4174 |     : never;
4175 | 
4176 | type ReactManagedAttributes<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D>
4177 |     : P;
4178 | 


--------------------------------------------------------------------------------