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

package/internal/ZIndex/ZIndex/ZIndex.js

@@ -5,6 +5,7 @@ var _excluded = ["style", "children", "delta", "priority", "applyZIndex", "cover
 var _class, _ZIndex;
 import React from 'react';
 import { globalObject, isBrowser } from '@skbkontur/global-object';
+import isEqual from 'lodash.isequal';
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
@@ -24,7 +25,7 @@ export var ZIndex = rootNode(_class = (_ZIndex = /*#__PURE__*/function (_React$C
     _this = _React$Component.call(this, props) || this;
     _this.state = {
       zIndex: 0,
-      savedZIndexContext: null
+      DOMZIndexContext: null
     };
     _this.getProps = createPropsGetter(ZIndex.defaultProps);
     _this.zIndexContext = null;
@@ -41,9 +42,9 @@ export var ZIndex = rootNode(_class = (_ZIndex = /*#__PURE__*/function (_React$C
       return incrementZIndex(priority, delta);
     };
     _this.tryGetContextByDOM = function (element) {
-      if (DEFAULT_ZINDEX_CONTEXT === _this.zIndexContext && _this.state.savedZIndexContext === null) {
+      if (_this.props.applyZIndex && isEqual(DEFAULT_ZINDEX_CONTEXT, _this.zIndexContext) && _this.state.DOMZIndexContext === null) {
         var _element$parentElemen;
-        var savedZIndexContext = DEFAULT_ZINDEX_CONTEXT;
+        var DOMZIndexContext = DEFAULT_ZINDEX_CONTEXT;
         var portal = (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.closest("[" + PORTAL_OUTLET_ATTR + "]");
         if (isInstanceOf(portal, globalObject.HTMLElement)) {
           var _globalObject$documen, _noscript$parentEleme;
@@ -57,14 +58,14 @@ export var ZIndex = rootNode(_class = (_ZIndex = /*#__PURE__*/function (_React$C
             if (((_parent$parentElement = parent.parentElement) == null ? void 0 : _parent$parentElement.dataset.tid) === LoaderDataTids.veil) {
               maxZIndex = _this.calcZIndex(newZIndex, maxZIndex);
             }
-            savedZIndexContext = {
+            DOMZIndexContext = {
               maxZIndex: maxZIndex,
               parentLayerZIndex: newZIndex
             };
           }
         }
         _this.setState({
-          savedZIndexContext: savedZIndexContext
+          DOMZIndexContext: DOMZIndexContext
         });
       }
     };
@@ -100,18 +101,15 @@ export var ZIndex = rootNode(_class = (_ZIndex = /*#__PURE__*/function (_React$C
     var wrapperStyle = {};
     return /*#__PURE__*/React.createElement(ZIndexContext.Consumer, null, function (context) {
       _this2.zIndexContext = context;
-      var _ref = _this2.state.savedZIndexContext || context,
-        parentLayerZIndex = _ref.parentLayerZIndex,
-        maxZIndex = _ref.maxZIndex;
-      var zIndexContextValue = {
-        parentLayerZIndex: parentLayerZIndex,
-        maxZIndex: maxZIndex
-      };
+      var currentZIndexContext = _this2.state.DOMZIndexContext && isEqual(context, DEFAULT_ZINDEX_CONTEXT) ? _this2.state.DOMZIndexContext : context;
+      var parentLayerZIndex = currentZIndexContext.parentLayerZIndex,
+        maxZIndex = currentZIndexContext.maxZIndex;
+      var newZIndexContext = currentZIndexContext;
       var newZIndex = 0;
       if (applyZIndex) {
         newZIndex = _this2.calcZIndex(parentLayerZIndex, maxZIndex);
         wrapperStyle.zIndex = newZIndex;
-        zIndexContextValue = coverChildren ? {
+        newZIndexContext = coverChildren ? {
           parentLayerZIndex: parentLayerZIndex,
           maxZIndex: newZIndex
         } : {
@@ -127,7 +125,7 @@ export var ZIndex = rootNode(_class = (_ZIndex = /*#__PURE__*/function (_React$C
         ref: _this2.wrapperRef
       }, rest), children);
       return /*#__PURE__*/React.createElement(ZIndexContext.Provider, {
-        value: zIndexContextValue
+        value: newZIndexContext
       }, child);
     });
   };

package/internal/ZIndex/ZIndex/ZIndex.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","isBrowser","callChildRef","rootNode","createPropsGetter","isInstanceOf","LoaderDataTids","PORTAL_INLET_ATTR","PORTAL_OUTLET_ATTR","incrementZIndex","removeZIndex","upperBorder","componentPriorities","DEFAULT_ZINDEX_CONTEXT","parentLayerZIndex","maxZIndex","Infinity","ZIndexContext","createContext","displayName","ZIndex","_class","_ZIndex","_React$Component","props","_this","call","state","zIndex","savedZIndexContext","getProps","defaultProps","zIndexContext","wrapperRef","element","setRootNode","tryGetContextByDOM","increment","_this$getProps","priority","delta","_element$parentElemen","portal","parentElement","closest","HTMLElement","_globalObject$documen","_noscript$parentEleme","portalID","getAttribute","noscript","document","querySelector","parent","_parent$parentElement","newZIndex","Number","style","dataset","tid","veil","calcZIndex","setState","_inheritsLoose","_proto","prototype","componentDidUpdate","prevProps","componentWillUnmount","render","_this2","_this$getProps2","children","applyZIndex","coverChildren","createStackingContext","useWrapper","rest","_objectWithoutPropertiesLoose","_excluded","wrapperStyle","createElement","Consumer","context","_ref","zIndexContextValue","isFinite","body","isolation","transform","child","_extends","ref","Provider","value","allowedValuesIntervalLength","scale","Math","ceil","Component","priorities","__KONTUR_REACT_UI__","propTypes","Error","trunc"],"sources":["ZIndex.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { LoaderDataTids } from '../../components/Loader';\nimport { PORTAL_INLET_ATTR, PORTAL_OUTLET_ATTR } from '../RenderContainer';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName, componentPriorities } from './ZIndexStorage';\n\nconst DEFAULT_ZINDEX_CONTEXT = { parentLayerZIndex: 0, maxZIndex: Infinity };\n\nconst ZIndexContext = React.createContext(DEFAULT_ZINDEX_CONTEXT);\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta?: number;\n  priority?: number | LayerComponentName;\n  style?: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<div/>`.\n   * Для случаев, когда необходимо задать **только** контекст для области.\n   *\n   * @default true\n   */\n  useWrapper?: boolean;\n}\n\ntype DefaultProps = Required<\n  Pick<\n    ZIndexProps,\n    'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext' | 'useWrapper'\n  >\n>;\n\ninterface ZIndexState {\n  zIndex: number;\n  savedZIndexContext: { parentLayerZIndex: number; maxZIndex: number } | null;\n}\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps, ZIndexState> {\n  public static priorities = componentPriorities;\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n  public static displayName = 'ZIndex';\n\n  public static defaultProps: DefaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n    useWrapper: true,\n  };\n\n  public state: ZIndexState = {\n    zIndex: 0,\n    savedZIndexContext: null,\n  };\n\n  private getProps = createPropsGetter(ZIndex.defaultProps);\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if ((props.delta || ZIndex.defaultProps.delta) <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta || ZIndex.defaultProps.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private setRootNode!: TSetRootNode;\n  private zIndexContext: { parentLayerZIndex: number; maxZIndex: number } | null = null;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.state.zIndex = this.increment();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ZIndexProps>) {\n    if (prevProps.priority !== this.props.priority || prevProps.delta !== this.props.delta) {\n      removeZIndex(this.state.zIndex);\n      this.setState({ zIndex: this.increment() });\n    }\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.state.zIndex);\n  }\n\n  public render() {\n    const {\n      style,\n      children,\n      delta,\n      priority,\n      applyZIndex,\n      coverChildren,\n      createStackingContext,\n      wrapperRef,\n      useWrapper,\n      ...rest\n    } = this.getProps();\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {(context) => {\n          this.zIndexContext = context;\n          const { parentLayerZIndex, maxZIndex } = this.state.savedZIndexContext || context;\n          let zIndexContextValue = { parentLayerZIndex, maxZIndex };\n          let newZIndex = 0;\n          if (applyZIndex) {\n            newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            zIndexContextValue = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser(globalObject) && 'isolation' in globalObject.document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          const child = !useWrapper ? (\n            children\n          ) : (\n            <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...rest}>\n              {children}\n            </div>\n          );\n\n          return <ZIndexContext.Provider value={zIndexContextValue}>{child}</ZIndexContext.Provider>;\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n    element && this.tryGetContextByDOM(element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.state.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n\n  private increment = () => {\n    const { priority, delta } = this.getProps();\n\n    return incrementZIndex(priority, delta);\n  };\n\n  private tryGetContextByDOM = (element: HTMLDivElement) => {\n    if (DEFAULT_ZINDEX_CONTEXT === this.zIndexContext && this.state.savedZIndexContext === null) {\n      let savedZIndexContext = DEFAULT_ZINDEX_CONTEXT;\n      const portal = element.parentElement?.closest(`[${PORTAL_OUTLET_ATTR}]`);\n\n      if (isInstanceOf(portal, globalObject.HTMLElement)) {\n        const portalID = portal.getAttribute(PORTAL_OUTLET_ATTR);\n        const noscript = globalObject.document?.querySelector(`noscript[${PORTAL_INLET_ATTR}=\"${portalID}\"]`);\n        const parent = noscript?.parentElement?.closest('[style*=z-index]');\n\n        if (isInstanceOf(parent, globalObject.HTMLElement)) {\n          const newZIndex = Number(parent.style.zIndex || 0);\n\n          let maxZIndex = Infinity;\n\n          if (parent.parentElement?.dataset.tid === LoaderDataTids.veil) {\n            maxZIndex = this.calcZIndex(newZIndex, maxZIndex);\n          }\n\n          savedZIndexContext = { maxZIndex, parentLayerZIndex: newZIndex };\n        }\n      }\n\n      this.setState({ savedZIndexContext });\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","isBrowser","isEqual","callChildRef","rootNode","createPropsGetter","isInstanceOf","LoaderDataTids","PORTAL_INLET_ATTR","PORTAL_OUTLET_ATTR","incrementZIndex","removeZIndex","upperBorder","componentPriorities","DEFAULT_ZINDEX_CONTEXT","parentLayerZIndex","maxZIndex","Infinity","ZIndexContext","createContext","displayName","ZIndex","_class","_ZIndex","_React$Component","props","_this","call","state","zIndex","DOMZIndexContext","getProps","defaultProps","zIndexContext","wrapperRef","element","setRootNode","tryGetContextByDOM","increment","_this$getProps","priority","delta","applyZIndex","_element$parentElemen","portal","parentElement","closest","HTMLElement","_globalObject$documen","_noscript$parentEleme","portalID","getAttribute","noscript","document","querySelector","parent","_parent$parentElement","newZIndex","Number","style","dataset","tid","veil","calcZIndex","setState","_inheritsLoose","_proto","prototype","componentDidUpdate","prevProps","componentWillUnmount","render","_this2","_this$getProps2","children","coverChildren","createStackingContext","useWrapper","rest","_objectWithoutPropertiesLoose","_excluded","wrapperStyle","createElement","Consumer","context","currentZIndexContext","newZIndexContext","isFinite","body","isolation","transform","child","_extends","ref","Provider","value","allowedValuesIntervalLength","scale","Math","ceil","Component","priorities","__KONTUR_REACT_UI__","propTypes","Error","trunc"],"sources":["ZIndex.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { LoaderDataTids } from '../../components/Loader';\nimport { PORTAL_INLET_ATTR, PORTAL_OUTLET_ATTR } from '../RenderContainer';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName, componentPriorities } from './ZIndexStorage';\n\nconst DEFAULT_ZINDEX_CONTEXT = { parentLayerZIndex: 0, maxZIndex: Infinity };\n\nconst ZIndexContext = React.createContext(DEFAULT_ZINDEX_CONTEXT);\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta?: number;\n  priority?: number | LayerComponentName;\n  style?: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<div/>`.\n   * Для случаев, когда необходимо задать **только** контекст для области.\n   *\n   * @default true\n   */\n  useWrapper?: boolean;\n}\n\ntype DefaultProps = Required<\n  Pick<\n    ZIndexProps,\n    'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext' | 'useWrapper'\n  >\n>;\n\ninterface ZIndexState {\n  zIndex: number;\n  DOMZIndexContext: { parentLayerZIndex: number; maxZIndex: number } | null;\n}\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps, ZIndexState> {\n  public static priorities = componentPriorities;\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n  public static displayName = 'ZIndex';\n\n  public static defaultProps: DefaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n    useWrapper: true,\n  };\n\n  public state: ZIndexState = {\n    zIndex: 0,\n    DOMZIndexContext: null,\n  };\n\n  private getProps = createPropsGetter(ZIndex.defaultProps);\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if ((props.delta || ZIndex.defaultProps.delta) <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta || ZIndex.defaultProps.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private setRootNode!: TSetRootNode;\n  private zIndexContext: { parentLayerZIndex: number; maxZIndex: number } | null = null;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.state.zIndex = this.increment();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ZIndexProps>) {\n    if (prevProps.priority !== this.props.priority || prevProps.delta !== this.props.delta) {\n      removeZIndex(this.state.zIndex);\n      this.setState({ zIndex: this.increment() });\n    }\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.state.zIndex);\n  }\n\n  public render() {\n    const {\n      style,\n      children,\n      delta,\n      priority,\n      applyZIndex,\n      coverChildren,\n      createStackingContext,\n      wrapperRef,\n      useWrapper,\n      ...rest\n    } = this.getProps();\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {(context) => {\n          this.zIndexContext = context;\n\n          const currentZIndexContext =\n            this.state.DOMZIndexContext && isEqual(context, DEFAULT_ZINDEX_CONTEXT)\n              ? this.state.DOMZIndexContext\n              : context;\n          const { parentLayerZIndex, maxZIndex } = currentZIndexContext;\n\n          let newZIndexContext = currentZIndexContext;\n          let newZIndex = 0;\n\n          if (applyZIndex) {\n            newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            newZIndexContext = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser(globalObject) && 'isolation' in globalObject.document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          const child = !useWrapper ? (\n            children\n          ) : (\n            <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...rest}>\n              {children}\n            </div>\n          );\n\n          return <ZIndexContext.Provider value={newZIndexContext}>{child}</ZIndexContext.Provider>;\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n    element && this.tryGetContextByDOM(element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.state.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n\n  private increment = () => {\n    const { priority, delta } = this.getProps();\n\n    return incrementZIndex(priority, delta);\n  };\n\n  private tryGetContextByDOM = (element: HTMLDivElement) => {\n    if (\n      this.props.applyZIndex &&\n      isEqual(DEFAULT_ZINDEX_CONTEXT, this.zIndexContext) &&\n      this.state.DOMZIndexContext === null\n    ) {\n      let DOMZIndexContext = DEFAULT_ZINDEX_CONTEXT;\n      const portal = element.parentElement?.closest(`[${PORTAL_OUTLET_ATTR}]`);\n\n      if (isInstanceOf(portal, globalObject.HTMLElement)) {\n        const portalID = portal.getAttribute(PORTAL_OUTLET_ATTR);\n        const noscript = globalObject.document?.querySelector(`noscript[${PORTAL_INLET_ATTR}=\"${portalID}\"]`);\n        const parent = noscript?.parentElement?.closest('[style*=z-index]');\n\n        if (isInstanceOf(parent, globalObject.HTMLElement)) {\n          const newZIndex = Number(parent.style.zIndex || 0);\n\n          let maxZIndex = Infinity;\n\n          if (parent.parentElement?.dataset.tid === LoaderDataTids.veil) {\n            maxZIndex = this.calcZIndex(newZIndex, maxZIndex);\n          }\n\n          DOMZIndexContext = { maxZIndex, parentLayerZIndex: newZIndex };\n        }\n      }\n\n      this.setState({ DOMZIndexContext });\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/internal/ZIndex/ZIndex.d.ts

@@ -23,7 +23,7 @@ export interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {
 type DefaultProps = Required<Pick<ZIndexProps, 'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext' | 'useWrapper'>>;
 interface ZIndexState {
     zIndex: number;
-    savedZIndexContext: {
+    DOMZIndexContext: {
         parentLayerZIndex: number;
         maxZIndex: number;
     } | null;

package/internal/ZIndex/__creevey__/ZIndex.creevey.mts

@@ -0,0 +1,228 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+import { SelectDataTids } from '../../../components/Select/tids';
+
+kind('ZIndex', () => {
+  story('HintAndModalStory', () => {
+    test('Modal covers hint', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '.modalBody button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'Modal covers hint');
+    });
+  });
+
+  story('BigModalWithLoaderStory', () => {
+    test('Header covers Loader', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePage = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+
+        if (sidePage) {
+          sidePage.scrollTop = sidePage.offsetHeight / 3;
+        }
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'Header covers Loader');
+    });
+  });
+
+  story('TooltipAndSelectStory', () => {
+    test('Menu covers tooltip', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.container' });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid=${SelectDataTids.label}]` }))
+        .sendKeys('q')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'Modal covers hint');
+    });
+  });
+
+  story('LoaderInSidePageBody', () => {
+    test('is covered by Header and Footer', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePage = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        if (sidePage) {
+          sidePage.scrollTop = sidePage.offsetHeight;
+        }
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'is covered by Header and Footer');
+    });
+  });
+
+  story('SidepageAndSelect', () => {
+    test('SidePage covers Select and Tooltip', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '.select-container button' }))
+        .sendKeys('q')
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '.open-sidepage-container button' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '.sidepage-select-continer button' }))
+        .sendKeys('q')
+        .perform();
+      const element = await context.webdriver.findElement({ css: `[data-tid='SidePage__container']` });
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'SidePage covers Select and Tooltip');
+    });
+  });
+
+  story('ElementsInLoaderInModalStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flaky test': {
+          in: ['chrome2022Dark'],
+          tests: ['Hide Hint on active Loader'],
+        },
+      },
+    });
+
+    test('Open Dropdown while Loader is inactive', 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.webdriver.takeScreenshot(), 'Open Dropdown while Loader is inactive');
+    });
+
+    test('Hide Hint on active Loader', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Toggle"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'Hide Hint on active Loader');
+    });
+  });
+
+  story('LoaderAndSidePageStory', () => {
+    test('SidePage shadow cover Loader', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Toggle"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'SidePage shadow cover Loader');
+    });
+  });
+
+  story('StickyAndTooltipsStory', () => {
+    test('Sticky covers outside Popup', 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.webdriver.takeScreenshot(), 'Sticky covers outside Popup');
+    });
+  });
+
+  story('ModalAndToast', () => {
+    test('toastShown', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"] button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+
+  story('ToastOverEverything', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'flickering screenshot': { in: /^(?!\b(firefox))/, tests: 'staticToast' } } });
+
+    test('staticToast', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="static-toast"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      const shown = await context.webdriver.takeScreenshot(); // Toast rendered by static method doesn't get removed
+      // when story switches, so we have to close it manually
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="ToastView__close"]' }))
+        .pause(500)
+        .perform();
+      await context.matchImage(shown);
+    });
+
+    test('refToast', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="ref-toast"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+
+  story('ModalWithDropdown', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('dropdown overlaps static header', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="dropdown_top"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+
+    test('dropdown lays under fixed header', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="dropdown_top"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+
+    test('dropdown lays under fixed footer', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="dropdown_bottom"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+
+    test('dropdown overlaps static footer', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="dropdown_bottom"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+});