From aafc5d3897f30766015a2dad2573ea9b5fa754b5 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Tue, 1 May 2018 18:03:33 -0700
Subject: [PATCH 1/8] Add open and dismiss functions that can be referenced by
 a contextual menu item

---
 .../ContextualMenu/ContextualMenu.tsx         |  31 +++-
 .../ContextualMenu/ContextualMenu.types.ts    |   9 +-
 .../ContextualMenu/ContextualMenuItem.tsx     | 151 ++++++++++--------
 .../ContextualMenuItem.types.ts               |  48 +++++-
 .../ContextualMenuSplitButton.tsx             |  20 ++-
 .../ContextualMenuSplitButton.types.ts        |  21 ++-
 .../ContextualMenuItem.test.tsx.snap          |   8 +-
 7 files changed, 211 insertions(+), 77 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 29e3e65a1b4a12..2630493acd45ca 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -24,7 +24,8 @@ import {
   getFirstFocusable,
   getLastFocusable,
   css,
-  shouldWrapFocus
+  shouldWrapFocus,
+  createRef
 } from '../../Utilities';
 import { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
@@ -499,6 +500,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     const itemHasSubmenu = hasSubmenu(item);
     const nativeProps = getNativeProps(item, anchorProperties);
     const disabled = isItemDisabled(item);
+    const anchorRef = createRef<HTMLAnchorElement>();
+    const openSubMenu = this._onItemSubMenuExpand.bind(this);
+    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
+    const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
       <div>
@@ -511,6 +516,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
             <a
               { ...nativeProps }
               { ...keytipAttributes }
+              ref={ anchorRef }
               href={ item.href }
               target={ item.target }
               rel={ anchorRel }
@@ -534,6 +540,11 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                 index={ index }
                 onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
                 hasIcons={ hasIcons }
+                componentRef={ item.renderItemComponentRef }
+                openSubMenu={ openSubMenu }
+                dismissSubMenu={ dismissSubMenu }
+                dismissMenu={ dismissMenu }
+                subMenuTargetRef={ anchorRef }
               />
             </a>
           ) }
@@ -599,6 +610,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         hasMenu: true
       };
     }
+    const btnRef = createRef<HTMLButtonElement>();
+    const openSubMenu = this._onItemSubMenuExpand.bind(this);
+    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
+    const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
       <KeytipData
@@ -608,6 +623,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       >
         { (keytipAttributes: any): JSX.Element => (
           <button
+            ref={ btnRef }
             { ...buttonNativeProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
             { ...itemButtonProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
             { ...keytipAttributes }
@@ -618,6 +634,11 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
               index={ index }
               onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
               hasIcons={ hasIcons }
+              componentRef={ item.renderItemComponentRef }
+              openSubMenu={ openSubMenu }
+              dismissSubMenu={ dismissSubMenu }
+              dismissMenu={ dismissMenu }
+              subMenuTargetRef={ btnRef }
             />
           </button>
         ) }
@@ -635,6 +656,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     hasIcons?: boolean): JSX.Element {
     const { contextualMenuItemAs } = this.props;
 
+    const openSubMenu = this._onItemSubMenuExpand.bind(this);
+    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
+    const dismissMenu = this.dismiss.bind(this, undefined);
+
     return (
       <ContextualMenuSplitButton
         item={ item }
@@ -653,6 +678,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onItemClick={ this._onItemClick }
         onItemClickBase={ this._onItemClickBase }
         onItemKeyDown={ this._onItemKeyDown }
+        openSubMenu={ openSubMenu }
+        dismissSubMenu={ dismissSubMenu }
+        dismissMenu={ dismissMenu }
+        componentRef={ item.renderItemComponentRef }
       />
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index b9c260cb25661d..55262cbfb032bc 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -15,7 +15,7 @@ import { IWithResponsiveModeState } from '../../utilities/decorators/withRespons
 import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';
 export { DirectionalHint } from '../../common/DirectionalHint';
 import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';
-import { IContextualMenuItemProps } from './ContextualMenuItem.types';
+import { IContextualMenuItemProps, IContextualMenuRenderItem } from './ContextualMenuItem.types';
 import { IKeytipProps } from '../../Keytip';
 
 export enum ContextualMenuItemType {
@@ -462,6 +462,12 @@ export interface IContextualMenuItem {
    */
   keytipProps?: IKeytipProps;
 
+  /**
+   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  renderItemComponentRef?: (component: IContextualMenuRenderItem | null) => void;
+
   /**
    * Any additional properties to use when custom rendering menu items.
    */
@@ -471,7 +477,6 @@ export interface IContextualMenuItem {
    * Optional prop to make an item readonly which is disabled but visitable by keyboard, will apply aria-readonly and some styling. Not supported by all components
    */
   inactive?: boolean;
-
 }
 
 export interface IContextualMenuSection extends React.Props<ContextualMenu> {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 49171cbb873839..478f19eedd92f1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -1,85 +1,108 @@
 import * as React from 'react';
 import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
-import { getRTL } from '../../Utilities';
+import { BaseComponent, getRTL } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
-const renderItemIcon = (props: IContextualMenuItemProps) => {
-  const {
-    item,
-    hasIcons,
-    classNames
-  } = props;
+export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps, {}> {
+  public render() {
+    const { item, classNames } = this.props;
 
-  // Only present to allow continued use of item.icon which is deprecated.
-  const { iconProps, icon } = item;
+    return (
+      <div
+        className={
+          item.split ? classNames.linkContentMenu : classNames.linkContent
+        }
+      >
+        { this.renderCheckMarkIcon(this.props) }
+        { this.renderItemIcon(this.props) }
+        { this.renderItemName(this.props) }
+        { this.renderSubMenuIcon(this.props) }
+      </div>
+    );
+  }
 
-  if (!hasIcons) {
-    return null;
+  public openSubMenu = (): void => {
+    const { item, openSubMenu, subMenuTargetRef } = this.props;
+    if (hasSubmenu(item) && openSubMenu && subMenuTargetRef && subMenuTargetRef.current) {
+      openSubMenu(item, subMenuTargetRef.current);
+    }
   }
 
-  if (item.onRenderIcon) {
-    return (
-      item.onRenderIcon(props)
-    );
+  public dismissSubMenu = (): void => {
+    const { item, dismissSubMenu } = this.props;
+    if (hasSubmenu(item) && dismissSubMenu) {
+      dismissSubMenu();
+    }
   }
 
-  if (iconProps) {
-    return <Icon { ...iconProps } className={ classNames.icon } />;
+  public dismissMenu = (dismissAll?: boolean): void => {
+    const { dismissMenu } = this.props;
+    if (dismissMenu) {
+      dismissMenu(dismissAll);
+    }
   }
 
-  return <Icon iconName={ icon } className={ classNames.icon } />;
-};
+  private renderItemIcon = (props: IContextualMenuItemProps) => {
+    const {
+      item,
+      hasIcons,
+      classNames
+    } = props;
 
-const renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {
-  const isItemChecked = getIsChecked(item);
-  if (onCheckmarkClick) {
-    const onClick = (e: React.MouseEvent<HTMLElement>) => onCheckmarkClick(item, e);
+    // Only present to allow continued use of item.icon which is deprecated.
+    const { iconProps, icon } = item;
 
-    return (
-      <Icon
-        iconName={ isItemChecked ? 'CheckMark' : '' }
-        className={ classNames.checkmarkIcon }
-        onClick={ onClick }
-      />
-    );
-  }
-  return null;
-};
+    if (!hasIcons) {
+      return null;
+    }
+
+    if (item.onRenderIcon) {
+      return (
+        item.onRenderIcon(props)
+      );
+    }
 
-const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
-  if (item.name) {
-    return <span className={ classNames.label }>{ item.name }</span>;
+    if (iconProps) {
+      return <Icon { ...iconProps } className={ classNames.icon } />;
+    }
+
+    return <Icon iconName={ icon } className={ classNames.icon } />;
   }
-  return null;
-};
 
-const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
-  if (hasSubmenu(item)) {
-    return (
-      <Icon
-        iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-        { ...item.submenuIconProps }
-        className={ classNames.subMenuIcon }
-      />
-    );
+  private renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {
+    const isItemChecked = getIsChecked(item);
+    if (onCheckmarkClick) {
+      const onClick = (e: React.MouseEvent<HTMLElement>) => onCheckmarkClick(item, e);
+
+      return (
+        <Icon
+          iconName={ isItemChecked ? 'CheckMark' : '' }
+          className={ classNames.checkmarkIcon }
+          onClick={ onClick }
+        />
+      );
+    }
+    return null;
   }
-  return null;
-};
 
-export const ContextualMenuItem: React.StatelessComponent<IContextualMenuItemProps> = (props) => {
-  const { item, classNames } = props;
+  private renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
+    if (item.name) {
+      return <span className={ classNames.label }>{ item.name }</span>;
+    }
+    return null;
+  }
 
-  return (
-    <div
-      className={
-        item.split ? classNames.linkContentMenu : classNames.linkContent
-      }
-    >
-      { renderCheckMarkIcon(props) }
-      { renderItemIcon(props) }
-      { renderItemName(props) }
-      { renderSubMenuIcon(props) }
-    </div>
-  );
-};
+  private renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
+    if (hasSubmenu(item)) {
+      return (
+        <Icon
+          iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+          { ...item.submenuIconProps }
+          className={ classNames.subMenuIcon }
+        />
+      );
+    }
+    return null;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
index 189a54047b7d5d..5d41a1e9eedbbe 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -1,8 +1,31 @@
 import { IContextualMenuItem } from './ContextualMenu.types';
 import { IMenuItemClassNames } from './ContextualMenu.classNames';
+import { RefObject } from '../../Utilities';
 
-export interface IContextualMenuItemProps
-  extends React.HTMLAttributes<IContextualMenuItemProps> {
+export interface IContextualMenuRenderItem {
+  /**
+   * Function to open this item's subMenu, if present.
+   */
+  openSubMenu: () => void;
+
+  /**
+   * Function to close this item's subMenu, if present.
+   */
+  dismissSubMenu: () => void;
+
+  /**
+   * Dismiss the menu this item belongs to.
+   */
+  dismissMenu: (dismissAll?: boolean) => void;
+}
+
+export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextualMenuItemProps> {
+
+  /**
+   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IContextualMenuRenderItem | null) => void;
 
   /**
    * The item to display
@@ -28,4 +51,25 @@ export interface IContextualMenuItemProps
    * Click handler for the checkmark
    */
   onCheckmarkClick?: ((item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void);
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
+   */
+  openSubMenu?: (item: IContextualMenuItem, target: HTMLElement) => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
+   */
+  dismissSubMenu?: () => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
+   * If dismissAll is true, all menus will be closed.
+   */
+  dismissMenu?: (dismissAll?: boolean) => void;
+
+  /**
+   * This prop will get set by ContextualMenu, will be the target to attach the submenu to when openSubMenu is triggered.
+   */
+  subMenuTargetRef?: RefObject<HTMLElement>;
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
index 0a2975b67251d0..8997ddb5c05b14 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
@@ -13,7 +13,7 @@ import {
 } from './ContextualMenu.classNames';
 import { ContextualMenuItem } from './ContextualMenuItem';
 import { KeytipData } from '../../KeytipData';
-import { getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';
+import { getIsChecked, isItemDisabled, hasSubmenu } from '../../utilities/contextualMenu/index';
 import { VerticalDivider } from '../../Divider';
 import { IContextualMenuSplitButtonProps } from './ContextualMenuSplitButton.types';
 
@@ -74,6 +74,24 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
     );
   }
 
+  public openSubMenu = (): void => {
+    if (hasSubmenu(this.props.item) && this.props.openSubMenu && this._splitButton) {
+      this.props.openSubMenu(this.props.item, this._splitButton);
+    }
+  }
+
+  public dismissSubMenu = (): void => {
+    if (hasSubmenu(this.props.item) && this.props.dismissSubMenu) {
+      this.props.dismissSubMenu();
+    }
+  }
+
+  public dismissMenu = (dismissAll?: boolean): void => {
+    if (this.props.dismissMenu) {
+      this.props.dismissMenu(dismissAll);
+    }
+  }
+
   private _renderSplitPrimaryButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     const isChecked: boolean | null | undefined = getIsChecked(item);
     const canCheck: boolean = isChecked !== null;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
index 1e7ebdb801f2c5..9b184325f263f3 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
@@ -1,15 +1,14 @@
 
-import { IContextualMenuItem } from '../../ContextualMenu';
+import { IContextualMenuItem, IContextualMenuRenderItem } from '../../ContextualMenu';
 import { IMenuItemClassNames } from './ContextualMenu.classNames';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
-import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
 
 export interface IContextualMenuSplitButtonProps extends React.Props<IContextualMenuItem> {
   /**
    * Optional callback to access the ContextualmenuSplitButton interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ContextualMenuSplitButton | null) => void;
+  componentRef?: (component: IContextualMenuRenderItem | null) => void;
 
   /**
    * The item that is used to render the split button.
@@ -91,4 +90,20 @@ export interface IContextualMenuSplitButtonProps extends React.Props<IContextual
    * Callback for keyboard events on the split button.
    */
   onItemKeyDown?: (item: IContextualMenuItem, ev: React.KeyboardEvent<HTMLElement>) => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
+   */
+  openSubMenu?: (item: any, target: HTMLElement) => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
+   */
+  dismissSubMenu?: () => void;
+
+  /**
+   * This props will get set by ContextualMenu and can be called to close the menu this item belongs to.
+   * If dismissAll is true, all menus will be closed.
+   */
+  dismissMenu?: (dismissAll?: boolean) => void;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
index 11c4226f3d2f8f..f641b8f594868d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ContextMenuItemChildren when a checkmark icon renders the component wit
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -129,7 +129,7 @@ exports[`ContextMenuItemChildren when it has a sub menu renders the menu icon 1`
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -275,7 +275,7 @@ exports[`ContextMenuItemChildren when it has icons when it doesnt have iconProps
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -392,7 +392,7 @@ exports[`ContextMenuItemChildren when it has icons when it has iconProps renders
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",

From 90aa6a6468194fe305c65375200943fdfc580a97 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Wed, 2 May 2018 11:12:23 -0700
Subject: [PATCH 2/8] Add tests for new item functions

---
 .../ContextualMenu/ContextualMenu.test.tsx    | 61 ++++++++++++++++++-
 .../ContextualMenuSplitButton.types.ts        |  2 +-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index 48505643659b01..aed95deec35e7e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import { Promise } from 'es6-promise';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import {
-  KeyCodes
+  KeyCodes,
+  createRef
 } from '../../Utilities';
 import { FocusZoneDirection } from '../../FocusZone';
 
 import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
+import { IContextualMenuRenderItem } from './ContextualMenuItem.types';
 import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
@@ -823,4 +825,61 @@ describe('ContextualMenu', () => {
       expect(canAnyMenuItemsCheck(items)).toEqual(true);
     });
   });
+
+  describe('IContextualMenuRenderItem function tests', () => {
+    const contextualItem = createRef<IContextualMenuRenderItem>();
+    let menuDismissed: boolean;
+    const onDismiss = (ev?: any, dismissAll?: boolean) => { menuDismissed = true; };
+
+    beforeEach(() => {
+      menuDismissed = false;
+      const menu: IContextualMenuItem[] = [
+        {
+          name: 'Test1',
+          key: 'Test1',
+          renderItemComponentRef: contextualItem,
+          subMenuProps: {
+            items: [
+              {
+                name: 'Test2',
+                key: 'Test2',
+                className: 'SubMenuClass'
+              },
+              {
+                name: 'Test3',
+                key: 'Test3',
+                className: 'SubMenuClass'
+              }
+            ],
+          }
+        }
+      ];
+
+      ReactTestUtils.renderIntoDocument<ContextualMenu>(
+        <ContextualMenu
+          onDismiss={ onDismiss }
+          items={ menu }
+        />
+      );
+    });
+
+    it('openSubMenu will open the item`s submenu if present', () => {
+      contextualItem.value!.openSubMenu();
+      expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+    });
+
+    it('dismissSubMenu will close the item`s submenu if present', () => {
+      // Open the submenu with a click
+      const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+      ReactTestUtils.Simulate.click(menuItem);
+      expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      contextualItem.value!.dismissSubMenu();
+      expect(document.querySelector('.SubMenuClass')).toEqual(null);
+    });
+
+    it('dismissMenu will close the item`s menu', () => {
+      contextualItem.value!.dismissMenu();
+      expect(menuDismissed).toEqual(true);
+    });
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
index 9b184325f263f3..99da786fc05b92 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
@@ -102,7 +102,7 @@ export interface IContextualMenuSplitButtonProps extends React.Props<IContextual
   dismissSubMenu?: () => void;
 
   /**
-   * This props will get set by ContextualMenu and can be called to close the menu this item belongs to.
+   * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
    * If dismissAll is true, all menus will be closed.
    */
   dismissMenu?: (dismissAll?: boolean) => void;

From da3bef774699a954d4d94f967798c338ce02bde2 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Wed, 2 May 2018 11:14:35 -0700
Subject: [PATCH 3/8] Add rush change file

---
 ...ntextual-menu-item-functions_2018-05-02-18-14.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/keyou-contextual-menu-item-functions_2018-05-02-18-14.json

diff --git a/common/changes/office-ui-fabric-react/keyou-contextual-menu-item-functions_2018-05-02-18-14.json b/common/changes/office-ui-fabric-react/keyou-contextual-menu-item-functions_2018-05-02-18-14.json
new file mode 100644
index 00000000000000..c413bf6f9c0063
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/keyou-contextual-menu-item-functions_2018-05-02-18-14.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add ContextualMenuItem functions to open and close menus",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "keyou@microsoft.com"
+}
\ No newline at end of file

From 4fda842bef937b44a011e9195cb6d82d2b4fb3bb Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Wed, 2 May 2018 14:41:28 -0700
Subject: [PATCH 4/8] Remove binds in submenu function - Move private
 ContextualMenuItem functions back to local functions - Renames and
 refactoring

---
 .../ContextualMenu/ContextualMenu.test.tsx    |   2 +-
 .../ContextualMenu/ContextualMenu.tsx         |  20 ++-
 .../ContextualMenu/ContextualMenu.types.ts    |   5 +-
 .../ContextualMenu/ContextualMenuItem.tsx     | 134 +++++++++---------
 .../ContextualMenuSplitButton.tsx             |  15 +-
 5 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index aed95deec35e7e..c0fea563be96d2 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -837,7 +837,7 @@ describe('ContextualMenu', () => {
         {
           name: 'Test1',
           key: 'Test1',
-          renderItemComponentRef: contextualItem,
+          renderItemRef: contextualItem,
           subMenuProps: {
             items: [
               {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 2630493acd45ca..7748e0ec2ca57a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -501,8 +501,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     const nativeProps = getNativeProps(item, anchorProperties);
     const disabled = isItemDisabled(item);
     const anchorRef = createRef<HTMLAnchorElement>();
-    const openSubMenu = this._onItemSubMenuExpand.bind(this);
-    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
     const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
@@ -540,9 +538,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                 index={ index }
                 onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
                 hasIcons={ hasIcons }
-                componentRef={ item.renderItemComponentRef }
-                openSubMenu={ openSubMenu }
-                dismissSubMenu={ dismissSubMenu }
+                componentRef={ item.renderItemRef }
+                openSubMenu={ this._onItemSubMenuExpand }
+                dismissSubMenu={ this._onSubMenuDismiss }
                 dismissMenu={ dismissMenu }
                 subMenuTargetRef={ anchorRef }
               />
@@ -611,8 +609,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       };
     }
     const btnRef = createRef<HTMLButtonElement>();
-    const openSubMenu = this._onItemSubMenuExpand.bind(this);
-    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
     const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
@@ -634,9 +630,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
               index={ index }
               onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
               hasIcons={ hasIcons }
-              componentRef={ item.renderItemComponentRef }
-              openSubMenu={ openSubMenu }
-              dismissSubMenu={ dismissSubMenu }
+              componentRef={ item.renderItemRef }
+              openSubMenu={ this._onItemSubMenuExpand }
+              dismissSubMenu={ this._onSubMenuDismiss }
               dismissMenu={ dismissMenu }
               subMenuTargetRef={ btnRef }
             />
@@ -681,7 +677,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         openSubMenu={ openSubMenu }
         dismissSubMenu={ dismissSubMenu }
         dismissMenu={ dismissMenu }
-        componentRef={ item.renderItemComponentRef }
+        componentRef={ item.renderItemRef }
       />
     );
   }
@@ -918,7 +914,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
-  private _onItemSubMenuExpand(item: IContextualMenuItem, target: HTMLElement) {
+  private _onItemSubMenuExpand = (item: IContextualMenuItem, target: HTMLElement): void => {
     if (this.state.expandedMenuItemKey !== item.key) {
 
       if (this.state.expandedMenuItemKey) {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index 55262cbfb032bc..7e5309912f01b2 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -463,10 +463,9 @@ export interface IContextualMenuItem {
   keytipProps?: IKeytipProps;
 
   /**
-   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
+   * Optional callback to access the IContextualMenuRenderItem interface. This will get passed down to the item that renders the ContextualMenuItem.
    */
-  renderItemComponentRef?: (component: IContextualMenuRenderItem | null) => void;
+  renderItemRef?: (component: IContextualMenuRenderItem | null) => void;
 
   /**
    * Any additional properties to use when custom rendering menu items.
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 478f19eedd92f1..4f4acf8814ed2c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -4,6 +4,69 @@ import { BaseComponent, getRTL } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
+const renderItemIcon = (props: IContextualMenuItemProps) => {
+  const {
+    item,
+    hasIcons,
+    classNames
+  } = props;
+
+  // Only present to allow continued use of item.icon which is deprecated.
+  const { iconProps, icon } = item;
+
+  if (!hasIcons) {
+    return null;
+  }
+
+  if (item.onRenderIcon) {
+    return (
+      item.onRenderIcon(props)
+    );
+  }
+
+  if (iconProps) {
+    return <Icon { ...iconProps } className={ classNames.icon } />;
+  }
+
+  return <Icon iconName={ icon } className={ classNames.icon } />;
+};
+
+const renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {
+  const isItemChecked = getIsChecked(item);
+  if (onCheckmarkClick) {
+    const onClick = (e: React.MouseEvent<HTMLElement>) => onCheckmarkClick(item, e);
+
+    return (
+      <Icon
+        iconName={ isItemChecked ? 'CheckMark' : '' }
+        className={ classNames.checkmarkIcon }
+        onClick={ onClick }
+      />
+    );
+  }
+  return null;
+};
+
+const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
+  if (item.name) {
+    return <span className={ classNames.label }>{ item.name }</span>;
+  }
+  return null;
+};
+
+const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
+  if (hasSubmenu(item)) {
+    return (
+      <Icon
+        iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+        { ...item.submenuIconProps }
+        className={ classNames.subMenuIcon }
+      />
+    );
+  }
+  return null;
+};
+
 export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps, {}> {
   public render() {
     const { item, classNames } = this.props;
@@ -14,10 +77,10 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
           item.split ? classNames.linkContentMenu : classNames.linkContent
         }
       >
-        { this.renderCheckMarkIcon(this.props) }
-        { this.renderItemIcon(this.props) }
-        { this.renderItemName(this.props) }
-        { this.renderSubMenuIcon(this.props) }
+        { renderCheckMarkIcon(this.props) }
+        { renderItemIcon(this.props) }
+        { renderItemName(this.props) }
+        { renderSubMenuIcon(this.props) }
       </div>
     );
   }
@@ -42,67 +105,4 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
       dismissMenu(dismissAll);
     }
   }
-
-  private renderItemIcon = (props: IContextualMenuItemProps) => {
-    const {
-      item,
-      hasIcons,
-      classNames
-    } = props;
-
-    // Only present to allow continued use of item.icon which is deprecated.
-    const { iconProps, icon } = item;
-
-    if (!hasIcons) {
-      return null;
-    }
-
-    if (item.onRenderIcon) {
-      return (
-        item.onRenderIcon(props)
-      );
-    }
-
-    if (iconProps) {
-      return <Icon { ...iconProps } className={ classNames.icon } />;
-    }
-
-    return <Icon iconName={ icon } className={ classNames.icon } />;
-  }
-
-  private renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {
-    const isItemChecked = getIsChecked(item);
-    if (onCheckmarkClick) {
-      const onClick = (e: React.MouseEvent<HTMLElement>) => onCheckmarkClick(item, e);
-
-      return (
-        <Icon
-          iconName={ isItemChecked ? 'CheckMark' : '' }
-          className={ classNames.checkmarkIcon }
-          onClick={ onClick }
-        />
-      );
-    }
-    return null;
-  }
-
-  private renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
-    if (item.name) {
-      return <span className={ classNames.label }>{ item.name }</span>;
-    }
-    return null;
-  }
-
-  private renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
-    if (hasSubmenu(item)) {
-      return (
-        <Icon
-          iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-          { ...item.submenuIconProps }
-          className={ classNames.subMenuIcon }
-        />
-      );
-    }
-    return null;
-  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
index 8997ddb5c05b14..b7ad185d5ae386 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
@@ -75,20 +75,23 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
   }
 
   public openSubMenu = (): void => {
-    if (hasSubmenu(this.props.item) && this.props.openSubMenu && this._splitButton) {
-      this.props.openSubMenu(this.props.item, this._splitButton);
+    const { item, openSubMenu } = this.props;
+    if (hasSubmenu(item) && openSubMenu && this._splitButton) {
+      openSubMenu(item, this._splitButton);
     }
   }
 
   public dismissSubMenu = (): void => {
-    if (hasSubmenu(this.props.item) && this.props.dismissSubMenu) {
-      this.props.dismissSubMenu();
+    const { item, dismissSubMenu } = this.props;
+    if (hasSubmenu(item) && dismissSubMenu) {
+      dismissSubMenu();
     }
   }
 
   public dismissMenu = (dismissAll?: boolean): void => {
-    if (this.props.dismissMenu) {
-      this.props.dismissMenu(dismissAll);
+    const { dismissMenu } = this.props;
+    if (dismissMenu) {
+      dismissMenu(dismissAll);
     }
   }
 

From 8d73bf7cae9e4d2349bfd906d31fa11230592224 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Thu, 3 May 2018 17:27:51 -0700
Subject: [PATCH 5/8] Move contextual menu button and anchor into their own
 component - Move all wrapper items into their own folder under ContextualMenu

---
 .../ContextualMenu/ContextualMenu.test.tsx    |   6 +-
 .../ContextualMenu/ContextualMenu.tsx         | 218 +++++-------------
 .../ContextualMenu/ContextualMenu.types.ts    |  13 +-
 .../ContextualMenu/ContextualMenuItem.tsx     |  55 ++---
 .../ContextualMenuItem.types.ts               |  46 ----
 .../ContextualMenuAnchor.test.tsx             |  47 ++++
 .../ContextualMenuAnchor.tsx                  | 136 +++++++++++
 .../ContextualMenuAnchor.types.ts             |  14 ++
 .../ContextualMenuButton.test.tsx             |  47 ++++
 .../ContextualMenuButton.tsx                  | 166 +++++++++++++
 .../ContextualMenuButton.types.ts             |  14 ++
 .../ContextualMenuSplitButton.test.tsx        |   4 +-
 .../ContextualMenuSplitButton.tsx             |   9 +-
 .../ContextualMenuSplitButton.types.ts        |   8 +
 .../IContextualMenuItemWrapper.ts}            |  34 ++-
 .../ContextualMenuAnchor.test.tsx.snap        |  28 +++
 .../ContextualMenuButton.test.tsx.snap        |  29 +++
 .../ContextualMenuSplitButton.test.tsx.snap   |   0
 .../ContextualMenuItemWrapper/index.ts        |   7 +
 .../ContextualMenuItem.test.tsx.snap          |   8 +-
 20 files changed, 613 insertions(+), 276 deletions(-)
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
 rename packages/office-ui-fabric-react/src/components/ContextualMenu/{ => ContextualMenuItemWrapper}/ContextualMenuSplitButton.test.tsx (90%)
 rename packages/office-ui-fabric-react/src/components/ContextualMenu/{ => ContextualMenuItemWrapper}/ContextualMenuSplitButton.tsx (97%)
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
 rename packages/office-ui-fabric-react/src/components/ContextualMenu/{ContextualMenuSplitButton.types.ts => ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts} (81%)
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuAnchor.test.tsx.snap
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuButton.test.tsx.snap
 rename packages/office-ui-fabric-react/src/components/ContextualMenu/{ => ContextualMenuItemWrapper}/__snapshots__/ContextualMenuSplitButton.test.tsx.snap (100%)
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index 059da5cc148cbe..ab5642ed213899 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -9,7 +9,7 @@ import { FocusZoneDirection } from '../../FocusZone';
 
 import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
-import { IContextualMenuRenderItem } from './ContextualMenuItem.types';
+import { IContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
@@ -863,7 +863,7 @@ describe('ContextualMenu', () => {
   });
 
   describe('IContextualMenuRenderItem function tests', () => {
-    const contextualItem = createRef<IContextualMenuRenderItem>();
+    const contextualItem = createRef<IContextualMenuItemWrapper>();
     let menuDismissed: boolean;
     const onDismiss = (ev?: any, dismissAll?: boolean) => { menuDismissed = true; };
 
@@ -873,7 +873,7 @@ describe('ContextualMenu', () => {
         {
           name: 'Test1',
           key: 'Test1',
-          renderItemRef: contextualItem,
+          componentRef: contextualItem,
           subMenuProps: {
             items: [
               {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 2a49d40664ad53..1f2ad071f3cd75 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -11,9 +11,6 @@ import {
 import {
   BaseComponent,
   IPoint,
-  anchorProperties,
-  buttonProperties,
-  getNativeProps,
   assign,
   getId,
   getRTL,
@@ -24,16 +21,14 @@ import {
   getFirstFocusable,
   getLastFocusable,
   css,
-  shouldWrapFocus,
-  createRef
+  shouldWrapFocus
 } from '../../Utilities';
 import { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
 import { Callout } from '../../Callout';
 import { IIconProps } from '../../Icon';
 import { ContextualMenuItem } from './ContextualMenuItem';
-import { KeytipData } from '../../KeytipData';
-import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
+import { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor } from './ContextualMenuItemWrapper';
 
 export interface IContextualMenuState {
   expandedMenuItemKey?: string;
@@ -486,66 +481,34 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _renderAnchorMenuItem(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, focusableElementIndex: number, totalItemCount: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
-    const { expandedMenuItemKey } = this.state;
-    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
-
-    let anchorRel = item.rel;
-    if (item.target && item.target.toLowerCase() === '_blank') {
-      anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer';  // Safe default to prevent tabjacking
-    }
-
-    const subMenuId = this._getSubMenuId(item);
-    const itemHasSubmenu = hasSubmenu(item);
-    const nativeProps = getNativeProps(item, anchorProperties);
-    const disabled = isItemDisabled(item);
-    const anchorRef = createRef<HTMLAnchorElement>();
+    const { contextualMenuItemAs } = this.props;
     const dismissMenu = this.dismiss.bind(this, undefined);
-
+    const { expandedMenuItemKey } = this.state;
     return (
-      <div>
-        <KeytipData
-          keytipProps={ item.keytipProps }
-          ariaDescribedBy={ (nativeProps as any)['aria-describedby'] }
-          disabled={ disabled }
-        >
-          { (keytipAttributes: any): JSX.Element => (
-            <a
-              { ...nativeProps }
-              { ...keytipAttributes }
-              ref={ anchorRef }
-              href={ item.href }
-              target={ item.target }
-              rel={ anchorRel }
-              className={ classNames.root }
-              role='menuitem'
-              aria-owns={ item.key === expandedMenuItemKey ? subMenuId : undefined }
-              aria-haspopup={ itemHasSubmenu || undefined }
-              aria-expanded={ itemHasSubmenu ? item.key === expandedMenuItemKey : undefined }
-              aria-posinset={ focusableElementIndex + 1 }
-              aria-setsize={ totalItemCount }
-              aria-disabled={ isItemDisabled(item) }
-              style={ item.style }
-              onClick={ this._onAnchorClick.bind(this, item) }
-              onMouseEnter={ this._onItemMouseEnter.bind(this, item) }
-              onMouseLeave={ this._onMouseItemLeave.bind(this, item) }
-              onKeyDown={ itemHasSubmenu ? this._onItemKeyDown.bind(this, item) : null }
-            >
-              <ChildrenRenderer
-                item={ item }
-                classNames={ classNames }
-                index={ index }
-                onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
-                hasIcons={ hasIcons }
-                componentRef={ item.renderItemRef }
-                openSubMenu={ this._onItemSubMenuExpand }
-                dismissSubMenu={ this._onSubMenuDismiss }
-                dismissMenu={ dismissMenu }
-                subMenuTargetRef={ anchorRef }
-              />
-            </a>
-          ) }
-        </KeytipData>
-      </div>);
+      <ContextualMenuAnchor
+        item={ item }
+        classNames={ classNames }
+        index={ index }
+        focusableElementIndex={ focusableElementIndex }
+        totalItemCount={ totalItemCount }
+        hasCheckmarks={ hasCheckmarks }
+        hasIcons={ hasIcons }
+        contextualMenuItemAs={ contextualMenuItemAs }
+        onItemMouseEnter={ this._onItemMouseEnterBase }
+        onItemMouseLeave={ this._onMouseItemLeave }
+        onItemMouseMove={ this._onItemMouseMoveBase }
+        onItemMouseDown={ this._onItemMouseDown }
+        executeItemClick={ this._executeItemClick }
+        onItemClick={ this._onAnchorClick }
+        onItemKeyDown={ this._onItemKeyDown }
+        getSubMenuId={ this._getSubMenuId }
+        expandedMenuItemKey={ expandedMenuItemKey }
+        openSubMenu={ this._onItemSubMenuExpand }
+        dismissSubMenu={ this._onSubMenuDismiss }
+        dismissMenu={ dismissMenu }
+        componentRef={ item.componentRef }
+      />
+    );
   }
 
   private _renderButtonItem(
@@ -556,87 +519,35 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     totalItemCount: number,
     hasCheckmarks?: boolean,
     hasIcons?: boolean) {
-    const { expandedMenuItemKey } = this.state;
-    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
-
-    const subMenuId = this._getSubMenuId(item);
-    let ariaLabel = '';
-
-    if (item.ariaLabel) {
-      ariaLabel = item.ariaLabel;
-    } else if (item.name) {
-      ariaLabel = item.name;
-    }
-
-    const isChecked: boolean | null | undefined = getIsChecked(item);
-    const canCheck: boolean = isChecked !== null;
-    const defaultRole = canCheck ? 'menuitemcheckbox' : 'menuitem';
-    const itemHasSubmenu = hasSubmenu(item);
-
-    const buttonNativeProperties = getNativeProps(item, buttonProperties);
-    // Do not add the disabled attribute to the button so that it is focusable
-    delete (buttonNativeProperties as any).disabled;
-
-    const itemButtonProperties = {
-      className: classNames.root,
-      onClick: this._onItemClick.bind(this, item),
-      onKeyDown: itemHasSubmenu ? this._onItemKeyDown.bind(this, item) : null,
-      onMouseEnter: this._onItemMouseEnter.bind(this, item),
-      onMouseLeave: this._onMouseItemLeave.bind(this, item),
-      onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
-      onMouseMove: this._onItemMouseMove.bind(this, item),
-      href: item.href,
-      title: item.title,
-      'aria-label': ariaLabel,
-      'aria-haspopup': itemHasSubmenu || undefined,
-      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : undefined,
-      'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,
-      'aria-checked': !!isChecked,
-      'aria-posinset': focusableElementIndex + 1,
-      'aria-setsize': totalItemCount,
-      'aria-disabled': isItemDisabled(item),
-      role: item.role || defaultRole,
-      style: item.style
-    };
-
-    let { keytipProps } = item;
-    if (keytipProps && itemHasSubmenu) {
-      keytipProps = {
-        ...keytipProps,
-        hasMenu: true
-      };
-    }
-    const btnRef = createRef<HTMLButtonElement>();
+    const { contextualMenuItemAs } = this.props;
     const dismissMenu = this.dismiss.bind(this, undefined);
+    const { expandedMenuItemKey } = this.state;
 
     return (
-      <KeytipData
-        keytipProps={ keytipProps }
-        ariaDescribedBy={ (buttonNativeProperties as any)['aria-describedby'] }
-        disabled={ isItemDisabled(item) }
-      >
-        { (keytipAttributes: any): JSX.Element => (
-          <button
-            ref={ btnRef }
-            { ...buttonNativeProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
-            { ...itemButtonProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
-            { ...keytipAttributes }
-          >
-            <ChildrenRenderer
-              item={ item }
-              classNames={ classNames }
-              index={ index }
-              onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
-              hasIcons={ hasIcons }
-              componentRef={ item.renderItemRef }
-              openSubMenu={ this._onItemSubMenuExpand }
-              dismissSubMenu={ this._onSubMenuDismiss }
-              dismissMenu={ dismissMenu }
-              subMenuTargetRef={ btnRef }
-            />
-          </button>
-        ) }
-      </KeytipData>
+      <ContextualMenuButton
+        item={ item }
+        classNames={ classNames }
+        index={ index }
+        focusableElementIndex={ focusableElementIndex }
+        totalItemCount={ totalItemCount }
+        hasCheckmarks={ hasCheckmarks }
+        hasIcons={ hasIcons }
+        contextualMenuItemAs={ contextualMenuItemAs }
+        onItemMouseEnter={ this._onItemMouseEnterBase }
+        onItemMouseLeave={ this._onMouseItemLeave }
+        onItemMouseMove={ this._onItemMouseMoveBase }
+        onItemMouseDown={ this._onItemMouseDown }
+        executeItemClick={ this._executeItemClick }
+        onItemClick={ this._onItemClick }
+        onItemClickBase={ this._onItemClickBase }
+        onItemKeyDown={ this._onItemKeyDown }
+        getSubMenuId={ this._getSubMenuId }
+        expandedMenuItemKey={ expandedMenuItemKey }
+        openSubMenu={ this._onItemSubMenuExpand }
+        dismissSubMenu={ this._onSubMenuDismiss }
+        dismissMenu={ dismissMenu }
+        componentRef={ item.componentRef }
+      />
     );
   }
 
@@ -649,9 +560,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     hasCheckmarks?: boolean,
     hasIcons?: boolean): JSX.Element {
     const { contextualMenuItemAs } = this.props;
-
-    const openSubMenu = this._onItemSubMenuExpand.bind(this);
-    const dismissSubMenu = this._onSubMenuDismiss.bind(this);
     const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
@@ -672,10 +580,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onItemClick={ this._onItemClick }
         onItemClickBase={ this._onItemClickBase }
         onItemKeyDown={ this._onItemKeyDown }
-        openSubMenu={ openSubMenu }
-        dismissSubMenu={ dismissSubMenu }
+        openSubMenu={ this._onItemSubMenuExpand }
+        dismissSubMenu={ this._onSubMenuDismiss }
         dismissMenu={ dismissMenu }
-        componentRef={ item.renderItemRef }
+        componentRef={ item.componentRef }
         onTap={ this._onPointerAndTouchEvent }
       />
     );
@@ -756,10 +664,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, NavigationIdleDelay);
   }
 
-  private _onItemMouseEnter = (item: any, ev: React.MouseEvent<HTMLElement>): void => {
-    this._onItemMouseEnterBase(item, ev, ev.currentTarget as HTMLElement);
-  }
-
   private _onItemMouseEnterBase = (item: any, ev: React.MouseEvent<HTMLElement>, target?: HTMLElement): void => {
     if (!this._isScrollIdle) {
       return;
@@ -768,10 +672,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     this._updateFocusOnMouseEvent(item, ev, target);
   }
 
-  private _onItemMouseMove(item: any, ev: React.MouseEvent<HTMLElement>) {
-    this._onItemMouseMoveBase(item, ev, ev.currentTarget as HTMLElement);
-  }
-
   private _onItemMouseMoveBase = (item: any, ev: React.MouseEvent<HTMLElement>, target: HTMLElement): void => {
 
     const targetElement = ev.currentTarget as HTMLElement;
@@ -882,7 +782,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     ev.preventDefault();
   }
 
-  private _onAnchorClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+  private _onAnchorClick = (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => {
     this._executeItemClick(item, ev);
     ev.stopPropagation();
   }
@@ -1019,7 +919,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
-  private _getSubMenuId(item: IContextualMenuItem): string | undefined {
+  private _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
     let { subMenuId } = this.state;
 
     if (item.subMenuProps && item.subMenuProps.id) {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index 7e5309912f01b2..0fcd28fa404d67 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -15,7 +15,8 @@ import { IWithResponsiveModeState } from '../../utilities/decorators/withRespons
 import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';
 export { DirectionalHint } from '../../common/DirectionalHint';
 import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';
-import { IContextualMenuItemProps, IContextualMenuRenderItem } from './ContextualMenuItem.types';
+import { IContextualMenuItemProps } from './ContextualMenuItem.types';
+import { IContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 import { IKeytipProps } from '../../Keytip';
 
 export enum ContextualMenuItemType {
@@ -255,6 +256,11 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 }
 
 export interface IContextualMenuItem {
+  /**
+   * Optional callback to access the IContextualMenuItemWrapper interface. This will get passed down to the item that renders the ContextualMenuItem.
+   */
+  componentRef?: (component: IContextualMenuItemWrapper | null) => void;
+
   /**
    * Unique id to identify the item
    */
@@ -462,11 +468,6 @@ export interface IContextualMenuItem {
    */
   keytipProps?: IKeytipProps;
 
-  /**
-   * Optional callback to access the IContextualMenuRenderItem interface. This will get passed down to the item that renders the ContextualMenuItem.
-   */
-  renderItemRef?: (component: IContextualMenuRenderItem | null) => void;
-
   /**
    * Any additional properties to use when custom rendering menu items.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 4f4acf8814ed2c..95f50568e7dd6a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
-import { BaseComponent, getRTL } from '../../Utilities';
+import { getRTL } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
@@ -67,42 +67,19 @@ const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
   return null;
 };
 
-export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps, {}> {
-  public render() {
-    const { item, classNames } = this.props;
+export const ContextualMenuItem: React.StatelessComponent<IContextualMenuItemProps> = (props) => {
+  const { item, classNames } = props;
 
-    return (
-      <div
-        className={
-          item.split ? classNames.linkContentMenu : classNames.linkContent
-        }
-      >
-        { renderCheckMarkIcon(this.props) }
-        { renderItemIcon(this.props) }
-        { renderItemName(this.props) }
-        { renderSubMenuIcon(this.props) }
-      </div>
-    );
-  }
-
-  public openSubMenu = (): void => {
-    const { item, openSubMenu, subMenuTargetRef } = this.props;
-    if (hasSubmenu(item) && openSubMenu && subMenuTargetRef && subMenuTargetRef.current) {
-      openSubMenu(item, subMenuTargetRef.current);
-    }
-  }
-
-  public dismissSubMenu = (): void => {
-    const { item, dismissSubMenu } = this.props;
-    if (hasSubmenu(item) && dismissSubMenu) {
-      dismissSubMenu();
-    }
-  }
-
-  public dismissMenu = (dismissAll?: boolean): void => {
-    const { dismissMenu } = this.props;
-    if (dismissMenu) {
-      dismissMenu(dismissAll);
-    }
-  }
-}
+  return (
+    <div
+      className={
+        item.split ? classNames.linkContentMenu : classNames.linkContent
+      }
+    >
+      { renderCheckMarkIcon(props) }
+      { renderItemIcon(props) }
+      { renderItemName(props) }
+      { renderSubMenuIcon(props) }
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
index 5d41a1e9eedbbe..d5b7c5bddb317d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -1,32 +1,7 @@
 import { IContextualMenuItem } from './ContextualMenu.types';
 import { IMenuItemClassNames } from './ContextualMenu.classNames';
-import { RefObject } from '../../Utilities';
-
-export interface IContextualMenuRenderItem {
-  /**
-   * Function to open this item's subMenu, if present.
-   */
-  openSubMenu: () => void;
-
-  /**
-   * Function to close this item's subMenu, if present.
-   */
-  dismissSubMenu: () => void;
-
-  /**
-   * Dismiss the menu this item belongs to.
-   */
-  dismissMenu: (dismissAll?: boolean) => void;
-}
 
 export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextualMenuItemProps> {
-
-  /**
-   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IContextualMenuRenderItem | null) => void;
-
   /**
    * The item to display
    */
@@ -51,25 +26,4 @@ export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextu
    * Click handler for the checkmark
    */
   onCheckmarkClick?: ((item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void);
-
-  /**
-   * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
-   */
-  openSubMenu?: (item: IContextualMenuItem, target: HTMLElement) => void;
-
-  /**
-   * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
-   */
-  dismissSubMenu?: () => void;
-
-  /**
-   * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
-   * If dismissAll is true, all menus will be closed.
-   */
-  dismissMenu?: (dismissAll?: boolean) => void;
-
-  /**
-   * This prop will get set by ContextualMenu, will be the target to attach the submenu to when openSubMenu is triggered.
-   */
-  subMenuTargetRef?: RefObject<HTMLElement>;
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx
new file mode 100644
index 00000000000000..b225c5d81d03d6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { IContextualMenuItem } from '../ContextualMenu.types';
+import { IMenuItemClassNames } from '../ContextualMenu.classNames';
+import { ContextualMenuAnchor } from './ContextualMenuAnchor';
+
+describe('ContextualMenuButton', () => {
+  describe('creates a normal button', () => {
+    let menuItem: IContextualMenuItem;
+    let menuClassNames: IMenuItemClassNames;
+
+    beforeEach(() => {
+      menuItem = { key: '123' };
+      menuClassNames = getMenuItemClassNames();
+    });
+
+    it('renders the contextual menu split button correctly', () => {
+      const component = renderer.create(
+        <ContextualMenuAnchor
+          item={ menuItem }
+          classNames={ menuClassNames }
+          index={ 0 }
+          focusableElementIndex={ 0 }
+          totalItemCount={ 1 }
+        />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
+
+function getMenuItemClassNames(): IMenuItemClassNames {
+  return {
+    item: 'item',
+    divider: '---',
+    root: 'root',
+    linkContent: 'linkContent',
+    icon: 'icon',
+    checkmarkIcon: 'checkmarkIcon',
+    subMenuIcon: 'subMenuIcon',
+    label: 'label',
+    splitContainer: 'splitContainer',
+    splitPrimary: 'splitPrimary',
+    splitMenu: 'splitMenu',
+    linkContentMenu: 'linkContentMenu',
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
new file mode 100644
index 00000000000000..cf494b2518c408
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  anchorProperties,
+  getNativeProps,
+} from '../../../Utilities';
+import { IContextualMenuAnchorProps } from './ContextualMenuAnchor.types';
+import { KeytipData } from '../../KeytipData';
+import { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
+import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
+
+export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorProps, {}> {
+  private _anchor: HTMLAnchorElement;
+
+  public render() {
+    const {
+      item,
+      classNames,
+      index,
+      focusableElementIndex,
+      totalItemCount,
+      hasCheckmarks,
+      hasIcons,
+      contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem,
+      expandedMenuItemKey,
+      onItemClick
+    } = this.props;
+
+    let anchorRel = item.rel;
+    if (item.target && item.target.toLowerCase() === '_blank') {
+      anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer';  // Safe default to prevent tabjacking
+    }
+
+    const subMenuId = this._getSubMenuId(item);
+    const itemHasSubmenu = hasSubmenu(item);
+    const nativeProps = getNativeProps(item, anchorProperties);
+    const disabled = isItemDisabled(item);
+
+    return (
+      <div>
+        <KeytipData
+          keytipProps={ item.keytipProps }
+          ariaDescribedBy={ (nativeProps as any)['aria-describedby'] }
+          disabled={ disabled }
+        >
+          { (keytipAttributes: any): JSX.Element => (
+            <a
+              { ...nativeProps }
+              { ...keytipAttributes }
+              ref={ (anchor: HTMLAnchorElement) => this._anchor = anchor }
+              href={ item.href }
+              target={ item.target }
+              rel={ anchorRel }
+              className={ classNames.root }
+              role='menuitem'
+              aria-owns={ item.key === expandedMenuItemKey ? subMenuId : undefined }
+              aria-haspopup={ itemHasSubmenu || undefined }
+              aria-expanded={ itemHasSubmenu ? item.key === expandedMenuItemKey : undefined }
+              aria-posinset={ focusableElementIndex + 1 }
+              aria-setsize={ totalItemCount }
+              aria-disabled={ isItemDisabled(item) }
+              style={ item.style }
+              onClick={ this._onItemClick }
+              onMouseEnter={ this._onItemMouseEnter }
+              onMouseLeave={ this._onItemMouseLeave }
+              onKeyDown={ itemHasSubmenu ? this._onItemKeyDown : null }
+            >
+              <ChildrenRenderer
+                item={ item }
+                classNames={ classNames }
+                index={ index }
+                onCheckmarkClick={ hasCheckmarks && onItemClick ? onItemClick.bind(this, item) : undefined }
+                hasIcons={ hasIcons }
+              />
+            </a>
+          ) }
+        </KeytipData>
+      </div>);
+  }
+
+  public openSubMenu = (): void => {
+    const { item, openSubMenu } = this.props;
+    if (hasSubmenu(item) && openSubMenu && this._anchor) {
+      openSubMenu(item, this._anchor);
+    }
+  }
+
+  public dismissSubMenu = (): void => {
+    const { item, dismissSubMenu } = this.props;
+    if (hasSubmenu(item) && dismissSubMenu) {
+      dismissSubMenu();
+    }
+  }
+
+  public dismissMenu = (dismissAll?: boolean): void => {
+    const { dismissMenu } = this.props;
+    if (dismissMenu) {
+      dismissMenu(dismissAll);
+    }
+  }
+
+  private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseEnter } = this.props;
+    if (onItemMouseEnter) {
+      onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  private _onItemClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemClick } = this.props;
+    if (onItemClick) {
+      onItemClick(item, ev);
+    }
+  }
+
+  private _onItemMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseLeave } = this.props;
+    if (onItemMouseLeave) {
+      onItemMouseLeave(item, ev);
+    }
+  }
+
+  private _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+    const { item, onItemKeyDown } = this.props;
+    if (onItemKeyDown) {
+      onItemKeyDown(item, ev);
+    }
+  }
+
+  private _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
+    const { getSubMenuId } = this.props;
+    if (getSubMenuId) {
+      return getSubMenuId(item);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
new file mode 100644
index 00000000000000..ead336dad99ffa
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
@@ -0,0 +1,14 @@
+import { IContextualMenuItem } from '../../ContextualMenu';
+import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+
+export interface IContextualMenuAnchorProps extends IContextualMenuItemWrapperProps {
+  /**
+   * Callback to get the subMenu ID for an IContextualMenuItem
+   */
+  getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
+
+  /**
+   * Key of the currently expanded subMenu
+   */
+  expandedMenuItemKey?: string;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx
new file mode 100644
index 00000000000000..d78a6eabf2e80b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { IContextualMenuItem } from '../ContextualMenu.types';
+import { IMenuItemClassNames } from '../ContextualMenu.classNames';
+import { ContextualMenuButton } from './ContextualMenuButton';
+
+describe('ContextualMenuButton', () => {
+  describe('creates a normal button', () => {
+    let menuItem: IContextualMenuItem;
+    let menuClassNames: IMenuItemClassNames;
+
+    beforeEach(() => {
+      menuItem = { key: '123' };
+      menuClassNames = getMenuItemClassNames();
+    });
+
+    it('renders the contextual menu split button correctly', () => {
+      const component = renderer.create(
+        <ContextualMenuButton
+          item={ menuItem }
+          classNames={ menuClassNames }
+          index={ 0 }
+          focusableElementIndex={ 0 }
+          totalItemCount={ 1 }
+        />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
+
+function getMenuItemClassNames(): IMenuItemClassNames {
+  return {
+    item: 'item',
+    divider: '---',
+    root: 'root',
+    linkContent: 'linkContent',
+    icon: 'icon',
+    checkmarkIcon: 'checkmarkIcon',
+    subMenuIcon: 'subMenuIcon',
+    label: 'label',
+    splitContainer: 'splitContainer',
+    splitPrimary: 'splitPrimary',
+    splitMenu: 'splitMenu',
+    linkContentMenu: 'linkContentMenu',
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
new file mode 100644
index 00000000000000..4b86d083691fb9
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  buttonProperties,
+  getNativeProps,
+} from '../../../Utilities';
+import { IContextualMenuButtonProps } from './ContextualMenuButton.types';
+import { KeytipData } from '../../KeytipData';
+import { getIsChecked, isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
+import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
+
+export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonProps, {}> {
+  private _btn: HTMLButtonElement;
+
+  public render() {
+    const {
+      item,
+      classNames,
+      index,
+      focusableElementIndex,
+      totalItemCount,
+      hasCheckmarks,
+      hasIcons,
+      contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem,
+      expandedMenuItemKey,
+      onItemMouseDown,
+      onItemClick
+    } = this.props;
+
+    let { keytipProps } = item;
+    if (keytipProps) {
+      keytipProps = {
+        ...keytipProps,
+        hasMenu: true
+      };
+    }
+
+    const subMenuId = this._getSubMenuId(item);
+    let ariaLabel = '';
+
+    if (item.ariaLabel) {
+      ariaLabel = item.ariaLabel;
+    } else if (item.name) {
+      ariaLabel = item.name;
+    }
+
+    const isChecked: boolean | null | undefined = getIsChecked(item);
+    const canCheck: boolean = isChecked !== null;
+    const defaultRole = canCheck ? 'menuitemcheckbox' : 'menuitem';
+    const itemHasSubmenu = hasSubmenu(item);
+
+    const buttonNativeProperties = getNativeProps(item, buttonProperties);
+    // Do not add the disabled attribute to the button so that it is focusable
+    delete (buttonNativeProperties as any).disabled;
+
+    const itemButtonProperties = {
+      className: classNames.root,
+      onClick: this._onItemClick,
+      onKeyDown: itemHasSubmenu ? this._onItemKeyDown : null,
+      onMouseEnter: this._onItemMouseEnter,
+      onMouseLeave: this._onItemMouseLeave,
+      onMouseDown: (ev: any) => onItemMouseDown ? onItemMouseDown(item, ev) : undefined,
+      onMouseMove: this._onItemMouseMove,
+      href: item.href,
+      title: item.title,
+      'aria-label': ariaLabel,
+      'aria-haspopup': itemHasSubmenu || undefined,
+      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : undefined,
+      'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,
+      'aria-checked': !!isChecked,
+      'aria-posinset': focusableElementIndex + 1,
+      'aria-setsize': totalItemCount,
+      'aria-disabled': isItemDisabled(item),
+      role: item.role || defaultRole,
+      style: item.style
+    };
+
+    return (
+      <KeytipData
+        keytipProps={ keytipProps }
+        ariaDescribedBy={ (buttonNativeProperties as any)['aria-describedby'] }
+        disabled={ isItemDisabled(item) }
+      >
+        { (keytipAttributes: any): JSX.Element => (
+          <button
+            ref={ (btn: HTMLButtonElement) => this._btn = btn }
+            { ...buttonNativeProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
+            { ...itemButtonProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
+            { ...keytipAttributes }
+          >
+            <ChildrenRenderer
+              item={ item }
+              classNames={ classNames }
+              index={ index }
+              onCheckmarkClick={ hasCheckmarks && onItemClick ? onItemClick.bind(this, item) : undefined }
+              hasIcons={ hasIcons }
+            />
+          </button>
+        ) }
+      </KeytipData>
+    );
+  }
+
+  public openSubMenu = (): void => {
+    const { item, openSubMenu } = this.props;
+    if (hasSubmenu(item) && openSubMenu && this._btn) {
+      openSubMenu(item, this._btn);
+    }
+  }
+
+  public dismissSubMenu = (): void => {
+    const { item, dismissSubMenu } = this.props;
+    if (hasSubmenu(item) && dismissSubMenu) {
+      dismissSubMenu();
+    }
+  }
+
+  public dismissMenu = (dismissAll?: boolean): void => {
+    const { dismissMenu } = this.props;
+    if (dismissMenu) {
+      dismissMenu(dismissAll);
+    }
+  }
+
+  private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseEnter } = this.props;
+    if (onItemMouseEnter) {
+      onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  private _onItemMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseMove } = this.props;
+    if (onItemMouseMove) {
+      onItemMouseMove(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  private _onItemClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemClickBase } = this.props;
+    if (onItemClickBase) {
+      onItemClickBase(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  private _onItemMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseLeave } = this.props;
+    if (onItemMouseLeave) {
+      onItemMouseLeave(item, ev);
+    }
+  }
+
+  private _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+    const { item, onItemKeyDown } = this.props;
+    if (onItemKeyDown) {
+      onItemKeyDown(item, ev);
+    }
+  }
+
+  private _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
+    const { getSubMenuId } = this.props;
+    if (getSubMenuId) {
+      return getSubMenuId(item);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
new file mode 100644
index 00000000000000..499bc0fd2abb19
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
@@ -0,0 +1,14 @@
+import { IContextualMenuItem } from '../../ContextualMenu';
+import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+
+export interface IContextualMenuButtonProps extends IContextualMenuItemWrapperProps {
+  /**
+   * Callback to get the subMenu ID for an IContextualMenuItem
+   */
+  getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
+
+  /**
+   * Key of the currently expanded subMenu
+   */
+  expandedMenuItemKey?: string;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx
similarity index 90%
rename from packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx
rename to packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx
index 9e8ae71f134aa4..93d4bbe181307d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import { IContextualMenuItem } from './ContextualMenu.types';
-import { IMenuItemClassNames } from './ContextualMenu.classNames';
+import { IContextualMenuItem } from '../ContextualMenu.types';
+import { IMenuItemClassNames } from '../ContextualMenu.classNames';
 import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
 
 describe('ContextualMenuSplitButton', () => {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
similarity index 97%
rename from packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
rename to packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
index 043d8162f78931..7d02387239dd46 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
@@ -5,15 +5,14 @@ import {
   buttonProperties,
   getNativeProps,
   KeyCodes
-} from '../../Utilities';
-import { IContextualMenuItem } from '../../ContextualMenu';
+} from '../../../Utilities';
+import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
 import {
   IMenuItemClassNames,
   getSplitButtonVerticalDividerClassNames
-} from './ContextualMenu.classNames';
-import { ContextualMenuItem } from './ContextualMenuItem';
+} from '../ContextualMenu.classNames';
 import { KeytipData } from '../../KeytipData';
-import { getIsChecked, isItemDisabled, hasSubmenu } from '../../utilities/contextualMenu/index';
+import { getIsChecked, isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
 import { VerticalDivider } from '../../Divider';
 import { IContextualMenuSplitButtonProps } from './ContextualMenuSplitButton.types';
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
new file mode 100644
index 00000000000000..7749a4ecd48c1b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
@@ -0,0 +1,8 @@
+import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+
+export interface IContextualMenuSplitButtonProps extends IContextualMenuItemWrapperProps {
+  /**
+   * Callback for touch/pointer events on the split button.
+   */
+  onTap?: (ev: React.TouchEvent<HTMLElement> | PointerEvent) => void;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts
similarity index 81%
rename from packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
rename to packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts
index dfa863cde924bc..04f6664b84a8f1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts
@@ -1,17 +1,32 @@
+import { IContextualMenuItem, IContextualMenuItemProps } from '../../ContextualMenu';
+import { IMenuItemClassNames } from '../ContextualMenu.classNames';
 
-import { IContextualMenuItem, IContextualMenuRenderItem } from '../../ContextualMenu';
-import { IMenuItemClassNames } from './ContextualMenu.classNames';
-import { IContextualMenuItemProps } from './ContextualMenuItem.types';
+export interface IContextualMenuItemWrapper {
+  /**
+   * Function to open this item's subMenu, if present.
+   */
+  openSubMenu: () => void;
+
+  /**
+   * Function to close this item's subMenu, if present.
+   */
+  dismissSubMenu: () => void;
 
-export interface IContextualMenuSplitButtonProps extends React.Props<IContextualMenuItem> {
   /**
-   * Optional callback to access the ContextualmenuSplitButton interface. Use this instead of ref for accessing
+   * Dismiss the menu this item belongs to.
+   */
+  dismissMenu: (dismissAll?: boolean) => void;
+}
+
+export interface IContextualMenuItemWrapperProps extends React.Props<IContextualMenuItem> {
+  /**
+   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IContextualMenuRenderItem | null) => void;
+  componentRef?: (component: IContextualMenuItemWrapper | null) => void;
 
   /**
-   * The item that is used to render the split button.
+   * The IContextualMenuItem that is used to render the item in the menu.
    */
   item: IContextualMenuItem;
 
@@ -106,9 +121,4 @@ export interface IContextualMenuSplitButtonProps extends React.Props<IContextual
    * If dismissAll is true, all menus will be closed.
    */
   dismissMenu?: (dismissAll?: boolean) => void;
-
-  /**
-   * Callback for touch/pointer events on the split button.
-   */
-  onTap?: (ev: React.TouchEvent<HTMLElement> | PointerEvent) => void;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuAnchor.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuAnchor.test.tsx.snap
new file mode 100644
index 00000000000000..79afd17750ee41
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuAnchor.test.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContextualMenuButton creates a normal button renders the contextual menu split button correctly 1`] = `
+<div>
+  <a
+    aria-disabled={false}
+    aria-expanded={undefined}
+    aria-haspopup={undefined}
+    aria-owns={undefined}
+    aria-posinset={1}
+    aria-setsize={1}
+    className="root"
+    href={undefined}
+    onClick={[Function]}
+    onKeyDown={null}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    rel={undefined}
+    role="menuitem"
+    style={undefined}
+    target={undefined}
+  >
+    <div
+      className="linkContent"
+    />
+  </a>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuButton.test.tsx.snap
new file mode 100644
index 00000000000000..6cc1f76a5a875e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuButton.test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContextualMenuButton creates a normal button renders the contextual menu split button correctly 1`] = `
+<button
+  aria-checked={false}
+  aria-disabled={false}
+  aria-expanded={undefined}
+  aria-haspopup={undefined}
+  aria-label=""
+  aria-owns={undefined}
+  aria-posinset={1}
+  aria-setsize={1}
+  className="root"
+  href={undefined}
+  onClick={[Function]}
+  onKeyDown={null}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseMove={[Function]}
+  role="menuitem"
+  style={undefined}
+  title={undefined}
+>
+  <div
+    className="linkContent"
+  />
+</button>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuSplitButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
similarity index 100%
rename from packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
rename to packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
new file mode 100644
index 00000000000000..e36d163e24167c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
@@ -0,0 +1,7 @@
+export * from './ContextualMenuAnchor';
+export * from './ContextualMenuAnchor.types';
+export * from './ContextualMenuButton';
+export * from './ContextualMenuButton.types';
+export * from './ContextualMenuSplitButton';
+export * from './ContextualMenuSplitButton.types';
+export * from './IContextualMenuItemWrapper';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
index f641b8f594868d..11c4226f3d2f8f 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ContextMenuItemChildren when a checkmark icon renders the component wit
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ContextualMenuItem
+  Symbol(enzyme.__unrendered__): <Unknown
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -129,7 +129,7 @@ exports[`ContextMenuItemChildren when it has a sub menu renders the menu icon 1`
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ContextualMenuItem
+  Symbol(enzyme.__unrendered__): <Unknown
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -275,7 +275,7 @@ exports[`ContextMenuItemChildren when it has icons when it doesnt have iconProps
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ContextualMenuItem
+  Symbol(enzyme.__unrendered__): <Unknown
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -392,7 +392,7 @@ exports[`ContextMenuItemChildren when it has icons when it has iconProps renders
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ContextualMenuItem
+  Symbol(enzyme.__unrendered__): <Unknown
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",

From 863b40be4ddc208464299be3c086c218fb483aa6 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Fri, 4 May 2018 12:54:28 -0700
Subject: [PATCH 6/8] Move the open/dismiss functions back to
 ContextualMenuItem - Rename the prop to componentRef on IContextualMenuItem -
 Add tests for split button and anchor - Pass a prop function which returns
 the element to use in openSubMenu to ContextualMenuItem

---
 .../ContextualMenu/ContextualMenu.test.tsx    | 189 ++++++++++++++----
 .../ContextualMenu/ContextualMenu.tsx         |   3 -
 .../ContextualMenu/ContextualMenu.types.ts    |   7 +-
 .../ContextualMenu/ContextualMenuItem.tsx     |  57 ++++--
 .../ContextualMenuItem.types.ts               |  45 +++++
 .../ContextualMenuAnchor.tsx                  |  48 ++---
 .../ContextualMenuAnchor.types.ts             |  13 +-
 .../ContextualMenuButton.tsx                  |  56 +++---
 .../ContextualMenuButton.types.ts             |  13 +-
 ....ts => ContextualMenuItemWrapper.types.ts} |  43 +---
 .../ContextualMenuSplitButton.tsx             |  45 ++---
 .../ContextualMenuSplitButton.types.ts        |   9 +-
 .../ContextualMenuItemWrapper/index.ts        |   2 +-
 .../ContextualMenuItem.test.tsx.snap          |   8 +-
 14 files changed, 347 insertions(+), 191 deletions(-)
 rename packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/{IContextualMenuItemWrapper.ts => ContextualMenuItemWrapper.types.ts} (69%)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index ab5642ed213899..3fa6126bc0ed12 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -9,7 +9,7 @@ import { FocusZoneDirection } from '../../FocusZone';
 
 import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
-import { IContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
+import { IContextualMenuRenderItem } from './ContextualMenuItem.types';
 import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
@@ -863,59 +863,160 @@ describe('ContextualMenu', () => {
   });
 
   describe('IContextualMenuRenderItem function tests', () => {
-    const contextualItem = createRef<IContextualMenuItemWrapper>();
+    const contextualItem = createRef<IContextualMenuRenderItem>();
     let menuDismissed: boolean;
     const onDismiss = (ev?: any, dismissAll?: boolean) => { menuDismissed = true; };
 
-    beforeEach(() => {
-      menuDismissed = false;
-      const menu: IContextualMenuItem[] = [
-        {
-          name: 'Test1',
-          key: 'Test1',
-          componentRef: contextualItem,
-          subMenuProps: {
-            items: [
-              {
-                name: 'Test2',
-                key: 'Test2',
-                className: 'SubMenuClass'
-              },
-              {
-                name: 'Test3',
-                key: 'Test3',
-                className: 'SubMenuClass'
-              }
-            ],
+    describe('for a button element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
           }
-        }
-      ];
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
 
-      ReactTestUtils.renderIntoDocument<ContextualMenu>(
-        <ContextualMenu
-          onDismiss={ onDismiss }
-          items={ menu }
-        />
-      );
-    });
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
 
-    it('openSubMenu will open the item`s submenu if present', () => {
-      contextualItem.value!.openSubMenu();
-      expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
     });
 
-    it('dismissSubMenu will close the item`s submenu if present', () => {
-      // Open the submenu with a click
-      const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
-      ReactTestUtils.Simulate.click(menuItem);
-      expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
-      contextualItem.value!.dismissSubMenu();
-      expect(document.querySelector('.SubMenuClass')).toEqual(null);
+    describe('for a split button element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            split: true,
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
+          }
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
+
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
+
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
     });
 
-    it('dismissMenu will close the item`s menu', () => {
-      contextualItem.value!.dismissMenu();
-      expect(menuDismissed).toEqual(true);
+    describe('for an anchor element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            href: '#test',
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
+          }
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
+
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
+
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
     });
   });
 });
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 1f2ad071f3cd75..47736657d61ccd 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -506,7 +506,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
         dismissMenu={ dismissMenu }
-        componentRef={ item.componentRef }
       />
     );
   }
@@ -546,7 +545,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
         dismissMenu={ dismissMenu }
-        componentRef={ item.componentRef }
       />
     );
   }
@@ -583,7 +581,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
         dismissMenu={ dismissMenu }
-        componentRef={ item.componentRef }
         onTap={ this._onPointerAndTouchEvent }
       />
     );
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index 0fcd28fa404d67..0041d785c5c811 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -15,8 +15,7 @@ import { IWithResponsiveModeState } from '../../utilities/decorators/withRespons
 import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';
 export { DirectionalHint } from '../../common/DirectionalHint';
 import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';
-import { IContextualMenuItemProps } from './ContextualMenuItem.types';
-import { IContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
+import { IContextualMenuItemProps, IContextualMenuRenderItem } from './ContextualMenuItem.types';
 import { IKeytipProps } from '../../Keytip';
 
 export enum ContextualMenuItemType {
@@ -257,9 +256,9 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
 export interface IContextualMenuItem {
   /**
-   * Optional callback to access the IContextualMenuItemWrapper interface. This will get passed down to the item that renders the ContextualMenuItem.
+   * Optional callback to access the IContextualMenuRenderItem interface. This will get passed down to ContextualMenuItem.
    */
-  componentRef?: (component: IContextualMenuItemWrapper | null) => void;
+  componentRef?: (component: IContextualMenuRenderItem | null) => void;
 
   /**
    * Unique id to identify the item
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 95f50568e7dd6a..5ab51166bb88e1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
-import { getRTL } from '../../Utilities';
+import { BaseComponent, getRTL } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
@@ -67,19 +67,46 @@ const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
   return null;
 };
 
-export const ContextualMenuItem: React.StatelessComponent<IContextualMenuItemProps> = (props) => {
-  const { item, classNames } = props;
+export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps, {}> {
 
-  return (
-    <div
-      className={
-        item.split ? classNames.linkContentMenu : classNames.linkContent
+  public render() {
+    const { item, classNames } = this.props;
+
+    return (
+      <div
+        className={
+          item.split ? classNames.linkContentMenu : classNames.linkContent
+        }
+      >
+        { renderCheckMarkIcon(this.props) }
+        { renderItemIcon(this.props) }
+        { renderItemName(this.props) }
+        { renderSubMenuIcon(this.props) }
+      </div>
+    );
+  }
+
+  public openSubMenu = (): void => {
+    const { item, openSubMenu, getContainerElement } = this.props;
+    if (getContainerElement) {
+      const containerElement = getContainerElement();
+      if (hasSubmenu(item) && openSubMenu && containerElement) {
+        openSubMenu(item, containerElement);
       }
-    >
-      { renderCheckMarkIcon(props) }
-      { renderItemIcon(props) }
-      { renderItemName(props) }
-      { renderSubMenuIcon(props) }
-    </div>
-  );
-};
\ No newline at end of file
+    }
+  }
+
+  public dismissSubMenu = (): void => {
+    const { item, dismissSubMenu } = this.props;
+    if (hasSubmenu(item) && dismissSubMenu) {
+      dismissSubMenu();
+    }
+  }
+
+  public dismissMenu = (dismissAll?: boolean): void => {
+    const { dismissMenu } = this.props;
+    if (dismissMenu) {
+      dismissMenu(dismissAll);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
index d5b7c5bddb317d..a7a535e4bc51a2 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -1,7 +1,30 @@
 import { IContextualMenuItem } from './ContextualMenu.types';
 import { IMenuItemClassNames } from './ContextualMenu.classNames';
 
+export interface IContextualMenuRenderItem {
+  /**
+   * Function to open this item's subMenu, if present.
+   */
+  openSubMenu: () => void;
+
+  /**
+   * Function to close this item's subMenu, if present.
+   */
+  dismissSubMenu: () => void;
+
+  /**
+   * Dismiss the menu this item belongs to.
+   */
+  dismissMenu: (dismissAll?: boolean) => void;
+}
+
 export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextualMenuItemProps> {
+  /**
+   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IContextualMenuRenderItem | null) => void;
+
   /**
    * The item to display
    */
@@ -26,4 +49,26 @@ export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextu
    * Click handler for the checkmark
    */
   onCheckmarkClick?: ((item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void);
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
+   */
+  openSubMenu?: (item: any, target: HTMLElement) => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
+   */
+  dismissSubMenu?: () => void;
+
+  /**
+   * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
+   * If dismissAll is true, all menus will be closed.
+   */
+  dismissMenu?: (dismissAll?: boolean) => void;
+
+  /**
+   * This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem.
+   * Used for openSubMenu.
+   */
+  getContainerElement?: () => HTMLElement | undefined;
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
index cf494b2518c408..13b4c14892175e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
@@ -3,6 +3,7 @@ import {
   BaseComponent,
   anchorProperties,
   getNativeProps,
+  createRef
 } from '../../../Utilities';
 import { IContextualMenuAnchorProps } from './ContextualMenuAnchor.types';
 import { KeytipData } from '../../KeytipData';
@@ -10,7 +11,7 @@ import { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/in
 import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
 
 export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorProps, {}> {
-  private _anchor: HTMLAnchorElement;
+  private _anchor = createRef<HTMLAnchorElement>();
 
   public render() {
     const {
@@ -23,7 +24,10 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
       hasIcons,
       contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem,
       expandedMenuItemKey,
-      onItemClick
+      onItemClick,
+      openSubMenu,
+      dismissSubMenu,
+      dismissMenu
     } = this.props;
 
     let anchorRel = item.rel;
@@ -36,6 +40,14 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
     const nativeProps = getNativeProps(item, anchorProperties);
     const disabled = isItemDisabled(item);
 
+    let { keytipProps } = item;
+    if (keytipProps && itemHasSubmenu) {
+      keytipProps = {
+        ...keytipProps,
+        hasMenu: true
+      };
+    }
+
     return (
       <div>
         <KeytipData
@@ -47,7 +59,7 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
             <a
               { ...nativeProps }
               { ...keytipAttributes }
-              ref={ (anchor: HTMLAnchorElement) => this._anchor = anchor }
+              ref={ this._anchor }
               href={ item.href }
               target={ item.target }
               rel={ anchorRel }
@@ -66,11 +78,16 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
               onKeyDown={ itemHasSubmenu ? this._onItemKeyDown : null }
             >
               <ChildrenRenderer
+                componentRef={ item.componentRef }
                 item={ item }
                 classNames={ classNames }
                 index={ index }
                 onCheckmarkClick={ hasCheckmarks && onItemClick ? onItemClick.bind(this, item) : undefined }
                 hasIcons={ hasIcons }
+                openSubMenu={ openSubMenu }
+                dismissSubMenu={ dismissSubMenu }
+                dismissMenu={ dismissMenu }
+                getContainerElement={ this._getContainerElement }
               />
             </a>
           ) }
@@ -78,27 +95,6 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
       </div>);
   }
 
-  public openSubMenu = (): void => {
-    const { item, openSubMenu } = this.props;
-    if (hasSubmenu(item) && openSubMenu && this._anchor) {
-      openSubMenu(item, this._anchor);
-    }
-  }
-
-  public dismissSubMenu = (): void => {
-    const { item, dismissSubMenu } = this.props;
-    if (hasSubmenu(item) && dismissSubMenu) {
-      dismissSubMenu();
-    }
-  }
-
-  public dismissMenu = (dismissAll?: boolean): void => {
-    const { dismissMenu } = this.props;
-    if (dismissMenu) {
-      dismissMenu(dismissAll);
-    }
-  }
-
   private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
     const { item, onItemMouseEnter } = this.props;
     if (onItemMouseEnter) {
@@ -133,4 +129,8 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
       return getSubMenuId(item);
     }
   }
+
+  private _getContainerElement = (): HTMLElement | undefined => {
+    return this._anchor.current ? this._anchor.current : undefined;
+  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
index ead336dad99ffa..9109c027b5172c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
@@ -1,14 +1,21 @@
 import { IContextualMenuItem } from '../../ContextualMenu';
-import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
+import { ContextualMenuAnchor } from './ContextualMenuAnchor';
 
 export interface IContextualMenuAnchorProps extends IContextualMenuItemWrapperProps {
   /**
-   * Callback to get the subMenu ID for an IContextualMenuItem
+   * Optional callback to access the ContextualMenuAnchor interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: ContextualMenuAnchor | null) => void;
+
+  /**
+   * Callback to get the subMenu ID for an IContextualMenuItem.
    */
   getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
 
   /**
-   * Key of the currently expanded subMenu
+   * Key of the currently expanded subMenu.
    */
   expandedMenuItemKey?: string;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
index 4b86d083691fb9..542f4eb7b23c62 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
@@ -3,6 +3,7 @@ import {
   BaseComponent,
   buttonProperties,
   getNativeProps,
+  createRef
 } from '../../../Utilities';
 import { IContextualMenuButtonProps } from './ContextualMenuButton.types';
 import { KeytipData } from '../../KeytipData';
@@ -10,7 +11,7 @@ import { getIsChecked, isItemDisabled, hasSubmenu } from '../../../utilities/con
 import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
 
 export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonProps, {}> {
-  private _btn: HTMLButtonElement;
+  private _btn = createRef<HTMLButtonElement>();
 
   public render() {
     const {
@@ -24,17 +25,12 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
       contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem,
       expandedMenuItemKey,
       onItemMouseDown,
-      onItemClick
+      onItemClick,
+      openSubMenu,
+      dismissSubMenu,
+      dismissMenu
     } = this.props;
 
-    let { keytipProps } = item;
-    if (keytipProps) {
-      keytipProps = {
-        ...keytipProps,
-        hasMenu: true
-      };
-    }
-
     const subMenuId = this._getSubMenuId(item);
     let ariaLabel = '';
 
@@ -75,6 +71,14 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
       style: item.style
     };
 
+    let { keytipProps } = item;
+    if (keytipProps && itemHasSubmenu) {
+      keytipProps = {
+        ...keytipProps,
+        hasMenu: true
+      };
+    }
+
     return (
       <KeytipData
         keytipProps={ keytipProps }
@@ -83,17 +87,22 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
       >
         { (keytipAttributes: any): JSX.Element => (
           <button
-            ref={ (btn: HTMLButtonElement) => this._btn = btn }
+            ref={ this._btn }
             { ...buttonNativeProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
             { ...itemButtonProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
             { ...keytipAttributes }
           >
             <ChildrenRenderer
+              componentRef={ item.componentRef }
               item={ item }
               classNames={ classNames }
               index={ index }
               onCheckmarkClick={ hasCheckmarks && onItemClick ? onItemClick.bind(this, item) : undefined }
               hasIcons={ hasIcons }
+              openSubMenu={ openSubMenu }
+              dismissSubMenu={ dismissSubMenu }
+              dismissMenu={ dismissMenu }
+              getContainerElement={ this._getContainerElement }
             />
           </button>
         ) }
@@ -101,27 +110,6 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
     );
   }
 
-  public openSubMenu = (): void => {
-    const { item, openSubMenu } = this.props;
-    if (hasSubmenu(item) && openSubMenu && this._btn) {
-      openSubMenu(item, this._btn);
-    }
-  }
-
-  public dismissSubMenu = (): void => {
-    const { item, dismissSubMenu } = this.props;
-    if (hasSubmenu(item) && dismissSubMenu) {
-      dismissSubMenu();
-    }
-  }
-
-  public dismissMenu = (dismissAll?: boolean): void => {
-    const { dismissMenu } = this.props;
-    if (dismissMenu) {
-      dismissMenu(dismissAll);
-    }
-  }
-
   private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
     const { item, onItemMouseEnter } = this.props;
     if (onItemMouseEnter) {
@@ -163,4 +151,8 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
       return getSubMenuId(item);
     }
   }
+
+  private _getContainerElement = (): HTMLElement | undefined => {
+    return this._btn.current ? this._btn.current : undefined;
+  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
index 499bc0fd2abb19..b06ae35ffb792a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
@@ -1,14 +1,21 @@
 import { IContextualMenuItem } from '../../ContextualMenu';
-import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
+import { ContextualMenuButton } from './ContextualMenuButton';
 
 export interface IContextualMenuButtonProps extends IContextualMenuItemWrapperProps {
   /**
-   * Callback to get the subMenu ID for an IContextualMenuItem
+   * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: ContextualMenuButton | null) => void;
+
+  /**
+   * Callback to get the subMenu ID for an IContextualMenuItem.
    */
   getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
 
   /**
-   * Key of the currently expanded subMenu
+   * Key of the currently expanded subMenu.
    */
   expandedMenuItemKey?: string;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
similarity index 69%
rename from packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts
rename to packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
index 04f6664b84a8f1..95f1058b937c3b 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/IContextualMenuItemWrapper.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
@@ -1,30 +1,7 @@
 import { IContextualMenuItem, IContextualMenuItemProps } from '../../ContextualMenu';
 import { IMenuItemClassNames } from '../ContextualMenu.classNames';
 
-export interface IContextualMenuItemWrapper {
-  /**
-   * Function to open this item's subMenu, if present.
-   */
-  openSubMenu: () => void;
-
-  /**
-   * Function to close this item's subMenu, if present.
-   */
-  dismissSubMenu: () => void;
-
-  /**
-   * Dismiss the menu this item belongs to.
-   */
-  dismissMenu: (dismissAll?: boolean) => void;
-}
-
 export interface IContextualMenuItemWrapperProps extends React.Props<IContextualMenuItem> {
-  /**
-   * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IContextualMenuItemWrapper | null) => void;
-
   /**
    * The IContextualMenuItem that is used to render the item in the menu.
    */
@@ -36,12 +13,12 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
   classNames: IMenuItemClassNames;
 
   /**
-   * The index number of the split button among all items in the contextual menu including things like dividers and headers.
+   * The index number of the wrapper among all items in the contextual menu including things like dividers and headers.
    */
   index: number;
 
   /**
-   * The index number of the split button among all items in the contextual menu excluding dividers and headers.
+   * The index number of the wrapper among all items in the contextual menu excluding dividers and headers.
    */
   focusableElementIndex: number;
 
@@ -51,12 +28,12 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
   totalItemCount: number;
 
   /**
-   * Whether or not if the item for the split button uses checkmarks.
+   * Whether or not if the item for the wrapper uses checkmarks.
    */
   hasCheckmarks?: boolean;
 
   /**
-   * Whether or not the item for the split button uses icons.
+   * Whether or not the item for the wrapper uses icons.
    */
   hasIcons?: boolean;
 
@@ -67,22 +44,22 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
   contextualMenuItemAs?: React.ComponentClass<IContextualMenuItemProps> | React.StatelessComponent<IContextualMenuItemProps>;
 
   /**
-   * Callback for when the user's mouse enters the split button.
+   * Callback for when the user's mouse enters the wrapper.
    */
   onItemMouseEnter?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>, target: HTMLElement) => boolean | void;
 
   /**
-   * Callback for when the user's mouse leaves the split button.
+   * Callback for when the user's mouse leaves the wrapper.
    */
   onItemMouseLeave?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void;
 
   /**
-   * Callback for when the user's mouse moves in the split button.
+   * Callback for when the user's mouse moves in the wrapper.
    */
   onItemMouseMove?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>, target: HTMLElement) => void;
 
   /**
-   * Callback for the mousedown event on the icon button in the split menu.
+   * Callback for the mousedown event on the icon button in the wrapper.
    */
   onItemMouseDown?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void;
 
@@ -92,7 +69,7 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
   executeItemClick?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
 
   /**
-   * Callback for when the click event on the icon button from the split button.
+   * Callback for when the click event on the icon button from the wrapper.
    */
   onItemClick?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
 
@@ -102,7 +79,7 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
   onItemClickBase?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, target: HTMLElement) => void;
 
   /**
-   * Callback for keyboard events on the split button.
+   * Callback for keyboard events on the wrapper.
    */
   onItemKeyDown?: (item: IContextualMenuItem, ev: React.KeyboardEvent<HTMLElement>) => void;
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
index 7d02387239dd46..a81a0be9b32165 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
@@ -12,7 +12,7 @@ import {
   getSplitButtonVerticalDividerClassNames
 } from '../ContextualMenu.classNames';
 import { KeytipData } from '../../KeytipData';
-import { getIsChecked, isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
+import { getIsChecked, isItemDisabled } from '../../../utilities/contextualMenu/index';
 import { VerticalDivider } from '../../Divider';
 import { IContextualMenuSplitButtonProps } from './ContextualMenuSplitButton.types';
 
@@ -84,27 +84,6 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
     );
   }
 
-  public openSubMenu = (): void => {
-    const { item, openSubMenu } = this.props;
-    if (hasSubmenu(item) && openSubMenu && this._splitButton) {
-      openSubMenu(item, this._splitButton);
-    }
-  }
-
-  public dismissSubMenu = (): void => {
-    const { item, dismissSubMenu } = this.props;
-    if (hasSubmenu(item) && dismissSubMenu) {
-      dismissSubMenu();
-    }
-  }
-
-  public dismissMenu = (dismissAll?: boolean): void => {
-    const { dismissMenu } = this.props;
-    if (dismissMenu) {
-      dismissMenu(dismissAll);
-    }
-  }
-
   private _renderSplitPrimaryButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     const isChecked: boolean | null | undefined = getIsChecked(item);
     const canCheck: boolean = isChecked !== null;
@@ -151,7 +130,10 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
     const {
       contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem,
       onItemMouseLeave,
-      onItemMouseDown
+      onItemMouseDown,
+      openSubMenu,
+      dismissSubMenu,
+      dismissMenu
     } = this.props;
 
     const itemProps = {
@@ -161,6 +143,7 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
       subMenuProps: item.subMenuProps,
       submenuIconProps: item.submenuIconProps,
       split: true,
+      key: item.key
     } as IContextualMenuItem;
 
     const buttonProps = assign({}, getNativeProps(itemProps, buttonProperties), {
@@ -175,7 +158,17 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
 
     return (
       <button { ...buttonProps } >
-        <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } hasIcons={ false } />
+        <ChildrenRenderer
+          componentRef={ item.componentRef }
+          item={ itemProps }
+          classNames={ classNames }
+          index={ index }
+          hasIcons={ false }
+          openSubMenu={ openSubMenu }
+          dismissSubMenu={ dismissSubMenu }
+          dismissMenu={ dismissMenu }
+          getContainerElement={ this._getContainerElement }
+        />
       </button >
     );
   }
@@ -292,4 +285,8 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
       this._lastTouchTimeoutId = undefined;
     }, TouchIdleDelay);
   }
+
+  private _getContainerElement = (): HTMLElement | undefined => {
+    return this._splitButton;
+  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
index 7749a4ecd48c1b..bdf4cb9262bf2a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
@@ -1,6 +1,13 @@
-import { IContextualMenuItemWrapperProps } from './IContextualMenuItemWrapper';
+import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
+import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
 
 export interface IContextualMenuSplitButtonProps extends IContextualMenuItemWrapperProps {
+  /**
+   * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: ContextualMenuSplitButton | null) => void;
+
   /**
    * Callback for touch/pointer events on the split button.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
index e36d163e24167c..f4fc0e031142d1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
@@ -4,4 +4,4 @@ export * from './ContextualMenuButton';
 export * from './ContextualMenuButton.types';
 export * from './ContextualMenuSplitButton';
 export * from './ContextualMenuSplitButton.types';
-export * from './IContextualMenuItemWrapper';
\ No newline at end of file
+export * from './ContextualMenuItemWrapper.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
index 11c4226f3d2f8f..f641b8f594868d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ContextMenuItemChildren when a checkmark icon renders the component wit
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -129,7 +129,7 @@ exports[`ContextMenuItemChildren when it has a sub menu renders the menu icon 1`
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -275,7 +275,7 @@ exports[`ContextMenuItemChildren when it has icons when it doesnt have iconProps
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",
@@ -392,7 +392,7 @@ exports[`ContextMenuItemChildren when it has icons when it has iconProps renders
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Unknown
+  Symbol(enzyme.__unrendered__): <ContextualMenuItem
     classNames={
       Object {
         "checkmarkIcon": "checkmarkIcon",

From e06449ad4c036cf26de44b27f310d36a268ad61e Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Mon, 7 May 2018 11:04:49 -0700
Subject: [PATCH 7/8] Make base class ContextualMenuItemWrapper - Move shared
 functions into protected members - Rename getContainerElement to
 getSubmenuTarget

---
 .../ContextualMenu/ContextualMenuItem.tsx     |  6 +-
 .../ContextualMenuItem.types.ts               |  2 +-
 .../ContextualMenuAnchor.tsx                  | 46 ++--------------
 .../ContextualMenuAnchor.types.ts             | 21 -------
 .../ContextualMenuButton.tsx                  | 53 ++----------------
 .../ContextualMenuButton.types.ts             | 21 -------
 .../ContextualMenuItemWrapper.tsx             | 55 +++++++++++++++++++
 .../ContextualMenuItemWrapper.types.ts        | 22 ++++++++
 .../ContextualMenuSplitButton.tsx             | 37 ++++++-------
 .../ContextualMenuSplitButton.types.ts        | 15 -----
 .../ContextualMenuItemWrapper/index.ts        |  4 +-
 11 files changed, 110 insertions(+), 172 deletions(-)
 delete mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
 delete mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
 create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 5ab51166bb88e1..13d90cc6e6a1ce 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -87,9 +87,9 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
   }
 
   public openSubMenu = (): void => {
-    const { item, openSubMenu, getContainerElement } = this.props;
-    if (getContainerElement) {
-      const containerElement = getContainerElement();
+    const { item, openSubMenu, getSubmenuTarget } = this.props;
+    if (getSubmenuTarget) {
+      const containerElement = getSubmenuTarget();
       if (hasSubmenu(item) && openSubMenu && containerElement) {
         openSubMenu(item, containerElement);
       }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
index a7a535e4bc51a2..f9489052a43c3a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -70,5 +70,5 @@ export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextu
    * This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem.
    * Used for openSubMenu.
    */
-  getContainerElement?: () => HTMLElement | undefined;
+  getSubmenuTarget?: () => HTMLElement | undefined;
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
index 13b4c14892175e..f1ab2089c88156 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import {
-  BaseComponent,
   anchorProperties,
   getNativeProps,
   createRef
 } from '../../../Utilities';
-import { IContextualMenuAnchorProps } from './ContextualMenuAnchor.types';
+import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 import { KeytipData } from '../../KeytipData';
 import { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
-import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
+import { ContextualMenuItem } from '../../ContextualMenu';
 
-export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorProps, {}> {
+export class ContextualMenuAnchor extends ContextualMenuItemWrapper {
   private _anchor = createRef<HTMLAnchorElement>();
 
   public render() {
@@ -87,7 +86,7 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
                 openSubMenu={ openSubMenu }
                 dismissSubMenu={ dismissSubMenu }
                 dismissMenu={ dismissMenu }
-                getContainerElement={ this._getContainerElement }
+                getSubmenuTarget={ this._getSubmenuTarget }
               />
             </a>
           ) }
@@ -95,42 +94,7 @@ export class ContextualMenuAnchor extends BaseComponent<IContextualMenuAnchorPro
       </div>);
   }
 
-  private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemMouseEnter } = this.props;
-    if (onItemMouseEnter) {
-      onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);
-    }
-  }
-
-  private _onItemClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemClick } = this.props;
-    if (onItemClick) {
-      onItemClick(item, ev);
-    }
-  }
-
-  private _onItemMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemMouseLeave } = this.props;
-    if (onItemMouseLeave) {
-      onItemMouseLeave(item, ev);
-    }
-  }
-
-  private _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    const { item, onItemKeyDown } = this.props;
-    if (onItemKeyDown) {
-      onItemKeyDown(item, ev);
-    }
-  }
-
-  private _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
-    const { getSubMenuId } = this.props;
-    if (getSubMenuId) {
-      return getSubMenuId(item);
-    }
-  }
-
-  private _getContainerElement = (): HTMLElement | undefined => {
+  protected _getSubmenuTarget = (): HTMLElement | undefined => {
     return this._anchor.current ? this._anchor.current : undefined;
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
deleted file mode 100644
index 9109c027b5172c..00000000000000
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IContextualMenuItem } from '../../ContextualMenu';
-import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
-import { ContextualMenuAnchor } from './ContextualMenuAnchor';
-
-export interface IContextualMenuAnchorProps extends IContextualMenuItemWrapperProps {
-  /**
-   * Optional callback to access the ContextualMenuAnchor interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: ContextualMenuAnchor | null) => void;
-
-  /**
-   * Callback to get the subMenu ID for an IContextualMenuItem.
-   */
-  getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
-
-  /**
-   * Key of the currently expanded subMenu.
-   */
-  expandedMenuItemKey?: string;
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
index 542f4eb7b23c62..dd01a524cdffe9 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import {
-  BaseComponent,
   buttonProperties,
   getNativeProps,
   createRef
 } from '../../../Utilities';
-import { IContextualMenuButtonProps } from './ContextualMenuButton.types';
+import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 import { KeytipData } from '../../KeytipData';
 import { getIsChecked, isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
-import { IContextualMenuItem, ContextualMenuItem } from '../../ContextualMenu';
+import { ContextualMenuItem } from '../../ContextualMenu';
 
-export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonProps, {}> {
+export class ContextualMenuButton extends ContextualMenuItemWrapper {
   private _btn = createRef<HTMLButtonElement>();
 
   public render() {
@@ -102,7 +101,7 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
               openSubMenu={ openSubMenu }
               dismissSubMenu={ dismissSubMenu }
               dismissMenu={ dismissMenu }
-              getContainerElement={ this._getContainerElement }
+              getSubmenuTarget={ this._getSubmenuTarget }
             />
           </button>
         ) }
@@ -110,49 +109,7 @@ export class ContextualMenuButton extends BaseComponent<IContextualMenuButtonPro
     );
   }
 
-  private _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemMouseEnter } = this.props;
-    if (onItemMouseEnter) {
-      onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);
-    }
-  }
-
-  private _onItemMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemMouseMove } = this.props;
-    if (onItemMouseMove) {
-      onItemMouseMove(item, ev, ev.currentTarget as HTMLElement);
-    }
-  }
-
-  private _onItemClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemClickBase } = this.props;
-    if (onItemClickBase) {
-      onItemClickBase(item, ev, ev.currentTarget as HTMLElement);
-    }
-  }
-
-  private _onItemMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { item, onItemMouseLeave } = this.props;
-    if (onItemMouseLeave) {
-      onItemMouseLeave(item, ev);
-    }
-  }
-
-  private _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    const { item, onItemKeyDown } = this.props;
-    if (onItemKeyDown) {
-      onItemKeyDown(item, ev);
-    }
-  }
-
-  private _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
-    const { getSubMenuId } = this.props;
-    if (getSubMenuId) {
-      return getSubMenuId(item);
-    }
-  }
-
-  private _getContainerElement = (): HTMLElement | undefined => {
+  protected _getSubmenuTarget = (): HTMLElement | undefined => {
     return this._btn.current ? this._btn.current : undefined;
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
deleted file mode 100644
index b06ae35ffb792a..00000000000000
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IContextualMenuItem } from '../../ContextualMenu';
-import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
-import { ContextualMenuButton } from './ContextualMenuButton';
-
-export interface IContextualMenuButtonProps extends IContextualMenuItemWrapperProps {
-  /**
-   * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: ContextualMenuButton | null) => void;
-
-  /**
-   * Callback to get the subMenu ID for an IContextualMenuItem.
-   */
-  getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
-
-  /**
-   * Key of the currently expanded subMenu.
-   */
-  expandedMenuItemKey?: string;
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx
new file mode 100644
index 00000000000000..687a9fc0b4b8e8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  BaseComponent
+} from '../../../Utilities';
+import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
+import { IContextualMenuItem } from '../../ContextualMenu';
+
+export class ContextualMenuItemWrapper extends BaseComponent<IContextualMenuItemWrapperProps, {}> {
+
+  protected _onItemMouseEnter = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseEnter } = this.props;
+    if (onItemMouseEnter) {
+      onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  protected _onItemClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemClickBase } = this.props;
+    if (onItemClickBase) {
+      onItemClickBase(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  protected _onItemMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseLeave } = this.props;
+    if (onItemMouseLeave) {
+      onItemMouseLeave(item, ev);
+    }
+  }
+
+  protected _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+    const { item, onItemKeyDown } = this.props;
+    if (onItemKeyDown) {
+      onItemKeyDown(item, ev);
+    }
+  }
+
+  protected _onItemMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { item, onItemMouseMove } = this.props;
+    if (onItemMouseMove) {
+      onItemMouseMove(item, ev, ev.currentTarget as HTMLElement);
+    }
+  }
+
+  protected _getSubMenuId = (item: IContextualMenuItem): string | undefined => {
+    const { getSubMenuId } = this.props;
+    if (getSubMenuId) {
+      return getSubMenuId(item);
+    }
+  }
+
+  protected _getSubmenuTarget = (): HTMLElement | undefined => {
+    return undefined;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
index 95f1058b937c3b..d3b1949f0d07ba 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
@@ -1,7 +1,14 @@
 import { IContextualMenuItem, IContextualMenuItemProps } from '../../ContextualMenu';
 import { IMenuItemClassNames } from '../ContextualMenu.classNames';
+import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 
 export interface IContextualMenuItemWrapperProps extends React.Props<IContextualMenuItem> {
+  /**
+   * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: ContextualMenuItemWrapper | null) => void;
+
   /**
    * The IContextualMenuItem that is used to render the item in the menu.
    */
@@ -83,6 +90,21 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
    */
   onItemKeyDown?: (item: IContextualMenuItem, ev: React.KeyboardEvent<HTMLElement>) => void;
 
+  /**
+   * Callback to get the subMenu ID for an IContextualMenuItem.
+   */
+  getSubMenuId?: (item: IContextualMenuItem) => string | undefined;
+
+  /**
+   * Key of the currently expanded subMenu.
+   */
+  expandedMenuItemKey?: string;
+
+  /**
+   * Callback for touch/pointer events on the split button.
+   */
+  onTap?: (ev: React.TouchEvent<HTMLElement> | PointerEvent) => void;
+
   /**
    * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
index a81a0be9b32165..f6c3c9decff342 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  BaseComponent,
   assign,
   buttonProperties,
   getNativeProps,
@@ -14,13 +13,13 @@ import {
 import { KeytipData } from '../../KeytipData';
 import { getIsChecked, isItemDisabled } from '../../../utilities/contextualMenu/index';
 import { VerticalDivider } from '../../Divider';
-import { IContextualMenuSplitButtonProps } from './ContextualMenuSplitButton.types';
+import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
 
 export interface IContextualMenuSplitButtonState { }
 
 const TouchIdleDelay = 500; /* ms */
 
-export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSplitButtonProps, IContextualMenuSplitButtonState> {
+export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
   private _splitButton: HTMLDivElement;
   private _lastTouchTimeoutId: number | undefined;
   private _processingTouch: boolean;
@@ -84,6 +83,21 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
     );
   }
 
+  protected _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+    const { item, onItemKeyDown } = this.props;
+    if (ev.which === KeyCodes.enter) {
+      this._executeItemClick(ev);
+      ev.preventDefault();
+      ev.stopPropagation();
+    } else if (onItemKeyDown) {
+      onItemKeyDown(item, ev);
+    }
+  }
+
+  protected _getSubmenuTarget = (): HTMLElement | undefined => {
+    return this._splitButton;
+  }
+
   private _renderSplitPrimaryButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     const isChecked: boolean | null | undefined = getIsChecked(item);
     const canCheck: boolean = isChecked !== null;
@@ -167,7 +181,7 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
           openSubMenu={ openSubMenu }
           dismissSubMenu={ dismissSubMenu }
           dismissMenu={ dismissMenu }
-          getContainerElement={ this._getContainerElement }
+          getSubmenuTarget={ this._getSubmenuTarget }
         />
       </button >
     );
@@ -240,17 +254,6 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
     }
   }
 
-  private _onItemKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    const { item, onItemKeyDown } = this.props;
-    if (ev.which === KeyCodes.enter) {
-      this._executeItemClick(ev);
-      ev.preventDefault();
-      ev.stopPropagation();
-    } else if (onItemKeyDown) {
-      onItemKeyDown(item, ev);
-    }
-  }
-
   private _onTouchStart = (ev: React.TouchEvent<HTMLElement>): void => {
     if (this._splitButton && !('onpointerdown' in this._splitButton)) {
       this._handleTouchAndPointerEvent(ev);
@@ -285,8 +288,4 @@ export class ContextualMenuSplitButton extends BaseComponent<IContextualMenuSpli
       this._lastTouchTimeoutId = undefined;
     }, TouchIdleDelay);
   }
-
-  private _getContainerElement = (): HTMLElement | undefined => {
-    return this._splitButton;
-  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
deleted file mode 100644
index bdf4cb9262bf2a..00000000000000
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';
-import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
-
-export interface IContextualMenuSplitButtonProps extends IContextualMenuItemWrapperProps {
-  /**
-   * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: ContextualMenuSplitButton | null) => void;
-
-  /**
-   * Callback for touch/pointer events on the split button.
-   */
-  onTap?: (ev: React.TouchEvent<HTMLElement> | PointerEvent) => void;
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
index f4fc0e031142d1..e110536ca48139 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/index.ts
@@ -1,7 +1,5 @@
 export * from './ContextualMenuAnchor';
-export * from './ContextualMenuAnchor.types';
 export * from './ContextualMenuButton';
-export * from './ContextualMenuButton.types';
 export * from './ContextualMenuSplitButton';
-export * from './ContextualMenuSplitButton.types';
+export * from './ContextualMenuItemWrapper';
 export * from './ContextualMenuItemWrapper.types';
\ No newline at end of file

From 782e08f4546b4d88a7bcbf45c5c58eb7fa33d223 Mon Sep 17 00:00:00 2001
From: Kelsey Young <keyou@microsoft.com>
Date: Mon, 7 May 2018 12:18:00 -0700
Subject: [PATCH 8/8] Remove dismiss bind and pass through undefined at
 ContextualMenuItem

---
 .../src/components/ContextualMenu/ContextualMenu.tsx     | 9 +++------
 .../src/components/ContextualMenu/ContextualMenuItem.tsx | 8 ++++----
 .../ContextualMenu/ContextualMenuItem.types.ts           | 2 +-
 .../ContextualMenuItemWrapper.types.ts                   | 2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 47736657d61ccd..010ffcf65223a8 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -482,7 +482,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _renderAnchorMenuItem(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, focusableElementIndex: number, totalItemCount: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
     const { contextualMenuItemAs } = this.props;
-    const dismissMenu = this.dismiss.bind(this, undefined);
     const { expandedMenuItemKey } = this.state;
     return (
       <ContextualMenuAnchor
@@ -505,7 +504,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         expandedMenuItemKey={ expandedMenuItemKey }
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
-        dismissMenu={ dismissMenu }
+        dismissMenu={ this.dismiss }
       />
     );
   }
@@ -519,7 +518,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     hasCheckmarks?: boolean,
     hasIcons?: boolean) {
     const { contextualMenuItemAs } = this.props;
-    const dismissMenu = this.dismiss.bind(this, undefined);
     const { expandedMenuItemKey } = this.state;
 
     return (
@@ -544,7 +542,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         expandedMenuItemKey={ expandedMenuItemKey }
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
-        dismissMenu={ dismissMenu }
+        dismissMenu={ this.dismiss }
       />
     );
   }
@@ -558,7 +556,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     hasCheckmarks?: boolean,
     hasIcons?: boolean): JSX.Element {
     const { contextualMenuItemAs } = this.props;
-    const dismissMenu = this.dismiss.bind(this, undefined);
 
     return (
       <ContextualMenuSplitButton
@@ -580,7 +577,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onItemKeyDown={ this._onItemKeyDown }
         openSubMenu={ this._onItemSubMenuExpand }
         dismissSubMenu={ this._onSubMenuDismiss }
-        dismissMenu={ dismissMenu }
+        dismissMenu={ this.dismiss }
         onTap={ this._onPointerAndTouchEvent }
       />
     );
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
index 13d90cc6e6a1ce..5de1b09a30b8f1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -89,9 +89,9 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
   public openSubMenu = (): void => {
     const { item, openSubMenu, getSubmenuTarget } = this.props;
     if (getSubmenuTarget) {
-      const containerElement = getSubmenuTarget();
-      if (hasSubmenu(item) && openSubMenu && containerElement) {
-        openSubMenu(item, containerElement);
+      const submenuTarget = getSubmenuTarget();
+      if (hasSubmenu(item) && openSubMenu && submenuTarget) {
+        openSubMenu(item, submenuTarget);
       }
     }
   }
@@ -106,7 +106,7 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
   public dismissMenu = (dismissAll?: boolean): void => {
     const { dismissMenu } = this.props;
     if (dismissMenu) {
-      dismissMenu(dismissAll);
+      dismissMenu(undefined /* ev */, dismissAll);
     }
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
index f9489052a43c3a..7bbedea0c442e3 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -64,7 +64,7 @@ export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextu
    * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
    * If dismissAll is true, all menus will be closed.
    */
-  dismissMenu?: (dismissAll?: boolean) => void;
+  dismissMenu?: (ev?: any, dismissAll?: boolean) => void;
 
   /**
    * This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem.
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
index d3b1949f0d07ba..75d95c01acdad5 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.types.ts
@@ -119,5 +119,5 @@ export interface IContextualMenuItemWrapperProps extends React.Props<IContextual
    * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
    * If dismissAll is true, all menus will be closed.
    */
-  dismissMenu?: (dismissAll?: boolean) => void;
+  dismissMenu?: (ev?: any, dismissAll?: boolean) => void;
 }
\ No newline at end of file