@salutejs/plasma-new-hope 0.324.1-canary.1996.15273628835.0 → 0.324.1-canary.1998.15294767801.0

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

@@ -133,3 +133,47 @@ export function App() {
     );
 }
 ```
+
+## Управление шириной уведомления
+
+Для управления шириной компонента доступны следующие свойства:
+
+- `width` — устанавливает ширину компонента.
+- `maxWidth` — устанавливает максимальную ширину компонента.
+
+Оба свойства принимает любые действительные CSS значения для [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax) и [maxWidth](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
+
+```jsx live
+import React, { useCallback } from 'react';
+import { IconBell } from '@salutejs/plasma-icons';
+import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const handleShow = useCallback(() => {
+        addNotification({
+            id: 'incoming-call',
+            title: 'Входящий вызов',
+            icon: <IconBell color="inherit" size="xs" />,
+            children: 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.',
+            view: 'positive',
+            textColor: 'black',
+            titleColor: 'blue',
+            width: 'fit-content',
+            maxWidth: '30rem'
+        }, 3000);
+    }, []);
+
+    const handleHide = useCallback(() => {
+        closeNotification('incoming-call');
+    }, []);
+
+    return (
+        <NotificationsProvider>
+            <ButtonGroup>
+                <Button text="Показать оповещение" onClick={handleShow} />
+                <Button text="Скрыть оповещение" onClick={handleHide} />
+            </ButtonGroup>
+        </NotificationsProvider>
+    );
+}
+```

package/emotion/es/components/Notification/variations/_layout/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
 import { classes, tokens } from "../../Notification.tokens";
-export var base = /*#__PURE__*/css(".", classes.wrapper, "{width:var(", tokens.width, ");padding:var(", tokens.padding, ");}.", classes.wrapper, ".", classes.horizontal, "{padding:var(", tokens.horizontalLayoutPadding, ");&.", classes.withoutCloseIcon, "{padding-right:var(", tokens.horizontalLayoutRightPaddingWithoutCloseIcon, ");}}.", classes.wrapper, ".", classes.horizontal, ".", classes.oneLine, "{padding:var(", tokens.paddingOneLineTextbox, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTm90aWZpY2F0aW9uL3ZhcmlhdGlvbnMvX2xheW91dC9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL05vdGlmaWNhdGlvbi92YXJpYXRpb25zL19sYXlvdXQvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi4vLi4vTm90aWZpY2F0aW9uLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIC4ke2NsYXNzZXMud3JhcHBlcn0ge1xuICAgICAgICB3aWR0aDogdmFyKCR7dG9rZW5zLndpZHRofSk7XG4gICAgICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5wYWRkaW5nfSk7XG4gICAgfVxuXG4gICAgLiR7Y2xhc3Nlcy53cmFwcGVyfS4ke2NsYXNzZXMuaG9yaXpvbnRhbH0ge1xuICAgICAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaG9yaXpvbnRhbExheW91dFBhZGRpbmd9KTtcbiAgICAgICAgJi4ke2NsYXNzZXMud2l0aG91dENsb3NlSWNvbn0ge1xuICAgICAgICAgICAgcGFkZGluZy1yaWdodDogdmFyKCR7dG9rZW5zLmhvcml6b250YWxMYXlvdXRSaWdodFBhZGRpbmdXaXRob3V0Q2xvc2VJY29ufSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAuJHtjbGFzc2VzLndyYXBwZXJ9LiR7Y2xhc3Nlcy5ob3Jpem9udGFsfS4ke2NsYXNzZXMub25lTGluZX0ge1xuICAgICAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ09uZUxpbmVUZXh0Ym94fSk7XG4gICAgfVxuYDtcbiJdfQ== */"));
+export var base = /*#__PURE__*/css(".", classes.wrapper, "{padding:var(", tokens.padding, ");}.", classes.wrapper, ".", classes.horizontal, "{padding:var(", tokens.horizontalLayoutPadding, ");&.", classes.withoutCloseIcon, "{padding-right:var(", tokens.horizontalLayoutRightPaddingWithoutCloseIcon, ");}}.", classes.wrapper, ".", classes.horizontal, ".", classes.oneLine, "{padding:var(", tokens.paddingOneLineTextbox, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTm90aWZpY2F0aW9uL3ZhcmlhdGlvbnMvX2xheW91dC9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL05vdGlmaWNhdGlvbi92YXJpYXRpb25zL19sYXlvdXQvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi4vLi4vTm90aWZpY2F0aW9uLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIC4ke2NsYXNzZXMud3JhcHBlcn0ge1xuICAgICAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ30pO1xuICAgIH1cblxuICAgIC4ke2NsYXNzZXMud3JhcHBlcn0uJHtjbGFzc2VzLmhvcml6b250YWx9IHtcbiAgICAgICAgcGFkZGluZzogdmFyKCR7dG9rZW5zLmhvcml6b250YWxMYXlvdXRQYWRkaW5nfSk7XG5cbiAgICAgICAgJi4ke2NsYXNzZXMud2l0aG91dENsb3NlSWNvbn0ge1xuICAgICAgICAgICAgcGFkZGluZy1yaWdodDogdmFyKCR7dG9rZW5zLmhvcml6b250YWxMYXlvdXRSaWdodFBhZGRpbmdXaXRob3V0Q2xvc2VJY29ufSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAuJHtjbGFzc2VzLndyYXBwZXJ9LiR7Y2xhc3Nlcy5ob3Jpem9udGFsfS4ke2NsYXNzZXMub25lTGluZX0ge1xuICAgICAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ09uZUxpbmVUZXh0Ym94fSk7XG4gICAgfVxuYDtcbiJdfQ== */"));

package/emotion/es/components/NumberFormat/NumberFormat.js

@@ -20,18 +20,13 @@ export var composeNumberFormat = function composeNumberFormat(InputComponent) {
         onChange(changeEvent, values);
       }
     };
-    var InputComponentWithoutEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
-      return /*#__PURE__*/React.createElement(InputComponent, _extends({
-        ref: ref,
-        _textEllipsisDisable: true
-      }, props));
-    });
     return /*#__PURE__*/React.createElement(NumericFormat, _extends({
       thousandSeparator: thousandSeparator,
       decimalScale: decimalScale,
       decimalSeparator: decimalSeparator,
-      customInput: InputComponentWithoutEllipsis,
+      customInput: InputComponent,
       getInputRef: outerRef,
+      _textEllipsisDisable: true,
       onValueChange: handleChangeValue
     }, rest));
   });

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

@@ -37,7 +37,7 @@ export function App() {
 ```
 
 ### Размер поля
-Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l" | "m" | "s" | "xs"`:
+Размер поля задаётся с помощью свойства `size`:
 
 ```tsx live
 import React from 'react';
@@ -46,6 +46,11 @@ import { TextField } from '@salutejs/{{ package }}';
 export function App() {
     return (
         <div>
+            <TextField
+                placeholder="Размер"
+                size="xl"
+                defaultValue="XL64"
+            />
             <TextField
                 placeholder="Размер"
                 size="l"
@@ -56,6 +61,16 @@ export function App() {
                 size="s"
                 defaultValue="S40"
             />
+            <TextField
+                placeholder="Размер"
+                size="s"
+                defaultValue="S32"
+            />
+            <TextField
+                placeholder="Размер"
+                size="xs"
+                defaultValue="XS24"
+            />
         </div>
     );
 }

package/emotion/es/examples/fixtures/Notification.js

@@ -1,5 +1,5 @@
 export var titles = ['Выполнено', 'Внимание', 'Ошибка'];
-export var texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
+export var texts = ['Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.'];
 export var size = ['xs', 'xxs'];
 export var iconPlacement = ['top', 'left'];
 export var notificationsPlacements = ['center', 'top', 'bottom', 'right', 'left', 'top-right', 'top-left', 'bottom-right', 'bottom-left'];

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

@@ -167,12 +167,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification(
             {
                 icon: <IconDisclosureRight color="inherit" />,
+                width,
+                maxWidth,
                 ...rest,
                 ...getNotificationProps(count.current),
             },
@@ -210,6 +212,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
         role: 'alert',
         layout: 'vertical',
         placement: 'bottom-right',
+        width: '',
+        maxWidth: '',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };