@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/Tabs/Tabs.js

@@ -1,386 +1,431 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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.Tabs = exports.Tab = void 0;
-/*---------------------------------------------------------------------------------------------
- * 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 Icon_js_1 = require("../Icon/Icon.js");
-const TabsWrapper = React.forwardRef((props, ref) => {
-    const { className, children, orientation = 'horizontal', type = 'default', focusActivationMode = 'auto', color = 'blue', 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)(ref, tablistRef, tablistSizeRef, useScrollbarGutter());
-    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,
-                tablistRef,
-            } }, children)));
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  Tab: function () {
+    return LegacyTab;
+  },
+  Tabs: function () {
+    return Tabs;
+  },
 });
-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, tablistRef } = (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.useLayoutEffect)(() => {
-        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
-            });
-        }
-    }, [isActiveRef, orientation]);
-    // CSS custom properties to place the active stripe
-    (0, index_js_1.useLayoutEffect)(() => {
-        const updateStripe = () => {
-            const currentTabRect = tabRef.current?.getBoundingClientRect();
-            const tabslistRect = tablistRef.current?.getBoundingClientRect();
-            // Using getBoundingClientRect() to get decimal granularity.
-            // Not using offsetLeft/offsetTop because they round to the nearest integer.
-            // Even minor inaccuracies in the stripe position can cause unexpected scroll/scrollbar.
-            // See: https://github.com/iTwin/iTwinUI/issues/1870
-            const tabsStripePosition = currentTabRect != null && tabslistRect != null
-                ? {
-                    horizontal: currentTabRect.x - tabslistRect.x,
-                    vertical: currentTabRect.y - tabslistRect.y,
-                }
-                : {
-                    horizontal: 0,
-                    vertical: 0,
-                };
-            setStripeProperties({
-                '--iui-tabs-stripe-size': orientation === 'horizontal'
-                    ? `${currentTabRect?.width}px`
-                    : `${currentTabRect?.height}px`,
-                '--iui-tabs-stripe-position': orientation === 'horizontal'
-                    ? `${tabsStripePosition.horizontal}px`
-                    : `${tabsStripePosition.vertical}px`,
-            });
-        };
-        if (type !== 'default' && isActive) {
-            updateStripe();
-        }
-    }, [
-        type,
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Icon = require('../Icon/Icon.js');
+const TabsWrapper = _react.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    orientation = 'horizontal',
+    type = 'default',
+    focusActivationMode = 'auto',
+    color = 'blue',
+    defaultValue,
+    value: activeValueProp,
+    onValueChange,
+    ...rest
+  } = props;
+  const [activeValue, setActiveValue] = (0, _index.useControlledState)(
+    defaultValue,
+    activeValueProp,
+    onValueChange,
+  );
+  const [stripeProperties, setStripeProperties] = _react.useState({});
+  const [hasSublabel, setHasSublabel] = _react.useState(false);
+  const idPrefix = (0, _index.useId)();
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-tabs-wrapper',
+      `iui-${orientation}`,
+      className,
+    ),
+    ...rest,
+    style: {
+      ...stripeProperties,
+      ...props?.style,
+    },
+    ref: ref,
+    children: (0, _jsxruntime.jsx)(TabsContext.Provider, {
+      value: {
         orientation,
-        isActive,
-        tabsWidth,
+        type,
+        activeValue,
+        setActiveValue,
         setStripeProperties,
+        idPrefix,
+        focusActivationMode,
+        hasSublabel,
+        setHasSublabel,
+        color,
+      },
+      children: children,
+    }),
+  });
+});
+TabsWrapper.displayName = 'Tabs.Wrapper';
+const TabList = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
+  const isClient = (0, _index.useIsClient)();
+  const tablistRef = _react.useRef(null);
+  const [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)(
+    type !== 'default',
+  );
+  const refs = (0, _index.useMergedRefs)(
+    ref,
+    tablistRef,
+    tablistSizeRef,
+    useScrollbarGutter(),
+  );
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.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,
+    children: (0, _jsxruntime.jsx)(TabListContext.Provider, {
+      value: {
+        tabsWidth,
         tablistRef,
-    ]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        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') {
-                    nextTab?.focus();
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowRight': {
-                if (orientation === 'horizontal') {
-                    nextTab?.focus();
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowUp': {
-                if (orientation === 'vertical') {
-                    previousTab?.focus();
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                if (orientation === 'horizontal') {
-                    previousTab?.focus();
-                    event.preventDefault();
-                }
-                break;
+      },
+      children: 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.useSafeContext)(TabsContext);
+  const { tabsWidth, tablistRef } = (0, _index.useSafeContext)(TabListContext);
+  const tabRef = _react.useRef();
+  const isActive = activeValue === value;
+  const isActiveRef = (0, _index.useLatestRef)(isActive);
+  (0, _index.useLayoutEffect)(() => {
+    if (isActiveRef.current) {
+      tabRef.current?.parentElement?.scrollTo({
+        [orientation === 'horizontal' ? 'left' : 'top']:
+          tabRef.current?.[
+            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+          ] - 4,
+        behavior: 'instant',
+      });
+    }
+  }, [isActiveRef, orientation]);
+  (0, _index.useLayoutEffect)(() => {
+    const updateStripe = () => {
+      const currentTabRect = tabRef.current?.getBoundingClientRect();
+      const tabslistRect = tablistRef.current?.getBoundingClientRect();
+      const tabsStripePosition =
+        currentTabRect != null && tabslistRect != null
+          ? {
+              horizontal: currentTabRect.x - tabslistRect.x,
+              vertical: currentTabRect.y - tabslistRect.y,
             }
-            default:
-                break;
-        }
+          : {
+              horizontal: 0,
+              vertical: 0,
+            };
+      setStripeProperties({
+        '--iui-tabs-stripe-size':
+          orientation === 'horizontal'
+            ? `${currentTabRect?.width}px`
+            : `${currentTabRect?.height}px`,
+        '--iui-tabs-stripe-position':
+          orientation === 'horizontal'
+            ? `${tabsStripePosition.horizontal}px`
+            : `${tabsStripePosition.vertical}px`,
+      });
     };
-    // use first tab as active if no `value` passed.
-    const setInitialActiveRef = React.useCallback((element) => {
-        if (activeValue !== undefined) {
-            return;
+    if (type !== 'default' && isActive) {
+      updateStripe();
+    }
+  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    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') {
+          nextTab?.focus();
+          event.preventDefault();
         }
-        if (element?.matches(':first-of-type')) {
-            setActiveValue(value);
+        break;
+      }
+      case 'ArrowRight': {
+        if (orientation === 'horizontal') {
+          nextTab?.focus();
+          event.preventDefault();
         }
-    }, [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.replaceAll(' ', '-')}`, ref: (0, index_js_1.useMergedRefs)(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, 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);
-            }
-        }) }, label ? React.createElement(exports.Tabs.TabLabel, null, label) : children));
+        break;
+      }
+      case 'ArrowUp': {
+        if (orientation === 'vertical') {
+          previousTab?.focus();
+          event.preventDefault();
+        }
+        break;
+      }
+      case 'ArrowLeft': {
+        if (orientation === 'horizontal') {
+          previousTab?.focus();
+          event.preventDefault();
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const setInitialActiveRef = _react.useCallback(
+    (element) => {
+      if (activeValue !== undefined) {
+        return;
+      }
+      if (element?.matches(':first-of-type')) {
+        setActiveValue(value);
+      }
+    },
+    [activeValue, setActiveValue, value],
+  );
+  return (0, _jsxruntime.jsx)(_index.ButtonBase, {
+    className: (0, _classnames.default)('iui-tab', className),
+    role: 'tab',
+    tabIndex: isActive ? 0 : -1,
+    'aria-selected': isActive,
+    'aria-controls': `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+    ref: (0, _index.useMergedRefs)(tabRef, forwardedRef, setInitialActiveRef),
+    ...rest,
+    id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+    onClick: (0, _index.mergeEventHandlers)(props.onClick, () =>
+      setActiveValue(value),
+    ),
+    onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, onKeyDown),
+    onFocus: (0, _index.mergeEventHandlers)(props.onFocus, () => {
+      tabRef.current?.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+      });
+      if (focusActivationMode === 'auto' && !props.disabled) {
+        setActiveValue(value);
+      }
+    }),
+    children: label
+      ? (0, _jsxruntime.jsx)(Tabs.TabLabel, {
+          children: 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 }));
+const TabIcon = _react.forwardRef((props, ref) => {
+  return (0, _jsxruntime.jsx)(_Icon.Icon, {
+    ...props,
+    className: (0, _classnames.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');
+const TabLabel = _index.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.useLayoutEffect)(() => {
-        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));
+const TabDescription = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const { hasSublabel, setHasSublabel } = (0, _index.useSafeContext)(
+    TabsContext,
+  );
+  (0, _index.useLayoutEffect)(() => {
+    if (!hasSublabel) {
+      setHasSublabel(true);
+    }
+  }, [hasSublabel, setHasSublabel]);
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    as: 'span',
+    className: (0, _classnames.default)('iui-tab-description', className),
+    ref: ref,
+    ...rest,
+    children: 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-actions-wrapper', wrapperProps?.className) },
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-actions', className), ref: ref, ...rest }, children)));
+const TabsActions = _react.forwardRef((props, ref) => {
+  const { wrapperProps, className, children, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    ...wrapperProps,
+    className: (0, _classnames.default)(
+      'iui-tabs-actions-wrapper',
+      wrapperProps?.className,
+    ),
+    children: (0, _jsxruntime.jsx)(_index.Box, {
+      className: (0, _classnames.default)('iui-tabs-actions', className),
+      ref: ref,
+      ...rest,
+      children: children,
+    }),
+  });
 });
 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.replaceAll(' ', '-')}`, role: 'tabpanel', hidden: activeValue !== value ? true : undefined, ref: ref, ...rest, id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}` }, children));
+const TabsPanel = _react.forwardRef((props, ref) => {
+  const { value, className, children, ...rest } = props;
+  const { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-tabs-content', className),
+    'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+    role: 'tabpanel',
+    hidden: activeValue !== value ? true : undefined,
+    ref: ref,
+    ...rest,
+    id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+    children: 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, {
+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.useControlledState)(
+    0,
+    activeIndexProp,
+    onTabSelected,
+  );
+  return (0, _jsxruntime.jsxs)(TabsWrapper, {
+    className: wrapperClassName,
+    focusActivationMode: focusActivationMode,
+    color: color,
+    value: `${activeIndex}`,
+    onValueChange: (value) => setActiveIndex(Number(value)),
+    ...rest,
+    children: [
+      (0, _jsxruntime.jsx)(TabList, {
+        className: tabsClassName,
+        ref: forwardedRef,
+        children: 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(TabsPanel, { value: `${activeIndex}`, className: contentClassName }, children))));
+              })
+            : (0, _jsxruntime.jsx)(
+                LegacyTab,
+                {
+                  value: tabValue,
+                  label: label,
+                },
+                index,
+              );
+        }),
+      }),
+      actions &&
+        (0, _jsxruntime.jsx)(TabsActions, {
+          children: actions,
+        }),
+      children &&
+        (0, _jsxruntime.jsx)(TabsPanel, {
+          value: `${activeIndex}`,
+          className: contentClassName,
+          children: children,
+        }),
+    ],
+  });
 });
 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)));
+const LegacyTab = _react.forwardRef((props, forwardedRef) => {
+  const { label, sublabel, startIcon, children, value, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: (0, _jsxruntime.jsxs)(Tab, {
+      ...rest,
+      value: value,
+      ref: forwardedRef,
+      children: [
+        startIcon &&
+          (0, _jsxruntime.jsx)(TabIcon, {
+            children: startIcon,
+          }),
+        (0, _jsxruntime.jsx)(TabLabel, {
+          children: label,
+        }),
+        sublabel &&
+          (0, _jsxruntime.jsx)(TabDescription, {
+            children: 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.Actions>
- *     <Button>Sample Button</Button>
- *   </Tabs.Actions>
- *   <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 Tabs = Object.assign(LegacyTabsComponent, {
+  Wrapper: TabsWrapper,
+  TabList: TabList,
+  Tab: Tab,
+  TabIcon: TabIcon,
+  TabLabel: TabLabel,
+  TabDescription: TabDescription,
+  Actions: TabsActions,
+  Panel: TabsPanel,
 });
-const TabsContext = React.createContext(undefined);
-const TabListContext = React.createContext(undefined);
-// ----------------------------------------------------------------------------
-/**
- * This conditionally adds `scrollbar-gutter: stable` only if the content overflows.
- * This is a workaround to prevent layout shift that happens because of scrollbar width.
- *
- * @see https://github.com/iTwin/iTwinUI/issues/1627
- */
+const TabsContext = _react.createContext(undefined);
+const TabListContext = _react.createContext(undefined);
 const useScrollbarGutter = () => {
-    return React.useCallback((element) => {
-        if (element) {
-            if (element.scrollHeight > element.clientHeight) {
-                element.style.scrollbarGutter = 'stable';
-                // Safari fallback
-                if (!CSS.supports('scrollbar-gutter: stable')) {
-                    element.style.overflowY = 'scroll';
-                }
-            }
+  return _react.useCallback((element) => {
+    if (element) {
+      if (element.scrollHeight > element.clientHeight) {
+        element.style.scrollbarGutter = 'stable';
+        if (!CSS.supports('scrollbar-gutter: stable')) {
+          element.style.overflowY = 'scroll';
         }
-    }, []);
+      }
+    }
+  }, []);
 };