Update MenuList to accept boolean, null and undefined as its children

src/Menu.tsx

@@ -27,7 +27,9 @@ const MenuListContext = React.createContext<MenuListContextType>({
   onKeyDown: () => {}
 });
 
-type ChildrenType = React.ReactElement<MenuItemProps>;
+// This type definition including boolean, null and undefined is based on
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/24f1d0c82da2d898acd03fbb3e692eba3c431f82/types/react/index.d.ts#L202
+type ChildrenType = React.ReactElement<MenuItemProps> | boolean | null | undefined;
 
 export interface MenuListProps extends React.HTMLAttributes<HTMLDivElement> {
   /** A combination of MenuItem, MenuLabel, and MenuDivider children */

src/stories/Menu.stories.tsx

@@ -1,10 +1,9 @@
 /** @jsx jsx */
+import { useState } from 'react';
 import { jsx } from "@emotion/core";
-import * as React from "react";
 import { MenuList, MenuItem, MenuDivider, MenuLabel } from "../Menu";
+import { Button } from "../Button";
 import { storiesOf } from "@storybook/react";
-import { ToggleDarkMode } from "./ToggleDarkMode";
-import { Text } from "../Text";
 import { IconAirplay, IconUser, IconAlertCircle, IconDelete } from "../Icons";
 
 export const MenuStories = storiesOf("MenuList", module)
@@ -47,4 +46,21 @@ export const MenuStories = storiesOf("MenuList", module)
         </MenuItem>
       </MenuList>
     );
+  })
+  .add("Conditional items", () => {
+    return <ConditionalMenuList />;
   });
+
+  const ConditionalMenuList = () => {
+    const [showItem, setShowItem] = useState(false);
+
+    return (
+      <div>
+        <Button onClick={() => setShowItem(!showItem)}>Toggle list item appearance</Button>
+        <MenuList css={{ maxWidth: "340px" }}>
+          <MenuItem>Stable list item</MenuItem>
+          {showItem && <MenuItem>Toggled list item</MenuItem>}
+        </MenuList>
+      </div>
+    )
+  }