@carbon/react 1.16.0 → 1.17.0-rc.0

package/lib/components/Tabs/Tabs.js

@@ -10,620 +10,699 @@
 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 cx = require('classnames');
 var debounce = require('lodash.debounce');
-var TabContent = require('../TabContent/TabContent.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var Tooltip = require('../Tooltip/next/Tooltip.js');
+var useControllableState = require('../../internal/useControllableState.js');
+var useEffectOnce = require('../../internal/useEffectOnce.js');
+var useId = require('../../internal/useId.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
+var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var usePressable = require('./usePressable.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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronLeft, _ChevronRight;
 
-var _excluded = ["className", "type", "light", "onSelectionChange", "scrollDebounceWait", "scrollIntoView", "selectionMode", "tabContentClassName", "leftOverflowButtonProps", "rightOverflowButtonProps"];
+var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown"],
+    _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
+    _excluded4 = ["children", "className"];
 
-var Tabs = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(Tabs, _React$Component);
+var TabsContext = /*#__PURE__*/React__default["default"].createContext(); // Used to keep track of position in a tablist
 
-  var _super = _rollupPluginBabelHelpers.createSuper(Tabs);
+var TabContext = /*#__PURE__*/React__default["default"].createContext(); // Used to keep track of position in a list of tab panels
 
-  function Tabs() {
-    var _this;
+var TabPanelContext = /*#__PURE__*/React__default["default"].createContext();
 
-    _rollupPluginBabelHelpers.classCallCheck(this, Tabs);
+function Tabs(_ref) {
+  var children = _ref.children,
+      _ref$defaultSelectedI = _ref.defaultSelectedIndex,
+      defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
+      _onChange = _ref.onChange,
+      controlledSelectedIndex = _ref.selectedIndex;
+  var baseId = useId.useId('ccs'); // The active index is used to track the element which has focus in our tablist
 
-    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));
+  var _useState = React.useState(defaultSelectedIndex),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      activeIndex = _useState2[0],
+      setActiveIndex = _useState2[1]; // The selected index is used for the tab/panel pairing which is "visible"
 
-    _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 _useControllableState = useControllableState.useControllableState({
+    value: controlledSelectedIndex,
+    defaultValue: defaultSelectedIndex,
+    onChange: function onChange(value) {
+      if (_onChange) {
+        _onChange({
+          selectedIndex: value
+        });
       }
+    }
+  }),
+      _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
+      selectedIndex = _useControllableState2[0],
+      setSelectedIndex = _useControllableState2[1];
+
+  var value = {
+    baseId: baseId,
+    activeIndex: activeIndex,
+    defaultSelectedIndex: defaultSelectedIndex,
+    setActiveIndex: setActiveIndex,
+    selectedIndex: selectedIndex,
+    setSelectedIndex: setSelectedIndex
+  };
+  return /*#__PURE__*/React__default["default"].createElement(TabsContext.Provider, {
+    value: value
+  }, children);
+}
+
+Tabs.propTypes = {
+  /**
+   * Provide child elements to be rendered inside of the `Tabs`.
+   * These elements should render either `TabsList` or `TabsPanels`
+   */
+  children: PropTypes__default["default"].node,
 
-      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;
-      }, []);
-    });
+  /**
+   * Specify which content tab should be initially selected when the component
+   * is first rendered
+   */
+  defaultSelectedIndex: PropTypes__default["default"].number,
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getNextIndex", function (index, direction) {
-      var enabledTabs = _this.getEnabledTabs();
+  /**
+   * Provide an optional function which is called whenever the state of the
+   * `Tabs` changes
+   */
+  onChange: PropTypes__default["default"].func,
 
