@types/react 18.2.55 → 18.2.65

react/README.md

@@ -8,8 +8,8 @@ This package contains type definitions for react (https://react.dev/).
 Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react.
 
 ### Additional Details
- * Last updated: Tue, 06 Feb 2024 09:35:42 GMT
+ * Last updated: Tue, 12 Mar 2024 00:22:44 GMT
  * Dependencies: [@types/prop-types](https://npmjs.com/package/@types/prop-types), [@types/scheduler](https://npmjs.com/package/@types/scheduler), [csstype](https://npmjs.com/package/csstype)
 
 # Credits
-These definitions were written by [Asana](https://asana.com), [AssureSign](http://www.assuresign.com), [Microsoft](https://microsoft.com), [John Reilly](https://github.com/johnnyreilly), [Benoit Benezech](https://github.com/bbenezech), [Patricio Zavolinsky](https://github.com/pzavolinsky), [Eric Anderson](https://github.com/ericanderson), [Dovydas Navickas](https://github.com/DovydasNavickas), [Josh Rutherford](https://github.com/theruther4d), [Guilherme Hübner](https://github.com/guilhermehubner), [Ferdy Budhidharma](https://github.com/ferdaber), [Johann Rakotoharisoa](https://github.com/jrakotoharisoa), [Olivier Pascal](https://github.com/pascaloliv), [Martin Hochel](https://github.com/hotell), [Frank Li](https://github.com/franklixuefei), [Jessica Franco](https://github.com/Jessidhia), [Saransh Kataria](https://github.com/saranshkataria), [Kanitkorn Sujautra](https://github.com/lukyth), [Sebastian Silbermann](https://github.com/eps1lon), [Kyle Scully](https://github.com/zieka), [Cong Zhang](https://github.com/dancerphil), [Dimitri Mitropoulos](https://github.com/dimitropoulos), [JongChan Choi](https://github.com/disjukr), [Victor Magalhães](https://github.com/vhfmag), [Dale Tan](https://github.com/hellatan), [Priyanshu Rav](https://github.com/priyanshurav), and [Dmitry Semigradsky](https://github.com/Semigradsky).
+These definitions were written by [Asana](https://asana.com), [AssureSign](http://www.assuresign.com), [Microsoft](https://microsoft.com), [John Reilly](https://github.com/johnnyreilly), [Benoit Benezech](https://github.com/bbenezech), [Patricio Zavolinsky](https://github.com/pzavolinsky), [Eric Anderson](https://github.com/ericanderson), [Dovydas Navickas](https://github.com/DovydasNavickas), [Josh Rutherford](https://github.com/theruther4d), [Guilherme Hübner](https://github.com/guilhermehubner), [Ferdy Budhidharma](https://github.com/ferdaber), [Johann Rakotoharisoa](https://github.com/jrakotoharisoa), [Olivier Pascal](https://github.com/pascaloliv), [Martin Hochel](https://github.com/hotell), [Frank Li](https://github.com/franklixuefei), [Jessica Franco](https://github.com/Jessidhia), [Saransh Kataria](https://github.com/saranshkataria), [Kanitkorn Sujautra](https://github.com/lukyth), [Sebastian Silbermann](https://github.com/eps1lon), [Kyle Scully](https://github.com/zieka), [Cong Zhang](https://github.com/dancerphil), [Dimitri Mitropoulos](https://github.com/dimitropoulos), [JongChan Choi](https://github.com/disjukr), [Victor Magalhães](https://github.com/vhfmag), [Dale Tan](https://github.com/hellatan), [Priyanshu Rav](https://github.com/priyanshurav), [Dmitry Semigradsky](https://github.com/Semigradsky), and [Matt Pocock](https://github.com/mattpocock).

react/experimental.d.ts

@@ -42,10 +42,22 @@ declare const UNDEFINED_VOID_ONLY: unique symbol;
 type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 declare module "." {
-    // Need an interface to not cause ReactNode to be a self-referential type.
-    interface PromiseLikeOfReactNode extends PromiseLike<ReactNode> {}
+    /**
+     * @internal Use `Awaited<ReactNode>` instead
+     */
+    // Helper type to enable `Awaited<ReactNode>`.
+    // Must be a copy of the non-thenables of `ReactNode`.
+    type AwaitedReactNode =
+        | ReactElement
+        | string
+        | number
+        | Iterable<AwaitedReactNode>
+        | ReactPortal
+        | boolean
+        | null
+        | undefined;
     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
-        promises: PromiseLikeOfReactNode;
+        promises: Promise<AwaitedReactNode>;
     }
 
     export interface SuspenseProps {

react/global.d.ts

@@ -140,6 +140,7 @@ interface SVGPolygonElement extends SVGElement {}
 interface SVGPolylineElement extends SVGElement {}
 interface SVGRadialGradientElement extends SVGElement {}
 interface SVGRectElement extends SVGElement {}
+interface SVGSetElement extends SVGElement {}
 interface SVGStopElement extends SVGElement {}
 interface SVGSwitchElement extends SVGElement {}
 interface SVGSymbolElement extends SVGElement {}

react/index.d.ts

@@ -189,6 +189,7 @@ declare namespace React {
      * <div ref="myRef" />
      * ```
      */
+    // TODO: Remove the string ref special case from `PropsWithRef` once we remove LegacyRef
     type LegacyRef<T> = string | Ref<T>;
 
     /**
@@ -217,9 +218,10 @@ declare namespace React {
     > =
         // need to check first if `ref` is a valid prop for ts@3.0
         // otherwise it will infer `{}` instead of `never`
-        "ref" extends keyof ComponentPropsWithRef<C> ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
+        "ref" extends keyof ComponentPropsWithRef<C>
+            ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends RefAttributes<
                 infer Instance
-            > ? Instance
+            >["ref"] ? Instance
             : never
             : never;
 
@@ -232,9 +234,55 @@ declare namespace React {
      */
     type Key = string | number | bigint;
 
+    /**
+     * @internal The props any component can receive.
+     * You don't have to add this type. All components automatically accept these props.
+     * ```tsx
+     * const Component = () => <div />;
+     * <Component key="one" />
+     * ```
+     *
+     * WARNING: The implementation of a component will never have access to these attributes.
+     * The following example would be incorrect usage because {@link Component} would never have access to `key`:
+     * ```tsx
+     * const Component = (props: React.Attributes) => props.key;
+     * ```
+     */
     interface Attributes {
         key?: Key | null | undefined;
     }
+    /**
+     * The props any component accepting refs can receive.
+     * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.
+     * ```tsx
+     * const Component = forwardRef(() => <div />);
+     * <Component ref={(current) => console.log(current)} />
+     * ```
+     *
+     * You only need this type if you manually author the types of props that need to be compatible with legacy refs.
+     * ```tsx
+     * interface Props extends React.RefAttributes<HTMLDivElement> {}
+     * declare const Component: React.FunctionComponent<Props>;
+     * ```
+     *
+     * Otherwise it's simpler to directly use {@link Ref} since you can safely use the
+     * props type to describe to props that a consumer can pass to the component
+     * as well as describing the props the implementation of a component "sees".
+     * {@link RefAttributes} is generally not safe to describe both consumer and seen props.
+     *
+     * ```tsx
+     * interface Props extends {
+     *   ref?: React.Ref<HTMLDivElement> | undefined;
+     * }
+     * declare const Component: React.FunctionComponent<Props>;
+     * ```
+     *
+     * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.
+     * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`
+     * ```tsx
+     * const Component = (props: React.RefAttributes) => props.ref;
+     * ```
+     */
     interface RefAttributes<T> extends Attributes {
         /**
          * Allows getting a ref to the component instance.
@@ -243,21 +291,13 @@ declare namespace React {
          *
          * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
          */
-        ref?: Ref<T> | undefined;
+        ref?: LegacyRef<T> | undefined;
     }
 
     /**
      * Represents the built-in attributes available to class components.
      */
-    interface ClassAttributes<T> extends Attributes {
-        /**
-         * Allows getting a ref to the component instance.
-         * Once the component unmounts, React will set `ref.current` to `null`
-         * (or call the ref with `null` if you passed a callback ref).
-         *
-         * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
-         */
-        ref?: LegacyRef<T> | undefined;
+    interface ClassAttributes<T> extends RefAttributes<T> {
     }
 
     /**
@@ -284,6 +324,9 @@ declare namespace React {
         key: string | null;
     }
 
+    /**
+     * @deprecated
+     */
     interface ReactComponentElement<
         T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, "key" | "ref">>,
@@ -382,7 +425,8 @@ declare namespace React {
      */
     interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
     /**
-     * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
+     * WARNING: Not related to `React.Fragment`.
+     * @deprecated This type is not relevant when using React. Inline the type instead to make the intent clear.
      */
     type ReactFragment = Iterable<ReactNode>;
 
@@ -421,6 +465,7 @@ declare namespace React {
      * <Component customElement={<div>hello</div>} />
      * ```
      */
+    // non-thenables need to be kept in sync with AwaitedReactNode
     type ReactNode =
         | ReactElement
         | string
@@ -712,6 +757,8 @@ declare namespace React {
      * ```
      */
     function createContext<T>(
+        // If you thought this should be optional, see
+        // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
         defaultValue: T,
     ): Context<T>;
 
@@ -1519,6 +1566,7 @@ declare namespace React {
         P extends any ? ("ref" extends keyof P ? Omit<P, "ref"> : P) : P;
     /** Ensures that the props do not include string ref, which cannot be forwarded */
     type PropsWithRef<P> =
+        // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though.
         // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
         "ref" extends keyof P
             ? P extends { ref?: infer R | undefined }
@@ -3137,6 +3185,7 @@ declare namespace React {
         alt?: string | undefined;
         crossOrigin?: CrossOrigin;
         decoding?: "async" | "auto" | "sync" | undefined;
+        fetchPriority?: "high" | "low" | "auto";
         height?: number | string | undefined;
         loading?: "eager" | "lazy" | undefined;
         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
@@ -3177,10 +3226,72 @@ declare namespace React {
         | "week"
         | (string & {});
 
+    type AutoFillAddressKind = "billing" | "shipping";
+    type AutoFillBase = "" | "off" | "on";
+    type AutoFillContactField =
+        | "email"
+        | "tel"
+        | "tel-area-code"
+        | "tel-country-code"
+        | "tel-extension"
+        | "tel-local"
+        | "tel-local-prefix"
+        | "tel-local-suffix"
+        | "tel-national";
+    type AutoFillContactKind = "home" | "mobile" | "work";
+    type AutoFillCredentialField = "webauthn";
+    type AutoFillNormalField =
+        | "additional-name"
+        | "address-level1"
+        | "address-level2"
+        | "address-level3"
+        | "address-level4"
+        | "address-line1"
+        | "address-line2"
+        | "address-line3"
+        | "bday-day"
+        | "bday-month"
+        | "bday-year"
+        | "cc-csc"
+        | "cc-exp"
+        | "cc-exp-month"
+        | "cc-exp-year"
+        | "cc-family-name"
+        | "cc-given-name"
+        | "cc-name"
+        | "cc-number"
+        | "cc-type"
+        | "country"
+        | "country-name"
+        | "current-password"
+        | "family-name"
+        | "given-name"
+        | "honorific-prefix"
+        | "honorific-suffix"
+        | "name"
+        | "new-password"
+        | "one-time-code"
+        | "organization"
+        | "postal-code"
+        | "street-address"
+        | "transaction-amount"
+        | "transaction-currency"
+        | "username";
+    type OptionalPrefixToken<T extends string> = `${T} ` | "";
+    type OptionalPostfixToken<T extends string> = ` ${T}` | "";
+    type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;
+    type AutoFillSection = `section-${string}`;
+    type AutoFill =
+        | AutoFillBase
+        | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<
+            AutoFillAddressKind
+        >}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;
+    type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});
+
     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
         accept?: string | undefined;
         alt?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -4322,6 +4433,7 @@ declare global {
             polyline: React.SVGProps<SVGPolylineElement>;
             radialGradient: React.SVGProps<SVGRadialGradientElement>;
             rect: React.SVGProps<SVGRectElement>;
+            set: React.SVGProps<SVGSetElement>;
             stop: React.SVGProps<SVGStopElement>;
             switch: React.SVGProps<SVGSwitchElement>;
             symbol: React.SVGProps<SVGSymbolElement>;

react/jsx-dev-runtime.d.ts

@@ -1,4 +1,5 @@
 import * as React from "./";
+export { Fragment } from "./";
 
 export namespace JSX {
     type ElementType = React.JSX.ElementType;
@@ -11,3 +12,34 @@ export namespace JSX {
     interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
     interface IntrinsicElements extends React.JSX.IntrinsicElements {}
 }
+
+export interface JSXSource {
+    /**
+     * The source file where the element originates from.
+     */
+    fileName?: string | undefined;
+
+    /**
+     * The line number where the element was created.
+     */
+    lineNumber?: number | undefined;
+
+    /**
+     * The column number where the element was created.
+     */
+    columnNumber?: number | undefined;
+}
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxDEV(
+    type: React.ElementType,
+    props: unknown,
+    key: React.Key | undefined,
+    isStatic: boolean,
+    source?: JSXSource,
+    self?: unknown,
+): React.ReactElement;

react/jsx-runtime.d.ts

@@ -1,4 +1,5 @@
 import * as React from "./";
+export { Fragment } from "./";
 
 export namespace JSX {
     type ElementType = React.JSX.ElementType;
@@ -11,3 +12,25 @@ export namespace JSX {
     interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
     interface IntrinsicElements extends React.JSX.IntrinsicElements {}
 }
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsx(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxs(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/react",
-    "version": "18.2.55",
+    "version": "18.2.65",
     "description": "TypeScript definitions for react",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
     "license": "MIT",
@@ -136,6 +136,11 @@
             "name": "Dmitry Semigradsky",
             "githubUsername": "Semigradsky",
             "url": "https://github.com/Semigradsky"
+        },
+        {
+            "name": "Matt Pocock",
+            "githubUsername": "mattpocock",
+            "url": "https://github.com/mattpocock"
         }
     ],
     "main": "",
@@ -201,6 +206,6 @@
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
     },
-    "typesPublisherContentHash": "41cc4f9203a010eff4158b37583d535e6867e99253ce9e203f10ddc95a2cdb36",
-    "typeScriptVersion": "4.6"
+    "typesPublisherContentHash": "a8477c63620b49fa941ad9ef8541f4f8138d84d70ce7e2268d9f46a7afc0dbaa",
+    "typeScriptVersion": "4.7"
 }

react/ts5.0/canary.d.ts

@@ -95,7 +95,7 @@ declare module "." {
         /**
          * Marks all state updates inside the async function as transitions
          *
-         * @see {https://react.dev/reference/react/ts5.0/useTransition#starttransition}
+         * @see {https://react.dev/reference/react/useTransition#starttransition}
          *
          * @param callback
          */

react/ts5.0/experimental.d.ts

@@ -42,10 +42,22 @@ declare const UNDEFINED_VOID_ONLY: unique symbol;
 type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 declare module "." {
-    // Need an interface to not cause ReactNode to be a self-referential type.
-    interface PromiseLikeOfReactNode extends PromiseLike<ReactNode> {}
+    /**
+     * @internal Use `Awaited<ReactNode>` instead
+     */
+    // Helper type to enable `Awaited<ReactNode>`.
+    // Must be a copy of the non-thenables of `ReactNode`.
+    type AwaitedReactNode =
+        | ReactElement
+        | string
+        | number
+        | Iterable<AwaitedReactNode>
+        | ReactPortal
+        | boolean
+        | null
+        | undefined;
     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
-        promises: PromiseLikeOfReactNode;
+        promises: Promise<AwaitedReactNode>;
     }
 
     export interface SuspenseProps {

react/ts5.0/global.d.ts

@@ -140,6 +140,7 @@ interface SVGPolygonElement extends SVGElement {}
 interface SVGPolylineElement extends SVGElement {}
 interface SVGRadialGradientElement extends SVGElement {}
 interface SVGRectElement extends SVGElement {}
+interface SVGSetElement extends SVGElement {}
 interface SVGStopElement extends SVGElement {}
 interface SVGSwitchElement extends SVGElement {}
 interface SVGSymbolElement extends SVGElement {}

react/ts5.0/index.d.ts

@@ -91,8 +91,11 @@ declare namespace React {
         | ComponentType<P>;
 
     /**
-     * Represents any user-defined component, either as a function component or
-     * a class component.
+     * Represents any user-defined component, either as a function or a class.
+     *
+     * Similar to {@link JSXElementConstructor}, but with extra properties like
+     * {@link FunctionComponent.defaultProps defaultProps } and
+     * {@link ComponentClass.contextTypes contextTypes}.
      *
      * @template P The props the component accepts.
      *
@@ -186,6 +189,7 @@ declare namespace React {
      * <div ref="myRef" />
      * ```
      */
+    // TODO: Remove the string ref special case from `PropsWithRef` once we remove LegacyRef
     type LegacyRef<T> = string | Ref<T>;
 
     /**
@@ -214,9 +218,10 @@ declare namespace React {
     > =
         // need to check first if `ref` is a valid prop for ts@3.0
         // otherwise it will infer `{}` instead of `never`
-        "ref" extends keyof ComponentPropsWithRef<C> ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
+        "ref" extends keyof ComponentPropsWithRef<C>
+            ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends RefAttributes<
                 infer Instance
-            > ? Instance
+            >["ref"] ? Instance
             : never
             : never;
 
@@ -230,30 +235,69 @@ declare namespace React {
     type Key = string | number | bigint;
 
     /**
-     * @internal You shouldn't need to use this type since you never see these attributes
-     * inside your component or have to validate them.
+     * @internal The props any component can receive.
+     * You don't have to add this type. All components automatically accept these props.
+     * ```tsx
+     * const Component = () => <div />;
+     * <Component key="one" />
+     * ```
+     *
+     * WARNING: The implementation of a component will never have access to these attributes.
+     * The following example would be incorrect usage because {@link Component} would never have access to `key`:
+     * ```tsx
+     * const Component = (props: React.Attributes) => props.key;
+     * ```
      */
     interface Attributes {
         key?: Key | null | undefined;
     }
+    /**
+     * The props any component accepting refs can receive.
+     * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.
+     * ```tsx
+     * const Component = forwardRef(() => <div />);
+     * <Component ref={(current) => console.log(current)} />
+     * ```
+     *
+     * You only need this type if you manually author the types of props that need to be compatible with legacy refs.
+     * ```tsx
+     * interface Props extends React.RefAttributes<HTMLDivElement> {}
+     * declare const Component: React.FunctionComponent<Props>;
+     * ```
+     *
+     * Otherwise it's simpler to directly use {@link Ref} since you can safely use the
+     * props type to describe to props that a consumer can pass to the component
+     * as well as describing the props the implementation of a component "sees".
+     * {@link RefAttributes} is generally not safe to describe both consumer and seen props.
+     *
+     * ```tsx
+     * interface Props extends {
+     *   ref?: React.Ref<HTMLDivElement> | undefined;
+     * }
+     * declare const Component: React.FunctionComponent<Props>;
+     * ```
+     *
+     * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.
+     * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`
+     * ```tsx
+     * const Component = (props: React.RefAttributes) => props.ref;
+     * ```
+     */
     interface RefAttributes<T> extends Attributes {
         /**
          * Allows getting a ref to the component instance.
-         * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
-         * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom}
+         * Once the component unmounts, React will set `ref.current` to `null`
+         * (or call the ref with `null` if you passed a callback ref).
+         *
+         * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
          */
-        ref?: Ref<T> | undefined;
+        ref?: LegacyRef<T> | undefined;
     }
+
     /**
      * Represents the built-in attributes available to class components.
      */
-    interface ClassAttributes<T> extends Attributes {
-        /**
-         * Allows getting a ref to the component instance.
-         * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
-         * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom}
-         */
-        ref?: LegacyRef<T> | undefined;
+    interface ClassAttributes<T> extends RefAttributes<T> {
     }
 
     /**
@@ -280,6 +324,9 @@ declare namespace React {
         key: string | null;
     }
 
+    /**
+     * @deprecated
+     */
     interface ReactComponentElement<
         T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, "key" | "ref">>,
@@ -295,7 +342,7 @@ declare namespace React {
     }
 
     /**
-     * @deprecated Use `ComponentElement<P, ClassicComponent<P, any>>` instead.
+     * @deprecated Use {@link ComponentElement} instead.
      */
     type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
 
@@ -379,7 +426,7 @@ declare namespace React {
     interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
     /**
      * WARNING: Not related to `React.Fragment`.
-     * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
+     * @deprecated This type is not relevant when using React. Inline the type instead to make the intent clear.
      */
     type ReactFragment = Iterable<ReactNode>;
 
@@ -419,6 +466,7 @@ declare namespace React {
      * <Component customElement={<div>hello</div>} />
      * ```
      */
+    // non-thenables need to be kept in sync with AwaitedReactNode
     type ReactNode =
         | ReactElement
         | string
@@ -898,7 +946,6 @@ declare namespace React {
     // Base component for plain JS classes
     interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}
     class Component<P, S> {
-        // tslint won't let me format the sample code in a way that vscode likes it :(
         /**
          * If set, `this.context` will be set at runtime to the current value of the given Context.
          *
@@ -927,7 +974,6 @@ declare namespace React {
          * Should be used with type annotation or static contextType.
          *
          * @example
-         *
          * ```ts
          * static contextType = MyContext
          * // For TS pre-3.7:
@@ -936,14 +982,14 @@ declare namespace React {
          * declare context: React.ContextType<typeof MyContext>
          * ```
          *
-         * @see {@link https://react.dev/reference/react/Component#context}
+         * @see {@link https://react.dev/reference/react/Component#context React Docs}
          */
         context: unknown;
 
         constructor(props: Readonly<P> | P);
         /**
          * @deprecated
-         * @see {@link https://legacy.reactjs.org/docs/legacy-context.html}
+         * @see {@link https://legacy.reactjs.org/docs/legacy-context.html React Docs}
          */
         constructor(props: P, context: any);
 
@@ -962,7 +1008,8 @@ declare namespace React {
         state: Readonly<S>;
         /**
          * @deprecated
-         * https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
+         *
+         * @see {@link https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Legacy React Docs}
          */
         refs: {
             [key: string]: ReactInstance;
@@ -1118,6 +1165,7 @@ declare namespace React {
      * @deprecated - Equivalent to {@link React.FunctionComponent}.
      *
      * @see {@link React.FunctionComponent}
+     * @alias {@link VoidFunctionComponent}
      */
     type VFC<P = {}> = VoidFunctionComponent<P>;
 
@@ -1345,7 +1393,7 @@ declare namespace React {
          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
          * this from being invoked.
          *
-         * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17
+         * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead; will stop working in React 17
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
          */
@@ -1360,7 +1408,7 @@ declare namespace React {
          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
          * this from being invoked.
          *
-         * @deprecated 16.3, use componentDidMount or the constructor instead
+         * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
          */
@@ -1376,7 +1424,7 @@ declare namespace React {
          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
          * this from being invoked.
          *
-         * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+         * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead; will stop working in React 17
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
          */
@@ -1394,7 +1442,7 @@ declare namespace React {
          * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents
          * this from being invoked.
          *
-         * @deprecated 16.3, use static getDerivedStateFromProps instead
+         * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}
          * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
          */
@@ -1432,7 +1480,9 @@ declare namespace React {
     }
 
     /**
-     * @deprecated https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
+     * @deprecated
+     *
+     * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}
      */
     interface Mixin<P, S> extends ComponentLifecycle<P, S> {
         mixins?: Array<Mixin<P, S>> | undefined;
@@ -1517,6 +1567,7 @@ declare namespace React {
         P extends any ? ("ref" extends keyof P ? Omit<P, "ref"> : P) : P;
     /** Ensures that the props do not include string ref, which cannot be forwarded */
     type PropsWithRef<P> =
+        // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though.
         // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
         "ref" extends keyof P
             ? P extends { ref?: infer R | undefined }
@@ -1670,9 +1721,11 @@ declare namespace React {
         propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean,
     ): MemoExoticComponent<T>;
 
-    type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<CustomComponentPropsWithRef<T>> & {
+    interface LazyExoticComponent<T extends ComponentType<any>>
+        extends ExoticComponent<CustomComponentPropsWithRef<T>>
+    {
         readonly _result: T;
-    };
+    }
 
     /**
      * Lets you defer loading a component’s code until it is rendered for the first time.
@@ -1702,8 +1755,6 @@ declare namespace React {
     // React Hooks
     // ----------------------------------------------------------------------
 
-    // based on the code in https://github.com/facebook/react/pull/13968
-
     /**
      * The instruction passed to a {@link Dispatch} function in {@link useState}
      * to tell React what the next value of the {@link useState} should be.
@@ -3135,6 +3186,7 @@ declare namespace React {
         alt?: string | undefined;
         crossOrigin?: CrossOrigin;
         decoding?: "async" | "auto" | "sync" | undefined;
+        fetchPriority?: "high" | "low" | "auto";
         height?: number | string | undefined;
         loading?: "eager" | "lazy" | undefined;
         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
@@ -3175,10 +3227,72 @@ declare namespace React {
         | "week"
         | (string & {});
 
+    type AutoFillAddressKind = "billing" | "shipping";
+    type AutoFillBase = "" | "off" | "on";
+    type AutoFillContactField =
+        | "email"
+        | "tel"
+        | "tel-area-code"
+        | "tel-country-code"
+        | "tel-extension"
+        | "tel-local"
+        | "tel-local-prefix"
+        | "tel-local-suffix"
+        | "tel-national";
+    type AutoFillContactKind = "home" | "mobile" | "work";
+    type AutoFillCredentialField = "webauthn";
+    type AutoFillNormalField =
+        | "additional-name"
+        | "address-level1"
+        | "address-level2"
+        | "address-level3"
+        | "address-level4"
+        | "address-line1"
+        | "address-line2"
+        | "address-line3"
+        | "bday-day"
+        | "bday-month"
+        | "bday-year"
+        | "cc-csc"
+        | "cc-exp"
+        | "cc-exp-month"
+        | "cc-exp-year"
+        | "cc-family-name"
+        | "cc-given-name"
+        | "cc-name"
+        | "cc-number"
+        | "cc-type"
+        | "country"
+        | "country-name"
+        | "current-password"
+        | "family-name"
+        | "given-name"
+        | "honorific-prefix"
+        | "honorific-suffix"
+        | "name"
+        | "new-password"
+        | "one-time-code"
+        | "organization"
+        | "postal-code"
+        | "street-address"
+        | "transaction-amount"
+        | "transaction-currency"
+        | "username";
+    type OptionalPrefixToken<T extends string> = `${T} ` | "";
+    type OptionalPostfixToken<T extends string> = ` ${T}` | "";
+    type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;
+    type AutoFillSection = `section-${string}`;
+    type AutoFill =
+        | AutoFillBase
+        | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<
+            AutoFillAddressKind
+        >}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;
+    type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});
+
     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
         accept?: string | undefined;
         alt?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -4043,9 +4157,11 @@ declare namespace React {
         /**
          * Captures which component contained the exception, and its ancestors.
          */
-        componentStack: string;
+        componentStack?: string | null;
+        digest?: string | null;
     }
 
+    // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts
     namespace JSX {
         interface Element extends GlobalJSXElement {}
         interface ElementClass extends GlobalJSXElementClass {}
@@ -4305,6 +4421,7 @@ declare global {
             polyline: React.SVGProps<SVGPolylineElement>;
             radialGradient: React.SVGProps<SVGRadialGradientElement>;
             rect: React.SVGProps<SVGRectElement>;
+            set: React.SVGProps<SVGSetElement>;
             stop: React.SVGProps<SVGStopElement>;
             switch: React.SVGProps<SVGSwitchElement>;
             symbol: React.SVGProps<SVGSymbolElement>;

react/ts5.0/jsx-dev-runtime.d.ts

@@ -1,4 +1,5 @@
 import * as React from "./";
+export { Fragment } from "./";
 
 export namespace JSX {
     interface Element extends React.JSX.Element {}
@@ -10,3 +11,34 @@ export namespace JSX {
     interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
     interface IntrinsicElements extends React.JSX.IntrinsicElements {}
 }
+
+export interface JSXSource {
+    /**
+     * The source file where the element originates from.
+     */
+    fileName?: string | undefined;
+
+    /**
+     * The line number where the element was created.
+     */
+    lineNumber?: number | undefined;
+
+    /**
+     * The column number where the element was created.
+     */
+    columnNumber?: number | undefined;
+}
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxDEV(
+    type: React.ElementType,
+    props: unknown,
+    key: React.Key | undefined,
+    isStatic: boolean,
+    source?: JSXSource,
+    self?: unknown,
+): React.ReactElement;

react/ts5.0/jsx-runtime.d.ts

@@ -1,4 +1,5 @@
 import * as React from "./";
+export { Fragment } from "./";
 
 export namespace JSX {
     interface Element extends React.JSX.Element {}
@@ -10,3 +11,25 @@ export namespace JSX {
     interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
     interface IntrinsicElements extends React.JSX.IntrinsicElements {}
 }
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsx(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxs(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;