@salutejs/plasma-new-hope 0.173.3-dev.0 → 0.173.4-canary.1502.11499843355.0

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

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -92,7 +92,9 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       disabled: disabled,
       pilled: pilled,
       role: role,
-      view: view,
+      view: view
+      // TODO: убрать каст any, когда будут удалены deprecated props
+      ,
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "hasDivider"];
 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."); }
@@ -43,6 +43,8 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
+      _props$hasDivider = props.hasDivider,
+      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
       rest = _objectWithoutProperties(props, _excluded);
     var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,6 +62,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     var isFilled = view === 'filled'; // outer padding is only for filled view
     var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
+    var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
@@ -189,13 +192,15 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
-      role: "tablist",
+      role: "tablist"
+      // TODO: убрать каст any, когда будут удалены deprecated props
+      ,
       size: size,
       pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
+      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
       className: cx(clipScrollClass, clipShowAllClass),

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
 import { classes, tokens } from '../../../../../tokens';
-export var base = /*#__PURE__*/css("background-color:var(", tokens.tabsBackgroundColor, ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", tokens.tabsDividerColor, ");height:var(", tokens.tabsDividerHeight, ");border-radius:var(", tokens.tabsDividerBorderRadius, ");}&.", classes.tabsHasLeftArrow, "{&::after{left:1.5rem;}}&.", classes.tabsHasRightArrow, "{&::after{right:1.5rem;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxUYWJzL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbFRhYnMvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMudGFic0JhY2tncm91bmRDb2xvcn0pO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDAuMTI1cmVtO1xuICAgICAgICBsZWZ0OiAwLjEyNXJlbTtcbiAgICAgICAgcmlnaHQ6IDAuMTI1cmVtO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJDb2xvcn0pO1xuICAgICAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy50YWJzRGl2aWRlckhlaWdodH0pO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJCb3JkZXJSYWRpdXN9KTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzSGFzTGVmdEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGxlZnQ6IDEuNXJlbTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnRhYnNIYXNSaWdodEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIHJpZ2h0OiAxLjVyZW07XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */"));
+export var base = /*#__PURE__*/css("background-color:var(", tokens.tabsBackgroundColor, ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", tokens.tabsDividerColor, ");height:var(", tokens.tabsDividerHeight, ");border-radius:var(", tokens.tabsDividerBorderRadius, ");}&.", classes.tabsHasLeftArrow, "{&::after{left:1.5rem;}}&.", classes.tabsHasRightArrow, "{&::after{right:1.5rem;}}&.", classes.tabsNoDivider, "{&::after{height:0;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxUYWJzL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbFRhYnMvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMudGFic0JhY2tncm91bmRDb2xvcn0pO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDAuMTI1cmVtO1xuICAgICAgICBsZWZ0OiAwLjEyNXJlbTtcbiAgICAgICAgcmlnaHQ6IDAuMTI1cmVtO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJDb2xvcn0pO1xuICAgICAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy50YWJzRGl2aWRlckhlaWdodH0pO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJCb3JkZXJSYWRpdXN9KTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzSGFzTGVmdEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGxlZnQ6IDEuNXJlbTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnRhYnNIYXNSaWdodEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIHJpZ2h0OiAxLjVyZW07XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzTm9EaXZpZGVyfSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgfVxuICAgIH1cbmA7XG4iXX0= */"));

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

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

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

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"createTabsController.js","sources":["../../../src/components/Tabs/createTabsController.tsx"],"sourcesContent":["import React, { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';\n\nimport { HorizontalTabItemProps } from './TabItem.types';\nimport { HorizontalTabsProps } from './Tabs.types';\n\nexport interface TabsControllerProps extends HorizontalTabsProps {\n    items: Array<{ label: string } & HorizontalTabItemProps>;\n    index: number;\n    onIndexChange: (index: number) => void;\n    children?: never;\n    autoscroll?: boolean;\n}\n\n/**\n * @deprecated\n * Используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange\n *\n * Функция для создания `TabController`, которая дает возможность\n * кастомизировать стили, при этом сохраняя единый интерфейс и функционал.\n */\nexport function createTabsController<T extends HTMLDivElement, P extends TabsControllerProps>(\n    ListComponent: ForwardRefExoticComponent<HorizontalTabsProps & RefAttributes<HTMLDivElement>>,\n    ItemComponent: ForwardRefExoticComponent<HorizontalTabItemProps & RefAttributes<HTMLDivElement>>,\n) {\n    // eslint-disable-next-line prefer-arrow-callback\n    return forwardRef<T, P>(function TabsController({ items, index, autoscroll, onIndexChange, ...rest }, ref) {\n        const { disabled } = rest;\n\n        return (\n            <ListComponent ref={ref} index={index} {...rest}>\n                {items.map(({ label, ...restItem }, i) => (\n                    <ItemComponent\n                        key={i}\n                        selected={i === index}\n                        itemIndex={i}\n                        onIndexChange={onIndexChange}\n                        tabIndex={!disabled && i === index ? 0 : -1}\n                        disabled={disabled}\n                        {...restItem}\n                    >\n                        {label}\n                    </ItemComponent>\n                ))}\n            </ListComponent>\n        );\n    });\n}\n"],"names":["createTabsController","ListComponent","ItemComponent","forwardRef","TabsController","_ref","ref","items","index","onIndexChange","rest","_objectWithoutProperties","_excluded","disabled","React","createElement","_extends","map","_ref2","i","label","restItem","_excluded2","key","selected","itemIndex","tabIndex"],"mappings":";;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,oBAAoBA,CAChCC,aAA6F,EAC7FC,aAAgG,EAClG;AACE;EACA,oBAAOC,UAAU,CAAO,SAASC,cAAcA,CAAAC,IAAA,EAAuDC,GAAG,EAAE;AAAA,IAAA,IAAzDC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;MAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAA;MAAcC,aAAa,GAAAJ,IAAA,CAAbI,aAAa,CAAA;AAAKC,MAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,EAAA;AAC9F,IAAA,IAAQC,QAAQ,GAAKH,IAAI,CAAjBG,QAAQ,CAAA;AAEhB,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,aAAa,EAAAe,QAAA,CAAA;AAACV,MAAAA,GAAG,EAAEA,GAAI;AAACE,MAAAA,KAAK,EAAEA,KAAAA;KAAWE,EAAAA,IAAI,GAC1CH,KAAK,CAACU,GAAG,CAAC,UAAAC,KAAA,EAAyBC,CAAC,EAAA;AAAA,MAAA,IAAvBC,KAAK,GAAAF,KAAA,CAALE,KAAK;AAAKC,QAAAA,QAAQ,GAAAV,wBAAA,CAAAO,KAAA,EAAAI,UAAA,CAAA,CAAA;AAAA,MAAA,oBAC5BR,KAAA,CAAAC,aAAA,CAACb,aAAa,EAAAc,QAAA,CAAA;AACVO,QAAAA,GAAG,EAAEJ,CAAE;QACPK,QAAQ,EAAEL,CAAC,KAAKX,KAAM;AACtBiB,QAAAA,SAAS,EAAEN,CAAE;AACbV,QAAAA,aAAa,EAAEA,aAAc;QAC7BiB,QAAQ,EAAE,CAACb,QAAQ,IAAIM,CAAC,KAAKX,KAAK,GAAG,CAAC,GAAG,CAAC,CAAE;AAC5CK,QAAAA,QAAQ,EAAEA,QAAAA;OACNQ,EAAAA,QAAQ,CAEXD,EAAAA,KACU,CAAC,CAAA;AAAA,KACnB,CACU,CAAC,CAAA;AAExB,GAAC,CAAC,CAAA;AACN;;;;"}
+{"version":3,"file":"createTabsController.js","sources":["../../../src/components/Tabs/createTabsController.tsx"],"sourcesContent":["import React, { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';\n\nimport { HorizontalTabItemProps } from './TabItem.types';\nimport { HorizontalCommonTabsProps, HorizontalTabsProps } from './Tabs.types';\n\nexport interface TabsControllerProps extends HorizontalCommonTabsProps {\n    items: Array<{ label: string } & HorizontalTabItemProps>;\n    index: number;\n    onIndexChange: (index: number) => void;\n    children?: never;\n    autoscroll?: boolean;\n}\n\n/**\n * @deprecated\n * Используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange\n *\n * Функция для создания `TabController`, которая дает возможность\n * кастомизировать стили, при этом сохраняя единый интерфейс и функционал.\n */\nexport function createTabsController<T extends HTMLDivElement, P extends TabsControllerProps>(\n    ListComponent: ForwardRefExoticComponent<HorizontalTabsProps & RefAttributes<HTMLDivElement>>,\n    ItemComponent: ForwardRefExoticComponent<HorizontalTabItemProps & RefAttributes<HTMLDivElement>>,\n) {\n    // eslint-disable-next-line prefer-arrow-callback\n    return forwardRef<T, P>(function TabsController({ items, index, autoscroll, onIndexChange, ...rest }, ref) {\n        const { disabled } = rest;\n\n        return (\n            <ListComponent ref={ref} index={index} {...rest}>\n                {items.map(({ label, ...restItem }, i) => (\n                    <ItemComponent\n                        key={i}\n                        selected={i === index}\n                        itemIndex={i}\n                        onIndexChange={onIndexChange}\n                        tabIndex={!disabled && i === index ? 0 : -1}\n                        disabled={disabled}\n                        {...restItem}\n                    >\n                        {label}\n                    </ItemComponent>\n                ))}\n            </ListComponent>\n        );\n    });\n}\n"],"names":["createTabsController","ListComponent","ItemComponent","forwardRef","TabsController","_ref","ref","items","index","onIndexChange","rest","_objectWithoutProperties","_excluded","disabled","React","createElement","_extends","map","_ref2","i","label","restItem","_excluded2","key","selected","itemIndex","tabIndex"],"mappings":";;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,oBAAoBA,CAChCC,aAA6F,EAC7FC,aAAgG,EAClG;AACE;EACA,oBAAOC,UAAU,CAAO,SAASC,cAAcA,CAAAC,IAAA,EAAuDC,GAAG,EAAE;AAAA,IAAA,IAAzDC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;MAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAA;MAAcC,aAAa,GAAAJ,IAAA,CAAbI,aAAa,CAAA;AAAKC,MAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,EAAA;AAC9F,IAAA,IAAQC,QAAQ,GAAKH,IAAI,CAAjBG,QAAQ,CAAA;AAEhB,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,aAAa,EAAAe,QAAA,CAAA;AAACV,MAAAA,GAAG,EAAEA,GAAI;AAACE,MAAAA,KAAK,EAAEA,KAAAA;KAAWE,EAAAA,IAAI,GAC1CH,KAAK,CAACU,GAAG,CAAC,UAAAC,KAAA,EAAyBC,CAAC,EAAA;AAAA,MAAA,IAAvBC,KAAK,GAAAF,KAAA,CAALE,KAAK;AAAKC,QAAAA,QAAQ,GAAAV,wBAAA,CAAAO,KAAA,EAAAI,UAAA,CAAA,CAAA;AAAA,MAAA,oBAC5BR,KAAA,CAAAC,aAAA,CAACb,aAAa,EAAAc,QAAA,CAAA;AACVO,QAAAA,GAAG,EAAEJ,CAAE;QACPK,QAAQ,EAAEL,CAAC,KAAKX,KAAM;AACtBiB,QAAAA,SAAS,EAAEN,CAAE;AACbV,QAAAA,aAAa,EAAEA,aAAc;QAC7BiB,QAAQ,EAAE,CAACb,QAAQ,IAAIM,CAAC,KAAKX,KAAK,GAAG,CAAC,GAAG,CAAC,CAAE;AAC5CK,QAAAA,QAAQ,EAAEA,QAAAA;OACNQ,EAAAA,QAAQ,CAEXD,EAAAA,KACU,CAAC,CAAA;AAAA,KACnB,CACU,CAAC,CAAA;AAExB,GAAC,CAAC,CAAA;AACN;;;;"}