fix(modal): calciteModalClose should emit on close button click

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

@@ -298,6 +298,31 @@ describe("opening and closing behavior", () => {
     ]);
   });
 
+  it("emits when closing on click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-modal open></calcite-modal>`);
+    const modal = await page.find("calcite-modal");
+
+    await page.waitForChanges();
+    expect(await modal.isVisible()).toBe(true);
+
+    const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
+    const closeSpy = await modal.spyOnEvent("calciteModalClose");
+    const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
+    const modalClose = page.waitForEvent("calciteModalClose");
+
+    const closeButton = await page.find("calcite-modal >>> .close");
+    await closeButton.click();
+
+    await modalBeforeClose;
+    await modalClose;
+
+    expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
+    expect(closeSpy).toHaveReceivedEventTimes(1);
+
+    expect(await modal.isVisible()).toBe(false);
+  });
+
   it("emits when set to open on initial render", async () => {
     const page = await newProgrammaticE2EPage();
 

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

@@ -290,7 +290,7 @@ export class Modal
         aria-label={this.messages.close}
         class={CSS.close}
         key="button"
-        onClick={this.closeModal}
+        onClick={this.handleCloseClick}
         title={this.messages.close}
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={(el) => (this.closeButtonEl = el)}
@@ -510,10 +510,10 @@ export class Modal
     onToggleOpenCloseComponent(this);
     if (value) {
       this.transitionEl?.classList.add(CSS.openingIdle);
-      this.openModal();
+      this.openModal(true);
     } else {
       this.transitionEl?.classList.add(CSS.closingIdle);
-      this.closeModal();
+      this.closeModal(true);
     }
   }
 
@@ -522,13 +522,21 @@ export class Modal
     this.el.removeEventListener("calciteModalOpen", this.openEnd);
   };
 
-  /** Open the modal */
-  private openModal() {
+  private handleCloseClick = () => {
+    this.closeModal();
+  };
+
+  /**
+   * Open the modal
+   *
+   * @param ignoreOpenChange - Ignores the open watcher.
+   */
+  private openModal(ignoreOpenChange = false) {
     if (this.ignoreOpenChange) {
       return;
     }
 
-    this.ignoreOpenChange = true;
+    this.ignoreOpenChange = ignoreOpenChange;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
     this.opened = true;
@@ -554,8 +562,12 @@ export class Modal
     this.closeModal();
   };
 
-  /** Close the modal, first running the `beforeClose` method */
-  closeModal = async (): Promise<void> => {
+  /**
+   * Close the modal, first running the `beforeClose` method
+   *
+   * @param ignoreOpenChange - Ignores the open watcher.
+   */
+  closeModal = async (ignoreOpenChange = false): Promise<void> => {
     if (this.ignoreOpenChange) {
       return;
     }
@@ -574,7 +586,7 @@ export class Modal
       }
     }
 
-    this.ignoreOpenChange = true;
+    this.ignoreOpenChange = ignoreOpenChange;
     this.open = false;
     this.opened = false;
     this.removeOverflowHiddenClass();

packages/calcite-components/src/utils/openCloseComponent.ts

@@ -14,6 +14,11 @@ export interface OpenCloseComponent {
    */
   open?: boolean;
 
+  /**
+   * When true, the component is open.
+   */
+  opened?: boolean;
+
   /**
    *  Specifies the name of transitionProp.
    */
@@ -55,22 +60,26 @@ const componentToTransitionListeners = new WeakMap<
   [HTMLDivElement, typeof transitionStart, typeof transitionEnd]
 >();
 
-function transitionStart(event: TransitionEvent): void {
+function transitionStart(this: OpenCloseComponent, event: TransitionEvent): void {
   if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
-    this.open ? this.onBeforeOpen() : this.onBeforeClose();
+    isOpen(this) ? this.onBeforeOpen() : this.onBeforeClose();
   }
 }
-function transitionEnd(event: TransitionEvent): void {
+function transitionEnd(this: OpenCloseComponent, event: TransitionEvent): void {
   if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
-    this.open ? this.onOpen() : this.onClose();
+    isOpen(this) ? this.onOpen() : this.onClose();
   }
 }
 
+function isOpen(component: OpenCloseComponent): boolean {
+  return "opened" in component ? component.opened : component.open;
+}
+
 function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
-  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
     ? component.onBeforeOpen()
     : component.onBeforeClose();
-  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
     ? component.onOpen()
     : component.onClose();
 }
@@ -131,15 +140,15 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
         if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
           clearTimeout(fallbackTimeoutId);
           component.transitionEl.removeEventListener("transitionstart", onStart);
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
             ? component.onBeforeOpen()
             : component.onBeforeClose();
         }
       }
 
       function onEndOrCancel(event: TransitionEvent): void {
         if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
             ? component.onOpen()
             : component.onClose();