@workday/canvas-kit-docs 5.3.0-next.3 → 5.3.1

package/LICENSE

@@ -43,7 +43,7 @@ While redistributing the Work or Derivative Works thereof, You may choose to off
 
 END OF TERMS AND CONDITIONS
 
-©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
 
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

package/dist/commonjs/lib/specs.js

@@ -1253,7 +1253,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Preview/Menu/React, Control Button] example is rendered",
+            "name": "given the [Preview/Menu/React, Basic] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -2471,21 +2471,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2505,21 +2505,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2539,21 +2539,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2573,7 +2573,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "it",
-                "name": "the \"Gluten Free (Sold Out)\" radio button should be disabled"
+                "name": "the \"Gluten free (sold out)\" radio button should be disabled"
               }
             ]
           }
@@ -5754,6 +5754,22 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Testing/React/Popups/Tooltip, Overflow] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the = button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              }
+            ]
           }
         ]
       }

package/dist/es6/lib/specs.js

@@ -1253,7 +1253,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Preview/Menu/React, Control Button] example is rendered",
+            "name": "given the [Preview/Menu/React, Basic] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -2471,21 +2471,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2505,21 +2505,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2539,21 +2539,21 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Gluten Free\" radio button is clicked",
+                "name": "when the \"Gluten free\" radio button is clicked",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should be checked"
+                    "name": "the \"Gluten free\" radio button should be checked"
                   }
                 ]
               },
               {
                 "type": "describe",
-                "name": "when clicking the \"Gluten Free\" radio button and then clicking the \"Thin\" radio button",
+                "name": "when clicking the \"Gluten free\" radio button and then clicking the \"Thin\" radio button",
                 "children": [
                   {
                     "type": "it",
-                    "name": "the \"Gluten Free\" radio button should not be checked"
+                    "name": "the \"Gluten free\" radio button should not be checked"
                   },
                   {
                     "type": "it",
@@ -2573,7 +2573,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "it",
-                "name": "the \"Gluten Free (Sold Out)\" radio button should be disabled"
+                "name": "the \"Gluten free (sold out)\" radio button should be disabled"
               }
             ]
           }
@@ -5754,6 +5754,22 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Testing/React/Popups/Tooltip, Overflow] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the = button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              }
+            ]
           }
         ]
       }

package/dist/mdx/CONTRIBUTING.mdx

