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

package/components/Select/Select.styles/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","root","css","_templateObject","_taggedTemplateLiteralLoose","rootMobile","t","_templateObject2","selectRootWidthMobile","mobileSelectMaxWidth","placeholder","_templateObject3","selectPlaceholderColor","placeholderDisabled","_templateObject4","selectPlaceholderColorDisabled","customUsePlaceholder","_templateObject5","arrowWrap","_templateObject6","selectMenuArrowColor","arrowDisabled","_templateObject7","selectMenuArrowColorDisabled","customUseArrow","_templateObject8","label","_templateObject9","search","_templateObject10","leftIconSmall","_templateObject11","selectIconGapSmall","btnIconSizeSmall","leftIconMedium","_templateObject12","selectIconGapMedium","btnIconSizeMedium","leftIconLarge","_templateObject13","selectIconGapLarge","btnIconSizeLarge","leftIconLink","_templateObject14","btnLinkIconMarginRight","selectButtonContainer","_templateObject15"],"sources":["Select.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-block;\n        position: relative;\n        line-height: normal;\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.css`\n        width: ${t.selectRootWidthMobile};\n        max-width: ${t.mobileSelectMaxWidth};\n      `;\n    },\n\n    placeholder(t: Theme) {\n      return emotion.css`\n        color: ${t.selectPlaceholderColor};\n        text-overflow: ellipsis;\n      `;\n    },\n\n    placeholderDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.selectPlaceholderColorDisabled};\n      `;\n    },\n\n    customUsePlaceholder() {\n      return emotion.css`\n        color: inherit;\n        opacity: 0.7;\n      `;\n    },\n\n    arrowWrap(t: Theme) {\n      return emotion.css`\n        color: ${t.selectMenuArrowColor};\n        flex-shrink: 0;\n      `;\n    },\n\n    arrowDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.selectMenuArrowColorDisabled};\n      `;\n    },\n\n    customUseArrow() {\n      return emotion.css`\n        color: inherit;\n        opacity: 0.7;\n      `;\n    },\n\n    label() {\n      return emotion.css`\n        flex: 1 1 auto;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      `;\n    },\n\n    search() {\n      return emotion.css`\n        margin: 1px 4px 4px;\n      `;\n    },\n\n    leftIconSmall(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.selectIconGapSmall};\n        width: ${t.btnIconSizeSmall};\n      `;\n    },\n\n    leftIconMedium(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.selectIconGapMedium};\n        width: ${t.btnIconSizeMedium};\n      `;\n    },\n\n    leftIconLarge(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.selectIconGapLarge};\n        width: ${t.btnIconSizeLarge};\n      `;\n    },\n\n    leftIconLink(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.btnLinkIconMarginRight};\n      `;\n    },\n\n    selectButtonContainer() {\n      return emotion.css`\n        width: 100%;\n        display: inline-flex;\n        justify-content: space-between;\n      `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","rootMobile","t","_templateObject2","selectRootWidthMobile","mobileSelectMaxWidth","placeholder","_templateObject3","selectPlaceholderColor","placeholderDisabled","_templateObject4","selectPlaceholderColorDisabled","customUsePlaceholder","_templateObject5","arrowWrap","_templateObject6","selectMenuArrowColor","arrowDisabled","_templateObject7","selectMenuArrowColorDisabled","customUseArrow","_templateObject8","label","_templateObject9","search","_templateObject10","leftIconSmall","_templateObject11","selectIconGapSmall","btnIconSizeSmall","leftIconMedium","_templateObject12","selectIconGapMedium","btnIconSizeMedium","leftIconLarge","_templateObject13","selectIconGapLarge","btnIconSizeLarge","leftIconLink","_templateObject14","btnLinkIconMarginRight","selectButtonContainer","_templateObject15"],"sources":["Select.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n      line-height: normal;\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      width: ${t.selectRootWidthMobile};\n      max-width: ${t.mobileSelectMaxWidth};\n    `;\n  },\n\n  placeholder(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColor};\n      text-overflow: ellipsis;\n    `;\n  },\n\n  placeholderDisabled(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColorDisabled};\n    `;\n  },\n\n  customUsePlaceholder() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  arrowWrap(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColor};\n      flex-shrink: 0;\n    `;\n  },\n\n  arrowDisabled(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColorDisabled};\n    `;\n  },\n\n  customUseArrow() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  label() {\n    return css`\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    `;\n  },\n\n  search() {\n    return css`\n      margin: 1px 4px 4px;\n    `;\n  },\n\n  leftIconSmall(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  leftIconMedium(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  leftIconLarge(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  leftIconLink(t: Theme) {\n    return css`\n      margin-right: ${t.btnLinkIconMarginRight};\n    `;\n  },\n\n  selectButtonContainer() {\n    return css`\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    `;\n  },\n});\n"],"mappings":"sXAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;EAKZ,CAAC;;EAEDC,UAAU,WAAAA,WAACC,CAAQ,EAAE;IACnB,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;IACCE,CAAC,CAACE,qBAAqB;IACnBF,CAAC,CAACG,oBAAoB;;EAEvC,CAAC;;EAEDC,WAAW,WAAAA,YAACJ,CAAQ,EAAE;IACpB,OAAOP,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;IACCE,CAAC,CAACM,sBAAsB;;;EAGrC,CAAC;;EAEDC,mBAAmB,WAAAA,oBAACP,CAAQ,EAAE;IAC5B,OAAOP,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACCE,CAAC,CAACS,8BAA8B;;EAE7C,CAAC;;EAEDC,oBAAoB,WAAAA,qBAAA,EAAG;IACrB,OAAOjB,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;;;EAIZ,CAAC;;EAEDc,SAAS,WAAAA,UAACZ,CAAQ,EAAE;IAClB,OAAOP,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACCE,CAAC,CAACc,oBAAoB;;;EAGnC,CAAC;;EAEDC,aAAa,WAAAA,cAACf,CAAQ,EAAE;IACtB,OAAOP,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;IACCE,CAAC,CAACiB,4BAA4B;;EAE3C,CAAC;;EAEDC,cAAc,WAAAA,eAAA,EAAG;IACf,OAAOzB,GAAG,CAAA0B,gBAAA,KAAAA,gBAAA,GAAArB,2BAAA;;;;EAIZ,CAAC;;EAEDsB,KAAK,WAAAA,MAAA,EAAG;IACN,OAAO3B,GAAG,CAAA4B,gBAAA,KAAAA,gBAAA,GAAAvB,2BAAA;;;;;;EAMZ,CAAC;;EAEDwB,MAAM,WAAAA,OAAA,EAAG;IACP,OAAO7B,GAAG,CAAA8B,iBAAA,KAAAA,iBAAA,GAAAzB,2BAAA;;;EAGZ,CAAC;;EAED0B,aAAa,WAAAA,cAACxB,CAAQ,EAAE;IACtB,OAAOP,GAAG,CAAAgC,iBAAA,KAAAA,iBAAA,GAAA3B,2BAAA;IACQE,CAAC,CAAC0B,kBAAkB;IAC3B1B,CAAC,CAAC2B,gBAAgB;;EAE/B,CAAC;;EAEDC,cAAc,WAAAA,eAAC5B,CAAQ,EAAE;IACvB,OAAOP,GAAG,CAAAoC,iBAAA,KAAAA,iBAAA,GAAA/B,2BAAA;IACQE,CAAC,CAAC8B,mBAAmB;IAC5B9B,CAAC,CAAC+B,iBAAiB;;EAEhC,CAAC;;EAEDC,aAAa,WAAAA,cAAChC,CAAQ,EAAE;IACtB,OAAOP,GAAG,CAAAwC,iBAAA,KAAAA,iBAAA,GAAAnC,2BAAA;IACQE,CAAC,CAACkC,kBAAkB;IAC3BlC,CAAC,CAACmC,gBAAgB;;EAE/B,CAAC;;EAEDC,YAAY,WAAAA,aAACpC,CAAQ,EAAE;IACrB,OAAOP,GAAG,CAAA4C,iBAAA,KAAAA,iBAAA,GAAAvC,2BAAA;IACQE,CAAC,CAACsC,sBAAsB;;EAE5C,CAAC;;EAEDC,qBAAqB,WAAAA,sBAAA,EAAG;IACtB,OAAO9C,GAAG,CAAA+C,iBAAA,KAAAA,iBAAA,GAAA1C,2BAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Select/Select.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     rootMobile(t: Theme): string;
     placeholder(t: Theme): string;

package/components/Select/__creevey__/Select.creevey.mts

@@ -0,0 +1,293 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const clickedTest = () => {
+  test('clicked', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+};
+
+const selectTests = () => {
+  test('idle', async (context) => {
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'idle');
+  });
+
+  clickedTest();
+
+  test('MenuItem hover', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }),
+      })
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'MenuItem hover');
+  });
+
+  test('selected item', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'selected item');
+  });
+};
+
+kind('Select', () => {
+  story('Simple', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '.dropdown-test-container',
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    selectTests();
+  });
+
+  story('MobileWithSearch', () => {
+    clickedTest();
+  });
+
+  story('MobileWithTitle', () => {
+    clickedTest();
+  });
+
+  story('MobileWithTitleAndSearch', () => {
+    clickedTest();
+  });
+
+  story('MobileWithoutTitleAndSearch', () => {
+    clickedTest();
+  });
+
+  story('UseLink', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '.dropdown-test-container',
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    selectTests();
+  });
+
+  story('UseLinkWithIcon', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '.dropdown-test-container',
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    selectTests();
+  });
+
+  story('WithTextOverflow', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '.dropdown-test-container',
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    selectTests();
+  });
+
+  story('UsingOnKeyDown', () => {
+    test('press Enter', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.ENTER)
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'press Enter');
+    });
+  });
+
+  story('WithSearchAndVariousWidth', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '#test-element',
+      skip: {
+        flaky: { in: ['chrome2022', 'chrome2022Dark'] },
+      },
+    });
+
+    test('search', async (context) => {
+      const root = await context.webdriver.findElement({ css: '[data-tid="root"]' });
+      const select = await context.webdriver.findElement({ css: '[data-comp-name~="Select"]' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(select)
+        .pause(500)
+        .perform();
+      const plainSearch = await root.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ARROW_DOWN)
+        .pause(500)
+        .perform();
+      const pressKeyDown = await root.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Input"]' }))
+        .sendKeys('test')
+        .pause(500)
+        .perform();
+      const fullFieldSearch = await root.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(select)
+        .click(select)
+        .pause(500)
+        .perform();
+      const emptySearch = await root.takeScreenshot();
+      await context.matchImages({ plainSearch, pressKeyDown, fullFieldSearch, emptySearch });
+    });
+
+    test('and various width', async (context) => {
+      const root = await context.webdriver.findElement({ css: '[data-tid="root"]' });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(await context.webdriver.findElement({ css: '[data-tid="w100px"]' }))
+        .pause(500)
+        .perform();
+      const w100px = await root.takeScreenshot();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(await context.webdriver.findElement({ css: '[data-tid="w300px"]' }))
+        .pause(500)
+        .perform();
+      const w300px = await root.takeScreenshot();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(await context.webdriver.findElement({ css: '[data-tid="w100prc"]' }))
+        .pause(500)
+        .perform();
+      const w100prc = await root.takeScreenshot();
+      await context.matchImages({ w100px, w300px, w100prc });
+    });
+  });
+
+  story('WithMenuAlignAndVariousWidth', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome)\b)/ } } });
+
+    test('open', async (context) => {
+      const root = await context.webdriver.findElement({ css: '#test-element' });
+      await delay(1000);
+      await context.matchImage(await root.takeScreenshot());
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
+    });
+
+    test('opened bottom with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
+    });
+
+    test('opened top without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
+    });
+
+    test('opened bottom without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Select"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
+    });
+  });
+
+  story('Size', () => {
+    test('ClickedAll', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
+    });
+  });
+});

package/components/Select/__docs__/Select.mdx

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

package/components/Select/tids/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Select/tids.js",
+  "module": "tids",
+  "types": "../tids.d.ts",
+  "sideEffects": false
+}

package/components/Select/tids/tids.js

@@ -0,0 +1,5 @@
+export var SelectDataTids = {
+  root: 'Select__root',
+  menu: 'Select__menu',
+  label: 'Select__label'
+};

package/components/Select/tids/tids.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SelectDataTids","root","menu","label"],"sources":["tids.ts"],"sourcesContent":["export const SelectDataTids = {\n  root: 'Select__root',\n  menu: 'Select__menu',\n  label: 'Select__label',\n} as const;\n"],"mappings":"AAAA,OAAO,IAAMA,cAAc,GAAG;EAC5BC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE;AACT,CAAU","ignoreList":[]}

package/components/Select/tids.d.ts

@@ -0,0 +1,5 @@
+export declare const SelectDataTids: {
+    readonly root: "Select__root";
+    readonly menu: "Select__menu";
+    readonly label: "Select__label";
+};

package/components/SidePage/SidePage/SidePage.js

@@ -13,19 +13,19 @@ import { ModalStack } from "../../../lib/ModalStack";
 import { RenderContainer } from "../../../internal/RenderContainer";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { ZIndex } from "../../../internal/ZIndex";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { SidePageBody } from "../SidePageBody";
 import { SidePageContainer } from "../SidePageContainer";
 import { SidePageContext } from "../SidePageContext";
 import { SidePageFooter } from "../SidePageFooter";
 import { SidePageHeader } from "../SidePageHeader";
-import { getStyles } from "../SidePage.styles";
+import { styles } from "../SidePage.styles";
 export var SidePageDataTids = {
   root: 'SidePage__root',
   container: 'SidePage__container'
@@ -33,13 +33,13 @@ export var SidePageDataTids = {
 var TRANSITION_TIMEOUT = 200;
 
 /**
- * Сайдпейдж
+ * `SidePage` — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.
+ *
+ * Используйте его, когда нужно сохранить контекст и показать большое количество данных.
  *
- * Содержит в себе три компоненты: **SidePage.Header**,
- * **SidePage.Body** и **SidePage.Footer**
+ * Содержит в себе три компоненты: `SidePage.Header`, `SidePage.Body` и `SidePage.Footer`.
  *
- * Для отображения серой плашки в футере в компонент
- * **Footer** необходимо передать пропс **panel**
+ * Для отображения серой плашки в футере в компонент `Footer` необходимо передать пропс `panel`.
  */
 export var SidePage = /*#__PURE__*/function (_React$Component) {
   function SidePage() {
@@ -171,8 +171,13 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
   _proto.componentDidMount = function componentDidMount() {
     globalObject.addEventListener == null || globalObject.addEventListener('keydown', this.handleKeyDown);
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
-    if (this.layout) {
-      this.layout.addEventListener('scroll', LayoutEvents.emit);
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.blockBackground !== this.props.blockBackground) {
+      ModalStack.rerender();
+      this.setState({
+        hasBackground: ModalStack.isBlocking(this)
+      });
     }
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -181,19 +186,12 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       this.stackSubscription.remove();
     }
     ModalStack.remove(this);
-    if (this.layout) {
-      this.layout.removeEventListener('scroll', LayoutEvents.emit);
-    }
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.renderMain = function renderMain() {
@@ -202,9 +200,17 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       blockBackground = _this$props.blockBackground,
       onOpened = _this$props.onOpened;
     var disableAnimations = this.getProps().disableAnimations;
-    return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    return /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
       var isMobile = _ref.isMobile;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, blockBackground && _this3.renderShadow(isMobile), /*#__PURE__*/React.createElement(CSSTransition, {
+      return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, /*#__PURE__*/React.createElement(ZIndex, {
+        priority: 'Sidepage',
+        onScroll: LayoutEvents.emit,
+        createStackingContext: true,
+        wrapperRef: _this3.rootRef,
+        style: {
+          position: 'absolute'
+        }
+      }, blockBackground && _this3.renderShadow(isMobile), /*#__PURE__*/React.createElement(CSSTransition, {
         "in": true,
         classNames: _this3.getTransitionNames(),
         appear: !disableAnimations,
@@ -216,11 +222,11 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
         },
         nodeRef: _this3.rootRef,
         onEntered: onOpened
-      }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null));
-    }))));
+      }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null))));
+    });
   };
   _proto.renderContainer = function renderContainer(isMobile) {
-    var _this$emotion$cx, _this$emotion$cx2;
+    var _cx, _cx2;
     var _this$props2 = this.props,
       width = _this$props2.width,
       blockBackground = _this$props2.blockBackground,
@@ -229,22 +235,18 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
     var _this$getProps = this.getProps(),
       offset = _this$getProps.offset,
       role = _this$getProps.role;
-    var styles = this.styles;
-    return /*#__PURE__*/React.createElement(ZIndex, {
+    return /*#__PURE__*/React.createElement("div", {
       "aria-modal": true,
       role: role,
       "aria-label": ariaLabel,
-      priority: 'Sidepage',
       "data-tid": SidePageDataTids.root,
-      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.root()] = true, _this$emotion$cx[styles.mobileRoot()] = isMobile, _this$emotion$cx)),
+      className: cx((_cx = {}, _cx[styles.root()] = true, _cx[styles.mobileRoot()] = isMobile, _cx)),
       onScroll: LayoutEvents.emit,
-      createStackingContext: true,
       style: isMobile ? undefined : {
         width: width || (blockBackground ? 800 : 500),
         right: fromLeft ? 'auto' : offset,
         left: fromLeft ? offset : 'auto'
-      },
-      wrapperRef: this.rootRef
+      }
     }, /*#__PURE__*/React.createElement(FocusLock, {
       disabled: this.isFocusLockDisabled,
       autoFocus: false,
@@ -254,28 +256,25 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       active: true
     }, /*#__PURE__*/React.createElement("div", {
       "data-tid": SidePageDataTids.container,
-      className: this.emotion.cx(styles.wrapper(this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.wrapperLeft()] = fromLeft, _this$emotion$cx2[styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _this$emotion$cx2[styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _this$emotion$cx2[styles.shadow(this.theme)] = this.state.hasShadow, _this$emotion$cx2)),
+      className: cx(styles.wrapper(this.theme), (_cx2 = {}, _cx2[styles.wrapperLeft()] = fromLeft, _cx2[styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[styles.shadow(this.theme)] = this.state.hasShadow, _cx2)),
       ref: this.layoutRef
     }, /*#__PURE__*/React.createElement(SidePageContext.Provider, {
       value: this.getSidePageContextProps()
     }, this.props.children)))));
   };
   _proto.renderShadow = function renderShadow(isMobile) {
-    var _this$emotion$cx3;
-    var styles = this.styles;
-    return /*#__PURE__*/React.createElement(ZIndex, {
-      priority: 'Sidepage',
+    var _cx3;
+    return /*#__PURE__*/React.createElement("div", {
       className: styles.overlay(),
       onScroll: LayoutEvents.emit
     }, !isMobile && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HideBodyVerticalScroll, {
       key: "hbvs"
     }), /*#__PURE__*/React.createElement("div", {
       key: "overlay",
-      className: this.emotion.cx((_this$emotion$cx3 = {}, _this$emotion$cx3[styles.background()] = true, _this$emotion$cx3[styles.backgroundGray(this.theme)] = this.state.hasBackground, _this$emotion$cx3))
+      className: cx((_cx3 = {}, _cx3[styles.background()] = true, _cx3[styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3))
     })));
   };
   _proto.getTransitionNames = function getTransitionNames() {
-    var styles = this.styles;
     var transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;
     return {
       enter: transition(),