react-tabs - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -5,2 +5,21 @@ # Change Log
 
+<a name="2.1.0"></a>
+# [2.1.0](https://github.com/reactjs/react-tabs/compare/v2.0.0...v2.1.0) (2017-10-05)
+
+
+### Bug Fixes
+
+* **tabs:** Correctly handle children of type string ([#211](https://github.com/reactjs/react-tabs/issues/211)) ([6fd4002](https://github.com/reactjs/react-tabs/commit/6fd4002))
+* **umd:** Fix the umd builds by switching to rollup ([#212](https://github.com/reactjs/react-tabs/issues/212)) ([46c1a60](https://github.com/reactjs/react-tabs/commit/46c1a60))
+
+
+### Features
+
+* **dependencies:** Support react 16 ([94447e9](https://github.com/reactjs/react-tabs/commit/94447e9))
+* **tablist:** Enable overwriting tabIndex on <Tab> and allow tabbing among <Tab>s by using tab key and enter/space. ([00a8401](https://github.com/reactjs/react-tabs/commit/00a8401))
+* **tabs:** Publish also as ES2015 modules ([41415ab](https://github.com/reactjs/react-tabs/commit/41415ab))
+* **Tabs:** Add `domRef` prop for getting the ref to the tabs DOM node ([#213](https://github.com/reactjs/react-tabs/issues/213)) ([e989491](https://github.com/reactjs/react-tabs/commit/e989491))
+
+
+
 <a name="2.0.0"></a>
@@ -7,0 +26,0 @@ # [2.0.0](https://github.com/reactjs/react-tabs/compare/v1.1.0...v2.0.0) (2017-09-05)

lib/components/Tab.js

@@ -1,49 +0,44 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require('react');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var DEFAULT_CLASS = 'react-tabs__tab';
 
-var Tab = function (_Component) {
-  _inherits(Tab, _Component);
+var Tab =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Tab, _Component);
 
   function Tab() {
-    _classCallCheck(this, Tab);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    return _Component.apply(this, arguments) || this;
   }
 
-  Tab.prototype.componentDidMount = function componentDidMount() {
+  var _proto = Tab.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
     this.checkFocus();
   };
 
-  Tab.prototype.componentDidUpdate = function componentDidUpdate() {
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.checkFocus();
   };
 
-  Tab.prototype.checkFocus = function checkFocus() {
+  _proto.checkFocus = function checkFocus() {
     if (this.props.selected && this.props.focus) {
@@ -54,5 +49,5 @@ this.node.focus();
 
-  Tab.prototype.render = function render() {
+  _proto.render = function render() {
     var _cx,
-        _this2 = this;
+        _this = this;
 
@@ -69,22 +64,19 @@ var _props = this.props,
         selectedClassName = _props.selectedClassName,
+        tabIndex = _props.tabIndex,
         tabRef = _props.tabRef,
-        attributes = _objectWithoutProperties(_props, ['children', 'className', 'disabled', 'disabledClassName', 'focus', 'id', 'panelId', 'selected', 'selectedClassName', 'tabRef']);
+        attributes = _objectWithoutProperties(_props, ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"]);
 
-    return _react2.default.createElement(
-      'li',
-      _extends({}, attributes, {
-        className: (0, _classnames2.default)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
-        ref: function ref(node) {
-          _this2.node = node;
-          if (tabRef) tabRef(node);
-        },
-        role: 'tab',
-        id: id,
-        'aria-selected': selected ? 'true' : 'false',
-        'aria-disabled': disabled ? 'true' : 'false',
-        'aria-controls': panelId,
-        tabIndex: selected ? '0' : null
-      }),
-      children
-    );
+    return _react.default.createElement("li", _extends({}, attributes, {
+      className: (0, _classnames.default)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
+      ref: function ref(node) {
+        _this.node = node;
+        if (tabRef) tabRef(node);
+      },
+      role: "tab",
+      id: id,
+      "aria-selected": selected ? 'true' : 'false',
+      "aria-disabled": disabled ? 'true' : 'false',
+      "aria-controls": panelId,
+      tabIndex: tabIndex || (selected ? '0' : null)
+    }), children);
   };
@@ -95,5 +87,6 @@
 
+exports.default = Tab;
 Tab.defaultProps = {
   className: DEFAULT_CLASS,
-  disabledClassName: DEFAULT_CLASS + '--disabled',
+  disabledClassName: DEFAULT_CLASS + "--disabled",
   focus: false,
@@ -103,19 +96,22 @@ id: null,
   selected: false,
-  selectedClassName: DEFAULT_CLASS + '--selected'
+  selectedClassName: DEFAULT_CLASS + "--selected"
 };
-exports.default = Tab;
 Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.string]),
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
-  disabled: _propTypes2.default.bool,
-  disabledClassName: _propTypes2.default.string,
-  focus: _propTypes2.default.bool, // private
-  id: _propTypes2.default.string, // private
-  panelId: _propTypes2.default.string, // private
-  selected: _propTypes2.default.bool, // private
-  selectedClassName: _propTypes2.default.string,
-  tabRef: _propTypes2.default.func // private
+  children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.string]),
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
+  disabled: _propTypes.default.bool,
+  tabIndex: _propTypes.default.string,
+  disabledClassName: _propTypes.default.string,
+  focus: _propTypes.default.bool,
+  // private
+  id: _propTypes.default.string,
+  // private
+  panelId: _propTypes.default.string,
+  // private
+  selected: _propTypes.default.bool,
+  // private
+  selectedClassName: _propTypes.default.string,
+  tabRef: _propTypes.default.func // private
+
 } : {};
-
-
 Tab.tabsRole = 'Tab';

lib/components/TabList.js

@@ -1,49 +0,43 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require('react');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var TabList =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(TabList, _Component);
 
-var TabList = function (_Component) {
-  _inherits(TabList, _Component);
-
   function TabList() {
-    _classCallCheck(this, TabList);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    return _Component.apply(this, arguments) || this;
   }
 
-  TabList.prototype.render = function render() {
+  var _proto = TabList.prototype;
+
+  _proto.render = function render() {
     var _props = this.props,
         children = _props.children,
         className = _props.className,
-        attributes = _objectWithoutProperties(_props, ['children', 'className']);
+        attributes = _objectWithoutProperties(_props, ["children", "className"]);
 
-    return _react2.default.createElement(
-      'ul',
-      _extends({}, attributes, { className: (0, _classnames2.default)(className), role: 'tablist' }),
-      children
-    );
+    return _react.default.createElement("ul", _extends({}, attributes, {
+      className: (0, _classnames.default)(className),
+      role: "tablist"
+    }), children);
   };
@@ -54,12 +48,10 @@
 
+exports.default = TabList;
 TabList.defaultProps = {
   className: 'react-tabs__tab-list'
 };
-exports.default = TabList;
 TabList.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object])
+  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object])
 } : {};
-
-
 TabList.tabsRole = 'TabList';

lib/components/TabPanel.js

@@ -1,41 +0,36 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require('react');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var DEFAULT_CLASS = 'react-tabs__tab-panel';
 
-var TabPanel = function (_Component) {
-  _inherits(TabPanel, _Component);
+var TabPanel =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(TabPanel, _Component);
 
   function TabPanel() {
-    _classCallCheck(this, TabPanel);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    return _Component.apply(this, arguments) || this;
   }
 
-  TabPanel.prototype.render = function render() {
+  var _proto = TabPanel.prototype;
+
+  _proto.render = function render() {
     var _cx;
@@ -51,14 +46,10 @@
         tabId = _props.tabId,
-        attributes = _objectWithoutProperties(_props, ['children', 'className', 'forceRender', 'id', 'selected', 'selectedClassName', 'tabId']);
+        attributes = _objectWithoutProperties(_props, ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"]);
 
-    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
-    );
+    return _react.default.createElement("div", _extends({}, attributes, {
+      className: (0, _classnames.default)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
+      role: "tabpanel",
+      id: id,
+      "aria-labelledby": tabId
+    }), forceRender || selected ? children : null);
   };
@@ -69,20 +60,21 @@
 
+exports.default = TabPanel;
 TabPanel.defaultProps = {
   className: DEFAULT_CLASS,
   forceRender: false,
-  selectedClassName: DEFAULT_CLASS + '--selected',
+  selectedClassName: DEFAULT_CLASS + "--selected",
   style: {}
 };
-exports.default = TabPanel;
 TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
-  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
+  children: _propTypes.default.node,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
+  forceRender: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  // private
+  selected: _propTypes.default.bool,
+  // private
+  selectedClassName: _propTypes.default.string,
+  tabId: _propTypes.default.string // private
+
 } : {};
-
-
 TabPanel.tabsRole = 'TabPanel';

lib/components/Tabs.js

@@ -1,38 +0,33 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-var _propTypes = require('prop-types');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _propTypes2 = require("../helpers/propTypes");
 
-var _react2 = _interopRequireDefault(_react);
+var _UncontrolledTabs = _interopRequireDefault(require("./UncontrolledTabs"));
 
-var _propTypes3 = require('../helpers/propTypes');
+var _count = require("../helpers/count");
 
-var _UncontrolledTabs = require('./UncontrolledTabs');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var _UncontrolledTabs2 = _interopRequireDefault(_UncontrolledTabs);
-
-var _count = require('../helpers/count');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var Tabs =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Tabs, _Component);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Tabs = function (_Component) {
-  _inherits(Tabs, _Component);
-
   function Tabs(props) {
-    _classCallCheck(this, Tabs);
+    var _this;
 
-    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+    _this = _Component.call(this, props) || this;
 
@@ -63,9 +58,12 @@ _this.handleSelected = function (index, last, event) {
 
-  Tabs.prototype.componentWillReceiveProps = function componentWillReceiveProps(newProps) {
+  var _proto = Tabs.prototype;
+
+  _proto.componentWillReceiveProps = function componentWillReceiveProps(newProps) {
     if (process.env.NODE_ENV !== 'production' && Tabs.inUncontrolledMode(newProps) !== Tabs.inUncontrolledMode(this.props)) {
-      throw new Error('Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see the README.');
-    }
-    // Use a transactional update to prevent race conditions
+      throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see the README.");
+    } // Use a transactional update to prevent race conditions
     // when reading the state in copyPropsToState
     // See https://github.com/reactjs/react-tabs/issues/51
+
+
     this.setState(function (state) {
@@ -82,4 +80,6 @@ return Tabs.copyPropsToState(newProps, state);
   // If the state has not selectedIndex, default to the defaultIndex or 0
-  Tabs.copyPropsToState = function copyPropsToState(props, state) {
-    var focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  Tabs.copyPropsToState = function copyPropsToState(props, state, focus) {
+    if (focus === void 0) {
+      focus = false;
+    }
 
@@ -99,2 +99,3 @@ var newState = {
       }
+
       newState.selectedIndex = selectedIndex;
@@ -106,3 +107,3 @@ }
 
-  Tabs.prototype.render = function render() {
+  _proto.render = function render() {
     var _props = this.props,
@@ -112,3 +113,3 @@ children = _props.children,
         defaultFocus = _props.defaultFocus,
-        props = _objectWithoutProperties(_props, ['children', 'defaultIndex', 'defaultFocus']);
+        props = _objectWithoutProperties(_props, ["children", "defaultIndex", "defaultFocus"]);
 
@@ -122,7 +123,3 @@ props.focus = this.state.focus;
 
-    return _react2.default.createElement(
-      _UncontrolledTabs2.default,
-      props,
-      children
-    );
+    return _react.default.createElement(_UncontrolledTabs.default, props, children);
   };
@@ -133,2 +130,3 @@
 
+exports.default = Tabs;
 Tabs.defaultProps = {
@@ -140,17 +138,15 @@ defaultFocus: false,
 };
-exports.default = Tabs;
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes3.childrenPropType,
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
-  defaultFocus: _propTypes2.default.bool,
-  defaultIndex: _propTypes2.default.number,
-  disabledTabClassName: _propTypes2.default.string,
-  forceRenderTabPanel: _propTypes2.default.bool,
-  onSelect: _propTypes3.onSelectPropType,
-  selectedIndex: _propTypes3.selectedIndexPropType,
-  selectedTabClassName: _propTypes2.default.string,
-  selectedTabPanelClassName: _propTypes2.default.string
+  children: _propTypes2.childrenPropType,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
+  defaultFocus: _propTypes.default.bool,
+  defaultIndex: _propTypes.default.number,
+  disabledTabClassName: _propTypes.default.string,
+  domRef: _propTypes.default.func,
+  forceRenderTabPanel: _propTypes.default.bool,
+  onSelect: _propTypes2.onSelectPropType,
+  selectedIndex: _propTypes2.selectedIndexPropType,
+  selectedTabClassName: _propTypes.default.string,
+  selectedTabPanelClassName: _propTypes.default.string
 } : {};
-
-
 Tabs.tabsRole = 'Tabs';

lib/components/UncontrolledTabs.js

@@ -1,47 +0,38 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require('react');
+var _uuid = _interopRequireDefault(require("../helpers/uuid"));
 
-var _react2 = _interopRequireDefault(_react);
+var _propTypes2 = require("../helpers/propTypes");
 
-var _classnames = require('classnames');
+var _count = require("../helpers/count");
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _childrenDeepMap = require("../helpers/childrenDeepMap");
 
-var _uuid = require('../helpers/uuid');
+var _elementTypes = require("../helpers/elementTypes");
 
-var _uuid2 = _interopRequireDefault(_uuid);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var _propTypes3 = require('../helpers/propTypes');
-
-var _count = require('../helpers/count');
-
-var _childrenDeepMap = require('../helpers/childrenDeepMap');
-
-var _elementTypes = require('../helpers/elementTypes');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
   return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';
-}
+} // Determine if a tab node is disabled
 
-// Determine if a tab node is disabled
+
 function isTabDisabled(node) {
@@ -51,3 +42,4 @@ return node.getAttribute('aria-disabled') === 'true';
 
-var canUseActiveElement = void 0;
+var canUseActiveElement;
+
 try {
@@ -63,19 +55,27 @@ canUseActiveElement = !!(typeof window !== 'undefined' && window.document && window.document.activeElement);
 
-var UncontrolledTabs = function (_Component) {
-  _inherits(UncontrolledTabs, _Component);
+var UncontrolledTabs =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(UncontrolledTabs, _Component);
 
   function UncontrolledTabs() {
-    var _temp, _this, _ret;
+    var _temp, _this;
 
-    _classCallCheck(this, UncontrolledTabs);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.tabNodes = [], _this.handleKeyDown = function (e) {
+    return (_temp = _this = _Component.call.apply(_Component, [this].concat(args)) || this, _this.tabNodes = [], _this.handleKeyDown = function (e) {
       if (_this.isTabFromContainer(e.target)) {
         var index = _this.props.selectedIndex;
         var preventDefault = false;
+        var useSelectedIndex = false;
 
+        if (e.keyCode === 32 || e.keyCode === 13) {
+          preventDefault = true;
+          useSelectedIndex = false;
+
+          _this.handleClick(e);
+        }
+
         if (e.keyCode === 37 || e.keyCode === 38) {
@@ -85,2 +85,3 @@ // Select next tab to the left
           preventDefault = true;
+          useSelectedIndex = true;
         } else if (e.keyCode === 39 || e.keyCode === 40) {
@@ -90,14 +91,18 @@ // Select next tab to the right
           preventDefault = true;
-        }
+          useSelectedIndex = true;
+        } // This prevents scrollbars from moving around
 
-        // This prevents scrollbars from moving around
+
         if (preventDefault) {
           e.preventDefault();
+        } // Only use the selected index in the state if we're not using the tabbed index
+
+
+        if (useSelectedIndex) {
+          _this.setSelected(index, e);
         }
-
-        _this.setSelected(index, e);
       }
     }, _this.handleClick = function (e) {
-      var node = e.target;
-      // eslint-disable-next-line no-cond-assign
+      var node = e.target; // eslint-disable-next-line no-cond-assign
+
       do {
@@ -110,21 +115,23 @@ if (_this.isTabFromContainer(node)) {
           var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
+
           _this.setSelected(index, e);
+
           return;
         }
       } while ((node = node.parentNode) !== null);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    }, _temp) || _this;
   }
 
-  UncontrolledTabs.prototype.setSelected = function setSelected(index, event) {
+  var _proto = UncontrolledTabs.prototype;
+
+  _proto.setSelected = function setSelected(index, event) {
     // Check index boundary
-    if (index < 0 || index >= this.getTabsCount()) return;
+    if (index < 0 || index >= this.getTabsCount()) return; // Call change event handler
 
-    // Call change event handler
     this.props.onSelect(index, this.props.selectedIndex, event);
   };
 
-  UncontrolledTabs.prototype.getNextTab = function getNextTab(index) {
-    var count = this.getTabsCount();
+  _proto.getNextTab = function getNextTab(index) {
+    var count = this.getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
 
-    // Look for non-disabled tab from index to the last tab on the right
     for (var i = index + 1; i < count; i++) {
@@ -134,5 +141,5 @@ if (!isTabDisabled(this.getTab(i))) {
       }
-    }
+    } // If no tab found, continue searching from first on left to index
 
-    // If no tab found, continue searching from first on left to index
+
     for (var _i = 0; _i < index; _i++) {
@@ -142,12 +149,11 @@ if (!isTabDisabled(this.getTab(_i))) {
       }
-    }
+    } // No tabs are disabled, return index
 
-    // No tabs are disabled, return index
+
     return index;
   };
 
-  UncontrolledTabs.prototype.getPrevTab = function getPrevTab(index) {
-    var i = index;
+  _proto.getPrevTab = function getPrevTab(index) {
+    var i = index; // Look for non-disabled tab from index to first tab on the left
 
-    // Look for non-disabled tab from index to first tab on the left
     while (i--) {
@@ -157,6 +163,7 @@ if (!isTabDisabled(this.getTab(i))) {
       }
-    }
+    } // If no tab found, continue searching from last tab on right to index
 
-    // If no tab found, continue searching from last tab on right to index
+
     i = this.getTabsCount();
+
     while (i-- > index) {
@@ -166,21 +173,21 @@ if (!isTabDisabled(this.getTab(i))) {
       }
-    }
+    } // No tabs are disabled, return index
 
-    // No tabs are disabled, return index
+
     return index;
   };
 
-  UncontrolledTabs.prototype.getTabsCount = function getTabsCount() {
+  _proto.getTabsCount = function getTabsCount() {
     return (0, _count.getTabsCount)(this.props.children);
   };
 
-  UncontrolledTabs.prototype.getPanelsCount = function getPanelsCount() {
+  _proto.getPanelsCount = function getPanelsCount() {
     return (0, _count.getPanelsCount)(this.props.children);
   };
 
-  UncontrolledTabs.prototype.getTab = function getTab(index) {
-    return this.tabNodes['tabs-' + index];
+  _proto.getTab = function getTab(index) {
+    return this.tabNodes["tabs-" + index];
   };
 
-  UncontrolledTabs.prototype.getChildren = function getChildren() {
+  _proto.getChildren = function getChildren() {
     var _this2 = this;
@@ -197,30 +204,25 @@
         selectedTabPanelClassName = _props.selectedTabPanelClassName;
-
-
     this.tabIds = this.tabIds || [];
     this.panelIds = this.panelIds || [];
-    var diff = this.tabIds.length - this.getTabsCount();
-
-    // Add ids if new tabs have been added
+    var diff = this.tabIds.length - this.getTabsCount(); // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
+
     while (diff++ < 0) {
-      this.tabIds.push((0, _uuid2.default)());
-      this.panelIds.push((0, _uuid2.default)());
-    }
+      this.tabIds.push((0, _uuid.default)());
+      this.panelIds.push((0, _uuid.default)());
+    } // Map children to dynamically setup refs
 
-    // Map children to dynamically setup refs
+
     return (0, _childrenDeepMap.deepMap)(children, function (child) {
-      var result = child;
+      var result = child; // Clone TabList and Tab components to have refs
 
-      // Clone TabList and Tab components to have refs
       if ((0, _elementTypes.isTabList)(child)) {
-        var listIndex = 0;
+        var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab
+        // If it is we should keep the focus on the next selected tab
 
-        // Figure out if the current focus in the DOM is set on a Tab
-        // If it is we should keep the focus on the next selected tab
         var wasTabFocused = false;
 
         if (canUseActiveElement) {
-          wasTabFocused = _react2.default.Children.toArray(child.props.children).filter(_elementTypes.isTab).some(function (tab, i) {
+          wasTabFocused = _react.default.Children.toArray(child.props.children).filter(_elementTypes.isTab).some(function (tab, i) {
             return document.activeElement === _this2.getTab(i);
@@ -232,5 +234,4 @@ });
           children: (0, _childrenDeepMap.deepMap)(child.props.children, function (tab) {
-            var key = 'tabs-' + listIndex;
+            var key = "tabs-" + listIndex;
             var selected = selectedIndex === listIndex;
-
             var props = {
@@ -245,8 +246,5 @@ tabRef: function tabRef(node) {
             };
-
             if (selectedTabClassName) props.selectedClassName = selectedTabClassName;
             if (disabledTabClassName) props.disabledClassName = disabledTabClassName;
-
             listIndex++;
-
             return (0, _react.cloneElement)(tab, props);
@@ -261,8 +259,5 @@ })
         };
-
         if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel;
         if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName;
-
         index++;
-
         result = (0, _react.cloneElement)(child, props);
@@ -280,13 +275,13 @@ }
    */
-  UncontrolledTabs.prototype.isTabFromContainer = function isTabFromContainer(node) {
+  _proto.isTabFromContainer = function isTabFromContainer(node) {
     // return immediately if the clicked element is not a Tab.
     if (!isTabNode(node)) {
       return false;
-    }
+    } // Check if the first occurrence of a Tabs container is `this` one.
 
-    // Check if the first occurrence of a Tabs container is `this` one.
+
     var nodeAncestor = node.parentElement;
+
     do {
       if (nodeAncestor === this.node) return true;else if (nodeAncestor.getAttribute('data-tabs')) break;
-
       nodeAncestor = nodeAncestor.parentElement;
@@ -298,3 +293,3 @@ } while (nodeAncestor);
 
-  UncontrolledTabs.prototype.render = function render() {
+  _proto.render = function render() {
     var _this3 = this;
@@ -307,2 +302,3 @@
         disabledTabClassName = _props2.disabledTabClassName,
+        domRef = _props2.domRef,
         focus = _props2.focus,
@@ -314,17 +310,14 @@ forceRenderTabPanel = _props2.forceRenderTabPanel,
         selectedTabPanelClassName = _props2.selectedTabPanelClassName,
-        attributes = _objectWithoutProperties(_props2, ['children', 'className', 'disabledTabClassName', 'focus', 'forceRenderTabPanel', 'onSelect', 'selectedIndex', 'selectedTabClassName', 'selectedTabPanelClassName']);
+        attributes = _objectWithoutProperties(_props2, ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName"]);
 
-    return _react2.default.createElement(
-      'div',
-      _extends({}, attributes, {
-        className: (0, _classnames2.default)(className),
-        onClick: this.handleClick,
-        onKeyDown: this.handleKeyDown,
-        ref: function ref(node) {
-          _this3.node = node;
-        },
-        'data-tabs': true
-      }),
-      this.getChildren()
-    );
+    return _react.default.createElement("div", _extends({}, attributes, {
+      className: (0, _classnames.default)(className),
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      ref: function ref(node) {
+        _this3.node = node;
+        if (domRef) domRef(node);
+      },
+      "data-tabs": true
+    }), this.getChildren());
   };
@@ -335,2 +328,3 @@
 
+exports.default = UncontrolledTabs;
 UncontrolledTabs.defaultProps = {
@@ -340,13 +334,13 @@ className: 'react-tabs',
 };
-exports.default = UncontrolledTabs;
 UncontrolledTabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes3.childrenPropType,
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array, _propTypes2.default.object]),
-  disabledTabClassName: _propTypes2.default.string,
-  focus: _propTypes2.default.bool,
-  forceRenderTabPanel: _propTypes2.default.bool,
-  onSelect: _propTypes2.default.func.isRequired,
-  selectedIndex: _propTypes2.default.number.isRequired,
-  selectedTabClassName: _propTypes2.default.string,
-  selectedTabPanelClassName: _propTypes2.default.string
+  children: _propTypes2.childrenPropType,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
+  disabledTabClassName: _propTypes.default.string,
+  domRef: _propTypes.default.func,
+  focus: _propTypes.default.bool,
+  forceRenderTabPanel: _propTypes.default.bool,
+  onSelect: _propTypes.default.func.isRequired,
+  selectedIndex: _propTypes.default.number.isRequired,
+  selectedTabClassName: _propTypes.default.string,
+  selectedTabPanelClassName: _propTypes.default.string
 } : {};

lib/helpers/childrenDeepMap.js

@@ -1,16 +0,15 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.deepMap = deepMap;
+exports.deepForEach = deepForEach;
 
-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 _react = require("react");
 
-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; };
+var _elementTypes = require("../helpers/elementTypes");
 
-exports.deepMap = deepMap;
-exports.deepForEach = deepForEach;
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-var _react = require('react');
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _elementTypes = require('../helpers/elementTypes');
-
 function isTabChild(child) {
@@ -17,0 +16,0 @@ return (0, _elementTypes.isTab)(child) || (0, _elementTypes.isTabList)(child) || (0, _elementTypes.isTabPanel)(child);

lib/helpers/count.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,5 +7,5 @@ exports.__esModule = true;
 
-var _childrenDeepMap = require('../helpers/childrenDeepMap');
+var _childrenDeepMap = require("../helpers/childrenDeepMap");
 
-var _elementTypes = require('./elementTypes');
+var _elementTypes = require("./elementTypes");
 
@@ -17,3 +17,2 @@ function getTabsCount(children) {
   });
-
   return tabCount;
@@ -27,4 +26,3 @@ }
   });
-
   return panelCount;
 }

lib/helpers/elementTypes.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,12 +7,13 @@ exports.__esModule = true;
 exports.isTabList = isTabList;
+
 function isTab(el) {
-  return el.type.tabsRole === 'Tab';
+  return el.type && el.type.tabsRole === 'Tab';
 }
 
 function isTabPanel(el) {
-  return el.type.tabsRole === 'TabPanel';
+  return el.type && el.type.tabsRole === 'TabPanel';
 }
 
 function isTabList(el) {
-  return el.type.tabsRole === 'TabList';
+  return el.type && el.type.tabsRole === 'TabList';
 }

lib/helpers/propTypes.js

@@ -1,7 +0,4 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
-
-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.childrenPropType = childrenPropType;
@@ -11,8 +8,10 @@ exports.onSelectPropType = onSelectPropType;
 
-var _childrenDeepMap = require('../helpers/childrenDeepMap');
+var _childrenDeepMap = require("../helpers/childrenDeepMap");
 
-var _elementTypes = require('../helpers/elementTypes');
+var _elementTypes = require("../helpers/elementTypes");
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function childrenPropType(props, propName, componentName) {
-  var error = void 0;
+  var error;
   var tabsCount = 0;
@@ -23,3 +22,2 @@ var panelsCount = 0;
   var children = props[propName];
-
   (0, _childrenDeepMap.deepForEach)(children, function (child) {
@@ -36,4 +34,6 @@ if ((0, _elementTypes.isTabList)(child)) {
       }
+
       tabListFound = true;
     }
+
     if ((0, _elementTypes.isTab)(child)) {
@@ -43,2 +43,3 @@ if (!tabListFound || listTabs.indexOf(child) === -1) {
       }
+
       tabsCount++;
@@ -51,3 +52,3 @@ } else if ((0, _elementTypes.isTabPanel)(child)) {
   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\'.'));
+    error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`." + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'."));
   }
@@ -64,5 +65,5 @@
   if (prop && typeof prop !== 'function') {
-    error = new Error('Invalid ' + location + ' `' + name + '` of type `' + (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) + '` supplied to `' + componentName + '`, expected `function`.');
+    error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `function`.");
   } else if (props.selectedIndex != null && prop == null) {
-    error = new Error('The ' + location + ' `' + name + '` is marked as required in `' + componentName + '`, but its value is `undefined` or `null`.\n`onSelect` is required when `selectedIndex` is also set. Not doing so will make the tabs not do anything, as `selectedIndex` indicates that you want to handle the selected tab yourself.\nIf you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.');
+    error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but its value is `undefined` or `null`.\n`onSelect` is required when `selectedIndex` is also set. Not doing so will make the tabs not do anything, as `selectedIndex` indicates that you want to handle the selected tab yourself.\nIf you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.");
   }
@@ -79,5 +80,5 @@
   if (prop != null && typeof prop !== 'number') {
-    error = new Error('Invalid ' + location + ' `' + name + '` of type `' + (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) + '` supplied to `' + componentName + '`, expected `number`.');
+    error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `number`.");
   } else if (props.defaultIndex != null && prop != null) {
-    return new Error('The ' + location + ' `' + name + '` cannot be used together with `defaultIndex` in `' + componentName + '`.\nEither remove `' + name + '` to let `' + componentName + '` handle the selected tab internally or remove `defaultIndex` to handle it yourself.');
+    return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` in `" + componentName + "`.\nEither remove `" + name + "` to let `" + componentName + "` handle the selected tab internally or remove `defaultIndex` to handle it yourself.");
   }
@@ -84,0 +85,0 @@

lib/helpers/uuid.js

@@ -8,2 +8,3 @@ "use strict";
 var count = 0;
+
 function uuid() {
@@ -10,0 +11,0 @@ return "react-tabs-" + count++;

lib/index.js

@@ -1,30 +0,45 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
-exports.resetIdCounter = exports.Tabs = exports.TabPanel = exports.TabList = exports.Tab = undefined;
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "TabList", {
+  enumerable: true,
+  get: function get() {
+    return _TabList.default;
+  }
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tab.default;
+  }
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function get() {
+    return _TabPanel.default;
+  }
+});
+Object.defineProperty(exports, "resetIdCounter", {
+  enumerable: true,
+  get: function get() {
+    return _uuid.reset;
+  }
+});
 
-var _Tabs = require('./components/Tabs');
+var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 
-var _Tabs2 = _interopRequireDefault(_Tabs);
+var _TabList = _interopRequireDefault(require("./components/TabList"));
 
-var _TabList = require('./components/TabList');
+var _Tab = _interopRequireDefault(require("./components/Tab"));
 
-var _TabList2 = _interopRequireDefault(_TabList);
+var _TabPanel = _interopRequireDefault(require("./components/TabPanel"));
 
-var _Tab = require('./components/Tab');
+var _uuid = require("./helpers/uuid");
 
-var _Tab2 = _interopRequireDefault(_Tab);
-
-var _TabPanel = require('./components/TabPanel');
-
-var _TabPanel2 = _interopRequireDefault(_TabPanel);
-
-var _uuid = require('./helpers/uuid');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Tab = _Tab2.default;
-exports.TabList = _TabList2.default;
-exports.TabPanel = _TabPanel2.default;
-exports.Tabs = _Tabs2.default;
-exports.resetIdCounter = _uuid.reset;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "react-tabs",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React tabs component",
   "main": "lib/index.js",
+  "module": "esm/index.js",
   "scripts": {
-    "clean": "rimraf lib",
+    "clean:commonjs": "rimraf lib",
+    "clean:umd": "rimraf dist",
     "create-github-release": "conventional-github-releaser -p angular",
-    "build:commonjs": "babel src/ --out-dir lib/ --ignore __tests__,__mocks__",
-    "build:umd": "webpack --config webpack.build.js",
-    "build:umd:min": "cross-env MINIFY=1 webpack --config webpack.build.js",
-    "build": "yarn run clean && yarn run build:commonjs",
-    "bundle": "mkdir -p dist && run-s build:umd build:umd:min",
+    "build:commonjs": "babel src/ --out-dir lib/ --ignore **/__tests__,**/__mocks__",
+    "build:esm": "BABEL_OUTPUT=esm babel src/ --out-dir esm/ --ignore **/__tests__,**/__mocks__",
+    "build:umd": "BABEL_TARGET=rollup yarn rollup -c",
+    "build": "npm-run-all clean:* --parallel build:*",
     "format": "eslint src --fix",
@@ -19,4 +20,3 @@ "lint": "eslint src",
     "prepublish": "yarn run build",
-    "prerelease": "run-s build bundle",
-    "release": "git add dist/ && standard-version --sign -a",
+    "release": "standard-version --sign",
     "test": "jest",
@@ -36,2 +36,3 @@ "start": "webpack-dev-server --inline --content-base examples/"
     "dist",
+    "esm",
     "lib",
@@ -48,19 +49,21 @@ "style"
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0"
+    "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.9.0",
-    "babel-core": "^6.9.1",
-    "babel-eslint": "^7.0.0",
-    "babel-jest": "^20.0.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-cli": "^7.0.0-beta.2",
+    "babel-core": "^7.0.0-beta.2",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.3.0-beta.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-external-helpers": "^7.0.0-beta.2",
+    "babel-plugin-transform-class-properties": "^7.0.0-beta.2",
+    "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.0",
-    "babel-preset-env": "^1.3.3",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-env": "^2.0.0-beta.2",
+    "babel-preset-react": "^7.0.0-beta.2",
     "conventional-github-releaser": "^1.1.12",
     "cross-env": "^5.0.0",
     "css-loader": "^0.28.0",
-    "enzyme": "^2.3.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^4.5.0",
@@ -74,16 +77,22 @@ "eslint-config-airbnb": "^15.0.1",
     "husky": "^0.14.3",
-    "jest-cli": "^20.0.0",
+    "jest": "^21.3.0-beta.1",
     "lint-staged": "^4.0.4",
     "npm-run-all": "^4.1.1",
     "prettier": "^1.2.2",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "react-modal": "^1.3.0",
-    "react-test-renderer": "^15.5.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-modal": "^3.0.0-rc2",
+    "react-test-renderer": "^16.0.0",
     "rimraf": "^2.5.2",
+    "rollup": "^0.50.0",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-commonjs": "^8.2.1",
+    "rollup-plugin-ignore": "^1.0.3",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
     "standard-version": "^4.2.0",
-    "style-loader": "^0.18.1",
+    "style-loader": "^0.19.0",
     "uglifyjs-webpack-plugin": "^0.4.2",
-    "webpack": "^2.3.3",
+    "webpack": "^3.6.0",
     "webpack-dev-server": "^2.4.2"
@@ -90,0 +99,0 @@ },

README.md

@@ -5,8 +5,4 @@ # 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.9+ and 15.3+
+> Supports React 0.14.9+, 15.3+ and 16+
 
-> 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)
-
-<a href="https://app.codesponsor.io/link/napKqUy7ZTEunMtesQZm9ygE/reactjs/react-tabs" rel="nofollow"><img src="https://app.codesponsor.io/embed/napKqUy7ZTEunMtesQZm9ygE/reactjs/react-tabs.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>
-
 ## Installing
@@ -18,14 +14,13 @@
 
-You can also still use npm
+You can also use react-tabs directly as UMD build in an HTML document by adding
 
-```bash
-npm install react-tabs --save
+```html
+<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
+<!-- or -->
+<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
 ```
 
-Or use directly in your html as UMD component
+For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder.
+The development UMD build also needs the package `prop-types` being loaded besides `react`.
 
-```html
-<script src="https://unpkg.com/react-tabs@1.0.0/dist/react-tabs.min.js" />
-```
-
 ## Demo
@@ -63,3 +58,3 @@
 
-Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels. 
+Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
 
@@ -113,2 +108,8 @@ 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.
 
+#### domRef: `(node: ?HTMLElement) => void`
+
+> default: `null`
+
+Register a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.
+
 #### forceRenderTabPanel: `boolean`
@@ -126,9 +127,9 @@
 
-This event handler is called every time a tab is changed. It will be called with the `index` that will be changed to, the `lastIndex` which was selected before and the underlying `event` which is usually either a `keydown` or `click` event.
+This event handler is called every time a tab is about to changed. It will be called with the `index` that will be changed to, the `lastIndex` which was selected before and the underlying `event` which is usually either a `keydown` or `click` event. When `index` and `lastIndex` are equal it means the user clicked on the currently active tab.
 
 The callback can optionally return `true` to cancel the change to the new tab.
 
-> Returning `true` when the change to the new tab should be canceled is also important in controlled mode, as react-tabs still internally handles the focus of the tabs. (Really? maybe find a better way)
+> Returning `true` when the change to the new tab should be canceled is also important in controlled mode, as react-tabs still internally handles the focus of the tabs.
 
-> In controlled mode ths `onSelect` handler is required prop.
+> In controlled mode the `onSelect` handler is a required prop.
 
@@ -205,2 +206,8 @@ #### selectedIndex: `number`
 
+#### tabIndex: `string`
+
+> default: if selected `"0"` otherwise `null`
+
+Overrides the tabIndex to enabled tabbing between tabs.
+
 ### &lt;TabPanel /&gt;
@@ -315,2 +322,16 @@
 
+### UMD
+
+When using the UMD version of react-tabs you can easily use the default styles by adding
+
+```html
+<html>
+  <head>
+    ...
+    <link rel="stylesheet" href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
+  </head>
+  ...
+</html>
+```
+
 ### Custom
@@ -323,1 +344,3 @@
 MIT
+
+<a href="https://app.codesponsor.io/link/napKqUy7ZTEunMtesQZm9ygE/reactjs/react-tabs" rel="nofollow" target="_blank"><img src="https://app.codesponsor.io/embed/napKqUy7ZTEunMtesQZm9ygE/reactjs/react-tabs.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

33

increased by50%

Lines of code

2306

increased by35.81%

Number of lines in readme file

339

increased by7.28%

Worsened metrics

Total package byte prevSize

206312

decreased by-15.84%

Dev dependency count

45

increased by21.62%

Number of low supply chain risk alerts

12

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes