@itwin/itwinui-react 3.0.0-dev.12 → 3.0.0-dev.14

package/cjs/core/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.Tabs = void 0;
+exports.Tabs = exports.Tab = void 0;
 const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -9,450 +9,504 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const Tab_js_1 = require('./Tab.js');
-const styles_js_1 = tslib_1.__importDefault(require('../../styles.js'));
-/**
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' />,
- *   <Tab label='Label 2' />,
- *   <Tab label='Label 3' />,
- * ];
- * <Tabs labels={tabs} />
- *
- * @example
- * <Tabs orientation='vertical' labels={tabs} />
- *
- * @example
- * const tabsWithSublabels = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- * ];
- * <Tabs labels={tabsWithSublabels} activeIndex={1} />
- *
- * @example
- * const tabsWithIcons = [
- *   <Tab label='Label 1' icon={<SvgPlaceholder />} />,
- *   <Tab label='Label 2' icon={<SvgPlaceholder />} />,
- * ];
- * <Tabs labels={tabsWithIcons} type='pill' />
- */
-const Tabs = (props) => {
-  // Separate actions from props to avoid adding it to the DOM (using {...rest})
-  let actions;
-  if (props.type !== 'pill' && props.actions) {
-    actions = props.actions;
-    props = { ...props };
-    delete props.actions;
-  }
-  // Separate overflowOptions from props to avoid adding it to the DOM (using {...rest})
-  let overflowOptions;
-  if (
-    props.type !== 'borderless' &&
-    props.type !== 'pill' &&
-    props.overflowOptions
-  ) {
-    overflowOptions = props.overflowOptions;
-    props = { ...props };
-    delete props.overflowOptions;
-  }
+const Icon_js_1 = require('../Icon/Icon.js');
+const TabsWrapper = React.forwardRef((props, ref) => {
   const {
-    labels,
-    activeIndex,
-    onTabSelected,
-    focusActivationMode = 'auto',
+    className,
+    children,
+    orientation = 'horizontal',
     type = 'default',
+    focusActivationMode = 'auto',
     color = 'blue',
-    orientation = 'horizontal',
-    tabsClassName,
-    contentClassName,
-    wrapperClassName,
-    children,
+    defaultValue,
+    value: activeValueProp,
+    onValueChange,
     ...rest
   } = props;
+  const [activeValue, setActiveValue] = (0, index_js_1.useControlledState)(
+    defaultValue,
+    activeValueProp,
+    onValueChange,
+  );
+  const [stripeProperties, setStripeProperties] = React.useState({});
+  const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
+  const idPrefix = (0, index_js_1.useId)();
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-tabs-wrapper',
+        `iui-${orientation}`,
+        className,
+      ),
+      ...rest,
+      style: { ...stripeProperties, ...props?.style },
+      ref: ref,
+    },
+    React.createElement(
+      TabsContext.Provider,
+      {
+        value: {
+          orientation,
+          type,
+          activeValue,
+          setActiveValue,
+          setStripeProperties,
+          idPrefix,
+          focusActivationMode,
+          hasSublabel,
+          setHasSublabel,
+          color,
+        },
+      },
+      children,
+    ),
+  );
+});
+TabsWrapper.displayName = 'Tabs.Wrapper';
+const TabList = React.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const { type, hasSublabel, color } = (0, index_js_1.useSafeContext)(
+    TabsContext,
+  );
   const isClient = (0, index_js_1.useIsClient)();
   const tablistRef = React.useRef(null);
   const [tablistSizeRef, tabsWidth] = (0, index_js_1.useContainerWidth)(
     type !== 'default',
   );
-  const refs = (0, index_js_1.useMergedRefs)(tablistRef, tablistSizeRef);
-  const [currentActiveIndex, setCurrentActiveIndex] = React.useState(() =>
-    activeIndex != null
-      ? (0, index_js_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
-      : 0,
+  const refs = (0, index_js_1.useMergedRefs)(ref, tablistRef, tablistSizeRef);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-tabs',
+        `iui-${type}`,
+        {
+          'iui-green': color === 'green',
+          'iui-animated': type !== 'default' && isClient,
+          'iui-not-animated': type !== 'default' && !isClient,
+          'iui-large': hasSublabel,
+        },
+        className,
+      ),
+      role: 'tablist',
+      ref: refs,
+      ...rest,
+    },
+    React.createElement(
+      TabListContext.Provider,
+      {
+        value: {
+          tabsWidth,
+        },
+      },
+      children,
+    ),
   );
+});
+TabList.displayName = 'Tabs.TabList';
+const Tab = React.forwardRef((props, forwardedRef) => {
+  const { className, children, value, label, ...rest } = props;
+  const {
+    orientation,
+    activeValue,
+    setActiveValue,
+    type,
+    setStripeProperties,
+    idPrefix,
+    focusActivationMode,
+  } = (0, index_js_1.useSafeContext)(TabsContext);
+  const { tabsWidth } = (0, index_js_1.useSafeContext)(TabListContext);
+  const tabRef = React.useRef();
+  const isActive = activeValue === value;
+  const isActiveRef = (0, index_js_1.useLatestRef)(isActive);
+  // Scroll to active tab only on initial render
   (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    if (activeIndex != null && currentActiveIndex !== activeIndex) {
-      setCurrentActiveIndex(
-        (0, index_js_1.getBoundedValue)(activeIndex, 0, labels.length - 1),
-      );
-    }
-  }, [activeIndex, currentActiveIndex, labels.length]);
-  // CSS custom properties to place the active stripe
-  const [stripeProperties, setStripeProperties] = React.useState({});
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    if (type !== 'default' && tablistRef.current != undefined) {
-      const activeTab = tablistRef.current.children[currentActiveIndex];
-      const activeTabRect = activeTab.getBoundingClientRect();
-      setStripeProperties({
-        ...(orientation === 'horizontal' && {
-          '--stripe-width': `${activeTabRect.width}px`,
-          '--stripe-left': `${activeTab.offsetLeft}px`,
-        }),
-        ...(orientation === 'vertical' && {
-          '--stripe-height': `${activeTabRect.height}px`,
-          '--stripe-top': `${activeTab.offsetTop}px`,
-        }),
+    if (isActiveRef.current) {
+      tabRef.current?.parentElement?.scrollTo({
+        [orientation === 'horizontal' ? 'left' : 'top']:
+          tabRef.current?.[
+            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+          ] - 4,
+        behavior: 'instant', // not using 'smooth' to reduce layout shift on page load
       });
     }
-  }, [currentActiveIndex, type, orientation, tabsWidth]);
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  React.useEffect(() => {
-    if (tablistRef.current && focusedIndex !== undefined) {
-      const tab = tablistRef.current.querySelectorAll(
-        `.${styles_js_1.default['iui-tab']}`,
-      )[focusedIndex];
-      tab?.focus();
-    }
-  }, [focusedIndex]);
-  const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    setHasSublabel(
-      type !== 'pill' && // pill tabs should never have sublabels
-        !!tablistRef.current?.querySelector(
-          `.${styles_js_1.default['iui-tab-description']}`,
-        ),
-    );
-  }, [type]);
-  const enableHorizontalScroll = React.useCallback((e) => {
-    const ownerDoc = tablistRef.current;
-    if (ownerDoc === null) {
-      return;
-    }
-    let scrollLeft = ownerDoc?.scrollLeft ?? 0;
-    if (e.deltaY > 0 || e.deltaX > 0) {
-      scrollLeft += 25;
-    } else if (e.deltaY < 0 || e.deltaX < 0) {
-      scrollLeft -= 25;
-    }
-    ownerDoc.scrollLeft = scrollLeft;
   }, []);
