@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/Tabs/Tabs.js

@@ -1,41 +1,16 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Tabs = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const Tab_js_1 = require("./Tab.js");
-const styles_js_1 = __importDefault(require("../../styles.js"));
+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
@@ -64,354 +39,420 @@ const styles_js_1 = __importDefault(require("../../styles.js"));
  * <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 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 {
+    labels,
+    activeIndex,
+    onTabSelected,
+    focusActivationMode = 'auto',
+    type = 'default',
+    color = 'blue',
+    orientation = 'horizontal',
+    tabsClassName,
+    contentClassName,
+    wrapperClassName,
+    children,
+    ...rest
+  } = props;
+  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,
+  );
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    if (activeIndex != null && currentActiveIndex !== activeIndex) {
+      setCurrentActiveIndex(
+        (0, index_js_1.getBoundedValue)(activeIndex, 0, labels.length - 1),
+      );
     }
-    // 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;
+  }, [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`,
+        }),
+      });
     }
-    const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
-    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);
-    (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`,
-                }),
-            });
-        }
-    }, [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 === null || tab === void 0 ? void 0 : tab.focus();
-        }
-    }, [focusedIndex]);
-    const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
-        setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_js_1.default['iui-tab-description']}`)));
-    }, [type]);
-    const enableHorizontalScroll = React.useCallback((e) => {
-        var _a;
-        const ownerDoc = tablistRef.current;
-        if (ownerDoc === null) {
-            return;
-        }
-        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 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 === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
-            ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
-            return;
-        }
-        ownerDoc.addEventListener('wheel', enableHorizontalScroll);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : 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
+  }, [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 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;
         }
-        else if (tabStart < visibleStart + fadeBuffer) {
-            return -1; // tab is before visible section
+        if (currentTime < duration) {
+          setTimeout(animateScroll, increment);
         }
-        else {
-            return 1; // tab is after visible section
+      };
+      animateScroll();
+    },
+    [],
+  );
+  // scroll to active tab if it is not visible with overflow
+  (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);
+  }, [
+    overflowOptions?.useOverflow,
+    currentActiveIndex,
+    focusedIndex,
+    orientation,
+    scrollToTab,
+  ]);
+  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;
     };
-    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;
+    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 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
+    switch (event.key) {
+      case 'ArrowDown': {
+        if (orientation === 'vertical') {
+          focusTab(+1);
+          event.preventDefault();
         }
-        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
+        break;
+      }
+      case 'ArrowRight': {
+        if (orientation === 'horizontal') {
+          focusTab(+1);
+          event.preventDefault();
         }
-        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
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        setTimeout(() => {
-            const ownerDoc = tablistRef.current;
-            if (ownerDoc !== null &&
-                (overflowOptions === null || overflowOptions === void 0 ? void 0 : 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);
-    }, [
-        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
-        currentActiveIndex,
-        focusedIndex,
-        orientation,
-        scrollToTab,
-    ]);
-    const [scrollingPlacement, setScrollingPlacement] = React.useState(undefined);
-    const determineScrollingPlacement = React.useCallback(() => {
-        const ownerDoc = tablistRef.current;
-        if (ownerDoc === null) {
-            return;
+        break;
+      }
+      case 'ArrowUp': {
+        if (orientation === 'vertical') {
+          focusTab(-1);
+          event.preventDefault();
         }
-        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);
+        break;
+      }
+      case 'ArrowLeft': {
+        if (orientation === 'horizontal') {
+          focusTab(-1);
+          event.preventDefault();
         }
-        else if (Math.abs(visibleStart - 0) < 1) {
-            setScrollingPlacement('start');
+        break;
+      }
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        event.preventDefault();
+        if (focusActivationMode === 'manual' && focusedIndex !== undefined) {
+          onTabClick(focusedIndex);
         }
-        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 === null || tablistRef === void 0 ? void 0 : tablistRef.current);
-    // check if overflow tabs are scrolled to far edges
-    React.useEffect(() => {
-        const ownerDoc = tablistRef.current;
-        if (ownerDoc === null) {
-            return;
-        }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
-            ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
-            return;
-        }
-        ownerDoc.addEventListener('scroll', determineScrollingPlacement);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : 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 !== null && focusedIndex !== void 0 ? 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);
-        };
-        switch (event.key) {
-            case 'ArrowDown': {
-                if (orientation === 'vertical') {
-                    focusTab(+1);
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowRight': {
-                if (orientation === 'horizontal') {
-                    focusTab(+1);
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowUp': {
-                if (orientation === 'vertical') {
-                    focusTab(-1);
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                if (orientation === 'horizontal') {
-                    focusTab(-1);
-                    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)({
+        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) => {
-                var _a, _b;
+              }),
+              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();
-                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
-            },
-        }))));
-    }, [currentActiveIndex, onTabClick]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), 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 === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
-        actions && (React.createElement(index_js_1.Box, { className: 'iui-tabs-actions-wrapper' },
-            React.createElement(index_js_1.Box, { className: 'iui-tabs-actions' }, actions))),
-        children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
+                label.props.onClick?.(args);
+              },
+            }),
+      );
+    },
+    [currentActiveIndex, onTabClick],
+  );
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-tabs-wrapper',
+        `iui-${orientation}`,
+        wrapperClassName,
+      ),
+      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,
+        ...rest,
+      },
+      labels.map((label, index) => createTab(label, index)),
+    ),
+    actions &&
+      React.createElement(
+        index_js_1.Box,
+        { className: 'iui-tabs-actions-wrapper' },
+        React.createElement(
+          index_js_1.Box,
+          { className: 'iui-tabs-actions' },
+          actions,
+        ),
+      ),
+    children &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          className: (0, classnames_1.default)(
+            'iui-tabs-content',
+            contentClassName,
+          ),
+          role: 'tabpanel',
+        },
+        children,
+      ),
+  );
 };
 exports.Tabs = Tabs;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * 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' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-const HorizontalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'horizontal', ...props }));
-exports.HorizontalTabs = HorizontalTabs;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * 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' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-const VerticalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'vertical', ...props }));
-exports.VerticalTabs = VerticalTabs;
 exports.default = exports.Tabs;