@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Tabs/Tabs.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
@@ -27,53 +27,41 @@ import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.j
 
 var _ChevronLeft, _ChevronRight;
 
-var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
-    _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
-    _excluded4 = ["children", "className"];
+const TabsContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a tablist
 
-var TabsContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a tablist
+const TabContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a list of tab panels
 
-var TabContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a list of tab panels
-
-var TabPanelContext = /*#__PURE__*/React__default.createContext();
+const 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"
+  let {
+    children,
+    defaultSelectedIndex = 0,
+    onChange,
+    selectedIndex: controlledSelectedIndex
+  } = _ref;
+  const baseId = useId('ccs'); // The active index is used to track the element which has focus in our tablist
 
+  const [activeIndex, setActiveIndex] = useState(defaultSelectedIndex); // The selected index is used for the tab/panel pairing which is "visible"
 
-  var _useControllableState = useControllableState({
+  const [selectedIndex, setSelectedIndex] = useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
-    onChange: function onChange(value) {
-      if (_onChange) {
-        _onChange({
+    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
+  });
+  const value = {
+    baseId,
+    activeIndex,
+    defaultSelectedIndex,
+    setActiveIndex,
+    selectedIndex,
+    setSelectedIndex
   };
   return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
     value: value
@@ -127,65 +115,60 @@ function getNextIndex(event, total, index) {
 }
 
 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 hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(function (child) {
-    return child.props.secondaryLabel;
-  }).length;
-  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'), _defineProperty(_cx, "".concat(prefix, "--tabs--tall"), hasSecondaryLabelTabs), _cx)); // Previous Button
+  let {
+    activation = 'automatic',
+    'aria-label': label,
+    children,
+    className: customClassName,
+    contained = false,
+    iconSize,
+    leftOverflowButtonProps,
+    light,
+    rightOverflowButtonProps,
+    scrollDebounceWait = 200,
+    scrollIntoView,
+    ...rest
+  } = _ref2;
+  const {
+    activeIndex,
+    selectedIndex,
+    setSelectedIndex,
+    setActiveIndex
+  } = React__default.useContext(TabsContext);
+  const prefix = usePrefix();
+  const ref = useRef(null);
+  const previousButton = useRef(null);
+  const nextButton = useRef(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+  const [scrollLeft, setScrollLeft] = useState(null);
+  const hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(child => child.props.secondaryLabel).length;
+  const className = cx(`${prefix}--tabs`, customClassName, {
+    [`${prefix}--tabs--contained`]: contained,
+    [`${prefix}--tabs--light`]: light,
+    [`${prefix}--tabs__icon--default`]: iconSize === 'default',
+    [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
+    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
+  }); // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
 
-  var buttonWidth = 44;
-  var isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false; // Next Button
+  const buttonWidth = 44;
+  const 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) {
+  const isNextButtonVisible = ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false;
+  const previousButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
+    [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible
+  });
+  const nextButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, {
+    [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible
+  });
+  const tabs = useRef([]);
+  const debouncedOnScroll = useCallback(() => {
+    return debounce(event => {
       setScrollLeft(event.target.scrollLeft);
     }, scrollDebounceWait);
   }, [scrollDebounceWait]);
@@ -193,11 +176,11 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      var activeTabs = tabs.current.filter(function (tab) {
+      const activeTabs = tabs.current.filter(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)]);
+      const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
 
       if (activation === 'automatic') {
         setSelectedIndex(nextIndex);
@@ -209,8 +192,8 @@ function TabList(_ref2) {
     }
   }
 
-  useEffectOnce(function () {
-    var tab = tabs.current[selectedIndex];
+  useEffectOnce(() => {
+    const tab = tabs.current[selectedIndex];
 
     if (scrollIntoView && tab) {
       tab.scrollIntoView({
@@ -219,19 +202,19 @@ function TabList(_ref2) {
       });
     }
   });
-  useEffectOnce(function () {
+  useEffectOnce(() => {
     if (tabs.current[selectedIndex].disabled) {
-      var activeTabs = tabs.current.filter(function (tab) {
+      const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
       });
 
       if (activeTabs.length > 0) {
-        var tab = activeTabs[0];
+        const tab = activeTabs[0];
         setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
   });
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (ref.current) {
       setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
     }
@@ -242,37 +225,37 @@ function TabList(_ref2) {
       }
     }
 
-    var debouncedHandler = debounce(handler, 200);
+    const debouncedHandler = debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
-    return function () {
+    return () => {
       debouncedHandler.cancel();
       window.removeEventListener('resize', debouncedHandler);
     };
   }, []); // updates scroll location for all scroll behavior.
 
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (scrollLeft !== null) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (!isScrollable) {
       return;
     }
 
-    var tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
+    const 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
+      const {
+        width: tabWidth
+      } = tab.getBoundingClientRect();
+      const start = tab.offsetLeft;
+      const 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
+      const visibleStart = ref.current.scrollLeft + buttonWidth;
+      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth; // The beginning of the tab is clipped and not visible
 
       if (start < visibleStart) {
         setScrollLeft(start - buttonWidth);
@@ -285,28 +268,36 @@ function TabList(_ref2) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable]);
   usePressable(previousButton, {
-    onPress: function onPress(_ref3) {
-      var longPress = _ref3.longPress;
+    onPress(_ref3) {
+      let {
+        longPress
+      } = _ref3;
 
       if (!longPress) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
     },
-    onLongPress: function onLongPress() {
+
+    onLongPress() {
       return createLongPressBehavior(ref, 'backward', setScrollLeft);
     }
+
   });
   usePressable(nextButton, {
-    onPress: function onPress(_ref4) {
-      var longPress = _ref4.longPress;
+    onPress(_ref4) {
+      let {
+        longPress
+      } = _ref4;
 
       if (!longPress) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
     },
-    onLongPress: function onLongPress() {
+
+    onLongPress() {
       return createLongPressBehavior(ref, 'forward', setScrollLeft);
     }
+
   });
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
@@ -320,17 +311,19 @@ function TabList(_ref2) {
     "aria-label": label,
     ref: ref,
     role: "tablist",
-    className: "".concat(prefix, "--tab--list"),
+    className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown
-  }), React__default.Children.map(children, function (child, index) {
+  }), React__default.Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
-      value: index
+      value: {
+        index,
+        hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }, /*#__PURE__*/React__default.cloneElement(child, {
-      ref: function ref(node) {
+      ref: node => {
         tabs.current[index] = node;
-      },
-      hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
@@ -421,10 +414,10 @@ TabList.propTypes = {
 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'];
+  let defaultScrollBehavior = ref.current.style['scroll-behavior'];
   ref.current.style['scroll-behavior'] = 'auto';
-  var scrollDelta = direction === 'forward' ? 5 : -5;
-  var frameId = null;
+  const scrollDelta = direction === 'forward' ? 5 : -5;
+  let frameId = null;
 
   function tick() {
     ref.current.scrollLeft = ref.current.scrollLeft + scrollDelta;
@@ -432,7 +425,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
   }
 
   frameId = requestAnimationFrame(tick);
-  return function () {
+  return () => {
     // 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
@@ -445,31 +438,34 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
   };
 }
 
-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,
-      secondaryLabel = _ref5.secondaryLabel,
-      hasSecondaryLabel = _ref5.hasSecondaryLabel,
-      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));
+const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
+  let {
+    as: BaseComponent = 'button',
+    children,
+    className: customClassName,
+    disabled,
+    onClick,
+    onKeyDown,
+    secondaryLabel,
+    renderIcon: Icon,
+    ...rest
+  } = _ref5;
+  const prefix = usePrefix();
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    baseId
+  } = React__default.useContext(TabsContext);
+  const {
+    index,
+    hasSecondaryLabel
+  } = React__default.useContext(TabContext);
+  const id = `${baseId}-tab-${index}`;
+  const panelId = `${baseId}-tabpanel-${index}`;
+  const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, customClassName, {
+    [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
+    [`${prefix}--tabs__nav-item--disabled`]: disabled
+  });
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
@@ -479,24 +475,30 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
     role: "tab",
     className: className,
     disabled: disabled,
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (disabled) {
         return;
       }
 
       setSelectedIndex(index);
 
-      if (_onClick) {
-        _onClick(evt);
+      if (onClick) {
+        onClick(evt);
       }
     },
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--tabs__nav-item-label")
-  }, children), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--tabs__nav-item-secondary-label")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tabs__nav-item-label-wrapper`
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--tabs__nav-item-label`
+  }, children), Icon && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tabs__nav-item--icon`
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 16
+  }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tabs__nav-item-secondary-label`
   }, secondaryLabel));
 });
 Tab.propTypes = {
@@ -520,11 +522,6 @@ Tab.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /*
-   * Internal use only, determines wether a tab should render as a secondary label tab
-   **/
-  hasSecondaryLabel: PropTypes.bool,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -542,28 +539,34 @@ Tab.propTypes = {
    **/
   renderButton: PropTypes.func,
 
+  /**
+   * Optional prop to render an icon next to the label.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
    **/
   secondaryLabel: PropTypes.string
 };
-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);
+const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref) {
+  let {
+    children,
+    className: customClassName,
+    defaultOpen = false,
+    enterDelayMs,
+    leaveDelayMs,
+    label,
+    ...rest
+  } = _ref6;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
-    className: "".concat(prefix, "--icon-tooltip"),
+    className: `${prefix}--icon-tooltip`,
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
@@ -606,39 +609,33 @@ IconTab.propTypes = {
    */
   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 () {
+const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, forwardRef) {
+  let {
+    children,
+    className: customClassName,
+    ...rest
+  } = _ref7;
+  const prefix = usePrefix();
+  const panel = useRef(null);
+  const ref = useMergedRefs([forwardRef, panel]);
+  const [tabIndex, setTabIndex] = useState('0');
+  const [interactiveContent, setInteractiveContent] = useState(false);
+  const {
+    selectedIndex,
+    baseId
+  } = React__default.useContext(TabsContext);
+  const index = React__default.useContext(TabPanelContext);
+  const id = `${baseId}-tabpanel-${index}`;
+  const tabId = `${baseId}-tab-${index}`;
+  const className = cx(`${prefix}--tab-content`, customClassName, {
+    [`${prefix}--tab-content--interactive`]: interactiveContent
+  });
+  useEffectOnce(() => {
     if (!panel.current) {
       return;
     }
 
-    var content = getInteractiveContent(panel.current);
+    const content = getInteractiveContent(panel.current);
 
     if (content) {
       setInteractiveContent(true);
@@ -646,15 +643,17 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
     }
   }); // tabindex should only be 0 if no interactive content in children
 
-  useEffect(function () {
+  useEffect(() => {
     if (!panel.current) {
       return;
     }
 
-    var node = panel.current;
+    const {
+      current: node
+    } = panel;
 
     function callback() {
-      var content = getInteractiveContent(node);
+      const content = getInteractiveContent(node);
 
       if (content) {
         setInteractiveContent(true);
@@ -665,12 +664,12 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
       }
     }
 
-    var observer = new MutationObserver(callback);
+    const observer = new MutationObserver(callback);
     observer.observe(node, {
       childList: true,
       subtree: true
     });
-    return function () {
+    return () => {
       observer.disconnect(node);
     };
   }, []);
@@ -697,8 +696,10 @@ TabPanel.propTypes = {
 };
 
 function TabPanels(_ref8) {
-  var children = _ref8.children;
-  return React__default.Children.map(children, function (child, index) {
+  let {
+    children
+  } = _ref8;
+  return React__default.Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
       value: index
     }, child);