From 47545a22cb6a268b339ba17eb4bf2c215393f885 Mon Sep 17 00:00:00 2001
From: abenems <abene@microsoft.com>
Date: Thu, 1 Sep 2016 16:13:45 -0700
Subject: [PATCH 01/18] Persona: now renders children within the details, and
 overflow on details removed (#215)

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* adding an optional control property to the Persona control, to support edit spuser site permissions

* resolve comments

* resolve comments

* Minor changes.
---
 src/components/Persona/Persona.scss |  1 -
 src/components/Persona/Persona.tsx  | 19 +++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss
index 2c1c9530766efc..c8b18136f3744c 100644
--- a/src/components/Persona/Persona.scss
+++ b/src/components/Persona/Persona.scss
@@ -148,7 +148,6 @@ $ms-color-initials-darkRed:     #b91d47;
   display: table-cell;
   padding: 0 12px;
   vertical-align: middle;
-  overflow: hidden;
 }
 
 .ms-Persona-primaryText,
diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx
index b4fda7fbb44af0..d52c2106afff70 100644
--- a/src/components/Persona/Persona.tsx
+++ b/src/components/Persona/Persona.tsx
@@ -23,19 +23,29 @@ export class Persona extends React.Component<IPersonaProps, any> {
   };
 
   public render() {
-    let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props;
+    let {
+      className,
+      size,
+      imageUrl,
+      imageInitials,
+      initialsColor,
+      presence,
+      primaryText,
+      secondaryText,
+      tertiaryText,
+      optionalText,
+      hidePersonaDetails
+    } = this.props;
 
     return (
-      <div { ... this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
+      <div { ...this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
         { size !== PersonaSize.tiny && (
           <div className='ms-Persona-imageArea'>
             <div className={ css('ms-Persona-initials', PERSONA_INITIALS_COLOR[initialsColor]) }>{ imageInitials }</div>
             <Image className='ms-Persona-image' imageFit={ ImageFit.cover } src={ imageUrl } />
           </div>
         ) }
-
         { presence !== PersonaPresence.none && <div className='ms-Persona-presence'></div> }
-
         { !hidePersonaDetails && (
           <div className='ms-Persona-details'>
             <div className='ms-Persona-primaryText'>{ primaryText }</div>
@@ -44,6 +54,7 @@ export class Persona extends React.Component<IPersonaProps, any> {
             ) : (null) }
             <div className='ms-Persona-tertiaryText'>{ tertiaryText }</div>
             <div className='ms-Persona-optionalText'>{ optionalText }</div>
+            { this.props.children }
           </div>) }
       </div>
     );

From bd0ad88c8a7dc08b32804d03b7647f2dee2513d4 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Thu, 1 Sep 2016 17:31:10 -0700
Subject: [PATCH 02/18] Adding @autobind usage to a number of the components.
 (#233)

* Updating GroupedList, Link, MarqueeSelection, Breadcrumb, Toggle, Callout

* Updating autobinds for Checkbox, ColorPicker, CommandBar, ContextualMenu.

* Updating SelectionZone autobinds.

* Adding autobind to Utilities export.

* Adding best practice notes.

* Updating autobind for FocusZone.

* Removing dead code.
---
 ghdocs/BESTPRACTICES.md                       | 335 +++++++++++++++++-
 src/Utilities.ts                              |   1 +
 src/components/Breadcrumb/Breadcrumb.tsx      |   8 +-
 src/components/Callout/Callout.tsx            |   4 +-
 src/components/Checkbox/Checkbox.tsx          |   4 +-
 src/components/ColorPicker/ColorPicker.tsx    |  15 +-
 src/components/ColorPicker/ColorRectangle.tsx |   7 +-
 src/components/ColorPicker/ColorSlider.tsx    |   7 +-
 src/components/CommandBar/CommandBar.tsx      |   7 +-
 .../ContextualMenu/ContextualMenu.tsx         |  25 +-
 src/components/FocusZone/FocusZone.tsx        |  15 +-
 src/components/GroupedList/GroupFooter.tsx    |   7 +-
 src/components/GroupedList/GroupHeader.tsx    |   8 +-
 src/components/GroupedList/GroupedList.tsx    |  12 +-
 src/components/Link/Link.tsx                  |  11 +-
 .../MarqueeSelection/MarqueeSelection.tsx     |   4 +-
 src/components/Toggle/Toggle.tsx              |   4 +-
 src/utilities/selection/SelectionZone.tsx     |  22 +-
 18 files changed, 407 insertions(+), 89 deletions(-)

diff --git a/ghdocs/BESTPRACTICES.md b/ghdocs/BESTPRACTICES.md
index 130a90ef9c8365..c04dd9aeffdcdc 100644
--- a/ghdocs/BESTPRACTICES.md
+++ b/ghdocs/BESTPRACTICES.md
@@ -23,6 +23,138 @@ interface IButton {
 }
 ```
 
+## Use @autobind. Avoid ALL binds in templates
+
+The autobind decorator simplifies making event callbacks "bound" to the instance. It's easy to use:
+
+```typescript
+class Foo {
+
+  @autobind
+  public _onClick(ev: React.MouseEvent) {
+  }
+
+}
+```
+
+When we use bind in a template, it means that the function is recreated every time, which is an anti-pattern.
+
+## For gathering refs, avoid string refs, use resolve functions
+
+Facebook has deprecated the use of string refs. Plus, string refs don't play very well with some scenarios like in Layered content, where the content may be asynchronously rendered. The recommendation is to use functions to resolve refs. These functions must be pre-bound to
+
+Bad:
+```typescript
+public render() {
+  return <div ref='root' />
+}
+```
+
+Bad:
+```typescript
+public render() {
+  return <div ref={ (el) => this._root = el } />
+}
+```
+
+Good:
+```typescript
+private _root: HTMLElement;
+private _resolveRoot: (element: HTMLElement) => any;
+
+constructor() {
+  this._resolveRoot = (el: HTMLElement) => this._root = el;
+}
+
+public render() {
+  return <div ref={ this._resolveRoot } />
+}
+```
+
+Note that it's very critical you do NOT inline the functions in render! This causes weird side effects, because the function
+is recreated. If you do this, react will call your function with null to clear it, and then render, and then once complete, will
+call it again with the element. This creates timing issues where your ref may be null when you didn't expect.
+
+See example here that illustates refs being re-evaluated:
+
+http://codepen.io/dzearing/pen/WGZOaR
+
+## Use unique keys for items in a mapped array, avoid indexes for keys
+
+```typescript
+public render() {
+  return (
+    <div>
+      { this.props.items.map((item, index)=> (
+        <div key={ item.key }>
+          <input type="text" />
+        </div>
+      )) }
+    </div>
+  );
+}
+```
+
+When you need to map data, require that your data have unique ids available. When you map the data to content, use the id as
+the item's key. This helps React's dom diffing to understand which elements represent which items.
+
+When your code uses index as the key, this can cause unexpected side effects. For example, say that each component you map items to
+maintains some internal state, like the value in an uncontrolled input box. Removing an item in the array will not reset that state
+and react will think the first text box still represents key "0", which is actually now a different item, and thus will not re-render
+the component, leaving the old state intact.
+
+So lesson is, use actual unique ids for items that come from the data, rather than generated by the ux component, and thus require
+that your data has ids so that you can use that as a unique identifier for rendering.
+
+## Avoid nesting content in an array, wrap mapped content in component instead.
+
+When we do inline mapped entries, we want to inline the content in the map:
+
+Bad:
+```typescript
+class Foo extends React.Component {
+  public render() {
+    return (
+      <div>
+        { items.map(item => (
+          <div key={ item.key } onClick={ this._onItemClick.bind(this, item) }>{ item.name }</div>
+        ))}
+      </div>
+    );
+  }
+}
+```
+
+Better:
+```typescript
+class Foo extends React.Component {
+  public render() {
+    return (
+      <div>
+        { items.map(item => (
+        <ItemComponent key={ item.key } item={ item } />
+        )) }
+      </div>
+    );
+  }
+}
+
+class ItemComponent extends React.Component<...> {
+  let { item } = this.props;
+
+  render() {
+    return (
+      <div onClick={ this._onClick }>{ item.name }</div>
+    );
+  }
+
+  @autobind
+  _onClick(ev: MouseEvent) {
+
+  }
+}
+```
+
 ## Extend from BaseComponent instead of React.Component in most cases.
 
 In the common folder, there exists a BaseComponent class. For simple components, it may be unnecessary to use.
@@ -56,7 +188,208 @@ If specific component elements need special classnames injected, add more classN
 
 A component's SCSS file should ONLY include files applicable to the component, and should not define styles for any other component.
 
-# Class name guidelines
+# Data/state management best practices
+
+## Things to flat out avoid
+
+Singletons and globals. Do not share state of a component via a singleton instance object. This is a pure anti-pattern for the following reasons:
+
+* Singletons have no lifetime and therefore can't initialize/clean up when they aren't used.
+* Singletons often paint you into a corner when you want more than one of the same thing on the page.
+* They are often difficult to test without polluting states required for other tests.
+* The make non-browser scenario reuse really difficult. (Build tooling, server side code.)
+
+Data and state should always follow the lifetime of the component that owns it. When that component is no longer needed, the state should
+be garbage collected, event handlers should be removed, and xhr requires spawned in that context should be cancelled.
+
+There are cases where everything should share a common instance of a store; Persona presence is a great example. We have solutions that enable the code within a component scope to access shared stores. See store usage section below.
+
+## Use const values global to a file, rather than as static members
+
+Don't use public/private statics, use file scope.
+
+Bad:
+```typescript
+class Foo {
+  private static DEFAULT_DELAY = 300;
+}
+```
+
+Good:
+```typescript
+const DEFAULT_DELAY = 300;
+
+class Foo {
+}
+```
+
+Note: using file scopes minimizes the name down to 1 character, whereas this.REALLY_LONG_NAME doesn't minify the name. Caveat being
+that if you export it, minify won't touch exports.
+
+## Use private members only for managing state local to a component that should not affect rendering when mutating
+
+Bad:
+```typescript
+class Foo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMounted: false
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      isMounted: true
+    });
+  }
+
+  render() {
+    return <div>Hello!</div>
+  }
+}
+```
+
+Good:
+```typescript
+class Foo extends React.Component {
+  private _isMounted: boolean;
+
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  render() {
+    return <div>Hello!</div>
+  }
+}
+```
+
+Basically privates should only be use for tracking this that in no way affect the frequency of render. In some cases, you many
+have an object which fires change events yet doesn't mutate, and you want to re-render on change events. In these cases, privates
+may be used to store the object reference.
+
+## Use component state only for managing local state that is private to a component that should trigger re-render on mutation
+
+Bad:
+```typescript
+class Foo extends React.Component {
+  private _fooRocks: boolean;
+
+  render() {
+    return <div onClick={ this._onClick }>{ `Foo ${ this._fooRocks ? 'rocks' : 'rolls' }</div>;
+  }
+
+  private _onClick() {
+    this._fooRocks = !this._fooRocks;
+    this.forceUpdate();
+  }
+```
+
+Good:
+```typescript
+class Foo extends React.Component {
+  constructor() {
+    super(props);
+
+    this.state = {
+      fooRocks: false
+    };
+  }
+
+  render() {
+    return <div onClick={ this._onClick }>{ `Foo ${ this.state.fooRocks ? 'rocks' : 'rolls' }</div>;
+  }
+
+  private _onClick() {
+    this.setState({
+      fooRocks: !this.state.fooRocks
+    });
+  }
+```
+
+## Experimental: Use a store for storing shared state within a component heirachy which must be shared across objects
+
+While React state management is very useful for simple, private state, it becomes unweildy when many things share that state
+and you start ending up with many owners of the same state value. In these cases it may drive you towards a flux solution, but
+before we jump there, lets call out a few things.
+
+* Global singletons are code smell, do not use globals or singletons except for very rare cases
+* Do not store complex shared state directly in the components, this is also code smell
+
+Instead, make a store and wire dumb components together the store.
+
+What is a store?
+
+Think of a store as a self aware observable; it maintains state, and provides read/write access to that state. When its state
+changes, it can emit change events causing components to re-evaluate.
+
+Here's an example store which tracks selection:
+
+```typescript
+class SimpleSelectionStore extends BaseStore {
+  private _selectedKey: string;
+
+  public isSelected(key: string) {
+    return key === this._selectedKey;
+  }
+
+  public setSelected(key: string) {
+    if (this._selectedKey !== key) {
+      this._selectedKey = key;
+      this.emitChange();
+    }
+  }
+}
+```
+
+While we do not want globals, we do want simplified access to the stores available in a given component scope.
+
+You can use the StoreHost component to host stores within any given scope:
+
+```typescript
+const stores = {
+  selection: new SimpleSelectionStore()
+};
+
+public render() {
+  return (
+    <StoreHost stores={ stores }>
+      <UIContent />
+    </StoreHost>
+  );
+}
+```
+
+You can write dumb components:
+
+```typescript
+const Item = (props) => (
+  <div onClick={ props.onClick }>{ `I am item ${ props.name } and I'm ${ props.isSelected ? 'selected' : 'unselected' }</div>
+);
+```
+
+And you can use the `connect` function to create a ConnectedItem which wraps the dumb component and translates the props
+and stores in its context into props for the dumb component:
+
+```typescript
+export ConnectedItem = connect(Item, (stores, props) => ({
+  name: props.item.name,
+  isSelected: stores.selection.isSelected(props.item.key),
+  onClick: () => stores.selection.setSelected(props.item.key)
+}));
+```
+
+Now in this setup, your state is in one place, it is composable and can have lifetime, and your dumb ui has no understanding
+of the contextual stores provided.
+
+# CSS class name guidelines
 
 TODO: include our class name guidelines.
 
diff --git a/src/Utilities.ts b/src/Utilities.ts
index 9b00e246d1ff05..e95247a58fc45e 100644
--- a/src/Utilities.ts
+++ b/src/Utilities.ts
@@ -2,3 +2,4 @@ export * from './common/BaseComponent';
 export * from './utilities/css';
 export * from './utilities/rtl';
 export * from './utilities/hoist';
+export * from './utilities/autobind';
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index ffdebb4abd7180..1dbe8a95c841ba 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -7,6 +7,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import './Breadcrumb.scss';
 
 export interface IBreadcrumbState {
@@ -71,7 +72,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
           { renderedOverflowItems && renderedOverflowItems.length ? (
             <li className='ms-Breadcrumb-overflow' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
               <div className='ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis'
-                  onClick={ this._onOverflowClicked.bind(this) }
+                  onClick={ this._onOverflowClicked }
                   data-is-focusable={ true }
                   role='button'
                   aria-haspopup='true'
@@ -107,12 +108,13 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
               ) }
             id={ overflowMenuId }
             directionalHint={ DirectionalHint.bottomLeftEdge }
-            onDismiss={ this._onOverflowDismissed.bind(this) } />
+            onDismiss={ this._onOverflowDismissed } />
         ) : (null) }
       </div>
     );
   }
 
+  @autobind
   private _onOverflowClicked(ev: MouseEvent) {
     this.setState({
       'isOverflowOpen' : !this.state.isOverflowOpen,
@@ -120,6 +122,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     });
   }
 
+  @autobind
   private _onOverflowDismissed(ev: MouseEvent) {
     this.setState({
       'isOverflowOpen' : false,
@@ -127,6 +130,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     });
   }
 
+  @autobind
   private _onBreadcrumbClicked(item: IBreadcrumbItem, ev: MouseEvent) {
     if (item.onClick) {
       item.onClick(item.key);
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
index cda20babcedf95..7dbfa57155d8bf 100644
--- a/src/components/Callout/Callout.tsx
+++ b/src/components/Callout/Callout.tsx
@@ -3,6 +3,7 @@ import { ICalloutProps } from './Callout.Props';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { Layer } from '../../Layer';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { getRelativePositions, IPositionInfo } from '../../utilities/positioning';
 import { focusFirstChild } from '../../utilities/focus';
@@ -43,8 +44,6 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     };
 
     this._events = new EventGroup(this);
-
-    this._onLayerDidMount = this._onLayerDidMount.bind(this);
   }
 
   public componentDidUpdate() {
@@ -108,6 +107,7 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     }
   }
 
