From 305f1de7665706b89856fc95be151760de6120f8 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 13:09:11 +0200 Subject: [PATCH 01/10] update deps --- 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 29ab1826aed..5d87078c6f3 100644 --- a/package.json +++ b/package.json @@ -44,11 +44,11 @@ "@storybook/react": "8.6.14", "@storybook/react-vite": "8.6.14", "@storybook/theming": "8.6.14", - "@ui5/webcomponents": "2.11.0", - "@ui5/webcomponents-ai": "2.11.0", - "@ui5/webcomponents-compat": "2.11.0", - "@ui5/webcomponents-fiori": "2.11.0", - "@ui5/webcomponents-icons": "2.11.0", + "@ui5/webcomponents": "2.12.0", + "@ui5/webcomponents-ai": "2.12.0", + "@ui5/webcomponents-compat": "2.12.0", + "@ui5/webcomponents-fiori": "2.12.0", + "@ui5/webcomponents-icons": "2.12.0", "react": "19.1.0", "react-dom": "19.1.0", "remark-gfm": "4.0.1", @@ -70,7 +70,7 @@ "@types/node": "22.15.34", "@types/react": "19.1.8", "@types/react-dom": "19.1.6", - "@ui5/webcomponents-tools": "2.11.0", + "@ui5/webcomponents-tools": "2.12.0", "@vitejs/plugin-react": "4.6.0", "chromatic": "13.0.1", "cssnano": "7.0.7", diff --git a/packages/ai/package.json b/packages/ai/package.json index d28a877a82a..66629ee2253 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -33,7 +33,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.11.0", + "@ui5/webcomponents-ai": "~2.12.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 438d9167e89..d6a99176e58 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -32,7 +32,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.11.0", + "@ui5/webcomponents-base": "~2.12.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 2482523c9d1..e206feaa67e 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -39,8 +39,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.11.0", - "@ui5/webcomponents-react-base": "~2.11.0", + "@ui5/webcomponents-react": "~2.12.0", + "@ui5/webcomponents-react-base": "~2.12.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index b10746e21b1..4c6e8c31b5b 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -41,8 +41,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.11.0", - "@ui5/webcomponents-react": "~2.11.0", + "@ui5/webcomponents-compat": "~2.12.0", + "@ui5/webcomponents-react": "~2.12.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index 25fcb0acd62..7f186ecf499 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.11.0", - "@ui5/webcomponents-base": "~2.11.0", + "@ui5/webcomponents": "~2.12.0", + "@ui5/webcomponents-base": "~2.12.0", "cypress": "^12 || ^13 || ^14" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index e49c04991c0..4ca717af70f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.11.0", - "@ui5/webcomponents-base": "~2.11.0", - "@ui5/webcomponents-fiori": "~2.11.0", - "@ui5/webcomponents-icons": "~2.11.0", + "@ui5/webcomponents": "~2.12.0", + "@ui5/webcomponents-base": "~2.12.0", + "@ui5/webcomponents-fiori": "~2.12.0", + "@ui5/webcomponents-icons": "~2.12.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 28dad616650..d03111c4a39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6432,42 +6432,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.11.0 + "@ui5/webcomponents-ai": ~2.12.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-ai@npm:2.11.0" +"@ui5/webcomponents-ai@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-ai@npm:2.12.0" dependencies: - "@ui5/webcomponents": "npm:2.11.0" - "@ui5/webcomponents-base": "npm:2.11.0" - "@ui5/webcomponents-icons": "npm:2.11.0" - "@ui5/webcomponents-theming": "npm:2.11.0" - checksum: 10c0/ff9ff90f9a89a44d7cb8fa3a46ced344b3167b85609e86f36df2275f65276c8300c6df50aa77c0a9e2de2a03106fbbfcb749f37c425f2440ef063be574ab91c7 + "@ui5/webcomponents": "npm:2.12.0" + "@ui5/webcomponents-base": "npm:2.12.0" + "@ui5/webcomponents-icons": "npm:2.12.0" + "@ui5/webcomponents-theming": "npm:2.12.0" + checksum: 10c0/ae35808a765b285625759e81a114a25f1282c9087c692baf792010e14d7c375a3fcffff3ed354bdaa29b742ac54da4327dab30593878af1db4514fcf6e533650 languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-base@npm:2.11.0" +"@ui5/webcomponents-base@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-base@npm:2.12.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/9e4bba9c880fb6cc7d0957d866991640ec67d55e0efdfd466e7008324686f795f445dc31aced210e684504bc83794c132a5c8af8ce62b7d53f3dd5a84e288bcf + checksum: 10c0/e2810288991b687535c9eec92a92486a6a6f0ee419ade6a8e153c8160824366ddaaebb30835b1f85b312c81ccf97d72ab505d9ca418b474795f25ab6a4ffb428 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-compat@npm:2.11.0" +"@ui5/webcomponents-compat@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-compat@npm:2.12.0" dependencies: - "@ui5/webcomponents": "npm:2.11.0" - "@ui5/webcomponents-base": "npm:2.11.0" - "@ui5/webcomponents-icons": "npm:2.11.0" - "@ui5/webcomponents-theming": "npm:2.11.0" - checksum: 10c0/f33321d48103aa0bc69acb494fa15a5e9a0cc765ef4dee4299e198bb3f085cbfb224ad8cc6548c153e63e97344411fab559dca8ace46a795ad447e872f1bf1e2 + "@ui5/webcomponents": "npm:2.12.0" + "@ui5/webcomponents-base": "npm:2.12.0" + "@ui5/webcomponents-icons": "npm:2.12.0" + "@ui5/webcomponents-theming": "npm:2.12.0" + checksum: 10c0/f2ef197e2a7fae73e7721ea7857bc03b9f6edd949a80a65787c103b9033a5cb649dcbfdd6d000335460feded89a1d94fd99873a0d2daa6ee7eeac3f75f25c695 languageName: node linkType: hard @@ -6475,8 +6475,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.11.0 - "@ui5/webcomponents-base": ~2.11.0 + "@ui5/webcomponents": ~2.12.0 + "@ui5/webcomponents-base": ~2.12.0 cypress: ^12 || ^13 || ^14 peerDependenciesMeta: "@ui5/webcomponents": @@ -6486,53 +6486,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-fiori@npm:2.11.0" +"@ui5/webcomponents-fiori@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-fiori@npm:2.12.0" dependencies: - "@ui5/webcomponents": "npm:2.11.0" - "@ui5/webcomponents-base": "npm:2.11.0" - "@ui5/webcomponents-icons": "npm:2.11.0" - "@ui5/webcomponents-theming": "npm:2.11.0" + "@ui5/webcomponents": "npm:2.12.0" + "@ui5/webcomponents-base": "npm:2.12.0" + "@ui5/webcomponents-icons": "npm:2.12.0" + "@ui5/webcomponents-theming": "npm:2.12.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/bb106fd230f18b6db8ed22f5ce5b43d1b43dd88692f078edb28fab7a7131d2db2c828f953f89a694aa8808099717605e5461b2d9af2b26ce9c8e08d91fb9df1c + checksum: 10c0/19807d4873878713fe4216855242f8cf1a69fe9a074ab9795147caf7f75b2f428e683d50f1e485ef2d4a9d2f3225a799e55698f0e188513fa164f3c6381de91c languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.11.0" +"@ui5/webcomponents-icons-business-suite@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.12.0" dependencies: - "@ui5/webcomponents-base": "npm:2.11.0" - checksum: 10c0/674c9671fcb30f0961da5d66dd4145d1caa9ee883dc9b35d8196cdd084131c237ef2a0679b0157d7c33e59502d65aa68cb361d8698ed155b6d10aa13c41bbe23 + "@ui5/webcomponents-base": "npm:2.12.0" + checksum: 10c0/5c487e326582cda0b5caa4e48b596746ab924acc1addd0715ac8a1d67e8b060f7894f23741516b123fd79f55d328cd0a4f3103fc2eed4ce35804495ef0aa9126 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.11.0" +"@ui5/webcomponents-icons-tnt@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.12.0" dependencies: - "@ui5/webcomponents-base": "npm:2.11.0" - checksum: 10c0/21b11f63030028d3d584cb0d13f7c3780bcdeb906ee8525c08c1c5862d2580c3275541cd7a5484c59141398d9ab0ba93b7ea1aae3c5e8056c4c995a432ac05ec + "@ui5/webcomponents-base": "npm:2.12.0" + checksum: 10c0/40d38e3d0ac85f5c8dc671ca33289e65b04057c6a466be14d20d8ec5b715736356c923eb8cb361d56ee3a55d069812b831c84968d3b4a78f34acf9d0bd448e4e languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-icons@npm:2.11.0" +"@ui5/webcomponents-icons@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-icons@npm:2.12.0" dependencies: - "@ui5/webcomponents-base": "npm:2.11.0" - checksum: 10c0/e4d9352a7299315e2734fe86e0ae720cf989e80b6f9e665650a6ca36c0f52871a5d93255f2fc83f1f7bcf4ec105c3889a1dda9c5e83a190296f93dcaa04dae8a + "@ui5/webcomponents-base": "npm:2.12.0" + checksum: 10c0/5f93ea6d05c4028534cd2538d9ba32e1153e0477a9bb8aaec12dd0a2088ed02835a33f791a5759bfde0efac38c74b032016f25f7abe7f3e4c05a33c6b76e3da9 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-localization@npm:2.11.0" +"@ui5/webcomponents-localization@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-localization@npm:2.12.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.11.0" - checksum: 10c0/ce354bc724eabce0fb37983c5181f1764a16154051df4c74327a81450a4d8f50b7642345788e046ef14057b232f74ac86254299277b8d1d60e5755c5103491ad + "@ui5/webcomponents-base": "npm:2.12.0" + checksum: 10c0/b7e03d10a7007c20fd3183ad2e53021db61512ec053b5f8205fe13f7d4bbacf389fc384062880efa927cf7fbeb3110fee644ec9f9d818959f978a8c460bb3c6c languageName: node linkType: hard @@ -6541,7 +6541,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.11.0 + "@ui5/webcomponents-base": ~2.12.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -6559,8 +6559,8 @@ __metadata: react-content-loader: "npm:7.0.2" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.11.0 - "@ui5/webcomponents-react-base": ~2.11.0 + "@ui5/webcomponents-react": ~2.12.0 + "@ui5/webcomponents-react-base": ~2.12.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -6585,8 +6585,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.11.0 - "@ui5/webcomponents-react": ~2.11.0 + "@ui5/webcomponents-compat": ~2.12.0 + "@ui5/webcomponents-react": ~2.12.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -6612,10 +6612,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.11.0 - "@ui5/webcomponents-base": ~2.11.0 - "@ui5/webcomponents-fiori": ~2.11.0 - "@ui5/webcomponents-icons": ~2.11.0 + "@ui5/webcomponents": ~2.12.0 + "@ui5/webcomponents-base": ~2.12.0 + "@ui5/webcomponents-fiori": ~2.12.0 + "@ui5/webcomponents-icons": ~2.12.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -6630,19 +6630,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-theming@npm:2.11.0" +"@ui5/webcomponents-theming@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-theming@npm:2.12.0" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.11.0" - checksum: 10c0/6cf6527d0cbc4fdd3132256cb9d6255722619caeb15c88c53946f2c618b8362c1362a82d65fb1d10b7f89d6c1d0051c4f5d251dfdf000f584fd3ccb281678bb6 + "@ui5/webcomponents-base": "npm:2.12.0" + checksum: 10c0/339c20f3ad504e986225dda1d5801734ca3f852230a6b55fa92b5af427bd739e18fa082fc47207c65ddf347d089bd510a406a626122b5713ef552287946ed2d5 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents-tools@npm:2.11.0" +"@ui5/webcomponents-tools@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents-tools@npm:2.12.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -6700,21 +6700,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/9ede5c5c283c6da412ed42c2e170d24cad51b19764c7f82c2c210e00c9a87b85dd602ee8851983788a90f7748359548ff741deaf2676c6bca5593ba76b9905a0 + checksum: 10c0/64afed3afe3ac7e766d737f013343031a57928eb3a47ac4be8b1846c72fa641db4a86a0fb0352a27289ae38f916e1737225a6a61b48d9f296e134167dd18e8ca languageName: node linkType: hard -"@ui5/webcomponents@npm:2.11.0": - version: 2.11.0 - resolution: "@ui5/webcomponents@npm:2.11.0" +"@ui5/webcomponents@npm:2.12.0": + version: 2.12.0 + resolution: "@ui5/webcomponents@npm:2.12.0" dependencies: - "@ui5/webcomponents-base": "npm:2.11.0" - "@ui5/webcomponents-icons": "npm:2.11.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.11.0" - "@ui5/webcomponents-icons-tnt": "npm:2.11.0" - "@ui5/webcomponents-localization": "npm:2.11.0" - "@ui5/webcomponents-theming": "npm:2.11.0" - checksum: 10c0/3bf5bbe48385c7aa256e858da335c4a8a5989f1ebaa69327462d92afe0a55d279a2370d2fc342f7ab1bb9931a4385bf7c4370b787ebb4c2c86173b931f71fe79 + "@ui5/webcomponents-base": "npm:2.12.0" + "@ui5/webcomponents-icons": "npm:2.12.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.12.0" + "@ui5/webcomponents-icons-tnt": "npm:2.12.0" + "@ui5/webcomponents-localization": "npm:2.12.0" + "@ui5/webcomponents-theming": "npm:2.12.0" + checksum: 10c0/6658a2ab459115b4507e71769efb2d11ba4afca123246937cd3b194bd1711d13daccfa3401e5c64cc4cde4365b1354a54a16ac93fdf91e593522f5e7535f0277 languageName: node linkType: hard @@ -24376,12 +24376,12 @@ __metadata: "@types/node": "npm:22.15.34" "@types/react": "npm:19.1.8" "@types/react-dom": "npm:19.1.6" - "@ui5/webcomponents": "npm:2.11.0" - "@ui5/webcomponents-ai": "npm:2.11.0" - "@ui5/webcomponents-compat": "npm:2.11.0" - "@ui5/webcomponents-fiori": "npm:2.11.0" - "@ui5/webcomponents-icons": "npm:2.11.0" - "@ui5/webcomponents-tools": "npm:2.11.0" + "@ui5/webcomponents": "npm:2.12.0" + "@ui5/webcomponents-ai": "npm:2.12.0" + "@ui5/webcomponents-compat": "npm:2.12.0" + "@ui5/webcomponents-fiori": "npm:2.12.0" + "@ui5/webcomponents-icons": "npm:2.12.0" + "@ui5/webcomponents-tools": "npm:2.12.0" "@vitejs/plugin-react": "npm:4.6.0" chromatic: "npm:13.0.1" cssnano: "npm:7.0.7" From c4fbac8e172018df57f4067dab4170ea013af33a Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 13:23:43 +0200 Subject: [PATCH 02/10] run wrapper script (main) --- .../custom-element-manifests/fiori.json | 371 +++++++++-- .storybook/custom-element-manifests/main.json | 627 +++++++++++++++++- .../src/webComponents/AvatarGroup/index.tsx | 20 +- .../main/src/webComponents/CheckBox/index.tsx | 14 +- .../main/src/webComponents/Dialog/index.tsx | 27 +- .../webComponents/DynamicDateRange/index.tsx | 18 +- .../main/src/webComponents/Menu/index.tsx | 6 +- .../main/src/webComponents/MenuItem/index.tsx | 45 +- .../src/webComponents/MenuItemGroup/index.tsx | 63 ++ .../main/src/webComponents/Popover/index.tsx | 18 + .../webComponents/ResponsivePopover/index.tsx | 18 + .../main/src/webComponents/ShellBar/index.tsx | 20 +- .../webComponents/ShellBarBranding/index.tsx | 95 +++ .../SideNavigationItem/index.tsx | 17 +- .../SideNavigationSubItem/index.tsx | 17 +- .../main/src/webComponents/Switch/index.tsx | 9 +- .../TableSelectionMulti/index.tsx | 13 +- .../main/src/webComponents/Toast/index.tsx | 2 +- .../src/webComponents/UserMenuItem/index.tsx | 43 +- .../webComponents/UserMenuItemGroup/index.tsx | 64 ++ 20 files changed, 1383 insertions(+), 124 deletions(-) create mode 100644 packages/main/src/webComponents/MenuItemGroup/index.tsx create mode 100644 packages/main/src/webComponents/ShellBarBranding/index.tsx create mode 100644 packages/main/src/webComponents/UserMenuItemGroup/index.tsx diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index c98d2fd5dfd..5bcaef6d7c9 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -380,7 +380,7 @@ "privacy": "public", "description": "\"No Email v1\" illustration type.", "default": "NoMail_v1", - "deprecated": "Since 2.10.0, use NoMail instead", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", "name": "NoMail_v1", "readonly": true }, @@ -417,7 +417,7 @@ "privacy": "public", "description": "\"No Saved Items v1\" illustration type.", "default": "NoSavedItems_v1", - "deprecated": "Since 2.10.0, use NoSavedItems instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", "name": "NoSavedItems_v1", "readonly": true }, @@ -445,7 +445,7 @@ "privacy": "public", "description": "\"No Tasks v1\" illustration type.", "default": "NoTasks_v1", - "deprecated": "Since 2.10.0, use NoTasks instead", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", "name": "NoTasks_v1", "readonly": true }, @@ -455,7 +455,7 @@ "privacy": "public", "description": "\"No Dimensions Set\" illustration type.", "default": "NoDimensionsSet", - "deprecated": "Since 2.10.0, use NoChartData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", "name": "NoDimensionsSet", "readonly": true }, @@ -501,7 +501,7 @@ "privacy": "public", "description": "\"Add Column\" illustration type.", "default": "AddColumn", - "deprecated": "Since 2.10.0, use AddingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", "name": "AddColumn", "readonly": true }, @@ -511,7 +511,7 @@ "privacy": "public", "description": "\"Add People\" illustration type.", "default": "AddPeople", - "deprecated": "Since 2.10.0, use AddPeopleToCalendar instead", + "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", "name": "AddPeople", "readonly": true }, @@ -530,7 +530,7 @@ "privacy": "public", "description": "\"Balloon Sky\" illustration type.", "default": "BalloonSky", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "BalloonSky", "readonly": true }, @@ -540,7 +540,7 @@ "privacy": "public", "description": "\"Connection\" illustration type.", "default": "Connection", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "Connection", "readonly": true }, @@ -550,7 +550,7 @@ "privacy": "public", "description": "\"Empty Calendar\" illustration type.", "default": "EmptyCalendar", - "deprecated": "Since 2.10.0, use NoActivities instead", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", "name": "EmptyCalendar", "readonly": true }, @@ -560,7 +560,7 @@ "privacy": "public", "description": "\"Empty List\" illustration type.", "default": "EmptyList", - "deprecated": "Since 2.10.0, use NoEntries instead", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", "name": "EmptyList", "readonly": true }, @@ -579,7 +579,7 @@ "privacy": "public", "description": "\"Error Screen\" illustration type.", "default": "ErrorScreen", - "deprecated": "Since 2.10.0, use UnableToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", "name": "ErrorScreen", "readonly": true }, @@ -589,7 +589,7 @@ "privacy": "public", "description": "\"Filter Table\" illustration type.", "default": "FilterTable", - "deprecated": "Since 2.10.0, use FilteringColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", "name": "FilterTable", "readonly": true }, @@ -599,7 +599,7 @@ "privacy": "public", "description": "\"Group Table\" illustration type.", "default": "GroupTable", - "deprecated": "Since 2.10.0, use GroupingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", "name": "GroupTable", "readonly": true }, @@ -645,7 +645,7 @@ "privacy": "public", "description": "\"Reload Screen\" illustration type.", "default": "ReloadScreen", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "ReloadScreen", "readonly": true }, @@ -655,7 +655,7 @@ "privacy": "public", "description": "\"Resize Column\" illustration type.", "default": "ResizeColumn", - "deprecated": "Since 2.10.0, use ResizingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use ResizingColumns instead.", "name": "ResizeColumn", "readonly": true }, @@ -683,7 +683,7 @@ "privacy": "public", "description": "\"Search Earth\" illustration type.", "default": "SearchEarth", - "deprecated": "Since 2.10.0, use BeforeSearch instead", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", "name": "SearchEarth", "readonly": true }, @@ -693,7 +693,7 @@ "privacy": "public", "description": "\"Search Folder\" illustration type.", "default": "SearchFolder", - "deprecated": "Since 2.10.0, use NoSearchResults instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", "name": "SearchFolder", "readonly": true }, @@ -712,7 +712,7 @@ "privacy": "public", "description": "\"Simple Balloon\" illustration type.", "default": "SimpleBalloon", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SimpleBalloon", "readonly": true }, @@ -722,7 +722,7 @@ "privacy": "public", "description": "\"Simple Bell\" illustration type.", "default": "SimpleBell", - "deprecated": "Since 2.10.0, use NoNotifications instead", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", "name": "SimpleBell", "readonly": true }, @@ -732,7 +732,7 @@ "privacy": "public", "description": "\"Simple Calendar\" illustration type.", "default": "SimpleCalendar", - "deprecated": "Since 2.10.0, use NoActivities instead", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", "name": "SimpleCalendar", "readonly": true }, @@ -742,7 +742,7 @@ "privacy": "public", "description": "\"Simple CheckMark\" illustration type.", "default": "SimpleCheckMark", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SimpleCheckMark", "readonly": true }, @@ -752,7 +752,7 @@ "privacy": "public", "description": "\"Simple Connection\" illustration type.", "default": "SimpleConnection", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "SimpleConnection", "readonly": true }, @@ -762,7 +762,7 @@ "privacy": "public", "description": "\"Simple Empty Doc\" illustration type.", "default": "SimpleEmptyDoc", - "deprecated": "Since 2.10.0, use NoData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", "name": "SimpleEmptyDoc", "readonly": true }, @@ -772,7 +772,7 @@ "privacy": "public", "description": "\"Simple Empty List\" illustration type.", "default": "SimpleEmptyList", - "deprecated": "Since 2.10.0, use NoEntries instead", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", "name": "SimpleEmptyList", "readonly": true }, @@ -782,7 +782,7 @@ "privacy": "public", "description": "\"Simple Error\" illustration type.", "default": "SimpleError", - "deprecated": "Since 2.10.0, use UnableToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", "name": "SimpleError", "readonly": true }, @@ -792,7 +792,7 @@ "privacy": "public", "description": "\"Simple Magnifier\" illustration type.", "default": "SimpleMagnifier", - "deprecated": "Since 2.10.0, use BeforeSearch instead", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", "name": "SimpleMagnifier", "readonly": true }, @@ -802,7 +802,7 @@ "privacy": "public", "description": "\"Simple Mail\" illustration type.", "default": "SimpleMail", - "deprecated": "Since 2.10.0, use NoMail instead", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", "name": "SimpleMail", "readonly": true }, @@ -812,7 +812,7 @@ "privacy": "public", "description": "\"Simple No Saved Items\" illustration type.", "default": "SimpleNoSavedItems", - "deprecated": "Since 2.10.0, use NoSavedItems instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", "name": "SimpleNoSavedItems", "readonly": true }, @@ -822,7 +822,7 @@ "privacy": "public", "description": "\"Simple Not Found Magnifier\" illustration type.", "default": "SimpleNotFoundMagnifier", - "deprecated": "Since 2.10.0, use NoSearchResults instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", "name": "SimpleNotFoundMagnifier", "readonly": true }, @@ -832,7 +832,7 @@ "privacy": "public", "description": "\"Simple Reload\" illustration type.", "default": "SimpleReload", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "SimpleReload", "readonly": true }, @@ -842,7 +842,7 @@ "privacy": "public", "description": "\"Simple Task\" illustration type.", "default": "SimpleTask", - "deprecated": "Since 2.10.0, use NoTasks instead", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", "name": "SimpleTask", "readonly": true }, @@ -852,7 +852,7 @@ "privacy": "public", "description": "\"Sleeping Bell\" illustration type.", "default": "SleepingBell", - "deprecated": "Since 2.10.0, use NoNotifications instead", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", "name": "SleepingBell", "readonly": true }, @@ -862,7 +862,7 @@ "privacy": "public", "description": "\"Sort Column\" illustration type.", "default": "SortColumn", - "deprecated": "Since 2.10.0, use SortingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use SortingColumns instead.", "name": "SortColumn", "readonly": true }, @@ -881,7 +881,7 @@ "privacy": "public", "description": "\"Success Balloon\" illustration type.", "default": "SuccessBalloon", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SuccessBalloon", "readonly": true }, @@ -891,7 +891,7 @@ "privacy": "public", "description": "\"Success CheckMark\" illustration type.", "default": "SuccessCheckMark", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SuccessCheckMark", "readonly": true }, @@ -901,7 +901,7 @@ "privacy": "public", "description": "\"Success HighFive\" illustration type.", "default": "SuccessHighFive", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SuccessHighFive", "readonly": true }, @@ -911,7 +911,7 @@ "privacy": "public", "description": "\"Success Screen\" illustration type.", "default": "SuccessScreen", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SuccessScreen", "readonly": true }, @@ -930,7 +930,7 @@ "privacy": "public", "description": "\"Tent\" illustration type.", "default": "Tent", - "deprecated": "Since 2.10.0, use NoData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", "name": "Tent", "readonly": true }, @@ -940,7 +940,7 @@ "privacy": "public", "description": "\"Upload Collection\" illustration type.", "default": "UploadCollection", - "deprecated": "Since 2.10.0, use DragFilesToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", "name": "UploadCollection", "readonly": true }, @@ -6459,6 +6459,22 @@ }, "_ui5privacy": "public" }, + { + "name": "branding", + "description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.", + "_ui5since": "2.12.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ShellBarBranding", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarBranding.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the ``.", @@ -7136,6 +7152,138 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/ShellBarBranding.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.", + "name": "ShellBarBranding", + "slots": [ + { + "name": "default", + "description": "Defines the title for the ui5-shellbar-branding 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": "content", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "name": "logo", + "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired, when the logo is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-shellbar-branding", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-shellbar-branding", + "declaration": { + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/ShellBarItem.js", @@ -8178,7 +8326,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public", "inheritedFrom": { "name": "SideNavigationSelectableItemBase", @@ -8206,7 +8354,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0", @@ -8244,7 +8392,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0", "inheritedFrom": { @@ -8343,7 +8491,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -8369,7 +8517,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -8395,7 +8543,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -8668,7 +8816,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public" }, { @@ -8688,7 +8836,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0" @@ -8718,7 +8866,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0" }, @@ -8850,7 +8998,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -8868,7 +9016,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -8886,7 +9034,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -8995,7 +9143,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public", "inheritedFrom": { "name": "SideNavigationSelectableItemBase", @@ -9023,7 +9171,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0", @@ -9061,7 +9209,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0", "inheritedFrom": { @@ -9161,7 +9309,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -9187,7 +9335,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -9213,7 +9361,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -11124,7 +11272,7 @@ }, { "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", "_ui5since": "2.0.0", "_ui5type": { "text": "Array" @@ -11201,7 +11349,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "privacy": "public", "inheritedFrom": { "name": "ListItemBase", @@ -11215,7 +11363,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -11226,7 +11374,7 @@ "text": "number" }, "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -11260,6 +11408,17 @@ "module": "dist/ListItem.js" } }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "accessibilityAttributes", @@ -11381,7 +11540,7 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, @@ -11437,6 +11596,18 @@ "_ui5Bubbles": false, "_ui5since": "1.10.0" }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, { "name": "detail-click", "_ui5privacy": "public", @@ -11474,6 +11645,82 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/UserMenuItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`", + "name": "UserMenuItemGroup", + "superclass": { + "name": "MenuItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/MenuItemGroup.js" + }, + "tagName": "ui5-user-menu-item-group", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "name": "checkMode", + "type": { + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the component's check mode.", + "privacy": "public" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu-item-group", + "declaration": { + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/UserSettingsDialog.js", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index e2f88553a00..8c7e12d697a 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -25,7 +25,7 @@ "kind": "class", "description": "", "name": "DateRangeRange", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -48,7 +48,7 @@ "kind": "class", "description": "", "name": "SingleDate", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -71,7 +71,7 @@ "kind": "class", "description": "", "name": "Today", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -94,7 +94,7 @@ "kind": "class", "description": "", "name": "Tomorrow", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -117,7 +117,7 @@ "kind": "class", "description": "", "name": "Yesterday", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -2517,6 +2517,58 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/MenuItemGroupCheckMode.js", + "declarations": [ + { + "kind": "enum", + "name": "MenuItemGroupCheckMode", + "description": "Menu item group check modes.", + "_ui5privacy": "public", + "_ui5since": "2.12.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "default type (items in a group cannot be checked)", + "default": "None", + "name": "None", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Single item check mode (only one item in a group can be checked at a time)", + "default": "Single", + "name": "Single", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multiple items check mode (multiple items in a group can be checked at a time)", + "default": "Multiple", + "name": "Multiple", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuItemGroupCheckMode", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/MessageStripDesign.js", @@ -3397,7 +3449,7 @@ { "kind": "enum", "name": "TableOverflowMode", - "description": "Column mode of the <ui5-table> component.", + "description": "Overflow mode of the <ui5-table> component.", "_ui5experimental": true, "_ui5privacy": "public", "members": [ @@ -3529,6 +3581,49 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/TableSelectionMultiHeaderSelector.js", + "declarations": [ + { + "kind": "enum", + "name": "TableSelectionMultiHeaderSelector", + "description": "Selectors of the table header row in multi-selection scenarios.", + "_ui5privacy": "public", + "_ui5since": "2.12", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", + "default": "SelectAll", + "name": "SelectAll", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders an icon in the table header row that removes the selection of all rows.", + "default": "ClearAll", + "name": "ClearAll", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionMultiHeaderSelector", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/TagDesign.js", @@ -4467,6 +4562,28 @@ "privacy": "public", "_ui5since": "2.0.0" }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.12.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "hiddenItems", @@ -4574,6 +4691,24 @@ "text": "AvatarGroupAccessibilityAttributes" } }, + { + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", "name": "hidden-items", @@ -5761,6 +5896,10 @@ "description": "Used to style the day cells in between of selected months in range.", "name": "month-cell-selected-between" }, + { + "description": "Used to style the month picker root container.", + "name": "month-picker-root" + }, { "description": "Used to style the year cells.", "name": "year-cell" @@ -5773,6 +5912,10 @@ "description": "Used to style the year cells in between of selected years in range.", "name": "year-cell-selected-between" }, + { + "description": "Used to style the year picker root container.", + "name": "year-picker-root" + }, { "description": "Used to style the year range cells.", "name": "year-range-cell" @@ -5784,6 +5927,10 @@ { "description": "Used to style the year range cells in between of selected year ranges.", "name": "year-range-cell-selected-between" + }, + { + "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", + "name": "calendar-header-middle-button" } ], "slots": [ @@ -7611,6 +7758,16 @@ "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"on\"", + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "privacy": "public" } ], "events": [ @@ -7734,6 +7891,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "name": "value", + "default": "\"on\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -11853,6 +12019,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -12011,6 +12207,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -12170,7 +12392,7 @@ "name": "IDynamicDateRangeOption", "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Date[]`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", "_ui5privacy": "public", - "_ui5since": "2.10.0" + "_ui5since": "2.11.0" }, { "kind": "class", @@ -12204,6 +12426,35 @@ "default": "\"\"", "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", "privacy": "public" + }, + { + "kind": "method", + "name": "toDates", + "return": { + "type": { + "text": "Array" + }, + "description": "An array of two `Date` objects representing the start and end dates." + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "DynamicDateRangeValue", + "references": [ + { + "name": "DynamicDateRangeValue", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] + }, + "description": "The option to convert into an array of date ranges", + "_ui5privacy": "public" + } + ], + "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", + "privacy": "public" } ], "events": [ @@ -12246,6 +12497,7 @@ }, "tagName": "ui5-dynamic-date-range", "customElement": true, + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -16510,7 +16762,7 @@ }, { "kind": "class", - "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", + "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", "name": "Menu", "slots": [ { @@ -16820,7 +17072,7 @@ "slots": [ { "name": "default", - "description": "Defines the items of this component.\n\n**Note:** The slot can hold `ui5-menu-item` and `ui5-menu-separator` items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -16836,7 +17088,7 @@ }, { "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", "_ui5since": "2.0.0", "_ui5type": { "text": "Array" @@ -16903,7 +17155,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "privacy": "public", "inheritedFrom": { "name": "ListItemBase", @@ -16917,7 +17169,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -16928,7 +17180,7 @@ "text": "number" }, "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -16962,6 +17214,17 @@ "module": "dist/ListItem.js" } }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "accessibilityAttributes", @@ -17083,7 +17346,7 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, @@ -17139,6 +17402,18 @@ "_ui5Bubbles": false, "_ui5since": "1.10.0" }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, { "name": "detail-click", "_ui5privacy": "public", @@ -17184,7 +17459,7 @@ } }, { - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", @@ -17193,7 +17468,7 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "name": "loading", "default": "false", "fieldName": "loading", @@ -17202,7 +17477,7 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "name": "loading-delay", "default": "1000", "fieldName": "loadingDelay", @@ -17232,6 +17507,15 @@ "module": "dist/ListItem.js" } }, + { + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, { "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", "name": "accessibility-attributes", @@ -17335,6 +17619,99 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/MenuItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", + "name": "MenuItemGroup", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "checkMode", + "type": { + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the component's check mode.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the component's check mode.", + "name": "check-mode", + "default": "\"None\"", + "fieldName": "checkMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-menu-item-group", + "customElement": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-menu-item-group", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/MenuSeparator.js", @@ -19995,6 +20372,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -20180,6 +20587,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -20397,6 +20830,28 @@ "privacy": "public", "_ui5since": "1.10.0" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, { "kind": "field", "name": "preventInitialFocus", @@ -20541,6 +20996,24 @@ "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -21936,6 +22409,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -22201,6 +22704,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -23717,6 +24246,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/SliderTooltip.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SliderTooltip", + "module": "dist/SliderTooltip.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/SpecialCalendarDate.js", @@ -24922,6 +25466,17 @@ "default": "undefined", "privacy": "public", "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the form value of the component.", + "privacy": "public", + "_ui5since": "2.12.0" } ], "events": [ @@ -25027,6 +25582,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the form value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -27692,6 +28256,24 @@ "module": "dist/TableSelectionBase.js" } }, + { + "kind": "field", + "name": "headerSelector", + "type": { + "text": "TableSelectionMultiHeaderSelector", + "references": [ + { + "name": "TableSelectionMultiHeaderSelector", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + ] + }, + "default": "\"SelectAll\"", + "description": "Defines the selector of the header row.", + "privacy": "public", + "_ui5since": "2.12" + }, { "kind": "method", "name": "getSelectedRows", @@ -27811,6 +28393,15 @@ "module": "dist/TableSelectionBase.js" } }, + { + "description": "Defines the selector of the header row.", + "name": "header-selector", + "default": "\"SelectAll\"", + "fieldName": "headerSelector", + "type": { + "text": "\"SelectAll\" | \"ClearAll\"" + } + }, { "description": "Defines the selection behavior.", "name": "behavior", @@ -29605,7 +30196,7 @@ "description": "Fired after the component is auto closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.0.0" } ], diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index f0e1c6529cc..1782b882278 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -25,6 +25,24 @@ interface AvatarGroupAttributes { */ accessibilityAttributes?: AvatarGroupAccessibilityAttributes; + /** + * Defines the accessible name of the AvatarGroup. + * When provided, this will override the default aria-label text. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(s) of the elements that describe the AvatarGroup. + * When provided, this will be used as aria-labelledby instead of aria-label. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines the mode of the `AvatarGroup`. * @default "Group" @@ -149,7 +167,7 @@ interface AvatarGroupPropTypes */ const AvatarGroup = withWebComponent( 'ui5-avatar-group', - ['accessibilityAttributes', 'type'], + ['accessibilityAttributes', 'accessibleName', 'accessibleNameRef', 'type'], [], ['overflowButton'], ['click', 'overflow'], diff --git a/packages/main/src/webComponents/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx index 9007983a217..d9202714e94 100644 --- a/packages/main/src/webComponents/CheckBox/index.tsx +++ b/packages/main/src/webComponents/CheckBox/index.tsx @@ -102,6 +102,18 @@ interface CheckBoxAttributes { */ text?: string | undefined; + /** + * Defines the form value of the component that is submitted when the checkbox is checked. + * + * When a form containing `CheckBox` elements is submitted, only the values of the + * **checked** checkboxes are included in the form data sent to the server. Unchecked + * checkboxes do not contribute any data to the form submission. + * + * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options. + * @default "on" + */ + value?: string; + /** * Defines the value state of the component. * @default "None" @@ -167,7 +179,7 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit( 'ui5-checkbox', - ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'], + ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'], ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'], [], ['change'], diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 15b62dfdf6b..e9dae5712c6 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -9,6 +9,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui import type { ReactNode } from 'react'; interface DialogAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @default undefined @@ -259,7 +275,16 @@ interface DialogPropTypes */ const Dialog = withWebComponent( 'ui5-dialog', - ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'], + [ + 'accessibleDescription', + 'accessibleDescriptionRef', + 'accessibleName', + 'accessibleNameRef', + 'accessibleRole', + 'headerText', + 'initialFocus', + 'state', + ], ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open'], diff --git a/packages/main/src/webComponents/DynamicDateRange/index.tsx b/packages/main/src/webComponents/DynamicDateRange/index.tsx index 79bdb0347fc..3cd3191c966 100644 --- a/packages/main/src/webComponents/DynamicDateRange/index.tsx +++ b/packages/main/src/webComponents/DynamicDateRange/index.tsx @@ -1,10 +1,7 @@ 'use client'; import '@ui5/webcomponents/dist/DynamicDateRange.js'; -import type { - DynamicDateRangeChangeEventDetail, - DynamicDateRangeValue, -} from '@ui5/webcomponents/dist/DynamicDateRange.js'; +import type { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; @@ -22,7 +19,14 @@ interface DynamicDateRangeAttributes { value?: DynamicDateRangeValue | undefined; } -interface DynamicDateRangeDomRef extends Required, Ui5DomRef {} +interface DynamicDateRangeDomRef extends Required, Ui5DomRef { + /** + * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects. + * @param {DynamicDateRangeValue} value - The option to convert into an array of date ranges + * @returns {Array} - An array of two `Date` objects representing the start and end dates. + */ + toDates: (value: DynamicDateRangeValue) => Array; +} interface DynamicDateRangePropTypes extends DynamicDateRangeAttributes, @@ -36,7 +40,7 @@ interface DynamicDateRangePropTypes * | :--------: | :-----: | * | ✅|✅| */ - onChange?: (event: Ui5CustomEvent) => void; + onChange?: (event: Ui5CustomEvent) => void; } /** @@ -63,6 +67,8 @@ interface DynamicDateRangePropTypes * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of __@ui5/webcomponents__. */ const DynamicDateRange = withWebComponent( 'ui5-dynamic-date-range', diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index fb2c92f1c0b..bda101d9fcd 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -163,7 +163,11 @@ interface MenuPropTypes * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items * - * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped. + * **Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped. + * + * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot + * have the correct accessibility behaviour, including their enabled or disabled states. + * The menu does not manage these aspects when the menu item state changes. * * * diff --git a/packages/main/src/webComponents/MenuItem/index.tsx b/packages/main/src/webComponents/MenuItem/index.tsx index 53563bd6a45..01b82de4bbb 100644 --- a/packages/main/src/webComponents/MenuItem/index.tsx +++ b/packages/main/src/webComponents/MenuItem/index.tsx @@ -49,9 +49,22 @@ interface MenuItemAttributes { additionalText?: string | undefined; /** - * Defines whether `MenuItem` is in disabled state. + * Defines whether menu item is in checked state. * - * **Note:** A disabled `MenuItem` is noninteractive. + * **Note:** checked state is only taken into account when menu item is added to menu item group + * with `checkMode` other than `None`. + * + * **Note:** A checked menu item has a checkmark displayed at its end. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * @default false + */ + checked?: boolean; + + /** + * Defines whether menu item is in disabled state. + * + * **Note:** A disabled menu item is noninteractive. * @default false */ disabled?: boolean; @@ -77,9 +90,9 @@ interface MenuItemAttributes { icon?: string | undefined; /** - * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover. + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover. * - * **Note:** If set to `true` a `BusyIndicator` component will be displayed into the related one to the current `MenuItem` sub-menu popover. + * **Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover. * * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents**. * @default false @@ -87,7 +100,7 @@ interface MenuItemAttributes { loading?: boolean; /** - * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover. + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover. * * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents**. * @default 1000 @@ -146,6 +159,7 @@ interface MenuItemPropTypes | 'endContent' | 'onBeforeClose' | 'onBeforeOpen' + | 'onCheck' | 'onClose' | 'onDetailClick' | 'onOpen' @@ -153,7 +167,7 @@ interface MenuItemPropTypes /** * Defines the items of this component. * - * **Note:** The slot can hold `MenuItem` and `MenuSeparator` items. + * **Note:** The slot can hold menu item and menu separator items. * * If there are items added to this slot, an arrow will be displayed at the end * of the item in order to indicate that there are items added. In that case components added @@ -191,6 +205,10 @@ interface MenuItemPropTypes * The priority of what will be displayed at the end of the menu item is as follows: * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`. * + * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot + * have the correct accessibility behaviour, including their enabled or disabled states. + * The menu does not manage these aspects when the menu item state changes. + * * __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="endContent"`). * 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. * @@ -228,6 +246,17 @@ interface MenuItemPropTypes */ onBeforeOpen?: (event: Ui5CustomEvent) => void; + /** + * Fired when an item is checked or unchecked. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onCheck?: (event: Ui5CustomEvent) => void; + /** * Fired after the menu is closed. * @@ -287,9 +316,9 @@ const MenuItem = withWebComponent( 'tooltip', 'type', ], - ['disabled', 'loading', 'navigated', 'selected'], + ['checked', 'disabled', 'loading', 'navigated', 'selected'], ['deleteButton', 'endContent'], - ['before-close', 'before-open', 'close', 'detail-click', 'open'], + ['before-close', 'before-open', 'check', 'close', 'detail-click', 'open'], ); MenuItem.displayName = 'MenuItem'; diff --git a/packages/main/src/webComponents/MenuItemGroup/index.tsx b/packages/main/src/webComponents/MenuItemGroup/index.tsx new file mode 100644 index 00000000000..6fea2975ab5 --- /dev/null +++ b/packages/main/src/webComponents/MenuItemGroup/index.tsx @@ -0,0 +1,63 @@ +'use client'; + +import '@ui5/webcomponents/dist/MenuItemGroup.js'; +import type MenuItemGroupCheckMode from '@ui5/webcomponents/dist/types/MenuItemGroupCheckMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface MenuItemGroupAttributes { + /** + * Defines the component's check mode. + * @default "None" + */ + checkMode?: MenuItemGroupCheckMode | keyof typeof MenuItemGroupCheckMode; +} + +interface MenuItemGroupDomRef extends Required, Ui5DomRef {} + +interface MenuItemGroupPropTypes + extends MenuItemGroupAttributes, + Omit { + /** + * Defines the items of this component. + * **Note:** The slot can hold any combination of components of type `MenuItem` or `MenuSeparator` or both. + */ + children?: ReactNode | ReactNode[]; +} + +/** + * The `MenuItemGroup` component represents a group of items designed for use inside a `Menu`. + * Items belonging to the same group should be wrapped by a `MenuItemGroup`. + * Each group can have an `checkMode` property, which defines the check mode for the items within the group. + * The possible values for `checkMode` are: + * - 'None' (default) - no items can be checked + * - 'Single' - Only one item can be checked at a time + * - 'Multiple' - Multiple items can be checked simultaneously + * + * **Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time. + * If multiple items are marked as checked, the last checked item will take precedence. + * + * ### Usage + * + * `MenuItemGroup` represents a collection of `MenuItem` components that can have the same check mode. + * The items are addeed to the group's `items` slot. + * + * + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of __@ui5/webcomponents__. + */ +const MenuItemGroup = withWebComponent( + 'ui5-menu-item-group', + ['checkMode'], + [], + [], + [], +); + +MenuItemGroup.displayName = 'MenuItemGroup'; + +export { MenuItemGroup }; +export type { MenuItemGroupDomRef, MenuItemGroupPropTypes }; diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index f6bd8234a9f..21e79f6d7f3 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -11,6 +11,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface PopoverAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @default undefined @@ -238,6 +254,8 @@ interface PopoverPropTypes const Popover = withWebComponent( 'ui5-popover', [ + 'accessibleDescription', + 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index 11112a0049c..fbfe155d3a6 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -11,6 +11,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface ResponsivePopoverAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @default undefined @@ -226,6 +242,8 @@ interface ResponsivePopoverPropTypes const ResponsivePopover = withWebComponent( 'ui5-responsive-popover', [ + 'accessibleDescription', + 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx index 65696ff64fd..4c9f52630d8 100644 --- a/packages/main/src/webComponents/ShellBar/index.tsx +++ b/packages/main/src/webComponents/ShellBar/index.tsx @@ -160,6 +160,7 @@ interface ShellBarPropTypes CommonProps, | keyof ShellBarAttributes | 'assistant' + | 'branding' | 'children' | 'content' | 'logo' @@ -189,6 +190,23 @@ interface ShellBarPropTypes */ assistant?: UI5WCSlotsNode; + /** + * Defines the branding slot. + * The `ShellBarBranding` component is intended to be placed inside this slot. + * Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot. + * + * **Note:** The `branding` slot is in an experimental state and is a subject to change. + * + * __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="branding"`). + * 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. + * + * __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://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents-fiori**. + */ + branding?: UI5WCSlotsNode; + /** * Defines the `ShellBar` additional items. * @@ -401,7 +419,7 @@ const ShellBar = withWebComponent( 'ui5-shellbar', ['accessibilityAttributes', 'notificationsCount', 'primaryTitle', 'secondaryTitle'], ['disableSearchCollapse', 'hideSearchButton', 'showNotifications', 'showProductSwitch', 'showSearchField'], - ['assistant', 'content', 'logo', 'menuItems', 'profile', 'searchField', 'startButton'], + ['assistant', 'branding', 'content', 'logo', 'menuItems', 'profile', 'searchField', 'startButton'], [ 'content-item-visibility-change', 'logo-click', diff --git a/packages/main/src/webComponents/ShellBarBranding/index.tsx b/packages/main/src/webComponents/ShellBarBranding/index.tsx new file mode 100644 index 00000000000..bcec4ed2619 --- /dev/null +++ b/packages/main/src/webComponents/ShellBarBranding/index.tsx @@ -0,0 +1,95 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/ShellBarBranding.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface ShellBarBrandingAttributes { + /** + * Defines the text alternative of the component. + * If not provided a default text alternative will be set, if present. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Defines the component href. + * + * **Note:** Standard hyperlink behavior is supported. + * @default undefined + */ + href?: string | undefined; + + /** + * Defines the component target. + * + * **Notes:** + * + * - `_self` + * - `_top` + * - `_blank` + * - `_parent` + * - `_search` + * + * **This property must only be used when the `href` property is set.** + * @default undefined + */ + target?: string | undefined; +} + +interface ShellBarBrandingDomRef extends Required, Ui5DomRef {} + +interface ShellBarBrandingPropTypes + extends ShellBarBrandingAttributes, + Omit { + /** + * Defines the title for the ui5-shellbar-branding component. + * + * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + */ + children?: ReactNode | ReactNode[]; + + /** + * Defines the logo of the `ShellBar`. + * For example, you can use `ui5-avatar` or `img` elements as logo. + * + * __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="logo"`). + * 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. + * + * __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://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + */ + logo?: UI5WCSlotsNode; + /** + * Fired, when the logo is activated. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onClick?: (event: Ui5CustomEvent) => void; +} + +/** + * The `ShellBarBranding` component is intended to be placed inside the branding slot of the + * `ShellBar` component. Its content has higher priority than the `primaryTitle` property + * and the `logo` slot of `ShellBar`. + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of __@ui5/webcomponents-fiori__. + * @experimental + */ +const ShellBarBranding = withWebComponent( + 'ui5-shellbar-branding', + ['accessibleName', 'href', 'target'], + [], + ['logo'], + ['click'], +); + +ShellBarBranding.displayName = 'ShellBarBranding'; + +export { ShellBarBranding }; +export type { ShellBarBrandingDomRef, ShellBarBrandingPropTypes }; diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx index b93c8113847..426e315d2cc 100644 --- a/packages/main/src/webComponents/SideNavigationItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx @@ -71,7 +71,9 @@ interface SideNavigationItemAttributes { icon?: string | undefined; /** - * Defines whether the item is selected + * Defines whether the item is selected. + * + * **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable. * @default false */ selected?: boolean; @@ -79,15 +81,16 @@ interface SideNavigationItemAttributes { /** * Defines the component target. * - * **Notes:** + * Possible values: * * - `_self` * - `_top` * - `_blank` * - `_parent` - * - `_search` + * - `framename` * - * **This property must only be used when the `href` property is set.** + * **Note:** Items that have a defined `href` and `target` + * attribute set to `_blank` should not be selectable. * * **Note:** Available since [v1.19.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.19.0) of **@ui5/webcomponents-fiori**. * @default undefined @@ -112,15 +115,15 @@ interface SideNavigationItemAttributes { tooltip?: string | undefined; /** - * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable. + * Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable. * * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items. * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation. * * * **Guidelines**: - * - External links should be unselectable. - * - Items that trigger actions (with design "Action") should be unselectable. + * - Items with an assigned `href` and a target of `_blank` should be marked as unselectable. + * - Items that trigger actions (with design "Action") should be marked as unselectable. * * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents-fiori**. * @default false diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx index deeee35a6eb..e55bbe414db 100644 --- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx @@ -64,7 +64,9 @@ interface SideNavigationSubItemAttributes { icon?: string | undefined; /** - * Defines whether the item is selected + * Defines whether the item is selected. + * + * **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable. * @default false */ selected?: boolean; @@ -72,15 +74,16 @@ interface SideNavigationSubItemAttributes { /** * Defines the component target. * - * **Notes:** + * Possible values: * * - `_self` * - `_top` * - `_blank` * - `_parent` - * - `_search` + * - `framename` * - * **This property must only be used when the `href` property is set.** + * **Note:** Items that have a defined `href` and `target` + * attribute set to `_blank` should not be selectable. * * **Note:** Available since [v1.19.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.19.0) of **@ui5/webcomponents-fiori**. * @default undefined @@ -105,15 +108,15 @@ interface SideNavigationSubItemAttributes { tooltip?: string | undefined; /** - * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable. + * Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable. * * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items. * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation. * * * **Guidelines**: - * - External links should be unselectable. - * - Items that trigger actions (with design "Action") should be unselectable. + * - Items with an assigned `href` and a target of `_blank` should be marked as unselectable. + * - Items that trigger actions (with design "Action") should be marked as unselectable. * * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents-fiori**. * @default false diff --git a/packages/main/src/webComponents/Switch/index.tsx b/packages/main/src/webComponents/Switch/index.tsx index 2ecb484fcab..5faede6b5ca 100644 --- a/packages/main/src/webComponents/Switch/index.tsx +++ b/packages/main/src/webComponents/Switch/index.tsx @@ -97,6 +97,13 @@ interface SwitchAttributes { * @default undefined */ tooltip?: string | undefined; + + /** + * Defines the form value of the component. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + */ + value?: string; } interface SwitchDomRef extends Required, Ui5DomRef {} @@ -133,7 +140,7 @@ interface SwitchPropTypes extends SwitchAttributes, Omit( 'ui5-switch', - ['accessibleName', 'accessibleNameRef', 'design', 'name', 'textOff', 'textOn', 'tooltip'], + ['accessibleName', 'accessibleNameRef', 'design', 'name', 'textOff', 'textOn', 'tooltip', 'value'], ['checked', 'disabled', 'required'], [], ['change'], diff --git a/packages/main/src/webComponents/TableSelectionMulti/index.tsx b/packages/main/src/webComponents/TableSelectionMulti/index.tsx index 223da1b0fbd..0b049ec33a6 100644 --- a/packages/main/src/webComponents/TableSelectionMulti/index.tsx +++ b/packages/main/src/webComponents/TableSelectionMulti/index.tsx @@ -3,8 +3,9 @@ import '@ui5/webcomponents/dist/TableSelectionMulti.js'; import type TableRow from '@ui5/webcomponents/dist/TableRow.js'; import type TableSelectionBehavior from '@ui5/webcomponents/dist/types/TableSelectionBehavior.js'; -import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type TableSelectionMultiHeaderSelector from '@ui5/webcomponents/dist/types/TableSelectionMultiHeaderSelector.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; interface TableSelectionMultiAttributes { /** @@ -15,6 +16,14 @@ interface TableSelectionMultiAttributes { */ behavior?: TableSelectionBehavior | keyof typeof TableSelectionBehavior; + /** + * Defines the selector of the header row. + * + * **Note:** Available since [v2.12](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12) of **@ui5/webcomponents**. + * @default "SelectAll" + */ + headerSelector?: TableSelectionMultiHeaderSelector | keyof typeof TableSelectionMultiHeaderSelector; + /** * Defines the `row-key` values of selected rows, with each value separated by a space. * @default undefined @@ -87,7 +96,7 @@ interface TableSelectionMultiPropTypes */ const TableSelectionMulti = withWebComponent( 'ui5-table-selection-multi', - ['behavior', 'selected'], + ['behavior', 'headerSelector', 'selected'], [], [], ['change'], diff --git a/packages/main/src/webComponents/Toast/index.tsx b/packages/main/src/webComponents/Toast/index.tsx index ab231a9c38e..d6bff867523 100644 --- a/packages/main/src/webComponents/Toast/index.tsx +++ b/packages/main/src/webComponents/Toast/index.tsx @@ -48,7 +48,7 @@ interface ToastPropTypes extends ToastAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/UserMenuItem/index.tsx b/packages/main/src/webComponents/UserMenuItem/index.tsx index e7fe65a81d7..fba67377730 100644 --- a/packages/main/src/webComponents/UserMenuItem/index.tsx +++ b/packages/main/src/webComponents/UserMenuItem/index.tsx @@ -49,9 +49,22 @@ interface UserMenuItemAttributes { additionalText?: string | undefined; /** - * Defines whether `ui5-menu-item` is in disabled state. + * Defines whether menu item is in checked state. * - * **Note:** A disabled `ui5-menu-item` is noninteractive. + * **Note:** checked state is only taken into account when menu item is added to menu item group + * with `checkMode` other than `None`. + * + * **Note:** A checked menu item has a checkmark displayed at its end. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents-fiori**. + * @default false + */ + checked?: boolean; + + /** + * Defines whether menu item is in disabled state. + * + * **Note:** A disabled menu item is noninteractive. * @default false */ disabled?: boolean; @@ -77,9 +90,9 @@ interface UserMenuItemAttributes { icon?: string | undefined; /** - * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover. + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover. * - * **Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover. + * **Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover. * * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents-fiori**. * @default false @@ -87,7 +100,7 @@ interface UserMenuItemAttributes { loading?: boolean; /** - * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover. + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover. * * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents-fiori**. * @default 1000 @@ -146,6 +159,7 @@ interface UserMenuItemPropTypes | 'endContent' | 'onBeforeClose' | 'onBeforeOpen' + | 'onCheck' | 'onClose' | 'onDetailClick' | 'onOpen' @@ -184,6 +198,10 @@ interface UserMenuItemPropTypes * The priority of what will be displayed at the end of the menu item is as follows: * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`. * + * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot + * have the correct accessibility behaviour, including their enabled or disabled states. + * The menu does not manage these aspects when the menu item state changes. + * * __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="endContent"`). * 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. * @@ -221,6 +239,17 @@ interface UserMenuItemPropTypes */ onBeforeOpen?: (event: Ui5CustomEvent) => void; + /** + * Fired when an item is checked or unchecked. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onCheck?: (event: Ui5CustomEvent) => void; + /** * Fired after the menu is closed. * @@ -281,9 +310,9 @@ const UserMenuItem = withWebComponent 'tooltip', 'type', ], - ['disabled', 'loading', 'navigated', 'selected'], + ['checked', 'disabled', 'loading', 'navigated', 'selected'], ['deleteButton', 'endContent'], - ['before-close', 'before-open', 'close', 'detail-click', 'open'], + ['before-close', 'before-open', 'check', 'close', 'detail-click', 'open'], ); UserMenuItem.displayName = 'UserMenuItem'; diff --git a/packages/main/src/webComponents/UserMenuItemGroup/index.tsx b/packages/main/src/webComponents/UserMenuItemGroup/index.tsx new file mode 100644 index 00000000000..e00a8dd8ffc --- /dev/null +++ b/packages/main/src/webComponents/UserMenuItemGroup/index.tsx @@ -0,0 +1,64 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js'; +import type MenuItemGroupCheckMode from '@ui5/webcomponents/dist/types/MenuItemGroupCheckMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface UserMenuItemGroupAttributes { + /** + * Defines the component's check mode. + * @default "None" + */ + checkMode?: MenuItemGroupCheckMode | keyof typeof MenuItemGroupCheckMode; +} + +interface UserMenuItemGroupDomRef extends Required, Ui5DomRef {} + +interface UserMenuItemGroupPropTypes + extends UserMenuItemGroupAttributes, + Omit { + /** + * Defines the items of this component. + * **Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both. + */ + children?: ReactNode | ReactNode[]; +} + +/** + * The `UserMenuItemGroup` component represents a group of items designed for use inside a `UserMenu`. + * Items belonging to the same group should be wrapped by a `UserMenuItemGroup`. + * Each group can have an `itemCheckMode` property, which defines the check mode for the items within the group. + * The possible values for `itemCheckMode` are: + * - 'None' (default) - no items can be checked + * - 'Single' - Only one item can be checked at a time + * - 'Multiple' - Multiple items can be checked simultaneously + * + * **Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time. + * If multiple items are marked as checked, the last checked item will take precedence. + * + * ### Usage + * + * `UserMenuItemGroup` represents a collection of `UserMenuItem` components that can have the same check mode. + * The items are addeed to the group's `items` slot. + * + * + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of __@ui5/webcomponents-fiori__. + * @experimental + */ +const UserMenuItemGroup = withWebComponent( + 'ui5-user-menu-item-group', + ['checkMode'], + [], + [], + [], +); + +UserMenuItemGroup.displayName = 'UserMenuItemGroup'; + +export { UserMenuItemGroup }; +export type { UserMenuItemGroupDomRef, UserMenuItemGroupPropTypes }; From 9826342a17cad7bd96c28cce56f6f44b89772632 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 13:25:36 +0200 Subject: [PATCH 03/10] add new wc to root index file --- packages/main/src/webComponents/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 3c35475bbd2..2dc6b596fb1 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -53,6 +53,7 @@ export * from './MediaGallery/index.js'; export * from './MediaGalleryItem/index.js'; export * from './Menu/index.js'; export * from './MenuItem/index.js'; +export * from './MenuItemGroup/index.js'; export * from './MenuSeparator/index.js'; export * from './MessageStrip/index.js'; export * from './MultiComboBox/index.js'; @@ -84,6 +85,7 @@ export * from './SegmentedButton/index.js'; export * from './SegmentedButtonItem/index.js'; export * from './Select/index.js'; export * from './ShellBar/index.js'; +export * from './ShellBarBranding/index.js'; export * from './ShellBarItem/index.js'; export * from './ShellBarSearch/index.js'; export * from './ShellBarSpacer/index.js'; @@ -142,6 +144,7 @@ export * from './UploadCollectionItem/index.js'; export * from './UserMenu/index.js'; export * from './UserMenuAccount/index.js'; export * from './UserMenuItem/index.js'; +export * from './UserMenuItemGroup/index.js'; export * from './UserSettingsDialog/index.js'; export * from './UserSettingsItem/index.js'; export * from './UserSettingsView/index.js'; From 8d59de2fca8665f55b5ef78657d24ddf8c1c6053 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 13:27:29 +0200 Subject: [PATCH 04/10] run wrapper script (compat) --- packages/compat/src/components/Table/index.tsx | 1 + packages/compat/src/components/TableCell/index.tsx | 1 + packages/compat/src/components/TableColumn/index.tsx | 1 + packages/compat/src/components/TableGroupRow/index.tsx | 1 + packages/compat/src/components/TableRow/index.tsx | 1 + 5 files changed, 5 insertions(+) diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx index acc879746a7..c59c09a0e91 100644 --- a/packages/compat/src/components/Table/index.tsx +++ b/packages/compat/src/components/Table/index.tsx @@ -266,6 +266,7 @@ interface TablePropTypes * - `import "@ui5/webcomponents-compat/dist/TableCell.js";` (`TableCell`) * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead. */ const Table = withWebComponent( 'ui5-table', diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx index 32caf097886..f9e679461e2 100644 --- a/packages/compat/src/components/TableCell/index.tsx +++ b/packages/compat/src/components/TableCell/index.tsx @@ -20,6 +20,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit('ui5-table-cell', [], [], [], []); diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx index b0a8ce66def..d216b56cd58 100644 --- a/packages/compat/src/components/TableColumn/index.tsx +++ b/packages/compat/src/components/TableColumn/index.tsx @@ -61,6 +61,7 @@ interface TableColumnPropTypes * when rendering the `Table` component. * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead. */ const TableColumn = withWebComponent( 'ui5-table-column', diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx index d0dee9cfe70..f415fd2669a 100644 --- a/packages/compat/src/components/TableGroupRow/index.tsx +++ b/packages/compat/src/components/TableGroupRow/index.tsx @@ -24,6 +24,7 @@ interface TableGroupRowPropTypes extends TableGroupRowAttributes, Omit( 'ui5-table-group-row', diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx index 2942e682e12..b49c11822fa 100644 --- a/packages/compat/src/components/TableRow/index.tsx +++ b/packages/compat/src/components/TableRow/index.tsx @@ -50,6 +50,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit( 'ui5-table-row', From ce578ccb15c4c3e4e70fdcb226b16f25779961a4 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 14:49:01 +0200 Subject: [PATCH 05/10] Update ThemingParameters.ts --- packages/base/src/styling/ThemingParameters.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts index bec26b5728f..2db19c64fb5 100644 --- a/packages/base/src/styling/ThemingParameters.ts +++ b/packages/base/src/styling/ThemingParameters.ts @@ -17,6 +17,7 @@ export const ThemingParameters = { sapTextColor: 'var(--sapTextColor)', sapLinkColor: 'var(--sapLinkColor)', sapCompanyLogo: 'var(--sapCompanyLogo)', + sapFavicon: 'var(--sapFavicon)', sapBackgroundImage: 'var(--sapBackgroundImage)', sapBackgroundImageOpacity: 'var(--sapBackgroundImageOpacity)', sapBackgroundImageRepeat: 'var(--sapBackgroundImageRepeat)', From 5e87a8a6d5f6023b3ca76f06367de0975fd27e8d Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 4 Jul 2025 15:16:16 +0200 Subject: [PATCH 06/10] MenuItemGroup example --- packages/main/src/webComponents/Menu/Menu.mdx | 6 ++ .../src/webComponents/Menu/Menu.stories.tsx | 61 +++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/packages/main/src/webComponents/Menu/Menu.mdx b/packages/main/src/webComponents/Menu/Menu.mdx index 59550cf436b..59b490d6eb5 100644 --- a/packages/main/src/webComponents/Menu/Menu.mdx +++ b/packages/main/src/webComponents/Menu/Menu.mdx @@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp import { Canvas, Description, Markdown, Meta } from '@storybook/blocks'; import * as ComponentStories from './Menu.stories'; import { MenuItem } from '../MenuItem'; +import { MenuItemGroup } from '../MenuItemGroup'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { excludePropsForAbstract } from '@sb/utils'; @@ -60,4 +61,9 @@ const MyComponentWithMenu = () => { +## MenuItemGroup + + + +