@ui5/webcomponents 2.7.3 → 2.8.0-rc.1

package/cypress/specs/Input.cy.tsx

@@ -126,3 +126,412 @@ describe("Input Tests", () => {
 			.should("not.have.attr", "tabindex", "0");
 	});
 });
+
+describe("Input general interaction", () => {
+	it("handles suggestions selection cancel with ESC", () => {
+		cy.mount(
+			<Input id="myInputEsc" show-suggestions class="input3auto">
+				<SuggestionItem text="Chromium"></SuggestionItem>
+				<SuggestionItem text="Titanium"></SuggestionItem>
+				<SuggestionItem text="Iron"></SuggestionItem>
+				<SuggestionItem text="Gold"></SuggestionItem>
+				<SuggestionItem text="Silver"></SuggestionItem>
+			</Input>
+		);
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("popover");
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("C");
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("@input")
+			.should("have.attr", "value", "Titanium");
+
+		cy.get("@input")
+			.realPress("Escape");
+
+		cy.get("@input")
+			.should("have.value", "C");
+	});
+
+	it("tests selection-change with custom items", () => {
+		cy.mount(
+			<Input id="myInput2" showSuggestions class="input3auto">
+			  <SuggestionItem text="Cozy" />
+			  <SuggestionItem text="Compact" />
+			  <SuggestionItem text="Condensed" />
+			  <SuggestionItem text="Compact" />
+			  <SuggestionItem text="Condensed" />
+			</Input>
+		  );
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("popover");
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("c");
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("@input")
+			.should("have.value", "Compact")
+			.should("not.have.attr", "focused");
+
+		cy.get("ui5-suggestion-item")
+			.eq(1)
+			.should("have.attr", "focused");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("ui5-suggestion-item")
+			.eq(2)
+			.should("have.attr", "focused");
+
+		cy.get("ui5-suggestion-item")
+			.eq(1)
+			.should("not.have.attr", "focused");
+	});
+});
+
+describe("Input arrow navigation", () => {
+	it("Value state header and group headers should be included in the arrow navigation", () => {
+		cy.mount(
+			<Input id="inputError" class="input2auto" showSuggestions valueState="Negative" placeholder="Search for a country ...">
+				<div slot="valueStateMessage">
+					Custom error value state message with a <a href="#">Link</a>.
+				</div>
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+			</Input>
+		);
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.realClick()
+			.realType("a")
+			.realPress("ArrowDown");
+
+		cy.get("@input")
+			.should("not.have.attr", "focused");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("ui5-responsive-popover");
+
+		cy.get("@ui5-responsive-popover")
+			.find("div")
+			.as("valueMessage")
+			.should("have.class", "ui5-responsive-popover-header--focused");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("@valueMessage")
+			.should("not.have.class", "ui5-responsive-popover-header--focused");
+
+		cy.get("ui5-suggestion-item")
+			.eq(0)
+			.should("have.attr", "focused");
+	});
+
+	it("Should navigate up and down through the suggestions popover with arrow keys", () => {
+		cy.mount(
+			<Input id="myInput2" showSuggestions class="input3auto">
+			  <SuggestionItem text="Cozy" />
+			  <SuggestionItem text="Compact" />
+			  <SuggestionItem text="Condensed" />
+			  <SuggestionItem text="Compact" />
+			  <SuggestionItem text="Condensed" />
+			</Input>
+		  );
+
+		cy.get("#myInput2")
+			.as("input");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("popover");
+
+		cy.get("@input").realClick();
+		cy.get("@input").realType("c");
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+
+		cy.get("@input").realPress("ArrowDown");
+
+		cy.get("ui5-suggestion-item").eq(1).should("have.attr", "text", "Compact");
+		cy.get("@input").should("not.have.attr", "focused");
+		cy.get("ui5-suggestion-item").eq(1).should("have.attr", "focused");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("ui5-suggestion-item").eq(2).should("have.attr", "focused");
+		cy.get("ui5-suggestion-item").eq(1).should("not.have.attr", "focused");
+
+		cy.get("@input")
+			.realPress("ArrowUp");
+
+		cy.get("ui5-suggestion-item").eq(1).should("have.attr", "focused");
+		cy.get("ui5-suggestion-item").eq(2).should("not.have.attr", "focused");
+
+		cy.get("@input").realPress("ArrowUp");
+		cy.get("@input").realPress("ArrowUp");
+
+		cy.get("@input").should("have.attr", "focused");
+		cy.get("ui5-suggestion-item").first().should("not.have.attr", "focused");
+	});
+});
+
+describe("Input PAGEUP/PAGEDOWN navigation", () => {
+	beforeEach(() => {
+		cy.mount(
+			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
+			  <SuggestionItemGroup headerText="A">
+					<SuggestionItem text="Afghanistan" />
+					<SuggestionItem text="Argentina" />
+					<SuggestionItem text="Albania" />
+					<SuggestionItem text="Armenia" />
+					<SuggestionItem text="Algeria" />
+					<SuggestionItem text="Andorra" />
+					<SuggestionItem text="Angola" />
+					<SuggestionItem text="Austria" />
+					<SuggestionItem text="Australia" />
+					<SuggestionItem text="Azerbaijan" />
+					<SuggestionItem text="Aruba" />
+					<SuggestionItem text="Antigua and Barbuda" />
+			  </SuggestionItemGroup>
+			</Input>
+		  );
+	});
+	it("Should focus the tenth item from the suggestions popover with PAGEDOWN", () => {
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("a");
+
+		cy.get("@input")
+			.realPress("ArrowDown");
+
+		cy.get("@input")
+			.realPress("PageDown");
+
+		cy.get("ui5-suggestion-item")
+			.eq(11)
+			.should("have.attr", "text", "Antigua and Barbuda");
+
+		cy.get("ui5-suggestion-item")
+			.eq(11)
+			.should("have.attr", "focused");
+	});
+
+	it("Should focus the -10 item/group header from the suggestions popover with PAGEUP", () => {
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("a");
+
+		cy.get("@input")
+			.realPress("ArrowUp");
+
+		cy.get("ui5-suggestion-item-group")
+			.eq(0)
+			.should("have.attr", "focused");
+
+		cy.get("@input")
+			.realPress("PageDown");
+
+		cy.get("@input")
+			.realPress("PageUp");
+
+		cy.get("ui5-suggestion-item-group")
+			.eq(0)
+			.should("have.attr", "focused");
+	});
+});
+
+describe("Selection-change event", () => {
+	it("Selection-change event fires with null arguments when suggestion was selected but user alters input value to something else", () => {
+		cy.mount(
+			<Input id="input-selection-change" showSuggestions>
+			  <SuggestionItem text="Cozy" />
+			  <SuggestionItem text="Compact" />
+			  <SuggestionItem text="Condensed" />
+			</Input>
+		  );
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("ui5-input")
+			.shadow()
+			.find("input")
+			.as("innerInput");
+
+		let eventCount = 0;
+
+		cy.get("@input").then($input => {
+			$input[0].addEventListener("ui5-selection-change", () => {
+				eventCount++;
+			});
+		});
+
+		cy.get("@innerInput")
+			.realClick();
+		cy.get("@innerInput")
+			.type("C");
+		cy.get("@innerInput")
+			.realPress("ArrowDown");
+		cy.get("@innerInput")
+			.realPress("Enter");
+
+		cy.get("@innerInput")
+			.should("have.value", "Compact");
+
+		cy.get("@innerInput")
+			.realClick();
+		cy.get("@innerInput")
+			.clear();
+		cy.get("@innerInput")
+			.type("N");
+		cy.get("@innerInput")
+			.realPress("Enter");
+
+		cy.get("@innerInput")
+			.should("have.value", "N");
+
+		cy.then(() => {
+			expect(eventCount).to.equal(2);
+		});
+	});
+});
+
+describe("Change event behavior when selecting the same suggestion item", () => {
+	let changeCount = 0;
+
+	beforeEach(() => {
+		cy.mount(
+			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
+			  <SuggestionItemGroup headerText="A">
+					<SuggestionItem text="Afghanistan" />
+					<SuggestionItem text="Argentina" />
+					<SuggestionItem text="Albania" />
+					<SuggestionItem text="Armenia" />
+					<SuggestionItem text="Algeria" />
+			  </SuggestionItemGroup>
+			</Input>
+		  );
+
+		cy.get("#myInput")
+			.as("input");
+
+		cy.get("@input").then($el => {
+			$el[0].addEventListener("change", () => {
+				changeCount++;
+			});
+		});
+	});
+
+	it("Change event is not fired when the same suggestion item is selected (with typeahead)", () => {
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("a");
+
+		cy.get("@input").realPress("Enter");
+		cy.get("@input").should("have.value", "Afghanistan");
+
+		cy.get("@input").realPress("Backspace");
+		cy.get("@input").realPress("ArrowDown");
+		cy.get("@input").realPress("ArrowDown");
+		cy.get("@input").realPress("Enter");
+
+		cy.get("@input").should("have.value", "Afghanistan");
+		cy.then(() => {
+			expect(changeCount).to.equal(1);
+		});
+	});
+
+	it("Change event is not fired when the same suggestion item is selected (no-typeahead)", () => {
+		cy.get("@input").invoke("attr", "value", "Afghanistan");
+		cy.get("@input").invoke("attr", "no-typeahead", true);
+
+		cy.get("@input").realPress("Backspace");
+
+		cy.get("@input").realPress("ArrowDown");
+		cy.get("@input").realPress("ArrowDown");
+		cy.get("@input").realPress("Enter");
+
+		cy.get("@input").should("have.value", "Afghanistan");
+		cy.then(() => {
+			expect(changeCount).to.equal(1);
+		});
+	});
+
+	it("Change event is not fired when the same suggestion item is selected after focus out and selecting suggestion again", () => {
+		cy.get("@input")
+			.invoke("attr", "value", "Afghanistan");
+
+		cy.get("@input")
+			.realPress("Tab");
+
+		cy.get("@input")
+			.realClick();
+		cy.get("@input")
+			.realPress("ArrowDown");
+		cy.get("@input")
+			.realPress("ArrowDown");
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@input").should("have.value", "Afghanistan");
+		cy.then(() => {
+			expect(changeCount).to.equal(1);
+		});
+	});
+});

