@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -13,6 +13,7 @@ import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { ModalSeparator } from "../../Modal/ModalSeparator";
+import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
 import { SidePageCloseButton } from "../SidePageCloseButton";
@@ -40,7 +41,6 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_SidePa
     _this.wrapper = null;
     _this.sticky = null;
     _this.lastRegularHeight = 0;
-    _this.closeIcon = /*#__PURE__*/React.createElement(SidePageCloseButton, null);
     _this.componentDidMount = function () {
       globalObject.addEventListener == null || globalObject.addEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null || _this.context.setHasHeader();
@@ -68,7 +68,7 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_SidePa
           className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx))
         }, _this.renderClose(fixed), /*#__PURE__*/
         React.createElement("div", {
-          className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[styles.titleFixed()] = fixed, _cx2))
+          className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.title5_1(_this.theme)] = isThemeGTE(_this.theme, '5.1'), _cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[styles.titleFixed()] = fixed, _cx2))
         }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children)), isDisplayed && /*#__PURE__*/React.createElement(ModalSeparator, {
           fixed: fixed
         }))
@@ -77,15 +77,23 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_SidePa
     _this.renderClose = function (fixed) {
       var _cx3;
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      var versionGTE5_1 = isThemeGTE(_this.theme, '5.1');
       return /*#__PURE__*/(
         React.createElement("div", {
-          className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3))
-        }, _this.isMobileLayout ? _this.closeIcon : /*#__PURE__*/
+          className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperClose5_1(_this.theme)] = versionGTE5_1, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.wrapperCloseFixed5_1(_this.theme)] = fixed && versionGTE5_1, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3[styles.mobileWrapperClose5_1(_this.theme)] = _this.isMobileLayout && versionGTE5_1, _cx3))
+        }, _this.isMobileLayout ? /*#__PURE__*/
+        React.createElement(SidePageCloseButton, {
+          isHeaderFixed: fixed,
+          isMobile: true
+        }) : /*#__PURE__*/
 
         React.createElement(Sticky, {
           side: "top",
           offset: stickyOffset
-        }, _this.closeIcon))
+        }, /*#__PURE__*/
+        React.createElement(SidePageCloseButton, {
+          isHeaderFixed: fixed
+        })))
       );
     };
     _this.updateReadyToFix = function () {

package/components/SidePage/SidePageHeader/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","Sticky","isFunction","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","getDOMRect","ModalSeparator","styles","SidePageContext","SidePageCloseButton","SidePageHeaderDataTids","root","close","SidePageHeader","_class","_SidePageHeader","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","closeIcon","createElement","componentDidMount","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","_this$sticky","reflow","updateReadyToFix","renderHeader","fixed","_cx","_cx2","isDisplayed","props","hasSeparator","className","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","children","_cx3","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","side","offset","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","_extends","wrapperRef","el","stickyRef","_inheritsLoose","_proto","prototype","render","_this2","Consumer","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","rootNodeRef","setRootNode","ref","headerWrapper","_createClass","key","get","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","displayName","contextType","defaultProps"],"sources":["SidePageHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет хедер сверху сайдпейджа. */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать ModalSeparator. */\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n  private closeIcon = (<SidePageCloseButton />);\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = getDOMRect(this.wrapper).height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.removeEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={cx(styles.header(this.theme), {\n            [styles.headerFixed(this.theme)]: fixed,\n            [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={cx(styles.title(this.theme), {\n              [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [styles.titleFixed()]: fixed,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","Sticky","isFunction","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","getDOMRect","ModalSeparator","isThemeGTE","styles","SidePageContext","SidePageCloseButton","SidePageHeaderDataTids","root","close","SidePageHeader","_class","_SidePageHeader","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","componentDidMount","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","_this$sticky","reflow","updateReadyToFix","renderHeader","fixed","_cx","_cx2","isDisplayed","props","hasSeparator","createElement","className","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","title5_1","mobileTitle","titleFixed","children","_cx3","stickyOffset","parseInt","sidePageHeaderStickyOffset","versionGTE5_1","wrapperClose","wrapperClose5_1","wrapperCloseFixed","wrapperCloseFixed5_1","mobileWrapperClose","mobileWrapperClose5_1","isHeaderFixed","isMobile","side","offset","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","_extends","wrapperRef","el","stickyRef","_inheritsLoose","_proto","prototype","render","_this2","Consumer","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","rootNodeRef","setRootNode","ref","headerWrapper","_createClass","key","get","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","displayName","contextType","defaultProps"],"sources":["SidePageHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет хедер сверху сайдпейджа. */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать ModalSeparator. */\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = getDOMRect(this.wrapper).height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.removeEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={cx(styles.header(this.theme), {\n            [styles.headerFixed(this.theme)]: fixed,\n            [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={cx(styles.title(this.theme), {\n              [styles.title5_1(this.theme)]: isThemeGTE(this.theme, '5.1'),\n              [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [styles.titleFixed()]: fixed,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    const versionGTE5_1 = isThemeGTE(this.theme, '5.1');\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperClose5_1(this.theme)]: versionGTE5_1,\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.wrapperCloseFixed5_1(this.theme)]: fixed && versionGTE5_1,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n          [styles.mobileWrapperClose5_1(this.theme)]: this.isMobileLayout && versionGTE5_1,\n        })}\n      >\n        {this.isMobileLayout ? (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile />\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        )}\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/SidePage/SidePageHeader.d.ts

@@ -33,7 +33,6 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     private sticky;
     private lastRegularHeight;
     private setRootNode;
-    private closeIcon;
     get regularHeight(): number;
     get fixedHeaderHeight(): number;
     componentDidMount: () => void;

package/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/components/Sticky/__creevey__/Sticky.creevey.mts

@@ -0,0 +1,98 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Sticky', () => {
+  story('WideContainer', () => {
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const nonStickyText = window.document.querySelector('[data-tid="nonStickyText"]') as HTMLElement;
+        const scrollXOffset = nonStickyText.getBoundingClientRect().width / 2;
+        const scrollYOffset = stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(scrollXOffset, scrollYOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+  });
+
+  story('Top', () => {
+    test('top', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+    });
+
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        const scrollOffset = stickyStop.getBoundingClientRect().top - window.innerHeight / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+
+    test('stoped', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        stickyStop.scrollIntoView();
+      });
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const scrollOffset = pageYOffset - stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'stoped');
+    });
+  });
+
+  story('Bottom', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky stopped position': {
+          in: ['firefox', 'firefox8px', 'firefoxDark'],
+          tests: 'stoped',
+        },
+      },
+    });
+
+    test('bottom', async (context) => {
+      await context.webdriver.executeScript(function () {
+        window.scrollTo(0, 9999);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+    });
+
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sticky = window.document.querySelector('[data-comp-name~="Sticky"]') as HTMLElement;
+        const scrollOffset = sticky.getBoundingClientRect().top - window.innerHeight;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+
+    test('stoped', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        stickyStop.scrollIntoView(false);
+      });
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const scrollOffset = pageYOffset + stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+  });
+});