-  // allow normal mouse wheels to scroll horizontally for horizontal overflow
-  React.useEffect(() => {
-    const ownerDoc = tablistRef.current;
-    if (ownerDoc === null) {
-      return;
-    }
-    if (!overflowOptions?.useOverflow || orientation === 'vertical') {
-      ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
-      return;
-    }
-    ownerDoc.addEventListener('wheel', enableHorizontalScroll);
-  }, [overflowOptions?.useOverflow, orientation, enableHorizontalScroll]);
-  const isTabHidden = (activeTab, isVertical) => {
-    const ownerDoc = tablistRef.current;
-    if (ownerDoc === null) {
-      return;
-    }
-    const fadeBuffer = isVertical
-      ? ownerDoc.offsetHeight * 0.05
-      : ownerDoc.offsetWidth * 0.05;
-    const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
-    const visibleEnd = isVertical
-      ? ownerDoc.scrollTop + ownerDoc.offsetHeight
-      : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
-    const tabStart = isVertical ? activeTab.offsetTop : activeTab.offsetLeft;
-    const tabEnd = isVertical
-      ? activeTab.offsetTop + activeTab.offsetHeight
-      : activeTab.offsetLeft + activeTab.offsetWidth;
-    if (
-      tabStart > visibleStart + fadeBuffer &&
-      tabEnd < visibleEnd - fadeBuffer
-    ) {
-      return 0; // tab is visible
-    } else if (tabStart < visibleStart + fadeBuffer) {
-      return -1; // tab is before visible section
-    } else {
-      return 1; // tab is after visible section
-    }
-  };
-  const easeInOutQuad = (time, beginning, change, duration) => {
-    if ((time /= duration / 2) < 1) {
-      return (change / 2) * time * time + beginning;
-    }
-    return (-change / 2) * (--time * (time - 2) - 1) + beginning;
+  const updateStripe = () => {
+    const currentTabRect = tabRef.current?.getBoundingClientRect();
+    setStripeProperties({
+      '--iui-tabs-stripe-size':
+        orientation === 'horizontal'
+          ? `${currentTabRect?.width}px`
+          : `${currentTabRect?.height}px`,
+      '--iui-tabs-stripe-position':
+        orientation === 'horizontal'
+          ? `${tabRef.current?.offsetLeft}px`
+          : `${tabRef.current?.offsetTop}px`,
+    });
   };
-  const scrollToTab = React.useCallback(
-    (list, activeTab, duration, isVertical, tabPlacement) => {
-      const start = isVertical ? list.scrollTop : list.scrollLeft;
-      let change = 0;
-      let currentTime = 0;
-      const increment = 20;
-      const fadeBuffer = isVertical
-        ? list.offsetHeight * 0.05
-        : list.offsetWidth * 0.05;
-      if (tabPlacement < 0) {
-        // if tab is before visible section
-        change = isVertical
-          ? activeTab.offsetTop - list.scrollTop
-          : activeTab.offsetLeft - list.scrollLeft;
-        change -= fadeBuffer; // give some space so the active tab isn't covered by the fade
-      } else {
-        // tab is after visible section
-        change = isVertical
-          ? activeTab.offsetTop -
-            (list.scrollTop + list.offsetHeight) +
-            activeTab.offsetHeight
-          : activeTab.offsetLeft -
-            (list.scrollLeft + list.offsetWidth) +
-            activeTab.offsetWidth;
-        change += fadeBuffer; // give some space so the active tab isn't covered by the fade
-      }
-      const animateScroll = () => {
-        currentTime += increment;
-        const val = easeInOutQuad(currentTime, start, change, duration);
-        if (isVertical) {
-          list.scrollTop = val;
-        } else {
-          list.scrollLeft = val;
-        }
-        if (currentTime < duration) {
-          setTimeout(animateScroll, increment);
-        }
-      };
-      animateScroll();
-    },
-    [],
-  );
-  // scroll to active tab if it is not visible with overflow
+  // CSS custom properties to place the active stripe
   (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    setTimeout(() => {
-      const ownerDoc = tablistRef.current;
-      if (
-        ownerDoc !== null &&
-        overflowOptions?.useOverflow &&
-        currentActiveIndex !== undefined
-      ) {
-        const activeTab = ownerDoc.querySelectorAll(
-          `.${styles_js_1.default['iui-tab']}`,
-        )[currentActiveIndex];
-        const isVertical = orientation === 'vertical';
-        const tabPlacement = isTabHidden(activeTab, isVertical);
-        if (tabPlacement) {
-          scrollToTab(ownerDoc, activeTab, 100, isVertical, tabPlacement);
-        }
-      }
-    }, 50);
+    if (type !== 'default' && isActive) {
+      updateStripe();
+    }
   }, [
-    overflowOptions?.useOverflow,
-    currentActiveIndex,
-    focusedIndex,
+    type,
     orientation,
-    scrollToTab,
+    isActive,
+    tabsWidth, // to fix visual artifact on initial render
   ]);
-  const [scrollingPlacement, setScrollingPlacement] = React.useState(undefined);
-  const determineScrollingPlacement = React.useCallback(() => {
-    const ownerDoc = tablistRef.current;
-    if (ownerDoc === null) {
-      return;
-    }
-    const isVertical = orientation === 'vertical';
-    const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
-    const visibleEnd = isVertical
-      ? ownerDoc.scrollTop + ownerDoc.offsetHeight
-      : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
-    const totalTabsSpace = isVertical
-      ? ownerDoc.scrollHeight
-      : ownerDoc.scrollWidth;
-    if (
-      Math.abs(visibleStart - 0) < 1 &&
-      Math.abs(visibleEnd - totalTabsSpace) < 1
-    ) {
-      setScrollingPlacement(undefined);
-    } else if (Math.abs(visibleStart - 0) < 1) {
-      setScrollingPlacement('start');
-    } else if (Math.abs(visibleEnd - totalTabsSpace) < 1) {
-      setScrollingPlacement('end');
-    } else {
-      setScrollingPlacement('center');
-    }
-  }, [orientation, setScrollingPlacement]);
-  // apply correct mask when tabs list is resized
-  const [resizeRef] = (0, index_js_1.useResizeObserver)(
-    determineScrollingPlacement,
-  );
-  resizeRef(tablistRef?.current);
-  // check if overflow tabs are scrolled to far edges
-  React.useEffect(() => {
-    const ownerDoc = tablistRef.current;
-    if (ownerDoc === null) {
-      return;
-    }
-    if (!overflowOptions?.useOverflow) {
-      ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
-      return;
-    }
-    ownerDoc.addEventListener('scroll', determineScrollingPlacement);
-  }, [overflowOptions?.useOverflow, determineScrollingPlacement]);
-  const onTabClick = React.useCallback(
-    (index) => {
-      if (onTabSelected) {
-        onTabSelected(index);
-      }
-      setCurrentActiveIndex(index);
-    },
-    [onTabSelected],
-  );
   const onKeyDown = (event) => {
-    // alt + arrow keys are used by browser / assistive technologies
     if (event.altKey) {
       return;
     }
-    const isTabDisabled = (index) => {
-      const tab = labels[index];
-      return React.isValidElement(tab) && tab.props.disabled;
-    };
-    let newIndex = focusedIndex ?? currentActiveIndex;
-    /** focus next tab if delta is +1, previous tab if -1 */
-    const focusTab = (delta = +1) => {
-      do {
-        newIndex = (newIndex + delta + labels.length) % labels.length;
-      } while (isTabDisabled(newIndex) && newIndex !== focusedIndex);
-      setFocusedIndex(newIndex);
-      focusActivationMode === 'auto' && onTabClick(newIndex);
-    };
+    const allTabs = Array.from(
+      event.currentTarget.parentElement?.children ?? [],
+    );
+    const nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
+    const previousTab =
+      tabRef.current?.previousElementSibling ?? allTabs.at(-1);
     switch (event.key) {
       case 'ArrowDown': {
         if (orientation === 'vertical') {
-          focusTab(+1);
+          nextTab?.focus();
           event.preventDefault();
         }
         break;
       }
       case 'ArrowRight': {
         if (orientation === 'horizontal') {
-          focusTab(+1);
+          nextTab?.focus();
           event.preventDefault();
         }
         break;
       }
       case 'ArrowUp': {
         if (orientation === 'vertical') {
-          focusTab(-1);
+          previousTab?.focus();
           event.preventDefault();
         }
         break;
       }
       case 'ArrowLeft': {
         if (orientation === 'horizontal') {
-          focusTab(-1);
+          previousTab?.focus();
           event.preventDefault();
         }
         break;
       }
-      case 'Enter':
-      case ' ':
-      case 'Spacebar': {
-        event.preventDefault();
-        if (focusActivationMode === 'manual' && focusedIndex !== undefined) {
-          onTabClick(focusedIndex);
-        }
-        break;
-      }
       default:
         break;
     }
   };
