From 86a4e89712911480fc262e45fb4eba84e0b62953 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 5 Feb 2026 12:53:38 +0100 Subject: [PATCH 1/6] update ui5wc to v2.19.0 --- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 170 ++++++++++++------------- 8 files changed, 103 insertions(+), 103 deletions(-) diff --git a/package.json b/package.json index b1a5d62dff5..970b9f5151c 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "10.2.3", "@storybook/addon-docs": "10.2.3", "@storybook/react-vite": "10.2.3", - "@ui5/webcomponents": "2.18.1", - "@ui5/webcomponents-ai": "2.18.1", - "@ui5/webcomponents-compat": "2.18.1", - "@ui5/webcomponents-fiori": "2.18.1", - "@ui5/webcomponents-icons": "2.18.1", + "@ui5/webcomponents": "2.19.0", + "@ui5/webcomponents-ai": "2.19.0", + "@ui5/webcomponents-compat": "2.19.0", + "@ui5/webcomponents-fiori": "2.19.0", + "@ui5/webcomponents-icons": "2.19.0", "react": "19.2.4", "react-dom": "19.2.4", "remark-gfm": "4.0.1", @@ -66,7 +66,7 @@ "@types/node": "24.10.9", "@types/react": "19.2.10", "@types/react-dom": "19.2.3", - "@ui5/webcomponents-tools": "2.18.1", + "@ui5/webcomponents-tools": "2.19.0", "@vitejs/plugin-react": "5.1.2", "chromatic": "15.0.0", "cssnano": "7.1.2", diff --git a/packages/ai/package.json b/packages/ai/package.json index aa5c650b573..04d6b727f2e 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -53,7 +53,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.18.0", + "@ui5/webcomponents-ai": "~2.19.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 69b12afb64e..772779150e3 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.18.0", + "@ui5/webcomponents-base": "~2.19.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 1f6ea3c36d7..441e7c3b3d9 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.18.0", - "@ui5/webcomponents-react-base": "~2.18.0", + "@ui5/webcomponents-react": "~2.19.0", + "@ui5/webcomponents-react-base": "~2.19.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index df0e855c739..564c346d6de 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.18.0", - "@ui5/webcomponents-react": "~2.18.0", + "@ui5/webcomponents-compat": "~2.19.0", + "@ui5/webcomponents-react": "~2.19.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index 53b1489d52d..2234b0cc69d 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.18.0", - "@ui5/webcomponents-base": "~2.18.0", + "@ui5/webcomponents": "~2.19.0", + "@ui5/webcomponents-base": "~2.19.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 840b6f9bedc..bc2abe93a28 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -809,10 +809,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.18.0", - "@ui5/webcomponents-base": "~2.18.0", - "@ui5/webcomponents-fiori": "~2.18.0", - "@ui5/webcomponents-icons": "~2.18.0", + "@ui5/webcomponents": "~2.19.0", + "@ui5/webcomponents-base": "~2.19.0", + "@ui5/webcomponents-fiori": "~2.19.0", + "@ui5/webcomponents-icons": "~2.19.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 57312deaecb..f38f27e615a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5403,42 +5403,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.18.0 + "@ui5/webcomponents-ai": ~2.19.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-ai@npm:2.18.1" +"@ui5/webcomponents-ai@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-ai@npm:2.19.0" dependencies: - "@ui5/webcomponents": "npm:2.18.1" - "@ui5/webcomponents-base": "npm:2.18.1" - "@ui5/webcomponents-icons": "npm:2.18.1" - "@ui5/webcomponents-theming": "npm:2.18.1" - checksum: 10c0/778de440b30392aa6930a8bbf5bf7756686e61cab521a7e57934a3b568ce030255250339ecf3b6ae73f8c88d77cb24ea2ae499b9351c6d5ffc888a91f7a00bac + "@ui5/webcomponents": "npm:2.19.0" + "@ui5/webcomponents-base": "npm:2.19.0" + "@ui5/webcomponents-icons": "npm:2.19.0" + "@ui5/webcomponents-theming": "npm:2.19.0" + checksum: 10c0/32762fa1bdf27f5f4bed27fb03326ab6f96ef209f0ccb7303ba0a1830a203635d1bedaa81a132f9ead7bed47e1073b525698a96f60fbceda0eac0351825a5201 languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-base@npm:2.18.1" +"@ui5/webcomponents-base@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-base@npm:2.19.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/c604a09bcc60aabc7612b151351a413cb01e37ea2b15acd20d9eb53f40a5fd5abfe9af79fc245523c6057b0dc839b11a73f9cc01ff9d3318c75eb8a7b5dcaeef + checksum: 10c0/65d1808d92bc45c79af5c18369d99ab4550e61acdf85b74dd46bc929c77e2c757b89a453e12babb4a14f4e7b47715c475c33e7aa4d0736604d7143dfa5c117b1 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-compat@npm:2.18.1" +"@ui5/webcomponents-compat@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-compat@npm:2.19.0" dependencies: - "@ui5/webcomponents": "npm:2.18.1" - "@ui5/webcomponents-base": "npm:2.18.1" - "@ui5/webcomponents-icons": "npm:2.18.1" - "@ui5/webcomponents-theming": "npm:2.18.1" - checksum: 10c0/79edaa5fa3e2b90711b9b4e1b97c2ace93be51efe2a697b5248180438acae3c8c5e1a4991b8467e72939e9429a82a2e25c9c033b0f7915f729272f5b21c3b758 + "@ui5/webcomponents": "npm:2.19.0" + "@ui5/webcomponents-base": "npm:2.19.0" + "@ui5/webcomponents-icons": "npm:2.19.0" + "@ui5/webcomponents-theming": "npm:2.19.0" + checksum: 10c0/4987c2e8620fd352e0f9e89d324a825dcffc9baeb416c2e7bcf7a8f3cd10774e307c5518105dcc01af4aadfe30c5f73f7e33215fbdd0892e88ec60f8e5257e96 languageName: node linkType: hard @@ -5446,8 +5446,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.18.0 - "@ui5/webcomponents-base": ~2.18.0 + "@ui5/webcomponents": ~2.19.0 + "@ui5/webcomponents-base": ~2.19.0 cypress: ^12 || ^13 || ^14 || ^15 peerDependenciesMeta: "@ui5/webcomponents": @@ -5457,53 +5457,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-fiori@npm:2.18.1" +"@ui5/webcomponents-fiori@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-fiori@npm:2.19.0" dependencies: - "@ui5/webcomponents": "npm:2.18.1" - "@ui5/webcomponents-base": "npm:2.18.1" - "@ui5/webcomponents-icons": "npm:2.18.1" - "@ui5/webcomponents-theming": "npm:2.18.1" + "@ui5/webcomponents": "npm:2.19.0" + "@ui5/webcomponents-base": "npm:2.19.0" + "@ui5/webcomponents-icons": "npm:2.19.0" + "@ui5/webcomponents-theming": "npm:2.19.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/2a6e1d76a3cf1bd6b1fd5e624102d7d05dcb6279896513d3e975dbec518d998eba62253e0c1f4aee0fb4b168535348dd23152fb63495a6a96d184e7ef0111416 + checksum: 10c0/9bd0ba56d1d6e614042231a3317c8d9313ea6a9a6f666cd854c399f3c69b84aed30a041779f36aa4fdd6f61544f37e41c9723c40bfb849339e907cdbeb2d8899 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.18.1" +"@ui5/webcomponents-icons-business-suite@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.19.0" dependencies: - "@ui5/webcomponents-base": "npm:2.18.1" - checksum: 10c0/46261e656464aacd5e8119649c525e73bbf191402c9358fbc8af55c860421e4c0e5e13dbf6fa2281c893ad215c444f24e22a6b9b2630061e74382a2d7a563cbe + "@ui5/webcomponents-base": "npm:2.19.0" + checksum: 10c0/00319c4c6709a1c6522ed309d56004fb65d4004a961cd6d15346871588edccf1452e08b0851be534727d20d149ec78de8a28fe62802c95282bd893cf320a4aa7 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.18.1" +"@ui5/webcomponents-icons-tnt@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.19.0" dependencies: - "@ui5/webcomponents-base": "npm:2.18.1" - checksum: 10c0/59495afafb4c081a449b900a8d5c09ac6d1061847eb4ae854f4b266d4218751d392d1528ca20f72bcb49975e30983f491ef3f2c9d2247793b900cab8b92aeb40 + "@ui5/webcomponents-base": "npm:2.19.0" + checksum: 10c0/9c43b3365f5b56558aff704da14240de1fcc45451c875f02a885a32e85a0b31f6b0050d3bcbe90d5df53ff9d674c594b60a0a9b2c190e8f39fb63d1d017a51a4 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-icons@npm:2.18.1" +"@ui5/webcomponents-icons@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-icons@npm:2.19.0" dependencies: - "@ui5/webcomponents-base": "npm:2.18.1" - checksum: 10c0/b31700da3a51ffd6fb9b953ebd897631646bcc9fea309330858efd165072b0347af5f1540788e249b57c888ecae4f5b24115b8ebda0c5ab6a56df69b66ce3eda + "@ui5/webcomponents-base": "npm:2.19.0" + checksum: 10c0/d9234dc2ba8198e75c0c6224dba704ce261d486c2c8458e02514dea7606f247e20ef7a7a0e9494c5c231e880a2c65a2814dbbf39e15d317bb2ab7e0364b99d0e languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-localization@npm:2.18.1" +"@ui5/webcomponents-localization@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-localization@npm:2.19.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.18.1" - checksum: 10c0/f3c6fcfdab309a9c115331831a29762ae5fe004c1749bff9d9eebd534da6e6e6f2dbb3abccfd5ec7bf4b03bba7a177b88d60b2db4b1b1f77b46394af6c05c9bc + "@ui5/webcomponents-base": "npm:2.19.0" + checksum: 10c0/3eba122f37ba47de616221bec189891879e77d9898a8426761176f6911d1f72aadc576c8450c3df6c89877190a0cd925d1ecf86e1888545c12a0b123807b974f languageName: node linkType: hard @@ -5512,7 +5512,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.18.0 + "@ui5/webcomponents-base": ~2.19.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5530,8 +5530,8 @@ __metadata: react-content-loader: "npm:7.1.2" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.18.0 - "@ui5/webcomponents-react-base": ~2.18.0 + "@ui5/webcomponents-react": ~2.19.0 + "@ui5/webcomponents-react-base": ~2.19.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -5556,8 +5556,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.18.0 - "@ui5/webcomponents-react": ~2.18.0 + "@ui5/webcomponents-compat": ~2.19.0 + "@ui5/webcomponents-react": ~2.19.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5583,10 +5583,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.18.0 - "@ui5/webcomponents-base": ~2.18.0 - "@ui5/webcomponents-fiori": ~2.18.0 - "@ui5/webcomponents-icons": ~2.18.0 + "@ui5/webcomponents": ~2.19.0 + "@ui5/webcomponents-base": ~2.19.0 + "@ui5/webcomponents-fiori": ~2.19.0 + "@ui5/webcomponents-icons": ~2.19.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5603,19 +5603,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-theming@npm:2.18.1" +"@ui5/webcomponents-theming@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-theming@npm:2.19.0" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.18.1" - checksum: 10c0/2bf1ef982dea49ba0b5c7f08c64f8d8add6227666f0c562b2da04f2c1e3e542ceba6c179a497a56070a93e5bd2985da1e0c1bb10840c8b555245d3af978ea4d4 + "@ui5/webcomponents-base": "npm:2.19.0" + checksum: 10c0/a50d7e12832f2586d190fbf5db3a16da60356d81c051da60bcfcec7c76cc72c4d93e6694b4b8de171a4d8d5c8c00d8b3605f19ce6a9cbd36409b99bf91e43cf0 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents-tools@npm:2.18.1" +"@ui5/webcomponents-tools@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents-tools@npm:2.19.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.10" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -5672,21 +5672,21 @@ __metadata: ui5nps: bin/ui5nps.js wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/03b6a762d1c4908557e9c260fb9225b8a02443835865a00508aed0fb07bd9df8793ea6facfd592b030ab65cba85f0d20230b674342a44ab10aaa8e2dffd63ae4 + checksum: 10c0/01102fb0122e8492309d96af6dc11d57812789518ea3182655dcca4047996c5094bd864a533f8ac5e4bcc720b987844d32e467de858d16f35163e68d12f38f7f languageName: node linkType: hard -"@ui5/webcomponents@npm:2.18.1": - version: 2.18.1 - resolution: "@ui5/webcomponents@npm:2.18.1" +"@ui5/webcomponents@npm:2.19.0": + version: 2.19.0 + resolution: "@ui5/webcomponents@npm:2.19.0" dependencies: - "@ui5/webcomponents-base": "npm:2.18.1" - "@ui5/webcomponents-icons": "npm:2.18.1" - "@ui5/webcomponents-icons-business-suite": "npm:2.18.1" - "@ui5/webcomponents-icons-tnt": "npm:2.18.1" - "@ui5/webcomponents-localization": "npm:2.18.1" - "@ui5/webcomponents-theming": "npm:2.18.1" - checksum: 10c0/390c53543f00a47816b3d39b506d4b71b8ae18c5a80e014cecd5e1d61ff3a88ac9ffcd5571fbe675c7990486371cdb08f27e2a9dd9757e96f7f73def4ff93d0f + "@ui5/webcomponents-base": "npm:2.19.0" + "@ui5/webcomponents-icons": "npm:2.19.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.19.0" + "@ui5/webcomponents-icons-tnt": "npm:2.19.0" + "@ui5/webcomponents-localization": "npm:2.19.0" + "@ui5/webcomponents-theming": "npm:2.19.0" + checksum: 10c0/619b17204a2805f0cadf7a69b295a0bf6da47141b676093ce0675afc350deb3da7e9a18bf51928b8ca0d916d66fba3f41871ecdd3a68143126c262ccedd33ded languageName: node linkType: hard @@ -20746,12 +20746,12 @@ __metadata: "@types/node": "npm:24.10.9" "@types/react": "npm:19.2.10" "@types/react-dom": "npm:19.2.3" - "@ui5/webcomponents": "npm:2.18.1" - "@ui5/webcomponents-ai": "npm:2.18.1" - "@ui5/webcomponents-compat": "npm:2.18.1" - "@ui5/webcomponents-fiori": "npm:2.18.1" - "@ui5/webcomponents-icons": "npm:2.18.1" - "@ui5/webcomponents-tools": "npm:2.18.1" + "@ui5/webcomponents": "npm:2.19.0" + "@ui5/webcomponents-ai": "npm:2.19.0" + "@ui5/webcomponents-compat": "npm:2.19.0" + "@ui5/webcomponents-fiori": "npm:2.19.0" + "@ui5/webcomponents-icons": "npm:2.19.0" + "@ui5/webcomponents-tools": "npm:2.19.0" "@vitejs/plugin-react": "npm:5.1.2" chromatic: "npm:15.0.0" cssnano: "npm:7.1.2" From fdc9f4cb2dcd20aa989372c7f55e96c6c4abac96 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 5 Feb 2026 14:06:13 +0100 Subject: [PATCH 2/6] run main wrapper script --- .storybook/custom-element-manifests/ai.json | 57 +- .../custom-element-manifests/fiori.json | 108 +++- .storybook/custom-element-manifests/main.json | 565 ++++++++++++++++-- .../main/src/webComponents/Avatar/index.tsx | 3 +- .../src/webComponents/AvatarBadge/index.tsx | 72 +++ .../main/src/webComponents/Carousel/index.tsx | 2 +- .../ColorPalettePopover/index.tsx | 11 +- .../src/webComponents/DatePicker/index.tsx | 8 + .../webComponents/DateRangePicker/index.tsx | 7 + .../webComponents/DateTimePicker/index.tsx | 8 + .../main/src/webComponents/Input/index.tsx | 10 + .../main/src/webComponents/List/index.tsx | 12 +- .../src/webComponents/MultiComboBox/index.tsx | 41 +- .../src/webComponents/MultiInput/index.tsx | 12 +- .../webComponents/NavigationLayout/index.tsx | 6 +- .../main/src/webComponents/Popover/index.tsx | 13 +- .../webComponents/ResponsivePopover/index.tsx | 13 +- .../main/src/webComponents/Search/index.tsx | 10 +- .../webComponents/ShellBarSearch/index.tsx | 10 +- .../webComponents/SideNavigation/index.tsx | 9 +- .../SideNavigationItem/index.tsx | 2 + .../SideNavigationSubItem/index.tsx | 2 + .../main/src/webComponents/Table/index.tsx | 2 +- .../webComponents/UserMenuAccount/index.tsx | 10 +- .../UserSettingsAccountView/index.tsx | 2 +- .../UserSettingsAppearanceView/index.tsx | 2 +- 26 files changed, 894 insertions(+), 103 deletions(-) create mode 100644 packages/main/src/webComponents/AvatarBadge/index.tsx diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index e4f1e29a692..9ada5848b5c 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -193,7 +193,7 @@ }, "tagName": "ui5-ai-button", "customElement": true, - "_ui5experimental": "The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.0.0", "_ui5privacy": "public" } @@ -332,7 +332,7 @@ }, "tagName": "ui5-ai-button-state", "customElement": true, - "_ui5experimental": "The Button and ButtonState web components are available since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package (including ButtonState) is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.0.0", "_ui5privacy": "public", "_ui5abstract": true @@ -640,6 +640,24 @@ "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -658,12 +676,37 @@ "name": "item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent", + "references": [ + { + "name": "InputItemClickEventDetail", + "package": "@ui5/webcomponents-ai", + "module": "dist/Input.js" + } + ] }, "description": "Fired when an item from the AI actions menu is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The currently clicked menu item." + }, + { + "type": { + "text": "string" + }, + "name": "text", + "_ui5privacy": "public", + "description": "The text of the currently clicked menu item." + } + ] }, { "name": "stop-generation", @@ -828,7 +871,7 @@ }, "tagName": "ui5-ai-input", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.16.0", "_ui5privacy": "public", "cssParts": [ @@ -1156,7 +1199,7 @@ }, "tagName": "ui5-ai-prompt-input", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5privacy": "public" } ], @@ -1573,7 +1616,7 @@ }, "tagName": "ui5-ai-textarea", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.16.0", "_ui5privacy": "public", "cssParts": [ diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 5ad0e2dc031..430e5b44336 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -2125,7 +2125,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn phone devices, the side navigation is hidden by default and can\nbe displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", + "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", "name": "NavigationLayout", "slots": [ { @@ -3509,6 +3509,21 @@ "description": "Indicates whether the items picker is open.", "privacy": "public" }, + { + "kind": "field", + "name": "fieldLoading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "kind": "field", "name": "showClearIcon", @@ -3709,6 +3724,19 @@ "text": "boolean" } }, + { + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "description": "Defines whether the clear icon of the search will be shown.", "name": "show-clear-icon", @@ -5603,6 +5631,21 @@ "module": "dist/Search.js" } }, + { + "kind": "field", + "name": "fieldLoading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "kind": "field", "name": "showClearIcon", @@ -5738,6 +5781,19 @@ "module": "dist/Search.js" } }, + { + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "description": "Defines whether the clear icon of the search will be shown.", "name": "show-clear-icon", @@ -6099,7 +6155,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on phones and tablets.\nPadding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", + "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", "name": "SideNavigation", "slots": [ { @@ -6151,7 +6207,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", "privacy": "public" }, { @@ -6205,7 +6261,7 @@ ], "attributes": [ { - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", "name": "collapsed", "default": "false", "fieldName": "collapsed", @@ -6459,7 +6515,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined", "inheritedFrom": { @@ -6626,7 +6682,7 @@ } }, { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -6953,7 +7009,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined" }, @@ -7137,7 +7193,7 @@ ], "attributes": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -7276,7 +7332,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined", "inheritedFrom": { @@ -7444,7 +7500,7 @@ "_ui5abstract": true, "attributes": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -9272,6 +9328,23 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "avatarColorScheme", + "type": { + "text": "AvatarColorScheme", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "privacy": "public" + }, { "kind": "field", "name": "titleText", @@ -9353,6 +9426,15 @@ "text": "string | undefined" } }, + { + "description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "name": "avatar-color-scheme", + "default": "\"Auto\"", + "fieldName": "avatarColorScheme", + "type": { + "text": "\"Auto\" | \"Transparent\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\"" + } + }, { "description": "Defines the title text of the user.", "name": "title-text", @@ -9928,7 +10010,7 @@ "name": "account", "description": "Defines the user account.", "_ui5type": { - "text": "Array | undefined", + "text": "Array", "references": [ { "name": "UserMenuAccount", @@ -10138,7 +10220,7 @@ "name": "additionalContent", "description": "Defines additional content displayed below the items list.", "_ui5type": { - "text": "Array | undefined" + "text": "Array" }, "_ui5privacy": "public" } @@ -13763,7 +13845,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Automatically calculates the navigation layout mode based on the screen device type.\n`Expanded` on desktop and `Collapsed` on tablet and phone.", + "description": "Automatically calculates the navigation layout mode based on the screen width.\n`Collapsed` on small screens (screen width of 599px or less) and `Expanded` on larger screens (screen width of 600px or more).", "default": "Auto", "name": "Auto", "readonly": true diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 34cb5431301..1bc9ac57713 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -41,7 +41,7 @@ }, { "name": "badge", - "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.", + "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.", "_ui5since": "1.7.0", "_ui5type": { "text": "Array" @@ -324,6 +324,93 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/AvatarBadge.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\nThe badge can display an icon and supports different states for visual affordance.\n\n### Usage\n\nThe badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n\n```html\n\n \n\n```\n\n### Keyboard Handling\n\nThe badge does not receive keyboard focus.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/AvatarBadge.js\";`", + "name": "AvatarBadge", + "members": [ + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "state", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "description": "Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states", + "default": "\"None\"", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states", + "name": "state", + "default": "\"None\"", + "fieldName": "state", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-avatar-badge", + "customElement": true, + "_ui5since": "2.19.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarBadge", + "module": "dist/AvatarBadge.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-avatar-badge", + "declaration": { + "name": "AvatarBadge", + "module": "dist/AvatarBadge.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/AvatarGroup.js", @@ -732,7 +819,7 @@ "default": "\"Toolbar\"", "fieldName": "accessibleRole", "type": { - "text": "\"Toolbar\" | \"None\"" + "text": "\"None\" | \"Toolbar\"" } }, { @@ -1536,7 +1623,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -3464,7 +3551,7 @@ "type": { "text": "number" }, - "description": "The index of the target page", + "description": "The index of the target item", "_ui5privacy": "public" } ], @@ -3932,7 +4019,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -4262,6 +4349,24 @@ "privacy": "public", "default": "undefined", "_ui5since": "1.21.0" + }, + { + "kind": "field", + "name": "placement", + "type": { + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] + }, + "default": "\"Bottom\"", + "description": "Determines on which side the component is placed at.", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -4360,6 +4465,15 @@ "type": { "text": "string | HTMLElement | null | undefined" } + }, + { + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"Bottom\"", + "fieldName": "placement", + "type": { + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + } } ], "superclass": { @@ -4862,7 +4976,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -5329,6 +5443,12 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/CustomAnnouncement.js", + "declarations": [], + "exports": [] + }, { "kind": "javascript-module", "path": "dist/DateComponentBase.js", @@ -5828,9 +5948,21 @@ "type": { "text": "Date | null" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true + }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", "readonly": true }, { @@ -6124,7 +6256,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -6227,10 +6359,20 @@ } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "name": "date-value", "default": "null", "fieldName": "dateValue", + "type": { + "text": "any" + }, + "deprecated": "Use dateValueAsync instead" + }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", "type": { "text": "any" } @@ -6398,6 +6540,7 @@ "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", "readonly": true, "inheritedFrom": { "name": "DatePicker", @@ -6766,6 +6909,21 @@ "module": "dist/DatePicker.js" } }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { "kind": "field", "name": "primaryCalendarType", @@ -6976,7 +7134,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "DatePicker", @@ -7126,6 +7284,19 @@ "module": "dist/DatePicker.js" } }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", + "type": { + "text": "any" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "name": "primary-calendar-type", @@ -7796,9 +7967,25 @@ "type": { "text": "Date | null" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", "readonly": true, "inheritedFrom": { "name": "DatePicker", @@ -8000,7 +8187,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "DatePicker", @@ -8151,13 +8338,27 @@ } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "name": "date-value", "default": "null", "fieldName": "dateValue", "type": { "text": "any" }, + "deprecated": "Use dateValueAsync instead", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", + "type": { + "text": "any" + }, "inheritedFrom": { "name": "DatePicker", "module": "dist/DatePicker.js" @@ -8774,7 +8975,7 @@ "default": "\"None\"", "fieldName": "state", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -9628,7 +9829,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -10405,7 +10606,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Default\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" } }, { @@ -10746,6 +10947,24 @@ "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -10907,7 +11126,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -10990,6 +11209,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } } ], "superclass": { @@ -11181,15 +11409,6 @@ "_ui5type": { "text": "Array" } - }, - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array" - }, - "_ui5privacy": "public" } ], "members": [ @@ -11751,6 +11970,17 @@ "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", "privacy": "public" }, + { + "kind": "field", + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "privacy": "public", + "_ui5since": "2.19.0" + }, { "kind": "field", "name": "accessibleName", @@ -12193,6 +12423,15 @@ "text": "number" } }, + { + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", + "type": { + "text": "boolean" + } + }, { "description": "Defines the accessible name of the component.", "name": "accessible-name", @@ -12459,7 +12698,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -12805,7 +13044,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -13481,7 +13720,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -13569,7 +13808,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -14474,7 +14713,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -14776,7 +15015,7 @@ "default": "\"Information\"", "fieldName": "design", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" } }, { @@ -15018,6 +15257,16 @@ "privacy": "public", "_ui5since": "1.0.0-rc.5" }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the picker.", + "privacy": "public" + }, { "kind": "field", "name": "filter", @@ -15171,6 +15420,35 @@ "description": "an array of the selected items." } ] + }, + { + "name": "value-state-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "MultiComboBoxValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.19.0", + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + } + ] } ], "attributes": [ @@ -15234,7 +15512,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -15255,6 +15533,15 @@ "text": "boolean" } }, + { + "description": "Indicates whether a loading indicator should be shown in the picker.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, { "description": "Defines the filter type of the component.", "name": "filter", @@ -16089,6 +16376,28 @@ "name": "Input", "module": "dist/Input.js" } + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "events": [ @@ -16363,7 +16672,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "Input", @@ -16473,6 +16782,19 @@ "name": "Input", "module": "dist/Input.js" } + }, + { + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "superclass": { @@ -17204,7 +17526,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public" }, { @@ -17228,6 +17550,17 @@ "description": "Determines if there is no enough space, the component can be placed\nover the target.", "privacy": "public" }, + { + "kind": "field", + "name": "resizable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0" + }, { "kind": "field", "name": "opener", @@ -17435,7 +17768,7 @@ } }, { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "name": "modal", "default": "false", "fieldName": "modal", @@ -17461,6 +17794,15 @@ "text": "boolean" } }, + { + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", + "type": { + "text": "boolean" + } + }, { "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "name": "opener", @@ -17697,6 +18039,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/PopoverResize.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PopoverResize", + "module": "dist/PopoverResize.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/Popup.js", @@ -18122,7 +18479,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -18372,7 +18729,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -18494,6 +18851,9 @@ "description": "Defines start point of a selection - position of a first handle on the slider.", "default": "0", "privacy": "public", + "type": { + "text": "number" + }, "_ui5formProperty": true, "_ui5formEvents": "change,input" }, @@ -18503,6 +18863,9 @@ "description": "Defines end point of a selection - position of a second handle on the slider.", "default": "100", "privacy": "public", + "type": { + "text": "number" + }, "_ui5formProperty": true, "_ui5formEvents": "change,input" }, @@ -19219,7 +19582,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public", "inheritedFrom": { "name": "Popover", @@ -19255,6 +19618,21 @@ "module": "dist/Popover.js" } }, + { + "kind": "field", + "name": "resizable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, { "kind": "field", "name": "opener", @@ -19530,7 +19908,7 @@ } }, { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "name": "modal", "default": "false", "fieldName": "modal", @@ -19568,6 +19946,19 @@ "module": "dist/Popover.js" } }, + { + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, { "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "name": "opener", @@ -20618,7 +21009,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -21638,7 +22029,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -21963,7 +22354,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -22983,7 +23374,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Neutral\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Default\" | \"Neutral\"" } }, { @@ -23519,7 +23910,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Selects the first cell of the row\n* Space - Toggles the selection of the row\n* Ctrl/Cmd + A - In multi selection mode, toggles the selection of all rows\n* Home - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* End - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* Page Up - Navigates one page up, if the focus is on the first row, navigates to the header row\n* Page Down - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* F2 - Focuses the first tabbable element in the row\n* F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Navigates right\n* Left - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* Home - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* End - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* Page Up - Navigates one page up while keeping the focus in same column\n* Page Down - Navigates one page down while keeping the focus in same column\n* F2 - Toggles the focus between the first tabbable cell content and the cell\n* Enter - Focuses the first tabbable cell content\n* F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* [Shift]Tab - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", + "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Selects the first cell of the row\n* Space - Toggles the selection of the row\n* Ctrl/Cmd + A - In multi selection mode, toggles the selection of all rows\n* Home - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* End - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* Page Up - Navigates one page up, if the focus is on the first row, navigates to the header row\n* Page Down - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* F2 - Focuses the first tabbable element in the row\n* F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Navigates right\n* Left - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* Home - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* End - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* Page Up - Navigates one page up while keeping the focus in same column\n* Page Down - Navigates one page down while keeping the focus in same column\n* F2 - Toggles the focus between the first tabbable cell content and the cell\n* Enter - Focuses the first tabbable cell content\n* F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* [Shift]Tab - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", "name": "Table", "slots": [ { @@ -26164,7 +26555,7 @@ "default": "\"Neutral\"", "fieldName": "design", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" } }, { @@ -26662,7 +27053,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -27151,7 +27542,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -27874,7 +28265,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" }, "inheritedFrom": { "name": "Button", @@ -28951,7 +29342,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -29380,7 +29771,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -30664,7 +31055,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "TreeItemBase", @@ -30742,7 +31133,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -31204,7 +31595,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -31274,7 +31665,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -31727,7 +32118,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "TreeItemBase", @@ -31805,7 +32196,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -34029,6 +34420,66 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/InputSuggestionsFilter.js", + "declarations": [ + { + "kind": "enum", + "name": "InputSuggestionsFilter", + "description": "Different filtering types of the Input.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines filtering by first symbol of each word of item's text.", + "default": "StartsWithPerTerm", + "name": "StartsWithPerTerm", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines filtering by starting symbol of item's text.", + "default": "StartsWith", + "name": "StartsWith", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines contains filtering.", + "default": "Contains", + "name": "Contains", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Removes any filtering applied while typing", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputSuggestionsFilter", + "module": "dist/types/InputSuggestionsFilter.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/InputType.js", diff --git a/packages/main/src/webComponents/Avatar/index.tsx b/packages/main/src/webComponents/Avatar/index.tsx index c71e44d9d34..601bf0ae498 100644 --- a/packages/main/src/webComponents/Avatar/index.tsx +++ b/packages/main/src/webComponents/Avatar/index.tsx @@ -120,8 +120,7 @@ interface AvatarPropTypes * Defines the optional badge that will be used for visual affordance. * * **Note:** While the slot allows for custom badges, to achieve - * the Fiori design, you can use the `Tag` with `Icon` - * in the corresponding `icon` slot, without text nodes. + * the Fiori design, use the `AvatarBadge` component. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="badge"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. diff --git a/packages/main/src/webComponents/AvatarBadge/index.tsx b/packages/main/src/webComponents/AvatarBadge/index.tsx new file mode 100644 index 00000000000..c568e37216e --- /dev/null +++ b/packages/main/src/webComponents/AvatarBadge/index.tsx @@ -0,0 +1,72 @@ +'use client'; + +import '@ui5/webcomponents/dist/AvatarBadge.js'; +import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; + +interface AvatarBadgeAttributes { + /** + * Defines the icon name to be displayed inside the badge. + * + * **Note:** You should import the desired icon first, then use its name as "icon". + * + * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"` + * @default undefined + */ + icon?: string | undefined; + + /** + * Defines the state of the badge, which determines its styling. + * + * Available options: + * - `None` (default) - Standard appearance + * - `Positive` - Green, used for success/approved states + * - `Critical` - Orange, used for warning states + * - `Negative` - Red, used for error/rejected states + * - `Information` - Blue, used for informational states + * @default "None" + */ + state?: ValueState | keyof typeof ValueState; +} + +interface AvatarBadgeDomRef extends Required, Ui5DomRef {} + +interface AvatarBadgePropTypes extends AvatarBadgeAttributes, Omit {} + +/** + * The `AvatarBadge` component is used to display a badge on top of `Avatar` component. + * The badge can display an icon and supports different states for visual affordance. + * + * ### Usage + * + * The badge should be used as a child element of `Avatar` in the `badge` slot. + * + * ```html + * + * + * + * ``` + * + * ### Keyboard Handling + * + * The badge does not receive keyboard focus. + * + * + * + * __Note:__ This is a UI5 Web Component! [AvatarBadge UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/AvatarBadge) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of __@ui5/webcomponents__. + */ +const AvatarBadge = withWebComponent( + 'ui5-avatar-badge', + ['icon', 'state'], + [], + [], + [], +); + +AvatarBadge.displayName = 'AvatarBadge'; + +export { AvatarBadge }; +export type { AvatarBadgeDomRef, AvatarBadgePropTypes }; diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx index 24c7ef23a4e..aaf3a88100d 100644 --- a/packages/main/src/webComponents/Carousel/index.tsx +++ b/packages/main/src/webComponents/Carousel/index.tsx @@ -111,7 +111,7 @@ interface CarouselAttributes { interface CarouselDomRef extends Required, Ui5DomRef { /** * Changes the currently displayed page. - * @param {number} itemIndex - The index of the target page + * @param {number} itemIndex - The index of the target item */ navigateTo: (itemIndex: number) => void; diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index 1d29964ca17..213b079a0e8 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/ColorPalettePopover.js'; import type { ColorPalettePopoverItemClickEventDetail } from '@ui5/webcomponents/dist/ColorPalettePopover.js'; +import type PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -33,6 +34,14 @@ interface ColorPalettePopoverAttributes { */ opener?: HTMLElement | string | null | undefined; + /** + * Determines on which side the component is placed at. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default "Bottom" + */ + placement?: PopoverPlacement | keyof typeof PopoverPlacement; + /** * Defines whether the user can choose the default color from a button. * @default false @@ -105,7 +114,7 @@ interface ColorPalettePopoverPropTypes */ const ColorPalettePopover = withWebComponent( 'ui5-color-palette-popover', - ['defaultColor', 'opener'], + ['defaultColor', 'opener', 'placement'], ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'], [], ['close', 'item-click'], diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index ff270d464aa..56a23fe84c2 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -169,9 +169,17 @@ interface DatePickerAttributes { interface DatePickerDomRef extends Required, Ui5DomRef { /** * Currently selected date represented as a Local JavaScript Date instance. + * Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met. + * + * @deprecated Use dateValueAsync instead */ readonly dateValue: Date | null; + /** + * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance. + */ + readonly dateValueAsync: Promise; + /** * Formats a Java Script date object into a string representing a locale date * according to the `formatPattern` property of the DatePicker instance diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx index dcedd5e037b..d02435d7ffd 100644 --- a/packages/main/src/webComponents/DateRangePicker/index.tsx +++ b/packages/main/src/webComponents/DateRangePicker/index.tsx @@ -176,9 +176,16 @@ interface DateRangePickerAttributes { interface DateRangePickerDomRef extends Required, Ui5DomRef { /** * **Note:** The getter method is inherited and not supported. If called it will return an empty value. + * + * @deprecated Use dateValueAsync instead */ readonly dateValue: Date | null; + /** + * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance. + */ + readonly dateValueAsync: Promise; + /** * **Note:** The getter method is inherited and not supported. If called it will return an empty value. */ diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx index a3f4a13fb3b..11d9753cf1b 100644 --- a/packages/main/src/webComponents/DateTimePicker/index.tsx +++ b/packages/main/src/webComponents/DateTimePicker/index.tsx @@ -169,9 +169,17 @@ interface DateTimePickerAttributes { interface DateTimePickerDomRef extends Required, Ui5DomRef { /** * Currently selected date represented as a Local JavaScript Date instance. + * Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met. + * + * @deprecated Use dateValueAsync instead */ readonly dateValue: Date | null; + /** + * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance. + */ + readonly dateValueAsync: Promise; + /** * Formats a Java Script date object into a string representing a locale date * according to the `formatPattern` property of the DatePicker instance diff --git a/packages/main/src/webComponents/Input/index.tsx b/packages/main/src/webComponents/Input/index.tsx index cfbf7241036..f7e165de5b1 100644 --- a/packages/main/src/webComponents/Input/index.tsx +++ b/packages/main/src/webComponents/Input/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/Input.js'; import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Input.js'; +import type InputSuggestionsFilter from '@ui5/webcomponents/dist/types/InputSuggestionsFilter.js'; import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; @@ -45,6 +46,14 @@ interface InputAttributes { */ disabled?: boolean; + /** + * Defines the filter type of the component. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default "None" + */ + filter?: InputSuggestionsFilter | keyof typeof InputSuggestionsFilter; + /** * Sets the maximum number of characters available in the input field. * @@ -309,6 +318,7 @@ const Input = withWebComponent( 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', + 'filter', 'maxlength', 'name', 'placeholder', diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index 0e453627b2a..546ae3e661a 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -147,6 +147,16 @@ interface ListAttributes { * @default "All" */ separators?: ListSeparator | keyof typeof ListSeparator; + + /** + * Indicates whether the List header is sticky or not. + * If stickyHeader is set to true, then whenever you scroll the content or + * the application, the header of the list will be always visible. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default false + */ + stickyHeader?: boolean; } interface ListDomRef extends Required, Ui5DomRef { @@ -366,7 +376,7 @@ const List = withWebComponent( 'selectionMode', 'separators', ], - ['indent', 'loading'], + ['indent', 'loading', 'stickyHeader'], ['header'], ['item-click', 'item-close', 'item-delete', 'item-toggle', 'load-more', 'move-over', 'move', 'selection-change'], ); diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index 4797dae2872..c7e1a2d1c41 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -1,7 +1,10 @@ 'use client'; import '@ui5/webcomponents/dist/MultiComboBox.js'; -import type { MultiComboBoxSelectionChangeEventDetail } from '@ui5/webcomponents/dist/MultiComboBox.js'; +import type { + MultiComboBoxSelectionChangeEventDetail, + MultiComboBoxValueStateChangeEventDetail, +} from '@ui5/webcomponents/dist/MultiComboBox.js'; import type ComboBoxFilter from '@ui5/webcomponents/dist/types/ComboBoxFilter.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; @@ -39,6 +42,12 @@ interface MultiComboBoxAttributes { */ filter?: ComboBoxFilter | keyof typeof ComboBoxFilter; + /** + * Indicates whether a loading indicator should be shown in the picker. + * @default false + */ + loading?: boolean; + /** * Determines the name by which the component will be identified upon submission in an HTML form. * @@ -139,6 +148,7 @@ interface MultiComboBoxPropTypes | 'onInput' | 'onOpen' | 'onSelectionChange' + | 'onValueStateChange' > { /** * Defines the component items. @@ -228,6 +238,21 @@ interface MultiComboBoxPropTypes * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; + + /** + * Fired before the value state of the component is updated internally. + * The event is preventable, meaning that if it's default action is + * prevented, the component will not update the value state. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onValueStateChange?: (event: Ui5CustomEvent) => void; } /** @@ -267,9 +292,19 @@ interface MultiComboBoxPropTypes const MultiComboBox = withWebComponent( 'ui5-multi-combobox', ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'], - ['disabled', 'noTypeahead', 'noValidation', 'open', 'readonly', 'required', 'showClearIcon', 'showSelectAll'], + [ + 'disabled', + 'loading', + 'noTypeahead', + 'noValidation', + 'open', + 'readonly', + 'required', + 'showClearIcon', + 'showSelectAll', + ], ['icon', 'valueStateMessage'], - ['change', 'close', 'input', 'open', 'selection-change'], + ['change', 'close', 'input', 'open', 'selection-change', 'value-state-change'], ); MultiComboBox.displayName = 'MultiComboBox'; diff --git a/packages/main/src/webComponents/MultiInput/index.tsx b/packages/main/src/webComponents/MultiInput/index.tsx index b4ba2b79ff3..e5f754ab2da 100644 --- a/packages/main/src/webComponents/MultiInput/index.tsx +++ b/packages/main/src/webComponents/MultiInput/index.tsx @@ -3,10 +3,11 @@ import '@ui5/webcomponents/dist/MultiInput.js'; import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Input.js'; import type { MultiInputTokenDeleteEventDetail } from '@ui5/webcomponents/dist/MultiInput.js'; +import type InputSuggestionsFilter from '@ui5/webcomponents/dist/types/InputSuggestionsFilter.js'; import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface MultiInputAttributes { @@ -46,6 +47,14 @@ interface MultiInputAttributes { */ disabled?: boolean; + /** + * Defines the filter type of the component. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default "None" + */ + filter?: InputSuggestionsFilter | keyof typeof InputSuggestionsFilter; + /** * Sets the maximum number of characters available in the input field. * @@ -339,6 +348,7 @@ const MultiInput = withWebComponent( 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', + 'filter', 'maxlength', 'name', 'placeholder', diff --git a/packages/main/src/webComponents/NavigationLayout/index.tsx b/packages/main/src/webComponents/NavigationLayout/index.tsx index 766390f0a4e..f1c611f92a4 100644 --- a/packages/main/src/webComponents/NavigationLayout/index.tsx +++ b/packages/main/src/webComponents/NavigationLayout/index.tsx @@ -70,10 +70,10 @@ interface NavigationLayoutPropTypes * * ### Responsive Behavior * - * On desktop and tablet devices, the side navigation is visible + * On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible * by default and can be expanded or collapsed using the `mode` property. - * On phone devices, the side navigation is hidden by default and can - * be displayed using the `mode` property. + * On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by + * default and can be displayed using the `mode` property. * * * diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index 227e6453a2f..17de56be683 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -87,7 +87,7 @@ interface PopoverAttributes { /** * Defines whether the component should close when - * clicking/tapping outside of the popover. + * clicking/tapping outside the popover. * If enabled, it blocks any interaction with the background. * @default false */ @@ -132,6 +132,15 @@ interface PopoverAttributes { */ preventInitialFocus?: boolean; + /** + * Determines whether the component is resizable. + * **Note:** This property is effective only on desktop devices. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default false + */ + resizable?: boolean; + /** * Determines the vertical alignment of the component. * @default "Center" @@ -273,7 +282,7 @@ const Popover = withWebComponent( 'placement', 'verticalAlign', ], - ['allowTargetOverlap', 'hideArrow', 'modal', 'open', 'preventFocusRestore', 'preventInitialFocus'], + ['allowTargetOverlap', 'hideArrow', 'modal', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open'], ); diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index cad70ff2480..25f16906d6c 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -87,7 +87,7 @@ interface ResponsivePopoverAttributes { /** * Defines whether the component should close when - * clicking/tapping outside of the popover. + * clicking/tapping outside the popover. * If enabled, it blocks any interaction with the background. * @default false */ @@ -132,6 +132,15 @@ interface ResponsivePopoverAttributes { */ preventInitialFocus?: boolean; + /** + * Determines whether the component is resizable. + * **Note:** This property is effective only on desktop devices. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. + * @default false + */ + resizable?: boolean; + /** * Determines the vertical alignment of the component. * @default "Center" @@ -261,7 +270,7 @@ const ResponsivePopover = withWebComponent( 'ui5-search', ['accessibleDescription', 'accessibleName', 'placeholder', 'scopeValue', 'value'], - ['loading', 'noTypeahead', 'open', 'showClearIcon'], + ['fieldLoading', 'loading', 'noTypeahead', 'open', 'showClearIcon'], ['action', 'filterButton', 'illustration', 'messageArea', 'scopes'], ['close', 'input', 'open', 'scope-change', 'search'], ); diff --git a/packages/main/src/webComponents/ShellBarSearch/index.tsx b/packages/main/src/webComponents/ShellBarSearch/index.tsx index 9a07e1ddd53..33237859593 100644 --- a/packages/main/src/webComponents/ShellBarSearch/index.tsx +++ b/packages/main/src/webComponents/ShellBarSearch/index.tsx @@ -25,6 +25,14 @@ interface ShellBarSearchAttributes { */ autoOpen?: boolean; + /** + * Indicates whether a loading indicator should be shown in the input field. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents-fiori**. + * @default false + */ + fieldLoading?: boolean; + /** * Indicates whether a loading indicator should be shown in the popup. * @default false @@ -231,7 +239,7 @@ interface ShellBarSearchPropTypes const ShellBarSearch = withWebComponent( 'ui5-shellbar-search', ['accessibleDescription', 'accessibleName', 'placeholder', 'scopeValue', 'value'], - ['autoOpen', 'loading', 'noTypeahead', 'open', 'showClearIcon'], + ['autoOpen', 'fieldLoading', 'loading', 'noTypeahead', 'open', 'showClearIcon'], ['action', 'filterButton', 'illustration', 'messageArea', 'scopes'], ['close', 'input', 'open', 'scope-change', 'search'], ); diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 80055b6502b..015cde5b463 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -18,11 +18,12 @@ interface SideNavigationAttributes { /** * Defines whether the `SideNavigation` is expanded or collapsed. * - * **Note:** The collapsed mode is not supported on phones. + * **Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in + * expanded mode the side navigation will take the whole width of the screen. * The `SideNavigation` component is intended to be used within a `NavigationLayout` * component to ensure proper responsive behavior. If you choose not to use the * `NavigationLayout`, you will need to implement the appropriate responsive patterns yourself, - * particularly for phones where the collapsed mode should not be used. + * particularly for smaller screens where the collapsed mode should not be used. * @default false */ collapsed?: boolean; @@ -100,8 +101,8 @@ interface SideNavigationPropTypes * The `SideNavigation` component is designed to be used within a `NavigationLayout` component to ensure an optimal user experience. * * Using it standalone may not match the intended design and functionality. - * For example, the side navigation may not exhibit the correct behavior on phones and tablets. - * Padding of the `ShellBar` will not match the padding of the side navigation. + * For example, the side navigation may not exhibit the correct behavior on smaller screens. + * Additionally, the padding of the `ShellBar` will not match the padding of the side navigation. * * ### Keyboard Handling * diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx index 5e1394cdd15..09641958e23 100644 --- a/packages/main/src/webComponents/SideNavigationItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx @@ -63,6 +63,8 @@ interface SideNavigationItemAttributes { /** * Defines the icon of the item. * + * **Note:** Icons on second-level (child) navigation items are not recommended according to the design specification. + * * The SAP-icons font provides numerous options. * * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx index d48cec9609e..14005f72564 100644 --- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx @@ -56,6 +56,8 @@ interface SideNavigationSubItemAttributes { /** * Defines the icon of the item. * + * **Note:** Icons on second-level (child) navigation items are not recommended according to the design specification. + * * The SAP-icons font provides numerous options. * * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx index cc80be71c9e..55d6555d511 100644 --- a/packages/main/src/webComponents/Table/index.tsx +++ b/packages/main/src/webComponents/Table/index.tsx @@ -262,7 +262,7 @@ interface TablePropTypes * This can only be achieved through a custom accessibility announcement. * To support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property. * The `Table` uses this information to create the required custom announcements dynamically. - * If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute. + * If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute. * * )\ * `import "@ui5/webcomponents/dist/TableRow.js";` (`TableRow`)\ diff --git a/packages/main/src/webComponents/UserMenuAccount/index.tsx b/packages/main/src/webComponents/UserMenuAccount/index.tsx index 16378649fc2..f825be200bd 100644 --- a/packages/main/src/webComponents/UserMenuAccount/index.tsx +++ b/packages/main/src/webComponents/UserMenuAccount/index.tsx @@ -1,6 +1,7 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/UserMenuAccount.js'; +import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; @@ -10,6 +11,13 @@ interface UserMenuAccountAttributes { */ additionalInfo?: string; + /** + * Defines the background color of the desired image. + * If `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color. + * @default "Auto" + */ + avatarColorScheme?: AvatarColorScheme | keyof typeof AvatarColorScheme; + /** * Defines the avatar initials of the user. * @default undefined @@ -68,7 +76,7 @@ interface UserMenuAccountPropTypes */ const UserMenuAccount = withWebComponent( 'ui5-user-menu-account', - ['additionalInfo', 'avatarInitials', 'avatarSrc', 'description', 'subtitleText', 'titleText'], + ['additionalInfo', 'avatarColorScheme', 'avatarInitials', 'avatarSrc', 'description', 'subtitleText', 'titleText'], ['loading', 'selected'], [], [], diff --git a/packages/main/src/webComponents/UserSettingsAccountView/index.tsx b/packages/main/src/webComponents/UserSettingsAccountView/index.tsx index 2a2d379d1ac..39776e5cea5 100644 --- a/packages/main/src/webComponents/UserSettingsAccountView/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAccountView/index.tsx @@ -50,7 +50,7 @@ interface UserSettingsAccountViewPropTypes * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * - * __Supported Node Type/s:__ `Array | undefined` + * __Supported Node Type/s:__ `Array` */ account?: UI5WCSlotsNode; diff --git a/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx b/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx index 30c2b0277d7..a24d27b94dd 100644 --- a/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx @@ -45,7 +45,7 @@ interface UserSettingsAppearanceViewPropTypes * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * - * __Supported Node Type/s:__ `Array | undefined` + * __Supported Node Type/s:__ `Array` */ additionalContent?: UI5WCSlotsNode; From 5660e3a916def99256fe7228888e18ae1f8edd90 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 5 Feb 2026 14:29:12 +0100 Subject: [PATCH 3/6] AvatarBadge + Avatar story --- packages/main/package.json | 4 ++ .../main/src/webComponents/Avatar/Avatar.mdx | 22 ++++++- .../webComponents/Avatar/Avatar.stories.tsx | 62 ++++++++++++++++--- packages/main/src/webComponents/index.ts | 1 + 4 files changed, 81 insertions(+), 8 deletions(-) diff --git a/packages/main/package.json b/packages/main/package.json index bc2abe93a28..c2b41f43166 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -144,6 +144,10 @@ "types": "./dist/webComponents/Avatar/index.d.ts", "default": "./dist/webComponents/Avatar/index.js" }, + "./AvatarBadge": { + "types": "./dist/webComponents/AvatarBadge/index.d.ts", + "default": "./dist/webComponents/AvatarBadge/index.js" + }, "./AvatarGroup": { "types": "./dist/webComponents/AvatarGroup/index.d.ts", "default": "./dist/webComponents/AvatarGroup/index.js" diff --git a/packages/main/src/webComponents/Avatar/Avatar.mdx b/packages/main/src/webComponents/Avatar/Avatar.mdx index 79e43938a0d..4ae03b2fbce 100644 --- a/packages/main/src/webComponents/Avatar/Avatar.mdx +++ b/packages/main/src/webComponents/Avatar/Avatar.mdx @@ -4,7 +4,7 @@ import * as ComponentStories from './Avatar.stories'; - +
@@ -16,4 +16,24 @@ import * as ComponentStories from './Avatar.stories'; +# More Examples + +## With Image + +The Avatar can show images. + + + +## With Badge + +The Avatar supports visual affordance through badges using the `AvatarBadge` component. Badges can display icons with different value states to indicate status or notifications. + + + +## Custom Styling + +The Avatar allows customization with pure CSS on tag level. + + +