@salutejs/plasma-new-hope 0.113.0-dev.0 → 0.113.1-canary.1333.10181217073.0

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -2,25 +2,27 @@ import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import styled from 'styled-components';
+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 { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
-const tabItemViews = ['clear', 'default', 'divider', 'secondary'];
+const clips = ['none', 'scroll', 'showAll'];
 
 type CustomStoryTabsProps = {
-    tabItemView: string;
+    hasDivider: boolean;
+    showLeftContent: boolean;
+    showRightContent: boolean;
     itemsNumber?: number;
     animated?: boolean;
     label?: string;
-    showLeftContent: boolean;
-    showRightContent: boolean;
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
@@ -31,12 +33,13 @@ const meta: Meta<StoryTabsProps> = {
     decorators: [WithTheme],
     argTypes: {
         ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
-        tabItemView: {
-            options: tabItemViews,
+        clip: {
+            options: clips,
             control: {
                 type: 'select',
             },
         },
+        ...disableProps(['view', 'tabItemView']),
     },
 };
 
@@ -46,114 +49,189 @@ const StoryDefault = (props: StoryTabsProps) => {
     const {
         itemsNumber,
         label,
-        view,
         disabled,
         stretch,
         pilled,
         animated,
-        tabItemView,
         size,
         showLeftContent,
         showRightContent,
+        hasDivider,
     } = props;
     const items = Array(itemsNumber).fill(0);
-    const secondItems = Array(10).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 view={hasDivider ? 'divider' : 'clear'} stretch={stretch} pilled={pilled} 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}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </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 StoryScroll = (props: StoryTabsProps) => {
+    const {
+        itemsNumber,
+        label,
+        disabled,
+        stretch,
+        pilled,
+        animated,
+        clip,
+        size,
+        showLeftContent,
+        showRightContent,
+        hasDivider,
+    } = props;
+    const items = Array(itemsNumber).fill(0);
+    const [index, setIndex] = useState(0);
 
-            <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}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </>
+    return (
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            stretch={stretch}
+            pilled={pilled}
+            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}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryShowAll = (props: StoryTabsProps) => {
+    const {
+        itemsNumber,
+        label,
+        disabled,
+        stretch,
+        pilled,
+        animated,
+        clip,
+        size,
+        showLeftContent,
+        showRightContent,
+        hasDivider,
+    } = props;
+    const maxItemsNumber = 3;
+    const items = Array(itemsNumber).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}`,
+            value: itemIndex,
+        };
+    });
+
+    return (
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            stretch={stretch}
+            pilled={pilled}
+            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}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </TabItem>
+            ))}
+            {dropdownItems.length > 0 && (
+                <div style={{ marginLeft: '1.75rem' }}>
+                    <Dropdown size="xs" items={dropdownItems} onItemSelect={(item) => setIndex(item.value as number)}>
+                        <TabItem
+                            key="item:ShowAll"
+                            view="divider"
+                            tabIndex={!disabled ? 0 : -1}
+                            pilled={false}
+                            disabled={disabled}
+                            animated={animated}
+                            size={size}
+                        >
+                            ShowAll
+                        </TabItem>
+                    </Dropdown>
+                </div>
+            )}
+        </Tabs>
     );
 };
 
 export const Default: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
-        itemsNumber: 4,
-        tabItemView: 'divider',
+        itemsNumber: 10,
         disabled: false,
         stretch: false,
         pilled: false,
         animated: true,
-        view: 'divider',
         label: 'Label',
         showLeftContent: false,
         showRightContent: false,
+        hasDivider: true,
+    },
+    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`
@@ -165,15 +243,14 @@ const StyledMultipleContainer = styled.div`
 const StoryMultiple = ({
     itemsNumber,
     label,
-    view,
     disabled,
     stretch,
     pilled,
     animated,
-    tabItemView,
     size,
     showLeftContent,
     showRightContent,
+    hasDivider,
 }: StoryTabsProps) => {
     const items = Array(itemsNumber).fill(0);
 
@@ -183,7 +260,7 @@ const StoryMultiple = ({
     return (
         <StyledMultipleContainer>
             <Tabs
-                view={view}
+                view={hasDivider ? 'divider' : 'clear'}
                 index={index1}
                 stretch={stretch}
                 pilled={pilled}
@@ -194,7 +271,7 @@ const StoryMultiple = ({
                 {items.map((_, i) => (
                     <TabItem
                         key={`item:${i}`}
-                        view={tabItemView}
+                        view="divider"
                         selected={i === index1}
                         itemIndex={i}
                         onIndexChange={(i) => setIndex1(i)}
@@ -212,7 +289,7 @@ const StoryMultiple = ({
                 ))}
             </Tabs>
             <Tabs
-                view={view}
+                view={hasDivider ? 'divider' : 'clear'}
                 index={index2}
                 stretch={stretch}
                 pilled={pilled}
@@ -223,7 +300,7 @@ const StoryMultiple = ({
                 {items.map((_, i) => (
                     <TabItem
                         key={`item:${i}`}
-                        view={tabItemView}
+                        view="divider"
                         selected={i === index2}
                         itemIndex={i}
                         onIndexChange={(i) => setIndex2(i)}
@@ -248,12 +325,10 @@ export const Multiple: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         itemsNumber: 6,
-        tabItemView: 'divider',
         disabled: false,
         stretch: false,
         pilled: false,
         animated: true,
-        view: 'divider',
         label: 'Label',
         showLeftContent: false,
         showRightContent: false,

package/styled-components/cjs/examples/sds_engineer/components/Tabs/Tabs.config.js

@@ -9,14 +9,13 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var config = exports.config = {
   defaults: {
     view: 'divider',
-    size: 'xs',
-    disabled: 'false'
+    size: 'xs'
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),

package/styled-components/es/components/Tabs/tokens.js

@@ -9,7 +9,9 @@ export 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'
 };
 export var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',

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

@@ -1,4 +1,4 @@
-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"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,6 +31,7 @@ export 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);
@@ -72,6 +73,10 @@ export 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,
@@ -81,7 +86,8 @@ export 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, {

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9,7 +9,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { animatedScrollToX, safeUseId } from '@salutejs/plasma-core';
+import { safeUseId } from '@salutejs/plasma-core';
 import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { classes, tokens } from '../../tokens';
 import { cx } from '../../../../utils';
@@ -34,6 +34,8 @@ export var tabsRoot = function tabsRoot(Root) {
       stretch = _props$stretch === void 0 ? false : _props$stretch,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$clip = props.clip,
+      clip = _props$clip === void 0 ? 'scroll' : _props$clip,
       size = props.size,
       view = props.view,
       children = props.children,
@@ -60,14 +62,41 @@ export var tabsRoot = function tabsRoot(Root) {
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
+    var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
+    var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
     var scrollRef = useRef(null);
     var trackRef = useRef(null);
+    var leftArrowRef = useRef(null);
     var onPrev = useCallback(function () {
-      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);
-    }, [disabled, scrollRef]);
+      var _firstOverflowingTab$;
+      if (disabled || !scrollRef.current) {
+        return;
+      }
+      var scrollLeft = Math.round(scrollRef.current.scrollLeft);
+      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
+        if (!item.current || item.current.offsetLeft === undefined) {
+          return;
+        }
+        var tabStartX = item.current.offsetLeft;
+        return tabStartX < scrollLeft;
+      });
+      firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView();
+    }, [disabled, scrollRef, refs]);
     var onNext = useCallback(function () {
-      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);
-    }, [disabled, scrollRef]);
+      var _lastOverflowingTab$c;
+      if (disabled || !scrollRef.current) {
+        return;
+      }
+      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
+      var lastOverflowingTab = refs.items.find(function (item) {
+        if (!item.current || item.current.offsetLeft === undefined) {
+          return;
+        }
+        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
+        return tabEndX > scrollRight;
+      });
+      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView();
+    }, [disabled, scrollRef, refs]);
     var PreviousButton = useMemo(function () {
       return /*#__PURE__*/React.createElement(StyledArrow, {
         type: "button",
@@ -76,6 +105,7 @@ export var tabsRoot = function tabsRoot(Root) {
         tabIndex: disabled ? -1 : 0,
         disabled: disabled,
         isFilled: isFilled,
+        ref: leftArrowRef,
         isLeftArrow: true
       }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
         color: "var(".concat(tokens.arrowColor, ")")
@@ -96,8 +126,9 @@ export var tabsRoot = function tabsRoot(Root) {
     var handleScroll = useCallback(function (event) {
       event.stopPropagation();
       var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
-      setFirstItemVisible(event.currentTarget.scrollLeft <= 0);
-      setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);
+      var scrollLeft = Math.round(event.currentTarget.scrollLeft);
+      setFirstItemVisible(scrollLeft <= 0);
+      setLastItemVisible(scrollLeft >= maxScrollLeft);
     }, [setFirstItemVisible, setLastItemVisible]);
     var onKeyDown = useCallback(function (event) {
       if (index === undefined) {
@@ -137,6 +168,16 @@ export var tabsRoot = function tabsRoot(Root) {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
+
+    // Этот хук компенсирует появление левой стрелки при прокрутке
+    useEffect(function () {
+      if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
+        return;
+      }
+      scrollRef.current.scrollTo({
+        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
+      });
+    }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({
@@ -150,6 +191,7 @@ export var tabsRoot = function tabsRoot(Root) {
       className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
+      className: cx(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(StyledContent, {

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js

@@ -3,14 +3,14 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { css } from 'styled-components';
 import styled from 'styled-components';
 import { addFocus } from '../../../../mixins';
-import { tokens } from '../../tokens';
+import { classes, tokens } from '../../tokens';
 export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    position: relative;\n"])));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-0"
 })(["display:inline-flex;flex-direction:row;align-items:center;"]);
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-1"
-})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;scrollbar-width:none;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
+})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", "{overflow:visible;}"], classes.tabsClipScroll, classes.tabsClipShowAll);
 export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-2"
 })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.config.js

@@ -3,14 +3,13 @@ import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'filled',
-    size: 'xs',
-    disabled: 'false'
+    size: 'xs'
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),