-  const createTab = React.useCallback(
-    (label, index) => {
-      const onClick = () => {
-        setFocusedIndex(index);
-        onTabClick(index);
-      };
-      return React.createElement(
-        'li',
-        { key: index },
-        !React.isValidElement(label)
-          ? React.createElement(Tab_js_1.Tab, {
-              label: label,
-              className: (0, classnames_1.default)({
-                'iui-active': index === currentActiveIndex,
-              }),
-              tabIndex: index === currentActiveIndex ? 0 : -1,
-              onClick: onClick,
-              'aria-selected': index === currentActiveIndex,
-            })
-          : React.cloneElement(label, {
-              active: index === currentActiveIndex,
-              'aria-selected': index === currentActiveIndex,
-              tabIndex: index === currentActiveIndex ? 0 : -1,
-              onClick: (args) => {
-                onClick();
-                label.props.onClick?.(args);
-              },
-            }),
-      );
+  // use first tab as active if no `value` passed.
+  const setInitialActiveRef = React.useCallback(
+    (element) => {
+      if (activeValue !== undefined) {
+        return;
+      }
+      if (element?.matches(':first-of-type')) {
+        setActiveValue(value);
+      }
+    },
+    [activeValue, setActiveValue, value],
+  );
+  return React.createElement(
+    index_js_1.ButtonBase,
+    {
+      className: (0, classnames_1.default)('iui-tab', className),
+      role: 'tab',
+      tabIndex: isActive ? 0 : -1,
+      'aria-selected': isActive,
+      'aria-controls': `${idPrefix}-panel-${value}`,
+      ref: (0, index_js_1.useMergedRefs)(
+        tabRef,
+        forwardedRef,
+        setInitialActiveRef,
+      ),
+      ...rest,
+      id: `${idPrefix}-tab-${value}`,
+      onClick: (0, index_js_1.mergeEventHandlers)(props.onClick, () =>
+        setActiveValue(value),
+      ),
+      onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
+      onFocus: (0, index_js_1.mergeEventHandlers)(props.onFocus, () => {
+        tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        if (focusActivationMode === 'auto' && !props.disabled) {
+          setActiveValue(value);
+        }
+      }),
     },
-    [currentActiveIndex, onTabClick],
+    label ? React.createElement(exports.Tabs.TabLabel, null, label) : children,
+  );
+});
+Tab.displayName = 'Tabs.Tab';
+// ----------------------------------------------------------------------------
+// Tabs.TabIcon component
+const TabIcon = React.forwardRef((props, ref) => {
+  return React.createElement(Icon_js_1.Icon, {
+    ...props,
+    className: (0, classnames_1.default)('iui-tab-icon', props?.className),
+    ref: ref,
+  });
+});
+TabIcon.displayName = 'Tabs.TabIcon';
+// ----------------------------------------------------------------------------
+// Tabs.TabLabel component
+const TabLabel = index_js_1.polymorphic.span('iui-tab-label');
+TabLabel.displayName = 'Tabs.TabLabel';
+// ----------------------------------------------------------------------------
+// Tabs.TabDescription component
+const TabDescription = React.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const { hasSublabel, setHasSublabel } = (0, index_js_1.useSafeContext)(
+    TabsContext,
   );
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    if (!hasSublabel) {
+      setHasSublabel(true);
+    }
+  }, [hasSublabel, setHasSublabel]);
   return React.createElement(
     index_js_1.Box,
     {
+      as: 'span',
+      className: (0, classnames_1.default)('iui-tab-description', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+TabDescription.displayName = 'Tabs.TabDescription';
+const TabsActions = React.forwardRef((props, ref) => {
+  const { wrapperProps, className, children, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      ...wrapperProps,
       className: (0, classnames_1.default)(
-        'iui-tabs-wrapper',
-        `iui-${orientation}`,
-        wrapperClassName,
+        'iui-tabs-actions-wrapper',
+        wrapperProps?.className,
       ),
-      style: stripeProperties,
     },
     React.createElement(
       index_js_1.Box,
       {
-        as: 'ul',
-        className: (0, classnames_1.default)(
-          'iui-tabs',
-          `iui-${type}`,
-          {
-            'iui-green': color === 'green',
-            'iui-animated': type !== 'default' && isClient,
-            'iui-not-animated': type !== 'default' && !isClient,
-            'iui-large': hasSublabel,
-          },
-          tabsClassName,
-        ),
-        'data-iui-overflow': overflowOptions?.useOverflow,
-        'data-iui-scroll-placement': scrollingPlacement,
-        role: 'tablist',
-        ref: refs,
-        onKeyDown: onKeyDown,
+        className: (0, classnames_1.default)('iui-tabs-actions', className),
+        ref: ref,
         ...rest,
       },
-      labels.map((label, index) => createTab(label, index)),
+      children,
     ),
-    actions &&
-      React.createElement(
-        index_js_1.Box,
-        { className: 'iui-tabs-actions-wrapper' },
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-tabs-actions' },
-          actions,
-        ),
-      ),
+  );
+});
+TabsActions.displayName = 'Tabs.Actions';
+const TabsPanel = React.forwardRef((props, ref) => {
+  const { value, className, children, ...rest } = props;
+  const { activeValue, idPrefix } = (0, index_js_1.useSafeContext)(TabsContext);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-tabs-content', className),
+      'aria-labelledby': `${idPrefix}-tab-${value}`,
+      role: 'tabpanel',
+      hidden: activeValue !== value ? true : undefined,
+      ref: ref,
+      ...rest,
+      id: `${idPrefix}-panel-${value}`,
+    },
+    children,
+  );
+});
+TabsPanel.displayName = 'Tabs.Panel';
+const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
+  let actions;
+  if (props.type !== 'pill' && props.actions) {
+    actions = props.actions;
+    props = { ...props };
+    delete props.actions;
+  }
+  const {
+    labels,
+    onTabSelected,
+    focusActivationMode,
+    color,
+    activeIndex: activeIndexProp,
+    tabsClassName,
+    contentClassName,
+    wrapperClassName,
+    children,
+    ...rest
+  } = props;
+  const [activeIndex, setActiveIndex] = (0, index_js_1.useControlledState)(
+    0,
+    activeIndexProp,
+    onTabSelected,
+  );
+  return React.createElement(
+    TabsWrapper,
+    {
+      className: wrapperClassName,
+      focusActivationMode: focusActivationMode,
+      color: color,
+      value: `${activeIndex}`,
+      onValueChange: (value) => setActiveIndex(Number(value)),
+      ...rest,
+    },
+    React.createElement(
+      TabList,
+      { className: tabsClassName, ref: forwardedRef },
+      labels.map((label, index) => {
+        const tabValue = `${index}`;
+        return React.isValidElement(label)
+          ? React.cloneElement(label, {
+              value: tabValue,
+            })
+          : React.createElement(LegacyTab, {
+              key: index,
+              value: tabValue,
+              label: label,
+            });
+      }),
+    ),
+    actions && React.createElement(TabsActions, null, actions),
     children &&
       React.createElement(
-        index_js_1.Box,
-        {
-          className: (0, classnames_1.default)(
-            'iui-tabs-content',
-            contentClassName,
-          ),
-          role: 'tabpanel',
-        },
+        TabsPanel,
+        { value: `${activeIndex}`, className: contentClassName },
         children,
       ),
   );
