@carbon/react 1.16.0-rc.0 → 1.17.0-rc.0

package/es/components/Tabs/next/Tabs.js

@@ -1,692 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
-import cx from 'classnames';
-import debounce from 'lodash.debounce';
-import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import { Tooltip } from '../../Tooltip/next/Tooltip.js';
-import { useControllableState } from '../../../internal/useControllableState.js';
-import { useEffectOnce } from '../../../internal/useEffectOnce.js';
-import { useId } from '../../../internal/useId.js';
-import useIsomorphicEffect from '../../../internal/useIsomorphicEffect.js';
-import { useMergedRefs } from '../../../internal/useMergedRefs.js';
-import { getInteractiveContent } from '../../../internal/useNoInteractiveChildren.js';
-import { usePrefix } from '../../../internal/usePrefix.js';
-import { usePressable } from './usePressable.js';
-import { matches, match } from '../../../internal/keyboard/match.js';
-import { ArrowRight, ArrowLeft, Home, End } from '../../../internal/keyboard/keys.js';
-
-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.createContext(); // Used to keep track of position in a tablist
-
-var TabContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a list of tab panels
-
-var TabPanelContext = /*#__PURE__*/React__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('ccs'); // The active index is used to track the element which has focus in our tablist
-
-  var _useState = useState(defaultSelectedIndex),
-      _useState2 = _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({
-    value: controlledSelectedIndex,
-    defaultValue: defaultSelectedIndex,
-    onChange: function onChange(value) {
-      if (_onChange) {
-        _onChange({
-          selectedIndex: value
-        });
-      }
-    }
-  }),
-      _useControllableState2 = _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.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.node,
-
-  /**
-   * Specify which content tab should be initially selected when the component
-   * is first rendered
-   */
-  defaultSelectedIndex: PropTypes.number,
-
-  /**
-   * Provide an optional function which is called whenever the state of the
-   * `Tabs` changes
-   */
-  onChange: PropTypes.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.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(event, ArrowRight)) {
-    return (index + 1) % total;
-  } else if (match(event, ArrowLeft)) {
-    return (total + index - 1) % total;
-  } else if (match(event, Home)) {
-    return 0;
-  } else if (match(event, 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 = _objectWithoutProperties(_ref2, _excluded);
-
-  var _React$useContext = React__default.useContext(TabsContext),
-      activeIndex = _React$useContext.activeIndex,
-      selectedIndex = _React$useContext.selectedIndex,
-      setSelectedIndex = _React$useContext.setSelectedIndex,
-      setActiveIndex = _React$useContext.setActiveIndex;
-
-  var prefix = usePrefix();
-  var ref = useRef(null);
-  var previousButton = useRef(null);
-  var nextButton = useRef(null);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isScrollable = _useState4[0],
-      setIsScrollable = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      scrollLeft = _useState6[0],
-      setScrollLeft = _useState6[1];
-
-  var className = cx("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _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("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--previous"), _defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isPreviousButtonVisible));
-  var nextButtonClasses = cx("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--next"), _defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isNextButtonVisible));
-  var tabs = useRef([]);
-  var debouncedOnScroll = useCallback(function () {
-    return debounce(function (event) {
-      setScrollLeft(event.target.scrollLeft);
-    }, scrollDebounceWait);
-  }, [scrollDebounceWait]);
-
-  function onKeyDown(event) {
-    if (matches(event, [ArrowRight, ArrowLeft, Home, 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 (activation === 'automatic') {
-        setSelectedIndex(nextIndex);
-      } else if (activation === 'manual') {
-        setActiveIndex(nextIndex);
-      }
-
-      tabs.current[nextIndex].focus();
-    }
-  }
-
-  useEffectOnce(function () {
-    var tab = tabs.current[selectedIndex];
-
-    if (scrollIntoView && tab) {
-      tab.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  });
-  useEffectOnce(function () {
-    if (tabs.current[selectedIndex].disabled) {
-      var activeTabs = tabs.current.filter(function (tab) {
-        return !tab.disabled;
-      });
-
-      if (activeTabs.length > 0) {
-        var tab = activeTabs[0];
-        setSelectedIndex(tabs.current.indexOf(tab));
-      }
-    }
-  });
-  useIsomorphicEffect(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(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return function () {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []); // updates scroll location for all scroll behavior.
-
-  useIsomorphicEffect(function () {
-    if (scrollLeft !== null) {
-      ref.current.scrollLeft = scrollLeft;
-    }
-  }, [scrollLeft]);
-  useIsomorphicEffect(function () {
-    if (!isScrollable) {
-      return;
-    }
-
-    var tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
-
-    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;
-
-      var start = tab.offsetLeft;
-      var end = tab.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, isScrollable]);
-  usePressable(previousButton, {
-    onPress: function onPress(_ref3) {
-      var longPress = _ref3.longPress;
-
-      if (!longPress) {
-        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
-      }
-    },
-    onLongPress: function onLongPress() {
-      return createLongPressBehavior(ref, 'backward', setScrollLeft);
-    }
-  });
-  usePressable(nextButton, {
-    onPress: function onPress(_ref4) {
-      var longPress = _ref4.longPress;
-
-      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.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("button", _extends({
-    "aria-hidden": "true",
-    "aria-label": "Scroll left",
-    ref: previousButton,
-    className: previousButtonClasses,
-    type: "button"
-  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React__default.createElement(ChevronLeft, null))), /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    "aria-label": label,
-    ref: ref,
-    role: "tablist",
-    className: "".concat(prefix, "--tab--list"),
-    onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
-  }), React__default.Children.map(children, function (child, index) {
-    return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
-      value: index
-    }, /*#__PURE__*/React__default.cloneElement(child, {
-      ref: function ref(node) {
-        tabs.current[index] = node;
-      }
-    }));
-  })), /*#__PURE__*/React__default.createElement("button", _extends({
-    "aria-hidden": "true",
-    "aria-label": "Scroll right",
-    ref: nextButton,
-    className: nextButtonClasses,
-    type: "button"
-  }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(ChevronRight, null))));
-}
-
-TabList.propTypes = {
-  /**
-   * Specify whether the content tab should be activated automatically or
-   * manually
-   */
-  activation: PropTypes.oneOf(['automatic', 'manual']),
-
-  /**
-   * Provide an accessible label to be read when a user interacts with this
-   * component
-   */
-  'aria-label': PropTypes.string.isRequired,
-
-  /**
-   * Provide child elements to be rendered inside of `ContentTabs`.
-   * These elements should render a `ContentTab`
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be added to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether component is contained type
-   */
-  contained: PropTypes.bool,
-
-  /**
-   * If using `IconTab`, specify the size of the icon being used.
-   */
-  iconSize: PropTypes.oneOf(['default', 'lg']),
-
-  /**
-   * Provide the props that describe the left overflow button
-   */
-  leftOverflowButtonProps: PropTypes.object,
-
-  /**
-   * Specify whether or not to use the light component variant
-   */
-  light: PropTypes.bool,
-
-  /**
-   * Provide the props that describe the right overflow button
-   */
-  rightOverflowButtonProps: PropTypes.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.number,
-
-  /**
-   * Choose whether or not to automatically scroll to newly selected tabs
-   * on component rerender
-   */
-  scrollIntoView: PropTypes.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.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 = _objectWithoutProperties(_ref5, _excluded2);
-
-  var prefix = usePrefix();
-
-  var _React$useContext2 = React__default.useContext(TabsContext),
-      selectedIndex = _React$useContext2.selectedIndex,
-      setSelectedIndex = _React$useContext2.setSelectedIndex,
-      baseId = _React$useContext2.baseId;
-
-  var index = React__default.useContext(TabContext);
-  var id = "".concat(baseId, "-tab-").concat(index);
-  var panelId = "".concat(baseId, "-tabpanel-").concat(index);
-  var className = cx("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _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.oneOfType([PropTypes.string, PropTypes.elementType]),
-
-  /**
-   * Provide child elements to be rendered inside of `Tab`.
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be added to your Tab
-   */
-  className: PropTypes.string,
-
-  /**
-   * Whether your Tab is disabled.
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Provide a handler that is invoked when a user clicks on the control
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Provide a handler that is invoked on the key down event for the control
-   */
-  onKeyDown: PropTypes.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.func
-};
-var IconTab = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref6, _excluded3);
-
-  var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    align: "bottom",
-    defaultOpen: defaultOpen,
-    className: "".concat(prefix, "--icon-tooltip"),
-    enterDelayMs: enterDelayMs,
-    label: label,
-    leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default.createElement(Tab, _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.node,
-
-  /**
-   * Specify an optional className to be added to your Tab
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the tooltip for the icon should be open when it first renders
-   */
-  defaultOpen: PropTypes.bool,
-
-  /**
-   * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
-   */
-  enterDelayMs: PropTypes.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.node.isRequired,
-
-  /**
-   * Specify the duration in milliseconds to delay before hiding the tooltip
-   */
-  leaveDelayMs: PropTypes.number
-};
-var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, forwardRef) {
-  var children = _ref7.children,
-      customClassName = _ref7.className,
-      rest = _objectWithoutProperties(_ref7, _excluded4);
-
-  var prefix = usePrefix();
-  var panel = useRef(null);
-  var ref = useMergedRefs([forwardRef, panel]);
-
-  var _useState7 = useState('0'),
-      _useState8 = _slicedToArray(_useState7, 2),
-      tabIndex = _useState8[0],
-      setTabIndex = _useState8[1];
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      interactiveContent = _useState10[0],
-      setInteractiveContent = _useState10[1];
-
-  var _React$useContext3 = React__default.useContext(TabsContext),
-      selectedIndex = _React$useContext3.selectedIndex,
-      baseId = _React$useContext3.baseId;
-
-  var index = React__default.useContext(TabPanelContext);
-  var id = "".concat(baseId, "-tabpanel-").concat(index);
-  var tabId = "".concat(baseId, "-tab-").concat(index);
-  var className = cx("".concat(prefix, "--tab-content"), customClassName, _defineProperty({}, "".concat(prefix, "--tab-content--interactive"), interactiveContent));
-  useEffectOnce(function () {
-    if (!panel.current) {
-      return;
-    }
-
-    var content = getInteractiveContent(panel.current);
-
-    if (content) {
-      setInteractiveContent(true);
-      setTabIndex('-1');
-    }
-  }); // tabindex should only be 0 if no interactive content in children
-
-  useEffect(function () {
-    if (!panel.current) {
-      return;
-    }
-
-    var node = panel.current;
-
-    function callback() {
-      var content = 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.createElement("div", _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.node,
-
-  /**
-   * Specify an optional className to be added to TabPanel.
-   */
-  className: PropTypes.string
-};
-
-function TabPanels(_ref8) {
-  var children = _ref8.children;
-  return React__default.Children.map(children, function (child, index) {
-    return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
-      value: index
-    }, child);
-  });
-}
-
-TabPanels.propTypes = {
-  /**
-   * Provide child elements to be rendered inside of `TabPanels`.
-   */
-  children: PropTypes.node
-};
-
-export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs };