Controlled Mode

.babelrc

@@ -5,6 +5,7 @@
   ],
   "plugins": [
     "transform-object-rest-spread",
-    "transform-class-properties"
+    "transform-class-properties",
+    ["transform-react-remove-prop-types", { "mode": "wrap" }]
   ]
 }

examples/basic/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
 import '../../style/react-tabs.css';
 
 const App = () => {

examples/conditional/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
 import '../../style/react-tabs.css';
 
 class App extends React.Component {

examples/dyno/app.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
-import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
 import '../../style/react-tabs.css';
 
 Modal.setAppElement(document.getElementById('example'));
@@ -51,7 +51,7 @@ class App extends React.Component {
   removeTab = (index) => {
     this.setState({
       tabs: this.state.tabs.filter((tab, i) => i !== index),
-      selectedIndex: this.state.selectedIndex - 1,
+      selectedIndex: Math.max(this.state.selectedIndex - 1, 0),
     });
   }
 

examples/focus/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
 import '../../style/react-tabs.css';
 
 class App extends React.Component {
@@ -10,7 +10,7 @@ class App extends React.Component {
     this.state = { inputValue: '' };
   }
 
-  handleInputChange(e) {
+  handleInputChange = (e) => {
     this.forceUpdate();
     this.setState({ inputValue: e.target.value });
   }

examples/nested/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
 import '../../style/react-tabs.css';
 
 const App = () => {

package.json

@@ -2,7 +2,7 @@
   "name": "react-tabs",
   "version": "0.8.2",
   "description": "React tabs component",
-  "main": "lib/main.js",
+  "main": "lib/index.js",
   "scripts": {
     "clean": "rimraf lib",
     "build:commonjs": "babel src/ --out-dir lib/ --ignore __tests__,__mocks__",
@@ -47,6 +47,7 @@
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.0",
     "babel-preset-env": "^1.3.3",
     "babel-preset-react": "^6.5.0",
     "cross-env": "^4.0.0",

src/__tests__/main-test.js → src/__tests__/index-test.js

@@ -1,12 +1,11 @@
 /* eslint-env jest */
-/* eslint-disable import/no-named-as-default-member */
-import { Tab, Tabs, TabList, TabPanel } from '../main';
+import { Tab, Tabs, TabList, TabPanel } from '../index';
 import TabComponent from '../components/Tab';
 import TabListComponent from '../components/TabList';
 import TabsComponent from '../components/Tabs';
 import TabPanelComponent from '../components/TabPanel';
 
-describe('main.js', () => {
+describe('index.js', () => {
   it('should correctly export all component as named export', () => {
     expect(Tab).toEqual(TabComponent);
     expect(TabList).toEqual(TabListComponent);

src/components/Tab.js

@@ -23,11 +23,11 @@ export default class Tab extends Component {
     ]),
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    focus: PropTypes.bool,
-    id: PropTypes.string,
-    panelId: PropTypes.string,
-    selected: PropTypes.bool,
-    tabRef: PropTypes.func,
+    focus: PropTypes.bool, // private
+    id: PropTypes.string, // private
+    panelId: PropTypes.string, // private
+    selected: PropTypes.bool, // private
+    tabRef: PropTypes.func, // private
   };
 
   componentDidMount() {

src/components/TabPanel.js

@@ -4,29 +4,25 @@ import cx from 'classnames';
 
 export default class TabPanel extends Component {
 
-  static contextTypes = {
-    forceRenderTabPanel: PropTypes.bool,
-  };
-
   static defaultProps = {
-    id: null,
-    selected: false,
-    tabId: null,
+    style: {},
   };
 
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    id: PropTypes.string,
-    selected: PropTypes.bool,
+    forceRenderTabPanel: PropTypes.bool, // private
+    id: PropTypes.string, // private
+    selected: PropTypes.bool, // private
     style: PropTypes.object,
-    tabId: PropTypes.string,
+    tabId: PropTypes.string, // private
   };
 
   render() {
     const {
       children,
       className,
+      forceRenderTabPanel,
       id,
       selected,
       style,
@@ -48,7 +44,7 @@ export default class TabPanel extends Component {
         aria-labelledby={tabId}
         style={{ ...style, display: selected ? null : 'none' }}
       >
-        {(this.context.forceRenderTabPanel || selected) ? children : null}
+        {(forceRenderTabPanel || selected) ? children : null}
       </div>
     );
   }