@salutejs/plasma-new-hope 0.176.1-canary.1510.11572230988.0 → 0.177.0-canary.1500.11571505911.0

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

@@ -29,6 +29,7 @@ type CustomStoryTabsProps = {
 
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
+const labels = ['Label', 'Middle label', 'Very long label'];
 
 const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
@@ -76,6 +77,12 @@ const meta: Meta<StoryTabsProps> = {
             },
             if: { arg: 'helperText', eq: '' },
         },
+        maxItemWidth: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
     },
 };
 
@@ -90,13 +97,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
+        maxItemWidth,
         helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs clip="none" view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -110,8 +118,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -127,8 +136,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -147,6 +157,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         hasDivider,
         helperText,
         width,
+        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -166,8 +177,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -183,8 +195,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -202,6 +215,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
+        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -234,8 +248,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -251,8 +266,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -269,6 +285,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
+                            maxItemWidth="auto"
                         >
                             ShowAll
                         </TabItem>
@@ -285,9 +302,10 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         helperText: '',
-        itemQuantity: 8,
+        itemQuantity: 6,
         stretch: false,
         width: '15rem',
+        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -343,6 +361,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
+        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -363,8 +382,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -381,8 +401,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -401,6 +422,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         hasDivider,
         helperText,
         height,
+        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -428,8 +450,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -446,8 +469,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -465,6 +489,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
+        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -498,8 +523,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
+                            maxItemWidth={maxItemWidth}
                         >
-                            {`Label${i + 1}`}
+                            {`${labels[i % labels.length]} ${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -516,8 +542,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
+                        maxItemWidth={maxItemWidth}
                     >
-                        {`Label${i + 1}`}
+                        {`${labels[i % labels.length]} ${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -534,6 +561,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
+                        maxItemWidth="auto"
                     >
                         ShowAll
                     </TabItem>
@@ -548,10 +576,11 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        itemQuantity: 8,
+        itemQuantity: 6,
         orientation: 'vertical',
         helperText: '',
         height: '10rem',
+        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -612,6 +641,7 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
+        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -629,8 +659,9 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
+                    maxItemWidth={maxItemWidth}
                 >
-                    {`Label${i + 1}`}
+                    {`${labels[i % labels.length]} ${i + 1}`}
                 </TabItem>
             ))}
         </Tabs>
@@ -643,6 +674,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 4,
+        maxItemWidth: '',
     },
     argTypes: {
         size: {

package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -34,6 +34,9 @@ var config = exports.config = {
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Tabs.tabsTokens.itemPilledBorderRadius)
+    },
+    truncate: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js

@@ -23,6 +23,9 @@ var config = exports.config = {
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
+    },
+    truncate: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/es/components/Badge/Badge.js

@@ -1,5 +1,11 @@
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 } from 'react';
@@ -9,6 +15,7 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as transparentCSS } from './variations/_transparent/base';
 import { base as clearCSS } from './variations/_clear/base';
+import { base as truncateCSS } from './variations/_truncate/base';
 import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
 import { classes } from './Badge.tokens';
 export var badgeRoot = function badgeRoot(Root) {
@@ -26,20 +33,28 @@ export var badgeRoot = function badgeRoot(Root) {
       transparent = _props$transparent === void 0 ? false : _props$transparent,
       _props$clear = props.clear,
       clear = _props$clear === void 0 ? false : _props$clear,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? 'auto' : _props$maxWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? classes.badgePilled : undefined;
     var transparentClass = transparent ? classes.badgeTransparent : undefined;
     var clearClass = clear ? classes.badgeClear : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
+    var truncate = maxWidth !== 'auto';
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
-      className: cx(pilledClass, transparentClass, clearClass, className),
+      className: cx(pilledClass, transparentClass, clearClass, truncate && classes.badgeTruncate, className),
       view: view,
       size: size,
       pilled: pilled,
       transparent: transparent,
-      clear: clear
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
+      clear: clear,
+      truncate: truncate
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
   });
 };
 export var badgeConfig = {
@@ -65,6 +80,10 @@ export var badgeConfig = {
     clear: {
       css: clearCSS,
       attrs: true
+    },
+    truncate: {
+      css: truncateCSS,
+      attrs: true
     }
   },
   defaults: {

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

@@ -1,7 +1,8 @@
 export var classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
-  badgeClear: 'badge-clear'
+  badgeClear: 'badge-clear',
+  badgeTruncate: 'badge-truncate'
 };
 export var tokens = {
   background: '--plasma-badge-background',

package/styled-components/es/components/Badge/variations/_truncate/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../Badge.tokens';
+import { StyledContentMain } from '../../Badge.styles';
+export var base = /*#__PURE__*/css(["&.", "{max-width:100%;", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}"], classes.badgeTruncate, StyledContentMain);

package/styled-components/es/components/Badge/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/components/Notification/Notification.js

@@ -86,7 +86,7 @@ export var notificationRoot = function notificationRoot(Root) {
     })))));
   });
 };
-export var notificationConfig = {
+export var noticationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

package/styled-components/es/components/Notification/Notification.styles.js

@@ -58,10 +58,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:var(", ");"], tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentFontLetterSpacing, tokens.contentFontLineHeight, /*#__PURE__*/String(applyHyphens), tokens.contentColor);
 export var StyledItemWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-8"
-})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], classes.notificationItemOpened, classes.notificationLeftToRightAnimation, classes.notificationItemHidden, classes.notificationLeftToRightAnimation);
+})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;}&&.", "{animation:0.4s hideAnimation ease-out;}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], classes.notificationItemOpened, classes.notificationItemHidden);
 export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-9"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref8) {
-  var placement = _ref8.placement;
-  return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
-});
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:flex-end;"]);

package/styled-components/es/components/Notification/Notification.template-doc.mdx

@@ -10,15 +10,14 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения.
+Компонент `Notification` может использоваться для создания собственных систем оповещения. 
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`.
+Текстовая часть оповещения состоит из `title` и `children`. 
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
 ### Провайдер контекста
-Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна.
-В качестве свойств можно указать контейнер для оповещений через `frame` и расположение в контейнере через свойство `placement`, как `bottom-right` _(по умолчанию)_ или `bottom-left`.
+Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
@@ -35,32 +34,24 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
-Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live
 import React from 'react';
-import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
 
 export function App() {
-    const handleShow = React.useCallback(() => {
+    const handleClick = React.useCallback(() => {
         addNotification({
-            id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
         }, 1000);
     }, []);
 
-    const handleHide = React.useCallback(() => {
-        closeNotification('incoming-call');
-    }, []);
-
     return (
         <NotificationsProvider>
-            <ButtonGroup>
-                <Button text="Показать оповещение" onClick={handleShow} />
-                <Button text="Скрыть оповещение" onClick={handleHide} />
-            </ButtonGroup>
+            <Button text="Показать оповещение" onClick={handleClick} />
         </NotificationsProvider>
     );
 }

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

@@ -13,8 +13,7 @@ export var classes = {
   withoutIcon: 'notification-without-icon',
   withoutCloseIcon: 'notification-without-close-icon',
   notificationItemOpened: 'notification-item-opened',
-  notificationItemHidden: 'notification-item-hidden',
-  notificationLeftToRightAnimation: 'notification-left-to-right-animation'
+  notificationItemHidden: 'notification-item-hidden'
 };
 export var tokens = {
   background: '--plasma-notification-backgorund',

package/styled-components/es/components/Notification/NotificationsPortal.js

@@ -24,9 +24,7 @@ var StyledPopup = /*#__PURE__*/styled(Popup).withConfig({
  */
 export var NotificationsPortal = function NotificationsPortal(_ref) {
   var config = _ref.config,
-    frame = _ref.frame,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement;
+    frame = _ref.frame;
   var _useStoreon = useStoreon('notifications'),
     notifications = _useStoreon.notifications;
   var Notification = useMemo(function () {
@@ -35,17 +33,15 @@ export var NotificationsPortal = function NotificationsPortal(_ref) {
   return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
     opened: true,
     frame: frame,
-    placement: placement,
+    placement: "bottom-right",
     zIndex: "9100"
-  }, /*#__PURE__*/React.createElement(StyledRoot, {
-    placement: placement
-  }, notifications.map(function (_ref2) {
+  }, /*#__PURE__*/React.createElement(StyledRoot, null, notifications.map(function (_ref2) {
     var id = _ref2.id,
       isHidden = _ref2.isHidden,
       rest = _objectWithoutProperties(_ref2, _excluded);
     return /*#__PURE__*/React.createElement(StyledItemWrapper, {
       key: id,
-      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened, placement === 'bottom-left' && classes.notificationLeftToRightAnimation),
+      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened),
       isHidden: isHidden || false
     }, /*#__PURE__*/React.createElement(Notification, _extends({
       key: id,

package/styled-components/es/components/Notification/NotificationsProvider.js

@@ -5,13 +5,11 @@ import { NotificationsPortal } from './NotificationsPortal';
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     config = _ref.config,
-    frame = _ref.frame,
-    placement = _ref.placement;
+    frame = _ref.frame;
   return /*#__PURE__*/React.createElement(StoreContext.Provider, {
     value: NotificationsStore
   }, children, /*#__PURE__*/React.createElement(NotificationsPortal, {
     frame: frame,
-    placement: placement,
     config: config
   }));
 };

package/styled-components/es/components/Notification/index.js

@@ -1,4 +1,4 @@
 export { NotificationsProvider } from './NotificationsProvider';
-export { notificationRoot, notificationConfig } from './Notification';
+export { notificationRoot, noticationConfig } from './Notification';
 export { addNotification, closeNotification } from './NotificationsStore';
 export { classes as notificationClasses, tokens as notificationTokens } from './Notification.tokens';

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

@@ -93,8 +93,7 @@ export var tokens = {
   spinnerSize: '--plasma-select-spinner-size',
   spinnerSizeTight: '--plasma-select-spinner-size-tight',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
-  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
-  contentLeftColor: '--plasma-select-content-left-color'
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 export var constants = {
   focusColor: '--surface-accent',

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -63,7 +63,7 @@ export var InnerLabel = /*#__PURE__*/styled.label.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], constants.textfieldInnerLabelColor, constants.fontFamily, constants.fontSize, constants.fontStyle, constants.fontWeight, constants.fontLetterSpacing, constants.fontLineHeight);
 export var ContentLeftWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-10"
-})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;color:var(", ");"], tokens.contentLeftColor);
+})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;"]);
 export var Value = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-11"
 })(["", ""], /*#__PURE__*/applyEllipsis());

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

@@ -14,7 +14,8 @@ export var classes = {
   tabsHasTopArrow: 'tabs-has-top-arrow',
   tabsHasBottomArrow: 'tabs-has-bottom-arrow',
   tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsClipShowAll: 'tabs-clip-show-all',
+  tabsTruncate: 'tabs-truncate'
 };
 export var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',

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

@@ -1,5 +1,11 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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, useRef, useContext, useEffect, useCallback } from 'react';
@@ -11,6 +17,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as truncateCSS } from './variations/_truncate/base';
 import { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';
 export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
@@ -33,11 +40,13 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
+      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
     var role = 'tab';
+    var truncate = maxWidth !== 'auto';
     var pilledAttr = view !== 'clear' && pilled;
     var animatedClass = animated ? classes.tabItemAnimated : undefined;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
@@ -94,11 +103,16 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       role: role,
       view: view,
       size: size,
+      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, className),
+      className: cx(pilledClass, selectedClass, animatedClass, truncate && classes.tabsTruncate, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
@@ -125,6 +139,9 @@ export var horizontalTabItemConfig = {
     },
     pilled: {
       css: pilledCSS
+    },
+    truncate: {
+      css: truncateCSS
     }
   },
   defaults: {

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { addFocus } from '../../../../../mixins';
 import { tokens } from '../../../tokens';
-export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
+export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;white-space:nowrap;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),