-      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];
-    });
+  /**
+   * Control which content panel is currently selected. This puts the component
+   * in a controlled mode and should be used along with `onChange`
+   */
+  selectedIndex: PropTypes__default["default"].number
+};
+/**
+ * Get the next index for a given keyboard event given a count of the total
+ * items and the current index
+ * @param {Event} event
+ * @param {number} total
+ * @param {number} index
+ * @returns {number}
+ */
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getDirection", function (evt) {
-      if (match.match(evt, keys.ArrowLeft)) {
-        return -1;
-      }
+function getNextIndex(event, total, index) {
+  if (match.match(event, keys.ArrowRight)) {
+    return (index + 1) % total;
+  } else if (match.match(event, keys.ArrowLeft)) {
+    return (total + index - 1) % total;
+  } else if (match.match(event, keys.Home)) {
+    return 0;
+  } else if (match.match(event, keys.End)) {
+    return total - 1;
+  }
+}
+
+function TabList(_ref2) {
+  var _cx;
+
+  var _ref2$activation = _ref2.activation,
+      activation = _ref2$activation === void 0 ? 'automatic' : _ref2$activation,
+      label = _ref2['aria-label'],
+      children = _ref2.children,
+      customClassName = _ref2.className,
+      _ref2$contained = _ref2.contained,
+      contained = _ref2$contained === void 0 ? false : _ref2$contained,
+      iconSize = _ref2.iconSize,
+      leftOverflowButtonProps = _ref2.leftOverflowButtonProps,
+      light = _ref2.light,
+      rightOverflowButtonProps = _ref2.rightOverflowButtonProps,
+      _ref2$scrollDebounceW = _ref2.scrollDebounceWait,
+      scrollDebounceWait = _ref2$scrollDebounceW === void 0 ? 200 : _ref2$scrollDebounceW,
+      scrollIntoView = _ref2.scrollIntoView,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+
+  var _React$useContext = React__default["default"].useContext(TabsContext),
+      activeIndex = _React$useContext.activeIndex,
+      selectedIndex = _React$useContext.selectedIndex,
+      setSelectedIndex = _React$useContext.setSelectedIndex,
+      setActiveIndex = _React$useContext.setActiveIndex;
+
+  var prefix = usePrefix.usePrefix();
+  var ref = React.useRef(null);
+  var previousButton = React.useRef(null);
+  var nextButton = React.useRef(null);
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      scrollLeft = _useState6[0],
+      setScrollLeft = _useState6[1];
+
+  var className = cx__default["default"]("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _cx)); // Previous Button
+  // VISIBLE IF:
+  //   SCROLLABLE
+  //   AND SCROLL_LEFT > 0
+
+  var buttonWidth = 44;
+  var isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false; // Next Button
+  // VISIBLE IF:
+  //   SCROLLABLE
+  //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
+
+  var isNextButtonVisible = ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false;
+  var previousButtonClasses = cx__default["default"]("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--previous"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isPreviousButtonVisible));
+  var nextButtonClasses = cx__default["default"]("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--next"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isNextButtonVisible));
+  var tabs = React.useRef([]);
+  var debouncedOnScroll = React.useCallback(function () {
+    return debounce__default["default"](function (event) {
+      setScrollLeft(event.target.scrollLeft);
+    }, scrollDebounceWait);
+  }, [scrollDebounceWait]);
+
+  function onKeyDown(event) {
+    if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
+      event.preventDefault();
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
+      });
+      var currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      var nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
 
-      if (match.match(evt, keys.ArrowRight)) {
-        return 1;
+      if (activation === 'automatic') {
+        setSelectedIndex(nextIndex);
+      } else if (activation === 'manual') {
+        setActiveIndex(nextIndex);
       }
 
-      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;
-        }
-      }
-    });
+      tabs.current[nextIndex].focus();
+    }
+  }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "selectTabAt", function (event, _ref2) {
-      var index = _ref2.index,
-          onSelectionChange = _ref2.onSelectionChange;
+  useEffectOnce.useEffectOnce(function () {
+    var tab = tabs.current[selectedIndex];
 
-      _this.scrollTabIntoView(event, {
-        index: index
+    if (scrollIntoView && tab) {
+      tab.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  });
+  useEffectOnce.useEffectOnce(function () {
+    if (tabs.current[selectedIndex].disabled) {
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
       });
 
-      if (_this.state.selected !== index) {
-        _this.setState({
-          selected: index
-        });
-
-        if (typeof onSelectionChange === 'function') {
-          onSelectionChange(index);
-        }
+      if (activeTabs.length > 0) {
+        var tab = activeTabs[0];
+        setSelectedIndex(tabs.current.indexOf(tab));
       }
-    });
+    }
+  });
+  useIsomorphicEffect["default"](function () {
+    if (ref.current) {
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+    }
 
-    _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();
-        }
-      };
-    });
+    function handler() {
+      if (ref.current) {
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      }
+    }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getTabs", function () {
-      return React__default["default"].Children.map(_this.props.children, function (tab) {
-        return tab;
-      });
-    });
+    var debouncedHandler = debounce__default["default"](handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return function () {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []); // updates scroll location for all scroll behavior.
+
+  useIsomorphicEffect["default"](function () {
+    if (scrollLeft !== null) {
+      ref.current.scrollLeft = scrollLeft;
+    }
+  }, [scrollLeft]);
+  useIsomorphicEffect["default"](function () {
+    if (!isScrollable) {
+      return;
+    }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleTabClick", function (onSelectionChange) {
-      return function (index, evt) {
-        evt.preventDefault();
+    var tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
 
-        _this.selectTabAt(evt, {
-          index: index,
-          onSelectionChange: onSelectionChange
-        });
-      };
-    });
+    if (tab) {
+      // The width of the "scroll buttons"
+      // The start and end position of the selected tab
+      var _tab$getBoundingClien = tab.getBoundingClientRect(),
+          tabWidth = _tab$getBoundingClien.width;
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "setTabAt", function (index, tabRef) {
-      _this["tab".concat(index)] = tabRef;
-    });
+      var start = tab.offsetLeft;
+      var end = tab.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "overflowNavInterval", null);
+      var visibleStart = ref.current.scrollLeft + buttonWidth;
+      var visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth; // The beginning of the tab is clipped and not visible
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowNavClick", function (_, _ref3) {
-      var _this$tablist2;
+      if (start < visibleStart) {
+        setScrollLeft(start - buttonWidth);
+      } // The end of teh tab is clipped and not visible
 
-      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;
+      if (end > visibleEnd) {
+        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
       }
+    }
+  }, [activation, activeIndex, selectedIndex, isScrollable]);
+  usePressable.usePressable(previousButton, {
+    onPress: function onPress(_ref3) {
+      var longPress = _ref3.longPress;
 
-      _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();
-        }
+      if (!longPress) {
+        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowNavMouseDown", function (event, _ref4) {
-      var direction = _ref4.direction;
+    },
+    onLongPress: function onLongPress() {
+      return createLongPressBehavior(ref, 'backward', setScrollLeft);
+    }
+  });
+  usePressable.usePressable(nextButton, {
+    onPress: function onPress(_ref4) {
+      var longPress = _ref4.longPress;
 
-      // disregard mouse buttons aside from left mouse button
-      if (event.buttons !== 1) {
-        return;
+      if (!longPress) {
+        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
+    },
+    onLongPress: function onLongPress() {
+      return createLongPressBehavior(ref, 'forward', setScrollLeft);
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    "aria-hidden": "true",
+    "aria-label": "Scroll left",
+    ref: previousButton,
+    className: previousButtonClasses,
+    type: "button"
+  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronLeft, null))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": label,
+    ref: ref,
+    role: "tablist",
+    className: "".concat(prefix, "--tab--list"),
+    onScroll: debouncedOnScroll,
+    onKeyDown: onKeyDown
+  }), React__default["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+      value: index
+    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+      ref: function ref(node) {
+        tabs.current[index] = node;
+      }
+    }));
+  })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    "aria-hidden": "true",
+    "aria-label": "Scroll right",
+    ref: nextButton,
+    className: nextButtonClasses,
+    type: "button"
+  }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, null))));
+}
+
+TabList.propTypes = {
+  /**
+   * Specify whether the content tab should be activated automatically or
+   * manually
+   */
+  activation: PropTypes__default["default"].oneOf(['automatic', 'manual']),
 
-      _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);
-    });
+  /**
+   * Provide an accessible label to be read when a user interacts with this
+   * component
+   */
+  'aria-label': PropTypes__default["default"].string.isRequired,
 
-    return _this;
-  }
+  /**
+   * Provide child elements to be rendered inside of `ContentTabs`.
+   * These elements should render a `ContentTab`
+   */
+  children: PropTypes__default["default"].node,
 
-  _rollupPluginBabelHelpers.createClass(Tabs, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$tablist4;
+  /**
+   * Specify an optional className to be added to the container node
+   */
+  className: PropTypes__default["default"].string,
 
-      if (!this._debouncedHandleWindowResize) {
-        this._debouncedHandleWindowResize = debounce__default["default"](this._handleWindowResize, 200);
-      }
+  /**
+   * Specify whether component is contained type
+   */
+  contained: PropTypes__default["default"].bool,
 
-      this._handleWindowResize();
+  /**
+   * If using `IconTab`, specify the size of the icon being used.
+   */
+  iconSize: PropTypes__default["default"].oneOf(['default', 'lg']),
 
-      window.addEventListener('resize', this._debouncedHandleWindowResize);
+  /**
+   * Provide the props that describe the left overflow button
+   */
+  leftOverflowButtonProps: PropTypes__default["default"].object,
 
-      if (!this._debouncedHandleScroll) {
-        this._debouncedHandleScroll = debounce__default["default"](this._handleScroll, this.props.scrollDebounceWait);
-      } // scroll selected tab into view on mount
+  /**
+   * Specify whether or not to use the light component variant
+   */
+  light: PropTypes__default["default"].bool,
 
+  /**
+   * Provide the props that describe the right overflow button
+   */
+  rightOverflowButtonProps: PropTypes__default["default"].object,
 
-      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;
+  /**
+   * 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,
 
-      var tab = this.getTabAt(this.state.selected);
-      var horizontalOverflow = tablistScrollWidth > tablistClientWidth;
+  /**
+   * Choose whether or not to automatically scroll to newly selected tabs
+   * on component rerender
+   */
+  scrollIntoView: PropTypes__default["default"].bool
+};
+/**
+ * Helper function to setup the behavior when a button is "long pressed". This
+ * function will take a ref to the tablist, a direction, and a setter for
+ * scrollLeft and will update the scroll position within a
+ * requestAnimationFrame.
+ *
+ * It returns a cleanup function to be run when the long press is
+ * deactivated
+ *
+ * @param {RefObject} ref
+ * @param {'forward' | 'backward'} direction
+ * @param {Function} setScrollLeft
+ * @returns {Function}
+ */
 
-      if (horizontalOverflow) {
-        var _tab$tabAnchor4, _tab$tabAnchor5, _tab$tabAnchor6;
+function createLongPressBehavior(ref, direction, setScrollLeft) {
+  // We manually override the scroll behavior to be "auto". If it is set as
+  // smooth, this animation does not update correctly
+  var defaultScrollBehavior = ref.current.style['scroll-behavior'];
+  ref.current.style['scroll-behavior'] = 'auto';
+  var scrollDelta = direction === 'forward' ? 5 : -5;
+  var frameId = null;
+
+  function tick() {
+    ref.current.scrollLeft = ref.current.scrollLeft + scrollDelta;
+    frameId = requestAnimationFrame(tick);
+  }
 
-        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
+  frameId = requestAnimationFrame(tick);
+  return function () {
+    // Restore the previous scroll behavior
+    ref.current.style['scroll-behavior'] = defaultScrollBehavior; // Make sure that our `scrollLeft` value is in sync with the existing
+    // `ref` after our requestAnimationFrame loop above
 
-        if (!leftOverflowNavButtonHidden && !rightOverflowNavButtonHidden) {
-          this.tablist.current.scrollLeft += this.OVERFLOW_BUTTON_OFFSET * 2;
-        }
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._debouncedHandleWindowResize) {
-        this._debouncedHandleWindowResize.cancel();
-      }
+    setScrollLeft(ref.current.scrollLeft);
 
-      window.removeEventListener('resize', this._debouncedHandleWindowResize);
+    if (frameId) {
+      cancelAnimationFrame(frameId);
     }
-  }, {
-    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
-        });
+  };
+}
+
+var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5, ref) {
+  var _cx4;
+
+  var _ref5$as = _ref5.as,
+      BaseComponent = _ref5$as === void 0 ? 'button' : _ref5$as,
+      children = _ref5.children,
+      customClassName = _ref5.className,
+      disabled = _ref5.disabled,
+      _onClick = _ref5.onClick,
+      onKeyDown = _ref5.onKeyDown,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _React$useContext2 = React__default["default"].useContext(TabsContext),
+      selectedIndex = _React$useContext2.selectedIndex,
+      setSelectedIndex = _React$useContext2.setSelectedIndex,
+      baseId = _React$useContext2.baseId;
+
+  var index = React__default["default"].useContext(TabContext);
+  var id = "".concat(baseId, "-tab-").concat(index);
+  var panelId = "".concat(baseId, "-tabpanel-").concat(index);
+  var className = cx__default["default"]("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-controls": panelId,
+    "aria-disabled": disabled,
+    "aria-selected": selectedIndex === index,
+    ref: ref,
+    id: id,
+    role: "tab",
+    className: className,
+    disabled: disabled,
+    onClick: function onClick(evt) {
+      if (disabled) {
+        return;
       }
 
-      if (this.props.scrollIntoView && prevState.selected !== selected) {
-        var _this$getTabAt, _this$getTabAt$tabAnc;
+      setSelectedIndex(index);
 
-        (_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'
-        });
+      if (_onClick) {
+        _onClick(evt);
       }
-    }
-  }, {
-    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);
+    },
+    onKeyDown: onKeyDown,
+    tabIndex: selectedIndex === index ? '0' : '-1',
+    type: "button"
+  }), children);
+});
+Tab.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default button
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
 
