feat: emit expanded/collapsed end-state events for expandable components

packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts

@@ -218,4 +218,25 @@ describe("calcite-accordion-item", () => {
 
     expect(headerContent.getAttribute("aria-expanded")).toBe("true");
   });
+
+  it("should emit expanded/collapsed events when toggled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-accordion-item heading="Test"></calcite-accordion-item>`);
+    const item = await page.find("calcite-accordion-item");
+
+    const expandSpy = await page.spyOnEvent("calciteAccordionItemExpand");
+    const collapseSpy = await page.spyOnEvent("calciteAccordionItemCollapse");
+
+    item.setProperty("expanded", true);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(true);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(0);
+
+    item.setProperty("expanded", false);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(false);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(1);
+  });
 });

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
 import {
   closestElementCrossShadowBoundary,
@@ -28,29 +29,29 @@ declare global {
  * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
  */
 export class AccordionItem extends LitElement {
-  // #region Static Members
+  //#region Static Members
 
   static override styles = styles;
 
-  // #endregion
+  //#endregion
 
-  // #region Private Properties
+  //#region Private Properties
 
   private headerEl: HTMLDivElement;
 
   private focusSetter = useSetFocus<this>()(this);
 
-  // #endregion
+  //#endregion
 
-  // #region State Properties
+  //#region State Properties
 
   @state() hasActionsEnd = false;
 
   @state() hasActionsStart = false;
 
-  // #endregion
+  //#endregion
 
-  // #region Public Properties
+  //#region Public Properties
 
   /**
    * The containing `accordion` element.
@@ -62,7 +63,7 @@ export class AccordionItem extends LitElement {
   /** Specifies a description for the component. */
   @property() description: string;
 
-  /** When `true`, the component is expanded. */
+  /** When `true`, expands the component and its contents. */
   @property({ reflect: true }) expanded = false;
 
   /** Specifies heading text for the component. */
@@ -108,9 +109,9 @@ export class AccordionItem extends LitElement {
    */
   @property({ reflect: true }) scale: Scale;
 
-  // #endregion
+  //#endregion
 
-  // #region Public Methods
+  //#region Public Methods
 
   /**
    * Sets focus on the component.
@@ -126,19 +127,25 @@ export class AccordionItem extends LitElement {
     }, options);
   }
 
-  // #endregion
+  //#endregion
 
-  // #region Events
+  //#region Events
+
+  /** Fires when the component's content area is collapsed. */
+  calciteAccordionItemCollapse = createEvent({ cancelable: false });
+
+  /** Fires when the component's content area is expanded. */
+  calciteAccordionItemExpand = createEvent({ cancelable: false });
 
   /** @private */
   calciteInternalAccordionItemClose = createEvent({ cancelable: false });
 
   /** @private */
   calciteInternalAccordionItemSelect = createEvent<RequestedItem>({ cancelable: false });
 
-  // #endregion
+  //#endregion
 
-  // #region Lifecycle
+  //#region Lifecycle
 
   constructor() {
     super();
@@ -155,9 +162,19 @@ export class AccordionItem extends LitElement {
     );
   }
 
-  // #endregion
+  override willUpdate(changes: PropertyValues<this>): void {
+    if (changes.has("expanded") && this.hasUpdated) {
+      if (this.expanded) {
+        this.calciteAccordionItemExpand.emit();
+      } else {
+        this.calciteAccordionItemCollapse.emit();
+      }
+    }
+  }
+
+  //#endregion
 
-  // #region Private Methods
+  //#region Private Methods
 
   private keyDownHandler(event: KeyboardEvent): void {
     if (event.target === this.el) {
@@ -255,9 +272,9 @@ export class AccordionItem extends LitElement {
     });
   }
 
-  // #endregion
+  //#endregion
 
-  // #region Rendering
+  //#region Rendering
 
   private renderActionsStart(): JsxNode {
     return (
@@ -355,5 +372,5 @@ export class AccordionItem extends LitElement {
     );
   }
 
-  // #endregion
+  //#endregion
 }

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

@@ -611,5 +611,26 @@ describe("calcite-action-bar", () => {
         },
       );
     });
+
+    it("should emit expanded/collapsed events when toggled", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-action-bar heading="Test"></calcite-action-bar>`);
+      const item = await page.find("calcite-action-bar");
+
+      const expandSpy = await page.spyOnEvent("calciteActionBarExpand");
+      const collapseSpy = await page.spyOnEvent("calciteActionBarCollapse");
+
+      item.setProperty("expanded", true);
+      await page.waitForChanges();
+      expect(await item.getProperty("expanded")).toBe(true);
+      expect(expandSpy).toHaveReceivedEventTimes(1);
+      expect(collapseSpy).toHaveReceivedEventTimes(0);
+
+      item.setProperty("expanded", false);
+      await page.waitForChanges();
+      expect(await item.getProperty("expanded")).toBe(false);
+      expect(expandSpy).toHaveReceivedEventTimes(1);
+      expect(collapseSpy).toHaveReceivedEventTimes(1);
+    });
   });
 });

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

@@ -130,7 +130,7 @@ export class ActionBar extends LitElement {
   /** When `true`, the expand-toggling behavior is disabled. */
   @property({ reflect: true }) expandDisabled = false;
 
-  /** When `true`, the component is expanded. */
+  /** When `true`, expands the component and its contents. */
   @property({ reflect: true }) expanded = false;
 
   /** Specifies the layout direction of the actions. */
@@ -190,6 +190,12 @@ export class ActionBar extends LitElement {
 
   //#region Events
 
+  /** Fires when the component's content area is collapsed. */
+  calciteActionBarCollapse = createEvent({ cancelable: false });
+
+  /** Fires when the component's content area is expanded. */
+  calciteActionBarExpand = createEvent({ cancelable: false });
+
   /** Fires when the `expanded` property is toggled. */
   calciteActionBarToggle = createEvent({ cancelable: false });
 
@@ -219,10 +225,6 @@ export class ActionBar extends LitElement {
       this.overflowActions();
     }
 
-    if (changes.has("expanded") && this.hasUpdated) {
-      this.expandedHandler();
-    }
-
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.updateGroups();
     }
@@ -233,6 +235,15 @@ export class ActionBar extends LitElement {
     ) {
       this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
     }
+
+    if (changes.has("expanded") && this.hasUpdated) {
+      this.expandedHandler();
+      if (this.expanded) {
+        this.calciteActionBarExpand.emit();
+      } else {
+        this.calciteActionBarCollapse.emit();
+      }
+    }
   }
 
   loaded(): void {

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

@@ -134,4 +134,25 @@ describe("calcite-action-group", () => {
       );
     });
   });
+
+  it("should emit expanded/collapsed events when toggled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-action-group heading="Test"></calcite-action-group>`);
+    const item = await page.find("calcite-action-group");
+
+    const expandSpy = await page.spyOnEvent("calciteActionGroupExpand");
+    const collapseSpy = await page.spyOnEvent("calciteActionGroupCollapse");
+
+    item.setProperty("expanded", true);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(true);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(0);
+
+    item.setProperty("expanded", false);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(false);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(1);
+  });
 });

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

