@hig/tabs - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

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,8 @@
+# [@hig/tabs-v1.3.1](https://github.com/Autodesk/hig/compare/@hig/tabs@1.3.0...@hig/tabs@1.3.1) (2022-01-12)
+
+
+### Bug Fixes
+
+*  react v. in peerDependencies instead of dependencies ([4701332](https://github.com/Autodesk/hig/commit/4701332))
+
 # [@hig/tabs-v1.3.0](https://github.com/Autodesk/hig/compare/@hig/tabs@1.2.1...@hig/tabs@1.3.0) (2020-07-10)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "HIG Tabs",
@@ -21,4 +21,4 @@ "author": "Autodesk Inc.",
     "@hig/behaviors": "^1.1.1",
-    "@hig/typography": "^1.0.3",
-    "@hig/icons": "^3.2.0",
+    "@hig/icons": "^3.4.3",
+    "@hig/typography": "^1.2.1",
     "@hig/utils": "^0.4.0",
@@ -31,5 +31,5 @@ "emotion": "^10.0.0",
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.16.1",
-    "react": "^15.4.1 || ^16.3.2"
+    "@hig/theme-context": "^3.0.2",
+    "@hig/theme-data": "^2.22.0",
+    "react": "^17.0.0"
   },
@@ -36,0 +36,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

102255

decreased by-11.07%

Lines of code

2948

decreased by-5.03%

Dependency changes

• + Addedreact@17.0.2(transitive)

• Updated@hig/icons@^3.4.3

• Updated@hig/typography@^1.2.1