@salutejs/plasma-new-hope 0.172.0-canary.1493.11404929441.0 → 0.172.0-canary.1494.11453767955.0

package/emotion/es/components/Tabs/Tabs.template-doc.mdx

@@ -63,7 +63,6 @@ export function App() {
 
 ### Расположение табов
 Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
-Также у горизонтальных табов есть свойство `header`.
 
 ```tsx live
 import React, { useState } from 'react';
@@ -72,11 +71,10 @@ import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
     const items = Array(8).fill(0);
-    const [verticalIndex, setVerticalIndex] = useState(0);
-    const [horizontalIndex, setHorizontalIndex] = useState(0);
+    const [index, setIndex] = useState(0);
 
     return (
-        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <div>
             <Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
                 {items.map((_, i) => (
                     <TabItem
@@ -84,26 +82,10 @@ export function App() {
                         orientation="vertical"
                         key={`item:${i}`}
                         size="xs"
-                        selected={i === verticalIndex}
+                        selected={i === index}
                         tabIndex={0}
                         contentLeft={<IconClock size="xs" color="inherit" />}
-                        onClick={() => setVerticalIndex(i)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-
-            <Tabs header view="divider" size="h5" style=\{{ width: '15rem' }}>
-                {items.map((_, i) => (
-                    <TabItem
-                        header
-                        view="divider"
-                        key={`item:${i}`}
-                        size="h5"
-                        selected={i === horizontalIndex}
-                        tabIndex={0}
-                        onClick={() => setHorizontalIndex(i)}
+                        onClick={() => setIndex(i)}
                     >
                         {`Label${i + 1}`}
                     </TabItem>

package/emotion/es/components/Tabs/index.js

@@ -2,8 +2,6 @@ export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/Horizo
 export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
 export { verticalTabsRoot, verticalTabsConfig } from './ui/vertical/VerticalTabs/VerticalTabs';
 export { verticalTabItemRoot, verticalTabItemConfig } from './ui/vertical/VerticalTabItem/VerticalTabItem';
-export { headerTabsRoot, headerTabsConfig } from './ui/header/HeaderTabs/HeaderTabs';
-export { headerTabItemRoot, headerTabItemConfig } from './ui/header/HeaderTabItem/HeaderTabItem';
 export { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';

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

@@ -1,4 +1,4 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "header"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "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; }
@@ -33,7 +33,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
-      _header = props.header,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -91,10 +90,10 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
+      pilled: pilled,
       role: role,
       view: view,
       size: size,
-      pilled: pilled,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
       className: cx(pilledClass, selectedClass, animatedClass, className),

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", "header"];
+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."); }
@@ -43,7 +43,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
-      _header = props.header,
       rest = _objectWithoutProperties(props, _excluded);
     var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -192,8 +191,8 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       view: view,
       role: "tablist",
       size: size,
-      id: tabsId,
       pilled: pilled,
+      id: tabsId,
       ref: outerRef,
       disabled: disabled,
       className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),

package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import { headerTabItemConfig, horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
+import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
 import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
 import { config as verticalConfig } from './vertical/VerticalTabItem.config';
-import { config as headerConfig } from './header/HeaderTabItem.config';
 var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
 var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
 var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
 var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
-var mergedHeaderTabItemConfig = /*#__PURE__*/mergeConfig(headerTabItemConfig, headerConfig);
-var HeaderTabItem = /*#__PURE__*/component(mergedHeaderTabItemConfig);
 export var TabItem = function TabItem(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/React.createElement(VerticalTabItem, props);
   }
-  if (props.header) {
-    return /*#__PURE__*/React.createElement(HeaderTabItem, props);
-  }
   return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
 };

package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import { horizontalTabsConfig, verticalTabsConfig, headerTabsConfig } from '../../../../components/Tabs';
+import { horizontalTabsConfig, verticalTabsConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
 import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
 import { config as verticalConfig } from './vertical/VerticalTabs.config';
-import { config as headerConfig } from './header/HeaderTabs.config';
 var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
-var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
 var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
+var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
 var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
-var mergedHeaderTabsConfig = /*#__PURE__*/mergeConfig(headerTabsConfig, headerConfig);
-var HeaderTabs = /*#__PURE__*/component(mergedHeaderTabsConfig);
 export var Tabs = function Tabs(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/React.createElement(VerticalTabs, props);
   }
-  if (props.header) {
-    return /*#__PURE__*/React.createElement(HeaderTabs, props);
-  }
   return /*#__PURE__*/React.createElement(HorizontalTabs, props);
 };

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

@@ -12,7 +12,6 @@ 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;
 
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
 type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
 type VerticalStoryTabsProps = StoryTabsProps & { height: string };
-type HeaderStoryTabsProps = StoryTabsProps & { width: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
             'forwardedAs',
             'outsideScroll',
             'index',
-            'header',
         ]),
         contentRight: {
             options: contentRightOptions,
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
-    const { disabled, itemQuantity, size, hasDivider, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    header
-                    key={`item:${i}`}
-                    view="divider"
-                    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: HeaderStoryTabsProps) => {
-    const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs
-            header
-            view={hasDivider ? 'divider' : 'clear'}
-            disabled={disabled}
-            size={size as HeaderSize}
-            style={{ width }}
-        >
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
-                    header
                     key={`item:${i}`}
                     view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={helperText}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
         hasDivider: true,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        itemQuantity: 4,
     },
     argTypes: {
         size: {
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
                 type: 'select',
             },
         },
-        clip: {
-            options: headerClips,
+        contentLeft: {
+            options: contentLeftOptions,
             control: {
                 type: 'select',
             },
-            if: { arg: 'stretch', truthy: false },
         },
-        width: {
+        contentRight: {
+            options: contentRightOptions,
             control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
+                type: 'select',
             },
         },
-        contentRight: {
+        clip: {
             table: {
                 disable: true,
             },
         },
     },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
-    },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };