Current behaviour

Currently the is no way to compose components that are using trigger pattern:

<Menu>
  {/* One of these will be broken and will not handle events properly 👇  */}
  <MenuTrigger>
    <Tooltip content="opens a menu">
      <Button>Menu only</Button>
    </Tooltip>
  </MenuTrigger>
</Menu>

Related Issues

Fixes #21115, based on #21128.

Description of changes

This PR proposes a solution to the nested trigger composition problem with ref and props forwarding.

Pros

• Triggers could be nested
• Event handlers are still stable by reference
• Adds generic useTriggerElement hook that can be reused

Cons

• "jQuery-like" event dispatching callback to have stable event handlers
• Triggers can no longer read props (i.e. disabled) easily
  • refactored menu to read disabled andaria-disabled from the event targets

How it works?

We need to have stable callbacks that we are passing to slots or when we are cloning elements (trigger's case) to not break memoization that could be used by customers:

function App() {
  return (
    <MenuTrigger>
      <MemoButton />
    </MenuTrigger>
  );
}

It's easy to when we know them in advance:

const handleClick = React.useCallback(
  e => {
    // some custom logic
    props.onClick(e);
  },
  [props.onClick]
);

But it becomes really problematic with triggers (mainly because we can't have random amount of hooks):

const childProps = props.children.props; // may and may not contain "onClick" 🤯
const overrideProps = {};

// How to merge these and keep them **stable**? 👆

The solution is simple: React.SyntheticEvent already contains a name of callback that should be called (see getReactCallbackName() function), this was tested on all minor React versions including 18-rc:

• 16.8 https://codesandbox.io/s/getcallbackname-react-16-8-byowm?file=/src/getCallbackName.spec.tsx
• 16.14 https://codesandbox.io/s/getcallbackname-react-16-14-olzje?file=/src/getCallbackName.spec.tsx
• 17.0 https://codesandbox.io/s/getcallbackname-react-17-69g2n?file=/src/getCallbackName.spec.tsx
• 18.0-rc https://codesandbox.io/s/getcallbackname-react-18-4bs9v?file=/src/getCallbackName.spec.tsx

With that we can have a single handler (actually two as before React 17 we don't know in which phase a callback is called) to handle all callbacks 🎉

This PR implements this solution for MenuTrigger component.