Merge branch 'master' into applied-prettier

* master:
  CommandBarPage: Remove FabricJS reference (microsoft#5087)
  Applying package updates.
  Reverse commit for PR microsoft#4897 (microsoft#5085)

apps/fabric-website/package.json

@@ -42,7 +42,7 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "color-functions": "1.1.0",
     "json-loader": "^0.5.7",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "tslib": "^1.7.1"
   }
 }

apps/ssr-tests/package.json

@@ -22,7 +22,7 @@
     "@types/mocha": "2.2.39",
     "@types/webpack-env": "1.13.0",
     "mocha": "^3.3.0",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "raw-loader": "^0.5.1",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",

apps/test-bundle-button/package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "tslib": "^1.7.1"
   }
 }

apps/todo-app/package.json

@@ -20,7 +20,7 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "es6-promise": "^4.1.0",
     "immutability-helper": "^2.6.4",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
     "typescript": "2.8.1",

apps/vr-tests/package.json

@@ -29,7 +29,7 @@
     "storybook-readme": "=3.0.6"
   },
   "dependencies": {
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
     "typescript": "2.8.1",

common/changes/office-ui-fabric-react/commandbar-fabricjs_2018-06-04-19-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "CommandBarPage: Remove fabric js reference.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "lynam.emily@gmail.com"
+}

packages/experiments/package.json

@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0",
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0",
     "@uifabric/icons": ">=6.0.0 <7.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"

packages/office-ui-fabric-react/CHANGELOG.json

@@ -1,6 +1,20 @@
 {
   "name": "office-ui-fabric-react",
   "entries": [
+    {
+      "version": "6.4.0",
+      "tag": "office-ui-fabric-react_v6.4.0",
+      "date": "Mon, 04 Jun 2018 18:50:06 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "471bf4a404b2732ca1e83e7e64158957aa178413",
+            "comment": "Revert PR 4897"
+          }
+        ]
+      }
+    },
     {
       "version": "6.3.0",
       "tag": "office-ui-fabric-react_v6.3.0",

packages/office-ui-fabric-react/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - office-ui-fabric-react
 
-This log was last generated on Mon, 04 Jun 2018 10:16:13 GMT and should not be manually modified.
+This log was last generated on Mon, 04 Jun 2018 18:50:06 GMT and should not be manually modified.
+
+## 6.4.0
+Mon, 04 Jun 2018 18:50:06 GMT
+
+### Minor changes
+
+- Revert PR 4897
 
 ## 6.3.0
 Mon, 04 Jun 2018 10:16:13 GMT

packages/office-ui-fabric-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx

@@ -64,7 +64,6 @@ export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}>
             {require<string>('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md')}
           </PageMarkdown>
         }
-        related={<a href="https://dev.office.com/fabric-js/Components/CommandBar/CommandBar.html">Fabric JS</a>}
         isHeaderVisible={this.props.isHeaderVisible}
         componentStatus={<ComponentStatus {...CommandBarStatus} />}
       />

packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
-import { KeyCodes, createRef } from '../../Utilities';
+import { KeyCodes } from '../../Utilities';
+
 import { FocusZone, FocusZoneDirection } from '../FocusZone';
 import { FocusTrapZone } from './FocusTrapZone';
 
 // rAF does not exist in node - let's mock it
 window.requestAnimationFrame = (callback: FrameRequestCallback) => {
-  const r = window.setTimeout(callback, 16);
-  jest.runAllTimers();
-  return r;
+  return window.setTimeout(callback, 16);
 };
-const animationFrame = () => new Promise(resolve => window.requestAnimationFrame(resolve));
+
 jest.useFakeTimers();
 
 describe('FocusTrapZone', () => {
@@ -263,95 +263,4 @@ describe('FocusTrapZone', () => {
 
     jest.runAllTimers();
   });
-
-  describe('Focusing the FTZ', () => {
-    function setupTest(focusPreviouslyFocusedInnerElement: boolean) {
-      const focusTrapZoneRef = createRef<FocusTrapZone>();
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
-        <div onFocusCapture={_onFocus}>
-          <FocusTrapZone
-            forceFocusInsideTrap={false}
-            focusPreviouslyFocusedInnerElement={focusPreviouslyFocusedInnerElement}
-            data-is-focusable={true}
-            ref={focusTrapZoneRef}
-          >
-            <button className={'f'}>f</button>
-            <FocusZone>
-              <button className={'a'}>a</button>
-              <button className={'b'}>b</button>
-            </FocusZone>
-          </FocusTrapZone>
-          <button className={'z'}>z</button>
-        </div>
-      ) as HTMLElement;
-
-      const focusTrapZone = ReactDOM.findDOMNode(focusTrapZoneRef.current!) as Element;
-      const buttonF = topLevelDiv.querySelector('.f') as HTMLElement;
-      const buttonA = topLevelDiv.querySelector('.a') as HTMLElement;
-      const buttonB = topLevelDiv.querySelector('.b') as HTMLElement;
-      const buttonZ = topLevelDiv.querySelector('.z') as HTMLElement;
-
-      // Assign bounding locations to buttons.
-      setupElement(buttonF, { clientRect: { top: 0, bottom: 10, left: 0, right: 10 } });
-      setupElement(buttonA, { clientRect: { top: 10, bottom: 20, left: 0, right: 10 } });
-      setupElement(buttonB, { clientRect: { top: 20, bottom: 30, left: 0, right: 10 } });
-      setupElement(buttonZ, { clientRect: { top: 30, bottom: 40, left: 0, right: 10 } });
-
-      return { focusTrapZone, buttonF, buttonA, buttonB, buttonZ };
-    }
-
-    it('goes to previously focused element when focusing the FTZ', async () => {
-      expect.assertions(4);
-
-      const { focusTrapZone, buttonF, buttonB, buttonZ } = setupTest(true /*focusPreviouslyFocusedInnerElement*/);
-
-      // Manually focusing FTZ when FTZ has never
-      // had focus within should go to 1st focusable inner element.
-      ReactTestUtils.Simulate.focus(focusTrapZone);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonF);
-
-      // Focus inside the trap zone, not the first element.
-      ReactTestUtils.Simulate.focus(buttonB);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonB);
-
-      // Focus outside the trap zone
-      ReactTestUtils.Simulate.focus(buttonZ);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonZ);
-
-      // Manually focusing FTZ should return to originally focused inner element.
-      ReactTestUtils.Simulate.focus(focusTrapZone);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonB);
-    });
-
-    it('goes to first focusable element when focusing the FTZ', async () => {
-      expect.assertions(4);
-
-      const { focusTrapZone, buttonF, buttonB, buttonZ } = setupTest(false /*focusPreviouslyFocusedInnerElement*/);
-
-      // Manually focusing FTZ when FTZ has never
-      // had focus within should go to 1st focusable inner element.
-      ReactTestUtils.Simulate.focus(focusTrapZone);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonF);
-
-      // Focus inside the trap zone, not the first element.
-      ReactTestUtils.Simulate.focus(buttonB);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonB);
-
-      // Focus outside the trap zone
-      ReactTestUtils.Simulate.focus(buttonZ);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonZ);
-
-      // Manually focusing FTZ should go to the first focusable element.
-      ReactTestUtils.Simulate.focus(focusTrapZone);
-      await animationFrame();
-      expect(lastFocusedElement).toBe(buttonF);
-    });
-  });
 });

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

@@ -18,8 +18,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   private static _clickStack: FocusTrapZone[] = [];
 
   private _root = createRef<HTMLDivElement>();
-  private _previouslyFocusedElementOutsideTrapZone: HTMLElement;
-  private _previouslyFocusedElementInTrapZone?: HTMLElement;
+  private _previouslyFocusedElement: HTMLElement;
   private _isInFocusStack = false;
   private _isInClickStack = false;
 
@@ -43,10 +42,10 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       disableFirstFocus = false
     } = this.props;
 
-    this._previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss
+    this._previouslyFocusedElement = elementToFocusOnDismiss
       ? elementToFocusOnDismiss
       : (document.activeElement as HTMLElement);
