Add support for command invokers API

Author: lukewarlow

fixtures/attribute-behavior/src/attributes.js

@@ -357,6 +357,21 @@ const attributes = [
   },
   {name: 'cols', tagName: 'textarea'},
   {name: 'colSpan', containerTagName: 'tr', tagName: 'td'},
+  {name: 'command', tagName: 'button', overrideStringValue: 'show-popover'},
+  {
+    name: 'commandFor',
+    read: element => {
+      document.body.appendChild(element);
+      try {
+        // trigger and target need to be connected for `commandForElement` to read the actual value.
+        return element.commandForElement;
+      } finally {
+        document.body.removeChild(element);
+      }
+    },
+    overrideStringValue: 'popover-target',
+    tagName: 'button',
+  },
   {name: 'content', containerTagName: 'head', tagName: 'meta'},
   {name: 'contentEditable'},
   {

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

@@ -82,6 +82,7 @@ let didWarnFormActionTarget = false;
 let didWarnFormActionMethod = false;
 let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
 let didWarnPopoverTargetObject = false;
+let didWarnCommandForObject = false;
 if (__DEV__) {
   didWarnForNewBooleanPropsWithEmptyValue = {};
 }
@@ -875,6 +876,21 @@ function setProp(
           );
         }
       }
+      break;
+    case 'commandFor':
+      if (__DEV__) {
+        if (
+          !didWarnCommandForObject &&
+          value != null &&
+          typeof value === 'object'
+        ) {
+          didWarnCommandForObject = true;
+          console.error(
+            'The `commandFor` prop expects the ID of an Element as a string. Received %s instead.',
+            value,
+          );
+        }
+      }
     // Fall through
     default: {
       if (
@@ -3077,6 +3093,10 @@ export function hydrateProperties(
     }
   }
 
+  if (props.onCommand != null) {
+    listenToNonDelegatedEvent('command', domElement);
+  }
+
   if (props.onClick != null) {
     // TODO: This cast may not be sound for SVG, MathML or custom elements.
     trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

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

@@ -26,6 +26,7 @@ export type DOMEventName =
   | 'change'
   | 'click'
   | 'close'
+  | 'command'
   | 'compositionend'
   | 'compositionstart'
   | 'compositionupdate'

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

@@ -46,6 +46,7 @@ const simpleEventPluginEvents = [
   'canPlayThrough',
   'click',
   'close',
+  'command',
   'contextMenu',
   'copy',
   'cut',

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

@@ -236,6 +236,7 @@ export const nonDelegatedEvents: Set<DOMEventName> = new Set([
   'beforetoggle',
   'cancel',
   'close',
+  'command',
   'invalid',
   'load',
   'scroll',

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

@@ -294,6 +294,7 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
     case 'cancel':
     case 'click':
     case 'close':
+    case 'command':
     case 'contextmenu':
     case 'copy':
     case 'cut':

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

@@ -600,3 +600,12 @@ const ToggleEventInterface = {
 };
 export const SyntheticToggleEvent: $FlowFixMe =
   createSyntheticEvent(ToggleEventInterface);
+
+const CommandEventInterface = {
+  ...EventInterface,
+  source: 0,
+  command: 0,
+};
+export const SyntheticCommandEvent: $FlowFixMe = createSyntheticEvent(
+  CommandEventInterface,
+);

packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js

@@ -28,6 +28,7 @@ import {
   SyntheticClipboardEvent,
   SyntheticPointerEvent,
   SyntheticToggleEvent,
+  SyntheticCommandEvent,
 } from '../../events/SyntheticEvent';
 
 import {
@@ -167,6 +168,9 @@ function extractEvents(
       // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
       SyntheticEventCtor = SyntheticToggleEvent;
       break;
+    case 'command':
+      SyntheticEventCtor = SyntheticCommandEvent;
+      break;
     default:
       // Unknown event. This is used by createEventHandle.
       break;

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

@@ -38,6 +38,8 @@ const possibleStandardNames = {
   classname: 'className',
   cols: 'cols',
   colspan: 'colSpan',
+  command: 'command',
+  commandfor: 'commandFor',
   content: 'content',
   contenteditable: 'contentEditable',
   contextmenu: 'contextMenu',

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

@@ -1346,6 +1346,34 @@ describe('DOMPropertyOperations', () => {
         );
       });
     });
+
+    it('warns when using commandFor={HTMLElement}', async () => {
+      const popoverTarget = document.createElement('div');
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <button key="one" commandFor={popoverTarget} command="toggle-popover">
+            Toggle popover
+          </button>,
+        );
+      });
+
+      assertConsoleErrorDev([
+        'The `commandFor` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.\n' +
+          '    in button (at **)',
+      ]);
+
+      // Dedupe warning
+      await act(() => {
+        root.render(
+          <button key="two" commandFor={popoverTarget} command="toggle-popover">
+            Toggle popover
+          </button>,
+        );
+      });
+    });
   });
 
   describe('deleteValueForProperty', () => {