+  @autobind
   private _onLayerDidMount() {
     // This is added so the callout will dismiss when the window is scrolled
     // but not when something inside the callout is scrolled.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 32cacbb05550e3..4e5b327d74cfa4 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -3,9 +3,9 @@ import {
   ICheckbox,
   ICheckboxProps
 } from './Checkbox.Props';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
-
 import './Checkbox.scss';
 
 export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICheckbox {
@@ -19,7 +19,6 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
     super(props);
 
     this._id = getId('checkbox-');
-    this._onChange = this._onChange.bind(this);
   }
 
   public render() {
@@ -65,6 +64,7 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
       }
   }
 
+  @autobind
   private _onChange(ev: React.FormEvent) {
     const { onChange } = this.props;
     const isChecked = (ev.target as HTMLInputElement).checked;
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
index 30fb7886b71d88..a22028bec33282 100644
--- a/src/components/ColorPicker/ColorPicker.tsx
+++ b/src/components/ColorPicker/ColorPicker.tsx
@@ -3,6 +3,7 @@ import { IColorPickerProps } from './ColorPicker.Props';
 import { TextField } from '../../TextField';
 import { ColorRectangle } from './ColorRectangle';
 import { ColorSlider } from './ColorSlider';
+import { autobind } from '../../utilities/autobind';
 import {
   IColor,
   MAX_COLOR_HUE,
@@ -34,11 +35,6 @@ export class ColorPicker extends React.Component<IColorPickerProps, any> {
   constructor(props: IColorPickerProps) {
     super(props);
 
-    this._onPickerClick = this._onPickerClick.bind(this);
-    this._onSVChanged = this._onSVChanged.bind(this);
-    this._onHChanged = this._onHChanged.bind(this);
-    this._onAChanged = this._onAChanged.bind(this);
-
     this.state = {
       color: getColorFromString(props.color)
     };
@@ -91,20 +87,17 @@ export class ColorPicker extends React.Component<IColorPickerProps, any> {
     );
   }
 
-  private _onPickerClick() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
-  }
-
+  @autobind
   private _onSVChanged(s: number, v: number) {
     this._updateColor(updateSV(this.state.color, s, v));
   }
 
+  @autobind
   private _onHChanged(h: number) {
     this._updateColor(updateH(this.state.color, h));
   }
 
+  @autobind
   private _onAChanged(a: number) {
     this._updateColor(updateA(this.state.color, a));
   }
diff --git a/src/components/ColorPicker/ColorRectangle.tsx b/src/components/ColorPicker/ColorRectangle.tsx
index 64544b1de2940e..3d40c3fad2a6c5 100644
--- a/src/components/ColorPicker/ColorRectangle.tsx
+++ b/src/components/ColorPicker/ColorRectangle.tsx
@@ -6,6 +6,7 @@ import {
   getFullColorString
  } from './colors';
 import { assign } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 
 let hsv2hex = require('color-functions/lib/hsv2hex');
@@ -42,9 +43,6 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     let { color } = this.props;
 
     this._events = new EventGroup(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
 
     this.state = {
       isAdjusting: false,
@@ -80,6 +78,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     );
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
@@ -87,6 +86,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     this._onMouseMove(ev);
   }
 
+  @autobind
   private _onMouseMove(ev: React.MouseEvent) {
     let { color, onSVChanged } = this.props;
     let rectSize = this.refs.root.getBoundingClientRect();
@@ -114,6 +114,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     ev.stopPropagation();
   }
 
+  @autobind
   private _onMouseUp(ev: React.MouseEvent) {
     this._events.off();
 
diff --git a/src/components/ColorPicker/ColorSlider.tsx b/src/components/ColorPicker/ColorSlider.tsx
index 825162ba10e0e9..e346bde4609a9d 100644
--- a/src/components/ColorPicker/ColorSlider.tsx
+++ b/src/components/ColorPicker/ColorSlider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 
@@ -41,9 +42,6 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     let { initialValue } = this.props;
 
     this._events = new EventGroup(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
 
     this.state = {
       isAdjusting: false,
@@ -75,6 +73,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     );
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
@@ -82,6 +81,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     this._onMouseMove(ev);
   }
 
+  @autobind
   private _onMouseMove(ev: React.MouseEvent) {
     let { onChanged, minValue, maxValue } = this.props;
     let rectSize = this.refs.root.getBoundingClientRect();
@@ -102,6 +102,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     ev.stopPropagation();
   }
 
+  @autobind
   private _onMouseUp(ev: React.MouseEvent) {
     this._events.off();
 
diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx
index 2cb556f9ce265f..6f4870ae0c59dd 100644
--- a/src/components/CommandBar/CommandBar.tsx
+++ b/src/components/CommandBar/CommandBar.tsx
@@ -4,6 +4,7 @@ import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { ContextualMenu, IContextualMenuItem } from '../../ContextualMenu';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { DirectionalHint } from '../../common/DirectionalHint';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
 import './CommandBar.scss';
@@ -49,10 +50,6 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
     this._id = getId('CommandBar');
     this._events = new EventGroup(this);
-
-    this._onItemClick = this._onItemClick.bind(this);
-    this._onOverflowClick = this._onOverflowClick.bind(this);
-    this._onContextMenuDismiss = this._onContextMenuDismiss.bind(this);
   }
 
   public componentDidMount() {
@@ -273,6 +270,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     }
   }
 
+  @autobind
   private _onOverflowClick(ev) {
     if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
       this._onContextMenuDismiss();
@@ -286,6 +284,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     }
   }
 
+  @autobind
   private _onContextMenuDismiss(ev?: any) {
     if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget as HTMLElement)) {
       this.setState({
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index 6f73a97dea6790..3ff882bbc0fc11 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -4,6 +4,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { KeyCodes } from '../../utilities/KeyCodes';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
@@ -99,14 +100,9 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     this._events = new EventGroup(this);
     this._async = new Async(this);
 
-    this.dismiss = this.dismiss.bind(this);
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onItemClick = this._onItemClick.bind(this);
-    this._onSubMenuDismiss = this._onSubMenuDismiss.bind(this);
-    this._onMouseEnter = this._onMouseEnter.bind(this);
-    this._onMouseLeave = this._onMouseLeave.bind(this);
   }
 
+  @autobind
   public dismiss(ev?: any) {
     let { onDismiss } = this.props;
 
@@ -231,7 +227,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
              { className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
                onClick: item.onClick || (item.items && item.items.length) ? this._onItemClick.bind(this, item) : item.href ? () => { location.href = item.href; } : null,
                onKeyDown: item.items && item.items.length ? this._onItemKeyDown.bind(this, item) : null,
-               onMouseEnter: this._onMouseEnter.bind(this, item),
+               onMouseEnter: this._onItemMouseEnter.bind(this, item),
                onMouseLeave: this._onMouseLeave,
                onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
                disabled: item.isDisabled,
@@ -270,6 +266,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     }
   }
 
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     let submenuCloseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
 
@@ -284,18 +281,19 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     }
   }
 
