feat(menu): Submenu (#539)

* feat(menuItem: add menu prop)

* Only one submenu open at a time

* Fix bug: submenu noe closes on clicking a menuItem with no submenu

* Code cleanup

* Remove the activeIndex prop passed to the menuItem

* Remove Popup and implement submenu without it

* initial keyboard support

* left/right arrow handling

* simplify keyboard handlers

* -fixed import in the MenuItem

* -added submenuIndicator
-small fixes in the styles and the way the submenu is generated

* -clicking on leaf element should close the submenus (the same should be done for enter/space)
-applied consistent (left-right) navigation for horizontal menu and (up-down) navigation for vertical menu

* -implemented outside click to close all menus
-implemented enter key on leaf menu item to close the menu

* -fixed import

* -refactored MenuItem handlers - fixed issues
-removed onClick handler for the Menu (not necessary for now)
-added onKeyDown in the creation of the MenuItem in the Menu component for handling the action prop

* -added setActiveIndex callback and removed onKeyDown in the creation of MenuItems in the Menu component

* -right arrow key is closing the submenus and goes to the next element if the menu is horizontal, or is focusing the first MenuItem if it is vertical

* -handled left arrow key

* -changed ref
-focus trap wip

* -added Ref component instead of using the itemRef on the ElementType
-removed subscription for focus

* -fixes

* -moved ref //TODO: figure out tests failing

* -close menu on outside focus

* -improved comments

* -fixed escape key not focusing the active element
-changed parentRef to inSubmenu boolean

* -fixing key problems
-added dependency for generating id

* -refactored submenuRef element

* fix broken tests

* -added comments in the tests
-changed the submenuDomElement so submenuRef

* -renamed inSubmenu to submenu prop in the Menu

* -fixed with the auto-controlled prop in the Menu

* -added state interface in the Menu
-improved menu variables' names

* -fixed variables in examples

* -remove state initialization in the MenuItem component

* -added new handler for escape
-changed submenu examples titles

* -refactored conditions using doesNodeContainClick

* -renamed submenu* props to menu in the MenuItem component
-changed setActiveIndex with onActiveChanged
-introduced different styles for the hovering vs active elements

* -improved example
-fixed issue with the condition for the active prop

* -exported MenuState
-added correct typings to the menuStyles

* -fixed underlined active + hovered style

* -fixed border corner clipped by adding custom styles for the first child menu items and the last child menu items in vertical menu

* -addressed comments on PR

* chore: prepare release 0.15.0 [ci skip]

* 0.15.0

* fix(Prototype): Fix Popover prototype after breaking changes (#623)

* chore: cache results of vulnerability scans (#621)

* implement caching strategy

* adjust file name of scan marker

* add yarn lock hash to marker file name

* add change to build config

* fix dir name in build config

* improve caching strategy

* just restore cache

* temporary remove lint and tests

* try

* fix caching strategy

* try

* try

* try

* try epoch

* create file on scan

* return lint and test steps

* introduce comment for the caching approach taken

* remove unnecessary function

* simplify expression for marker file name

* feat(text): color prop (#597)

* feat(text): color prop

* addressed comments

* changelog

* amended changelog

* made text color override other props that change color

* feat(header): header and header description color prop (#628)

* feat(header): header and header description color prop

* changelog

* fixed examples

* addressed PR comments

* fix(Popup): allow to 'detach' from trigger and RTL adjustments (#612)

* introduce offset prop

* correct description of supported values

* update changelog

* introduce fix

* ensure RTL is properly applied to complex offset expressions

* rename method to make logic more expressive

* add unit tests

* remove unnecessary grid props from offset example

* update changelog

* fix(SelectableList): Items in list should be selectable (#566)

* Reflect which item is selected in list

* Make list derived from autocontrolled component

* small fix

* Update ListExampleSelection.tsx

* Update ListExampleSelection.shorthand.tsx

* Small improvement

* Rename *ItemIndex -> *Index

* Names refactoring

* Minor improvements

* update changelog

* Add onSelectedIndexChange

* Add some tests

* Small improvements afer CR

* Small improvements afer CR

* Small improvements afer CR

* create focus handler when List is constructed

* fix changelog

* changelog

* docs(Examples): allow to use TS in examples (#617)

* docs(Examples): allow to use TS in examples

* add jsdoc

* fix typo

* rename file

* add comment

* `createExample` to `createExampleSourceCode`

* rework with `path.relative()`

* remove JSON files on remove tsx

* create getRelativePathToSource function

* -updated changelog

* -updated changelog

* -updated changelog with breaking changes
-removed TODO comment

* -fixed imports in examples

Author: jurokapsiar

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- renamed Teams theme menu variables the contains props names as prefixes @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
+
 ### Fixes
 - Ensure `Popup` properly flips values of `offset` prop in RTL @kuzhelov ([#612](https://github.com/stardust-ui/react/pull/612))
 - Fix `List` - items should be selectable @sophieH29 ([#566](https://github.com/stardust-ui/react/pull/566))
@@ -25,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))
 - Add `color` prop to `Header` and `HeaderDescription` components @Bugaa92 ([#628](https://github.com/stardust-ui/react/pull/628))
 - Add and export compose icons in Teams theme @joheredi ([#639](https://github.com/stardust-ui/react/pull/639))
+- Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
 
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)

docs/src/components/CodeSnippet.tsx

@@ -1,4 +1,3 @@
-import * as _ from 'lodash'
 import * as React from 'react'
 
 import formatCode from '../utils/formatCode'

docs/src/examples/components/Menu/Types/MenuExampleVerticalWithSubmenu.shorthand.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item1' }, { key: '2', content: 'item2' }] },
+        },
+      ],
+    },
+  },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleVerticalWithSubmenu = () => <Menu defaultActiveIndex={0} vertical items={items} />
+
+export default MenuExampleVerticalWithSubmenu

docs/src/examples/components/Menu/Types/MenuExampleWithSubmenu.shorthand.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+        },
+        {
+          key: '3',
+          content: 'item3',
+          menu: { items: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }] },
+        },
+      ],
+    },
+  },
+  {
+    key: 'review',
+    content: 'Reviews',
+    menu: {
+      items: [
+        { key: '1', content: 'item1' },
+        {
+          key: '2',
+          content: 'item2',
+          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+        },
+      ],
+    },
+  },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleWithSubMenu = () => <Menu defaultActiveIndex={0} items={items} />
+
+export default MenuExampleWithSubMenu

docs/src/examples/components/Menu/Types/index.tsx

@@ -19,6 +19,12 @@ const Types = () => (
       description="A vertical menu displays elements vertically."
       examplePath="components/Menu/Types/MenuExampleVertical"
     />
+    <ComponentExample
+      title="Menu with submenus"
+      description="A menu can have submenus."
+      examplePath="components/Menu/Types/MenuExampleWithSubmenu"
+    />
+    <ComponentExample examplePath="components/Menu/Types/MenuExampleVerticalWithSubmenu" />
   </ExampleSection>
 )
 

docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx

@@ -14,9 +14,9 @@ const MenuExampleIconOnlyPrimaryInverted = () => (
     items={items}
     primary
     variables={siteVars => ({
-      defaultColor: siteVars.gray06,
-      defaultBackgroundColor: siteVars.brand,
-      typePrimaryActiveBorderColor: siteVars.white,
+      color: siteVars.gray06,
+      backgroundColor: siteVars.brand,
+      primaryActiveBorderColor: siteVars.white,
     })}
   />
 )

src/components/Menu/Menu.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import {
   AutoControlledComponent,
   childrenExist,
+  createShorthandFactory,
   customPropTypes,
   UIComponentProps,
   ChildrenComponentProps,
@@ -60,12 +61,19 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
 
   /** A vertical menu displays elements vertically. */
   vertical?: boolean
+
+  /** Indicates whether the menu is submenu. */
+  submenu?: boolean
+}
+
+export interface MenuState {
+  activeIndex?: number | string
 }
 
 /**
  * A menu displays grouped navigation actions.
  */
-class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
+class Menu extends AutoControlledComponent<Extendable<MenuProps>, MenuState> {
   static displayName = 'Menu'
 
   static className = 'ui-menu'
@@ -88,6 +96,7 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
     secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
     underlined: PropTypes.bool,
     vertical: PropTypes.bool,
+    submenu: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -107,6 +116,15 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
 
       _.invoke(predefinedProps, 'onClick', e, itemProps)
     },
+    onActiveChanged: (e, props) => {
+      const { index, active } = props
+      if (active) {
+        this.trySetState({ activeIndex: index })
+      } else if (this.state.activeIndex === index) {
+        this.trySetState({ activeIndex: null })
+      }
+      _.invoke(predefinedProps, 'onActiveChanged', e, props)
+    },
   })
 
   renderItems = (variables: ComponentVariablesObject) => {
@@ -119,11 +137,14 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
       secondary,
       underlined,
       vertical,
+      submenu,
     } = this.props
     const { activeIndex } = this.state
 
-    return _.map(items, (item, index) =>
-      MenuItem.create(item, {
+    return _.map(items, (item, index) => {
+      const active =
+        (typeof activeIndex === 'string' ? parseInt(activeIndex, 10) : activeIndex) === index
+      return MenuItem.create(item, {
         defaultProps: {
           iconOnly,
           pills,
@@ -134,11 +155,12 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
           variables,
           vertical,
           index,
-          active: parseInt(activeIndex, 10) === index,
+          active,
+          inSubmenu: submenu,
         },
         overrideProps: this.handleItemOverrides,
-      }),
-    )
+      })
+    })
   }
 
   renderComponent({ ElementType, classes, accessibility, variables, rest }) {
@@ -151,4 +173,6 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
   }
 }
 
+Menu.create = createShorthandFactory(Menu, 'items')
+
 export default Menu