react-tabs - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -31,2 +31,3 @@ # Changelog
 - `selectedIndex` now enables controlled mode, which disables internal management of the active tab. If you were using `selectedIndex` before to set the initial displayed tab use `defaultIndex` now.
+- The value `-1` for `selectedIndex` and `defaultIndex` do not activate the first tab anymore, but instead display no tab panel at all. Use `-1` if you want to display only the tabs but have non of them being selected. If you want to have the first tab selected us `0`.
 - Support for bower package manager was removed.
@@ -33,0 +34,0 @@ - Removed deprecated default export of tabs:

dist/react-tabs.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["ReactTabs"] = factory(root["React"], root["PropTypes"], root["classNames"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_5__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -77,3 +77,3 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 12);
 /******/ })
@@ -89,8 +89,2 @@ /************************************************************************/
 /* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -105,3 +99,3 @@
 
-var _propTypes = __webpack_require__(1);
+var _propTypes = __webpack_require__(3);
 
@@ -206,3 +200,3 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
   disabled: _propTypes2.default.bool,
-  disabledClassName: _propTypes2.default.string, // private
+  disabledClassName: _propTypes2.default.string,
   focus: _propTypes2.default.bool, // private
@@ -212,7 +206,8 @@ id: _propTypes2.default.string, // private
   selected: _propTypes2.default.bool, // private
-  selectedClassName: _propTypes2.default.string, // private
-  tabRef: _propTypes2.default.func } : {};
+  selectedClassName: _propTypes2.default.string,
+  tabRef: _propTypes2.default.func // private
+} : {};
 
 /***/ }),
-/* 3 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -227,3 +222,3 @@
 
-var _propTypes = __webpack_require__(1);
+var _propTypes = __webpack_require__(3);
 
@@ -250,37 +245,65 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var TabList = function (_Component) {
-  _inherits(TabList, _Component);
+var DEFAULT_CLASS = 'react-tabs__tab-panel';
 
-  function TabList() {
-    _classCallCheck(this, TabList);
+var TabPanel = function (_Component) {
+  _inherits(TabPanel, _Component);
 
+  function TabPanel() {
+    _classCallCheck(this, TabPanel);
+
     return _possibleConstructorReturn(this, _Component.apply(this, arguments));
   }
 
-  TabList.prototype.render = function render() {
+  TabPanel.prototype.render = function render() {
+    var _cx;
+
     var _props = this.props,
         children = _props.children,
         className = _props.className,
-        attributes = _objectWithoutProperties(_props, ['children', 'className']);
+        forceRender = _props.forceRender,
+        id = _props.id,
+        selected = _props.selected,
+        selectedClassName = _props.selectedClassName,
+        tabId = _props.tabId,
+        attributes = _objectWithoutProperties(_props, ['children', 'className', 'forceRender', 'id', 'selected', 'selectedClassName', 'tabId']);
 
     return _react2.default.createElement(
-      'ul',
-      _extends({}, attributes, { className: (0, _classnames2.default)(className), role: 'tablist' }),
-      children
+      'div',
+      _extends({}, attributes, {
+        className: (0, _classnames2.default)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
+        role: 'tabpanel',
+        id: id,
+        'aria-labelledby': tabId
+      }),
+      forceRender || selected ? children : null
     );
   };
 
-  return TabList;
+  return TabPanel;
 }(_react.Component);
 
-TabList.defaultProps = {
-  className: 'react-tabs__tab-list'
+TabPanel.defaultProps = {
+  className: DEFAULT_CLASS,
+  forceRender: false,
+  selectedClassName: DEFAULT_CLASS + '--selected',
+  style: {}
 };
-exports.default = TabList;
-TabList.propTypes =  true ? {
-  children: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object])
+exports.default = TabPanel;
+TabPanel.propTypes =  true ? {
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
+  forceRender: _propTypes2.default.bool,
+  id: _propTypes2.default.string, // private
+  selected: _propTypes2.default.bool, // private
+  selectedClassName: _propTypes2.default.string,
+  tabId: _propTypes2.default.string // private
 } : {};
 
 /***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+
+/***/ }),
 /* 4 */
