fix(dialog, modal, sheet): fix page scrolling after closing (#12006)

**Related Issue:** #11729 #11408 #12018

## Summary

- Add a controller to handle modifying the overflow styling on the
document across components
- This is so multiple components are no longer conflicting with each
other while modifying the overflow styling on the document
- Modifies `modal` to use embedded prop similar to dialog and sheet
- Component tests already exist

Author: driskull

packages/calcite-components/src/components/dialog/dialog.tsx

@@ -16,6 +16,7 @@ import type { OverlayPositioning } from "../../utils/floating-ui";
 import { useT9n } from "../../controllers/useT9n";
 import type { Panel } from "../panel/panel";
 import { FocusTrapOptions, useFocusTrap } from "../../controllers/useFocusTrap";
+import { usePreventDocumentScroll } from "../../controllers/usePreventDocumentScroll";
 import { resizeShiftStep } from "../../utils/resources";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { CSS, initialDragPosition, initialResizePosition, SLOTS } from "./resources";
@@ -28,9 +29,6 @@ declare global {
   }
 }
 
-let totalOpenDialogs: number = 0;
-let initialDocumentOverflowStyle: string = "";
-
 /**
  * @slot - A slot for adding content.
  * @slot content - [Deprecated] Use `custom-content` slot instead.
@@ -75,6 +73,8 @@ export class Dialog extends LitElement implements OpenCloseComponent {
     },
   })(this);
 
+  usePreventDocumentScroll = usePreventDocumentScroll()(this);
+
   private ignoreOpenChange = false;
 
   private interaction: Interactable;
@@ -117,6 +117,10 @@ export class Dialog extends LitElement implements OpenCloseComponent {
 
   @state() opened = false;
 
+  @state() get preventDocumentScroll(): boolean {
+    return !this.embedded && this.modal;
+  }
+
   // #endregion
 
   // #region Public Properties
@@ -322,9 +326,6 @@ export class Dialog extends LitElement implements OpenCloseComponent {
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("modal") && (this.hasUpdated || this.modal !== false)) {
-      this.updateOverflowHiddenClass();
-    }
 
     if (
       (changes.has("open") && (this.hasUpdated || this.open !== false)) ||
@@ -349,7 +350,6 @@ export class Dialog extends LitElement implements OpenCloseComponent {
   }
 
   override disconnectedCallback(): void {
-    this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.embedded = false;
     this.cleanupInteractions();
@@ -713,7 +713,6 @@ export class Dialog extends LitElement implements OpenCloseComponent {
       this.openEnd,
     ) /* TODO: [MIGRATION] If possible, refactor to use on* JSX prop or this.listen()/this.listenOn() utils - they clean up event listeners automatically, thus prevent memory leaks */;
     this.opened = true;
-    this.updateOverflowHiddenClass();
   }
 
   private handleOutsideClose(): void {
@@ -739,31 +738,7 @@ export class Dialog extends LitElement implements OpenCloseComponent {
       }
     }
 
-    totalOpenDialogs--;
     this.opened = false;
-    this.updateOverflowHiddenClass();
-  }
-
-  private updateOverflowHiddenClass(): void {
-    if (this.opened && !this.embedded && this.modal) {
-      this.addOverflowHiddenClass();
-    } else {
-      this.removeOverflowHiddenClass();
-    }
-  }
-
-  private addOverflowHiddenClass(): void {
-    if (totalOpenDialogs === 0) {
-      initialDocumentOverflowStyle = document.documentElement.style.overflow;
-    }
-
-    totalOpenDialogs++;
-    // use an inline style instead of a utility class to avoid global class declarations.
-    document.documentElement.style.setProperty("overflow", "hidden");
-  }
-
-  private removeOverflowHiddenClass(): void {
-    document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
   }
 
   private handleMutationObserver(): void {

packages/calcite-components/src/components/modal/modal.e2e.ts

@@ -35,6 +35,10 @@ describe("calcite-modal", () => {
         propertyName: "widthScale",
         defaultValue: "m",
       },
+      {
+        propertyName: "embedded",
+        defaultValue: false,
+      },
     ]);
   });
 

packages/calcite-components/src/components/modal/modal.tsx

@@ -11,7 +11,6 @@ import {
   setAttribute,
   state,
 } from "@arcgis/lumina";
-import { getNearestOverflowAncestor } from "@floating-ui/utils/dom";
 import {
   ensureId,
   focusFirstTabbable,
@@ -25,6 +24,7 @@ import { Kind, Scale } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 import { logger } from "../../utils/logger";
 import { useT9n } from "../../controllers/useT9n";
+import { usePreventDocumentScroll } from "../../controllers/usePreventDocumentScroll";
 import { FocusTrapOptions, useFocusTrap } from "../../controllers/useFocusTrap";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { CSS, ICONS, SLOTS } from "./resources";
@@ -36,9 +36,6 @@ declare global {
   }
 }
 
