@hig/tabs - npm Package Compare versions

Comparing version 1.3.2 to 2.0.0

build/index.es.js

@@ -1,2 +0,2 @@
-import React, { Component, Children } from 'react';
+import React, { useState, useEffect, Children } from 'react';
 import PropTypes from 'prop-types';
@@ -9,3 +9,2 @@ import { CloseSUI, CloseXsUI } from '@hig/icons';
 import { createCustomClassNames, createButtonEventHandlers } from '@hig/utils';
-import { polyfill } from 'react-lifecycles-compat';
 import memoize from 'lodash.memoize';
@@ -286,92 +285,70 @@
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var TabCloseButtonPresenter = function TabCloseButtonPresenter(props) {
+  var disabled = props.disabled,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onMouseDown = props.onMouseDown,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseUp = props.onMouseUp,
+      onClick = props.onClick,
+      customStylesheet = props.stylesheet,
+      otherProps = _objectWithoutProperties(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
 
-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 _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 TabCloseButtonPresenter = function (_React$Component) {
-  _inherits(TabCloseButtonPresenter, _React$Component);
-
-  function TabCloseButtonPresenter() {
-    _classCallCheck(this, TabCloseButtonPresenter);
-
-    return _possibleConstructorReturn(this, (TabCloseButtonPresenter.__proto__ || Object.getPrototypeOf(TabCloseButtonPresenter)).apply(this, arguments));
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick(event);
   }
 
-  _createClass(TabCloseButtonPresenter, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          disabled = _props.disabled,
-          onBlur = _props.onBlur,
-          onFocus = _props.onFocus,
-          onMouseDown = _props.onMouseDown,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          onMouseUp = _props.onMouseUp,
-          onClick = _props.onClick,
-          customStylesheet = _props.stylesheet,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
-
-      function handleClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-
+  return React.createElement(
+    ControlBehavior,
+    {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp
+    },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          handleBlur = _ref.onBlur,
+          handleFocus = _ref.onFocus,
+          handleMouseDown = _ref.onMouseDown,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave,
+          handleMouseUp = _ref.onMouseUp;
       return React.createElement(
-        ControlBehavior,
-        {
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp
-        },
-        function (_ref) {
-          var hasFocus = _ref.hasFocus,
-              hasHover = _ref.hasHover,
-              isPressed = _ref.isPressed,
-              handleBlur = _ref.onBlur,
-              handleFocus = _ref.onFocus,
-              handleMouseDown = _ref.onMouseDown,
-              handleMouseEnter = _ref.onMouseEnter,
-              handleMouseLeave = _ref.onMouseLeave,
-              handleMouseUp = _ref.onMouseUp;
-          return React.createElement(
-            ThemeContext.Consumer,
-            null,
-            function (_ref2) {
-              var resolvedRoles = _ref2.resolvedRoles,
-                  metadata = _ref2.metadata;
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
 
-              var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
-              var className = otherProps.className;
+          var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
+          var className = otherProps.className;
 
-              var CloseIcon = metadata.densityId === "medium-density" ? CloseSUI : CloseXsUI;
+          var CloseIcon = metadata.densityId === "medium-density" ? CloseSUI : CloseXsUI;
 
-              return React.createElement(
-                "button",
-                {
-                  onBlur: handleBlur,
-                  onFocus: handleFocus,
-                  onMouseDown: handleMouseDown,
-                  onMouseEnter: handleMouseEnter,
-                  onMouseLeave: handleMouseLeave,
-                  onMouseUp: handleMouseUp,
-                  className: cx(css(styles.button), className),
-                  tabIndex: "-1",
-                  onClick: handleClick,
-                  disabled: disabled,
-                  title: "close"
-                },
-                React.createElement(CloseIcon, null)
-              );
-            }
+          return React.createElement(
+            "button",
+            {
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              onMouseDown: handleMouseDown,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave,
+              onMouseUp: handleMouseUp,
+              className: cx(css(styles.button), className),
+              tabIndex: "-1",
+              onClick: handleClick,
+              disabled: disabled,
+              title: "close"
+            },
+            React.createElement(CloseIcon, null)
           );
@@ -381,6 +358,6 @@ }
     }
-  }]);
+  );
+};
 
-  return TabCloseButtonPresenter;
-}(React.Component);
+TabCloseButtonPresenter.displayName = "TabCloseButtonPresenter";
 
