From 804c24a33f390166a89276f68772fa64b1510ba8 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 28 Feb 2015 12:16:27 -0500
Subject: [PATCH] [added] Support for React 0.13.x

re add react to devDeps

remove old or depreciated API's

Remove getDOMNode classSet, joinClasses, CloneWithProps

Fix case on require()

typos, and syntax errors

update AMD, cjs package def

fix tests

Removed test dependence on root refs

[FIX] Docs, upgrade to react-router
---
 Gruntfile.js                 |   3 +-
 docs/build.js                |  16 +++-
 docs/client.js               |  10 ++-
 docs/server.js               |  15 +++-
 docs/src/NavMain.js          |  11 +--
 docs/src/ReactPlayground.js  |   2 +-
 docs/src/Root.js             |  30 +-------
 docs/src/Routes.js           |  21 +++++
 ie8/index.html               |   2 +-
 ie8/package.json             |   4 +-
 package.json                 |  11 +--
 src/Affix.jsx                |   4 +-
 src/AffixMixin.js            |   2 +-
 src/Alert.jsx                |   6 +-
 src/Badge.jsx                |   6 +-
 src/Button.jsx               |   8 +-
 src/ButtonGroup.jsx          |   6 +-
 src/ButtonToolbar.jsx        |   6 +-
 src/Carousel.jsx             |  10 +--
 src/CarouselItem.jsx         |   8 +-
 src/Col.jsx                  |   6 +-
 src/DropdownButton.jsx       |  15 ++--
 src/DropdownMenu.jsx         |  11 ++-
 src/DropdownStateMixin.js    |   2 +-
 src/FadeMixin.js             |  10 ++-
 src/Glyphicon.jsx            |   6 +-
 src/Grid.jsx                 |   4 +-
 src/Input.jsx                |  14 ++--
 src/Jumbotron.jsx            |   4 +-
 src/Label.jsx                |   6 +-
 src/ListGroup.jsx            |   7 +-
 src/ListGroupItem.jsx        |  24 +++---
 src/MenuItem.jsx             |   6 +-
 src/Modal.jsx                |  15 ++--
 src/ModalTrigger.jsx         |   6 +-
 src/Nav.jsx                  |  17 ++---
 src/NavItem.jsx              |   6 +-
 src/Navbar.jsx               |  29 ++++---
 src/OverlayMixin.js          |  20 +----
 src/OverlayTrigger.jsx       |   8 +-
 src/PageHeader.jsx           |   4 +-
 src/PageItem.jsx             |   6 +-
 src/Pager.jsx                |   9 +--
 src/Panel.jsx                |  24 +++---
 src/PanelGroup.jsx           |  10 +--
 src/Popover.jsx              |   6 +-
 src/ProgressBar.jsx          |  17 ++---
 src/Row.jsx                  |   4 +-
 src/SplitButton.jsx          |   6 +-
 src/SubNav.jsx               |  10 +--
 src/TabPane.jsx              |   7 +-
 src/TabbedArea.jsx           |   5 +-
 src/Table.jsx                |   5 +-
 src/Tooltip.jsx              |   5 +-
 src/Well.jsx                 |   5 +-
 src/utils/CustomPropTypes.js |   4 +-
 src/utils/classSet.js        |  39 ----------
 src/utils/cloneWithProps.js  | 143 -----------------------------------
 src/utils/joinClasses.js     |  40 ----------
 test/DropdownButtonSpec.jsx  |   2 +-
 test/DropdownMenuSpec.jsx    |  18 +++--
 test/FadeMixinSpec.jsx       |   1 +
 test/ListGroupSpec.jsx       |  11 ++-
 test/NavSpec.jsx             |  53 ++++++++-----
 test/NavbarSpec.jsx          |   6 +-
 test/OverlayMixinSpec.jsx    |   2 +-
 test/PagerSpec.jsx           |  11 ++-
 test/SplitButtonSpec.jsx     |   2 +-
 test/TabbedAreaSpec.jsx      |  77 ++++++++++++-------
 tools/amd/bower.json         |   3 +-
 tools/cjs/package.json       |   5 +-
 71 files changed, 386 insertions(+), 551 deletions(-)
 create mode 100644 docs/src/Routes.js
 delete mode 100644 src/utils/classSet.js
 delete mode 100644 src/utils/cloneWithProps.js
 delete mode 100644 src/utils/joinClasses.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 9f8e622e48..bcce4c838f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -136,7 +136,8 @@ module.exports = function (grunt) {
             almond: "../tools/vendor/almond"
           },
           packages: [
-            {	name: 'react', location: '../node_modules/react', main: './react' }
+            {	name: 'react', location: '../node_modules/react', main: './react' },
+            { name: 'classnames', location: '../node_modules/classnames', main: './index' }
           ],
           include: ["almond", "react-bootstrap"],
           exclude: ["react"],
diff --git a/docs/build.js b/docs/build.js
index 4252a7c420..dbde01a273 100755
--- a/docs/build.js
+++ b/docs/build.js
@@ -2,12 +2,22 @@
 
 var fs = require('fs');
 var path = require('path');
-var nodejsx = require('node-jsx').install();
+
+require('node-jsx').install();
+
+var React = require('react');
+var routes = require('./src/Routes');
+var Router = require('react-router');
+
 var Root = require('./src/Root');
 
 Root.getPages()
   .forEach(function (fileName) {
-    var RootHTML = Root.renderToString({initialPath: fileName});
 
-    fs.writeFileSync(path.join(__dirname, fileName), RootHTML);
+    Router.run(routes, '/' + fileName, function (Handler) {
+      var RootHTML = React.renderToString(React.createElement(Handler));
+
+      fs.writeFileSync(
+        path.join(__dirname, fileName), RootHTML);
+    })
   });
\ No newline at end of file
diff --git a/docs/client.js b/docs/client.js
index 80ebcd9b4e..733668d326 100644
--- a/docs/client.js
+++ b/docs/client.js
@@ -1,9 +1,15 @@
 'use strict';
 
 var React = require('react');
-var Root = require('./src/Root');
+var Router = require('react-router');
+var routes = require('./src/Routes');
 
 // For React devtools
 window.React = React;
 
-React.render(React.createFactory(Root)(window.INITIAL_PROPS), document);
+Router.run(routes, Router.RefreshLocation, function (Handler) {
+  React.render(
+    React.createElement(Handler, window.INITIAL_PROPS), document);
+})
+
+
diff --git a/docs/server.js b/docs/server.js
index 0b55c78101..244e93d0fb 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -2,15 +2,19 @@
 
 var express = require('express');
 
