View Transition Class Names based on event kind (DefinitelyTyped#71642)

Author: eps1lon

types/react/experimental.d.ts

@@ -136,6 +136,21 @@ declare module "." {
          * 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;
+        /**
+         * 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?: "none" | (string & {}) | 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?: "none" | (string & {}) | undefined;
+        /**
+         * Combined with {@link className} there are no updates to the content inside this boundary itself but the boundary has resized or moved due to other changes to siblings.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        layout?: "none" | (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.
@@ -165,6 +180,16 @@ declare module "." {
          */
         onUpdate?: (instance: ViewTransitionInstance) => 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?: "none" | (string & {}) | 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?: "none" | (string & {}) | undefined;
     }
 
     /**

types/react/test/experimental.tsx

@@ -143,7 +143,14 @@ function viewTransitionTests() {
     const ViewTransition = React.unstable_ViewTransition;
 
     <ViewTransition />;
-    <ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
+    <ViewTransition
+        className="enter-slide-in exit-fade-out update-cross-fade"
+        enter="slide-from-left"
+        exit="slide-to-right"
+        layout="slide"
+        update="none"
+        share="cross-fade"
+    />;
     <ViewTransition name="auto" />;
     <ViewTransition name="foo" />;
     // autocomplete should display "auto"

types/react/ts5.0/experimental.d.ts

@@ -136,6 +136,21 @@ declare module "." {
          * 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;
+        /**
+         * 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?: "none" | (string & {}) | 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?: "none" | (string & {}) | undefined;
+        /**
+         * Combined with {@link className} there are no updates to the content inside this boundary itself but the boundary has resized or moved due to other changes to siblings.
+         * `"none"` is a special value that deactivates the view transition name under that condition.
+         */
+        layout?: "none" | (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.
@@ -165,6 +180,16 @@ declare module "." {
          */
         onUpdate?: (instance: ViewTransitionInstance) => 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?: "none" | (string & {}) | 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?: "none" | (string & {}) | undefined;
     }
 
     /**

types/react/ts5.0/test/experimental.tsx

@@ -146,7 +146,14 @@ function viewTransitionTests() {
     const ViewTransition = React.unstable_ViewTransition;
 
     <ViewTransition />;
-    <ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
+    <ViewTransition
+        className="enter-slide-in exit-fade-out update-cross-fade"
+        enter="slide-from-left"
+        exit="slide-to-right"
+        layout="slide"
+        update="none"
+        share="cross-fade"
+    />;
     <ViewTransition name="auto" />;
     <ViewTransition name="foo" />;
     // autocomplete should display "auto"