ActionMenu.Overlay should accept false and null as children

[jdrush89]

Describe the bug ActionMenu.Overlay does not accept false or null as child values which makes it cumbersome to have conditional children rendering within it.

Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.

To Reproduce Steps to reproduce the behavior:

1. Take the following example: function testComponent(showSearch: boolean) { return ( <ActionMenu> <ActionMenu.Button>Menu</ActionMenu.Button>

   <ActionMenu.Overlay> {showSearch && <TextInput />} <ActionList> <ActionList.Item>Copy link</ActionList.Item> <ActionList.Item>Edit file</ActionList.Item> </ActionList> </ActionMenu.Overlay> </ActionMenu> ) }

2. See the following error Type 'false | Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | (string & ReactElement<any, string | JSXElementConstructor<any>>)'. Type 'boolean' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | (string & ReactElement<any, string | JSXElementConstructor<any>>)'.ts(2322)

Expected behavior The Overlay should support a way of rendering conditional elements that doesn't involve rendering an empty React fragment.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: iOS
• Browser chrome
• Version 97.0.4692.71

Additional context null should be supported in addition to false.

[lesliecdubs]

@jdrush89 hi! Sid put up a PR for this here: https://github.com/primer/react/pull/2188. Could you help with testing this out in Memex before we move forward?