@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Tabs/Tabs.js

@@ -1,359 +1,429 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, Box, polymorphic, useIsClient, useLayoutEffect, useMergedRefs, useContainerWidth, ButtonBase, mergeEventHandlers, useControlledState, useId, useLatestRef, } from '../../utils/index.js';
+import {
+  useSafeContext,
+  Box,
+  polymorphic,
+  useIsClient,
+  useLayoutEffect,
+  useMergedRefs,
+  useContainerWidth,
+  ButtonBase,
+  mergeEventHandlers,
+  useControlledState,
+  useId,
+  useLatestRef,
+} from '../../utils/index.js';
 import { Icon } from '../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] = useControlledState(defaultValue, activeValueProp, onValueChange);
-    const [stripeProperties, setStripeProperties] = React.useState({});
-    const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
-    const idPrefix = useId();
-    return (React.createElement(Box, { className: cx('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)));
+  const {
+    className,
+    children,
+    orientation = 'horizontal',
+    type = 'default',
+    focusActivationMode = 'auto',
+    color = 'blue',
+    defaultValue,
+    value: activeValueProp,
+    onValueChange,
+    ...rest
+  } = props;
+  const [activeValue, setActiveValue] = useControlledState(
+    defaultValue,
+    activeValueProp,
+    onValueChange,
+  );
+  const [stripeProperties, setStripeProperties] = React.useState({});
+  const [hasSublabel, setHasSublabel] = React.useState(false);
+  const idPrefix = useId();
+  return React.createElement(
+    Box,
+    {
+      className: cx('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 } = useSafeContext(TabsContext);
-    const isClient = useIsClient();
-    const tablistRef = React.useRef(null);
-    const [tablistSizeRef, tabsWidth] = useContainerWidth(type !== 'default');
-    const refs = useMergedRefs(ref, tablistRef, tablistSizeRef, useScrollbarGutter());
-    return (React.createElement(Box, { className: cx('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)));
+  const { className, children, ...rest } = props;
+  const { type, hasSublabel, color } = useSafeContext(TabsContext);
+  const isClient = useIsClient();
+  const tablistRef = React.useRef(null);
+  const [tablistSizeRef, tabsWidth] = useContainerWidth(type !== 'default');
+  const refs = useMergedRefs(
+    ref,
+    tablistRef,
+    tablistSizeRef,
+    useScrollbarGutter(),
+  );
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        '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,
+    ),
+  );
 });
 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, } = useSafeContext(TabsContext);
-    const { tabsWidth, tablistRef } = useSafeContext(TabListContext);
-    const tabRef = React.useRef();
-    const isActive = activeValue === value;
-    const isActiveRef = useLatestRef(isActive);
-    // Scroll to active tab only on initial render
-    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
-    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();
+  const { className, children, value, label, ...rest } = props;
+  const {
+    orientation,
+    activeValue,
+    setActiveValue,
+    type,
+    setStripeProperties,
+    idPrefix,
+    focusActivationMode,
+  } = useSafeContext(TabsContext);
+  const { tabsWidth, tablistRef } = useSafeContext(TabListContext);
+  const tabRef = React.useRef();
+  const isActive = activeValue === value;
+  const isActiveRef = useLatestRef(isActive);
+  useLayoutEffect(() => {
+    if (isActiveRef.current) {
+      tabRef.current?.parentElement?.scrollTo({
+        [orientation === 'horizontal' ? 'left' : 'top']:
+          tabRef.current?.[
+            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+          ] - 4,
+        behavior: 'instant',
+      });
+    }
+  }, [isActiveRef, orientation]);
+  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,
+            }
+          : {
+              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, 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();
         }
-    }, [
-        type,
-        orientation,
-        isActive,
-        tabsWidth,
-        setStripeProperties,
-        tablistRef,
-    ]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
+        break;
+      }
+      case 'ArrowRight': {
+        if (orientation === 'horizontal') {
+          nextTab?.focus();
+          event.preventDefault();
         }
-        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;
-            }
-            default:
-                break;
+        break;
+      }
+      case 'ArrowUp': {
+        if (orientation === 'vertical') {
+          previousTab?.focus();
+          event.preventDefault();
         }
-    };
-    // use first tab as active if no `value` passed.
-    const setInitialActiveRef = React.useCallback((element) => {
-        if (activeValue !== undefined) {
-            return;
+        break;
+      }
+      case 'ArrowLeft': {
+        if (orientation === 'horizontal') {
+          previousTab?.focus();
+          event.preventDefault();
         }
-        if (element?.matches(':first-of-type')) {
-            setActiveValue(value);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const setInitialActiveRef = React.useCallback(
+    (element) => {
+      if (activeValue !== undefined) {
+        return;
+      }
+      if (element?.matches(':first-of-type')) {
+        setActiveValue(value);
+      }
+    },
+    [activeValue, setActiveValue, value],
+  );
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-tab', className),
+      role: 'tab',
+      tabIndex: isActive ? 0 : -1,
+      'aria-selected': isActive,
+      'aria-controls': `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+      ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef),
+      ...rest,
+      id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+      onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)),
+      onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
+      onFocus: mergeEventHandlers(props.onFocus, () => {
+        tabRef.current?.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        });
+        if (focusActivationMode === 'auto' && !props.disabled) {
+          setActiveValue(value);
         }
-    }, [activeValue, setActiveValue, value]);
-    return (React.createElement(ButtonBase, { className: cx('iui-tab', className), role: 'tab', tabIndex: isActive ? 0 : -1, "aria-selected": isActive, "aria-controls": `${idPrefix}-panel-${value.replaceAll(' ', '-')}`, ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)), onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown), onFocus: mergeEventHandlers(props.onFocus, () => {
-            tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            if (focusActivationMode === 'auto' && !props.disabled) {
-                setActiveValue(value);
-            }
-        }) }, label ? React.createElement(Tabs.TabLabel, null, label) : children));
+      }),
+    },
+    label ? React.createElement(Tabs.TabLabel, null, label) : children,
+  );
 });
 Tab.displayName = 'Tabs.Tab';
-// ----------------------------------------------------------------------------
-// Tabs.TabIcon component
 const TabIcon = React.forwardRef((props, ref) => {
-    return (React.createElement(Icon, { ...props, className: cx('iui-tab-icon', props?.className), ref: ref }));
+  return React.createElement(Icon, {
+    ...props,
+    className: cx('iui-tab-icon', props?.className),
+    ref: ref,
+  });
 });
 TabIcon.displayName = 'Tabs.TabIcon';
-// ----------------------------------------------------------------------------
-// Tabs.TabLabel component
 const TabLabel = 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 } = useSafeContext(TabsContext);
-    useLayoutEffect(() => {
-        if (!hasSublabel) {
-            setHasSublabel(true);
-        }
-    }, [hasSublabel, setHasSublabel]);
-    return (React.createElement(Box, { as: 'span', className: cx('iui-tab-description', className), ref: ref, ...rest }, children));
+  const { className, children, ...rest } = props;
+  const { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
+  useLayoutEffect(() => {
+    if (!hasSublabel) {
+      setHasSublabel(true);
+    }
+  }, [hasSublabel, setHasSublabel]);
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('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(Box, { ...wrapperProps, className: cx('iui-tabs-actions-wrapper', wrapperProps?.className) },
-        React.createElement(Box, { className: cx('iui-tabs-actions', className), ref: ref, ...rest }, children)));
+  const { wrapperProps, className, children, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      ...wrapperProps,
+      className: cx('iui-tabs-actions-wrapper', wrapperProps?.className),
+    },
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-tabs-actions', className),
+        ref: ref,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = React.forwardRef((props, ref) => {
-    const { value, className, children, ...rest } = props;
-    const { activeValue, idPrefix } = useSafeContext(TabsContext);
-    return (React.createElement(Box, { className: cx('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 { value, className, children, ...rest } = props;
+  const { activeValue, idPrefix } = useSafeContext(TabsContext);
+  return React.createElement(
+    Box,
+    {
+      className: cx('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,
+  );
 });
 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] = 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(TabsPanel, { value: `${activeIndex}`, className: contentClassName }, children))));
+  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] = 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(
+        TabsPanel,
+        {
+          value: `${activeIndex}`,
+          className: contentClassName,
+        },
+        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 { 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
 export { LegacyTab as Tab };
-/**
- * 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>
- */
 export const 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,
+  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 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';
         }
-    }, []);
+      }
+    }
+  }, []);
 };