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

@@ -430,6 +430,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 +445,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();
     });
@@ -691,12 +692,14 @@ describe("calcite-dialog", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-dialog></calcite-dialog>`);
     await skipAnimations(page);
+    const openedEvent = page.waitForEvent("calciteDialogOpen");
 
     const dialog = await page.find("calcite-dialog");
     const container = await page.find(`calcite-dialog >>> .${CSS.container}`);
 
     dialog.setProperty("open", true);
     await page.waitForChanges();
+    await openedEvent;
     expect(await dialog.isVisible()).toBe(true);
 
     await page.keyboard.press("Escape");
@@ -711,22 +714,21 @@ 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 openedEvent = page.waitForEvent("calciteDialogOpen");
 
     const dialog = await page.find("calcite-dialog");
     await page.waitForChanges();
     expect(dialog).toHaveAttribute("open");
-    expect(dialog).toHaveAttribute("open");
+    await openedEvent;
 
     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,12 @@ describe("calcite-dialog", () => {
     await skipAnimations(page);
     const dialog = await page.find("calcite-dialog");
     const container = await page.find(`calcite-dialog >>> .${CSS.container}`);
+    const openedEvent = page.waitForEvent("calciteDialogOpen");
+    await page.waitForChanges();
 
     dialog.setProperty("open", true);
     await page.waitForChanges();
+    await openedEvent;
     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,7 +230,14 @@ export class Dialog
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     connectLocalized(this);
     connectMessages(this);
-    connectFocusTrap(this);
+    connectFocusTrap(this, {
+      focusTrapOptions: {
+        // Scrim has it's own close handler, allow it to take over.
+        clickOutsideDeactivates: false,
+        escapeDeactivates: this.escapeDeactivates,
+        onDeactivate: this.focusTrapDeactivates,
+      },
+    });
     this.setupInteractions();
   }
 
@@ -379,19 +385,17 @@ 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();
+  private escapeDeactivates = (event: KeyboardEvent): boolean => {
+    if (event.defaultPrevented || this.escapeDisabled) {
+      return false;
     }
-  }
+    event.preventDefault();
+    return true;
+  };
+
+  private focusTrapDeactivates = (): void => {
+    this.open = false;
+  };
 
   //--------------------------------------------------------------------------
   //

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -397,6 +397,10 @@ export class InputDatePicker
     this.commitValue();
   };
 
+  private focusTrapDeactivates = (): void => {
+    this.open = false;
+  };
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -963,10 +967,6 @@ export class InputDatePicker
       this.open = true;
       this.focusOnOpen = true;
       event.preventDefault();
-    } else if (key === "Escape") {
-      this.open = false;
-      event.preventDefault();
-      this.restoreInputFocus();
     }
   };
 
@@ -998,8 +998,12 @@ export class InputDatePicker
     connectFocusTrap(this, {
       focusTrapEl: el,
       focusTrapOptions: {
+        allowOutsideClick: true,
+        // Allow outside click and let the popover manager take care of closing the popover.
+        clickOutsideDeactivates: false,
         initialFocus: false,
         setReturnFocus: false,
+        onDeactivate: this.focusTrapDeactivates,
       },
     });
   };