@ui5/webcomponents-compat 0.0.0-da0d3eb88 → 0.0.0-ebd9a4db3

package/cypress/specs/Table.cy.tsx

@@ -0,0 +1,155 @@
+import Label from "@ui5/webcomponents/dist/Label.js";
+import Table from "../../src/Table.js";
+import TableCell from "../../src/TableCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableColumn from "../../src/TableColumn.js";
+
+describe("Table", () => {
+	it("tests doesn't fire loadMore with ArrowDown on last row", () => {
+		cy.mount(
+			<Table>
+				<TableColumn slot="columns" minWidth={350}>
+					<Label>Product</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
+					<Label>Supplier</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
+					<Label>Dimensions</Label>
+				</TableColumn>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>10x20x30</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>15x25x35</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow id="row-3">
+					<TableCell>
+						<Label>Product 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>20x30x40</Label>
+					</TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("[ui5-table]")
+			.then(table => table.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+		cy.get("#row-3")
+			.shadow()
+			.find(".ui5-table-row-root")
+			.as("lastRow")
+
+		cy.get("@lastRow")
+			.realClick();
+
+		cy.get("@lastRow")
+			.should("be.focused");
+
+		cy.get("@lastRow")
+			.realPress("ArrowDown");
+			
+		cy.get("@loadMore")
+			.should("not.have.been.calledOnce");
+	});
+
+	it("tests fire loadMore with ArrowDown on last row", () => {
+		cy.mount(
+			<Table growing="Scroll">
+				<TableColumn slot="columns" minWidth={350}>
+					<Label>Product</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
+					<Label>Supplier</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
+					<Label>Dimensions</Label>
+				</TableColumn>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>10x20x30</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>15x25x35</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow id="row-3">
+					<TableCell>
+						<Label>Product 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>20x30x40</Label>
+					</TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("[ui5-table]")
+			.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+		cy.get("#row-3")
+			.shadow()
+			.find(".ui5-table-row-root")
+			.as("lastRow")
+
+		cy.get("@lastRow")
+			.realClick();
+
+		cy.get("@lastRow")
+			.should("be.focused");
+
+		cy.get("@lastRow")
+			.realPress("ArrowDown");
+			
+		cy.get("@loadMore")
+			.should("have.been.calledOnce");
+	});
+});

package/cypress/support/commands.ts

@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "@ui5/cypress-internal/commands.js";
+import "../../../main/cypress/support/commands.js";

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package/cypress/tsconfig.json

@@ -0,0 +1,47 @@
+{
+	"include": [
+		"./**/*"
+	],
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
+		"types": [
+			"cypress",
+			"cypress-real-events",
+			"cypress-axe",
+		],
+		"paths": {
+			"@ui5/webcomponents-base/dist/*": [
+				"../../base/src/*"
+			],
+			"@ui5/webcomponents/dist/*": [
+				"../../main/src/*"
+			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../../localization/src/*"
+			],
+			"@ui5/webcomponents-theming/dist/*": [
+				"../../theming/src/*"
+			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../../icons-tnt/src/*"
+			]
+		},
+	},
+	"references": [
+		{
+			"path": "../"
+		},
+		{
+			"path": "../../main/cypress"
+		}
+	]
+}

package/cypress.config.js

@@ -0,0 +1,3 @@
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
+
+export default cypressConfig;

package/dist/Table.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -13,13 +14,13 @@ import TableMode from "./types/TableMode.js";
  * Interface for components that may be slotted inside a `ui5-table` as rows
  * @public
  */
-interface ITableRow extends HTMLElement, ITabbable {
+interface ITableRow extends UI5Element, ITabbable {
     mode: `${TableMode}`;
     selected: boolean;
     forcedBusy: boolean;
-    forcedAriaPosition: string;
+    forcedAriaPosition?: string;
     _columnsInfoString: string;
-    _columnsInfo: Array<TableColumnInfo>;
+    _columnsInfo?: Array<TableColumnInfo>;
     tabbableElements: Array<HTMLElement>;
 }
 type TableColumnInfo = {
@@ -109,12 +110,18 @@ declare enum TableFocusTargetElement {
  * @public
  */
 declare class Table extends UI5Element {
+    eventDetails: {
+        "row-click": TableRowClickEventDetail;
+        "popin-change": TablePopinChangeEventDetail;
+        "load-more": void;
+        "selection-change": TableSelectionChangeEventDetail;
+    };
     /**
      * Defines the text that will be displayed when there is no data and `hideNoData` is not present.
-     * @default ""
+     * @default undefined
      * @public
      */
-    noDataText: string;
+    noDataText?: string;
     /**
      * Defines the text that will be displayed inside the growing button at the bottom of the table,
      * meant for loading more rows upon press.
@@ -122,20 +129,20 @@ declare class Table extends UI5Element {
      * **Note:** If not specified a built-in text will be displayed.
      *
      * **Note:** This property takes effect if `growing` is set to `Button`.
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    growingButtonText: string;
+    growingButtonText?: string;
     /**
      * Defines the subtext that will be displayed under the `growingButtonText`.
      *
      * **Note:** This property takes effect if `growing` is set to `Button`.
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    growingButtonSubtext: string;
+    growingButtonSubtext?: string;
     /**
      * Defines if the value of `noDataText` will be diplayed when there is no rows present in the table.
      * @default false
@@ -215,12 +222,12 @@ declare class Table extends UI5Element {
     accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 2.0.0
      */
-    accessibleNameRef: string;
-    _hiddenColumns: Array<TableColumnInfo>;
+    accessibleNameRef?: string;
+    _hiddenColumns?: Array<TableColumnInfo>;
     _noDataDisplayed: boolean;
     /**
      * Defines the active state of the `More` button.
@@ -232,11 +239,6 @@ declare class Table extends UI5Element {
      * @private
      */
     _columnHeader: TableColumnHeaderInfo;
-    /**
-     * Defines if the entire table is in view port.
-     * @private
-     */
-    _inViewport: boolean;
     /**
      * Defines whether all rows are selected or not when table is in MultiSelect mode.
      * @default false
@@ -258,12 +260,10 @@ declare class Table extends UI5Element {
      * @public
      */
     columns: Array<TableColumn>;
-    static onDefine(): Promise<void>;
     static i18nBundle: I18nBundle;
     fnHandleF7: (e: CustomEvent) => void;
     fnOnRowFocused: (e: CustomEvent) => void;
     _handleResize: ResizeObserverCallback;
-    moreDataText?: string;
     tableEndObserved: boolean;
     visibleColumns: Array<TableColumn>;
     visibleColumnsCount?: number;
@@ -291,7 +291,7 @@ declare class Table extends UI5Element {
      * Switches focus between column header, last focused item, and "More" button (if applicable).
      * @private
      */
-    _handleArrowAlt(e: KeyboardEvent): void;
+    _handleArrowAlt(e: KeyboardEvent): void | Promise<void>;
     /**
      * Determines the type of the currently focused element.
      * @private
@@ -311,11 +311,13 @@ declare class Table extends UI5Element {
     _getAfterForwardElement(): HTMLElement;
     _getBeforeForwardElement(): HTMLElement;
     onRowFocused(e: CustomEvent): void;
+    onRowKeyDown(e: KeyboardEvent): void;
     _onColumnHeaderFocused(): void;
     _onColumnHeaderClick(e: MouseEvent | KeyboardEvent): void;
     _onColumnHeaderKeydown(e: KeyboardEvent): void;
     _onLoadMoreKeydown(e: KeyboardEvent): void;
     _onLoadMoreKeyup(e: KeyboardEvent): void;
+    onInvalidation(change: ChangeInfo): void;
     _onLoadMoreClick(): void;
     observeTableEnd(): void;
     onInteresection(entries: Array<IntersectionObserverEntry>): void;
@@ -328,18 +330,12 @@ declare class Table extends UI5Element {
     get columnHeader(): HTMLElement | null;
     get morеBtn(): HTMLElement | null;
     handleResize(): void;
-    checkTableInViewport(): void;
     popinContent(): void;
     /**
      * Gets settings to be propagated from columns to rows.
      */
     getColumnPropagationSettings(): Array<TableColumnInfo>;
     getIntersectionObserver(): IntersectionObserver;
-    get styles(): {
-        busy: {
-            position: string;
-        };
-    };
     get growsWithButton(): boolean;
     get growsOnScroll(): boolean;
     get _growingButtonText(): string;
@@ -348,7 +344,6 @@ declare class Table extends UI5Element {
     get ariaLabelSelectAllText(): string;
     get loadMoreAriaLabelledBy(): string;
     get tableEndDOM(): Element;
-    get busyIndPosition(): string;
     get isMultiSelect(): boolean;
     get isSingleSelect(): boolean;
     get selectedRows(): Array<ITableRow>;