@@ -1,6 +1,15 @@
 // @ts-strict-ignore
 import { PropertyValues } from "lit";
-import { LitElement, property, h, method, state, JsxNode, ToEvents } from "@arcgis/lumina";
+import {
+  LitElement,
+  property,
+  h,
+  method,
+  state,
+  JsxNode,
+  ToEvents,
+  createEvent,
+} from "@arcgis/lumina";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
@@ -57,7 +66,7 @@ export class ActionGroup extends LitElement {
   /** Indicates number of columns. */
   @property({ type: Number, reflect: true }) columns: Columns;
 
-  /** When `true`, the component is expanded. */
+  /** When `true`, expands the component and its contents. */
   @property({ reflect: true }) expanded = false;
 
   /** Accessible name for the component. */
@@ -114,15 +123,35 @@ export class ActionGroup extends LitElement {
 
   //#endregion
 
+  //#region Events
+
+  /** Fires when the component's content area is collapsed. */
+  calciteActionGroupCollapse = createEvent({ cancelable: false });
+
+  /** Fires when the component's content area is expanded. */
+  calciteActionGroupExpand = createEvent({ cancelable: false });
+
+  //#endregion
+
   //#region Lifecycle
 
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
-      this.menuOpen = false;
+
+    if (changes.has("expanded")) {
+      if (this.hasUpdated || this.expanded !== false) {
+        this.menuOpen = false;
+      }
+      if (this.hasUpdated) {
+        if (this.expanded) {
+          this.calciteActionGroupExpand.emit();
+        } else {
+          this.calciteActionGroupCollapse.emit();
+        }
+      }
     }
   }
 

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

@@ -622,6 +622,27 @@ describe("calcite-action-menu", () => {
     });
   });
 
+  it("should emit expanded/collapsed events when toggled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-action-menu heading="Test"></calcite-action-menu>`);
+    const item = await page.find("calcite-action-menu");
+
+    const expandSpy = await page.spyOnEvent("calciteActionMenuExpand");
+    const collapseSpy = await page.spyOnEvent("calciteActionMenuCollapse");
+
+    item.setProperty("expanded", true);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(true);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(0);
+
+    item.setProperty("expanded", false);
+    await page.waitForChanges();
+    expect(await item.getProperty("expanded")).toBe(false);
+    expect(expandSpy).toHaveReceivedEventTimes(1);
+    expect(collapseSpy).toHaveReceivedEventTimes(1);
+  });
+
   describe("theme", () => {
     themed(
       html`<calcite-action-menu open>