package/cypress/specs/Link.cy.tsx

@@ -1,5 +1,21 @@
 import Link from "../../src/Link.js";
 
+describe("Main functionality", () => {
+	it("clicking the link works", () => {
+		cy.mount(<Link href="#test">Click me</Link>);
+
+		cy.url().should("not.include", "#test");
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find("a")
+			.as("link")
+			.realClick();
+
+		cy.url().should("include", "#test");
+	});
+});
+
 describe("Accessibility", () => {
 	it("setting accessible-description is applied to button tag", () => {
 		cy.mount(<Link accessibleDescription="A long description."></Link>);

package/cypress/specs/MultiInput.cy.tsx

@@ -1,5 +1,6 @@
 import SuggestionItem from "../../src/SuggestionItem.js";
 import MultiInput from "../../src/MultiInput.js";
+import "../../src/Token.js";
 
 describe("MultiInput Web Component", () => {
 	it("creates only one token when typing 'ad' and pressing Enter", () => {

package/cypress/specs/Table.cy.tsx

@@ -4,11 +4,13 @@ import TableCell from "../../src/TableCell.js";
 import TableRow from "../../src/TableRow.js";
 import TableSelection from "../../src/TableSelection.js";
 import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableHeaderCellActionAI from "../../src/TableHeaderCellActionAI.js";
 import Label from "../../src/Label.js";
 import Input from "../../src/Input.js";
 import Bar from "../../src/Bar.js";
 import Title from "../../src/Title.js";
 import Slider from "../../src/Slider.js";
+import Button from "../../src/Button.js";
 
 // Porting Table.spec.js (wdio tests) to cypress tests
 const ROLE_COLUMN_HEADER = "columnheader";
@@ -32,6 +34,7 @@ describe("Table - Rendering", () => {
 		cy.get("ui5-table-header-row").should("exist");
 		cy.get("ui5-table-row").should("exist");
 		cy.get("ui5-table-header-cell").should("have.length", 2);
+		cy.get("ui5-table-header-row").should("have.attr", "aria-roledescription", "Column Header Row");
 	});
 
 	it("tests if initial empty table renders without errors", () => {
@@ -663,3 +666,172 @@ describe("Table - Navigated Rows", () => {
 			});
 	});
 });
+
+describe("Table - Interactive Rows", () => {
+	it("fires the row-click event", () => {
+		cy.mount(
+			<Table id="table1">
+				<TableSelection id="selection" selected="1 2" slot="features"></TableSelection>
+				<TableHeaderRow id="headerRow" slot="headerRow">
+					<TableHeaderCell>ColumnA</TableHeaderCell>
+					<TableHeaderCell>ColumnB</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow id="row1" rowKey="1">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Button>Cell B</Button></TableCell>
+				</TableRow>
+				<TableRow id="row2" rowKey="2" interactive={true}>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Button>Cell B</Button></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("#table1").invoke("on", "row-click", cy.stub().as("rowClickHandler"));
+		cy.get("#row1").realClick();
+		cy.get("@rowClickHandler").should("not.have.been.called");
+		cy.get("#row1").realPress("Enter");
+		cy.get("@rowClickHandler").should("not.have.been.called");
+
+		cy.get("#row2").realClick();
+		cy.get("@rowClickHandler").invoke("getCall", 0).its("args.0.detail.row").as("clickedRow");
+		cy.get("@clickedRow").should("have.attr", "id", "row2");
+		cy.get("#row2").realPress("Enter");
+		cy.get("@rowClickHandler").should("have.been.calledTwice");
+
+		cy.get("#row2").find("ui5-label").realClick();
+		cy.get("@rowClickHandler").should("have.been.calledThrice");
+
+		cy.get("#row2").find("ui5-button").as("row2button");
+		cy.get("@row2button").invoke("on", "click", cy.stub().as("buttonClickHandler"));
+		cy.get("@row2button").realClick();
+		cy.get("@buttonClickHandler").should("have.been.calledOnce");
+		cy.get("@rowClickHandler").should("have.been.calledThrice");
+
+		cy.get("@row2button").realPress("Enter");
+		cy.get("@buttonClickHandler").should("have.been.calledTwice");
+		cy.get("@rowClickHandler").should("have.been.calledThrice");
+
+		cy.get("@row2button").realPress("Space");
+		cy.get("@buttonClickHandler").should("have.been.calledThrice");
+		cy.get("@rowClickHandler").should("have.been.calledThrice");
+
+		// move the following tests to the TableSelection.cy.tsx
+		cy.get("#headerRow").shadow().find("#selection-cell").as("headerRowSelectionCell");
+		cy.get("@headerRowSelectionCell").find("#selection-component").as("headerRowCheckBox");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#table1").then($table => {
+			$table.append(
+				`<ui5-table-row id="row3" row-key="3">
+					<ui5-table-cell>Cell A</ui5-table-cell>
+					<ui5-table-cell>Cell B</ui5-table-cell>
+				</ui5-table-row>`
+			);
+		});
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+		cy.get("#row3").invoke("remove");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#row2").invoke("remove");
+		cy.get("#row1").invoke("remove");
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+	});
+});
+
+describe("Table - HeaderCell", () => {
+	beforeEach(() => {
+		cy.mount(
+			<Table overflow-mode="Popin">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell min-width="300px">Column A</TableHeaderCell>
+					<TableHeaderCell min-width="200px" sort-indicator="Ascending">
+						<Label required wrappingType="None">Column B</Label>
+						<TableHeaderCellActionAI slot="action"></TableHeaderCellActionAI>
+					</TableHeaderCell>
+					<TableHeaderCell min-width="150px" popin-text="Popin Text">
+						<Label required>Column C</Label>
+					</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell>Cell A</TableCell>
+					<TableCell>Cell B</TableCell>
+					<TableCell>Cell C</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell>Cell A</TableCell>
+					<TableCell>Cell B</TableCell>
+					<TableCell>Cell C</TableCell>
+				</TableRow>
+			</Table>
+		);
+		cy.get("[ui5-table]").as("table").children("ui5-table-row").as("rows");
+		cy.get("@table").children("ui5-table-header-row").first().as("headerRow");
+		cy.get("@headerRow").get("ui5-table-header-cell").each(($headerCell, index) => {
+			cy.wrap($headerCell).as(`headerCell${index + 1}`);
+		});
+		cy.get("@rows").each(($row, index) => {
+			cy.wrap($row).as(`row${index + 1}`);
+		});
+	});
+
+	it("should render header-cell correctly", () => {
+		cy.get("@headerCell1").contains("Column A");
+		cy.get("@headerCell2").should("have.attr", "aria-sort", "ascending");
+		cy.get("@headerCell2").find("ui5-table-header-cell-action-ai").as("actionB");
+		cy.get("@actionB").shadow().find("ui5-button").as("actionBbutton");
+		cy.get("@actionBbutton").should("have.attr", "icon", "ai");
+		cy.get("@actionBbutton").should("have.attr", "tooltip", "Generated by AI");
+		cy.get("@actionB").invoke("on", "click", cy.stub().as("actionBclick"));
+		cy.get("@actionBbutton").realClick();
+		cy.get("@actionBclick").should("have.been.calledOnce");
+		cy.get("@headerCell2").shadow().find("ui5-icon").as("actionBicon");
+		cy.get("@actionBicon").should("have.attr", "name", "sort-ascending");
+
+		cy.get("@headerCell2").invoke("attr", "sort-indicator", "Descending");
+		cy.get("@headerCell2").shadow().find("ui5-icon").should("have.attr", "name", "sort-descending");
+		cy.get("@actionBicon").should("have.attr", "name", "sort-descending");
+		cy.get("@headerCell2").should("have.attr", "aria-sort", "descending");
+
+		cy.get("@headerCell2").invoke("attr", "sort-indicator", "None");
+		cy.get("@headerCell2").shadow().find("ui5-icon").should("not.exist");
+		cy.get("@headerCell2").should("not.have.attr", "aria-sort");
+
+		cy.get("@table").invoke("css", "width", "250px");
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(50);
+
+		cy.get("@row1").find("ui5-table-cell[_popin]").as("row1popins");
+		cy.get("@row1popins").first().as("row1popinB");
+		cy.get("@row1popinB").shadow().find("ui5-table-header-cell-action-ai").as("row1popinBaction");
+		cy.get("@row1popinBaction").shadow().find("ui5-button").as("row1popinBbutton");
+		cy.get("@row1popinBbutton").should("have.attr", "icon", "ai");
+		cy.get("@row1popinBbutton").should("have.attr", "design", "Transparent");
+		cy.get("@row1popinBbutton").should("have.attr", "tooltip", "Generated by AI");
+		cy.get("@row1popinBbutton").realClick();
+		cy.get("@actionBclick").invoke("getCall", 1).its("args.0.detail.targetRef").as("actionBclickTarget");
+		cy.get("@actionBclickTarget").should("have.attr", "icon", "ai");
+		cy.get("@actionBclickTarget").should("have.attr", "design", "Transparent");
+		cy.get("@actionBclickTarget").should("have.attr", "tooltip", "Generated by AI");
+
+		cy.get("@row1popinB").shadow().find("ui5-label").as("row1popinBlabel");
+		cy.get("@row1popinBlabel").contains("Column B");
+		cy.get("@row1popinBlabel").should("have.attr", "wrapping-type", "None");
+		cy.get("@row1popinBlabel").should("have.attr", "required");
+
+		cy.get("@row1popins").last().as("row1popinC");
+		cy.get("@row1popinC").shadow().find("ui5-label").should("not.exist");
+		cy.get("@row1popinC").shadow().should("have.text", "Popin Text:");
+		cy.get("@row1popinC").should("have.text", "Cell C");
+
+		cy.get("@row2").find("ui5-table-cell[_popin]").as("row2popins");
+		cy.get("@row2popins").first().as("row2popinB");
+		cy.get("@row2popinB").shadow().find("ui5-table-header-cell-action-ai").as("row2popinBaction");
+		cy.get("@row2popinBaction").shadow().find("ui5-button").as("row2popinBbutton");
+		cy.get("@row2popinBbutton").should("have.attr", "icon", "ai");
+		cy.get("@row2popinBbutton").should("have.attr", "tooltip", "Generated by AI");
+		cy.get("@row2popinBbutton").realClick();
+		cy.get("@actionBclick").invoke("getCall", 2).its("args.0.detail.targetRef").as("actionBclickTarget");
+		cy.get("@actionBclickTarget").should("have.attr", "icon", "ai");
+		cy.get("@actionBclickTarget").should("have.attr", "design", "Transparent");
+		cy.get("@actionBclickTarget").should("have.attr", "tooltip", "Generated by AI");
+	});
+});

package/cypress/support/commands/Calendar.commands.ts

@@ -0,0 +1,15 @@
+Cypress.Commands.add("ui5CalendarGetDay", (calendarSelector, timestamp) => {
+	return cy.get(calendarSelector)
+		.shadow()
+		.find("[ui5-daypicker]")
+		.shadow()
+		.find(`div[data-sap-timestamp=${timestamp}]`);
+});
+
+Cypress.Commands.add("ui5CalendarGetMonth", (calendarSelector, timestamp) => {
+	return cy.get(calendarSelector)
+		.shadow()
+		.find("[ui5-monthpicker]")
+		.shadow()
+		.find(`div[data-sap-timestamp=${timestamp}]`);
+});

package/cypress/support/commands.ts

@@ -37,9 +37,12 @@
 // }
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import "./commands/Menu.commands.js";
-import "./commands/ColorPicker.commands.js";
+
+// Please keep this list in alphabetical order
+import "./commands/Calendar.commands.js";
 import "./commands/ColorPalette.commands.js";
+import "./commands/ColorPicker.commands.js";
+import "./commands/Menu.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -52,6 +55,8 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5CalendarGetDay(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
+			ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
 			ui5ColorPickerToggleColorMode(): Chainable<void>
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>