-_rollupPluginBabelHelpers.defineProperty(Tabs, "propTypes", {
   /**
-   * Pass in a collection of <Tab> children to be rendered depending on the
-   * currently selected tab
+   * Provide child elements to be rendered inside of `Tab`.
    */
   children: PropTypes__default["default"].node,
 
   /**
-   * Provide a className that is applied to the root <div> component for the
-   * <Tabs>
+   * Specify an optional className to be added to your Tab
    */
   className: PropTypes__default["default"].string,
 
   /**
-   * Specify whether the Tab content is hidden
+   * Whether your Tab is disabled.
    */
-  hidden: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
 
   /**
-   * Provide the props that describe the left overflow button
+   * Provide a handler that is invoked when a user clicks on the control
    */
-  leftOverflowButtonProps: PropTypes__default["default"].object,
+  onClick: PropTypes__default["default"].func,
 
   /**
-   * Specify whether or not to use the light component variant
+   * Provide a handler that is invoked on the key down event for the control
    */
-  light: PropTypes__default["default"].bool,
+  onKeyDown: PropTypes__default["default"].func,
 
+  /*
+   * An optional parameter to allow overriding the anchor rendering.
+   * Useful for using Tab along with react-router or other client
+   * side router libraries.
+   **/
+  renderButton: PropTypes__default["default"].func
+};
+var IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref6, ref) {
+  var children = _ref6.children,
+      customClassName = _ref6.className,
+      _ref6$defaultOpen = _ref6.defaultOpen,
+      defaultOpen = _ref6$defaultOpen === void 0 ? false : _ref6$defaultOpen,
+      enterDelayMs = _ref6.enterDelayMs,
+      leaveDelayMs = _ref6.leaveDelayMs,
+      label = _ref6.label,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded3);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    align: "bottom",
+    defaultOpen: defaultOpen,
+    className: "".concat(prefix, "--icon-tooltip"),
+    enterDelayMs: enterDelayMs,
+    label: label,
+    leaveDelayMs: leaveDelayMs
+  }, /*#__PURE__*/React__default["default"].createElement(Tab, _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, rest), children));
+});
+IconTab.propTypes = {
   /**
-   * Optionally provide an `onClick` handler that is invoked when a <Tab> is
-   * clicked
+   * Provide an icon to be rendered inside of `IconTab` as the visual label for Tab.
    */
-  onClick: PropTypes__default["default"].func,
+  children: PropTypes__default["default"].node,
 
   /**
-   * Optionally provide an `onKeyDown` handler that is invoked when keyed
-   * navigation is triggered
+   * Specify an optional className to be added to your Tab
    */
-  onKeyDown: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string,
 
   /**
-   * Provide an optional handler that is called whenever the selection
-   * changes. This method is called with the index of the tab that was
-   * selected
+   * Specify whether the tooltip for the icon should be open when it first renders
    */
-  onSelectionChange: PropTypes__default["default"].func,
+  defaultOpen: PropTypes__default["default"].bool,
 
   /**
-   * Provide the props that describe the right overflow button
+   * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
    */
-  rightOverflowButtonProps: PropTypes__default["default"].object,
+  enterDelayMs: PropTypes__default["default"].number,
 
   /**
-   * 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.
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node it will not be
+   * announced to the screen reader.
    */
-  scrollDebounceWait: PropTypes__default["default"].number,
+  label: PropTypes__default["default"].node.isRequired,
 
   /**
-   * Choose whether or not to automatically scroll to newly selected tabs
-   * on component rerender
+   * Specify the duration in milliseconds to delay before hiding the tooltip
    */
-  scrollIntoView: PropTypes__default["default"].bool,
+  leaveDelayMs: PropTypes__default["default"].number
+};
+var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref7, forwardRef) {
+  var children = _ref7.children,
+      customClassName = _ref7.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref7, _excluded4);
+
+  var prefix = usePrefix.usePrefix();
+  var panel = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
+
+  var _useState7 = React.useState('0'),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      tabIndex = _useState8[0],
+      setTabIndex = _useState8[1];
+
+  var _useState9 = React.useState(false),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      interactiveContent = _useState10[0],
+      setInteractiveContent = _useState10[1];
+
+  var _React$useContext3 = React__default["default"].useContext(TabsContext),
+      selectedIndex = _React$useContext3.selectedIndex,
+      baseId = _React$useContext3.baseId;
+
+  var index = React__default["default"].useContext(TabPanelContext);
+  var id = "".concat(baseId, "-tabpanel-").concat(index);
+  var tabId = "".concat(baseId, "-tab-").concat(index);
+  var className = cx__default["default"]("".concat(prefix, "--tab-content"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab-content--interactive"), interactiveContent));
+  useEffectOnce.useEffectOnce(function () {
+    if (!panel.current) {
+      return;
+    }
 
-  /**
-   * Optionally provide an index for the currently selected <Tab>
-   */
-  selected: PropTypes__default["default"].number,
+    var content = useNoInteractiveChildren.getInteractiveContent(panel.current);
+
+    if (content) {
+      setInteractiveContent(true);
+      setTabIndex('-1');
+    }
+  }); // tabindex should only be 0 if no interactive content in children
+
+  React.useEffect(function () {
+    if (!panel.current) {
+      return;
+    }
+
+    var node = panel.current;
+
+    function callback() {
+      var content = useNoInteractiveChildren.getInteractiveContent(node);
 
+      if (content) {
+        setInteractiveContent(true);
+        setTabIndex('-1');
+      } else {
+        setInteractiveContent(false);
+        setTabIndex('0');
+      }
+    }
+
+    var observer = new MutationObserver(callback);
+    observer.observe(node, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect(node);
+    };
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-labelledby": tabId,
+    id: id,
+    className: className,
+    ref: ref,
+    role: "tabpanel",
+    tabIndex: tabIndex,
+    hidden: selectedIndex !== index
+  }), children);
+});
+TabPanel.propTypes = {
   /**
-   * Choose whether or not to automatically change selection on focus
+   * Provide child elements to be rendered inside of `TabPanel`.
    */
-  selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
+  children: PropTypes__default["default"].node,
 
   /**
-   * Provide a className that is applied to the <TabContent> components
+   * Specify an optional className to be added to TabPanel.
    */
-  tabContentClassName: PropTypes__default["default"].string,
-
+  className: PropTypes__default["default"].string
+};
+
+function TabPanels(_ref8) {
+  var children = _ref8.children;
+  return React__default["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
+      value: index
+    }, child);
+  });
+}
+
+TabPanels.propTypes = {
   /**
-   * Provide the type of Tab
+   * Provide child elements to be rendered inside of `TabPanels`.
    */
-  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;
+  children: PropTypes__default["default"].node
+};
+
+exports.IconTab = IconTab;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
+exports.Tabs = Tabs;