@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/Tabs/next/Tabs.js

@@ -0,0 +1,664 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var debounce = require('lodash.debounce');
+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 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 = ["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 TabsContext = /*#__PURE__*/React__default["default"].createContext(); // Used to keep track of position in a tablist
+
+var TabContext = /*#__PURE__*/React__default["default"].createContext(); // Used to keep track of position in a list of tab panels
+
+var TabPanelContext = /*#__PURE__*/React__default["default"].createContext();
+
+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
+
+  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"
+
+
+  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,
+
+  /**
+   * Specify which content tab should be initially selected when the component
+   * is first rendered
+   */
+  defaultSelectedIndex: PropTypes__default["default"].number,
+
+  /**
+   * Provide an optional function which is called whenever the state of the
+   * `Tabs` changes
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * 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}
+ */
+
+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(false),
+      _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 = [];
+  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.filter(function (tab) {
+        return !tab.current.disabled;
+      });
+      var currentIndex = activeTabs.indexOf(tabs[activation === 'automatic' ? selectedIndex : activeIndex]);
+      var nextIndex = tabs.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
+
+      if (activation === 'automatic') {
+        setSelectedIndex(nextIndex);
+      } else if (activation === 'manual') {
+        setActiveIndex(nextIndex);
+      }
+
+      tabs[nextIndex].current.focus();
+    }
+  }
+
+  useEffectOnce.useEffectOnce(function () {
+    var tab = tabs[selectedIndex];
+
+    if (scrollIntoView && tab) {
+      tab.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  });
+  useEffectOnce.useEffectOnce(function () {
+    if (tabs[selectedIndex].current.disabled) {
+      var activeTabs = tabs.filter(function (tab) {
+        return !tab.current.disabled;
+      });
+
+      if (activeTabs.length > 0) {
+        var tab = activeTabs[0];
+        setSelectedIndex(tabs.indexOf(tab));
+      }
+    }
+  });
+  useIsomorphicEffect["default"](function () {
+    if (ref.current) {
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+    }
+
+    function handler() {
+      if (ref.current) {
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      }
+    }
+
+    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 () {
+    ref.current.scrollLeft = scrollLeft;
+  }, [scrollLeft]);
+  useIsomorphicEffect["default"](function () {
+    var tab = activation === 'manual' ? tabs[activeIndex] : tabs[selectedIndex];
+
+    if (tab) {
+      // The width of the "scroll buttons"
+      // The start and end position of the selected tab
+      var _tab$current$getBound = tab.current.getBoundingClientRect(),
+          tabWidth = _tab$current$getBound.width;
+
+      var start = tab.current.offsetLeft;
+      var end = tab.current.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
+
+      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
+
+      if (start < visibleStart) {
+        setScrollLeft(start - buttonWidth);
+      } // The end of teh tab is clipped and not visible
+
+
+      if (end > visibleEnd) {
+        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
+      }
+    }
+  }, [activation, activeIndex, selectedIndex]);
+  usePressable.usePressable(previousButton, {
+    onPress: function onPress(_ref3) {
+      var longPress = _ref3.longPress;
+
+      if (!longPress) {
+        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.length * 1.5, 0));
+      }
+    },
+    onLongPress: function onLongPress() {
+      return createLongPressBehavior(ref, 'backward', setScrollLeft);
+    }
+  });
+  usePressable.usePressable(nextButton, {
+    onPress: function onPress(_ref4) {
+      var longPress = _ref4.longPress;
+
+      if (!longPress) {
+        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.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) {
+    var ref = /*#__PURE__*/React__default["default"].createRef();
+    tabs.push(ref);
+    return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+      value: index
+    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+      ref: ref
+    }));
+  })), /*#__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']),
+
+  /**
+   * Provide an accessible label to be read when a user interacts with this
+   * component
+   */
+  'aria-label': PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide child elements to be rendered inside of `ContentTabs`.
+   * These elements should render a `ContentTab`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether component is contained type
+   */
+  contained: PropTypes__default["default"].bool,
+
+  /**
+   * If using `IconTab`, specify the size of the icon being used.
+   */
+  iconSize: PropTypes__default["default"].oneOf(['default', 'lg']),
+
+  /**
+   * 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,
+
+  /**
+   * 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
+};
+/**
+ * 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}
+ */
+
+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);
+  }
+
+  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
+
+    setScrollLeft(ref.current.scrollLeft);
+
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+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;
+      }
+
+      setSelectedIndex(index);
+
+      if (_onClick) {
+        _onClick(evt);
+      }
+    },
+    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]),
+
+  /**
+   * Provide child elements to be rendered inside of `Tab`.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to your Tab
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Whether your Tab is disabled.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  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 = {
+  /**
+   * Provide an icon to be rendered inside of `IconTab` as the visual label for Tab.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to your Tab
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the tooltip for the icon should be open when it first renders
+   */
+  defaultOpen: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
+   */
+  enterDelayMs: PropTypes__default["default"].number,
+
+  /**
+   * 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.
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  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 _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); // tabindex should only be 0 if no interactive content in children
+
+  React.useEffect(function () {
+    var interactiveContent = useNoInteractiveChildren.getInteractiveContent(panel.current);
+
+    if (interactiveContent) {
+      setTabIndex('-1');
+    }
+  }, []);
+  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 = {
+  /**
+   * Provide child elements to be rendered inside of `TabPanel`.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to TabPanel.
+   */
+  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 child elements to be rendered inside of `TabPanels`.
+   */
+  children: PropTypes__default["default"].node
+};
+
+exports.IconTab = IconTab;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
+exports.Tabs = Tabs;