+
 var development = process.env.NODE_ENV !== 'production';
 var app = express();
 
 if (development) {
+  var React = require('react');
   var path = require('path');
   var url = require('url');
   var browserify = require('connect-browserify');
   var nodejsx = require('node-jsx').install();
-  var Root = require('./src/Root');
+
+  var routes = require('./src/Routes');
+  var Router = require('react-router');
 
   app = app
     .get('/assets/bundle.js', browserify('./client', {debug: true, watch: false}))
@@ -18,9 +22,14 @@ if (development) {
     .use('/vendor', express.static(path.join(__dirname, 'vendor')))
     .use(function renderApp(req, res) {
       var fileName = url.parse(req.url).pathname;
-      var RootHTML = Root.renderToString({initialPath: fileName});
 
-      res.send(RootHTML);
+      Router.run(routes, req.url, function (Handler) {
+        var RootHTML = React.renderToString(React.createElement(Handler));
+
+        res.send(RootHTML);
+      })
+
+      
     });
 } else {
   app = app
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index 72cb59f400..930064273d 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -1,19 +1,20 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
+var Router = require('react-router');
 var Navbar = require('../../lib/Navbar');
 var Nav = require('../../lib/Nav');
 
+
 var InternalLink = Router.Link;
 
 var NAV_LINKS = {
   'getting-started': {
-    link: '/getting-started.html',
+    link: 'getting-started',
     title: 'Getting started'
   },
   'components': {
-    link: '/components.html',
+    link: 'components',
     title: 'Components'
   }
 };
@@ -24,7 +25,7 @@ var NavMain = React.createClass({
   },
 
   render: function () {
-    var brand = <InternalLink href="/" className="navbar-brand">React Bootstrap</InternalLink>;
+    var brand = <InternalLink to='home' className="navbar-brand">React Bootstrap</InternalLink>;
 
     return (
       <Navbar componentClass='header' brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
@@ -40,7 +41,7 @@ var NavMain = React.createClass({
 
     return (
         <li className={this.props.activePage === linkName ? 'active' : null} key={linkName}>
-          <InternalLink href={link.link}>{link.title}</InternalLink>
+          <InternalLink to={link.link}>{link.title}</InternalLink>
         </li>
       );
   }
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 7ff19f1b02..28ef4fee4e 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -1,5 +1,5 @@
 var React = require('react');
-var classSet = require('react/lib/cx');
+var classSet = require('classnames');
 var CodeMirror = global.CodeMirror;
 var JSXTransformer = global.JSXTransformer;
 var Accordion = require('../../lib/Accordion');
diff --git a/docs/src/Root.js b/docs/src/Root.js
index f97bc30768..be1af64df0 100644
--- a/docs/src/Root.js
+++ b/docs/src/Root.js
@@ -1,30 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
-
-var HomePage = React.createFactory(require('./HomePage'));
-var GettingStartedPage = React.createFactory(require('./GettingStartedPage'));
-var ComponentsPage = React.createFactory(require('./ComponentsPage'));
-var NotFoundPage = React.createFactory(require('./NotFoundPage'));
-
-var Locations = Router.Locations;
-var Location = Router.Location;
-var NotFound = Router.NotFound;
-
-var PagesHolder = React.createClass({
-  render: function () {
-    return (
-        <Locations contextual>
-          <Location path="/" handler={HomePage} />
-          <Location path="/index.html" handler={HomePage} />
-          <Location path="/getting-started.html" handler={GettingStartedPage} />
-          <Location path="/components.html" handler={ComponentsPage} />
-          <NotFound handler={NotFoundPage} />
-        </Locations>
-      );
-  }
-});
+var Router = require('react-router');
 
 var Root = React.createClass({
   statics: {
@@ -110,9 +87,7 @@ var Root = React.createClass({
           <head dangerouslySetInnerHTML={head} />
 
           <body>
-            <Locations path={Root.getBaseUrl() + this.props.initialPath}>
-              <Location path={Root.getBaseUrl() + '*'} handler={React.createFactory(PagesHolder)} />
-            </Locations>
+            <Router.RouteHandler />
 
             <script dangerouslySetInnerHTML={browserInitScriptObj} />
             <script src="vendor/codemirror/codemirror.js" />
@@ -125,4 +100,5 @@ var Root = React.createClass({
   }
 });
 
+
 module.exports = Root;
diff --git a/docs/src/Routes.js b/docs/src/Routes.js
new file mode 100644
index 0000000000..9d5435311a
--- /dev/null
+++ b/docs/src/Routes.js
@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Root = require('./Root');
+var HomePage = require('./HomePage');
+var GettingStartedPage = require('./GettingStartedPage');
+var ComponentsPage = require('./ComponentsPage');
+var NotFoundPage = require('./NotFoundPage');
+
+var Router = require('react-router');
+
+
+module.exports = (
+  <Router.Route name="app" path="/" handler={Root}>
+    <Router.DefaultRoute handler={HomePage}/>
+    <Router.NotFoundRoute handler={NotFoundPage} />
+
+    <Router.Route name='home' path="index.html" handler={HomePage} />
+    <Router.Route name='getting-started' path="getting-started.html" handler={GettingStartedPage} />
+    <Router.Route name='components' path="components.html" handler={ComponentsPage} />  
+  </Router.Route>
+)
diff --git a/ie8/index.html b/ie8/index.html
index ef6d60d51f..6d6a10cffc 100644
--- a/ie8/index.html
+++ b/ie8/index.html
@@ -7,7 +7,7 @@
     <title>React Bootstrap IE8 test page</title>
 
     <!-- Bootstrap -->
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <style>
       body {
         padding: 50px 100px;
diff --git a/ie8/package.json b/ie8/package.json
index 12c6c74274..b2b6af9de5 100644
--- a/ie8/package.json
+++ b/ie8/package.json
@@ -3,12 +3,12 @@
     "browserify": "^4.1.11",
     "reactify": "^0.13.1",
     "envify": "^1.2.1",
-    "react": "^0.10.0",
+    "react": "^0.13.0",
     "http-server": "^0.6.1"
   },
   "scripts": {
     "postinstall": "npm run build",
     "start": "http-server -c-1",
-    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js"
+    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js --harmony"
   }
 }
diff --git a/package.json b/package.json
index eedd57363a..77d50fdc75 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "author": "Stephen J. Collings <stevoland@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=0.12"
+    "react": ">=0.13"
   },
   "devDependencies": {
     "async": "~0.2.9",
@@ -55,12 +55,13 @@
     "karma-script-launcher": "~0.1.0",
     "karma-sinon": "^1.0.3",
     "mocha": "~1.16.2",
-    "react": "~0.12.0",
-    "react-async": "~2.0.0",
-    "react-router-component": "git://github.com/STRML/react-router-component#react-0.12",
+    "react": "0.13.0",
     "requirejs": "~2.1.9",
     "rf-changelog": "^0.4.0",
     "semver": "~2.0.7",
     "sinon": "^1.10.3"
+  },
+  "dependencies": {
+    "classnames": "^1.1.4"
   }
-}
\ No newline at end of file
+}
diff --git a/src/Affix.jsx b/src/Affix.jsx
index e5b28c7e07..4166e2e506 100644
--- a/src/Affix.jsx
+++ b/src/Affix.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 var AffixMixin = require('./AffixMixin');
 var domUtils = require('./utils/domUtils');
 
@@ -13,7 +13,7 @@ var Affix = React.createClass({
   render: function () {
     var holderStyle = {top: this.state.affixPositionTop};
     return (
-      <div {...this.props} className={joinClasses(this.props.className, this.state.affixClass)} style={holderStyle}>
+      <div {...this.props} className={classSet(this.props.className, this.state.affixClass)} style={holderStyle}>
         {this.props.children}
       </div>
     );
diff --git a/src/AffixMixin.js b/src/AffixMixin.js
index c5c0b98c85..85c41d94f9 100644
--- a/src/AffixMixin.js
+++ b/src/AffixMixin.js
@@ -39,7 +39,7 @@ var AffixMixin = {
       return;
     }
 
-    DOMNode = this.getDOMNode();
+    DOMNode = React.findDOMNode(this);
     scrollHeight = document.documentElement.offsetHeight;
     scrollTop = window.pageYOffset;
     position = domUtils.getOffset(DOMNode);
diff --git a/src/Alert.jsx b/src/Alert.jsx
index 7423953ada..497297078f 100644
--- a/src/Alert.jsx
+++ b/src/Alert.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -38,7 +38,7 @@ var Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>
diff --git a/src/Badge.jsx b/src/Badge.jsx
index 6e47c63b51..4a0dfb797d 100644
--- a/src/Badge.jsx
+++ b/src/Badge.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 
 var Badge = React.createClass({
   propTypes: {
@@ -22,7 +22,7 @@ var Badge = React.createClass({
     return (
       <span
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Button.jsx b/src/Button.jsx
index 08c042f8e7..d468f33e09 100644
--- a/src/Button.jsx
+++ b/src/Button.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Button = React.createClass({
@@ -52,7 +52,7 @@ var Button = React.createClass({
       <Component
         {...this.props}
         href={href}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         role="button">
         {this.props.children}
       </Component>
@@ -65,7 +65,7 @@ var Button = React.createClass({
     return (
       <Component
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </Component>
     );
diff --git a/src/ButtonGroup.jsx b/src/ButtonGroup.jsx
index a2b81d2425..34b69e9530 100644
--- a/src/ButtonGroup.jsx
+++ b/src/ButtonGroup.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -27,7 +27,7 @@ var ButtonGroup = React.createClass({
     return (
       <div
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/ButtonToolbar.jsx b/src/ButtonToolbar.jsx
index f45e2dc21c..feeb3e26f1 100644
--- a/src/ButtonToolbar.jsx
+++ b/src/ButtonToolbar.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -20,7 +20,7 @@ var ButtonToolbar = React.createClass({
       <div
         {...this.props}
         role="toolbar"
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/Carousel.jsx b/src/Carousel.jsx
index 4013612b81..421fa494ce 100644
--- a/src/Carousel.jsx
+++ b/src/Carousel.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 var BootstrapMixin = require('./BootstrapMixin');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -144,7 +144,7 @@ var Carousel = React.createClass({
     return (
       <div
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}>
         {this.props.indicators ? this.renderIndicators() : null}
@@ -244,7 +244,7 @@ var Carousel = React.createClass({
     var isPreviousActive = this.state.previousActiveIndex != null &&
             this.state.previousActiveIndex === index && this.props.slide;
 
-    return cloneWithProps(
+    return cloneElement(
         child,
         {
           active: isActive,
diff --git a/src/CarouselItem.jsx b/src/CarouselItem.jsx
index 6c576cc90f..e5b863c6bb 100644
--- a/src/CarouselItem.jsx
+++ b/src/CarouselItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var TransitionEvents = require('./utils/TransitionEvents');
 
 var CarouselItem = React.createClass({
@@ -40,7 +40,7 @@ var CarouselItem = React.createClass({
   componentDidUpdate: function (prevProps) {
     if (!this.props.active && prevProps.active) {
       TransitionEvents.addEndEventListener(
-        this.getDOMNode(),
+        React.findDOMNode(this),
         this.handleAnimateOutEnd
       );
     }
@@ -74,7 +74,7 @@ var CarouselItem = React.createClass({
     }
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
         {this.props.caption ? this.renderCaption() : null}
       </div>
diff --git a/src/Col.jsx b/src/Col.jsx
index 23f564c598..d238af849c 100644
--- a/src/Col.jsx
+++ b/src/Col.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var constants = require('./constants');
 
 
@@ -64,7 +64,7 @@ var Col = React.createClass({
     }, this);
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/DropdownButton.jsx b/src/DropdownButton.jsx
index 9dbf3f24ee..aa02be4da5 100644
--- a/src/DropdownButton.jsx
+++ b/src/DropdownButton.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var BootstrapMixin = require('./BootstrapMixin');
@@ -67,7 +67,7 @@ var DropdownButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={joinClasses(this.props.className, classSet(groupClasses))}>
+        className={classSet(this.props.className, groupClasses)}>
         {children}
       </ButtonGroup>
     );
@@ -81,7 +81,7 @@ var DropdownButton = React.createClass({
       };
 
     return (
-      <li className={joinClasses(this.props.className, classSet(classes))}>
+      <li className={classSet(this.props.className, classes)}>
         {children}
       </li>
     );
@@ -94,15 +94,12 @@ var DropdownButton = React.createClass({
     var handleOptionSelect = this.props.onSelect || child.props.onSelect ?
       this.handleOptionSelect : null;
 
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         // Capture onSelect events
         onSelect: createChainedFunction(child.props.onSelect, handleOptionSelect),
-
-        // Force special props to be transferred
         key: child.key ? child.key : index,
-        ref: child.ref
       }
     );
   },
diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 50316ea5bc..19d654d99d 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
@@ -21,7 +21,7 @@ var DropdownMenu = React.createClass({
     return (
         <ul
           {...this.props}
-          className={joinClasses(this.props.className, classSet(classes))}
+          className={classSet(this.props.className, classes)}
           role="menu">
           {ValidComponentChildren.map(this.props.children, this.renderMenuItem)}
         </ul>
@@ -29,7 +29,7 @@ var DropdownMenu = React.createClass({
   },
 
   renderMenuItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         // Capture onSelect events
@@ -37,7 +37,6 @@ var DropdownMenu = React.createClass({
 
         // Force special props to be transferred
         key: child.key ? child.key : index,
-        ref: child.ref
       }
     );
   }
diff --git a/src/DropdownStateMixin.js b/src/DropdownStateMixin.js
index 6c2572279a..0764558046 100644
--- a/src/DropdownStateMixin.js
+++ b/src/DropdownStateMixin.js
@@ -48,7 +48,7 @@ var DropdownStateMixin = {
   handleDocumentClick: function (e) {
     // If the click originated from within this component
     // don't do anything.
-    if (isNodeInRoot(e.target, this.getDOMNode())) {
+    if (isNodeInRoot(e.target, React.findDOMNode(this))) {
       return;
     }
 
diff --git a/src/FadeMixin.js b/src/FadeMixin.js
index e5dea90d2c..df9e2bca48 100644
--- a/src/FadeMixin.js
+++ b/src/FadeMixin.js
@@ -1,4 +1,6 @@
 /*global document */
+var React = require('react');
+
 // TODO: listen for onTransitionEnd to remove el
 function getElementsAndSelf (root, classes){
   var els = root.querySelectorAll('.' + classes.join('.'));
@@ -19,7 +21,7 @@ module.exports = {
     var els;
 
     if (this.isMounted()) {
-      els = getElementsAndSelf(this.getDOMNode(), ['fade']);
+      els = getElementsAndSelf(React.findDOMNode(this), ['fade']);
 
       if (els.length) {
         els.forEach(function (el) {
@@ -55,13 +57,13 @@ module.exports = {
   },
 
   componentWillUnmount: function () {
-    var els = getElementsAndSelf(this.getDOMNode(), ['fade']),
-        container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var els = getElementsAndSelf(React.findDOMNode(this), ['fade']),
+        container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
 
     if (els.length) {
       this._fadeOutEl = document.createElement('div');
       container.appendChild(this._fadeOutEl);
-      this._fadeOutEl.appendChild(this.getDOMNode().cloneNode(true));
+      this._fadeOutEl.appendChild(React.findDOMNode(this).cloneNode(true));
       // Firefox needs delay for transition to be triggered
       setTimeout(this._fadeOut, 20);
     }
diff --git a/src/Glyphicon.jsx b/src/Glyphicon.jsx
index e98e0f9521..3f48b89ad1 100644
--- a/src/Glyphicon.jsx
+++ b/src/Glyphicon.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var constants = require('./constants');
 
@@ -23,7 +23,7 @@ var Glyphicon = React.createClass({
     classes['glyphicon-' + this.props.glyph] = true;
 
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Grid.jsx b/src/Grid.jsx
index d4a645b81a..2d54180d9f 100644
--- a/src/Grid.jsx
+++ b/src/Grid.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Grid = React.createClass({
   propTypes: {
@@ -20,7 +20,7 @@ var Grid = React.createClass({
     return (
       <ComponentClass
         {...this.props}
-        className={joinClasses(this.props.className, className)}>
+        className={classSet(this.props.className, className)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/Input.jsx b/src/Input.jsx
index 85231c093f..4ed0c18586 100644
--- a/src/Input.jsx
+++ b/src/Input.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var Button = require('./Button');
 
 var Input = React.createClass({
@@ -29,7 +29,7 @@ var Input = React.createClass({
   },
 
   getInputDOMNode: function () {
-    return this.refs.input.getDOMNode();
+    return React.findDOMNode(this.refs.input);
   },
 
   getValue: function () {
@@ -87,17 +87,17 @@ var Input = React.createClass({
     switch (this.props.type) {
       case 'select':
         input = (
-          <select {...this.props} className={joinClasses(this.props.className, 'form-control')} ref="input" key="input">
+          <select {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input">
             {this.props.children}
           </select>
         );
         break;
       case 'textarea':
-        input = <textarea {...this.props} className={joinClasses(this.props.className, 'form-control')} ref="input" key="input" />;
+        input = <textarea {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input" />;
         break;
       case 'static':
         input = (
-          <p {...this.props} className={joinClasses(this.props.className, 'form-control-static')} ref="input"  key="input">
+          <p {...this.props} className={classSet(this.props.className, 'form-control-static')} ref="input"  key="input">
             {this.props.value}
           </p>
         );
@@ -109,7 +109,7 @@ var Input = React.createClass({
         break;
       default:
         var className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
-        input = <input {...this.props} className={joinClasses(this.props.className, className)} ref="input" key="input" />;
+        input = <input {...this.props} className={classSet(this.props.className, className)} ref="input" key="input" />;
     }
 
     return input;
diff --git a/src/Jumbotron.jsx b/src/Jumbotron.jsx
index 4d24e1f36f..172e70e0cf 100644
--- a/src/Jumbotron.jsx
+++ b/src/Jumbotron.jsx
@@ -1,11 +1,11 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Jumbotron = React.createClass({
 
   render: function () {
     return (
-      <div {...this.props} className={joinClasses(this.props.className, 'jumbotron')}>
+      <div {...this.props} className={classSet(this.props.className, 'jumbotron')}>
         {this.props.children}
       </div>
     );
diff --git a/src/Label.jsx b/src/Label.jsx
index 864a4e1acf..871c14f7bc 100644
--- a/src/Label.jsx
+++ b/src/Label.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Label = React.createClass({
@@ -17,7 +17,7 @@ var Label = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/ListGroup.jsx b/src/ListGroup.jsx
index 8cc459323b..2ff5df8c23 100644
--- a/src/ListGroup.jsx
+++ b/src/ListGroup.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -19,8 +19,7 @@ var ListGroup = React.createClass({
   },
 
   renderListItem: function (child, index) {
-    return cloneWithProps(child, {
-      ref: child.ref,
+    return cloneElement(child, {
       key: child.key ? child.key : index
     });
   }
diff --git a/src/ListGroupItem.jsx b/src/ListGroupItem.jsx
index 6057a8c975..66d88bf202 100644
--- a/src/ListGroupItem.jsx
+++ b/src/ListGroupItem.jsx
@@ -1,8 +1,8 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -41,7 +41,7 @@ var ListGroupItem = React.createClass({
 
   renderSpan: function (classes) {
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </span>
     );
@@ -51,7 +51,7 @@ var ListGroupItem = React.createClass({
     return (
       <a
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </a>
@@ -61,27 +61,25 @@ var ListGroupItem = React.createClass({
   renderStructuredContent: function () {
     var header;
     if (React.isValidElement(this.props.header)) {
-      header = cloneWithProps(this.props.header, {
-        className: 'list-group-item-heading'
+      header = cloneElement(this.props.header, {
+        key: 'header',
+        className: classSet(this.props.header.props.className, 'list-group-item-heading')
       });
     } else {
       header = (
-        <h4 className="list-group-item-heading">
+        <h4 key='header' className="list-group-item-heading">
           {this.props.header}
         </h4>
       );
     }
 
     var content = (
-      <p className="list-group-item-text">
+      <p key='content' className="list-group-item-text">
         {this.props.children}
       </p>
     );
 
-    return {
-      header: header,
-      content: content
-    };
+    return [header, content];
   }
 });
 
diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx
index 449c7cc07d..e86fdce21e 100644
--- a/src/MenuItem.jsx
+++ b/src/MenuItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 
 var MenuItem = React.createClass({
   propTypes: {
@@ -49,7 +49,7 @@ var MenuItem = React.createClass({
 
     return (
       <li {...this.props} role="presentation" title={null} href={null}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {children}
       </li>
     );
diff --git a/src/Modal.jsx b/src/Modal.jsx
index 52e7f24701..e8396cfe03 100644
--- a/src/Modal.jsx
+++ b/src/Modal.jsx
@@ -1,8 +1,8 @@
 /* global document:false */
 
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var FadeMixin = require('./FadeMixin');
 var EventListener = require('./utils/EventListener');
@@ -54,7 +54,7 @@ var Modal = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
         ref="modal">
         <div className={classSet(dialogClasses)}>
@@ -125,15 +125,15 @@ var Modal = React.createClass({
     // 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
-    this.refs.modal.getDOMNode().onclick = function () {};
-    this.refs.backdrop.getDOMNode().onclick = function () {};
+    React.findDOMNode(this.refs.modal).onclick = function () {};
+    React.findDOMNode(this.refs.backdrop).onclick = function () {};
   },
 
   componentDidMount: function () {
     this._onDocumentKeyupListener =
       EventListener.listen(document, 'keyup', this.handleDocumentKeyUp);
 
-    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
     container.className += container.className.length ? ' modal-open' : 'modal-open';
 
     if (this.props.backdrop) {
@@ -149,7 +149,8 @@ var Modal = React.createClass({
 
   componentWillUnmount: function () {
     this._onDocumentKeyupListener.remove();
-    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
+
     container.className = container.className.replace(/ ?modal-open/, '');
   },
 
diff --git a/src/ModalTrigger.jsx b/src/ModalTrigger.jsx
index c4f2bece73..bb1525869c 100644
--- a/src/ModalTrigger.jsx
+++ b/src/ModalTrigger.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
 var OverlayMixin = require('./OverlayMixin');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 
@@ -40,7 +40,7 @@ var ModalTrigger = React.createClass({
       return <span />;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       this.props.modal,
       {
         onRequestHide: this.hide
@@ -50,7 +50,7 @@ var ModalTrigger = React.createClass({
 
   render: function () {
     var child = React.Children.only(this.props.children);
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         onClick: createChainedFunction(child.props.onClick, this.toggle)
diff --git a/src/Nav.jsx b/src/Nav.jsx
index 1a7cce60d2..1adb58ab23 100644
--- a/src/Nav.jsx
+++ b/src/Nav.jsx
@@ -1,10 +1,10 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
 var CollapsableMixin = require('./CollapsableMixin');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var domUtils = require('./utils/domUtils');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -32,11 +32,11 @@ var Nav = React.createClass({
   },
 
   getCollapsableDOMNode: function () {
-    return this.getDOMNode();
+    return React.findDOMNode(this);
   },
 
   getCollapsableDimensionValue: function () {
-    var node = this.refs.ul.getDOMNode(),
+    var node = React.findDOMNode(this.refs.ul),
         height = node.offsetHeight,
         computedStyles = domUtils.getComputedStyles(node);
 
@@ -53,7 +53,7 @@ var Nav = React.createClass({
     }
 
     return (
-      <nav {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <nav {...this.props} className={classSet(this.props.className, classes)}>
         {this.renderUl()}
       </nav>
     );
@@ -69,7 +69,7 @@ var Nav = React.createClass({
     classes['navbar-right'] = this.props.right;
 
     return (
-      <ul {...this.props} className={joinClasses(this.props.className, classSet(classes))} ref="ul">
+      <ul {...this.props} className={classSet(this.props.className, classes)} ref="ul">
         {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
       </ul>
     );
@@ -94,14 +94,13 @@ var Nav = React.createClass({
   },
 
   renderNavItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         active: this.getChildActiveProp(child),
         activeKey: this.props.activeKey,
         activeHref: this.props.activeHref,
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index,
         navItem: true
       }
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
index 86fb3040a9..9d61830378 100644
--- a/src/NavItem.jsx
+++ b/src/NavItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var NavItem = React.createClass({
@@ -37,7 +37,7 @@ var NavItem = React.createClass({
         };
 
     return (
-      <li {...props} className={joinClasses(props.className, classSet(classes))}>
+      <li {...props} className={classSet(props.className, classes)}>
         <a
           href={href}
           title={title}
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
index 2d0ce3bac4..02be032c7e 100644
--- a/src/Navbar.jsx
+++ b/src/Navbar.jsx
@@ -1,8 +1,8 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -77,7 +77,7 @@ var Navbar = React.createClass({
     classes['navbar-inverse'] = this.props.inverse;
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
         <div className={this.props.fluid ? 'container-fluid' : 'container'}>
           {(this.props.brand || this.props.toggleButton || this.props.toggleNavKey != null) ? this.renderHeader() : null}
           {ValidComponentChildren.map(this.props.children, this.renderChild)}
@@ -87,12 +87,11 @@ var Navbar = React.createClass({
   },
 
   renderChild: function (child, index) {
-    return cloneWithProps(child, {
+    return cloneElement(child, {
       navbar: true,
       collapsable: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
       expanded: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey && this.isNavExpanded(),
       key: child.key ? child.key : index,
-      ref: child.ref
     });
   },
 
@@ -100,10 +99,13 @@ var Navbar = React.createClass({
     var brand;
 
     if (this.props.brand) {
-      brand = React.isValidElement(this.props.brand) ?
-        cloneWithProps(this.props.brand, {
-          className: 'navbar-brand'
-        }) : <span className="navbar-brand">{this.props.brand}</span>;
+      brand = this.props.brand;
+
+      brand = React.isValidElement(brand) ?
+        cloneElement(brand, {
+          className: classSet(brand.props.className,'navbar-brand')
+        }) 
+        : <span className="navbar-brand">{brand}</span>;
     }
 
     return (
@@ -118,8 +120,11 @@ var Navbar = React.createClass({
     var children;
 
     if (React.isValidElement(this.props.toggleButton)) {
-      return cloneWithProps(this.props.toggleButton, {
-        className: 'navbar-toggle',
+
+      return cloneElement(this.props.toggleButton, {
+        
+        className: classSet(this.props.toggleButton.props.className,'navbar-toggle'),
+
         onClick: createChainedFunction(this.handleToggle, this.props.toggleButton.props.onClick)
       });
     }
diff --git a/src/OverlayMixin.js b/src/OverlayMixin.js
index cbe0fdc5ef..eb5f23d449 100644
--- a/src/OverlayMixin.js
+++ b/src/OverlayMixin.js
@@ -6,21 +6,6 @@ module.exports = {
     container: CustomPropTypes.mountable
   },
 
-  getDefaultProps: function () {
-    return {
-      container: {
-        // Provide `getDOMNode` fn mocking a React component API. The `document.body`
-        // reference needs to be contained within this function so that it is not accessed
-        // in environments where it would not be defined, e.g. nodejs. Equally this is needed
-        // before the body is defined where `document.body === null`, this ensures
-        // `document.body` is only accessed after componentDidMount.
-        getDOMNode: function getDOMNode() {
-          return document.body;
-        }
-      }
-    };
-  },
-
   componentWillUnmount: function () {
     this._unrenderOverlay();
     if (this._overlayTarget) {
@@ -71,14 +56,13 @@ module.exports = {
     }
 
     if (this._overlayInstance) {
-      return this._overlayInstance.getDOMNode();
+      return React.findDOMNode(this._overlayInstance);
     }
 
     return null;
   },
 
   getContainerDOMNode: function () {
-    return this.props.container.getDOMNode ?
-      this.props.container.getDOMNode() : this.props.container;
+    return React.findDOMNode(this.props.container || document.body);
   }
 };
diff --git a/src/OverlayTrigger.jsx b/src/OverlayTrigger.jsx
index 574956c693..5fce5ce14e 100644
--- a/src/OverlayTrigger.jsx
+++ b/src/OverlayTrigger.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
 var OverlayMixin = require('./OverlayMixin');
 var domUtils = require('./utils/domUtils');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var assign = require('./utils/Object.assign');
@@ -76,7 +76,7 @@ var OverlayTrigger = React.createClass({
       return <span />;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       this.props.overlay,
       {
         onRequestHide: this.hide,
@@ -108,7 +108,7 @@ var OverlayTrigger = React.createClass({
       props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
     }
 
-    return cloneWithProps(
+    return cloneElement(
       React.Children.only(this.props.children),
       props
     );
@@ -211,7 +211,7 @@ var OverlayTrigger = React.createClass({
   },
 
   getPosition: function () {
-    var node = this.getDOMNode();
+    var node = React.findDOMNode(this);
     var container = this.getContainerDOMNode();
 
     var offset = container.tagName == 'BODY' ?
diff --git a/src/PageHeader.jsx b/src/PageHeader.jsx
index 5c3d0a2a39..3f64e1feee 100644
--- a/src/PageHeader.jsx
+++ b/src/PageHeader.jsx
@@ -1,11 +1,11 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var PageHeader = React.createClass({
 
   render: function () {
     return (
-      <div {...this.props} className={joinClasses(this.props.className, 'page-header')}>
+      <div {...this.props} className={classSet(this.props.className, 'page-header')}>
         <h1>{this.props.children}</h1>
       </div>
     );
diff --git a/src/PageItem.jsx b/src/PageItem.jsx
index 6aea6ddd95..740b4df756 100644
--- a/src/PageItem.jsx
+++ b/src/PageItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 
 var PageItem = React.createClass({
 
@@ -30,7 +30,7 @@ var PageItem = React.createClass({
     return (
       <li
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
diff --git a/src/Pager.jsx b/src/Pager.jsx
index 2ae6550951..566ffeb457 100644
--- a/src/Pager.jsx
+++ b/src/Pager.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -15,18 +15,17 @@ var Pager = React.createClass({
     return (
       <ul
         {...this.props}
-        className={joinClasses(this.props.className, 'pager')}>
+        className={classSet(this.props.className, 'pager')}>
         {ValidComponentChildren.map(this.props.children, this.renderPageItem)}
       </ul>
     );
   },
 
   renderPageItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index
       }
     );
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 703ba75bed..fc6c95eb0b 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var BootstrapMixin = require('./BootstrapMixin');
 var CollapsableMixin = require('./CollapsableMixin');
@@ -42,7 +42,7 @@ var Panel = React.createClass({
   },
 
   getCollapsableDimensionValue: function () {
-    return this.refs.panel.getDOMNode().scrollHeight;
+    return React.findDOMNode(this.refs.panel).scrollHeight;
   },
 
   getCollapsableDOMNode: function () {
@@ -50,7 +50,7 @@ var Panel = React.createClass({
       return null;
     }
 
-    return this.refs.panel.getDOMNode();
+    return React.findDOMNode(this.refs.panel);
   },
 
   render: function () {
@@ -58,7 +58,7 @@ var Panel = React.createClass({
     classes['panel'] = true;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}
+      <div {...this.props} className={classSet(this.props.className, classes)}
         id={this.props.collapsable ? null : this.props.id} onSelect={null}>
         {this.renderHeading()}
         {this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()}
@@ -84,7 +84,7 @@ var Panel = React.createClass({
     }
 
     function addPanelChild (child) {
-      bodyElements.push(cloneWithProps(child, getProps()));
+      bodyElements.push(cloneElement(child, getProps()));
     }
 
     function addPanelBody (children) {
@@ -146,13 +146,15 @@ var Panel = React.createClass({
       header = this.props.collapsable ?
         this.renderCollapsableTitle(header) : header;
     } else if (this.props.collapsable) {
-      header = cloneWithProps(header, {
-        className: 'panel-title',
+
+      header = cloneElement(header, {
+        className: classSet(header.props.className, 'panel-title'),
         children: this.renderAnchor(header.props.children)
       });
     } else {
-      header = cloneWithProps(header, {
-        className: 'panel-title'
+
+      header = cloneElement(header, {
+        className: classSet(header.props.className, 'panel-title')
       });
     }
 
diff --git a/src/PanelGroup.jsx b/src/PanelGroup.jsx
index eb177b4a4d..a13e206a9c 100644
--- a/src/PanelGroup.jsx
+++ b/src/PanelGroup.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var BootstrapMixin = require('./BootstrapMixin');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
@@ -33,7 +33,7 @@ var PanelGroup = React.createClass({
   render: function () {
     var classes = this.getBsClassSet();
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} onSelect={null}>
+      <div {...this.props} className={classSet(this.props.className, classes)} onSelect={null}>
         {ValidComponentChildren.map(this.props.children, this.renderPanel)}
       </div>
     );
@@ -55,7 +55,7 @@ var PanelGroup = React.createClass({
       props.onSelect = this.handleSelect;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       child,
       props
     );
diff --git a/src/Popover.jsx b/src/Popover.jsx
index 8c5a0d9bce..57046f5275 100644
--- a/src/Popover.jsx
+++ b/src/Popover.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -38,7 +38,7 @@ var Popover = React.createClass({
     arrowStyle['top'] = this.props.arrowOffsetTop;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} style={style} title={null}>
+      <div {...this.props} className={classSet(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/ProgressBar.jsx b/src/ProgressBar.jsx
index 875f134c4f..df0ce06d13 100644
--- a/src/ProgressBar.jsx
+++ b/src/ProgressBar.jsx
@@ -1,9 +1,9 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var Interpolate = require('./Interpolate');
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -48,7 +48,7 @@ var ProgressBar = React.createClass({
     if (!ValidComponentChildren.hasValidComponent(this.props.children)) {
       if (!this.props.isChild) {
         return (
-          <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+          <div {...this.props} className={classSet(this.props.className, classes)}>
             {this.renderProgressBar()}
           </div>
         );
@@ -59,7 +59,7 @@ var ProgressBar = React.createClass({
       }
     } else {
       return (
-        <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+        <div {...this.props} className={classSet(this.props.className, classes)}>
           {ValidComponentChildren.map(this.props.children, this.renderChildBar)}
         </div>
       );
@@ -67,10 +67,9 @@ var ProgressBar = React.createClass({
   },
 
   renderChildBar: function (child, index) {
-    return cloneWithProps(child, {
+    return cloneElement(child, {
       isChild: true,
-      key: child.key ? child.key : index,
-      ref: child.ref
+      key: child.key ? child.key : index
     });
   },
 
@@ -96,7 +95,7 @@ var ProgressBar = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} role="progressbar"
+      <div {...this.props} className={classSet(this.props.className, classes)} role="progressbar"
         style={{width: percentage + '%'}}
         aria-valuenow={this.props.now}
         aria-valuemin={this.props.min}
diff --git a/src/Row.jsx b/src/Row.jsx
index ce07b337a6..0f2824647d 100644
--- a/src/Row.jsx
+++ b/src/Row.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Row = React.createClass({
   propTypes: {
@@ -16,7 +16,7 @@ var Row = React.createClass({
     var ComponentClass = this.props.componentClass;
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, 'row')}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, 'row')}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/SplitButton.jsx b/src/SplitButton.jsx
index 274c0a3ca4..6958ff673d 100644
--- a/src/SplitButton.jsx
+++ b/src/SplitButton.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var DropdownStateMixin = require('./DropdownStateMixin');
 var Button = require('./Button');
@@ -48,7 +48,7 @@ var SplitButton = React.createClass({
       <Button
         {...this.props}
         ref="dropdownButton"
-        className={joinClasses(this.props.className, 'dropdown-toggle')}
+        className={classSet(this.props.className, 'dropdown-toggle')}
         onClick={this.handleDropdownClick}
         title={null}
         href={null}
diff --git a/src/SubNav.jsx b/src/SubNav.jsx
index cf734a5898..5734056056 100644
--- a/src/SubNav.jsx
+++ b/src/SubNav.jsx
@@ -1,7 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -98,7 +97,7 @@ var SubNav = React.createClass({
     };
 
     return (
-      <li {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <li {...this.props} className={classSet(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
@@ -115,12 +114,11 @@ var SubNav = React.createClass({
   },
 
   renderNavItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         active: this.getChildActiveProp(child),
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index
       }
     );
diff --git a/src/TabPane.jsx b/src/TabPane.jsx
index 9cd3d33c91..cf4790f586 100644
--- a/src/TabPane.jsx
+++ b/src/TabPane.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var TransitionEvents = require('./utils/TransitionEvents');
 
 var TabPane = React.createClass({
@@ -37,7 +36,7 @@ var TabPane = React.createClass({
     }
     if (this.state.animateOut) {
       TransitionEvents.addEndEventListener(
-        this.getDOMNode(),
+        React.findDOMNode(this),
         this.stopAnimateOut
       );
     }
@@ -72,7 +71,7 @@ var TabPane = React.createClass({
     };
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/TabbedArea.jsx b/src/TabbedArea.jsx
index a0033e2b8b..f8e1184f41 100644
--- a/src/TabbedArea.jsx
+++ b/src/TabbedArea.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
 var BootstrapMixin = require('./BootstrapMixin');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var Nav = require('./Nav');
@@ -92,12 +92,11 @@ var TabbedArea = React.createClass({
   renderPane: function (child, index) {
     var activeKey = this.getActiveKey();
 
-    return cloneWithProps(
+    return cloneElement(
         child,
         {
           active: (child.props.eventKey === activeKey &&
             (this.state.previousActiveKey == null || !this.props.animation)),
-          ref: child.ref,
           key: child.key ? child.key : index,
           animation: this.props.animation,
           onAnimateOutEnd: (this.state.previousActiveKey != null &&
diff --git a/src/Table.jsx b/src/Table.jsx
index 04080b846b..f7ba8686ba 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 
 var Table = React.createClass({
   propTypes: {
@@ -20,7 +19,7 @@ var Table = React.createClass({
       'table-hover': this.props.hover
     };
     var table = (
-      <table {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <table {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </table>
     );
diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx
index 371322a938..26370891c0 100644
--- a/src/Tooltip.jsx
+++ b/src/Tooltip.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -36,7 +35,7 @@ var Tooltip = React.createClass({
     arrowStyle['top'] = this.props.arrowOffsetTop;
 
     return (
-        <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} style={style}>
+        <div {...this.props} className={classSet(this.props.className, classes)} style={style}>
           <div className="tooltip-arrow" style={arrowStyle} />
           <div className="tooltip-inner">
             {this.props.children}
diff --git a/src/Well.jsx b/src/Well.jsx
index 74e6434e0c..c0f40fd82c 100644
--- a/src/Well.jsx
+++ b/src/Well.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Well = React.createClass({
@@ -16,7 +15,7 @@ var Well = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/utils/CustomPropTypes.js b/src/utils/CustomPropTypes.js
index 2c02b081b7..226366f4b2 100644
--- a/src/utils/CustomPropTypes.js
+++ b/src/utils/CustomPropTypes.js
@@ -48,10 +48,10 @@ function createChainableTypeChecker(validate) {
 function createMountableChecker() {
   function validate(props, propName, componentName) {
     if (typeof props[propName] !== 'object' ||
-      typeof props[propName].getDOMNode !== 'function' && props[propName].nodeType !== 1) {
+      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 `getDOMNode` method'
+          '`' + componentName + '`, expected a DOM element or an object that has a `render` method'
       );
     }
   }
diff --git a/src/utils/classSet.js b/src/utils/classSet.js
deleted file mode 100644
index 691c099acf..0000000000
--- a/src/utils/classSet.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains an unmodified version of:
- * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/cx.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- */
-
-/**
- * This function is used to mark string literals representing CSS class names
- * so that they can be transformed statically. This allows for modularization
- * and minification of CSS class names.
- *
- * In static_upstream, this function is actually implemented, but it should
- * eventually be replaced with something more descriptive, and the transform
- * that is used in the main stack should be ported for use elsewhere.
- *
- * @param string|object className to modularize, or an object of key/values.
- *                      In the object case, the values are conditions that
- *                      determine if the className keys should be included.
- * @param [string ...]  Variable list of classNames in the string case.
- * @return string       Renderable space-separated CSS className.
- */
-function cx(classNames) {
-  if (typeof classNames == 'object') {
-    return Object.keys(classNames).filter(function(className) {
-      return classNames[className];
-    }).join(' ');
-  } else {
-    return Array.prototype.join.call(arguments, ' ');
-  }
-}
-
-module.exports = cx;
\ No newline at end of file
diff --git a/src/utils/cloneWithProps.js b/src/utils/cloneWithProps.js
deleted file mode 100644
index b311d3d636..0000000000
--- a/src/utils/cloneWithProps.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains modified versions of:
- * https://github.com/facebook/react/blob/v0.12.0/src/utils/cloneWithProps.js
- * https://github.com/facebook/react/blob/v0.12.0/src/core/ReactPropTransferer.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- *
- * TODO: This should be replaced as soon as cloneWithProps is available via
- *  the core React package or a separate package.
- *  @see https://github.com/facebook/react/issues/1906
- */
-
-var React = require('react');
-var joinClasses = require('./joinClasses');
-var assign = require("./Object.assign");
-
-/**
- * Creates a transfer strategy that will merge prop values using the supplied
- * `mergeStrategy`. If a prop was previously unset, this just sets it.
- *
- * @param {function} mergeStrategy
- * @return {function}
- */
-function createTransferStrategy(mergeStrategy) {
-  return function(props, key, value) {
-    if (!props.hasOwnProperty(key)) {
-      props[key] = value;
-    } else {
-      props[key] = mergeStrategy(props[key], value);
-    }
-  };
-}
-
-var transferStrategyMerge = createTransferStrategy(function(a, b) {
-  // `merge` overrides the first object's (`props[key]` above) keys using the
-  // second object's (`value`) keys. An object's style's existing `propA` would
-  // get overridden. Flip the order here.
-  return assign({}, b, a);
-});
-
-function emptyFunction() {}
-
-/**
- * Transfer strategies dictate how props are transferred by `transferPropsTo`.
- * NOTE: if you add any more exceptions to this list you should be sure to
- * update `cloneWithProps()` accordingly.
- */
-var TransferStrategies = {
-  /**
-   * Never transfer `children`.
-   */
-  children: emptyFunction,
-  /**
-   * Transfer the `className` prop by merging them.
-   */
-  className: createTransferStrategy(joinClasses),
-  /**
-   * Transfer the `style` prop (which is an object) by merging them.
-   */
-  style: transferStrategyMerge
-};
-
-/**
- * Mutates the first argument by transferring the properties from the second
- * argument.
- *
- * @param {object} props
- * @param {object} newProps
- * @return {object}
- */
-function transferInto(props, newProps) {
-  for (var thisKey in newProps) {
-    if (!newProps.hasOwnProperty(thisKey)) {
-      continue;
-    }
-
-    var transferStrategy = TransferStrategies[thisKey];
-
-    if (transferStrategy && TransferStrategies.hasOwnProperty(thisKey)) {
-      transferStrategy(props, thisKey, newProps[thisKey]);
-    } else if (!props.hasOwnProperty(thisKey)) {
-      props[thisKey] = newProps[thisKey];
-    }
-  }
-  return props;
-}
-
-/**
- * Merge two props objects using TransferStrategies.
- *
- * @param {object} oldProps original props (they take precedence)
- * @param {object} newProps new props to merge in
- * @return {object} a new object containing both sets of props merged.
- */
-function mergeProps(oldProps, newProps) {
-  return transferInto(assign({}, oldProps), newProps);
-}
-
-
-var ReactPropTransferer = {
-  mergeProps: mergeProps
-};
-
-var CHILDREN_PROP = 'children';
-
-/**
- * Sometimes you want to change the props of a child passed to you. Usually
- * this is to add a CSS class.
- *
- * @param {object} child child component you'd like to clone
- * @param {object} props props you'd like to modify. They will be merged
- * as if you used `transferPropsTo()`.
- * @return {object} a clone of child with props merged in.
- */
-function cloneWithProps(child, props) {
-  var newProps = ReactPropTransferer.mergeProps(props, child.props);
-
-  // Use `child.props.children` if it is provided.
-  if (!newProps.hasOwnProperty(CHILDREN_PROP) &&
-    child.props.hasOwnProperty(CHILDREN_PROP)) {
-    newProps.children = child.props.children;
-  }
-
-  if (React.version.substr(0, 4) === '0.12'){
-    var mockLegacyFactory = function(){};
-    mockLegacyFactory.isReactLegacyFactory = true;
-    mockLegacyFactory.type = child.type;
-
-    return React.createElement(mockLegacyFactory, newProps);
-  }
-
-  // The current API doesn't retain _owner and _context, which is why this
-  // doesn't use ReactElement.cloneAndReplaceProps.
-  return React.createElement(child.type, newProps);
-}
-
-module.exports = cloneWithProps;
\ No newline at end of file
diff --git a/src/utils/joinClasses.js b/src/utils/joinClasses.js
deleted file mode 100644
index 5200f42a3c..0000000000
--- a/src/utils/joinClasses.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains an unmodified version of:
- * https://github.com/facebook/react/blob/v0.12.0/src/utils/joinClasses.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- */
-
-"use strict";
-
-/**
- * Combines multiple className strings into one.
- * http://jsperf.com/joinclasses-args-vs-array
- *
- * @param {...?string} classes
- * @return {string}
- */
-function joinClasses(className/*, ... */) {
-  if (!className) {
-    className = '';
-  }
-  var nextClass;
-  var argLength = arguments.length;
-  if (argLength > 1) {
-    for (var ii = 1; ii < argLength; ii++) {
-      nextClass = arguments[ii];
-      if (nextClass) {
-        className = (className ? className + ' ' : '') + nextClass;
-      }
-    }
-  }
-  return className;
-}
-
-module.exports = joinClasses;
diff --git a/test/DropdownButtonSpec.jsx b/test/DropdownButtonSpec.jsx
index 61b9381b18..ddf4408ce7 100644
--- a/test/DropdownButtonSpec.jsx
+++ b/test/DropdownButtonSpec.jsx
@@ -12,7 +12,7 @@ describe('DropdownButton', function () {
 
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/DropdownMenuSpec.jsx b/test/DropdownMenuSpec.jsx
index c91eb7421d..92c68f1c81 100644
--- a/test/DropdownMenuSpec.jsx
+++ b/test/DropdownMenuSpec.jsx
@@ -7,11 +7,19 @@ var MenuItem       = require('../lib/MenuItem');
 
 describe('DropdownMenu', function () {
   it('Should render menu correctly', function () {
+    var Parent = React.createClass({
+      render: function(){
+        return (
+          <DropdownMenu>
+            <MenuItem eventKey="1" ref="item1">MenuItem 1 content</MenuItem>
+            <MenuItem eventKey="2" ref="item2">MenuItem 2 content</MenuItem>
+          </DropdownMenu>
+        )
+      }
+    })
+
     var instance = ReactTestUtils.renderIntoDocument(
-      <DropdownMenu>
-        <MenuItem eventKey="1" ref="item1">MenuItem 1 content</MenuItem>
-        <MenuItem eventKey="2" ref="item2">MenuItem 2 content</MenuItem>
-      </DropdownMenu>
+      <Parent/>
     );
 
     var node = instance.getDOMNode();
@@ -100,4 +108,4 @@ describe('DropdownMenu', function () {
     ReactTestUtils.findRenderedDOMComponentWithTag(menuItems[1], 'a').getDOMNode()
       .dispatchEvent(evt);
   });
-});
+});
\ No newline at end of file
diff --git a/test/FadeMixinSpec.jsx b/test/FadeMixinSpec.jsx
index dc091cc955..b7c2c61805 100644
--- a/test/FadeMixinSpec.jsx
+++ b/test/FadeMixinSpec.jsx
@@ -40,6 +40,7 @@ describe('FadeMixin', function () {
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
 
     setTimeout(function(){
+
       instance.componentWillUnmount()
       var element = instance._fadeOutEl.children[0]
       var child   = element.children[0]
diff --git a/test/ListGroupSpec.jsx b/test/ListGroupSpec.jsx
index 2876e28d58..089bd15b14 100644
--- a/test/ListGroupSpec.jsx
+++ b/test/ListGroupSpec.jsx
@@ -18,12 +18,15 @@ describe('ListGroup', function () {
   it('Should support "ListGroupItem" childs', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <ListGroup>
-        <ListGroupItem ref="child1">1st Child</ListGroupItem>
-        <ListGroupItem ref="child2">2nd Child</ListGroupItem>
+        <ListGroupItem>1st Child</ListGroupItem>
+        <ListGroupItem>2nd Child</ListGroupItem>
       </ListGroup>
     );
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.child1, 'list-group-item'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.child2, 'list-group-item'));
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, ListGroupItem);
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[0], 'list-group-item'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[1], 'list-group-item'));
   });
 
 });
diff --git a/test/NavSpec.jsx b/test/NavSpec.jsx
index a3ba344665..bcbaf1a6d4 100644
--- a/test/NavSpec.jsx
+++ b/test/NavSpec.jsx
@@ -10,12 +10,15 @@ describe('Nav', function () {
   it('Should set the correct item active', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeKey={1}>
-        <NavItem eventKey={1} ref="item1">Pill 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2">Pill 2 content</NavItem>
+        <NavItem eventKey={1}>Pill 1 content</NavItem>
+        <NavItem eventKey={2}>Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item1.props.active);
-    assert.notOk(instance.refs.item2.props.active);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[0].props.active);
+    assert.notOk(items[1].props.active);
   });
 
   it('Should adds style class', function () {
@@ -62,10 +65,11 @@ describe('Nav', function () {
   it('Should add navbar-right class', function () {
     var instance = ReactTestUtils.renderIntoDocument(
           <Nav bsStyle="tabs" right activeKey={1}>
-            <NavItem key={1} ref="item1">Tab 1 content</NavItem>
-            <NavItem key={2} ref="item2">Tab 2 content</NavItem>
+            <NavItem key={1}>Tab 1 content</NavItem>
+            <NavItem key={2}>Tab 2 content</NavItem>
           </Nav>
         );
+
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-right'));
   });
 
@@ -75,32 +79,41 @@ describe('Nav', function () {
       done();
     }
     var instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} onSelect={handleSelect}>
-        <NavItem eventKey={1} ref="item1">Tab 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2"><span>Tab 2 content</span></NavItem>
-      </Nav>
-    );
-    ReactTestUtils.Simulate.click(instance.refs.item2.refs.anchor);
+          <Nav bsStyle="tabs" activeKey={1} onSelect={handleSelect}>
+            <NavItem eventKey={1}>Tab 1 content</NavItem>
+            <NavItem eventKey={2}><span>Tab 2 content</span></NavItem>
+          </Nav>
+        );
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    ReactTestUtils.Simulate.click(items[1].refs.anchor);
   });
 
   it('Should set the correct item active by href', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeHref="#item2">
-        <NavItem eventKey={1} ref="item1" href="#item1">Pill 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2" href="#item2">Pill 2 content</NavItem>
+        <NavItem eventKey={1} href="#item1">Pill 1 content</NavItem>
+        <NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item2.props.active);
-    assert.notOk(instance.refs.item1.props.active);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[1].props.active);
+    assert.notOk(items[0].props.active);
   });
 
   it('Should set navItem prop on passed in buttons', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeHref="#item2">
-        <Button eventKey={1} ref="item1">Button 1 content</Button>
-        <NavItem eventKey={2} ref="item2" href="#item2">Pill 2 content</NavItem>
+        <Button eventKey={1}>Button 1 content</Button>
+        <NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item1.props.navItem);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[0].props.navItem);
   });
-});
+});
\ No newline at end of file
diff --git a/test/NavbarSpec.jsx b/test/NavbarSpec.jsx
index 2bbeb1894c..b5402e6bd1 100644
--- a/test/NavbarSpec.jsx
+++ b/test/NavbarSpec.jsx
@@ -100,11 +100,13 @@ describe('Nav', function () {
   it('Should pass navbar prop to navs', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Navbar brand="Brand">
-        <Nav ref="nav"/>
+        <Nav />
       </Navbar>
     );
 
-    assert.ok(instance.refs.nav.props.navbar);
+    var nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav)
+
+    assert.ok(nav.props.navbar);
   });
 
   it('Should pass nav prop to ul', function () {
diff --git a/test/OverlayMixinSpec.jsx b/test/OverlayMixinSpec.jsx
index 855affe9e8..c72f538882 100644
--- a/test/OverlayMixinSpec.jsx
+++ b/test/OverlayMixinSpec.jsx
@@ -21,7 +21,7 @@ describe('OverlayMixin', function () {
 
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/PagerSpec.jsx b/test/PagerSpec.jsx
index ead2be4e6c..fd38a9133c 100644
--- a/test/PagerSpec.jsx
+++ b/test/PagerSpec.jsx
@@ -45,10 +45,15 @@ describe('Pager', function () {
     }
     var instance = ReactTestUtils.renderIntoDocument(
       <Pager onSelect={handleSelect}>
-        <PageItem eventKey={1} ref="item1" href="#prev">Previous</PageItem>
-        <PageItem eventKey={2} ref="item2" href="#next">Next</PageItem>
+        <PageItem eventKey={1} href="#prev">Previous</PageItem>
+        <PageItem eventKey={2} href="#next">Next</PageItem>
       </Pager>
     );
-    ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.item2, 'a'));
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, PageItem);
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.findRenderedDOMComponentWithTag(items[1], 'a')
+    );
   });
 });
diff --git a/test/SplitButtonSpec.jsx b/test/SplitButtonSpec.jsx
index 60877cdae8..c26a2b18eb 100644
--- a/test/SplitButtonSpec.jsx
+++ b/test/SplitButtonSpec.jsx
@@ -10,7 +10,7 @@ describe('SplitButton', function () {
   var instance;
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/TabbedAreaSpec.jsx b/test/TabbedAreaSpec.jsx
index a42aca0786..e9553c50eb 100644
--- a/test/TabbedAreaSpec.jsx
+++ b/test/TabbedAreaSpec.jsx
@@ -10,15 +10,19 @@ describe('TabbedArea', function () {
   it('Should show the correct tab', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea activeKey={1}>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
 
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should only show the tabs with `TabPane.props.tab` set', function () {
@@ -30,8 +34,10 @@ describe('TabbedArea', function () {
       </TabbedArea>
     );
 
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
     assert.equal(ValidComponentChildren.numberOf(instance.refs.tabs.props.children), 2);
-    assert.equal(instance.refs.tabs.props.activeKey, 3);
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 3);
   });
 
   it('Should allow tab to have React components', function () {
@@ -58,10 +64,11 @@ describe('TabbedArea', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea onSelect={onSelect} activeKey={1}>
         <TabPane tab="Tab 1" eventKey='1'>Tab 1 content</TabPane>
-        <TabPane tab={tab2} eventKey='2' ref="tab2">Tab 2 content</TabPane>
+        <TabPane tab={tab2} eventKey='2'>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
+
     ReactTestUtils.Simulate.click(
       ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab2')
     );
@@ -70,41 +77,50 @@ describe('TabbedArea', function () {
   it('Should have children with the correct DOM properties', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea activeKey={1}>
-        <TabPane tab="Tab 1" className="custom" id="pane0id" eventKey={1} ref="pane1">Tab 1 content</TabPane>
+        <TabPane tab="Tab 1" className="custom" id="pane0id" eventKey={1}>Tab 1 content</TabPane>
         <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.ok(instance.refs.pane1.getDOMNode().className.match(/\bcustom\b/));
-    assert.equal(instance.refs.pane1.getDOMNode().id, 'pane0id');
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
+    assert.ok(panes[0].getDOMNode().className.match(/\bcustom\b/));
+    assert.equal(panes[0].getDOMNode().id, 'pane0id');
   });
 
   it('Should show the correct initial pane', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea defaultActiveKey={2}>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, false);
-    assert.equal(instance.refs.pane2.props.active, true);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
 
-    assert.equal(instance.refs.tabs.props.activeKey, 2);
+    assert.equal(panes[0].props.active, false);
+    assert.equal(panes[1].props.active, true);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 2);
   });
 
   it('Should show the correct first tab with no active key value', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
 
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should show the correct first tab with `React.Children.map` children values', function () {
@@ -130,26 +146,29 @@ describe('TabbedArea', function () {
     var tab1 = <span className="tab1">Tab 1</span>;
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea defaultActiveKey={2} animation={false}>
-        <TabPane tab={tab1} eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab={tab1} eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
     ReactTestUtils.Simulate.click(
       ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab1')
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should pass default bsStyle (of "tabs") to Nav', function () {
     var instance = ReactTestUtils.renderIntoDocument(
-      <TabbedArea defaultActiveKey={1} animation={false}>
-        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
-      </TabbedArea>
+        <TabbedArea defaultActiveKey={1} animation={false}>
+          <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+          <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
+        </TabbedArea>
     );
 
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav-tabs'));
diff --git a/tools/amd/bower.json b/tools/amd/bower.json
index b6e40e169f..d618cc2203 100644
--- a/tools/amd/bower.json
+++ b/tools/amd/bower.json
@@ -16,6 +16,7 @@
     "**/.*"
   ],
   "dependencies": {
-    "react": ">= 0.12.0"
+    "react": ">= 0.13.0",
+    "classnames": "1.1.4"
   }
 }
diff --git a/tools/cjs/package.json b/tools/cjs/package.json
index cdcf11a225..2d8f6d0517 100644
--- a/tools/cjs/package.json
+++ b/tools/cjs/package.json
@@ -19,7 +19,10 @@
   "bugs": {
     "url": "https://github.com/react-bootstrap/react-bootstrap/issues"
   },
+  "dependencies": {
+    "classnames": "1.1.4"
+  },
   "peerDependencies": {
-    "react": ">=0.12"
+    "react": ">=0.13"
   }
 }