@types/react 19.1.2 → 19.2.10

react/index.d.ts

@@ -11,10 +11,12 @@ type NativeClipboardEvent = ClipboardEvent;
 type NativeCompositionEvent = CompositionEvent;
 type NativeDragEvent = DragEvent;
 type NativeFocusEvent = FocusEvent;
+type NativeInputEvent = InputEvent;
 type NativeKeyboardEvent = KeyboardEvent;
 type NativeMouseEvent = MouseEvent;
 type NativeTouchEvent = TouchEvent;
 type NativePointerEvent = PointerEvent;
+type NativeSubmitEvent = SubmitEvent;
 type NativeToggleEvent = ToggleEvent;
 type NativeTransitionEvent = TransitionEvent;
 type NativeUIEvent = UIEvent;
@@ -134,7 +136,7 @@ declare namespace React {
             props: P,
         ) => ReactNode | Promise<ReactNode>)
         // constructor signature must match React.Component
-        | (new(props: P) => Component<any, any>);
+        | (new(props: P, context: any) => Component<any, any>);
 
     /**
      * Created by {@link createRef}, or {@link useRef} when passed `null`.
@@ -217,7 +219,7 @@ declare namespace React {
     type ElementRef<
         C extends
             | ForwardRefExoticComponent<any>
-            | { new(props: any): Component<any> }
+            | { new(props: any, context: any): Component<any> }
             | ((props: any) => ReactNode)
             | keyof JSX.IntrinsicElements,
     > = ComponentRef<C>;
@@ -927,7 +929,7 @@ declare namespace React {
         static propTypes?: any;
 
         /**
-         * If using the new style context, re-declare this in your class to be the
+         * If using React Context, re-declare this in your class to be the
          * `React.ContextType` of your `static contextType`.
          * Should be used with type annotation or static contextType.
          *
@@ -946,6 +948,14 @@ declare namespace React {
 
         // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
         constructor(props: P);
+        /**
+         * @param props
+         * @param context value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
+         * in `contextType`.
+         */
+        // TODO: Ideally we'd infer the constructor signatur from `contextType`.
+        // Might be hard to ship without breaking existing code.
+        constructor(props: P, context: any);
 
         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
