React DOM: Add support for hidden="until-found"

fixtures/attribute-behavior/AttributeTableSnapshot.md

@@ -4926,21 +4926,21 @@
 ## `hidden` (on `<div>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `hidden=(string)`| (changed)| `<boolean: true>` |
-| `hidden=(empty string)`| (initial)| `<boolean: false>` |
-| `hidden=(array with string)`| (changed)| `<boolean: true>` |
+| `hidden=(string)`| (changed)| `"until-found"` |
+| `hidden=(empty string)`| (changed)| `<boolean: true>` |
+| `hidden=(array with string)`| (changed)| `"until-found"` |
 | `hidden=(empty array)`| (changed)| `<boolean: true>` |
 | `hidden=(object)`| (changed)| `<boolean: true>` |
 | `hidden=(numeric string)`| (changed)| `<boolean: true>` |
 | `hidden=(-1)`| (changed)| `<boolean: true>` |
-| `hidden=(0)`| (initial)| `<boolean: false>` |
+| `hidden=(0)`| (changed)| `<boolean: true>` |
 | `hidden=(integer)`| (changed)| `<boolean: true>` |
-| `hidden=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `hidden=(NaN)`| (changed, warning)| `<boolean: true>` |
 | `hidden=(float)`| (changed)| `<boolean: true>` |
 | `hidden=(true)`| (changed)| `<boolean: true>` |
 | `hidden=(false)`| (initial)| `<boolean: false>` |
-| `hidden=(string 'true')`| (changed, warning)| `<boolean: true>` |
-| `hidden=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `hidden=(string 'true')`| (changed)| `<boolean: true>` |
+| `hidden=(string 'false')`| (changed)| `<boolean: true>` |
 | `hidden=(string 'on')`| (changed)| `<boolean: true>` |
 | `hidden=(string 'off')`| (changed)| `<boolean: true>` |
 | `hidden=(symbol)`| (initial, warning)| `<boolean: false>` |

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -78,6 +78,7 @@ import {
   mediaEventTypes,
   listenToNonDelegatedEvent,
 } from '../events/DOMPluginEventSystem';
+import {enableNewDOMProps} from '../../../shared/ReactFeatureFlags';
 
 let didWarnControlledToUncontrolled = false;
 let didWarnUncontrolledToControlled = false;
@@ -722,7 +723,6 @@ function setProp(
     case 'disablePictureInPicture':
     case 'disableRemotePlayback':
     case 'formNoValidate':
-    case 'hidden':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -742,6 +742,16 @@ function setProp(
       break;
     }
     // Overloaded Boolean
+    case 'hidden':
+      if (!enableNewDOMProps) {
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          domElement.setAttribute(key, '');
+        } else {
+          domElement.removeAttribute(key);
+        }
+        break;
+      }
+    // fallthrough to overloaded boolean with enableNewDOMProps
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -2507,7 +2517,6 @@ function diffHydratedGenericElement(
       case 'disablePictureInPicture':
       case 'disableRemotePlayback':
       case 'formNoValidate':
-      case 'hidden':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2529,6 +2538,19 @@ function diffHydratedGenericElement(
         );
         continue;
       }