@@ -296,3 +319,3 @@ /***/ (function(module, exports, __webpack_require__) {
 
-var _propTypes = __webpack_require__(1);
+var _propTypes = __webpack_require__(3);
 
@@ -319,56 +342,35 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var DEFAULT_CLASS = 'react-tabs__tab-panel';
+var TabList = function (_Component) {
+  _inherits(TabList, _Component);
 
-var TabPanel = function (_Component) {
-  _inherits(TabPanel, _Component);
+  function TabList() {
+    _classCallCheck(this, TabList);
 
-  function TabPanel() {
-    _classCallCheck(this, TabPanel);
-
     return _possibleConstructorReturn(this, _Component.apply(this, arguments));
   }
 
-  TabPanel.prototype.render = function render() {
-    var _cx;
-
+  TabList.prototype.render = function render() {
     var _props = this.props,
         children = _props.children,
         className = _props.className,
-        forceRender = _props.forceRender,
-        id = _props.id,
-        selected = _props.selected,
-        selectedClassName = _props.selectedClassName,
-        tabId = _props.tabId,
-        attributes = _objectWithoutProperties(_props, ['children', 'className', 'forceRender', 'id', 'selected', 'selectedClassName', 'tabId']);
+        attributes = _objectWithoutProperties(_props, ['children', 'className']);
 
     return _react2.default.createElement(
-      'div',
-      _extends({}, attributes, {
-        className: (0, _classnames2.default)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
-        role: 'tabpanel',
-        id: id,
-        'aria-labelledby': tabId
-      }),
-      forceRender || selected ? children : null
+      'ul',
+      _extends({}, attributes, { className: (0, _classnames2.default)(className), role: 'tablist' }),
+      children
     );
   };
 
-  return TabPanel;
+  return TabList;
 }(_react.Component);
 
-TabPanel.defaultProps = {
-  className: DEFAULT_CLASS,
-  forceRender: false,
-  selectedClassName: DEFAULT_CLASS + '--selected',
-  style: {}
+TabList.defaultProps = {
+  className: 'react-tabs__tab-list'
 };
-exports.default = TabPanel;
-TabPanel.propTypes =  true ? {
-  selectedClassName: _propTypes2.default.string, // private
-  children: _propTypes2.default.node,
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
-  forceRender: _propTypes2.default.bool,
-  id: _propTypes2.default.string, // private
-  selected: _propTypes2.default.bool, // private
-  tabId: _propTypes2.default.string } : {};
+exports.default = TabList;
+TabList.propTypes =  true ? {
+  children: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object])
+} : {};
 
@@ -389,2 +391,74 @@ /***/ }),
 exports.__esModule = true;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.deepMap = deepMap;
+exports.deepForEach = deepForEach;
+
+var _react = __webpack_require__(0);
+
+var _Tab = __webpack_require__(1);
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
+var _TabList = __webpack_require__(4);
+
+var _TabList2 = _interopRequireDefault(_TabList);
+
+var _TabPanel = __webpack_require__(2);
+
+var _TabPanel2 = _interopRequireDefault(_TabPanel);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function isTabChild(child) {
+  return child.type === _Tab2.default || child.type === _TabList2.default || child.type === _TabPanel2.default;
+}
+
+function deepMap(children, callback) {
+  return _react.Children.map(children, function (child) {
+    // null happens when conditionally rendering TabPanel/Tab
+    // see https://github.com/reactjs/react-tabs/issues/37
+    if (child === null) return null;
+
+    if (isTabChild(child)) {
+      return callback(child);
+    }
+
+    if (child.props && child.props.children && _typeof(child.props.children) === 'object') {
+      // Clone the child that has children and map them too
+      return (0, _react.cloneElement)(child, _extends({}, child.props, {
+        children: deepMap(child.props.children, callback)
+      }));
+    }
+
+    return child;
+  });
+}
+
+function deepForEach(children, callback) {
+  return _react.Children.forEach(children, function (child) {
+    // null happens when conditionally rendering TabPanel/Tab
+    // see https://github.com/reactjs/react-tabs/issues/37
+    if (child === null) return;
+
+    if (child.type === _Tab2.default || child.type === _TabPanel2.default) {
+      callback(child);
+    } else if (child.props && child.props.children && _typeof(child.props.children) === 'object') {
+      if (child.type === _TabList2.default) callback(child);
+      deepForEach(child.props.children, callback);
+    }
+  });
+}
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+exports.__esModule = true;
 exports.default = uuid;
@@ -403,3 +477,3 @@ exports.reset = reset;
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -414,15 +488,9 @@
 
-var _react = __webpack_require__(0);
+var _childrenDeepMap = __webpack_require__(6);
 
-var _react2 = _interopRequireDefault(_react);
+var _Tab = __webpack_require__(1);
 
-var _TabList = __webpack_require__(3);
-
-var _TabList2 = _interopRequireDefault(_TabList);
-
-var _Tab = __webpack_require__(2);
-
 var _Tab2 = _interopRequireDefault(_Tab);
 
-var _TabPanel = __webpack_require__(4);
+var _TabPanel = __webpack_require__(2);
 
@@ -434,23 +502,21 @@ var _TabPanel2 = _interopRequireDefault(_TabPanel);
 function getTabsCount(children) {
-  var tabLists = _react2.default.Children.toArray(children).filter(function (x) {
-    return x.type === _TabList2.default;
+  var tabCount = 0;
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
+    if (child.type === _Tab2.default) tabCount++;
   });
 
-  if (tabLists[0] && tabLists[0].props.children) {
-    return _react2.default.Children.count(_react2.default.Children.toArray(tabLists[0].props.children).filter(function (x) {
-      return x.type === _Tab2.default;
-    }));
-  }
-
-  return 0;
+  return tabCount;
 }
 
 function getPanelsCount(children) {
-  return _react2.default.Children.count(_react2.default.Children.toArray(children).filter(function (x) {
-    return x.type === _TabPanel2.default;
-  }));
+  var panelCount = 0;
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
+    if (child.type === _TabPanel2.default) panelCount++;
+  });
+
+  return panelCount;
 }
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -469,15 +535,13 @@
 
-var _react = __webpack_require__(0);
+var _childrenDeepMap = __webpack_require__(6);
 
-var _react2 = _interopRequireDefault(_react);
+var _Tab = __webpack_require__(1);
 
-var _Tab = __webpack_require__(2);
-
 var _Tab2 = _interopRequireDefault(_Tab);
 
-var _TabList = __webpack_require__(3);
+var _TabList = __webpack_require__(4);
 
 var _TabList2 = _interopRequireDefault(_TabList);
 
-var _TabPanel = __webpack_require__(4);
+var _TabPanel = __webpack_require__(2);
 
@@ -492,31 +556,30 @@ var _TabPanel2 = _interopRequireDefault(_TabPanel);
   var panelsCount = 0;
+  var tabListFound = false;
+  var listTabs = [];
   var children = props[propName];
 
