Add "auto" class to mean the built-in should run (#32761)

Stacked on #32734

In React a ViewTransition class of `"none"` doesn't just mean that it
has no class but also that it has no ViewTransition name. The default
(`null | undefined`) means that it has no specific class but should run
with the default built-in animation. This adds this as an explicit
string called `"auto"` as well.

That way you can do `<ViewTransition default="foo" enter="auto">` to
override the "foo" just for the "enter" trigger to be the default
built-in animation. Where as if you just specified `null` it would be
like not specifying enter at all which would trigger "foo".

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberViewTransitionComponent.js

@@ -21,10 +21,14 @@ import {getIsHydrating} from './ReactFiberHydrationContext';
 import {getTreeId} from './ReactFiberTreeContext';
 
 export type ViewTransitionClassPerType = {
-  [transitionType: 'default' | string]: 'none' | string,
+  [transitionType: 'default' | string]: 'none' | 'auto' | string,
 };
 
-export type ViewTransitionClass = 'none' | string | ViewTransitionClassPerType;
+export type ViewTransitionClass =
+  | 'none'
+  | 'auto'
+  | string
+  | ViewTransitionClassPerType;
 
 export type ViewTransitionProps = {
   name?: string,
@@ -127,7 +131,10 @@ export function getViewTransitionClassName(
   const className: ?string = getClassNameByType(defaultClass);
   const eventClassName: ?string = getClassNameByType(eventClass);
   if (eventClassName == null) {
-    return className;
+    return className === 'auto' ? null : className;
+  }
+  if (eventClassName === 'auto') {
+    return null;
   }
   return eventClassName;
 }