@@ -5,42 +5,37 @@ part of the community. Before you contribute, please take a moment and look thro
 sections:
 
 - [Code of Conduct](#code-of-conduct)
-- [Contributor License Agreement](#contributor-license-agreement)
-- [Contributing Guidelines](#contributing-guidelines)
-  - [How to Contribute](#how-to-contribute)
+- [How to Contribute](#how-to-contribute)
+  - [Communicate on Issues](#communicate-on-issues)
   - [Git Guidelines](#git-guidelines)
-- [Getting Started](#getting-started)
+    - [Branches](#branches)
+    - [Commit Message Format](#commit-message-format)
+    - [Commit Descriptions](#commit-descriptions)
+    - [Pull Requests](#pull-requests)
+  - [Developer Experience](#developer-experience)
+    - [Yarn and Workspaces](#yarn-and-workspaces)
+    - [Storybook](#storybook)
+    - [Testing](#testing)
+    - [Automation on Commit](#automation-on-commit)
+    - [Releases](#releases)
+- [Getting Started Developing](#getting-started-developing)
   - [Creating a Module](#creating-a-module)
   - [Exporting a Module](#exporting-a-module)
   - [Building Modules](#building-modules)
   - [Testing Modules](#testing-modules)
   - [Code Style Guide](#code-style-guide)
-  - [Canvas Kit Labs & Preview](#canvas-kit-labs-preview)
+  - [Canvas Kit Labs & Preview](#canvas-kit-labs--preview)
   - [Editors](#editors)
+- [Contributor License Agreement](#contributor-license-agreement)
 
 ## Code of Conduct
 
 At Workday, we are committed to a culture of integrity, innovation, and fun. That culture extends to
 the community that we are building here through Canvas. By participating in it, you are expected to
-uphold this [code of conduct](https://github.com/Workday/canvas-kit/tree/master/CODE_OF_CONDUCT.md)
-and agree to our CLA.
+uphold our [Code of Conduct](https://github.com/Workday/canvas-kit/blob/master/CODE_OF_CONDUCT.md)
+and agree to our [Contributor License Agreement](#contributor-license-agreement).
 
-## Contributor License Agreement
-
-Each Contributor (“You”) represents that such You are legally entitled to submit any Contributions
-in accordance with these terms and by posting a Contribution, you represent that each of Your
-Contribution is Your original creation.
-
-You are not expected to provide support for Your Contributions, except to the extent You desire to
-provide support. You may provide support for free, for a fee, or not at all. Unless required by
-applicable law or agreed to in writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any
-warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR
-PURPOSE.
-
-## Contributing Guidelines
-
-### How to Contribute
+## How to Contribute
 
 **Don't hesitate to contribute!** Canvas Kit thrives on open discussion and contribution by anyone
 in the Workday community. Contribution doesn't have to be code-based. Anyone can suggest changes to
@@ -50,38 +45,25 @@ If you are contributing code, please take a look at the following sections to fa
 with how the Canvas Kit repo is organized and run. This will help streamline the pull request
 process. If you have any questions, please reach out!
 
-If your contribution is visual or UI-based, please ensure you consult with a designer so the
-contribution can be evaluated as an end-to-end process.
-
-#### Automation on Commit
-
-Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your staged code through
-[Prettier](https://prettier.io) and [eslint](https://eslint.org).
+If your contribution is visual or UI-based, please ensure you consult with a designer or request a
+maintainer's help so the contribution can be evaluated as an end-to-end process.
 
-#### Storybook
+### Communicate on Issues
 
-Canvas Kit uses [Storybook](https://storybook.js.org/) for the component development environment.
-
-#### Yarn and Workspaces
-
-Canvas Kit uses Yarn for package management and takes advantage of its support for
-[Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to connect all of its different modules
-within a single repository.
-
-#### Testing
-
-Canvas Kit uses [Jest](https://jestjs.io/) and
-[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
-our React components. For more information about our testing strategy and how we write unit tests,
-visit our [Testing Readme](/getting-started/for-developers/resources/testing/)
-
-Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
-[Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
-information about how to write Cypress tests, visit
-[Writing Cypress Tests](https://github.com/Workday/canvas-kit/tree/master/cypress/README.md)
+- Create or identify [an issue](https://github.com/Workday/canvas-kit/issues) to work on
+- New contributors are recommended to start with a
+  [good first issue](https://github.com/Workday/canvas-kit/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+- Ask our team if the issue is relevant or has attention from other developers
+- Communicate if you'd like to work on the issue
+- Ask questions! You have our support, and you will always need more information than what is in the
+  issue.
 
 ### Git Guidelines
 
+All development should happen on a personal fork (including maintainers). Fork the
+[repo](https://github.com/Workday/canvas-kit) to your personal account, and create a feature branch
+for each contribution.
+
 #### Branches
 
 - Create branches for each feature you develop
@@ -127,18 +109,50 @@ fix: Add missing static class variable to IconButton and Avatar
 
 #### Pull Requests
 
-- All development should happen on a personal fork (including maintainers). This allows us to keep
-  the project tree clean and easy to follow, while ensuring everyone has the same developer
-  experience.
-- Project maintainers are able to push commits to fork PRs, but other contributors will need to open
-  PRs to the personal fork to collaborate with others on a feature.
+- We support creating a Draft Pull Request as soon as you have figured out a working implementation,
+  for early feedback. It can later be marked Ready for Review.
+- Open a pull request from a feature branch on your fork against the master branch on the main
+  repository
 - When a pull request passes all checks and reviews, a core maintainer merges via Squash and Merge
-  with a link back to the PR.
+  with a link back to the PR
 - The branch will automatically be deleted on merge, but its commits and the branch reference are
-  still available via the PR.
+  still available via the PR
+- When multiple developers collaborate on a PR, project maintainers are able to push commits to fork
+  PRs, but other contributors will need to open their own PRs against the personal fork and the
+  appropriate feature branch.
 - If you have questions about the above policies, please ask :)
 
-#### Releases
+## Developer Experience
+
+### Storybook
+
+Canvas Kit uses [Storybook](https://storybook.js.org/) for the component development environment.
+
+### Yarn and Workspaces
+
+Canvas Kit uses Yarn for package management and takes advantage of its support for
+[Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to connect all of its different modules
+within a single repository. It is recommended but not required over `npm`, unless you are updating
+dependencies, then it's required.
+
+### Testing
+
+Canvas Kit uses [Jest](https://jestjs.io/) and
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
+our React components. For more information about our testing strategy and how we write unit tests,
+visit our [Testing Readme](/getting-started/for-developers/resources/testing/).
+
+Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
+[Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
+information about how to write Cypress tests, visit
+[Writing Cypress Tests](https://github.com/Workday/canvas-kit/tree/master/cypress/README.md).
+
+### Automation on Commit
+
+Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your staged code through
+[Prettier](https://prettier.io) and [eslint](https://eslint.org).
+
+### Releases
 
 - Releases are prepared by updating package versions with `lerna version`, and updating the
   [changelog](./CHANGELOG.md)
@@ -148,9 +162,9 @@ fix: Add missing static class variable to IconButton and Avatar
 - The GitHub release automatically tags master with the new version, and deploys the new version to
   NPM.
 
-## Getting Started
+## Getting Started Developing
 
-1.  Clone the repository and run `yarn`
+1.  Clone the repository from your fork and run `yarn`
 2.  Run `yarn start` to start [Storybook](https://storybook.js.org/)
 3.  Visit [http://localhost:9001/](http://localhost:9001/)
 
@@ -220,8 +234,8 @@ Canvas Kit Preview is for beta components.
 
 ### Editors
 
-VSCode is our preferred IDE. Install the Prettier and ESLint plugins for quicker and easier
-formatting.
+Visual Studio Code is our preferred IDE. Install the Prettier and ESLint plugins for quicker and
+easier formatting.
 
 #### Visual Studio Code
 
@@ -230,4 +244,17 @@ Install [prettier-vscode](https://github.com/prettier/prettier-vscode) and
 
 Consider adding the following options:
 
-- [Format on save](https://github.com/prettier/prettier-vscode#format-on-save)
+- [Format on save](https://github.com/prettier/prettier-vscode#format-on-save)
+
+## Contributor License Agreement
+
+Each Contributor (“You”) represents that such You are legally entitled to submit any Contributions
+in accordance with these terms and by posting a Contribution, you represent that each of Your
+Contribution is Your original creation.
+
+You are not expected to provide support for Your Contributions, except to the extent You desire to
+provide support. You may provide support for free, for a fee, or not at all. Unless required by
+applicable law or agreed to in writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any
+warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR
+PURPOSE.

package/dist/mdx/preview-react/breadcrumbs/Breadcrumbs.mdx

@@ -46,7 +46,7 @@ you'll need to add `buttonAriaLabel` to `Breadcrumbs.CollapsibleList`.
 
 <ExampleCodeBlock code={CollapsibleList} />
 
-### Right-to-Left Example
+### Right-to-Left (RTL)
 
 Breadcrumbs has bidirectional support out of the box. That means outside of setting the content
 direction in your application's Canvas theme, you don't need to do anything else to make it work.

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -3,7 +3,6 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
-import ControlButton from './examples/ControlButton';
 import CustomMenuItem from './examples/CustomMenuItem';
 import Icons from './examples/Icons';
 import ManyItems from './examples/ManyItems';
@@ -11,7 +10,7 @@ import ManyItems from './examples/ManyItems';
 
 # Canvas Kit Menu
 
-Menus display a list of options when triggered by an action or UI element like an icon or button.
+`Menu` displays a list of options when triggered by an action or UI element like an icon or button.
 
 [> Workday Design Reference](https://design.workday.com/components/popups/menus)
 
@@ -25,8 +24,15 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Basic Example
 
+`Menu` is typically triggered by an action such as pressing a button. Here's an example of how you
+might implement that behavior using a [`Popup`](/components/popups/popup/).
+
 <ExampleCodeBlock code={Basic} />
 
+`Menu` will automatically assign focus to itself when it appears provided you set the `isOpen` prop
+correctly, so you do **not** need to use the `useInitialFocus` `Popup` hook. You **will**, however,
+need to use `useReturnFocus` to return focus back to the triggering button after closing the `Menu`.
+
 `Menu` follows the
 [Actions Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
@@ -42,10 +48,8 @@ actions.
 | `End`              | Moves focus to the last menu item                                                                                                                |
 | `A-Z / a-z`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
 
-If you're using a menu button, you will need to add your own keyboard shortcuts, aria attributes,
-and focus management. See the example below.
-
-<ExampleCodeBlock code={ControlButton} />
+Note that although `Menu` includes support for keyboard shortcuts for the menu itself, you'll need
+to add your own keyboard handling and aria attributes to the triggering button.
 
 ### Context Menu
 
@@ -59,7 +63,6 @@ custom menu items, be sure to use semantic `<li>` elements with the following at
 
 - `role="menuitem"`
 - `tabindex={-1}`
-- `id`s following this pattern: `${MenuId}-${index}`
 
 Below is an example:
 
@@ -79,19 +82,22 @@ Below is an example:
 
 #### Usage
 
-`Menu` renders a styled `<ul>` element with a role of `menu` and follows the
+`Menu` renders a styled `<ul role="menu">` element within a [`Card`](/components/containers/card/)
+and follows the
 [Active Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`.
 
 #### Props
 
+Undocumented props are spread to the underlying `<ul>` element.
+
 <ArgsTable of={Menu} />
 
 ### MenuItem
 
 #### Usage
 
-`MenuItem` renders a `<li>` element with the correct attributes to ensure it is accessible. If you
+`MenuItem` renders an `<li>` element with the correct attributes to ensure it is accessible. If you
 choose to implement your own custom menu items, be sure to use semantic `<li>` elements with the
 following attributes:
 
@@ -101,6 +107,8 @@ following attributes:
 
 #### Props
 
+Undocumented props are spread to the underlying `<li>` element.
+
 <ArgsTable of={MenuItem} />
 
 ## Specifications

package/dist/mdx/preview-react/menu/examples/Basic.tsx

@@ -1,17 +1,72 @@
 import React from 'react';
-
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  usePopupModel,
+  useAlwaysCloseOnOutsideClick,
+  useReturnFocus,
+  useCloseOnEscape,
+} from '@workday/canvas-kit-react/popup';
+
+const menuId = 'basic-menu';
 
 export default () => {
+  const model = usePopupModel();
+
+  useAlwaysCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useReturnFocus(model);
+
+  const isOpen = model.state.visibility !== 'hidden';
+
+  const handleButtonKeyDown = (event: React.KeyboardEvent) => {
+    let isShortcut = false;
+    if (event.key === `Spacebar` || event.key === ` ` || event.key === `Enter`) {
+      isShortcut = true;
+      if (isOpen) {
+        model.events.hide();
+      } else {
+        model.events.show();
+      }
+    } else if (event.key === `ArrowDown` || event.key === `ArrowUp`) {
+      isShortcut = true;
+      model.events.show();
+    }
+
+    if (isShortcut) {
+      // Prevent ArrowDown and ArrowUp keys from scrolling the entire page
+      event.preventDefault();
+    }
+  };
+
   return (
-    <Menu title="Menu Title">
-      <MenuItem>First Item</MenuItem>
-      <MenuItem>Second Item (with a really really really long label)</MenuItem>
-      <MenuItem isDisabled>Third Item (disabled)</MenuItem>
-      <MenuItem>
-        Fourth Item (<b>with markup</b>)
-      </MenuItem>
-      <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
-    </Menu>
+    <Popup model={model}>
+      <Popup.Target
+        as={SecondaryButton}
+        onKeyDown={handleButtonKeyDown}
+        aria-expanded={isOpen}
+        aria-haspopup={true}
+        aria-controls={isOpen ? menuId : undefined}
+      >
+        Open Menu
+      </Popup.Target>
+      <Popup.Popper placement="bottom-start">
+        {/*
+          isOpen must be set for focus to be properly assigned to the Menu;
+          onClose must be set in order to the Menu to close properly after
+          selecting a MenuItem
+        */}
+        <Menu id={menuId} isOpen={isOpen} onClose={model.events.hide}>
+          <MenuItem>First Item</MenuItem>
+          <MenuItem>Second Item (with a really really really long label)</MenuItem>
+          <MenuItem isDisabled>Third Item (disabled)</MenuItem>
+          <MenuItem>
+            Fourth Item (<b>with markup</b>)
+          </MenuItem>
+          <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };