@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/Tabs/Tabs.js

@@ -4,246 +4,148 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  useSafeContext,
-  Box,
-  polymorphic,
-  useIsClient,
-  useIsomorphicLayoutEffect,
-  useMergedRefs,
-  useContainerWidth,
-  ButtonBase,
-  mergeEventHandlers,
-  useControlledState,
-  useId,
-  useLatestRef,
-} from '../utils/index.js';
+import { useSafeContext, Box, polymorphic, useIsClient, useIsomorphicLayoutEffect, 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); // 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)));
 });
 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);
-  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,
-        },
-      },
-      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);
+    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,
+            } }, 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 } = useSafeContext(TabListContext);
-  const tabRef = React.useRef();
-  const isActive = activeValue === value;
-  const isActiveRef = useLatestRef(isActive);
-  // Scroll to active tab only on initial render
-  useIsomorphicLayoutEffect(() => {
-    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
-      });
-    }
-  }, []);
-  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`,
-    });
-  };
-  // CSS custom properties to place the active stripe
-  useIsomorphicLayoutEffect(() => {
-    if (type !== 'default' && isActive) {
-      updateStripe();
-    }
-  }, [
-    type,
-    orientation,
-    isActive,
-    tabsWidth, // to fix visual artifact on initial render
-  ]);
-  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();
+    const { className, children, value, label, ...rest } = props;
+    const { orientation, activeValue, setActiveValue, type, setStripeProperties, idPrefix, focusActivationMode, } = useSafeContext(TabsContext);
+    const { tabsWidth } = useSafeContext(TabListContext);
+    const tabRef = React.useRef();
+    const isActive = activeValue === value;
+    const isActiveRef = useLatestRef(isActive);
+    // Scroll to active tab only on initial render
+    useIsomorphicLayoutEffect(() => {
+        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
+            });
         }
-        break;
-      }
-      case 'ArrowRight': {
-        if (orientation === 'horizontal') {
-          nextTab?.focus();
-          event.preventDefault();
+    }, []);
+    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`,
+        });
+    };
+    // CSS custom properties to place the active stripe
+    useIsomorphicLayoutEffect(() => {
+        if (type !== 'default' && isActive) {
+            updateStripe();
         }
-        break;
-      }
-      case 'ArrowUp': {
-        if (orientation === 'vertical') {
-          previousTab?.focus();
-          event.preventDefault();
+    }, [
+        type,
+        orientation,
+        isActive,
+        tabsWidth, // to fix visual artifact on initial render
+    ]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
         }
-        break;
-      }
-      case 'ArrowLeft': {
-        if (orientation === 'horizontal') {
-          previousTab?.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;
-      }
-      default:
-        break;
-    }
-  };
-  // 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(
-    ButtonBase,
-    {
-      className: cx('iui-tab', className),
-      role: 'tab',
-      tabIndex: isActive ? 0 : -1,
-      'aria-selected': isActive,
-      'aria-controls': `${idPrefix}-panel-${value}`,
-      ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef),
-      ...rest,
-      id: `${idPrefix}-tab-${value}`,
-      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);
+    };
+    // use first tab as active if no `value` passed.
+    const setInitialActiveRef = React.useCallback((element) => {
+        if (activeValue !== undefined) {
+            return;
         }
-      }),
-    },
-    label ? React.createElement(Tabs.TabLabel, null, label) : children,
-  );
+        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}`, ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value}`, 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));
 });
 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';
 // ----------------------------------------------------------------------------
@@ -253,117 +155,46 @@ TabLabel.displayName = 'Tabs.TabLabel';
 // ----------------------------------------------------------------------------
 // Tabs.TabDescription component
 const TabDescription = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
-  useIsomorphicLayoutEffect(() => {
-    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);
+    useIsomorphicLayoutEffect(() => {
+        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}`,
-      role: 'tabpanel',
-      hidden: activeValue !== value ? true : undefined,
-      ref: ref,
-      ...rest,
-      id: `${idPrefix}-panel-${value}`,
-    },
-    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}`, 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] = 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';
 /**
@@ -378,19 +209,13 @@ LegacyTabsComponent.displayName = 'Tabs';
  * ];
  */
 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
@@ -428,70 +253,70 @@ export { LegacyTab as 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,
+    /**
+     * 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);