-let totalOpenModals: number = 0;
-let initialDocumentOverflowStyle: string = "";
-
 /**
  * @deprecated Use the `calcite-dialog` component instead.
  * @slot header - A slot for adding header text.
@@ -82,6 +79,8 @@ export class Modal extends LitElement implements OpenCloseComponent {
     },
   })(this);
 
+  usePreventDocumentScroll = usePreventDocumentScroll()(this);
+
   private ignoreOpenChange = false;
 
   private modalContent = createRef<HTMLDivElement>();
@@ -132,6 +131,10 @@ export class Modal extends LitElement implements OpenCloseComponent {
 
   @state() titleEl: HTMLElement;
 
+  @state() get preventDocumentScroll(): boolean {
+    return !this.embedded;
+  }
+
   // #endregion
 
   // #region Public Properties
@@ -145,6 +148,14 @@ export class Modal extends LitElement implements OpenCloseComponent {
   /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */
   @property({ reflect: true }) docked: boolean;
 
+  /**
+   * This internal property, managed by a containing calcite-shell, is used
+   * to inform the component if special configuration or styles are needed
+   *
+   * @private
+   */
+  @property() embedded = false;
+
   /** When `true`, disables the default close on escape behavior. */
   @property({ reflect: true }) escapeDisabled = false;
 
@@ -314,9 +325,9 @@ export class Modal extends LitElement implements OpenCloseComponent {
   }
 
   override disconnectedCallback(): void {
-    this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.cssVarObserver?.disconnect();
+    this.embedded = false;
   }
 
   // #endregion
@@ -426,16 +437,6 @@ export class Modal extends LitElement implements OpenCloseComponent {
 
     this.titleId = ensureId(this.titleEl);
     this.contentId = ensureId(this.contentEl);
-
-    if (getNearestOverflowAncestor(this.el) === document.body) {
-      if (totalOpenModals === 0) {
-        initialDocumentOverflowStyle = document.documentElement.style.overflow;
-      }
-
-      totalOpenModals++;
-      // use an inline style instead of a utility class to avoid global class declarations.
-      document.documentElement.style.setProperty("overflow", "hidden");
-    }
   }
 
   private handleOutsideClose(): void {
@@ -461,20 +462,9 @@ export class Modal extends LitElement implements OpenCloseComponent {
       }
     }
 
-    if (getNearestOverflowAncestor(this.el) === document.body) {
-      totalOpenModals--;
-      if (totalOpenModals === 0) {
-        this.removeOverflowHiddenClass();
-      }
-    }
-
     this.opened = false;
   }
 
-  private removeOverflowHiddenClass(): void {
-    document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
-  }
-
   private updateSizeCssVars(): void {
     this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
     this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");

packages/calcite-components/src/components/sheet/sheet.tsx

@@ -21,6 +21,7 @@ import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { clamp } from "../../utils/math";
 import { useT9n } from "../../controllers/useT9n";
+import { usePreventDocumentScroll } from "../../controllers/usePreventDocumentScroll";
 import { FocusTrapOptions, useFocusTrap } from "../../controllers/useFocusTrap";
 import { resizeStep, resizeShiftStep } from "../../utils/resources";
 import { CSS } from "./resources";
@@ -64,9 +65,9 @@ export class Sheet extends LitElement implements OpenCloseComponent {
     },
   })(this);
 
-  private ignoreOpenChange = false;
+  usePreventDocumentScroll = usePreventDocumentScroll()(this);
 
-  private initialOverflowCSS: string;
+  private ignoreOpenChange = false;
 
   private interaction: Interactable;
 
@@ -107,6 +108,10 @@ export class Sheet extends LitElement implements OpenCloseComponent {
     maxBlockSize: null,
   };
 
+  @state() get preventDocumentScroll(): boolean {
+    return !this.embedded;
+  }
+
   // #endregion
 
   // #region Public Properties
@@ -290,7 +295,6 @@ export class Sheet extends LitElement implements OpenCloseComponent {
   }
 
   override disconnectedCallback(): void {
-    this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.embedded = false;
     this.cleanupInteractions();
@@ -551,11 +555,6 @@ export class Sheet extends LitElement implements OpenCloseComponent {
       this.openEnd,
     ) /* TODO: [MIGRATION] If possible, refactor to use on* JSX prop or this.listen()/this.listenOn() utils - they clean up event listeners automatically, thus prevent memory leaks */;
     this.opened = true;
-    if (!this.embedded) {
-      this.initialOverflowCSS = document.documentElement.style.overflow;
-      // use an inline style instead of a utility class to avoid global class declarations.
-      document.documentElement.style.setProperty("overflow", "hidden");
-    }
   }
 
   private handleOutsideClose(): void {
@@ -582,11 +581,6 @@ export class Sheet extends LitElement implements OpenCloseComponent {
     }
 
     this.opened = false;
-    this.removeOverflowHiddenClass();
-  }
-
-  private removeOverflowHiddenClass(): void {
-    document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
   }
 
   private handleMutationObserver(): void {

packages/calcite-components/src/components/shell/shell.tsx

@@ -5,6 +5,7 @@ import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../
 import type { Dialog } from "../dialog/dialog";
 import type { Sheet } from "../sheet/sheet";
 import type { Alert } from "../alert/alert";
+import { Modal } from "../modal/modal";
 import { styles } from "./shell.scss";
 import { CSS, SLOTS } from "./resources";
 
@@ -135,6 +136,11 @@ export class Shell extends LitElement {
 
   private handleModalsSlotChange(event: Event): void {
     this.hasModals = !!slotChangeHasAssignedElement(event);
+    slotChangeGetAssignedElements(event)?.map((el) => {
+      if (el.tagName === "CALCITE-MODAL") {
+        (el as Modal["el"]).embedded = true;
+      }
+    });
   }
 
   private handlePanelTopChange(event: Event): void {