[react] Add types for <ViewTransition> (DefinitelyTyped#71580)

47-studio-org · Jan 8, 2025 · 7df789c · 7df789c
1 parent 3a252fd
commit 7df789c
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/types/react/experimental.d.ts b/types/react/experimental.d.ts
@@ -122,4 +122,29 @@ declare module "." {
         value: TaintableUniqueValue,
     ): void;
     function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
+
+    export interface ViewTransitionProps {
+        /**
+         * Assigns the {@link https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class `view-transition-class`} class to the underlying DOM node.
+         */
+        className?: string | 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;
+        children?: ReactNode | 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://github.com/facebook/react/pull/31975}
+     */
+    export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
 }
diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx
@@ -138,3 +138,28 @@ function taintTests() {
         true,
     );
 }
+
+function viewTransitionTests() {
+    const ViewTransition = React.unstable_ViewTransition;
+
+    <ViewTransition />;
+    <ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
+    <ViewTransition name="auto" />;
+    <ViewTransition name="foo" />;
+    // autocomplete should display "auto"
+    <ViewTransition name="" />;
+
+    <ViewTransition>
+        <div />
+    </ViewTransition>;
+
+    const Null = () => null;
+    <ViewTransition>
+        <Null />
+    </ViewTransition>;
+
+    const Div = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
+    <ViewTransition>
+        <Div />
+    </ViewTransition>;
+}
diff --git a/types/react/ts5.0/experimental.d.ts b/types/react/ts5.0/experimental.d.ts
@@ -122,4 +122,29 @@ declare module "." {
         value: TaintableUniqueValue,
     ): void;
     function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
+
+    export interface ViewTransitionProps {
+        /**
+         * Assigns the {@link https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class `view-transition-class`} class to the underlying DOM node.
+         */
+        className?: string | 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;
+        children?: ReactNode | 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://github.com/facebook/react/pull/31975}
+     */
+    export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
 }
diff --git a/types/react/ts5.0/test/experimental.tsx b/types/react/ts5.0/test/experimental.tsx
@@ -141,3 +141,28 @@ function taintTests() {
         true,
     );
 }
+
+function viewTransitionTests() {
+    const ViewTransition = React.unstable_ViewTransition;
+
+    <ViewTransition />;
+    <ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
+    <ViewTransition name="auto" />;
+    <ViewTransition name="foo" />;
+    // autocomplete should display "auto"
+    <ViewTransition name="" />;
+
+    <ViewTransition>
+        <div />
+    </ViewTransition>;
+
+    const Null = () => null;
+    <ViewTransition>
+        <Null />
+    </ViewTransition>;
+
+    const Div = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
+    <ViewTransition>
+        <Div />
+    </ViewTransition>;
+}