feat(ToolbarMenuItem): add menu prop

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Export `robot`, `tabs` and `plugs` icon to Teams theme @codepretty ([#2026](https://github.com/stardust-ui/react/pull/2026))
 - Add CSSinJS debug panel @levithomason @miroslavstastny @mnajdova ([#1974](https://github.com/stardust-ui/react/pull/1974))
+- Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))
 
 ### Fixes
 - Correctly handle RTL in `Alert` component @miroslavstastny ([#2018](https://github.com/stardust-ui/react/pull/2018))

docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts

@@ -0,0 +1,15 @@
+import { ToolbarItem, ToolbarMenuItem } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .click(`.${ToolbarItem.className}:nth-child(1)`)
+        .snapshot('Shows menu')
+        .keys(`.${ToolbarMenuItem.className}:nth-child(1)`, keys.rightArrow)
+        .snapshot('Opens submenu'),
+  ],
+}
+
+export default config

docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx

@@ -0,0 +1,48 @@
+import { createCallbackLogFormatter } from '@stardust-ui/code-sandbox'
+import { useLogKnob } from '@stardust-ui/docs-components'
+import { Toolbar } from '@stardust-ui/react'
+import * as React from 'react'
+
+const ToolbarExampleMenuShorthand = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  const onMenuOpenChange = useLogKnob(
+    'onMenuOpenChange',
+    (e, { menuOpen }) => setMenuOpen(menuOpen),
+    createCallbackLogFormatter(['menuOpen']),
+  )
+
+  return (
+    <Toolbar
+      items={[
+        {
+          key: 'more',
+          icon: 'more',
+          active: menuOpen,
+          menu: {
+            items: [
+              {
+                key: 'play',
+                content: 'Play',
+                icon: 'play',
+                menu: {
+                  items: [
+                    'Play with audio',
+                    { content: 'Play with video', menu: ['HD', 'Full HD'] },
+                  ],
+                },
+              },
+              { key: 'pause', content: 'Pause', icon: 'pause' },
+              { key: 'divider', kind: 'divider' },
+              'Without icon',
+            ],
+          },
+          menuOpen,
+          onMenuOpenChange,
+        },
+      ]}
+    />
+  )
+}
+
+export default ToolbarExampleMenuShorthand

docs/src/examples/components/Toolbar/Content/index.tsx

@@ -37,6 +37,11 @@ const Content = () => (
       description="Toolbar item can open a menu which can contain radio groups."
       examplePath="components/Toolbar/Content/ToolbarExampleMenuRadioGroup"
     />
+    <ComponentExample
+      title="Toolbar can contain a submenu in a menu"
+      description="Toolbar item can open a menu with submenu."
+      examplePath="components/Toolbar/Content/ToolbarExampleMenuWithSubmenu"
+    />
     <ComponentExample
       title="Toolbar can contain custom content"
       description="Toolbar item can contain custom content."

packages/accessibility/src/behaviors/Toolbar/toolbarItemBehavior.ts

@@ -22,6 +22,9 @@ const toolbarItemBehavior: Accessibility<ToolbarItemBehaviorProps> = props => {
   }
   behaviorData.keyActions.wrapper = {
     ...behaviorData.keyActions.wrapper,
+    performWrapperClick: {
+      keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+    },
     closeMenuAndFocusTrigger: {
       keyCombinations:
         props.menu && props.menuOpen

packages/accessibility/src/behaviors/Toolbar/toolbarMenuBehavior.ts

@@ -0,0 +1,42 @@
+import { Accessibility } from '../../types'
+import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import toolbarMenuItemBehavior from './toolbarMenuItemBehavior'
+import * as keyboardKey from 'keyboard-key'
+
+/**
+ * @description
+ * The 'menu' role is used to identify an element that creates a list of common actions or functions that a user can invoke.
+ *
+ * @specification
+ * Adds role='menu'.
+ * Embeds component into FocusZone.
+ * Provides arrow key navigation in vertical direction.
+ * Keyboard navigation is circular.
+ * Component will get focus when mounted.
+ */
+const toolbarMenuBehavior: Accessibility = () => ({
+  attributes: {
+    root: {
+      role: 'menu',
+    },
+  },
+
+  keyActions: {
+    root: {
+      performClick: {
+        keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+      },
+    },
+  },
+  focusZone: {
+    mode: FocusZoneMode.Embed,
+    props: {
+      isCircularNavigation: true,
+      shouldFocusOnMount: true,
+      direction: FocusZoneDirection.vertical,
+    },
+  },
+  childBehaviors: { item: toolbarMenuItemBehavior },
+})
+
+export default toolbarMenuBehavior

packages/accessibility/src/behaviors/Toolbar/toolbarMenuItemBehavior.ts

@@ -0,0 +1,38 @@
+import { Accessibility, AccessibilityAttributes } from '../../types'
+import menuItemBehavior from '../Menu/menuItemBehavior'
+
+/**
+ * @description
+ * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
+ *
+ * @specification
+ * Adds role 'presentation' to 'wrapper' slot.
+ * Adds role 'menuitem' to 'root' slot.
+ * Adds attribute 'tabIndex=0' to 'root' slot.
+ * Adds attribute 'data-is-focusable=false' to 'root' slot if 'disabled' property is true. Sets the attribute to 'true' otherwise.
+ * Adds attribute 'aria-label' based on the property 'aria-label' to 'root' slot.
+ * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'root' slot.
+ * Adds attribute 'aria-describedby' based on the property 'aria-describedby' to 'root' slot.
+ * Adds attribute 'aria-expanded=true' based on the property 'menuOpen' if the component has 'menu' property to 'root' slot.
+ * Adds attribute 'aria-haspopup=true' to 'root' slot if 'menu' property is set.
+ * Adds attribute 'aria-disabled=true' to 'root' slot based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
+ * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
+ * Triggers 'closeMenuAndFocusTrigger' action with 'Escape' on 'wrapper'.
+ * Triggers 'closeAllMenusAndFocusNextParentItem' action with 'ArrowRight' on 'wrapper'.
+ * Triggers 'closeMenu' action with 'ArrowLeft' on 'wrapper'.
+ * Triggers 'openMenu' action with 'ArrowRight' on 'wrapper'.
+ */
+const toolbarMenuItemBehavior: Accessibility<ToolbarMenuItemBehaviorProps> = props => {
+  return menuItemBehavior({ ...props, vertical: true })
+}
+
+export default toolbarMenuItemBehavior
+
+export type ToolbarMenuItemBehaviorProps = {
+  /** Indicated if menu item has submenu. */
+  menu?: boolean | object
+  /** Defines if submenu is opened. */
+  menuOpen?: boolean
+  /** If a menu item can is currently unable to be interacted with. */
+  disabled?: boolean
+} & Pick<AccessibilityAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>

packages/accessibility/src/behaviors/index.ts

@@ -22,6 +22,8 @@ export { default as iconBehavior } from './Icon/iconBehavior'
 export { default as tabBehavior } from './Tab/tabBehavior'
 export { default as tabListBehavior } from './Tab/tabListBehavior'
 export { default as menuAsToolbarBehavior } from './Toolbar/menuAsToolbarBehavior'
+export { default as toolbarMenuBehavior } from './Toolbar/toolbarMenuBehavior'
+export { default as toolbarMenuItemBehavior } from './Toolbar/toolbarMenuItemBehavior'
 export {
   default as menuItemAsToolbarButtonBehavior,
 } from './Toolbar/menuItemAsToolbarButtonBehavior'

packages/accessibility/test/behaviors/behavior-test.tsx

@@ -48,7 +48,9 @@ import {
   chatMessageBehavior,
   toolbarBehavior,
   toolbarItemBehavior,
+  toolbarMenuBehavior,
   toolbarMenuItemCheckboxBehavior,
+  toolbarMenuItemBehavior,
   toolbarMenuItemRadioBehavior,
   toolbarMenuRadioGroupBehavior,
   toolbarRadioGroupBehavior,
@@ -117,6 +119,8 @@ testHelper.addBehavior('chatBehavior', chatBehavior)
 testHelper.addBehavior('chatMessageBehavior', chatMessageBehavior)
 testHelper.addBehavior('toolbarBehavior', toolbarBehavior)
 testHelper.addBehavior('toolbarItemBehavior', toolbarItemBehavior)
+testHelper.addBehavior('toolbarMenuBehavior', toolbarMenuBehavior)
+testHelper.addBehavior('toolbarMenuItemBehavior', toolbarMenuItemBehavior)
 testHelper.addBehavior('toolbarMenuItemCheckboxBehavior', toolbarMenuItemCheckboxBehavior)
 testHelper.addBehavior('toolbarMenuItemRadioBehavior', toolbarMenuItemRadioBehavior)
 testHelper.addBehavior('toolbarMenuRadioGroupBehavior', toolbarMenuRadioGroupBehavior)

packages/react/src/components/Menu/Menu.tsx

@@ -128,7 +128,7 @@ class Menu extends AutoControlledComponent<WithAsProp<MenuProps>, MenuState> {
     underlined: PropTypes.bool,
     vertical: PropTypes.bool,
     submenu: PropTypes.bool,
-    indicator: customPropTypes.itemShorthand,
+    indicator: customPropTypes.itemShorthandWithoutJSX,
   }
 
   static defaultProps = {

packages/react/src/components/Menu/MenuItem.tsx

@@ -182,7 +182,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
     defaultMenuOpen: PropTypes.bool,
     onActiveChanged: PropTypes.func,
     inSubmenu: PropTypes.bool,
-    indicator: customPropTypes.itemShorthand,
+    indicator: customPropTypes.itemShorthandWithoutJSX,
     onMenuOpenChange: PropTypes.func,
   }
 

packages/react/src/components/Toolbar/ToolbarItem.tsx

@@ -161,6 +161,9 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
       event.preventDefault()
       this.handleClick(event)
     },
+    performWrapperClick: event => {
+      this.handleWrapperClick(event)
+    },
     closeMenuAndFocusTrigger: event => {
       this.trySetMenuOpen(false, event)
       if (this.itemRef) {
@@ -173,8 +176,9 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
   }
 
   itemRef = React.createRef<HTMLElement>()
+  menuRef = React.createRef<HTMLElement>()
 
-  handleMenuOverrides = (getRefs: GetRefs, variables) => (predefinedProps: ToolbarItemProps) => ({
+  handleMenuOverrides = (getRefs: GetRefs, variables) => (predefinedProps: ToolbarMenuProps) => ({
     onBlur: (e: React.FocusEvent) => {
       const isInside = _.some(getRefs(), (childRef: NodeRef) => {
         return childRef.current.contains(e.relatedTarget as HTMLElement)
@@ -184,14 +188,15 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
         this.trySetMenuOpen(false, e)
       }
     },
-    onItemClick: (e, itemProps: ToolbarItemProps) => {
+    onItemClick: (e, itemProps: ToolbarMenuItemProps) => {
+      const { popup, menuOpen } = itemProps
       _.invoke(predefinedProps, 'onItemClick', e, itemProps)
-      if (itemProps.popup) {
+      if (popup) {
         return
       }
       // TODO: should we pass toolbarMenuItem to the user callback so he can decide if he wants to close the menu?
-      this.trySetMenuOpen(false, e)
-      if (this.itemRef) {
+      this.trySetMenuOpen(menuOpen, e)
+      if (!menuOpen && this.itemRef) {
         this.itemRef.current.focus()
       }
     },
@@ -221,20 +226,22 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
         {(getRefs, nestingRef) => (
           <>
             <Ref innerRef={nestingRef}>
-              <Popper
-                align="start"
-                position="above"
-                modifiers={{
-                  preventOverflow: {
-                    escapeWithReference: false, // escapeWithReference breaks positioning of ToolbarMenu in overflow mode because Popper components sets modifiers on scrollable container
-                  },
-                }}
-                targetRef={this.itemRef}
-              >
-                {ToolbarMenu.create(menu, {
-                  overrideProps: this.handleMenuOverrides(getRefs, variables),
-                })}
-              </Popper>
+              <Ref innerRef={this.menuRef}>
+                <Popper
+                  align="start"
+                  position="above"
+                  modifiers={{
+                    preventOverflow: {
+                      escapeWithReference: false, // escapeWithReference breaks positioning of ToolbarMenu in overflow mode because Popper components sets modifiers on scrollable container
+                    },
+                  }}
+                  targetRef={this.itemRef}
+                >
+                  {ToolbarMenu.create(menu, {
+                    overrideProps: this.handleMenuOverrides(getRefs, variables),
+                  })}
+                </Popper>
+              </Ref>
             </Ref>
             <EventListener
               listener={this.handleOutsideClick(getRefs)}
@@ -275,8 +282,12 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
             ...accessibility.attributes.wrapper,
             ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.wrapper, wrapper),
           },
-          overrideProps: () => ({
+          overrideProps: predefinedProps => ({
             children: contentElement,
+            onClick: e => {
+              this.handleWrapperClick(e)
+              _.invoke(predefinedProps, 'onClick', e)
+            },
           }),
         })
       }
@@ -310,6 +321,18 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
     _.invoke(this.props, 'onClick', e, this.props)
   }
 
+  handleWrapperClick = e => {
+    const { menu } = this.props
+    if (menu) {
+      if (doesNodeContainClick(this.menuRef.current, e, this.context.target)) {
+        this.trySetMenuOpen(false, e)
+        if (this.itemRef) {
+          this.itemRef.current.focus()
+        }
+      }
+    }
+  }
+
   handleOutsideClick = (getRefs: GetRefs) => (e: MouseEvent) => {
     const isItemClick = doesNodeContainClick(this.itemRef.current, e, this.context.target)
     const isNestedClick = _.some(getRefs(), (childRef: NodeRef) => {