@salutejs/plasma-new-hope 0.114.0-dev.0 → 0.114.1-canary.1333.10211221618.0

package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -1,26 +1,47 @@
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import styled from '@emotion/styled';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { tabsConfig } from '../../../../components/Tabs';
 import { mergeConfig } from '../../../../engines';
 import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { IconMic } from '../../../../components/_Icon';
+import { Dropdown } from '../Dropdown/Dropdown';
+import { Counter } from '../Counter/Counter';
 
 import { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
-const tabItemViews = ['clear', 'default', 'divider', 'secondary'];
+const clips = ['none', 'scroll', 'showAll'];
+const sizes = ['xs', 's', 'm', 'l'] as const;
+const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
 type CustomStoryTabsProps = {
-    tabItemView: string;
-    itemsNumber?: number;
-    animated?: boolean;
-    label?: string;
-    showLeftContent: boolean;
-    showRightContent: boolean;
+    hasDivider: boolean;
+    contentLeft: string;
+    contentRight: string;
+    stretch?: boolean;
+};
+
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+
+const getContentLeft = (contentLeftOption: string) =>
+    contentLeftOption === 'icon' ? <IconMic size="xs" color="inherit" /> : undefined;
+
+const getContentRight = (contentRightOption: string) => {
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size="xs" color="inherit" />;
+        case 'counter':
+            return <Counter count={1} view="positive" />;
+        case 'text':
+            return <div>Text</div>;
+        default:
+            return undefined;
+    }
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
@@ -31,232 +52,276 @@ const meta: Meta<StoryTabsProps> = {
     decorators: [WithTheme],
     argTypes: {
         ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
-        tabItemView: {
-            options: tabItemViews,
+        contentLeft: {
+            options: contentLeftOptions,
             control: {
                 type: 'select',
             },
         },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
     },
 };
 
 export default meta;
 
 const StoryDefault = (props: StoryTabsProps) => {
+    const { disabled, size, contentLeft: contentLeftOption, contentRight: contentRightOption, hasDivider } = props;
+    const items = Array(8).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    contentLeft={getContentLeft(contentLeftOption)}
+                    contentRight={getContentRight(contentRightOption)}
+                    size={size}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryScroll = (props: StoryTabsProps) => {
     const {
-        itemsNumber,
-        label,
-        view,
         disabled,
-        stretch,
-        pilled,
-        animated,
-        tabItemView,
+        clip,
         size,
-        showLeftContent,
-        showRightContent,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
     } = props;
-    const items = Array(itemsNumber).fill(0);
-    const secondItems = Array(10).fill(0);
+    const items = Array(8).fill(0);
     const [index, setIndex] = useState(0);
-    const [secondIndex, setSecondIndex] = useState(0);
-    const [thirdIndex, setThirdIndex] = useState(0);
 
     return (
-        <>
-            <h3>Tabs with auto width</h3>
-            <Tabs view={view} stretch={stretch} pilled={pilled} disabled={disabled} size={size}>
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    contentLeft={getContentLeft(contentLeftOption)}
+                    contentRight={getContentRight(contentRightOption)}
+                    size={size}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
 
-            <h3>Tabs with fixed width</h3>
-            <Tabs
-                view={view}
-                stretch={stretch}
-                pilled={pilled}
-                disabled={disabled}
-                size={size}
-                style={{ width: '28.5rem' }}
-            >
-                {secondItems.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === secondIndex}
-                        onClick={() => !disabled && setSecondIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
+const StoryShowAll = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+    } = props;
+    const maxItemsNumber = 3;
+    const items = Array(8).fill(0);
+    const [index, setIndex] = useState(0);
+
+    const visibleItems = items.slice(0, maxItemsNumber);
+    const otherItems = items.slice(maxItemsNumber);
+
+    const dropdownItems = otherItems.map((_, i) => {
+        const itemIndex = maxItemsNumber + i;
+
+        return {
+            label: `Label${itemIndex + 1}`,
+            value: itemIndex,
+        };
+    });
 
-            <h3>Tabs with arrow navigation</h3>
-            <Tabs view={view} index={thirdIndex} stretch={stretch} pilled={pilled} disabled={disabled} size={size}>
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === thirdIndex}
-                        itemIndex={i}
-                        onIndexChange={(i) => setThirdIndex(i)}
-                        onClick={() => !disabled && setThirdIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
+    return (
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+            {visibleItems.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    contentLeft={getContentLeft(contentLeftOption)}
+                    contentRight={getContentRight(contentRightOption)}
+                    size={size}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+            {dropdownItems.length > 0 && (
+                <div style={{ marginLeft: '1.75rem' }}>
+                    <Dropdown
+                        size={size as typeof sizes[number]}
+                        items={dropdownItems}
+                        onItemSelect={(item) => setIndex(item.value as number)}
                     >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </>
+                        <TabItem
+                            key="item:ShowAll"
+                            view="divider"
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            size={size}
+                        >
+                            ShowAll
+                        </TabItem>
+                    </Dropdown>
+                </div>
+            )}
+        </Tabs>
     );
 };
 
 export const Default: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
-        itemsNumber: 4,
-        tabItemView: 'divider',
         disabled: false,
-        stretch: false,
-        pilled: false,
-        animated: true,
-        view: 'divider',
-        label: 'Label',
-        showLeftContent: false,
-        showRightContent: false,
+        hasDivider: true,
+    },
+    argTypes: {
+        clip: {
+            options: clips,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryScroll {...args} />;
+            case 'showAll':
+                return <StoryShowAll {...args} />;
+            default:
+                return <StoryDefault {...args} />;
+        }
     },
-    render: (args) => <StoryDefault {...args} />,
 };
 
-const StyledMultipleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    column-gap: 1rem;
-`;
+const StoryStretch = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
+    const items = Array(8).fill(0);
+    const [index, setIndex] = useState(0);
 
-const StoryMultiple = ({
-    itemsNumber,
-    label,
-    view,
-    disabled,
-    stretch,
-    pilled,
-    animated,
-    tabItemView,
-    size,
-    showLeftContent,
-    showRightContent,
-}: StoryTabsProps) => {
-    const items = Array(itemsNumber).fill(0);
+    return (
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    contentLeft={getContentLeft(contentLeftOption)}
+                    contentRight={getContentRight(contentRightOption)}
+                    size={size}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
 
-    const [index1, setIndex1] = useState(0);
-    const [index2, setIndex2] = useState(0);
+export const Stretch: StoryObj<StoryTabsProps> = {
+    args: {
+        size: 'xs',
+        stretch: true,
+        disabled: false,
+        hasDivider: true,
+    },
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => <StoryStretch {...args} />,
+};
+
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const { disabled, size, contentLeft: contentLeftOption, contentRight: contentRightOption, hasDivider } = props;
+    const items = Array(4).fill(0);
+    const [index, setIndex] = useState(0);
 
     return (
-        <StyledMultipleContainer>
-            <Tabs
-                view={view}
-                index={index1}
-                stretch={stretch}
-                pilled={pilled}
-                disabled={disabled}
-                size={size}
-                style={{ width: '12rem' }}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === index1}
-                        itemIndex={i}
-                        onIndexChange={(i) => setIndex1(i)}
-                        onClick={() => !disabled && setIndex1(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
-            <Tabs
-                view={view}
-                index={index2}
-                stretch={stretch}
-                pilled={pilled}
-                disabled={disabled}
-                size={size}
-                style={{ width: '12rem' }}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === index2}
-                        itemIndex={i}
-                        onIndexChange={(i) => setIndex2(i)}
-                        onClick={() => !disabled && setIndex2(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </StyledMultipleContainer>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    contentLeft={getContentLeft(contentLeftOption)}
+                    contentRight={getContentRight(contentRightOption)}
+                    size={size}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
     );
 };
 
-export const Multiple: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
-        size: 'xs',
-        itemsNumber: 6,
-        tabItemView: 'divider',
+        size: 'h5',
         disabled: false,
-        stretch: false,
-        pilled: false,
-        animated: true,
-        view: 'divider',
-        label: 'Label',
-        showLeftContent: false,
-        showRightContent: false,
+        hasDivider: true,
+    },
+    argTypes: {
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
     },
-    render: (args) => <StoryMultiple {...args} />,
+    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/es/components/Tabs/tokens.js

@@ -9,7 +9,9 @@ var classes = {
   tabRightContent: 'tab-item-right-content',
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
-  tabsHasRightArrow: 'tabs-has-right-arrow'
+  tabsHasRightArrow: 'tabs-has-right-arrow',
+  tabsClipScroll: 'tabs-clip-scroll',
+  tabsClipShowAll: 'tabs-clip-show-all'
 };
 var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
@@ -26,7 +28,7 @@ var tokens = {
   outlineFocusColor: '--plasma-tabs-outline-focus-color',
   arrowColor: '--plasma-tabs-arrow-color',
   tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
-  tabsBackgroundColor: '--plasma-tabs-backgorund-color',
+  tabsBackgroundColor: '--plasma-tabs-background-color',
   tabsBorderRadius: '--plasma-tabs-border-radius',
   tabsWidth: '--plasma-tabs-width',
   tabsHeight: '--plasma-tabs-height',
@@ -50,6 +52,7 @@ var tokens = {
   itemColor: '--plasma-tab-item-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
+  itemColorActive: '--plasma-tab-item-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',

package/es/components/Tabs/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-backgorund-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n    tabsClipScroll: 'tabs-clip-scroll',\n    tabsClipShowAll: 'tabs-clip-show-all',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-background-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemColorActive: '--plasma-tab-item-color-active',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tabsClipScroll","tabsClipShowAll","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemColorActive","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}

package/es/components/Tabs/ui/TabItem/TabItem.css

@@ -1,4 +1,4 @@
-.base_q8xs21_b5uyjxl__66eab5c4{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_q8xs21_b5uyjxl__66eab5c4:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4:hover .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_tabItemAnimated__66eab5c4{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-selected-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
+.base_7pcxtm_b5uyjxl__b67ab7ce{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_7pcxtm_b5uyjxl__b67ab7ce:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce:hover .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce:active{color:var(--plasma-tab-item-color-active);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_tabItemAnimated__b67ab7ce{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-selected-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
 
 .base_1d7e3fp_bvmpqz9__8fd7c45d{font-family:var(--plasma-tab-item-font-family);font-size:var(--plasma-tab-item-font-size);font-style:var(--plasma-tab-item-font-style);font-weight:var(--plasma-tab-item-font-weight);-webkit-letter-spacing:var(--plasma-tab-item-letter-spacing);-moz-letter-spacing:var(--plasma-tab-item-letter-spacing);-ms-letter-spacing:var(--plasma-tab-item-letter-spacing);letter-spacing:var(--plasma-tab-item-letter-spacing);line-height:var(--plasma-tab-item-lineheight);--plasma_private-outline-radius:var(--plasma-tab-item-border-radius);border-radius:var(--plasma-tab-item-border-radius);width:var(--plasma-tab-item-width);height:var(--plasma-tab-item-height);}
 

package/es/components/Tabs/ui/TabItem/TabItem.js

@@ -10,7 +10,7 @@ import { base as base$4 } from './variations/_pilled/base.js';
 import { base as base$3 } from './variations/_disabled/base.js';
 import { LeftContent, StyledContent, RightContent, base } from './TabItem.styles.js';
 
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
 var tabItemRoot = function tabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
@@ -30,6 +30,7 @@ var tabItemRoot = function tabItemRoot(Root) {
       itemIndex = props.itemIndex,
       tabIndex = props.tabIndex,
       className = props.className,
+      onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -71,6 +72,10 @@ var tabItemRoot = function tabItemRoot(Root) {
       onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
+    var handleClick = useCallback(function (event) {
+      event.currentTarget.scrollIntoView();
+      onClick && onClick(event);
+    }, [onClick]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
@@ -80,7 +85,8 @@ var tabItemRoot = function tabItemRoot(Root) {
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, className)
+      className: cx(pilledClass, selectedClass, animatedClass, className),
+      onClick: handleClick
     }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {