@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,629 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var debounce = require('lodash.debounce');
+var TabContent = require('../TabContent/TabContent.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var _ChevronLeft, _ChevronRight;
+
+var _excluded = ["className", "type", "light", "onSelectionChange", "scrollDebounceWait", "scrollIntoView", "selectionMode", "tabContentClassName", "leftOverflowButtonProps", "rightOverflowButtonProps"];
+
+var Tabs = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(Tabs, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(Tabs);
+
+  function Tabs() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, Tabs);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      horizontalOverflow: false
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "tablist", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "leftOverflowNavButton", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "rightOverflowNavButton", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "OVERFLOW_BUTTON_OFFSET", 40);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleScroll", function () {
+      var _this$tablist;
+
+      if (!((_this$tablist = _this.tablist) !== null && _this$tablist !== void 0 && _this$tablist.current)) {
+        return;
+      }
+
+      var _this$tablist$current = _this.tablist.current,
+          tablistClientWidth = _this$tablist$current.clientWidth,
+          tablistScrollLeft = _this$tablist$current.scrollLeft,
+          tablistScrollWidth = _this$tablist$current.scrollWidth;
+
+      _this.setState({
+        tablistClientWidth: tablistClientWidth,
+        horizontalOverflow: tablistScrollWidth > tablistClientWidth,
+        tablistScrollWidth: tablistScrollWidth,
+        tablistScrollLeft: tablistScrollLeft
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_debouncedHandleWindowResize", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_handleWindowResize", _this.handleScroll);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_debouncedHandleScroll", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_handleScroll", _this.handleScroll);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getEnabledTabs", function () {
+      return React__default["default"].Children.toArray(_this.props.children).reduce(function (enabledTabs, tab, index) {
+        return !tab.props.disabled ? enabledTabs.concat(index) : enabledTabs;
+      }, []);
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getNextIndex", function (index, direction) {
+      var enabledTabs = _this.getEnabledTabs();
+
+      var nextIndex = Math.max(enabledTabs.indexOf(index) + direction, // For `tab` not found in `enabledTabs`
+      -1);
+      var nextIndexLooped = nextIndex >= 0 && nextIndex < enabledTabs.length ? nextIndex : nextIndex - Math.sign(nextIndex) * enabledTabs.length;
+      return enabledTabs[nextIndexLooped];
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getDirection", function (evt) {
+      if (match.match(evt, keys.ArrowLeft)) {
+        return -1;
+      }
+
+      if (match.match(evt, keys.ArrowRight)) {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getTabAt", function (index, useFresh) {
+      return !useFresh && _this["tab".concat(index)] || React__default["default"].Children.toArray(_this.props.children)[index];
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "scrollTabIntoView", function (event, _ref) {
+      var index = _ref.index;
+
+      var tab = _this.getTabAt(index);
+
+      if (match.matches(event, [keys.ArrowLeft, keys.ArrowRight]) || event.type === 'click') {
+        var _tab$tabAnchor, _tab$tabAnchor2;
+
+        var currentScrollLeft = _this.state.tablistScrollLeft;
+        tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor = tab.tabAnchor) === null || _tab$tabAnchor === void 0 ? void 0 : _tab$tabAnchor.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest'
+        });
+        tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor2 = tab.tabAnchor) === null || _tab$tabAnchor2 === void 0 ? void 0 : _tab$tabAnchor2.focus();
+        var newScrollLeft = _this.tablist.current.scrollLeft;
+
+        if (newScrollLeft > currentScrollLeft) {
+          _this.tablist.current.scrollLeft += _this.OVERFLOW_BUTTON_OFFSET;
+        }
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "selectTabAt", function (event, _ref2) {
+      var index = _ref2.index,
+          onSelectionChange = _ref2.onSelectionChange;
+
+      _this.scrollTabIntoView(event, {
+        index: index
+      });
+
+      if (_this.state.selected !== index) {
+        _this.setState({
+          selected: index
+        });
+
+        if (typeof onSelectionChange === 'function') {
+          onSelectionChange(index);
+        }
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleTabKeyDown", function (onSelectionChange) {
+      return function (index, evt) {
+        if (match.matches(evt, [keys.Enter, keys.Space])) {
+          _this.selectTabAt(evt, {
+            index: index,
+            onSelectionChange: onSelectionChange
+          });
+        }
+
+        var nextIndex = function () {
+          if (match.matches(evt, [keys.ArrowLeft, keys.ArrowRight])) {
+            return _this.getNextIndex(index, _this.getDirection(evt));
+          }
+
+          if (match.match(evt, keys.Home)) {
+            return 0;
+          }
+
+          if (match.match(evt, keys.End)) {
+            return _this.getEnabledTabs().pop();
+          }
+        }();
+
+        var tab = _this.getTabAt(nextIndex);
+
+        if (match.matches(evt, [keys.ArrowLeft, keys.ArrowRight, keys.Home, keys.End])) {
+          var _tab$tabAnchor3;
+
+          evt.preventDefault();
+
+          if (_this.props.selectionMode !== 'manual') {
+            _this.selectTabAt(evt, {
+              index: nextIndex,
+              onSelectionChange: onSelectionChange
+            });
+          } else {
+            _this.scrollTabIntoView(evt, {
+              index: nextIndex
+            });
+          }
+
+          tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor3 = tab.tabAnchor) === null || _tab$tabAnchor3 === void 0 ? void 0 : _tab$tabAnchor3.focus();
+        }
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getTabs", function () {
+      return React__default["default"].Children.map(_this.props.children, function (tab) {
+        return tab;
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleTabClick", function (onSelectionChange) {
+      return function (index, evt) {
+        evt.preventDefault();
+
+        _this.selectTabAt(evt, {
+          index: index,
+          onSelectionChange: onSelectionChange
+        });
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "setTabAt", function (index, tabRef) {
+      _this["tab".concat(index)] = tabRef;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "overflowNavInterval", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowNavClick", function (_, _ref3) {
+      var _this$tablist2;
+
+      var direction = _ref3.direction,
+          _ref3$multiplier = _ref3.multiplier,
+          multiplier = _ref3$multiplier === void 0 ? 10 : _ref3$multiplier;
+
+      // account for overflow button appearing and causing tablist width change
+      var _this$tablist$current2 = (_this$tablist2 = _this.tablist) === null || _this$tablist2 === void 0 ? void 0 : _this$tablist2.current,
+          clientWidth = _this$tablist$current2.clientWidth,
+          scrollLeft = _this$tablist$current2.scrollLeft,
+          scrollWidth = _this$tablist$current2.scrollWidth;
+
+      if (direction === 1 && !scrollLeft) {
+        _this.tablist.current.scrollLeft += _this.OVERFLOW_BUTTON_OFFSET;
+      }
+
+      _this.tablist.current.scrollLeft += direction * multiplier;
+      var leftEdgeReached = direction === -1 && scrollLeft < _this.OVERFLOW_BUTTON_OFFSET;
+      var rightEdgeReached = direction === 1 && scrollLeft + clientWidth >= scrollWidth - _this.OVERFLOW_BUTTON_OFFSET;
+
+      if (leftEdgeReached || rightEdgeReached) {
+        if (leftEdgeReached) {
+          var _this$rightOverflowNa, _this$rightOverflowNa2;
+
+          (_this$rightOverflowNa = _this.rightOverflowNavButton) === null || _this$rightOverflowNa === void 0 ? void 0 : (_this$rightOverflowNa2 = _this$rightOverflowNa.current) === null || _this$rightOverflowNa2 === void 0 ? void 0 : _this$rightOverflowNa2.focus();
+        }
+
+        if (rightEdgeReached) {
+          var _this$leftOverflowNav, _this$leftOverflowNav2;
+
+          (_this$leftOverflowNav = _this.leftOverflowNavButton) === null || _this$leftOverflowNav === void 0 ? void 0 : (_this$leftOverflowNav2 = _this$leftOverflowNav.current) === null || _this$leftOverflowNav2 === void 0 ? void 0 : _this$leftOverflowNav2.focus();
+        }
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowNavMouseDown", function (event, _ref4) {
+      var direction = _ref4.direction;
+
+      // disregard mouse buttons aside from left mouse button
+      if (event.buttons !== 1) {
+        return;
+      }
+
+      _this.overflowNavInterval = setInterval(function () {
+        var _this$tablist3;
+
+        var _this$tablist$current3 = (_this$tablist3 = _this.tablist) === null || _this$tablist3 === void 0 ? void 0 : _this$tablist3.current,
+            clientWidth = _this$tablist$current3.clientWidth,
+            scrollLeft = _this$tablist$current3.scrollLeft,
+            scrollWidth = _this$tablist$current3.scrollWidth; // clear interval if scroll reaches left or right edge
+
+
+        var leftEdgeReached = direction === -1 && scrollLeft < _this.OVERFLOW_BUTTON_OFFSET;
+        var rightEdgeReached = direction === 1 && scrollLeft + clientWidth >= scrollWidth - _this.OVERFLOW_BUTTON_OFFSET;
+
+        if (leftEdgeReached || rightEdgeReached) {
+          clearInterval(_this.overflowNavInterval);
+        } // account for overflow button appearing and causing tablist width change
+
+
+        _this.handleOverflowNavClick(event, {
+          direction: direction
+        });
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowNavMouseUp", function () {
+      clearInterval(_this.overflowNavInterval);
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(Tabs, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$tablist4;
+
+      if (!this._debouncedHandleWindowResize) {
+        this._debouncedHandleWindowResize = debounce__default["default"](this._handleWindowResize, 200);
+      }
+
+      this._handleWindowResize();
+
+      window.addEventListener('resize', this._debouncedHandleWindowResize);
+
+      if (!this._debouncedHandleScroll) {
+        this._debouncedHandleScroll = debounce__default["default"](this._handleScroll, this.props.scrollDebounceWait);
+      } // scroll selected tab into view on mount
+
+
+      var _ref5 = ((_this$tablist4 = this.tablist) === null || _this$tablist4 === void 0 ? void 0 : _this$tablist4.current) || {},
+          tablistClientWidth = _ref5.clientWidth,
+          tablistScrollLeft = _ref5.scrollLeft,
+          tablistScrollWidth = _ref5.scrollWidth;
+
+      var tab = this.getTabAt(this.state.selected);
+      var horizontalOverflow = tablistScrollWidth > tablistClientWidth;
+
+      if (horizontalOverflow) {
+        var _tab$tabAnchor4, _tab$tabAnchor5, _tab$tabAnchor6;
+
+        var leftOverflowNavButtonHidden = (tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor4 = tab.tabAnchor) === null || _tab$tabAnchor4 === void 0 ? void 0 : _tab$tabAnchor4.getBoundingClientRect().right) < (tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor5 = tab.tabAnchor) === null || _tab$tabAnchor5 === void 0 ? void 0 : _tab$tabAnchor5.offsetParent.getBoundingClientRect().right);
+        var rightOverflowNavButtonHidden = tablistScrollLeft + tablistClientWidth === tablistScrollWidth;
+        this.props.scrollIntoView && (tab === null || tab === void 0 ? void 0 : (_tab$tabAnchor6 = tab.tabAnchor) === null || _tab$tabAnchor6 === void 0 ? void 0 : _tab$tabAnchor6.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest'
+        })); // account for overflow buttons in scroll position on mount
+
+        if (!leftOverflowNavButtonHidden && !rightOverflowNavButtonHidden) {
+          this.tablist.current.scrollLeft += this.OVERFLOW_BUTTON_OFFSET * 2;
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._debouncedHandleWindowResize) {
+        this._debouncedHandleWindowResize.cancel();
+      }
+
+      window.removeEventListener('resize', this._debouncedHandleWindowResize);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_, prevState) {
+      // compare current tablist properties to current state
+      var _this$tablist$current4 = this.tablist.current,
+          tablistClientWidth = _this$tablist$current4.clientWidth,
+          tablistScrollLeft = _this$tablist$current4.scrollLeft,
+          tablistScrollWidth = _this$tablist$current4.scrollWidth;
+      var _this$state = this.state,
+          currentStateClientWidth = _this$state.tablistClientWidth,
+          currentStateScrollLeft = _this$state.tablistScrollLeft,
+          currentStateScrollWidth = _this$state.tablistScrollWidth,
+          selected = _this$state.selected;
+
+      if (tablistClientWidth !== currentStateClientWidth || tablistScrollLeft !== currentStateScrollLeft || tablistScrollWidth !== currentStateScrollWidth) {
+        this.setState({
+          horizontalOverflow: tablistScrollWidth > tablistClientWidth,
+          tablistClientWidth: tablistClientWidth,
+          tablistScrollLeft: tablistScrollLeft,
+          tablistScrollWidth: tablistScrollWidth
+        });
+      }
+
+      if (this.props.scrollIntoView && prevState.selected !== selected) {
+        var _this$getTabAt, _this$getTabAt$tabAnc;
+
+        (_this$getTabAt = this.getTabAt(selected)) === null || _this$getTabAt === void 0 ? void 0 : (_this$getTabAt$tabAnc = _this$getTabAt.tabAnchor) === null || _this$getTabAt$tabAnc === void 0 ? void 0 : _this$getTabAt$tabAnc.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this,
+          _classNames,
+          _classNames2,
+          _classNames3;
+
+      var _this$props = this.props,
+          className = _this$props.className,
+          type = _this$props.type,
+          light = _this$props.light,
+          onSelectionChange = _this$props.onSelectionChange;
+          _this$props.scrollDebounceWait;
+          _this$props.scrollIntoView;
+          _this$props.selectionMode;
+          var tabContentClassName = _this$props.tabContentClassName,
+          leftOverflowButtonProps = _this$props.leftOverflowButtonProps,
+          rightOverflowButtonProps = _this$props.rightOverflowButtonProps,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var prefix = this.context;
+      /**
+       * The tab panel acts like a tab panel when the screen is wider, but acts
+       * like a select list when the screen is narrow.  In the wide case we want
+       * to allow the user to use the tab key to set the focus in the tab panel
+       * and then use the left and right arrow keys to navigate the tabs.  In the
+       * narrow case we want to use the tab key to select different options in
+       * the list.
+       *
+       * We set the tab index based on the different states so the browser will treat
+       * the whole tab panel as a single focus component when it looks like a tab
+       * panel and separate components when it looks like a select list.
+       */
+
+      var tabsWithProps = this.getTabs().map(function (tab, index) {
+        var tabIndex = index === _this2.state.selected ? 0 : -1;
+        var newTab = /*#__PURE__*/React__default["default"].cloneElement(tab, {
+          index: index,
+          selected: index === _this2.state.selected,
+          handleTabClick: _this2.handleTabClick(onSelectionChange),
+          tabIndex: tabIndex,
+          ref: function ref(e) {
+            _this2.setTabAt(index, e);
+          },
+          handleTabKeyDown: _this2.handleTabKeyDown(onSelectionChange)
+        });
+        return newTab;
+      });
+      var tabContentWithProps = React__default["default"].Children.map(tabsWithProps, function (tab) {
+        var _tab$props = tab.props,
+            tabId = _tab$props.id,
+            children = _tab$props.children,
+            selected = _tab$props.selected,
+            _tab$props$renderCont = _tab$props.renderContent,
+            Content = _tab$props$renderCont === void 0 ? TabContent["default"] : _tab$props$renderCont;
+        return /*#__PURE__*/React__default["default"].createElement(Content, {
+          id: tabId && "".concat(tabId, "__panel"),
+          className: tabContentClassName,
+          hidden: !selected,
+          selected: selected,
+          "aria-labelledby": tabId
+        }, children);
+      });
+      var leftOverflowNavButtonHidden = !this.state.horizontalOverflow || !this.state.tablistScrollLeft;
+      var rightOverflowNavButtonHidden = !this.state.horizontalOverflow || this.state.tablistScrollLeft + this.state.tablistClientWidth === this.state.tablistScrollWidth;
+      var classes = {
+        // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+        tabs: cx__default["default"](className, // `${prefix}--tabs`,
+        "".concat(prefix, "--tabs--scrollable"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable--container"), type === 'container'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable--light"), light), _classNames)),
+        // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+        tablist: cx__default["default"]( // `${prefix}--tabs__nav`,
+        "".concat(prefix, "--tabs--scrollable__nav")),
+        leftOverflowButtonClasses: cx__default["default"]((_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--tab--overflow-nav-button"), this.state.horizontalOverflow), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--tab--overflow-nav-button--hidden"), leftOverflowNavButtonHidden), _classNames2)),
+        rightOverflowButtonClasses: cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--tab--overflow-nav-button"), this.state.horizontalOverflow), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--tab--overflow-nav-button--hidden"), rightOverflowNavButtonHidden), _classNames3))
+      };
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+        className: classes.tabs
+      }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        "aria-hidden": "true",
+        "aria-label": "Scroll left",
+        className: classes.leftOverflowButtonClasses,
+        onClick: function onClick(_) {
+          return _this2.handleOverflowNavClick(_, {
+            direction: -1
+          });
+        },
+        onMouseDown: function onMouseDown(event) {
+          return _this2.handleOverflowNavMouseDown(event, {
+            direction: -1
+          });
+        },
+        onMouseUp: this.handleOverflowNavMouseUp,
+        ref: this.leftOverflowNavButton,
+        tabIndex: "-1",
+        type: "button"
+      }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronLeft, null))), !leftOverflowNavButtonHidden && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--tabs__overflow-indicator--left")
+      }), /*#__PURE__*/React__default["default"].createElement("ul", {
+        role: "tablist",
+        tabIndex: -1,
+        className: classes.tablist,
+        ref: this.tablist,
+        onScroll: this._debouncedHandleScroll
+      }, tabsWithProps), !rightOverflowNavButtonHidden && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--tabs__overflow-indicator--right")
+      }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        "aria-hidden": "true",
+        "aria-label": "Scroll right",
+        className: classes.rightOverflowButtonClasses,
+        onClick: function onClick(_) {
+          return _this2.handleOverflowNavClick(_, {
+            direction: 1
+          });
+        },
+        onMouseDown: function onMouseDown(event) {
+          return _this2.handleOverflowNavMouseDown(event, {
+            direction: 1
+          });
+        },
+        onMouseUp: this.handleOverflowNavMouseUp,
+        ref: this.rightOverflowNavButton,
+        tabIndex: "-1",
+        type: "button"
+      }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, null)))), tabContentWithProps);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref6, state) {
+      var selected = _ref6.selected;
+      var prevSelected = state.prevSelected;
+      return prevSelected === selected ? null : {
+        selected: selected,
+        prevSelected: selected
+      };
+    }
+    /**
+     * `scroll` event handler to save tablist clientWidth, scrollWidth, and
+     * scrollLeft
+     */
+
+  }]);
+
+  return Tabs;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(Tabs, "propTypes", {
+  /**
+   * Pass in a collection of <Tab> children to be rendered depending on the
+   * currently selected tab
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a className that is applied to the root <div> component for the
+   * <Tabs>
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the Tab content is hidden
+   */
+  hidden: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the props that describe the left overflow button
+   */
+  leftOverflowButtonProps: PropTypes__default["default"].object,
+
+  /**
+   * Specify whether or not to use the light component variant
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an `onClick` handler that is invoked when a <Tab> is
+   * clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onKeyDown` handler that is invoked when keyed
+   * navigation is triggered
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional handler that is called whenever the selection
+   * changes. This method is called with the index of the tab that was
+   * selected
+   */
+  onSelectionChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide the props that describe the right overflow button
+   */
+  rightOverflowButtonProps: PropTypes__default["default"].object,
+
+  /**
+   * Optionally provide a delay (in milliseconds) passed to the lodash
+   * debounce of the onScroll handler. This will impact the responsiveness
+   * of scroll arrow buttons rendering when scrolling to the first or last tab.
+   */
+  scrollDebounceWait: PropTypes__default["default"].number,
+
+  /**
+   * Choose whether or not to automatically scroll to newly selected tabs
+   * on component rerender
+   */
+  scrollIntoView: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an index for the currently selected <Tab>
+   */
+  selected: PropTypes__default["default"].number,
+
+  /**
+   * Choose whether or not to automatically change selection on focus
+   */
+  selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
+
+  /**
+   * Provide a className that is applied to the <TabContent> components
+   */
+  tabContentClassName: PropTypes__default["default"].string,
+
+  /**
+   * Provide the type of Tab
+   */
+  type: PropTypes__default["default"].oneOf(['default', 'container'])
+});
+
+_rollupPluginBabelHelpers.defineProperty(Tabs, "defaultProps", {
+  type: 'default',
+  scrollIntoView: true,
+  selected: 0,
+  selectionMode: 'automatic',
+  scrollDebounceWait: 150
+});
+
+_rollupPluginBabelHelpers.defineProperty(Tabs, "contextType", usePrefix.PrefixContext);
+
+exports["default"] = Tabs;

package/lib/components/Tabs/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var Tabs$2 = require('./next/Tabs.js');
+var Tabs$3 = require('./Tabs.js');
+var Tabs_Skeleton$1 = require('./Tabs.Skeleton.js');
+var Tabs_Skeleton = require('./next/Tabs.Skeleton.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var Tabs = FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs$2.Tabs : Tabs$3["default"];
+FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs_Skeleton["default"] : Tabs_Skeleton$1["default"];
+var Tabs$1 = Tabs;
+
+exports.IconTab = Tabs$2.IconTab;
+exports.Tab = Tabs$2.Tab;
+exports.TabList = Tabs$2.TabList;
+exports.TabPanel = Tabs$2.TabPanel;
+exports.TabPanels = Tabs$2.TabPanels;
+exports["default"] = Tabs$1;