@@ -788,89 +765,67 @@ TabCloseButtonPresenter.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$2(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 _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var Tab = function Tab(props) {
+  var active = props.active,
+      closable = props.closable,
+      disabled = props.disabled,
+      icon = props.icon,
+      label = props.label,
+      customStylesheet = props.stylesheet,
+      otherProps = _objectWithoutProperties$2(props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
 
-function _possibleConstructorReturn$1(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 className = otherProps.className;
+  var variant = otherProps.variant,
+      orientation = otherProps.orientation,
+      showDivider = otherProps.showDivider,
+      onMouseEnter = otherProps.onMouseEnter,
+      onMouseLeave = otherProps.onMouseLeave,
+      handleClick = otherProps.handleClick,
+      handleKeyDown = otherProps.handleKeyDown,
+      onClose = otherProps.onClose,
+      render = otherProps.render;
 
-function _inherits$1(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 Tab = function (_Component) {
-  _inherits$1(Tab, _Component);
-
-  function Tab() {
-    _classCallCheck$1(this, Tab);
-
-    return _possibleConstructorReturn$1(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
+  if (render) {
+    return render(_extends$1({}, props));
   }
 
-  _createClass$1(Tab, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          active = _props.active,
-          closable = _props.closable,
-          disabled = _props.disabled,
-          icon = _props.icon,
-          label = _props.label,
-          customStylesheet = _props.stylesheet,
-          otherProps = _objectWithoutProperties$2(_props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
-
-      var className = otherProps.className;
-      var variant = otherProps.variant,
-          orientation = otherProps.orientation,
-          showDivider = otherProps.showDivider,
-          onMouseEnter = otherProps.onMouseEnter,
-          onMouseLeave = otherProps.onMouseLeave,
-          handleClick = otherProps.handleClick,
-          handleKeyDown = otherProps.handleKeyDown,
-          onClose = otherProps.onClose,
-          render = otherProps.render;
-
-
-      if (render) {
-        return render(_extends$1({}, this.props));
-      }
-
-      return React.createElement(
-        ControlBehavior,
-        { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        function (_ref) {
-          var hasFocus = _ref.hasFocus,
-              hasHover = _ref.hasHover,
-              isPressed = _ref.isPressed,
-              onBlur = _ref.onBlur,
-              onFocus = _ref.onFocus,
-              handleMouseEnter = _ref.onMouseEnter,
-              handleMouseLeave = _ref.onMouseLeave;
-          return React.createElement(TabPresenter, {
-            active: active,
-            disabled: disabled,
-            closable: closable,
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            label: label,
-            icon: icon,
-            variant: variant,
-            orientation: orientation,
-            showDivider: showDivider,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onClick: handleClick,
-            onKeyDown: handleKeyDown,
-            onClose: onClose,
-            className: className,
-            stylesheet: customStylesheet
-          });
-        }
-      );
+  return React.createElement(
+    ControlBehavior,
+    { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          onBlur = _ref.onBlur,
+          onFocus = _ref.onFocus,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave;
+      return React.createElement(TabPresenter, {
+        active: active,
+        disabled: disabled,
+        closable: closable,
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        label: label,
+        icon: icon,
+        variant: variant,
+        orientation: orientation,
+        showDivider: showDivider,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onClose: onClose,
+        className: className,
+        stylesheet: customStylesheet
+      });
     }
-  }]);
+  );
+};
 
-  return Tab;
-}(Component);
+Tab.displayName = "Tab";
 
@@ -909,2 +864,3 @@ Tab.propTypes = {
 };
+
 Tab.defaultProps = {
@@ -1183,10 +1139,4 @@ active: false,
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(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 _inherits$2(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 FIRST_TAB_INDEX = 0;
@@ -1263,294 +1213,234 @@ var DEFAULT_HOVERED_TAB_INDEX = -1;
 
-var Tabs = function (_Component) {
-  _inherits$2(Tabs, _Component);
+var Tabs = function Tabs(props) {
+  var _useState = useState(findInitialStateActiveTab(props)),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveTabIndex = _useState2[1];
 
-  function Tabs() {
-    var _ref2;
+  var _useState3 = useState(DEFAULT_HOVERED_TAB_INDEX),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hoveredTabIndex = _useState4[0],
+      setHoveredTabIndex = _useState4[1];
 
-    var _temp, _this, _ret;
+  var _useState5 = useState(alignments.LEFT),
+      _useState6 = _slicedToArray(_useState5, 2),
+      effectiveAlign = _useState6[0],
+      setEffectiveAlign = _useState6[1];
 
-    _classCallCheck$2(this, Tabs);
+  var _useState7 = useState(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      effectiveShowTabDivider = _useState8[0],
+      setEffectiveShowTabDivider = _useState8[1];
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _useState9 = useState(orientations.HORIZONTAL),
+      _useState10 = _slicedToArray(_useState9, 2),
+      effectiveOrientation = _useState10[0],
+      setEffectiveOrientation = _useState10[1];
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref2 = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
-      /**
-       * We maintain the active tab index in the state in case it was not
-       * provided as a prop.
-       */
-      activeTabIndex: findInitialStateActiveTab(_this.props),
-      hoveredTabIndex: DEFAULT_HOVERED_TAB_INDEX,
-      effectiveAlign: alignments.LEFT,
-      effectiveShowTabDivider: true,
-      effectiveOrientation: orientations.HORIZONTAL
-    }, _this.createTabEventHandlers = memoize(function (index, _ref3) {
-      var disabled = _ref3.disabled;
-      return _extends$3({}, createButtonEventHandlers(function () {
-        return _this.onTabSelection(index, { disabled: disabled });
-      }), {
-        onMouseEnter: function onMouseEnter() {
-          return _this.setHoveredTab(index, { disabled: disabled });
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this.removeHoveredTab(index);
-        },
-        onClose: function onClose() {
-          return _this.props.onTabClose(index);
-        }
-      });
-    }), _this.renderTab = function (_ref4, index) {
-      var key = _ref4.key,
-          props = _ref4.props;
-      var disabled = props.disabled,
-          tabClassName = props.className;
-      var _this$props = _this.props,
-          variant = _this$props.variant,
-          tabsClassName = _this$props.className;
-      var _this$state = _this.state,
-          hoveredTabIndex = _this$state.hoveredTabIndex,
-          effectiveAlign = _this$state.effectiveAlign,
-          effectiveOrientation = _this$state.effectiveOrientation,
-          effectiveShowTabDivider = _this$state.effectiveShowTabDivider;
+  /**
+   * @param {number} nextActiveTabIndex
+   * @param {TabMeta} tab
+   */
 
-      var activeTabIndex = _this.getActiveTabIndex();
 
-      var showTabDivider = effectiveShowTabDivider;
-      if (index === activeTabIndex || index === activeTabIndex - 1) {
-        showTabDivider = false;
-      }
-      if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
-        showTabDivider = false;
-      }
+  var onTabSelection = function onTabSelection(selectedTabIndex, _ref2) {
+    var disabled = _ref2.disabled;
 
-      var className = cx(tabClassName, createCustomClassNames(tabsClassName, "tab"));
+    props.onTabChange(selectedTabIndex);
+    // eslint-disable-next-line no-use-before-define
+    var prevActiveTabIndex = getActiveTabIndex();
+    if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
+      setActiveTabIndex(selectedTabIndex);
+    }
+  };
 
-      var payload = _extends$3({}, props, {
-        key: key,
-        variant: variant,
-        className: className,
-        showDivider: showTabDivider,
-        align: effectiveAlign,
-        orientation: effectiveOrientation,
-        active: activeTabIndex === index
-      }, _this.createTabEventHandlers(index, { disabled: disabled }));
+  /**
+   * If the activeTabIndex has been passed, use it. Otherwise, use our
+   * internally managed activeTabIndex.
+   * @returns {number}
+   */
+  var getActiveTabIndex = function getActiveTabIndex() {
+    return props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
+  };
 
-      return React.createElement(Tab, payload);
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
+  /** @returns {TabMeta[]} */
+  var getTabs = function getTabs() {
+    return createTabs(props.children);
+  };
 
-  /** @type {TabsState} */
+  /** @returns {TabMeta|undefined} */
+  var getActiveTab = function getActiveTab() {
+    return getTabs()[getActiveTabIndex()];
+  };
 
+  /**
+   * @param {number} nextHoveredTabIndex
+   * @param {TabMeta} tab
+   */
+  var setHoveredTab = function setHoveredTab(nextHoveredTabIndex, _ref3) {
+    var disabled = _ref3.disabled;
 
-  _createClass$2(Tabs, [{
-    key: "onTabSelection",
+    var prevHoveredTabIndex = hoveredTabIndex;
+    if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
+    setHoveredTabIndex(nextHoveredTabIndex);
+  };
 
+  /**
+   * @param {number} index
+   */
+  var removeHoveredTab = function removeHoveredTab(index) {
+    if (hoveredTabIndex === index) {
+      setHoveredTabIndex(DEFAULT_HOVERED_TAB_INDEX);
+    }
+  };
 
-    /**
-     * @param {number} nextActiveTabIndex
-     * @param {TabMeta} tab
-     */
-    value: function onTabSelection(selectedTabIndex, _ref5) {
-      var disabled = _ref5.disabled;
-
-      this.props.onTabChange(selectedTabIndex);
-
-      var prevActiveTabIndex = this.getActiveTabIndex();
-      if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
-        this.setState({ activeTabIndex: selectedTabIndex });
+  var createTabEventHandlers = memoize(function (index, _ref4) {
+    var disabled = _ref4.disabled;
+    return _extends$3({}, createButtonEventHandlers(function () {
+      return onTabSelection(index, { disabled: disabled });
+    }), {
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredTab(index, { disabled: disabled });
+      },
+      onMouseLeave: function onMouseLeave() {
+        return removeHoveredTab(index);
+      },
+      onClose: function onClose() {
+        return props.onTabClose(index);
       }
-    }
+    });
+  });
 
-    /**
-     * If the activeTabIndex has been passed, use it. Otherwise, use our
-     * internally managed activeTabIndex.
-     * @returns {number}
-     */
+  /**
+   * @param {TabMeta} tab
+   * @param {number} index
+   * @returns {JSX.Element}
+   */
+  var renderTab = function renderTab(_ref5, index) {
+    var key = _ref5.key,
+        propsParams = _ref5.props;
+    var disabled = propsParams.disabled,
+        tabClassName = propsParams.className;
+    var variant = props.variant,
+        tabsClassName = props.className;
+    // eslint-disable-next-line no-shadow
 
-  }, {
-    key: "getActiveTabIndex",
-    value: function getActiveTabIndex() {
-      return this.props.activeTabIndex !== undefined ? this.props.activeTabIndex : this.state.activeTabIndex;
-    }
+    var activeTabIndex = getActiveTabIndex();
 
-    /** @returns {TabMeta|undefined} */
-
-  }, {
-    key: "getActiveTab",
-    value: function getActiveTab() {
-      return this.getTabs()[this.getActiveTabIndex()];
+    var showTabDivider = effectiveShowTabDivider;
+    if (index === activeTabIndex || index === activeTabIndex - 1) {
+      showTabDivider = false;
     }
+    if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
+      showTabDivider = false;
+    }
 
-    /** @returns {TabMeta[]} */
+    var className = cx(tabClassName, createCustomClassNames(tabsClassName, "tab"));
 
-  }, {
-    key: "getTabs",
-    value: function getTabs() {
-      return createTabs(this.props.children);
-    }
+    var payload = _extends$3({}, propsParams, {
+      key: key,
+      variant: variant,
+      className: className,
+      showDivider: showTabDivider,
+      align: effectiveAlign,
+      orientation: effectiveOrientation,
+      active: activeTabIndex === index
+    }, createTabEventHandlers(index, { disabled: disabled }));
 
-    /**
-     * @param {number} nextHoveredTabIndex
-     * @param {TabMeta} tab
-     */
+    return React.createElement(Tab, payload);
+  };
 
-  }, {
-    key: "setHoveredTab",
-    value: function setHoveredTab(nextHoveredTabIndex, _ref6) {
-      var disabled = _ref6.disabled;
-      var prevHoveredTabIndex = this.state.hoveredTabIndex;
+  /**
+   * @returns {JSX.Element}
+   */
+  var renderTabs = function renderTabs() {
+    // eslint-disable-next-line react/prop-types
+    var className = props.className,
+        variant = props.variant,
+        customStylesheet = props.stylesheet;
 
-      if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
-      this.setState({ hoveredTabIndex: nextHoveredTabIndex });
-    }
+    return React.createElement(
+      TabsPresenter,
+      {
+        variant: variant,
+        align: effectiveAlign,
+        orientation: effectiveOrientation,
+        className: className,
+        stylesheet: customStylesheet
+      },
+      getTabs().map(renderTab)
+    );
+  };
 
-    /**
-     * @param {number} index
-     */
+  /**
+   * @returns {JSX.Element}
+   */
+  var renderContent = function renderContent() {
+    // eslint-disable-next-line react/prop-types
+    var className = props.className,
+        customStylesheet = props.stylesheet;
 
-  }, {
-    key: "removeHoveredTab",
-    value: function removeHoveredTab(index) {
-      var hoveredTabIndex = this.state.hoveredTabIndex;
+    var activeTab = getActiveTab();
 
-      if (hoveredTabIndex === index) {
-        this.setState({ hoveredTabIndex: DEFAULT_HOVERED_TAB_INDEX });
-      }
-    }
+    return React.createElement(
+      ContentPresenter,
+      { className: className, stylesheet: customStylesheet },
+      activeTab ? activeTab.props.children : null
+    );
+  };
 
-    /**
-     * @param {TabMeta} tab
-     * @param {number} index
-     * @returns {JSX.Element}
-     */
+  var styles = stylesheet$1({ orientation: effectiveOrientation });
 
-  }, {
-    key: "renderTabs",
+  useEffect(function () {
+    var children = props.children,
+        align = props.align,
+        variant = props.variant,
+        orientation = props.orientation,
+        showTabDivider = props.showTabDivider;
 
+    var prevActiveTabIndex = activeTabIndex;
+    var prevEffectiveAlign = effectiveAlign;
+    var prevEffectiveOrientation = effectiveOrientation;
+    var prevEffectiveShowTabDivider = effectiveShowTabDivider;
 
-    /**
-     * @returns {JSX.Element}
-     */
-    value: function renderTabs() {
-      var _props = this.props,
-          className = _props.className,
-          variant = _props.variant,
-          customStylesheet = _props.stylesheet;
-      var _state = this.state,
-          effectiveAlign = _state.effectiveAlign,
-          effectiveOrientation = _state.effectiveOrientation;
+    var nextTabs = createTabs(children);
+    var nextActiveTabIndex = nextTabs.findIndex(
+    // eslint-disable-next-line react/prop-types
+    function (_ref6) {
+      var props = _ref6.props;
+      return props.active;
+    });
+    if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && props.defaultActiveTabIndex === undefined) {
+      setActiveTabIndex(nextActiveTabIndex);
+    }
 
-      return React.createElement(
-        TabsPresenter,
-        {
-          variant: variant,
-          align: effectiveAlign,
-          orientation: effectiveOrientation,
-          className: className,
-          stylesheet: customStylesheet
-        },
-        this.getTabs().map(this.renderTab)
-      );
+    // vertical tabs will only work when variant is "box"
+    var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+    if (nextEffectiveOrientation !== prevEffectiveOrientation) {
+      setEffectiveOrientation(nextEffectiveOrientation);
     }
 
-    /**
-     * @returns {JSX.Element}
-     */
-
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var _props2 = this.props,
-          className = _props2.className,
-          customStylesheet = _props2.stylesheet;
-
-      var activeTab = this.getActiveTab();
-
-      return React.createElement(
-        ContentPresenter,
-        { className: className, stylesheet: customStylesheet },
-        activeTab ? activeTab.props.children : null
-      );
+    // align prop will not take effect when orientation is "vertical" or variant is "canvas"
+    var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+    if (nextEffectiveAlign !== prevEffectiveAlign) {
+      setEffectiveAlign(nextEffectiveAlign);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var effectiveOrientation = this.state.effectiveOrientation;
 
-      var styles = stylesheet$1({ orientation: effectiveOrientation });
-
-      return React.createElement(
-        "div",
-        { className: cx(css(styles.wrapper), this.props.className) },
-        this.renderTabs(),
-        this.renderContent()
-      );
+    // tab divider will not show when orientation is "vertical" or variant is "underline"
+    var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+    if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
+      setEffectiveShowTabDivider(nextEffectiveShowTabDivider);
     }
-  }], [{
-    key: "getDerivedStateFromProps",
+  }, [props]);
 
+  return React.createElement(
+    "div",
+    { className: cx(css(styles.wrapper), props.className) },
+    renderTabs(),
+    renderContent()
+  );
+};
 
-    /**
-     * @param {TabsProps} nextProps
-     * @param {TabsState} prevState
-     * @returns {TabsState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var children = nextProps.children,
-          align = nextProps.align,
-          variant = nextProps.variant,
-          orientation = nextProps.orientation,
-          showTabDivider = nextProps.showTabDivider;
-      var prevActiveTabIndex = prevState.activeTabIndex,
-          prevEffectiveAlign = prevState.effectiveAlign,
-          prevEffectiveOrientation = prevState.effectiveOrientation,
-          prevEffectiveShowTabDivider = prevState.effectiveShowTabDivider;
+Tabs.displayName = "Tabs";
 
-
-      var hasStateChanged = false;
-      var newState = {};
-
-      var nextTabs = createTabs(children);
-      var nextActiveTabIndex = nextTabs.findIndex(function (_ref7) {
-        var props = _ref7.props;
-        return props.active;
-      });
-      if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && nextProps.defaultActiveTabIndex === undefined) {
-        newState.activeTabIndex = nextActiveTabIndex;
-        hasStateChanged = true;
-      }
-
-      // vertical tabs will only work when variant is "box"
-      var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
-      if (nextEffectiveOrientation !== prevEffectiveOrientation) {
-        newState.effectiveOrientation = nextEffectiveOrientation;
-        hasStateChanged = true;
-      }
-
-      // align prop will not take effect when orientation is "vertical" or variant is "canvas"
-      var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
-      if (nextEffectiveAlign !== prevEffectiveAlign) {
-        newState.effectiveAlign = nextEffectiveAlign;
-        hasStateChanged = true;
-      }
-
-      // tab divider will not show when orientation is "vertical" or variant is "underline"
-      var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
-      if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
-        newState.effectiveShowTabDivider = nextEffectiveShowTabDivider;
-        hasStateChanged = true;
-      }
-
-      if (hasStateChanged) {
-        return newState;
-      }
-
-      return null;
-    }
-  }]);
-
-  return Tabs;
-}(Component);
-
 Tabs.propTypes = {
@@ -1566,2 +1456,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
@@ -1589,2 +1480,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
@@ -1595,2 +1487,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   showTabDivider: PropTypes.bool,
@@ -1600,2 +1493,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   stylesheet: PropTypes.func,
@@ -1605,4 +1499,6 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
+
 Tabs.defaultProps = {
@@ -1616,5 +1512,2 @@ align: alignments.LEFT,
 };
-
-
-var Tabs$1 = polyfill(Tabs);
 Tabs.__docgenInfo = {
@@ -1727,3 +1620,3 @@ "description": "",
 
-export default Tabs$1;
+export default Tabs;
 export { Tab, alignments, variants, orientations, AVAILABLE_ALIGNMENTS, AVAILABLE_VARIANTS, AVAILABLE_ORIENTATIONS };

build/index.js

@@ -16,3 +16,2 @@ 'use strict';
 var utils = require('@hig/utils');
-var reactLifecyclesCompat = require('react-lifecycles-compat');
 var memoize = _interopDefault(require('lodash.memoize'));
@@ -293,92 +292,70 @@
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var TabCloseButtonPresenter = function TabCloseButtonPresenter(props) {
+  var disabled = props.disabled,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onMouseDown = props.onMouseDown,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseUp = props.onMouseUp,
+      onClick = props.onClick,
+      customStylesheet = props.stylesheet,
+      otherProps = _objectWithoutProperties(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
 
-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 _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 TabCloseButtonPresenter = function (_React$Component) {
-  _inherits(TabCloseButtonPresenter, _React$Component);
-
-  function TabCloseButtonPresenter() {
-    _classCallCheck(this, TabCloseButtonPresenter);
-
-    return _possibleConstructorReturn(this, (TabCloseButtonPresenter.__proto__ || Object.getPrototypeOf(TabCloseButtonPresenter)).apply(this, arguments));
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick(event);
   }
 
-  _createClass(TabCloseButtonPresenter, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          disabled = _props.disabled,
-          onBlur = _props.onBlur,
-          onFocus = _props.onFocus,
-          onMouseDown = _props.onMouseDown,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          onMouseUp = _props.onMouseUp,
-          onClick = _props.onClick,
-          customStylesheet = _props.stylesheet,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
-
-      function handleClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-
+  return React__default.createElement(
+    behaviors.ControlBehavior,
+    {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp
+    },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          handleBlur = _ref.onBlur,
+          handleFocus = _ref.onFocus,
+          handleMouseDown = _ref.onMouseDown,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave,
+          handleMouseUp = _ref.onMouseUp;
       return React__default.createElement(
-        behaviors.ControlBehavior,
-        {
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp
-        },
-        function (_ref) {
-          var hasFocus = _ref.hasFocus,
-              hasHover = _ref.hasHover,
-              isPressed = _ref.isPressed,
-              handleBlur = _ref.onBlur,
-              handleFocus = _ref.onFocus,
-              handleMouseDown = _ref.onMouseDown,
-              handleMouseEnter = _ref.onMouseEnter,
-              handleMouseLeave = _ref.onMouseLeave,
-              handleMouseUp = _ref.onMouseUp;
-          return React__default.createElement(
-            ThemeContext.Consumer,
-            null,
-            function (_ref2) {
-              var resolvedRoles = _ref2.resolvedRoles,
-                  metadata = _ref2.metadata;
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
 
-              var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
-              var className = otherProps.className;
+          var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
+          var className = otherProps.className;
 
-              var CloseIcon = metadata.densityId === "medium-density" ? icons.CloseSUI : icons.CloseXsUI;
+          var CloseIcon = metadata.densityId === "medium-density" ? icons.CloseSUI : icons.CloseXsUI;
 
-              return React__default.createElement(
-                "button",
-                {
-                  onBlur: handleBlur,
-                  onFocus: handleFocus,
-                  onMouseDown: handleMouseDown,
-                  onMouseEnter: handleMouseEnter,
-                  onMouseLeave: handleMouseLeave,
-                  onMouseUp: handleMouseUp,
-                  className: emotion.cx(emotion.css(styles.button), className),
-                  tabIndex: "-1",
-                  onClick: handleClick,
-                  disabled: disabled,
-                  title: "close"
-                },
-                React__default.createElement(CloseIcon, null)
-              );
-            }
+          return React__default.createElement(
+            "button",
+            {
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              onMouseDown: handleMouseDown,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave,
+              onMouseUp: handleMouseUp,
+              className: emotion.cx(emotion.css(styles.button), className),
+              tabIndex: "-1",
+              onClick: handleClick,
+              disabled: disabled,
+              title: "close"
+            },
+            React__default.createElement(CloseIcon, null)
           );
@@ -388,6 +365,6 @@ }
     }
-  }]);
+  );
+};
 
-  return TabCloseButtonPresenter;
-}(React__default.Component);
+TabCloseButtonPresenter.displayName = "TabCloseButtonPresenter";
 
@@ -795,89 +772,67 @@ TabCloseButtonPresenter.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$2(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 _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var Tab = function Tab(props) {
+  var active = props.active,
+      closable = props.closable,
+      disabled = props.disabled,
+      icon = props.icon,
+      label = props.label,
+      customStylesheet = props.stylesheet,
+      otherProps = _objectWithoutProperties$2(props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
 
-function _possibleConstructorReturn$1(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 className = otherProps.className;
+  var variant = otherProps.variant,
+      orientation = otherProps.orientation,
+      showDivider = otherProps.showDivider,
+      onMouseEnter = otherProps.onMouseEnter,
+      onMouseLeave = otherProps.onMouseLeave,
+      handleClick = otherProps.handleClick,
+      handleKeyDown = otherProps.handleKeyDown,
+      onClose = otherProps.onClose,
+      render = otherProps.render;
 
-function _inherits$1(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 Tab = function (_Component) {
-  _inherits$1(Tab, _Component);
-
-  function Tab() {
-    _classCallCheck$1(this, Tab);
-
-    return _possibleConstructorReturn$1(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
+  if (render) {
+    return render(_extends$1({}, props));
   }
 
-  _createClass$1(Tab, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          active = _props.active,
-          closable = _props.closable,
-          disabled = _props.disabled,
-          icon = _props.icon,
-          label = _props.label,
-          customStylesheet = _props.stylesheet,
-          otherProps = _objectWithoutProperties$2(_props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
-
-      var className = otherProps.className;
-      var variant = otherProps.variant,
-          orientation = otherProps.orientation,
-          showDivider = otherProps.showDivider,
-          onMouseEnter = otherProps.onMouseEnter,
-          onMouseLeave = otherProps.onMouseLeave,
-          handleClick = otherProps.handleClick,
-          handleKeyDown = otherProps.handleKeyDown,
-          onClose = otherProps.onClose,
-          render = otherProps.render;
-
-
-      if (render) {
-        return render(_extends$1({}, this.props));
-      }
-
-      return React__default.createElement(
-        behaviors.ControlBehavior,
-        { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        function (_ref) {
-          var hasFocus = _ref.hasFocus,
-              hasHover = _ref.hasHover,
-              isPressed = _ref.isPressed,
-              onBlur = _ref.onBlur,
-              onFocus = _ref.onFocus,
-              handleMouseEnter = _ref.onMouseEnter,
-              handleMouseLeave = _ref.onMouseLeave;
-          return React__default.createElement(TabPresenter, {
-            active: active,
-            disabled: disabled,
-            closable: closable,
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            label: label,
-            icon: icon,
-            variant: variant,
-            orientation: orientation,
-            showDivider: showDivider,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onClick: handleClick,
-            onKeyDown: handleKeyDown,
-            onClose: onClose,
-            className: className,
-            stylesheet: customStylesheet
-          });
-        }
-      );
+  return React__default.createElement(
+    behaviors.ControlBehavior,
+    { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          onBlur = _ref.onBlur,
+          onFocus = _ref.onFocus,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave;
+      return React__default.createElement(TabPresenter, {
+        active: active,
+        disabled: disabled,
+        closable: closable,
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        label: label,
+        icon: icon,
+        variant: variant,
+        orientation: orientation,
+        showDivider: showDivider,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onClose: onClose,
+        className: className,
+        stylesheet: customStylesheet
+      });
     }
-  }]);
+  );
+};
 
-  return Tab;
-}(React.Component);
+Tab.displayName = "Tab";
 
@@ -916,2 +871,3 @@ Tab.propTypes = {
 };
+
 Tab.defaultProps = {
@@ -1190,10 +1146,4 @@ active: false,
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(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 _inherits$2(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 FIRST_TAB_INDEX = 0;
@@ -1270,294 +1220,234 @@ var DEFAULT_HOVERED_TAB_INDEX = -1;
 
-var Tabs = function (_Component) {
-  _inherits$2(Tabs, _Component);
+var Tabs = function Tabs(props) {
+  var _useState = React.useState(findInitialStateActiveTab(props)),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveTabIndex = _useState2[1];
 
-  function Tabs() {
-    var _ref2;
+  var _useState3 = React.useState(DEFAULT_HOVERED_TAB_INDEX),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hoveredTabIndex = _useState4[0],
+      setHoveredTabIndex = _useState4[1];
 
-    var _temp, _this, _ret;
+  var _useState5 = React.useState(alignments.LEFT),
+      _useState6 = _slicedToArray(_useState5, 2),
+      effectiveAlign = _useState6[0],
+      setEffectiveAlign = _useState6[1];
 
-    _classCallCheck$2(this, Tabs);
+  var _useState7 = React.useState(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      effectiveShowTabDivider = _useState8[0],
+      setEffectiveShowTabDivider = _useState8[1];
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _useState9 = React.useState(orientations.HORIZONTAL),
+      _useState10 = _slicedToArray(_useState9, 2),
+      effectiveOrientation = _useState10[0],
+      setEffectiveOrientation = _useState10[1];
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref2 = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
-      /**
-       * We maintain the active tab index in the state in case it was not
-       * provided as a prop.
-       */
-      activeTabIndex: findInitialStateActiveTab(_this.props),
-      hoveredTabIndex: DEFAULT_HOVERED_TAB_INDEX,
-      effectiveAlign: alignments.LEFT,
-      effectiveShowTabDivider: true,
-      effectiveOrientation: orientations.HORIZONTAL
-    }, _this.createTabEventHandlers = memoize(function (index, _ref3) {
-      var disabled = _ref3.disabled;
-      return _extends$3({}, utils.createButtonEventHandlers(function () {
-        return _this.onTabSelection(index, { disabled: disabled });
-      }), {
-        onMouseEnter: function onMouseEnter() {
-          return _this.setHoveredTab(index, { disabled: disabled });
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this.removeHoveredTab(index);
-        },
-        onClose: function onClose() {
-          return _this.props.onTabClose(index);
-        }
-      });
-    }), _this.renderTab = function (_ref4, index) {
-      var key = _ref4.key,
-          props = _ref4.props;
-      var disabled = props.disabled,
-          tabClassName = props.className;
-      var _this$props = _this.props,
-          variant = _this$props.variant,
-          tabsClassName = _this$props.className;
-      var _this$state = _this.state,
-          hoveredTabIndex = _this$state.hoveredTabIndex,
-          effectiveAlign = _this$state.effectiveAlign,
-          effectiveOrientation = _this$state.effectiveOrientation,
-          effectiveShowTabDivider = _this$state.effectiveShowTabDivider;
+  /**
+   * @param {number} nextActiveTabIndex
+   * @param {TabMeta} tab
+   */
 
-      var activeTabIndex = _this.getActiveTabIndex();
 
-      var showTabDivider = effectiveShowTabDivider;
-      if (index === activeTabIndex || index === activeTabIndex - 1) {
-        showTabDivider = false;
-      }
-      if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
-        showTabDivider = false;
-      }
+  var onTabSelection = function onTabSelection(selectedTabIndex, _ref2) {
+    var disabled = _ref2.disabled;
 
-      var className = emotion.cx(tabClassName, utils.createCustomClassNames(tabsClassName, "tab"));
+    props.onTabChange(selectedTabIndex);
+    // eslint-disable-next-line no-use-before-define
+    var prevActiveTabIndex = getActiveTabIndex();
+    if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
+      setActiveTabIndex(selectedTabIndex);
+    }
+  };
 
-      var payload = _extends$3({}, props, {
-        key: key,
-        variant: variant,
-        className: className,
-        showDivider: showTabDivider,
-        align: effectiveAlign,
-        orientation: effectiveOrientation,
-        active: activeTabIndex === index
-      }, _this.createTabEventHandlers(index, { disabled: disabled }));
+  /**
+   * If the activeTabIndex has been passed, use it. Otherwise, use our
+   * internally managed activeTabIndex.
+   * @returns {number}
+   */
+  var getActiveTabIndex = function getActiveTabIndex() {
+    return props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
+  };
 
-      return React__default.createElement(Tab, payload);
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
+  /** @returns {TabMeta[]} */
+  var getTabs = function getTabs() {
+    return createTabs(props.children);
+  };
 
-  /** @type {TabsState} */
+  /** @returns {TabMeta|undefined} */
+  var getActiveTab = function getActiveTab() {
+    return getTabs()[getActiveTabIndex()];
+  };
 
+  /**
+   * @param {number} nextHoveredTabIndex
+   * @param {TabMeta} tab
+   */
+  var setHoveredTab = function setHoveredTab(nextHoveredTabIndex, _ref3) {
+    var disabled = _ref3.disabled;
 
-  _createClass$2(Tabs, [{
-    key: "onTabSelection",
+    var prevHoveredTabIndex = hoveredTabIndex;
+    if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
+    setHoveredTabIndex(nextHoveredTabIndex);
+  };
 
+  /**
+   * @param {number} index
+   */
+  var removeHoveredTab = function removeHoveredTab(index) {
+    if (hoveredTabIndex === index) {
+      setHoveredTabIndex(DEFAULT_HOVERED_TAB_INDEX);
+    }
+  };
 
-    /**
-     * @param {number} nextActiveTabIndex
-     * @param {TabMeta} tab
-     */
-    value: function onTabSelection(selectedTabIndex, _ref5) {
-      var disabled = _ref5.disabled;
-
-      this.props.onTabChange(selectedTabIndex);
-
-      var prevActiveTabIndex = this.getActiveTabIndex();
-      if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
-        this.setState({ activeTabIndex: selectedTabIndex });
+  var createTabEventHandlers = memoize(function (index, _ref4) {
+    var disabled = _ref4.disabled;
+    return _extends$3({}, utils.createButtonEventHandlers(function () {
+      return onTabSelection(index, { disabled: disabled });
+    }), {
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredTab(index, { disabled: disabled });
+      },
+      onMouseLeave: function onMouseLeave() {
+        return removeHoveredTab(index);
+      },
+      onClose: function onClose() {
+        return props.onTabClose(index);
       }
-    }
+    });
+  });
 
-    /**
-     * If the activeTabIndex has been passed, use it. Otherwise, use our
-     * internally managed activeTabIndex.
-     * @returns {number}
-     */
+  /**
+   * @param {TabMeta} tab
+   * @param {number} index
+   * @returns {JSX.Element}
+   */
+  var renderTab = function renderTab(_ref5, index) {
+    var key = _ref5.key,
+        propsParams = _ref5.props;
+    var disabled = propsParams.disabled,
+        tabClassName = propsParams.className;
+    var variant = props.variant,
+        tabsClassName = props.className;
+    // eslint-disable-next-line no-shadow
 
-  }, {
-    key: "getActiveTabIndex",
-    value: function getActiveTabIndex() {
-      return this.props.activeTabIndex !== undefined ? this.props.activeTabIndex : this.state.activeTabIndex;
-    }
+    var activeTabIndex = getActiveTabIndex();
 
-    /** @returns {TabMeta|undefined} */
-
-  }, {
-    key: "getActiveTab",
-    value: function getActiveTab() {
-      return this.getTabs()[this.getActiveTabIndex()];
+    var showTabDivider = effectiveShowTabDivider;
+    if (index === activeTabIndex || index === activeTabIndex - 1) {
+      showTabDivider = false;
     }
+    if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
+      showTabDivider = false;
+    }
 
-    /** @returns {TabMeta[]} */
+    var className = emotion.cx(tabClassName, utils.createCustomClassNames(tabsClassName, "tab"));
 
-  }, {
-    key: "getTabs",
-    value: function getTabs() {
-      return createTabs(this.props.children);
-    }
+    var payload = _extends$3({}, propsParams, {
+      key: key,
+      variant: variant,
+      className: className,
+      showDivider: showTabDivider,
+      align: effectiveAlign,
+      orientation: effectiveOrientation,
+      active: activeTabIndex === index
+    }, createTabEventHandlers(index, { disabled: disabled }));
 
-    /**
-     * @param {number} nextHoveredTabIndex
-     * @param {TabMeta} tab
-     */
+    return React__default.createElement(Tab, payload);
+  };
 
-  }, {
-    key: "setHoveredTab",
-    value: function setHoveredTab(nextHoveredTabIndex, _ref6) {
-      var disabled = _ref6.disabled;
-      var prevHoveredTabIndex = this.state.hoveredTabIndex;
+  /**
+   * @returns {JSX.Element}
+   */
+  var renderTabs = function renderTabs() {
+    // eslint-disable-next-line react/prop-types
+    var className = props.className,
+        variant = props.variant,
+        customStylesheet = props.stylesheet;
 
-      if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
-      this.setState({ hoveredTabIndex: nextHoveredTabIndex });
-    }
+    return React__default.createElement(
+      TabsPresenter,
+      {
+        variant: variant,
+        align: effectiveAlign,
+        orientation: effectiveOrientation,
+        className: className,
+        stylesheet: customStylesheet
+      },
+      getTabs().map(renderTab)
+    );
+  };
 
-    /**
-     * @param {number} index
-     */
+  /**
+   * @returns {JSX.Element}
+   */
+  var renderContent = function renderContent() {
+    // eslint-disable-next-line react/prop-types
+    var className = props.className,
+        customStylesheet = props.stylesheet;
 
-  }, {
-    key: "removeHoveredTab",
-    value: function removeHoveredTab(index) {
-      var hoveredTabIndex = this.state.hoveredTabIndex;
+    var activeTab = getActiveTab();
 
-      if (hoveredTabIndex === index) {
-        this.setState({ hoveredTabIndex: DEFAULT_HOVERED_TAB_INDEX });
-      }
-    }
+    return React__default.createElement(
+      ContentPresenter,
+      { className: className, stylesheet: customStylesheet },
+      activeTab ? activeTab.props.children : null
+    );
+  };
 
-    /**
-     * @param {TabMeta} tab
-     * @param {number} index
-     * @returns {JSX.Element}
-     */
+  var styles = stylesheet$1({ orientation: effectiveOrientation });
 
-  }, {
-    key: "renderTabs",
+  React.useEffect(function () {
+    var children = props.children,
+        align = props.align,
+        variant = props.variant,
+        orientation = props.orientation,
+        showTabDivider = props.showTabDivider;
 
+    var prevActiveTabIndex = activeTabIndex;
+    var prevEffectiveAlign = effectiveAlign;
+    var prevEffectiveOrientation = effectiveOrientation;
+    var prevEffectiveShowTabDivider = effectiveShowTabDivider;
 
-    /**
-     * @returns {JSX.Element}
-     */
-    value: function renderTabs() {
-      var _props = this.props,
-          className = _props.className,
-          variant = _props.variant,
-          customStylesheet = _props.stylesheet;
-      var _state = this.state,
-          effectiveAlign = _state.effectiveAlign,
-          effectiveOrientation = _state.effectiveOrientation;
+    var nextTabs = createTabs(children);
+    var nextActiveTabIndex = nextTabs.findIndex(
+    // eslint-disable-next-line react/prop-types
+    function (_ref6) {
+      var props = _ref6.props;
+      return props.active;
+    });
+    if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && props.defaultActiveTabIndex === undefined) {
+      setActiveTabIndex(nextActiveTabIndex);
+    }
 
-      return React__default.createElement(
-        TabsPresenter,
-        {
-          variant: variant,
-          align: effectiveAlign,
-          orientation: effectiveOrientation,
-          className: className,
-          stylesheet: customStylesheet
-        },
-        this.getTabs().map(this.renderTab)
-      );
+    // vertical tabs will only work when variant is "box"
+    var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+    if (nextEffectiveOrientation !== prevEffectiveOrientation) {
+      setEffectiveOrientation(nextEffectiveOrientation);
     }
 
-    /**
-     * @returns {JSX.Element}
-     */
-
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var _props2 = this.props,
-          className = _props2.className,
-          customStylesheet = _props2.stylesheet;
-
-      var activeTab = this.getActiveTab();
-
-      return React__default.createElement(
-        ContentPresenter,
-        { className: className, stylesheet: customStylesheet },
-        activeTab ? activeTab.props.children : null
-      );
+    // align prop will not take effect when orientation is "vertical" or variant is "canvas"
+    var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+    if (nextEffectiveAlign !== prevEffectiveAlign) {
+      setEffectiveAlign(nextEffectiveAlign);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var effectiveOrientation = this.state.effectiveOrientation;
 
-      var styles = stylesheet$1({ orientation: effectiveOrientation });
-
-      return React__default.createElement(
-        "div",
-        { className: emotion.cx(emotion.css(styles.wrapper), this.props.className) },
-        this.renderTabs(),
-        this.renderContent()
-      );
+    // tab divider will not show when orientation is "vertical" or variant is "underline"
+    var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+    if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
+      setEffectiveShowTabDivider(nextEffectiveShowTabDivider);
     }
-  }], [{
-    key: "getDerivedStateFromProps",
+  }, [props]);
 
+  return React__default.createElement(
+    "div",
+    { className: emotion.cx(emotion.css(styles.wrapper), props.className) },
+    renderTabs(),
+    renderContent()
+  );
+};
 
-    /**
-     * @param {TabsProps} nextProps
-     * @param {TabsState} prevState
-     * @returns {TabsState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var children = nextProps.children,
-          align = nextProps.align,
-          variant = nextProps.variant,
-          orientation = nextProps.orientation,
-          showTabDivider = nextProps.showTabDivider;
-      var prevActiveTabIndex = prevState.activeTabIndex,
-          prevEffectiveAlign = prevState.effectiveAlign,
-          prevEffectiveOrientation = prevState.effectiveOrientation,
-          prevEffectiveShowTabDivider = prevState.effectiveShowTabDivider;
+Tabs.displayName = "Tabs";
 
-
-      var hasStateChanged = false;
-      var newState = {};
-
-      var nextTabs = createTabs(children);
-      var nextActiveTabIndex = nextTabs.findIndex(function (_ref7) {
-        var props = _ref7.props;
-        return props.active;
-      });
-      if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && nextProps.defaultActiveTabIndex === undefined) {
-        newState.activeTabIndex = nextActiveTabIndex;
-        hasStateChanged = true;
-      }
-
-      // vertical tabs will only work when variant is "box"
-      var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
-      if (nextEffectiveOrientation !== prevEffectiveOrientation) {
-        newState.effectiveOrientation = nextEffectiveOrientation;
-        hasStateChanged = true;
-      }
-
-      // align prop will not take effect when orientation is "vertical" or variant is "canvas"
-      var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
-      if (nextEffectiveAlign !== prevEffectiveAlign) {
-        newState.effectiveAlign = nextEffectiveAlign;
-        hasStateChanged = true;
-      }
-
-      // tab divider will not show when orientation is "vertical" or variant is "underline"
-      var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
-      if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
-        newState.effectiveShowTabDivider = nextEffectiveShowTabDivider;
-        hasStateChanged = true;
-      }
-
-      if (hasStateChanged) {
-        return newState;
-      }
-
-      return null;
-    }
-  }]);
-
-  return Tabs;
-}(React.Component);
-
 Tabs.propTypes = {
@@ -1573,2 +1463,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
@@ -1596,2 +1487,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
@@ -1602,2 +1494,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   showTabDivider: PropTypes.bool,
@@ -1607,2 +1500,3 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   stylesheet: PropTypes.func,
@@ -1612,4 +1506,6 @@ /**
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
+
 Tabs.defaultProps = {
@@ -1623,5 +1519,2 @@ align: alignments.LEFT,
 };
-
-
-var Tabs$1 = reactLifecyclesCompat.polyfill(Tabs);
 Tabs.__docgenInfo = {
@@ -1734,3 +1627,3 @@ "description": "",
 
-exports.default = Tabs$1;
+exports.default = Tabs;
 exports.Tab = Tab;
@@ -1737,0 +1630,0 @@ exports.alignments = alignments;

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/tabs-v2.0.0](https://github.com/Autodesk/hig/compare/@hig/tabs@1.3.2...@hig/tabs@2.0.0) (2022-01-13)
+
+
+### Code Refactoring
+
+* Major Release - React 17 Upgrade ([2523711](https://github.com/Autodesk/hig/commit/2523711))
+
+
+### BREAKING CHANGES
+
+* This release includes upgrading to React 17 and all associated libraries. The components have also had structural changes, utilizing stateless components and hooks. There should be no change in look or behavior of components. The code usage is the same so if you’re already on react 17 you can bump the version directly. If you’re on an old version of react you’ll need to upgrade your project’s react first to 17 and then the HIG components. This upgrade also means no more fixes for the react 15 version but it will still be available for download from NPM. You can fork the repo and make fixes with the older version if there is something critical past this release date.
+
 # [@hig/tabs-v1.3.2](https://github.com/Autodesk/hig/compare/@hig/tabs@1.3.1...@hig/tabs@1.3.2) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "description": "HIG Tabs",
@@ -32,3 +32,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-data": "^2.22.1",
-    "react": "^15.4.1 || ^16.3.2"
+    "react": "^17.0.0"
   },
@@ -35,0 +35,0 @@ "devDependencies": {

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

Worsened metrics

Total package byte prevSize

103570

decreased by-10.41%

Lines of code

2948

decreased by-5.03%

No dependency changes