-  private _onMouseEnter(item: any, ev: React.MouseEvent) {
+  private _onItemMouseEnter(item: any, ev: React.MouseEvent) {
     let targetElement = ev.currentTarget as HTMLElement;
 
     if (item.key !== this.state.expandedMenuItemKey) {
       if (item.items && item.items.length) {
-        this._enterTimerId = this._async.setTimeout(() => this._onSubMenuExpand(item, targetElement), 500);
+        this._enterTimerId = this._async.setTimeout(() => this._onItemSubMenuExpand(item, targetElement), 500);
       } else {
         this._enterTimerId = this._async.setTimeout(() => this._onSubMenuDismiss(ev), 500);
       }
     }
   }
 
+  @autobind
   private _onMouseLeave(ev: React.MouseEvent) {
     this._async.clearTimeout(this._enterTimerId);
   }
@@ -317,7 +315,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         if (item.key === this.state.dismissedMenuItemKey) { // This has an expanded sub menu. collapse it.
           this._onSubMenuDismiss(ev);
         } else { // This has a collapsed sub menu. Expand it.
-          this._onSubMenuExpand(item, ev.currentTarget as HTMLElement);
+          this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
         }
       }
     }
@@ -330,11 +328,11 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     let openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
 
     if (ev.which === openKey) {
-      this._onSubMenuExpand(item, ev.currentTarget as HTMLElement);
+      this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
     }
   }
 
-  private _onSubMenuExpand(item: any, target: HTMLElement) {
+  private _onItemSubMenuExpand(item: any, target: HTMLElement) {
     if (this.state.expandedMenuItemKey !== item.key) {
 
       if (this.state.submenuProps) {
@@ -355,8 +353,9 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         }
       });
     }
- }
+  }
 