-};
-exports.Tabs = Tabs;
+});
+LegacyTabsComponent.displayName = 'Tabs';
+/**
+ * Legacy Tab component.
+ * For full functionality use composition API.
+ *
+ * Individual tab component to be used in the `labels` prop of `Tabs`.
+ * @example
+ * const tabs = [
+ *   <Tab label='Label 1' sublabel='Description 1' />,
+ *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
+ * ];
+ */
+const LegacyTab = React.forwardRef((props, forwardedRef) => {
+  const { label, sublabel, startIcon, children, value, ...rest } = props;
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Tab,
+      { ...rest, value: value, ref: forwardedRef },
+      startIcon && React.createElement(TabIcon, null, startIcon),
+      React.createElement(TabLabel, null, label),
+      sublabel && React.createElement(TabDescription, null, sublabel),
+      children,
+    ),
+  );
+});
+exports.Tab = LegacyTab;
+/**
+ * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ * `Tabs.Tab` and `Tabs.Panel` can be associated with each other by passing them the same `value`.
+ * @example
+ * <Tabs.Wrapper>
+ *   <Tabs.TabList>
+ *     <Tabs.Tab value='tab1' label='Label 1' />
+ *     <Tabs.Tab value='tab2' label='Label 2' />
+ *     <Tabs.Tab value='tab3' label='Label 3' />
+ *   </Tabs.TabList>
+ *   <Tabs.ActionsWrapper>
+ *     <Tabs.Actions>
+ *       <Button>Sample Button</Button>
+ *     </Tabs.Actions>
+ *   </Tabs.ActionsWrapper>
+ *   <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
+ *   <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
+ *   <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
+ * </Tabs.Wrapper>
+ *
+ * @example
+ * <Tabs orientation='vertical'/>
+ *
+ * @example
+ * <Tabs.Wrapper focusActivationMode='manual'>
+ *  <Tabs.Tab value='sample'>
+ *   <Tabs.TabIcon>
+ *     <SvgPlaceholder />
+ *   </Tabs.TabIcon>
+ *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+ *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+ *  </Tabs.Tab>
+ * </Tabs.Wrapper>
+ */
+exports.Tabs = Object.assign(LegacyTabsComponent, {
+  /**
+   * A wrapper component for Tabs
+   */
+  Wrapper: TabsWrapper,
+  /**
+   * Tablist subcomponent which contains all of the tab subcomponents.
+   * @example
+   * <Tabs.TabList>
+   *   <Tabs.Tab value='tab1' label='Label 1' />
+   *   <Tabs.Tab value='tab2' label='Label 2' />
+   *   <Tabs.Tab value='tab3' label='Label 3' />
+   * </Tabs.TabList>
+   *
+   * @example
+   * <Tabs.TabList>
+   *   <Tabs.Tab value='tab1' label='Green Tab' />
+   * </Tabs.TabList>
+   *
+   * @example
+   * <Tabs.TabList focusActivationMode='manual'>
+   *   <Tabs.Tab value='tab1' label='Manual Focus Tab' />
+   * </Tabs.TabList>
+   */
+  TabList: TabList,
+  /**
+   * Tab subcomponent which is used for each of the tabs.
+   * @example
+   * <Tabs.Tab value='tab1' label='Label 1' />
+   *
+   * @example
+   * <Tabs.Tab value='sample'>
+   *   <Tabs.TabIcon>
+   *     <SvgPlaceholder />
+   *   </Tabs.TabIcon>
+   *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+   *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+   * </Tabs.Tab>
+   *
+   */
+  Tab: Tab,
+  /**
+   * Tab icon subcomponent which places an icon on the left side of the tab.
+   */
+  TabIcon: TabIcon,
+  /**
+   * Tab label subcomponent which holds the tab's label.
+   */
+  TabLabel: TabLabel,
+  /**
+   * Tab description subcomponent which places a description under the tab label.
+   */
+  TabDescription: TabDescription,
+  /**
+   * Tab actions subcomponent which contains action buttons that are placed at the end of the tabs.
+   */
+  Actions: TabsActions,
+  /**
+   * Tab panel subcomponent which contains the tab's content.
+   * @example
+   * <Tabs.Panel value='tab1'>
+   *   Sample Panel
+   * </Tabs.Panel>
+   */
+  Panel: TabsPanel,
+});
+const TabsContext = React.createContext(undefined);
+const TabListContext = React.createContext(undefined);
 exports.default = exports.Tabs;