From 4f4e1f0e658a695688fea094f7da64fd542b9b58 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 16 Jun 2022 19:44:50 +0200
Subject: [PATCH 1/4] React DOM: Add support for `hidden="until-found"`

---
 .../attribute-behavior/AttributeTableSnapshot.md   | 14 +++++++-------
 .../src/client/ReactDOMComponent.js                |  4 ++--
 .../src/server/ReactFizzConfigDOM.js               |  7 +++++--
 .../src/shared/ReactDOMUnknownPropertyHook.js      |  3 +--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index f3a8ebfde9923..220cbd0d3ed51 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/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>` |
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 24462c1d2bb5a..484d6b674894d 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -722,7 +722,6 @@ function setProp(
     case 'disablePictureInPicture':
     case 'disableRemotePlayback':
     case 'formNoValidate':
-    case 'hidden':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -743,6 +742,7 @@ function setProp(
     }
     // Overloaded Boolean
     case 'capture':
+    case 'hidden':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
       // When true, it should be present (set either to an empty string or its name).
@@ -2507,7 +2507,6 @@ function diffHydratedGenericElement(
       case 'disablePictureInPicture':
       case 'disableRemotePlayback':
       case 'formNoValidate':
-      case 'hidden':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2530,6 +2529,7 @@ function diffHydratedGenericElement(
         continue;
       }
       case 'capture':
+      case 'hidden':
       case 'download': {
         hydrateOverloadedBooleanAttribute(
           domElement,
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index a469b5587d79a..e5a1d691e6169 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1290,7 +1290,6 @@ function pushAttribute(
     case 'disablePictureInPicture':
     case 'disableRemotePlayback':
     case 'formNoValidate':
-    case 'hidden':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1313,6 +1312,7 @@ function pushAttribute(
       return;
     }
     case 'capture':
+    case 'hidden':
     case 'download': {
       // Overloaded Boolean
       if (value === true) {
@@ -5189,7 +5189,10 @@ function writeStyleResourceAttributeInAttr(
       if (value === false) {
         return;
       }
-      attributeValue = '';
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
       break;
     }
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index 3dbb1d8e2c315..c08f1f7ac41b0 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -223,7 +223,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disablePictureInPicture':
           case 'disableRemotePlayback':
           case 'formNoValidate':
-          case 'hidden':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -236,6 +235,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'seamless':
           case 'itemScope':
           case 'capture':
+          case 'hidden':
           case 'download': {
             // Boolean properties can accept boolean values
             return true;
@@ -300,7 +300,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disablePictureInPicture':
             case 'disableRemotePlayback':
             case 'formNoValidate':
-            case 'hidden':
             case 'loop':
             case 'noModule':
             case 'noValidate':

From 8d312589e3d4fcfc4f4cc5191c56891a6ae528df Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 16 Jun 2022 19:59:11 +0200
Subject: [PATCH 2/4] Update tests

---
 .../src/__tests__/ReactDOMComponent-test.js   | 16 +++---
 ...eactDOMServerIntegrationAttributes-test.js | 51 +++++++++----------
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 6541293f51333..a41a1213a0a29 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/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('');
     });
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index 0880f2c6b0557..aee0705f14647 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -113,71 +113,68 @@ describe('ReactDOMServerIntegration', () => {
 
     describe('boolean properties', function () {
       itRenders('boolean prop with true value', async render => {
-        const e = await render(<div hidden={true} />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled={true} />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
       itRenders('boolean prop with false value', async render => {
-        const e = await render(<div hidden={false} />);
-        expect(e.getAttribute('hidden')).toBe(null);
+        const e = await render(<div disabled={false} />);
+        expect(e.getAttribute('disabled')).toBe(null);
       });
 
       itRenders('boolean prop with self value', async render => {
-        const e = await render(<div hidden="hidden" />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled="disabled" />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
-      // this does not seem like correct behavior, since hidden="" in HTML indicates
-      // that the boolean property is present. however, it is how the current code
-      // behaves, so the test is included here.
       itRenders('boolean prop with "" value', async render => {
-        const e = await render(<div hidden="" />);
-        expect(e.getAttribute('hidden')).toBe(null);
+        const e = await render(<div disabled="" />);
+        expect(e.getAttribute('disabled')).toBe(null);
       });
 
       // this seems like it might mask programmer error, but it's existing behavior.
       itRenders('boolean prop with string value', async render => {
-        const e = await render(<div hidden="foo" />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled="foo" />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
       // this seems like it might mask programmer error, but it's existing behavior.
       itRenders('boolean prop with array value', async render => {
-        const e = await render(<div hidden={['foo', 'bar']} />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled={['foo', 'bar']} />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
       // this seems like it might mask programmer error, but it's existing behavior.
       itRenders('boolean prop with object value', async render => {
-        const e = await render(<div hidden={{foo: 'bar'}} />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled={{foo: 'bar'}} />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
       // this seems like it might mask programmer error, but it's existing behavior.
       itRenders('boolean prop with non-zero number value', async render => {
-        const e = await render(<div hidden={10} />);
-        expect(e.getAttribute('hidden')).toBe('');
+        const e = await render(<div disabled={10} />);
+        expect(e.getAttribute('disabled')).toBe('');
       });
 
       // this seems like it might mask programmer error, but it's existing behavior.
       itRenders('boolean prop with zero value', async render => {
-        const e = await render(<div hidden={0} />);
-        expect(e.getAttribute('hidden')).toBe(null);
+        const e = await render(<div disabled={0} />);
+        expect(e.getAttribute('disabled')).toBe(null);
       });
 
       itRenders('no boolean prop with null value', async render => {
-        const e = await render(<div hidden={null} />);
-        expect(e.hasAttribute('hidden')).toBe(false);
+        const e = await render(<div disabled={null} />);
+        expect(e.hasAttribute('disabled')).toBe(false);
       });
 
       itRenders('no boolean prop with function value', async render => {
-        const e = await render(<div hidden={function () {}} />, 1);
-        expect(e.hasAttribute('hidden')).toBe(false);
+        const e = await render(<div disabled={function () {}} />, 1);
+        expect(e.hasAttribute('disabled')).toBe(false);
       });
 
       itRenders('no boolean prop with symbol value', async render => {
-        const e = await render(<div hidden={Symbol('foo')} />, 1);
-        expect(e.hasAttribute('hidden')).toBe(false);
+        const e = await render(<div disabled={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('disabled')).toBe(false);
       });
     });
 

From b513735e6f735172c1215bb0dad71e029c587498 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Wed, 28 Feb 2024 21:48:49 +0100
Subject: [PATCH 3/4] Land behind flag

---
 .../src/client/ReactDOMComponent.js           | 26 +++++-
 .../src/server/ReactFizzConfigDOM.js          | 37 +++++++--
 .../src/shared/ReactDOMUnknownPropertyHook.js |  9 ++-
 ...eactDOMServerIntegrationAttributes-test.js | 81 ++++++++++++++++++-
 packages/shared/ReactFeatureFlags.js          |  6 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  2 +
 .../forks/ReactFeatureFlags.native-oss.js     |  2 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  2 +
 .../ReactFeatureFlags.test-renderer.www.js    |  2 +
 .../shared/forks/ReactFeatureFlags.www.js     |  2 +
 11 files changed, 160 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 484d6b674894d..a33db152b3bd3 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/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;
@@ -741,8 +742,17 @@ function setProp(
       break;
     }
     // Overloaded Boolean
-    case 'capture':
     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.
       // When true, it should be present (set either to an empty string or its name).
@@ -2528,8 +2538,20 @@ function diffHydratedGenericElement(
         );
         continue;
       }
-      case 'capture':
       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(
           domElement,
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index e5a1d691e6169..8f3a5dd7b9c96 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -34,6 +34,7 @@ import {
   enableFloat,
   enableFormActions,
   enableFizzExternalRuntime,
+  enableNewDOMProps,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -1311,8 +1312,19 @@ function pushAttribute(
       }
       return;
     }
-    case 'capture':
     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
       if (value === true) {
@@ -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,10 +5210,16 @@ function writeStyleResourceAttributeInAttr(
       if (value === false) {
         return;
       }
-      if (__DEV__) {
-        checkAttributeStringCoercion(value, attributeName);
+      if (enableNewDOMProps) {
+        // overloaded Boolean
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
+        attributeValue = '' + (value: any);
+      } else {
+        // just Boolean
+        attributeValue = '';
       }
-      attributeValue = '' + (value: any);
       break;
     }
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index c08f1f7ac41b0..4ef0397b180b0 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/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 = {};
@@ -223,6 +224,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disablePictureInPicture':
           case 'disableRemotePlayback':
           case 'formNoValidate':
+          case 'hidden':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -235,7 +237,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'seamless':
           case 'itemScope':
           case 'capture':
-          case 'hidden':
           case 'download': {
             // Boolean properties can accept boolean values
             return true;
@@ -313,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;
             }
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index aee0705f14647..4f9f9ded0a71c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -33,8 +33,14 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders, clientCleanRender} =
-  ReactDOMServerIntegrationUtils(initModules);
+const {
+  resetModules,
+  itRenders,
+  clientCleanRender,
+  clientRenderOnServerString,
+  serverRender,
+  streamRender,
+} = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
   beforeEach(() => {
@@ -230,6 +236,77 @@ describe('ReactDOMServerIntegration', () => {
       });
     });
 
+    describe('hidden property (combined boolean/string attribute)', function () {
+      itRenders('hidden prop with true value', async render => {
+        const e = await render(<div hidden={true} />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      itRenders('hidden prop with false value', async render => {
+        const e = await render(<div hidden={false} />);
+        expect(e.getAttribute('hidden')).toBe(null);
+      });
+
+      itRenders('hidden prop with string value', async render => {
+        const e = await render(<div hidden="until-found" />);
+        expect(e.getAttribute('hidden')).toBe(
+          ReactFeatureFlags.enableNewDOMProps ? 'until-found' : '',
+        );
+      });
+
+      itRenders('hidden prop with string "false" value', async render => {
+        const e = await render(
+          <div hidden="false" />,
+          ReactFeatureFlags.enableNewDOMProps ? 0 : 1,
+        );
+        expect(e.getAttribute('hidden')).toBe(
+          ReactFeatureFlags.enableNewDOMProps ? 'false' : '',
+        );
+      });
+
+      itRenders('hidden prop with string "true" value', async render => {
+        const e = await render(
+          <div hidden={'true'} />,
+          ReactFeatureFlags.enableNewDOMProps ? 0 : 1,
+        );
+        expect(e.getAttribute('hidden')).toBe(
+          ReactFeatureFlags.enableNewDOMProps ? 'true' : '',
+        );
+      });
+
+      itRenders('hidden prop with number 0 value', async render => {
+        const e = await render(<div hidden={0} />);
+        expect(e.getAttribute('hidden')).toBe(
+          ReactFeatureFlags.enableNewDOMProps ||
+            render === clientRenderOnServerString ||
+            render === serverRender ||
+            render === streamRender
+            ? '0'
+            : null,
+        );
+      });
+
+      itRenders('no hidden prop with null value', async render => {
+        const e = await render(<div hidden={null} />);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+
+      itRenders('no hidden prop with undefined value', async render => {
+        const e = await render(<div hidden={undefined} />);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+
+      itRenders('no hidden prop with function value', async render => {
+        const e = await render(<div hidden={function () {}} />, 1);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+
+      itRenders('no hidden prop with symbol value', async render => {
+        const e = await render(<div hidden={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+    });
+
     describe('className property', function () {
       itRenders('className prop with string value', async render => {
         const e = await render(<div className="myClassName" />);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 2d48410460b87..0e507e814f1b5 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -195,6 +195,12 @@ export const disableStringRefs = __NEXT_MAJOR__;
 // Warn on any usage of ReactTestRenderer
 export const enableReactTestRendererWarning = false;
 
+/**
+ * Catch-all for all changes to how we treat new HTML attributes.
+ * When attributes are newly recognized by React, or change their type, the rendered output changes.
+ */
+export const enableNewDOMProps = __NEXT_MAJOR__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index afc64995ee2c0..c9605ba4d8b79 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -107,5 +107,7 @@ export const enableReactTestRendererWarning = false;
 
 export const enableBigIntSupport = false;
 
+export const enableNewDOMProps = true;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index dcc8fd7b95f24..d6054eb74b574 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -98,5 +98,7 @@ export const enableReactTestRendererWarning = false;
 
 export const enableBigIntSupport = false;
 
+export const enableNewDOMProps = true;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e82f84389e544..9d600cee709e8 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -101,6 +101,7 @@ export const enableRefAsProp = __NEXT_MAJOR__;
 export const disableStringRefs = __NEXT_MAJOR__;
 export const enableReactTestRendererWarning = false;
 export const enableBigIntSupport = __NEXT_MAJOR__;
+export const enableNewDOMProps = __NEXT_MAJOR__;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 642f2c3f08362..0bc6b26bf0f9a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -94,5 +94,7 @@ export const enableReactTestRendererWarning = false;
 
 export const enableBigIntSupport = false;
 
+export const enableNewDOMProps = true;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b276f804cc6bf..9a48a693081d9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -97,5 +97,7 @@ export const enableReactTestRendererWarning = false;
 
 export const enableBigIntSupport = false;
 
+export const enableNewDOMProps = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index d8df7644fca52..d3a15a5216c11 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -122,6 +122,8 @@ export const enableReactTestRendererWarning = false;
 
 export const enableBigIntSupport = false;
 
+export const enableNewDOMProps = false;
+
 // TODO: Roll out with GK. Don't keep as dynamic flag for too long, though,
 // because JSX is an extremely hot path.
 export const disableStringRefs = false;

From a7cc853f2171cee77509f0f673a6857389a61907 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Wed, 28 Feb 2024 22:14:05 +0100
Subject: [PATCH 4/4] WIP

---
 .../src/events/DOMEventNames.js                 |  1 +
 .../src/events/DOMEventProperties.js            |  1 +
 .../src/events/ReactDOMEventListener.js         |  6 ++++++
 .../__tests__/ReactDOMEventPropagation-test.js  | 17 +++++++++++++++++
 .../react-dom/src/test-utils/ReactTestUtils.js  |  1 +
 5 files changed, 26 insertions(+)

diff --git a/packages/react-dom-bindings/src/events/DOMEventNames.js b/packages/react-dom-bindings/src/events/DOMEventNames.js
index 9145e316f9d1f..9ba08d742a937 100644
--- a/packages/react-dom-bindings/src/events/DOMEventNames.js
+++ b/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'
diff --git a/packages/react-dom-bindings/src/events/DOMEventProperties.js b/packages/react-dom-bindings/src/events/DOMEventProperties.js
index 55b3c4f987186..72e928a021a3f 100644
--- a/packages/react-dom-bindings/src/events/DOMEventProperties.js
+++ b/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',
diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
index 237cde231176b..578e98700fffc 100644
--- a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
+++ b/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;
   }
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index b90ca9efdb32e..d56a2b8896acd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/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',
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 39a187ad42b58..282c5c239ef43 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -627,6 +627,7 @@ function makeSimulator(eventType) {
 
 // A one-time snapshot with no plans to update. We'll probably want to deprecate Simulate API.
 const simulatedEventTypes = [
+  'beforematch',
   'blur',
   'cancel',
   'click',