@@ -1117,7 +1127,14 @@ declare namespace React {
      */
     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
         // constructor signature must match React.Component
-        new(props: P): Component<P, S>;
+        new(
+            props: P,
+            /**
+             * Value of the parent {@link https://react.dev/reference/react/Component#context Context} specified
+             * in `contextType`.
+             */
+            context?: any,
+        ): Component<P, S>;
         /**
          * Ignored by React.
          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
@@ -1157,7 +1174,7 @@ declare namespace React {
      */
     type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
         & C
-        & (new(props: P) => T);
+        & (new(props: P, context: any) => T);
 
     //
     // Component Specs and Lifecycle
@@ -1684,20 +1701,6 @@ declare namespace React {
         reducer: (prevState: S, ...args: A) => S,
         initialState: S,
     ): [S, ActionDispatch<A>];
-    /**
-     * An alternative to `useState`.
-     *
-     * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
-     * multiple sub-values. It also lets you optimize performance for components that trigger deep
-     * updates because you can pass `dispatch` down instead of callbacks.
-     *
-     * @version 16.8.0
-     * @see {@link https://react.dev/reference/react/useReducer}
-     */
-    function useReducer<S, A extends AnyActionArg>(
-        reducer: (prevState: S, ...args: A) => S,
-        initialState: S,
-    ): [S, ActionDispatch<A>];
     /**
      * An alternative to `useState`.
      *
@@ -1772,13 +1775,17 @@ declare namespace React {
      * @see {@link https://react.dev/reference/react/useEffect}
      */
     function useEffect(effect: EffectCallback, deps?: DependencyList): void;
+    /**
+     * @see {@link https://react.dev/reference/react/useEffectEvent `useEffectEvent()` documentation}
+     * @version 19.2.0
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+    export function useEffectEvent<T extends Function>(callback: T): T;
     // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
     /**
      * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
      * `ref`. As always, imperative code using refs should be avoided in most cases.
      *
-     * `useImperativeHandle` should be used with `React.forwardRef`.
-     *
      * @version 16.8.0
      * @see {@link https://react.dev/reference/react/useImperativeHandle}
      */
@@ -1920,7 +1927,31 @@ declare namespace React {
         reducer: (state: State, action: Action) => State,
     ): [State, (action: Action) => void];
 
-    export type Usable<T> = PromiseLike<T> | Context<T>;
+    interface UntrackedReactPromise<T> extends PromiseLike<T> {
+        status?: void;
+    }
+
+    export interface PendingReactPromise<T> extends PromiseLike<T> {
+        status: "pending";
+    }
+
+    export interface FulfilledReactPromise<T> extends PromiseLike<T> {
+        status: "fulfilled";
+        value: T;
+    }
+
+    export interface RejectedReactPromise<T> extends PromiseLike<T> {
+        status: "rejected";
+        reason: unknown;
+    }
+
+    export type ReactPromise<T> =
+        | UntrackedReactPromise<T>
+        | PendingReactPromise<T>
+        | FulfilledReactPromise<T>
+        | RejectedReactPromise<T>;
+
+    export type Usable<T> = ReactPromise<T> | Context<T>;
 
     export function use<T>(usable: Usable<T>): T;
 
@@ -1938,10 +1969,39 @@ declare namespace React {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
     export function cache<CachedFunction extends Function>(fn: CachedFunction): CachedFunction;
 
+    export interface CacheSignal {}
+    /**
+     * @version 19.2.0
+     */
+    export function cacheSignal(): null | CacheSignal;
+
+    export interface ActivityProps {
+        /**
+         * @default "visible"
+         */
+        mode?:
+            | "hidden"
+            | "visible"
+            | undefined;
+        /**
+         * A name for this Activity boundary for instrumentation purposes.
+         * The name will help identify this boundary in React DevTools.
+         */
+        name?: string | undefined;
+        children: ReactNode;
+    }
+
+    /**
+     * @see {@link https://react.dev/reference/react/Activity `<Activity>` documentation}
+     * @version 19.2.0
+     */
+    export const Activity: ExoticComponent<ActivityProps>;
+
     /**
      * Warning: Only available in development builds.
      *
      * @see {@link https://react.dev/reference/react/captureOwnerStack Reference docs}
+     * @version 19.1.0
      */
     function captureOwnerStack(): string | null;
 
@@ -2006,15 +2066,32 @@ declare namespace React {
         target: EventTarget & Target;
     }
 
+    /**
+     * @deprecated FormEvent doesn't actually exist.
+     *             You probably meant to use {@link ChangeEvent}, {@link InputEvent}, {@link SubmitEvent}, or just {@link SyntheticEvent} instead
+     *             depending on the event type.
+     */
     interface FormEvent<T = Element> extends SyntheticEvent<T> {
     }
 
     interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
-        target: EventTarget & T;
     }
 
-    interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
-        target: EventTarget & T;
+    /**
+     * change events bubble in React so their target is generally unknown.
+     * Only for form elements we know their target type because form events can't
+     * be nested.
+     * This type exists purely to narrow `target` for form elements. It doesn't
+     * reflect a DOM event. Change events are just fired as standard {@link SyntheticEvent}.
+     */
+    interface ChangeEvent<CurrentTarget = Element, Target = Element> extends SyntheticEvent<CurrentTarget> {
+        // TODO: This is wrong for change event handlers on arbitrary. Should
+        // be EventTarget & Target, but kept for backward compatibility until React 20.
+        target: EventTarget & CurrentTarget;
+    }
+
+    interface InputEvent<T = Element> extends SyntheticEvent<T, NativeInputEvent> {
+        data: string;
     }
 
     export type ModifierKey =
@@ -2080,6 +2157,13 @@ declare namespace React {
         shiftKey: boolean;
     }
 
+    interface SubmitEvent<T = Element> extends SyntheticEvent<T, NativeSubmitEvent> {
+        // Currently not exposed by Reat
+        // submitter: HTMLElement | null;
+        // SubmitEvents are always targetted at HTMLFormElements.
+        target: EventTarget & HTMLFormElement;
+    }
+
     interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {
         altKey: boolean;
         changedTouches: TouchList;
@@ -2135,10 +2219,19 @@ declare namespace React {
     type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
     type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
     type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
+    /**
+     * @deprecated FormEventHandler doesn't actually exist.
+     *             You probably meant to use {@link ChangeEventHandler}, {@link InputEventHandler}, {@link SubmitEventHandler}, or just {@link EventHandler} instead
+     *             depending on the event type.
+     */
     type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
-    type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
+    type ChangeEventHandler<CurrentTarget = Element, Target = Element> = EventHandler<
+        ChangeEvent<CurrentTarget, Target>
+    >;
+    type InputEventHandler<T = Element> = EventHandler<InputEvent<T>>;
     type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
     type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
+    type SubmitEventHandler<T = Element> = EventHandler<SubmitEvent<T>>;
     type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
     type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
     type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
@@ -2192,19 +2285,19 @@ declare namespace React {
         onBlur?: FocusEventHandler<T> | undefined;
         onBlurCapture?: FocusEventHandler<T> | undefined;
 
-        // Form Events
-        onChange?: FormEventHandler<T> | undefined;
-        onChangeCapture?: FormEventHandler<T> | undefined;
-        onBeforeInput?: FormEventHandler<T> | undefined;
-        onBeforeInputCapture?: FormEventHandler<T> | undefined;
-        onInput?: FormEventHandler<T> | undefined;
-        onInputCapture?: FormEventHandler<T> | undefined;
-        onReset?: FormEventHandler<T> | undefined;
-        onResetCapture?: FormEventHandler<T> | undefined;
-        onSubmit?: FormEventHandler<T> | undefined;
-        onSubmitCapture?: FormEventHandler<T> | undefined;
-        onInvalid?: FormEventHandler<T> | undefined;
-        onInvalidCapture?: FormEventHandler<T> | undefined;
+        // form related Events
+        onChange?: ChangeEventHandler<T> | undefined;
+        onChangeCapture?: ChangeEventHandler<T> | undefined;
+        onBeforeInput?: InputEventHandler<T> | undefined;
+        onBeforeInputCapture?: InputEventHandler<T> | undefined;
+        onInput?: InputEventHandler<T> | undefined;
+        onInputCapture?: InputEventHandler<T> | undefined;
+        onReset?: ReactEventHandler<T> | undefined;
+        onResetCapture?: ReactEventHandler<T> | undefined;
+        onSubmit?: SubmitEventHandler<T> | undefined;
+        onSubmitCapture?: SubmitEventHandler<T> | undefined;
+        onInvalid?: ReactEventHandler<T> | undefined;
+        onInvalidCapture?: ReactEventHandler<T> | undefined;
 
         // Image Events
         onLoad?: ReactEventHandler<T> | undefined;
@@ -2253,8 +2346,6 @@ declare namespace React {
         onProgressCapture?: ReactEventHandler<T> | undefined;
         onRateChange?: ReactEventHandler<T> | undefined;
         onRateChangeCapture?: ReactEventHandler<T> | undefined;
-        onResize?: ReactEventHandler<T> | undefined;
-        onResizeCapture?: ReactEventHandler<T> | undefined;
         onSeeked?: ReactEventHandler<T> | undefined;
         onSeekedCapture?: ReactEventHandler<T> | undefined;
         onSeeking?: ReactEventHandler<T> | undefined;
@@ -2744,7 +2835,7 @@ declare namespace React {
         unselectable?: "on" | "off" | undefined;
 
         // Popover API
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
 
@@ -2998,6 +3089,7 @@ declare namespace React {
     }
 
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+        closedby?: "any" | "closerequest" | "none" | undefined;
         onCancel?: ReactEventHandler<T> | undefined;
         onClose?: ReactEventHandler<T> | undefined;
         open?: boolean | undefined;
@@ -3212,7 +3304,9 @@ declare namespace React {
         value?: string | readonly string[] | number | undefined;
         width?: number | string | undefined;
 
-        onChange?: ChangeEventHandler<T> | undefined;
+        // No other element dispatching change events can be nested in a <input>
+        // so we know the target will be a HTMLInputElement.
+        onChange?: ChangeEventHandler<T, HTMLInputElement> | undefined;
     }
 
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -3235,6 +3329,7 @@ declare namespace React {
 
     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
         as?: string | undefined;
+        blocking?: "render" | (string & {}) | undefined;
         crossOrigin?: CrossOrigin;
         fetchPriority?: "high" | "low" | "auto";
         href?: string | undefined;
@@ -3354,10 +3449,12 @@ declare namespace React {
 
     interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
         async?: boolean | undefined;
+        blocking?: "render" | (string & {}) | undefined;
         /** @deprecated */
         charSet?: string | undefined;
         crossOrigin?: CrossOrigin;
         defer?: boolean | undefined;
+        fetchPriority?: "high" | "low" | "auto" | undefined;
         integrity?: string | undefined;
         noModule?: boolean | undefined;
         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
@@ -3374,7 +3471,9 @@ declare namespace React {
         required?: boolean | undefined;
         size?: number | undefined;
         value?: string | readonly string[] | number | undefined;
-        onChange?: ChangeEventHandler<T> | undefined;
+        // No other element dispatching change events can be nested in a <select>
+        // so we know the target will be a HTMLSelectElement.
+        onChange?: ChangeEventHandler<T, HTMLSelectElement> | undefined;
     }
 
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -3388,6 +3487,7 @@ declare namespace React {
     }
 
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+        blocking?: "render" | (string & {}) | undefined;
         media?: string | undefined;
         scoped?: boolean | undefined;
         type?: string | undefined;
@@ -3425,7 +3525,9 @@ declare namespace React {
         value?: string | readonly string[] | number | undefined;
         wrap?: string | undefined;
 
-        onChange?: ChangeEventHandler<T> | undefined;
+        // No other element dispatching change events can be nested in a <textare>
+        // so we know the target will be a HTMLTextAreaElement.
+        onChange?: ChangeEventHandler<T, HTMLTextAreaElement> | undefined;
     }
 
     interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -3468,6 +3570,9 @@ declare namespace React {
         width?: number | string | undefined;
         disablePictureInPicture?: boolean | undefined;
         disableRemotePlayback?: boolean | undefined;
+
+        onResize?: ReactEventHandler<T> | undefined;
+        onResizeCapture?: ReactEventHandler<T> | undefined;
     }
 
     // this list is "complete" in that it contains every SVG attribute
@@ -3494,6 +3599,9 @@ declare namespace React {
         method?: string | undefined;
         min?: number | string | undefined;
         name?: string | undefined;
+        nonce?: string | undefined;
+        part?: string | undefined;
+        slot?: string | undefined;
         style?: CSSProperties | undefined;
         target?: string | undefined;
         type?: string | undefined;
@@ -3561,7 +3669,21 @@ declare namespace React {
         direction?: number | string | undefined;
         display?: number | string | undefined;
         divisor?: number | string | undefined;
-        dominantBaseline?: number | string | undefined;
+        dominantBaseline?:
+            | "auto"
+            | "use-script"
+            | "no-change"
+            | "reset-size"
+            | "ideographic"
+            | "alphabetic"
+            | "hanging"
+            | "mathematical"
+            | "central"
+            | "middle"
+            | "text-after-edge"
+            | "text-before-edge"
+            | "inherit"
+            | undefined;
         dur?: number | string | undefined;
         dx?: number | string | undefined;
         dy?: number | string | undefined;
@@ -3708,7 +3830,7 @@ declare namespace React {
         tableValues?: number | string | undefined;
         targetX?: number | string | undefined;
         targetY?: number | string | undefined;
-        textAnchor?: string | undefined;
+        textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
         textDecoration?: number | string | undefined;
         textLength?: number | string | undefined;
         textRendering?: number | string | undefined;
@@ -3997,7 +4119,6 @@ declare namespace React {
          * Captures which component contained the exception, and its ancestors.
          */
         componentStack?: string | null;
-        digest?: string | null;
     }
 
     // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/react",
-    "version": "19.1.2",
+    "version": "19.2.10",
     "description": "TypeScript definitions for react",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
     "license": "MIT",
@@ -202,9 +202,9 @@
     },
     "scripts": {},
     "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
     },
     "peerDependencies": {},
-    "typesPublisherContentHash": "60861a737ca2cfa2a641beec7b7939c5c1d6fe7e4979513bb35a34c6e13a0056",
-    "typeScriptVersion": "5.1"
+    "typesPublisherContentHash": "c1bacedf82d12682fbaf19b2e74fd83bbeea9f1592d6885e013c8c1379ce22e8",
+    "typeScriptVersion": "5.2"
 }

react/ts5.0/canary.d.ts

@@ -32,4 +32,89 @@ type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 declare module "." {
     export function unstable_useCacheRefresh(): () => void;
+
+    // @enableViewTransition
+    export interface ViewTransitionInstance {
+        /**
+         * The {@link ViewTransitionProps name} that was used in the corresponding {@link ViewTransition} component or `"auto"` if the `name` prop was omitted.
+         */
+        name: string;
+    }
+
+    export type ViewTransitionClassPerType = Record<"default" | (string & {}), "none" | "auto" | (string & {})>;
+    export type ViewTransitionClass = ViewTransitionClassPerType | ViewTransitionClassPerType[string];
+
+    export interface ViewTransitionProps {
+        children?: ReactNode | undefined;
+        /**
+         * Assigns the {@link https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class `view-transition-class`} class to the underlying DOM node.
+         */
+        default?: ViewTransitionClass | undefined;
+        /**
+         * Combined with {@link className} if this `<ViewTransition>` or its parent Component is mounted and there's no other with the same name being deleted.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        enter?: ViewTransitionClass | undefined;
+        /**
+         * Combined with {@link className} if this `<ViewTransition>` or its parent Component is unmounted and there's no other with the same name being deleted.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        exit?: ViewTransitionClass | undefined;
+        /**
+         * "auto" will automatically assign a view-transition-name to the inner DOM node.
+         * That way you can add a View Transition to a Component without controlling its DOM nodes styling otherwise.
+         *
+         * A difference between this and the browser's built-in view-transition-name: auto is that switching the DOM nodes within the `<ViewTransition>` component preserves the same name so this example cross-fades between the DOM nodes instead of causing an exit and enter.
+         * @default "auto"
+         */
+        name?: "auto" | (string & {}) | undefined;
+        /**
+         * The `<ViewTransition>` or its parent Component is mounted and there's no other `<ViewTransition>` with the same name being deleted.
+         */
+        onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
+        /**
+         * The `<ViewTransition>` or its parent Component is unmounted and there's no other `<ViewTransition>` with the same name being deleted.
+         */
+        onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
+        /**
+         * This `<ViewTransition>` is being mounted and another `<ViewTransition>` instance with the same name is being unmounted elsewhere.
+         */
+        onShare?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
+        /**
+         * The content of `<ViewTransition>` has changed either due to DOM mutations or because an inner child `<ViewTransition>` has resized.
+         */
+        onUpdate?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
+        ref?: Ref<ViewTransitionInstance> | undefined;
+        /**
+         * Combined with {@link className} if this `<ViewTransition>` is being mounted and another instance with the same name is being unmounted elsewhere.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        share?: ViewTransitionClass | undefined;
+        /**
+         * Combined with {@link className} if the content of this `<ViewTransition>` has changed either due to DOM mutations or because an inner child has resized.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        update?: ViewTransitionClass | undefined;
+    }
+
+    /**
+     * Opt-in for using {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API View Transitions} in React.
+     * View Transitions only trigger for async updates like {@link startTransition}, {@link useDeferredValue}, Actions or <{@link Suspense}> revealing from fallback to content.
+     * Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't.
+     *
+     * @see {@link https://react.dev/reference/react/ViewTransition `<ViewTransition>` reference documentation}
+     */
+    export const ViewTransition: ExoticComponent<ViewTransitionProps>;
+
+    /**
+     * @see {@link https://react.dev/reference/react/addTransitionType `addTransitionType` reference documentation}
+     */
+    export function addTransitionType(type: string): void;
+
+    // @enableFragmentRefs
+    export interface FragmentInstance {}
+
+    export interface FragmentProps {
+        ref?: Ref<FragmentInstance> | undefined;
+    }
 }