From f1501ad6cf46feda75a7f7f64b77ac13841efe29 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 24 Jul 2025 15:59:02 -0700 Subject: [PATCH 1/8] feat: emit expanded/collapsed end-state events for expandable components --- .../accordion-item/accordion-item.e2e.ts | 21 +++++++ .../accordion-item/accordion-item.tsx | 62 +++++++++++++------ .../components/action-bar/action-bar.e2e.ts | 21 +++++++ .../src/components/action-bar/action-bar.tsx | 26 +++++++- .../action-group/action-group.e2e.ts | 21 +++++++ .../components/action-group/action-group.tsx | 41 +++++++++++- .../components/action-menu/action-menu.e2e.ts | 21 +++++++ .../components/action-menu/action-menu.tsx | 62 +++++++++++++------ .../components/action-pad/action-pad.e2e.ts | 21 +++++++ .../src/components/action-pad/action-pad.tsx | 26 +++++++- .../block-section/block-section.e2e.ts | 21 +++++++ .../block-section/block-section.tsx | 24 ++++++- .../src/components/block/block.e2e.ts | 21 +++++++ .../src/components/block/block.tsx | 36 ++++++++--- .../src/components/flow-item/flow-item.e2e.ts | 21 +++++++ .../src/components/flow-item/flow-item.tsx | 24 ++++++- .../src/components/list-item/list-item.e2e.ts | 21 +++++++ .../src/components/list-item/list-item.tsx | 26 +++++++- .../src/components/panel/panel.e2e.ts | 21 +++++++ .../src/components/panel/panel.tsx | 24 ++++++- .../components/shell-panel/shell-panel.e2e.ts | 21 +++++++ .../components/shell-panel/shell-panel.tsx | 24 ++++++- .../src/components/tree-item/tree-item.e2e.ts | 21 +++++++ .../src/components/tree-item/tree-item.tsx | 59 ++++++++++++------ 24 files changed, 608 insertions(+), 78 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts index 08ed0754245..47e1797e0f1 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts +++ b/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``); + const item = await page.find("calcite-accordion-item"); + + const expandedSpy = await page.spyOnEvent("calciteAccordionItemExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteAccordionItemCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); }); diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 1b4e5b2e387..aec14deb173 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -28,29 +28,31 @@ 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); - // #endregion + private _expanded = false; - // #region State Properties + //#endregion + + //#region State Properties @state() hasActionsEnd = false; @state() hasActionsStart = false; - // #endregion + //#endregion - // #region Public Properties + //#region Public Properties /** * The containing `accordion` element. @@ -62,8 +64,22 @@ export class AccordionItem extends LitElement { /** Specifies a description for the component. */ @property() description: string; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteAccordionItemExpanded.emit(); + } else { + this.calciteAccordionItemCollapsed.emit(); + } + } + } /** Specifies heading text for the component. */ @property() heading: string; @@ -108,9 +124,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,9 +142,15 @@ export class AccordionItem extends LitElement { }, options); } - // #endregion + //#endregion + + //#region Events + + /** Fires when the component's content area is collapsed. */ + calciteAccordionItemCollapsed = createEvent({ cancelable: false }); - // #region Events + /** Fires when the component's content area is expanded. */ + calciteAccordionItemExpanded = createEvent({ cancelable: false }); /** @private */ calciteInternalAccordionItemClose = createEvent({ cancelable: false }); @@ -136,9 +158,9 @@ export class AccordionItem extends LitElement { /** @private */ calciteInternalAccordionItemSelect = createEvent({ cancelable: false }); - // #endregion + //#endregion - // #region Lifecycle + //#region Lifecycle constructor() { super(); @@ -155,9 +177,9 @@ export class AccordionItem extends LitElement { ); } - // #endregion + //#endregion - // #region Private Methods + //#region Private Methods private keyDownHandler(event: KeyboardEvent): void { if (event.target === this.el) { @@ -255,9 +277,9 @@ export class AccordionItem extends LitElement { }); } - // #endregion + //#endregion - // #region Rendering + //#region Rendering private renderActionsStart(): JsxNode { return ( @@ -355,5 +377,5 @@ export class AccordionItem extends LitElement { ); } - // #endregion + //#endregion } diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index ff744562a67..febe9a24ca9 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/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``); + const item = await page.find("calcite-action-bar"); + + const expandedSpy = await page.spyOnEvent("calciteActionBarExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteActionBarCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); }); }); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 573ee782fa8..2684a44e1de 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -105,6 +105,8 @@ export class ActionBar extends LitElement { private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region State Properties @@ -130,8 +132,22 @@ export class ActionBar extends LitElement { /** When `true`, the expand-toggling behavior is disabled. */ @property({ reflect: true }) expandDisabled = false; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteActionBarExpanded.emit(); + } else { + this.calciteActionBarCollapsed.emit(); + } + } + } /** Specifies the layout direction of the actions. */ @property({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = @@ -190,6 +206,12 @@ export class ActionBar extends LitElement { //#region Events + /** Fires when the component's content area is collapsed. */ + calciteActionBarCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteActionBarExpanded = createEvent({ cancelable: false }); + /** Fires when the `expanded` property is toggled. */ calciteActionBarToggle = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts index 1615317bd77..59ed7f1073c 100755 --- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts +++ b/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``); + const item = await page.find("calcite-action-group"); + + const expandedSpy = await page.spyOnEvent("calciteActionGroupExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteActionGroupCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); }); diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 46df96ff3c1..33af9abe02f 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/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"; @@ -44,6 +53,8 @@ export class ActionGroup extends LitElement { private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region State Properties @@ -57,8 +68,22 @@ export class ActionGroup extends LitElement { /** Indicates number of columns. */ @property({ type: Number, reflect: true }) columns: Columns; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteActionGroupExpanded.emit(); + } else { + this.calciteActionGroupCollapsed.emit(); + } + } + } /** Accessible name for the component. */ @property() label: string; @@ -114,6 +139,16 @@ export class ActionGroup extends LitElement { //#endregion + //#region Events + + /** Fires when the component's content area is collapsed. */ + calciteActionGroupCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteActionGroupExpanded = createEvent({ cancelable: false }); + + //#endregion + //#region Lifecycle override willUpdate(changes: PropertyValues): void { diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index 5b71b8058a5..1f93cbe0ae3 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/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``); + const item = await page.find("calcite-action-menu"); + + const expandedSpy = await page.spyOnEvent("calciteActionMenuExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteActionMenuCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("theme", () => { themed( html` diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 63aff4ee8fa..e9c2a476e6b 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -37,13 +37,13 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"]; * @slot tooltip - A slot for adding a tooltip for the menu. */ export class ActionMenu extends LitElement { - // #region Static Members + //#region Static Members static override styles = styles; - // #endregion + //#endregion - // #region Private Properties + //#region Private Properties private guid = guid(); @@ -121,23 +121,39 @@ export class ActionMenu extends LitElement { private focusSetter = useSetFocus()(this); - // #endregion + private _expanded = false; - // #region State Properties + //#endregion + + //#region State Properties @state() activeMenuItemIndex = -1; @state() menuButtonEl: Action["el"]; - // #endregion + //#endregion - // #region Public Properties + //#region Public Properties /** Specifies the appearance of the component. */ @property({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid"; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteActionMenuExpanded.emit(); + } else { + this.calciteActionMenuCollapsed.emit(); + } + } + } /** Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. */ @property() flipPlacements: FlipPlacement[]; @@ -176,9 +192,9 @@ export class ActionMenu extends LitElement { /** Specifies the size of the component's trigger `calcite-action`. */ @property({ reflect: true }) scale: Scale = "m"; - // #endregion + //#endregion - // #region Public Methods + //#region Public Methods /** * Sets focus on the component. @@ -194,16 +210,22 @@ export class ActionMenu extends LitElement { }, options); } - // #endregion + //#endregion + + //#region Events + + /** Fires when the component's content area is collapsed. */ + calciteActionMenuCollapsed = createEvent({ cancelable: false }); - // #region Events + /** Fires when the component's content area is expanded. */ + calciteActionMenuExpanded = createEvent({ cancelable: false }); /** Fires when the `open` property is toggled. */ calciteActionMenuOpen = createEvent({ cancelable: false }); - // #endregion + //#endregion - // #region Lifecycle + //#region Lifecycle override connectedCallback(): void { this.connectMenuButtonEl(); @@ -230,9 +252,9 @@ export class ActionMenu extends LitElement { this.disconnectMenuButtonEl(); } - // #endregion + //#endregion - // #region Private Methods + //#region Private Methods private expandedHandler(): void { this.open = false; @@ -453,9 +475,9 @@ export class ActionMenu extends LitElement { this.open = false; } - // #endregion + //#endregion - // #region Rendering + //#region Rendering private renderMenuButton(): JsxNode { const { appearance, label, scale, expanded } = this; @@ -533,5 +555,5 @@ export class ActionMenu extends LitElement { ); } - // #endregion + //#endregion } diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts index 4da67f0ec1a..bd420b64076 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts @@ -366,6 +366,27 @@ describe("calcite-action-pad", () => { } }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-action-pad"); + + const expandedSpy = await page.spyOnEvent("calciteActionPadExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteActionPadCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("theme", () => { describe("default", () => { themed("calcite-action-pad", { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 7b7d7ea2d86..13f07f041a2 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -55,6 +55,8 @@ export class ActionPad extends LitElement { private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region State Properties @@ -71,8 +73,22 @@ export class ActionPad extends LitElement { /** When `true`, the expand-toggling behavior is disabled. */ @property({ reflect: true }) expandDisabled = false; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteActionPadExpanded.emit(); + } else { + this.calciteActionPadCollapsed.emit(); + } + } + } /** Indicates the layout of the component. */ @property({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = @@ -118,6 +134,12 @@ export class ActionPad extends LitElement { //#region Events + /** Fires when the component's content area is collapsed. */ + calciteActionPadCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteActionPadExpanded = createEvent({ cancelable: false }); + /** Fires when the `expanded` property is toggled. */ calciteActionPadToggle = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts index 5b58102b565..605c1273c9a 100644 --- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts +++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts @@ -261,6 +261,27 @@ describe("calcite-block-section", () => { expect(toggle.getAttribute("aria-expanded")).toBe("false"); } + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-block-section"); + + const expandedSpy = await page.spyOnEvent("calciteBlockSectionExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteBlockSectionCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("theme", () => { describe("default", () => { themed( diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index f0b7e63bbe8..edd8fc4da22 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -36,12 +36,28 @@ export class BlockSection extends LitElement { private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region Public Properties /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) expanded = false; + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteBlockSectionExpanded.emit(); + } else { + this.calciteBlockSectionCollapsed.emit(); + } + } + } /** Specifies an icon to display at the end of the component. */ @property({ reflect: true }) iconEnd: IconNameOrString; @@ -114,6 +130,12 @@ export class BlockSection extends LitElement { //#region Events + /** Fires when the component's content area is collapsed. */ + calciteBlockSectionCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteBlockSectionExpanded = createEvent({ cancelable: false }); + /** Fires when the header has been clicked. */ calciteBlockSectionToggle = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index a968f63a933..0339b32f15c 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -476,6 +476,27 @@ describe("calcite-block", () => { expect(article.getAttribute("aria-label")).toEqual(label); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-block"); + + const expandedSpy = await page.spyOnEvent("calciteBlockExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteBlockCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("translation support", () => { t9n("calcite-block"); }); diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 77db2b9d197..e242a628e4c 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -65,6 +65,8 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region State Properties @@ -103,7 +105,21 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose @property({ reflect: true }) dragHandle = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) expanded = false; + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteBlockExpanded.emit(); + } else { + this.calciteBlockCollapsed.emit(); + } + } + } /** * The component header text. @@ -220,12 +236,6 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose //#region Events - /** - * - * @private - */ - calciteInternalBlockUpdateMoveToItems = createEvent({ cancelable: false }); - /** Fires when the component is requested to be closed and before the closing transition begins. */ calciteBlockBeforeClose = createEvent({ cancelable: false }); @@ -235,6 +245,12 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose /** Fires when the component is closed and animation is complete. */ calciteBlockClose = createEvent({ cancelable: false }); + /** Fires when the component's content area is collapsed. */ + calciteBlockCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteBlockExpanded = createEvent({ cancelable: false }); + /** Fires when the component is open and animation is complete. */ calciteBlockOpen = createEvent({ cancelable: false }); @@ -257,6 +273,12 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose */ calciteBlockToggle = createEvent({ cancelable: false }); + /** + * + * @private + */ + calciteInternalBlockUpdateMoveToItems = createEvent({ cancelable: false }); + //#endregion //#region Lifecycle diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index cdcee6bb940..3a004873b34 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -423,6 +423,27 @@ describe("calcite-flow-item", () => { expect(await flowItem.getProperty("closed")).toBe(false); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-flow-item"); + + const expandedSpy = await page.spyOnEvent("calciteFlowItemExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteFlowItemCollapsed"); + + item.setProperty("collapsed", true); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(0); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + + item.setProperty("collapsed", false); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("theme", () => { themed(html``, { "--calcite-flow-corner-radius": { diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 78df6ae75db..6d22749b5af 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -64,6 +64,8 @@ export class FlowItem extends LitElement implements InteractiveComponent { private focusSetter = useSetFocus()(this); + private _collapsed = false; + //#endregion //#region Public Properties @@ -88,7 +90,21 @@ export class FlowItem extends LitElement implements InteractiveComponent { @property() collapseDirection: CollapseDirection = "down"; /** When `true`, hides the component's content area. */ - @property({ reflect: true }) collapsed = false; + @property({ reflect: true }) + get collapsed(): boolean { + return this._collapsed; + } + set collapsed(value: boolean) { + const oldValue = this._collapsed; + this._collapsed = value; + if (oldValue !== value) { + if (value) { + this.calciteFlowItemCollapsed.emit(); + } else { + this.calciteFlowItemExpanded.emit(); + } + } + } /** When `true`, the component is collapsible. */ @property({ reflect: true }) collapsible = false; @@ -188,6 +204,12 @@ export class FlowItem extends LitElement implements InteractiveComponent { /** Fires when the close button is clicked. */ calciteFlowItemClose = createEvent({ cancelable: false }); + /** Fires when the component's content area is collapsed. */ + calciteFlowItemCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteFlowItemExpanded = createEvent({ cancelable: false }); + /** Fires when the content is scrolled. */ calciteFlowItemScroll = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index d476f6d84ea..49f82a8a565 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -520,6 +520,27 @@ describe("calcite-list-item", () => { expect(icon).toBe(null); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-list-item"); + + const expandedSpy = await page.spyOnEvent("calciteListItemExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteListItemCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("themed", () => { describe(`selection-appearance="icon"`, () => { themed( diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 52c29848928..a0f9bb2ac17 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -74,6 +74,8 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab private focusSetter = useSetFocus()(this); + private _expanded = false; + //#endregion //#region State Properties @@ -136,8 +138,22 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab */ @property({ reflect: true }) dragHandle = false; - /** When `true`, the item is expanded to show child components. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteListItemExpanded.emit(); + } else { + this.calciteListItemCollapsed.emit(); + } + } + } /** * Hides the component when filtered. @@ -338,6 +354,12 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab /** Fires when the close button is clicked. */ calciteListItemClose = createEvent({ cancelable: false }); + /** Fires when the component's content area is collapsed. */ + calciteListItemCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteListItemExpanded = createEvent({ cancelable: false }); + /** Fires when the component is selected. */ calciteListItemSelect = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 342c7f0a54c..7edd630c5ac 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -744,6 +744,27 @@ describe("calcite-panel", () => { }); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-panel"); + + const expandedSpy = await page.spyOnEvent("calcitePanelExpanded"); + const collapsedSpy = await page.spyOnEvent("calcitePanelCollapsed"); + + item.setProperty("collapsed", true); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(0); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + + item.setProperty("collapsed", false); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("theme", () => { themed( html`()(this); + private _collapsed = false; + //#endregion //#region State Properties @@ -134,7 +136,21 @@ export class Panel extends LitElement implements InteractiveComponent { @property() collapseDirection: CollapseDirection = "down"; /** When `true`, hides the component's content area. */ - @property({ reflect: true }) collapsed = false; + @property({ reflect: true }) + get collapsed(): boolean { + return this._collapsed; + } + set collapsed(value: boolean) { + const oldValue = this._collapsed; + this._collapsed = value; + if (oldValue !== value) { + if (value) { + this.calcitePanelCollapsed.emit(); + } else { + this.calcitePanelExpanded.emit(); + } + } + } /** When `true`, the component is collapsible. */ @property({ reflect: true }) collapsible = false; @@ -226,6 +242,12 @@ export class Panel extends LitElement implements InteractiveComponent { /** Fires when the close button is clicked. */ calcitePanelClose = createEvent({ cancelable: true }); + /** Fires when the component's content area is collapsed. */ + calcitePanelCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calcitePanelExpanded = createEvent({ cancelable: false }); + /** Fires when the content is scrolled. */ calcitePanelScroll = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts index 431ed75b6a4..db71a582487 100644 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts @@ -565,6 +565,27 @@ describe("calcite-shell-panel", () => { t9n("calcite-shell-panel"); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-shell-panel"); + + const expandedSpy = await page.spyOnEvent("calciteShellPanelExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteShellPanelCollapsed"); + + item.setProperty("collapsed", true); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(0); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + + item.setProperty("collapsed", false); + await page.waitForChanges(); + expect(await item.getProperty("collapsed")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("themed", () => { describe("default", () => { themed(html``, { diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index b23bb8bd108..1abd69de835 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -55,6 +55,8 @@ export class ShellPanel extends LitElement { */ messages = useT9n(); + private _collapsed = false; + //#endregion //#region State Properties @@ -75,7 +77,21 @@ export class ShellPanel extends LitElement { //#region Public Properties /** When `true`, hides the component's content area. */ - @property({ reflect: true }) collapsed = false; + @property({ reflect: true }) + get collapsed(): boolean { + return this._collapsed; + } + set collapsed(value: boolean) { + const oldValue = this._collapsed; + this._collapsed = value; + if (oldValue !== value) { + if (value) { + this.calciteShellPanelCollapsed.emit(); + } else { + this.calciteShellPanelExpanded.emit(); + } + } + } /** * Specifies the display mode of the component, where: @@ -134,6 +150,12 @@ export class ShellPanel extends LitElement { /** @private */ calciteInternalShellPanelResizeStart = createEvent({ cancelable: false }); + /** Fires when the component's content area is collapsed. */ + calciteShellPanelCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteShellPanelExpanded = createEvent({ cancelable: false }); + //#endregion //#region Lifecycle diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index ef1ed49ab0d..1016934db5a 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts @@ -429,6 +429,27 @@ describe("calcite-tree-item", () => { expect(itemBounds.height).not.toBe(0); }); + it("should emit expanded/collapsed events when toggled", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const item = await page.find("calcite-tree-item"); + + const expandedSpy = await page.spyOnEvent("calciteTreeItemExpanded"); + const collapsedSpy = await page.spyOnEvent("calciteTreeItemCollapsed"); + + item.setProperty("expanded", true); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(true); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(0); + + item.setProperty("expanded", false); + await page.waitForChanges(); + expect(await item.getProperty("expanded")).toBe(false); + expect(expandedSpy).toHaveReceivedEventTimes(1); + expect(collapsedSpy).toHaveReceivedEventTimes(1); + }); + describe("themed", () => { describe(`selection-mode="none"`, () => { themed( diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 5a43d106015..6ea767c5380 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -35,13 +35,13 @@ declare global { * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions. */ export class TreeItem extends LitElement implements InteractiveComponent { - // #region Static Members + //#region Static Members static override styles = styles; - // #endregion + //#endregion - // #region Private Properties + //#region Private Properties private actionSlotWrapper = createRef(); @@ -53,9 +53,11 @@ export class TreeItem extends LitElement implements InteractiveComponent { private userChangedValue = false; - // #endregion + private _expanded = false; - // #region State Properties + //#endregion + + //#region State Properties @state() private hasEndActions = false; @@ -67,9 +69,9 @@ export class TreeItem extends LitElement implements InteractiveComponent { */ @state() updateAfterInitialRender = false; - // #endregion + //#endregion - // #region Public Properties + //#region Public Properties /** @private */ @property({ reflect: true }) depth = -1; @@ -77,8 +79,22 @@ export class TreeItem extends LitElement implements InteractiveComponent { /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @property({ reflect: true }) disabled = false; - /** When `true`, the component is expanded. */ - @property({ reflect: true }) expanded = false; + /** When `true`, the component is expanded to show child components. */ + @property({ reflect: true }) + get expanded(): boolean { + return this._expanded; + } + set expanded(value: boolean) { + const oldValue = this._expanded; + this._expanded = value; + if (oldValue !== value) { + if (value) { + this.calciteTreeItemExpanded.emit(); + } else { + this.calciteTreeItemCollapsed.emit(); + } + } + } /** @private */ @property({ reflect: true }) get hasChildren(): boolean { @@ -116,16 +132,22 @@ export class TreeItem extends LitElement implements InteractiveComponent { /** @private */ @property({ reflect: true }) selectionMode: SelectionMode; - // #endregion + //#endregion - // #region Events + //#region Events /** @private */ calciteInternalTreeItemSelect = createEvent({ cancelable: false }); - // #endregion + /** Fires when the component's content area is collapsed. */ + calciteTreeItemCollapsed = createEvent({ cancelable: false }); + + /** Fires when the component's content area is expanded. */ + calciteTreeItemExpanded = createEvent({ cancelable: false }); - // #region Lifecycle + //#endregion + + //#region Lifecycle constructor() { super(); @@ -168,9 +190,10 @@ export class TreeItem extends LitElement implements InteractiveComponent { this.updateAncestorTree(); } - // #endregion + //#endregion + + //#region Private Methods - // #region Private Methods private handleSelectedChange(value: boolean): void { if (this.selectionMode === "ancestors" && !this.userChangedValue) { if (value) { @@ -342,9 +365,9 @@ export class TreeItem extends LitElement implements InteractiveComponent { } } - // #endregion + //#endregion - // #region Rendering + //#region Rendering override render(): JsxNode { const rtl = getElementDir(this.el) === "rtl"; @@ -494,5 +517,5 @@ export class TreeItem extends LitElement implements InteractiveComponent { ); } - // #endregion + //#endregion } From fd749d1b9251a9254b7bf6e200980beae4b87fcc Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 24 Jul 2025 17:04:01 -0700 Subject: [PATCH 2/8] willUpdate hasChanged instead of getter/setter --- .../accordion-item/accordion-item.tsx | 29 ++++++-------- .../src/components/action-bar/action-bar.tsx | 31 +++++---------- .../components/action-group/action-group.tsx | 28 +++++--------- .../components/action-menu/action-menu.tsx | 26 +++++-------- .../src/components/action-pad/action-pad.tsx | 26 +++++-------- .../block-section/block-section.tsx | 38 ++++++++++--------- .../src/components/block/block.tsx | 26 +++++-------- .../src/components/flow-item/flow-item.tsx | 25 ++++-------- .../src/components/list-item/list-item.tsx | 31 +++++---------- .../src/components/panel/panel.tsx | 29 ++++++-------- .../components/shell-panel/shell-panel.tsx | 25 ++++-------- .../src/components/tree-item/tree-item.tsx | 27 ++++--------- 12 files changed, 125 insertions(+), 216 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index aec14deb173..7a9748fc874 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/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, @@ -40,8 +41,6 @@ export class AccordionItem extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -65,21 +64,7 @@ export class AccordionItem extends LitElement { @property() description: string; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteAccordionItemExpanded.emit(); - } else { - this.calciteAccordionItemCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Specifies heading text for the component. */ @property() heading: string; @@ -177,6 +162,16 @@ export class AccordionItem extends LitElement { ); } + override willUpdate(changes: PropertyValues): void { + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.calciteAccordionItemExpanded.emit(); + } else { + this.calciteAccordionItemCollapsed.emit(); + } + } + } + //#endregion //#region Private Methods diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 2684a44e1de..d471fd13822 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -105,8 +105,6 @@ export class ActionBar extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -133,21 +131,7 @@ export class ActionBar extends LitElement { @property({ reflect: true }) expandDisabled = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteActionBarExpanded.emit(); - } else { - this.calciteActionBarCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Specifies the layout direction of the actions. */ @property({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = @@ -241,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(); } @@ -255,6 +235,15 @@ export class ActionBar extends LitElement { ) { this.overflowActionsDisabledHandler(this.overflowActionsDisabled); } + + if (changes.has("expanded") && this.hasUpdated) { + this.expandedHandler(); + if (this.expanded) { + this.calciteActionBarExpanded.emit(); + } else { + this.calciteActionBarCollapsed.emit(); + } + } } loaded(): void { diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 33af9abe02f..f6cb5e81829 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -53,8 +53,6 @@ export class ActionGroup extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -69,21 +67,7 @@ export class ActionGroup extends LitElement { @property({ type: Number, reflect: true }) columns: Columns; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteActionGroupExpanded.emit(); - } else { - this.calciteActionGroupCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Accessible name for the component. */ @property() label: string; @@ -156,8 +140,14 @@ export class ActionGroup extends LitElement { 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") && this.hasUpdated) { + if (this.expanded) { + this.menuOpen = false; + this.calciteActionGroupExpanded.emit(); + } else { + this.calciteActionGroupCollapsed.emit(); + } } } diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index e9c2a476e6b..5ff934ef0fe 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -121,8 +121,6 @@ export class ActionMenu extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -139,21 +137,7 @@ export class ActionMenu extends LitElement { @property({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid"; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteActionMenuExpanded.emit(); - } else { - this.calciteActionMenuCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. */ @property() flipPlacements: FlipPlacement[]; @@ -246,6 +230,14 @@ export class ActionMenu extends LitElement { ) { this.updateActions(this.actionElements); } + + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.calciteActionMenuExpanded.emit(); + } else { + this.calciteActionMenuCollapsed.emit(); + } + } } override disconnectedCallback(): void { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 13f07f041a2..f2491337fe7 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -55,8 +55,6 @@ export class ActionPad extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -74,21 +72,7 @@ export class ActionPad extends LitElement { @property({ reflect: true }) expandDisabled = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteActionPadExpanded.emit(); - } else { - this.calciteActionPadCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Indicates the layout of the component. */ @property({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = @@ -176,6 +160,14 @@ export class ActionPad extends LitElement { if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) { this.updateGroups(); } + + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.calciteActionPadExpanded.emit(); + } else { + this.calciteActionPadCollapsed.emit(); + } + } } override disconnectedCallback(): void { diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index edd8fc4da22..734bf770910 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -1,4 +1,5 @@ // @ts-strict-ignore +import { PropertyValues } from "lit"; import { LitElement, property, createEvent, Fragment, h, method, JsxNode } from "@arcgis/lumina"; import { isActivationKey } from "../../utils/key"; import { FlipContext, Status } from "../interfaces"; @@ -36,28 +37,12 @@ export class BlockSection extends LitElement { private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region Public Properties /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteBlockSectionExpanded.emit(); - } else { - this.calciteBlockSectionCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** Specifies an icon to display at the end of the component. */ @property({ reflect: true }) iconEnd: IconNameOrString; @@ -141,6 +126,25 @@ export class BlockSection extends LitElement { //#endregion + //#region Lifecycle + + override willUpdate(changes: PropertyValues): 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) { + if (this.expanded) { + this.calciteBlockSectionExpanded.emit(); + } else { + this.calciteBlockSectionCollapsed.emit(); + } + } + } + + //#endregion + //#region Private Methods private handleHeaderKeyDown(event: KeyboardEvent): void { diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index e242a628e4c..a3d06a0a414 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -65,8 +65,6 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -105,21 +103,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose @property({ reflect: true }) dragHandle = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteBlockExpanded.emit(); - } else { - this.calciteBlockCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** * The component header text. @@ -307,6 +291,14 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose if (changes.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== false)) { this.sortHandleOpenHandler(); } + + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.calciteBlockExpanded.emit(); + } else { + this.calciteBlockCollapsed.emit(); + } + } } override updated(): void { diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 6d22749b5af..5b2d4cb5ba4 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -64,8 +64,6 @@ export class FlowItem extends LitElement implements InteractiveComponent { private focusSetter = useSetFocus()(this); - private _collapsed = false; - //#endregion //#region Public Properties @@ -90,21 +88,7 @@ export class FlowItem extends LitElement implements InteractiveComponent { @property() collapseDirection: CollapseDirection = "down"; /** When `true`, hides the component's content area. */ - @property({ reflect: true }) - get collapsed(): boolean { - return this._collapsed; - } - set collapsed(value: boolean) { - const oldValue = this._collapsed; - this._collapsed = value; - if (oldValue !== value) { - if (value) { - this.calciteFlowItemCollapsed.emit(); - } else { - this.calciteFlowItemExpanded.emit(); - } - } - } + @property({ reflect: true }) collapsed = false; /** When `true`, the component is collapsible. */ @property({ reflect: true }) collapsible = false; @@ -231,6 +215,13 @@ export class FlowItem extends LitElement implements InteractiveComponent { if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) { this.calciteInternalFlowItemChange.emit(); } + if (changes.has("collapsed") && this.hasUpdated) { + if (this.collapsed) { + this.calciteFlowItemCollapsed.emit(); + } else { + this.calciteFlowItemExpanded.emit(); + } + } } override updated(): void { diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index a0f9bb2ac17..1d351b1a91b 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -74,8 +74,6 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab private focusSetter = useSetFocus()(this); - private _expanded = false; - //#endregion //#region State Properties @@ -139,21 +137,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab @property({ reflect: true }) dragHandle = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteListItemExpanded.emit(); - } else { - this.calciteListItemCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** * Hides the component when filtered. @@ -423,10 +407,6 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab this.handleDisabledChange(); } - if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) { - this.handleExpandedChange(); - } - if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) { this.handleSelectedChange(); } @@ -438,6 +418,15 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab if (changes.has("displayMode") && this.hasUpdated) { this.handleExpandableChange(this.defaultSlotEl.value); } + + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.handleExpandedChange(); + this.calciteListItemExpanded.emit(); + } else { + this.calciteListItemCollapsed.emit(); + } + } } override updated(): void { diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index d9c9a2a2451..6d2602daec1 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -1,4 +1,5 @@ // @ts-strict-ignore +import { PropertyValues } from "lit"; import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina"; import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom"; import { @@ -74,8 +75,6 @@ export class Panel extends LitElement implements InteractiveComponent { private focusSetter = useSetFocus()(this); - private _collapsed = false; - //#endregion //#region State Properties @@ -136,21 +135,7 @@ export class Panel extends LitElement implements InteractiveComponent { @property() collapseDirection: CollapseDirection = "down"; /** When `true`, hides the component's content area. */ - @property({ reflect: true }) - get collapsed(): boolean { - return this._collapsed; - } - set collapsed(value: boolean) { - const oldValue = this._collapsed; - this._collapsed = value; - if (oldValue !== value) { - if (value) { - this.calcitePanelCollapsed.emit(); - } else { - this.calcitePanelExpanded.emit(); - } - } - } + @property({ reflect: true }) collapsed = false; /** When `true`, the component is collapsible. */ @property({ reflect: true }) collapsible = false; @@ -264,6 +249,16 @@ export class Panel extends LitElement implements InteractiveComponent { this.listen("calcitePanelClose", this.panelCloseHandler); } + override willUpdate(changes: PropertyValues): void { + if (changes.has("collapsed") && this.hasUpdated) { + if (this.collapsed) { + this.calcitePanelCollapsed.emit(); + } else { + this.calcitePanelExpanded.emit(); + } + } + } + override updated(): void { updateHostInteraction(this); } diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index 1abd69de835..b05d98e3237 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -55,8 +55,6 @@ export class ShellPanel extends LitElement { */ messages = useT9n(); - private _collapsed = false; - //#endregion //#region State Properties @@ -77,21 +75,7 @@ export class ShellPanel extends LitElement { //#region Public Properties /** When `true`, hides the component's content area. */ - @property({ reflect: true }) - get collapsed(): boolean { - return this._collapsed; - } - set collapsed(value: boolean) { - const oldValue = this._collapsed; - this._collapsed = value; - if (oldValue !== value) { - if (value) { - this.calciteShellPanelCollapsed.emit(); - } else { - this.calciteShellPanelExpanded.emit(); - } - } - } + @property({ reflect: true }) collapsed = false; /** * Specifies the display mode of the component, where: @@ -168,6 +152,13 @@ export class ShellPanel extends LitElement { if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) { this.setActionBarsLayout(this.actionBars); } + if (changes.has("collapsed") && this.hasUpdated) { + if (this.collapsed) { + this.calciteShellPanelCollapsed.emit(); + } else { + this.calciteShellPanelExpanded.emit(); + } + } } override disconnectedCallback(): void { diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 6ea767c5380..0ee7af31d6c 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -53,8 +53,6 @@ export class TreeItem extends LitElement implements InteractiveComponent { private userChangedValue = false; - private _expanded = false; - //#endregion //#region State Properties @@ -80,21 +78,7 @@ export class TreeItem extends LitElement implements InteractiveComponent { @property({ reflect: true }) disabled = false; /** When `true`, the component is expanded to show child components. */ - @property({ reflect: true }) - get expanded(): boolean { - return this._expanded; - } - set expanded(value: boolean) { - const oldValue = this._expanded; - this._expanded = value; - if (oldValue !== value) { - if (value) { - this.calciteTreeItemExpanded.emit(); - } else { - this.calciteTreeItemCollapsed.emit(); - } - } - } + @property({ reflect: true }) expanded = false; /** @private */ @property({ reflect: true }) get hasChildren(): boolean { @@ -169,8 +153,13 @@ export class TreeItem extends LitElement implements InteractiveComponent { 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.updateChildTree(); + if (changes.has("expanded") && this.hasUpdated) { + if (this.expanded) { + this.updateChildTree(); + this.calciteTreeItemExpanded.emit(); + } else { + this.calciteTreeItemCollapsed.emit(); + } } if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) { From adcd7c5a48e5c08a5b684f102c27908d1040a067 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 24 Jul 2025 17:12:12 -0700 Subject: [PATCH 3/8] fix omission --- .../src/components/accordion-item/accordion-item.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 7a9748fc874..7c3a3b77901 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -163,6 +163,10 @@ export class AccordionItem extends LitElement { } override willUpdate(changes: PropertyValues): 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) { if (this.expanded) { this.calciteAccordionItemExpanded.emit(); From 610228008414742a4c57f4eb1487169aba5adbad Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 28 Jul 2025 15:10:15 -0700 Subject: [PATCH 4/8] events to be named for the action, not the state, remove migration comments --- .../components/accordion-item/accordion-item.e2e.ts | 12 ++++++------ .../components/accordion-item/accordion-item.tsx | 12 ++++-------- .../src/components/action-bar/action-bar.e2e.ts | 12 ++++++------ .../src/components/action-bar/action-bar.tsx | 8 ++++---- .../src/components/action-group/action-group.e2e.ts | 12 ++++++------ .../src/components/action-group/action-group.tsx | 8 ++++---- .../src/components/action-menu/action-menu.e2e.ts | 12 ++++++------ .../src/components/action-menu/action-menu.tsx | 8 ++++---- .../src/components/action-pad/action-pad.e2e.ts | 12 ++++++------ .../src/components/action-pad/action-pad.tsx | 8 ++++---- .../components/block-section/block-section.e2e.ts | 12 ++++++------ .../src/components/block-section/block-section.tsx | 13 ++++--------- .../src/components/block/block.e2e.ts | 12 ++++++------ .../src/components/block/block.tsx | 8 ++++---- .../src/components/flow-item/flow-item.e2e.ts | 12 ++++++------ .../src/components/flow-item/flow-item.tsx | 8 ++++---- .../src/components/list-item/list-item.e2e.ts | 12 ++++++------ .../src/components/list-item/list-item.tsx | 8 ++++---- .../src/components/panel/panel.e2e.ts | 12 ++++++------ .../src/components/panel/panel.tsx | 4 ++-- .../src/components/shell-panel/shell-panel.e2e.ts | 12 ++++++------ .../src/components/shell-panel/shell-panel.tsx | 4 ++-- .../src/components/tree-item/tree-item.e2e.ts | 12 ++++++------ .../src/components/tree-item/tree-item.tsx | 8 ++++---- 24 files changed, 116 insertions(+), 125 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts index 47e1797e0f1..6e532bbdb81 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts @@ -224,19 +224,19 @@ describe("calcite-accordion-item", () => { await page.setContent(html``); const item = await page.find("calcite-accordion-item"); - const expandedSpy = await page.spyOnEvent("calciteAccordionItemExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteAccordionItemCollapsed"); + 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(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); }); diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 7c3a3b77901..e53ac17580f 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -132,10 +132,10 @@ export class AccordionItem extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteAccordionItemCollapsed = createEvent({ cancelable: false }); + calciteAccordionItemCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteAccordionItemExpanded = createEvent({ cancelable: false }); + calciteAccordionItemExpand = createEvent({ cancelable: false }); /** @private */ calciteInternalAccordionItemClose = createEvent({ cancelable: false }); @@ -163,15 +163,11 @@ export class AccordionItem extends LitElement { } override willUpdate(changes: PropertyValues): 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) { if (this.expanded) { - this.calciteAccordionItemExpanded.emit(); + this.calciteAccordionItemExpand.emit(); } else { - this.calciteAccordionItemCollapsed.emit(); + this.calciteAccordionItemCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index febe9a24ca9..7d5efe311f5 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -617,20 +617,20 @@ describe("calcite-action-bar", () => { await page.setContent(html``); const item = await page.find("calcite-action-bar"); - const expandedSpy = await page.spyOnEvent("calciteActionBarExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteActionBarCollapsed"); + 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(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); }); }); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index d471fd13822..1c4531fe86a 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -191,10 +191,10 @@ export class ActionBar extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteActionBarCollapsed = createEvent({ cancelable: false }); + calciteActionBarCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteActionBarExpanded = createEvent({ cancelable: false }); + calciteActionBarExpand = createEvent({ cancelable: false }); /** Fires when the `expanded` property is toggled. */ calciteActionBarToggle = createEvent({ cancelable: false }); @@ -239,9 +239,9 @@ export class ActionBar extends LitElement { if (changes.has("expanded") && this.hasUpdated) { this.expandedHandler(); if (this.expanded) { - this.calciteActionBarExpanded.emit(); + this.calciteActionBarExpand.emit(); } else { - this.calciteActionBarCollapsed.emit(); + this.calciteActionBarCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts index 59ed7f1073c..a253ce2654b 100755 --- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts +++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts @@ -140,19 +140,19 @@ describe("calcite-action-group", () => { await page.setContent(html``); const item = await page.find("calcite-action-group"); - const expandedSpy = await page.spyOnEvent("calciteActionGroupExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteActionGroupCollapsed"); + 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(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); }); diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index f6cb5e81829..adfad7ad98b 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -126,10 +126,10 @@ export class ActionGroup extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteActionGroupCollapsed = createEvent({ cancelable: false }); + calciteActionGroupCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteActionGroupExpanded = createEvent({ cancelable: false }); + calciteActionGroupExpand = createEvent({ cancelable: false }); //#endregion @@ -144,9 +144,9 @@ export class ActionGroup extends LitElement { if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { this.menuOpen = false; - this.calciteActionGroupExpanded.emit(); + this.calciteActionGroupExpand.emit(); } else { - this.calciteActionGroupCollapsed.emit(); + this.calciteActionGroupCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index 1f93cbe0ae3..c02594ef8aa 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts @@ -627,20 +627,20 @@ describe("calcite-action-menu", () => { await page.setContent(html``); const item = await page.find("calcite-action-menu"); - const expandedSpy = await page.spyOnEvent("calciteActionMenuExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteActionMenuCollapsed"); + 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(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 5ff934ef0fe..c6244b2f8c7 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -199,10 +199,10 @@ export class ActionMenu extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteActionMenuCollapsed = createEvent({ cancelable: false }); + calciteActionMenuCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteActionMenuExpanded = createEvent({ cancelable: false }); + calciteActionMenuExpand = createEvent({ cancelable: false }); /** Fires when the `open` property is toggled. */ calciteActionMenuOpen = createEvent({ cancelable: false }); @@ -233,9 +233,9 @@ export class ActionMenu extends LitElement { if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { - this.calciteActionMenuExpanded.emit(); + this.calciteActionMenuExpand.emit(); } else { - this.calciteActionMenuCollapsed.emit(); + this.calciteActionMenuCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts index bd420b64076..b02be0c9239 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts @@ -371,20 +371,20 @@ describe("calcite-action-pad", () => { await page.setContent(html``); const item = await page.find("calcite-action-pad"); - const expandedSpy = await page.spyOnEvent("calciteActionPadExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteActionPadCollapsed"); + const expandSpy = await page.spyOnEvent("calciteActionPadExpand"); + const collapseSpy = await page.spyOnEvent("calciteActionPadCollapse"); item.setProperty("expanded", true); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index f2491337fe7..88821eeb4d4 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -119,10 +119,10 @@ export class ActionPad extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteActionPadCollapsed = createEvent({ cancelable: false }); + calciteActionPadCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteActionPadExpanded = createEvent({ cancelable: false }); + calciteActionPadExpand = createEvent({ cancelable: false }); /** Fires when the `expanded` property is toggled. */ calciteActionPadToggle = createEvent({ cancelable: false }); @@ -163,9 +163,9 @@ export class ActionPad extends LitElement { if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { - this.calciteActionPadExpanded.emit(); + this.calciteActionPadExpand.emit(); } else { - this.calciteActionPadCollapsed.emit(); + this.calciteActionPadCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts index 605c1273c9a..0a3f2b45ed8 100644 --- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts +++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts @@ -266,20 +266,20 @@ describe("calcite-block-section", () => { await page.setContent(html``); const item = await page.find("calcite-block-section"); - const expandedSpy = await page.spyOnEvent("calciteBlockSectionExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteBlockSectionCollapsed"); + const expandSpy = await page.spyOnEvent("calciteBlockSectionExpand"); + const collapseSpy = await page.spyOnEvent("calciteBlockSectionCollapse"); item.setProperty("expanded", true); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 734bf770910..2d5e80e1804 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -116,10 +116,10 @@ export class BlockSection extends LitElement { //#region Events /** Fires when the component's content area is collapsed. */ - calciteBlockSectionCollapsed = createEvent({ cancelable: false }); + calciteBlockSectionCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteBlockSectionExpanded = createEvent({ cancelable: false }); + calciteBlockSectionExpand = createEvent({ cancelable: false }); /** Fires when the header has been clicked. */ calciteBlockSectionToggle = createEvent({ cancelable: false }); @@ -129,16 +129,11 @@ export class BlockSection extends LitElement { //#region Lifecycle override willUpdate(changes: PropertyValues): 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) { if (this.expanded) { - this.calciteBlockSectionExpanded.emit(); + this.calciteBlockSectionExpand.emit(); } else { - this.calciteBlockSectionCollapsed.emit(); + this.calciteBlockSectionCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index 0339b32f15c..e4e823ce2da 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -481,20 +481,20 @@ describe("calcite-block", () => { await page.setContent(html``); const item = await page.find("calcite-block"); - const expandedSpy = await page.spyOnEvent("calciteBlockExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteBlockCollapsed"); + const expandSpy = await page.spyOnEvent("calciteBlockExpand"); + const collapseSpy = await page.spyOnEvent("calciteBlockCollapse"); item.setProperty("expanded", true); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("translation support", () => { diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index a3d06a0a414..0e057c98999 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -230,10 +230,10 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose calciteBlockClose = createEvent({ cancelable: false }); /** Fires when the component's content area is collapsed. */ - calciteBlockCollapsed = createEvent({ cancelable: false }); + calciteBlockCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteBlockExpanded = createEvent({ cancelable: false }); + calciteBlockExpand = createEvent({ cancelable: false }); /** Fires when the component is open and animation is complete. */ calciteBlockOpen = createEvent({ cancelable: false }); @@ -294,9 +294,9 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { - this.calciteBlockExpanded.emit(); + this.calciteBlockExpand.emit(); } else { - this.calciteBlockCollapsed.emit(); + this.calciteBlockCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index 3a004873b34..544feccf9dc 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -428,20 +428,20 @@ describe("calcite-flow-item", () => { await page.setContent(html``); const item = await page.find("calcite-flow-item"); - const expandedSpy = await page.spyOnEvent("calciteFlowItemExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteFlowItemCollapsed"); + const expandSpy = await page.spyOnEvent("calciteFlowItemExpand"); + const collapseSpy = await page.spyOnEvent("calciteFlowItemCollapse"); item.setProperty("collapsed", true); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(0); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(0); + expect(collapseSpy).toHaveReceivedEventTimes(1); item.setProperty("collapsed", false); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 5b2d4cb5ba4..064754503ff 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -189,10 +189,10 @@ export class FlowItem extends LitElement implements InteractiveComponent { calciteFlowItemClose = createEvent({ cancelable: false }); /** Fires when the component's content area is collapsed. */ - calciteFlowItemCollapsed = createEvent({ cancelable: false }); + calciteFlowItemCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteFlowItemExpanded = createEvent({ cancelable: false }); + calciteFlowItemExpand = createEvent({ cancelable: false }); /** Fires when the content is scrolled. */ calciteFlowItemScroll = createEvent({ cancelable: false }); @@ -217,9 +217,9 @@ export class FlowItem extends LitElement implements InteractiveComponent { } if (changes.has("collapsed") && this.hasUpdated) { if (this.collapsed) { - this.calciteFlowItemCollapsed.emit(); + this.calciteFlowItemCollapse.emit(); } else { - this.calciteFlowItemExpanded.emit(); + this.calciteFlowItemExpand.emit(); } } } diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index 49f82a8a565..a120e118168 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -525,20 +525,20 @@ describe("calcite-list-item", () => { await page.setContent(html``); const item = await page.find("calcite-list-item"); - const expandedSpy = await page.spyOnEvent("calciteListItemExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteListItemCollapsed"); + const expandSpy = await page.spyOnEvent("calciteListItemExpand"); + const collapseSpy = await page.spyOnEvent("calciteListItemCollapse"); item.setProperty("expanded", true); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("themed", () => { diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 1d351b1a91b..dd86c10e1d9 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -339,10 +339,10 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab calciteListItemClose = createEvent({ cancelable: false }); /** Fires when the component's content area is collapsed. */ - calciteListItemCollapsed = createEvent({ cancelable: false }); + calciteListItemCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteListItemExpanded = createEvent({ cancelable: false }); + calciteListItemExpand = createEvent({ cancelable: false }); /** Fires when the component is selected. */ calciteListItemSelect = createEvent({ cancelable: false }); @@ -422,9 +422,9 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { this.handleExpandedChange(); - this.calciteListItemExpanded.emit(); + this.calciteListItemExpand.emit(); } else { - this.calciteListItemCollapsed.emit(); + this.calciteListItemCollapse.emit(); } } } diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 7edd630c5ac..f466711f216 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -749,20 +749,20 @@ describe("calcite-panel", () => { await page.setContent(html``); const item = await page.find("calcite-panel"); - const expandedSpy = await page.spyOnEvent("calcitePanelExpanded"); - const collapsedSpy = await page.spyOnEvent("calcitePanelCollapsed"); + const expandSpy = await page.spyOnEvent("calcitePanelExpand"); + const collapseSpy = await page.spyOnEvent("calcitePanelCollapse"); item.setProperty("collapsed", true); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(0); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(0); + expect(collapseSpy).toHaveReceivedEventTimes(1); item.setProperty("collapsed", false); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 6d2602daec1..72723dbac53 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -228,10 +228,10 @@ export class Panel extends LitElement implements InteractiveComponent { calcitePanelClose = createEvent({ cancelable: true }); /** Fires when the component's content area is collapsed. */ - calcitePanelCollapsed = createEvent({ cancelable: false }); + calcitePanelCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calcitePanelExpanded = createEvent({ cancelable: false }); + calcitePanelExpand = createEvent({ cancelable: false }); /** Fires when the content is scrolled. */ calcitePanelScroll = createEvent({ cancelable: false }); diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts index db71a582487..eba1605e203 100644 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts @@ -570,20 +570,20 @@ describe("calcite-shell-panel", () => { await page.setContent(html``); const item = await page.find("calcite-shell-panel"); - const expandedSpy = await page.spyOnEvent("calciteShellPanelExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteShellPanelCollapsed"); + const expandSpy = await page.spyOnEvent("calciteShellPanelExpand"); + const collapseSpy = await page.spyOnEvent("calciteShellPanelCollapse"); item.setProperty("collapsed", true); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(0); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(0); + expect(collapseSpy).toHaveReceivedEventTimes(1); item.setProperty("collapsed", false); await page.waitForChanges(); expect(await item.getProperty("collapsed")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("themed", () => { diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index b05d98e3237..ee2b8cd00ce 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -135,10 +135,10 @@ export class ShellPanel extends LitElement { calciteInternalShellPanelResizeStart = createEvent({ cancelable: false }); /** Fires when the component's content area is collapsed. */ - calciteShellPanelCollapsed = createEvent({ cancelable: false }); + calciteShellPanelCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteShellPanelExpanded = createEvent({ cancelable: false }); + calciteShellPanelExpand = createEvent({ cancelable: false }); //#endregion diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index 1016934db5a..22630b4555a 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts @@ -434,20 +434,20 @@ describe("calcite-tree-item", () => { await page.setContent(html``); const item = await page.find("calcite-tree-item"); - const expandedSpy = await page.spyOnEvent("calciteTreeItemExpanded"); - const collapsedSpy = await page.spyOnEvent("calciteTreeItemCollapsed"); + const expandSpy = await page.spyOnEvent("calciteTreeItemExpand"); + const collapseSpy = await page.spyOnEvent("calciteTreeItemCollapse"); item.setProperty("expanded", true); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(true); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(0); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(0); item.setProperty("expanded", false); await page.waitForChanges(); expect(await item.getProperty("expanded")).toBe(false); - expect(expandedSpy).toHaveReceivedEventTimes(1); - expect(collapsedSpy).toHaveReceivedEventTimes(1); + expect(expandSpy).toHaveReceivedEventTimes(1); + expect(collapseSpy).toHaveReceivedEventTimes(1); }); describe("themed", () => { diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 0ee7af31d6c..f2c1e6214aa 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -124,10 +124,10 @@ export class TreeItem extends LitElement implements InteractiveComponent { calciteInternalTreeItemSelect = createEvent({ cancelable: false }); /** Fires when the component's content area is collapsed. */ - calciteTreeItemCollapsed = createEvent({ cancelable: false }); + calciteTreeItemCollapse = createEvent({ cancelable: false }); /** Fires when the component's content area is expanded. */ - calciteTreeItemExpanded = createEvent({ cancelable: false }); + calciteTreeItemExpand = createEvent({ cancelable: false }); //#endregion @@ -156,9 +156,9 @@ export class TreeItem extends LitElement implements InteractiveComponent { if (changes.has("expanded") && this.hasUpdated) { if (this.expanded) { this.updateChildTree(); - this.calciteTreeItemExpanded.emit(); + this.calciteTreeItemExpand.emit(); } else { - this.calciteTreeItemCollapsed.emit(); + this.calciteTreeItemCollapse.emit(); } } From a9429887311efac85d97102506f30295f26d475d Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 28 Jul 2025 15:15:39 -0700 Subject: [PATCH 5/8] continued --- packages/calcite-components/src/components/panel/panel.tsx | 4 ++-- .../src/components/shell-panel/shell-panel.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 72723dbac53..65b0d22bdab 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -252,9 +252,9 @@ export class Panel extends LitElement implements InteractiveComponent { override willUpdate(changes: PropertyValues): void { if (changes.has("collapsed") && this.hasUpdated) { if (this.collapsed) { - this.calcitePanelCollapsed.emit(); + this.calcitePanelCollapse.emit(); } else { - this.calcitePanelExpanded.emit(); + this.calcitePanelExpand.emit(); } } } diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index ee2b8cd00ce..bc8e8966acd 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -154,9 +154,9 @@ export class ShellPanel extends LitElement { } if (changes.has("collapsed") && this.hasUpdated) { if (this.collapsed) { - this.calciteShellPanelCollapsed.emit(); + this.calciteShellPanelCollapse.emit(); } else { - this.calciteShellPanelExpanded.emit(); + this.calciteShellPanelExpand.emit(); } } } From 0729170ebf508009d4ca1e34f2a70cbf461e95f2 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 30 Jul 2025 16:51:19 -0700 Subject: [PATCH 6/8] clean up docs --- .../src/components/accordion-item/accordion-item.tsx | 2 +- .../calcite-components/src/components/action-bar/action-bar.tsx | 2 +- .../src/components/action-group/action-group.tsx | 2 +- .../src/components/action-menu/action-menu.tsx | 2 +- .../calcite-components/src/components/action-pad/action-pad.tsx | 2 +- .../src/components/block-section/block-section.tsx | 2 +- packages/calcite-components/src/components/block/block.tsx | 2 +- .../calcite-components/src/components/list-item/list-item.tsx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index e53ac17580f..68f710da9c8 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -63,7 +63,7 @@ export class AccordionItem extends LitElement { /** Specifies a description for the component. */ @property() description: string; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Specifies heading text for the component. */ diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 1c4531fe86a..35bdeb94536 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/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 to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Specifies the layout direction of the actions. */ diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index adfad7ad98b..42453b97109 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -66,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 to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Accessible name for the component. */ diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index c6244b2f8c7..eb54395af0c 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -136,7 +136,7 @@ export class ActionMenu extends LitElement { /** Specifies the appearance of the component. */ @property({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid"; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. */ diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 88821eeb4d4..177ea0b4235 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -71,7 +71,7 @@ export class ActionPad extends LitElement { /** When `true`, the expand-toggling behavior is disabled. */ @property({ reflect: true }) expandDisabled = false; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Indicates the layout of the component. */ diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 2d5e80e1804..2c7124c5694 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -41,7 +41,7 @@ export class BlockSection extends LitElement { //#region Public Properties - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** Specifies an icon to display at the end of the component. */ diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 0e057c98999..b2edcebc574 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -102,7 +102,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose */ @property({ reflect: true }) dragHandle = false; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index dd86c10e1d9..4b1472e85dc 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -136,7 +136,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab */ @property({ reflect: true }) dragHandle = false; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** From 45365eee3aa59af43d36d61845120b0695e88cd3 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 31 Jul 2025 11:42:06 -0700 Subject: [PATCH 7/8] tree-item doc --- .../calcite-components/src/components/tree-item/tree-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index f2c1e6214aa..1f478afb1f7 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -77,7 +77,7 @@ export class TreeItem extends LitElement implements InteractiveComponent { /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @property({ reflect: true }) disabled = false; - /** When `true`, the component is expanded to show child components. */ + /** When `true`, expands the component and its contents. */ @property({ reflect: true }) expanded = false; /** @private */ From e31c3cab8d704d78ee7014f106b3af6c7a17b79d Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 31 Jul 2025 11:55:47 -0700 Subject: [PATCH 8/8] cleanup willUpdate logic --- .../src/components/action-group/action-group.tsx | 14 +++++++++----- .../src/components/tree-item/tree-item.tsx | 14 +++++++++----- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 42453b97109..af1de488bc9 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -141,12 +141,16 @@ export class ActionGroup extends LitElement { 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) { - if (this.expanded) { + if (changes.has("expanded")) { + if (this.hasUpdated || this.expanded !== false) { this.menuOpen = false; - this.calciteActionGroupExpand.emit(); - } else { - this.calciteActionGroupCollapse.emit(); + } + if (this.hasUpdated) { + if (this.expanded) { + this.calciteActionGroupExpand.emit(); + } else { + this.calciteActionGroupCollapse.emit(); + } } } } diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 1f478afb1f7..ae06db6639b 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -153,12 +153,16 @@ export class TreeItem extends LitElement implements InteractiveComponent { 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) { - if (this.expanded) { + if (changes.has("expanded")) { + if (this.hasUpdated || this.expanded !== false) { this.updateChildTree(); - this.calciteTreeItemExpand.emit(); - } else { - this.calciteTreeItemCollapse.emit(); + } + if (this.hasUpdated) { + if (this.expanded) { + this.calciteTreeItemExpand.emit(); + } else { + this.calciteTreeItemCollapse.emit(); + } } }