-    if (!elementContains(this._root.current, this._previouslyFocusedElementOutsideTrapZone) && !disableFirstFocus) {
+    if (!elementContains(this._root.current, this._previouslyFocusedElement) && !disableFirstFocus) {
       this.focus();
     }
 
@@ -61,8 +60,8 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
 
   public componentWillReceiveProps(nextProps: IFocusTrapZoneProps): void {
     const { elementToFocusOnDismiss } = nextProps;
-    if (elementToFocusOnDismiss && this._previouslyFocusedElementOutsideTrapZone !== elementToFocusOnDismiss) {
-      this._previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss;
+    if (elementToFocusOnDismiss && this._previouslyFocusedElement !== elementToFocusOnDismiss) {
+      this._previouslyFocusedElement = elementToFocusOnDismiss;
     }
   }
 
@@ -85,11 +84,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     const activeElement = document.activeElement as HTMLElement;
     if (
       !ignoreExternalFocusing &&
-      this._previouslyFocusedElementOutsideTrapZone &&
-      typeof this._previouslyFocusedElementOutsideTrapZone.focus === 'function' &&
+      this._previouslyFocusedElement &&
+      typeof this._previouslyFocusedElement.focus === 'function' &&
       (elementContains(this._root.value, activeElement) || activeElement === document.body)
     ) {
-      focusAsync(this._previouslyFocusedElementOutsideTrapZone);
+      focusAsync(this._previouslyFocusedElement);
     }
   }
 
@@ -104,26 +103,17 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
         ref={this._root}
         aria-labelledby={ariaLabelledBy}
         onKeyDown={this._onKeyboardHandler}
-        onFocusCapture={this._onFocusCapture}
       >
         {this.props.children}
       </div>
     );
   }
 
+  /**
+   * Need to expose this method in case of popups since focus needs to be set when popup is opened
+   */
   public focus() {
-    const { focusPreviouslyFocusedInnerElement, firstFocusableSelector } = this.props;
-
-    if (
-      focusPreviouslyFocusedInnerElement &&
-      this._previouslyFocusedElementInTrapZone &&
-      elementContains(this._root.value, this._previouslyFocusedElementInTrapZone)
-    ) {
-      // focus on the last item that had focus in the zone before we left the zone
-      focusAsync(this._previouslyFocusedElementInTrapZone);
-      return;
-    }
-
+    const { firstFocusableSelector } = this.props;
     const focusSelector =
       typeof firstFocusableSelector === 'string'
         ? firstFocusableSelector
@@ -150,29 +140,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  private _onFocusCapture = (ev: React.FocusEvent<HTMLDivElement>) => {
-    if (this.props.onFocusCapture) {
-      this.props.onFocusCapture(ev);
-    }
-    if (ev.isDefaultPrevented()) {
-      return;
-    }
-
-    if (ev.target === ev.currentTarget) {
-      // If the trap zone gets focus, pass on focus to either first focusable
-      // child element or the last focused element when this zone last had
-      // a focused child (depending on a prop).
-      this.focus();
-      ev.preventDefault();
-      ev.stopPropagation();
-    } else {
-      // every time focus changes within the trap zone, remember the focused element so that
-      // it can be restored if focus leaves the pane and returns via keystroke (i.e. via a call to this.focus(true))
-      this._previouslyFocusedElementInTrapZone = ev.target as HTMLElement;
-    }
-  };
-
-  private _onKeyboardHandler = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
+  private _onKeyboardHandler = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
     }

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 
 export interface IFocusTrapZone {
   /**
-   * Sets focus to a descendant in the Trap Zone.
-   * See firstFocusableSelector and focusPreviouslyFocusedInnerElement for details.
+   * Sets focus on the first focusable, or configured, child in focus trap zone
    */
   focus: () => void;
 }
@@ -45,7 +44,7 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
   forceFocusInsideTrap?: boolean;
 
   /**
-   * Indicates the selector for first focusable item.  Only applies if focusPreviouslyFocusedInnerElement == false.
+   * Indicates the selector for first focusable item
    */
   firstFocusableSelector?: string | (() => string);
 
@@ -56,11 +55,7 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
   disableFirstFocus?: boolean;
 
   /**
-   * Specifies the algorithm used to determine which descendant element to focus when the FocusTrapZone is focused.
-   * If false, the first focusable descendant, filtered by the firstFocusableSelector property if present, is chosen.
-   * If true, the element that was focused when the Trap Zone last had a focused descendant is chosen.
-   * If it has never had a focused descendant before, behavior falls back to the first focused descendant.
-   * @default false
+   * Optional, onKeyDown event handler
    */
-  focusPreviouslyFocusedInnerElement?: boolean;
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
 }

packages/variants/package.json

@@ -28,6 +28,6 @@
   },
   "dependencies": {
     "tslib": "^1.7.1",
-    "office-ui-fabric-react": ">=6.3.0 <7.0.0"
+    "office-ui-fabric-react": ">=6.4.0 <7.0.0"
   }
 }