@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/cjs/components/SidePage/__creevey__/SidePage.creevey.mts

@@ -0,0 +1,421 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+import { SidePageFooterDataTids } from '../SidePageFooter';
+
+const simpleTests = () => {
+  test('open side-page', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+      .perform();
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page');
+  });
+};
+
+kind('SidePage', () => {
+  story('SidePageOverAnotherSidePageStory', () => {
+    test('open internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open internal side-page');
+    });
+
+    test('close internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
+        )
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'close internal side-page');
+    });
+  });
+
+  story('StickySidePageHeaderWhenAnotherSidePageStory', () => {
+    test('sticky header, open and close internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]');
+
+        if (sidepageContainer) {
+          sidepageContainer.scrollTop = 3000;
+        }
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
+        )
+        .perform();
+      await context.matchImage(
+        await context.webdriver.takeScreenshot(),
+        'sticky header, open and close internal side-page',
+      );
+    });
+  });
+
+  story('Simple', () => {
+    simpleTests();
+  });
+
+  story('MobileSimple', () => {
+    simpleTests();
+  });
+
+  story('BodyWithoutFooter', () => {
+    test('scroll to bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom');
+    });
+  });
+
+  story('BodyWithoutHeader', () => {
+    test('open side-page without header', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page without header');
+    });
+  });
+
+  story('SidePageWithFocusLockWhenBackgroundBlocked', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
+
+    test('open side-page', async (context) => {
+      const pressTab = async () => {
+        await context.webdriver
+          .actions({
+            bridge: true,
+          })
+          .sendKeys(Key.TAB)
+          .perform();
+        await delay(4000);
+      };
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(1000);
+      await pressTab();
+      const firstTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const secondTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const thirdTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const fourthTimeTabPress = await context.webdriver.takeScreenshot();
+      await context.matchImages({
+        firstTimeTabPress,
+        secondTimeTabPress,
+        thirdTimeTabPress,
+        fourthTimeTabPress,
+      });
+    });
+  });
+
+  story('TestUpdateLayoutMethodStory', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
+    });
+
+    test('Body content has been changed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-body-content"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'Body content has been changed');
+    });
+
+    test('child component content has been changed', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'child component content has been changed');
+    });
+
+    test('update layout', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="update"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'update layout');
+    });
+  });
+
+  story('WithLongTitleStory', () => {
+    test('not fixed', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'not fixed');
+    });
+
+    test('fixed close element', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
+        const fixedHeaderHeight = 50;
+
+        sidePageContainer.scrollTop = (sidePageHeader.offsetHeight - fixedHeaderHeight) / 2;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed close element');
+    });
+
+    test('fixed header', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
+        const fixedHeaderHeight = 50;
+
+        sidePageContainer.scrollTop = sidePageHeader.offsetHeight - fixedHeaderHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed header');
+    });
+  });
+
+  story('SidePageWithChildrenFromOtherComponent', () => {
+    test('without header, footer', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'without header, footer');
+    });
+
+    test('scroll to bottom without header, footer', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom without header, footer');
+    });
+
+    test('with header, footer', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'with header, footer');
+    });
+
+    test('scroll to bottom with header, footer', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with header, footer');
+    });
+
+    test('with panel', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'with panel');
+    });
+
+    test('scroll to bottom with panel', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with panel');
+    });
+  });
+
+  story('SidePageWithBlockBackground', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
+
+    test('open side-page', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+
+  story('SidePageChangeBlockBgAndIgnoreBgClick', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+      captureElement: 'body',
+    });
+
+    test('change sidepage mode to view to edit to view', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(100);
+      const viewModeSidePage = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
+        .perform();
+      await delay(100);
+      const editModeSidePage = await context.webdriver.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
+        .perform();
+      await delay(100);
+      const againViewModeSidePage = await context.takeScreenshot();
+
+      await delay(100);
+      await context.matchImages({ viewModeSidePage, editModeSidePage, againViewModeSidePage });
+    });
+  });
+
+  story('NestedSidePagesWithChangingVeil', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+      captureElement: 'body',
+    });
+
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-side-page"]' }))
+        .perform();
+      await delay(500);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-side-page"]' }))
+        .perform();
+      await delay(500);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-third-side-page"]' }))
+        .perform();
+      await delay(500);
+      const thirdOpenedNoVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-first-from-third-side-page"]` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstVeil = await context.webdriver.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstAndSecondVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-third-from-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstAndThirdVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="close-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const secondOpenedWithFirstVeilAndNoSecondVeil = await context.takeScreenshot();
+
+      await context
+        .expect({
+          thirdOpenedNoVeils,
+          thirdOpenedWithFirstVeil,
+          thirdOpenedWithFirstAndSecondVeils,
+          thirdOpenedWithFirstAndThirdVeils,
+          secondOpenedWithFirstVeilAndNoSecondVeil,
+        })
+        .to.matchImages();
+    });
+  });
+});

