feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape

packages/calcite-components/src/components.d.ts

@@ -393,10 +393,6 @@ export namespace Components {
           * When `true`, the component is expanded.
          */
         "expanded": boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements": FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -406,10 +402,18 @@ export namespace Components {
           * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
         "menuOpen": boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -422,10 +426,6 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement": LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -632,10 +632,6 @@ export namespace Components {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle": boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -660,6 +656,14 @@ export namespace Components {
           * When `true`, a busy indicator is displayed.
          */
         "loading": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -676,10 +680,6 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement": LogicalPlacement;
         /**
           * Sets focus on the component's first tabbable element.
          */
@@ -3880,10 +3880,6 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -3896,10 +3892,18 @@ export namespace Components {
           * When `true`, a busy indicator is displayed.
          */
         "loading": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
         /**
           * When `true`, the action menu items in the `header-menu-actions` slot are open.
          */
         "menuOpen": boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -3912,10 +3916,6 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement": LogicalPlacement;
         /**
           * Specifies the size of the component.
          */
@@ -8349,10 +8349,6 @@ declare namespace LocalJSX {
           * When `true`, the component is expanded.
          */
         "expanded"?: boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements"?: FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -8362,10 +8358,18 @@ declare namespace LocalJSX {
           * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
         "menuOpen"?: boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8378,10 +8382,6 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -8595,10 +8595,6 @@ declare namespace LocalJSX {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle"?: boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -8623,6 +8619,14 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8660,10 +8664,6 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement"?: LogicalPlacement;
         /**
           * Displays a status-related indicator icon.
           * @deprecated Use `icon-start` instead.
@@ -12032,10 +12032,6 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
-        /**
-          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-         */
-        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -12048,10 +12044,18 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
         /**
           * When `true`, the action menu items in the `header-menu-actions` slot are open.
          */
         "menuOpen"?: boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -12076,10 +12080,6 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
-        /**
-          * Determines where the action menu will be positioned.
-         */
-        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the component.
          */

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

@@ -214,6 +214,8 @@ describe("calcite-dialog", () => {
     accessible(`<calcite-dialog heading="My Dialog" description="My Description" open>Hello world!</calcite-dialog>`);
   });
 
+  const delayInMilliseconds = 300;
+
   it("should set internal panel properties", async () => {
     const page = await newE2EPage();
     await page.exposeFunction("beforeClose", () => Promise.reject());
@@ -430,6 +432,7 @@ describe("calcite-dialog", () => {
       await page.setContent(`
       <calcite-dialog></calcite-dialog>
     `);
+      await skipAnimations(page);
 
       const dialog = await page.find("calcite-dialog");
       await page.$eval(
@@ -444,7 +447,7 @@ describe("calcite-dialog", () => {
 
       await page.keyboard.press("Escape");
       await page.waitForChanges();
-      await page.waitForChanges();
+
       expect(mockCallBack).toHaveBeenCalledTimes(2);
       expect(await page.find(`calcite-dialog >>> .${CSS.containerOpen}`)).toBeNull();
     });
@@ -697,6 +700,7 @@ describe("calcite-dialog", () => {
 
     dialog.setProperty("open", true);
     await page.waitForChanges();
+    await page.waitForTimeout(delayInMilliseconds);
     expect(await dialog.isVisible()).toBe(true);
 
     await page.keyboard.press("Escape");
@@ -711,22 +715,20 @@ describe("calcite-dialog", () => {
 
   it("closes when Escape key is pressed and dialog is open on page load", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-dialog  open></calcite-dialog>`);
+    await page.setContent(`<calcite-dialog open></calcite-dialog>`);
 
     const dialog = await page.find("calcite-dialog");
     await page.waitForChanges();
     expect(dialog).toHaveAttribute("open");
-    expect(dialog).toHaveAttribute("open");
+    await page.waitForTimeout(delayInMilliseconds);
 
     await page.keyboard.press("Escape");
     await page.waitForChanges();
     expect(dialog).not.toHaveAttribute("open");
-    expect(dialog).not.toHaveAttribute("open");
 
     dialog.setProperty("open", true);
     await page.waitForChanges();
     expect(dialog).toHaveAttribute("open");
-    expect(dialog).toHaveAttribute("open");
   });
 
   it("closes and allows re-opening when Close button is clicked", async () => {
@@ -735,9 +737,11 @@ describe("calcite-dialog", () => {
     await skipAnimations(page);
     const dialog = await page.find("calcite-dialog");
     const container = await page.find(`calcite-dialog >>> .${CSS.container}`);
+    await page.waitForChanges();
 
     dialog.setProperty("open", true);
     await page.waitForChanges();
+    await page.waitForTimeout(delayInMilliseconds);
     expect(await container.isVisible()).toBe(true);
 
     const closeButton = await page.find(`calcite-dialog >>> calcite-panel >>> #${PanelIDS.close}`);

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

@@ -5,7 +5,6 @@ import {
   EventEmitter,
   h,
   Host,
-  Listen,
   Method,
   Prop,
   State,
@@ -231,6 +230,18 @@ export class Dialog
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     connectLocalized(this);
     connectMessages(this);
+    connectFocusTrap(this, {
+      focusTrapOptions: {
+        clickOutsideDeactivates: false,
+        escapeDeactivates: (event) => {
+          if (event.defaultPrevented || this.escapeDisabled) {
+            return false;
+          }
+          event.preventDefault();
+          return true;
+        },
+      },
+    });
     connectFocusTrap(this);
     this.setupInteractions();
   }
@@ -379,20 +390,6 @@ export class Dialog
     this.handleMutationObserver(),
   );
 
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-
-  @Listen("keydown", { target: "window" })
-  handleEscape(event: KeyboardEvent): void {
-    if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
-      this.open = false;
-      event.preventDefault();
-    }
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -479,6 +476,10 @@ export class Dialog
     deactivateFocusTrap(this);
   }
 
+  onFocusTrapDeactivate(): void {
+    this.open = false;
+  }
+
   @Watch("open")
   toggleDialog(value: boolean): void {
     if (this.ignoreOpenChange) {