-  _react2.default.Children.forEach(children, function (child) {
-    // null happens when conditionally rendering TabPanel/Tab
-    // see https://github.com/reactjs/react-tabs/issues/37
-    if (child === null) {
-      return;
-    }
-
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
     if (child.type === _TabList2.default) {
-      _react2.default.Children.forEach(child.props.children, function (c) {
-        // null happens when conditionally rendering TabPanel/Tab
-        // see https://github.com/reactjs/react-tabs/issues/37
-        if (c === null) {
-          return;
-        }
+      if (child.props && child.props.children && _typeof(child.props.children) === 'object') {
+        (0, _childrenDeepMap.deepForEach)(child.props.children, function (listChild) {
+          return listTabs.push(listChild);
+        });
+      }
 
-        if (c.type === _Tab2.default) {
-          tabsCount++;
-        }
-      });
+      if (tabListFound) {
+        error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");
+      }
+      tabListFound = true;
+    }
+    if (child.type === _Tab2.default) {
+      if (!tabListFound || listTabs.indexOf(child) === -1) {
+        error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component.");
+      }
+      tabsCount++;
     } else if (child.type === _TabPanel2.default) {
       panelsCount++;
-    } else {
-      error = new Error('Expected \'TabList\' or \'TabPanel\' but found \'' + (child.type.displayName || child.type) + '\' in `' + componentName + '`');
     }
   });
 
-  if (tabsCount !== panelsCount) {
+  if (!error && tabsCount !== panelsCount) {
     error = new Error('There should be an equal number of \'Tab\' and \'TabPanel\' in `' + componentName + '`.' + ('Received ' + tabsCount + ' \'Tab\' and ' + panelsCount + ' \'TabPanel\'.'));
@@ -557,3 +620,3 @@ }
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -566,3 +629,3 @@
 
-var _propTypes = __webpack_require__(1);
+var _propTypes = __webpack_require__(3);
 
@@ -575,9 +638,9 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _propTypes3 = __webpack_require__(8);
+var _propTypes3 = __webpack_require__(9);
 
-var _UncontrolledTabs = __webpack_require__(10);
+var _UncontrolledTabs = __webpack_require__(11);
 
 var _UncontrolledTabs2 = _interopRequireDefault(_UncontrolledTabs);
 
-var _count = __webpack_require__(7);
+var _count = __webpack_require__(8);
 
@@ -711,3 +774,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -722,3 +785,3 @@
 
-var _propTypes = __webpack_require__(1);
+var _propTypes = __webpack_require__(3);
 
@@ -735,22 +798,24 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _uuid = __webpack_require__(6);
+var _uuid = __webpack_require__(7);
 
 var _uuid2 = _interopRequireDefault(_uuid);
 
-var _propTypes3 = __webpack_require__(8);
+var _propTypes3 = __webpack_require__(9);
 
-var _Tab = __webpack_require__(2);
+var _Tab = __webpack_require__(1);
 
 var _Tab2 = _interopRequireDefault(_Tab);
 
-var _TabList = __webpack_require__(3);
+var _TabList = __webpack_require__(4);
 
 var _TabList2 = _interopRequireDefault(_TabList);
 
-var _TabPanel = __webpack_require__(4);
+var _TabPanel = __webpack_require__(2);
 
 var _TabPanel2 = _interopRequireDefault(_TabPanel);
 
-var _count = __webpack_require__(7);
+var _count = __webpack_require__(8);
 
+var _childrenDeepMap = __webpack_require__(6);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -921,9 +986,3 @@
     // Map children to dynamically setup refs
-    return _react2.default.Children.map(children, function (child) {
-      // null happens when conditionally rendering TabPanel/Tab
-      // see https://github.com/reactjs/react-tabs/issues/37
-      if (child === null) {
-        return null;
-      }
-
+    return (0, _childrenDeepMap.deepMap)(children, function (child) {
       var result = child;
@@ -948,13 +1007,3 @@
         result = (0, _react.cloneElement)(child, {
-          children: _react2.default.Children.map(child.props.children, function (tab) {
-            // null happens when conditionally rendering TabPanel/Tab
-            // see https://github.com/reactjs/react-tabs/issues/37
-            if (tab === null) {
-              return null;
-            }
-
-            // Exit early if this is not a tab. That way we can have arbitrary
-            // elements anywhere inside <TabList>
-            if (tab.type !== _Tab2.default) return tab;
-
+          children: (0, _childrenDeepMap.deepMap)(child.props.children, function (tab) {
             var key = 'tabs-' + listIndex;
@@ -1074,3 +1123,3 @@ var selected = selectedIndex === listIndex;
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1084,19 +1133,19 @@
 
-var _Tabs = __webpack_require__(9);
+var _Tabs = __webpack_require__(10);
 
 var _Tabs2 = _interopRequireDefault(_Tabs);
 
-var _TabList = __webpack_require__(3);
+var _TabList = __webpack_require__(4);
 
 var _TabList2 = _interopRequireDefault(_TabList);
 
-var _Tab = __webpack_require__(2);
+var _Tab = __webpack_require__(1);
 
 var _Tab2 = _interopRequireDefault(_Tab);
 
-var _TabPanel = __webpack_require__(4);
+var _TabPanel = __webpack_require__(2);
 
 var _TabPanel2 = _interopRequireDefault(_TabPanel);
 
-var _uuid = __webpack_require__(6);
+var _uuid = __webpack_require__(7);
 
@@ -1103,0 +1152,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/react-tabs.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["react","classnames"],t):"object"==typeof exports?exports.ReactTabs=t(require("react"),require("classnames")):e.ReactTabs=t(e.React,e.classNames)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=n(0),u=r(c),f=n(1),d=r(f),p=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.componentDidMount=function(){this.checkFocus()},t.prototype.componentDidUpdate=function(){this.checkFocus()},t.prototype.checkFocus=function(){this.props.selected&&this.props.focus&&this.node.focus()},t.prototype.render=function(){var e,t=this,n=this.props,r=n.children,a=n.className,s=n.disabled,l=n.disabledClassName,c=(n.focus,n.id),f=n.panelId,p=n.selected,b=n.selectedClassName,h=n.tabRef,y=o(n,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabRef"]);return u.default.createElement("li",i({},y,{className:(0,d.default)(a,(e={},e[b]=p,e[l]=s,e)),ref:function(e){t.node=e,h&&h(e)},role:"tab",id:c,"aria-selected":p?"true":"false","aria-disabled":s?"true":"false","aria-controls":f,tabIndex:p?"0":null}),r)},t}(c.Component);p.defaultProps={className:"react-tabs__tab",disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},t.default=p,p.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=n(0),u=r(c),f=n(1),d=r(f),p=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.className,r=o(e,["children","className"]);return u.default.createElement("ul",i({},r,{className:(0,d.default)(n),role:"tablist"}),t)},t}(c.Component);p.defaultProps={className:"react-tabs__tab-list"},t.default=p,p.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=n(0),u=r(c),f=n(1),d=r(f),p=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.render=function(){var e,t=this.props,n=t.children,r=t.className,a=t.forceRender,s=t.id,l=t.selected,c=t.selectedClassName,f=t.tabId,p=o(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return u.default.createElement("div",i({},p,{className:(0,d.default)(r,(e={},e[c]=l,e)),role:"tabpanel",id:s,"aria-labelledby":f}),a||l?n:null)},t}(c.Component);p.defaultProps={className:"react-tabs__tab-panel",forceRender:!1,selectedClassName:"react-tabs__tab-panel--selected",style:{}},t.default=p,p.propTypes={}},function(e,t,n){"use strict";function r(){return"react-tabs-"+a++}function o(){a=0}t.__esModule=!0,t.default=r,t.reset=o;var a=0},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=l.default.Children.toArray(e).filter(function(e){return e.type===c.default});return t[0]&&t[0].props.children?l.default.Children.count(l.default.Children.toArray(t[0].props.children).filter(function(e){return e.type===f.default})):0}function a(e){return l.default.Children.count(l.default.Children.toArray(e).filter(function(e){return e.type===p.default}))}t.__esModule=!0,t.getTabsCount=o,t.getPanelsCount=a;var s=n(0),l=r(s),i=n(3),c=r(i),u=n(2),f=r(u),d=n(4),p=r(d)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var i=n(0),c=r(i),u=n(8),f=r(u),d=n(6),p=function(e){function t(n){a(this,t);var r=s(this,e.call(this,n));return r.handleSelected=function(e,n,o){if("function"!=typeof r.props.onSelect||!1!==r.props.onSelect(e,n,o)){var a={focus:"keydown"===o.type};t.inUncontrolledMode(r.props)&&(a.selectedIndex=e),r.setState(a)}},r.state=t.copyPropsToState(r.props,{},r.props.defaultFocus),r}return l(t,e),t.prototype.componentWillReceiveProps=function(e){this.setState(function(n){return t.copyPropsToState(e,n)})},t.inUncontrolledMode=function(e){return null===e.selectedIndex},t.copyPropsToState=function(e,n){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o={focus:r};if(t.inUncontrolledMode(e)){var a=(0,d.getTabsCount)(e.children)-1,s=null;s=null!=n.selectedIndex?Math.min(n.selectedIndex,a):e.defaultIndex||0,o.selectedIndex=s}return o},t.prototype.render=function(){var e=this.props,t=e.children,n=(e.defaultIndex,e.defaultFocus,o(e,["children","defaultIndex","defaultFocus"]));return n.focus=this.state.focus,n.onSelect=this.handleSelected,null!=this.state.selectedIndex&&(n.selectedIndex=this.state.selectedIndex),c.default.createElement(f.default,n,t)},t}(i.Component);p.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null},t.default=p,p.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e){return"LI"===e.nodeName&&"tab"===e.getAttribute("role")}function c(e){return"true"===e.getAttribute("aria-disabled")}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f=n(0),d=r(f),p=n(1),b=r(p),h=n(5),y=r(h),m=n(2),v=r(m),C=n(3),_=r(C),T=n(4),w=r(T),O=n(6),g=!("undefined"==typeof window||!window.document||!window.document.activeElement),N=function(e){function t(){var n,r,o;a(this,t);for(var l=arguments.length,u=Array(l),f=0;f<l;f++)u[f]=arguments[f];return n=r=s(this,e.call.apply(e,[this].concat(u))),r.tabNodes=[],r.handleKeyDown=function(e){if(r.isTabFromContainer(e.target)){var t=r.props.selectedIndex,n=!1;37===e.keyCode||38===e.keyCode?(t=r.getPrevTab(t),n=!0):39!==e.keyCode&&40!==e.keyCode||(t=r.getNextTab(t),n=!0),n&&e.preventDefault(),r.setSelected(t,e)}},r.handleClick=function(e){var t=e.target;do{if(r.isTabFromContainer(t)){if(c(t))return;var n=[].slice.call(t.parentNode.children).filter(i).indexOf(t);return void r.setSelected(n,e)}}while(null!==(t=t.parentNode))},o=n,s(r,o)}return l(t,e),t.prototype.setSelected=function(e,t){e!==this.props.selectedIndex&&(e<0||e>=this.getTabsCount()||this.props.onSelect(e,this.props.selectedIndex,t))},t.prototype.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!c(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!c(this.getTab(r)))return r;return e},t.prototype.getPrevTab=function(e){for(var t=e;t--;)if(!c(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!c(this.getTab(t)))return t;return e},t.prototype.getTabsCount=function(){return(0,O.getTabsCount)(this.props.children)},t.prototype.getPanelsCount=function(){return(0,O.getPanelsCount)(this.props.children)},t.prototype.getTab=function(e){return this.tabNodes["tabs-"+e]},t.prototype.getChildren=function(){var e=this,t=0,n=this.props,r=n.children,o=n.disabledTabClassName,a=n.focus,s=n.forceRenderTabPanel,l=n.selectedIndex,i=n.selectedTabClassName,c=n.selectedTabPanelClassName;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var u=this.tabIds.length-this.getTabsCount();u++<0;)this.tabIds.push((0,y.default)()),this.panelIds.push((0,y.default)());return d.default.Children.map(r,function(n){if(null===n)return null;var r=n;if(n.type===_.default){var u=0,p=!1;g&&(p=d.default.Children.toArray(n.props.children).filter(function(e){return e.type===v.default}).some(function(t,n){return document.activeElement===e.getTab(n)})),r=(0,f.cloneElement)(n,{children:d.default.Children.map(n.props.children,function(t){if(null===t)return null;if(t.type!==v.default)return t;var n="tabs-"+u,r=l===u,s={tabRef:function(t){e.tabNodes[n]=t},id:e.tabIds[u],panelId:e.panelIds[u],selected:r,focus:r&&(a||p)};return i&&(s.selectedClassName=i),o&&(s.disabledClassName=o),u++,(0,f.cloneElement)(t,s)})})}else if(n.type===w.default){var b={id:e.panelIds[t],tabId:e.tabIds[t],selected:l===t};s&&(b.forceRender=s),c&&(b.selectedClassName=c),t++,r=(0,f.cloneElement)(n,b)}return r})},t.prototype.isTabFromContainer=function(e){if(!i(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},t.prototype.render=function(){var e=this,t=this.props,n=(t.children,t.className),r=(t.disabledTabClassName,t.focus,t.forceRenderTabPanel,t.onSelect,t.selectedIndex,t.selectedTabClassName,t.selectedTabPanelClassName,o(t,["children","className","disabledTabClassName","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName"]));return d.default.createElement("div",u({},r,{className:(0,b.default)(n),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(t){e.node=t},"data-tabs":!0}),this.getChildren())},t}(f.Component);N.defaultProps={className:"react-tabs",focus:!1},t.default=N,N.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.resetIdCounter=t.Tabs=t.TabPanel=t.TabList=t.Tab=void 0;var o=n(7),a=r(o),s=n(3),l=r(s),i=n(2),c=r(i),u=n(4),f=r(u),d=n(5);t.Tab=c.default,t.TabList=l.default,t.TabPanel=f.default,t.Tabs=a.default,t.resetIdCounter=d.reset}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["react","classnames"],t):"object"==typeof exports?exports.ReactTabs=t(require("react"),require("classnames")):e.ReactTabs=t(e.React,e.classNames)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=10)}([function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=n(0),i=r(u),f=n(3),p=r(f),d=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.componentDidMount=function(){this.checkFocus()},t.prototype.componentDidUpdate=function(){this.checkFocus()},t.prototype.checkFocus=function(){this.props.selected&&this.props.focus&&this.node.focus()},t.prototype.render=function(){var e,t=this,n=this.props,r=n.children,a=n.className,s=n.disabled,l=n.disabledClassName,u=(n.focus,n.id),f=n.panelId,d=n.selected,b=n.selectedClassName,h=n.tabRef,y=o(n,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabRef"]);return i.default.createElement("li",c({},y,{className:(0,p.default)(a,(e={},e[b]=d,e[l]=s,e)),ref:function(e){t.node=e,h&&h(e)},role:"tab",id:u,"aria-selected":d?"true":"false","aria-disabled":s?"true":"false","aria-controls":f,tabIndex:d?"0":null}),r)},t}(u.Component);d.defaultProps={className:"react-tabs__tab",disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},t.default=d,d.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=n(0),i=r(u),f=n(3),p=r(f),d=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.render=function(){var e,t=this.props,n=t.children,r=t.className,a=t.forceRender,s=t.id,l=t.selected,u=t.selectedClassName,f=t.tabId,d=o(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return i.default.createElement("div",c({},d,{className:(0,p.default)(r,(e={},e[u]=l,e)),role:"tabpanel",id:s,"aria-labelledby":f}),a||l?n:null)},t}(u.Component);d.defaultProps={className:"react-tabs__tab-panel",forceRender:!1,selectedClassName:"react-tabs__tab-panel--selected",style:{}},t.default=d,d.propTypes={}},function(e,n){e.exports=t},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=n(0),i=r(u),f=n(3),p=r(f),d=function(e){function t(){return a(this,t),s(this,e.apply(this,arguments))}return l(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.className,r=o(e,["children","className"]);return i.default.createElement("ul",c({},r,{className:(0,p.default)(n),role:"tablist"}),t)},t}(u.Component);d.defaultProps={className:"react-tabs__tab-list"},t.default=d,d.propTypes={}},function(e,t,n){"use strict";function r(){return"react-tabs-"+a++}function o(){a=0}t.__esModule=!0,t.default=r,t.reset=o;var a=0},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){return e.type===f.default||e.type===d.default||e.type===h.default}function a(e,t){return u.Children.map(e,function(e){return null===e?null:o(e)?t(e):e.props&&e.props.children&&"object"===c(e.props.children)?(0,u.cloneElement)(e,l({},e.props,{children:a(e.props.children,t)})):e})}function s(e,t){return u.Children.forEach(e,function(e){null!==e&&(e.type===f.default||e.type===h.default?t(e):e.props&&e.props.children&&"object"===c(e.props.children)&&(e.type===d.default&&t(e),s(e.props.children,t)))})}t.__esModule=!0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.deepMap=a,t.deepForEach=s;var u=n(0),i=n(1),f=r(i),p=n(4),d=r(p),b=n(2),h=r(b)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=0;return(0,s.deepForEach)(e,function(e){e.type===c.default&&t++}),t}function a(e){var t=0;return(0,s.deepForEach)(e,function(e){e.type===i.default&&t++}),t}t.__esModule=!0,t.getTabsCount=o,t.getPanelsCount=a;var s=n(6),l=n(1),c=r(l),u=n(2),i=r(u)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var c=n(0),u=r(c),i=n(9),f=r(i),p=n(7),d=function(e){function t(n){a(this,t);var r=s(this,e.call(this,n));return r.handleSelected=function(e,n,o){if("function"!=typeof r.props.onSelect||!1!==r.props.onSelect(e,n,o)){var a={focus:"keydown"===o.type};t.inUncontrolledMode(r.props)&&(a.selectedIndex=e),r.setState(a)}},r.state=t.copyPropsToState(r.props,{},r.props.defaultFocus),r}return l(t,e),t.prototype.componentWillReceiveProps=function(e){this.setState(function(n){return t.copyPropsToState(e,n)})},t.inUncontrolledMode=function(e){return null===e.selectedIndex},t.copyPropsToState=function(e,n){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o={focus:r};if(t.inUncontrolledMode(e)){var a=(0,p.getTabsCount)(e.children)-1,s=null;s=null!=n.selectedIndex?Math.min(n.selectedIndex,a):e.defaultIndex||0,o.selectedIndex=s}return o},t.prototype.render=function(){var e=this.props,t=e.children,n=(e.defaultIndex,e.defaultFocus,o(e,["children","defaultIndex","defaultFocus"]));return n.focus=this.state.focus,n.onSelect=this.handleSelected,null!=this.state.selectedIndex&&(n.selectedIndex=this.state.selectedIndex),u.default.createElement(f.default,n,t)},t}(c.Component);d.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null},t.default=d,d.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){return"LI"===e.nodeName&&"tab"===e.getAttribute("role")}function u(e){return"true"===e.getAttribute("aria-disabled")}t.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f=n(0),p=r(f),d=n(3),b=r(d),h=n(5),y=r(h),m=n(1),v=r(m),_=n(4),T=r(_),C=n(2),O=r(C),w=n(7),g=n(6),N=!("undefined"==typeof window||!window.document||!window.document.activeElement),P=function(e){function t(){var n,r,o;a(this,t);for(var l=arguments.length,i=Array(l),f=0;f<l;f++)i[f]=arguments[f];return n=r=s(this,e.call.apply(e,[this].concat(i))),r.tabNodes=[],r.handleKeyDown=function(e){if(r.isTabFromContainer(e.target)){var t=r.props.selectedIndex,n=!1;37===e.keyCode||38===e.keyCode?(t=r.getPrevTab(t),n=!0):39!==e.keyCode&&40!==e.keyCode||(t=r.getNextTab(t),n=!0),n&&e.preventDefault(),r.setSelected(t,e)}},r.handleClick=function(e){var t=e.target;do{if(r.isTabFromContainer(t)){if(u(t))return;var n=[].slice.call(t.parentNode.children).filter(c).indexOf(t);return void r.setSelected(n,e)}}while(null!==(t=t.parentNode))},o=n,s(r,o)}return l(t,e),t.prototype.setSelected=function(e,t){e!==this.props.selectedIndex&&(e<0||e>=this.getTabsCount()||this.props.onSelect(e,this.props.selectedIndex,t))},t.prototype.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!u(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!u(this.getTab(r)))return r;return e},t.prototype.getPrevTab=function(e){for(var t=e;t--;)if(!u(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!u(this.getTab(t)))return t;return e},t.prototype.getTabsCount=function(){return(0,w.getTabsCount)(this.props.children)},t.prototype.getPanelsCount=function(){return(0,w.getPanelsCount)(this.props.children)},t.prototype.getTab=function(e){return this.tabNodes["tabs-"+e]},t.prototype.getChildren=function(){var e=this,t=0,n=this.props,r=n.children,o=n.disabledTabClassName,a=n.focus,s=n.forceRenderTabPanel,l=n.selectedIndex,c=n.selectedTabClassName,u=n.selectedTabPanelClassName;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var i=this.tabIds.length-this.getTabsCount();i++<0;)this.tabIds.push((0,y.default)()),this.panelIds.push((0,y.default)());return(0,g.deepMap)(r,function(n){var r=n;if(n.type===T.default){var i=0,d=!1;N&&(d=p.default.Children.toArray(n.props.children).filter(function(e){return e.type===v.default}).some(function(t,n){return document.activeElement===e.getTab(n)})),r=(0,f.cloneElement)(n,{children:(0,g.deepMap)(n.props.children,function(t){var n="tabs-"+i,r=l===i,s={tabRef:function(t){e.tabNodes[n]=t},id:e.tabIds[i],panelId:e.panelIds[i],selected:r,focus:r&&(a||d)};return c&&(s.selectedClassName=c),o&&(s.disabledClassName=o),i++,(0,f.cloneElement)(t,s)})})}else if(n.type===O.default){var b={id:e.panelIds[t],tabId:e.tabIds[t],selected:l===t};s&&(b.forceRender=s),u&&(b.selectedClassName=u),t++,r=(0,f.cloneElement)(n,b)}return r})},t.prototype.isTabFromContainer=function(e){if(!c(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},t.prototype.render=function(){var e=this,t=this.props,n=(t.children,t.className),r=(t.disabledTabClassName,t.focus,t.forceRenderTabPanel,t.onSelect,t.selectedIndex,t.selectedTabClassName,t.selectedTabPanelClassName,o(t,["children","className","disabledTabClassName","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName"]));return p.default.createElement("div",i({},r,{className:(0,b.default)(n),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(t){e.node=t},"data-tabs":!0}),this.getChildren())},t}(f.Component);P.defaultProps={className:"react-tabs",focus:!1},t.default=P,P.propTypes={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.resetIdCounter=t.Tabs=t.TabPanel=t.TabList=t.Tab=void 0;var o=n(8),a=r(o),s=n(4),l=r(s),c=n(1),u=r(c),i=n(2),f=r(i),p=n(5);t.Tab=u.default,t.TabList=l.default,t.TabPanel=f.default,t.Tabs=a.default,t.resetIdCounter=p.reset}])});
 //# sourceMappingURL=react-tabs.min.js.map

