feat(react): support react 17

[anastasialanz]

closes #1473
closes #1574
closes #1087
closes #830

This PR does a few things:

• For the OptionsMenu and Popover component, when a user opens them, clicking on the trigger buttons will now close them instead of triggering the click outside close() method
• Converts the OptionsMenu components to function components
• Updates the TopBar docs so that the OptionsMenu now has a trigger to reference

Verification Steps

• Go to the OptionsMenu component
  • Open the OptionsMenu
  • Clicking on the trigger for the OptionsMenu will close the OptionsMenu
  • Verify that the click outside handler works
• Go to the Popover component
  • Open the Popover
  • Clicking on the trigger for the Popover will close the Popover
  • Verify that the click outside handler works
• Go to the TopBar with menu component
  • Open the OptionsMenu inside the TopBar
  • Clicking on the trigger for the OptionsMenu will close the OptionsMenu
  • Verify that the click outside handler works
• Go to the Modal component
  • Verify that the Modal component opens and closes with the trigger

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1680.d15792l1n26ww3.amplifyapp.com

[scurker]

Everything looks pretty good, but I do think we need to address the breaking change here.

[scurker]

Code changes LGTM!

I did a check with everything in the deploy preview and it looks like we've resolved all of the issues! There does appear to be 2 tests failing which we need to determine why they're failing before this can be merged, but otherwise great work!

[anastasialanz]

Code changes LGTM!

I did a check with everything in the deploy preview and it looks like we've resolved all of the issues! There does appear to be 2 tests failing which we need to determine why they're failing before this can be merged, but otherwise great work!

I updated the onClose test that failed. The new code in the useEffect for OptionsMenuList was returning early and not closing because the triggerElement was the body element which contains the target. I needed to modify the test to add a trigger, focus on it, and then rerender with the OptionsMenuList open which mimics what you would see when used within another component.

[scurker]

🎈 🎉 🎆