feat(action-menu, block-section, list-item, menu-item): add open, close, beforeOpen, and beforeClose events for consistent event handling

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

@@ -6162,6 +6162,9 @@ declare global {
         new (): HTMLCalciteActionGroupElement;
     };
     interface HTMLCalciteActionMenuElementEventMap {
+        "calciteActionMenuBeforeClose": void;
+        "calciteActionMenuClose": void;
+        "calciteActionMenuBeforeOpen": void;
         "calciteActionMenuOpen": void;
     }
     interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement {
@@ -6246,6 +6249,10 @@ declare global {
     };
     interface HTMLCalciteBlockSectionElementEventMap {
         "calciteBlockSectionToggle": void;
+        "calciteBlockSectionBeforeClose": void;
+        "calciteBlockSectionClose": void;
+        "calciteBlockSectionBeforeOpen": void;
+        "calciteBlockSectionOpen": void;
     }
     interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteBlockSectionElementEventMap>(type: K, listener: (this: HTMLCalciteBlockSectionElement, ev: CalciteBlockSectionCustomEvent<HTMLCalciteBlockSectionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6887,7 +6894,6 @@ declare global {
     };
     interface HTMLCalciteListItemElementEventMap {
         "calciteListItemSelect": void;
-        "calciteListItemClose": void;
         "calciteListItemDragHandleChange": void;
         "calciteListItemToggle": void;
         "calciteInternalListItemSelect": void;
@@ -6898,6 +6904,10 @@ declare global {
         "calciteInternalFocusPreviousItem": void;
         "calciteInternalListItemChange": void;
         "calciteInternalListItemToggle": void;
+        "calciteListItemBeforeClose": void;
+        "calciteListItemClose": void;
+        "calciteListItemBeforeOpen": void;
+        "calciteListItemOpen": void;
     }
     interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteListItemElementEventMap>(type: K, listener: (this: HTMLCalciteListItemElement, ev: CalciteListItemCustomEvent<HTMLCalciteListItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6945,6 +6955,10 @@ declare global {
     interface HTMLCalciteMenuItemElementEventMap {
         "calciteInternalMenuItemKeyEvent": MenuItemCustomEvent;
         "calciteMenuItemSelect": void;
+        "calciteMenuItemBeforeClose": void;
+        "calciteMenuItemClose": void;
+        "calciteMenuItemBeforeOpen": void;
+        "calciteMenuItemOpen": void;
     }
     interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteMenuItemElementEventMap>(type: K, listener: (this: HTMLCalciteMenuItemElement, ev: CalciteMenuItemCustomEvent<HTMLCalciteMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8186,7 +8200,19 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Fires when the `open` property is toggled.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteActionMenuBeforeClose"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteActionMenuBeforeOpen"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteActionMenuClose"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
          */
         "onCalciteActionMenuOpen"?: (event: CalciteActionMenuCustomEvent<void>) => void;
         /**
@@ -8460,6 +8486,22 @@ declare namespace LocalJSX {
           * Made into a prop for testing purposes only
          */
         "messages"?: BlockSectionMessages;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteBlockSectionBeforeClose"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteBlockSectionBeforeOpen"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteBlockSectionClose"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteBlockSectionOpen"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
         /**
           * Fires when the header has been clicked.
          */
@@ -11071,13 +11113,25 @@ declare namespace LocalJSX {
   }>) => void;
         "onCalciteInternalListItemToggle"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
-          * Fires when the close button is clicked.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteListItemBeforeClose"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteListItemBeforeOpen"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
          */
         "onCalciteListItemClose"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
           * Fires when the drag handle is selected.
          */
         "onCalciteListItemDragHandleChange"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteListItemOpen"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
           * Fires when the component is selected.
          */
@@ -11220,6 +11274,22 @@ declare namespace LocalJSX {
          */
         "messages"?: MenuItemMessages;
         "onCalciteInternalMenuItemKeyEvent"?: (event: CalciteMenuItemCustomEvent<MenuItemCustomEvent>) => void;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteMenuItemBeforeClose"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteMenuItemBeforeOpen"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteMenuItemClose"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteMenuItemOpen"?: (event: CalciteMenuItemCustomEvent<void>) => void;
         /**
           * Emits when the component is selected.
          */

packages/calcite-components/src/components/action-menu/action-menu.e2e.ts

@@ -6,6 +6,7 @@ import {
   delegatesToFloatingUiOwningComponent,
   focusable,
   hidden,
+  openClose,
   reflects,
   renders,
   slots,
@@ -93,6 +94,10 @@ describe("calcite-action-menu", () => {
     ]);
   });
 
+  describe("openClose", () => {
+    openClose("calcite-action-menu");
+  });
+
   describe("delegates to floating-ui-owner component", () => {
     delegatesToFloatingUiOwningComponent(
       html`<calcite-action-menu>
@@ -102,26 +107,6 @@ describe("calcite-action-menu", () => {
     );
   });
 
-  it("should emit 'calciteActionMenuOpen' event", async () => {
-    const page = await newE2EPage({
-      html: `<calcite-action-menu>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>`,
-    });
-
-    await page.waitForChanges();
-
-    const clickSpy = await page.spyOnEvent("calciteActionMenuOpen");
-
-    const actionMenu = await page.find("calcite-action-menu");
-
-    actionMenu.setProperty("open", true);
-
-    await page.waitForChanges();
-
-    expect(clickSpy).toHaveReceivedEventTimes(1);
-  });
-
   describe("should focus on menu button", () => {
     focusable(
       html`

packages/calcite-components/src/components/action-menu/action-menu.tsx

@@ -100,7 +100,6 @@ export class ActionMenu implements LoadableComponent {
     if (this.menuButtonEl) {
       this.menuButtonEl.active = open;
     }
-    this.calciteActionMenuOpen.emit();
 
     this.setTooltipReferenceElement();
   }
@@ -130,10 +129,16 @@ export class ActionMenu implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
-  /**
-   * Fires when the `open` property is toggled.
-   *
-   */
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  @Event({ cancelable: false }) calciteActionMenuBeforeClose: EventEmitter<void>;
+
+  /** Fires when the component is closed and animation is complete. */
+  @Event({ cancelable: false }) calciteActionMenuClose: EventEmitter<void>;
+
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  @Event({ cancelable: false }) calciteActionMenuBeforeOpen: EventEmitter<void>;
+
+  /** Fires when the component is open and animation is complete. */
   @Event({ cancelable: false }) calciteActionMenuOpen: EventEmitter<void>;
 
   // --------------------------------------------------------------------------
@@ -158,6 +163,8 @@ export class ActionMenu implements LoadableComponent {
 
   menuButtonId = `${this.guid}-menu-button`;
 
+  openTransitionProp = "opacity";
+
   tooltipEl: HTMLCalciteTooltipElement;
 
   @State() activeMenuItemIndex = -1;
@@ -296,8 +303,10 @@ export class ActionMenu implements LoadableComponent {
         focusTrapDisabled={true}
         label={label}
         offsetDistance={0}
-        onCalcitePopoverClose={this.handlePopoverClose}
-        onCalcitePopoverOpen={this.handlePopoverOpen}
+        onCalcitePopoverBeforeClose={this.onPopoverBeforeClose}
+        onCalcitePopoverBeforeOpen={this.onPopoverBeforeOpen}
+        onCalcitePopoverClose={this.onPopoverClose}
+        onCalcitePopoverOpen={this.onPopoverOpen}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
@@ -500,11 +509,25 @@ export class ActionMenu implements LoadableComponent {
     this.open = value;
   };
 
-  private handlePopoverOpen = (): void => {
+  private onPopoverBeforeOpen = (event: CustomEvent): void => {
+    event.stopPropagation();
     this.open = true;
+    this.calciteActionMenuBeforeOpen.emit();
+  };
+
+  private onPopoverOpen = (event: CustomEvent): void => {
+    event.stopPropagation();
+    this.calciteActionMenuOpen.emit();
+  };
+
+  private onPopoverBeforeClose = (event: CustomEvent): void => {
+    event.stopPropagation();
+    this.calciteActionMenuBeforeClose.emit();
   };
 
-  private handlePopoverClose = (): void => {
+  private onPopoverClose = (event: CustomEvent): void => {
     this.open = false;
+    event.stopPropagation();
+    this.calciteActionMenuClose.emit();
   };
 }

packages/calcite-components/src/components/block-section/block-section.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, openClose, reflects, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -38,6 +38,10 @@ describe("calcite-block-section", () => {
     t9n("calcite-block-section");
   });
 
+  describe("openClose", () => {
+    openClose("calcite-block-section");
+  });
+
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
       focusable(