lib/components/Tab.js

@@ -107,3 +107,3 @@ 'use strict';
   disabled: _propTypes2.default.bool,
-  disabledClassName: _propTypes2.default.string, // private
+  disabledClassName: _propTypes2.default.string,
   focus: _propTypes2.default.bool, // private
@@ -113,3 +113,4 @@ id: _propTypes2.default.string, // private
   selected: _propTypes2.default.bool, // private
-  selectedClassName: _propTypes2.default.string, // private
-  tabRef: _propTypes2.default.func } : {};
+  selectedClassName: _propTypes2.default.string,
+  tabRef: _propTypes2.default.func // private
+} : {};

lib/components/TabPanel.js

@@ -76,3 +76,2 @@ 'use strict';
 TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectedClassName: _propTypes2.default.string, // private
   children: _propTypes2.default.node,
@@ -83,2 +82,4 @@ className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
   selected: _propTypes2.default.bool, // private
-  tabId: _propTypes2.default.string } : {};
+  selectedClassName: _propTypes2.default.string,
+  tabId: _propTypes2.default.string // private
+} : {};

lib/components/UncontrolledTabs.js

@@ -39,2 +39,4 @@ 'use strict';
 
+var _childrenDeepMap = require('../helpers/childrenDeepMap');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -205,9 +207,3 @@
     // Map children to dynamically setup refs
