@types/react 17.0.42 → 18.0.0

react/README.md

@@ -8,7 +8,7 @@ This package contains type definitions for React (http://facebook.github.io/reac
 Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react.
 
 ### Additional Details
- * Last updated: Wed, 23 Mar 2022 05:31:41 GMT
+ * Last updated: Thu, 07 Apr 2022 17:31:22 GMT
  * Dependencies: [@types/csstype](https://npmjs.com/package/@types/csstype), [@types/prop-types](https://npmjs.com/package/@types/prop-types), [@types/scheduler](https://npmjs.com/package/@types/scheduler)
  * Global values: `React`
 

react/experimental.d.ts

@@ -39,6 +39,15 @@ import React = require('./next');
 export {};
 
 declare module '.' {
+    export interface SuspenseProps {
+        /**
+         * The presence of this prop indicates that the content is computationally expensive to render.
+         * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
+         * @see {@link https://github.com/facebook/react/pull/19936}
+         */
+        unstable_expectedLoadTime?: number | undefined;
+    }
+
     export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
     export type SuspenseListTailMode = 'collapsed' | 'hidden';
 
@@ -93,4 +102,20 @@ declare module '.' {
      * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
      */
     export const SuspenseList: ExoticComponent<SuspenseListProps>;
+
+    /**
+     * this should be an internal type
+     */
+     interface MutableSource<T> {
+        _source: T;
+    }
+
+    export type MutableSourceSubscribe<T> = (source: T, callback: () => void) => () => void;
+
+    // TODO: This may not be intentionally part of the experimental release considering useMutableSource is no longer available
+    /**
+     * @param source A source could be anything as long as they can be subscribed to and have a "version".
+     * @param getVersion A function returns a value which will change whenever part of the source changes.
+     */
+    export function unstable_createMutableSource<T>(source: T, getVersion: () => any): MutableSource<T>;
 }

react/global.d.ts

@@ -40,6 +40,7 @@ interface HTMLButtonElement extends HTMLElement { }
 interface HTMLCanvasElement extends HTMLElement { }
 interface HTMLDataElement extends HTMLElement { }
 interface HTMLDataListElement extends HTMLElement { }
+interface HTMLDetailsElement extends HTMLElement { }
 interface HTMLDialogElement extends HTMLElement { }
 interface HTMLDivElement extends HTMLElement { }
 interface HTMLDListElement extends HTMLElement { }
@@ -60,10 +61,12 @@ interface HTMLLIElement extends HTMLElement { }
 interface HTMLLinkElement extends HTMLElement { }
 interface HTMLMapElement extends HTMLElement { }
 interface HTMLMetaElement extends HTMLElement { }
+interface HTMLMeterElement extends HTMLElement { }
 interface HTMLObjectElement extends HTMLElement { }
 interface HTMLOListElement extends HTMLElement { }
 interface HTMLOptGroupElement extends HTMLElement { }
 interface HTMLOptionElement extends HTMLElement { }
+interface HTMLOutputElement extends HTMLElement { }
 interface HTMLParagraphElement extends HTMLElement { }
 interface HTMLParamElement extends HTMLElement { }
 interface HTMLPreElement extends HTMLElement { }
@@ -83,6 +86,7 @@ interface HTMLTableRowElement extends HTMLElement { }
 interface HTMLTableSectionElement extends HTMLElement { }
 interface HTMLTemplateElement extends HTMLElement { }
 interface HTMLTextAreaElement extends HTMLElement { }
+interface HTMLTimeElement extends HTMLElement { }
 interface HTMLTitleElement extends HTMLElement { }
 interface HTMLTrackElement extends HTMLElement { }
 interface HTMLUListElement extends HTMLElement { }

react/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for React 17.0
+// Type definitions for React 18.0
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>
 //                 AssureSign <http://www.assuresign.com>
@@ -29,10 +29,6 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-// NOTE: Users of the upcoming React 18 release should add a reference
-// to 'react/next' in their project. See next.d.ts's top comment
-// for reference and documentation on how exactly to do it.
-
 // NOTE: Users of the `experimental` builds of React should add a reference
 // to 'react/experimental' in their project. See experimental.d.ts's top comment
 // for reference and documentation on how exactly to do it.
@@ -60,6 +56,7 @@ type Booleanish = boolean | 'true' | 'false';
 declare const UNDEFINED_VOID_ONLY: unique symbol;
 // Destructors are only allowed to return void.
 type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
+type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 // tslint:disable-next-line:export-just-namespace
 export = React;
@@ -75,10 +72,6 @@ declare namespace React {
             [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
         }[keyof JSX.IntrinsicElements] |
         ComponentType<P>;
-    /**
-     * @deprecated Please use `ElementType`
-     */
-    type ReactType<P = any> = ElementType<P>;
     type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
 
     type JSXElementConstructor<P> =
@@ -155,11 +148,6 @@ declare namespace React {
         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>>
     > extends ReactElement<P, Exclude<T, number>> { }
 
-    /**
-     * @deprecated Please use `FunctionComponentElement`
-     */
-    type SFCElement<P> = FunctionComponentElement<P>;
-
     interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
         ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;
     }
@@ -237,7 +225,7 @@ declare namespace React {
      * @deprecated Use either `ReactNode[]` if you need an array or `Iterable<ReactNode>` if its passed to a host component.
      */
     interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
-    type ReactFragment = {} | Iterable<ReactNode>;
+    type ReactFragment = Iterable<ReactNode>;
     type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
 
     //
@@ -396,16 +384,10 @@ declare namespace React {
     interface SuspenseProps {
         children?: ReactNode | undefined;
 
-        // TODO(react18): `fallback?: ReactNode;`
         /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
-        fallback: NonNullable<ReactNode>|null;
+        fallback?: ReactNode;
     }
 
-    // TODO(react18): Updated JSDoc to reflect that Suspense works on the server.
-    /**
-     * This feature is not yet available for server-side rendering.
-     * Suspense support will be added in a later release.
-     */
     const Suspense: ExoticComponent<SuspenseProps>;
     const version: string;
 
@@ -476,8 +458,7 @@ declare namespace React {
          *
          * @see https://reactjs.org/docs/context.html
          */
-        // TODO (TypeScript 3.0): unknown
-        context: any;
+        context: unknown;
 
         constructor(props: Readonly<P> | P);
         /**
@@ -497,12 +478,7 @@ declare namespace React {
         forceUpdate(callback?: () => void): void;
         render(): ReactNode;
 
-        // React.Props<T> is now deprecated, which means that the `children`
-        // property is not available on `P` by default, even though you can
-        // always pass children as variadic arguments to `createElement`.
-        // In the future, if we can define its call signature conditionally
-        // on the existence of `children` in `P`, then we should remove this.
-        readonly props: Readonly<P> & Readonly<{ children?: ReactNode | undefined }>;
+        readonly props: Readonly<P>;
         state: Readonly<S>;
         /**
          * @deprecated
@@ -529,26 +505,10 @@ declare namespace React {
     // Class Interfaces
     // ----------------------------------------------------------------------
 
-    /**
-     * @deprecated as of recent React versions, function components can no
-     * longer be considered 'stateless'. Please use `FunctionComponent` instead.
-     *
-     * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
-     */
-    type SFC<P = {}> = FunctionComponent<P>;
-
-    /**
-     * @deprecated as of recent React versions, function components can no
-     * longer be considered 'stateless'. Please use `FunctionComponent` instead.
-     *
-     * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
-     */
-    type StatelessComponent<P = {}> = FunctionComponent<P>;
-
     type FC<P = {}> = FunctionComponent<P>;
 
     interface FunctionComponent<P = {}> {
-        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
+        (props: P, context?: any): ReactElement<any, any> | null;
         propTypes?: WeakValidationMap<P> | undefined;
         contextTypes?: ValidationMap<any> | undefined;
         defaultProps?: Partial<P> | undefined;
@@ -568,7 +528,7 @@ declare namespace React {
     type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
 
     interface ForwardRefRenderFunction<T, P = {}> {
-        (props: PropsWithChildren<P>, ref: ForwardedRef<T>): ReactElement | null;
+        (props: P, ref: ForwardedRef<T>): ReactElement | null;
         displayName?: string | undefined;
         // explicit rejected with `never` required due to
         // https://github.com/microsoft/TypeScript/issues/36826
@@ -582,12 +542,6 @@ declare namespace React {
         propTypes?: never | undefined;
     }
 
-    /**
-     * @deprecated Use ForwardRefRenderFunction. forwardRef doesn't accept a
-     *             "real" component.
-     */
-    interface RefForwardingComponent <T, P = {}> extends ForwardRefRenderFunction<T, P> {}
-
     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
         new (props: P, context?: any): Component<P, S>;
         propTypes?: WeakValidationMap<P> | undefined;
@@ -862,7 +816,7 @@ declare namespace React {
 
     function memo<P extends object>(
         Component: FunctionComponent<P>,
-        propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
+        propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean
     ): NamedExoticComponent<P>;
     function memo<T extends ComponentType<any>>(
         Component: T,
@@ -901,8 +855,7 @@ declare namespace React {
     // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===
     type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
         R extends ReducerWithoutAction<infer S> ? S : never;
-    // TODO (TypeScript 3.0): ReadonlyArray<unknown>
-    type DependencyList = ReadonlyArray<any>;
+    type DependencyList = ReadonlyArray<unknown>;
 
     // NOTE: callbacks are _only_ allowed to return either void, or a destructor.
     type EffectCallback = () => (void | Destructor);
@@ -1109,8 +1062,10 @@ declare namespace React {
      * @version 16.8.0
      * @see https://reactjs.org/docs/hooks-reference.html#usecallback
      */
-    // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown>
-    function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
+    // A specific function type would not trigger implicit any.
+    // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.
+    // tslint:disable-next-line ban-types
+    function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
     /**
      * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
      *
@@ -1132,6 +1087,83 @@ declare namespace React {
     // it's just the function name without the "use" prefix.
     function useDebugValue<T>(value: T, format?: (value: T) => any): void;
 
+    // must be synchronous
+    export type TransitionFunction = () => VoidOrUndefinedOnly;
+    // strange definition to allow vscode to show documentation on the invocation
+    export interface TransitionStartFunction {
+        /**
+         * State updates caused inside the callback are allowed to be deferred.
+         *
+         * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
+         *
+         * @param callback A _synchronous_ function which causes state updates that can be deferred.
+         */
+        (callback: TransitionFunction): void;
+    }
+
+    /**
+     * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.
+     *
+     * This is commonly used to keep the interface responsive when you have something that renders immediately
+     * based on user input and something that needs to wait for a data fetch.
+     *
+     * A good example of this is a text input.
+     *
+     * @param value The value that is going to be deferred
+     *
+     * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
+     */
+    export function useDeferredValue<T>(value: T): T;
+
+    /**
+     * Allows components to avoid undesirable loading states by waiting for content to load
+     * before transitioning to the next screen. It also allows components to defer slower,
+     * data fetching updates until subsequent renders so that more crucial updates can be
+     * rendered immediately.
+     *
+     * The `useTransition` hook returns two values in an array.
+     *
+     * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
+     * The second is a function that takes a callback. We can use it to tell React which state we want to defer.
+     *
+     * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
+     *
+     * @param config An optional object with `timeoutMs`
+     *
+     * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
+     */
+    export function useTransition(): [boolean, TransitionStartFunction];
+
+    /**
+     * Similar to `useTransition` but allows uses where hooks are not available.
+     *
+     * @param callback A _synchronous_ function which causes state updates that can be deferred.
+     */
+    export function startTransition(scope: TransitionFunction): void;
+
+    export function useId(): string;
+
+    /**
+     * @param effect Imperative function that can return a cleanup function
+     * @param deps If present, effect will only activate if the values in the list change.
+     *
+     * @see https://github.com/facebook/react/pull/21913
+     */
+     export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
+
+    /**
+     * @param subscribe
+     * @param getSnapshot
+     *
+     * @see https://github.com/reactwg/react-18/discussions/86
+     */
+    // keep in sync with `useSyncExternalStore` from `use-sync-external-store`
+    export function useSyncExternalStore<Snapshot>(
+        subscribe: (onStoreChange: () => void) => () => void,
+        getSnapshot: () => Snapshot,
+        getServerSnapshot?: () => Snapshot,
+    ): Snapshot;
+
     //
     // Event System
     // ----------------------------------------------------------------------
@@ -1316,26 +1348,6 @@ declare namespace React {
     // Props / DOM Attributes
     // ----------------------------------------------------------------------
 
-    /**
-     * @deprecated. This was used to allow clients to pass `ref` and `key`
-     * to `createElement`, which is no longer necessary due to intersection
-     * types. If you need to declare a props object before passing it to
-     * `createElement` or a factory, use `ClassAttributes<T>`:
-     *
-     * ```ts
-     * var b: Button | null;
-     * var props: ButtonProps & ClassAttributes<Button> = {
-     *     ref: b => button = b, // ok!
-     *     label: "I'm a Button"
-     * };
-     * ```
-     */
-    interface Props<T> {
-        children?: ReactNode | undefined;
-        key?: Key | undefined;
-        ref?: LegacyRef<T> | undefined;
-    }
-
     interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {
     }
 
@@ -2780,7 +2792,7 @@ declare namespace React {
         bdi: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         bdo: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         big: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
-        blockquote: DetailedHTMLFactory<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>;
+        blockquote: DetailedHTMLFactory<BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
         body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
         br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
         button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
@@ -2793,8 +2805,8 @@ declare namespace React {
         data: DetailedHTMLFactory<DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>;
         datalist: DetailedHTMLFactory<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>;
         dd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
-        del: DetailedHTMLFactory<DelHTMLAttributes<HTMLElement>, HTMLElement>;
-        details: DetailedHTMLFactory<DetailsHTMLAttributes<HTMLElement>, HTMLElement>;
+        del: DetailedHTMLFactory<DelHTMLAttributes<HTMLModElement>, HTMLModElement>;
+        details: DetailedHTMLFactory<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>;
         dfn: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         dialog: DetailedHTMLFactory<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
         div: DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -2835,14 +2847,14 @@ declare namespace React {
         menu: DetailedHTMLFactory<MenuHTMLAttributes<HTMLElement>, HTMLElement>;
         menuitem: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         meta: DetailedHTMLFactory<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
-        meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLElement>, HTMLElement>;
+        meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
         nav: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         noscript: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         object: DetailedHTMLFactory<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>;
         ol: DetailedHTMLFactory<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>;
         optgroup: DetailedHTMLFactory<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
         option: DetailedHTMLFactory<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
-        output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLElement>, HTMLElement>;
+        output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>;
         p: DetailedHTMLFactory<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
         param: DetailedHTMLFactory<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>;
         picture: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
@@ -2874,7 +2886,7 @@ declare namespace React {
         tfoot: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
         th: DetailedHTMLFactory<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
         thead: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
-        time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLElement>, HTMLElement>;
+        time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>;
         title: DetailedHTMLFactory<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>;
         tr: DetailedHTMLFactory<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
         track: DetailedHTMLFactory<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>;
@@ -3111,7 +3123,7 @@ declare global {
             bdi: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             bdo: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             big: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-            blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>;
+            blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
             body: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
             br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
             button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
@@ -3124,8 +3136,8 @@ declare global {
             data: React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>;
             datalist: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>;
             dd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-            del: React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLElement>, HTMLElement>;
-            details: React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLElement>, HTMLElement>;
+            del: React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement>;
+            details: React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>;
             dfn: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             dialog: React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
             div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -3166,7 +3178,7 @@ declare global {
             menu: React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement>;
             menuitem: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             meta: React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
-            meter: React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLElement>, HTMLElement>;
+            meter: React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
             nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             noindex: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             noscript: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
@@ -3174,7 +3186,7 @@ declare global {
             ol: React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>;
             optgroup: React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
             option: React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
-            output: React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLElement>, HTMLElement>;
+            output: React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>;
             p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
             param: React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>;
             picture: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
@@ -3206,7 +3218,7 @@ declare global {
             tfoot: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
             th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
             thead: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
-            time: React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>;
+            time: React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>;
             title: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>;
             tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
             track: React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>;

react/next.d.ts

@@ -1,7 +1,5 @@
 /**
- * These are types for things that are present in the upcoming React 18 release.
- *
- * Once React 18 is released they can just be moved to the main index file.
+ * These are types for things that are present in the React `next` release channel.
  *
  * To load the types declared here in an actual project, there are three ways. The easiest one,
  * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
@@ -23,126 +21,10 @@
  * Either the import or the reference only needs to appear once, anywhere in the project.
  */
 
-// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
+// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared,
 
 import React = require('.');
 
 export {};
 
-declare const UNDEFINED_VOID_ONLY: unique symbol;
-type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
-
-declare module '.' {
-    export interface SuspenseProps {
-        /**
-         * The presence of this prop indicates that the content is computationally expensive to render.
-         * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
-         * @see {@link https://github.com/facebook/react/pull/19936}
-         */
-        unstable_expectedLoadTime?: number | undefined;
-    }
-
-    // must be synchronous
-    export type TransitionFunction = () => VoidOrUndefinedOnly;
-    // strange definition to allow vscode to show documentation on the invocation
-    export interface TransitionStartFunction {
-        /**
-         * State updates caused inside the callback are allowed to be deferred.
-         *
-         * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
-         *
-         * @param callback A _synchronous_ function which causes state updates that can be deferred.
-         */
-        (callback: TransitionFunction): void;
-    }
-
-    /**
-     * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.
-     *
-     * This is commonly used to keep the interface responsive when you have something that renders immediately
-     * based on user input and something that needs to wait for a data fetch.
-     *
-     * A good example of this is a text input.
-     *
-     * @param value The value that is going to be deferred
-     *
-     * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
-     */
-    export function useDeferredValue<T>(value: T): T;
-
-    /**
-     * Allows components to avoid undesirable loading states by waiting for content to load
-     * before transitioning to the next screen. It also allows components to defer slower,
-     * data fetching updates until subsequent renders so that more crucial updates can be
-     * rendered immediately.
-     *
-     * The `useTransition` hook returns two values in an array.
-     *
-     * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
-     * The second is a function that takes a callback. We can use it to tell React which state we want to defer.
-     *
-     * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
-     *
-     * @param config An optional object with `timeoutMs`
-     *
-     * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
-     */
-    export function useTransition(): [boolean, TransitionStartFunction];
-
-    /**
-     * Similar to `useTransition` but allows uses where hooks are not available.
-     *
-     * @param callback A _synchronous_ function which causes state updates that can be deferred.
-     */
-    export function startTransition(scope: TransitionFunction): void;
-
-    export function useId(): string;
-
-    /**
-     * this should be an internal type
-     */
-    interface MutableSource<T> {
-        _source: T;
-    }
-
-    export type MutableSourceSubscribe<T> = (source: T, callback: () => void) => () => void;
-
-    /**
-     * @param source A source could be anything as long as they can be subscribed to and have a "version".
-     * @param getVersion A function returns a value which will change whenever part of the source changes.
-     */
-    export function unstable_createMutableSource<T>(source: T, getVersion: () => any): MutableSource<T>;
-
-    /**
-     * useMutableSource() enables React components to safely and efficiently read from a mutable external source in Concurrent Mode.
-     * The API will detect mutations that occur during a render to avoid tearing
-     * and it will automatically schedule updates when the source is mutated.
-     * @param MutableSource
-     * @param getSnapshot
-     * @param subscribe
-     *
-     * @see https://github.com/reactjs/rfcs/blob/master/text/0147-use-mutable-source.md
-     */
-    export function unstable_useMutableSource<T, TResult extends unknown>(MutableSource: MutableSource<T>, getSnapshot: (source: T) => TResult, subscribe: MutableSourceSubscribe<T>): TResult;
-
-    /**
-     * @param effect Imperative function that can return a cleanup function
-     * @param deps If present, effect will only activate if the values in the list change.
-     *
-     * @see https://github.com/facebook/react/pull/21913
-     */
-     export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
-
-    /**
-     * @param subscribe
-     * @param getSnapshot
-     *
-     * @see https://github.com/reactwg/react-18/discussions/86
-     */
-    // keep in sync with `useSyncExternalStore` from `use-sync-external-store`
-    export function useSyncExternalStore<Snapshot>(
-        subscribe: (onStoreChange: () => void) => () => void,
-        getSnapshot: () => Snapshot,
-        getServerSnapshot?: () => Snapshot,
-    ): Snapshot;
-}
+declare module '.' {}

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/react",
-    "version": "17.0.42",
+    "version": "18.0.0",
     "description": "TypeScript definitions for React",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
     "license": "MIT",
@@ -146,6 +146,6 @@
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
     },
-    "typesPublisherContentHash": "c011feb2208b1232e6acab0b32a72a64cb4d3cf1106a3e334204a40d98259729",
+    "typesPublisherContentHash": "6779161312d4a456b9a73a478b25f72f9b02fc5b0117762da5cfd6e0883bb745",
     "typeScriptVersion": "3.9"
 }