+      case 'hidden':
+        if (!enableNewDOMProps) {
+          // Some of these need to be lower case to remove them from the extraAttributes list.
+          hydrateBooleanAttribute(
+            domElement,
+            propKey,
+            propKey.toLowerCase(),
+            value,
+            extraAttributes,
+          );
+          continue;
+        }
+      // fallthrough to overloaded boolean with enableNewDOMProps
       case 'capture':
       case 'download': {
         hydrateOverloadedBooleanAttribute(

packages/react-dom-bindings/src/events/DOMEventNames.js

@@ -18,6 +18,7 @@ export type DOMEventName =
   // 'animationstart' |
   | 'beforeblur' // Not a real event. This is used by event experiments.
   | 'beforeinput'
+  | 'beforematch'
   | 'blur'
   | 'canplay'
   | 'canplaythrough'

packages/react-dom-bindings/src/events/DOMEventProperties.js

@@ -34,6 +34,7 @@ export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
 const simpleEventPluginEvents = [
   'abort',
   'auxClick',
+  'beforematch',
   'cancel',
   'canPlay',
   'canPlayThrough',

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

@@ -53,6 +53,7 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
+import {enableNewDOMProps} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -386,6 +387,11 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
           return DefaultEventPriority;
       }
     }
+    case 'beforematch':
+      if (enableNewDOMProps) {
+        return DiscreteEventPriority;
+      }
+    // fall through without enableNewDOMProps
     default:
       return DefaultEventPriority;
   }

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -34,6 +34,7 @@ import {
   enableFloat,
   enableFormActions,
   enableFizzExternalRuntime,
+  enableNewDOMProps,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -1290,7 +1291,6 @@ function pushAttribute(
     case 'disablePictureInPicture':
     case 'disableRemotePlayback':
     case 'formNoValidate':
-    case 'hidden':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1312,6 +1312,18 @@ function pushAttribute(
       }
       return;
     }
+    case 'hidden':
+      if (!enableNewDOMProps) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+      }
+    // fallthrough to overloaded boolean with enableNewDOMProps
     case 'capture':
     case 'download': {
       // Overloaded Boolean
@@ -4994,7 +5006,16 @@ function writeStyleResourceAttributeInJS(
       if (value === false) {
         return;
       }
-      attributeValue = '';
+      if (enableNewDOMProps) {
+        // overloaded Boolean
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
+        attributeValue = '' + (value: any);
+      } else {
+        // just Boolean
+        attributeValue = '';
+      }
       break;
     }
     // Santized URLs
@@ -5189,7 +5210,16 @@ function writeStyleResourceAttributeInAttr(
       if (value === false) {
         return;
       }
-      attributeValue = '';
+      if (enableNewDOMProps) {
+        // overloaded Boolean
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
+        attributeValue = '' + (value: any);
+      } else {
+        // just Boolean
+        attributeValue = '';
+      }
       break;
     }
 

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

@@ -12,6 +12,7 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import {
   enableCustomElementPropertySupport,
   enableFormActions,
+  enableNewDOMProps,
 } from 'shared/ReactFeatureFlags';
 
 const warnedProperties = {};
@@ -300,7 +301,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disablePictureInPicture':
             case 'disableRemotePlayback':
             case 'formNoValidate':
-            case 'hidden':
             case 'loop':
             case 'noModule':
             case 'noValidate':
@@ -314,6 +314,12 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
+            case 'hidden': {
+              if (!enableNewDOMProps) {
+                break;
+              }
+            }
+            // fallthrough to overloaded boolean with enableNewDOMProps
             default: {
               return true;
             }

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -3452,15 +3452,15 @@ describe('ReactDOMComponent', () => {
         const root = ReactDOMClient.createRoot(container);
 
         await act(() => {
-          root.render(<div hidden="false" ref={current => (el = current)} />);
+          root.render(<div disabled="false" ref={current => (el = current)} />);
         });
       }).toErrorDev(
-        'Received the string `false` for the boolean attribute `hidden`. ' +
+        'Received the string `false` for the boolean attribute `disabled`. ' +
           'The browser will interpret it as a truthy value. ' +
-          'Did you mean hidden={false}?',
+          'Did you mean disabled={false}?',
       );
 
-      expect(el.getAttribute('hidden')).toBe('');
+      expect(el.getAttribute('disabled')).toBe('');
     });
 
     it('warns on the potentially-ambiguous string value "true"', async function () {
@@ -3470,15 +3470,15 @@ describe('ReactDOMComponent', () => {
         const root = ReactDOMClient.createRoot(container);
 
         await act(() => {
-          root.render(<div hidden="true" ref={current => (el = current)} />);
+          root.render(<div disabled="true" ref={current => (el = current)} />);
         });
       }).toErrorDev(
-        'Received the string `true` for the boolean attribute `hidden`. ' +
+        'Received the string `true` for the boolean attribute `disabled`. ' +
           'Although this works, it will not work as expected if you pass the string "false". ' +
-          'Did you mean hidden={true}?',
+          'Did you mean disabled={true}?',
       );
 
-      expect(el.getAttribute('hidden')).toBe('');
+      expect(el.getAttribute('disabled')).toBe('');
     });
   });
 

packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

@@ -124,6 +124,23 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onBeforeMatch', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onBeforeMatch',
+        reactEventType: 'beforematch',
+        nativeEvent: 'beforematch',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('beforematch', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
     it('onBlur', async () => {
       await testNativeBubblingEvent({
         type: 'input',