From ce5b436c6254983a34d4eb1e993b542063f0234f Mon Sep 17 00:00:00 2001
From: Alex Abenoja <abenojaalex@gmail.com>
Date: Tue, 26 May 2015 11:09:40 -0600
Subject: [PATCH 001/128] [removed] Input type=submit deprecation warning.

Closes #733
---
 src/Input.js      |  6 +-----
 test/InputSpec.js | 24 ------------------------
 2 files changed, 1 insertion(+), 29 deletions(-)

diff --git a/src/Input.js b/src/Input.js
index fa516a4ee4..f385c5607d 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -1,15 +1,11 @@
 import React from 'react';
 import InputBase from './InputBase';
-import ButtonInput from './ButtonInput';
 import FormControls from './FormControls';
 import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
   render() {
-    if (ButtonInput.types.indexOf(this.props.type) > -1) {
-      deprecationWarning(`Input type=${this.props.type}`, 'ButtonInput');
-      return <ButtonInput {...this.props} />;
-    } else if (this.props.type === 'static') {
+    if (this.props.type === 'static') {
       deprecationWarning('Input type=static', 'StaticText');
       return <FormControls.Static {...this.props} />;
     }
diff --git a/test/InputSpec.js b/test/InputSpec.js
index 3a73cba5cf..54bb2b3c51 100644
--- a/test/InputSpec.js
+++ b/test/InputSpec.js
@@ -41,30 +41,6 @@ describe('Input', function () {
     assert.equal(instance.getValue(), 'v');
   });
 
-  it('throws a deprecation warning on type=button', function () {
-    ReactTestUtils.renderIntoDocument(
-      <Input type="button" />
-    );
-
-    shouldWarn('deprecated');
-  });
-
-  it('throws a deprecation warning on type=reset', function () {
-    ReactTestUtils.renderIntoDocument(
-      <Input type="reset" />
-    );
-
-    shouldWarn('deprecated');
-  });
-
-  it('throws a deprecation warning on type=submit', function () {
-    ReactTestUtils.renderIntoDocument(
-      <Input type="submit" />
-    );
-
-    shouldWarn('deprecated');
-  });
-
   it('throws a warning when type=static', function () {
     ReactTestUtils.renderIntoDocument(
       <Input type="static" value="v" />

From 9c09e2a5068e437c5767c4c5299bba16d9bb1aa8 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Fri, 29 May 2015 09:07:02 -0600
Subject: [PATCH 002/128] [fixed] Keyboard accessibility for anchors serving as
 buttons

Bootstrap uses a lot of styling that is specifically targeting anchor
tags that may also serve in the capacity as a button. Unfortunately
since Bootstrap does not style said buttons we have to use an anchor
tag instead. But in order to maintain keyboard functionality for
accessibility concerns even those anchor tags must provide an href.

The solution is to add an internal `SafeAnchor` component which ensures
that something exists for the href attribute, and calls
`event.preventDefault()` when the anchor is clicked. It will then
continue to invoke any additional `onClick` handler provided.
---
 src/ListGroupItem.js   |  6 +--
 src/MenuItem.js        |  6 +--
 src/NavItem.js         | 14 ++-----
 src/PageItem.js        | 14 ++-----
 src/SafeAnchor.js      | 38 +++++++++++++++++
 src/SubNav.js          |  8 ++--
 src/Thumbnail.js       |  5 ++-
 src/index.js           |  2 +
 test/NavSpec.js        |  4 +-
 test/PageItemSpec.js   |  2 +-
 test/SafeAnchorSpec.js | 93 ++++++++++++++++++++++++++++++++++++++++++
 11 files changed, 157 insertions(+), 35 deletions(-)
 create mode 100644 src/SafeAnchor.js
 create mode 100644 test/SafeAnchorSpec.js

diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
index dae133d54f..ac79d8bd37 100644
--- a/src/ListGroupItem.js
+++ b/src/ListGroupItem.js
@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import classNames from 'classnames';
-
+import SafeAnchor from './SafeAnchor';
 
 const ListGroupItem = React.createClass({
   mixins: [BootstrapMixin],
@@ -51,12 +51,12 @@ const ListGroupItem = React.createClass({
 
   renderAnchor(classes) {
     return (
-      <a
+      <SafeAnchor
         {...this.props}
         className={classNames(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
-      </a>
+      </SafeAnchor>
     );
   },
 
diff --git a/src/MenuItem.js b/src/MenuItem.js
index d5bdce7a89..bf63602cfd 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import SafeAnchor from './SafeAnchor';
 
 const MenuItem = React.createClass({
   propTypes: {
@@ -15,7 +16,6 @@ const MenuItem = React.createClass({
 
   getDefaultProps() {
     return {
-      href: '#',
       active: false
     };
   },
@@ -29,9 +29,9 @@ const MenuItem = React.createClass({
 
   renderAnchor() {
     return (
-      <a onClick={this.handleClick} href={this.props.href} target={this.props.target} title={this.props.title} tabIndex="-1">
+      <SafeAnchor onClick={this.handleClick} href={this.props.href} target={this.props.target} title={this.props.title} tabIndex="-1">
         {this.props.children}
-      </a>
+      </SafeAnchor>
     );
   },
 
diff --git a/src/NavItem.js b/src/NavItem.js
index 9bc768df48..8613635567 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
+import SafeAnchor from './SafeAnchor';
 
 const NavItem = React.createClass({
   mixins: [BootstrapMixin],
@@ -15,12 +16,6 @@ const NavItem = React.createClass({
     target: React.PropTypes.string
   },
 
-  getDefaultProps() {
-    return {
-      href: '#'
-    };
-  },
-
   render() {
     let {
         disabled,
@@ -38,8 +33,7 @@ const NavItem = React.createClass({
           href,
           title,
           target,
-          onClick: this.handleClick,
-          ref: 'anchor'
+          onClick: this.handleClick
         };
 
     if (href === '#') {
@@ -48,9 +42,9 @@ const NavItem = React.createClass({
 
     return (
       <li {...props} className={classNames(props.className, classes)}>
-        <a {...linkProps}>
+        <SafeAnchor {...linkProps}>
           { children }
-        </a>
+        </SafeAnchor>
       </li>
     );
   },
diff --git a/src/PageItem.js b/src/PageItem.js
index 5a7c22d7f9..44ef5e419c 100644
--- a/src/PageItem.js
+++ b/src/PageItem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import SafeAnchor from './SafeAnchor';
 
 const PageItem = React.createClass({
 
@@ -14,12 +15,6 @@ const PageItem = React.createClass({
     eventKey: React.PropTypes.any
   },
 
-  getDefaultProps() {
-    return {
-      href: '#'
-    };
-  },
-
   render() {
     let classes = {
       'disabled': this.props.disabled,
@@ -31,14 +26,13 @@ const PageItem = React.createClass({
       <li
         {...this.props}
         className={classNames(this.props.className, classes)}>
-        <a
+        <SafeAnchor
           href={this.props.href}
           title={this.props.title}
           target={this.props.target}
-          onClick={this.handleSelect}
-          ref="anchor">
+          onClick={this.handleSelect}>
           {this.props.children}
-        </a>
+        </SafeAnchor>
       </li>
     );
   },
diff --git a/src/SafeAnchor.js b/src/SafeAnchor.js
new file mode 100644
index 0000000000..8316bbe634
--- /dev/null
+++ b/src/SafeAnchor.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+/**
+ * Note: This is intended as a stop-gap for accessibility concerns that the
+ * Bootstrap CSS does not address as they have styled anchors and not buttons
+ * in many cases.
+ */
+export default class SafeAnchor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(event) {
+    if (this.props.href === undefined) {
+      event.preventDefault();
+    }
+
+    if (this.props.onClick) {
+      this.props.onClick(event);
+    }
+  }
+
+  render() {
+    return (
+      <a role={this.props.href ? undefined : 'button'}
+        {...this.props}
+        onClick={this.handleClick}
+        href={this.props.href || ''}/>
+    );
+  }
+}
+
+SafeAnchor.propTypes = {
+  href: React.PropTypes.string,
+  onClick: React.PropTypes.func
+};
diff --git a/src/SubNav.js b/src/SubNav.js
index e9487c1ada..814604cc76 100644
--- a/src/SubNav.js
+++ b/src/SubNav.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
+import SafeAnchor from './SafeAnchor';
 
 const SubNav = React.createClass({
   mixins: [BootstrapMixin],
@@ -99,14 +100,13 @@ const SubNav = React.createClass({
 
     return (
       <li {...this.props} className={classNames(this.props.className, classes)}>
-        <a
+        <SafeAnchor
           href={this.props.href}
           title={this.props.title}
           target={this.props.target}
-          onClick={this.handleClick}
-          ref="anchor">
+          onClick={this.handleClick}>
           {this.props.text}
-        </a>
+        </SafeAnchor>
         <ul className="nav">
           {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
         </ul>
diff --git a/src/Thumbnail.js b/src/Thumbnail.js
index ea05cf85d2..8085e63fea 100644
--- a/src/Thumbnail.js
+++ b/src/Thumbnail.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classSet from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
+import SafeAnchor from './SafeAnchor';
 
 const Thumbnail = React.createClass({
   mixins: [BootstrapMixin],
@@ -16,9 +17,9 @@ const Thumbnail = React.createClass({
 
     if(this.props.href) {
       return (
-        <a {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
+        <SafeAnchor {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
           <img src={this.props.src} alt={this.props.alt} />
-        </a>
+        </SafeAnchor>
       );
     }
     else {
diff --git a/src/index.js b/src/index.js
index 0f05aed32f..ed0d61b513 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,6 +42,7 @@ import Pager from './Pager';
 import Popover from './Popover';
 import ProgressBar from './ProgressBar';
 import Row from './Row';
+import SafeAnchor from './SafeAnchor';
 import SplitButton from './SplitButton';
 import SubNav from './SubNav';
 import TabbedArea from './TabbedArea';
@@ -97,6 +98,7 @@ export default {
   Popover,
   ProgressBar,
   Row,
+  SafeAnchor,
   SplitButton,
   SubNav,
   TabbedArea,
diff --git a/test/NavSpec.js b/test/NavSpec.js
index 81a8d09fe4..1061edb738 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -83,9 +83,9 @@ describe('Nav', function () {
           </Nav>
         );
 
-    let items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+    let items = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
 
-    ReactTestUtils.Simulate.click(items[1].refs.anchor);
+    ReactTestUtils.Simulate.click(items[1]);
   });
 
   it('Should set the correct item active by href', function () {
diff --git a/test/PageItemSpec.js b/test/PageItemSpec.js
index 99e3d0b10d..7f079f4be2 100644
--- a/test/PageItemSpec.js
+++ b/test/PageItemSpec.js
@@ -36,7 +36,7 @@ describe('PageItem', function () {
   it('Should call "onSelect" when item is clicked', function (done) {
     function handleSelect(key, href) {
       assert.equal(key, 1);
-      assert.equal(href, '#');
+      assert.equal(href, undefined);
       done();
     }
     let instance = ReactTestUtils.renderIntoDocument(
diff --git a/test/SafeAnchorSpec.js b/test/SafeAnchorSpec.js
new file mode 100644
index 0000000000..75b9d0a8de
--- /dev/null
+++ b/test/SafeAnchorSpec.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import SafeAnchor from '../src/SafeAnchor';
+
+describe('SafeAnchor', function() {
+  it('renders an anchor tag', function() {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
+    const node = React.findDOMNode(instance);
+
+    node.tagName.should.equal('A');
+  });
+
+  it('forwards arbitrary props to the anchor', function() {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor herpa='derpa' />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.herpa.should.equal('derpa');
+  });
+
+  it('forwards provided href', function() {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='http://google.com' />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.href.should.equal('http://google.com');
+  });
+
+  it('ensures that an href is provided', function() {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.href.should.equal('');
+  });
+
+  it('forwards onClick handler', function(done) {
+    const handleClick = (event) => {
+      done();
+    };
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor onClick={handleClick} />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    ReactTestUtils.Simulate.click(anchor);
+  });
+
+  it('prevents default when no href is provided', function(done) {
+    const handleClick = (event) => {
+      event.defaultPrevented.should.be.true;
+      done();
+    };
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor onClick={handleClick} />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    ReactTestUtils.Simulate.click(anchor);
+  });
+
+  it('does not prevent default when href is provided', function(done) {
+    const handleClick = (event) => {
+      expect(event.defaultPrevented).to.not.be.ok;
+      done();
+    };
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='#' onClick={handleClick} />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    ReactTestUtils.Simulate.click(anchor);
+  });
+
+  it('forwards provided role', function () {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor role='test' />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.role.should.equal('test');
+  });
+
+  it('forwards provided role with href', function () {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor role='test' href='http://google.com' />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.role.should.equal('test');
+  });
+
+  it('set role=button with no provided href', function () {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    anchor.props.role.should.equal('button');
+  });
+
+  it('sets no role with provided href', function () {
+    const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='http://google.com' />);
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    expect(anchor.props.role).to.be.undefined;
+  });
+});

From b547109a71f5f5115534650e58721e70517d664d Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Tue, 2 Jun 2015 11:01:37 -0600
Subject: [PATCH 003/128] Fix alpha changelog generation to be added

---
 tools/release-scripts/changelog.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tools/release-scripts/changelog.js b/tools/release-scripts/changelog.js
index a97b72b786..c31f53841a 100644
--- a/tools/release-scripts/changelog.js
+++ b/tools/release-scripts/changelog.js
@@ -29,11 +29,9 @@ export default (version) => {
     .then(() => exec(`node_modules/.bin/changelog --title v${version} --out ${output}${additionalArgs}`))
     .then(() => safeExec(`git add ${changelog}`))
     .then(() => {
-      if (!removedAlphaChangelog) {
-        return null;
+      if (removedAlphaChangelog || isPrerelease) {
+        return safeExec(`git add -A ${alphaChangelog}`);
       }
-
-      return safeExec(`git add -A ${alphaChangelog}`);
     })
     .then(() => console.log('Generated Changelog'.cyan));
 };

From 3146dee139a0b9b5b332b4549d72e1c77fcd39e2 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Tue, 2 Jun 2015 11:08:52 -0600
Subject: [PATCH 004/128] Release v0.24.0-alpha.0

---
 CHANGELOG-alpha.md | 5 +++++
 package.json       | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG-alpha.md

diff --git a/CHANGELOG-alpha.md b/CHANGELOG-alpha.md
new file mode 100644
index 0000000000..9c16c92cb7
--- /dev/null
+++ b/CHANGELOG-alpha.md
@@ -0,0 +1,5 @@
+v0.24.0-alpha.0 - Tue, 02 Jun 2015 17:08:11 GMT
+-----------------------------------------------
+
+- [9c09e2a](../../commit/9c09e2a) [fixed] Keyboard accessibility for anchors serving as buttons
+- [ce5b436](../../commit/ce5b436) [removed] Input type=submit deprecation warning.
diff --git a/package.json b/package.json
index e24d1a0841..7f8e9ddc53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.23.1",
+  "version": "0.24.0-alpha.0",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From beaa1fa614d96507c576b5f3823160b408b17a49 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Mon, 8 Jun 2015 18:57:17 -0600
Subject: [PATCH 005/128] [changed] `PaginationButton` to use `SafeAnchor`

Using the `SafeAnchor` for better accessibility.

Per #786 commitcomment-11527424
Resolves #788
---
 src/PaginationButton.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/PaginationButton.js b/src/PaginationButton.js
index 0238b5b9b7..e49e1344ca 100644
--- a/src/PaginationButton.js
+++ b/src/PaginationButton.js
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import createSelectedEvent from './utils/createSelectedEvent';
+import SafeAnchor from './SafeAnchor';
 
 const PaginationButton = React.createClass({
   mixins: [BootstrapMixin],
@@ -25,9 +26,6 @@ const PaginationButton = React.createClass({
   },
 
   handleClick(event) {
-    // This would go away once SafeAnchor is available
-    event.preventDefault();
-
     if (this.props.onSelect) {
       let selectedEvent = createSelectedEvent(this.props.eventKey);
       this.props.onSelect(event, selectedEvent);
@@ -35,14 +33,22 @@ const PaginationButton = React.createClass({
   },
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = {
+      active: this.props.active,
+      disabled: this.props.disabled,
+      ...this.getBsClassSet()
+    };
 
-    classes.active = this.props.active;
-    classes.disabled = this.props.disabled;
+    let {
+      className,
+      ...anchorProps // eslint-disable-line object-shorthand
+    } = this.props;
 
     return (
-      <li className={classNames(this.props.className, classes)}>
-        <a href='#' onClick={this.handleClick}>{this.props.children}</a>
+      <li className={classNames(className, classes)}>
+        <SafeAnchor
+          {...anchorProps}
+          onClick={this.handleClick} />
       </li>
     );
   }

From 704a168eb334c293cfef0d566d51999f6ed46557 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Mon, 8 Jun 2015 19:07:11 -0600
Subject: [PATCH 006/128] Release v0.24.0-alpha.1

---
 CHANGELOG-alpha.md | 11 +++++++++++
 package.json       |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-alpha.md b/CHANGELOG-alpha.md
index 9c16c92cb7..ded6d073d6 100644
--- a/CHANGELOG-alpha.md
+++ b/CHANGELOG-alpha.md
@@ -1,3 +1,14 @@
+v0.24.0-alpha.1 - Tue, 09 Jun 2015 01:06:34 GMT
+-----------------------------------------------
+
+- [7211dcb](../../commit/7211dcb) [added] Add prevIcon and nextIcon props as node proptypes to Carousel
+- [5734ec3](../../commit/5734ec3) [added] Pagination component
+- [2f8c454](../../commit/2f8c454) [changed] Assert ProgressBar children can be ProgressBar only.
+- [2c46820](../../commit/2c46820) [added] `createSelectedEvent` for consistent onSelect handling
+- [c2ff9ad](../../commit/c2ff9ad) [added] property disabled on MenuItem
+
+
+
 v0.24.0-alpha.0 - Tue, 02 Jun 2015 17:08:11 GMT
 -----------------------------------------------
 
diff --git a/package.json b/package.json
index 7f8e9ddc53..9c4b05b14e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.0-alpha.0",
+  "version": "0.24.0-alpha.1",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From 598b9d85820edc8eafac2f95a0d1e8bae0623485 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Tue, 9 Jun 2015 18:16:20 -0600
Subject: [PATCH 007/128] [fixed] SafeAnchor event ordering

If we prevent default before applying the `onClick` function provided in
props then we prevent elements from using the `event.preventDefault()`
mechanics for anchors as buttons. For example in the Dropdown re-work
this prevented me from having the Dropdown work when in a Nav since the
toggle is an anchor. Yet that functionality should allow uses to prevent
the Dropdown if they want in their own `onClick` handler. This will
enable such a use case.
---
 src/SafeAnchor.js      |  7 ++-----
 test/SafeAnchorSpec.js | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/SafeAnchor.js b/src/SafeAnchor.js
index 8316bbe634..ae45a9c261 100644
--- a/src/SafeAnchor.js
+++ b/src/SafeAnchor.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import createChainedFunction from './utils/createChainedFunction';
 
 /**
  * Note: This is intended as a stop-gap for accessibility concerns that the
@@ -16,17 +17,13 @@ export default class SafeAnchor extends React.Component {
     if (this.props.href === undefined) {
       event.preventDefault();
     }
-
-    if (this.props.onClick) {
-      this.props.onClick(event);
-    }
   }
 
   render() {
     return (
       <a role={this.props.href ? undefined : 'button'}
         {...this.props}
-        onClick={this.handleClick}
+        onClick={createChainedFunction(this.props.onClick, this.handleClick)}
         href={this.props.href || ''}/>
     );
   }
diff --git a/test/SafeAnchorSpec.js b/test/SafeAnchorSpec.js
index 75b9d0a8de..2271c2fbbe 100644
--- a/test/SafeAnchorSpec.js
+++ b/test/SafeAnchorSpec.js
@@ -43,8 +43,12 @@ describe('SafeAnchor', function() {
 
   it('prevents default when no href is provided', function(done) {
     const handleClick = (event) => {
-      event.defaultPrevented.should.be.true;
-      done();
+      expect(event.isDefaultPrevented()).to.not.be.ok;
+
+      setTimeout(() => {
+        event.isDefaultPrevented().should.be.true;
+        done();
+      }, 100);
     };
     const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor onClick={handleClick} />);
     const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
@@ -54,8 +58,12 @@ describe('SafeAnchor', function() {
 
   it('does not prevent default when href is provided', function(done) {
     const handleClick = (event) => {
-      expect(event.defaultPrevented).to.not.be.ok;
-      done();
+      expect(event.isDefaultPrevented()).to.not.be.ok;
+
+      setTimeout(() => {
+        expect(event.isDefaultPrevented()).to.not.be.ok;
+        done();
+      });
     };
     const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='#' onClick={handleClick} />);
     const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');

From 6e985b0537550d7123ef58bdff125da626acda2c Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Wed, 10 Jun 2015 19:28:05 -0600
Subject: [PATCH 008/128] [removed] Individual files in bower release

Resolves #693
---
 tools/amd/bower.json |  3 +--
 tools/amd/build.js   | 16 ++--------------
 tools/buildBabel.js  |  8 +-------
 3 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/tools/amd/bower.json b/tools/amd/bower.json
index 0e3451d5c4..5c56aa2f4d 100644
--- a/tools/amd/bower.json
+++ b/tools/amd/bower.json
@@ -16,7 +16,6 @@
     "**/.*"
   ],
   "dependencies": {
-    "react": ">= 0.13.0",
-    "classnames": "^2.0.0"
+    "react": ">= 0.13.0"
   }
 }
diff --git a/tools/amd/build.js b/tools/amd/build.js
index ae47031c22..70f87c72e0 100644
--- a/tools/amd/build.js
+++ b/tools/amd/build.js
@@ -3,9 +3,7 @@ import path from 'path';
 import fsp from 'fs-promise';
 import { copy } from '../fs-utils';
 import { exec } from '../exec';
-import generateFactories from '../generateFactories';
-import { repoRoot, srcRoot, bowerRoot } from '../constants';
-import { buildFolder } from '../buildBabel';
+import { repoRoot, bowerRoot } from '../constants';
 
 const packagePath = path.join(repoRoot, 'package.json');
 const bowerTemplate = path.join(__dirname, 'bower.json');
@@ -14,14 +12,6 @@ const bowerJson = path.join(bowerRoot, 'bower.json');
 const readme = path.join(__dirname, 'README.md');
 const license = path.join(repoRoot, 'LICENSE');
 
-const babelOptions = {
-  __reactBootstrapDeprecationWarning: true,
-  modules: 'amd'
-};
-
-const libDestination = path.join(bowerRoot, 'lib');
-const factoriesDestination = path.join(libDestination, 'factories');
-
 function bowerConfig() {
   return Promise.all([
     fsp.readFile(packagePath)
@@ -37,11 +27,9 @@ export default function BuildBower() {
   console.log('Building: '.cyan + 'bower module'.green);
 
   return exec(`rimraf ${bowerRoot}`)
-    .then(() => fsp.mkdirs(factoriesDestination))
+    .then(() => fsp.mkdirs(bowerRoot))
     .then(() => Promise.all([
       bowerConfig(),
-      generateFactories(factoriesDestination, babelOptions),
-      buildFolder(srcRoot, libDestination, babelOptions),
       copy(readme, bowerRoot),
       copy(license, bowerRoot)
     ]))
diff --git a/tools/buildBabel.js b/tools/buildBabel.js
index 7811d21bb4..e2ef5c66e2 100644
--- a/tools/buildBabel.js
+++ b/tools/buildBabel.js
@@ -12,13 +12,7 @@ export function buildContent(content, filename, destination, babelOptions={}) {
 }
 
 export function buildFile(filename, destination, babelOptions={}) {
-  let content = fs.readFileSync(filename, {encoding: 'utf8'});
-  if (babelOptions.__reactBootstrapDeprecationWarning) {
-    content = `console.warn('This file is deprecated, and will be removed in v0.24.0. Use react-bootstrap.js or react-bootstrap.min.js instead.');
-console.warn('You can read more about it at https://github.com/react-bootstrap/react-bootstrap/issues/693');
-${content}`;
-  }
-
+  const content = fs.readFileSync(filename, {encoding: 'utf8'});
   if(babelUtil.canCompile(filename)) {
     // Get file basename without the extension (in case not .js)
     let outputName = path.basename(filename, path.extname(filename));

From 36358d6176ae9be1d4266fce20ae308602939736 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Fri, 12 Jun 2015 15:52:46 -0600
Subject: [PATCH 009/128] Release v0.24.0-alpha.2

---
 CHANGELOG-alpha.md | 14 ++++++++++++++
 package.json       |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-alpha.md b/CHANGELOG-alpha.md
index ded6d073d6..62db670361 100644
--- a/CHANGELOG-alpha.md
+++ b/CHANGELOG-alpha.md
@@ -1,3 +1,17 @@
+v0.24.0-alpha.2 - Fri, 12 Jun 2015 21:52:11 GMT
+-----------------------------------------------
+
+- [9ca26e9](../../commit/9ca26e9) [added] contains "polyfill" to domUtils
+- [6e985b0](../../commit/6e985b0) [removed] Individual files in bower release
+- [3a254a1](../../commit/3a254a1) [added] Deprecation warning for individual file use in the Bower release
+- [73c7705](../../commit/73c7705) [changed] Update chai. Dev dependency.
+- [3ca90c7](../../commit/3ca90c7) [changed] Update karma-sinon-chai. Dev dependency.
+- [cc4e820](../../commit/cc4e820) [changed] Update fs-extra. Dev dependency.
+- [598b9d8](../../commit/598b9d8) [fixed] SafeAnchor event ordering
+- [beaa1fa](../../commit/beaa1fa) [changed] `PaginationButton` to use `SafeAnchor`
+
+
+
 v0.24.0-alpha.1 - Tue, 09 Jun 2015 01:06:34 GMT
 -----------------------------------------------
 
diff --git a/package.json b/package.json
index d61be1e689..b075ef7e69 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.0-alpha.1",
+  "version": "0.24.0-alpha.2",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From fafe46f0037814773b5bce49f1b7b2bdf3fb3f2b Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Sat, 13 Jun 2015 12:18:33 -0400
Subject: [PATCH 010/128] [changed] Use named exports in index files

Fixes #350
---
 .babelrc                       |   4 +-
 docs/src/GettingStartedPage.js |   7 +-
 docs/src/ReactPlayground.js    |  10 +-
 src/FormControls/index.js      |   6 +-
 src/Input.js                   |   2 +-
 src/index.js                   | 170 +++++++++++----------------------
 src/utils/index.js             |  18 +---
 test/FormControlsSpec.js       |   2 +-
 tools/public-components.js     |   2 +-
 9 files changed, 77 insertions(+), 144 deletions(-)

diff --git a/.babelrc b/.babelrc
index 8f85e598f6..3162e1a075 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,3 @@
 {
-  "optional": [
-    "es7.objectRestSpread"
-  ]
+  "stage": 1
 }
diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
index f19af4f741..883dff20e9 100644
--- a/docs/src/GettingStartedPage.js
+++ b/docs/src/GettingStartedPage.js
@@ -43,7 +43,12 @@ $ npm install react-bootstrap`
                       codeText={
 `var Alert = require('react-bootstrap/lib/Alert');
 // or
-var Alert = require('react-bootstrap').Alert;`
+var Alert = require('react-bootstrap').Alert;
+
+// with ES6 modules
+import Alert from 'react-bootstrap/lib/Alert';
+// or
+import {Alert} from 'react-bootstrap';`
                       }
                     />
                   </div>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 0b33a304a3..743bb65979 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -3,10 +3,10 @@ import * as modClassNames from 'classnames';
 import * as modAccordion from '../../src/Accordion';
 import * as modAlert from '../../src/Alert';
 import * as modBadge from '../../src/Badge';
-import * as modmodButton from '../../src/Button';
+import * as modButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
 import * as modButtonInput from '../../src/ButtonInput';
-import * as modmodButtonToolbar from '../../src/ButtonToolbar';
+import * as modButtonToolbar from '../../src/ButtonToolbar';
 import * as modCollapsibleNav from '../../src/CollapsibleNav';
 import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
 import * as modCarousel from '../../src/Carousel';
@@ -56,17 +56,17 @@ const React = modReact.default;
 const Accordion = modAccordion.default;
 const Alert = modAlert.default;
 const Badge = modBadge.default;
-const Button = modmodButton.default;
+const Button = modButton.default;
 const ButtonGroup = modButtonGroup.default;
 const ButtonInput = modButtonInput.default;
-const ButtonToolbar = modmodButtonToolbar.default;
+const ButtonToolbar = modButtonToolbar.default;
 const CollapsibleNav = modCollapsibleNav.default;
 const CollapsibleMixin = modCollapsibleMixin.default;
 const Carousel = modCarousel.default;
 const CarouselItem = modCarouselItem.default;
 const Col = modCol.default;
 const DropdownButton = modDropdownButton.default;
-const FormControls = modFormControls.default;
+const FormControls = modFormControls;
 const Glyphicon = modGlyphicon.default;
 const Grid = modGrid.default;
 const Input = modInput.default;
diff --git a/src/FormControls/index.js b/src/FormControls/index.js
index 5a7c16286e..ef0f49c381 100644
--- a/src/FormControls/index.js
+++ b/src/FormControls/index.js
@@ -1,5 +1 @@
-import Static from './Static';
-
-export default {
-  Static
-};
+export Static from './Static';
diff --git a/src/Input.js b/src/Input.js
index f385c5607d..d08eac7b35 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import InputBase from './InputBase';
-import FormControls from './FormControls';
+import * as FormControls from './FormControls';
 import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
diff --git a/src/index.js b/src/index.js
index 814c690572..5167ae7474 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,115 +1,57 @@
-import Accordion from './Accordion';
-import Affix from './Affix';
-import AffixMixin from './AffixMixin';
-import Alert from './Alert';
-import BootstrapMixin from './BootstrapMixin';
-import Badge from './Badge';
-import Button from './Button';
-import ButtonGroup from './ButtonGroup';
-import ButtonInput from './ButtonInput';
-import ButtonToolbar from './ButtonToolbar';
-import CollapsibleNav from './CollapsibleNav';
-import Carousel from './Carousel';
-import CarouselItem from './CarouselItem';
-import Col from './Col';
-import CollapsibleMixin from './CollapsibleMixin';
-import DropdownButton from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownStateMixin from './DropdownStateMixin';
-import FadeMixin from './FadeMixin';
-import FormControls from './FormControls';
-import Glyphicon from './Glyphicon';
-import Grid from './Grid';
-import Input from './Input';
-import Interpolate from './Interpolate';
-import Jumbotron from './Jumbotron';
-import Label from './Label';
-import ListGroup from './ListGroup';
-import ListGroupItem from './ListGroupItem';
-import MenuItem from './MenuItem';
-import Modal from './Modal';
-import Nav from './Nav';
-import Navbar from './Navbar';
-import NavItem from './NavItem';
-import ModalTrigger from './ModalTrigger';
-import OverlayTrigger from './OverlayTrigger';
-import OverlayMixin from './OverlayMixin';
-import PageHeader from './PageHeader';
-import Pagination from './Pagination';
-import Panel from './Panel';
-import PanelGroup from './PanelGroup';
-import PageItem from './PageItem';
-import Pager from './Pager';
-import Popover from './Popover';
-import ProgressBar from './ProgressBar';
-import Row from './Row';
-import SafeAnchor from './SafeAnchor';
-import SplitButton from './SplitButton';
-import SubNav from './SubNav';
-import TabbedArea from './TabbedArea';
-import Table from './Table';
-import TabPane from './TabPane';
-import Thumbnail from './Thumbnail';
-import Tooltip from './Tooltip';
-import utils from './utils';
-import Well from './Well';
-import styleMaps from './styleMaps';
+export Accordion from './Accordion';
+export Affix from './Affix';
+export AffixMixin from './AffixMixin';
+export Alert from './Alert';
+export Badge from './Badge';
+export BootstrapMixin from './BootstrapMixin';
+export Button from './Button';
+export ButtonGroup from './ButtonGroup';
+export ButtonInput from './ButtonInput';
+export ButtonToolbar from './ButtonToolbar';
+export Carousel from './Carousel';
+export CarouselItem from './CarouselItem';
+export Col from './Col';
+export CollapsibleMixin from './CollapsibleMixin';
+export CollapsibleNav from './CollapsibleNav';
+export DropdownButton from './DropdownButton';
+export DropdownMenu from './DropdownMenu';
+export DropdownStateMixin from './DropdownStateMixin';
+export FadeMixin from './FadeMixin';
+export Glyphicon from './Glyphicon';
+export Grid from './Grid';
+export Input from './Input';
+export Interpolate from './Interpolate';
+export Jumbotron from './Jumbotron';
+export Label from './Label';
+export ListGroup from './ListGroup';
+export ListGroupItem from './ListGroupItem';
+export MenuItem from './MenuItem';
+export Modal from './Modal';
+export ModalTrigger from './ModalTrigger';
+export Nav from './Nav';
+export Navbar from './Navbar';
+export NavItem from './NavItem';
+export OverlayMixin from './OverlayMixin';
+export OverlayTrigger from './OverlayTrigger';
+export PageHeader from './PageHeader';
+export PageItem from './PageItem';
+export Pager from './Pager';
+export Pagination from './Pagination';
+export Panel from './Panel';
+export PanelGroup from './PanelGroup';
+export Popover from './Popover';
+export ProgressBar from './ProgressBar';
+export Row from './Row';
+export SafeAnchor from './SafeAnchor';
+export SplitButton from './SplitButton';
+export styleMaps from './styleMaps';
+export SubNav from './SubNav';
+export TabbedArea from './TabbedArea';
+export Table from './Table';
+export TabPane from './TabPane';
+export Thumbnail from './Thumbnail';
+export Tooltip from './Tooltip';
+export Well from './Well';
 
-export default {
-  Accordion,
-  Affix,
-  AffixMixin,
-  Alert,
-  BootstrapMixin,
-  Badge,
-  Button,
-  ButtonGroup,
-  ButtonInput,
-  ButtonToolbar,
-  CollapsibleNav,
-  Carousel,
-  CarouselItem,
-  Col,
-  CollapsibleMixin,
-  DropdownButton,
-  DropdownMenu,
-  DropdownStateMixin,
-  FadeMixin,
-  FormControls,
-  Glyphicon,
-  Grid,
-  Input,
-  Interpolate,
-  Jumbotron,
-  Label,
-  ListGroup,
-  ListGroupItem,
-  MenuItem,
-  Modal,
-  Nav,
-  Navbar,
-  NavItem,
-  ModalTrigger,
-  OverlayTrigger,
-  OverlayMixin,
-  PageHeader,
-  Panel,
-  PanelGroup,
-  PageItem,
-  Pager,
-  Pagination,
-  Popover,
-  ProgressBar,
-  Row,
-  SafeAnchor,
-  SplitButton,
-  SubNav,
-  TabbedArea,
-  Table,
-  TabPane,
-  Thumbnail,
-  Tooltip,
-  utils,
-  Well,
-  styleMaps
-};
+export * as FormControls from './FormControls';
+export * as utils from './utils';
diff --git a/src/utils/index.js b/src/utils/index.js
index aad9066a10..f024432a7b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,13 +1,5 @@
-import childrenValueInputValidation from './childrenValueInputValidation';
-import createChainedFunction from './createChainedFunction';
-import CustomPropTypes from './CustomPropTypes';
-import domUtils from './domUtils';
-import ValidComponentChildren from './ValidComponentChildren';
-
-export default {
-  childrenValueInputValidation,
-  createChainedFunction,
-  CustomPropTypes,
-  domUtils,
-  ValidComponentChildren
-};
+export childrenValueInputValidation from './childrenValueInputValidation';
+export createChainedFunction from './createChainedFunction';
+export CustomPropTypes from './CustomPropTypes';
+export domUtils from './domUtils';
+export ValidComponentChildren from './ValidComponentChildren';
diff --git a/test/FormControlsSpec.js b/test/FormControlsSpec.js
index cc56ecd618..31c9941d30 100644
--- a/test/FormControlsSpec.js
+++ b/test/FormControlsSpec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
-import FormControls from '../src/FormControls';
+import * as FormControls from '../src/FormControls';
 
 describe('Form Controls', function () {
   describe('Static', function () {
diff --git a/tools/public-components.js b/tools/public-components.js
index a030df7253..67fc67f0c7 100644
--- a/tools/public-components.js
+++ b/tools/public-components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import index from '../src/index';
+import * as index from '../src/index';
 
 let components = [];
 Object.keys(index).forEach(function (item) {

From fbbb3440c0ef409613ace104791b914ca6ca61ec Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sat, 13 Jun 2015 23:21:33 +0300
Subject: [PATCH 011/128] [fixed] bower template.

Removed "classnames" from dependencies because webpack bundles it.
---
 tools/amd/bower.json | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tools/amd/bower.json b/tools/amd/bower.json
index 5c56aa2f4d..5d22b3626e 100644
--- a/tools/amd/bower.json
+++ b/tools/amd/bower.json
@@ -8,14 +8,12 @@
     "react-bootstrap.js"
   ],
   "keywords": [
-    "react",
-    "react-component",
-    "bootstrap"
+    <%= _.map(pkg.keywords, function(keyword) { return '"' + keyword + '"' }).join(',\n    ')%>
   ],
   "ignore": [
     "**/.*"
   ],
   "dependencies": {
-    "react": ">= 0.13.0"
+    "react": "<%= pkg.peerDependencies.react %>"
   }
 }

From b67081b81d7c74edce6d341f8f54a880380d65b8 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Sun, 14 Jun 2015 15:21:13 -0400
Subject: [PATCH 012/128] [fixed] rootClose behavior on replaced elements

Fixes #802
---
 src/OverlayMixin.js        |  8 ++++--
 src/RootCloseWrapper.js    | 31 ++++++++++++++++----
 test/OverlayTriggerSpec.js | 59 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/src/OverlayMixin.js b/src/OverlayMixin.js
index 76524ed61c..f8874a8828 100644
--- a/src/OverlayMixin.js
+++ b/src/OverlayMixin.js
@@ -37,7 +37,7 @@ export default {
 
     let overlay = this.renderOverlay();
 
-    // Save reference to help testing
+    // Save reference for future access.
     if (overlay !== null) {
       this._overlayInstance = React.render(overlay, this._overlayTarget);
     } else {
@@ -57,7 +57,11 @@ export default {
     }
 
     if (this._overlayInstance) {
-      return React.findDOMNode(this._overlayInstance);
+      if (this._overlayInstance.getWrappedDOMNode) {
+        return this._overlayInstance.getWrappedDOMNode();
+      } else {
+        return React.findDOMNode(this._overlayInstance);
+      }
     }
 
     return null;
diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js
index 146c688ab9..35fecab769 100644
--- a/src/RootCloseWrapper.js
+++ b/src/RootCloseWrapper.js
@@ -4,6 +4,15 @@ import EventListener from './utils/EventListener';
 
 // TODO: Merge this logic with dropdown logic once #526 is done.
 
+// TODO: Consider using an ES6 symbol here, once we use babel-runtime.
+const CLICK_WAS_INSIDE = '__click_was_inside';
+
+function suppressRootClose(event) {
+  // Tag the native event to prevent the root close logic on document click.
+  // This seems safer than using event.nativeEvent.stopImmediatePropagation(),
+  // which is only supported in IE >= 9.
+  event.nativeEvent[CLICK_WAS_INSIDE] = true;
+}
 
 export default class RootCloseWrapper extends React.Component {
   constructor(props) {
@@ -23,10 +32,8 @@ export default class RootCloseWrapper extends React.Component {
   }
 
   handleDocumentClick(e) {
-    // If the click originated from within this component, don't do anything.
-    // e.srcElement is required for IE8 as e.target is undefined
-    let target = e.target || e.srcElement;
-    if (domUtils.contains(React.findDOMNode(this), target)) {
+    // This is now the native event.
+    if (e[CLICK_WAS_INSIDE]) {
       return;
     }
 
@@ -54,7 +61,21 @@ export default class RootCloseWrapper extends React.Component {
   }
 
   render() {
-    return React.Children.only(this.props.children);
+    // Wrap the child in a new element, so the child won't have to handle
+    // potentially combining multiple onClick listeners.
+    return (
+      <div onClick={suppressRootClose}>
+        {React.Children.only(this.props.children)}
+      </div>
+    );
+  }
+
+  getWrappedDOMNode() {
+    // We can't use a ref to identify the wrapped child, since we might be
+    // stealing the ref from the owner, but we know exactly the DOM structure
+    // that will be rendered, so we can just do this to get the child's DOM
+    // node for doing size calculations in OverlayMixin.
+    return React.findDOMNode(this).children[0];
   }
 
   componentWillUnmount() {
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 756cb4a46d..75ae2fcf40 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -236,13 +236,66 @@ describe('OverlayTrigger', function() {
         });
 
         it('Should have correct isOverlayShown state', function () {
-          const event = document.createEvent('HTMLEvents');
-          event.initEvent('click', true, true);
-          document.documentElement.dispatchEvent(event);
+          document.documentElement.click();
 
+          // Need to click this way for it to propagate to document element.
           instance.state.isOverlayShown.should.equal(testCase.shownAfterClick);
         });
       });
     });
+
+    describe('replaced overlay', function () {
+      let instance;
+
+      beforeEach(function () {
+        class ReplacedOverlay extends React.Component {
+          constructor(props) {
+            super(props);
+
+            this.handleClick = this.handleClick.bind(this);
+            this.state = {replaced: false};
+          }
+
+          handleClick() {
+            this.setState({replaced: true});
+          }
+
+          render() {
+            if (this.state.replaced) {
+              return (
+                <div>replaced</div>
+              );
+            } else {
+              return (
+                <div>
+                  <a id="replace-overlay" onClick={this.handleClick}>
+                    original
+                  </a>
+                </div>
+              );
+            }
+          }
+        }
+
+        instance = ReactTestUtils.renderIntoDocument(
+          <OverlayTrigger
+            overlay={<ReplacedOverlay />}
+            trigger='click' rootClose={true}
+          >
+            <button>button</button>
+          </OverlayTrigger>
+        );
+        const overlayTrigger = React.findDOMNode(instance);
+        ReactTestUtils.Simulate.click(overlayTrigger);
+      });
+
+      it('Should still be shown', function () {
+        // Need to click this way for it to propagate to document element.
+        const replaceOverlay = document.getElementById('replace-overlay');
+        replaceOverlay.click();
+
+        instance.state.isOverlayShown.should.be.true;
+      });
+    });
   });
 });

From c987a8c10e572d248b1615fed88bd7cf536418c1 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Mon, 15 Jun 2015 12:50:23 -0400
Subject: [PATCH 013/128] Use babel-runtime transformer for helpers

Fixes #579
---
 .babelrc     | 3 ++-
 package.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/.babelrc b/.babelrc
index 3162e1a075..2fa4b4fe3c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "stage": 1
+  "stage": 1,
+  "optional": ["runtime"]
 }
diff --git a/package.json b/package.json
index b075ef7e69..86d5c5664e 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "yargs": "^3.5.4"
   },
   "dependencies": {
+    "babel-runtime": "^5.1.10",
     "classnames": "^2.0.0"
   }
-}
\ No newline at end of file
+}

From 01c547f1df131ac885546c861ba5f9c49ce4ddd8 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Mon, 15 Jun 2015 14:25:05 -0400
Subject: [PATCH 014/128] [fixed] Do not use Babel cache for release build

Fixes #840
---
 docs/build.js                    |  7 +++++--
 tools/build-cli.js               |  9 ++++++++-
 tools/build.js                   | 13 +++++++------
 tools/dist/build.js              |  8 +++++---
 tools/release-scripts/release.js |  6 ++++--
 webpack/base.config.js           | 33 +++++++++++++++++++-------------
 6 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/docs/build.js b/docs/build.js
index 6f9b8a666c..f167e47641 100644
--- a/docs/build.js
+++ b/docs/build.js
@@ -32,16 +32,19 @@ function generateHTML(fileName) {
   });
 }
 
-export default function BuildDocs({ dev }) {
+export default function BuildDocs({useCache, dev}) {
   console.log('Building: '.cyan + 'docs'.green + (dev ? ' [DEV]'.grey : ''));
 
+  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
+  const devOption = dev ? '' : '-p';
+
   return exec(`rimraf ${docsBuilt}`)
     .then(() => fsp.mkdir(docsBuilt))
     .then(() => {
       let pagesGenerators = Root.getPages().map(generateHTML);
 
       return Promise.all(pagesGenerators.concat([
-        exec(`webpack --config webpack.docs.js ${dev ? '' : '-p '}--bail`),
+        exec(`webpack --config webpack.docs.js ${useCacheOption} --bail ${devOption}`),
         copy(license, docsBuilt),
         copy(readmeSrc, readmeDest)
       ]));
diff --git a/tools/build-cli.js b/tools/build-cli.js
index 2ff0148967..204ed5cea5 100644
--- a/tools/build-cli.js
+++ b/tools/build-cli.js
@@ -8,10 +8,17 @@ import { setExecOptions } from './exec';
 import yargs from 'yargs';
 
 const argv = yargs
+  .help('h')
   .option('docs-only', {
     demand: false,
     default: false
   })
+  .option('use-cache', {
+    type: 'boolean',
+    demand: false,
+    default: true,
+    describe: 'Use Babel cache when running webpack'
+  })
   .option('verbose', {
     demand: false,
     default: false,
@@ -26,7 +33,7 @@ const argv = yargs
 
 setExecOptions(argv);
 
-let buildProcess = argv.docsOnly ? docs(argv) : build();
+let buildProcess = argv.docsOnly ? docs(argv) : build(argv);
 
 buildProcess
   .catch(err => {
diff --git a/tools/build.js b/tools/build.js
index d0e79ae53e..ee3a1bdbce 100644
--- a/tools/build.js
+++ b/tools/build.js
@@ -6,21 +6,22 @@ import { copy } from './fs-utils';
 import { distRoot, bowerRoot } from './constants';
 import { exec } from './exec';
 
-function forkAndBuildDocs(verbose) {
+function forkAndBuildDocs({verbose, useCache}) {
   console.log('Building: '.cyan + 'docs'.green);
 
-  let options = verbose ? ' -- --verbose' : '';
+  const verboseOption = verbose ? '--verbose' : '';
+  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
 
-  return exec(`npm run docs-build${options}`)
+  return exec(`npm run docs-build -- ${verboseOption} ${useCacheOption}`)
     .then(() => console.log('Built: '.cyan + 'docs'.green));
 }
 
-export default function Build(verbose) {
+export default function Build({verbose, useCache} = {}) {
   return Promise.all([
       lib(),
       bower(),
-      dist(),
-      forkAndBuildDocs(verbose)
+      dist({useCache}),
+      forkAndBuildDocs({verbose, useCache})
     ])
     .then(() => copy(distRoot, bowerRoot));
 }
diff --git a/tools/dist/build.js b/tools/dist/build.js
index 27047db903..c47704fd27 100644
--- a/tools/dist/build.js
+++ b/tools/dist/build.js
@@ -1,13 +1,15 @@
 import { exec } from '../exec';
 import { distRoot } from '../constants';
 
-export default function BuildDistributable() {
+export default function BuildDistributable({useCache}) {
   console.log('Building: '.cyan + 'distributable'.green);
 
+  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
+
   return exec(`rimraf ${distRoot}`)
     .then(() => Promise.all([
-      exec('webpack --bail'),
-      exec('webpack --bail -p')
+      exec(`webpack ${useCacheOption} --bail`),
+      exec(`webpack ${useCacheOption} --bail -p`)
     ]))
     .then(() => console.log('Built: '.cyan + 'distributable'.green));
 }
diff --git a/tools/release-scripts/release.js b/tools/release-scripts/release.js
index 927b11a0cb..26b81e351e 100644
--- a/tools/release-scripts/release.js
+++ b/tools/release-scripts/release.js
@@ -15,6 +15,7 @@ import { bowerRepo, bowerRoot, tmpBowerRepo, docsRoot, docsRepo, tmpDocsRepo } f
 
 const yargsConf = yargs
   .usage('Usage: $0 <version> [--preid <identifier>]')
+  .help('h')
   .example('$0 minor --preid beta', 'Release with minor version bump with pre-release tag')
   .example('$0 major', 'Release with major version bump')
   .example('$0 major --dry-run', 'Release dry run with patch version bump')
@@ -32,7 +33,7 @@ const yargsConf = yargs
     alias: 'n',
     demand: false,
     default: false,
-    describe: 'Execute command in dry run mode. Will not commit, tag, push, or publish anything. Userful for testing.'
+    describe: 'Execute command in dry run mode. Will not commit, tag, push, or publish anything. Useful for testing.'
   })
   .option('verbose', {
     demand: false,
@@ -66,7 +67,8 @@ preConditions()
   .then(v => { version = v; })
   .then(() => addChangelog(version))
   .then(() => {
-    return build(argv.verbose)
+    // useCache implicitly defaults to false here.
+    return build(argv)
       .catch(err => {
         console.log('Build failed, reverting version bump'.red);
 
diff --git a/webpack/base.config.js b/webpack/base.config.js
index bbcefeaa53..902ff6174f 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -3,28 +3,35 @@ import path from 'path';
 import webpack from 'webpack';
 import yargs from 'yargs';
 
-const babelCache = path.resolve(path.join(__dirname, '../.babel-cache'));
-
-if (!fs.existsSync(babelCache)) {
-  try {
-    fs.mkdirSync(babelCache);
-  } catch (err) {
-    if (err.code !== 'EEXIST') {
-      console.error(err.stack);
-    }
-  }
-}
-
 export const options = yargs
   .alias('p', 'optimize-minimize')
   .alias('d', 'debug')
+  .option('use-cache', {
+    type: 'boolean',
+    default: true
+  })
   .option('port', {
     default: '8080',
     type: 'string'
   })
   .argv;
 
-export const jsLoader = `babel?cacheDirectory=${babelCache}`;
+export let jsLoader = 'babel';
+if (options.useCache) {
+  const babelCache = path.resolve(path.join(__dirname, '../.babel-cache'));
+
+  if (!fs.existsSync(babelCache)) {
+    try {
+      fs.mkdirSync(babelCache);
+    } catch (err) {
+      if (err.code !== 'EEXIST') {
+        console.error(err.stack);
+      }
+    }
+  }
+
+  jsLoader += `?cacheDirectory=${babelCache}`;
+}
 
 const baseConfig = {
   entry: undefined,

From d12d59e7a4f8d696e2e85ca115f3559d8153e8e2 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Mon, 15 Jun 2015 18:32:19 -0400
Subject: [PATCH 015/128] [changed] Enabled "loose" Babel transpilation

---
 .babelrc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.babelrc b/.babelrc
index 2fa4b4fe3c..4d5093a16f 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,5 @@
 {
   "stage": 1,
-  "optional": ["runtime"]
+  "optional": ["runtime"],
+  "loose": ["all"]
 }

From b798b7f708ebd21b039d85930923677e88a0386a Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Mon, 15 Jun 2015 18:44:25 -0600
Subject: [PATCH 016/128] Release v0.24.0-alpha.3

---
 CHANGELOG-alpha.md | 16 ++++++++++++++++
 package.json       |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-alpha.md b/CHANGELOG-alpha.md
index 62db670361..ae8e1b9b81 100644
--- a/CHANGELOG-alpha.md
+++ b/CHANGELOG-alpha.md
@@ -1,3 +1,19 @@
+v0.24.0-alpha.3 - Tue, 16 Jun 2015 00:43:49 GMT
+-----------------------------------------------
+
+- [d12d59e](../../commit/d12d59e) [changed] Enabled "loose" Babel transpilation
+- [0ce46b9](../../commit/0ce46b9) [changed] only autofocus modals when enforceFocus is true (the default)
+- [01c547f](../../commit/01c547f) [fixed] Do not use Babel cache for release build
+- [b67081b](../../commit/b67081b) [fixed] rootClose behavior on replaced elements
+- [c5855d2](../../commit/c5855d2) [changed] createChainedFunction to chain many functions, and to throw if non-functions are provided.
+- [d18dadb](../../commit/d18dadb) [fixed] container content no longer shifts when overflowing
+- [66f0f92](../../commit/66f0f92) [added] enforceFocus prop to Modal
+- [3869ca2](../../commit/3869ca2) [fixed] Modal doesn't "jump" when container is overflowing
+- [fbbb344](../../commit/fbbb344) [fixed] bower template.
+- [fafe46f](../../commit/fafe46f) [changed] Use named exports in index files
+
+
+
 v0.24.0-alpha.2 - Fri, 12 Jun 2015 21:52:11 GMT
 -----------------------------------------------
 
diff --git a/package.json b/package.json
index 348c77c3cd..7124319646 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.0-alpha.2",
+  "version": "0.24.0-alpha.3",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From 2a0b073f5a824c76f4eb2f72209d2197fe3597e8 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Mon, 22 Jun 2015 19:49:18 -0600
Subject: [PATCH 017/128] Release v0.24.0-alpha.4

---
 CHANGELOG-alpha.md | 16 ++++++++++++++++
 package.json       |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG-alpha.md b/CHANGELOG-alpha.md
index ae8e1b9b81..2df5e1fdf0 100644
--- a/CHANGELOG-alpha.md
+++ b/CHANGELOG-alpha.md
@@ -1,3 +1,19 @@
+v0.24.0-alpha.4 - Tue, 23 Jun 2015 01:49:18 GMT
+-----------------------------------------------
+
+- [23f9d21](../../commit/23f9d21) [changed] Add missed prop types validations.
+- [320b7ab](../../commit/320b7ab) [changed] Update fs-extra. Dev dependency.
+- [2ffcf5d](../../commit/2ffcf5d) [fixed] Popovers flicker when moving mouse amongst children of the trigger
+- [ccc50e0](../../commit/ccc50e0) [fixed] Accessibility: Panel header uses aria-controls
+- [1e552cc](../../commit/1e552cc) [added] Accessibility: use appropriate ARIA's when an id is given to the tabbed area
+- [8752754](../../commit/8752754) [added] Add linkId prop to NavItem
+- [722969d](../../commit/722969d) [added] Accessibility, add tab roles when type "tabs"
+- [4adaa70](../../commit/4adaa70) [added] Accessibility: role 'alert' and aria-label to Alert component
+- [2594dce](../../commit/2594dce) [fixed] Modal Null Exception when react-bootstrap is loaded before the Body tag
+- [e77bf88](../../commit/e77bf88) [changed] Update eslint. Dev dependency.
+
+
+
 v0.24.0-alpha.3 - Tue, 16 Jun 2015 00:43:49 GMT
 -----------------------------------------------
 
diff --git a/package.json b/package.json
index 28ef63b29d..18b95eaa9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.0-alpha.3",
+  "version": "0.24.0-alpha.4",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",
@@ -110,4 +110,4 @@
     "babel-runtime": "^5.1.10",
     "classnames": "^2.0.0"
   }
-}
\ No newline at end of file
+}

From e89b9bca8150b0d376ea0de15f0267e851433be3 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Thu, 25 Jun 2015 14:05:41 -0400
Subject: [PATCH 018/128] [removed] Don't need to disable Babel cache

---
 docs/build.js          |  5 ++---
 tools/build-cli.js     |  6 ------
 tools/build.js         | 11 +++++------
 tools/dist/build.js    |  8 +++-----
 webpack/base.config.js | 21 +--------------------
 5 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/docs/build.js b/docs/build.js
index 0bf9095c42..1ad8005952 100644
--- a/docs/build.js
+++ b/docs/build.js
@@ -34,10 +34,9 @@ function generateHTML(fileName) {
   });
 }
 
-export default function BuildDocs({useCache, dev}) {
+export default function BuildDocs({dev}) {
   console.log('Building: '.cyan + 'docs'.green + (dev ? ' [DEV]'.grey : ''));
 
-  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
   const devOption = dev ? '' : '-p';
 
   return exec(`rimraf ${docsBuilt}`)
@@ -46,7 +45,7 @@ export default function BuildDocs({useCache, dev}) {
       let pagesGenerators = Root.getPages().map(generateHTML);
 
       return Promise.all(pagesGenerators.concat([
-        exec(`webpack --config webpack.docs.js ${useCacheOption} --bail ${devOption}`),
+        exec(`webpack --config webpack.docs.js --bail ${devOption}`),
         copy(license, docsBuilt),
         copy(readmeSrc, readmeDest)
       ]));
diff --git a/tools/build-cli.js b/tools/build-cli.js
index c9f7c239dd..d3b69fed77 100644
--- a/tools/build-cli.js
+++ b/tools/build-cli.js
@@ -14,12 +14,6 @@ const argv = yargs
     demand: false,
     default: false
   })
-  .option('use-cache', {
-    type: 'boolean',
-    demand: false,
-    default: true,
-    describe: 'Use Babel cache when running webpack'
-  })
   .option('lib-only', {
     demand: false,
     default: false,
diff --git a/tools/build.js b/tools/build.js
index ee3a1bdbce..401b123a75 100644
--- a/tools/build.js
+++ b/tools/build.js
@@ -6,22 +6,21 @@ import { copy } from './fs-utils';
 import { distRoot, bowerRoot } from './constants';
 import { exec } from './exec';
 
-function forkAndBuildDocs({verbose, useCache}) {
+function forkAndBuildDocs({verbose}) {
   console.log('Building: '.cyan + 'docs'.green);
 
   const verboseOption = verbose ? '--verbose' : '';
-  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
 
-  return exec(`npm run docs-build -- ${verboseOption} ${useCacheOption}`)
+  return exec(`npm run docs-build -- ${verboseOption}`)
     .then(() => console.log('Built: '.cyan + 'docs'.green));
 }
 
-export default function Build({verbose, useCache} = {}) {
+export default function Build(options) {
   return Promise.all([
       lib(),
       bower(),
-      dist({useCache}),
-      forkAndBuildDocs({verbose, useCache})
+      dist(),
+      forkAndBuildDocs(options)
     ])
     .then(() => copy(distRoot, bowerRoot));
 }
diff --git a/tools/dist/build.js b/tools/dist/build.js
index c47704fd27..624327e7a8 100644
--- a/tools/dist/build.js
+++ b/tools/dist/build.js
@@ -1,15 +1,13 @@
 import { exec } from '../exec';
 import { distRoot } from '../constants';
 
-export default function BuildDistributable({useCache}) {
+export default function BuildDistributable() {
   console.log('Building: '.cyan + 'distributable'.green);
 
-  const useCacheOption = `--use-cache=${Boolean(useCache)}`;
-
   return exec(`rimraf ${distRoot}`)
     .then(() => Promise.all([
-      exec(`webpack ${useCacheOption} --bail`),
-      exec(`webpack ${useCacheOption} --bail -p`)
+      exec(`webpack --bail`),
+      exec(`webpack --bail -p`)
     ]))
     .then(() => console.log('Built: '.cyan + 'distributable'.green));
 }
diff --git a/webpack/base.config.js b/webpack/base.config.js
index 902ff6174f..4a6010214e 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -6,32 +6,13 @@ import yargs from 'yargs';
 export const options = yargs
   .alias('p', 'optimize-minimize')
   .alias('d', 'debug')
-  .option('use-cache', {
-    type: 'boolean',
-    default: true
-  })
   .option('port', {
     default: '8080',
     type: 'string'
   })
   .argv;
 
-export let jsLoader = 'babel';
-if (options.useCache) {
-  const babelCache = path.resolve(path.join(__dirname, '../.babel-cache'));
-
-  if (!fs.existsSync(babelCache)) {
-    try {
-      fs.mkdirSync(babelCache);
-    } catch (err) {
-      if (err.code !== 'EEXIST') {
-        console.error(err.stack);
-      }
-    }
-  }
-
-  jsLoader += `?cacheDirectory=${babelCache}`;
-}
+export const jsLoader = 'babel?cacheDirectory';
 
 const baseConfig = {
   entry: undefined,

From b1b6a4cdc312d919fa8c1fd274a2f748397ecff4 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Thu, 25 Jun 2015 14:21:42 -0400
Subject: [PATCH 019/128] [changed] Add two-release deprecation policy

Fixes #863
---
 CONTRIBUTING.md | 10 ++++++++++
 MAINTAINING.md  | 14 +++++++-------
 README.md       |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e063b3342a..0f939d1f8d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -82,6 +82,16 @@ Also Bootstrap mentions http://getbootstrap.com/getting-started/#examples
 as examples of things you can do, but they are not part of the core library,
 therefore this project is the wrong place to implement them.
 
+## Breaking changes
+
+Breaking changes should be accompanied with deprecations of removed
+functionality. Prior to the 1.0.0 release, we aim to follow React's example of
+taking two Minor releases to break old functionality. As such, changes that
+intend to remove or change public APIs should be be submitted against the
+`vX-rc` branch, and should be accompanied with deprecation warnings on the old
+APIs. The deprecated APIs themselves should not be removed until the Minor
+release after that.
+
 
 ## Collaborators
 
diff --git a/MAINTAINING.md b/MAINTAINING.md
index e6c5f29b14..402e8379ae 100644
--- a/MAINTAINING.md
+++ b/MAINTAINING.md
@@ -95,13 +95,13 @@ then be re-applied and released with the proper version bump.
 ### Release Candidates
 
 In an effort to reduce the frequency with which we introduce breaking changes we
-should do our best to first push deprecation warnings in a Minor or Patch
-release. Also, Pull Requests with breaking changes should be submitted against
-the `vX-rc` branch, where X is the next Major version. Which we will in turn
-release as an `alpha` release of the next Major version. When we are ready to
-release the next Major version bump we will merge the `vX-rc` branch into the
-`master` branch and cut a `beta` release.  Once bugs have been addressed with
-the `beta` release then we will release the Major version bump.
+should do our best to first push deprecation warnings in a Minor release. Also,
+Pull Requests with breaking changes should be submitted against the `vX-rc`
+branch, where X is the next Major version. Which we will in turn release as an
+`alpha` release of the next Major version. When we are ready to release the next
+Major version bump we will merge the `vX-rc` branch into the `master` branch and
+cut a `beta` release.  Once bugs have been addressed with the `beta` release
+then we will release the Major version bump.
 
 ### Live releasing the documentation
 
diff --git a/README.md b/README.md
index f05ea61500..3b8833288e 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
 [![devDependency Status][dev-deps-badge]][dev-deps]
 [![peerDependency Status][peer-deps-badge]][peer-deps]
 
-__Under active development - APIs will change.__ Check out the [1.0.0 Roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [Contributing Guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, breaking changes should result in a Minor version bump.
+__Under active development - APIs will change.__ Check out the [1.0.0 Roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [Contributing Guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes should result in a Minor version bump.
 
 ## Docs
 

From 0ce9db5812fb2b3cf712905563e7c7452cb1b875 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 26 Jun 2015 10:46:08 +0300
Subject: [PATCH 020/128] Fix eslint warnings.

---
 webpack/base.config.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webpack/base.config.js b/webpack/base.config.js
index 4a6010214e..102dde14a7 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -1,5 +1,3 @@
-import fs from 'fs';
-import path from 'path';
 import webpack from 'webpack';
 import yargs from 'yargs';
 

From 75c7270a85af46ed1fed8466e15f0127b9b8a2c7 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 4 Jul 2015 10:54:40 -0400
Subject: [PATCH 021/128] Merge tag 'v0.23.7' into v0.24-rc

Conflicts:
package.json
index.js
---
 .eslintrc                              |   2 +
 CHANGELOG.md                           |  29 +++
 CONTRIBUTING.md                        |  48 +++-
 README.md                              |   4 +
 appveyor.yml                           |   2 +-
 docs/assets/style.css                  |  10 +
 docs/build.js                          |  11 +-
 docs/examples/.eslintrc                |   1 +
 docs/examples/ModalContained.js        |  48 ++--
 docs/examples/ModalCustomSizing.js     |  15 +-
 docs/examples/ModalDefaultSizing.js    |  65 +++--
 docs/examples/ModalOverlayMixin.js     |  43 ----
 docs/examples/ModalStatic.js           |  19 +-
 docs/examples/ModalTrigger.js          |  97 ++++---
 docs/examples/Overlay.js               |  43 ++++
 docs/examples/OverlayCustom.js         |  45 ++++
 docs/examples/PopoverContained.js      |  44 +++-
 docs/examples/TooltipBasic.js          |  17 +-
 docs/examples/TooltipInCopy.js         |  12 +-
 docs/examples/TooltipPositioned.js     |  16 +-
 docs/generate-metadata.js              | 104 ++++++++
 docs/server.js                         |  29 ++-
 docs/src/ComponentsPage.js             | 264 +++++++++++++++++--
 docs/src/NavMain.js                    |   4 +
 docs/src/PropTable.js                  | 172 +++++++++++++
 docs/src/ReactPlayground.js            |  13 +
 docs/src/Root.js                       |  13 +-
 docs/src/Routes.js                     |   2 +
 docs/src/Samples.js                    |   7 +-
 docs/src/SupportPage.js                |  48 ++++
 karma.conf.js                          |   1 -
 package.json                           |  16 +-
 src/BootstrapMixin.js                  |  12 +
 src/Button.js                          |   3 +-
 src/ButtonGroup.js                     |   4 +
 src/Col.js                             |   3 +-
 src/Grid.js                            |   3 +-
 src/Jumbotron.js                       |  15 +-
 src/Modal.js                           | 218 +++++++++++++---
 src/ModalBody.js                       |  26 ++
 src/ModalFooter.js                     |  27 ++
 src/ModalHeader.js                     |  56 +++++
 src/ModalTitle.js                      |  26 ++
 src/ModalTrigger.js                    |  46 +++-
 src/Navbar.js                          |   3 +-
 src/Overlay.js                         |  63 +++++
 src/OverlayMixin.js                    |  58 +++--
 src/OverlayTrigger.js                  | 335 +++++++++++--------------
 src/Popover.js                         |  36 ++-
 src/Portal.js                          |  34 +++
 src/Position.js                        | 102 ++++++++
 src/Row.js                             |   3 +-
 src/Tooltip.js                         |  34 ++-
 src/index.js                           |  12 +
 src/utils/CustomPropTypes.js           |  65 ++++-
 src/utils/domUtils.js                  |  19 +-
 src/utils/overlayPositionUtils.js      | 113 +++++++++
 test/JumbotronSpec.js                  |  11 +
 test/ModalSpec.js                      |  95 +++++--
 test/ModalTriggerSpec.js               |  19 ++
 test/NavbarSpec.js                     |   2 +-
 test/OverlayMixinSpec.js               |   6 +
 test/OverlayTriggerSpec.js             | 101 +-------
 test/PortalSpec.js                     |  78 ++++++
 test/index.js                          |   4 +
 test/utils/CustomPropTypesSpec.js      |  76 ++++--
 test/utils/overlayPositionUtilsSpec.js |  92 +++++++
 tools/promisify.js                     |  17 ++
 68 files changed, 2456 insertions(+), 605 deletions(-)
 delete mode 100644 docs/examples/ModalOverlayMixin.js
 create mode 100644 docs/examples/Overlay.js
 create mode 100644 docs/examples/OverlayCustom.js
 create mode 100644 docs/generate-metadata.js
 create mode 100644 docs/src/PropTable.js
 create mode 100644 docs/src/SupportPage.js
 create mode 100644 src/ModalBody.js
 create mode 100644 src/ModalFooter.js
 create mode 100644 src/ModalHeader.js
 create mode 100644 src/ModalTitle.js
 create mode 100644 src/Overlay.js
 create mode 100644 src/Portal.js
 create mode 100644 src/Position.js
 create mode 100644 src/utils/overlayPositionUtils.js
 create mode 100644 test/PortalSpec.js
 create mode 100644 test/utils/overlayPositionUtilsSpec.js
 create mode 100644 tools/promisify.js

diff --git a/.eslintrc b/.eslintrc
index 06e1f98f2a..d52de5d000 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,10 +12,12 @@
     "babel"
   ],
   "rules": {
+    "constructor-super": 2,
     "comma-spacing": 2,
     "comma-style": [2, "last"],
     "one-var": [2, { "initialized": "never" }],
     "key-spacing": 0,
+    "no-this-before-super": 2,
     "no-underscore-dangle": 0,
     "no-unused-vars": [2, { "vars": "all", "args": "none" }],
     "no-var": 2,
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e91ee2f30..59cae1dbfa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,32 @@
+v0.23.7 - Wed, 01 Jul 2015 15:18:30 GMT
+---------------------------------------
+
+- [35ea201](../../commit/35ea201) [fixed] Accidental breaking change in Modal trigger
+
+
+
+v0.23.6 - Wed, 01 Jul 2015 00:48:02 GMT
+---------------------------------------
+
+- [1b1af04](../../commit/1b1af04) [changed] deprecate ModalTrigger
+- [83b4cbc](../../commit/83b4cbc) [changed] Modal doesn't require ModalTrigger
+- [d70f617](../../commit/d70f617) [changed] tooltips and popovers required id's for a11y
+- [389cf3f](../../commit/389cf3f) [changed] Deprecate OverlayTrigger positioning api and "manual" trigger
+- [5eb8666](../../commit/5eb8666) [added] Overlay component
+- [1638f69](../../commit/1638f69) [added] Position component for custom Overlays
+- [f799110](../../commit/f799110) [added] Portal component; replaces OverlayMixin
+- [97ef415](../../commit/97ef415) [fixed] Modal won't steal focus from children
+- [a8b177a](../../commit/a8b177a) [fixed] Stack overflow with nested Modals
+- [3caa866](../../commit/3caa866) [changed] Update babel-loader
+- [6ffa325](../../commit/6ffa325) [fixed] 'componentClass' property type is 'elementType' now
+- [0e5980f](../../commit/0e5980f) [added] 'elementType' custom prop type validator
+- [8f582d2](../../commit/8f582d2) [changed] Update karma-chrome-launcher. Dev dependency
+- [d4089d0](../../commit/d4089d0) [changed] Update eslint-plugin-mocha. Dev dependency
+- [fd547f4](../../commit/fd547f4) [changed] Update karma-mocha. Dev dependency.
+- [c5797e8](../../commit/c5797e8) [added] componentClass prop to Jumbotron
+
+
+
 v0.23.5 - Tue, 23 Jun 2015 01:31:35 GMT
 ---------------------------------------
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0f939d1f8d..dad46214b5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,9 +17,10 @@ and submitting pull requests, but please respect the following restrictions:
 
 - Please do not use the issue tracker for personal support requests. Stack
   Overflow ([react-bootstrap](http://stackoverflow.com/questions/tagged/react-bootstrap)
-  tag), [Slack](http://www.reactiflux.com/) or
-  [gitter](https://gitter.im/react-bootstrap/react-bootstrap) are better places
-  to get help.
+  tag), [Slack](http://www.reactiflux.com/),
+  [gitter](https://gitter.im/react-bootstrap/react-bootstrap), or
+  [Thinkful](http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap)
+  are better places to get help.
 - Please do not open issues or pull requests regarding the code in React or
   Bootstrap (open them in their respective repositories).
 
@@ -68,11 +69,52 @@ doesn't make sense to do this, then it doesn't make sense to use `[changed]` or
 `[removed]` :). For further reading on writing a well formed commit message,
 check out these [5 useful tips for a better commit message][commit-message]
 
+### Using `[changed]` with development dependencies updates
+
+Use `[changed]` if dev-dependency has impact on the resulting code or API.
+`babel` is a good example of such dev-dependency.
+`chai`, `colors`, `express` or `eslint` are good examples when there is
+no need to add `[changed]`.
+
+## Visual Changes
+
+When making a visual change, if at all feasible please provide screenshots
+and/or screencasts of the proposed change. This will help us to understand the
+desired change easier.
+
 ## Docs
 
 Please update the docs with any API changes, the code and docs should always be
 in sync.
 
+Component prop documentation is generated automatically from the React components
+and their leading comments. Please make sure to provide comments for any `propTypes` you add
+or change in a Component.
+
+```js
+propTypes: {
+    /**
+     * Sets the visibility of the Component
+     */
+    show: React.PropTypes.bool,
+
+    /**
+     * A callback fired when the visibility changes
+     * @type {func}
+     * @required
+     */
+    onHide: myCustomPropType
+}
+```
+
+There are a few caveats to this format that differ from conventional JSDoc comments.
+
+- Only specific doclets (the @ things) should be used, and only when the data cannot be parsed from the component itself
+    - `@type`: Override the "type", use the same names as the default React PropTypes: string, func, bool, number, object. You can express enum and oneOfType types, Like `{("optionA"|"optionB")}`.
+    - `@required`: to mark a prop as required (use the normal React isRequired if possible)
+    - `@private`: Will hide the prop in the documentation
+- All description text should be above the doclets.
+
 ## Implement additional components and features
 
 This project is seeking parity with the core Bootstrap library.
diff --git a/README.md b/README.md
index 3b8833288e..3364b9ece7 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 
 [![HuBoard][huboard-badge]][huboard]
 [![Gitter][gitter-badge]][gitter]
+[![Thinkful][thinkful-badge]][thinkful]
 
 [![NPM version][npm-badge]][npm]
 [![Bower version][bower-badge]][bower]
@@ -75,5 +76,8 @@ Yes please! See the [contributing guidelines][contributing] for details.
 [huboard-badge]: https://img.shields.io/badge/Hu-Board-7965cc.svg
 [huboard]: https://huboard.com/react-bootstrap/react-bootstrap
 
+[thinkful-badge]: https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg
+[thinkful]: http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap
+
 [appveyor-badge]: https://ci.appveyor.com/api/projects/status/ylitpyo6n5yq1s6i/branch/master?svg=true
 [appveyor]: https://ci.appveyor.com/project/react-bootstrap/react-bootstrap/branch/master
diff --git a/appveyor.yml b/appveyor.yml
index cac1fa5920..430ba4a1af 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -4,7 +4,7 @@ version: '{build}'
 install:
   # Get the latest stable version of io.js
   - ps: Install-Product node ''
-  - npm -g install npm@latest
+  - npm -g install npm@2.11.x
   - set PATH=%APPDATA%\npm;%PATH%
   - node --version
   - npm --version
diff --git a/docs/assets/style.css b/docs/assets/style.css
index 645481e0bf..d03afccb44 100644
--- a/docs/assets/style.css
+++ b/docs/assets/style.css
@@ -162,3 +162,13 @@ body {
   position: absolute;
 }
 
+.prop-table {
+  background-color: white;
+}
+
+.bs-example.tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 5px 10px;
+
+}
diff --git a/docs/build.js b/docs/build.js
index 1ad8005952..98a01c94e1 100644
--- a/docs/build.js
+++ b/docs/build.js
@@ -6,6 +6,7 @@ import Root from './src/Root';
 import fsp from 'fs-promise';
 import { copy } from '../tools/fs-utils';
 import { exec } from '../tools/exec';
+import metadata from './generate-metadata';
 
 const repoRoot = path.resolve(__dirname, '../');
 const docsBuilt = path.join(repoRoot, 'docs-built');
@@ -21,12 +22,12 @@ const readmeDest = path.join(docsBuilt, 'README.md');
  * @return {Promise} promise
  * @internal
  */
-function generateHTML(fileName) {
+function generateHTML(fileName, propData) {
   return new Promise((resolve, reject) => {
     const urlSlug = fileName === 'index.html' ? '/' : `/${fileName}`;
 
     Router.run(routes, urlSlug, Handler => {
-      let html = React.renderToString(React.createElement(Handler));
+      let html = React.renderToString(React.createElement(Handler, { propData }));
       html = '<!doctype html>' + html;
       let write = fsp.writeFile(path.join(docsBuilt, fileName), html);
       resolve(write);
@@ -41,8 +42,10 @@ export default function BuildDocs({dev}) {
 
   return exec(`rimraf ${docsBuilt}`)
     .then(() => fsp.mkdir(docsBuilt))
-    .then(() => {
-      let pagesGenerators = Root.getPages().map(generateHTML);
+    .then(metadata)
+    .then(propData => {
+
+      let pagesGenerators = Root.getPages().map( page => generateHTML(page, propData));
 
       return Promise.all(pagesGenerators.concat([
         exec(`webpack --config webpack.docs.js --bail ${devOption}`),
diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 6f2fa1bdf5..9dbc49c623 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -36,6 +36,7 @@
     "ModalTrigger",
     "OverlayTrigger",
     "OverlayMixin",
+    "Overlay",
     "PageHeader",
     "PageItem",
     "Pager",
diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js
index 626f17db42..aeab199ef7 100644
--- a/docs/examples/ModalContained.js
+++ b/docs/examples/ModalContained.js
@@ -9,28 +9,40 @@
  * }
  */
 
-const ContainedModal = React.createClass({
-  render() {
-    return (
-      <Modal {...this.props} title='Contained Modal' animation>
-        <div className='modal-body'>
-          Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
-    );
-  }
-});
-
 const Trigger = React.createClass({
+  getInitialState(){
+    return { show: false };
+  },
+
   render() {
+    let close = e => this.setState({ show: false});
+
     return (
       <div className='modal-container' style={{height: 200}}>
-        <ModalTrigger modal={<ContainedModal container={this} />} container={this}>
-          <Button bsStyle='primary' bsSize='large'>Launch contained modal</Button>
-        </ModalTrigger>
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={e => this.setState({ show: true})}
+        >
+          Launch contained modal
+        </Button>
+
+        <Modal
+          show={this.state.show}
+          onHide={close}
+          container={this}
+          aria-labelledby='contained-modal-title'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title'>Contained Modal</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </div>
     );
   }
diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
index 5ddeab19de..4122e352d4 100644
--- a/docs/examples/ModalCustomSizing.js
+++ b/docs/examples/ModalCustomSizing.js
@@ -1,8 +1,11 @@
 const MyModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} dialogClassName='custom-modal' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} dialogClassName='custom-modal'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
            Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
@@ -19,10 +22,10 @@ const MyModal = React.createClass({
            magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
            magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
            similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
diff --git a/docs/examples/ModalDefaultSizing.js b/docs/examples/ModalDefaultSizing.js
index aabd5dfc1c..19c9ffe0d3 100644
--- a/docs/examples/ModalDefaultSizing.js
+++ b/docs/examples/ModalDefaultSizing.js
@@ -1,8 +1,11 @@
 const MySmallModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='small' aria-labelledby='contained-modal-title-sm'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-sm'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -13,10 +16,10 @@ const MySmallModal = React.createClass({
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
@@ -25,8 +28,11 @@ const MySmallModal = React.createClass({
 const MyLargeModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='large' aria-labelledby='contained-modal-title-lg'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -37,24 +43,37 @@ const MyLargeModal = React.createClass({
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ButtonToolbar>
-    <ModalTrigger modal={<MySmallModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
-    </ModalTrigger>
-    <ModalTrigger modal={<MyLargeModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
-    </ModalTrigger>
-  </ButtonToolbar>
-);
+const App = React.createClass({
+  getInitialState(){
+    return { smShow: false, lgShow: false };
+  },
+  render(){
+    let smClose = e => this.setState({ smShow: false });
+    let lgClose = e => this.setState({ lgShow: false });
 
-React.render(overlayTriggerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ smShow: true })}>
+          Launch small demo modal
+        </Button>
+        <Button bsStyle='primary' onClick={()=>this.setState({ lgShow: true })}>
+          Launch large demo modal
+        </Button>
+
+        <MySmallModal show={this.state.smShow} onHide={smClose} />
+        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
+      </ButtonToolbar>
+    );
+  }
+});
+
+React.render(<App/>, mountNode);
diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js
deleted file mode 100644
index 3a47c75b33..0000000000
--- a/docs/examples/ModalOverlayMixin.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Our custom component is managing whether the Modal is visible
-const CustomModalTrigger = React.createClass({
-  mixins: [OverlayMixin],
-
-  getInitialState() {
-    return {
-      isModalOpen: false
-    };
-  },
-
-  handleToggle() {
-    this.setState({
-      isModalOpen: !this.state.isModalOpen
-    });
-  },
-
-  render() {
-    return (
-      <Button onClick={this.handleToggle} bsStyle='primary'>Launch</Button>
-    );
-  },
-
-  // This is called by the `OverlayMixin` when this component
-  // is mounted or updated and the return value is appended to the body.
-  renderOverlay() {
-    if (!this.state.isModalOpen) {
-      return <span/>;
-    }
-
-    return (
-      <Modal title='Modal heading' onRequestHide={this.handleToggle}>
-        <div className='modal-body'>
-          This modal is controlled by our custom trigger component.
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.handleToggle}>Close</Button>
-        </div>
-      </Modal>
-    );
-  }
-});
-
-React.render(<CustomModalTrigger />, mountNode);
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
index f01a4d058e..138c55f050 100644
--- a/docs/examples/ModalStatic.js
+++ b/docs/examples/ModalStatic.js
@@ -1,18 +1,25 @@
 const modalInstance = (
   <div className='static-modal'>
-    <Modal title='Modal title'
+    <Modal
       enforceFocus={false}
+      autoFocus={false}
       backdrop={false}
       animation={false}
       container={mountNode}
-      onRequestHide={function() {}}>
-      <div className='modal-body'>
+      onHide={function(){}}>
+
+      <Modal.Header closeButton>
+        <Modal.Title>Modal title</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
         One fine body...
-      </div>
-      <div className='modal-footer'>
+      </Modal.Body>
+
+      <Modal.Footer>
         <Button>Close</Button>
         <Button bsStyle='primary'>Save changes</Button>
-      </div>
+      </Modal.Footer>
     </Modal>
   </div>
 );
diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js
index 36b859d0df..4a25c06f86 100644
--- a/docs/examples/ModalTrigger.js
+++ b/docs/examples/ModalTrigger.js
@@ -1,42 +1,67 @@
-const MyModal = React.createClass({
+const Example = React.createClass({
+
+  getInitialState(){
+    return { showModal: false };
+  },
+
+  close(){
+    this.setState({ showModal: false });
+  },
+
+  open(){
+    this.setState({ showModal: true });
+  },
+
   render() {
+    let popover = <Popover title='popover'>very popover. such engagement</Popover>;
+    let tooltip = <Tooltip>wow.</Tooltip>;
+
     return (
-      <Modal {...this.props} title='Modal heading' animation={false}>
-        <div className='modal-body'>
-          <h4>Text in a modal</h4>
-          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
-          <h4>Popover in a modal</h4>
-          <p>TODO</p>
-
-          <h4>Tooltips in a modal</h4>
-          <p>TODO</p>
-
-          <hr />
-
-          <h4>Overflowing text to show scroll behavior</h4>
-          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
+      <div>
+        <p>Click to get the full Modal experience!</p>
+
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={this.open}
+        >
+          Launch demo modal
+        </Button>
+
+        <Modal show={this.state.showModal} onHide={this.close}>
+          <Modal.Header closeButton>
+            <Modal.Title>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Text in a modal</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+            <h4>Popover in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={popover}><a href='#'>popover</a></OverlayTrigger> here</p>
+
+            <h4>Tooltips in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={tooltip}><a href='#'>tooltip</a></OverlayTrigger> here</p>
+
+            <hr />
+
+            <h4>Overflowing text to show scroll behavior</h4>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
-
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/Overlay.js b/docs/examples/Overlay.js
new file mode 100644
index 0000000000..4f5f1b9fde
--- /dev/null
+++ b/docs/examples/Overlay.js
@@ -0,0 +1,43 @@
+
+const Example = React.createClass({
+  getInitialState(){
+    return { show: true };
+  },
+
+  toggle(){
+    this.setState({ show: !this.state.show });
+  },
+
+  render(){
+    const tooltip = <Tooltip>Tooltip overload!</Tooltip>;
+
+    const sharedProps = {
+      show: this.state.show,
+      container: this,
+      target: props => React.findDOMNode(this.refs.target)
+    };
+
+    return (
+      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
+        <Button ref='target' onClick={this.toggle}>
+          Click me!
+        </Button>
+
+        <Overlay {...sharedProps} placement="left">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="top">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="right">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="bottom">
+          { tooltip }
+        </Overlay>
+      </div>
+    );
+  }
+});
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/OverlayCustom.js b/docs/examples/OverlayCustom.js
new file mode 100644
index 0000000000..20230b56c6
--- /dev/null
+++ b/docs/examples/OverlayCustom.js
@@ -0,0 +1,45 @@
+
+const Example = React.createClass({
+  getInitialState(){
+    return { show: true };
+  },
+
+  toggle(){
+    this.setState({ show: !this.state.show });
+  },
+
+  render(){
+    const style = {
+      position: 'absolute',
+      backgroundColor: '#EEE',
+      boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
+      border: '1px solid #CCC',
+      borderRadius: 3,
+      marginLeft: -5,
+      marginTop: 5,
+      padding: 10
+    };
+
+    return (
+      <div style={{ height: 100, position: 'relative' }}>
+        <Button ref='target' onClick={this.toggle}>
+          I am an Overlay target
+        </Button>
+
+        <Overlay
+          show={this.state.show}
+          onHide={() => this.setState({ show: false })}
+          placement="right"
+          container={this}
+          target={ props => React.findDOMNode(this.refs.target)}
+        >
+          <div style={style}>
+            <strong>Holy guacamole!</strong> Check this info.
+          </div>
+        </Overlay>
+      </div>
+    );
+  }
+});
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/PopoverContained.js b/docs/examples/PopoverContained.js
index afd3019e3e..3e0c036cee 100644
--- a/docs/examples/PopoverContained.js
+++ b/docs/examples/PopoverContained.js
@@ -1,13 +1,33 @@
-const positionerInstance = (
-  <ButtonToolbar>
-    <OverlayTrigger
-      container={mountNode} containerPadding={20}
-      trigger='click' placement='bottom'
-      overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}
-    >
-      <Button bsStyle='default'>Holy guacamole!</Button>
-    </OverlayTrigger>
-  </ButtonToolbar>
-);
+class Example extends React.Component {
+  constructor(props, context){
+    super(props, context);
+    this.state = { show: false };
+  }
+  render(){
 
-React.render(positionerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button
+          bsStyle='default'
+          onClick={e => this.setState({ target: e.target, show: !this.state.show })}
+        >
+          Holy guacamole!
+        </Button>
+
+        <Overlay
+          show={this.state.show}
+          target={()=> React.findDOMNode(this.state.target)}
+          placement='bottom'
+          container={mountNode}
+          containerPadding={20}
+        >
+          <Popover title='Popover bottom'>
+            <strong>Holy guacamole!</strong> Check this info.
+          </Popover>
+        </Overlay>
+      </ButtonToolbar>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/TooltipBasic.js b/docs/examples/TooltipBasic.js
index f2df4f4a66..ff21989d5e 100644
--- a/docs/examples/TooltipBasic.js
+++ b/docs/examples/TooltipBasic.js
@@ -1,7 +1,18 @@
 const tooltipInstance = (
-  <div style={{ height: 50 }}>
-    <Tooltip placement="right" positionLeft={150} positionTop={50}>
-      <strong>Holy guacamole!</strong> Check this info.
+  <div>
+    <Tooltip placement="right">
+      Tooltip right
+    </Tooltip>
+    <Tooltip placement="top">
+      Tooltip top
+    </Tooltip>
+
+    <Tooltip placement="left">
+      Tooltip left
+    </Tooltip>
+
+    <Tooltip placement="bottom">
+      Tooltip bottom
     </Tooltip>
   </div>
 );
diff --git a/docs/examples/TooltipInCopy.js b/docs/examples/TooltipInCopy.js
index 8842122aee..40c8d09ab0 100644
--- a/docs/examples/TooltipInCopy.js
+++ b/docs/examples/TooltipInCopy.js
@@ -1,9 +1,9 @@
 const LinkWithTooltip = React.createClass({
   render() {
-    let tooltip = <Tooltip>{this.props.tooltip}</Tooltip>;
+    let tooltip = <Tooltip placement='top'>{this.props.tooltip}</Tooltip>;
 
     return (
-      <OverlayTrigger placement='top' overlay={tooltip} delayShow={300} delayHide={150}>
+      <OverlayTrigger overlay={tooltip} delayShow={300} delayHide={150}>
         <a href={this.props.href}>{this.props.children}</a>
       </OverlayTrigger>
     );
@@ -12,7 +12,13 @@ const LinkWithTooltip = React.createClass({
 
 const copyInstance = (
   <p className='muted' style={{ marginBottom: 0 }}>
-    Tight pants next level keffiyeh <LinkWithTooltip tooltip='Default tooltip' href='#'>you probably</LinkWithTooltip> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <LinkWithTooltip tooltip={<span>Another <strong>tooltip</strong></span>} href='#'>have a</LinkWithTooltip> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <LinkWithTooltip tooltip='Another one here too' href='#'>whatever keytar</LinkWithTooltip>, scenester farm-to-table banksy Austin <LinkWithTooltip tooltip='The last tip!' href='#'>twitter handle</LinkWithTooltip> freegan cred raw denim single-origin coffee viral.
+    Tight pants next level keffiyeh <LinkWithTooltip tooltip='Default tooltip' href='#'>you probably</LinkWithTooltip> haven't
+    heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
+    fixie sustainable quinoa 8-bit american apparel <LinkWithTooltip tooltip={<span>Another <strong>tooltip</strong></span>} href='#'>have a</LinkWithTooltip>
+    terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four
+    loko mcsweeney's cleanse vegan chambray. A really ironic artisan <LinkWithTooltip tooltip='Another one here too' href='#'>whatever keytar</LinkWithTooltip>,
+    scenester farm-to-table banksy Austin <LinkWithTooltip tooltip='The last tip!' href='#'>twitter handle</LinkWithTooltip> freegan
+    cred raw denim single-origin coffee viral.
   </p>
 );
 
diff --git a/docs/examples/TooltipPositioned.js b/docs/examples/TooltipPositioned.js
index cedb961fa9..5f94bca114 100644
--- a/docs/examples/TooltipPositioned.js
+++ b/docs/examples/TooltipPositioned.js
@@ -1,15 +1,23 @@
+
+const tooltip = (
+  <Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>
+);
+
 const positionerInstance = (
   <ButtonToolbar>
-    <OverlayTrigger placement='left' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+    <OverlayTrigger placement='left' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='top' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='top' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='bottom' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='bottom' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='right' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='right' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
   </ButtonToolbar>
diff --git a/docs/generate-metadata.js b/docs/generate-metadata.js
new file mode 100644
index 0000000000..bf30c07d0e
--- /dev/null
+++ b/docs/generate-metadata.js
@@ -0,0 +1,104 @@
+import metadata from 'react-component-metadata';
+import glob from 'glob';
+import fsp from 'fs-promise';
+import promisify from '../tools/promisify';
+import marked from 'marked';
+
+marked.setOptions({
+  xhtml: true
+});
+
+let globp = promisify(glob);
+
+// removes doclet syntax from comments
+let cleanDoclets = desc => {
+  let idx = desc.indexOf('@');
+  return (idx === -1 ? desc : desc.substr(0, idx )).trim();
+};
+
+let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
+
+
+let isLiteral = str => (/^('|")/).test(str.trim());
+
+/**
+ * parse out description doclets to an object and remove the comment
+ *
+ * @param  {ComponentMetadata|PropMetadata} obj
+ */
+function parseDoclets(obj){
+  obj.doclets = metadata.parseDoclets(obj.desc || '') || {};
+  obj.desc = cleanDoclets(obj.desc || '');
+  obj.descHtml = marked(obj.desc || '');
+}
+
+/**
+ * Reads the JSDoc "doclets" and applies certain ones to the prop type data
+ * This allows us to "fix" parsing errors, or unparsable data with JSDoc style comments
+ *
+ * @param  {Object} props     Object Hash of the prop metadata
+ * @param  {String} propName
+ */
+function applyPropDoclets(props, propName){
+  let prop = props[propName];
+  let doclets = prop.doclets;
+  let value;
+
+  // the @type doclet to provide a prop type
+  // Also allows enums (oneOf) if string literals are provided
+  // ex: @type {("optionA"|"optionB")}
+  if (doclets.type) {
+    value = cleanDocletValue(doclets.type);
+    prop.type.name = value;
+
+    if ( value[0] === '(' ) {
+      value = value.substring(1, value.length - 1).split('|');
+
+      prop.type.value = value;
+      prop.type.name = value.every(isLiteral) ? 'enum' : 'union';
+    }
+  }
+
+  // Use @required to mark a prop as required
+  // useful for custom propTypes where there isn't a `.isRequired` addon
+  if ( doclets.required) {
+    prop.required = true;
+  }
+}
+
+
+export default function generate(destination, options = { mixins: true }){
+
+  return globp(__dirname + '/../src/**/*.js') //eslint-disable-line no-path-concat
+    .then( files => {
+
+      let results = files.map(
+        filename => fsp.readFile(filename).then(content => metadata(content, options)) );
+
+      return Promise.all(results)
+        .then( data => {
+          let result = {};
+
+          data.forEach(components => {
+            Object.keys(components).forEach(key => {
+              const component = components[key];
+
+              parseDoclets(component);
+
+              Object.keys(component.props).forEach( propName => {
+                const prop = component.props[propName];
+
+                parseDoclets(prop);
+                applyPropDoclets(component.props, propName);
+              });
+            });
+
+            //combine all the component metadata into one large object
+            result = { ...result, ...components };
+          });
+
+          return result;
+        })
+        .catch( e => setTimeout(()=> { throw e; }));
+    });
+}
diff --git a/docs/server.js b/docs/server.js
index 5d0157dfca..66b49144c8 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -5,6 +5,8 @@ import path from 'path';
 import Router from 'react-router';
 import routes from './src/Routes';
 import httpProxy from 'http-proxy';
+
+import metadata from './generate-metadata';
 import ip from 'ip';
 
 const development = process.env.NODE_ENV !== 'production';
@@ -21,20 +23,27 @@ if (development) {
     proxy.web(req, res, { target });
   });
 
-  app.use(function renderApp(req, res) {
-    res.header('Access-Control-Allow-Origin', target);
-    res.header('Access-Control-Allow-Headers', 'X-Requested-With');
-
-    Router.run(routes, req.url, Handler => {
-      let html = React.renderToString(<Handler assetBaseUrl={target} />);
-      res.send('<!doctype html>' + html);
-    });
-  });
-
   proxy.on('error', function(e) {
     console.log('Could not connect to webpack proxy'.red);
     console.log(e.toString().red);
   });
+
+  console.log('Prop data generation started:'.green);
+
+  metadata().then( props => {
+    console.log('Prop data generation finished:'.green);
+
+    app.use(function renderApp(req, res) {
+      res.header('Access-Control-Allow-Origin', target);
+      res.header('Access-Control-Allow-Headers', 'X-Requested-With');
+
+      Router.run(routes, req.url, Handler => {
+        let html = React.renderToString(<Handler assetBaseUrl={target} propData={props}/>);
+        res.send('<!doctype html>' + html);
+      });
+    });
+  });
+
 } else {
   app.use(express.static(path.join(__dirname, '../docs-built')));
 }
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 93aa06266e..c3166eca4d 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -1,4 +1,4 @@
-/* eslint no-path-concat: 0, react/no-did-mount-set-state: 0 */
+/* eslint react/no-did-mount-set-state: 0 */
 
 import React from 'react';
 
@@ -9,6 +9,7 @@ import NavItem from '../../src/NavItem';
 
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
+import PropTable from './PropTable';
 import PageFooter from './PageFooter';
 import ReactPlayground from './ReactPlayground';
 import Samples from './Samples';
@@ -67,6 +68,7 @@ const ComponentsPage = React.createClass({
                     flush against each other. To preserve the spacing between multiple inline buttons, wrap your
                     button group in <code>{'<ButtonToolbar />'}</code>.</p>
                   </div>
+
                   <h2 id='buttons-sizes'>Sizes</h2>
                   <p>Fancy larger or smaller buttons? Add <code>bsSize="large"</code>, <code>bsSize="small"</code>, or <code>bsSize="xsmall"</code> for additional sizes.</p>
                   <ReactPlayground codeText={Samples.ButtonSizes} />
@@ -99,6 +101,10 @@ const ComponentsPage = React.createClass({
                     feedback as to the loading state, this can easily be done by updating
                     your <code>{'<Button />'}</code>&#8217;s props from a state change like below.</p>
                   <ReactPlayground codeText={Samples.ButtonLoading} />
+
+                  <h3 id='buttons-props'>Props</h3>
+                  <PropTable component='Button'/>
+
                 </div>
 
                 {/* Button Groups */}
@@ -139,6 +145,9 @@ const ComponentsPage = React.createClass({
                   </div>
                   <p>Just add <code>justified</code> to the <code>{'<ButtonGroup />'}</code>.</p>
                   <ReactPlayground codeText={Samples.ButtonGroupJustified} />
+
+                  <h3 id='btn-groups-props'>Props</h3>
+                  <PropTable component='ButtonGroup'/>
                 </div>
 
                 <div className='bs-docs-section'>
@@ -168,11 +177,19 @@ const ComponentsPage = React.createClass({
                   <h3 id='btn-dropdowns-right'>Dropdown right variation</h3>
                   <p>Trigger dropdown menus that align to the right of the button using the <code>pullRight</code> prop.</p>
                   <ReactPlayground codeText={Samples.SplitButtonRight} />
+
+                  <h3 id='btn-dropdowns-props'>Props</h3>
+
+                  <h4>DropdownButton</h4>
+                  <PropTable component='DropdownButton'/>
+
+                  <h4>SplitButton</h4>
+                  <PropTable component='SplitButton'/>
                 </div>
 
                 {/* Menu Item */}
                 <div className='bs-docs-section'>
-                  <h1 id='menu-item' className='page-header'>Menu Item <small> MenudItem</small></h1>
+                  <h1 id='menu-item' className='page-header'>Menu Item <small> MenuItem</small></h1>
                   <p>This is a component used in other components (see <a href="buttons">Buttons</a>, <a href="#navbars">Navbars</a>).</p>
                   <p>It supports the basic anchor properties <code>href</code>, <code>target</code>, <code>title</code>.</p>
                   <p>It also supports different properties of the normal Bootstrap MenuItem.
@@ -186,6 +203,9 @@ const ComponentsPage = React.createClass({
                   <p>The callback is called with the following arguments: <code>eventKey</code>, <code>href</code> and <code>target</code></p>
                   </p>
                   <ReactPlayground codeText={Samples.MenuItem} />
+
+                  <h3 id='menu-item-props'>Props</h3>
+                  <PropTable component='MenuItem'/>
                 </div>
 
               {/* Panels */}
@@ -227,25 +247,40 @@ const ComponentsPage = React.createClass({
                   <h3 id='panels-collapsible'>Collapsible Mixin</h3>
                   <p><code>CollapsibleMixin</code> can be used to create your own components with collapse functionality.</p>
                   <ReactPlayground codeText={Samples.CollapsibleParagraph} />
+
+                  <h3 id='panels-props'>Props</h3>
+
+                  <h4>Panels, Accordion</h4>
+                  <PropTable component='Panel'/>
+
+                  <h4>PanelGroup</h4>
+                  <PropTable component='PanelGroup'/>
+
                 </div>
 
                 <div className='bs-docs-section'>
                   <h1 id='modals' className='page-header'>Modals <small>Modal</small></h1>
 
                   <h3 id='modals-static'>A static example</h3>
-                  <p>A rendered modal with header, body, and set of actions in the footer.</p>
-                  <p>The header is added automatically if you pass in a <code>title</code> prop.</p>
+                  <p>
+                    A rendered modal with header, body, and set of actions in the footer. The <code>{'<Modal/>'}</code> Component comes with
+                    a few convenient "sub components": <code>{'<Modal.Header/>'}</code>, <code>{'<Modal.Title/>'}</code>, <code>{'<Modal.Body/>'}</code>,
+                    and <code>{'<Modal.Footer/>'}</code>, which you can use to build the Modal content.
+                  </p>
+                  <div className='bs-callout bs-callout-info'>
+                    <h4>Additional Import Options</h4>
+                    <p>
+                      The Modal Header, Title, Body, and Footer components are available as static properties the <code>{'<Modal/>'}</code> component, but you can also,
+                      import them directly from the <code>/lib</code> directory like: <code>{"require('react-bootstrap/lib/ModalHeader')"}</code>.
+                    </p>
+                  </div>
                   <ReactPlayground codeText={Samples.ModalStatic} />
 
                   <h3 id='modals-live'>Live demo</h3>
-                  <p>Use <code>&lt;ModalTrigger /&gt;</code> to create a real modal that's added to the document body when opened.</p>
+                  <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
                   <ReactPlayground codeText={Samples.ModalTrigger} />
 
-                  <h3 id='modals-custom'>Custom trigger</h3>
-                  <p>Use <code>OverlayMixin</code> in a custom component to manage the modal's state yourself.</p>
-                  <ReactPlayground codeText={Samples.ModalOverlayMixin} />
-
-                  <h3 id='modals-custom'>Contained Modal</h3>
+                  <h3 id='modals-contained'>Contained Modal</h3>
                   <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
                   <pre>
                     {React.DOM.code(null,
@@ -266,32 +301,63 @@ const ComponentsPage = React.createClass({
                   <h3 id='modal-custom-sizing'>Sizing modals using custom css</h3>
                   <p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
                   <ReactPlayground codeText={Samples.ModalCustomSizing} />
+
+                  <h3 id='modals-props'>Props</h3>
+
+                  <h4>Modal</h4>
+                  <PropTable component='Modal'/>
+
+                  <h4>Modal.Header</h4>
+                  <PropTable component='ModalHeader'/>
+
+                  <h4>Modal.Title</h4>
+                  <PropTable component='ModalTitle'/>
+
+                  <h4>Modal.Body</h4>
+                  <PropTable component='ModalBody'/>
+
+                  <h4>Modal.Footer</h4>
+                  <PropTable component='ModalFooter'/>
+
+                  <h4>ModalTrigger <strong className='text-danger'>Deprecated: use the Modal directly to manage it's visibility</strong></h4>
+                  <PropTable component='ModalTrigger'/>
+
                 </div>
 
+
                 {/* Tooltip */}
                 <div className='bs-docs-section'>
-                  <h1 id='tooltips' className='page-header'>Tooltips <small>Tooltip</small></h1>
-                  <h2 id='tooltips-examples'>Example tooltips</h2>
-
-                  <p>Tooltip component.</p>
-                  <ReactPlayground codeText={Samples.TooltipBasic} />
+                  <h2 id='tooltips' >Tooltip</h2>
+                  <p>
+                    Tooltip component for a more stylish alternative to that anchor tag <code>title</code> attribute.
+                  </p>
+                  <ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
 
-                  <p>Positioned tooltip component.</p>
+                  <p>Attach and position tooltips with <code>OverlayTrigger</code>.</p>
                   <ReactPlayground codeText={Samples.TooltipPositioned} />
 
-                  <p>Positioned tooltip in copy.</p>
+                  <p>Positioned tooltip in text copy.</p>
                   <ReactPlayground codeText={Samples.TooltipInCopy} />
+
+                  <h3 id='tooltips-props'>Props</h3>
+
+                  <h4 id='overlays-trigger-props'>Overlay Trigger</h4>
+                  <PropTable component='OverlayTrigger'/>
+
+                  <h4 id='overlays-trigger-props'>Tooltip</h4>
+                  <PropTable component='Tooltip'/>
                 </div>
 
                 {/* Popover */}
                 <div className='bs-docs-section'>
-                  <h1 id='popovers' className='page-header'>Popovers <small>Popover</small></h1>
-                  <h2 id='popovers-examples'>Example popovers</h2>
+                  <h2 id='popovers'>Popovers</h2>
 
-                  <p>Popover component.</p>
-                  <ReactPlayground codeText={Samples.PopoverBasic} />
+                  <p>
+                    The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content.
+                  </p>
+                  <ReactPlayground codeText={Samples.PopoverBasic}/>
 
-                  <p>Positioned popover component.</p>
+                  <p>The Popover component, like the Tooltip can be used with an <code>OverlayTrigger</code> Component, and positioned around it.</p>
                   <ReactPlayground codeText={Samples.PopoverPositioned} />
 
                   <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
@@ -302,6 +368,32 @@ const ComponentsPage = React.createClass({
 
                   <p>Positioned popover components in scrolling container.</p>
                   <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+
+                  <h3 id='popover-props'>Props</h3>
+
+                  <PropTable component='Popover'/>
+                </div>
+
+                {/* Overlay */}
+                <div className='bs-docs-section'>
+                  <h2 id='overlays'>Overlay</h2>
+
+                  <p>
+                    The <code>OverlayTrigger</code> component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed
+                    to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use
+                    the <code>Overlay</code> component directly.
+                  </p>
+                  <ReactPlayground codeText={Samples.Overlay}/>
+
+                  <p>
+                    You don't need to use the provided <code>Tooltip</code> or <code>Popover</code> components. Creating custom overlays
+                    is as easy as wrapping some markup in an <code>Overlay</code> component
+                  </p>
+                  <ReactPlayground codeText={Samples.OverlayCustom} />
+
+                  <h3 id='overlays-props'>Props</h3>
+
+                  <PropTable component='Overlay'/>
                 </div>
 
                 {/* Progress Bar */}
@@ -338,6 +430,10 @@ const ComponentsPage = React.createClass({
                   <h2 id='progress-stacked'>Stacked</h2>
                   <p>Nest <code>&lt;ProgressBar /&gt;</code>s to stack them.</p>
                   <ReactPlayground codeText={Samples.ProgressBarStacked} />
+
+                  <h3 id='progress-props'>ProgressBar</h3>
+
+                  <PropTable component='ProgressBar'/>
                 </div>
 
                 {/* Nav */}
@@ -359,6 +455,15 @@ const ComponentsPage = React.createClass({
                   <h3>Justified</h3>
                   <p>They can be <code>justified</code> to take the full width of their parent.</p>
                   <ReactPlayground codeText={Samples.NavJustified} />
+
+                  <h3 id='navs-props'>Props</h3>
+
+                  <h4>Nav</h4>
+                  <PropTable component='Nav'/>
+
+                  <h4>NavItem</h4>
+                  <PropTable component='NavItem'/>
+
                 </div>
 
                 {/* Navbar */}
@@ -401,6 +506,10 @@ const ComponentsPage = React.createClass({
                   </div>
 
                   <ReactPlayground codeText={Samples.CollapsibleNav} />
+                  <h3 id='navbar-props'>Props</h3>
+
+                  <h4>Navbar</h4>
+                  <PropTable component='Navbar'/>
                 </div>
 
                 {/* Tabbed Areas */}
@@ -425,6 +534,14 @@ const ComponentsPage = React.createClass({
                     <h4>Extends tabbed navigation</h4>
                     <p>This plugin extends the <a href='#navs'>tabbed navigation component</a> to add tabbable areas.</p>
                   </div>
+
+                  <h3 id='tabs-props'>Tabs</h3>
+
+                  <h4>TabbedArea</h4>
+                  <PropTable component='TabbedArea'/>
+
+                  <h4>TabPane</h4>
+                  <PropTable component='TabPane'/>
                 </div>
 
                 {/* Pager */}
@@ -443,6 +560,14 @@ const ComponentsPage = React.createClass({
                   <h3>Disabled</h3>
                   <p>Set the <code>disabled</code> prop to <code>true</code> to disable the link.</p>
                   <ReactPlayground codeText={Samples.PagerDisabled} />
+
+                  <h3 id='pager-props'>Pager</h3>
+
+                  <h4>Pager</h4>
+                  <PropTable component='Pager'/>
+
+                  <h4>PageItem</h4>
+                  <PropTable component='PageItem'/>
                 </div>
 
                 {/* Pagination */}
@@ -456,6 +581,9 @@ const ComponentsPage = React.createClass({
                   <p>More options such as <code>first</code>, <code>last</code>, <code>previous</code>, <code>next</code> and <code>ellipsis</code>.</p>
                   <ReactPlayground codeText={Samples.PaginationAdvanced} />
 
+                  <h3 id='pagination-props'>Pagination</h3>
+
+                  <PropTable component='Pagination'/>
                 </div>
 
                 {/* Alerts */}
@@ -471,6 +599,10 @@ const ComponentsPage = React.createClass({
 
                   <p>Auto close after a set time with <code>dismissAfter</code> prop.</p>
                   <ReactPlayground codeText={Samples.AlertAutoDismissable} />
+
+                  <h3 id='alert-props'>Alert</h3>
+
+                  <PropTable component='Alert'/>
                 </div>
 
                 {/* Carousels */}
@@ -485,6 +617,15 @@ const ComponentsPage = React.createClass({
                   <h3>Controlled</h3>
                   <p>Pass down the active state on render via props.</p>
                   <ReactPlayground codeText={Samples.CarouselControlled} exampleClassName='bs-example-tabs' />
+
+                  <h3 id='carousels-props'>Props</h3>
+
+                  <h4>Carousel</h4>
+                  <PropTable component='Carousel'/>
+
+                  <h4>CarouselItem</h4>
+                  <PropTable component='CarouselItem'/>
+
                 </div>
 
                 {/* Grids */}
@@ -493,6 +634,17 @@ const ComponentsPage = React.createClass({
                   <h2 id='grids-examples'>Example grids</h2>
 
                   <ReactPlayground codeText={Samples.GridBasic} exampleClassName='bs-example-tabs' />
+
+                  <h3 id='grids-props'>Props</h3>
+
+                  <h4>Grid</h4>
+                  <PropTable component='Grid'/>
+
+                  <h4>Row</h4>
+                  <PropTable component='Row'/>
+
+                  <h4>Col</h4>
+                  <PropTable component='Col'/>
                 </div>
 
                 {/* Thumbnail */}
@@ -507,6 +659,11 @@ const ComponentsPage = React.createClass({
                   <h3>Divider Thumbnail</h3>
                   <p>Creates a divider wrapping an image and other children elements.</p>
                   <ReactPlayground codeText={Samples.ThumbnailDiv} />
+
+                  <h3 id='grids-props'>Props</h3>
+
+                  <PropTable component='Thumbnail'/>
+
                 </div>
 
                 {/* ListGroup */}
@@ -531,6 +688,14 @@ const ComponentsPage = React.createClass({
                   <h3>With header</h3>
                   <p>Set the <code>header</code> prop to create a structured item, with a heading and a body area.</p>
                   <ReactPlayground codeText={Samples.ListGroupHeader} />
+
+                  <h3 id='listgroup-props'>Props</h3>
+
+                  <h4>ListGroup</h4>
+                  <PropTable component='ListGroup'/>
+
+                  <h4>ListGroupItem</h4>
+                  <PropTable component='ListGroupItem'/>
                 </div>
 
                 {/* Labels */}
@@ -543,6 +708,10 @@ const ComponentsPage = React.createClass({
                   <h2 id='label-static'>Available variations</h2>
                   <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
                   <ReactPlayground codeText={Samples.LabelVariations} />
+
+                  <h3 id='label-props'>Props</h3>
+
+                  <PropTable component='Label'/>
                 </div>
 
                 {/* Badges */}
@@ -555,6 +724,10 @@ const ComponentsPage = React.createClass({
                     <h4>Cross-browser compatibility</h4>
                     <p>Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.</p>
                   </div>
+
+                  <h3 id='badges-props'>Props</h3>
+
+                  <PropTable component='Badge'/>
                 </div>
 
                 {/* Jumbotron */}
@@ -563,6 +736,10 @@ const ComponentsPage = React.createClass({
                   <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
                   <h2 id='page-header-static'>Example</h2>
                   <ReactPlayground codeText={Samples.Jumbotron} />
+
+                  <h3 id='jumbotron-props'>Props</h3>
+
+                  <PropTable component='Jumbotron'/>
                 </div>
 
                 {/* Page Header */}
@@ -582,6 +759,10 @@ const ComponentsPage = React.createClass({
                   <h2 id='well-optins-static'>Optional classes</h2>
                   <p>Control padding and rounded corners with two optional modifier classes.</p>
                   <ReactPlayground codeText={Samples.WellSizes} />
+
+                  <h3 id='wells-props'>Props</h3>
+
+                  <PropTable component='Well'/>
                 </div>
 
                 {/* Glyphicons */}
@@ -590,6 +771,10 @@ const ComponentsPage = React.createClass({
                   <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
                   <h2 id='glyphicon-static'>Example</h2>
                   <ReactPlayground codeText={Samples.Glyphicon} />
+
+                  <h3 id='glyphicons-props'>Props</h3>
+
+                  <PropTable component='Glyphicon'/>
                 </div>
 
                 {/* Tables */}
@@ -602,6 +787,10 @@ const ComponentsPage = React.createClass({
                   <h2 id='table-responsive'>Responsive</h2>
                   <p>Add <code>responsive</code> prop to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
                   <ReactPlayground codeText={Samples.TableResponsive} />
+
+                  <h3 id='table-props'>Props</h3>
+
+                  <PropTable component='Table'/>
                 </div>
 
                 {/* Input */}
@@ -638,10 +827,39 @@ const ComponentsPage = React.createClass({
                   <p>If <code>type</code> is not set, child element(s) will be rendered instead of an input element.
                   <code>getValue()</code> will not work when used this way.</p>
                   <ReactPlayground codeText={Samples.InputWrapper} />
+
+                  <h3 id='input-props'>Props</h3>
+
+                  <PropTable component='InputBase'/>
                 </div>
 
+                {/* Utilities */}
+                <div className='bs-docs-section'>
+                  <h1 id='utilities' className='page-header'>Utilities <small>Portal, Position</small></h1>
+
+                  <h2 id='utilities-portal'>Portal</h2>
+                  <p>
+                    A Component that renders its children into a new React "subtree" or <code>container</code>. The Portal component kind of like the React
+                    equivalent to jQuery's <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
+                    the component's direct parent. The Modal, and Overlay components use the Portal component internally.
+                  </p>
+                  <h3 id='utilities-props'>Props</h3>
+
+                  <PropTable component='Portal'/>
+
+                  <h2 id='utilities-position'>Position</h2>
+                  <p>
+                    A Component that absolutely positions its child to a <code>target</code> component or DOM node. Useful for creating custom
+                    popups or tooltips. Used by the Overlay Components.
+                  </p>
+                  <h3 id='utilities-props'>Props</h3>
+
+                  <PropTable component='Position'/>
+                </div>
               </div>
 
+
+
               <div className='col-md-3'>
                 <Affix
                   className='bs-docs-sidebar hidden-print'
@@ -662,6 +880,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href='#modals' key={5}>Modals</NavItem>
                     <NavItem href='#tooltips' key={6}>Tooltips</NavItem>
                     <NavItem href='#popovers' key={7}>Popovers</NavItem>
+                    <NavItem href='#overlays' key={27}>Overlays</NavItem>
                     <NavItem href='#progress' key={8}>Progress bars</NavItem>
                     <NavItem href='#navs' key={9}>Navs</NavItem>
                     <NavItem href='#navbars' key={10}>Navbars</NavItem>
@@ -681,6 +900,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href='#glyphicons' key={24}>Glyphicons</NavItem>
                     <NavItem href='#tables' key={25}>Tables</NavItem>
                     <NavItem href='#input' key={26}>Input</NavItem>
+                    <NavItem href='#utilities' key={28}>Utilities</NavItem>
                   </Nav>
                   <a className='back-to-top' href='#top'>
                   Back to top
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index 4e295fdfeb..4f5763a0e1 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -15,6 +15,10 @@ const NAV_LINKS = {
   'components': {
     link: 'components',
     title: 'Components'
+  },
+  'support': {
+    link: 'support',
+    title: 'Support'
   }
 };
 
diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
new file mode 100644
index 0000000000..250a70a8f6
--- /dev/null
+++ b/docs/src/PropTable.js
@@ -0,0 +1,172 @@
+import merge from 'lodash/object/merge';
+import React from 'react';
+
+import Label from '../../src/Label';
+import Table from '../../src/Table';
+
+
+let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
+
+function getPropsData(componentData, metadata){
+
+  let props = componentData.props || {};
+
+  if (componentData.composes) {
+    componentData.composes.forEach( other => {
+      props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
+
+    });
+  }
+
+  if (componentData.mixins) {
+    componentData.mixins.forEach( other => {
+      if ( componentData.composes.indexOf(other) === -1) {
+        props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
+      }
+    });
+  }
+
+  return props;
+}
+
+const PropTable = React.createClass({
+
+  contextTypes: {
+    metadata: React.PropTypes.object
+  },
+
+  componentWillMount(){
+    let componentData = this.context.metadata[this.props.component] || {};
+
+    this.propsData = getPropsData(componentData, this.context.metadata);
+  },
+
+  render(){
+    let propsData = this.propsData;
+
+    if ( !Object.keys(propsData).length){
+      return <span/>;
+    }
+
+    return (
+      <Table bordered striped className="prop-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          { this._renderRows(propsData) }
+        </tbody>
+      </Table>
+    );
+  },
+
+  _renderRows(propsData){
+
+    return Object.keys(propsData)
+      .sort()
+      .filter(propName => propsData[propName].type && !propsData[propName].doclets.private )
+      .map(propName => {
+        let propData = propsData[propName];
+
+        return (
+          <tr key={propName} className='prop-table-row'>
+            <td>
+              {propName} {this.renderRequiredLabel(propData)}
+            </td>
+            <td>
+              <div>{this.getType(propData)}</div>
+            </td>
+            <td>{propData.defaultValue}</td>
+
+            <td>
+              { propData.doclets.deprecated
+                && <div><strong className='text-danger'>{'Deprecated: ' + propData.doclets.deprecated + ' '}</strong></div>
+              }
+              <div dangerouslySetInnerHTML={{__html: propData.descHtml }} />
+            </td>
+          </tr>
+        );
+      });
+  },
+
+  renderRequiredLabel(prop) {
+    if (!prop.required) {
+      return null;
+    }
+
+    return (
+      <Label>required</Label>
+    );
+  },
+
+  getType(prop) {
+    let type = prop.type || {};
+    let name = this.getDisplayTypeName(type.name);
+    let doclets = prop.doclets || {};
+
+    switch (name) {
+      case 'object':
+        return name;
+      case 'union':
+        return type.value.reduce((current, val, i, list) => {
+          let item = this.getType({ type: val });
+          if (React.isValidElement(item)) {
+            item = React.cloneElement(item, {key: i});
+          }
+          current = current.concat(item);
+
+          return i === (list.length - 1) ? current : current.concat(' | ');
+        }, []);
+      case 'array':
+        let child = this.getType({ type: type.value });
+
+        return <span>{'array<'}{ child }{'>'}</span>;
+      case 'enum':
+        return this.renderEnum(type);
+      case 'custom':
+        return cleanDocletValue(doclets.type || name);
+      default:
+        return name;
+    }
+  },
+
+  getDisplayTypeName(typeName) {
+    if (typeName === 'func') {
+      return 'function';
+    } else if (typeName === 'bool') {
+      return 'boolean';
+    } else {
+      return typeName;
+    }
+  },
+
+  renderEnum(enumType) {
+    const enumValues = enumType.value || [];
+
+    const renderedEnumValues = [];
+    enumValues.forEach(function renderEnumValue(enumValue, i) {
+      if (i > 0) {
+        renderedEnumValues.push(
+          <span key={`${i}c`}>, </span>
+        );
+      }
+
+      renderedEnumValues.push(
+        <code key={i}>{enumValue}</code>
+      );
+    });
+
+    return (
+      <span>one of: {renderedEnumValues}</span>
+    );
+  }
+});
+
+
+
+export default PropTable;
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 743bb65979..02e170c48f 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -36,6 +36,7 @@ import * as modPagination from '../../src/Pagination';
 import * as modPanel from '../../src/Panel';
 import * as modPanelGroup from '../../src/PanelGroup';
 import * as modPopover from '../../src/Popover';
+//import * as modPopoverTrigger from '../../src/PopoverTrigger';
 import * as modProgressBar from '../../src/ProgressBar';
 import * as modRow from '../../src/Row';
 import * as modSplitButton from '../../src/SplitButton';
@@ -44,14 +45,22 @@ import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
 import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
+//import * as modTooltipTrigger from '../../src/TooltipTrigger';
 import * as modWell from '../../src/Well';
 
+import * as modPortal from '../../src/Portal';
+import * as modOverlay from '../../src/Overlay';
+
 import babel from 'babel-core/browser';
 
 import CodeExample from './CodeExample';
 
+
+
 const classNames = modClassNames.default;
 /* eslint-disable */
+const Portal = modPortal.default;
+
 const React = modReact.default;
 const Accordion = modAccordion.default;
 const Alert = modAlert.default;
@@ -89,6 +98,7 @@ const Pager = modPager.default;
 const Panel = modPanel.default;
 const PanelGroup = modPanelGroup.default;
 const Popover = modPopover.default;
+//const PopoverTrigger = modPopoverTrigger.default;
 const ProgressBar = modProgressBar.default;
 const Row = modRow.default;
 const SplitButton = modSplitButton.default;
@@ -97,7 +107,10 @@ const Table = modTable.default;
 const TabPane = modTabPane.default;
 const Thumbnail = modThumbnail.default;
 const Tooltip = modTooltip.default;
+//const TooltipTrigger = modTooltipTrigger.default;
 const Well = modWell.default;
+const Overlay = modOverlay.default;
+
 /* eslint-enable */
 
 const IS_MOBILE = typeof navigator !== 'undefined' && (
diff --git a/docs/src/Root.js b/docs/src/Root.js
index f3ce4b2b76..449db4528e 100644
--- a/docs/src/Root.js
+++ b/docs/src/Root.js
@@ -14,7 +14,8 @@ const Root = React.createClass({
         'index.html',
         'introduction.html',
         'getting-started.html',
-        'components.html'
+        'components.html',
+        'support.html'
       ];
     }
   },
@@ -25,6 +26,14 @@ const Root = React.createClass({
     };
   },
 
+  childContextTypes: {
+    metadata: React.PropTypes.object
+  },
+
+  getChildContext(){
+    return { metadata: this.props.propData };
+  },
+
   render() {
     // Dump out our current props to a global object via a script tag so
     // when initialising the browser environment we can bootstrap from the
@@ -64,7 +73,7 @@ const Root = React.createClass({
         <head dangerouslySetInnerHTML={head} />
 
         <body>
-          <Router.RouteHandler />
+          <Router.RouteHandler propData={this.props.propData} />
 
           <script dangerouslySetInnerHTML={browserInitScriptObj} />
           <script src={`${this.props.assetBaseUrl}/assets/bundle.js`} />
diff --git a/docs/src/Routes.js b/docs/src/Routes.js
index 790880e163..ae95030507 100644
--- a/docs/src/Routes.js
+++ b/docs/src/Routes.js
@@ -5,6 +5,7 @@ import HomePage from './HomePage';
 import IntroductionPage from './IntroductionPage';
 import GettingStartedPage from './GettingStartedPage';
 import ComponentsPage from './ComponentsPage';
+import SupportPage from './SupportPage';
 import NotFoundPage from './NotFoundPage';
 
 import {Route, DefaultRoute, NotFoundRoute} from 'react-router';
@@ -17,5 +18,6 @@ export default (
     <Route name='introduction' path='introduction.html' handler={IntroductionPage} />
     <Route name='getting-started' path='getting-started.html' handler={GettingStartedPage} />
     <Route name='components' path='components.html' handler={ComponentsPage} />
+    <Route name='support' path='support.html' handler={SupportPage} />
   </Route>
 );
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index c9b0aee582..47e6720802 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -32,7 +32,7 @@ export default {
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
-  ModalOverlayMixin:             require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),
+
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
   ModalCustomSizing:             require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
@@ -99,5 +99,8 @@ export default {
   InputValidation:               require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
-  MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8')
+  MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'),
+
+  Overlay:                       require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'),
+  OverlayCustom:                 require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8')
 };
diff --git a/docs/src/SupportPage.js b/docs/src/SupportPage.js
new file mode 100644
index 0000000000..0a792dfbd5
--- /dev/null
+++ b/docs/src/SupportPage.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import NavMain from './NavMain';
+import PageHeader from './PageHeader';
+import PageFooter from './PageFooter';
+
+export default class Page extends React.Component {
+  render() {
+    return (
+        <div>
+          <NavMain activePage="support" />
+
+          <PageHeader
+            title="Need help?"
+            subTitle="Community resources for answering your React-Bootstrap questions." />
+
+          <div className="container bs-docs-container">
+            <div className="row">
+              <div className="col-md-9" role="main">
+                <div className="bs-docs-section">
+                  <p className="lead">Stay up to date on the development of React-Bootstrap and reach out to the community with these helpful resources.</p>
+
+                  <h3>Stack Overflow</h3>
+                  <p><a href="http://stackoverflow.com/questions/ask">Ask questions</a> about specific problems you have faced, including details about what exactly you are trying to do. Make sure you tag your question with <code className="js">react-bootstrap</code>. You can also read through <a href="http://stackoverflow.com/questions/tagged/react-bootstrap">existing React-Bootstrap questions</a>.</p>
+
+                  <h3>Live help</h3>
+                  <p>Bring your questions and pair with other react-bootstrap users in a <a href="http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap">live Thinkful hangout</a>. Hear about the challenges other developers are running into, or screenshare your own code with the group for feedback.</p>
+
+                  <h3>Chat rooms</h3>
+                  <p>Discuss questions in the <code className="js">#react-bootstrap</code> channel on the <a href="http://www.reactiflux.com/">Reactiflux Slack</a> or on <a href="https://gitter.im/react-bootstrap/react-bootstrap">Gitter</a>.</p>
+
+                  <h3>GitHub issues</h3>
+                  <p>The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests. See more about how we use issues in the <a href="https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md#issues">contribution guidelines</a>.</p>
+
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <PageFooter />
+        </div>
+      );
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+}
diff --git a/karma.conf.js b/karma.conf.js
index 5a7ce9f3d0..c686c7bb42 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -11,7 +11,6 @@ var reporters = ['mocha'];
 
 if (runCoverage) {
   webpackConfig = require('./webpack/test-coverage.config');
-  preprocessors.push('coverage');
   reporters.push('coverage');
 
   if (isCI) {
diff --git a/package.json b/package.json
index 18b95eaa9d..1f7e657340 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
 {
   "name": "react-bootstrap",
+
   "version": "0.24.0-alpha.4",
+
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",
@@ -46,7 +48,7 @@
     "babel": "^5.1.10",
     "babel-core": "^5.1.10",
     "babel-eslint": "^3.0.1",
-    "babel-loader": "^5.0.0",
+    "babel-loader": "^5.2.1",
     "bootstrap": "^3.3.4",
     "brfs": "^1.4.0",
     "chai": "^3.0.0",
@@ -55,9 +57,9 @@
     "colors": "^1.0.3",
     "css-loader": "^0.14.1",
     "es5-shim": "^4.1.0",
-    "eslint": "0.23.0",
+    "eslint": "0.24.0",
     "eslint-plugin-babel": "^1.0.0",
-    "eslint-plugin-mocha": "^0.2.2",
+    "eslint-plugin-mocha": "^0.4.0",
     "eslint-plugin-react": "^2.1.0",
     "express": "^4.12.3",
     "extract-text-webpack-plugin": "^0.8.0",
@@ -71,12 +73,12 @@
     "json-loader": "^0.5.1",
     "karma": "~0.12.32",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "~0.1.2",
-    "karma-cli": "0.0.4",
+    "karma-chrome-launcher": "~0.2.0",
+    "karma-cli": "0.1.0",
     "karma-coverage": "^0.4.2",
     "karma-coveralls": "^1.1.0",
     "karma-firefox-launcher": "~0.1.3",
-    "karma-mocha": "~0.1.1",
+    "karma-mocha": "~0.2.0",
     "karma-mocha-reporter": "^1.0.2",
     "karma-phantomjs-launcher": "^0.2.0",
     "karma-sinon": "^1.0.3",
@@ -86,6 +88,7 @@
     "less": "^2.4.0",
     "less-loader": "^2.1.0",
     "lodash": "^3.5.0",
+    "marked": "^0.3.3",
     "mocha": "^2.2.1",
     "mt-changelog": "^0.5.2",
     "node-libs-browser": "^0.5.2",
@@ -94,6 +97,7 @@
     "phantomjs": "^1.9.17",
     "portfinder": "^0.4.0",
     "react": "^0.13.1",
+    "react-component-metadata": "^1.2.1",
     "react-hot-loader": "^1.2.7",
     "react-router": "^0.13.1",
     "rimraf": "^2.3.2",
diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
index f158c58bc8..df8795de4d 100644
--- a/src/BootstrapMixin.js
+++ b/src/BootstrapMixin.js
@@ -3,8 +3,20 @@ import CustomPropTypes from './utils/CustomPropTypes';
 
 const BootstrapMixin = {
   propTypes: {
+    /**
+     * bootstrap className
+     * @private
+     */
     bsClass: CustomPropTypes.keyOf(styleMaps.CLASSES),
+    /**
+     * Style variants
+     * @type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
+     */
     bsStyle: CustomPropTypes.keyOf(styleMaps.STYLES),
+    /**
+     * Size variants
+     * @type {("xsmall"|"small"|"medium"|"large")}
+     */
     bsSize: CustomPropTypes.keyOf(styleMaps.SIZES)
   },
 
diff --git a/src/Button.js b/src/Button.js
index 27f1fa31e4..60104068a1 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Button = React.createClass({
   mixins: [BootstrapMixin],
@@ -11,7 +12,7 @@ const Button = React.createClass({
     block: React.PropTypes.bool,
     navItem: React.PropTypes.bool,
     navDropdown: React.PropTypes.bool,
-    componentClass: React.PropTypes.node,
+    componentClass: CustomPropTypes.elementType,
     href: React.PropTypes.string,
     target: React.PropTypes.string
   },
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
index c82a31771c..e540a12ac1 100644
--- a/src/ButtonGroup.js
+++ b/src/ButtonGroup.js
@@ -9,6 +9,10 @@ const ButtonGroup = React.createClass({
   propTypes: {
     vertical:  React.PropTypes.bool,
     justified: React.PropTypes.bool,
+    /**
+     * Display block buttons, only useful when used with the "vertical" prop.
+     * @type {bool}
+     */
     block: CustomPropTypes.all([
       React.PropTypes.bool,
       function(props, propName, componentName) {
diff --git a/src/Col.js b/src/Col.js
index 0898e10b2e..4241a7ff21 100644
--- a/src/Col.js
+++ b/src/Col.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styleMaps from './styleMaps';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Col = React.createClass({
   propTypes: {
@@ -20,7 +21,7 @@ const Col = React.createClass({
     smPull: React.PropTypes.number,
     mdPull: React.PropTypes.number,
     lgPull: React.PropTypes.number,
-    componentClass: React.PropTypes.node.isRequired
+    componentClass: CustomPropTypes.elementType
   },
 
   getDefaultProps() {
diff --git a/src/Grid.js b/src/Grid.js
index 17c4ed5ccf..352b3a1b54 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Grid = React.createClass({
   propTypes: {
     fluid: React.PropTypes.bool,
-    componentClass: React.PropTypes.node.isRequired
+    componentClass: CustomPropTypes.elementType
   },
 
   getDefaultProps() {
diff --git a/src/Jumbotron.js b/src/Jumbotron.js
index 41af93dd0a..00de36a701 100644
--- a/src/Jumbotron.js
+++ b/src/Jumbotron.js
@@ -1,12 +1,23 @@
 import React from 'react';
 import classNames from 'classnames';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Jumbotron = React.createClass({
+  propTypes: {
+    componentClass: CustomPropTypes.elementType
+  },
+
+  getDefaultProps() {
+    return { componentClass: 'div' };
+  },
+
   render() {
+    const ComponentClass = this.props.componentClass;
+
     return (
-      <div {...this.props} className={classNames(this.props.className, 'jumbotron')}>
+      <ComponentClass {...this.props} className={classNames(this.props.className, 'jumbotron')}>
         {this.props.children}
-      </div>
+      </ComponentClass>
     );
   }
 });
diff --git a/src/Modal.js b/src/Modal.js
index 3a28a7ff62..70b5945bab 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,15 +1,21 @@
-import React from 'react';
+/*eslint-disable react/prop-types */
+import React, { cloneElement } from 'react';
+
 import classNames from 'classnames';
+import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
+import deprecationWarning from './utils/deprecationWarning';
+
+import Portal from './Portal';
 
+import Body from './ModalBody';
+import Header from './ModalHeader';
+import Title from './ModalTitle';
+import Footer from './ModalFooter';
 
-// TODO:
-// - aria-labelledby
-// - Add `modal-body` div if only one child passed in that doesn't already have it
-// - Tests
 
 /**
  * Gets the correct clientHeight of the modal container
@@ -31,9 +37,32 @@ function getContainer(context){
     domUtils.ownerDocument(context).body;
 }
 
+function requiredIfNot(key, type){
+  return function(props, propName, componentName){
+    let propType = type;
+
+    if ( props[ key] === undefined ){
+      propType = propType.isRequired;
+    }
+    return propType(props, propName, componentName);
+  };
+}
+
+function toChildArray(children){
+  let result = [];
+  React.Children.forEach(children, c => result.push(c));
+  return result;
+}
+
+
+let currentFocusListener;
+
 /**
  * Firefox doesn't have a focusin event so using capture is easiest way to get bubbling
  * IE8 can't do addEventListener, but does have onfocusin, so we use that in ie8
+ *
+ * We only allow one Listener at a time to avoid stack overflows
+ *
  * @param  {ReactElement|HTMLElement} context
  * @param  {Function} handler
  */
@@ -42,6 +71,10 @@ function onFocus(context, handler) {
   let useFocusin = !doc.addEventListener;
   let remove;
 
+  if ( currentFocusListener ) {
+    currentFocusListener.remove();
+  }
+
   if (useFocusin) {
     document.attachEvent('onfocusin', handler);
     remove = () => document.detachEvent('onfocusin', handler);
@@ -49,7 +82,10 @@ function onFocus(context, handler) {
     document.addEventListener('focus', handler, true);
     remove = () => document.removeEventListener('focus', handler, true);
   }
-  return { remove };
+
+  currentFocusListener = { remove };
+
+  return currentFocusListener;
 }
 
 let scrollbarSize;
@@ -75,19 +111,64 @@ function getScrollbarSize(){
 }
 
 
-const Modal = React.createClass({
+const ModalMarkup = React.createClass({
 
   mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
+    /**
+     * The Modal title text
+     * @deprecated Use the "Modal.Header" component instead
+     */
     title: React.PropTypes.node,
+    /**
+     * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
+     */
     backdrop: React.PropTypes.oneOf(['static', true, false]),
+    /**
+     * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
+     */
     keyboard: React.PropTypes.bool,
+
+    /**
+     * Specify whether the Modal heading should contain a close button
+     * @deprecated Use the "Modal.Header" Component instead
+     */
     closeButton: React.PropTypes.bool,
-    container: React.PropTypes.object,
+
+    /**
+     * Open and close the Modal with a slide and fade animation.
+     */
     animation: React.PropTypes.bool,
-    onRequestHide: React.PropTypes.func.isRequired,
+    /**
+     * A Callback fired when the header closeButton or non-static backdrop is clicked.
+     * @type {function}
+     * @required
+     */
+    onHide: requiredIfNot('onRequestHide', React.PropTypes.func),
+
+    /**
+     * A Callback fired when the header closeButton or non-static backdrop is clicked.
+     * @deprecated Replaced by `onHide`.
+     */
+    onRequestHide:  React.PropTypes.func,
+
+    /**
+     * A css class to apply to the Modal dialog DOM node.
+     */
     dialogClassName: React.PropTypes.string,
+
+    /**
+     * When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes.
+     * Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
+     */
+    autoFocus: React.PropTypes.bool,
+
+    /**
+     * When `true` The modal will prevent focus from leaving the Modal while open.
+     * Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies,
+     * such as screen readers.
+     */
     enforceFocus: React.PropTypes.bool
   },
 
@@ -98,6 +179,8 @@ const Modal = React.createClass({
       keyboard: true,
       animation: true,
       closeButton: true,
+
+      autoFocus: true,
       enforceFocus: true
     };
   },
@@ -131,9 +214,8 @@ const Modal = React.createClass({
         onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
         ref="modal">
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className="modal-content">
-            {this.props.title ? this.renderHeader() : null}
-            {this.props.children}
+          <div className="modal-content" role='document'>
+            { this.renderContent() }
           </div>
         </div>
       </div>
@@ -143,6 +225,35 @@ const Modal = React.createClass({
       this.renderBackdrop(modal, state.backdropStyles) : modal;
   },
 
+  renderContent() {
+    let children = toChildArray(this.props.children); // b/c createFragment is in addons and children can be a key'd object
+    let hasNewHeader = children.some( c => c.type.__isModalHeader);
+
+    if (!hasNewHeader && this.props.title != null){
+      deprecationWarning(
+        'Specifying `closeButton` or `title` Modal props',
+        'the new Modal.Header, and Modal.Title components');
+
+      children.unshift(
+        <Header closeButton={this.props.closeButton} onHide={this._getHide()}>
+          { this.props.title &&
+            <Title>{this.props.title}</Title>
+          }
+        </Header>
+      );
+    }
+
+    return React.Children.map(children, child => {
+      // TODO: use context in 0.14
+      if (child.type.__isModalHeader) {
+        return cloneElement(child, {
+          onHide: createChainedFunction(this._getHide(), child.props.onHide)
+        });
+      }
+      return child;
+    });
+  },
+
   renderBackdrop(modal) {
     let classes = {
       'modal-backdrop': true,
@@ -161,27 +272,12 @@ const Modal = React.createClass({
     );
   },
 
-  renderHeader() {
-    let closeButton;
-    if (this.props.closeButton) {
-      closeButton = (
-        <button type="button" className="close" aria-hidden="true" onClick={this.props.onRequestHide}>&times;</button>
-      );
+  _getHide(){
+    if ( !this.props.onHide && this.props.onRequestHide){
+      deprecationWarning('The Modal prop `onRequestHide`', 'the `onHide` prop');
     }
 
-    return (
-      <div className="modal-header">
-        {closeButton}
-        {this.renderTitle()}
-      </div>
-    );
-  },
-
-  renderTitle() {
-    return (
-      React.isValidElement(this.props.title) ?
-        this.props.title : <h4 className="modal-title">{this.props.title}</h4>
-    );
+    return this.props.onHide || this.props.onRequestHide;
   },
 
   iosClickHack() {
@@ -192,6 +288,10 @@ const Modal = React.createClass({
     React.findDOMNode(this.refs.backdrop).onclick = function () {};
   },
 
+  componentWillMount(){
+    this.checkForFocus();
+  },
+
   componentDidMount() {
     const doc = domUtils.ownerDocument(this);
     const win = domUtils.ownerWindow(this);
@@ -260,12 +360,12 @@ const Modal = React.createClass({
       return;
     }
 
-    this.props.onRequestHide();
+    this._getHide()();
   },
 
   handleDocumentKeyUp(e) {
     if (this.props.keyboard && e.keyCode === 27) {
-      this.props.onRequestHide();
+      this._getHide()();
     }
   },
 
@@ -273,11 +373,23 @@ const Modal = React.createClass({
     this.setState(this._getStyles());
   },
 
+  checkForFocus(){
+    if ( domUtils.canUseDom ) {
+      try {
+        this.lastFocus = document.activeElement;
+      }
+      catch (e) {} // eslint-disable-line no-empty
+    }
+  },
+
   focusModalContent () {
-    if (this.props.enforceFocus) {
-      this.lastFocus = domUtils.activeElement(this);
+    let modalContent = React.findDOMNode(this.refs.modal);
+    let current = domUtils.activeElement(this);
+    let focusInModal = current && domUtils.contains(modalContent, current);
+
+    if (this.props.autoFocus && !focusInModal) {
+      this.lastFocus = current;
 
-      let modalContent = React.findDOMNode(this.refs.modal);
       modalContent.focus();
     }
   },
@@ -320,4 +432,38 @@ const Modal = React.createClass({
   }
 });
 
+const Modal = React.createClass({
+  propTypes: {
+    ...Portal.propTypes,
+    ...ModalMarkup.propTypes
+  },
+
+  defaultProps: {
+    show: null
+  },
+
+  render() {
+    let { show, ...props } = this.props;
+
+    let modal = (
+      <ModalMarkup {...props}>{this.props.children}</ModalMarkup>
+    );
+    // I can't think of another way to not break back compat while defaulting container
+    if ( !this.props.__isUsedInModalTrigger && show != null ){
+      return (
+        <Portal container={props.container} >
+          { show && modal }
+        </Portal>
+      );
+    } else {
+      return modal;
+    }
+  }
+});
+
+Modal.Body = Body;
+Modal.Header = Header;
+Modal.Title = Title;
+Modal.Footer = Footer;
+
 export default Modal;
diff --git a/src/ModalBody.js b/src/ModalBody.js
new file mode 100644
index 0000000000..40c667c001
--- /dev/null
+++ b/src/ModalBody.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+
+class ModalBody extends React.Component {
+  render() {
+    return (
+      <div {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+ModalBody.propTypes = {
+  /**
+   * A css class applied to the Component
+   */
+  modalClassName: React.PropTypes.string
+};
+
+ModalBody.defaultProps = {
+  modalClassName: 'modal-body'
+};
+
+
+export default ModalBody;
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
new file mode 100644
index 0000000000..39f8759fe5
--- /dev/null
+++ b/src/ModalFooter.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+
+class ModalFooter extends React.Component {
+
+  render() {
+    return (
+      <div {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+ModalFooter.propTypes = {
+  /**
+   * A css class applied to the Component
+   */
+  modalClassName: React.PropTypes.string
+};
+
+ModalFooter.defaultProps = {
+  modalClassName: 'modal-footer'
+};
+
+export default ModalFooter;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
new file mode 100644
index 0000000000..706546c64f
--- /dev/null
+++ b/src/ModalHeader.js
@@ -0,0 +1,56 @@
+
+import React from 'react';
+import classnames from 'classnames';
+
+class ModalHeader extends React.Component {
+
+  render() {
+    return (
+      <div
+        {...this.props}
+        className={classnames(this.props.className, this.props.modalClassName)}
+      >
+        { this.props.closeButton &&
+          <button
+            className='close'
+            aria-label={this.props['aria-label'] || 'Close'} //eslint-disable-line react/prop-types
+            onClick={this.props.onHide}
+            style={{ marginTop: -2 }}
+          >
+            <span aria-hidden="true">
+              &times;
+            </span>
+          </button>
+        }
+        { this.props.children }
+      </div>
+    );
+  }
+}
+
+//used in liue of parent contexts right now to auto wire the close button
+ModalHeader.__isModalHeader = true;
+
+ModalHeader.propTypes = {
+  /**
+   * A css class applied to the Component
+   */
+  modalClassName: React.PropTypes.string,
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: React.PropTypes.bool,
+  /**
+   * A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically
+   * be propagated up to the parent Modal `onHide`.
+   */
+  onHide: React.PropTypes.func
+};
+
+ModalHeader.defaultProps = {
+  modalClassName: 'modal-header',
+  closeButton: false
+};
+
+
+export default ModalHeader;
diff --git a/src/ModalTitle.js b/src/ModalTitle.js
new file mode 100644
index 0000000000..0c44bbaee5
--- /dev/null
+++ b/src/ModalTitle.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+
+class ModalTitle extends React.Component {
+
+  render() {
+    return (
+      <h4 {...this.props} className={classnames(this.props.className, 'modal-title')}>
+        { this.props.children }
+      </h4>
+    );
+  }
+}
+
+ModalTitle.propTypes = {
+  /**
+   * A css class applied to the Component
+   */
+  modalClassName: React.PropTypes.string
+};
+
+ModalTitle.defaultProps = {
+  modalClassName: 'modal-title'
+};
+
+export default ModalTitle;
diff --git a/src/ModalTrigger.js b/src/ModalTrigger.js
index 7b1eb73255..e1087dc384 100644
--- a/src/ModalTrigger.js
+++ b/src/ModalTrigger.js
@@ -1,20 +1,37 @@
 import React, { cloneElement } from 'react';
-import OverlayMixin from './OverlayMixin';
+import CustomPropTypes from './utils/CustomPropTypes';
+import deprecationWarning from './utils/deprecationWarning';
 
 import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
+import { OverlayMixin } from './OverlayMixin';
+
+function createHideDepreciationWrapper(hide){
+  return function(...args){
+    deprecationWarning(
+        'The Modal prop `onRequestHide`', 'the `onHide` prop');
+
+    return hide(...args);
+  };
+}
 
 const ModalTrigger = React.createClass({
-  mixins: [OverlayMixin],
+
+  mixins: [ OverlayMixin ],
 
   propTypes: {
     modal: React.PropTypes.node.isRequired,
+    /**
+     * The DOM Node that the Component will render it's children into
+     */
+    container: CustomPropTypes.mountable,
     onBlur: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     onMouseOut: React.PropTypes.func,
     onMouseOver: React.PropTypes.func
   },
 
+
   getInitialState() {
     return {
       isOverlayShown: false
@@ -40,14 +57,18 @@ const ModalTrigger = React.createClass({
   },
 
   renderOverlay() {
+    let modal = this.props.modal;
+
     if (!this.state.isOverlayShown) {
       return <span />;
     }
 
     return cloneElement(
-      this.props.modal,
+      modal,
       {
-        onRequestHide: this.hide
+        onHide: this.hide,
+        onRequestHide: createHideDepreciationWrapper(this.hide),
+        __isUsedInModalTrigger: true
       }
     );
   },
@@ -82,4 +103,19 @@ const ModalTrigger = React.createClass({
  */
 ModalTrigger.withContext = createContextWrapper(ModalTrigger, 'modal');
 
-export default ModalTrigger;
+let DepreciatedModalTrigger = React.createClass({
+  componentWillMount(){
+    deprecationWarning(
+        'The `ModalTrigger` component', 'the `Modal` component directly'
+      , 'http://react-bootstrap.github.io/components.html#modals');
+  },
+
+  render(){
+    return (<ModalTrigger {...this.props}/>);
+  }
+});
+
+DepreciatedModalTrigger.withContext = ModalTrigger.withContext;
+DepreciatedModalTrigger.ModalTrigger = ModalTrigger;
+
+export default DepreciatedModalTrigger;
diff --git a/src/Navbar.js b/src/Navbar.js
index 785c2518a2..2a5ec0ea7b 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Navbar = React.createClass({
   mixins: [BootstrapMixin],
@@ -15,7 +16,7 @@ const Navbar = React.createClass({
     inverse: React.PropTypes.bool,
     fluid: React.PropTypes.bool,
     role: React.PropTypes.string,
-    componentClass: React.PropTypes.node.isRequired,
+    componentClass: CustomPropTypes.elementType,
     brand: React.PropTypes.node,
     toggleButton: React.PropTypes.node,
     toggleNavKey: React.PropTypes.oneOfType([
diff --git a/src/Overlay.js b/src/Overlay.js
new file mode 100644
index 0000000000..d425fe91a4
--- /dev/null
+++ b/src/Overlay.js
@@ -0,0 +1,63 @@
+/*eslint-disable object-shorthand, react/prop-types */
+import React from 'react';
+import Portal from './Portal';
+import Position from './Position';
+import RootCloseWrapper from './RootCloseWrapper';
+
+class Overlay extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+  }
+
+  render(){
+    let {
+        container
+      , containerPadding
+      , target
+      , placement
+      , rootClose
+      , ...props } = this.props;
+
+    let positionedChild = (
+      <Position {...{ container, containerPadding, target, placement }}>
+        { this.props.children }
+      </Position>
+    );
+
+    if (rootClose) {
+      positionedChild = (
+        <RootCloseWrapper onRootClose={this.props.onHide}>
+          { positionedChild }
+        </RootCloseWrapper>
+      );
+    }
+
+    return (
+      <Portal container={container} rootClose={rootClose} onRootClose={this.props.onHide}>
+      { props.show &&
+          positionedChild
+      }
+      </Portal>
+    );
+  }
+}
+
+Overlay.propTypes = {
+  ...Portal.propTypes,
+  ...Position.propTypes,
+  /**
+   * Set the visibility of the Overlay
+   */
+  show: React.PropTypes.bool,
+  /**
+   * Specify whether the overlay should trigger onHide when the user clicks outside the overlay
+   */
+  rootClose: React.PropTypes.bool,
+  /**
+   * A Callback fired by the Overlay when it wishes to be hidden.
+   */
+  onHide: React.PropTypes.func
+};
+
+export default Overlay;
diff --git a/src/OverlayMixin.js b/src/OverlayMixin.js
index f8874a8828..fc60ec99cb 100644
--- a/src/OverlayMixin.js
+++ b/src/OverlayMixin.js
@@ -1,54 +1,65 @@
+/*eslint-disable react/prop-types */
 import React from 'react';
 import CustomPropTypes from './utils/CustomPropTypes';
 import domUtils from './utils/domUtils';
+import deprecationWarning from './utils/deprecationWarning';
 
-export default {
+export const OverlayMixin = {
   propTypes: {
+
     container: CustomPropTypes.mountable
   },
 
-  componentWillUnmount() {
-    this._unrenderOverlay();
-    if (this._overlayTarget) {
-      this.getContainerDOMNode()
-        .removeChild(this._overlayTarget);
-      this._overlayTarget = null;
-    }
+
+  componentDidMount() {
+    this._renderOverlay();
   },
 
   componentDidUpdate() {
     this._renderOverlay();
   },
 
-  componentDidMount() {
-    this._renderOverlay();
+  componentWillUnmount() {
+    this._unrenderOverlay();
+    this._mountOverlayTarget();
   },
 
   _mountOverlayTarget() {
-    this._overlayTarget = document.createElement('div');
-    this.getContainerDOMNode()
-      .appendChild(this._overlayTarget);
+    if (!this._overlayTarget) {
+      this._overlayTarget = document.createElement('div');
+      this.getContainerDOMNode()
+        .appendChild(this._overlayTarget);
+    }
   },
 
-  _renderOverlay() {
-    if (!this._overlayTarget) {
-      this._mountOverlayTarget();
+  _unmountOverlayTarget() {
+    if (this._overlayTarget) {
+      this.getContainerDOMNode()
+        .removeChild(this._overlayTarget);
+      this._overlayTarget = null;
     }
+  },
+
+  _renderOverlay() {
 
     let overlay = this.renderOverlay();
 
     // Save reference for future access.
     if (overlay !== null) {
+      this._mountOverlayTarget();
       this._overlayInstance = React.render(overlay, this._overlayTarget);
     } else {
       // Unrender if the component is null for transitions to null
       this._unrenderOverlay();
+      this._unmountOverlayTarget();
     }
   },
 
   _unrenderOverlay() {
-    React.unmountComponentAtNode(this._overlayTarget);
-    this._overlayInstance = null;
+    if (this._overlayTarget) {
+      React.unmountComponentAtNode(this._overlayTarget);
+      this._overlayInstance = null;
+    }
   },
 
   getOverlayDOMNode() {
@@ -71,3 +82,14 @@ export default {
     return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
   }
 };
+
+export default {
+
+  ...OverlayMixin,
+
+  componentWillMount() {
+    deprecationWarning(
+        'Overlay mixin', 'the `<Portal/>` Component'
+      , 'http://react-bootstrap.github.io/components.html#utilities-portal');
+  }
+};
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index b708faf0bd..2be3bfd9d0 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -1,11 +1,13 @@
+/*eslint-disable react/prop-types */
 import React, { cloneElement } from 'react';
 
-import OverlayMixin from './OverlayMixin';
-import RootCloseWrapper from './RootCloseWrapper';
-
 import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
-import domUtils from './utils/domUtils';
+import Overlay from './Overlay';
+import position from './utils/overlayPositionUtils';
+
+import deprecationWarning from './utils/deprecationWarning';
+import warning from 'react/lib/warning';
 
 /**
  * Check if value one is inside or equal to the of value
@@ -22,52 +24,95 @@ function isOneOf(one, of) {
 }
 
 const OverlayTrigger = React.createClass({
-  mixins: [OverlayMixin],
 
   propTypes: {
+
+    ...Overlay.propTypes,
+
+     /**
+     * Specify which action or actions trigger Overlay visibility
+     */
     trigger: React.PropTypes.oneOfType([
       React.PropTypes.oneOf(['manual', 'click', 'hover', 'focus']),
       React.PropTypes.arrayOf(React.PropTypes.oneOf(['click', 'hover', 'focus']))
     ]),
-    placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+    /**
+     * A millisecond delay amount to show and hide the Overlay once triggered
+     */
     delay: React.PropTypes.number,
+    /**
+     * A millisecond delay amount before showing the Overlay once triggered.
+     */
     delayShow: React.PropTypes.number,
+    /**
+     * A millisecond delay amount before hiding the Overlay once triggered.
+     */
     delayHide: React.PropTypes.number,
+
+    /**
+     * The initial visibility state of the Overlay, for more nuanced visibility controll consider
+     * using the Overlay component directly.
+     */
     defaultOverlayShown: React.PropTypes.bool,
+
+    /**
+     * An element or text to overlay next to the target.
+     */
     overlay: React.PropTypes.node.isRequired,
+
+    /**
+     * @private
+     */
     onBlur: React.PropTypes.func,
+    /**
+     * @private
+     */
     onClick: React.PropTypes.func,
+    /**
+     * @private
+     */
     onFocus: React.PropTypes.func,
+    /**
+     * @private
+     */
     onMouseEnter: React.PropTypes.func,
+    /**
+     * @private
+     */
     onMouseLeave: React.PropTypes.func,
-    containerPadding: React.PropTypes.number,
-    rootClose: React.PropTypes.bool
+
+    //override specific overlay props
+    /**
+     * @private
+     */
+    target(){},
+     /**
+     * @private
+     */
+    onHide(){},
+    /**
+     * @private
+     */
+    show(){}
   },
 
   getDefaultProps() {
     return {
-      placement: 'right',
-      trigger: ['hover', 'focus'],
-      containerPadding: 0
+      trigger: ['hover', 'focus']
     };
   },
 
   getInitialState() {
     return {
       isOverlayShown: this.props.defaultOverlayShown == null ?
-        false : this.props.defaultOverlayShown,
-      overlayLeft: null,
-      overlayTop: null,
-      arrowOffsetLeft: null,
-      arrowOffsetTop: null
+        false : this.props.defaultOverlayShown
     };
   },
 
   show() {
     this.setState({
       isOverlayShown: true
-    }, function() {
-      this.updateOverlayPosition();
     });
   },
 
@@ -81,77 +126,90 @@ const OverlayTrigger = React.createClass({
     if (this.state.isOverlayShown) {
       this.hide();
     } else {
-     this.show();
+      this.show();
     }
   },
 
-  renderOverlay() {
-    if (!this.state.isOverlayShown) {
-      return <span />;
-    }
+  componentDidMount(){
+    this._mountNode = document.createElement('div');
+    React.render(this._overlay, this._mountNode);
+  },
 
-    const overlay = cloneElement(
-      this.props.overlay,
-      {
-        onRequestHide: this.hide,
-        placement: this.props.placement,
-        positionLeft: this.state.overlayLeft,
-        positionTop: this.state.overlayTop,
-        arrowOffsetLeft: this.state.arrowOffsetLeft,
-        arrowOffsetTop: this.state.arrowOffsetTop
-      }
-    );
+  componentWillUnmount() {
+    React.unmountComponentAtNode(this._mountNode);
+    this._mountNode = null;
+    clearTimeout(this._hoverDelay);
+  },
 
-    if (this.props.rootClose) {
-      return (
-        <RootCloseWrapper onRootClose={this.hide}>
-          {overlay}
-        </RootCloseWrapper>
-      );
-    } else {
-      return overlay;
-    }
+  componentDidUpdate(){
+    React.render(this._overlay, this._mountNode);
+  },
+
+  getOverlay(){
+    let props = {
+      show:      this.state.isOverlayShown,
+      onHide:    this.hide,
+      rootClose: this.props.rootClose,
+      target:    ()=> React.findDOMNode(this),
+      placement: this.props.placement,
+      container: this.props.container,
+      containerPadding: this.props.containerPadding
+    };
+
+    let overlay = cloneElement(this.props.overlay, {
+      placement: props.placement,
+      container: props.container
+    });
+
+    return (
+      <Overlay {...props}>
+        { overlay }
+      </Overlay>
+    );
   },
 
   render() {
-    const child = React.Children.only(this.props.children);
-    if (this.props.trigger === 'manual') {
-      return child;
-    }
+    const trigger = React.Children.only(this.props.children);
 
-    const props = {};
+    const props = {
+      'aria-describedby': this.props.overlay.props.id
+    };
 
-    props.onClick = createChainedFunction(child.props.onClick, this.props.onClick);
-    if (isOneOf('click', this.props.trigger)) {
-      props.onClick = createChainedFunction(this.toggle, props.onClick);
-    }
+    // create in render otherwise owner is lost...
+    this._overlay = this.getOverlay();
 
-    if (isOneOf('hover', this.props.trigger)) {
-      props.onMouseEnter = createChainedFunction(this.handleDelayedShow, this.props.onMouseEnter);
-      props.onMouseLeave = createChainedFunction(this.handleDelayedHide, this.props.onMouseLeave);
-    }
+    if (this.props.trigger !== 'manual') {
+
+      props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
 
-    if (isOneOf('focus', this.props.trigger)) {
-      props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
-      props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
+      if (isOneOf('click', this.props.trigger)) {
+        props.onClick = createChainedFunction(this.toggle, props.onClick);
+      }
+
+      if (isOneOf('hover', this.props.trigger)) {
+        warning(!(this.props.trigger === 'hover'),
+          '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
+          'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
+
+        props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
+        props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
+      }
+
+      if (isOneOf('focus', this.props.trigger)) {
+        props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
+        props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
+      }
+    }
+    else {
+      deprecationWarning('"manual" trigger type', ' the Overlay component');
     }
 
     return cloneElement(
-      child,
+      trigger,
       props
     );
   },
 
-  componentWillUnmount() {
-    clearTimeout(this._hoverDelay);
-  },
-
-  componentDidMount() {
-    if (this.props.defaultOverlayShown) {
-      this.updateOverlayPosition();
-    }
-  },
-
   handleDelayedShow() {
     if (this._hoverDelay != null) {
       clearTimeout(this._hoverDelay);
@@ -167,10 +225,10 @@ const OverlayTrigger = React.createClass({
       return;
     }
 
-    this._hoverDelay = setTimeout(function() {
+    this._hoverDelay = setTimeout(() => {
       this._hoverDelay = null;
       this.show();
-    }.bind(this), delay);
+    }, delay);
   },
 
   handleDelayedHide() {
@@ -188,133 +246,38 @@ const OverlayTrigger = React.createClass({
       return;
     }
 
-    this._hoverDelay = setTimeout(function() {
+    this._hoverDelay = setTimeout(() => {
       this._hoverDelay = null;
       this.hide();
-    }.bind(this), delay);
-  },
-
-  updateOverlayPosition() {
-    if (!this.isMounted()) {
-      return;
-    }
-
-    this.setState(this.calcOverlayPosition());
+    }, delay);
   },
 
+  // deprecated Methods
   calcOverlayPosition() {
-    const childOffset = this.getPosition();
-
-    const overlayNode = this.getOverlayDOMNode();
-    const overlayHeight = overlayNode.offsetHeight;
-    const overlayWidth = overlayNode.offsetWidth;
-
-    const placement = this.props.placement;
-    let overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop;
-
-    if (placement === 'left' || placement === 'right') {
-      overlayTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
-
-      if (placement === 'left') {
-        overlayLeft = childOffset.left - overlayWidth;
-      } else {
-        overlayLeft = childOffset.left + childOffset.width;
-      }
-
-      const topDelta = this._getTopDelta(overlayTop, overlayHeight);
-      overlayTop += topDelta;
-      arrowOffsetTop = 50 * (1 - 2 * topDelta / overlayHeight) + '%';
-      arrowOffsetLeft = null;
-    } else if (placement === 'top' || placement === 'bottom') {
-      overlayLeft = childOffset.left + (childOffset.width - overlayWidth) / 2;
-
-      if (placement === 'top') {
-        overlayTop = childOffset.top - overlayHeight;
-      } else {
-        overlayTop = childOffset.top + childOffset.height;
-      }
-
-      const leftDelta = this._getLeftDelta(overlayLeft, overlayWidth);
-      overlayLeft += leftDelta;
-      arrowOffsetLeft = 50 * (1 - 2 * leftDelta / overlayWidth) + '%';
-      arrowOffsetTop = null;
-    } else {
-      throw new Error(
-        'calcOverlayPosition(): No such placement of "' +
-        this.props.placement + '" found.'
-      );
-    }
-
-    return {overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop};
-  },
+    let overlay = this.props.overlay;
 
-  _getTopDelta(top, overlayHeight) {
-    const containerDimensions = this._getContainerDimensions();
-    const containerScroll = containerDimensions.scroll;
-    const containerHeight = containerDimensions.height;
+    deprecationWarning('OverlayTrigger.calcOverlayPosition()', 'utils/overlayPositionUtils');
 
-    const padding = this.props.containerPadding;
-    const topEdgeOffset = top - padding - containerScroll;
-    const bottomEdgeOffset = top + padding - containerScroll + overlayHeight;
-
-    if (topEdgeOffset < 0) {
-      return -topEdgeOffset;
-    } else if (bottomEdgeOffset > containerHeight) {
-      return containerHeight - bottomEdgeOffset;
-    } else {
-      return 0;
-    }
-  },
-
-  _getLeftDelta(left, overlayWidth) {
-    const containerDimensions = this._getContainerDimensions();
-    const containerWidth = containerDimensions.width;
-
-    const padding = this.props.containerPadding;
-    const leftEdgeOffset = left - padding;
-    const rightEdgeOffset = left + padding + overlayWidth;
-
-    if (leftEdgeOffset < 0) {
-      return -leftEdgeOffset;
-    } else if (rightEdgeOffset > containerWidth) {
-      return containerWidth - rightEdgeOffset;
-    } else {
-      return 0;
-    }
-  },
-
-  _getContainerDimensions() {
-    const containerNode = this.getContainerDOMNode();
-    let width, height, scroll;
-
-    if (containerNode.tagName === 'BODY') {
-      width = window.innerWidth;
-      height = window.innerHeight;
-      scroll =
-        domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
-        containerNode.scrollTop;
-    } else {
-      width = containerNode.offsetWidth;
-      height = containerNode.offsetHeight;
-      scroll = containerNode.scrollTop;
-    }
-
-    return {width, height, scroll};
+    return position.calcOverlayPosition(
+        overlay.props.placement || this.props.placement
+      , React.findDOMNode(overlay)
+      , React.findDOMNode(this)
+      , React.findDOMNode(overlay.props.container || this.props.container)
+      , overlay.props.containerPadding || this.props.containerPadding
+    );
   },
 
   getPosition() {
-    const node = React.findDOMNode(this);
-    const container = this.getContainerDOMNode();
+    deprecationWarning('OverlayTrigger.getPosition()', 'utils/overlayPositionUtils');
 
-    const offset = container.tagName === 'BODY' ?
-      domUtils.getOffset(node) : domUtils.getPosition(node, container);
+    let overlay = this.props.overlay;
 
-    return {
-      ...offset,
-      height: node.offsetHeight,
-      width: node.offsetWidth
-    };
+    return position.getPosition(
+        React.findDOMNode(this)
+      , React.findDOMNode(overlay.props.container || this.props.container)
+    );
   }
+
 });
 
 /**
diff --git a/src/Popover.js b/src/Popover.js
index c0ea27a6eb..e24b0c51a6 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,23 +1,57 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Popover = React.createClass({
+
   mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
+    /**
+     * An html id attribute, necessary for accessibility
+     * @type {string}
+     * @required
+     */
+    id: CustomPropTypes.isRequiredForA11y(React.PropTypes.string),
+
+    /**
+     * Sets the direction the Popover is positioned towards.
+     */
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+    /**
+     * The "left" position value for the Popover.
+     */
     positionLeft: React.PropTypes.number,
+    /**
+     * The "top" position value for the Popover.
+     */
     positionTop: React.PropTypes.number,
+    /**
+     * The "left" position value for the Popover arrow.
+     */
     arrowOffsetLeft: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+    /**
+     * The "top" position value for the Popover arrow.
+     */
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+    /**
+     * Title text
+     */
     title: React.PropTypes.node,
+    /**
+     * Specify whether the Popover should be use show and hide animations.
+     */
     animation: React.PropTypes.bool
+
+
   },
 
   getDefaultProps() {
@@ -48,7 +82,7 @@ const Popover = React.createClass({
     };
 
     return (
-      <div {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
+      <div role='tooltip' {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
         <div className="arrow" style={arrowStyle} />
         {this.props.title ? this.renderTitle() : null}
         <div className="popover-content">
diff --git a/src/Portal.js b/src/Portal.js
new file mode 100644
index 0000000000..cc8f350701
--- /dev/null
+++ b/src/Portal.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import CustomPropTypes from './utils/CustomPropTypes';
+import { OverlayMixin } from './OverlayMixin';
+
+let Portal = React.createClass({
+
+  displayName: 'Portal',
+
+  propTypes: {
+    /**
+     * The DOM Node that the Component will render it's children into
+     */
+    container: CustomPropTypes.mountable
+  },
+
+  // we use the mixin for now, to avoid duplicating a bunch of code.
+  // when the deprecation is removed we need to move the logic here from OverlayMixin
+  mixins: [ OverlayMixin ],
+
+  renderOverlay() {
+    if (!this.props.children) {
+      return null;
+    }
+
+    return React.Children.only(this.props.children);
+  },
+
+  render() {
+    return null;
+  }
+});
+
+
+export default Portal;
diff --git a/src/Position.js b/src/Position.js
new file mode 100644
index 0000000000..b92c256965
--- /dev/null
+++ b/src/Position.js
@@ -0,0 +1,102 @@
+import React, { cloneElement } from 'react';
+import domUtils from './utils/domUtils';
+import { calcOverlayPosition } from './utils/overlayPositionUtils';
+import CustomPropTypes from './utils/CustomPropTypes';
+
+class Position extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+    this.state = {
+      positionLeft: null,
+      positionTop: null,
+      arrowOffsetLeft: null,
+      arrowOffsetTop: null
+    };
+  }
+
+  componentWillMount(){
+    this._needsFlush = true;
+  }
+
+  componentWillRecieveProps(){
+    this._needsFlush = true;
+  }
+
+  componentDidMount(){
+    this._maybeUpdatePosition();
+  }
+  componentDidUpate(){
+    this._maybeUpdatePosition();
+  }
+
+  render() {
+    let { placement, children } = this.props;
+    let { positionLeft, positionTop, ...arrows } = this.props.target ? this.state : {};
+
+    return cloneElement(
+      React.Children.only(children), {
+        ...arrows,
+        placement,
+        positionTop,
+        positionLeft,
+        style: {
+          ...children.props.style,
+          left: positionLeft,
+          top: positionTop
+        }
+      }
+    );
+  }
+
+  _maybeUpdatePosition(){
+    if ( this._needsFlush ) {
+      this._needsFlush = false;
+      this._updatePosition();
+    }
+  }
+
+  _updatePosition() {
+    if ( this.props.target == null ){
+      return;
+    }
+
+    let target = React.findDOMNode(this.props.target(this.props));
+    let container = React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
+
+    this.setState(
+      calcOverlayPosition(
+          this.props.placement
+        , React.findDOMNode(this)
+        , target
+        , container
+        , this.props.containerPadding));
+  }
+}
+
+Position.propTypes = {
+  /**
+   * The target DOM node the Component is positioned next too.
+   */
+  target:           React.PropTypes.func,
+  /**
+   * The "offsetParent" of the Component
+   */
+  container:        CustomPropTypes.mountable,
+  /**
+   * Distance in pixels the Component should be positioned to the edge of the Container.
+   */
+  containerPadding: React.PropTypes.number,
+  /**
+   * The location that the overlay should be positioned to its target.
+   */
+  placement:        React.PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+};
+
+Position.defaultProps = {
+  containerPadding: 0,
+  placement:        'right'
+};
+
+
+export default Position;
diff --git a/src/Row.js b/src/Row.js
index 35e3364a8b..1bda490933 100644
--- a/src/Row.js
+++ b/src/Row.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Row = React.createClass({
   propTypes: {
-    componentClass: React.PropTypes.node.isRequired
+    componentClass: CustomPropTypes.elementType
   },
 
   getDefaultProps() {
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 1c7dafeb80..640267829e 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -1,21 +1,53 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Tooltip = React.createClass({
   mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
+    /**
+     * An html id attribute, necessary for accessibility
+     * @type {string}
+     * @required
+     */
+    id: CustomPropTypes.isRequiredForA11y(React.PropTypes.string),
+
+    /**
+     * Sets the direction the Tooltip is positioned towards.
+     */
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+    /**
+     * The "left" position value for the Tooltip.
+     */
     positionLeft: React.PropTypes.number,
+    /**
+     * The "top" position value for the Tooltip.
+     */
     positionTop: React.PropTypes.number,
+    /**
+     * The "left" position value for the Tooltip arrow.
+     */
     arrowOffsetLeft: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+    /**
+     * The "top" position value for the Tooltip arrow.
+     */
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+    /**
+     * Title text
+     */
+    title: React.PropTypes.node,
+    /**
+     * Specify whether the Tooltip should be use show and hide animations.
+     */
     animation: React.PropTypes.bool
   },
 
@@ -46,7 +78,7 @@ const Tooltip = React.createClass({
     };
 
     return (
-        <div {...this.props} className={classNames(this.props.className, classes)} style={style}>
+        <div role='tooltip' {...this.props} className={classNames(this.props.className, classes)} style={style}>
           <div className="tooltip-arrow" style={arrowStyle} />
           <div className="tooltip-inner">
             {this.props.children}
diff --git a/src/index.js b/src/index.js
index 5167ae7474..1f4dcefac1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,13 +26,22 @@ export Label from './Label';
 export ListGroup from './ListGroup';
 export ListGroupItem from './ListGroupItem';
 export MenuItem from './MenuItem';
+
 export Modal from './Modal';
 export ModalTrigger from './ModalTrigger';
+export ModalHeader from './ModalHeader';
+export ModalTitle from './ModalTitle';
+export ModalBody from './ModalBody';
+export ModalFooter from './ModalFooter';
+
 export Nav from './Nav';
 export Navbar from './Navbar';
 export NavItem from './NavItem';
+
+export Overlay from './Overlay';
 export OverlayMixin from './OverlayMixin';
 export OverlayTrigger from './OverlayTrigger';
+
 export PageHeader from './PageHeader';
 export PageItem from './PageItem';
 export Pager from './Pager';
@@ -53,5 +62,8 @@ export Thumbnail from './Thumbnail';
 export Tooltip from './Tooltip';
 export Well from './Well';
 
+export Portal from './Portal';
+export Position from './Position';
+
 export * as FormControls from './FormControls';
 export * as utils from './utils';
diff --git a/src/utils/CustomPropTypes.js b/src/utils/CustomPropTypes.js
index bc402d3635..cb57a653cb 100644
--- a/src/utils/CustomPropTypes.js
+++ b/src/utils/CustomPropTypes.js
@@ -1,6 +1,22 @@
+import React from 'react';
+
 const ANONYMOUS = '<<anonymous>>';
 
 const CustomPropTypes = {
+
+  isRequiredForA11y(propType){
+    return function(props, propName, componentName){
+      if (props[propName] === null) {
+        return new Error(
+          'The prop `' + propName + '` is required to make ' + componentName + ' accessible ' +
+            'for users using assistive technologies such as screen readers `'
+        );
+      }
+
+      return propType(props, propName, componentName);
+    };
+  },
+
   /**
    * Checks whether a prop provides a DOM element
    *
@@ -15,6 +31,20 @@ const CustomPropTypes = {
    */
   mountable: createMountableChecker(),
 
+  /**
+   * Checks whether a prop provides a type of element.
+   *
+   * The type of element can be provided in two forms:
+   * - tag name (string)
+   * - a return value of React.createClass(...)
+   *
+   * @param props
+   * @param propName
+   * @param componentName
+   * @returns {Error|undefined}
+   */
+  elementType: createElementTypeChecker(),
+
   /**
    * Checks whether a prop matches a key of an associated object
    *
@@ -38,6 +68,11 @@ const CustomPropTypes = {
   all
 };
 
+function errMsg(props, propName, componentName, msgContinuation) {
+  return `Invalid prop '${propName}' of value '${props[propName]}'` +
+    ` supplied to '${componentName}'${msgContinuation}`;
+}
+
 /**
  * Create chain-able isRequired validator
  *
@@ -50,8 +85,7 @@ function createChainableTypeChecker(validate) {
     if (props[propName] == null) {
       if (isRequired) {
         return new Error(
-          'Required prop `' + propName + '` was not specified in ' +
-            '`' + componentName + '`.'
+          `Required prop '${propName}' was not specified in '${componentName}'.`
         );
       }
     } else {
@@ -70,8 +104,8 @@ function createMountableChecker() {
     if (typeof props[propName] !== 'object' ||
       typeof props[propName].render !== 'function' && props[propName].nodeType !== 1) {
       return new Error(
-        'Invalid prop `' + propName + '` supplied to ' +
-          '`' + componentName + '`, expected a DOM element or an object that has a `render` method'
+        errMsg(props, propName, componentName,
+          ', expected a DOM element or an object that has a `render` method')
       );
     }
   }
@@ -85,8 +119,7 @@ function createKeyOfChecker(obj) {
     if (!obj.hasOwnProperty(propValue)) {
       let valuesString = JSON.stringify(Object.keys(obj));
       return new Error(
-        `Invalid prop '${propName}' of value '${propValue}' ` +
-        `supplied to '${componentName}', expected one of ${valuesString}.`
+        errMsg(props, propName, componentName, `, expected one of ${valuesString}.`)
       );
     }
   }
@@ -135,4 +168,24 @@ function all(propTypes) {
   };
 }
 
+function createElementTypeChecker() {
+  function validate(props, propName, componentName) {
+    let errBeginning = errMsg(props, propName, componentName,
+      '. Expected an Element `type`');
+
+    if (typeof props[propName] !== 'function') {
+      if (React.isValidElement(props[propName])) {
+        return new Error(errBeginning + ', not an actual Element');
+      }
+
+      if (typeof props[propName] !== 'string') {
+        return new Error(errBeginning +
+          ' such as a tag name or return value of React.createClass(...)');
+      }
+    }
+  }
+
+  return createChainableTypeChecker(validate);
+}
+
 export default CustomPropTypes;
diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js
index 31fa7c0340..22e542d0f2 100644
--- a/src/utils/domUtils.js
+++ b/src/utils/domUtils.js
@@ -88,12 +88,25 @@ function getOffset(DOMNode) {
  * @returns {{top: number, left: number}}
  */
 function getPosition(elem, offsetParent) {
+  let offset,
+      parentOffset;
+
   if (window.jQuery) {
-    return window.jQuery(elem).position();
+    if (!offsetParent) {
+      return window.jQuery(elem).position();
+    }
+
+    offset = window.jQuery(elem).offset();
+    parentOffset = window.jQuery(offsetParent).offset();
+
+    // Get element offset relative to offsetParent
+    return {
+      top: offset.top - parentOffset.top,
+      left: offset.left - parentOffset.left
+    };
   }
 
-  let offset,
-      parentOffset = {top: 0, left: 0};
+  parentOffset = {top: 0, left: 0};
 
   // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only offset parent
   if (getComputedStyles(elem).position === 'fixed' ) {
diff --git a/src/utils/overlayPositionUtils.js b/src/utils/overlayPositionUtils.js
new file mode 100644
index 0000000000..eb4a0459ec
--- /dev/null
+++ b/src/utils/overlayPositionUtils.js
@@ -0,0 +1,113 @@
+import domUtils from './domUtils';
+
+const utils = {
+
+  getContainerDimensions(containerNode) {
+    let width, height, scroll;
+
+    if (containerNode.tagName === 'BODY') {
+      width = window.innerWidth;
+      height = window.innerHeight;
+      scroll =
+        domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
+        containerNode.scrollTop;
+    } else {
+      width = containerNode.offsetWidth;
+      height = containerNode.offsetHeight;
+      scroll = containerNode.scrollTop;
+    }
+
+    return {width, height, scroll};
+  },
+
+  getPosition(target, container) {
+    const offset = container.tagName === 'BODY' ?
+      domUtils.getOffset(target) : domUtils.getPosition(target, container);
+
+    return {
+      ...offset, // eslint-disable-line object-shorthand
+      height: target.offsetHeight,
+      width: target.offsetWidth
+    };
+  },
+
+  calcOverlayPosition(placement, overlayNode, target, container, padding) {
+    const childOffset = utils.getPosition(target, container);
+
+    const overlayHeight = overlayNode.offsetHeight;
+    const overlayWidth = overlayNode.offsetWidth;
+
+    let positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop;
+
+    if (placement === 'left' || placement === 'right') {
+      positionTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
+
+      if (placement === 'left') {
+        positionLeft = childOffset.left - overlayWidth;
+      } else {
+        positionLeft = childOffset.left + childOffset.width;
+      }
+
+      const topDelta = getTopDelta(positionTop, overlayHeight, container, padding);
+
+      positionTop += topDelta;
+      arrowOffsetTop = 50 * (1 - 2 * topDelta / overlayHeight) + '%';
+      arrowOffsetLeft = null;
+
+    } else if (placement === 'top' || placement === 'bottom') {
+      positionLeft = childOffset.left + (childOffset.width - overlayWidth) / 2;
+
+      if (placement === 'top') {
+        positionTop = childOffset.top - overlayHeight;
+      } else {
+        positionTop = childOffset.top + childOffset.height;
+      }
+
+      const leftDelta = getLeftDelta(positionLeft, overlayWidth, container, padding);
+      positionLeft += leftDelta;
+      arrowOffsetLeft = 50 * (1 - 2 * leftDelta / overlayWidth) + '%';
+      arrowOffsetTop = null;
+    } else {
+      throw new Error(
+        `calcOverlayPosition(): No such placement of "${placement }" found.`
+      );
+    }
+
+    return { positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop };
+  }
+};
+
+
+function getTopDelta(top, overlayHeight, container, padding) {
+  const containerDimensions = utils.getContainerDimensions(container);
+  const containerScroll = containerDimensions.scroll;
+  const containerHeight = containerDimensions.height;
+
+  const topEdgeOffset = top - padding - containerScroll;
+  const bottomEdgeOffset = top + padding - containerScroll + overlayHeight;
+
+  if (topEdgeOffset < 0) {
+    return -topEdgeOffset;
+  } else if (bottomEdgeOffset > containerHeight) {
+    return containerHeight - bottomEdgeOffset;
+  } else {
+    return 0;
+  }
+}
+
+function getLeftDelta(left, overlayWidth, container, padding) {
+  const containerDimensions = utils.getContainerDimensions(container);
+  const containerWidth = containerDimensions.width;
+
+  const leftEdgeOffset = left - padding;
+  const rightEdgeOffset = left + padding + overlayWidth;
+
+  if (leftEdgeOffset < 0) {
+    return -leftEdgeOffset;
+  } else if (rightEdgeOffset > containerWidth) {
+    return containerWidth - rightEdgeOffset;
+  } else {
+    return 0;
+  }
+}
+export default utils;
diff --git a/test/JumbotronSpec.js b/test/JumbotronSpec.js
index b0749c1939..460b43153f 100644
--- a/test/JumbotronSpec.js
+++ b/test/JumbotronSpec.js
@@ -9,6 +9,8 @@ describe('Jumbotron', function () {
         <strong>Content</strong>
       </Jumbotron>
     );
+
+    assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
   });
 
@@ -20,4 +22,13 @@ describe('Jumbotron', function () {
     );
     assert.ok(React.findDOMNode(instance).className.match(/\bjumbotron\b/));
   });
+
+  it('Should override node class', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Jumbotron componentClass='section'>
+        <strong>Content</strong>
+      </Jumbotron>
+    );
+    assert.equal(React.findDOMNode(instance).nodeName, 'SECTION');
+  });
 });
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 0e516d52dc..3d425c14cd 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
+import { shouldWarn } from './helpers';
 
 describe('Modal', function () {
 
   it('Should render the modal content', function() {
     let noOp = function () {};
     let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onRequestHide={noOp}>
+      <Modal onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     );
@@ -18,21 +19,19 @@ describe('Modal', function () {
 
     let Container = React.createClass({
       getInitialState() {
-        return {modalOpen: true};
+        return { modalOpen: true };
       },
       handleCloseModal() {
-        this.setState({modalOpen: false});
+        this.setState({ modalOpen: false });
       },
       render() {
-        if (this.state.modalOpen) {
-          return (
-            <Modal onRequestHide={this.handleCloseModal} container={this}>
+        return (
+          <div>
+            <Modal show={this.state.modalOpen} onHide={this.handleCloseModal} container={this}>
               <strong>Message</strong>
             </Modal>
-          );
-        } else {
-          return <span/>;
-        }
+          </div>
+        );
       }
     });
     let instance = ReactTestUtils.renderIntoDocument(
@@ -41,6 +40,7 @@ describe('Modal', function () {
     assert.ok(React.findDOMNode(instance).className.match(/\modal-open\b/));
 
     let backdrop = React.findDOMNode(instance).getElementsByClassName('modal-backdrop')[0];
+
     ReactTestUtils.Simulate.click(backdrop);
     setTimeout(function(){
       assert.equal(React.findDOMNode(instance).className.length, 0);
@@ -52,7 +52,7 @@ describe('Modal', function () {
   it('Should close the modal when the backdrop is clicked', function (done) {
     let doneOp = function () { done(); };
     let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onRequestHide={doneOp}>
+      <Modal onHide={doneOp}>
         <strong>Message</strong>
       </Modal>
     );
@@ -64,7 +64,7 @@ describe('Modal', function () {
   it('Should close the modal when the modal background is clicked', function (done) {
     let doneOp = function () { done(); };
     let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onRequestHide={doneOp}>
+      <Modal onHide={doneOp}>
         <strong>Message</strong>
       </Modal>
     );
@@ -76,7 +76,7 @@ describe('Modal', function () {
   it('Should pass bsSize to the dialog', function () {
     let noOp = function () {};
     let instance = ReactTestUtils.renderIntoDocument(
-      <Modal bsSize='small' onRequestHide={noOp}>
+      <Modal bsSize='small' onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     );
@@ -88,7 +88,7 @@ describe('Modal', function () {
   it('Should pass dialogClassName to the dialog', function () {
     let noOp = function () {};
     let instance = ReactTestUtils.renderIntoDocument(
-      <Modal dialogClassName="testCss" onRequestHide={noOp}>
+      <Modal dialogClassName="testCss" onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     );
@@ -133,7 +133,7 @@ describe('Modal', function () {
         render() {
           if (this.state.modalOpen) {
             return (
-              <Modal onRequestHide={this.handleCloseModal} container={this}>
+              <Modal onHide={this.handleCloseModal} container={this}>
                 <strong>Message</strong>
               </Modal>
             );
@@ -156,7 +156,7 @@ describe('Modal', function () {
       }, 0);
     });
 
-    it('Should not focus on the Modal when enforceFocus is false', function (done) {
+    it('Should not focus on the Modal when autoFocus is false', function (done) {
 
       document.activeElement.should.equal(focusableContainer);
 
@@ -167,7 +167,8 @@ describe('Modal', function () {
         render() {
           if (this.state.modalOpen) {
             return (
-              <Modal enforceFocus={false} onRequestHide={()=>{}} container={this}>
+
+              <Modal autoFocus={false} onHide={()=>{}} container={this}>
                 <strong>Message</strong>
               </Modal>
             );
@@ -185,7 +186,67 @@ describe('Modal', function () {
         done();
       }, 0);
     });
+
+    it('Should not focus Modal when child has focus', function (done) {
+
+      document.activeElement.should.equal(focusableContainer);
+
+      let Container = React.createClass({
+        getInitialState() {
+          return {modalOpen: true};
+        },
+        render() {
+          if (this.state.modalOpen) {
+            return (
+              <Modal onRequestHide={()=>{}} container={this}>
+                <input autoFocus />
+              </Modal>
+            );
+          } else {
+            return <span/>;
+          }
+        }
+      });
+
+      let instance = React.render(<Container />, focusableContainer);
+
+      setTimeout(function () {
+        let input = React.findDOMNode(
+          ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input'));
+
+        document.activeElement.should.equal(input);
+        done();
+      }, 0);
+    });
   });
 
 
+  describe('deprecations', function(){
+    it('Should render the modal header and title', function() {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Modal title='hello' onHide={()=>{}}>
+          <strong>Message</strong>
+        </Modal>
+      );
+
+      (()=> {
+        ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'button');
+        ReactTestUtils.findRenderedComponentWithType(instance, Modal.Header);
+        ReactTestUtils.findRenderedComponentWithType(instance, Modal.Title);
+      }).should.not.throw();
+
+      shouldWarn(
+        'Specifying `closeButton` or `title` Modal props is deprecated');
+    });
+
+    it('Should warn about onRequestHide', function() {
+      ReactTestUtils.renderIntoDocument(
+        <Modal onRequestHide={()=>{}}>
+          <Modal.Header closeButton/>
+        </Modal>
+      );
+
+      shouldWarn('The Modal prop `onRequestHide` is deprecated');
+    });
+  });
 });
diff --git a/test/ModalTriggerSpec.js b/test/ModalTriggerSpec.js
index dbdcc8af46..9485f402b8 100644
--- a/test/ModalTriggerSpec.js
+++ b/test/ModalTriggerSpec.js
@@ -1,8 +1,27 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ModalTrigger from '../src/ModalTrigger';
+import { shouldWarn } from './helpers';
+
 
 describe('ModalTrigger', function() {
+
+  afterEach(()=> {
+    if ( console.warn.called ) {
+      shouldWarn('The `ModalTrigger` component is deprecated');
+    }
+  });
+
+  it('Should warn about deprecated Component', function() {
+    ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+
+    shouldWarn('The `ModalTrigger` component is deprecated');
+  });
+
   it('Should create ModalTrigger element', function() {
     const instance = ReactTestUtils.renderIntoDocument(
       <ModalTrigger modal={<div>test</div>}>
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index da1d32607d..43ea8073be 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -61,7 +61,7 @@ describe('Nav', function () {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar componentClass={'header'}/>
     );
-    assert.ok(React.findDOMNode(instance).nodeName, 'HEADER');
+    assert.equal(React.findDOMNode(instance).nodeName, 'HEADER');
   });
 
   it('Should add header with brand', function () {
diff --git a/test/OverlayMixinSpec.js b/test/OverlayMixinSpec.js
index d1a52fd282..66818d48f5 100644
--- a/test/OverlayMixinSpec.js
+++ b/test/OverlayMixinSpec.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import OverlayMixin from '../src/OverlayMixin';
+import { shouldWarn } from './helpers';
 
 describe('OverlayMixin', function () {
   let instance;
@@ -17,10 +18,15 @@ describe('OverlayMixin', function () {
     }
   });
 
+
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
       React.unmountComponentAtNode(React.findDOMNode(instance));
     }
+
+    if ( console.warn.called ) {
+      shouldWarn('Overlay mixin is deprecated');
+    }
   });
 
   it('Should render overlay into container (DOMNode)', function() {
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 75ae2fcf40..768ad20c7c 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -79,103 +79,6 @@ describe('OverlayTrigger', function() {
     contextSpy.calledWith('value').should.be.true;
   });
 
-  describe('#calcOverlayPosition()', function() {
-    [
-      {
-        placement: 'left',
-        noOffset: [50, 300, null, '50%'],
-        offsetBefore: [-200, 150, null, '0%'],
-        offsetAfter: [300, 450, null, '100%']
-      },
-      {
-        placement: 'top',
-        noOffset: [200, 150, '50%', null],
-        offsetBefore: [50, -100, '0%', null],
-        offsetAfter: [350, 400, '100%', null]
-      },
-      {
-        placement: 'bottom',
-        noOffset: [200, 450, '50%', null],
-        offsetBefore: [50, 200, '0%', null],
-        offsetAfter: [350, 700, '100%', null]
-      },
-      {
-        placement: 'right',
-        noOffset: [350, 300, null, '50%'],
-        offsetBefore: [100, 150, null, '0%'],
-        offsetAfter: [600, 450, null, '100%']
-      }
-    ].forEach(function(testCase) {
-      describe(`placement = ${testCase.placement}`, function() {
-        let instance;
-
-        beforeEach(function() {
-          instance = ReactTestUtils.renderIntoDocument(
-            <OverlayTrigger
-              placement={testCase.placement}
-              containerPadding={50}
-              overlay={<div>test</div>}
-            >
-              <button>button</button>
-            </OverlayTrigger>
-          );
-
-          instance.getOverlayDOMNode = sinon.stub().returns({
-            offsetHeight: 200, offsetWidth: 200
-          });
-          instance._getContainerDimensions = sinon.stub().returns({
-            width: 600, height: 600, scroll: 100
-          });
-        });
-
-        function checkPosition(expected) {
-          const [
-            overlayLeft,
-            overlayTop,
-            arrowOffsetLeft,
-            arrowOffsetTop
-          ] = expected;
-
-          it('Should calculate the correct position', function() {
-            instance.calcOverlayPosition().should.eql(
-              {overlayLeft, overlayTop, arrowOffsetLeft, arrowOffsetTop}
-            );
-          });
-        }
-
-        describe('no viewport offset', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 250, top: 350, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.noOffset);
-        });
-
-        describe('viewport offset before', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 0, top: 100, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetBefore);
-        });
-
-        describe('viewport offset after', function() {
-          beforeEach(function() {
-            instance.getPosition = sinon.stub().returns({
-              left: 500, top: 600, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetAfter);
-        });
-      });
-    });
-  });
-
   describe('overlay types', function() {
     [
       {
@@ -227,8 +130,8 @@ describe('OverlayTrigger', function() {
             <OverlayTrigger
               overlay={<div>test</div>}
               trigger='click' rootClose={testCase.rootClose}
-              >
-              <button>button</button>
+            >
+            <button>button</button>
             </OverlayTrigger>
           );
           const overlayTrigger = React.findDOMNode(instance);
diff --git a/test/PortalSpec.js b/test/PortalSpec.js
new file mode 100644
index 0000000000..66a1b49fc0
--- /dev/null
+++ b/test/PortalSpec.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Portal from '../src/Portal';
+
+describe('Portal', function () {
+  let instance;
+
+  let Overlay = React.createClass({
+    render() {
+      return (
+        <div>
+          <Portal ref='p' {...this.props}>{this.props.overlay}</Portal>
+        </div>
+      );
+    },
+    getOverlayDOMNode(){
+      return this.refs.p.getOverlayDOMNode();
+    }
+  });
+
+  afterEach(function() {
+    if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
+      React.unmountComponentAtNode(React.findDOMNode(instance));
+    }
+  });
+
+  it('Should render overlay into container (DOMNode)', function() {
+    let container = document.createElement('div');
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <Overlay container={container} overlay={<div id="test1" />} />
+    );
+
+    assert.equal(container.querySelectorAll('#test1').length, 1);
+  });
+
+  it('Should render overlay into container (ReactComponent)', function() {
+    let Container = React.createClass({
+      render() {
+        return <Overlay container={this} overlay={<div id="test1" />} />;
+      }
+    });
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <Container />
+    );
+
+    assert.equal(React.findDOMNode(instance).querySelectorAll('#test1').length, 1);
+  });
+
+  it('Should not render a null overlay', function() {
+    let Container = React.createClass({
+      render() {
+        return <Overlay ref='overlay' container={this} overlay={null} />;
+      }
+    });
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <Container />
+    );
+
+    assert.equal(instance.refs.overlay.getOverlayDOMNode(), null);
+  });
+
+  it('Should render only an overlay', function() {
+    let OnlyOverlay = React.createClass({
+      render() {
+        return <Portal ref='p' {...this.props}>{this.props.overlay}</Portal>;
+      }
+    });
+
+    let overlayInstance = ReactTestUtils.renderIntoDocument(
+      <OnlyOverlay overlay={<div id="test1" />} />
+    );
+
+    assert.equal(overlayInstance.refs.p.getOverlayDOMNode().nodeName, 'DIV');
+  });
+});
diff --git a/test/index.js b/test/index.js
index b3998914c4..73c1d4ba3e 100644
--- a/test/index.js
+++ b/test/index.js
@@ -19,5 +19,9 @@ describe('Process environment for tests', function () {
   });
 });
 
+// Ensure all files in src folder are loaded for proper code coverage analysis
+const srcContext = require.context('../src', true, /.*\.js$/);
+srcContext.keys().forEach(srcContext);
+
 const testsContext = require.context('.', true, /Spec$/);
 testsContext.keys().forEach(testsContext);
diff --git a/test/utils/CustomPropTypesSpec.js b/test/utils/CustomPropTypesSpec.js
index 9e4e78de07..ef6d8e152e 100644
--- a/test/utils/CustomPropTypesSpec.js
+++ b/test/utils/CustomPropTypesSpec.js
@@ -2,46 +2,82 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import CustomPropTypes from '../../src/utils/CustomPropTypes';
 
+function isChainableAndUndefinedOK(validatorUnderTest) {
+  it('Should validate OK with undefined or null values', function() {
+    assert.isUndefined(validatorUnderTest({}, 'p', 'Component'));
+    assert.isUndefined(validatorUnderTest({p: null}, 'p', 'Component'));
+  });
+
+  it('Should be able to chain', function() {
+    let err = validatorUnderTest.isRequired({}, 'p', 'Component');
+    assert.instanceOf(err, Error);
+    assert.include(err.message, 'Required prop');
+    assert.include(err.message, 'was not specified in');
+  });
+}
+
 describe('CustomPropTypes', function() {
 
   describe('mountable', function () {
     function validate(prop) {
       return CustomPropTypes.mountable({p: prop}, 'p', 'Component');
     }
-    function validateRequired(prop) {
-      return CustomPropTypes.mountable.isRequired({p: prop}, 'p', 'Component');
-    }
+
+    isChainableAndUndefinedOK(CustomPropTypes.mountable);
 
     it('Should return error with non mountable values', function() {
-      assert.instanceOf(validateRequired(), Error);
-      assert.instanceOf(validateRequired(null), Error);
-      assert.instanceOf(validate({}), Error);
+      let err = validate({});
+      assert.instanceOf(err, Error);
+      assert.include(err.message, 'expected a DOM element or an object that has a `render` method');
     });
+
     it('Should return undefined with mountable values', function() {
-      assert.isUndefined(validate());
-      assert.isUndefined(validate(null));
       assert.isUndefined(validate(document.createElement('div')));
       assert.isUndefined(validate(document.body));
       assert.isUndefined(validate(ReactTestUtils.renderIntoDocument(<div />)));
     });
   });
 
+  describe('elementType', function () {
+    function validate(prop) {
+      return CustomPropTypes.elementType({p: prop}, 'p', 'TestComponent');
+    }
+
+    isChainableAndUndefinedOK(CustomPropTypes.elementType);
+
+    it('Should validate OK with elementType values', function() {
+      assert.isUndefined(validate('span'));
+      assert.isUndefined(validate(function(){}));
+    });
+
+    it('Should return error with not a string or function values', function() {
+      let err = validate({});
+      assert.instanceOf(err, Error);
+      assert.include(err.message, 'Expected an Element `type` such as a tag name or return value of React.createClass(...)');
+    });
+
+    it('Should return error with react element', function() {
+      let err = validate(React.createElement('span'));
+      assert.instanceOf(err, Error);
+      assert.include(err.message, 'Expected an Element `type`, not an actual Element');
+    });
+  });
+
   describe('keyOf', function () {
     let obj = {'foo': 1};
     function validate(prop) {
       return CustomPropTypes.keyOf(obj)({p: prop}, 'p', 'Component');
     }
-    function validateRequired(prop) {
-      return CustomPropTypes.keyOf(obj).isRequired({p: prop}, 'p', 'Component');
-    }
+
+    isChainableAndUndefinedOK(CustomPropTypes.keyOf(obj));
 
     it('Should return error with non-key values', function() {
-      assert.instanceOf(validateRequired(), Error);
-      assert.instanceOf(validateRequired(null), Error);
-      assert.instanceOf(validate('bar'), Error);
+      let err = validate('bar');
+      assert.instanceOf(err, Error);
+      assert.include(err.message, 'expected one of ["foo"]');
     });
-    it('Should return undefined with key values', function() {
-      assert.isUndefined(validate());
+
+    it('Should validate OK with key values', function() {
       assert.isUndefined(validate('foo'));
       obj.bar = 2;
       assert.isUndefined(validate('bar'));
@@ -55,16 +91,16 @@ describe('CustomPropTypes', function() {
       return CustomPropTypes.singlePropFrom(propList)(testProps, 'value', 'Component');
     }
 
-    it('Should return undefined if only one listed prop in used', function () {
+    it('Should validate OK if only one listed prop in used', function () {
       const testProps = {value: 5};
 
       assert.isUndefined(validate(testProps));
     });
 
     it('Should return error if multiple of the listed properties have values', function () {
-      const testProps = {value: 5, children: 5};
-
-      validate(testProps).should.be.instanceOf(Error);
+      let err = validate({value: 5, children: 5});
+      assert.instanceOf(err, Error);
+      assert.include(err.message, 'only one of the following may be provided: value and children');
     });
   });
 
diff --git a/test/utils/overlayPositionUtilsSpec.js b/test/utils/overlayPositionUtilsSpec.js
new file mode 100644
index 0000000000..50703e4b4c
--- /dev/null
+++ b/test/utils/overlayPositionUtilsSpec.js
@@ -0,0 +1,92 @@
+import position from '../../src/utils/overlayPositionUtils';
+
+describe('calcOverlayPosition()', function() {
+    [
+      {
+        placement: 'left',
+        noOffset: [50, 300, null, '50%'],
+        offsetBefore: [-200, 150, null, '0%'],
+        offsetAfter: [300, 450, null, '100%']
+      },
+      {
+        placement: 'top',
+        noOffset: [200, 150, '50%', null],
+        offsetBefore: [50, -100, '0%', null],
+        offsetAfter: [350, 400, '100%', null]
+      },
+      {
+        placement: 'bottom',
+        noOffset: [200, 450, '50%', null],
+        offsetBefore: [50, 200, '0%', null],
+        offsetAfter: [350, 700, '100%', null]
+      },
+      {
+        placement: 'right',
+        noOffset: [350, 300, null, '50%'],
+        offsetBefore: [100, 150, null, '0%'],
+        offsetAfter: [600, 450, null, '100%']
+      }
+    ].forEach(function(testCase) {
+
+      describe(`placement = ${testCase.placement}`, function() {
+        let overlayStub, padding, placement;
+
+        beforeEach(function() {
+          placement = testCase.placement;
+          padding = 50;
+          overlayStub = {
+            offsetHeight: 200, offsetWidth: 200
+          };
+
+          position.getContainerDimensions = sinon.stub().returns({
+            width: 600, height: 600, scroll: 100
+          });
+        });
+
+        function checkPosition(expected) {
+          const [
+            positionLeft,
+            positionTop,
+            arrowOffsetLeft,
+            arrowOffsetTop
+          ] = expected;
+
+          it('Should calculate the correct position', function() {
+            position.calcOverlayPosition(placement, overlayStub, {}, {}, padding).should.eql(
+              { positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop }
+            );
+          });
+        }
+
+        describe('no viewport offset', function() {
+          beforeEach(function() {
+            position.getPosition = sinon.stub().returns({
+              left: 250, top: 350, width: 100, height: 100
+            });
+          });
+
+          checkPosition(testCase.noOffset);
+        });
+
+        describe('viewport offset before', function() {
+          beforeEach(function() {
+            position.getPosition = sinon.stub().returns({
+              left: 0, top: 100, width: 100, height: 100
+            });
+          });
+
+          checkPosition(testCase.offsetBefore);
+        });
+
+        describe('viewport offset after', function() {
+          beforeEach(function() {
+            position.getPosition = sinon.stub().returns({
+              left: 500, top: 600, width: 100, height: 100
+            });
+          });
+
+          checkPosition(testCase.offsetAfter);
+        });
+      });
+    });
+  });
diff --git a/tools/promisify.js b/tools/promisify.js
new file mode 100644
index 0000000000..649829c506
--- /dev/null
+++ b/tools/promisify.js
@@ -0,0 +1,17 @@
+
+export default function promisify(fn){
+  return function (...args){
+    return new Promise(function(resolve, reject){
+
+      function finish(err, result){
+        if (err) {
+          return reject(err);
+        }
+        resolve(result);
+      }
+
+      fn.apply(null, args.concat(finish));
+    });
+
+  };
+}

From 4fb7e0d64b4ef3d2c97157213736ea7a5aa76d47 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 5 Jul 2015 21:09:59 -0400
Subject: [PATCH 022/128] [changed] Remove Overlay and Modal deprecations

---
 docs/examples/{ModalTrigger.js => Modal.js} |   0
 docs/examples/ModalCustomSizing.js          |  80 ++++---
 docs/src/ComponentsPage.js                  |   2 +-
 docs/src/ReactPlayground.js                 |  11 +-
 docs/src/Samples.js                         |   2 +-
 src/Input.js                                |   2 +-
 src/Modal.js                                |  95 ++------
 src/ModalTrigger.js                         | 121 ----------
 src/OverlayMixin.js                         |  95 --------
 src/OverlayTrigger.js                       |  65 ++----
 src/Portal.js                               |  77 +++++-
 src/index.js                                |   2 -
 test/FactoriesSpec.js                       |   2 +-
 test/ModalSpec.js                           | 244 ++++++++------------
 test/ModalTriggerSpec.js                    | 123 ----------
 test/OverlayMixinSpec.js                    |  89 -------
 test/helpers.js                             |  25 ++
 test/server/ModalSpec.js                    |   2 +-
 18 files changed, 278 insertions(+), 759 deletions(-)
 rename docs/examples/{ModalTrigger.js => Modal.js} (100%)
 delete mode 100644 src/ModalTrigger.js
 delete mode 100644 src/OverlayMixin.js
 delete mode 100644 test/ModalTriggerSpec.js
 delete mode 100644 test/OverlayMixinSpec.js

diff --git a/docs/examples/ModalTrigger.js b/docs/examples/Modal.js
similarity index 100%
rename from docs/examples/ModalTrigger.js
rename to docs/examples/Modal.js
diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
index 4122e352d4..701d67338a 100644
--- a/docs/examples/ModalCustomSizing.js
+++ b/docs/examples/ModalCustomSizing.js
@@ -1,40 +1,52 @@
-const MyModal = React.createClass({
-  render() {
+const Example = React.createClass({
+
+  getInitialState(){
+    return { show: false };
+  },
+
+  render(){
+    let close = e => this.setState({ show: false });
+
     return (
-      <Modal {...this.props} dialogClassName='custom-modal'>
-        <Modal.Header closeButton>
-          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <h4>Wrapped Text</h4>
-          <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
-           Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
-           odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis.
-           Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus
-           fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum
-           fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum
-           repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia
-           cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos.
-           Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat
-           reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae
-           distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat
-           ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit
-           magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
-           magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
-           similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.props.onHide}>Close</Button>
-        </Modal.Footer>
-      </Modal>
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ show: true })}>
+          Launch demo modal
+        </Button>
+
+        <Modal
+          {...this.props}
+          onHide={close}
+          dialogClassName='custom-modal'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Wrapped Text</h4>
+            <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
+             Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
+             odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis.
+             Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus
+             fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum
+             fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum
+             repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia
+             cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos.
+             Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat
+             reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae
+             distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat
+             ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit
+             magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
+             magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
+             similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </ButtonToolbar>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
 
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index c3166eca4d..8e656f7048 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -278,7 +278,7 @@ const ComponentsPage = React.createClass({
 
                   <h3 id='modals-live'>Live demo</h3>
                   <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
-                  <ReactPlayground codeText={Samples.ModalTrigger} />
+                  <ReactPlayground codeText={Samples.Modal} />
 
                   <h3 id='modals-contained'>Contained Modal</h3>
                   <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 02e170c48f..4ab4cd230b 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -26,9 +26,8 @@ import * as modNavbar from '../../src/Navbar';
 import * as modNavItem from '../../src/NavItem';
 import * as modMenuItem from '../../src/MenuItem';
 import * as modModal from '../../src/Modal';
-import * as modModalTrigger from '../../src/ModalTrigger';
 import * as modOverlayTrigger from '../../src/OverlayTrigger';
-import * as modOverlayMixin from '../../src/OverlayMixin';
+
 import * as modPageHeader from '../../src/PageHeader';
 import * as modPageItem from '../../src/PageItem';
 import * as modPager from '../../src/Pager';
@@ -36,7 +35,7 @@ import * as modPagination from '../../src/Pagination';
 import * as modPanel from '../../src/Panel';
 import * as modPanelGroup from '../../src/PanelGroup';
 import * as modPopover from '../../src/Popover';
-//import * as modPopoverTrigger from '../../src/PopoverTrigger';
+
 import * as modProgressBar from '../../src/ProgressBar';
 import * as modRow from '../../src/Row';
 import * as modSplitButton from '../../src/SplitButton';
@@ -45,7 +44,7 @@ import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
 import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
-//import * as modTooltipTrigger from '../../src/TooltipTrigger';
+
 import * as modWell from '../../src/Well';
 
 import * as modPortal from '../../src/Portal';
@@ -88,9 +87,9 @@ const Navbar = modNavbar.default;
 const NavItem = modNavItem.default;
 const MenuItem = modMenuItem.default;
 const Modal = modModal.default;
-const ModalTrigger = modModalTrigger.default;
+
 const OverlayTrigger = modOverlayTrigger.default;
-const OverlayMixin = modOverlayMixin.default;
+
 const PageHeader = modPageHeader.default;
 const PageItem = modPageItem.default;
 const Pagination = modPagination.default;
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index 47e6720802..e6401dc08f 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -31,7 +31,7 @@ export default {
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
-  ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
+  Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
 
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
diff --git a/src/Input.js b/src/Input.js
index d08eac7b35..ec1917da8e 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -5,7 +5,7 @@ import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
   render() {
-    if (this.props.type === 'static') {
+    if (this.props.type === 'static') { //eslint-disable-line react/prop-types
       deprecationWarning('Input type=static', 'StaticText');
       return <FormControls.Static {...this.props} />;
     }
diff --git a/src/Modal.js b/src/Modal.js
index 70b5945bab..3816318c51 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -7,7 +7,6 @@ import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
-import deprecationWarning from './utils/deprecationWarning';
 
 import Portal from './Portal';
 
@@ -37,23 +36,6 @@ function getContainer(context){
     domUtils.ownerDocument(context).body;
 }
 
-function requiredIfNot(key, type){
-  return function(props, propName, componentName){
-    let propType = type;
-
-    if ( props[ key] === undefined ){
-      propType = propType.isRequired;
-    }
-    return propType(props, propName, componentName);
-  };
-}
-
-function toChildArray(children){
-  let result = [];
-  React.Children.forEach(children, c => result.push(c));
-  return result;
-}
-
 
 let currentFocusListener;
 
@@ -113,14 +95,10 @@ function getScrollbarSize(){
 
 const ModalMarkup = React.createClass({
 
-  mixins: [BootstrapMixin, FadeMixin],
+  mixins: [ BootstrapMixin, FadeMixin ],
 
   propTypes: {
-    /**
-     * The Modal title text
-     * @deprecated Use the "Modal.Header" component instead
-     */
-    title: React.PropTypes.node,
+
     /**
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
      */
@@ -130,28 +108,17 @@ const ModalMarkup = React.createClass({
      */
     keyboard: React.PropTypes.bool,
 
-    /**
-     * Specify whether the Modal heading should contain a close button
-     * @deprecated Use the "Modal.Header" Component instead
-     */
-    closeButton: React.PropTypes.bool,
-
     /**
      * Open and close the Modal with a slide and fade animation.
      */
     animation: React.PropTypes.bool,
+
     /**
      * A Callback fired when the header closeButton or non-static backdrop is clicked.
      * @type {function}
      * @required
      */
-    onHide: requiredIfNot('onRequestHide', React.PropTypes.func),
-
-    /**
-     * A Callback fired when the header closeButton or non-static backdrop is clicked.
-     * @deprecated Replaced by `onHide`.
-     */
-    onRequestHide:  React.PropTypes.func,
+    onHide: React.PropTypes.func.isRequired,
 
     /**
      * A css class to apply to the Modal dialog DOM node.
@@ -226,28 +193,12 @@ const ModalMarkup = React.createClass({
   },
 
   renderContent() {
-    let children = toChildArray(this.props.children); // b/c createFragment is in addons and children can be a key'd object
-    let hasNewHeader = children.some( c => c.type.__isModalHeader);
-
-    if (!hasNewHeader && this.props.title != null){
-      deprecationWarning(
-        'Specifying `closeButton` or `title` Modal props',
-        'the new Modal.Header, and Modal.Title components');
-
-      children.unshift(
-        <Header closeButton={this.props.closeButton} onHide={this._getHide()}>
-          { this.props.title &&
-            <Title>{this.props.title}</Title>
-          }
-        </Header>
-      );
-    }
 
-    return React.Children.map(children, child => {
+    return React.Children.map(this.props.children, child => {
       // TODO: use context in 0.14
       if (child.type.__isModalHeader) {
         return cloneElement(child, {
-          onHide: createChainedFunction(this._getHide(), child.props.onHide)
+          onHide: createChainedFunction(this.props.onHide, child.props.onHide)
         });
       }
       return child;
@@ -272,14 +223,6 @@ const ModalMarkup = React.createClass({
     );
   },
 
-  _getHide(){
-    if ( !this.props.onHide && this.props.onRequestHide){
-      deprecationWarning('The Modal prop `onRequestHide`', 'the `onHide` prop');
-    }
-
-    return this.props.onHide || this.props.onRequestHide;
-  },
-
   iosClickHack() {
     // IOS only allows click events to be delegated to the document on elements
     // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
@@ -360,12 +303,12 @@ const ModalMarkup = React.createClass({
       return;
     }
 
-    this._getHide()();
+    this.props.onHide();
   },
 
   handleDocumentKeyUp(e) {
     if (this.props.keyboard && e.keyCode === 27) {
-      this._getHide()();
+      this.props.onHide();
     }
   },
 
@@ -438,26 +381,18 @@ const Modal = React.createClass({
     ...ModalMarkup.propTypes
   },
 
-  defaultProps: {
-    show: null
-  },
-
   render() {
     let { show, ...props } = this.props;
 
     let modal = (
-      <ModalMarkup {...props}>{this.props.children}</ModalMarkup>
+      <ModalMarkup {...props} ref='modal'>{this.props.children}</ModalMarkup>
+    );
+
+    return (
+      <Portal container={props.container} >
+        { show && modal }
+      </Portal>
     );
-    // I can't think of another way to not break back compat while defaulting container
-    if ( !this.props.__isUsedInModalTrigger && show != null ){
-      return (
-        <Portal container={props.container} >
-          { show && modal }
-        </Portal>
-      );
-    } else {
-      return modal;
-    }
   }
 });
 
diff --git a/src/ModalTrigger.js b/src/ModalTrigger.js
deleted file mode 100644
index e1087dc384..0000000000
--- a/src/ModalTrigger.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { cloneElement } from 'react';
-import CustomPropTypes from './utils/CustomPropTypes';
-import deprecationWarning from './utils/deprecationWarning';
-
-import createChainedFunction from './utils/createChainedFunction';
-import createContextWrapper from './utils/createContextWrapper';
-import { OverlayMixin } from './OverlayMixin';
-
-function createHideDepreciationWrapper(hide){
-  return function(...args){
-    deprecationWarning(
-        'The Modal prop `onRequestHide`', 'the `onHide` prop');
-
-    return hide(...args);
-  };
-}
-
-const ModalTrigger = React.createClass({
-
-  mixins: [ OverlayMixin ],
-
-  propTypes: {
-    modal: React.PropTypes.node.isRequired,
-    /**
-     * The DOM Node that the Component will render it's children into
-     */
-    container: CustomPropTypes.mountable,
-    onBlur: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    onMouseOut: React.PropTypes.func,
-    onMouseOver: React.PropTypes.func
-  },
-
-
-  getInitialState() {
-    return {
-      isOverlayShown: false
-    };
-  },
-
-  show() {
-    this.setState({
-      isOverlayShown: true
-    });
-  },
-
-  hide() {
-    this.setState({
-      isOverlayShown: false
-    });
-  },
-
-  toggle() {
-    this.setState({
-      isOverlayShown: !this.state.isOverlayShown
-    });
-  },
-
-  renderOverlay() {
-    let modal = this.props.modal;
-
-    if (!this.state.isOverlayShown) {
-      return <span />;
-    }
-
-    return cloneElement(
-      modal,
-      {
-        onHide: this.hide,
-        onRequestHide: createHideDepreciationWrapper(this.hide),
-        __isUsedInModalTrigger: true
-      }
-    );
-  },
-
-  render() {
-    let child = React.Children.only(this.props.children);
-    let props = {};
-
-    props.onClick = createChainedFunction(child.props.onClick, this.toggle);
-    props.onMouseOver = createChainedFunction(child.props.onMouseOver, this.props.onMouseOver);
-    props.onMouseOut = createChainedFunction(child.props.onMouseOut, this.props.onMouseOut);
-    props.onFocus = createChainedFunction(child.props.onFocus, this.props.onFocus);
-    props.onBlur = createChainedFunction(child.props.onBlur, this.props.onBlur);
-
-    return cloneElement(child, props);
-  }
-});
-
-/**
- * Creates a new ModalTrigger class that forwards the relevant context
- *
- * This static method should only be called at the module level, instead of in
- * e.g. a render() method, because it's expensive to create new classes.
- *
- * For example, you would want to have:
- *
- * > export default ModalTrigger.withContext({
- * >   myContextKey: React.PropTypes.object
- * > });
- *
- * and import this when needed.
- */
-ModalTrigger.withContext = createContextWrapper(ModalTrigger, 'modal');
-
-let DepreciatedModalTrigger = React.createClass({
-  componentWillMount(){
-    deprecationWarning(
-        'The `ModalTrigger` component', 'the `Modal` component directly'
-      , 'http://react-bootstrap.github.io/components.html#modals');
-  },
-
-  render(){
-    return (<ModalTrigger {...this.props}/>);
-  }
-});
-
-DepreciatedModalTrigger.withContext = ModalTrigger.withContext;
-DepreciatedModalTrigger.ModalTrigger = ModalTrigger;
-
-export default DepreciatedModalTrigger;
diff --git a/src/OverlayMixin.js b/src/OverlayMixin.js
deleted file mode 100644
index fc60ec99cb..0000000000
--- a/src/OverlayMixin.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*eslint-disable react/prop-types */
-import React from 'react';
-import CustomPropTypes from './utils/CustomPropTypes';
-import domUtils from './utils/domUtils';
-import deprecationWarning from './utils/deprecationWarning';
-
-export const OverlayMixin = {
-  propTypes: {
-
-    container: CustomPropTypes.mountable
-  },
-
-
-  componentDidMount() {
-    this._renderOverlay();
-  },
-
-  componentDidUpdate() {
-    this._renderOverlay();
-  },
-
-  componentWillUnmount() {
-    this._unrenderOverlay();
-    this._mountOverlayTarget();
-  },
-
-  _mountOverlayTarget() {
-    if (!this._overlayTarget) {
-      this._overlayTarget = document.createElement('div');
-      this.getContainerDOMNode()
-        .appendChild(this._overlayTarget);
-    }
-  },
-
-  _unmountOverlayTarget() {
-    if (this._overlayTarget) {
-      this.getContainerDOMNode()
-        .removeChild(this._overlayTarget);
-      this._overlayTarget = null;
-    }
-  },
-
-  _renderOverlay() {
-
-    let overlay = this.renderOverlay();
-
-    // Save reference for future access.
-    if (overlay !== null) {
-      this._mountOverlayTarget();
-      this._overlayInstance = React.render(overlay, this._overlayTarget);
-    } else {
-      // Unrender if the component is null for transitions to null
-      this._unrenderOverlay();
-      this._unmountOverlayTarget();
-    }
-  },
-
-  _unrenderOverlay() {
-    if (this._overlayTarget) {
-      React.unmountComponentAtNode(this._overlayTarget);
-      this._overlayInstance = null;
-    }
-  },
-
-  getOverlayDOMNode() {
-    if (!this.isMounted()) {
-      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
-    }
-
-    if (this._overlayInstance) {
-      if (this._overlayInstance.getWrappedDOMNode) {
-        return this._overlayInstance.getWrappedDOMNode();
-      } else {
-        return React.findDOMNode(this._overlayInstance);
-      }
-    }
-
-    return null;
-  },
-
-  getContainerDOMNode() {
-    return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
-  }
-};
-
-export default {
-
-  ...OverlayMixin,
-
-  componentWillMount() {
-    deprecationWarning(
-        'Overlay mixin', 'the `<Portal/>` Component'
-      , 'http://react-bootstrap.github.io/components.html#utilities-portal');
-  }
-};
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index 2be3bfd9d0..b90215f353 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -4,9 +4,6 @@ import React, { cloneElement } from 'react';
 import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
 import Overlay from './Overlay';
-import position from './utils/overlayPositionUtils';
-
-import deprecationWarning from './utils/deprecationWarning';
 import warning from 'react/lib/warning';
 
 /**
@@ -33,7 +30,7 @@ const OverlayTrigger = React.createClass({
      * Specify which action or actions trigger Overlay visibility
      */
     trigger: React.PropTypes.oneOfType([
-      React.PropTypes.oneOf(['manual', 'click', 'hover', 'focus']),
+      React.PropTypes.oneOf(['click', 'hover', 'focus']),
       React.PropTypes.arrayOf(React.PropTypes.oneOf(['click', 'hover', 'focus']))
     ]),
 
@@ -178,30 +175,24 @@ const OverlayTrigger = React.createClass({
     // create in render otherwise owner is lost...
     this._overlay = this.getOverlay();
 
-    if (this.props.trigger !== 'manual') {
-
-      props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
+    props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
 
-      if (isOneOf('click', this.props.trigger)) {
-        props.onClick = createChainedFunction(this.toggle, props.onClick);
-      }
-
-      if (isOneOf('hover', this.props.trigger)) {
-        warning(!(this.props.trigger === 'hover'),
-          '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
-          'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
+    if (isOneOf('click', this.props.trigger)) {
+      props.onClick = createChainedFunction(this.toggle, props.onClick);
+    }
 
-        props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
-        props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
-      }
+    if (isOneOf('hover', this.props.trigger)) {
+      warning(!(this.props.trigger === 'hover'),
+        '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
+        'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
 
-      if (isOneOf('focus', this.props.trigger)) {
-        props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
-        props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
-      }
+      props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
+      props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
     }
-    else {
-      deprecationWarning('"manual" trigger type', ' the Overlay component');
+
+    if (isOneOf('focus', this.props.trigger)) {
+      props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
+      props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
     }
 
     return cloneElement(
@@ -250,32 +241,6 @@ const OverlayTrigger = React.createClass({
       this._hoverDelay = null;
       this.hide();
     }, delay);
-  },
-
-  // deprecated Methods
-  calcOverlayPosition() {
-    let overlay = this.props.overlay;
-
-    deprecationWarning('OverlayTrigger.calcOverlayPosition()', 'utils/overlayPositionUtils');
-
-    return position.calcOverlayPosition(
-        overlay.props.placement || this.props.placement
-      , React.findDOMNode(overlay)
-      , React.findDOMNode(this)
-      , React.findDOMNode(overlay.props.container || this.props.container)
-      , overlay.props.containerPadding || this.props.containerPadding
-    );
-  },
-
-  getPosition() {
-    deprecationWarning('OverlayTrigger.getPosition()', 'utils/overlayPositionUtils');
-
-    let overlay = this.props.overlay;
-
-    return position.getPosition(
-        React.findDOMNode(this)
-      , React.findDOMNode(overlay.props.container || this.props.container)
-    );
   }
 
 });
diff --git a/src/Portal.js b/src/Portal.js
index cc8f350701..b4dde8315a 100644
--- a/src/Portal.js
+++ b/src/Portal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import CustomPropTypes from './utils/CustomPropTypes';
-import { OverlayMixin } from './OverlayMixin';
+import domUtils from './utils/domUtils';
 
 let Portal = React.createClass({
 
@@ -13,20 +13,81 @@ let Portal = React.createClass({
     container: CustomPropTypes.mountable
   },
 
-  // we use the mixin for now, to avoid duplicating a bunch of code.
-  // when the deprecation is removed we need to move the logic here from OverlayMixin
-  mixins: [ OverlayMixin ],
+  componentDidMount() {
+    this._renderOverlay();
+  },
+
+  componentDidUpdate() {
+    this._renderOverlay();
+  },
+
+  componentWillUnmount() {
+    this._unrenderOverlay();
+    this._mountOverlayTarget();
+  },
+
+  _mountOverlayTarget() {
+    if (!this._overlayTarget) {
+      this._overlayTarget = document.createElement('div');
+      this.getContainerDOMNode()
+        .appendChild(this._overlayTarget);
+    }
+  },
+
+  _unmountOverlayTarget() {
+    if (this._overlayTarget) {
+      this.getContainerDOMNode()
+        .removeChild(this._overlayTarget);
+      this._overlayTarget = null;
+    }
+  },
+
+  _renderOverlay() {
 
-  renderOverlay() {
-    if (!this.props.children) {
-      return null;
+    let overlay = !this.props.children
+      ? null
+      : React.Children.only(this.props.children);
+
+    // Save reference for future access.
+    if (overlay !== null) {
+      this._mountOverlayTarget();
+      this._overlayInstance = React.render(overlay, this._overlayTarget);
+    } else {
+      // Unrender if the component is null for transitions to null
+      this._unrenderOverlay();
+      this._unmountOverlayTarget();
     }
+  },
 
-    return React.Children.only(this.props.children);
+  _unrenderOverlay() {
+    if (this._overlayTarget) {
+      React.unmountComponentAtNode(this._overlayTarget);
+      this._overlayInstance = null;
+    }
   },
 
   render() {
     return null;
+  },
+
+  getOverlayDOMNode() {
+    if (!this.isMounted()) {
+      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+    }
+
+    if (this._overlayInstance) {
+      if (this._overlayInstance.getWrappedDOMNode) {
+        return this._overlayInstance.getWrappedDOMNode();
+      } else {
+        return React.findDOMNode(this._overlayInstance);
+      }
+    }
+
+    return null;
+  },
+
+  getContainerDOMNode() {
+    return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
   }
 });
 
diff --git a/src/index.js b/src/index.js
index 1f4dcefac1..70802d2b28 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,7 +28,6 @@ export ListGroupItem from './ListGroupItem';
 export MenuItem from './MenuItem';
 
 export Modal from './Modal';
-export ModalTrigger from './ModalTrigger';
 export ModalHeader from './ModalHeader';
 export ModalTitle from './ModalTitle';
 export ModalBody from './ModalBody';
@@ -39,7 +38,6 @@ export Navbar from './Navbar';
 export NavItem from './NavItem';
 
 export Overlay from './Overlay';
-export OverlayMixin from './OverlayMixin';
 export OverlayTrigger from './OverlayTrigger';
 
 export PageHeader from './PageHeader';
diff --git a/test/FactoriesSpec.js b/test/FactoriesSpec.js
index f03810c277..040d636430 100644
--- a/test/FactoriesSpec.js
+++ b/test/FactoriesSpec.js
@@ -4,7 +4,7 @@ import components from '../tools/public-components';
 let props = {
   ButtonInput: {value: 'button'},
   Glyphicon: {glyph: 'star'},
-  Modal: {onRequestHide() {}},
+  Modal: {onHide() {}},
   ModalTrigger: {modal: React.DOM.div(null)},
   OverlayTrigger: {overlay: React.DOM.div(null)}
 };
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 3d425c14cd..6065c0bbc3 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -1,18 +1,31 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
-import { shouldWarn } from './helpers';
+import { render } from './helpers';
 
 describe('Modal', function () {
+  let mountPoint;
+
+  beforeEach(()=>{
+    mountPoint = document.createElement('div');
+    document.body.appendChild(mountPoint);
+  });
+
+  afterEach(function () {
+    React.unmountComponentAtNode(mountPoint);
+    document.body.removeChild(mountPoint);
+  });
 
   it('Should render the modal content', function() {
     let noOp = function () {};
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onHide={noOp}>
+    let instance = render(
+      <Modal show onHide={noOp} animation={false}>
         <strong>Message</strong>
       </Modal>
-    );
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
+    , mountPoint);
+
+    assert.ok(
+      ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.modal, 'strong'));
   });
 
   it('Should add modal-open class to the modal container while open', function(done) {
@@ -27,21 +40,30 @@ describe('Modal', function () {
       render() {
         return (
           <div>
-            <Modal show={this.state.modalOpen} onHide={this.handleCloseModal} container={this}>
+            <Modal
+              animation={false}
+              show={this.state.modalOpen}
+              onHide={this.handleCloseModal}
+              container={this}
+            >
               <strong>Message</strong>
             </Modal>
           </div>
         );
       }
     });
-    let instance = ReactTestUtils.renderIntoDocument(
-        <Container />
-    );
+    let instance = render(
+          <Container />
+        , mountPoint);
+
+    let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal);
+
     assert.ok(React.findDOMNode(instance).className.match(/\modal-open\b/));
 
-    let backdrop = React.findDOMNode(instance).getElementsByClassName('modal-backdrop')[0];
+    let backdrop = React.findDOMNode(modal.refs.modal).getElementsByClassName('modal-backdrop')[0];
 
     ReactTestUtils.Simulate.click(backdrop);
+
     setTimeout(function(){
       assert.equal(React.findDOMNode(instance).className.length, 0);
       done();
@@ -51,55 +73,77 @@ describe('Modal', function () {
 
   it('Should close the modal when the backdrop is clicked', function (done) {
     let doneOp = function () { done(); };
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onHide={doneOp}>
+    let instance = render(
+      <Modal show onHide={doneOp}>
         <strong>Message</strong>
       </Modal>
-    );
+    , mountPoint);
+
+    let backdrop = React.findDOMNode(instance.refs.modal)
+      .getElementsByClassName('modal-backdrop')[0];
 
-    let backdrop = React.findDOMNode(instance).getElementsByClassName('modal-backdrop')[0];
     ReactTestUtils.Simulate.click(backdrop);
   });
 
   it('Should close the modal when the modal background is clicked', function (done) {
     let doneOp = function () { done(); };
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Modal onHide={doneOp}>
+
+    let instance = render(
+      <Modal show onHide={doneOp}>
         <strong>Message</strong>
       </Modal>
-    );
+    , mountPoint);
+
+    let backdrop = React.findDOMNode(instance.refs.modal)
+        .getElementsByClassName('modal')[0];
 
-    let backdrop = React.findDOMNode(instance).getElementsByClassName('modal')[0];
     ReactTestUtils.Simulate.click(backdrop);
   });
 
+  it('Should close the modal when the modal close button is clicked', function (done) {
+    let doneOp = function () { done(); };
+
+    let instance = render(
+      <Modal show onHide={doneOp}>
+        <Modal.Header closeButton />
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    let button = React.findDOMNode(instance.refs.modal)
+        .getElementsByClassName('close')[0];
+
+    ReactTestUtils.Simulate.click(button);
+  });
+
   it('Should pass bsSize to the dialog', function () {
     let noOp = function () {};
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Modal bsSize='small' onHide={noOp}>
+    let instance = render(
+      <Modal show bsSize='small' onHide={noOp}>
         <strong>Message</strong>
       </Modal>
-    );
+    , mountPoint);
 
-    let dialog = React.findDOMNode(instance).getElementsByClassName('modal-dialog')[0];
+    let dialog = React.findDOMNode(instance.refs.modal).getElementsByClassName('modal-dialog')[0];
     assert.ok(dialog.className.match(/\bmodal-sm\b/));
   });
 
   it('Should pass dialogClassName to the dialog', function () {
     let noOp = function () {};
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Modal dialogClassName="testCss" onHide={noOp}>
+    let instance = render(
+      <Modal show dialogClassName="testCss" onHide={noOp}>
         <strong>Message</strong>
       </Modal>
-    );
+    , mountPoint);
 
-    let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'modal-dialog');
+    let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.modal, 'modal-dialog');
     assert.match(dialog.props.className, /\btestCss\b/);
   });
 
   describe('Focused state', function () {
     let focusableContainer = null;
-    beforeEach(function () {
+
+    beforeEach(()=>{
       focusableContainer = document.createElement('div');
       focusableContainer.tabIndex = 0;
       document.body.appendChild(focusableContainer);
@@ -111,142 +155,50 @@ describe('Modal', function () {
       document.body.removeChild(focusableContainer);
     });
 
-    it('Should focus on the Modal when it is opened', function (done) {
+    it('Should focus on the Modal when it is opened', function () {
+
       document.activeElement.should.equal(focusableContainer);
 
-      let doneOp = function () {
-        // focus should be back on the previous element when modal closed
-        setTimeout(function () {
-          document.activeElement.should.equal(focusableContainer);
-          done();
-        }, 0);
-      };
-
-      let Container = React.createClass({
-        getInitialState() {
-          return {modalOpen: true};
-        },
-        handleCloseModal() {
-          this.setState({modalOpen: false});
-          doneOp();
-        },
-        render() {
-          if (this.state.modalOpen) {
-            return (
-              <Modal onHide={this.handleCloseModal} container={this}>
-                <strong>Message</strong>
-              </Modal>
-            );
-          } else {
-            return <span/>;
-          }
-        }
-      });
-
-      let instance = React.render(<Container />, focusableContainer);
-
-      setTimeout(function () {
-        // modal should be focused when opened
-        let modal = React.findDOMNode(instance).getElementsByClassName('modal')[0];
-        document.activeElement.should.equal(modal);
-
-        // close the modal
-        let backdrop = React.findDOMNode(instance).getElementsByClassName('modal-backdrop')[0];
-        ReactTestUtils.Simulate.click(backdrop);
-      }, 0);
-    });
+      let instance = render(
+        <Modal show onHide={()=>{}} animation={false}>
+          <strong>Message</strong>
+        </Modal>
+        , focusableContainer);
 
-    it('Should not focus on the Modal when autoFocus is false', function (done) {
+      document.activeElement.className.should.contain('modal');
 
-      document.activeElement.should.equal(focusableContainer);
+      instance.renderWithProps({ show: false });
 
-      let Container = React.createClass({
-        getInitialState() {
-          return {modalOpen: true};
-        },
-        render() {
-          if (this.state.modalOpen) {
-            return (
-
-              <Modal autoFocus={false} onHide={()=>{}} container={this}>
-                <strong>Message</strong>
-              </Modal>
-            );
-          } else {
-            return <span/>;
-          }
-        }
-      });
-
-      React.render(<Container />, focusableContainer);
-
-      setTimeout(function () {
-        // modal should be focused when opened
-        document.activeElement.should.equal(focusableContainer);
-        done();
-      }, 0);
+      document.activeElement.should.equal(focusableContainer);
     });
 
-    it('Should not focus Modal when child has focus', function (done) {
+    it('Should not focus on the Modal when autoFocus is false', function () {
 
       document.activeElement.should.equal(focusableContainer);
 
-      let Container = React.createClass({
-        getInitialState() {
-          return {modalOpen: true};
-        },
-        render() {
-          if (this.state.modalOpen) {
-            return (
-              <Modal onRequestHide={()=>{}} container={this}>
-                <input autoFocus />
-              </Modal>
-            );
-          } else {
-            return <span/>;
-          }
-        }
-      });
-
-      let instance = React.render(<Container />, focusableContainer);
-
-      setTimeout(function () {
-        let input = React.findDOMNode(
-          ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input'));
-
-        document.activeElement.should.equal(input);
-        done();
-      }, 0);
-    });
-  });
-
-
-  describe('deprecations', function(){
-    it('Should render the modal header and title', function() {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Modal title='hello' onHide={()=>{}}>
+      render(
+        <Modal show autoFocus={false} onHide={()=>{}} animation={false}>
           <strong>Message</strong>
         </Modal>
-      );
-
-      (()=> {
-        ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'button');
-        ReactTestUtils.findRenderedComponentWithType(instance, Modal.Header);
-        ReactTestUtils.findRenderedComponentWithType(instance, Modal.Title);
-      }).should.not.throw();
+        , focusableContainer);
 
-      shouldWarn(
-        'Specifying `closeButton` or `title` Modal props is deprecated');
+      document.activeElement.should.equal(focusableContainer);
     });
 
-    it('Should warn about onRequestHide', function() {
-      ReactTestUtils.renderIntoDocument(
-        <Modal onRequestHide={()=>{}}>
-          <Modal.Header closeButton/>
+    it('Should not focus Modal when child has focus', function () {
+
+      document.activeElement.should.equal(focusableContainer);
+
+      render(
+        <Modal show onHide={()=>{}} animation={false}>
+          <input autoFocus />
         </Modal>
-      );
+        , focusableContainer);
 
-      shouldWarn('The Modal prop `onRequestHide` is deprecated');
+      let input = document.getElementsByTagName('input')[0];
+
+      document.activeElement.should.equal(input);
     });
   });
+
 });
diff --git a/test/ModalTriggerSpec.js b/test/ModalTriggerSpec.js
deleted file mode 100644
index 9485f402b8..0000000000
--- a/test/ModalTriggerSpec.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
-import ModalTrigger from '../src/ModalTrigger';
-import { shouldWarn } from './helpers';
-
-
-describe('ModalTrigger', function() {
-
-  afterEach(()=> {
-    if ( console.warn.called ) {
-      shouldWarn('The `ModalTrigger` component is deprecated');
-    }
-  });
-
-  it('Should warn about deprecated Component', function() {
-    ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-
-    shouldWarn('The `ModalTrigger` component is deprecated');
-  });
-
-  it('Should create ModalTrigger element', function() {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-    const modalTrigger = React.findDOMNode(instance);
-    assert.equal(modalTrigger.nodeName, 'BUTTON');
-  });
-
-  it('Should pass ModalTrigger onMouseOver prop to child', function() {
-    const callback = sinon.spy();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>} onMouseOver={callback}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-    const modalTrigger = React.findDOMNode(instance);
-    ReactTestUtils.Simulate.mouseOver(modalTrigger);
-    callback.called.should.be.true;
-  });
-
-  it('Should pass ModalTrigger onMouseOut prop to child', function() {
-    const callback = sinon.spy();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>} onMouseOut={callback}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-    const modalTrigger = React.findDOMNode(instance);
-    ReactTestUtils.Simulate.mouseOut(modalTrigger);
-    callback.called.should.be.true;
-  });
-
-  it('Should pass ModalTrigger onFocus prop to child', function() {
-    const callback = sinon.spy();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>} onFocus={callback}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-    const modalTrigger = React.findDOMNode(instance);
-    ReactTestUtils.Simulate.focus(modalTrigger);
-    callback.called.should.be.true;
-  });
-
-  it('Should pass ModalTrigger onBlur prop to child', function() {
-    const callback = sinon.spy();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ModalTrigger modal={<div>test</div>} onBlur={callback}>
-        <button>button</button>
-      </ModalTrigger>
-    );
-    const modalTrigger = React.findDOMNode(instance);
-    ReactTestUtils.Simulate.blur(modalTrigger);
-    callback.called.should.be.true;
-  });
-
-  // This is just a copy of the test case for OverlayTrigger.
-  it('Should forward requested context', function() {
-    const contextTypes = {
-      key: React.PropTypes.string
-    };
-
-    const contextSpy = sinon.spy();
-    class ContextReader extends React.Component {
-      render() {
-        contextSpy(this.context.key);
-        return <div />;
-      }
-    }
-    ContextReader.contextTypes = contextTypes;
-
-    const TriggerWithContext = ModalTrigger.withContext(contextTypes);
-    class ContextHolder extends React.Component {
-      getChildContext() {
-        return {key: 'value'};
-      }
-
-      render() {
-        return (
-          <TriggerWithContext
-            trigger="click"
-            modal={<ContextReader />}
-          >
-            <button>button</button>
-          </TriggerWithContext>
-        );
-      }
-    }
-    ContextHolder.childContextTypes = contextTypes;
-
-    const instance = ReactTestUtils.renderIntoDocument(<ContextHolder />);
-    const modalTrigger = React.findDOMNode(instance);
-    ReactTestUtils.Simulate.click(modalTrigger);
-
-    contextSpy.calledWith('value').should.be.true;
-  });
-});
diff --git a/test/OverlayMixinSpec.js b/test/OverlayMixinSpec.js
deleted file mode 100644
index 66818d48f5..0000000000
--- a/test/OverlayMixinSpec.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
-import OverlayMixin from '../src/OverlayMixin';
-import { shouldWarn } from './helpers';
-
-describe('OverlayMixin', function () {
-  let instance;
-
-  let Overlay = React.createClass({
-    mixins: [OverlayMixin],
-
-    render() {
-      return <div />;
-    },
-
-    renderOverlay() {
-      return this.props.overlay;
-    }
-  });
-
-
-  afterEach(function() {
-    if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(React.findDOMNode(instance));
-    }
-
-    if ( console.warn.called ) {
-      shouldWarn('Overlay mixin is deprecated');
-    }
-  });
-
-  it('Should render overlay into container (DOMNode)', function() {
-    let container = document.createElement('div');
-
-    instance = ReactTestUtils.renderIntoDocument(
-      <Overlay container={container} overlay={<div id="test1" />} />
-    );
-
-    assert.equal(container.querySelectorAll('#test1').length, 1);
-  });
-
-  it('Should render overlay into container (ReactComponent)', function() {
-    let Container = React.createClass({
-      render() {
-        return <Overlay container={this} overlay={<div id="test1" />} />;
-      }
-    });
-
-    instance = ReactTestUtils.renderIntoDocument(
-      <Container />
-    );
-
-    assert.equal(React.findDOMNode(instance).querySelectorAll('#test1').length, 1);
-  });
-
-  it('Should not render a null overlay', function() {
-    let Container = React.createClass({
-      render() {
-        return <Overlay ref='overlay' container={this} overlay={null} />;
-      }
-    });
-
-    instance = ReactTestUtils.renderIntoDocument(
-      <Container />
-    );
-
-    assert.equal(instance.refs.overlay.getOverlayDOMNode(), null);
-  });
-
-  it('Should render only an overlay', function() {
-    let OnlyOverlay = React.createClass({
-      mixins: [OverlayMixin],
-
-      render() {
-        return null;
-      },
-
-      renderOverlay() {
-        return this.props.overlay;
-      }
-    });
-
-    let overlayInstance = ReactTestUtils.renderIntoDocument(
-      <OnlyOverlay overlay={<div id="test1" />} />
-    );
-
-    assert.equal(overlayInstance.getOverlayDOMNode().nodeName, 'DIV');
-  });
-});
diff --git a/test/helpers.js b/test/helpers.js
index 74960b4db4..97fb38d589 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -1,5 +1,30 @@
+import React from 'react';
+import { cloneElement } from 'react';
+
 export function shouldWarn(about) {
   console.warn.called.should.be.true;
   console.warn.calledWithMatch(about).should.be.true;
   console.warn.reset();
 }
+
+/**
+ * Helper for rendering and updating props for plain class Components
+ * since `setProps` is deprecated.
+ * @param  {ReactElement} element     Root element to render
+ * @param  {HTMLElement?} mountPoint  Optional mount node, when empty it uses an unattached div like `renderIntoDocument()`
+ * @return {ComponentInstance}        The instance, with a new method `renderWithProps` which will return a new instance wiht updated props
+ */
+export function render(element, mountPoint){
+  let mount = mountPoint || document.createElement('div');
+  let instance = React.render(element, mount);
+
+  if (!instance.renderWithProps) {
+    instance.renderWithProps = function(newProps) {
+
+      return render(
+        cloneElement(element, newProps), mount);
+    };
+  }
+
+  return instance;
+}
diff --git a/test/server/ModalSpec.js b/test/server/ModalSpec.js
index e78832c956..fae565c4c8 100644
--- a/test/server/ModalSpec.js
+++ b/test/server/ModalSpec.js
@@ -8,7 +8,7 @@ describe('Modal', () => {
 
     assert.doesNotThrow(function renderOnServerSide() {
       return React.renderToString(
-        <Modal onRequestHide={noOp}>
+        <Modal onHide={noOp}>
           <strong>Message</strong>
         </Modal>
       );

From 3a0b4da0ca7c4fd7fa409a168173875c6ada8eb4 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 11 Jul 2015 11:12:17 -0400
Subject: [PATCH 023/128] Add transition Component

---
 src/Transition.js      | 286 +++++++++++++++++++++++++++++++++++++++++
 test/TransitionSpec.js | 231 +++++++++++++++++++++++++++++++++
 2 files changed, 517 insertions(+)
 create mode 100644 src/Transition.js
 create mode 100644 test/TransitionSpec.js

diff --git a/src/Transition.js b/src/Transition.js
new file mode 100644
index 0000000000..ce8eb200cf
--- /dev/null
+++ b/src/Transition.js
@@ -0,0 +1,286 @@
+'use strict';
+import React from 'react';
+import TransitionEvents from './utils/TransitionEvents';
+import classnames from 'classnames';
+
+function omit(obj, keys) {
+  let included = Object.keys(obj).filter( k => keys.indexOf(k) === -1);
+  let newObj = {};
+
+  included.forEach( key => newObj[key] = obj[key] );
+  return newObj;
+}
+
+function ensureTransitionEnd(node, handler, duration){
+  let fired = false;
+  let done = e => {
+        if (!fired) {
+          fired = true;
+          handler(e);
+        }
+      };
+
+  if ( node ) {
+    TransitionEvents.addEndEventListener(node, done);
+    setTimeout(done, duration);
+  } else {
+    setTimeout(done, 0);
+  }
+}
+
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+let triggerBrowserReflow = node => node.offsetHeight; //eslint-disable-line no-unused-expressions
+
+class Transition extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+
+    this.state = {
+      in: !props.in,
+      transitioning: false
+    };
+
+    this.needsTransition = true;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.in !== this.props.in) {
+      this.needsTransition = true;
+    }
+  }
+
+  componentDidUpdate() {
+    this.processChild();
+  }
+
+  componentWillMount() {
+    this._mounted = true;
+
+    if (!this.props.transitionAppear) {
+      this.needsTransition = false;
+      this.setState({ in: this.props.in });
+    }
+  }
+
+  componentWillUnmount(){
+    this._mounted = false;
+  }
+
+  componentDidMount() {
+    if (this.props.transitionAppear) {
+      this.processChild();
+    }
+  }
+
+  processChild(){
+    let needsTransition = this.needsTransition;
+    let enter = this.props.in;
+
+    if (needsTransition) {
+      this.needsTransition = false;
+      this[enter ? 'performEnter' : 'performLeave']();
+    }
+  }
+
+  performEnter() {
+    let maybeNode = React.findDOMNode(this);
+
+    let enter = node => {
+      node = this.props.transitioningNode(node) || node;
+
+      this.props.onEnter(node);
+
+      this.safeSetState({ in: true, transitioning: true, needInitialRender: false }, ()=> {
+
+        this.props.onEntering(node);
+
+        ensureTransitionEnd(node, () => {
+          if ( this.state.in ){
+            this.safeSetState({
+              transitioning: false
+            }, () => this.props.onEntered(node));
+          }
+
+        }, this.props.duration);
+      });
+    };
+
+    if (maybeNode) {
+      enter(maybeNode);
+    }
+    else if (this.props.unmountOnExit) {
+      this._ensureNode(enter);
+    }
+  }
+
+  performLeave() {
+    let node = React.findDOMNode(this);
+
+    node = this.props.transitioningNode(node) || node;
+
+    this.props.onExit(node);
+
+    this.setState({ in: false, transitioning: true }, () => {
+      this.props.onExiting(node);
+
+      ensureTransitionEnd(node, () => {
+        if ( !this.state.in ){
+          this.safeSetState({ transitioning: false }, ()=> this.props.onExited(node));
+        }
+      }, this.props.duration);
+    });
+  }
+
+  _ensureNode(callback) {
+
+    this.setState({ needInitialRender: true }, ()=> {
+      let node = React.findDOMNode(this);
+
+      triggerBrowserReflow(node);
+
+      callback(node);
+    });
+  }
+
+  safeSetState(newState, cb){
+    if (this._mounted) {
+      this.setState(newState, cb);
+    }
+  }
+
+  render() {
+    let childProps = omit(this.props, Object.keys(Transition.propTypes).concat('children'));
+
+    let child = this.props.children;
+    let starting = this.state.needInitialRender;
+    let out = !this.state.in && !this.state.transitioning;
+
+    if ( !child || (this.props.unmountOnExit && out && !starting) ){
+      return null;
+    }
+
+    let classes = '';
+
+    // for whatever reason classnames() doesn't actually work here,
+    // maybe because they aren't always single classes?
+    if (this.state.in && !this.state.transitioning) {
+      classes = this.props.enteredClassName;
+    }
+
+    else if (this.state.in && this.state.transitioning) {
+      classes = this.props.enteringClassName;
+    }
+
+    else if (!this.state.in && !this.state.transitioning) {
+      classes = this.props.exitedClassName;
+    }
+
+    else if (!this.state.in && this.state.transitioning) {
+      classes = this.props.exitingClassName;
+    }
+
+    return React.cloneElement(child, {
+      ...childProps,
+      className: classnames(
+          child.props.className
+        , this.props.className
+        , classes)
+    });
+  }
+}
+
+Transition.propTypes = {
+  /**
+   * Triggers the Enter or Exit animation
+   */
+  in:                React.PropTypes.bool,
+
+  /**
+   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   */
+  unmountOnExit:     React.PropTypes.bool,
+
+  /**
+   * Specify whether transitions should run when the Transition component mounts.
+   */
+  transitionAppear: React.PropTypes.bool,
+
+  /**
+   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * original browser transition end events are canceled.
+   */
+  duration:          React.PropTypes.number,
+
+  /**
+   * A css class or classes applied once the Component has exited.
+   */
+  exitedClassName:     React.PropTypes.string,
+  /**
+   * A css class or classes applied while the Component is exiting.
+   */
+  exitingClassName:  React.PropTypes.string,
+  /**
+   * A css class or classes applied once the Component has entered.
+   */
+  enteredClassName:    React.PropTypes.string,
+  /**
+   * A css class or classes applied while the Component is entering.
+   */
+  enteringClassName: React.PropTypes.string,
+
+  /**
+   * A function that returns the DOM node to animate. This Node will have the transition classes applied to it.
+   * When left out, the Component will use its immediate child.
+   *
+   * @private
+   */
+  transitioningNode: React.PropTypes.func,
+
+  /**
+   * A callback fired just before the "entering" classes are applied
+   */
+  onEnter:     React.PropTypes.func,
+  /**
+   * A callback fired just after the "entering" classes are applied
+   */
+  onEntering:  React.PropTypes.func,
+  /**
+   * A callback fired after "enter" classes are applied
+   */
+  onEntered:   React.PropTypes.func,
+  /**
+   * A callback fired after "exiting" classes are applied
+   */
+  onExit:      React.PropTypes.func,
+  /**
+   * A callback fired after "exiting" classes are applied
+   */
+  onExiting:   React.PropTypes.func,
+  /**
+   * A callback fired after "exit" classes are applied
+   */
+  onExited:    React.PropTypes.func
+};
+
+// name the function so it is clearer in the documentation
+const noop = ()=>{};
+
+Transition.defaultProps = {
+  in:       false,
+  duration: 300,
+  unmountOnExit: false,
+  transitionAppear: false,
+  transitioningNode: noop,
+
+  onEnter:    noop,
+  onEntering: noop,
+  onEntered:  noop,
+
+  onExit:     noop,
+  onExiting:  noop,
+  onExited:   noop
+};
+
+export default Transition;
diff --git a/test/TransitionSpec.js b/test/TransitionSpec.js
new file mode 100644
index 0000000000..7945ba8ceb
--- /dev/null
+++ b/test/TransitionSpec.js
@@ -0,0 +1,231 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import { render } from './helpers';
+import Transition from '../src/Transition';
+//import classNames from 'classnames';
+
+describe('Transition', function () {
+
+
+  it('should not transition on mount', function(){
+    let instance = render(
+          <Transition in onEnter={()=> { throw new Error('should not Enter'); }}>
+            <div></div>
+          </Transition>
+        );
+
+    instance.state.in.should.equal(true);
+    assert.ok(!instance.state.transitioning);
+  });
+
+  it('should transition on mount with transitionAppear', done =>{
+    let instance = ReactTestUtils.renderIntoDocument(
+          <Transition in
+            transitionAppear
+            onEnter={()=> done()}
+          >
+            <div></div>
+          </Transition>
+        );
+
+    instance.state.in.should.equal(true);
+    instance.state.transitioning.should.equal(true);
+  });
+
+  describe('entering', ()=> {
+    let instance;
+
+    beforeEach(function(){
+      instance = render(
+        <Transition
+          duration={10}
+          enteredClassName='test-enter'
+          enteringClassName='test-entering'
+        >
+          <div/>
+        </Transition>
+      );
+    });
+
+    it('should fire callbacks', done => {
+      let onEnter = sinon.spy();
+      let onEntering = sinon.spy();
+
+      instance.state.in.should.equal(false);
+
+      instance = instance.renderWithProps({
+
+        in: true,
+
+        onEnter,
+
+        onEntering,
+
+        onEntered(){
+          assert.ok(onEnter.calledOnce);
+          assert.ok(onEntering.calledOnce);
+          assert.ok(onEnter.calledBefore(onEntering));
+          done();
+        }
+      });
+    });
+
+    it('should move to each transition state', done => {
+      let count = 0;
+
+      instance.state.in.should.equal(false);
+
+      instance = instance.renderWithProps({
+
+        in: true,
+
+        onEnter(){
+          count++;
+          instance.state.in.should.equal(false);
+          instance.state.transitioning.should.equal(false);
+        },
+
+        onEntering(){
+          count++;
+          instance.state.in.should.equal(true);
+          instance.state.transitioning.should.equal(true);
+        },
+
+        onEntered(){
+          instance.state.in.should.equal(true);
+          instance.state.transitioning.should.equal(false);
+          assert.ok(count === 2);
+          done();
+        }
+      });
+    });
+
+    it('should apply classes at each transition state', done => {
+      let count = 0;
+
+      instance.state.in.should.equal(false);
+
+      instance = instance.renderWithProps({
+
+        in: true,
+
+        onEnter(node){
+          count++;
+          assert.equal(node.className, '');
+        },
+
+        onEntering(node){
+          count++;
+          assert.equal(node.className, 'test-entering');
+        },
+
+        onEntered(node){
+          assert.equal(node.className, 'test-enter');
+          assert.ok(count === 2);
+          done();
+        }
+      });
+    });
+
+  });
+
+
+  describe('exiting', ()=> {
+    let instance;
+
+    beforeEach(function(){
+      instance = render(
+        <Transition
+          in={true}
+          duration={10}
+          exitedClassName='test-exit'
+          exitingClassName='test-exiting'
+        >
+          <div/>
+        </Transition>
+      );
+    });
+
+    it('should fire callbacks', done => {
+      let onExit = sinon.spy();
+      let onExiting = sinon.spy();
+
+      instance.state.in.should.equal(true);
+
+      instance = instance.renderWithProps({
+
+        in: false,
+
+        onExit,
+
+        onExiting,
+
+        onExited(){
+          assert.ok(onExit.calledOnce);
+          assert.ok(onExiting.calledOnce);
+          assert.ok(onExit.calledBefore(onExiting));
+          done();
+        }
+      });
+    });
+
+    it('should move to each transition state', done => {
+      let count = 0;
+
+      instance.state.in.should.equal(true);
+
+      instance = instance.renderWithProps({
+
+        in: false,
+
+        onExit(){
+          count++;
+          instance.state.in.should.equal(true);
+          instance.state.transitioning.should.equal(false);
+        },
+
+        onExiting(){
+          count++;
+          instance.state.in.should.equal(false);
+          instance.state.transitioning.should.equal(true);
+        },
+
+        onExited(){
+          instance.state.in.should.equal(false);
+          instance.state.transitioning.should.equal(false);
+          //assert.ok(count === 2);
+          done();
+        }
+      });
+    });
+
+    it('should apply classes at each transition state', done => {
+      let count = 0;
+
+      instance.state.in.should.equal(true);
+
+      instance = instance.renderWithProps({
+
+        in: false,
+
+        onExit(node){
+          count++;
+          assert.equal(node.className, '');
+        },
+
+        onExiting(node){
+          count++;
+          assert.equal(node.className, 'test-exiting');
+        },
+
+        onExited(node){
+          assert.equal(node.className, 'test-exit');
+          assert.ok(count === 2);
+          done();
+        }
+      });
+    });
+
+  });
+
+});

From 0503507dd26d5a08f0a79339b67868e5f6b32c7e Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 11 Jul 2015 11:14:06 -0400
Subject: [PATCH 024/128] [added] Collapse Component, replaces CollapsibleMixin

---
 docs/examples/Collapse.js |  28 +++++
 src/Collapse.js           | 200 +++++++++++++++++++++++++++++++++++
 src/CollapsibleNav.js     |  54 +++++-----
 src/Nav.js                |  30 ++----
 src/Panel.js              |  49 +++++----
 test/CollapseSpec.js      | 216 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 513 insertions(+), 64 deletions(-)
 create mode 100644 docs/examples/Collapse.js
 create mode 100644 src/Collapse.js
 create mode 100644 test/CollapseSpec.js

diff --git a/docs/examples/Collapse.js b/docs/examples/Collapse.js
new file mode 100644
index 0000000000..c30069d8d0
--- /dev/null
+++ b/docs/examples/Collapse.js
@@ -0,0 +1,28 @@
+class Example extends React.Component {
+  constructor(...args){
+    super(...args);
+
+    this.state = {};
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Collapse in={this.state.open}>
+          <div>
+            <Well>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+            </Well>
+          </div>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/src/Collapse.js b/src/Collapse.js
new file mode 100644
index 0000000000..0b14eec0b4
--- /dev/null
+++ b/src/Collapse.js
@@ -0,0 +1,200 @@
+/*eslint-disable react/prop-types */
+'use strict';
+import React from 'react';
+import Transition from './Transition';
+import domUtils from './utils/domUtils';
+import createChainedFunction from './utils/createChainedFunction';
+
+let capitalize = str => str[0].toUpperCase() + str.substr(1);
+
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+let triggerBrowserReflow = node => node.offsetHeight; //eslint-disable-line no-unused-expressions
+
+const MARGINS = {
+  height: ['marginTop', 'marginBottom'],
+  width:  ['marginLeft', 'marginRight']
+};
+
+function getDimensionValue(dimension, elem){
+  let value = elem[`offset${capitalize(dimension)}`];
+  let computedStyles = domUtils.getComputedStyles(elem);
+  let margins = MARGINS[dimension];
+
+  return (value +
+    parseInt(computedStyles[margins[0]], 10) +
+    parseInt(computedStyles[margins[1]], 10)
+  );
+}
+
+class Collapse extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+
+    this.onEnterListener = this.handleEnter.bind(this);
+    this.onEnteringListener = this.handleEntering.bind(this);
+    this.onEnteredListener = this.handleEntered.bind(this);
+    this.onExitListener = this.handleExit.bind(this);
+    this.onExitingListener = this.handleExiting.bind(this);
+  }
+
+  render() {
+    let enter = createChainedFunction(this.onEnterListener, this.props.onEnter);
+    let entering = createChainedFunction(this.onEnteringListener, this.props.onEntering);
+    let entered = createChainedFunction(this.onEnteredListener, this.props.onEntered);
+    let exit = createChainedFunction(this.onExitListener, this.props.onExit);
+    let exiting = createChainedFunction(this.onExitingListener, this.props.onExiting);
+
+    return (
+      <Transition
+        ref='transition'
+        {...this.props}
+        aria-expanded={this.props.in}
+        className={this._dimension() === 'width' ? 'width' : ''}
+        exitedClassName='collapse'
+        exitingClassName='collapsing'
+        enteredClassName='collapse in'
+        enteringClassName='collapsing'
+        onEnter={enter}
+        onEntering={entering}
+        onEntered={entered}
+        onExit={exit}
+        onExiting={exiting}
+        onExited={this.props.onExited}
+      >
+        { this.props.children }
+      </Transition>
+    );
+  }
+
+  /* -- Expanding -- */
+  handleEnter(elem){
+    let dimension = this._dimension();
+    elem.style[dimension] = '0';
+  }
+
+  handleEntering(elem){
+    let dimension = this._dimension();
+
+    elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
+  }
+
+  handleEntered(elem){
+    let dimension = this._dimension();
+    elem.style[dimension] = null;
+  }
+
+  /* -- Collapsing -- */
+  handleExit(elem){
+    let dimension = this._dimension();
+
+    elem.style[dimension] = this.props.getDimensionValue(dimension, elem) + 'px';
+  }
+
+  handleExiting(elem){
+    let dimension = this._dimension();
+
+    triggerBrowserReflow(elem);
+    elem.style[dimension] = '0';
+  }
+
+  _dimension(){
+    return typeof this.props.dimension === 'function'
+      ? this.props.dimension()
+      : this.props.dimension;
+  }
+
+  //for testing
+  _getTransitionInstance(){
+    return this.refs.transition;
+  }
+
+  _getScrollDimensionValue(elem, dimension){
+    return elem[`scroll${capitalize(dimension)}`] + 'px';
+  }
+}
+
+Collapse.propTypes = {
+  /**
+   * Collapse the Component in or out.
+   */
+  in:       React.PropTypes.bool,
+
+  /**
+   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * original browser transition end events are canceled.
+   */
+  duration:          React.PropTypes.number,
+
+  /**
+   * Specifies the dimension used when collapsing.
+   *
+   * _Note: Bootstrap only partially supports this!
+   * You will need to supply your own css animation for the `.width` css class._
+   */
+  dimension: React.PropTypes.oneOfType([
+    React.PropTypes.oneOf(['height', 'width']),
+    React.PropTypes.func
+  ]),
+
+  /**
+   * A function that returns the height or width of the animating DOM node. Allows for providing some custom logic how much
+   * Collapse component should animation in its specified dimension.
+   *
+   * `getDimensionValue` is called with the current dimension prop value and the DOM node.
+   */
+  getDimensionValue: React.PropTypes.func,
+
+  /**
+   * A Callback fired before the component starts to expand.
+   */
+  onEnter: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component starts to expand.
+   */
+  onEntering: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has expanded.
+   */
+  onEntered: React.PropTypes.func,
+
+  /**
+   * A Callback fired before the component starts to collapse.
+   */
+  onExit: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component starts to collapse.
+   */
+  onExiting: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has collapsed.
+   */
+  onExited: React.PropTypes.func,
+
+  /**
+   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   */
+  unmountOnExit:     React.PropTypes.bool,
+
+  /**
+   * Specify whether the component should collapse or expand when it mounts.
+   */
+  transitionAppear: React.PropTypes.bool
+};
+
+Collapse.defaultProps = {
+  in:       false,
+  duration: 300,
+  dimension: 'height',
+  transitionAppear: false,
+  unmountOnExit: false,
+  getDimensionValue
+};
+
+export default Collapse;
+
diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
index 427d0b30f3..027f7cb29a 100644
--- a/src/CollapsibleNav.js
+++ b/src/CollapsibleNav.js
@@ -1,14 +1,13 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
-import CollapsibleMixin from './CollapsibleMixin';
+import Collapse from './Collapse';
 import classNames from 'classnames';
-import domUtils from './utils/domUtils';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
 const CollapsibleNav = React.createClass({
-  mixins: [BootstrapMixin, CollapsibleMixin],
+  mixins: [BootstrapMixin],
 
   propTypes: {
     onSelect: React.PropTypes.func,
@@ -19,41 +18,48 @@ const CollapsibleNav = React.createClass({
     eventKey: React.PropTypes.any
   },
 
-  getCollapsibleDOMNode() {
-    return React.findDOMNode(this);
-  },
 
-  getCollapsibleDimensionValue() {
-    let height = 0;
-    let nodes = this.refs;
-    for (let key in nodes) {
-      if (nodes.hasOwnProperty(key)) {
+  // getCollapsibleDimensionValue() {
+  //   let height = 0;
+  //   let nodes = this.refs;
+  //   for (let key in nodes) {
+  //     if (nodes.hasOwnProperty(key)) {
 
-        let n = React.findDOMNode(nodes[key]);
-        let h = n.offsetHeight;
-        let computedStyles = domUtils.getComputedStyles(n);
+  //       let n = React.findDOMNode(nodes[key]);
+  //       let h = n.offsetHeight;
+  //       let computedStyles = domUtils.getComputedStyles(n);
 
-        height += (h +
-          parseInt(computedStyles.marginTop, 10) +
-          parseInt(computedStyles.marginBottom, 10)
-        );
-      }
-    }
-    return height;
-  },
+  //       height += (h +
+  //         parseInt(computedStyles.marginTop, 10) +
+  //         parseInt(computedStyles.marginBottom, 10)
+  //       );
+  //     }
+  //   }
+  //   return height;
+  // },
 
   render() {
     /*
      * this.props.collapsible is set in NavBar when an eventKey is supplied.
      */
-    const classes = this.props.collapsible ? this.getCollapsibleClassSet('navbar-collapse') : null;
+    const classes = this.props.collapsible ? 'navbar-collapse' : null;
     const renderChildren = this.props.collapsible ? this.renderCollapsibleNavChildren : this.renderChildren;
 
-    return (
+    let nav = (
       <div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
         {ValidComponentChildren.map(this.props.children, renderChildren)}
       </div>
     );
+
+    if ( this.props.collapsible ){
+      return (
+        <Collapse in={this.props.expanded}>
+          { nav }
+        </Collapse>
+      );
+    } else {
+      return nav;
+    }
   },
 
   getChildActiveProp(child) {
diff --git a/src/Nav.js b/src/Nav.js
index d4873cc2b4..0c8affd216 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,14 +1,13 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
-import CollapsibleMixin from './CollapsibleMixin';
+import Collapse from './Collapse';
 import classNames from 'classnames';
-import domUtils from './utils/domUtils';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
 const Nav = React.createClass({
-  mixins: [BootstrapMixin, CollapsibleMixin],
+  mixins: [BootstrapMixin],
 
   propTypes: {
     activeHref: React.PropTypes.string,
@@ -27,33 +26,24 @@ const Nav = React.createClass({
 
   getDefaultProps() {
     return {
-      bsClass: 'nav'
+      bsClass: 'nav',
+      expanded: true
     };
   },
 
-  getCollapsibleDOMNode() {
-    return React.findDOMNode(this);
-  },
-
-  getCollapsibleDimensionValue() {
-    let node = React.findDOMNode(this.refs.ul);
-    let height = node.offsetHeight;
-    let computedStyles = domUtils.getComputedStyles(node);
-
-    return height + parseInt(computedStyles.marginTop, 10) + parseInt(computedStyles.marginBottom, 10);
-  },
-
   render() {
-    const classes = this.props.collapsible ? this.getCollapsibleClassSet('navbar-collapse') : null;
+    const classes = this.props.collapsible ? 'navbar-collapse' : null;
 
     if (this.props.navbar && !this.props.collapsible) {
       return (this.renderUl());
     }
 
     return (
-      <nav {...this.props} className={classNames(this.props.className, classes)}>
-        { this.renderUl() }
-      </nav>
+      <Collapse in={this.props.expanded}>
+        <nav {...this.props} className={classNames(this.props.className, classes)}>
+          {this.renderUl()}
+        </nav>
+      </Collapse>
     );
   },
 
diff --git a/src/Panel.js b/src/Panel.js
index d0bde0f778..d6dd1ae24a 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -2,10 +2,10 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 
 import BootstrapMixin from './BootstrapMixin';
-import CollapsibleMixin from './CollapsibleMixin';
+import Collapse from './Collapse';
 
 const Panel = React.createClass({
-  mixins: [BootstrapMixin, CollapsibleMixin],
+  mixins: [BootstrapMixin],
 
   propTypes: {
     collapsible: React.PropTypes.bool,
@@ -13,6 +13,8 @@ const Panel = React.createClass({
     header: React.PropTypes.node,
     id: React.PropTypes.string,
     footer: React.PropTypes.node,
+    defaultExpanded: React.PropTypes.bool,
+    expanded: React.PropTypes.bool,
     eventKey: React.PropTypes.any
   },
 
@@ -23,6 +25,18 @@ const Panel = React.createClass({
     };
   },
 
+  getInitialState(){
+    let defaultExpanded = this.props.defaultExpanded != null ?
+      this.props.defaultExpanded :
+        this.props.expanded != null ?
+        this.props.expanded :
+        false;
+
+    return {
+      expanded: defaultExpanded
+    };
+  },
+
   handleSelect(e){
     e.selected = true;
 
@@ -38,19 +52,11 @@ const Panel = React.createClass({
   },
 
   handleToggle(){
-    this.setState({expanded:!this.state.expanded});
+    this.setState({ expanded: !this.state.expanded});
   },
 
-  getCollapsibleDimensionValue() {
-    return React.findDOMNode(this.refs.panel).scrollHeight;
-  },
-
-  getCollapsibleDOMNode() {
-    if (!this.isMounted() || !this.refs || !this.refs.panel) {
-      return null;
-    }
-
-    return React.findDOMNode(this.refs.panel);
+  isExpanded(){
+    return this.props.expanded != null ? this.props.expanded : this.state.expanded;
   },
 
   render() {
@@ -69,13 +75,16 @@ const Panel = React.createClass({
     let collapseClass = this.prefixClass('collapse');
 
     return (
-      <div
-        className={classNames(this.getCollapsibleClassSet(collapseClass))}
-        id={this.props.id}
-        ref='panel'
-        aria-expanded={this.isExpanded() ? 'true' : 'false'}>
-        {this.renderBody()}
-      </div>
+      <Collapse in={this.isExpanded()}>
+        <div
+          className={collapseClass}
+          id={this.props.id}
+          ref='panel'
+          aria-expanded={this.isExpanded() ? 'true' : 'false'}>
+          {this.renderBody()}
+
+        </div>
+      </Collapse>
     );
   },
 
diff --git a/test/CollapseSpec.js b/test/CollapseSpec.js
new file mode 100644
index 0000000000..0ac893fcf0
--- /dev/null
+++ b/test/CollapseSpec.js
@@ -0,0 +1,216 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Collapse from '../src/Collapse';
+
+describe('Collapse', function () {
+
+  let Component, instance;
+
+  beforeEach(function(){
+
+    Component = React.createClass({
+      render(){
+        let { children, ...props } = this.props;
+
+        return (
+          <Collapse
+            ref={r => this.collapse = r}
+            getDimensionValue={()=> 15 }
+            {...props}
+          >
+            <div>
+              <div ref="panel">
+                {children}
+              </div>
+            </div>
+          </Collapse>
+        );
+      }
+    });
+  });
+
+  it('Should default to collapsed', function () {
+    instance = ReactTestUtils.renderIntoDocument(
+      <Component>Panel content</Component>
+    );
+
+    assert.ok(
+      instance.collapse.props.in === false);
+  });
+
+
+  describe('collapsed', function(){
+
+    it('Should have collapse class', function () {
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component>Panel content</Component>
+      );
+
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse'));
+    });
+  });
+
+  describe('from collapsed to expanded', function(){
+    let scrollHeightStub;
+
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component>Panel content</Component>
+      );
+
+      // since scrollHeight is gonna be 0 detached from the DOM
+      scrollHeightStub = sinon.stub(instance.collapse, '_getScrollDimensionValue');
+      scrollHeightStub.returns('15px');
+    });
+
+
+    it('Should have collapsing class', function () {
+      instance.setProps({ in: true });
+
+      let node = React.findDOMNode(instance);
+
+      assert.equal(node.className, 'collapsing');
+    });
+
+    it('Should set initial 0px height', function (done) {
+      let node = React.findDOMNode(instance);
+
+      function onEnter(){
+        assert.equal(node.style.height, '0px');
+        done();
+      }
+
+      assert.equal(node.style.height, '');
+
+      instance.setProps({ in: true, onEnter });
+    });
+
+    it('Should set node to height', function () {
+      let node = React.findDOMNode(instance);
+
+      assert.equal(node.styled, undefined);
+
+      instance.setProps({ in: true });
+      assert.equal(node.style.height, '15px');
+    });
+
+    it('Should transition from collapsing to not collapsing', function (done) {
+      let node = React.findDOMNode(instance);
+
+      function onEntered(){
+        assert.equal(node.className, 'collapse in');
+        done();
+      }
+
+      instance.setProps({ in: true, onEntered });
+
+      assert.equal(node.className, 'collapsing');
+    });
+
+    it('Should clear height after transition complete', function (done) {
+      let node = React.findDOMNode(instance);
+
+      function onEntered(){
+        assert.equal(node.style.height, '');
+        done();
+      }
+
+      assert.equal(node.style.height, '');
+
+      instance.setProps({ in: true, onEntered });
+      assert.equal(node.style.height, '15px');
+    });
+  });
+
+  describe('from expanded to collapsed', function(){
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component in>Panel content</Component>
+      );
+    });
+
+    it('Should have collapsing class', function () {
+      instance.setProps({ in: false });
+      let node = React.findDOMNode(instance);
+      assert.equal(node.className, 'collapsing');
+    });
+
+    it('Should set initial height', function () {
+      let node = React.findDOMNode(instance);
+
+      function onExit(){
+        assert.equal(node.style.height, '15px');
+      }
+
+      assert.equal(node.style.height, '');
+      instance.setProps({ in: false, onExit });
+    });
+
+    it('Should set node to height', function () {
+      let node = React.findDOMNode(instance);
+      assert.equal(node.style.height, '');
+
+      instance.setProps({ in: false });
+      assert.equal(node.style.height, '0px');
+    });
+
+    it('Should transition from collapsing to not collapsing', function (done) {
+      let node = React.findDOMNode(instance);
+
+      function onExited(){
+        assert.equal(node.className, 'collapse');
+        done();
+      }
+
+      instance.setProps({ in: false, onExited });
+
+      assert.equal(node.className, 'collapsing');
+    });
+
+    it('Should have 0px height after transition complete', function (done) {
+      let node = React.findDOMNode(instance);
+
+      function onExited(){
+        assert.ok(node.style.height === '0px');
+        done();
+      }
+
+      assert.equal(node.style.height, '');
+
+      instance.setProps({ in: false, onExited });
+    });
+  });
+
+  describe('expanded', function(){
+
+    it('Should have collapse and in class', function () {
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component in >Panel content</Component>
+      );
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse in'));
+    });
+  });
+
+  describe('dimension', function(){
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component>Panel content</Component>
+      );
+    });
+
+    it('Defaults to height', function(){
+      assert.equal(instance.collapse._dimension(), 'height');
+    });
+
+    it('Uses getCollapsibleDimension if exists', function(){
+
+      function dimension(){
+        return 'whatevs';
+      }
+
+      instance.setProps({ dimension });
+
+      assert.equal(instance.collapse._dimension(), 'whatevs');
+    });
+  });
+});

From ec368f041bb72052124625ec7256964be780f4eb Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 11 Jul 2015 11:15:03 -0400
Subject: [PATCH 025/128] [added] Fade Component, replaces FadeMixin

---
 docs/examples/Fade.js | 29 ++++++++++++++
 src/Fade.js           | 90 +++++++++++++++++++++++++++++++++++++++++++
 src/Modal.js          | 67 ++++++++++++++++++++++++--------
 src/Overlay.js        | 87 +++++++++++++++++++++++++++++++++--------
 src/Popover.js        | 16 ++------
 src/Position.js       | 11 ++++--
 src/Tooltip.js        | 14 ++-----
 test/FadeSpec.js      | 82 +++++++++++++++++++++++++++++++++++++++
 test/ModalSpec.js     |  5 +--
 test/PopoverSpec.js   | 18 ++++-----
 test/TooltipSpec.js   | 18 ++++-----
 11 files changed, 358 insertions(+), 79 deletions(-)
 create mode 100644 docs/examples/Fade.js
 create mode 100644 src/Fade.js
 create mode 100644 test/FadeSpec.js

diff --git a/docs/examples/Fade.js b/docs/examples/Fade.js
new file mode 100644
index 0000000000..2583412829
--- /dev/null
+++ b/docs/examples/Fade.js
@@ -0,0 +1,29 @@
+
+class Example extends React.Component {
+
+  constructor(...args){
+    super(...args);
+    this.state = {};
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Button onClick={()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Fade in={this.state.open}>
+          <div>
+            <Well>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+            </Well>
+          </div>
+        </Fade>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/src/Fade.js b/src/Fade.js
new file mode 100644
index 0000000000..b91cb32b51
--- /dev/null
+++ b/src/Fade.js
@@ -0,0 +1,90 @@
+'use strict';
+import React from 'react';
+import Transition from './Transition';
+
+class Fade extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <Transition
+        {...this.props}
+        in={this.props.in}
+        className='fade'
+        enteredClassName='in'
+        enteringClassName='in'
+      >
+        { this.props.children }
+      </Transition>
+    );
+  }
+}
+
+Fade.propTypes = {
+  /**
+   * Fade the Component in or out.
+   */
+  in:       React.PropTypes.bool,
+
+  /**
+   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * original browser transition end events are canceled.
+   */
+  duration:          React.PropTypes.number,
+
+  /**
+   * A Callback fired before the component starts to fade in.
+   */
+  onEnter: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component has started to faded in.
+   */
+  onEntering: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has faded in.
+   */
+  onEntered: React.PropTypes.func,
+
+  /**
+   * A Callback fired before the component starts to fade out.
+   */
+  onExit: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component has started to faded out.
+   */
+  onExiting: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has faded out.
+   */
+  onExited: React.PropTypes.func,
+
+
+  /**
+   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   */
+  unmountOnExit:     React.PropTypes.bool,
+
+  /**
+   * Specify whether the component should fade in or out when it mounts.
+   */
+  transitionAppear: React.PropTypes.bool
+
+};
+
+Fade.defaultProps = {
+  in:       false,
+  duration: 300,
+  dimension: 'height',
+  transitionAppear: false,
+  unmountOnExit: false
+};
+
+export default Fade;
+
diff --git a/src/Modal.js b/src/Modal.js
index 3816318c51..55df65f433 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -4,11 +4,11 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
-import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
 
 import Portal from './Portal';
+import Fade from './Fade';
 
 import Body from './ModalBody';
 import Header from './ModalHeader';
@@ -90,12 +90,17 @@ function getScrollbarSize(){
   document.body.removeChild(scrollDiv);
 
   scrollDiv = null;
+  return scrollbarSize;
 }
 
 
 const ModalMarkup = React.createClass({
 
+<<<<<<< HEAD
   mixins: [ BootstrapMixin, FadeMixin ],
+=======
+  mixins: [ BootstrapMixin ],
+>>>>>>> [added] Fade Component, replaces FadeMixin
 
   propTypes: {
 
@@ -166,8 +171,7 @@ const ModalMarkup = React.createClass({
 
     let classes = {
       modal: true,
-      fade: this.props.animation,
-      'in': !this.props.animation
+      in: this.props.show && !this.props.animation
     };
 
     let modal = (
@@ -206,18 +210,22 @@ const ModalMarkup = React.createClass({
   },
 
   renderBackdrop(modal) {
-    let classes = {
-      'modal-backdrop': true,
-      fade: this.props.animation,
-      'in': !this.props.animation
-    };
-
-    let onClick = this.props.backdrop === true ?
-      this.handleBackdropClick : null;
+    let { animation } = this.props;
+    let duration = Modal.BACKDROP_TRANSITION_DURATION; //eslint-disable-line no-use-before-define
+
+    let backdrop = (
+      <div ref="backdrop"
+       className={classNames('modal-backdrop', { in: this.props.show && !animation })}
+       onClick={this.handleBackdropClick}
+      />
+    );
 
     return (
       <div>
-        <div className={classNames(classes)} ref="backdrop" onClick={onClick} />
+        { animation
+            ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
+            : backdrop
+        }
         {modal}
       </div>
     );
@@ -381,16 +389,40 @@ const Modal = React.createClass({
     ...ModalMarkup.propTypes
   },
 
+  getDefaultProps(){
+    return {
+      show: false,
+      animation: true
+    };
+  },
+
   render() {
-    let { show, ...props } = this.props;
+    let { children, ...props } = this.props;
+
+    let show = !!props.show;
 
     let modal = (
-      <ModalMarkup {...props} ref='modal'>{this.props.children}</ModalMarkup>
+      <ModalMarkup {...props} ref='modal'>
+        { children }
+      </ModalMarkup>
     );
 
     return (
-      <Portal container={props.container} >
-        { show && modal }
+      <Portal container={props.container}>
+        { props.animation
+            ? (
+              <Fade
+                in={show}
+                transitionAppear={show}
+                duration={Modal.TRANSITION_DURATION}
+                unmountOnExit
+              >
+                { modal }
+              </Fade>
+            )
+            : show && modal
+        }
+
       </Portal>
     );
   }
@@ -401,4 +433,7 @@ Modal.Header = Header;
 Modal.Title = Title;
 Modal.Footer = Footer;
 
+Modal.TRANSITION_DURATION = 300;
+Modal.BACKDROP_TRANSITION_DURATION = 150;
+
 export default Modal;
diff --git a/src/Overlay.js b/src/Overlay.js
index d425fe91a4..a5b27d923f 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -1,13 +1,26 @@
 /*eslint-disable object-shorthand, react/prop-types */
-import React from 'react';
+import React, { cloneElement } from 'react';
 import Portal from './Portal';
 import Position from './Position';
 import RootCloseWrapper from './RootCloseWrapper';
+import CustomPropTypes from './utils/CustomPropTypes';
+import Fade from './Fade';
+import classNames from 'classnames';
+
 
 class Overlay extends React.Component {
 
   constructor(props, context){
     super(props, context);
+
+    this.state = { exited: false };
+    this.onHiddenListener = this.handleHidden.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.show){
+      this.setState({ exited: false });
+    }
   }
 
   render(){
@@ -17,30 +30,60 @@ class Overlay extends React.Component {
       , target
       , placement
       , rootClose
+      , children
+      , animation: Transition
       , ...props } = this.props;
 
-    let positionedChild = (
-      <Position {...{ container, containerPadding, target, placement }}>
-        { this.props.children }
-      </Position>
-    );
+    let child = null;
 
-    if (rootClose) {
-      positionedChild = (
-        <RootCloseWrapper onRootClose={this.props.onHide}>
-          { positionedChild }
-        </RootCloseWrapper>
+    if ( Transition === true ){
+      Transition = Fade;
+    }
+
+    if (props.show || (Transition && !this.state.exited)) {
+
+      child = children;
+
+      // Position the child before the animation to avoid `null` DOM nodes
+      child = (
+        <Position {...{ container, containerPadding, target, placement }}>
+          { child }
+        </Position>
       );
+
+      child = Transition
+          ? (
+            <Transition
+              unmountOnExit
+              in={props.show}
+              transitionAppear={props.show}
+              onHidden={this.onHiddenListener}
+            >
+              { child }
+            </Transition>
+          )
+          : cloneElement(child, { className: classNames('in', child.className) });
+
+
+      if (rootClose) {
+        child = (
+          <RootCloseWrapper onRootClose={props.onHide}>
+            { child }
+          </RootCloseWrapper>
+        );
+      }
     }
 
     return (
-      <Portal container={container} rootClose={rootClose} onRootClose={this.props.onHide}>
-      { props.show &&
-          positionedChild
-      }
+      <Portal container={container}>
+        { child }
       </Portal>
     );
   }
+
+  handleHidden(){
+    this.setState({ exited: true });
+  }
 }
 
 Overlay.propTypes = {
@@ -57,7 +100,19 @@ Overlay.propTypes = {
   /**
    * A Callback fired by the Overlay when it wishes to be hidden.
    */
-  onHide: React.PropTypes.func
+  onHide: React.PropTypes.func,
+
+  /**
+   * Use animation
+   */
+  animation: React.PropTypes.oneOfType([
+      React.PropTypes.bool,
+      CustomPropTypes.elementType
+  ])
+};
+
+Overlay.defaultProps = {
+  animation: Fade
 };
 
 export default Overlay;
diff --git a/src/Popover.js b/src/Popover.js
index e24b0c51a6..1133703238 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -2,12 +2,11 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
-import FadeMixin from './FadeMixin';
 import CustomPropTypes from './utils/CustomPropTypes';
 
 const Popover = React.createClass({
 
-  mixins: [BootstrapMixin, FadeMixin],
+  mixins: [ BootstrapMixin ],
 
   propTypes: {
     /**
@@ -42,15 +41,11 @@ const Popover = React.createClass({
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+
     /**
      * Title text
      */
-    title: React.PropTypes.node,
-    /**
-     * Specify whether the Popover should be use show and hide animations.
-     */
-    animation: React.PropTypes.bool
-
+    title: React.PropTypes.node
 
   },
 
@@ -64,10 +59,7 @@ const Popover = React.createClass({
   render() {
     const classes = {
       'popover': true,
-      [this.props.placement]: true,
-      // in class will be added by the FadeMixin when the animation property is true
-      'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
-      'fade': this.props.animation
+      [this.props.placement]: true
     };
 
     const style = {
diff --git a/src/Position.js b/src/Position.js
index b92c256965..36f9d817ba 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -31,13 +31,13 @@ class Position extends React.Component {
   }
 
   render() {
-    let { placement, children } = this.props;
+    let { children, ...props } = this.props;
     let { positionLeft, positionTop, ...arrows } = this.props.target ? this.state : {};
 
     return cloneElement(
       React.Children.only(children), {
+        ...props,
         ...arrows,
-        placement,
         positionTop,
         positionLeft,
         style: {
@@ -61,13 +61,18 @@ class Position extends React.Component {
       return;
     }
 
+    let overlay = React.findDOMNode(this);
     let target = React.findDOMNode(this.props.target(this.props));
     let container = React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
 
+    // if ( !overlay || !target || !container ){
+    //   return;
+    // }
+
     this.setState(
       calcOverlayPosition(
           this.props.placement
-        , React.findDOMNode(this)
+        , overlay
         , target
         , container
         , this.props.containerPadding));
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 640267829e..e21c57c845 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -2,11 +2,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
-import FadeMixin from './FadeMixin';
 import CustomPropTypes from './utils/CustomPropTypes';
 
 const Tooltip = React.createClass({
-  mixins: [BootstrapMixin, FadeMixin],
+  mixins: [BootstrapMixin],
 
   propTypes: {
     /**
@@ -44,11 +43,7 @@ const Tooltip = React.createClass({
     /**
      * Title text
      */
-    title: React.PropTypes.node,
-    /**
-     * Specify whether the Tooltip should be use show and hide animations.
-     */
-    animation: React.PropTypes.bool
+    title: React.PropTypes.node
   },
 
   getDefaultProps() {
@@ -61,10 +56,7 @@ const Tooltip = React.createClass({
   render() {
     const classes = {
       'tooltip': true,
-      [this.props.placement]: true,
-      // in class will be added by the FadeMixin when the animation property is true
-      'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
-      'fade': this.props.animation
+      [this.props.placement]: true
     };
 
     const style = {
diff --git a/test/FadeSpec.js b/test/FadeSpec.js
new file mode 100644
index 0000000000..1aa710fcd6
--- /dev/null
+++ b/test/FadeSpec.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Fade from '../src/Fade';
+//import classNames from 'classnames';
+
+describe('Fade', function () {
+
+  let Component, instance;
+
+  beforeEach(function(){
+
+    Component = React.createClass({
+      render(){
+        let { children, ...props } = this.props;
+
+        return (
+          <Fade ref={r => this.fade = r}
+            {...props}
+          >
+            <div>
+              {children}
+            </div>
+          </Fade>
+        );
+      }
+    });
+  });
+
+  it('Should default to hidden', function () {
+    instance = ReactTestUtils.renderIntoDocument(
+      <Component>Panel content</Component>
+    );
+
+    assert.ok(
+      instance.fade.props.in === false);
+  });
+
+  it('Should always have the "fade" class', () => {
+    instance = ReactTestUtils.renderIntoDocument(
+      <Component>Panel content</Component>
+    );
+
+    assert.ok(
+      instance.fade.props.in === false);
+
+    assert.equal(
+      React.findDOMNode(instance).className, 'fade');
+
+  });
+
+  it('Should add "in" class when entering', done => {
+    instance = ReactTestUtils.renderIntoDocument(
+      <Component>Panel content</Component>
+    );
+
+    function onEntering(){
+      assert.equal(React.findDOMNode(instance).className, 'fade in');
+      done();
+    }
+
+    assert.ok(
+      instance.fade.props.in === false);
+
+    instance.setProps({ in: true, onEntering });
+  });
+
+  it('Should remove "in" class when exiting', done => {
+    instance = ReactTestUtils.renderIntoDocument(
+      <Component in>Panel content</Component>
+    );
+
+    function onExiting(){
+      assert.equal(React.findDOMNode(instance).className, 'fade');
+      done();
+    }
+
+    assert.equal(
+      React.findDOMNode(instance).className, 'fade in');
+
+    instance.setProps({ in: false, onExiting });
+  });
+});
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 6065c0bbc3..d45636cd1d 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -3,6 +3,7 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
 import { render } from './helpers';
 
+
 describe('Modal', function () {
   let mountPoint;
 
@@ -172,10 +173,8 @@ describe('Modal', function () {
       document.activeElement.should.equal(focusableContainer);
     });
 
-    it('Should not focus on the Modal when autoFocus is false', function () {
-
-      document.activeElement.should.equal(focusableContainer);
 
+    it('Should not focus on the Modal when autoFocus is false', function () {
       render(
         <Modal show autoFocus={false} onHide={()=>{}} animation={false}>
           <strong>Message</strong>
diff --git a/test/PopoverSpec.js b/test/PopoverSpec.js
index 45b6f00757..30509376e4 100644
--- a/test/PopoverSpec.js
+++ b/test/PopoverSpec.js
@@ -11,16 +11,16 @@ describe('Popover', function () {
     );
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-title'));
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-content'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
+
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
   });
 
-  it('Should not have the fade class if animation is false', function () {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Popover title="Popover title" animation={false}>
-        <strong>Popover Content</strong>
-      </Popover>
-    );
-    assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
-  });
+  // it('Should not have the fade class if animation is false', function () {
+  //   let instance = ReactTestUtils.renderIntoDocument(
+  //     <Popover title="Popover title" animation={false}>
+  //       <strong>Popover Content</strong>
+  //     </Popover>
+  //   );
+  //   assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
+  // });
 });
diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
index a07bb06073..a21c6317bf 100644
--- a/test/TooltipSpec.js
+++ b/test/TooltipSpec.js
@@ -10,15 +10,15 @@ describe('Tooltip', function () {
       </Tooltip>
     );
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
-  });
 
-  it('Should not have the fade class if animation is false', function () {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Tooltip animation={false}>
-        <strong>Tooltip Content</strong>
-      </Tooltip>
-    );
-    assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
   });
+
+  // it('Should not have the fade class if animation is false', function () {
+  //   let instance = ReactTestUtils.renderIntoDocument(
+  //     <Tooltip animation={false}>
+  //       <strong>Tooltip Content</strong>
+  //     </Tooltip>
+  //   );
+  //   assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
+  // });
 });

From 411050ba8b1e7780b61a25237e9a43cfc4243dce Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 11 Jul 2015 11:15:18 -0400
Subject: [PATCH 026/128] add docs and exports

---
 docs/examples/.eslintrc     |  4 +++-
 docs/src/ComponentsPage.js  | 21 +++++++++++++++++++--
 docs/src/ReactPlayground.js | 11 +++++++++++
 docs/src/Samples.js         |  3 +++
 src/Collapse.js             |  2 +-
 src/Input.js                |  2 +-
 src/index.js                |  3 +++
 7 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 9dbc49c623..00c22821a7 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -52,6 +52,8 @@
     "TabPane",
     "Tooltip",
     "Well",
-    "Thumbnail"
+    "Thumbnail",
+    "Collapse",
+    "Fade"
   }
 }
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 8e656f7048..52f422f6a7 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -56,6 +56,7 @@ const ComponentsPage = React.createClass({
             <div className='row'>
               <div className='col-md-9' role='main'>
 
+
                 {/* Buttons */}
                 <div className='bs-docs-section'>
                   <h1 id='buttons' className='page-header'>Buttons <small>Button</small></h1>
@@ -843,7 +844,7 @@ const ComponentsPage = React.createClass({
                     equivalent to jQuery's <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
                     the component's direct parent. The Modal, and Overlay components use the Portal component internally.
                   </p>
-                  <h3 id='utilities-props'>Props</h3>
+                  <h3 id='utilities-portal-props'>Props</h3>
 
                   <PropTable component='Portal'/>
 
@@ -852,9 +853,25 @@ const ComponentsPage = React.createClass({
                     A Component that absolutely positions its child to a <code>target</code> component or DOM node. Useful for creating custom
                     popups or tooltips. Used by the Overlay Components.
                   </p>
-                  <h3 id='utilities-props'>Props</h3>
+                  <h3 id='utilities-position-props'>Props</h3>
 
                   <PropTable component='Position'/>
+
+                  <h2 id='utilities-transitions'>Transitions</h2>
+
+                  <h3 id='utilities-collapse'>Collapse</h3>
+                  <p>Add a collapse toggle animation to an element or component.</p>
+                  <ReactPlayground codeText={Samples.Collapse} />
+
+                  <h4 id='utilities-collapse-props'>Props</h4>
+                  <PropTable component='Collapse'/>
+
+                  <h3 id='utilities-fade'>Fade</h3>
+                  <p>Add a fade animation to a child element or component.</p>
+                  <ReactPlayground codeText={Samples.Fade} />
+
+                  <h4 id='utilities-fade-props'>Props</h4>
+                  <PropTable component='Fade'/>
                 </div>
               </div>
 
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 4ab4cd230b..4e60798965 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -6,13 +6,19 @@ import * as modBadge from '../../src/Badge';
 import * as modButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
 import * as modButtonInput from '../../src/ButtonInput';
+
 import * as modButtonToolbar from '../../src/ButtonToolbar';
+import * as modCollapse from '../../src/Collapse';
+
 import * as modCollapsibleNav from '../../src/CollapsibleNav';
 import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
 import * as modCarousel from '../../src/Carousel';
 import * as modCarouselItem from '../../src/CarouselItem';
 import * as modCol from '../../src/Col';
 import * as modDropdownButton from '../../src/DropdownButton';
+
+import * as modFade from '../../src/Fade';
+
 import * as modFormControls from '../../src/FormControls';
 import * as modGlyphicon from '../../src/Glyphicon';
 import * as modGrid from '../../src/Grid';
@@ -57,8 +63,13 @@ import CodeExample from './CodeExample';
 
 
 const classNames = modClassNames.default;
+
 /* eslint-disable */
+
 const Portal = modPortal.default;
+const Collapse = modCollapse.default;
+const Fade = modFade.default;
+
 
 const React = modReact.default;
 const Accordion = modAccordion.default;
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index e6401dc08f..d8a4f8caf1 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -1,6 +1,9 @@
 /* eslint no-path-concat: 0, no-var: 0 */
 
 export default {
+  Collapse:                      require('fs').readFileSync(__dirname + '/../examples/Collapse.js', 'utf8'),
+  Fade:                          require('fs').readFileSync(__dirname + '/../examples/Fade.js', 'utf8'),
+
   ButtonTypes:                   require('fs').readFileSync(__dirname + '/../examples/ButtonTypes.js', 'utf8'),
   ButtonSizes:                   require('fs').readFileSync(__dirname + '/../examples/ButtonSizes.js', 'utf8'),
   ButtonBlock:                   require('fs').readFileSync(__dirname + '/../examples/ButtonBlock.js', 'utf8'),
diff --git a/src/Collapse.js b/src/Collapse.js
index 0b14eec0b4..f9799b8b60 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -130,7 +130,7 @@ Collapse.propTypes = {
   /**
    * Specifies the dimension used when collapsing.
    *
-   * _Note: Bootstrap only partially supports this!
+   * _Note: Bootstrap only partially supports 'width'!
    * You will need to supply your own css animation for the `.width` css class._
    */
   dimension: React.PropTypes.oneOfType([
diff --git a/src/Input.js b/src/Input.js
index ec1917da8e..2e81cac1bc 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -5,7 +5,7 @@ import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
   render() {
-    if (this.props.type === 'static') { //eslint-disable-line react/prop-types
+    if (this.props.type === 'static') { // eslint-disable-line react/prop-types
       deprecationWarning('Input type=static', 'StaticText');
       return <FormControls.Static {...this.props} />;
     }
diff --git a/src/index.js b/src/index.js
index 70802d2b28..ae6077a6f2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -63,5 +63,8 @@ export Well from './Well';
 export Portal from './Portal';
 export Position from './Position';
 
+export Collapse from './Collapse';
+export Fade from './Collapse';
+
 export * as FormControls from './FormControls';
 export * as utils from './utils';

From c3b41af621e9b4d4fbdc8a095b2d666420735534 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 12 Jul 2015 16:46:04 -0400
Subject: [PATCH 027/128] fix typos, and remove comments

---
 src/Collapse.js              |  6 ++----
 src/CollapsibleMixin.js      | 10 ++++++++++
 src/CollapsibleNav.js        | 19 -------------------
 src/Fade.js                  |  3 +--
 src/FadeMixin.js             | 10 ++++++++++
 src/Modal.js                 |  4 ----
 src/Position.js              |  4 ----
 src/Transition.js            | 13 ++++++-------
 test/CollapsibleMixinSpec.js |  6 ++++++
 test/FadeMixinSpec.js        |  7 +++++++
 test/FadeSpec.js             |  1 -
 test/PopoverSpec.js          |  8 --------
 test/TooltipSpec.js          |  8 --------
 test/helpers.js              |  2 +-
 14 files changed, 43 insertions(+), 58 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index f9799b8b60..505c116085 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -1,5 +1,3 @@
-/*eslint-disable react/prop-types */
-'use strict';
 import React from 'react';
 import Transition from './Transition';
 import domUtils from './utils/domUtils';
@@ -122,7 +120,7 @@ Collapse.propTypes = {
   in:       React.PropTypes.bool,
 
   /**
-   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
    * original browser transition end events are canceled.
    */
   duration:          React.PropTypes.number,
@@ -140,7 +138,7 @@ Collapse.propTypes = {
 
   /**
    * A function that returns the height or width of the animating DOM node. Allows for providing some custom logic how much
-   * Collapse component should animation in its specified dimension.
+   * Collapse component should animate in its specified dimension.
    *
    * `getDimensionValue` is called with the current dimension prop value and the DOM node.
    */
diff --git a/src/CollapsibleMixin.js b/src/CollapsibleMixin.js
index 31895e4041..c1abcbaada 100644
--- a/src/CollapsibleMixin.js
+++ b/src/CollapsibleMixin.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import TransitionEvents from './utils/TransitionEvents';
+import deprecationWarning from './utils/deprecationWarning';
+
+let warned = false;
 
 const CollapsibleMixin = {
 
@@ -21,6 +24,13 @@ const CollapsibleMixin = {
     };
   },
 
+  componentWillMount(){
+    if ( !warned ){
+      deprecationWarning('CollapsibleMixin', 'Collapse Component');
+      warned = true;
+    }
+  },
+
   componentWillUpdate(nextProps, nextState){
     let willExpanded = nextProps.expanded != null ? nextProps.expanded : nextState.expanded;
     if (willExpanded === this.isExpanded()) {
diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
index 027f7cb29a..04a21db3ef 100644
--- a/src/CollapsibleNav.js
+++ b/src/CollapsibleNav.js
@@ -19,25 +19,6 @@ const CollapsibleNav = React.createClass({
   },
 
 
-  // getCollapsibleDimensionValue() {
-  //   let height = 0;
-  //   let nodes = this.refs;
-  //   for (let key in nodes) {
-  //     if (nodes.hasOwnProperty(key)) {
-
-  //       let n = React.findDOMNode(nodes[key]);
-  //       let h = n.offsetHeight;
-  //       let computedStyles = domUtils.getComputedStyles(n);
-
-  //       height += (h +
-  //         parseInt(computedStyles.marginTop, 10) +
-  //         parseInt(computedStyles.marginBottom, 10)
-  //       );
-  //     }
-  //   }
-  //   return height;
-  // },
-
   render() {
     /*
      * this.props.collapsible is set in NavBar when an eventKey is supplied.
diff --git a/src/Fade.js b/src/Fade.js
index b91cb32b51..523508fff5 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -1,4 +1,3 @@
-'use strict';
 import React from 'react';
 import Transition from './Transition';
 
@@ -30,7 +29,7 @@ Fade.propTypes = {
   in:       React.PropTypes.bool,
 
   /**
-   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
    * original browser transition end events are canceled.
    */
   duration:          React.PropTypes.number,
diff --git a/src/FadeMixin.js b/src/FadeMixin.js
index b5597d013d..b4dfe666f2 100644
--- a/src/FadeMixin.js
+++ b/src/FadeMixin.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import domUtils from './utils/domUtils';
+import deprecationWarning from './utils/deprecationWarning';
 
 // TODO: listen for onTransitionEnd to remove el
 function getElementsAndSelf (root, classes){
@@ -16,7 +17,16 @@ function getElementsAndSelf (root, classes){
   return els;
 }
 
+let warned = false;
+
 export default {
+  componentWillMount(){
+    if ( !warned ){
+      deprecationWarning('FadeMixin', 'Fade Component');
+      warned = true;
+    }
+  },
+
   _fadeIn() {
     let els;
 
diff --git a/src/Modal.js b/src/Modal.js
index 55df65f433..881b160e59 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -96,11 +96,7 @@ function getScrollbarSize(){
 
 const ModalMarkup = React.createClass({
 
-<<<<<<< HEAD
-  mixins: [ BootstrapMixin, FadeMixin ],
-=======
   mixins: [ BootstrapMixin ],
->>>>>>> [added] Fade Component, replaces FadeMixin
 
   propTypes: {
 
diff --git a/src/Position.js b/src/Position.js
index 36f9d817ba..c8c11b7904 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -65,10 +65,6 @@ class Position extends React.Component {
     let target = React.findDOMNode(this.props.target(this.props));
     let container = React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
 
-    // if ( !overlay || !target || !container ){
-    //   return;
-    // }
-
     this.setState(
       calcOverlayPosition(
           this.props.placement
diff --git a/src/Transition.js b/src/Transition.js
index ce8eb200cf..a49124aac7 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -1,4 +1,3 @@
-'use strict';
 import React from 'react';
 import TransitionEvents from './utils/TransitionEvents';
 import classnames from 'classnames';
@@ -163,8 +162,8 @@ class Transition extends React.Component {
 
     let classes = '';
 
-    // for whatever reason classnames() doesn't actually work here,
-    // maybe because they aren't always single classes?
+    // using `classnames()` here causes a subtle bug,
+    // hence the verbose if/else if sequence.
     if (this.state.in && !this.state.transitioning) {
       classes = this.props.enteredClassName;
     }
@@ -184,9 +183,9 @@ class Transition extends React.Component {
     return React.cloneElement(child, {
       ...childProps,
       className: classnames(
-          child.props.className
-        , this.props.className
-        , classes)
+        child.props.className,
+        this.props.className,
+        classes)
     });
   }
 }
@@ -208,7 +207,7 @@ Transition.propTypes = {
   transitionAppear: React.PropTypes.bool,
 
   /**
-   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
    * original browser transition end events are canceled.
    */
   duration:          React.PropTypes.number,
diff --git a/test/CollapsibleMixinSpec.js b/test/CollapsibleMixinSpec.js
index 324b32ad44..c38527d2ae 100644
--- a/test/CollapsibleMixinSpec.js
+++ b/test/CollapsibleMixinSpec.js
@@ -32,6 +32,12 @@ describe('CollapsibleMixin', function () {
     });
   });
 
+  afterEach(()=> {
+    if (console.warn.calledWithMatch('CollapsibleMixin is deprecated')){
+      console.warn.reset();
+    }
+  });
+
   describe('getInitialState', function(){
     it('Should check defaultExpanded', function () {
       instance = ReactTestUtils.renderIntoDocument(
diff --git a/test/FadeMixinSpec.js b/test/FadeMixinSpec.js
index bcd055b5c6..7e6086dd0f 100644
--- a/test/FadeMixinSpec.js
+++ b/test/FadeMixinSpec.js
@@ -19,6 +19,13 @@ describe('FadeMixin', function () {
     });
   });
 
+  afterEach(()=> {
+    if (console.warn.calledWithMatch('FadeMixin is deprecated')){
+      console.warn.reset();
+    }
+  });
+
+
   it('Should add the in class to all elements', function (done) {
     let instance = ReactTestUtils.renderIntoDocument(<Component />);
 
diff --git a/test/FadeSpec.js b/test/FadeSpec.js
index 1aa710fcd6..0f85fdfd40 100644
--- a/test/FadeSpec.js
+++ b/test/FadeSpec.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Fade from '../src/Fade';
-//import classNames from 'classnames';
 
 describe('Fade', function () {
 
diff --git a/test/PopoverSpec.js b/test/PopoverSpec.js
index 30509376e4..cca9014442 100644
--- a/test/PopoverSpec.js
+++ b/test/PopoverSpec.js
@@ -15,12 +15,4 @@ describe('Popover', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
   });
 
-  // it('Should not have the fade class if animation is false', function () {
-  //   let instance = ReactTestUtils.renderIntoDocument(
-  //     <Popover title="Popover title" animation={false}>
-  //       <strong>Popover Content</strong>
-  //     </Popover>
-  //   );
-  //   assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
-  // });
 });
diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
index a21c6317bf..01b93bc42c 100644
--- a/test/TooltipSpec.js
+++ b/test/TooltipSpec.js
@@ -13,12 +13,4 @@ describe('Tooltip', function () {
 
   });
 
-  // it('Should not have the fade class if animation is false', function () {
-  //   let instance = ReactTestUtils.renderIntoDocument(
-  //     <Tooltip animation={false}>
-  //       <strong>Tooltip Content</strong>
-  //     </Tooltip>
-  //   );
-  //   assert.equal(React.findDOMNode(instance).className.match(/\bfade\b/), null, 'The fade class should not be present');
-  // });
 });
diff --git a/test/helpers.js b/test/helpers.js
index 97fb38d589..9df659ecae 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -12,7 +12,7 @@ export function shouldWarn(about) {
  * since `setProps` is deprecated.
  * @param  {ReactElement} element     Root element to render
  * @param  {HTMLElement?} mountPoint  Optional mount node, when empty it uses an unattached div like `renderIntoDocument()`
- * @return {ComponentInstance}        The instance, with a new method `renderWithProps` which will return a new instance wiht updated props
+ * @return {ComponentInstance}        The instance, with a new method `renderWithProps` which will return a new instance with updated props
  */
 export function render(element, mountPoint){
   let mount = mountPoint || document.createElement('div');

From 3e6523ac171442b419eacdb105063d358c2227b9 Mon Sep 17 00:00:00 2001
From: Adam Banko <banko.adam@gmail.com>
Date: Fri, 10 Jul 2015 17:14:10 +0200
Subject: [PATCH 028/128] [added] ListGroup supports iterator as child

Fixes #935
---
 src/ListGroup.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/ListGroup.js b/src/ListGroup.js
index 7301f050a8..30dca37c87 100644
--- a/src/ListGroup.js
+++ b/src/ListGroup.js
@@ -13,17 +13,11 @@ class ListGroup extends React.Component {
 
     if (!this.props.children) {
       return this.renderDiv(items);
-    } else if (React.Children.count(this.props.children) === 1 && !Array.isArray(this.props.children)) {
-      let child = this.props.children;
-
-      childrenAnchors = this.isAnchor(child.props);
-
     } else {
-
-      childrenAnchors = Array.prototype.some.call(this.props.children, (child) => {
-        return !Array.isArray(child) ? this.isAnchor(child.props) : Array.prototype.some.call(child, (subChild) => {
-            return this.isAnchor(subChild.props);
-        });
+      React.Children.forEach(this.props.children, (child) => {
+        if (this.isAnchor(child.props)) {
+          childrenAnchors = true;
+        }
 
       });
 

From 1867a622e11fc546b52172f37b653568eca397ad Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 14:06:24 +0300
Subject: [PATCH 029/128] Small fixes for 'tools'

Remove empty 'amd/lib' creation
Remove extraneous copying of 'LICENSE' for bower in building step
(release tool is doing it)
Simplify path to 'changelog' script
---
 .gitignore                         | 2 +-
 tools/amd/build.js                 | 8 ++------
 tools/release-scripts/changelog.js | 2 +-
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 580757f7be..95340486df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 *~
 .DS_Store
-npm-debug.log
+npm-debug.log*
 node_modules
 amd/
 !tools/amd/
diff --git a/tools/amd/build.js b/tools/amd/build.js
index 3f67d2c57f..21297f31ac 100644
--- a/tools/amd/build.js
+++ b/tools/amd/build.js
@@ -10,9 +10,6 @@ const bowerTemplate = path.join(__dirname, 'bower.json');
 const bowerJson = path.join(bowerRoot, 'bower.json');
 
 const readme = path.join(__dirname, 'README.md');
-const license = path.join(repoRoot, 'LICENSE');
-
-const libDestination = path.join(bowerRoot, 'lib');
 
 function bowerConfig() {
   return Promise.all([
@@ -29,11 +26,10 @@ export default function BuildBower() {
   console.log('Building: '.cyan + 'bower module'.green);
 
   return exec(`rimraf ${bowerRoot}`)
-    .then(() => fsp.mkdirs(libDestination))
+    .then(() => fsp.mkdirs(bowerRoot))
     .then(() => Promise.all([
       bowerConfig(),
-      copy(readme, bowerRoot),
-      copy(license, bowerRoot)
+      copy(readme, bowerRoot)
     ]))
     .then(() => console.log('Built: '.cyan + 'bower module'.green));
 }
diff --git a/tools/release-scripts/changelog.js b/tools/release-scripts/changelog.js
index c31f53841a..c561fe86c9 100644
--- a/tools/release-scripts/changelog.js
+++ b/tools/release-scripts/changelog.js
@@ -26,7 +26,7 @@ export default (version) => {
   }
 
   return result
-    .then(() => exec(`node_modules/.bin/changelog --title v${version} --out ${output}${additionalArgs}`))
+    .then(() => exec(`changelog --title v${version} --out ${output}${additionalArgs}`))
     .then(() => safeExec(`git add ${changelog}`))
     .then(() => {
       if (removedAlphaChangelog || isPrerelease) {

From f4114c041beb5d3c4dec4ec5a3faed2147e64cb3 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 15:06:26 +0300
Subject: [PATCH 030/128] Fix Modal live demo example path

---
 docs/src/ComponentsPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 9b34f99e72..5274006ec7 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -281,7 +281,7 @@ const ComponentsPage = React.createClass({
 
                   <h3><Anchor id='modals-live'>Live demo</Anchor></h3>
                   <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
-                  <ReactPlayground codeText={Samples.ModalTrigger} />
+                  <ReactPlayground codeText={Samples.Modal} />
 
                   <h3><Anchor id='modals-contained'>Contained Modal</Anchor></h3>
                   <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>

From 95f6c387b7181db631005f47ad18b35108a0d654 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 15:44:08 +0300
Subject: [PATCH 031/128] Remove 'Collapsible Mixin' example from docs.

because it is deprecated
---
 docs/src/ComponentsPage.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 9b34f99e72..c006f9f80c 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -247,10 +247,6 @@ const ComponentsPage = React.createClass({
                   <p><code>&lt;Accordion /&gt;</code> aliases <code>&lt;PanelGroup accordion /&gt;</code>.</p>
                   <ReactPlayground codeText={Samples.PanelGroupAccordion} />
 
-                  <h3><Anchor id='panels-collapsible'>Collapsible Mixin</Anchor></h3>
-                  <p><code>CollapsibleMixin</code> can be used to create your own components with collapse functionality.</p>
-                  <ReactPlayground codeText={Samples.CollapsibleParagraph} />
-
                   <h3><Anchor id='panels-props'>Props</Anchor></h3>
 
                   <h4><Anchor id='panels-props-accordion'>Panels, Accordion</Anchor></h4>

From 6744b94bc0276afc5aca83c036bfa5c6724ed730 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 16:21:59 +0300
Subject: [PATCH 032/128] [fixed] 'modalClassName' property for 'ModalTitle'

---
 src/ModalTitle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ModalTitle.js b/src/ModalTitle.js
index 0c44bbaee5..83d45d9833 100644
--- a/src/ModalTitle.js
+++ b/src/ModalTitle.js
@@ -5,7 +5,7 @@ class ModalTitle extends React.Component {
 
   render() {
     return (
-      <h4 {...this.props} className={classnames(this.props.className, 'modal-title')}>
+      <h4 {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
         { this.props.children }
       </h4>
     );

From cfdccd54647edeb58a16bc40144b6f26bad777ee Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Thu, 16 Jul 2015 21:49:53 +0300
Subject: [PATCH 033/128] Encourage usage of just 'attrName' instead of
 'attrName={true}'

for boolean attributes via examples to cultivate more clean code
---
 docs/examples/DropdownButtonBasic.js     |  2 +-
 docs/examples/NavBasic.js                |  2 +-
 docs/examples/NavDropdown.js             |  4 ++--
 docs/examples/NavJustified.js            |  4 ++--
 docs/examples/NavStacked.js              |  2 +-
 docs/examples/PaginationAdvanced.js      | 10 +++++-----
 docs/examples/PopoverTriggerBehaviors.js |  2 +-
 docs/examples/TabbedAreaControlled.js    |  2 +-
 docs/examples/TabbedAreaNoAnimation.js   |  2 +-
 docs/examples/TabbedAreaUncontrolled.js  |  2 +-
 docs/src/ComponentsPage.js               |  2 +-
 docs/src/ReactPlayground.js              |  2 +-
 src/Accordion.js                         |  2 +-
 13 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/examples/DropdownButtonBasic.js b/docs/examples/DropdownButtonBasic.js
index ea851b88e6..4afc050a00 100644
--- a/docs/examples/DropdownButtonBasic.js
+++ b/docs/examples/DropdownButtonBasic.js
@@ -5,7 +5,7 @@ function renderDropdownButton (title, i) {
     <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i}>
       <MenuItem eventKey='1'>Action</MenuItem>
       <MenuItem eventKey='2'>Another action</MenuItem>
-      <MenuItem eventKey='3' active={true}>Active Item</MenuItem>
+      <MenuItem eventKey='3' active>Active Item</MenuItem>
       <MenuItem divider />
       <MenuItem eventKey='4'>Separated link</MenuItem>
     </DropdownButton>
diff --git a/docs/examples/NavBasic.js b/docs/examples/NavBasic.js
index 7be936f6e4..893a3c9e2c 100644
--- a/docs/examples/NavBasic.js
+++ b/docs/examples/NavBasic.js
@@ -6,7 +6,7 @@ const navInstance = (
   <Nav bsStyle='pills' activeKey={1} onSelect={handleSelect}>
     <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
     <NavItem eventKey={2} title='Item'>NavItem 2 content</NavItem>
-    <NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem>
+    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
   </Nav>
 );
 
diff --git a/docs/examples/NavDropdown.js b/docs/examples/NavDropdown.js
index 7bdaa9e05a..5dbd3c14ad 100644
--- a/docs/examples/NavDropdown.js
+++ b/docs/examples/NavDropdown.js
@@ -8,8 +8,8 @@ const NavDropdown = React.createClass({
       <Nav bsStyle='tabs' activeKey={1} onSelect={this.handleSelect}>
         <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
         <NavItem eventKey={2} title='Item'>NavItem 2 content</NavItem>
-        <NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem>
-        <DropdownButton eventKey={4} title='Dropdown' navItem={true}>
+        <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
+        <DropdownButton eventKey={4} title='Dropdown' navItem>
           <MenuItem eventKey='4.1'>Action</MenuItem>
           <MenuItem eventKey='4.2'>Another action</MenuItem>
           <MenuItem eventKey='4.3'>Something else here</MenuItem>
diff --git a/docs/examples/NavJustified.js b/docs/examples/NavJustified.js
index 7478e89515..a3ab43b30e 100644
--- a/docs/examples/NavJustified.js
+++ b/docs/examples/NavJustified.js
@@ -9,13 +9,13 @@ const NavJustified = React.createClass({
         <Nav bsStyle='tabs' justified activeKey={1} onSelect={this.handleSelect}>
           <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
           <NavItem eventKey={2} title='Item'>NavItem 2 content</NavItem>
-          <NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem>
+          <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
         </Nav>
         <br />
         <Nav bsStyle='pills' justified activeKey={1} onSelect={this.handleSelect}>
           <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
           <NavItem eventKey={2} title='Item'>NavItem 2 content</NavItem>
-          <NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem>
+          <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
         </Nav>
       </div>
     );
diff --git a/docs/examples/NavStacked.js b/docs/examples/NavStacked.js
index 3f8b615cd4..b2ad7fd793 100644
--- a/docs/examples/NavStacked.js
+++ b/docs/examples/NavStacked.js
@@ -6,7 +6,7 @@ const navInstance = (
   <Nav bsStyle='pills' stacked activeKey={1} onSelect={handleSelect}>
     <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
     <NavItem eventKey={2} title='Item'>NavItem 2 content</NavItem>
-    <NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem>
+    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
   </Nav>
 );
 
diff --git a/docs/examples/PaginationAdvanced.js b/docs/examples/PaginationAdvanced.js
index c2a71a21a5..817641efef 100644
--- a/docs/examples/PaginationAdvanced.js
+++ b/docs/examples/PaginationAdvanced.js
@@ -14,11 +14,11 @@ const PaginationAdvanced = React.createClass({
   render() {
     return (
       <Pagination
-        prev={true}
-        next={true}
-        first={true}
-        last={true}
-        ellipsis={true}
+        prev
+        next
+        first
+        last
+        ellipsis
         items={20}
         maxButtons={5}
         activePage={this.state.activePage}
diff --git a/docs/examples/PopoverTriggerBehaviors.js b/docs/examples/PopoverTriggerBehaviors.js
index 20e68a15b6..c539ee3a81 100644
--- a/docs/examples/PopoverTriggerBehaviors.js
+++ b/docs/examples/PopoverTriggerBehaviors.js
@@ -9,7 +9,7 @@ const positionerInstance = (
     <OverlayTrigger trigger='focus' placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
       <Button bsStyle='default'>Focus</Button>
     </OverlayTrigger>
-    <OverlayTrigger trigger='click' rootClose={true} placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+    <OverlayTrigger trigger='click' rootClose placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
       <Button bsStyle='default'>Click + rootClose</Button>
     </OverlayTrigger>
   </ButtonToolbar>
diff --git a/docs/examples/TabbedAreaControlled.js b/docs/examples/TabbedAreaControlled.js
index 690bf09f63..9e197e496f 100644
--- a/docs/examples/TabbedAreaControlled.js
+++ b/docs/examples/TabbedAreaControlled.js
@@ -15,7 +15,7 @@ const ControlledTabArea = React.createClass({
       <TabbedArea activeKey={this.state.key} onSelect={this.handleSelect}>
         <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
         <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
-        <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
+        <TabPane eventKey={3} tab='Tab 3' disabled>TabPane 3 content</TabPane>
       </TabbedArea>
     );
   }
diff --git a/docs/examples/TabbedAreaNoAnimation.js b/docs/examples/TabbedAreaNoAnimation.js
index 2b9067632a..be5d2b4ab2 100644
--- a/docs/examples/TabbedAreaNoAnimation.js
+++ b/docs/examples/TabbedAreaNoAnimation.js
@@ -2,7 +2,7 @@ const tabbedAreaInstance = (
   <TabbedArea defaultActiveKey={1} animation={false}>
     <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
     <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
-    <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
+    <TabPane eventKey={3} tab='Tab 3' disabled>TabPane 3 content</TabPane>
   </TabbedArea>
 );
 
diff --git a/docs/examples/TabbedAreaUncontrolled.js b/docs/examples/TabbedAreaUncontrolled.js
index 90af3efcc3..4b4a7dffcf 100644
--- a/docs/examples/TabbedAreaUncontrolled.js
+++ b/docs/examples/TabbedAreaUncontrolled.js
@@ -2,7 +2,7 @@ const tabbedAreaInstance = (
   <TabbedArea defaultActiveKey={2}>
     <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
     <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
-    <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
+    <TabPane eventKey={3} tab='Tab 3' disabled>TabPane 3 content</TabPane>
   </TabbedArea>
 );
 
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 9b34f99e72..fcab77367b 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -487,7 +487,7 @@ const ComponentsPage = React.createClass({
 
                   <h3><Anchor id='navbars-mobile-friendly'>Mobile Friendly</Anchor></h3>
                   <p>To have a mobile friendly Navbar, specify the property <code>toggleNavKey</code> on the Navbar with a value corresponding to an <code>eventKey</code> of one of his <code>Nav</code> children. This child will be the one collapsed.</p>
-                  <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded={true}')} the Navbar will start expanded by default.</p>
+                  <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded')} the Navbar will start expanded by default.</p>
                   <div className='bs-callout bs-callout-info'>
                     <h4>Scrollbar overflow</h4>
                     <p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 8dcf69d7b0..b966cd9dcd 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -328,7 +328,7 @@ const ReactPlayground = React.createClass({
 
       if (this.props.renderCode) {
         React.render(
-          <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
+          <CodeMirrorEditor codeText={compiledCode} readOnly />,
           mountNode
         );
       } else {
diff --git a/src/Accordion.js b/src/Accordion.js
index 2aee587d9b..cc8e24555d 100644
--- a/src/Accordion.js
+++ b/src/Accordion.js
@@ -4,7 +4,7 @@ import PanelGroup from './PanelGroup';
 const Accordion = React.createClass({
   render() {
     return (
-      <PanelGroup {...this.props} accordion={true}>
+      <PanelGroup {...this.props} accordion>
         {this.props.children}
       </PanelGroup>
     );

From 73483e53031201e297f16349bf575e26523158ee Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 16:33:21 +0300
Subject: [PATCH 034/128] Simplify 'aria-expanded' values setting for 'Panel'

http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

It is not necessary to set them explicitly to strings.
Here https://github.com/react-bootstrap/react-bootstrap/blob/c3b41af621e9b4d4fbdc8a095b2d666420735534/src/Collapse.js#L51
we already do it like this:
`aria-expanded={this.props.in}`

Tests are asserting this
https://github.com/react-bootstrap/react-bootstrap/blob/ccc50e01917ba75e5a983ba068c1db4b790bb85d/test/PanelSpec.js#L196
https://github.com/react-bootstrap/react-bootstrap/blob/ccc50e01917ba75e5a983ba068c1db4b790bb85d/test/PanelSpec.js#L206
---
 src/Panel.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Panel.js b/src/Panel.js
index d6dd1ae24a..7499aa8254 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -80,7 +80,7 @@ const Panel = React.createClass({
           className={collapseClass}
           id={this.props.id}
           ref='panel'
-          aria-expanded={this.isExpanded() ? 'true' : 'false'}>
+          aria-expanded={this.isExpanded()}>
           {this.renderBody()}
 
         </div>
@@ -187,7 +187,7 @@ const Panel = React.createClass({
         href={'#' + (this.props.id || '')}
         aria-controls={this.props.collapsible ? this.props.id : null}
         className={this.isExpanded() ? null : 'collapsed'}
-        aria-expanded={this.isExpanded() ? 'true' : 'false'}
+        aria-expanded={this.isExpanded()}
         onClick={this.handleSelect}>
         {header}
       </a>

From bf6322d1f9830ce4e813c9a986898a975692bcf1 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Fri, 17 Jul 2015 09:45:13 -0400
Subject: [PATCH 035/128] Fixes issue where rootClose wasn't working with
 Overlays

---
 src/Overlay.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/Overlay.js b/src/Overlay.js
index a5b27d923f..8e3e996e5b 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -18,9 +18,17 @@ class Overlay extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.show){
-      this.setState({ exited: false });
+    let state = {};
+
+    if ( !nextProps.show && this.props.show ){
+      state.exiting = true;
+    }
+
+    if (nextProps.show) {
+      state = { exited: false, exiting: false };
     }
+
+    this.setState(state);
   }
 
   render(){
@@ -40,7 +48,7 @@ class Overlay extends React.Component {
       Transition = Fade;
     }
 
-    if (props.show || (Transition && !this.state.exited)) {
+    if (props.show || (Transition && this.state.exiting && !this.state.exited)) {
 
       child = children;
 
@@ -57,14 +65,14 @@ class Overlay extends React.Component {
               unmountOnExit
               in={props.show}
               transitionAppear={props.show}
-              onHidden={this.onHiddenListener}
+              onExited={this.onHiddenListener}
             >
               { child }
             </Transition>
           )
           : cloneElement(child, { className: classNames('in', child.className) });
 
-
+      //Adds a wrapping div so it cannot be before Transition
       if (rootClose) {
         child = (
           <RootCloseWrapper onRootClose={props.onHide}>
@@ -74,6 +82,7 @@ class Overlay extends React.Component {
       }
     }
 
+
     return (
       <Portal container={container}>
         { child }
@@ -82,7 +91,7 @@ class Overlay extends React.Component {
   }
 
   handleHidden(){
-    this.setState({ exited: true });
+    this.setState({ exited: true, exiting: false });
   }
 }
 

From 451cef06c7ace0c728297b84609a10e31db2cc72 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 16:45:25 +0300
Subject: [PATCH 036/128] Remove leftover for 'ModalTrigger' on 'Components'
 page

---
 docs/src/ComponentsPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 9b34f99e72..aa36e8b31a 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -323,8 +323,6 @@ const ComponentsPage = React.createClass({
                   <PropTable component='ModalFooter'/>
 
                   <h4>ModalTrigger <strong className='text-danger'>Deprecated: use the Modal directly to manage it's visibility</strong></h4>
-                  <PropTable component='ModalTrigger'/>
-
                 </div>
 
 

From f0ab05a8b6e8eba925f8ddbc384bbfe7aed6c219 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 18:46:38 +0300
Subject: [PATCH 037/128] Impose 'react/jsx-boolean-value' eslint rule

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
---
 .eslintrc      | 1 +
 test/.eslintrc | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.eslintrc b/.eslintrc
index 0f684e8fc6..cedef098a6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -24,6 +24,7 @@
     "babel/object-shorthand": 2,
     "quotes": [2, "single", "avoid-escape"],
     "react/display-name": 0,
+    "react/jsx-boolean-value": [2, "never"],
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
     "react/no-did-mount-set-state": 2,
diff --git a/test/.eslintrc b/test/.eslintrc
index bb09bc4415..8a24fb457f 100644
--- a/test/.eslintrc
+++ b/test/.eslintrc
@@ -13,6 +13,7 @@
   "rules": {
     "no-script-url": 0,
     "no-unused-expressions": 0,
+    "react/jsx-boolean-value": 0,
     "react/no-multi-comp": 0,
     "react/prop-types": 0,
     "mocha/no-exclusive-tests": 2

From 8ab0aacf5f37da231403606c6389150286c7c7eb Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 18:52:28 +0300
Subject: [PATCH 038/128] Remove leftover for 'ModalTrigger' from docs.

---
 docs/src/ComponentsPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 03c17b9ef7..361e4ef310 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -317,8 +317,6 @@ const ComponentsPage = React.createClass({
 
                   <h4><Anchor id='modals-props-modal-footer'>Modal.Footer</Anchor></h4>
                   <PropTable component='ModalFooter'/>
-
-                  <h4>ModalTrigger <strong className='text-danger'>Deprecated: use the Modal directly to manage it's visibility</strong></h4>
                 </div>
 
 

From 75e0c3c997735113a5b39398d9178298c1f74c26 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 17 Jul 2015 11:57:46 -0400
Subject: [PATCH 039/128] Fix ModalCustomSizing example

Fixes #1003
---
 docs/examples/ModalCustomSizing.js | 21 +++++++++++++--------
 docs/src/ComponentsPage.js         |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
index 701d67338a..d87168bd59 100644
--- a/docs/examples/ModalCustomSizing.js
+++ b/docs/examples/ModalCustomSizing.js
@@ -1,21 +1,27 @@
 const Example = React.createClass({
+  getInitialState() {
+    return {show: false};
+  },
 
-  getInitialState(){
-    return { show: false };
+  showModal() {
+    this.setState({show: true});
   },
 
-  render(){
-    let close = e => this.setState({ show: false });
+  hideModal() {
+    this.setState({show: false});
+  },
 
+  render() {
     return (
       <ButtonToolbar>
-        <Button bsStyle='primary' onClick={()=>this.setState({ show: true })}>
+        <Button bsStyle='primary' onClick={this.showModal}>
           Launch demo modal
         </Button>
 
         <Modal
           {...this.props}
-          onHide={close}
+          show={this.state.show}
+          onHide={this.hideModal}
           dialogClassName='custom-modal'
         >
           <Modal.Header closeButton>
@@ -40,7 +46,7 @@ const Example = React.createClass({
              similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
           </Modal.Body>
           <Modal.Footer>
-            <Button onClick={close}>Close</Button>
+            <Button onClick={this.hideModal}>Close</Button>
           </Modal.Footer>
         </Modal>
       </ButtonToolbar>
@@ -48,5 +54,4 @@ const Example = React.createClass({
   }
 });
 
-
 React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 03c17b9ef7..2c96401e0f 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -297,7 +297,7 @@ const ComponentsPage = React.createClass({
                   <p>You can specify a bootstrap large or small modal by using the "bsSize" prop.</p>
                   <ReactPlayground codeText={Samples.ModalDefaultSizing} />
 
-                  <h3><Anchor id='modal-custom-sizing'>Sizing modals using custom css</Anchor></h3>
+                  <h3><Anchor id='modal-custom-sizing'>Sizing modals using custom CSS</Anchor></h3>
                   <p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
                   <ReactPlayground codeText={Samples.ModalCustomSizing} />
 

From 947894f8ad2edf3418ca78abe087db370851c74a Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 17 Jul 2015 12:06:50 -0400
Subject: [PATCH 040/128] Ensure tooltips are shown in TooltipBasic

---
 docs/examples/TooltipBasic.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/examples/TooltipBasic.js b/docs/examples/TooltipBasic.js
index ff21989d5e..25d941638c 100644
--- a/docs/examples/TooltipBasic.js
+++ b/docs/examples/TooltipBasic.js
@@ -1,17 +1,18 @@
 const tooltipInstance = (
   <div>
-    <Tooltip placement="right">
+    <Tooltip placement="right" className="in">
       Tooltip right
     </Tooltip>
-    <Tooltip placement="top">
+
+    <Tooltip placement="top" className="in">
       Tooltip top
     </Tooltip>
 
-    <Tooltip placement="left">
+    <Tooltip placement="left" className="in">
       Tooltip left
     </Tooltip>
 
-    <Tooltip placement="bottom">
+    <Tooltip placement="bottom" className="in">
       Tooltip bottom
     </Tooltip>
   </div>

From 440126beb0adb63fad0fc995ccc6004429378a7d Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 17 Jul 2015 12:16:54 -0400
Subject: [PATCH 041/128] Remove irrelevant ModalStatic example

Fixes #1001
---
 docs/examples/ModalStatic.js | 27 ---------------------------
 docs/src/ComponentsPage.js   | 12 +++++-------
 docs/src/Samples.js          |  1 -
 3 files changed, 5 insertions(+), 35 deletions(-)
 delete mode 100644 docs/examples/ModalStatic.js

diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
deleted file mode 100644
index 138c55f050..0000000000
--- a/docs/examples/ModalStatic.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const modalInstance = (
-  <div className='static-modal'>
-    <Modal
-      enforceFocus={false}
-      autoFocus={false}
-      backdrop={false}
-      animation={false}
-      container={mountNode}
-      onHide={function(){}}>
-
-      <Modal.Header closeButton>
-        <Modal.Title>Modal title</Modal.Title>
-      </Modal.Header>
-
-      <Modal.Body>
-        One fine body...
-      </Modal.Body>
-
-      <Modal.Footer>
-        <Button>Close</Button>
-        <Button bsStyle='primary'>Save changes</Button>
-      </Modal.Footer>
-    </Modal>
-  </div>
-);
-
-React.render(modalInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 361e4ef310..e946ec2a03 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -260,12 +260,15 @@ const ComponentsPage = React.createClass({
                 <div className='bs-docs-section'>
                   <h1 className='page-header'><Anchor id='modals'>Modals</Anchor> <small>Modal</small></h1>
 
-                  <h3><Anchor id='modals-static'>A static example</Anchor></h3>
+                  <h3><Anchor id='modals-live'>Basic example</Anchor></h3>
+                  <p></p>
                   <p>
-                    A rendered modal with header, body, and set of actions in the footer. The <code>{'<Modal/>'}</code> Component comes with
+                    A modal with header, body, and set of actions in the footer. Use <code>{'<Modal/>'}</code> in combination with other components to
+                    show or hide your Modal. The <code>{'<Modal/>'}</code> Component comes with
                     a few convenient "sub components": <code>{'<Modal.Header/>'}</code>, <code>{'<Modal.Title/>'}</code>, <code>{'<Modal.Body/>'}</code>,
                     and <code>{'<Modal.Footer/>'}</code>, which you can use to build the Modal content.
                   </p>
+                  <ReactPlayground codeText={Samples.Modal} />
                   <div className='bs-callout bs-callout-info'>
                     <h4>Additional Import Options</h4>
                     <p>
@@ -273,11 +276,6 @@ const ComponentsPage = React.createClass({
                       import them directly from the <code>/lib</code> directory like: <code>{"require('react-bootstrap/lib/ModalHeader')"}</code>.
                     </p>
                   </div>
-                  <ReactPlayground codeText={Samples.ModalStatic} />
-
-                  <h3><Anchor id='modals-live'>Live demo</Anchor></h3>
-                  <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
-                  <ReactPlayground codeText={Samples.Modal} />
 
                   <h3><Anchor id='modals-contained'>Contained Modal</Anchor></h3>
                   <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index fffdbba1dc..67b1580bd8 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -33,7 +33,6 @@ export default {
   PanelGroupUncontrolled:        require('fs').readFileSync(__dirname + '/../examples/PanelGroupUncontrolled.js', 'utf8'),
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
-  ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),

From cb6fc612217b4fd06e3a8411cd40c5db63a2b61b Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 17 Jul 2015 14:23:41 -0400
Subject: [PATCH 042/128] Forward animation prop to Overlay from trigger

---
 src/OverlayTrigger.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index b90215f353..783e3b4ee8 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -21,7 +21,6 @@ function isOneOf(one, of) {
 }
 
 const OverlayTrigger = React.createClass({
-
   propTypes: {
 
     ...Overlay.propTypes,
@@ -142,12 +141,17 @@ const OverlayTrigger = React.createClass({
     React.render(this._overlay, this._mountNode);
   },
 
-  getOverlay(){
+  getOverlayTarget() {
+    return React.findDOMNode(this);
+  },
+
+  getOverlay() {
     let props = {
       show:      this.state.isOverlayShown,
       onHide:    this.hide,
       rootClose: this.props.rootClose,
-      target:    ()=> React.findDOMNode(this),
+      animation: this.props.animation,
+      target: this.getOverlayTarget,
       placement: this.props.placement,
       container: this.props.container,
       containerPadding: this.props.containerPadding

From a4385d3fd1f863228458b4b956fdadd469195860 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Fri, 17 Jul 2015 14:34:19 -0400
Subject: [PATCH 043/128] [fixed] Portal doesn't mount extra node

fixes #990
---
 src/Portal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Portal.js b/src/Portal.js
index 575f93268b..4cccd243e7 100644
--- a/src/Portal.js
+++ b/src/Portal.js
@@ -24,7 +24,7 @@ let Portal = React.createClass({
 
   componentWillUnmount() {
     this._unrenderOverlay();
-    this._mountOverlayTarget();
+    this._unmountOverlayTarget();
   },
 
   _mountOverlayTarget() {

From fbf9ed64ca2dedd8dde5245e99f9c6b59b8790f4 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Sun, 19 Jul 2015 07:38:24 -0600
Subject: [PATCH 044/128] [changed] Add deprecation warning that factories will
 be removed

For details see #825
---
 src/templates/factory.index.js.template | 2 ++
 src/templates/factory.js.template       | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/templates/factory.index.js.template b/src/templates/factory.index.js.template
index de68c1c23e..baaeb1ef02 100644
--- a/src/templates/factory.index.js.template
+++ b/src/templates/factory.index.js.template
@@ -2,6 +2,8 @@
 import <%= component %> from './<%= component %>';
 <% }); %>
 
+console.warn('Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
+
 export default {
 <% _.forEach(components, function (component) { %>
   <%= component %>,
diff --git a/src/templates/factory.js.template b/src/templates/factory.js.template
index d89a79c954..051dbd144e 100644
--- a/src/templates/factory.js.template
+++ b/src/templates/factory.js.template
@@ -1,4 +1,6 @@
 import React from 'react';
 import <%= name %> from '../<%= name %>';
 
+console.warn('Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
+
 export default React.createFactory(<%= name %>);

From c837d8db301ffbe669166c7bd07ec0556ec3dfe5 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Mon, 20 Jul 2015 03:12:37 -0400
Subject: [PATCH 045/128] [fixed] Only calculate overlay position on display

Fixes #1018
---
 src/Collapse.js        |  72 +++++----
 src/Fade.js            |  68 ++++----
 src/Overlay.js         |  96 +++++------
 src/Position.js        |  93 ++++++-----
 src/Transition.js      | 350 ++++++++++++++++++++---------------------
 test/TransitionSpec.js |  52 ++----
 6 files changed, 349 insertions(+), 382 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 505c116085..299ec8a625 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -115,84 +115,82 @@ class Collapse extends React.Component {
 
 Collapse.propTypes = {
   /**
-   * Collapse the Component in or out.
+   * Whether the component is entered; triggers the enter or exit animation
    */
-  in:       React.PropTypes.bool,
+  in: React.PropTypes.bool,
 
   /**
-   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
-   * original browser transition end events are canceled.
+   * Whether the component should be unmounted (removed from DOM) when exited
    */
-  duration:          React.PropTypes.number,
+  unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Specifies the dimension used when collapsing.
-   *
-   * _Note: Bootstrap only partially supports 'width'!
-   * You will need to supply your own css animation for the `.width` css class._
+   * Whether transition in should run when the Transition component mounts, if
+   * the component is initially entered
    */
-  dimension: React.PropTypes.oneOfType([
-    React.PropTypes.oneOf(['height', 'width']),
-    React.PropTypes.func
-  ]),
+  transitionAppear: React.PropTypes.bool,
 
   /**
-   * A function that returns the height or width of the animating DOM node. Allows for providing some custom logic how much
-   * Collapse component should animate in its specified dimension.
-   *
-   * `getDimensionValue` is called with the current dimension prop value and the DOM node.
+   * Duration of the animation in milliseconds, to ensure that finishing
+   * callbacks are fired even if the original browser transition end events are
+   * canceled
    */
-  getDimensionValue: React.PropTypes.func,
+  duration: React.PropTypes.number,
 
   /**
-   * A Callback fired before the component starts to expand.
+   * Callback fired before the "entering" classes are applied
    */
   onEnter: React.PropTypes.func,
-
   /**
-   * A Callback fired immediately after the component starts to expand.
+   * Callback fired after the "entering" classes are applied
    */
   onEntering: React.PropTypes.func,
-
   /**
-   * A Callback fired after the component has expanded.
+   * Callback fired after the "enter" classes are applied
    */
   onEntered: React.PropTypes.func,
-
   /**
-   * A Callback fired before the component starts to collapse.
+   * Callback fired before the "exiting" classes are applied
    */
   onExit: React.PropTypes.func,
-
   /**
-   * A Callback fired immediately after the component starts to collapse.
+   * Callback fired after the "exiting" classes are applied
    */
   onExiting: React.PropTypes.func,
-
   /**
-   * A Callback fired after the component has collapsed.
+   * Callback fired after the "exited" classes are applied
    */
   onExited: React.PropTypes.func,
 
   /**
-   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   * The dimension used when collapsing
+   *
+   * _Note: Bootstrap only partially supports 'width'!
+   * You will need to supply your own CSS animation for the `.width` CSS class._
    */
-  unmountOnExit:     React.PropTypes.bool,
+  dimension: React.PropTypes.oneOfType([
+    React.PropTypes.oneOf(['height', 'width']),
+    React.PropTypes.func
+  ]),
 
   /**
-   * Specify whether the component should collapse or expand when it mounts.
+   * Function that returns the height or width of the animating DOM node
+   *
+   * Allows for providing some custom logic for how much the Collapse component
+   * should animate in its specified dimension. Called with the current
+   * dimension prop value and the DOM node.
    */
-  transitionAppear: React.PropTypes.bool
+  getDimensionValue: React.PropTypes.func
 };
 
 Collapse.defaultProps = {
-  in:       false,
+  in: false,
   duration: 300,
-  dimension: 'height',
-  transitionAppear: false,
   unmountOnExit: false,
+  transitionAppear: false,
+
+  dimension: 'height',
   getDimensionValue
 };
 
 export default Collapse;
-
diff --git a/src/Fade.js b/src/Fade.js
index 523508fff5..528e839d85 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -2,87 +2,77 @@ import React from 'react';
 import Transition from './Transition';
 
 class Fade extends React.Component {
-
-  constructor(props, context){
-    super(props, context);
-  }
-
   render() {
     return (
       <Transition
         {...this.props}
-        in={this.props.in}
         className='fade'
         enteredClassName='in'
         enteringClassName='in'
       >
-        { this.props.children }
+        {this.props.children}
       </Transition>
     );
   }
 }
 
+// Explicitly copied from Transition for doc generation.
+
 Fade.propTypes = {
   /**
-   * Fade the Component in or out.
+   * Whether the component is entered; triggers the enter or exit animation
    */
-  in:       React.PropTypes.bool,
+  in: React.PropTypes.bool,
 
   /**
-   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
-   * original browser transition end events are canceled.
+   * Whether the component should be unmounted (removed from DOM) when exited
    */
-  duration:          React.PropTypes.number,
+  unmountOnExit: React.PropTypes.bool,
 
   /**
-   * A Callback fired before the component starts to fade in.
+   * Whether transition in should run when the Transition component mounts, if
+   * the component is initially entered
    */
-  onEnter: React.PropTypes.func,
+  transitionAppear: React.PropTypes.bool,
 
   /**
-   * A Callback fired immediately after the component has started to faded in.
+   * Duration of the animation in milliseconds, to ensure that finishing
+   * callbacks are fired even if the original browser transition end events are
+   * canceled
    */
-  onEntering: React.PropTypes.func,
+  duration: React.PropTypes.number,
 
   /**
-   * A Callback fired after the component has faded in.
+   * Callback fired before the "entering" classes are applied
    */
-  onEntered: React.PropTypes.func,
-
+  onEnter: React.PropTypes.func,
   /**
-   * A Callback fired before the component starts to fade out.
+   * Callback fired after the "entering" classes are applied
    */
-  onExit: React.PropTypes.func,
-
+  onEntering: React.PropTypes.func,
   /**
-   * A Callback fired immediately after the component has started to faded out.
+   * Callback fired after the "enter" classes are applied
    */
-  onExiting: React.PropTypes.func,
-
+  onEntered: React.PropTypes.func,
   /**
-   * A Callback fired after the component has faded out.
+   * Callback fired before the "exiting" classes are applied
    */
-  onExited: React.PropTypes.func,
-
-
+  onExit: React.PropTypes.func,
   /**
-   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   * Callback fired after the "exiting" classes are applied
    */
-  unmountOnExit:     React.PropTypes.bool,
-
+  onExiting: React.PropTypes.func,
   /**
-   * Specify whether the component should fade in or out when it mounts.
+   * Callback fired after the "exited" classes are applied
    */
-  transitionAppear: React.PropTypes.bool
-
+  onExited: React.PropTypes.func
 };
 
 Fade.defaultProps = {
-  in:       false,
+  in: false,
   duration: 300,
-  dimension: 'height',
-  transitionAppear: false,
-  unmountOnExit: false
+  unmountOnExit: false,
+  transitionAppear: false
 };
 
 export default Fade;
diff --git a/src/Overlay.js b/src/Overlay.js
index 8e3e996e5b..0a4932903e 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -7,31 +7,24 @@ import CustomPropTypes from './utils/CustomPropTypes';
 import Fade from './Fade';
 import classNames from 'classnames';
 
-
 class Overlay extends React.Component {
-
-  constructor(props, context){
+  constructor(props, context) {
     super(props, context);
 
-    this.state = { exited: false };
+    this.state = {exited: !props.show};
     this.onHiddenListener = this.handleHidden.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
-    let state = {};
-
-    if ( !nextProps.show && this.props.show ){
-      state.exiting = true;
-    }
-
     if (nextProps.show) {
-      state = { exited: false, exiting: false };
+      this.setState({exited: false});
+    } else if (!nextProps.animation) {
+      // Otherwise let handleHidden take care of marking exited.
+      this.setState({exited: true});
     }
-
-    this.setState(state);
   }
 
-  render(){
+  render() {
     let {
         container
       , containerPadding
@@ -42,56 +35,63 @@ class Overlay extends React.Component {
       , animation: Transition
       , ...props } = this.props;
 
-    let child = null;
-
-    if ( Transition === true ){
+    if (Transition === true) {
       Transition = Fade;
     }
 
-    if (props.show || (Transition && this.state.exiting && !this.state.exited)) {
+    // Don't un-render the overlay while it's transitioning out.
+    const mountOverlay = props.show || (Transition && !this.state.exited);
+
+    if (!mountOverlay) {
+      // Don't bother showing anything if we don't have to.
+      return null;
+    }
 
-      child = children;
+    let child = children;
 
-      // Position the child before the animation to avoid `null` DOM nodes
+    if (Transition) {
+      // This animates the child by injecting props, so it must be inner-most.
       child = (
-        <Position {...{ container, containerPadding, target, placement }}>
-          { child }
-        </Position>
+        <Transition
+          in={props.show}
+          transitionAppear
+          onExited={this.onHiddenListener}
+        >
+          {child}
+        </Transition>
+      );
+    } else {
+      child = cloneElement(
+        child,
+        {className: classNames('in', child.className)}
       );
-
-      child = Transition
-          ? (
-            <Transition
-              unmountOnExit
-              in={props.show}
-              transitionAppear={props.show}
-              onExited={this.onHiddenListener}
-            >
-              { child }
-            </Transition>
-          )
-          : cloneElement(child, { className: classNames('in', child.className) });
-
-      //Adds a wrapping div so it cannot be before Transition
-      if (rootClose) {
-        child = (
-          <RootCloseWrapper onRootClose={props.onHide}>
-            { child }
-          </RootCloseWrapper>
-        );
-      }
     }
 
+    // This must wrap the transition to avoid position recalculations.
+    child = (
+      <Position {...{container, containerPadding, target, placement}}>
+        {child}
+      </Position>
+    );
+
+    // This goes after everything else because it adds a wrapping div.
+    if (rootClose) {
+      child = (
+        <RootCloseWrapper onRootClose={props.onHide}>
+          {child}
+        </RootCloseWrapper>
+      );
+    }
 
     return (
       <Portal container={container}>
-        { child }
+        {child}
       </Portal>
     );
   }
 
-  handleHidden(){
-    this.setState({ exited: true, exiting: false });
+  handleHidden() {
+    this.setState({exited: true});
   }
 }
 
diff --git a/src/Position.js b/src/Position.js
index 6b3b8ff9a0..cb4408e041 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -4,9 +4,9 @@ import { calcOverlayPosition } from './utils/overlayPositionUtils';
 import CustomPropTypes from './utils/CustomPropTypes';
 
 class Position extends React.Component {
-
   constructor(props, context){
     super(props, context);
+
     this.state = {
       positionLeft: null,
       positionTop: null,
@@ -15,33 +15,35 @@ class Position extends React.Component {
     };
   }
 
-  componentWillMount(){
-    this._needsFlush = true;
+  componentDidMount() {
+    this.updatePosition(this.props, this.getTargetSafe(this.props));
   }
 
-  componentWillReceiveProps(){
-    this._needsFlush = true;
-  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.target !== this.props.target) {
+      const target = this.getTargetSafe(this.props);
+      const nextTarget = this.getTargetSafe(nextProps);
 
-  componentDidMount(){
-    this._maybeUpdatePosition();
-  }
-  componentDidUpdate(){
-    this._maybeUpdatePosition();
+      if (nextTarget !== target) {
+        this.updatePosition(nextProps, nextTarget);
+      }
+    }
   }
 
   render() {
-    let { children, ...props } = this.props;
-    let { positionLeft, positionTop, ...arrows } = this.props.target ? this.state : {};
+    const {children, ...props} = this.props;
+    const {positionLeft, positionTop, ...arrowPosition } = this.state;
 
+    const child = React.Children.only(children);
     return cloneElement(
-      React.Children.only(children), {
+      child,
+      {
         ...props,
-        ...arrows,
+        ...arrowPosition,
         positionTop,
         positionLeft,
         style: {
-          ...children.props.style,
+          ...child.props.style,
           left: positionLeft,
           top: positionTop
         }
@@ -49,55 +51,62 @@ class Position extends React.Component {
     );
   }
 
-  _maybeUpdatePosition(){
-    if ( this._needsFlush ) {
-      this._needsFlush = false;
-      this._updatePosition();
+  getTargetSafe(props) {
+    if (!props.target) {
+      return null;
     }
+
+    return props.target(props);
   }
 
-  _updatePosition() {
-    if ( this.props.target == null ){
+  updatePosition(props, target) {
+    if (!target) {
+      this.setState({
+        positionLeft: null,
+        positionTop: null,
+        arrowOffsetLeft: null,
+        arrowOffsetTop: null
+      });
+
       return;
     }
 
-    let overlay = React.findDOMNode(this);
-    let target = React.findDOMNode(this.props.target(this.props));
-    let container = React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
-
-    this.setState(
-      calcOverlayPosition(
-          this.props.placement
-        , overlay
-        , target
-        , container
-        , this.props.containerPadding));
+    const overlay = React.findDOMNode(this);
+    const container =
+      React.findDOMNode(props.container) || domUtils.ownerDocument(this).body;
+
+    this.setState(calcOverlayPosition(
+      props.placement,
+      overlay,
+      target,
+      container,
+      props.containerPadding
+    ));
   }
 }
 
 Position.propTypes = {
   /**
-   * The target DOM node the Component is positioned next too.
+   * Function mapping props to DOM node the component is positioned next to
    */
-  target:           React.PropTypes.func,
+  target: React.PropTypes.func,
   /**
-   * The "offsetParent" of the Component
+   * "offsetParent" of the component
    */
-  container:        CustomPropTypes.mountable,
+  container: CustomPropTypes.mountable,
   /**
-   * Distance in pixels the Component should be positioned to the edge of the Container.
+   * Minimum spacing in pixels between container border and component border
    */
   containerPadding: React.PropTypes.number,
   /**
-   * The location that the overlay should be positioned to its target.
+   * How to position the component relative to the target
    */
-  placement:        React.PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+  placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 
 Position.defaultProps = {
   containerPadding: 0,
-  placement:        'right'
+  placement: 'right'
 };
 
-
 export default Position;
diff --git a/src/Transition.js b/src/Transition.js
index a49124aac7..85eb05c5f6 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -2,284 +2,274 @@ import React from 'react';
 import TransitionEvents from './utils/TransitionEvents';
 import classnames from 'classnames';
 
-function omit(obj, keys) {
-  let included = Object.keys(obj).filter( k => keys.indexOf(k) === -1);
-  let newObj = {};
-
-  included.forEach( key => newObj[key] = obj[key] );
-  return newObj;
-}
-
-function ensureTransitionEnd(node, handler, duration){
-  let fired = false;
-  let done = e => {
-        if (!fired) {
-          fired = true;
-          handler(e);
-        }
-      };
-
-  if ( node ) {
-    TransitionEvents.addEndEventListener(node, done);
-    setTimeout(done, duration);
-  } else {
-    setTimeout(done, 0);
-  }
-}
-
-// reading a dimension prop will cause the browser to recalculate,
-// which will let our animations work
-let triggerBrowserReflow = node => node.offsetHeight; //eslint-disable-line no-unused-expressions
+const UNMOUNTED = 0;
+export const EXITED = 1;
+export const ENTERING = 2;
+export const ENTERED = 3;
+export const EXITING = 4;
 
 class Transition extends React.Component {
-
-  constructor(props, context){
+  constructor(props, context) {
     super(props, context);
 
-    this.state = {
-      in: !props.in,
-      transitioning: false
-    };
+    let initialStatus;
+    if (props.in) {
+      // Perform enter in performNextTransition from componentDidMount.
+      initialStatus = props.transitionAppear ? EXITED : ENTERED;
+    } else {
+      initialStatus = props.unmountOnExit ? UNMOUNTED : EXITED;
+    }
+    this.state = {status: initialStatus};
 
-    this.needsTransition = true;
+    this.nextCallback = null;
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.in !== this.props.in) {
-      this.needsTransition = true;
-    }
+  componentDidMount() {
+    this.performNextTransition();
   }
 
-  componentDidUpdate() {
-    this.processChild();
-  }
+  componentWillReceiveProps(nextProps) {
+    const status = this.state.status;
+    if (nextProps.in) {
+      if (status === EXITING) {
+        this.performEnter(nextProps);
+      } else if (this.props.unmountOnExit) {
+        // Perform enter in performNextTransition.
+        if (status === UNMOUNTED) {
+          this.setState({status: EXITED});
+        }
+      } else if (status === EXITED) {
+        this.performEnter(nextProps);
+      }
 
-  componentWillMount() {
-    this._mounted = true;
+      // Otherwise we're already entering or entered.
+    } else {
+      if (status === ENTERING || status === ENTERED) {
+        this.performExit(nextProps);
+      }
 
-    if (!this.props.transitionAppear) {
-      this.needsTransition = false;
-      this.setState({ in: this.props.in });
+      // Otherwise we're already exited or exiting.
     }
   }
 
-  componentWillUnmount(){
-    this._mounted = false;
+  componentDidUpdate() {
+    this.performNextTransition();
   }
 
-  componentDidMount() {
-    if (this.props.transitionAppear) {
-      this.processChild();
-    }
+  componentWillUnmount() {
+    this.cancelNextCallback();
   }
 
-  processChild(){
-    let needsTransition = this.needsTransition;
-    let enter = this.props.in;
-
-    if (needsTransition) {
-      this.needsTransition = false;
-      this[enter ? 'performEnter' : 'performLeave']();
+  performNextTransition() {
+    if (this.state.status === EXITED) {
+      if (this.props.in) {
+        // Either because of transitionAppear or unmountOnExit.
+        this.performEnter(this.props);
+      } else if (this.props.unmountOnExit) {
+        this.setState({status: UNMOUNTED});
+      }
     }
   }
 
-  performEnter() {
-    let maybeNode = React.findDOMNode(this);
-
-    let enter = node => {
-      node = this.props.transitioningNode(node) || node;
-
-      this.props.onEnter(node);
+  performEnter(props) {
+    this.cancelNextCallback();
+    const node = React.findDOMNode(this);
 
-      this.safeSetState({ in: true, transitioning: true, needInitialRender: false }, ()=> {
+    // Not this.props, because we might be about to receive new props.
+    props.onEnter(node);
 
-        this.props.onEntering(node);
+    this.safeSetState({status: ENTERING}, () => {
+      this.props.onEntering(node);
 
-        ensureTransitionEnd(node, () => {
-          if ( this.state.in ){
-            this.safeSetState({
-              transitioning: false
-            }, () => this.props.onEntered(node));
-          }
-
-        }, this.props.duration);
+      this.onTransitionEnd(node, () => {
+        this.safeSetState({status: ENTERED}, () => {
+          this.props.onEntered(node);
+        });
       });
-    };
-
-    if (maybeNode) {
-      enter(maybeNode);
-    }
-    else if (this.props.unmountOnExit) {
-      this._ensureNode(enter);
-    }
+    });
   }
 
-  performLeave() {
-    let node = React.findDOMNode(this);
-
-    node = this.props.transitioningNode(node) || node;
+  performExit(props) {
+    this.cancelNextCallback();
+    const node = React.findDOMNode(this);
 
-    this.props.onExit(node);
+    // Not this.props, because we might be about to receive new props.
+    props.onExit(node);
 
-    this.setState({ in: false, transitioning: true }, () => {
+    this.safeSetState({status: EXITING}, () => {
       this.props.onExiting(node);
 
-      ensureTransitionEnd(node, () => {
-        if ( !this.state.in ){
-          this.safeSetState({ transitioning: false }, ()=> this.props.onExited(node));
-        }
-      }, this.props.duration);
+      this.onTransitionEnd(node, () => {
+        this.safeSetState({status: EXITED}, () => {
+          this.props.onExited(node);
+        });
+      });
     });
   }
 
-  _ensureNode(callback) {
-
-    this.setState({ needInitialRender: true }, ()=> {
-      let node = React.findDOMNode(this);
-
-      triggerBrowserReflow(node);
-
-      callback(node);
-    });
+  cancelNextCallback() {
+    if (this.nextCallback !== null) {
+      this.nextCallback.cancel();
+      this.nextCallback = null;
+    }
   }
 
-  safeSetState(newState, cb){
-    if (this._mounted) {
-      this.setState(newState, cb);
-    }
+  safeSetState(nextState, callback) {
+    // This shouldn't be necessary, but there are weird race conditions with
+    // setState callbacks and unmounting in testing, so always make sure that
+    // we can cancel any pending setState callbacks after we unmount.
+    this.setState(nextState, this.setNextCallback(callback));
   }
 
-  render() {
-    let childProps = omit(this.props, Object.keys(Transition.propTypes).concat('children'));
+  setNextCallback(callback) {
+    let active = true;
 
-    let child = this.props.children;
-    let starting = this.state.needInitialRender;
-    let out = !this.state.in && !this.state.transitioning;
+    this.nextCallback = (event) => {
+      if (active) {
+        active = false;
+        this.nextCallback = null;
 
-    if ( !child || (this.props.unmountOnExit && out && !starting) ){
-      return null;
-    }
+        callback(event);
+      }
+    };
 
-    let classes = '';
+    this.nextCallback.cancel = () => {
+      active = false;
+    };
 
-    // using `classnames()` here causes a subtle bug,
-    // hence the verbose if/else if sequence.
-    if (this.state.in && !this.state.transitioning) {
-      classes = this.props.enteredClassName;
-    }
+    return this.nextCallback;
+  }
+
+  onTransitionEnd(node, handler) {
+    this.setNextCallback(handler);
 
-    else if (this.state.in && this.state.transitioning) {
-      classes = this.props.enteringClassName;
+    if (node) {
+      TransitionEvents.addEndEventListener(node, this.nextCallback);
+      setTimeout(this.nextCallback, this.props.duration);
+    } else {
+      setTimeout(this.nextCallback, 0);
     }
+  }
 
-    else if (!this.state.in && !this.state.transitioning) {
-      classes = this.props.exitedClassName;
+  render() {
+    const status = this.state.status;
+    if (status === UNMOUNTED) {
+      return null;
     }
 
-    else if (!this.state.in && this.state.transitioning) {
-      classes = this.props.exitingClassName;
+    const {children, className, style, ...childProps} = this.props;
+    Object.keys(Transition.propTypes).forEach(key => delete childProps[key]);
+
+    let transitionClassName;
+    if (status === EXITED) {
+      transitionClassName = this.props.exitedClassName;
+    } else if (status === ENTERING) {
+      transitionClassName = this.props.enteringClassName;
+    } else if (status === ENTERED) {
+      transitionClassName = this.props.enteredClassName;
+    } else if (status === EXITING) {
+      transitionClassName = this.props.exitingClassName;
     }
 
-    return React.cloneElement(child, {
-      ...childProps,
-      className: classnames(
-        child.props.className,
-        this.props.className,
-        classes)
-    });
+    const child = React.Children.only(children);
+    return React.cloneElement(
+      child,
+      {
+        ...childProps,
+        className: classnames(
+          child.props.className,
+          className,
+          transitionClassName
+        ),
+        style: {...child.props.style, ...style}
+      }
+    );
   }
 }
 
 Transition.propTypes = {
   /**
-   * Triggers the Enter or Exit animation
+   * Whether the component is entered; triggers the enter or exit animation
    */
-  in:                React.PropTypes.bool,
+  in: React.PropTypes.bool,
 
   /**
-   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   * Whether the component should be unmounted (removed from DOM) when exited
    */
-  unmountOnExit:     React.PropTypes.bool,
+  unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Specify whether transitions should run when the Transition component mounts.
+   * Whether transition in should run when the Transition component mounts, if
+   * the component is initially entered
    */
   transitionAppear: React.PropTypes.bool,
 
   /**
-   * Provide the duration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
-   * original browser transition end events are canceled.
+   * Duration of the animation in milliseconds, to ensure that finishing
+   * callbacks are fired even if the original browser transition end events are
+   * canceled
    */
-  duration:          React.PropTypes.number,
+  duration: React.PropTypes.number,
 
   /**
-   * A css class or classes applied once the Component has exited.
+   * CSS class or classes applied when the component is exited
    */
-  exitedClassName:     React.PropTypes.string,
+  exitedClassName: React.PropTypes.string,
   /**
-   * A css class or classes applied while the Component is exiting.
+   * CSS class or classes applied while the component is exiting
    */
-  exitingClassName:  React.PropTypes.string,
+  exitingClassName: React.PropTypes.string,
   /**
-   * A css class or classes applied once the Component has entered.
+   * CSS class or classes applied when the component is entered
    */
-  enteredClassName:    React.PropTypes.string,
+  enteredClassName: React.PropTypes.string,
   /**
-   * A css class or classes applied while the Component is entering.
+   * CSS class or classes applied while the component is entering
    */
   enteringClassName: React.PropTypes.string,
 
   /**
-   * A function that returns the DOM node to animate. This Node will have the transition classes applied to it.
-   * When left out, the Component will use its immediate child.
-   *
-   * @private
-   */
-  transitioningNode: React.PropTypes.func,
-
-  /**
-   * A callback fired just before the "entering" classes are applied
+   * Callback fired before the "entering" classes are applied
    */
-  onEnter:     React.PropTypes.func,
+  onEnter: React.PropTypes.func,
   /**
-   * A callback fired just after the "entering" classes are applied
+   * Callback fired after the "entering" classes are applied
    */
-  onEntering:  React.PropTypes.func,
+  onEntering: React.PropTypes.func,
   /**
-   * A callback fired after "enter" classes are applied
+   * Callback fired after the "enter" classes are applied
    */
-  onEntered:   React.PropTypes.func,
+  onEntered: React.PropTypes.func,
   /**
-   * A callback fired after "exiting" classes are applied
+   * Callback fired before the "exiting" classes are applied
    */
-  onExit:      React.PropTypes.func,
+  onExit: React.PropTypes.func,
   /**
-   * A callback fired after "exiting" classes are applied
+   * Callback fired after the "exiting" classes are applied
    */
-  onExiting:   React.PropTypes.func,
+  onExiting: React.PropTypes.func,
   /**
-   * A callback fired after "exit" classes are applied
+   * Callback fired after the "exited" classes are applied
    */
-  onExited:    React.PropTypes.func
+  onExited: React.PropTypes.func
 };
 
-// name the function so it is clearer in the documentation
-const noop = ()=>{};
+// Name the function so it is clearer in the documentation
+function noop() {}
 
 Transition.defaultProps = {
-  in:       false,
+  in: false,
   duration: 300,
   unmountOnExit: false,
   transitionAppear: false,
-  transitioningNode: noop,
 
-  onEnter:    noop,
+  onEnter: noop,
   onEntering: noop,
-  onEntered:  noop,
+  onEntered: noop,
 
-  onExit:     noop,
-  onExiting:  noop,
-  onExited:   noop
+  onExit: noop,
+  onExiting: noop,
+  onExited: noop
 };
 
 export default Transition;
diff --git a/test/TransitionSpec.js b/test/TransitionSpec.js
index 7945ba8ceb..ced505b537 100644
--- a/test/TransitionSpec.js
+++ b/test/TransitionSpec.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import { render } from './helpers';
-import Transition from '../src/Transition';
-//import classNames from 'classnames';
+import Transition, {EXITED, ENTERING, ENTERED, EXITING} from
+  '../src/Transition';
 
 describe('Transition', function () {
-
-
   it('should not transition on mount', function(){
     let instance = render(
           <Transition in onEnter={()=> { throw new Error('should not Enter'); }}>
@@ -14,8 +12,7 @@ describe('Transition', function () {
           </Transition>
         );
 
-    instance.state.in.should.equal(true);
-    assert.ok(!instance.state.transitioning);
+    instance.state.status.should.equal(ENTERED);
   });
 
   it('should transition on mount with transitionAppear', done =>{
@@ -28,8 +25,7 @@ describe('Transition', function () {
           </Transition>
         );
 
-    instance.state.in.should.equal(true);
-    instance.state.transitioning.should.equal(true);
+    instance.state.status.should.equal(EXITED);
   });
 
   describe('entering', ()=> {
@@ -51,10 +47,9 @@ describe('Transition', function () {
       let onEnter = sinon.spy();
       let onEntering = sinon.spy();
 
-      instance.state.in.should.equal(false);
+      instance.state.status.should.equal(EXITED);
 
       instance = instance.renderWithProps({
-
         in: true,
 
         onEnter,
@@ -73,27 +68,23 @@ describe('Transition', function () {
     it('should move to each transition state', done => {
       let count = 0;
 
-      instance.state.in.should.equal(false);
+      instance.state.status.should.equal(EXITED);
 
       instance = instance.renderWithProps({
-
         in: true,
 
         onEnter(){
           count++;
-          instance.state.in.should.equal(false);
-          instance.state.transitioning.should.equal(false);
+          instance.state.status.should.equal(EXITED);
         },
 
         onEntering(){
           count++;
-          instance.state.in.should.equal(true);
-          instance.state.transitioning.should.equal(true);
+          instance.state.status.should.equal(ENTERING);
         },
 
         onEntered(){
-          instance.state.in.should.equal(true);
-          instance.state.transitioning.should.equal(false);
+          instance.state.status.should.equal(ENTERED);
           assert.ok(count === 2);
           done();
         }
@@ -103,10 +94,9 @@ describe('Transition', function () {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.state.in.should.equal(false);
+      instance.state.status.should.equal(EXITED);
 
       instance = instance.renderWithProps({
-
         in: true,
 
         onEnter(node){
@@ -126,10 +116,8 @@ describe('Transition', function () {
         }
       });
     });
-
   });
 
-
   describe('exiting', ()=> {
     let instance;
 
@@ -150,10 +138,9 @@ describe('Transition', function () {
       let onExit = sinon.spy();
       let onExiting = sinon.spy();
 
-      instance.state.in.should.equal(true);
+      instance.state.status.should.equal(ENTERED);
 
       instance = instance.renderWithProps({
-
         in: false,
 
         onExit,
@@ -172,27 +159,23 @@ describe('Transition', function () {
     it('should move to each transition state', done => {
       let count = 0;
 
-      instance.state.in.should.equal(true);
+      instance.state.status.should.equal(ENTERED);
 
       instance = instance.renderWithProps({
-
         in: false,
 
         onExit(){
           count++;
-          instance.state.in.should.equal(true);
-          instance.state.transitioning.should.equal(false);
+          instance.state.status.should.equal(ENTERED);
         },
 
         onExiting(){
           count++;
-          instance.state.in.should.equal(false);
-          instance.state.transitioning.should.equal(true);
+          instance.state.status.should.equal(EXITING);
         },
 
         onExited(){
-          instance.state.in.should.equal(false);
-          instance.state.transitioning.should.equal(false);
+          instance.state.status.should.equal(EXITED);
           //assert.ok(count === 2);
           done();
         }
@@ -202,10 +185,9 @@ describe('Transition', function () {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.state.in.should.equal(true);
+      instance.state.status.should.equal(ENTERED);
 
       instance = instance.renderWithProps({
-
         in: false,
 
         onExit(node){
@@ -225,7 +207,5 @@ describe('Transition', function () {
         }
       });
     });
-
   });
-
 });

From dd064ad4f2833d29d07189c0677e0da0b1b4b503 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Mon, 20 Jul 2015 19:10:22 +0300
Subject: [PATCH 046/128] [fixed] remove extraneous styling

---
 src/ModalHeader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 706546c64f..0ab2dda5cf 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -15,7 +15,6 @@ class ModalHeader extends React.Component {
             className='close'
             aria-label={this.props['aria-label'] || 'Close'} //eslint-disable-line react/prop-types
             onClick={this.props.onHide}
-            style={{ marginTop: -2 }}
           >
             <span aria-hidden="true">
               &times;

From dbacfd9d95f54647e8f4abc4172f6141c83d98e1 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Mon, 20 Jul 2015 12:54:40 -0400
Subject: [PATCH 047/128] !fixup fixes to previous commit

---
 src/Collapse.js   | 32 ++++++++++++++++++--------------
 src/Fade.js       | 23 ++++++++++++-----------
 src/Overlay.js    | 19 ++++++++++---------
 src/Transition.js | 36 +++++++++++++++++-------------------
 4 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 299ec8a625..30f0cbaa32 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -113,57 +113,61 @@ class Collapse extends React.Component {
   }
 }
 
+// Explicitly copied from Transition for doc generation.
+// TODO: Remove duplication once #977 is resolved.
+
 Collapse.propTypes = {
   /**
-   * Whether the component is entered; triggers the enter or exit animation
+   * Whether the component is expanded
    */
   in: React.PropTypes.bool,
 
   /**
-   * Whether the component should be unmounted (removed from DOM) when exited
+   * Whether the component should be unmounted (removed from DOM) when
+   * collapsed
    */
   unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Whether transition in should run when the Transition component mounts, if
-   * the component is initially entered
+   * Whether the component should expand after mounting
    */
   transitionAppear: React.PropTypes.bool,
 
   /**
-   * Duration of the animation in milliseconds, to ensure that finishing
-   * callbacks are fired even if the original browser transition end events are
-   * canceled
+   * Duration of the collapse animation in milliseconds, to ensure that
+   * finishing callbacks are fired even if the original browser transition end
+   * events are canceled
    */
   duration: React.PropTypes.number,
 
   /**
-   * Callback fired before the "entering" classes are applied
+   * Callback fired before the component expands
    */
   onEnter: React.PropTypes.func,
   /**
-   * Callback fired after the "entering" classes are applied
+   * Callback fired after the component starts to expand
    */
   onEntering: React.PropTypes.func,
   /**
-   * Callback fired after the "enter" classes are applied
+   * Callback fired after the component has expanded
    */
   onEntered: React.PropTypes.func,
   /**
-   * Callback fired before the "exiting" classes are applied
+   * Callback fired before the component collapses
    */
   onExit: React.PropTypes.func,
   /**
-   * Callback fired after the "exiting" classes are applied
+   * Callback fired after the component starts to collapse
    */
   onExiting: React.PropTypes.func,
   /**
-   * Callback fired after the "exited" classes are applied
+   * Callback fired after the component has collapsed
    */
   onExited: React.PropTypes.func,
 
   /**
-   * The dimension used when collapsing
+   * The dimension used when collapsing, or a function that returns the
+   * dimension
    *
    * _Note: Bootstrap only partially supports 'width'!
    * You will need to supply your own CSS animation for the `.width` CSS class._
diff --git a/src/Fade.js b/src/Fade.js
index 528e839d85..9e8df40b19 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -17,53 +17,54 @@ class Fade extends React.Component {
 }
 
 // Explicitly copied from Transition for doc generation.
+// TODO: Remove duplication once #977 is resolved.
 
 Fade.propTypes = {
   /**
-   * Whether the component is entered; triggers the enter or exit animation
+   * Whether the component is faded in
    */
   in: React.PropTypes.bool,
 
   /**
-   * Whether the component should be unmounted (removed from DOM) when exited
+   * Whether the component should be unmounted (removed from DOM) when faded
+   * out
    */
   unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Whether transition in should run when the Transition component mounts, if
-   * the component is initially entered
+   * Whether the component should fade in after mounting
    */
   transitionAppear: React.PropTypes.bool,
 
   /**
-   * Duration of the animation in milliseconds, to ensure that finishing
+   * Duration of the fade animation in milliseconds, to ensure that finishing
    * callbacks are fired even if the original browser transition end events are
    * canceled
    */
   duration: React.PropTypes.number,
 
   /**
-   * Callback fired before the "entering" classes are applied
+   * Callback fired before the component fades in
    */
   onEnter: React.PropTypes.func,
   /**
-   * Callback fired after the "entering" classes are applied
+   * Callback fired after the component starts to fade in
    */
   onEntering: React.PropTypes.func,
   /**
-   * Callback fired after the "enter" classes are applied
+   * Callback fired after the has component faded in
    */
   onEntered: React.PropTypes.func,
   /**
-   * Callback fired before the "exiting" classes are applied
+   * Callback fired before the component fades out
    */
   onExit: React.PropTypes.func,
   /**
-   * Callback fired after the "exiting" classes are applied
+   * Callback fired after the component starts to fade out
    */
   onExiting: React.PropTypes.func,
   /**
-   * Callback fired after the "exited" classes are applied
+   * Callback fired after the component has faded out
    */
   onExited: React.PropTypes.func
 };
diff --git a/src/Overlay.js b/src/Overlay.js
index 0a4932903e..6d82a7f401 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -41,7 +41,6 @@ class Overlay extends React.Component {
 
     // Don't un-render the overlay while it's transitioning out.
     const mountOverlay = props.show || (Transition && !this.state.exited);
-
     if (!mountOverlay) {
       // Don't bother showing anything if we don't have to.
       return null;
@@ -49,8 +48,17 @@ class Overlay extends React.Component {
 
     let child = children;
 
+    // Position is be inner-most because it adds inline styles into the child,
+    // which the other wrappers don't forward correctly.
+    child = (
+      <Position {...{container, containerPadding, target, placement}}>
+        {child}
+      </Position>
+    );
+
     if (Transition) {
-      // This animates the child by injecting props, so it must be inner-most.
+      // This animates the child node by injecting props, so it must precede
+      // anything that adds a wrapping div.
       child = (
         <Transition
           in={props.show}
@@ -67,13 +75,6 @@ class Overlay extends React.Component {
       );
     }
 
-    // This must wrap the transition to avoid position recalculations.
-    child = (
-      <Position {...{container, containerPadding, target, placement}}>
-        {child}
-      </Position>
-    );
-
     // This goes after everything else because it adds a wrapping div.
     if (rootClose) {
       child = (
diff --git a/src/Transition.js b/src/Transition.js
index 85eb05c5f6..260628997a 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -14,7 +14,7 @@ class Transition extends React.Component {
 
     let initialStatus;
     if (props.in) {
-      // Perform enter in performNextTransition from componentDidMount.
+      // Start enter transition in componentDidMount.
       initialStatus = props.transitionAppear ? EXITED : ENTERED;
     } else {
       initialStatus = props.unmountOnExit ? UNMOUNTED : EXITED;
@@ -25,7 +25,9 @@ class Transition extends React.Component {
   }
 
   componentDidMount() {
-    this.performNextTransition();
+    if (this.props.transitionAppear && this.props.in) {
+      this.performEnter(this.props);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -34,8 +36,8 @@ class Transition extends React.Component {
       if (status === EXITING) {
         this.performEnter(nextProps);
       } else if (this.props.unmountOnExit) {
-        // Perform enter in performNextTransition.
         if (status === UNMOUNTED) {
+          // Start enter transition in componentDidUpdate.
           this.setState({status: EXITED});
         }
       } else if (status === EXITED) {
@@ -53,24 +55,21 @@ class Transition extends React.Component {
   }
 
   componentDidUpdate() {
-    this.performNextTransition();
-  }
-
-  componentWillUnmount() {
-    this.cancelNextCallback();
-  }
-
-  performNextTransition() {
-    if (this.state.status === EXITED) {
+    if (this.props.unmountOnExit && this.state.status === EXITED) {
+      // EXITED is always a transitional state to either ENTERING or UNMOUNTED
+      // when using unmountOnExit.
       if (this.props.in) {
-        // Either because of transitionAppear or unmountOnExit.
         this.performEnter(this.props);
-      } else if (this.props.unmountOnExit) {
+      } else {
         this.setState({status: UNMOUNTED});
       }
     }
   }
 
+  componentWillUnmount() {
+    this.cancelNextCallback();
+  }
+
   performEnter(props) {
     this.cancelNextCallback();
     const node = React.findDOMNode(this);
@@ -157,7 +156,7 @@ class Transition extends React.Component {
       return null;
     }
 
-    const {children, className, style, ...childProps} = this.props;
+    const {children, className, ...childProps} = this.props;
     Object.keys(Transition.propTypes).forEach(key => delete childProps[key]);
 
     let transitionClassName;
@@ -180,8 +179,7 @@ class Transition extends React.Component {
           child.props.className,
           className,
           transitionClassName
-        ),
-        style: {...child.props.style, ...style}
+        )
       }
     );
   }
@@ -189,7 +187,7 @@ class Transition extends React.Component {
 
 Transition.propTypes = {
   /**
-   * Whether the component is entered; triggers the enter or exit animation
+   * Whether the component is shown; triggers the enter or exit animation
    */
   in: React.PropTypes.bool,
 
@@ -200,7 +198,7 @@ Transition.propTypes = {
 
   /**
    * Whether transition in should run when the Transition component mounts, if
-   * the component is initially entered
+   * the component is initially shown
    */
   transitionAppear: React.PropTypes.bool,
 

From 25c8efab9c2046e98fe36a5c95fcbf5bb7fe9587 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Mon, 20 Jul 2015 20:05:55 +0300
Subject: [PATCH 048/128] Fix test case

---
 test/ModalSpec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 5a9b78f520..66bb5be9e2 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -58,7 +58,7 @@ describe('Modal', function () {
 
     let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal);
 
-    assert.ok(React.findDOMNode(instance).className.match(/\modal-open\b/));
+    assert.ok(React.findDOMNode(instance).className.match(/\bmodal-open\b/));
 
     let backdrop = React.findDOMNode(modal.refs.modal).getElementsByClassName('modal-backdrop')[0];
 

From 27680616630c1e2ef1c533018d72773e8689c8f0 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sun, 19 Jul 2015 21:55:54 +0300
Subject: [PATCH 049/128] Make deprecation warnings safe

---
 src/templates/factory.index.js.template |  4 +++-
 src/templates/factory.js.template       |  3 ++-
 src/utils/deprecationWarning.js         | 17 +++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/templates/factory.index.js.template b/src/templates/factory.index.js.template
index baaeb1ef02..ba70624988 100644
--- a/src/templates/factory.index.js.template
+++ b/src/templates/factory.index.js.template
@@ -1,8 +1,10 @@
+import warning from 'react/lib/warning';
+
 <% _.forEach(components, function (component) { %>
 import <%= component %> from './<%= component %>';
 <% }); %>
 
-console.warn('Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
+warning(false, 'Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
 
 export default {
 <% _.forEach(components, function (component) { %>
diff --git a/src/templates/factory.js.template b/src/templates/factory.js.template
index 051dbd144e..d9a3042ba8 100644
--- a/src/templates/factory.js.template
+++ b/src/templates/factory.js.template
@@ -1,6 +1,7 @@
 import React from 'react';
+import warning from 'react/lib/warning';
 import <%= name %> from '../<%= name %>';
 
-console.warn('Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
+warning(false, 'Support for factories will be removed in v0.25, for details see https://github.com/react-bootstrap/react-bootstrap/issues/825');
 
 export default React.createFactory(<%= name %>);
diff --git a/src/utils/deprecationWarning.js b/src/utils/deprecationWarning.js
index 802158410f..e92b75837d 100644
--- a/src/utils/deprecationWarning.js
+++ b/src/utils/deprecationWarning.js
@@ -1,14 +1,11 @@
-export default function deprecationWarning(oldname, newname, link) {
-  if (process.env.NODE_ENV !== 'production') {
-    if ((typeof console === 'undefined') || (typeof console.warn !== 'function')) {
-      return;
-    }
+import warning from 'react/lib/warning';
 
-    let message = `${oldname} is deprecated. Use ${newname} instead.`;
-    console.warn(message);
+export default function deprecationWarning(oldname, newname, link) {
+  let message = `${oldname} is deprecated. Use ${newname} instead.`;
 
-    if (link) {
-      console.warn(`You can read more about it at ${link}`);
-    }
+  if (link) {
+    message += `\nYou can read more about it at ${link}`;
   }
+
+  warning(false, message);
 }

From afe9d9c255840c2f87034e7cb18656420074bf73 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Mon, 20 Jul 2015 13:37:32 -0400
Subject: [PATCH 050/128] !fixup add unmountOnExit test cases

---
 src/Transition.js      |   2 +-
 test/TransitionSpec.js | 130 +++++++++++++++++++++++++++++++----------
 2 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/src/Transition.js b/src/Transition.js
index 260628997a..f1c557f4ed 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -2,7 +2,7 @@ import React from 'react';
 import TransitionEvents from './utils/TransitionEvents';
 import classnames from 'classnames';
 
-const UNMOUNTED = 0;
+export const UNMOUNTED = 0;
 export const EXITED = 1;
 export const ENTERING = 2;
 export const ENTERED = 3;
diff --git a/test/TransitionSpec.js b/test/TransitionSpec.js
index ced505b537..1592e646f7 100644
--- a/test/TransitionSpec.js
+++ b/test/TransitionSpec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import { render } from './helpers';
-import Transition, {EXITED, ENTERING, ENTERED, EXITING} from
+import Transition, {UNMOUNTED, EXITED, ENTERING, ENTERED, EXITING} from
   '../src/Transition';
 
 describe('Transition', function () {
@@ -12,7 +12,7 @@ describe('Transition', function () {
           </Transition>
         );
 
-    instance.state.status.should.equal(ENTERED);
+    expect(instance.state.status).to.equal(ENTERED);
   });
 
   it('should transition on mount with transitionAppear', done =>{
@@ -25,7 +25,7 @@ describe('Transition', function () {
           </Transition>
         );
 
-    instance.state.status.should.equal(EXITED);
+    expect(instance.state.status).to.equal(EXITED);
   });
 
   describe('entering', ()=> {
@@ -47,7 +47,7 @@ describe('Transition', function () {
       let onEnter = sinon.spy();
       let onEntering = sinon.spy();
 
-      instance.state.status.should.equal(EXITED);
+      expect(instance.state.status).to.equal(EXITED);
 
       instance = instance.renderWithProps({
         in: true,
@@ -57,9 +57,9 @@ describe('Transition', function () {
         onEntering,
 
         onEntered(){
-          assert.ok(onEnter.calledOnce);
-          assert.ok(onEntering.calledOnce);
-          assert.ok(onEnter.calledBefore(onEntering));
+          expect(onEnter.calledOnce).to.be.ok;
+          expect(onEntering.calledOnce).to.be.ok;
+          expect(onEnter.calledBefore(onEntering)).to.be.ok;
           done();
         }
       });
@@ -68,24 +68,24 @@ describe('Transition', function () {
     it('should move to each transition state', done => {
       let count = 0;
 
-      instance.state.status.should.equal(EXITED);
+      expect(instance.state.status).to.equal(EXITED);
 
       instance = instance.renderWithProps({
         in: true,
 
         onEnter(){
           count++;
-          instance.state.status.should.equal(EXITED);
+          expect(instance.state.status).to.equal(EXITED);
         },
 
         onEntering(){
           count++;
-          instance.state.status.should.equal(ENTERING);
+          expect(instance.state.status).to.equal(ENTERING);
         },
 
         onEntered(){
-          instance.state.status.should.equal(ENTERED);
-          assert.ok(count === 2);
+          expect(instance.state.status).to.equal(ENTERED);
+          expect(count).to.equal(2);
           done();
         }
       });
@@ -94,24 +94,24 @@ describe('Transition', function () {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.state.status.should.equal(EXITED);
+      expect(instance.state.status).to.equal(EXITED);
 
       instance = instance.renderWithProps({
         in: true,
 
         onEnter(node){
           count++;
-          assert.equal(node.className, '');
+          expect(node.className).to.equal('');
         },
 
         onEntering(node){
           count++;
-          assert.equal(node.className, 'test-entering');
+          expect(node.className).to.equal('test-entering');
         },
 
         onEntered(node){
-          assert.equal(node.className, 'test-enter');
-          assert.ok(count === 2);
+          expect(node.className).to.equal('test-enter');
+          expect(count).to.equal(2);
           done();
         }
       });
@@ -138,7 +138,7 @@ describe('Transition', function () {
       let onExit = sinon.spy();
       let onExiting = sinon.spy();
 
-      instance.state.status.should.equal(ENTERED);
+      expect(instance.state.status).to.equal(ENTERED);
 
       instance = instance.renderWithProps({
         in: false,
@@ -148,9 +148,9 @@ describe('Transition', function () {
         onExiting,
 
         onExited(){
-          assert.ok(onExit.calledOnce);
-          assert.ok(onExiting.calledOnce);
-          assert.ok(onExit.calledBefore(onExiting));
+          expect(onExit.calledOnce).to.be.ok;
+          expect(onExiting.calledOnce).to.be.ok;
+          expect(onExit.calledBefore(onExiting)).to.be.ok;
           done();
         }
       });
@@ -159,24 +159,24 @@ describe('Transition', function () {
     it('should move to each transition state', done => {
       let count = 0;
 
-      instance.state.status.should.equal(ENTERED);
+      expect(instance.state.status).to.equal(ENTERED);
 
       instance = instance.renderWithProps({
         in: false,
 
         onExit(){
           count++;
-          instance.state.status.should.equal(ENTERED);
+          expect(instance.state.status).to.equal(ENTERED);
         },
 
         onExiting(){
           count++;
-          instance.state.status.should.equal(EXITING);
+          expect(instance.state.status).to.equal(EXITING);
         },
 
         onExited(){
-          instance.state.status.should.equal(EXITED);
-          //assert.ok(count === 2);
+          expect(instance.state.status).to.equal(EXITED);
+          expect(count).to.equal(2);
           done();
         }
       });
@@ -185,27 +185,95 @@ describe('Transition', function () {
     it('should apply classes at each transition state', done => {
       let count = 0;
 
-      instance.state.status.should.equal(ENTERED);
+      expect(instance.state.status).to.equal(ENTERED);
 
       instance = instance.renderWithProps({
         in: false,
 
         onExit(node){
           count++;
-          assert.equal(node.className, '');
+          expect(node.className).to.equal('');
         },
 
         onExiting(node){
           count++;
-          assert.equal(node.className, 'test-exiting');
+          expect(node.className).to.equal('test-exiting');
         },
 
         onExited(node){
-          assert.equal(node.className, 'test-exit');
-          assert.ok(count === 2);
+          expect(node.className).to.equal('test-exit');
+          expect(count).to.equal(2);
           done();
         }
       });
     });
   });
+
+  describe('unmountOnExit', () => {
+    class UnmountTransition extends React.Component {
+      constructor(props) {
+        super(props);
+
+        this.state = {in: props.initialIn};
+      }
+
+      render() {
+        return (
+          <Transition
+            ref="transition"
+            unmountOnExit
+            in={this.state.in}
+            duration={10}
+            {...this.props}
+          >
+            <div />
+          </Transition>
+        );
+      }
+
+      getStatus() {
+        return this.refs.transition.state.status;
+      }
+    }
+
+    it('should mount when entering', done => {
+      const instance = render(
+        <UnmountTransition
+          initialIn={false}
+
+          onEnter={() => {
+            expect(instance.getStatus()).to.equal(EXITED);
+            expect(React.findDOMNode(instance)).to.exist;
+
+            done();
+          }}
+        />
+      );
+
+      expect(instance.getStatus()).to.equal(UNMOUNTED);
+      expect(React.findDOMNode(instance)).to.not.exist;
+
+      instance.setState({in: true});
+    });
+
+    it('should unmount after exiting', done => {
+      const instance = render(
+        <UnmountTransition
+          initialIn={true}
+
+          onExited={() => {
+            expect(instance.getStatus()).to.equal(UNMOUNTED);
+            expect(React.findDOMNode(instance)).to.not.exist;
+
+            done();
+          }}
+        />
+      );
+
+      expect(instance.getStatus()).to.equal(ENTERED);
+      expect(React.findDOMNode(instance)).to.exist;
+
+      instance.setState({in: false});
+    });
+  });
 });

From 924f8fb619dde3beb6f385769ea7633cf606daf8 Mon Sep 17 00:00:00 2001
From: Geoff Pleiss and Kenny Wang <kwang@pivotal.io>
Date: Mon, 20 Jul 2015 15:33:08 -0700
Subject: [PATCH 051/128] [fixed] Tooltip accepts a style prop

fixes #1027
---
 src/Tooltip.js      |  9 +++++++--
 test/TooltipSpec.js | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index 0cecc0dc9b..9d78e6f1ec 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -43,7 +43,11 @@ const Tooltip = React.createClass({
     /**
      * Title text
      */
-    title: React.PropTypes.node
+    title: React.PropTypes.node,
+    /**
+     * Style hash
+     */
+    style: React.PropTypes.object
   },
 
   getDefaultProps() {
@@ -60,7 +64,8 @@ const Tooltip = React.createClass({
 
     const style = {
       'left': this.props.positionLeft,
-      'top': this.props.positionTop
+      'top': this.props.positionTop,
+      ...this.props.style
     };
 
     const arrowStyle = {
diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
index 01b93bc42c..44d2e442cb 100644
--- a/test/TooltipSpec.js
+++ b/test/TooltipSpec.js
@@ -5,12 +5,25 @@ import Tooltip from '../src/Tooltip';
 describe('Tooltip', function () {
   it('Should output a tooltip with content', function () {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Tooltip>
+      <Tooltip positionTop={10} positionLeft={20}>
         <strong>Tooltip Content</strong>
       </Tooltip>
     );
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
 
+    const tooltip = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tooltip');
+    assert.deepEqual(tooltip.props.style, {top: 10, left: 20});
   });
 
+  describe('When a style property is provided', function () {
+    it('Should render a tooltip with merged styles', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Tooltip style={{opacity: 0.9}} positionTop={10} positionLeft={20}>
+          <strong>Tooltip Content</strong>
+        </Tooltip>
+      );
+      const tooltip = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tooltip');
+      assert.deepEqual(tooltip.props.style, {opacity: 0.9, top: 10, left: 20});
+    });
+  });
 });

From 702cb3677e99cd4bf51141ce3fa0dec16db368e3 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 21 Jul 2015 13:23:40 +0300
Subject: [PATCH 052/128] Update eslint-plugin-react dev dependency

---
 .eslintrc    | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index cedef098a6..79c77f0d84 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,6 +25,7 @@
     "quotes": [2, "single", "avoid-escape"],
     "react/display-name": 0,
     "react/jsx-boolean-value": [2, "never"],
+    "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
     "react/no-did-mount-set-state": 2,
diff --git a/package.json b/package.json
index c70f241ebb..eb8d97513a 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "eslint": "0.24.1",
     "eslint-plugin-babel": "^1.0.0",
     "eslint-plugin-mocha": "^0.4.0",
-    "eslint-plugin-react": "^2.1.0",
+    "eslint-plugin-react": "^3.0.0",
     "express": "^4.12.3",
     "extract-text-webpack-plugin": "^0.8.0",
     "file-loader": "^0.8.1",

From 5c4a29f6a0ab309c8fd49d797e3f95b1fff63e39 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 21 Jul 2015 17:15:01 +0300
Subject: [PATCH 053/128] Remove `style` property exposing

---
 src/Tooltip.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index 9d78e6f1ec..1acb42daa4 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -43,11 +43,7 @@ const Tooltip = React.createClass({
     /**
      * Title text
      */
-    title: React.PropTypes.node,
-    /**
-     * Style hash
-     */
-    style: React.PropTypes.object
+    title: React.PropTypes.node
   },
 
   getDefaultProps() {
@@ -65,7 +61,8 @@ const Tooltip = React.createClass({
     const style = {
       'left': this.props.positionLeft,
       'top': this.props.positionTop,
-      ...this.props.style
+      // we don't want to expose the `style` property
+      ...this.props.style // eslint-disable-line react/prop-types
     };
 
     const arrowStyle = {

From 3a49843150df1451d57b4415497a66277dbb53f1 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 10:18:36 -0400
Subject: [PATCH 054/128] fixup! reword docs for boolean fields

---
 src/Collapse.js   | 8 ++++----
 src/Fade.js       | 8 ++++----
 src/Transition.js | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 30f0cbaa32..ddca971770 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -118,18 +118,18 @@ class Collapse extends React.Component {
 
 Collapse.propTypes = {
   /**
-   * Whether the component is expanded
+   * Show the component; triggers the expand or collapse animation
    */
   in: React.PropTypes.bool,
 
   /**
-   * Whether the component should be unmounted (removed from DOM) when
-   * collapsed
+   * Unmount the component (remove it from the DOM) when it is collapsed
    */
   unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Whether the component should expand after mounting
+   * Run the expand animation when the component mounts, if it is initially
+   * shown
    */
   transitionAppear: React.PropTypes.bool,
 
diff --git a/src/Fade.js b/src/Fade.js
index 9e8df40b19..ce5a9a3370 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -21,18 +21,18 @@ class Fade extends React.Component {
 
 Fade.propTypes = {
   /**
-   * Whether the component is faded in
+   * Show the component; triggers the fade in or fade out animation
    */
   in: React.PropTypes.bool,
 
   /**
-   * Whether the component should be unmounted (removed from DOM) when faded
-   * out
+   * Unmount the component (remove it from the DOM) when it is faded out
    */
   unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Whether the component should fade in after mounting
+   * Run the fade in animation when the component mounts, if it is initially
+   * shown
    */
   transitionAppear: React.PropTypes.bool,
 
diff --git a/src/Transition.js b/src/Transition.js
index f1c557f4ed..8235d41f9f 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -187,18 +187,18 @@ class Transition extends React.Component {
 
 Transition.propTypes = {
   /**
-   * Whether the component is shown; triggers the enter or exit animation
+   * Show the component; triggers the enter or exit animation
    */
   in: React.PropTypes.bool,
 
   /**
-   * Whether the component should be unmounted (removed from DOM) when exited
+   * Unmount the component (remove it from the DOM) when it is not shown
    */
   unmountOnExit: React.PropTypes.bool,
 
   /**
-   * Whether transition in should run when the Transition component mounts, if
-   * the component is initially shown
+   * Run the enter animation when the component mounts, if it is initially
+   * shown
    */
   transitionAppear: React.PropTypes.bool,
 

From 868732d3f72ce3095671dc7a45e13b8de8507660 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 10:19:52 -0400
Subject: [PATCH 055/128] Fix description of Modal keyboard prop

Fixes #1030
---
 src/Modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.js b/src/Modal.js
index c42f7b2e0c..417e53fda4 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -104,7 +104,7 @@ const ModalMarkup = React.createClass({
      */
     backdrop: React.PropTypes.oneOf(['static', true, false]),
     /**
-     * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
+     * Close the modal when escape key is pressed
      */
     keyboard: React.PropTypes.bool,
 

From 6e194ead95f3f7a55c53a138acc3066f86969db0 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 11:36:51 -0400
Subject: [PATCH 056/128] fixup! fix target change handler

---
 src/Position.js      | 33 +++++++++-------
 test/PositionSpec.js | 90 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 110 insertions(+), 13 deletions(-)

diff --git a/src/Position.js b/src/Position.js
index cb4408e041..c717d288ea 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -13,20 +13,24 @@ class Position extends React.Component {
       arrowOffsetLeft: null,
       arrowOffsetTop: null
     };
+
+    this._needsFlush = false;
   }
 
   componentDidMount() {
-    this.updatePosition(this.props, this.getTargetSafe(this.props));
+    this.updatePosition();
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.target !== this.props.target) {
-      const target = this.getTargetSafe(this.props);
-      const nextTarget = this.getTargetSafe(nextProps);
+      this._needsFlush = true;
+    }
+  }
 
-      if (nextTarget !== target) {
-        this.updatePosition(nextProps, nextTarget);
-      }
+  componentDidUpdate() {
+    if (this._needsFlush) {
+      this._needsFlush = false;
+      this.updatePosition();
     }
   }
 
@@ -51,15 +55,17 @@ class Position extends React.Component {
     );
   }
 
-  getTargetSafe(props) {
-    if (!props.target) {
+  getTargetSafe() {
+    if (!this.props.target) {
       return null;
     }
 
-    return props.target(props);
+    return this.props.target(this.props);
   }
 
-  updatePosition(props, target) {
+  updatePosition() {
+    const target = this.getTargetSafe();
+
     if (!target) {
       this.setState({
         positionLeft: null,
@@ -73,14 +79,15 @@ class Position extends React.Component {
 
     const overlay = React.findDOMNode(this);
     const container =
-      React.findDOMNode(props.container) || domUtils.ownerDocument(this).body;
+      React.findDOMNode(this.props.container) ||
+      domUtils.ownerDocument(this).body;
 
     this.setState(calcOverlayPosition(
-      props.placement,
+      this.props.placement,
       overlay,
       target,
       container,
-      props.containerPadding
+      this.props.containerPadding
     ));
   }
 }
diff --git a/test/PositionSpec.js b/test/PositionSpec.js
index 963b2c24b7..f157e1e0ee 100644
--- a/test/PositionSpec.js
+++ b/test/PositionSpec.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Position from '../src/Position';
+import overlayPositionUtils from '../src/utils/overlayPositionUtils';
 
 describe('Position', function () {
   it('Should output a child', function () {
@@ -23,5 +24,94 @@ describe('Position', function () {
     }).to.throw(Error, /onlyChild must be passed a children with exactly one child/);
   });
 
+  describe('position recalculation', function () {
+    beforeEach(function () {
+      sinon.spy(overlayPositionUtils, 'calcOverlayPosition');
+      sinon.spy(Position.prototype, 'render');
+    });
+
+    afterEach(function () {
+      overlayPositionUtils.calcOverlayPosition.restore();
+      Position.prototype.render.restore();
+    });
+
+    it('should recalculate when target changes', function () {
+      class TargetChanger extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.state = {target: 'foo'};
+        }
+
+        render() {
+          return (
+            <div>
+              {this.renderTarget()}
+
+              <Position target={() => this.refs[this.state.target]}>
+                <div />
+              </Position>
+            </div>
+          );
+        }
+
+        renderTarget() {
+          if (this.state.target === 'foo') {
+            return (<div ref="foo" style={{width: 100}} />);
+          } else if (this.state.target === 'bar') {
+            return (<div ref="bar" style={{width: 200}} />);
+          }
+        }
+      }
+
+      const instance = ReactTestUtils.renderIntoDocument(<TargetChanger />);
+
+      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
+
+      instance.setState({target: 'bar'});
+
+      expect(overlayPositionUtils.calcOverlayPosition)
+        .to.have.been.calledTwice;
+    });
+
+    it('should not recalculate when target doesn\'t change', function () {
+      class FooChanger extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.getTarget = this.getTarget.bind(this);
+
+          this.state = {foo: 0};
+        }
+
+        getTarget() {
+          return this.refs.target;
+        }
+
+        render() {
+          return (
+            <div>
+              <div ref="target" style={{width: 100}} />
+
+              <Position target={this.getTarget} foo={this.state.foo}>
+                <div target="positioned" />
+              </Position>
+            </div>
+          );
+        }
+      }
+
+      const instance = ReactTestUtils.renderIntoDocument(<FooChanger />);
+
+      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
+      expect(Position.prototype.render).to.have.been.calledTwice;
+
+      instance.setState({foo: 1});
+
+      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
+      expect(Position.prototype.render).to.have.been.calledThrice;
+    });
+  });
+
   // ToDo: add remaining tests
 });

From 7836ba0176c8b728fdb25ffb86d6a34af566f60e Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 12:41:38 -0400
Subject: [PATCH 057/128] fixup! less dumb check for target change

---
 src/Position.js      | 29 ++++++++++++----
 test/PositionSpec.js | 78 +++++++++++++++-----------------------------
 2 files changed, 49 insertions(+), 58 deletions(-)

diff --git a/src/Position.js b/src/Position.js
index c717d288ea..ad9563a880 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -4,7 +4,7 @@ import { calcOverlayPosition } from './utils/overlayPositionUtils';
 import CustomPropTypes from './utils/CustomPropTypes';
 
 class Position extends React.Component {
-  constructor(props, context){
+  constructor(props, context) {
     super(props, context);
 
     this.state = {
@@ -15,16 +15,15 @@ class Position extends React.Component {
     };
 
     this._needsFlush = false;
+    this._lastTarget = null;
   }
 
   componentDidMount() {
     this.updatePosition();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.target !== this.props.target) {
-      this._needsFlush = true;
-    }
+  componentWillReceiveProps() {
+    this._needsFlush = true;
   }
 
   componentDidUpdate() {
@@ -34,9 +33,15 @@ class Position extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    // Probably not necessary, but just in case holding a reference to the
+    // target causes problems somewhere.
+    this._lastTarget = null;
+  }
+
   render() {
     const {children, ...props} = this.props;
-    const {positionLeft, positionTop, ...arrowPosition } = this.state;
+    const {positionLeft, positionTop, ...arrowPosition} = this.state;
 
     const child = React.Children.only(children);
     return cloneElement(
@@ -60,11 +65,21 @@ class Position extends React.Component {
       return null;
     }
 
-    return this.props.target(this.props);
+    const target = this.props.target(this.props);
+    if (!target) {
+      // This is so we can just use === check below on all falsy targets.
+      return null;
+    }
+
+    return target;
   }
 
   updatePosition() {
     const target = this.getTargetSafe();
+    if (target === this._lastTarget) {
+      return;
+    }
+    this._lastTarget = target;
 
     if (!target) {
       this.setState({
diff --git a/test/PositionSpec.js b/test/PositionSpec.js
index f157e1e0ee..33283927b3 100644
--- a/test/PositionSpec.js
+++ b/test/PositionSpec.js
@@ -27,89 +27,65 @@ describe('Position', function () {
   describe('position recalculation', function () {
     beforeEach(function () {
       sinon.spy(overlayPositionUtils, 'calcOverlayPosition');
-      sinon.spy(Position.prototype, 'render');
+      sinon.spy(Position.prototype, 'componentWillReceiveProps');
     });
 
     afterEach(function () {
       overlayPositionUtils.calcOverlayPosition.restore();
-      Position.prototype.render.restore();
+      Position.prototype.componentWillReceiveProps.restore();
     });
 
-    it('should recalculate when target changes', function () {
+    it('Should only recalculate when target changes', function () {
       class TargetChanger extends React.Component {
         constructor(props) {
           super(props);
 
-          this.state = {target: 'foo'};
+          this.state = {
+            target: 'foo',
+            fakeProp: 0
+          };
         }
 
         render() {
           return (
             <div>
-              {this.renderTarget()}
+              <div ref="foo" />
+              <div ref="bar" />
 
-              <Position target={() => this.refs[this.state.target]}>
+              <Position
+                target={() => this.refs[this.state.target]}
+                fakeProp={this.state.fakeProp}
+              >
                 <div />
               </Position>
             </div>
           );
         }
-
-        renderTarget() {
-          if (this.state.target === 'foo') {
-            return (<div ref="foo" style={{width: 100}} />);
-          } else if (this.state.target === 'bar') {
-            return (<div ref="bar" style={{width: 200}} />);
-          }
-        }
       }
 
       const instance = ReactTestUtils.renderIntoDocument(<TargetChanger />);
 
-      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
+      // Position calculates initial position.
+      expect(Position.prototype.componentWillReceiveProps)
+        .to.have.not.been.called;
+      expect(overlayPositionUtils.calcOverlayPosition)
+        .to.have.been.calledOnce;
 
       instance.setState({target: 'bar'});
 
+      // Position receives new props and recalculates position.
+      expect(Position.prototype.componentWillReceiveProps)
+        .to.have.been.calledOnce;
       expect(overlayPositionUtils.calcOverlayPosition)
         .to.have.been.calledTwice;
-    });
-
-    it('should not recalculate when target doesn\'t change', function () {
-      class FooChanger extends React.Component {
-        constructor(props) {
-          super(props);
 
-          this.getTarget = this.getTarget.bind(this);
+      instance.setState({fakeProp: 1});
 
-          this.state = {foo: 0};
-        }
-
-        getTarget() {
-          return this.refs.target;
-        }
-
-        render() {
-          return (
-            <div>
-              <div ref="target" style={{width: 100}} />
-
-              <Position target={this.getTarget} foo={this.state.foo}>
-                <div target="positioned" />
-              </Position>
-            </div>
-          );
-        }
-      }
-
-      const instance = ReactTestUtils.renderIntoDocument(<FooChanger />);
-
-      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
-      expect(Position.prototype.render).to.have.been.calledTwice;
-
-      instance.setState({foo: 1});
-
-      expect(overlayPositionUtils.calcOverlayPosition).to.have.been.calledOnce;
-      expect(Position.prototype.render).to.have.been.calledThrice;
+      // Position receives new props but should not recalculate position.
+      expect(Position.prototype.componentWillReceiveProps)
+        .to.have.been.calledTwice;
+      expect(overlayPositionUtils.calcOverlayPosition)
+        .to.have.been.calledTwice;
     });
   });
 

From 7c83472efddc0610b4b9eb71e9007b6d3da254ea Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 16:48:50 -0400
Subject: [PATCH 058/128] Lock Babel to old version due to linting issues

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index eb8d97513a..740ecbafc4 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "react": ">=0.13"
   },
   "devDependencies": {
-    "babel": "^5.1.10",
-    "babel-core": "^5.1.10",
+    "babel": "5.6.x",
+    "babel-core": "5.6.x",
     "babel-eslint": "^3.0.1",
     "babel-loader": "^5.2.1",
     "bootstrap": "^3.3.4",

From 2f9627066033022d8c2ae275be4788696ba69c6f Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Tue, 21 Jul 2015 18:13:05 -0400
Subject: [PATCH 059/128] Release v0.24.0

---
 CHANGELOG.md | 37 +++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59cae1dbfa..6fb96ebebd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,40 @@
+v0.24.0 - Tue, 21 Jul 2015 22:13:05 GMT
+---------------------------------------
+
+- [924f8fb](../../commit/924f8fb) [fixed] Tooltip accepts a style prop
+- [dd064ad](../../commit/dd064ad) [fixed] remove extraneous styling
+- [c837d8d](../../commit/c837d8d) [fixed] Only calculate overlay position on display
+- [fbf9ed6](../../commit/fbf9ed6) [changed] Add deprecation warning that factories will be removed
+- [a4385d3](../../commit/a4385d3) [fixed] Portal doesn't mount extra node
+- [6744b94](../../commit/6744b94) [fixed] 'modalClassName' property for 'ModalTitle'
+- [3e6523a](../../commit/3e6523a) [added] ListGroup supports iterator as child
+- [ec368f0](../../commit/ec368f0) [added] Fade Component, replaces FadeMixin
+- [0503507](../../commit/0503507) [added] Collapse Component, replaces CollapsibleMixin
+- [4fb7e0d](../../commit/4fb7e0d) [changed] Remove Overlay and Modal deprecations
+- [0683df7](../../commit/0683df7) [fixed] 'stacked' progress with 'active' and 'striped' children
+- [a3c5400](../../commit/a3c5400) [fixed] Add missed 'type' property React.PropTypes.<type> checking
+- [a4c065e](../../commit/a4c065e) [added] links to every component / example on Components page
+- [eb0c323](../../commit/eb0c323) [fixed] Position.js typo `componentDidUpate`
+- [9feddf9](../../commit/9feddf9) [fixed] 'componentWillReceiveProps' method name of Position component
+- [c64679f](../../commit/c64679f) [fixed] Active Next and Last button in Pagination when ellipsis=true and items=0
+- [9dae734](../../commit/9dae734) [fixed] Negative page number in Pagination when ellipsis=true and items=1
+- [ffbcf39](../../commit/ffbcf39) [fixed] html id and class attributes handling for Nav
+- [89ea6ed](../../commit/89ea6ed) [fixed] Add missed propType validation for Button 'type' property
+- [b1b6a4c](../../commit/b1b6a4c) [changed] Add two-release deprecation policy
+- [e89b9bc](../../commit/e89b9bc) [removed] Don't need to disable Babel cache
+- [d12d59e](../../commit/d12d59e) [changed] Enabled "loose" Babel transpilation
+- [01c547f](../../commit/01c547f) [fixed] Do not use Babel cache for release build
+- [b67081b](../../commit/b67081b) [fixed] rootClose behavior on replaced elements
+- [fbbb344](../../commit/fbbb344) [fixed] bower template.
+- [fafe46f](../../commit/fafe46f) [changed] Use named exports in index files
+- [6e985b0](../../commit/6e985b0) [removed] Individual files in bower release
+- [598b9d8](../../commit/598b9d8) [fixed] SafeAnchor event ordering
+- [beaa1fa](../../commit/beaa1fa) [changed] `PaginationButton` to use `SafeAnchor`
+- [9c09e2a](../../commit/9c09e2a) [fixed] Keyboard accessibility for anchors serving as buttons
+- [ce5b436](../../commit/ce5b436) [removed] Input type=submit deprecation warning.
+
+
+
 v0.23.7 - Wed, 01 Jul 2015 15:18:30 GMT
 ---------------------------------------
 
diff --git a/package.json b/package.json
index 740ecbafc4..3e5a2243f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.23.7-docs.1",
+  "version": "0.24.0",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From 74da76a0c143ae1c34b0dec088c6c86c96c45ea1 Mon Sep 17 00:00:00 2001
From: Krzysztof Rybka <krzysztof.rybka@gmail.com>
Date: Wed, 22 Jul 2015 00:54:31 +0200
Subject: [PATCH 060/128] [fixed] Prevent click on PageItem if disabled

---
 src/PageItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/PageItem.js b/src/PageItem.js
index 44ef5e419c..3da173b37d 100644
--- a/src/PageItem.js
+++ b/src/PageItem.js
@@ -38,7 +38,7 @@ const PageItem = React.createClass({
   },
 
   handleSelect(e) {
-    if (this.props.onSelect) {
+    if (this.props.onSelect || this.props.disabled) {
       e.preventDefault();
 
       if (!this.props.disabled) {

From b5c1893d1938c3c1897ddc3cc85ee53ddac714eb Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Wed, 22 Jul 2015 15:21:05 +0300
Subject: [PATCH 061/128] [changed] unfix 'babel' back.

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3e5a2243f8..2b8fc113c0 100644
--- a/package.json
+++ b/package.json
@@ -43,9 +43,9 @@
     "react": ">=0.13"
   },
   "devDependencies": {
-    "babel": "5.6.x",
-    "babel-core": "5.6.x",
-    "babel-eslint": "^3.0.1",
+    "babel": "^5.8.3",
+    "babel-core": "^5.8.3",
+    "babel-eslint": "^3.1.26",
     "babel-loader": "^5.2.1",
     "bootstrap": "^3.3.4",
     "brfs": "^1.4.0",

From abccff98888ba4623b991dfce8312074bd86bc57 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Wed, 22 Jul 2015 20:40:15 -0400
Subject: [PATCH 062/128] [changed] expose static Modal Dialog component

---
 docs/examples/ModalStatic.js |  22 ++++
 docs/src/ComponentsPage.js   |   4 +
 docs/src/Samples.js          |   1 +
 src/Modal.js                 | 231 ++++++++++++++++-------------------
 src/ModalDialog.js           |  59 +++++++++
 test/ModalSpec.js            |  41 +++++--
 6 files changed, 227 insertions(+), 131 deletions(-)
 create mode 100644 docs/examples/ModalStatic.js
 create mode 100644 src/ModalDialog.js

diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
new file mode 100644
index 0000000000..e073616bc2
--- /dev/null
+++ b/docs/examples/ModalStatic.js
@@ -0,0 +1,22 @@
+
+const modalInstance = (
+  <div className='static-modal'>
+    <Modal.Dialog>
+      <Modal.Header>
+        <Modal.Title>Modal title</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
+        One fine body...
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button>Close</Button>
+        <Button bsStyle='primary'>Save changes</Button>
+      </Modal.Footer>
+
+    </Modal.Dialog>
+  </div>
+);
+
+React.render(modalInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 1c64e7120d..e46c15cbd6 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -260,6 +260,10 @@ const ComponentsPage = React.createClass({
                 <div className='bs-docs-section'>
                   <h1 className='page-header'><Anchor id='modals'>Modals</Anchor> <small>Modal</small></h1>
 
+                  <h3><Anchor id='modals-static'>Static Markup</Anchor></h3>
+                  <p>A modal dialog component</p>
+                  <ReactPlayground codeText={Samples.ModalStatic} />
+
                   <h3><Anchor id='modals-live'>Basic example</Anchor></h3>
                   <p></p>
                   <p>
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index 67b1580bd8..e765b084e5 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -34,6 +34,7 @@ export default {
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
+  ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
   ModalCustomSizing:             require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
diff --git a/src/Modal.js b/src/Modal.js
index 417e53fda4..b7744aedb0 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,15 +1,13 @@
 /*eslint-disable react/prop-types */
 import React, { cloneElement } from 'react';
-
 import classNames from 'classnames';
-import createChainedFunction from './utils/createChainedFunction';
-import BootstrapMixin from './BootstrapMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
+import createChainedFunction from './utils/createChainedFunction';
 
 import Portal from './Portal';
 import Fade from './Fade';
-
+import Dialog from './ModalDialog';
 import Body from './ModalBody';
 import Header from './ModalHeader';
 import Title from './ModalTitle';
@@ -93,12 +91,11 @@ function getScrollbarSize(){
   return scrollbarSize;
 }
 
-
-const ModalMarkup = React.createClass({
-
-  mixins: [ BootstrapMixin ],
-
+const Modal = React.createClass({
   propTypes: {
+    ...Portal.propTypes,
+    ...Dialog.propTypes,
+
     /**
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
      */
@@ -112,17 +109,6 @@ const ModalMarkup = React.createClass({
      * Open and close the Modal with a slide and fade animation.
      */
     animation: React.PropTypes.bool,
-    /**
-     * A Callback fired when the header closeButton or non-static backdrop is clicked.
-     * @type {function}
-     * @required
-     */
-    onHide: React.PropTypes.func.isRequired,
-
-    /**
-     * A css class to apply to the Modal dialog DOM node.
-     */
-    dialogClassName: React.PropTypes.string,
 
     /**
      * When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes.
@@ -138,62 +124,70 @@ const ModalMarkup = React.createClass({
     enforceFocus: React.PropTypes.bool
   },
 
-  getDefaultProps() {
+  getDefaultProps(){
     return {
-      bsClass: 'modal',
+      show: false,
+      animation: true,
       backdrop: true,
       keyboard: true,
-      animation: true,
-      closeButton: true,
-
       autoFocus: true,
       enforceFocus: true
     };
   },
 
   getInitialState(){
-    return { };
+    return {exited: !this.props.show};
   },
 
   render() {
-    let state = this.state;
-    let modalStyle = { ...state.dialogStyles, display: 'block'};
-    let dialogClasses = this.getBsClassSet();
+    let { children, animation, backdrop, ...props } = this.props;
 
-    delete dialogClasses.modal;
-    dialogClasses['modal-dialog'] = true;
+    let show = !!props.show;
 
-    let classes = {
-      modal: true,
-      in: this.props.show && !this.props.animation
-    };
+    const mountModal = show || (animation && !this.state.exited);
+    if (!mountModal) {
+      return null;
+    }
 
     let modal = (
-      <div
-        {...this.props}
-        title={null}
-        tabIndex="-1"
-        role="dialog"
-        style={modalStyle}
-        className={classNames(this.props.className, classes)}
-        onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
-        ref="modal">
-        <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className="modal-content" role='document'>
-            { this.renderContent() }
-          </div>
-        </div>
-      </div>
+      <Dialog {...props}
+        ref={this._setDialogRef}
+        className={classNames({ in: show && !animation })}
+        onClick={backdrop === true ? this.handleBackdropClick : null}
+      >
+        { this.renderContent() }
+      </Dialog>
     );
 
-    return this.props.backdrop ?
-      this.renderBackdrop(modal, state.backdropStyles) : modal;
+    if ( animation ) {
+      modal = (
+        <Fade
+          transitionAppear
+          unmountOnExit
+          in={show}
+          duration={Modal.TRANSITION_DURATION}
+          onExited={this.handleHidden}
+        >
+          { modal }
+        </Fade>
+      );
+    }
+
+    if (backdrop) {
+      modal = this.renderBackdrop(modal);
+    }
+
+    return (
+      <Portal container={props.container}>
+        { modal }
+      </Portal>
+    );
   },
 
   renderContent() {
     return React.Children.map(this.props.children, child => {
       // TODO: use context in 0.14
-      if (child.type.__isModalHeader) {
+      if (child && child.type && child.type.__isModalHeader) {
         return cloneElement(child, {
           onHide: createChainedFunction(this.props.onHide, child.props.onHide)
         });
@@ -204,7 +198,7 @@ const ModalMarkup = React.createClass({
 
   renderBackdrop(modal) {
     let { animation } = this.props;
-    let duration = Modal.BACKDROP_TRANSITION_DURATION; //eslint-disable-line no-use-before-define
+    let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
     let backdrop = (
       <div ref="backdrop"
@@ -214,7 +208,7 @@ const ModalMarkup = React.createClass({
     );
 
     return (
-      <div>
+      <div ref='modal'>
         { animation
             ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
             : backdrop
@@ -224,19 +218,49 @@ const ModalMarkup = React.createClass({
     );
   },
 
-  iosClickHack() {
-    // IOS only allows click events to be delegated to the document on elements
-    // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
-    // DOM nodes themselves. Remove if handled by React: https://github.com/facebook/react/issues/1169
-    React.findDOMNode(this.refs.modal).onclick = function () {};
-    React.findDOMNode(this.refs.backdrop).onclick = function () {};
+  _setDialogRef(ref){
+    this.refs.dialog = ref;
+
+    //maintains backwards compat with older component breakdown
+    if (!this.props.backdrop) {
+      this.refs.modal = ref;
+    }
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.show) {
+      this.setState({exited: false});
+    } else if (!nextProps.animation) {
+      // Otherwise let handleHidden take care of marking exited.
+      this.setState({exited: true});
+    }
   },
 
-  componentWillMount(){
-    this.checkForFocus();
+  componentWillUpdate(nextProps){
+    if (nextProps.show) {
+      this.checkForFocus();
+    }
   },
 
   componentDidMount() {
+    if ( this.props.show ){
+      this.onShow();
+    }
+  },
+
+  componentDidUpdate(prevProps) {
+    let { animation } = this.props;
+
+    if ( prevProps.show && !this.props.show && !animation) {
+      //otherwise handleHidden will call this.
+      this.onHide();
+    }
+    else if ( !prevProps.show && this.props.show ) {
+      this.onShow();
+    }
+  },
+
+  onShow() {
     const doc = domUtils.ownerDocument(this);
     const win = domUtils.ownerWindow(this);
 
@@ -244,7 +268,7 @@ const ModalMarkup = React.createClass({
       EventListener.listen(doc, 'keyup', this.handleDocumentKeyUp);
 
     this._onWindowResizeListener =
-        EventListener.listen(win, 'resize', this.handleWindowResize);
+      EventListener.listen(win, 'resize', this.handleWindowResize);
 
     if (this.props.enforceFocus) {
       this._onFocusinListener = onFocus(this, this.enforceFocus);
@@ -270,19 +294,7 @@ const ModalMarkup = React.createClass({
       , () => this.focusModalContent());
   },
 
-  componentDidUpdate(prevProps) {
-    if (this.props.backdrop && this.props.backdrop !== prevProps.backdrop) {
-      this.iosClickHack();
-      this.setState(this._getStyles()); //eslint-disable-line react/no-did-update-set-state
-    }
-
-    if (this.props.container !== prevProps.container) {
-      let container = getContainer(this);
-      this._containerIsOverflowing = container.scrollHeight > containerClientHeight(container, this);
-    }
-  },
-
-  componentWillUnmount() {
+  onHide() {
     this._onDocumentKeyupListener.remove();
     this._onWindowResizeListener.remove();
 
@@ -299,6 +311,13 @@ const ModalMarkup = React.createClass({
     this.restoreLastFocus();
   },
 
+  handleHidden(...args) {
+    this.setState({ exited: true });
+
+    this.onHide();
+
+  },
+
   handleBackdropClick(e) {
     if (e.target !== e.currentTarget) {
       return;
@@ -327,7 +346,7 @@ const ModalMarkup = React.createClass({
   },
 
   focusModalContent () {
-    let modalContent = React.findDOMNode(this.refs.modal);
+    let modalContent = React.findDOMNode(this.refs.dialog);
     let current = domUtils.activeElement(this);
     let focusInModal = current && domUtils.contains(modalContent, current);
 
@@ -351,13 +370,21 @@ const ModalMarkup = React.createClass({
     }
 
     let active = domUtils.activeElement(this);
-    let modal = React.findDOMNode(this.refs.modal);
+    let modal = React.findDOMNode(this.refs.dialog);
 
     if (modal !== active && !domUtils.contains(modal, active)){
       modal.focus();
     }
   },
 
+  iosClickHack() {
+    // IOS only allows click events to be delegated to the document on elements
+    // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
+    // DOM nodes themselves. Remove if handled by React: https://github.com/facebook/react/issues/1169
+    React.findDOMNode(this.refs.modal).onclick = function () {};
+    React.findDOMNode(this.refs.backdrop).onclick = function () {};
+  },
+
   _getStyles() {
     if ( !domUtils.canUseDom ) { return {}; }
 
@@ -374,51 +401,7 @@ const ModalMarkup = React.createClass({
       }
     };
   }
-});
-
-const Modal = React.createClass({
-  propTypes: {
-    ...Portal.propTypes,
-    ...ModalMarkup.propTypes
-  },
 
-  getDefaultProps(){
-    return {
-      show: false,
-      animation: true
-    };
-  },
-
-  render() {
-    let { children, ...props } = this.props;
-
-    let show = !!props.show;
-
-    let modal = (
-      <ModalMarkup {...props} ref='modal'>
-        { children }
-      </ModalMarkup>
-    );
-
-    return (
-      <Portal container={props.container}>
-        { props.animation
-            ? (
-              <Fade
-                in={show}
-                transitionAppear={show}
-                duration={Modal.TRANSITION_DURATION}
-                unmountOnExit
-              >
-                { modal }
-              </Fade>
-            )
-            : show && modal
-        }
-
-      </Portal>
-    );
-  }
 });
 
 Modal.Body = Body;
@@ -426,6 +409,8 @@ Modal.Header = Header;
 Modal.Title = Title;
 Modal.Footer = Footer;
 
+Modal.Dialog = Dialog;
+
 Modal.TRANSITION_DURATION = 300;
 Modal.BACKDROP_TRANSITION_DURATION = 150;
 
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
new file mode 100644
index 0000000000..08552f6802
--- /dev/null
+++ b/src/ModalDialog.js
@@ -0,0 +1,59 @@
+/*eslint-disable react/prop-types */
+import React from 'react';
+import classNames from 'classnames';
+import BootstrapMixin from './BootstrapMixin';
+
+const ModalDialog = React.createClass({
+
+  mixins: [ BootstrapMixin ],
+
+  propTypes: {
+
+    /**
+     * A Callback fired when the header closeButton or non-static backdrop is clicked.
+     * @type {function}
+     * @required
+     */
+    onHide: React.PropTypes.func.isRequired,
+
+    /**
+     * A css class to apply to the Modal dialog DOM node.
+     */
+    dialogClassName: React.PropTypes.string
+
+  },
+
+  getDefaultProps() {
+    return {
+      bsClass: 'modal',
+      closeButton: true
+    };
+  },
+
+  render() {
+    let modalStyle = { display: 'block'};
+    let dialogClasses = this.getBsClassSet();
+
+    delete dialogClasses.modal;
+    dialogClasses['modal-dialog'] = true;
+
+    return (
+      <div
+        {...this.props}
+        title={null}
+        tabIndex="-1"
+        role="dialog"
+        style={modalStyle}
+        className={classNames(this.props.className, 'modal')}
+      >
+        <div className={classNames(this.props.dialogClassName, dialogClasses)}>
+          <div className="modal-content" role='document'>
+            { this.props.children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+export default ModalDialog;
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 66bb5be9e2..70f0000583 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -52,6 +52,7 @@ describe('Modal', function () {
         );
       }
     });
+
     let instance = render(
           <Container />
         , mountPoint);
@@ -60,7 +61,7 @@ describe('Modal', function () {
 
     assert.ok(React.findDOMNode(instance).className.match(/\bmodal-open\b/));
 
-    let backdrop = React.findDOMNode(modal.refs.modal).getElementsByClassName('modal-backdrop')[0];
+    let backdrop = React.findDOMNode(modal.refs.backdrop);
 
     ReactTestUtils.Simulate.click(backdrop);
 
@@ -74,18 +75,17 @@ describe('Modal', function () {
   it('Should close the modal when the backdrop is clicked', function (done) {
     let doneOp = function () { done(); };
     let instance = render(
-      <Modal show onHide={doneOp}>
+      <Modal show onHide={doneOp} animation={false}>
         <strong>Message</strong>
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.modal)
-      .getElementsByClassName('modal-backdrop')[0];
+    let backdrop = React.findDOMNode(instance.refs.backdrop);
 
     ReactTestUtils.Simulate.click(backdrop);
   });
 
-  it('Should close the modal when the modal background is clicked', function (done) {
+  it('Should close the modal when the modal dialog is clicked', function (done) {
     let doneOp = function () { done(); };
 
     let instance = render(
@@ -94,10 +94,9 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.modal)
-        .getElementsByClassName('modal')[0];
+    let dialog = React.findDOMNode(instance.refs.dialog);
 
-    ReactTestUtils.Simulate.click(backdrop);
+    ReactTestUtils.Simulate.click(dialog);
   });
 
   it('Should close the modal when the modal close button is clicked', function (done) {
@@ -140,6 +139,32 @@ describe('Modal', function () {
     assert.match(dialog.props.className, /\btestCss\b/);
   });
 
+  it('Should pass transition callbacks to Transition', function (done) {
+    let count = 0;
+    let increment = ()=> count++;
+
+    let instance = render(
+      <Modal show
+        onHide={()=>{}}
+        onExit={increment}
+        onExiting={increment}
+        onExited={()=> {
+          increment();
+          expect(count).to.equal(6);
+          done();
+        }}
+        onEnter={increment}
+        onEntering={increment}
+        onEntered={()=> {
+          increment();
+          instance.setProps({ show: false });
+        }}
+      >
+        <strong>Message</strong>
+      </Modal>
+      , mountPoint);
+  });
+
   describe('Focused state', function () {
     let focusableContainer = null;
 

From 58eaab04481ef2be56a95d91393637de3471f564 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Wed, 22 Jul 2015 20:40:39 -0400
Subject: [PATCH 063/128] [changed] pass transition callbacks to Modal
 Transition

---
 src/Modal.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Modal.js b/src/Modal.js
index b7744aedb0..f6c64ec3d3 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -141,6 +141,7 @@ const Modal = React.createClass({
 
   render() {
     let { children, animation, backdrop, ...props } = this.props;
+    let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
 
     let show = !!props.show;
 
@@ -166,7 +167,12 @@ const Modal = React.createClass({
           unmountOnExit
           in={show}
           duration={Modal.TRANSITION_DURATION}
+          onExit={onExit}
+          onExiting={onExiting}
           onExited={this.handleHidden}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
         >
           { modal }
         </Fade>
@@ -316,6 +322,9 @@ const Modal = React.createClass({
 
     this.onHide();
 
+    if (this.props.onExited) {
+      this.props.onExited(...args);
+    }
   },
 
   handleBackdropClick(e) {

From 86419a069d5aadc031743e95fa944915ff41bd5f Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Thu, 23 Jul 2015 12:25:43 +0300
Subject: [PATCH 064/128] Enable back 'space-infix-ops' eslint rule

---
 .eslintrc | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 79c77f0d84..1326e6f2f4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -36,8 +36,7 @@
     "react/self-closing-comp": 2,
     "react/wrap-multilines": 2,
     "react/jsx-uses-vars": 2,
-    /* disable till https://github.com/eslint/eslint/issues/3016 is resolved */
-    "space-infix-ops": 0,
+    "space-infix-ops": 2,
     "strict": [2, "never"]
   }
 }

From 206a0a308a67dd62334cc47ec4e70d69e5fe490f Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sun, 19 Jul 2015 20:55:22 +0300
Subject: [PATCH 065/128] Remove unnecessary 'eslint' comments

---
 src/Collapse.js                   | 2 +-
 src/Input.js                      | 2 +-
 src/NavItem.js                    | 2 +-
 src/Overlay.js                    | 4 +++-
 src/PaginationButton.js           | 2 +-
 src/Popover.js                    | 1 -
 src/Portal.js                     | 1 -
 src/Tooltip.js                    | 1 -
 src/utils/overlayPositionUtils.js | 2 +-
 9 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index ddca971770..2a632f55e9 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -7,7 +7,7 @@ let capitalize = str => str[0].toUpperCase() + str.substr(1);
 
 // reading a dimension prop will cause the browser to recalculate,
 // which will let our animations work
-let triggerBrowserReflow = node => node.offsetHeight; //eslint-disable-line no-unused-expressions
+let triggerBrowserReflow = node => node.offsetHeight;
 
 const MARGINS = {
   height: ['marginTop', 'marginBottom'],
diff --git a/src/Input.js b/src/Input.js
index f4f5dfe2ab..800ab579bc 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -5,7 +5,7 @@ import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
   render() {
-    if (this.props.type === 'static') { // eslint-disable-line react/prop-types
+    if (this.props.type === 'static') {
       deprecationWarning('Input type=static', 'StaticText');
       return <FormControls.Static {...this.props} />;
     }
diff --git a/src/NavItem.js b/src/NavItem.js
index 2be7501eee..42d36bdf2e 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -29,7 +29,7 @@ const NavItem = React.createClass({
         title,
         target,
         children,
-        'aria-controls': ariaControls,  // eslint-disable-line react/prop-types
+        'aria-controls': ariaControls,
         ...props } = this.props;
     let classes = {
           active,
diff --git a/src/Overlay.js b/src/Overlay.js
index 6d82a7f401..45337814c4 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -1,4 +1,6 @@
-/*eslint-disable object-shorthand, react/prop-types */
+/* eslint react/prop-types: [2, {ignore: ["container", "containerPadding", "target", "placement", "children"] }] */
+/* These properties are validated in 'Portal' and 'Position' components */
+
 import React, { cloneElement } from 'react';
 import Portal from './Portal';
 import Position from './Position';
diff --git a/src/PaginationButton.js b/src/PaginationButton.js
index e49e1344ca..23177025be 100644
--- a/src/PaginationButton.js
+++ b/src/PaginationButton.js
@@ -41,7 +41,7 @@ const PaginationButton = React.createClass({
 
     let {
       className,
-      ...anchorProps // eslint-disable-line object-shorthand
+      ...anchorProps
     } = this.props;
 
     return (
diff --git a/src/Popover.js b/src/Popover.js
index 5b9f974d2e..83b88029b0 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
diff --git a/src/Portal.js b/src/Portal.js
index 4cccd243e7..1de5fd6da7 100644
--- a/src/Portal.js
+++ b/src/Portal.js
@@ -1,4 +1,3 @@
-/*eslint-disable react/prop-types */
 import React from 'react';
 import CustomPropTypes from './utils/CustomPropTypes';
 import domUtils from './utils/domUtils';
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 1acb42daa4..b500244c37 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
diff --git a/src/utils/overlayPositionUtils.js b/src/utils/overlayPositionUtils.js
index eb4a0459ec..050b68fdff 100644
--- a/src/utils/overlayPositionUtils.js
+++ b/src/utils/overlayPositionUtils.js
@@ -25,7 +25,7 @@ const utils = {
       domUtils.getOffset(target) : domUtils.getPosition(target, container);
 
     return {
-      ...offset, // eslint-disable-line object-shorthand
+      ...offset,
       height: target.offsetHeight,
       width: target.offsetWidth
     };

From 86d3febe2f16d5e70c00e63b2fd37014fbb14a8f Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sun, 19 Jul 2015 20:56:26 +0300
Subject: [PATCH 066/128] [fixed] added missed 'aria-label' prop type
 validation for 'ModalHeader'

and doc description for it
---
 src/ModalHeader.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 0ab2dda5cf..8a54cce91a 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -13,7 +13,6 @@ class ModalHeader extends React.Component {
         { this.props.closeButton &&
           <button
             className='close'
-            aria-label={this.props['aria-label'] || 'Close'} //eslint-disable-line react/prop-types
             onClick={this.props.onHide}
           >
             <span aria-hidden="true">
@@ -31,6 +30,11 @@ class ModalHeader extends React.Component {
 ModalHeader.__isModalHeader = true;
 
 ModalHeader.propTypes = {
+  /**
+   * The 'aria-label' attribute is used to define a string that labels the current element.
+   * It is used for Assistive Technology when the label text is not visible on screen.
+   */
+  'aria-label': React.PropTypes.string,
   /**
    * A css class applied to the Component
    */
@@ -47,6 +51,7 @@ ModalHeader.propTypes = {
 };
 
 ModalHeader.defaultProps = {
+  'aria-label': 'Close',
   modalClassName: 'modal-header',
   closeButton: false
 };

From e8ef76a25b1489702e11596ed0a48d5fa850d4a6 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Thu, 23 Jul 2015 13:12:26 +0300
Subject: [PATCH 067/128] Remove dead example

---
 docs/examples/CollapsibleParagraph.js | 37 ---------------------------
 docs/src/Samples.js                   |  1 -
 2 files changed, 38 deletions(-)
 delete mode 100644 docs/examples/CollapsibleParagraph.js

diff --git a/docs/examples/CollapsibleParagraph.js b/docs/examples/CollapsibleParagraph.js
deleted file mode 100644
index e44ca2e628..0000000000
--- a/docs/examples/CollapsibleParagraph.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const CollapsibleParagraph = React.createClass({
-  mixins: [CollapsibleMixin],
-
-  getCollapsibleDOMNode(){
-    return React.findDOMNode(this.refs.panel);
-  },
-
-  getCollapsibleDimensionValue(){
-    return React.findDOMNode(this.refs.panel).scrollHeight;
-  },
-
-  onHandleToggle(e){
-    e.preventDefault();
-    this.setState({expanded:!this.state.expanded});
-  },
-
-  render(){
-    let styles = this.getCollapsibleClassSet();
-    let text = this.isExpanded() ? 'Hide' : 'Show';
-    return (
-      <div>
-        <Button onClick={this.onHandleToggle}>{text} Content</Button>
-        <div ref='panel' className={classNames(styles)}>
-          {this.props.children}
-        </div>
-      </div>
-    );
-  }
-});
-
-const panelInstance = (
-  <CollapsibleParagraph>
-    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-  </CollapsibleParagraph>
-);
-
-React.render(panelInstance, mountNode);
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index 67b1580bd8..cd02db6000 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -32,7 +32,6 @@ export default {
   PanelGroupControlled:          require('fs').readFileSync(__dirname + '/../examples/PanelGroupControlled.js', 'utf8'),
   PanelGroupUncontrolled:        require('fs').readFileSync(__dirname + '/../examples/PanelGroupUncontrolled.js', 'utf8'),
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
-  CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),

From 0944cddda8c5707e454a2afb054f8b20f102380d Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Thu, 23 Jul 2015 13:07:24 +0300
Subject: [PATCH 068/128] Add standalone collapsible Panel example

---
 docs/examples/PanelCollapsible.js | 24 ++++++++++++++++++++++++
 docs/src/ComponentsPage.js        |  3 +++
 docs/src/Samples.js               |  1 +
 3 files changed, 28 insertions(+)
 create mode 100644 docs/examples/PanelCollapsible.js

diff --git a/docs/examples/PanelCollapsible.js b/docs/examples/PanelCollapsible.js
new file mode 100644
index 0000000000..51d41a1fee
--- /dev/null
+++ b/docs/examples/PanelCollapsible.js
@@ -0,0 +1,24 @@
+class Example extends React.Component {
+  constructor(...args){
+    super(...args);
+    this.state = {
+      open: true
+    };
+  }
+
+  render(){
+    return (
+      <div>
+        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Panel collapsible expanded={this.state.open}>
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+          Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+        </Panel>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 1c64e7120d..7ccafb5a9d 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -219,6 +219,9 @@ const ComponentsPage = React.createClass({
                   <p>You can pass on any additional properties you need, e.g. a custom <code>onClick</code> handler, as it is shown in the example code. They all will apply to the wrapper <code>div</code> element.</p>
                   <ReactPlayground codeText={Samples.PanelBasic} />
 
+                  <h3><Anchor id='panels-collapsible'>Collapsible Panel</Anchor></h3>
+                  <ReactPlayground codeText={Samples.PanelCollapsible} />
+
                   <h3><Anchor id='panels-heading'>Panel with heading</Anchor></h3>
                   <p>Easily add a heading container to your panel with the <code>header</code> prop.</p>
                   <ReactPlayground codeText={Samples.PanelWithHeading} />
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index cd02db6000..a3ceda963a 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -25,6 +25,7 @@ export default {
   SplitButtonDropup:             require('fs').readFileSync(__dirname + '/../examples/SplitButtonDropup.js', 'utf8'),
   SplitButtonRight:              require('fs').readFileSync(__dirname + '/../examples/SplitButtonRight.js', 'utf8'),
   PanelBasic:                    require('fs').readFileSync(__dirname + '/../examples/PanelBasic.js', 'utf8'),
+  PanelCollapsible:              require('fs').readFileSync(__dirname + '/../examples/PanelCollapsible.js', 'utf8'),
   PanelWithHeading:              require('fs').readFileSync(__dirname + '/../examples/PanelWithHeading.js', 'utf8'),
   PanelWithFooter:               require('fs').readFileSync(__dirname + '/../examples/PanelWithFooter.js', 'utf8'),
   PanelContextual:               require('fs').readFileSync(__dirname + '/../examples/PanelContextual.js', 'utf8'),

From dd3470ce3979dbeda27cb5bd2834556ccaf15a10 Mon Sep 17 00:00:00 2001
From: Stefen Alper <stefen.alper@nbeards.com>
Date: Thu, 23 Jul 2015 12:34:32 +0200
Subject: [PATCH 069/128] OverlayTrigger: mount overlay if mount point

---
 src/OverlayTrigger.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index 783e3b4ee8..09dd46c687 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -138,7 +138,9 @@ const OverlayTrigger = React.createClass({
   },
 
   componentDidUpdate(){
-    React.render(this._overlay, this._mountNode);
+    if (this._mountNode) {
+      React.render(this._overlay, this._mountNode);
+    }
   },
 
   getOverlayTarget() {

From 596f40ca06b9d4e7302490adc6370962a7695c97 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 23 Jul 2015 09:17:35 -0400
Subject: [PATCH 070/128] [fixed] Modal uses bsClass prop to set its classes

---
 src/Modal.js       |  5 +++--
 src/ModalDialog.js |  7 ++++---
 test/ModalSpec.js  | 23 ++++++++++++++++++++++-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index f6c64ec3d3..46c60f6b57 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -126,6 +126,7 @@ const Modal = React.createClass({
 
   getDefaultProps(){
     return {
+      bsClass: 'modal',
       show: false,
       animation: true,
       backdrop: true,
@@ -203,12 +204,12 @@ const Modal = React.createClass({
   },
 
   renderBackdrop(modal) {
-    let { animation } = this.props;
+    let { animation, bsClass } = this.props;
     let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
     let backdrop = (
       <div ref="backdrop"
-       className={classNames('modal-backdrop', { in: this.props.show && !animation })}
+       className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
        onClick={this.handleBackdropClick}
       />
     );
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index 08552f6802..e23ba9954f 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -32,10 +32,11 @@ const ModalDialog = React.createClass({
 
   render() {
     let modalStyle = { display: 'block'};
+    let bsClass = this.props.bsClass;
     let dialogClasses = this.getBsClassSet();
 
     delete dialogClasses.modal;
-    dialogClasses['modal-dialog'] = true;
+    dialogClasses[`${bsClass}-dialog`] = true;
 
     return (
       <div
@@ -44,10 +45,10 @@ const ModalDialog = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classNames(this.props.className, 'modal')}
+        className={classNames(this.props.className, bsClass)}
       >
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className="modal-content" role='document'>
+          <div className={`${bsClass}-content`} role='document'>
             { this.props.children }
           </div>
         </div>
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 70f0000583..4f88fb5e4e 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
-import { render } from './helpers';
+import { render, shouldWarn } from './helpers';
 
 describe('Modal', function () {
   let mountPoint;
@@ -115,6 +115,27 @@ describe('Modal', function () {
     ReactTestUtils.Simulate.click(button);
   });
 
+  it('Should use bsClass on the dialog', function () {
+    let noOp = function () {};
+    let instance = render(
+      <Modal show bsClass='mymodal' onHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    let dialog = React.findDOMNode(instance.refs.dialog);
+    let backdrop = React.findDOMNode(instance.refs.backdrop);
+
+    assert.ok(dialog.className.match(/\bmymodal\b/));
+    assert.ok(dialog.children[0].className.match(/\bmymodal-dialog\b/));
+    assert.ok(dialog.children[0].children[0].className.match(/\bmymodal-content\b/));
+
+    assert.ok(backdrop.className.match(/\bmymodal-backdrop\b/));
+
+
+    shouldWarn("Invalid prop 'bsClass' of value 'mymodal'");
+  });
+
   it('Should pass bsSize to the dialog', function () {
     let noOp = function () {};
     let instance = render(

From 5cd132604b3941fbf144bca99dd0b8cc4b84e4fa Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 23 Jul 2015 12:07:28 -0400
Subject: [PATCH 071/128] Show anchor icons when links are focuses as well as
 hovered

---
 docs/assets/style.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/assets/style.css b/docs/assets/style.css
index 5e2de2b742..98330c9927 100644
--- a/docs/assets/style.css
+++ b/docs/assets/style.css
@@ -188,9 +188,14 @@ body {
   left: -0.8em;
   opacity: 0;
 }
+
 h1:hover .anchor-icon,
+h1 a:focus .anchor-icon,
 h2:hover .anchor-icon,
+h2 a:focus .anchor-icon,
 h3:hover .anchor-icon,
-h4:hover .anchor-icon {
+h3 a:focus .anchor-icon,
+h4:hover .anchor-icon,
+h4 a:focus .anchor-icon {
   opacity: 0.5;
 }

From d272389671130f43e02b915f46d434a96fe58fef Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 23 Jul 2015 12:47:34 -0400
Subject: [PATCH 072/128] [added] Overlay and OverlayTrigger accept Transition
 callbacks

Fixes #1036
---
 src/Overlay.js             | 45 ++++++++++++++++++++++++++++++++++++--
 src/OverlayTrigger.js      | 26 ++++++++++++----------
 test/OverlayTriggerSpec.js | 35 +++++++++++++++++++++++++++++
 3 files changed, 92 insertions(+), 14 deletions(-)

diff --git a/src/Overlay.js b/src/Overlay.js
index 6d82a7f401..6debd6f9e7 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -57,13 +57,20 @@ class Overlay extends React.Component {
     );
 
     if (Transition) {
+      let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
+
       // This animates the child node by injecting props, so it must precede
       // anything that adds a wrapping div.
       child = (
         <Transition
           in={props.show}
           transitionAppear
+          onExit={onExit}
+          onExiting={onExiting}
           onExited={this.onHiddenListener}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
         >
           {child}
         </Transition>
@@ -91,8 +98,12 @@ class Overlay extends React.Component {
     );
   }
 
-  handleHidden() {
+  handleHidden(...args) {
     this.setState({exited: true});
+
+    if (this.props.onExited) {
+      this.props.onExited(...args);
+    }
   }
 }
 
@@ -118,7 +129,37 @@ Overlay.propTypes = {
   animation: React.PropTypes.oneOfType([
       React.PropTypes.bool,
       CustomPropTypes.elementType
-  ])
+  ]),
+
+  /**
+   * Callback fired before the Overlay transitions in
+   */
+  onEnter: React.PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition in
+   */
+  onEntering: React.PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning in
+   */
+  onEntered: React.PropTypes.func,
+
+  /**
+   * Callback fired right before the Overlay transitions out
+   */
+  onExit: React.PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition out
+   */
+  onExiting: React.PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning out
+   */
+  onExited: React.PropTypes.func
 };
 
 Overlay.defaultProps = {
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index 783e3b4ee8..1c980b1a68 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -5,7 +5,7 @@ import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
 import Overlay from './Overlay';
 import warning from 'react/lib/warning';
-
+import pick from 'lodash/object/pick';
 /**
  * Check if value one is inside or equal to the of value
  *
@@ -146,24 +146,26 @@ const OverlayTrigger = React.createClass({
   },
 
   getOverlay() {
-    let props = {
-      show:      this.state.isOverlayShown,
-      onHide:    this.hide,
-      rootClose: this.props.rootClose,
-      animation: this.props.animation,
+    let overlayProps = {
+      ...pick(this.props, Object.keys(Overlay.propTypes)),
+      show: this.state.isOverlayShown,
+      onHide: this.hide,
       target: this.getOverlayTarget,
-      placement: this.props.placement,
-      container: this.props.container,
-      containerPadding: this.props.containerPadding
+      onExit: this.props.onExit,
+      onExiting: this.props.onExiting,
+      onExited: this.props.onExited,
+      onEnter: this.props.onEnter,
+      onEntering: this.props.onEntering,
+      onEntered: this.props.onEntered
     };
 
     let overlay = cloneElement(this.props.overlay, {
-      placement: props.placement,
-      container: props.container
+      placement: overlayProps.placement,
+      container: overlayProps.container
     });
 
     return (
-      <Overlay {...props}>
+      <Overlay {...overlayProps}>
         { overlay }
       </Overlay>
     );
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 768ad20c7c..637f59d2ba 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -39,6 +39,41 @@ describe('OverlayTrigger', function() {
     instance.state.isOverlayShown.should.be.true;
   });
 
+  it('Should pass transition callbacks to Transition', function (done) {
+    let count = 0;
+    let increment = ()=> count++;
+
+    let overlayTrigger;
+
+    let instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger
+        trigger='click'
+        overlay={<div>test</div>}
+        onHide={()=>{}}
+        onExit={increment}
+        onExiting={increment}
+        onExited={()=> {
+          increment();
+          expect(count).to.equal(6);
+          done();
+        }}
+        onEnter={increment}
+        onEntering={increment}
+        onEntered={()=> {
+          increment();
+          ReactTestUtils.Simulate.click(overlayTrigger);
+        }}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    overlayTrigger = React.findDOMNode(instance);
+
+    ReactTestUtils.Simulate.click(overlayTrigger);
+  });
+
+
   it('Should forward requested context', function() {
     const contextTypes = {
       key: React.PropTypes.string

From 29fe417b7dfec51803c9f41a317a1290093b8f5c Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 23 Jul 2015 13:22:26 -0400
Subject: [PATCH 073/128] [fixed] overlay classNames are maintained by
 overlayTrigget

fixes #1049
---
 src/Overlay.js             |  7 +++----
 src/Position.js            |  4 +++-
 test/OverlayTriggerSpec.js | 13 +++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Overlay.js b/src/Overlay.js
index 6db392d6aa..379aea35f9 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -78,10 +78,9 @@ class Overlay extends React.Component {
         </Transition>
       );
     } else {
-      child = cloneElement(
-        child,
-        {className: classNames('in', child.className)}
-      );
+      child = cloneElement(child, {
+        className: classNames('in', child.props.className)
+      });
     }
 
     // This goes after everything else because it adds a wrapping div.
diff --git a/src/Position.js b/src/Position.js
index ad9563a880..523c7973f7 100644
--- a/src/Position.js
+++ b/src/Position.js
@@ -1,4 +1,5 @@
 import React, { cloneElement } from 'react';
+import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 import { calcOverlayPosition } from './utils/overlayPositionUtils';
 import CustomPropTypes from './utils/CustomPropTypes';
@@ -40,7 +41,7 @@ class Position extends React.Component {
   }
 
   render() {
-    const {children, ...props} = this.props;
+    const {children, className, ...props} = this.props;
     const {positionLeft, positionTop, ...arrowPosition} = this.state;
 
     const child = React.Children.only(children);
@@ -51,6 +52,7 @@ class Position extends React.Component {
         ...arrowPosition,
         positionTop,
         positionLeft,
+        className: classNames(className, child.props.className),
         style: {
           ...child.props.style,
           left: positionLeft,
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 637f59d2ba..43095d13ad 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -39,6 +39,19 @@ describe('OverlayTrigger', function() {
     instance.state.isOverlayShown.should.be.true;
   });
 
+  it('Should maintain overlay classname', function() {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger trigger='click' overlay={<div className='test-overlay'>test</div>}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    const overlayTrigger = React.findDOMNode(instance);
+    ReactTestUtils.Simulate.click(overlayTrigger);
+
+    expect(document.getElementsByClassName('test-overlay').length).to.equal(1)
+  });
+
   it('Should pass transition callbacks to Transition', function (done) {
     let count = 0;
     let increment = ()=> count++;

From 860d16814501cdac60d4f988b001da8da27bd53d Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 21:41:46 +0300
Subject: [PATCH 074/128] [fixed] allow totally custom styles via 'bsStyle'

but with validation warning
---
 src/BootstrapMixin.js      |  8 ++++++--
 test/BootstrapMixinSpec.js | 31 +++++++++++++++++++++++--------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
index df8795de4d..cc5e1f1a15 100644
--- a/src/BootstrapMixin.js
+++ b/src/BootstrapMixin.js
@@ -34,9 +34,13 @@ const BootstrapMixin = {
         classes[prefix + bsSize] = true;
       }
 
-      let bsStyle = this.props.bsStyle && styleMaps.STYLES[this.props.bsStyle];
       if (this.props.bsStyle) {
-        classes[prefix + bsStyle] = true;
+        let bsStyle = styleMaps.STYLES[this.props.bsStyle];
+        if (bsStyle) {
+          classes[prefix + bsStyle] = true;
+        } else {
+          classes[this.props.bsStyle] = true;
+        }
       }
     }
 
diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index 333870506b..32eaf0e147 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import BootstrapMixin from '../src/BootstrapMixin';
 import styleMaps from '../src/styleMaps';
+import { shouldWarn } from './helpers';
 
 let Component;
 
@@ -197,14 +198,28 @@ describe('BootstrapMixin', function () {
       assert.equal(instance.prefixClass('title'), 'btn-title');
     });
 
-    it('should return "btn btn-wacky"', function () {
-      styleMaps.addStyle('wacky');
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='wacky'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+    describe('Custom styles', function () {
+      it('should validate OK custom styles added via "addStyle()"', function () {
+
+        styleMaps.addStyle('wacky');
+
+        let instance = ReactTestUtils.renderIntoDocument(
+          <Component bsClass='button' bsStyle='wacky'>
+            content
+          </Component>
+        );
+        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+      });
+
+      it('should allow custom styles as is but with validation warning', function () {
+        let instance = ReactTestUtils.renderIntoDocument(
+          <Component bsClass='button' bsStyle='my-custom-class'>
+            content
+          </Component>
+        );
+        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'my-custom-class': true});
+        shouldWarn('Invalid prop `bsStyle` of value `my-custom-class`');
+      });
     });
   });
 });

From 90aece6240011d92a87a89b560fe75e3185643f1 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 21:45:25 +0300
Subject: [PATCH 075/128] [changed] Simplify 'styleMaps.STYLES' to be of Array
 type

no public API changes.
---
 src/BootstrapMixin.js      |  8 ++++----
 src/styleMaps.js           | 26 +++++++++++++-------------
 test/BootstrapMixinSpec.js | 12 ++++++++++++
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
index cc5e1f1a15..17c8e81d2b 100644
--- a/src/BootstrapMixin.js
+++ b/src/BootstrapMixin.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import styleMaps from './styleMaps';
 import CustomPropTypes from './utils/CustomPropTypes';
 
@@ -12,7 +13,7 @@ const BootstrapMixin = {
      * Style variants
      * @type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
      */
-    bsStyle: CustomPropTypes.keyOf(styleMaps.STYLES),
+    bsStyle: React.PropTypes.oneOf(styleMaps.STYLES),
     /**
      * Size variants
      * @type {("xsmall"|"small"|"medium"|"large")}
@@ -35,9 +36,8 @@ const BootstrapMixin = {
       }
 
       if (this.props.bsStyle) {
-        let bsStyle = styleMaps.STYLES[this.props.bsStyle];
-        if (bsStyle) {
-          classes[prefix + bsStyle] = true;
+        if (styleMaps.STYLES.indexOf(this.props.bsStyle) >= 0) {
+          classes[prefix + this.props.bsStyle] = true;
         } else {
           classes[this.props.bsStyle] = true;
         }
diff --git a/src/styleMaps.js b/src/styleMaps.js
index a200286d33..49ad80f3f0 100644
--- a/src/styleMaps.js
+++ b/src/styleMaps.js
@@ -21,20 +21,20 @@ const styleMaps = {
     'row': 'row',
     'well': 'well'
   },
-  STYLES: {
-    'default': 'default',
-    'primary': 'primary',
-    'success': 'success',
-    'info': 'info',
-    'warning': 'warning',
-    'danger': 'danger',
-    'link': 'link',
-    'inline': 'inline',
-    'tabs': 'tabs',
-    'pills': 'pills'
-  },
+  STYLES: [
+    'default',
+    'primary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+    'link',
+    'inline',
+    'tabs',
+    'pills'
+  ],
   addStyle(name) {
-    styleMaps.STYLES[name] = name;
+    styleMaps.STYLES.push(name);
   },
   SIZES: {
     'large': 'lg',
diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index 32eaf0e147..5190aec58e 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -222,4 +222,16 @@ describe('BootstrapMixin', function () {
       });
     });
   });
+
+  // todo: fix bad naming
+  describe('#prefixClass', function () {
+    it('allows custom sub-classes', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Component bsClass='button'>
+          content
+        </Component>
+      );
+      assert.equal(instance.prefixClass('title'), 'btn-title');
+    });
+  });
 });

From fdc8a3d81ca6ec91e86269972a88b9b5ac54c764 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 21:57:46 +0300
Subject: [PATCH 076/128] Simplify 'bsSize' sizes mapping tests

---
 test/BootstrapMixinSpec.js | 50 ++++++++++++--------------------------
 1 file changed, 16 insertions(+), 34 deletions(-)

diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index 5190aec58e..b0777c63b2 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -153,40 +153,22 @@ describe('BootstrapMixin', function () {
       assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-inline': true});
     });
 
-    it('should return "btn btn-lg"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsSize='large'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-lg': true});
-    });
-
-    it('should return "btn btn-md"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsSize='medium'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-md': true});
-    });
-
-    it('should return "btn btn-sm"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsSize='small'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-sm': true});
-    });
-
-    it('should return "btn btn-xs"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsSize='xsmall'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-xs': true});
+    describe('Sizes', function () {
+      it('maps english words for sizes to bootstrap sizes constants', function () {
+        function instanceClassSet(size) {
+          let instance = ReactTestUtils.renderIntoDocument(
+            <Component bsClass='button' bsSize={size}>
+              content
+            </Component>
+          );
+          return instance.getBsClassSet();
+        }
+
+        assert.deepEqual(instanceClassSet('large'), {'btn': true, 'btn-lg': true});
+        assert.deepEqual(instanceClassSet('small'), {'btn': true, 'btn-sm': true});
+        assert.deepEqual(instanceClassSet('medium'), {'btn': true, 'btn-md': true});
+        assert.deepEqual(instanceClassSet('xsmall'), {'btn': true, 'btn-xs': true});
+      });
     });
 
     it('should return  "btn-title"', function () {

From 69093e68976f276bfed759bd961d1265d05d041c Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 22:06:07 +0300
Subject: [PATCH 077/128] Simplify 'bsStyle' predefined styles mapping and
 validation tests

---
 test/BootstrapMixinSpec.js | 68 ++++++++++----------------------------
 1 file changed, 17 insertions(+), 51 deletions(-)

diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index b0777c63b2..0ccdbe7008 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -99,58 +99,24 @@ describe('BootstrapMixin', function () {
       assert.deepEqual(instance.getBsClassSet(), {'panel': true});
     });
 
-    it('should return "btn btn-default"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='default'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-default': true});
-    });
-
-    it('should return "btn btn-primary"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='primary'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-primary': true});
-    });
-
-    it('should return "btn btn-success"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='success'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-success': true});
-    });
-
-    it('should return "btn btn-info"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='info'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-info': true});
-    });
-
-    it('should return "btn btn-link"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='link'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-link': true});
-    });
+    describe('Predefined Bootstrap styles', function () {
+      it('maps and validates OK default styles', function () {
+        function instanceClassSet(style) {
+          let instance = ReactTestUtils.renderIntoDocument(
+            <Component bsClass='button' bsStyle={style}>
+              content
+            </Component>
+          );
+          return instance.getBsClassSet();
+        }
 
-    it('should return "btn btn-inline"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='inline'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-inline': true});
+        assert.deepEqual(instanceClassSet('default'), {'btn': true, 'btn-default': true});
+        assert.deepEqual(instanceClassSet('primary'), {'btn': true, 'btn-primary': true});
+        assert.deepEqual(instanceClassSet('success'), {'btn': true, 'btn-success': true});
+        assert.deepEqual(instanceClassSet('info'), {'btn': true, 'btn-info': true});
+        assert.deepEqual(instanceClassSet('link'), {'btn': true, 'btn-link': true});
+        assert.deepEqual(instanceClassSet('inline'), {'btn': true, 'btn-inline': true});
+      });
     });
 
     describe('Sizes', function () {

From 96e69e4548430031caab1a999a88d5bfbccf228d Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 22:28:26 +0300
Subject: [PATCH 078/128] Simplify 'bsClass' classes mapping and validation

---
 test/BootstrapMixinSpec.js | 86 ++++++++------------------------------
 1 file changed, 17 insertions(+), 69 deletions(-)

diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index 0ccdbe7008..a4a354d917 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -27,76 +27,24 @@ describe('BootstrapMixin', function () {
       assert.deepEqual(instance.getBsClassSet(), {});
     });
 
-    it('should return "col"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='column'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'col': true});
-    });
-
-    it('should return "btn"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true});
-    });
-
-    it('should return "btn-group"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button-group'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn-group': true});
-    });
-
-    it('should return "label"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='label'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'label': true});
-    });
-
-    it('should return "alert"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='alert'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'alert': true});
-    });
-
-    it('should return "input-group"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='input-group'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'input-group': true});
-    });
-
-    it('should return "form"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='form'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'form': true});
-    });
+    it('maps and validates OK default classes', function () {
+      function instanceClassSet(bsClass) {
+        let instance = ReactTestUtils.renderIntoDocument(
+          <Component bsClass={bsClass}>
+            content
+          </Component>
+        );
+        return instance.getBsClassSet();
+      }
 
-    it('should return "panel"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='panel'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'panel': true});
+      assert.deepEqual(instanceClassSet('column'), {'col': true});
+      assert.deepEqual(instanceClassSet('button'), {'btn': true});
+      assert.deepEqual(instanceClassSet('button-group'), {'btn-group': true});
+      assert.deepEqual(instanceClassSet('label'), {'label': true});
+      assert.deepEqual(instanceClassSet('alert'), {'alert': true});
+      assert.deepEqual(instanceClassSet('input-group'), {'input-group': true});
+      assert.deepEqual(instanceClassSet('form'), {'form': true});
+      assert.deepEqual(instanceClassSet('panel'), {'panel': true});
     });
 
     describe('Predefined Bootstrap styles', function () {

From fd3e5092f1ec20f08abecef7028b0899587061d5 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 14 Jul 2015 22:28:54 +0300
Subject: [PATCH 079/128] Rename and move out test for 'prefixClass()' method

---
 test/BootstrapMixinSpec.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index a4a354d917..9c7b519120 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -85,15 +85,6 @@ describe('BootstrapMixin', function () {
       });
     });
 
-    it('should return  "btn-title"', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button'>
-          content
-        </Component>
-      );
-      assert.equal(instance.prefixClass('title'), 'btn-title');
-    });
-
     describe('Custom styles', function () {
       it('should validate OK custom styles added via "addStyle()"', function () {
 

From 1a7d9e36a9ff6a20559410c7abdbd1141d3e980e Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 24 Jul 2015 13:54:13 +0300
Subject: [PATCH 080/128] Fixed semicolon eslint warning

---
 test/OverlayTriggerSpec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 43095d13ad..78b63502b4 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -49,7 +49,7 @@ describe('OverlayTrigger', function() {
     const overlayTrigger = React.findDOMNode(instance);
     ReactTestUtils.Simulate.click(overlayTrigger);
 
-    expect(document.getElementsByClassName('test-overlay').length).to.equal(1)
+    expect(document.getElementsByClassName('test-overlay').length).to.equal(1);
   });
 
   it('Should pass transition callbacks to Transition', function (done) {

From 7d9af388793e66f211b76b454cebd703e396750c Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 24 Jul 2015 14:12:40 +0300
Subject: [PATCH 081/128] Add 'eslint-plugin-lodash' for 'src'

---
 package.json  | 1 +
 src/.eslintrc | 8 ++++++++
 2 files changed, 9 insertions(+)
 create mode 100644 src/.eslintrc

diff --git a/package.json b/package.json
index 2b8fc113c0..9d0c207e9a 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "es5-shim": "^4.1.0",
     "eslint": "0.24.1",
     "eslint-plugin-babel": "^1.0.0",
+    "eslint-plugin-lodash": "^0.1.3",
     "eslint-plugin-mocha": "^0.4.0",
     "eslint-plugin-react": "^3.0.0",
     "express": "^4.12.3",
diff --git a/src/.eslintrc b/src/.eslintrc
new file mode 100644
index 0000000000..56df94469c
--- /dev/null
+++ b/src/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "lodash"
+  ],
+  "rules": {
+    "lodash/import": 2
+  }
+}

From 2bc7eb6f69781076cb23883d85355d23b68e32ab Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 17 Jul 2015 15:15:35 +0300
Subject: [PATCH 082/128] Remove commented out leftovers

---
 docs/src/ReactPlayground.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index b966cd9dcd..7c5458521f 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -6,19 +6,15 @@ import * as modBadge from '../../src/Badge';
 import * as modButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
 import * as modButtonInput from '../../src/ButtonInput';
-
 import * as modButtonToolbar from '../../src/ButtonToolbar';
 import * as modCollapse from '../../src/Collapse';
-
 import * as modCollapsibleNav from '../../src/CollapsibleNav';
 import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
 import * as modCarousel from '../../src/Carousel';
 import * as modCarouselItem from '../../src/CarouselItem';
 import * as modCol from '../../src/Col';
 import * as modDropdownButton from '../../src/DropdownButton';
-
 import * as modFade from '../../src/Fade';
-
 import * as modFormControls from '../../src/FormControls';
 import * as modGlyphicon from '../../src/Glyphicon';
 import * as modGrid from '../../src/Grid';
@@ -40,7 +36,6 @@ import * as modPagination from '../../src/Pagination';
 import * as modPanel from '../../src/Panel';
 import * as modPanelGroup from '../../src/PanelGroup';
 import * as modPopover from '../../src/Popover';
-//import * as modPopoverTrigger from '../../src/PopoverTrigger';
 import * as modProgressBar from '../../src/ProgressBar';
 import * as modRow from '../../src/Row';
 import * as modSplitButton from '../../src/SplitButton';
@@ -49,9 +44,7 @@ import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
 import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
-//import * as modTooltipTrigger from '../../src/TooltipTrigger';
 import * as modWell from '../../src/Well';
-
 import * as modPortal from '../../src/Portal';
 import * as modOverlay from '../../src/Overlay';
 
@@ -68,8 +61,6 @@ const classNames = modClassNames.default;
 const Portal = modPortal.default;
 const Collapse = modCollapse.default;
 const Fade = modFade.default;
-
-
 const React = modReact.default;
 const Accordion = modAccordion.default;
 const Alert = modAlert.default;
@@ -97,9 +88,7 @@ const Navbar = modNavbar.default;
 const NavItem = modNavItem.default;
 const MenuItem = modMenuItem.default;
 const Modal = modModal.default;
-
 const OverlayTrigger = modOverlayTrigger.default;
-
 const PageHeader = modPageHeader.default;
 const PageItem = modPageItem.default;
 const Pagination = modPagination.default;
@@ -107,7 +96,6 @@ const Pager = modPager.default;
 const Panel = modPanel.default;
 const PanelGroup = modPanelGroup.default;
 const Popover = modPopover.default;
-//const PopoverTrigger = modPopoverTrigger.default;
 const ProgressBar = modProgressBar.default;
 const Row = modRow.default;
 const SplitButton = modSplitButton.default;
@@ -116,7 +104,6 @@ const Table = modTable.default;
 const TabPane = modTabPane.default;
 const Thumbnail = modThumbnail.default;
 const Tooltip = modTooltip.default;
-//const TooltipTrigger = modTooltipTrigger.default;
 const Well = modWell.default;
 const Overlay = modOverlay.default;
 

From 333e069fc94d657a8cb1aac8b9e0161d76461486 Mon Sep 17 00:00:00 2001
From: Pete Saia <pete@lev-interactive.com>
Date: Fri, 24 Jul 2015 10:23:45 -0300
Subject: [PATCH 083/128] resolved undefined offsetWidth and offsetHeight to 0
 for svgs in firefox #99

---
 src/utils/overlayPositionUtils.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/utils/overlayPositionUtils.js b/src/utils/overlayPositionUtils.js
index 050b68fdff..81a9b2d4d3 100644
--- a/src/utils/overlayPositionUtils.js
+++ b/src/utils/overlayPositionUtils.js
@@ -26,8 +26,11 @@ const utils = {
 
     return {
       ...offset,
-      height: target.offsetHeight,
-      width: target.offsetWidth
+
+      // In Firefox, the target does not have a offsetHeight or offsetWidth
+      // property. For now, default them to 0 to keep code from breaking.
+      height: target.offsetHeight || 0,
+      width: target.offsetWidth || 0
     };
   },
 

From 6a541ffbf224f5208742be325324549125871636 Mon Sep 17 00:00:00 2001
From: Igor Scekic <igorscekic2@gmail.com>
Date: Thu, 23 Jul 2015 21:40:44 +0200
Subject: [PATCH 084/128] [added] buttonComponentClass prop for Pagination

wrap pagination buttons in a custom element

usage: <Pagination ... buttonComponentClass={ButtonWrapper}/>
where ButtonWrapper is your custom element

default behavior (no prop given) remains unchanged

note: Bootstrap css targets .pagination > li > a
---
 src/Pagination.js          | 30 ++++++++++++++-----
 src/PaginationButton.js    | 12 ++++++--
 test/OverlayTriggerSpec.js |  2 +-
 test/PaginationSpec.js     | 61 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/src/Pagination.js b/src/Pagination.js
index 71909aa694..6548e605cc 100644
--- a/src/Pagination.js
+++ b/src/Pagination.js
@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import PaginationButton from './PaginationButton';
+import CustomPropTypes from './utils/CustomPropTypes';
+import SafeAnchor from './SafeAnchor';
 
 const Pagination = React.createClass({
   mixins: [BootstrapMixin],
@@ -15,7 +17,11 @@ const Pagination = React.createClass({
     last: React.PropTypes.bool,
     prev: React.PropTypes.bool,
     next: React.PropTypes.bool,
-    onSelect: React.PropTypes.func
+    onSelect: React.PropTypes.func,
+    /**
+     * You can use a custom element for the buttons
+     */
+    buttonComponentClass: CustomPropTypes.elementType
   },
 
   getDefaultProps() {
@@ -28,6 +34,7 @@ const Pagination = React.createClass({
       prev: false,
       next: false,
       ellipsis: true,
+      buttonComponentClass: SafeAnchor,
       bsClass: 'pagination'
     };
   },
@@ -40,7 +47,8 @@ const Pagination = React.createClass({
       activePage,
       items,
       onSelect,
-      ellipsis
+      ellipsis,
+      buttonComponentClass
     } = this.props;
 
     if(maxButtons){
@@ -68,7 +76,8 @@ const Pagination = React.createClass({
           key={pagenumber}
           eventKey={pagenumber}
           active={pagenumber === activePage}
-          onSelect={onSelect}>
+          onSelect={onSelect}
+          buttonComponentClass={buttonComponentClass}>
           {pagenumber}
         </PaginationButton>
       );
@@ -78,7 +87,8 @@ const Pagination = React.createClass({
       pageButtons.push(
         <PaginationButton
           key='ellipsis'
-          disabled>
+          disabled
+          buttonComponentClass={buttonComponentClass}>
           <span aria-label='More'>...</span>
         </PaginationButton>
       );
@@ -97,7 +107,8 @@ const Pagination = React.createClass({
         key='prev'
         eventKey={this.props.activePage - 1}
         disabled={this.props.activePage === 1}
-        onSelect={this.props.onSelect}>
+        onSelect={this.props.onSelect}
+        buttonComponentClass={this.props.buttonComponentClass}>
         <span aria-label='Previous'>&lsaquo;</span>
       </PaginationButton>
     );
@@ -113,7 +124,8 @@ const Pagination = React.createClass({
         key='next'
         eventKey={this.props.activePage + 1}
         disabled={this.props.activePage >= this.props.items}
-        onSelect={this.props.onSelect}>
+        onSelect={this.props.onSelect}
+        buttonComponentClass={this.props.buttonComponentClass}>
         <span aria-label='Next'>&rsaquo;</span>
       </PaginationButton>
     );
@@ -129,7 +141,8 @@ const Pagination = React.createClass({
         key='first'
         eventKey={1}
         disabled={this.props.activePage === 1 }
-        onSelect={this.props.onSelect}>
+        onSelect={this.props.onSelect}
+        buttonComponentClass={this.props.buttonComponentClass}>
         <span aria-label='First'>&laquo;</span>
       </PaginationButton>
     );
@@ -145,7 +158,8 @@ const Pagination = React.createClass({
         key='last'
         eventKey={this.props.items}
         disabled={this.props.activePage >= this.props.items}
-        onSelect={this.props.onSelect}>
+        onSelect={this.props.onSelect}
+        buttonComponentClass={this.props.buttonComponentClass}>
         <span aria-label='Last'>&raquo;</span>
       </PaginationButton>
     );
diff --git a/src/PaginationButton.js b/src/PaginationButton.js
index 23177025be..df1f2054f2 100644
--- a/src/PaginationButton.js
+++ b/src/PaginationButton.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import createSelectedEvent from './utils/createSelectedEvent';
-import SafeAnchor from './SafeAnchor';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const PaginationButton = React.createClass({
   mixins: [BootstrapMixin],
@@ -15,7 +15,11 @@ const PaginationButton = React.createClass({
     ]),
     onSelect: React.PropTypes.func,
     disabled: React.PropTypes.bool,
-    active: React.PropTypes.bool
+    active: React.PropTypes.bool,
+    /**
+     * You can use a custom element for this component
+     */
+    buttonComponentClass: CustomPropTypes.elementType
   },
 
   getDefaultProps() {
@@ -44,9 +48,11 @@ const PaginationButton = React.createClass({
       ...anchorProps
     } = this.props;
 
+    let ButtonComponentClass = this.props.buttonComponentClass;
+
     return (
       <li className={classNames(className, classes)}>
-        <SafeAnchor
+        <ButtonComponentClass
           {...anchorProps}
           onClick={this.handleClick} />
       </li>
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 43095d13ad..78b63502b4 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -49,7 +49,7 @@ describe('OverlayTrigger', function() {
     const overlayTrigger = React.findDOMNode(instance);
     ReactTestUtils.Simulate.click(overlayTrigger);
 
-    expect(document.getElementsByClassName('test-overlay').length).to.equal(1)
+    expect(document.getElementsByClassName('test-overlay').length).to.equal(1);
   });
 
   it('Should pass transition callbacks to Transition', function (done) {
diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js
index 6645afb81e..9666a54cc5 100644
--- a/test/PaginationSpec.js
+++ b/test/PaginationSpec.js
@@ -114,4 +114,65 @@ describe('Pagination', function () {
     assert.include(React.findDOMNode(pageButtons[0]).className, 'disabled');
     assert.include(React.findDOMNode(pageButtons[1]).className, 'disabled');
   });
+
+  it('Should wrap buttons in SafeAnchor when no buttonComponentClass prop is supplied', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Pagination
+        maxButtons={2}
+        activePage={1}
+        items={2} />
+    );
+    let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+
+    let tagName = 'A';
+
+    assert.equal(React.findDOMNode(pageButtons[0]).children[0].tagName, tagName);
+    assert.equal(React.findDOMNode(pageButtons[1]).children[0].tagName, tagName);
+
+    assert.equal(React.findDOMNode(pageButtons[0]).children[0].getAttribute('href'), '');
+    assert.equal(React.findDOMNode(pageButtons[1]).children[0].getAttribute('href'), '');
+  });
+
+  it('Should wrap each button in a buttonComponentClass when it is present', function () {
+    class DummyElement extends React.Component {
+      render() {
+        return <div {...this.props}/>;
+      }
+    }
+
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Pagination
+        maxButtons={2}
+        activePage={1}
+        items={2}
+        buttonComponentClass={DummyElement} />
+    );
+    let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+
+    let tagName = 'DIV';
+
+    assert.equal(React.findDOMNode(pageButtons[0]).children[0].tagName, tagName);
+    assert.equal(React.findDOMNode(pageButtons[1]).children[0].tagName, tagName);
+  });
+
+  it('Should call onSelect with custom buttonComponentClass', function (done) {
+    class DummyElement extends React.Component {
+      render() {
+        return <div {...this.props}/>;
+      }
+    }
+
+    function onSelect(event, selectedEvent) {
+      assert.equal(selectedEvent.eventKey, 3);
+      done();
+    }
+
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Pagination items={5} onSelect={onSelect} buttonComponentClass={DummyElement}/>
+    );
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[2]
+    );
+  });
 });

From e5155c633eafa4eacca78e8f82b21de4bd2de1d5 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Fri, 24 Jul 2015 18:46:04 -0400
Subject: [PATCH 085/128] [fixed] ensure last focused item can be focused

fixes #917
---
 src/Modal.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index 46c60f6b57..c98041b5e8 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -360,15 +360,14 @@ const Modal = React.createClass({
     let current = domUtils.activeElement(this);
     let focusInModal = current && domUtils.contains(modalContent, current);
 
-    if (this.props.autoFocus && !focusInModal) {
+    if (modalContent && this.props.autoFocus && !focusInModal) {
       this.lastFocus = current;
-
       modalContent.focus();
     }
   },
 
   restoreLastFocus () {
-    if (this.lastFocus) {
+    if (this.lastFocus && this.lastFocus.focus) {
       this.lastFocus.focus();
       this.lastFocus = null;
     }
@@ -382,7 +381,7 @@ const Modal = React.createClass({
     let active = domUtils.activeElement(this);
     let modal = React.findDOMNode(this.refs.dialog);
 
-    if (modal !== active && !domUtils.contains(modal, active)){
+    if (modal && modal !== active && !domUtils.contains(modal, active)){
       modal.focus();
     }
   },

From 0014d833f61306e83c445342328886968600a30b Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 24 Jul 2015 19:12:09 -0400
Subject: [PATCH 086/128] Release v0.24.1

---
 CHANGELOG.md | 15 +++++++++++++++
 package.json |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6fb96ebebd..c27768f4fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+v0.24.1 - Fri, 24 Jul 2015 23:12:09 GMT
+---------------------------------------
+
+- [e5155c6](../../commit/e5155c6) [fixed] ensure last focused item can be focused
+- [6a541ff](../../commit/6a541ff) [added] buttonComponentClass prop for Pagination
+- [29fe417](../../commit/29fe417) [fixed] overlay classNames are maintained by overlayTrigget
+- [d272389](../../commit/d272389) [added] Overlay and OverlayTrigger accept Transition callbacks
+- [596f40c](../../commit/596f40c) [fixed] Modal uses bsClass prop to set its classes
+- [86d3feb](../../commit/86d3feb) [fixed] added missed 'aria-label' prop type validation for 'ModalHeader'
+- [58eaab0](../../commit/58eaab0) [changed] pass transition callbacks to Modal Transition
+- [abccff9](../../commit/abccff9) [changed] expose static Modal Dialog component
+- [b5c1893](../../commit/b5c1893) [changed] unfix 'babel' back.
+
+
+
 v0.24.0 - Tue, 21 Jul 2015 22:13:05 GMT
 ---------------------------------------
 
diff --git a/package.json b/package.json
index 9d0c207e9a..a3c1da4cac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From 4271eb306890f5ffe81eadf2c344557649237964 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Fri, 24 Jul 2015 20:39:23 -0400
Subject: [PATCH 087/128] [fixed] add lodash as direct dependency

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

diff --git a/package.json b/package.json
index a3c1da4cac..e71aa8acee 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,6 @@
     "karma-webpack": "^1.5.0",
     "less": "^2.4.0",
     "less-loader": "^2.1.0",
-    "lodash": "^3.5.0",
     "marked": "^0.3.3",
     "mocha": "^2.2.1",
     "mt-changelog": "^0.6.1",
@@ -109,6 +108,7 @@
   },
   "dependencies": {
     "babel-runtime": "^5.1.10",
+    "lodash": "^3.5.0",
     "classnames": "^2.0.0"
   }
 }

From 2f45d1b990e2116ff88b014f39da808a37842e0e Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 24 Jul 2015 20:47:07 -0400
Subject: [PATCH 088/128] Release v0.24.2

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c27768f4fe..ef70e0fa8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+v0.24.2 - Sat, 25 Jul 2015 00:47:07 GMT
+---------------------------------------
+
+- [4271eb3](../../commit/4271eb3) [fixed] add lodash as direct dependency
+
+
+
 v0.24.1 - Fri, 24 Jul 2015 23:12:09 GMT
 ---------------------------------------
 
diff --git a/package.json b/package.json
index e71aa8acee..7df28c5aab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From 82c4488890e4e6a167aeece47c9800fa493ed359 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sat, 18 Jul 2015 19:02:28 +0300
Subject: [PATCH 089/128] Add tests checking correct active state handling
 after removing tab pane

---
 test/TabbedAreaSpec.js | 43 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/test/TabbedAreaSpec.js b/test/TabbedAreaSpec.js
index 5d8cf7c065..876b09dcb8 100644
--- a/test/TabbedAreaSpec.js
+++ b/test/TabbedAreaSpec.js
@@ -4,6 +4,7 @@ import TabbedArea from '../src/TabbedArea';
 import NavItem from '../src/NavItem';
 import TabPane from '../src/TabPane';
 import ValidComponentChildren from '../src/utils/ValidComponentChildren';
+import { render } from './helpers';
 
 describe('TabbedArea', function () {
   it('Should show the correct tab', function () {
@@ -230,6 +231,48 @@ describe('TabbedArea', function () {
     assert.equal(tabbedArea.refs.tabs.props.activeKey, 2);
   });
 
+  describe('animation', function () {
+    let mountPoint;
+
+    beforeEach(()=>{
+      mountPoint = document.createElement('div');
+      document.body.appendChild(mountPoint);
+    });
+
+    afterEach(function () {
+      React.unmountComponentAtNode(mountPoint);
+      document.body.removeChild(mountPoint);
+    });
+
+    function checkTabRemovingWithAnimation(animation) {
+      it(`should correctly set "active" after tabPane is removed with "animation=${animation}"`, function() {
+        let instance = render(
+          <TabbedArea activeKey={2} animation={animation}>
+            <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+            <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
+          </TabbedArea>
+        , mountPoint);
+
+        let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+        assert.equal(panes[0].props.active, false);
+        assert.equal(panes[1].props.active, true);
+
+        // second tab has been removed
+        render(
+          <TabbedArea activeKey={1} animation={animation}>
+            <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+          </TabbedArea>
+        , mountPoint);
+
+        assert.equal(panes[0].props.active, true);
+      });
+    }
+
+    checkTabRemovingWithAnimation(true);
+    checkTabRemovingWithAnimation(false);
+  });
+
   describe('Web Accessibility', function(){
 
     it('Should generate ids from parent id', function () {

From 2558f32b92166c6b0dddda38c4d344fcf4356e74 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 24 Jul 2015 23:08:16 +0300
Subject: [PATCH 090/128] [fixed] TabbedArea panes rendering with animation

---
 src/TabbedArea.js | 49 +++++++++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/TabbedArea.js b/src/TabbedArea.js
index 9a1c1ae3b9..89021be333 100644
--- a/src/TabbedArea.js
+++ b/src/TabbedArea.js
@@ -51,8 +51,22 @@ const TabbedArea = React.createClass({
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.activeKey != null && nextProps.activeKey !== this.props.activeKey) {
+      // check if the 'previousActiveKey' child still exists
+      let previousActiveKey = this.props.activeKey;
+      React.Children.forEach(nextProps.children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.props.eventKey === previousActiveKey) {
+            this.setState({
+              previousActiveKey
+            });
+            return;
+          }
+        }
+      });
+
+      // if the 'previousActiveKey' child does not exist anymore
       this.setState({
-        previousActiveKey: this.props.activeKey
+        previousActiveKey: null
       });
     }
   },
@@ -66,15 +80,12 @@ const TabbedArea = React.createClass({
   render() {
     let { id, ...props } = this.props;
 
-    let activeKey =
-      this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
-
     function renderTabIfSet(child) {
       return child.props.tab != null ? this.renderTab(child) : null;
     }
 
     let nav = (
-      <Nav {...props} activeKey={activeKey} onSelect={this.handleSelect} ref="tabs">
+      <Nav {...props} activeKey={this.getActiveKey()} onSelect={this.handleSelect} ref="tabs">
         {ValidComponentChildren.map(this.props.children, renderTabIfSet, this)}
       </Nav>
     );
@@ -94,21 +105,22 @@ const TabbedArea = React.createClass({
   },
 
   renderPane(child, index) {
-    let activeKey = this.getActiveKey();
+    let previousActiveKey = this.state.previousActiveKey;
 
-    let active = (child.props.eventKey === activeKey &&
-            (this.state.previousActiveKey == null || !this.props.animation));
+    let shouldPaneBeSetActive = child.props.eventKey === this.getActiveKey();
+    let thereIsNoActivePane = previousActiveKey == null;
+
+    let paneIsAlreadyActive = previousActiveKey != null && child.props.eventKey === previousActiveKey;
 
     return cloneElement(
         child,
         {
-          active,
+          active: shouldPaneBeSetActive && (thereIsNoActivePane || !this.props.animation),
           id: panelId(this.props, child),
           'aria-labelledby': tabId(this.props, child),
           key: child.key ? child.key : index,
           animation: this.props.animation,
-          onAnimateOutEnd: (this.state.previousActiveKey != null &&
-            child.props.eventKey === this.state.previousActiveKey) ? this.handlePaneAnimateOutEnd : null
+          onAnimateOutEnd: paneIsAlreadyActive ? this.handlePaneAnimateOutEnd : null
         }
       );
   },
@@ -134,15 +146,20 @@ const TabbedArea = React.createClass({
     return !this._isChanging;
   },
 
-  handleSelect(key) {
+  handleSelect(selectedKey) {
     if (this.props.onSelect) {
       this._isChanging = true;
-      this.props.onSelect(key);
+      this.props.onSelect(selectedKey);
       this._isChanging = false;
-    } else if (key !== this.getActiveKey()) {
+      return;
+    }
+
+    // if there is no external handler, then use embedded one
+    let previousActiveKey = this.getActiveKey();
+    if (selectedKey !== previousActiveKey) {
       this.setState({
-        activeKey: key,
-        previousActiveKey: this.getActiveKey()
+        activeKey: selectedKey,
+        previousActiveKey
       });
     }
   }

From 8e6bd6317bcbb29f0fd071613ef31c452e6a721e Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Sun, 26 Jul 2015 11:15:47 -0400
Subject: [PATCH 091/128] Properly test position calculation

---
 test/PositionSpec.js                   | 125 +++++++++++++++++++++++++
 test/utils/overlayPositionUtilsSpec.js |  92 ------------------
 2 files changed, 125 insertions(+), 92 deletions(-)
 delete mode 100644 test/utils/overlayPositionUtilsSpec.js

diff --git a/test/PositionSpec.js b/test/PositionSpec.js
index 33283927b3..ea1405fd14 100644
--- a/test/PositionSpec.js
+++ b/test/PositionSpec.js
@@ -1,8 +1,12 @@
+import pick from 'lodash/object/pick';
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
+
 import Position from '../src/Position';
 import overlayPositionUtils from '../src/utils/overlayPositionUtils';
 
+import {render} from './helpers';
+
 describe('Position', function () {
   it('Should output a child', function () {
     let instance = ReactTestUtils.renderIntoDocument(
@@ -89,5 +93,126 @@ describe('Position', function () {
     });
   });
 
+  describe('position calculation', function () {
+    let mountPoint;
+
+    beforeEach(function () {
+      mountPoint = document.createElement('div');
+      document.body.appendChild(mountPoint);
+    });
+
+    afterEach(function () {
+      React.unmountComponentAtNode(mountPoint);
+      document.body.removeChild(mountPoint);
+    });
+
+    function checkPosition(placement, targetPosition, expected) {
+      class FakeOverlay extends React.Component {
+        render() {
+          return (
+            <div style={{
+              position: 'absolute',
+              width: 200,
+              height: 200
+            }} />
+          );
+        }
+      }
+
+      class FakeContainer extends React.Component {
+        render() {
+          return (
+            <div style={{
+              position: 'relative',
+              width: 600,
+              height: 600
+            }}>
+              <div ref="target" style={{
+                position: 'absolute',
+                width: 100,
+                height: 100,
+                ...targetPosition
+              }}/>
+
+              <Position
+                target={() => React.findDOMNode(this.refs.target)}
+                container={this}
+                containerPadding={50}
+                placement={placement}
+              >
+                <FakeOverlay ref="overlay" />
+              </Position>
+            </div>
+          );
+        }
+      }
+
+      const expectedPosition = {
+        positionLeft: expected[0],
+        positionTop: expected[1],
+        arrowOffsetLeft: expected[2],
+        arrowOffsetTop: expected[3]
+      };
+
+      it('Should calculate the correct position', function() {
+        const instance = render(<FakeContainer />, mountPoint);
+
+        const calculatedPosition = pick(
+          instance.refs.overlay.props, Object.keys(expectedPosition)
+        );
+        expect(calculatedPosition).to.eql(expectedPosition);
+      });
+    }
+
+    [
+      {
+        placement: 'left',
+        noOffset: [50, 200, null, '50%'],
+        offsetBefore: [-200, 50, null, '0%'],
+        offsetAfter: [300, 350, null, '100%']
+      },
+      {
+        placement: 'top',
+        noOffset: [200, 50, '50%', null],
+        offsetBefore: [50, -200, '0%', null],
+        offsetAfter: [350, 300, '100%', null]
+      },
+      {
+        placement: 'bottom',
+        noOffset: [200, 350, '50%', null],
+        offsetBefore: [50, 100, '0%', null],
+        offsetAfter: [350, 600, '100%', null]
+      },
+      {
+        placement: 'right',
+        noOffset: [350, 200, null, '50%'],
+        offsetBefore: [100, 50, null, '0%'],
+        offsetAfter: [600, 350, null, '100%']
+      }
+    ].forEach(function(testCase) {
+      const placement = testCase.placement;
+
+      describe(`placement = ${placement}`, function() {
+        describe('no viewport offset', function() {
+          checkPosition(
+            placement, {left: 250, top: 250}, testCase.noOffset
+          );
+        });
+
+        describe('viewport offset before', function() {
+          checkPosition(
+            placement, {left: 0, top: 0}, testCase.offsetBefore
+          );
+        });
+
+        describe('viewport offset after', function() {
+          checkPosition(
+            placement, {left: 500, top: 500}, testCase.offsetAfter
+          );
+        });
+      });
+    });
+  });
+
   // ToDo: add remaining tests
 });
diff --git a/test/utils/overlayPositionUtilsSpec.js b/test/utils/overlayPositionUtilsSpec.js
deleted file mode 100644
index 50703e4b4c..0000000000
--- a/test/utils/overlayPositionUtilsSpec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import position from '../../src/utils/overlayPositionUtils';
-
-describe('calcOverlayPosition()', function() {
-    [
-      {
-        placement: 'left',
-        noOffset: [50, 300, null, '50%'],
-        offsetBefore: [-200, 150, null, '0%'],
-        offsetAfter: [300, 450, null, '100%']
-      },
-      {
-        placement: 'top',
-        noOffset: [200, 150, '50%', null],
-        offsetBefore: [50, -100, '0%', null],
-        offsetAfter: [350, 400, '100%', null]
-      },
-      {
-        placement: 'bottom',
-        noOffset: [200, 450, '50%', null],
-        offsetBefore: [50, 200, '0%', null],
-        offsetAfter: [350, 700, '100%', null]
-      },
-      {
-        placement: 'right',
-        noOffset: [350, 300, null, '50%'],
-        offsetBefore: [100, 150, null, '0%'],
-        offsetAfter: [600, 450, null, '100%']
-      }
-    ].forEach(function(testCase) {
-
-      describe(`placement = ${testCase.placement}`, function() {
-        let overlayStub, padding, placement;
-
-        beforeEach(function() {
-          placement = testCase.placement;
-          padding = 50;
-          overlayStub = {
-            offsetHeight: 200, offsetWidth: 200
-          };
-
-          position.getContainerDimensions = sinon.stub().returns({
-            width: 600, height: 600, scroll: 100
-          });
-        });
-
-        function checkPosition(expected) {
-          const [
-            positionLeft,
-            positionTop,
-            arrowOffsetLeft,
-            arrowOffsetTop
-          ] = expected;
-
-          it('Should calculate the correct position', function() {
-            position.calcOverlayPosition(placement, overlayStub, {}, {}, padding).should.eql(
-              { positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop }
-            );
-          });
-        }
-
-        describe('no viewport offset', function() {
-          beforeEach(function() {
-            position.getPosition = sinon.stub().returns({
-              left: 250, top: 350, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.noOffset);
-        });
-
-        describe('viewport offset before', function() {
-          beforeEach(function() {
-            position.getPosition = sinon.stub().returns({
-              left: 0, top: 100, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetBefore);
-        });
-
-        describe('viewport offset after', function() {
-          beforeEach(function() {
-            position.getPosition = sinon.stub().returns({
-              left: 500, top: 600, width: 100, height: 100
-            });
-          });
-
-          checkPosition(testCase.offsetAfter);
-        });
-      });
-    });
-  });

From f9c7565fabe662abc02fb4fe950d282c065f82d8 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sun, 26 Jul 2015 18:52:28 +0300
Subject: [PATCH 092/128] Update babel-eslint dev dependency

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

diff --git a/package.json b/package.json
index 7df28c5aab..d7d44abe1f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "babel": "^5.8.3",
     "babel-core": "^5.8.3",
-    "babel-eslint": "^3.1.26",
+    "babel-eslint": "^4.0.0",
     "babel-loader": "^5.2.1",
     "bootstrap": "^3.3.4",
     "brfs": "^1.4.0",

From f41090465a54d43b60c988fe0cef3022a53cd7d2 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sun, 26 Jul 2015 19:19:01 +0300
Subject: [PATCH 093/128] [added] 'xs, sm, md, lg' values for 'bsSize'

---
 src/BootstrapMixin.js | 2 +-
 src/styleMaps.js      | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
index 17c8e81d2b..98c05bd068 100644
--- a/src/BootstrapMixin.js
+++ b/src/BootstrapMixin.js
@@ -16,7 +16,7 @@ const BootstrapMixin = {
     bsStyle: React.PropTypes.oneOf(styleMaps.STYLES),
     /**
      * Size variants
-     * @type {("xsmall"|"small"|"medium"|"large")}
+     * @type {("xsmall"|"small"|"medium"|"large"|"xs"|"sm"|"md"|"lg")}
      */
     bsSize: CustomPropTypes.keyOf(styleMaps.SIZES)
   },
diff --git a/src/styleMaps.js b/src/styleMaps.js
index 49ad80f3f0..b64252732a 100644
--- a/src/styleMaps.js
+++ b/src/styleMaps.js
@@ -40,7 +40,11 @@ const styleMaps = {
     'large': 'lg',
     'medium': 'md',
     'small': 'sm',
-    'xsmall': 'xs'
+    'xsmall': 'xs',
+    'lg': 'lg',
+    'md': 'md',
+    'sm': 'sm',
+    'xs': 'xs'
   },
   GLYPHS: [
     'asterisk',

From 9f88221838c29374d8845e5dd7c5895953ba37af Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Mon, 27 Jul 2015 16:55:06 +0300
Subject: [PATCH 094/128] Add missing tests for 'Row'

---
 test/RowSpec.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 test/RowSpec.js

diff --git a/test/RowSpec.js b/test/RowSpec.js
new file mode 100644
index 0000000000..7248f80d3a
--- /dev/null
+++ b/test/RowSpec.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Row from '../src/Row';
+
+describe('Row', function () {
+  it('uses "div" by default', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Row />
+    );
+
+    assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+  });
+
+  it('has "row" class', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Row>Row content</Row>
+    );
+    assert.equal(React.findDOMNode(instance).className, 'row');
+  });
+
+  it('Should merge additional classes passed in', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Row className="bob"/>
+    );
+    assert.ok(React.findDOMNode(instance).className.match(/\bbob\b/));
+    assert.ok(React.findDOMNode(instance).className.match(/\brow\b/));
+  });
+
+  it('allows custom elements instead of "div"', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Row componentClass='section' />
+    );
+
+    assert.equal(React.findDOMNode(instance).nodeName, 'SECTION');
+  });
+});

From d89d5f352d073891d47e997f7ffde76b709be588 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Tue, 28 Jul 2015 09:48:56 -0400
Subject: [PATCH 095/128] [fixed] Modal error when backdrop is `false`

fixes #1074
---
 src/Modal.js      | 10 ++++++++++
 test/ModalSpec.js | 11 +++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/Modal.js b/src/Modal.js
index c98041b5e8..7a24bd1b2d 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -226,6 +226,16 @@ const Modal = React.createClass({
   },
 
   _setDialogRef(ref){
+    // issue #1074
+    // due to: https://github.com/facebook/react/blob/v0.13.3/src/core/ReactCompositeComponent.js#L842
+    //
+    // when backdrop is `false` react hasn't had a chance to reassign the refs to a usable object, b/c there are no other
+    // "classic" refs on the component (or they haven't been processed yet)
+    // TODO: Remove the need for this in next breaking release
+    if (Object.isFrozen(this.refs) && !Object.keys(this.refs).length) {
+      this.refs = {};
+    }
+
     this.refs.dialog = ref;
 
     //maintains backwards compat with older component breakdown
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 4f88fb5e4e..019a4925a1 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -160,6 +160,17 @@ describe('Modal', function () {
     assert.match(dialog.props.className, /\btestCss\b/);
   });
 
+  it('Should assign refs correctly when no backdrop', function () {
+
+    let test = () => render(
+      <Modal show backdrop={false} onHide={function () {}}>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    expect(test).not.to.throw();
+  });
+
   it('Should pass transition callbacks to Transition', function (done) {
     let count = 0;
     let increment = ()=> count++;

From e63655feb653af5f908f3f172b2a57c0291aab06 Mon Sep 17 00:00:00 2001
From: Paul Harper <paul@chartio.com>
Date: Thu, 23 Jul 2015 11:36:09 -0700
Subject: [PATCH 096/128] Overlays don't position themselves properly when
 target is an SVG

Fixes #1050
---
 src/utils/domUtils.js             | 20 ++++++++++++++++++++
 src/utils/overlayPositionUtils.js | 27 ++++++++++-----------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js
index 22e542d0f2..946e26405a 100644
--- a/src/utils/domUtils.js
+++ b/src/utils/domUtils.js
@@ -137,6 +137,25 @@ function getPosition(elem, offsetParent) {
   };
 }
 
+/**
+ * Get an element's size
+ *
+ * @param {HTMLElement} elem
+ * @returns {{width: number, height: number}}
+ */
+function getSize(elem) {
+  let rect = {
+    width: elem.offsetWidth,
+    height: elem.offsetHeight
+  };
+  if (typeof elem.getBoundingClientRect !== 'undefined') {
+    let {width, height} = elem.getBoundingClientRect();
+    rect.width = width || rect.width;
+    rect.height = height || rect.height;
+  }
+  return rect;
+}
+
 /**
  * Get parent element
  *
@@ -187,6 +206,7 @@ export default {
   getComputedStyles,
   getOffset,
   getPosition,
+  getSize,
   activeElement: getActiveElement,
   offsetParent: offsetParentFunc
 };
diff --git a/src/utils/overlayPositionUtils.js b/src/utils/overlayPositionUtils.js
index 81a9b2d4d3..d8909ec2ac 100644
--- a/src/utils/overlayPositionUtils.js
+++ b/src/utils/overlayPositionUtils.js
@@ -3,42 +3,35 @@ import domUtils from './domUtils';
 const utils = {
 
   getContainerDimensions(containerNode) {
-    let width, height, scroll;
+    let size, scroll;
 
     if (containerNode.tagName === 'BODY') {
-      width = window.innerWidth;
-      height = window.innerHeight;
+      size = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
       scroll =
         domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
         containerNode.scrollTop;
     } else {
-      width = containerNode.offsetWidth;
-      height = containerNode.offsetHeight;
+      size = domUtils.getSize(containerNode);
       scroll = containerNode.scrollTop;
     }
 
-    return {width, height, scroll};
+    return {...size, scroll};
   },
 
   getPosition(target, container) {
     const offset = container.tagName === 'BODY' ?
       domUtils.getOffset(target) : domUtils.getPosition(target, container);
-
-    return {
-      ...offset,
-
-      // In Firefox, the target does not have a offsetHeight or offsetWidth
-      // property. For now, default them to 0 to keep code from breaking.
-      height: target.offsetHeight || 0,
-      width: target.offsetWidth || 0
-    };
+    const size = domUtils.getSize(target);
+    return {...offset, ...size};
   },
 
   calcOverlayPosition(placement, overlayNode, target, container, padding) {
     const childOffset = utils.getPosition(target, container);
 
-    const overlayHeight = overlayNode.offsetHeight;
-    const overlayWidth = overlayNode.offsetWidth;
+    const {height: overlayHeight, width: overlayWidth} = domUtils.getSize(overlayNode);
 
     let positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop;
 

From c8d9a33f4fa06c18218e3c9c6163e58c9950ad42 Mon Sep 17 00:00:00 2001
From: Paul Harper <paul@chartio.com>
Date: Tue, 28 Jul 2015 14:38:50 -0700
Subject: [PATCH 097/128] Ensure getSize always returns a number

---
 src/utils/domUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js
index 946e26405a..256aaf64f8 100644
--- a/src/utils/domUtils.js
+++ b/src/utils/domUtils.js
@@ -145,8 +145,8 @@ function getPosition(elem, offsetParent) {
  */
 function getSize(elem) {
   let rect = {
-    width: elem.offsetWidth,
-    height: elem.offsetHeight
+    width: elem.offsetWidth || 0,
+    height: elem.offsetHeight || 0
   };
   if (typeof elem.getBoundingClientRect !== 'undefined') {
     let {width, height} = elem.getBoundingClientRect();

From 57c82c032ece08b6b76b3eef6d1ad65357a40a5d Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Wed, 29 Jul 2015 13:32:29 +0300
Subject: [PATCH 098/128] Make PopoverContained example consistent with others

---
 docs/examples/PopoverContained.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/examples/PopoverContained.js b/docs/examples/PopoverContained.js
index 3e0c036cee..0ba98b3b47 100644
--- a/docs/examples/PopoverContained.js
+++ b/docs/examples/PopoverContained.js
@@ -1,6 +1,6 @@
 class Example extends React.Component {
-  constructor(props, context){
-    super(props, context);
+  constructor(...args){
+    super(...args);
     this.state = { show: false };
   }
   render(){

From a4ce7e1aeb589a408261de9898933c3f7b61102e Mon Sep 17 00:00:00 2001
From: Ivan Kurnosov <zerkms@zerkms.com>
Date: Wed, 29 Jul 2015 21:53:29 +1200
Subject: [PATCH 099/128] [fixed] added finalisation for the Modal when it was
 unbound from the tree

---
 src/Modal.js      |  6 ++++++
 test/ModalSpec.js | 16 ++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/Modal.js b/src/Modal.js
index 7a24bd1b2d..78c983bc96 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -277,6 +277,12 @@ const Modal = React.createClass({
     }
   },
 
+  componentWillUnmount() {
+    if (this.props.show) {
+      this.onHide();
+    }
+  },
+
   onShow() {
     const doc = domUtils.ownerDocument(this);
     const win = domUtils.ownerWindow(this);
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 019a4925a1..7ea08e9260 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -197,6 +197,22 @@ describe('Modal', function () {
       , mountPoint);
   });
 
+  it('Should unbind listeners when unmounted', function() {
+    render(
+        <div>
+          <Modal show onHide={() => null} animation={false}>
+            <strong>Foo bar</strong>
+          </Modal>
+        </div>
+    , mountPoint);
+
+    assert.include(document.body.className, 'modal-open');
+
+    render(<div />, mountPoint);
+
+    assert.notInclude(document.body.className, 'modal-open');
+  });
+
   describe('Focused state', function () {
     let focusableContainer = null;
 

From 09279c322d9a684179426d2226471892e2577276 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Wed, 29 Jul 2015 22:38:55 -0400
Subject: [PATCH 100/128] Initially render examples on the server

---
 docs/src/ReactPlayground.js | 349 ++++++++++++++++--------------------
 1 file changed, 156 insertions(+), 193 deletions(-)

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 7c5458521f..1b9901c0b1 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -1,113 +1,65 @@
-import * as modReact from 'react';
-import * as modClassNames from 'classnames';
-import * as modAccordion from '../../src/Accordion';
-import * as modAlert from '../../src/Alert';
-import * as modBadge from '../../src/Badge';
-import * as modButton from '../../src/Button';
-import * as modButtonGroup from '../../src/ButtonGroup';
-import * as modButtonInput from '../../src/ButtonInput';
-import * as modButtonToolbar from '../../src/ButtonToolbar';
-import * as modCollapse from '../../src/Collapse';
-import * as modCollapsibleNav from '../../src/CollapsibleNav';
-import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
-import * as modCarousel from '../../src/Carousel';
-import * as modCarouselItem from '../../src/CarouselItem';
-import * as modCol from '../../src/Col';
-import * as modDropdownButton from '../../src/DropdownButton';
-import * as modFade from '../../src/Fade';
-import * as modFormControls from '../../src/FormControls';
-import * as modGlyphicon from '../../src/Glyphicon';
-import * as modGrid from '../../src/Grid';
-import * as modInput from '../../src/Input';
-import * as modJumbotron from '../../src/Jumbotron';
-import * as modLabel from '../../src/Label';
-import * as modListGroup from '../../src/ListGroup';
-import * as modListGroupItem from '../../src/ListGroupItem';
-import * as modNav from '../../src/Nav';
-import * as modNavbar from '../../src/Navbar';
-import * as modNavItem from '../../src/NavItem';
-import * as modMenuItem from '../../src/MenuItem';
-import * as modModal from '../../src/Modal';
-import * as modOverlayTrigger from '../../src/OverlayTrigger';
-import * as modPageHeader from '../../src/PageHeader';
-import * as modPageItem from '../../src/PageItem';
-import * as modPager from '../../src/Pager';
-import * as modPagination from '../../src/Pagination';
-import * as modPanel from '../../src/Panel';
-import * as modPanelGroup from '../../src/PanelGroup';
-import * as modPopover from '../../src/Popover';
-import * as modProgressBar from '../../src/ProgressBar';
-import * as modRow from '../../src/Row';
-import * as modSplitButton from '../../src/SplitButton';
-import * as modTabbedArea from '../../src/TabbedArea';
-import * as modTable from '../../src/Table';
-import * as modTabPane from '../../src/TabPane';
-import * as modThumbnail from '../../src/Thumbnail';
-import * as modTooltip from '../../src/Tooltip';
-import * as modWell from '../../src/Well';
-import * as modPortal from '../../src/Portal';
-import * as modOverlay from '../../src/Overlay';
-
-import babel from 'babel-core/browser';
-
-import CodeExample from './CodeExample';
-
-
-
-const classNames = modClassNames.default;
+// These do not use ES6 imports, because the evaluated code requires un-mangled
+// variable names.
 
 /* eslint-disable */
+const classNames = require('classnames');
+const React = require('react');
+
+const Accordion = require('../../src/Accordion');
+const Alert = require('../../src/Alert');
+const Badge = require('../../src/Badge');
+const Button = require('../../src/Button');
+const ButtonGroup = require('../../src/ButtonGroup');
+const ButtonInput = require('../../src/ButtonInput');
+const ButtonToolbar = require('../../src/ButtonToolbar');
+const Carousel = require('../../src/Carousel');
+const CarouselItem = require('../../src/CarouselItem');
+const Col = require('../../src/Col');
+const Collapse = require('../../src/Collapse');
+const CollapsibleMixin = require('../../src/CollapsibleMixin');
+const CollapsibleNav = require('../../src/CollapsibleNav');
+const DropdownButton = require('../../src/DropdownButton');
+const Fade = require('../../src/Fade');
+const FormControls = require('../../src/FormControls');
+const Glyphicon = require('../../src/Glyphicon');
+const Grid = require('../../src/Grid');
+const Input = require('../../src/Input');
+const Jumbotron = require('../../src/Jumbotron');
+const Label = require('../../src/Label');
+const ListGroup = require('../../src/ListGroup');
+const ListGroupItem = require('../../src/ListGroupItem');
+const MenuItem = require('../../src/MenuItem');
+const Modal = require('../../src/Modal');
+const Nav = require('../../src/Nav');
+const Navbar = require('../../src/Navbar');
+const NavItem = require('../../src/NavItem');
+const Overlay = require('../../src/Overlay');
+const OverlayTrigger = require('../../src/OverlayTrigger');
+const PageHeader = require('../../src/PageHeader');
+const PageItem = require('../../src/PageItem');
+const Pager = require('../../src/Pager');
+const Pagination = require('../../src/Pagination');
+const Panel = require('../../src/Panel');
+const PanelGroup = require('../../src/PanelGroup');
+const Popover = require('../../src/Popover');
+const Portal = require('../../src/Portal');
+const ProgressBar = require('../../src/ProgressBar');
+const Row = require('../../src/Row');
+const SplitButton = require('../../src/SplitButton');
+const TabbedArea = require('../../src/TabbedArea');
+const Table = require('../../src/Table');
+const TabPane = require('../../src/TabPane');
+const Thumbnail = require('../../src/Thumbnail');
+const Tooltip = require('../../src/Tooltip');
+const Well = require('../../src/Well');
+/* eslint-enable */
 
-const Portal = modPortal.default;
-const Collapse = modCollapse.default;
-const Fade = modFade.default;
-const React = modReact.default;
-const Accordion = modAccordion.default;
-const Alert = modAlert.default;
-const Badge = modBadge.default;
-const Button = modButton.default;
-const ButtonGroup = modButtonGroup.default;
-const ButtonInput = modButtonInput.default;
-const ButtonToolbar = modButtonToolbar.default;
-const CollapsibleNav = modCollapsibleNav.default;
-const CollapsibleMixin = modCollapsibleMixin.default;
-const Carousel = modCarousel.default;
-const CarouselItem = modCarouselItem.default;
-const Col = modCol.default;
-const DropdownButton = modDropdownButton.default;
-const FormControls = modFormControls;
-const Glyphicon = modGlyphicon.default;
-const Grid = modGrid.default;
-const Input = modInput.default;
-const Jumbotron = modJumbotron.default;
-const Label = modLabel.default;
-const ListGroup = modListGroup.default;
-const ListGroupItem = modListGroupItem.default;
-const Nav = modNav.default;
-const Navbar = modNavbar.default;
-const NavItem = modNavItem.default;
-const MenuItem = modMenuItem.default;
-const Modal = modModal.default;
-const OverlayTrigger = modOverlayTrigger.default;
-const PageHeader = modPageHeader.default;
-const PageItem = modPageItem.default;
-const Pagination = modPagination.default;
-const Pager = modPager.default;
-const Panel = modPanel.default;
-const PanelGroup = modPanelGroup.default;
-const Popover = modPopover.default;
-const ProgressBar = modProgressBar.default;
-const Row = modRow.default;
-const SplitButton = modSplitButton.default;
-const TabbedArea = modTabbedArea.default;
-const Table = modTable.default;
-const TabPane = modTabPane.default;
-const Thumbnail = modThumbnail.default;
-const Tooltip = modTooltip.default;
-const Well = modWell.default;
-const Overlay = modOverlay.default;
+import babel from 'babel-core/browser';
+import CodeExample from './CodeExample';
 
-/* eslint-enable */
+// This is only used for the ReactPlayground component, not for any of the
+// examples, so it's fine to import like this.
+import SafeAnchor from '../../src/SafeAnchor';
 
 const IS_MOBILE = typeof navigator !== 'undefined' && (
   navigator.userAgent.match(/Android/i)
@@ -192,12 +144,9 @@ const selfCleaningTimeout = {
 const ReactPlayground = React.createClass({
   mixins: [selfCleaningTimeout],
 
-  MODES: {JSX: 'JSX', JS: 'JS', NONE: null},
-
   propTypes: {
     codeText: React.PropTypes.string.isRequired,
-    transformer: React.PropTypes.func,
-    renderCode: React.PropTypes.bool
+    transformer: React.PropTypes.func
   },
 
   getDefaultProps() {
@@ -210,119 +159,128 @@ const ReactPlayground = React.createClass({
 
   getInitialState() {
     return {
-      mode: this.MODES.NONE,
-      code: this.props.codeText
+      code: this.props.codeText,
+      codeChanged: false,
+      showCode: false
     };
   },
 
-  handleCodeChange(value) {
-    this.setState({code: value});
-    this.executeCode();
-  },
-
-  handleCodeModeSwitch(mode) {
-    this.setState({mode});
-  },
+  componentWillMount() {
+    // For the initial render, we can hijack React.render to intercept the
+    // example element and render it normally. This is safe because it's code
+    // that we supply, so we can ensure ahead of time that it won't throw an
+    // exception while rendering.
+    const originalReactRender = React.render;
+    React.render = (element) => this._initialExample = element;
 
-  handleCodeModeToggle(e) {
-    let mode;
+    // Stub out mountNode for the example code.
+    const mountNode = null;  // eslint-disable-line no-unused-vars
 
-    e.preventDefault();
+    try {
+      const compiledCode = this.props.transformer(this.props.codeText);
 
-    switch (this.state.mode) {
-      case this.MODES.NONE:
-        mode = this.MODES.JSX;
-        break;
-      case this.MODES.JSX:
-      default:
-        mode = this.MODES.NONE;
+      /* eslint-disable */
+      eval(compiledCode);
+      /* eslint-enable */
+    } finally {
+      React.render = originalReactRender;
     }
+  },
+
+  componentWillUnmount() {
+    this.clearExample();
+  },
 
-    this.setState({mode});
+  handleCodeChange(value) {
+    this.setState(
+      {code: value, codeChanged: true},
+      this.executeCode
+    );
   },
 
-  compileCode() {
-    return this.props.transformer(this.state.code);
+  handleCodeModeToggle() {
+    this.setState({
+      showCode: !this.state.showCode
+    });
   },
 
   render() {
-    let classes = {
-      'bs-example': true
-    };
-    let toggleClasses = {
-      'code-toggle': true
-    };
-    let editor;
+    return (
+      <div className='playground'>
+        {this.renderExample()}
 
-    if (this.props.exampleClassName){
-      classes[this.props.exampleClassName] = true;
-    }
+        {this.renderEditor()}
+        {this.renderToggle()}
+      </div>
+    );
+  },
 
-    if (this.state.mode !== this.MODES.NONE) {
-       editor = (
-           <CodeMirrorEditor
-             key='jsx'
-             onChange={this.handleCodeChange}
-             className='highlight'
-             codeText={this.state.code}/>
-        );
-       toggleClasses.open = true;
+  renderExample() {
+    let example;
+    if (this.state.codeChanged) {
+      example = (
+        <div ref='mount' />
+      );
+    } else {
+      example = (
+        <div>{this._initialExample}</div>
+      );
     }
+
     return (
-      <div className='playground'>
-        <div className={classNames(classes)}>
-          <div ref='mount' />
-        </div>
-        {editor}
-        <a className={classNames(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
+      <div className={classNames('bs-example', this.props.exampleClassName)}>
+        {example}
       </div>
-      );
+    );
   },
 
-  componentDidMount() {
-    this.executeCode();
+  renderEditor() {
+    if (!this.state.showCode) {
+      return null;
+    }
+
+    return (
+      <CodeMirrorEditor
+        key='jsx'
+        onChange={this.handleCodeChange}
+        className='highlight'
+        codeText={this.state.code}
+      />
+    );
   },
 
-  componentWillUpdate(nextProps, nextState) {
-    // execute code only when the state's not being updated by switching tab
-    // this avoids re-displaying the error, which comes after a certain delay
-    if (this.state.code !== nextState.code) {
-      this.executeCode();
-    }
+  renderToggle() {
+    return (
+      <SafeAnchor
+        className={classNames('code-toggle', {'open': this.state.showCode})}
+        onClick={this.handleCodeModeToggle}
+      >
+        {this.state.showCode ? 'hide code' : 'show code'}
+      </SafeAnchor>
+    );
   },
 
-  componentWillUnmount() {
-    let mountNode = React.findDOMNode(this.refs.mount);
+  clearExample() {
+    const mountNode = React.findDOMNode(this.refs.mount);
     try {
       React.unmountComponentAtNode(mountNode);
     } catch (e) {
       console.error(e);
     }
+
+    return mountNode;
   },
 
   executeCode() {
-    let mountNode = React.findDOMNode(this.refs.mount);
-
-    try {
-      React.unmountComponentAtNode(mountNode);
-    } catch (e) {
-      console.error(e);
-    }
+    const mountNode = this.clearExample();
 
     let compiledCode = null;
     try {
-      compiledCode = this.compileCode();
+      compiledCode = this.props.transformer(this.state.code);
 
-      if (this.props.renderCode) {
-        React.render(
-          <CodeMirrorEditor codeText={compiledCode} readOnly />,
-          mountNode
-        );
-      } else {
-        /* eslint-disable */
-        eval(compiledCode);
-        /* eslint-enable */
-      }
+      /* eslint-disable */
+      eval(compiledCode);
+      /* eslint-enable */
     } catch (err) {
       if (compiledCode !== null) {
         console.log(err, compiledCode);
@@ -330,12 +288,17 @@ const ReactPlayground = React.createClass({
         console.log(err);
       }
 
-      this.updateTimeout(() => {
-        React.render(
-          <Alert bsStyle='danger'>{err.toString()}</Alert>,
-          mountNode
-        );
-      }, 500);
+      this.updateTimeout(
+        () => {
+          React.render(
+            <Alert bsStyle='danger'>
+              {err.toString()}
+            </Alert>,
+            mountNode
+          );
+        },
+        500
+      );
     }
   }
 });

From 0f46a9745d43d6498e916ac33e8acbd18fe16f24 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Fri, 24 Jul 2015 19:06:28 -0400
Subject: [PATCH 101/128] [added] Allow custom Modal dialog components

---
 src/Modal.js      | 15 ++++++++++++---
 test/ModalSpec.js | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index 78c983bc96..8be7f96032 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -4,10 +4,11 @@ import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
 import createChainedFunction from './utils/createChainedFunction';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 import Portal from './Portal';
 import Fade from './Fade';
-import Dialog from './ModalDialog';
+import ModalDialog from './ModalDialog';
 import Body from './ModalBody';
 import Header from './ModalHeader';
 import Title from './ModalTitle';
@@ -94,7 +95,7 @@ function getScrollbarSize(){
 const Modal = React.createClass({
   propTypes: {
     ...Portal.propTypes,
-    ...Dialog.propTypes,
+    ...ModalDialog.propTypes,
 
     /**
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
@@ -110,6 +111,12 @@ const Modal = React.createClass({
      */
     animation: React.PropTypes.bool,
 
+    /**
+     * A Component type that provides the modal content Markup. This is a useful prop when you want to use your own
+     * styles and markup to create a custom modal component.
+     */
+    dialogComponent: CustomPropTypes.elementType,
+
     /**
      * When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes.
      * Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
@@ -127,6 +134,7 @@ const Modal = React.createClass({
   getDefaultProps(){
     return {
       bsClass: 'modal',
+      dialogComponent: ModalDialog,
       show: false,
       animation: true,
       backdrop: true,
@@ -145,6 +153,7 @@ const Modal = React.createClass({
     let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
 
     let show = !!props.show;
+    let Dialog = props.dialogComponent;
 
     const mountModal = show || (animation && !this.state.exited);
     if (!mountModal) {
@@ -434,7 +443,7 @@ Modal.Header = Header;
 Modal.Title = Title;
 Modal.Footer = Footer;
 
-Modal.Dialog = Dialog;
+Modal.Dialog = ModalDialog;
 
 Modal.TRANSITION_DURATION = 300;
 Modal.BACKDROP_TRANSITION_DURATION = 150;
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 7ea08e9260..1cb52812b2 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -171,6 +171,22 @@ describe('Modal', function () {
     expect(test).not.to.throw();
   });
 
+  it('Should use dialogComponent', function () {
+    let noOp = function () {};
+
+    class CustomDialog {
+      render(){ return <div {...this.props}/>; }
+    }
+
+    let instance = render(
+      <Modal show dialogComponent={CustomDialog} onHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    assert.ok(instance.refs.dialog instanceof CustomDialog);
+  });
+
   it('Should pass transition callbacks to Transition', function (done) {
     let count = 0;
     let increment = ()=> count++;

From fd8d4d2770eeca99a19f2aea00b8860e0b857551 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Thu, 30 Jul 2015 20:59:03 -0400
Subject: [PATCH 102/128] [fixed] regression when clicking "static" modal
 backdrops

Not sure where this fell to the floor, but clearly we have no tests around it (will get to that)
---
 src/Modal.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Modal.js b/src/Modal.js
index 8be7f96032..ed4db06466 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -216,10 +216,14 @@ const Modal = React.createClass({
     let { animation, bsClass } = this.props;
     let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
+    // Don't handle clicks for "static" backdrops
+    let onClick = this.props.backdrop === true ?
+      this.handleBackdropClick : null;
+
     let backdrop = (
       <div ref="backdrop"
        className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
-       onClick={this.handleBackdropClick}
+       onClick={onClick}
       />
     );
 

From bae8ba9e2e8eb229b144cc9f0a423f6ce63f9caf Mon Sep 17 00:00:00 2001
From: Igor Scekic <igorscekic2@gmail.com>
Date: Wed, 29 Jul 2015 16:37:46 +0200
Subject: [PATCH 103/128] [fixed] Carousel checks if it is mounted before
 setting state

---
 src/Carousel.js | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/Carousel.js b/src/Carousel.js
index 0d1b21adb0..8801661c2d 100644
--- a/src/Carousel.js
+++ b/src/Carousel.js
@@ -266,26 +266,28 @@ const Carousel = React.createClass({
   handleSelect(index, direction) {
     clearTimeout(this.timeout);
 
-    let previousActiveIndex = this.getActiveIndex();
-    direction = direction || this.getDirection(previousActiveIndex, index);
+    if (this.isMounted()) {
+      let previousActiveIndex = this.getActiveIndex();
+      direction = direction || this.getDirection(previousActiveIndex, index);
 
-    if (this.props.onSelect) {
-      this.props.onSelect(index, direction);
-    }
-
-    if (this.props.activeIndex == null && index !== previousActiveIndex) {
-      if (this.state.previousActiveIndex != null) {
-        // If currently animating don't activate the new index.
-        // TODO: look into queuing this canceled call and
-        // animating after the current animation has ended.
-        return;
+      if (this.props.onSelect) {
+        this.props.onSelect(index, direction);
       }
 
-      this.setState({
-        activeIndex: index,
-        previousActiveIndex,
-        direction
-      });
+      if (this.props.activeIndex == null && index !== previousActiveIndex) {
+        if (this.state.previousActiveIndex != null) {
+          // If currently animating don't activate the new index.
+          // TODO: look into queuing this canceled call and
+          // animating after the current animation has ended.
+          return;
+        }
+
+        this.setState({
+          activeIndex: index,
+          previousActiveIndex,
+          direction
+        });
+      }
     }
   }
 });

From cc1be96d3acb4df7d34828d4ba188b40eded82a4 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Fri, 31 Jul 2015 13:04:23 -0400
Subject: [PATCH 104/128] add test for static backdrops

---
 test/ModalSpec.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 1cb52812b2..99affa0485 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -99,6 +99,21 @@ describe('Modal', function () {
     ReactTestUtils.Simulate.click(dialog);
   });
 
+  it('Should not close the modal when the "static" backdrop is clicked', function () {
+    let onHideSpy = sinon.spy();
+    let instance = render(
+      <Modal show onHide={onHideSpy} backdrop='static'>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    let backdrop = React.findDOMNode(instance.refs.backdrop);
+
+    ReactTestUtils.Simulate.click(backdrop);
+
+    expect(onHideSpy).to.not.have.been.called;
+  });
+
   it('Should close the modal when the modal close button is clicked', function (done) {
     let doneOp = function () { done(); };
 

From 02f89660206b81cc64bbb5aa346b3570418dad01 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 31 Jul 2015 13:29:18 -0400
Subject: [PATCH 105/128] [changed] Update dependencies

---
 package.json | 94 ++++++++++++++++++++++++++--------------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index d7d44abe1f..af8c2e8357 100644
--- a/package.json
+++ b/package.json
@@ -43,72 +43,72 @@
     "react": ">=0.13"
   },
   "devDependencies": {
-    "babel": "^5.8.3",
-    "babel-core": "^5.8.3",
-    "babel-eslint": "^4.0.0",
-    "babel-loader": "^5.2.1",
-    "bootstrap": "^3.3.4",
+    "babel": "^5.8.19",
+    "babel-core": "^5.8.19",
+    "babel-eslint": "^4.0.5",
+    "babel-loader": "^5.3.2",
+    "bootstrap": "^3.3.5",
     "brfs": "^1.4.0",
-    "chai": "^3.0.0",
-    "child-process-promise": "^1.0.1",
-    "codemirror": "^5.0.0",
-    "colors": "^1.0.3",
-    "css-loader": "^0.15.2",
-    "es5-shim": "^4.1.0",
-    "eslint": "0.24.1",
-    "eslint-plugin-babel": "^1.0.0",
+    "chai": "^3.2.0",
+    "child-process-promise": "^1.1.0",
+    "codemirror": "^5.5.0",
+    "colors": "^1.1.2",
+    "css-loader": "^0.15.6",
+    "es5-shim": "^4.1.10",
+    "eslint": "1.0.0",
+    "eslint-plugin-babel": "^1.2.0",
     "eslint-plugin-lodash": "^0.1.3",
     "eslint-plugin-mocha": "^0.4.0",
-    "eslint-plugin-react": "^3.0.0",
-    "express": "^4.12.3",
-    "extract-text-webpack-plugin": "^0.8.0",
-    "file-loader": "^0.8.1",
+    "eslint-plugin-react": "^3.1.0",
+    "express": "^4.13.1",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "file-loader": "^0.8.4",
     "fs-extra": "^0.22.1",
     "fs-promise": "^0.3.1",
-    "glob": "^5.0.10",
+    "glob": "^5.0.14",
     "http-proxy": "^1.11.1",
-    "ip": "^0.3.2",
+    "ip": "^0.3.3",
     "isparta-loader": "^0.2.0",
-    "json-loader": "^0.5.1",
-    "karma": "~0.12.32",
+    "json-loader": "^0.5.2",
+    "karma": "~0.13.3",
     "karma-chrome-launcher": "~0.2.0",
     "karma-cli": "0.1.0",
     "karma-coverage": "^0.4.2",
-    "karma-coveralls": "^1.1.0",
-    "karma-firefox-launcher": "~0.1.3",
+    "karma-coveralls": "^1.1.2",
+    "karma-firefox-launcher": "~0.1.6",
     "karma-mocha": "~0.2.0",
-    "karma-mocha-reporter": "^1.0.2",
+    "karma-mocha-reporter": "^1.0.4",
     "karma-phantomjs-launcher": "^0.2.0",
     "karma-sinon-chai": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.4",
-    "karma-webpack": "^1.5.0",
-    "less": "^2.4.0",
-    "less-loader": "^2.1.0",
-    "marked": "^0.3.3",
-    "mocha": "^2.2.1",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
+    "less": "^2.5.1",
+    "less-loader": "^2.2.0",
+    "marked": "^0.3.5",
+    "mocha": "^2.2.5",
     "mt-changelog": "^0.6.1",
     "node-libs-browser": "^0.5.2",
-    "nodemon": "^1.3.7",
-    "output-file-sync": "^1.1.0",
+    "nodemon": "^1.4.0",
+    "output-file-sync": "^1.1.1",
     "phantomjs": "^1.9.17",
     "portfinder": "^0.4.0",
-    "react": "^0.13.1",
+    "react": "^0.13.3",
     "react-component-metadata": "^1.2.1",
-    "react-hot-loader": "^1.2.7",
-    "react-router": "^0.13.1",
-    "rimraf": "^2.3.2",
-    "semver": "^5.0.0",
-    "sinon": "^1.10.3",
-    "sinon-chai": "^2.7.0",
-    "style-loader": "^0.12.0",
-    "transform-loader": "^0.2.1",
-    "webpack": "^1.7.2",
-    "webpack-dev-server": "^1.8.2",
-    "yargs": "^3.5.4"
+    "react-hot-loader": "^1.2.8",
+    "react-router": "^0.13.3",
+    "rimraf": "^2.4.2",
+    "semver": "^5.0.1",
+    "sinon": "^1.15.4",
+    "sinon-chai": "^2.8.0",
+    "style-loader": "^0.12.3",
+    "transform-loader": "^0.2.2",
+    "webpack": "^1.10.5",
+    "webpack-dev-server": "^1.10.1",
+    "yargs": "^3.16.1"
   },
   "dependencies": {
-    "babel-runtime": "^5.1.10",
-    "lodash": "^3.5.0",
-    "classnames": "^2.0.0"
+    "babel-runtime": "^5.8.19",
+    "lodash": "^3.10.0",
+    "classnames": "^2.1.3"
   }
 }

From aa685bd444c1f6ba33a1be442a6a9eead776c950 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 31 Jul 2015 20:58:58 +0300
Subject: [PATCH 106/128] Add missing Grid tests

---
 test/GridSpec.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 test/GridSpec.js

diff --git a/test/GridSpec.js b/test/GridSpec.js
new file mode 100644
index 0000000000..294800f3af
--- /dev/null
+++ b/test/GridSpec.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Grid from '../src/Grid';
+
+describe('Grid', function () {
+  it('uses "div" by default', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Grid />
+    );
+
+    assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+  });
+
+  it('has "container" class by default', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Grid />
+    );
+    assert.equal(React.findDOMNode(instance).className, 'container');
+  });
+
+  it('turns grid into "full-width" layout via "fluid" property set', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Grid fluid />
+    );
+    assert.equal(React.findDOMNode(instance).className, 'container-fluid');
+  });
+
+  it('should merge additional classes passed in', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Grid className="whatever" fluid />
+    );
+    assert.ok(React.findDOMNode(instance).className.match(/\bwhatever\b/));
+    assert.ok(React.findDOMNode(instance).className.match(/\bcontainer-fluid\b/));
+  });
+
+  it('allows custom elements instead of "div"', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Grid componentClass='section' />
+    );
+
+    assert.equal(React.findDOMNode(instance).nodeName, 'SECTION');
+  });
+});

From 2db54cd123cf1e6dcd7f1d6bc6e339860cf129be Mon Sep 17 00:00:00 2001
From: Jimmy Jia <jjia@4catalyzer.com>
Date: Fri, 31 Jul 2015 14:09:54 -0400
Subject: [PATCH 107/128] Release v0.24.3

---
 CHANGELOG.md | 17 +++++++++++++++++
 package.json |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef70e0fa8f..1247cfc050 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+v0.24.3 - Fri, 31 Jul 2015 18:09:54 GMT
+---------------------------------------
+
+- [02f8966](../../commit/02f8966) [changed] Update dependencies
+- [bae8ba9](../../commit/bae8ba9) [fixed] Carousel checks if it is mounted before setting state
+- [fd8d4d2](../../commit/fd8d4d2) [fixed] regression when clicking "static" modal backdrops
+- [0f46a97](../../commit/0f46a97) [added] Allow custom Modal dialog components
+- [a4ce7e1](../../commit/a4ce7e1) [fixed] added finalisation for the Modal when it was unbound from the tree
+- [d89d5f3](../../commit/d89d5f3) [fixed] Modal error when backdrop is `false`
+- [f410904](../../commit/f410904) [added] 'xs, sm, md, lg' values for 'bsSize'
+- [2558f32](../../commit/2558f32) [fixed] TabbedArea panes rendering with animation
+- [90aece6](../../commit/90aece6) [changed] Simplify 'styleMaps.STYLES' to be of Array type
+- [860d168](../../commit/860d168) [fixed] allow totally custom styles via 'bsStyle'
+- [74da76a](../../commit/74da76a) [fixed] Prevent click on PageItem if disabled
+
+
+
 v0.24.2 - Sat, 25 Jul 2015 00:47:07 GMT
 ---------------------------------------
 
diff --git a/package.json b/package.json
index af8c2e8357..81a7361d4b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From d11c021c2a919313c772fe62b16d517d18094ed7 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Fri, 31 Jul 2015 13:41:05 -0600
Subject: [PATCH 108/128] Grammar cleanup, and add additional prerelease cli
 example

---
 MAINTAINING.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/MAINTAINING.md b/MAINTAINING.md
index 402e8379ae..ccb0d40eb6 100644
--- a/MAINTAINING.md
+++ b/MAINTAINING.md
@@ -71,7 +71,7 @@ publish` BY ITSELF__. The release script will do that. We want to prevent issues
 like [#325](https://github.com/react-bootstrap/react-bootstrap/issues/325) and
 [#218](https://github.com/react-bootstrap/react-bootstrap/issues/218) from ever
 happening again. In order to run the release script you will need permission to
-publish to the package to npm. Those with this permission are in the [publishers
+publish the package to npm. Those with this permission are in the [publishers
 team](https://github.com/orgs/react-bootstrap/teams/publishers)
 
 *Note: The publishers team does exist. If you see 404 that means you just have no permissions to publish.*
@@ -82,7 +82,8 @@ Example usages of the release script:
 $ ./tools/release patch
 $ ./tools/release minor
 $ ./tools/release major
-$ ./tools/release minor --preid beta
+$ ./tools/release minor --preid beta   Use both bump and preid for first prerelease
+$ ./tools/release --preid beta         For follow on prereleases of the next version just use this
 ```
 
 Note that the above commands will bump the [semver](http://semver.org) version

From c60dc038a402abf297fd83d5016554b2840d8fd1 Mon Sep 17 00:00:00 2001
From: August Toman-Yih <atomanyih@pivotal.io>
Date: Mon, 3 Aug 2015 11:53:00 -0700
Subject: [PATCH 109/128] [fixed] only add aria-expanded to Collapse when an
 ARIA role is present

Also remove redundant aria-expanded from Panel collapsible body

Signed-off-by: Kenny Wang <kwang@pivotal.io>
---
 src/Collapse.js      |  9 +++++++--
 src/Panel.js         |  3 +--
 test/CollapseSpec.js | 20 ++++++++++++++++++++
 test/PanelSpec.js    |  4 ----
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 2a632f55e9..ab8e4b652f 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -48,7 +48,7 @@ class Collapse extends React.Component {
       <Transition
         ref='transition'
         {...this.props}
-        aria-expanded={this.props.in}
+        aria-expanded={this.props.role ? this.props.in : null}
         className={this._dimension() === 'width' ? 'width' : ''}
         exitedClassName='collapse'
         exitingClassName='collapsing'
@@ -184,7 +184,12 @@ Collapse.propTypes = {
    * should animate in its specified dimension. Called with the current
    * dimension prop value and the DOM node.
    */
-  getDimensionValue: React.PropTypes.func
+  getDimensionValue: React.PropTypes.func,
+
+  /**
+   * ARIA role of collapsible element
+   */
+  role: React.PropTypes.string
 };
 
 Collapse.defaultProps = {
diff --git a/src/Panel.js b/src/Panel.js
index 7499aa8254..2e597fc509 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -79,8 +79,7 @@ const Panel = React.createClass({
         <div
           className={collapseClass}
           id={this.props.id}
-          ref='panel'
-          aria-expanded={this.isExpanded()}>
+          ref='panel'>
           {this.renderBody()}
 
         </div>
diff --git a/test/CollapseSpec.js b/test/CollapseSpec.js
index 0ac893fcf0..8b7f71509c 100644
--- a/test/CollapseSpec.js
+++ b/test/CollapseSpec.js
@@ -213,4 +213,24 @@ describe('Collapse', function () {
       assert.equal(instance.collapse._dimension(), 'whatevs');
     });
   });
+
+  describe('with a role', function() {
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component role="note">Panel content</Component>
+      );
+    });
+
+    it('sets aria-expanded true when expanded', function() {
+      let node = React.findDOMNode(instance);
+      instance.setProps({ in: true});
+      assert.equal(node.getAttribute('aria-expanded'), 'true');
+    });
+
+    it('sets aria-expanded false when collapsed', function() {
+      let node = React.findDOMNode(instance);
+      instance.setProps({ in: false});
+      assert.equal(node.getAttribute('aria-expanded'), 'false');
+    });
+  });
 });
diff --git a/test/PanelSpec.js b/test/PanelSpec.js
index aba23266d0..0c9cfc09f1 100644
--- a/test/PanelSpec.js
+++ b/test/PanelSpec.js
@@ -191,9 +191,7 @@ describe('Panel', function () {
       let instance = ReactTestUtils.renderIntoDocument(
         <Panel collapsible={true} expanded={true} header="Heading">Panel content</Panel>
       );
-      let collapse = React.findDOMNode(instance).querySelector('.panel-collapse');
       let anchor = React.findDOMNode(instance).querySelector('.panel-title a');
-      assert.equal(collapse.getAttribute('aria-expanded'), 'true');
       assert.equal(anchor.getAttribute('aria-expanded'), 'true');
     });
 
@@ -201,9 +199,7 @@ describe('Panel', function () {
       let instance = ReactTestUtils.renderIntoDocument(
         <Panel collapsible={true} expanded={false} header="Heading">Panel content</Panel>
       );
-      let collapse = React.findDOMNode(instance).querySelector('.panel-collapse');
       let anchor = React.findDOMNode(instance).querySelector('.panel-title a');
-      assert.equal(collapse.getAttribute('aria-expanded'), 'false');
       assert.equal(anchor.getAttribute('aria-expanded'), 'false');
     });
 

From 47bd7f679e87ae507218fb3aaaba46d648378305 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 4 Aug 2015 21:39:57 +0300
Subject: [PATCH 110/128] [fixed] disabled pagination buttons should not fire
 'onSelect'

---
 src/PaginationButton.js |  4 ++++
 test/PaginationSpec.js  | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/PaginationButton.js b/src/PaginationButton.js
index df1f2054f2..917ad79fdc 100644
--- a/src/PaginationButton.js
+++ b/src/PaginationButton.js
@@ -30,6 +30,10 @@ const PaginationButton = React.createClass({
   },
 
   handleClick(event) {
+    if (this.props.disabled) {
+      return;
+    }
+
     if (this.props.onSelect) {
       let selectedEvent = createSelectedEvent(this.props.eventKey);
       this.props.onSelect(event, selectedEvent);
diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js
index 9666a54cc5..1dcf72b873 100644
--- a/test/PaginationSpec.js
+++ b/test/PaginationSpec.js
@@ -175,4 +175,33 @@ describe('Pagination', function () {
       ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[2]
     );
   });
+
+  it('should not fire "onSelect" event on disabled buttons', function () {
+    function onSelect() {
+      throw Error('this event should not happen');
+    }
+
+    const instance = ReactTestUtils.renderIntoDocument(
+      <Pagination
+        onSelect={onSelect}
+        last
+        next
+        ellipsis
+        maxButtons={1}
+        activePage={1}
+        items={0} />
+    );
+    const liElements = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+
+    // buttons are disabled
+    assert.include(React.findDOMNode(liElements[0]).className, 'disabled');
+    assert.include(React.findDOMNode(liElements[1]).className, 'disabled');
+
+    const pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
+    const nextButton = pageButtons[0];
+    const lastButton = pageButtons[1];
+
+    ReactTestUtils.Simulate.click( nextButton );
+    ReactTestUtils.Simulate.click( lastButton );
+  });
 });

From 2ecac68f01f3d9b14a01572dec2c93e89f124ff8 Mon Sep 17 00:00:00 2001
From: Arno Fortelny <arno.fortelny@gmail.com>
Date: Tue, 4 Aug 2015 19:36:48 -0400
Subject: [PATCH 111/128] [fixed] Modal uses provided className again

---
 src/Modal.js      |  2 +-
 test/ModalSpec.js | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Modal.js b/src/Modal.js
index ed4db06466..7241f39002 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -163,7 +163,7 @@ const Modal = React.createClass({
     let modal = (
       <Dialog {...props}
         ref={this._setDialogRef}
-        className={classNames({ in: show && !animation })}
+        className={classNames(this.props.className, { in: show && !animation })}
         onClick={backdrop === true ? this.handleBackdropClick : null}
       >
         { this.renderContent() }
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 99affa0485..9d5ceb0178 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -130,6 +130,19 @@ describe('Modal', function () {
     ReactTestUtils.Simulate.click(button);
   });
 
+  it('Should pass className to the dialog', function () {
+    let noOp = function () {};
+    let instance = render(
+      <Modal show className='mymodal' onHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    let dialog = React.findDOMNode(instance.refs.dialog);
+
+    assert.ok(dialog.className.match(/\bmymodal\b/));
+  });
+
   it('Should use bsClass on the dialog', function () {
     let noOp = function () {};
     let instance = render(

From 0771f7ead95ff4e2a811f146ca1723ca1db3dec9 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Wed, 5 Aug 2015 11:35:32 +0300
Subject: [PATCH 112/128] Update 'eslint-plugin-babel' dev dependency

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

diff --git a/package.json b/package.json
index 81a7361d4b..505705a240 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "css-loader": "^0.15.6",
     "es5-shim": "^4.1.10",
     "eslint": "1.0.0",
-    "eslint-plugin-babel": "^1.2.0",
+    "eslint-plugin-babel": "^2.0.0",
     "eslint-plugin-lodash": "^0.1.3",
     "eslint-plugin-mocha": "^0.4.0",
     "eslint-plugin-react": "^3.1.0",

From 60f0253bd20273865f6290fabaf8fe7adb2e957b Mon Sep 17 00:00:00 2001
From: Aaron Lampros <alampros@gmail.com>
Date: Wed, 5 Aug 2015 08:58:36 -0400
Subject: [PATCH 113/128] Remove bower lib reference from docs

Reflects changes in #815.
---
 docs/src/GettingStartedPage.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
index 883dff20e9..5fdcd7f112 100644
--- a/docs/src/GettingStartedPage.js
+++ b/docs/src/GettingStartedPage.js
@@ -65,9 +65,7 @@ $ bower install react-bootstrap`
                     <CodeExample
                       mode="javascript"
                       codeText={
-`define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
-// or
-define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });`
+`define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });`
                       }
                     />
                   </div>

From 95ee7a17b2b38dde6c6cf676ccb31e0672f26c29 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Wed, 5 Aug 2015 07:53:54 -0600
Subject: [PATCH 114/128] Remove reference to factories from documentation

---
 docs/src/GettingStartedPage.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
index 5fdcd7f112..8fd2a3a50b 100644
--- a/docs/src/GettingStartedPage.js
+++ b/docs/src/GettingStartedPage.js
@@ -85,18 +85,6 @@ $ bower install react-bootstrap`
                     />
                   </div>
 
-                  <h3>Without JSX</h3>
-                  <p>If you do not use JSX and just call components as functions, you must explicitly <a href="https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html#deprecated-auto-generated-factories">create a factory before calling it</a>. React-bootstrap provides factories for you in <code>lib/factories</code>:</p>
-                  <div className="highlight">
-                    <CodeExample
-                      mode="javascript"
-                      codeText={
-`var Alert = require('react-bootstrap/lib/factories').Alert;
-// or
-var Alert = require('react-bootstrap/lib/factories/Alert');`
-                      }
-                    />
-                  </div>
                 </div>
                 <div className="bs-docs-section">
                   <h2 id="browser-support" className="page-header">Browser support</h2>

From e2759072219c326bc585b65dc3d4662de0cf959e Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Thu, 6 Aug 2015 13:16:05 +0300
Subject: [PATCH 115/128] Enable back old 'eslint' defaults

---
 .eslintrc                   | 1 +
 docs/build.js               | 2 ++
 docs/server.js              | 2 ++
 docs/src/ReactPlayground.js | 6 +++---
 package.json                | 1 +
 test/.eslintrc              | 1 +
 tools/.eslintrc             | 5 +++++
 7 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 tools/.eslintrc

diff --git a/.eslintrc b/.eslintrc
index 1326e6f2f4..571bb3202e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +1,5 @@
 {
+  "extends": ["defaults"],
   "env": {
     "browser": true,
     "node": true
diff --git a/docs/build.js b/docs/build.js
index 98a01c94e1..a50c99c476 100644
--- a/docs/build.js
+++ b/docs/build.js
@@ -1,3 +1,5 @@
+/* eslint no-console: 0 */
+
 import React from 'react';
 import path from 'path';
 import Router from 'react-router';
diff --git a/docs/server.js b/docs/server.js
index 66b49144c8..ef032a28f5 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -1,3 +1,5 @@
+/* eslint no-console: 0 */
+
 import 'colors';
 import React from 'react';
 import express from 'express';
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 1b9901c0b1..6020303187 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -265,7 +265,7 @@ const ReactPlayground = React.createClass({
     try {
       React.unmountComponentAtNode(mountNode);
     } catch (e) {
-      console.error(e);
+      console.error(e); // eslint-disable-line no-console
     }
 
     return mountNode;
@@ -283,9 +283,9 @@ const ReactPlayground = React.createClass({
       /* eslint-enable */
     } catch (err) {
       if (compiledCode !== null) {
-        console.log(err, compiledCode);
+        console.log(err, compiledCode); // eslint-disable-line no-console
       } else {
-        console.log(err);
+        console.log(err); // eslint-disable-line no-console
       }
 
       this.updateTimeout(
diff --git a/package.json b/package.json
index 505705a240..3ed063bd74 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "css-loader": "^0.15.6",
     "es5-shim": "^4.1.10",
     "eslint": "1.0.0",
+    "eslint-config-defaults": "^3.1.0",
     "eslint-plugin-babel": "^2.0.0",
     "eslint-plugin-lodash": "^0.1.3",
     "eslint-plugin-mocha": "^0.4.0",
diff --git a/test/.eslintrc b/test/.eslintrc
index 8a24fb457f..87e4cf0ee3 100644
--- a/test/.eslintrc
+++ b/test/.eslintrc
@@ -11,6 +11,7 @@
     "mocha"
   ],
   "rules": {
+    "no-console": 0,
     "no-script-url": 0,
     "no-unused-expressions": 0,
     "react/jsx-boolean-value": 0,
diff --git a/tools/.eslintrc b/tools/.eslintrc
new file mode 100644
index 0000000000..7753f32e77
--- /dev/null
+++ b/tools/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": 0
+  }
+}

From 9dd6f53aa0c78ae80c174005b0778d3a202e1ef3 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 7 Aug 2015 13:10:16 +0300
Subject: [PATCH 116/128] Update dev dependencies

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 505705a240..608749b800 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "express": "^4.13.1",
     "extract-text-webpack-plugin": "^0.8.2",
     "file-loader": "^0.8.4",
-    "fs-extra": "^0.22.1",
+    "fs-extra": "^0.23.0",
     "fs-promise": "^0.3.1",
     "glob": "^5.0.14",
     "http-proxy": "^1.11.1",
@@ -73,7 +73,7 @@
     "karma": "~0.13.3",
     "karma-chrome-launcher": "~0.2.0",
     "karma-cli": "0.1.0",
-    "karma-coverage": "^0.4.2",
+    "karma-coverage": "^0.5.0",
     "karma-coveralls": "^1.1.2",
     "karma-firefox-launcher": "~0.1.6",
     "karma-mocha": "~0.2.0",

From 6e4671c6ca70381e836b4c4da4bef9304c89df98 Mon Sep 17 00:00:00 2001
From: Peter Dave Hello <PeterDaveHello@users.noreply.github.com>
Date: Fri, 7 Aug 2015 22:19:00 +0800
Subject: [PATCH 117/128] Should use https to load resources here.

---
 docs/src/PageFooter.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/PageFooter.js b/docs/src/PageFooter.js
index e894fcbc64..0ea342b02b 100644
--- a/docs/src/PageFooter.js
+++ b/docs/src/PageFooter.js
@@ -16,21 +16,21 @@ const PageHeader = React.createClass({
               <ul className='bs-docs-social-buttons'>
                 <li>
                   <iframe className='github-btn'
-                    src='http://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=watch&count=true'
+                    src='https://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=watch&count=true'
                     width={95}
                     height={20}
                     title='Star on GitHub' />
                 </li>
                 <li>
                   <iframe className='github-btn'
-                    src='http://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=fork&count=true'
+                    src='https://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=fork&count=true'
                     width={92}
                     height={20}
                     title='Fork on GitHub' />
                 </li>
                 <li>
                   <iframe
-                    src="http://platform.twitter.com/widgets/follow_button.html?screen_name=react_bootstrap&show_screen_name=true"
+                    src="https://platform.twitter.com/widgets/follow_button.html?screen_name=react_bootstrap&show_screen_name=true"
                     width={230}
                     height={20}
                     allowTransparency="true"

From 3e9bf1c831d4987c02a712c809e3b4d173096b2c Mon Sep 17 00:00:00 2001
From: Harry Hedger <hedgerh@gmail.com>
Date: Fri, 7 Aug 2015 21:48:37 -0400
Subject: [PATCH 118/128] Modal & Portal code style cleanup to match rest of
 project.

---
 src/Modal.js       | 68 ++++++++++++++++++++++++----------------------
 src/ModalBody.js   |  6 ++--
 src/ModalDialog.js |  9 ++----
 src/ModalFooter.js |  8 +++---
 src/ModalHeader.js | 13 ++++-----
 src/ModalTitle.js  |  7 +++--
 src/Portal.js      |  1 -
 7 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index 7241f39002..48de68689f 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -14,7 +14,6 @@ import Header from './ModalHeader';
 import Title from './ModalTitle';
 import Footer from './ModalFooter';
 
-
 /**
  * Gets the correct clientHeight of the modal container
  * when the body/window/document you need to use the docElement clientHeight
@@ -30,12 +29,11 @@ function containerClientHeight(container, context) {
       : container.clientHeight;
 }
 
-function getContainer(context){
+function getContainer(context) {
   return (context.props.container && React.findDOMNode(context.props.container)) ||
     domUtils.ownerDocument(context).body;
 }
 
-
 let currentFocusListener;
 
 /**
@@ -52,7 +50,7 @@ function onFocus(context, handler) {
   let useFocusin = !doc.addEventListener;
   let remove;
 
-  if ( currentFocusListener ) {
+  if (currentFocusListener) {
     currentFocusListener.remove();
   }
 
@@ -71,8 +69,8 @@ function onFocus(context, handler) {
 
 let scrollbarSize;
 
-function getScrollbarSize(){
-  if ( scrollbarSize !== undefined ){
+function getScrollbarSize() {
+  if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
 
@@ -101,6 +99,7 @@ const Modal = React.createClass({
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
      */
     backdrop: React.PropTypes.oneOf(['static', true, false]),
+
     /**
      * Close the modal when escape key is pressed
      */
@@ -131,7 +130,7 @@ const Modal = React.createClass({
     enforceFocus: React.PropTypes.bool
   },
 
-  getDefaultProps(){
+  getDefaultProps() {
     return {
       bsClass: 'modal',
       dialogComponent: ModalDialog,
@@ -144,8 +143,10 @@ const Modal = React.createClass({
     };
   },
 
-  getInitialState(){
-    return {exited: !this.props.show};
+  getInitialState() {
+    return {
+      exited: !this.props.show
+    };
   },
 
   render() {
@@ -161,16 +162,16 @@ const Modal = React.createClass({
     }
 
     let modal = (
-      <Dialog {...props}
+      <Dialog
+        {...props}
         ref={this._setDialogRef}
         className={classNames(this.props.className, { in: show && !animation })}
-        onClick={backdrop === true ? this.handleBackdropClick : null}
-      >
+        onClick={backdrop === true ? this.handleBackdropClick : null}>
         { this.renderContent() }
       </Dialog>
     );
 
-    if ( animation ) {
+    if (animation) {
       modal = (
         <Fade
           transitionAppear
@@ -182,8 +183,7 @@ const Modal = React.createClass({
           onExited={this.handleHidden}
           onEnter={onEnter}
           onEntering={onEntering}
-          onEntered={onEntered}
-        >
+          onEntered={onEntered}>
           { modal }
         </Fade>
       );
@@ -221,14 +221,15 @@ const Modal = React.createClass({
       this.handleBackdropClick : null;
 
     let backdrop = (
-      <div ref="backdrop"
-       className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
-       onClick={onClick}
-      />
+      <div
+        ref="backdrop"
+        className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
+        onClick={onClick}/>
     );
 
     return (
-      <div ref='modal'>
+      <div
+        ref='modal'>
         { animation
             ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
             : backdrop
@@ -238,7 +239,7 @@ const Modal = React.createClass({
     );
   },
 
-  _setDialogRef(ref){
+  _setDialogRef(ref) {
     // issue #1074
     // due to: https://github.com/facebook/react/blob/v0.13.3/src/core/ReactCompositeComponent.js#L842
     //
@@ -266,14 +267,14 @@ const Modal = React.createClass({
     }
   },
 
-  componentWillUpdate(nextProps){
+  componentWillUpdate(nextProps) {
     if (nextProps.show) {
       this.checkForFocus();
     }
   },
 
   componentDidMount() {
-    if ( this.props.show ){
+    if (this.props.show) {
       this.onShow();
     }
   },
@@ -281,11 +282,10 @@ const Modal = React.createClass({
   componentDidUpdate(prevProps) {
     let { animation } = this.props;
 
-    if ( prevProps.show && !this.props.show && !animation) {
+    if (prevProps.show && !this.props.show && !animation) {
       //otherwise handleHidden will call this.
       this.onHide();
-    }
-    else if ( !prevProps.show && this.props.show ) {
+    } else if (!prevProps.show && this.props.show) {
       this.onShow();
     }
   },
@@ -375,8 +375,8 @@ const Modal = React.createClass({
     this.setState(this._getStyles());
   },
 
-  checkForFocus(){
-    if ( domUtils.canUseDom ) {
+  checkForFocus() {
+    if (domUtils.canUseDom) {
       try {
         this.lastFocus = document.activeElement;
       }
@@ -384,7 +384,7 @@ const Modal = React.createClass({
     }
   },
 
-  focusModalContent () {
+  focusModalContent() {
     let modalContent = React.findDOMNode(this.refs.dialog);
     let current = domUtils.activeElement(this);
     let focusInModal = current && domUtils.contains(modalContent, current);
@@ -395,7 +395,7 @@ const Modal = React.createClass({
     }
   },
 
-  restoreLastFocus () {
+  restoreLastFocus() {
     if (this.lastFocus && this.lastFocus.focus) {
       this.lastFocus.focus();
       this.lastFocus = null;
@@ -403,14 +403,14 @@ const Modal = React.createClass({
   },
 
   enforceFocus() {
-    if ( !this.isMounted() ) {
+    if (!this.isMounted()) {
       return;
     }
 
     let active = domUtils.activeElement(this);
     let modal = React.findDOMNode(this.refs.dialog);
 
-    if (modal && modal !== active && !domUtils.contains(modal, active)){
+    if (modal && modal !== active && !domUtils.contains(modal, active)) {
       modal.focus();
     }
   },
@@ -424,7 +424,9 @@ const Modal = React.createClass({
   },
 
   _getStyles() {
-    if ( !domUtils.canUseDom ) { return {}; }
+    if (!domUtils.canUseDom) {
+      return {};
+    }
 
     let node = React.findDOMNode(this.refs.modal);
     let scrollHt = node.scrollHeight;
diff --git a/src/ModalBody.js b/src/ModalBody.js
index 40c667c001..56da974930 100644
--- a/src/ModalBody.js
+++ b/src/ModalBody.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 class ModalBody extends React.Component {
   render() {
     return (
-      <div {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
+      <div
+        {...this.props}
+        className={classNames(this.props.className, this.props.modalClassName)}>
         {this.props.children}
       </div>
     );
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index e23ba9954f..9761c57837 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -4,11 +4,9 @@ import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const ModalDialog = React.createClass({
-
-  mixins: [ BootstrapMixin ],
+  mixins: [BootstrapMixin],
 
   propTypes: {
-
     /**
      * A Callback fired when the header closeButton or non-static backdrop is clicked.
      * @type {function}
@@ -31,7 +29,7 @@ const ModalDialog = React.createClass({
   },
 
   render() {
-    let modalStyle = { display: 'block'};
+    let modalStyle = { display: 'block' };
     let bsClass = this.props.bsClass;
     let dialogClasses = this.getBsClassSet();
 
@@ -45,8 +43,7 @@ const ModalDialog = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classNames(this.props.className, bsClass)}
-      >
+        className={classNames(this.props.className, bsClass)}>
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
           <div className={`${bsClass}-content`} role='document'>
             { this.props.children }
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
index 39f8759fe5..feee8d8bf5 100644
--- a/src/ModalFooter.js
+++ b/src/ModalFooter.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import classnames from 'classnames';
-
+import classNames from 'classnames';
 
 class ModalFooter extends React.Component {
-
   render() {
     return (
-      <div {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
+      <div
+        {...this.props}
+        className={classNames(this.props.className, this.props.modalClassName)}>
         {this.props.children}
       </div>
     );
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 8a54cce91a..fc23d87e2c 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -1,20 +1,16 @@
-
 import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 class ModalHeader extends React.Component {
-
   render() {
     return (
       <div
         {...this.props}
-        className={classnames(this.props.className, this.props.modalClassName)}
-      >
+        className={classNames(this.props.className, this.props.modalClassName)}>
         { this.props.closeButton &&
           <button
             className='close'
-            onClick={this.props.onHide}
-          >
+            onClick={this.props.onHide}>
             <span aria-hidden="true">
               &times;
             </span>
@@ -35,14 +31,17 @@ ModalHeader.propTypes = {
    * It is used for Assistive Technology when the label text is not visible on screen.
    */
   'aria-label': React.PropTypes.string,
+
   /**
    * A css class applied to the Component
    */
   modalClassName: React.PropTypes.string,
+
   /**
    * Specify whether the Component should contain a close button
    */
   closeButton: React.PropTypes.bool,
+
   /**
    * A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically
    * be propagated up to the parent Modal `onHide`.
diff --git a/src/ModalTitle.js b/src/ModalTitle.js
index 83d45d9833..464b6c3fc3 100644
--- a/src/ModalTitle.js
+++ b/src/ModalTitle.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 class ModalTitle extends React.Component {
-
   render() {
     return (
-      <h4 {...this.props} className={classnames(this.props.className, this.props.modalClassName)}>
+      <h4
+        {...this.props}
+        className={classNames(this.props.className, this.props.modalClassName)}>
         { this.props.children }
       </h4>
     );
diff --git a/src/Portal.js b/src/Portal.js
index 1de5fd6da7..7e87fcf08f 100644
--- a/src/Portal.js
+++ b/src/Portal.js
@@ -43,7 +43,6 @@ let Portal = React.createClass({
   },
 
   _renderOverlay() {
-
     let overlay = !this.props.children
       ? null
       : React.Children.only(this.props.children);

From 83cdaa3ffeb8453d0c3c4b721335cf0442986970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Lign=C3=A9?= <andre.ligne@gmail.com>
Date: Mon, 10 Aug 2015 17:04:01 +0200
Subject: [PATCH 119/128] [added] formControlFeedback prop to Glyphicon

Less typing when passing a `Glyphicon` as
feedbackIcon into an `Input`.
---
 src/Glyphicon.js      |  7 +++++--
 test/GlyphiconSpec.js | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/Glyphicon.js b/src/Glyphicon.js
index e406feaa31..9f5a2d69ad 100644
--- a/src/Glyphicon.js
+++ b/src/Glyphicon.js
@@ -7,12 +7,14 @@ const Glyphicon = React.createClass({
   mixins: [BootstrapMixin],
 
   propTypes: {
-    glyph: React.PropTypes.oneOf(styleMaps.GLYPHS).isRequired
+    glyph: React.PropTypes.oneOf(styleMaps.GLYPHS).isRequired,
+    formControlFeedback: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
-      bsClass: 'glyphicon'
+      bsClass: 'glyphicon',
+      formControlFeedback: false
     };
   },
 
@@ -20,6 +22,7 @@ const Glyphicon = React.createClass({
     let classes = this.getBsClassSet();
 
     classes['glyphicon-' + this.props.glyph] = true;
+    classes['form-control-feedback'] = this.props.formControlFeedback;
 
     return (
       <span {...this.props} className={classNames(this.props.className, classes)}>
diff --git a/test/GlyphiconSpec.js b/test/GlyphiconSpec.js
index fec68f5c1d..49d8338436 100644
--- a/test/GlyphiconSpec.js
+++ b/test/GlyphiconSpec.js
@@ -10,4 +10,22 @@ describe('Glyphicon', function () {
     assert.ok(React.findDOMNode(instance).className.match(/\bglyphicon\b/));
     assert.ok(React.findDOMNode(instance).className.match(/\bglyphicon-star\b/));
   });
+
+  it('renders without the .form-control-feedback class', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Glyphicon glyph='star' />
+      );
+
+      assert.notOk(React.findDOMNode(instance).className.match(/\bform-control-feedback\b/));
+  });
+
+  context('when setting the formControlFeedback prop', function () {
+    it('should have the .form-control-feedback class set', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Glyphicon formControlFeedback glyph='star' />
+      );
+
+      assert.ok(React.findDOMNode(instance).className.match(/\bform-control-feedback\b/));
+    });
+  });
 });

From b688014c0857112b03273f0f73ef3545099c537a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Ligne=CC=81?= <andre.ligne@gmail.com>
Date: Wed, 5 Aug 2015 19:00:55 +0200
Subject: [PATCH 120/128] [added] custom feedback icons for Input

- Added a new prop on Input named feedbackIcon
- Added tests for ensuring Glyphicons as default
- Added tests for rendering the feedbackIcon

This allows for passing custom icons that may be
used instead of the default Glyphicons when an
Input is having feedback.
---
 src/InputBase.js  | 25 +++++++++++++---------
 test/InputSpec.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/src/InputBase.js b/src/InputBase.js
index c552a7a6ab..6293c37d51 100644
--- a/src/InputBase.js
+++ b/src/InputBase.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import FormGroup from './FormGroup';
+import Glyphicon from './Glyphicon';
 
 class InputBase extends React.Component {
   getInputDOMNode() {
@@ -91,17 +92,20 @@ class InputBase extends React.Component {
   }
 
   renderIcon() {
-    let classes = {
-      'glyphicon': true,
-      'form-control-feedback': true,
-      'glyphicon-ok': this.props.bsStyle === 'success',
-      'glyphicon-warning-sign': this.props.bsStyle === 'warning',
-      'glyphicon-remove': this.props.bsStyle === 'error'
-    };
+    if (this.props.hasFeedback) {
+      if (this.props.feedbackIcon) {
+        return React.cloneElement(this.props.feedbackIcon, { formControlFeedback: true });
+      }
 
-    return this.props.hasFeedback ? (
-      <span className={classNames(classes)} key="icon" />
-    ) : null;
+      switch (this.props.bsStyle) {
+        case 'success': return <Glyphicon formControlFeedback glyph="ok" key="icon" />;
+        case 'warning': return <Glyphicon formControlFeedback glyph="warning-sign" key="icon" />;
+        case 'error': return <Glyphicon formControlFeedback glyph="remove" key="icon" />;
+        default: return <span className="form-control-feedback" key="icon" />;
+      }
+    } else {
+      return null;
+    }
   }
 
   renderHelp() {
@@ -214,6 +218,7 @@ InputBase.propTypes = {
   bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
   bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']),
   hasFeedback: React.PropTypes.bool,
+  feedbackIcon: React.PropTypes.node,
   id: React.PropTypes.string,
   groupClassName: React.PropTypes.string,
   wrapperClassName: React.PropTypes.string,
diff --git a/test/InputSpec.js b/test/InputSpec.js
index f4bf29c622..340e50df44 100644
--- a/test/InputSpec.js
+++ b/test/InputSpec.js
@@ -4,6 +4,7 @@ import Input from '../src/Input';
 import Button from '../src/Button';
 import DropdownButton from '../src/DropdownButton';
 import MenuItem from '../src/MenuItem';
+import Glyphicon from '../src/Glyphicon';
 import {shouldWarn} from './helpers';
 
 describe('Input', function () {
@@ -279,4 +280,56 @@ describe('Input', function () {
     let node = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input'));
     assert.isNotNull(node.getAttribute('disabled'));
   });
+
+  context('when Input listens to feedback', function () {
+    it('renders success feedback as Glyphicon', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Input hasFeedback={true} bsStyle="success" />
+      );
+
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-ok'));
+    });
+
+    it('renders warning feedback as Glyphicon', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Input hasFeedback={true} bsStyle="warning" />
+      );
+
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-warning-sign'));
+    });
+
+    it('renders error feedback as Glyphicon', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Input hasFeedback={true} bsStyle="error" />
+      );
+
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-remove'));
+    });
+
+    context('when using feedbackIcon', function () {
+      it('uses the feedbackIcon', function () {
+        let customIcon = <Glyphicon glyph="star" />;
+
+        let instance = ReactTestUtils.renderIntoDocument(
+            <Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
+        );
+
+        assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+        assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-star'));
+      });
+
+      it('adds the .form-control-feedback class for Glyphicons', function () {
+        let customIcon = <Glyphicon glyph="star" />;
+
+        let instance = ReactTestUtils.renderIntoDocument(
+            <Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
+        );
+
+        assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback'));
+      });
+    });
+  });
 });

From 36b29e4f7885bd0ee0ebf323ab55173a2ef92669 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Mon, 10 Aug 2015 15:12:45 -0400
Subject: [PATCH 121/128] Only issue each deprecation warning once

---
 src/CollapsibleMixin.js              |  7 +------
 src/FadeMixin.js                     |  7 +------
 src/utils/deprecationWarning.js      |  8 ++++++++
 test/utils/deprecationWarningSpec.js | 16 ++++++++++++++++
 4 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 test/utils/deprecationWarningSpec.js

diff --git a/src/CollapsibleMixin.js b/src/CollapsibleMixin.js
index c1abcbaada..65d0c720e7 100644
--- a/src/CollapsibleMixin.js
+++ b/src/CollapsibleMixin.js
@@ -2,8 +2,6 @@ import React from 'react';
 import TransitionEvents from './utils/TransitionEvents';
 import deprecationWarning from './utils/deprecationWarning';
 
-let warned = false;
-
 const CollapsibleMixin = {
 
   propTypes: {
@@ -25,10 +23,7 @@ const CollapsibleMixin = {
   },
 
   componentWillMount(){
-    if ( !warned ){
-      deprecationWarning('CollapsibleMixin', 'Collapse Component');
-      warned = true;
-    }
+    deprecationWarning('CollapsibleMixin', 'Collapse Component');
   },
 
   componentWillUpdate(nextProps, nextState){
diff --git a/src/FadeMixin.js b/src/FadeMixin.js
index b4dfe666f2..c96e024a3a 100644
--- a/src/FadeMixin.js
+++ b/src/FadeMixin.js
@@ -17,14 +17,9 @@ function getElementsAndSelf (root, classes){
   return els;
 }
 
-let warned = false;
-
 export default {
   componentWillMount(){
-    if ( !warned ){
-      deprecationWarning('FadeMixin', 'Fade Component');
-      warned = true;
-    }
+    deprecationWarning('FadeMixin', 'Fade Component');
   },
 
   _fadeIn() {
diff --git a/src/utils/deprecationWarning.js b/src/utils/deprecationWarning.js
index e92b75837d..e4115967c9 100644
--- a/src/utils/deprecationWarning.js
+++ b/src/utils/deprecationWarning.js
@@ -1,6 +1,13 @@
 import warning from 'react/lib/warning';
 
+const warned = {};
+
 export default function deprecationWarning(oldname, newname, link) {
+  const warnKey = `${oldname}\n${newname}`;
+  if (warned[warnKey]) {
+    return;
+  }
+
   let message = `${oldname} is deprecated. Use ${newname} instead.`;
 
   if (link) {
@@ -8,4 +15,5 @@ export default function deprecationWarning(oldname, newname, link) {
   }
 
   warning(false, message);
+  warned[warnKey] = true;
 }
diff --git a/test/utils/deprecationWarningSpec.js b/test/utils/deprecationWarningSpec.js
new file mode 100644
index 0000000000..dcc8a704ee
--- /dev/null
+++ b/test/utils/deprecationWarningSpec.js
@@ -0,0 +1,16 @@
+import deprecationWarning from '../../src/utils/deprecationWarning';
+
+describe('deprecationWarning', function () {
+  it('warns exactly once', function () {
+    // console.warn has already been stubbed out by test setup.
+
+    deprecationWarning('foo', 'bar');
+    expect(console.warn).to.have.been.calledOnce;
+
+    deprecationWarning('foo', 'bar');
+    expect(console.warn).to.have.been.calledOnce;
+
+    // Reset the stub to avoid unhandled warnings.
+    console.warn.reset();
+  });
+});

From 4a8129c0296e0dca44cf4cfaaa6993cdb23e5fa8 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Mon, 10 Aug 2015 15:33:35 -0400
Subject: [PATCH 122/128] Release v0.24.4

---
 CHANGELOG.md | 11 +++++++++++
 package.json |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1247cfc050..734ef4d205 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+v0.24.4 - Mon, 10 Aug 2015 19:33:35 GMT
+---------------------------------------
+
+- [b688014](../../commit/b688014) [added] custom feedback icons for Input
+- [83cdaa3](../../commit/83cdaa3) [added] formControlFeedback prop to Glyphicon
+- [2ecac68](../../commit/2ecac68) [fixed] Modal uses provided className again
+- [47bd7f6](../../commit/47bd7f6) [fixed] disabled pagination buttons should not fire 'onSelect'
+- [c60dc03](../../commit/c60dc03) [fixed] only add aria-expanded to Collapse when an ARIA role is present
+
+
+
 v0.24.3 - Fri, 31 Jul 2015 18:09:54 GMT
 ---------------------------------------
 
diff --git a/package.json b/package.json
index 164c7abd0a..772f9fa368 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.24.3",
+  "version": "0.24.4",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",

From f53bcf5dda6d26c8bb9776e4a61b33896cb82d1e Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Sat, 8 Aug 2015 00:44:44 +0300
Subject: [PATCH 123/128] [fixed] 'bsSize' and 'bsStyle' properties has been
 removed from 'Glyphicon'

because they did nothing.
---
 src/Glyphicon.js |  29 ++++--
 src/styleMaps.js | 263 +----------------------------------------------
 2 files changed, 20 insertions(+), 272 deletions(-)

diff --git a/src/Glyphicon.js b/src/Glyphicon.js
index 9f5a2d69ad..44d7a531c4 100644
--- a/src/Glyphicon.js
+++ b/src/Glyphicon.js
@@ -1,13 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
-import styleMaps from './styleMaps';
 
 const Glyphicon = React.createClass({
-  mixins: [BootstrapMixin],
-
   propTypes: {
-    glyph: React.PropTypes.oneOf(styleMaps.GLYPHS).isRequired,
+    /**
+     * bootstrap className
+     * @private
+     */
+    bsClass: React.PropTypes.string,
+    /**
+     * An icon name
+     */
+    glyph: React.PropTypes.string.isRequired,
+    /**
+     * Adds 'form-control-feedback' class
+     * @private
+     */
     formControlFeedback: React.PropTypes.bool
   },
 
@@ -19,13 +27,14 @@ const Glyphicon = React.createClass({
   },
 
   render() {
-    let classes = this.getBsClassSet();
-
-    classes['glyphicon-' + this.props.glyph] = true;
-    classes['form-control-feedback'] = this.props.formControlFeedback;
+    let className = classNames(this.props.className, {
+      [this.props.bsClass]: true,
+      ['glyphicon-' + this.props.glyph]: true,
+      ['form-control-feedback']: this.props.formControlFeedback
+    });
 
     return (
-      <span {...this.props} className={classNames(this.props.className, classes)}>
+      <span {...this.props} className={className}>
         {this.props.children}
       </span>
     );
diff --git a/src/styleMaps.js b/src/styleMaps.js
index b64252732a..5d8e72cd56 100644
--- a/src/styleMaps.js
+++ b/src/styleMaps.js
@@ -45,268 +45,7 @@ const styleMaps = {
     'md': 'md',
     'sm': 'sm',
     'xs': 'xs'
-  },
-  GLYPHS: [
-    'asterisk',
-    'plus',
-    'euro',
-    'eur',
-    'minus',
-    'cloud',
-    'envelope',
-    'pencil',
-    'glass',
-    'music',
-    'search',
-    'heart',
-    'star',
-    'star-empty',
-    'user',
-    'film',
-    'th-large',
-    'th',
-    'th-list',
-    'ok',
-    'remove',
-    'zoom-in',
-    'zoom-out',
-    'off',
-    'signal',
-    'cog',
-    'trash',
-    'home',
-    'file',
-    'time',
-    'road',
-    'download-alt',
-    'download',
-    'upload',
-    'inbox',
-    'play-circle',
-    'repeat',
-    'refresh',
-    'list-alt',
-    'lock',
-    'flag',
-    'headphones',
-    'volume-off',
-    'volume-down',
-    'volume-up',
-    'qrcode',
-    'barcode',
-    'tag',
-    'tags',
-    'book',
-    'bookmark',
-    'print',
-    'camera',
-    'font',
-    'bold',
-    'italic',
-    'text-height',
-    'text-width',
-    'align-left',
-    'align-center',
-    'align-right',
-    'align-justify',
-    'list',
-    'indent-left',
-    'indent-right',
-    'facetime-video',
-    'picture',
-    'map-marker',
-    'adjust',
-    'tint',
-    'edit',
-    'share',
-    'check',
-    'move',
-    'step-backward',
-    'fast-backward',
-    'backward',
-    'play',
-    'pause',
-    'stop',
-    'forward',
-    'fast-forward',
-    'step-forward',
-    'eject',
-    'chevron-left',
-    'chevron-right',
-    'plus-sign',
-    'minus-sign',
-    'remove-sign',
-    'ok-sign',
-    'question-sign',
-    'info-sign',
-    'screenshot',
-    'remove-circle',
-    'ok-circle',
-    'ban-circle',
-    'arrow-left',
-    'arrow-right',
-    'arrow-up',
-    'arrow-down',
-    'share-alt',
-    'resize-full',
-    'resize-small',
-    'exclamation-sign',
-    'gift',
-    'leaf',
-    'fire',
-    'eye-open',
-    'eye-close',
-    'warning-sign',
-    'plane',
-    'calendar',
-    'random',
-    'comment',
-    'magnet',
-    'chevron-up',
-    'chevron-down',
-    'retweet',
-    'shopping-cart',
-    'folder-close',
-    'folder-open',
-    'resize-vertical',
-    'resize-horizontal',
-    'hdd',
-    'bullhorn',
-    'bell',
-    'certificate',
-    'thumbs-up',
-    'thumbs-down',
-    'hand-right',
-    'hand-left',
-    'hand-up',
-    'hand-down',
-    'circle-arrow-right',
-    'circle-arrow-left',
-    'circle-arrow-up',
-    'circle-arrow-down',
-    'globe',
-    'wrench',
-    'tasks',
-    'filter',
-    'briefcase',
-    'fullscreen',
-    'dashboard',
-    'paperclip',
-    'heart-empty',
-    'link',
-    'phone',
-    'pushpin',
-    'usd',
-    'gbp',
-    'sort',
-    'sort-by-alphabet',
-    'sort-by-alphabet-alt',
-    'sort-by-order',
-    'sort-by-order-alt',
-    'sort-by-attributes',
-    'sort-by-attributes-alt',
-    'unchecked',
-    'expand',
-    'collapse-down',
-    'collapse-up',
-    'log-in',
-    'flash',
-    'log-out',
-    'new-window',
-    'record',
-    'save',
-    'open',
-    'saved',
-    'import',
-    'export',
-    'send',
-    'floppy-disk',
-    'floppy-saved',
-    'floppy-remove',
-    'floppy-save',
-    'floppy-open',
-    'credit-card',
-    'transfer',
-    'cutlery',
-    'header',
-    'compressed',
-    'earphone',
-    'phone-alt',
-    'tower',
-    'stats',
-    'sd-video',
-    'hd-video',
-    'subtitles',
-    'sound-stereo',
-    'sound-dolby',
-    'sound-5-1',
-    'sound-6-1',
-    'sound-7-1',
-    'copyright-mark',
-    'registration-mark',
-    'cloud-download',
-    'cloud-upload',
-    'tree-conifer',
-    'tree-deciduous',
-    'cd',
-    'save-file',
-    'open-file',
-    'level-up',
-    'copy',
-    'paste',
-    'alert',
-    'equalizer',
-    'king',
-    'queen',
-    'pawn',
-    'bishop',
-    'knight',
-    'baby-formula',
-    'tent',
-    'blackboard',
-    'bed',
-    'apple',
-    'erase',
-    'hourglass',
-    'lamp',
-    'duplicate',
-    'piggy-bank',
-    'scissors',
-    'bitcoin',
-    'yen',
-    'ruble',
-    'scale',
-    'ice-lolly',
-    'ice-lolly-tasted',
-    'education',
-    'option-horizontal',
-    'option-vertical',
-    'menu-hamburger',
-    'modal-window',
-    'oil',
-    'grain',
-    'sunglasses',
-    'text-size',
-    'text-color',
-    'text-background',
-    'object-align-top',
-    'object-align-bottom',
-    'object-align-horizontal',
-    'object-align-left',
-    'object-align-vertical',
-    'object-align-right',
-    'triangle-right',
-    'triangle-left',
-    'triangle-bottom',
-    'triangle-top',
-    'console',
-    'superscript',
-    'subscript',
-    'menu-left',
-    'menu-right',
-    'menu-down',
-    'menu-up'
-  ]
+  }
 };
 
 export default styleMaps;

From 53a2b0030eaf17e43af610b60111979b719c85ab Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 11 Aug 2015 17:56:25 +0300
Subject: [PATCH 124/128] Clarify ES6 imports

---
 docs/src/GettingStartedPage.js | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
index 8fd2a3a50b..dfe9dc45e0 100644
--- a/docs/src/GettingStartedPage.js
+++ b/docs/src/GettingStartedPage.js
@@ -4,6 +4,7 @@ import CodeExample from './CodeExample';
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
 import PageFooter from './PageFooter';
+import Anchor from './Anchor';
 
 export default class Page extends React.Component {
   render() {
@@ -19,7 +20,7 @@ export default class Page extends React.Component {
             <div className="row">
               <div className="col-md-9" role="main">
                 <div className="bs-docs-section">
-                  <h2 id="setup" className="page-header">Setup</h2>
+                  <h2 className='page-header'><Anchor id='setup'>Setup</Anchor></h2>
                   <p className="lead">You can import the lib as AMD modules, CommonJS modules, or as a global JS script.</p>
 
                   <p>First add the Bootstrap CSS to your project; check <a href="http://getbootstrap.com/getting-started/" name="Bootstrap Docs">here</a> if you have not already done that. Note that:</p>
@@ -29,7 +30,7 @@ export default class Page extends React.Component {
                   </ul>
                   <p>Then:</p>
 
-                  <h3>CommonJS</h3>
+                  <h3><Anchor id='commonjs'>CommonJS</Anchor></h3>
                   <div className="highlight">
                     <CodeExample
                       codeText={
@@ -43,17 +44,31 @@ $ npm install react-bootstrap`
                       codeText={
 `var Alert = require('react-bootstrap/lib/Alert');
 // or
-var Alert = require('react-bootstrap').Alert;
+var Alert = require('react-bootstrap').Alert;`
+                      }
+                    />
+                  </div>
 
-// with ES6 modules
-import Alert from 'react-bootstrap/lib/Alert';
+                  <h3><Anchor id='es6'>ES6</Anchor></h3>
+                  <div className="highlight">
+                    <CodeExample
+                      codeText={
+`$ npm install react
+$ npm install react-bootstrap`
+                      }
+                    />
+                    <br />
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`import Button from 'react-bootstrap/lib/Button';
 // or
-import {Alert} from 'react-bootstrap';`
+import { Button } from 'react-bootstrap';`
                       }
                     />
                   </div>
 
-                  <h3>AMD</h3>
+                  <h3><Anchor id='amd'>AMD</Anchor></h3>
                   <div className="highlight">
                     <CodeExample
                       codeText={
@@ -70,7 +85,7 @@ $ bower install react-bootstrap`
                     />
                   </div>
 
-                  <h3>Browser globals</h3>
+                  <h3 className='page-header'><Anchor id='browser-globals'>Browser globals</Anchor></h3>
                   <p>The bower repo contains <code>react-bootstrap.js</code> and <code>react-bootstrap.min.js</code> with all components exported in the <code>window.ReactBootstrap</code> object.</p>
                   <div className="highlight">
                     <CodeExample
@@ -87,7 +102,7 @@ $ bower install react-bootstrap`
 
                 </div>
                 <div className="bs-docs-section">
-                  <h2 id="browser-support" className="page-header">Browser support</h2>
+                  <h2 className='page-header'><Anchor id='browser-support'>Browser support</Anchor></h2>
                   <p>We aim to support all browsers supported by both <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">React</a> and <a href="http://getbootstrap.com/getting-started/#support">Bootstrap</a>.</p>
 
                   <p>React requires <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">polyfills for non-ES5 capable browsers.</a></p>

From 5dabac1c76fb01a610ac706958ac629a6508a1a6 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Tue, 11 Aug 2015 18:12:36 +0300
Subject: [PATCH 125/128] Clarify 'Glyphicon' 'glyph' property

---
 src/Glyphicon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Glyphicon.js b/src/Glyphicon.js
index 44d7a531c4..b32a94d522 100644
--- a/src/Glyphicon.js
+++ b/src/Glyphicon.js
@@ -9,7 +9,7 @@ const Glyphicon = React.createClass({
      */
     bsClass: React.PropTypes.string,
     /**
-     * An icon name
+     * An icon name. See e.g. http://getbootstrap.com/components/#glyphicons
      */
     glyph: React.PropTypes.string.isRequired,
     /**

From 3446f9b8ddfa7f116e38622dece84ce8629cb353 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Tue, 11 Aug 2015 13:30:46 -0400
Subject: [PATCH 126/128] Always merge explicitly specified component styles

Fixes #1035
---
 src/Affix.js       | 6 +++++-
 src/ModalDialog.js | 5 ++++-
 src/Popover.js     | 4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Affix.js b/src/Affix.js
index 9648fa5166..81b7357a02 100644
--- a/src/Affix.js
+++ b/src/Affix.js
@@ -11,7 +11,11 @@ const Affix = React.createClass({
   mixins: [AffixMixin],
 
   render() {
-    let holderStyle = {top: this.state.affixPositionTop};
+    let holderStyle = {
+      top: this.state.affixPositionTop,
+      // we don't want to expose the `style` property
+      ...this.props.style // eslint-disable-line react/prop-types
+    };
 
     return (
       <div {...this.props}
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index 9761c57837..027fb2ea6f 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -29,7 +29,10 @@ const ModalDialog = React.createClass({
   },
 
   render() {
-    let modalStyle = { display: 'block' };
+    let modalStyle = {
+      display: 'block',
+      ...this.props.style
+    };
     let bsClass = this.props.bsClass;
     let dialogClasses = this.getBsClassSet();
 
diff --git a/src/Popover.js b/src/Popover.js
index 83b88029b0..7b8ed17f9a 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -61,7 +61,9 @@ const Popover = React.createClass({
     const style = {
       'left': this.props.positionLeft,
       'top': this.props.positionTop,
-      'display': 'block'
+      'display': 'block',
+      // we don't want to expose the `style` property
+      ...this.props.style // eslint-disable-line react/prop-types
     };
 
     const arrowStyle = {

From 217b7d18b492c496e86df4805da370aff28215bc Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Wed, 12 Aug 2015 14:44:12 +0300
Subject: [PATCH 127/128] Update dev dependencies

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 772f9fa368..5bc79c274e 100644
--- a/package.json
+++ b/package.json
@@ -55,8 +55,8 @@
     "colors": "^1.1.2",
     "css-loader": "^0.15.6",
     "es5-shim": "^4.1.10",
-    "eslint": "1.0.0",
-    "eslint-config-defaults": "^3.1.0",
+    "eslint": "^1.1.0",
+    "eslint-config-defaults": "^4.0.1",
     "eslint-plugin-babel": "^2.0.0",
     "eslint-plugin-lodash": "^0.1.3",
     "eslint-plugin-mocha": "^0.4.0",

From 94f50f00398f4b76c44e41ac7c23c13f70bde26a Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Wed, 12 Aug 2015 16:42:27 -0400
Subject: [PATCH 128/128] Clean up tabs documentation a little bit

---
 docs/src/ComponentsPage.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 667fa7d37b..d2f241e165 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -515,7 +515,7 @@ const ComponentsPage = React.createClass({
                 <div className='bs-docs-section'>
                   <h1 className='page-header'><Anchor id='tabs'>Togglable tabs</Anchor> <small>TabbedArea, TabPane</small></h1>
 
-                  <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
+                  <p>Add quick, dynamic tab functionality to transition through panes of local content.</p>
 
                   <h3><Anchor id='tabs-uncontrolled'>Uncontrolled</Anchor></h3>
                   <p>Allow the component to control its own state.</p>
@@ -529,11 +529,6 @@ const ComponentsPage = React.createClass({
                   <p>Set the <code>animation</code> prop to <code>false</code></p>
                   <ReactPlayground codeText={Samples.TabbedAreaNoAnimation} exampleClassName='bs-example-tabs' />
 
-                  <div className='bs-callout bs-callout-info'>
-                    <h4>Extends tabbed navigation</h4>
-                    <p>This plugin extends the <a href='#navs'>tabbed navigation component</a> to add tabbable areas.</p>
-                  </div>
-
                   <h3><Anchor id='tabs-props'>Props</Anchor></h3>
 
                   <h4><Anchor id='tabs-props-area'>TabbedArea</Anchor></h4>
@@ -898,7 +893,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href='#progress' key={8}>Progress bars</NavItem>
                     <NavItem href='#navs' key={9}>Navs</NavItem>
                     <NavItem href='#navbars' key={10}>Navbars</NavItem>
-                    <NavItem href='#tabs' key={11}>Togglable tabs</NavItem>
+                    <NavItem href='#tabs' key={11}>Tabs</NavItem>
                     <NavItem href='#pager' key={12}>Pager</NavItem>
                     <NavItem href='#pagination' key={13}>Pagination</NavItem>
                     <NavItem href='#alerts' key={14}>Alerts</NavItem>