+  @autobind
   private _onSubMenuDismiss(ev?: any) {
     this.setState({
       dismissedMenuItemKey: this.state.expandedMenuItemKey,
diff --git a/src/components/FocusZone/FocusZone.tsx b/src/components/FocusZone/FocusZone.tsx
index 1a84daadda021f..e1214127b77f3b 100644
--- a/src/components/FocusZone/FocusZone.tsx
+++ b/src/components/FocusZone/FocusZone.tsx
@@ -8,6 +8,7 @@ import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { KeyCodes } from '../../utilities/KeyCodes';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import {
   getNextElement,
@@ -60,10 +61,6 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
     };
 
     this._events = new EventGroup(this);
-
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onFocus = this._onFocus.bind(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
   }
 
   public componentDidMount() {
@@ -100,7 +97,8 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
         aria-labelledby={ ariaLabelledBy }
         onMouseDownCapture={ this._onMouseDown }
         onKeyDown={ this._onKeyDown }
-        onFocus={ this._onFocus } >
+        onFocus={ this._onFocus }
+        >
         { this.props.children }
       </div>
     );
@@ -157,6 +155,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
     return false;
   }
 
+  @autobind
   private _onFocus(ev: React.FocusEvent) {
     let { onActiveElementChanged } = this.props;
 
@@ -182,12 +181,13 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
   /**
    * Handle global tab presses so that we can patch tabindexes on the fly.
    */
-  private _onKeyDownCapture(ev: React.KeyboardEvent) {
+  private _onKeyDownCapture(ev: KeyboardEvent) {
     if (ev.which === KeyCodes.tab) {
       this._updateTabIndexes();
     }
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     const { disabled } = this.props;
 
@@ -218,6 +218,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
   /**
    * Handle the keystrokes.
    */
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     const { direction, disabled, isInnerZoneKeystroke } = this.props;
 
@@ -432,7 +433,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
       let distance = -1;
 
       if ((targetTop === -1 && targetRect.bottom <= activeRect.top) ||
-      (targetRect.top === targetTop)) {
+        (targetRect.top === targetTop)) {
         targetTop = targetRect.top;
         if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
           distance = 0;
diff --git a/src/components/GroupedList/GroupFooter.tsx b/src/components/GroupedList/GroupFooter.tsx
index 14691145fee7d4..15db445c998140 100644
--- a/src/components/GroupedList/GroupFooter.tsx
+++ b/src/components/GroupedList/GroupFooter.tsx
@@ -5,6 +5,7 @@ import {
   IGroup,
 } from './GroupedList.Props';
 import { GroupSpacer } from './GroupSpacer';
+import { autobind } from '../../utilities/autobind';
 import './GroupFooter.scss';
 
 export interface IGroupFooter {
@@ -15,11 +16,6 @@ export interface IGroupFooter {
 }
 
 export class GroupFooter extends React.Component<IGroupFooter, {}> {
-  constructor(props: IGroupFooter) {
-    super(props);
-
-    this._onToggleSummarize = this._onToggleSummarize.bind(this);
-  }
 
   public render() {
     let { group, groupLevel, footerProps } = this.props;
@@ -36,6 +32,7 @@ export class GroupFooter extends React.Component<IGroupFooter, {}> {
     );
   }
 
+  @autobind
   private _onToggleSummarize() {
     let { group, footerProps } = this.props;
     let onToggleSummarize = footerProps && footerProps.onToggleSummarize;
diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx
index 775b0f62417302..1cadcd3f24a0f9 100644
--- a/src/components/GroupedList/GroupHeader.tsx
+++ b/src/components/GroupedList/GroupHeader.tsx
@@ -9,6 +9,7 @@ import { GroupSpacer } from './GroupSpacer';
 import { Spinner } from '../../Spinner';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import './GroupHeader.scss';
 
@@ -30,10 +31,6 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
   constructor(props: IGroupHeader) {
     super(props);
 
-    this._onToggleCollapse = this._onToggleCollapse.bind(this);
-    this._onToggleSelectGroup = this._onToggleSelectGroup.bind(this);
-    this._onHeaderClick = this._onHeaderClick.bind(this);
-
     this.state = {
       isCollapsed: this.props.group && this.props.group.isCollapsed,
       isLoadingVisible: false
@@ -115,6 +112,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     );
   }
 
+  @autobind
   private _onToggleCollapse(ev: React.MouseEvent) {
     let { group, headerProps } = this.props;
     let { isCollapsed } = this.state;
@@ -136,6 +134,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     ev.preventDefault();
   }
 
+  @autobind
   private _onToggleSelectGroup(ev: React.MouseEvent) {
     let { group, headerProps } = this.props;
     let onToggleSelectGroup = headerProps && headerProps.onToggleSelectGroup;
@@ -148,6 +147,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     ev.stopPropagation();
   }
 
+  @autobind
   private _onHeaderClick() {
     let { group, headerProps } = this.props;
 
diff --git a/src/components/GroupedList/GroupedList.tsx b/src/components/GroupedList/GroupedList.tsx
index 1dba424c33b53d..06de96e4d71f5c 100644
--- a/src/components/GroupedList/GroupedList.tsx
+++ b/src/components/GroupedList/GroupedList.tsx
@@ -17,7 +17,7 @@ import {
 import {
   SelectionMode
 } from '../../utilities/selection/index';
-
+import { autobind } from '../../utilities/autobind';
 import { assign } from '../../utilities/object';
 import './GroupedList.scss';
 
@@ -44,11 +44,6 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
   constructor(props: IGroupedListProps) {
     super(props);
 
-    this._onToggleCollapse = this._onToggleCollapse.bind(this);
-    this._onToggleSelectGroup = this._onToggleSelectGroup.bind(this);
-    this._onToggleSummarize = this._onToggleSummarize.bind(this);
-    this._getGroupKey = this._getGroupKey.bind(this);
-    this._renderGroup = this._renderGroup.bind(this);
     this._isSomeGroupExpanded = this._computeIsSomeGroupExpanded(props.groups);
 
     this.state = {
@@ -133,6 +128,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _renderGroup(group, groupIndex) {
     let {
       dragDropEvents,
@@ -180,6 +176,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
       ) : null;
   }
 
+  @autobind
   private _getGroupKey(group: IGroup): string {
     return 'group-' + (group ?
       group.key + '-' + group.count :
@@ -199,6 +196,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     return level;
   }
 
+  @autobind
   private _onToggleCollapse(group: IGroup) {
     let { groupProps } = this.props;
     let onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
@@ -214,6 +212,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _onToggleSelectGroup(group: IGroup) {
     let { groups } = this.state;
 
@@ -269,6 +268,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _onToggleSummarize(group: IGroup) {
     let { groups } = this.state;
     let { groupProps } = this.props;
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 9ab89a769e84df..d74c0d344d3c0c 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { css } from '../../utilities/css';
-import './Link.scss';
+import { autobind } from '../../utilities/autobind';
 import { ILinkProps, IPopupWindowProps, PopupWindowPosition } from './Link.Props';
+import './Link.scss';
 
 interface IMyScreen extends Screen {
   left: number;
@@ -12,13 +13,6 @@ declare var screen: IMyScreen;
 
 export class Link extends React.Component<ILinkProps, any> {
 
-  constructor(props: ILinkProps) {
-    super(props);
-
-    this._onClick = this._onClick.bind(this);
-    this._popupWindow = this._popupWindow.bind(this);
-  }
-
   public render() {
     let { children, className, href } = this.props;
 
@@ -42,6 +36,7 @@ export class Link extends React.Component<ILinkProps, any> {
       ));
   }
 
+  @autobind
   private _onClick(ev: React.MouseEvent) {
     let { popupWindowProps, onClick } = this.props;
 
diff --git a/src/components/MarqueeSelection/MarqueeSelection.tsx b/src/components/MarqueeSelection/MarqueeSelection.tsx
index f38904fe560939..8bcf94e40faa12 100644
--- a/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -7,6 +7,7 @@ import { IRectangle } from '../../common/IRectangle';
 import { css } from '../../utilities/css';
 import { findScrollableParent } from '../../utilities/scrollUtilities';
 import { getDistanceBetweenPoints } from '../../utilities/math';
+import { autobind } from '../../utilities/autobind';
 
 import './MarqueeSelection.scss';
 
@@ -52,8 +53,6 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     this.state = {
       dragRect: undefined
     };
-
-    this._onMouseDown = this._onMouseDown.bind(this);
   }
 
   public componentDidMount() {
@@ -94,6 +93,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     );
   }
 
+  @autobind
   private _onMouseDown(ev: MouseEvent) {
     let { isEnabled, onShouldStartSelection } = this.props;
 
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index a776e8147c7438..ab22ddffe75556 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -3,6 +3,8 @@ import { IToggleProps } from './Toggle.Props';
 import { css } from '../../utilities/css';
 import { Label } from '../../Label';
 import { getId } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
+
 import './Toggle.scss';
 
 export interface IToggleState {
@@ -28,7 +30,6 @@ export class Toggle extends React.Component<IToggleProps, IToggleState> {
     };
 
     this._id = getId('Toggle');
-    this._onClick = this._onClick.bind(this);
   }
 
   /**
@@ -91,6 +92,7 @@ export class Toggle extends React.Component<IToggleProps, IToggleState> {
       }
   }
 
+  @autobind
   private _onClick() {
     let { checked, onChanged } = this.props;
     let { isChecked } = this.state;
diff --git a/src/utilities/selection/SelectionZone.tsx b/src/utilities/selection/SelectionZone.tsx
index 5d94d42c8b955a..c505e1e76931c5 100644
--- a/src/utilities/selection/SelectionZone.tsx
+++ b/src/utilities/selection/SelectionZone.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BaseComponent } from '../../common/BaseComponent';
+import { autobind } from '../../utilities/autobind';
 import { SelectionLayout } from './SelectionLayout';
 import { KeyCodes } from '../KeyCodes';
 import {
@@ -55,21 +56,6 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _isMetaPressed: boolean;
   private _shouldIgnoreFocus: boolean;
 
-  constructor(props: ISelectionZoneProps) {
-    super(props);
-
-    // Specifically for the click methods, we will want to use React eventing to allow
-    // React and non React events to stop propagation and avoid the default SelectionZone
-    // behaviors (like executing onInvoked.)
-    this._onFocus = this._onFocus.bind(this);
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onClick = this._onClick.bind(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onDoubleClick = this._onDoubleClick.bind(this);
-    this._updateModifiers = this._updateModifiers.bind(this);
-    this.ignoreNextFocus = this.ignoreNextFocus.bind(this);
-  }
-
   public componentDidMount() {
     // Track the latest modifier keys globally.
     this._events.on(window, 'keydown keyup', this._updateModifiers);
@@ -98,6 +84,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * been called on an element, so we need a flag to store the idea that we will bypass the "next"
    * focus event that occurs. This method does that.
    */
+  @autobind
   public ignoreNextFocus() {
     this._shouldIgnoreFocus = true;
   }
@@ -107,6 +94,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
    * specially.
    */
+  @autobind
   private _onFocus(ev: React.FocusEvent) {
     let target = ev.target as HTMLElement;
     let { selection, selectionMode } = this.props;
@@ -132,6 +120,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._updateModifiers(ev);
 
@@ -156,6 +145,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onClick(ev: React.MouseEvent) {
     this._updateModifiers(ev);
 
@@ -193,6 +183,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
    * we should execute the invoke handler.
    */
+  @autobind
   private _onDoubleClick(ev: React.MouseEvent) {
     let target = ev.target as HTMLElement;
     let { selectionMode, onItemInvoked } = this.props;
@@ -218,6 +209,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     this._updateModifiers(ev);
 

From 70e72d45cbe1f78436803e13ee3034b0f2eb6985 Mon Sep 17 00:00:00 2001
From: Alex Bettadapur <alexbettadapur@gmail.com>
Date: Thu, 1 Sep 2016 17:32:06 -0700
Subject: [PATCH 03/18] DatePicker: Change text input validation to only call
 onSelectDate when text input is allowed (#230)

* Fixed validation when allowTextInput is false

* Fixed formatting
---
 src/components/DatePicker/DatePicker.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 273f950c0a2487..000b7b52773b64 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -356,8 +356,8 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
       return;
     }
 
-    let date = null;
     if (allowTextInput) {
+      let date = null;
       if (inputValue) {
         date = parseDateFromString(inputValue);
         if (!date) {
@@ -377,13 +377,13 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
           errorMessage: ''
         });
       }
-    }
 
-    // Execute onSelectDate callback
-    if (onSelectDate) {
-      // If no input date string or input date string is invalid
-      // date variable will be null, callback should expect null value for this case
-      onSelectDate(date);
+      // Execute onSelectDate callback
+      if (onSelectDate) {
+        // If no input date string or input date string is invalid
+        // date variable will be null, callback should expect null value for this case
+        onSelectDate(date);
+      }
     }
   }
 }

From d6d9739f251091d714dc6f6a7e449e077371a3e2 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Thu, 1 Sep 2016 17:35:48 -0700
Subject: [PATCH 04/18] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6d1fe798642123..35028c922b31f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

From b64ca0c43f2592c4aeb1ca4464452201648cda78 Mon Sep 17 00:00:00 2001
From: Srikanth Deshpande <srideshpande@users.noreply.github.com>
Date: Thu, 1 Sep 2016 18:09:20 -0700
Subject: [PATCH 05/18] Dropdown: isDisabled is respected when the value
 changes. (#237)

---
 src/components/Dropdown/Dropdown.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 5c6922de2bfd6d..a8cdcfea8f83fc 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -50,7 +50,8 @@ export class Dropdown extends React.Component<IDropdownProps, any> {
 
   public componentWillReceiveProps(newProps: IDropdownProps) {
     this.setState({
-      selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
+      selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey),
+      isDisabled: newProps.isDisabled
     });
   }
 

From 603d504c450655b8a5b0a22106be6fce089fc65a Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Thu, 1 Sep 2016 18:09:53 -0700
Subject: [PATCH 06/18] v0.47.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 35028c922b31f4..7468b49b618e31 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

From 697e947b4df1cf3883e3b81f18e3b7b3512bd86e Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 13:40:18 -0700
Subject: [PATCH 07/18] Using react events

---
 src/components/Checkbox/Checkbox.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 5db76129637643..13177e0da16fac 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -22,16 +22,8 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
 
     this._id = getId('checkbox-');
     this._onChange = this._onChange.bind(this);
-  }
-
-  public componentDidMount() {
-    this._checkBoxInput.addEventListener('focus', this._onFocus.bind(this), false);
-    this._checkBoxInput.addEventListener('blur', this._onBlur.bind(this), false);
-  }
-
-  public componentWillUnmount() {
-    this._checkBoxInput.removeEventListener('focus', this._onFocus.bind(this));
-    this._checkBoxInput.removeEventListener('blur', this._onBlur.bind(this));
+    this._onFocus = this._onFocus.bind(this);
+    this._onBlur = this._onBlur.bind(this);
   }
 
   public render() {
@@ -60,6 +52,8 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
           className='ms-Checkbox-input'
           type='checkbox'
           onChange={ this._onChange }
+          onFocus= { this._onFocus }
+          onBlur= { this._onBlur }
           aria-checked={ checked }
         />
         <label htmlFor={ this._id }

From d6f12eec268af723fee2fa57411bd183bcdcaf8d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 2 Sep 2016 13:42:04 -0700
Subject: [PATCH 08/18] Fixing a minor bug in selection where isAllSelected is
 returning true when all items are unselectable. Added test, validated the fix
 works. (#240)

---
 src/utilities/selection/Selection.test.ts | 20 +++++++++++++++++++-
 src/utilities/selection/Selection.ts      |  8 ++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/utilities/selection/Selection.test.ts b/src/utilities/selection/Selection.test.ts
index cfc4846a80b22c..6ce427f5dadc46 100644
--- a/src/utilities/selection/Selection.test.ts
+++ b/src/utilities/selection/Selection.test.ts
@@ -1,6 +1,6 @@
 let { expect } = chai;
 
-import { Selection } from './index';
+import { Selection, IObjectWithKey } from './index';
 
 let setA = [ { key: 'a' }, { key: 'b' }, { key: 'c' } ];
 let setB = [ { key: 'a' }, { key: 'd' }, { key: 'b' } ];
@@ -52,4 +52,22 @@ describe('Selection', () => {
     expect(changeCount).equals(10, 'after range selecting from 0 to 2');
   });
 
+  it('returns false on isAllSelected when no items are selectable', () => {
+    let changeEvents = 0;
+    let selection = new Selection({
+      canSelectItem: (item: IObjectWithKey) => false,
+      onSelectionChanged: () => changeEvents++
+    });
+
+    selection.setItems(setA);
+
+    expect(selection.isAllSelected()).to.equal(false, 'isAllSelected was not false after initialization');
+
+    selection.setAllSelected(true);
+
+    expect(selection.isAllSelected()).to.equal(false, 'isAllSelected was not false after trying to select all the unselectables');
+
+    expect(changeEvents).to.equal(0, 'changeEvents were not 0');
+  });
+
 });
\ No newline at end of file
diff --git a/src/utilities/selection/Selection.ts b/src/utilities/selection/Selection.ts
index 251c35e4b53a87..7857891beb9e9a 100644
--- a/src/utilities/selection/Selection.ts
+++ b/src/utilities/selection/Selection.ts
@@ -156,10 +156,12 @@ export class Selection implements ISelection {
   }
 
   public isAllSelected(): boolean {
+    let selectableCount = this._items.length - this._unselectableCount;
+
     return (
       (this.count > 0) &&
       (this._isAllSelected && this._exemptedCount === 0) ||
-      (!this._isAllSelected && (this._exemptedCount === this._items.length - this._unselectableCount) && this._items.length > 0));
+      (!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0));
   }
 
   public isKeySelected(key: string): boolean {
@@ -176,7 +178,9 @@ export class Selection implements ISelection {
   }
 
   public setAllSelected(isAllSelected: boolean) {
-    if (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected) {
+    let selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
+
+    if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {
       this._exemptedIndices = {};
       this._exemptedCount = 0;
       this._isAllSelected = isAllSelected;

From adb734b929faeeadc325198a0655bac0246e796f Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 2 Sep 2016 14:02:55 -0700
Subject: [PATCH 09/18] BaseComponent: Adding a _resolveRef helper to create
 memoized helpers to resolve refs. (#238)

* Adding a _resolveRef helper to create memoized helpers to resolve refs.

* Cleaning up tslint.
---
 ...mponent.test.ts => BaseComponent.test.tsx} | 24 +++++++++++++++++++
 src/common/BaseComponent.ts                   | 24 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 rename src/common/{BaseComponent.test.ts => BaseComponent.test.tsx} (74%)

diff --git a/src/common/BaseComponent.test.ts b/src/common/BaseComponent.test.tsx
similarity index 74%
rename from src/common/BaseComponent.test.ts
rename to src/common/BaseComponent.test.tsx
index 91955bcbc6b384..7c647990d2a7a5 100644
--- a/src/common/BaseComponent.test.ts
+++ b/src/common/BaseComponent.test.tsx
@@ -1,3 +1,11 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import * as ReactTestUtils from 'react-addons-test-utils';
+
+let { expect } = chai;
+
 import { BaseComponent } from './BaseComponent';
 
 let { assert } = chai;
@@ -54,6 +62,22 @@ describe('BaseComponent', () => {
   _buildTestFor('render');
   _buildTestFor('componentDidUpdate');
   _buildTestFor('componentWillUnmount');
+
+  it('can resolve refs', () => {
+    class Foo extends BaseComponent<{}, {}> {
+      public root: HTMLElement;
+
+      public render() {
+        return <div ref={ this._resolveRef('root') } />;
+      }
+    }
+
+    let component = ReactTestUtils.renderIntoDocument(
+      <Foo />
+    ) as any;
+
+    expect(component.root).to.exist;
+  });
 });
 
 function _buildTestFor(methodName) {
diff --git a/src/common/BaseComponent.ts b/src/common/BaseComponent.ts
index 3fc781cfabe490..6e7a5d86c8774d 100644
--- a/src/common/BaseComponent.ts
+++ b/src/common/BaseComponent.ts
@@ -18,6 +18,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
   private __async: Async;
   private __events: EventGroup;
   private __disposables: IDisposable[];
+  private __resolves: { [ name: string ]: (ref: any) => any };
 
   /**
    * BaseComponent constructor
@@ -103,6 +104,29 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
 
     return this.__events;
   }
+
+  /**
+   * Helper to return a memoized ref resolver function.
+   * @params refName Name of the member to assign the ref to.
+   *
+   * @examples
+   * class Foo extends BaseComponent<...> {
+   *   private _root: HTMLElement;
+   *
+   *   public render() {
+   *     return <div ref={ this._resolveRef('_root') } />
+   *   }
+   * }
+   */
+  protected _resolveRef(refName: string) {
+    if (!this.__resolves) {
+      this.__resolves = {};
+    }
+    if (!this.__resolves[refName]) {
+      this.__resolves[refName] = (ref) => this[refName] = ref;
+    }
+    return this.__resolves[refName];
+  }
 }
 
 /**

From 553ea5cbef4a4d74f8946623cd3d64438a6325db Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 2 Sep 2016 14:04:09 -0700
Subject: [PATCH 10/18] v0.47.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7468b49b618e31..7c8a6279dfa002 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

From f5d0db19e9452599d9f8fdffb72309e4677c91db Mon Sep 17 00:00:00 2001
From: joschect <joschect@microsoft.com>
Date: Fri, 2 Sep 2016 14:14:14 -0700
Subject: [PATCH 11/18] ContextualMenu: added tooltip and arialabel to menu and
 menu items. (#241)

---
 .../ContextualMenu/ContextualMenu.Props.ts    |  6 ++
 .../ContextualMenu/ContextualMenu.tsx         | 81 +++++++++++--------
 .../examples/ContextualMenu.Basic.Example.tsx | 10 +--
 3 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/src/components/ContextualMenu/ContextualMenu.Props.ts b/src/components/ContextualMenu/ContextualMenu.Props.ts
index 3d52b61dbe4af4..6c999ba07a97e7 100644
--- a/src/components/ContextualMenu/ContextualMenu.Props.ts
+++ b/src/components/ContextualMenu/ContextualMenu.Props.ts
@@ -75,6 +75,12 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IPosi
    */
   beakWidth?: number;
 
+  /**
+   * Aria label for accessibility for the ContextualMenu.
+   * If none specified no aria label will be applied to the ContextualMenu.
+   */
+  ariaLabel?: string;
+
 }
 
 export interface IContextualMenuItem {
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index 3ff882bbc0fc11..54b91e1dcf454c 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -144,18 +144,19 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
 
   public render() {
     let { className,
-          items,
-          isBeakVisible,
-          labelElementId,
-          targetElement,
-          id,
-          targetPoint,
-          useTargetPoint,
-          beakWidth,
-          directionalHint,
-          gapSpace,
-          isSubMenu,
-          coverTarget } = this.props;
+      items,
+      isBeakVisible,
+      labelElementId,
+      targetElement,
+      id,
+      targetPoint,
+      useTargetPoint,
+      beakWidth,
+      directionalHint,
+      gapSpace,
+      isSubMenu,
+      coverTarget,
+      ariaLabel } = this.props;
 
     let { submenuProps } = this.state;
 
@@ -186,21 +187,24 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
               ref={ (focusZone) => this._focusZone = focusZone }
               rootProps={ { role: 'menu' } }
               >
-              <ul className='ms-ContextualMenu-list is-open' onKeyDown={ this._onKeyDown }>
+              <ul
+                className='ms-ContextualMenu-list is-open'
+                onKeyDown={ this._onKeyDown }
+                aria-label={ ariaLabel } >
                 { items.map((item, index) => (
                   // If the item name is equal to '-', a divider will be generated.
                   item.name === '-' ? (
                     <li
                       role='separator'
                       key={ item.key || index }
-                      className={ css('ms-ContextualMenu-divider', item.className ) }/>
+                      className={ css('ms-ContextualMenu-divider', item.className) }/>
                   ) : (
                       <li
                         role='menuitem'
                         title={ item.title }
                         key={ item.key || index }
-                        className={ css('ms-ContextualMenu-item', item.className ) }>
-                          { this._renderMenuItem(item, index, hasCheckmarks, hasIcons) }
+                        className={ css('ms-ContextualMenu-item', item.className) }>
+                        { this._renderMenuItem(item, index, hasCheckmarks, hasIcons) }
                       </li>
                     )
                 )) }
@@ -217,26 +221,37 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
 
   private _renderMenuItem(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     let { expandedMenuItemKey, subMenuId } = this.state;
+    let ariaLabel = '';
+
+    if (item.ariaLabel) {
+      ariaLabel = item.ariaLabel;
+    } else if (item.name) {
+      ariaLabel = item.name;
+    }
 
     if (item.onRender) {
       return item.onRender(item);
     }
 
     return React.createElement(
-            'button',
-             { className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
-               onClick: item.onClick || (item.items && item.items.length) ? this._onItemClick.bind(this, item) : item.href ? () => { location.href = item.href; } : null,
-               onKeyDown: item.items && item.items.length ? this._onItemKeyDown.bind(this, item) : null,
-               onMouseEnter: this._onItemMouseEnter.bind(this, item),
-               onMouseLeave: this._onMouseLeave,
-               onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
-               disabled: item.isDisabled,
-               dataCommandKey: index,
-               role: 'menuitem',
-               href: item.href,
-               'aria-haspopup': item.items && item.items.length ? true : null,
-               'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null },
-             this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
+      'button',
+      {
+        className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
+        onClick: item.onClick || (item.items && item.items.length) ? this._onItemClick.bind(this, item) : item.href ? () => { location.href = item.href; } : null,
+        onKeyDown: item.items && item.items.length ? this._onItemKeyDown.bind(this, item) : null,
+        onMouseEnter: this._onItemMouseEnter.bind(this, item),
+        onMouseLeave: this._onMouseLeave,
+        onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
+        disabled: item.isDisabled,
+        dataCommandKey: index,
+        role: 'menuitem',
+        href: item.href,
+        title: item.title,
+        'aria-label': ariaLabel,
+        'aria-haspopup': item.items && item.items.length ? true : null,
+        'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null
+      },
+      this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
   }
 
   private _renderMenuItemChildren(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
@@ -245,17 +260,17 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         {(hasCheckmarks) ? (
           <span
             className={
-              css('ms-ContextualMenu-checkmark', {'ms-Icon ms-Icon--check': item.isChecked, 'not-selected': !item.isChecked})
+              css('ms-ContextualMenu-checkmark', { 'ms-Icon ms-Icon--check': item.isChecked, 'not-selected': !item.isChecked })
             }
             onClick={ this._onItemClick.bind(this, item) } />
         ) : (null) }
         {(hasIcons) ? (
           <span className={ 'ms-ContextualMenu-icon' + ((item.icon) ? ` ms-Icon ms-Icon--${item.icon}` : ' no-icon') }/>
-        ) : (null)}
+        ) : (null) }
         <span className='ms-ContextualMenu-itemText ms-fontWeight-regular'>{ item.name }</span>
         {(item.items && item.items.length) ? (
           <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight') } />
-        ) : (null)}
+        ) : (null) }
       </div>
     );
   }
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
index 1e794a2a8c12c2..ddc234e48215b9 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
@@ -14,14 +14,14 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
   public render() {
     return (
         <div>
-          <Button onClick={this._onClick}> Click for ContextualMenu </Button>
+          <Button onClick={ this._onClick }> Click for ContextualMenu </Button>
             { this.state.isContextMenuVisible ? (
           <ContextualMenu
             shouldFocusOnMount={ true }
-            targetPoint={this.state.target}
-            useTargetPoint={true}
-            onDismiss={this._onDismiss}
-            directionalHint={ getRTL() ? DirectionalHint.bottomRightEdge : DirectionalHint.bottomLeftEdge}
+            targetPoint={ this.state.target }
+            useTargetPoint={ true }
+            onDismiss={ this._onDismiss }
+            directionalHint={ getRTL() ? DirectionalHint.bottomRightEdge : DirectionalHint.bottomLeftEdge }
             items={
               [
                 {

From d632c502bcc6706a6e0c44391735ad9e58d56f9c Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 2 Sep 2016 14:14:38 -0700
Subject: [PATCH 12/18] v0.48.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7c8a6279dfa002..8565df641868d4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.47.3",
+  "version": "0.48.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

From 927a21d5563580cc63234e6989bbd529a9ce9fe8 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 14:34:25 -0700
Subject: [PATCH 13/18] Using css utility map

---
 src/components/Checkbox/Checkbox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 13177e0da16fac..c84907478c9322 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -58,7 +58,11 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
         />
         <label htmlFor={ this._id }
           ref={ (el): HTMLLabelElement => this._checkBoxLabel = el }
-          className={ css('ms-Checkbox-label', (checked || defaultChecked) && 'is-checked', disabled && 'is-disabled') }
+          className={ css('ms-Checkbox-label', {
+            'is-checked': checked || defaultChecked,
+            'is-disabled': disabled
+            })
+          }
         >
           { label && <span className='ms-Label'>{ label }</span> }
         </label>

From d705dc3c6e93dbf04e0a2870f972b2015b5fc78d Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 16:52:07 -0700
Subject: [PATCH 14/18] Use @autobind and _resolveRef

---
 src/components/Checkbox/Checkbox.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 59e38707e473ec..b896885b8e9d7a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { BaseComponent } from '../../common/BaseComponent';
 import {
   ICheckbox,
   ICheckboxProps
@@ -8,7 +9,7 @@ import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
 import './Checkbox.scss';
 
-export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICheckbox {
+export class Checkbox extends BaseComponent<ICheckboxProps, {}> implements ICheckbox {
   public static defaultProps: ICheckboxProps = {
   };
 
@@ -21,8 +22,6 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
     super(props);
 
     this._id = getId('checkbox-');
-    this._onFocus = this._onFocus.bind(this);
-    this._onBlur = this._onBlur.bind(this);
   }
 
   public render() {
@@ -38,14 +37,14 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
     return (
       <div
         className={ css('ms-Checkbox', className) }
-        ref={ (c): HTMLElement => this._checkBox = c }
+        ref={ this._resolveRef('_checkBox') }
       >
         <input
           { ...inputProps }
           { ...(checked !== undefined && { checked }) }
           { ...(defaultChecked !== undefined && { defaultChecked }) }
           disabled={ disabled }
-          ref={ (el): HTMLInputElement => this._checkBoxInput = el }
+          ref={ this._resolveRef('_checkBoxInput') }
           id={ this._id }
           name={ this._id }
           className='ms-Checkbox-input'
@@ -56,7 +55,7 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
           aria-checked={ checked }
         />
         <label htmlFor={ this._id }
-          ref={ (el): HTMLLabelElement => this._checkBoxLabel = el }
+          ref={ this._resolveRef('_checkBoxLabel') }
           className={ css('ms-Checkbox-label', {
             'is-checked': checked || defaultChecked,
             'is-disabled': disabled
@@ -79,10 +78,12 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
       }
   }
 
+  @autobind
   private _onFocus(): void {
     this._checkBox.classList.add('is-inFocus');
   }
 
+  @autobind
   private _onBlur(): void {
     this._checkBox.classList.remove('is-inFocus');
   }

From 1b64a887cf8370a32fef619510853040ac8cb772 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 17:59:39 -0700
Subject: [PATCH 15/18] Adding focus state

---
 src/components/Checkbox/Checkbox.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b896885b8e9d7a..1452a9d9faaa5e 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -9,12 +9,16 @@ import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
 import './Checkbox.scss';
 
-export class Checkbox extends BaseComponent<ICheckboxProps, {}> implements ICheckbox {
+export interface ICheckboxState {
+  /** Is true when the control has focus. */
+  isFocused?: boolean;
+}
+
+export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> implements ICheckbox {
   public static defaultProps: ICheckboxProps = {
   };
 
   private _id: string;
-  private _checkBox: HTMLElement;
   private _checkBoxInput: HTMLInputElement;
   private _checkBoxLabel: HTMLLabelElement;
 
@@ -22,6 +26,9 @@ export class Checkbox extends BaseComponent<ICheckboxProps, {}> implements IChec
     super(props);
 
     this._id = getId('checkbox-');
+    this.state = {
+      isFocused: false
+    }
   }
 
   public render() {
@@ -34,10 +41,11 @@ export class Checkbox extends BaseComponent<ICheckboxProps, {}> implements IChec
       label
     } = this.props;
 
+    const { isFocused } = this.state;
+
     return (
       <div
-        className={ css('ms-Checkbox', className) }
-        ref={ this._resolveRef('_checkBox') }
+        className={ css('ms-Checkbox', className, { 'is-inFocus': isFocused }) }
       >
         <input
           { ...inputProps }
@@ -79,13 +87,13 @@ export class Checkbox extends BaseComponent<ICheckboxProps, {}> implements IChec
   }
 
   @autobind
-  private _onFocus(): void {
-    this._checkBox.classList.add('is-inFocus');
+  private _onFocus(ev: React.FocusEvent): void {
+    this.setState({ isFocused: true });
   }
 
   @autobind
-  private _onBlur(): void {
-    this._checkBox.classList.remove('is-inFocus');
+  private _onBlur(ev: React.FocusEvent): void {
+    this.setState({ isFocused: false });
   }
 
   @autobind

From 5366c2716dfa9c0b567aca1afa3259f389fa4fe9 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 18:49:32 -0700
Subject: [PATCH 16/18] Adding isChecked state

---
 src/components/Checkbox/Checkbox.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 1452a9d9faaa5e..d14e501fb1a227 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -12,6 +12,9 @@ import './Checkbox.scss';
 export interface ICheckboxState {
   /** Is true when the control has focus. */
   isFocused?: boolean;
+
+  /** Is true when Uncontrolled control is checked. */
+  isChecked?: boolean;
 }
 
 export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> implements ICheckbox {
@@ -27,7 +30,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
 
     this._id = getId('checkbox-');
     this.state = {
-      isFocused: false
+      isFocused: false,
+      isChecked: props.defaultChecked || false
     }
   }
 
@@ -41,7 +45,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
       label
     } = this.props;
 
-    const { isFocused } = this.state;
+    const { isFocused, isChecked } = this.state;
 
     return (
       <div
@@ -65,7 +69,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
         <label htmlFor={ this._id }
           ref={ this._resolveRef('_checkBoxLabel') }
           className={ css('ms-Checkbox-label', {
-            'is-checked': checked || defaultChecked,
+            'is-checked': checked || isChecked,
             'is-disabled': disabled
             })
           }
@@ -101,16 +105,10 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     const { onChange } = this.props;
     const isChecked = (ev.target as HTMLInputElement).checked;
 
-    if (this.props.checked === undefined && isChecked) {
-      this._checkBoxLabel.classList.add('is-checked');
-    }
-
-    if (this.props.checked === undefined && !isChecked) {
-      this._checkBoxLabel.classList.remove('is-checked');
-    }
-
     if (onChange) {
       onChange(ev, isChecked);
     }
+
+    this.props.checked === undefined && this.setState({ isChecked: isChecked });
   }
 }

From caaad812f2299bad8f300dd738e86c03054a9507 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 19:03:31 -0700
Subject: [PATCH 17/18] Removing unneeded variables

---
 src/components/Checkbox/Checkbox.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d14e501fb1a227..b3595e5f9f8055 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -22,8 +22,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
   };
 
   private _id: string;
-  private _checkBoxInput: HTMLInputElement;
-  private _checkBoxLabel: HTMLLabelElement;
+  private _checkBox: HTMLInputElement;
 
   constructor(props: ICheckboxProps) {
     super(props);
@@ -56,7 +55,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
           { ...(checked !== undefined && { checked }) }
           { ...(defaultChecked !== undefined && { defaultChecked }) }
           disabled={ disabled }
-          ref={ this._resolveRef('_checkBoxInput') }
+          ref={ this._resolveRef('_checkBox') }
           id={ this._id }
           name={ this._id }
           className='ms-Checkbox-input'
@@ -67,7 +66,6 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
           aria-checked={ checked }
         />
         <label htmlFor={ this._id }
-          ref={ this._resolveRef('_checkBoxLabel') }
           className={ css('ms-Checkbox-label', {
             'is-checked': checked || isChecked,
             'is-disabled': disabled
@@ -81,12 +79,12 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
   }
 
   public get checked(): boolean {
-    return this._checkBoxInput ? this._checkBoxInput.checked : false;
+    return this._checkBox ? this._checkBox.checked : false;
   }
 
   public focus() {
-      if (this._checkBoxInput) {
-          this._checkBoxInput.focus();
+      if (this._checkBox) {
+          this._checkBox.focus();
       }
   }
 

From 4dc34187a21e97246a2e406c42cb75c9cdcac92d Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 2 Sep 2016 20:33:14 -0700
Subject: [PATCH 18/18] ChoiceGroup using react events

---
 src/components/Checkbox/Checkbox.tsx       |  6 +-
 src/components/ChoiceGroup/ChoiceGroup.tsx | 68 +++++++++-------------
 2 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b3595e5f9f8055..644702fec5202c 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -31,7 +31,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     this.state = {
       isFocused: false,
       isChecked: props.defaultChecked || false
-    }
+    };
   }
 
   public render() {
@@ -107,6 +107,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
       onChange(ev, isChecked);
     }
 
-    this.props.checked === undefined && this.setState({ isChecked: isChecked });
+    if (this.props.checked === undefined) {
+      this.setState({ isChecked: isChecked });
+    }
   }
 }
diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx
index 2415719fc81289..0f7a01c475c15e 100644
--- a/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -7,6 +7,9 @@ import './ChoiceGroup.scss';
 
 export interface IChoiceGroupState {
   keyChecked: string;
+
+  /** Is true when the control has focus. */
+  keyFocused?: string;
 }
 
 export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroupState> {
@@ -16,28 +19,18 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
 
   private _id: string;
   private _descriptionId: string;
-  private _choiceFieldGroup: HTMLElement;
-  private _choiceFieldElements: HTMLElement[];
-  private _inputElements: HTMLInputElement[];
+  private _inputElement: HTMLElement;
 
   constructor(props: IChoiceGroupProps) {
     super();
 
     this.state = {
-      keyChecked: this._getKeyChecked(props.options)
+      keyChecked: this._getKeyChecked(props.options),
+      keyFocused: undefined
     };
 
     this._id = getId('ChoiceGroup');
     this._descriptionId = getId('ChoiceGroupDescription');
-    this._choiceFieldElements = [];
-    this._inputElements = [];
-  }
-
-  public componentDidMount() {
-    this._inputElements.forEach( inputElement => {
-      inputElement.addEventListener('focus', this._onFocus.bind(this), false);
-      inputElement.addEventListener('blur', this._onBlur.bind(this), false);
-    });
   }
 
   public componentWillReceiveProps(newProps: IChoiceGroupProps) {
@@ -46,23 +39,14 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
 
     if (newKeyChecked !== oldKeyCheched) {
       this.setState({
-        keyChecked: newKeyChecked
+        keyChecked: newKeyChecked,
       });
     }
   }
 
-  public componentWillUnmount() {
-    this._inputElements.forEach( inputElement => {
-      if (inputElement) {
-        inputElement.removeEventListener('focus', this._onFocus.bind(this));
-        inputElement.removeEventListener('blur', this._onBlur.bind(this));
-      }
-    });
-  }
-
   public render() {
     let { label, options, className, required } = this.props;
-    let { keyChecked } = this.state;
+    let { keyChecked, keyFocused } = this.state;
 
     const titleClassName = css('ms-Label', className, {
       'is-required': required
@@ -75,20 +59,22 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
           className='ms-ChoiceFieldGroup'
           role='radiogroup'
           aria-labelledby={ this.props.label ? this._id + '-label' : '' }
-          ref={ (c): HTMLElement => this._choiceFieldGroup = c }
         >
           <div className='ms-ChoiceFieldGroup-title'>
             { this.props.label ? <label className={ titleClassName } id={ this._id + '-label' }>{ label }</label> : null }
           </div>
 
-          { options.map((option, index) => (
+          { options.map((option) => (
             <div
               key={ option.key }
-              className={ css('ms-ChoiceField', { 'ms-ChoiceField--image': !!option.imageSrc}) }
-              ref={ (c): HTMLElement => { this._choiceFieldElements.push(c); return c; } }
+              className={ css('ms-ChoiceField', {
+                  'ms-ChoiceField--image': !!option.imageSrc,
+                  'is-inFocus': option.key === keyFocused
+                })
+              }
             >
               <input
-                ref={ (c): HTMLInputElement => { this._inputElements.push(c); return c; } }
+                ref={ (c): HTMLInputElement => this._inputElement = c }
                 id={ `${this._id}-${option.key}` }
                 className='ms-ChoiceField-input'
                 type='radio'
@@ -96,6 +82,8 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
                 disabled={ option.isDisabled }
                 checked={ option.key === keyChecked }
                 onChange={ this._handleInputChange.bind(this, option) }
+                onFocus={ this._onFocus.bind(this, option) }
+                onBlur={ this._onBlur.bind(this, option) }
                 aria-describedby={ `${this._descriptionId}-${option.key}` }
               />
               { this._renderField(option) }
@@ -107,21 +95,23 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
   }
 
   public focus() {
-    if (this._choiceFieldGroup) {
-      this._choiceFieldGroup.focus();
+    if (this._inputElement) {
+      this._inputElement.focus();
     }
   }
 
-  private _onFocus(event): void {
-    if (event.target && event.target.parentNode) {
-      event.target.parentNode.classList.add('is-inFocus');
-    }
+  private _onFocus(option: IChoiceGroupOption, ev: React.FocusEvent): void {
+    this.setState({
+      keyFocused: option.key,
+      keyChecked: this.state.keyChecked
+    });
   }
 
-  private _onBlur(event): void {
-    if (event.target && event.target.parentNode) {
-      event.target.parentNode.classList.remove('is-inFocus');
-    }
+  private _onBlur(option: IChoiceGroupOption, ev: React.FocusEvent): void {
+    this.setState({
+      keyFocused: undefined,
+      keyChecked: this.state.keyChecked
+    });
   }
 
   private _renderField(option: IChoiceGroupOption) {