-    return _react2.default.Children.map(children, function (child) {
-      // null happens when conditionally rendering TabPanel/Tab
-      // see https://github.com/reactjs/react-tabs/issues/37
-      if (child === null) {
-        return null;
-      }
-
+    return (0, _childrenDeepMap.deepMap)(children, function (child) {
       var result = child;
@@ -232,13 +228,3 @@
         result = (0, _react.cloneElement)(child, {
-          children: _react2.default.Children.map(child.props.children, function (tab) {
-            // null happens when conditionally rendering TabPanel/Tab
-            // see https://github.com/reactjs/react-tabs/issues/37
-            if (tab === null) {
-              return null;
-            }
-
-            // Exit early if this is not a tab. That way we can have arbitrary
-            // elements anywhere inside <TabList>
-            if (tab.type !== _Tab2.default) return tab;
-
+          children: (0, _childrenDeepMap.deepMap)(child.props.children, function (tab) {
             var key = 'tabs-' + listIndex;
@@ -245,0 +231,0 @@ var selected = selectedIndex === listIndex;

lib/helpers/count.js

@@ -7,10 +7,4 @@ 'use strict';
 
-var _react = require('react');
+var _childrenDeepMap = require('../helpers/childrenDeepMap');
 
-var _react2 = _interopRequireDefault(_react);
-
-var _TabList = require('../components/TabList');
-
-var _TabList2 = _interopRequireDefault(_TabList);
-
 var _Tab = require('../components/Tab');
@@ -27,19 +21,17 @@
 function getTabsCount(children) {
-  var tabLists = _react2.default.Children.toArray(children).filter(function (x) {
-    return x.type === _TabList2.default;
+  var tabCount = 0;
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
+    if (child.type === _Tab2.default) tabCount++;
   });
 
-  if (tabLists[0] && tabLists[0].props.children) {
-    return _react2.default.Children.count(_react2.default.Children.toArray(tabLists[0].props.children).filter(function (x) {
-      return x.type === _Tab2.default;
-    }));
-  }
-
-  return 0;
+  return tabCount;
 }
 
 function getPanelsCount(children) {
-  return _react2.default.Children.count(_react2.default.Children.toArray(children).filter(function (x) {
-    return x.type === _TabPanel2.default;
-  }));
+  var panelCount = 0;
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
+    if (child.type === _TabPanel2.default) panelCount++;
+  });
+
+  return panelCount;
 }

lib/helpers/propTypes.js

@@ -11,6 +11,4 @@ 'use strict';
 
-var _react = require('react');
+var _childrenDeepMap = require('../helpers/childrenDeepMap');
 
-var _react2 = _interopRequireDefault(_react);
-
 var _Tab = require('../components/Tab');
@@ -34,31 +32,30 @@
   var panelsCount = 0;
+  var tabListFound = false;
+  var listTabs = [];
   var children = props[propName];
 
-  _react2.default.Children.forEach(children, function (child) {
-    // null happens when conditionally rendering TabPanel/Tab
-    // see https://github.com/reactjs/react-tabs/issues/37
-    if (child === null) {
-      return;
-    }
-
+  (0, _childrenDeepMap.deepForEach)(children, function (child) {
     if (child.type === _TabList2.default) {
-      _react2.default.Children.forEach(child.props.children, function (c) {
-        // null happens when conditionally rendering TabPanel/Tab
-        // see https://github.com/reactjs/react-tabs/issues/37
-        if (c === null) {
-          return;
-        }
+      if (child.props && child.props.children && _typeof(child.props.children) === 'object') {
+        (0, _childrenDeepMap.deepForEach)(child.props.children, function (listChild) {
+          return listTabs.push(listChild);
+        });
+      }
 
-        if (c.type === _Tab2.default) {
-          tabsCount++;
-        }
-      });
+      if (tabListFound) {
+        error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");
+      }
+      tabListFound = true;
+    }
+    if (child.type === _Tab2.default) {
+      if (!tabListFound || listTabs.indexOf(child) === -1) {
+        error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component.");
+      }
+      tabsCount++;
     } else if (child.type === _TabPanel2.default) {
       panelsCount++;
-    } else {
-      error = new Error('Expected \'TabList\' or \'TabPanel\' but found \'' + (child.type.displayName || child.type) + '\' in `' + componentName + '`');
     }
   });
 
-  if (tabsCount !== panelsCount) {
+  if (!error && tabsCount !== panelsCount) {
     error = new Error('There should be an equal number of \'Tab\' and \'TabPanel\' in `' + componentName + '`.' + ('Received ' + tabsCount + ' \'Tab\' and ' + panelsCount + ' \'TabPanel\'.'));
@@ -65,0 +62,0 @@ }

package.json

 {
   "name": "react-tabs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React tabs component",
@@ -11,9 +11,9 @@ "main": "lib/index.js",
     "build:umd:min": "cross-env MINIFY=1 webpack --config webpack.build.js",
-    "build": "npm run clean && npm run build:commonjs",
-    "bundle": "mkdir -p dist && npm run build:umd && npm run build:umd:min",
+    "build": "yarn run clean && yarn run build:commonjs",
+    "bundle": "mkdir -p dist && yarn run build:umd && yarn run build:umd:min",
     "format": "prettier --write --single-quote --print-width 100 --trailing-comma all \"src/**/*.js\"",
     "lint": "eslint src",
     "precommit": "lint-staged",
-    "preversion": "npm run lint && npm test && npm run build && npm run bundle && git add dist/ && git diff --quiet --exit-code --cached || git commit -n -m 'publish: Distribution'",
-    "prepublish": "npm run build",
+    "preversion": "yarn run lint && yarn test && yarn run build && yarn run bundle && git add dist/ && git diff --quiet --exit-code --cached || git commit -n -m 'publish: Distribution'",
+    "prepublish": "yarn run build",
     "test": "jest",
@@ -57,10 +57,10 @@ "start": "webpack-dev-server --inline --content-base examples/"
     "babel-preset-react": "^6.5.0",
-    "cross-env": "^4.0.0",
+    "cross-env": "^5.0.0",
     "css-loader": "^0.28.0",
     "enzyme": "^2.3.0",
     "eslint": "^3.5.0",
-    "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.2.1",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.0.1",
     "husky": "^0.13.3",
@@ -76,3 +76,3 @@ "jest-cli": "^20.0.0",
     "rimraf": "^2.5.2",
-    "style-loader": "^0.17.0",
+    "style-loader": "^0.18.1",
     "uglifyjs-webpack-plugin": "^0.4.2",
@@ -79,0 +79,0 @@ "webpack": "^2.3.3",

README.md

@@ -5,3 +5,3 @@ # react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs) [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs)
 
-> Supports React 0.14 and 15
+> Supports React 0.14.9+ and 15.3+
 
@@ -13,3 +13,3 @@ > This is the documentation for 1.0 if you are looking for the documentation for version 0.8 please got to this [page](https://github.com/reactjs/react-tabs/blob/0.8/README.md)
 ```bash
-$ yarn add react-tabs
+yarn add react-tabs
 ```
@@ -35,6 +35,4 @@
 
-## Usage
+## Basic Example
 
-### Basic Example
-
 ```js
@@ -60,4 +58,19 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
-### Components
+## API
 
+### resetIdCounter(): void
+
+Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels. 
+
+You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every render so that the ids that get generated on the server match the ids generated in the browser.
+
+```js
+import { resetIdCounter } from 'react-tabs';
+
+resetIdCounter();
+ReactDOMServer.renderToString(...);
+```
+
+## Components
+
 react-tabs consists of 4 components which all need to be used together.
@@ -159,8 +172,2 @@
 
-#### disabledClassName: `string`
-
-> default: `"react-tabs__tab--disabled"`
-
-Provide a custom class name for disabled tabs.
-
 #### className: `string | Array<string> | { [string]: boolean }`
@@ -174,2 +181,16 @@
 
+#### disabled: `boolean`
+
+> default: `false`
+
+Disable this tab which will make it not do anything when clicked. Also a disabled class name will be added (see `disabledClassName`)
+
+#### disabledClassName: `string`
+
+> default: `"react-tabs__tab--disabled"`
+
+Provide a custom class name for disabled tabs.
+
+> This option can also be set for all `<Tab />` components with the prop `disabledTabClassName` on `<Tabs />`.
+
 #### selectedClassName: `string`
@@ -181,5 +202,7 @@
 
+> This option can also be set for all `<Tab />` components with the prop `selectedTabClassName` on `<Tabs />`.
+
 ### &lt;TabPanel /&gt;
 
-If you specify additional props on the `<TabPanel />` component they will be forwarded to the rendered `<dev />`.
+If you specify additional props on the `<TabPanel />` component they will be forwarded to the rendered `<div />`.
 
@@ -208,2 +231,4 @@ #### className: `string | Array<string> | { [string]: boolean }`
 
+> This option can also be set for all `<TabPanel />` components with the prop `selectedTabPanelClassName` on `<Tabs />`.
+
 ## Controlled vs Uncontrolled mode
@@ -236,3 +261,3 @@
 
-This mode als enforces you to set a handler for `onSelect`. `defaultIndex` does not have any effect and will therefore throw an error.
+This mode also enforces you to set a handler for `onSelect`. `defaultIndex` does not have any effect and will therefore throw an error.
 
@@ -239,0 +264,0 @@ ```js

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

238887

increased by4.81%

Number of package files

21

increased by5%

Lines of code

1692

increased by4.12%

Number of lines in readme file

314

increased by8.65%

No dependency changes