package/cjs/components/SidePage/__docs__/SidePage.mdx

@@ -0,0 +1,28 @@
+import * as SidePageStories from './SidePage.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SidePageStories} />
+
+# SidePage
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/sidepage/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A11142)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/SidePage/__docs__/SidePageBody.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as SidePageBodyStories from '../__docs__/SidePageBody.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SidePageBodyStories} />
+
+# SidePageBody
+
+Тело для сайдпейджа.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/SidePage/__docs__/SidePageContainer.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as SidePageContainerStories from '../__docs__/SidePageContainer.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SidePageContainerStories} />
+
+# SidePageContainer
+
+Контейнер с отступами.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/SidePage/__docs__/SidePageFooter.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as SidePageFooterStories from '../__docs__/SidePageFooter.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SidePageFooterStories} />
+
+# SidePageFooter
+
+Футер сайдпейджа.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/SidePage/__docs__/SidePageHeader.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as SidePageHeaderStories from '../__docs__/SidePageHeader.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SidePageHeaderStories} />
+
+# SidePageHeader
+
+Шапка сайдпейджа.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/SingleToast/SingleToast.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Toast, ToastProps } from '../Toast/Toast';
 /**
- * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Позволяет вызывать тосты с помощью статических методов.
+ * В отличие от статических методов из компонента Toast их можно кастомизировать и они работают с `React@18`.
  */
 export declare class SingleToast extends React.Component<ToastProps> {
     static __KONTUR_REACT_UI__: string;

package/cjs/components/SingleToast/SingleToast.js

@@ -4,7 +4,11 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _Toast = require("../Toast/Toast");var _SingleToast;
 
 /**
- * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Позволяет вызывать тосты с помощью статических методов.
+ * В отличие от статических методов из компонента Toast их можно кастомизировать и они работают с `React@18`.
  */var
 SingleToast = exports.SingleToast = /*#__PURE__*/function (_React$Component) {function SingleToast() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
@@ -18,6 +22,10 @@ SingleToast = exports.SingleToast = /*#__PURE__*/function (_React$Component) {fu
 
 
 
+
+
+
+
     render = function () {
       return /*#__PURE__*/_react.default.createElement(_Toast.Toast, (0, _extends2.default)({ ref: SingleToast.ref }, _this.props));
-    };return _this;}(0, _inheritsLoose2.default)(SingleToast, _React$Component);return SingleToast;}(_react.default.Component);_SingleToast = SingleToast;SingleToast.__KONTUR_REACT_UI__ = 'SingleToast';SingleToast.displayName = 'SingleToast';SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;_SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = _SingleToast.ref.current) == null || _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = _SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});};
+    };return _this;}(0, _inheritsLoose2.default)(SingleToast, _React$Component);return SingleToast;}(_react.default.Component);_SingleToast = SingleToast;SingleToast.__KONTUR_REACT_UI__ = 'SingleToast';SingleToast.displayName = 'SingleToast';SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;_SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = _SingleToast.ref.current) == null || _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {if (_react.default.version.search('18') === 0) {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = _SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});} else {var _SingleToast$ref$curr3;(_SingleToast$ref$curr3 = _SingleToast.ref.current) == null || _SingleToast$ref$curr3.close();}};

