feat(dialog): add focusTrapDisabled property for non-modal dialogs

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

@@ -1160,4 +1160,37 @@ describe("calcite-dialog", () => {
       expect(await dialog.getProperty("open")).toBe(true);
     });
   });
+
+  describe("focusTrap", () => {
+    it("closes when Escape key is pressed and focusTrapDisabled=true", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html` <calcite-dialog focus-trap-disabled open closable></calcite-dialog> `);
+      await skipAnimations(page);
+      await page.waitForChanges();
+
+      const dialog = await page.find("calcite-dialog");
+      const button = await page.find("calcite-dialog >>> calcite-action");
+
+      expect(await dialog.isVisible()).toBe(true);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+
+      expect(await dialog.isVisible()).toBe(true);
+
+      dialog.setAttribute("modal", "true");
+      button.callMethod("setFocus");
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+
+      expect(await dialog.isVisible()).toBe(false);
+    });
+  });
 });

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

@@ -187,6 +187,9 @@ export class Dialog
   /** When `true`, displays a scrim blocking interaction underneath the component. */
   @property({ reflect: true }) modal = false;
 
+  /** When `true`, prevents focus trapping. */
+  @property({ reflect: true }) focusTrapDisabled = false;
+
   /** When `true`, displays and positions the component. */
   @property({ reflect: true })
   get open(): boolean {
@@ -366,6 +369,19 @@ export class Dialog
   // #endregion
 
   // #region Private Methods
+
+  private handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
+    if (!this.open) {
+      return;
+    }
+
+    if (focusTrapDisabled) {
+      deactivateFocusTrap(this);
+    } else {
+      activateFocusTrap(this);
+    }
+  }
+
   private updateAssistiveText(): void {
     const { messages } = this;
     this.assistiveText =
@@ -380,7 +396,9 @@ export class Dialog
 
   onOpen(): void {
     this.calciteDialogOpen.emit();
-    activateFocusTrap(this);
+    if (this.modal || (this.modal === false && this.focusTrapDisabled === false)) {
+      activateFocusTrap(this);
+    }
   }
 
   onBeforeClose(): void {