OverflowSet: allow the OverflowSet to not be contained within a FocusZone

common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "OverflowSet: Allow the OverflowSet to not be contained within a FocusZone",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import {
   css,
   BaseComponent,
-  createRef
+  createRef,
+  getNativeProps,
+  divProperties,
+  focusFirstChild
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
 import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types';
@@ -14,6 +17,17 @@ const styles: any = stylesImport;
 export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements IOverflowSet {
 
   private _focusZone = createRef<FocusZone>();
+  private _divContainer = createRef<HTMLDivElement>();
+
+  constructor(props: IOverflowSetProps) {
+    super(props);
+
+    if (props.doNotContainWithinFocusZone) {
+      this._warnMutuallyExclusive({
+        'doNotContainWithinFocusZone': 'focusZoneProps'
+      });
+    }
+  }
 
   public render() {
     const {
@@ -22,29 +36,54 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
       className,
       focusZoneProps,
       vertical = false,
-      role = 'menubar'
+      role = 'menubar',
+      doNotContainWithinFocusZone
     } = this.props;
 
+    let Tag;
+    let uniqueComponentProps;
+
+    if (doNotContainWithinFocusZone) {
+      Tag = 'div';
+      uniqueComponentProps = {
+        ...getNativeProps(this.props, divProperties),
+        ref: this._divContainer
+      };
+    } else {
+      Tag = FocusZone;
+      uniqueComponentProps = {
+        ...focusZoneProps,
+        componentRef: this._focusZone,
+        direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal
+      };
+    }
+
     return (
-      <FocusZone
-        { ...focusZoneProps }
-        componentRef={ this._focusZone }
+      <Tag
+        { ...uniqueComponentProps }
         className={ mergeStyles(
           'ms-OverflowSet',
           styles.root,
           vertical && styles.rootVertical,
           className
         ) }
-        direction={ vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal }
         role={ role }
       >
         { items && this._onRenderItems(items) }
         { overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) }
-      </FocusZone>
+      </Tag>
     );
   }
 
   public focus() {
+    if (this.props.doNotContainWithinFocusZone) {
+      if (this._divContainer.value) {
+        focusFirstChild(this._divContainer.value);
+      }
+
+      return;
+    }
+
     if (this._focusZone.value) {
       this._focusZone.value.focus();
     }

packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts

@@ -50,9 +50,19 @@ export interface IOverflowSetProps extends React.Props<OverflowSet> {
 
   /**
    * Custom properties for OverflowSet's FocusZone.
+   * If doNotContainWithinFocusZone is set to true focusZoneProps will be ignored.
+   * Use one or the other
    */
   focusZoneProps?: IFocusZoneProps;
 
+  /**
+   * If true do not contain the OverflowSet inside of a FocusZone,
+   * otherwise the OverflowSet will contain a FocusZone.
+   * If this is set to true focusZoneProps will be ignored.
+   * Use one or the other
+   */
+  doNotContainWithinFocusZone?: boolean;
+
   /**
    * The role for the OverflowSet.
    * @default 'menubar'