package/cjs/components/SingleToast/SingleToast.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_Toast","_SingleToast","SingleToast","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","render","default","createElement","Toast","_extends2","ref","props","_inheritsLoose2","React","Component","__KONTUR_REACT_UI__","displayName","createRef","push","_SingleToast$ref$curr","close","_len2","_key2","current","ReactDOM","flushSync","_SingleToast$ref$curr2"],"sources":["SingleToast.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static __KONTUR_REACT_UI__ = 'SingleToast';\n  public static displayName = 'SingleToast';\n\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"],"mappings":"iVAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA,mBAAmD,IAAAG,YAAA;;AAEnD;AACA;AACA,GAFA;AAGaC,WAAW,GAAAC,OAAA,CAAAD,WAAA,0BAAAE,gBAAA,YAAAF,YAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;IAYtBU,MAAM,GAAG,YAAM;MACb,oBAAOnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,MAAA,CAAAkB,KAAK,MAAAC,SAAA,CAAAH,OAAA,IAACI,GAAG,EAAElB,WAAW,CAACkB,GAAI,IAAKf,KAAA,CAAKgB,KAAK,CAAG,CAAC;IACxD,CAAC,QAAAhB,KAAA,MAAAiB,eAAA,CAAAN,OAAA,EAAAd,WAAA,EAAAE,gBAAA,SAAAF,WAAA,GAd8BqB,cAAK,CAACC,SAAS,EAAAvB,YAAA,GAAnCC,WAAW,CAAXA,WAAW,CACRuB,mBAAmB,GAAG,aAAa,CADtCvB,WAAW,CAERwB,WAAW,GAAG,aAAa,CAF9BxB,WAAW,CAIRkB,GAAG,gBAAGG,cAAK,CAACI,SAAS,CAAQ,CAAC,CAJjCzB,WAAW,CAKR0B,IAAI,GAAsB,YAAa,KAAAC,qBAAA,CACnD3B,YAAW,CAAC4B,KAAK,CAAC,CAAC,CAAC,SAAAC,KAAA,GAAAxB,SAAA,CAAAC,MAAA,EADsBC,IAAI,OAAAC,KAAA,CAAAqB,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA,KAAJvB,IAAI,CAAAuB,KAAA,IAAAzB,SAAA,CAAAyB,KAAA,GAE9C,CAAAH,qBAAA,GAAA3B,YAAW,CAACkB,GAAG,CAACa,OAAO,aAAvBJ,qBAAA,CAAyBD,IAAI,CAAAf,KAAA,CAAAgB,qBAAA,EAAIpB,IAAI,CAAC,CACxC,CAAC,CARUP,WAAW,CASR4B,KAAK,GAAuB,YAAM,CAC9CI,iBAAQ,CAACC,SAAS,CAAC,iBAAAC,sBAAA,SAAAA,sBAAA,GAAMlC,YAAW,CAACkB,GAAG,CAACa,OAAO,qBAAvBG,sBAAA,CAAyBN,KAAK,CAAC,CAAC,GAAC,CAC5D,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_Toast","_SingleToast","SingleToast","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","render","default","createElement","Toast","_extends2","ref","props","_inheritsLoose2","React","Component","__KONTUR_REACT_UI__","displayName","createRef","push","_SingleToast$ref$curr","close","_len2","_key2","current","version","search","ReactDOM","flushSync","_SingleToast$ref$curr2","_SingleToast$ref$curr3"],"sources":["SingleToast.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n * Позволяет вызывать тосты с помощью статических методов.\n * В отличие от статических методов из компонента Toast их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static __KONTUR_REACT_UI__ = 'SingleToast';\n  public static displayName = 'SingleToast';\n\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    if (React.version.search('18') === 0) {\n      ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n    } else {\n      SingleToast.ref.current?.close();\n    }\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"],"mappings":"iVAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA,mBAAmD,IAAAG,YAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,GANA;AAOaC,WAAW,GAAAC,OAAA,CAAAD,WAAA,0BAAAE,gBAAA,YAAAF,YAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;;IAgBtBU,MAAM,GAAG,YAAM;MACb,oBAAOnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,MAAA,CAAAkB,KAAK,MAAAC,SAAA,CAAAH,OAAA,IAACI,GAAG,EAAElB,WAAW,CAACkB,GAAI,IAAKf,KAAA,CAAKgB,KAAK,CAAG,CAAC;IACxD,CAAC,QAAAhB,KAAA,MAAAiB,eAAA,CAAAN,OAAA,EAAAd,WAAA,EAAAE,gBAAA,SAAAF,WAAA,GAlB8BqB,cAAK,CAACC,SAAS,EAAAvB,YAAA,GAAnCC,WAAW,CAAXA,WAAW,CACRuB,mBAAmB,GAAG,aAAa,CADtCvB,WAAW,CAERwB,WAAW,GAAG,aAAa,CAF9BxB,WAAW,CAIRkB,GAAG,gBAAGG,cAAK,CAACI,SAAS,CAAQ,CAAC,CAJjCzB,WAAW,CAKR0B,IAAI,GAAsB,YAAa,KAAAC,qBAAA,CACnD3B,YAAW,CAAC4B,KAAK,CAAC,CAAC,CAAC,SAAAC,KAAA,GAAAxB,SAAA,CAAAC,MAAA,EADsBC,IAAI,OAAAC,KAAA,CAAAqB,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA,KAAJvB,IAAI,CAAAuB,KAAA,IAAAzB,SAAA,CAAAyB,KAAA,GAE9C,CAAAH,qBAAA,GAAA3B,YAAW,CAACkB,GAAG,CAACa,OAAO,aAAvBJ,qBAAA,CAAyBD,IAAI,CAAAf,KAAA,CAAAgB,qBAAA,EAAIpB,IAAI,CAAC,CACxC,CAAC,CARUP,WAAW,CASR4B,KAAK,GAAuB,YAAM,CAC9C,IAAIP,cAAK,CAACW,OAAO,CAACC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CACpCC,iBAAQ,CAACC,SAAS,CAAC,iBAAAC,sBAAA,SAAAA,sBAAA,GAAMpC,YAAW,CAACkB,GAAG,CAACa,OAAO,qBAAvBK,sBAAA,CAAyBR,KAAK,CAAC,CAAC,GAAC,CAC5D,CAAC,MAAM,KAAAS,sBAAA,CACL,CAAAA,sBAAA,GAAArC,YAAW,CAACkB,GAAG,CAACa,OAAO,aAAvBM,sBAAA,CAAyBT,KAAK,CAAC,CAAC,CAClC,CACF,CAAC","ignoreList":[]}

package/cjs/components/SingleToast/SingleToast.md

@@ -1,7 +1,7 @@
 `<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
 
 _На внешний вид этого примера влияет следующий пример_
-
+### Базовый пример
 ```jsx harmony
 import { Button, SingleToast } from '@skbkontur/react-ui';
 
@@ -13,6 +13,7 @@ import { Button, SingleToast } from '@skbkontur/react-ui';
 </div>
 ```
 
+### Кастомизация
 `<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
 ```jsx harmony
 import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';

package/cjs/components/SingleToast/__docs__/SingleToast.mdx

@@ -0,0 +1,28 @@
+import * as SingleToastStories from './SingleToast.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SingleToastStories} />
+
+# SingleToast
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/toast/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5203)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />