diff --git a/src/Menu.tsx b/src/Menu.tsx index e165674..5a12d2f 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -27,7 +27,9 @@ const MenuListContext = React.createContext({ onKeyDown: () => {} }); -type ChildrenType = React.ReactElement; +// 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 | boolean | null | undefined; export interface MenuListProps extends React.HTMLAttributes { /** A combination of MenuItem, MenuLabel, and MenuDivider children */ diff --git a/src/stories/Menu.stories.tsx b/src/stories/Menu.stories.tsx index 7942443..e078c8e 100644 --- a/src/stories/Menu.stories.tsx +++ b/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) ); + }) + .add("Conditional items", () => { + return ; }); + + const ConditionalMenuList = () => { + const [showItem, setShowItem] = useState(false); + + return ( +
+ + + Stable list item + {showItem && Toggled list item} + +
+ ) + }