fix(SidePage): update issues with ignoreBackgroundClick and blockBackground props

packages/react-ui/components/SidePage/SidePage.tsx

@@ -117,6 +117,15 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
   }
 
+  public componentDidUpdate(prevProps: SidePageProps) {
+    if (prevProps.blockBackground !== this.props.blockBackground) {
+      ModalStack.rerender();
+      this.setState({
+        hasBackground: ModalStack.isBlocking(this),
+      });
+    }
+  }
+
   public componentWillUnmount() {
     globalObject.removeEventListener?.('keydown', this.handleKeyDown);
     if (isNonNullable(this.stackSubscription)) {
@@ -156,37 +165,39 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
   private renderMain() {
     const { blockBackground, onOpened } = this.props;
     const disableAnimations = this.getProps().disableAnimations;
-
     return (
-      <RenderContainer>
-        <CommonWrapper {...this.props}>
-          <div>
-            <ResponsiveLayout>
-              {({ isMobile }) => (
-                <>
-                  {blockBackground && this.renderShadow(isMobile)}
-                  <CSSTransition
-                    in
-                    classNames={this.getTransitionNames()}
-                    appear={!disableAnimations}
-                    enter={!disableAnimations}
-                    exit={false}
-                    timeout={{
-                      enter: TRANSITION_TIMEOUT,
-                      exit: TRANSITION_TIMEOUT,
-                    }}
-                    nodeRef={this.rootRef}
-                    onEntered={onOpened}
-                  >
-                    {this.renderContainer(isMobile)}
-                  </CSSTransition>
-                  {isMobile && <HideBodyVerticalScroll />}
-                </>
-              )}
-            </ResponsiveLayout>
-          </div>
-        </CommonWrapper>
-      </RenderContainer>
+      <ResponsiveLayout>
+        {({ isMobile }) => (
+          <RenderContainer>
+            <CommonWrapper {...this.props}>
+              <ZIndex
+                priority={'Sidepage'}
+                onScroll={LayoutEvents.emit}
+                createStackingContext
+                wrapperRef={this.rootRef}
+              >
+                {blockBackground && this.renderShadow(isMobile)}
+                <CSSTransition
+                  in
+                  classNames={this.getTransitionNames()}
+                  appear={!disableAnimations}
+                  enter={!disableAnimations}
+                  exit={false}
+                  timeout={{
+                    enter: TRANSITION_TIMEOUT,
+                    exit: TRANSITION_TIMEOUT,
+                  }}
+                  nodeRef={this.rootRef}
+                  onEntered={onOpened}
+                >
+                  {this.renderContainer(isMobile)}
+                </CSSTransition>
+                {isMobile && <HideBodyVerticalScroll />}
+              </ZIndex>
+            </CommonWrapper>
+          </RenderContainer>
+        )}
+      </ResponsiveLayout>
     );
   }
 
@@ -207,18 +218,16 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
     const { offset, role } = this.getProps();
 
     return (
-      <ZIndex
+      <div
         aria-modal
         role={role}
         aria-label={ariaLabel}
-        priority={'Sidepage'}
         data-tid={SidePageDataTids.root}
         className={cx({
           [styles.root()]: true,
           [styles.mobileRoot()]: isMobile,
         })}
         onScroll={LayoutEvents.emit}
-        createStackingContext
         style={
           isMobile
             ? undefined
@@ -228,7 +237,6 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
                 left: fromLeft ? offset : 'auto',
               }
         }
-        wrapperRef={this.rootRef}
       >
         <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={styles.focusLock()}>
           <RenderLayer onClickOutside={this.handleClickOutside} active>
@@ -248,7 +256,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
             </div>
           </RenderLayer>
         </FocusLock>
-      </ZIndex>
+      </div>
     );
   }
 
@@ -277,7 +285,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
 
   private renderShadow(isMobile: boolean): JSX.Element {
     return (
-      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>
+      <div className={styles.overlay()} onScroll={LayoutEvents.emit}>
         {!isMobile && (
           <>
             <HideBodyVerticalScroll key="hbvs" />
@@ -290,7 +298,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
             />
           </>
         )}
-      </ZIndex>
+      </div>
     );
   }
 

packages/react-ui/components/SidePage/__creevey__/SidePage.creevey.mts

@@ -2,6 +2,7 @@ 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) => {
@@ -128,15 +129,15 @@ kind('SidePage', () => {
           })
           .sendKeys(Key.TAB)
           .perform();
-        await delay(5000);
+        await delay(4000);
       };
       await context.webdriver
         .actions({
           bridge: true,
         })
         .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
         .perform();
-      await delay(1000);
+      await delay(7000);
       await pressTab();
       const firstTimeTabPress = await context.webdriver.takeScreenshot();
       await pressTab();
@@ -316,4 +317,105 @@ kind('SidePage', () => {
       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.expect({ viewModeSidePage, editModeSidePage, againViewModeSidePage }).to.matchImages();
+    });
+  });
+
+  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();
+    });
+  });
 });